@charset "UTF-8";
/* =========================================================================
   原作デビュー100周年記念「くまのプーさん展」／岡山会場
   専用スタイル  ( assets/css/style.css )

   - TSC共通のヘッダー／フッターは reset.css / module.css / tsc.css /
     tsc-sp.css が担当。ここでは #main 配下（展覧会コンテンツ）のみ扱う。
   - 色・フォントは :root の変数で一元管理。変更はここだけでOK。
   ========================================================================= */

/* =========================================================
   変数
   ========================================================= */
:root {
    /* --- カラー（デザイン指定 ＋ カンプ実測） --- */
    --c-red: #E1002A;
    /* メインレッド（差し色） */
    --c-text: #333333;
    /* メインテキスト */
    --c-cream: #FCFBE4;
    /* KV背景クリーム */
    --c-yellow: #FAC449;
    /* プーさんイエロー */
    --c-yellow-b: #FCCB00;
    /* ロゴ明るいイエロー */
    --c-yellow-d: #E0AD37;
    /* ロゴ暗いイエロー */
    --c-brown: #6A3906;
    /* アクセントブラウン */
    --c-brown-l: #AE885C;
    /* 薄いブラウン */
    --c-green: #BFD998;
    /* 黄緑（Schedule背景・カンプ実測） */
    --c-blue: #98B1D9;
    /* 淡い青（日時指定対象外タグ・カンプ実測） */

    /* --- フォント --- */
    --f-en: "EB Garamond", "Times New Roman", serif;
    --f-maru: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
    --f-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

    /* --- レイアウト --- */
    --w: 1200px;
    /* コンテンツ最大幅 */
    /* ご挨拶アーチの縦半径。カンプ実測（カード幅1188 / ドーム高さ532 = 0.4475倍）に基づき、
       カード幅に比例させることでどの画面幅でも同じ比率のアーチになる */
    --arch-v: min(537px, calc((100vw - 40px) * 0.4475));
    --wave-h: 105px;
    /* 波形の高さ */
}

/* =========================================================
   ベース
   ========================================================= */
#main {
    background: var(--c-cream);
    color: var(--c-text);
    font-family: var(--f-base);
    font-weight: 500;
    font-size: 18px;
    line-height: 32px;
    overflow: hidden;
}

/* 画像の既定。:where() で詳細度を 0 にしてあるため、.psec__ttl img など
   個別クラスの height 指定が優先される。
   （#main img のままだとIDの詳細度が勝ち、SPの見出し高さ指定が無効化される） */
:where(#main) img {
    max-width: 100%;
    height: auto;
}

/* リンクの既定色。:where() で詳細度を0にしてあるため、.pnav a など
   個別クラスの色指定が優先される（#main a のままだとIDの詳細度が勝ってしまう） */
:where(#main) a {
    color: inherit;
}

/* ベースの段落余白。:where() で詳細度を 0 にしてあるため、
   .mv__date や .greeting__body p など個別クラスの指定が優先される。
   （#main p のままだとIDの詳細度が勝ち、margin:auto 等が無効化されるため） */
:where(#main) p {
    margin: 0 0 1em;
}

#main p:last-child {
    margin-bottom: 0;
}

/* セクション共通 */
.psec {
    padding: 90px 20px 100px;
}

.psec__inner {
    max-width: var(--w);
    margin: 0 auto;
}

.psec--cream {
    background: var(--c-cream);
}

.psec--yellow {
    background: var(--c-yellow);
}

.psec--yellow-b {
    background: var(--c-yellow-b);
}

.psec--green {
    background: var(--c-green);
}

.psec--brown {
    background: var(--c-brown-l);
}

/* セクション見出し（英字＋日本語） */
.psec__ttl {
    text-align: center;
    margin: 0 0 60px;
    color: var(--c-brown);
}

.psec__ttl .en {
    display: block;
    font-family: var(--f-en);
    font-weight: 600;
    font-size: 128px;
    line-height: 1;
}

.psec__ttl .ja {
    display: block;
    font-family: var(--f-maru);
    font-weight: 500;
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: .2em;
    text-indent: .2em;
    margin-top: 6px;
}

