@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;
}
.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;
}

/* --  今回のアングラー  -- */
.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_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: 22px;
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 30px 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;
}

/* -- Greenブロック -- */
.greenArea{
margin-bottom: 45px;
}
.greenArea .greenBox{
padding:33px 16px 35px 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;
}
.greenBox_col_inner{
display: block;
}
.greenBox_colArea{
margin-bottom: 30px;
}
.greenBox_colArea .colBox_2col .colBox{
width: 100%;
margin-bottom: 30px;
}
.greenBox_colArea .capBox{
font-size: 14px;
line-height: 24px;
padding-top: 16px;
}
.greenBox_colArea .colBox:last-child{
margin-bottom: 0;
}
.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;
}

/*-- 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_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;
}


/* 次ページへの導線 */
.nextNav{
padding:33px 0 38px 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: 30px;
}
.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;
}
/* -- 共通 -- */

/* -- 調整用 -- */
.page01-01 .pageContent_inner{
padding-bottom: 0;
margin-bottom: 10vw;
}
.page01-01 .ttlBar{
margin-bottom:28px;
}
.pageContent.page01-02 {
margin-top: 12vw;
}
.page01-02 .talk_multi {
margin-bottom:7.9vw;
}
.page01-02 .talk_multi.last {
margin-bottom:15vw;
}
.page01-03 .ttlBar{
margin-bottom: 20px;
}
.page01-03 .colArea {
margin-bottom: 35px;
}
.pageContent.page01-03 .pageContent_inner{
margin-bottom: 0;
}
.page02-01 .talk_multi.last {
margin-bottom: 40px;
}
.page02-01 .pageContent_inner{
padding-bottom: 0;
}
.page02-02 .pageContent_inner{
margin-top: 40px;
padding-bottom: 0;
}
.page02-02 .oneimgArea {
margin-bottom: 40px;
}
.page02-02 .colArea {
margin-bottom: 30px;
}
.page02-02 .colArea.btm_long {
margin-bottom: 40px;
}
.page02-02 .talk_multi.btm_long {
margin-bottom: 56px;
}
.page02-03.pointArea_inner{
padding-bottom: 30px;
}
.page02-03.pointArea .leadBox {
margin-bottom: 34px;
}
.page02-03.pointArea{
margin-top: 95px;
}
.page02-03.pointArea_inner{
padding-bottom: 30px;
}
.page02-03.pointArea .pointArea_ttl{
margin-bottom: 23px;
}
.page02-03.pointArea .colArea.multipleBox {
margin-bottom: 30px;
}
.page02-03.pointArea .colBox{
margin-bottom: 30px;
}
.page02-04 .pageContent_inner {
padding-top: 0;
padding-bottom: 56px;
margin-top: 78px;
}
.page02-04 .ttlBar {
margin-bottom: 20px;
}
.page02-04 .leadBox.btm_short {
margin-bottom: 33px;
}
.page02-04 .talk_multi.last01 {
margin-bottom: 44px;
}
.page02-04 .colArea.talk_btm {
margin-bottom:40px;
}
.page02-04 .talk_multi.last02 {
margin-bottom: 34px;
}
.page02-04 .talk_multi.last03 {
margin-bottom: 45px;
}
.page02-04 .oneimgArea.talk_btm {
margin-bottom: 50px;
}
.page03 .pageLead-inner{
margin-bottom: 35px;
}
.page03 .pageContent_inner{
padding-bottom:0;
}
.page03-03 .pageContent_inner{
padding-bottom: 0;
}
.page03-01 .pageContent_inner {
margin-top: 34px;
margin-bottom: 0;
}
.page03-02 .pageContent_inner {
margin-top: 20px;
}
.page03-02 .talk_multi{
margin-top: 45px;
margin-bottom: 60px;
}
.greenArea.green01{
margin-bottom: 38px;
}
.greenArea.green01 .greenBox {
padding: 33px 16px 35px 16px;
}
.greenArea.green01 .greenBox_ttl{
margin-bottom: 20px;
}
.greenArea.green02{
margin-bottom: 30px;
}
.greenArea.green02 .greenBox {
padding: 30px 16px 1px 16px;
}
.greenArea.green02 .greenBox_ttl{
margin-bottom: 23px;
}
.greenArea.green02 .colBox .ttlBox {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}



}