@charset "utf-8";

html{
  font-size: 100%;
}
body{
  width: 100%;
  color: #45464B;
  background: #fff;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}
p{
  line-height: 1.65;
}
article{
  width: 100%;
}
article h2{
}
article h2 img{
  width: 100%;
}
.pcOnly{
  display: none;
}
.spOnly{
  display: block;
}
.spNone{
  display: none;
}

/* ----- Common ----- */
header{
  position: relative;
}
header h1{
  position: absolute;
  top: 10px;
  left: 12px;
  width: 68px;
}
header h1 img{
  width: 100%;
}
.title_line{
  position: relative;
  width: 23.4375%;
  max-width: 180px;
  margin: 0 auto;
  border-bottom: 7px solid #D9D9D9;
}
.title_line::before{
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  max-width: 90px;
  border-bottom: 7px solid #367FA4;
}

/* ----- drawer menu ----- */
#drawer{
	display: none;
}
label{
	cursor: pointer;
	position: fixed;
}
.open{
	z-index: 2;
	top: 18px;
	right: 18px;
	width: 40px;
	height: 40px;
	background: #fff;
  border: 1px solid #c5d7e3;
	transition: .6s, .6s cubic-bezier(.215, .61, .355, 1);
}
.open::before,
.open::after{
	content: "";
}
.open span,
.open::before,
.open::after{
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 17%;
	width: 66%;
	border-bottom: 2.5px solid #45464b;
	transition: .6s cubic-bezier(.215, .61, .355, 1);
}
.open::before{
	transform: translateY(-8px);
}
.open::after{
	transform: translateY(8px);
}
.close{
	z-index: 1;
	inset: 0;
	pointer-events: none;
	transition: .6s;
}
#drawer:checked + .open span{
	transform: scaleX(0);
}
#drawer:checked + .open::before{
	transform: rotate(135deg) scaleX(1.2);
}
#drawer:checked + .open::after{
	transform: rotate(-135deg) scaleX(1.2);
}
#drawer:checked ~ .close{
	pointer-events: auto;
	background: rgba(0, 0, 0, .3);
}
.menu{
	z-index: 1;
	position: fixed;
	overflow: auto;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 10px;
	box-sizing: border-box;
	background: rgba(0, 0, 0, .6);
	transform: translateX(100%);
	transition: .6s cubic-bezier(.215, .61, .355, 1);
}
.menu ul{
	margin: 0;
	padding-top: 3em;
}
.menu li{
	line-height: 1.4;
}
.menu li:not(:first-child){
	border-top: 1px solid rgba(255, 255, 255, .6);
}
.menu a{
	display: block;
	padding: 1em 2em;
	color: #fff;
	text-decoration: inherit;
	transition: .6s;
}
#drawer:checked ~ .menu{
	transform: none;
}

/* ----- Contact ----- */
.contact_outer{
  width: 100%;
  background: #F2F7FF;
}
.contact{
  display: flex;
  flex-wrap: wrap;
  padding: 3% 0 6%;
}
.contact .pic1{
  position: absolute;
  top: -23%;
  left: 60%;
  width: 38%;
}
.contact .pic1 img{
  width: 100%;
}
.contact .contact_inner{
  width: 94%;
  margin: 0 auto;
}
.contact .text1{
  padding: 1.5% 0;
  font-weight: 500;
  line-height: 1.65;
  text-align: center;
  letter-spacing: -.02em;
  font-size: clamp(11px, 3.6vw, 13.5px);
}
.contact .text2{
  position: relative;
  display: flex;
  width: 100%;
  margin: 2% 0;
  padding-left: 4%;
  box-sizing: border-box;
}
.contact .text2 .inner{
  font-weight: 800;
  line-height: 1;
  text-align: center;
  font-size: clamp(10px, 5.33vw, 20px);
}
.contact .text2 span.frame{
  display: inline-block;
  width: auto;
  color: #343434;
  padding: .3% 1% 1%;
  background: #fff;
  margin: 0 1% 2.23214% 0;
  border: 3px solid #1E5391;
  font-size: clamp(10px, 6.67vw, 25px);
}
.contact .text2 span.marker{
  display: inline-block;
  width: auto;
  color: #343434;
  border: none;
  padding-bottom: 1.5%;
  background: linear-gradient(transparent 60%, #F6FF00 40%);
}
.contact .text2 span.muryo{
  font-size: clamp(10px, 9.33vw, 35px);
}
.contact ul{
  padding-top: 8%;
}
.contact ul li{
  width: 100%;
  margin
}
.contact ul li p{
  width: 100%;
  text-align: center;
  padding: 0 0 1%;
  font-size: clamp(10px, 4vw, 15px);
}
.contact ul li p span{
  display: inline-block;
  margin: 0 2%;
  vertical-align: -.1em;
  font-size: clamp(10px, 4.53vw, 17px);
  transform: rotate(20deg);
}
.contact ul li p span.rev{
  transform: rotate(100deg);
}
.contact ul li a{
  display: block;
  opacity: 1;
}
.contact ul li a:hover{
  opacity: .7;
}
.contact ul li a img{
  width: 100%;
}

/* ----- Main ----- */
main article{
}
main article .fv_contctus{
  padding: 1.5% 3% 2.5%;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 0 12px 0 rgba(0,0,0,.3);
}
main article .fv_contctus ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
main article .fv_contctus ul li:first-child{
  width: 100%;
  text-align: center;
  margin-bottom: .6em;
  font-size: clamp(10px, 4.27vw, 16px);
}
main article .fv_contctus ul li:first-child span{
  color: #2F69AC;
  font-weight: 700;
  border-bottom: 1.5px solid #2F69AC;
}
main article .fv_contctus ul li.contactbtn{
  width: 60.42553%;
  text-align: center;
}
main article .fv_contctus ul li.contactbtn a{
  display: block;
  width: 100%;
  color: #fff;
  font-weight: 600;
  opacity: 1;
  border-radius: 40px;
  padding: .6em 0 .75em;
  font-size: clamp(10px, 4vw, 15px);
  background: linear-gradient(90deg, rgba(95,199,243,1) 0%, rgba(0,91,172,1) 100%);
}
main article .fv_contctus ul li.contactbtn a:hover{
  opacity: .55;
}
main article .fv_contctus ul li.phonenumber{
  width: 37.7305%;
}
main article .fv_contctus ul li.phonenumber a{
  display: block;
}
main article .fv_contctus ul li.phonenumber a img{
  width: 100%;
}
main article .fv_contctus ul li.phonenumber span{
  display: block;
  color: #2F69AC;
  font-weight: 600;
  padding: .5em 0 0;
  letter-spacing: .05em;
  font-size: clamp(10px, 2.67vw, 10px);
}
main article .wrapper_section01{
}
#sgc_hojyokinkatsuyo{
}
#sgc_hojyokinkatsuyo h3{
  width: 83.4%;
  max-width: 100%;
  margin: 3% auto 4%;
}
#sgc_hojyokinkatsuyo h3 img{
  width: 100%;
}
#sgc_hojyokinkatsuyo p.obi_01{
  padding: .25em 0;
  text-align: center;
  color: #F6FF71;
  font-weight: 800;
  font-size: clamp(10px, 6.93vw, 26px);
  background: linear-gradient(90deg, #5fc7f3 0%, #2c5d9c 25%, #2c5d9c 75%, #62caf5 100%);
}

