/* ============================================
   case-study-salon.css
   Personal Salon LP — Feminine Elegant · 2026
   ============================================ */
:root{
    --sl-bg:#FBF7F2;
    --sl-bg-mid:#F3ECE3;
    --sl-ink:#2C2520;
    --sl-ink-mid:#5E5247;
    --sl-ink-lt:#988876;
    --sl-accent:#BF9B6F;
    --sl-accent-dk:#9A7B51;
    --sl-rose:#C68E85;
    --sl-line:rgba(44,37,32,.12);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
    background:var(--sl-bg);
    color:var(--sl-ink);
    font-family:'Noto Serif JP',serif;
    font-weight:400;
    line-height:1.9;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}

/* Grain */
body::after{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    opacity:.5
}

/* NAV */
.sl-nav{
    position:fixed;top:0;left:0;right:0;z-index:200;
    display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
    padding:clamp(.9rem,1.5vw,1.1rem) clamp(1rem,3vw,2.5rem);
    background:rgba(251,247,242,.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--sl-line);
}
.sl-nav__logo{font-family:'Playfair Display',serif;font-weight:600;font-size:1.15rem;letter-spacing:.05em}
.sl-nav__logo span{color:var(--sl-accent);font-style:italic}
.sl-nav__center{text-align:center;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.95rem;color:var(--sl-ink-lt);letter-spacing:.1em}
.sl-nav__back{justify-self:end;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1rem;color:var(--sl-ink-mid);transition:.3s}
.sl-nav__back:hover{color:var(--sl-accent)}

/* 装飾：ゴールドの細線 */
.sl-deco-line{height:1px;background:linear-gradient(to right,transparent,var(--sl-accent),transparent);margin:0 auto;width:80px}

/* Container */
.sl-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}

/* HERO */
.sl-hero{padding:clamp(7rem,12vw,10rem) 0 clamp(3.5rem,7vw,6rem);text-align:center;position:relative}
.sl-hero__label{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:1.1rem;color:var(--sl-accent);letter-spacing:.15em;margin-bottom:1.5rem;
}
.sl-hero__title{
    font-family:'Noto Serif JP',serif;font-weight:400;
    font-size:clamp(2.8rem,6.5vw,5.8rem);
    line-height:1.2;letter-spacing:.03em;margin-bottom:2rem;
}
.sl-hero__title em{
    font-family:'Playfair Display',serif;font-style:italic;font-weight:500;
    color:var(--sl-accent);
}
.sl-hero__sub{
    font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;
    font-size:clamp(1.1rem,2vw,1.5rem);color:var(--sl-rose);
    margin-bottom:3rem;letter-spacing:.08em;
}
.sl-hero__divider{width:1px;height:80px;background:var(--sl-accent);margin:2.5rem auto}
.sl-hero__lead{
    max-width:min(560px,100%);margin:0 auto;font-size:clamp(.95rem,1.2vw,1rem);line-height:2.1;color:var(--sl-ink-mid);
}

.sl-hero__image{
    margin-top:clamp(3rem,6vw,5rem);position:relative;
    border:1px solid var(--sl-accent);padding:14px;background:var(--sl-bg);
}
.sl-hero__image::before,
.sl-hero__image::after{
    content:'';position:absolute;width:40px;height:40px;border:2px solid var(--sl-accent);
}
.sl-hero__image::before{top:-8px;left:-8px;border-right:none;border-bottom:none}
.sl-hero__image::after{bottom:-8px;right:-8px;border-left:none;border-top:none}
.sl-hero__image-inner{
    aspect-ratio:16/9;
    background:linear-gradient(135deg,#2C2520,#BF9B6F);
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
}
.sl-hero__image-inner::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse at center,transparent,rgba(0,0,0,.4));
}
.sl-hero__icon{
    font-size:clamp(4rem,8vw,7rem);
    color:rgba(251,247,242,.85);z-index:1;position:relative;
    font-family:'Playfair Display',serif;font-style:italic;
}

