/* ==========================================
   Hisayoshi Hakama LP — Final Clean Stylesheet
   - Navy/Graphite + Gold
   - Sectioned backgrounds (軽量アニメ)
   - Reservation form (透明入力+白枠 / 選択中のみ発光)
   2025-09-19
========================================== */

/* ===== Design Tokens ===== */
:root{
  --brand:#DF7A22; --brand-dark:#C76718;
  --ink:#1A1D23; --ink-2:#4A4F5A;
  --bg:#F1EFED; --bg-soft:#FFFFFF; --surface:#FFFFFF; --line:#E6E6E6;
  --radius:16px; --radius-lg:22px; --shadow:0 12px 36px rgba(0,0,0,.12);
  /* Gold */
  --gold-1:#E9CC7A; --gold-2:#C9A85B; --gold-ink:#0F1116;
  /* Layout */
  --wrap-max:1120px; --wrap-gutter:16px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;color:var(--ink);background:var(--bg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  line-height:1.7;
}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--wrap-max);margin:0 auto;padding:0 var(--wrap-gutter)}
.section{padding:72px 0}
.section--soft{background:var(--bg-soft)}
.title{font-size:clamp(28px,3.5vw,44px);line-height:1.25;margin:0 0 16px}
.lead{font-size:clamp(16px,2vw,18px);margin:0 0 24px}
.muted{color:#6B6B6B}
.is-hidden,[hidden]{display:none !important}

/* ===== Buttons (gold) ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;position:relative;overflow:hidden;
  padding:12px 18px;border-radius:999px;border:0;
  background:linear-gradient(180deg,var(--gold-1),var(--gold-2));
  color:var(--gold-ink);font-weight:700;letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(201,168,91,.28);
  transition:transform .05s ease,filter .2s;
}
.btn::after{
  content:"";position:absolute;inset:0 0 auto 0;height:26%;
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0));
  border-radius:inherit;pointer-events:none;
}
@media (hover:hover){
  .btn::before{
    content:"";position:absolute;inset:0;transform:translateX(-120%);
    background:linear-gradient(110deg,rgba(255,255,255,0),rgba(255,255,255,.32),rgba(255,255,255,0));
    transition:transform .55s cubic-bezier(.16,1,.3,1);
  }
  .btn:hover::before{transform:translateX(120%)}
}
.btn:active{transform:translateY(1px)}
.btn--ghost{
  background:transparent;color:var(--gold-2);
  border:1px solid color-mix(in srgb, var(--gold-2) 85%, #fff 15%);
  box-shadow:none;
}
.btns{display:flex;gap:10px;flex-wrap:wrap}

/* ===== Card / Hero ===== */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px}
.hero{position:relative;isolation:isolate;overflow:hidden;padding:84px 0 56px;background:var(--bg)}
.hero__inner{display:grid;gap:24px;align-items:center}
@media (min-width:900px){
  .hero__inner{grid-template-columns:1.05fr .95fr;position:relative;z-index:1}
  .hero::before{content:"";position:absolute;inset:0;background:var(--brand);
    clip-path:polygon(0 0,62% 0,46% 100%,0 100%);z-index:0}
}
.hero__visual img{display:block;width:100%;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.18)}
@media (max-width:899px){
  .hero{background:linear-gradient(180deg,#fff 0 40%,var(--bg) 40%)}
  .hero__visual{order:-1}
}

/* ===== Gallery (汎用グリッド/スワイプ) ===== */
.gallery{position:relative}
.gallery__track{display:grid;gap:16px}
.gallery__item{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.gallery__item img{width:100%;display:block;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.gallery__item figcaption{padding:10px 12px;color:#475569;font-size:14px}
@media (min-width:900px){.gallery__track{grid-template-columns:repeat(3,1fr)}.gallery__nav{display:none}}
@media (max-width:899px){
  .gallery__track{display:flex;overflow:hidden;scroll-behavior:smooth}
  .gallery__item{min-width:calc(100% - 40px);margin-right:16px}
  .gallery__nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:10px}
  .gallery__nav button{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#1C1C1C;font-size:20px;cursor:pointer}
  .gdots{display:flex;gap:6px}
  .gdots button{width:8px;height:8px;border-radius:50%;border:0;background:#cbd5e1}
  .gdots button.is-active{background:var(--brand)}
}
@media (hover:hover){ .gallery__item:hover img{transform:scale(1.03)} }

/* ===== CM / Product / Web Catalog ===== */
.cm-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:900px){.cm-grid{grid-template-columns:1fr 1fr}}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.video-frame>iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.cm-grid h3{color:#0F1116 !important;} 

.cm-card .cm-label,
.cm-card .title-on-video,
.cm-card [data-cm-label],
.cm-card .badge-on-video{
  position:absolute;left:12px;top:12px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;padding:.35rem .7rem;border-radius:999px;
  font-weight:700;font-size:13px;letter-spacing:.01em;color:#0F1116;
  background:rgba(255,255,255,.88);border:1px solid rgba(15,17,22,.12);
  box-shadow:0 6px 18px rgba(0,0,0,.2);backdrop-filter:saturate(120%) blur(2px)
}
.cm-card .video-frame{position:relative}

/* 外部Webカタログ（モーダル） */
.extcatlg-card{position:relative;max-width:400px;margin:16px auto;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.extcatlg-poster{display:block;width:100%;object-fit:cover}
.extcatlg-cap{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:.3rem .6rem;border-radius:999px}
.extcatlg-open{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;padding:.45rem .8rem;border-radius:999px;color:#fff;font-weight:700;font-size:13px;background:linear-gradient(180deg,var(--brand),var(--brand-dark));box-shadow:0 8px 20px rgba(212,112,30,.25)}
.extcatlg-modal{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:saturate(120%) blur(3px);padding:16px;z-index:9999}
.extcatlg-modal.is-open{display:grid}
.extcatlg-close{position:absolute;top:16px;right:18px;width:36px;height:36px;line-height:36px;text-align:center;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:16px;box-shadow:var(--shadow)}
.extcatlg-frame{aspect-ratio:3/4;background:#000;border-radius:calc(var(--radius) + 6px);width:min(64vw,calc(94vh*3/4));height:min(94vh,calc(64vw*4/3));overflow:hidden;position:relative;box-shadow:var(--shadow)}
.extcatlg-frame iframe{width:100%;height:100%;border:0;display:block;object-fit:contain}
.extcatlg-loader{position:absolute;inset:0;display:grid;place-items:center;color:#cbd5e1;font-size:14px}

/* --- ExtCatalog: 外部全画面ボタンの見た目 --- */
.extcatlg-open-external{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.6rem .9rem;border:1px solid var(--line,#e5e5e5);
  border-radius:999px;background:#fff;color:#0f1116;
  font-weight:700;font-size:14px;text-decoration:none;box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.extcatlg-open-external:hover{filter:brightness(0.98)}
@media (max-width: 899px){
  .extcatlg-open-external{font-size:15px;padding:.7rem 1rem}
}

/* --- （任意）SP時、モーダルは使っても“横長寄せ”に --- */
@media (max-width: 899px){
  .extcatlg-modal .extcatlg-frame{
    aspect-ratio: 16/9;
    width: 98vw; max-height: 86vh;
  }
}

:root{
  /* 前回OKを頂いた落ち着いたカラー */
  --brand2:      #323845;
  --brand2-dark: #1C222C;
}

/* 右下（既存）.extcatlg-open はそのまま */

/* 左下：全画面で開く（JSなしアンカー） */
.extcatlg-open-external{
  position:absolute;
  left:12px;
  bottom:max(12px, env(safe-area-inset-bottom, 0px) + 8px);
  z-index:9999; /* ← 重要：他UIに埋もれないよう十分に高く */
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  cursor:pointer;
  padding:.45rem .8rem;
  border-radius:999px;
  color:#fff;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  background:linear-gradient(180deg, var(--brand2), var(--brand2-dark));
  box-shadow:0 8px 20px rgba(22,27,34,.28);
}
.extcatlg-open-external:hover{ filter:brightness(1.04); }

.extcatlg-open:focus-visible,
.extcatlg-open-external:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:2px;
}

/* 画面が極端に狭い場合に重なりを回避（任意） */
@media (max-width:360px){
  .extcatlg-open-external{
    bottom:max(56px, env(safe-area-inset-bottom, 0px) + 8px);
  }
}


/* ===== Section Themes (背景アニメ＋ノイズ) ===== */
.section[class*="theme--"]{position:relative;overflow:hidden;isolation:isolate}
.section[class*="theme--"]::before,.section[class*="theme--"]::after{content:"";position:absolute;inset:-6%;z-index:-1;pointer-events:none}

/* light（常に白保持） */
.theme--light{color:var(--ink)}
.theme--light{background:#ffffff !important}
.theme--light::before{
  background:
    radial-gradient(800px 420px at 12% -8%, rgba(223,122,34,.08) 0%, transparent 60%),
    radial-gradient(900px 520px at 110% 120%, rgba(16,24,40,.06) 0%, transparent 55%);
}
.theme--light::after{background-image:url("/main/assets/img/noise-64.png");background-size:256px 256px;opacity:.05;mix-blend-mode:soft-light}

/* navy */
.theme--navy{background:#0E1523;color:#F4F7FB}
.theme--navy::before{
  background:
    radial-gradient(1100px 600px at 8% -12%, rgba(201,168,91,.18) 0%, transparent 62%),
    radial-gradient(1400px 760px at 106% 118%, rgba(255,255,255,.09) 0%, transparent 58%),
    conic-gradient(from 140deg at 50% 50%, rgba(255,255,255,.06) 0 90deg, transparent 90deg 360deg)
}
.theme--navy::after{background-image:url("/main/assets/img/noise-128.png");background-size:320px 320px;opacity:.10;mix-blend-mode:soft-light}

/* graphite */
.theme--graphite{background:radial-gradient(1200px 720px at 50% -10%, #171A23 0%, #0F1116 55%);color:#F2F4F7}
.theme--graphite::before{
  background:
    conic-gradient(from 150deg at 62% 38%, rgba(255,255,255,.08) 0 92deg, transparent 92deg 360deg),
    radial-gradient(820px 460px at 90% 120%, rgba(233,204,122,.18) 0%, transparent 62%)
}
.theme--graphite::after{background-image:url("/main/assets/img/noise-128.png");background-size:320px 320px;opacity:.09;mix-blend-mode:soft-light}

/* 微ドリフト（低負荷） */
@media (prefers-reduced-motion:no-preference){
  .theme--light::before{animation:driftA 26s ease-in-out infinite alternate}
  .theme--navy::before{animation:driftB 22s ease-in-out infinite alternate}
  .theme--graphite::before{animation:driftC 24s ease-in-out infinite alternate}
  @keyframes driftA{from{transform:translate3d(-1%,-1%,0) scale(1.01)}to{transform:translate3d(2%,2%,0) scale(1.02)}}
  @keyframes driftB{from{transform:translate3d(2%,-3%,0) scale(1.03)}to{transform:translate3d(-2%,2%,0) scale(1.05)}}
  @keyframes driftC{from{transform:translate3d(-3%,2%,0) scale(1.02)}to{transform:translate3d(3%,-2%,0) scale(1.05)}}
  .theme--navy::after,.theme--graphite::after{animation:noiseDrift 18s linear infinite}
  @keyframes noiseDrift{from{background-position:0 0}to{background-position:240px 160px}}
}

/* Navy/Graphiteの .lead を白固定（見づらさ解消） */
.section.theme--navy  .lead,
.section.theme--graphite .lead{ color:#FFFFFF !important; }
.section.theme--navy  .muted{ color:#FFFFFF !important; }

/* ===== Section Heading ===== */
.section-heading{display:grid;gap:8px;align-items:end;border-bottom:1px solid var(--line);padding-bottom:12px;margin:0 0 20px}
.section-heading h2{margin:0;font-size:clamp(20px,2.2vw,28px);line-height:1.25}
.section-heading p{margin:0;color:var(--ink-2)}
@media (min-width:768px){.section-heading{grid-template-columns:1fr auto}}

/* ===== Shops / Purchase / Footer ===== */
.grid{display:grid;gap:16px}
.grid--2{grid-template-columns:1fr}
@media (min-width:900px){.grid--2{grid-template-columns:1fr 1fr}}

#purchase .purchase-card{
  text-align:center;padding:32px 20px;max-width:720px;margin:24px auto 0;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.92)) padding-box;
}
#purchase .lead small{font-size:.9em;color:#6b7280}
#purchase .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

.footer{color:#3A3A3A;background:linear-gradient(180deg,#FFFFFF,#F6F2EE);padding:40px 0;border-top:1px solid var(--line)}

/* ===== Lookbook（暗背景に馴染むUI） ===== */
#lookbook .lookbook-swiper{position:relative;padding:12px 16px 46px}
#lookbook .swiper-slide{
  width:clamp(220px,34vw,320px);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  box-shadow:0 20px 60px rgba(0,0,0,.22)
}
#lookbook .swiper-slide figcaption{font-size:14px;color:#C3CDDA;padding:8px 10px;text-align:center}
#lookbook .swiper-button-prev,#lookbook .swiper-button-next{
  --size:42px;width:var(--size);height:var(--size);border-radius:999px;
  border:1px solid rgba(233,204,122,.6);background:rgba(233,204,122,.12);color:#E9CC7A;
  box-shadow:0 8px 22px rgba(0,0,0,.28)
}
#lookbook .swiper-button-prev:after,#lookbook .swiper-button-next:after{font-size:16px;font-weight:700}
#lookbook .swiper-pagination-bullet{background:rgba(233,204,122,.4);opacity:1}
#lookbook .swiper-pagination-bullet-active{background:#E9CC7A}

/* ===== Reservation Form（#reservation）— Dark UI ===== */
#reservation{
  position:relative;isolation:isolate;z-index:0;overflow:hidden;
  background-color:#0B1326;color:#F2F4F7;padding:124px 0;
}
#reservation .wrap{max-width:1040px;margin:0 auto;padding:0 16px}
#reservation .title{margin:0 0 10px;font-size:clamp(28px,3.5vw,44px);line-height:1.25;color:#F4F7FB}
#reservation .lead{margin:0 0 18px;color:#F4F7FB}

/* 背景アニメ + ノイズ（低負荷） */
#reservation::before,#reservation::after{content:"";position:absolute;inset:-8%;pointer-events:none;z-index:-1}
#reservation::before{
  background:
    radial-gradient(900px 520px at 10% -8%, rgba(233,204,122,.12) 0%, transparent 60%),
    radial-gradient(1100px 680px at 105% 120%, rgba(255,255,255,.10) 0%, transparent 58%),
    conic-gradient(from 150deg at 50% 50%, rgba(255,255,255,.06) 0 90deg, transparent 90deg 360deg);
  opacity:.95;animation:resBg 24s ease-in-out infinite alternate;
}
#reservation::after{
  background-image:image-set(url("/main/assets/img/noise-64.png") 1x, url("/main/assets/img/noise-128.png") 2x);
  background-size:128px 128px;opacity:.22;mix-blend-mode:overlay;animation:resNoise 20s linear infinite;
}
@keyframes resBg{from{transform:translate3d(-2%,1.5%,0) scale(1.02)}to{transform:translate3d(2%,-1.5%,0) scale(1.05)}}
@keyframes resNoise{from{background-position:0 0}to{background-position:240px 160px}}
@media (prefers-reduced-motion:reduce){#reservation::before,#reservation::after{animation:none}}

#reservation .progress{margin:0 0 14px}
#reservation .progress__list{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0;margin:0 0 10px}
#reservation .progress__list li{
  display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border-radius:12px;color:#F2F4F7;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.22);box-shadow:0 6px 18px rgba(0,0,0,.16);
}
#reservation .progress__list li.is-active{
  background:linear-gradient(180deg, rgba(233,204,122,.10), rgba(233,204,122,0));
  border-color:color-mix(in srgb, #C9A85B 70%, #fff 30%);
  box-shadow:0 0 0 1px rgba(201,168,91,.45) inset, 0 12px 28px rgba(0,0,0,.26);
}
#reservation .progress__bar{position:relative;height:4px;border-radius:999px;background:rgba(255,255,255,.20);overflow:hidden}
#reservation .progress__bar .fill{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:linear-gradient(90deg,#E9CC7A,#C9A85B);border-radius:inherit;transition:width .35s cubic-bezier(.16,1,.3,1)}
@media (max-width:640px){#reservation .progress__list{grid-template-columns:1fr}}

/* 入力UI：完全透明 + 白枠 */
#reservation #reserveForm fieldset,
#reservation #reserveForm .card,
#reservation #reserveForm .form-wrap{background:transparent;border:0;box-shadow:none}
#reservation #reserveForm input[type="text"],
#reservation #reserveForm input[type="email"],
#reservation #reserveForm input[type="tel"],
#reservation #reserveForm input[type="date"],
#reservation #reserveForm input[type="number"],
#reservation #reserveForm select,
#reservation #reserveForm textarea{
  width:100%;min-height:48px;font-size:16px;padding:.85rem 1rem;border-radius:12px;
  background:transparent !important;color:#F2F4F7;border:1.5px solid rgba(255,255,255,.82);
  box-shadow:none;caret-color:#FFFFFF;transition:border-color .2s,box-shadow .2s;
}
#reservation #reserveForm textarea{min-height:132px;resize:vertical}
#reservation #reserveForm input:focus,
#reservation #reserveForm select:focus,
#reservation #reserveForm textarea:focus{
  outline:none;border-color:#E9CC7A;box-shadow:0 0 0 3px rgba(233,204,122,.28);
}
#reservation #reserveForm ::placeholder{color:rgba(255,255,255,.65)}
#reservation #reserveForm select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, #fff 50%),linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 12px) 52%;
  background-size:6px 6px; background-repeat:no-repeat; padding-right:2.2rem;
}
#reservation #reserveForm select option{background:#0B1326;color:#F2F4F7}
#reservation #reserveForm input[type="date"]{color-scheme:dark}
#reservation #reserveForm input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(1.2)}
#reservation #reserveForm .form__error{color:#FCA5A5;font-size:13px;margin-top:6px}
#reservation #reserveForm .btn{
  background:linear-gradient(180deg,#E9CC7A,#C9A85B);color:#0F1116;border:0;border-radius:999px;
  box-shadow:0 10px 24px rgba(201,168,91,.25);
}
#reservation #reserveForm .btn--ghost{
  background:transparent;color:#E9CC7A;border:1px solid color-mix(in srgb, #E9CC7A 75%, #fff 25%);box-shadow:none;
}
@media (max-width:520px){#reservation #reserveForm .btn{width:100%;justify-content:center}}

/* ステップカード：選択中のみ発光 */
#reservation .step-card{
  position:relative;border-radius:14px;background:transparent;
  border:1px solid rgba(255,255,255,.22);color:#F4F7FB;
  box-shadow:0 6px 18px rgba(0,0,0,.18);transition:border-color .25s, box-shadow .25s, transform .25s;
}
#reservation .step-card:hover{transform:translateY(-1px)}
#reservation .step-card.is-active{
  border-color:color-mix(in srgb, #C9A85B 72%, #fff 28%);
  box-shadow:0 0 0 1px rgba(201,168,91,.55) inset, 0 14px 36px rgba(0,0,0,.30), 0 0 42px rgba(201,168,91,.18);
}
#reservation .step-card.is-active::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from 0turn, rgba(201,168,91,0) 0%, rgba(201,168,91,.35) 20%, rgba(201,168,91,0) 60%);
  filter:blur(18px); animation:resOrbit 6s linear infinite;
}
@keyframes resOrbit{to{transform:rotate(1turn)}}

/* autofill / disabled / error 安定化 */
#reservation #reserveForm input:-webkit-autofill,
#reservation #reserveForm select:-webkit-autofill,
#reservation #reserveForm textarea:-webkit-autofill{
  -webkit-text-fill-color:#F4F7FB;transition:background-color 9999s ease-out;
}
#reservation #reserveForm .is-error{
  border-color:#FCA5A5 !important; box-shadow:0 0 0 3px rgba(252,165,165,.18) !important;
}
#reservation #reserveForm :is(input,select,textarea):disabled,
#reservation #reserveForm :is(input,select,textarea)[readonly]{
  opacity:.7;cursor:not-allowed;background:transparent;color:#E5E7EB;border-color:rgba(255,255,255,.55);
}

/* ===== 商品紹介＋着方動画（PC：左カードを中央に配置／余白圧縮） ===== */
@media (min-width:1024px){
  #product-howto.section{padding-block:28px}
  #product-howto .title{margin-block:0 8px}
  #product-howto .lead{margin-block:0 16px}
  #product-howto .grid--2{align-items:stretch;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:0}
  #product-howto .grid--2 > .grid{display:grid;gap:12px}
  #product-howto .grid--2 > .card.prod-info:first-of-type{
    grid-row:1/3;display:flex;flex-direction:column;justify-content:center;margin:0;padding-block:16px;
  }
  #product-howto .video-frame{margin:0;aspect-ratio:16/9}
  #product-howto .video-frame iframe{width:100%;height:100%;border:0;display:block}
}

/* ===== Background Pack v2 (必要に応じて付与) ===== */
.bgfx{ position:relative; isolation:isolate; overflow:hidden; }
.bgfx::after{
  content:""; position:absolute; inset:-1px; pointer-events:none; z-index:0;
  background-image:image-set(url("/main/assets/img/noise-64.png") 1x, url("/main/assets/img/noise-128.png") 2x);
  background-size:64px 64px; opacity:var(--noise, .08); mix-blend-mode:soft-light;
}
.bgfx--gold-sweep{ --bg-speed:50s; --bg-intensity:.16; --noise:.10; background:linear-gradient(180deg,#0E1523,#0B1220); }
.bgfx--gold-sweep::before{
  content:""; position:absolute; inset:-25%; z-index:0;
  background:conic-gradient(from 0turn at 28% 32%, transparent 0deg, rgba(206,188,127,var(--bg-intensity)) 40deg, transparent 130deg);
  filter:blur(20px); animation:goldSweep var(--bg-speed) linear infinite;
}
@keyframes goldSweep{ to{ transform:rotate(1turn) } }

.bgfx--scan-pro{ --bg-speed:16s; --noise:.08; background:linear-gradient(180deg,#0E1523 0%, #0B1220 100%); }
.bgfx--scan-pro::before{
  content:""; position:absolute; inset:-6%; z-index:0;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px),
    radial-gradient(700px 420px at 110% 120%, rgba(233,204,122,.10), transparent 60%);
  animation:scanPan var(--bg-speed) linear infinite;
}
@keyframes scanPan{ to{ transform:translateY(8%) } }

.bgfx--particles{ --bg-speed:32s; --bg-intensity:.08; --noise:.06; background:linear-gradient(180deg,#0E1523,#0B1220); }
.bgfx--particles::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(1px 1px at 12px 18px, rgba(255,255,255,.10) 50%, transparent 51%) 0 0/22px 22px,
    radial-gradient(1px 1px at 22px 10px, rgba(255,255,255,.06) 50%, transparent 51%) 0 0/22px 22px,
    radial-gradient(800px 500px at 20% 30%, rgba(206,188,127,var(--bg-intensity)), transparent 60%),
    radial-gradient(900px 560px at 80% 70%, rgba(206,188,127,calc(var(--bg-intensity)*.6)), transparent 65%);
  animation:particlesDrift var(--bg-speed) ease-in-out infinite alternate;
}
@keyframes particlesDrift{ 0%{transform:translate3d(-2%,-1%,0)} 100%{transform:translate3d(2%,1%,0)} }

.bgfx--weave{ --bg-speed:60s; --noise:.08;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,.08)    0 2px, transparent 2px 6px),
    linear-gradient(180deg,#0E1523,#0B1220);
  background-blend-mode:screen, multiply, normal;
}
.bgfx--weave::before{ content:""; position:absolute; inset:-8%; background:repeating-linear-gradient(45deg, rgba(206,188,127,.08) 0 8px, transparent 8px 16px); opacity:.6; animation:weavePan var(--bg-speed) linear infinite; }
@keyframes weavePan{ to{ background-position:900px 0 } }

.bgfx--herring{ --bg-speed:80s; --noise:.08; background:linear-gradient(180deg,#0E1523,#0B1220); }
.bgfx--herring::before{
  content:""; position:absolute; inset:-10%; mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(-135deg, rgba(0,0,0,.06) 0 10px, transparent 10px 20px);
  animation:herringPan var(--bg-speed) linear infinite;
}
@keyframes herringPan{ to{ background-position:720px 0, -720px 0 } }

.bgfx--vignette{ --noise:.12; background:linear-gradient(180deg,#0E1523,#0B1220); }
.bgfx--vignette::before{ content:""; position:absolute; inset:-1px; background:radial-gradient(120% 120% at 50% 50%, transparent 0 55%, rgba(0,0,0,.35) 80%); }

.bgfx--sheen{ --bg-speed:9s; --noise:.08; background:linear-gradient(180deg,#0E1523,#0B1220); }
.bgfx--sheen::before{ content:""; position:absolute; inset:-30%; background:linear-gradient(60deg, transparent 45%, rgba(255,255,255,.12) 50%, transparent 55%); transform:translateX(-100%) rotate(0.001deg); animation:sheenRun var(--bg-speed) ease-in-out infinite; }
@keyframes sheenRun{ to{ transform:translateX(100%) rotate(0.001deg) } }

.bgfx--map{ --bg-speed:36s; --noise:.08;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.04) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 60px),
    linear-gradient(180deg,#0E1523,#0B1220);
}
.bgfx--map::before{
  content:""; position:absolute; inset:-12%;
  background:
    radial-gradient(480px 320px at 22% 30%, rgba(206,188,127,.14), transparent 70%),
    radial-gradient(520px 320px at 82% 70%, rgba(206,188,127,.10), transparent 70%);
  filter:blur(2px); animation:mistFloat var(--bg-speed) ease-in-out infinite alternate;
}
@keyframes mistFloat{ 0%{transform:translate3d(-1.5%,1%,0)} 100%{transform:translate3d(1.5%,-1%,0)} }
@media (prefers-reduced-motion:reduce){ .bgfx::before{ animation:none !important } }

/* ===== CM（黒×金／走査線） — 最終版（1セットのみ） ===== */
#cm{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,#0A0C12 0%, #0F1116 100%) !important;
  color:#FFFFFF;
  border-top:1px solid rgba(233,204,122,.28);
  box-shadow:0 -1px 0 rgba(233,204,122,.12) inset;
}
#cm::after{
  content:""; position:absolute; inset:-1px; z-index:0; pointer-events:none;
  background-image:image-set(url("/main/assets/img/noise-64.png") 1x, url("/main/assets/img/noise-128.png") 2x);
  background-size:96px 96px; opacity:.06; mix-blend-mode:soft-light;
}
#cm::before{
  content:""; position:absolute; inset:-8%; z-index:0; pointer-events:none;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.032) 0 1px, transparent 1px 3px),
    radial-gradient(760px 460px at 110% 120%, rgba(233,204,122,.08), transparent 60%);
  transform:translate3d(0,0,0);
  animation:cmScan 22s linear infinite;
}
@keyframes cmScan{ 0%{transform:translateY(-7%)} 100%{transform:translateY(7%)} }
@media (prefers-reduced-motion:reduce){ #cm::before{ animation:none !important } }

/* ===== 着用ギャラリー（紺×寒色の霧） — 最終版（1セットのみ） ===== */
#lookbook{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,#0E2240 0%, #12264A 100%) !important;
  color:#F4F7FB;
  border-top:1px solid rgba(120,170,240,.28);
  box-shadow:0 -1px 0 rgba(120,170,240,.12) inset;
}
#lookbook::after{
  content:""; position:absolute; inset:-1px; z-index:0; pointer-events:none;
  background-image:image-set(url("/main/assets/img/noise-64.png") 1x, url("/main/assets/img/noise-128.png") 2x);
  background-size:112px 112px; opacity:.045; mix-blend-mode:soft-light;
}
#lookbook::before{
  content:""; position:absolute; inset:-12%; z-index:0; pointer-events:none;
  background:
    radial-gradient(1px 1px at 12px 18px, rgba(255,255,255,.08) 50%, transparent 51%) 0 0 / 24px 24px,
    radial-gradient(1px 1px at 22px 10px, rgba(255,255,255,.05) 50%, transparent 51%) 0 0 / 24px 24px,
    radial-gradient(680px 420px at 18% 22%, rgba(142,192,255,.09), transparent 65%),
    radial-gradient(760px 480px at 82% 78%, rgba(142,192,255,.07), transparent 68%);
  animation:galleryDrift 24s ease-in-out infinite alternate;
}
@keyframes galleryDrift{ 0%{transform:translate3d(-1.5%,-1%,0)} 100%{transform:translate3d(1.5%,1%,0)} }
@media (prefers-reduced-motion:reduce){ #lookbook::before{ animation:none !important } }

/* ===== Motion (軽いフェード) ===== */
@media (prefers-reduced-motion:no-preference){
  :root{--ease-std:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1)}
  .hero .title{animation:fadeUp .55s var(--ease-std) .06s both}
  .hero .lead{ animation:fadeUp .55s var(--ease-std) .12s both}
  .hero .btns{ animation:fadeUp .55s var(--ease-std) .18s both}
  .hero__visual img{animation:heroFloat 9s ease-in-out infinite alternate, fadeUp .55s var(--ease-std) .12s both}
  @keyframes fadeUp{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
  @keyframes heroFloat{from{transform:translate3d(0,2px,0)}to{transform:translate3d(0,-4px,0)}}
}
/* ==== CM: 見える化・強め版 ==== */
#cm{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,#090B10 0%, #0E1117 100%) !important;
}
#cm::after, #cm::before{ content:""; position:absolute; inset:-12%; pointer-events:none; z-index:0 }

/* A. 走査線（濃いめ＆速め） */
#cm::before{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
    radial-gradient(700px 420px at 110% 120%, rgba(233,204,122,.12), transparent 60%);
  animation:cm_scan_vis 12s linear infinite;
}
@keyframes cm_scan_vis{
  0%{ transform:translateY(-10%) } 100%{ transform:translateY(10%) }
}

/* B. 斜めの“光の帯”2本をスウィープ（強く見える演出） */
#cm .cm-sheen,
#cm .cm-sheen2{
  position:absolute; inset:-30%; z-index:1; pointer-events:none;
  background:linear-gradient(60deg, transparent 45%, rgba(255,255,255,.22) 50%, transparent 55%);
  mix-blend-mode:screen;
}
#cm .cm-sheen{ animation:cm_sheen_vis 6s ease-in-out infinite }
#cm .cm-sheen2{ animation:cm_sheen_vis 7.2s ease-in-out  .6s infinite }
@keyframes cm_sheen_vis{
  0%{ transform:translateX(-120%) rotate(0.001deg) }
  100%{ transform:translateX(120%)  rotate(0.001deg) }
}


/* ==== Lookbook: 見える化・強め版 ==== */
#lookbook{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg,#102349 0%, #142A54 100%) !important;
}
#lookbook::before, #lookbook::after{ content:""; position:absolute; inset:-12%; pointer-events:none; z-index:0 }

