@charset "utf-8";
/* ==========================================================================
   美容室MIRAI  style.css
   - Bootstrap 4.1.3 / common.css を土台に、案件固有の指定のみを記述
   - Bootstrap で表現できるレイアウト（row/col-*, d-flex, text-*, m-*, p-* 等）は
     HTML 側のクラスで指定し、ここには重複して書かない
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 変数
   -------------------------------------------------------------------------- */
:root {
  /* フォント */
  --font-base:
    ryo-gothic-plusn, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic", "游ゴシック体", meiryo, sans-serif;
  --font-mincho:
    shippori-mincho-b1, "Shippori Mincho B1", "Shippori Mincho",
    "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;

  /* カラー */
  --c-base: #f7f6eb; /* ベース背景（生成り） */
  --c-band: #f1edcf; /* ベージュ帯 */
  --c-band-2: #f3edcf; /* コピーライトバー */
  --c-sage: #a8ae94; /* セージグリーン背景 */
  --c-green: #687e6d; /* ボタン・アイコン */
  --c-moss: #606704; /* 見出しアクセント（濃いオリーブ） */
  --c-khaki: #bcb471; /* Service 見出し（淡いカーキ） */
  --c-navy: #171b6b; /* 予約CTA */
  --c-gold: #c8b845; /* 六角形アクセント */
  --c-text: #151209; /* 本文 */
  --c-white: #fff;

  /* レイアウト */
  --inner-wide: 1332px; /* TOP の広いコンテンツ幅 */
  --inner: 1152px; /* 下層ページの標準コンテンツ幅 */
  --inner-narrow: 960px;
  --header-h: 80px;
  --stage-max: 1512px; /* デザイン原寸。これ以上広がっても外へ引っ張らない */

  /* 余白（セクション） */
  --sec-pt: clamp(56px, 8vw, 120px);
  --sec-pb: clamp(56px, 8vw, 120px);
}

/* --------------------------------------------------------------------------
   2. ベース
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: auto;
}

body {
  font-family: var(--font-base);
  font-weight: 500;
  font-style: normal;
  font-size: 16px;
  line-height: 2.4;
  letter-spacing: 0.08em;
  color: var(--c-text);
  background-color: var(--c-base);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  word-break: auto-phrase;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none !important;
  transition:
    color 0.3s,
    opacity 0.3s;
}

a:hover {
  color: var(--c-moss);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
}

p {
  margin: 0;
}

::selection {
  background: var(--c-sage);
  color: #fff;
}

/* 汎用 ------------------------------------------------------------------ */
.ff-mincho {
  font-family: var(--font-mincho);
  font-weight: 700;
}
.fw-bold {
  font-weight: 700;
}

.fc-moss {
  color: var(--c-moss) !important;
}
.fc-khaki {
  color: var(--c-khaki) !important;
}
.fc-green {
  color: var(--c-green) !important;
}
.fc-white {
  color: var(--c-white) !important;
}
.fc-navy {
  color: var(--c-navy) !important;
}

.bg-base {
  background-color: var(--c-base);
}
.bg-band {
  background-color: var(--c-band);
}
.bg-sage {
  background-color: var(--c-sage);
}
.bg-white2 {
  background-color: var(--c-white);
}

/* 内側コンテナ（Bootstrap の container ではなく案件固有の幅） */
.l-inner,
.l-inner-wide,
.l-inner-narrow {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}
.l-inner {
  max-width: calc(var(--inner) + 48px);
}
.l-inner-wide {
  max-width: calc(var(--inner-wide) + 48px);
}
.l-inner-narrow {
  max-width: calc(var(--inner-narrow) + 48px);
}

.l-section {
  position: relative;
  padding-top: var(--sec-pt);
  padding-bottom: var(--sec-pb);
}

/* 画面外へはみ出す装飾を止める */
.l-clip {
  overflow-x: clip;
}

/* 全幅（フルブリード）レイアウトの上限。1512px を超えても外へ広がらない */
.l-stage {
  width: 100%;
  max-width: var(--stage-max);
  margin-left: auto;
  margin-right: auto;
}
/* 絶対配置要素を「画面端」ではなく「1512px ステージの端」に合わせるための余白 */
.l-edge,
.deco {
  --edge: max(0px, (100% - var(--stage-max)) / 2);
}

/* 見出し ---------------------------------------------------------------- */
.ttl-en {
  font-family: var(--font-mincho);
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: 0.24em;
  line-height: 1.6;
  color: var(--c-moss);
  display: block;
}

.ttl-lead {
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 0.16em;
  line-height: 2;
  color: var(--c-moss);
  font-weight: 700;
}

.ttl-h2 {
  font-size: clamp(19px, 2.4vw, 32px);
  letter-spacing: 0.14em;
  line-height: 1.7;
  font-weight: 400;
}
@media (max-width: 575.98px) {
  .ttl-h2 {
    font-size: 19px;
    letter-spacing: 0.08em;
  }
  .list-dot li {
    font-size: 12px;
    letter-spacing: 0.02em;
    padding-left: 20px;
  }
  .list-dot li::before {
    width: 7px;
    height: 7px;
  }
}

.ttl-h3 {
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.12em;
  line-height: 1.8;
}

.ttl-line {
  width: 200px;
  max-width: 40%;
  height: 1px;
  background: var(--c-moss);
  border: 0;
  opacity: 0.6;
  margin: 24px auto;
}

.txt-lg {
  font-size: clamp(14px, 1.7vw, 20px);
  line-height: 2.6;
  letter-spacing: 0.12em;
}
.txt-md {
  font-size: clamp(12px, 1.4vw, 16px);
  line-height: 2.4;
  letter-spacing: 0.1em;
}
.txt-sm {
  font-size: clamp(10px, 1.2vw, 14px);
  line-height: 2.2;
  letter-spacing: 0.08em;
}

/* SPのみ / PCのみ改行 */
.sp-br {
  display: none;
}
@media (max-width: 767.98px) {
  .sp-br {
    display: inline;
  }
  .pc-br {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. ボタン
   -------------------------------------------------------------------------- */
.btn-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: min(230px, 100%);
  min-height: 58px;
  padding: 12px 68px 12px 32px;
  border-radius: 999px;
  background: var(--c-green);
  color: var(--c-white) !important;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: 0.1em;
  line-height: 1.4;
  box-shadow: 0 6px 16px rgba(21, 18, 9, 0.12);
  transition:
    background-color 0.3s,
    transform 0.3s,
    box-shadow 0.3s;
}
.btn-more::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  background: url(../images/icon-arrow-circle-white.svg) center/contain
    no-repeat;
  transition: right 0.3s;
}
.btn-more:hover {
  background: var(--c-moss);
  color: var(--c-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(21, 18, 9, 0.18);
}
.btn-more:hover::after {
  right: 16px;
}

/* 白抜きボタン（予約CTA内） */
.btn-reserve {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(493px, 100%);
  min-height: 72px;
  padding: 16px 24px;
  background: var(--c-white);
  color: var(--c-navy) !important;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 20px);
  letter-spacing: 0.2em;
  border-radius: 4px;
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.3s;
}
.btn-reserve:hover {
  transform: translateY(-2px);
}
.btn-reserve:hover {
  background: var(--c-band);
  color: var(--c-navy) !important;
}

/* 横並びカードリンク（FAQ / 症例紹介 など） */
.btn-card {
  display: flex;
  align-items: center;
  justify-content: start;
  position: relative;
  width: 100%;
  min-height: clamp(88px, 8vw, 121px);
  padding: 16px 64px 16px 24px;
  border-radius: 8px;
  background: var(--c-green);
  color: var(--c-white) !important;
  transition:
    background-color 0.3s,
    transform 0.3s,
    box-shadow 0.3s;
}
.btn-card .btn-card__ja {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: clamp(15px, 1.6vw, 19px);
  letter-spacing: 0.14em;
}
.btn-card .btn-card__en {
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  margin-left: 16px;
  opacity: 0.85;
}
.btn-card::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  background: url(../images/icon-arrow-circle-white.svg) center/contain
    no-repeat;
  transition: right 0.3s;
}
.btn-card {
  box-shadow: 0 6px 16px rgba(21, 18, 9, 0.1);
}
.btn-card:hover {
  background: var(--c-moss);
  color: var(--c-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(21, 18, 9, 0.16);
}
.btn-card:hover::after {
  right: 14px;
}

/* 白カードリンク（TOP Information 内） */
.btn-wcard {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 345px;
  min-height: 70px;
  padding: 12px 60px 12px 24px;
  border-radius: 10px;
  background: #fff;
  color: var(--c-moss) !important;
  font-family: var(--font-base);
  font-size: clamp(14px, 1.4vw, 16px);
  letter-spacing: 0.14em;
  transition:
    background-color 0.3s,
    transform 0.3s;
}
.btn-wcard:hover {
  transform: translateY(-2px);
}
.btn-wcard::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  background: url(../images/icon-arrow-circle.svg) center/contain no-repeat;
  transition: right 0.3s;
}
.btn-wcard:hover {
  background: var(--c-band);
}
.btn-wcard:hover::after {
  right: 12px;
}

/* テキストリンク（Google Map 等） */
.link-arrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
}
.link-arrow::after {
  content: "";
  width: 21px;
  height: 21px;
  margin-left: 10px;
  background: url(../images/icon-arrow-sm-green.svg) center/contain no-repeat;
  transition: transform 0.3s;
}
.link-arrow:hover::after {
  transform: translateX(4px);
}

/* ページ送りボタン */
.btn-pager {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-width: 210px;
  min-height: 70px;
  padding: 12px 24px;
  background: var(--c-white);
  color: var(--c-text) !important;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
  border-radius: 999px;
  transition:
    background-color 0.3s,
    transform 0.3s;
}
.btn-pager:hover {
  transform: translateY(-2px);
}
.btn-pager:hover {
  background: var(--c-band);
}
.btn-pager.is-back {
  background: var(--c-band);
}
.btn-pager.is-back:hover {
  background: var(--c-sage);
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   4. ヘッダー / ナビ / 固定予約ボタン
   -------------------------------------------------------------------------- */
.a-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 900;
  transition:
    background-color 0.4s,
    box-shadow 0.4s;
}
.a-nav.has-bg {
  background: rgba(247, 246, 235, 0.92);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 12px rgba(21, 18, 9, 0.06);
}

