/* =====================================================
   contact.css — お問い合わせページ（/legal/contact.html）のフォーム
   ・ほかの法務ページと同じ土台（ページ内の <style>）の上に重ねる。アプリの CSS は読みこまない。
   ・色はページの土台とそろえる：地 #FBF6EC／線 #E7DDCC／緑 #1F8F7C・#2FB39A／文字 #3a3733・#6f685d
     押すボタンの地は、白い文字が読める濃いほうの緑（#1F8F7C）。
   ・スマホ前提：文字は 16px 以上、入力欄は 17px（iPhone で勝手に拡大されない）、押せる所は高さ 44px 以上。
   ・高さに vh / dvh は使わない。resize で組みかえる処理も入れない。
   ・直したら contact.html の ?v= の番号を上げる（CSS は 1 年キャッシュされる）。
===================================================== */

:root{
  --cf-green:#1F8F7C;      /* 押すボタンの地・選んだ枠 */
  --cf-green-d:#17695C;    /* 白地の上の緑の文字 */
  --cf-green2:#2FB39A;     /* 飾りの緑 */
  --cf-green-bg:#EAF7F3;   /* 選んだものの地 */
  --cf-ink:#3a3733;
  --cf-sub:#6f685d;
  --cf-line:#E7DDCC;
  --cf-line-2:#D5C8B0;     /* えらぶボタンの枠 */
  --cf-field:#A3957E;      /* 入力欄の枠（白地と 3:1） */
  --cf-paper:#FBF6EC;
  --cf-err:#C9372C;
  --cf-err-bg:#FFF5F3;
  --cf-focus:0 0 0 3px rgba(47,179,154,.38);
}

/* ---------- ページの土台の、小さすぎる文字を 16px に上げる（このページだけ） ---------- */
.lead{font-size:16px}
table{font-size:16px}
.note{font-size:16px}
footer.site{font-size:16px; line-height:1.6}
footer.site a{display:inline-block; padding:10px 2px}

/* フォーム以外の連絡方法：せまい画面では表を縦に積む（メールアドレスが枠からはみ出すため） */
.cf-other td a{overflow-wrap:break-word; word-break:break-all}
@media (max-width:560px){
  .cf-other table,.cf-other tbody,.cf-other tr,.cf-other th,.cf-other td{display:block; width:auto}
  .cf-other th{white-space:normal; padding:8px 14px}
  .cf-other td{border-top:0}
  .cf-other tr + tr th{border-top:0}
}

/* ---------- フォームの箱 ---------- */
.cf-card{--cf-pad:22px; padding:22px var(--cf-pad) 26px}
@media (max-width:480px){
  .cf-card{--cf-pad:16px; padding:20px var(--cf-pad) 24px}
}
.cf-card [hidden],.cf-card[hidden]{display:none !important}
.cf-card h2:focus{outline:none}
.cf-intro{margin:6px 0 4px; font-size:16px; line-height:1.8}
/* 日本語の文が、言葉の途中や 1〜2 字だけで次の行に落ちないようにする（効かないブラウザでは、ふつうの折り返し） */
.cf-card p,.cf-other p,.cf-card .cf-label{word-break:auto-phrase; text-wrap:pretty}
.cf-nb{display:inline-block}
.cf-noscript{padding:12px 14px; border-radius:12px; background:var(--cf-err-bg); color:var(--cf-err); font-weight:700}

.cf-form{margin:0}
.cf-lock{margin:0; padding:0; border:0; min-width:0}
.cf-lock:disabled .cf-field{opacity:.72}

/* 1 つの項目 */
.cf-field{margin:22px 0 0; padding:0; border:0; min-width:0}
fieldset.cf-field{margin-left:0; margin-right:0}
.cf-label{display:block; margin:0 0 8px; padding:0; font-size:18px; font-weight:700; line-height:1.6; color:var(--cf-ink)}
legend.cf-label{float:left; width:100%}
legend.cf-label + *{clear:left}

