/* =========================================================
   DOMON CORPORATION — design system
   "Quiet authority / editorial earth"
   ========================================================= */
:root{
  --brand:        oklch(0.46 0.038 42);   /* #72554E earth */
  --brand-deep:   oklch(0.36 0.040 42);
  --brand-soft:   oklch(0.53 0.036 45);   /* darkened for AA contrast on small labels */
  --paper:        oklch(0.972 0.006 70);
  --paper-2:      oklch(0.945 0.010 68);
  --paper-3:      oklch(0.915 0.013 66);
  --ink:          oklch(0.255 0.018 45);
  --ink-2:        oklch(0.42 0.018 48);
  --line:         oklch(0.86 0.012 64);
  --gold:         oklch(0.70 0.075 70);

  --space-2:4px; --space-3:8px; --space-4:12px; --space-5:16px;
  --space-6:24px; --space-7:32px; --space-8:48px; --space-9:64px; --space-10:96px; --space-11:140px;

  --disp:"Shippori Mincho", serif;
  --lat:"Marcellus", serif;
  --body:"Zen Kaku Gothic New", sans-serif;
  --measure:64ch;
  --header-h:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-weight:400; line-height:1.85;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--brand); color:var(--paper)}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:2px}

.skip{position:absolute; left:-999px; top:0; background:var(--brand); color:var(--paper); padding:12px 18px; z-index:100}
.skip:focus{left:8px; top:8px}

.wrap{width:min(1240px,90vw); margin-inline:auto}
.eyebrow{font-family:var(--lat); letter-spacing:.34em; text-transform:uppercase; font-size:.72rem; color:var(--brand); display:inline-flex; align-items:center; gap:var(--space-4)}
.eyebrow::before{content:""; width:34px; height:1px; background:currentColor; display:inline-block}
.eyebrow.c{justify-content:center}

/* ---------- header ---------- */
.site-header{position:fixed; inset:0 0 auto 0; z-index:60; display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-5) clamp(20px,5vw,60px); transition:background .5s ease, box-shadow .5s ease, padding .5s ease}
.site-header.solid{background:color-mix(in oklch,var(--paper) 88%,transparent); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); padding-block:var(--space-4)}
.site-header.inner{background:color-mix(in oklch,var(--paper) 92%,transparent); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line)}
.brandmark{display:flex; align-items:center; gap:var(--space-5)}
.brandmark img{width:48px; height:auto}
.brandmark .nm{font-family:var(--disp); font-weight:700; font-size:1.25rem; letter-spacing:.14em; color:var(--ink)}
.brandmark .nm small{display:block; font-family:var(--lat); font-size:.6rem; letter-spacing:.3em; color:var(--brand-soft); margin-top:3px}
.nav{display:flex; align-items:center; gap:clamp(16px,2.2vw,38px)}
.nav a.lnk{font-size:.85rem; letter-spacing:.06em; color:var(--ink-2); position:relative; padding-block:4px; transition:color .3s}
.nav a.lnk::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--brand); transition:width .35s cubic-bezier(.2,.7,.2,1)}
.nav a.lnk:hover{color:var(--ink)} .nav a.lnk:hover::after,.nav a.lnk[aria-current="page"]::after{width:100%}
.nav a.lnk[aria-current="page"]{color:var(--ink)}
.nav .cta{font-size:.8rem; color:var(--paper); background:var(--brand); padding:10px 20px; letter-spacing:.08em; transition:background .3s}
.nav .cta:hover{background:var(--brand-deep)}
.menu-btn{display:none; flex-direction:column; gap:5px; width:30px; height:24px; justify-content:center; background:none; border:0; cursor:pointer; padding:0; z-index:70}
.menu-btn span{display:block; height:2px; width:100%; background:var(--ink); transition:transform .4s, opacity .3s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:var(--space-4); font-family:var(--body); font-weight:500; letter-spacing:.06em; background:var(--brand); color:var(--paper); padding:15px 34px; font-size:.95rem; transition:background .35s, gap .35s; border:0; cursor:pointer}
.btn:hover{background:var(--brand-deep); gap:var(--space-6)}
.btn .ar{font-family:var(--lat)}
.btn.ghost{background:transparent; color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand)}
.btn.ghost:hover{background:var(--brand); color:var(--paper)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}