/* ----- Guide Book ----- */
#mondai{
  width: 100%;
}
#mondai .area_01{
  width: 94%;
  margin: 1em auto 0;
}
#mondai .area_02{
  width: 100%;
  padding-top: 40%;
  background: url(../images/bg_fv02_2_sp.jpg) no-repeat top left;
  background-size: 100%;
  aspect-ratio: 1125 / 3771;
}
#mondai p.obi_02{
  width: 100%;
  padding: .25em .25em .35em;
  text-align: center;
  font-size: clamp(10px, 3.2vw, 12px);
  color: #fff;
  font-weight: bold;
  box-sizing: border-box;
  border-radius: 22px;
  background: linear-gradient(90deg, #ffb202 0%, #ff700f 100%);
}
#mondai ul.guidebook{
  width: 70.922%;
  margin: .75em auto 0;
}
#mondai ul.guidebook li{
  width: 100%;
  margin-bottom: .75em;
}
#mondai ul.guidebook li a{
  display: block;
}
#mondai ul.guidebook li a img{
  width: 100%;
}
#mondai ul.guidebook li a p{
  width: 100%;
  color: #fff;
  margin-top: .2em;
  padding-bottom: .15em;
  text-align: center;
  border-radius: 30px;
  background: linear-gradient(-20deg, #ffb199 0%, #ff0844 100%);
}
#mondai h3{
  color: #fff;
  font-weight: 800;
  text-align: center;
  margin-bottom: 4%;
  text-shadow: 0px 0px 8px #000;
  font-size: clamp(10px, 11.47vw, 43px);
}
#mondai ul{
  width: 95%;
  max-width: 100%;
  margin: 0 auto;
  padding-top: 3%;
}
#mondai ul li figure img{
  width: 100%;
}
#mondai ul li .check{
  width: 94%;
  max-width: 100%;
  margin: 0 auto;
}
#mondai ul li.right,
#mondai ul li.left{
  display: flex;
  flex-wrap: wrap;
}
#mondai ul li .check_inner{
  display: flex;
  align-items: center;
  padding: 0 0 1em;
}
#mondai ul li .check_inner p{
  width: 14.468%;
  max-width: 51px;
  margin-right: .55em;
}
#mondai ul li .check_inner p img{
  width: 100%;
}
#mondai ul li .check_inner h4{
  color: #fff;
  line-height: 1.4;
  font-weight: 800;
  text-shadow: 0px 4px 4px rgb(0, 0, 0, .25);
  font-size: clamp(10px, 4.27vw, 16px);
}
#mondai ul li .check_inner h4 span{
  color: #F6FF00;
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: clamp(10px, 6.53vw, 24.5px);
  background: linear-gradient(transparent 90%, #00D5FA 10%);
}
#mondai ul li .check .text{
  color: #fff;
  padding-bottom: 12%;
  text-align: justify;
  line-height: 1.75;
  text-shadow: 0px 0px 7px rgb(0, 0, 0, 1);
  font-size: clamp(10px, 4.8vw, 18px);
}
#mondai ul li.left .check{
  order: 1;
}
#mondai ul li.left figure{
  order: 0;
}
#mondai .area_03{
  width: 100%;
  background: url(../images/bg_fv02_3_sp.jpg) no-repeat top left;
  background-size: 100%;
  margin-top: -5px;
  aspect-ratio: 1125 / 3209;
}

