/* =====================================================================
   AMOÉ TOKYO — components.css  (再利用UIコンポーネント)
   全ページで共有するパーツのスタイル。
   対応HTMLパーツ: components/header.html, components/footer.html, components/hero.html
   ===================================================================== */

/* ===== Header / Navigation ===== */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--ivory);border-bottom:1px solid var(--line);transition:box-shadow .4s,background .4s;}
header.scrolled{box-shadow:0 1px 24px rgba(43,39,35,0.06);background:rgba(247,243,236,0.94);backdrop-filter:blur(14px);}

.top-bar{display:flex;align-items:center;justify-content:flex-end;gap:22px;padding:8px 48px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);}
.lang-switch{display:flex;gap:10px;align-items:center;}
.lang-switch button, .lang-switch a{background:none;border:none;font-family:var(--sans);font-size:10px;letter-spacing:.18em;color:var(--ink-soft);cursor:pointer;transition:color .3s;padding:0;text-transform:uppercase;text-decoration:none;}
.lang-switch button.active, .lang-switch a.active{color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:2px;}
.lang-switch .divider{width:1px;height:11px;background:var(--line);}

.main-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px 48px;transition:padding .4s;}
header.scrolled .main-bar{padding:14px 48px;}

.logo{font-family:var(--serif);font-size:30px;letter-spacing:.42em;font-weight:400;padding-left:.42em;color:var(--ink);text-align:center;grid-column:2;line-height:1;transition:font-size .4s;text-decoration:none;}
header.scrolled .logo{font-size:25px;}
.logo small{display:block;font-family:var(--sans);font-size:9px;letter-spacing:.62em;color:var(--gold);margin-top:6px;padding-left:.62em;font-weight:400;}
/* ロゴ画像（.logo の中身が <img>）。高さで制御し、スクロール時に縮小 */
.logo:has(img){padding-left:0;}
.logo img{display:block;height:50px;width:auto;padding:0;transition:height .4s;}
header.scrolled .logo img{height:42px;}
@media(max-width:900px){ .logo img{height:42px;} }

nav{display:flex;gap:28px;align-items:center;grid-column:1;justify-self:start;}
nav.right{grid-column:3;justify-self:end;}
nav a{text-decoration:none;color:var(--ink-soft);font-size:11px;letter-spacing:.2em;text-transform:uppercase;transition:color .3s;position:relative;font-weight:400;}
nav a::after{content:'';position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .35s;}
nav a:hover{color:var(--ink);}
nav a:hover::after{width:100%;}
nav a.current{color:var(--ink);}
nav a.current::after{width:100%;}

.nav-cta{border:1px solid var(--gold);padding:10px 22px;color:var(--gold)!important;border-radius:1px;}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--gold);color:var(--ivory)!important;}
.nav-shop{background:var(--ink)!important;color:var(--ivory)!important;padding:10px 24px;border-radius:1px;letter-spacing:.2em;transition:background .4s,color .4s;}
.nav-shop::after{display:none;}
.nav-shop:hover{background:var(--gold)!important;color:var(--ivory)!important;}

/* ===== Mobile menu / burger ===== */
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;grid-column:3;justify-self:end;}
.burger span{width:24px;height:1.5px;background:var(--ink);transition:.3s;}
.mobile-menu{position:fixed;inset:0;background:var(--ivory);z-index:99;transform:translateX(100%);transition:transform .5s cubic-bezier(.7,0,.2,1);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu a{font-family:var(--serif);font-style:italic;font-size:28px;color:var(--ink);text-decoration:none;}
.mobile-menu a.shop{color:var(--gold);}
.mobile-menu .close{position:absolute;top:24px;right:28px;font-size:28px;background:none;border:none;cursor:pointer;color:var(--ink);}

/* ===== Page hero (下層ページ共通ヒーロー) ===== */
.page-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:150px 24px 50px;position:relative;}
.page-hero .breadcrumb{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:28px;opacity:0;animation:fadeUp 1s .1s forwards;}
.page-hero .breadcrumb a{color:var(--ink-soft);text-decoration:none;}
.page-hero .kicker{font-size:12px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;opacity:0;animation:fadeUp 1.1s .3s forwards;}
.page-hero h1{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(40px,6vw,72px);line-height:1.1;opacity:0;animation:fadeUp 1.1s .5s forwards;}
.page-hero .sub{font-family:var(--mincho);font-size:16px;color:var(--ink-soft);margin-top:24px;letter-spacing:.12em;opacity:0;animation:fadeUp 1.1s .75s forwards;max-width:640px;}

