@charset "UTF-8";
/* ============================================================
   VIVAGE 公式サイト base.css（全デバイス共通）
   デザイン：A案「Roman d'amour」 生成り×セピア×シャンパンゴールド
   構成：base.css（共通）/ pc.css（769px以上）/ sp.css（768px以下）
   ============================================================ */
:root{
  --bg:#FBF9F4;
  --ink:#4A3F35;
  --sepia:#8B7355;
  --gold:#C0A171;
  --blush:#E9CFC4;
  --line:#E2D9CC;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Shippori Mincho',"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:400;line-height:2;letter-spacing:.08em;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.en{font-family:'Cormorant Garamond',Georgia,serif}
.script{font-family:'Italianno',cursive}

/* --- header --- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(180deg,rgba(251,249,244,.94),rgba(251,249,244,0))}
.site-header .logo{font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:.42em;color:var(--sepia);line-height:1.2}
.site-header .logo small{display:block;font-family:sans-serif;letter-spacing:.5em;color:var(--gold);font-weight:400}
.gnav a{position:relative;padding-bottom:4px}
.gnav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .4s}
.gnav a:hover::after,.gnav a[aria-current="page"]::after{width:100%}
.nav-cta{border:1px solid var(--gold);color:var(--sepia)}

/* --- 章見出し --- */
.chapitre{text-align:center;margin:0 auto 54px;max-width:640px}
.chapitre .fr{font-family:'Italianno',cursive;color:var(--gold);display:block;margin-bottom:2px}
.chapitre h1,.chapitre h2{font-weight:500;letter-spacing:.3em}
.chapitre .rule{width:52px;height:1px;background:var(--gold);margin:22px auto 0;position:relative}
.chapitre .rule::after{content:'';position:absolute;left:50%;top:-3px;width:7px;height:7px;border:1px solid var(--gold);transform:translateX(-50%) rotate(45deg);background:var(--bg)}

/* --- 下層ページ共通ヒーロー --- */
.page-hero{text-align:center;border-bottom:1px solid var(--line)}
.page-hero .fr{font-family:'Italianno',cursive;color:var(--gold);display:block}
.page-hero h1{font-weight:500;letter-spacing:.3em}
.breadcrumb{font-size:11px;letter-spacing:.14em;color:#9b8d7d}
.breadcrumb a:hover{color:var(--sepia)}
.breadcrumb span::before{content:'―';margin:0 8px;color:var(--line)}

/* --- ボタン・リンク --- */
.morelink{display:inline-block;font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:.34em;color:var(--sepia);border-bottom:1px solid var(--gold);padding:2px 4px 6px;transition:opacity .3s}
.morelink:hover{opacity:.65}
.btn{display:inline-block;border:1px solid var(--gold);color:var(--sepia);letter-spacing:.28em;text-align:center;transition:all .4s}
.btn:hover{background:var(--sepia);border-color:var(--sepia);color:#FBF9F4}

/* --- カード --- */
.col-card{text-align:center;display:block}
.col-card .frame{overflow:hidden;position:relative;background:#fff}
.col-card img{aspect-ratio:3/2;object-fit:cover;transition:transform .8s ease}
.col-card:hover img{transform:scale(1.05)}
.col-card h3,.col-card h2{font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:.3em;color:var(--sepia);font-weight:500}
.col-card .jp{color:#8a7c6d;letter-spacing:.14em}
.badge{display:inline-block;font-size:10px;letter-spacing:.2em;border:1px solid var(--line);color:#9b8d7d;padding:2px 10px;margin-top:6px}

/* --- テーブル --- */
.spec-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.spec-table th{background:#F4EFE6;font-weight:500;white-space:nowrap;width:200px}

/* --- footer --- */
.site-footer{border-top:1px solid var(--line);text-align:center}
.site-footer .logo{font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:.42em;color:var(--sepia)}
.site-footer .logo small{display:block;font-family:sans-serif;letter-spacing:.5em;color:var(--gold)}
.fnav{display:flex;justify-content:center;flex-wrap:wrap;font-family:'Cormorant Garamond',Georgia,serif;letter-spacing:.24em}
.site-footer .copyright{font-family:sans-serif;font-size:10px;letter-spacing:.2em;color:#9b8d7d}

/* --- ユーティリティ --- */
.center{text-align:center}
.note{font-size:12px;color:#9b8d7d;letter-spacing:.06em}
html.js .fade{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
html.js .fade.is-view{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .fade{opacity:1;transform:none;transition:none}
  .col-card img,.hero-img img{transition:none;animation:none}
}


/* ============================================================
   REFINEMENT LAYER — 最終美的調整
   ①余白・行間・字間  ②装飾（罫線・飾り）  ③演出・ホバー
   ============================================================ */

/* ---- ① タイポグラフィの上質化 ---- */
body{line-height:2.05;letter-spacing:.09em}
.chapitre .fr,.page-hero .fr{letter-spacing:.04em}
.chapitre h1,.chapitre h2,.page-hero h1{letter-spacing:.34em;text-indent:.34em}
.two-col .lead{line-height:2.5;letter-spacing:.14em}
.two-col p,.ring-block .desc,.faq-item p{line-height:2.1;letter-spacing:.05em}

/* 章見出しフランス語に小さな装飾を添える */
.chapitre .fr::before,.chapitre .fr::after{
  content:'';display:inline-block;width:28px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold));
  vertical-align:middle;margin:0 16px 6px}
.chapitre .fr::after{background:linear-gradient(90deg,var(--gold),transparent)}

/* ---- ② セクション装飾（罫線・飾り） ---- */
/* page-heroに上品なダブルライン装飾 */
.page-hero{position:relative}
.page-hero .fr{position:relative;display:inline-block;padding-top:8px}

/* framed画像の二重罫線を強化 */
.framed::before{border-color:var(--gold);opacity:.35}
.framed::after{content:'';position:absolute;inset:8px;border:1px solid rgba(255,255,255,.5);pointer-events:none;z-index:1}

/* セクション区切りに繊細なオーナメント */
.section-ornament{text-align:center;padding:10px 0;color:var(--gold);font-size:12px;letter-spacing:1em}
.section-ornament::before{content:'❋'}

/* コレクションアイコンに円環の縁取り */
.collection-icon{position:relative}
.collection-icon::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:118px;height:118px;border:1px solid var(--line);border-radius:50%;opacity:.5}

/* ---- ③ ホバー・スクロール演出の洗練 ---- */
/* カード：持ち上がり＋枠が金に */
.col-card .frame{position:relative}
.col-card .frame::after{content:'';position:absolute;inset:0;border:1px solid transparent;transition:border-color .5s;pointer-events:none}
.col-card:hover .frame::after{border-color:var(--gold)}
.col-card h3,.col-card h2{transition:color .4s,letter-spacing .4s}
.col-card:hover h3,.col-card:hover h2{color:var(--gold);letter-spacing:.36em}

/* morelinkの下線を左から伸ばす */
.morelink{position:relative;border-bottom:none;padding-bottom:8px}
.morelink::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--gold);transform:scaleX(1);transform-origin:right;transition:transform .5s}
.morelink:hover{opacity:1}
.morelink:hover::after{transform:scaleX(0);transform-origin:right;transition:transform .3s}
.morelink::before{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s .05s}
.morelink:hover::before{transform:scaleX(1)}

/* ボタンの光沢スイープ */
.btn{position:relative;overflow:hidden}
.btn::before{content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .6s;pointer-events:none}
.btn:hover::before{left:130%}

/* フェードインを少し優雅に（下から＋わずかにブラー→クリア） */
html.js .fade{opacity:0;transform:translateY(28px);filter:blur(2px);
  transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1),filter 1.1s ease}
html.js .fade.is-view{opacity:1;transform:none;filter:none}

/* ヘッダーに繊細な下罫線（スクロール後の可読性） */
.site-header::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);opacity:0;transition:opacity .4s}
.site-header.is-scrolled::after{opacity:1}
.site-header.is-scrolled{background:rgba(251,249,244,.9);backdrop-filter:blur(6px)}

@media (prefers-reduced-motion: reduce){
  html.js .fade{filter:none;transform:none;transition:none}
  .btn::before{display:none}
}


/* ---- Instagram専用セクション（aglobe-instagram-lead スキル準拠）---- */
.ig-lead{--ig-accent:#8B7355;text-align:center;padding:96px 20px;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ig-lead__label{font-size:14px;letter-spacing:.3em;color:var(--ig-accent);margin-bottom:10px}
.ig-lead__label::before,.ig-lead__label::after{content:'';display:inline-block;width:24px;height:1px;background:var(--gold);vertical-align:middle;margin:0 14px 4px}
.ig-lead__ttl{font-size:22px;font-weight:500;letter-spacing:.14em;margin-bottom:16px;color:var(--ink)}
.ig-lead__txt{font-size:13.5px;line-height:2.1;color:#6d6156;margin-bottom:30px}
.ig-lead__btn{display:inline-block;font-size:13px;letter-spacing:.18em;text-decoration:none;border:1px solid var(--ig-accent);color:var(--ig-accent);padding:13px 38px;transition:all .3s;position:relative;overflow:hidden}
.ig-lead__btn:hover{background:var(--ig-accent);color:#FBF9F4}
@media(max-width:768px){.ig-lead{padding:64px 18px}.ig-lead__ttl{font-size:19px}}