/* ----- Merit ----- */
#merit{
  width: 100%;
  background: url(../images/bg_merit_sp.png) no-repeat top center;
  background-size: 100%;
  aspect-ratio: 3 / 12.879;
}
#merit .inner{
  text-align: center;
}
#merit .inner h3{
  width: 78.4%;
  color: #176186;
  padding: 12% 0 5%;
  margin: 0 auto;
  border-bottom: 4px solid #176186;
  font-weight: 800;
  line-height: .95;
  font-size: clamp(10px, 14.4vw, 54px);
}
#merit .inner h3 span.txt_orange{
  color: #FF700F;
  font-weight: 800;
  font-size: clamp(10px, 10.67vw, 40px);
}
#merit .inner ul{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
#merit .inner ul li{
  position: relative;
  width: 100%;
}
#merit .inner ul li:first-child{
  padding-top: 7%;
}
#merit .inner ul li:last-child{
  padding-bottom: 8%;
}
#merit .inner ul li figure{
  width: 96%;
  margin: 0 auto;
}
#merit .inner ul li figure img{
  width: 100%;
}
#merit .inner ul li p{
  position: absolute;
  top: 65%;
  left: 6%;
  width: 86.3%;
  line-height: 1.4;
  font-weight: 700;
  font-size: clamp(10px, 7.47vw, 28px);
}
#merit .inner ul li:nth-child(2) p{
  top: 63%;
}
#merit .inner ul li p span{
  color: #ED6565
}
#merit .muryobtn_space{
  width: 100%;
  background: #67B3DB;
}
#merit .muryobtn_space .inner{
  position: relative;
  width: 94%;
  margin: 0 auto;
}
#merit .muryobtn_space .inner .muryofukidashi p.muryo{
  position: absolute;
  top: -25px;
  left: 2.25%;
  width: 30.722%;
  max-width: 100px;
  padding: 0 0 12%;
  text-align: center;
  background: url(../images/bg_fukidashi.png) no-repeat top left;
  background-size: 100%;
  box-sizing: border-box;
}
#merit .muryobtn_space .inner .muryofukidashi span.muryo_inner{
  color: #fff;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: clamp(10px, 6.67vw, 25px);
}
#merit .muryobtn_space .setsumei{
  display: block;
  margin-bottom: 6%;
  padding-top: 9.4%;
  color: #F6FF71;
  font-weight: 700;
  font-size: clamp(10px, 6.4vw, 24px);
}
#merit .consult_btn{
  width: 94%;
  max-width: 331px;
  margin: 0 auto;
  padding-bottom: 6%;
}
#merit .consult_btn a{
  display: block;
  opacity: 1;
}
#merit .consult_btn a:hover{
  opacity: .7;
}
#merit .consult_btn a img{
  width: 100%;
}

/* ----- Otoku ----- */
#otoku{
  width: 100%;
  background: linear-gradient(0deg, rgba(217,234,241,1) 0%, rgba(255,255,255,1) 100%);
}
#otoku .inner{
  width: 100%;
  text-align: center;
  background: url(../images/bg_otoku_sp.png) no-repeat top center;
  background-size: 100%;
  aspect-ratio: 971 / 1360;
}
#otoku .inner .bln{
  width: 94%;
  max-width: 331px;
  margin: 0 auto;
  padding-top: 5.1041666%;
}
#otoku .inner .bln img{
  width: 100%;
}
#otoku h3{
  color: #1E5391;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .05em;
  padding-top: 2%;
  font-size: clamp(10px, 10.67vw, 40px);
}
#otoku h3 .t01{
  color: #FA9601;
  font-weight: 800;
  line-height: .95;
  font-size: clamp(10px, 14.93vw, 56px);
}
#otoku h3 .t02{
  font-weight: 800;
  font-size: clamp(10px, 14.93vw, 56px);
}
#otoku h3 .exc{
  content: '';
  display: inline-block;
  width: 13%;
  max-width: 46px;
  margin-left: .02em;
  vertical-align: .1em;
}
#otoku h3 .exc img{
  width: 100%;
}
#otoku h4{
  color: #1E5391;
  font-weight: 700;
  line-height: 1.4;
  padding-top: 4%;
  font-size: clamp(10px, 4.27vw, 16px);
}
#otoku h4 .frame{
  color: #FA9601;
  font-weight: 700;
  background: #fff;
  padding: 0 1% .25% 1%;
  margin-right: 1%;
  border-radius: 6px;
  font-size: clamp(10px, 4.27vw, 16px);
  box-shadow: 0 0 5px 0 rgba(30, 83, 145, .7);
}
#otoku h4 .katsuyo{
  font-weight: 800;
  font-size: clamp(10px, 10.67vw, 40px);
  text-shadow: 0px 4px 4px rgb(0, 0, 0, .1);
}
#otoku h4 .katsuyo .no{
  color: #1E5391;
  font-weight: 800;
  font-size: clamp(10px, 8vw, 30px);
}
#otoku h4 .katsuyo .pro{
  color: #FA9601;
  font-weight: 800;
  line-height: .95;
  font-size: clamp(10px, 14.93vw, 56px);
  text-shadow: 0px 4px 4px rgb(255, 255, 255, .7);
}
#otoku .inner figure{
  width: 100%;
  padding-top: 7%;
}
#otoku h5{
  color: #1E5391;
  font-weight: 800;
  text-align: center;
  font-size: clamp(10px, 4.8vw, 18px);
}
#otoku h5 span{
  background: linear-gradient(transparent 70%, #F6FF71 30%);
}
#otoku .text{
  width: 94%;
  max-width: 862px;
  margin: 2% auto 0;
  padding: 0 .25em .18em 0;
  color: #FA9601;
  font-weight: 800;
  text-align: center;
  background: #fff;
  font-size: clamp(10px, 2.67vw, 10px);
}
#otoku figure{
  width: 80%;
  margin: 3.23% auto 0;
}
#otoku figure img{
  width: 100%;
}
#otoku .arw1{
  width: 100%;
  max-width: 100%;
  margin: 1% auto 0;
}
#otoku .arw1 img{
  width: 100%;
}