.a-nav__inner {
  height: 100%;
  padding-left: clamp(16px, 2vw, 24px);
  padding-right: clamp(70px, 6vw, 92px);
}

.a-logo {
  display: flex;
  align-items: baseline;
  font-family: var(--font-mincho);
  color: var(--c-green);
  line-height: 1;
  white-space: nowrap;
}
.a-logo__sm {
  font-size: clamp(14px, 1.5vw, 19px);
  letter-spacing: 0.06em;
}
.a-logo__lg {
  font-size: clamp(19px, 2.2vw, 28px);
  letter-spacing: 0.04em;
  margin-left: 0.35em;
}

.a-tagline {
  font-size: 13px;
  letter-spacing: 0.08em;
  margin-left: clamp(12px, 2vw, 28px);
  white-space: nowrap;
}

/* ハンバーガー */
.a-burger {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 1000;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--c-green);
  color: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.3s,
    transform 0.3s;
}
.a-burger:focus,
.a-burger:active,
.a-burger:focus-visible {
  outline: 0;
  box-shadow: none;
}
.a-burger:focus-visible {
  box-shadow: 0 0 0 3px rgba(96, 103, 4, 0.35);
}
.a-burger:hover {
  background: var(--c-moss);
  transform: translateY(-2px);
}
.a-burger span {
  position: relative;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transition:
    transform 0.3s,
    opacity 0.3s,
    width 0.3s,
    height 0.3s,
    border-radius 0.3s;
}
.a-burger span::before,
.a-burger span::after {
  content: "";
  position: absolute;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  transition:
    transform 0.3s,
    opacity 0.3s,
    width 0.3s,
    height 0.3s,
    border-radius 0.3s;
}
.a-burger span::before {
  left: -11px;
}
.a-burger span::after {
  left: 11px;
}
.a-burger.is-active span {
  width: 22px;
  height: 2px;
  border-radius: 0;
  transform: rotate(45deg);
}
.a-burger.is-active span::before {
  left: 0;
  width: 22px;
  height: 2px;
  border-radius: 0;
  transform: rotate(-90deg);
}
.a-burger.is-active span::after {
  opacity: 0;
}

/* 固定予約ボタン */
.a-reserve {
  position: fixed;
  top: 93px;
  right: 0;
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 89px;
  height: 97px;
  padding: 10px 6px;
  border-radius: 6px 0 0 6px;
  background: var(--c-navy);
  color: var(--c-white) !important;
  transition:
    background-color 0.3s,
    transform 0.3s;
}
.a-reserve img {
  width: 27px;
  height: auto;
}
.a-reserve span {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.4;
}
.a-reserve:hover {
  background: #0d1050;
  color: var(--c-white) !important;
  transform: scale(1.05);
}

@media (max-width: 991.98px) {
  .a-reserve {
    top: auto;
    bottom: 16px;
    right: 16px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(21, 18, 9, 0.25);
  }
  .a-reserve img {
    width: 22px;
  }
  .a-reserve span {
    margin-top: 4px;
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .a-reserve:hover {
    transform: translateY(-4px);
  }
}

/* オーバーレイナビ */
.a-nav-menu {
  display: none;
  opacity: 0;
  position: fixed;
  inset: 0;
  z-index: 990;
  background: rgba(247, 246, 235, 0.98);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 96px 24px 64px;
}
.a-nav-menu__list {
  max-width: 720px;
  margin: 0 auto;
}
.a-nav-menu__list li + li {
  border-top: 1px solid rgba(96, 103, 4, 0.2);
}
.a-nav-menu__list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 1.2rem 0.2rem;
  font-size: clamp(14px, 2vw, 20px);
  letter-spacing: 0.14em;
  line-height: 1.2;
  gap: 0.6rem;
}
.a-nav-menu__list a .en {
  font-family: var(--font-mincho);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--c-moss);
}
.a-nav-menu__list a:hover {
  color: var(--c-moss);
}
.a-nav-menu__head {
  margin: 24px 0 8px;
  font-family: var(--font-mincho);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--c-moss);
}

@media (max-height: 520px) {
  .a-nav-menu {
    padding-top: 72px;
  }
  .a-nav-menu__list a {
    padding: 9px 4px;
  }
}

/* --------------------------------------------------------------------------
   5. 装飾（雲・霞・麻の葉・竹）
   -------------------------------------------------------------------------- */
.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.deco.front {
  z-index: 2;
}

.deco img {
  display: block;
  width: 100%;
  height: auto;
}

/* オフセットは「画面端」ではなく「1512px ステージの端」基準。
   max()/min() で 1512px 相当の値を上限にしている */
.deco--cloud-tr {
  top: 6%;
  right: calc(var(--edge) + max(-2%, -30px));
  width: min(383px, 30%);
}
.deco--cloud-bl {
  bottom: 6%;
  left: calc(var(--edge) + max(-3%, -45px));
  width: min(406px, 32%);
}
.deco--kasumi-r {
  top: 8%;
  right: calc(var(--edge) + max(-4%, -60px));
  width: min(453px, 34%);
}
.deco--kasumi-l {
  bottom: 6%;
  left: calc(var(--edge) + max(-6%, -91px));
  width: min(453px, 34%);
}
.deco--asanoha-l {
  top: 8%;
  left: calc(var(--edge) + max(-14%, -212px));
  width: min(704px, 52%);
  opacity: 0.9;
}
.deco--asanoha-r {
  bottom: 0;
  right: calc(var(--edge) + max(-12%, -181px));
  width: min(838px, 58%);
  opacity: 0.9;
}
.deco--bamboo-1 {
  right: calc(var(--edge) + min(2%, 30px));
  bottom: -6%;
  width: min(134px, 12%);
}
.deco--bamboo-2 {
  right: calc(var(--edge) + min(8%, 121px));
  bottom: 2%;
  width: min(128px, 11%);
}

@media (max-width: 767.98px) {
  .deco--asanoha-l,
  .deco--asanoha-r {
    opacity: 0.6;
  }
}

/* --------------------------------------------------------------------------
   6. FV（下層ページ共通）
   -------------------------------------------------------------------------- */
.p-fv {
  position: relative;
  padding-top: clamp(110px, 12vw, 160px);
  padding-bottom: clamp(40px, 6vw, 72px);
  overflow-x: clip;
}
.p-fv__ttl {
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: 0.18em;
  line-height: 1.5;
  color: var(--c-green);
}
/* 画面右上の固定「予約する」ボタンと見出しが重ならないようにする */
@media (max-width: 991.98px) {
  .p-fv > .l-inner > .p-fv__ttl,
  .p-fv > .l-inner > .p-fv__lead {
    padding-right: 96px;
  }
}
@media (max-width: 575.98px) {
  .p-fv > .l-inner > .p-fv__ttl,
  .p-fv > .l-inner > .p-fv__lead {
    padding-right: 76px;
  }
}
.p-fv__lead {
  margin-top: clamp(16px, 2vw, 26px);
  font-size: clamp(13px, 1.4vw, 16px);
  line-height: 2.3;
  letter-spacing: 0.1em;
}
.p-fv__img {
  position: relative;
  z-index: 1;
  margin-top: clamp(24px, 3.4vw, 46px);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1152 / 553;
}
.p-fv__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   7. 予約CTA（全ページ共通）
   -------------------------------------------------------------------------- */
.p-cta {
  position: relative;
  background: var(--c-white);
  border-radius: 40px 40px 0 0;
  padding: clamp(56px, 8vw, 120px) 0;
  overflow: hidden;
}
.p-cta__panel {
  position: relative;
  max-width: 950px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px);
  border-radius: 10px;
  background: var(--c-navy);
  overflow: hidden;
  text-align: center;
}
.p-cta__pattern {
  position: absolute;
  inset: 0;
  background: url(../images/deco-cta-pattern.png) center/cover no-repeat;
  opacity: 0.5;
}
.p-cta__inner {
  position: relative;
  z-index: 1;
}
.p-cta__en {
  font-family: var(--font-mincho);
  font-size: 14px;
  letter-spacing: 0.24em;
  color: var(--c-white);
}
.p-cta__ttl {
  margin-top: 8px;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: 0.18em;
  color: var(--c-white);
}
.p-cta__lead {
  margin-top: 14px;
  margin-bottom: 26px;
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: 0.1em;
  color: var(--c-white);
}

/* --------------------------------------------------------------------------
   8. フッター
   -------------------------------------------------------------------------- */
.l-footer {
  position: relative;
  background: var(--c-base);
  overflow: hidden;
}
/* padding ショートハンドで .l-inner-wide の左右余白を打ち消さないよう上下のみ指定 */
.l-footer__inner {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.l-footer__logo {
  width: min(214px, 46%);
}
.l-footer__name {
  margin-top: 12px;
  font-family: var(--font-mincho);
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--c-moss);
}
.l-footer__tagline {
  margin-top: 10px;
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.08em;
}
.l-footer__hr {
  width: 100%;
  max-width: 300px;
  height: 1px;
  background: rgba(96, 103, 4, 0.35);
  margin: 22px 0;
  border: 0;
}
.l-footer__addr {
  font-size: 13px;
  letter-spacing: 0.06em;
  line-height: 2;
}

.l-footer__card {
  position: relative;
  background: var(--c-white);
  border-radius: 10px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3.5vw, 48px);
}
.l-footer__card-head {
  display: flex;
  align-items: center;
  margin: 26px 0 14px;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--c-khaki);
  white-space: nowrap;
}
.l-footer__card-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  margin-left: 18px;
  background: rgba(96, 103, 4, 0.3);
}
.l-footer__nav a {
  font-size: 15px;
  letter-spacing: 0.12em;
}
.l-footer__nav-sub a {
  font-size: 13px;
  letter-spacing: 0.1em;
}
.l-footer__nav li,
.l-footer__nav-sub li {
  margin-right: clamp(20px, 3vw, 42px);
}

