@charset "utf-8";
/* CSS Document */





/* TOP画像

====================================================*/

/* --- 全体 --- */
.ofical_app_main__wrapper *{
box-sizing: border-box;
}

.ofical_app_main__wrapper img{
max-width: 100%
}

.ofical_app_main__wrapper{
max-width: 100%;
padding: 0;
}

.ofical_app_guide-wrap{
max-width: 100%;
}

.app_guide_hd{
max-width: 880px;
margin: 0 auto;
}

.fearure-wrap_contetnt{
max-width: 880px;
margin: 0 auto;
}



.ofical_app_main__contet{
width: 100%;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-align: end;
align-items: flex-end;
}


.app_feature_wrapper{
margin: 40px 0;

}

.app_feature_wrapper h2{
text-align: center;
font-size: 24px;
margin-bottom: 40px;

}
.app_feature_wrapper h2 span{
display: inline-block;

}
.section_block{
padding: 40px 20px;

}

.bg_g{
background-color: #ededed;

}

.bg_f{
background-color: #FFFFFF;

}

.app_pc_only{
display: block;

}

.app_sp_only{
display: none!important;

}

.anchor {
    padding-top: 160px;
    margin-top: -160px;
    display: block;
}

.guide-nav{
 width: 100%;
max-width: 880px;
margin: 0 auto;
padding: 20px;
}



/* --- 公式タイトル --- */
.title{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
}
.title img{
width: 100%; 
max-width: 122px;
height: auto;
}

.title p{
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: start;
justify-content: flex-start;
position: relative;
}

.title p span {
display: block;
font-weight: 600;
line-height: 1.2;

}

.fs-s{
font-size: 24px;
margin-left: 5px;

}

.fs-b{
font-size: 60px;

}
/* --- 画像 --- */
.ofical_app_main__contet_img{
width: 34%;
padding: 10px;
}

.ofical_app_main__contet_img{
width: 30%;
}

/* --- ストアリンクエリア --- */
.app_store_link_area{
width: 70%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
padding: 20px;
margin-bottom: 20px;
}

.app_store_link_area p{
width: 100%;
display: block;
font-size: 36px;
margin-bottom: 20px;
font-weight: bold;
line-height: 1.5;
}

.app_store_link_area p span{
display: inline-block;
}

.app_store_links{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: start;
justify-content: flex-start;
width: 100%;
margin-bottom: 0;
}


.app_store_links a{
display: block;
height: 77px;
border-bottom: none;
}

.app_store_links a:first-child {
margin-right: 20px;
}
.app_store_links a img{
width: auto;
height: 100%;
}
.text-links {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
margin: 0 auto 20px;
font-size: 18px;
}

.text-links a{
text-decoration: none;
background-color: #005A8C;
color: #ffffff;
border-bottom: none;
padding: 0.25em 1em;
display: block;
border-radius: 6px;
margin: 0 20px;
}

.pdf_link:after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(/PC/ja/asset/img/nw/guide/app/pdf_link.svg);
  background-size: contain;
  vertical-align: middle;
  margin-left: 0.5em;
  margin-bottom: 0.25em;
}

.text-links a:hover{
background-color: #004267;

}

.os_note

{
margin-top: 20px;
padding: 0 0.5em;
}

/* --- 特徴 --- */

.feature_contet{
position: relative;
height: 360px;
}


.fearure_img{
position: absolute;
width: 30%;
padding: 0 40px;
top:0;
left: 0;
}

.section_block-r .fearure_img{
left: 70%;
}

.fearure_img img{
width: 100%;
}	
.fearure_info{
display: block;
width: auto;
position: absolute;
top:100px;
left: 30%;
}

.section_block-r .fearure_info{
left: 0;
width: 66%;
}

.feature_title{
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
align-items: center;
/*width: 100%;*/
position: absolute;
top:0;
left: 30%;
}


.section_block-r .feature_title{
top:0;
left: 0;
}
.feature_title h3{
font-size: 30px;
text-align: left;
padding-top: 20px;
}
.feature_title h3 span{
display: block;
font-size: 24px;
margin: 0;
padding: 0;
line-height: 0.8
}

.feature_title img{
width: auto;
height: 80px;
}

