@charset "UTF-8";

/* ============================================================
   UNBIRTHDAY — Hair salon, Kobe
   Palette : cool paper / deep ink / Kobe-harbour blue (accent, sparing)
   Type    : Zen Old Mincho (display) / Zen Kaku Gothic New (body) / Jost (latin utility)
   ============================================================ */

:root{
  --paper:  #f1f2ef;
  --paper-2:#fafaf8;
  --ink:    #14171a;
  --ink-2:  #3a4046;
  --ash:    #8d9499;
  --rule:   #d8dbd6;
  --sky:    #7c9aa6;   /* 差し色。ラベル・罫線に少量だけ */
  --sky-pale: #dfe6e9; /* CTA の面。ページ内で唯一の色地 */
  --sky-deep: #456673; /* 淡い青の上に置く小さな文字用。4.89:1 で WCAG AA を満たす */

  --mincho: "Zen Old Mincho", "Yu Mincho", "YuMincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --latin:  "Jost", "Zen Kaku Gothic New", sans-serif;

  --gut: clamp(1.25rem, 5vw, 5rem);          /* page side gutter */
  --sec: clamp(6rem, 14vw, 13rem);           /* vertical section rhythm */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--gothic);
  font-weight:300;
  line-height:1.9;
  letter-spacing:.04em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }

a{ color:inherit; text-decoration:none; }

:focus-visible{
  outline:2px solid var(--sky);
  outline-offset:3px;
}

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip{
  position:absolute; left:50%; top:-100px; z-index:200;
  transform:translateX(-50%);
  padding:.75rem 1.5rem; background:var(--ink); color:var(--paper);
  font-family:var(--latin); font-size:.75rem; letter-spacing:.15em;
}
.skip:focus{ top:0; }

/* ============================================================
   HEADER
   ============================================================ */
.hd{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem;
  padding:1.5rem var(--gut);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.hd.is-stuck{
  background:rgba(241,242,239,.86);
  backdrop-filter:blur(14px);
  padding-block:1rem;
  box-shadow:0 1px 0 var(--rule);
}

.hd__logo{ display:block; }
.hd__logo-mark{
  display:block;
  font-family:var(--latin); font-weight:400;
  font-size:clamp(.95rem, 1.5vw, 1.1rem);
  letter-spacing:.34em;
  line-height:1;
}
.hd__logo-sub{
  display:block; margin-top:.55rem;
  font-family:var(--latin); font-weight:300;
  font-size:.5625rem; letter-spacing:.24em;
  color:var(--ash);
  line-height:1;
}

.hd__nav{ display:flex; align-items:center; gap:clamp(1.5rem, 3vw, 3rem); }

.hd__list{
  display:flex; align-items:center;
  gap:clamp(1rem, 2vw, 2rem);
  font-family:var(--latin); font-weight:400;
  font-size:.6875rem; letter-spacing:.18em;
  white-space:nowrap;
}
.hd__list a{
  position:relative;
  display:inline-block;
  padding-block:.35rem;
}
.hd__list a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--sky);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.hd__list a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* STYLE dropdown ---------------------------------------------------- */
.hd__has-sub{ position:relative; }
.hd__subtoggle{
  font:inherit; color:inherit; letter-spacing:inherit;
  background:none; border:0; cursor:pointer;
  position:relative; display:inline-flex; align-items:center; gap:.45em;
  padding-block:.35rem;
}
.hd__subtoggle::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--sky);
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease);
}
.hd__has-sub:hover .hd__subtoggle::after,
.hd__has-sub:focus-within .hd__subtoggle::after{ transform:scaleX(1); transform-origin:left; }
.hd__caret{
  width:.42em; height:.42em; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-.12em) rotate(45deg);
  transition:transform .35s var(--ease);
}
.hd__has-sub:hover .hd__caret,
.hd__has-sub:focus-within .hd__caret{ transform:translateY(.05em) rotate(225deg); }

.hd__sub{
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:9.5rem; padding:.5rem 0;
  background:var(--paper); border:1px solid var(--rule);
  box-shadow:0 16px 34px rgba(24,32,44,.10);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index:60;
}
/* トグルとメニューの隙間を埋める透明ブリッジ（ホバーが途切れないように） */
.hd__sub::before{
  content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.hd__has-sub:hover .hd__sub,
.hd__has-sub:focus-within .hd__sub{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.hd__sub li{ display:block; }
.hd__sub a{
  display:block; padding:.6rem 1.3rem;
  font-family:var(--latin); font-size:.72rem; letter-spacing:.12em;
  white-space:nowrap;
}
.hd__sub a::after{ display:none; }
.hd__sub a:hover{ background:var(--sky-pale); }

.hd__cta{
  display:inline-flex; align-items:center;
  padding:.85rem 1.4rem;
  border:1px solid var(--ink);
  font-family:var(--latin); font-size:.6875rem; letter-spacing:.18em;
  white-space:nowrap;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.hd__cta:hover{ background:var(--ink); color:var(--paper); }

/* burger ------------------------------------------------------------ */
.hd__burger{
  display:none;
  position:relative;
  width:44px; height:44px;
  padding:0; border:0; background:none; cursor:pointer;
}
.hd__burger span{
  position:absolute; left:9px;
  width:26px; height:1px; background:var(--ink);
  transition:transform .45s var(--ease), opacity .3s var(--ease);
}
.hd__burger span:nth-child(1){ top:19px; }
.hd__burger span:nth-child(2){ top:25px; }
.hd__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(3px) rotate(16deg); }
.hd__burger[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3px) rotate(-16deg); }

/* ============================================================
   DRAWER
   ============================================================ */
.drawer{
  position:fixed; inset:0; z-index:90;
  display:flex; flex-direction:column;
  padding:clamp(4.5rem,14vh,6rem) var(--gut) clamp(1.5rem,5vh,3rem);
  background:var(--paper);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;
  transition:opacity .5s var(--ease);
}
/* 収まるときは中央、あふれたら上詰めでスクロール（iPhone SE などの低い画面対策） */
.drawer__nav{ margin-block:auto; }
.drawer[hidden]{ display:none; }
.drawer.is-open{ opacity:1; }

.drawer__nav{ width:100%; }
.drawer__nav ul{ border-top:1px solid var(--rule); }
.drawer__nav li{ border-bottom:1px solid var(--rule); }
.drawer__nav li a{
  display:flex; align-items:baseline; gap:1rem;
  padding:1.1rem .25rem;
}
.drawer__nav em{
  font-style:normal;
  font-family:var(--latin); font-weight:400;
  font-size:.875rem; letter-spacing:.2em;
  min-width:9.5em;
}
.drawer__nav span{
  font-family:var(--mincho);
  font-size:.75rem; color:var(--ash); letter-spacing:.08em;
}
.drawer__cta{
  display:flex; align-items:center; justify-content:center;
  margin-top:2.5rem; padding:1.25rem;
  background:var(--ink); color:var(--paper);
  font-family:var(--latin); font-size:.8125rem; letter-spacing:.2em;
}

/* ============================================================
   HERO  — vertical (tategaki) catchcopy + live dateline
   ============================================================ */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr 52%;
  align-items:center;
  min-height:100svh;
  padding:7.5rem var(--gut) 5rem;
  gap:var(--gut);
}

