@charset "utf-8";

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; /* 画像下の謎の隙間を消すおまじない */
}

/* サイト全体の共通ルール、何度も書く必要はなし */
/*　各クラス共通事項　*/
:root {
/* カラー設定  */
--bg-color: #FFFDF7;       /* Snow : 背景 */
--main-gold: #B89C6A;     /* Muted Gold: ロゴ・見出し */
--accent-blue: #2C3E50;   /* Charcoal Blue: 本文・CVボタン */
--sub-bg-grey: #F2F2F2;      /* Warm Grey: 境界線など */
/* フォント設定  */
--font-serif: "Cormorant Garamond", "Noto Serif JP", serif;
--font-sans: "Noto Sans JP", sans-serif;
--section-margin: 160px; /* 基本の大きな余白 */
}

html, body {
    background-color: var(--main-gold);
    margin: 0;
    padding: 0;
}

body {
/* --- 本文：日本語も英数字もゴシック体 (Noto Sans JP) --- */
/* 欧文専用を指定しないことで、Noto Sans JP内の英数字が使われます */
background-color: var(--bg-color);
color: var(--accent-blue);
font-family: "Noto Sans JP", sans-serif;
font-optical-sizing: auto;
font-weight: 400; /* 通常の太さ */
font-style: normal;
font-size: 14px;
line-height: 2.0;              /* 本文の指定  */
letter-spacing: 0.05em;        /* 本文の指定  */
margin: 0;
}
/* --- 大見出し：英数字は Cormorant Garamond、日本語は Noto Serif JP --- */
h1 {
     /* 欧文を先に書くのが鉄則！ */
font-family: "Cormorant Garamond", "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 200;         /* Bold は数値で 700 */
font-style:normal ;
font-size: 90px;          /* 文字サイズ */
line-height: 1.0;         /* 行間（単位なし推奨） */
letter-spacing: -0.02em;    /*字間*/
/*(Bold)　40px　1.5/0.1em*/
}

/* --- 中見出し：英数字は Cormorant Garamond、日本語は Noto Serif JP --- */
h2 {
font-family:  "Cormorant Garamond", "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;         /* SemiBold */
font-style: normal;
font-size: 24px;          /* 24px */
line-height: 1.6;         /* 1.6 */
letter-spacing: 0.1em;    /* 0.1em */
}/*Noto Serif JP (SemiBold)　22px　1.6/0.1em*/

.custom-text {
  font-family: "Noto Serif JP", serif;
}

.inner {
    max-width: 1200px;
    margin: 0 auto;    /* 左右中央寄せ */
    padding: 0 20px;   /* スマホで見るときに端がくっつかないための遊び */
    width: 100%;       /* 1200px以下の時は画面幅に合わせる */
    box-sizing: border-box; /* paddingを含めた幅計算にする（必須） */
}
a img{transition: 0.4s;}
a img:hover{opacity:0.7;}

/* 【aタグのcss】 */
/* a:link{text-decoration: none;color:#c439d6;}
a:visited{text-decoration: none;color:#f0e54c;}
a:hover{text-decoration: underline;color: #add0db;}
a:active{text-decoration: underline;color: #244da7;} */
/* もしくは */
/* a{text-decoration: underline;color: #10cf40;}
a:hover{text-decoration: underline;color: #911313;} */

/*===ここからファーストビューのコード===*/
.site-header{
height: 140px;
width: 100%;
/* 下側だけにふわっと影をつける */
box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.2);
position: relative; 
z-index: 100;    /* これで下の画像より「上」に表示されます */
}
.header-line{
background-color: var(--main-gold);
width: 100%;               /* 横幅いっぱい */
min-height: 15px;         /* 最低限の高さ */
}
.header-top {
height: 50px; /* ここで高さを固定。残りが2段目用になります */
margin: 8px 10px 0 20px;
padding: 5px 0;
}
/* 1段目の設定：ロゴと予約ボタンを左右に */
.header-top .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;/* 親の .header-top の高さ一杯に広げる */
}
/* ロゴの部分 */
.logo img {
    width: 180px; /* ロゴサイズ調整 */
    height: auto;
    display: block; /* 画像の下にできる謎の隙間を消す */
}
/* 来店予約ボタンの部分 */
.btn-reservation {
/* box-shadow: 横 縦 ぼかし 広がり 色; */
box-shadow: 0 0 1px 1px rgba(78, 74, 7, 0.3);
transition: opacity 0.3s ease, transform 0.4s ease;
text-decoration: none;
padding: 10px 18px;   
display: inline-block;
line-height: 1; /* 行の高さをリセットすると上下がより正確に縮まります */
}
.btn-reservation:hover {
opacity: 0.8;
transform: translateY(-2px); /* わずかに浮く動作で「誠実な反応」を表現 */
color: var(--main-gold);
}
/* グローバルナビゲーションの部分 */
.header-bottoms {
    width: 100%;
    display: flex !important;       /* 横に並べる */
    justify-content: center;        /* 中央に寄せる */
    gap: 20px;
    padding: 10px 20px;
    background-color: var(--bg-color);
    margin: 0 0 50px;
}

/* ボタン自体の設定（縦に並ぶのを防ぐ） */
.nav-btn {
    display: flex;
    flex-direction: column;  /* 英語と日本語を上下に */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--accent-blue);
    min-width: 96px; 
    font-size: 13px;         /* 英語のサイズ */
    letter-spacing: 0.1em;
    border-radius: 2px;
    transition: all 0.3s ease;
    line-height: 1.2;        /* 行間を詰め気味にする */
}    
/* 日本語部分（span）の個別設定 */
.nav-btn span {
    font-size: 10px;   
    margin-top: 2px;         /* 英語との隙間を少し空ける */
    font-weight: normal;
    /* 日本語は明朝よりもゴシック（Sans）の方が見やすい場合があり？ */
    font-family: "Noto Sans JP", sans-serif; 
}
/* ホバー時の演出：少し浮き上がり、影を濃くする */
.nav-btn:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    color: var(--main-gold);
}

/* --- ヒーローセクション --- */
/* --- ヒーローエリア完全版：全画面・左下文字・高画質 --- */
.hero {
    width: auto;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background-color: #FFFDF7;
}

/* 1. 画像：全画面 */
.hero-image-area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* 最背面 */
}
.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

/* 2. グラデーション：画像の上、文字の下 */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(255, 253, 247, 1.0) 0%, 
        rgba(255, 253, 247, 0.8) 15%, 
        transparent 40%);
    z-index: 5; /* 画像(1)より上で、文字(10)より下 */
    pointer-events: none;
}

/* 3. 文字：一番手前に引きずり出す */
.hero-flex {
    height: 100vh;
    position: relative !important;
    z-index: 99 !important; /* 強制的に最前面 */
    display: flex !important;
    align-items: flex-end !important; /* 下寄せ */
    padding-bottom: 100px !important;
    pointer-events: none;
}

