/* ========================================================
   TOPページ固有CSS  /  top-custom.css
   ベースフォント: 10px (62.5%) なので 1rem = 10px
   ======================================================== */

/* キャッチテキストの初期状態（JS側でフェードイン） */
#bc-catch { opacity: 0; }

/* --------------------------------------------------------
   MV中央ロゴオーバーレイ（常時表示・読み込み後フェードイン）
-------------------------------------------------------- */
#mv-logo-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

#mv-logo-overlay.is-visible {
  opacity: 1;
}

.mv-logo-frame {
  border: 1px solid rgba(255, 255, 255, 0.65);
  padding: clamp(28px, 4vw, 56px) clamp(44px, 7vw, 110px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.mv-logo-main {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: clamp(3.8rem, 5.8vw, 7.6rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #fff;
  line-height: 1.1;
}

.mv-logo-sub {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: clamp(1.0rem, 1.3vw, 1.5rem);
  letter-spacing: 0.4em;
  text-indent: 0.4em; /* letter-spacingの末尾アキを相殺し文字を左右中央に */
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  align-items: center;      /* 横線を天地中央に */
  justify-content: center;
  gap: 0.3em;               /* 文字と横線の間隔 */
}
/* 「NAIL SALLON」の両サイドに天地中央の横線（旧「- -」の代替） */
.mv-logo-sub::before,
.mv-logo-sub::after {
  content: "";
  width: 24px;              /* 横線の長さ */
  height: 1px;              /* 横線の太さ */
  background: currentColor; /* 文字色(白)に追従 */
  opacity: .5;
  flex-shrink: 0;
}

/* --------------------------------------------------------
   MV下：ロゴ＋説明文
-------------------------------------------------------- */
#mv-tagline {
  background: #fff;
  text-align: center;
  padding: clamp(60px, 8vw, 100px) 20px;
}

.mv-tagline__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.mv-tagline__logo {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(3.6rem, 5.5vw, 7rem);
  letter-spacing: 0.06em;
  color: #2b2522;
  line-height: 1.1;
  margin: 0;
}

.mv-tagline__sub {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: clamp(1rem, 1.3vw, 1.4rem);
  letter-spacing: 0.42em;
  color: #8a7a6e;
  margin: 10px 0 0;
}

.mv-tagline__rule {
  width: 40px;
  height: 1px;
  background: #BFA48E;
  margin: 32px auto;
}

.mv-tagline__text {
  font-size: clamp(1.3rem, 1.5vw, 1.5rem);
  line-height: 2.6;
  letter-spacing: 0.1em;
  color: #6b5e54;
  margin: 0;
}

@media (max-width: 639px) {
  .mv-tagline__text br.bc-pc-br { display: none; }
}

/* --------------------------------------------------------
   ヒーローロゴセクション（ヘッダー直下・MV直上）
-------------------------------------------------------- */
#bc-hero-logo {
  background: #fff;
  text-align: center;
  padding: clamp(100px, 13vw, 150px) 20px clamp(50px, 7vw, 90px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bc-hero-logo__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.bc-hero-logo__main {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: clamp(5rem, 7.5vw, 10rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: #2b2522;
  line-height: 1.1;
}

.bc-hero-logo__sub {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: clamp(1.2rem, 1.6vw, 1.8rem);
  letter-spacing: 0.38em;
  text-indent: 0.38em; /* letter-spacingの末尾アキを相殺し文字を左右中央に */
  color: #8a7a6e;
  display: flex;
  align-items: center;      /* 横線を天地中央に */
  justify-content: center;
  gap: 0.3em;               /* 文字と横線の間隔 */
}
/* 「NAIL SALLON」の両サイドに天地中央の横線（旧「- -」の代替） */
.bc-hero-logo__sub::before,
.bc-hero-logo__sub::after {
  content: "";
  width: 24px;              /* 横線の長さ */
  height: 1px;              /* 横線の太さ */
  background: currentColor; /* 文字色(#8a7a6e)に追従 */
  opacity: .5;
  flex-shrink: 0;
}

/* bc-hero-logo 下のSNS（.bc-hero-logo__sns）は全ページ共通のため site.css に移設 */

@media (max-width: 896px) {
  #bc-hero-logo {
    flex-direction: column;
    gap: 24px;
    /* SPは上下paddingを同値に揃える（横20pxは維持） */
    padding-top: clamp(60px, 10vw, 90px);
    padding-bottom: clamp(60px, 10vw, 90px);
  }
}

/* --------------------------------------------------------
   共通：セクションラベル（— Label）
-------------------------------------------------------- */
.tp-label {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  color: #BFA48E;
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 0;
}
.tp-label::before {
  content: "";
  width: 36px; height: 1px;
  background: #BFA48E;
  display: inline-block;
  flex-shrink: 0;
}
/* 両サイドに線（ギャラリーヘッダー用） */
.tp-label--flanked {
  justify-content: center;
}
.tp-label--flanked::after {
  content: "";
  width: 36px; height: 1px;
  background: #BFA48E;
  display: inline-block;
  flex-shrink: 0;
}

/* --------------------------------------------------------
   共通：セクションタイトル（大EN + 小JP）
-------------------------------------------------------- */
.tp-section-title {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 2.6vw, 3.2rem);
  letter-spacing: 0.18em;
  margin: 0;
  line-height: 1.5;
}
.tp-section-title__en {
  position: relative;       /* 背面のひし形あしらいの位置基準（geometryは見出し中央） */
  display: flex;            /* 両端の横線を天地中央に揃えるため */
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: clamp(4rem, 5.8vw, 7.6rem);
  color: #BFA48E;
  letter-spacing: 0.06em;
  line-height: 1em;
  font-weight: 400;
  margin-bottom: 6px;
}
/* セクションタイトル英字の行高を1emに統一（TOPのACCESS見出し）。
   ※RESERVE(.tp-cta-strip)は全ページ共通パーツのため site.css 側で指定 */
.tp-access__heading {
  line-height: 1em;
}
.tp-section-title--center {
  text-align: center;
}
/* セクションをスタッキングコンテキスト化し、見出し背面のひし形(z-index:-1)を
   セクション内コンテンツの下・背景の前に収める（コンテンツが隠れないように） */
.tp-news,
.tp-gallery {
  position: relative;
  isolation: isolate;
  overflow: hidden;   /* 大きいひし形をセクション内でクリップしページからはみ出させない */
}

/* --------------------------------------------------------
   共通：ゴールドボタン modifier（btn-pill--gold）
   デザイン準拠: ボーダー #BFA48E、ホバーで金塗りつぶし
-------------------------------------------------------- */
.btn-pill--gold {
  border-color: #BFA48E;
  color: #8e7660;
  background: #fff;
  background-image: none;
}
.btn-pill--gold .bc-cta-en {
  color: #BFA48E;
}
.btn-pill--gold::after {
  background: #BFA48E;
}
.btn-pill--gold:hover {
  background: #BFA48E;
  color: #fff;
  border-color: #BFA48E;
  opacity: 1;
}
.btn-pill--gold:hover .bc-cta-en {
  color: #fff;
}
.btn-pill--gold:hover::after {
  background: #fff;
}

/* --------------------------------------------------------
   02-pre 3カラム正方形画像
-------------------------------------------------------- */
/* アニメーション定義 */
@keyframes trioFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes trioSlideLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes trioSlideRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}

.tp-trio-imgs {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(8px, 1vw, 16px);
  padding: 0;
  background: linear-gradient(to bottom, #fff 50%, #F6F1EB 50%);
}

/* 初期状態：非表示 */
.tp-trio-imgs__item {
  width: 45%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin: 0;
  opacity: 0;
}

.tp-trio-imgs__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s ease;
}

/* 右側の写真だけ下げる */
.tp-trio-imgs__item:nth-child(2) {
  margin-top: 90px;
}

.tp-trio-imgs__item:hover img {
  transform: scale(1.04);
}

/* アニメーション発火クラス（JSで付与） */
/* ①左：左からスライドフェードイン */
.tp-trio-imgs.is-visible .tp-trio-imgs__item:nth-child(1) {
  animation: trioSlideLeft 0.9s ease forwards;
  animation-delay: 0s;
}
/* ②右：右からスライドフェードイン */
.tp-trio-imgs.is-visible .tp-trio-imgs__item:nth-child(2) {
  animation: trioSlideRight 0.9s ease forwards;
  animation-delay: 0.35s;
}

@media (max-width: 639px) {
  /* SPもPC同様に横2枚並び＋上下2色背景（背景・横並びは基本ルールを継承） */
  .tp-trio-imgs {
    padding: 0;
  }
  /* 右の段差はSPでは30pxに */
  .tp-trio-imgs__item:nth-child(2) {
    margin-top: 30px;
  }
}

/* --------------------------------------------------------
   02 ごあいさつ（Intro）
-------------------------------------------------------- */
.tp-intro__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.tp-intro__lead-en {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: clamp(4.8rem, 6vw, 8.6rem);
  line-height: 1.05;
  color: #BFA48E;
  letter-spacing: 0.01em;
  margin: 14px 0 28px;
}
.tp-intro__catch {
  font-size: clamp(2rem, 2vw, 2.6rem);
  font-weight: 300;
  letter-spacing: 0.14em;
  line-height: 1.8;
  margin-bottom: 32px;
  color: #2b2522;
}
.tp-intro__media {
  position: relative;
}
.tp-intro__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.tp-frame-num {
  position: absolute;
  top: -42px; left: -28px;
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  color: #BFA48E;
  line-height: 1;
}
.tp-frame-num em {
  font-size: 10rem;
  line-height: 1;
  display: block;
  color: #F6F1EB;
  -webkit-text-stroke: 1px #BFA48E;
  font-style: normal;
  margin-bottom: 4px;
}

/* --------------------------------------------------------
   03 Three Promises（Pillars）
-------------------------------------------------------- */
.tp-pillars__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 70px;
}
.tp-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 56px);
}
.tp-pillar {
  display: flex;
  flex-direction: column;
}
.tp-pillar__img {
  aspect-ratio: 3 / 4;
  margin-bottom: 24px;
  overflow: hidden;
}
.tp-pillar__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s ease;
}
.tp-pillar:hover .tp-pillar__img img { transform: scale(1.04); }
.tp-pillar__num {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: #BFA48E;
  margin-bottom: 8px;
}
.tp-pillar__title {
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  line-height: 1.7;
  margin-bottom: 14px;
  color: #2b2522;
}
.tp-pillar__title em {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: 2.6rem;
  letter-spacing: 0.02em;
  color: #8e7660;
  margin-bottom: 4px;
  line-height: 1.2;
}
.tp-pillar__desc {
  font-size: 1.3rem;
  line-height: 1.95;
  color: #6b5e54;
}

