@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
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*不具合対策(CLS)*/
/*.mobile-menu-buttons {bottom: calc( -1 * (env(safe-area-inset-bottom) + 50px) );}上部に出す場合は不要*/
.post-date {display:none;}
.ad-wrap {min-height: 280px;}
/*不具合対策(Google)*/
.gsc-input-box {height: 39px;}
input.gsc-input{font-size: 15px;}
/*不具合対策(Cocoon)*/
.appeal {background-size: auto 960px;}
/*不具合対策(関連記事)*/
.rect-vertical-card .related-entry-card-title {font-size: 15px;}
.e-card-title {font-size: 15px;}
/*不具合対策(サードパーティー)*/
.footer-bottom {margin-bottom: 80px} /*下部オーバーレイが邪魔でフッターのクリックができない*/
/*#sas_26328_cross {top:0px !important; right:-25px !important;} /*TheMoneytizerの×のワイプ競合対策(ID決め打ち)*/
/*#sas_iframe_fixed_26328, #sas_iframe_fixed_26328-1 {z-index: 2099999999 !important;} /*TheMoneytizerが全画面の上に来る対策(ID決め打ち)*/
/*#sas_iframe_fixed_26328-1 {top: auto !important; bottom: 300px !important; margin-top: 0px !important;}
/*#sas_fixedDiv_4785594 {z-index: 10000 !important;} /*1000しかなく逆にmainの下にめり込むため大きくする*/
#sas_26322 {max-height:90px; min-height:50px; height:auto !important;} /*高さ100pxに満たないアンカーが底に当てつかないことの対策*/

/*追尾型動画広告(z=999999)で消されることの対策。より大きな設定として100万。広告側変更時は調整が必要*/
.mobile-header-menu-buttons {z-index: 1000000;} /*元は3*/
.navi-in > ul .sub-menu {z-index: 1000000;} /*元は99*/

/*動画広告がサイドバーsticky部に隠れることの対策。AMは9999に操作してきているがIMOBILEも同じ。メインカラム＝0だが、サイドバーに配置したボタンの選択中*/
/*が2であり、そこに負ける。そのためそれより大きい3にしている*/
#main {z-index:3;} 

