@charset "utf-8";

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

/*以上がリセットCSS*/


/* ───────── COMMON ───────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  min-height: 100%;
  color: #fff;
  background: #34343d;                /* 画面背景色 */
  line-height: 1.6;
  font-family: "Times New Roman", serif;
  overflow-x:hidden; 
}
a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* ───────── GLOBAL NAVIGATION ───────── */
/* ─────────────────────────────────────────
   1) 基本レイアウトを grid に変更（ロゴ | メニュー | SNS）
   2) gap / フォント / アイコンを clamp で可変
   ───────────────────────────────────────── */
.global-nav {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 95px;
  z-index: 10;
  background: transparent;
  transition: background-color 0.3s ease;
}
.global-nav.fixed-top {
  position: fixed;
  top: 0;
  bottom: auto;
  background: rgba(30,30,30,0.4);
}

/* ★ grid化：auto | 1fr | auto で中央だけ伸縮可能に */
.nav__container{
  width: 95%;                     /* 中央寄せと最大幅の上限 */
  height: 100%;
  margin: 0 auto;
  padding: 0 clamp(12px, 0.2vw, 20px);
  display: grid;
  grid-template-columns: auto 1fr auto;        /* 左:ロゴ / 中:メニュー / 右:SNS */
  align-items: center;
  column-gap: clamp(8px, 1.4vw, 24px);
}

/* ロゴサイズも可変で少しだけ縮む余地 */
.nav__logo{
  display: flex;
  align-items: center;
  height: 100%;
}
.nav__logo img{
  height: clamp(32px, 2.6vw, 40px);            /* 40px→タブレットで〜32pxまで縮む */
}

/* メニューは中央で “縮んで耐える” 役 */
.nav__menu{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 5vw, 90px);               /* px固定→clampへ（超ワイドで広がりすぎ防止） */
  font-size: clamp(14px, 1.15vw, 18px);        /* 可読性維持しつつ可変 */
  letter-spacing: 0.08em;
  flex-wrap: nowrap;
  min-width: 0;                                /* ← 中央カラムをちゃんと縮められるキー */
}
.nav__menu li{ position: relative; }
.nav__menu a:hover{ color:#7d7d7d; }

/* SNSは右端・可変アイコンで圧縮余地を確保 */
.nav__sns{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vw, 45px);
  height: 100%;
  margin-top: 0;                                /* 押し出しの原因になる上下余白は抑える */
}
.nav__sns img{
  height: clamp(16px, 1.6vw, 20px);            /* アイコンも少しだけ縮む */
}

/* アンダーラインはそのまま（必要なら幅もclampで可変に可） */
.nav__underline{
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: calc(100% - 5%);                       /* ＝左右2.5%パディング相当 */
  max-width: min(1400px, 95%);
  height: 1px;
  background: #ffffff;
  transform: translateX(-50%);
}
.global-nav.fixed-top .nav__underline{ display:none; }

/* ▼▼ ギャラリー矢印／ドロップダウン（既存のまま） ▼▼ */
.nav__gallery > a{ display:inline-flex; align-items:center; }
.nav__gallery > a::after{
  content:'';
  display:inline-block;
  margin-left:6px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:4px solid currentColor;
  transition:transform .4s;
}
.nav__gallery:hover > a::after{ transform: rotate(180deg); }
.global-nav.fixed-top .nav__gallery > a::after{ transform: rotate(180deg); }
.global-nav.fixed-top .nav__gallery:hover > a::after{ transform: rotate(0deg); }

.global-nav:not(.fixed-top) .nav__dropdown{
  bottom: calc(100% + 10px);
  top:auto;
  width:auto;                                   /* typoの s を修正 */
}
.global-nav.fixed-top .nav__dropdown{
  top: calc(100% + 10px);
  bottom:auto;
}
.nav__dropdown{
  position:absolute;
  top: calc(100% + 10px);
  left:50%;
  transform: translateX(-50%);
  display:none;
  flex-direction:column;
  gap:10px;
  padding:0 10px;
  background: rgba(30,30,30,0.4);
  border-radius:1px;
  font-size: clamp(14px, 1.1vw, 18px);          /* ドロップも可変 */
  white-space: nowrap;
}
.nav__dropdown.open{ display:flex; }
.nav__dropdown a{
  position:relative;
  display:block;
  padding:10px 0;
  text-align:center;
  z-index:1;
  color:#fff;
}
.nav__dropdown a::before{
  content:"";
  position:absolute; inset:0 -10px;
  background:#606074;
  opacity:0; transition:opacity .15s ease;
  border-radius:1px; z-index:-1;
}
.nav__dropdown a:hover::before{ opacity:1; }
.nav__dropdown a:hover{ background:#606074; color:#fff; }

/* ─────────────────────────────────────────
   1280px〜769px：タブレット帯 “押し出し防止コンパクト”
   - gap さらに圧縮
   - フォント小さめ
   - アイコン縮小 & 余白圧縮
   ───────────────────────────────────────── */
@media (max-width:1280px) and (min-width:769px){
  .global-nav{ height: 88px; }                  /* 少し低くして行間圧縮 */

  .nav__menu{
    gap: clamp(10px, 5vw, 70px);              /* さらに詰める */
    font-size: clamp(13px, 1.3vw, 24px);       /* ほんの少し小さく */
    letter-spacing: 0.06em;
  }

  .nav__logo img{ height: clamp(30px, 3.2vw, 36px); }
  .nav__sns{ gap: clamp(8px, 2.4vw, 38px); }
  .nav__sns img{ height: clamp(14px, 1.6vw, 22px); }
}

/* ─────────────────────────────────────────
   1024px〜769px：さらにタイト（2段折り回避の最後の一押し）
   ───────────────────────────────────────── */
@media (max-width:1024px) and (min-width:769px){
  .nav__menu{
    gap: clamp(8px, 3.8vw, 40px);
    font-size: clamp(12px, 1.6vw, 18px);
  }
  .nav__container{
    column-gap: clamp(6px, 1vw, 16px);
    padding: 0 clamp(10px, 1.6vw, 16px);
  }
}

/* ─────────────────────────────────────────
   “最終保険”：
   もし上でも押し出すなら、SNSだけもう一段縮める
   ───────────────────────────────────────── */
@media (max-width:980px) and (min-width:769px){
  .nav__sns img{ height: 16px; }
  .nav__sns{ gap: 22px; }
}


/* ───────── Footer ───────── */
/* もとの footer 定義 */
.site-footer{
  position:relative;
  width:100%;
  height:48vh;
  background:#34343d;
  color:#fff;
  /* overflow:hidden; ← これが原因で影が切れる */
  overflow: visible;
  z-index: 5;              /* 本文より手前に置きたいなら調整 */

   /* ↓―― ここがポイント ――↓ */
  filter: drop-shadow(0 -5px 10px rgba(0,0,0,.45));
  /*     └─↑   ↑   ↑
          X   Y   Blur   color   */
}


.footer__inner{
  width:100%;
  height:100%;
  margin:0 0;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:40px 0;
  box-sizing:border-box;
   
}


.footer__middle {
  /* this middle block sits in the middle and will shrink to fit its contents */
  display: flex;
  flex-direction: column;
  gap: 40px;                         /* or use margin-bottom on nav/ margin-top on legal */
  margin-top: 60px;
}

/* ── ① 上段 ── */
.footer__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-left: 6%;
  margin-right: 6%;
  margin-bottom: 60px;
}

/* 左ブランド塊 */
.footer__branding{
  display:flex;
  align-items:flex-start;
  gap:30px;
  align-items: center;
  padding-left: 0;
  padding-top: 2%;
}
.footer__logo-right{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap: 10px;
    margin-top: 5px;
}
.footer__logo{
  height:12vh;
  width: auto;
}
.footer__logotype{
  height:2vh;
}
.footer__catch{
  margin:0;
  font-family:"Hiragino Mincho ProN",serif;
  font-weight:300;
  font-size:1.4vw;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}