.hero-text-area {
    pointer-events: auto;
    /* 念のため、文字を絶対に出現させる記述 */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 欧文：100px・極細・優雅な余白 */
.hero-copy {
    /* 1. フォントの種類を最優先（!importantで強制） */
    font-family: "Cormorant Garamond", serif !important;
    
    /* 2. サイズと太さ：100pxで細身（200または300） */
    font-size: 100px !important;
    font-weight: 100 !important; 
    
    /* 3. 行間と字間：ここが「美しさ」の決め手 */
    line-height: 1.1 !important;
    letter-spacing: 0.12em !important; /* 広めの字間が高級感を生む */
    
    /* 4. その他：勝手に大文字にさせない、色を確実に当てる */
    color: var(--accent-blue) !important;
    text-transform: none !important;
    margin: 0 0 20px 0 !important;
    display: block !important;
    
    /* 5. 視認性：白い本の上でも透き通るように読める影 */
    text-shadow: 0 0 20px rgba(255, 255, 255, 1.0) !important;
}

/* 日本語サブコピー：誠実な明朝体 */
.hero-copy-sub {
    font-family: "Noto Serif JP", serif !important;
    font-size: 18px !important;
    letter-spacing: 0.4em !important;
    color: var(--accent-blue) !important;
    font-weight: 500 !important;
    margin: 0 !important;
}


/* Price&Lineup各商品の価格など一覧 */
.pricelin {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto var(--section-margin); /* 160pxの代わりに変数を使う *//* 上下左右をスッキリ整理 */
    height: auto;
}
.txt01 {
    flex: 1; /* ★width: 380pxの代わりに「3等分」にする設定 */
    padding: 10px;
    text-align: center; /* テキストも中央寄せ */
    line-height: 160%;
}

/* 画像とテキストの親要素を共通の設定にする */
.subsec01, .subsec02 {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* この数値を上下で合わせることで垂直に揃います */
    width: 100%;
}

.subsec01 {
    margin-bottom: 16px; /* 画像とテキストの間の距離 */
}

/* 各パネルの幅を3等分に固定 */
.secimg01, .txt01 {
    flex: 1;
}

.secimg01 img {
    width: 100%;
    height: auto;
    display: block;
    /* 上品な影を微かに追加 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-radius: 1px;
}
.lineup-title {
    font-family: "Cormorant Garamond", serif;
    font-size: 18px; /* 少し小さくして上品に */
    font-weight: 700;
    letter-spacing: 0.2em; /* 字間を思い切り広げる */
    color: var(--accent-blue);
    margin-bottom: 12px;
    text-transform: uppercase; /* 大文字で統一して高級感を出す */
}

.txt01 p {
    font-size: 12px; /* 本文も小さく。これが高級感の正体です */
    line-height: 2.0;
    color: var(--accent-blue);
    opacity: 0.7; /* 少し透かすことで、画像との主従関係をはっきりさせる */
    padding: 0 15px;
}



/* Coresectionコアセクション 1. 3つのパネルを並べる親要素 */
/* --- Core Section 全体 --- */
.coresec {
    max-width: 1200px;
    margin: 0 auto 0;
    padding: 0 auto;
    box-sizing: border-box;
}

/* テキスト装飾：Charcoal Blueで統一した誠実なトーン */
.txt01 h3 {
    font-family: "Noto Serif JP", serif;
    font-size: 18px;
    color: var(--accent-blue); 
    margin-bottom: 12px;
    letter-spacing: 0.1em; /* 少し字間を広げて品格を出す */
    font-weight: 700;
}

.txt01 p {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    line-height: 1.8;
    color: var(--accent-blue);
    text-align: justify;
    margin: 0;
    opacity: 0.9; /* 本文よりわずかにコントラストを下げるとh3が引き立ちます */
}

/* 「ReadMore」のボタン */
.btn-readmore {
    display: block;
    width: fit-content;
    margin: 18px auto var(--section-margin); /* 160pxの代わりに変数を使う */
    padding: 4px 16px;
    background-color: var(--main-gold);
    color: #fff;             /* 文字色を白に（リンク色を上書き） */
    text-decoration: none;
    border-radius: 2px;      /* 少し角を丸める */
    transition: all 0.3s ease;
    text-align: center;
}
.btn-readmore:hover {
    /* 1. 明るさを上げる（1.0が通常、1.2で20%明るく） */
    filter: brightness(1.2); 
    
    /* 2. 少し上に浮かせる（-3pxほど上に移動） */
    transform: translateY(-3px); 
    
    /* 3. 影を少し強くして「浮いた感」を出す */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    
    /* 4. 透明度は1（不透明）に戻しておくのが明るく見せるコツ */
    opacity: 1; 
}

/* 1. パラジウムを推奨するテキスト外枠の設定 */
.pal01 {
    width: 100%;
    height: auto;
    margin-bottom: 24px;
}

/* 2. 中の枠：サイズを固定して背景を設定 */
.pal01 .inner {
    max-width: 1200px;             /* 1200pxの枠に制限 */
    height: auto;
    margin: 0 auto 8px;
    /* 黒の半透明(0.5)を重ねて画像を暗くする */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), 
        url("../img/pal01inner.webp");
    
    color: #ffffff; /* 文字を白にする */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* 影をより濃くする */
    background-size: cover;        /* 枠に合わせて画像をフィット */
    background-position: center;
    background-repeat: no-repeat;  /* ★画像が繰り返されるのを防ぐ */
    text-align: center;
    padding: 200px 20px;          /* 背景を見せるために上下の余白は必須 */
}

/* 3. 見出し */
.pal01 h2 {
    margin-bottom: 25px;
    display: inline-block;
}

/* パラジウム宣伝文の調整 */
 .paltxt01 {
    display: block;
    /* 1200pxいっぱいではなく、800pxくらいに絞る */
    max-width: 800px;  
    margin: 0 auto 1em; /* 上0、左右auto、下1emに集約 */
    text-align: left;   /* 中の文字だけを左寄せにする */
    text-indent: 0;      /* 1行目の字下げを強制解除 */
    line-height: 2.0;   /* bodyの設定を維持 */
}
.space {
    display: block;   /* ブロック要素にして1行占有させる */
    margin-top: 1.5em; /* ここで1行分の空白を調整 */
    content: "";      /* 空でも表示させるためのおまじない */
}


/* Service&Repairサービス＆修理など */
/* セクション全体 */
/* 1. 背景色エリア（画面いっぱい） */
.sr01 {
    width: 100%;
    padding: 60px 0 2px;
    margin-bottom: var(--section-margin); /* 160pxの代わりに変数を使う */
    background-color: var(--sub-bg-grey);
}

/* 上段見出しエリア */
.subsr01 {
    max-width: 1200px;
    margin: 0 auto 36px; /* 箱自体を中央寄せ */
    text-align: center;   /* ★箱の中身（h2）を中央寄せ */
    width: 100%;
}

/* もしh2に個別の設定が残っている場合 */
.subsr01 h2 {
    display: inline-block; /* 文字の幅に合わせる */
    margin: 0 auto;        /* 念のため左右中央 */
    /* font-sizeやcolorは以前のままでOK */
}

/* 3. コンテンツエリア（1200px中央寄せ & 4:6の横並び） */
.subsr02 {
    display: flex;
    align-items: stretch; /* 左右の高さを揃える */
    max-width: 1200px;    /* ここで幅を制限 */
    margin: 0 auto;       /* 中央寄せ */
    width: 100%;
}

/* 4. 左側（40%） */
.srart {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 上下中央 */
    padding: 30px;
    box-sizing: border-box;
}

/* 5. 右側（60%） */
.srimg {
    flex: 0 0 60%;
}
.srart h3 {
font-size: 16px;
font-family: var(--font-serif);
font-weight: 700;    
}

.srimg a {
    display: flex;
    width: 100%;
    height: 100%;
}
.srimg img {
    width: 50%;
    height: auto;
    min-height: 100%;  /* 左の文章の長さに高さを合わせる */
    object-fit: cover; /* 画像の比率を守りつつ枠を埋める */
    display: block;
    /* 上品な影を微かに追加 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border-radius: 1px;
}

/* 他の箇所のボタンが左に寄るのを防ぐため、このセクション内のボタンだけを中央寄せにする */
.srart .btn-readmore {
    margin: 36px auto 0 ; /* 左右autoでこの枠内だけで中央寄せ */
    display: table;      /* 幅を中身に合わせつつ中央寄せを有効にする */
}
.srlink {
    text-align: left;    /* 文書は左揃え */
    width: 100%;
    margin-bottom: 30px; /* ボタンとの適切な間隔 */
}
.srlink p {
    line-height: 1.8;
    margin: 0;
}


/* ESTALIS銀座店の情報と店内写真など */
/* 親要素：1200pxの箱を画面中央に配置 */
.accsess {
    width: 100%;           /* 基本は100% */
    max-width: 1200px;     /* 最大でも1200pxまで */
    margin: 0 auto 160px; 
    box-sizing: border-box;
    display: block;
}

/* タイトルを包む一番大きな箱 */
.ac01 {
    width: 100%;           /* 1200pxの親要素いっぱいに広げる */
    text-align: center;    /* ★重要：中身のテキストを一括で中央寄せ */
    margin: 0 auto 0px;
    display: block;
}

/* 「ESTALIS」「OFFICIAL STORE」の文字 */
.ac01 h2 {
    width: 100%;           /* 文字の入る「箱」を横幅いっぱいにする */
    text-align: center;    /* ★重要：その箱の中で文字を真ん中に置く */
    margin: 10px 0;
    display: block;        /* 確実に一行を占有させる */
    line-height: 100%;
    font-size: 32px;
    letter-spacing: 0.2em;
}

/* 「銀座店」の文字 */
.ac01 h4 {
    width: 100%;           /* 横幅いっぱいにする */
    text-align: center;    /* ★重要：真ん中に置く */
    margin: 10px 0 10px;
    font-weight: normal;
    display: block;
}

/* すでに成功しているブルーグレーの線（そのまま） */
.stline {
    width: 180px;
    height: 1px;
    background-color: var(--accent-blue);
    margin: 5px auto;     /* 左右autoで中央寄せ */
}
/* 画像とテキストを横に並べる親要素 */
/* .shop {
    display: flex;
    width: 100%;
}
/* 店舗セクション全体 */
/* .shop .inner {
    display: flex;
    width: 100%;           /* 親の1200pxに合わせる */
    /* margin: 0 auto; */
    /* justify-content: space-between;
    align-items: flex-start;
    gap: 24px; */
/*} */
.shop-flex-container {
    display: flex;
    gap: 40px;
    width: 100%;
}
/* 左側の画像ボックス */
.shopfoto {
    flex: 0 0 50%;           /* 1200pxの50%分を確保 */
    align-items: flex-start; /* ★ center ではなく flex-start にして上部固定にします */
    padding-top: 40px;      /* 40px分、画像が下に下がります */  
    box-sizing: border-box; /* paddingを幅に含める設定 */
} 
/* 画像自体の設定：画質を維持 */
.shopfoto img {
    max-width: 100%;        /* 倍率は変えない（100%のまま） */
    height: auto;
    display: block;
    border: 1px solid #eee; /* 薄い枠線を入れると、背景グレーの境界 */
}
/* テキスト側の枠 */
.info {
    flex: 1;                 /* 残りのスペース（50%弱）を使う */
    padding: 2px; 
}
/* STORE INFO の見出し */
.info01 {
    color: #ff8c00;
    font-weight: normal;
    margin-bottom: 20px;
    text-align: left;
}

/* 住所や交通のリストを包む箱 */
.info02 {
    display: block;
    width: 100%;
}
/* 住所、TEL、交通などの「1行分」の設定 */
.info-row {
    display: flex;
    margin-bottom: 10px;
    align-items: flex-start; /* 複数行になっても上揃え */
    /* border-bottom: 1px solid #eee; 薄い線を入れると整理されます */
    padding-bottom: 0;
}

/* 「住所」「交通」などのラベル（左側） */
.info-row dt {
    width: auto;
    flex-shrink: 0;
    width: 5em; 
    flex-shrink: 0;
    margin: 0;
    /* 右側に10pxの間隔を空ける */
    margin-right: 10px; 
}

/* 実際の住所や長い交通説明（右側） */
.info-row dd {
    margin: 0;
    flex: 1;
    /* 長い英単語やURLなどが枠を突き破るのを防ぐ */
    word-break: break-all; 
}

/* Ｇｏｏｇｌｅ地図 */
/* 1. セクション全体の余白設定 */
.map-sec {
    width: 100%;
    height: auto;
    margin-bottom: var(--section-margin); /* 160pxの代わりに変数を使う */ /* 他のセクションと間隔を統一 */
    padding: 0 20px;      /* スマホ時に地図が画面端に張り付かないよう左右に余白 */
    box-sizing: border-box;
}

/* 2. 地図の最大幅を1200pxに制限して中央に寄せる */
.map-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* 3. レスポンシブ対応（地図の縦横比を16:9で維持する） */
.map-wrapper {
    position: relative;
    width: 100%;
    /* 比率を「16:9」から「3:2」くらいにすると、少し高さが抑えられます */
    padding-top: 57%; /* 少し平べったく */
    overflow: hidden;
    /* 角を少し丸める（ジュエリーブランドらしい柔らかさ） */
    border-radius: 4px;
    /* 軽い影をつけて地図を際立たせる（お好みで） */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee; /* 薄い枠線を入れると、背景グレーの境界 */
}

/* 4. iframeを枠いっぱいに広げる強制設定 */
.map-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
}

