@charset "UTF-8";
/*
Theme Name: Salon de Noble
Theme URI: https://sisola.jp/
Author: SiSoLa Design
Description: Salon de Noble（パリス信子）専用テーマ。トップページ1枚構成。
Version: 1.16.2
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: salon-de-noble
*/

/* =========================================
   Salon de Noble  デザインカンプ
   ========================================= */

/* 2026-08-09 いただいたロゴを使うことになったので、色はロゴの実測値に統一した。
   ロゴは背景（クリーム）と影が画像に焼き込まれていて切り抜けないため、
   ページの地をロゴの地と同じ #f4efea にそろえて、四角が見えないようにしている。
   ゴールドと文字色もロゴ画像から吸い取った値（金具 #c2a476／店名 #725f40）。 */
:root {
  --beige:      #f4efea;  /* ヒーロー・ベース＝ロゴの地の色 */
  --beige-dark: #f4efea;  /* CONTACT左（ロゴが乗るので同色） */
  --pink:       #faf5f1;  /* ABOUT（葉の影の画像と同じ地の色） */
  --pink-lt:    #fdfaf8;  /* VOICE */
  --pink-deep:  #2b2521;  /* CONTACT（黒に振った） */
  --white:      #fdfaf8;  /* SERVICE */
  --bronze:     #c2a476;
  --bronze-dk:  #725f40;
  --text:       #584a42;
  --text-lt:    #8b7d74;
  --serif-en:   "Cormorant Garamond", serif;
  --serif-jp:   "Shippori Mincho", "Yu Mincho", "游明朝", serif;
  --script:     "Cormorant Infant", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--serif-jp);
  color: var(--text);
  background: var(--white);
  line-height: 2;
  font-size: 17px;
  letter-spacing: .06em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ---------- 共通パーツ ---------- */
.en-label {
  font-family: var(--serif-en);
  font-size: 12.5px;
  letter-spacing: .42em;
  /* 字間を大きく開けて墨色にし、下にロゴと同じゴールドの細い罫を敷く。
     コントラストは 3.50:1 → 13.2:1 になった */
  color: #2b2521;
  display: inline-block;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.en-label::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 34px; height: 1px;
  background: var(--bronze);
}
/* 中央寄せの見出しでは罫も中央に */
.vision-body .en-label::after,
.works-head .en-label::after,
.service-head .en-label::after,
.event-head .en-label::after,
.lesson-head .en-label::after,
.voice-head .en-label::after { left: 50%; transform: translateX(-50%); }
.sec-title {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.85;
  letter-spacing: .13em;
  color: #2b2521;
  margin-bottom: 26px;
}
.lead {
  font-size: 19px;
  line-height: 2.1;
  margin-bottom: 18px;
  color: #695950;
}
.body-text {
  font-size: 17px;
  line-height: 2.3;
  color: var(--text-lt);
}
.body-text + .body-text { margin-top: 1.6em; }
.arrow {
  display: inline-block;
  width: 34px; height: 1px;
  background: currentColor;
  position: relative;
  margin-left: 16px;
  vertical-align: middle;
  transition: width .35s ease;
}
.arrow::after {
  content: "";
  position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
/* 枠線ボタン。今は各セクションから外しているが、下層ページで使うので残す */
.btn-line {
  display: inline-flex;
  align-items: center;
  margin-top: 38px;
  padding: 15px 30px;
  border: 1px solid var(--bronze);
  color: var(--bronze-dk);
  font-size: 15px;
  letter-spacing: .16em;
  line-height: 1;
  transition: background .35s ease, color .35s ease;
}
.btn-line:hover { background: var(--bronze); color: #fff; }
.btn-line:hover .arrow { width: 46px; }

.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  margin-top: 30px;
  padding: 20px 34px;
  border: 1px solid rgba(255,255,255,.55);
  color: #fff;
  font-size: 16px;
  letter-spacing: .2em;
  line-height: 1;
  transition: background .35s ease, color .35s ease;
}
.btn-solid:hover { background: #fff; color: #2b2521; }
.btn-solid:hover .arrow { width: 46px; }

/* LINEとInstagramのボタンを縦に積む。並びの余白はここで持つ。
   inline-flex＋stretch にすると、文字数が違っても2つの幅が広い方にそろう */
.btn-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 30px;
}
.btn-stack .btn-solid { margin-top: 0; }

/* ---------- ロゴ（Illustratorで作ったN＋店名。ヘッダーとCONTACTで同じ大きさ） ---------- */
.logo { margin-right: auto; }
.logo, .contact-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--bronze-dk);
}
/* いただいたロゴ画像。地の色がページと同じなので、画像の四角い縁は見えない。
   店名まで入った一式なので、下に文字を重ねる必要はない。
   ヘッダーに置くのは下層ページだけ（トップはキャッチの上に大きく出す） */
.logo img { display: block; height: 104px; width: auto; }
.contact-logo img { display: block; height: 220px; width: auto; }
.logo-name { display: none; }

