@charset "utf-8";
@import url('components.css');

/* 基本設定 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html, body{ font-size:18px; -webkit-text-size-adjust:none; }
a {text-decoration:none;color:#06c; }
a:hover{text-decoration:none;color:#09f;}
a:hover img { opacity: 0.75; }
img{ max-width:100%; }

header { position: absolute; left: 0; top:0; width: 100%; display: flex; align-items: center; justify-content: space-between; }
header .logo { margin: 0 20px; }
header dl { display: flex; }
header dl dt { width: 340px; line-height: 1; padding: 0 40px; display: flex; align-items: center; justify-content: center; text-align: center; flex-wrap: wrap; font-size: 1.9rem; background: #fff; }
header dl dt em { line-height: 1; }
header dl dt small { line-height: 1; display: block; font-size: 0.688rem; text-align: center; margin: 4px 0 0; }
header dl dd { display: flex; align-items: center; justify-content: center; text-align: center; flex-wrap: wrap; font-size: 1.250rem; background: #fff; }
header dl dd a { font-weight: bold; line-height: 1; padding: 35px; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; flex-wrap: wrap; font-size: 1.250rem; background: #56DEDE; transition: background .3s; }
header dl dd a:hover { background: #2BEBB0; color: #fff; }

.kv { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; padding: 90px 50px 0; background: url(/static/images/kv_bg.png) center center/cover no-repeat; background-attachment: fixed; box-shadow: inset 0 -30px 60px rgba(0,0,0,.3); }
.kv dl { display: flex; align-items: center; justify-content: center; }
.kv dl dt { margin: 0 30px 0 0; }

.information { padding: 30px; background:#56DEDE; }
.information > .inr { max-width:1000px; margin:0 auto; background:#fff; padding:30px; box-shadow:1px 1px 3px rgba(0,0,0,.1); }
.information > .inr h2 { text-align: center; font-size: 2rem; line-height: 1; margin: 0 auto 30px; padding:20px 0; color:#009FAB; }
.information > .inr .inr { margin: 0 auto; border-top:1px solid rgba(0,0,0,.2); }
.information > .inr .inr dl { text-align:left;  border-bottom:1px solid rgba(0,0,0,.2); display: flex; padding: 20px 0; }
.information > .inr .inr dl dt { line-height:1.4;  text-align:left; width: 8rem; font-weight:bold; }
.information > .inr .inr dl dd { line-height:1.4; text-align:left;  width: calc(100% - 8rem); font-weight:bold; }

.trouble { padding: 80px 0; }
.trouble ul { max-width: 1000px; padding: 0 10px; display: flex; justify-content: space-between; margin: 0 auto; }
.trouble ul li { width: calc((100% - 80px) / 3); padding: 30px 0; letter-spacing: .05em; position: relative; display: flex; align-items: center; justify-content: center; background: #ACD2D2; color:#114D4D; font-weight: bold; text-align: center; line-height: 1.4; border-radius: 20px; font-size: 1.500rem; }
.trouble ul li::before { content: ""; position: absolute; top:-50px; left: 0; }
.trouble ul li:nth-of-type(1)::before { content: url(/static/images/ico_q.svg); }
.trouble ul li:nth-of-type(2)::before { content: url(/static/images/ico_t.svg); left: calc(50% - 23px); }
.trouble ul li:nth-of-type(3)::before { content: url(/static/images/ico_w.svg); top: -30px; right: 0; left: auto; }

.about {}
.about h2 { font-weight: bold; text-align: center; letter-spacing: .05em; font-size: 2.625rem; line-height: 1.4; margin: 0 auto 80px; }
.about h2 small { font-weight: bold; display: block; text-align: center; letter-spacing: .05em; font-size: 1.25rem; color: #56DEDE; line-height: 1.4; }
.about .inr { background: #F9F9F9; text-align: center; padding: 60px 15px; }
.about .inr li { background: #F9F9F9; text-align: center; }

.contactbtn { background: #56DEDE; padding: 60px 10px; }
.contactbtn h3 { color: rgba(0,0,0,.8); text-align: center; font-size: 1.5rem; line-height: 1.6; margin: 0 0 30px; font-weight: bold; }
.contactbtn ul li { max-width: 800px; text-align: center; padding: 0 0 30px; margin: 0 auto; border-bottom: 1px solid rgba(255,255,255,.25); }
.contactbtn ul li a { max-width: 570px; display: block; padding: 15px; margin: 0 auto; box-shadow: 5px 10px 20px rgba(0,0,0,.16); border-radius: 100px; font-size: 1.5rem; font-weight: bold; color: rgba(0,0,0,.8); background: #f2de2f; text-align: center; transition: background .3s; }
.contactbtn ul li a:hover { background:#F2CB2F; }
.contactbtn dl { padding: 30px 0 0; }
.contactbtn dl dt { text-align: center; font-size:1.125rem; margin: 0; font-weight: bold; }
.contactbtn dl dd { text-align: center; font-size:3.875rem; margin: 0; font-family: Arial; line-height: 1; letter-spacing: .03em; }
.contactbtn dl dd small { display: block; text-align: center; font-size:1.125rem; margin: 0 0 10px; line-height: 1; font-weight: bold; margin: 5px auto 0; }

.imgWrap ul { display: flex; }
.imgWrap ul li { width: 50%; }
.imgWrap ul li img { width: 100%; }

.service { padding: 80px 0; }
.service h2 { font-weight: bold; text-align: center; letter-spacing: .05em; font-size: 2.625rem; line-height: 1.4; margin: 0 auto 80px; }
.service h2 small { font-weight: bold; display: block; text-align: center; letter-spacing: .05em; font-size: 1.25rem; color: #56DEDE; line-height: 1.4; }
.service .inr { max-width: 1280px; margin: 0 auto; padding: 0 10px; display: flex; justify-content: space-between; }
.service .inr .cont { width: calc((100% - 60px) / 3); background: #f6f6f6; border-radius: 17px; padding: 30px; }
.service .inr .cont:nth-of-type(1) { background: #56DEC7; }
.service .inr .cont:nth-of-type(2) { background: #56DEDE; }
.service .inr .cont:nth-of-type(3) { background: #56C7DE; }
.service .inr .cont h3 { letter-spacing: .05em; text-align: center; font-size:1.563rem; line-height: 1; vertical-align: bottom; font-weight: bold; margin: 0 auto 10px; }
.service .inr .cont h3 em { letter-spacing: .05em; vertical-align: bottom; font-size:2.5rem; line-height: 1; font-weight: bold; }
.service .inr .cont h4 { text-align: center; font-size: 1.625em; font-weight: bold; line-height: 1.4; margin: 0 auto 20px; }
.service .inr .cont p { font-size: 1.125rem; text-align: center; }
.service .inr .cont ul li { width: 100%; height: 290px; display: flex; align-items: center; justify-content: center; margin: 60px auto 30px; text-align: center;  }

.price { padding: 80px 0; background: #F9F9F9; }
.price h2 { font-weight: bold; text-align: center; letter-spacing: .05em; font-size: 2.625rem; line-height: 1.4; margin: 0 auto 80px; }
.price h2 small { font-weight: bold; display: block; text-align: center; letter-spacing: .05em; font-size: 1.25rem; color: #56DEDE; line-height: 1.4; }

.pricegraf { display: flex; justify-content: center; margin: 0 auto 80px; background: url(/static/images/ico_plus.svg) center center no-repeat; }
.pricegraf .cont { width: 300px; height: 240px; display: flex; align-items: center; justify-content: center; border:6px solid #56DEDE; padding: 15px; border-radius: 30px; background: #fff; margin: 0 40px; text-align: center; }
.pricegraf h3 { font-size: 1.5rem; letter-spacing: .05em; font-weight: bold; line-height: 1; margin: 0 0 5px; }
.pricegraf h4 { font-size:1.250rem; letter-spacing: .05em; font-weight: bold; color: #FF2DA4; line-height:1; margin: 0 0 5px; }
.pricegraf p { font-size:1rem; line-height: 1.4; font-weight: bold; margin: 0 0 5px; }
.pricegraf ul li { vertical-align: bottom; line-height: 1; font-size: 1.188rem; font-weight: bold; color: #FF2DA4; }
.pricegraf ul li em { vertical-align: bottom; line-height: 1; font-size: 3rem; font-weight: bold; color: #FF2DA4; font-family: Arial; position: relative; top:1px; }

.comparison { max-width: 1010px; margin: 0 auto; padding: 0 10px; text-align: left; }
.comparison h3 { font-size: 1.625rem; font-weight: bold; color: #E31919; text-align: center; line-height: 1.4; margin: 0 auto 80px; }
.comparison h4 { margin: 0 0 10px; }
.comparison .inr { display: flex; justify-content: space-between; }
.comparison .inr .cont { width: calc((100% - 30px) / 4); padding: 30px; background: #fff; border-radius: 17px; box-shadow: 0 3px 6px rgba(0,0,0,.16); }
.comparison .inr .cont.mine { background: #56DEDE; }
.comparison .inr .cont h5 { font-size: 1.125rem; text-align: center; padding:0 0 15px 0; border-bottom: 1px solid rgba(0,0,0,.25); }
.comparison .inr .cont dl { padding: 15px 0; border-bottom: 1px solid rgba(0,0,0,.25); }
.comparison .inr .cont dt { font-weight: bold; font-size: 0.875rem; text-align: center; color: rgba(0,0,0,.5); }
.comparison .inr .cont dd { font-weight: bold; font-size: 1.5rem; text-align: center; font-family: Arial; }

.faq { padding: 80px 0; }
.faq h2 { font-weight: bold; text-align: center; letter-spacing: .05em; font-size: 2.625rem; line-height: 1.4; margin: 0 auto 80px; }
.faq h2 small { font-weight: bold; display: block; text-align: center; letter-spacing: .05em; font-size: 1.25rem; color: #56DEDE; line-height: 1.4; }
.faq .inr { display: block; flex-wrap: wrap; max-width: 960px; margin: 0 auto; }
.faq .inr dl { background: #CCE4E4; margin: 0 0 20px; }
.faq .inr dl dt { cursor: pointer; line-height: 1.25; background: #99C9C9; text-align: left; color: calc(0,0,0,.8); font-weight: bold; padding: 20px 60px 20px 20px; position: relative; }
.faq .inr dl dt:before { content: ""; display: block; position: absolute; right: 25px; top: calc(50% - 15px); border-bottom: solid 4px rgba(0,0,0,.5); border-right: solid 4px rgba(0,0,0,.5); width: 16px; height: 16px; transform: rotate(45deg);  transition: .3s; }
.faq .inr dl dd { padding: 0 20px; text-align:left; height: 0; overflow: hidden; transition: .3s; }

.faq .inr dl dt:hover { background: #699999; }
.faq .inr dl.active dt { background: #56C7DE; color: #fff; }
.faq .inr dl.active dt:before { transform: rotate(225deg); top: calc(50% - 5px); }
.faq .inr dl.active dd { padding: 20px; height: auto; }

.contact { background: url(/static/images/kv_bg.png) center top/cover no-repeat; background-attachment: fixed; }
.contact .wrap { padding: 80px; background: rgba(86,222,222,.8); }
.contact h2 { color: #fff; font-weight: bold; text-align: center; letter-spacing: .05em; font-size: 2.625rem; line-height: 1.4; margin: 0 auto 30px; }
.contact h2 small { color: #fff; font-weight: bold; display: block; text-align: center; letter-spacing: .05em; font-size: 1.25rem; line-height: 1.4; }
.contact p { color: rgba(0,0,0,.8); font-weight: bold; text-align: center; letter-spacing: .05em; font-size:1.3rem; line-height: 1.4; margin: 0 auto 80px; }
.contact .inr { max-width: 800px; height: 1300px; display: flex; align-items: center; justify-content: center; background: #fff; margin: 0 auto; }
.contact .form { max-width: 800px; padding: 50px; background: #fff; margin: 0 auto; }
.contact .form p { font-size:1rem; margin:0 auto 20px; }
.contact .form dl { display: flex; align-items: center; padding: 30px 0; border-bottom: 1px solid #e5e5e5; }
.contact .form dl:nth-last-of-type(1) { margin: 0 0 40px; }
.contact .form dl dt { width: 12em; text-align: left; font-weight: bold; }
.contact .form dl dd { width: calc(100% - 12em); text-align: left; }
.contact .form dl dd input,
.contact .form dl dd textarea { font-size: 16px; width: 100%; margin: 0; }
.contact .form .btnlist ul { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.contact .form .btnlist ul li { margin:20px; }
.contact .form .btnlist ul li button { text-align: center; cursor: pointer; display: inline-block; padding: 20px; width: 260px; line-height: 1; font-weight: bold; color: rgba(0,0,0,.8); background: #f2de2f; border:none; outline: none; font-size: 18px; letter-spacing: .05em; transition: background .3s; border-radius: 100px; }
.contact .form .btnlist ul li button:hover { background: #d2be0f; }
.contact .form .btnlist ul li a { text-align: center; cursor: pointer; display: inline-block; padding: 20px; width: 260px; line-height: 1; font-weight: normal; color: rgba(0,0,0,.8); background: #ddd; border:none; outline: none; font-size: 18px; letter-spacing: .05em; transition: background .3s; border-radius: 100px; }
.contact .form .btnlist ul li a:hover { background: #aaa; }
.contact .form .errorlist { background: rgba(255,0,0,.05); padding: 15px; margin: 0 0 30px; text-align: left; }
.contact .form .errorlist li { color: rgba(200,0,0,.7); text-align: left; }
.contact .form dl.error { background: rgba(255,0,0,.05); }
.contact .form dl.error dt { color: rgba(200,0,0,.8); }


footer { padding: 80px 15px; background: #fff; text-align: center; }
footer dt { margin: 0 auto 20px; }
footer dd { margin: 0 auto 20px; }
footer small { font-size: 12px; display: block; text-align: center; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print, screen and (max-width:1024px) {
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print, screen and (max-width:780px) {
	html, body{ font-size:14px; }
	header dl dt { display: none; }
	header dl dd a { font-size: 12px; padding:25px 10px; width: auto; }
	header .logo { margin: 0 0 0 10px; }
	header .logo img { height: 50px; }
	.kv { background: url(/static/images/kv_bg_sp.png) center top/cover no-repeat; padding: 20px; }
	.kv dl { display: block; text-align: center; padding: 0; }
	.kv dl dt { margin: 0 0 15px; }
	.information { padding: 30px 15px; }
	.trouble { padding: 10px; }
	.trouble ul { display: block; padding: 0; }
	.trouble ul li { width:100%; font-size: 16px; margin: 0 0 10px; }
	.trouble ul li br { display: none; }
	.trouble ul li:nth-of-type(1)::before { top: -30px; right: -10px; left: auto; }
	.trouble ul li:nth-of-type(2)::before { top: -30px; right: auto; left: -10px; }
	.trouble ul li:nth-of-type(3)::before { top: -30px; right: -10px; left: auto; }
	.about { padding: 60px 0 0; }
	.about h2 { font-size: 24px; }
	.about h2 small { font-size: 12px; }
	.contactbtn h3 { font-size: 16px; }
	.contactbtn h3 br { display: none; }
	.contactbtn dl dd { font-size: 36px; }
	.contactbtn dl dd small { font-size: 13px; }
	.service { padding: 60px 0 0; }
	.service h2 { font-size: 24px; margin: 0 0 60px; }
	.service h2 small { font-size: 12px; }
	.service .inr { display: block; }
	.service .inr .cont { width: auto; margin: 0 0 10px; }
	.service .inr .cont ul li { height: auto; margin: 30px auto 0; }
	.price { padding: 60px 0 0; }
	.price h2 { font-size: 24px; margin: 0 0 60px; }
	.price h2 small { font-size: 12px; }
	.pricegraf { display: block; margin: 0 30px; }
	.pricegraf .cont { width: 100%; margin: 60px 0; }
	.comparison .inr { flex-wrap: wrap; }
	.comparison .inr .cont { width: calc((100% - 10px) / 2); margin: 0 0 10px; padding: 15px; }
	.faq { padding: 60px 0 0; }
	.faq .inr { display: block; margin: 0 10px; }
	.faq .inr dl { margin: 0 0 10px; width: auto; }
	.contact .wrap { padding: 30px 15px; }
	.faq .inr dl.column2 { width: auto; }
	.contact { background: url(/static/images/kv_bg_sp.png) center top/cover no-repeat; }
	.contact h2 { font-size: 24px; margin: 0 0 30px; }
	.contact h2 small { font-size: 12px; }
	.contact p { font-size: 14px; margin: 0 auto 30px; }
	.contact p br { display: none; }
	.contact .form { padding:20px 10px 10px; }
	.contact .form dl { display: block; padding: 15px 0; }
	.contact .form dl dt { width: auto; margin: 0 0 5px; }
	.contact .form dl dd { width: auto; }
	.contact .form .errorlist { margin: 0 0 10px; }
	.contact .form dl:nth-last-of-type(1) { margin: 0 0 20px; }
	.contact .form .btnlist ul li { margin: 0 0 10px; }
	.contact .form .btnlist ul li button { width: 200px; }
	.contact .form .btnlist ul li a { width: 200px; }

.information { padding: 15px; }
.information > .inr { padding:15px; }
.information > .inr h2 { margin: 0 auto 15px; padding:0; }
.information > .inr .inr dl { display: block; }
.information > .inr .inr dl dt { width: auto; }
.information > .inr .inr dl dd {width: auto; }


}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print, screen and (max-width:360px) {
	header dl dd a { font-size: 11px; }
}