:root{
  --mainColor:#FF6419;
  --subColor:#D4E5E9;
  --pcheaderHight:90px;
  --spheaderHight:50px;
}
/*///// frame ///*/
#wrapper{
  overflow: hidden;
}
#contents{
  position: relative;
  width:100%;
}

/*/// header //*/
#header{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  z-index: 999;
}
.header-margin{
  padding-top:var(--pcheaderHight);
}
#header .header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:white;
	width:100%;
  height:var(--pcheaderHight);
	padding:10px ;
}
#header .header .logo{
  width:clamp(200px,60vw,600px);
}
#header .header h1{
  display: flex;
  justify-content: center;
  align-items: center;
}
#header .subarea{
  display: flex;
  width:clamp(200px,66vw,660px);
  align-items: center;
}
#header .subarea > div{
  margin:0 10px;
}
.inner{
  max-width: 1100px;
  margin:auto;
}
.mini{
  font-size: .8rem;
}
.bo {
  position: relative;
  padding: 2%;
}
.bo:after {
  content:"";
  display: block;
  width:50px;
  border-bottom:1px solid #666;
  position: absolute;
  bottom:0%;
  left: 50%;
  transform: translateX(-50%);
}
/*///////////////////////
   contents
/////////////////////////*/
/* keyvisual */
	#keyvisual {
    margin-top:var(--pcheaderHight);
		width:100%;
    height:calc(clamp(600px,100vh,1000px) - var(--pcheaderHight));
    position: relative;
	}