/* A. 微粒子（少し濃い）＋寒色の霧 */
#lookbook::before{
  background:
    radial-gradient(1px 1px at 12px 18px, rgba(255,255,255,.12) 50%, transparent 51%) 0 0 / 22px 22px,
    radial-gradient(1px 1px at 22px 10px, rgba(255,255,255,.08) 50%, transparent 51%) 0 0 / 22px 22px,
    radial-gradient(700px 440px at 18% 22%, rgba(120,170,240,.14), transparent 65%),
    radial-gradient(780px 500px at 82% 78%, rgba(120,170,240,.10), transparent 68%);
  animation:lb_drift_vis 14s ease-in-out infinite alternate;
}
@keyframes lb_drift_vis{
  0%{ transform:translate3d(-2%, -1.5%, 0) }
  100%{ transform:translate3d( 2%,  1.5%, 0) }
}

/* B. 前景の“ボケ玉”がゆっくり流れる（はっきり動く） */
#lookbook .bokeh,
#lookbook .bokeh2{
  position:absolute; width:120vmax; height:120vmax; left:50%; top:50%;
  translate:-50% -50%; border-radius:50%;
  background:
    radial-gradient(180px 180px at 20% 35%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(140px 140px at 70% 60%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(220px 220px at 35% 80%, rgba(120,170,240,.14), transparent 65%);
  filter:blur(10px); mix-blend-mode:screen; pointer-events:none; z-index:1;
}
#lookbook .bokeh { animation:bokeh_vis 26s linear infinite }
#lookbook .bokeh2{ animation:bokeh_vis 34s linear 4s infinite }
@keyframes bokeh_vis{
  0%{ transform:rotate(0turn)   translateX(2%) }
  50%{ transform:rotate(.5turn) translateX(-2%) }
  100%{ transform:rotate(1turn) translateX(2%) }
}

/* ============================
   Lookbook Final Luxe（上書き）
   ・深い紺にトーンダウン（明るすぎ解消）
   ・粒子＋冷色の霧で奥行き
   ・対角シーン（きらめき）を超控えめにスウィープ
   ・アニメは“気づけるけど上品”な強度
   ============================ */

#lookbook{
  --lb-noise: .04;       /* ノイズ濃度 0.03–0.08 */
  --lb-gold:  0;         /* 金ニュアンス 使わない=0（上品な寒色に限定） */
  --lb-blue:  .08;       /* 霧の寒色の強さ 0.06–0.12 */
  --lb-speed: 24s;       /* 漂いの速度 */
  --lb-sheen: .06;       /* 斜めシーンの見え方 0–.10 */
  position:relative; isolation:isolate; overflow:hidden;
  /* 深い紺（明度を落として写真が映える） */
  background:linear-gradient(180deg,#0A1326 0%, #0B1223 100%) !important;
  color:#F4F7FB;
  border-top:1px solid rgba(120,170,240,.24);
  box-shadow:0 -1px 0 rgba(120,170,240,.10) inset;
}

/* 粒子＋冷色の霧（ゆっくり漂う） */
#lookbook::before{
  content:""; position:absolute; inset:-10%; z-index:-1; pointer-events:none;
  background:
    /* 微粒子（控えめ） */
    radial-gradient(1px 1px at 12px 18px, rgba(255,255,255,.075) 50%, transparent 51%) 0 0 / 24px 24px,
    radial-gradient(1px 1px at 22px 10px, rgba(255,255,255,.05) 50%,  transparent 51%) 0 0 / 24px 24px,
    /* 霧（寒色寄り） */
    radial-gradient(680px 420px at 18% 22%, rgba(120,170,240, var(--lb-blue)),        transparent 66%),
    radial-gradient(760px 480px at 82% 78%, rgba(120,170,240, calc(var(--lb-blue)*.8)),transparent 70%);
  animation:lb-drift var(--lb-speed) ease-in-out infinite alternate;
}
@keyframes lb-drift{
  0%  { transform:translate3d(-1.6%,-1.2%,0) }
  100%{ transform:translate3d( 1.6%, 1.2%,0) }
}