/* ── ② 仕切り線 ── */
.footer__divider{
  display:block;
  width:95%;
  height:1px;
  background:#fff;
  margin:0 auto;
}

/* ---------- Footer Nav ---------- */
.footer__nav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 6%;
}

.footer__menu,
.footer__dropdown { list-style: none; margin: 0; padding: 0; }

.footer__menu {
  display: flex;
  gap: 80px;
  font: 1vw/1 "Times New Roman", serif;
  letter-spacing: .08em;
}
.footer__menu a:hover { color: #7d7d7d; }

/* 基点 */
.footer__gallery { position: relative; }

/* ───────── Footer Dropdown (Global Nav と同じパターン) ───────── */
/* ───────── Footer Dropdown ───────── */
.footer__gallery {
  position: relative;
}

.footer__gallery .footer__dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 10px;
  background: rgba(131, 131, 131, 0.3);
  border-radius: 2px;
  z-index: 9999;
  color: #fff;
}



/* 矢印 ▲/▼ */
.footer__gallery .footer__gallery-head {
  display: inline-flex;
  align-items: center;
}
.footer__gallery .footer__gallery-head::after {
 content: '';
  display: inline-block;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.4s ease;
  transform-origin: center; /* 中心回転を保証 */
  transform: rotate(0deg);  /* 初期：上向き */
}
/* ホバー OR .open で矢印 ▼ */
.footer__gallery:hover  .footer__gallery-head::after,
.footer__gallery.open   .footer__gallery-head::after {
  transform: rotate(180deg);
}


/* open クラスで展開 */
/* ホバー OR .open でドロップダウン表示 */

.footer__gallery.open   .footer__dropdown {
  display: flex;
}

.footer__gallery:hover > .footer__dropdown {
  display: flex;
}



/* --- SNS --- */
.footer__sns{display:flex;gap:50px;}
.footer__sns img{height:20px;}

/* --- Legal Row (少し上げる・クリックは有効) --- */
.footer__legal-row{
  display:flex;align-items:center;gap:60px;
  font-size:.9vw;flex-wrap:wrap;
  margin:10px 6% 10px;              /* 上方向 10px だけ詰める */
}

.footer__legal-link:hover{color:#cba135;}

/* =========================================================
   FOOTER ≥768px：項目間の間隔とclampでのサイズ調整のみ（配置は不変）
   ========================================================= */
@media (min-width: 768px){

  /* ── 上段ロゴ群：サイズだけ可変（配置はそのまま） ── */
  .footer__branding{
    gap: clamp(10px, 1.2vw, 24px) !important;
  }
  .footer__logo{
    height: clamp(44px, 7.6vh, 80px) !important;
    width: auto !important;
  }
  .footer__logotype{
    height: clamp(14px, 1.8vh, 24px) !important;
    width: auto !important;
  }
  .footer__catch{
    font-size: clamp(16px, 1vw, 28px) !important;
    letter-spacing: .08em !important;
  }

  /* ── メニュー：gapとフォントのみ上書き ── */
  .footer__menu{
    /* 既存の `font: 1vw/1 ...` を確実に上書き */
    font: normal clamp(16px, 1.1vw, 20px)/1 "Times New Roman", serif !important;
    letter-spacing: .06em !important;
    gap: clamp(15px, 4.2vw, 70px) !important;  /* 目安10px前後 */
    white-space: nowrap !important;           /* まずは1行死守 */
  }

  /* ── SNS：gapとアイコンサイズのみ上書き（はみ出し防止） ── */
  .footer__sns{
    gap: clamp(12px, 5.2vw, 55px) !important;  /* 目安10px前後 */
    white-space: nowrap !important;
  }
  .footer__sns img{
    height: clamp(14px, 1.6vw, 22px) !important; /* 幅不足時は縮む */
    width: auto !important;
  }

  /* ── legal-row：行の崩れを抑えるため数値だけ調整 ── */
  .footer__legal-row{
    flex-wrap: wrap !important;                            /* 必要なら2段OK */
    gap: clamp(14px, 4.6vw, 50px) !important;              /* 目安10px前後 */
    font-size: clamp(12px, 1.1vw, 14px) !important;
    row-gap: 6px !important;                               /* 2段時の行間を詰める */
  }
  .footer__copyright,
  .footer__legal-link{
    white-space: nowrap !important;                        /* 文言は折り返さない */
  }
}

/* ── タブレット帯で“さらにタイト”にする最終保険（配置は不変） ── */
@media (min-width: 768px) and (max-width: 1100px){
  .footer__menu{
    font-size: clamp(11px, 2vw, 14px) !important;
    gap: clamp(12px, 4vw, 30px) !important;
  }
  .footer__sns{
    gap: clamp(6px, 3vw, 22px) !important;
  }
  .footer__sns img{
    height: 18px !important;
  }
}



/* =========================================================
   Footer  ──  Mobile layout (≤768px)
   ========================================================= */
@media (max-width: 768px){


  /* ── パーツの並び順を明示 ─────────────────── */
  .footer__top        { order: 0; }   /* Branding */
  .footer__menu       { order: 1; }   /* メニュー */
  .footer__divider    { order: 2; }   /* 白線 ←★メニューの直後 */
  .footer__sns        { order: 3; }   /* SNS アイコン列 */
  .footer__legal-row  { order: 4; }   /* Legal ＆ Copyright */


  /* 全体を縦積みにして高さ自動化 */
  .site-footer{
    height: auto;
    padding: 40px 0 20px;      /* 上 40px / 下 20px */
  }
  .footer__inner{ padding: 0 5vw; }        /* 左右 5vw */

  /* ── ① Branding ─────────────────────────── */
  .footer__top{
    flex-direction: column;
    align-items: flex-start;                         /* 左寄せ */
    margin: 0 0 32px;
  }
  .footer__branding{ gap: 20px; margin-top: 15px;margin-left: 15px;}
  .footer__logo{     width: 55px;  height: auto; }
  .footer__logotype{ height: 15px; width: auto; }
  .footer__catch{    font-size: 14px; letter-spacing: 0.14em;}
  .footer__logo-right{margin-top: 5px;}

 .footer__nav-row{
    flex-direction: column;              /* ← 横並び→縦並び */
    align-items: flex-start;
    gap: 35px;
    margin: 0;                           /* Branding と左揃え */
  }

  /* ── ② メニュー ─────────────────────────── */
  .footer__menu{
 display: flex;
    flex-direction: column;
    gap: 30px;
    font: 16px/1 "Times New Roman", serif;
    padding: 0;
    margin: 0;
    margin-left: 25px;
    margin-bottom: 20px;
  }
  .footer__menu a{ display: block; }

 /* ── ②-1  GALLERY タップ展開 ────────────────── */
  .footer__gallery .footer__dropdown{
    position: static;          /* ボタン直下に */
    display: none;             /* 初期閉じ */
    flex-direction: column;
    gap: 12px;
  
    background: none;
     align-items: flex-start;   /* 左寄せで並べる          */
    padding-left: 0;          /* 余分なインデントを削除   */
    margin-left: 50px;           /* 〃                      */
    margin-top: 20px;
    gap: 20px;                /* メニューと同じ行間 (=20) */
  }
  .footer__gallery.open .footer__dropdown{ display: flex; }

  /* 矢印アイコン少し小さく */
  .footer__gallery .footer__gallery-head::after{
    border-left-width: 3px;
    border-right-width: 3px;
    border-top-width: 5px;
  }


  /* ── ③ 区切り線 ─────────────────────────── */
 .footer__divider{ display: none; }

/* ── ④ SNS アイコン列 ─────────────────────── */
  .footer__sns{
    order: 2;                              /* メニューの次 */
    display: flex;
    gap: 50px;
justify-content: center;
    margin: 0 auto;
    padding-top: 45px;
    border-top: 1px solid #fff;            /* ← 白線はここ */
    width: 90vw;
  }
  .footer__sns img{ height: 22px; width: auto;  }

  /* ── ⑤ Legal リンク + Copyright ────────────── */
  .footer__legal-row{
    order: 3;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
    margin-top: 24px;
  }
  .footer__copyright{
    order: 2;            /* リンク３つの下へ */
    flex-basis: 100%;    /* 折り返して左揃え */
    margin-top: 6px;
  }
  .footer__legal-link{
    margin-right: 5px;
  } 
  
  .footer__gallery .footer__dropdown{ display:none; }
  .footer__gallery.open .footer__dropdown{ display:flex; }
}

 

  /* セクション全体 */
  /* ───────── 1st SECTION ───────── */
.intro-section{
  width:90%;
  height:320vh;                 /* ①導入 100vh ②拡大 100vh ③フル画面保持 100vh+ */
  margin:120px auto;
  position:relative;
}

.photos{
  display:flex;
  justify-content:center;
  gap:15px;
  position:relative;
}

.photos img{object-fit:cover;display:block}

/* 左 / 右の静的画像 */
.photo-left {width:21vw;
  height:25vh;
  align-self:flex-start;
  object-fit: cover;
  object-position: center;
  transform: translateX(-20px);

}
.photo-right{width:20vw;height:22vh;align-self:flex-end}

/* ─ 下画像用 ─ */
.under-photo-wrapper {
  width: 50%;
  margin: 30px auto 0;
  display: flex;
  justify-content: flex-start;
}

.photo-under {
  width: 25vw;
  height: auto;
  display: block;
  object-fit: cover;
}



/* ─ Center Wrapper ─ */
.center-wrapper {
  position: absolute;
  width: 45vw;
  height: 50vh;
  transform-origin: top center;
  will-change: transform;
  z-index: 5;
  left: 50%;
  transform: translateX(-50%) scale(1);
}


/* ピン留め用 */
.center-wrapper.fixed{
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%) scale(1);
  z-index:5;
}