/* Section base */
.sl-sec{padding:clamp(4rem,8vw,7rem) 0}
.sl-sec__header{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sl-sec__label{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    font-size:1rem;color:var(--sl-accent);letter-spacing:.25em;
    text-transform:uppercase;margin-bottom:.8rem;
}
.sl-sec__title{
    font-family:'Noto Serif JP',serif;font-weight:400;
    font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.4;letter-spacing:.02em;
}
.sl-sec__title em{font-family:'Playfair Display',serif;font-style:italic;color:var(--sl-accent)}

/* OVERVIEW */
.sl-overview{background:var(--sl-bg-mid)}
.sl-overview__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(2.5rem,6vw,5rem);align-items:center}
.sl-overview__lead{
    font-size:clamp(1rem,1.3vw,1.15rem);line-height:2.1;color:var(--sl-ink);margin-bottom:2rem;
    font-family:'Noto Serif JP',serif;
}
.sl-overview__body p{color:var(--sl-ink-mid);line-height:2;margin-bottom:1.2rem}
.sl-meta-card{
    background:var(--sl-bg);border:1px solid var(--sl-line);padding:clamp(1.75rem,3vw,2.5rem);
    position:relative;
}
.sl-meta-card::before{
    content:'';position:absolute;top:0;left:0;width:50px;height:2px;background:var(--sl-accent);
}
.sl-meta-card dl{
    display:grid;grid-template-columns:clamp(90px,12vw,110px) minmax(0,1fr);
    padding:1rem 0;border-bottom:1px dashed var(--sl-line);
}
.sl-meta-card dl:last-child{border-bottom:none}
.sl-meta-card dt{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--sl-accent);font-size:.9rem;letter-spacing:.08em}
.sl-meta-card dd{color:var(--sl-ink);line-height:1.7;font-size:.95rem}

/* CONCEPT */
.sl-concept__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(2.5rem,6vw,5rem);align-items:start}
.sl-concept__text h3{
    font-family:'Noto Serif JP',serif;font-weight:500;font-size:1.4rem;
    margin-bottom:1rem;margin-top:2.2rem;
}
.sl-concept__text h3:first-child{margin-top:0}
.sl-concept__text h3 em{font-family:'Playfair Display',serif;font-style:italic;color:var(--sl-accent);font-weight:500}
.sl-concept__text p{color:var(--sl-ink-mid);line-height:2.1;margin-bottom:1rem}

.sl-palette{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:1rem}
.sl-palette__item{
    padding:1.5rem;aspect-ratio:1.2;
    display:flex;flex-direction:column;justify-content:space-between;
    font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.95rem;
    letter-spacing:.05em;
}
.sl-palette__item span:last-child{font-family:'DM Mono',monospace;font-style:normal;font-size:.78rem;letter-spacing:.1em}

.sl-type-card{padding:2rem;background:var(--sl-bg-mid);margin-top:2rem;border-top:3px solid var(--sl-accent)}
.sl-type-card__label{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--sl-accent);font-size:.95rem;letter-spacing:.1em;margin-bottom:.6rem}
.sl-type-card__sample{font-family:'Noto Serif JP',serif;font-size:1.8rem;line-height:1.5}

/* STRUCTURE */
.sl-structure{background:var(--sl-ink);color:var(--sl-bg)}
.sl-structure .sl-sec__label{color:var(--sl-accent)}
.sl-structure .sl-sec__title{color:var(--sl-bg)}
.sl-structure__intro{
    text-align:center;max-width:min(620px,100%);margin:0 auto clamp(2.5rem,5vw,4rem);
    color:rgba(251,247,242,.7);line-height:2.1;
}
.sl-flow{position:relative;max-width:min(760px,100%);margin:0 auto}
.sl-flow__item{
    display:grid;grid-template-columns:clamp(60px,9vw,80px) minmax(0,1fr);gap:clamp(1.25rem,2.5vw,2rem);
    padding:clamp(1.5rem,3vw,2rem) 0;border-bottom:1px solid rgba(251,247,242,.1);
    align-items:start;
}
.sl-flow__num{
    font-family:'Playfair Display',serif;font-style:italic;
    font-size:3rem;color:var(--sl-accent);line-height:1;
}
.sl-flow__title{font-family:'Noto Serif JP',serif;font-weight:500;font-size:1.2rem;color:#fff;margin-bottom:.6rem}
.sl-flow__desc{color:rgba(251,247,242,.7);line-height:2}

/* IMPL */
.sl-impl__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.25rem,2.5vw,2rem);margin-top:clamp(2rem,4vw,3rem)}
.sl-impl__card{
    padding:clamp(1.75rem,3vw,2.5rem);background:var(--sl-bg-mid);border-left:3px solid var(--sl-accent);
    position:relative;
}
.sl-impl__num{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--sl-accent);font-size:1.2rem;letter-spacing:.1em;margin-bottom:.8rem}
.sl-impl__title{font-family:'Noto Serif JP',serif;font-weight:500;font-size:1.3rem;margin-bottom:1rem}
.sl-impl__desc{color:var(--sl-ink-mid);line-height:2}
.sl-tech{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(2rem,4vw,3rem);justify-content:center}
.sl-tech__tag{
    padding:.55rem 1.2rem;border:1px solid var(--sl-accent);color:var(--sl-ink);
    font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1rem;letter-spacing:.05em;
}

