@charset "utf-8";

/*==============================
/***  メインコンテンツ  ***/
/*=============================*/

/*========================
	選ばれる理由
========================*/
.refo_title{
	position: relative;
	margin: 0 auto;
	max-width: 900px;

}
.refo_title h2{
	position: relative;
	z-index: 2;
	width: 90%;
	margin:0 auto;
	bottom: -2px;
}
.refo_title::after{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	border: 2px dashed #CCCCCC;
	border-radius: 12px;
	padding-top: 27%;
	width: 98%;
	height: auto;
	transform: translate(-50%,-50%);
	z-index: 1;
}

.refo01_01 .top08_01label {
	top: -5%;
}
.refo01_01 .top08_01>ul>li{
	border-bottom: 1px solid #E6E6E6;
	padding-bottom: 1em;
	margin-bottom: 2em;
}
.refo01_01 .top08_01>ul>li:last-child{
	border: none;
	margin-bottom: 0;
}

/*========================
	リフォームの流れ
========================*/
.flow01_01>ol>li{
	background: #FFFFFF;
	border: 4px solid #F2F2F2;
	border-radius: 18px;
	padding: 1.5em;
	margin-bottom: 30px;
	position: relative;
}
.flow01_01>ol>li::after{
	content: "";
	position: absolute;
	border-left: 4px solid #F2F2F2;
	width: 4px;
	height: 30px;
	left: 50%;
	bottom: -34px;
	transform: translateX(-50%);
}
.flow01_01>ol>li:last-child::after{
	display: none;
}
.flow01_01text{
	padding: 1.5em 1em 0;
}

/*====================
	よくある質問
====================*/
.qa01_01>ul>li{
	border:#F2F2F2 4px solid;
	border-radius: 30px;
	margin:1em 0 1.5em;
	overflow: hidden;
}
.qa01_01 .qa_title{
	display: flex;
	gap: 1.25em;
}
.qa01_01>ul>li>a{
	display: block;
	width:100%;
	box-sizing: border-box;
	text-decoration: none;
	cursor: pointer;
	background:#FFF;
	padding: 2em 8%;
}
.qa01_01>ul>li>ul>li{
	background:#FAF4EF;
	color: #4D4D4D;
}
.qa01_01>ul>li>ul>li>div{
	width:100%;
	padding:2em 8%;
	box-sizing: border-box;
}
.child {
    display: none;
}
.qa01_01>ul>li>a{
	position: relative;
}
.qa01_01>ul>li>a::after{
	content: '';
	background: url("../img/sub/icon_faq_plus.svg") no-repeat;
	background-size: contain;
	width:20px;
	height:20px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-50%,-50%);
}

.qa01_01>ul>li>a.active::after{
	content: '';
	background: url("../img/sub/icon_faq_mai.svg") no-repeat;
	background-size: contain;
	width:20px;
	height:20px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(-50%,-50%);
}


/*========================
	会社概要
========================*/
.abou01_01{
	margin: 0 auto;
	width: 90%;
}
.abou01_02name{
	padding-left: 1em;
}
.abou01_02>ul{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em;
}
.abou01_02>ul>li{
	margin: 0 auto;
	width: 96%;
	max-width: 500px;
}
.abou02_01bg{
	background: linear-gradient(#FFF 5%,  #F7EAE2 5%);
	margin-top: -10em;
	padding: 10em 0 3em;
}
.abou02_01{
	border-radius: 30px;
	background: #F7EAE2;
    margin-top: -3em;
    padding: 1em 2em;
	position: relative;
    z-index: 3;
}
.about03_01{
	max-width: 1090px;
	margin: 0 auto;
}
.about03_01 dl{
	display: flex;
	flex-wrap: wrap;
	border-bottom: 1px solid #E6E6E6;
	padding: 1em;
}
.about03_01 dt{
	font-weight: bold;
	letter-spacing: 0.15em;
	width: 100%;
}
.about03_01 dd{
	color: #4D4D4D;
	line-height: 2em;
}
.timeline {
  max-width: 960px;
  margin: 0 auto;
}
.timeline-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 56px; /* 線＆丸分の左余白 */
  position: relative;
}
.timeline-item {
  position: relative;
  padding: 24px 0 20px;
}
/* 左の丸 */
.timeline-item::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 32px;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e06633;
}
/* 丸の下から次の項目までの縦ライン */
.timeline-item::after {
  content: "";
  position: absolute;
  left: -28px;
  top: 32px;
  bottom: -32px;
  width: 1px;
  background: #e06633;
}
.timeline-item:last-child::after {
  content: none;
}
.timeline-year {
  margin: 0 0 4px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.15em;
}
.timeline-text {
  color: #4D4D4D;
  line-height: 1.6;
  padding: 0.5em 0;
}