/* --------------------------------------------------------
   04 Editorial（The Secret Hideaway）
-------------------------------------------------------- */
.tp-editorial__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px, 4vw, 80px);
  align-items: stretch;
}
.tp-editorial__img {
  position: relative;
}
.tp-editorial__img img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 5 / 4;
  display: block;
}
.tp-editorial__img figcaption {
  position: absolute; bottom: 16px; left: 16px;
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  background: rgba(28,24,21,.6);
  color: #fff;
  padding: 6px 14px;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
}
.tp-editorial__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tp-editorial__body h2 {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(3.6rem, 4.6vw, 6.4rem);
  line-height: 1.1;
  color: #8e7660;
  margin: 18px 0 26px;
}
.tp-editorial__body p {
  color: #6b5e54;
  font-size: 1.4rem;
  line-height: 2.1;
  margin-bottom: 18px;
}
.tp-editorial__btn {
  margin-top: 24px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 30px;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
}
.tp-editorial__btn .bc-cta-en {
  color: #8e7660;
}
.tp-editorial__btn::after {
  content: "";
  width: 22px;
  height: 1px;
  background: #2b2522;
  flex-shrink: 0;
  transition: width .3s ease;
}
.tp-editorial__btn:hover::after {
  background: #fff;
  width: 36px;
}
.tp-editorial__btn:hover .bc-cta-en {
  color: #BFA48E;
}

