@charset "utf-8";
/* お問い合わせページ（EN・JA共通） *//* Layout: トップページと同じヘッダー・フッター・色。上部はトップのFVを縮めた写真の帯（ヘッダーを重ねる）、その下の淡い色面に白いカードのフォーム（入力→確認→完了） */
:root{
  --bg:#FFFFFF; --tint:#F1F7F6; --ink:#20313A; --muted:#55656C; --line:#E3ECEB;
  --accent:#2A9D8F; --accent-deep:#1D766B; --accent-ink:#FFFFFF; --soft:#E2F3F0; --sky:#E4EFFB; --cream:#FBF4E8; --error:#C2412D;
  --hl:#0F2A33; --hl-ink:#FFFFFF; --hl-accent:#8FDCCF;
  --f-en:"Plus Jakarta Sans","Noto Sans JP",system-ui,sans-serif;
  --f-head:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --f-body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --r:18px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0F1A1D; --tint:#142326; --ink:#E7F0EF; --muted:#9AAEB0; --line:#22363A;
  --accent:#5CC6B8; --accent-deep:#82D7CC; --accent-ink:#0B2421; --soft:#173A36; --sky:#1C2D44; --cream:#352E22; --error:#FF8E78;
  --hl:#1A4A47; --hl-ink:#FFFFFF; --hl-accent:#9FE6DA; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1A1D; --tint:#142326; --ink:#E7F0EF; --muted:#9AAEB0; --line:#22363A;
  --accent:#5CC6B8; --accent-deep:#82D7CC; --accent-ink:#0B2421; --soft:#173A36; --sky:#1C2D44; --cream:#352E22; --error:#FF8E78;
  --hl:#1A4A47; --hl-ink:#FFFFFF; --hl-accent:#9FE6DA; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:2;letter-spacing:.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
a{color:inherit;text-decoration:none}
/* 見出しは行の長さをそろえつつ、和文は句読点・<wbr>の位置でだけ改行する */
h1,h2,h3{margin:0;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

/* header（トップページと同じ：写真の上では透明、スクロールしたら白い帯） */
header{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:50;background:transparent}
/* 白い背景は別の層にして、スクロールしたら上から降りてくる */
header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.75);background:color-mix(in srgb,var(--bg) 75%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--line);transform:translateY(-101%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
header.solid::before{transform:none}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;height:76px}
.nav .logo{grid-column:1;justify-self:start}
.nav .menu{grid-column:2}
.nav-right{grid-column:3;justify-self:end}
.logo{display:flex;align-items:center;line-height:0;flex:none}
.logo img{display:block;width:auto;height:42px}
@media (max-width:600px){.logo img{height:36px}}
/* PC：ロゴが小さいとAの細い線と金のラインが潰れて見えるので、ひとまわり大きく表示 */
@media (min-width:961px){.logo img{height:48px}}
/* 白ロゴと通常ロゴを重ねて、背景が降りてくるのに合わせてふわっと入れ替える */
header .logo{position:relative}
header .logo-w{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .4s}
header .logo-c{transition:opacity .4s}
header:not(.solid) .logo-w{opacity:1}
header:not(.solid) .logo-c{opacity:0}
.menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.menu a{display:flex;flex-direction:column;align-items:center;line-height:1.4;padding:8px 14px;border-radius:10px;font-size:14px;font-weight:500;letter-spacing:.06em;transition:background .25s,color .35s}
.menu a small{font-family:var(--f-en);font-size:10px;color:var(--accent);letter-spacing:.1em}
.menu a:hover{background:var(--tint)}
.nav-right{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;font:700 14px var(--f-body);padding:13px 24px;border-radius:999px;background:var(--accent);color:var(--accent-ink);transition:transform .25s,background .25s,opacity .25s}
.btn:hover{transform:translateY(-2px);background:var(--accent-deep)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.burger{display:none;width:48px;height:48px;border-radius:12px;border:0;background:var(--tint);cursor:pointer;position:relative;color:var(--ink);transition:background .35s,color .35s}
.burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s ease,top .35s ease}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){top:23px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){top:23px;transform:rotate(-45deg)}
@media (min-width:961px){
  .menu a small{display:none}
  /* ホバーは背景色ではなく、左から下線がスライドして伸びる */
  .menu a{position:relative}
  .menu a:hover{background:none}
  .menu a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.6,0,.2,1)}
  .menu a:hover::after,.menu a:focus-visible::after{transform:scaleX(1);transform-origin:left}
  header:not(.solid) .menu a{color:#FFFFFF}
  header:not(.solid) .menu a::after{background:#FFFFFF}
}
@media (max-width:960px){
  /* スマホのメニュー：画面いっぱいに広げ、ヘッダーの背景と同じく上から降りてくる */
  .menu{position:fixed;inset:0;z-index:0;height:100vh;height:100dvh;flex-direction:column;gap:0;overflow-y:auto;background:var(--bg);
    padding:calc(76px + env(safe-area-inset-top,0px) + 20px) max(24px,env(safe-area-inset-right,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(24px,env(safe-area-inset-left,0px))}
  .menu{visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .5s cubic-bezier(.2,.8,.2,1),visibility 0s linear .5s}
  .menu.open{visibility:visible;clip-path:inset(0);transition:clip-path .5s cubic-bezier(.2,.8,.2,1),visibility 0s}
  .menu > li{opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s}
  .menu.open > li{opacity:1;transform:none;transition:opacity .45s .15s,transform .45s .15s cubic-bezier(.2,.8,.2,1)}
  .menu a{flex-direction:row;justify-content:space-between;align-items:baseline;padding:22px 4px;border-radius:0;border-bottom:1px solid var(--line);font-size:19px;font-weight:700;letter-spacing:.06em}
  .menu a small{font-size:11px;letter-spacing:.18em}
  .menu a:hover{background:none}
  /* ロゴと閉じるボタンはメニューの上に出す */
  .nav .logo,.nav-right{position:relative;z-index:1}
  .burger{display:block}
  header:not(.solid) .burger{background:rgb(255 255 255 / .16);color:#FFFFFF}
  .nav-right .btn{display:none}
}
/* スマホのメニューにだけお問い合わせを出す */
.menu .sp-only{display:none}
@media (max-width:960px){
  .menu .sp-only{display:block;margin-top:32px}
  .menu .sp-only a{justify-content:center;align-items:center;gap:12px;padding:18px 24px;border-bottom:0;border-radius:999px;font-size:16px;background:var(--accent);color:var(--accent-ink)}
  .menu .sp-only a:hover{background:var(--accent-deep)}
  .menu .sp-only a small{color:inherit;opacity:.8}
}
.no-anim .menu,.no-anim .menu *{transition:none!important}
/* メニューを開いている間は後ろのページをスクロールさせない */
.menu-open,.menu-open body{overflow:hidden}

/* ページ見出し：トップのFVを縮めた写真の帯 */
.page-head{position:relative;overflow:hidden;color:#FFFFFF;background:#5E8FA8;padding-block:calc(76px + env(safe-area-inset-top,0px) + clamp(48px,8vw,96px)) clamp(48px,7vw,80px)}
.page-head .bg{position:absolute;inset:0}
.page-head .bg picture{display:block;width:100%;height:100%}
.page-head .bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.page-head .bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgb(15 42 51 / .38) 0%,rgb(15 42 51 / 0) 35%),
  linear-gradient(90deg,rgb(15 42 51 / .72) 0%,rgb(15 42 51 / .54) 38%,rgb(15 42 51 / .14) 62%,rgb(15 42 51 / 0) 80%)}
/* 写真の明るさはほぼそのままにし、細い白文字（パンくず・英字・説明文）に影をつけて読みやすく */
@media (max-width:760px){.page-head .bg::after{background:linear-gradient(180deg,rgb(15 42 51 / .42) 0%,rgb(15 42 51 / .5) 100%)}}
.page-head .crumb,.page-head .en,.page-head p{text-shadow:0 1px 3px rgb(8 28 36 / .55),0 0 16px rgb(8 28 36 / .45)}
.page-head .wrap{position:relative;z-index:1}
.crumb{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 28px;padding:0;font-size:12px;color:rgb(255 255 255 / .88)}
.crumb li+li::before{content:"/";margin-right:10px;color:rgb(255 255 255 / .6)}
.crumb a{color:#FFFFFF}
.crumb a:hover{text-decoration:underline}
.page-head .en{display:flex;align-items:center;gap:14px;font:700 13px/1 var(--f-en);letter-spacing:.24em;color:rgb(255 255 255 / .82);animation:fadeup .9s cubic-bezier(.2,.8,.2,1) both}
.page-head .en::before{content:"";width:40px;height:1px;background:currentColor}
.page-head h1{text-shadow:0 2px 24px rgb(8 28 36 / .35);font-family:var(--f-head);font-size:clamp(30px,4vw,48px);font-weight:700;line-height:1.4;letter-spacing:.04em;margin-top:18px;animation:fadeup .9s .1s cubic-bezier(.2,.8,.2,1) both}
.page-head p{color:rgb(255 255 255 / .92);text-shadow:0 1px 12px rgb(8 28 36 / .4);margin-top:18px;word-break:keep-all;overflow-wrap:anywhere;animation:fadeup .9s .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes fadeup{from{opacity:0;transform:translateY(20px)}}

/* 色面（トップページの .sec.tint と同じ） */
.sec.tint{background:var(--tint);padding-block:72px 96px}
@media (max-width:700px){.sec.tint{padding-block:48px 72px}}
.form-wrap{max-width:880px;margin:0 auto}

/* 入力→確認→完了 のステップ */
.steps{display:flex;justify-content:center;gap:clamp(12px,4vw,48px);list-style:none;margin:0 0 40px;padding:0}
.steps li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--muted);transition:color .3s}
.steps i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 13px var(--f-en);font-style:normal;background:var(--bg);border:2px solid var(--line);transition:all .35s}
.steps li.on{color:var(--ink)}
.steps li.on i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);transform:scale(1.1)}
.steps li:not(:last-child)::after{content:"";width:clamp(16px,4vw,48px);height:1px;background:var(--line);margin-left:clamp(4px,2vw,16px)}

