@charset "utf-8";

/* ======================================================================
   page-contact.css
   無料相談のWeb申し込み（/contact/reservation.html）専用スタイル
   共通の見た目は common.css を利用し、ここではフォーム関連のみ定義する
   ※ 寸法は rem（1rem = 16px）。495px以下は common.css の指定で比例縮小する
   ====================================================================== */

/* ---------- 申込みステップ ---------- */
.c-step{
    /* 3つを均等に伸ばさず、内容の幅のままページ中央にまとめる */
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:1.125rem;
    max-width:46rem;
    /* margin:0 を後ろに置くと中央寄せが打ち消されるため一括指定にする */
    margin:0 auto;
    padding:0;
    list-style:none;
  }

.c-step__item{
    position:relative;
    /* 内容の幅を基準に余りを分け合い、左右端を .c-form に揃える */
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.375rem;
    padding:0.5rem 0.75rem;
    background:var(--purple-050);
    border:1px solid var(--purple-100);
    border-radius:0.25rem;
    text-align:center;
  }

/* 現在のステップ */
.c-step__item.is-current{
    background:var(--purple-900);
    border-color:var(--purple-900);
    color:#fff;
  }

/* ステップ間の矢印 */
.c-step__item + .c-step__item::before{
    content:"";
    position:absolute;
    top:50%;
    left:-0.75rem;
    transform:translateY(-50%);
    width:0;
    height:0;
    border-top:0.3125rem solid transparent;
    border-bottom:0.3125rem solid transparent;
    border-left:0.375rem solid var(--purple-300);
  }

.c-step__no{
    flex:none;
    font-family:"Noto Sans JP",sans-serif;
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:.04em;
    color:var(--ink-soft);
  }

.c-step__item.is-current .c-step__no{color:var(--yellow);}

.c-step__no b{
    margin-left:0.0625rem;
    font-size:0.8rem;
  }

.c-step__label{
    font-family:"Noto Sans JP",sans-serif;
    font-size:0.75rem;
    font-weight:700;
    line-height:1.4;
  }

/* 見出し節とステップ節の間隔を詰める（既定 .c-hero 下3.5rem + .c-section 上3.5rem） */
.c-hero{padding-bottom:1.75rem;}

.c-section--tinted{padding-top:1.75rem; padding-bottom:1rem;}

#js-form{padding-top:1rem;}

.c-step__note{
    max-width:46rem;
    margin:1.125rem auto 0;
    font-size:0.92rem;
    line-height:1.8;
    text-align:center;
    color:var(--ink-soft);
  }

@media(max-width:768px){
  .c-step{flex-direction:column; gap:0.875rem;}
  .c-step__item{
    justify-content:center;
    gap:0.5rem;
    padding:0.5rem 0.75rem;
    text-align:center;
  }
  /* 縦積みでは矢印を下向きにする */
  .c-step__item + .c-step__item::before{
    top:-0.75rem;
    left:50%;
    transform:translateX(-50%);
    border-left:0.375rem solid transparent;
    border-right:0.375rem solid transparent;
    border-top:0.4375rem solid var(--purple-300);
    border-bottom:none;
  }
  .c-step__note{text-align:left;}
}


/* ======================================================================
   入力フォーム
   ====================================================================== */
.c-form{
    max-width:46rem;
    /* 「入力フォーム」見出しと最初の罫線の距離 */
    margin:1rem auto 0;
  }

.c-form__row{
    display:grid;
    grid-template-columns:12.5rem minmax(0,1fr);
    gap:1.25rem;
    align-items:start;
    padding:1.5rem 0;
    border-top:1px solid var(--line);
  }

.c-form__row:last-of-type{border-bottom:1px solid var(--line);}

.c-form__label{
    display:flex;
    align-items:center;
    gap:0.625rem;
    padding-top:0.625rem;
    font-family:"Noto Sans JP",sans-serif;
    font-size:1rem;
    font-weight:700;
    color:var(--purple-900);
    line-height:1.5;
  }

/* 必須・任意のラベル */
.c-form__req{
    flex:none;
    display:inline-block;
    padding:0.1875rem 0.5rem;
    border-radius:0.1875rem;
    background:#B31F31;
    color:#fff;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:.04em;
  }