/* ---------- ヘッダー ---------- */
.header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  /* トップはヘッダーにロゴが無い（キャッチの上に置く）ので、
     space-between だとナビが左に寄ってしまう。右端固定にして、
     ロゴがある下層ページだけロゴを左に押し出す */
  justify-content: flex-end;
  padding: 34px 52px 0;
}
.gnav ul { display: flex; gap: 30px; padding-top: 12px; }
.gnav a {
  font-family: var(--serif-en);
  font-size: 14px;
  letter-spacing: .2em;
  /* ヒーローの写真を下ろしたので、ナビは常にクリーム地の上に乗る。
     白文字だと消えるため墨色にした（下層ページでも同じ理由で正しくなる） */
  color: #2b2521;
  position: relative;
  padding-bottom: 4px;
}
.gnav a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--bronze);
  transition: width .35s ease;
}
.gnav a:hover::after { width: 100%; }

.menu-btn { display: none; background: none; border: 0; }

/* ---------- HERO ---------- */
/* 2026-08-09 人物写真をABOUTへ下ろし、ヒーローはロゴ・キャッチ・署名だけの
   中央寄せ1枚板にした。左右2分割をやめたので grid ではなく flex で中央に置く */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(540px, 46vw, 780px);
  background: var(--beige);
}
.hero-inner {
  text-align: center;
  width: 100%;
  padding: clamp(70px, 6.5vw, 100px) 6%;
}

/* 中央に大きく置くロゴ。
   画像の余白は上下左右10pxしかないので、CSSの余白がそのまま見た目になる */
.hero-logo {
  align-items: center;
  /* ロゴが大きいので、見出しが近いと窮屈に見える。
     9/17は30〜68pxにしたが「今の倍以上あけたものを見たい」とのことで、
     画面幅にあわせて62〜140pxまで広げた（1440px幅で約135px） */
  margin-bottom: clamp(62px, 9.4vw, 140px);
}
.hero-logo img { height: clamp(285px, 33.8vw, 486px); }
.hero-title {
  font-weight: 400;
  /* 幅なりに縮める（1440px以上では46px） */
  font-size: clamp(32px, 3.5vw, 50px);
  line-height: 1.75;
  letter-spacing: .06em;
  color: #2b2521;
}
/* PCは1行。SPは幅が足りず必ず折り返すので、
   2つの塊に分けて「人生を変える／「奇跡の一着」を選びます」で切れるようにしている */
.hero-title span { display: inline-block; }
.hero-sign {
  font-size: 23px;
  letter-spacing: .2em;
  color: #2b2521;
  /* 全体が中央組みになったので署名も中央。字間ぶん右に寄るのを戻す */
  text-align: center;
  text-indent: .2em;
  margin-top: 44px;
}
.hero-scroll {
  position: absolute;
  right: 34px; bottom: 0;
  writing-mode: vertical-rl;
  font-family: var(--serif-en);
  font-size: 12px;
  letter-spacing: .3em;
  /* クリーム地に変わったので白から薄墨へ */
  color: #7a6c63;
  padding-bottom: 96px;
}
.hero-scroll::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 1px; height: 76px;
  background: rgba(139,125,116,.55);
}

/* ---------- ABOUT ---------- */
/* 香水の静物写真と葉の影を外したので、文章と人物写真の2列。
   ORIGIN と同じ 59:41 の配分にそろえている */
.about {
  display: grid;
  grid-template-columns: 59% 41%;
  background: var(--pink);
}
/* ヒーローから下ろした人物写真。上に白いナビが乗らなくなったので暗い帯は不要 */
.about-portrait { min-height: 560px; overflow: hidden; }
.about-portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
/* 短い行の文章なので、左端に寄せきらず塊ごと列の中央に置く（ORIGIN と同じ考え方） */
.about-body {
  align-self: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 100px 6%;
}

/* ---------- VISION（My vision） ---------- */
/* 写真を持たない宣言だけの帯。左右に散らすものが無いので幅を絞って中央に置く */
.vision {
  background: var(--white);
  padding: 120px 8%;
}
.vision-body {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
/* 見出しとリード文の間だけ、他の帯と同じ間隔まで開ける */
.vision-body .lead { margin-bottom: 34px; }

/* ---------- ORIGIN ---------- */
/* FLOWから移した写真を右に置き、ABOUTの左右を反転させた型にしている */
.origin {
  display: grid;
  grid-template-columns: 59% 41%;
  background: var(--white);
}
.origin-body {
  align-self: center;
  /* 短い行の文章なので、左端に寄せきらず塊ごと列の中央に置く */
  max-width: 640px;
  margin: 0 auto;
  /* 写真の天井を切った（1180→1010px）ぶん、上下を100px→78pxに詰めている。
     文章の高さ412px＋78×2＝568pxで、1440px幅なら写真がちょうど切れずに収まる */
  padding: 78px 6%;
}
.origin-photo { min-height: 520px; overflow: hidden; }
.origin-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 広い画面では縦が余って切れるので、頭が欠けないよう上寄りで切る */
  object-position: 38% 20%;
}

