@charset "utf-8";
/* ==========================================================================
   Salon.de.Soleil — 独自スタイルシート
   テーマ非依存。設計値は本番サイトの実測値に合わせている。
   ブレークポイント: 1221px / 800px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン
   -------------------------------------------------------------------------- */
:root {
  --brand:        #937960;   /* 帯・ボタン・小見出し */
  --brand-dark:   #573312;   /* ナビ・サイドボタン */
  --tint:         #f4f0ec;   /* セクション背景 */
  --text:         #000;
  --muted:        #999;
  --white:        #fff;

  --container:    930px;
  --header-h:     80px;
  --announce-h:   50px;

  --font-serif: "Times New Roman", "游明朝", "Yu Mincho", "游明朝体", "YuMincho",
                "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3",
                "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  --font-sans:  Arial, "Hiragino Sans", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
                "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;

  --section-pt:  120px;
  --section-pb:  115px;
}

/* --------------------------------------------------------------------------
   2. リセット / ベース
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
  /* 明朝体を細めに滑らかに描画する（現行サイトと同じ設定） */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, picture, video, iframe { max-width: 100%; }
img { height: auto; border: 0; vertical-align: bottom; }

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

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }

button {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}

/* 語の途中で改行させたくないときに使う */
.u-nowrap { white-space: nowrap; }

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

/* --------------------------------------------------------------------------
   3. レイアウト部品
   -------------------------------------------------------------------------- */
.l-container {
  width: var(--container);
  max-width: calc(100% - 40px);
  margin-inline: auto;
}

.l-section {
  position: relative;
  padding: var(--section-pt) 0 var(--section-pb);
}
.l-section--tint { background: var(--tint); padding: 110px 0 120px; }
.l-section--flush { padding: 0; }
/* 本家はスクール節の画像下に 7px 余分な余白がある */
.l-section--school { padding-bottom: 122px; }

/* 見出し（センター揃えの大見出し） */
.c-heading {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
  margin-bottom: 68px;
}

/* 罫線ボタン */
.c-button {
  display: block;
  width: 280px;
  max-width: 100%;
  height: 60px;
  line-height: 58px;
  padding-inline: 24px;
  text-align: center;
  color: var(--brand);
  border: 1px solid var(--brand);
  transition: color .3s, background-color .3s;
}
.c-button:hover { color: var(--white); background: var(--brand); }

/* --------------------------------------------------------------------------
   4. お知らせ帯
   -------------------------------------------------------------------------- */
.p-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--announce-h);
  padding: 15px 20px;
  background: var(--brand);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}
.p-announce a { display: block; }

/* --------------------------------------------------------------------------
   5. ヘッダー
   -------------------------------------------------------------------------- */
.p-header {
  position: relative;   /* 通常フロー。ヒーローに重ねない */
  z-index: 100;
  width: 100%;
  height: var(--header-h);
  background: var(--white);
}

.p-header__logo {
  position: absolute;
  top: 0; left: 0;
  z-index: 200;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding-left: 30px;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
}

/* グローバルナビ */
.p-gnav { position: absolute; inset: 0; }
.p-gnav__list { display: flex; justify-content: center; }
.p-gnav__item { display: inline-block; }
.p-gnav__item > a {
  display: block;
  height: var(--header-h);
  padding-inline: 19px;
  line-height: var(--header-h);
  color: var(--brand-dark);
  transition: opacity .3s;
}
.p-gnav__item > a:hover { opacity: .6; }
.p-gnav__item.is-current > a { color: var(--brand); }

/* 検索 */
.p-header__search {
  position: absolute;
  top: 0; right: 0;
  z-index: 200;
  width: 70px; height: var(--header-h);
  display: flex; align-items: center; justify-content: center;
}
.p-header__search svg { width: 18px; height: 18px; }

/* ハンバーガー（SPのみ） */
.p-drawer-toggle {
  display: none;
  position: absolute;
  top: 0; right: 0;
  z-index: 200;
  width: 60px; height: var(--header-h);
}
.p-drawer-toggle span {
  display: block;
  width: 24px; height: 1px;
  margin: 6px auto;
  background: var(--brand-dark);
  transition: transform .3s, opacity .3s;
}

 /* 左端の縦書きサイト説明 */
.p-sidebrand {
  position: fixed;
  top: 0; left: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 100vh;
  pointer-events: none;
}
.p-sidebrand p {
  writing-mode: vertical-rl;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   6. サイド固定ボタン
   -------------------------------------------------------------------------- */
.p-quicknav {
  position: absolute;
  top: calc(var(--announce-h) + var(--header-h));
  right: 0;
  z-index: 90;
  width: 81px;
}
.p-quicknav__item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 80px;
  border: 1px solid var(--brand-dark);
  background: var(--brand-dark);
  color: var(--white);
  transition: opacity .3s;
}
.p-quicknav__item a:hover { opacity: .75; }
.p-quicknav__item + .p-quicknav__item a { border-top: 0; }
.p-quicknav__item svg { width: 20px; height: 20px; }
.p-quicknav__item span { font-size: 12px; font-weight: 600; line-height: 1.5; }

/* --------------------------------------------------------------------------
   7. ヒーロースライダー
   -------------------------------------------------------------------------- */
.p-hero { position: relative; }

.p-hero__viewport {
  position: relative;
  height: 730px;
  overflow: hidden;
}
.p-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.p-hero__slide.is-active { opacity: 1; }
.p-hero__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 表示中のスライドをゆっくり拡大 */
  transform: scale(1);
  transition: transform 7s linear;
}
.p-hero__slide.is-active img { transform: scale(1.2); }
.p-hero__slide::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .2);
}

.p-hero__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  height: 45px;
}
.p-hero__dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid var(--brand);
  background: transparent;
  transition: background-color .3s;
}
.p-hero__dots button.is-active { background: var(--brand); }

/* --------------------------------------------------------------------------
   8. 2カラムのリード文セクション（intro / school）
   -------------------------------------------------------------------------- */
.p-lead { display: flex; align-items: flex-start; margin-top: -10px; }

.p-lead__title {
  flex: 0 0 auto;
  width: 50%;
  padding-right: 35px;
  margin-right: 35px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.7;
}
.p-lead__body { flex: 1 1 auto; }
.p-lead__body p { line-height: 2.4; }
.p-lead__body .c-button { margin-top: 28px; }

.p-lead__figure { margin-top: 74px; }
.p-lead__figure img { width: 100%; }

/* PC / SP で本文を出し分け */
.u-sp-only { display: none; }

/* --------------------------------------------------------------------------
   9. サービス2枚組
   -------------------------------------------------------------------------- */
.p-services__list { display: flex; border-bottom: 1px solid #ddd; }

.p-services__item {
  position: relative;
  flex: 1 1 50%;
  padding-bottom: 80px;
}
.p-services__thumb { position: relative; overflow: hidden; }
.p-services__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 719 / 367;
  object-fit: cover;
  object-position: top;   /* 本家は画像上端を基準に切り取っている */
  transition: transform .6s ease;
}
.p-services__item:hover .p-services__thumb img { transform: scale(1.05); }