/* フォーム */
.card{background:var(--bg);border-radius:var(--r);padding:clamp(24px,5vw,56px);min-width:0}
.panel{animation:pop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.98)}}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field > span{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.req,.opt{font-size:10px;font-weight:700;font-style:normal;padding:1px 9px;border-radius:999px;letter-spacing:.06em}
.req{background:var(--accent);color:var(--accent-ink)}
.opt{background:var(--tint);color:var(--muted)}
input[type=text],input[type=email],input[type=tel],textarea{font:16px var(--f-body);color:var(--ink);background:var(--tint);border:2px solid transparent;border-radius:10px;padding:13px 16px;width:100%;transition:border-color .25s,background .25s}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
input:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--bg)}
textarea{min-height:180px;resize:vertical}
.field.err input,.field.err textarea{border-color:var(--error)}
.msg{font-size:13px;color:var(--error)}
.msg:empty{display:none}
.count{align-self:flex-end;font:500 12px var(--f-en);color:var(--muted);margin-top:-2px}
.kinds{display:flex;flex-wrap:wrap;gap:10px}
.kinds label{position:relative}
.kinds input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.kinds span{display:inline-block;padding:9px 20px;border-radius:999px;background:var(--tint);border:2px solid transparent;font-size:14px;font-weight:500;cursor:pointer;transition:all .25s}
.kinds input:checked + span{background:var(--soft);border-color:var(--accent);color:var(--accent-deep)}
.kinds input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.policy{font-size:12px;color:var(--muted);background:var(--tint);border-radius:10px;padding:14px 18px;line-height:1.9}
.agree{display:flex;justify-content:center;gap:10px;align-items:center;font-size:14px;font-weight:500;cursor:pointer}
.agree input{width:20px;height:20px;accent-color:var(--accent);margin:0}
.actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px}
.actions .btn{min-width:240px;font-size:15px;padding:17px 32px}
.btn.sub{background:var(--tint);color:var(--ink)}
.btn.sub:hover{background:var(--soft)}
.btn[disabled]{opacity:.35;cursor:not-allowed;transform:none;background:var(--accent)}
@media (max-width:640px){.fields{grid-template-columns:1fr}.steps span{display:none}.actions .btn{min-width:0;width:100%}}

