@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.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;
}