/* --------------------------------------------------------
   Access
-------------------------------------------------------- */
.tp-access__grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
/* グリッド項目は既定で min-width:auto(=min-content) のためトラックを無視してはみ出す。
   min-width:0 でトラック幅に収め、SP横スクロール（はみ出し）を防ぐ */
.tp-access__grid > * {
  min-width: 0;
}

.tp-access__heading {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(4rem, 6vw, 8rem);
  letter-spacing: 0.06em;
  color: #2b2522;
  line-height: 1;
  margin: 0 0 32px;
}

/* ACCESS見出しを2カラムの上でセンター配置
   （.tp-access__heading は inline-flex のため flex+center で中央寄せ） */
.tp-access__heading--center {
  display: flex;
  justify-content: center;
  margin: 0 0 clamp(32px, 4vw, 56px);
}

.tp-access__name {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  color: #8a7a6e;
  margin: 0 0 28px;
}

.tp-access__dl {
  display: grid;
  /* minmax(0,1fr) で dd トラックが min-content 未満に縮める＝長いメール/URLでも横はみ出ししない */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 24px;
  margin: 0 0 40px;
}

.tp-access__dl dt {
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: 1.3rem;
  color: #BFA48E;
  letter-spacing: 0.14em;
  white-space: nowrap;
  padding-top: 2px;
}