.p-services__headline {
  position: relative;
  z-index: 2;
  display: block;
  width: 270px;
  margin: -80px auto 0;
  background: var(--white);
  font-size: 22px;
  font-weight: 600;
  line-height: 80px;
  text-align: center;
}

.p-services__desc {
  margin-top: 70px;
  padding-inline: 80px;
  line-height: 2.4;
}
.p-services__item .c-button { margin: 28px auto 0; }

/* --------------------------------------------------------------------------
   10. ブログカルーセル
   -------------------------------------------------------------------------- */
.p-blog { position: relative; }

.p-blog__viewport { overflow: hidden; }
.p-blog__track {
  display: flex;
  transition: transform .5s ease;
}
.p-blog__slide {
  flex: 0 0 calc(100% / 3);
  min-width: 0;
}
.p-blog__card { display: block; background: var(--white); height: 100%; }

.p-blog__thumb { position: relative; overflow: hidden; }
.p-blog__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 310 / 179;
  object-fit: cover;
  transition: transform .6s ease;
}
.p-blog__card:hover .p-blog__thumb img { transform: scale(1.05); }

.p-blog__category {
  position: absolute;
  left: 40px;
  bottom: -4px;
  min-width: 130px;
  padding-inline: 25px;
  background: var(--white);
  font-size: 14px;
  line-height: 40px;
  text-align: center;
}

.p-blog__body { padding: 39px 40px 38px; }
.p-blog__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
}
.p-blog__date {
  display: block;
  width: fit-content;
  margin-top: 12px;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
}

.p-blog__arrow {
  position: absolute;
  top: 50%;
  width: 52px; height: 52px;
  margin-top: -26px;
  border: 1px solid var(--brand-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s, color .3s;
}
.p-blog__arrow:hover { background: var(--brand-dark); color: var(--white); }
.p-blog__arrow svg { width: 12px; height: 12px; }
.p-blog__arrow--prev { left: calc((100% - var(--container)) / 2 - 82px); }
.p-blog__arrow--next { right: calc((100% - var(--container)) / 2 - 82px); }

/* --------------------------------------------------------------------------
   11. アクセス
   -------------------------------------------------------------------------- */
.p-access__section { padding-top: 176px; }  /* 本家は見出し前に空段落ぶんの余白がある */

.p-access__heading {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 59px;
}
.p-access__map { line-height: 0; }
.p-access__map iframe { width: 100%; height: 450px; border: 0; }

.p-access__info {
  display: flex;
  gap: 60px;             /* 本家は2カラムの間隔が60px */
  padding-inline: 3px;   /* 本家は左右3pxぶん内側 */
  margin-top: 50px;
}
.p-access__info > div { flex: 1 1 50%; }
.p-access__info h3 {
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--brand);
}
.p-access__info p { line-height: 2.4; }

/* --------------------------------------------------------------------------
   12. 写真の流し込みカルーセル
   -------------------------------------------------------------------------- */
.p-marquee { overflow: hidden; }
.p-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.p-marquee__track img {
  display: block;
  width: 322px; height: 209px;
  object-fit: cover;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .p-marquee__track { animation: none; }
}

/* --------------------------------------------------------------------------
   13. フッターCTA / フッター
   -------------------------------------------------------------------------- */
.p-cta { display: flex; }
.p-cta__item { flex: 1 1 33.333%; }
.p-cta__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 70px;
  border-right: 1px solid rgba(0, 0, 0, .1);
  transition: opacity .3s;
}
.p-cta__item:last-child a { border-right: 0; }
.p-cta__item a:hover { opacity: .6; }
.p-cta__item svg { width: 22px; height: 22px; }

.p-footer { text-align: center; }
.p-footer__sns {
  position: fixed;
  left: 0; bottom: 0;
  z-index: 80;
  display: flex;
  justify-content: center;
  width: 80px;
  height: 55px;
  padding-top: 20px;
  background: var(--white);
}
.p-footer__copyright {
  font-size: 12px;
  line-height: 60px;
}

.p-pagetop {
  position: fixed;
  right: 0; bottom: 0;
  z-index: 80;
  width: 80px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.p-pagetop.is-visible { opacity: 1; pointer-events: auto; }
.p-pagetop a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 0 30px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;
  writing-mode: vertical-rl;
  background: var(--white);
}

/* --------------------------------------------------------------------------
   14. ドロワー（SP）
   -------------------------------------------------------------------------- */
.p-drawer {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--white);
  padding: 30px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .4s ease;
}
.p-drawer.is-open { transform: translateX(0); }
.p-drawer__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  font-size: 28px;
  line-height: 1;
}
.p-drawer__list { margin-top: 60px; }
.p-drawer__list a {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid #eee;
  color: var(--brand-dark);
}

/* --------------------------------------------------------------------------
   15. レスポンシブ
   -------------------------------------------------------------------------- */
/* ナビ8項目は横975px。画面が1440px未満になると中央のナビが左のロゴに近づき、
   1382px以下では重なってしまう。
   そこでこの幅からロゴをひとまわり小さくし、項目の間隔も詰めて収めている。
   （1221px以下はドロワー（三本線）に切り替わるので、ここでの調整は不要）

   ナビの項目を増やすときは、この指定で足りるか実測してください。
   → python3 tools/verify/check-nav.py */
@media screen and (max-width: 1439px) {
  .p-header__logo { font-size: 22px; }
  .p-gnav__item > a { padding-inline: 10px; }
}

@media screen and (max-width: 1221px) {
  :root {
    --container: 750px;
    --header-h:  60px;
  }

  .c-heading,
  .p-lead__title { font-size: 26px; line-height: 1.7; }
  .p-access__heading { font-size: 26px; }

  /* ヘッダー：グローバルナビをやめてドロワーに */
  .p-header__logo { font-size: 20px; padding-left: 30px; }
  .p-gnav,
  .p-header__search,
  .p-quicknav,
  .p-sidebrand { display: none; }
  .p-drawer-toggle { display: block; right: 0; }

  /* リード節の画像はコンテナより100px広い（スクール節は広げない） */
  .p-lead__figure { margin: 74px -100px 7px; }
  .l-section--school .p-lead__figure { margin-inline: 0; }

  /* サービス節 */
  .p-services__headline {
    width: 200px;
    margin-top: -70px;
    font-size: 20px;
    line-height: 70px;
  }

  /* ブログ節：枠はコンテナより100px広い・矢印なし */
  .p-blog .l-container { width: auto; max-width: calc(100% - 200px); }
  .p-blog__body { padding: 20px 20px 18px; }
  .p-blog__title { font-size: 14px; line-height: 1.6; }
  .p-blog__date { margin-top: 12px; }
  .p-blog__arrow { display: none; }

  /* 写真の流し込み */
  .p-marquee__track img { width: 250px; height: 162px; }

  .p-pagetop { width: 50px; }
  .p-pagetop a { writing-mode: horizontal-tb; padding: 12px 0; font-size: 10px; }
}

