@charset "utf-8";

/* 共通部分 ----------*/
html {
    font-size: 100%;
}

/* ヘッダー部分 --------------------------------------- */
.page-header {
    display: flex;
    align-items: center;      /* ロゴと文字を縦方向センター　*/
    justify-content: center;  /* 全体を画面中央へ */
    gap: 24px;                /* ロゴと文字の間隔 */
    padding: 16px 12px;
}
.logo {
    max-width: 150px;           /* ロゴの高さ調整（必要に応じて） */
    height: auto;
    width: clamp(96px, 20vw, 150px);    /* スマホでロゴも少し縮む */
}
.brand-meta {
    display: flex;
    flex-direction: column;     /* h2の下に .form-titleを縦積み */
    align-items: center;        /* 文字ブロックを中央寄せ */
    text-align: center;
}

.brand-meta 
.form-title {
    margin-top: 6px;
}

.brand-meta h2,
.brand-title {
    white-space: nowrap;
    font-size: clamp(20px, 4vw, 28px);
    margin: 0;
}

.brand-meta h2 {
    margin: 0;
    line-height: 1.2;                           /* 一行固定 */
    font-size: clamp(1.6rem, 5vw, 2.2.rem);     /* 画面幅に応じて縮む */
    white-space: nowrap;
}

/* ボディ部分 ---------------------------------------- */
form {
    display: grid;
    row-gap: 14px;
    width: clamp(var(--container-min), 50vw, var(--content-max));
    margin-inline: auto;
    padding-inline: 16px;            /* 端がくっつかないように軽く内側余白 */
}

form :is(input, select, textarea) {
    width: 100%;
    max-width: 100%;
    display: block;
    box-sizing: border-box;
}

.name-block {
    margin-block: 10px 6px;
    border: 0;
    padding: 0;
}

.name-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.name-field {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
}

.name-label {
    font-size: .95rem;
    line-height: 1.2;
    padding: 5px 3px 10px 15px;
}

.name-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1.8px solid #cfcfcf;
    border-radius: 8px;
    line-height: 1.4;
}

input[type],
textarea,
fieldset {
    border-style: solid;
    width: 100%;
    border-radius: 8px;
    border: 1.8px solid black;
    padding: 10px 40px 10px 12px;
    line-height: 1.4;
    box-sizing: border-box;
}

/* 入力コントロールは幅100%＋同じ枠線・角丸に */
input, select, textarea {
    display: block;
    width: 100%;
    font: inherit;
    padding: 10px 12px;
    border: 1.8px solid #cfcfcf;
    border-radius: 8px;
    max-width: none;
}

/* チェック/ラジオは通常サイズに戻す（幅・高さ・枠をリセット） */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    height: auto;
    border: none;
}

/* 入力フィールドは“フォームの幅”に合わせて100% */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select,
.select {
    width: 100%;
}

label {
    font-size: 15px;
    row-gap: 6px;
    display: block;
    margin-bottom: 6px;
}

/* 都道府県（label → select）を縦並びに */
label[for="prefecture"],        /* ラベルを行要素→ブロック要素に */
#prefecture {                   /* セレクト本体 */
    display: block;             /* 1要素=1行にする */
    width: 100%;
}

/* 市区町村（label → input）も同様に */
label[for="city"]
#city {
    display: block;
    width: 100%;
}

/*　都道府県のselectと市区町村のlabelの間に少し余白 */
#prefecture {
    margin-bottom: 8px;
}

/* ひとかたまり（ラベル→入力）を縦に積む */
.field {
    display: grid;              /* ラベルと入力の縦積み */
    row-gap: 6px;                   /* ラベルと入力の間隔 */
}

/* フィールドセットの見た目も統一 */
fieldset {
    width: 100%;
    border: 1.8px solid #cfcfcf;
    border-radius: 8px;
    padding: 14px;
}
.options-onecol,
.field,
fieldset > .field {
    max-width: 100%;
    margin-inline: auto;
}

/* 予算：入力＋「万円」を横並び＆揃える */
.inlne {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 8px;
}
.inline .suffix {
    white-space: nowrap;
}

/* ▼“押せる箱”の器。疑似要素で矢印を重ねるため relative */
.select-wrap {
    position: relative;
    width: 100%;
}

select {
    font-size: 16px;
}

