@charset "UTF-8";
/* =============================================================
   MORE LIVING / 桶庄 リニューアル
   common.css — 全ページ共通（変数・リセット・タイポ・ヘッダー・
   フッター・ボタン・コンテナ・共通モジュール）
   デザインテーマ：静けさ／余白／自然光／暮らし／木／誠実さ／上質
   ============================================================= */

/* ---- デザイントークン -------------------------------------- */
:root{
  --bg:#FAF9F7;          /* Background */
  --white:#FFFFFF;       /* White */
  --ink:#2A2A2A;         /* Text */
  --sub:#8C8C8C;         /* Sub Text */
  --line:#E8E6E3;        /* Border */
  --accent:#D97A26;      /* Accent */
  --accent-hover:#C76816;/* Hover */

  /* タイポグラフィ（日本語は明朝を使わず Noto Sans JP に統一。英字ラベルのみ Cormorant） */
  --sans:'Noto Sans JP', sans-serif;
  --serif:'Noto Sans JP', sans-serif; /* 旧アクセント枠。日本語明朝は廃止しsansへ */
  --en:'Cormorant Garamond', serif;
  --num:'Helvetica Neue', 'Inter', Arial, sans-serif;

  /* 余白スケール（余白もデザイン） */
  --gut:clamp(20px, 4.5vw, 72px); /* 左右ガター */
  --sec:clamp(76px, 11vw, 168px); /* セクション上下 */
  --maxw:1680px;                  /* 横幅を広く使うダイナミック設計 */
}

/* ---- リセット ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.85;
  font-weight:400;
  letter-spacing:.05em;
  font-feature-settings:"palt";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden; /* フルブリードの保険 */
}
/* アクセントにNoto Serif JPを使う要素 */
.serif{font-family:var(--serif)}
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;transition:color .3s ease, opacity .3s ease}
a:hover{color:var(--accent)}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.5;letter-spacing:.06em}

/* ---- レイアウト共通 ---------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:840px}
.section{padding-block:var(--sec)}
.bg-white{background:var(--white)}

/* セクション見出し */
.eyebrow{
  font-family:var(--en);
  font-size:clamp(13px,1.4vw,16px);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  display:block;
}
.sec-head{margin-bottom:clamp(40px,6vw,72px)}
.sec-head.center{text-align:center}
.sec-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(27px,4vw,54px);
  line-height:1.5;
  letter-spacing:.07em;
  margin-top:20px;
}
.sec-lead{
  color:var(--sub);
  font-size:clamp(14px,1.6vw,16px);
  line-height:2.1;
  margin-top:24px;
}
.sec-head.center .sec-lead{max-width:680px;margin-inline:auto}

/* ---- ボタン ------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--serif);
  font-size:14px;letter-spacing:.1em;font-weight:500;
  padding:16px 34px;
  border:1px solid var(--ink);
  color:var(--ink);
  background:transparent;
  border-radius:2px;
  transition:all .3s ease;
  white-space:nowrap;
}
.btn:hover{background:var(--ink);color:var(--white)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--white)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--white)}
.btn.sm{padding:11px 24px;font-size:13px}
.btn.ghost{border-color:var(--line)}
.btn-row{display:flex;flex-wrap:wrap;gap:16px}
.btn-row.center{justify-content:center}

/* テキストリンク（→付き） */
.link-arrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--en);font-size:16px;letter-spacing:.14em;
  color:var(--ink);text-transform:uppercase;font-weight:600;
  border-bottom:1px solid var(--ink);
  padding-bottom:4px;transition:all .3s ease;
}
.link-arrow .ja{font-family:var(--serif);font-size:14px;letter-spacing:.08em;text-transform:none;font-weight:500}
.link-arrow:hover{color:var(--accent);border-color:var(--accent)}
.link-arrow .arw{transition:transform .3s ease}
.link-arrow:hover .arw{transform:translateX(5px)}

/* タグ */
.tag{
  display:inline-block;
  font-size:11px;letter-spacing:.08em;
  color:var(--sub);
  border:1px solid var(--line);
  padding:3px 11px;border-radius:999px;
  margin:0 4px 4px 0;
  background:var(--white);
}