.tp-access__dl dd {
  font-size: 1.4rem;
  color: #6b5e54;
  line-height: 1.8;
  letter-spacing: 0.08em;
  margin: 0;
  min-width: 0;              /* グリッドトラック内で縮めるため */
  overflow-wrap: anywhere;   /* 長いメール/URLを折り返してはみ出し防止 */
}

.tp-access__dl dd a {
  color: #6b5e54;
  text-decoration: none;
}

.tp-access__dl dd a:hover {
  color: #BFA48E;
}

.tp-access__map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  background: #6b5e54;
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: 1.4rem;
  letter-spacing: 0.22em;
  text-decoration: none;
  border-radius: 40px;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.tp-access__map-btn:hover {
  background: #BFA48E;
  opacity: 1;
}

.tp-access__map {
  height: 420px;
  overflow: hidden;
}

.tp-access__map iframe {
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(100%);
}

@media (max-width: 767px) {
  .tp-access__grid {
    grid-template-columns: 1fr;
  }
  .tp-access__map {
    height: 280px;
  }
}

/* --------------------------------------------------------
   05 Gallery（ネイルデザイン）
-------------------------------------------------------- */
.tp-gallery__header {
  text-align: center;
  margin-bottom: 64px;
}
/* PC/SPとも横3列・正方形のグリッドに統一 */
.tp-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-width: 720px;
  margin: 0 auto;
}
.tp-gallery__grid figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;        /* ライトボックスで拡大できることを示す */
}
.tp-gallery__grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
  display: block;
}
.tp-gallery__grid figure:hover img { transform: scale(1.06); }