/* ▼select本体の見た目（枠線・角丸・余白）*/
.select {
    -webkit-appearance: none;               /* iOS/Safari の既定矢印を消す */
    appearance: none;                       /* ブラウザ既定の装飾を外す */
    width: 100%;    
    min-height: 44px;                      /* タップしやすい高さ（アクセシビリティ） */
    padding: 7px 40px 7px 12px;             /* 右は矢印ぶん広め */
    font-size: 16px;                        /* iOSの拡大防止も兼ねて 16px 以上 */
    line-height: 1.4;
    border: 2px solid #d9d9d9;            /* 通常時の枠線（＝押せる箱） */
    border-radius: 8px;                     /* 角丸 */
    background-color: #fff;               /* 背景色 */
    cursor: pointer;                        /* 手カーソルで“押せる感” */
    transition: border-color .15s ease, box-shadow .15s ease;   /* なめらか */
}

/* ▼ホバーで枠線を少し濃く（PC向け）*/
.select:hover {
    border-color: #bdbdbd;
}

/* ▼フォーカス時はリングで強調（キーボード/タップが分かる） */
.select:hover-visible {
    outline: none;                                  /* 既定の青枠を消す */
    border-color: #f59e0b;                        /* オレンジの枠 */
    box-shadow: 0 0 0 3px rgba(245,158,11,.22);    /* 薄い外側リング */
}

/* ▼未選択（placeholder）のときは文字色を薄くして気づかせる */
.select:required:invalid {
    color: #9aa0a6;             /* “— 選択してください —” を薄く表示 */
}
.select option[disabled] {
    color: #9aa0a6;             /* プルダウン内のプレースホルダーも薄く */
}

/* ▼右側の下向き矢印（CSSだけで実装。SVGでもOK） */
.select-wrap::after {
    content: "▾";
    position: absolute;
    right: 12px;                                /* 右端の余白 */
    top: 50%; transform: translateY(-50%);      /* 垂直中央 */
    color: #8a8a8a;                           /* 矢印の色 */
    pointer-events: none;                       /* クリックはselectに通す */
    font-size: 14px;
    line-height: 1;
}

/* ▼エラー表示（バリデーションやJSで aria-invalid を付けたとき） */
.select[aria-invalid="true"] {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}

/* ▼押せる“箱”の器。相対配置にして矢印(疑似要素)を中に置く */
.select-wrap {
    position: relative;
    width: 100%;
}

/* ▼本体の見た目（枠線/角丸/余白/フォーカス）*/
.select {
    -webkit-appearance: none;           /* iOS/Safari の標準矢印を消す */
    appearance: none;                   /* 各ブラウザの標準装飾を外す */
    width: 100%;                        /* タップしやすい高さ(アクセシビリティ) */
    min-height: 44px;
    padding: 10px 40px 10px 12px;       /* 右は矢印ぶん広め */
    font-size: 1rem;
    line-height: 1.4;                   /* 行高 */
    border: 1.8px solid black;      /* 通常時の枠線 */
    border-radius: 8px;                 /* 角丸 */
    background: #fff;
    cursor: pointer;                    /* 手のカーソルで“押せる”感 */
    transition: border-color .15s ease, box-shadow .15 ease;    /* なめらか */
}

/* ホバー時に枠色を少し強調（PC向けの視覚フィードバック）*/
.select:hover {
    border-color: #b6b6b6
}
/* フォーカスリング：キーボード/タップで分かるハイライト */
.select:focus-visible {
    outline: none;                                  /* 既定の青枠を消す */
    border-color: #f59e0b;                        /* オレンジで強調 */
    box-shadow: 0 0 0 3px rgba(245,158,11,.25);   /* 薄い外側リング */
}

/* まだ未選択（プレースホルダー）の時は薄い色で表示 */
.select:required:invalid {
    color: #9aa0a6;             /* グレー文字＝未選択が分かる */
}
.select option[disabled] {
    color: #9aa0a6;             /* プルダウン内のプレースホルダーも薄く */
}

/* ▼右側の下向き矢印（フォントで簡易。SVGに差し替えも可） */
.select-wrap::after {
    content: "▾";                               /* ▼ マーク */
    position: absolute;
    right: 12px;                                /* 右端の余白 */
    top: 50%; transform: translateY(-50%);      /* 右端の余白 */
    color: #8a8a8a;                           /* 矢印の色 */
    pointer-events: none;                       /* クリックをブロックしない */
    font-size: 14px;
    line-height: 1;
}