/* 見出しは支給のアウトラインSVGを使用。PCは原寸表示。
   （上の .en / .ja はテキスト組みに戻す場合に備えて残してある） */
.psec__ttl img {
    display: block;
    margin: 0 auto;
    /* reset.css の img{width:100%} を打ち消し、SVGの原寸で表示させる */
    width: auto;
    max-width: 100%;
    height: auto;
}

/* 注釈 */
.note {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
}

#main .u-center {
    text-align: center;
}

#main .u-red {
    color: var(--c-red);
}

#main .u-bold {
    font-weight: 700;
}

#main .u-underline {
    text-decoration: underline;
}

/* 赤いピル型ボタン */
#main .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    min-width: 600px;
    padding: 26px 50px;
    background: var(--c-red);
    color: #fff;
    font-family: var(--f-maru);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: .05em;
    text-decoration: none;
    border-radius: 999px;
    transition: opacity .2s;
}

#main .btn:hover {
    opacity: .8;
    color: #fff;
}

#main .btn::after {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
    flex: none;
}

/* =========================================================
   波形の区切り
   カンプの曲線を実測トレースしたパスを #wave-shape に定義し、
   各区切りは色（上＝color／下＝background）を変えるだけで使い回す。
   ========================================================= */
.wave {
    /* iOS Safari では、セクションと波の境界がサブピクセルでずれて 1px の隙間が
       見えることがある（同じ位置でも端末・拡大率によって出たり出なかったりする）。
       上下を 1px ずつ広げて負のマージンで重ねることで、隙間が原理的に出ないようにする。
       ・レイアウト上の高さは従来どおり var(--wave-h)（48 - 1 - 1 = 46）
       ・重なる 1px は、上＝波の塗り色（＝上のセクション色）、下＝background
         （＝下のセクション色）なので、見た目は変わらない
       ・z-index:1 で波が隣接セクションより前面に描画される（重ね順の担保） */
    height: calc(var(--wave-h) + 2px);
    margin: -1px 0;
    line-height: 0;
    position: relative;
    z-index: 1;
}

.wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wave use {
    fill: currentColor;
}

/* 上の色 = color ／ 下の色 = background */
.wave--cream-yellow {
    color: var(--c-cream);
    background: var(--c-yellow);
}

.wave--yellow-cream {
    color: var(--c-yellow);
    background: var(--c-cream);
}

.wave--cream-green {
    color: var(--c-cream);
    background: var(--c-green);
}

.wave--green-cream {
    color: var(--c-green);
    background: var(--c-cream);
}

.wave--cream-yellowb {
    color: var(--c-cream);
    background: var(--c-yellow-b);
}

.wave--yellowb-cream {
    color: var(--c-yellow-b);
    background: var(--c-cream);
}

.wave--cream-brown {
    color: var(--c-cream);
    background: var(--c-brown-l);
}

.wave--brown-cream {
    color: var(--c-brown-l);
    background: var(--c-cream);
}

/* =========================================================
   メインビジュアル
   ========================================================= */
.mv {
    background: var(--c-yellow-b);
    padding: 56px 20px 133px;
    text-align: center;
}

.mv__visual {
    max-width: var(--w);
    margin: 0 auto;
    /* KV画像の縁が透過しているため、下地にクリームを敷いて隙間を出さない */
    background: var(--c-cream);
}

.mv__visual img {
    display: block;
    width: 100%;
}

.mv__date {
    max-width: 938px;
    margin: 80px auto 0;
}

.mv__date img {
    display: block;
    width: 100%;
}

/* =========================================================
   グローバルナビ（黄色帯）
   ========================================================= */
.pnav {
    background: var(--c-brown);
    /* ホバー六角形（高さ147px）が帯からはみ出さない余白を確保 */
    padding: 56px 20px;
}

