/* 西武園ゆうえんち × OWV 特設LP — スタイル
   西武園ゆうえんち公式サイト（seibuen-amusement-park.jp）の共通CSSを 2026-09-29 に実測した文法だけで組む。
     ルート 14px（.875em）／本文 weight 500・#333・行間1.45・字間.008em ／ 段落 16px
     見出し h2 30px 600 #801f00 字間.07em、文字の下に 6px の黄 #fc0 ／ h3 28px 600 黄3px ／ h4 20px 700 黄2px ／ h5 18px 700
     添え書き（sub-text）12px、日付・数字は DM Sans 700 #6c593e
     箱は白 #fff の角丸 4rem（イベントページのインライン指定）、内側 25px 30px、最大幅 900px。紙は #fffaf5
     ボタンは #ed2d13 に白文字 700、角丸 10px、影は「0 3px #e1ddda」のベタ（ぼかし無し）、右に小さな矢印
     リストは 5px の点、注記は ※、区切りは 1px #d9cfc1、写真の角丸 8px、表の見出し行は赤地に白・2段目は #ffe9e9
     タブは公式の「カレンダー見出し」：白の角丸8px＋ベタ影、選択中は #c4c4c4
     アコーディオンは右に赤い丸の「＋」
     公式に無いもの（ぼかし影・グラデ・ピル・4色アクセント・黒タグ・横スライド）は使わない */
