@charset "utf-8";
/* アンパンマンのふわふわねつききゅう　トップ */

/*
  寸法はデザインカンプ（svg/mobile.svg: 430px / svg/desktop.svg: 1366px）の px 値。
  モバイルファースト。PC は 813px 以上（共通の menu.css と同じブレイクポイント）。
  KV は内部の要素を % で配置し、カンプの比率のまま伸縮させる。
*/

:root {
    --c-brown: #5c3c32;
    --c-sky-top: #51b8ea;
    --c-sky-bottom: #c6e5f7;
    --c-cream: #f8efa2;
    --c-lemon: #fbea76;
    --c-yellow: #fdd41f;
    --c-gold: #fece10;
    --c-stripe-red: #e94e63;
    --c-stripe-orange: #f39945;
    --c-stripe-yellow: #fff338;
    --c-edge: #9fd1f1;
    --panel-gap: 20px;
}

#fuwafuwaTop {
    background: #fff url("../img/bg_check.png") repeat left top;
    color: var(--c-brown);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: 800;
    overflow: hidden;
}
/* :where() で詳細度を0にし、各パーツのクラス指定で上書きできるようにする */
:where(#fuwafuwaTop) img { display: block; max-width: 100%; height: auto; }
#fuwafuwaTop ruby { ruby-position: over; }
#fuwafuwaTop rt { line-height: 1; }

.l-main {
    max-width: 600px;
    margin: 0 auto;
}

/* ---------- KV ---------- */
.kv__inner {
    position: relative;
    aspect-ratio: 430 / 594.07;
    background: linear-gradient(var(--c-sky-top), var(--c-sky-bottom)) no-repeat left top / 100% 97.08%;
}
.kv__inner > * { position: absolute; margin: 0; }
/* 虹の3本線 */
.kv__inner::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 96.487%;
    bottom: 0;
    background: linear-gradient(var(--c-stripe-red) 0 33.333%, var(--c-stripe-orange) 33.333% 66.666%, var(--c-stripe-yellow) 66.666%);
}
.kv__cloud {
    left: 4.651%;
    top: 1.852%;
    width: 86.047%;
    aspect-ratio: 1699 / 1174;
    /* 番組ロゴと重なる左上の雲だけを抜いた画像 */
    background: url("../img/kv_cloud02.png") no-repeat center / 100% 100%;
}
/* 番組ロゴ＋コピーライト（左上） */
.kv__credit {
    left: 3.488%;
    top: 1.515%;
    width: 25.581%;
}
.kv__credit img { width: 100%; }
.kv__credit p {
    margin: 2px 0 0;
    color: #000;
    font-size: 8px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}
.kv__logo {
    left: 4.651%;
    top: 10.437%;
    width: 90.698%;
}
.kv__logo img { width: 100%; }
.kv__machine {
    left: 19%;
    top: 35%;
    width: 62%;
    z-index: 1;
}
.kv__machine img { width: 100%; }

/* ---------- パネル共通 ---------- */
.panel {
    width: calc(100% - 40px);
    margin: var(--panel-gap) auto 0;
    box-sizing: border-box;
    border: 3px solid var(--c-brown);
    border-radius: 10px;
    background: var(--c-cream);
    overflow: hidden;
}
.kv + .panel { margin-top: 21px; }
.panel__lower { background: var(--c-lemon); }

/* 縁取り文字の画像見出し（幅はカンプの書き出しサイズ ÷ 2） */
.ttl { margin: 0 auto; }
.ttl img { width: 100%; }

/* 角丸の写真・イラスト */
.frame { margin: 0; }
.frame img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}

