:root {
  --maincolor: #854E4B;
  --subcolor01: #F6DED4;
  --subcolor02: #FEF7F5;
  --color_red: #E60127;
  --color_green: #37A34A;
  --color_blue: #005AAB;
  --color_lightgreen: #539B86;
  --color_darkgray: #7E837F;
  --color_lightgray: #F0F0F0;
  --color_purple: #9b72b0;
  --color_white: #fff;
}

/* ===== STEP1 サイズバリデーション用CSS ===== */

/* エラーメッセージ共通スタイル */
.text-error {
    display: none;
    color: #cc0000 !important;
    font-weight: bold;
}

/* 注釈テキスト（エラー時は赤色） */
.chushaku_text {
    font-size: 90%;
    color: #666;
}

.chushaku_text.text-error {
    color: #cc0000 !important;
}

/* エラーメッセージコンテナ */
.size-error-container {
    margin-top: 10px;
    padding: 8px 10px;
    background-color: #fff5f5;
    border: 1px solid #ffcccc;
    border-radius: 4px;
}

/* 個別のエラーメッセージ（間隔を狭く） */
.size-error-item {
    color: #cc0000 !important;
    font-size: 13px;
    font-weight: bold;
    margin: 2px 0;
    padding: 0;
    line-height: 1.4;
}

.size-error-item:before {
    content: "※ ";
}

/* 深さエラーメッセージ */
#depth_error {
    color: #cc0000 !important;
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
    display: block;
}

/* アップロードエラーメッセージ */
#upload_error {
    color: #cc0000 !important;
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
}

/* ライナーエラーメッセージ */
#liner_error {
    color: #cc0000 !important;
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
}

/* ルーム画像アップロードエラー */
#room_upload_error {
    color: #cc0000 !important;
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
}

/* プレビューCanvas */
#preview_canvas {
    max-width: 100%;
    max-height: 70vh;
    display: block;
    margin: 0 auto;
    background-color: #ffffff;
}



#simulator_wrap{
display:flex;
flex-flow:wrap;
    padding: 0;
    margin: 0;
    width: 100vw;
height:100vh;
}

/*
#price_wrap{
display:flex;
flex-flow:wrap;
    padding: 0;
    margin: 0;
    width: 100vw;
height:10vh;
    background: var(--maincolor);
    color: #fff;
    padding: 2vh 2vw;
border-top:5px solid #fff;
}
#price_wrap .price_dl{
display:flex;
flex-flow:wrap;
}
*/

#simulator_wrap #menu_block01{
    width: 15vw;
    border-right: 5px solid #fff;
    background: var(--maincolor);
    display: flex;
    flex-flow: column;
}

#simulator_wrap #menu_block02{
    background: var(--subcolor01);
    width: 10vw;
    border-right: 1px solid var(--subcolor01);
}

#simulator_wrap #menu_block03{
background:var(--subcolor02);
width:25vw;
border-right:1px solid var(--subcolor01);
}

#simulator_wrap #menu_block04{
background:#FFFFFF;
width:48vw;
}





#simulator_wrap #menu_block01 .brown_bg{
background:var(--maincolor);
color:#fff;
    padding: 1vh 1vw;
    order: 2;
}
#simulator_wrap #menu_block01 .white_bg{
background:#fff;
    padding: 1vh 1vw;
    order: 1;
}


#simulator_wrap #menu_block01 .brown_bg .frame_info_wrap{
margin-bottom:30px;
}
#simulator_wrap #menu_block01 .brown_bg .frame_info_wrap .frame_info{
display: flex;
    flex-flow: wrap;
margin-bottom:5px;
align-items: center;
    background: #fff;
}
#simulator_wrap #menu_block01 .brown_bg .frame_info_wrap .frame_info .img{
    width: 30%;
}
#simulator_wrap #menu_block01 .brown_bg .frame_info_wrap .frame_info .text{
    width: 70%;
    background: #fff;
    color: #333;
    display: flex;
    align-items: start;
    padding: 1vh 0.7vw;
    flex-flow: column;
}
#simulator_wrap #menu_block01 .brown_bg .frame_info_wrap .frame_info .text .label{
    font-size: 80%;
}
#simulator_wrap #menu_block01 .brown_bg .frame_info_wrap .frame_info .text .name{
font-weight: bold;
    font-size: 105%;
}
#simulator_wrap #menu_block01 .brown_bg .frame_info_wrap .link{
text-align:center;
}
#simulator_wrap #menu_block01 .brown_bg .frame_info_wrap .link span.icon{
background:url(../../img/common/arrow_right-white.svg) no-repeat left center;
background-size: 20px auto;
    display: inline-block;
    padding: 0 0 0 25px;
}
#simulator_wrap #menu_block01 .brown_bg .frame_info_wrap .link a{
}


