@charset "Shift_JIS";
/* Shift_JISで保存してください*/

form{
    width: 100%;
}

.holizontal_center{
    margin: 0 auto; /* 中央揃えにする場合 */
}
.btn_lg_primary{
    margin-left: auto;  /* 左側のマージンを自動で設定 */
    margin-right: auto; /* 右側のマージンを自動で設定 */
}
.input_error_pair {
    display: flex;
    flex-direction: column; /* インプットとエラーを縦に並べる */
    align-items: flex-start; /* 左寄せにする */
    width: 100%; /* 親要素内で利用可能な幅を占有 */
}

.input_error_pair input[type="text"],
.input_error_pair select, 
.input_error_pair .txt_inactive {
    /* 既存の .txt_inactive や .textmaxwidth が持っている幅指定を継承 */
    width: 100%; 
    box-sizing: border-box;
}

.tag_white,
.tag_yellow {
    margin-left: 8px;
    margin-top: 0;
}
.frame_category_sm{
    max-width: 976px;
    display: flex;
    margin-bottom: 56px;
    padding-bottom: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-bottom: 1px solid #E0E0E0;
}
/****************************/
.frame_category_ttl{
    max-width: 976px;
    display: flex;
    padding-bottom: 16px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}
/****************************/
.frame_inner_outline{
    display: flex;
    padding-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
}
.frame_inner_outline > .frame_category_sm:first-child {
    margin-top: 0;
}
/* 最初のセクションにある border-bottom を削除 */
.frame_inner_outline > .frame_category_sm:first-child {
    border-bottom: none;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* 最後のセクションにある border-bottom を削除 */
.frame_inner_outline > .frame_category_sm:last-child {
    border-bottom: none;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
.frame_category_lg{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
    margin-bottom: 0;
    align-self: stretch;
}

.txt_title_2_bold{
    padding-bottom: 0; 
    margin-bottom: 0; /* マージンの影響をリセット */
}

.form1 {
    /* 横に2つ並ぶので、全体として4つのカラムを持つGridとして再定義 */
    display: grid;
    grid-template-columns: 220px 230px 220px 230px;
    column-gap: 24px; 
    row-gap: 24px;
    margin-bottom: 0;
    width: 976px;
    height: auto;
}
.name_field_group {
    /* name_field_group自体はdisplay: contentsとして扱い、
        子要素（ラベルと入力）が直接form1のGridに参加するようにする */
    display: contents; 
}

/* form1 の子要素（ラベルと入力欄）に対するスタイル */
.form1 .txt_body_5,
.form1 input[type="text"] {
    align-self: center; 
}

.form2 {
    /* form1と同様に、親要素を横に2分割するGridとして設定 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2つのグループを横並びにする */
    gap: 16px; /* グループ間の隙間 */
    height: auto;
    /* form2 が親の利用可能な幅を占有するように flex-grow を追加 */
    flex-grow: 1;
    width: 100%; 
    box-sizing: border-box;
    
    /* form2 自体に Grid が設定されている場合は、
        その子要素（form2_group）が幅を占有するように調整 */
    display: grid; /* 既存の設定を維持 */
    grid-template-columns: 1fr; /* form2_group が縦に並ぶ場合 */
}

.form2_group {
    display: grid;
    /* ラベルと入力の比率を維持 */
    grid-template-columns: 220px 1fr; 
    align-items: center; 
    gap: 24px; 

    /* form2 の中で、form2_group が横幅いっぱいになるようにする */
    width: 100%; 
    box-sizing: border-box;
}

.form2_group > .input_error_pair,
.form2_group .search_container,
.form2_group .telno_container,
.form2_group .input_and_description_container,
.form2_group .birthdate_container {
    /* これらの要素は全て Grid の第2列目（1frの幅を持つ領域）に配置 */
    grid-column: 2 / 3; 
    
    /* Grid セルが確保した幅を 100% 使用する */
    width: 100%; 
    
    /* 幅の競合を防ぐため border/padding を幅に含める */
    box-sizing: border-box; 
}

/* telno_container は Flex で 3つの input_error_pair を横に並べている */

.telno_container {
    display: flex; /* 既存の Flexbox を維持 */
    gap: 7px; /* ハイフンのマージンを調整 */
    align-items: center;
}
.telno_container .input_error_pair {
    /* telno_container の中で均等に幅を割り当てる */
    flex-grow: 1; 
    width: auto; /* width: 100% の親からの継承を無効化 */
}

.birthdate_container {
    display: flex; /* 既存の Flexbox を維持 */
    gap: 7px; /* 文字のマージンを調整 */
    align-items: center;
}
.birthdate_container .input_error_pair {
    /* birthdate_container の中で均等に幅を割り当てる */
    flex-grow: 1; 
    width: auto; /* width: 100% の親からの継承を無効化 */
}


.search_container {
    /* 追加: 入力欄とボタンを横並びにする */
    display: flex;
    /* ボタンとの間に少し隙間を作る */
    gap: 24px; 
    align-items: center;
}
.input_and_description_container input {
    margin-bottom: 12px;
}
.input_width_long{
    width: 725px;
}
.sel_width_long{
    width: 725px;
}
.input_width_tel{
    width: 226px;
}
.input_width_postcode{
    width: 610px;
}
.select_width_birthdate_year{
    width: 275px;
}
.select_width_birthdate_month, .select_width_birthdate_day{
    width: 189px;
}
.txt_body_5 {
    font-size: var(--font-size-MS, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 18.2px */      
    display: block;
}

/* <label> の子要素（テキストとマーク）の折り返しと行間を制御する */
.txt_body_5 > label {
    display: flex;       /* Flexコンテナにする */
    flex-wrap: wrap;     /* 折り返しを許可 */
    row-gap: 8px;        /* 折り返した際の行間を 8px に設定 */
    align-items: flex-start;
    /* ラベル内のテキストノードと span を Flex アイテムとして扱う */
    width: 100%; /* 親要素の幅を使う */
    box-sizing: border-box;
    align-items: baseline;
}
.txt_body_6{
    /* Body/Body6_Regular */
    font-size: var(--font-size-S, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 18.2px */
}
/****************************************/

/* その他の調整 (例) */
.padding_top_link_txt{
    padding-top: 16px;
}
.description{
    padding-bottom: 16px;
    border-bottom: 1px solid #E0E0E0; /* 境界線 */
}
.description:first-child{
    padding-top: 0;
}
div.telno_hyphen {
    min-width: 10px;
    height: 0px;
    border: 1px solid #E0E0E0;
}

.inner_item_center {
    display: flex;
    justify-content: center;
}

.width_max {
    width: 100%;
}

.last_btn_wrapper {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color_border_primary, #EEE);
    box-sizing: border-box;
}

.padding_scroll_container{
    padding-top: 16px;
    padding-bottom: 24px;
}

.scroll_container {
    display: flex;
    width: 976px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--Corner-radius-radius_XL, 24px);
    border: var(--Stroke-weight-Regular, 1px) solid var(--Border-Secondary, #BDBDBD);
    background: var(--Background-Primary, #FFF);
    overflow: hidden;
}

.scroll_container_title_bar {
    /* 高さを固定し、コンテンツがあっても縮まないようにする */
    height: 71px; /* 例 */
    width: 928px;
    flex-shrink: 0; 
    /* レイアウト調整 */
    padding: 0 24px;
    display: flex;
    align-items: center; 
    border-bottom: 1px solid #E0E0E0; /* 境界線 */
}

/* スクロールするコンテンツ部分のスタイル */
.scroll_container_content {
    display: flex; 
    padding: 24px 0; 
    flex-direction: column; 
    align-items: flex-start; 
    box-sizing: border-box;
    height: 70%;
}
.scroll_container_inner {
  font-size: var(--font-size-MS2, 14px);
  align-items: center; 
  padding: 0 19px 0 24px; 
  align-self: stretch; 
  overflow-y: hidden; 
  overflow-x: hidden;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

.txt_deco_none {
    text-decoration: none;
}

/* スマホ版の設定 */
@media screen and (max-width: 1023px){
    .tag_white,
    .tag_yellow {
        vertical-align: baseline;
        margin-left: 4px;
        position: relative;
        top: -1px; /* 1px 単位で調整し、見た目のズレを補正 */
        /* 念のため、余計な垂直マージンをリセット */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .frame_inner_outline{
        display: flex;
        padding-top: 0;
        padding-bottom: 0;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
    }
    .frame_category_lg{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 0;
        margin-bottom: 0;
        align-self: stretch;
    }
    .frame_category_sm{
        display: flex;
        margin-top: 0;
        margin-bottom: 16px;
        padding-bottom: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
        border-bottom: 1px solid #E0E0E0;
    }
    .frame_category_sm:first-child {
        border-bottom: none;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .frame_category_sm:last-child {
        border-bottom: none;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    .txt_body_5 > label {
        display: flex;
        flex-wrap: wrap; 
        row-gap: 4px;
        
        align-items: baseline; 
        
        width: 100%;
        box-sizing: border-box;
    }
    /* --- SP版レイアウト修正: 姓と名を横並び、ラベルを上にする --- */
    .form1 {
        display: flex;
        margin-top: 0;
        flex-direction: row; /* 姓・名のグループを横に並べる */
        gap: 16px; /* グループ間の間隔 */
        width: 100%;
        max-width:800px !important; 
        align-items: flex-start;
    }
    
    .name_field_group {
        display: flex;
        flex-direction: column; /* ラベルと入力を縦に並べる（ラベルが上） */
        width: calc(50% - 8px); /* 50%からグループ間の半分のギャップを引く */
        flex-grow: 1; 
        gap: 6px; /* ラベルと入力間の間隔 */
    }
    .name_field_group > div {
        width: 100%;
    }
    /* 入力フィールドがグループ内で幅全体を使うように設定 */
    .name_field_group input[type="text"] {
        width: 100%;
        box-sizing: border-box; /* padding/borderを含めた幅にする */
    }
    .form2 {
        display: flex; /* Flexboxに変更 */
        flex-direction: column; /* 縦積みにする */
        width: 100%;
        max-width:800px !important; 
        height: auto;
        margin-bottom: 0; /* マージンを調整 */
    }

    .form2_group {
        display: flex;
        flex-direction: column; /* 縦積みに変更 */
        align-items: flex-start; /* 左寄せにする */
        gap: 6px; /* ラベルと入力欄の間の隙間を調整 */
        width: 100%;
    }
    /* 1. ラベルの親要素（.txt_body_5）が親の幅全体を使うことを保証 */
    .form2_group .txt_body_5 {
        width: 100%;
        /* 既存のスタイルで display: block; が適用されているか確認 */
        display: block; 
    }

    /* 2. ラベル要素自体（<label>）が親の幅全体を使うことを強制 */
    .form2_group .txt_body_5 label {
        /* ラベルをブロックレベル化し、幅を100%に設定 */
        display: flex; 
        width: 100%;
        box-sizing: border-box; 
        
        /* テキストの折り返しが不要な場合は white-space: nowrap; を削除/上書き */
        white-space: normal;
        row-gap:4px;
    }
    
    /* 3. （安全策）フォームグループ内の全要素が幅全体を使うことを保証 */
    .form2_group > * {
        width: 100%;
        box-sizing: border-box;
    }
    .search_container {
        display: flex;
        flex-direction: row; /* 横並びに戻す */
        align-items: center; /* 垂直方向中央揃え */
        gap: 8px; /* 隙間を調整 */
        width: 100%;
        /* 注: form2_groupが幅357px相当で動作することを前提とする */
    }
    
    .search_container .input_width_postcode {
        /* 入力欄に残りの利用可能スペースを割り当てる */
        flex-grow: 1; 
        
        /* 最小限の幅で縮小されないようにする */
        flex-shrink: 1; 
        
        /* 既存の幅指定があれば、Flexboxに幅計算を委ねるためにリセット */
        width: auto !important; 
        min-width: 0; 
        box-sizing: border-box;
    }

    .search_container button.btn_sm_secondary {
        /* ボタンに残りの幅を割り当てる */
        flex-grow: 1; 
        width: auto;
        box-sizing: border-box;
    }

    .telno_container{
        display: flex;
        /* gapを減らし、-記号分の幅を確保。*/
        gap: 4px; 
        align-items: center;
        width: 100%;
        box-sizing: border-box; /* パディングを含めて幅を計算 */
        margin-left: 0; 
        margin-right: 0;
    }
    .telno_container input {
        /* 入力欄の幅を均等に割り当て */
        width: 100% !important; 
        flex-grow: 1;
        box-sizing: border-box;
    }
    /* telno_container内のハイフン('-')のテキストノードに対するスペース調整 */
    .telno_container > * {
        line-height: 1; /* 行の高さを調整してハイフンの高さを詰める */
    }

    .birthdate_container{
        display: flex;
        /* gapを減らし、文字分の幅を確保。*/
        gap: 5px; 
        align-items: center;
        width: 100%;
        box-sizing: border-box; /* パディングを含めて幅を計算 */
        margin-left: 0; 
        margin-right: 0;
    }

    /* birthdate_container内の文字のテキストノードに対するスペース調整 */
    .birthdate_container > * {
        line-height: 1; /* 行の高さを調整して文字の高さを詰める */
    }

    .select_width_birthdate_year{
        flex: 2;
        font-size: var(--font-size-S, 12px);
    }

    .select_width_birthdate_month, .select_width_birthdate_day{
        flex: 1;
        font-size: var(--font-size-S, 12px);
    }

    .input_width_tel{
        width: calc((100% - 32px) / 3);
        max-width: calc((800px - 32px) / 3);
        box-sizing: border-box;
    }

    .input_width_long,
    .sel_width_long {
        width: 100%;
        max-width: 800px !important; /* 画面幅いっぱいに広げる */
        box-sizing: border-box;
    }
    .input_width_postcode{
        width: 150px;
    }
    .input_and_description_container input {
        margin-bottom: 8px;
    }

    .txt_body_5{
        /* Body/Body5_Bold */
        font-size: var(--font-size-MS, 14px);
        font-style: normal;
        font-weight:700;
        line-height: 130%; /* 18.2px */
    }
    .txt_body_6{
        /* Body/Body6_Regular */
        font-size: var(--font-size-S, 12px);
        font-style: normal;
        font-weight: 400;
        line-height: 130%; /* 18.2px */
    }

    .scroll_container {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        flex-direction: column;
        align-items: flex-start;
        border-radius: var(--Corner-radius-radius_M, 8px);
        border: 1px solid var(--Border-Secondary, #BDBDBD);
        background: var(--Background-Primary, #FFF);
        /* overflow: hidden を削除 */
    }

    /* scroll_container_contentに縦スクロールを明示的に指定 */
    .scroll_container_content {
        flex-grow: 1;
        overflow-y: auto;
        padding: 16px; 
        overflow-x: hidden; 
        width: 100%; 
        box-sizing: border-box;
    }

    .scroll_container_title_bar {
        /* 高さを固定し、コンテンツがあっても縮まないようにする */
        height: 48px; /* 例 */
        width: 100%;
        max-width: 100%;
        flex-shrink: 0; 
        /* レイアウト調整 */
        padding: 16px;
        display: flex;
        align-items: center; 
        border-bottom: 1px solid #E0E0E0; /* 境界線 */
        box-sizing: border-box;
    }

    .padding_scroll_container{
        padding-top: 8px;
        padding-bottom: 24px;
    }

    /* スクロールするコンテンツ部分のスタイル */
    .scroll_container_content {
        display: flex; 
        padding: 16px 0; 
        flex-direction: column; 
        align-items: flex-start; 
        box-sizing: border-box;
        height: 70%;
    }
    .scroll_container_inner {
        font-size: var(--font-size-MS2, 14px);
        padding: 0 16px; 
    }

    .last_btn_wrapper {
        width: 100%;
        margin-top: 24px;
        padding-top: 16px;
    }

    .last_btn_wrapper .btn_lg_primary {
        margin: 0 auto;
        width: 100%;
    }

}

/**
 * ErrorDialog ブロック
 *
 */
.chk_bubble_unchecked {
    width: 95%;
    margin-bottom: 10px;
}

.ErrorDialog__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 2;
}

.ErrorDialog__list li {
  margin-bottom: 3px;
  position: relative;
  padding-left: 1.6em;
}