/* ---------- WORKS ---------- */
.works {
  background: var(--beige);
  padding: 110px 8% 120px;
}
.works-head {
  max-width: 700px;
  margin: 0 auto 62px;
  text-align: center;
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.works-photo { aspect-ratio: 3 / 4; overflow: hidden; }
.works-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- SERVICE ---------- */
/* 3列×2段で並べるため、見出しは左に置かず上に出して中央寄せにしている */
.service {
  /* VISION（白）と EVENT（白）に挟まれたので、地色を入れ替えて帯を交互にした */
  background: var(--beige);
  padding: 120px 8%;
}
.service-head {
  max-width: 700px;
  margin: 0 auto 62px;
  text-align: center;
}
.service-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
}
/* SERVICE は4枚。1段に並べたいので、この帯だけ4列にする（EVENTの3枚は3列のまま） */
.service .service-list { grid-template-columns: repeat(4, 1fr); gap: 40px 24px; }
/* 1枚が細くなり説明文の行数がそろわないので、値段だけは下端でそろえる */
.service-item {
  display: flex;
  flex-direction: column;
}
.service-item .price { margin-top: auto; }
.service-item .item-photo {
  aspect-ratio: 4 / 3;
  margin-bottom: 22px;
  overflow: hidden;
}
.item-photo img { width: 100%; height: 100%; object-fit: cover; }
.service-item h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .06em;
  color: #5f5049;
  margin-bottom: 10px;
  line-height: 1.7;
  /* 1行のものと2行のものが混ざるので、説明文の頭をそろえるため2行ぶん確保する */
  min-height: 3.4em;
}
.service-item p {
  font-size: 16px;
  line-height: 2;
  color: var(--text-lt);
}
.price {
  font-family: var(--serif-en);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 28px !important;
  letter-spacing: .06em;
  color: var(--bronze) !important;
  margin-top: 12px;
  line-height: 1.5;
}
.price span {
  font-family: var(--serif-jp);
  font-size: 15px;
  margin-left: 3px;
}
.price .unit {
  margin: 0 8px 0 0;
  font-size: 15px;
}

/* ---------- EVENT（SERVICEと同じ型・中身は .service-list を使い回す） ---------- */
.event {
  background: var(--white);
  padding: 120px 8%;
}
.event-head {
  max-width: 700px;
  margin: 0 auto 62px;
  text-align: center;
}

/* ---------- LESSON（SERVICEと同じ型） ---------- */
.lesson {
  background: var(--beige);
  padding: 120px 8%;
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 60px;
}
.lesson-head { padding-top: 6px; }
/* 3枚を縦に並べる。1枚が横長になるので、中は番号を左・文言を右の横組みにしている */
.lesson-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
/* 写真がないので、番号を振った細枠のカードにしている */
.lesson-item {
  border: 1px solid rgba(176,139,120,.32);
  background: rgba(255,255,255,.45);
  padding: 30px 38px;
  display: grid;
  grid-template-columns: 76px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
}
/* 番号は2行ぶんにまたがらせて、文言の縦中央に置く */
.lesson-num { grid-column: 1; grid-row: 1 / 3; }
.lesson-item h3 { grid-column: 2; grid-row: 1; }
.lesson-item p  { grid-column: 2; grid-row: 2; }
.lesson-num {
  display: block;
  font-family: var(--serif-en);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 35px;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--bronze);
}
.lesson-item h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .06em;
  color: #5f5049;
  line-height: 1.75;
  margin-bottom: 4px;
}
.lesson-item p {
  font-size: 16px;
  line-height: 2;
  color: var(--text-lt);
}
/* カードごとリンクにする。写真が無いので、枠と地の色でホバーを示す */
a.lesson-item {
  text-decoration: none;
  transition: border-color .35s ease, background-color .35s ease;
}
a.lesson-item:hover {
  border-color: var(--bronze);
  background: rgba(255,255,255,.78);
}

/* ---------- VOICE ---------- */
.voice {
  background: var(--pink-lt);
  padding: 90px 8% 100px;
}
.voice-head {
  text-align: center;
  margin-bottom: 46px;
}
.voice-head .sec-title { margin-bottom: 0; }
.voice-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
/* 写真がないので、引用符を置いたカードにしている（LESSONの枠カードと形を変える） */
.voice-item {
  position: relative;
  /* 地がほぼ白になったので、カードは純白＋ロゴと同じゴールドの細枠で分ける
     （前は地と 1.07:1 でカードの形が見えていなかった） */
  background: #fff;
  border: 1px solid rgba(194,164,118,.4);
  padding: 60px 34px 58px;
  text-align: left;
  /* 文字量が違っても、3枚とも本文が縦中央に来るようにする */
  display: flex;
  align-items: center;
}
/* 開きは左上、閉じは右下。本文を左寄せにしたので引用符も両端へ振り分ける */
.voice-item::before,
.voice-item::after {
  position: absolute;
  font-family: var(--serif-en);
  font-size: 52px;
  line-height: 1;
  color: var(--bronze);
  opacity: .8;
}
.voice-item::before { content: "“"; top: 28px; left: 28px; }
.voice-item::after  { content: "”"; bottom: 4px; right: 28px; }
.voice-item p {
  font-size: 15.5px;
  line-height: 2.1;
  color: #5b4b43;
}

