@charset "UTF-8";

/*
*********************************************
* 
*	ボートフィッシング SP
*
*********************************************
*/
@media screen and (max-width : 768px){

/* -- ページヘッダ― -- */
.pageHeader{
background-color: #145c6a;
}
.pageHeader .pageHeader_inner{
width: 100%;
padding-right: 0;
padding-bottom: 5%;
box-sizing: border-box;
}
.pageHeader .ttl{
float: left;
width: 60%;
padding-top: 11px;
padding-left: 3.4%;
}
.pageHeader .main-img{
float: right;
width:30.6%;
padding-top: 7%;
padding-right: 4%;
}
.pageHeader_inner:after{
content: "";
display: block;
clear: both;
}

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

/* -- リード文 -- */
.pageLead{
padding-top: 30px;	
}
.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 .pageLead-ttl{
margin-bottom: 30px;	
display: block;
}
.pageLead .pageLead-ttl .num{
padding: 5px 15px;
font-size: 14px;
}
.pageLead .pageLead-ttl .ttl{
display: block;
font-size: 24px;
line-height: 32px;
padding-left: 0;
margin-top: 10px;
}
.pageLead .pageLead-ttl .ttlBox{
display: block;
font-size: 24px;
line-height: 32px;
padding-left: 0;
margin-top: 10px;
}
.numBox.flBox_sp{
display: flex;
}

.pageLead .pageLead-ttl .numBox .num{
margin-right: 10px;
white-space: nowrap;
}
.pageLead .pageLead-ttl .numBox .cate{
font-size: 16px;
display: inline-block;
}
.pageLead-txt{
margin-top: 30px;
font-size: 16px;
line-height: 28px;
}


/* --  ナビゲーター-- */
.navigator{
padding-bottom:3.5vw;
padding-top: 6vw;
margin-bottom: 4vw;
margin-top: 16vw;
}
.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: 45px;
}
.guideProfile_inner{
padding: 0 16px;
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.guideProfile_img{
margin: 0 auto 4px auto;
padding-top: 46px;
width: 127px;
}
.guideProfile_txt{
font-size: 14px;
line-height: 24px;
}
.guideProfile_txt_name{
font-size: 17px;
line-height: 28px;
margin-bottom: 4px;
}
.guideProfile_txt_option{
font-size: 12px;
line-height: 20px;
}


/* == メインコンテンツ == */

/*-- 目次 --*/
.pageLink{
padding: 20px 5%;
    margin-bottom: 45px;
}
.pageLink_ttl{
font-size: 18px;
margin-bottom: 10px;
}
.pageLink_list{
padding-left: 5px;
}
.pageLink_item{
margin-bottom:10px;
}
.pageLink_item a,
.pageLink_item .arrow{
font-size: 16px;
line-height: 1.4;
padding: 0 0 0 16px;
}
.pageLink_item a:before{
top: 0;
left: 0;
width: 10px;
height: 30px;
background-size: 10px 10px;
z-index: 10;
}


/*-- トーク --*/
.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;
}


/* --  トーク：ナビゲーター  -- */
.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;
}
.talk_navi.btm_long{
margin-bottom: 35px;
}

/* -- コンテンツ -- */
.pageContent_inner{
width: 100%;
margin: 40px 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_overimg{
margin-bottom: 0;
padding-bottom: 10px;
}
.pageTtl.insidePage01{
margin-top: 0;
margin-bottom: 45px;
}
.pageTtl.insidePage02{
margin-top: 0;
margin-bottom: 35px;
}
.pageTtl .ttl{
margin-bottom: 30px;
font-size: 24px;
line-height: 34px;
}
.pageTtl .ttl span.switch_pc {
  display: none;
}
.pageContent_inner.btm_overimg .pageTtl .ttl {
  margin-bottom: 0;
}
.pageTtl .ttl_sub{
margin-bottom: 30px;
padding-bottom: 20px;
font-size: 18px;
line-height: 30px;
}
.pageTtl .ttl_sub:after {
width: 48px;
}
.ttlBar{
font-size: 17px;
margin-bottom: 25px;
line-height: 24px;
}
.leadBox,
.leadBox.btm_colArea{
font-size: 16px;
line-height: 28px;
margin-bottom: 45px;
}
.leadBox.topLead{
}
.leadBox .lead_capBox{
font-size: 14px;
line-height: 24px;
margin-top: 30px;
}

.noteBox{
padding: 16px;
}
.noteBox .noteBox_ttl{
margin-bottom: 5px;
}
.noteBox .noteBox_link{
margin-bottom: 10px;
}
.noteBox .noteBox_link:last-child{
margin-bottom: 0;
}

/* -- カコミ -- */
.kakomiArea .kakomi_inner{
padding:16px;
}
.kakomiArea .detailBox .ttl{
font-size: 16px;
line-height: 24px;
}
.kakomiArea .detailBox .detail{
font-size: 14px;
line-height: 22px;
}


/*-- 動画エリア --*/
.movieArea.point_before{
margin-bottom: 40px;
}



/* -- Greenブロック -- */
.greenArea{
margin-bottom: 45px;
}
.greenArea .greenBox{
padding:25px 16px 35px 16px;
}
.greenArea .greenBox_ttl{
font-size: 17px;
font-weight: bold;
line-height: 24px;
margin-bottom: 25px;
}
.greenArea .greenBox_oneimg{
margin-bottom: 30px;
}
.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: 30px;
}
/* -- アコーディオン -- */
.greenArea .accBox{
padding:0;
}
.accBox_ttl{
font-size: 17px;
font-weight: bold;
line-height: 24px;
  margin-bottom: 0;
  padding: 20px 15%;
}