/* ----- Simulation ----- */
#simulation{
  margin-bottom: 15%;
}
#simulation h3{
  position: relative;
  margin: 8% 0 1.6666%;
  color: #1E5391;
  text-align: center;
  font-weight: 800;
  font-size: clamp(10px, 4.8vw, 18px);
}
#simulation h3::before{
  content: '例えば';
  display: inline-block;
  width: 16.927%;
  max-width: 130px;
  min-height: 78px;
  color: #fff;
  padding: .25em 0 .45em;
  position: absolute;
  top: -170%;
  left: 6%;
  box-sizing: border-box;
  font-weight: 700;
  font-size: clamp(10px, 3.73vw, 14px);
  background: url(../images/simu_01.png) no-repeat top center;
  background-size: contain;
}
#simulation .ldk{
  width: 60%;
  padding: .15em 0 .25em;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  line-height: 1;
  font-weight: 700;
  font-size: clamp(10px, 3.73vw, 14px);
  background: #FA9601;
  border-radius: 51px;
}
#simulation table{
  width: 94%;
  margin: 4% auto;
  border-collapse: collapse;
}
#simulation table th,
#simulation table td{
  margin: 0;
  line-height: 1;
  padding: .25em 0;
  vertical-align: middle;
  font-size: clamp(10px, 3.73vw, 14px);
}
#simulation table th{
  text-align: center;
  font-weight: 500;
  background: #9EDAE4;
}
#simulation table .th1{
  border-right: 2px solid #fff;
}
#simulation table .th2,
#simulation table .td1{
  border-bottom: 2px solid #fff;
}
#simulation table td{
  background: #eee;
  padding-left: .25em;
  border-left: 2px solid #fff;
}
#simulation .floor{
  width: 94%;
  margin: 0 auto;
}
#simulation .floor img{
  width: 100%;
}
#simulation .reform{
  width: 94%;
  margin: 0 auto 3%;
}
#simulation .reform img{
  width: 100%;
}
#simulation .note{
  width: 94%;
  margin: 0 auto;
  font-size: clamp(10px, 2.67vw, 10px);
}

/* ----- Casestudy ----- */
#casestudy{
  width: 100%;
  position: relative;
  background: url(../images/bg_casestudy_sp.jpg) no-repeat top center;
  background-size: cover;
  aspect-ratio: 5 / 15.3;
}
#casestudy h3{
  position: absolute;
  top: -4.5%;
  left: calc((100% - 22.3958333%) / 2);
  width: 26.041666%;
  max-width: 200px;
  min-height: 200px;
  color: #fff;
  padding: 8% 0 0;
  font-weight: 600;
  line-height: 1.25;
  font-size: clamp(13px, 4.53vw, 17px);
  text-align: center;
  background: url(../images/cs_bg_01.png) no-repeat top center;
  background-size: contain;
}
#casestudy h4{
  color: #fff;
  margin-bottom: 5%;
  padding-top: 14%;
  text-align: center;
  font-weight: 600;
  font-size: clamp(10px, 5.87vw, 22px);
}
#casestudy ul{
  width: 94%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
#casestudy ul li{
  width: 100%;
  margin-bottom: 3%;
}
#casestudy ul li img{
  width: 100%;
}

/* ----- Renovation ----- */
#renovation{
}
#renovation h3{
  color: #1E5391;
  line-height: 1.9;
  font-weight: 600;
  margin-top: 4.948%;
  text-align: center;
  font-size: clamp(10px, 6.4vw, 24px);
}
#renovation h3 .t01{
  color: #1E5391;
  margin: 0 .25%;
  font-weight: bold;
  font-size: clamp(10px, 9.07vw, 34px);
  background: linear-gradient(transparent 70%, #F6FF00 30%);
}
#renovation h3 .t02{
  color: #FA9601;
  margin: 0 .25%;
  font-weight: 700;
  line-height: 1;
  font-size: clamp(10px, 11.73vw, 44px);
}
#renovation h3 .t03{
  font-weight: 700;
}
#renovation .t04{
  color: #FA9601;
  margin: 2.8646% 0 8%;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
}
#renovation h3 .ls{
  letter-spacing: .06em;
}

/* ----- Reason ----- */
#reason h3{
  text-align: center;
  padding: 8.3333% 0 4%;
  font-size: clamp(10px, 7.47vw, 28px);
}
#reason h3 .t01{
  font-size: clamp(10px, 5.33vw, 20px);
}
#reason h3 .t02{
  color: #176186;
  font-weight: 700;
  padding-left: .65%;
  font-size: clamp(10px, 7.47vw, 28px);
}
#reason .inner{
  width: 100%;
  margin: 4% 0 0;
  padding-bottom: 7%;
  background: #f1fbfd url(../images/bg_rsn_sp.jpg) no-repeat top center;
  background-size: 100%;
}
#reason .inner ul{
  width: 90%;
  margin: 0 auto;
  padding-top: 12%;
}
#reason .inner ul li{
  padding-top: 5.338%;
}
#reason .inner ul li:first-child{
  padding-top: 0;
}
#reason .inner ul li figure{
  width: 58.59375%;
  max-width: 450px;
  margin: 0 auto;
}
#reason .inner ul li figure img{
  width: 100%;
}
#reason .point{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 3.38%;
}
#reason li:nth-child(2) figure{
  order: 1;
}
#reason li:nth-child(2) .point{
  order: 0;
}
#reason li:nth-child(3) .point{
  margin-top: 2.38%;
}
#reason .point .pt{
  width: 23.4375%;
  max-width: 180px;
  margin: 3% 2% 0 0;
}
#reason .point .pt img{
  width: 100%;
}
#reason .point h4{
  color: #1E5391;
  padding: 3.4169% 0 3%;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: clamp(10px, 4.8vw, 18px);
}
#reason .point h4 span{
  font-size: clamp(10px, 6.13vw, 23px);
}
#reason .point .text{
  text-align: justify;
  font-size: clamp(10px, 4.27vw, 16px);
}
#reason .point .text .marker{
  background: linear-gradient(transparent 60%, #F6FF00 40%);
}