/*font(fkoma) bold(font-weight: bold), red(#e60033), bold-red, blue(#0095d9), bold-blue, green(#3eb370), bold-green についてはCocoonで定義されているのでそれを使うこと*/
.fkoma-orange{color: #F39800;}
.fkoma-bold-orange{color: #F39800; font-weight: bold;}
.fkoma-purple{color: #884898;}
.fkoma-bold-purple{color: #884898; font-weight: bold;}
.fkoma-grey{color: #c0c0c0;} /*cocoonは949495*/
.fkoma-bold-grey{color: #c0c0c0; font-weight: bold;}
.fkoma-beige{color: #bdb76b;} /*darkkhaki*/
.fkoma-bold-beige{color: #bdb76b; font-weight: bold;}
.fkoma-small{font-size: 0.9em;}	/*0.8emから変更 211214*/
.fkoma-large{font-size: 1.4em;}

/*テーブル(tkoma)*/
.tkoma01 th, .tkoma01 td{
 word-break: break-all;
 padding: 3px;
 font-weight: 500;
 vertical-align: initial;
 text-align: initial;
 line-height: 1.3em;
 font-size: 14px;
}
.tkoma01 td {background-color: #ffffff}
.tkoma01hl {width: 40%}
.tkoma01h2r {width: 60%}
.tkoma01h3c {width: 30%}
.tkoma01h3r {width: 30%}
.tkoma01wl {width: 25%}	/*tkoma01のワイド版(右辺を大きく取る型)*/
.tkoma01w2r {width: 75%}
.tkoma01chaml {width: 25%} /*キャラメイクのテーブル向けレイアウト*/
.tkoma01chamc {width: 15%}
.tkoma01chamr {width: 60%}

.tkoma02 th, .tkoma02 td, .tkoma02x2 th, .tkoma02x2 td{
 word-break: break-all;
 padding: 3px;
 vertical-align: initial;
 text-align: initial;
 line-height: 1.3em;
 border-color: rgba(112, 128, 144, 1);
}

.tkoma02 th{
 background-color: slategray;
 font-weight: 600;
 font-size: 16px;
 color: #ffffff;
}
.tkoma02 td, .tkoma02x2 td{
 background-color: #ffffff;
 font-weight: 500;
 font-size: 14px;
}
.tkoma02dl{width: 42%;}
.tkoma02dr{width: 58%;}

.tkoma02x2ht{
 background-color: slategray;
 font-weight: 600;
 font-size: 16px;
 color: #ffffff;
}
.tkoma02x2hl{ width: 42%; font-weight: 500; font-size: 15px;}
.tkoma02x2hr{ width: 58%; font-weight: 500; font-size: 15px;}
.tkoma02x2whl{ width: 25%; font-weight: 500; font-size: 15px;}	/*tkoma02x2のワイド版(右辺を大きく取る型)*/
.tkoma02x2whr{ width: 75%; font-weight: 500; font-size: 15px;}

/*テーブル(tkoma03) 右辺3セル*/
.tkoma03 th, .tkoma03 td{
 word-break: break-all;
 padding: 3px;
 font-weight: 500;
 vertical-align: initial;
 text-align: initial;
 line-height: 1.3em;
 font-size: 14px;
}
.tkoma03 td {background-color: #ffffff}
.tkoma03hl {width: 40%}
.tkoma03hr1 {width: 20%}
.tkoma03hr2 {width: 20%}
.tkoma03hr3 {width: 20%}
.tkoma03dl {width: 40%}
.tkoma03dr1 {width: 20%}
.tkoma03dr2 {width: 20%}
.tkoma03dr3 {width: 20%}

/*テーブル(tkoma04) 右辺4セル*/
.tkoma04 th, .tkoma04 td{
 word-break: break-all;
 padding: 3px;
 font-weight: 500;
 vertical-align: initial;
 text-align: initial;
 line-height: 1.3em;
 font-size: 14px;
}
.tkoma04 td {background-color: #ffffff}
.tkoma04hl {width: 28%}
.tkoma04hr {width: 72%}
.tkoma04dl {width: 28%}
.tkoma04dr1 {width: 18%}
.tkoma04dr2 {width: 18%}
.tkoma04dr3 {width: 18%}
.tkoma04dr4 {width: 18%}

/*テーブル(tkoma05) 右辺5セル*/
.tkoma05 th, .tkoma05 td{
 word-break: break-all;
 padding: 3px;
 font-weight: 500;
 vertical-align: initial;
 text-align: initial;
 line-height: 1.3em;
 font-size: 14px;
}
.tkoma05 td {background-color: #ffffff}
.tkoma05hl {width: 30%}
.tkoma05hr1 {width: 14%}
.tkoma05hr2 {width: 14%}
.tkoma05hr3 {width: 14%}
.tkoma05hr4 {width: 14%}
.tkoma05hr5 {width: 14%}
.tkoma05dl {width: 30%}
.tkoma05dr1 {width: 14%}
.tkoma05dr2 {width: 14%}
.tkoma05dr3 {width: 14%}
.tkoma05dr4 {width: 14%}
.tkoma05dr5 {width: 14%}

/*テーブル(tkoma06) 右辺6セル*/
.tkoma06 th, .tkoma06 td{
 word-break: break-all;
 padding: 3px;
 font-weight: 500;
 vertical-align: initial;
 text-align: initial;
 line-height: 1.3em;
 font-size: 14px;
}
.tkoma06 td {background-color: #ffffff}
.tkoma06hl {width: 22%}
.tkoma06hr1 {width: 13%}
.tkoma06hr2 {width: 13%}
.tkoma06hr3 {width: 13%}
.tkoma06hr4 {width: 13%}
.tkoma06hr5 {width: 13%}
.tkoma06hr6 {width: 13%}
.tkoma06dl {width: 22%}
.tkoma06dr1 {width: 13%}
.tkoma06dr2 {width: 13%}
.tkoma06dr3 {width: 13%}
.tkoma06dr4 {width: 13%}
.tkoma06dr5 {width: 13%}
.tkoma06dr6 {width: 13%}

/*BOXメニュー(mkoma)*/
.mkoma01 * {line-height: 1.4;}
.mkoma01 .box-menu{padding: 1px 1px; min-height: 50px; width: calc(100%/6);}
.mkoma01 .box-menu-label {font-size: 12px; padding: 3px 0px 0px;}
.mkoma01 .box-menu-icon * {margin: 0px; max-width: 100%; max-height: 100%;}
.nwa .mkoma01 .box-menu {width: calc(100%/3);}
.nwa .mkoma01 .box-menu-label {font-size: 11px; padding: 3px 0px 0px;}

/*メディアと文章(ckoma) カード用*/
.wp-block-media-text.alignwide.ckoma160 {grid-template-columns: 160px auto; margin: 1em 0; display: grid;}
.wp-block-media-text.alignwide.ckoma160 img{max-width: 160px;}
.wp-block-media-text.alignwide.ckoma160 p{margin: 0; line-height: 1.4;}
.wp-block-media-text.alignwide.ckoma160 .wp-block-media-text__media {align-self: unset;}
.wp-block-media-text.alignwide.ckoma160 .wp-block-media-text__content {padding: 0 10px; align-self: unset;}
.wp-block-media-text.alignwide.ckoma160 .ckoma160-t {font-weight: 600; word-break: break-all;}
.wp-block-media-text.alignwide.ckoma160 .ckoma160-s {font-size: 0.75em; word-break: break-all;}
.wp-block-media-text.alignwide.ckoma160 .ckoma160-d {font-size: 0.9em; word-break: break-all;}

.wp-block-media-text.alignwide.ckoma90 {grid-template-columns: 90px auto; margin: 1em 0; display: grid;}
.wp-block-media-text.alignwide.ckoma90 img{max-width: 90px;}
.wp-block-media-text.alignwide.ckoma90 p{margin: 0; line-height: 1.4;}
.wp-block-media-text.alignwide.ckoma90 .wp-block-media-text__media {align-self: unset;}
.wp-block-media-text.alignwide.ckoma90 .wp-block-media-text__content {padding: 0 10px; align-self: unset;}
.wp-block-media-text.alignwide.ckoma90 .ckoma90-t {font-weight: 600; word-break: break-all;}
.wp-block-media-text.alignwide.ckoma90 .ckoma90-s {font-size: 0.75em; word-break: break-all;}
.wp-block-media-text.alignwide.ckoma90 .ckoma90-d {font-size: 0.9em; word-break: break-all;}

.wp-block-media-text.alignwide.ckoma52 {grid-template-columns: 52px auto; margin: 1em 0; display: grid;}
.wp-block-media-text.alignwide.ckoma52 img{max-width: 52px;}
.wp-block-media-text.alignwide.ckoma52 p{margin: 0; line-height: 1.4;}
.wp-block-media-text.alignwide.ckoma52 .wp-block-media-text__media {align-self: unset;}
.wp-block-media-text.alignwide.ckoma52 .wp-block-media-text__content {padding: 0 10px; align-self: unset;}
.wp-block-media-text.alignwide.ckoma52 .ckoma52-t {font-weight: 600; word-break: break-all;}
.wp-block-media-text.alignwide.ckoma52 .ckoma52-s {font-size: 0.75em; word-break: break-all;}
.wp-block-media-text.alignwide.ckoma52 .ckoma52-d {font-size: 0.9em; word-break: break-all;}

/*メディアと文章(ckoma) 記事用*/
.wp-block-media-text.alignwide.ckomapost {display: grid; grid-template-columns: max(50%) auto;}
.wp-block-media-text.alignwide.ckomapost .wp-block-media-text__content { padding: 3% 3%; word-break: break-all; align-self: auto;}
.wp-block-media-text.alignwide.ckomapost .wp-block-media-text__content .ckomapost-t { font-size: 1.2em; color: #0095d9; font-weight: bold; word-break: break-all; margin-bottom:0;}
.wp-block-media-text.alignwide.ckomapost .wp-block-media-text__content .ckomapost-s { font-size: 0.75em; word-break: break-all; margin-bottom:2;}
.wp-block-media-text.alignwide.ckomapost .wp-block-media-text__content .ckomapost-d { font-size: 0.9em; word-break: break-all; margin-bottom:0;}

/*2カラム(lkoma)*/
.wp-block-cocoon-blocks-column-2.lkomaloc{font-size: 0.9em;}

/*おすすめカード(ekoma) ホーム専用*/
.recommended .navi-entry-cards {flex-wrap: wrap;}
.widget-entry-cards.card-large-image .a-wrap.ekoma01 {max-width: calc(100%/3); padding: 1px;}
.widget-entry-cards.large-thumb-on .ekoma01 .card-content {
  font-size: 1.2em;
  padding: 0;
}

/*サイト内検索(skoma)*/
.skoma {background-color: white; border:double 3px; border-color:slategray;}

/*ウィジェット関連の調整(wkoma)*/
.widget h2.wkoma01{font-size: 24px;} /*ウィジェットに出すhタグの文字サイズを記事と同じにしたい時に使う*/

/*投稿関連記事の調整(1列カード用・行列時は見直す)*/
.related-list .a-wrap {margin-bottom: 1%; padding: 1%;}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
 div.appeal-in {display: none;} /*不具合対策(Cocoon)*/
 #sas_26322 {max-height:100px;} /*非PC時は上限90を100に緩和する(320*100等向け)*/
 #koma-rettop {display: none;} /*サイドバーの戻るボタンはPCのみ表示する*/
}

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

@media screen and (max-width: 599px) {
 .ad-wrap {min-height: 300px;}
/* .amazon-item-box {height: 240px;}*/
 .tkoma01 th, .tkoma01 td{font-size: 12px;}
 .tkoma02 th{font-size: 14px;}
 .tkoma02 td{font-size: 12px;}
 .tkoma02x2ht{font-size: 0.95em;}
 .tkoma02x2hl, .tkoma02x2hr, .tkoma02x2whl, .tkoma02x2whr{font-size: 0.85em;}
 .tkoma02x2 td{font-size: 0.85em;}
 .tkoma03 th, .tkoma03 td{font-size: 11px;}
 .tkoma04 th, .tkoma04 td{font-size: 11px;}
 .tkoma05 th, .tkoma05 td{font-size: 11px;}
 .tkoma06 th, .tkoma06 td{font-size: 11px;}
 .mkoma01 .box-menu {width: calc(100%/3);}
 .nwa .mkoma01 .box-menu-label {font-size: 10px;}
 .wp-block-media-text.alignwide.ckoma160 .wp-block-media-text__content { padding: 0 5px;}
 .wp-block-media-text.alignwide.ckoma90 .wp-block-media-text__content { padding: 0 5px;}
 .wp-block-media-text.alignwide.ckoma52 .wp-block-media-text__content { padding: 0 5px;}
 .wp-block-media-text.alignwide.ckomapost {display: block;}
 .wp-block-media-text.alignwide.ckomapost .wp-block-media-text__content { margin: 5px 0 0 0; border:double 3px; border-color:slategray;}
 .wp-block-cocoon-blocks-column-2.lkoma01{flex-direction: row; font-size: 0.83em;}
 .wp-block-cocoon-blocks-column-2.lkoma02{font-size: 0.83em;} /*lkoma02はモバイルで直列になる以外は01と同じ*/
 .wp-block-cocoon-blocks-column-2.lkoma02 .wp-block-cocoon-blocks-column-left{margin-bottom:0;} /*半分で隙間がでないよう修正*/
 .widget-entry-cards.large-thumb-on .ekoma01 .card-content {font-size: 0.65em;}
}

/*480px以下*/
@media screen and (max-width: 480px){
 .widget h2.wkoma01{font-size: 20px;} /*ウィジェットに出すhタグの文字サイズを記事と同じにしたい時に使う*/
 .navi-footer-in a {font-size: 12px;} /*モバイル時のフッターメニューが折り返されるのを修正*/
 .navi-footer-in .menu-footer li.menu-item{width: 25%;} /*モバイル時のフッターメニューが折り返されるのを修正*/
 .rect-entry-card .card-thumb {margin-bottom: 0px;} /*投稿関連記事の調整(1列カード用・行列時は見直す)*/
}