/* ============================================
   Next.js overrides for SWELL theme CSS
   SWELLのmain.jsが無い環境で正しく表示するための修正
   ============================================ */

/* --- スクロールバー消失による横揺れ防止 --- */
html {
  scrollbar-gutter: stable;
}

/* --- Tailwind `size-full` ユーティリティとWPクラスの衝突解消 ---
   WordPressの画像ブロックは figure に `size-full`（＝フルサイズ画像の意。
   寸法には影響しないWPのクラス）が付く。一方 Tailwind v4 は同名の
   ユーティリティ `size-full` を `width:100%;height:100%` として出力するため、
   figure が height:100% を拾い、画像(例239px)より遥かに高い箱(例508px)になる。
   結果、画像の下に巨大な余白が生まれ、本文が画像と重なって見える（mariage等）。
   WP本番では figure は画像内容ぶんの高さ（auto）。WP準拠に戻すため、
   WPの画像ブロック(.wp-block-image)に付いた size-full の寸法だけ auto に上書き。
   2クラス分の詳細度で単一クラスのTailwindユーティリティに勝つ。
   ※ figure内の<img>側は元から max-width:100%/height:auto で正しいので触らない。 */
figure.wp-block-image.size-full {
  width: auto;
  height: auto;
}

/* --- SWELLアニメーション初期非表示の一括解除 --- */
.p-mainVisual,
.p-mainVisual__inner,
.p-mainVisual__textLayer,
.p-mainVisual__scroll,
.p-postSlider,
.p-postSlider__swiper,
.-type-slider .p-mainVisual__inner,
.l-header,
.l-header__inner,
.l-header__bar,
.l-header__spNav,
.l-content {
  opacity: 1 !important;
  animation: none !important;
  -webkit-animation: none !important;
  visibility: visible !important;
}

/* --- ヘッダー表示修正 --- */
.l-header {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: none !important;
  box-shadow: none !important;
}

.l-header.-t-fff .l-header__inner {
  color: #fff !important;
}

.l-header .l-header__inner {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  padding: 0 24px;
}

.l-header .c-gnav > li > a::after {
  background: #fff;
}

@media (min-width: 960px) {
  .l-header__gnav {
    display: flex !important;
  }
  .c-headLogo__img.-common {
    display: none !important;
  }
  .c-headLogo__img.-top {
    display: block !important;
  }
  .l-header__menuBtn,
  .l-header__customBtn {
    display: none !important;
  }
}

/* グローバルナビ横並び */
.c-gnav {
  display: flex !important;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}

.c-gnav > li {
  position: relative;
}

.c-gnav > li > a {
  display: block;
  padding: 0 12px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: inherit;
  line-height: var(--swl-headerH, 72px);
  white-space: nowrap;
}

/* sub-menu: 親liにposition:relative + ホバーブリッジ */
.c-gnav > li.menu-item-has-children {
  position: relative;
}
.c-gnav > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 16px;
  pointer-events: auto;
}

/* ヘッドロゴ */
.c-headLogo {
  margin: 0;
}

.c-headLogo.-img .c-headLogo__link {
  display: block;
}

.c-headLogo__img {
  height: auto;
  max-height: 40px;
  width: auto;
}