.photo-center{width:100%;height:100%;object-fit:cover}

/* ─ Text ─ */
.intro-text{
  position:absolute;
  top:-40px;right:-13vw;
  font-size:28px;line-height:1.4;
  letter-spacing:.14em;font-weight:300;
  white-space:pre-line;
  pointer-events:none;
  transition:opacity .25s ease-out,transform .25s ease-out;
  will-change:opacity,transform;
}

/* 拡大中に中央へ再配置してフェイドインさせる */
.intro-text.recenter{
  top:25%;left:75%;right:auto;
  transform:translate(-50%,-50%);
  text-align:center;
  font-size: 0.8vw;
  letter-spacing: 0.2em;
  line-height: 1.5;
  text-align: left;
}

/* ─ Scroll Indicator ─ */
#scrollIndicator{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  font-family:'EB Garamond',serif;
  font-size:20px;
  color:#fff;
  pointer-events:none;
  opacity:0;          /* ← 初期は非表示 */
  display:none;       /* ← 初期は非表示 */
  transition:opacity .5s ease;
  
}


/* 矢印（下向き・バウンス） */
.scroll-arrow{
  margin:0px auto 0;
  animation:bounce 1.5s infinite ease-in-out;
  display:block;
}
@keyframes bounce{
  0%,100%{transform:translateY(0);}
  50%     {transform:translateY(6px);}
}

/* 表示／フェードアウト用クラス */
#scrollIndicator.show   {display:block;opacity:1;}
#scrollIndicator.fadeout{opacity:0;}


.scroll-guide {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  display: none;
  transition: opacity 0.5s ease;
}

.scroll-guide.visible {
  display: block;
  opacity: 1;
}


.promises-section {
  background-color: none; /* 適宜変更可 */
  color: #d4c8bb;
  padding: 10px 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.promises-title {
  font-size: 64px;
  font-family: 'eb-garamond', serif;
font-weight: 500;
font-style: normal;
  color: #d4c8bb;
  text-align: center;
  margin-bottom: 60px;
}

.promises-content {
  display: flex;
  justify-content: space-between;
  align-items: stretch; /* ← 高さを揃える */
  width: 100%;
  max-width: 1400px;
  
}

.promises-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 50%;
  margin-top: 10px;
  color: #d4c8bb;
margin-left: 40px; /* ✅ 左側の余白を調整 */
}
.promises-list p {
  display: flex;
 margin: 0; /* ✅ 余白完全除去 */
  align-items: center;
gap: 12px;
letter-spacing: 0.06em;
font-family: 'Hiragino Mincho ProN', serif;
  font-size: 16px;
}

.promises-list .number {
  color: #cba135;
  font-family: 'eb-garamond', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 32px;
  margin-right: 8px;
}

/* === 右画像 === */

.promises-image {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

.promises-image img {
  width: 100%;
  height: 100%;             /* ✅ 親の高さ（= list）にフィット */
  object-fit: cover;
object-position: center calc(100% + 5px);  max-height: 600px;
}


.plan-section {
  padding: 10px 5% 120px;
  background-color: none;
  text-align: center;
  color: #d4c8bb;
  margin-top: 80px;
}

.plan-title {
  font-size: 90px;
  font-family: 'EB Garamond', serif;
  margin-bottom: 60px;
}

.photo-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 60px;
}

.photo-title {
  font-size: 64px;
 font-family: 'eb-garamond', serif;
  font-weight: 400;
  font-style: normal;
  position: relative;
}

.line {
  width: 55px;
  height: 1px;
  background-color: #cba135;
}

.features__buttons {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-bottom: 80px;
}

.features__btn {
  position: relative;
  width: 125px;
  height: 50px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  font-family: "din-1451-lt-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  cursor: pointer;
  text-align: center;
  line-height: 50px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.features__btn::before,
.features__btn::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #fff;
  transition: border-color 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}
.features__btn::before {
  top: 0;
  left: 0;
  border-top: 1px solid;
  border-left: 1px solid;
}
.features__btn::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid;
  border-right: 1px solid;
}
.features__btn.active {
  border: 1px solid #CBA135;
  color: #CBA135;
}
.features__btn.active::before,
.features__btn.active::after {
  opacity: 0;
}
.features__btn:hover {
  border: 1px solid #CBA135;
  color: #CBA135;
}
.features__btn:hover::before,
.features__btn:hover::after {
  border-color: #CBA135;
  opacity: 0;
}

.features__gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px; /* 適宜調整 */
}

.features__content {
  display: none;
}

.features__content.active {
  display: block;
}

.features__image {
  width: 100%;
  max-width: 1000px;
  height: auto;
  object-fit: cover;
}

/* ▼ 追加：Plan セクションのリード文（ヒラギノ明朝 / 中央揃え） */
.plan-lead{
  text-align: center;
  color: #fff;
  font-family: "Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho",serif;
  line-height: 1.9;
  margin: 10px 0 65px; /* タイトル下との間隔はお好みで微調整 */
}
.plan-lead__line1{
  font-size: 24px;      /* 1行目：24px */
  font-weight: 600;     /* w6 相当 */
  letter-spacing: 0.1em;
}
.plan-lead__line2{
  font-size: 18px;      /* 2行目：18px */
  font-weight: 300;     /* w3 相当 */
  letter-spacing: 0.14em;
  opacity: 0.95;
  margin-top: 6px;
}



.movie-section {
  padding: 80px 5% 160px;
  background-color: none;
  text-align: center;
  color: #d4c8bb;
}

.movie-heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 80px;
}

.movie-title {
  font-size: 64px;
font-family: 'eb-garamond', serif;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}



.movie-intro {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin-bottom: 80px;
}

.movie-block {
  text-align: center;
}

