/* =========================================================
   belog chez vous — Gold edition（デザインの総仕上げ）
   - style.css のあとに読み込み、色・装飾・文字組みを上書きします
   - 文章は変更していません（装飾は ::before / ::after と背景だけ）
   ========================================================= */
:root {
  --g-champagne: #C6AA78;
  --g-antique: #A88B55;
  --g-light: #E1D0AA;
  --g-deep: #8D7144;
  --g-ivory: #F7F3EC;
  --g-beige: #E9DFD2;
  --g-char: #302B28;
  --g-grad: linear-gradient(100deg, #8D7144 0%, #B8975F 22%, #E1D0AA 48%, #C6AA78 64%, #A88B55 100%);
  --g-grad-soft: linear-gradient(100deg, #A88B55 0%, #D6BF8F 45%, #E9DCBC 55%, #C6AA78 100%);
  --g-line: rgba(141, 113, 68, .26);

  /* 既存の色をゴールドの世界に合わせて置き換え */
  --paper: var(--g-ivory);
  --paper-2: var(--g-beige);
  --paper-3: #DDD0BE;
  --white: #FBF8F2;
  --ink: var(--g-char);
  --ink-2: #5A5048;
  --ink-3: #8C8074;
  --clay: var(--g-antique);
  --clay-deep: var(--g-deep);
  --line: var(--g-line);
  --char: var(--g-char);
  --ivory: var(--g-ivory);
  --brown: #7A6247;
}
::selection { background: var(--g-champagne); color: var(--g-char); }
body { background: var(--g-ivory); }

/* 装飾の素材（ライン・ダイヤ・コーナー） */
:root {
  --orn-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='12' viewBox='0 0 180 12'%3E%3Cpath d='M8 6h72' stroke='%23C6AA78' stroke-width='1' stroke-opacity='.85'/%3E%3Cpath d='M100 6h72' stroke='%23C6AA78' stroke-width='1' stroke-opacity='.85'/%3E%3Cpath d='M0 6h8M172 6h8' stroke='%23C6AA78' stroke-width='1' stroke-opacity='.3'/%3E%3Cpath d='M90 1l5 5-5 5-5-5z' fill='none' stroke='%23A88B55' stroke-width='1'/%3E%3Ccircle cx='90' cy='6' r='1.4' fill='%23A88B55'/%3E%3C/svg%3E");
  --orn-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M1 39V12C1 5.9 5.9 1 12 1h27' fill='none' stroke='%23C6AA78' stroke-width='1'/%3E%3Cpath d='M6 39V15c0-5 4-9 9-9h24' fill='none' stroke='%23C6AA78' stroke-width='.6' opacity='.6'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23C6AA78'/%3E%3C/svg%3E");
  --orn-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l24 24-24 24L4 28z' fill='none' stroke='%23A88B55' stroke-width='.5' opacity='.22'/%3E%3Ccircle cx='28' cy='28' r='1' fill='%23A88B55' opacity='.22'/%3E%3C/svg%3E");
}

/* =========================================================
   見出し：ゴールドの英字＋装飾ライン（スクロールで伸びる）
   ========================================================= */
.op-title__en {
  background: var(--g-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 300; letter-spacing: .08em;
}
.op-title__ja { background: transparent; color: var(--g-deep); border: 1px solid var(--g-champagne); padding: .38em 1em .34em; position: relative; }
.op-title__ja::before, .op-title__ja::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; border: 1px solid var(--g-champagne); background: var(--g-ivory); transform: translateY(-50%) rotate(45deg); }
.op-title__ja::before { left: -3.5px; } .op-title__ja::after { right: -3.5px; }
.op-head { position: relative; }
.op-head::after { content: ""; display: block; width: 180px; max-width: 60%; height: 12px; margin-top: 4px; background: var(--orn-rule) left center / 180px 12px no-repeat; transform-origin: left center; transform: scaleX(0); opacity: 0; transition: transform 1.6s cubic-bezier(.22, .61, .36, 1) .3s, opacity 1.2s ease .3s; }
.op-head.is-in::after { transform: none; opacity: 1; }
.op-head--row::after { grid-column: 1 / -1; }
.op-title--brand .op-title__ja { border: 0; padding: 0; color: var(--ink-2); }
.op-title--brand .op-title__ja::before, .op-title--brand .op-title__ja::after { display: none; }

/* 区切り線はやめて、背景色の変化でリズムをつくる */
.op-section + .op-section { border-top: 0; }

/* =========================================================
   ボタン：チャコール×ゴールドの縁、ホバーでゴールドが満ちる
   ========================================================= */
.btn { position: relative; overflow: hidden; isolation: isolate; letter-spacing: .18em; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-grad); transform: translateX(-101%); transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.btn:hover::before { transform: none; }
.btn--solid { background: var(--g-char); color: var(--g-light); border-color: var(--g-champagne); box-shadow: inset 0 0 0 3px var(--g-char), inset 0 0 0 4px rgba(198, 170, 120, .45); }
.btn--solid:hover { background: var(--g-char); color: var(--g-char); }
.btn--line { border-color: var(--g-champagne); color: var(--g-char); }
.btn--line:hover { background: transparent; color: var(--g-char); border-color: var(--g-antique); }
.header-cta { border-color: var(--g-champagne); color: var(--g-deep); }
.header-cta:hover { background: var(--g-char); color: var(--g-light); }
.catalog__toggle { border-color: var(--g-champagne); color: var(--g-char); position: relative; overflow: hidden; isolation: isolate; }
.catalog__toggle::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--g-grad); transform: translateX(-101%); transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.catalog__toggle:hover { background: transparent; color: var(--g-char); }
.catalog__toggle:hover::before { transform: none; }
.catalog__toggle-icon { border-color: var(--g-champagne); color: var(--g-antique); }
.map-link { border-color: var(--g-champagne); }
.map-link__icon { stroke: var(--g-antique); }

/* =========================================================
   アコーディオン：ゴールドの罫線とアイコン
   ========================================================= */
.acc { border-top-color: var(--g-line); }
.acc__item { border-bottom-color: var(--g-line); }
.acc__icon { border-color: rgba(168, 139, 85, .55); }
.acc__icon::before, .acc__icon::after { background: var(--g-deep); }
.acc__btn:hover .acc__icon { border-color: var(--g-antique); }
.is-open > .acc__heading .acc__icon, .is-open .acc__icon { background: var(--g-grad); border-color: var(--g-antique); }
.is-open > .acc__heading .acc__icon::before, .is-open > .acc__heading .acc__icon::after { background: var(--g-char); }
.acc__body h4::before { background: var(--g-champagne); transform: rotate(45deg); border-radius: 0; width: 5px; height: 5px; }
.acc__lead { color: var(--g-char); }
.acc__close { border-color: var(--g-champagne); color: var(--g-deep); }
.acc__close:hover { background: var(--g-char); color: var(--g-light); border-color: var(--g-char); }
.steps li::before, .faq .acc__q, .acc__lead-en, .pdx__num { color: var(--g-antique); }
/* 写真付きメニュー一覧：小さな写真にゴールドの輪郭 */
.acc__thumb { outline: 1px solid rgba(198, 170, 120, .7); outline-offset: 3px; }
.acc__item--menu > .acc__heading .acc__title { color: var(--g-deep); }
.acc__item--menu > .acc__heading .acc__btn:hover .acc__en { color: var(--g-deep); }
/* 開いた中の写真にゴールドの細い枠 */
.acc__media, .acc__photo-inline { position: relative; }
.acc__media::after, .acc__photo-inline::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(225, 208, 170, .75); pointer-events: none; }
.acc__photo-inline::before { bottom: calc(8px + 2em); }