/* LEARNING */
.sl-learning{background:var(--sl-bg-mid)}
.sl-learning__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(1.5rem,3vw,2rem)}
.sl-learning__item{padding:clamp(1.75rem,3vw,2.5rem);background:var(--sl-bg);border-top:3px solid var(--sl-accent)}
.sl-learning__num{
    font-family:'Cormorant Garamond',serif;font-style:italic;
    color:var(--sl-accent);font-size:1.5rem;margin-bottom:.8rem;
}
.sl-learning__title{font-family:'Noto Serif JP',serif;font-weight:500;font-size:1.2rem;margin-bottom:1rem}
.sl-learning__desc{color:var(--sl-ink-mid);line-height:2.1}

/* CTA */
.sl-cta{text-align:center;padding:clamp(4.5rem,10vw,9rem) 0}
.sl-cta__title{
    font-family:'Noto Serif JP',serif;font-weight:400;
    font-size:clamp(1.8rem,4vw,3rem);line-height:1.5;margin-bottom:2rem;
}
.sl-cta__title em{font-family:'Playfair Display',serif;font-style:italic;color:var(--sl-accent)}
.sl-cta__buttons{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem}
.sl-btn{
    display:inline-flex;align-items:center;gap:.6rem;
    padding:1rem 2.4rem;
    font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;letter-spacing:.05em;
    transition:.3s;border:1px solid;
}
.sl-btn--primary{background:var(--sl-accent);color:#fff;border-color:var(--sl-accent)}
.sl-btn--primary:hover{background:var(--sl-accent-dk);border-color:var(--sl-accent-dk)}
.sl-btn--outline{border-color:var(--sl-ink);color:var(--sl-ink)}
.sl-btn--outline:hover{background:var(--sl-ink);color:var(--sl-bg)}

/* FOOTER */
.sl-foot{padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--sl-line);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:.9rem;color:var(--sl-ink-lt)}
.sl-foot__row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.sl-foot__row a{color:var(--sl-ink-mid);transition:.3s}
.sl-foot__row a:hover{color:var(--sl-accent)}

/* RESPONSIVE
   ※ ほとんどは auto-fit / clamp() で自動追従。レイアウト切替だけ定義 */
@media(max-width:767px){
    .sl-nav{grid-template-columns:auto 1fr auto}
    .sl-nav__center{display:none}
}

/* ============================================
   KPI Block (added for conversion signal)
============================================ */
.kpi-block {
  margin: clamp(2rem,4vw,3rem) auto;
  max-width: min(900px,100%);
  padding: clamp(1.75rem,3vw,2.5rem) clamp(1.25rem,2.5vw,1.75rem);
  background: #FFFDF8;
  border: 1px solid rgba(45,41,38,.12);
  border-left: 4px solid #D63426;
  border-radius: 6px;
}
.kpi-block__label {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: .72rem;
  color: #D63426;
  letter-spacing: .08em;
  margin-bottom: .6rem;
}
.kpi-block__title {
  font-size: clamp(1.2rem,2vw,1.5rem);
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: #2D2926;
}
.kpi-block__lead {
  font-size: .92rem;
  line-height: 1.9;
  color: #2D2926;
  opacity: .8;
  margin-bottom: 1.5rem;
}
.kpi-block__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(.75rem,1.5vw,1rem);
}
.kpi-item {
  padding: 1.1rem .85rem;
  background: #F2EFE9;
  border-radius: 4px;
  text-align: center;
}
.kpi-item__num {
  font-size: 1.5rem;
  font-weight: 700;
  color: #D63426;
  line-height: 1.2;
}
.kpi-item__label {
  font-size: .78rem;
  color: #2D2926;
  opacity: .75;
  margin-top: .4rem;
  line-height: 1.5;
}
.kpi-block__note {
  margin-top: 1.25rem;
  font-size: .72rem;
  color: #2D2926;
  opacity: .55;
  font-family: 'DM Mono', monospace;
  line-height: 1.7;
}
/* ※ kpi-block は auto-fit と clamp() で自動追従 */