/* ノイズ＋ビネット＋極薄の対角シーンを1レイヤーで */
#lookbook::after{
  content:""; position:absolute; inset:-1px; z-index:-1; pointer-events:none;
  background:
    /* A: ビネット（周辺減光で写真に集中） */
    radial-gradient(120% 120% at 50% 50%, transparent 0 58%, rgba(0,0,0,.28) 82%),
    /* B: 斜めのシーン（超控えめ／動かすのはこれだけ） */
    linear-gradient(60deg, transparent 46%, rgba(255,255,255,var(--lb-sheen)) 50%, transparent 54%);
  background-repeat:no-repeat, no-repeat;
  background-size:100% 100%, 220% 220%;
  /* 2つのレイヤーの position を別々に指定（1つ目は固定、2つ目だけ水平移動） */
  animation:lb-sheen 18s ease-in-out infinite;
  /* ノイズは別プロパティで重ねる（ブレンドで上品に） */
  mix-blend-mode:normal;
}
#lookbook::after{
  /* ノイズを overlay（別宣言で重ねるため、疑似要素はそのまま） */
  box-shadow:0 0 0 1px rgba(0,0,0,0); /* Safariの再描画トリガ */
}
#lookbook{ /* ノイズは背景画像として本体に付与して軽量 */
  background-image:
    linear-gradient(180deg,#0A1326 0%, #0B1223 100%), /* 元のグラデ（再掲：互換用） */
    image-set(url("/main/assets/img/noise-64.png") 1x, url("/main/assets/img/noise-128.png") 2x);
  background-size:100% 100%, 96px 96px;
  background-blend-mode:normal, soft-light;
  background-repeat:no-repeat, repeat;
  background-position:center, 0 0;
}
@keyframes lb-sheen{
  0%  { background-position: center, -120% 0 }
  50% { background-position: center,   0%   0 }
  100%{ background-position: center, 120%   0 }
}