/* ---------- page hero (inner pages) ---------- */
.page-hero{padding:calc(var(--header-h) + clamp(60px,12vh,120px)) 0 clamp(40px,7vh,80px); border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.page-hero::after{content:""; position:absolute; right:-6%; top:-30%; width:48%; height:160%; background:radial-gradient(closest-side, var(--paper-2), transparent 70%); z-index:-1}
.page-hero .jp{font-family:var(--disp); font-weight:700; font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:.06em; line-height:1.2; margin-top:var(--space-5)}
.page-hero .en{font-family:var(--lat); letter-spacing:.28em; text-transform:uppercase; color:var(--brand-soft); font-size:.8rem; margin-top:var(--space-4)}
.breadcrumb{font-size:.76rem; color:var(--ink-2); letter-spacing:.04em; display:flex; gap:var(--space-3); align-items:center}
.breadcrumb a:hover{color:var(--brand)}
.breadcrumb span{color:var(--brand-soft)}

/* ---------- generic section ---------- */
.section{padding:clamp(70px,12vh,150px) 0}
.section.alt{background:var(--paper-2); border-block:1px solid var(--line)}
.lead{font-family:var(--disp); font-weight:600; font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.6; color:var(--ink); max-width:24ch}
.prose{color:var(--ink-2); max-width:var(--measure); font-size:1.06rem; line-height:1.95}
.prose p{margin-bottom:var(--space-5)}
/* 代表挨拶 letter — larger, more readable */
.prose.greeting{font-size:clamp(1.12rem,1.5vw,1.28rem); line-height:2.15; color:var(--ink); max-width:48ch}
.section-head{margin-bottom:var(--space-9)}
.section-head h2{font-family:var(--disp); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.8rem); letter-spacing:.04em; line-height:1.25; margin-top:var(--space-4)}

/* ---------- profile table ---------- */
.spec-table{width:100%; border-top:1px solid var(--line)}
.spec-table .row{display:grid; grid-template-columns:clamp(120px,22%,220px) 1fr; gap:var(--space-6); padding:var(--space-6) var(--space-3); border-bottom:1px solid var(--line); align-items:baseline}
.spec-table dt, .spec-table .k{font-family:var(--disp); color:var(--brand); font-size:.98rem; letter-spacing:.04em}
.spec-table dd, .spec-table .v{color:var(--ink); font-size:.98rem}
.spec-table .v small{color:var(--ink-2); display:block; font-size:.84rem}

/* ---------- timeline ---------- */
.timeline{position:relative; margin-top:var(--space-6)}
.timeline .ev{display:grid; grid-template-columns:clamp(110px,18%,180px) 1fr; gap:clamp(20px,4vw,56px); padding:var(--space-7) 0; border-top:1px solid var(--line); position:relative}
.timeline .ev:last-child{border-bottom:1px solid var(--line)}
.timeline .yr{font-family:var(--lat); color:var(--brand-soft); font-size:1.05rem; letter-spacing:.06em}
.timeline .yr b{display:block; font-family:var(--disp); color:var(--brand); font-size:1.25rem; font-weight:700; letter-spacing:.04em}
.timeline .ev p{color:var(--ink); max-width:54ch}

/* ---------- principle list ---------- */
.principles{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:1px; background:var(--line); border:1px solid var(--line)}
.principles .p{background:var(--paper); padding:clamp(28px,3.4vw,40px)}
.principles .p .ix{font-family:var(--lat); color:var(--brand-soft); letter-spacing:.2em; font-size:.72rem}
.principles .p h3{font-family:var(--disp); font-weight:600; font-size:1.3rem; color:var(--ink); margin:var(--space-4) 0 var(--space-4)}
.principles .p p{color:var(--ink-2); font-size:.92rem}