/* ----- Product ----- */
#product h3{
  text-align: center;
  padding: 8.3333% 0 4%;
  font-size: clamp(10px, 7.47vw, 28px);
}
#product h3 .t01{
  font-size: clamp(10px, 5.33vw, 20px);
}
#product h3 .t02{
  color: #176186;
  font-weight: 700;
  padding-left: .25%;
  font-size: clamp(10px, 7.47vw, 28px);
}
#product .inner{
  padding-top: 7%;
}
#product .inner ul li{
  background: #C0ECF4;
  padding-top: 4.47916%;
  padding-bottom: 2.08333%;
}
#product .inner ul li:nth-child(2n){
  position: relative;
  width: 100%;
  background: #fff;
  padding-top: 3.48958%;
  padding-bottom: 3.48958%;
}
#product .inner ul li:nth-child(2n)::before{
  content: '';
  position: absolute;
  top: 0;
  left: calc((100% - 14%) / 2);
  display: inline-block;
  width: 14%;
  max-width: 140px;
  min-height: 58px;
  background: url(../images/prd_08.png) no-repeat top center;
  background-size: contain;
}
#product .inner ul li .list_inner{
  width: 90%;
  margin: 0 auto;
  padding-top: 3.48958%;
}
#product .inner ul li .title{
  width: 100%;
}
#product .inner ul li .title p:first-child{
  width: 100%;
  color: #fff;
  font-weight: 700;
  text-align: center;
  background: #6ED8FF;
  border-radius: 4px 4px 0 0;
  font-size: clamp(10px, 4.8vw, 18px);
}
#product .inner ul li .title p:nth-child(2){
  width: 100%;
  color: #1E5391;
  background: #fff;
  font-weight: 700;
  line-height: 1.4;
  padding: 1.25% 1em .5em;
  border: 2px solid #6ED8FF;
  border-radius: 0 0 4px 4px;
  font-size: clamp(10px, 4.53vw, 17px);
}
#product .inner ul li .contents{
  padding: 3.2143% 0 1.0714%;
}
#product .inner ul li .contents figure{
  width: 99.6%;
  margin: 0 auto 3%;
}
#product .inner ul li .contents figure img{
  width: 100%;
}
#product .inner ul li .contents .text{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
#product .inner ul li .contents .text span{
  width: 25%;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  text-align: center;
  padding: 1.75% 0 2.25%;
  font-size: clamp(10px, 4vw, 15px);
}
#product .inner ul li .contents .text p{
  width: 100%;
}
#product .inner ul li .contents .text span:first-child{
  background: #F8CCCC;
}
#product .inner ul li .contents .text span:nth-child(2){
  background: #96A9C8;
  margin: 0 1.25%;
}
#product .inner ul li .contents .text span:nth-child(3){
  width: 29.6015%;
  max-width: 156px;
  background: #E8E116;
}
#product .inner ul li .contents .text p{
  padding-top: 3.221428%;
  text-align: justify;
  font-size: clamp(10px, 4.27vw, 16px);
}
#product .inner ul li .catch{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-top: .5em;
}
#product .inner ul li .catch.center{
  width: 90%;
  margin: 0 auto;
}
#product .inner ul li .catch .icon{
  width: 39.06%;
  max-width: 300px;
}
#product .inner ul li .catch.center .icon{
  width: 41.8%;
  max-width: 321px;
}
#product .inner ul li .catch .icon img{
  width: 100%;
}
#product .inner ul li .catch .text{
  width: 100%;
  color: #1E5391;
  font-weight: 700;
  text-align: center;
  padding-bottom: .5em;
  font-size: clamp(10px, 4.53vw, 17px);
}
#product .inner ul li:nth-child(2n) figure,
#product .inner ul li:nth-child(2n) figure img{
  width: 100%;
}
#product .inner ul li .catch .text span{
  display: inline-block;
  font-size: clamp(10px, 5.07vw, 19px);
  margin-right: .3em;
  line-height: 1;
  vertical-align: -.1em;
}
#product .inner ul li .catch .text span.rev{
  transform: rotate(120deg);
}
#product .inner .picbox{
}
#product .inner .picbox figure:nth-child(1){
  width: 100%;
  margin: 0 auto;
}
#product .inner .picbox figure:nth-child(2){
  width: 100%;
}
#product .inner .picbox figure img{
  width: 100%;
}

/* ----- Flow ----- */
#flow{
  background: #EAEEF2;
  padding: 6.7708333% 0 11.7708333%;
}
#flow .title_line{
  margin: 1.510416% auto;
}
#flow h3{
  color: #1E5391;
  font-weight: 700;
  text-align: center;
  padding: 7% 0 3%;
  font-size: clamp(10px, 7.47vw, 28px);
}
#flow h4{
  width: 90%;
  color: #1E5391;
  font-weight: 700;
  text-align: center;
  margin: 3% auto 0;
  line-height: 1.4;
  font-size: clamp(10px, 4.53vw, 17px);
}
#flow ul{
  width: 90%;
  margin: 3% auto 1.5%;
}
#flow ul li{
  width: 100%;
  margin-top: 6%;
  background: #fff;
  border-radius: 0 24px 24px 24px;
  box-shadow: 0px 4px 10px 4px rgba(0, 0, 0, .2);
}
#flow ul li .num{
  width: 17.968%;
  max-width: 46px;
  color: #fff;
  background: #3182B6;
  border-radius: 0 24px 24px 24px;
}
#flow ul li img{
  width: 100%;
}
#flow .list_inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 94%;
  margin: 0 auto;
  padding: 0 0 .5em;
  box-sizing: border-box;
}
#flow .list_inner figure{
  width: 23%;
  order: 1;
}
#flow .list_inner h5{
  width: 100%;
  color: #3383B7;
  padding: 0 0 0;
  margin: -1.9em 3% 5% 14%;
  line-height: 1.3;
  font-weight: 700;
  box-sizing: border-box;
  font-size: clamp(10px, 4.8vw, 18px);
  order: 0;
}
#flow .list_inner p{
  width: 75%;
  line-height: 1.6;
  padding: 0 0 1.2em;
  font-size: clamp(10px, 4.27vw, 16px);
  order: 2;
}