/* ---------- CONTACT ---------- */
.contact {
  display: grid;
  grid-template-columns: 24% 30% 46%;
  background: var(--beige-dark);
  align-items: stretch;
}
.contact-logo {
  padding: 55px 20px;
  justify-content: center;
}
.contact-tag {
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--bronze-dk);
  margin-top: 16px;
}
.contact-photo { align-self: stretch; height: 100%; min-height: 280px; overflow: hidden; }
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }
.contact-body {
  background: var(--pink-deep);
  padding: 55px 7%;
  color: #fff;
  display: grid;
  align-items: center;
}
/* 黒地にしたので白文字が素直に読める（2.15:1 → 18.3:1） */
.contact-body .en-label { color: #fff; }
.contact-body .en-label::after { background: var(--bronze); }
.contact-body .sec-title { color: #fff; margin-bottom: 0; }

/* ---------- FOOTER ---------- */
.footer {
  background: var(--white);
  text-align: center;
  padding: 30px 20px;
  font-family: var(--serif-en);
  font-size: 13px;
  letter-spacing: .16em;
  color: #8d827b;
}

/* =========================================
   レスポンシブ
   ========================================= */
/* SERVICEの4列は1枚が230pxを切ると「ビジュアルブランディング」が
   「ビジュアルブランディ／ング」で割れる。実測で1200px＝234pxまでは持ち、
   1160px＝226pxで割れたので、余裕を見て1240pxから2列に落とす */
@media screen and (max-width: 1240px) {
  .service .service-list { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (max-width: 1100px) {
  .origin { grid-template-columns: 1fr; }
  /* 縦に積むと写真が幅なりに伸びて1200px超になるので、高さを固定して切る。
     横長に切ると顔が入らなくなるため、切る位置も上へ寄せる */
  .origin-photo { height: 440px; min-height: 0; }
  .origin-photo img { object-position: 50% 12%; }
  .origin-body { padding: 70px 7%; }
  .voice { padding: 70px 7% 80px; }
  .btn-solid { min-width: 260px; }
  .gnav ul { gap: 20px; }
}

/* 830px前後だとナビの左端が写真からはみ出し、ベージュ地の上で白文字が読めなくなる */
@media screen and (max-width: 960px) {
  .gnav ul { gap: 14px; }
  .gnav a { letter-spacing: .14em; }
  /* この帯はPCの3列・2列を保ったまま幅だけ痩せるので、
     大きくした文字のままだと意図した改行が割れる。一段だけ戻す */
  .sec-title { font-size: 27px; }
  .lead { font-size: 18px; }
  .body-text { font-size: 16px; }
  /* ABOUTは列が490pxまで痩せる。左右の余白を削って文字幅を確保する */
  .about-body { padding: 90px 3%; }
}

@media screen and (max-width: 820px) {
  body { font-size: 16px; }
  .header { padding: 22px 24px 0; }
  .gnav { display: none; }
  .menu-btn {
    display: block;
    width: 34px; height: 20px;
    position: relative;
    z-index: 70;
    margin-top: 14px;
  }
  .menu-btn span,
  .menu-btn::before,
  .menu-btn::after {
    content: "";
    position: absolute; left: 0;
    width: 100%; height: 1px;
    background: var(--bronze-dk);
  }
  .menu-btn::before { top: 0; }
  .menu-btn span { top: 9px; }
  .menu-btn::after { bottom: 0; }
  /* SPは写真を下に回したので、ヘッダーは常にクリーム地の上にある。
     白い線だと消えるため墨色のまま（前は写真の上だったので白＋影にしていた） */
  .menu-btn.is-open::before { top: 9px; transform: rotate(20deg); }
  .menu-btn.is-open span { opacity: 0; }
  .menu-btn.is-open::after { bottom: 10px; transform: rotate(-20deg); }

  /* 開いたときのメニュー */
  .gnav.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
    background: var(--beige);
    /* トップのヘッダーはハンバーガーだけなので、上は控えめでよい */
    padding: 110px 10% 40px;
  }
  .gnav.is-open ul {
    display: block;
    padding-top: 0;
  }
  .gnav.is-open li + li { margin-top: 26px; }
  .gnav.is-open a { font-size: 17px; letter-spacing: .24em; }
  /* 開いたメニューはベージュ地なので、文字色を戻す */
  .gnav.is-open a { color: var(--bronze-dk); text-shadow: none; }
  .gnav.is-open a::after { background: var(--bronze); }

  /* メニューを開いたときにロゴを前面に残すのは、ヘッダーに乗っている
     下層ページのロゴだけ。トップの大きなロゴまで前面に出ると、
     開いたメニューの文字の上に重なって読めなくなる */
  .header .logo { position: relative; z-index: 70; }
  .logo img { height: 84px; }        /* 下層ページのヘッダー用 */
  .hero-logo img { height: clamp(225px, 69vw, 315px); }

  .hero { min-height: auto; }
  /* 375px幅だと「「奇跡の一着」を選びます」が1行に収まらず「す」だけ3行目に落ちる。
     左右を6%に詰めて2行に収めている（375pxで枠330px・文字318px） */
  .hero-inner { padding: 78px 6% 58px; }
  /* Android の 360px 幅だと25pxでも1px足りないので、狭い端末だけ少し縮める */
  .hero-title { font-size: clamp(23px, 6.5vw, 26px); }
  .hero-scroll { display: none; }

  /* SPでは意図的な改行を解除して自然に折り返す（横はみ出し防止） */
  .lead br,
  .body-text br,
  .sec-title br { display: none; }
  .hero-sign { font-size: 19px; margin-top: 32px; }

  .about, .contact { grid-template-columns: 1fr; }
  .about-portrait { height: 420px; min-height: 0; }
  .about-body { padding: 66px 8%; }
  .origin-photo { height: 340px; }
  .origin-body { padding: 70px 7% 60px; }

  .works, .service, .lesson, .vision, .event { padding: 70px 7%; }
  .works-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .service-list { grid-template-columns: 1fr; gap: 40px; }
  .service .service-list { grid-template-columns: 1fr; }
  /* 1列に積むので高さをそろえる必要がなく、PC用の改行も解除する */
  .service-item h3 { min-height: 0; }
  .service-item h3 br { display: none; }
  /* 見出しを左に置く幅がないので縦に積む */
  .lesson { grid-template-columns: 1fr; gap: 40px; }
  /* 幅が足りないので番号を上に戻し、文言を1段下げる */
  .lesson-item {
    padding: 30px 26px;
    grid-template-columns: 1fr;
  }
  .lesson-num { grid-column: 1; grid-row: 1; margin-bottom: 12px; }
  .lesson-item h3 { grid-column: 1; grid-row: 2; }
  .lesson-item p  { grid-column: 1; grid-row: 3; }


  .voice-list { grid-template-columns: 1fr; gap: 20px; }
  .voice-item { padding: 52px 26px 50px; }
  .voice-item::before { top: 22px; left: 22px; }
  .voice-item::after { bottom: 0; right: 22px; }

  .sec-title { font-size: 26px; }
  /* 幅を持たせるのは段組の方。ボタンは stretch で横いっぱいに広がる */
  .btn-stack { display: flex; }
  .contact-photo { min-height: 260px; }
  .about-body::before { width: 78%; height: 60%; }
  .contact-logo { padding: 60px 20px 30px; }
  .contact-body { padding: 50px 8% 70px; }
  .voice { padding: 60px 7% 70px; }
}



/* SERVICEのカードは詳細ページへのリンク。押せることが分かるよう、
   触れたときに写真をわずかに寄せ、見出しにゴールドの下線を出す */
.service-item .item-link { display: block; }
.service-item .item-photo { overflow: hidden; }
.service-item .item-photo img { transition: transform .6s ease; }
.service-item .item-link:hover .item-photo img { transform: scale(1.045); }
.service-item .item-link h3 { display: inline-block; border-bottom: 1px solid transparent; transition: border-color .35s ease; }
.service-item .item-link:hover h3 { border-bottom-color: var(--bronze); }

/* =========================================================================
   下層ページ（サービス詳細）　2026-09-04 追加
   「おしゃれなフォトブックをみているような、写真と文字を相互配置」という
   ご要望に合わせた型。写真と文章を左右交互に並べ、スマホでは縦に積んで
   写真を左右に振り分ける（一直線に並べるとカタログになってしまうため）。
   写真はいただいた縦横比のまま置いている。枠に合わせて切ると、
   先方が選んだ画そのものが変わってしまうので、幅だけをそろえる方式にした。
   ========================================================================= */

/* ---------- ページ見出し ---------- */
.page-head {
  background: var(--beige);
  padding: 172px 8% 104px;
  text-align: center;
}
.page-head .en-label::after { left: 50%; transform: translateX(-50%); }
.page-title {
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: 33px;
  line-height: 1.8;
  letter-spacing: .13em;
  color: #2b2521;
  margin-bottom: 30px;
}
.page-lead {
  font-size: 18px;
  line-height: 2.15;
  letter-spacing: .09em;
  color: var(--text);
}

/* ---------- 写真と文章の交互配置 ---------- */
.story { padding: 118px 8% 40px; background: var(--white); }
.story-block {
  display: grid;
  /* 写真は「もう少し小さくてもいい」とのことなので、文章より狭くしている */
  grid-template-columns: 40% 1fr;
  gap: 0 7%;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto 118px;
}
/* 偶数番めは写真を右に。1カラム目に文章、2カラム目に写真を置き替える */
.story-block.is-rev { grid-template-columns: 1fr 40%; }
/* 縦長の写真は40%のままだと背が高くなりすぎて、隣の文章がすかすかに見える。
   そういう写真のときだけ幅を落とす（2026-09-17 講座ページから） */
.story-block.is-tall { grid-template-columns: 31% 1fr; }
.story-block.is-tall.is-rev { grid-template-columns: 1fr 31%; }
.story-block.is-rev .story-photo { order: 2; }
.story-block.is-rev .story-text  { order: 1; }

.story-photo img { width: 100%; height: auto; }
.story-text p {
  font-size: 16.5px;
  line-height: 2.3;
  letter-spacing: .08em;
}
.story-text p + p { margin-top: 30px; }
/* 会話の引用（「これは今の私に似合う？」など）は一段落として字下げする */
.story-text .quote {
  padding-left: 18px;
  border-left: 1px solid var(--bronze);
  color: var(--bronze-dk);
}

/* ---------- 締めの一文（写真を挟まず中央に置く） ---------- */
.story-end {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 0 118px;
  text-align: center;
}
.story-end p {
  font-size: 17.5px;
  line-height: 2.35;
  letter-spacing: .1em;
}
.story-end p + p { margin-top: 28px; }

/* 料金はページ見出しの中、リードのすぐ下に置く。読む人がまず知りたい情報のため。
   原稿では文章の末尾に書かれているが、並び順はこちらで決めてよい部分として上に出した */
.page-price {
  font-family: var(--serif-en);
  font-size: 34px;
  letter-spacing: .06em;
  color: var(--bronze-dk);
  line-height: 1.4;
  margin-top: 34px;
}
.page-price .unit {
  font-family: var(--serif-jp);
  font-size: 15px;
  letter-spacing: .1em;
  margin-right: 12px;
  color: var(--text-lt);
}
.page-price span:not(.unit) { font-family: var(--serif-jp); font-size: 16px; }
/* リード文が無いページ（同行ショッピング・クローゼットチェック）は
   見出しのすぐ下に金額が来て詰まるので、そのときだけ間を広げる */
.page-title + .page-price { margin-top: 44px; }
.price-note {
  font-size: 14.5px;
  color: var(--text-lt);
  letter-spacing: .08em;
  margin-top: 14px;
}

/* ---------- 開催の詳細（LOCATION／会場／参加費などの箇条） ---------- */
/* イベントのページだけに出る。英字ラベルと日本語ラベルが混ざるので、
   ラベル側の幅は固定せず、左に細い罫を引いてそろえている */
.info-box {
  background: var(--beige);
  padding: 84px 8%;
}
.info-row {
  max-width: 680px;
  margin: 0 auto;
  padding: 26px 0;
  border-bottom: 1px solid rgba(194, 164, 118, .35);
}
.info-row:first-child { padding-top: 0; }
.info-label {
  font-family: var(--serif-en);
  font-size: 13px;
  letter-spacing: .24em;
  color: var(--bronze-dk);
  margin-bottom: 10px;
}
/* 「会場」のような日本語のラベルは、英字用のフォントだと字間が開きすぎて
   間伸びして見えるので、本文と同じ明朝で少し詰めて組む */
.info-label.is-jp {
  font-family: var(--serif-jp);
  font-size: 14px;
  letter-spacing: .14em;
}
.info-body {
  font-size: 16px;
  line-height: 2.1;
  letter-spacing: .06em;
}
.info-note {
  max-width: 680px;
  margin: 30px auto 0;
  font-size: 14.5px;
  color: var(--text-lt);
  letter-spacing: .06em;
  text-align: center;
}

@media screen and (max-width: 820px) {
  .info-box { padding: 62px 7%; }
  .info-row { padding: 22px 0; }
  .info-body { font-size: 15px; }
}

/* =========================================================================
   講座ページ　2026-09-17 追加
   原稿に「STEP 1／PROGRAM／PRICE／MESSAGE」「TOTAL STYLING」といった
   区切りの見出しが入っているので、それを組みの区切りとして使っている。
   ========================================================================= */

/* 金額の上に出す PRICE の字。ページ見出しの LESSON と大きさをそろえている */
.page-price .price-head {
  display: block;
  font-family: var(--serif-en);
  font-size: 12px;
  letter-spacing: .24em;
  color: var(--bronze-dk);
  margin-bottom: 12px;
}
/* 受講時間と受講料を2行で書くページ。金額だけ大きく出す
   （span:not(.unit) の指定に負けないよう、要素名まで書いている） */
.page-price span.row { display: block; font-size: 17px; }
.page-price span.row + span.row { margin-top: 12px; }
.page-price span.amount { font-family: var(--serif-en); font-size: 34px; letter-spacing: .04em; }

/* 文中の区切りの見出し。写真を挟まず中央に置く */
.sec-lead {
  max-width: 820px;
  margin: 0 auto 44px;
  text-align: center;
  font-family: var(--serif-jp);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.9;
  letter-spacing: .12em;
  color: #2b2521;
}
/* TOTAL STYLING のような英字の見出しは、明朝だと間が抜けて見えるので
   英字用の書体で字間を広げる */
.sec-lead.is-en {
  font-family: var(--serif-en);
  font-size: 19px;
  letter-spacing: .3em;
  color: var(--bronze-dk);
}

/* 写真を入れない本文のかたまり */
.center-block {
  max-width: 760px;
  margin: 0 auto 110px;
  text-align: center;
}
.center-block p {
  font-size: 16.5px;
  line-height: 2.3;
  letter-spacing: .08em;
}
.center-block p + p { margin-top: 30px; }

/* STEP 1〜3。番号・小見出し・説明の3段を縦に積む */
.step-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
  /* 1列が狭いと原稿の改行のところで1文字だけ落ちるので、少し広めに取る */
  max-width: 1180px;
  margin: 0 auto 118px;
}
.step-item {
  border-top: 1px solid rgba(194, 164, 118, .5);
  padding-top: 30px;
}
.step-num {
  display: block;
  font-family: var(--serif-en);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--bronze);
  margin-bottom: 18px;
}
.step-item h3 {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .1em;
  color: #2b2521;
  margin-bottom: 16px;
}
.step-item p {
  font-size: 15.5px;
  line-height: 2.2;
  letter-spacing: .04em;
  color: var(--text-lt);
}

/* ---------- プランの比較表（フォーシーズンズブランディング） ---------- */
.plan-box {
  background: var(--beige);
  padding: 84px 8%;
}
/* 画面が狭いときは表を横に送る。はみ出しはこの枠の中だけで起きる。
   右端にうっすら影を置いて、まだ続きがあることを示す */
.plan-scroll {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.plan-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
  letter-spacing: .04em;
}
.plan-table th,
.plan-table td {
  border-bottom: 1px solid rgba(194, 164, 118, .35);
  padding: 20px 14px;
  line-height: 1.8;
  vertical-align: middle;
}
/* 1列目は項目名。狭い画面で潰れて折り返すのを防ぐため最低幅を持たせる */
.plan-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--text);
  min-width: 190px;
}
/* 「Aプラン」は英字と日本語が混じるので、本文と同じ明朝でそろえる */
.plan-table thead th {
  font-family: var(--serif-jp);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .1em;
  color: var(--bronze-dk);
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 14px;
  text-align: center;
}
.plan-table tbody td {
  text-align: center;
  color: var(--text);
  min-width: 118px;
}
.plan-table tbody tr:last-child th,
.plan-table tbody tr:last-child td { border-bottom: 0; }
/* 横に送れることの案内。表が収まる広さでは出さない */
.plan-scroll-note { display: none; }
.plan-note {
  max-width: 980px;
  margin: 34px auto 0;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .06em;
  color: var(--text-lt);
  text-align: center;
}

