/* =========================================================
   Saari 採用LP ── sections.css（セクション固有レイアウト）
   Art Direction v4「ちいさな島」／ tokens・base・components に依存
   ========================================================= */

/* 写真は一段彩度を落とす（落ち着き） */
.hero__photo img,.concept__photo img,.story__photo img,
.interview__photo img,.menu__photo img,.salon__photo img{filter:var(--photo-grade)}

/* ============ Hero（タイポ主役・余白＝海） ============ */
.hero{background:var(--c-paper);padding-top:96px}
.hero__inner{
  min-height:66svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-block:32px;
}
.hero__eyebrow{
  font-family:var(--ff-accent);font-style:italic;font-size:1rem;
  letter-spacing:.2em;color:var(--c-greige-deep);margin-bottom:34px;
}
.hero__logo{display:block;width:clamp(146px,32vw,172px);margin-bottom:26px}
.hero__logo img{width:100%;height:auto}
.hero__catch{
  font-family:var(--ff-jp-serif);font-weight:var(--fw-regular);
  font-size:var(--fs-hero);line-height:1.55;letter-spacing:.06em;color:var(--c-ink);
}
.hero__catch em{font-style:normal;color:var(--c-rose-deep)}
.hero__sub{
  margin-top:26px;font-size:var(--fs-sm);line-height:1.85;letter-spacing:var(--ls-jp-wide);
  color:var(--c-ink-soft);font-weight:var(--fw-regular);
}
.hero__scroll{
  display:block;margin-top:54px;font-family:var(--ff-accent);font-style:italic;
  font-size:.86rem;letter-spacing:.28em;color:var(--c-greige);
}
.hero__scroll::after{content:"";display:block;width:1px;height:34px;background:var(--c-greige);margin:10px auto 0;opacity:.7}
.hero__photo{width:100%;aspect-ratio:16/7;min-height:280px;overflow:hidden}
.hero__photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:680px){.hero__photo{aspect-ratio:4/3}}

/* ============ Concept ============ */
.concept{text-align:center}
.concept__catch{
  font-family:var(--ff-jp-serif);font-weight:var(--fw-regular);
  font-size:var(--fs-h2);line-height:1.58;letter-spacing:var(--ls-jp-wide);color:var(--c-ink);
}
.concept__catch strong{color:var(--c-rose-deep);font-weight:var(--fw-regular)}
.concept__txt{margin-top:8px;color:var(--c-ink)}
.concept__photo{margin-top:38px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-lg)}
.concept__photo img{width:100%;height:100%;object-fit:cover}

/* ============ Numbers ============ */
.num-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 18px;max-width:740px;margin:0 auto}
@media(max-width:600px){.num-grid{grid-template-columns:repeat(2,1fr);gap:30px 16px}}
.num{text-align:center}
.num__v{
  display:block;font-family:var(--ff-display);font-weight:var(--fw-light);
  font-size:clamp(1.9rem,5.4vw,2.6rem);line-height:1;color:var(--c-rose-deep);letter-spacing:.02em;
}
.num__v small{font-size:.42em;margin-left:3px;color:var(--c-ink-soft);font-weight:var(--fw-light)}
.num__l{display:block;margin-top:12px;font-size:var(--fs-xs);letter-spacing:.12em;color:var(--c-ink-soft)}
.num-note{text-align:center;margin-top:36px}

/* ============ Our Story ============ */
.story__item{
  display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(24px,3.6vw,44px);align-items:center;
  max-width:940px;margin:0 auto clamp(38px,5.5vw,64px);
}
.story__item:last-child{margin-bottom:0}
.story__item--rev{grid-template-columns:1.1fr 0.9fr}
.story__item--rev .story__photo{order:2}
@media(max-width:760px){
  .story__item,.story__item--rev{grid-template-columns:1fr;gap:28px}
  .story__item--rev .story__photo{order:0}
}
.story__photo{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-lg)}
.story__photo img{width:100%;height:100%;object-fit:cover}
/* 縦長写真はトリミングせず自然な縦横比で見せる（差し替えが縦長の場合・2026-06-17 岩田さん指示） */
.story__photo--portrait{aspect-ratio:auto}
.story__photo--portrait img{height:auto;object-fit:contain}
.story__body--wide{grid-column:1/-1;max-width:520px;margin:0 auto;text-align:center}
.story__n{font-family:var(--ff-display);font-weight:var(--fw-light);font-size:2.4rem;line-height:1;color:var(--c-rose);margin-bottom:10px}
.story__ttl{font-family:var(--ff-display);font-weight:var(--fw-regular);font-size:var(--fs-h3);letter-spacing:.04em;color:var(--c-ink)}
.story__ttl-jp{font-size:var(--fs-sm);color:var(--c-ink-soft);margin:4px 0 22px;letter-spacing:var(--ls-jp-wide)}
.story__body .quote{margin-bottom:20px}
.story__body .txt{font-size:var(--fs-sm)}

/* timeline */
.timeline{max-width:440px;margin:8px auto 0;text-align:left}
.timeline__row{display:grid;grid-template-columns:74px 1fr;gap:20px;padding:13px 0;border-bottom:1px solid var(--c-line);align-items:center}
.timeline__row:last-child{border-bottom:none}
.timeline__t{font-family:var(--ff-display);font-size:1.1rem;color:var(--c-rose-deep);letter-spacing:.03em}
.timeline__d{font-size:var(--fs-sm);color:var(--c-ink)}
.timeline__note{margin-top:22px;text-align:center;line-height:1.85}