.pnav ul {
    max-width: var(--w);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pnav li {
    margin: 0;
}

.pnav a {
    display: block;
    position: relative;
    z-index: 0;
    text-align: center;
    text-decoration: none;
    color: #fff;
    transition: color .25s;
}

/* ホバー時は六角形（プーさんイエロー）の上に茶文字 */
.pnav a:hover {
    color: var(--c-brown);
}

/* ホバー時に文字の背面へ六角形（ハニカム）を表示 */
.pnav a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    /* 蜂の巣柄（bg-honeycomb.png）と同じ 幅:高さ = 0.87:1 の正六角形 */
    width: 128px;
    height: 147px;
    transform: translate(-50%, -50%);
    background: var(--c-yellow);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    opacity: 0;
    transition: opacity .25s;
}

.pnav a:hover::before {
    opacity: 1;
}

.pnav .en {
    display: block;
    font-family: var(--f-en);
    font-weight: 600;
    font-size: 30px;
    line-height: 1.05;
}

.pnav .ja {
    display: block;
    font-family: var(--f-maru);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .08em;
    text-indent: .08em;
    margin-top: 2px;
}

/* =========================================================
   News（お知らせ）
   ※中身は sipstool.jp の iframe。見た目はサービス側CSSに依存する。
   ========================================================= */
.news__frame {
    max-width: 1000px;
    margin: 0 auto;
}

/* 別ドメイン（sipstool.jp）のためJSで中身の高さを取得できない。高さは固定値。
   PCは 1行75px ＋ 行間の区切り線1px なので「76 × 件数 − 1」。ここは2件分＝151px。
   掲載件数が増えて枠内スクロールが出るようになったら、この式で増やす
   （news.css 側で余白は透過にしてあるため、多めに取っても茶色の帯が伸びて
   間延びすることはない） */
.news__frame iframe {
    display: block;
    width: 100%;
    height: 151px;
    border: 0;
}

/* =========================================================
   Greeting（ご挨拶）
   アーチはCSSで作成（本文の増減に追従するため）。
   画像版 assets/img/greeting-arch.png も残してあるので差し替え可。
   ========================================================= */
.greeting__arch {
    max-width: var(--w);
    margin: 0 auto;
    background: #fff;
    /* 枠線は三層。内側から 太線9px → 白7px → 細線2px。
       box-shadow の spread は border-radius に追従するのでアーチの曲線でも崩れない */
    border: 9px solid var(--c-brown);
    box-shadow: 0 0 0 7px #fff, 0 0 0 9px var(--c-brown);
    border-radius: 50% 50% 0 0 / var(--arch-v) var(--arch-v) 0 0;
    padding: 160px 75px 34px;
    text-align: center;
}

.greeting__arch .psec__ttl {
    color: var(--c-red);
    margin-bottom: 0;
}

.greeting__body {
    max-width: 1000px;
    /* 見出し（.psec__ttl は margin-bottom:0）との間隔はここで調整する */
    margin: 120px auto 0;
    font-size: 22px;
    line-height: 38px;
    text-align: center;
}

.greeting__body p {
    margin-bottom: 38px;
}

.greeting__fig {
    margin: 65px auto 0;
    max-width: 492px;
}

/* クレジットを挿絵の左端に揃えるためのラッパー */
.greeting__fig-inner {
    display: block;
    text-align: left;
}

.greeting__fig img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.greeting__fig figcaption {
    margin-top: 16px;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
}

/* =========================================================
   Contents（みどころ）／ Goods（グッズ）＝外部リンク1本
   ========================================================= */
.linkout {
    text-align: center;
}

.linkout .note {
    margin-top: 26px;
}

/* =========================================================
   Schedule（開催概要）
   ========================================================= */
.card {
    max-width: var(--w);
    margin: 0 auto;
    background: #fff;
    border-radius: 24px;
    padding: 70px 80px 80px;
}

.schedule__head {
    position: relative;
}

.schedule__pot {
    position: absolute;
    right: 0;
    /* 見出しの下マージン（60px）ぶん下げて、ポットの下端を表の上端にぴったり接する
       位置に置く（表には重ねない）。.schedule__head の高さは見出しの高さ分しかない
       （下マージンは相殺されて外に出る）ため、表の上端は head の下端＋60px の位置。
       表との間に隙間を空けたい場合はこの値を -60px より小さく（例 -55px＝5px空き）する */
    bottom: -60px;
    width: 62px;
}