/* ここからトップページのフッター */
/* 1. フッター全体の背景色と高さ調整 */
/* 1. リンクボタン：paddingを元の数値に戻し、間隔を詰め直す */
.footer-links a {
    text-decoration: none;
    font-size: 12px;
    color:var(--bg-color);
    padding: 0;
    transition: all 0.4s ease;
    display: inline-block;
}

/* 2. ホバー時：光の広がりを半分（文字の発光のみ）に抑える */
.footer-links a:hover {
    color: #fff;            /* 文字を純白に */
    /* 文字自体の発光（ぼかし範囲を半分以下に抑えた繊細な光） */
    text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.8); 
    filter: brightness(1.2); 
    opacity: 1; 
    /* 背景のボカシや拡大（transform）は削除して静かな演出に */
    background: transparent; 
    transform: translateY(-3px); /* わずかに浮く動作で「誠実な反応」を表現 */
}
/* 3. ボタン同士の並び（2行のバランス）を調整 */
.footer-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px;

    /* ★もともとの大切な設定を維持 */
    gap: 6px 36px;
    margin: 0 auto 24px;

    /* ★ここが魔法の2行：自分だけを上に10px〜20px引き上げる */
    position: relative;
    top: -15px; /* この数値で「リンク集だけ」の上下位置を微調整してください */
}

/* SNSアイコンエリアのスタイル */
.footer-sns {
    display: flex;
    justify-content: center;
    gap: 35px;
    margin-bottom: 26px;
}
/* アイコンの反転設定（黒い画像を白く見せる） */
.footer-sns img {
    width: 100%;
    filter: brightness(0) invert(1); /* 黒いXのロゴもこれで自動的に白く */
}
/* 1. すべてのアイコンの土台を16pxに統一 */
.footer-sns a {
    display: inline-block; /* 横に並べる場合 */
    width: 18px;           /* ここで全体のサイズを小さく規定 */
    height: 18px;
    transition: all 0.4s ease;
    opacity: 0.7;
}

/* 2. 中の画像の設定（24px指定を上書きして16pxの枠に収める） */
.footer-sns .icon-size {
    width: 100%;           /* 親の16pxいっぱいに広げる */
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1); /* 白くする */
}

/* 3. 【重要】小さく見えるYouTubeだけを「枠より大きく」表示させる */
.footer-sns a[href*="youtube"] .icon-size {
    transform: scale(1.4);  /* 1.4倍など、他のアイコンと見た目が揃うまで大きく */
    transform-origin: center;
}

/* 4. ホバーで光らせる */
.footer-sns a:hover {
    opacity: 1;
    transform: translateY(-3px); /* 少し上に浮く演出 */
    filter: brightness(1.2); 
}

.footer-sns a:hover .icon-size {
    filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(209, 177, 121, 0.8));
}

/* TOPへ戻る（イラストの調整） */
.back-to-top {
    position: fixed;    /* ★これでスクロールしても「その場」に固定されます */
    right: 18px;        
    bottom: 50px;       
    z-index: 9999;      /* 地図や他の要素よりも常に手前に表示 */
    line-height: 0;     /* 画像の下の余計な隙間を消す */
}
.back-to-top img {
    width: 36px;        /* ロゴのサイズ（適宜調整してください） */
    height: auto;
    display: block;
    opacity: 0.8;       /* 常に表示されるので、少し透かすと上品です */
    transition: all 0.3s ease;
}
.back-to-top a:hover img {
    opacity: 1.0;       /* ホバーした時だけくっきりさせる */
    transform: translateY(-5px); /* 少し上に浮く演出 */
}
.back-to-top a {
    display: block;
    text-decoration: none;
}

/* 横幅いっぱいの細い横線 */
.footer-line {
    width: 100%; /* ★横幅いっぱい */
    border: 0;
    border-top: 1px solid rgba(255, 253, 247, 0.15); /* 線をさらに細く繊細に */
    margin: auto 0;
}
/* 1. フッター本体：高さを「最低200px」にしつつ、中身に合わせる設定 */
.site-footer {
    background-color: var(--accent-blue);
    min-height: 200px;      /* ★高さを「最低」保証して消えるのを防ぐ */
    height: auto;           
    width: 100%;
    display: flex;          /* ★中身を縦に並べる */
    flex-direction: column;
    justify-content: space-between; /* 上下に振り分けて隙間を作らせない */
    padding: 40px 0 0;      
    margin: 0;
    overflow: hidden;       /* ★はみ出しによるバグを防ぐ */
}

/* 2. インナー：ナビやSNSを包むエリア */
.footer-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    flex-grow: 1;           /* ★余ったスペースを埋める */
}

/* コピーライト（10px・センタリング） */
.copyright {
    font-size: 10px;
    line-height: 1;      /* 1. 文字自体の上下の空きを0にする */
    padding: 6px 0;      /* 2. ここを 5px〜7px の間で削れば 1px 単位で調整可能 */
    margin: 0 !important; /* 3. ブラウザ固有のマージンを強制的に消去 */
    
    /* デザイン要素（変更なし） */
    color: var(--bg-color);
    text-align: center;
    opacity: 0.6;
    letter-spacing: 0.1em;
    display: block;
}
/* 4. ゴールドバー：footerタグの最下部にピタッとつける */
.footer-gold-bar {
    width: 100%;
    height: 15px;
    background-color: var(--main-gold);
    display: block;         /* ★ブロック要素にして隙間を排除 */
    margin: 0;
    padding: 0;
}

/* =============================================
   Aboutページ専用スタイル
   ============================================= */
/* Aboutページ全体をSnowカラーにする場合 */
body.about-body {
    background-color: var(--bg-color) !important;
}

/* --- 背景色の統一：個別の指定を消してbodyに合わせる --- */
.about-page {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 80px !important;
    box-sizing: border-box;
    display: block; /* 念のため */
}
/* ヒーローセクション（見出しとメイン画像）の調整 */
.about-page .hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--section-margin); /* 160pxの代わりに変数を使う */}


