/* トップの写真の出方：金のアーチ＋引き→アップ／キャッチ「美髪を買う SEAM」（所有者 10/11）
   その日最初の1回だけ html[data-hi="1"]（head の小さなスクリプトが付ける）。予約・診断のボタンは最初から見せる */

/* キャッチの組版（演出の有無にかかわらず） */
.sf-page .sf-hero-copy h1.hc{display:flex;flex-direction:column;align-items:center;margin:14px 0 22px!important;font-style:normal!important;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.sf-page .hc-main{font-family:"Shippori Mincho","Yu Mincho","Hiragino Mincho ProN",serif;font-weight:500;font-size:clamp(40px,11vw,76px);line-height:1.15;letter-spacing:.16em;padding-left:.16em;white-space:nowrap}
.sf-page .hc-main .hc-ch{display:inline-block}
.sf-page .hc-rule{position:relative;display:block;width:clamp(96px,22vw,168px);height:1px;margin:22px auto 18px;background:linear-gradient(90deg,transparent,#D4B57A 30%,#D4B57A 70%,transparent)}
.sf-page .hc-rule:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-3px 0 0 -3px;transform:rotate(45deg);background:#D4B57A}
.sf-page .hc-brand{font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(17px,4.4vw,26px);letter-spacing:.5em;padding-left:.5em;color:#EBDDBF}
html[lang="en"] .sf-page .hc-main{font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:.06em;font-size:clamp(34px,8.6vw,64px);white-space:normal;text-align:center}
html[lang="ko"] .sf-page .hc-main{font-size:clamp(28px,7.4vw,56px);letter-spacing:.06em;white-space:normal;text-align:center}

/* 演出 */
html[data-hi="1"] .sf-page .sf-hero{background:#17110d!important}
html[data-hi="1"] .sf-page .sf-hero-photo{clip-path:inset(var(--hi-b0,92%) var(--hi-r,20%) var(--hi-b,8%) var(--hi-l,20%) round 0);transition:clip-path .7s cubic-bezier(.65,0,.35,1)}
html.hi-photo .sf-page .sf-hero-photo{clip-path:inset(var(--hi-t,10%) var(--hi-r,20%) var(--hi-b,8%) var(--hi-l,20%) round var(--hi-a,30vw) var(--hi-a,30vw) 0 0)}
html.hi-open .sf-page .sf-hero-photo{clip-path:inset(0 0 0 0 round 0 0 0 0);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1)}
/* 引き→アップ */
html[data-hi="1"] .sf-page .sf-hero-photo img{transform:scale(1);transform-origin:50% 55%;transition:transform 3.6s cubic-bezier(.22,1,.36,1)!important}
html.hi-photo .sf-page .sf-hero-photo img{transform:scale(1.12)}
.hi-arch{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;transition:opacity .7s ease}
.hi-arch path{fill:none;stroke:#C9A86A;stroke-width:1;vector-effect:non-scaling-stroke}
html.hi-open .hi-arch{opacity:0}
/* 文字はあとから（キャッチだけ・説明文とボタンは最初から）：一文字ずつ にじみから → 金の区切り線が中央から → SEAM が字間を詰めながら
   home-motion.css が見出しまわりを opacity:1!important にしているので ここも !important で上書きする */
html[data-hi="1"] .sf-page .hc-main:not(.hc-split){opacity:0!important}
html[data-hi="1"] .sf-page .hc-ch{opacity:0!important;filter:blur(8px);transform:translateY(.25em);transition:opacity 1s ease,filter 1.1s ease,transform 1.2s cubic-bezier(.22,1,.36,1)!important;transition-delay:calc(var(--i,0) * 110ms)!important}
html.hi-copy[data-hi="1"] .sf-page .hc-ch{opacity:1!important;filter:none;transform:none}
html[data-hi="1"] .sf-page .hc-rule{transform:scaleX(0);transition:transform 1s cubic-bezier(.65,0,.35,1) .75s!important}
html[data-hi="1"] .sf-page .hc-rule:after{opacity:0!important;transition:opacity .6s ease 1.5s!important}
html.hi-copy[data-hi="1"] .sf-page .hc-rule{transform:scaleX(1)}
html.hi-copy[data-hi="1"] .sf-page .hc-rule:after{opacity:1!important}
html[data-hi="1"] .sf-page .hc-brand{opacity:0!important;letter-spacing:1.1em;transition:opacity 1.2s ease 1.05s,letter-spacing 1.6s cubic-bezier(.22,1,.36,1) 1.05s!important}
html.hi-copy[data-hi="1"] .sf-page .hc-brand{opacity:1!important;letter-spacing:.5em}
@media (prefers-reduced-motion:reduce){html[data-hi] .sf-page .sf-hero-photo,html[data-hi] .sf-page .sf-hero-photo img,html[data-hi] .sf-page .sf-hero-copy *{opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important;transition:none!important}.hi-arch{display:none}}