/* -- ポイント -- */
.pointArea{
padding-top:30px;
margin-bottom: 0;
}
.pointArea.moreTop{
margin-top: 0;
}
.pointArea.lastBtm{
margin-bottom: 50px;
}
.pointArea_ttl {
font-size: 17px;
line-height: 24px;
margin-bottom: 30px;
}
.pointArea_ttl.fontBig_sp{
font-size: 20px;
line-height: 32px;
}
.pointArea_ttl::before{	
background-size: 61px auto;
top: -60px;
padding-top: 60px;
}
.pointArea_inner{
padding: 0 16px;
padding-bottom: 20px;
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 .btnBox {
width: 100%;
margin-bottom: 30px;
}
.pointArea .btnBox a {
font-size: 16px;
padding: 11px 0;
}
.pointArea .btnBox a:after {
top: 31%;
right: 12px;
width: 12px;
height: 20px;
background-size: 12px 12px;
}


/*-- カラム --*/
.oneimgArea,
.multiimgArea,
.colArea,
.colArea.btm_ttlBar{
margin-bottom: 45px;
}
.colArea.btm_leadBox{margin-bottom: 45px;}
.oneimgArea .capBox,
.multiimgArea .capBox{
padding-top: 17px;
}
.colArea_inner{
display: block;
}
.colBox_2col .colBox,
.colBox_3col .colBox{
width: 100%;
margin-bottom: 30px;
}
.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: 16px;
}
.colArea .colBox:last-child{
margin-bottom: 0;
}
.oneimgArea.multipleBox,
.multiimgArea.multipleBox,
.colArea.multipleBox{
margin-bottom: 30px;
}
.pageAttention{
font-size: 12px;
line-height: 20px;
margin-bottom: 55px
}
.pagebottom_inner{
width: 100%;
padding: 0 16px;
box-sizing: border-box;
margin-bottom: 45px;
}



/*-- 画像（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;
}


/*-- リンクボックス--*/
.articleLinkBox{
margin-bottom: 40px;
}
.articleLinkBox .articleLinkBox_inner{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
border: 1px solid #e5eded;
padding: 15px 10px;
box-sizing: border-box;
position: relative;
}
.articleLinkBox .articleLinkBox_inner::after{
width:12px;
height:12px;
right: 8px;
}
.articleLinkBox .phBox{
width: 41%;
}
.articleLinkBox .detailBox{
width:55%;
padding-left: 10px;
}
.articleLinkBox .detailBox .ttl{
font-weight: bold;
font-size: 16px;
line-height: 1.4;
}

/* レシピ */
.recipe_inner{
width: 90%;
margin: 0 auto;
}
.recipe_clm, .recipe_clm_box{width: 100%;}
.recipe_clm_boxTri{width: 100%;}
.recipe_top{
width:90%;
margin:0 auto 34px auto;
padding: 13px 0 0 0;
}
.recipe_top .multiimgArea {
  margin-top: 25px;
}
.recipe_ttl{
margin-bottom: 18px;
font-size: 20px;
line-height: 30px;
}
.recipe_topImg{margin-bottom: 25px;}
.recipe_ttl-cap{padding-left: 0; font-size:15px; }
.recipe_ttl_subTtl{
margin-bottom: 14px;
font-size: 17px;
line-height: 24px;
}
.recipe_top-lead{font-size: 16px; line-height: 28px;}
.recipe_wrapMat{padding: 34px calc(50vw - 50%); margin-bottom: 34px;}
.recipe_menuttl {
margin-bottom: 20px;
padding-left: 0;
font-size: 17px;
line-height: 17px;
}
.recipe_topImg{
  margin-top: 25px;
}
.recipe_menuSttl{
font-size: 16px;
line-height: 24px;
}
.recipe_materials_list li{
font-size: 14px;
line-height: 22px;
margin-bottom: 5px;
}
.recipe_clm_box_txt{
font-size: 16px;
line-height: 28px;
}
.recipe_clm_box{
float: none;
margin-right: 0;
margin-bottom: 34px;
width: 100%;
}
.recipe_clm_boxTxt{
font-size: 16px;
line-height: 28px;	
padding-top: 18px;
}	
.recipe_wrapList{padding: 34px 0; margin-bottom: 34px;}
.recipe_clm_boxTri{
float: none;
margin-right: 0;
margin-bottom: 34px;
width: 100%;
}
.recipe_clm_boxTri:last-child{margin-bottom: 0;}	
.recipe_img{margin-bottom: 10px;}	
.recipe_name{
font-size: 16px;
line-height: 24px;
}
.recipe_clm_box_number{
width: 32px;
height: 32px;
font-size: 16px;
line-height: 32px;
}
.recipePoint {
margin-top: 75px;
padding-top: 74px;
padding-bottom: 5px;
}
.recipePoint_inner{
width: 90%;
margin: 0 auto;	
padding-bottom: 5px;
}	
.recipePoint_ttl {
top: -30px;
padding-top: 53px;
font-size: 17px;
line-height: 24px;
background-size: 61px auto;
}
.recipePoint_Sttl{
margin-bottom: 20px;
font-weight: bold;
font-size: 16px;
line-height: 24px;
}
.recipe_clm_box-sp_mb{margin-bottom:0;}	
.recipePoint_lead{	
margin-bottom: 40px;
width: 100%;
font-size: 16px;
line-height: 28px;
}
	