.hero__type{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(1.5rem,3vw,3rem);
  flex-direction:row-reverse;
}

.hero__eyebrow{
  writing-mode:vertical-rl;
  font-family:var(--latin); font-weight:300;
  font-size:.625rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ash);
  margin-top:.5rem;
  opacity:0;
  animation:fadeIn 1.2s var(--ease) 1.1s forwards;
}

.hero__catch{
  writing-mode:vertical-rl;
  font-family:var(--mincho);
  font-weight:400;
  font-size:clamp(1.6rem, 3.2vw, 2.75rem);
  line-height:1.85;
  letter-spacing:.22em;
  margin:0;
}
.hero__catch .ln{ display:block; }

/* per-character reveal (chars injected by JS) */
.hero__catch .ch{
  display:inline-block;
  opacity:0;
  transform:translateY(-.6em);
  animation:charIn .9s var(--ease) forwards;
}
@keyframes charIn{ to{ opacity:1; transform:none; } }
@keyframes fadeIn{ to{ opacity:1; } }

.hero__media{
  position:relative;
  height:min(70svh, 700px);
  overflow:hidden;
  background:linear-gradient(160deg,#e3e5e1,#c6cbc7);
}
/* キービジュアルだけカラー。サイト内で色が乗るのはここ1枚だけにする。 */
.hero__media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 22%;   /* 顔と手元を画面の上寄りに置く */
  transform:scale(1.08);
  animation:kvIn 2.4s var(--ease) .1s forwards;
}
@keyframes kvIn{ to{ transform:scale(1); } }

/* dateline ---------------------------------------------------------- */
.dateline{
  position:absolute;
  left:var(--gut); right:var(--gut); bottom:2.25rem;
  display:flex; align-items:center; gap:1rem;
  padding-top:1rem;
  font-family:var(--latin); font-weight:300;
  font-size:.625rem; letter-spacing:.22em;
  color:var(--ink-2);
}
.dateline::before{
  content:""; position:absolute; left:0; top:0;
  width:100%; height:1px; background:var(--rule);
  transform:scaleX(0); transform-origin:left;
  animation:ruleIn 1.6s var(--ease) 1.3s forwards;
}
@keyframes ruleIn{ to{ transform:scaleX(1); } }

.dateline__label{ color:var(--sky); }
.dateline__date{ font-variant-numeric:tabular-nums; }
.dateline__place{ color:var(--ash); }
.dateline__note{
  margin-left:auto;
  font-family:var(--mincho);
  font-size:.75rem; letter-spacing:.14em;
  color:var(--ash);
}

/* ============================================================
   SHARED
   ============================================================ */
.section{ padding:var(--sec) var(--gut); }

.eyebrow{
  font-family:var(--latin); font-weight:400;
  font-size:.625rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--sky);
}

.section__head{ margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.section__title{
  margin-top:.75rem;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2rem);
  letter-spacing:.16em;
}

