/* =========================================================
   NIPPONIA Operations — Corporate Site
   art direction: nostalgic & new / quiet luxury
   ========================================================= */

/* ---------------------------------------------------------
   Brand fonts
   - Moulin（購入書体）: English & numerals
   - 雫花明朝にじみ（Adobe Fonts）: Japanese
   Moulin is a licensed font: drop the web font files into
   assets/fonts/ (woff2) to activate. 雫花明朝にじみ is loaded
   via your Adobe Fonts web project (see <link> in the HTML head).
   Until supplied, the stacks fall back to the bundled web fonts.
   --------------------------------------------------------- */
@font-face{
  font-family:"Moulin"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/Moulin-Light.woff2") format("woff2");
}
@font-face{
  font-family:"Moulin"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/Moulin-Regular.woff2") format("woff2");
}
@font-face{
  font-family:"Moulin"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/Moulin-Medium.woff2") format("woff2");
}

:root{
  --kinari:        #eee3cf;   /* 生成り色 / background */
  --kinari-deep:   #e6dabf;   /* alt section bg */
  --kawara:        #2e2f31;   /* 瓦色 / text & lines */
  --kawara-soft:   #6b6c6e;   /* secondary text */
  --line:          rgba(46,47,49,.16);
  --line-strong:   rgba(46,47,49,.32);

  /* English & numerals → Moulin ／ Japanese → 雫花明朝にじみ.
     Moulin is listed first so Latin letters and digits use it even inside
     Japanese runs, while CJK glyphs fall through to 雫花明朝にじみ. */
  --serif: "Moulin", "Cormorant Garamond", "Times New Roman", serif;
  --mincho: "Moulin", "Shizuka Mincho Ne-Nijimi", "雫花明朝にじみ", "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans: "Moulin", "Shizuka Mincho Ne-Nijimi", "雫花明朝にじみ", "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;

  --gutter: clamp(22px, 6vw, 110px);
  --section-y: clamp(110px, 17vh, 210px);
  --maxw: 1240px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--kinari);
  color:var(--kawara);
  font-family:var(--mincho);
  font-weight:400;
  line-height:1.95;
  letter-spacing:.02em;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; box-shadow:inset 0 -.5em 0 rgba(46,47,49,.07); }

::selection{ background:var(--kawara); color:var(--kinari); }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:clamp(16px,2.4vw,30px) var(--gutter);
  transition:padding .5s var(--ease), background .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  padding-top:14px; padding-bottom:14px;
  background:rgba(238,227,207,.86);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--line);
}

.brand{ display:flex; align-items:center; gap:13px; }
.brand-logo-img{ height:clamp(30px,3.4vw,38px); width:auto; display:block; transition:height .5s var(--ease), filter .4s var(--ease); }
.is-scrolled .brand-logo-img{ height:clamp(26px,2.9vw,32px); filter:brightness(0) invert(.17); }
.brand-mark{ width:34px; color:var(--kawara); transition:width .5s var(--ease); }
.brand-mark svg{ width:100%; height:auto; display:block; }
.is-scrolled .brand-mark{ width:28px; }
.brand-type{ display:flex; flex-direction:column; line-height:1; }
.brand-type-main{ font-family:var(--serif); font-size:18px; letter-spacing:.16em; }
.brand-type-sub{ font-family:var(--serif); font-size:13px; letter-spacing:.34em; color:var(--kawara-soft); margin-top:3px; }

.nav{ display:flex; align-items:center; gap:clamp(11px,1.1vw,20px); }
.nav a{
  font-family:var(--sans); font-size:12px; font-weight:400;
  letter-spacing:.08em; color:var(--kawara-soft);
  position:relative; padding:4px 0; transition:color .3s;
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:-1px; width:0; height:1px;
  background:var(--kawara); transition:width .35s var(--ease);
}
.nav a:hover{ color:var(--kawara); }
.nav a:hover::after,
.nav a.is-active::after{ width:100%; }
.nav a.is-active{ color:var(--kawara); }

.nav-hotels{
  border:1px solid var(--line-strong); border-radius:999px;
  padding:8px 16px !important; color:var(--kawara) !important;
  letter-spacing:.14em; transition:background .35s var(--ease), color .35s;
}
.nav-hotels::after{ display:none; }
.nav-hotels:hover{ background:var(--kawara); color:var(--kinari) !important; }

.menu-toggle{ display:none; }

/* Header over the hero (top, before scroll) → white for legibility on the image */
.site-header:not(.is-scrolled){ text-shadow:0 1px 18px rgba(0,0,0,.32); }
.site-header:not(.is-scrolled) .brand-mark{ color:#fff; }
.site-header:not(.is-scrolled) .brand-type-main{ color:#fff; }
.site-header:not(.is-scrolled) .brand-type-sub{ color:rgba(255,255,255,.78); }
.site-header:not(.is-scrolled) .nav a{ color:rgba(255,255,255,.88); }
.site-header:not(.is-scrolled) .nav a:hover,
.site-header:not(.is-scrolled) .nav a.is-active{ color:#fff; }
.site-header:not(.is-scrolled) .nav a::after{ background:#fff; }
.site-header:not(.is-scrolled) .nav-hotels{ color:#fff !important; border-color:rgba(255,255,255,.55); }
.site-header:not(.is-scrolled) .nav-hotels:hover{ background:#fff; color:var(--kawara) !important; }
.site-header:not(.is-scrolled) .menu-toggle span{ background:#fff; }

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:var(--gutter);
  overflow:hidden; text-align:center;
}
.hero-media{ position:absolute; inset:0; z-index:0; background:#2e2f31; }
.hero-media picture{ position:absolute; inset:0; display:block; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  animation:heroZoom 18s var(--ease) forwards;
}
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(14,15,17,.46) 0%, rgba(14,15,17,.16) 34%, rgba(14,15,17,.18) 60%, rgba(14,15,17,.5) 100%),
    linear-gradient(90deg, rgba(14,15,17,.34) 0%, rgba(14,15,17,0) 62%);
}
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }

.hero-inner{ position:relative; z-index:1; color:#fff; text-shadow:0 1px 30px rgba(0,0,0,.4); display:flex; flex-direction:column; align-items:center; }
.hero-logo{ display:flex; flex-direction:column; align-items:center; margin:0; }
.hero-logo-img{ width:clamp(158px,21vw,264px); height:auto; display:block; opacity:.96; }
.hero-logo-mark{ width:clamp(50px,6.4vw,82px); color:#fff; margin:0 0 clamp(18px,3vh,30px); }
.hero-logo-mark svg{ width:100%; height:auto; display:block; }
.hero-logo-type{ display:flex; flex-direction:column; align-items:center; margin:0; }
.hero-logo-main{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,5.4vw,64px); line-height:1; letter-spacing:.18em; text-indent:.18em; }
.hero-logo-sub{ font-family:var(--serif); font-weight:400; font-size:clamp(12px,2.19vw,26px); letter-spacing:1.035em; text-indent:1.035em; color:rgba(255,255,255,.86); margin-top:clamp(8px,1.4vh,15px); }
.hero-tagline{
  font-family:var(--sans); font-weight:400; font-size:clamp(11px,1.25vw,15px);
  letter-spacing:.34em; text-transform:uppercase; text-indent:.34em;
  color:rgba(255,255,255,.92); margin:clamp(30px,5vh,52px) 0 0;
}
.hero-lead{
  font-size:clamp(15px,1.8vw,20px); letter-spacing:.08em; color:#fff;
  margin:clamp(26px,4vh,40px) 0 0; max-width:34ch;
}
.hero-scroll{
  position:absolute; left:var(--gutter); bottom:clamp(26px,5vh,52px); z-index:1;
  display:flex; align-items:center; gap:14px;
  font-family:var(--sans); font-size:11px; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(255,255,255,.85);
}
.hero-scroll-line{ width:54px; height:1px; background:rgba(255,255,255,.45); position:relative; overflow:hidden; }
.hero-scroll-line::after{
  content:""; position:absolute; inset:0; background:#fff;
  transform:translateX(-100%); animation:scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{ transform:translateX(-100%);} 50%{ transform:translateX(0);} 100%{ transform:translateX(100%);} }

/* ---------- Section frame ---------- */
.section{
  padding:var(--section-y) var(--gutter);
  border-top:1px solid var(--line);
}
/* every section is full-width; its content is capped at --maxw and centred,
   so section titles line up identically whether or not the section is --alt */
.section > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.section--alt{ background:var(--kinari-deep); }

.section-head{ margin-bottom:clamp(40px,6vh,76px); }
/* PMVV page: full-bleed image panels sit flush under the header, no section chrome */
#why{ padding:0; border-top:0; }
/* PMVV page: OUR PHILOSOPHY intro (text lead) + bottom CTA */
.philosophy{ text-align:center; border-top:0; }
.philosophy .section-label{ justify-content:center; }
.philosophy-body{ font-family:var(--mincho); font-weight:400; color:var(--kawara); font-size:clamp(15px,1.55vw,19px); line-height:2.15; letter-spacing:.04em; max-width:760px; margin:0 auto; }
.philosophy-body p{ margin:0 0 clamp(20px,3.2vh,34px); text-wrap:balance; }
.philosophy-body p:last-child{ margin-bottom:0; }
@media (max-width:640px){ .philosophy-body{ font-size:14px; line-height:2; letter-spacing:0; } }
.pmv-cta{ text-align:center; padding:clamp(60px,10vh,120px) var(--gutter); }
.section-label{
  font-family:var(--sans); font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--kawara-soft);
  display:flex; align-items:baseline; gap:14px; margin:0 0 clamp(20px,3vh,34px);
}
.section-label .num{
  font-family:var(--serif); font-size:15px; letter-spacing:.1em;
  color:var(--kawara); position:relative; padding-right:14px;
}
.section-label .num::after{
  content:""; position:absolute; right:0; top:50%; width:6px; height:1px; background:var(--line-strong);
}
.section-title{
  font-family:var(--mincho); font-weight:500;
  font-size:clamp(26px,3vw,35px); line-height:1.35; letter-spacing:.05em; margin:0;
}
.section-lead{ max-width:62ch; margin-bottom:clamp(40px,6vh,72px); }
.section-lead p{ font-size:clamp(15px,1.55vw,18px); margin:0; }
.muted{ color:var(--kawara-soft); font-size:.92em; }
.sp-br{ display:none; }

/* ---------- Shared imagery ---------- */
.value-gallery{
  list-style:none; margin:clamp(56px,8vh,100px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,30px);
}
.value-gallery figure{ margin:0; }
.value-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--kinari-deep); }
.value-gallery figcaption{ font-family:var(--mincho); font-size:13.5px; letter-spacing:.04em; color:var(--kawara-soft); margin-top:14px; line-height:1.7; }
.vg-en{ display:block; font-family:var(--serif); font-style:normal; font-weight:400;font-size:15px; color:var(--kawara); letter-spacing:.04em; margin-bottom:3px; }

.band-figure{ margin:clamp(40px,6vh,72px) 0 0; }
.band-figure img{ width:100%; height:clamp(260px,42vh,480px); object-fit:cover; display:block; }
.band-figure figcaption{ text-align:center; font-family:var(--mincho); font-size:14px; letter-spacing:.06em; color:var(--kawara-soft); margin-top:18px; }

.duo-figure{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,30px); margin:clamp(44px,6vh,72px) 0; }
.duo-figure figure{ margin:0; }
.duo-figure img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; background:var(--kinari); }
.duo-figure figcaption{ font-family:var(--mincho); font-size:14px; letter-spacing:.05em; color:var(--kawara-soft); margin-top:14px; text-align:center; }

