@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
common
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* ----------------------------------------------------
element base setting (common)
---------------------------------------------------- */
body {color: #333333; line-height: 1.6; background: #fff;}
a { text-decoration: none;}
.clickable a, .clickable a:hover { color: #333;}
.flex {display: flex; display: -webkit-flex; }

/* common */
.inner {width: 90%; max-width: 1440px; margin-left: auto; margin-right: auto; }
.imgAlt {  position: absolute !important;  width: 1px !important;  height: 1px !important;  padding: 0 !important;  margin: -1px !important;  overflow: hidden !important;  clip: rect(0, 0, 0, 0) !important;  white-space: nowrap !important;  border: 0 !important;}

/* ----------------------------------------------------
header (common)
---------------------------------------------------- */
#header {background: #fff; position: relative; padding: min(1.25vw , 15px) 0 min(5vw , 60px);}
#hd__logo {position: absolute; left: min(3%, 40px); top: min( 1.66vw, 20px); width: min(7vw, 115px);}
.hd__txt{ justify-content: center; align-items: flex-end; column-gap: min(2.5vw , 30px);}
.hd__txt--01 {width: min(27.5vw, 330px);}
.hd__txt--02 {width: min(46.67vw, 560px);}


/* ----------------------------------------------------
CTA
---------------------------------------------------- */
.CTA {background: url("../img/CTA-bg-01.svg") center center / cover no-repeat; padding: min(1.66vw , 20px) min(5%, 140px) min(5vw, 60px); text-align: center;}
.CTA h2 {width: 90%;  max-width: 800px; margin: 0 auto min(2.5vw , 30px);}
.btnCTA {width: 100%;  max-width: 800px; margin: 0 auto; background: #fff;border-radius: min(0.83vw , 10px); }
.btnCTA a {background: #ff7f00; display: block; border-radius: min(0.83vw , 10px); padding: min(3vw , 25px); border-bottom: 3px solid #dd6900;}
.btnCTA a  img {width: min(24vw , 290px);}

@media (max-width: 768px) {
	.CTA h2 {margin: 0 auto min(4vw , 30px);}
	.btnCTA a  img {width: min(38vw , 290px);}
}

/* ----------------------------------------------------
body
---------------------------------------------------- */
/* mv */
#homMV {background: #e5f4fc; padding: min(9.17vw, 110px) min(5%, 140px); position: relative; justify-content: space-between; align-items: flex-end;}
.homMV__icon {position: absolute; right:3%; top: 0; transform: translateY(-25%); width: min(18vw , 240px);}
.homMV__cont__txt {width: 55%; font-size: min(2vw , 2.4rem);}
.homMV__cont__img {width: 40%;}
.homMV__cont__txt .homMV__catch {margin-bottom: min(5vw , 60px);}

@media (max-width: 768px) {
	#homMV{display: block; padding: min(12vw, 110px) min(5%, 140px); }
	.homMV__cont__txt {width: 100%; font-size: min(4.6vw , 2.4rem);}
	.homMV__cont__img {width: 90%; margin: min(6vw , 50px) auto 0;}
}

/* problem  */
#homProblem {background: rgb(0,159,232); background: linear-gradient(35deg, rgba(0,159,232,1) 0%, rgba(29,32,135,1) 100%); padding: min(8.3vw , 100px) 0 min(5vw , 60px); }
.homProblem__title {max-width: 1220px; margin: 0 auto;}
.homProblem__block{margin: min(10vw , 120px) auto; }
.homProblem__block h3 {max-width: 750px; width: 80%; margin: 0 auto min(3.3vw , 40px);}
.homProblem__solution {position: relative; background: #fff; border-radius: min(1.25vw , 15px); margin-top: min( 8.3vw	, 120px); padding: min(8.3vw , 100px) min(5vw , 60px) min(6.6vw , 80px);}
.homProblem__solution__catch {position: absolute; left: 0; top: 0; width: min(40vw, 608px); transform: translate(-10%, -50%);}
.homProblem--01 .homProblem__solution::before {content: ""; height: 90%; aspect-ratio: 94/75; background: url("../img/problem-closing-02.svg") center center / contain no-repeat; position: absolute; right: min(2.5vw , 30px); top: 50%; transform: translateY(-50%);}
.homProblem__read {font-size: min(2.92vw , 3.5rem); line-height: 1.5; font-weight: 800;}
.homProblem__read span {font-size: min(4.4vw , 5rem); color: #ff7f00; font-weight: 900;}
.homProblem__read em {font-size: min(3.3vw , 4rem); font-style: normal; background:linear-gradient(transparent 60%, #ff6 60%);}
.homProblem--01 .homProblem__read {width: 80%; margin:  0 auto;}
.homProblem--02 .homProblem__read {text-align: center;}


@media (max-width: 1320px) {
	.homProblem--01 .homProblem__read {width:100%;}
}
@media (max-width: 768px) {
	.homProblem__solution {margin-top: min( 15vw	, 80px); padding: min(12vw , 100px) min(5vw , 60px) min(6.6vw , 80px);}
	.homProblem__solution__catch {width: min(60vw, 608px);transform: translate(-5%, -50%); }
	.homProblem__read{text-align: center; font-size: min(4.5vw , 3.5rem);}
	.homProblem__read span {font-size: min(6vw , 5rem); }
	.homProblem__read em {font-size: min(5vw , 4rem); }
	.homProblem--01 .homProblem__solution::before {content: none;}
	.homProblem__img {width: 70%; margin: min(4vw , 30px) auto 0 ;}
}

/* service */
#homService {padding: min(11.67vw , 140px) 0;}
.homService__other {margin: min(6.6vw, 80px) auto;}
.homService__other h3 {font-weight: 900; color: #666666; font-size: min(4vw , 48px); margin-bottom: min(2.5vw , 30px); line-height: 1.4;}
.homService__hakenchu {margin: min(8.3vw, 100px) auto 0;}
.homService__hakenchu h3 {width: 80%; max-width: 690px; margin: 0 auto min(6.6vw , 80px);}

@media (max-width: 768px) {
.homService__other h3 { font-size: min(6vw , 48px); margin-bottom: min(5vw , 30px);}
}

/* voice */
#homVoice  {padding: min(8.3vw , 100px) 0; background: #eaf8f9;}
.homVoice__title {display: block; width: min( 24vw, 290px); margin: 0 auto;}
.homTitle {text-align: center; font-weight: 900; font-size: min( 5vw, 6rem); }
.homVoice__flex {column-gap: 2%; flex-wrap: wrap;}
.homVoice {width: 31%; display: flex; display: -webkit-flex; flex-direction: column; margin-top: 5%;}
.homVoice__txt {border: 2px solid #1cb8d1; background: #fff; border-radius: min( 0.83vw, 10px); padding: min( 2.5vw, 30px); position: relative; flex-grow: 1;}
.homVoice__txt::before{content: ""; background: url("../img/voice-fukidashi-01.svg") center center / contain no-repeat; aspect-ratio: 58/75; width: min(1.9vw , 23px); position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 80%);}
.homVoice__img {margin: min( 2.5vw, 30px) auto min(1.25vw , 15px); text-align: center;}
.homVoice__img img {width: auto; height: min( 12.5vw, 150px);}
.homVoice__business {text-align: center; color: #1cb8d1;  }

@media (max-width: 768px) {
.homVoice {width: 49%; }
.homVoice__txt {font-size: min(4vw , 1.6rem); border-radius: min( 2vw, 10px); padding: min( 4vw, 30px); }
.homVoice__business {font-size: min(3.2vw , 1.4rem); }
}
@media (max-width: 470px) {
.homVoice {width: 100%; }
}

/* faq */
#homFaq  {padding: min(8.3vw , 100px) 0;}
#homFaq .homTitle {margin-bottom: min(4.4vw , 50px);}
.homFaq__flex {display: flex; justify-content: space-between; flex-wrap: wrap;}
.homFaq {width: 48%; margin-top: 3%; display: flex; flex-direction: column;}
.homFaq--Q, .homFaq--A {padding: min(1.66vw , 20px) min(1.66vw , 20px) min(1.66vw , 20px) min(6.6vw , 80px); position: relative; line-height: 1.4; display: flex; align-items: center;}
.homFaq--Q {background: #0066cc; flex-grow: 1; border-radius: min( 0.83vw, 10px) min( 0.83vw, 10px) 0 0; color: #fff; min-height:  min(6vw, 80px);}
.homFaq--A {background: #e1eff9; flex-grow: 1;  border-radius:  0 0 min( 0.83vw, 10px) min( 0.83vw, 10px); min-height:  min(10vw, 120px);}
.homFaq__icon { position: absolute; left:min(2.5vw , 30px) ; top: 50%; transform: translateY(-50%); font-size: min(3vw , 3.6rem);}
.homFaq--A .homFaq__icon {color: #0066cc;}

@media (max-width: 768px) {
.homFaq {width: 100%;}
.homFaq--Q, .homFaq--A {padding: min(4vw , 20px) min(4vw , 20px) min(4vw , 20px) min(15vw , 80px); }
.homFaq__icon { left:min(6vw , 30px) ;  font-size: min(7vw , 3.6rem);}
.homFaq--Q { border-radius:  min( 2vw, 10px) min( 2vw, 10px) 0 0; }
 .homFaq--A {border-radius:  0 0 min( 2vw, 10px) min( 2vw, 10px) ; }
}

/* form */
#homForm {background: #f3f3f3; border-top: 5px solid #1cb8d1;padding: min(6.6vw , 80px) 0;}
.homForm__title {display: block; margin: 0 auto; width: 80%; max-width: 700px; margin-bottom: min(4.4vw, 50px);}
.form__wrapper {background: #fff; padding: min(5vw , 80px); margin-top: min( 3.3vw, 40px);}
.tblForm {width: 100%; table-layout: fixed; }
.tblForm tr {border-bottom: 1px solid #ccc;}
.tblForm th {width: 20%; text-align: left; padding: min(1.66vw , 20px) min(1.25vw , 15px); }
.tblForm td {padding: min(1.66vw , 20px) min(1.25vw , 15px);}
.tblForm input {border: 1px solid #aaa; padding: 10px; outline: none;}
.inputA {width: 60%;}
.inputB {width: 100%;}
.inputC {width: 20%; margin-right: min(1.25vw, 15px);}
.tblForm textarea {border: 1px solid #aaa; padding: 10px; outline: none; width: 100%; height: min(16.6vw , 200px);}
.fotmText {text-align: center; margin-top: min(2.5vw , 30px); font-size: min( 1.25vw, 1.5rem);}
span.wpcf7-list-item{margin-right: min(1.25vw , 15px);}
.formSubmit {margin: min(5vw , 60px) auto min(3vw , 30px); text-align: center;}
.formSubmit input {width: 100%; max-width: 280px; padding: min(1.66vw , 20px); border: none; background: #ff7f00 ; color: #fff; font-weight: 800; border-radius: min(0.83vw , 10px);}
input[type="checkbox"] {margin-right: 5px;}
span.wpcf7-not-valid-tip {display: block; color: red; font-size: 80%;}
.screen-reader-response, .wpcf7-response-output {color: red;}

footer {background: #333; color: #fff; text-align: center; padding: min(3.3vw , 40px) 5%; font-size: 1.2rem;}

@media (max-width: 768px) {
.tblForm th, .tblForm td {width: 100%; display: block; padding: min(3vw , 20px) min(3vw , 15px); }
.tblForm th {background: #eee;}
.tblForm td {padding: min(3vw , 20px) 0; }
.inputA , .inputB{width: 100%;}
.inputC {width: 30%; margin-right: min(2vw, 15px);}
.fotmText { margin-top: min(5vw , 30px); font-size: min( 3.4vw, 1.5rem);}
.tblForm textarea {height: min(40vw , 200px);}
span.wpcf7-list-item  {display: block; margin: min(2vw , 10px) 0;}
.formSubmit input {padding: min(4vw , 20px);  border-radius: min(2vw , 10px);}
}

/* ----------------------------------------------------
footer (common)
---------------------------------------------------- */
#pagetop {position: fixed;bottom: 4%; right: 3%;}
#pagetop a {display:block;  width: 50px;	height: 50px;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  border-radius: 50%;  background-color: #333;  text-align:center;  color: #fff;}
#pagetop a::before {content: ""; width: min(1vw, 12px); aspect-ratio: 1/1; border-top: 2px solid #fff; border-right: 2px solid #fff; position: absolute; left: 50%; top: 50%; transform-origin: center center; transform: translate(-50%, -50%) rotate(-45deg);}

@media (max-width: 768px) {
#pagetop a::before {width: min(4vw, 12px); }

}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
pcSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width:768px) {
	a:hover, .clickable:hover {  opacity: 0.8;transition: all 0.2s ease-in-out;}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
tabletSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 1200px) and (min-width: 768px) {
}

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
spSetting
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 768px) {
}