.link-arrow{
  position:relative;
  display:inline-block;
  padding-bottom:.4rem;
  font-family:var(--mincho);
  font-size:.875rem; letter-spacing:.16em;
}
.link-arrow::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:var(--ink);
  transform-origin:left;
  transition:transform .5s var(--ease);
}
.link-arrow:hover::after{ transform:scaleX(0); transform-origin:right; }
.link-arrow.is-sm{
  font-family:var(--latin);
  font-size:.625rem; letter-spacing:.22em;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:11rem; padding:.9rem 1.5rem;
  border:1px solid var(--ink);
  font-family:var(--mincho); font-size:.8125rem; letter-spacing:.16em;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.btn:hover{ background:var(--ink); color:var(--paper); }

/* reveal on scroll --------------------------------------------------
   .js が付いているときだけ隠す。JS が動かなければ最初から表示される。 */
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   MESSAGE
   ============================================================ */
.message{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(2rem,6vw,7rem);
  justify-content:center;
  background:var(--paper-2);
}
.message .eyebrow{
  writing-mode:vertical-rl;
  letter-spacing:.34em;
  padding-top:.5rem;
}
.message__body{
  max-width:34rem;
  font-family:var(--mincho);
  font-weight:400;
  font-size:clamp(.9375rem, 1.15vw, 1.0625rem);
  line-height:2.5;
  letter-spacing:.1em;
  color:var(--ink-2);
}
.message__body p + p{ margin-top:2.75em; }
.message__body .is-lead{
  font-size:clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height:2.2;
  letter-spacing:.14em;
  color:var(--ink);
}
.message__close{
  padding-top:2.75em;
  border-top:1px solid var(--rule);
  color:var(--ink);
}
.message__sign{
  font-size:clamp(1.0625rem,1.5vw,1.25rem);
  letter-spacing:.18em;
  color:var(--ink);
}
.message__body .message__sign{ margin-top:1.75em; }

/* ============================================================
   CONCEPTS (2x2, hairline cross — parallel, not sequential)
   ============================================================ */
.concepts__intro{
  margin-top:.9rem;
  font-family:var(--mincho);
  font-size:clamp(1.125rem,1.8vw,1.5rem);
  letter-spacing:.16em;
}
.concepts__grid{
  margin-top:clamp(3rem,6vw,5.5rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--rule);
  border-left:1px solid var(--rule);
}
.concept{
  padding:clamp(2.25rem,4vw,3.75rem);
  border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.concept__kicker{
  display:block;
  font-family:var(--latin); font-weight:300;
  font-size:.625rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--sky);
}
.concept__title{
  margin-top:1.1rem;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.25rem,2vw,1.625rem);
  letter-spacing:.14em;
  line-height:1.6;
}
.concept__text{
  margin-top:1.25rem;
  font-size:.875rem;
  line-height:2.1;
  color:var(--ink-2);
}

/* ============================================================
   ABOUT teaser
   ============================================================ */
.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(2rem,7vw,8rem);
}
.about__media{
  overflow:hidden;
  background:linear-gradient(160deg,#e3e5e1,#c6cbc7);
  aspect-ratio:3/2;
}
.about__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.about__media:hover img{ transform:scale(1.03); }

.about__catch{
  margin-top:1.5rem;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.75rem,3.4vw,2.75rem);
  line-height:1.75;
  letter-spacing:.14em;
}
.about__text{
  margin-top:2rem;
  max-width:26rem;
  font-size:.875rem;
  line-height:2.2;
  color:var(--ink-2);
}
.about .link-arrow{ margin-top:2.5rem; }

/* ============================================================
   SALON LIST
   ============================================================ */
.salons__grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(2.5rem,5vw,5rem) clamp(1.5rem,3vw,3.5rem);
}
.salon__media{
  display:block;
  overflow:hidden;
  background:linear-gradient(160deg,#e3e5e1,#c6cbc7);
  aspect-ratio:3/2;
}
.salon__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.salon__media:hover img{ transform:scale(1.04); }

.salon__body{ padding-top:1.75rem; }
.salon__en{
  font-family:var(--latin); font-weight:300;
  font-size:.625rem; letter-spacing:.3em;
  color:var(--ash);
}
.salon__name{
  margin-top:.6rem;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.1875rem,1.6vw,1.375rem);
  letter-spacing:.12em;
  line-height:1.5;
}
.salon__meta{
  margin-top:1rem;
  font-size:.8125rem; line-height:2; color:var(--ink-2);
}
.salon .btn{ margin-top:1.75rem; }

/* ============================================================
   BANNERS
   ============================================================ */
.banners{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.banner{
  position:relative;
  display:block;
  min-height:clamp(15rem,26vw,22rem);
  overflow:hidden;
  background:var(--ink);
}
/* バナーの写真だけモノクロ＋暗く。上に白文字を乗せるための処理。 */
.banner img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) brightness(.62);
  transform:scale(1.02);
  transition:transform 1.8s var(--ease), filter 1.2s var(--ease);
}
.banner:hover img{ transform:scale(1.08); filter:grayscale(1) brightness(.5); }

.banner__inner{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem;
  height:100%; min-height:inherit;
  padding:2rem;
  color:var(--paper);
  text-align:center;
}
.banner__en{
  font-family:var(--latin); font-weight:300;
  font-size:clamp(1.125rem,2vw,1.5rem);
  letter-spacing:.34em;
  padding-left:.34em;
}
.banner__ja{
  display:inline-flex; align-items:center;
  padding-bottom:.35rem;
  border-bottom:1px solid rgba(241,242,239,.4);
  font-family:var(--mincho);
  font-size:.75rem; letter-spacing:.16em;
}

/* ============================================================
   NEWS / BLOG
   ============================================================ */
.posts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(3rem,7vw,8rem);
  background:var(--paper-2);
}
.posts__head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--ink);
}
.posts__list li{ border-bottom:1px solid var(--rule); }
.posts__list a{
  display:grid;
  grid-template-columns:6.5rem 1fr;
  gap:1rem;
  align-items:baseline;
  padding:1.5rem .25rem;
  transition:padding-left .5s var(--ease), color .4s var(--ease);
}
.posts__list a:hover{ padding-left:.9rem; color:var(--sky); }
.posts__list time{
  font-family:var(--latin); font-weight:300;
  font-size:.6875rem; letter-spacing:.16em;
  color:var(--ash);
  font-variant-numeric:tabular-nums;
}
.posts__list span{
  font-family:var(--mincho);
  font-size:.9375rem; letter-spacing:.08em;
  line-height:1.8;
}

/* ============================================================
   CTA
   ============================================================ */