@media screen and (max-width: 1000px) {
  :root {
    --section-pt: 90px;
    --section-pb: 100px;
  }

  /* コンテナは左右120pxずつ空ける形に切り替わる */
  .l-container { width: auto; max-width: calc(100% - 240px); }
  .p-blog .l-container { max-width: calc(100% - 120px); }

  .p-lead__figure { margin: 70px -60px 7px; }
  .l-section--school { padding-bottom: 100px; }
  .l-section--school .p-lead__figure { margin: 54px 0 7px; }

  .p-services__headline {
    margin-top: -60px;
    font-size: 18px;
    line-height: 60px;
  }
  .p-services__item { padding-bottom: 50px; }
  .p-services__desc { margin-top: 44px; padding-inline: 50px; }

  /* カードは2枚 */
  .l-section--tint { padding: 90px 0 101px; }
  .p-blog__slide { flex-basis: 50%; }

  .p-access__section { padding-top: 150px; }

  /* フッターCTAは縦積み */
  .p-cta { display: block; }
  .p-cta__item a {
    height: 60px;
    border-right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
  }
  .p-footer__sns {
    position: static;
    width: 100%;
    height: 51px;
    padding-top: 18px;
    justify-content: center;
  }
}

@media screen and (max-width: 800px) {
  :root {
    --header-h:   60px;
    --announce-h: 40px;
    --section-pt: 35px;
    --section-pb: 40px;
  }

  body { font-size: 14px; }

  /* テキストは左右40px、画像は左右20pxの内側に入る */
  .l-container { max-width: calc(100% - 80px); }

  .c-heading {
    font-size: 20px;
    line-height: 1.7;
    margin-bottom: 32px;
  }

  .c-button {
    width: 240px;
    height: 50px;
    line-height: 48px;
    font-size: 16px;
    margin-inline: auto;
  }

  /* ヘッダー：SPでは背景なしでヒーロー写真に重なる */
  .p-announce { height: 40px; padding: 12px 20px; font-size: 12px; }
  .p-header {
    position: absolute;
    top: var(--announce-h);
    left: 0;
    background: transparent;
  }
  .p-header__logo { font-size: 20px; padding-left: 40px; color: var(--white); }
  .p-drawer-toggle span { background: var(--white); }
  .p-gnav,
  .p-header__search,
  .p-quicknav,
  .p-sidebrand { display: none; }
  .p-drawer-toggle { display: block; width: 60px; right: 24px; }

  /* ヒーロー（左右20px内側・高さ600） */
  .p-hero { margin: 20px 20px 0; }
  .p-hero__viewport { height: 600px; }
  .p-hero__dots { height: 35px; }

  /* リード節 */
  .p-lead { display: block; margin-top: -5px; }
  .p-lead__title {
    width: auto;
    padding-right: 0;
    margin-right: 0;
    font-size: 20px;
    line-height: 1.7;
    text-align: center;
  }
  .p-lead__body p { margin-top: 15px; line-height: 2; }
  .p-lead__body .c-button { margin-top: 33px; }
  .u-pc-only { display: none; }
  .u-sp-only { display: block; }

  .p-lead__figure { margin: 96px -20px 7px; }   /* 画像だけ左右20pxまで広げる */

  /* スクール節だけ本家の作りが違う：画像は本文と同じ幅で、上の余白も狭い */
  .l-section--school { padding-top: 40px; padding-bottom: 26px; }
  .l-section--school .p-lead__figure { margin: 47px 0 7px; }
  .l-section--school .p-lead__figure img {
    aspect-ratio: 420 / 197;
    object-fit: cover;
  }

  /* サービス節 */
  .l-section--flush { margin-top: -5px; }
  .p-services__list { display: block; }
  .p-services__item { padding-bottom: 40px; }
  .p-services__thumb img { aspect-ratio: 500 / 255; }
  .p-services__headline {
    width: 240px;
    margin-top: -50px;
    font-size: 16px;
    line-height: 50px;
  }
  .p-services__desc {
    margin-top: 37px;
    padding-inline: 20px;
    line-height: 2;
  }
  .p-services__item .c-button { margin-top: 31px; }

  /* ブログ節（1画面2枚・矢印なし・左右いっぱい） */
  .l-section--tint { padding: 35px 0 40px; }
  .p-blog .l-container { width: 100%; max-width: 100%; }
  .p-blog__slide { flex-basis: 50%; }
  .p-blog__body { padding: 18px 20px 20px; }
  .p-blog__title { font-size: 14px; line-height: 1.6; }
  .p-blog__category { left: 20px; min-width: 100px; padding-inline: 15px; line-height: 32px; }
  .p-blog__arrow { display: none; }

  /* アクセス節 */
  .p-access__section { padding-top: 91px; }
  .p-access__heading { font-size: 20px; line-height: 1.4; margin-bottom: 20px; }
  .p-access__map iframe { height: 450px; }
  .p-access__info { display: block; margin-top: 41px; }
  .p-access__info > div + div { margin-top: 9px; }
  .p-access__info h3 { font-size: 14px; }
  .p-access__info p { line-height: 2; }

  /* 写真の流し込み */
  .p-marquee__track img { width: 180px; height: 117px; }

  /* フッター */
  .p-cta { display: block; }
  .p-cta__item a { height: 50px; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.1); }
  .p-footer__sns {
    position: static;
    width: 100%;
    height: 51px;
    padding-top: 18px;
    justify-content: center;
  }
  .p-footer__copyright { font-size: 12px; line-height: 50px; }

  .p-pagetop { width: 50px; }
  .p-pagetop a { writing-mode: horizontal-tb; padding: 12px 0; font-size: 10px; }
}

/* ==========================================================================
   16. 下層ページ（会社案内・講師プロフィールなど）

   本番サイトの page-noside テンプレートの設計値に合わせている。
   ・見出し … 上に細い罫線、中央寄せ、28px
   ・パンくず … 高さ60px、下に罫線
   ・本文 … 幅930px、上下120pxの余白
   ========================================================================== */

