@charset "UTF-8";

/* *******************************************************************************************
* 
*	釣魚図鑑 SP
*
******************************************************************************************* */

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

/* -------------------------------------------------------------------------------------------
*
* 釣魚図鑑
*
* ----------------------------------------------------------------------------------------- */

/* ----------------------------- ページヘッダー ----------------------------- */

.pageHeader_ttl-books{
padding: 18px 0;
background: url(../image/index_bg-books_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.pageHeader_ttl_icon-books{
padding-left: 57px;
padding-right: 10px;
background-size: 45px auto;
}

/* ----------------------------- 釣魚図鑑コンテンツ ----------------------------- */

.books{
padding: 30px 0 15px 0;
}

/* 一覧ナビゲーション */

.books_header{
margin: 0 auto 30px auto;
padding: 0 8px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.books_header-btm{
padding-top: 30px;
}
.books_catNav{
padding: 0 8px;
margin-right: 0;
margin-bottom: 14px;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.books_seasonNav{
padding: 0 8px;
margin-right: 0;
margin-bottom: 14px;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.books_jpNav{
padding: 0 8px;
margin-right: 0;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* セレクトボックス */
.selectLayer{
top: 34px;
left: 0;
}
.selectBox_option_list{
width: 100%;
}
.selectBox_option_list_item a,
.selectBox_option_list_item span{
padding-left: 13px;
width: 768px;
font-size: 12px;
line-height: 20px;
height: 36px;
}
.selectBox_option_list_item .unable{
padding-left: 13px;
width: 768px;
font-size: 12px;
line-height: 20px;
height: 36px;
}

.books_total{
padding: 0 8px;
margin-right: 0;
height: 36px;
width: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.books_total_inner{
padding-top: 0;
}
.books_total_txt{
height: 36px;
font-size: 12px;
line-height: 20px;
}
.books_total_count{
font-size: 20px;
line-height: 30px;
}
.backNav{
margin: 0 auto 30px auto;
width: 100%;
}
.backNav-secondary{
margin: 30px auto 0 auto;
}
.backNav_link{
padding-left: 24px;
font-size: 14px;
line-height: 22px;
background-size: 14px auto;
}
.booksAttention{
width: 100%;
padding: 0 16px 30px 16px;
font-size: 12px;
line-height: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.booksAttention-detail{
padding: 30px 0 0 0;
}
.booksAttention-trap{
padding: 30px 0 0 0;
}
.booksAttention-clean{
padding-bottom: 40px;
}

/* もっと見る override */
#readMore{
padding: 16px 16px 0 16px;
}

/* -------------------------------------------------------------------------------------------
*
* 特徴・仕掛け・さばき方
*
* ----------------------------------------------------------------------------------------- */

/* ----------------------------- ページヘッダー ----------------------------- */

.pageHeader_ttl_icon-detail{
padding-left: 64px;
padding-right: 20px;
background-size: 54px auto;
}
.pageHeader_ttl-trap{
padding: 18px 0;
background: url(../image/index_bg-trap_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.pageHeader_ttl_icon-trap{
padding-left: 52px;
padding-right: 12px;
background-size: 39px auto;
}
.pageHeader_ttl-trap .pageHeader_ttl_icon-trap{
background-size: 39px auto;
}
.pageHeader_ttl-clean{
padding: 18px 0;
background: url(../image/index_bg-clean_sp.jpg) center 0 no-repeat;
background-size: cover;
}
.pageHeader_ttl_icon-clean{
padding-left: 58px;
padding-right: 14px;
background: url(../../common/image/pict_books_clean.png) 0 25px no-repeat;
background-size: 42px auto;
}
.pageHeader_ttl-clean .pageHeader_ttl_icon-clean{
background: url(../../common/image/pict_books_clean_wt.png) 0 25px no-repeat;
background-size: 42px auto;
}
.pageHeader_ttl_icon-recipe{
padding-left: 52px;
padding-right: 12px;
background-size: 41px auto;
}	

/* ----------------------------- メインビジュアル ----------------------------- */

.pageMain_img{
margin: 0 auto 17px auto;
padding-top: 30px;
width: 90%;
}
.pageMain_spec{
display: block;
margin: 0 auto 20px auto;
width: 90%;
}
.pageMain_spec_item{
display: block;
font-size: 14px;
line-height: 22px;
border-right: 0;
border-bottom: 1px solid #ccd5d6;
}
.pageMain_spec_item-cat{
padding: 4px 0;
width: 100%;
}
.pageMain_spec_item-name1{
padding: 4px 0;
width: 100%;
}
.pageMain_spec_item-name2{
padding: 4px 0;
width: 100%;
border-bottom: 0;
}
.pageMain_spec_item_label{
float: left;
width: 16%;
}
.pageMain_spec_item_txt{
float: left;
width: 84%;
}

/* ナビゲーション */

.pageMain_nav{
height: 45px;
border-top: 3px solid #0f5966;
}
.pageMain_nav_list{display: block;}
.pageMain_nav_list_item{width: 33.33%;}
.pageMain_nav_list-four .pageMain_nav_list_item{width: 25%;}
.pageMain_nav_list_item a{
font-size: 16px;
line-height: 45px;
}
.pageMain_nav_list-four .pageMain_nav_list_item a{font-size: 14px;}	
.pageMain_nav_list_item a:after{
right: 8px;
width: 8px;
height: 45px;
background: url(../../common/image/ic_arrow_base_right.png) 0 center no-repeat;
background-size: 8px 8px;
}
.pageMain_nav_list-four .pageMain_nav_list_item a:after{background: none;}

/* アクティブ */
.pageMain_nav_list_item-active span{
font-size: 16px;
line-height: 45px;
}
.pageMain_nav_list-four .pageMain_nav_list_item-active span{font-size: 14px;}		
.pageMain_nav_list_item-active span:after{
right: 8px;
width: 8px;
height: 45px;
background: url(../../common/image/ic_arrow_wt_bottom.png) 0 center no-repeat;
background-size: 8px 8px;
}
.pageMain_nav_list-four .pageMain_nav_list_item-active span:after{background: none;}

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

.pageMain_nav-btm{
border-top: 0;
border-bottom: 3px solid #0f5966;
}
.pageMain_nav-btm .pageMain_nav_list_item-active span:after{
background: url(../../common/image/ic_arrow_wt_top.png) 0 center no-repeat;
background-size: 8px 8px;
}
.pageMain_nav-btm .pageMain_nav_list-four .pageMain_nav_list_item-active span:after{background: none;}

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

.pageContent{
padding: 45px 0;
}

/* ページ内アンカー */
.pageAnchor{
margin: 0 auto 30px auto;
width: 90%;
}
.pageAnchor_item{
float: left;
width: 50%;
padding: 5px 8px;
text-align: center;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.pageAnchor_item.border_pc{border-right: none;}
.pageAnchor_item:nth-child(2n){border-right: 1px solid #ccd5d6}


.pageAnchor_item a{
display: inline-block;
padding: 0 0 0 14px;
font-size: 14px;
line-height: 18px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.pageAnchor_item a:before{
width: 8px;
height: 18px;
background-size: 8px 8px;
}


.pageAnchor-right .pageAnchor_item a:before{
width: 8px;
height: 18px;
background-size: 8px 8px;
}
.pageAnchor-right .pageAnchor_item.pageAnchor_item-active a:before{
background-size: 8px 8px;
}
/* 魚の特徴 */

.fishDetail{
margin: 0 auto 45px auto;
width: 90%;
}
.fishDetail_list{
display: block;
padding: 14px 0;
}
.fishDetail_list_ttl{
display: block;
padding: 0;
width: 100%;
font-size: 16px;
line-height: 28px;
}
.fishDetail_list_data{
display: block;
padding: 0;
width: 100%;
font-size: 16px;
line-height: 28px;
}

/* 仕掛け */

.trap{
margin: 0 auto 45px auto;
padding: 13px 0 0 0;
width: 90%;
}
.trap_ttl{
margin-bottom: 26px;
font-size: 20px;
line-height: 30px;
}
.trap_clm-L{
float: none;
margin-right: 0;
margin-bottom: 25px;
width: 100%;
}
.trap_clm-R{
float: none;
width: 100%;
}
.trap_info{
margin-bottom: 24px;
}
.trap_info_ttl{
margin-bottom: 14px;
padding-left: 16px;
font-size: 17px;
line-height: 17px;
}
.trap_info_txt{
font-size: 16px;
line-height: 28px;
}
.trap_info_guide{
padding-top: 4px;
background: url(../../common/image/line_dot_base_x.png) 0 4px repeat-x;
background-size: 5px 1px;
}
.trap_info_guide_list{
display: block;
}
.trap_info_guide_list_ttl{
float: left;
padding: 7px 7px 7px 0;
width: 34%;
font-size: 14px;
line-height: 22px;
}
.trap_info_guide_list_data{
float: left;
padding: 7px 0;
width: 66%;
font-size: 14px;
line-height: 22px;
}
.trap_tying_ttl{
margin-bottom: 16px;
margin-top: 6px;
padding-left: 16px;
font-size: 17px;
line-height: 17px;
}
.trap_tying_clm{
margin-right: 0;
width: 100%;
background: url(../../common/image/line_dot_base_x.png) 0 0 repeat-x;
background-size: 5px 1px;
}
.trap_tying_item{
margin: 0;
padding: 13px 0;
width: 100%;
}

.trap_tying_item:before{
width: 100%;
background: none;
}
.trap_tying_item_img{
float: left;
width: 35%;
height: auto;
}
.trap_tying_item_txt{
float: left;
padding-left: 12px;
width: 65%;
font-size: 14px;
line-height: 22px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.pageAnchor-flex .pageAnchor_item{float: none;}
.pageAnchor-flex{
padding:0;
display:-webkit-box;
display:-moz-box;
display:-ms-box;
display:-webkit-flexbox;
display:-moz-flexbox;
display:-ms-flexbox;
display:-webkit-flex;
display:-moz-flex;
display:-ms-flex;
display:flex;
-webkit-box-lines:multiple;
-moz-box-lines:multiple;
-webkit-flex-wrap:wrap;
-moz-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
}

/* 仕掛け / 見逃し配信 2306追加 */
.rerun{
position: relative;
background: #e5eded;
color: #05474d;
padding-bottom: 30px;
margin:70px 0 60px 0;
}
.rerun.point_under{
margin-top: 46px;
}
.rerunPoint_ttl{
top: -30px;
padding-top: 53px;
font-size: 17px;
line-height: 24px;
background-size: 61px auto;
}
.rerunArea{
display:block;
justify-content: space-between;
padding: 0;
}
.rerunArea .box{
width:90%;
margin: 0 auto;
}
.rerunArea .rerun_ttl{
font-size: 16px;
font-weight: bold;
line-height: 28px;
margin-top: 15px;
}
.rerunArea .rerun_txt{
margin-top: 10px;
font-size: 16px;
line-height: 28px;
}
.rerunArea .linkBtn_wrap{
margin-top: 20px;
}
.rerunArea .linkBtn_inner{
width: 75%;
margin:0 auto;
text-align: center;
}
.rerunArea .linkBtn_inner a{
font-size: 15px;
padding: 10px 0;
}
.rerunArea .linkBtn_inner a:after{
top: 25%;
right: 20px;}



/* さばき方 */

.clean{
margin: 0 auto 74px auto;
padding: 0 16px;
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.clean_inner{
padding-top: 15px;
}
.clean_ttl{
margin-bottom: 19px;
font-size: 20px;
line-height: 30px;
}
.clean_lead{
margin-bottom: 38px;
font-size: 16px;
line-height: 28px;
}
.clean_step{
margin-bottom: 34px;
}
.clean_step_img{
margin-bottom: 18px;
}
.clean_step_img_number{
width: 32px;
height: 32px;
font-size: 16px;
line-height: 32px;
}
.clean_step_txt{
font-size: 16px;
line-height: 28px;
}

/* さばき方のポイント */

.cleanPoint{
margin: 0 auto 30px auto;
width: 100%;
}
.cleanPoint_inner{
padding: 0 16px 1px 16px;
width: 100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.cleanPoint_ttl{
margin-bottom: 24px;
padding-top: 24px;
font-size: 16px;
line-height: 28px;
background-size: 61px auto;
}
.cleanPoint_ttl:before{
top: -30px;
width: 61px;
height: 43px;
background-size: 61px 43px;
}
h3.stepTtl{
font-size: 18px;
font-weight: bold;
margin:20px 0 20px;
text-align: center;
border-bottom: 3px double #0f5966;
border-top: 3px double #0f5966;
padding: 10px 0;
}

/*レシピ  (20190625追加)  */
.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_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 0; margin-bottom: 34px;}
.recipe_menuttl {
margin-bottom: 20px;
padding-left: 16px;
font-size: 17px;
line-height: 17px;
}
.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;
}

/* -------------------------------------------------------------------------------------------
*
* キャンペーンバナー
*
* ----------------------------------------------------------------------------------------- */

.campaign{
padding: 0 0 20px 0;
}
.campaign_inner{
padding: 0 16px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.campaign_inner img{
width: 100%;
}
.campaign_header{
margin-bottom: 19px;
}
.campaign_ttl{
margin: 0 auto 6px auto;
width: 100%;
background: url(/fishing/image/ttl_bg_waveL.png) center 4px no-repeat;
background-size: 334px 25px;
}
.campaign_ttl_img{
width: 166px;
}
.campaignBooks{
margin-top: -10px;
}
.campaignBooks_inner{
width: 100%;
padding: 0 16px 26px 16px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}


/* -------------------------------------------------------------------------------------------
*
* お知らせ　20210825追加
*
* ----------------------------------------------------------------------------------------- */


.fImportant{
width: 90%;
padding: 10px 16px;
margin-bottom: 45px;
}
.fImportant_linkBox{

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




}
@media screen and (max-width : 360px){
.trap_tying_item a{width: 98%;}
}