/* ページ内でここだけ色の面になる。差し色の青を薄く敷いた。 */
.cta{
  padding:clamp(5rem,11vw,9rem) var(--gut);
  background:var(--sky-pale);
  color:var(--ink);
  text-align:center;
}
.cta__lead{
  font-family:var(--latin); font-weight:300;
  font-size:.6875rem; letter-spacing:.28em;
  color:var(--sky-deep);
}
.cta__title{
  margin-top:1.75rem;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.5rem);
  line-height:1.85;
  letter-spacing:.14em;
}
.cta__actions{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:1rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
.cta__btn{
  flex:1 1 16rem; max-width:22rem;
  display:inline-flex; flex-direction:column; align-items:center; gap:.75rem;
  padding:1.5rem 2rem;
  border:1px solid var(--ink);
  font-family:var(--latin); font-weight:400;
  font-size:.8125rem; letter-spacing:.2em;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.cta__btn:hover{ background:var(--ink); color:var(--sky-pale); }

/* 予約導線だけ塗りにして、2つのボタンに優先順位をつける */
.cta__btn.is-primary{ background:var(--ink); color:var(--sky-pale); }
.cta__btn.is-primary:hover{ background:transparent; color:var(--ink); }

.cta__btn-sub{
  font-family:var(--gothic); font-weight:300;
  font-size:.6875rem; letter-spacing:.1em;
  opacity:.75;
}

/* 予約・Instagram は行き先が複数あるため、押すと選択肢が開く（ネイティブ details） */
.cta__pick{ position:relative; flex:1 1 16rem; max-width:22rem; text-align:center; }
.cta__pick > summary{
  width:100%; list-style:none; cursor:pointer;
}
.cta__pick > summary::-webkit-details-marker{ display:none; }
.cta__pick > summary::after{
  content:""; display:block; width:.5rem; height:.5rem; margin:.15rem auto 0;
  border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); transition:transform .4s var(--ease);
}
.cta__pick[open] > summary::after{ transform:translateY(.15rem) rotate(-135deg); }

.cta__pick-menu{
  position:absolute; z-index:20;
  top:calc(100% + .75rem); left:50%; transform:translateX(-50%);
  width:max(100%, 18rem); max-width:min(92vw, 24rem);
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--ink);
  text-align:left;
  box-shadow:0 18px 44px rgba(0,0,0,.14);
}
.cta__pick-item{
  display:flex; flex-direction:column; gap:.2rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--rule);
  transition:background .35s var(--ease), color .35s var(--ease);
}
.cta__pick-item:last-child{ border-bottom:0; }
.cta__pick-item:hover{ background:var(--ink); color:var(--paper); }
.cta__pick-name{ font-family:var(--mincho); font-size:.9375rem; letter-spacing:.08em; }
.cta__pick-note{ font-family:var(--gothic); font-size:.6875rem; letter-spacing:.06em; opacity:.7; }

/* ============================================================
   下層ページ共通
   ============================================================ */

/* トップと違い背後にキービジュアルが無いので、最初から地を敷く */
.hd.is-solid{
  background:rgba(241,242,239,.86);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--rule);
}
.hd__list a[aria-current="page"]{ color:var(--sky-deep); }
.hd__list a[aria-current="page"]::after{ transform:scaleX(1); }

.page-hero{
  padding:clamp(9rem,16vw,13rem) var(--gut) clamp(3rem,6vw,5rem);
}
.page-hero__title{
  margin-top:1.25rem;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(2rem,4.6vw,3.5rem);
  line-height:1.7;
  letter-spacing:.14em;
}
.page-hero__lead{
  margin-top:2rem;
  font-family:var(--mincho);
  font-size:clamp(.9375rem,1.3vw,1.125rem);
  letter-spacing:.16em;
  color:var(--ink-2);
}

/* 全幅の帯写真（パララックス）
   画像を枠より 30% 大きく取り、その余白 15%×2 の中だけを JS で動かす。
   JS が動かなければ transform が付かず、中央に収まったまま普通に表示される。 */
.band{
  position:relative;
  margin:0;
  height:clamp(16rem,38vw,32rem);
  overflow:hidden;
  background:linear-gradient(160deg,#e3e5e1,#c6cbc7);
}
.band img{
  position:absolute;
  top:-15%; left:0;
  width:100%; height:130%;
  object-fit:cover;
  will-change:transform;
}

/* ============================================================
   ABOUT — 導入
   ============================================================ */
.creed-lead{
  background:var(--paper-2);
  text-align:center;
}
.creed-lead__text{
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.375rem,2.8vw,2.125rem);
  line-height:2;
  letter-spacing:.16em;
}
.creed-lead__sub{
  margin-top:2.5rem;
  font-size:clamp(.8125rem,1vw,.9375rem);
  line-height:2.4;
  color:var(--ink-2);
}

/* ============================================================
   ABOUT — 代表プロフィール
   ============================================================ */
.profile{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(2rem,6vw,6rem);
}
/* 写真が横位置。窓の抜けと緑を切り落とさないよう枠を写真に合わせている */
.profile__media{
  overflow:hidden;
  aspect-ratio:3/2;
  background:linear-gradient(160deg,#e3e5e1,#c6cbc7);
}
.profile__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.profile__media:hover img{ transform:scale(1.03); }

.profile__name{
  margin-top:1.25rem;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.75rem,3vw,2.375rem);
  letter-spacing:.16em;
  line-height:1.5;
}
.profile__ruby{
  display:block;
  margin-top:.9rem;
  font-family:var(--gothic); font-weight:300;
  font-size:.75rem; letter-spacing:.22em;
  color:var(--ash);
}
.profile__role{
  margin-top:1.5rem;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--mincho);
  font-size:.875rem; letter-spacing:.14em;
  color:var(--ink-2);
}
.profile__text{
  margin-top:1.75rem;
  font-size:.875rem;
  line-height:2.2;
  color:var(--ink-2);
}

/* ============================================================
   ABOUT — ストーリー年表
   関心の輪が外へ広がっていく話なので、点の直径を段階的に大きくして
   その広がり自体を目に見えるようにしている（--dot で指定）
   ============================================================ */