/* OSが“動きを減らす”場合は停止（ユーザー尊重） */
@media (prefers-reduced-motion:reduce){
  #lookbook::before, #lookbook::after{ animation:none !important }
}

/* --- 微調整ノブ（お好みで） ---
#lookbook{ --lb-blue:.07; --lb-sheen:.045; --lb-speed:26s; --lb-noise:.035; }
*/
s

/* ================================
   予約フォーム：PCで幅60%に集中
   - 対象：進捗（バー/ステップ）と form 本体のみ
   - スマホ/タブは従来どおり全幅
   - 必要なら 60% を好みで調整可
   ================================ */

#reservation{ --res-form-width: 60%!important; } /* ←ここを 55%/62% などに調整可能 */

@media (min-width: 1024px){
  /* 進捗ブロック（見出しの下〜バー） */
  #reservation .progress,
  #reservation .progress__list,
  #reservation .progress__bar{
    width:60%;
    max-width:none;               /* 既存の max-width を解除 */
    margin-left:auto;
    margin-right:auto;
  }

  /* ステップの中身（カード群） */
  #reservation .form__step,
  #reservation .form-wrap{
    width:60%;
    max-width:none;
    margin-left:auto;
    margin-right:auto;
  }

  /* フォーム本体 */
  #reservation form#reserveForm{
    width:60%;
    max-width:none;
    margin-left:auto;
    margin-right:auto;
  }
}