/* --------------------------------------------------------
   Movie Coming Soon ティザー（ACCESS上・動画公開予告）
   ぼかした画像＋上品な英字フレーズ。将来の動画枠を予約する見せ方
-------------------------------------------------------- */
.tp-movie-teaser {
  padding-bottom: 0;   /* 動画セクション下の余白は詰める */
}
.tp-movie-teaser__frame {
  position: relative;
  width: 980px;
  max-width: 100%;
  aspect-ratio: 980 / 455;
  margin: 0 auto;
  overflow: hidden;   /* ぼかし画像の端の透けを隠す */
}
.tp-movie-teaser__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(7px);
  transform: scale(1.08);   /* ぼかしで生じる端の余白をカバー */
}
/* 温かみのあるブラウンを薄く重ね、画像を静かに沈めて文字を上品に立てる */
.tp-movie-teaser__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  color: #F6F1EB;
  background: rgba(43, 37, 34, 0.30);
}
/* CSS描画の再生アイコン（円＋三角）。FA非依存で線を細く上品に */
.tp-movie-teaser__icon {
  width: 62px;
  height: 62px;
  border: 1px solid rgba(246, 241, 235, 0.85);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.tp-movie-teaser__icon::before {
  content: "";
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #F6F1EB;
  margin-left: 3px;   /* 三角の光学的中心を調整 */
}
.tp-movie-teaser__label {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.3rem, 1.7vw, 1.7rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;   /* レタースペース分の右寄りを中央に補正 */
  text-transform: uppercase;
  opacity: 0.92;
}
.tp-movie-teaser__en {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 3.4vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1em;
}
@media (max-width: 639px) {
  .tp-movie-teaser__frame { aspect-ratio: 16 / 10; }   /* SPは縦幅をやや広げる */
  .tp-movie-teaser__media { filter: blur(5px); }
  .tp-movie-teaser__overlay { gap: 3px; }
  .tp-movie-teaser__icon { width: 52px; height: 52px; margin-bottom: 18px; }
  .tp-movie-teaser__label,
  .tp-movie-teaser__en { line-height: 1em; }
}

/* --------------------------------------------------------
   ギャラリー ライトボックス
-------------------------------------------------------- */
.tp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 16, 14, 0.92);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.tp-lightbox.is-open { display: flex; }
.tp-lightbox__img {
  max-width: 90vw;
  max-height: 86vh;
  object-fit: contain;
  box-shadow: 0 12px 50px rgba(0, 0, 0, 0.5);
}
.tp-lightbox__close,
.tp-lightbox__nav {
  position: absolute;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  opacity: 0.85;
  transition: opacity 0.2s ease;
  padding: 10px;
}
.tp-lightbox__close:hover,
.tp-lightbox__nav:hover { opacity: 1; }
.tp-lightbox__close { top: 16px; right: 20px; font-size: 40px; }
.tp-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 38px; }
.tp-lightbox__prev { left: 12px; }
.tp-lightbox__next { right: 12px; }
/* ライトボックス表示中は背景スクロールを止める */
html.lb-open, body.lb-open { overflow: hidden; }

@media (max-width: 639px) {
  .tp-lightbox__close { font-size: 34px; top: 10px; right: 12px; }
  .tp-lightbox__nav { font-size: 30px; }
}
.tp-gallery__btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 30px;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
}
.tp-gallery__btn::after {
  content: "";
  width: 22px;
  height: 1px;
  flex-shrink: 0;
  transition: width .3s ease;
}
.tp-gallery__btn:hover::after { width: 36px; }