/* ----- Case ----- */
#case{
  padding: 4% 0 0;
}
#case .title_line{
  margin: 1.510416% auto;
}
#case h3{
  color: #1E5391;
  font-weight: 700;
  text-align: center;
  padding: 7% 0 3%;
  font-size: clamp(10px, 7.47vw, 28px);
}
#case h4{
  color: #1E5391;
  font-weight: 700;
  text-align: center;
  margin: 3% 0 5%;
  font-size: clamp(10px, 4.53vw, 17px);
}
#case .splide{
  width: 100%;
  background: #EAEEF2;
  margin-top: 1.875%;
}
#case .splide__track{
  position: relative;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  padding: 4.75% 10% !important;
}
#case .splide__arrow svg{
  position: absolute;
  top: .3%;
  right: -2.5%;
  display: block;
  height: 35px;
  background: #1e5391;
  fill: #1e5391;
  clip-path: polygon(0 0, 55% 50%, 0 100%) !important;
  z-index: 10;
}
#case .splide__arrow.splide__arrow--prev svg{
  right: 10%;
  transform: rotate(180deg);
}
#case .splide__track .splide__list{
  display: flex;
  align-items: center;
  width: 100%;
  border-left: 1px solid #ccc !important;
  border-right: 1px solid #ccc !important;;
  box-shadow: inset 2px 7px 14px 0 rgba(0, 0, 0, .25);
}
#case .splide__track .splide__list li{
  width: 100% !important;
  margin-right: 5%;
  background: #fff;
  border-radius: 24px;
  box-shadow: 3px 8px 14px 0 rgba(0,0,0,.25);
}
#case .splide__track .splide__list li img{
  width: 100%;
}
#case .list_inner{
  width: 100%;
  text-align: left;
  font-size: clamp(10px, 4vw, 15px);
}
#case .list_inner p{
  line-height: 1.6;
}
#case .list_inner h5{
  color: #fff;
  text-align: center;
  background: #1E5391;
  padding: .75em .5em;
  font-weight: 700;
  border-radius: 24px 24px 0 0;
  font-size: clamp(10px, 4.27vw, 16px);
}
#case .list_inner .area_01{
  padding: .65em;
}
#case .list_inner .area_01 span{
  display: block;
  box-sizing: border-box;
}
#case .list_inner .area_01 span:nth-child(1){
  color: #fff;
  text-align: center;
  width: 100%;
  padding: .15em .5em .2em;
  background: #58595d;
  border-radius: 48px;
  box-sizing: border-box;
}
#case .list_inner .area_01 span:nth-child(2){
  padding-top: .25em;
  line-height: 1.5;
}
#case .list_inner figure img{
  width: 100%;
}
#case .list_inner .area_02{
  padding: .65em;
  box-sizing: border-box;
}
#case .list_inner .area_02 .point{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .9em;
}
#case .list_inner .area_02 .point span:nth-child(1){
  color: #fff;
  text-align: center;
  width: 65%;
  padding: .15em .5em .2em;
  background: #FA9601;
  border-radius: 48px;
}
#case .list_inner .area_02 .point span:nth-child(2){
  width: 30%;
  line-height: 1.5;
  text-align: right;
}
#case .list_inner .area_02 h6{
  color: #FA9601;
  font-weight: 700;
  padding-bottom: .6em;
  font-size: clamp(10px, 4.27vw, 16px);
}
#case .list_inner .area_03{
  padding: .65em .65em .5em;
  background: #EAEEF2;
}
#case .list_inner .area_03 dl{
  width: 100%;
  margin-bottom: .5em;
  letter-spacing: -.05em;
  font-size: clamp(10px, 3.33vw, 12.5px);
}
#case .list_inner .area_03 dl dt{
  float: left;
  width: 44%;
}
#case .list_inner dt::before{
  content: '';
  display: inline-block;
  width: 11px;
	height: 11px;
	border-radius: 50%;
  margin-right: 3%;
  background: #45464B;
  vertical-align: 0;
}
#case .list_inner dd::before{
  content: '：';
  display: inline-block;
  margin-right: 2%;
}
#case .list_inner .area_04{
  padding: .65em;
}
#case .list_inner .area_04 p{
  padding: .5em 1em;
  line-height: 1.4;
  border-radius: 20px;
  border: 2px solid #D9D9D9;
  font-size: clamp(10px, 4vw, 15px);
}
#case .list_inner .area_04 span{
  font-weight: 800;
}

/* ----- Voice ----- */
#voice{
  padding: 4% 0 0;
}
#voice .title_line{
  margin: 1.510416% auto;
}
#voice h3{
  color: #1E5391;
  font-weight: 700;
  text-align: center;
  padding: 7% 0 3%;
  font-size: clamp(10px, 7.47vw, 28px);
}
#voice h4{
  color: #1E5391;
  font-weight: 700;
  text-align: center;
  margin: 3% 0 5%;
  line-height: 1.4;
  font-size: clamp(10px, 4.53vw, 17px);
}
#voice .inner{
  margin-top: 1.875%;
}
#voice .inner ul{
  width: 100%;
  background: #EAEEF2;
}
#voice .inner ul li{
  width: 100%;
  padding: 5% 0;
}
#voice .inner ul li:nth-child(2n){
  background: #fff;
}
#voice .inner .contents{
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  margin: 0 auto;
}
#voice .inner .contents .pic_area{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
#voice .inner .contents .pic_area figure{
  width: 48%;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.5);
}
#voice .inner .contents .pic_area figure:nth-child(2){
  margin-bottom: 0;
}
#voice .inner .contents .pic_area figure img{
  width: 100%;
}
#voice .inner .contents .text_area{
  width: 100%;
}
#voice .inner .contents .text_area p:nth-child(1){
  color: #3383B7;
  font-weight: 700;
  padding: 4.10714% 0;
  line-height: 1.4;
  text-align: center;
  font-size: clamp(10px, 5.07vw, 19px);
}
#voice .inner .contents .text_area p:nth-child(2){
  padding: 1em 1.25em;
  background: #fff;
  border-radius: 12px;
  text-align: justify;
  font-size: clamp(10px, 4.27vw, 16px);
}
#voice .inner ul li:nth-child(2n) .contents .text_area p:nth-child(2){
  background: #EAEEF2;
}
#voice .voice_btn{
  padding: 1.5em .25em;
  background: #EAEEF2;
}
#voice .voice_btn a{
  display: block;
  color: #fff;
  width: 90%;
  margin: 0 auto .25em;
  padding: .5em;
  text-align: center;
  background: #1E5391;
  box-sizing: border-box;
  border-radius: 16px;
  border: 3px solid #fff;
  font-size: clamp(10px, 4.8vw, 18px);
  box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}