/* テキストを包む箱を100%にする */
.about-page .hero-text {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.about-page .hero-text h1 {
    font-family: "Cormorant Garamond", "Noto Serif JP", serif;
    font-weight: 200;
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-align: center; /* 追加 */
}

.about-page .hero-text p {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2em;
    opacity: 0.8;
    /* 強制中央揃え */
    width: 100% !important;
    text-align: center !important;
}

/* ゴールドの見出しを確実に見せる */
.about-page .hero-text h1 {
    color: var(--main-gold) !important;
    font-size: 48px !important;
    margin-top: 0 !important; /* paddingで下げたのでmarginは不要 */
    margin-bottom: 10px !important;
    display: block !important;
    visibility: visible !important;
}

/* サブテキスト（和文）の中央揃えと色 */
.about-page .hero-text p {
    color: var(--main-gold) !important;
    text-align: center !important;
    margin: 0 auto 40px !important;
    font-weight: 700;
    letter-spacing: 0.2em;
    display: block !important;
}

.about-page .hero-image {
    width: 100%;
    margin-bottom: 50px;
}

.about-page .hero-image img {
    width: 100%;
    height: auto;
    max-height: 550px;
    object-fit: cover;
    display: block;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

/* 金色の細い横線 */
.about-page .section-line {
    width: 45px;
    height: 1px;
    background-color: var(--main-gold);
    margin-bottom: 10px;
}

/* セクションの見出し：ガタつき防止のため和欧共通フォントへ */
.about-page .text-content h2 {
    /* フォントを和文(Noto Serif JP)に統一し、重心を一定にする */
    font-family: "Noto Serif JP", serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.1em;
    color: var(--accent-blue);
    margin-bottom: 30px;
    display: block; /* flexを解除し、自然な文字並びにする */
}
/* 数字部分のガタつき調整（フォント統一で解消） */
.about-page .text-content h2 .num {
    font-family: inherit; /* 親と同じ Noto Serif JP を使用 */
    color: var(--main-gold);
    margin-right: 10px;
}

/* --- レイアウト：画像6 : テキスト4 の比率で上下中央揃え --- */
.about-page .content-block {
    display: flex;
    /* これで画像とテキストの「中心線」が水平に揃います */
    align-items: center;
    justify-content: space-between;
    
    margin-bottom: 0 !important;      /* 外側の余白をゼロにする */
    padding-bottom: 160px !important; /* 内側の余白で160pxを「予約」する */
    width: 100%;
    /* box-sizing: border-box; */
    gap: 50px;
}

.about-page .content-block.reverse {  
    flex-direction: row-reverse;
}

/* 画像側（6割） */
.about-page .image-content {
    flex: 6;
    display: flex;            /* 中身の配置を制御 */
    align-items: center;
}

/* テキスト側（4割） */
.about-page .text-content {
    flex: 4;
    display: flex;            /* 中身を縦方向に並べて中央に寄せる準備 */
    flex-direction: column;
    justify-content: center;  /* テキストが画像に対して上下中央に配置されます */
}

/* 画像自体の設定 */
.about-page .image-content img {
    width: 100%;
    height: auto;
    display: block;
}

.about-page .image-content img {
    width: 100%;
    height: auto;
    display: block;
    /* 水平0 垂直15px ぼかし30px 
       色は黒(#000)の透明度5%(0.05) 
       → これにより「影」というより「空気感」に近い上品な浮き上がりになります */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
    /* 念のため角をほんの少し（1px）だけ丸めると、さらに柔らかい印象になります */
    border-radius: 1px;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
/* 本文 */
.about-page .text-content p {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 2.0;
    letter-spacing: 0.05em;
    color: var(--accent-blue);
    text-align: justify;
    margin-bottom: 24px;
}

/* Aboutページ専用のCTA：背景を全幅にする */
.about-cta {
    width: 100%;                  /* 画面横幅いっぱい */
    height: 300px;
    background-color: var(--sub-bg-grey); /* このページだけの色 */  
    padding-top: 0 !important;

}

/* 中身だけを1200pxの中央に寄せる */
.about-cta .cta-inner {
    max-width: 1200px;
    display: contents;
    text-align: center;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.cta-section {
    width: 100%; /* 全幅 */
    background-color: var(--sub-bg-grey);
    font-family: var(--font-serif);
}

.about-cta .cta-text {  
    /* block要素であることを保証し、中身を中央に寄せる */
    display: block;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.2em;
    margin-top: 0 !important;   /* 上マージンを完全除去 */
    padding-top: 52px;          /* ここで「自分の好きな隙間」を再定義する */
    line-height: 1.7;           /* 行間が広すぎると上に隙間が見えるので一旦詰める */
}

/* 中のPタグ：ブラウザの標準マージンを殺す */
.about-cta .cta-text p {
    margin-bottom: 30px;
    padding-top: 0 !important;
    display: inline-block; /* 文字の長さ分だけ背景を持たせ、親のcenterに従わせる */
    text-align: left;      /* 複数行になった時に左揃えにしたい場合はここをleftに */
}
.cta-btn-reserv {
    letter-spacing: 0.1em;
    line-height: 1.0;
    margin: 0 auto 30px;    
}
/* .cta-section にある .btn-reservation だけを対象にする */
.cta-section .btn-reservation {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 14px 18px;
    background-color: var(--main-gold);
    color: #fff;             /* 文字色を白に（リンク色を上書き） */
    text-decoration: none;
    border-radius: 2px;      /* 少し角を丸める */
    transition: all 0.3s ease;
    text-align: center;
}

.cta-section .btn-reservationn:hover {
   /* 1. 明るさを上げる（1.0が通常、1.2で20%明るく） */
    filter: brightness(1.2);   
    /* 2. 少し上に浮かせる（-3pxほど上に移動） */
    transform: translateY(-3px); 
    /* 3. 影を少し強くして「浮いた感」を出す */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    /* 4. 透明度は1（不透明）に戻しておくのが明るく見せるコツ */
    opacity: 1; 
}

/* ============================================================
   PALLADIUM STORY - CUSTOM STYLES
   ============================================================ */

   .p-story-long {
    overflow: hidden;
    background-color: var(--bg-color); /* Snowl */
    color: var(--accent-blue);
    font-family: var(--font-sans);
}

.p-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 120px 0;
}

.p-inner {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* タイポグラフィ：日本語の美しさを優先したサイズ調整 */
.p-final-copy {
    font-family: var(--font-serif);
    font-size: 64px !important; /* でかすぎず、品格のあるサイズ */
    font-weight: 200;
    line-height: 1.3;
    letter-spacing: 0.05em;
    color: var(--accent-blue);
}

.p-sec-title {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 24px;
    letter-spacing: 0.1em;
}

.p-text {
    font-size: 14px;
    line-height: 2.2;
    opacity: 0.85;
}

/* --- SECTION 01: FV (スプリット背景) --- */
.p-fv { height: 100vh; padding: 0; }

.p-ore-visual img {
    width: 100%;
    height: auto;
}
/* --- PALLADIUM FV 決定版 --- */
.p-section.p-fv {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* 背景スプリット比率 4:6 */
.p-split-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1;
}
.p-bg-blue { flex: 4; background-color: var(--accent-blue); } /* 左 4割 */
.p-bg-snow { flex: 6; background-color: var(--bg-color); }     /* 右 6割 */

.p-fv-layout {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    align-items: center; /* これでPdとテキストが上下中央に揃います */
}

/* 元素記号 Pd：巨大サイズ・透過を抑え、上下中央に */
.p-atomic-group {
    position: absolute;
    left: 8%; /* ブルー背景側の適切な位置 */
    /* 上下中央は親要素の align-items:center で制御されますが、
       念のため position: absolute の場合は top: 50% を使用 */
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 5;
}
.p-atomic-symbol {
    font-family: var(--font-serif);
    font-size: 280px; /* 元の巨大なインパクト */
    color: rgba(255, 255, 255, 0.2); /* 透過しすぎない濃さ */
    line-height: 0.8;
}
.p-atomic-label {
    display: block;
    font-size: 14px;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.4);
    margin-top: -10px;
}

/* 原石：さらに小さく、境界線（40%の位置）の中央へ */
.p-ore-visual {
    position: absolute;
    top: 50%;
    left: 42%; /* 4:6の境界線 */
    transform: translate(-50%, -50%);
    width: 240px; /* 希少性を感じさせる小ささ */
    z-index: 15;
}

/* メインテキスト：右側 6割の白いエリアへ */
.p-fv-text {
    margin-left: 52%; /* 境界線より少し右から開始 */
    max-width: 500px;
}

.p-main-title {
    color: var(--accent-blue);
    font-size: 52px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.p-lead {
    color: var(--main-gold);
    font-size: 18px;
    letter-spacing: 0.1em;
}


/* --- SECTION 02: LIGHTNESS (浮遊感) --- */
.p-lightness { 
    position: relative;
    overflow: hidden; 
    padding: 100px 0; /* 上下の余白を詰めて密度を上げる */
}

.p-lightness { 
    position: relative;
    overflow: hidden; 
    padding: 60px 0; /* 上下の余白を詰めて密度を上げる */
}

/* 巨大な数字背景 (透過Gold) */
.p-bg-num-layer {
    /* 1. 配置の基点を完全にリセット */
    position: absolute;
    top: auto !important;   /* 上からの自動配置を解除 */
    bottom: 20% !important; /* 下端から少しはみ出す位置に強制固定 */
    left: 5% !important;
    
    /* 2. 中央寄せの命令をすべて無効化 */
    transform: none !important; 
    display: block !important;

    /* 3. デザイン要素（サイズや色） */
    font-family:var(--font-sans);
    font-size: 27vw;
    /* opacity: 0.3; */
    color: color-mix(in srgb, var(--main-gold), transparent 85%);
    line-height: 0.8; /* 巨大数字とその上の「比重・・・」の行間 */
    z-index: 1;
    pointer-events: none; 
    /* 念のため縦書き設定を解除 */
    writing-mode: horizontal-tb !important;
}

.p-num-note {
    display: block;
    font-size: 14px;
    font-family: var(--font-sans);
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    color: var(--main-gold); /* 透過なしの濃いゴールド（またはお好みの濃い色） */
    opacity: 1 !important; /* 100%表示 */
}

/* 親要素：高さを固定せず、中身（リングや文字）に合わせる */
.p-couple-rings { 
    position: relative;
    height: auto;      /* 固定値を解除 */
    min-height: 600px; /* 最低限の高さだけ確保 */
    margin: 0 auto;
}

/* リングの配置：高さを低くした分、位置を中央へ寄せる */
.p-ring-man {
    position: absolute; 
    top: 10%; /* 20%から引き上げ */
    left: 15%;
    width: 280px; /* 少しサイズを絞って密度を出す */
    z-index: 10;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));
}
.p-ring-woman {
    position: absolute; 
    bottom: 5%; /* 枠からはみ出しすぎないよう調整 */
    right: 18%;
    width: 360px; 
    z-index: 15;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,0.15));
}