.fearure_info p{
font-size: 18px;
  background-image: linear-gradient(90deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 49%, #ededed 50%, #ededed 100%), linear-gradient(180deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 96%, #515151 100%);
  background-repeat: repeat-x,repeat-y;
  background-size: 6px 100%,100% 2.0em;
  line-height: 2.0;
}

.bg_f .fearure_info p{
font-size: 18px;
  background-image: linear-gradient(90deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 49%, #fff 50%, #fff 100%), linear-gradient(180deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 96%, #515151 100%);
  background-repeat: repeat-x,repeat-y;
  background-size: 6px 100%,100% 2.0em;
  line-height: 2.0;
}
.note{
font-size: 13px;
}
/* --- ポイントについて --- */
.about_point{
width: 100%;
max-width: 880px;
margin: 0 auto 40px;
padding: 0 20px;
}
.about_point h2{
width: 100%;
display: block;
background-color: #70bad1;
padding: 0.5em 1em;
border-radius: 6px 6px 0 0;
color: #FFFFFF;
}

.about_point__inner{
border: #70bad1 solid 1px;
border-radius: 0 0 6px 6px;
box-sizing: border-box;
padding: 20px;
}

.about_point__inner ul{
list-style: none;
padding: 0;
margin: 0;
background-image: linear-gradient(90deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 49%, #fff 50%, #fff 100%), linear-gradient(180deg, rgba(80, 80, 80, 0) 0%, rgba(80, 80, 80, 0) 96%, #70bad1 100%);
background-repeat: repeat-x,repeat-y;
background-size: 6px 100%,100% 2.0em;
line-height: 2.0;
}

.about_point__inner ul li{
margin-left: 1.2em;
text-indent: -1em;
padding-left: 1em;
}

.about_point__inner ul li::before{
 content: "⚫︎";
 color: #70bad1; 
 font-size: 0.6em; 
 margin-right: 1em; /* 余白 */

}

.about_point__inner ul li span{
font-weight: bold;
}
@media screen and (max-width: 860px) {
	
.app_store_link_area p {
    font-size: 30px;
}
.app_store_links {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: start;
justify-content: flex-start;
width: 100%;
margin-bottom: 40px;
}
.app_store_links a {
height: 60px;
margin-right: 20px;
}

}


@media screen and (max-width: 830px) {
.fearure_img {
    padding: 0 20px;
}
	.feature_title h3{
    font-size: 24px;
}
	
	
	.feature_title h3 span {
    font-size: 20px;
}
	
.fearure_info p,.bg_f .fearure_info p {
 font-size: 16px;
}

}

@media screen and (max-width: 760px) {
    .app_store_link_area p {
        font-size: 24px;
    }
}
	
	
	
@media screen and (max-width: 700px) {

.title img{
width: 100%; 
max-width: 80px;
height: auto;
}


.title p span {
display: block;
font-weight: 600;
line-height: 1.2;

}
.ofical_app_main__contet_img {
    width: 32%;
}
.app_store_link_area {
    width: 68%;
}
.ofical_app_main__contet {
-webkit-box-align: center;
align-items: center;
padding: 10px;
}

.app_store_link_area p {
 font-size: 24px;
    }
	
.app_store_qr{
display:none;
}

.fs-s{
font-size: 18px;
margin-left: 5px;

}

.fs-b{
font-size: 40px;

}
	
	
.section_block {
    padding: 40px 0;
}
	
.feature_contet{
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
height: auto;
	
}

.feature_title {
 width: 100%;
-webkit-box-pack: center;
justify-content: center;
position: relative;
top:0;
left: 0;
margin-bottom: 20px;
}

.fearure_img,.section_block-r .fearure_img {
 padding: 0;
position: relative;
top:0;
left: 0;
width: 100%;
max-width: 200px;
margin: 0 auto;
}
.fearure_img img {
padding: 0;
position: relative;
top:0;
left: 0;
width: 100%;
}
	
.feature_title h3{
    font-size: 20px;
text-align: left;
}

.fearure_info,.section_block-r .fearure_info {
position: relative;
top:0;
left: 0;
margin: 20px;
}
.section_block-r .fearure_info {
width: auto;
}
	
.feature_title h3 span {
    font-size: 18px;
}
    .app_store_links a {
        height: 52px;
        margin-right: 10px;
    }
}
@media screen and (max-width: 600px) {
.app_pc_only{
display: none!important;

}

.app_sp_only{
display: flex!important;
}
	
    .app_store_links {
        display: -webkit-box;
        display: flex;
        flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
        width: 100%;
}
	    .app_store_links a {
        height: 56px;
		margin: 0 10px;
        /* margin-right: 20px; */
    }
.app_store_links a:first-child {
    margin-right: 0;
}

}	

@media screen and (max-width: 434px) {
	    .app_store_links a {
        height: 50px;
		margin: 0 10px;

}
}