.topSlider,.swiper-wrapper{
  height: 100%;
  width:100%;
}
.topkeyimg{
  position: relative;
  z-index: 9;
}
.topkeyimg .imgs{
  width:100%;
  height: 100%;
}
.topkeyimg .imgs img{
  width:100%;
  height: 100%;
  object-fit: cover;
}
#keyvisual .content{
  position: absolute;
  left: 0;
  top:0;
  width:100%;
  height:100%;
  z-index: 10;
  flex-wrap: wrap;
  align-content: center;
}
#keyvisual .cont{
  width:min(1000px,100%);
  height: 70%;
}
#keyvisual .cont h2 .row01{
  height: 50%;
}
#keyvisual .cont h2 .row01 .img01{
  padding:5% 5% 0 0;
  display: flex;
  align-items: end;
  justify-content: center;
}
#keyvisual .cont h2 .row01 .img02{
  display: flex;
  align-items: end;
}
#keyvisual .cont h2 .row02{
  display: block;
  height: 50%;
}
#keyvisual h2{
  text-align: center;
  height: 100%;
}
#keyvisual .keybtmarea{
  width:100%;
  height: 30%;
  padding:min(40px,3%) 0;
  background:rgba(255,255,255);
  z-index: 11;
}
#keyvisual .keybtmarea .inner{
  height: 100%;
  text-align: center;
}
#keyvisual .cont span img,
#keyvisual .keybtmarea img{
  max-height: 100%;
}
.orenge{
  color:var(--mainColor);
}
.flex{
  display: flex;
}
.between{
  justify-content: space-between;
}
.title{
  margin:0 0 40px  0;
  text-align: center;
}
strong{
  font-weight: bold;
  color:var(--mainColor);
}
[id*="_area"]{
  padding:80px 0;
}
.costcheck_btnarea{
  text-align: center;
}
.toContactArea {
  background:var(--mainColor);
  position: relative;
  z-index: 12;
  padding:0 35px 35px;
}
.toContactArea .ti{
  transform:translateY(-5%);
  text-align: center;
}
.toContactArea .txtarea{
  margin:auto;
}
.toContactArea .txtarea p{
  color:white;
  text-align: center;
  font-weight: 500;
  font-size:clamp(15px,2vw,20px);
  margin:0;
}
#reveiw .elem {
  position: relative;
  padding:clamp(70px,18%,100px) clamp(20px,4vw,50px) 20px ;
  border:1px solid black;
  margin-top:calc(10% + 40px);
}
#reveiw .elem h4{
  position: absolute;
  text-align: center;
  top:0;
  left:0;
  width:100%;
  transform:translateY(-50%);
}
#reveiw .elem .flex .textarea{
  width:68%;
  order:2;
  padding:0 0 0 clamp(20px,4vw,40px);
}
#reveiw .elem .flex .textarea{
  font-size:clamp(15px,2vw,18px);
}
#reveiw .elem .flex .textarea h5{
  width:fit-content;
  border-bottom:4px solid #3F8DD9;
  padding:7px 0;
  font-size:clamp(17px,3vw,24px);
  font-weight: 700;
  margin-bottom: 1em;
}
#reveiw .elem .flex .photoarea{
  width:33%;
  order:1;
}
#reveiw .elem .flex .photoarea .imgs{
  margin-bottom: 20px;
}
#problem_area {
  background:var(--subColor);
}
#problem_area .inner{
  position: relative;
  max-width: 1200px;
  padding:0 50px ;
}
#problem_area .title{
  position: relative;
}
#problem_area .title .illust01{
  position: absolute;
  right:20px;
  top:-40px;
  z-index: 12;
}
#problem_area .title h3 {
  position: relative;
  z-index: 13;
}
#problem_area .inner .illust02{
  position: absolute;
  bottom:0;
  right:-30px;
}
.problem {
  position: relative;
  padding-bottom: 80px;
}
.problem ul li{
  display: block;
  margin:20px 0;
  padding:20px 30px;
  font-size:clamp(16px,3vw,25px);
  position: relative;
  padding-left:70px;
  line-height: 1.5;
}
.problem ul li:before{
  content:"";
  display: block;
  width:100%;
  height: 100%;
  background:white;
  border-radius:80px;
  z-index: 0;
  position: absolute;
  left:30px;
  top:0;
}
.problem ul li:nth-child(2n):before{
  left:auto;
  right:30px;
}
.problem ul li:after{
  content:"";
  display: block;
  width:30px;
  height: 35px;
  background: url(../img/toge@2x.png) no-repeat right top;
  background-size: contain;
  position: absolute;
  right:-10px;
  bottom:0;
  transform:translateX(100%);
}
.problem ul li:nth-child(2n):after{
  right:auto;
  left:-10px;
  transform:translateX(-100%) scale(-1,1);
}
.problem ul li span{
  position: relative;
  display: block;
  max-width: 900px;
  margin:auto;
  padding-left:40px;
}
.problem ul li span:before{
  content:"";
  display: block;
  background:url(../img/icon_check@2x.png) no-repeat center center;
  background-size:contain;
  width:30px;
  height: 30px;
  position: absolute;
  left:0;
  top:5px;
}
.problem ul li strong{
  color:#CD0000;
}
#reason_area .title{
  position: relative;
}
#reason_area .title .illust01{
  position: absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:min(16vw,200px);
}
#reason_area .reason .elem{
  margin: 50px 0;
  padding-bottom: 50px;
  border-bottom: 1px solid var(--mainColor);
}
#reason_area .reason .ti{
  margin: 50px 0;
}
#reason_area .reason .flex .textarea{
  width:60%;
  padding:0 0 0 40px ;
  order:2;
}
#reason_area .reason .flex .photoarea{
  width:40%;
  order:1:
}
#reason_area .reason .flex .textarea p{
  margin:0;
}
#message_area {
  background:var(--subColor);
}
#message_area .photoarea{
  width:min(400px,85%);
  margin:30px auto;
  position: relative;
}
#message_area .photoarea .name{
  position: absolute;
  top:0;
  right:0;
  /* transform:translate(85%,-15px) ; */
}
#message_area .textarea{
  width:100%;
  /* padding-left:40px; */
  padding-top:min(20vw,110px);
}
#message_area .textarea h4{
  font-size:clamp(18px,3vw,22px);
  font-weight: 500;
  margin-bottom: 20px;
}
#message_area .textarea p{
  font-size:clamp(14px,1.7vw,17px);
  font-weight: 500;
}
#flow_area h3{
  font-size:clamp(18px,3.6vw,36px);
  letter-spacing: 0.1em;
  font-weight: bold;
}
#flow_area .flow{
  counter-reset: num;
}
#flow_area .elem {
  position: relative;
  border:2px solid black;
  padding:clamp(15px,4vw,40px);
  margin:80px auto 110px;
  counter-increment: num;
}
#flow_area .elem:before{
  content: counter(num);
  background:var(--mainColor);
  border-radius: 300px;
  width:85px;
  height: 85px;
  font-size:52px;
  color:white;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  position: absolute;
  top:0;
  left:20px;
  transform:translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}