/* =========================================================
   ファーストビュー：写真の中にゴールドの額縁、筆記体をシャンパンゴールドに
   ========================================================= */
.fv__frame::after { content: ""; position: absolute; inset: 12px; z-index: 3; border: 1px solid rgba(225, 208, 170, .55); pointer-events: none; opacity: 0; transition: opacity 2s ease 2.4s; }
.fv.is-ready .fv__frame::after, .fv.is-static .fv__frame::after { opacity: 1; }
.fv__eyebrow { color: var(--g-light); }
.fv--stack .ed--script .ed__in { background: linear-gradient(100deg, #D9C192 0%, #F1E3C2 45%, #E1D0AA 60%, #C6AA78 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fv .ed--salon .ed__in { color: var(--g-light); }
.fv .ed--salon::before { background: var(--g-champagne); opacity: .9; }
.fv__ja { color: rgba(247, 243, 236, .9); }
.fv__toggle { border-color: rgba(225, 208, 170, .7); }
@media (min-width: 900px) {
  .fv__stack { outline: 1px solid rgba(198, 170, 120, .55); outline-offset: 14px; margin-bottom: 14px; }
  .fv__stack::before, .fv__stack::after { content: ""; position: absolute; z-index: 4; width: 40px; height: 40px; background: var(--orn-corner) center / contain no-repeat; pointer-events: none; }
  .fv__stack::before { left: -22px; top: -22px; }
  .fv__stack::after { right: -22px; bottom: -22px; transform: rotate(180deg); }
  .fv--stack .fv__frame::after { inset: 18px; }
}

/* =========================================================
   ヘッダー・メニュー画面
   ========================================================= */
.site-header.is-scrolled { background: rgba(247, 243, 236, .88); box-shadow: 0 1px 0 rgba(198, 170, 120, .45); }
.logo__sub { color: var(--g-antique); }
.gnav a::after { background: var(--g-grad); height: 1px; }
.drawer { background: var(--g-ivory) var(--orn-lattice) center / 56px; }
.drawer__nav a { border-bottom-color: var(--g-line); }
.drawer__nav .ja { color: var(--g-antique); }
.drawer__group-label { color: var(--g-antique); }
.drawer__group-item { border-bottom-color: var(--g-line); }
.menu-open .site-header { background: var(--g-ivory); }

/* =========================================================
   セクションごとの背景と装飾
   ========================================================= */
/* Concept：やわらかな光と、大きな筆記体の透かし */
.op-concept { position: relative; overflow: hidden; background: radial-gradient(120% 70% at 100% 0%, rgba(225, 208, 170, .45), rgba(247, 243, 236, 0) 60%), var(--g-ivory); }
.op-concept::after { content: "chez vous"; position: absolute; right: -2vw; bottom: 2vw; font-family: var(--f-script); font-size: clamp(90px, 22vw, 260px); line-height: 1; color: rgba(198, 170, 120, .16); pointer-events: none; white-space: nowrap; }
.op-concept__catch { color: var(--g-char); }
.op-concept__catch::first-line { color: var(--g-deep); }
.op-concept .container { position: relative; z-index: 1; }

/* Staff：ウォームベージュの帯、写真に二重のゴールド枠 */
.op-staff { background: var(--g-beige); }
.op-staff__photo { position: relative; }
.op-staff__photo img { box-shadow: 0 24px 60px -36px rgba(48, 43, 40, .45); }
.op-staff__photo::after { content: ""; position: absolute; inset: calc(clamp(8px, 2vw, 24px) + 8px) 8px; border: 1px solid rgba(225, 208, 170, .85); pointer-events: none; }
@media (min-width: 600px) { .op-staff__photo { outline: 1px solid rgba(198, 170, 120, .6); outline-offset: 10px; } }
.op-staff__text { color: var(--ink-2); }
.op-staff__text::before { content: ""; display: block; width: 180px; height: 12px; margin: 0 auto 18px; background: var(--orn-rule) center / 180px 12px no-repeat; }
@media (max-width: 599px) { .op-staff__text::before { margin-left: 0; } }

/* Hair catalog：アイボリー、写真の内側に細いゴールドライン */
.op-catalog { background: var(--g-ivory); }
.catalog__item { position: relative; }
.catalog__item::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(225, 208, 170, 0); transition: border-color .6s ease, inset .6s ease; pointer-events: none; z-index: 1; }
.catalog__item:hover::after { border-color: rgba(225, 208, 170, .9); inset: 12px; }
.catalog__pick .catalog__cell:first-child .catalog__item::after { border-color: rgba(225, 208, 170, .7); }

/* Menu & Price：チャコールの夜のような帯に、ゴールドの料金表 */
.op-menu { background: radial-gradient(90% 60% at 0% 0%, rgba(198, 170, 120, .14), rgba(48, 43, 40, 0) 60%), var(--g-char); color: var(--g-ivory); }
.op-menu .op-title__en { background: var(--g-grad-soft); -webkit-background-clip: text; background-clip: text; }
.op-menu .op-title__ja { color: var(--g-light); }
.op-menu .op-title__ja::before, .op-menu .op-title__ja::after { background: var(--g-char); }
.op-menu .price-group h3 { color: var(--g-light); border-bottom: 0; padding-bottom: 11px; background: var(--g-grad) left bottom / 100% 1px no-repeat; }
.op-menu .price-group h3 > span { background: transparent; color: var(--g-champagne); border: 1px solid rgba(198, 170, 120, .6); }
.op-menu .price > div { border-bottom-color: rgba(225, 208, 170, .16); }
.op-menu .price dt { color: rgba(247, 243, 236, .88); }
.op-menu .price dt small, .op-menu .price dt span { color: rgba(225, 208, 170, .7); }
.op-menu .price dd { color: var(--g-light); }
.op-menu__notes p { color: rgba(247, 243, 236, .72); }
.op-menu__notes strong { color: var(--g-light); }
.op-menu .op-cta p { color: rgba(247, 243, 236, .78); }
.op-menu .btn--solid { background: transparent; color: var(--g-light); box-shadow: none; }
.op-menu .btn--solid:hover { color: var(--g-char); }

/* Craft：アイボリーに、ごく淡いひし形の地紋 */
.op-craft { background: var(--orn-lattice) center top / 56px, var(--g-ivory); }
.op-craft .acc { background: rgba(247, 243, 236, .86); }

/* Service：ウォームベージュ */
.op-service { background: linear-gradient(180deg, var(--g-beige), #EFE6DA); }

/* Q&A：アイボリー */
.op-faq { background: var(--g-ivory); }

/* Salon：チャコールの帯に写真、ゴールドの額縁と見出し */
.op-salon { background: var(--g-char); color: var(--g-ivory); }
.op-salon .op-title__en { background: var(--g-grad-soft); -webkit-background-clip: text; background-clip: text; }
.op-salon .op-title__ja { color: var(--g-light); }
.op-salon .op-title__ja::before, .op-salon .op-title__ja::after { background: var(--g-char); }
.rail__slide { position: relative; }
.rail__item { position: relative; }
.rail__item::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(225, 208, 170, .55); pointer-events: none; }
.rail__cap { color: rgba(247, 243, 236, .7); }
.rail__cap span { color: var(--g-light); }
.rail__bar { background: rgba(225, 208, 170, .2); }
.rail__bar span { background: var(--g-grad); }
.rail-nav__btn { border-color: rgba(198, 170, 120, .6); }
.rail-nav__btn::before { border-color: var(--g-light); }
.rail-nav__btn:hover { border-color: var(--g-light); }

/* Access：ベージュに、ゴールドの額縁のカード */
.op-info { background: var(--g-beige); }
.op-store--tokyo { position: relative; background: var(--white); outline: 1px solid rgba(198, 170, 120, .55); outline-offset: -8px; }
.op-store--tokyo::before, .op-store--tokyo::after { content: ""; position: absolute; width: 34px; height: 34px; background: var(--orn-corner) center / contain no-repeat; pointer-events: none; }
.op-store--tokyo::before { left: 2px; top: 2px; }
.op-store--tokyo::after { right: 2px; bottom: 2px; transform: rotate(180deg); }
.op-store--tokyo .brand-name { background: var(--g-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.info--compact > div { border-color: var(--g-line); }

/* Instagram・Journal：ゴールドの縁 */
.op-sns { background: var(--g-ivory); }
.op-sns--banner .op-sns__card { border-color: rgba(198, 170, 120, .45); background: var(--white); }
.op-sns--banner .op-sns__card::before { width: 2px; background: var(--g-grad) !important; opacity: 1; }
.op-sns--banner .op-sns__icon { border-color: rgba(198, 170, 120, .6); stroke: var(--g-deep); }
.op-sns--banner .op-sns__logo { background: var(--g-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 関連サイトのご案内 */
.op-guide { background: var(--g-beige); border-top: 0; }
.op-guide__title span { color: var(--g-antique); }
.guide-card { border-color: rgba(198, 170, 120, .45); }
a.guide-card:hover { border-color: var(--g-antique); }
.guide-card__thumb { outline: 1px solid rgba(198, 170, 120, .5); outline-offset: 2px; }
.guide-card__url { color: var(--g-deep); }
.guide-card__arrow { border-color: rgba(198, 170, 120, .6); }
.guide-card__arrow::before { color: var(--g-deep); }

/* フッター：チャコールにゴールドの飾り */
.site-footer--simple { background: var(--g-char); padding: 34px 0 calc(34px + env(safe-area-inset-bottom, 0px)); }
.site-footer--simple::before { content: ""; display: block; width: 180px; height: 12px; margin: 0 auto 14px; background: var(--orn-rule) center / 180px 12px no-repeat; }
.site-footer--simple .site-footer__copy { color: var(--g-light); letter-spacing: .14em; }

/* LINEのボタンにゴールドの輪 */
.line-tag { border-color: rgba(225, 208, 170, .8) !important; box-shadow: 0 0 0 3px rgba(48, 43, 40, .08), 0 10px 26px rgba(48, 43, 40, .2); }

/* 製品の写真見出し：ゴールドの枠 */
.pdx-head__photo { position: relative; }
.pdx-head__photo::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(225, 208, 170, .8); pointer-events: none; }
.pdx-head__catch { color: var(--g-deep); }

/* 拡大表示の説明をゴールドに */
.lightbox__caption { color: var(--g-light); }

/* =========================================================
   スマホ：装飾を控えめに（線を細く、コーナー飾りは省く）
   ========================================================= */
@media (max-width: 599px) {
  .op-head::after { width: 140px; background-size: 140px 10px; height: 10px; }
  .op-concept::after { font-size: 28vw; bottom: 8px; right: -4vw; }
  .op-store--tokyo::before, .op-store--tokyo::after { width: 26px; height: 26px; }
  .catalog__item::after { inset: 6px; }
  .rail__item::after { inset: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .op-head::after { transform: none; opacity: 1; transition: none; }
  .btn::before, .catalog__toggle::before { transition: none; }
}

/* 調整1 */
.op-menu .op-menu__notes { background: transparent; border: 1px solid rgba(198, 170, 120, .35); outline: 1px solid rgba(198, 170, 120, .15); outline-offset: 5px; }
.op-menu .op-menu__notes p { color: rgba(247, 243, 236, .76); }
.op-menu .op-menu__notes p::before { color: var(--g-champagne); }
.op-craft { background: var(--g-ivory); }
.op-craft::before { content: ""; position: absolute; inset: 0; background: var(--orn-lattice) center top / 56px; opacity: .45; pointer-events: none; }
.op-craft { position: relative; }
.op-craft > .container { position: relative; }
.catalog__toggle-en { white-space: nowrap; }

/* 調整2 */
.op-sns--banner .op-sns__card--journal .op-sns__logo, .op-sns--banner .op-sns__card .op-sns__logo { background: var(--g-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.op-guide__title { flex-wrap: wrap; }
.op-guide__title span, .map-link span { white-space: nowrap; }

/* 調整3：明るい窓の上でも文字が沈まないように */
.fv--stack .fv__shade { background:
    radial-gradient(80% 55% at 30% 62%, rgba(34, 26, 20, .38), rgba(34, 26, 20, 0) 70%),
    linear-gradient(0deg, rgba(34, 26, 20, .72) 0%, rgba(34, 26, 20, .48) 42%, rgba(34, 26, 20, .22) 72%, rgba(34, 26, 20, .12) 100%); }
.fv--stack .ed--script .ed__in { filter: drop-shadow(0 1px 12px rgba(30, 22, 16, .55)); }
.fv--stack .ed--may .ed__in, .fv--stack .ed--salon .ed__in, .fv__eyebrow, .fv__ja { text-shadow: 0 1px 14px rgba(30, 22, 16, .35); }
@media (min-width: 900px) {
  .fv--stack .fv__shade { background:
      radial-gradient(70% 50% at 32% 70%, rgba(34, 26, 20, .36), rgba(34, 26, 20, 0) 70%),
      linear-gradient(0deg, rgba(34, 26, 20, .7) 0%, rgba(34, 26, 20, .38) 42%, rgba(34, 26, 20, .1) 70%, rgba(34, 26, 20, 0) 84%),
      linear-gradient(90deg, rgba(34, 26, 20, .3) 0%, rgba(34, 26, 20, 0) 60%); }
}

/* 調整4：Concept の透かしは本文に重ねない */
.op-concept::after { color: rgba(198, 170, 120, .13); left: -1vw; right: auto; bottom: -.18em; }
@media (min-width: 900px) { .op-concept::after { font-size: clamp(120px, 13vw, 210px); left: 3vw; bottom: -.12em; } }

/* 関連サイトのご案内：カードをやめ、写真が流れるギャラリーで見せる（軽井沢店の店内／会社のアート） */
.op-guide .guide-show .container::before { content: none; }
.op-guide__title { margin-bottom: 0; }
.guide-show { margin-top: clamp(40px, 6vw, 72px); }
.guide-show + .guide-show { padding-top: clamp(40px, 6vw, 72px); background: linear-gradient(90deg, transparent, rgba(198, 170, 120, .7) 30%, rgba(198, 170, 120, .7) 70%, transparent) center top / min(560px, 72%) 1px no-repeat; }
.guide-show__head { display: grid; gap: 6px; justify-items: center; text-align: center; margin-bottom: clamp(20px, 3vw, 32px); }
.guide-show__label { font-family: var(--f-latin); font-size: 11.5px; letter-spacing: .16em; color: var(--g-deep); }
.guide-show__name { margin: 0; font-family: var(--f-latin); font-weight: 400; font-size: clamp(24px, 3vw, 34px); letter-spacing: .04em; line-height: 1.3;
  background: var(--g-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.guide-show__text { max-width: 34em; font-size: 12.5px; line-height: 1.9; color: var(--ink-2); text-wrap: balance; }
/* 写真の帯：スマートフォンは1枚半ほど、PCは4枚ほどが見える大きさ */
.guide-show__marquee { --mq-w: clamp(220px, 24vw, 380px); --mq-gap: clamp(10px, 1.2vw, 16px); }
.guide-show__marquee .marquee__item { background: var(--g-ivory); }
.guide-show__marquee .marquee__item::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(247, 243, 236, .7); pointer-events: none; }
/* アートは作品を切り取らず、高さをそろえて元の縦横比のまま並べる */
.marquee--art .marquee__item { width: auto; height: calc(var(--mq-w) * .75); }
.marquee--art .marquee__item::after { border-color: rgba(168, 139, 85, .45); }
.guide-show__foot { display: flex; justify-content: center; margin-top: clamp(18px, 2.6vw, 26px); }
.guide-show__link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 4px 9px; font-size: 12px; letter-spacing: .08em; color: var(--g-deep);
  background: linear-gradient(var(--g-antique), var(--g-antique)) left bottom / 100% 1px no-repeat; transition: color .3s; }
a.guide-show__link:hover { color: var(--g-char); }
.guide-show__link.is-pending { color: var(--ink-3); background: none; }
@media (max-width: 767px) {
  .guide-show__marquee { --mq-w: 62vw; --mq-gap: 8px; }
  .guide-show__marquee .marquee__item::after { inset: 6px; }
}
.guide-show__name.brand-name { font-size: clamp(30px, 3.6vw, 42px) !important; line-height: 1.2 !important; }
.op-guide > .container:first-child { text-align: center; }
.op-guide .op-guide__title { justify-content: center; }
.guide-show__link { white-space: nowrap; }
@media (min-width: 768px) { .guide-show__text { max-width: 44em; } }
/* 関連サイトの名前：金のグラデーションは右側が淡く読みにくいため、ヘッダーのロゴと同じ濃いチャコールの単色に */
.guide-show__name, .guide-show__name.brand-name { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--g-char) !important; -webkit-text-fill-color: currentColor; }

/* スタイリング剤：対象・容器・香り（ラベルつきの小さな一覧） */
.pdx__facts { display: grid; gap: 6px; margin: 14px 0 12px; font-size: 12.5px; line-height: 1.7; }
.pdx__facts > div { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 10px; }
.pdx__facts dt { color: var(--g-deep); letter-spacing: .12em; }
.pdx__facts dd { margin: 0; color: var(--ink-2); }

/* オリジナル製品：実物の写真（見出しは2製品を左右に並べる）と、オンラインショップへのリンク */
.pdx-head__photo--pair { display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 3 / 2; background: #f4f4f2; }
.pdx-head__photo--pair img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.pdx__photo { display: block; width: min(100%, 280px); margin: 0 auto 4px; position: relative; overflow: hidden; background: #f4f4f2; }
.pdx__photo img { display: block; width: 100%; height: auto; transition: transform 1s var(--ease-out); }
.pdx__photo::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(198, 170, 120, .55); pointer-events: none; }
@media (hover: hover) { .pdx__photo:hover img { transform: scale(1.03); } }
.pdx__shop { margin: 2px 0 6px; }
.pdx__shop a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 2px 7px; font-size: 13px; letter-spacing: .08em; color: var(--g-deep); white-space: nowrap;
  background: linear-gradient(var(--g-antique), var(--g-antique)) left bottom / 100% 1px no-repeat; transition: color .3s; }
.pdx__shop a:hover { color: var(--g-char); }
#product-styling .pdx-head__photo--pair { aspect-ratio: 2 / 1; }
#product-styling .pdx-head__photo--pair img { object-position: 50% 50%; }
.acc__summary .nw { white-space: nowrap; }
.pdx__shop { margin-top: 8px; }
/* 2つの製品の見出し写真を同じ高さに（PCでは左右に並ぶため） */
.pdx-head__photo--pair, #product-styling .pdx-head__photo--pair { aspect-ratio: 2 / 1; }
#product-shampoo .pdx-head__photo--pair img:first-child { object-position: 50% 30%; }
/* スマホ：シャンプーは 3:2、スタイリング剤は 2:1。PC（左右に並ぶ）は両方 2:1 で高さをそろえる */
#product-shampoo .pdx-head__photo--pair { aspect-ratio: 3 / 2; }
#product-shampoo .pdx-head__photo--pair img:first-child { object-position: 50% 55%; }
@media (min-width: 900px) {
  #product-shampoo .pdx-head__photo--pair { aspect-ratio: 2 / 1; }
  #product-shampoo .pdx-head__photo--pair img:first-child { object-position: 50% 66%; }
}
.pdx-head__photo--pair { grid-template-rows: 100%; }
.pdx-head__photo--pair img { min-height: 0; aspect-ratio: auto; }

/* オリジナル製品：1枚の画像とオンラインショップへのボタン（軽井沢店と同じ形。2026-10-23） */
.shopbnr { display: grid; gap: 16px; margin-top: 8px; }
.shopbnr__img { display: block; position: relative; overflow: hidden; background: var(--g-ivory); }
.shopbnr__img img { display: block; width: 100%; height: auto; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.shopbnr__img::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(225, 208, 170, .8); pointer-events: none; }
@media (hover: hover) { .shopbnr__img:hover img { transform: scale(1.02); } }
.shopbnr__btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 24px;
  background: var(--g-char); color: var(--g-ivory); font-family: var(--f-mincho); font-size: 15px; letter-spacing: .14em;
  border: 1px solid var(--g-antique); outline: 1px solid rgba(198, 170, 120, .45); outline-offset: 3px; transition: background .4s, color .4s; }
.shopbnr__btn span { color: var(--g-light); transition: transform .3s; }
.shopbnr__btn:hover { background: var(--g-antique); color: var(--g-ivory); }
.shopbnr__btn:hover span { transform: translate(2px, -2px); color: var(--g-ivory); }
@media (min-width: 760px) { .shopbnr__btn { width: min(100%, 420px); margin: 4px auto 0; } }
@media (prefers-reduced-motion: reduce) { .shopbnr__img img { transition: none; } }
.shopbnr__lead { margin: 0 0 18px; font-size: 14px; line-height: 2; color: var(--ink-2); text-wrap: pretty; }

/* Journal → voice → Instagram：3枚を同じ形に（A：1枚ずつ色の濃淡／B：右下に大きく薄い頭文字）。2026-10-23 ユーザー決定 */
#journal .op-sns__grid--3 { max-width: 1080px; grid-template-columns: 1fr !important; gap: 10px; }
@media (min-width: 900px) { #journal .op-sns__grid--3 { grid-template-columns: repeat(3, 1fr) !important; gap: 16px; } }
#journal .op-sns__grid--3 .op-sns__card { position: relative; overflow: hidden; display: flex; align-items: center; flex-wrap: nowrap; gap: 14px;
  padding: 16px 20px 16px 18px; min-height: 0; border: 1px solid #E1D0AA; color: var(--g-char); }
#journal .op-sns__grid--3 .op-sns__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; opacity: 1; }
#journal .op-sns__grid--3 .op-sns__card::after { content: attr(data-mark); position: absolute; right: 10px; bottom: -.32em; font-family: var(--f-latin); font-style: italic; font-weight: 400;
  font-size: 96px; line-height: 1; color: #8D7144; opacity: .09; pointer-events: none; }
#journal .op-sns__card--journal { background: #F7F3EC; }
#journal .op-sns__card--journal::before { background: #8D7144 !important; }
#journal .op-sns__card--voice2 { background: #EFE6D3; }
#journal .op-sns__card--voice2::before { background: #A88B55 !important; }
#journal .op-sns__card--insta { background: #E9DFD2; }
#journal .op-sns__card--insta::before { background: #C6AA78 !important; }
#journal .op-sns__grid--3 .op-sns__icon { flex: none; box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 50%; background: rgba(255, 255, 255, .55); fill: none; stroke-width: 1.1; }
#journal .op-sns__card--journal .op-sns__icon { border: 1px solid #8D7144; stroke: #8D7144; }
#journal .op-sns__card--voice2 .op-sns__icon { border: 1px solid #A88B55; stroke: #A88B55; }
#journal .op-sns__card--insta .op-sns__icon { border: 1px solid #C6AA78; stroke: #A88B55; }
#journal .op-sns__card--insta .op-sns__icon .dot { fill: #A88B55; }
#journal .op-sns__icon--voice .ring { stroke-dasharray: 2.4 2.6; }
#journal .op-sns__grid--3 .op-sns__body { flex: 1 1 auto; min-width: 0; }
#journal .op-sns__grid--3 .op-sns__logo { font-size: clamp(22px, 5.6vw, 26px); }
#journal .op-sns__grid--3 .op-sns__logo--lower { text-transform: none; letter-spacing: .04em; font-size: clamp(26px, 6.4vw, 30px); }
#journal .op-sns__grid--3 .op-sns__more { position: relative; z-index: 1; flex: none; margin: 0 0 0 auto; font-size: 11.5px; color: var(--g-deep); white-space: nowrap; }
@media (max-width: 420px) {
  #journal .op-sns__grid--3 .op-sns__card { flex-wrap: nowrap; }
  #journal .op-sns__grid--3 .op-sns__more { flex-basis: auto; margin: 0 0 0 auto; }
}
/* 名前と「〜を見る →」が重ならないよう、どの画面幅でも2行にする（アイコンの右に、名前・その下にリンクの文字） */
@media all {
  #journal .op-sns__grid--3 .op-sns__card { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon body" "icon more"; column-gap: 14px; row-gap: 2px; align-items: center; }
  #journal .op-sns__grid--3 .op-sns__icon { grid-area: icon; }
  #journal .op-sns__grid--3 .op-sns__body { grid-area: body; }
  #journal .op-sns__grid--3 .op-sns__more { grid-area: more; margin: 0; justify-self: start; }
}

/* ヘッドスパの動画（16:9。金の細い内枠） */
.acc__video { position: relative; margin: 22px 0 6px; aspect-ratio: 16 / 9; max-width: 100%; background: var(--g-char); overflow: hidden; }
.acc__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* スマホのメニュー：外部へのリンク（Journal・voice・Instagram・オンラインショップ）に「別のページ」の小さな印。項目が増えた分の出てくる順番 */
.drawer__nav .drawer__ext .ja::after { content: "↗"; margin-left: 6px; font-size: .9em; color: var(--g-antique); }
.menu-open .drawer__nav a:nth-child(11) { transition-delay: .65s; }
.menu-open .drawer__nav a:nth-child(12) { transition-delay: .7s; }
.menu-open .drawer__nav a:nth-child(13) { transition-delay: .75s; }
.menu-open .drawer__nav a:nth-child(14) { transition-delay: .8s; }
/* SNS・メディア（スタッフの下に移動。10/23）：見出しとカードの間を詰める */
#journal .op-head { margin-bottom: clamp(22px, 3vw, 34px); }

/* メニュー・料金：帯（バナー）を押すと料金表が開く（10/23） */
.price-acc { margin-top: clamp(8px, 2vw, 16px); }
.price-acc__heading { margin: 0; font-size: inherit; font-weight: inherit; }
.price-acc__heading::before, .price-acc__heading::after { display: none !important; }
.price-acc__btn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "en icon" "title icon" "sub icon"; align-items: center; gap: 4px 18px;
  width: 100%; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); text-align: left; cursor: pointer;
  background: linear-gradient(120deg, rgba(198, 170, 120, .16), rgba(198, 170, 120, .04)); border: 1px solid rgba(198, 170, 120, .7); outline: 1px solid rgba(198, 170, 120, .3); outline-offset: 4px;
  color: var(--g-ivory); transition: background .4s; }
.price-acc__btn:hover { background: linear-gradient(120deg, rgba(198, 170, 120, .26), rgba(198, 170, 120, .08)); }
.price-acc__en { grid-area: en; font-family: var(--f-latin); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--g-champagne); }
.price-acc__title { grid-area: title; font-family: var(--f-mincho); font-size: clamp(19px, 2.6vw, 24px); letter-spacing: .12em; color: var(--g-ivory); }
.price-acc__sub { grid-area: sub; font-size: 12px; line-height: 1.8; letter-spacing: .04em; color: rgba(247, 243, 236, .62); }
.price-acc__icon { grid-area: icon; }
.price-acc__inner { padding-top: clamp(28px, 4vw, 40px); }
.price-acc__sub span { display: inline-block; }

/* フッター：グループのリンク（Salons・Company・Media・Shop。各行1行・同じ高さ） */
.footer-group { width: min(100% - 40px, 520px); margin: 0 auto 22px; }
.footer-group dl { margin: 0; display: grid; border-top: 1px solid rgba(198, 170, 120, .28); }
.footer-group dl > div { display: grid; grid-template-columns: 6.2em minmax(0, 1fr); align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid rgba(198, 170, 120, .28); }
.footer-group dt { font-family: var(--f-latin); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--g-champagne); }
.footer-group dd { margin: 0; display: flex; flex-wrap: nowrap; gap: 18px; white-space: nowrap; overflow: hidden; }
.footer-group a { color: var(--g-ivory); font-size: 14px; letter-spacing: .06em; transition: color .3s; }
.footer-group a:hover { color: var(--g-light); }
.footer-group .brand-name { font-size: 17px !important; line-height: 1 !important; color: inherit; }
.footer-group a span[aria-hidden] { margin-left: 4px; font-size: .85em; color: var(--g-champagne); }
@media (max-width: 380px) { .footer-group dd { gap: 14px; } .footer-group a { font-size: 13.5px; } }

/* ---------- 使いやすさ改善（2026-10-23・6サイト使いやすさ改善プロジェクト）見た目は変えず、押せる範囲だけ広げる ---------- */
/* フッター：行の高さ（46px）は変えずに、リンクを行いっぱいの高さで押せるように */
.footer-group dd { align-self: stretch; align-items: stretch; }
.footer-group dd a { display: inline-flex; align-items: center; min-height: 44px; }
/* トップ動画の一時停止ボタン：丸は34pxのまま、押せる範囲を44pxに */
.fv__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; }
/* 「（髪質改善）」を一かたまりで折り返す */
.acc__title .nw { white-space: nowrap; }