@charset "Shift_JIS";
/* Shift_JISで保存してください*/
.icons{
    display: inline-flex;
    width: 20px;
    height: 20px;
    border-width: 0px;
    vertical-align: middle;
}
/* ラジオボタン要素を非表示にする */
.btn_sel_group input[type="radio"] {
    /* 標準のラジオボタンを完全に隠すための定番手法 */
    position: absolute; /* 要素を絶対位置指定にし */
    opacity: 0;         /* 透明度を0にし */
    width: 0;           /* 幅を0にし */
    height: 0;          /* 高さを0にする */
    pointer-events: none; /* マウスイベントを無効にする（古いブラウザ対策） */
}
.text_align_center{
    text-align: center;
}
.input_error_pair {
    display: flex;
    flex-direction: column; /* インプットとエラーを縦に並べる */
    align-items: flex-start; /* 左寄せにする */ 
    width: 100%; /* 親要素内で利用可能な幅を占有 */
}
.resize_xs {
    width: 24px;
}
.horizontal_center {
    margin: 0 auto;
}
.input_error_pair input[type="text"],
.input_error_pair .txt_inactive {
    /* 既存の .txt_inactive や .textmaxwidth が持っている幅指定を継承 */
    width: 100%; 
    box-sizing: border-box;
}
.year_errors,
.month_errors,
.day_errors,
.gender_errors,
.income_errors {
    margin-top: 4px;
}

.popup_overlay .popup .popup_header {
    padding: 16px;
    gap: 4px;
    justify-content: space-between
}
.popup_footer_back {
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color_border_quaternary, #E0E0E0);
    text-align: center;
}
.popup_footer_back button {
    margin: auto;
}