.story__intro{
  margin-top:1.75rem;
  font-size:.875rem;
  line-height:2.2;
  color:var(--ink-2);
}
.story__list{ list-style:none; margin:0; padding:0; }
.story__item{
  display:grid;
  grid-template-columns:10rem minmax(0,1fr);
  gap:0 clamp(1rem,2vw,2rem);
}
.story__year{
  padding-top:.1rem;
  font-family:var(--latin); font-weight:300;
  font-size:.75rem; letter-spacing:.18em;
  color:var(--ash);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.story__body{
  position:relative;
  padding:0 0 clamp(2.75rem,5vw,4rem) clamp(1.75rem,3vw,2.75rem);
  border-left:1px solid var(--rule);
}
.story__item:last-child .story__body{ padding-bottom:0; border-left-color:transparent; }
.story__dot{
  position:absolute; left:0; top:.35em;
  width:var(--dot); height:var(--dot);
  margin-left:calc(var(--dot) / -2);
  border-radius:50%;
  background:var(--sky);
}
.story__for{
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.125rem,1.9vw,1.5rem);
  letter-spacing:.14em;
  line-height:1.6;
}
.story__note{
  margin-top:.9rem;
  font-size:.875rem;
  line-height:2.1;
  color:var(--ink-2);
}

/* ============================================================
   ABOUT — 理念（6つは並列。連番は振らない）
   ============================================================ */
.creed{ background:var(--paper-2); }
.creed__list{ margin:0; border-top:1px solid var(--rule); }
.creed__item{
  display:grid;
  grid-template-columns:14rem minmax(0,1fr);
  gap:0 clamp(1.5rem,4vw,4rem);
  padding:clamp(2.25rem,4vw,3.25rem) 0;
  border-bottom:1px solid var(--rule);
}
.creed__label{ margin:0; }
.creed__en{
  display:block;
  font-family:var(--latin); font-weight:400;
  font-size:.75rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--sky-deep);
}
.creed__ja{
  display:block;
  margin-top:.65rem;
  font-family:var(--mincho);
  font-size:.75rem; letter-spacing:.16em;
  color:var(--ash);
}
.creed__body{ margin:0; }
.creed__head{
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.125rem,1.9vw,1.5rem);
  line-height:1.75;
  letter-spacing:.12em;
}
.creed__text{
  margin-top:1.25rem;
  font-size:.875rem;
  line-height:2.2;
  color:var(--ink-2);
}

/* ============================================================
   ABOUT — 会社概要
   ============================================================ */
.company__list{ margin:0; border-top:1px solid var(--rule); }
.company__row{
  display:grid;
  grid-template-columns:14rem minmax(0,1fr);
  gap:0 clamp(1.5rem,4vw,4rem);
  padding:1.5rem 0;
  border-bottom:1px solid var(--rule);
}
.company__row dt{
  font-family:var(--latin); font-weight:400;
  font-size:.75rem; letter-spacing:.16em;
  color:var(--ash);
  padding-top:.15rem;
}
.company__row dd{
  margin:0;
  font-family:var(--mincho);
  font-size:.9375rem; letter-spacing:.1em;
  line-height:1.9;
}
.company__link{ display:block; margin-top:.9rem; }

/* ============================================================
   SALON — 店舗詳細（salon.html）
   ============================================================ */
.shop{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(2rem,6vw,6rem);
  scroll-margin-top:7rem;   /* 固定ヘッダーにアンカーが隠れないように */
}
.shop.is-rev .shop__media{ order:2; }
.shop__media{
  overflow:hidden;
  aspect-ratio:3/2;
  background:linear-gradient(160deg,#e3e5e1,#c6cbc7);
}
.shop__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.6s var(--ease);
}
.shop__media:hover img{ transform:scale(1.03); }
.shop__en{
  font-family:var(--latin); font-weight:300;
  font-size:.625rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ash);
}
.shop__name{
  margin-top:.9rem;
  font-family:var(--latin); font-weight:400;
  font-size:clamp(1.75rem,3vw,2.5rem);
  letter-spacing:.18em;
  line-height:1.3;
}
.shop__tag{
  margin-top:1.5rem;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.125rem,1.8vw,1.5rem);
  letter-spacing:.12em; line-height:1.9;
}
.shop__text{
  margin-top:1.5rem;
  font-size:.875rem; line-height:2.2;
  color:var(--ink-2);
}
.shop__meta{
  margin:1.75rem 0 0;
  border-top:1px solid var(--rule);
}
.shop__meta > div{
  display:grid;
  grid-template-columns:6.5rem minmax(0,1fr);
  gap:0 1.5rem;
  padding:.9rem 0;
  border-bottom:1px solid var(--rule);
}
.shop__meta dt{
  font-family:var(--latin); font-weight:400;
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ash);
  padding-top:.3rem;
}
.shop__meta dd{ margin:0; font-size:.8125rem; line-height:1.9; color:var(--ink-2); }
.shop__actions{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center;
  margin-top:1.75rem;
}

/* ============================================================
   ACCESS — 地図（2拠点）
   ============================================================ */
.access{ background:var(--paper-2); scroll-margin-top:5rem; }
.access__loc{ scroll-margin-top:7rem; }
.access__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
}
.access__map{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--rule);
}
.access__map iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
  filter:grayscale(1) contrast(1.05);  /* モノクロ基調に合わせる。操作はそのまま可能 */
}
.access__bldg{
  margin-top:1.5rem;
  font-family:var(--mincho); font-weight:400;
  font-size:1.25rem; letter-spacing:.14em;
}
.access__addr{
  margin-top:.75rem;
  font-size:.8125rem; line-height:1.9; color:var(--ink-2);
}
.access__stores{
  margin-top:.5rem;
  font-family:var(--mincho);
  font-size:.8125rem; letter-spacing:.1em;
  color:var(--sky-deep);
}
.access__loc .link-arrow{ margin-top:1.25rem; }