#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap{
}

#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap .label{
border-bottom:1px solid #fff;
padding:0 0 10px 0;
margin-bottom:15px;
text-align:center;
font-weight:bold;
font-size:120%;
}
#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap .label span.small{
font-weight: bold;
    font-size: 70%;
    display: block;
    margin-bottom: 5px;
}
#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap .label span.large{
font-weight:bold;
display:block;
}







#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap dl{
width:90%;
margin :0 auto 30px auto;
}
#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap dl dt{
    font-size: 90%;
    margin-bottom: 5px;
}
#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap dl dd{
    margin-bottom: 10px;
    padding-left: 10%;
}
#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap .end{
text-align:center;
}


#simulator_wrap #menu_block01 .white_bg .label{
border-bottom:1px solid var(--maincolor);
padding:0 0 10px 0;
margin-bottom:15px;
text-align:center;
font-weight:bold;
font-size:120%;
}

#simulator_wrap #menu_block01 .white_bg .input_num{
}

#simulator_wrap #menu_block01 .white_bg .wraps{
    width: 100%;
    margin: 0 auto 10px auto;
}


#simulator_wrap #menu_block01 .white_bg .wraps{
text-align:center;
font-weight:bold;
color:#e2041b;
}
#simulator_wrap #menu_block01 .white_bg .wraps span{
display:inline-block;
}
#simulator_wrap #menu_block01 .white_bg .wraps .price{
font-weight:bold;
font-size:160%;

}
#simulator_wrap #menu_block01 .white_bg .wraps .tani{
font-weight:bold;
font-size:100%;
margin:0 0 0 10px;
}



a.link_open span.icon{
font-weight:bold;
}
a.link_open span.icon:hover{
color:#0095d9;
}


a.link_open span.icon:after{
 content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url(../../img/common/icon_hatena-red.svg);
  background-size: contain;
  vertical-align: middle;
background-repeat:no-repeat;
}



.frame_spec_wrap a.link_open span.icon:after{
 content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-image: url(../../img/common/icon_hatena-white.svg);
  background-size: contain;
  vertical-align: middle;
background-repeat:no-repeat;
margin-left:5px;
}

.frame_spec_wrap a.link_open span.icon:hover{
color:#ffea00;
}








#simulator_wrap #menu_block02 dl{

}
#simulator_wrap #menu_block02 dl dd{
background: var(--maincolor);
    color: #fff;
    text-align: center;
    padding: 0 0 15px 0;
    pointer-events: auto;
    cursor: pointer;
    border-bottom: 1px solid var(--subcolor01);
    position: relative;
}
#simulator_wrap #menu_block02 dl dd.nonactive{
opacity:0.5;
    pointer-events: none;

}


#simulator_wrap #menu_block02 dl dd.active{
opacity:1;
}

#simulator_wrap #menu_block02 dl dd .icon{
    margin-bottom: 5px;
    padding-top: 15px;
}
#simulator_wrap #menu_block02 dl dd .icon img{
    width: 27%;
}
#simulator_wrap #menu_block02 dl dd .label{
    font-weight: bold;
    font-size: 90%;
}

#simulator_wrap #menu_block02 dl dd .step {
background: #fff;
    color: #333;
    font-size: 85%;
    padding: 0px 10px;
    font-weight: bold;
    width: 55%;
    border-bottom-right-radius: 10px;
}
#simulator_wrap #menu_block02 dl dd#send .step{
background:#fef263;
}

/* ステップ完了状態：背景色を緑に */
#simulator_wrap #menu_block02 dl dd.ok {
background: #00984f;
color: #fff;
}
#simulator_wrap #menu_block02 dl dd.ok .step {
background: #00984f;
color: #fff;
}
#simulator_wrap #menu_block02 dl dd.ok .label {
color: #fff;
}