.l-footer__copy {
  background: var(--c-band-2);
  text-align: center;
  padding: 22px 16px;
  font-size: 12px;
  letter-spacing: 0.1em;
}

@media (max-width: 991.98px) {
  /* 縦積みになったら、ロゴ〜Google Map のブロックは中央揃え */
  .l-footer__inner .row > .col-12:first-child {
    text-align: center;
  }
  .l-footer__logo {
    display: inline-block;
  }
  .l-footer__hr {
    margin-left: auto;
    margin-right: auto;
  }
  .l-footer__inner .row > .col-12:first-child .link-arrow {
    justify-content: center;
  }
  /* 右下固定の「予約する」ボタンとコピーライトが重ならないように */
  .l-footer__copy {
    padding-bottom: 34px;
  }
}
@media (max-width: 767.98px) {
  .l-footer__logo {
    width: 168px;
  }
  .l-footer__hr {
    max-width: 100%;
    margin: 18px 0;
  }
  /* 竹の装飾がリンクに重ならないよう、カード下部に余白をつくる */
  .l-footer__card {
    padding-bottom: clamp(76px, 22vw, 104px);
  }
  .l-footer__card-head {
    margin: 22px 0 12px;
  }
  .l-footer__nav a {
    font-size: 14px;
  }
  .l-footer__nav li,
  .l-footer__nav-sub li {
    margin-right: 18px;
    margin-bottom: 8px;
  }
  .l-footer__card .deco--bamboo-1 {
    width: 76px;
    right: 6px;
    bottom: -4%;
  }
  .l-footer__card .deco--bamboo-2 {
    width: 66px;
    right: 66px;
    bottom: 4%;
  }
}

/* --------------------------------------------------------------------------
   9. 共通パーツ：マーキー文字
   -------------------------------------------------------------------------- */
.marquee {
  position: absolute;
  left: 0;
  /* セクション側で --mq-bottom を指定して字形の位置を合わせる */
  bottom: var(--mq-bottom, 0px);
  width: 100%;
  pointer-events: none;
  z-index: 0;
}
.marquee__inner {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee span {
  font-family: var(--font-mincho);
  /* セクション側で --mq-size を指定（デザイン1512pxで約200px） */
  font-size: var(--mq-size, clamp(56px, 12vw, 210px));
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  color: var(--c-band);
  padding-right: 0.4em;
}
/* 巨大英字マーキーを使う導線セクション（TOP Gallery / 施術ページ FAQ & Gallery）
   デザイン(1512px)基準：英字200px／字形下端からセクション下端まで125px／
   ボタン下端に字形上端が33px重なる */
.t-gallery,
.mn-guide {
  --mq-size: clamp(56px, 13.2vw, 260px);
  --mq-bottom: calc(var(--mq-size) * 0.56);
}
.t-gallery .ttl-h2,
.mn-guide .ttl-h2 {
  margin-top: clamp(10px, 1.8vw, 28px);
  line-height: 2.12;
}
.t-gallery .ttl-line,
.mn-guide .ttl-line {
  margin-top: clamp(18px, 2.6vw, 39px);
  margin-bottom: clamp(14px, 1.7vw, 26px);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* 10. 共通パーツ：タグ（料金表） --------------------------------------------- */
.tag {
  display: inline-block;
  padding: 3px 14px;
  margin: 0 8px 8px 0;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.8;
  white-space: nowrap;
}
.tag--color-root {
  background: #687e6d;
  color: #fff;
}
.tag--color-all {
  background: #34306b;
  color: #fff;
}
.tag--txr-root {
  background: #767b35;
  color: #fff;
}
.tag--txr-all {
  background: #485769;
  color: #fff;
}
.tag--cut {
  background: #c0bd99;
  color: #fff;
}
.tag--care {
  background: #a3b07b;
  color: #fff;
}

/* 11. 共通パーツ：料金表 ---------------------------------------------------- */
.price-list {
  margin-top: clamp(24px, 3vw, 40px);
}
.price-item {
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid rgba(96, 103, 4, 0.25);
}
.price-item__name {
  font-size: clamp(15px, 1.7vw, 20px);
  letter-spacing: 0.1em;
  line-height: 1.7;
}
.price-item__yen {
  font-size: clamp(19px, 2.2vw, 28px);
  letter-spacing: 0.04em;
  line-height: 1.4;
  white-space: nowrap;
}
.price-item__desc {
  margin-top: 10px;
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: #4a4738;
}
.price-note {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #4a4738;
}

/* 12. 共通パーツ：おすすめカード -------------------------------------------- */
.rec-card {
  position: relative;
  max-width: 560px;
  margin: clamp(46px, 6vw, 70px) auto 0;
  padding: clamp(34px, 4vw, 46px) clamp(20px, 3vw, 40px) clamp(26px, 3vw, 36px);
  background: var(--c-white);
  border-radius: 10px;
  /* 文字は左揃えのまま、かたまりをカード中央に置く */
  text-align: center;
}
/* タブレット幅では白カードが広がりすぎないように */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .rec-card {
    max-width: clamp(420px, 58vw, 560px);
  }
}
.rec-card .list-dot {
  display: inline-block;
  text-align: left;
  max-width: 100%;
}
/* マーカーはデザイン通り六角形（TOPのQuestionは丸のまま） */
.rec-card .list-dot li {
  padding-left: 37px;
}
.rec-card .list-dot li::before {
  left: 0;
  top: calc(1.1em - 8.5px);
  width: 17px;
  height: 17px;
  border-radius: 0;
  background: #a3b07b;
  clip-path: polygon(50% 0%, 100% 24%, 100% 76%, 50% 100%, 0% 76%, 0% 24%);
}
@media (max-width: 575.98px) {
  .rec-card .list-dot li {
    padding-left: 26px;
  }
  .rec-card .list-dot li::before {
    top: calc(1.1em - 6px);
    width: 12px;
    height: 12px;
  }
}
.rec-card__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 26px;
  border-radius: 999px;
  background: var(--c-green);
  color: #fff;
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.list-dot li {
  position: relative;
  padding-left: 24px;
  font-size: clamp(12px, 1.4vw, 16px);
  line-height: 2.2;
  letter-spacing: 0.08em;
}
.list-dot li + li {
  margin-top: 10px;
}
.list-dot li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.85em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-sage);
}

/* 13. 共通パーツ：Our Approach（施術ページ・コンセプト） --------------------- */
.approach {
  position: relative;
  background: var(--c-band);
  border-radius: 40px 40px 0 0;
  padding: clamp(56px, 8vw, 110px) 0 clamp(56px, 8vw, 110px);
  overflow: hidden;
}
.approach__bigttl {
  font-family: var(--font-base);
  font-size: clamp(38px, 6.4vw, 86px);
  line-height: 1.25;
  letter-spacing: 0.06em;
  color: var(--c-white);
  text-align: right;
}
.approach-item {
  position: relative;
}
.approach-item + .approach-item {
  margin-top: clamp(48px, 7vw, 96px);
}
.approach-item__num {
  position: absolute;
  top: -0.35em;
  z-index: 2;
  display: flex;
  align-items: center;
  font-family: var(--font-mincho);
  font-size: clamp(72px, 12vw, 180px);
  line-height: 1;
  color: var(--c-white);
  pointer-events: none;
}
.approach-item__num .hex {
  width: clamp(12px, 1.6vw, 22px);
  margin-right: clamp(6px, 0.8vw, 12px);
  align-self: center;
}
.approach-item__img {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 676 / 417;
}
.approach-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.approach-item__ttl {
  font-size: clamp(18px, 2vw, 26px);
  letter-spacing: 0.12em;
  line-height: 1.7;
}
.approach-item__txt {
  margin-top: 14px;
}

/* 画像とテキストの左右入れ替え（奇数：画像右／偶数：画像左） */
.approach-item.is-right .approach-item__num {
  left: 0;
}
.approach-item.is-left .approach-item__num {
  right: 0;
}

@media (max-width: 991.98px) {
  .approach-item__num {
    font-size: clamp(56px, 13vw, 96px);
    top: -0.5em;
  }
}

