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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/* ============================================================
   gym.penlab.jp  追加CSS
   貼り先: 外観 → カスタマイズ → 追加CSS（末尾に追記）
   ============================================================ */


/* ------------------------------------------------------------
   1. トップページ（固定ページ166）から移設した CSS
      本文の <style> に置いていたため、ビジュアルエディタで保存する
      たびに改行が <br /> に変換されて全体が無効化されていた。
      ここへ移すことで以後エディタの影響を受けない。
   ------------------------------------------------------------ */

/* 検索 */
.hm-search{margin:24px 0 8px}
.hm-search form{display:flex;gap:8px}
.hm-search input[type=search]{flex:1;padding:14px 16px;font-size:15px;
  border:1px solid #d9d5cf;border-radius:4px;background:#fff}
.hm-search input[type=search]:focus{outline:none;border-color:#8c2f21}
.hm-search button{display:inline-flex;align-items:center;gap:6px;padding:0 24px;
  background:#8c2f21;color:#fff;border:0;border-radius:4px;font-size:14px;cursor:pointer}
.hm-search button:hover{opacity:.88}
.hm-search-hint{margin:6px 2px 0;font-size:12px;opacity:.6}

/* エリア */
.hm-area-index{display:grid;gap:18px;margin:16px 0 8px}
.hm-area-region{font-weight:700;font-size:14px;margin-bottom:8px;padding-left:8px;
  border-left:3px solid #8c2f21}
.hm-area-links{display:flex;flex-wrap:wrap;gap:8px}
.hm-area-links a{display:inline-flex;align-items:baseline;gap:6px;padding:6px 12px;
  background:#f4f2ef;border-radius:4px;text-decoration:none;font-size:13px;color:inherit}
.hm-area-links a:hover{background:#8c2f21;color:#fff}
.hm-area-links em{font-style:normal;font-size:11px;opacity:.6}
.hm-area-links a:hover em{opacity:.85}

/* 有名ジム */
.hm-brand-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:10px;margin:16px 0 8px}
.hm-brand-item{display:flex;flex-direction:column;gap:2px;padding:12px 14px;
  border:1px solid #e4e0da;border-radius:4px;text-decoration:none;color:inherit;background:#fff}
.hm-brand-item:hover{border-color:#8c2f21;background:#f9f4f3}
.hm-brand-item strong{font-size:14px}
.hm-brand-item span{font-size:11px;opacity:.65}
.hm-brand-item em{font-style:normal;font-size:11px;color:#8c2f21}

@media(max-width:600px){
  .hm-search form{flex-direction:column}
  .hm-search button{padding:12px}
}


/* ------------------------------------------------------------
   2. アフィリエイト導線ブロック（.gym-affiliate）
      これまで CSS が未定義で、本文にベタ組みされていた。
      記事本文と見分けがつく囲みにし、PR 表記を出す。
   ------------------------------------------------------------ */

.gym-affiliate{
  position:relative;
  margin:2.8em 0 2em;
  padding:22px 20px 18px;
  border:1px solid #e4e0da;
  border-radius:6px;
  background:#faf8f6;
}

/* 広告であることの明示（景品表示法・ステマ規制対応） */
.gym-affiliate::before{
  content:"PR";
  position:absolute;
  top:-10px;
  left:16px;
  padding:2px 9px;
  background:#8c8377;
  color:#fff;
  font-size:11px;
  line-height:1.5;
  letter-spacing:.1em;
  border-radius:3px;
}

/* 見出し。テーマの h3 装飾（左の赤ライン）が乗らないよう打ち消す */
.gym-affiliate .gym-affiliate-head,
.gym-affiliate h3,
.article .gym-affiliate h3{
  margin:0 0 12px;
  padding:0;
  border:0;
  background:none;
  font-size:17px;
  font-weight:700;
  line-height:1.5;
  color:#333;
}

.gym-affiliate p{margin:0 0 10px;font-size:15px;line-height:1.85}
.gym-affiliate p:last-child{margin-bottom:0}

.gym-affiliate a{color:#c02718;font-weight:700;text-decoration:underline}
.gym-affiliate a:hover{opacity:.8}

/* バナー。スマホで横にはみ出さないようにする */
.gym-affiliate a img{
  display:block;
  margin:14px auto 2px;
  max-width:100%;
  height:auto;
}

@media(max-width:480px){
  .gym-affiliate{padding:20px 14px 14px}
  .gym-affiliate .gym-affiliate-head,
  .gym-affiliate h3,
  .article .gym-affiliate h3{font-size:16px}
  .gym-affiliate p{font-size:14px}
}

/* ============================================================
   gym.penlab.jp  追加CSS その2 — スマホの横幅崩れ対策
   貼り先: 子テーマ style.css の末尾（前回と同じ場所に追記）
   ============================================================ */

/* ------------------------------------------------------------
   原因: 表の「公式サイト」セルに長い URL をそのまま入れているため、
   日本語と違って途中で折り返せず、表が画面幅を突き破っていた。
   （該当89記事。最長は Facebook の URL エンコード済みリンクで200字超）
   はみ出した本文に合わせてページ全体が横に伸び、
   ヘッダーが画面幅とずれて「崩れて」見えていた。
   ------------------------------------------------------------ */

/* URL など折り返し位置のない文字列を、セル幅で強制的に折り返す */
.entry-content table th,
.entry-content table td,
.article table th,
.article table td{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* リンク文字列そのものにも適用（表の外に置かれた URL 用） */
.entry-content a,
.article a{
  overflow-wrap:anywhere;
}

/* 表が親要素より広がらないことを保証する */
.entry-content table,
.article table{
  width:100%;
  max-width:100%;
}

/* ------------------------------------------------------------
   本文の左右パディングがスマホで効きすぎていた。
   .main は padding:20px 40px 固定で、モバイル指定が無かったため、
   375px の画面で本文に使える幅が 295px しか残っていなかった。
   ------------------------------------------------------------ */

@media screen and (max-width:834px){
  .main{padding:20px 24px}
}

@media screen and (max-width:480px){
  .main{padding:16px 14px}

  /* 表は文字を一段落として詰める */
  .entry-content table th,
  .entry-content table td,
  .article table th,
  .article table td{
    padding:8px 10px;
    font-size:14px;
    line-height:1.7;
  }

  /* 項目名の列が広がりすぎないようにする */
  .entry-content table th:first-child,
  .entry-content table td:first-child,
  .article table th:first-child,
  .article table td:first-child{
    width:30%;
  }
}
/* ============================================================
   gym.penlab.jp  追加CSS その3 — フッター
   貼り先: 子テーマ style.css の末尾（前回と同じ場所に追記）

   ※ これまで footer-center ウィジェットの中に <style> で置いていた
      分をここへ移設し、3カラム化に合わせて追加している。
      貼り付け後に install_footer.py を実行すると
      ウィジェット側の <style> は取り除かれる。
   ============================================================ */

/* ------------------------------------------------------------
   共通（ウィジェットから移設）
   ------------------------------------------------------------ */
.gym-footer-nav{font-size:13px;line-height:1.8}
.gym-footer-nav h3{font-size:13px;letter-spacing:.08em;margin:0 0 10px;padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.2)}
.gym-footer-nav ul{list-style:none;padding:0;margin:0}
.gym-footer-nav li{padding:1px 0}
.gym-footer-nav a{text-decoration:none;font-size:12px;display:flex;justify-content:space-between;gap:8px}
.gym-footer-nav a:hover{text-decoration:underline}
.gym-cnt{opacity:.55;font-size:11px}
.gym-footer-sec+.gym-footer-sec{margin-top:22px}

/* 中央カラム: 全国のエリア */
.gym-footer-regions{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gym-footer-region .gym-region-title{font-weight:600;font-size:12px;opacity:.75;margin-bottom:4px}
.gym-footer-genres{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:4px}
.gym-footer-genres a{font-size:12px}

/* ------------------------------------------------------------
   左カラム: サイト紹介
   ------------------------------------------------------------ */
.gym-footer-about{font-size:13px;line-height:1.8}

.gym-footer-lead{
  font-size:12.5px;
  line-height:1.9;
  margin:0 0 16px;
  opacity:.85;
}

/* 規模を数字で見せる */
.gym-footer-stats{
  display:flex;
  gap:18px;
  margin:0 0 20px;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.15);
}
.gym-footer-stats div{display:flex;flex-direction:column;gap:2px}
.gym-footer-stats strong{font-size:19px;font-weight:700;line-height:1.2}
.gym-footer-stats span{font-size:11px;opacity:.65;letter-spacing:.04em}

/* サイト情報リンク */
.gym-footer-about h3{
  font-size:13px;letter-spacing:.08em;margin:0 0 10px;padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.2);
}
.gym-footer-meta{list-style:none;padding:0;margin:0}
.gym-footer-meta li{padding:1px 0}
.gym-footer-meta a{font-size:12px;text-decoration:none}
.gym-footer-meta a:hover{text-decoration:underline}

/* アフィリエイト表記 */
.gym-footer-pr{
  margin:18px 0 0;
  font-size:11px;
  line-height:1.8;
  opacity:.6;
}

/* ------------------------------------------------------------
   レスポンシブ
   ------------------------------------------------------------ */
@media(max-width:900px){
  .gym-footer-regions{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:480px){
  .gym-footer-regions{grid-template-columns:1fr}
  .gym-footer-stats{gap:14px}
  .gym-footer-stats strong{font-size:17px}
  .gym-footer-sec+.gym-footer-sec{margin-top:18px}
}