/* エラー表示の例（バリデーションで付ける　or JSで付与）*/
.select[aria-invalid="true"] {
    border-color: #ef4444;                          /* 赤い枠 */
    box-shadow: 0 0 0 3px rgba(239,68,68,.18);      /* 赤い外側リング */
}

/* 縦一列に並べ、左寄せ */
.options-onecol {
    display: grid;
    row-gap: 10px;
    justify-items: start;
    width: 100%;
}

/* 1行のレイアウト（左：□ 右：文字） */
.options-onecol .opt {
    display: grid;                              /* テキストとチェックボックスを横並び */
    grid-template-columns: 1.5rem 1fr;           /* 左:チェック 右:文字 */
    column-gap: 10px;
    align-items: baseline;                      /* テキストの”字の底”で揃える */
}

.options-onecol .opt input {
    margin: 0;
    justify-self: center;
    position: relative;
    top: 1px;
}

.options-onecol .opt input[type="checkbox"],
.options-onecol .opt input[type="radio"] {
    grid-column: 1;
    justify-self: center;
    margin: 0;
    position: relative;
    top: 1px;
}
.options-onecol .opt span {
    grid-column: 2;
    white-space: normal;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* 念のため：縦書き指定がどこかにあっても横書きに戻す */
.options-onecol, .options-onecol * { writing-mode: horizontal-tb;}

@media (min-width: 900px){
  .options-onecol .opt span{
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* 予算：入力枠と単位を横並びにする */
.unit-row {
    display: flex;          /* 横並びに */
    align-items: center;    /* 縦中心でそろえる */
    gap: 8px;               /* 枠と単位の間隔 */
}

.unit-row #budget {
    width: 10rem;           /* 枠の横幅（お好みで調整） */
}

.nuit {
    white-space: nowrap;    /* 「万」「円」が折り返されないように */
}

/* ボタン設定 ----------------- */
/* ボタンを中央に配置 */
.form-actions {
    display: flex;
    justify-content: center;
    margin: 50px 0 25px;
}

/* ボタン自体の見た目（任意） */
.btn-submit {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 12px 28px;             /* クリックしやすい大きさ */
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    cursor: pointer;                /* ホバー時に手のカーソル */
    position: relative;             /* ::after(光沢)の基準にする */
    overflow: hidden;               /* 光沢がはみ出さないように */
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);        /* オレンジのグラデーション（深みを出す） */
    box-shadow: 0 8px 18px rgba(217, 119, 6, .25), 0 2px 6px rgba(0, 0, 0, .08);              /* 立体感のための影（下に落とす） */
    /* マイクロインタラクションの滑らかさ */
    transition: transform .18s ease,          /* 押した/浮いた動き */
                box-shadow .18s ease,         /* 影の変化 */
                filter .18s ease;             /* 明るさの変化 */
    /* min-width: 160px */          /* 横幅をそろえたい時に有効化 */
    /* width: auto; */              /* 全幅指定があれば解除して中央に見せる */
}

/* ホバー：少し浮かせて影を強く、わずかに明るく */
.btn-submit:hover {
    transform: translateY(-2px);    /* 上に2px 浮く */
    box-shadow: 0 12px 24px rgba(217, 119, 6, .35), 0 4px 10px rgba(0, 0, 0, .10);
    filter: brightness(1.03);       /* ほんの少しだけ明るく */
}

/* クリック中：押し込む感触に */
.btn-submit:active {
    transform: translateY(0);        /* 浮きを戻す */
    box-shadow: 0 6px 12px rgba(217, 119, 6, .30), 0 1px 4px rgba(0, 0, 0, .12);
}

/* キーボード操作のフォーカス可視化（アクセシビリティ） */
.btn-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,.9)
                0 0 0 6px rgba(245,158,11,.45)
                0 10px 20px rgba(217,119,6,.30);
}

/* 光沢の走るアニメ（ホバー時に左→右へ） */
.btn-submit::after {
    content: "";
    position: absolute; inset: -40% -120% -40% -120%;
    background: linear-gradient(120deg,)   
        rgba(225,225,225,0) 30%,
        rgba(225,225,225,.35) 50%,
        rgba(225,225,225,0) 70%;              /* 透明→白→透明の斜めハイライト */
        transform: translateX(-60%);            /* 初期は左外に配置 */
        transition: transform .6s ease;         /* 走る速度 */
}