#simulator_wrap #menu_block03 .block_menu .wraps{
padding:2vh 2vw;
}
#simulator_wrap #menu_block03 .block_menu .titlelabel{
color:#fff;
background:var(--maincolor);
padding:1.5vh 2vw;
font-weight:bold;
font-size:130%;
}
#simulator_wrap #menu_block03 .block_menu .titlelabel span{
display:inline-block;
font-weight:bold;
}
#simulator_wrap #menu_block03 .block_menu .titlelabel .step{
background: #fff;
    color: #333;
    font-size: 75%;
    padding: 0px 10px;
    font-weight: bold;
margin-right:10px;
}
#simulator_wrap #menu_block03 .block_menu .titlelabel .label{
}



#simulator_wrap #menu_block03 .block_menu{
display:none;
}
#simulator_wrap #menu_block03 .block_menu.expanded{
display:block;
}
#simulator_wrap #menu_block03 .block_menu .wraps{
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap{
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt{
border-bottom:1px solid var(--maincolor);
padding-bottom:10px;
margin-bottom:20px;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt .icon{
display:inline-block;
margin-bottom:10px;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt .icon .label{
border-radius:5px;
color:#fff;
font-weight:bold;
font-size:90%;
    padding: 2px 10px;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt .icon .label.hissu{
background:#FF0000;
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt .icon .label.nini{
background:#816ED1;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt .title{
font-weight:bold;
color:var(--maincolor);
    font-size: 110%;
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd{
margin-bottom:0px;
color:var(--maincolor);
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd ul.radio_list{
display:flex;
flex-flow:wrap;
margin-bottom: 30px;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd ul.radio_list li{
margin-right:10%;
}


#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap{
display:flex;
flex-flow:wrap;
}


#simulator_wrap .thum_siborikomi_wrap {
     border: 1px solid var(--subcolor01);
    padding: 15px;
    border-radius: 11px;
    font-size: 85%;
    margin-bottom: 30px;
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.frame{
margin-bottom:10px;
}


#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap dt{
border-bottom: none;
font-weight:normal;
width:15%;
text-align:center;
    align-items: center;
    display: flex;
justify-content: center;
margin-bottom:0;
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.frame dt {
    width: 32%;
    text-align: left;
    justify-content: start;
}


#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap dd{
width:35%;
padding-bottom:0;
margin-bottom:15px;
}


#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.teikei dt{
    width: 40%;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.campus_size.teikei dd{
width:60%;
}



#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.gokei dt{
width: 35%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: start;
margin:0;
padding:0;
}


#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.gokei dd{
width:65%;
    text-align: left;
    display: flex;
    align-items: flex-end;
    justify-content: start;
margin:0 0 5px 0;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.frame dd {
    width: 67%;
}




#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.frame dd select {
padding:5px;
}


#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap dd input{
padding:1vh 0.7vw;
margin-right:5px;
font-size: 110%;
    width: 70%;
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap dd.gokei span{
font-weight:bold;
    font-size: 130%;
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.campus_size{
margin-bottom:30px;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.campus_size select{
    padding: 1vh 0.7vw;
    margin-right: 5px;
    /*font-size: 110%;*/
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.campus_size dd{
width:100%;
}




#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd .pic_upload{
text-align:center;
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd .pic_upload button.size_picture{
background: var(--maincolor) url(../../img/common/order_menu11.svg) no-repeat left 15% center;
    background-size: 35px auto;
    color: #fff;
    text-align: center;
    width: 70%;
    font-weight: bold;
    font-size: 110%;
    border-radius: 5px;
    padding: 2vh 0.3vw;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: linear;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd .pic_upload button.size_picture:hover{
opacity:0.6;
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd .textarea_wrap{
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd .textarea_wrap textarea{
width:100%;
padding:1vh 0.7vw;
height:15vh;
}





#simulator_wrap .btn2column_wrap{
display:flex;
flex-flow:wrap;
    justify-content: space-between;
}
#simulator_wrap .btn2column_wrap dd.go{
width:55%;
}

#simulator_wrap .btn2column_wrap dd.clear{
width:40%;
}
#simulator_wrap .btn2column_wrap dd a{
border-radius:5px;
text-align:center;
padding:1.3vh 0.7vw;
    display: block;
}
#simulator_wrap .btn2column_wrap dd.clear a{
background:#F4D6A5;
width: 100%;
    display: block;
}
#simulator_wrap .btn2column_wrap dd.go a{
background:var(--maincolor);
color:#fff;
}












#simulator_wrap #menu_block04 .titlelabel{
color:#fff;
background:var(--maincolor);
padding:1.5vh 2vw;
text-align:center;
font-weight:bold;
font-size:130%;
}

#simulator_wrap #menu_block04 .wraps{
padding:5vh 5vw;
    display: flex;
    align-items: center;
    height: 80vh;
}

#simulator_wrap #menu_block04 .frame_custom_wrap{
position:relative;
display:flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
#simulator_wrap #menu_block04 .frame_custom_wrap .frame{
display:flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
#simulator_wrap #menu_block04 .frame_custom_wrap .mat{
display:flex;
    width: 80%;
    justify-content: center;
    align-items: center;
}
#simulator_wrap #menu_block04 .frame_custom_wrap .photo{
display:flex;
    width: 60%;
    justify-content: center;
    align-items: center;
}