.c-form__req--any{background:var(--purple-300);}

.c-form__field{min-width:0;}

/* ---------- 入力欄 ---------- */
.c-form__input,
.c-form__textarea,
.c-form__select{
    width:100%;
    padding:0.75rem 0.875rem;
    border:1px solid var(--purple-100);
    border-radius:0.375rem;
    background:#fff;
    font-family:"Noto Sans JP",sans-serif;
    font-size:1rem;
    line-height:1.6;
    color:var(--ink);
    transition:border-color .15s ease, box-shadow .15s ease;
  }

.c-form__input--tel{max-width:20rem;}

.c-form__textarea{resize:vertical; min-height:8.75rem;}

.c-form__input:focus,
.c-form__textarea:focus,
.c-form__select:focus{
    outline:none;
    border-color:var(--purple);
    box-shadow:0 0 0 3px rgba(102,80,133,.16);
  }

.c-form__input::placeholder,
.c-form__textarea::placeholder{color:#b3adbe;}

/* ---------- 生年月日 ---------- */
.c-form__birth{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:0.5rem;
  }

.c-form__select-wrap{
    position:relative;
    display:inline-block;
  }

/* 選択欄の右端に下向き矢印を描く */
.c-form__select-wrap::after{
    content:"";
    position:absolute;
    top:50%;
    right:0.75rem;
    width:0;
    height:0;
    margin-top:-0.125rem;
    border-left:0.3125rem solid transparent;
    border-right:0.3125rem solid transparent;
    border-top:0.375rem solid var(--purple-900);
    pointer-events:none;
  }

.c-form__select{
    width:auto;
    min-width:5.5rem;
    padding-right:2rem;
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
  }

.c-form__unit{
    font-family:"Noto Sans JP",sans-serif;
    font-size:0.95rem;
    font-weight:700;
    color:var(--ink-soft);
  }

/* ---------- 注意点 ---------- */
.c-form__notice,
.c-form__privacy{
    margin-top:2.25rem;
    padding:1.625rem 1.75rem 1.75rem;
    background:var(--purple-050);
    border-radius:0.75rem;
  }

.c-form__notice-title{
    margin:0 0 0.875rem;
    font-size:1.1rem;
    color:var(--purple-900);
  }

.c-form__notice p,
.c-form__privacy p{
    margin:0;
    font-size:0.95rem;
    line-height:1.9;
  }

/* 本文中のリンクは色と下線でリンクだと分かるようにする
   ※ ボタン（.c-btn）は対象外。含めると電話ボタンが紫＋下線になってしまう */
.c-form__notice a:not(.c-btn),
.c-form__privacy a:not(.c-btn){
    color:var(--purple);
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:0.15em;
  }

.c-form__notice a:not(.c-btn):hover,
.c-form__privacy a:not(.c-btn):hover{
    color:var(--purple-900);
    text-decoration-thickness:2px;
  }

.c-form__tel{
    margin-top:1.25rem;
    padding-top:1.25rem;
    border-top:1px solid var(--purple-100);
    text-align:center;
  }

.c-form__tel-head{
    margin:0 0 0.625rem !important;
    font-family:"Noto Sans JP",sans-serif;
    font-weight:700;
    color:var(--purple-900);
  }

/* 他ページのCTAと同じ見え方にする（幅は読みやすさのため上限のみ設定） */
.c-form__tel .c-btn{
    max-width:26rem;
    margin:0 auto;
  }

@media(max-width:768px){
  .c-form__tel .c-btn{max-width:none;}
}

/* ---------- 個人情報の同意 ---------- */
.c-form__agree{
    display:flex;
    align-items:flex-start;
    gap:0.625rem;
    margin-top:1.25rem;
    padding:1rem 1.125rem;
    background:#fff;
    border:2px solid var(--purple-100);
    border-radius:0.5rem;
    font-family:"Noto Sans JP",sans-serif;
    font-size:0.95rem;
    font-weight:700;
    line-height:1.6;
    color:var(--purple-900);
    cursor:pointer;
  }

.c-form__agree input{
    flex:none;
    width:1.375rem;
    height:1.375rem;
    margin-top:0.0625rem;
    accent-color:var(--purple-900);
    cursor:pointer;
  }

.c-form__agree:has(input:checked){
    border-color:var(--purple-900);
    background:#fff;
  }

.c-form__pmark{
    margin-top:0.875rem !important;
    font-size:0.85rem !important;
    color:var(--ink-soft);
  }

/* ---------- 送信 ---------- */
.c-form__submit{
    margin-top:2.25rem;
    text-align:center;
  }

.c-form__submit-btn{
    width:100%;
    max-width:26rem;
    margin:0 auto;
    padding:1.125rem 1.5rem;
    border:none;
    font-family:inherit;
    cursor:pointer;
  }

.c-form__submit-btn .c-btn__title{font-size:1.15rem;}

.c-form__submit-btn:disabled{
    background:#c8c3d0;
    box-shadow:none;
    cursor:not-allowed;
    opacity:1;
  }

.c-form__submit-btn:disabled:active{transform:none;}

.c-form__submit-note{
    margin:0.875rem 0 0;
    font-size:0.88rem;
    color:#B31F31;
    font-weight:700;
  }

/* ---------- 768px以下 ---------- */
@media(max-width:768px){
  .c-form__row{
    grid-template-columns:minmax(0,1fr);
    gap:0.625rem;
    padding:1.25rem 0;
  }

  .c-form__label{padding-top:0;}

  .c-form__input--tel{max-width:none;}

  .c-form__notice,
  .c-form__privacy{padding:1.25rem 1.125rem 1.375rem;}

  .c-form__birth{gap:0.375rem;}

  .c-form__select{min-width:4.5rem; padding-left:0.625rem; padding-right:1.75rem;}
}


/* ======================================================================
   追加スタイル
   ====================================================================== */

/* ---------- 見出し上の「24時間受付」 ---------- */
.c-eyebrow--alert{
    color:#B31F31;
    font-size:1rem;
    font-weight:900;
    letter-spacing:.08em;
  }

.c-eyebrow--alert::before{background:#B31F31;}

@media(max-width:768px){
  .c-eyebrow--alert{font-size:0.88rem;}
}

/* ---------- 氏名（セイ・メイ） ---------- */
.c-form__name{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:0.75rem;
  }

.c-form__name-item{
    display:flex;
    align-items:center;
    gap:0.5rem;
    min-width:0;
  }

.c-form__sublabel{
    flex:none;
    width:2.25rem;
    font-family:"Noto Sans JP",sans-serif;
    font-size:0.85rem;
    font-weight:700;
    color:var(--ink-soft);
  }

@media(max-width:480px){
  .c-form__name{grid-template-columns:minmax(0,1fr); gap:0.625rem;}
}

/* ---------- アコーディオン ---------- */
.c-acc{
    border-radius:0.75rem;
  }

.c-acc__head{
    position:relative;
    display:block;
    padding:0.125rem 2rem 0.125rem 0;
    font-family:"Noto Sans JP",sans-serif;
    font-size:1.05rem;
    font-weight:700;
    color:var(--purple-900);
    line-height:1.5;
    cursor:pointer;
    list-style:none;
  }

/* ブラウザ既定の三角マークを隠す */
.c-acc__head::-webkit-details-marker{display:none;}

/* ＋ / − の開閉マーク */
.c-acc__head::after{
    content:"＋";
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%);
    font-size:1.1rem;
    font-weight:700;
    color:var(--purple-300);
    transition:transform .2s ease;
  }

.c-acc[open] > .c-acc__head::after{content:"−";}

.c-acc__head:hover{color:var(--purple);}

.c-acc__head:focus-visible{
    outline:2px solid var(--purple);
    outline-offset:3px;
    border-radius:0.1875rem;
  }

.c-acc__body{
    padding-top:1rem;
    margin-top:1rem;
    border-top:1px solid var(--purple-100);
  }

/* 個人情報側は枠なしの素の見た目にする */
.c-acc--plain{
    padding:0;
    background:none;
  }

.c-acc--plain .c-acc__body{
    padding-top:0.75rem;
    margin-top:0.75rem;
  }

/* 注意点は details 自体が枠になる */
details.c-form__notice{padding:1.25rem 1.5rem;}

details.c-form__notice .c-acc__body > p:first-child{margin-top:0;}

@media(max-width:768px){
  .c-acc__head{font-size:0.98rem;}
  details.c-form__notice{padding:1rem 1.125rem 1.125rem;}
}



/* ======================================================================

   各ページCSSに共通で入っている定義

   （page-docs.css 等と同じ内容。ヘッダーのハンバーガー等に必要）

   ====================================================================== */



/* Header hamburger: square button, dark purple background, white lines */

  .c-hamburger--header{

    width:2.5rem; height:2.5rem;

    background:var(--purple-900);

    border-radius:8px;

  }



.c-hamburger--header span{

    left:0.625rem; right:0.625rem;

    background:#fff;

  }



.c-hamburger--header span:nth-child(1){top:0.8125rem;}



.c-hamburger--header span:nth-child(2){top:1.1875rem;}



.c-hamburger--header span:nth-child(3){top:1.5625rem;}



.c-hamburger--header.is-open span:nth-child(1){top:1.1875rem; transform:rotate(45deg);}



.c-hamburger--header.is-open span:nth-child(3){top:1.1875rem; transform:rotate(-45deg);}



@media(max-width:768px){

    .l-submenu__inner{display:none;}

    .c-hamburger--header{display:flex; align-items:center; justify-content:center;}

    .l-submenu{background:transparent; border-bottom:none;}

    .l-submenu.is-menu-open{background:var(--purple-900); border-bottom:1px solid rgba(255,255,255,.08);}

  }



/* ---------- Anchor offset for sticky header ---------- */

  section[id]{scroll-margin-top:118px;}



/* ---------- Utility classes (inline style removal) ---------- */

  .u-hidden-frame{display:none;visibility:hidden;}



.c-eyebrow--center{justify-content:center;}



/* ---------- 「入力フォーム」見出し（装飾なし・左寄せ） ---------- */
.c-form__heading{
    /* 下のフォーム(.c-form)と同じ幅・位置にして左端を揃える */
    max-width:46rem;
    margin:0 auto;
    text-align:left;
    font-size:1.35rem;
    color:var(--purple-900);
  }

@media(max-width:768px){
  .c-form__heading{font-size:1.15rem;}
}

/* ---------- SP専用の改行 ---------- */

.u-br-sp{display:none;}



@media(max-width:768px){.u-br-sp{display:inline;}}



/* ---------- エラーメッセージ ---------- */

/* 常時表示の書式案内 */
.c-form__hint{
    margin:0.5rem 0 0;
    font-size:0.82rem;
    line-height:1.7;
    color:var(--ink-soft);
  }

/* エラー時のみ表示される赤字メッセージ */
.c-form__error{

    margin:0.5rem 0 0;

    font-family:"Noto Sans JP",sans-serif;

    font-size:0.88rem;

    font-weight:700;

    line-height:1.7;

    color:#B31F31;

  }



.c-form__error[hidden]{display:none;}



/* エラーのある入力欄 */

.c-form__input.is-error,

.c-form__select.is-error{

    border-color:#B31F31;

    background:#fdf3f4;

  }



.c-form__input.is-error:focus,

.c-form__select.is-error:focus{

    box-shadow:0 0 0 3px rgba(179,31,49,.16);

  }



/* ======================================================================

   申込完了（サンクス）ページ

   ====================================================================== */

.c-thanks{

    max-width:46rem;

    margin:0 auto;

  }



.c-thanks > p{

    margin:0 0 1.5rem;

    font-size:1rem;

    line-height:2;

  }



/* ---------- 注意事項（丸数字） ---------- */

.c-thanks__notes{

    margin:0 0 1.75rem;

    padding:0;

    list-style:none;

    counter-reset:thanks-note;

  }



.c-thanks__notes li{

    position:relative;

    margin:0 0 0.875rem;

    padding-left:2.25rem;

    font-size:1rem;

    line-height:1.9;

    counter-increment:thanks-note;

  }



.c-thanks__notes li::before{

    content:counter(thanks-note);

    position:absolute;

    top:0.25rem;

    left:0;

    display:flex;

    align-items:center;

    justify-content:center;

    width:1.5rem;

    height:1.5rem;

    border-radius:50%;

    background:#B31F31;

    color:#fff;

    font-family:"Noto Sans JP",sans-serif;

    font-size:0.82rem;

    font-weight:700;

    line-height:1;

  }



/* ---------- お問合せ専用フリーコール ---------- */

.c-thanks__tel{

    margin:2rem 0;

    padding:1.75rem 1.75rem 1.5rem;

    background:var(--purple-050);

    border-radius:0.75rem;

    text-align:center;

  }



.c-thanks__tel-head{

    margin:0 0 1.25rem;

    padding-bottom:1rem;

    border-bottom:1px solid var(--purple-100);

    font-size:1.15rem;

    color:var(--purple-900);

  }



.c-thanks__tel .c-btn{

    max-width:26rem;

    margin:0 auto;

  }



.c-thanks__tel-notes{

    margin:1.25rem 0 0;

    padding:0;

    list-style:none;

    text-align:left;

  }



.c-thanks__tel-notes li{

    position:relative;

    padding-left:1.25rem;

    font-size:0.85rem;

    line-height:1.8;

    color:var(--ink-soft);

  }



.c-thanks__tel-notes li + li{margin-top:0.375rem;}



.c-thanks__tel-notes li::before{

    content:"※";

    position:absolute;

    left:0;

  }



@media(max-width:768px){

  .c-thanks > p{font-size:0.95rem; line-height:1.9;}

  .c-thanks__notes li{font-size:0.95rem; padding-left:2rem;}

  .c-thanks__tel{padding:1.25rem 1.125rem 1.25rem;}

  .c-thanks__tel .c-btn{max-width:none;}

}

/* ---------- 本文サイズをサイト共通の 1.25rem に統一（2026-08-24） ---------- */
.c-thanks > p{
    font-size:1.25rem;
  }

/* ======================================================================
   申込ページの文字サイズ調整（2026-08-24）
   本文はサイト共通の 1.25rem に、STEPは一回り大きく
   ====================================================================== */

/* ---------- STEP1〜3 ---------- */
.c-step__no{font-size:0.92rem;}

.c-step__no b{font-size:1.1rem;}

.c-step__label{font-size:1.02rem;}

.c-step__note{font-size:1.25rem;}

@media(max-width:768px){
  .c-step__no{font-size:0.86rem;}
  .c-step__no b{font-size:1rem;}
  .c-step__label{font-size:0.95rem;}
  .c-step__note{font-size:1.1rem;}
}

/* ---------- 入力フォームの本文 ---------- */
.c-form__label{font-size:1.25rem;}

.c-form__input,
.c-form__textarea,
.c-form__select{font-size:1.25rem;}

.c-form__unit{font-size:1.15rem;}

.c-form__sublabel{font-size:1.05rem;}

.c-form__notice-title,
.c-acc__head{font-size:1.25rem;}

.c-form__notice p,
.c-form__privacy p{font-size:1.25rem;}

.c-form__agree{font-size:1.25rem;}

.c-form__submit-btn .c-btn__title{font-size:1.35rem;}

/* ---------- 申込完了ページ ---------- */
.c-thanks__notes li{font-size:1.25rem;}

.c-thanks__tel-head{font-size:1.35rem;}

.c-thanks__tel-notes li{font-size:1.02rem;}

@media(max-width:768px){
  .c-thanks__notes li{font-size:1.25rem;}
  .c-acc__head{font-size:1.15rem;}
}

/* ---------- SP：申込ページの注意文とエラーメッセージを大きく ---------- */
@media(max-width:768px){
  /* 「個人情報の取扱いについて同意する」にチェックを入れてください。 */
  .c-form__submit-note{font-size:1.2rem;}

  /* 各種エラーメッセージ（全角カタカナで／ハイフンなしで など） */
  .c-form__error{font-size:1.1rem;}

  /* お申込み後、当事務所からご相談内容を確認するためのお電話を… */
  .c-step__note{font-size:1.3rem;}
}