#flow_area .elem:after{
  content:"";
  display: block;
  width:105px;
  height: 56px;
  background:url(../img/arrow_btm.png) no-repeat center center;
  background-size:contain;
  position: absolute;
  bottom:-30px;
  left:50%;
  transform:translate(-50%,100%);
}
#flow_area .elem:last-child {
  margin-bottom: 40px;
}
#flow_area .elem:last-child:after{
  display: none;
}
#flow_area .elem .flex .photoarea{
  width:29%;
}
#flow_area .elem .flex .textarea{
  width:71%;
  padding-right:35px;
}
#flow_area .elem h4{
  text-align: center;
  font-size:clamp(18px,4vw,36px);
  font-weight: bold;
  color:var(--mainColor);
  margin-bottom: 30px;
}
#qa_area{
  padding-top:0;
}
#qa_area .title {
  margin-bottom: 60px;
}
#qa_area .title img{
  width:clamp(220px,37vw,379px);
  transform:translateX(-15%);
}
.qa dl{
  margin-bottom: 20px;
}
.qa dl dt{
  position: relative;
  font-size:clamp(16px,2.2vw,22px);
  font-weight: bold;
  padding:20px 20px 20px 95px;
  background:var(--subColor);
  line-height: 1.5;
}
.qa dl dd{
    position: relative;
  font-size:clamp(14px,1.8vw,18px);
    padding:20px 20px 20px 95px;
}
.qa dl dt:before,
.qa dl dd:before{
  font-size:35px;
  font-family: 'Be Vietnam Pro', sans-serif;
  position: absolute;
  left:30px;
  top:10px;
}
.qa dl dt:before{
  content:"Q";
}
.qa dl dd:before{
  content:"A";
}
#form_area .title{
  margin-bottom: -10px;
}
#form_area .binder{
  background:#80C9CB;
  border-radius: 30px;
  position: relative;
  padding:min(5vw,60px);
}
#form_area .paper{
  position: relative;
  z-index: 18;
  text-align: center;
  padding:min(20vw,40px);
}
#form_area .paper{
  width:100%;
  padding-top:min(80px,18vw);
  padding-bottom: 60px;
  background-image:url(../img/paper_top.png),url(../img/paper_bottom.png),url(../img/paper_middle.png);
  background-repeat: no-repeat , no-repeat , repeat-y;
  background-position: top center , bottom center , center center;
  background-size:contain, contain ,contain;
}
#form_area .paper p{
  text-align: center;
}
#form_area .paper .bind{
  position: absolute;
  left:50%;
  top:0;
  transform:translate(-50%,-25%);
}
#form_area .paper .illust01{
  position: absolute;
  right:0;
  top:0;
  transform:translate(30%,-30%);
}
#form_area .txtarea p{
  color:white;
  font-weight: 500;
  text-align: center;
}
#form_area button{
  background:transparent !important;
}
#comment_area{
  background:var(--subColor);
}
#comment_area .letter{
  background:white;
  padding:40px;
  box-shadow:10px 10px 20px rgba(0,0,0,.2);
  writing-mode:vertical-rl;
  height: clamp(600px,73vh,800px);
  margin:auto;
  width:100%;
  font-family: 'Noto Serif JP', sans-serif;
  position: relative;
}
#comment_area .letter p{
  font-size:clamp(15px,1.8vw,18px);
}
#comment_area .letter .ti{
  margin-left: 40px;
  margin-top:1em;
  font-weight: 700;
  font-size:clamp(22px,4vw,36px);
}
#comment_area .letter .illust01{
  position: absolute;
  bottom:10%;
  right:-5%;
}
#comment_area .letter .illust02{
  float: right;
}
/*------- private -----*/
#private .textarea .title h3 .small{
  color:#FB6F2D;
}
#private p{
  font-size:1rem;
  margin-top:10px;
}
#private h4{
  margin-top:30px;
  margin-bottom: 10px;
}
/*------- contact -----*/
#contents.contact .pan{
  background:#F8F8F8;
}
#contact{
  background:#F8F8F8;
}
#contact .textarea{
  width:100%;
}
#contact .textarea .title h3{
  color:#FB6F2D;
}
#contact .formarea{
  width: 65%;
  margin:0 auto 0 35%;
  padding:20px;
}
#contact .formarea .fgroup{
  background:white;
  padding:10px 15px;
}
#contact .thanks h3,
#contact .error-message h3{
 font-size:1.75rem;
 text-align: center;
 margin:4% auto;
}
#contact .read{
	text-align: center;
}
#contact .tel a{
	font-size:1.4rem;
	color: black;
	display: block;
	margin:10px auto;
	pointer-events: none;
}
.red{
  color:rgb(199, 0, 0);
}
#confirm{
  display: none;
}
#confirm .mClose{
  font-size:1.2rem;
  text-align: center;
  padding:5px 10px;
  margin:5px auto;
  cursor: pointer;
}
#confirm .formarea dl dd{
  line-height: 1.4;
}
/*/--------- modal ajax ----*/
.modaal-container{
  /* background:transparent !important; */
}
/*////// footer ////////*/
#footer{
 margin:0px 0 0 0 ;
 padding:0px 0;
}
#footer .footer{
	height: 100%;
  padding:20px 0;
  background: #368BCB;
  color:white;
}
#footer .footer .copyrignt p{
  font-size:.8rem;
  font-weight: 200;
  text-align: center;
}

#footer .footerlink{
  padding:20px 0;
}
#footer .footerlink ul {
  display: flex;
  justify-content: center;
}
#footer .footerlink ul li{
  margin:0 30px;
}
#footer .footerlink ul li a{
  color:inherit;
}
#footer .footerlink ul li a:hover{
  color:var(--mainColor);
}

/*----- privacy policy --------*/
#privacy {
  margin-bottom: min(100px,10%);
}
#privacy p{
  margin:1em auto;
  font-size:14px;
}
#privacy h3{
  margin-top:2em;
}

.header_padding{
  padding-top:var(--pcheaderHight);
}
#privacy .pan{
  font-size:14px;
  margin:1em;
}
#keyvisual-second{
  height: min(150px,20vh);
  display: flex;
  justify-content: center;
  align-items: center;
}
#keyvisual-second h2{

}
#keyvisual-second h2 span{
  display: block;
  margin:0 5px 0 0;
  text-align: center;
  letter-spacing: .05em;
}
#keyvisual-second h2 span.en{
  font-size:14px;
    font-weight: normal;
}