.p-spec-text-box {
    position: absolute; 
    bottom: 56%; /* 配置を調整 */
    left: 8%;
    max-width: 420px;
    z-index: 20;
}

.p-sec-title {
    font-family: var(--font-serif);
    font-size: 32px;
    color: var(--main-gold); /* ゴールドに変更 */
    margin-bottom: 20px;
    letter-spacing: 0.15em;
}

.p-spec-desc {
    color: var(--accent-blue);
    line-height: 1.8;
    font-size: 15px;
}


/* --- SECTION 03: HARDNESS (重厚感) --- */
.p-hardness { color: var(--bg-color); }

.p-hardness-bg {
    position: absolute; inset: 0;
    background-image: url('../img/palladium-hardness.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
    filter: brightness(0.5); /* 文字の可読性向上 */
}
.p-spec-num-white {
    font-family: var(--font-serif);
    font-size: 140px;
    color: var(--main-gold);
    line-height: 1;
    margin-bottom: 30px;
    letter-spacing: 0.05em;
}
.p-spec-num-white span {
    font-size: 1.5rem; /* 注釈も少し大きく */
    letter-spacing: 0.3em;
}

/* --- SECTION 04: WHITENESS (境界線ぼかし) --- */
.p-whiteness-text {
    position: relative;
    z-index: 20;
    /* 1. 幅を広げて一行に収める（500pxから800px程度へ） */
    max-width: 800px; 
    margin-bottom: 40px;
}

.p-whiteness .p-sec-title {
    font-family: var(--font-serif);
    font-size: 48px;
    color: var(--main-gold);
    letter-spacing: 0.2em;    /* 文字の間隔を広げて高級感を出す */
    
    /* 2. 強制的に改行させない命令（念のため追加） */
    white-space: nowrap; 
    
    margin-bottom: 20px;
}

.p-whiteness .p-text {
    color: var(--accent-blue);
    line-height: 2.0;
    font-size: 15px;
    max-width: 600px; /* 本文は読みやすい幅に抑える */
}

/* リング画像の配置（重なりを避ける） */
.p-final-ring-wrap {
    margin-top: -20px; /* 見出しを広げた分、画像との距離を調整 */
}


.p-final-visual-layout { display: flex; align-items: center; justify-content: space-between; }

.p-final-ring-wrap {
    flex: 1.2; text-align: right;
    position: relative;
}
/* 画像の境界線をぼかすフォロー */
.p-final-ring-wrap::after {
    content: ""; position: absolute; inset: 0;
    box-shadow: inset 0 0 60px 40px var(--bg-color);
    pointer-events: none;
}
.p-final-ring-wrap img { max-width: 550px; width: 100%; }

/* --- FINAL CTA: 最終セクション --- */
.p-final-cta {
    padding: 80px 0 120px;
    background-color: var(--accent-blue);
    color: var(--bg-color);
    /* text-align: center; を解除（コピーを右に寄せるため） */
    text-align: left; 
    position: relative;
    border-bottom: 1px solid rgba(184, 156, 106, 0.4); 
    text-align: center; /* 全体はセンターのまま維持 */
}

/* 1. 「賢い選択は、いつも美しい。」：文字をやや小さくし、中央 */
.p-final-cta .p-final-copy {
    display: block;
    color: var(--bg-color);
    
    /* フォントサイズを強制的に小さく (共通設定を上書き) */
    font-size: 32px !important; 
    letter-spacing: 0.3em;
    opacity: 0.7;
    
    /* 配置の調整：中央から少し左へ */
    width: fit-content;
    /*margin-left: 20%;    /*左から20%の位置（＝中央より左寄り） */
    margin: auto;
    text-align: center;    /* 文字自体は左揃え */
    
    margin-bottom: 50px;
}

/* 2. ボタンは中央を維持 */
.p-btn-gold {
    /* marginをリセットしてinline-blockのセンター寄せに従う */
    margin: 0 auto; 
    display: inline-block;
    line-height: 1;
    padding: 10px 18px;
    border: 1px solid var(--main-gold);
    color: var(--main-gold);
    text-decoration: none;
    letter-spacing: 0.3em;
    font-size: 14px;
    transition: 0.4s ease;
    box-shadow: 0 0 1px 1px rgba(78, 74, 7, 0.3);
    transition: opacity 0.3s ease, transform 0.4s ease;
}

.p-btn-gold:hover { 
    background: var(--main-gold); 
    color: var(--bg-color); 
    transform: translateY(-2px); /* わずかに浮く動作で「誠実な反応」を表現 */
    opacity: 0.8;
}

/* 金のドット（位置微調整） */
.p-final-cta::after {
    content: "";
    position: absolute;
    bottom: -2px; /* 境界線上に密着させる */
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background-color: var(--main-gold);
    border-radius: 50%;
    z-index: 20;
}

/* =============================================
   LOCATIONページ専用スタイル
   ============================================= */
.locations-page {
    position: relative;
    padding-top: 60px;
    padding-bottom: 60px;
    overflow-x: hidden;
}

/* 背景：巨大タイポグラフィ（固定表示） */
.bg-locations-visual {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    font-size: 25vw;
    color: var(--sub-bg-grey);
    opacity: 0.40;
    z-index: -1;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.05em;
}

/* ヒーローエリア：左15%のマージンを確保 */
.locations-hero {
    text-align: left;
    margin-left: 15%;
    margin-bottom: 60px;
}

.page-title {
    margin-top: 0;
    margin-bottom: 30px;
    font-family: "Cormorant Garamond", "Noto Serif JP", serif;
    font-size: 48px;
    font-weight: 200;
    line-height: 1.2;
    letter-spacing: 0.15em;
    color: var(--main-gold);
    /* margin: 40px 0 15px; */
    text-align: center;
}

.lead-text {
    line-height: 2.2;
    color: var(--accent-blue);
    text-align: center;
}

/* 店舗リストエリア */
.location-list-wrapper {
    margin-left: 15%;
    margin-bottom: 80px;
}

.area-group {
    display: flex;
    margin-bottom: 30px;
    align-items: stretch;
}

/* 垂直ラベル：幅100pxで完全固定 */
.area-vertical-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-serif);
    font-size: 24px;
    color: var(--main-gold);
    letter-spacing: 0.2em;
    border-right: 1px solid var(--sub-bg-grey);
    
    /* 水平ライン統一のための絶対固定 */
    width: 100px; 
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 50px;
    padding: 20px 0;
    white-space: nowrap;
}

/* リスト部分 */
.shop-item-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    max-width: 750px;
}

.shop-item-list li {
    border-bottom: 1px solid var(--sub-bg-grey);
    transition: border-color 0.4s ease;
}

.shop-item-list a {
    display: block;
    text-decoration: none;
    color: var(--accent-blue);
    padding: 15px 0;
    font-size: 16px;
    transition: all 0.4s ease;
}

/* ホバーアクション：右スライドと色変化 */
.shop-item-list a:hover {
    color: var(--main-gold);
    padding-left: 20px;
}

.shop-item-list li:hover {
    border-bottom-color: var(--main-gold);
}

.city {
    font-family: var(--font-serif);
    font-size: 13px;
    color: var(--main-gold);
    margin-right: 25px;
    display: inline-block;
    width: 80px;
}

/* 下部導線セクション全体の調整 */
.locations-to-ginza {
    text-align: center;
    padding: 100px 0; /* 上下の余白を均等に */
    border-top: 1px solid var(--sub-bg-grey);
    background-color: var(--bg-color); /* Snow背景を再確認 */
}