.movie-label {
  font-family: 'Hiragino Mincho ProN', serif;
  font-size: 30px;
  color: #ffffff;
  margin-bottom: 20px;
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
}

.movie-number {
  color: #cba135;
  margin-right: 8px;
}

.movie-desc {
  font-size: 22px;
  line-height: 1.8;
  font-family: 'Hiragino Mincho ProN', serif;
  margin: 0;
  color: #ffffff;
  font-feature-settings: "palt";
  letter-spacing: 0.2em;
}

.movie__buttons {
  display: flex;
  justify-content: center;
  gap: 100px;
  margin-bottom: 80px;
}

.movie__btn {
  position: relative;
  width: 125px;
  height: 50px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  font-family: "din-1451-lt-pro", sans-serif;
  cursor: pointer;
  line-height: 50px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.movie__btn::before,
.movie__btn::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: #fff;
  transition: border-color 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}
.movie__btn::before {
  top: 0;
  left: 0;
  border-top: 1px solid;
  border-left: 1px solid;
}
.movie__btn::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid;
  border-right: 1px solid;
}
.movie__btn.active {
  border: 1px solid #CBA135;
  color: #CBA135;
}
.movie__btn.active::before,
.movie__btn.active::after {
  opacity: 0;
}
.movie__btn:hover {
  border: 1px solid #CBA135;
  color: #CBA135;
}
.movie__btn:hover::before,
.movie__btn:hover::after {
  border-color: #CBA135;
  opacity: 0;
}

.movie__gallery {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600px;
}

.movie__content {
  display: none;
}

.movie__content.active {
  display: block;
}

.movie__video {
  width: 55vw;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  display: block;
  margin: 0 auto;  /* 中央揃え */
}

/* Movie リード文の上に縦線（中央・#cba135・1px×15px） */
.movie-lead::before{
  content: "";
  display: block;
  width: 1px;              /* 太さ */
  height: 85px;            /* 長さ */
  background: #cba135;
  margin: 0 auto 50px;     /* 中央配置＋下に余白 */
}

/* ▼ 追加：Movie セクションのリード文（中央揃え・ヒラギノ明朝） */
.movie-lead{
  max-width: 1080px;
  margin: -20px auto 66px;  /* 上を少し詰めて、下に余白 */
  padding: 0 21px;
  text-align: center;
  color: #ffffff;
  font-family: "Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho",serif;
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.movie-lead__line1{
  font-size: 18px;      /* 2行目：少し小さめ */
  font-weight: 300;     /* w3 相当 */
  opacity: 0.95;
  margin: 0;
}

/* スマホ最適化（≤767px） */
@media (max-width: 767px){
  .movie-lead{
    margin: 0px auto 40px;
    padding: 0 30px;
    line-height: 1.8;
  }

  .movie-lead__line1{ font-size: 12px; font-weight: 300; }

   .movie-lead::before{
    margin-bottom: 20px;
  }

 .br--pc{ display: none; }   /* スマホ時は改行を無効化 */

}


/* ───── Option Section ───── */
.option-section {
  width: 100%;
  padding: 120px 0;
  display: flex;
  flex-direction: column;
/* 子を横方向に伸ばす（flex-startだと子が内容幅に縮むことがある） */
  align-items: stretch;
  box-sizing: border-box;
}

.option-title {
  display: flex;
  align-items: center;
  margin-left: 10%;
  margin-bottom: 40px;
  gap: 4px;
}

.option-diamond {
  width: 12px;
  height: 12px;
  background-color: #cba135;
  transform: rotate(45deg);
  margin-right: 12px;
}

.option-subtitle {
  font-family: 'eb-garamond', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  color: #fff;
  margin: 0;
  letter-spacing: 0.08em;
}

.option-banners {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; /* 横中央 */
  gap: 80px;
   box-sizing: border-box;
}

.option-banner {
  display: block;
  width: 80%;
  height: auto;
  /* 念のため中央寄せを二重に担保 */
  align-self: center;
  margin: 0 auto;
  box-sizing: border-box;
}

/* =====================================================
   ■  MOBILE CUSTOM STYLING  for <768px
   ===================================================== */
@media (max-width: 768px) {

  /* ----- intro-section ----- */
  .intro-section {
 height: calc(var(--vh, 1vh) * 85);
 margin-bottom: 30px;
  }

  .photo-left {
    height: 15vh;
    margin-left: 18px;
     margin-top: -43px;  /* ← ここ追加 */
  }
.photos {
  height: 40vh; /* 中央写真の高さと同じにして整える */
  display: flex;
  justify-content: center;
  align-items: center; /* ← 全体中央揃え */
  gap: 15px;
  position: relative;
}
  .photo-right {
    height: 15vh;
  transform: translate(8px,-43px);
  width: 22vw;
  }
.photo-under {
  width: 32vw;
  height: 11vh;
 margin-top: -48px;  /* ← ここ追加 */
}
  .under-photo-wrapper {
     width: 50%;
  margin: 15px auto 0;
  display: flex;
  justify-content: flex-start;
  }

  #wrapperPlaceholder {
    height: 40vh ;
  }

  .center-wrapper {
    width: 45vw ;
    height: 40vh ;
    left: 50%;
    transform: translateX(-50%);
    position: fixed;
  z-index: 0;
   transform-origin: center center;
  max-width: 100%;}

  .center-wrapper img.photo-center {
    content: url('../photo/selected/ten-promises.jpg'); /* ← 中央写真をスマホ用画像に変更 */
    z-index: -1;
  }
.photo-center {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }
  .intro-text {
    font-size: 18px;
    right: -18vw;
    top: -20px;
  }

  .intro-text.recenter {
    font-size: 3vw;
    left: 100%;
    width: 40vw;
    top: 10px;
  }

  #scrollIndicator {
    font-size: 14px;
    bottom: 10px;
    
  }
#scrollIndicator span {
  display: block;            /* ← ブロック要素として中央に */
  text-align: center;
}
  .scroll-arrow {
    width: 140px !important;
    height: 55px !important;
  }

  .features__media img,
  .features__media video,
  .movie__video,
  .video-style__video {
    width: 100vw !important;
    height: auto !important;
    left: 50%;
    transform: translateX(-50%) !important;
  }

  .features__media {
    width: 100vw !important;
    height: auto !important;
    
  }

  .movie__gallery,
  .video-style__contents {
    width: 100vw;
  }

  /* ----- promises-section ----- */

  .promises-section {
  margin-bottom: 120px; /* ← 必要な余白量に応じて調整 */
}


  .promises-title {
    font-size: 36px;
    margin-bottom: 30px;
  }

  .promises-image {
    display: none;
  }

  .promises-list {
    width: 90%;
    margin: 0 auto;
  margin-left: 25px;
  }

  .promises-list .number {
    font-size: 22px;
  }

  .promises-list p {
    font-size: 12px;
    font-feature-settings: "palt";
    letter-spacing: 0.04em;
  }

  /* ----- plan-section ----- */