.tbl-schedule {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 2px;
}

.tbl-schedule th,
.tbl-schedule td {
    padding: 20px 26px;
    text-align: left;
    vertical-align: top;
    font-size: 18px;
    line-height: 30px;
}

.tbl-schedule th {
    width: 200px;
    background: var(--c-brown);
    color: #fff;
    font-weight: 500;
    white-space: nowrap;
}

.tbl-schedule td {
    background: var(--c-cream);
}

/* =========================================================
   Ticket（チケット）
   ========================================================= */
.ticket__lead {
    max-width: 1010px;
    margin: 0 auto 40px;
}

/* 日程を囲う枠＋タグ */
.daterange {
    position: relative;
    max-width: 1010px;
    margin: 46px auto;
    padding: 26px 20px 22px;
    background: #fff;
    border: 3px solid var(--c-yellow-b);
    border-radius: 16px;
    text-align: center;
}

.daterange__tag {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-yellow-b);
    border-radius: 999px;
    padding: 5px 26px;
    font-family: var(--f-maru);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.5;
    white-space: nowrap;
}

.daterange p {
    font-family: var(--f-maru);
    font-weight: 700;
    font-size: 44px;
    line-height: 1.3;
    margin: 0;
}

.daterange--green {
    border-color: var(--c-green);
}

.daterange--green .daterange__tag {
    background: var(--c-green);
}

.daterange--blue {
    border-color: var(--c-blue);
}

.daterange--blue .daterange__tag {
    background: var(--c-blue);
}

/* パネル（見出し帯つきカード） */
.panel {
    max-width: 1090px;
    margin: 60px auto 0;
    border-radius: 24px;
    overflow: hidden;
}

.panel__ttl {
    margin: 0;
    padding: 18px 20px;
    text-align: center;
    color: #fff;
    font-family: var(--f-maru);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.5;
}

.panel__body {
    background: #fff;
    padding: 50px 46px 54px;
}

/* パネル末尾の「ご購入はこちら」ボタン。
   :where(#main) p のベース余白は margin:0 0 1em、かつ #main p:last-child で
   下マージンが 0 になるため、直前の本文との間隔をここで明示する */
.panel__buy {
    margin-top: 44px;
    text-align: center;
}

/* 2026-09-10 追加：ディズニー★JCBカードのご案内。
   .panel__buy（ボタン）の下に置くため、上の余白をここで明示する */
.jcb {
    margin-top: 44px;
}

.panel--red {
    border: 3px solid var(--c-red);
}

.panel--red .panel__ttl {
    background: var(--c-red);
}

.panel--brown {
    border: 3px solid var(--c-brown);
}

.panel--brown .panel__ttl {
    background: var(--c-brown);
}

/* 料金表 */
.tbl-price {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 36px;
    border-collapse: collapse;
    font-size: 20px;
    line-height: 1.5;
}

.tbl-price th,
.tbl-price td {
    padding: 18px 10px;
    text-align: center;
    border: 1px solid #fff;
}

.tbl-price thead th {
    background: var(--c-brown-l);
    font-weight: 500;
}

.tbl-price thead th.corner {
    background: transparent;
    border-color: transparent;
}

.tbl-price tbody th {
    text-align: left;
    padding-left: 26px;
    font-weight: 500;
    width: 34%;
}

.tbl-price tbody tr:nth-child(odd) th,
.tbl-price tbody tr:nth-child(odd) td {
    background: #fff;
}

.tbl-price tbody tr:nth-child(even) th,
.tbl-price tbody tr:nth-child(even) td {
    background: var(--c-brown-l);
}

/* 小見出し（＜ローソンチケット販売スケジュール＞ など） */
.sub-h {
    font-size: 20px;
    font-weight: 700;
    margin: 40px 0 14px;
}