/*========================
	スタッフ
========================*/
.staff01_01>ul{
	max-width: 955px;
	margin: 2em auto 0;
}
.staff01_01>ul>li{
	border: 2px dashed #CCCCCC;
	border-radius: 32px;
	padding: 2.5em 2em 1.5em;
	margin-bottom: 2em;
	position: relative;
}
.staff01_01label{
	border-radius: 50px;
	background: #FF7B22;
	padding: 0.5em 1em;
	position: absolute;
	top: -1.25em;
	left: 3em;
}
.staff01_01kana{
	padding-left: 1em;
}

/*========================
	保証
========================*/
.afte01_01 .plan04_01>ol{
	margin: 0 auto;
	width: 96%;
	max-width: 1116px;
}
.afte01_01 .plan04_01>ol>li{
	border-radius: 30px;
	padding: 1.5em 2em;
}
.afte01_01 .plan04_01>ol>li::after{
	display: none;
}
.afte01_01head{
	padding-bottom: 1em;
}
.afte01_02>ul{
	display: flex;
	flex-wrap: wrap;
    gap: 1em;
    justify-content: space-between;
	width: 96%;
	margin: 0 auto;
}
.afte01_02>ul>li{
	width: 48%;
	max-width: 283px;
}
.afte01_02img{
	border: 1px solid #eee;
	padding: 0.25em;
}
.afte02_01>ol{
	margin: 0 auto;
	width: 96%;
	max-width: 1116px;
}
.afte02_01>ol>li{
	background: #FFFFFF;
	border: 4px solid #F15A24;
	border-radius: 18px;
	padding: 1.5em;
	margin-bottom: 30px;
}
.afte02_01text{
	padding: 1.5em 1em 0;
}
/*========================
	プライバシーポリシー
========================*/
.priv01_01,
.priv01_01 ol li{
	line-height: 2;
}
/*========================
	お問い合わせ
========================*/

.rese01_01>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	align-items:center;
}
.rese01_01>ul>li:nth-child(1){
	width:100%;
}
.rese01_01>ul>li:nth-child(2){
	width:100%;
	margin:1.5em 0 0 0;
}

.rese01_01q{
	padding:0 0 0 2em;
	position: relative;
}

.rese01_01q::before{
	content: '';
	background: url("../img/icon/icon_rese_01.svg") no-repeat;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 0.5em;
	width:30px;
	height:30px;
	transform: translate(-50%,-50%);
}

.rese01_02>ul{
	display: flex;
	flex-wrap:wrap;
	width:100%;
	
}
.rese01_02>ul>li{
	width:100%;
	margin:1em 0;
	border:#FFDEB7 1px solid;
	border-radius: 15px;
	padding:1em;
	box-sizing: border-box;
	background:#FFFFFF;
	position: relative;
}

.rese01_02title{
	margin:-2em auto 1em;
}

.rese01_02>ul>li::before{
	content: '';
	background:#FFEED9;
	width:30px;
	height:30px;
	position: absolute;
	top:100%;
	left:48%;
	z-index: -1;
}
.rese01_02>ul>li:last-child::before{
	width:0;
	height:0;
}

.rese02_01{
	width:100%;
	margin:0 auto;
}