/* ----- Faq ----- */
#faq{
  padding: 4% 0 6%;
}
#faq h3{
  color: #1E5391;
  font-weight: 700;
  text-align: center;
  padding: 7% 0 3%;
  font-size: clamp(10px, 7.47vw, 28px);
}
#faq .title_line{
  margin: 1.510416% auto;
}
#faq .lead{
  width: 90%;
  margin: 1.35em auto 0;
  color: #1E5391;
  font-weight: 700;
  text-align: justify;
  line-height: 1.35;
  letter-spacing: -.02em;
  font-size: clamp(10px, 3.6vw, 13.5px);
}
#faq .inner{
  width: 90%;
  margin: 4.375% auto 0;
}
#faq .inner .faq_menu{
  width: 100%;
  margin-bottom: .75em;
}
#faq .inner .faq_menu ul{
}
#faq .inner .faq_menu ul li{
  width: 100%;
  padding: 0;
  border: none;
  margin-bottom: .25em;
  box-sizing: border-box;
}
#faq .inner .faq_menu ul li a{
  display: block;
  color: #fff;
  padding: .9em 0 .65em;
  font-weight: 500;
  text-align: center;
  background: #1E5391;
  border-radius: 50px;
  font-size: clamp(10px, 4vw, 15px);
}
#faq .inner .faq_menu ul li a::before{
  content: '';
  width: 32px;
  height: 29px;
  display: inline-block;
  vertical-align: middle;
  margin-right: .5em;
}
#faq .inner .faq_menu ul li:nth-child(1) a::before{
  background: url(../images/faq_icon_01.png) no-repeat;
  background-size: contain;
}
#faq .inner .faq_menu ul li:nth-child(2) a::before{
  background: url(../images/faq_icon_02.png) no-repeat;
  background-size: contain;
}
#faq .inner .faq_menu ul li:nth-child(3) a::before{
  background: url(../images/faq_icon_03.png) no-repeat;
  background-size: contain;
}
#faq .inner .faq_menu ul li:nth-child(4) a::before{
  background: url(../images/faq_icon_04.png) no-repeat;
  background-size: contain;
}
#faq .inner h4{
  padding: 1em;
  color: #1E5391;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  border-radius: 10px 10px 0 0;
  border-top: 3px solid #367FA4;
  border-left: 3px solid #367FA4;
  border-right: 3px solid #367FA4;
  font-size: clamp(10px, 4.27vw, 16px);
  background: linear-gradient(0deg, rgba(250, 150, 1, 0), rgba(250, 150, 1, 0.3));
}
#faq .inner h4::after{
  content: '';
  width: 32px;
  height: 29px;
  display: inline-block;
  vertical-align: middle;
}
#faq .inner #ctg1 h4::after{
  background: url(../images/faq_icon_01_b.png) no-repeat;
  background-size: contain;
}
#faq .inner #ctg2 h4::after{
  background: url(../images/faq_icon_02_b.png) no-repeat;
  background-size: contain;
}
#faq .inner #ctg3 h4::after{
  background: url(../images/faq_icon_03_b.png) no-repeat;
  background-size: contain;
}
#faq .inner #ctg4 h4::after{
  background: url(../images/faq_icon_04_b.png) no-repeat;
  background-size: contain;
}
#faq .inner ul{
  width: 100%;
}
#faq .inner #ctg1,
#faq .inner #ctg2,
#faq .inner #ctg3,
#faq .inner #ctg4{
  padding-bottom: 1em;
}
#faq .inner #ctg1 ul li,
#faq .inner #ctg2 ul li,
#faq .inner #ctg3 ul li,
#faq .inner #ctg4 ul li{
  width: 100%;
  padding: 1em 0;
  border-bottom: 1px solid #DAE9F6;
}
#faq .inner #ctg1 ul li:first-child,
#faq .inner #ctg2 ul li:first-child,
#faq .inner #ctg3 ul li:first-child,
#faq .inner #ctg4 ul li:first-child{
  border-top: none;
}
#faq .inner #ctg1 ul li:last-child,
#faq .inner #ctg2 ul li:last-child,
#faq .inner #ctg3 ul li:last-child,
#faq .inner #ctg4 ul li:last-child{
  border-bottom: none;
}
#faq .inner ul li h5{
  display: flex;
  color: #1E5391;
  font-weight: 700;
  line-height: 1.45;
  padding-bottom: 2.85714%;
  font-size: clamp(10px, 4.27vw, 16px);
}
#faq .inner ul li h5::before{
  content: '';
  display: inline-block;
  min-width: 54px;
  min-height: 54px;
  margin-right: .5em;
  background: url(../images/faq_01.png) no-repeat top center;
  background-size: contain;
}
@media screen and (max-width: 1420px){
  #faq .inner ul li h5::before{
    min-width: 40px;
    min-height: 40px;
  }
}
@media screen and (max-width: 960px){
  #faq .inner ul li h5::before{
    min-width: 28px;
    min-height: 28px;
  }
}
#faq .inner ul li p{
  padding: 0 .25em;
  font-size: clamp(10px, 4vw, 15px);
}

