/* =========================================
   WordPress固有の調整CSS（design_localには無いWP専用ファイル）
   Contact Form 7 の出力をテーマデザインに合わせる
========================================= */

/* CF7が各入力を包むspanをブロック化し、ラベル内装飾spanのスタイル継承を打ち消す */
.wpcf7-form-control-wrap { display: block; }
.form label > .wpcf7-form-control-wrap,
.page-form label .wpcf7-form-control-wrap {
    margin-left: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* トップページ（.form）には select と page-form__row の定義が無いので補完する */
.form select {
    display: block;
    width: 100%;
    min-width: 0;
    margin-top: 7px;
    padding: 13px 14px;
    border: 1px solid rgba(39, 56, 51, .13);
    border-radius: 11px;
    outline: 0;
    color: var(--ink);
    background: rgba(255, 255, 255, .72);
    transition: border-color .3s, box-shadow .3s;
}
.form select:focus { border-color: var(--sage-deep); box-shadow: 0 0 0 4px rgba(94, 142, 120, .1); }
.form .page-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
@media (max-width: 600px) {
    .form .page-form__row { grid-template-columns: 1fr; gap: 0; }
}

/* 公式LINE誘導カード（全ページ共通コンポーネント。トップCONTACTと/contact/サイドで使用） */
.line-card {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 420px;
    margin-top: 30px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    background: var(--white);
    box-shadow: 0 15px 35px rgba(70, 85, 78, .09);
    transition: transform .3s var(--ease), box-shadow .3s;
}
.line-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(70, 85, 78, .14); }
.line-card > span {
    display: grid;
    place-items: center;
    flex: none;
    width: 50px;
    aspect-ratio: 1;
    border-radius: 16px;
    color: var(--sage-deep);
    background: var(--sage-pale);
}
.line-card svg { width: 27px; height: 27px; }
.line-card small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .06em; }
.line-card b { display: block; color: var(--ink); font-size: 17px; line-height: 1.4; }
.line-card > i { margin-left: auto; color: var(--sage-deep); font-style: normal; font-weight: 700; }

/* スパム対策のハニーポット欄（functions.php参照）。
   人間には見えず操作もできない位置へ追い出す（display:noneはボットが検知しやすいので使わない） */
.comet-hp-field {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* スマホ: フォーム入力欄の文字を16px以上にする。
   iOS Safariは「入力欄の文字が16px未満」だと、フォーカス時に画面を自動ズームし、
   入力後も拡大されたまま戻らない。16px以上ならそもそもズームしない（＝寄らない方式）。
   ピンチ操作での拡大は今までどおり使える */
@media (max-width: 820px) {
    .form input,
    .form select,
    .form textarea,
    .page-form input,
    .page-form select,
    .page-form textarea {
        font-size: 16px;
    }
}

/* reCAPTCHA v3 のバッジを非表示にする。
   ※非表示にする条件として、フォーム内に帰属表記（.recaptcha-note、functions.phpで出力）を
   入れることがGoogleの規約で義務付けられている。表記を消すならバッジを戻すこと */
.grecaptcha-badge { visibility: hidden !important; }
.recaptcha-note { margin: 14px 0 0; color: var(--muted); font-size: 9px; line-height: 1.8; }
.recaptcha-note a { color: var(--sage-deep); text-decoration: underline; }

/* 送信ボタン（CF7はinputタグのため矢印の丸を持てない。中央寄せのピル型にする） */
.wpcf7 .soft-button { width: 100%; justify-content: center; text-align: center; padding: 0 28px; }

/* 送信中のスピナー */
.wpcf7-spinner { display: block; margin: 10px auto 0; }

/* 未入力・形式エラーの文言 */
.wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--peach-deep); font-size: 11px; font-weight: 700; }

/* 送信結果メッセージ（成功=セージ、失敗=ピーチ） */
.wpcf7 form .wpcf7-response-output {
    margin: 18px 0 0;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text);
    background: var(--paper-2);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--sage-deep); background: var(--sage-pale); color: var(--ink); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output { border-color: var(--peach-deep); background: var(--peach-pale); color: var(--ink); }

/* スマホ: 下層ページのヒーローの飾りが横にはみ出す問題の対策（2026-07-22）。
   ①土星の輪などの飾り（ステージ幅の136%）が画面端から突き出して
   ページ全体が横スクロールできてしまう → ヒーローの外(横方向)は描画しない。
   1行目は古いブラウザ用の保険、2行目が本命 */
.page-hero { overflow-x: hidden; }
.page-hero { overflow-x: clip; }

/* ②浮遊ラベル（「01 困りごとを話す」等）が画面の左右で切れる問題（2026-07-22）。
   ラベルは translateZ(220px) で「220px手前に浮く」3D指定を持ち、
   遠近法(perspective:1200px)の作用で画面中央から外側へ約40px押し出される。
   PCでは余白に収まるが、スマホはステージ=画面幅のため左右のラベルが画面外へ出る。
   スマホ幅では遠近法を切って押し出しを無くす（浮遊・傾きの見た目は維持される） */
@media (max-width: 700px) {
  .page-hero .motion-stage { perspective: none; }
}