/* ============================================================
   KOMORE — Contact page
   お問い合わせ — quiet editorial form, matched to the legal pages.
   ============================================================ */

body{ --gut: clamp(24px, 6vw, 110px); }

/* ——— page hero (matched to news / journal — flat cream wash, centered) ——— */
.contact-hero{ color:var(--ink); position:relative; overflow:hidden;
  padding-top:clamp(6rem,11vh,7.5rem); padding-bottom:clamp(1.6rem,3vw,2.2rem);
  background:var(--washi); }
.contact-hero .wrap{ position:relative; z-index:2; text-align:center; }
.contact-hero h1{ font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,3vw,2.1rem);
  line-height:1.1; letter-spacing:.06em; color:var(--ink); }
.contact-hero p{ max-width:48ch; color:var(--ink-mute); margin:1.3rem auto 0; }

/* ——— body : form stacked above info ——— */
.contact-body{ padding-block:clamp(3.5rem,7vw,6rem) clamp(5rem,11vw,9rem); }
.contact-body .wrap{ max-width:1180px; }
.contact-form-col{ margin-bottom:0; }

/* ——— temporary email contact notice ——— */
.contact-notice{ max-width:42rem; padding:clamp(2rem,4vw,3.2rem); background:var(--washi-2);
  border:1px solid var(--line); text-align:center; margin-inline:auto; }
.contact-notice p{ color:var(--ink); font-size:1.04rem; line-height:1.9; letter-spacing:.02em; margin:0; }
.contact-notice__email{ display:inline-block; margin:1.4rem 0; color:var(--tea); font-family:var(--serif);
  font-size:clamp(1.25rem,2.4vw,1.6rem); letter-spacing:.04em; border-bottom:1px solid currentColor; }
.contact-notice__email:hover{ color:var(--tea-mid); }
.contact-notice .contact-notice__hours{ color:var(--ink-mute); font-size:.92rem; }

/* ——— form : one field per row ——— */
.c-form-head{ margin-bottom:clamp(1.8rem,3vw,2.6rem); }
.c-form-head h2{ font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,2.4vw,1.9rem);
  letter-spacing:.05em; color:var(--tea); margin-bottom:.8rem; }
.c-form-head p{ color:var(--ink); font-size:1.04rem; line-height:1.9; letter-spacing:.02em; margin:0; }
.c-form-head .req-key{ color:var(--brass); }

.c-field{ display:block; margin-bottom:clamp(1.5rem,2.6vw,2rem); }
.c-lab{ display:block; font-family:var(--sans); font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tea-mid); font-weight:500; margin-bottom:.7rem; }
.c-lab .req{ color:var(--brass); margin-left:.45em; letter-spacing:0; }
.c-lab .jp{ display:inline-block; font-size:1.08rem; letter-spacing:.08em;
  text-transform:none; color:var(--tea); font-weight:600; }

.c-field input,
.c-field select,
.c-field textarea{ width:100%; border:0; border-bottom:1.5px solid var(--line); background:none;
  padding:.7em 0; font-family:var(--sans); font-weight:400; font-size:1.2rem; color:var(--ink);
  letter-spacing:.02em; transition:border-color .35s ease; border-radius:0; }
.c-field textarea{ resize:vertical; min-height:9rem; line-height:1.8;
  border:1.5px solid var(--line); padding:.85em 1em; background:var(--cream); }
/* scrollbar — tea-tinted, matched to the form (Firefox) */
.c-field textarea{ scrollbar-width:thin; scrollbar-color:var(--tea-mid) transparent; }
/* scrollbar — WebKit / Chrome / Safari / Edge */
.c-field textarea::-webkit-scrollbar{ width:10px; }
.c-field textarea::-webkit-scrollbar-track{ background:transparent; margin:.6em 0; }
.c-field textarea::-webkit-scrollbar-thumb{ background:var(--sage); border-radius:99px;
  border:3px solid var(--cream); transition:background .3s; }
