@charset "UTF-8";
/* ============================================================
   ECTURO base.css — ダークラグジュアリー共通スタイル
   配色・タイポ・ヘッダー/フッター・共通コンポーネント
   ============================================================ */
:root{
  --bg:#12100D;          /* 基調の黒（黒大理石写真と馴染む暖黒） */
  --panel:#1B1815;       /* パネル・カード背景 */
  --panel2:#221E19;      /* 一段明るいパネル */
  --ink:#EDE6D8;         /* 本文アイボリー */
  --muted:#A99C88;       /* 補助テキスト */
  --gold:#C7A566;        /* シャンパンゴールド */
  --gold-strong:#DDBE7F; /* 強調ゴールド */
  --line:rgba(199,165,102,.26);   /* 罫線 */
  --line-soft:rgba(199,165,102,.14);
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --serif-jp:'Shippori Mincho','Noto Serif JP','Noto Serif CJK JP','Yu Mincho','YuMincho','Hiragino Mincho ProN',serif;
  --serif-en:'Cormorant Garamond',Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--serif-jp);
  font-size:15px;line-height:2;letter-spacing:.06em;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt";
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none;transition:opacity .3s,color .3s,background .3s,border-color .3s}
ul,ol{list-style:none}
.en{font-family:var(--serif-en)}

