/* ============================================================
   申込み・お問合せ（moushikomi*.html、thanks.html）専用
   共通の色・ボタン・ページ見出しは drone-base.css

   【注意】フォームの送信プログラム（mailform/js/mailform-js.php）は、
   HTMLの組み方に頼って動いている。次の名前・構造は変えないこと。
   - form#mail_form の中に dl を並べ、dl の中は dt（項目名）と dd（入力欄）の組
   - 必須の欄は dd に class="required"
   - dt の先頭の <i></i> に「必須／任意」の印が自動で入る
   - dd の中に span.error_blank などのエラー表示が自動で追加される
   - 送信ボタンは p#form_submit の中の input#form_submit_button
   - 送信中は body に div.loading-layer と span.loading が追加される
   ============================================================ */

/* ---------- ページの組み ---------- */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: start; }
.form-side { position: sticky; top: 1.5rem; display: grid; gap: 1rem; }
.side-box { padding: 1.4rem; border-radius: 6px; background: var(--drone-mist); }
.side-box h2 { margin: 0; color: var(--drone-navy); font-size: 1rem; }
.side-box p { margin: .4rem 0 0; font-size: .88rem; }
.side-box--tel { color: #fff; background: var(--drone-navy); }
.side-box--tel h2 { color: #fff; }
.side-box__number { margin-top: .3rem !important; font-size: 1.7rem !important; font-weight: 700; line-height: 1.3; letter-spacing: .03em; }
.side-box__number a { color: #fff; text-decoration: none; }
.side-box--tel p:last-child { color: #dce9e7; }
.side-box ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.side-box li + li { margin-top: .25rem; }

.form-card { padding: clamp(1.3rem, 3vw, 2.2rem); border: 1px solid var(--drone-line); border-radius: 6px; background: #fff; }
.form-card__title { margin: 0; color: var(--drone-navy); font-size: 1.35rem; }
.form-card__lead { margin: .4rem 0 0; color: #4b5c62; font-size: .92rem; }
.form-card__lead strong { color: #b3261e; }

/* ---------- 入力欄の並び（dl / dt / dd） ---------- */
form#mail_form { margin-top: 1.4rem; border-top: 2px solid var(--drone-navy); }
form#mail_form dl { display: grid; grid-template-columns: 13.5em minmax(0, 1fr); gap: .4rem 1.4rem; margin: 0; padding: 1.1rem 0; border-bottom: 1px solid var(--drone-line); }
form#mail_form dt { padding-top: .55rem; color: var(--drone-navy); font-size: .94rem; font-weight: 700; line-height: 1.5; }
form#mail_form dd { margin: 0; line-height: 1.7; }

/* 「必須／任意」の印（JSが i の中に span を入れる） */
form#mail_form dt i { font-style: normal; }
form#mail_form dt span.required,
form#mail_form dt span.optional { display: inline-block; margin-right: .5rem; padding: 0 .45rem; border-radius: 3px; font-size: .72rem; font-weight: 700; line-height: 1.6; vertical-align: .12em; }
form#mail_form dt span.required { color: #fff; background: #b3261e; }
form#mail_form dt span.optional { color: #5d6d72; background: #e6ecea; }

/* 入力欄 */
form#mail_form input[type="text"],
form#mail_form input[type="tel"],
form#mail_form input[type="email"],
form#mail_form select,
form#mail_form textarea { box-sizing: border-box; width: 100%; max-width: 32rem; min-height: 46px; padding: .55rem .75rem; border: 1px solid #b9c7c4; border-radius: 4px; color: var(--drone-ink); background: #fff; font: inherit; font-size: 1rem; }
form#mail_form textarea { max-width: none; min-height: 9rem; resize: vertical; }
form#mail_form input[name="people"] { width: 6em; }
form#mail_form input[name="postal"] { max-width: 12em; }
form#mail_form input[readonly] { cursor: pointer; background: #fbfdfc; }
form#mail_form input:focus,
form#mail_form select:focus,
form#mail_form textarea:focus { border-color: var(--drone-teal); outline: 3px solid rgba(0, 107, 115, .18); outline-offset: 0; }

/* ラジオボタン・チェックボックス */
form#mail_form dd ul { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin: 0; padding: 0; list-style: none; }
form#mail_form dd li label { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .3rem .9rem .3rem .7rem; border: 1px solid #b9c7c4; border-radius: 4px; cursor: pointer; background: #fff; }
form#mail_form dd li label:has(input:checked) { border-color: var(--drone-teal); background: #eef6f5; }
form#mail_form input[type="radio"],
form#mail_form input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--drone-teal); }

/* 入力欄の下の補足 */
.field-note { display: block; margin-top: .4rem; color: #5d6d72; font-size: .85rem; line-height: 1.6; }
.field-row { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: .5rem; align-items: center; }
.field-row + .field-row { margin-top: .6rem; }
.field-row span { color: #4b5c62; font-size: .88rem; font-weight: 700; }

/* エラー表示（JSが dd の中に追加する） */
form#mail_form dd span.error_blank,
form#mail_form dd span.error_format,
form#mail_form dd span.error_match { display: block; color: #b3261e; font-size: .85rem; font-weight: 700; }
form#mail_form dd span.error_blank:empty,
form#mail_form dd span.error_format:empty,
form#mail_form dd span.error_match:empty { display: none; }

/* 送付先（機器レンタル）。「必要」を選ぶまでは hidden で隠す */
form#mail_form dl[hidden] { display: none; }

/* 送信ボタン */
.form-privacy { margin: 1.4rem 0 0; color: #4b5c62; font-size: .88rem; }
form#mail_form p#form_submit { margin: 1.2rem 0 0; text-align: center; }
form#mail_form input#form_submit_button { min-width: 16rem; min-height: 54px; padding: .7rem 2rem; border: 0; border-radius: 5px; color: #fff; background: var(--drone-teal); cursor: pointer; font: inherit; font-size: 1.05rem; font-weight: 700; }
form#mail_form input#form_submit_button:hover { background: var(--drone-teal-dark); }
form#mail_form input#form_submit_button:focus-visible { outline: 3px solid var(--drone-amber); outline-offset: 3px; }

/* 送信中の表示（JSが body に追加する） */
div.loading-layer { position: fixed; top: 0; left: 0; z-index: 10000; width: 100vw; height: 100vh; background: rgba(13, 40, 46, .7); }
span.loading { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; margin: -30px 0 0 -30px; border: 5px solid rgba(255, 255, 255, .2); border-left-color: #fff; border-radius: 50%; animation: load-circle 1s linear infinite; }
@keyframes load-circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- 申込み・お問合せの入口（moushikomi.html） ---------- */
.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-top: 2rem; }
.entry-card { display: flex; flex-direction: column; gap: .4rem; height: 100%; padding: 1.6rem 1.7rem; border: 1px solid var(--drone-line); border-top: 4px solid var(--drone-teal); border-radius: 0 0 6px 6px; color: var(--drone-ink); background: #fff; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease; }
.entry-card:hover { color: var(--drone-ink); border-color: var(--drone-teal); box-shadow: var(--drone-shadow); }
.entry-card--inquiry { border-top-color: var(--drone-amber); }
.entry-card__title { color: var(--drone-navy); font-size: 1.3rem; font-weight: 700; }
.entry-card__title::after { content: " →"; color: var(--drone-teal); }
.entry-card__text { font-size: .92rem; }
.entry-card__for { margin-top: auto; padding-top: .6rem; color: #5d6d72; font-size: .84rem; }
.entry-tel { display: grid; grid-template-columns: auto 1fr; gap: .4rem 2rem; align-items: center; margin-top: 2.4rem; padding: 1.6rem 1.8rem; border-radius: 6px; color: #fff; background: var(--drone-navy); }
.entry-tel h2 { grid-column: 1 / -1; margin: 0; font-size: 1.05rem; }
.entry-tel__number { margin: 0; font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.3; }
.entry-tel__number a { color: #fff; text-decoration: none; }
.entry-tel p:last-child { margin: 0; color: #dce9e7; font-size: .9rem; }

/* ---------- 送信完了（thanks.html） ---------- */
.thanks { max-width: var(--reading-width); }
.thanks p { margin: 1rem 0 0; }
.thanks-note { margin-top: 1.6rem; padding: 1.2rem 1.4rem; border-left: 4px solid var(--drone-amber); background: #fffaf2; }
.thanks-note h2 { margin: 0; color: var(--drone-navy); font-size: 1.05rem; }
.thanks-note p { margin: .4rem 0 0; font-size: .92rem; }

/* ---------- タブレット ---------- */
@media (max-width: 1000px) {
  .form-layout { grid-template-columns: 1fr; }
  .form-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- スマホ ---------- */
@media (max-width: 760px) {
  .form-side { grid-template-columns: 1fr; }
  form#mail_form dl { grid-template-columns: 1fr; gap: .45rem; }
  form#mail_form dt { padding-top: 0; }
  form#mail_form input#form_submit_button { width: 100%; min-width: 0; }
  .entry-grid { grid-template-columns: 1fr; }
  .entry-tel { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: .2rem; }
}