/* --------------------------------------------------------
   06 Voice（お客様の声）
-------------------------------------------------------- */
.tp-voice__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.tp-voice__rating {
  font-size: 1.3rem;
  color: #6b5e54;
  line-height: 2;
  margin: 24px 0 28px;
}
.tp-voice__rating strong {
  color: #8e7660;
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  font-size: 2.2rem;
  font-weight: 400;
}
.tp-voice-card {
  background: #fff;
  border: 1px solid #e6ddd2;
  padding: 36px;
  position: relative;
  font-size: 1.3rem;
  line-height: 1.95;
  color: #6b5e54;
}
.tp-voice-card + .tp-voice-card { margin-top: 18px; }
.tp-voice-card::before {
  content: "\201C";
  position: absolute; top: 6px; left: 18px;
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  color: #BFA48E;
  font-size: 6.4rem;
  line-height: 1;
}
.tp-voice-card__name {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  color: #8e7660;
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid #e6ddd2;
}
.tp-voice-card__name::before {
  content: "★★★★★";
  color: #BFA48E;
  letter-spacing: 0;
}
.tp-voice__btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 30px;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  margin-top: 28px;
}
.tp-voice__btn .bc-cta-en { color: #8e7660; }
.tp-voice__btn::after {
  content: "";
  width: 22px;
  height: 1px;
  background: #2b2522;
  flex-shrink: 0;
  transition: width .3s ease;
}
.tp-voice__btn:hover::after { background: #fff; width: 36px; }
.tp-voice__btn:hover .bc-cta-en { color: #BFA48E; }

/* --------------------------------------------------------
   07 News（最新情報）
-------------------------------------------------------- */
.tp-news__grid {
  display: grid;
  grid-template-columns: 1fr 2.2fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.tp-news__btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 30px;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  margin-top: 32px;
}
.tp-news__btn::after {
  content: "";
  width: 22px;
  height: 1px;
  flex-shrink: 0;
  transition: width .3s ease;
}
.tp-news__btn:hover::after { width: 36px; }

/* --------------------------------------------------------
   08 Quick Info（サロン情報）
-------------------------------------------------------- */
.tp-quick-info__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.tp-quick-info__body {
  display: flex;
  flex-direction: column;
}
.tp-info-dl {
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: 110px 1fr;
  font-size: 1.3rem;
  line-height: 2;
}
.tp-info-dl dt {
  color: #8e7660;
  font-family: "Cormorant Garamond", serif;
  font-style: normal;
  padding: 12px 0;
  border-top: 1px solid #e6ddd2;
  letter-spacing: 0.06em;
}
.tp-info-dl dd {
  margin: 0;
  padding: 12px 0;
  border-top: 1px solid #e6ddd2;
  color: #6b5e54;
}
.tp-info-dl > *:nth-last-child(-n+2) {
  border-bottom: 1px solid #e6ddd2;
}
.tp-quick-info__btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 18px 30px;
  font-size: 1.2rem;
  letter-spacing: 0.22em;
  margin-top: 32px;
  align-self: flex-start;
}
.tp-quick-info__btn .bc-cta-en { color: #8e7660; }
.tp-quick-info__btn::after {
  content: "";
  width: 22px;
  height: 1px;
  background: #2b2522;
  flex-shrink: 0;
  transition: width .3s ease;
}
.tp-quick-info__btn:hover::after { background: #fff; width: 36px; }
.tp-quick-info__btn:hover .bc-cta-en { color: #BFA48E; }

/* --------------------------------------------------------
   09 CTA Strip（.tp-cta-strip）
   ※ 全ページ共通パーツ化に伴い、CSSは site.css へ移設しました。
      マークアップは includes/contact-cta.php を参照。
-------------------------------------------------------- */

/* --------------------------------------------------------
   Responsive
-------------------------------------------------------- */
@media (max-width: 900px) {
  /* Intro */
  .tp-intro__grid {
    grid-template-columns: 1fr;
  }
  .tp-intro__media { order: -1; }
  .tp-frame-num { display: none; }

  /* Pillars */
  .tp-pillars__header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
  }
  .tp-pillars__grid { grid-template-columns: 1fr; }
  .tp-pillar__img {
    width: 255px;
    height: 255px;
    aspect-ratio: unset;
    margin-left: auto;
    margin-right: auto;
  }

  /* Editorial */
  .tp-editorial__grid { grid-template-columns: 1fr; }

  /* Gallery */
  .tp-gallery__grid { flex-wrap: wrap; }

  /* Voice */
  .tp-voice__grid { grid-template-columns: 1fr; }

  /* News */
  .tp-news__grid { grid-template-columns: 1fr; }
  .tp-news__btn { margin-top: 20px; }
}

@media (max-width: 639px) {
  /* ギャラリーは基本ルールの3列正方形を維持（旧: 1カラム16:9は廃止） */
  .tp-intro__lead-en { font-size: 4rem; }
}

/* ========================================================
   依頼672840 追加調整
   ======================================================== */

/* メインスライダーのロゴを囲む四角線をもう少し太く（1px → 2px） */
.mv-logo-frame {
  border-width: 2px;
}

/* トップのマップの色を戻す（グレースケール解除） */
.tp-access__map iframe {
  filter: none;
}

/* ロゴ・タイトルのサイズ調整（参考サイト基準：ヘッダー下61px / MV38px） */
.bc-hero-logo__main { font-size: 61px; }
.mv-logo-main { font-size: 38px; }

/* SPトップ：ヒーローロゴ「BABY CROSS」を40pxにして1行に収める（依頼674176） */
@media (max-width: 600px) {
  .bc-hero-logo__main { font-size: 40px; white-space: nowrap; }
}

/* ロゴ・タイトルを一般的なイタリック（斜体）に */
.bc-hero-logo__main,
.bc-hero-logo__sub,
.mv-logo-main,
.mv-logo-sub,
.mv-tagline__logo,
.mv-tagline__sub {
  font-style: normal;
}

/* ロゴ・タイトルの色味を「nailsallon」と同色（#8a7a6e）に
   ※ヘッダー下の白背景エリアのロゴのみ。MV写真上のロゴは下で白に指定 */
.bc-hero-logo__main {
  color: #8a7a6e;
}

/* FV（MV）写真の上に乗るロゴ文字は白 */
.mv-logo-main,
.mv-logo-sub {
  color: #fff;
}

/* ギャラリーはPC/SPとも基本ルールの3列正方形で統一（旧スマホ2カラム指定は廃止） */

/* ========================================================
   お知らせ（ブログCMS）カードリスト（依頼672840）
   ======================================================== */
.tp-news__head {
  text-align: center;
  margin-bottom: 48px;
}
.tp-news-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.tp-news-card {
  background: transparent;
}
.tp-news-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.tp-news-card__link:hover {
  opacity: 1;
}
.tp-news-card__thumb {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #efe9e1;
}
.tp-news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}
.tp-news-card__link:hover .tp-news-card__thumb img {
  transform: scale(1.05);
}
.tp-news-card__body {
  padding: 18px 4px 0;
}
.tp-news-card__date {
  font-family: "EB Garamond", serif;
  font-style: normal;
  font-size: 1.2rem;
  color: #BFA48E;
  letter-spacing: 0.1em;
  margin: 0 0 8px;
}
.tp-news-card__title {
  font-size: 1.6rem;
  font-weight: 500;
  color: #2b2522;
  line-height: 1.6;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
}
.tp-news-card__excerpt {
  font-size: 1.3rem;
  color: #6b5e54;
  line-height: 1.9;
  margin: 0;
}
@media (max-width: 900px) {
  .tp-news-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 639px) {
  .tp-news-list { grid-template-columns: 1fr; gap: 20px; }
  /* SP：左サムネ＋右テキストの横並びにして縦を短縮 */
  .tp-news-card__link {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 16px;
    align-items: center;
  }
  .tp-news-card__body {
    padding: 0;
  }
  .tp-news-card__date {
    margin: 0 0 4px;
  }
  .tp-news-card__title {
    /* 大きさ・色をACCESS本文（.tp-access__dl dd）に合わせて他と統一 */
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: #6b5e54;
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin: 0 0 4px;
    /* タイトルは最大2行で省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* SPでは本文抜粋は非表示 */
  .tp-news-card__excerpt {
    display: none;
  }
}

/* 大写真セクションの背景を白に＋上部に50px余白（依頼672840） */
.tp-full-photo {
  background: #fff;
  padding-top: 120px;   /* .section の上padding に合わせる（SPは下で60px） */
}
@media (max-width: 896px) {
  .tp-full-photo { padding-top: 60px; }   /* .section のSP上padding に合わせる */
}

/* BABY CROSS ロゴ（斜体・傾きなしの直立） */
.bc-hero-logo__main,
.mv-logo-main {
  display: inline-block;
}

/* スマホ時：セクション見出しを 20px に縮小（site.css より後に読み込まれるため当ファイルで上書き） */
@media (max-width: 639px) {
  .tp-section-title {
    font-size: 20px;
  }
}