/* 確認画面 */
.confirm-lead{text-align:center;color:var(--muted);margin-bottom:20px}
dl.confirm{margin:0}
dl.confirm div{display:grid;grid-template-columns:170px 1fr;gap:16px;padding-block:18px;border-bottom:1px dashed var(--line)}
dl.confirm dt{font-weight:700;font-size:14px;color:var(--accent-deep)}
dl.confirm dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;min-width:0}
@media (max-width:640px){dl.confirm div{grid-template-columns:1fr;gap:2px}}

/* 完了画面 */
.done{text-align:center}
.done .check{width:96px;height:96px;margin:0 auto 24px;border-radius:50%;background:var(--soft);display:grid;place-items:center;animation:pop .6s cubic-bezier(.3,1.5,.5,1) both}
.done svg{width:46px;height:46px;stroke:var(--accent);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.done path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .6s .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done h2{font-family:var(--f-head);font-size:24px}
.done p{color:var(--muted);margin-top:12px}

/* footer（トップページと同じ） */
footer{padding-block:48px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px}
.foot nav a:hover{color:var(--accent)}
.foot small{font:600 11px var(--f-en);letter-spacing:.08em;color:var(--muted)}

/* PC では文字をひとまわり大きく */
@media (min-width:961px){
  body{font-size:16px}
}

/* PC：ヘッダーは写真の広さに合わせて、中身より少し広い1360pxまで広げる */
/* 写真の上の文字（キャッチコピー・スライド送り／ページ見出し）もヘッダーと同じ幅にして左右の端をそろえる */
@media (min-width:961px){header .wrap.nav,.page-head .wrap{max-width:1360px}.nav-right .btn{white-space:nowrap}}
@media (min-width:1200px){header .wrap.nav,.page-head .wrap{padding-left:max(40px,env(safe-area-inset-left,0px));padding-right:max(40px,env(safe-area-inset-right,0px))}}
/* 画面が狭めのPC（961〜1199px）は、メニューの間隔を詰めてボタンが折り返さないように */
@media (min-width:961px) and (max-width:1199px){.menu a{padding-inline:10px}.nav{gap:12px}.nav-right{gap:10px}.nav-right .btn{padding-inline:18px}
  /* ロゴをひとまわり小さくして、メニューとの間にゆとりを作る */
  .logo img{height:40px}}

/* 見出しの英字ラベルの線：ページを開いたときに左から右へ伸びる */
.page-head .en::before,.ttl .en::before{transform-origin:left;animation:lineIn 1s .4s cubic-bezier(.65,0,.35,1) both}
@keyframes lineIn{from{transform:scaleX(0)}}
/* 英語版だけ：英文用に行間と字間を調整 */
html[lang="en"] body{line-height:1.8;letter-spacing:.005em}
/* JP / EN の切り替え：選ばれていない方にマウスを乗せると、背景が付いて文字がはっきりする */
.lang a,.menu .sp-lang a{transition:background .25s,color .25s,border-color .25s}
.lang a:hover,.lang a:focus-visible{background:var(--soft);color:var(--accent-deep)}
header:not(.solid) .lang a:hover,header:not(.solid) .lang a:focus-visible{background:rgb(255 255 255 / .22);color:#FFFFFF}
header:not(.solid) .lang:hover{border-color:rgb(255 255 255 / .7)}
.lang:hover{border-color:var(--accent)}
.menu .sp-lang a:hover,.menu .sp-lang a:focus-visible{background:var(--soft);border-color:var(--accent);color:var(--accent-deep)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .done path{stroke-dashoffset:0}
}
/* 言語切替（トップページと同じ） */
.lang{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px;font:600 11px var(--f-en);transition:border-color .35s}
.lang span,.lang a{padding:3px 10px;border-radius:999px;color:var(--muted)}
.lang span.on{background:var(--ink);color:var(--bg)}

@media (min-width:961px){
  header:not(.solid) .lang{border-color:rgb(255 255 255 / .4)}
  header:not(.solid) .lang a{color:rgb(255 255 255 / .8)}
  header:not(.solid) .lang span.on{background:#FFFFFF;color:#1C3A44}
}
@media (max-width:960px){.lang{display:none}}
/* スマホのメニュー内の言語切り替え */
.menu .sp-lang{display:none}
@media (max-width:960px){
  .menu .sp-lang{display:flex;justify-content:center;gap:8px;padding-top:24px}
  .menu .sp-lang a,.menu .sp-lang span{display:inline-block;padding:6px 20px;border-radius:999px;font:600 13px var(--f-en);border:1px solid var(--line);color:var(--muted)}
  .menu .sp-lang span.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
}
/* JP / EN の切り替え：選ばれていない方にマウスを乗せると、背景が付いて文字がはっきりする */
.lang a,.menu .sp-lang a{transition:background .25s,color .25s,border-color .25s}
.lang a:hover,.lang a:focus-visible{background:var(--soft);color:var(--accent-deep)}
header:not(.solid) .lang a:hover,header:not(.solid) .lang a:focus-visible{background:rgb(255 255 255 / .22);color:#FFFFFF}
header:not(.solid) .lang:hover{border-color:rgb(255 255 255 / .7)}
.lang:hover{border-color:var(--accent)}
.menu .sp-lang a:hover,.menu .sp-lang a:focus-visible{background:var(--soft);border-color:var(--accent);color:var(--accent-deep)}
/* 送信エラーの表示 */
.send-err{margin-top:20px;text-align:center;font-size:14px;color:var(--error)}
.btn[aria-busy="true"]{opacity:.6;pointer-events:none}
/* 迷惑メール対策の項目（画面には出さない） */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}