/* ============================================================
   NEWS / BLOG — アーカイブ（news.html / blog.html）
   WordPress テーマ化を想定：1行 = ループ1周（have_posts）
   ============================================================ */
/* WordPress はアーカイブで <body class="archive"> を付けるため、section に限定する */
.section.archive{ max-width:72rem; margin-inline:auto; }
.archive__list{ border-top:1px solid var(--rule); }
.archive__item a{
  display:grid;
  grid-template-columns:7rem 8rem minmax(0,1fr);
  gap:1.5rem; align-items:baseline;
  padding:1.6rem .15rem;
  border-bottom:1px solid var(--rule);
  transition:padding-left .5s var(--ease), color .4s var(--ease);
}
.archive__item a:hover{ padding-left:.9rem; color:var(--sky); }
.archive__date{
  grid-column:1;
  font-family:var(--latin); font-weight:300;
  font-size:.6875rem; letter-spacing:.16em;
  color:var(--ash);
  font-variant-numeric:tabular-nums;
}
.archive__cat{
  grid-column:2;
  justify-self:start;
  padding:.2rem .85rem;
  border:1px solid var(--rule);
  font-family:var(--mincho);
  font-size:.6875rem; letter-spacing:.1em;
  color:var(--sky-deep);
  white-space:nowrap;
}
/* カテゴリーが無い投稿でもタイトルは常に3列目（幅が狭くならないように） */
.archive__title{
  grid-column:3;
  font-family:var(--mincho);
  font-size:.9375rem; line-height:1.9; letter-spacing:.04em;
}

/* ページネーション（静的：a/span 直書き ／ WP：paginate_links・WP-PageNavi） */
.pager{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.6rem;
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
/* paginate_links( type=list ) や WP-PageNavi が <ul> を出力しても横並びにする */
.pager ul,
.pager .wp-pagenavi{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.6rem; list-style:none; margin:0; padding:0;
}
.pager li{ margin:0; list-style:none; }
.pager a,
.pager span{
  min-width:2.75rem; height:2.75rem;
  display:grid; place-items:center;
  padding:0 .75rem;
  border:1px solid var(--rule);
  font-family:var(--latin); font-weight:300;
  font-size:.8125rem; letter-spacing:.1em;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.pager a:hover{ border-color:var(--ink); }
/* 現在ページ：静的 .is-current ／ WP .current・.on（PageNavi） */
.pager .is-current,
.pager .current,
.pager .page-numbers.current,
.pager .wp-pagenavi .current{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.pager .is-disabled{ color:var(--ash); pointer-events:none; }
/* 省略記号（…）は枠なし */
.pager .dots,
.pager .page-numbers.dots,
.pager .wp-pagenavi .pages{ border-color:transparent; }

/* ============================================================
   NEWS / BLOG — 記事ページ（single）
   .article__body の中は the_content() が吐く素のタグを要素で当てる
   ============================================================ */
.article{ max-width:46rem; margin-inline:auto; }
.article__head{
  padding-bottom:clamp(2rem,4vw,3rem);
  border-bottom:1px solid var(--rule);
}
.article__meta{ display:flex; align-items:center; gap:1rem; }
.article__date{
  font-family:var(--latin); font-weight:300;
  font-size:.75rem; letter-spacing:.16em;
  color:var(--ash);
  font-variant-numeric:tabular-nums;
}
.article__cat{
  padding:.2rem .85rem;
  border:1px solid var(--rule);
  font-family:var(--mincho);
  font-size:.6875rem; letter-spacing:.1em;
  color:var(--sky-deep);
}
.article__title{
  margin-top:1.5rem;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.5rem,3vw,2.25rem);
  line-height:1.7; letter-spacing:.1em;
}
.article__body{ padding-top:clamp(2rem,4vw,3rem); }
.article__body p{
  margin:0 0 1.9em;
  font-size:.9375rem; line-height:2.3; color:var(--ink-2);
}
.article__body h2{
  margin:2.8em 0 1.2em;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--rule);
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.25rem,2vw,1.5rem);
  line-height:1.7; letter-spacing:.1em;
  color:var(--ink);
}
.article__body h3{
  margin:2.2em 0 1em;
  font-family:var(--mincho); font-weight:600;
  font-size:1.0625rem; letter-spacing:.08em; color:var(--ink);
}
.article__body ul,
.article__body ol{
  margin:0 0 1.9em; padding-left:1.4em;
  font-size:.9375rem; line-height:2.2; color:var(--ink-2);
}
.article__body ul{ list-style:disc; }
.article__body li + li{ margin-top:.4em; }
.article__body blockquote{
  margin:2.2em 0; padding:1.25rem 1.75rem;
  border-left:2px solid var(--sky);
  background:var(--paper-2);
  font-family:var(--mincho);
  font-size:.9375rem; line-height:2.2; color:var(--ink-2);
}
.article__body blockquote p:last-child{ margin-bottom:0; }
.article__body a{
  color:var(--sky-deep);
  text-decoration:underline; text-underline-offset:4px;
}
.article__body img{ margin:2.2em 0; }
.article__body strong{ font-weight:500; color:var(--ink); }

/* 前後記事ナビ（WP: previous_post_link / next_post_link） */
.article__nav{
  display:grid; grid-template-columns:1fr 1fr;
  margin-top:clamp(3rem,6vw,4rem);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.article__nav a{
  display:flex; flex-direction:column; gap:.5rem;
  padding:1.5rem 1.25rem;
  transition:background .4s var(--ease);
}
.article__nav a:hover{ background:var(--paper-2); }
.article__nav .is-next{ text-align:right; border-left:1px solid var(--rule); }
.article__nav-label{
  font-family:var(--latin); font-weight:300;
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--sky-deep);
}
.article__nav-title{
  font-family:var(--mincho);
  font-size:.8125rem; line-height:1.8; color:var(--ink-2);
}
.article__back{ text-align:center; margin-top:clamp(2.5rem,5vw,3.5rem); }