/* ボタン */
.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 68px;
    margin: 0 auto;
    box-sizing: border-box;
    border-radius: 10px;
    color: #fff;
    text-decoration: none;
    transition: filter .15s, transform .15s, box-shadow .15s;
}
.btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 27px;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    background: url("../img/icon_arrow.svg") no-repeat center / contain;
}
.btn__label { line-height: 1; }
.btn__label rt { font-size: 11px; }
.btn:hover { filter: brightness(1.08); }
.btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.btn--blue {
    border: 4px solid #434879;
    background: linear-gradient(#53bbef 0 50%, #2a9fd9 50%) border-box;
    font-size: 30px;
    font-weight: 700;
}
.btn--red {
    border: 3px solid #764038;
    background: linear-gradient(#eb5f3b 0 50%, #e9442b 50%) border-box;
    box-shadow: 2px 2px 0 #764038;
    font-size: 26px;
}
.btn--red:hover { transform: translate(2px, 2px); box-shadow: 0 0 0 #764038; }

/* ---------- ねつききゅうに乗って ---------- */
.panel--catch { padding: 29px 17px 17px; }
.ttl--catch { width: calc(348 / 350 * 100%); }
.panel--catch .frame { margin-top: 22px; }
.panel--catch .frame img { aspect-ratio: 350 / 197; }

/* ---------- あそべるお店 ---------- */
.panel--link {
    padding: 27px 17px;
    background: var(--c-yellow);
}

/* ---------- 操縦してみよう ---------- */
.panel--sojyu .panel__upper { padding: 32px 17px 20px; }
.ttl--sojyu { width: calc(262 / 350 * 100%); }
.ttl--sojyu img { width: 100%; }
.panel--sojyu .panel__upper .frame { margin-top: 23px; }
.panel--sojyu .panel__upper .frame img { aspect-ratio: 350 / 196; }
.panel--sojyu .panel__lower { padding: 20px 17px 41px; }
.photos {
    display: grid;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.photos .frame img { aspect-ratio: 350 / 216; }
.ttl--lever {
    width: calc(348 / 350 * 100%);
    margin-top: 32px;
}

/* ---------- 親子で一緒に ---------- */
.panel--oyako .panel__upper { padding: 22px 17px 22px; }
.ttl--oyako { width: calc(335 / 350 * 100%); }
.panel--oyako .frame { margin-top: 23px; }
/* 筐体の正面が見えるよう縦長の写真（3:4）を使う */
.panel--oyako .frame img { aspect-ratio: 3 / 4; }
.balloon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 327px;
    max-width: 100%;
    height: 149px;
    margin: -40px auto 0;
    box-sizing: border-box;
    border: 3px solid #5b3a31;
    border-radius: 50%;
    background: #fed419;
    box-shadow: 3px 3px 0 #5c3b31;
    font-size: 28px;
    line-height: 42px;
    text-align: center;
}
.balloon rt { font-size: 12px; }
.panel--oyako .panel__lower {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
}
.capacity {
    margin: 0;
    color: #5c3b31;
    font-size: 23px;
    line-height: 1;
}
.capacity rt { font-size: 12px; }

/* ---------- アンカード ---------- */
.panel--ancard {
    padding: 32px 17px 27px;
    background: var(--c-gold);
}
.ttl--ancard { width: calc(252 / 350 * 100%); }
/* カード2枚：カンプの回転・配置をそのまま再現（基準枠 388.7×305） */
.ancard__cards {
    position: relative;
    width: calc(349.4 / 350 * 100%);
    margin: 21px auto 0;
    aspect-ratio: 388.7 / 305;
}
.ancard__cards img {
    position: absolute;
    width: 39.62%;
    transform-origin: 0 0;
}
.ancard__cards img:nth-child(1) { left: 0; top: 10.49%; transform: rotate(-12deg); }
.ancard__cards img:nth-child(2) { left: 61.56%; top: 17.48%; transform: rotate(14deg); }
.ancard__body { display: contents; }
.panel--ancard .ttl--ancard { order: -1; }
.panel--ancard { display: flex; flex-direction: column; }
.panel--ancard .btn { margin-top: 20px; }

/* ---------- フッター ---------- */
.l-footer {
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px 52px;
    text-align: center;
}
.l-footer p { margin: 0; }
.l-footer__bnr img { width: 100%; max-width: 490px; margin: 0 auto; }
.l-footer__bnr a:hover { opacity: .85; }
.l-footer__logo { margin-top: 40px !important; }
.l-footer__logo img { width: 106px; margin: 0 auto; }
.l-footer__copy {
    margin-top: 22px !important;
    color: #000;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
}

/* ================= PC ================= */
@media screen and (min-width: 813px) {

    .l-main { max-width: none; padding-top: 87px; }
    .panel,
    .kv {
        width: calc(100% - 40px);
        max-width: 930px;
        margin-right: auto;
        margin-left: auto;
    }
    .kv + .panel { margin-top: var(--panel-gap); }

    /* KV：枠付きパネル。内寸 924×345 を基準に % 配置 */
    .kv {
        box-sizing: border-box;
        border: 3px solid var(--c-brown);
        border-radius: 10px;
        overflow: hidden;
    }
    .kv__inner {
        aspect-ratio: 924 / 345;
        background-size: 100% 95.739%;
    }
    .kv__inner::after {
        top: 94.725%;
        background: linear-gradient(var(--c-stripe-red) 0 38.23%, var(--c-stripe-orange) 38.23% 76.46%, var(--c-stripe-yellow) 76.46%);
    }
    /* 雲はカンプのリピートグリッド（2枚並び・613×293で切り抜き） */
    .kv__cloud {
        left: 1.299%;
        top: 6.087%;
        width: 66.342%;
        height: 84.928%;
        aspect-ratio: auto;
        overflow: hidden;
        background: none;
    }
    .kv__cloud::before,
    .kv__cloud::after {
        content: "";
        position: absolute;
        top: 0;
        width: 69.005%;
        height: 100%;
        background: url("../img/kv_cloud.png") no-repeat center / 100% 100%;
    }
    /* 左側の1枚だけ、番組ロゴと重なる左上の雲を抜いた画像にする */
    .kv__cloud::before { left: 0; background-image: url("../img/kv_cloud02.png"); }
    .kv__cloud::after { left: 72.268%; }
    .kv__credit {
        left: 2.165%;
        top: 3.768%;
        width: 16.234%;
    }
    .kv__credit p { margin-top: 3px; font-size: 10px; }
    .kv__logo {
        left: 5.952%;
        top: 21.449%;
        width: 47.403%;
    }
    .kv__machine {
        left: 65.1%;
        top: 1.7%;
        width: 25.8%;
    }

    .btn::after { right: 28px; }

    /* ねつききゅうに乗って */
    .panel--catch { padding: 33px 40px 27px; }
    .ttl--catch { width: 604.5px; max-width: 100%; }
    .panel--catch .frame { margin-top: 28.5px; }
    .panel--catch .frame img { aspect-ratio: 844 / 475; }

    /* あそべるお店 */
    .panel--link { padding: 27px 40px; }
    .btn--blue { width: 434px; max-width: 100%; }

    /* 操縦してみよう */
    .panel--sojyu .panel__upper { padding: 31px 40px 39px; }
    .ttl--sojyu { width: 820px; max-width: 100%; }
    .panel--sojyu .panel__upper .frame { margin-top: 27.5px; }
    .panel--sojyu .panel__upper .frame img { aspect-ratio: 844 / 475; }
    .panel--sojyu .panel__lower { padding: 30px 40px 62px; }
    .photos {
        grid-template-columns: 1fr 1fr;
        gap: 26px;
    }
    .photos .frame img { aspect-ratio: 409 / 252; }
    .ttl--lever { width: 509.5px; max-width: 100%; margin-top: 42.5px; }

    /* 親子で一緒に */
    .panel--oyako .panel__upper { padding: 41.5px 40px 22px; }
    .ttl--oyako { width: 597px; max-width: 100%; }
    .panel--oyako .frame { width: 440px; max-width: 100%; margin: 21.5px auto 0; }
    .balloon { margin-top: -74px; }
    .panel--oyako .panel__lower { height: 111px; }

    /* アンカード：左にカード、右に見出しとボタン */
    .panel--ancard {
        display: grid;
        grid-template-columns: 388.7fr 439.5fr;
        align-items: center;
        gap: 12px;
        padding: 47px 38px 47px 46.6px;
    }
    .ancard__cards { width: 100%; margin: 0; }
    .ancard__body { display: block; }
    .ttl--ancard { width: 100%; margin: 0; }
    .panel--ancard .btn {
        width: 366px;
        max-width: calc(100% - 6px);
        margin: 21.5px 0 0 6px;
    }

    /* フッター */
    .l-footer { max-width: none; padding: 50px 20px 60px; }
    .l-footer__logo { margin-top: 50px !important; }
}