/* plan-section の左右余白をゼロに */
  /* 1) セクション自体を親の中央寄せから脱出（フルブリードの定番） */
  .plan-section {
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    width: 100vw !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }



  .plan-title {
    font-size: 32px;
    margin-bottom: 40px;
  }

  .photo-heading {
    gap: 15px;
    margin-bottom: 40px;
  }

  .photo-title {
    font-size: 22px;
  }

  .line {
    width: 45px;
  }

  .features__buttons {
    gap: 40px;
    margin-bottom: 60px;
  }

  .features__btn {
    font-size: 14px;
    width: 85px;
    height: 35px;
    line-height: 35px;
  }

   /* 2) ギャラリーは幅100%（= セクションの100vw）でOK。flex中央寄せは解除 */
  .features__gallery {
    display: block !important;   /* ← PCのflexを打ち消す */
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: initial !important;
  }

  /* 3) 非アクティブを確実に消す（複数枚並ぶ事故を防止） */
  .features__content { display: none !important; margin:0 !important; padding:0 !important; }
  .features__content.active { display: block !important; width: 100% !important; }

  /* 4) 画像は親の100%＝100vw。既存の max-width:1000px を無効化 */
  img.features__image {
    display: block !important;
    width: 100% !important;      /* 親（=100vw）にフィット */
    max-width: none !important;  /* 1000px制限を打ち消し */
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: cover !important;
  }
  
 /* ▼ 追加：リード文 */
  .plan-lead {
    margin: 0 20px 40px;
    line-height: 1.7;
  }
  .plan-lead__line1 {
    font-size: 16px;   /* PC18px → スマホ16px */
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .plan-lead__line2 {
    font-size: 12px;   /* PC14px → スマホ12px */
    font-weight: 300;
    margin-top: 4px;
    letter-spacing: 0.02em;
  }


  /* ----- movie-section ----- */
    .movie-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .movie-heading{
    gap:15px;
    margin-bottom: 40px;
  }
  .movie-title {
    font-size: 28px;
  }

  .movie-label {
    font-size: 18px;
  }
.movie-intro{
  gap: 60px;
  margin-bottom: 30px;
}
  .movie-desc {
    font-size: 12px;
  }

  .movie__buttons {
    gap: 40px;
    margin-bottom:60px;
    
  }

  .movie__btn {
    font-size: 14px;
    width: 85px;
    height: 35px;
    line-height: 35px;
  }

  .movie__gallery {
    margin-top: 0;
    margin-bottom: 20px;
  }

.features__gallery{
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
}
 /* ─── Movie Section Mobile Fix ─── */
  /* ③ movie__gallery の余計なハックを外す */
  .movie__gallery {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    overflow: hidden !important;
       min-height: 0 !important;
    height: auto !important;
  }

  /* ④ コンテンツは非アクティブを隠して、アクティブだけ表示 */
  .movie__content {
    display: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .movie__content.active {
    display: block !important;
  }

  /* ⑤ 動画要素をビューポート幅いっぱい＆中央揃え */
 .movie__video {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 92vw !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
}
.features__image{
  width: 100vw;
  height: auto;
  object-fit: cover;
  display: block;
}

  /* ----- option-section ----- */
  .option-section{padding: 0;
    margin: 0 auto !important;
    gap: 30px;
    box-sizing: border-box;
    overflow-x: hidden;
    width: 100% !important;}
 .option-title {
      display: flex;
    align-items: center;
    gap: 3px !important;
    padding: 0 25px !important;        /* ← 左右中央寄せに均等padding */
    margin: 0 0 10px 0 !important;     /* ← 不要な margin-left 削除 */
    box-sizing: border-box;
    max-width: 100vw;
   
  }

  .option-image img{
  width: 100vw;
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  }
  .option-title .diamond {
    flex-shrink: 0;            /* ← ダイヤが縮まないように */
  }

  .option-diamond {
    width: 10px;
    height: 10px;
  }

  .option-subtitle {
    font-size: 20px;
    letter-spacing: 0.04em;
  }

  .option-banners {
    width: 100%;
    gap: 40px;
  }

  .option-banner {
    width: 100%;
  }

}







/* ───────── セクション全体 ───────── */
.beauty-section {
  padding: 80px 0;
  background-color: none;
  color: #fff;
}

/* タイトル */
.beauty-main-title {
  text-align: center;
  font-size: 90px;
 font-family: 'eb-garamond', serif;
font-weight: 400;
font-style: normal;
  margin-bottom: 20px;
  color: #d4c8bb;
  margin-bottom: 40px;
}

.beauty-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  
}

.beauty-subtitle h3 {
  font-size: 64px;
font-family: 'eb-garamond', serif;
font-weight: 400;
font-style: normal;
  color: #d4c8bb;
}

.subtitle-line {
  width: 45px;
  height: 1px;
  background-color: #cba135;
}



/* リードコピー */
.beauty-lead {
  text-align: center;
  font-size: 26px;
  margin-bottom: 20px;
  line-height: 1.5;
  font-feature-settings: "palt";
  letter-spacing: 0.14em;
}

/* 縦ライン */
.beauty-divider {
  width: 1px;
  height: 80px;
  background-color: #cba135;
  margin: 0 auto 20px auto;
}

/* 説明テキスト */
.beauty-description {
  text-align: center;
  font-size: 18px;
  line-height: 1.8;
  font-feature-settings: "palt";
  letter-spacing: 0.2em;
  margin-bottom: 100px;
}

/* ───────── 各特徴パーツ ───────── */
.beauty-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 150px;
  margin-bottom: 80px;
  flex-wrap: wrap;
color: #fff;

}

/* 左右逆用 */
.beauty-feature.reverse {
  flex-direction: row-reverse;
}

.feature-2, .feature-4 {
  flex-direction: row-reverse;
}

.beauty-img {
  width: 600px;
  height: 250px;
  object-fit: cover;
  
}

.beauty-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 左寄せに */
  gap: 20px;
  width: 100%;
  max-width: 450px; /* 任意、デザイン次第 */
}

.beauty-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.diamond {
  width: 12px;
  height: 12px;
  background-color: #CBA135;
  transform: rotate(45deg);
  flex-shrink: 0;
}

.beauty-text h4 {
  font-size: 24px;
  font-family: "ヒラギノ明朝 ProN W3", serif;
  font-weight: normal;
  color: #fff;
  margin: 0;
  letter-spacing: 0.1em;
}

.beauty-text p {
  font-size: 18px;
  line-height: 1.8;
  color: #fff;
  margin: 0;
  max-width: 350px;
  letter-spacing: 0.06em;
}


.option-section {
  width: 100%;
  padding: 0 0;
  background: none;
  color: #fff;
  margin: 0;
}

/* ───── タイトル ───── */
.option-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 0px;
  margin-bottom:20px;
}
.option-title {
  font-size: 40px;
  font-family: "EB Garamond", serif;
  font-weight: 400;
}

/* ───── 各項目コンテンツ ───── */
.option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  width: 80%;
  margin: 0 auto 80px auto;
}

.option-text {
  flex: 1;
}

.option-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.option-text h4 {
  font-size: 24px;
  font-weight: normal;
  margin: 0;
}

.option-text p {
  font-size: 1vw;
  line-height: 1.8;
  margin: 0;
  width: 80%;
}

.option-image {
  flex-shrink: 0;

}
.option-image img {
  width: 600px;
  height: 320px;
  object-fit: cover;
  display: block;
}

/* ───── 和装の背景付きエリア ───── */
.option-background {
  width: 100%;
  background-image: url('../photo/wasou-patton.png');
/* ノブ用の変数（PC/SPで切替えやすい） */
  --bgW: 124vw;
  background-size: var(--bgW) auto;

  background-position: center center;
  background-repeat: no-repeat;
  padding: 0 0;
  position: relative;
  color: #34343d;
  
}


/* テキスト・画像配置 */
.option-background .option-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  width: 80%;
  margin: 0 auto;
  color: #34343d;
}
.option-background .option-text h4,
.option-background .option-text p {
  color: #34343d;
}


