@charset "UTF-8";

/*
*********************************************
* 
*　SP
*
*********************************************
*/
@media screen and (max-width : 768px){

/* -- ヘッダーパンくず -- */
.headerBread_inner{
width: 100%;
padding: 15px 16px;
box-sizing: border-box;
}

/*-- メインビジュアル --*/
.mainArea .mainArea-inner{
max-width: 100%;
margin: 0 auto;
}
.mainArea .mainArea-img{
padding-top: 100%;
background: url(../image/page1_main_sp.jpg) center center no-repeat;
background-size: cover;
}

/* -- リード文 -- */
.pageLead{
padding-top: 17px;
}
.pageLead.underPage{
padding-top: 1px;
}
.pageLead-inner{
width: 100%;
padding: 0 16px;
margin-bottom: 30px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.pageLead.underPage .pageLead-inner{
padding: 0;
margin-bottom: 22px;        
}
.pageLead .pageLead-ttl{
margin-bottom: 30px;
}
.pageLead.underPage .pageLead-ttl{
margin-bottom: 0;
}
.pageLead .pageLead-ttl .ttl{
display: block;
font-size: 24px;
line-height: 32px;
padding-left: 0;
margin-top: 10px;
}
.pageLead.underPage .pageLead-ttl .ttl{
margin-top: 0;
}
.pageLead .pageLead-ttl .ttlBox{
display: block;
font-size: 24px;
line-height: 30px;
padding-left: 0;
margin-top: 10px;
}
.pageLead-txt{
margin-top: 30px;
font-size: 16px;
line-height: 28px;
}

/* --  ナビゲーター-- */
.navigator{
padding-bottom:3.5vw;
padding-top: 6vw;
margin-bottom: 4vw;
}
.navigator_ttl{
font-size: 17px;
margin-bottom: 2vw;
}
.navigator_inner{
padding: 0 16px;
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.navigatorBox{
margin-bottom: 4.5vw;
}
.navigator_img{
margin:0 auto 7vw auto;
width: 21.67vw;
}
.navigator_name{
width:69vw;
font-size: 17px;
line-height: 28px;
box-sizing: border-box;
padding-left: 6vw;
padding-top: 10px;
margin-bottom: 7vw;
}
.navigator_txt{
width: 100%;
font-size: 14px;
line-height: 24px;
text-align: left;
}



/* --  今回のアングラー  -- */
.guideProfile{
padding-bottom:4.5vw;
padding-top: 6vw;
}
.guideProfile_ttl{
font-size: 17px;
margin-bottom: 6vw;
}
.guideProfile_inner{
padding: 0 16px;
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.guideProfileBox{
display: block;
margin-bottom: 10.5vw;
}
.guideProfile_detail{
width: 100%;
}
.guideProfile_img{
margin:0 auto 5vw auto;
width: 34.67vw;
}
.guideProfile_img img{
border-radius: 20vw;
}
.guideProfile_txt{
font-size: 14px;
line-height: 24px;
text-align: left;
}
.guideProfile_name{
font-size: 17px;
line-height: 28px;
margin-bottom: 3.5vw;
text-align: center;
}
.guideProfile_txt_option{
font-size: 12px;
line-height: 20px;
}

/* == メインコンテンツ == */
/* -- コンテンツ -- */
.pageContent_inner{
width: 100%;
margin: 30px 0 0 0;
padding: 0 16px 45px 16px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.pageContent.spWide .pageContent_inner{
padding: 0;
}
.pageContent_inner.btm_small{
margin-bottom: 0;
padding-bottom: 0;
}
.pageContent_inner.btm_short{
margin-bottom: 66px;
padding-bottom: 0;
}
.pageContent_inner.btm_point{
margin-top: 31px;
}
.leadBox{
font-size: 16px;
line-height: 28px;
margin-bottom: 35px;
}
.leadBox.topLead{
margin-bottom: 45px;
}
.leadBox.btm_talk{
margin-bottom: 20px;
}
.leadBox.btm_ttlBar{
margin-bottom: 50px;
}

/*-- 見出し --*/  
.ttlBar{
font-size: 17px;
margin-bottom: 30px;
line-height: 24px;
padding-left: 12px;
}

/*-- カラム --*/
.oneimgArea{
margin-bottom: 35px;
}
.colArea{
margin-bottom: 35px;
}
.oneimgArea.btm_long{
margin-bottom: 30px;
}
.oneimgArea.btm_talk{
margin-bottom: 25px;
}
.colArea.btm_long{
margin-bottom:45px;
}
.oneimgArea.btm_short {
margin-bottom: 30px;
}
.oneimgArea .capBox{
padding-top: 17px; 
}
.colArea_inner{
display: block;
}
.colBox_2col .colBox{
width: 100%;
margin-bottom: 35px;
}
.colArea .colBox_2col .colBox .btm_txtBox{
margin-bottom: 30px;
}
.colArea .colBox_2col .colBox .imgTtl{
font-size: 17px;
line-height: 24px;
margin-bottom: 15px;
}
.colArea .colBox .txtBox{
font-size: 16px;
line-height: 28px;
}
.colArea .capArea,
.colBox_2col .capBox{
font-size: 14px;
line-height: 24px;
padding-top: 20px;
}
.colArea .colBox:last-child{
margin-bottom: 0;
}
.oneimgArea.multipleBox{
margin-bottom: 35px;
}
.colArea.multipleBox{
margin-bottom: 35px;
}
.pageAttention{
font-size: 12px;
line-height: 20px;
margin-bottom: 55px
}
.pagebottom_inner{
width: 100%;
padding: 0 16px;
box-sizing: border-box;
margin-bottom: 45px;
}

/*-- トーク --*/
.talk_multi {
margin:0 0 35px 0;
}
.talk_multi:last-child{
margin-bottom: 0;
}
.btm_talk + .talk_multi{
margin-top: 28px;
}
.talk_multi.top_short{
margin-top: 34px;
}
.talk_multi.top_small{
margin-top: 0;
}
.talk_multi.btm_long{
margin-bottom: 45px;
}
.talk_multi.btm_short{
margin-bottom: 40px;
}
.talk_multi.oneimg_after{
margin-top: 0;
}
.talk_multi .talk_inner{
width: 100%;
}
.talk_multi .talk_inner .imgArea{
width: 13.995%;
z-index: 2;
}
.talk_multi.talk01 .talk_inner .imgArea {
margin:0 0 -25px 17px;
}
.talk_multi.talk02 .talk_inner .imgArea {
margin:0 18px -30px 0;
}
.talk_multi .talk_inner .talkArea{
width: 100%;
}
.talk_multi .talk_inner .txt{
padding: 36px 18px 33px 17px;
font-size: 16px;
line-height: 28px;
font-weight: 400;
border-radius: 15px;
}
.talk_multi.talk01 .talk_inner .txt::before,
.talk_multi.talk02 .talk_inner .txt::before{
content:none;
}
.talk_multi.talk02 .talk_inner{
margin-left: 0;
}


/* --  トーク：ナビゲーター  -- */
.talk_navi{
margin-bottom: 30px;
font-size: 16px;
font-weight: bold;
line-height: 28px;
}
.talk_navi p {
padding-left: 1.5em;
text-indent: 0em;
position: relative;
}
.talk_navi p::before{
content: "―";
width: 1em;
height: 1em;
position: absolute;
left: 0em;
}
.talk_navi.nextNote {
margin-bottom: 20px;
}


/* -- Greenブロック -- */
.greenArea{
margin-bottom: 45px;
}
.greenArea .greenBox{
padding:33px 16px 3px 16px;
}
.greenArea .greenBox_ttl{
font-size: 17px;
font-weight: bold;
line-height: 24px;
margin-bottom: 25px;
}
.greenArea .greenBox_oneimg{
margin-bottom: 22px;
}
.greenArea .greenBox_lead{
font-size: 16px;
line-height: 28px;
margin-bottom: 30px;
}
.greenArea .greenBox_col_inner{
display: block;
}
.greenArea .greenBox_colArea{
margin-bottom: 30px;
}
.greenArea .greenBox_colArea .colBox_2col .colBox{
width: 100%;
margin-bottom: 30px;
}
.greenArea .colBox .ttlBox {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.greenArea .greenBox_colArea .capBox{
font-size: 14px;
line-height: 24px;
padding-top: 16px;
}
.greenArea .greenBox_colArea .colBox:last-child{
margin-bottom: 0;
}
.greenArea .greenBox_colArea.multipleBox{
margin-bottom: 33px;
}
.greenArea .greenBox_btn{
width:100%;
height:auto;
}
.greenArea .greenBox_btn a{
font-size: 16px;
padding: 20px 0;
}
.greenArea .txtArrow-right {
background: url(../../../../common/image/ic_arrow_base_right.png) 0 7px no-repeat;
background-size: 10px 10px;
padding-left: 14px;
}
.greenArea .linkBox {
margin-top: 23px;
}

/* -- Green colブロック -- */
.greenCol{
margin-bottom: 0;
}
.greenCol .greenBox{
padding:25px 18px 30px 18px;
}
.greenCol .greenBox_ttl{
font-size: 17px;
font-weight: bold;
line-height: 24px;
margin-bottom: 25px;
}
.greenCol .box{
display:block;
background-color: #fff;
font-size: 14px;
line-height: 24px;
padding: 13px 18px 20px 18px;
border-radius: 10px;
margin-bottom: 14px;
}
.greenCol .ttl{
font-size: 16px;
line-height: 28px;
font-weight: bold;
width: 100%;
margin-bottom: 4px;
}
.greenCol .detail{
font-size: 14px;
line-height: 24px;
width:100%;
}

/*-- 注意書き（小フォント）--*/
.noteArea{
font-size: 12px;
line-height: 20px;
margin-bottom: 30px;
}




/*-- kakomiArea --*/
.kakomiArea{
margin-bottom: 45px;
font-size: 16px;
line-height: 28px;
}
.kakomiArea .kakomi_inner{
padding: 16px;
margin-top: 15px;
}
.kakomiArea .ttlBox{
font-size: 16px;
font-weight: bold;
margin-bottom: 12px;
line-height: 1.5;
}
.kakomiArea .linkBox{
font-size: 16px;
line-height: 24px;
margin-bottom: 10px;
}

.kakomiArea .txtArrow-right{
background-position: 0 6px;
background-size: 9px;
padding-left: 15px;
}

/*-- 画像（OVER）  --*/
.overimgArea{
max-width: 100%;
margin: 0 auto;
}
.overimgArea.btm_small{
margin-bottom: 0;
}
.overimgArea.btm_short{
margin-bottom: 30px;
}
.overimgArea .capBox{
max-width: 100%;
font-size: 14px;
line-height: 24px;
padding: 16px 16px 0 16px;
}

/* -- ポイント -- */
.pointArea{
padding-top:30px;
margin-bottom: 0;
margin-top: 20px;
}
.pointArea.top_long{
margin-top: 73px;
}
.pointArea_ttl {
font-size: 17px;
line-height: 24px;
margin-bottom: 30px;
}

.pointArea_ttl::before{
background-size: 61px auto;
top: -60px;
padding-top: 60px;
}
.pointArea_inner{
padding: 0 16px;
padding-bottom: 10px;
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.pointArea_inner{
padding:0 16px 28px 16px;
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.pointArea_lead{
margin-bottom: 30px;
font-size: 16px;
line-height: 28px;
}
.pointImg_col01{
margin-bottom:30px;
}
.pointImg_col01_caption{
font-size: 14px;
line-height: 24px;
}
.pointArea .numberBox .ttl{
font-weight: bold;
margin-bottom: 5px;
}
.pointArea .oneimgArea.btm_short{
margin-bottom: 25px;
}
.pointArea .leadBox {
margin-bottom: 37px;
}
.pointArea .oneimgArea,
.pointArea .colArea {
margin-bottom: 40px;
}

/* -- snsBtn 最終ページ -- */
.snsBtn.lastPage{
margin-top: 60px;
}


/* 次ページへの導線 */
.nextNav{
padding:38px 0 31px 0;
margin-top: 0;
background-size: 78px auto;
}
.nextNav_link{
padding: 0 25px;
background-size: 14px 14px;
}
.nextNav_link_sub{
font-size: 14px;
line-height: 22px;
}
.nextNav_link_main{
font-size: 17px;
line-height: 22px;
}
.pageAttention{
font-size: 12px;
line-height: 20px;
margin-bottom: 0;
}

/*-- ページナビゲーション --*/
.pageNavigation {
margin-bottom:41px;
}
.pageNavigation .page_link{
width:100%;
}
.pageNavigation .page_link.page-three{
width: 60%;
}
.pageNavigation .page_link .linkBox{
width: 12%;
}
.pageNavigation .page_link.page-three .linkBox{
width: 14%;
}
.pageNavigation .page_link .linkBox,
.pageNavigation .page_link .linkBox.active{
font-size: 14px;
}
.pageNavigation .page_link .linkBox.active,
.pageNavigation .page_link .act_none,
.pageNavigation .page_link .linkBox a{
padding: 10px 0 8px 0;
}
.pageNavigation .page_prev span,
.pageNavigation .page_next span{
font-size: 0;
}
.pageNavigation .page_prev span::before{
width: 8px;
height: 8px;
top: 50%;
left: 45%;
}
.pageNavigation .page_next span::before{
width: 8px;
height: 8px;
position: absolute;
top: 50%;
right: 45%;
}
.pageNavigation .link_indicator{
padding-left: 0;
}
/* -- 共通 -- */
.backLink{
text-align: center;
margin: -20px 0 60px;
}
.pageBtm_backLink{
display: inline-block;
text-align: center;
}
.pageBtm_backLink a{
display: inline-block;
padding: 5px 32px 5px 32px;
color: #05474d;
font-size: 16px;
line-height: 28px;
font-weight: bold;
background: url(../../../../common/image/ic_list.png) 0 center no-repeat;
background-size: 16px 13px;
}


/* -- 調整用 -- */
.page01-01 .pageContent_inner{
padding-bottom: 0;
margin-bottom: 19vw;
}
.page01-01 .ttlBar{
margin-bottom:28px;
}
.page01-03 .pageContent_inner {
margin-top: 75px;
padding-bottom: 0;
}
.page01-03 .ttlBar{
margin-bottom: 30px;
}
.page01-04 .pageContent_inner {
margin-top:23px;
margin-bottom: 0;
padding-bottom: 10px;
}
.page01-04 .talk_multi.talk01 {
margin-bottom: 30px;
}
.page01-04 .talk_multi.talk02 {
margin-bottom: 30px;
}
.page01-05 .pointArea_inner div:last-child {
margin-bottom: 0;
}
.page02-01 .pageContent_inner{
padding-bottom: 20px;
}
.page02-01 .leadBox {
margin-bottom: 27px;
}
.page02-01 .talk_navi.block01{
margin-bottom: 27px;
}
.page02-01 .block01.talk_multi{
margin-bottom: 30px;
}
.page02-01 .talkAfter {
margin-top: 40px;
margin-bottom: 44px;
}
.page02-01 .talkAfter02 {
margin-top: 43px;
margin-bottom: 40px;
}
.page02-01 .block03.talk01 {
margin-bottom: 30px;
}
.page02-01 .block04.talk_navi {
margin-bottom: 49px;
margin-top: 0;
}
.page02-02 .pageContent_inner{
margin-top: 38px;
padding-bottom: 0;
}
.page02-02 .block01.oneimgArea {
margin-top: 33px;
}
.page02-02 .block02.talk_multi {
margin-bottom: 18px;
}
.page02-02 .block02.oneimgArea {
margin-top: 43px;
margin-bottom:22px;
}
.page03-04 .pageContent_inner{
margin-top: 38px;
padding-bottom: 0;
}
.pointArea.page01-05{
margin-top:95px;
}
.page01-03 .block01.talk02,
.page02-01 .block02.talk_multi,
.page02-01 .block03.talk_multi,
.page02-01 .block04.talk_multi,
.page02-02 .block01.talk_multi,
.page02-02 .block02.talk_multi,
.page03-01 .block01.talk02,
.page03-01 .block02.talk01,
.page03-03 .block01.talk01,
.page03-03 .block02.talk02,
.page03-03 .block03.talk01,
.page03-03 .block04.talk01{
margin-bottom: 30px;
}


}