/*/// responsible /*/
.sp,
.visible640,
.visible480,
.visible768,
.visible834,
.visible1024,
.brsp1024,
.brsp834,
.brsp768,
.brsp640,
.brsp480,
.disnone{
	display: none ;
	}

@media screen and (max-width:680px) and (orientation:landscape){

}
@media screen and (max-width:1025px){
  .sp{
    display: block;
  }
  .pc{
    display: none;
  }
  .brsp1024{
    display: inline;
  }
	.visible1024{
		display: block;
	}
	.hidden1024{
		display: none;
	}
	.inner{
		padding:0 20px;
	}
  /*/----------------------------/*/

  /*//////// 1024 ///////////*/
}

@media screen and (max-width:835px){
  .brsp,
  .brsp834{
    display: inline;
  }
	.visible834{
		display: block;
	}
	.hidden834{
		display: none;
	}
  /*/----------------------------/*/

	#header .header{
		height:var(--spheaderHight);
		padding:0;
	}
	#header .header .logo{
		margin:auto;
		width:min(80vw,400px);
	}
	#header .subarea{
		display: none;
	}
	#keyvisual{
		margin-top:var(--spheaderHight);
		height: auto;
		padding-bottom: 45vw;
	}
	.topkeyimg{
		height: 60vw;
	}
	#keyvisual .content{
		height: auto;
	}
	#keyvisual .cont{
		height: auto;
	}
	#keyvisual .keybtmarea{
		height: auto;
		padding:0 ;
	}
	.toContactArea{
		background:white;
		padding:0;
	}
	.toContactArea .ti,
	.toContactArea .txtarea{
		display: none;
	}
	.title {
		margin-bottom: clamp(20px,4vw,40px);
	}
	[id*="_area"] {
	  padding:  clamp(20px,6vw,50px) 0;
	}
	.costcheck_btnarea{
		margin-top:15px;
	}
	#sec10_area,
	#contact_area{
		padding:0;
	}
	#contact_area{
		border-top:4px solid black;
		padding-top:20px;
		background:white;
	}
	.btmfix{
		position: fixed;
		z-index: 888;
		bottom: 0;
		left: 0;
	}
	.contact_btnarea ul{
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding:3% 0;
	}
	.contact_btnarea li{
		padding:0 5px;
		width:50%;
	}
	#reveiw .elem {
		border:0;
		padding:0;
		margin-top:clamp(30px,5vw,40px);
		border-bottom:1px solid #D6D6D6;
	}
	#reveiw .elem h4{
		position: static;
		transform:none;
	}
	#reveiw .elem .flex{
		display: block;
	}
	#reveiw .elem .flex .textarea{
		width:100%;
		padding:0;
	}
	#reveiw .elem .flex .textarea h5{
		text-align: center;
		margin:20px auto;
	}
	#reveiw .elem .flex .photoarea{
		width:100%;
		display: flex;
		justify-content: space-between;
		margin:clamp(30px,5vw,40px) auto;
	}
	#reveiw .elem .flex .photoarea .imgs{
		width:49%;
		margin:0;
	}
	#problem_area .inner{
		padding:0 20px;
	}
	#problem_area .inner .illust02{
		bottom: -30px;
		right: 0px;
		width: 116px;
	}
	.problem ul li{
		padding:20px 10px 20px 20px;
	}
	.problem ul li:after{
		display: none;
	}
	.problem ul li:before{
		left:0;
	}
	.problem ul li:nth-child(2n):before{
		right:0;
	}
	.problem ul li span{
		padding-left:min(8vw,50px)
	}
	.problem ul li span:before{
		top:0px;
		width:min(6vw,35px);
		height:min(6vw,35px);
	}
#reason_area .reason .ti{
	margin:clamp(30px,5vw,40px) auto;
}
#reason_area .reason .flex{
	display: block;
}
#reason_area .reason .flex .textarea{
	width:100%;
	padding:0;
}
#reason_area .reason .flex .photoarea{
	width:100%;
	margin-top:30px;
}