#simulator_wrap .thum_choise_wrap{
	max-height:40vh;
	overflow:auto;
	overflow-y:scroll;
	overflow-x:hidden;
margin-bottom:30px;
}
#simulator_wrap .thum_choise_wrap .thum_choise_dl{
display:flex;
flex-flow:wrap;
gap:5%;
}
#simulator_wrap .thum_choise_wrap .thum_choise_dl dd{
width:21%;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: linear;
cursor: pointer;
    margin-bottom: 10px !important;
    font-size: 95%;
}
#simulator_wrap .thum_choise_wrap .thum_choise_dl dd.choice{
background:var(--subcolor01);
    border: 2px solid var(--subcolor01);
}


#simulator_wrap .thum_choise_wrap .thum_choise_dl dd .img{
text-align:center;
}
#simulator_wrap .thum_choise_wrap .thum_choise_dl dd .code{
font-size:85%;
display:block;
text-align:center;
}
#simulator_wrap .thum_choise_wrap .thum_choise_dl dd .color{
font-size:85%;
display:block;
text-align:center;
}
#simulator_wrap .thum_choise_wrap .thum_choise_dl dd:hover{
opacity:0.6;
}




#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap.bg{
display:flex;
flex-flow:column;
width: 80%;
    margin: 0 auto;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap.bg dd{
margin-bottom:20px;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap.bg dd a{
text-align:center;
padding:1.3vh 0.7vw;
    display: block;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap.bg dd a.go{
background:var(--maincolor);
color:#fff;
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap.bg dd a.back{
border:1px solid var(--maincolor);
}
















/*モーダル*/


.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
z-index:101;
}
.modal__bg {
  background: rgba(0, 0, 0, 0.8);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content {
  background: #fff;
  left: 50%;
  padding: 40px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-height: 80vh; /* モーダル内で縦の上限を設定 */
  overflow-y: auto; /* はみ出したらスクロール */
}




.modal__content dl.frame_spec_table{
display: flex;
flex-flow:wrap;
justify-content: space-between;
margin-bottom:30px;
}
.modal__content dl.frame_spec_table dt{
width:25%;
}
.modal__content dl.frame_spec_table dd{
width:70%;
}
.modal__content dl.frame_spec_table dd dl.spec{
display: flex;
flex-flow:wrap;
justify-content: space-between;
font-size:95%;
}
.modal__content dl.frame_spec_table dd dl.spec dt{
width:30%;
margin-bottom:10px;
padding-bottom:10px;
border-bottom:1px solid #ccc;
padding:5px;
}
.modal__content dl.frame_spec_table dd dl.spec dd{
width:67%;
margin-bottom:10px;
border-bottom:1px dotted #ccc;
padding:5px;
}

.modal__content dl.frame_spec_table dd dl.spec dt.name,
.modal__content dl.frame_spec_table dd dl.spec dd.name{
background:#efefef;
font-weight:bold;
font-size:110%;
}
.modal__content dl.frame_spec_table dd dl.spec dd.item{
display: flex;
    flex-flow: wrap;
    align-items: center;
}
.modal__content dl.frame_spec_table dd dl.spec dd.item .img{
max-width:25%;
margin-right:10px;
}
.modal__content dl.frame_spec_table dd dl.spec dd.item .label{
}




.modal__content .btn a.js-modal-close{
    background: var(--maincolor);
    color: #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    padding: 1.5vh 1vw;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: linear;
}
.modal__content .btn{
text-align:center;
}

.modal__content .btn.mat a.use{
    background: var(--maincolor);
    color: #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    padding: 1.5vh 1vw;
    display: inline-block;
    -webkit-transition-property: opacity;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: linear;
margin:0 0.5vw;
}
.modal__content .btn.mat a.close{
    background: var(--subcolor01);
    color: #333;
margin:0 0.5vw;
}

.matinfo.info-open .modal__content .btn.mat a.use,
.frameinfo.info-open .modal__content .btn.mat a.use{
display:none;
}



.modal__content .titlelabel {
    color: #fff;
    background: var(--maincolor);
    padding:2vh 2vw;
    text-align: center;
    font-weight: bold;
    font-size: 130%;
margin-bottom:30px;
}
.modal__content dl.frame_spec_table.submit{
gap:5%;
}
.modal__content dl.frame_spec_table.submit dd{
    width: 47%;
}

.modal__content dl.frame_spec_table.submit dl.spec{
margin-bottom:30px;
}
.modal__content dl.frame_spec_table.submit dl:last-child.spec{
margin-bottom:0px;
}


  /* 閉じるボタン（SPのみ表示） */
  #menu_block03 .close-btn {
display: none;
    }















/**********************************************************************/

/* for TB & SP CSS   */

/**********************************************************************/








/******************/
/* TB    */
/******************/

@media only screen and (min-width: 600px) and (max-width: 1019px) {
}









/******************
SP
******************/
@media only screen and (max-width: 599px) {


#simulator_wrap {
    flex-flow: column;
}

#simulator_wrap #menu_block01 {
    width: 100vw;
order:4;
        padding-bottom: 00px;
    }
#simulator_wrap #menu_block02 {
    width: 100vw;
order:2;
        padding-bottom: 10px;
    }