/* テキストとボタンを包むコンテナ */
.cta-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* これでボタンもテキストも完全に中央へ */
}

/* リード文の調整 */
.cta-lead {
    line-height: 2.2;
    color: var(--accent-blue);
    margin-bottom: 40px; /* ボタンとの距離を「40px」に凝縮 */
    text-align: center;
}

/* このページ独自のボタン調整（共通の120pxを上書き） */
.btn-readmore.location-special-btn {
    margin-top: 0 !important;    /* 上の120pxをリセット */
    margin-bottom: 0 !important; /* 下の120pxをリセット */
    display: inline-block;
    /* ボタン自体の装飾は共通クラスを継承 */
}

/* =============================================
   Policy ページ専用スタイル
   ============================================= */
.policy-container {
    max-width: 800px;
    margin: 0 auto 120px; 
    padding: 0 30px 0;
    border-top: 2px solid var(--sub-bg-grey);
    width: 100%;
    box-sizing: border-box;
}

.policy-content {
    /* 本文は読みやすさ優先で Noto Sans JP。行間を 1.6 に凝縮 */
    font-family: var(--font-sans);
    color: var(--accent-blue);
    line-height: 1.6;
    letter-spacing: 0.03em;
    margin: 60px auto 120px;
}

/* 大見出し：欧文はブランドフォント、下に日本語を添える構造 */
.policy-title-group {
    margin-bottom: 20px;
    border-bottom: 1px solid var(--sub-bg-grey);
    padding-bottom: 20px;
    text-align: center;
    ;
}

.policy-title-group h1 {
    /* 共通の 90px を 48px に抑え、数字の段差がない Noto Sans も予備に指定 */
    font-family: "Cormorant Garamond", "Noto Sans JP", serif;
    font-size: 48px;
    color: var(--main-gold);
    margin: 0;
    font-weight: 200;
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-align: center;
}

.policy-title-group span {
    display: block;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--accent-blue);
    margin-top: 5px;
    letter-spacing: 0.2em;
}

.policy-content h2 {
    /* 数字の読みやすさのため Noto Sans JP を適用 */
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 700;
    margin-top: 40px;
    margin-bottom: 15px;
    color: var(--accent-blue);
    border-left: 3px solid var(--main-gold);
    padding-left: 12px;
}

.policy-content p, 
.policy-content li {
    margin-bottom: 15px;
}

.policy-content ul {
    margin-bottom: 25px;
    padding-left: 1.2em;
}

.contact-box {
    border: 2px solid var(--sub-bg-grey);
    padding: 30px;
    margin-top: 50px;
}

.date-archived {
    text-align: left;
    margin-top: 20px;
    margin-left: 40px;   
}

/* =============================================
   Supportページ専用スタイル
   ============================================= */

.support-hero {
    display: block !important;
    width: 100%;
    text-align: center; /* 子要素すべてを中央に */
    background-color: var(--bg-color);
    padding-bottom: 100px;
}

/* 1段目：文字エリア（中央寄せの徹底） */
.hero-top-text {
    width: 100%;
    padding: 80px 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center; /* 左右中央 */
    justify-content: center;
}

.support-hero h1.custom-text {
    font-family: "Cormorant Garamond", "Noto Serif JP", serif;
    font-size: 48px;
    font-weight: 200;
    line-height: 1.2;
    letter-spacing: 0.15em;
    color: var(--main-gold);
    margin: 0;
    text-align: center;
    width: 100%;
}

.support-hero .jp-title {
    display: block;
    font-size: 14px;
    letter-spacing: 0.3em;
    margin-top: -2px;
    color: var(--main-gold); /* ゴールドに統一 */
    text-align: center;
    width: 100%;
}

/* 2段目：画像エリア（横幅を広げる） */
.hero-main-visual {
    display: block;
    width: 100%; /* 横幅いっぱい、または指定pxまで広げる */
    max-width: 1100px; /* 前の800pxから大幅に拡大 */
    height: 500px;
    margin: 0 auto;
    background: url('../img/support-hero-bg.webp') no-repeat center/cover;
    opacity: 0.7;  /* 30%まで薄くしてSnowに溶け込ませる */
    filter: blur(1px); /* ボカして「光の質感」に変える */
}

/* 3段目：テキストエリア（重なり） */
.hero-bottom-box-wrapper {
    display: block;
    position: relative;
    z-index: 10;
    margin-top: -120px; /* 下から重なり */
}

/* 白いテキストボックス（横幅を狭く、paddingと行間を広く） */
.hero-content-box {
    display: inline-block;
    background-color: var(--bg-color);
    padding: 60px 70px; /* 上下左右の余白を大きく（文字エリアを狭く見せる） */
    max-width: 800px;    /* 枠自体の最大幅を少し絞る */
    /* width: 85%; */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    box-sizing: border-box;
}

.support-hero .lead-text {
    font-size: 14px;
    line-height: 2.5; /* 行間をさらに広く */
    letter-spacing: 0.2em;
    text-align: center;
    color: var(--accent-blue);
    margin: 0;
}

/* 3枚のアップ画像ビジュアル */
.visual-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 100px 0;

}

.visual-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    filter: brightness(1.05) contrast(0.9); /* 清潔感を出すための明るさ調整 */
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

/* 5つのサービスリスト */
.service-list {
    max-width: 800px; /* 画面中央に収める */
    margin: 0 auto 100px;
    border-top: 2px solid var(--sub-bg-grey);
}

.service-card {
    display: flex;       /* 横並びを再定義 */
    align-items: center; /* アイコンとテキストの高さを中央で揃える */
    padding: 40px 0;     /* 上下の余白を固定 */
    border-bottom: 1px solid var(--sub-bg-grey);
    width: 100%;
    box-sizing: border-box;
}