.cont_tel{
	max-width: 657px;
	margin: 1em auto;
}
.cont_tel ul{
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
}
.cont_tel ul li a{
	display: block;
	box-sizing: border-box;
	border-radius: 22px;
	border: 4px solid #EFEFEF;
	padding: 0.75em 1em 0.75em 2.5em;
	width: 100%;
}
	
/*========================
	メールフォームテンプレ
========================*/

.cont01_01{
	width:100%;
	margin:0 auto;
}

.mail01_01{}
.mail01_01 dl{
	display: table;
	width:100%;
	table-layout: fixed;
	align-items: center;
}
.mail01_01 dl:last-child{
	border-bottom:none;
}

.mail01_01 dt{
	width:100%;
	padding:0.5em 1em;
	box-sizing: border-box;
	margin:0;
	font-weight:bold;
}

.mail01_01 dd{
	width:100%;
	padding:0 1em 0.5em ;
	box-sizing: border-box;
	margin:0 0 0.5em;
}
input.text_min,
input.text_middle,
input.text_middle02,
input.text_middle03,
input.text_middle04,
input.text,
select.text,
select.text_min,
select.text_middle,
select.text_middle03,
select.text_middle04,
textarea.text{
	font-family: 'Noto Sans JP',-apple-system, Roboto, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue,"Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px ;
	border:#F7D2BA solid 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 50px;
	padding:0.75em 1.5em;
	margin:0.2em 0;
	width:100%;
	appearance: none;
 	-webkit-appearance: none;
  	-moz-appearance: none;
}

textarea.text{
	border-radius: 20px;
}
input.text_min,
select.text_min{
	width:30%;
}
input.text_middle,
select.text_middle{
	width:80%;
}
input.text_middle02{
	width:50%;
}
select.text_middle03,
input.text_middle03{
	width:75%;
}
.mail01_01hissu{
	font-size: 70%;
	display: inline-block;
	background:#FF0000;
	color:#FFFFFF;
	border-radius: 50px;
	line-height: 1.2;
	padding:0.3em 0.8em;
	box-sizing: border-box;
}
.mail01_01ninni{
	font-size: 70%;
	display: inline-block;
	background:#999999;
	color:#FFFFFF;
	border-radius: 50px;
	line-height: 1.2;
	padding:0.3em 0.8em;
	box-sizing: border-box;
}

.mail01_02{
	width:100%;
	margin:0 auto;
}
.mail01_02 input{
	width:auto;
	max-width: 90%;
	margin:0 5%;
}

input[type=checkbox] {
margin:0.5em;
  transform: scale(1.5);
}
input[type=radio] {
	margin:0.5em;
	transform: scale(1.5);
}

::placeholder{
  color:#CCCCCC;
}


input[type="submit"] {
	font-family: 'Noto Sans JP',-apple-system, Roboto, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue,"Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	
	-webkit-appearance: none;
	cursor: pointer;
	width: 96%;
	max-width: 370px;
	height: 100%;
	margin: 1em auto 0;
	display: block;
	border-radius: 50px;
	padding:1em 1.5em;
	background:#F15A24;
	border:#F15A24 1px solid;
	position: relative;
	color: #FFFFFF;
	font-size: 125%;
	font-weight: bold;
	letter-spacing: 1px;
	-webkit-transition: .2s ease-in-out;
	transition: .2s ease-in-out;
}

input[type="submit"]:hover{
	background:#FFFFFF;
	color: #F15A24;
}
	