@media screen and (min-width: 1024px){
    /* フォーム入力エリアの共通幅 (586px) を計算 */
    :root {
        /* PC版の入力エリア幅 (726px - 100px - 40px) */
        --pc-input-area-width: 586px;
        /* 生年月日フィールド間の間隔 */
        --pc-input-gap: 24px;
        
        /* 基本単位の幅: (586px - 48px) を 5分割する */
        --pc-base-unit-5x: calc((var(--pc-input-area-width) - 48px) / 5); 
        
        /* 【修正】年（large）: 3/5 相当 */
        --pc-birthday-large-width: calc(var(--pc-base-unit-5x) * 2.16);
        
        /* 【修正】月、日（small）: 1/5 相当 */
        --pc-birthday-small-width: calc(var(--pc-base-unit-5x) * 1);
    }
 
    .color_bg_image_info{
        display: flex;
    }
    .frame_outer{
        display: flex;
        width: 976px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:64px;
        border-radius: 40px;
        background: var(--Background-Primary, #FFF);
        /* Shadow/control M */
        box-shadow: 0px 2px 10px 0px #E6EDF2;
    }
    .frame_inner{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        padding: 40px;
        padding-top: 72px;
        padding-bottom: 64px;
        padding-left: 40px;
        padding-right: 40px;
        align-items: center;
    }
    .wide_banner_outer{
        display: flex;
        padding: var(--Padding-56, 56px) 0px var(--Padding-24, 24px) 0px;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding-bottom: 125px;
        margin-left: auto;
        margin-right: auto;
    }
    .wide_banner_inner{
        display: flex;
        padding: 48px 0px 0px 0px;
        flex-direction: column;
        align-items: center;
        align-self: center;
        gap: 0px;
        align-self: stretch;
        min-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }
    #frm_zmp {
        width: 100%;
    }
    .descriptive_speech_bubble_primary{
        position: relative;
        display: flex;
        width: 320px;
        padding: var(--Padding-24, 24px) 24px;
        justify-content: center;
        align-items: center;
        gap: var(--Padding-8, 8px);
        border-radius: var(--Corner-radius-radius_XXXL, 48px);
        background: var(--Control-textBubble_Background-Primary, #FFF);
    }
    .descriptive_speech_bubble{
        display: flex;
        padding: var(--Padding-24, 24px);
        justify-content: center;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        gap: -10px;
    }
    .margin_after_speech_bubble{
        margin-top: -4px;
        margin-bottom: 24px;
    }
    .estimate_button{
        margin-bottom: 72px;
    }
    .birthday_input_container {
        display: flex;
        align-items: center;
        gap: 16px;
        align-self: stretch;
    }
    
    .year_input_container{
        display: flex;
        height: 24px;
        width: 255px;
        padding: 16px 12px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        border-radius: var(--Corner-radius-radius_ML, 12px);
        border: var(--Stroke-weight-Regular, 1px) solid var(--TextField-Inactive-Border, #E0E0E0);
        background: var(--TextField-Inactive-Background, #FFF);
    }
    
    .month_day_input_container{
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        justify-content: center;
        gap: 24px;
    }
    
    .month_input_container{
        display: flex;
        height: 24px;
        width: 128px;
        padding: 16px 12px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        border-radius: var(--Corner-radius-radius_ML, 12px);
        border: var(--Stroke-weight-Regular, 1px) solid var(--TextField-Inactive-Border, #E0E0E0);
        background: var(--TextField-Inactive-Background, #FFF);
    }
    
    .day_input_container{
        display: flex;
        height: 24px;
        width: 128px;
        padding: 16px 12px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        border-radius: var(--Corner-radius-radius_ML, 12px);
        border: var(--Stroke-weight-Regular, 1px) solid var(--TextField-Inactive-Border, #E0E0E0);
        background: var(--TextField-Inactive-Background, #FFF);
    }
    
    .year_input_container input{
        width: 100%; /* 親 (.year_input_container) の幅いっぱい */
        box-sizing: border-box;
    }

    .month_day_input_container{
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
        gap: var(--Padding-16, 16px);
    }
    .month_day_input_container{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        /* [修正] 月と日のテキストボックス間の間隔を 24px に設定 */
        gap: var(--pc-input-gap); 
        width: calc(var(--pc-birthday-small-width) * 2 + var(--pc-input-gap));
    }
    .textmaxwidth {
        width: var(--pc-input-area-width); /* 586px */
        /* max-width: var(--pc-input-area-width); */
        box-sizing: border-box;
    }
    .yeartextlength {
        /* width: var(--pc-birthday-large-width) !important; calc((586px - 48px) / 2) = 269px 相当 */
        /* max-width: var(--pc-birthday-large-width) !important; */
    }
    .monthday_textlength{
        /* width: var(--pc-birthday-small-width) !important; calc((586px - 48px) / 4) = 134.5px 相当 */
        /* max-width: var(--pc-birthday-small-width) !important; */
    }
    .decade-group + .decade-group {
        margin-top: 40px;
    }
    .decade_header_padding{
        margin-bottom: 16px;
    }
    .form1 {
        width: 100%; 
        gap: 24px;
        display: flex;
        height: auto;
        flex-direction: row;
        align-items: flex-start;
    }

    .form1 .main_text{
        display: flex; /* Flexboxを有効にして横並びにする */
        align-items: center; /* 垂直方向の中央揃え */
        gap: 12px; /* アイコンとテキストの間に適切な隙間を設ける（任意）*/
        align-self: center;
        flex-shrink: 0;
        width: 110px !important;
        height: auto !important;
    }
    .form1 .birthday_input_container{
        align-self: center;
    }
    .form1 .form1_container{
        align-self: center;
    }
    .form1_container{
        display: flex;
        height: 24px;
        padding: 16px 12px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Corner-radius-radius_ML, 12px);
        border: var(--Stroke-weight-Regular, 1px) solid var(--TextField-Inactive-Border, #E0E0E0);
        background: var(--TextField-Inactive-Background, #FFF);
    }
    .form2 {
        display: flex;
        justify-content: center;
    }
    .form1 .birthday_input_container {
        /* [修正] 生年月日全体で 586px の幅を確保 */
        /* width: var(--pc-input-area-width); */
        width: 100%;
        /* [追加] 年、月、日の間の間隔を 24px に設定 */
        gap: var(--pc-input-gap); /* 24px */
        align-self: center;
    }
    .birthday_input_container .input_error_pair {
        width: 56%;
    }
    .birthday_input_container .month_day_input_container {
        width: 44%;
    }
    .form1 .form1_container{
        align-self: center;
    }
    .form1_container{
        display: flex;
        height: 24px;
        padding: 16px 12px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        flex: 1 0 0;
        align-self: stretch;
        border-radius: var(--Corner-radius-radius_ML, 12px);
        border: var(--Stroke-weight-Regular, 1px) solid var(--TextField-Inactive-Border, #E0E0E0);
        background: var(--TextField-Inactive-Background, #FFF);
    }
    .form2 {
        display: flex;
        justify-content: center;
    }
    .form1 .input-and-description-container {
        width: var(--pc-input-area-width); /* 586px */
        display: flex; /* Flexboxを有効にする */
        flex-direction: column; /* 要素を縦（上から下）に並べる */
        gap: 12px; /* 要素間のスペースを設定（任意） */
        flex-grow: 1; /* .form1内で利用可能な残りの幅をすべて使用する */
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .yearchoice-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        justify-content: center;
    }
    .yearchoice-container > .btn_sel_txt_half {
        width: 100%;
    }
    .monthchoice-container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        row-gap: 16px;
        justify-content: center;
    }
    .monthchoice-container input[type="radio"] + label {
        margin-left: auto;
        margin-right: auto;
    }
    .daychoice-container {
        display: grid;
        
        grid-template-columns: repeat(5, auto); 
        
        gap: 16px;
        row-gap: min(43px, calc( (100vh / 1143px) * 3.762vh ));
        justify-content: center;
        justify-items: center;
        
    }
    .daychoice-container:has(#day31.displayoff) {
        row-gap: min(63px, calc( (100vh / 1143px) * 5.511vh ));
    }
    .daychoice-container input[type="radio"] + label {
        display: block; /* Flexアイテム/Gridアイテムとして幅を使うためにブロック化 */
        text-align: center; /* テキストを水平中央寄せに */        
/*        margin-left: auto;
        margin-right: auto;
*/
    }
    .genderchoice-container {
        display: flex;
        justify-content: center; 
        gap: 24px;
    }
    .incomechoice-container {
        display: grid;
        /* 3列を均等に割り振る (1fr 1fr 1fr) */
        grid-template-columns: repeat(3, 1fr); 
        
        /* ボタン間の間隔を設定（例: 5px） */
        gap: 24px; 
        
        width: 100%; /* 親要素の幅いっぱいを使う */
        
    }
    .incomechoice-container input[type="radio"] + label {
        margin-left: auto;
        margin-right: auto;
    }
    .incomechoice-container .btn_sel_txt_half {
        /* ラベル要素の表示を Flex または Block に設定 */
        /* これにより、Gridアイテム（セル）内で幅いっぱいに広がることが可能になります */
        display: flex; 
        
        width: 100%; 
        
        box-sizing: border-box; 
        
        text-align: center; /* テキストの水平中央寄せ */
        align-items: center; /* 垂直方向の中央揃え */
        justify-content: center; /* テキストの水平方向のFlex中央揃えを念のため追加 */
        
        /* 3. ボタンの適切な高さを確保 */
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .txt_body_5{
        /* Body/Body5_Bold */
        font-family: var(--Font-Family-Default, "Noto Sans JP");
        font-size: var(--FontSize-MS, 14px);
        font-style: normal;
        font-weight: 700;
        line-height: 130%; /* 18.2px */
    }
    .txt_body_6{
        /* Body/Body6_Regular */
        font-family: var(--Font-Family-Default, "Noto Sans JP");
        font-size: var(--FontSize-S, 14px);
        font-style: normal;
        font-weight: 400;
        line-height: 130%; /* 18.2px */
    }
    .popup_scroll_container:has(.daychoice-container) {
        height: 736px;
    }
    .popup_overlay .popup .popup_header {
        padding: 24px;
        gap: 8px;
    }
    .popup_footer_back {
        margin-top: 24px;
        padding-top: 24px;
    }
}
/* スマホ版の設定 */
@media screen and (max-width: 1023px){
    :root {
        --sp-input-gap: 16px;
    }
    body {
        min-width: 360px !important;
    }
    .container_main{
        /* Flexアイテムとしての縮小を禁止（70%に縮むのを防ぐ） */
        flex-shrink: 0 !important; 

        /* 幅を100%に強制設定 */
        width: 100% !important; 

        /* 横幅がはみ出さないように box-sizing を確認 */
        box-sizing: border-box !important;
    }
    .frame_outer{
        display: flex;
        width: 100%; 
        /* max-contentは子要素の幅に合わせるが、画面幅を超えないようにする */
        max-width: 832px;
    }
    .frame_outer form {
        /* form 要素の幅を 100% に設定し、子要素 (.frame_inner) が広がるのを可能にする */
        width: 100%;
        
        /* 他の固定幅やマージンをリセット */
        max-width: 100%;
        margin: 0;
    }
    .frame_inner{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        /* 左右 16px のマージンを設定し、可変幅を確保（最も重要） */
        margin: 0 16px;
        
        /* 可変幅にするため width: auto、最大幅は 800px */
        width: auto; 
        max-width: 800px;
        
        /* 以前の固定値を無効化し、親の幅いっぱいに広がらないようにする */
        align-self: auto; 
        
        /* デザイン関連のプロパティを統合・維持 */
        padding: 8px 16px 24px;
        border-radius: var(--Corner-radius-radius_XL, 24px);
        background: var(--Background-Primary, #FFF);
        box-shadow: 0px 2px 10px 0px #E6EDF2;
        box-sizing: border-box; 
        
    }
    .color_bg_image_info{
        width: 100%;
    }
    .wide_banner_outer{
        display: flex;
        padding: var(--Padding-32, 32px) 0px 0px 0px;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .wide_banner_inner{
        display: flex;
        padding: 48px 0px 0px 0px;
        flex-direction: column;
        align-items: center;
        gap: 0px;
        align-self: stretch;
        margin: 0 16px;
    }
    .descriptive_speech_bubble_primary{
        position: relative;
        display: flex;
        width: 100%;
        max-width: 357px;
        padding: var(--Padding-16, 16px);
        justify-content: center;
        align-items: center;
        gap: var(--Padding-8, 8px);
        border-radius: var(--Corner-radius-radius_XL, 24px);
        background: var(--Control-textBubble_Background-Primary, #FFF);
        box-sizing: border-box;
    }
    .descriptive_speech_bubble{
        display: flex;
        padding: var(--Padding-16, 16px);
        justify-content: center;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        gap: -10px;
    }
    .margin_after_speech_bubble{
        margin-top: -4px;
        margin-bottom: 12px;
    }
    .year_input_container{
        display: flex;
        padding: 16px 12px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        min-height: 80px;
        border-radius: var(--Corner-radius-radius_ML, 12px);
        border: var(--Stroke-weight-Regular, 1px) solid var(--TextField-Inactive-Border, #E0E0E0);
    }
    
    .month_day_input_container {
        display: flex;
        align-items: center;
        gap: var(--Padding-24, 24px);
        width: 100%; 
    }    
    .month_input_container{
        display: flex;
        width: 100%;
        flex-grow: 1;
        padding: 16px 12px;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        border-radius: var(--Corner-radius-radius_ML, 12px);
        border: var(--Stroke-weight-Regular, 1px) solid var(--TextField-Inactive-Border, #E0E0E0);
        box-sizing: border-box;
    }
    
    .day_input_container{
        display: flex;
        width: 100%;
        flex-grow: 1;
        padding: 16px 12px;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;
        border-radius: var(--Corner-radius-radius_ML, 12px);
        border: var(--Stroke-weight-Regular, 1px) solid var(--TextField-Inactive-Border, #E0E0E0);
        box-sizing: border-box; /* 追加 */
    }
    .year_input_container input{
        width: 100%;
        box-sizing: border-box;
    }
    .month_day_input_container {
        display: flex;
        align-items: center;
        gap: var(--sp-input-gap, 16px); 
        width: 100%; 
        box-sizing: border-box;
    }
    .month_day_input_container input{
        width: 100%;
    }
    .yeartextlength,
    .textmaxwidth {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .month_day_input_container .monthday_textlength{
        width: 100%; 
        flex-grow: 1; 
    }

    .decade_header_padding{
        margin-bottom: 12px;
    }
    .decade-group + .decade-group {
        margin-top: 24px;
    }

    .form1 {
        display: flex;
        padding-top: 16px;
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
        gap: 6px;
    }
    .form1 .main_text{
        display: flex; /* Flexboxを有効にして横並びにする */
        align-items: center; /* 垂直方向の中央揃え */
        gap: 4px; /* アイコンとテキストの間に適切な隙間を設ける（任意）*/
        width: 100px; /* 幅の制限をなくすか、適切な幅を設定 */
        height: auto !important;
    }

    .form1_container{
        display: flex;
        width: 100%;
        padding: 12px 12px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 8px;
        border-radius: var(--Corner-radius-radius_ML, 12px);
        border: var(--Stroke-weight-Regular, 1px) solid var(--TextField-Inactive-Border, #E0E0E0);
        box-sizing: border-box;
    }
    .form2 {
        display: flex;
        justify-content: center;
        margin-top: 32px;
    }
    .form1 .input-and-description-container {
        width: 100%;
        max-width: 100%;
        display: flex; /* Flexboxを有効にする */
        flex-direction: column; /* 要素を縦（上から下）に並べる */
        gap: 8px; /* 要素間のスペースを設定（任意） */
        flex-grow: 1; /* .form1内で利用可能な残りの幅をすべて使用する */
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .birthday_input_container {
        display: flex;
        padding: 0px 0px ;
        flex-direction: column; /* 縦並び */
        justify-content: center;
        align-items: flex-start;
        gap: var(--sp-input-gap, 16px); /* 年と月日コンテナの間隔: 16px */
        align-self: stretch;
        width: 100%;
    }
    .month_day_input_container .monthday_textlength{
        width: 100%; 
        flex-grow: 1; 
    }
    .yearchoice-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        justify-content: center;
    }
    .yearchoice-container > .btn_sel_txt_half {
        width: 100%;
    }
    .monthchoice-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        justify-content: center;
    }
    .monthchoice-container input[type="radio"] + label {
        margin-left: auto;
        margin-right: auto;
    }
    .daychoice-container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
        row-gap: 13px;
        justify-content: center;
        justify-items: center;
    }
    .daychoice-container:has(#day31.displayoff) {
        row-gap: 25px;
    }
    .genderchoice-container {
        display: flex;
        justify-content: center; 
        gap: 20px;
    }
    .incomechoice-container {
        /* 1. Flexboxを使用して縦積みを強制 */
        display: flex;
        flex-direction: column; 
        /* 2. ボタン間の縦方向の間隔を設定 */
        gap: 20px; 
        /* 3. 幅いっぱいを確保 */
        width: 100%;
        /* 縦積みにするため、中央寄せは不要 */
        align-items: stretch; /* 子要素が幅いっぱいに広がるように設定 */
    }
    .incomechoice-container .btn_sel_txt_half {
        width: 100% !important;  
        /* common.css の flex-shrink: 0 を無効化する必要がある場合も一緒に上書き */
        flex-shrink: 1 !important; 
    }
    .txt_body_5{
        /* Body/Body5_Bold */
        display: flex;
        font-family: var(--Font-Family-Default, "Noto Sans JP");
        font-size: var(--FontSize-MS, 14px);
        font-style: normal;
        font-weight:700;
        gap: 4px;
        line-height: 130%; /* 18.2px */
        align-items: center;
    }
    .txt_body_6{
        /* Body/Body6_Regular */
        font-size: var(--FontSize-S, 12px);
        font-style: normal;
        font-weight: 400;
        line-height: 130%; /* 18.2px */
    }

    .popup_scroll_container {
        overflow-y: auto !important; /* スクロールを強制 */
    }
    .popup_scroll_container:has(.daychoice-container) {
        height: 464px;
    }

    /* 2. タイトル（span）のスタイル */
    .popup_header span {
        /* Flexboxで左右に離れるため、flex-grow: 0, flex-shrink: 0 を維持し、
        max-widthでボタンとの衝突を回避 */
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        
        max-width: calc(100% - 60px) !important; 
        overflow: hidden !important; 
        text-overflow: ellipsis !important;
        
        white-space: nowrap !important; 
        text-align: left !important;
    }

    /* 3. 閉じるボタン（.popup_close）のサイズとマージンを強制リセット */
    .popup_close {
        /* サイズを固定し、Flexboxの計算を安定させる (common.cssより) */
        width: 24px !important; 
        height: 24px !important; 
        
        /* Flexアイテムとして動作させるため、余計なマージンや位置指定を全てリセット */
        margin: 0 !important;
        position: static !important; /* 絶対位置指定を無効化 */
        transform: none !important; /* 垂直中央寄せの transform を無効化 */
        
        flex-shrink: 0 !important; 
    }
    .form2{
        max-width: 100%;
        padding: 0 16px;
    }
    .estimate_button{
        width: 100%;
    }
}