/* ----- Support ----- */
#support{
  width: 100%;
  background: #EAEEF2;
}
#support .contents{
  padding: 4.791666% 0;
  background: #1367B1;
}
#support .contents p{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
  color: #fff;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  font-size: clamp(10px, 4vw, 15px);
}
#support .contents p::before,
#support .contents p::after{
  content: '';
  display: block;
  width: 6.5104%;
  max-width: 50px;
  height: 1px;
  background: #fff;
}
#support .text{
  width: 94%;
  margin: 5% auto 0;
  padding-bottom: 4.5%;
}
#support .text h3{
  display: block;
  color: #1E5391;
  line-height: 1.7;
  text-align: center;
}
#support .text span.marker{
  font-weight: 800;
  font-size: clamp(10px, 6.67vw, 25px);
  background: linear-gradient(transparent 60%, #F6FF00 40%);
}
#support .text span.t01{
  font-weight: 800;
  line-height: 1.4;
  padding-bottom: .5%;
  font-size: clamp(10px, 6.67vw, 25px);
}
#support .text span.t02{
  color: #FA9601;
  font-weight: 900;
  line-height: 1.4;
  padding-bottom: .5%;
  font-size: clamp(10px, 9.87vw, 37px);
}
#support .text span.t03{
  line-height: 1.4;
  font-weight: 700;
  padding-bottom: .5%;
  font-size: clamp(10px, 6.67vw, 25px);
}

/* ----- Footer ----- */
footer{
  width: 100%;
  background: #1E5391;
}
footer .contents{
  width: 100%;
  margin: 3% auto 0;
  padding: 0 5% 3%;
  background: #fff;
  box-sizing: border-box;
}
footer .contents .inner{
  width: 100%;
  margin-top: .5em;
  padding: .75em 0;
  align-items: flex-end;
  border-top: 2px solid #ddd;
}
footer .contents img{
  width: 100%;
}
footer .contents .area_01{
  width: 100%;
}
footer .contents .area_01 .area_01_inner{
  display: flex;
  justify-content: space-between;
}
footer .contents .area_01 .area_01_inner p{
  width: 20%;
}
footer .contents .area_01 .area_01_inner span{
  display: block;
  width: 78%;
  color: #e60012;
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: clamp(10px, 10.13vw, 38px);
}
footer .contents .area_01 p{
  font-weight: 600;
  line-height: 1;
  padding: 0 0 .55em;
  letter-spacing: -.03em;
  font-size: clamp(10px, 4.4vw, 16.5px);
}
footer .contents .area_02{
  width: 100%;
}
footer .contents .area_02 p{
  line-height: 1.4;
  font-size: clamp(10px, 4vw, 15px);
}
footer p.copy{
  color: #fff;
  max-height: 85px;
  text-align: center;
  background: #1E5391;
  padding: 4% 0 26%;
  letter-spacing: .06em;
  font-size: clamp(11px, 3.2vw, 12px);
}

/* ----- Pagetop ----- */
#pagetop{
  position: fixed;
  right: 0;
  bottom: 8.6%;
  line-height: 1;
  z-index: 99;
  padding: .35em 0 .35em;
  background: rgba(46, 83, 141, .6);
}
@media screen and (max-width: 375px){
  #pagetop{
    bottom: 10.2%;
  }
}
#pagetop a{
  display: block;
  width: 20px;
  height: 20px;
  margin: 10px 10px 0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
  box-sizing: border-box;
}

/* ----- お問い合わせ常駐 ----- */
#fixed-action-wrap{
  width: 100%;
  padding: .7em 2em;
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16);
}
#fixed-action-wrap .tel-wrap,
#fixed-action-wrap .contact-wrap{
  width: 48.4%;
}
#fixed-action-wrap .tel-wrap .opentime{
  font-size: clamp(10px, 3.07vw, 11.5px);
}
#fixed-action-wrap .tel-wrap .tel{
  width: 98%;
}
#fixed-action-wrap .tel-wrap .tel img{
  width: 100%;
}
#fixed-action-wrap .contact-wrap a{
  display: block;
  color: #fff;
  margin-left: .35em;
  padding: 1em .55em 1.1em;
  font-weight: 600;
  text-align: center;
  background: #005BAC;
  box-sizing: border-box;
  border-radius: calc(1px / 0);
  font-size: clamp(10px, 3.47vw, 13px);
}
#fixed-action-wrap .contact-wrap a::before{
  content: '';
  width: 17px;
  height: 12px;
  display: inline-block;
  margin-right: .8em;
  vertical-align: middle;
  background: url(../images/icon_mailbox.png) no-repeat center center;
  background-size: contain;
}

/*
#fixed-action-wrap{
	width: 100%;
        padding: 2.8vw 8vw;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 50;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: end;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16);
}
#fixed-action-wrap>*{
        width: calc((100% - 3vw) / 2);
}
#fixed-action-wrap .tel-wrap{
        display: flex;
        justify-content: center;
        gap: 0.3em;
}
#fixed-action-wrap .tel-wrap p.opentime{
        font-weight: 600;
        font-size: clamp(10px, 0.78vw, 15px);
}
#fixed-action-wrap .tel-wrap p.tel a{
}
#fixed-action-wrap .tel-wrap p.tel img{
}
#fixed-action-wrap .contact-wrap{
        border-radius: calc(1px / 0);
        background: #ffffff;
        overflow: hidden;
}
#fixed-action-wrap .contact-wrap a{
        color: #ffffff;
        background: #005BAC;
        max-width: 240px;
        font-size: 100%;
        font-weight: 600;
        text-align: center;
        letter-spacing: 0.075em;
        letter-spacing: 0;
        padding: 2.8vw 0;
        border-radius: calc(1px / 0);
        position: relative;
}
#fixed-action-wrap .contact-wrap a:before{
	content: "";
        display: inline-block;
        width: 3.8vw;
        aspect-ratio: 1 / 1;
        background: url(../images/icon_mailbox.png) no-repeat center center;
        background-size: contain;
        vertical-align: middle;
        margin-right: 0.8em;
}
*/