/* 問い合わせフォーム。トップページ（top-page.html）の書式に合わせたもの。
tools/fix-content.py が埋め込む HTML と対で使う。 */
/* 丸い枠で囲わない。トップページの問い合わせ欄は地の上に直接置かれていて、
記事ページだけ角丸のカードに入っていたため、同じサイトに見えなかった。
（2026-09-27、代表より「問い合わせの大きな丸枠は不要」） */
.jt-form{
--f: "Noto Sans JP", sans-serif;
--ink:#1F1F1F; --sub:#6B6764; --accent:#CE1433; --accent-h:#A80F29;
--soft:#F8DBDD; --paper:#FDFDFD; --line:#EBD9DA;
font-family:var(--f); color:var(--ink);
margin:48px 0 0; padding:0; border:0; border-radius:0; background:none;
}
.jt-form *{ box-sizing:border-box }
/* SWELL の見出し装飾（赤帯・区切り線・擬似要素）が入り込むので打ち消す */
.jt-form h2, .jt-form h2::before, .jt-form h2::after,
.jt-form legend, .jt-form p, .jt-form label{
background:none !important; border:0; box-shadow:none;
}
.jt-form h2::before, .jt-form h2::after{ content:none !important }
.jt-form .jt-form__h2{
padding:0 !important; margin:0 0 12px !important; color:var(--ink) !important;
font-size:clamp(22px, 1vw + 18px, 31.5px) !important; font-weight:700; line-height:1.4;
text-align:left !important;
}
.jt-form .jt-form__h2 span{ color:var(--accent) !important }
.jt-form__head{ margin:0 0 28px }
/* 見出しの上のラベル。のぼり旗の形＋桜。ボタンと別の形にしてある */
.jt-form .jt-form__eyebrow{
display:inline-flex !important; align-items:center; margin:0 0 14px; padding:5px 26px 5px 14px;
border-radius:0 !important; background:var(--accent) !important; color:var(--paper);
font-size:13px; font-weight:700; line-height:1.6; letter-spacing:.14em;
clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.jt-form .jt-form__eyebrow::before{
content:""; flex:0 0 13px; width:13px; height:13px; margin-right:8px;
background:currentColor;
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'%23000'%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(0%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(72%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(144%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(216%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(288%2012%2012)'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1.5'%20fill%3D'%23fff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%3E%3Cg%20fill%3D'%23000'%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(0%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(72%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(144%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(216%2012%2012)'%2F%3E%3Cpath%20d%3D'M12%2012%20C9.2%2012%207.6%209.6%208.2%207.2%20C8.6%205.6%209.8%204.4%2011.0%203.6%20L12%205.1%20L13.0%203.6%20C14.2%204.4%2015.4%205.6%2015.8%207.2%20C16.4%209.6%2014.8%2012%2012%2012%20Z'%20transform%3D'rotate(288%2012%2012)'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1.5'%20fill%3D'%23fff'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
.jt-form .jt-form__lead{ margin:0; font-size:16px; line-height:1.9; color:var(--ink); max-width:62ch }
/* 罠。人には見せない */
.jt-hp{
position:absolute !important; width:1px; height:1px;
margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* 1つの問いに1行。Name と Email が横並びだと姓・名と読み違えられるため、
2列組みをやめて全部1列にした。 */
.jt-form__grid{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr) }
.jt-form__field--full{ grid-column:1 / -1 }
/* 「日付は未定」のチェック */
.jt-form .jt-form__check{
display:flex !important; align-items:center; gap:8px; margin:10px 0 0 !important;
font-size:13px; font-weight:400 !important; line-height:1.4; cursor:pointer;
}
.jt-form .jt-form__check input{ accent-color:var(--accent); width:16px; height:16px; margin:0; flex:0 0 auto }
.jt-form__field input:disabled{ background:#F7F2F3; color:var(--sub); cursor:not-allowed }
.jt-form__field{ margin:0; min-width:0 }
.jt-form__field > label,
.jt-form__field > legend{
display:block; margin:0 0 8px; padding:0;
font-size:13px; font-weight:700; line-height:1.3;
}
.jt-form__field em{ color:var(--accent); font-style:normal }
.jt-form__field small{
display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--sub); line-height:1.7;
}
/* 入力欄は枠。本番 japan-trails.com/contact-us/ の実測に合わせた
（白地・1pxの枠・高さ43px・padding 0 14px・16px）。
枠の色は本番が rgba(0,0,0,.25)。黒は文字色に限る決まりなので同じ濃さを ink の25%で出す。 */
.jt-form__field input[type="text"],
.jt-form__field input[type="email"],
.jt-form__field input[type="tel"],
.jt-form__field input[type="date"],
.jt-form__field select,
.jt-form__field textarea{
width:100%; min-height:44px; padding:12px 14px;
border:1px solid rgba(31,31,31,.25); border-radius:0;
background:var(--paper); color:var(--ink);
font-family:var(--f); font-size:16px; line-height:1.4;
transition:border-color .2s;
}
/* 選び方はドロップダウン1つだけ。矢印は自前で描く */
.jt-form__field select{
appearance:none; -webkit-appearance:none; cursor:pointer;
padding-right:38px; line-height:1.4;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2012%208'%3E%3Cpath%20d%3D'M1%201l5%205%205-5'%20fill%3D'none'%20stroke%3D'%23CE1433'%20stroke-width%3D'1.6'%2F%3E%3C%2Fsvg%3E");
background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px;
}
.jt-form__field textarea{ resize:vertical; min-height:140px }
/* 触れた欄が赤くなるのは止める。ただしどこを入力中かは分かる必要があるので、
枠を本文色まで濃くするだけにする（色は変えない）。 */
.jt-form__field input:focus,
.jt-form__field select:focus,
.jt-form__field textarea:focus{
outline:none; border-color:var(--ink); box-shadow:none;
}
/* 入力してから間違っているときだけ赤にする。
前の :not(:placeholder-shown):invalid は、placeholder を持たない必須欄が
読み込み直後から赤枠になってしまっていた。:user-invalid なら
ユーザーが一度触ってからしか効かない。 */
.jt-form__field input:user-invalid,
.jt-form__field textarea:user-invalid{ border-color:var(--accent) }
fieldset.jt-form__field{ border:0; margin:0; padding:0 }
.jt-form__foot{
display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; margin:32px 0 0;
}
.jt-form__btn{
padding:16px 28px; border:1px solid var(--accent); border-radius:200px; cursor:pointer;
background:var(--accent); color:var(--paper);
font-family:var(--f); font-size:16px; font-weight:700; line-height:1.4;
transition:background-color .2s;
}
.jt-form__btn:hover{ background:var(--accent-h) }
.jt-form__note{ font-size:13px; color:var(--sub); line-height:1.8 }
.jt-form__note a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px }
.jt-form__note a:hover{ color:var(--accent-h) }
/* 送信に失敗して戻ってきたとき（contact.php が ?error= を付ける） */
.jt-form__error{
margin:0 0 24px; padding:14px 18px; border-radius:0;
background:var(--soft); font-size:14px; line-height:1.8;
}
/* 日付欄は iOS Safari が独自の見た目と最小幅を持っていて、
width:100% を指定しても枠から右へはみ出すことがある。
見た目を他の入力欄に揃え、最小幅の主張を消す。 */
.jt-form__field input[type="date"]{
-webkit-appearance:none; appearance:none;
min-width:0; max-width:100%;
}
.jt-form__field input[type="date"]::-webkit-date-and-time-value{ text-align:left }
.jt-form__field input[type="date"]::-webkit-calendar-picker-indicator{ margin-left:auto }