@charset "UTF-8";
/* ============================================================
   VIVAGE sp.css（768px以下）
   ============================================================ */
.site-header{padding:14px 18px}
.site-header .logo{font-size:19px}
.site-header .logo small{font-size:8px;margin-top:2px}

/* --- ハンバーガーメニュー --- */
.menu-btn{display:block;width:44px;height:44px;background:none;border:none;position:relative;z-index:70;cursor:pointer}
.menu-btn span{position:absolute;left:10px;width:24px;height:1px;background:var(--sepia);transition:.35s}
.menu-btn span:nth-child(1){top:16px}
.menu-btn span:nth-child(2){top:22px}
.menu-btn span:nth-child(3){top:28px}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){top:22px;transform:rotate(-45deg)}
.gnav{position:fixed;inset:0;background:rgba(251,249,244,.98);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:30px;font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;letter-spacing:.3em;opacity:0;visibility:hidden;transition:opacity .4s;z-index:60}
.gnav.is-open{opacity:1;visibility:visible}
.nav-cta{padding:10px 30px}

/* --- トップ hero --- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:36px;position:relative;padding:90px 7vw 90px}
.hero-text{display:flex;flex-direction:row-reverse;gap:22px;justify-content:center}
.vstack{display:flex;flex-direction:column;align-items:center;gap:.4em;font-size:24px;font-weight:500}
.vstack span{line-height:1}
.vstack .comma{transform:translate(.55em,-.4em)}
.vstack.sub{font-size:11px;color:var(--sepia);padding-top:44px;gap:.5em;font-weight:400}
.hero-img{position:relative;height:46svh;overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover}
.hero-img::after{content:'';position:absolute;inset:10px;border:1px solid rgba(255,255,255,.65);pointer-events:none}
.hero-script{font-size:20px;color:var(--gold);text-align:center;transform:rotate(-2deg)}
.scrolldown{display:none}

/* --- セクション --- */
section{padding:76px 7vw}
.chapitre{margin-bottom:44px}
.chapitre .fr{font-size:28px}
.chapitre h1,.chapitre h2{font-size:19px}
.page-hero{padding:110px 7vw 44px}
.page-hero .fr{font-size:28px}
.page-hero h1{font-size:20px}
.breadcrumb{margin-top:20px}

/* --- 2カラム→縦積み --- */
.two-col,.two-col.rev{display:flex;flex-direction:column;gap:36px;max-width:none}
.two-col.rev .txt{order:0}
.two-col .lead{font-size:17px;line-height:2.3;margin-bottom:1.2em}
.two-col p{margin-bottom:1.5em;font-size:14px}
.framed{position:relative}
.framed img{aspect-ratio:4/3;object-fit:cover}
.framed::before{content:'';position:absolute;inset:-10px 10px 10px -10px;border:1px solid var(--line);z-index:-1}

/* --- カードグリッド --- */
.col-grid,.col-grid.four{display:flex;flex-direction:column;gap:40px}
.col-card h3,.col-card h2{font-size:18px;margin-top:16px}
.col-card .jp{font-size:12px;margin-top:3px}
.center{margin-top:44px}
.morelink{font-size:12px}
.btn{padding:14px 40px;font-size:12.5px;width:100%;max-width:340px}

/* --- リング詳細 --- */
.ring-block{margin:0 0 64px}
.ring-block .ring-photo{background:#fff;border:1px solid var(--line);padding:10px}
.ring-head{display:flex;flex-direction:column;gap:4px;margin:24px 0 12px}
.ring-head h2{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;letter-spacing:.22em;color:var(--sepia);font-weight:500}
.ring-head .hin{font-size:11px;color:#9b8d7d}
.ring-block .desc{font-size:14px;margin-bottom:22px}
.spec-table{font-size:12px}
.spec-table th{width:110px;padding:10px}
.spec-table td{padding:10px}

/* --- shop --- */
.shop-grid{display:flex;flex-direction:column;gap:18px}
.shop-card{background:#fff;border:1px solid var(--line);padding:22px}
.shop-card h2,.shop-card h3{font-size:15px;font-weight:500;margin-bottom:8px;color:var(--sepia)}
.shop-card p{font-size:12px;line-height:1.9;color:#6d6156}
.area-label{font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;letter-spacing:.3em;color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:8px;margin:50px 0 22px}
.shop-detail{margin:0}

/* --- FAQ --- */
.faq-item{background:#fff;border:1px solid var(--line);margin-bottom:14px;padding:20px}
.faq-item h2,.faq-item h3{font-size:14px;font-weight:500;margin-bottom:10px;color:var(--sepia)}
.faq-item h2::before,.faq-item h3::before{content:'Q.';font-family:'Cormorant Garamond',Georgia,serif;color:var(--gold);margin-right:8px}
.faq-item p{font-size:13px}
.faq-item p::before{content:'A.';font-family:'Cormorant Garamond',Georgia,serif;color:var(--sepia);margin-right:8px}

/* --- footer --- */
.site-footer{padding:50px 7vw 34px}
.site-footer .logo{font-size:19px;margin-bottom:20px}
.site-footer .logo small{font-size:8px}
.fnav{gap:16px 22px;font-size:11px;margin-bottom:28px}