.service-icon {
    width: 80px;         /* アイコンの「幅」を強制固定 */
    height: 80px;        /* アイコンの「高さ」を強制固定 */
    margin-right: 40px;
    flex-shrink: 0;      /* 絶対に潰さない */
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon img, 
.service-icon svg {      /* どちらが入っても枠内に収める設定 */
    width: 100% !important;
    height: auto !important;
    max-height: 80px;
    object-fit: contain;
}

.service-info {
    flex: 1;             /* 残りの幅をすべて使う */
}

.service-info h2 {
    font-family: "Cormorant Garamond", "Noto Serif JP", serif;
    font-size: 19px;
    font-weight: 600;
    /* color: var(--main-gold); */
    color: #8E744A;
    margin-bottom: 15px;
    /* 数字の形状を「高さの揃った形」に固定 */
    font-feature-settings: "pnum" 1, "lnum" 1; 
    letter-spacing: 0.1em;
    /* 重心を微調整 */
    display: flex;
    align-items: center;
}

.service-info p {
    font-size: 14px;
    line-height: 1.6;    /* 行間を詰めて間延びを防止 */
    margin: 0;
    color: var(--accent-blue);
}

/* 詳細規定テーブル */
.policy-jump-link {
    text-align: center;
    margin-bottom: 100px;
}

.link-text {
    color: var(--accent-blue);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid var(--accent-blue);
    padding-bottom: 5px;
}

.warranty-table-section {
    margin: 100px auto;
    padding-top: 60px;
    border-top: 1px solid var(--sub-bg-grey);
}

.table-title {
    font-size: 20px;
    text-align: center;
    margin-bottom: 30px;
}

.warranty-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

/* .warranty-table th {
    text-align: center;
} */

.warranty-table th, .warranty-table td {
    border: 1px solid var(--accent-blue);
    padding: 20px;
}

.warranty-table th {
    background-color: var(--sub-bg-grey);
    width: 25%;
    text-align: center;
    letter-spacing: 0.5em;
}

.table-note {
    font-size: 12px;
    color: #888;
    margin-top: 20px;
    text-align: center;
}

/* コンバージョンエリア */
.cta-section {
    background-color: var(--sub-bg-grey);
    padding: 80px 40px;
    text-align: center;
    margin-top: 120px;
}

.cta-button-wrap {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 40px 0 120px 0;
}

.btn-main, .btn-sub {
    padding: 10px 18px; 
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.1em;
    /* box-shadow: 横 縦 ぼかし 広がり 色; */
    box-shadow: 0 0 1px 1px rgba(78, 74, 7, 0.3);
    transition: opacity 0.3s ease, transform 0.4s ease;
    line-height: 1; /* 行の高さをリセットすると上下がより正確に縮まります */
}

.btn-main:hover, .btn-sub:hover {
opacity: 0.8;
transform: translateY(-2px); /* わずかに浮く動作で「誠実な反応」を表現 */
color: var(--main-gold);
}

/* ==========================================================================
   Contact Page Styles (統合フォーム用)
   ========================================================================== */

/* 1. ヒーローセクション：画像を背景に */
.contact-hero {
    position: relative;
    width: 100%;
    height: 500px; /* 見せたい高さに固定 */
    background-color: var(--bg-color);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 背景画像の設定 */
.contact-hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/contact-hero.webp') ;
    background-size: 1200px auto;
    background-repeat: no-repeat;
    background-position:  center; 
    /* 主張を抑える加工 */
    opacity: 0.7;  /* 30%まで薄くしてSnowに溶け込ませる */
    filter: blur(2px); /* ボカして「光の質感」に変える */
    z-index: 1;
}
.hero-section {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.hero-content {
    position: absolute;
    /* 画像の高さの上から70%の位置に配置（＝下30%に重なる） */
    top: 70%; 
    left: 50%;
    transform: translateX(-50%); /* 左右中央寄せ */
    
    background-color: rgba(255, 255, 255, 0.93); /* 白背景、少し透過 */
    padding: 30px;
    z-index: 10;
    margin-top: 120px; /* 数値を大きくするほど、文字ボックスが下に下がります */
    position: relative;
    z-index: 5;
    width: 800px;

}

.hero-bg-image img {
    width: 100%;
    height: 100%;
    /* 【決定打】比率を維持したまま、枠に合わせて中央を切り抜く */
    object-fit: cover; 
    object-position: center;
}

.contact-page .hero-content h1 {
    font-family: "Cormorant Garamond", "Noto Serif JP", serif;
    font-size: 48px;
    font-weight: 200;
    line-height: 1.2;
    letter-spacing: 0.15em;
    color: var(--main-gold);
    margin: 0 0 15px;
    text-align: center;
}

.contact-page .hero-sub {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.2em;
    color: var(--accent-blue);
    opacity: 0.8;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto 30px !important;
}

/* リード文：案C「落ち着いた」を反映したエリア */
.contact-page .lead-text {
    font-size: 14px;
    line-height: 2.2;
    text-align: center;
    color: var(--accent-blue);
}

/* 2. フォームエリア：画像に少し重ねて奥行きを出す */
.form-section {
    margin-top: -20px; /* ヒーローに少し重なる演出 */
    position: relative;
    z-index: 10;
    margin-bottom: 120px;
}

.form-container {
    background-color: #ffffff;
    max-width: 850px;
    margin: 0 auto;
    padding: 80px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    box-sizing: border-box;
    margin-bottom: 60px; /* カタログとの間隔 */
}

.form-group {
    margin-bottom: 35px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--accent-blue);
}

.form-group label span {
    color: #c00; /* 必須の赤 */
    font-size: 11px;
    margin-left: 10px;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid var(--sub-bg-grey);
    background-color: var(--bg-color); /* 背景はSnow */
    font-family: var(--font-sans);
    font-size: 15px;
    box-sizing: border-box;
    border-radius: 0;
}

/* 送信ボタン：Charcoal Blue (#2C3E50) */
.btn-submit {
    background-color: var(--accent-blue);
    color: #ffffff;
    width: 100%;
    padding: 25px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4em;
    cursor: pointer;
    transition: 0.4s;
    margin-top: 20px;
}

.btn-submit:hover {
    background-color: var(--main-gold); /* ホバーでゴールドに */
    opacity: 1;
}

/* 3. Q&Aセクション（5問対応） */
.contact-qa {
    max-width: 850px;
    margin: 0 auto 120px;
    padding-top: 60px; /* カタログバナーとの距離 */
}

/* Qの文字だけゴールドにする演出 */
.qa-list dt::first-letter {
    color: var(--main-gold);
    font-size: 1.1em;
}
/* --- Contact Q&A (百貨店品質・視認性重視) --- */
.contact-qa {
    max-width: 850px;
    margin: 0 auto 120px;
    padding-top: 60px; /* カタログバナーとの距離 */
}

.medium-title {
    font-family: var(--font-serif);
    font-size: 32px;
    color: var(--main-gold);
    text-align: center;
    margin-bottom: 50px;
}

.qa-list {
    border-top: 1.5px solid var(--main-gold); /* 冒頭にブランドカラーの線を引く */
}

.qa-list dt {
    font-family: var(--font-serif);
    font-size: 18px; /* 16pxから18pxへ大きくし、重要度を高める */
    font-weight: 700;
    color: var(--accent-blue);
    padding: 30px 0 15px; /* 上下の余白をゆったりと */
    position: relative;
    cursor: default;
}

/* 質問の頭に「Q.」をゴールドで配置 */
.qa-list dt::before {
    content: "Q.";
    color: var(--main-gold);
    margin-right: 15px;
    font-size: 20px;
}

.qa-list dd {
    font-size: 15px; /* 本文の14pxより一段階上げ、読みやすく */
    line-height: 2.0;
    color: var(--accent-blue);
    opacity: 0.9;
    padding: 0 0 35px 35px; /* 「Q.」の幅分だけ左を空けて、回答を整列させる */
    margin: 0;
    border-bottom: 1px solid var(--sub-bg-grey); /* 各設問ごとの、はっきりとした境界線 */
}

/* 最後の設問の線は、少しだけ色を濃くして締めくくる */
.qa-list dd:last-of-type {
    border-bottom: 1.5px solid var(--main-gold);
}

/* --- Digital Catalog Banner --- */
.catalog-banner-area {
    margin-bottom: 80px; /* フォームとの間隔 */
}

.catalog-box {
    display: flex;
    align-items: center;
    background-color: #fff;
    background-color: transparent; /* 背景をSnowに馴染ませる */
    border: 1px solid var(--sub-bg-grey); 
    padding: 30px;
    box-sizing: border-box;
}

.catalog-img {
    width: 240px; /* 表紙らしいサイズ感 */
    position: relative;
    flex-shrink: 0;
    box-shadow: 15px 15px 40px rgba(0,0,0,0.1);
    transition: transform 0.4s ease;
}

/* ホバー時に少し浮き上がる演出 */
.catalog-box:hover .catalog-img {
    transform: translateY(-5px) rotate(-1deg);
}

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

/* 「今すぐ見れる」ことを示すバッジ */
.catalog-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: var(--main-gold);
    color: #fff;
    font-size: 10px;
    padding: 8px 12px;
    letter-spacing: 0.1em;
    font-weight: 600;
}

.catalog-text {
    padding-left: 60px;
    flex: 1;
}

.catalog-text .medium-title {
    text-align: left; /* 左寄せ */
    margin-bottom: 15px;
    color: var(--main-gold);
}

.catalog-text .lead {
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--accent-blue);
}

.catalog-text .description {
    font-size: 13px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 25px;
}

/* ボタン：仕様書準拠 */
.btn-catalog {
    display: inline-block;
    padding: 15px 40px;
    border: 1px solid var(--main-gold);
    color: var(--main-gold);
    text-decoration: none;
    font-size: 13px;
    letter-spacing: 0.2em;
    transition: 0.4s;
}

.btn-catalog:hover {
    background-color: var(--main-gold);
    color: #fff;
}
.catalog-img {
    width: 240px;      /* カタログの横幅 */
    height: 340px;     /* 【重要】縦を長く設定（A4比率：約1:1.4） */
    overflow: hidden;  /* はみ出た横部分を隠す */
    position: relative;
    box-shadow: 15px 15px 40px rgba(0,0,0,0.15); /* 影を少し強めて本物らしく */
    transition: transform 0.4s ease;
}

.catalog-img img {
    width: 100%;       /* 枠の幅に合わせる */
    height: 100%;      /* 枠の高さに合わせる */
    /* 【決定打】比率を維持したまま、縦長枠に合わせて中央を切り抜く */
    object-fit: cover; 
    object-position: center; /* 彼女の顔と手が中心に来るように調整 */
}

/* --- （結婚指輪、婚約指輪、ジュエリー）Product Listing Styles --- */
/* --- 商品一覧ページ全体の最上部を押し下げる --- */
.product-page {
    /* 固定ヘッダーの高さ（約80px） + 欲しい余白（120px） = 200px */
    /* padding-top: 200px !important;  */
    background-color: var(--bg-color);
}

/* .product-heroの中の要素を、強制的に中央へ、そしてゴールドへ */
.product-hero {
    text-align: center !important; /* これで1200pxの中央に寄ります */
    width: 100% !important;
    display: block !important;
}

/* 欧文タイトルを「絶対」にゴールドにする */
.product-hero h1.custom-text {
    color: #B89C6A !important; /* 変数を使わず直接コードで指定（確実性を優先） */
    font-family: "Cormorant Garamond", serif !important;
    font-size: 48px !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    letter-spacing: 0.2em !important;
    display: block !important;
}

/* 日本語サブタイトルもゴールドで統一 */
.product-hero .hero-sub {
    color: #B89C6A !important;
    text-align: center !important;
    letter-spacing: 0.5em !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    opacity: 0.8;
}


/* --- Product List Layout --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 1行に3つ */
    gap: 80px 40px; /* 上下の間隔を広めにとって格調高く */
    margin: 60px 0 120px;
}

.product-item {
    text-align: center;
}

.product-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.product-img {
    background-color: var(--bg-color); /* Snowカラーの背景 */
    margin-bottom: 25px;
    overflow: hidden;
    position: relative;
}

