@charset "utf-8";
/*
	Theme Name: diver_child
	Template: diver
	Description:  Diverの子テーマです。
	Theme URI: http://tan-taka.com/diver/
	Author: Takato Takagi
 */



/* ----------------------------------------------------------------------------------------------------------------------------------------★
見出し
★------------------------------------------------------------------------------------------------------------------------------------------*/
h3{
	    font-size: 1.2em;/*文字サイズ*/
  padding: 0.4em 0.5em ;/*文字の上下 左右の余白*/
  color: #333333 ;/*文字色*/
  background: #ffefc2 ;/*背景色*/
  border-left: solid 5px #dd8500 !important;/*左線*/
  border-bottom: solid 3px #d7d7d7 !important;/*下線*/
}

@media screen and (max-width: 768px){
h3 {
    font-size: 1.1em;
}
}
/* ----------------------------------------------------------------------------------------------------------------------------------------★
トップページ類
★------------------------------------------------------------------------------------------------------------------------------------------*/



/* --------------------------------------------------------------------
一番上のヘッダーとフッターの背景を画像にする
----------------------------------------------------------------------*/
.header-wrap{
background-image:url(https://kabanjiten.com/wp-content/uploads/2018/07/diver-haikei-3.jpg)!important;
background-repeat:repeat-x;
}


#bigfooter{
background-image:url(https://kabanjiten.com/wp-content/uploads/2018/07/diver-haikei-4.jpg)!important;
background-repeat:repeat-x;
}


/* --------------------------------------------------------------------
スライダーの背景色を変える
----------------------------------------------------------------------*/
.bxslider_main .meta{
    background-color:rgba(255,255,255,0.8);
	    color: #000;
	
}
/* --------------------------------------------------------------------
色つきカテゴリーの角を丸くしない
----------------------------------------------------------------------*/
.diver_widget_post_list .post_list .post_list_thumb .post_list_cat{
    border-radius: 0px !important;
	}
.sticky-post-box .post-cat{
    border-radius: 0px !important;
	}
.grid_post-box .post-cat{
    border-radius: 0px !important;
	}

.bxslider_main .pickup-cat{
    border-radius: 0px !important;
	}
.post .single-post-category{
    border-radius: 0px !important;
	}

/* ----------------------------------------------------------------------------------------------------------------------------------------★
固定ページの人気ランキング
★------------------------------------------------------------------------------------------------------------------------------------------*/

/* --------------------------------------------------------------------
人気ランキングバナー
----------------------------------------------------------------------*/

.banner2:hover {
	opacity: 0.8 ;/*マウスオーバー時透明になる */

}




/* --------------------------------------------------------------------
詳しく見るボタン
----------------------------------------------------------------------*/
.syousai{
  font-size:14px;
  text-align:center; /*ボタンの中央配置 */
     margin: 15px 0;/*ボタンの上右下左の余白 */
  max-width: 540px;  /*ボタンの横幅 */
  margin-right: auto;
  margin-left: auto;
  font-weight: bold;  /*ボタン内文字は太字 */
  height: auto;
  line-height:1.4em;
}
 
.syousai a {
	padding: 10px;
  text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
  color: #fff !important;  /*ボタン内の文字色 */
background: linear-gradient(#ff99e6, #ff4fd3);
display:block;
  border-radius: 0px;  /*ボタンの角を少し丸く */
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
	border: 5px double #fff;
}

.syousai a:hover{
background: linear-gradient(#fc9fe5, #fc6dd8);
}

@media screen and (max-width: 768px){
.syousai{
    font-size: .9em;
		max-width: 300px;
		}
		}




/* --------------------------------------------------------------------
人気ランキングの見出し
----------------------------------------------------------------------*/
.ranking-yellow{
  font-size:16px;
  text-align:left; /*ボタンの中央配置 */
     margin: 25px 0px 20px 0px  !important ;/*ボタンの上右下左の余白 */
  max-width: 100%;  /*ボタンの横幅 */

  font-weight: bold;  /*ボタン内文字は太字 */
  height: auto;
  line-height:2em;
	padding: 5px ;
  text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
  color: #505050 !important;  /*ボタン内の文字色 */

		background: linear-gradient(top, #faee4b 80%, #fad52f 20%);
	background: -webkit-linear-gradient(top, #faee4b 80%, #fad52f 20%);
	background: -moz-linear-gradient(top, #faee4b 80%, #fad52f 20%);
	background: -o-linear-gradient(top, #faee4b 80%, #fad52f 20%);
	background: -ms-linear-gradient(top, #faee4b 80%, #fad52f 20%);
	
	
display:block;
  border-radius: 0px;  /*ボタンの角を少し丸く */
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;



}
@media screen and (max-width: 768px){
.ranking-yellow{
    font-size: 14px;
     margin: 25px 0px 10px 0px  !important ;/*ボタンの上右下左の余白 */
		}
		}
/* ----------------------------------------------------------------------------------------------------------------------------------------★
投稿内類
★------------------------------------------------------------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------
投稿エディタ→入力補助→ボタンのマウスオーバー時の色と背景を調整
----------------------------------------------------------------------*/
.button a:hover{
  	        color: #ffffff !important;
opacity: 0.8;
}


/* --------------------------------------------------------------------
出典元表示用(文字のみ左寄せ＆中央寄せ)
----------------------------------------------------------------------*/

.shutten-moto{
	font-size: x-small;
	color: #808080;
margin:-20px 0 10px 0;
text-align: center; 

}

.shutten-moto a{
color: #808080 !important;/*リンクの色消す*/
}


.shutten-moto-img-left{/*左寄せ*/
	display: inline-block;
}

.shutten-moto-img-center{/*中央寄せ*/
	display: block;
	text-align: center; 
 
}

/* --------------------------------------------------------------------
画像をセンターにした時に下の余白が消えるから追加
----------------------------------------------------------------------*/

.aligncenter {
    margin-bottom:1.5em !important;
}

/* --------------------------------------------------------------------
おすすめ度の星の部分
----------------------------------------------------------------------*/
.hosi{
  font-size:14px;
  text-align:center; /*ボタンの中央配置 */
     margin: -12px -18px  !important ;/*ボタンの上右下左の余白 */
  max-width: 1000px;  /*ボタンの横幅 */
  margin-right: auto;
  margin-left: auto;
  font-weight: bold;  /*ボタン内文字は太字 */
  height: auto;
  line-height:1em;
	padding: 7px ;
  text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
  color: #fff !important;  /*ボタン内の文字色 */

	
	
display:block;
  border-radius: 0px;  /*ボタンの角を少し丸く */
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;

}

@media screen and (max-width: 768px){
.hosi{
    font-size: 12px;
	     margin: -8px !important ;/*ボタンの上右下左の余白 */
		}
		}

/* --------------------------------------------------------------------
「特徴／種類／用途／選び方」記事の「(素材)の表面図」の余白を空ける
----------------------------------------------------------------------*/
.yohaku3{
margin-bottom:1em;
}



/* --------------------------------------------------------------------
トグルの背景色変更
----------------------------------------------------------------------*/

.sc_toggle_title{
	background: linear-gradient(#f7f7f7, #e3e3e3);
}

/* --------------------------------------------------------------------
ランキング画像のサイズと位置調整
----------------------------------------------------------------------*/
.rank12345{
    width: 80px;
	margin:-25px 0 -10px -15px !important;
}
@media screen and (max-width: 768px){
.rank12345{
    width: 60px;
	margin:-20px 0 -10px -10px !important;
}
}


/* --------------------------------------------------------------------
記事上の楽天ウィジェットモーションの背景を白に(PCのみ～Advanced Adsでクラスを決めている)
----------------------------------------------------------------------*/

.rakutenhaikei{
background-color: #fff;
}

/* --------------------------------------------------------------------
テーブルをスクロール表示させる。テーブルをdivで囲むだけ⇒<div class="scroll"></div>
----------------------------------------------------------------------*/
/* テーブルを横スクロール */
table {
 width: 100%;
}

/*tableをスクロールさせる*/
/*tableのセル内にある文字の折り返しを禁止*/
.scroll {
 overflow: auto;
 white-space: nowrap;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar {
 height: 15px;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-track {
 background: #F1F1F1;
}

/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-thumb {
 background: #BCBCBC;
}


/* --------------------------------------------------------------------
バッチボタンの余白調節※一押しポイントなど
----------------------------------------------------------------------*/
.badge{
margin: 15px 0px 15px 0px;
}

/* --------------------------------------------------------------------
YouTubeの動画を左寄せにする
----------------------------------------------------------------------*/
.youtube-container {
    text-align: left;
}


/* --------------------------------------------------------------------
リンクカードの上の余白調整
----------------------------------------------------------------------*/
.lkc-internal-wrap {
margin: 15px 0 15px 0;
}
/* --------------------------------------------------------------------
関連記事の画像のサイズをサイドバーの画像のサイズと合せる
----------------------------------------------------------------------*/
.post_list_wrap figure,.post_list_wrap img {
    width: 120px;
    height: 80px;
}

/* ----------------------------------------------------------------------------------------------------------------------------------------★
CTA類
★------------------------------------------------------------------------------------------------------------------------------------------*/

/* --------------------------------------------------------------------
タイトルの部分
----------------------------------------------------------------------*/

.cta_title {
    font-size: 27px;
    text-align: center;
    padding: 20px;
    background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
                radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
    color: #fff;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
.cta_title {
    text-align: center!important;
    font-size: 18px;
}
}
/* --------------------------------------------------------------------
スマホ時アイキャッチの大きさを変更する
----------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
.cta_thumbnail {
    float: right!important;
    width: 35%!important;
    margin-left: 0!important;
}
}

/* ----------------------------------------------------------------------------------------------------------------------------------------★
アフィリエイト類
★------------------------------------------------------------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------
アフィリリンクの上の点線
----------------------------------------------------------------------*/
.sikiri{
    padding: 5px;
    border-top: #ccc dashed 1px;
    margin: 15px 0 10px;
}
/* --------------------------------------------------------------------
アマゾンアフィリ用の画像
----------------------------------------------------------------------*/
.amazon-gazou{
max-width: 100% ;
    background-color: #ffffff;
	    text-align: center ;
margin:10px 0 10px 0;
		line-height:1em ;
}


.amazon-gazou img{
    margin: 0 auto !important;
	display: flex;
}

.amazon-gazou2{
	font-size: 12px;
	color: #808080;
margin-top:10px;
}

/* --------------------------------------------------------------------
アマゾンアフィリ出典元表示用(文字のみ中央寄せ)
----------------------------------------------------------------------*/

.amazon-gazou3{
	font-size:12px;
	color: #808080;
margin:10px 0 10px 0;
	    text-align: center ;
}


/* --------------------------------------------------------------------
楽天アフィリ用の画像(PC時は左詰めの400px／スマホ時は中央寄せの300px)
----------------------------------------------------------------------*/
@media screen and (min-width: 768px){
.rakuten-gazou{
max-width: 100% ;
    background-color: #ffffff;
margin:10px 0 10px 0;
		line-height:1em ;
display:table;
}
}


@media screen and (max-width: 768px){
.rakuten-gazou{
max-width: 300px ;
    background-color: #ffffff;

		line-height:1em ;
 margin:10px auto;
  display:block;
}
}



.rakuten-gazou img{
	display: flex;
}

.rakuten-gazou2 {
	font-size: 12px;
	color: #808080;
margin-top:10px;
text-align:center;

}
/* --------------------------------------------------------------------
楽天アフィリ用の画像(画像と文字中央寄せ)
----------------------------------------------------------------------*/
.rakuten-gazou4{
max-width: 100% ;
    background-color: #ffffff;
	    text-align: center ;
margin:10px 0 10px 0;
		line-height:1em ;
}


.rakuten-gazou4 img{
    margin: 0 auto !important;
	display: flex;
}

.rakuten-gazou5{
	font-size: 12px;
	color: #808080;
margin-top:10px;
}
/* --------------------------------------------------------------------
楽天アフィリ出典元表示用(文字のみ中央寄せ)
----------------------------------------------------------------------*/

.rakuten-gazou3{
	font-size: 12px;
	color: #808080;
margin:10px 0 10px 0;
	    text-align: center ;
}



/* --------------------------------------------------------------------
アフィリエイト用ボタン
----------------------------------------------------------------------*/

/* アマゾンボタン*/
.amazon-botan {
  font-size:14px;
  text-align:center; /*ボタンの中央配置 */
     margin: 15px 0;/*ボタンの上右下左の余白 */
  max-width: 540px;  /*ボタンの横幅 */
  margin-right: auto;
  margin-left: auto;
  font-weight: bold;  /*ボタン内文字は太字 */
  height: auto;
  line-height:1.4em;
}
 
.amazon-botan a {
	padding: 10px;
  text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
  color: #fff !important;  /*ボタン内の文字色 */
background: linear-gradient(#00db6e, #00a653);
display:block;
  border-radius: 0px;  /*ボタンの角を少し丸く */
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
	border: 5px double #fff;
}

.amazon-botan a:hover{
background: linear-gradient(#00f078, #00bd5e);
}

@media screen and (max-width: 768px){
.amazon-botan{
    font-size: .9em;
		max-width: 300px;
		}
		}

/* 楽天ボタン*/
.rakuten-botan {
  font-size:14px;
  text-align:center; /*ボタンの中央配置 */
     margin: 15px 0;/*ボタンの上右下左の余白 */
  max-width: 540px;  /*ボタンの横幅 */
  margin-right: auto;
  margin-left: auto;
  font-weight: bold;  /*ボタン内文字は太字 */
  height: auto;
  line-height:1.4em;
}
 
.rakuten-botan a {
	 padding: 10px;
  text-decoration: none !important;  /*ボタン内テキストリンク下線無し */
  color: #fff !important;  /*ボタン内の文字色 */
background: linear-gradient(#00db6e, #00a653);
  display: block;
	  border-radius: 0px;  /*ボタンの角を少し丸く */
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
	border: 5px double #fff;
}


.rakuten-botan a:hover{
background: linear-gradient(#00f078, #00bd5e);
}

@media screen and (max-width: 768px){
.rakuten-botan{
    font-size: .9em;
		max-width: 300px;
		}
		}

/* --------------------------------------------------------------------
アマゾンと楽天のボタンの位置をPCとスマホで切り返する(正確には消す)
----------------------------------------------------------------------*/
@media screen and (max-width: 768px){
.amazon-rakuten-pc{
display:none;
}
}
@media screen and (min-width: 768px){
.amazon-rakuten-sumaho{
display:none;
}
}


/* --------------------------------------------------------------------
アフィリエイトリンクをカエレバみたいにするやーつ
----------------------------------------------------------------------*/
.af-box{
    border-radius: 0px;
    -moz-border-radius:0px;
    -webkit-border-radius:0px;
    border: 1px solid #d1d1d1;
    padding: 10px;
    margin:15px 0 15px 0;

	
}
.af-imgbox{
	width:160px;
	height:auto;
    margin-right:10px;
    float: left;
    text-align: center;
	display: flex;
  justify-content: center;

}
.af-imgbox img{
margin:0 auto;

	
}
.af-textbox{
    width: 100%;

}

.af-title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;

}
.af-desc{
    font-size:12px;
    margin-bottom: 10px;

}

.af-kobox{
    width: 30%;
    margin: 30px 5px 0 0;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
display:inline-block;
    text-align: center;
	
}
.af-kobox a{
    display: block;
    padding: 5px 0 5px 0;
    text-decoration: none;
	    -moz-border-radius:5px;
    -webkit-border-radius:5px;
		border: 5px double #fff;
}

.af-amazon{
background: linear-gradient(#00db6e, #00a653);

}
.af-amazon a{
    color: #fff !important;
}
.af-amazon a:hover{
background: linear-gradient(#00f078, #00bd5e);
}
.af-rakuten{
background: linear-gradient(#00db6e, #00a653);


}
.af-rakuten a{
    color: #fff !important;
}
.af-rakuten a:hover{
background: linear-gradient(#00f078, #00bd5e);
}
.af-blue{
background-color: #1995DF;

}
.af-blue a{
    color: #fff !important;
}
.af-blue a:hover{
background-color: #fff;
	    border: 1px solid #1995DF;
	    color: #1995DF !important;
}
.clear{clear:both;}
@media screen and (min-width: 500px) {
.title-text {
overflow: auto;
	
}
}
@media screen and (max-width: 500px) {
.af-kobox{
    width: 47%;
    margin: 20px 5px 0 0;

}
    .af-imgbox{
	width:100px;
	height:auto;
    float: left;
    text-align: center;
	display: flex;
  justify-content: center;		
		
    }


.af-desc{
clear:both;
}


	.af-title{
overflow: auto;

}

.botan-box{
text-align: center;

}

}



/* ----------------------------------------------------------------------------------------------------------------------------------------★
サイドバー類
★------------------------------------------------------------------------------------------------------------------------------------------*/

/* --------------------------------------------------------------------
「特徴／種類／用途／選び方」画像の部分(サイドバージョン)
----------------------------------------------------------------------*/
.banner1{
	margin:10px 0 10px 0;/*上下の余白 */

}

.banner1:hover {
	opacity: 0.8 ;/*マウスオーバー時透明になる */

}

/*--------------------------------------------------------------
人気記事の画像のサイズを調整(中身はフルサイズ)
--------------------------------------------------------------*/
@media screen and (max-width: 768px){
.wpp-thumbnail {
    width: 100px;
    height: 78px;
}
}
/* -----------------------------------------------------------------------------------------------------------★
目次
★------------------------------------------------------------------------------------------------------------*/

/* --------------------------------------------------------------------
各項目の間隔(h2とh3が1組)
----------------------------------------------------------------------*/
div#ez-toc-container ul li {
	font-size:16px;
	 margin-top:12px;
	 font-weight:bold;
}
/* --------------------------------------------------------------------
各項目の間隔(h3のところ)
----------------------------------------------------------------------*/
div#ez-toc-container ul li ul li {
		font-size:14px;
	 margin-top:3px;
	 font-weight:normal;
}

 div#ez-toc-container ul li ul li a {
	color:#428bca !important;
}
/* --------------------------------------------------------------------
h3の前に「・」を追加する
----------------------------------------------------------------------*/
div#ez-toc-container ul li ul li:before {
content: "・";
}
/* --------------------------------------------------------------------
上部の余白
----------------------------------------------------------------------*/
div#ez-toc-container {
    margin-top:24px;
	border: 1px dotted #aaa;
}