@media screen and (max-width: 820px) {
  /* 表の形のまま見せたいとのご要望。4列は375pxに収まらないので、
     項目名の列を左に貼り付けたまま、プランの列だけ横に送れるようにする。
     枠の左右は画面いっぱいまで使い、表が途中で切れていることが分かるようにした */
  .plan-box { padding: 62px 0; }
  /* 枠に左右の余白を持たせると、その分だけ貼り付いた列が右へずれて、
     右端まで送ったときに値が潜る。余白は表のいちばん外側のセルで取る */
  .plan-scroll { padding: 0; }
  /* 列の幅を決め打ちにする。こうすると右端まで送ったとき、
     BプランとCプランがちょうど収まり、値が項目名の下に潜らない */
  /* 右端まで送ったとき、項目名の列（110px）の右に残り2列（114px×2）が
     ちょうど収まる幅にしてある。これより広いと値が項目名の下に潜る */
  .plan-table { min-width: 466px; table-layout: fixed; font-size: 13px; }
  .plan-table th,
  .plan-table td { padding: 16px 8px; }
  .plan-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    /* 貼り付いた列の下を文字が通るので、地の色で塞ぐ */
    background: var(--beige);
    width: 124px;
    padding-left: 22px;
    font-size: 12.5px;
    line-height: 1.7;
  }
  .plan-table thead th { font-size: 13px; }
  /* 見出し行の1列目も一緒に貼り付けないと、横に送ったとき
     見出しと中身の列がずれて見える */
  .plan-table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--beige);
  }
  /* 「12回（毎月）」が折り返すと表が読みにくくなるので1行に保つ */
  .plan-table tbody td { width: 114px; white-space: nowrap; }
  .plan-table tbody td:last-child { padding-right: 22px; }
  .plan-table thead th { width: 114px; }
  .plan-table thead th:last-child { padding-right: 22px; }
  .plan-table thead th:first-child { width: 124px; }
  .plan-scroll-note {
    display: block;
    margin: 14px 7% 0;
    font-size: 12.5px;
    letter-spacing: .06em;
    color: var(--text-lt);
  }
  .plan-note { font-size: 14px; margin: 26px 7% 0; text-align: left; }
}