@media (max-width: 768px) {
  /* ─── Beauty Section Mobile ─── */
.beauty-section{padding-bottom: 10px;}

  .beauty-main-title {
    font-size: 38px !important;
  }
  .beauty-text{
    margin-left: 40px;
  }
  .beauty-subtitle {
    gap: 10px !important;
    justify-content: center;
  }
  .beauty-subtitle h3 {
    font-size: 28px !important;
    letter-spacing: 0.04em;
  }

.beauty-heading h4{
  font-size: 18px;
}

.diamond{
  width: 10px;
  height: 10px;
}

.beauty-text p{
font-size: 14px;
}

  .subtitle-line {
    width: 35px !important;
  }
  .beauty-lead {
    font-size: 14px !important;
    line-height: 1.5;
    
    font-feature-settings: "palt" on;
  }
  .beauty-divider {
    height: 45px !important;
    margin: 0 auto 20px auto;
  }
  .beauty-description {
    font-size: 11px !important;
    line-height: 1.8;
  }

.beauty-img,
.option-image img {
  width: 100vw !important;               /* 横幅をビューポートいっぱいに */
    height: auto !important;
    object-fit: cover !important;          /* カバー設定はそのまま */
    object-position: center center !important; /* 切り出し位置を中央に */
    position: relative !important;
    left: 50% !important;                  /* 左から50% */
    transform: translateX(-50%) !important;/* 自要素幅の半分を左にずらして中央寄せ */
    max-width: none !important;            /* 既存の max-width 制約を解除 */
}

  /* beauty-img と beauty-text の縦並び間隔を狭く */
  .beauty-feature {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 30px !important;
    margin-bottom: 60px !important;
  }
  .beauty-feature.reverse {
    flex-direction: column !important;
  }

  /* ─── Option Section Mobile ─── */
.option-section{margin-top: 40px;}

  .option-title {
all: unset;                         /* ← すべての継承スタイルを解除 */
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 0;
    font-size: 22px;
    width: 100%;
    box-sizing: border-box;
    color: #fff;
transform: translateY(20px);
  }

 .option-background {
    width: 100vw !important;  /* ビューポート幅いっぱい */
    margin-left: calc(-50vw + 50%) !important; /* 中央基準で強制フィット */
    background-size: cover !important;
    background-position: center center !important;
     overflow: hidden;
  }

/* 背景画像は疑似要素で敷く → これを拡縮しても枠は動かない */
.option-background::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('../photo/wasou-patton.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;              /* まずは全面をカバー */

  /* ここで画像だけスケール。1で標準、0.85で15%縮小など */
  --bg-scale: 1.2; 
  transform: scale(var(--bg-scale, 1));
  transform-origin: center center;     /* 中心基点で縮小/拡大 */
}

/* 中身（テキスト等）は前面に */
.option-background > *{
  position: relative;
  z-index: 1;
}



  .option-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    width: 100% !important;
    margin: 0 auto 80px auto !important;

  }
  .option-text,
  .option-image {
    width: 100% !important;
  }


  
   .option-text{margin-left: 80px;}

   .option-heading h4{
    font-size: 18px;
   }
   .option-text p{
    font-size: 13px;
    font-feature-settings: "palt";
   }

   .option-background{padding: 0;padding-top: 50px;}
}






/* ===== カタログ全体 ===== */
.catalog-wrapper{
  background:#947c7c;
  padding:60px 6vw 120px;
  display:flex;
  flex-direction:column;
  gap:60px;
  margin-top: 180px;

}

/* ─── 1) 上部 : 〈Dress〉 と ロゴ ─── */
.catalog-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-left: 80px;
  padding-right: 80px;
  margin-bottom: 20px;
}
.catalog-title{
  font-size:64px;
font-family: 'eb-garamond', serif;
font-weight: 400;
font-style: normal;
}
.catalog-logo{
  height:8vh;
  width:auto;
}

/* ─── 2) サブタイトル & 仕切り線 ─── */
.catalog-sub{
  font-size:40px;
 font-family: 'helvetica-neue-lt-pro', sans-serif;
font-weight: 400;
font-style: normal;
  text-align:center;
}
.catalog-hr{
  width:90%;
  height:1px;
  background:#fff;
  margin:20px auto 50px;
}

/* ─── 3) プロダクトタイトル ─── */
.product-title{
  font-family: 'gautreaux', sans-serif;
font-weight: 500;
font-style: normal;
  font-size:3.8vw;
  text-align:left;
  padding-left: 80px;
  margin-bottom: 0;
}

/* ===== ギャラリー & カラースイッチ ===== */
.gallery{
  display:flex;
  justify-content:center;
  gap:80px;
  margin-top:10px;
   align-items:center;   /* ← ★これを追加：縦中央揃え */
}
.image-set{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 15px;
   justify-content:center;  /* ← ★これを追加：画像‐ボタン列を自身の中央に */
}

/* 画像を包む“枠” */
.img-frame{
  position:relative;
   width:32vw;
  height:90vh;
  overflow:hidden;
}

.img-frame .arch-img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-top-left-radius:9999px;
  border-top-right-radius:9999px;
  opacity:0;
  transition:opacity .4s;
}

.img-frame .arch-img.active{opacity:1;}