/* 14. FAQ & Gallery 導線 ---------------------------------------------------- */
.p-guide {
  position: relative;
  padding: clamp(56px, 8vw, 100px) 0;
  overflow: hidden;
}
.p-guide__inner {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   15. アニメーション初期状態
   -------------------------------------------------------------------------- */
.anim,
.anim-left,
.anim-right {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__inner {
    animation: none;
  }
  * {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   症例紹介（case）
   ※ .p-lead は 症例紹介 / よくあるご質問 で共通のセクションのため本ファイルで定義
   ========================================================================== */
.c-list {
  position: relative;
  padding-top: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.c-case__col {
  margin-bottom: clamp(22px, 2.6vw, 38px);
}

.c-case {
  height: 100%;
  background: var(--c-white);
  border-radius: 8px;
  padding: clamp(20px, 2.6vw, 38px) clamp(18px, 2.4vw, 36px)
    clamp(18px, 2.2vw, 30px);
}

/* Before / After 画像（隙間なしで2枚並べる） */
.c-case__img {
  aspect-ratio: 576 / 690;
  overflow: hidden;
}
.c-case__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ラベル行（下に細い罫線） */
.c-case__labels {
  margin-top: clamp(8px, 1vw, 14px);
  padding-bottom: clamp(6px, 0.9vw, 12px);
  border-bottom: 1px solid var(--c-sage);
}
.c-case__label {
  display: inline-flex;
  align-items: center;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: 0.18em;
  line-height: 1.6;
}
.c-case__label::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 11px;
  margin-right: 10px;
  background: url(../images/icon-triangle.svg) center/contain no-repeat;
}

.c-case__menu {
  margin-top: clamp(10px, 1.4vw, 18px);
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.1em;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   相談導線CTA（.p-lead）… case / faq 共通
   -------------------------------------------------------------------------- */
.p-lead {
  position: relative;
  background: var(--c-band);
  border-radius: 40px 40px 0 0;
  padding: clamp(56px, 9.5vw, 145px) 0 clamp(96px, 14vw, 212px);
  overflow: hidden;
}
.p-lead__inner {
  position: relative;
  z-index: 1;
}
.p-lead__asanoha {
  top: 2%;
  left: -9%;
  width: min(470px, 34%);
  z-index: 0;
}
.p-lead__ttl {
  margin-top: clamp(12px, 1.8vw, 24px);
}
.p-lead__txt {
  margin-top: clamp(12px, 1.8vw, 24px);
}

/* 背景の巨大英字は帯より明るい生成り */
.p-lead .marquee {
  bottom: clamp(16px, 3.5vw, 56px);
}
.p-lead .marquee span {
  color: var(--c-base);
}

/* ==========================================================================
   コンセプト（concept）
   ========================================================================== */

/* ---------- Concept（リード＋左端はみ出し画像） ---------- */
.cn-concept {
  position: relative;
  padding-top: clamp(56px, 10vw, 150px);
}
.cn-concept__kasumi-tr {
  top: 6%;
  right: -4%;
  width: min(400px, 30%);
}
.cn-concept__kasumi-bl {
  bottom: 2%;
  left: -5%;
  width: min(330px, 24%);
}

.cn-concept__block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: clamp(40px, 8vw, 124px);
}
/* 画面左端まではみ出す写真 */
.cn-concept__img {
  flex: 0 0 auto;
  width: min(605px, 40%);
  aspect-ratio: 1212 / 980;
  border-radius: 0 24px 24px 0;
  overflow: hidden;
}
.cn-concept__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cn-concept__body {
  flex: 1 1 380px;
  min-width: 0;
  padding-left: clamp(24px, 6.9vw, 104px);
  padding-right: 24px;
}
.cn-concept__ttl {
  font-size: clamp(19px, 2.1vw, 29px);
  letter-spacing: 0.14em;
  line-height: 1.6;
}
/* 右端まで伸びる破線 */
.cn-concept__hr {
  width: calc(100% + 24px);
  height: 1px;
  margin: clamp(14px, 2vw, 26px) 0 0;
  border: 0;
  background-image: linear-gradient(to right, #d9d4a6 6px, transparent 6px);
  background-size: 12px 1px;
}
.cn-concept__catch {
  margin-top: clamp(18px, 2.6vw, 36px);
  font-size: clamp(19px, 2.1vw, 29px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.75;
}
.cn-concept__txt {
  max-width: 490px;
  margin-top: clamp(12px, 1.8vw, 22px);
  font-size: clamp(12px, 1.15vw, 14px);
  letter-spacing: 0.08em;
  line-height: 2.7;
}

@media (max-width: 767.98px) {
  .cn-concept__img {
    width: 78%;
    border-radius: 0 16px 16px 0;
  }
  .cn-concept__body {
    flex: 1 1 100%;
    padding: 28px 24px 0;
  }
  .cn-concept__hr {
    width: 100%;
  }
}

/* ---------- 未来の髪まで考えたご提案 ---------- */
.cn-vision {
  position: relative;
  padding-top: clamp(48px, 7vw, 105px);
  padding-bottom: clamp(48px, 8vw, 112px);
}
.cn-vision__kasumi-r {
  top: 34%;
  right: -3%;
  width: min(390px, 28%);
}

.cn-vision__body {
  position: relative;
  z-index: 1;
  width: min(762px, 100%);
  margin: 0 auto;
  padding: 0 24px;
}
.cn-vision__sub {
  font-size: clamp(14px, 1.35vw, 20px);
  letter-spacing: 0.1em;
  line-height: 2.4;
}
.cn-vision__catch {
  margin-top: clamp(14px, 2vw, 26px);
  font-size: clamp(21px, 2.4vw, 33px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.9;
}

/* 右寄せ写真（l-inner-wide の右端に揃える） */
.cn-vision__img {
  position: relative;
  z-index: 1;
  width: min(832px, 55%);
  max-width: calc(100% - 24px);
  margin: clamp(48px, 8vw, 124px) 0 0 auto;
  margin-right: max(24px, calc((100% - 1332px) / 2));
  aspect-ratio: 1664 / 758;
  border-radius: 20px;
  overflow: hidden;
}
.cn-vision__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767.98px) {
  .cn-vision__img {
    width: 88%;
    margin-right: 0;
    border-radius: 14px 0 0 14px;
  }
}

/* ---------- Our Approach ---------- */
.cn-approach {
  padding-bottom: clamp(64px, 12vw, 180px);
}
.cn-approach__bigttl {
  text-align: center;
}

.cn-approach__list {
  margin-top: clamp(40px, 7.7vw, 117px);
}
.cn-approach__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.cn-approach__item + .cn-approach__item {
  margin-top: clamp(40px, 6.7vw, 101px);
}

/* 画面左端まではみ出す写真 */
.cn-approach__img {
  flex: 0 0 auto;
  width: min(547px, 36.2%);
  aspect-ratio: 1096 / 400;
  border-radius: 0 30px 30px 0;
  overflow: hidden;
}
.cn-approach__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cn-approach__body {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  padding-left: clamp(16px, 4.6vw, 70px);
  padding-right: clamp(16px, 3vw, 46px);
}
.cn-approach__num {
  flex: 0 0 auto;
  width: clamp(30px, 4vw, 60px);
  margin-right: clamp(8px, 1.6vw, 24px);
  font-size: clamp(46px, 6.2vw, 94px);
  line-height: 0.95;
  color: #a3b07b;
}
.cn-approach__txt {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 632px;
}
.cn-approach__ttl {
  font-size: clamp(17px, 1.9vw, 27px);
  letter-spacing: 0.1em;
  line-height: 1.5;
}
.cn-approach__desc {
  margin-top: clamp(10px, 1.2vw, 16px);
  font-size: clamp(12px, 1.1vw, 16px);
  letter-spacing: 0.08em;
  line-height: 2.2;
}

@media (max-width: 767.98px) {
  .cn-approach__img {
    width: 82%;
    border-radius: 0 16px 16px 0;
  }
  .cn-approach__body {
    flex: 1 1 100%;
    padding: 22px 24px 0;
  }
}

/* ---------- Salon-Space ---------- */
.cn-space {
  position: relative;
  padding: clamp(56px, 8vw, 116px) 0 clamp(56px, 9vw, 132px);
}
.cn-space__txt {
  margin-top: clamp(18px, 3vw, 44px);
  font-size: clamp(13px, 1.3vw, 19px);
  letter-spacing: 0.1em;
  line-height: 2;
}

/* 左方向へ流れ続ける写真の帯（左右は画面外へ断ち切られる） */
.cn-space__row {
  position: relative;
  width: 100%;
  margin-top: clamp(40px, 8vw, 121px);
  overflow: hidden;
}
.cn-space__track {
  display: flex;
  width: max-content;
  animation: loop-x 44s linear infinite;
}
.cn-space__col {
  flex: 0 0 auto;
  width: clamp(200px, 25vw, 395px);
  padding: 0 12px;
}
.cn-space__col img {
  width: 100%;
  aspect-ratio: 395 / 284;
  object-fit: cover;
  display: block;
}
@keyframes loop-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 767.98px) {
  .cn-space__col {
    width: clamp(180px, 46vw, 260px);
    padding: 0 8px;
  }
  .cn-space__track {
    animation-duration: 30s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cn-space__track {
    animation: none;
  }
}

/* ---------- Message ---------- */
.cn-message {
  position: relative;
  padding: clamp(32px, 5vw, 76px) 0 clamp(48px, 8vw, 116px);
}
.cn-message__body {
  position: relative;
  z-index: 1;
}

.cn-message__img {
  position: absolute;
  display: block;
  width: min(320px, 21.5%);
  aspect-ratio: 642 / 892;
  overflow: hidden;
  z-index: 0;
}
.cn-message__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cn-message__img--l {
  left: 0;
  top: clamp(10px, 3vw, 44px);
  border-radius: 0 28px 28px 0;
}
.cn-message__img--r {
  right: 0;
  top: clamp(160px, 22vw, 340px);
  border-radius: 28px 0 0 28px;
}

.cn-message__txt {
  margin-top: clamp(24px, 4vw, 58px);
  font-size: clamp(13px, 1.15vw, 16px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 3;
}

@media (max-width: 767.98px) {
  .cn-message {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
  }
  .cn-message__img {
    position: static;
    width: 64%;
    border-radius: 0 16px 16px 0;
    order: 1;
  }
  .cn-message__body {
    order: 2;
    margin-top: 28px;
  }
  .cn-message__img--r {
    order: 3;
    margin-top: 28px;
    margin-left: 36%;
    border-radius: 16px 0 0 16px;
  }
}

/* ==========================================================================
   よくあるご質問（faq）
   ※ .p-lead は case.css で定義（case / faq 共通）
   ========================================================================== */

/* ---------- カテゴリ導線 ---------- */
.f-cat {
  padding: clamp(40px, 6vw, 84px) 0;
}
.f-cat__grid {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}
.f-cat__card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(62px, 5.8vw, 88px);
  margin-bottom: 30px;
  padding: 12px clamp(52px, 5vw, 66px) 12px clamp(16px, 2vw, 24px);
  background: var(--c-white);
  border-radius: 6px;
  transition: background-color 0.3s;
}
.f-cat__ttl {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.6;
  color: var(--c-moss);
}
.f-cat__card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: clamp(14px, 1.8vw, 22px);
  width: clamp(24px, 2.2vw, 30px);
  height: clamp(24px, 2.2vw, 30px);
  transform: translateY(-50%);
  background: url(../images/icon-arrow-circle.svg) center/contain no-repeat;
  transition: right 0.3s;
}
.f-cat__card:hover {
  background: var(--c-band);
}
.f-cat__card:hover::after {
  right: clamp(8px, 1.2vw, 15px);
}

/* ---------- Q&A ---------- */
.f-qa {
  padding: clamp(48px, 7vw, 100px) 0 clamp(48px, 7vw, 100px);
}
.f-qa__ttl {
  font-size: clamp(26px, 3.2vw, 44px);
  letter-spacing: 0.16em;
  line-height: 1.5;
}
.f-qa__en {
  margin-top: 6px;
}
.f-qa__list {
  margin-top: clamp(28px, 4vw, 58px);
}

.f-qa__item {
  padding-bottom: clamp(18px, 2.4vw, 34px);
  border-bottom: 1px solid rgba(21, 18, 9, 0.22);
}
.f-qa__item + .f-qa__item {
  margin-top: clamp(18px, 2.4vw, 34px);
}

.f-qa__row {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
.f-qa__icon {
  flex: 0 0 auto;
  width: clamp(32px, 3.1vw, 46px);
  margin-right: clamp(12px, 2.2vw, 33px);
  line-height: 1;
}
.f-qa__icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* 質問行（アコーディオンの開閉ボタン） */
.f-qa__row--q {
  position: relative;
  align-items: center;
  padding: 0 clamp(24px, 2.6vw, 36px) 0 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
/* クリック時にブラウザ標準のフォーカス枠（青い枠）が出ないようにする */
.f-qa__row--q:focus,
.f-qa__row--q:focus-visible,
.f-qa__row--q:active {
  outline: none;
  box-shadow: none;
}
/* キーボード操作時は枠ではなく文字色でフォーカス位置を示す */
.f-qa__row--q:focus-visible .f-qa__q {
  color: var(--c-moss);
}
.f-qa__q {
  font-size: clamp(15px, 1.55vw, 19px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.7;
}
.f-qa__row--q:hover .f-qa__q {
  color: var(--c-moss);
}

/* 開閉インジケーター */
.f-qa__row--q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 11px;
  height: 11px;
  margin-top: -8px;
  border-right: 1.5px solid var(--c-green);
  border-bottom: 1.5px solid var(--c-green);
  transform: rotate(45deg);
  transition: transform 0.3s;
}
.f-qa__row--q.is-open::after {
  transform: rotate(-135deg);
  margin-top: -3px;
}

/* 回答（アコーディオン本体） */
.f-qa__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s;
}
.js-acc.is-open + .f-qa__body {
  max-height: 1600px;
}

.f-qa__row--a {
  padding-top: clamp(10px, 1.4vw, 20px);
}
.f-qa__a {
  font-size: clamp(13px, 1.25vw, 15px);
  letter-spacing: 0.08em;
  line-height: 2;
}

@media (max-width: 575.98px) {
  .f-qa__icon {
    margin-right: 12px;
  }
}

/* ==========================================================================
   施術ページ共通（color / treatment / texture / scalp）
   - 4ページはほぼ同一テンプレートのため、このファイル1本で賄う
   - 共通クラス（.p-fv / .rec-card / .approach / .price-list / .tag / .p-guide 等）は
     style.core.css を利用し、ここには配置まわりの差分のみを記述
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FV（共通FVのリード文が固定予約ボタンに潜り込まないように）
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .mn-fv .p-fv__ttl,
  .mn-fv .p-fv__lead {
    padding-right: 72px;
  }
}

/* --------------------------------------------------------------------------
   1. イントロ（緑の小見出し＋h2＋中央の画像）
   -------------------------------------------------------------------------- */
.mn-intro {
  position: relative;
  padding-top: clamp(36px, 7vw, 104px);
  padding-bottom: clamp(16px, 3vw, 40px);
}
.mn-intro__img {
  width: min(812px, 100%);
  margin: clamp(24px, 3.6vw, 54px) auto 0;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 812 / 361;
}
.mn-intro__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 装飾（.deco）より本文を前面に */
.mn-intro > .l-inner,
.mn-about > .l-inner {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   2. 説明文 ＋ こんな方におすすめ
   -------------------------------------------------------------------------- */
.mn-about {
  position: relative;
  padding-top: clamp(36px, 6vw, 88px);
  padding-bottom: clamp(50px, 8vw, 112px);
}
/* 中央寄せの強調リード（2〜3行） */
.mn-about__lead {
  font-size: clamp(16px, 2vw, 24px);
  line-height: 2.5;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.mn-about__row {
  margin-top: clamp(26px, 4vw, 62px);
}
.mn-about__img {
  width: min(482px, 100%);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 482 / 346;
}
.mn-about__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 背景の霞（デザイン通りの非対称配置） */
.mn-deco--kasumi-r1 {
  top: 12%;
  right: calc(var(--edge) + max(-2%, -30px));
  width: min(453px, 32%);
}
.mn-deco--kasumi-l {
  top: -1%;
  left: calc(var(--edge) + max(-22%, -333px));
  width: min(648px, 44%);
}
.mn-deco--kasumi-r2 {
  top: 54%;
  right: calc(var(--edge) + max(-2%, -30px));
  width: min(453px, 32%);
}

@media (max-width: 767.98px) {
  .mn-deco--kasumi-r1,
  .mn-deco--kasumi-r2 {
    width: 46%;
  }
  .mn-deco--kasumi-l {
    width: 60%;
    left: -28%;
  }
}

/* --------------------------------------------------------------------------
   3. Our Approach（.approach 帯の中身）
   -------------------------------------------------------------------------- */
.mn-approach__head {
  position: relative;
}
.mn-approach__lead {
  margin-top: clamp(16px, 3vw, 44px);
}

.mn-approach__leadimg {
  display: block;
  width: min(488px, 100%);
  margin: clamp(24px, 4vw, 44px) auto 0;
  border-radius: 8px;
  overflow: hidden;
}
.mn-approach__leadimg img {
  display: block;
  width: 100%;
  height: auto;
}

.mn-approach__items {
  margin-top: clamp(32px, 12vw, 172px);
}
.mn-approach__imgcol {
  position: relative;
}

.mn-msg {
  margin-top: clamp(44px, 9vw, 140px);
  padding-bottom: clamp(0px, 6vw, 92px);
}

@media (min-width: 992px) {
  /* 見出しブロックは帯の右寄り、リード画像は左端へはみ出す */
  .mn-approach__lead {
    margin-left: 43%;
  }
  .mn-approach__head {
    padding-bottom: clamp(40px, 11vw, 152px);
  }
  .mn-approach__leadimg {
    position: absolute;
    left: max(24px, calc((100% - 1332px) / 2));
    top: clamp(60px, 11vw, 156px);
    width: min(488px, 33%);
    margin: 0;
  }

  /* 巨大数字は画像の外側へ少しずらし、天地中央が画像の上辺に重なるように置く */
  .approach-item__num {
    font-size: clamp(96px, 15vw, 226px);
    top: -0.465em;
  }
  .approach-item.is-right .approach-item__num {
    margin-left: -18%;
  }
  .approach-item.is-left .approach-item__num {
    margin-right: -11%;
  }

  /* テキスト列はコンテンツ幅（1152）に合わせて内側へ寄せる */
  .approach-item.is-right .mn-approach__txtcol {
    padding-left: min(7vw, 90px);
    padding-right: min(9vw, 120px);
  }
  .approach-item.is-left .mn-approach__txtcol {
    padding-left: min(9vw, 116px);
    padding-right: min(7vw, 90px);
  }
}

@media (max-width: 991.98px) {
  .mn-approach__txtcol {
    margin-top: clamp(18px, 4vw, 34px);
  }
  .mn-approach__items .approach-item__img {
    margin-top: clamp(24px, 6vw, 48px);
  }
}

/* --------------------------------------------------------------------------
   4. メニュー（料金表）
   -------------------------------------------------------------------------- */
.mn-menu {
  position: relative;
  padding-top: clamp(50px, 9vw, 134px);
  padding-bottom: clamp(36px, 6vw, 84px);
}
.mn-menu__block + .mn-menu__block {
  margin-top: clamp(50px, 9vw, 128px);
}
.mn-menu__ttl {
  font-size: clamp(22px, 3.2vw, 46px);
  letter-spacing: 0.16em;
  line-height: 1.5;
}
.mn-menu__en {
  margin-top: 6px;
}
.price-item__tags {
  margin-bottom: 2px;
}
.price-item__yen {
  display: block;
}

@media (max-width: 767.98px) {
  .price-item__yen {
    margin-top: 6px;
  }
}

/* --------------------------------------------------------------------------
   5. FAQ & Gallery 導線
   -------------------------------------------------------------------------- */
.mn-guide {
  padding-top: clamp(56px, 7.7vw, 117px);
  /* ボタン下端〜巨大英字〜セクション下端の余白をデザインに合わせる */
  padding-bottom: calc(var(--mq-size) * 1.21);
}
.mn-guide__btns {
  margin-top: clamp(28px, 4.9vw, 74px);
}

/* ==========================================================================
   お知らせ（一覧 news / 詳細 newsdetail）
   ========================================================================== */

/* このページ群のコンテンツ幅（デザイン上 860px） */
.n-inner {
  max-width: calc(860px + 48px);
}

/* ---------- ページ送りボタン（一覧・詳細で共用） ---------- */
.pg-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.pg-nav .btn-pager {
  justify-content: space-between;
  min-height: clamp(72px, 6.5vw, 94px);
  padding: 12px clamp(20px, 2.2vw, 30px);
  margin: 0 clamp(10px, 2vw, 28px) 12px;
  border-radius: 10px;
  font-size: clamp(16px, 1.7vw, 20px);
  letter-spacing: 0.12em;
  color: var(--c-moss) !important;
}
.pg-nav__icon {
  flex: 0 0 auto;
  width: clamp(24px, 2vw, 28px);
  height: auto;
  transition: transform 0.3s;
}
.pg-nav__icon--prev {
  transform: scaleX(-1);
}
.pg-nav .btn-pager:hover .pg-nav__icon {
  transform: translateX(4px);
}
.pg-nav .btn-pager:hover .pg-nav__icon--prev {
  transform: scaleX(-1) translateX(4px);
}

/* 一覧に戻る */
.pg-back {
  display: flex;
  justify-content: center;
}
.pg-back .btn-pager.is-back {
  width: min(386px, 100%);
  min-height: clamp(76px, 7vw, 100px);
  border-radius: 8px;
  background: #e9e3a5;
  color: var(--c-moss) !important;
  font-size: clamp(16px, 1.7vw, 20px);
  letter-spacing: 0.14em;
}
.pg-back .btn-pager.is-back:hover {
  background: var(--c-sage);
  color: var(--c-white) !important;
}

/* ==========================================================================
   お知らせ一覧
   ========================================================================== */
/* このページのFVは画像なし */
.n-fv {
  padding-bottom: clamp(28px, 4vw, 56px);
}

.n-list-sec {
  position: relative;
  padding-bottom: clamp(56px, 8vw, 100px);
}

.n-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.n-item {
  border-bottom: 1px solid rgba(96, 103, 4, 0.35);
}

.n-item__link {
  display: flex;
  align-items: center;
  padding: clamp(22px, 3vw, 35px) 0;
}

.n-item__thumb {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(186px, 26%);
  aspect-ratio: 186 / 140;
  background: var(--c-white);
  border-radius: 10px;
  overflow: hidden;
}
.n-item__thumb img {
  width: 56%;
  height: auto;
  object-fit: contain;
}

.n-item__body {
  min-width: 0;
  padding-left: clamp(20px, 4vw, 56px);
}
.n-item__date {
  display: block;
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.1em;
  line-height: 1.8;
}
.n-item__ttl {
  display: block;
  margin-top: clamp(4px, 0.6vw, 8px);
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
}
.n-item__link:hover .n-item__ttl {
  color: var(--c-moss);
}

.n-pager {
  margin-top: clamp(48px, 7.5vw, 112px);
}

@media (max-width: 767.98px) {
  .n-item__link {
    display: block;
    padding: 24px 0;
  }
  .n-item__thumb {
    width: min(186px, 55%);
  }
  .n-item__body {
    padding-left: 0;
    margin-top: 14px;
  }
}

/* ==========================================================================
   お知らせ詳細
   ========================================================================== */
.nd-article {
  position: relative;
  padding-top: clamp(116px, 12.5vw, 172px);
  padding-bottom: clamp(56px, 8vw, 96px);
}

.nd-head__date {
  display: block;
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.1em;
  line-height: 1.8;
}
.nd-head__cat {
  display: block;
  margin-top: clamp(10px, 1.4vw, 18px);
  font-size: clamp(15px, 1.7vw, 20px);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.6;
}
.nd-head__ttl {
  margin-top: clamp(14px, 1.8vw, 24px);
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: 0.12em;
  line-height: 1.7;
}

.nd-eyecatch {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 56px);
  aspect-ratio: 860 / 518;
  background: var(--c-white);
  border-radius: 10px;
  overflow: hidden;
}
.nd-eyecatch img {
  width: 40%;
  max-width: 340px;
  height: auto;
  object-fit: contain;
}

.nd-body {
  margin-top: clamp(32px, 4.5vw, 58px);
}

.nd-pager {
  margin-top: clamp(44px, 6.5vw, 90px);
}
.pg-back {
  margin-top: clamp(20px, 3vw, 38px);
}

/* ==========================================================================
   店舗情報（store）
   ========================================================================== */

/* ---------- 店舗概要 ---------- */
.st-info {
  padding: clamp(48px, 8vw, 122px) 0 0;
}

.st-info__logo {
  display: flex;
  align-items: baseline;
  line-height: 1.2;
  white-space: nowrap;
}
.st-info__logo-sm {
  font-size: clamp(14px, 1.4vw, 19px);
  letter-spacing: 0.06em;
}
.st-info__logo-lg {
  font-size: clamp(20px, 2.1vw, 28px);
  letter-spacing: 0.04em;
  margin-left: 0.35em;
}

.st-info__name {
  margin-top: clamp(8px, 1.2vw, 16px);
  font-size: clamp(28px, 3.9vw, 54px);
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* 定義リスト（項目名と内容の間に縦罫線） */
.st-dl__row + .st-dl__row {
  margin-top: clamp(10px, 1.4vw, 20px);
}
.st-dl__dt,
.st-dl__dd {
  font-size: clamp(13px, 1.25vw, 15px);
  letter-spacing: 0.08em;
  line-height: 1.85;
  font-weight: 500;
  margin: 0;
  padding-top: clamp(6px, 0.9vw, 12px);
  padding-bottom: clamp(6px, 0.9vw, 12px);
}
.st-dl__dd {
  border-left: 1px solid rgba(21, 18, 9, 0.22);
}

@media (max-width: 767.98px) {
  .st-dl__row + .st-dl__row {
    margin-top: 4px;
  }
  .st-dl__dt {
    padding-bottom: 0;
    font-weight: 700;
    color: var(--c-green);
  }
  .st-dl__dd {
    border-left: 0;
    padding-top: 2px;
    padding-bottom: 14px;
  }
  .st-dl__row {
    border-bottom: 1px solid rgba(21, 18, 9, 0.18);
  }
}

/* 店内写真（右寄せ） */
.st-info__photo {
  width: min(85%, 850px);
  margin: clamp(40px, 6vw, 88px) 0 0 auto;
  aspect-ratio: 1700 / 592;
  overflow: hidden;
}
.st-info__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- MAP ---------- */
.st-map {
  padding: clamp(48px, 7vw, 100px) 0 0;
}
.st-map__ttl {
  font-size: clamp(30px, 3.9vw, 54px);
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.st-map__txt {
  margin-top: clamp(14px, 2vw, 28px);
  font-size: clamp(13px, 1.35vw, 18px);
  letter-spacing: 0.08em;
  line-height: 2.7;
}
.st-map__img {
  margin-top: clamp(28px, 4vw, 56px);
  aspect-ratio: 1996 / 1600;
  overflow: hidden;
}

@media (min-width: 768px) {
  .st-map__img {
  aspect-ratio: 1996 / 708;
}
}

.st-map__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.st-map__link {
  margin-top: clamp(12px, 1.6vw, 20px);
}

iframe{border:none; display:block;}

/* ---------- 外観・ご来店案内 ---------- */
.st-access {
  padding: clamp(36px, 5vw, 66px) 0 0;
}
.st-access__box {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--c-white);
}
.st-access__img {
  flex: 0 0 auto;
  width: 27.7%;
  min-width: 160px;
}
.st-access__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.st-access__body {
  flex: 1 1 300px;
  min-width: 0;
  padding: clamp(16px, 2.2vw, 30px) clamp(18px, 2.6vw, 36px)
    clamp(16px, 2.2vw, 30px) clamp(20px, 4.2vw, 61px);
}
.st-access__txt {
  font-size: clamp(13px, 1.35vw, 18px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.8;
}
.st-access__txt + .st-access__txt {
  margin-top: clamp(8px, 1.3vw, 18px);
}
.st-access__txt--em {
  color: #df5624;
}

@media (max-width: 575.98px) {
  .st-access__img {
    width: 100%;
    aspect-ratio: 554 / 300;
  }
  .st-access__body {
    flex: 1 1 100%;
    padding: 24px 20px;
  }
}

/* ---------- サロン空間（左方向へ流れ続ける写真の帯） ---------- */
.st-space {
  padding: clamp(48px, 8vw, 118px) 0 clamp(40px, 6vw, 88px);
}
.st-space__row {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.st-space__track {
  display: flex;
  width: max-content;
  animation: loop-x 44s linear infinite;
}
.st-space__col {
  flex: 0 0 auto;
  width: clamp(200px, 25vw, 395px);
  padding: 0 12px;
}
.st-space__col img {
  width: 100%;
  aspect-ratio: 395 / 284;
  object-fit: cover;
  display: block;
}

@media (max-width: 767.98px) {
  .st-space__col {
    width: clamp(180px, 46vw, 260px);
    padding: 0 8px;
  }
  .st-space__track {
    animation-duration: 30s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-space__track {
    animation: none;
  }
}

/* ==========================================================================
   TOP
   ========================================================================== */
.t-fv {
  position: relative;
  padding-top: clamp(90px, 10vw, 110px);
  padding-bottom: clamp(40px, 6vw, 80px);
  overflow-x: clip;
}
.t-fv__img {
  position: relative;
  width: min(80%, 1250px);
  /* 画面が 1512px より広がっても、それ以上左へ引っ張られない */
  /*margin-left: max(0px, (100% - var(--stage-max)) / 2);*/
  border-radius: 0 12px 12px 0;
  overflow: hidden;
  aspect-ratio: 1101 / 664;
}
.t-fv__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.t-fv__cloud-tr {
  top: 4%;
  right: calc(var(--edge) + min(3%, 45px));
  width: min(383px, 26%);
  z-index: 0;
}
.t-fv__cloud-br {
  bottom: 12%;
  right: calc(var(--edge) + max(-2%, -30px));
  width: min(406px, 27%);
  z-index: 0;
}

.t-fv__vwrap {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: var(--stage-max);
  margin: 0 auto;
  pointer-events: none;
  z-index: 2;
}
.t-fv__vtext {
  position: absolute;
  top: 26%;
  right: clamp(16px, 11vw, 164px);
  writing-mode: vertical-rl;
  font-family: var(--font-base);
  font-weight: 500;
  font-size: clamp(16px, 1.7vw, 24px);
  letter-spacing: 0.34em;
  line-height: 2.6;
  height: min(480px, 44vw);
}

.t-fv__body {
  position: relative;
  z-index: 2;
  margin-top: clamp(-105px, -7.2vw, -34px);
}

@media (min-width: 1200px) {
  .t-fv__body {
    margin-left: 5%;
  }
}

.t-fv__ttl {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  color: var(--c-green);
  line-height: 1.1;
}
.t-fv__ttl-sm {
  font-size: clamp(26px, 4.9vw, 74px);
  letter-spacing: 0.02em;
}
.t-fv__ttl-lg {
  font-size: clamp(38px, 8.5vw, 128px);
  letter-spacing: 0.02em;
  margin-left: 0.22em;
}
.t-fv__lead {
  margin-top: clamp(10px, 1.4vw, 18px);
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: 0.08em;
  color: #687E6D;
}

@media (max-width: 991.98px) {
  /* ファーストビューが画面いっぱいになるよう、余った高さは写真で埋める
     （下に中途半端な余白が残らないようにする） */
  .t-fv {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    /* 右下固定の「予約する」ボタン（74px＋16px）と重ならない余白 */
    padding-bottom: clamp(96px, 12vw, 120px);
  }
  .t-fv__vwrap,
  .t-fv__body {
    flex: 0 0 auto;
  }
  .t-fv__img {
    flex: 1 1 auto;
    min-height: 240px;
    aspect-ratio: auto;
  }
  /* 親の高さが flex で決まるため、画像は絶対配置にして高さを追従させる */
  .t-fv__img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 56%;
  }

  /* 縦書きをやめて画像の上に横書きで置く（写真との重なり・変な改行を防ぐ） */
  .t-fv__vwrap {
    position: static;
    padding: 0 24px;
    pointer-events: auto;
  }
  .t-fv__vtext {
    position: static;
    writing-mode: horizontal-tb;
    height: auto;
    margin: 0 0 18px;
    text-align: right;
    font-size: clamp(15px, 2.2vw, 20px);
    letter-spacing: 0.16em;
    line-height: 1.9;
  }
  .t-fv__img {
    width: 92%;
  }
  .t-fv__body {
    margin-top: -28px;
  }
  .t-fv__cloud-tr {
    top: -4%;
    right: -10%;
    width: 38%;
    opacity: 0.85;
  }
  .t-fv__cloud-br {
    bottom: 10%;
    right: -14%;
    width: 44%;
    opacity: 0.85;
  }
}

@media (max-width: 767.98px) {
  .t-fv {
    padding-top: 84px;
  }
  .t-fv__img {
    width: 100%;
    border-radius: 0;
  }
  .t-fv__vtext {
    font-size: 18px;
    letter-spacing: 0.14em;
  }
  .t-fv__body {
    margin-top: -14px;
  }
  .t-fv__ttl {
    flex-wrap: nowrap;
    align-items: baseline;
  }
  .t-fv__ttl-sm {
    font-size: clamp(21px, 6.6vw, 28px);
  }
  .t-fv__ttl-lg {
    font-size: clamp(32px, 11.8vw, 50px);
    margin-left: 0.14em;
  }
  .t-fv__lead {
    margin-top: 14px;
    font-size: 14px;
    line-height: 2.1;
  }
  .t-fv__cloud-tr {
    top: 11%;
    right: 65%;
    width: 46%;
    opacity: 0.8;
  }
  .t-fv__cloud-br {
    bottom: 3%;
    right: -9%;
    width: 52%;
    opacity: 0.8;
  }
}

/* ---------- Question / Answer ---------- */
.t-qa {
  position: relative;
  padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 80px);
}

/* 固定エリア
   - 写真の帯（--qa-band）の高さは画面「幅」から算出＝デザインの比率を保つ
   - 固定される距離＝(--qa-start + --qa-band) - 100vh となり、
     画面が高いほど自動的に短くなる（＝余計なスクロール域が出ない） */
.t-qa__stage {
  position: relative;
  --qa-band: min(120vw, 1814px); /* 写真4枚が並ぶ帯の高さ */
  --qa-start: min(70vh, 640px); /* 固定開始時に写真が入り始める位置 */
  height: max(calc(100vh + 260px), calc(var(--qa-start) + var(--qa-band)));
}
.t-qa__pin {
  position: sticky;
  top: 0;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 5vw, 60px) 0;
  will-change: opacity;
}

.t-qa__card {
  position: relative;
  z-index: 2;
  width: min(673px, 92%);
  max-width: 673px;
  margin: clamp(24px, 3.4vw, 44px) auto 0;
  padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 40px);
  background: var(--c-white);
  border-radius: 12px;
  text-align: center;
}
/* 文字は左揃えのまま、かたまりを中央に置いて余白の偏りをなくす */
.t-qa__card .list-dot {
  display: inline-block;
  text-align: left;
  max-width: 100%;
}

/* 写真の帯（固定された文字群の下を通過する）
   1512px を超えたら中央寄せで止め、それ以上外へ広がらない */
.t-qa__scatter {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--qa-start);
  height: var(--qa-band);
  max-width: var(--stage-max);
  margin: 0 auto;
  z-index: 1;
}
.t-qa__ph {
  position: absolute;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}
.t-qa__ph img {
  width: 100%;
  height: auto;
  display: block;
}
/* 位置はデザイン（1512px 原寸）の座標比率から算出。
   右側の 02 と 03 は縦に重ならないよう間隔を確保している */
.t-qa__ph--1 {
  left: 2.2%;
  top: 0;
  width: 25.8%;
}
.t-qa__ph--2 {
  right: -2.5%;
  top: 16.7%;
  width: 31.9%;
}
.t-qa__ph--3 {
  right: 2.2%;
  top: 60%;
  width: 28%;
}
.t-qa__ph--4 {
  left: -2.6%;
  top: 66.7%;
  width: 32.5%;
}

.t-qa__answer {
  position: relative;
  z-index: 4;
  margin-top: clamp(24px, 4vw, 60px);
}
.t-qa__acard {
  position: relative;
  display: inline-block;
  margin-top: clamp(14px, 2vw, 22px);
  padding: clamp(24px, 3vw, 34px) clamp(26px, 5vw, 68px);
  background: var(--c-band);
  border-radius: 12px;
}
.t-qa__leaf {
  position: absolute;
  right: -46px;
  bottom: -30px;
  width: clamp(70px, 8vw, 108px);
}
.t-qa__leaf img {
  width: 100%;
  height: auto;
}
.t-qa__dots {
  display: block;
  width: 1px;
  height: clamp(60px, 8vw, 110px);
  margin: 0 auto;
  background-image: linear-gradient(
    to bottom,
    var(--c-moss) 4px,
    transparent 4px
  );
  background-size: 1px 10px;
  opacity: 0.6;
}

@media (max-width: 767.98px) {
  .t-qa__card {
    width: 94%;
    padding: 22px 16px;
  }
  .t-qa__leaf {
    right: -18px;
    bottom: -26px;
  }
  .t-qa__stage {
    --qa-band: 157vw;
  }
  .t-qa__ph--1 {
    width: 38%;
    top: 0;
    left: 1%;
  }
  .t-qa__ph--2 {
    width: 40%;
    top: 19.1%;
    right: -2%;
  }
  .t-qa__ph--3 {
    width: 36%;
    top: 60.5%;
    right: 2%;
  }
  .t-qa__ph--4 {
    width: 42%;
    top: 66.9%;
    left: -3%;
  }
}

/* タブレット以下は固定エリアを少し低く（画面上部に寄せる） */
@media (max-width: 991.98px) {
  .t-qa__pin {
    min-height: 76vh;
  }
  .t-qa__stage {
    height: max(calc(76vh + 320px), calc(var(--qa-start) + var(--qa-band)));
  }
}

/* 動きを減らす設定では固定を解除 */
@media (prefers-reduced-motion: reduce) {
  .t-qa__stage {
    height: auto;
  }
  .t-qa__pin {
    position: static;
    min-height: 0;
  }
  .t-qa__scatter {
    position: relative;
    top: 0;
    height: var(--qa-band);
  }
}

/* ---------- MIRAIについて ---------- */
.t-about {
  position: relative;
  background: var(--c-band);
  padding: clamp(56px, 9vw, 130px) 0 clamp(56px, 9vw, 120px);
}
.t-about__body {
  position: relative;
  z-index: 2;
}
.t-about__img {
  position: absolute;
  display: block;
  width: clamp(120px, 21vw, 316px);
  border-radius: 8px;
  overflow: hidden;
  z-index: 1;
  --edge: max(0px, (100% - var(--stage-max)) / 2);
}
.t-about__img img {
  width: 100%;
  height: auto;
  display: block;
}
.t-about__img--r {
  right: var(--edge);
  top: 8%;
  border-radius: 8px 0 0 8px;
}
.t-about__img--l {
  left: var(--edge);
  bottom: 6%;
  border-radius: 0 8px 8px 0;
}

@media (max-width: 991.98px) {
  .t-about__img {
    width: 26vw;
    opacity: 0.9;
  }
  .t-about__img--r {
    top: 2%;
  }
  .t-about__img--l {
    bottom: 2%;
  }
}
@media (max-width: 575.98px) {
  .t-about__img {
    display: none;
  }
}

/* ---------- Service ---------- */
.t-service {
  position: relative;
  padding: clamp(56px, 9vw, 120px) 0 clamp(40px, 6vw, 80px);
}
.t-service__hr {
  width: 100%;
  height: 1px;
  margin: clamp(20px, 3vw, 34px) 0 0;
  border: 0;
  background-image: linear-gradient(
    to right,
    rgba(96, 103, 4, 0.4) 3px,
    transparent 3px
  );
  background-size: 8px 1px;
}

/* 1512px を超えても外へ引っ張られないようにステージ幅で止める */
.t-service__list {
  width: 100%;
  max-width: var(--stage-max);
  margin-left: auto;
  margin-right: auto;
}

.t-service__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: clamp(36px, 5vw, 64px) 0;
  overflow-x: clip;
}
.t-service__img {
  width: min(46%, 690px);
  border-radius: 0 10px 10px 0;
  overflow: hidden;
  aspect-ratio: 690 / 635;
}
.t-service__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.t-service__body {
  position: relative;
  z-index: 2;
  width: 54%;
  padding-left: clamp(24px, 6vw, 96px);
  padding-right: clamp(16px, 3vw, 48px);
}
.t-service__ttl {
  font-size: clamp(24px, 3vw, 42px);
  letter-spacing: 0.16em;
  line-height: 1.4;
}
.t-service__sub {
  display: block;
  font-size: clamp(16px, 1.8vw, 26px);
  letter-spacing: 0.14em;
}
.t-service__en {
  display: block;
  margin-top: 6px;
  font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: 0.16em;
}
.t-service__catch {
  margin-top: clamp(12px, 1.6vw, 20px);
  font-size: clamp(16px, 1.9vw, 24px);
  letter-spacing: 0.12em;
  line-height: 1.9;
  font-weight: 700;
}

.t-service__kasumi-r {
  top: 12%;
  right: -4%;
  width: min(555px, 40%);
  z-index: 0;
}
.t-service__kasumi-b {
  bottom: 4%;
  left: 18%;
  width: min(646px, 44%);
  z-index: 0;
}

@media (max-width: 767.98px) {
  .t-service__img {
    width: 82%;
  }
  .t-service__body {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 24px;
  }
  .t-service__kasumi-r {
    top: 4%;
    width: 60%;
  }
  .t-service__kasumi-b {
    bottom: 0;
    left: 6%;
    width: 70%;
  }
}

/* ---------- Gallery 導線 ---------- */
.t-gallery {
  position: relative;
  padding-top: clamp(56px, 7.7vw, 117px);
  padding-bottom: calc(var(--mq-size) * 1.21);
}
.t-gallery__inner {
  position: relative;
  z-index: 1;
}
.t-gallery__btn {
  display: flex;
  justify-content: center;
  margin-top: clamp(34px, 6.1vw, 92px);
}
.t-gallery__btn .btn-card {
  max-width: 553px;
}

/* ---------- Information ---------- */
.t-info {
  position: relative;
  background: var(--c-sage);
  padding: clamp(56px, 8vw, 110px) 0 clamp(56px, 8vw, 110px);
  overflow: hidden;
}
.t-info__inner {
  position: relative;
  z-index: 1;
}
.t-info__asanoha {
  left: calc(var(--edge) + max(-8%, -121px));
  bottom: -6%;
  width: min(704px, 50%);
  opacity: 0.5;
}
.t-info__img {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 728 / 421;
}
.t-info__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.t-info__hr {
  width: 100%;
  height: 1px;
  margin: clamp(36px, 5vw, 62px) 0;
  border: 0;
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.75) 3px,
    transparent 3px
  );
  background-size: 8px 1px;
}
.t-info__news {
  background: var(--c-white);
  border-radius: 12px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3.4vw, 56px);
}
.t-info__news-ttl {
  font-size: clamp(22px, 2.6vw, 34px);
  letter-spacing: 0.12em;
  line-height: 1.5;
  margin-top: 4px;
}
.t-info__news-list li + li {
  border-top: 1px solid rgba(96, 103, 4, 0.2);
}
.t-info__news-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: clamp(14px, 1.8vw, 22px) 0;
}
.t-info__news-date {
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.08em;
  width: 130px;
  flex: 0 0 auto;
}
.t-info__news-txt {
  font-size: clamp(13px, 1.4vw, 16px);
  letter-spacing: 0.08em;
}
.t-info__news-list a:hover .t-info__news-txt {
  color: var(--c-moss);
}

