@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: #dbe4ff ;/*背景色*/
  border-left: solid 5px #158cdb !important;/*左線*/
  border-bottom: solid 3px #d7d7d7 !important;/*下線*/
}

@media screen and (max-width: 768px){
h3 {
    font-size: 1.1em;
}
}

/* ----------------------------------------------------------------------------------------------------------------------------------------★
トップページ類
★------------------------------------------------------------------------------------------------------------------------------------------*/


/* --------------------------------------------------------------------
色つきカテゴリーの角を丸くしない
----------------------------------------------------------------------*/
.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;
	}
/* ----------------------------------------------------------------------------------------------------------------------------------------★
投稿内類
★------------------------------------------------------------------------------------------------------------------------------------------*/

/* --------------------------------------------------------------------
投稿エディタ→入力補助→ボタンのマウスオーバー時の色と背景を調整
----------------------------------------------------------------------*/
.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;
}

/* --------------------------------------------------------------------
グーグルプレイ／アップルのボタンのサイズと余白調整
----------------------------------------------------------------------*/

.apl-botan1{
width:155px;
}
.apl-botan2{
margin-left:10px;
}


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

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



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

.rakutenhaikei{
background-color: #fff;
}

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

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

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

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

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




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

/* --------------------------------------------------------------------
YouTubeの動画を左寄せにする
----------------------------------------------------------------------*/
.youtube-container {
    text-align: left;
}
/* --------------------------------------------------------------------
お知らせ(黄枠のやつ)の上下余白
----------------------------------------------------------------------*/
.aside-normal{
    margin: 15px 0 15px 0;
}

/* --------------------------------------------------------------------
注意(赤枠のやつ)の上下余白
----------------------------------------------------------------------*/
.aside-warning{
    margin: 15px 0 15px 0;
}


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

/* --------------------------------------------------------------------
アフィリリンクの上の点線
----------------------------------------------------------------------*/
.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;
		}
		}

/* --------------------------------------------------------------------
アフィリエイトリンクをカエレバみたいにするやーつ
----------------------------------------------------------------------*/
.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;

}

}


/* --------------------------------------------------------------------
キラっと光るボタン(単体)
----------------------------------------------------------------------*/

.btn-yuya2 {

  position: relative;
 width: 100%;
}



.btn-yuya2 a {
  border: solid #fff 3px;
  border-radius: 12px;
  box-shadow: 1px 1px 10px 0 #a1a1a1;
  color: #fff!important;
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.3;
  padding: 1em 2em .8em;
  position: relative;
  text-align: center;
  text-decoration: none;
  -webkit-transition: .2s ease-in-out;
  transition: .2s ease-in-out;

}
@media only screen and (max-width: 480px) {
.btn-yuya2 a {/*スマホ時　ボタンのテキストを左に寄せる　アイコンとかぶるため*/
    font-size: 14px;
    padding: 9px;
  }
}

 
/* ボタン内アイコン */
.btn-yuya2 a:before {
  content: "\f138";
  font-family: "fontawesome";
  font-weight: normal;
  font-size: 1.1em;
  margin-top: -.6em;
  position: absolute;
  right: 15px;
  top: 50%;
}
.btn-yuya2 a:hover {
  box-shadow: 1px 1px 2px 0 #a1a1a1;
  opacity: .8;
}
 

 
/* 緑ボタン */
.btn-yuya2 a {
  background: #00a23f;
  background: -webkit-linear-gradient(#00a23f, #39900a);
  background: linear-gradient(#07b84b, #39900a);
  text-shadow: 0 0 10px rgba(255,255,255,.8), 1px 1px 1px rgba(0,0,0,1);
}
 
/* 赤ボタン */
.btn-yuya2.is-red a {
  background: #fb4e3e;
  background: -webkit-linear-gradient(#00a23f, #39900a);
  background: linear-gradient(#fb4e3e, #d64b26);

}
/* 青ボタン */
.btn-yuya2.is-blue a {
  background: #09c;
  background: -webkit-linear-gradient(#09c, #069);
  background: linear-gradient(#09c, #069);
}

/* 黒ボタン */
.btn-yuya2.is-black a {
  background: #666;
  background: -webkit-linear-gradient(#8a8a8a, #666);
  background: linear-gradient(#8a8a8a, #666);
}

/* 光沢 */
.is-reflection a {
  overflow: hidden;
}
.is-reflection a:after {
  -moz-animation: is-reflection 4s ease-in-out infinite;
  -moz-transform: rotate(45deg);
  -ms-animation: is-reflection 4s ease-in-out infinite;
  -ms-transform: rotate(45deg);
  -o-animation: is-reflection 4s ease-in-out infinite;
  -o-transform: rotate(45deg);
  -webkit-animation: is-reflection 4s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  animation: is-reflection 4s ease-in-out infinite;
  background-color: #fff;
  content: " ";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -180px;
  transform: rotate(45deg);
  width: 30px;
}
/* アニメーション遅延 */
.is-reflection + .is-reflection a:after {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}
@keyframes is-reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes is-reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
 
/* ボタン矢印揺れ */
.is-trembling a:before {
  -webkit-animation-name:is-trembling;
  -webkit-animation-duration:.8s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-timing-function:ease;
  -moz-animation-name:is-trembling;
  -moz-animation-duration:1s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-timing-function:ease;
}
@-webkit-keyframes is-trembling {
  0% {-webkit-transform:translate(-3px, 0);}
  100% {-webkit-transform:translate(0, 0);}
}

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




/* ----------------------------------------------------------------------------------------------------------------------------------------★
ビッグフッター類
★------------------------------------------------------------------------------------------------------------------------------------------*/
/* --------------------------------------------------------------------
項目のボーダーが見えないから色変えた
----------------------------------------------------------------------*/
#bigfooter li{

 border-color: #444444;
	}
/* -----------------------------------------------------------------------------------------------------------★
目次
★------------------------------------------------------------------------------------------------------------*/

/* --------------------------------------------------------------------
各項目の間隔(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;
}