/* ---------- About NIPPONIA & NOTE ---------- */
.about-intro{ display:grid; grid-template-columns:minmax(150px,230px) 1fr; gap:clamp(28px,4vw,64px); align-items:start; margin-bottom:clamp(40px,6vh,72px); }
.about-logo{ margin:0; padding-top:4px; }
.about-logo img{ width:100%; height:auto; display:block; mix-blend-mode:multiply; }
.about-intro .section-lead{ margin-bottom:0; }
@media (max-width: 720px){
  .about-intro{ grid-template-columns:1fr; gap:clamp(20px,4vh,30px); }
  .about-logo{ max-width:200px; }
}
.about-figure{
  width:100vw; max-width:100vw;
  margin:clamp(16px,3vh,36px) calc(50% - 50vw) clamp(44px,7vh,80px);
}
.about-figure img{ width:100%; height:auto; display:block; }
.about-flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,56px); }
.about-item{ padding-top:28px; border-top:1px solid var(--line-strong); display:flex; flex-direction:column; }
.about-key{ font-family:var(--sans); font-size:12px; letter-spacing:.1em; color:var(--kawara-soft); margin:0 0 16px; display:flex; align-items:baseline; gap:12px; }
.about-no{ font-family:var(--serif); font-size:16px; letter-spacing:.06em; color:var(--kawara); }
.about-title{ font-family:var(--mincho); font-weight:500; font-size:clamp(19px,1.9vw,25px); line-height:1.5; letter-spacing:.03em; margin:0 0 16px; }
.about-body{ font-size:14.5px; line-height:1.95; margin:0; }
.about-link{ font-family:var(--sans); font-size:13px; letter-spacing:.07em; color:var(--kawara); margin-top:22px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid var(--line-strong); padding-bottom:3px; transition:gap .35s var(--ease), border-color .3s; }
.about-link:hover{ gap:13px; border-color:var(--kawara); }
.about-link + .about-link{ margin-top:11px; }

/* ---------- About US — full-screen intro (dek style) ---------- */
.about-hero{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:clamp(110px,16vh,170px) var(--gutter) clamp(70px,10vh,120px);
  color:#fff; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,.5), 0 2px 28px rgba(0,0,0,.5);
  margin-top:0; /* image panels flush, no gap */
}
.about-hero-media{ position:absolute; inset:0; z-index:0; }
.about-hero-media img,
.about-hero-media video{ width:100%; height:100%; object-fit:cover; display:block; }
/* ABOUT US: brighten the background image slightly (veil keeps text legible) */
#about .about-hero-media img{ filter:brightness(0.95); }
@media (max-width:640px){ #about .about-hero-media img{ object-position:30% center; } }
.about-hero-veil{ position:absolute; inset:0; background:
  radial-gradient(135% 74% at 50% 56%, rgba(14,15,17,.52) 0%, rgba(14,15,17,.26) 54%, rgba(14,15,17,.12) 100%),
  linear-gradient(180deg, rgba(14,15,17,.28) 0%, rgba(14,15,17,.1) 34%, rgba(14,15,17,.32) 100%); }
.about-hero-label{
  position:absolute; top:clamp(96px,13vh,128px); left:var(--gutter); z-index:1; margin:0;
  font-family:var(--sans); font-weight:400; font-size:clamp(11px,1.2vw,14px);
  letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.92);
}
.about-hero-inner{ position:relative; z-index:1; max-width:min(940px,100%); }
.about-hero-title{ font-family:var(--mincho); font-weight:500; font-size:clamp(19px,2.5vw,30px); line-height:1.7; letter-spacing:.06em; margin:0 0 clamp(24px,3.6vh,38px); }
.about-hero-title--en{ font-weight:400; }
.about-hero-text{ max-width:730px; margin:0 auto; }
/* responsive line breaks: .br-m shows on mobile only, .br-d on desktop only */
@media (min-width:641px){ .br-m{ display:none; } }
@media (max-width:640px){ .br-d{ display:none; } }
.about-hero-text p{ font-family:var(--mincho); font-size:clamp(13.5px,1.35vw,16px); line-height:2.05; letter-spacing:.02em; margin:0 0 16px; max-width:none; color:rgba(255,255,255,.95); }
.about-hero-text p:last-child{ margin-bottom:0; }
/* mobile: shrink slightly so the specified line breaks fit without dangling characters */
@media (max-width:640px){ .about-hero-text p{ font-size:clamp(9.5px,2.9vw,12px); letter-spacing:0; line-height:2; } }