.btn-submit:hover::after {
    transform: translateX(60%);     /* 右へ流れて光る */
}

/* 無効化時：色と影を弱め、操作不可に */
.btn-submit:disabled {
    cursor: not-allowed;        /* 禁止カーソル */
    filter: grayscale(.2) brightness(.9);
    box-shadow: none;
    opacity: .7;
}

/* 動きを苦手とする環境ではアニメ最小化 */
@media (prefers-reduced-motion: reduce) {
    .btn-submit,
    .btn-submit::after {
        transition: none;
    }
}

/* フッター部分 ---------------------------------------- */
.site-footer {
    padding: 20px 0;
    margin-top: 40px;
    background: #ffdbb3;
    display: flex;
    justify-content: center;
}

.footer-inner .crop {
    text-align: center;
    margin: 0 0 10px;
    font-weight: 700;
    letter-spacing: .06em;
    font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
}

.footer-inner {
    width: min(92vw, var(--content-max, 720px));
    margin-inline: auto;
    padding-inline: var(--content-pad, 16px);           /* 左右の内側余白 */
    text-align: left;
    display: flex;                  /* ↓ 会社名と会社情報を縦に積む */
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.company {
    width: min(92vw, 300px);            /* 実幅を指定して中央に見せる（調整は 480–640px 目安、細めにして右へ）*/
    margin-inline: auto;
}

.company p {
    margin: 4px 0;
    line-height: 1.7;
    word-break: break-word;
    padding-left: var(--label-width);
    text-indent: calc(-1 * var(--label-width));
}

/* スマホ極小のときはラベル幅をさらに詰める */
@media (max-width: 480px) {
    .company {
        width: 100%;
        margin: 10px auto 0;
        grid-template-columns: 8rem 1fr;
    }
}

/* 枠線の食い違いを防ぐ（ボックスの計算を統一） */
*,*::before,
*::after {
    box-sizing: border-box;
}

/* ===== 幅まわりの決定版（ここから下をCSSの末尾に追記） ===== */
:root{
  --container-min: 320px;       /* 最小幅（スマホ） */
  --content-max: 860px;         /* 最大幅（PC） */
}

/* ラッパー（HTMLと同じ contact-form に合わせる） */
.contact-form{
  /* 画面の60%を基準、ただし最小320px〜最大860px */
  width: clamp(var(--container-min), 60vw, var(--content-max));
  margin-inline: auto;
  padding-inline: 16px;
}

/* フォーム本体：行間だけ指定（幅は上のラッパーに任せる） */
.contact-form form{
  display: grid;
  row-gap: 14px;
}

/* 入力UIは「フォームの幅＝100%」にフィットさせる */
.contact-form form :is(input, select, textarea, fieldset){
  width: 100%;
  max-width: 100%;   /* 以前の max-width:500px などを打ち消す */
  min-width: 0;      /* 以前の min-width を打ち消す */
  box-sizing: border-box;
}

/* 2列→1列のブレークポイント（綴りも修正） */
@media (max-width: 560px){
  .name-row{ grid-template-columns: 1fr; }
}

/* 2列の氏名など、ボックス内の短いラベルも太字に */
.contact-form .name-field label {
  font-weight: 700;
}

/* ==== ラベルだけ太字 ==== */
.contact-form form label,
.contact-form form legend {
  font-weight: 700;
  margin-bottom: 5px;         /* 太字は項目名だけ */
}

/* ==== 入力欄：文字は標準、枠線は一定 ==== */
.contact-form form input,
.contact-form form select,
.contact-form form textarea {
  font-weight: 400;         /* 入力中の文字は太字にしない */
  border-style: solid;
  border-color: #cfcfcf;    /* お好みで */
  border-width: 1.5px;        /* 枠線の太さを固定（1～1.5pxが見やすい） */
}

/* ==== fieldset の外枠も固定 ==== */
.contact-form form fieldset {
  border: 1.5px solid #e5e5e5;
}

/* ==== チェックボックス/ラジオの選択肢は太字にしない ==== */
.contact-form .options-onecol .opt span {
  font-weight: 400;
}

/* 他に強い指定がある場合の最終手段（必要なときだけ） */
/*
.contact-form form input,
.contact-form form select,
.contact-form form textarea,
.contact-form form fieldset { border-width: 1px !important; }
*/