@media (max-width: 959px) {
  /* SP: ヘッダー固定表示（本番と同じ） */
  .l-header {
    position: fixed !important;
  }

  .l-header__gnav {
    display: none !important;
  }

  /* SP: ロゴ中央配置（flex:1で残りスペースを取り、内側でセンタリング） */
  .l-header__logo {
    order: 2;
    flex: 1;
    display: flex !important;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }

  .l-header__logo .c-headLogo {
    margin: 0 !important;
  }

  .l-header__logo .c-headLogo__link {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .l-header__logo .c-headLogo__img {
    height: 28px !important;
    width: auto !important;
    max-width: 100%;
  }

  /* SP: -commonロゴを非表示 */
  .c-headLogo__img.-common {
    display: none !important;
  }
  .c-headLogo__img.-top {
    display: block !important;
  }

  /* SP: ハンバーガーとボタンを表示 */
  .l-header__menuBtn {
    display: flex !important;
    order: 1;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .l-header__customBtn {
    display: flex !important;
    order: 3;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  /* SP: ヘッダー内部flex */
  .l-header .l-header__inner {
    display: flex !important;
    align-items: center;
    padding: 0 8px;
    height: 56px;
  }

  /* SP: ヒーロー高さ調整 */
  .p-mainVisual.-height-full .p-mainVisual__inner {
    height: 100svh;
  }

  /* SP: トップ時 — 透明+下線のみ */
  body.is-top .l-header {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  /* SP: スクロール時 — すりガラス */
  body:not(.is-top) .l-header {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
  }

  /* SP: fixHeaderは不要（l-headerがfixedで両状態を担う） */
  .l-fixHeader {
    display: none !important;
  }
}


/* --- SPメニュー（ドロワー）--- */
/* WPのp-spMenuは全画面コンテナ。__innerがスライドパネル。
   wp-theme-styles.cssのtransform/transitionをそのまま活かし、
   見た目（ガラス、色）だけ上書きする */
.p-spMenu {
  z-index: 300 !important;
  display: block !important;
  background: transparent !important;
  color: #2A2018;
  opacity: 0;
  pointer-events: none;
}

[data-spmenu="opened"] .p-spMenu {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

/* ガラスパネル本体 — wp-theme-styles.cssのwidth/transform/transitionを継承 */
.p-spMenu__inner {
  background: rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1) !important;
}

.p-spMenu__inner::before {
  background: transparent !important;
  display: none !important;
}

/* 閉じるボタン（WPと同じ配置: top:0, left:0, 48x48） */
.p-spMenu__closeBtn {
  color: #2A2018 !important;
}

.p-spMenu__closeBtn .c-iconBtn__icon {
  font-size: 20px;
}

/* MENUタイトル */
.p-spMenu .c-widget__title {
  display: block !important;
  color: #2A2018 !important;
  border-left-color: #2A2018 !important;
}

/* ナビ — c-listMenuのWPスタイル（シェブロン、パディング）を活かしつつ色を上書き */
.p-spMenu .c-spnav a {
  color: #2A2018 !important;
  border-bottom-color: rgba(0, 0, 0, 0.1) !important;
}

.p-spMenu .c-spnav a::before {
  color: #2A2018 !important;
}

/* オーバーレイ */
.p-spMenu__overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

[data-spmenu="opened"] .p-spMenu__overlay {
  opacity: 0.6 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* --- ヒーロー動画 --- */
.p-mainVisual {
  position: relative !important;
  overflow: hidden !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw);
}

.p-mainVisual.-height-full {
  height: 100vh !important;
  height: 100svh !important;
}

.p-mainVisual.-height-full .p-mainVisual__inner {
  height: 100% !important;
}

.p-mainVisual__video {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.p-mainVisual__imgLayer {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ヒーローのオーバーレイ（本番と同じ暗さ） */
.p-mainVisual .c-filterLayer::before {
  background-color: #000 !important;
  opacity: 0.2 !important;
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1 !important;
  pointer-events: none;
}

/* --- Scrollボタン --- */
.p-mainVisual__scroll {
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;
  cursor: pointer;
  background: none !important;
  border: none !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  color: #fff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.p-mainVisual__scrollArrow {
  width: 28px !important;
  height: 28px !important;
  fill: currentColor !important;
  animation: scrollBounce 2s ease-in-out infinite !important;
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.p-mainVisual__scrollLabel {
  display: block !important;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
  font-family: serif;
}

/* --- ヘッダーを最前面に --- */
.l-header {
  z-index: 200 !important;
}

/* --- body_wrap --- */
#body_wrap {
  display: flow-root;
  overflow-x: clip;
  overflow-y: visible !important;
  height: auto !important;
}

/* --- CSS変数（本番サイトから取得した正確な値） --- */
:root {
  --color_main: #ffffff;
  --color_text: #5f6368;
  --color_link: #5f6368;
  --color_bg: #ffffff;
  --color_header_bg: #111111;
  --color_header_text: #ffffff;
  --color_border: hsla(0,0%,78%,.5);
  --color_footer_bg: #ffffff;
  --color_footer_text: #000000;
  --swl-fz--content: 16px;
  --swl-font_family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --swl-headerH: 72px;
  --swl-fix_headerH: 77px;
  --swl-post_slide_padY: 0px;
  --swl-pad_container: 48px;
  --swl-pad_post_content: 16px;
  --ps_space: 0;
  --swl-adminbarH: 0px;
  --color_htag: #ffffff;
  --color_gradient1: #d8ffff;
  --color_gradient2: #87e7ff;
  --color_main_thin: rgba(255, 255, 255, 0.05);
  --color_main_dark: rgba(191, 191, 191, 1);
  --color_list_check: #ffffff;
  --color_list_num: #ffffff;
  --color_list_good: #86dd7b;
  --color_list_triangle: #f4e03a;
  --color_list_bad: #f36060;
  --color_faq_q: #d55656;
  --color_faq_a: #6599b7;
  --swl-font_weight: 400;
}

body {
  font-family: var(--swl-font_family);
  font-size: var(--swl-fz--content);
  color: var(--color_text);
  line-height: 1.8;
  background-color: var(--color_bg);
}

/* --- ポストスライダー --- */
#post_slider {
  padding-bottom: 24px;
}
#post_slider .p-postList__thumb {
  box-shadow: none;
  border-radius: 0;
}
#post_slider .p-postList__link {
  border-radius: 0;
}

/* ポストスライダー: 本番と同じ高さ制限（PC/SP共通） */
#post_slider {
  height: 24px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* --- セクション間余白（本番のcomputed valuesに合わせる） --- */
#intro {
  padding-bottom: 60px;
}

#bust-issues,
#section-commitment,
#page-navigation,
#menu,
#uservoice,
#salon,
#section-infohub,
#section-blog {
  margin-bottom: 80px;
}

/* コンテナ幅 */
#content.l-content {
  max-width: 1230px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  min-height: calc(100vh - 400px);
}