.color-switch{
  bottom:0;
  left:50%;
  transform:translateX(-10%);
  display:flex;
  gap:30px;
  align-items:center;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* ── カラーボタン ───────────────────────── */
.color-btn{
  position:relative;              /* ← !! 重要 !! */
  width:30px;
  height:30px;
  border-radius:50%;
  border:none;                    /* 通常時は枠なし */
  background:transparent;         /* ← 常に透明 */
  cursor:pointer;
}

/* ボタンごとの塗り色を --fill に渡す */
.color-btn[data-variant="0"]{ --fill:#974a4c; }
.color-btn[data-variant="1"]{ --fill:#ffffff; }

/* 内側 30px（後で縮小） */
.color-btn::before{
  content:'';
  position:absolute;inset:0;
  border-radius:50%;
  background:var(--fill);
  transform:scale(1);             /* 30px */
  transition:transform .2s;
}

/* ── ホバー / アクティブ ────────────────── */
.color-btn:hover,
.color-btn.active{
  border:1px solid #000;          /* 外側 30px 枠 */
}

.color-btn:hover::before,
.color-btn.active::before{
  transform:scale(.83);           /* 25 / 30 ≒ 0.83 */
}

/* 透明化は hover 時だけ */
.color-btn:hover{background:transparent;}

/* ===== 商品情報 ===== */
.product-info{
  margin-top:40px;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-bottom: 50px;
}

.product-name{
display:flex;          /* flex-row で横並び */
  flex-wrap:nowrap;      /* ← 強制的に折り返さない */
  align-items:baseline;  /* ベースライン揃えで美しく */
  gap:1.8rem;            /* 文字間スペース（好みで調整） */
  white-space:nowrap;    /* 念のため改行禁止 */
  margin-top:10px;           /* 元の余白はお好みで調整 */
padding-left: 160px;
margin-bottom: 20px;
}

/* 英語部分を大きく（例：48px） */
.name-en{
  font-size:3.4vw;            /* ← 好きな大きさに */
  font-weight:300;
  letter-spacing: 0.02em;
}

/* 日本語は従来サイズ（例：36px） */
.name-jp{
  font-size:1.8vw;
  font-weight:300;
}

.color-list{
  display:flex;
  align-items:center;
  gap:40px;
}

.color-label{
  font-size:1.8vw;
  font-weight:300;
  padding-left: 160px;
}

.color-dot{
  width:40px;
  height:40px;
  border-radius:50%;
}

.color-dot.white{
  background:#fff;
}

.color-dot.black{
  background:#000;
}

.color-dot.terracotta{
  background: #bd6856;
}

/* ===== ページネーション ===== */
.pagination{
  margin-top:60px;
  display:flex;
  justify-content:center;
  gap:35px;
}

.page-btn{
  width:50px;
  height:50px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  font-size:28px;
  font-family: helvetica-neue-lt-pro, sans-serif;
font-weight: 700;
font-style: normal;
  background:#fff;
  color:#974a4c;
  transition:background-color .2s,color .2s;
}

.page-btn:hover,
.page-btn.active{
  background:#974a4c;
  color:#fff;
}

/* ─── 4) タグライン (画像) ─── */
/* ─── 4) タグライン (画像) ─── */
.tag-banner {
  background: #8f4d48;
  position: relative;       
  left: 50%;                
  transform: translateX(-50%);
  width: 100vw;             
  /* Flex コンテナ化 */
  display: flex;            
  justify-content: center;  
  align-items: center;      

  /* 帯の上下厚み */
  padding: 40px 0;          
  /* 上下マージンまとめて */
  margin: 50px 0 -120px;    

  /* パディング込みで幅を制御 */
  box-sizing: border-box;   
  overflow-x: hidden;
}


.catalog-tag-img{
  display:block;
  padding: 30px 20px;
  height:auto;
  width:50vw;
}

@media (max-width: 768px) {
  .catalog-wrapper {
    padding:0;
    gap: 40px;
    margin-top: 120px;
  }

  .catalog-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 10px;
    margin-top: 30px;
  }

  .catalog-title {
    font-size: 36px;
    text-align: left;
  }

  .catalog-logo {
    height: 5vh;
    width: auto;
  }

  .catalog-sub {
    font-size: 28px;
    margin-bottom: 10px;
    text-align: center;
  }

  .catalog-hr {
    margin: 10px auto 20px;
  }

  .product-title {
    font-size: 28px;
    text-align: left;
    padding-left: 20px;
    margin-bottom: 10px;
  }

  .gallery {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }


  .image-set {
    position: relative; /* ← 相対位置を基準に */
  }

  .color-switch {
    position: absolute;              /* ← 画像の下中央に固定配置 */
    bottom: -60px;                   /* ← 高さや間隔に応じて調整 */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
  }

  .img-frame {
    width: 40vw;
    height: 40vh;
    position: relative; /* 念のため */
  }

  .color-btn {
    width: 20px;
    height: 20px;
  }

  .color-btn::before {
    transform: scale(1);
  }

  .product-info {
    margin-top: 20px;
    padding-left: 20px;
    margin-bottom: 30px;
    gap: 10px;
  }

  .product-name {
 padding-left: 20px !important;   /* ← 左余白つけて左寄せ */

    display: flex;
    justify-content: flex-start;     /* ← 左揃え */
    align-items: baseline;
    gap: 1rem;

    width: 100%;
    box-sizing: border-box;
      margin-top: 60px !important;       /* ← 間隔広げたい場合ここを調整 */
    margin-bottom: 0px !important;
    padding-left: 20px !important;
    text-align: left !important;
    justify-content: flex-start;
  }

  .name-en {
    font-size: 28px;
  }

  .name-jp {
    font-size: 22px;
  }

.color-list{gap: 20px;}

  .color-label {
    font-size: 22px;
    padding-left: 20px !important;
  }

  .color-dot {
    width: 20px;
    height: 20px;
  }

  .pagination {
    margin-top: 20px;
    gap: 30px;
  }

  .page-btn {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }

  .tag-banner {
    padding: 10px 0;
    margin: 30px 0 -40px;
  }

  .catalog-tag-img {
    width: 70vw;
    padding: 10px;
  }
}




/* ---------- 大理石背景で全体を囲む ---------- */
.marble-section{
  background:url('../photo/marble-texture-bg.png') top center repeat-y;
  background-size:auto 200vh;
  padding-top:120px;                      /* セクション上下余白 */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}

/* ----- 共通見出し ----- */
.section-heading{
  font-size:64px;
  font-weight:700;color:#34343d;
  font-family: 'eb-garamond', serif;
font-style: normal;
  text-align:center;
  margin-bottom: 30px;
}

/* ===== ボタン ===== */
.rental__buttons{
  display:flex;
  gap:120px;
  margin-top:20px;
  margin-bottom:60px;
}

.rental__btn{
  position:relative;
  width:125px;
  height:50px;
  background:transparent;
  border:none;
  cursor:pointer;
  color:#34343d;
  font-size:20px;
  font-family:"din-1451-lt-pro",sans-serif;
  line-height:50px;
  transition:.3s;

}
.rental__btn::before,
.rental__btn::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  border-color:#34343d;
  transition:border-color .3s,opacity .3s;opacity:1;
}
.rental__btn::before{
  top:0;
  left:0;
  border-top:1px solid;
  border-left:1px solid;
}
.rental__btn::after {
  bottom:0;
  right:0;
  border-bottom:1px solid;
  border-right:1px solid;
}

.rental__btn.active,
.rental__btn:hover{
  border:1px solid #CBA135;color:#CBA135;
}
.rental__btn.active::before,
.rental__btn.active::after,
.rental__btn:hover::before,
.rental__btn:hover::after{
  border-color:#CBA135;
  opacity:0;
}

/* ===== Rental images ===== */
.rental__contents{
  width:100%;
  max-height: none;
  display:flex;
  justify-content:center;
  margin-bottom: 100px;
}
.rental__content{
  display:none;
  gap:60px;
  align-items: center;
    width: 100%;
    /* active じゃないものは必ず消す（競合つぶし） */
.rental__content:not(.active){
  display: none !important;
}
}
.rental__content.active{
  display:flex;
  justify-content:center;   /* ←★これを追加 */

}
/* 画像の基本：横幅に合わせて比率維持で伸縮（切れない） */
.rental__img{
  display:block;
  width:100%;
  height:auto;       /* ← これでアスペクト比維持＆トリミング無し */
  max-width:100%;
}

/* 2枚あるときは左右に並べて “それぞれだいたい半分” */
.rental__content .rental__img{
  flex: 1 1 48%;
}

/* 1枚だけのときはその1枚を100%で横いっぱい */
.rental__content > .rental__img:only-child{
  flex-basis: 100%;
}

/* 3) PC時：veilは active のときだけ2カラムGridに */
@media (min-width: 769px){
  .rental__content.veil.active{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    align-items: center;

    /* ここで“画面左右に50px”を確保 */
    padding-inline: 40px;
    box-sizing: border-box;
     /* 中央寄せと幅の抑制（任意） */
    justify-content: center;
    justify-items: center;
    max-width: 1200px;     /* ← もっと小さくしたければ1000px等に */
    margin-inline: auto;
  }
  /* 非アクティブの veil は必ず消す（display指定の競合を潰す） */
  .rental__content.veil:not(.active){
    display: none !important;
  }
 .rental__content.veil.active .rental__img{
    width: 100%;
    height: auto;
    max-width: 450px;      /* ← 小さくしたい上限幅。380〜480pxで調整すると良い */
  }
  /* 既存の flex 指定の影響を打ち消しておく（寸法ぶれ防止） */
  .rental__content .rental__img{ flex: initial; }
}




/* ===== Price cards ===== */
.price__cards{
  width:90%;
  max-width:1000px;
  display:flex;
  gap:80px;
  margin-bottom: 120px;
}
.price-card{

  padding:0;width:100%;
  max-width:500px;
  margin:0 auto;
}
.price-card__img{
  width:100%;
  display:block;
}

/* ===== LINE banner ===== */
.line-banner{
  position:relative;
  width:100vw;
  max-height:600px;
  margin-bottom: 0px;
}

.line-banner__img{
  width:100%;
  display:block;
}

.line-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:30vw;
  max-width:340px;
  height:80px;
  line-height:80px;
  background:#06c755;
  opacity:1;
  color: #fff;
  font-size: 24px;
  letter-spacing: 0.04em;
  font-weight: 600;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s ease;
  font-family:"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
}

.line-btn:hover{
   background-color: #fff;
  color: #06c755;
  border: 1px solid #06c755;
}