.product-img img {
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
}

/* ホバー時に画像を少しだけ浮かせる演出 */
.product-item:hover img {
    transform: scale(1.05);
}

.product-name {
    font-family: var(--font-serif);
    font-size: 16px;
    letter-spacing: 0.1em;
    color: var(--accent-blue);
    margin-bottom: 8px;
}

.product-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--main-gold); /* 価格をブランドカラーに */
    margin-bottom: 4px;
}

.product-material {
    font-size: 12px;
    color: #666;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.product-comment {
    font-size: 13px;
    line-height: 1.6;
    color: var(--accent-blue);
    opacity: 0.8;
    padding: 0 10px;
}

/* --- 商品一覧ページ（Marriage/Engagement/Jewelry）の下部余白の強制固定 --- */
/* 1. ページ全体のメインエリアの下に、拳2つ分（180px）の余白を作る */
main.product-page {
    padding-bottom: 70px !important;
    background-color: var(--bg-color); /* Snow背景を末端まで敷き詰める */
}

.btn-main { background: var(--accent-blue); color: #fff; }

.btn-sub { background: #fff; color: var(--accent-blue); border: 1px solid var(--accent-blue); }


/* --- 謎の300px余白を完全に抹消する最強リセット --- */

/* 1. 親要素の余白をすべてゼロにする */
main.product-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* --- 商品一覧：見出しエリアの最終・微調整（密度重視） --- */

.product-header-area {
    padding-top: 80px !important; 
    margin-bottom: 50px !important;
    /* あえてセンターにせず、左寄りの「カタログ風」を維持 */
    text-align: left; 
    padding-left: 20px; /* 左端に密着しすぎない遊び */
}

.product-header-area .product-title {
    color: #B89C6A !important;
    font-size: 48px !important; /* 少し大きくして「主役」感を出す */
    font-weight: 400 !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 10px !important;
    font-family: "Cormorant Garamond", serif !important;
    line-height: 1.2 !important;
    display: block !important;
}

.product-header-area .product-subtitle {
    color: #B89C6A !important;
    font-size: 15px !important;
    letter-spacing: 0.4em !important;
    /* opacity: 0.9; */
    font-family: "Noto Serif JP", serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.4em !important;
    margin: 0 auto !important;
    display: block !important;
}
/* ID(#hero) と クラス(.hero-copy) を組み合わせることで、
   CSSの中で最強の優先順位を持たせ、上の方の h1 設定を完全に無効化します */

#hero h1.hero-copy {
    /* 2. 100pxの巨大さを強制 */
    /* font-size: 100px !important; */
    
    /* 3. 【重要】太字設定を徹底的に排除し、読み込んだ中で最細の100を指定 */
    font-weight: 100 !important; 
    -webkit-font-smoothing: antialiased; /* 文字の縁を滑らかにして細く見せるプロの技 */
    -moz-osx-font-smoothing: grayscale;
    
    /* 4. 【重要】字間をさらに広げて、1文字ずつの「独立した美しさ」を出す */
    letter-spacing: 0.05em !important;
    
    line-height: 1.1 !important;
    
    /* 6. 余計な装飾をリセット */
    text-transform: none !important;
    font-style: normal !important;
    color: var(--accent-blue) !important;
       
    /* 7. 確実に表示させる */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-family: "Cormorant Garamond", serif !important;
    
    /* 7. 白い本の上でも「透き通る」ような影（影が濃すぎると太く見えます） */
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.7) !important;
}

/* ついでに、下の余白崩壊も「外枠」で解決します */
#hero.hero {
    height: 100vh;
    margin-bottom: var(--section-margin); /* 160pxの代わりに変数を使う */
    padding: 0 !important;
}

/* --- Aboutページ：画像の高さを解放する --- */

/* 1. 親要素の高さ制限を解除 */
.about-page .hero-section {
    height: auto !important;     /* 550pxなどの固定値を解除 */
    min-height: 0 !important;
    overflow: visible !important; /* はみ出しても隠さない */
}

/* 2. 画像エリアの高さ制限を解除 */
.about-page .hero-image {
    height: auto !important;
    max-height: none !important; /* 制限を撤廃 */
    width: 100% !important;
    display: block !important;
}

/* 3. 画像本体の設定：比率を維持して全表示 */
.about-page .hero-image img {
    width: 100% !important;
    height: auto !important;    /* 高さを自動計算に */
    object-fit: contain !important; /* 切らずに全体を表示 */
    max-height: none !important;
}

/* =================================================
   ポートフォリオ撮影用：レスポンシブ上書き設定
   （画面幅1024px以下で適用）
   ================================================= */
@media screen and (max-width: 750px){

    /* --- 【重要】はみ出しを強制的に消し、背景の露出を防ぐ --- */
    html, body {
        overflow-x: hidden !important; /* 横スクロールを禁止 */
        width: 100% !important;
        position: relative;
    }

    /* 全ての要素が画面幅（100%）を超えないように強制 */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* 2. ゴールドバーの設定（念のため） */
    .header-line, .footer-gold-bar {
        width: 100% !important;
        min-width: 100% !important;
        left: 0;
        right: 0;
    }

    /* 1. 全体の「1200px固定」を解除し、画面幅に収める */
    .inner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1.5% !important;
    }

    .header-top .inner {
        flex-direction: column !important; /* ロゴと予約ボタンを縦に */
        height: auto !important;
        gap: 15px;
    }

    .logo img {
        width: 150px !important; /* スマホ用に少し小さく */
        margin: 0 auto;
    }

    .btn-reservation {
        position: static !important; /* 右端固定を解除 */
        width: 80% !important;
        text-align: center;
        margin: 0 auto;
    }

    /* 3. ナビゲーション（横並びを折り返し、または非表示に） */
    .header-bottoms {
        flex-wrap: wrap !important; /* 入りきらない場合、下に回る */
        justify-content: center !important;
        gap: 10px !important;
        margin-bottom: 20px !important;
    }

    .nav-btn {
        min-width: 80px !important; /* 少し幅を詰める */
        font-size: 11px !important;
    }

    /* 4. ヒーローセクション（100vhの崩れを防止） */
    .hero, .hero-flex {
        height: 70vh !important; /* スマホでは少し高さを抑える */
        min-height: 400px !important;
    }

    /* 画像が画面からはみ出さないように */
    .hero-img {
        object-position: center !important; /* 指輪を中央に寄せる */
    }

    /* 文字が重ならないよう、グラデーションを強める */
    .hero-overlay {
        background: linear-gradient(to bottom, 
            rgba(255, 253, 247, 0.9) 0%, 
            rgba(255, 253, 247, 0.4) 50%, 
            transparent 100%) !important;
    }

    /* キャッチコピーのサイズ調整 */
    .hero-copy {
        font-size: 40px !important; /* 90pxから40pxへ */
        letter-spacing: 0.05em !important;
        text-align: center;
        width: 100%;
    }

    .hero-copy-sub {
        font-size: 14px !important;
        letter-spacing: 0.2em !important;
        text-align: center;
        width: 100%;
    }

    .hero-flex {
        align-items: center !important; /* 中央寄せに変更 */
        padding-bottom: 40px !important;
    }
    .shop-flex-container {
        flex-direction: column; /* 縦並びにする */
        gap: 20px;
    }
    .shopfoto, .info {
        width: 100%; /* 横幅いっぱい使う */
    }  

   /* 1. ヘッダー全体の高さ固定を解除して、中身に合わせて伸ばす */
    .site-header, .header-top {
        height: auto !important; /* 140pxや50pxを無効化 */
        min-height: 0 !important;
        padding-bottom: 10px;
    }

    /* 2. 要素の並びを縦にする（重なり防止） */
    .header-top .inner {
        flex-direction: column !important; /* ロゴと予約ボタンを上下に */
        height: auto !important;
        gap: 15px; /* ロゴとボタンの間に隙間を作る */
        padding-top: 15px;
    }

    /* 3. ナビゲーション（NAV）との間に余白を作る */
    .header-bottoms {
        display: flex !important;
        flex-direction: column !important; /* メニューも縦並びにすると確実 */
        height: auto !important;
        margin-top: 20px !important; /* 上のボタンとの距離を離す */
        gap: 10px !important;
    }

    /* 来店予約ボタンの配置を整える */
    .btn-reservation {
        position: static !important; /* 絶対配置などを解除 */
        display: inline-block;
        width: 80%; /* 押しやすい幅に */
        margin: 0 auto; /* 中央寄せ */
    }
    /* --- すべてのsectionタグの下余白をスマホ用に上書き --- */
    /* section {
        margin-bottom: 60px !important; /* 160pxを60px（お好みで）に短縮 */
    /*} */

    /* もしIDで個別に160px指定している場所があれば、ここにも追加 */
    #shop-info, .accsess, .map-sec {
        margin-bottom: 60px !important;
    }

     :root {
        --section-margin: 60px; /* ここを変えるだけで、変数を使っている場所が一斉に縮む */
    }
}