/* HIYORI お問い合わせ (ja) — transcribed verbatim from the Claude Design export */
body{margin:0;background:#0f1317}
a{color:#e8e4dc;text-decoration:none}a:hover{color:#ffffff}
.cf{font-family:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;color:#e8e4dc;background:#0f1317;overflow-x:clip;position:relative}
.cfm{container-type:inline-size;container-name:cfm}
.lat{font-family:'Cormorant Garamond','Times New Roman',serif}
/* ---- shared header pieces, the same as the TOP page ---- */
.nav a{font-size:12px;letter-spacing:.12em;color:rgba(232,228,220,.78)}
.nav>a,.nav>div{position:relative;z-index:6}
.burger{outline:none;-webkit-tap-highlight-color:transparent;will-change:transform}
.burger:focus{outline:none;box-shadow:none}
.burger:focus-visible span{background:#fff}
.burger span{transition:transform 1s cubic-bezier(.16,1,.3,1),background-color .3s ease;transform-origin:50% 50%;will-change:transform}
.burger[data-tone="light"]:not(.open) span{background-color:#242424!important}
.burger.open span:first-child{transform:translateY(4px) rotate(45deg)}
.burger.open span:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{transform:translateX(100%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.menu.open{transform:none}
.menu a:hover{color:#fff}
.menu-veil{opacity:0;pointer-events:none;transition:opacity 1s cubic-bezier(.16,1,.3,1)}
.menu-veil.open{opacity:1;pointer-events:auto}
.ul{position:relative;display:inline-block;padding-bottom:6px}
.ul:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.5}
/* ---- CONTACT page ---- */
.cf-hero{position:relative;padding:220px 48px 0;max-width:720px;margin:0 auto;box-sizing:border-box}
.cf-label{font-size:12px;letter-spacing:.38em;line-height:1;color:rgba(232,228,220,.5)}
.cf-h1{margin:34px 0 0;font-size:40px;font-weight:500;line-height:1.7;letter-spacing:.16em;color:#fff}
.cf-lead{margin:40px 0 0;font-size:14.5px;line-height:2.4;letter-spacing:.08em;color:rgba(232,228,220,.82)}
.cf-body{max-width:720px;margin:0 auto;box-sizing:border-box;padding:88px 48px 150px}
.cf-form{display:flex;flex-direction:column;gap:44px}
.cf-field{display:flex;flex-direction:column;gap:12px}
.cf-field label,.cf-field .cf-legend{font-size:13.5px;letter-spacing:.14em;color:#f1eee8}
.cf-req,.cf-opt{display:inline-block;margin-left:14px;font-size:11px;letter-spacing:.16em;vertical-align:1px}
.cf-req{color:#c9a978}
.cf-opt{color:rgba(232,228,220,.45)}
.cf-in{width:100%;box-sizing:border-box;padding:10px 0 12px;background:transparent;border:0;border-bottom:1px solid rgba(232,228,220,.32);border-radius:0;color:#f4f1eb;font:inherit;font-size:16px;letter-spacing:.06em;line-height:1.6;outline:none;transition:border-color .4s ease;-webkit-appearance:none;appearance:none}
.cf-in::placeholder{color:rgba(232,228,220,.32)}
.cf-in:focus{border-bottom-color:rgba(244,241,235,.9)}
textarea.cf-in{min-height:180px;resize:vertical;border:1px solid rgba(232,228,220,.32);padding:14px 16px}
textarea.cf-in:focus{border-color:rgba(244,241,235,.9)}
.cf-sel{position:relative}
.cf-sel select{padding-right:32px;cursor:pointer}
.cf-sel select option{background:#0f1317;color:#f4f1eb}
.cf-sel:after{content:"";position:absolute;right:6px;top:50%;width:8px;height:8px;margin-top:-7px;border-right:1px solid rgba(232,228,220,.7);border-bottom:1px solid rgba(232,228,220,.7);transform:rotate(45deg);pointer-events:none}
.cf-hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}
.cf-err{display:none;font-size:12px;letter-spacing:.06em;color:#e0a08a}
.cf-field[data-invalid="required"] .cf-err-req,.cf-field[data-invalid="format"] .cf-err-fmt{display:block}
.cf-field[data-invalid] .cf-in{border-bottom-color:#c98472}
.cf-field[data-invalid] textarea.cf-in{border-color:#c98472}
.cf-agree{flex-direction:row;align-items:flex-start;flex-wrap:wrap;gap:12px 14px}
.cf-agree input{flex:none;width:18px;height:18px;margin:4px 0 0;accent-color:#c9a978;cursor:pointer}
.cf-agree label{flex:1 1 0;min-width:0;font-size:13px;line-height:1.9;letter-spacing:.08em;color:rgba(232,228,220,.85);cursor:pointer}
.cf-agree label a{border-bottom:1px solid rgba(232,228,220,.5);padding-bottom:1px}
.cf-agree .cf-err{flex-basis:100%;padding-left:32px}
.cf-send{margin-top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.cf-btn{display:inline-flex;align-items:center;gap:26px;min-height:64px;padding:0 44px;box-sizing:border-box;background:transparent;border:1px solid rgba(232,228,220,.55);color:#fff;font:inherit;font-size:15.5px;letter-spacing:.24em;cursor:pointer;transition:background-color .4s ease,border-color .4s ease,opacity .4s ease}
.cf-btn i{display:block;flex:none;width:56px;height:1px;background:currentColor;opacity:.7;transition:width .4s ease-out}
.cf-btn:hover{background:rgba(232,228,220,.06);border-color:rgba(232,228,220,.85)}
.cf-btn:hover i,.cf-btn:focus-visible i{width:96px}
.cf-btn[disabled]{opacity:.45;cursor:default}
.cf-btn .cf-sending{display:none}
.cf-wrap[data-state="sending"] .cf-btn .cf-idle{display:none}
.cf-wrap[data-state="sending"] .cf-btn .cf-sending{display:inline}
.cf-note{margin:0;font-size:12px;line-height:2;letter-spacing:.06em;color:rgba(232,228,220,.55)}
.cf-alert{display:none;margin:0;padding:16px 18px;border:1px solid rgba(201,132,114,.6);font-size:13px;line-height:2;letter-spacing:.06em;color:#ead2c8}
.cf-wrap[data-state="error"] .cf-alert-send,.cf-wrap[data-state="rate"] .cf-alert-rate,.cf-wrap[data-state="unset"] .cf-alert-unset{display:block}
.cf-done{display:none;padding:24px 0 0}
.cf-done h2{margin:0;font-size:28px;font-weight:500;line-height:1.8;letter-spacing:.14em;color:#fff}
.cf-done p{margin:28px 0 0;font-size:14px;line-height:2.4;letter-spacing:.08em;color:rgba(232,228,220,.82)}
.cf-done a{display:inline-block;margin-top:44px}
.cf-done p.cf-done-note{margin-top:18px;font-size:12px;line-height:2;color:rgba(232,228,220,.55)}
.cf-wrap[data-state="done"] .cf-form{display:none}
.cf-wrap[data-state="done"] .cf-done{display:block;animation:cfIn 1.2s ease both}
/* quiet entrance */
.cf-f{animation:cfIn 1.6s ease both}
.cf-f2{animation-delay:.25s}.cf-f3{animation-delay:.5s}.cf-f4{animation-delay:.75s}
@keyframes cfIn{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cf-f,.cf-wrap[data-state="done"] .cf-done{animation:none}.cf-btn,.cf-btn i,.cf-in{transition:none}}
/* footer (same as TOP) */
.ft-top{padding:52px 120px 36px}
.ft-tag{margin-top:26px}
.ft-loc{margin-top:28px}
.ft-bot{padding:0 120px 30px}
@container cfm (max-width:767px){
  .cf-hero{padding:150px 24px 0}
  .cf-h1{font-size:min(28px, calc((100cqw - 48px) / 14.8));letter-spacing:.12em;white-space:nowrap}
  .cf-lead{font-size:14px;word-break:auto-phrase;text-wrap:pretty}
  .cf-lead br{display:none}
  .cf-body{padding:64px 24px 110px}
  .cf-form{gap:38px}
  .cf-btn{width:100%;justify-content:center;padding:0 20px;gap:18px;font-size:15px;letter-spacing:.18em}
  .cf-btn i{width:40px}
  .cf-btn:hover i{width:60px}
  .ft-top{flex-direction:column;gap:36px;padding:48px 24px 32px}
  .ft-nav{column-gap:32px!important}
  .ft-bot{padding:0 24px 32px;gap:16px}
}
/* language switch: two links in the place of the old label, at its exact size and colour; the language not shown sits a little quieter */
.hy-lang{color:rgba(232,228,220,.78);white-space:nowrap}.nav .hy-lang a{font-size:inherit;letter-spacing:inherit;color:rgba(232,228,220,.78);transition:opacity .3s ease,color .3s ease}.nav .hy-lang a:not([aria-current]){opacity:.6}.nav .hy-lang a:hover,.nav .hy-lang a:focus-visible{opacity:1;color:#fff}