@media (max-width: 768px) {

  /* ----- 共通見出し ----- */
  .section-heading {
    font-size: 36px;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  /* ===== Rental buttons ===== */
  .rental__buttons {
    gap: 60px;
    margin-top: 10px;
    margin-bottom: 30px;
  }

  .rental__btn {
    width: 85px;
    height: 35px;
    font-size: 14px;
    line-height: 35px;
  }

  .rental__btn::before,
  .rental__btn::after {
    width: 12px;
    height: 12px;
  }

  /* ===== Rental images ===== */
  .rental__content{
    gap:16px;
    flex-direction: column; /* 2枚でも縦積みに */
  }
 /* 非アクティブは確実に消す（保険） */
  .rental__content:not(.active){
    display: none !important;
  }

 .rental__content.bouquet.active{
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;   /* パディング分で横スクロール防止 */
  }

  /* Bouquet は1枚全幅でOK（現状維持） */
  .rental__content.bouquet.active .rental__img{
    width: 100%;
    height: auto;
        display: block;  /* 余白の隙間対策 */
  }

  /* ↓ これが肝：Veil を2カラムで横並びに固定 */
  .rental__content.veil.active{
    display: grid !important;                 /* flex-column を無効化 */
    grid-template-columns: 1fr 1fr;           /* 2 カラム */
    gap: 16px;                                /* 画像間の余白 */
    align-items: center;
  }
  .rental__content.veil.active .rental__img{
    width: 100%;                               /* 各カラム内でいっぱい */
    height: auto;                              /* 比率維持・トリミング無し */
  }


  /* ===== Price section ===== */
 .section-heading {
    margin-top: 30px;
    margin-bottom: 10px;
    font-size: 36px;
  }

  .price__cards {
    gap: 20px;
    flex-wrap: nowrap;
    margin-bottom: 60px;
        width: 100%;            /* ← コンテナも画面幅いっぱい */

  }

  .price-card {
    max-width: none;
    width: 50%;
  }

  .price-card__img {
    width: 100%;
    display: block;
  }

  /* ===== LINE Banner ===== */
  .line-banner {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    margin-bottom: 0 !important;
    margin-top: 50px;
    max-height: none !important;
    height: 520px !important; 
  }
 .line-banner__img{
    visibility: hidden;   /* ← display:none は使わない。高さが消えるので */
    width: 100%;
    height: auto;
    display: block;
  }
 .line-banner::after{
    content: "";
    position: absolute;
    inset: 0;
    background: url("../photo/services-line-bg-sp.webp") center/cover no-repeat;
    /* 相対パスなら CSS からの相対になるので注意：
       例）CSSが /assets/css/style.css なら "../photo/services-line-bg-sp.webp" などに */
  }
.line-btn {
  width: 40vw;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  display: inline-block;
  background: #06c755;
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
  z-index: 1;
}
}




/* PC では完全に隠す */
@media (max-width:768px){
  .global-nav{ display:none; }

}
@media (min-width:769px){
  #mobileNavToggle{ display:none; }
  #mobileNav{display: none;}
}

/* ===== Mobile Global Nav ===== */
@media (max-width: 768px) {

  /* ハンバーガー開閉ボタン */
 #mobileNavToggle {
 position: fixed !important;
    top: 20px !important;
    right: 0 !important;
    transform: none !important;    /* 親要素の transform 影響を排除 */
    z-index: 2000 !important;       /* fvのwrapper( z-index:5 ) 以上に */
    width: 75px;
    height: 35px;
    background-color: rgba(52, 52, 61, 0.4); /* #34343d 透明度0.3 */
    border: none;
    padding: 5px 20px 5px 8px; /* 上・下・左だけ2px、右は0 */
    cursor: pointer;
  box-sizing: border-box;
  line-height: 0;
  /* 行ボックス由来の隙間を殺す + 子を中央に収める */
  line-height: 0;
  display: grid;
  place-items: center;

  /* 子が大きくても外に出さない */
  overflow: hidden;

  /* タップ装飾のにじみ防止（モバイル） */
  -webkit-tap-highlight-color: transparent;

  }

#mobileNavToggle img {
  display: block;                 /* ベースライン隙間の排除 */
  width: auto;                    /* 縦基準でスケール */
  height: 100%;                   /* ← 内容枠（44-上下2px×2=40px）にフィット */
  max-width: 100%;                /* 横も 100% を上限に */
  object-fit: contain;            /* はみ出さずに収める */
  pointer-events: none;           /* クリックは親で拾う */
  transition: opacity .22s ease;  /* ← スムーズさ（変更OK） */
}


  /* メニュー本体 */
  #mobileNav {
     position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 75%;
    max-width: 300px;
    height: 100%;
    background-color: #fff;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  #mobileNav.open {
    transform: translateX(0);
  }

/* メニュー内 */
.mobile-nav__inner {
  padding: 20px 20px 5px; /* 上部にロゴ分の余白 */
  height: 100%;
 display: flex;
    flex-direction: column;
}

/* クローズボタン */
  .mobile-nav__head {
    display: flex;
    justify-content: flex-end;  /* 右寄せ */
    align-items: center;        /* 縦中央揃え */
    padding: 10px;              /* 必要に応じ調整 */
    margin-bottom: 30px;
  }
  .mobile-nav__logo {
    width: 55px;
    height: auto;
  }
.mobile-nav__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
  .mobile-nav__logo {
    width: 55px;
    height: auto;
  }
  .mobile-nav__close img {
    width: 16px;
    height: 16px;
    pointer-events: none;
  }

  /* メニュー */
  .mobile-nav__menu {
    list-style: none;
    margin: 20px 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }
  .mobile-nav__menu a,
  .mobile-nav__gallery-head {
    font: 600 20px/1.4 "Times New Roman", serif;
    color: #34343d;
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  /* Gallery ドロップダウン */
  .mobile-nav__gallery-dropdown {
    display: none;
    list-style: none;
    margin: 12px 0 0 12px;
    padding: 0;
    flex-direction: column;
    gap: 20px;
  }
  .mobile-nav__gallery.open .mobile-nav__gallery-dropdown {
    display: flex;
  }
.mobile-nav__gallery .mobile-nav__gallery-head {
  display: inline-flex;
  align-items: center;
}
.mobile-nav__gallery .mobile-nav__gallery-head::after {
 content: '';
  display: inline-block;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid currentColor;
  transition: transform 0.4s ease;
  transform-origin: center; /* 中心回転を保証 */
  transform: rotate(0deg);  /* 初期：上向き */
}
/* ホバー OR .open で矢印 ▼ */
.mobile-nav__gallery:hover  .mobile-nav__gallery-head::after,
.mobile-nav__gallery.open   .mobile-nav__gallery-head::after {
  transform: rotate(180deg);
}
.mobile-nav__gallery-dropdown{
  margin: 0;
  margin-top: 15px;

}

/* open クラスで展開 */
/* ホバー OR .open でドロップダウン表示 */

.mobile-nav__gallery.open   .mobile-nav__gallery-dropdown {
  display: flex;
}

.mobile-nav__gallery:hover > .mobile-nav__gallery-dropdown {
  display: flex;
}
  /* SNS */
  .mobile-nav__sns {
    margin-top: auto;
    display: flex;
    gap: 50px;
     align-items: center; /* 縦中央揃え */
     justify-content: center;
     margin-bottom: 30px;
  }
  .mobile-nav__sns img {
    height: 25px;
  }

  /* Legal */
  .mobile-nav__legal {
    margin-top: 10px;
    font-size: 12px;
    line-height: 2;
    transform: translateY(20px);
  }
  .mobile-nav__legal a {
    color: #34343d;
    text-decoration: none;
  }
  .mobile-nav__copy {
    margin: 8px 0 0;
  }
}


/* W3 = Light → CSSで font-weight:300; のとき使われる */
@font-face {
  font-family: "Hiragino Mincho ProN";   /* 既存CSSが呼ぶ名前 */
  src: local("Hiragino Mincho ProN W3"),
       local("hiragino-mincho-pron");
  font-weight: 300;
  font-style: normal;
}

/* W6 = SemiBold → CSSで font-weight:600; のとき使われる */
@font-face {
  font-family: "Hiragino Mincho ProN";
  src: local("Hiragino Mincho ProN W6"),
       local("hiragino-mincho-pron");
  font-weight: 600;
  font-style: normal;
}