/* ---------- NIPPONIA 3.0 hero overlay extras ---------- */
.n3-eyebrow{ font-family:var(--sans); font-weight:400; font-size:clamp(11px,1.2vw,14px); letter-spacing:.28em; color:rgba(255,255,255,.9); margin:0 0 clamp(12px,2vh,18px); }
.n3-subtitle{ font-family:var(--mincho); font-weight:500; font-size:clamp(15px,1.9vw,22px); line-height:1.6; letter-spacing:.05em; color:#fff; margin:clamp(12px,1.8vh,20px) 0 clamp(24px,3.6vh,40px); }
#nipponia3 .about-hero-text{ max-width:760px; }
@media (min-width:820px){ .about-hero-text p.n3-oneline{ white-space:nowrap; } }

/* ---------- NIPPONIA 3.0 diagrams ---------- */
.n3-grid{ display:grid; grid-template-columns:1.85fr 1fr; gap:clamp(32px,4vw,72px); align-items:center; }
.n3-fig-head, .n3-steps-head{ font-family:var(--mincho); font-weight:600; font-size:clamp(15px,1.7vw,20px); letter-spacing:.05em; text-align:center; color:var(--kawara); margin:0 0 clamp(20px,3vh,32px); }
.n3-circulation{ margin:0; }
.n3-circ-svg{ display:block; width:100%; height:auto; overflow:visible; }
.n3-circ-svg text{ font-family:var(--mincho); }
.n3-hub-title{ font-family:var(--serif); font-size:22px; font-weight:400; letter-spacing:.04em; fill:var(--kawara); }
.n3-hub-sub{ font-size:11.5px; fill:var(--kawara-soft); letter-spacing:.03em; }
.n3-node-title{ font-size:20px; font-weight:600; letter-spacing:.03em; }
.n3-node-desc{ font-size:14px; letter-spacing:.02em; }

.n3-phase-list{ list-style:none; margin:0; padding:0; }
.n3-phase{ background:#fbf7ee; border:1px solid var(--line); padding:clamp(18px,2.4vh,28px) clamp(18px,2vw,28px); text-align:center; }
.n3-phase-label{ font-family:var(--mincho); font-weight:600; font-size:clamp(16px,1.8vw,21px); letter-spacing:.04em; color:var(--kawara); margin:0; display:flex; justify-content:center; align-items:baseline; gap:11px; flex-wrap:wrap; }
.n3-phase-label span{ font-family:var(--serif); font-weight:400; font-size:.8em; letter-spacing:.08em; color:var(--gold); }
.n3-phase-desc{ font-size:13.5px; line-height:1.9; letter-spacing:.02em; color:var(--kawara); margin:8px 0 0; }
.n3-down{ display:flex; justify-content:center; color:var(--gold); padding:clamp(8px,1.2vh,13px) 0; }
.n3-down svg{ width:16px; height:auto; display:block; }
.about-hero-links{
  position:absolute; left:0; right:0; bottom:clamp(28px,5vh,54px); z-index:1;
  list-style:none; margin:0; padding:0 var(--gutter);
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px clamp(22px,3.5vw,46px);
}
.about-hero-links a,
.join-ref-link a{ font-family:var(--sans); font-size:12px; letter-spacing:.08em; color:rgba(255,255,255,.9); display:inline-flex; align-items:center; gap:7px; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:3px; transition:gap .35s var(--ease), border-color .3s; }
.about-hero-links a:hover,
.join-ref-link a:hover{ gap:11px; border-color:#fff; }
.join-ref-link{ margin:2cm 0 0; text-align:center; }

/* About — map + merged description */
.about-map{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(32px,4.5vw,72px); align-items:center; margin-bottom:clamp(40px,6vh,68px); }
.about-map-img{ margin:0; position:relative; }
.about-map-img img{ width:100%; height:auto; display:block; }
.about-map-title{ font-family:var(--mincho); font-weight:500; font-size:clamp(20px,2.4vw,30px); line-height:1.55; letter-spacing:.03em; color:var(--kawara); margin:0 0 24px; }
.about-map-text p{ font-size:14.5px; line-height:1.95; color:var(--kawara); margin:0 0 16px; }
.about-map-text p:last-child{ margin-bottom:0; }
.about-links{ list-style:none; margin:0; padding:clamp(26px,3.4vh,38px) 0 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px clamp(28px,4vw,56px); }
.about-links a{ font-family:var(--sans); font-size:13px; letter-spacing:.07em; color:var(--kawara); display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid var(--line-strong); padding-bottom:3px; transition:gap .35s var(--ease), border-color .3s; }
.about-links a:hover{ gap:13px; border-color:var(--kawara); }

/* ---------- Strategy ---------- */
.strategy-block{ padding-top:clamp(40px,6vh,72px); }
.strategy-block + .strategy-block{ margin-top:clamp(48px,7vh,88px); border-top:1px solid var(--line); }
.strategy-sub{ font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--kawara-soft); margin:0 0 clamp(18px,2.6vh,26px); display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.strategy-sub span{ font-family:var(--serif); font-style:normal; font-weight:400;font-size:14px; text-transform:none; letter-spacing:.04em; }
.strategy-block-title{ font-family:var(--mincho); font-weight:500; font-size:clamp(21px,2.6vw,32px); line-height:1.4; letter-spacing:.04em; margin:0 0 clamp(28px,4vh,40px); }
.strategy-tbd{ display:flex; align-items:center; justify-content:center; min-height:clamp(160px,24vh,240px); background:var(--kinari); border:1px dashed var(--line-strong); }
.strategy-tbd p{ font-family:var(--mincho); font-size:14px; letter-spacing:.08em; color:var(--kawara-soft); margin:0; }

/* ---------- Why / PMV — full-bleed, gapless (artless work style) ---------- */
.pmv{ display:flex; flex-direction:column; gap:0; width:100vw; max-width:none; position:relative; left:50%; margin-left:-50vw; }
.pmv-item{
  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:clamp(110px,16vh,170px) var(--gutter) clamp(70px,10vh,120px);
  color:#fff; text-align:left; text-shadow:0 1px 3px rgba(0,0,0,.5), 0 2px 28px rgba(0,0,0,.5);
}
.pmv-figure{ position:absolute; inset:0; margin:0; z-index:0; }
.pmv-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.pmv-item::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(14,15,17,.62) 0%, rgba(14,15,17,.34) 40%, rgba(14,15,17,0) 78%),
    linear-gradient(180deg, rgba(14,15,17,.24) 0%, rgba(14,15,17,.12) 40%, rgba(14,15,17,.34) 100%);
}
.pmv-text{ position:relative; z-index:1; max-width:min(620px,100%); }
.pmv-key{
  position:absolute; top:clamp(96px,13vh,128px); left:var(--gutter); z-index:1; margin:0;
  font-family:var(--sans); font-weight:400; font-size:clamp(11px,1.2vw,14px);
  letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.92);
}
.pmv-jp{ font-family:var(--mincho); font-weight:500; font-size:clamp(22px,2.3vw,32px); line-height:1.45; color:#fff; margin:0 0 12px; }
.pmv-jp--en{ font-weight:400; }
.pmv-jp .pmv-mm{ font-weight:300; }
.pmv-en{ font-family:var(--serif); font-size:15px; letter-spacing:.05em; color:rgba(255,255,255,.8); margin:0 0 22px; }
.pmv-body{ font-size:14.5px; line-height:1.95; color:rgba(255,255,255,.95); margin:0; }
.pmv-body p{ margin:0 0 1.55em; text-wrap:balance; }
.pmv-body p:last-child{ margin-bottom:0; }

.corevalue{
  margin-top:0;
  position:relative; overflow:hidden;
  min-height:100svh;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:clamp(110px,16vh,170px) var(--gutter) clamp(70px,10vh,120px);
  color:#fff; text-align:left; text-shadow:0 1px 3px rgba(0,0,0,.5), 0 2px 28px rgba(0,0,0,.5);
  width:100vw; max-width:none; left:50%; margin-left:-50vw;
}
.corevalue-img{ position:absolute; inset:0; margin:0; z-index:0; }
.corevalue-img img{ width:100%; height:100%; object-fit:cover; object-position:center 85%; display:block; }
.corevalue::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(14,15,17,.62) 0%, rgba(14,15,17,.34) 40%, rgba(14,15,17,0) 78%),
    linear-gradient(180deg, rgba(14,15,17,.24) 0%, rgba(14,15,17,.12) 40%, rgba(14,15,17,.34) 100%);
}
.corevalue-inner{ position:relative; z-index:1; max-width:min(620px,100%); padding:0; }
.corevalue-key{
  position:absolute; top:clamp(96px,13vh,128px); left:var(--gutter); z-index:1; margin:0;
  font-family:var(--sans); font-weight:400; font-size:clamp(11px,1.2vw,14px);
  letter-spacing:.3em; text-transform:uppercase; color:rgba(255,255,255,.92);
}
.corevalue-figure{
  font-family:var(--mincho); font-weight:400; color:#fff;
  font-size:clamp(22px,2.3vw,32px); line-height:1.45; margin:0;
}
.corevalue-figure span,
.corevalue-figure .corevalue-pct,
.corevalue-figure .slash{ font-family:inherit; font-weight:inherit; font-size:1em; letter-spacing:0; vertical-align:baseline; color:inherit; }
.corevalue-figure .corevalue-pct{ margin-left:.12em; }
.corevalue-figure .slash{ color:rgba(255,255,255,.5); margin:0 .3em; }
.corevalue-en{ font-family:var(--serif); font-size:15px; letter-spacing:.06em; color:rgba(255,255,255,.8); margin:18px 0 24px; }
.corevalue-en .num-mincho{ font-family:var(--mincho); }
.corevalue-body{ margin:0; font-size:14.5px; line-height:1.95; color:rgba(255,255,255,.95); }
.corevalue-body p{ margin:0 0 1.55em; text-wrap:balance; }
.corevalue-body p:last-child{ margin-bottom:0; }
/* mobile: designed line breaks are desktop-only (.br-d); shrink slightly so free-flow wrapping stays even */
@media (max-width:640px){ .pmv-body, .corevalue-body{ font-size:11px; line-height:1.95; letter-spacing:0; } }
/* mobile-only: choose which part of each PMVV image shows (portrait crop = horizontal only) */
@media (max-width:640px){
  .pmv-item:nth-of-type(1) .pmv-figure img{ object-position:75% center; } /* PURPOSE: right half */
  .pmv-item:nth-of-type(2) .pmv-figure img{ object-position:20% center; } /* MISSION: person on the left */
  .corevalue-img img{ object-position:78% center; }                       /* VALUE: person on the right */
}

