/* =========================================================================
   初めての方へページ (/first) 固有スタイル
   共通のヒーロー・パンくず・注意書き・ジャンプナビ・CTA・支払い方法グリッドは
   common.css / page-price.css 側の .page-hero / .notice / .jumpnav / .ctaband / .pay-grid を使用。
   ========================================================================= */

.first-sec{padding-block:clamp(50px,7vh,72px);}
.first-sec + .first-sec{border-top:1px solid var(--line);}
.first-sec-title{font-family:var(--f-disp);font-weight:700;font-size:clamp(1.4rem,3.8vw,1.8rem);letter-spacing:.01em;margin:.4em 0 clamp(28px,3.8vh,38px);}

/* ---- 3つの安心ポイント ---- */
.first-points{padding-top:clamp(40px,5.5vh,56px);}
.point-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);}
.point-card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:clamp(22px,2.6vw,30px);text-align:center;}
.point-no{display:block;font-family:var(--f-disp);font-style:italic;font-weight:700;font-size:1.6rem;color:var(--bronze);margin-bottom:.4em;}
.point-card p{margin:0;font-size:.94rem;line-height:1.85;color:var(--ink-soft);font-weight:400;}
.point-card b{color:var(--ink);font-weight:700;}

/* ---- ご予約の流れ ---- */
.flow-list{display:flex;flex-direction:column;gap:0;}
.flow-item{display:flex;gap:clamp(20px,3vw,32px);padding-block:clamp(24px,3.2vh,32px);border-bottom:1px solid var(--line);}
.flow-item:first-child{padding-top:0;}
.flow-num{flex:0 0 auto;font-family:var(--f-disp);font-style:italic;font-weight:700;font-size:clamp(1.8rem,3.4vw,2.2rem);color:var(--blush);line-height:1;width:2.2em;}
.flow-body h3{font-family:var(--f-disp);font-weight:700;font-size:1.12rem;margin:0 0 .6em;letter-spacing:.005em;}
.flow-body p{margin:0;font-size:.92rem;line-height:1.95;color:var(--ink-soft);font-weight:400;}

/* ---- 注意事項ブロック（箇条書き） ---- */
.first-note-block{margin-top:clamp(34px,4.6vh,44px);}
.first-note-block h3{font-family:var(--f-disp);font-weight:700;font-size:1.02rem;margin:0 0 1em;padding-left:12px;border-left:3px solid var(--bronze);}
.first-note-block ul{margin:0;padding-left:1.3em;display:flex;flex-direction:column;gap:.7em;}
.first-note-block li{font-size:.9rem;line-height:1.9;color:var(--ink-soft);font-weight:400;}

/* ---- 当日のお持ちもの ---- */
.belongings-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px);}
.belongings-card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:clamp(22px,2.6vw,28px);}
.belongings-card--required{border-color:var(--bronze);}
.belongings-tag{display:inline-block;font-family:var(--f-body);font-weight:700;font-size:.7rem;letter-spacing:.03em;color:var(--bronze);border:1px solid var(--bronze);border-radius:999px;padding:.3em 1em;margin-bottom:1em;}
.belongings-card h3{font-family:var(--f-disp);font-weight:700;font-size:1.08rem;margin:0 0 .6em;}
.belongings-card p{margin:0;font-size:.88rem;line-height:1.85;color:var(--ink-soft);font-weight:400;}

@media (max-width:820px){
  .point-grid{grid-template-columns:1fr;}
  .belongings-grid{grid-template-columns:1fr;}
}
/* ---- 20歳未満の方へ：詳細ページへのバナーリンク ---- */
.u20-banner-link{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ink);color:var(--porcelain);border-radius:6px;padding:1.2em 1.6em;margin-top:16px;transition:opacity .3s;}
.u20-banner-link:hover{opacity:.85;}
.u20-banner-text{font-family:var(--f-body);font-weight:500;font-size:.92rem;display:flex;align-items:center;gap:.8em;flex-wrap:wrap;}
.u20-banner-text .en{font-family:var(--f-disp);font-style:italic;font-size:.78rem;color:var(--blush);letter-spacing:.02em;}
.u20-banner-link .ar{flex:0 0 auto;transition:transform .3s;}
.u20-banner-link:hover .ar{transform:translateX(4px);}