.mail01_01 select.text{
	width:100%;
	outline: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

.mail01_01 .select_block {
    position: relative;
    box-sizing: border-box;
}
.mail01_01 .select_block::after{
	content: '';
	background: url("../img/common/icon_arrow_B3B3B3.svg")no-repeat;
	background-size: contain;
	position: absolute;
	z-index: 3;
	width:8px;
	height:8px;
	top: 50%;
	right: 0.5em;
	transform: translate(-50%,-50%);
	pointer-events: none;
}

/* チェックボックス */
.mail01_01 .checkbox_block{
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
	padding: 1em 0;
}
.mail01_01 .checkbox_item{
	width: 47%;
	cursor: pointer;
}
.mail01_01 .checkbox_item input[type="checkbox"] {
	cursor: pointer;
}

/* 日付用 */
.mail_calender {
	background: #FFFFFF;
	border-radius: 50px;
	margin-right: 0.5em;
}
.mail_calender input.text_middle03 {
	border: none;
}
.mail_calender img{
	width:22px;
	display: inline-block;
	cursor: pointer;
	margin-left: 1.5em!important;
	margin-bottom: 0.25em;
	vertical-align: middle;
}

/* 時間用 */
.select_block .time-select {
	padding-left: 50px; /* アイコン分の余白 */
	padding-top: 1em;
	padding-bottom: 1em;
	background-position: 15px center;
	background-repeat: no-repeat;
	background-size: 22px 22px;
	background-image: url("../img/cms/icon_form_time.svg");
}


/*========================
	マップ
========================*/

.map_sub_block {
	position:relative;
	padding-bottom: 52%; /* 100/横*縦*/
	height: 0;
	overflow: hidden;
}
.map_sub_block iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}