/* ---------- Symbol & Logo ---------- */
.symbol-layout{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(36px,5vw,84px); align-items:center; }
.brand-logo{
  margin:0; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:clamp(40px,5vw,72px) clamp(20px,3vw,40px);
  background:var(--kinari-deep); border:1px solid var(--line); color:var(--kawara);
}
.section--alt .brand-logo{ background:var(--kinari); }
.brand-logo-mark{ width:clamp(80px,9vw,116px); height:auto; margin-bottom:22px; }
.brand-logo-word{ font-family:var(--serif); font-weight:400; font-size:clamp(30px,4vw,50px); letter-spacing:.14em; line-height:1; }
.brand-logo-sub{ font-family:var(--serif); font-size:clamp(22px,3vw,34px); letter-spacing:.18em; line-height:1.2; margin-top:6px; }
.brand-logo-tag{ font-family:var(--serif); font-size:13px; letter-spacing:.22em; line-height:1.7; color:var(--kawara-soft); margin-top:18px; }
.symbol-meaning{ display:flex; flex-direction:column; gap:clamp(28px,3.5vh,40px); }
.meaning-label{ font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--kawara-soft); margin:0 0 14px; }
.meaning-lead{ font-family:var(--mincho); font-weight:500; font-size:clamp(16px,1.7vw,20px); line-height:1.7; margin:0 0 18px; }
.meaning-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line); }
.meaning-list li{ display:grid; grid-template-columns:84px 1fr; gap:18px; align-items:baseline; padding:14px 2px; border-bottom:1px solid var(--line); font-size:14.5px; letter-spacing:.02em; }
.meaning-list li span{ font-family:var(--mincho); font-weight:500; font-size:15px; color:var(--kawara); letter-spacing:.08em; }
.meaning-text{ font-size:14.5px; line-height:2; margin:0; }


/* ---------- Humanistic pyramid ---------- */
.phil-figures{ margin-top:clamp(30px,4.5vh,52px); }
/* each value (pyramid / CREDO) is its own row: text left, figure right */
.phil-row{ display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(34px,5vw,84px); align-items:center; }
.phil-row--credo{ grid-template-columns:1.2fr 0.8fr; }
.phil-row--pyramid{ grid-template-columns:0.8fr 1.2fr; align-items:start; }
.phil-row + .phil-row{ margin-top:clamp(52px,8vh,96px); padding-top:clamp(52px,8vh,96px); border-top:1px solid var(--line); }
.phil-text p{ font-size:clamp(15px,1.55vw,18px); line-height:2; letter-spacing:.01em; margin:0 0 16px; }
.phil-text p:last-child{ margin-bottom:0; }
.phil-row .pyramid{ margin:0 auto; max-width:430px; width:100%; }
.phil-row .credo{ margin:0; width:100%; }
@media (min-width:1025px){
  /* figure left, text right */
  .phil-row--pyramid .pyramid{ order:-1; }
  .phil-row--credo .credo{ order:-1; }
  .phil-row .credo-cycle{ width:100%; max-width:none; margin-top:clamp(6px,1.4vh,12px); }
  .phil-row .credo-statement{ width:30%; top:52.5%; }
  .phil-row .credo-head{ margin-bottom:4px; }
  .phil-row .credo-tagline{ margin-top:7px; }
  .phil-row .credo-name{ font-size:clamp(22px,2.4vw,32px); }
  .phil-row .credo-node-title{ font-size:clamp(15px,1.6vw,20px); }
  .phil-row .credo-node-lead{ font-size:clamp(10px,1.1vw,12.5px); }
  .phil-row .credo-statement p{ font-size:clamp(11.5px,1.25vw,14.5px); line-height:1.6; }
}
.pyramid svg{ width:100%; height:auto; display:block; }
.pyr-arrow{ stroke:rgba(238,227,207,.55); stroke-width:12; fill:none; stroke-linecap:round; }
.pyr-t{ text-anchor:middle; font-family:var(--mincho); font-weight:500; letter-spacing:.04em; }
.pyr-en{ font-weight:400; }
.pyr-goal{ font-size:18px; font-weight:600; fill:var(--kawara); letter-spacing:.06em; }
.pyr-apex{ font-size:9px; fill:var(--kinari); }
.pyr-light{ font-size:13px; fill:var(--kinari); }
.pyr-base{ font-size:18px; fill:var(--kawara); letter-spacing:.06em; }
.principles-sub{ font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--kawara-soft); margin:clamp(46px,7vh,80px) 0 8px; display:flex; align-items:baseline; gap:14px; }
.principles-sub span{ font-family:var(--serif); font-style:normal; font-weight:400;font-size:14px; text-transform:none; letter-spacing:.04em; }

/* ---------- Brand Concept ---------- */
.concept-figure{ margin:0 0 clamp(40px,6vh,68px); }
.concept-figure img{ width:100%; height:clamp(300px,52vh,600px); object-fit:cover; display:block; }
.concept-banner{
  position:relative; overflow:hidden; margin-bottom:clamp(44px,6vh,72px);
  min-height:clamp(420px,62vh,640px);
  display:flex; align-items:center; justify-content:flex-end;
  padding:clamp(28px,5vw,76px);
  color:#fff; text-shadow:0 1px 24px rgba(0,0,0,.42);
}
.concept-figure{ position:absolute; inset:0; margin:0; z-index:0; }
.concept-figure img{ width:100%; height:100%; object-fit:cover; display:block; }
.concept-banner::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(14,15,17,0) 24%, rgba(14,15,17,.62) 100%),
    linear-gradient(180deg, rgba(14,15,17,.2), rgba(14,15,17,.34));
}
.concept-overlay{ position:relative; z-index:1; width:min(48%,560px); }
.concept-eyebrow{ font-family:var(--sans); font-size:clamp(14px,1.5vw,16px); letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.85); margin:0 0 16px; }
.concept-lead{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3vw,40px); line-height:1.3; letter-spacing:.06em; color:#fff; margin:0 0 20px; }
.concept-text{ margin:0; }
.concept-text p{ font-size:14px; line-height:1.95; color:rgba(255,255,255,.92); margin:0 0 16px; }
.concept-text p:last-child{ margin-bottom:0; }
.concept-text em{ font-style:normal; color:#fff; }

/* ---------- 代表メッセージ ---------- */
.message{ max-width:680px; margin:0 auto; }
.message > p{ font-family:var(--mincho); font-size:clamp(14px,1.4vw,16px); line-height:1.78; letter-spacing:.02em; margin:0 0 .8em; }
.message-lines{ letter-spacing:.04em; }
.message-mission-inline{ font-weight:500; letter-spacing:.04em; box-shadow:inset 0 -.5em 0 rgba(46,47,49,.06); }
.message-mission{
  text-align:center; font-weight:500;
  font-size:clamp(16px,1.85vw,22px) !important; line-height:1.55 !important;
  letter-spacing:.05em; margin:.45em 0 .65em !important;
  padding-bottom:0; color:var(--kawara);
}
.message-climax{
  text-align:center; font-weight:500;
  font-size:clamp(16px,1.85vw,22px) !important; line-height:1.55 !important;
  letter-spacing:.08em; margin:.9em 0 0 !important;
}
.message-sign{ margin-top:clamp(26px,4vh,40px); text-align:right; }
.message-corp{ font-family:var(--mincho); font-weight:500; font-size:clamp(15px,1.7vw,18px); letter-spacing:.06em; margin:0 0 5px; color:var(--kawara-soft); }
.message-name{ font-family:var(--mincho); font-weight:500; font-size:clamp(15px,1.7vw,18px); letter-spacing:.1em; margin:0; }
.message-signature{ width:clamp(140px,19vw,185px); height:auto; margin:12px 0 0 auto; mix-blend-mode:multiply; }

/* ---------- NIPPONIA 3.0 / Timeline ---------- */
.timeline{ list-style:none; margin:0; padding:0; counter-reset:none; }
.timeline-item{
  display:grid; grid-template-columns:minmax(150px,220px) 1fr;
  gap:clamp(24px,4vw,72px);
  padding:clamp(30px,4vh,46px) 0;
  border-top:1px solid var(--line);
}
.timeline-item:last-child{ border-bottom:1px solid var(--line); }
.timeline-stage{ display:flex; flex-direction:column; gap:8px; }
.timeline-ver{ font-family:var(--serif); font-weight:400; font-size:clamp(38px,5vw,68px); line-height:.9; letter-spacing:.01em; }
.timeline-when{ font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--kawara-soft); }
.timeline-item.is-now .timeline-ver{ position:relative; }
.timeline-item.is-now .timeline-when{ color:var(--kawara); }
.timeline-body h3{ font-family:var(--mincho); font-weight:500; font-size:clamp(18px,2vw,25px); line-height:1.5; margin:0 0 14px; }
.timeline-body p{ font-size:15px; margin:0; max-width:56ch; }

.cycle{
  margin:clamp(46px,7vh,80px) 0 0; text-align:center;
  font-family:var(--mincho); font-size:clamp(15px,1.8vw,21px); letter-spacing:.1em; line-height:2.2;
}
.cycle span{ color:var(--line-strong); margin:0 .5em; font-family:var(--serif); }