/* --- ページ見出し ------------------------------------------------------- */
.p-pagetitle {
  border-top: 1px solid #ddd;
  padding-top: var(--section-pt);
  margin-bottom: -5px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* --- パンくず ----------------------------------------------------------- */
.p-breadcrumb {
  border-bottom: 1px solid #ddd;
  margin-top: var(--section-pt);
}
/* 写真バナーのすぐ下に来るときは、間を空けずに続ける（現行サイトと同じ） */
.p-pagehero + .p-breadcrumb { margin-top: 0; }
.p-breadcrumb__list {
  width: var(--container);
  max-width: calc(100% - 40px);
  margin-inline: auto;
  height: 60px;
  line-height: 60px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.p-breadcrumb__item {
  display: inline;
  font-size: 14px;
  margin-right: 10px;
  padding-right: 20px;
  position: relative;
}
/* 区切りの「>」。本番はアイコンフォントだが、ここは自前で描く */
.p-breadcrumb__item::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  transform: rotate(45deg);
}
.p-breadcrumb__item:last-child::after { display: none; }
.p-breadcrumb__item a { transition: opacity .2s; }
.p-breadcrumb__item a:hover { opacity: .5; }

/* --- 本文 --------------------------------------------------------------- */
.p-article { position: relative; }

.p-article__body {
  width: var(--container);
  max-width: calc(100% - 40px);
  margin-inline: auto;
  padding: var(--section-pt) 0 var(--section-pb);
}
.p-article__body > * + * { margin-top: 0; }

.p-article__body p {
  line-height: 2.4;
  margin: 0 0 2em;
}
/* 本文中の見出し。大きさ・行間は現行サイトの実測値に合わせている */
/* ─────────────────────────────────────────────────────────────
   ここから下、本文の中身の見た目

   記事本文には <p> や <h3> がそのまま並ぶので、素のタグに直接指定しています。
   本文の中に「部品」を置くとこの指定とぶつかるため、
   部品のほうは親を1つ足した形で書いてあります。

     .p-menu .p-menu__title      ← 親を足すと、こちらが優先されます
     .p-menu__title              ← これだけだと本文の指定に負けます

   この書き方にしているので、このファイルに !important は要りません。
   部品を足すときも同じように「親 + 部品」で書いてください。
   ───────────────────────────────────────────────────────────── */
.p-article__body h2 {
  clear: both;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  margin: 0 0 1.3em;
}
.p-article__body h3 {
  clear: both;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 1.3em;
}
.p-article__body h2:not(:first-child),
.p-article__body h3:not(:first-child) { margin-top: 80px; }

.p-article__body ul,
.p-article__body ol { margin-bottom: 2em; }
.p-article__body li { line-height: 2.2; }
.p-article__body ol { list-style: decimal outside none; margin-left: 1.5em; }
.p-article__body img { max-width: 100%; height: auto; }

/* --- 引用（信念の一文などを強調する） ----------------------------------- */
.c-quote {
  margin: 0 0 2em;
  padding: 32px 40px;
  background: var(--tint);
  border-left: 3px solid var(--brand);
}
.c-quote p {
  margin: 0;
  font-size: 120%;
  line-height: 2;
  font-weight: 600;
}

/* --- 講師プロフィール欄 ------------------------------------------------- */
.p-profile {
  display: flex;
  gap: 50px;
  align-items: flex-start;
  margin-bottom: 90px;
}
.p-profile__photo {
  flex: 0 0 320px;
  margin: 0;
}
.p-profile__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.p-profile__meta { flex: 1 1 auto; min-width: 0; }

.p-profile__name {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 6px;
}
.p-profile__title {
  font-size: 14px;
  color: var(--brand);
  margin: 0 0 28px;
}

.p-profile__list { margin: 0; }
.p-profile__list dt {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 4px;
}
.p-profile__list dd {
  margin: 0 0 20px;
  line-height: 1.9;
}
.p-profile__list dd:last-child { margin-bottom: 0; }

.p-profile__credentials li {
  position: relative;
  padding-left: 16px;
  line-height: 1.9;
}
.p-profile__credentials li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .85em;
  width: 6px;
  height: 1px;
  background: var(--brand);
}

/* --- ページ末尾の導線 --------------------------------------------------- */
.p-cta-box {
  margin-top: 90px;
  padding: 50px 40px;
  background: var(--tint);
  text-align: center;
}
.p-cta-box .p-cta-box__lead {
  margin: 0 0 28px;
  line-height: 1.9;
}
.p-cta-box__buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.p-cta-box__buttons .c-button { margin: 0; }

.c-button--fill {
  color: var(--white);
  background: var(--brand);
}
.c-button--fill:hover {
  color: var(--brand);
  background: var(--white);
}

@media screen and (max-width: 800px) {
  .p-pagetitle { font-size: 20px; }
  .p-breadcrumb__list { height: 44px; line-height: 44px; }
  .p-breadcrumb__item { font-size: 12px; }

  .p-article__body h2:not(:first-child),
  .p-article__body h3:not(:first-child) { margin-top: 50px; }
  .p-article__body .common_catch { font-size: 20px; margin-bottom: 30px; }

  .p-profile {
    display: block;
    margin-bottom: 55px;
  }
  .p-profile__photo {
    width: 220px;
    margin: 0 auto 28px;
  }
  .p-profile__name { font-size: 20px; text-align: center; }
  .p-profile__title { text-align: center; }

  .c-quote { padding: 24px 22px; }

  .p-cta-box {
    margin-top: 55px;
    padding: 35px 20px;
  }
  .p-cta-box__buttons { gap: 14px; }
}

/* ==========================================================================
   17. 下層ページの部品（学院ページなどで使う）
   ========================================================================== */

/* --- 背景写真つきのページ見出し ----------------------------------------- */
.p-pagehero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  overflow: hidden;
}
.p-pagehero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.p-pagehero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}
/* 施術メニューのページで使う低いバナー */
.p-pagehero--small { height: 160px; }
/* 写真の上に黒い膜をかけて文字を読ませる */
.p-pagehero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0, 0, 0, .3);
}
.p-pagehero__title {
  position: relative;
  z-index: 3;
  margin: 0;
  padding-inline: 20px;
  color: var(--white);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}

/* --- サイト内検索 ------------------------------------------------------- */
.p-search {
  border-bottom: 1px solid #ddd;
  background: var(--white);
}
.p-search__form {
  width: min(var(--container), 100% - 40px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
}
.p-search__label {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--muted);
}
.p-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 2px;
  font: inherit;
  font-size: 15px;
}
.p-search__input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.p-search__submit {
  flex: 0 0 auto;
  padding: 11px 26px;
  border: none;
  background: var(--brand);
  color: var(--white);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.p-search__submit:hover { opacity: .85; }

@media screen and (max-width: 800px) {
  .p-search__form { gap: 8px; padding: 14px 0; }
  .p-search__label { display: none; }
}

/* --- 講師の紹介ブロック ------------------------------------------------- */
.p-teacher {
  display: flex;
  gap: 40px;
  align-items: center;
  margin: 60px 0 0;
  padding: 40px;
  background: var(--tint);
}
.p-teacher__photo { flex: 0 0 200px; margin: 0; }
.p-teacher__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.p-teacher__body { flex: 1 1 auto; min-width: 0; }
.p-teacher .p-teacher__name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.5;
}
.p-teacher .p-teacher__title {
  font-size: 14px;
  color: var(--brand);
  margin: 0 0 12px;
  line-height: 1.6;
}
.p-teacher .p-teacher__note {
  font-size: 14px;
  margin: 0 0 24px;
  line-height: 1.9;
}
.p-teacher .c-button { margin: 0; }

/* --- 表 ----------------------------------------------------------------- */
.c-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 2em;
  border-top: 1px solid #ddd;
}
.c-table th,
.c-table td {
  border-bottom: 1px solid #ddd;
  padding: 20px 24px;
  text-align: left;
  vertical-align: top;
  line-height: 2;
}
.c-table th {
  width: 190px;
  font-weight: 600;
  color: var(--brand);
  background: var(--tint);
  white-space: nowrap;
}