@media (max-width: 575.98px) {
  .t-info__news-date {
    width: 100%;
  }
}

/* News表示 */
.webgene-blog {
  width: 100%;
}

/* News表示 画像あり版 */
.news-list .webgene-blog {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.news-list .webgene-item {
  width: 100%;
}

@media (min-width: 768px) {
  .news-list .webgene-item {
    width: 48%;
  }
}

/* ページネーション（お知らせ一覧 .webgene-pagination / 詳細 .pagelink）
   ── CMSが出力するマークアップをそのまま装飾してデザインを再現
   デザイン(1512px)：白カード 210×94 / 角丸10 / 間隔56 / 28pxの丸矢印 */
.webgene-pagination {
  width: 100%;
}

.webgene-pagination ul,
.pagelink {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3.7vw, 56px);
  width: 100%;
  max-width: 476px;
  margin: clamp(40px, 5.3vw, 80px) auto 0;
  padding: 0;
  list-style: none;
}

/* カード本体。リンクが無い側（「・・・」）は控えめな見た目にする */
.webgene-pagination ul li,
.pagelink p {
  position: relative;
  flex: 1 1 0;
  max-width: 210px;
  min-height: clamp(64px, 6.2vw, 94px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.45);
  color: rgba(96, 103, 4, 0.35);
  font-family: var(--font-base);
  font-size: clamp(14px, 1.3vw, 20px);
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.webgene-pagination ul li a,
.pagelink p a {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  background: #fff;
  color: var(--c-moss) !important;
  transition:
    background-color 0.3s,
    color 0.3s;
}

.webgene-pagination ul li.prev a,
.pagelink p.prev a {
  padding-left: clamp(16px, 3.9vw, 59px);
  padding-right: clamp(14px, 2.4vw, 36px);
}
.webgene-pagination ul li.next a,
.pagelink p.next a {
  padding-left: clamp(14px, 2vw, 30px);
  padding-right: clamp(16px, 2vw, 31px);
}

.webgene-pagination ul li a:hover,
.pagelink p a:hover {
  background-color: #e9e3a5;
  color: var(--c-moss) !important;
}

/* 丸矢印（緑の円＋白矢印）。前へは左向きに反転 */
.webgene-pagination ul li.prev a::before,
.pagelink p.prev a::before,
.webgene-pagination ul li.next a::after,
.pagelink p.next a::after {
  content: "";
  flex: none;
  width: clamp(22px, 1.9vw, 28px);
  height: clamp(22px, 1.9vw, 28px);
  background: url(../images/icon-arrow-circle.svg) center/contain no-repeat;
  transition: transform 0.3s;
}
.webgene-pagination ul li.prev a::before,
.pagelink p.prev a::before {
  transform: scaleX(-1);
}
.webgene-pagination ul li.prev a:hover::before,
.pagelink p.prev a:hover::before {
  transform: scaleX(-1) translateX(-4px);
}
.webgene-pagination ul li.next a:hover::after,
.pagelink p.next a:hover::after {
  transform: translateX(4px);
}

.news-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
  max-width: 386px;
  min-height: clamp(64px, 6.2vw, 94px);
  width: 100%;
  background-color: #e9e3a5;
  border-radius: 10px;
  transition: all 0.3s;
}
.news-back-button:hover {
  background-color: #a8ae94;
}
.news-back-button p {
  font-size: clamp(1rem, 0.919rem + 0.35vw, 1.25rem);
  color: #606704;
}

