@charset "utf-8";

/* ==============================================================
   汎用 utility (全ページ最終 load。module.css の !important utility を
   source order で上書きするためここに集約。footer.php で常時 load)

   - .bb       : box-sizing: border-box (width 100% + border の overflow 吸収)
   - .pcHide   : PC のみ非表示 (TB + SP 表示) ※ .pcNone は SP 限定とは別物
   - .w*-tb    : TB 専用 width utility (-sp と同パターン、!important 付き)
   ============================================================== */

.bb {
  box-sizing: border-box;
}

@media screen and (min-width: 1025px) {
  .pcHide {
    display: none !important;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .w90p-tb {
    width: 90% !important;
  }
  .w100p-tb {
    width: 100% !important;
  }
  .w1200-tb {
    width: 1200px !important;
  }
  .w384-tb {
    width: 384px !important;
  }
}

/* ==============================================================
   暮ら旅セクション (footerRadioContainer) v3 — 2026-05-24 改修
   旧: ベージュ背景 + テキスト + 動画 (mp4) の 2 列グリッド
   新: 背景画像フルブリード (PC/TB) / 画像上+テキスト下の 2 段 (SP)
       Instagram ボタンへリンク変更 (旧「ドラマを視聴」+「ラジオドラマ」廃止)
   ============================================================== */

.footerRadioContainer {
  background-image: url("/_common_parts/img/kuratabi/kuratabi-bg-pc_202608.jpg");
  background-size: cover;
  background-position: center;
  background-color: #2c3540; /* fallback */
  background-repeat: no-repeat;
  /* 画像 aspect 1440:600 = 12:5 と section aspect を一致させ、
       cover による上下クロップを発生させず画像全体を表示 */
  aspect-ratio: 12 / 5;
}

.footerRadioContainer .footerRadioWrap {
  /* aspect-ratio 確定の高さを使い切るため、テキストを縦中央寄せ */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 0;
}

.footerRadioWrap .footerRadioTxt {
  padding-left: calc(100vw * 90 / 1440);
  padding-right: calc(100vw * 90 / 1440);
  max-width: 720px;
  color: #fff;
}

.footerRadioTxt .kuratabi__copy {
  width: 173px;
  max-width: 100%;
  height: auto;
  display: block;
}

.footerRadioTxt .kuratabi__maincopy {
  width: 466px;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Instagram ボタン (旧 .footerRadioTxt a.dspGrid を置換)
   背景白 / 黒系テキスト
   hover: 背景を rgba(255,255,255,0.8) にして "白だけ" 薄くする
   (opacity だとテキスト+アイコンも薄くなるため background-color で制御)
   color は a:hover デフォルトに上書きされないよう全状態で明示固定 */
.kuratabiInstaBtn,
.kuratabiInstaBtn:hover,
.kuratabiInstaBtn:visited,
.kuratabiInstaBtn:focus,
.kuratabiInstaBtn:active {
  color: #2c3540;
}
.kuratabiInstaBtn {
  display: inline-flex;
  align-items: center;
  column-gap: 12px;
  padding: 14px 28px;
  border-radius: 9999px;
  text-decoration: none;
  background-color: rgba(255, 255, 255, 1);
  width: fit-content;
  box-sizing: border-box;
  transition: background-color 0.2s ease;
}
.kuratabiInstaBtn:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.kuratabiInstaBtn__icon {
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
}

/* PC では SP 用 HTML 画像を非表示 (背景画像で表現するため) */
.footerRadioImage {
  display: none;
}

/* ==============================================================
   TB 帯 (769-1024px) — aspect-ratio はそのまま継承、テキスト幅を少し詰める
   ============================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .footerRadioWrap .footerRadioTxt {
    max-width: 60%;
    padding-left: 40px;
    padding-right: 40px;
  }
  .footerRadioTxt .kuratabi__maincopy {
    width: 380px;
  }
}

/* ==============================================================
   SP 帯 (<=768px) — 画像上 + テキスト下の 2 段。テキスト背景 #2c3540
   ============================================================== */
@media (max-width: 768px) {
  .footerRadioContainer {
    background-image: none;
    background-color: #2c3540;
    aspect-ratio: auto; /* SP は HTML img を使うため aspect 解除 */
  }
  .footerRadioContainer .footerRadioWrap {
    display: flex;
    flex-direction: column;
    padding: 0;
    height: auto;
    justify-content: flex-start;
  }
  .footerRadioImage {
    display: block;
    order: 1;
  }
  .footerRadioImage img {
    width: 100%;
    height: auto;
    display: block;
  }
  .footerRadioWrap .footerRadioTxt {
    order: 2;
    max-width: none;
    padding: 60px 45px;
    background-color: #2c3540;
  }
  .footerRadioTxt .kuratabi__copy {
    width: 140px;
  }
  .footerRadioTxt .kuratabi__maincopy {
    width: 100%;
    max-width: 360px;
  }
  .kuratabiInstaBtn {
    width: 100%;
    max-width: 296px;
    justify-content: center;
    padding: 12px 24px;
    column-gap: 10px;
  }
}

/* ==============================================================
   .pullDown__summary--text : シンプル下線スタイル modifier
   「続きを読む」/「閉じる」を青背景 box ではなく
   テキスト + 下線 のみで表示するための modifier。
   common.css から移設 (2026-05-27): common.css は brand/contents
   限定 load のため、home-customize 等の他ページで再利用するため。
   基本スタイル .pullDown__summary は各テーマの module.css 定義のため、
   modifier は !important で確実に上書きする。
   ============================================================== */
.pullDown__summary--text {
  background: transparent !important;
  padding: 8px 0 !important;
  /* block + fit-content + auto margin で親幅に依らず中央配置 */
  display: block !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.pullDown__summary--text .pullDown__ttl {
  color: var(--colors-main-gray, #4c4948) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}