/* --- 本文中の写真 ------------------------------------------------------- */
.p-figure { margin: 0 0 2em; }
.p-figure img { display: block; width: 100%; }

/* --- 受講料 ------------------------------------------------------------- */
.p-price {
  margin: 0 0 2em;
  padding: 36px 40px;
  background: var(--tint);
  text-align: center;
}
.p-price .p-price__label {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--brand);
  line-height: 1.6;
}
.p-price .p-price__value {
  margin: 0 0 8px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
}
.p-price__value span { font-size: 18px; margin-left: 4px; }
.p-price .p-price__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
}

/* --- よくあるご質問 ----------------------------------------------------- */
/* 質問と答え（開閉式）。
   <details> を使っているので、開け閉めにJavaScriptは要りません。
   白い枠のカードを隙間なく積み、境目の線は重ねて1本に見せています。 */
.p-faq { margin: 44px 0; }

.p-faq__item {
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: -1px;
}

.p-faq__q {
  position: relative;
  display: block;
  padding: 20px 50px 18px 20px;
  font-size: 14px;
  line-height: 2;
  cursor: pointer;
  list-style: none;
}
.p-faq__q::-webkit-details-marker { display: none; }

/* 右端の開閉マーク（下向きの山形。開くと上向きになる） */
.p-faq__q::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -9px;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--brand-dark);
  border-bottom: 1px solid var(--brand-dark);
  transform: rotate(45deg);
  transition: transform .3s;
}
.p-faq__item[open] .p-faq__q::after {
  margin-top: -4px;
  transform: rotate(-135deg);
}

.p-faq__a {
  background: #f4f1ef;
  padding: 20px;
  font-size: 14px;
  line-height: 2;
}
.p-faq__item .p-faq__a p { margin: 0; line-height: 2; }

/* --- 補足の一文 --------------------------------------------------------- */
.c-note {
  padding: 24px;
  background: var(--tint);
  text-align: center;
  color: #666;
  margin-bottom: 2em;
}
/* ベージュ背景のセクションの中では、同色で沈むので白地にする */
.l-section--tint .c-note { background: var(--white); }

.p-cta-box .p-cta-box__note {
  margin: 24px 0 0;
  font-size: 14px;
  color: var(--brand);
  line-height: 1.6;
}

@media screen and (max-width: 1221px) {
  .p-article__body .common_catch { font-size: 26px; margin-bottom: 45px; }
  .p-pagehero__title { font-size: 29px; }
}

@media screen and (max-width: 800px) {
  .p-pagehero { height: 240px; }
  .p-pagehero__title { font-size: 24px; }

  .p-teacher {
    display: block;
    margin-top: 40px;
    padding: 28px 20px;
    text-align: center;
  }
  .p-teacher__photo { width: 160px; margin: 0 auto 20px; }
  .p-teacher .c-button { margin-inline: auto; }

  .c-table { border-top: 0; }
  .c-table tbody,
  .c-table tr,
  .c-table th,
  .c-table td { display: block; width: auto; }
  .c-table tr { border-top: 1px solid #ddd; }
  .c-table th { border-bottom: 0; padding: 14px 16px; white-space: normal; }
  .c-table td { padding: 14px 16px; }

  .p-price { padding: 28px 20px; }
  .p-price__value { font-size: 32px; }

  .p-faq__q { padding: 18px 40px 16px 16px; }
  .p-faq__q::after { right: 14px; }
  .p-faq__a { padding: 16px; }
}

/* ==========================================================================
   18. トップページのファーストビュー（文字を重ねる版）

   現行サイトのFVは写真のみだったが、依頼書4-1の指定により
   キャッチ・サブヘッド・CTA2本を重ねる構成にしている。
   文字を読ませるため、写真の上の膜を通常より濃くしている。
   ========================================================================== */

.p-hero--withtext .p-hero__slide::after { background: rgba(0, 0, 0, .42); }

.p-hero__inner {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--container);
  max-width: calc(100% - 40px);
  height: 730px;               /* スライダーと同じ高さに重ねる */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  pointer-events: none;        /* スライダーの操作を邪魔しない */
}
.p-hero__inner a { pointer-events: auto; }

.p-hero__catch {
  margin: 0 0 24px;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .04em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.p-hero__sub {
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.p-hero__meta {
  margin: 0 0 40px;
  font-size: 14px;
  line-height: 1.9;
  opacity: .92;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.p-hero__buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.p-hero__buttons .c-button { margin: 0; }

/* 写真の上に置く、白い枠線のボタン */
.c-button--ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .08);
}
.c-button--ghost:hover {
  color: var(--brand-dark);
  background: var(--white);
  border-color: var(--white);
}

/* --------------------------------------------------------------------------
   19. トップページの本文まわり
   -------------------------------------------------------------------------- */

/* 読みやすさのため、本文だけ少し狭くする */
.p-narrow {
  width: 760px;
  max-width: 100%;
  margin-inline: auto;
}
.p-narrow p {
  line-height: 2.4;
  margin: 0 0 2em;
}
.p-narrow p:last-child { margin-bottom: 0; }

.p-narrow__sign {
  text-align: right;
  font-weight: 600;
  color: var(--brand);
}

/* 講師ブロックをコンテナ幅いっぱいで使うとき */
.p-teacher--wide {
  margin-top: 0;
  padding: 50px;
  gap: 50px;
  align-items: flex-start;
}
.p-teacher--wide .p-teacher__photo { flex: 0 0 260px; }
/* 本文の段落だけをゆったりさせる。
   名前や肩書き（.p-teacher__name など）まで巻き込まないよう、
   class の付いていない <p> と信条文だけを対象にしている */
.p-teacher--wide .p-teacher__body > p:not([class]),
.p-teacher--wide .p-teacher__creed {
  line-height: 2.2;
  margin: 0 0 1.6em;
}
.p-teacher__creed {
  padding-left: 18px;
  border-left: 2px solid var(--brand);
  font-weight: 600;
}

.p-access__lead {
  text-align: center;
  line-height: 2;
  margin: -40px 0 40px;
}

@media screen and (max-width: 1221px) {
  .p-hero__catch { font-size: 36px; }
  .p-hero__sub { font-size: 16px; }
}

@media screen and (max-width: 1000px) {
  .p-teacher--wide { padding: 36px; gap: 36px; }
  .p-teacher--wide .p-teacher__photo { flex-basis: 200px; }
}

@media screen and (max-width: 800px) {
  /* SPはヒーローが左右20px内側・高さ600pxなので、それに合わせる */
  .p-hero__inner {
    height: 600px;
    width: auto;
    left: 0;
    right: 0;
    transform: none;
    padding-inline: 32px;
  }
  .p-hero__catch { font-size: 26px; margin-bottom: 16px; }
  .p-hero__sub { font-size: 14px; margin-bottom: 18px; }
  .p-hero__meta { font-size: 12px; margin-bottom: 28px; }
  .p-hero__buttons { gap: 12px; width: 100%; flex-direction: column; align-items: center; }

  .p-narrow { width: auto; }
  .p-narrow p { line-height: 2.1; }
  .p-narrow__sign { text-align: center; }

  .p-teacher--wide { padding: 28px 20px; gap: 0; }
  .p-teacher--wide .p-teacher__photo { flex-basis: auto; }
  .p-teacher__creed { text-align: left; }

  .p-access__lead { margin: -20px 0 28px; font-size: 14px; }
}

/* ==========================================================================
   20. 施術メニューの一覧（/hair-removal/ /esthetic/）
   ========================================================================== */

.p-article__body .c-lead {
  text-align: center;
  line-height: 2.2;
  margin: 0 0 60px;
}

.p-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin: 0 0 2em;
}
.p-menu__item { margin: 0; }

