@charset "UTF-8";

/*-------------------------
__hoge_style
-------------------------*/

#main{ text-align: center; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 50px; box-sizing: border-box;}
#contents_title{background:url("images/title_back.jpg")no-repeat center center;background-size:cover; position: relative;}
#contents_title:after { content: ""; width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; display: block;}

@media screen and (min-width: 768px) {
.pc_none{ display: none;}
}
@media screen and (max-width: 767px) {
#main{ padding: 0 20px;}
.sp_none{ display: none;}
}

.construction_box{ background-color: #fff; padding: 30px; box-sizing: border-box; position: relative; margin-bottom: 50px;}
.construction_box:last-child{ margin-bottom: 0;}
.construction_box .box_top{ display: flex; justify-content: space-between; margin-bottom: 30px;}
.construction_box .box_top .top_left{ display: flex;}
.construction_box .box_top .top_left p.icon_box{ width: 70px; height: 70px; background-color: #283279; border-radius: 0 0 20px 0; position: absolute; top: 0; left: 0;}
.construction_box .box_top .top_left p.icon_box span{ position: relative; display: block; width: 100%; height: 100%;}
.construction_box .box_top .top_left p.icon_box span img{ width: 40px; height: 40px; position: absolute; margin: auto; padding: auto; top: 0; left: 0; bottom: 0; right: 0;}
.construction_box .box_top .top_left h2 span.title_text{ font-size: 2.2em; color: #283279; font-weight: 700; margin-left: 70px; box-sizing: border-box;}

.construction_box .box_top .top_right ul{ display: flex;}
.construction_box .box_top .top_right ul li:nth-child(1){ margin-right: 5px;}
.construction_box .box_top .top_right ul li:nth-child(1) a{ font-size: 1.5em; color: #fff!important; display: block; background-color: #06c755; padding: 12px; box-sizing: border-box; border-radius: 5px;}
.construction_box .box_top .top_right ul li:nth-child(1) a span{ display: inline-block; position: relative; padding-left: 25px;}
.construction_box .box_top .top_right ul li:nth-child(1) a span:before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 18px; height: 18px; background-image: url(/shop/images/icon_line@2x.png); background-size: 18px 18px; background-repeat: no-repeat;}
.construction_box .box_top .top_right ul li:nth-child(2){}
.construction_box .box_top .top_right ul li:nth-child(2) a{ font-size: 1.5em; color: #fff!important; display: block; background: linear-gradient(270deg, #2a2c8b 0%, #2a2c8b 25%, #293f9d 51%, #2878d2 100%); padding: 12px; box-sizing: border-box; border-radius: 5px;}
.construction_box .box_top .top_right ul li:nth-child(2) a span{ display: inline-block; position: relative; padding-left: 25px;}
.construction_box .box_top .top_right ul li:nth-child(2) a span:before{ content: ''; display: block; position: absolute; top: 0; left: 0; width: 18px; height: 18px; background-image: url(/shop/images/icon_mail@2x.png); background-size: 18px 18px; background-repeat: no-repeat;}

.construction_box .box_middle{ display: flex; justify-content: space-between; align-items: center; text-align: left; margin-bottom: 30px;}
.construction_box .box_middle .middle_photo{ width: 100%; max-width: 310px; height: auto;}
.construction_box .box_middle .middle_photo span{ display: block; width: 100%; height: 0; background-color: #F5F5F5; padding-top: 75%; overflow: hidden; position: relative;}
.construction_box .box_middle .middle_photo span img{ width: 100%; height: 100%; object-fit: contain;  position: absolute; inset: 0;}
.construction_box .box_middle .middle_com{ width: calc(100% - 350px);}
.construction_box .box_middle .middle_com .middle_subtitle{ font-size: 2.2em; line-height: 1.4; color: #283279; margin-bottom: 20px; font-weight: 700;}
.construction_box .box_middle .middle_com .middle_text{ font-size: 1.5em; line-height: 1.8; margin-bottom: 15px;}
.construction_box .box_middle .middle_com .middle_btn{ text-align: center;}
.construction_box .box_middle .middle_com .middle_btn a{ font-size: 1.9em; color: #fff!important; padding: 25px 30px; box-sizing: border-box;display: inline-block; border-radius: 5px; background: linear-gradient(270deg, #2ACAFF 0%, #2878D2 25%, #2878D2 51%, #2A2C8B 100%); background-position: 1% 50%; background-size: 200% auto;}
.construction_box .box_bottom{}
.construction_box .box_bottom .bottom_title{}
.construction_box .box_bottom .bottom_box .bottom_box_inner{ padding: 50px 20px 50px; box-sizing: border-box;}

.bottom_title{ border: 3px solid #283279; color: #283279; width: 100%; box-sizing: border-box; padding: 20px; border-radius: 5px; margin: 0 auto; cursor: pointer;}
/*アコーディオンタイトル*/
.bottom_title span{ display: inline-block; position: relative; cursor: pointer; font-size:1.9em; font-weight: normal; transition: all .5s ease; padding-left: 45px; font-weight: 700;}
/*アイコンの＋と×*/
.bottom_title span::before,
.bottom_title span::after{ position: absolute; content:''; width: 15px; height: 3px; background-color: #283279;}
.bottom_title span::before{ top:48%; left: 18px; transform: rotate(0deg); }
.bottom_title span::after{ top:48%; left: 18px; transform: rotate(90deg);}
/*　closeというクラスがついたら形状変化　*/
.bottom_title.close span::before{ transform: rotate(45deg);}
.bottom_title.close span::after{ transform: rotate(-45deg);}
/*アコーディオンで現れるエリア*/
.bottom_box { display: none;}

@media screen and (min-width: 768px) {
.construction_box .box_top .top_right ul li a:hover{ opacity: 0.7;}
.construction_box .box_bottom .bottom_title{ webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
.construction_box .box_bottom .bottom_title:hover{ background-color: #d2d2e1;}
}

@media screen and (max-width: 767px) {

.construction_box{ padding: 20px; margin-bottom: 20px;}
.construction_box .box_top{ display: block; margin-bottom: 10px;}
.construction_box .box_top .top_left{ margin-bottom: 30px;}
.construction_box .box_top .top_left p.icon_box{ width: 60px; height: 60px;}
.construction_box .box_top .top_left p.icon_box span img{ width: 36px; height: 36px;}
.construction_box .box_top .top_left h2 span.title_text{ font-size: 1.6em; margin-left: 50px;}

.construction_box .box_top .top_right ul{ display: block;}
.construction_box .box_top .top_right ul li{ width: 100%;}
.construction_box .box_top .top_right ul li:nth-child(1){ margin-right: 0; margin-bottom: 5px;}
.construction_box .box_top .top_right ul li:nth-child(1) a{ font-size: 1.4em; font-weight: 700; padding:14px 7px;}
.construction_box .box_top .top_right ul li:nth-child(1) a span:before{ top: -3px; left: 4px;}
.construction_box .box_top .top_right ul li:nth-child(2) a{ font-size: 1.4em; font-weight: 700; padding:14px 7px;}
.construction_box .box_top .top_right ul li:nth-child(2) a span:before{ top: -3px; left: 4px;}

.construction_box .box_middle{ display: block; margin-bottom: 20px;}
.construction_box .box_middle .middle_photo{ max-width: 100%; margin-bottom: 15px;}
.construction_box .box_middle .middle_com{ width: 100%;}
.construction_box .box_middle .middle_com .middle_subtitle{ font-size: 1.6em; line-height: 1.3; margin-bottom: 10px;}
.construction_box .box_middle .middle_com .middle_text{ font-size: 1.3em; line-height: 1.6; margin-bottom: 10px;}
.construction_box .box_middle .middle_com .middle_btn{ text-align: center;}
.construction_box .box_middle .middle_com .middle_btn a{ font-weight: 700; font-size: 1.4em; padding: 15px 20px;}

.bottom_title span{ font-size:1.8em; padding-left: 40px;}

.construction_box .box_bottom .bottom_box .bottom_box_inner{ padding: 30px 0 30px; box-sizing: border-box;}

}

/*======================================= アコーディオン部分の共通パーツ =======================================*/
/*support01*/
.in_block{ margin-bottom: 70px;}
.in_block:last-child{ margin-bottom: 0;}
.in_block .introduction{ margin-bottom: 30px;}
.in_block .introduction .title{ font-size: 3.2em; line-height: 1.3; color: #283279; font-weight: 700; margin-bottom: 20px;}
.in_block .introduction .title span{ color: #FFA000; font-size: 1.6em;}
.in_block .introduction .text{ font-size: 1.6em;}
.in_block .introduction .side_line{ position: relative; display: inline-block; padding: 0 55px; font-size: 2.5em; color:#283279; font-weight: 700; margin-top: 30px;}
.in_block .introduction .side_line:before,
.in_block .introduction .side_line:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 60px; height: 2px; background-color: #283279;}
.in_block .introduction .side_line:before { left: -15px;}
.in_block .introduction .side_line:after { right: -15px;}
.in_block .introduction .side_line span{}
.in_block .w100_pic{ width: 100%; height: auto; margin-bottom: 50px;}
.in_block .w100_pic img{ width: 100%; height: auto;}
.in_block .point_list{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.in_block .point_list dl{ width: calc((100% - 40px) / 3); border: 2px solid #283279; box-sizing: border-box; border-radius: 20px; padding: 30px; box-sizing: border-box; margin-bottom: 20px;}
.in_block .point_list dl:nth-last-child(-n+3){ margin-bottom: 0;}
.in_block .point_list dl dt{ font-size: 2.1em; line-height: 1.4; font-weight: 700; color: #283279; margin-bottom: 20px;}
.in_block .point_list dl dt span{ background: linear-gradient(transparent 60%, #FAD9C7 60%);}
.in_block .point_list dl dd{ text-align: left; font-size: 1.5em; line-height: 1.6;}
.in_block .blue_bar_title{ background-color: #283279; padding: 20px; box-sizing: border-box; border-radius: 50vh 0 0 50vh; text-align: left; margin-bottom: 40px;}
.in_block .blue_bar_title span{ display: block; font-size: 2.2em; line-height: 1.2; font-weight: 700; color: #fff; position: relative; padding: 0 0 0 30px;}
.in_block .blue_bar_title span:before{ content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-color: #fff; border-radius: 50vh;}
.in_block .w_min_pic{ margin: 50px auto 50px; text-align: center;}
.in_block .w_min_pic img{ max-width: 100%; height: auto;}

.in_block .icon_text_list{ margin-bottom: 30px;}
.in_block .icon_text_list .icon_text_inner{ box-sizing: border-box; border-radius: 20px; text-align: left; background-color: #EBF0F5;}
.in_block .icon_text_list .icon_text_inner{ width: 100%;}
.in_block .icon_text_list .icon_text_inner .icon_top{ width: 100%; height: 65px; display: flex; align-items: center;}
.in_block .icon_text_list .icon_text_inner .icon_top p.icon_box{ width: 65px; height: 65px; background-color: #283279; position: relative; border-radius: 15px 0 15px 0; margin-right: 15px;}
.in_block .icon_text_list .icon_text_inner .icon_top p.icon_box img{ width: 45px; height: 45px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.in_block .icon_text_list .icon_text_inner .icon_top p.icon_title{ font-size: 2em; line-height: 1.3; font-weight: 700; color: #283279;}
.in_block .icon_text_list .icon_text_inner .icon_list{ padding: 25px; box-sizing: border-box;}
.in_block .icon_text_list .icon_text_inner .icon_list ul{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.in_block .icon_text_list .icon_text_inner .icon_list ul li{ width: calc((100% / 3) - 10px); margin-bottom: 15px; text-align: center; background-color: #fff;}
.in_block .icon_text_list .icon_text_inner .icon_list ul li span{ display: block; padding: 10px; box-sizing: border-box;}
.in_block .icon_text_list .icon_text_inner .icon_list ul li span img{ height: 60px; width: auto; -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}

.in_block .bluetitle{ font-size: 2em; line-height: 1.4; font-weight: 700; text-align: left; color: #283279; margin-bottom: 15px;}
.in_block .textonly{ text-align: left; margin-bottom: 30px;}
.in_block .textonly p{ font-size: 1.5em; line-height: 1.6; margin-bottom: 20px;}
.in_block .housemaker table{ border-collapse: collapse; font-size: 1.4em; line-height: 1.6;}
.in_block .housemaker table tr th{ background-color: #283279; color: #fff; width: calc(100% / 4); padding: 15px 15px; box-sizing: border-box; border-right: 5px solid #fff;}
.in_block .housemaker table tr th.none{ background-color: #fff;}
.in_block .housemaker table tr td{ width: calc(100% / 4); padding: 15px 15px; box-sizing: border-box;}

.in_block .voice_list{}
.in_block .voice_list .voice_box{ margin-bottom: 40px;}
.in_block .voice_list .voice_box{ display: flex;}
.in_block .voice_list .voice_box .v_pic{ width: 310px; height: auto; margin-right: 20px;}
.in_block .voice_list .voice_box .v_pic span{ display: block; width: 100%; height: 0; background-color: #F5F5F5; padding-top: 75%; overflow: hidden; position: relative;}
.in_block .voice_list .voice_box .v_pic span img{ width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0; -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
.in_block .voice_list .voice_box .v_text{ width: calc(100% - 330px); text-align: left; -webkit-transition: .2s; -ms-transition: .2s; transition: .2s;}
.in_block .voice_list .voice_box .v_text .v_title{ font-size: 2.3em; line-height: 1.4; color: #283279; font-weight: 700; margin-bottom: 30px;}
.in_block .voice_list .voice_box .v_text .v_data{ margin-bottom: 25px;}
.in_block .voice_list .voice_box .v_text .v_data span{ font-size: 1.6em; font-weight: 700; color: #283279; margin-right: 10px;}
.in_block .voice_list .voice_box .v_text .v_data span.back_blue{ font-size: 1.2em; color: #fff; background-color: #283279; padding: 3px 5px;}
.in_block .voice_list .voice_box .v_text .v_detail{ font-size: 1.5em; line-height: 1.6;}
.in_block .voice_link a{ font-size: 2em; font-weight: 700; display: inline-block; color: #283279!important; border: 2px solid #283279; box-sizing: border-box; border-radius: 10px; padding: 25px 45px; box-sizing: border-box;}
.in_block .contact_btn{ width: 470px; height: 100px; margin: 50px auto 0;}
.in_block .contact_btn a{ display: block; width: 100%; height: 100%; background: linear-gradient(270deg, #FFE600 0%, #FFB900 25%, #FFB900 51%, #FF5F00 100%); background-position: 1% 50%; background-size: 200% auto; position: relative; border-radius: 10px; color: #fff!important; font-size: 2.4em; font-weight: 700; padding: 40px 0; box-sizing: border-box;}

ul.reform_cam{ display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.reform_cam li{ background-color: #EBF0F5; font-size: 1.8em; line-height: 1.3; font-weight: 700; color: #283279; height: 80px; margin-bottom: 15px; position: relative;}
ul.reform_cam li:nth-child(-n+3){ width: calc((100% / 3) - 10px);}
ul.reform_cam li:nth-child(n+4){ width: calc((100% / 4) - 10px);}
ul.reform_cam li span{ width: 100%; align-items: center; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit- transform: translateY(-50%) translateX(-50%); margin: auto;}

@media screen and (min-width: 768px) {
.construction_box .box_middle .middle_com .middle_btn a:hover{ background-position: 99% 50%;}
.in_block .contact_btn a:hover{ background-position: 99% 50%;}
/*.in_block .voice_list .voice_box:hover .v_pic img,
.in_block .voice_list .voice_box:hover .v_text{ opacity: 0.6;}*/
.in_block .voice_link a:hover{ color: #fff!important; background-color: #283279;}
.in_block .text_and_photo.photo_left .pic_box{ order: 2;}
.in_block .text_and_photo.photo_left .text_box{order: 1;}
#support07 .in_block .in_accordion dl dt:hover{ opacity: 0.5;}
#support07 .faq .faq_list dl dd a:hover{ background-color: #283279; color: #fff;}

.in_block .housemaker table tr:nth-child(odd) td{ background-color: #eee;}

}

@media screen and (max-width: 767px) {

/*======================================= アコーディオン部分の共通パーツ =======================================*/
/*support01*/
 .in_block{ margin-bottom: 40px;}
.in_block .introduction{ margin-bottom: 25px;}
.in_block .introduction .title{ font-size: 1.8em; margin-bottom: 15px;}
.in_block .introduction .text{ font-size: 1.3em; line-height: 1.6;}
.in_block .introduction .side_line{ padding: 0 35px; font-size: 1.5em; margin-top: 0;}
.in_block .introduction .side_line:before,
.in_block .introduction .side_line:after { width: 30px; height: 2px; background-color: #283279;}
.in_block .introduction .side_line:before { left: 0;}
.in_block .introduction .side_line:after { right: 0;}
.in_block .w100_pic{ margin-bottom: 30px;}
.in_block .point_list{ display: block;}
.in_block .point_list dl{ width: 100%; border-radius: 15px; padding: 20px; margin-bottom: 15px;}
.in_block .point_list dl:nth-last-child(-n+3){ margin-bottom: 15px;}
.in_block .point_list dl:last-child{ margin-bottom: 0;}
.in_block .point_list dl dt{ font-size: 1.7em; margin-bottom: 15px;}
.in_block .point_list dl dd{ font-size: 1.3em; line-height: 1.6;}
.in_block .blue_bar_title{ padding: 15px; margin-bottom: 20px;}
.in_block .blue_bar_title span{ font-size: 1.7em; padding: 0 0 0 20px;}
.in_block .blue_bar_title span:before{ width: 15px; height: 15px;}
.in_block .w_min_pic{ margin: 20px auto 20px; text-align: center;}

.in_block .icon_text_list{ display: block; margin-bottom: 20px;}
.in_block .icon_text_list .icon_text_inner{ width: 100%; margin-bottom: 10px;}
.in_block .icon_text_list .icon_text_inner .icon_top{ width: 100%; height: 55px;}
.in_block .icon_text_list .icon_text_inner .icon_top p.icon_box{ width: 55px; height: 55px; margin-right: 10px;}
.in_block .icon_text_list .icon_text_inner .icon_top p.icon_box img{ width: 35px; height: 35px;}
.in_block .icon_text_list .icon_text_inner .icon_top p.icon_title{ font-size: 1.5em; line-height: 1.3; font-weight: 700; color: #283279;}
.in_block .icon_text_list .icon_text_inner .icon_list{ padding: 15px;}
.in_block .icon_text_list .icon_text_inner .icon_list ul{}
.in_block .icon_text_list .icon_text_inner .icon_list ul li{ width: calc((100% / 2) - 5px); margin-bottom: 5px;}
.in_block .icon_text_list .icon_text_inner .icon_list ul li span{ padding: 5px;}
.in_block .icon_text_list .icon_text_inner .icon_list ul li span img{ width: 100%; height: auto;}

.in_block .bluetitle{ font-size: 1.7em; margin-bottom: 15px;}
.in_block .textonly{ margin-bottom: 10px;}
.in_block .textonly p{ font-size: 1.3em; line-height: 1.6; margin-bottom: 15px;}
.in_block .housemaker table{ font-size: 1.3em; line-height: 1.6; width: 100%;}
.in_block .housemaker table tr th,
.in_block .housemaker table tr td{ width: 100%; padding: 0;}
.tbl-r05 { width: 80%;}
.tbl-r05 .thead { display: none;}
.in_block .housemaker table.tbl-r05 tr { width: 100%;}
.in_block .housemaker table.tbl-r05 tr td { display: block; text-align: left; width: 100%; position: relative; padding: 0 0 0 100px; margin-bottom: 5px;}
.in_block .housemaker table.tbl-r05 tr td:first-child { background: #283279; color: #fff; font-weight: bold; text-align: center; padding: 5px 0; margin-top: 15px;}
.in_block .housemaker table.tbl-r05 tr td:before { content: attr(data-label); font-weight: bold; position: absolute;  top: 0; left: 0;}
.in_block .voice_list .voice_box{ margin-bottom: 25px;}
.in_block .voice_list .voice_box{ display: block;}
.in_block .voice_list .voice_box .v_pic{ width: 100%; height: auto; margin-right: 0; margin-bottom: 10px;}
/*.in_block .voice_list .voice_box .v_pic span{ display: block; width: 100%; height: 0; background-color: #F5F5F5; padding-top: 75%; overflow: hidden; position: relative;}
.in_block .voice_list .voice_box .v_pic span img{ width: 100%; height: 100%; object-fit: contain; position: absolute; inset: 0;}*/
.in_block .voice_list .voice_box .v_text{ width: 100%;}
.in_block .voice_list .voice_box .v_text .v_title{ font-size: 1.5em; line-height: 1.2; margin-bottom: 15px;}
.in_block .voice_list .voice_box .v_text .v_data{ margin-bottom: 10px;}
.in_block .voice_list .voice_box .v_text .v_data span{ font-size: 1.3em;}
.in_block .voice_list .voice_box .v_text .v_data span.back_blue{ font-size: 1.2em;}
.in_block .voice_list .voice_box .v_text .v_detail{ font-size: 1.3em; line-height: 1.6;}
.in_block .voice_link a{ width: 100%; font-size: 1.6em; padding: 15px 0; box-sizing: border-box;}
.in_block .contact_btn{ width: 100%; height: 60px; margin: 20px auto 0;}
.in_block .contact_btn a{ font-size: 1.5em; padding: 20px 0;}

ul.reform_cam{ display: block;}
ul.reform_cam li{ font-size: 1.6em; height: 60px; margin-bottom: 10px;}
ul.reform_cam li:nth-child(-n+3){ width: 100%;}
ul.reform_cam li:nth-child(n+4){ width: 100%;}

}

@media screen and (max-width: 374px) {
.in_block{ margin-bottom: 30px;}
.in_block .introduction{ margin-bottom: 20px;}
.in_block .introduction .title{ font-size: 1.7em; margin-bottom: 5px;}
.construction_box .box_top .top_left h2 span.title_text{ font-size: 1.4em;}
#support04 .in_block ul.bank_list01 li{ width: 100%;}
#support05 .in_block .osusume_box > p{ font-size: 1.4em;}
#support06 .in_block .point_list dl dt br{ display: block;}
.in_block .point_list dl dt{ font-size: 1.6em; margin-bottom: 10px;}
ul.reform_cam li{ font-size: 1.5em;}
}

/* 各セクションへのリンク時に該当のアコーディオンを開いた状態で表示する */
#construction01.is-open .bottom_box,
#construction02.is-open .bottom_box{ display:block;}