/* 3カラムのステップが窮屈に見える場合の微調整（任意） */
@media (min-width:1024px){
  #reservation .progress__list{
    grid-template-columns:repeat(3, minmax(0,1fr));
    column-gap:12px;
  }
  #reservation .progress__list li{
    min-height:54px;  /* ほんの少しだけ詰める */
  }
}


/* === Additions for new content blocks === */
.icon-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:8px}
.icon-list li{padding-left:0}
.feature-grid{display:grid;gap:16px}
@media(min-width:900px){.feature-grid{grid-template-columns:repeat(3,1fr)}}
.ticks{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.ticks li{position:relative;padding-left:1.25em}
.ticks li::before{content:"✓";position:absolute;left:0;top:0;color:var(--brand)}
.steps{counter-reset:st;list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.steps li{counter-increment:st;position:relative;padding-left:1.6em}
.steps li::before{content:counter(st) ".";position:absolute;left:0;top:0;color:#64748b;font-weight:700}
.mini-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.mini-gallery img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;padding:.8rem 1rem;margin:.6rem 0}
.faq summary{cursor:pointer;font-weight:700}


/*headerの基本レイアウト */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
.brand img{display:block;height:44px;width:auto}
.site-nav{display:flex;align-items:center;gap:18px}
.site-nav .menu{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.nav-toggle{display:none;background:none;border:0;width:42px;height:42px;position:relative}
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after{
  content:'';display:block;height:2px;background:#222;width:24px;position:absolute;left:9px;top:20px}
.nav-toggle__bar::before{top:-7px} .nav-toggle__bar::after{top:7px}
/* SP */
@media (max-width: 960px){
  .nav-toggle{display:block}
  .site-nav{position:absolute;inset:60px 0 auto 0;background:#fff;border-bottom:1px solid #eee;padding:12px 16px;display:none;flex-direction:column;gap:12px}
  .site-nav.is-open{display:flex}
  .site-nav .menu{flex-direction:column;gap:10px}
}
  .site-header .brand__text {color: #111;font-weight: 700;}

/* footerーの基本レイアウト*/
.site-footer{background:#111;color:#eee;margin-top:40px}
.site-footer .wrap{padding:28px 0}
.footer-shops .shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.shop-card{background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;padding:14px}
.footer-widgets{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-top:18px}
.footer-nav .menu, .social-nav .menu{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:14px;border-top:1px solid #2a2a2a;padding-top:12px}
.totop{text-decoration:none;color:#aaa}
.shop-card .muted{color:#aaa}


/* ==== Privacy Policy on STEP3（読みやすさ優先） ==== */
#reservation .ppolicy-box .ppolicy__textarea{
  min-height: 260px;           /* しっかり読める高さ */
  background:#fff !important;  /* 白地に反転 */
  color:#fff !important;    /* 高コントラスト */
  border:1px solid #e5e7eb !important;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  color-scheme: light;
}
#reservation .ppolicy-box .ppolicy__label{ color:#F4F7FB } /* 見出しはダーク面の色で */
#reservation .ppolicy__lead{ color:#d1d5db }               /* 補足文は淡色 */
#reservation .ppolicy__toggle{
  text-decoration: underline; color:#E9CC7A;
}