/* ============ Staff Voice ============ */
.interview{
  display:grid;grid-template-columns:320px 1fr;gap:clamp(24px,3.6vw,44px);align-items:start;
  max-width:900px;margin:0 auto clamp(36px,5vw,56px);
}
.interview:last-child{margin-bottom:0}
.interview--rev{grid-template-columns:1fr 340px}
.interview--rev .interview__photo{order:2}
@media(max-width:760px){
  .interview,.interview--rev{grid-template-columns:1fr;gap:26px}
  .interview--rev .interview__photo{order:0}
}
.interview__photo{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-lg);background:var(--c-rose-soft)}
.interview__photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.interview__role{font-family:var(--ff-accent);font-style:italic;font-size:.86rem;letter-spacing:.14em;color:var(--c-rose-deep);margin-bottom:12px}
.interview__catch{font-family:var(--ff-jp-serif);font-weight:var(--fw-regular);font-size:clamp(1.32rem,3vw,1.62rem);line-height:1.6;letter-spacing:var(--ls-jp);color:var(--c-ink);margin-bottom:14px}
.interview__name{font-weight:var(--fw-medium);font-size:1rem;color:var(--c-ink);letter-spacing:var(--ls-jp)}
.interview__name .en{font-family:var(--ff-accent);font-style:italic;font-size:.82rem;color:var(--c-greige-deep);margin-left:10px;font-weight:var(--fw-regular)}
.interview__qa{margin-top:22px}
.interview__q{display:block;font-weight:var(--fw-medium);font-size:var(--fs-sm);color:var(--c-ink);margin:24px 0 10px;letter-spacing:var(--ls-jp)}
.interview__q .mk{font-family:var(--ff-display);color:var(--c-rose-deep);margin-right:10px}
.interview__a{font-size:var(--fs-sm);line-height:1.85;color:var(--c-ink-soft);padding-left:24px}

/* ============ Menu ============ */
.menu__layout{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:center;max-width:960px;margin:0 auto}
@media(max-width:760px){.menu__layout{grid-template-columns:1fr;gap:36px}}
.menu-list{border-top:1px solid var(--c-line)}
.menu-row{display:flex;align-items:baseline;gap:16px;padding:16px 4px;border-bottom:1px solid var(--c-line)}
.menu-row__en{font-family:var(--ff-display);font-weight:var(--fw-light);font-size:1.2rem;color:var(--c-ink);letter-spacing:.03em;min-width:42%}
.menu-row__jp{font-size:var(--fs-sm);color:var(--c-ink-soft);letter-spacing:var(--ls-jp)}
.menu__photos{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px}
.menu__photo{overflow:hidden;border-radius:var(--radius);aspect-ratio:1/1}
.menu__photo:first-child{grid-column:1/-1;aspect-ratio:16/9}
.menu__photo img{width:100%;height:100%;object-fit:cover}
.menu__note{text-align:center;margin-top:48px;line-height:1.95}

/* ============ Recruit / Salon / Entry ============ */
.salon__photo{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-lg);margin-bottom:36px}
.salon__photo img{width:100%;height:100%;object-fit:cover}
/* 店内ギャラリー：Pinterest風メイソンリー（ノークロップ・最短列に積むJS制御で隙間を防ぐ／2026-06-18） */
.salon-gallery{display:flex;gap:12px;align-items:flex-start;margin:8px auto 40px;max-width:var(--maxw)}
.salon-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.salon-gallery figure{margin:0;overflow:hidden;border-radius:var(--radius-lg);background:var(--c-paper-sand)}
.salon-gallery img{width:100%;height:auto;display:block;filter:var(--photo-grade)}
@media(max-width:460px){.salon-gallery{gap:8px}.salon-col{gap:8px}}

.entry{background:var(--c-rose-soft)}
.entry .sec-head .h-display{color:var(--c-ink)}
.entry__lead{text-align:center;font-size:var(--fs-body);line-height:1.95;color:var(--c-ink);margin-bottom:36px}
.entry .btn-stack{margin-bottom:30px}
.entry__team{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-lg);margin-bottom:44px}
.entry__team img{width:100%;height:100%;object-fit:cover}

/* ============ Hero CV要素（条件バッジ・CTA） ============ */
.hero__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px;margin-top:30px;max-width:580px}
.hero__badges li{
  font-size:var(--fs-xs);letter-spacing:.05em;color:var(--c-ink);
  background:var(--c-white);border:1px solid var(--c-line);border-radius:999px;padding:7px 15px;
}
.hero__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px}
.hero__cta .btn{min-width:172px}
@media(max-width:480px){
  .hero__cta{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  .hero__cta .btn{min-width:0;width:100%}
}

/* ============ Saari Today（KINO③ フィード） ============ */
.feed__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:980px;margin:0 auto}
@media(max-width:760px){.feed__grid{grid-template-columns:1fr;max-width:440px}}
.feed-card{background:var(--c-paper);border:1px solid var(--c-line);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur)}
.feed-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.feed-card__photo{aspect-ratio:4/3;overflow:hidden}
.feed-card__photo img{width:100%;height:100%;object-fit:cover}
.feed-card__body{padding:18px 18px 16px}
.feed-card__text{font-family:var(--ff-jp);font-weight:var(--fw-regular);font-size:.9rem;line-height:1.85;color:var(--c-ink);letter-spacing:.03em}
.feed-card__meta{display:flex;align-items:center;gap:10px;margin-top:14px}
.feed-card__tag{font-family:var(--ff-accent);font-style:italic;font-size:.72rem;letter-spacing:.1em;color:#fff;background:var(--c-rose);border-radius:999px;padding:2px 11px}
.feed-card__day{font-family:var(--ff-accent);font-style:italic;font-size:.78rem;color:var(--c-greige-deep)}
.feed__note{text-align:center;margin-top:30px}