.p-menu__card {
  display: block;
  height: 100%;
  background: var(--white);
  border: 1px solid #e8e2db;
  transition: border-color .3s;
}
.p-menu__card:hover { border-color: var(--brand); }

.p-menu__thumb { overflow: hidden; }
.p-menu__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform .6s ease;
}
.p-menu__card:hover .p-menu__thumb img { transform: scale(1.05); }

.p-menu__body {
  padding: 26px 28px 30px;
  text-align: center;
}
.p-menu .p-menu__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 10px;
  text-align: center;
}
.p-menu .p-menu__price {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 600;
  color: var(--brand);
  line-height: 1.5;
}
.p-menu__price span { font-size: 12px; font-weight: 400; margin-left: 4px; }

.p-menu__more {
  display: inline-block;
  font-size: 14px;
  color: var(--brand-dark);
  padding-right: 18px;
  position: relative;
}
.p-menu__more::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border-top: 1px solid var(--brand-dark);
  border-right: 1px solid var(--brand-dark);
  transform: rotate(45deg);
}

@media screen and (max-width: 800px) {
  .p-article__body .c-lead { margin-bottom: 36px; text-align: left; }
  .p-menu { grid-template-columns: 1fr; gap: 24px; }
  .p-menu__body { padding: 20px 20px 24px; }
  .p-menu .p-menu__title { font-size: 17px; }
  .p-menu .p-menu__price { font-size: 16px; margin-bottom: 14px; }
}

/* ==========================================================================
   21. 本文の中で使われている既存クラスへの対応

   現行サイトの本文には、WordPress のブロック機能や旧テーマのクラス名が
   そのまま残っている。本文を書き直さずに引き継ぐため、ここで見た目を与える。

   ★ すべて .p-article__body の中だけに効くよう限定している ★
     `.item` `.title` `.desc` のような一般的な名前が、
     サイトの他の部分に影響しないようにするため。
   ========================================================================== */

/* --- 2カラム（旧テーマの two_col_content） ------------------------------ */
.p-article__body .two_col_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 70px;
}
.p-article__body .two_col_content > .item { width: calc(50% - 30px); }
.p-article__body .two_col_content .item img { display: block; margin: 0 auto; }
.p-article__body .two_col_content .item img + p { margin-top: -5px; }

/* --- 中央寄せの見出し（旧テーマの common_catch） ------------------------ */
.p-article__body .common_catch {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  color: var(--brand);
  margin: 0 0 60px;
}
/* 2段組みの中では小さめの見出しとして使われる */
.p-article__body .two_column_content .common_catch { margin-bottom: 15px; }

/* --- 質問と答えの並び（旧テーマの single_treatment_faq） ---------------- */
/* 画面いっぱいに広がる薄いグレーの帯。
   本文の幅（930px）を超えて左右いっぱいに色を敷きたいので、
   影を極端に大きくして背景の代わりにしている。
   clip-path は上下だけを切って、左右は切らないための指定。
   （横スクロールバーが出ない書き方） */
.p-article__body .single_treatment_faq {
  background: #f6f6f6;
  padding: 115px 0 120px;
  margin-bottom: 110px;
  box-shadow: 0 0 0 100vmax #f6f6f6;
  clip-path: inset(0 -100vmax);
}
.p-article__body .single_treatment_faq .title {
  position: relative;
  padding: 20px 20px 20px 44px;
  border-top: 1px solid #ddd;
  font-weight: 600;
  line-height: 1.8;
}
.p-article__body .single_treatment_faq .title::before {
  content: "Q";
  position: absolute;
  left: 14px;
  color: var(--brand);
  font-size: 18px;
}
.p-article__body .single_treatment_faq .desc {
  position: relative;
  padding: 0 20px 24px 44px;
  border-bottom: 1px solid #ddd;
  line-height: 2.2;
}
.p-article__body .single_treatment_faq .desc::before {
  content: "A";
  position: absolute;
  left: 14px;
  top: 0;
  color: var(--muted);
  font-size: 18px;
}
.p-article__body .single_treatment_faq .desc p:last-child { margin-bottom: 0; }

/* --- WordPress のブロック機能 ------------------------------------------ */
/* 段落・画像・段組みには余白を持たせない。
   間隔は本文中にある「空の段落」（下余白 2em）だけで作る。
   ─ 現行サイトと同じ作りにしてあるので、記事の見た目がそのまま再現される */
.p-article__body .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 0;
}
.p-article__body .wp-block-column > *:last-child { margin-bottom: 0; }
/* かたまりの最後の要素は下余白を作らない。
   段落・箱・表のどれであっても、いちばん下に余分な隙間が空かないようにする。
   （現行サイトの .post_content *:last-child と同じ指定） */
.p-article__body *:last-child { margin-bottom: 0; }
.p-article__body .wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}
.p-article__body .wp-block-image { margin: 0; }
.p-article__body .wp-block-image img { display: block; max-width: 100%; height: auto; }
.p-article__body .wp-block-spacer { flex-basis: 100%; }

/* --- 本文中の表 ---------------------------------------------------------
   記事本文に置かれた表の共通の見た目。
   ページ固有のCSS（assets/css/pages/*.css）があればそちらが優先される。 */
.p-article__body table {
  margin: 0 0 2em;
  width: 100%;
}
.p-article__body td,
.p-article__body th {
  border: 1px solid #ddd;
  padding: 15px 30px 13px;
  line-height: 2.2;
  background: #fff;
  box-sizing: border-box;
}
.p-article__body th {
  background: #f7f7f7;
  font-weight: normal;
}

/* WordPressの「中央寄せ」。
   figure は幅いっぱいに広がってしまうので display:table で写真の幅まで縮め、
   左右の余白を auto にして中央に置く（WordPress本体と同じ考え方） */
.p-article__body .aligncenter { display: table; margin-inline: auto; }
.p-article__body figure { margin: 0; }
.p-article__body .alignleft   { display: block; margin-right: auto; }
.p-article__body .alignright  { display: block; margin-left: auto; }
.p-article__body .size-full,
.p-article__body .size-large { max-width: 100%; height: auto; }

.p-article__body .has-text-align-center { text-align: center; }
.p-article__body .has-text-align-right  { text-align: right; }
.p-article__body .has-text-align-left   { text-align: left; }

