@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.5
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*ヘッダー左寄せ*/
.header-container-in.hlt-top-menu.hlt-tm-right.wrap {
  display: block;
}

/*=================================================================================
  カエレバ・ヨメレバ・トマレバ
=================================================================================*/
.cstmreba {
  width:98%;
  height:auto;
  margin:36px auto;
  font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
  line-height: 1.5;
  word-wrap: break-word;
  box-sizing: border-box;
  display: block;
}
.cstmreba p { margin: 0; padding: 0; }
.cstmreba a { transition: 0.8s; color:#285EFF; }
.cstmreba a:hover { color:#FFCA28; }
.cstmreba .booklink-box,
.cstmreba .kaerebalink-box,
.cstmreba .tomarebalink-box {
  width: 100%;
  background-color: #fafafa;
  overflow: hidden;
  border-radius: 0px;
  box-sizing: border-box;
  padding: 12px 8px;
  box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image,
.cstmreba .tomarebalink-image {
  width:150px;
  float:left;
  margin:0 14px 0 0;
  text-align: center;
  background: #fff;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a,
.cstmreba .tomarebalink-image a {
  width:100%;
  display:block;
}
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img,
.cstmreba .tomarebalink-image a img {
  margin:0;
  padding:0;
  text-align:center;
  background:#fff;
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info,
.cstmreba .tomarebalink-info {
  overflow:hidden;
  line-height:170%;
  color:#333;
}
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a,
.cstmreba .tomarebalink-info a { text-decoration:none; }
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a,
.cstmreba .tomarebalink-name>a {
  border-bottom:1px solid;
  font-size:16px;
}
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date,
.cstmreba .tomarebalink-powered-date {
  font-size:10px;
  line-height:150%;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a,
.cstmreba .tomarebalink-powered-date a {
  color:#333; border-bottom:none;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover,
.cstmreba .tomarebalink-powered-date a:hover {
  color:#333; border-bottom:1px solid #333;
}
.cstmreba .booklink-detail,
.cstmreba .kaerebalink-detail,
.cstmreba .tomarebalink-address { font-size:12px; }
.cstmreba .kaerebalink-link1 div img,
.cstmreba .booklink-link2 div img,
.cstmreba .tomarebalink-link1 div img { display:none !important; }
.cstmreba .kaerebalink-link1,
.cstmreba .booklink-link2,
.cstmreba .tomarebalink-link1 {
  display:inline-block;
  width:100%;
  margin-top:5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div,
.cstmreba .tomarebalink-link1>div {
  float:left;
  width:24%;
  min-width:128px;
  margin:0.5%;
}
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a,
.cstmreba .tomarebalink-link1 a {
  width:100%;
  display:inline-block;
  text-align:center;
  box-sizing:border-box;
  margin:1px 0;
  padding:3% 0.5%;
  border-radius:8px;
  font-size:13px;
  font-weight:bold;
  line-height:180%;
  color:#fff;
  box-shadow:0px 2px 4px 0 rgba(0,0,0,.26);
}

/* トマレバ */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a { background:#58821C; border:2px solid #58821C; }
.cstmreba .tomarebalink-link1 .shoplinkjalan a { background:#C25105; border:2px solid #C25105; }
.cstmreba .tomarebalink-link1 .shoplinkjtb a { background:#c81528; border:2px solid #c81528; }
.cstmreba .tomarebalink-link1 .shoplinkknt a { background:#0b309d; border:2px solid #0b309d; }
.cstmreba .tomarebalink-link1 .shoplinkikyu a { background:#8A6B00; border:2px solid #8A6B00; }
.cstmreba .tomarebalink-link1 .shoplinkrurubu a { background:#000066; border:2px solid #000066; }
.cstmreba .tomarebalink-link1 .shoplinkyahoo a { background:#eb003b; border:2px solid #eb003b; }
.cstmreba .tomarebalink-link1 .shoplinkhis a { background:#004bb0; border:2px solid #004bb0; }

/* カエレバ */
.cstmreba .kaerebalink-link1 .shoplinkyahoo a { background:#eb003b; border:2px solid #eb003b; }
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24; border:2px solid #84be24; }
.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border:2px solid #8d124b; }
.cstmreba .kaerebalink-link1 .shoplinkwowma a { background:#ea5404; border:2px solid #ea5404; }
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a { background:#314995; border:2px solid #314995; }

/* ヨメレバ */
.cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border:2px solid #007dcd; }
.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border:2px solid #bf0000; }
.cstmreba .booklink-link2 .shoplinkbk1 a { background:#0085cd; border:2px solid #0085cd; }
.cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border:2px solid #2a2c6d; }
.cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border:2px solid #003e92; }
.cstmreba .booklink-link2 .shoplinkebj a { background:#f8485e; border:2px solid #f8485e; }
.cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border:2px solid #333333; }

/* 共通 */
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a { background:#C25105; border:2px solid #C25105; }
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a { background:#B3002F; border:2px solid #B3002F; }
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a { background:#225496; border:2px solid #225496; }

/* hover 共通 */
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover,
.cstmreba .tomarebalink-link1 a:hover { background:#fff; }

/* hover 各種 */
.cstmreba .tomarebalink-link1 .shoplinkrakuten a:hover { color:#76ae25; }
.cstmreba .tomarebalink-link1 .shoplinkjalan a:hover { color:#ff7a15; }
.cstmreba .tomarebalink-link1 .shoplinkjtb a:hover { color:#c81528; }
.cstmreba .tomarebalink-link1 .shoplinkknt a:hover { color:#0b499d; }
.cstmreba .tomarebalink-link1 .shoplinkikyu a:hover { color:#bf9500; }
.cstmreba .tomarebalink-link1 .shoplinkrurubu a:hover { color:#000066; }
.cstmreba .tomarebalink-link1 .shoplinkyahoo a:hover { color:#ff0033; }
.cstmreba .tomarebalink-link1 .shoplinkhis a:hover { color:#004bb0; }
.cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover { color:#ff3300; }
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24; }
.cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; }
.cstmreba .kaerebalink-link1 .shoplinkwowma a:hover { color:#ea5404; }
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover { color:#314995; }
.cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd; }
.cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; }
.cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; }
.cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; }
.cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; }
.cstmreba .booklink-link2 .shoplinkebj a:hover { color:#f8485e; }
.cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; }
.cstmreba .kaerebalink-link1 .shoplinkamazon a:hover,
.cstmreba .booklink-link2 .shoplinkamazon a:hover { color:#FF9901; }
.cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover,
.cstmreba .booklink-link2 .shoplinkrakuten a:hover { color:#bf0000; }
.cstmreba .kaerebalink-link1 .shoplinkseven a:hover,
.cstmreba .booklink-link2 .shoplinkseven a:hover { color:#225496; }

.cstmreba .booklink-footer { clear:both; }

/*****  解像度768px以下のスタイル *****/
@media screen and (max-width:768px){
  .cstmreba .booklink-image,
  .cstmreba .kaerebalink-image,
  .cstmreba .tomarebalink-image { width:100%; float:none; }
  .cstmreba .booklink-link2>div,
  .cstmreba .kaerebalink-link1>div,
  .cstmreba .tomarebalink-link1>div { width:32.33%; margin:0.5%; }
  .cstmreba .booklink-info,
  .cstmreba .kaerebalink-info,
  .cstmreba .tomarebalink-info { text-align:center; padding-bottom:1px; }
}

/*****  解像度480px以下のスタイル *****/
@media screen and (max-width:480px){
  .cstmreba .booklink-link2>div,
  .cstmreba .kaerebalink-link1>div,
  .cstmreba .tomarebalink-link1>div { width:49%; margin:0.5%; }
}

/* コピペ禁止 */
.entry-content {
  user-select:none;
  -moz-user-select:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
}
.copyok {
  user-select:all !important;
  -moz-user-select:all !important;
  -webkit-user-select:all !important;
  -khtml-user-select:all !important;
}

/* 画像キャプションサイズ */
.wp-block-image figcaption{
  color:#000000;
  font-size:16px;
  text-align:left;
}

@media screen and (max-width:480px){
  /* モバイルトップメニュー */
  ul.menu-mobile{
    overflow-x:auto;
    overflow-y:hidden;
    display:flex !important;
    flex-wrap:nowrap;
    font-size:14px;
    justify-content:flex-start;
    padding:0 1em;
    -webkit-overflow-scrolling:touch;
    position:relative;
  }
  ul.menu-mobile>li{ padding-right:1em; white-space:nowrap; }
  ul.menu-mobile .item-label{ white-space:nowrap; font-size:16px; }
}

.twitter-button{ background:#000 !important; }
.bc-brand-color.sns-share .twitter-button,
.bc-brand-color.sns-follow .twitter-button { background-color:#007ACC !important; }
.bc-brand-color.sns-share .pocket-button,
.bc-brand-color.sns-follow .pocket-button { background-color:#EB003B !important; }
.bc-brand-color.sns-share .line-button,
.bc-brand-color.sns-follow .line-button { background-color:#008040 !important; }

.entry-card-thumb-image{ object-fit:cover !important; }

.header-container-in.hlt-top-menu .site-name-text-link{ text-align:left; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
@media screen and (max-width:1240px){ /* 追加があればここに */ }
@media screen and (max-width:1030px){ /* 追加があればここに */ }
@media screen and (max-width:768px){  /* 追加があればここに */ }
@media screen and (max-width:480px){  /* 追加があればここに */ }

/* フロント固定ページのタイトルを非表示 */
.home.page .entry-title{ display:none; }

/* homeの日付を削除 */
.home.page .date-tags{ display:none; }

/************************************
** CLS 対策：ロゴ・ヘッダー・ナビ（最終版）
************************************/

/* ヘッダー（ロゴ周り）の高さを先取り */
.header-container-in{
  min-height:96px;          /* 92〜104px で微調整OK */
}

/* ロゴ画像の実寸を明示（比率も予約） */
.site-logo-image,
.header-site-logo-image{
  width:269px;
  height:72px;
  aspect-ratio:269/72;
  max-width:100%;
  display:block;            /* baselineギャップ防止 */
  vertical-align:top;
}

/* タイトル直下広告の“跳ね”予防：枠を先に確保 */
.adsense-under-title,
.adsense-under-title .adsbygoogle{
  display:block;
  min-height:270px;         /* 実配信サイズに合わせて調整（300でも可） */
  margin:12px 0;
}

/* 画面幅が少し広い端末では 250px に縮める例 */
@media (min-width: 480px){
  .adsense-under-title,
  #content .entry-content .adsbygoogle:first-of-type,
  #content .adsbygoogle:first-of-type{
    min-height:250px;
  }
}

/* --- モバイルのナビで高さが変わらないよう固定 --- */
@media (max-width: 768px){

  /* ナビ本体＆内側ラッパの高さを固定 */
  #navi, #navi .navi-in{
    min-height:56px;
    height:56px;
    box-sizing:border-box;
    overflow-y:hidden;
    overflow-x:auto;                 /* 横スクロールで折返し回避 */
    -webkit-overflow-scrolling:touch;
  }

  /* メニューを1行固定＆折返し回避 */
  #navi ul{ white-space:nowrap; }
  #navi .menu{ display:flex; flex-wrap:nowrap; }
  #navi .menu > li{ flex:0 0 auto; }

  /* ナビ内の小さな画像/アイコンは無寸法にしない */
  #navi img, #navi svg{ width:24px; height:24px; display:block; }
}

/* 追加の保険：本文最初の adsbygoogle も枠確保（タイトル直下と同じ効果） */
#content .entry-content .adsbygoogle:first-of-type,
#content .adsbygoogle:first-of-type{
  display:block;
  min-height:280px;         /* 300x250 系を想定。足りなければ 300px に */
  margin:12px 0;
}