/* ---------------- ヘッダー ---------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;height:72px;
  background:linear-gradient(to bottom,rgba(10,9,7,.82),rgba(10,9,7,0));
  transition:background .4s;
}
.site-header.is-solid{background:rgba(13,11,9,.94);border-bottom:1px solid var(--line-soft)}
.header-logo a{
  font-family:var(--serif-en);font-weight:500;
  font-size:24px;letter-spacing:.34em;color:var(--ink);
}
.header-logo small{
  display:block;font-family:var(--serif-jp);
  font-size:9px;letter-spacing:.5em;color:var(--gold);margin-top:2px;
}
.gnav ul{display:flex;gap:30px}
.gnav a{
  font-family:var(--serif-en);font-size:12.5px;letter-spacing:.22em;color:var(--ink);
  padding:6px 0;border-bottom:1px solid transparent;
}
.gnav a:hover,.gnav a[aria-current="page"]{color:var(--gold-strong);border-bottom-color:var(--gold)}
.menu-btn{display:none}

/* ---------------- フッター ---------------- */
.site-footer{
  border-top:1px solid var(--line-soft);
  background:#0D0B09;
  padding:70px 28px 34px;text-align:center;
}
.footer-logo{font-family:var(--serif-en);font-size:26px;letter-spacing:.36em;color:var(--ink)}
.footer-logo small{display:block;font-size:10px;letter-spacing:.5em;color:var(--gold);margin-top:4px}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 26px;margin:34px auto 30px;max-width:820px}
.footer-nav a{font-family:var(--serif-en);font-size:11.5px;letter-spacing:.2em;color:var(--muted)}
.footer-nav a:hover{color:var(--gold-strong)}
.copyright{font-size:10.5px;letter-spacing:.14em;color:#6E6455}

/* ---------------- 汎用 ---------------- */
main{display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 28px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 28px}
section{position:relative}

/* 章見出し */
.chapitre{text-align:center;margin-bottom:52px}
.chapitre .fr{
  display:block;font-family:var(--serif-en);
  font-size:30px;letter-spacing:.28em;color:var(--gold);font-weight:500;
}
.chapitre h1,.chapitre h2{
  font-size:16px;font-weight:500;letter-spacing:.3em;color:var(--ink);margin-top:10px;
}
.chapitre .rule{
  width:52px;height:1px;background:var(--gold);margin:22px auto 0;
}
.lead-txt{text-align:center;font-size:14px;line-height:2.4;color:var(--muted)}

/* ボタン */
.btn{
  display:inline-block;font-family:var(--serif-en);
  font-size:12.5px;letter-spacing:.28em;color:var(--gold-strong);
  border:1px solid var(--gold);padding:15px 52px 15px 56px;
  background:transparent;cursor:pointer;
}
.btn:hover{background:var(--gold);color:#161310}
.btn-ghost{border-color:var(--line);color:var(--muted)}
.btn-ghost:hover{background:var(--panel2);color:var(--ink)}
.btn-center{text-align:center;margin-top:46px}

/* フェード演出 */
.fade{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s ease}
.fade.is-view{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade{opacity:1;transform:none;transition:none}
}

/* リンググリッド */
.ring-grid{display:grid;gap:34px 26px}
.ring-grid figure{text-align:center}
.ring-grid .frame{
  display:block;overflow:hidden;background:var(--panel);
  border:1px solid var(--line-soft);
}
.ring-grid .frame img{transition:transform .8s ease;aspect-ratio:3/2;object-fit:cover;width:100%}
.ring-grid .frame:hover img{transform:scale(1.05)}
.ring-grid figcaption{
  margin-top:14px;font-family:var(--serif-en);
  font-size:14.5px;letter-spacing:.2em;color:var(--ink);
}
.ring-grid figcaption small{
  display:block;font-family:var(--serif-jp);
  font-size:11px;letter-spacing:.14em;color:var(--muted);margin-top:4px;
}

/* テーブル（価格・スペック） */
.spec-table{width:100%;border-collapse:collapse;font-size:13.5px}
.spec-table th,.spec-table td{
  border:1px solid var(--line-soft);padding:13px 16px;
  text-align:left;vertical-align:top;letter-spacing:.05em;
}
.spec-table th{
  background:var(--panel);color:var(--gold-strong);
  font-weight:500;white-space:nowrap;width:200px;
}
.spec-table td{color:var(--ink)}
.price-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:10px}
.price-table th,.price-table td{border:1px solid var(--line-soft);padding:11px 14px;text-align:center;letter-spacing:.04em}
.price-table thead th{background:var(--panel2);color:var(--gold-strong);font-weight:500}
.price-table tbody th{background:var(--panel);color:var(--ink);font-weight:500;white-space:nowrap}
.note{font-size:11.5px;line-height:1.9;color:var(--muted);margin-top:12px}

/* FAQ アコーディオン（aglobe-faq-accordion 準拠） */
.faq{max-width:820px;margin:0 auto;text-align:left}
.faq__item{border-bottom:1px solid var(--line-soft)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--serif-jp);font-size:14.5px;letter-spacing:.06em;line-height:1.9;
  color:var(--ink);padding:22px 4px;
}
.faq__q-text{flex:1}
.faq__q-text::before{
  content:"Q";font-family:var(--serif-en);color:var(--gold);
  font-size:17px;margin-right:14px;
}
.faq__icon{position:relative;width:14px;height:14px;flex:0 0 14px}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;background:var(--gold);inset:auto;
}
.faq__icon::before{left:0;top:6px;width:14px;height:1px}
.faq__icon::after{left:6.5px;top:0;width:1px;height:14px;transition:transform .3s}
.faq__q[aria-expanded="true"] .faq__icon::after{transform:scaleY(0)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq__a>p{
  font-size:13.5px;line-height:2.1;color:var(--muted);
  padding:0 4px 24px 35px;
}
.faq__a>p::before{
  content:"A";font-family:var(--serif-en);color:var(--gold-strong);
  font-size:16px;margin-right:14px;margin-left:-31px;
}
.no-js .faq__a{max-height:none}

/* パンくず */
.breadcrumb{
  font-size:11px;letter-spacing:.08em;color:var(--muted);
  padding:96px 28px 0;max-width:1100px;margin:0 auto;
}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:6px}
.breadcrumb li:not(:last-child)::after{content:"／";margin-left:6px;color:#5E5546}
.breadcrumb a:hover{color:var(--gold-strong)}

/* ページヒーロー（下層共通）：画像は透過なしでクリーン表示 */
.page-hero{overflow:hidden}
.page-hero img{width:100%;height:52vh;min-height:320px;object-fit:cover;display:block}

/* ページ見出し（画像の下に配置） */
.page-title{text-align:center;padding:58px 24px 0}
.page-title .hero-fr{font-family:var(--serif-en);font-size:34px;letter-spacing:.3em;color:var(--gold);font-weight:500}
.page-title h1{font-size:17px;font-weight:500;letter-spacing:.32em;margin-top:12px}
.page-title .hero-sub{font-size:11.5px;letter-spacing:.2em;color:var(--muted);margin-top:12px}
.page-title::after{content:"";display:block;width:52px;height:1px;background:var(--gold);margin:24px auto 0}

/* トップヒーロー */
.top-hero{position:relative;overflow:hidden;background:#000}
.top-hero picture,.top-hero picture img{position:absolute;inset:0;width:100%;height:100%}
.top-hero picture img{object-fit:cover;opacity:.88}
.top-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(18,16,13,.94) 0%,rgba(18,16,13,.12) 34%,rgba(0,0,0,.18) 100%);
}
.top-hero .hero-copy{position:absolute;z-index:2;display:flex;align-items:flex-end;gap:26px}
.top-hero .hero-tate{color:var(--ink);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.top-hero .hero-logo{
  color:var(--ink);letter-spacing:.3em;font-weight:500;line-height:1.1;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
  writing-mode:horizontal-tb;
}
.top-hero .hero-sub{
  font-family:var(--serif-en);font-size:11px;letter-spacing:.5em;
  color:var(--gold-strong);margin-top:10px;
}

/* センターストーン注記（婚約価格の必須注記） */
.stone-note{
  border:1px solid var(--line-soft);background:var(--panel);
  padding:16px 20px;font-size:12px;line-height:2;color:var(--muted);
  letter-spacing:.05em;margin-top:26px;
}
.stone-note strong{color:var(--gold-strong);font-weight:500}

/* リング詳細ギャラリーの高さ揃え */
.product-gallery .frame{overflow:hidden}
.product-gallery .frame img{aspect-ratio:4/3;object-fit:cover;width:100%;height:100%}

/* ============================================================
   最終美観チューニング（納品前パス）
   ============================================================ */
/* 選択色・フォーカスリング（品位ある操作感） */
::selection{background:var(--gold);color:#161310}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}

/* 章見出し：英字をイタリックに、罫線を両端フェードのゴールドへ */
.chapitre .fr,.page-title .hero-fr{font-style:italic;font-weight:500;letter-spacing:.22em}
.chapitre h1,.chapitre h2{letter-spacing:.34em}
.chapitre .rule,.page-title::after{
  width:120px;
  background:linear-gradient(to right,transparent,var(--gold) 30%,var(--gold) 70%,transparent);
}

/* 見出し英字の質感（少し大きく・軽く） */
.chapitre .fr{font-size:33px}

/* ボタン：ホバーで字間がひらく上質なマイクロインタラクション */
.btn{
  padding:16px 54px;letter-spacing:.3em;
  transition:background .45s ease,color .45s ease,letter-spacing .45s ease,border-color .45s ease;
}
.btn:hover{letter-spacing:.36em}

/* ナビ：下線がスライドインするホバー */
.gnav a{border-bottom:0;background:linear-gradient(var(--gold),var(--gold)) no-repeat 0 100%/0 1px;transition:color .35s,background-size .45s ease}
.gnav a:hover,.gnav a[aria-current="page"]{background-size:100% 1px}

/* ヘッダーロゴの風格 */
.header-logo a{letter-spacing:.4em}
.footer-logo{letter-spacing:.42em}

/* リンググリッド：ゆったりしたズームと繊細なボーダー変化 */
.ring-grid .frame{transition:border-color .5s}
.ring-grid .frame:hover{border-color:var(--line)}
.ring-grid .frame img{transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
.ring-grid .frame:hover img{transform:scale(1.045)}
.ring-grid figcaption{font-size:15px;letter-spacing:.22em}
.ring-grid figcaption small{margin-top:6px;color:#948A79}

/* テーブル：余白を広げ、境界を柔らかく */
.spec-table th,.spec-table td{padding:14px 18px}
.price-table th,.price-table td{padding:12px 16px}
.price-table tbody tr:hover td{background:rgba(199,165,102,.05)}

/* FAQ：ホバーで設問がゴールドに */
.faq__q{transition:color .3s}
.faq__q:hover{color:var(--gold-strong)}

/* センターストーン注記：ゴールドの縦罫でアクセント */
.stone-note{border-left:2px solid var(--gold);padding-left:22px}

/* フッター：極細ゴールドのヘアライン */
.site-footer{border-top:0;position:relative}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,var(--gold-soft),transparent);
}

/* 本文リズム */
.lead-txt{letter-spacing:.08em}
.breadcrumb{color:#8A8071}

/* 画像の下地（読み込み中もダークを維持） */
img{background:#171411}

/* 電話リンクの色統一：visited既定色（紫/ピンク）と自動検出スタイルを無効化 */
a:link,a:visited{color:inherit}
a[href^="tel:"],a[href^="tel:"]:link,a[href^="tel:"]:visited{
  color:var(--gold-strong);text-decoration:none;
}
.btn[href^="tel:"],.btn[href^="tel:"]:visited{color:var(--gold-strong)}
.btn[href^="tel:"]:hover{color:#161310}
.card-btn.tel-btn,.card-btn.tel-btn:visited{color:var(--muted)}
.card-btn.tel-btn:hover{color:var(--ink)}