/* 次ページへの導線 */
.nextNav{
padding: 33px 0 50px 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-two{
width:50%;
}
.pageNavigation .page_link.page-three{
width: 80%;
}
.pageNavigation .page_link .linkBox{
width: 12%;
}
.pageNavigation .page_link.page-two .linkBox{
width: 18%;
}
.pageNavigation .page_link.page-three .linkBox{
width: 15%;
}
.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%;
}


/*-- ボトムナビゲーション --*/

.pageBtm{
height: auto;
}
.backLink{
text-align: center;
margin:0 0 60px;
}
.pageBtm_backLink{
display: inline-block;
text-align: center;
padding-bottom: 28px;
}
.pageBtm_backLink a{
padding: 5px 23px 5px 23px;
font-size: 14px;
line-height: 22px;
background-size: 12px auto;
}
	
/*-- 予告 --*/
.tocArea{
display:block;
}	
.tocArea .tocBox{
width: 100%;
padding: 15px 10px;
margin-bottom: 15px;	
}
.tocArea .tocBox:last-child{
margin-bottom: 0;
}
.tocArea .tocBox.linkArea{
padding: 0;
}
.tocArea .tocBox.linkArea a{
padding: 15px 10px;

}
.tocArea .tocBox.linkArea a:after{
content: "";
display: block;
clear: both;
}

.tocArea .tocBox .phBox{
float: left;
width: 41%;
}
.tocArea .tocBox .detailBox{
float: right;
width: 55%;
padding-left: 0;
}
.tocArea .tocBox .detailBox .ttl{
font-size: 18px;
line-height: 24px;
}
.tocArea .tocBox .dateBox{
font-size:16px;
line-height:24px;
float: left;
width: 100%;	
padding-left: 0;
}
.tocArea .tocBox .detailBox .ttl .ttl_cate{
display: block;
margin-bottom: 10px;
}

/* -- 今回使用した船外機 --*/
.boat_product{
padding:25px 0 35px 0;
margin-top: 0;
}
.boat_product .pageContent_inner {
width: 100%;
}
.boat_product .product_ttl{
font-size: 20px;
line-height: 35px;
}
.boat_product .productBox{
margin-top:20px;
}
.boat_product .productBox .phBox{
float: left;
width:41%;
}
.boat_product .productBox .ttlBox{
float: right;
width: 59%;
padding-top: 0;
padding-left: 0;
}
.boat_product .productBox .ttlBox .productName {
font-size:24px;
}
.boat_product .productBox .ttlBox .ttl{
font-size: 16px;
line-height: 24px;
}

.boat_product .productBox .txtBox{
float: left;
width: 100%;
padding-left: 0;
padding-top: 10px;
font-size: 14px;
line-height: 24px;
}

.boat_product .productBox .btnBox{
float: left;
width: 100%;
padding-top: 40px;
padding-left: 0;
}
.boat_product .productBox .btnBox .btn{
width: 100%;
margin: 0 auto;
}
.boat_product .productBox .btnBox a{
font-size: 16px;
padding: 11px 0;
}
.boat_product .productBox .btnBox a:after {
top: 31%;
right: 12px;
width: 12px;
height: 20px;
background-size: 12px 12px;
}

.boat_product .productBox::after{
content: "";
display: block;
clear: both;
}	
/* -- 共通 -- */
.lastBtm{margin-bottom: 90px;}
.spBtm30{margin-bottom: 30px;}

}