/* 2列の簡易テーブル（発売日／販売場所） */
.tbl-simple {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.tbl-simple th,
.tbl-simple td {
    padding: 16px 24px;
    text-align: left;
    vertical-align: top;
    line-height: 30px;
}

.tbl-simple th {
    width: 220px;
    background: var(--c-brown);
    color: #fff;
    font-weight: 500;
    text-align: center;
}

.tbl-simple td {
    background: var(--c-cream);
}

/* 入場時間帯ブロック */
.timeslot {
    background: var(--c-yellow);
    padding: 30px 20px 34px;
    margin-top: 34px;
    text-align: center;
}

.timeslot h4 {
    margin: 0 0 18px;
    font-size: 20px;
    font-weight: 700;
}

.timeslot p {
    margin: 0;
}

/* 入場時間帯。PCは3列・SPは2列で、区切りの「／」は擬似要素で付ける。
   各行の最後の項目だけ「／」を消すので、列数が変わっても行末に残らない */
.timeslot__list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    justify-content: center;
}

.timeslot__list li {
    white-space: nowrap;
}

.timeslot__list li::after {
    content: "／";
}

.timeslot__list li:nth-child(3n)::after,
.timeslot__list li:last-child::after {
    content: "";
}

.timeslot .note {
    text-align: left;
    max-width: 640px;
    margin: 16px auto 0;
}

/* リスト（●／※／◆ など先頭記号つき） */
.list-note {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
}

.list-note li {
    padding-left: 1.2em;
    text-indent: -1.2em;
    margin-bottom: .2em;
}

.list-note--sm li {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
}

/* 直後の段落との隙間を詰める（会場窓口での当日券／決済方法リストなど） */
.list-note--tight {
    margin-bottom: 0;
}

/* 特典グッズの商品画像（縦位置 400x600） */
.goods-photo {
    display: block;
    /* reset.css の img{width:100%} を打ち消す */
    width: 400px;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* 画像プレースホルダ（素材待ち：チケット風チラシ） */
.ph {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
    aspect-ratio: 65 / 38;
    background: #fff;
    border: 1px solid var(--c-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 700;
    color: var(--c-text);
}

.ph::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, transparent calc(50% - .5px), var(--c-text) calc(50% - .5px), var(--c-text) calc(50% + .5px), transparent calc(50% + .5px));
}

.ph span {
    position: relative;
}

/* =========================================================
   来場者特典（チケット風チラシ）
   ========================================================= */
.bonus {
    max-width: var(--w);
    margin: 80px auto 0;
    background: url(../img/bg-honeycomb.png) no-repeat center top / 100% 100%;
    padding: 56px 100px 60px;
    text-align: center;
}

.bonus__bubble {
    max-width: 650px;
    margin: 0 auto 26px;
    padding: 22px 20px 34px;
    background: url(../img/bonus-bubble.png) no-repeat center top / 100% 100%;
    font-family: var(--f-maru);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.5;
}

.bonus__bubble strong {
    color: var(--c-red);
    font-size: 26px;
}

.bonus .note {
    margin-top: 20px;
}

/* =========================================================
   Access（会場アクセス）
   ========================================================= */
.access__name {
    text-align: center;
    font-family: var(--f-maru);
    font-weight: 700;
    font-size: 34px;
    line-height: 1.4;
    margin-bottom: 26px;
}

.access__map {
    max-width: 1000px;
    margin: 0 auto;
}

.access__map iframe {
    display: block;
    width: 100%;
    height: 450px;
    border: 0;
}

.access__addr {
    text-align: center;
    margin-top: 24px;
}

#main .link-u {
    display: inline-block;
    text-decoration: underline;
    font-weight: 700;
}

#main .link-u:hover {
    opacity: .7;
}

.ribbon-h {
    max-width: 1000px;
    margin: 60px auto 30px;
    background: var(--c-yellow-b);
    border-radius: 999px;
    padding: 12px 30px;
    text-align: center;
    font-family: var(--f-maru);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.5;
}

.floormap {
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: 1010px;
    margin: 0 auto;
}

.floormap img {
    display: block;
    width: 50%;
    height: auto;
}

.early {
    display: flex;
    gap: 20px;
    max-width: 1010px;
    margin: 0 auto;
}