.c-field textarea:hover::-webkit-scrollbar-thumb{ background:var(--tea-mid); }
.c-field textarea::-webkit-scrollbar-thumb:active{ background:var(--tea); }
.c-field textarea:focus{ border-color:var(--tea); }
.c-field input:focus,
.c-field select:focus,
.c-field textarea:focus{ outline:none; border-bottom-color:var(--tea); }
.c-field input::placeholder,
.c-field textarea::placeholder{ color:var(--ink-mute); opacity:.6; }

/* name : 姓・名 sub-inputs（漢字 / カタカナ の2行） */
.c-name{ display:grid; gap:clamp(.7rem,1.4vw,1rem); }
.c-subrow{ display:grid; grid-template-columns:1fr 1fr; align-items:center;
  column-gap:clamp(.8rem,1.6vw,1.2rem); }
.c-subrow input{ width:100%; }

/* native select chrome → quiet caret */
.c-selectwrap{ position:relative; }
.c-field select{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:2em; }
.c-selectwrap::after{ content:""; position:absolute; right:.2rem; top:50%; width:.5rem; height:.5rem;
  border-right:1px solid var(--ink-mute); border-bottom:1px solid var(--ink-mute);
  transform:translateY(-70%) rotate(45deg); pointer-events:none; }

/* consent checkbox */
.c-check{ display:flex; align-items:flex-start; gap:.7rem; margin:clamp(1.6rem,3vw,2.2rem) 0;
  font-family:var(--sans); font-size:1rem; line-height:1.75; color:var(--ink);
  letter-spacing:.02em; cursor:pointer; }
.c-check input{ appearance:none; -webkit-appearance:none; flex:0 0 auto; width:1.1rem; height:1.1rem;
  margin:.22em 0 0; border:1px solid var(--line); background:var(--cream); cursor:pointer;
  position:relative; transition:.25s; }
.c-check input:checked{ background:var(--tea); border-color:var(--tea); }
.c-check input:checked::after{ content:""; position:absolute; left:50%; top:46%; width:.3rem; height:.58rem;
  border:solid var(--cream); border-width:0 1.5px 1.5px 0; transform:translate(-50%,-58%) rotate(45deg); }
.c-check a{ color:var(--tea); border-bottom:1px solid currentColor; padding-bottom:1px; }

.c-submit{ margin-top:.6rem; display:flex; justify-content:flex-start; }
/* compact, sized to its label — left-aligned outline button */
.c-submit .btn{ width:auto; min-width:0; justify-content:center; }
/* alignment of the compact button within its row */
.c-submit[data-align="left"]{ justify-content:flex-start; }
.c-submit[data-align="center"]{ justify-content:center; }
.c-submit[data-align="right"]{ justify-content:flex-end; }
/* full-width variant — original behaviour */
.c-submit[data-width="full"]{ justify-content:stretch; }
.c-submit[data-width="full"] .btn{ width:100%; min-width:0; }
/* hover — green-leaning dark tea instead of near-black sumi */
.c-submit .btn:hover{ background:#26331f; border-color:#26331f; color:var(--washi); }
@media (max-width:560px){ .c-submit .btn{ width:100%; } }
.c-form-foot{ margin-top:1.1rem; font-size:.92rem; letter-spacing:.04em; color:var(--ink);
  line-height:1.8; }

/* success state */
.c-success{ display:none; padding:clamp(2.2rem,4vw,3.2rem); background:var(--washi-2);
  border:1px solid var(--line); text-align:left; }
.c-success.is-on{ display:block; animation:cFade .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cFade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.c-success .ck{ display:inline-flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem;
  border:1px solid var(--tea); border-radius:50%; color:var(--tea); margin-bottom:1.3rem; }
.c-success h3{ font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:.04em;
  color:var(--tea); margin-bottom:.9rem; }
.c-success p{ color:var(--ink); font-size:.96rem; line-height:1.95; margin:0 0 .7rem; max-width:46ch; }
.c-success p:last-child{ margin-bottom:0; }
@media (prefers-reduced-motion:reduce){ .c-success.is-on{ animation:none; } }