/* 必須・任意のしるし */
.cf-tag{display:inline-block; margin-left:8px; padding:0 8px; border-radius:6px; font-size:16px; font-weight:700; line-height:1.55; vertical-align:1px; white-space:nowrap}
.cf-tag-req{background:var(--cf-err); color:#fff}
.cf-intro .cf-tag{margin:0 4px 0 0}
.cf-opt-mark{margin-left:4px; font-size:16px; font-weight:500; color:var(--cf-sub)}

/* 案内の一言 */
.cf-hint{margin:-2px 0 10px; font-size:16px; line-height:1.75; color:var(--cf-sub)}

/* ---------- 入力欄 ---------- */
.cf-input{
  display:block; width:100%; margin:0; padding:11px 14px; min-height:52px;
  font:inherit; font-size:17px; line-height:1.6; color:var(--cf-ink);
  background:#FFFDF8; border:1.5px solid var(--cf-field); border-radius:12px;
  -webkit-appearance:none; appearance:none; box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.cf-input::placeholder{color:#9A8F7E; opacity:1}
.cf-input:focus{outline:none; border-color:var(--cf-green); background:#fff; box-shadow:var(--cf-focus)}
.cf-textarea{min-height:190px; resize:vertical}
.cf-input[aria-invalid="true"]{border-color:var(--cf-err); background:var(--cf-err-bg)}
.cf-input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px rgba(201,55,44,.22)}
.cf-input:disabled{color:var(--cf-ink); -webkit-text-fill-color:var(--cf-ink)}

/* 残りの字数 */
.cf-count{margin:6px 2px 0; font-size:16px; line-height:1.6; color:var(--cf-sub); text-align:right; font-variant-numeric:tabular-nums}
.cf-count.is-over{color:var(--cf-err); font-weight:700}

/* メールアドレスの打ちまちがい（もしかして…） */
.cf-suggest{margin:8px 0 0; padding:10px 12px; border-radius:12px; background:#FFF8E6; border:1px solid #F0E0B4; font-size:16px; line-height:1.7}
.cf-suggest b{overflow-wrap:break-word; word-break:break-all}
.cf-suggest-btn{
  display:block; margin-top:6px; min-height:44px; padding:8px 14px;
  font:inherit; font-size:16px; font-weight:700; color:var(--cf-green-d);
  background:#fff; border:1.5px solid var(--cf-line-2); border-radius:10px; cursor:pointer;
}

/* まちがいの表示（欄のすぐ下・赤字） */
.cf-err{
  margin:8px 0 0; padding-left:26px; min-height:20px;
  font-size:16px; font-weight:700; line-height:1.6; color:var(--cf-err);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23C9372C'/%3E%3Crect x='9' y='4.5' width='2' height='7.5' rx='1' fill='%23fff'/%3E%3Ccircle cx='10' cy='15' r='1.25' fill='%23fff'/%3E%3C/svg%3E") no-repeat 0 3px / 19px 19px;
}

/* ---------- お問い合わせの種類（縦にならぶ大きなボタン） ---------- */
.cf-options{display:grid; grid-template-columns:minmax(0,1fr); gap:8px}
@media (min-width:600px){
  .cf-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.cf-opt{position:relative; display:block; cursor:pointer}
.cf-opt input,.cf-chip input,.cf-agree input{
  position:absolute; top:0; left:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;
}
.cf-opt-box{
  display:flex; align-items:center; gap:12px; min-height:54px; padding:10px 14px;
  font-size:17px; font-weight:600; line-height:1.5; color:var(--cf-ink);
  background:#fff; border:1.5px solid var(--cf-line-2); border-radius:12px;
  transition:border-color .15s ease, background-color .15s ease;
}
.cf-opt-box::before{
  content:""; flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--cf-field); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cf-opt input:checked + .cf-opt-box{border-color:var(--cf-green); background:var(--cf-green-bg); box-shadow:inset 0 0 0 1px var(--cf-green); font-weight:700}
.cf-opt input:checked + .cf-opt-box::before{border-color:var(--cf-green); box-shadow:inset 0 0 0 4px #fff; background:var(--cf-green)}
.cf-opt input:focus-visible + .cf-opt-box,
.cf-chip input:focus-visible + span,
.cf-agree input:focus-visible + .cf-agree-box{box-shadow:var(--cf-focus); border-color:var(--cf-green)}
.cf-group.is-invalid .cf-opt-box{border-color:var(--cf-err)}

/* ---------- 学年など（小さめの丸いボタン） ---------- */
.cf-chips{display:flex; flex-wrap:wrap; gap:8px}
.cf-chip{position:relative; display:block; cursor:pointer}
.cf-chip span{
  display:flex; align-items:center; justify-content:center; min-width:72px; min-height:46px; padding:8px 16px;
  font-size:16px; font-weight:700; line-height:1.4; color:var(--cf-ink);
  background:#fff; border:1.5px solid var(--cf-line-2); border-radius:999px;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
}
.cf-chip input:checked + span{border-color:var(--cf-green); background:var(--cf-green-bg); color:var(--cf-green-d); box-shadow:inset 0 0 0 1px var(--cf-green)}

/* ---------- 同意のチェック ---------- */
.cf-agree{position:relative; display:block; cursor:pointer}
.cf-agree-box{
  display:flex; align-items:flex-start; gap:12px; min-height:56px; padding:13px 14px;
  font-size:17px; font-weight:600; line-height:1.6; color:var(--cf-ink);
  background:#FFFDF8; border:1.5px solid var(--cf-line-2); border-radius:12px;
}
.cf-agree-box::before{
  content:""; flex:0 0 auto; width:24px; height:24px; margin-top:1px; border-radius:6px;
  border:2px solid var(--cf-field); background:#fff no-repeat center / 16px 16px;
}
.cf-agree input:checked + .cf-agree-box{border-color:var(--cf-green); background:var(--cf-green-bg)}
.cf-agree input:checked + .cf-agree-box::before{
  border-color:var(--cf-green); background-color:var(--cf-green);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8.5 3.2 3.2L13 4.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cf-agree-text{flex:1; min-width:0}
/* リンクはチェックの上に出して、押せるようにする（label の中でも、押すとポリシーが新しいタブで開く） */
.cf-agree-text a{position:relative; z-index:1; color:var(--cf-green-d); font-weight:700}
.cf-agree-text .cf-tag{vertical-align:2px}
#fAgree.is-invalid .cf-agree-box{border-color:var(--cf-err); background:var(--cf-err-bg)}

/* ---------- 画面の写真（不具合の報告のときだけ開く） ---------- */
/* 開け閉めの高さのアニメは contact.js が Element.animate() で動かす。余白はこの箱の外に付けない */
.cf-slide{margin:0; padding:0}
.cf-images{margin-top:22px}
.cf-thumbs{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.cf-thumb{display:flex; align-items:center; gap:12px; padding:8px; background:#fff; border:1px solid var(--cf-line); border-radius:12px}
.cf-thumb img{flex:0 0 auto; display:block; width:60px; height:60px; object-fit:cover; border-radius:8px; background:#F3EADA}
.cf-thumb-info{flex:1; min-width:0; font-size:16px; line-height:1.5}
.cf-thumb-info b{display:block; font-weight:700}
.cf-thumb-info span{display:block; color:var(--cf-sub)}
.cf-thumb-rm{
  flex:0 0 auto; min-width:56px; min-height:44px; padding:8px 10px;
  font:inherit; font-size:16px; font-weight:700; color:var(--cf-ink);
  background:#fff; border:1.5px solid var(--cf-line-2); border-radius:10px; cursor:pointer;
}
.cf-pick{
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:54px; margin-top:10px; padding:10px 16px;
  font-size:17px; font-weight:700; line-height:1.4; color:var(--cf-green-d);
  background:#FFFDF8; border:2px dashed #C2B49B; border-radius:12px; cursor:pointer;
}
.cf-pick-ico{width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.cf-vh:focus-visible + .cf-pick{border-style:solid; border-color:var(--cf-green); box-shadow:var(--cf-focus)}
.cf-pick.is-full{display:none}
.cf-img-status{margin:8px 2px 0; font-size:16px; line-height:1.7; color:var(--cf-sub)}
.cf-img-status:empty{display:none}

/* 見えないが、読み上げとキーボードでは使えるようにする */
.cf-vh{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

/* スパム対策の見えない欄 */
.cf-hp{position:absolute; left:-10000px; top:0; width:1px; height:1px; overflow:hidden}

/* ---------- Cloudflare Turnstile（鍵が入ったときだけ） ----------
   同意チェックの下・送信ボタンの上に、中央寄せで出す。
   部品の幅は 300px あるので、せまい画面では箱の内側の余白ぶん左右に広げて収める。 */
.cf-ts{display:flex; flex-direction:column; align-items:center; margin:22px calc(var(--cf-pad) * -1) 0; text-align:center}
.cf-ts-box{display:flex; justify-content:center; min-height:65px}
.cf-ts .cf-err{margin:8px var(--cf-pad) 0; text-align:left}

/* ---------- 送れなかったとき ---------- */
.cf-alert{margin:22px 0 0; padding:14px 16px; border-radius:12px; background:var(--cf-err-bg); border:1.5px solid #EDB3AB}
.cf-alert p{margin:0; font-size:16px; line-height:1.75}
.cf-alert-title{font-size:17px; font-weight:800; color:var(--cf-err)}
.cf-alert-msg{margin-top:4px !important; font-weight:700; color:#7A2A22}
.cf-alert-sub{margin-top:8px !important; color:var(--cf-sub)}
.cf-alert-sub + .cf-alert-sub{margin-top:2px !important}

/* ---------- 送信ボタン ---------- */
.cf-submit{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:60px; margin:24px 0 0; padding:14px 18px;
  font:inherit; font-size:19px; font-weight:800; line-height:1.4; letter-spacing:.04em; color:#fff;
  background:var(--cf-green); border:0; border-radius:14px; cursor:pointer;
  box-shadow:0 8px 18px -10px rgba(31,143,124,.75);
  transition:background-color .15s ease, transform .12s ease, opacity .15s ease;
}
.cf-submit:focus{outline:none}
.cf-submit:focus-visible{box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--cf-green2)}
.cf-submit:active{transform:translateY(1px); background:var(--cf-green-d)}
.cf-submit[aria-disabled="true"]{cursor:progress; opacity:.82; transform:none; background:var(--cf-green)}
.cf-spin{display:none; flex:0 0 auto; width:22px; height:22px; border-radius:50%; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:cf-spin .8s linear infinite}
.cf-submit.is-sending .cf-spin{display:inline-block}
@keyframes cf-spin{to{transform:rotate(360deg)}}
.cf-after{margin:10px 0 0; font-size:16px; line-height:1.7; color:var(--cf-sub); text-align:center}
@media (hover:hover){
  .cf-submit:hover{background:#1B8070}
  .cf-opt-box:hover,.cf-chip span:hover{border-color:#B9AB93}
  .cf-thumb-rm:hover,.cf-suggest-btn:hover{background:#FBF7F0}
  .cf-btn-ghost:hover{background:#FBF7F0}
}

/* ---------- 受け付けました ---------- */
.cf-done{padding:6px 0 2px; text-align:center}
.cf-done-icon{display:flex; align-items:center; justify-content:center; width:76px; height:76px; margin:6px auto 12px; border-radius:50%; background:var(--cf-green-bg)}
.cf-done-icon svg{width:40px; height:40px; fill:none; stroke:var(--cf-green); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.card .cf-done-title{margin:0 0 16px; padding:0; border:0; font-size:22px; line-height:1.5; color:var(--cf-ink)}
.cf-done-title:focus{outline:none}
.cf-receipt{display:flex; flex-direction:column; align-items:center; margin:0 0 14px; padding:10px 14px 12px; border-radius:14px; background:var(--cf-paper); border:1.5px solid var(--cf-line)}
.cf-receipt span{font-size:16px; font-weight:700; color:var(--cf-sub)}
.cf-receipt b{font-size:23px; font-weight:800; line-height:1.4; letter-spacing:.03em; color:var(--cf-ink); font-variant-numeric:tabular-nums; overflow-wrap:break-word}
.cf-done p{text-align:left}
.cf-done-mail b{word-break:break-all}
.cf-done-note{margin-top:14px; padding:4px 14px; border-radius:12px; background:#FFF8E6; border:1px solid #F0E0B4; text-align:left}
.cf-done-note p{font-size:16px; line-height:1.75}
.cf-done-actions{display:grid; gap:10px; margin-top:22px}
.cf-btn{
  display:flex; align-items:center; justify-content:center; min-height:56px; padding:12px 16px;
  font:inherit; font-size:18px; font-weight:800; line-height:1.4; text-decoration:none; border-radius:14px; cursor:pointer;
}
.cf-btn-primary{color:#fff; background:var(--cf-green); border:0}
a.cf-btn-primary{color:#fff}
.cf-btn-ghost{color:var(--cf-green-d); background:#fff; border:1.5px solid var(--cf-line-2)}

/* ---------- 動きを減らす設定の人には動かさない ---------- */
@media (prefers-reduced-motion:reduce){
  .cf-input,.cf-opt-box,.cf-opt-box::before,.cf-chip span,.cf-submit{transition:none}
  .cf-spin{animation:none; border-color:#fff; border-top-color:rgba(255,255,255,.35)}
}