/* ---------- pillar list (home + business) ---------- */
.plist{display:flex; flex-direction:column}
.pill{display:grid; grid-template-columns:clamp(54px,7vw,110px) 1fr auto; gap:clamp(18px,4vw,56px); align-items:baseline; padding:clamp(26px,4vw,44px) 0; border-top:1px solid var(--line); transition:padding-left .5s cubic-bezier(.2,.7,.2,1)}
.pill:last-child{border-bottom:1px solid var(--line)}
.pill:hover,.pill:focus-visible{padding-left:var(--space-5)}
.pill .no{font-family:var(--lat); font-size:clamp(1rem,1.4vw,1.3rem); color:var(--brand-soft); letter-spacing:.1em}
.pill h3{font-family:var(--disp); font-weight:600; font-size:clamp(1.4rem,2.6vw,2rem); color:var(--ink); margin-bottom:var(--space-4)}
.pill h3 em{font-family:var(--lat); font-style:normal; font-size:.78rem; letter-spacing:.22em; color:var(--brand-soft); display:block; margin-top:6px; text-transform:uppercase}
.pill p{color:var(--ink-2); max-width:54ch; font-size:.96rem}
.pill .go{font-family:var(--lat); letter-spacing:.2em; font-size:.74rem; color:var(--brand); white-space:nowrap; opacity:0; transform:translateX(-8px); transition:.4s}
.pill:hover .go,.pill:focus-visible .go{opacity:1; transform:none}

/* ---------- detailed business blocks ---------- */
.biz{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:center; padding:clamp(50px,8vh,110px) 0; border-top:1px solid var(--line)}
.biz:nth-child(even) .biz-media{order:2}
.biz-media{aspect-ratio:4/3; overflow:hidden; position:relative; background:var(--paper-3)}
.biz-media img{width:100%; height:100%; object-fit:cover}
.biz-media .tag{position:absolute; top:var(--space-5); left:var(--space-5); font-family:var(--lat); letter-spacing:.18em; font-size:.6rem; color:var(--paper); background:color-mix(in oklch,var(--ink) 55%,transparent); padding:5px 10px}
.biz h3{font-family:var(--disp); font-weight:700; font-size:clamp(1.6rem,3vw,2.3rem); margin:var(--space-4) 0 var(--space-5); line-height:1.3}
.biz h3 em{font-family:var(--lat); font-style:normal; font-size:.78rem; letter-spacing:.22em; color:var(--brand-soft); display:block; margin-bottom:var(--space-4); text-transform:uppercase}
.biz .scope{list-style:none; margin-top:var(--space-6); display:flex; flex-direction:column; gap:var(--space-3)}
.biz .scope li{display:flex; gap:var(--space-4); align-items:baseline; color:var(--ink); font-size:.94rem}
.biz .scope li::before{content:"—"; color:var(--brand); font-family:var(--lat)}

/* ---------- vision band ---------- */
.vision{position:relative; padding:clamp(80px,15vh,190px) 0; color:var(--paper); overflow:hidden; background:var(--brand-deep)}
.vision::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 82% 110%, color-mix(in oklch,var(--gold) 40%,transparent), transparent 55%); opacity:.5}
.vision .wrap{position:relative}
.vision .eyebrow{color:color-mix(in oklch,var(--paper) 86%,transparent)}
.vision h2{font-family:var(--disp); font-weight:700; font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.32; margin:var(--space-6) 0 var(--space-7); max-width:18ch}
.vision p{color:color-mix(in oklch,var(--paper) 86%,transparent); max-width:56ch; font-size:1.04rem; margin-bottom:var(--space-8)}
.vtags{display:flex; flex-wrap:wrap; gap:var(--space-4)}
.vtags span{border:1px solid color-mix(in oklch,var(--paper) 40%,transparent); padding:9px 18px; font-size:.82rem; letter-spacing:.08em; color:color-mix(in oklch,var(--paper) 92%,transparent)}