/* ヘッダー食い込み防止: non-heroページ用 padding-top
   サロンTOP（id_752, id_181）とマリアージュ（id_1346）は
   ヒーロー or 固定背景があるため除外。
   #body_wrap にページ固有のクラスが付くので直接指定。 */
#body_wrap:not(.id_752):not(.id_181):not(.id_1346) #content.l-content {
  padding-top: var(--swl-headerH, 72px);
}
@media (max-width: 959px) {
  /* SPの固定ヘッダー実高 = 56px(本体) + 1px(下線) = 57px に合わせる。
     旧値49pxだとヘッダーに8px食い込み(パンくずが潜る)、
     逆に--swl-headerH(72px)を使うと SP では15pxの隙間が出る。
     b811147 で他の子ページに入れた page-*.css の 57px と統一。 */
  #body_wrap:not(.id_752):not(.id_181):not(.id_1346) #content.l-content {
    padding-top: 57px;
  }
}

/* ブログ詳細(single-post)はパンくず #breadcrumb が #content の外(兄弟)にあり、
   固定ヘッダーの裏に潜っていた。可視パンくずをヘッダー高さ分だけ下げ、
   その分 #content 側のヘッダーオフセットは解除して二重の余白を防ぐ。
   ブログ一覧(.page)はパンくずが #content 内にあるため上記ルールのままでよい。 */
#body_wrap.single-post #breadcrumb {
  padding-top: var(--swl-headerH, 72px);
}
/* :not()3つ分の詳細度を持つ汎用ルールに勝つため同等の詳細度で打ち消す */
#body_wrap.single-post:not(.id_752):not(.id_181):not(.id_1346) #content.l-content {
  padding-top: 0;
}
@media (max-width: 959px) {
  #body_wrap.single-post #breadcrumb {
    padding-top: 57px;
  }
}

/* WP Modal Window plugin: 非表示（表示はJSが制御） */
.modal-window { display: none; }

/* l-mainContent__innerの幅制限 */
.l-mainContent__inner {
  max-width: 100%;
  padding: 0 var(--swl-pad_container, 48px);
}

/* --- ガラスモーフィズムの微調整（本番一致） --- */
.ptlIssues__card {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}


[data-scrolled="false"] .l-header {
  background: none !important;
}

/* --- フルブリードセクション（l-mainContent__innerの外にはみ出す） --- */
.ptlIntro-section,
.ptlNavHero,
.ptlSalonHero,
.ptlHub,
.ptl-news-pc-only,
.ptl-news-sp-only {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
}

/* --- フローティングメニュー: SPのみ表示 --- */
@media (min-width: 960px) {
  .ptl-float-menu {
    display: none !important;
  }
  #fix_bottom_menu {
    display: none !important;
  }
}