/* ---------- Our Hotels ---------- */
.hotels-figure{ margin:0 0 clamp(44px,6vh,72px); }
.hotels-figure img{ width:100%; height:auto; display:block; }
.hotels-figure figcaption{
  font-family:var(--mincho); font-size:14px; letter-spacing:.06em; color:var(--kawara-soft);
  margin-top:18px; text-align:center;
}
.facilities{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.facility{ border-bottom:1px solid var(--line); }
.facility a, .facility > span{
  display:grid; grid-template-columns:minmax(220px,300px) 1fr auto; align-items:center;
  gap:clamp(14px,3vw,40px);
  padding:clamp(20px,2.6vh,30px) clamp(6px,1vw,18px);
  transition:background .4s var(--ease), padding-left .4s var(--ease);
}
.facility a:hover{ background:var(--kinari-deep); padding-left:24px; }
.section--alt .facility a:hover{ background:var(--kinari); }
.facility-region{ font-family:var(--sans); font-size:12.5px; letter-spacing:.1em; color:var(--kawara-soft); }
.facility-name{ font-family:var(--mincho); font-size:clamp(17px,1.9vw,23px); letter-spacing:.04em; }
.facility-arrow{ font-family:var(--serif); font-size:18px; color:var(--kawara-soft); transition:transform .4s var(--ease); }
.facility a:hover .facility-arrow{ transform:translate(4px,-4px); color:var(--kawara); }
.facility--soon{ opacity:.6; }
.facility-soon{ font-family:var(--sans); font-size:11px; letter-spacing:.12em; border:1px solid var(--line-strong); border-radius:999px; padding:2px 10px; margin-left:14px; vertical-align:2px; }
.facilities-note{ margin:30px 0 0; font-size:14px; color:var(--kawara-soft); letter-spacing:.06em; }

/* ---------- NOP CREDO（行動規範 / ver2.0 サイクル図） ---------- */
.credo{ --ink:#22324d; --gold:#b08a33; margin-top:clamp(56px,9vh,110px); }
/* fill/stroke must be set on the <svg> so <use>-referenced (shadow DOM) symbols inherit them */
.credo-ico svg{ fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.credo-head{ text-align:center; margin-bottom:clamp(8px,2vh,20px); }
.credo-name{ font-family:var(--serif); font-weight:400; font-size:clamp(26px,3.6vw,44px); letter-spacing:.24em; color:var(--ink); margin:0; }
.credo-tagline{ font-family:var(--mincho); font-size:12px; letter-spacing:.34em; color:var(--gold); margin:13px 0 0; }

/* === cycle stage （ver3.0 / refined） === */
.credo-cycle{ position:relative; width:min(800px,100%); aspect-ratio:1/1; margin:clamp(20px,3vh,44px) auto 0; }
.credo-arrows{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
/* one continuous loop the three circles sit on — endless circulation */
.credo-loop{ fill:none; stroke:rgba(210,184,124,.5); stroke-width:2.5; }

.credo-node{ position:absolute; width:40%; aspect-ratio:1; box-sizing:border-box;
  border:1px solid rgba(176,138,51,.5); border-radius:50%;
  background:radial-gradient(115% 115% at 50% 28%, #fbf7ee 0%, var(--kinari) 72%);
  box-shadow:0 14px 44px rgba(34,50,77,.07);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:clamp(22px,4%,46px); }
.credo-node--1{ left:50%; top:0; transform:translateX(-50%); }
.credo-node--2{ left:2.3%; top:52%; }
.credo-node--3{ left:57.7%; top:52%; }
.credo-ico{ display:block; width:clamp(66px,9vw,102px); color:var(--ink); margin:0 auto clamp(10px,1.5vh,16px); }
.credo-ico svg{ width:100%; height:auto; display:block; stroke-width:1.5; }
.credo-ico svg .ray :where(path){ stroke-width:1.1; }
.credo-node-title{ font-family:var(--mincho); font-weight:500; font-size:clamp(17px,1.95vw,24px); line-height:1.5; letter-spacing:.04em; color:var(--ink); margin:0 0 10px; text-align:center; }
.credo-node-lead{ font-family:var(--mincho); font-size:clamp(11px,1.3vw,14px); line-height:1.75; color:var(--kawara-soft); margin:0; text-align:center; }

/* slogan centred inside the triangle */
.credo-statement{ position:absolute; top:55%; left:50%; transform:translate(-50%,-50%); z-index:2; width:25%; text-align:center; }
.credo-statement p{ font-family:var(--mincho); font-weight:500; font-size:clamp(12.5px,1.35vw,16px); line-height:1.7; letter-spacing:.04em; color:var(--ink); margin:0; }

.quote{ margin:clamp(50px,7vh,86px) 0 0; text-align:center; }
.quote p{ font-family:var(--mincho); font-weight:500; font-size:clamp(20px,3vw,38px); line-height:1.6; letter-spacing:.06em; margin:0 0 18px; }
.quote cite{ font-family:var(--serif); font-style:normal; font-weight:400;font-size:16px; letter-spacing:.1em; color:var(--kawara-soft); }

/* ---------- People ---------- */
.person-lead{
  display:grid; grid-template-columns:minmax(280px,420px) 1fr;
  gap:clamp(30px,5vw,72px); align-items:start;
  padding-bottom:clamp(44px,6vh,72px); margin-bottom:clamp(44px,6vh,72px);
  border-bottom:1px solid var(--line);
}
.person-portrait{ margin:0; }
.person-portrait img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--kinari-deep); }
.person-lead-body{ padding-top:6px; }
.person-lead .person-role{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; color:var(--kawara-soft); margin:0 0 16px; }
.person-lead .person-name{ font-family:var(--mincho); font-weight:500; font-size:clamp(26px,3.2vw,40px); letter-spacing:.06em; margin:0 0 24px; display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.person-lead .person-en{ font-family:var(--serif); font-style:normal; font-weight:400;font-size:18px; letter-spacing:.04em; color:var(--kawara-soft); }
.person-lead .person-bio{ margin:0; }
.person-lead .person-bio p{ font-size:14.5px; line-height:2; margin:0 0 16px; }
.person-lead .person-bio p:last-child{ margin-bottom:0; }

/* ---------- 代表メッセージ（Team 冒頭） ---------- */
.ceo-message{
  display:grid; grid-template-columns:minmax(250px,350px) 1fr;
  gap:clamp(34px,5vw,80px); align-items:start;
  padding-bottom:clamp(48px,7vh,84px); margin-bottom:clamp(48px,7vh,84px);
  border-bottom:1px solid var(--line);
}
.ceo-aside .person-portrait{ margin:0 0 22px; }
.ceo-profile .person-role{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; color:var(--kawara-soft); margin:0 0 14px; }
.ceo-profile .person-name{ font-family:var(--mincho); font-weight:500; font-size:clamp(22px,2.4vw,30px); letter-spacing:.06em; margin:0 0 18px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.ceo-profile .person-en{ font-family:var(--serif); font-style:normal; font-weight:400;font-size:15px; letter-spacing:.04em; color:var(--kawara-soft); }
.ceo-profile .person-bio{ margin:0; }
.ceo-profile .person-bio p{ font-family:var(--mincho); font-size:12.5px; line-height:1.95; letter-spacing:.01em; margin:0 0 12px; color:var(--kawara); }
.ceo-profile .person-bio p:last-child{ margin-bottom:0; }
.ceo-msg-label{ font-family:var(--mincho); font-weight:500; font-size:clamp(16px,1.7vw,20px); letter-spacing:.08em; margin:0 0 clamp(20px,3vh,30px); display:flex; align-items:baseline; gap:14px; }
.ceo-msg-label span{ font-family:var(--serif); font-style:normal; font-weight:400;font-size:13px; letter-spacing:.06em; color:var(--kawara-soft); }
.ceo-message-body .message{ max-width:none; margin:0; }

.person-feature{
  display:grid; grid-template-columns:minmax(220px,300px) 1fr;
  gap:clamp(30px,4vw,72px); align-items:start;
  margin-top:clamp(40px,6vh,72px); padding-top:clamp(40px,6vh,72px);
  border-top:1px solid var(--line);
}
.person-feature-photo{ margin:0; }
.person-feature-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; background:var(--kinari-deep); }
.person-feature-body{ padding-top:4px; }
.person-feature-body .person-role{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; color:var(--kawara-soft); margin:0 0 14px; }
.person-feature-body .person-name{ font-family:var(--mincho); font-weight:500; font-size:clamp(22px,2.4vw,30px); letter-spacing:.06em; margin:0 0 20px; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; }
.person-feature-body .person-en{ font-family:var(--serif); font-style:normal; font-weight:400;font-size:15px; letter-spacing:.04em; color:var(--kawara-soft); }
.person-feature-body .person-bio p{ font-size:14px; line-height:1.95; margin:0 0 15px; }
.person-feature-body .person-bio p:last-child{ margin-bottom:0; }
.person-link{ margin:20px 0 0; }
.person-link a{ font-family:var(--sans); font-size:13px; letter-spacing:.07em; color:var(--kawara); display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid var(--line-strong); padding-bottom:3px; transition:gap .35s var(--ease), border-color .3s; }
.person-link a:hover{ gap:12px; border-color:var(--kawara); }

.people{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,3vw,48px) clamp(30px,3.6vw,60px); }
/* each member: photo left, text right, compact */
.person{ display:grid; grid-template-columns:clamp(104px,11vw,140px) minmax(0,1fr); column-gap:clamp(16px,1.6vw,24px); align-items:start; padding-top:24px; border-top:1px solid var(--line-strong); }
.person-photo{ grid-column:1; grid-row:1 / span 3; margin:0; max-width:none; overflow:hidden; }
.person-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center 28%; display:block; background:var(--kinari-deep); }
.person-role{ grid-column:2; grid-row:1; font-family:var(--sans); font-size:11px; letter-spacing:.14em; color:var(--kawara-soft); margin:0 0 8px; }
.person-name{ grid-column:2; grid-row:2; font-family:var(--mincho); font-weight:500; font-size:clamp(18px,1.9vw,23px); letter-spacing:.05em; margin:0 0 12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.person-en{ font-family:var(--serif); font-style:normal; font-weight:400;font-size:13.5px; letter-spacing:.04em; color:var(--kawara-soft); }
.person-bio{ grid-column:2; grid-row:3; font-size:13px; line-height:1.85; margin:0; }

/* ---------- Join Us ---------- */
.section--cta{ text-align:center; }
.section--cta .section-head{ text-align:left; }
.join-intro{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(34px,4.2vw,64px); align-items:stretch; }
.join-figure{ margin:0; }
.join-figure img,
.join-figure video{ width:100%; height:100%; min-height:300px; object-fit:cover; display:block; }
.join-body{ display:flex; flex-direction:column; justify-content:center; }
.join-body .join-lead{ margin:0 0 clamp(22px,3vh,32px); }
.join-lead p{ font-size:clamp(15px,1.6vw,18px); line-height:1.85; letter-spacing:.02em; margin:0; }
.join-ref{ margin-top:clamp(14px,2vh,20px) !important; }
.join-ref a{ display:inline-flex; align-items:baseline; gap:.5em; font-family:var(--mincho); font-size:clamp(13px,1.3vw,15px); line-height:1.6; letter-spacing:.03em; color:var(--kawara); text-decoration:none; border-bottom:1px solid var(--line-strong); padding-bottom:2px; transition:border-color .25s; }
.join-ref a:hover{ border-color:var(--kawara); }
.join-ref span{ font-family:var(--serif); font-style:normal; font-weight:400;font-size:.82em; color:var(--kawara-soft); letter-spacing:.06em; white-space:nowrap; }
.join-roles{ list-style:none; margin:0 0 clamp(24px,3vh,32px); padding:0; display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line); }
.join-roles li{ text-align:left; padding:15px 4px; border-bottom:1px solid var(--line); font-family:var(--mincho); font-size:clamp(15px,1.6vw,18px); letter-spacing:.04em; }
.join-body .btn{ align-self:flex-start; }
.join-roles span{ display:block; font-family:var(--serif); font-style:normal; font-weight:400;font-size:14px; color:var(--kawara-soft); margin-bottom:6px; letter-spacing:.04em; }
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--sans); font-size:14px; letter-spacing:.1em;
  border:1px solid var(--kawara); border-radius:999px;
  padding:16px 34px; transition:background .4s var(--ease), color .4s, gap .4s var(--ease);
}
.btn:hover{ background:var(--kawara); color:var(--kinari); gap:18px; }