.early>div {
    width: 50%;
}

.early img {
    display: block;
    width: 100%;
    margin-top: 16px;
}

/* =========================================================
   Notes（注意事項）／アコーディオン
   ========================================================= */
/* 見出しのないアコーディオン外の全般項目。本文サイズは .acc__body に合わせる */
.notes__lead {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    text-align: justify;
    margin-bottom: 20px;
}

.acc {
    margin-top: 10px;
}

.acc__item {
    background: url(../img/line-dashed.png) repeat-x left bottom / 1000px 5px;
    padding-bottom: 5px;
}

.acc__item:last-child {
    background: none;
    padding-bottom: 0;
}

.acc__head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: none;
    border: 0;
    padding: 24px 6px;
    cursor: pointer;
    text-align: left;
    font-family: var(--f-base);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.5;
    color: var(--c-brown);
}

.acc__head::after {
    content: "＋";
    flex: none;
    font-size: 34px;
    line-height: 1;
    color: var(--c-yellow-d);
}

.acc__head[aria-expanded="true"]::after {
    content: "－";
}

.acc__body {
    display: none;
    padding: 0 6px 26px;
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    text-align: justify;
}

/* =========================================================
   コピーライト
   ========================================================= */
.copyright-pooh {
    background: var(--c-cream);
    text-align: center;
    padding: 40px 20px 60px;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
}

/* =========================================================
   TOPへ戻る（風船）
   ========================================================= */
#js-pagetop {
    position: fixed;
    right: 30px;
    bottom: 40px;
    z-index: 999;
    width: 100px;
    background: none;
}

#js-pagetop a {
    display: block;
    background: none;
    width: auto;
    height: auto;
    border: 0;
}

#js-pagetop a img {
    display: block;
    width: 100%;
    height: auto;
}

#js-pagetop a span {
    display: none;
}

/* =========================================================
   スクロール表示アニメーション（ふわっと出る）
   main.js の IntersectionObserver が .pfade を付与し、
   画面内に入った時点で .is-shown を追加する。
   JSが動かない環境では .pfade が付かないため、常に表示されたまま。

   ※ prefers-reduced-motion（OSの「アニメーション効果」オフ）での無効化は
     入れていません。入れると、その設定の端末では演出が一切出なくなるためです。
     アクセシビリティを優先して無効化したい場合は、下記のブロックを追加してください。
       @media (prefers-reduced-motion: reduce) {
           .pfade, .pfade.is-shown { opacity:1; transform:none; transition:none; }
       }
   ========================================================= */
.pfade {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 2s cubic-bezier(.2, .7, .3, 1), transform 2s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}

.pfade.is-shown {
    opacity: 1;
    transform: none;
}

/* =========================================================
   タブレット
   ========================================================= */
@media screen and (max-width:1240px) {
    .psec__ttl .en {
        font-size: 96px;
    }

    .pnav .en {
        font-size: 28px;
    }

    .pnav .ja {
        font-size: 12px;
    }

    .card {
        padding: 60px 40px;
    }

    .panel__body {
        padding: 40px 28px;
    }

    .greeting__arch {
        padding: 128px 60px 28px;
    }

    .greeting__body {
        margin-top: 96px;
    }

    .daterange p {
        font-size: 36px;
    }

    .bonus {
        padding: 40px 40px 46px;
    }
}

/* =========================================================
   スマートフォン
   ========================================================= */