@media (max-width:680px){
  .flow-item{gap:16px;}
  .flow-num{font-size:1.6rem;width:1.8em;}
  .first-note-block li{font-size:.92rem;}
  .u20-banner-link{flex-direction:column;align-items:flex-start;gap:8px;}
}

/* =========================================================================
   ブラッシュアップ版（fv-*）
   ※ .first-sec / .first-note-block / .u20-* は /under20 でも流用しているため上の定義は残しています。
   ========================================================================= */
.fv-ic{width:1.6em;height:1.6em;flex:0 0 auto;}

/* ---- 3つの安心ポイント ---- */
.fv-points{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,22px);}
.fv-point{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;background:var(--porcelain-2);border:1px solid var(--line);border-radius:10px;padding:clamp(22px,3vw,32px) 16px;}
.fv-point .fv-ic{width:44px;height:44px;color:var(--bronze);}
.fv-point p{margin:0;font-size:.92rem;line-height:1.85;color:var(--ink-soft);}
.fv-point b{display:inline-block;margin-top:.15em;color:var(--ink);font-family:var(--f-disp);font-size:1.15rem;font-weight:700;}

/* ---- ご予約の流れ（タイムライン） ---- */
.fv-flow{list-style:none;margin:0;padding:0;}
.fv-step{position:relative;display:grid;grid-template-columns:52px 1fr;gap:clamp(16px,3vw,28px);padding-bottom:clamp(22px,3.4vh,32px);}
.fv-step::before{content:"";position:absolute;left:25px;top:52px;bottom:0;width:1px;background:linear-gradient(var(--bronze),rgba(154,123,79,.25));}
.fv-step:last-child{padding-bottom:0;}
.fv-step:last-child::before{display:none;}
.fv-no{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid var(--bronze);color:var(--bronze);font-family:var(--f-lat);font-size:1.05rem;letter-spacing:.06em;font-weight:500;position:relative;z-index:1;}
.fv-body{background:#fff;border:1px solid var(--line);border-radius:10px;padding:clamp(18px,2.6vw,26px) clamp(18px,2.8vw,30px);}
.fv-body h3{font-family:var(--f-disp);font-weight:700;font-size:1.15rem;margin:0 0 .55em;letter-spacing:.01em;}
.fv-body p{margin:0;font-size:.93rem;line-height:1.95;color:var(--ink-soft);}
.fv-point-note{margin-top:.9em!important;padding:.85em 1em;background:var(--porcelain-2);border-radius:6px;font-size:.86rem!important;line-height:1.85!important;}
.fv-point-note span{display:inline-block;margin-right:.7em;padding:.1em .7em;border-radius:999px;background:var(--bronze);color:#fff;font-family:var(--f-lat);font-size:.66rem;letter-spacing:.16em;vertical-align:.08em;}
.fv-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.fv-act{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:.5em 1.4em;border-radius:999px;font-size:.88rem;font-weight:700;letter-spacing:.02em;border:1px solid var(--ink);transition:opacity .3s;}
.fv-act:hover{opacity:.8;}
.fv-act--web{background:var(--ink);color:#fff;}
.fv-act--line{background:var(--line-green,#06C755);border-color:var(--line-green,#06C755);color:#fff;}
.fv-act--tel{background:#fff;color:var(--ink);}

/* ---- カード共通（注意事項・年齢・外国籍） ---- */
.fv-cards{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);align-items:start;}
.fv-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:clamp(20px,2.8vw,30px);}
.fv-card h3{font-family:var(--f-disp);font-weight:700;font-size:1.05rem;margin:0 0 1em;padding-left:12px;border-left:3px solid var(--bronze);line-height:1.5;}
.fv-txt{margin:0 0 1.1em;font-size:.9rem;line-height:1.95;color:var(--ink-soft);}
.fv-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9em;}
.fv-check li{position:relative;padding-left:1.7em;font-size:.9rem;line-height:1.85;color:var(--ink-soft);}
.fv-check li::before{content:"";position:absolute;left:0;top:.5em;width:.95em;height:.5em;border-left:2px solid var(--bronze);border-bottom:2px solid var(--bronze);transform:rotate(-45deg) scale(.9);}
.fv-check small{display:block;margin-top:.3em;font-size:.8rem;line-height:1.75;color:var(--ink-faint,#8a8378);}
.fv-link{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.95em 1.1em;border:1px solid var(--bronze);border-radius:8px;color:var(--bronze);font-weight:700;font-size:.9rem;transition:background .3s,color .3s;}
.fv-link:hover{background:var(--bronze);color:#fff;}

/* ---- 当日のお持ちもの ---- */
.fv-belong{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);}
.fv-bcard{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:clamp(20px,2.8vw,28px);}
.fv-bcard.is-required{border-color:var(--bronze);background:linear-gradient(180deg,#fff,#FBF7F1);}
.fv-bcard .fv-ic{width:46px;height:46px;color:var(--bronze);margin-top:2px;}
.fv-tag{display:inline-block;font-weight:700;font-size:.7rem;letter-spacing:.03em;color:var(--bronze);border:1px solid var(--bronze);border-radius:999px;padding:.25em 1em;margin-bottom:.9em;}
.is-required .fv-tag{background:var(--bronze);color:#fff;}
.fv-bcard h3{font-family:var(--f-disp);font-weight:700;font-size:1.05rem;margin:0 0 .5em;line-height:1.55;}
.fv-bcard p{margin:0;font-size:.87rem;line-height:1.85;color:var(--ink-soft);}

/* ---- お支払い方法（page-price.css は読み込まれないためここで定義） ---- */
.pay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,2vw,18px);}
.pay-item{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:clamp(18px,2.4vw,24px);}
.pay-item .fv-ic{width:38px;height:38px;color:var(--bronze);}
.pay-item > div{display:flex;flex-direction:column;gap:.3em;}
.pay-name{font-family:var(--f-disp);font-weight:700;font-size:1.02rem;letter-spacing:.01em;}
.pay-note{font-size:.82rem;color:var(--ink-soft);line-height:1.7;}

/* ---- あわせてご覧ください ---- */
.fv-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,18px);}
.fv-rel{display:flex;align-items:center;gap:14px;background:var(--porcelain-2);border:1px solid var(--line);border-radius:10px;padding:clamp(16px,2.2vw,22px);transition:border-color .3s;}
.fv-rel:hover{border-color:var(--bronze);}
.fv-rel .fv-ic{width:34px;height:34px;color:var(--bronze);}
.fv-rel span{display:flex;flex-direction:column;gap:.25em;min-width:0;}
.fv-rel b{font-family:var(--f-disp);font-size:1rem;}
.fv-rel small{font-size:.78rem;color:var(--ink-soft);line-height:1.6;}
.fv-rel .arw,.fv-link .arw{margin-left:auto;color:var(--bronze);width:1.7em;}
.fv-link .arw{color:inherit;}

@media (max-width:820px){
  .fv-points{grid-template-columns:1fr;}
  .fv-point{flex-direction:row;text-align:left;gap:16px;padding:18px 20px;}
  .fv-point .fv-ic{width:38px;height:38px;}
  .fv-point b{display:inline;font-size:1.05rem;}
  .fv-cards,.fv-belong,.pay-grid,.fv-rel-grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .fv-step{grid-template-columns:40px 1fr;gap:12px;}
  .fv-step::before{left:19px;top:40px;}
  .fv-no{width:40px;height:40px;font-size:.9rem;}
  .fv-body{padding:16px 16px 18px;}
  .fv-acts .fv-act{flex:1 1 calc(50% - 8px);}
  .fv-acts .fv-act--tel{flex-basis:100%;}
  .fv-bcard{flex-direction:column;gap:12px;}
}