#simulator_wrap #menu_block02 dl dd .step {
    width: 60%;
}




#simulator_wrap #menu_block03 {
    width: 100vw;
order:3;
        height: 100vh;
        overflow: scroll;
        padding-bottom: 70px;
    }
#simulator_wrap #menu_block04 {
    width: 100vw;
order:1;
        padding-bottom: 0px;
    }

#simulator_wrap #menu_block04 .wraps {
    height: 60vh;
}

#simulator_wrap #menu_block03 .block_menu .titlelabel,
#simulator_wrap #menu_block04 .titlelabel {
    padding: 2vw;
    font-size: 120%;
        text-align: center;
    }

#simulator_wrap #menu_block03 .block_menu .titlelabel .step {
    display: none;
}


#simulator_wrap #menu_block02 dl {
    display: flex;
    flex-flow: wrap;
}
#simulator_wrap #menu_block02 dl dd {
    width: calc(100% / 3);
}
#simulator_wrap #menu_block02 dl dd .label {
    font-size: 73%;
}
#simulator_wrap #menu_block02 dl dd .icon img{
max-height:5vh;
}

#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap dl {
    width: 100%;
}


#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap dl {
    width: 100%;
    display: flex;
    flex-flow: wrap;
    gap: 5%;
        font-size: 90%;
    }

#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap dl dt {
    width: 46%;
    margin-bottom: 7px;
}
#simulator_wrap #menu_block01 .brown_bg .frame_spec_wrap dl dd {
    width: 46%;
    margin-bottom: 7px;
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt {
    display: flex;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt .title {
    font-size: 100%;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt .icon {
    width: auto;
}

#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt .icon .label.hissu,
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt .icon .label.nini {
    margin-right: 10px;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap.gokei dt {
    align-items: center;
}
#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dd dl.input_size_wrap {
    margin-bottom:30px;
}


#simulator_wrap #menu_block03 .block_menu .wraps dl.list_wrap dt .title {
    font-weight: bold;
    color: var(--maincolor);
    font-size: 100%;
    width: 75%;
}

#simulator_wrap #menu_block01 .brown_bg {
    background: var(--maincolor);
    color: #fff;
    padding: 3vh 10vw;
}


#simulator_wrap .thum_choise_wrap .thum_choise_dl {
    width: 95%;
}



  /* #menu_block03：オーバーレイパネル初期非表示 */
  #menu_block03 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #fff;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    overflow-y: auto;
    padding: 20px;
  }

  /* 表示時 */
  #menu_block03.active {
    opacity: 1;
    visibility: visible;
  }

  /* 閉じるボタン（SPのみ表示） */
  #menu_block03 .close-btn {