/* NEWS */

.news-sec2-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 8rem;
  background-color: #fff;
}

.news-main-box {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  max-width: 886px;
  width: 100%;
  margin-top: 4rem;
}
.news-main-box .webgene-blog .webgene-item .news-list {
  border-bottom: 1px solid #c0bd99;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  width: 100%;
}
@media (min-width: 768px) {
  .news-main-box .webgene-blog .webgene-item .news-list {
    padding-bottom: 2.6rem;
    margin-bottom: 2.6rem;
  }
}
.news-main-box .webgene-blog .webgene-item .news-list .link-box {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 1.4rem;
}
@media (min-width: 768px) {
  .news-main-box .webgene-blog .webgene-item .news-list .link-box {
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 3rem;
  }
}
.news-main-box .webgene-blog .webgene-item .news-list .link-box .img-box {
  width: 100%;
  aspect-ratio: 2/1;
  overflow: hidden;
  border-radius: 10px;
  background: url(../images/news-defo.jpg) center/cover no-repeat;
}

@media (min-width: 768px) {
  .news-main-box .webgene-blog .webgene-item .news-list .link-box .img-box {
    width: 25%;
    aspect-ratio: 4/3;
  }
}
.news-main-box .webgene-blog .webgene-item .news-list .link-box .img-box img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.news-main-box .webgene-blog .webgene-item .news-list .link-box .text-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  gap: 0.5rem;
}

