/*
Theme Name: HS Kitchen
Theme URI: https://hs-kitchen.com/
Description: HSキッチン公式サイト リデザインテーマ。オーダーキッチン・洗面・造作家具（福井）。6ページのデザインモックを元に新規構築。
Author: HS Kitchen
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: hskitchen
*/

:root{
  --bg:#f7f4ef;
  --bg-deep:#161714;
  --ink:#23241f;
  --ink-soft:#494841;
  --line:#d8d2c6;
  --accent:#9d7e52;
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --en:"Cormorant Garamond",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;line-height:2;letter-spacing:.06em;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ===== header ===== */
.header{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:28px 48px;transition:.5s;color:#fff}
.header.solid{background:rgba(247,244,239,.92);backdrop-filter:blur(12px);color:var(--ink);padding:16px 48px;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.brand{display:flex;align-items:baseline;gap:14px}
.brand .logo{font-family:var(--en);font-size:26px;font-weight:500;letter-spacing:.18em}
.brand .tag{font-size:10px;letter-spacing:.3em;opacity:.75}
.nav{display:flex;gap:40px;font-size:12px;letter-spacing:.25em;text-transform:uppercase}
.nav a{position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:.4s}
.nav a:hover::after,.nav a.now::after{width:100%}
.nav .cta{border:1px solid currentColor;padding:8px 22px;border-radius:999px;transition:.4s}
.nav .cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.nav .cta::after{display:none}

/* ===== page hero (下層ページ共通) ===== */
.page-hero{background:var(--bg-deep);color:#f2efe8;padding:190px 48px 90px;position:relative;overflow:hidden}
.page-hero .inner{max-width:1180px;margin:0 auto;position:relative;z-index:1}
.page-hero .en-bg{position:absolute;right:-2%;bottom:-26%;font-family:var(--en);font-size:20vw;line-height:1;color:rgba(255,255,255,.04);white-space:nowrap;pointer-events:none}
.page-hero h1{font-family:var(--en);font-weight:400;font-size:clamp(46px,6vw,72px);line-height:1;letter-spacing:.08em}
.page-hero .ja{display:block;margin-top:20px;font-family:var(--sans);font-size:12px;letter-spacing:.4em;color:var(--accent)}
.page-hero p{margin-top:28px;font-size:14px;letter-spacing:.12em;color:rgba(242,239,232,.92);max-width:640px}

/* ===== reveal ===== */
.rv{opacity:0;transform:translateY(36px);transition:opacity 1.1s ease,transform 1.1s ease}
.rv.in{opacity:1;transform:none}

/* スマホ専用改行（入力欄の @@ / ＠＠ がこれに変換される。PCでは非表示） */
.sp-br{display:none}

/* ===== footer ===== */
footer{background:var(--bg-deep);color:rgba(242,239,232,.9);padding:90px 48px 36px;border-top:1px solid rgba(255,255,255,.08)}
.f-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px}
.f-logo{font-family:var(--en);font-size:24px;letter-spacing:.18em;color:#fff}
.f-grid .addr{margin-top:22px;font-size:12px;line-height:2.4;letter-spacing:.12em}
.f-grid h4{font-family:var(--en);font-size:12px;letter-spacing:.35em;color:var(--accent);margin-bottom:18px;text-transform:uppercase}
.f-grid ul{list-style:none;font-size:12px;letter-spacing:.16em}
.f-grid li{margin-bottom:12px}
.f-grid a:hover{color:#fff}
.copy{max-width:1180px;margin:70px auto 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;font-family:var(--en);font-size:11px;letter-spacing:.25em;color:rgba(242,239,232,.4)}

/* ===== mobile menu ===== */
.menu-btn{display:none;position:relative;width:44px;height:44px;background:none;border:none;cursor:pointer;color:inherit;padding:0}
.menu-btn span{position:absolute;left:10px;width:24px;height:1.5px;background:currentColor;transition:.45s cubic-bezier(.19,1,.22,1)}
.menu-btn span:nth-child(1){top:15px}
.menu-btn span:nth-child(2){top:22px}
.menu-btn span:nth-child(3){top:29px}
body.menu-open{overflow:hidden}
body.menu-open .header{background:transparent;backdrop-filter:none;box-shadow:none;color:#f2efe8}
body.menu-open .menu-btn span:nth-child(1){top:22px;transform:rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){opacity:0}
body.menu-open .menu-btn span:nth-child(3){top:22px;transform:rotate(-45deg)}
.m-menu{position:fixed;inset:0;z-index:99;background:rgba(22,23,20,.97);display:flex;flex-direction:column;justify-content:center;padding:0 38px;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility .55s}
body.menu-open .m-menu{opacity:1;visibility:visible}
.m-nav{display:flex;flex-direction:column}
.m-nav a{display:flex;align-items:baseline;gap:18px;padding:17px 2px;color:#f2efe8;border-bottom:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.m-nav a .e{font-family:var(--en);font-size:28px;font-weight:400;letter-spacing:.12em;line-height:1.2}
.m-nav a .j{font-size:10px;letter-spacing:.3em;color:rgba(242,239,232,.55)}
.m-nav a.now .e{color:var(--accent)}
body.menu-open .m-nav a{opacity:1;transform:none}
body.menu-open .m-nav a:nth-child(1){transition-delay:.08s}
body.menu-open .m-nav a:nth-child(2){transition-delay:.14s}
body.menu-open .m-nav a:nth-child(3){transition-delay:.2s}
body.menu-open .m-nav a:nth-child(4){transition-delay:.26s}
body.menu-open .m-nav a:nth-child(5){transition-delay:.32s}
body.menu-open .m-nav a:nth-child(6){transition-delay:.38s}
.m-menu .m-tel{margin-top:44px;font-size:11px;letter-spacing:.22em;color:rgba(242,239,232,.6);opacity:0;transition:opacity .6s .45s}
body.menu-open .m-menu .m-tel{opacity:1}
.m-menu .m-tel b{display:block;font-family:var(--en);font-size:22px;font-weight:400;letter-spacing:.08em;color:#f2efe8;margin-top:6px}

/* ===== shared mobile ===== */
@media (max-width:860px){
  .sp-br{display:inline}
  .header{padding:16px 20px}.header.solid{padding:12px 20px}.nav{display:none}.menu-btn{display:block}
  .brand .logo{font-size:21px;white-space:nowrap}
  .brand .tag{display:none}
  .page-hero{padding:130px 20px 54px}
  .page-hero h1{font-size:40px}
  .page-hero p{font-size:13px;line-height:2.2}
  footer{padding:64px 24px 30px}
  .f-grid{grid-template-columns:1fr;gap:36px}
  .copy{flex-direction:column;gap:8px}
}