display: inline-block;
        background: #bb5520;
        color: #fff;
        padding: 15px 15px;
        font-size: 110%;
        /* border-radius: 4px; */
        cursor: pointer;
        margin-bottom: 0;
        /* writing-mode: vertical-rl; */
        position: fixed;
        bottom: 20px;
        /* right: 0; */
        z-index: 99;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        width: 90%;
        text-align: center;
        font-weight: bold;
    }

body.no-scroll {
  overflow: hidden;
}





.modal__content dl.frame_spec_table {
    flex-flow: column;
}

  .modal__content {
    width: 90%;
    padding: 20px 20px 70px 20px;
    max-height: 85vh;
  }
.modal__content dl.frame_spec_table dd dl.spec dt
.modal__content dl.frame_spec_table dd dl.spec dd{
width:100%;
}

.modal__content dl.frame_spec_table dd {
    width: 100%;
}

.modal__content dl.frame_spec_table dt {
    width: 60%;
    text-align: center;
    margin: 0 auto 30px auto;
}

.modal__content dl.frame_spec_table dd dl.spec dt.name,
.modal__content dl.frame_spec_table dd dl.spec dd.name {
    font-size: 100%;
}


.modal__content .btn a.js-modal-close {
    padding: 1.5vh 10vw;
}

.modal__content .btn.mat a.use {
    margin: 0 0 10px 0;
    display: block;
}
.modal__content .btn.mat a.close {
    margin: 0;
    display: block;
}



#simulator_wrap #menu_block01 .white_bg .submit a.cartin,
#simulator_wrap #menu_block01 .white_bg .submit button.cartin,
#simulator_wrap #menu_block01 .white_bg .submit input.cartin {
    display: block;
}

.modal__content dl.frame_spec_table.submit dd {
    width: 100%;
}


}

/* STEP6 モーダルのインアクティブボタン */
.modal__content .btn.mat a.use.nonactive {
    position: relative;
    pointer-events: none;
    cursor: not-allowed;
    background: var(--maincolor);
    color: #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    padding: 1.5vh 1vw;
    display: inline-block;
}

.modal__content .btn.mat a.use.nonactive::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(200, 200, 200, 0.5);
    border-radius: inherit;
}

/* SP用 STEP6 モーダルのインアクティブボタン */
@media only screen and (max-width: 599px) {
    #modal-submit .modal__content .btn.mat a.use.nonactive {
        margin: 0 0 10px 0;
        display: block;
        padding: 1.5vh 10vw;
    }
}

/* ======================================
   左パネル「現在の設定」グループ化スタイル
   ====================================== */

#menu_block01 .frame_spec_wrap dl.spec_grouped {
    margin: 0;
    padding: 0;
}

#menu_block01 .frame_spec_wrap dl.spec_grouped dt.group_title {
    /*background: rgba(255, 255, 255, 0.15);*/
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    /*padding: 6px 10px;*/
    margin: 0;
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.2);*/
}

#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content {
    /*padding: 8px 10px 12px 10px;*/
    margin: 0;
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.1);*/
    line-height: 1.6;
}

#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content:last-child {
    border-bottom: none;
}

#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content > span {
    display: block;
    /*font-size: 14px;*/
    color: #fff;
}

#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content > span.sub {
    /*font-size: 12px;*/
    color: rgba(255, 255, 255, 0.8);
    margin-top: 2px;
}

#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content a.frame_name_link {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    display: block;
    margin-bottom: 2px;
}

#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content a.frame_name_link:hover {
    text-decoration: underline;
    opacity: 0.9;
}

/* 字下げ用スタイル（外寸:/窓寸:等のラベルと値） */
#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content > span.sub_label {
    display: inline;
    /*font-size: 12px;
    color: rgba(255, 255, 255, 0.8);*/
}

#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content > span.sub_value {
    display: block;
    /*font-size: 14px;*/
    color: #fff;
    padding-left: 1em;
    margin-top: 2px;
}

/* フレーム名リンク（「？」アイコン付き） */
#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content a.link_open {
    display: block;
    margin-bottom: 5px;
}

#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content a.link_open span.icon {
    font-weight: bold;
    color: #fff;
}

#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content a.link_open span.icon:hover {
    color: #ffea00;
}

#menu_block01 .frame_spec_wrap dl.spec_grouped dd.group_content a.link_open span.icon:after {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(/img/oil/common/icon_hatena-white.svg);
    background-size: contain;
    vertical-align: middle;
    background-repeat: no-repeat;
    margin-left: 5px;
}