/* --- ナビボタンの角丸（本番値） --- */
.ptlNavHero__btn {
  border-radius: 10px !important;
}

/* --- INTROセクションの動画 --- */
.ptlIntro__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ptlIntro__media {
  position: relative;
  overflow: hidden;
}

/* --- ヒーローのオーバーレイ濃度を本番に合わせる --- */
.p-mainVisual .c-filterLayer::before {
  background-color: #000 !important;
  opacity: 0.2 !important;
}

/* --- ポストスライダーSwiper修正（高さは上で24px制限済み） --- */

/* --- お客様の声Swiper修正 --- */
.uservoice-slider .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
}

.uservoice-slider .swiper-slide {
  flex-shrink: 0 !important;
}

/* --- INTROセクションのMOREボタン（本番一致） --- */
.ptlIntro__cta-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif !important;
  font-size: 18px !important;
  letter-spacing: 1.44px !important;
  color: var(--color_text) !important;
  text-decoration: none !important;
  border: none !important;
  background: none !important;
  padding: 6px 14px !important;
  cursor: pointer;
}

/* INTROメディアエリアの背景画像表示 */
.ptlIntro__media {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* --- SWELLアコーディオン: ネイティブ<details>の開閉を有効化 ---
   wp-theme-styles.css の :not(.is-opened) > .swell-block-accordion__body が
   height:0!important; opacity:0 を設定しており、SWELLのJS無しでは開かない。
   ネイティブ <details>[open] 属性を使って上書きする。 */
details[open] > .swell-block-accordion__body {
  height: auto !important;
  opacity: 1 !important;
  padding: 1em !important;
  visibility: visible !important;
}

/* アイコン切り替え: open時にプラス→マイナス */
details[open] .__icon--closed {
  opacity: 0;
  transform: scale(0.5) rotate(180deg);
}
details[open] .__icon--opened {
  opacity: 1;
  transform: scale(1) rotate(0);
}
details:not([open]) .__icon--opened {
  opacity: 0;
  transform: scale(0.5) rotate(-180deg);
}
details:not([open]) .__icon--closed {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* --- スムーススクロール（本番WPサイト一致） --- */
html {
  scroll-behavior: smooth;
}

/* --- 全MOREボタン統一スタイル（本番computed values一致） --- */
.ptlNews__moreBtn,
.ptlCommit__more,
.ptlIntro__cta-button {
  border: none !important;
  font-size: 18px !important;
  padding: 6px 14px !important;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif !important;
  letter-spacing: 1.44px !important;
  text-decoration: none !important;
  color: var(--color_text) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: none !important;
  cursor: pointer;
}

/* --- セクションタイトル統一（本番computed values一致） --- */
.ptl-section__title {
  font-size: clamp(22px, 2.8vw, 28px) !important;
  letter-spacing: 0.12em !important;
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif !important;
  text-align: center;
}

/* --- フッター下段のボーダー（本番一致） --- */
.ptl-footer__lower {
  border-top: 1px solid #eee;
}

/* --- フッター splitlink ホバーアニメーション --- */
.ptl-footer__nav-link .splitlink-wrap,
.ptl-footer__salon-link .splitlink-wrap,
.ptl-footer__salon-label .splitlink-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  overflow: hidden;
}
.ptl-footer__nav-link .splitlink-before,
.ptl-footer__salon-link .splitlink-before,
.ptl-footer__salon-label .splitlink-before {
  display: inline-flex;
  align-items: center;
}
.ptl-footer__nav-link .splitlink-after,
.ptl-footer__salon-link .splitlink-after,
.ptl-footer__salon-label .splitlink-after {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
}
.ptl-footer__nav-link .splitlink-before span,
.ptl-footer__nav-link .splitlink-after span,
.ptl-footer__salon-link .splitlink-before span,
.ptl-footer__salon-link .splitlink-after span,
.ptl-footer__salon-label .splitlink-before span,
.ptl-footer__salon-label .splitlink-after span {
  display: inline-block;
  line-height: 1.2;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ptl-footer__nav-link .splitlink-after span,
.ptl-footer__salon-link .splitlink-after span,
.ptl-footer__salon-label .splitlink-after span {
  transform: translateY(100%);
}