/* ============================================================
   CONTACT（contact.html）
   WordPress の Contact Form 7 でテーマ化する前提の静的モック。
   input の name は CF7 のショートコード（[text* your-name] 等）に対応。
   ============================================================ */
.contact{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2.5rem,6vw,6rem);
  align-items:start;
}
.contact__lead{ font-size:.9375rem; line-height:2.2; color:var(--ink-2); }
.contact__info{ margin-top:2rem; border-top:1px solid var(--rule); }
.contact__row{
  display:grid; grid-template-columns:5.5rem minmax(0,1fr);
  gap:0 1rem; padding:1.1rem 0;
  border-bottom:1px solid var(--rule);
}
.contact__row dt{
  font-family:var(--latin); font-weight:300;
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ash); padding-top:.3rem;
}
.contact__row dd{ margin:0; font-size:.875rem; line-height:1.9; }
.contact__row a{ color:var(--sky-deep); text-underline-offset:3px; }
.contact__row a:hover{ text-decoration:underline; }
.contact__notes{ margin-top:1.75rem; font-size:.75rem; line-height:2; color:var(--ash); }
.contact__notes li{ list-style:none; text-indent:-1em; padding-left:1em; }

.form__reqnote{ font-size:.75rem; letter-spacing:.06em; color:var(--ash); margin-bottom:1.75rem; }
.field{ margin-bottom:1.5rem; }
.field > label{
  display:block; margin-bottom:.6rem;
  font-family:var(--mincho); font-size:.8125rem; letter-spacing:.08em;
}
.req, .opt{
  display:inline-block; margin-left:.5rem; padding:.1rem .55rem;
  font-family:var(--latin); font-weight:300;
  font-size:.5625rem; letter-spacing:.14em; text-transform:uppercase;
  vertical-align:.15em;
}
.req{ background:var(--ink); color:var(--paper); }
.opt{ border:1px solid var(--rule); color:var(--ash); }
.field input,
.field textarea{
  width:100%; padding:.9rem 1rem;
  border:1px solid var(--rule); background:var(--paper-2); color:var(--ink);
  font-family:var(--gothic); font-size:.9375rem; line-height:1.8; letter-spacing:.04em;
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field textarea{ min-height:11rem; resize:vertical; }
.field input:focus,
.field textarea:focus{ outline:none; border-color:var(--sky); background:var(--paper); }
.field input::placeholder,
.field textarea::placeholder{ color:var(--ash); }
.form__foot{ margin-top:2.25rem; }
.form__note{ font-size:.75rem; line-height:1.9; color:var(--ash); margin-bottom:1.25rem; }
.btn:disabled,
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.ft{
  display:grid;
  grid-template-columns:1fr auto;
  gap:clamp(2.5rem,6vw,6rem);
  padding:clamp(4rem,8vw,6rem) var(--gut) 2.5rem;
}
.ft__logo{
  font-family:var(--latin); font-weight:400;
  font-size:1.125rem; letter-spacing:.34em;
}
.ft__tag{
  margin-top:1.25rem;
  font-family:var(--mincho);
  font-size:.8125rem; letter-spacing:.14em;
  color:var(--ink-2);
}
.ft__nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem);
  font-family:var(--latin); font-weight:300;
  font-size:.6875rem; letter-spacing:.18em;
}
.ft__nav li + li{ margin-top:1rem; }
.ft__nav a:hover{ color:var(--sky); }

/* footer: STYLE / STAFF の2択グループ */
.ft__grouplabel{ display:block; color:var(--ash); }
.ft__sub{ margin-top:.7rem; padding-left:.9rem; border-left:1px solid var(--rule); }
.ft__sub li + li{ margin-top:.6rem; }