/* ---------- Partners ---------- */
.partners{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.partner{ background:var(--kinari); padding:clamp(26px,3vw,40px); }
.section--alt .partner{ background:var(--kinari-deep); }
.partner-role{ font-family:var(--sans); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--kawara-soft); margin:0 0 16px; }
.partner-name{ font-family:var(--serif); font-size:clamp(20px,2.2vw,27px); letter-spacing:.03em; margin:0 0 16px; }
.partner-desc{ font-size:13.5px; line-height:1.9; margin:0; color:var(--kawara); }

/* ---------- News ---------- */
.news{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.news-item{
  display:grid; grid-template-columns:120px 130px 1fr; align-items:center; gap:clamp(14px,2vw,34px);
  padding:clamp(20px,2.6vh,30px) clamp(4px,1vw,12px); border-bottom:1px solid var(--line);
}
.news-item time{ font-family:var(--mincho); font-size:18px; letter-spacing:.06em; color:var(--kawara-soft); }
.news-cat{ font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--kawara-soft); border:1px solid var(--line-strong); border-radius:999px; padding:4px 12px; justify-self:start; }
.news-title{ font-family:var(--mincho); font-size:clamp(15px,1.6vw,18px); letter-spacing:.04em; margin:0; }
.news-anchor{ display:contents; }
.news-item--link{ cursor:pointer; transition:background .4s var(--ease); }
.news-item--link:hover{ background:var(--kinari-deep); }
.section--alt .news-item--link:hover{ background:var(--kinari); }
.news-arrow{ font-family:var(--serif); font-size:14px; color:var(--kawara-soft); margin-left:10px; display:inline-block; transition:transform .35s var(--ease), color .3s; }
.news-item--link:hover .news-arrow{ transform:translate(3px,-3px); color:var(--kawara); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--kawara); color:var(--kinari); padding:clamp(60px,9vh,110px) var(--gutter) clamp(30px,4vh,44px); }
.footer-top{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:50% 1fr; align-items:center; }
.footer-brand{ display:flex; flex-direction:column; align-items:center; justify-content:center; transform:translateX(-1cm); }
.footer-info{ justify-self:start; }
.footer-brand img{ width:clamp(128px,15vw,172px); height:auto; opacity:.95; display:block; }
.footer-tagline{ width:auto; text-align:center; font-family:var(--sans); font-size:clamp(9.5px,1vw,11px); letter-spacing:.13em; text-transform:uppercase; color:#fff; margin:11px 0 0; }
.company{ margin:0 auto; display:grid; grid-template-columns:auto auto; justify-content:center; align-items:baseline; column-gap:clamp(14px,1.8vw,26px); row-gap:clamp(8px,1.3vh,13px); width:fit-content; max-width:100%; }
.company > div{ display:contents; }
.company dt{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; color:rgba(238,227,207,.55); text-align:right; white-space:nowrap; }
.company dd{ margin:0; text-align:left; font-family:var(--mincho); font-size:13px; line-height:1.7; letter-spacing:.03em; max-width:min(84vw,440px); }
.company dd .en{ font-family:var(--serif); font-size:12px; color:rgba(238,227,207,.6); letter-spacing:.04em; }
.company a{ border-bottom:1px solid rgba(238,227,207,.4); transition:border-color .3s; }
.company a:hover{ border-color:var(--kinari); }
.footer-bottom{
  max-width:var(--maxw); margin:clamp(34px,5vh,56px) auto 0;
  padding-top:0; border-top:0;
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
}
.footer-hotels{ font-family:var(--serif); font-size:17px; letter-spacing:.06em; display:inline-flex; align-items:center; gap:10px; transition:gap .35s var(--ease); }
.footer-hotels:hover{ gap:15px; }
.copyright{ font-family:var(--sans); font-size:11px; letter-spacing:.14em; color:rgba(238,227,207,.55); margin:0; }

/* ---------- Reveal animation ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.hero .reveal{ transition-duration:1.3s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .hero-media img{ animation:none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .pmv-item{ min-height:100svh; align-items:flex-start; justify-content:center; padding:clamp(96px,15vh,140px) var(--gutter) clamp(60px,9vh,90px); }
  .pmv-text{ width:auto; }
}
@media (max-width: 1024px){
  .nav{
    position:fixed; top:0; left:0; right:0; z-index:90;
    height:100vh; height:100dvh;
    flex-direction:column; justify-content:center; gap:26px;
    background:var(--kinari);
    transform:translateY(-100%);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:transform .6s var(--ease), opacity .5s var(--ease), visibility 0s linear .6s;
    padding:80px var(--gutter);
  }
  .nav.is-open{
    transform:translateY(0);
    opacity:1; visibility:visible; pointer-events:auto;
    transition:transform .6s var(--ease), opacity .5s var(--ease), visibility 0s;
  }
  .nav a{ font-size:18px; letter-spacing:.1em; }
  /* menu open: links / icon / logo become kawara so they read on the cream overlay */
  .site-header.menu-open .nav a,
  .site-header.menu-open .nav a:hover,
  .site-header.menu-open .nav a.is-active{ color:var(--kawara); }
  .site-header.menu-open .nav a::after{ background:var(--kawara); }
  .site-header.menu-open .menu-toggle span{ background:var(--kawara); }
  .site-header.menu-open .brand-logo-img{ filter:brightness(0) invert(.17); }
  .nav-hotels{ padding:12px 26px !important; }
  .menu-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:6px;
    width:40px; height:40px; z-index:110; background:none; border:none; cursor:pointer; padding:0;
  }
  .menu-toggle span{ display:block; width:26px; height:1.4px; background:var(--kawara); transition:transform .4s var(--ease), opacity .3s; margin:0 auto; }
  .menu-toggle.is-open span:nth-child(1){ transform:translateY(3.7px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2){ transform:translateY(-3.7px) rotate(-45deg); }

  .person-lead{ grid-template-columns:1fr; gap:clamp(24px,4vw,40px); }
  .person-portrait img{ aspect-ratio:4/3; }
  .ceo-message{ grid-template-columns:1fr; gap:clamp(28px,5vh,44px); }
  .person-feature{ grid-template-columns:1fr; gap:clamp(22px,4vw,36px); }
  .join-intro{ grid-template-columns:1fr; gap:clamp(24px,4vh,36px); }
  .join-figure{ max-width:540px; }
  .person-feature-photo{ max-width:300px; }
  .ceo-aside{ max-width:420px; }
  .ceo-aside .person-portrait img{ aspect-ratio:4/3; }
  .people{ grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px) clamp(20px,3vw,34px); }
  .partners{ grid-template-columns:1fr 1fr; }
  .value-gallery{ grid-template-columns:repeat(3,1fr); gap:12px; }

  .symbol-layout{ grid-template-columns:1fr; gap:clamp(34px,5vh,52px); }
  .brand-logo{ padding:clamp(36px,6vw,56px) 24px; }
  .corevalue{ min-height:100svh; align-items:flex-start; justify-content:center; padding:clamp(96px,15vh,140px) var(--gutter) clamp(60px,9vh,90px); }
  .corevalue-inner{ width:auto; }
  .concept-banner{ min-height:clamp(440px,72vh,580px); align-items:flex-end; justify-content:flex-start; padding:clamp(26px,7vw,40px); }
  .concept-banner::after{ background:linear-gradient(180deg, rgba(14,15,17,.1) 0%, rgba(14,15,17,.2) 36%, rgba(14,15,17,.68) 100%); }
  .concept-overlay{ width:100%; }
  .phil-row{ grid-template-columns:1fr; gap:clamp(26px,4vh,40px); }
  .phil-row + .phil-row{ margin-top:clamp(40px,6vh,64px); padding-top:clamp(40px,6vh,64px); }
  .phil-row .pyramid{ max-width:360px; margin:0 auto; }
  .about-flow{ grid-template-columns:1fr; gap:clamp(30px,5vh,46px); }
  .about-map{ grid-template-columns:1fr; gap:clamp(24px,4vh,36px); }
  /* CREDO — collapse the cycle into a vertical stack */
  .credo-cycle{ aspect-ratio:auto; display:flex; flex-direction:column; align-items:center; gap:clamp(20px,4vh,30px); width:100%; max-width:460px; }
  .credo-arrows{ display:none; }
  .credo-node{ position:relative; inset:auto; transform:none; width:min(350px,90%); aspect-ratio:1;
    padding:clamp(30px,6vw,40px); }
  .credo-node-title{ font-size:clamp(18px,4.8vw,22px); margin-bottom:10px; }
  .credo-node-lead{ font-size:clamp(11.5px,3.2vw,13px); }
  .credo-statement{ position:static; transform:none; width:auto; margin-top:clamp(8px,2vh,16px); }
  .credo-statement p{ font-size:clamp(20px,5.6vw,27px); }
}
@media (max-width: 640px){
  .sp-br{ display:inline; }
  .footer-top{ grid-template-columns:1fr; gap:clamp(30px,5vh,46px); justify-items:center; }
  .footer-brand{ transform:none; }
  .timeline-item{ grid-template-columns:1fr; gap:18px; }
  .facility a, .facility > span{ grid-template-columns:1fr auto; gap:6px 16px; row-gap:4px; }
  .facility-region{ grid-column:1 / -1; order:-1; }
  .partners{ grid-template-columns:1fr; }
  .news-item{ grid-template-columns:auto auto; row-gap:6px; }
  .news-title{ grid-column:1 / -1; }
  .join-roles{ grid-template-columns:1fr; }
  .company > div{ grid-template-columns:1fr; gap:6px; }
  .people{ grid-template-columns:1fr; }
  .value-gallery{ grid-template-columns:1fr; gap:20px; }
  .duo-figure{ grid-template-columns:1fr; }
}