/* PROGRAM / MESSAGE のように、かたまりの頭に置く英字の見出し */
.block-label {
  font-family: var(--serif-en);
  font-size: 13px;
  letter-spacing: .3em;
  color: var(--bronze-dk);
  text-align: center;
  margin-bottom: 40px;
}

@media screen and (max-width: 820px) {
  .sec-lead { font-size: 19px; margin-bottom: 34px; }
  .sec-lead.is-en { font-size: 17px; }
  .center-block { margin-bottom: 76px; }
  .center-block p { font-size: 15px; line-height: 2.2; letter-spacing: .05em; }
  /* 3列だと1列が狭すぎるので縦に積む */
  .step-list { grid-template-columns: 1fr; gap: 34px; margin-bottom: 76px; }
  .step-item { padding-top: 24px; }
  .step-item h3 { font-size: 18px; }
  /* 「あなたの魅力・価値観・理想の未来を明確にし、」が22文字あり、
     15.5pxだと行末の「し、」だけ次の行に落ちるので少し詰める */
  .step-item p { font-size: 14px; letter-spacing: .02em; }
  /* 講座ページは原稿の1行が22文字ある箇所があり、既存ページと同じ15pxだと
     行末の2文字だけが次の行に落ちる。このページ群だけ少し小さく組む */
  .story.is-lesson .story-text p { font-size: 14px; letter-spacing: .03em; }
  .block-label { margin-bottom: 30px; }
}