#message_area .flex{
	display: block;
}
#message_area .flex .photoarea{
	width:min(80%,400px);
	margin:auto;
}
#message_area .flex .photoarea .name{
	top:auto;
	right:-10%;
	bottom:-5%;
	left:auto;
	transform:rotate(-5deg);
}
#message_area .flex .textarea{
	width:100%;
	padding:max(12%,80px) 0;
}
#flow_area .title h3{
	letter-spacing: normal;
	color:white;
	background:var(--mainColor);
	border-radius:80px;
	padding:.7em 1em;
	width:fit-content;
	margin:auto;
}
#flow_area .elem{
	margin:5vw 0 13vw;
}
#flow_area .elem h4{
	color:black;
	padding-left:0;
	margin-bottom: .5em;
}
#flow_area .flow .elem:nth-child(1) h4{
	padding-left:8vw;
}
#flow_area .elem:before{
	width:8vw;
	height: 8vw;
	font-size:6vw;
	border-radius:2vw;
	left:3vw;
	top:3vw;
	transform:none;
}
#flow_area .elem:after{
	width:13vw;
	height: 8vw;
	bottom:-3vw;
}
#flow_area .elem:last-child{
	margin-bottom: min(5vw,40px);
}
#flow_area .flex{
	display: block;
}
#flow_area .elem .flex .photoarea{
  display: none;
}
#flow_area .elem .flex .textarea{
  width:100%;
  padding-right:0;
}
#qa_area .title{
	margin-bottom: min(5vw,40px);
}
.qa dl dt, .qa dl dd{
	padding:15px;
	padding-left:min(20vw,60px);
}
.qa dl dt::before, .qa dl dd::before{
	top:0;
	left:min(4vw,20px);
}
#comment_area .letter{
  background:transparent;
  box-shadow:none;
  writing-mode: unset;
  height:auto;
	width:auto;
  margin:auto;
	padding:0;
	z-index: 15;
}
#comment_area .letter .ti{
	margin:0 0 1em 0;
	text-align: center;
}
#comment_area .letter .illust01{
	bottom:auto;
	top:0;
	right:5%;
	width:min(16%,120px);
	transform:translateY(-60%);
}
#comment_area .letter .illust02{
	float:none;
	display: block;
	margin:20px auto;
	text-align: center;
	width:min(45%,220px);
}
#form_area {
	padding-top:0;
}
#form_area .title{
  margin-bottom: min(8vw,15px);
}
#form_area .binder{
	background:transparent;
	padding:0;
}
#form_area .binder .paper{
	background:transparent;
	padding:0;
}
#form_area .binder .bind,
#form_area .binder .illust01{
	display: none;
}
#form_area .txtarea p{
	color:black;
}
#footer .footer{
	padding-bottom: calc(260 / 836 * 100vw);
}
  /*//////// 834 ///////////*/
}

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

  p{
    font-size:1rem;
  }
  .brsp768{
    display: inline;
  }
  .visible768{
    display: block;
  }
  .hidden768{
    display: none;
  }
  /*/----------------------------/*/

	#keyvisual .inner{
		padding: 0;
	}



  /*//////// 768 ///////////*/
}
@media screen and (max-width:640px){
    .visible640{
      display: block;
    }
    .hidden640{
      display: none;
    }
    .brsp640{
      display: inline;
    }
  /*/----------------------------/*/
#footer .footerlink ul li{
	margin:3%;
	font-size:clamp(14px,2vw,1.8px);
}

  /*//////// 640 ///////////*/
}

@media screen and (max-width:480px){
  .brsp480{
    display: inline;
  }
  .visible480{
    display: block;
  }
  .hidden480{
    display: none;
  }
  /*/----------------------------/*/
#footer .footer .copyrignt p{
	font-size:11px;
}
  /*//////// 480 ///////////*/
}