.ft__copy{
  grid-column:1 / -1;
  padding-top:2.5rem;
  border-top:1px solid var(--rule);
  font-family:var(--latin); font-weight:300;
  font-size:.625rem; letter-spacing:.2em;
  color:var(--ash);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hd__nav{ display:none; }
  .hd__burger{ display:block; }

  .hero{
    grid-template-columns:1fr;
    align-content:center;
    gap:2rem;
    padding-top:7rem;
  }
  .hero__type{ order:2; justify-content:flex-start; height:auto; }
  .hero__catch{ font-size:clamp(1.5rem,6vw,2.25rem); }
  .hero__media{ order:1; height:min(42svh,460px); }

  .message{ grid-template-columns:1fr; gap:2.5rem; }
  .message .eyebrow{ writing-mode:horizontal-tb; }
  .message__body{ max-width:none; }

  .about{ grid-template-columns:1fr; gap:3rem; }
  .about__text{ max-width:none; }

  .salons__grid{ grid-template-columns:1fr; gap:3.5rem; }
  .banners{ grid-template-columns:1fr; }
  .posts{ grid-template-columns:1fr; }

  .ft{ grid-template-columns:1fr; }
  .ft__nav{ grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* 下層ページ */
  .profile{ grid-template-columns:1fr; gap:2.5rem; }
  .shop{ grid-template-columns:1fr; gap:2.5rem; }
  .shop.is-rev .shop__media{ order:0; }
  .access__grid{ grid-template-columns:1fr; gap:3.5rem; }

  /* news / blog */
  .archive__item a{ grid-template-columns:1fr; gap:.5rem; }
  .archive__date,
  .archive__cat,
  .archive__title{ grid-column:auto; }
  .article__nav{ grid-template-columns:1fr; }
  .article__nav .is-next{ text-align:left; border-left:0; border-top:1px solid var(--rule); }

  /* contact */
  .contact{ grid-template-columns:1fr; gap:3rem; }

  .creed__item,
  .company__row{ grid-template-columns:1fr; gap:1rem; }
  .creed__label{ display:flex; align-items:baseline; gap:1rem; }
  .creed__ja{ margin-top:0; }
}

@media (max-width:640px){
  .concepts__grid{ grid-template-columns:1fr; }

  /* 年表：年を上に出して、点と縦線は本文側に残す */
  .story__item{ grid-template-columns:1fr; }
  .story__year{ padding-left:clamp(1.75rem,3vw,2.75rem); padding-bottom:.6rem; }
  .dateline{ flex-wrap:wrap; gap:.6rem 1rem; }
  .dateline__note{ margin-left:0; flex-basis:100%; }
  .posts__list a{ grid-template-columns:1fr; gap:.5rem; }
  .cta__btn{ width:100%; padding-inline:1.5rem; }
  .cta__pick{ flex-basis:100%; max-width:none; }
  .btn{ width:100%; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .band img{ transform:none !important; }
  .hero__catch .ch,
  .hero__eyebrow{ opacity:1; transform:none; }
  .hero__media img{ transform:none; }
  .dateline::before{ transform:scaleX(1); }
}

/* ============================================================
   文章修正指示書（A版）対応で追加したスタイル
   ============================================================ */

/* No.14 — CTA 見出しを少し大きく */
.cta__title.is-lg{ font-size:clamp(1.75rem,3.8vw,3rem); }

/* No.3 — CHIKI の営業日の補足（トップ店舗一覧・店舗詳細） */
.salon__note,
.shop__note{
  display:inline-block;
  margin-top:.5rem;
  font-size:.75rem; line-height:1.8; letter-spacing:.04em;
  color:var(--ash);
}
.salon__note a,
.shop__note a{ color:var(--sky-deep); text-decoration:underline; text-underline-offset:2px; }

/* No.10 — トップ Message を4つのポイントに集約 */
.message__points{
  display:flex; flex-direction:column;
  gap:clamp(2.25rem,4vw,3.25rem);
}
.message__point-title{
  margin:0;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.1875rem,2vw,1.625rem);
  line-height:1.75; letter-spacing:.08em; color:var(--ink);
  text-wrap:balance;
}
.message__point-text{
  margin:1rem 0 0;
  font-family:var(--gothic);
  font-size:.875rem; line-height:2.1; letter-spacing:.06em; color:var(--ink-2);
}

/* No.12 — トップ4カード：アイコン枠＋店舗リンク */
.concept{ display:flex; flex-direction:column; align-items:flex-start; }
.concept__icon{
  height:clamp(3rem,5vw,3.75rem); width:auto; margin-bottom:1.5rem; flex:0 0 auto;
  object-fit:contain;
  /* 白背景の線画アイコンを地色になじませる */
  mix-blend-mode:multiply;
}
.concept__link{ margin-top:auto; padding-top:1.5rem; }

/* No.11 — ABOUT Message（トップから移設・見出しで読ませる） */
.about-message{ background:var(--paper-2); }
.about-message__body{
  max-width:40rem; margin-inline:auto;
  display:flex; flex-direction:column;
  gap:clamp(2.75rem,5vw,4rem);
}
.about-message__lead{
  margin:0 0 1.25rem;
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(1.25rem,2.4vw,1.875rem);
  line-height:1.7; letter-spacing:.1em; color:var(--ink);
}
.about-message__block p{
  margin:0;
  font-family:var(--mincho);
  font-size:clamp(.9375rem,1.1vw,1.0625rem);
  line-height:2.4; letter-spacing:.08em; color:var(--ink-2);
}
.about-message__block p + p{ margin-top:1.75em; }
.about-message__block p.about-message__closing{
  margin:0;
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(1.25rem,2.4vw,1.875rem);
  line-height:1.7; letter-spacing:.14em; color:var(--ink);
}

/* No.20 — ABOUT Core Values */
.core-values__body{ max-width:40rem; margin-top:clamp(1.5rem,3vw,2.5rem); }
.core-values__lead{
  margin:0;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.125rem,1.8vw,1.5rem);
  line-height:1.9; letter-spacing:.12em; color:var(--ink);
}
.core-values__body p{
  font-family:var(--gothic);
  font-size:.9375rem; line-height:2.2; letter-spacing:.06em; color:var(--ink-2);
}
.core-values__body p + p{ margin-top:1.5em; }

/* No.2 — CONTACT ページ */
/* 旧テンプレートの .contact（2カラムgrid）を打ち消し、通常のセクションに戻す */
.contact{ display:block; }
.contact__grid{
  display:grid; grid-template-columns:1fr; align-items:start;
  gap:clamp(1.5rem,3vw,2.5rem);
  max-width:46rem; margin-inline:auto;
}
/* PC：2カラム。各列は現在と同じ約46rem幅まで（広い画面ほど現状幅に近づく） */
@media (min-width:64rem){
  .contact__grid{
    grid-template-columns:repeat(2, minmax(0, 46rem));
    max-width:calc(92rem + 2.5rem);
  }
}
.contact__card{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(2rem,4vw,3.25rem);
  border:1px solid var(--rule);
}
.contact__title{
  margin:1rem 0 0;
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(1.25rem,2.2vw,1.75rem);
  letter-spacing:.12em; line-height:1.6;
}
.contact__text{
  margin:1.5rem 0 0;
  font-size:.875rem; line-height:2.1; letter-spacing:.04em; color:var(--ink-2);
}
.contact__card > .btn,
.contact__actions{ margin-top:2rem; }
.contact__actions{
  display:flex; flex-direction:column; align-items:flex-start; gap:1.1rem;
}
.contact__actions .btn{ margin-top:0; }