.news-main-box .webgene-blog .webgene-item .news-list .link-box .text-box .day {
  color: #687e6d;
  font-size: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
  width: 20%;
}
.news-main-box
  .webgene-blog
  .webgene-item
  .news-list
  .link-box
  .text-box
  .title {
  font-size: clamp(1rem, 0.919rem + 0.35vw, 1.25rem);
}

.news-sec2-wrap2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 6rem 8rem;
  background-color: #fff;
}

.news-main-box2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 740px;
}
.news-main-box2 .webgene-blog .webgene-item .details-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
}
.news-main-box2 .webgene-blog .webgene-item .details-box .category {
  font-size: clamp(1rem, 0.919rem + 0.35vw, 1.25rem);
  width: 100%;
}
.news-main-box2 .webgene-blog .webgene-item .details-box .day {
  font-size: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
  letter-spacing: 0.15em;
  width: 100%;
  color: #687e6d;
}
.news-main-box2 .webgene-blog .webgene-item .details-box .title {
  font-size: clamp(1.125rem, 0.923rem + 0.88vw, 1.75rem);
  margin-top: 2rem;
  width: 100%;
}
.news-main-box2 .webgene-blog .webgene-item .details-box .img-box {
  width: 100%;
  overflow: hidden;
  margin-block: 2rem;
}
.news-main-box2 .webgene-blog .webgene-item .details-box .img-box img {
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.news-main-box2 .webgene-blog .webgene-item .details-box .text {
  font-size: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
  line-height: 2.4;
  margin-bottom: 3rem;
  width: 100%;
}

.top-news-index .webgene-blog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top-news-index .webgene-blog .webgene-item {
  width: 100%;
}

.top-news-index .webgene-blog .webgene-item .news-item {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 0.2rem;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #c9c9c9;
  width: 100%;
}

@media (min-width: 992px) {
  .top-news-index .webgene-blog .webgene-item .news-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1.6rem;
  }
}

.top-news-index .webgene-blog .webgene-item .news-item p {
  color: #767b35;
  font-size: clamp(0.875rem, 0.835rem + 0.18vw, 1rem);
}

.top-news-index .webgene-blog .webgene-item .news-item h3 {
  color: var(--c-text);
  font-size: clamp(1rem, 0.919rem + 0.35vw, 1.25rem);
}