/* ---- ヘッダー ---------------------------------------------- */
.site-head{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--gut);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
}
/* 透過時：白文字の視認性を確保する上部スクリム */
.site-head::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,16,.42) 0%,rgba(20,18,16,.12) 60%,rgba(20,18,16,0) 100%);
  opacity:1;transition:opacity .4s ease;
}
.site-head.scrolled::before, .site-head.solid::before{opacity:0}
.site-head .logo{display:flex;align-items:center;line-height:0}
.site-head .logo img{height:48px;width:auto;transition:height .4s ease;display:block}
.site-head.scrolled .logo img, .site-head.solid .logo img{height:40px}
.head-right{display:flex;align-items:center;gap:clamp(20px,3vw,40px)}
.gnav{display:flex;align-items:center}
.navitem{position:relative;display:flex;align-items:center}
/* ／区切り */
.navitem:not(:last-child)::after{
  content:"／";margin:0 clamp(8px,1.1vw,16px);
  color:rgba(255,255,255,.55);font-size:12px;font-weight:300;transition:color .4s ease;
}
.navitem > a{
  font-size:14px;letter-spacing:.06em;color:var(--white);
  padding:8px 0;white-space:nowrap;transition:color .3s ease, opacity .3s ease;
}
.navitem.has-sub > a{padding-right:15px;position:relative}
.navitem.has-sub > a::after{
  content:"";position:absolute;right:2px;top:50%;width:6px;height:6px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:translateY(-65%) rotate(45deg);transition:transform .3s ease;opacity:.8;
}
.navitem.has-sub:hover > a::after{transform:translateY(-35%) rotate(225deg)}
.navitem > a:hover{color:var(--accent);opacity:1}
/* スクロール後 / 白背景時 */
.site-head.scrolled .navitem > a, .site-head.solid .navitem > a{color:var(--ink)}
.site-head.scrolled .navitem:not(:last-child)::after,
.site-head.solid .navitem:not(:last-child)::after{color:var(--sub)}
.site-head.scrolled .navitem > a:hover, .site-head.solid .navitem > a:hover{color:var(--accent)}

/* ドロップダウン */
.subnav{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(10px);
  min-width:210px;background:var(--white);border:1px solid var(--line);
  padding:8px 0;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;pointer-events:none;
  box-shadow:0 22px 44px -26px rgba(0,0,0,.34);
  transition:opacity .28s ease, transform .28s ease;z-index:5;
}
.navitem.has-sub:hover .subnav{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.subnav a{
  font-size:13px;color:var(--ink);padding:10px 24px;white-space:nowrap;
  letter-spacing:.04em;transition:background .2s ease, color .2s ease;
}
.subnav a:hover{background:var(--bg);color:var(--accent)}
.head-cta .btn{padding:12px 24px;font-size:13px}
.menu-btn{display:none;flex-direction:column;gap:5px;width:28px;height:20px;justify-content:center;z-index:120}
.menu-btn span{display:block;height:1.5px;background:var(--white);transition:transform .35s ease, opacity .25s ease, background .4s ease}

/* スクロール後 / 下層の白背景ヘッダー */
.site-head.scrolled, .site-head.solid{
  background:rgba(250,249,247,.94);backdrop-filter:blur(8px);
  padding-block:14px;box-shadow:0 1px 0 var(--line);
}
.site-head.scrolled .logo, .site-head.solid .logo{color:var(--ink)}
.site-head.scrolled .gnav a, .site-head.solid .gnav a{color:var(--ink)}
.site-head.scrolled .menu-btn span, .site-head.solid .menu-btn span{background:var(--ink)}

/* モバイルドロワー */
.mobile-nav{
  position:fixed;inset:0;z-index:110;
  background:var(--bg);
  padding:110px var(--gut) 48px;
  display:flex;flex-direction:column;gap:6px;
  transform:translateX(100%);transition:transform .45s cubic-bezier(.5,0,.2,1);
  overflow-y:auto;
}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{font-size:17px;padding:18px 4px;border-bottom:1px solid var(--line);letter-spacing:.06em}
.mobile-nav .mn-en{font-family:var(--en);font-size:12px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;display:block;margin-bottom:2px}
.mobile-nav .mn-cta{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.mobile-nav .mn-cta .btn{width:100%}

/* ---- フッター ---------------------------------------------- */
.site-foot{background:var(--white);border-top:1px solid var(--line);padding-block:clamp(56px,7vw,88px) 0}
.foot-grid{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;
}
.foot-brand .logo{display:inline-block;line-height:0}
.foot-brand .logo img{height:56px;width:auto}
.foot-brand p{font-size:12.5px;color:var(--sub);line-height:2;margin-top:18px}
.foot-col h6{font-family:var(--en);font-size:13px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;margin-bottom:18px;font-weight:600}
.foot-col li{margin-bottom:13px}
.foot-col a{font-size:13.5px;color:var(--ink)}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{
  margin-top:clamp(48px,6vw,72px);border-top:1px solid var(--line);
  padding:24px var(--gut);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-size:11.5px;color:var(--sub);letter-spacing:.06em;
}
.foot-sns{display:flex;gap:10px}
.foot-sns span{
  width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-family:var(--en);font-size:11px;letter-spacing:.04em;
  transition:all .3s ease;cursor:pointer;
}
.foot-sns span:hover{border-color:var(--accent);color:var(--accent)}

/* ---- SP固定CTA -------------------------------------------- */
.sp-fixed-cta{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  padding:9px 10px;gap:8px;
}
.sp-fixed-cta .btn{flex:1;padding:13px 6px;font-size:12.5px;border-radius:4px}

/* ---- スクロール演出 --------------------------------------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}

/* ---- レスポンシブ ----------------------------------------- */
@media (max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:768px){
  .gnav, .head-cta{display:none}
  .menu-btn{display:flex}
  .site-head{padding:18px var(--gut)}
  .menu-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .menu-btn.open span:nth-child(2){opacity:0}
  .menu-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .sp-fixed-cta{display:flex}
  body{padding-bottom:62px}
  .btn{padding:14px 26px}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}