/* 色つき文字（本文中で指定されているもの） */
.p-article__body .has-luminous-vivid-orange-color { color: #ff6900; }
.p-article__body .has-vivid-red-color { color: #cf2e2e; }

/* 効かせる必要のない目印。定義だけ置いて未定義の警告を出さないようにする */
.p-article__body .wp-block-heading,
.p-article__body .wp-block-paragraph,
.p-article__body .no_editor_style,
.p-article__body .is-layout-flow,
.p-article__body .is-layout-flex,
.p-article__body .wp-elements-1,
.p-article__body .has-text-color,
.p-article__body .has-link-color { /* 見た目の指定なし */ }

@media screen and (max-width: 800px) {
  .p-article__body .two_col_content { display: block; margin-bottom: 40px; }
  .p-article__body .two_col_content > .item { width: auto; margin-bottom: 40px; }
  .p-article__body .two_col_content > .item:last-of-type { margin-bottom: 0; }

  .p-article__body .wp-block-columns { display: block; }
  .p-article__body .wp-block-column { margin-bottom: 28px; }

  .p-article__body .single_treatment_faq .title { padding: 16px 12px 16px 34px; }
  .p-article__body .single_treatment_faq .title::before { left: 8px; font-size: 16px; }
  .p-article__body .single_treatment_faq .desc { padding: 0 12px 20px 34px; }
  .p-article__body .single_treatment_faq .desc::before { left: 8px; font-size: 16px; }
}

/* --- 本文に残っているが、見た目の指定が要らないクラス --------------------
   元サイトでも無指定だったもの、および WordPress が付ける目印。
   「定義漏れではない」と分かるよう、意図的にここへ並べている。 */
.p-article__body .flash-section,
.p-article__body .mens-section,
.p-article__body .recommendation_content,
.p-article__body .wp-block-columns-is-layout-flex,
.p-article__body .wp-block-column-is-layout-flow { /* 見た目の指定なし */ }

/* 旧テーマではアコーディオンの開閉に使われていた（height:0 で閉じる）。
   本サイトでは JavaScript を使わず、回答を最初から見せる方針にしたため、
   閉じる指定は引き継いでいない。 */
.p-article__body .desc_area { display: block; }

/* ==========================================================================
   22. お問い合わせ（/contact/）
   ========================================================================== */

.p-contact {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
  margin: 0 0 90px;
}

.p-contact__main,
.p-contact__sub {
  padding: 40px;
  text-align: center;
}
.p-contact__main {
  background: var(--tint);
  border: 1px solid var(--brand);
}
.p-contact__sub {
  background: var(--white);
  border: 1px solid #e8e2db;
}

.p-contact .p-contact__label {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 16px;
  background: var(--brand);
  color: var(--white);
  font-size: 12px;
  line-height: 1.8;
}
.p-contact .p-contact__title {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  margin: 0 0 16px;
}
.p-contact .p-contact__text {
  text-align: left;
  line-height: 2.1;
  margin: 0 0 28px;
}

.p-contact__qr { margin-bottom: 28px; }
.p-contact__qr img {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto 10px;
  background: var(--white);
  padding: 10px;
}
.p-contact .p-contact__id {
  margin: 0;
  font-size: 14px;
  color: var(--brand);
  line-height: 1.6;
}

.p-contact .c-button { margin-inline: auto; }

/* 「ホットペッパービューティー」は長いので、こちらだけ小さめにする */
.p-contact .p-contact__sub .p-contact__title { font-size: 20px; }

@media screen and (max-width: 800px) {
  .p-contact {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 55px;
  }
  .p-contact__main,
  .p-contact__sub { padding: 28px 20px; }
  .p-contact .p-contact__title { font-size: 20px; }
  .p-contact__qr img { width: 170px; height: 170px; }
}

/* ==========================================================================
   23. ブログ（WordPress側）

   静的ページと同じCSSを読み込むので、見た目が揃う。
   カード自体は トップページのカルーセルと同じ .p-blog__* を使い回している。
   ========================================================================== */

/* --- 記事一覧 ----------------------------------------------------------- */
.p-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 30px;
  margin: 0 0 70px;
}
.p-cards__item { margin: 0; }
.p-cards .p-blog__card {
  display: block;
  height: 100%;
  border: 1px solid #e8e2db;
  transition: border-color .3s;
}
.p-cards .p-blog__card:hover { border-color: var(--brand); }
.p-cards .p-blog__title { font-size: 16px; }

/* --- ページ送り --------------------------------------------------------- */
.p-pagination { margin: 0 0 2em; }
.p-pagination .nav-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.p-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border: 1px solid #ddd;
  font-size: 14px;
  transition: color .3s, background-color .3s, border-color .3s;
}
.p-pagination a.page-numbers:hover {
  color: var(--white);
  background: var(--brand);
  border-color: var(--brand);
}
.p-pagination .page-numbers.current {
  color: var(--white);
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}
.p-pagination .page-numbers.dots { border-color: transparent; }
/* 画面読み上げ用の見出しは隠す */
.p-pagination .screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 記事の詳細 --------------------------------------------------------- */
.p-article__body .p-post__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}
.p-post__cats a { color: var(--brand); }
.p-post__cats a:hover { opacity: .7; }

.p-post__thumb { margin: 0 0 44px; }
.p-post__thumb img { display: block; width: 100%; height: auto; }

/* --- 著者ブロック（記事末尾） ------------------------------------------- */
.p-teacher--author { margin-top: 80px; }
.p-teacher .p-teacher__label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 14px;
  background: var(--brand);
  color: var(--white);
  font-size: 12px;
  line-height: 1.8;
}

/* --- 前後の記事 --------------------------------------------------------- */
.p-postnav {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 50px 0;
  padding: 24px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
  line-height: 1.9;
}
.p-postnav__prev { text-align: left; }
.p-postnav__next { text-align: right; margin-left: auto; }
.p-postnav a { transition: opacity .3s; }
.p-postnav a:hover { opacity: .6; }