/* ---------- asset feature ---------- */
.feature{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,6vw,90px); align-items:center}
.feature .media{aspect-ratio:4/5; overflow:hidden; position:relative; background:var(--paper-3)}
.feature .media img{width:100%; height:100%; object-fit:cover}
.feature .media .tag{position:absolute; top:var(--space-6); left:var(--space-6); font-family:var(--lat); letter-spacing:.18em; font-size:.6rem; color:var(--paper); background:color-mix(in oklch,var(--ink) 50%,transparent); padding:5px 11px}
.feature h2{font-family:var(--disp); font-weight:700; font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.32; margin:var(--space-5) 0 var(--space-6)}
.spec-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--space-6)}
.spec-grid div{background:var(--paper); padding:var(--space-5) var(--space-6)}
.spec-grid dt{font-size:.7rem; letter-spacing:.12em; color:var(--brand-soft); font-family:var(--lat); text-transform:uppercase; margin-bottom:4px}
.spec-grid dd{font-family:var(--disp); font-size:1.02rem; color:var(--ink)}

/* ---------- cards / news ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:var(--space-7)}
.news-item{display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6) 0; border-top:1px solid var(--line)}
.news-item time{font-family:var(--lat); color:var(--brand-soft); font-size:.78rem; letter-spacing:.1em}
.news-item .cat{font-size:.7rem; letter-spacing:.1em; color:var(--paper); background:var(--brand-soft); padding:3px 9px; align-self:flex-start}
.news-item p{color:var(--ink); font-size:.98rem}

/* ---------- photo gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:var(--space-5); margin-top:var(--space-6)}
.gallery figure{margin:0; position:relative; overflow:hidden; background:var(--paper-3)}
.gallery figure img{width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute; left:0; right:0; bottom:0; padding:var(--space-6) var(--space-5) var(--space-4); color:var(--paper); font-size:.84rem; letter-spacing:.04em; background:linear-gradient(to top, color-mix(in oklch,var(--ink) 78%,transparent), transparent)}
.gallery figcaption b{font-family:var(--disp); font-weight:600; display:block; font-size:.96rem; letter-spacing:.06em}

/* ---------- contact form ---------- */
.form-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px)}
.field{margin-bottom:var(--space-6)}
.field label{display:block; font-size:.84rem; letter-spacing:.06em; color:var(--ink); margin-bottom:var(--space-3)}
.field label .req{color:var(--brand); font-size:.7rem; margin-left:6px; font-family:var(--lat)}
.field input,.field textarea,.field select{width:100%; background:var(--paper); border:1px solid var(--line); padding:13px 15px; font-family:var(--body); font-size:.95rem; color:var(--ink); transition:border-color .3s}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand); outline:none}
.field textarea{min-height:140px; resize:vertical}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#a3372f; background:color-mix(in oklch,#a3372f 5%,var(--paper))}
.field .err{display:block; color:#a3372f; font-size:.78rem; margin-top:var(--space-3); letter-spacing:.02em}
.field-check label{display:flex; align-items:flex-start; gap:var(--space-4); font-size:.86rem; line-height:1.7; cursor:pointer}
.field-check input{width:auto; flex:0 0 auto; margin-top:3px}
.field-check a{color:var(--brand); text-decoration:underline; text-underline-offset:2px}
.form-status{padding:14px 18px; margin-bottom:var(--space-6); font-size:.9rem; border:1px solid var(--line); line-height:1.7}
.form-status.ok{border-color:var(--brand); background:color-mix(in oklch,var(--brand) 8%,var(--paper)); color:var(--brand-deep)}
.form-status.ng{border-color:#a3372f; background:color-mix(in oklch,#a3372f 6%,var(--paper)); color:#a3372f}
.contact-side{background:var(--paper-2); padding:clamp(28px,4vw,44px); border:1px solid var(--line)}
.contact-side h3{font-family:var(--disp); font-size:1.2rem; margin-bottom:var(--space-5); color:var(--ink)}
.contact-side .tel{font-family:var(--lat); font-size:1.6rem; color:var(--brand); letter-spacing:.04em}
.maps{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:var(--space-7); margin-top:var(--space-8)}
.maps .m h3{font-family:var(--disp); font-size:1.1rem; margin-bottom:var(--space-3)}
.maps .m address{font-style:normal; color:var(--ink-2); font-size:.9rem; line-height:1.9; margin-bottom:var(--space-4)}
.maps iframe{width:100%; aspect-ratio:16/10; border:1px solid var(--line); filter:grayscale(.3) contrast(.95)}

/* ---------- CTA band ---------- */
.cta-band{padding:clamp(80px,13vh,160px) 0; text-align:center; background:var(--paper-2); border-top:1px solid var(--line)}
.cta-band h2{font-family:var(--disp); font-weight:700; font-size:clamp(1.9rem,4.2vw,3.2rem); line-height:1.4; margin:var(--space-5) auto var(--space-8); max-width:20ch}

/* ---------- footer ---------- */
.site-footer{background:var(--ink); color:color-mix(in oklch,var(--paper) 80%,transparent); padding:clamp(56px,9vh,96px) 0 var(--space-7)}
.site-footer .wrap{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--space-8)}
.site-footer .nm{font-family:var(--disp); font-weight:700; font-size:1.4rem; letter-spacing:.14em; color:var(--paper)}
.site-footer .nm small{display:block; font-family:var(--lat); font-size:.6rem; letter-spacing:.3em; color:color-mix(in oklch,var(--paper) 55%,transparent); margin-top:6px}
.site-footer address{font-style:normal; line-height:2; font-size:.9rem; color:color-mix(in oklch,var(--paper) 66%,transparent); margin-top:var(--space-6)}
.site-footer h4{font-family:var(--lat); letter-spacing:.2em; font-size:.7rem; color:color-mix(in oklch,var(--paper) 55%,transparent); text-transform:uppercase; margin-bottom:var(--space-5)}
.site-footer ul{list-style:none; display:flex; flex-direction:column; gap:var(--space-3)}
.site-footer ul a{font-size:.9rem; color:color-mix(in oklch,var(--paper) 78%,transparent); transition:color .3s}
.site-footer ul a:hover{color:var(--paper)}
.site-footer .base{grid-column:1/-1; margin-top:var(--space-9); padding-top:var(--space-5); border-top:1px solid color-mix(in oklch,var(--paper) 16%,transparent); display:flex; justify-content:space-between; font-size:.74rem; color:color-mix(in oklch,var(--paper) 45%,transparent); letter-spacing:.06em; flex-wrap:wrap; gap:var(--space-4)}

.concept-flag{position:fixed; bottom:0; left:0; z-index:80; background:var(--gold); color:var(--ink); font-family:var(--lat); letter-spacing:.18em; font-size:.62rem; padding:6px 14px; text-transform:uppercase}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .biz,.feature,.form-grid{grid-template-columns:1fr}
  .biz:nth-child(even) .biz-media{order:0}
  .biz-media{aspect-ratio:16/10}
  .feature .media{aspect-ratio:16/11}
  .site-footer .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .menu-btn{display:flex}
  .nav{position:fixed; inset:0; background:var(--paper); flex-direction:column; justify-content:center; gap:var(--space-7); transform:translateX(100%); transition:transform .5s cubic-bezier(.2,.7,.2,1); padding:var(--space-9)}
  .nav.open{transform:none}
  .nav a.lnk{font-size:1.3rem; font-family:var(--disp)}
  .nav .cta{font-size:1rem; padding:14px 28px}
  .spec-table .row{grid-template-columns:1fr; gap:var(--space-2); padding:var(--space-5) var(--space-3)}
  .timeline .ev{grid-template-columns:1fr; gap:var(--space-3)}
  .pill{grid-template-columns:auto 1fr} .pill .go{display:none}
  .spec-grid{grid-template-columns:1fr}
  .site-footer .wrap{grid-template-columns:1fr}
  .site-footer .base{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
  .rv{opacity:1!important; transform:none!important}
}