/* =========================================================
   Contact page
   ========================================================= */
.contact-page{ max-width:var(--maxw); margin:0 auto; padding:clamp(120px,16vh,180px) var(--gutter) 0; }
.contact-hero{ max-width:760px; margin:0 0 clamp(48px,7vh,84px); }
.contact-title{ font-family:var(--mincho); font-weight:500; font-size:clamp(32px,5vw,62px); letter-spacing:.05em; margin:18px 0 28px; }
.contact-intro{ font-size:clamp(15px,1.6vw,18px); line-height:2; margin:0; max-width:60ch; }

.contact-layout{
  display:grid; grid-template-columns:1.7fr 1fr; gap:clamp(40px,6vw,96px);
  align-items:start; padding-bottom:clamp(80px,12vh,140px);
}

/* ---------- About / NOP intro + value chain ---------- */
.about-nop{ margin:clamp(56px,9vh,110px) 0 0; }
.about-nop-title{ font-family:var(--mincho); font-weight:600; font-size:clamp(20px,2.4vw,28px); letter-spacing:.04em; margin:0 0 clamp(24px,3vh,34px); padding-bottom:18px; border-bottom:1px solid var(--line); }
.about-nop-grid{ display:grid; grid-template-columns:1fr 2.4fr; gap:clamp(30px,4vw,64px); align-items:center; }
.about-nop-grid > *{ min-width:0; }
.about-nop-text p{ font-size:14.5px; line-height:1.95; margin:0 0 16px; color:var(--kawara); }
.about-nop-text p:last-child{ margin-bottom:0; }
.about-nop-text em{ font-style:normal; font-weight:600; }
.vc-figure{ margin:0; }
.vc-scroll{ overflow:visible; }
.vc-svg{ display:block; width:100%; height:auto; }
.vc-svg text{ font-family:var(--mincho); }
.vc-svg text.s{ font-family:var(--sans); }
@media (max-width: 900px){
  .about-nop-grid{ grid-template-columns:1fr; gap:clamp(26px,4vh,40px); }
  .vc-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .vc-svg{ min-width:560px; }
  .n3-grid{ grid-template-columns:1fr; gap:clamp(40px,6vh,64px); }
  .n3-circulation{ max-width:520px; margin:0 auto; }
  .n3-steps{ max-width:560px; margin:0 auto; width:100%; }
}