/* ===== CTA section ===== */
.page-cta{text-align:center;padding:100px 48px;background:var(--ivory-deep);}
.page-cta h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,3vw,40px);line-height:1.25;}
.page-cta p{font-family:var(--mincho);font-size:14px;color:var(--ink-soft);margin-top:18px;}
.page-cta .btns{margin-top:40px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}

/* ===== Buttons ===== */
.btn-fill{background:var(--ink);color:var(--ivory);padding:16px 42px;text-decoration:none;font-size:12px;letter-spacing:.25em;text-transform:uppercase;transition:background .4s;}
.btn-fill:hover{background:var(--gold);}
.btn-out{border:1px solid var(--ink);color:var(--ink);padding:16px 42px;text-decoration:none;font-size:12px;letter-spacing:.25em;text-transform:uppercase;transition:all .4s;}
.btn-out:hover{background:var(--ink);color:var(--ivory);}

/* ===== Footer ===== */
footer{background:var(--ivory);padding:80px 48px 40px;border-top:1px solid var(--line);}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;max-width:1200px;margin:0 auto 60px;}
.foot-colstack{display:flex;flex-direction:column;gap:34px;}
.foot-logo{font-family:var(--serif);font-size:24px;letter-spacing:.3em;}
.foot-logo img{display:block;height:63px;width:auto;margin-bottom:10px;}
.foot-logo p{font-family:var(--sans);font-size:12px;color:var(--ink-soft);letter-spacing:.1em;margin-top:18px;line-height:1.9;}
.foot-col h4{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;}
.foot-col a{display:block;text-decoration:none;color:var(--ink-soft);font-size:13px;margin-bottom:12px;letter-spacing:.05em;transition:color .3s;}
.foot-col a:hover{color:var(--ink);}
.foot-bottom{max-width:1200px;margin:0 auto;padding-top:30px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;font-size:11px;letter-spacing:.1em;color:var(--ink-soft);}

/* ===== Back to home link ===== */
.back-home{text-align:center;padding:0 48px 90px;}
.home-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);text-decoration:none;transition:gap .4s;}
.home-btn .ln{width:36px;height:1px;background:var(--gold);transition:width .4s;}
.home-btn:hover{gap:18px;}
.home-btn:hover .ln{width:54px;}

/* ===== Responsive (共通) ===== */
/* ===== 上に戻るボタン（画面右下・スクロールで出現） ===== */
.to-top{position:fixed;right:28px;bottom:28px;z-index:90;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--ivory);color:var(--ink);font-size:18px;line-height:1;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s,transform .4s,background .3s,color .3s;box-shadow:0 6px 20px rgba(43,39,35,0.08);}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.to-top:hover{background:var(--ink);color:var(--ivory);}

/* ===== Responsive (共通) ===== */
@media(max-width:900px){
  .top-bar{padding:7px 24px;gap:14px;}
  .main-bar{grid-template-columns:1fr auto 1fr;padding:14px 24px;}
  nav{display:none;}
  .logo{font-size:24px;}
  .burger{display:flex;}
  /* フッター: ロゴ＋説明文は全幅センタリング、Our World と Follow を2列同列に */
  .foot-top{grid-template-columns:1fr 1fr;gap:30px 24px;}
  .foot-logo{grid-column:1 / -1;text-align:center;}
  .foot-logo img{margin-left:auto;margin-right:auto;}
  .foot-bottom{flex-direction:column;gap:10px;text-align:center;}
  .to-top{right:18px;bottom:18px;width:42px;height:42px;}
}


/* =====================================================================
   WordPress 連携用の追加スタイル(wp_nav_menu / エディタ本文)
   ===================================================================== */
nav li{list-style:none;}
.mobile-menu li{list-style:none;}
nav li.current-menu-item > a,
nav li.current_page_item > a{color:var(--ink);}
nav li.current-menu-item > a::after,
nav li.current_page_item > a::after{width:100%;}
.mobile-menu li.current-menu-item > a{color:var(--gold);}
/* 汎用 page.php / 投稿本文 */
.entry{max-width:820px;margin:0 auto;padding:10px 24px 90px;}
.entry p{margin-bottom:1.2em;color:var(--ink-soft);}
.entry h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,3vw,38px);margin:1.2em 0 .5em;}
.entry h3{font-family:var(--mincho);font-size:18px;margin:1em 0 .4em;}
.entry img{max-width:100%;height:auto;}
.entry a{color:var(--gold);}