@font-face{font-family:"Noto Sans JP LP";src:url("fonts/notosansjp-regular-sub.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Sans JP LP";src:url("fonts/notosansjp-medium-sub.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Noto Sans JP LP";src:url("fonts/notosansjp-bold-sub.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"DM Sans LP";src:url("fonts/dmsans-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  --ink:#333;--ink2:#2d2d2d;--muted:#6c593e;--paper:#fffaf5;--white:#fff;
  --red:#ed2d13;--maroon:#801f00;--yellow:#fc0;
  --pink:#ffe9e9;--grey:#f4f4f4;--grey2:#c4c4c4;--line:#d9cfc1;--line2:#ccc;--shadow:#e1ddda;
  --ja:"Noto Sans JP LP","Noto Sans JP","Helvetica Neue","Segoe UI",Helvetica,"游ゴシック体",YuGothic,"Yu Gothic Medium","メイリオ",Meiryo,sans-serif;
  --en:"DM Sans LP","DM Sans",sans-serif;
  --box-r:4rem;--btn-r:.71429em;--pic-r:.57143em;
}
*{box-sizing:border-box}
html{font-family:var(--ja);font-size:.875em;font-weight:500;line-height:1.45;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;color:var(--ink);letter-spacing:.008em;background:var(--paper);overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-bottom:84px}
img{max-width:100%;height:auto;display:block}
a{color:var(--red)}
h1,h2,h3,h4,h5,p,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;letter-spacing:inherit}
.num{font-family:var(--en);font-weight:700;color:var(--muted)}

/* ---------- ヘッダー（アソビュー）---------- */
.hdr{position:sticky;top:var(--hdr-top,0px);z-index:40;background:var(--white);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:14px;height:52px}
main section[id]{scroll-margin-top:calc(var(--hdr-h,110px) + var(--hdr-top,0px) + 8px)}
.wrap{max-width:900px;margin:0 auto;padding:0 1.42857em}

/* ---------- KV（公式のキービジュアルを丸ごと。黒地の画像なので帯も黒）---------- */
.kv{background:#000}
.kv .wrap{max-width:900px;padding:0}
.kv figure{margin:0}
.kv figure img{display:block;width:100%;max-width:640px;height:auto;margin:0 auto}
.kv figcaption{font-size:.78571em;color:#9a9a9a;text-align:right;padding:.42857em 1.42857em .71429em}

/* ---------- 公式の段落の型 ---------- */
.para{max-width:900px;margin:0 auto 2.14286em}
.para p{font-size:1.14286em;line-height:1.45}
.para p+p{margin-top:.5em}
.para.large p{font-size:1.28571em;line-height:1.5}
.para.center{text-align:center}
.note p{position:relative;padding-left:1.28571em;font-size:.92857em;color:#555}
.note p::before{content:"※";position:absolute;left:0;top:0}
.note p+p{margin-top:.28571em}

/* 見出し（公式 heading-lv2〜lv5：文字の下に黄色の線が重なる）*/
.h2,.h3,.h4{max-width:900px;margin:0 auto;text-align:center}
.h2{margin:0 auto 1.57143em}.h2>div{position:relative;display:inline-block;padding:0 .35714em}
.h2>div::after{content:"";position:absolute;left:0;right:0;bottom:.28571em;height:6px;background:var(--yellow)}
.h2 h2{position:relative;z-index:1;font-size:2.14286em;font-weight:600;line-height:1.3;letter-spacing:.07em;color:var(--maroon)}
.h3{margin:2.85714em auto 1.21429em}.h3>div{position:relative;display:inline-block;padding:0 .35714em .35714em}
.h3>div::after{content:"";position:absolute;left:0;right:0;bottom:.57143em;height:3px;background:var(--yellow)}
.h3 h3{position:relative;z-index:1;font-size:2em;font-weight:600;line-height:1.3;letter-spacing:.05em;color:var(--maroon)}
.h4{margin:2.14286em auto .85714em}.h4>div{position:relative;display:inline-block;padding:0 .28571em}
.h4>div::after{content:"";position:absolute;left:0;right:0;bottom:.21429em;height:2px;background:var(--yellow)}
.h4 h4{position:relative;z-index:1;font-size:1.42857em;font-weight:700}
.sub-text{text-align:center;font-size:.85714em;margin:-.85714em 0 1.42857em;color:var(--muted)}

/* 白い箱（公式 color-box。イベントページは角丸 4rem）*/
.box{max-width:900px;margin:0 auto 2.14286em;background:var(--white);border-radius:var(--box-r);padding:1.78571em 2.14286em}
.box.pink{background:var(--pink)}
.box>:last-child{margin-bottom:0}

/* ボタン（公式 elem-btn）*/
.btn{position:relative;display:block;width:50%;margin:0 auto;padding:.92857em 2.5em 1.07143em 1.42857em;border-radius:var(--btn-r);background:var(--red);color:var(--white);font-size:1em;font-weight:700;text-align:center;text-decoration:none;box-shadow:0 .21429em var(--shadow);border:0;cursor:pointer}
.btn::before{content:"";position:absolute;right:.85714em;bottom:1.28571em;width:.5em;height:.5em;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
.btn:hover{text-decoration:none;opacity:.85}
.btn.white{background:var(--white);color:var(--ink2)}
.btn.small{font-size:.92857em;padding:.71429em 2.2em .85714em 1.14286em}
.btn-list{max-width:900px;margin:0 auto 2.14286em;list-style:none;padding:0}
.btn-list li+li{padding-top:1.07143em}

/* リスト（公式 txt-list：5px の点）*/
.txt-list{max-width:900px;margin:0 auto 2.14286em}
.txt-list li p{font-size:1.14286em;line-height:1.45}
.txt-list li p>span{position:relative;display:inline-block;padding-left:.92857em}
.txt-list li p>span::before{content:"";position:absolute;top:.57143em;left:0;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.txt-list li+li{margin-top:1.07143em}
.txt-list.small li p{font-size:.92857em}
.txt-list.small li+li{margin-top:.5em}
.txt-list a{color:var(--red)}

/* 区切り */
.sep{max-width:900px;margin:2.14286em auto;border:0;border-top:1px solid var(--line)}

/* 写真（公式 elem-pic：角丸8px）*/
.pic{max-width:900px;margin:0 auto 2.14286em}
.pic .holder{position:relative;overflow:hidden;text-align:center}
.pic .holder img{border-radius:var(--pic-r);margin:0 auto}

/* 写真の枠（縦横比がばらつく面。切り抜かず 3:2 の枠に収める。地は公式の灰）*/
.frame{aspect-ratio:3/2;background:var(--grey);border-radius:var(--pic-r);overflow:hidden;display:flex;align-items:center;justify-content:center}
.frame img{width:100%;height:100%;object-fit:contain;border-radius:0}

/* 段組（公式 divide-block）*/
.cols{max-width:900px;margin:0 auto 2.14286em;display:grid;gap:1.42857em}
.cols.c2{grid-template-columns:repeat(2,1fr)}
.cols.c3{grid-template-columns:repeat(3,1fr)}
.cols.c4{grid-template-columns:repeat(4,1fr)}
.cell .t{font-size:1em;font-weight:700;line-height:1.4;margin-top:.71429em}
.cell .g{font-size:.85714em;color:#666;margin-top:.14286em}
.cell .price{font-size:1.14286em;font-weight:700;margin-top:.21429em}
.cell .price .num{color:var(--ink)}
.cell .credit{font-size:.71429em;color:#888;margin-top:.35714em}

/* YouTube（公式には無い部品。サムネは角丸8pxの写真として置き、再生の印は赤い小さな四角だけ）*/
.yt{display:block;position:relative;width:100%;aspect-ratio:16/9;padding:0;border:0;border-radius:var(--pic-r);overflow:hidden;background:#000;cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover}
.yt .play{position:absolute;left:50%;top:50%;width:3.42857em;height:2.42857em;margin:-1.21429em 0 0 -1.71429em;background:var(--red);border-radius:.42857em}
.yt .play::after{content:"";position:absolute;left:1.35em;top:.68em;border-left:.9em solid #fff;border-top:.55em solid transparent;border-bottom:.55em solid transparent}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pic-txt{display:grid;grid-template-columns:1fr 1fr;gap:1.42857em 3.33333%;align-items:start;max-width:900px;margin:0 auto 2.14286em}
.pic-txt .t{font-size:1.28571em;font-weight:700;line-height:1.4}
.pic-txt .g{font-size:.85714em;margin:.21429em 0 .71429em;color:#666}
.pic-txt p.body{font-size:1em;line-height:1.6}

/* 表（公式 elem-table：見出し行は赤地に白、行見出しは薄いピンク）*/
.tbl{max-width:900px;margin:0 auto 2.14286em;border-collapse:collapse;width:100%}
.tbl th,.tbl td{border:1px solid var(--line2);padding:.625em .9375em;text-align:left;vertical-align:top;font-size:1em}
.tbl th{font-weight:700}
.tbl thead th{background:var(--red);color:var(--white);border-color:var(--red)}
.tbl tbody th{background:var(--pink);white-space:nowrap;width:6.5em}
.tbl tbody th .num{color:var(--ink)}
.tbl tbody tr.free th{background:var(--grey)}
.tbl td b{display:block}
.tbl td span{display:block;font-size:.85714em;color:#666;margin-top:.14286em}
.tbl.facts{margin-bottom:1.07143em}
.tbl.facts th{width:5em;white-space:nowrap;background:var(--grey)}

/* タブ（公式カレンダーの見出し：白の角丸＋ベタ影、選択中は灰）*/
.tabs{display:flex;gap:1.07143em;max-width:900px;margin:0 auto 1.42857em}
.tab{flex:1 1 0;padding:.71429em 1.07143em;border:0;border-radius:.57143em;background:var(--white);box-shadow:0 .21429em var(--shadow);font-weight:700;text-align:center;cursor:pointer}
.tab[aria-selected="true"]{background:var(--grey2);box-shadow:none;cursor:default}
.panel{display:none}.panel.on{display:block}

/* アコーディオン（公式 accordion-head：右に赤い丸の＋）*/
.acc{max-width:900px;margin:0 auto;border-top:1px solid var(--line)}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc summary{position:relative;list-style:none;cursor:pointer;padding:1em 3em 1em 0;font-size:1.14286em;font-weight:700}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:0;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;background:var(--red);color:var(--white);font-size:1.5em;line-height:34px;text-align:center;font-weight:400}
.acc[open] summary::after{content:"－"}
.acc .body{padding:0 0 1.28571em}
.acc .body p{font-size:1em;line-height:1.6}
.acc .body .txt-list{margin-bottom:0}

/* チケット（写真＋文字の横並び。価格は DM Sans）*/
.ticket{display:grid;grid-template-columns:300px 1fr;gap:2.14286em;align-items:start}
.ticket img{border-radius:var(--pic-r)}
.ticket .badge{display:inline-block;font-size:.85714em;font-weight:700;color:var(--maroon);border:1px solid var(--maroon);padding:.14286em .71429em;border-radius:.28571em}
.ticket h3{font-size:1.42857em;font-weight:700;margin:.5em 0 .35714em;line-height:1.35}
.ticket .yen{font-size:2.14286em;line-height:1.2;margin:0 0 .5em}
.ticket .yen .num{color:var(--ink)}
.ticket .yen small{font-size:.4em;font-weight:500;color:#666;margin-left:.4em}
.ticket .txt-list{margin-bottom:0}
.ticket .confirm{font-size:.78571em;color:#8a6d3b;margin:.71429em 0 0}
.ticket .btn{margin:1.07143em 0 0;width:auto;min-width:16em}
.ticket.sub{grid-template-columns:150px 1fr}
.ticket.sub h3{font-size:1.14286em}
.lead-price{text-align:center}
.lead-price .yen{font-size:2.57143em;line-height:1.2;margin:.14286em 0 .28571em}
.lead-price .yen .num{color:var(--ink)}
.lead-price .yen small{font-size:.4em;font-weight:500;color:#666;margin-left:.3em}
.lead-price .l{font-size:.92857em;color:var(--muted)}
.lead-price .n{font-size:1em;margin:0 0 1.07143em}
.lead-price .d{font-size:.85714em;color:var(--muted);margin:1em 0 0}

/* 追従（公式の固定バナーの位置。中身はボタン1つ）*/
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--white);border-top:1px solid var(--line);padding:.71429em 1.07143em calc(.71429em + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .2s}
.sticky.on{transform:none}
.sticky .in{max-width:900px;margin:0 auto;display:flex;align-items:center;gap:1.07143em}
.sticky .txt{flex:1;min-width:0;font-size:.85714em;line-height:1.35}
.sticky .txt b{display:block;font-size:1.28571em}
.sticky .txt .num{color:var(--ink)}
.sticky .btn{width:auto;min-width:12em;margin:0}

/* ページ内ナビ（公式のボタン列：白ボタン）*/
/* ページ内メニュー（ヘッダーに追従）。公式のタブ＝白＋ベタ影、選択中は #c4c4c4 */
.pnav{border-top:1px solid var(--line);background:var(--paper)}
.pnav ul{max-width:900px;margin:0 auto;padding:.5em 1.14286em;display:flex;gap:.5em;flex-wrap:nowrap;justify-content:center;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pnav ul::-webkit-scrollbar{display:none}
.pnav li{flex:0 0 auto}
.pnav a{display:block;padding:.42857em 1.07143em .5em;border-radius:var(--btn-r);background:var(--white);box-shadow:0 .21429em var(--shadow);color:var(--ink2);font-weight:700;font-size:.92857em;text-decoration:none;white-space:nowrap}
.pnav a[aria-current="true"]{background:var(--tab-on,#c4c4c4);color:var(--white)}

/* フッター */
.ftr{max-width:900px;margin:2.85714em auto 0;padding:1.42857em 1.42857em 0;border-top:1px solid var(--line);font-size:.85714em;color:#666}
.ftr p+p{margin-top:.35714em}
.ftr .credit{color:var(--ink);font-weight:700}
.ph{display:inline-block}
.official{margin:-.71429em auto 1.42857em}.official a{color:var(--red);text-decoration:underline}

/* ---------- SP ---------- */
@media (max-width:767px){
  :root{--box-r:2.5rem}
  .wrap{padding:0 1.14286em}
  .box{padding:1.42857em 1.28571em}
  .h2 h2{font-size:1.57143em;letter-spacing:.05em}.h3 h3{font-size:1.5em}.h4 h4{font-size:1.28571em}
  .para.large p{font-size:1.14286em}
  .btn{width:100%}
  .cols.c3,.cols.c4{grid-template-columns:repeat(2,1fr)}
  .cols{gap:1em}
  .pic-txt{grid-template-columns:1fr}
  .tbl th,.tbl td{padding:.5em .64286em;font-size:.92857em}
  .tbl tbody th{width:5.2em}
  .tabs{gap:.71429em}.tab{padding:.64286em .5em;font-size:.92857em}
  .ticket,.ticket.sub{grid-template-columns:1fr;gap:1em}
  .ticket.sub{grid-template-columns:96px 1fr}
  .ticket .btn{width:100%}
  .sticky .btn{min-width:9em}
  .pnav ul{justify-content:flex-start;padding:.42857em .85714em}
  .kv figcaption{padding-right:1.14286em}
}