/* 診断：数字を入れる問い・受け取り方（メール／LINE）。site.css の診断の見た目に合わせる */
.diagnosis-number{display:flex;align-items:center;gap:12px;max-width:360px;padding:12px 18px;border:1px solid #e7ded7;border-radius:12px;background:#fff}
.diagnosis-number:focus-within{border-color:#ec7654;box-shadow:inset 0 0 0 1px rgba(236,118,84,.2)}
.diagnosis-number input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:700 28px var(--serif);color:var(--ink);-moz-appearance:textfield}
.diagnosis-number input::-webkit-outer-spin-button,.diagnosis-number input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.diagnosis-number span{font-size:15px;font-weight:700;color:var(--muted)}
.diagnosis-submit[hidden]{display:none}

.diagnosis-answers{margin:20px 0 14px;padding:0;list-style:none;border-top:1px solid #ead7cb}
.diagnosis-answers li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #ead7cb;font-size:13px}
.diagnosis-answers li span{color:var(--muted)}
.diagnosis-answers li b{text-align:right}

.receive-label{margin:0 0 6px;font-size:13px;font-weight:700}
.receive-or{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--muted);font-size:12px}
.receive-or:before,.receive-or:after{content:"";flex:1;height:1px;background:#ead7cb}
.receive-btn{display:block;width:100%;min-height:58px;padding:12px;border:0;border-radius:10px;color:#fff;font:700 15px var(--sans);cursor:pointer;transition:transform .18s,box-shadow .18s,opacity .18s}
.receive-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.receive-btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.receive-mail{background:#2f5d8a}
.receive-line{background:#06a352}
.receive-btn.is-dim{opacity:.45}
.receive-panel[hidden]{display:none}
.report-fields .wide{grid-column:1 / -1}
.report-fields .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#diagnosis-report-form .button{margin-top:14px}
.receive-line-panel p{font-size:14px}
.receive-code{display:flex;align-items:center;gap:14px;margin:12px 0 16px;padding:14px 18px;border:1px dashed #06a352;border-radius:12px;background:#f3fbf6}
.receive-code span{font-size:12px;color:var(--muted)}
.receive-code strong{font:400 40px/1 var(--serif);letter-spacing:.12em;color:#06a352}
.receive-code .text-button{margin-left:auto}
.receive-line-open{background:#06a352;color:#fff}
.report-status{margin-top:14px;padding:12px 14px;border-radius:8px;background:#fff4ee;color:#7a3b25;font-size:13px}
.report-status.is-ok{background:#f3fbf6;color:#1d6b3f}
@media(max-width:800px){
  .diagnosis-result .diagnosis-report{order:-1}
  .diagnosis-number input{font-size:24px}
  .receive-code strong{font-size:34px}
}

/* スマホ（幅800px以下）だけの見た目。パソコンの見た目は変えない（2026-10-28） */
/* 一番大きい見出し（h1）は日本語のキャッチ。見た目は前の strong と同じにする */
.hero h1.hero-catch{margin:0;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
.m-only,.m-swipe,.hero-trust,.m-sticky-cta{display:none}
@media(max-width:800px){
.m-only{display:inline}
h2,h3,.hero-text strong,.story-jp-lead{text-wrap:balance;word-break:auto-phrase}
/* 上の帯のすりガラスは写真に色の段ができるので、スマホでは無地に */
.site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}

/* 1画面目：写真を全面に、文字は下にまとめて読みやすく */
.hero{min-height:calc(100svh - 66px);max-height:780px;align-items:flex-end}
.hero-shade{background:linear-gradient(180deg,rgba(18,12,9,.04) 0%,rgba(18,12,9,.16) 28%,rgba(18,12,9,.68) 48%,rgba(18,12,9,.9) 72%)}
.hero-slide img,.hero-slide:first-child img{filter:none;transform:none;object-fit:cover;background:none}
.hero-slide:first-child img{object-position:center 70%}
.hero-inner{padding-top:0;padding-bottom:50px}
.hero .eyebrow{margin-bottom:10px;color:#ffc4b3;font-size:9px;letter-spacing:.2em}
.hero .hero-wordmark{margin-bottom:12px;font-size:38px;line-height:.9;letter-spacing:-.04em}
.hero-english{display:none}
.hero .hero-text{margin-bottom:18px}
.hero .hero-text strong{margin-bottom:6px;font-size:24px;font-weight:700;line-height:1.5;letter-spacing:.02em}
.hero .hero-text span{max-width:none;color:rgba(255,255,255,.86);font-size:13px}
.hero-actions{display:block}
.hero-diagnosis-button{display:flex;width:100%;min-height:58px;padding:0 20px;font-size:15px;box-shadow:0 10px 26px rgba(255,59,19,.35)}
.hero-diagnosis-button em{font-style:normal}
.hero-btn-label{font-weight:700}
.hero-trust{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.28)}
.hero-trust li{padding:10px 4px 0;color:rgba(255,255,255,.8);font-size:10px;line-height:1.45;text-align:center}
.hero-trust li+li{border-left:1px solid rgba(255,255,255,.22)}
.hero-trust b{display:block;color:#fff;font:21px/1.1 var(--serif)}
.hero-bottom{bottom:20px;justify-content:center}

/* 下に出し続ける診断のボタン */
.m-sticky-cta{position:fixed;z-index:40;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:0 20px;border-radius:8px;background:var(--orange);color:#fff;font-size:15px;font-weight:700;box-shadow:0 10px 28px rgba(80,20,5,.3);transform:translateY(140%);transition:transform .3s ease}
.m-sticky-cta small{margin-left:8px;color:#ffe2d9;font-size:11px;font-weight:500}
.m-sticky-cta span{font-size:20px;font-weight:400}
.m-sticky-cta.is-shown{transform:none}
body.home footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

/* 飾りだけの帯と背景はスマホでは出さない（長さと重さを減らす） */
.item-background-reveal,.item-background-reveal-narrow,.site-fixed-backdrop{display:none}

/* 余白を詰める */
.diagnosis,.about,.products,.faq,.formula,.formula-modern,.cases,.cases-editorial,.authority,.support-program,.pricing,.salon-future,.home-journal{padding-top:60px;padding-bottom:60px}
.salon-strengths{padding:60px 0}
.consultation{padding-top:56px;padding-bottom:56px}
.brand-story{padding-top:0;padding-bottom:60px}
.about-heading,.products-heading,.cases-heading,.authority-heading,.support-program-heading,.formula-modern-heading{margin-bottom:24px}
.products-heading h2,.about-heading h2,.formula-heading h2,.authority-heading h2,.strengths-heading h2,.salon-future-copy h2,.cases-heading h2,.support-program-heading h2,.pricing-heading h2,.consultation h2,.diagnosis-heading h2,.brand-story-intro h2,.home-journal-heading h2,.faq h2{font-size:28px;line-height:1.5}

/* 写真の上に重なる英字の飾りは消して写真を見せる */
.about-image p,.story-visual figcaption,.generated-editorial-row figcaption{display:none}
/* 縦長の動画は顔が上下に分かれているので切らない（9:16のまま） */
.about-image,.salon-future-image{width:100%;height:auto;aspect-ratio:9/16}
.about-copy>p{margin-bottom:24px}

/* ブランドの話：英語の大見出しを小さく、日本語を主役に */
.generated-editorial{padding-top:40px;padding-bottom:0}
.generated-editorial-row{gap:18px}
.generated-editorial-row+.generated-editorial-row,.story-row+.story-row{margin-top:48px}
.generated-editorial-row figure,.story-visual-product,.story-visual-treatment{aspect-ratio:16/10}
.generated-editorial-copy h2,.generated-editorial-lab .generated-editorial-copy h2,.generated-editorial-treatment .generated-editorial-copy h2{margin-bottom:10px;font-size:22px;line-height:1.15}
.generated-editorial-copy h3{font-size:20px;font-weight:700}
.story-row{gap:18px}
.story-row-product{margin-top:48px}
.story-copy h3{margin-bottom:10px;font-size:24px;line-height:1.1}
.story-jp-lead{font-size:19px;font-weight:700}
.story-tags{display:none}
.story-principles{margin-top:40px}

/* 6つのおすすめ：2列に */
.formula-recommend{grid-template-columns:1fr 1fr;gap:10px}
.recommend-card figure{aspect-ratio:1}
.recommend-card>div{grid-template-columns:1fr;gap:6px;padding:12px 12px 14px}
.formula-recommend .recommend-card span{width:24px;height:24px;font-size:11px}
.formula-recommend .recommend-card p{font-size:13px;line-height:1.55}

/* 横にめくるカード（実績・強み・商品） */
.authority-visual-grid,.strengths-list,.product-showcase{display:flex;gap:12px;margin-left:-25px;margin-right:-25px;padding:0 25px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:25px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.authority-visual-grid::-webkit-scrollbar,.strengths-list::-webkit-scrollbar,.product-showcase::-webkit-scrollbar{display:none}
.authority-visual-grid>*,.strengths-list>*,.product-showcase>*{flex:0 0 84%;scroll-snap-align:start}
.m-swipe{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 10px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.06em}
.m-swipe:after{content:"→";color:var(--orange);font-size:16px}
.salon-strengths .m-swipe{color:#ffe2d9}
.salon-strengths .m-swipe:after{color:#fff}
.authority-card figure{aspect-ratio:4/3}
.authority-card-copy{padding:20px 18px}
.authority-card-copy h3{font-size:20px}
.strengths-list figure{aspect-ratio:4/3}
.strengths-card-body{padding:16px 16px 20px}
.strengths-list p{font-size:12px}
.product-detail{display:flex;flex-direction:column}
.product-detail figure{order:0;height:250px;flex:none}
.product-copy{order:1;padding:22px 20px 24px}
.product-copy h3{font-size:30px;line-height:1}
.product-kana{margin:8px 0 14px;font-size:13px}
.product-copy>p:not(.product-kana){font-size:13px;line-height:1.85}
.product-copy ul{margin-top:16px}
.product-copy li{padding:8px 0;font-size:12px}

/* これからの美容室：動画を短めに */
.salon-future{gap:26px}
.salon-future-image,.salon-future-image img,.salon-future-image video{min-height:0}

/* 導入の流れ：写真を小さくして流れを追いやすく */
.support-stages{gap:36px}
.support-stage{gap:14px}
/* 写真は縦長が多いので4:5で顔を残す。横長の面談の写真だけ4:3 */
.support-stage-media{height:auto;aspect-ratio:4/5}
.support-stage-media:has(.support-stage-interview-photo){aspect-ratio:4/3}
.support-stage-copy h3{font-size:24px}
.support-kpi{margin-top:48px}

/* 施術前後 */
.care-points{padding:24px 18px}
.case-stack{gap:16px}
}