@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*サイドバー　*/
/*TOC目次下線削除　*/

ul.toc_widget_list.no_bullets a {
    text-decoration: none;
}
.toc_widget_list li{
	padding: 0.2em;
}
.toc_widget_list li ul a::before{	
	content: "\25B6";
}
.toc_widget ul {
	max-height: 400px;
	overflow-y: auto;
}
.toc_widget_list li ul{		
	margin-left: 1.0em;
	max-height: 1000px;
	font-size: 0.9em;
}
.toc_widget_list li ul li a {
	font-size: 1em;
	font-weight: normal;
}
/*Google広告とスペース確保　*/
aside#custom_html-4 {
    margin: 2em 0em;
}

/* ----------------------------------------
* レスポンシブ
* ~ / 1200px / 991px / 767px 
* desctop / laptop / tablet / phone
---------------------------------------- */

/*TOC Container*/
#toc_container{padding:2em;}

.main-inner .post-content h2 {
    margin: 5em 0 1em;
}

/*見出しタグ*/
/*メタリック調装飾*/
.entry-content.cf h2 {background:  linear-gradient(97deg,  #0a4a3d,  #6c928a 50%,  #083b30 80%, #b5c8c4 90%, #0A4A3E );}
/*END メタリック調装飾*/

.post-content h3{margin:3em 0}

.article h4{border-bottom: solid 1px}

/* END 見出しタグ*/
.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

/*シンプル CSS*/
.center{text-align:center;}
.pic{text-align:center;
margin-bottom:2em;}
.mb3{margin-bottom:3em 0;}
p.em3{margin:3em 0;}
p.em5{margin:5em 0;}
.em3{margin:3em 0;}
.em1{margin:1em 0;}
.linone {list-style: none;}
.bold {font-weight: bold;}
.torikeshi{text-decoration:line-through} /*取り消し線*/

.entry-content.cf dt {
    font-weight: bolder;
}

/*ブログカード*/
.card5 {
   	position : relative ;
	margin-top: 3em ;
	margin-right:0em;
	margin-left:0em;
	margin-bottom: 1em ;
    padding: 0em 0em;
    border: solid 3px #1ABB9A;
	width :100%;
	max-width : 300px;
		vertical-align: middle;
}
.card5 .sum {
	width : 30% ;
    display : inline-block;
	    padding: 0;
				vertical-align: middle;
}


.card5 .text {
    display : inline-block;
	width : 65% ;
	    padding: 0;
			vertical-align: middle;
	}
.card5 .box-title {
     position : absolute ;
	left : -3px;
	top: -38px;
		padding : 5px ;
	vertical-align: middle;
    font-size: 17px;
    background: #1ABB9A;
	color: #fff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

/*写真　左側と文字横並び　右側へ*/
.leftbox{float:left;
width:30%;
margin-bottom:40px;}

.righttext{width:65%;
	margin:0 auto;
overflow:hidden;}

@media screen and (max-width: 767px) {
	.leftbox{float:none;
width:100%;
	text-align:center;}
	
	.righttext{width:100%;
overflow:visible;}
	
	.leftbox.tatenaga{float:left;
width:30%;
		margin-right:5%;
margin-bottom:40px;}
	
	.righttext.tatenaga{width:65%;
	overflow:hidden;}
	
}

/* 強調色 ピンク*/
.red-under {
	background: linear-gradient(transparent 70%, #fa6b94 70%);
}

/*関連記事横並び*/

.card10 {
	display: inline-block;
	background:#ebebeb;
		margin-top: 2em ;
	margin-right:0em;
	margin-left:0em;
	margin-bottom: 1em ;
    padding: 0em 0em;
	width :100%;
	max-width : 300px;
	height: 95px;
		vertical-align: middle;
}
.card10 .sum {
	width : 30% ;
    display : inline-block;
	    padding: 0;
	margin:0 ;
				vertical-align: middle;
	
}

.card10 .text {
    display : inline-block;
	width : 65% ;
	    padding: 0;
	margin:0 ;
			vertical-align: middle;
		}

.card10 h3 {font-size:100%;
margin:0px;
}
/*バッジ*/
.badge-green {background:#0a4a3d;}
/*ボックスの途中にラベル*/
.sanko {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #1ABB9A;
    border-radius: 8px;
	max-width: 400px;
}

.sanko a {
	text-decoration: none;}

.sanko .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
	color: #1ABB9A;
    font-weight: bold;
}
.sanko p {
    margin: 0; 
    padding: 0;
}
.sanko ul {
    margin-bottom: 0;
}
/*タブ見出しボックス*/
.tab-caption-box-label.block-box-label.box-label {
    background: #0a4a3d;
}

span.tab-caption-box-label-text.block-box-label-text.box-label-text {
    color: #fff;
}

.tab-caption-box-content {
    border-color: #0a4a3d;
}
/*表*/
/*表4列の表を幅等分にする*/
table.row4 th {
    width: 25%;
}
/*縦長の表のヘッダーをスクロール時に固定*/
table.st-tbl1 {
		position: relative;
	border-collapse: collapse; 
}
table.st-tbl1 th {
	position: sticky;
background: #0a4a3d;
color:#fff;
	top: 0;
}
table.st-tbl1  thead tr:first-of-type th:first-of-type {
    z-index: 2;
}
/*END 縦長の表のヘッダーをスクロール時に固定*/
/*横長の表のヘッダーをスクロール時に固定 */
th.fixed01 {/* 左上のコーナーセル用 */
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
}
.fixed02 {
    z-index: 1;
    left: 0;
}
/*END 横長の表のヘッダーをスクロール時に固定 */

/*製品リスト 写真の横並び*/
.prodlist{
	display:flex;
	flex-wrap:wrap;
}
.prod {
    margin: 10px;
    width: calc(calc(100% - 60px) / 3 );
}
@media screen and (max-width: 767px) {
	.prod {
    margin: 10px;
    width: calc(calc(100% - 40px) / 2 );
}
}
/* END 製品リスト */
/*角丸　BOX Zenfone 紹介用*/
.box2 {
    padding: 0.5em 1em;
    margin: 2em 0;
    font-weight: bold;
    color: #444bb5;/*文字色*/
    background: #FFF;
    border: solid 3px #444bb5;/*線*/
    border-radius: 10px;/*角の丸み*/
}
.box2 p {
    margin: 0; 
    padding: 0;
}
/*– 子カテゴリを１段下げる –*/
li.cat-item .children {
padding-left: 30px !important;
}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 767px) {
.pc { display: none !important; }
.sp { display: inline !important; }
}
/* END スマートフォンで見たときは"sp"のclassがついた画像が表示される */

/*********
レビュー用の星
*********/
.star-size{font-size:24px}
.color-star{color:#F5B700}
.gray-star{color:gray}


/*********
アフィリエイトボタン　カエレバ風
*********/
.af-box{
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border: 0px solid #d1d1d1;
    padding: 10px;
    margin: 1em 8px 3em;
}
.af-imgbox{
    width: 160px;
    margin-right: 10px;
    float: left;
    text-align: center;
}
.af-textbox{
    width: 100%;
}
.af-title{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}
.af-desc{
    font-size:14px;
    margin-bottom: 10px;
}
.af-kobox{
    width: 120px;
    margin: 0 5px 0 0;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    float: left;
    text-align: center;
}
.af-kobox a.aflink{
    display: block;
    padding: 5px 0 5px 0;
    text-decoration: none;
}
.af-amazon{
    border: 1px solid #F3A847;
}
.color01 .af-amazon a{
    color: #F3A847;
}
.af-kindle{
    border: 1px solid #000;
    color: #000;
}
.color01 .af-kindle a{
    color: #000;
}
.af-rakuten{
    border: 1px solid #BF0000;
    color: #BF0000;
}
.color01 .af-rakuten a{
    color: #BF0000;
}
.af-blue{
    border: 1px solid #1995DF;
    color: #1995DF;
}
.color01 .af-blue a{
    color: #1995DF;
}
.clear{clear:both;}
@media screen and (max-width: 399px) {

    .af-imgbox{
        margin: 0 auto;
        text-align: center;
        float: none;
    }
}

/*CTA*/
.cta-catch{
font-size:24px;
padding:25px 30px;
margin:48px -30px 24px;
background: #ba1a8a;
    color: #fff;
}
/*TOCに表示されないH2 3似の見出しNon Head 2 3*/
/*メタリック調装飾*/
.NH2 {background:  linear-gradient(97deg,  #0a4a3d,  #6c928a 50%,  #083b30 80%, #b5c8c4 90%, #0A4A3E );
margin: 40px -29px 20px;
    color: #fff;
    font-size: 26px;
    padding: 25px 30px;
    font-weight: bold;
}
.NH3{
	font-size: 23px;
    border-bottom: 5px solid #0a4a3d;
    padding: 10px 0;
	margin-top: 1.87em;
    margin-bottom: 1.26em;
    font-weight: bold;
}

/*END メタリック調装飾*/

/*ボタン*/
.btn {
	display: block;
	margin: auto;
	position: relative;
	width: 80%;
	text-align: center;
	font-size: 1.2em;
    border-radius: 1em;
	background: #000;
}
.btn a {
	display:inline-block;
width:97%;
	text-decoration: none;
	height: 4em;
padding-top: 1.2em;
	color: #fff;
	position:relative;
	
}

.btn a::after {
content: '';
	position: absolute;
	width: 15px;
  height: 15px;
	margin-top: 1.5em;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
	top: 3px;
}

.btn:hover {
	 opacity:0.8;
	 cursor: pointer;
	 text-decoration: none;
}
.btn.sp a {
    width: 95%;
}
/*ボタン化　小さめ*/
.smallbutton {
	display: block;
	margin: auto;
	position: relative;
	width: 40%;
	padding: 1em;
	text-align: center;
	font-size: 1.2em;
    border-radius: 1em;
	background: #000;
}
.smallbutton a {
	text-decoration: none;
	color: #fff;
}
.smallbutton:hover {
	 opacity:0.8;
	 cursor: pointer;
	 text-decoration: none;
}
/*END リンク立体感のあるボタン化　小さめ*/

/*フッター　Widget 装飾　*/
.main-widget-label {
    /* border-color: #0a4a3d; */
    border: none;
    font-size: 23px;
    border-bottom: 5px solid #0a4a3d;
    padding: 10px;
    font-weight: bold;
}

/*Cocoon ボックスメニューカスタマイズ　*/
.box-menu{
	padding: 1px;
	min-height: 0;
}

.box-menu-label,
.box-menu-description{
	display: none;
}

.box-menu-icon *{
	margin: 0;
	max-width: 100%;
	max-height: 300px;}


/*END フッター　Widget 装飾　*/
	/*********
フッター直前の無駄なスペース削除
*********/
	@media screen and (max-width: 767px) {

    .side-widget{
        margin-bottom: 0px;
       padding-bottom:0px;
    }
	}


/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*スマホ以外, PCタブレットのみ*/

@media screen and (min-width: 480px) {
	/*cocoon おすすめカードの2行で折り返す*/
.recommended .navi-entry-cards {
    flex-wrap: wrap;
}

.recommended .navi-entry-card-link {
    width: 22%;
} 
}　
/*END cocoon おすすめカードの2行で折り返す*/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	/*ヘッダー背景をメタリック調にする*/
	.mobile-header-menu-buttons {
    background: linear-gradient(
97deg
, #0a4a3d, #cedad8 10%, #538077 15%,#0a4a3d 20%, #083b30 80%, #b5c8c4 90%, #0A4A3E );
}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/

.article h2 {
    margin: 40px -20px;
}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	/*ボタン*/
.btn {
		width: 90%;
	padding:0.5em;
}
.btn a {
		font-size: initial;
}
.btn a::after{
		width:10px;
		height:10px;	
	}
	/*カテゴリーページの記事間の距離を取る*/
.a-wrap {
    margin-bottom: 2em;
}
/* ENDカテゴリーページの記事間の距離を取る*/	
	
	.smallbutton {
		width: 100%;}
}