@media screen and (max-width:767px) {
    :root {
        /* SPは .psec の左右padding が16pxなのでカード幅は 100vw-32px */
        --arch-v: calc((100vw - 32px) * 0.4475);
        --wave-h: 46px;
    }

    #main {
        font-size: 15px;
        line-height: 26px;
    }

    .psec {
        padding: 50px 16px 56px;
    }

    .psec__ttl {
        margin-bottom: 34px;
    }

    .psec__ttl .en {
        font-size: 52px;
    }

    .psec__ttl .ja {
        font-size: 15px;
    }

    .psec__ttl img {
        width: auto;
        height: 48px;
    }

    /* ttl-greeting.svg は湾曲デザインで縦横比が他と異なるため個別指定。
       viewBox修正で余白込みの高さが 104.4 → 129.7 になったため、
       他の見出しと同じ見え方になるよう 1.146倍した値にしている */
    #greeting .psec__ttl img {
        height: 55px;
    }


    .note {
        font-size: 13px;
        line-height: 22px;
    }

    /* MV */
    .mv {
        padding: 16px 16px 40px;
    }

    .mv__date {
        margin-top: 24px;
    }

    /* ナビ：2段4列 */
    .pnav {
        /* ホバー六角形（高さ97px）が帯からはみ出さない余白を確保
           （リンク1行の高さ36px＋六角形のはみ出し30.5px → 上下32px必要） */
        padding: 32px 10px;
    }

    .pnav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px 0;
    }

    .pnav li {
        width: 25%;
    }

    /* 六角形はPCの128×147pxのままだと1項目の幅（約92px）をはみ出すため、
       縦横比 0.87:1 を保ったまま縮小する */
    .pnav a::before {
        width: 84px;
        height: 97px;
    }

    .pnav .en {
        font-size: 20px;
    }

    .pnav .ja {
        font-size: 10px;
        letter-spacing: .04em;
    }

    /* ボタン */
    #main .btn {
        min-width: 0;
        width: 100%;
        max-width: 340px;
        gap: 16px;
        padding: 18px 24px;
        font-size: 18px;
    }

    /* News：SPは1行72px（日付と見出しが縦積みになるためPCより低い）。
       「73 × 件数 − 1」で、ここは2件分＝145px */
    .news__frame iframe {
        height: 145px;
    }

    /* ご挨拶 */
    .greeting__arch {
        /* 枠線もPCの約45%に縮小（太線4px＋白3px＋細線1px相当） */
        border-width: 4px;
        box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--c-brown);
        padding: 56px 18px 14px;
    }

    .greeting__body {
        margin-top: 40px;
        font-size: 15px;
        line-height: 27px;
    }

    .greeting__body p {
        margin-bottom: 27px;
    }

    .greeting__fig {
        margin-top: 24px;
    }

    .greeting__fig figcaption {
        font-size: 11px;
        line-height: 18px;
    }

    /* カード／パネル */
    .card {
        border-radius: 16px;
        padding: 34px 16px 40px;
    }

    /* SPは見出しの幅が card いっぱいになり重なるため、
       絶対配置をやめて見出しの下・右寄せに置く */
    .schedule__pot {
        position: static;
        width: 42px;
        margin: -8px 0 0 auto;
    }

    .panel {
        border-radius: 16px;
        margin-top: 34px;
    }

    .panel__ttl {
        font-size: 17px;
        padding: 13px 14px;
    }

    .panel__body {
        padding: 26px 14px 30px;
    }

    .panel__buy {
        margin-top: 28px;
    }

    /* 2026-09-10 追加：ディズニー★JCBカードのご案内 */
    .jcb {
        margin-top: 28px;
    }

    /* 開催概要テーブル：縦積み */
    .tbl-schedule,
    .tbl-schedule tbody,
    .tbl-schedule tr,
    .tbl-schedule th,
    .tbl-schedule td {
        display: block;
        width: auto;
    }

    .tbl-schedule {
        border-spacing: 0;
    }

    .tbl-schedule th {
        width: auto;
        padding: 8px 14px;
        font-size: 15px;
        line-height: 24px;
        text-align: center;
    }

    .tbl-schedule td {
        padding: 12px 14px 16px;
        font-size: 15px;
        line-height: 25px;
        margin-bottom: 8px;
    }

    /* 料金表 */
    .tbl-price {
        font-size: 14px;
    }

    .tbl-price th,
    .tbl-price td {
        padding: 10px 4px;
    }

    .tbl-price tbody th {
        padding-left: 10px;
        font-size: 13px;
    }

    /* 日程枠 */
    .daterange {
        margin: 34px auto;
        padding: 20px 12px 16px;
        border-width: 2px;
    }

    /* 日付は必ず1行に収める。375px以下では22pxだと折り返すため、
       画面幅に応じて縮める（22pxを上限、狭い端末では 5.3vw） */
    .daterange p {
        font-size: min(22px, 5.3vw);
        white-space: nowrap;
    }

    .daterange__tag {
        font-size: 13px;
        padding: 4px 16px;
        top: -15px;
    }

    /* 2列テーブル：縦積み */
    .tbl-simple,
    .tbl-simple tbody,
    .tbl-simple tr,
    .tbl-simple th,
    .tbl-simple td {
        display: block;
        width: auto;
    }

    .tbl-simple {
        border-spacing: 0;
    }

    .tbl-simple th {
        width: auto;
        padding: 8px 12px;
        font-size: 14px;
    }

    .tbl-simple td {
        padding: 12px;
        margin-bottom: 8px;
        line-height: 25px;
    }

    .sub-h {
        font-size: 16px;
        margin: 26px 0 10px;
    }

    .timeslot {
        padding: 20px 12px 22px;
    }

    .timeslot h4 {
        font-size: 16px;
    }

    .timeslot__list {
        grid-template-columns: repeat(2, max-content);
        column-gap: 4px;
    }

    /* 3列時に消していた区切りを戻し、2列の行末で消す */
    .timeslot__list li:nth-child(3n)::after {
        content: "／";
    }

    .timeslot__list li:nth-child(2n)::after,
    .timeslot__list li:last-child::after {
        content: "";
    }

    .list-note--sm li {
        font-size: 13px;
        line-height: 22px;
    }

    .goods-photo {
        width: 220px;
    }

    .ph {
        font-size: 24px;
    }

    /* 来場者特典
       PCの background-size:100% 100%（引き伸ばし）のままだと、
       SPは枠が縦長になるため蜂の巣柄が縦に間延びする。
       cover で柄の縦横比を保ち、画像の左右にあるチケットの切り欠きは
       枠外に出てしまうのでCSSで描き直している。 */
    .bonus {
        position: relative;
        margin-top: 40px;
        padding: 26px 16px 30px;
        background-size: cover;
        background-position: center;
    }

    /* チケット風の切り欠き（左右・上下中央）。色はセクション背景と同じクリーム */
    .bonus::before,
    .bonus::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 24px;
        height: 48px;
        background: var(--c-cream);
        transform: translateY(-50%);
    }

    .bonus::before {
        left: 0;
        border-radius: 0 24px 24px 0;
    }

    .bonus::after {
        right: 0;
        border-radius: 24px 0 0 24px;
    }

    .bonus__bubble {
        font-size: 14px;
        padding: 16px 14px 24px;
    }

    .bonus__bubble strong {
        font-size: 16px;
    }

    /* アクセス
       会場名は必ず1行に収める。20px固定だとどの端末幅でも折り返すため、
       画面幅に応じて縮める（20pxを上限、狭い端末では 4.8vw） */
    .access__name {
        font-size: min(20px, 4.8vw);
        white-space: nowrap;
    }

    .access__map iframe {
        height: 280px;
    }

    .ribbon-h {
        font-size: 15px;
        margin: 34px auto 20px;
        padding: 10px 16px;
    }

    .floormap {
        flex-direction: column;
        gap: 14px;
    }

    .floormap img {
        width: 100%;
    }

    .early {
        flex-direction: column;
        gap: 26px;
    }

    .early>div {
        width: 100%;
    }

    /* 注意事項 */
    .notes__lead {
        font-size: 13px;
        line-height: 22px;
        margin-bottom: 14px;
    }

    .acc__head {
        font-size: 17px;
        padding: 16px 2px;
    }

    .acc__head::after {
        font-size: 24px;
    }

    .acc__body {
        font-size: 13px;
        line-height: 22px;
        padding-bottom: 18px;
    }

    .acc__item {
        background-size: 500px 4px;
    }

    /* コピーライト */
    .copyright-pooh {
        font-size: 10px;
        line-height: 18px;
        padding: 24px 16px 40px;
    }

    /* TOPへ戻る */
    #js-pagetop {
        right: 12px;
        bottom: 20px;
        width: 56px;
    }
}