/*=================================================================================*/
/** 768px以上　タブレット縦　サイズ画面  **/
@media (min-width : 768px) {

	
/*========================
	選ばれる理由
========================*/
.refo_title::after {
	padding-top: 17.44%;
}
.refo_title h2{
	bottom: 11px;	
}
.refo_title img{
	margin-left: 3em;
	width: 80%;
	max-width: 563px;
}
.refo01_01 .top08_01>ul>li{
	padding-bottom: 2.5em;
	width: 100%;
}
.refo01_01 .top08_01label{
	top: -11%;
}
.refo01_01inner{
	display: flex;
	gap: 0 2em;
}
.refo01_01inner .top08_01text{
	padding-top: 0;
	width: 51%;
	max-width: 545px;
}
/*========================
	リフォームの流れ
========================*/
.flow01_01>ol>li{
	padding: 2.5em;
}
.flow01_01inner{
	display: flex;
	flex-wrap: wrap;
	gap: 0 5em;
}
.flow01_01text{
	padding: 0;
	width: 64%;
	max-width: 686px;
}
	
/*======================
	よくある質問
========================*/
.qa01_01>ul>li{
	margin-bottom: 2.5em;
}
.qa01_01>ul>li>a{
	padding-top: 3em;
	padding-bottom: 3em;

}
.qa01_01>ul>li>a::after,
.qa01_01>ul>li>a.active::after{
	width:38px;
	height:38px;
}
.qa01_01 .qa_title{
	gap: 2.25em;
}
.qa01_01>ul>li>ul>li>div{
	padding:2em 5% 2em 12.5%;
}

/*========================
	会社概要
========================*/
.abou01_01{
	width: 81%;
}

.abou01_02>ul{
	gap: 2em 4em;
}
.abou01_02>ul>li{
	width: calc(50% - 4em);
}
.abou02_01bg{
	margin-top: -25em;
	padding-top: 25em;
}
.abou02_01{
	box-sizing: border-box;
	padding: 3em 8em;
	margin: -5em auto 0;
	max-width: 820px;
}
.about03_01 dl{
	padding: 1.5em 0.5em;
}
.about03_01 dt{
	width: 30%;
	max-width: 210px;
	flex-shrink: 0;	
}
.timeline-item {
	display: flex;
	align-items: center;
	gap: 3em;
	padding: 22px 1em 28px;
}
.timeline-item::before{
	width: 15px;
	height: 15px;
}
.timeline-year{
	margin-bottom: 0;
	width: 6em;
}
.timeline-text{
	padding: 0;
}

/*========================
	スタッフ
========================*/
.staff01_01>ul>li{
	padding: 1.5em 4em 1.5em 8em;
	margin-bottom: 4em;
}
.staff01_01label{
	padding-left: 2em;
	padding-right: 2em;
}
.staff01_02 dl{
	display: flex;
	align-items: center;
}
.staff01_02 dt{
	flex-shrink: 0;
}
.staff01_02 dd{
	padding-left: 5em;
}
	
/*========================
	保証
========================*/
.afte01_01 .plan04_01>ol>li{
	padding: 1.5em 5em;
}
.afte01_01inner{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.afte01_01head{
	padding-bottom: 0;
	width: 35%;
}
.afte01_01text{
	box-sizing: border-box;
	padding: 0 1em;
	width: 65%;
}
.afte01_02>ul{
   gap: 6em;
    justify-content: center;
}
.afte01_03{
	width: 78%;
	margin: 0 auto;
}
.afte02_01>ol>li{
	margin-bottom: 3em;
}
.afte02_01inner{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 5em;
}
.afte02_01text{
	padding: 0;
	width: 61%;
	max-width: 616px;
}

/*========================
	お問い合わせ
========================*/
.cont01_01{
	width:83.33333%;
	margin:0 auto;
}
	
.rese01_01>ul>li:nth-child(1){
	width:50%;
}
.rese01_01>ul>li:nth-child(2){
	width:33.33333%;
	margin:1em 8% 0;
}
	
.rese01_02>ul>li{
	width:30.72%;
	margin:1em 1.3%;
}
.rese01_02>ul>li::before{
	width:50px;
	top:40%;
	left:100%;
	right:auto;
	bottom:auto;
}
.rese02_01{
	width:90%;
}

.esti01_01 .rese01_02>ul>li{
	width:22.971014%;
	margin:1em 1%;
}

.cont_tel ul {
	gap: 1em;
}
.cont_tel ul li a{
	border-radius: 33px;
	padding: 2em 5em 2em 6.5em;
	width: 100%;
}
	
/*=========================
	メールフォームテンプレ
==========================*/

input.text_min,
input.text_middle,
input.text_middle02,
input.text_middle03,
input.text_middle04,
input.text,
select.text,
select.text_min,
select.text_middle,
select.text_middle03,
select.text_middle04,
textarea.text{
	padding:1.25em 1.5em;
}
	
	

.mail01_01 dt{
	padding:1em ;
	box-sizing: border-box;
	font-weight: bold;
	width:25%;
	display: table-cell;
	vertical-align: middle;
	margin:0;
	border-bottom:none;

}
.mail01_01 dd{
	display: table-cell;
	vertical-align: middle;
	width:68%;
	padding:1em 2em;
	margin:0.5em 3% 0.5em 4%;
}

input.text,
select.text,
textarea.text{
	width:100%;
}
.mail01_02{
	width:73%;
	margin:0 0 0 26%;
}
.mail01_02 input{
	width:auto;
	margin:0 auto;
}
	
input.text_middle,
select.text_middle{
	width:35%;
}
input.text_middle02{
	width:50%;
}
select.text_middle04,
input.text_middle04{
	width:75%;
}
.mail01_01 .select_block:has(.text_middle04)::after {
  right: 28%;
}
input.text_min,
select.text_min{
	width:20%;
}

.mail01_01time{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mail_calender input.text_middle03 {
	padding-top: 0.85em;
	padding-bottom: 0.85em;
}	

/* チェックボックス */
.mail01_01 .checkbox_item{
	width: 25%;
}

}
/*=================================================================================*/
/** 1140px以上 padding: ;PCサイズ画面 **/
@media (min-width : 1024px) {
/**** メインコンテンツ　****/ 

/*========================
	会社概要
========================*/
.abou01_01{
	padding-right: 3em;
	box-sizing: border-box;
}


}
/*=================================================================================*/
/** 1140px以上 padding: ;PCサイズ画面 **/
@media (min-width : 1200px) {
/**** メインコンテンツ　****/ 

.rese02_01{
	width:75%;
}

.afte01_03{
	width: 64%;
}

}


/*=================================================================================*/
/** 1140px以上 padding: ;PCサイズ画面 **/
@media (min-width : 1600px) {
/**** メインコンテンツ　****/ 


}