/* ---------- News article page ---------- */
.article-page{ max-width:var(--maxw); margin:0 auto; padding:clamp(120px,16vh,180px) var(--gutter) clamp(80px,12vh,140px); }
.article-head{ max-width:820px; margin:0 0 clamp(40px,6vh,72px); padding-bottom:clamp(30px,4vh,48px); border-bottom:1px solid var(--line); }
.article-meta{ display:flex; align-items:center; gap:16px; margin:0 0 22px; }
.article-date{ font-family:var(--serif); font-size:18px; letter-spacing:.06em; color:var(--kawara-soft); }
.article-title{ font-family:var(--mincho); font-weight:600; font-size:clamp(24px,3.4vw,40px); line-height:1.55; letter-spacing:.04em; margin:0; }
.article-sub{ font-family:var(--mincho); font-size:clamp(15px,1.7vw,19px); line-height:1.85; letter-spacing:.03em; color:var(--kawara-soft); margin:20px 0 0; }
.article-lead{ max-width:820px; margin:0 0 clamp(36px,6vh,64px); }
.article-lead img{ width:100%; height:auto; display:block; }
.article-body{ max-width:720px; margin:0; }
.article-body > p{ font-family:var(--mincho); font-size:clamp(15px,1.6vw,17px); line-height:2.15; letter-spacing:.02em; margin:0 0 24px; color:var(--kawara); }
.article-body h2{ font-family:var(--mincho); font-weight:600; font-size:clamp(19px,2.2vw,25px); line-height:1.6; letter-spacing:.03em; margin:clamp(46px,7vh,72px) 0 22px; }
.article-body h3{ font-family:var(--mincho); font-weight:600; font-size:clamp(17px,1.9vw,21px); line-height:1.6; letter-spacing:.03em; margin:clamp(30px,4vh,44px) 0 20px; }
.article-body ul{ margin:0 0 24px; padding:0; list-style:none; }
.article-body ul li{ font-family:var(--mincho); font-size:clamp(15px,1.6vw,17px); line-height:1.95; letter-spacing:.02em; color:var(--kawara); padding-left:1.1em; position:relative; margin:0 0 9px; }
.article-body ul li::before{ content:""; position:absolute; left:0; top:.82em; width:5px; height:5px; border-radius:50%; background:var(--gold); }
.article-body ol{ margin:0 0 24px; padding:0; list-style:none; counter-reset:ol; }
.article-body ol li{ font-family:var(--mincho); font-size:clamp(15px,1.6vw,17px); line-height:1.95; letter-spacing:.02em; color:var(--kawara); padding-left:1.9em; position:relative; margin:0 0 9px; counter-increment:ol; }
.article-body ol li::before{ content:counter(ol) "."; position:absolute; left:0; top:0; color:var(--gold); font-family:var(--sans); font-size:.92em; }
.article-body strong{ font-weight:600; }
.policy-date{ margin:clamp(40px,6vh,64px) 0 0 !important; font-family:var(--sans); font-size:13px; letter-spacing:.08em; color:var(--kawara-soft); }
.article-body hr{ border:0; border-top:1px solid var(--line); margin:clamp(48px,7vh,72px) 0; }
.article-fig{ margin:clamp(34px,5vh,56px) 0; }
.article-fig img{ width:100%; height:auto; display:block; }
.article-fig figcaption{ font-family:var(--sans); font-size:12px; letter-spacing:.08em; color:var(--kawara-soft); margin-top:12px; }
.article-spec{ margin:4px 0 clamp(32px,5vh,48px); }
.article-spec > div{ display:grid; grid-template-columns:132px 1fr; gap:4px 26px; padding:16px 0; border-bottom:1px solid var(--line); }
.article-spec > div:first-child{ border-top:1px solid var(--line); }
.article-spec dt{ font-family:var(--sans); font-size:13px; letter-spacing:.08em; color:var(--kawara-soft); padding-top:2px; }
.article-spec dd{ font-family:var(--mincho); font-size:clamp(15px,1.6vw,17px); line-height:1.9; color:var(--kawara); margin:0; }
.article-spec dd ul{ margin:0; }
.article-spec dd ul li{ margin:0 0 7px; }
.article-spec dd ul li:last-child{ margin-bottom:0; }
@media (max-width:560px){
  .article-spec > div{ grid-template-columns:1fr; gap:6px; }
}
/* brand mark (logo) */
.article-brandmark{ max-width:720px; text-align:center; margin:clamp(30px,5vh,56px) 0 clamp(4px,1vh,10px); }
.article-brandmark img{ width:clamp(150px,20vw,206px); height:auto; display:inline-block; }
.article-brandmark figcaption{ font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--kawara-soft); margin-top:16px; }
/* centered verse */
.article-verse{ font-family:var(--mincho); text-align:center; font-size:clamp(15px,1.7vw,18px); line-height:2.25; letter-spacing:.06em; color:var(--kawara); margin:clamp(30px,4.5vh,48px) auto; }
/* brand core values */
.article-values{ list-style:none; margin:8px 0 26px; padding:0; border-top:1px solid var(--line); }
.article-values li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; padding:17px 0; border-bottom:1px solid var(--line); margin:0; }
.article-values li::before{ display:none; }
.article-values .v-en{ font-family:var(--serif); font-weight:400; font-size:clamp(19px,2.3vw,25px); letter-spacing:.02em; line-height:1.2; color:var(--kawara); }
.article-values .v-jp{ font-family:var(--mincho); font-size:clamp(13px,1.5vw,15px); letter-spacing:.03em; color:var(--kawara-soft); }
/* profile portrait (large, photo above text) */
.profile-photo-lg{ margin:8px 0 24px; width:100%; }
.profile-photo-lg img{ width:100%; height:auto; display:block; border-radius:2px; }
.profile-role{ font-family:var(--mincho); font-weight:600; font-size:clamp(15px,1.6vw,17px); letter-spacing:.02em; margin:0 0 18px; color:var(--kawara); }
/* compact heading (fits on one line) */
.article-body h2.h2-compact{ font-size:clamp(15px,1.7vw,19px); white-space:nowrap; }
@media (max-width:560px){ .article-body h2.h2-compact{ white-space:normal; font-size:clamp(15px,4vw,18px); } }
/* representative comment */
.article-comment{ margin:6px 0 24px; padding:0; background:none; border:0; }
.article-comment p{ font-family:var(--mincho); font-size:clamp(15px,1.6vw,17px); line-height:2.15; letter-spacing:.02em; margin:0 0 24px; color:var(--kawara); }
.article-comment p:last-child{ margin-bottom:0; }
.article-pull{
  font-family:var(--mincho); font-weight:500; font-size:clamp(16px,1.9vw,21px); line-height:1.85;
  letter-spacing:.05em; text-align:center; color:var(--kawara);
  margin:clamp(28px,4vh,42px) auto; padding:0; max-width:none;
}
.article-back{ margin:clamp(52px,8vh,84px) 0 0; padding-top:clamp(30px,4vh,44px); border-top:1px solid var(--line); }
.article-back a{ font-family:var(--sans); font-size:13px; letter-spacing:.1em; color:var(--kawara-soft); text-decoration:none; transition:color .3s var(--ease); }
.article-back a span{ display:inline-block; margin-right:8px; transition:transform .35s var(--ease); }
.article-back a:hover{ color:var(--kawara); }
.article-back a:hover span{ transform:translateX(-4px); }

/* form */
.contact-form{ display:flex; flex-direction:column; gap:clamp(26px,3.4vh,38px); border:0; }
.contact-form .h-captcha{ min-height:78px; margin:-4px 0; }
.contact-form .hp-field{ display:none !important; }
.field{ display:flex; flex-direction:column; gap:10px; border:0; padding:0; margin:0; min-width:0; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,34px); }
.field label, .field legend{ font-family:var(--sans); font-size:13px; letter-spacing:.08em; color:var(--kawara); padding:0; }
.req{ font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; color:var(--kinari); background:var(--kawara); border-radius:3px; padding:2px 7px; margin-left:8px; vertical-align:1px; }
.opt{ font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; color:var(--kawara-soft); border:1px solid var(--line-strong); border-radius:3px; padding:2px 7px; margin-left:8px; vertical-align:1px; }

.field input, .field textarea{
  font-family:var(--mincho); font-size:16px; color:var(--kawara);
  background:rgba(255,255,255,.4); border:1px solid var(--line-strong); border-radius:0;
  padding:14px 16px; width:100%; letter-spacing:.03em;
  transition:border-color .3s var(--ease), background .3s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; line-height:1.9; }
.field input::placeholder, .field textarea::placeholder{ color:var(--kawara-soft); opacity:.6; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--kawara); background:rgba(255,255,255,.72); }

.field--type legend{ margin-bottom:16px; }
.radio-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 32px; }
.radio{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:2px 0; }
.radio input{
  appearance:none; -webkit-appearance:none; box-sizing:border-box; padding:0; margin:0;
  width:13px; height:13px; flex:0 0 auto;
  border:1px solid var(--line-strong); border-radius:50%; background:transparent; cursor:pointer;
  transition:background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.radio:hover input{ border-color:var(--kawara); }
.radio input:checked{ background:var(--kawara); border-color:var(--kawara); }
.radio input:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(176,138,51,.35); }
.radio span{ font-family:var(--mincho); font-size:14.5px; letter-spacing:.04em; color:var(--kawara); }

.privacy{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.privacy input{
  appearance:none; -webkit-appearance:none; width:17px; height:17px; margin:4px 0 0; flex:0 0 auto;
  border:1px solid var(--line-strong); border-radius:4px; background:#fff; cursor:pointer;
  position:relative; transition:background .2s var(--ease), border-color .2s var(--ease);
}
.privacy input:checked{ background:var(--kawara); border-color:var(--kawara); }
.privacy input:checked::after{ content:""; position:absolute; left:5.5px; top:2px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.privacy span{ font-size:13.5px; line-height:1.85; color:var(--kawara-soft); }
.privacy a{ color:var(--kawara); border-bottom:1px solid var(--line-strong); padding-bottom:1px; transition:border-color .3s; }
.privacy a:hover{ border-color:var(--kawara); }

.form-note{ font-family:var(--sans); font-size:13px; line-height:1.8; margin:0; min-height:1px; }
.form-note.is-error{ color:#9a3b2f; }
.form-note.is-ok{ color:var(--kawara); }

.btn--solid{ align-self:flex-start; background:var(--kawara); color:var(--kinari); border-color:var(--kawara); }
.btn--solid:hover{ background:transparent; color:var(--kawara); }

/* aside */
.contact-aside{ border-top:1px solid var(--line-strong); padding-top:34px; display:flex; flex-direction:column; gap:32px; }
.aside-block{}
.aside-label{ font-family:var(--serif); font-style:normal; font-weight:400;font-size:16px; color:var(--kawara-soft); margin:0 0 8px; letter-spacing:.04em; }
.aside-lead{ font-family:var(--sans); font-size:12px; letter-spacing:.14em; color:var(--kawara-soft); margin:0 0 8px; }
.aside-text{ font-family:var(--mincho); font-size:15px; line-height:1.9; letter-spacing:.03em; margin:0; }
.aside-text a{ border-bottom:1px solid var(--line-strong); transition:border-color .3s; }
.aside-text a:hover{ border-color:var(--kawara); }
.aside-back{ margin:8px 0 0; }
.aside-back a{ font-family:var(--sans); font-size:13px; letter-spacing:.08em; color:var(--kawara-soft); transition:color .3s; }
.aside-back a:hover{ color:var(--kawara); }

@media (max-width: 860px){
  .contact-layout{ grid-template-columns:1fr; gap:clamp(40px,6vh,60px); }
  .contact-aside{ order:-1; border-top:0; border-bottom:1px solid var(--line-strong); padding:0 0 34px; }
}
@media (max-width: 560px){
  .field-row{ grid-template-columns:1fr; }
  .radio-grid{ grid-template-columns:1fr; }
}