/* ---------- 下層ページ末尾のお問い合わせ ---------- */
.sub-contact {
  background: var(--pink-deep);
  color: #f4efea;
  padding: 96px 8% 100px;
  text-align: center;
}
.sub-contact .en-label { color: #f4efea; }
.sub-contact .en-label::after { left: 50%; transform: translateX(-50%); }
.sub-contact .sec-title { color: #f4efea; }
/* 公式LINEに送ってもらう合言葉を伝える一文。ボタンのすぐ上に置く */
.sub-contact .contact-keyword {
  /* 40字ほどの一文が1行に収まる幅。狭いと「ください。」だけ次の行に落ちる */
  max-width: 780px;
  margin: 26px auto 34px;
  font-size: 15.5px;
  line-height: 2.1;
  letter-spacing: .06em;
  color: #e5dcd3;
}
.sub-contact .contact-keyword .kw { color: var(--bronze); }
.sub-contact .btn-stack { justify-content: center; }
.sub-contact .btn-solid { border-color: #f4efea; color: #f4efea; }
.sub-contact .btn-solid:hover { background: #f4efea; color: #2b2521; }

/* 一覧へ戻る */
.back-link {
  background: var(--white);
  padding: 56px 8% 70px;
  text-align: center;
}
.back-link a {
  font-family: var(--serif-en);
  font-size: 13.5px;
  letter-spacing: .22em;
  color: var(--text-lt);
  border-bottom: 1px solid var(--bronze);
  padding-bottom: 5px;
}

@media screen and (max-width: 960px) {
  .story-block { gap: 0 5%; margin-bottom: 92px; }
  .page-head { padding: 150px 7% 84px; }
  .page-title { font-size: 28px; }
}

@media screen and (max-width: 820px) {
  .page-head { padding: 132px 7% 70px; }
  /* 「ミラクルファーストセッション」が2行に割れるので、12文字が1行に収まるところまで落とす */
  .page-title { font-size: 23px; }
  .page-lead { font-size: 16px; }

  /* スマホは1列。写真を画面いっぱいにせず、左右に振って余白を残すと
     フォトブックをめくっている感じに近づく */
  .story { padding: 76px 7% 20px; }
  .story-block,
  .story-block.is-rev,
  .story-block.is-tall,
  .story-block.is-tall.is-rev { grid-template-columns: 1fr; gap: 26px; margin-bottom: 74px; }
  .story-block.is-rev .story-photo { order: 0; }
  .story-block.is-rev .story-text  { order: 1; }
  .story-photo { width: 78%; }
  .story-block.is-rev .story-photo { margin-left: auto; }
  /* 原稿の改行をそのまま出すと行末で1文字だけ落ちる箇所が出るため、
     字間を少し詰めて1行に入る文字数を稼ぐ */
  .story-text p { font-size: 15px; line-height: 2.2; letter-spacing: .05em; }

  .story-end { padding: 0 0 76px; }
  .story-end p { font-size: 16px; }
  .page-price { font-size: 28px; margin-top: 26px; }
  .sub-contact { padding: 70px 7% 74px; }
  .sub-contact .contact-keyword { font-size: 14.5px; margin: 22px auto 30px; }
  .back-link { padding: 44px 7% 56px; }
}