@media screen and (max-width: 1000px) {
  .p-cards { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
}

@media screen and (max-width: 800px) {
  .p-cards { grid-template-columns: 1fr; gap: 24px; margin-bottom: 45px; }
  .p-post__thumb { margin-bottom: 30px; }
  .p-teacher--author { margin-top: 50px; }
  .p-postnav { display: block; }
  .p-postnav__next { text-align: left; margin-top: 14px; display: block; }
}

/* ==========================================================================
   24. 本文の中の旧テーマ由来ブロック（アクセスページなどで使用）

   すべて .p-article__body の中だけに効く。
   ========================================================================== */

.p-article__body .design_content { position: relative; }
.p-article__body .design_content + .design_content { margin-top: 90px; }

/* 見出し（左）と本文（右）の2カラム */
.p-article__body .design_content .header {
  display: flex;
  flex-wrap: wrap;
}
.p-article__body .design_content .catch {
  width: 50%;
  padding-right: 35px;
  margin: 0;
  font-size: 130%;
  font-weight: 600;
  line-height: 1.7;
  text-align: left;
}
.p-article__body .design_content .content {
  width: 50%;
  padding-left: 35px;
}
.p-article__body .design_content .desc { line-height: 2.4; }
.p-article__body .design_content .desc.mobile { display: none; }   /* SP用の短い文 */

/* 見出しを中央に置く型 */
.p-article__body .design_content .header.layout_type1 { display: block; }
.p-article__body .design_content .header.layout_type1 .catch {
  width: auto;
  padding: 0;
  text-align: center;
}

.p-article__body .design_content .image,
.p-article__body .design_content .image_wrap { margin-top: 70px; position: relative; }
.p-article__body .design_content img { display: block; margin: 0 auto; max-width: 100%; height: auto; }

/* 背景色つきの帯 */
.p-article__body .color_bg_content {
  position: relative;
  padding: 90px 0;
  margin-bottom: 90px;
  background: var(--tint);
}

.p-article__body .clearfix::after { content: ""; display: table; clear: both; }
.p-article__body .alignnone { max-width: 100%; height: auto; }

/* --- WordPress のボタンブロック ---------------------------------------- */
.p-article__body .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0 0 2em;
}
.p-article__body .is-content-justification-center { justify-content: center; }
.p-article__body .wp-block-button__link {
  display: inline-block;
  min-width: 240px;
  padding: 18px 28px;
  text-align: center;
  color: var(--white);
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 0;
  line-height: 1.6;
  transition: color .3s, background-color .3s;
}
.p-article__body .wp-block-button__link:hover {
  color: var(--brand);
  background: var(--white);
}
/* 枠線だけのボタン */
.p-article__body .is-style-outline .wp-block-button__link {
  color: var(--brand);
  background: transparent;
}
.p-article__body .is-style-outline .wp-block-button__link:hover {
  color: var(--white);
  background: var(--brand);
}
.p-article__body .has-custom-width .wp-block-button__link { width: 100%; }

/* --- 文字サイズ・注記（Snow Monkey Editor 由来） ------------------------ */
.p-article__body .has-medium-font-size { font-size: 18px; }
.p-article__body .has-small-font-size  { font-size: 14px; }
.p-article__body .has-large-font-size  { font-size: 22px; }
.p-article__body .is-style-sme-alert-remark { /* 装飾なし（本番準拠） */ }
.p-article__body .is-style-outline--1 { /* WordPressが付ける連番。指定なし */ }

@media screen and (max-width: 800px) {
  .p-article__body .design_content .header { display: block; }
  .p-article__body .design_content .catch,
  .p-article__body .design_content .content {
    width: auto;
    padding: 0;
  }
  .p-article__body .design_content .content { margin-top: 20px; }
  .p-article__body .design_content .desc { display: none; }         /* PC用は隠す */
  .p-article__body .design_content .desc.mobile { display: block; } /* SP用を出す */
  .p-article__body .design_content .image,
  .p-article__body .design_content .image_wrap { margin-top: 35px; }
  .p-article__body .color_bg_content { padding: 55px 0; margin-bottom: 55px; }
  .p-article__body .wp-block-button__link { min-width: 0; width: 100%; }
}

/* --- 本文に残るその他のクラス ------------------------------------------- */

/* 2カラム（アクセスページの「電車で/お車で」など） */
.p-article__body .two_column_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 60px;
  margin-bottom: 60px;
}
.p-article__body .two_column_content > .item { flex: 1 1 calc(50% - 30px); min-width: 0; }
/* 見出しブロックは横並びに加わらず、1行使って中央に出す */
.p-article__body .two_column_content > .header {
  flex: 0 0 100%;
  text-align: center;
  margin-bottom: 10px;
}
.p-article__body .two_column_content > .header .desc { line-height: 2.2; }
.p-article__body .map_desc h3 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 600;
  color: var(--brand);
  line-height: 1.6;
}
.p-article__body .map_desc p { line-height: 2; }

.p-article__body .post_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* 見た目の指定が要らない目印（元サイトでも modifier のみ） */
.p-article__body .layout_type2,
.p-article__body .no_bg_color,
.p-article__body .wp-block-button,
.p-article__body .wp-block-buttons-is-layout-flex,
.p-article__body .sme-font-size,
.p-article__body .sme-highlighter,
.p-article__body .wp-element-button { /* 見た目の指定なし（元サイト準拠） */ }

/* ボタンを半分幅にする指定 */
.p-article__body .wp-block-button__width-50 { flex-basis: calc(50% - 8px); }
.p-article__body .wp-block-button__width-50 .wp-block-button__link { width: 100%; min-width: 0; }

/* Snow Monkey Editor の装飾クラス。
   本番ではプラグインのCSSがフロント側に読み込まれておらず、装飾なしで
   表示されている。忠実に合わせるため、こちらも装飾を付けない。
   （枠を付けたい場合はここに指定を書けば有効になる） */
.p-article__body .is-style-sme-alert-success { /* 装飾なし（本番準拠） */ }

@media screen and (max-width: 800px) {
  .p-article__body .two_column_content { display: block; margin-bottom: 40px; }
  .p-article__body .two_column_content > .item { margin-bottom: 32px; }
  .p-article__body .post_list { grid-template-columns: 1fr; gap: 20px; }
  .p-article__body .wp-block-button__width-50 { flex-basis: 100%; }
}

/* --- ほかのメニュー（施術メニュー個別ページの末尾） ---------------------
   現行サイトと同じ見た目。白いカードを2列に並べ、内側の境目だけを
   細い線で区切る。並ぶ内容は src/data/treatments.php から作られる。 */
.p-siblings {
  background: #f4f1ef;
  padding: 120px 0;
}

.p-siblings__list {
  width: min(930px, 100% - 40px);
  margin: 0 auto 80px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.p-siblings__item { width: 50%; }

.p-siblings__link {
  display: flex;
  align-items: center;
  gap: 30px;
  height: 100%;
  padding: 20px 30px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
}
/* 1行目には上線を、右端には右線を引かない */
.p-siblings__item:nth-child(-n+2) .p-siblings__link { border-top: none; }
.p-siblings__item:nth-child(2n)   .p-siblings__link { border-right: none; }
.p-siblings__item:last-child      .p-siblings__link { border-right: none; }

.p-siblings__thumb {
  flex: 0 0 80px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}
.p-siblings__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.p-siblings__title {
  font-weight: 500;
  line-height: 1.6;
  transition: transform .35s ease;
}
/* マウスを乗せると文字が少し右へ動く */
.p-siblings__link:hover .p-siblings__title { transform: translateX(14px); }

.p-siblings__more { text-align: center; margin: 0; }
.p-siblings__more .c-button { margin-inline: auto; }

@media screen and (max-width: 800px) {
  .p-siblings { padding: 60px 0; }
  .p-siblings__list { margin-bottom: 40px; }
  .p-siblings__item { width: 100%; }
  .p-siblings__link { gap: 20px; padding: 16px 20px; border-right: none; }
  .p-siblings__item:nth-child(2) .p-siblings__link { border-top: 1px solid #ddd; }
  .p-siblings__thumb { flex-basis: 60px; width: 60px; height: 60px; }
}