@charset "UTF-8";

:root{
  --main-color:#1d738c;
  --light-color:#ebf7fb;
}

/* Scss Document */
/* Scss Document */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-style: normal; font-weight: normal; font-size: 100%; vertical-align: baseline; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

input, button, textarea, select, option { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; }

select::-ms-expand { display: none; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

a:focus { outline: none; }

img { vertical-align: bottom; }

a img { cursor: pointer; }

@keyframes anim01 { 0% { opacity: 0; }
  100% { opacity: 1; } }
@keyframes anim02 { 0% { opacity: .1; }
  100% { opacity: 1; } }
@keyframes anim03 { 0% { opacity: .9; }
  100% { opacity: 0; } }
html { width: 100%; height: 100%; -webkit-text-size-adjust: none; overflow-x: hidden; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; }

html, body { background: white; color: #191412; }
html sup, body sup { font-size: 75.5%; vertical-align: top; position: relative; top: -0.1em; }
html a, body a { text-decoration: none; }

.wrap { overflow: hidden; }

.hideElm { opacity: .1; transition: 1.5s all; margin-top: 50px; }
.hideElm.elmShow { opacity: 1; margin-top: 0; }

/* -767 */
.spOnly { display: block !important; }

.pcOnly { display: none !important; }

.pcNav { display: none; }

.spSwitch { z-index: 100; width: 7.4666667vw; height: 7.4666667vw; margin-right: 5.3333333vw; font-size: 0; line-height: 1; text-align: center; position: fixed; cursor: pointer; right: 0vw; top: 3vw; border-radius: 3px; }
.spSwitch span { width: 80%; height: 2px; background: black; font-size: 0; position: absolute; left: 10%; top: calc(50% - 1px); transition: .5s all; }
.spSwitch span + span { top: calc(50% - 1px); }
.spSwitch span + span + span { transition: none; top: calc(25% - 1px); transition: 1s all; transition-delay: .7s; }
.spSwitch span + span + span + span { top: calc(75% - 1px); }
.spSwitch.open { z-index: 9999; }
.spSwitch.open span { background: white; transform: rotate(45deg); }
.spSwitch.open span + span { transform: rotate(-45deg); }
.spSwitch.open span + span + span { opacity: 0; transform: rotate(0); transition: 0s all; }

.spNav { display: none; z-index: 99; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); }
.spNav ul { position: absolute; width: 92vw; height: 92vw; left: 4vw; top: 13vw; background: rgba(255, 255, 255, 0.9); border-radius: 5vw; display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flex; display: -o-inline-flex; display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; }
.spNav ul li { width: 100%; text-align: center; }
.spNav ul li + li { margin-top: 5vw; }
.spNav ul li a { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; font-weight: bold; font-size: 6vw; color: #191412; text-decoration: underline; }

main { position: relative; z-index: 10; }
main img { width: 100%; height: auto; }
main .sec00 { width: 100vw; height: 100vw; min-height: 600px; display: flex; align-items: center; justify-content: center; background: url(../img/bg_top_00.jpg) no-repeat 50% 0%; background-size: auto 100%; transition: .1s all; }
main .sec00 h1 { text-align: center; }
main .sec00 h1 img { width: 80vw; height: auto; opacity: 0; animation-name: anim01; animation-duration: 5.0s; animation-fill-mode: forwards; }
main .sec00 h1 p { margin-top: 1em; font-size: 4vw; letter-spacing: .1em; opacity: 0; animation-name: anim01; animation-duration: 2.0s; animation-delay: 1.5s; animation-fill-mode: forwards; }
main .generalSection { padding: 10vw 4vw; }
main .generalSection h2 { font-family: 'Poppins', sans-serif; letter-spacing: .14em; margin-bottom: 7vw; font-weight: 400; line-height: 1.33; text-align: center; font-size: 5.5vw; }
main .generalSection h2 small { display: block; font-size: 2.8vw; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; letter-spacing: .4em; }
main .sec01 p { font-size: 3.5vw; text-align: center; line-height: 1.8; }
main .sec01 p + p { margin-top: 2em; }
main .sec01 p strong { font-weight: bold; }
main .sec02 { background: var(--light-color); }
main .sec02 p { font-size: 3.5vw; text-align: center; line-height: 1.8; }
main .sec02 p + p { margin-top: 2em; }
main .sec02 .prdBox { text-align: center; }
main .sec02 .prdBox h3 { margin: 0 auto 2vw; }
main .sec02 .prdBox h3.cs { width: 50vw; }
main .sec02 .prdBox h3.cs + p img { width: 83vw; }
main .sec02 .prdBox h3.se { width: 48vw; }
main .sec02 .prdBox h3.se + p img { width: 51vw; }
main .sec02 .prdBox p img { height: auto; margin: 0 auto 2vw; }
main .sec02 .prdBox p.tex { font-size: 3.5vw; line-height: 1.5; margin-bottom: 4vw; }
main .sec02 .prdBox p.prdBtn { margin: 0 auto 12vw; display: block; text-align: center; width: 61vw; }
main .sec02 .prdBox p.prdBtn a { display: block; color: white; font-weight: bold; text-decoration: none; font-size: 5.0vw; width: 61vw; background: var(--main-color); border-radius: 5px; padding: 2vw 0; }
main .sec02 .prdBox p.prdBtn.disact a { background: #bebaba; pointer-events: none; }
main .sec03 { background: #f7fcfc; }
main .sec03 .generalSectionInner > p { font-size: 3.5vw; margin-bottom: 1.5em; }
main .sec03 .brandWrap { display: flex; }
main .sec03 .brandWrap > div { align-items: center; }
main .sec03 .brandWrap > div.boxL { width: 30%; }
main .sec03 .brandWrap > div.boxR { width: 70%; padding-left: 5vw; display: flex; }
main .sec03 .brandWrap > div.boxR > div { display: block; text-align: center; }
main .sec03 .brandWrap > div.boxR h3 { text-align: left; font-size: 4.8vw; line-height: 1.2; margin-bottom: .5em; }
main .sec03 .brandWrap > div.boxR h3 small { font-size: 3.0vw; }
main .sec03 .brandWrap > div.boxR p { text-align: left; font-size: 3.5vw; }
main .sec03 .brandWrap > div.boxR p em { font-weight: bold; display: block; margin-bottom: .5em; font-size: 3.7vw; }
main .sec03 .brandWrap > div.boxR a.btn { display: inline-block; font-size: 3vw; padding: 2vw 3vw; background: var(--main-color); color: white; text-decoration: none; font-weight: bold; width: auto; margin: 1em auto; border-radius: 5vw; border: var(--main-color) 2px solid; }
main .sec03 .brandWrap > div.boxR a.btn:hover { color: var(--main-color); background: white; transition: .2s all; }
main .sec04 .companyTableWrap .tbTR + .tbTR { margin-top: 4vw; }
main .sec04 .companyTableWrap .tbTR .tbTH, main .sec04 .companyTableWrap .tbTR .tbTD { padding: 2vw 4vw; font-size: 3.8vw; }
main .sec04 .companyTableWrap .tbTR .tbTH { background: #eee; font-weight: bold; }
main .sec04 .companyTableWrap .tbTR .tbTD ul li { list-style-type: disc; margin-left: 1em; }
main .sec05 { background: #f7fcf7; }
main .sec05 .generalSectionInner p { font-size: 3.5vw; margin-bottom: 0vw; }
main .sec05 .generalSectionInner p.tel { text-align: center; line-height: 1.6; }
main .sec05 .generalSectionInner p.tel strong { background: url(../img/ico_tel.png) no-repeat 0 50%; background-size: 4vw auto; padding: 0 5vw; font-size: 5.55vw; }
main .sec05 .generalSectionInner p.tel small { display: block; font-size: 3vw; }
main .sec05 .generalSectionInner h3 { font-weight: bold; font-size: 4vw; color: var(--main-color); border-bottom: var(--main-color) .1vw solid; border-right: var(--main-color) .1vw solid; padding: 2vw 2.5vw; margin: 15vw 0 7vw; }
main .sec05 .screen-reader-response { color: #fa9a54; font-size: 3.5vw; margin: 0 0 4vw; }
main .sec05 .wpcf7-form p { font-size: 3.5vw; }
main .sec05 .wpcf7-form p input[type="text"], main .sec05 .wpcf7-form p input[type="email"] { border: #333 1px solid; border-radius: 1vw; padding: 2vw; font-size: 4vw; margin-top: 1.5vw; margin-bottom: 6vw; width: 100%; background: white; }
main .sec05 .wpcf7-form p input[type="text"] + .wpcf7-not-valid-tip, main .sec05 .wpcf7-form p input[type="email"] + .wpcf7-not-valid-tip { margin-top: -4vw; color: #fa9a54; font-size: 3vw; display: block; margin-bottom: 6vw; }
main .sec05 .wpcf7-form p textarea { border: #333 1px solid; border-radius: 1vw; padding: 2vw; font-size: 4vw; margin-top: 1.5vw; margin-bottom: 6vw; width: 100%; background: white; line-height: 1.6; height: 5em; }
main .sec05 .wpcf7-form p input[type="submit"] { background: #65affb; border: #65affb 2px solid; display: block; color: white; font-size: 3.8vw; margin: 0 auto; width: 25vw; padding: 3vw 0; border-radius: 100vw; transition: .2s all; cursor: pointer; }
main .sec05 .wpcf7-form p input[type="submit"]:hover { background: white; color: #65affb; }
main .sec05 .wpcf7-form .wpcf7-validation-errors, main .sec05 .wpcf7-form .wpcf7-mail-sent-ok　 { color: #fa9a54; font-size: 3.5vw; margin-top: 3vw; }
main .sec00_2nd { width: 100vw; height: calc(100vw / 3); display: flex; align-items: center; justify-content: center; background: var(--main-color); }
main .sec00_2nd h1 { text-align: center; color: white; font-family: 'Poppins', sans-serif; letter-spacing: .14em; font-weight: 400; font-size: 5.5vw; }
main .secBreadCrumb { display: block; padding: 4vw; }
main .secBreadCrumb ul { display: flex; align-items: center; justify-content: flex-end; }
main .secBreadCrumb ul li { color: #191412; font-size: 3.3vw; }
main .secBreadCrumb ul li a { color: #191412; text-decoration: underline; }
main .secBreadCrumb ul li + li { position: relative; margin-left: .8em; padding-left: 1em; }
main .secBreadCrumb ul li + li::before { content: ">"; position: absolute; left: 0; top: 0; }
main .sec01_Product h2 { margin: 0 auto 2vw; }
main .sec01_Product.cs h2 { width: 50vw; }
main .sec01_Product.se h2 { width: 48vw; }
main .sec01_Product .catch { text-align: center; margin-bottom: 8vw; }
main .sec01_Product .catch h3 { font-size: 3.9vw; text-align: center; line-height: 1.8; font-weight: bold; margin-bottom: 1em; }
main .sec01_Product .catch p { font-size: 3.5vw; line-height: 1.5; }
main .sec01_Product .inst { margin-bottom: 6vw; }
main .sec01_Product .inst p { font-size: 2.8vw; line-height: 1.7; }
main .sec01_Product .prdList { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; }
main .sec01_Product .prdList > div { width: 50%; padding: 0 4%; text-align: center; display: flex; flex-direction: column; }
main .sec01_Product .prdList > div img { width: 27.5vw; margin: 0 auto 2.3vw; }
main .sec01_Product .prdList > div h4 { font-size: 3.5vw; line-height: 1.1; font-weight: bold; margin-bottom: 2.3vw; }
main .sec01_Product .prdList > div h4 small { font-size: 2.7vw; font-weight: bold; }
main .sec01_Product .prdList > div h4 + p { text-align: left; font-size: 2.8vw; line-height: 1.7; margin-bottom: 4vw; }
main .sec01_Product .prdList > div .prdBtn { margin: auto auto 10vw; display: block; text-align: center; }
main .sec01_Product .prdList > div .prdBtn a { display: block; color: white; font-weight: bold; text-decoration: none; font-size: 3.5vw; width: 28vw; background: var(--main-color); border-radius: 5px; padding: 1.5vw 0; }
main .secCution { margin-top: 10vw; }
main .secCution ul li { font-size: 2.4vw; line-height: 1.5; list-style-type: disc; padding-left: -1em; margin-left: 1em; }
main .secCution ul li + li { margin-top: .4em; }

footer { background: var(--main-color); text-align: center; }
footer p { padding: 5vw 0; color: white; line-height: 1; }
footer p small { font-size: 2.5vw; font-family: 'Poppins', sans-serif; font-weight: 300; letter-spacing: .14em; }

/* 768- */
@media all and (min-width: 768px) { .spOnly { display: none !important; }
  .pcOnly { display: block !important; }
  .spSwitch, .spNav { display: none !important; }
  main .sec00 { width: 100vw; height: 100vw; background-size: cover; }
  main .generalSection { padding: 120px 20px; }
  main .generalSection h2 { letter-spacing: 5px; margin-bottom: 90px; font-size: 40px; }
  main .generalSection h2 small { font-size: 26px; letter-spacing: 2px; }
  main .generalSectionInner { width: 90%; margin: 0 auto; }
  main .sec01 p { font-size: 24px; }
  main .sec01 p strong { font-weight: normal; }
  main .sec02 h2 + div { display: flex; justify-content: space-between; }
  main .sec02 p { font-size: 24px; }
  main .sec02 .prdBox { width: 48%; }
  main .sec02 .prdBox h3 { margin: 0 auto 24px; }
  main .sec02 .prdBox h3 img { width: 90%; }
  main .sec02 .prdBox h3.cs { width: 90%; }
  main .sec02 .prdBox h3.se { width: 90%; }
  main .sec02 .prdBox h3.cs img { max-width: 409px; }
  main .sec02 .prdBox h3.se img { max-width: 416px; }
  main .sec02 .prdBox h3.cs { width: 90%; }
  main .sec02 .prdBox h3.cs + p img { width: 100%; max-width: 570px; }
  main .sec02 .prdBox h3.se { width: 90%; }
  main .sec02 .prdBox h3.se + p img { width: 96%; max-width: 500px; }
  main .sec02 .prdBox p img { width: 100%; margin: 0 auto 30px; }
  main .sec02 .prdBox p.tex { font-size: 20px; margin-bottom: 50px; }
  main .sec02 .prdBox p.prdBtn { margin: auto auto 0; width: 100%; max-width: 350px; }
  main .sec02 .prdBox p.prdBtn a { font-size: 30px; max-width: 350px; padding: 10px 0; border: var(--main-color) 2px solid; transition: .5s all; }
  main .sec02 .prdBox p.prdBtn a:hover { background: white; color: var(--main-color); transition: .05s all; }
  main .sec02 .prdBox p.prdBtn.disact a { border: #bebaba 2px solid; }
  main .sec03 .generalSectionInner > p { font-size: 20px; margin-bottom: 40px; }
  main .sec03 .brandWrap { display: flex; }
  main .sec03 .brandWrap > div.boxR h3 { text-align: left; font-size: 34px; margin-bottom: 15px; }
  main .sec03 .brandWrap > div.boxR h3 small { font-size: 20px; }
  main .sec03 .brandWrap > div.boxR p { text-align: left; font-size: 20px; line-height: 1.6; }
  main .sec03 .brandWrap > div.boxR p em { font-size: 26px; }
  main .sec03 .brandWrap > div.boxR a.btn { display: inline-block; font-size: 22px; padding: 15px 25px; margin: 40px auto 0; border-radius: 40px; }
  main .sec04 .companyTableWrap .tbTR { display: flex; width: 100%; }
  main .sec04 .companyTableWrap .tbTR + .tbTR { margin-top: 0; }
  main .sec04 .companyTableWrap .tbTR + .tbTR .tbTH { border-top: white 1px solid; }
  main .sec04 .companyTableWrap .tbTR + .tbTR .tbTD { border-top: #eee 1px solid; }
  main .sec04 .companyTableWrap .tbTR .tbTH, main .sec04 .companyTableWrap .tbTR .tbTD { padding: 13px 35px; font-size: 18px; }
  main .sec04 .companyTableWrap .tbTR .tbTH { background: #eee; font-weight: bold; width: 30%; }
  main .sec04 .companyTableWrap .tbTR .tbTD { width: 70%; }
  main .sec04 .companyTableWrap .tbTR .tbTD ul li { list-style-type: disc; margin-left: 1em; }
  main .sec05 { background: #f7fcf7; }
  main .sec05 .generalSectionInner p { font-size: 22px; }
  main .sec05 .generalSectionInner p.tel { text-align: center; line-height: 1.6; }
  main .sec05 .generalSectionInner p.tel strong { background: url(../img/ico_tel.png) no-repeat 0 55%; background-size: 33px auto; padding: 0 40px; font-size: 45px; }
  main .sec05 .generalSectionInner p.tel small { display: block; font-size: 20px; }
  main .sec05 .generalSectionInner h3 { font-weight: bold; font-size: 30px; color: var(--main-color); border-bottom: var(--main-color) 2px solid; border-right: var(--main-color) 2px solid; padding: 15px 25px; margin: 120px 0 40px; }
  main .sec05 .screen-reader-response { color: #fa9a54; font-size: 22px; margin: 0 0 4vw; }
  main .sec00_2nd { width: 100vw; height: 200px; }
  main .sec00_2nd h1 { font-size: 40px; letter-spacing: 5px; }
  main .secBreadCrumb { padding: 30px 10px; }
  main .secBreadCrumb ul { justify-content: flex-start; }
  main .secBreadCrumb ul li { font-size: 18px; }
  main .secBreadCrumb ul li + li { margin-left: .8em; padding-left: 1.1em; }
  main .sec01_Product h2 { margin: 0 auto 40px; }
  main .sec01_Product.cs h2 { width: 487px; }
  main .sec01_Product.se h2 { width: 416px; }
  main .sec01_Product .catch { text-align: center; margin-bottom: 80px; }
  main .sec01_Product .catch h3 { font-size: 30px; }
  main .sec01_Product .catch p { font-size: 24px; }
  main .sec01_Product .inst p { font-size: 20px; }
  main .sec01_Product .prdList { justify-content: flex-start; }
  main .sec01_Product .prdList > div { width: calc(100% / 3); padding: 0 2%; display: flex; flex-direction: column; }
  main .sec01_Product .prdList > div img { width: 100%; max-width: 160px; margin: 0 auto 15px; }
  main .sec01_Product .prdList > div h4 { font-size: 18px; margin-bottom: 15px; }
  main .sec01_Product .prdList > div h4 small { font-size: 16px; }
  main .sec01_Product .prdList > div h4 + p { font-size: 20px; margin-bottom: 40px; }
  main .sec01_Product .prdList > div .prdBtn { margin: auto auto 100px; }
  main .sec01_Product .prdList > div .prdBtn a { font-size: 18px; width: 100%; max-width: 190px; padding: 12px 24px; border: var(--main-color) 2px solid; transition: .5s all; }
  main .sec01_Product .prdList > div .prdBtn a:hover { background: white; color: var(--main-color); transition: .05s all; }
  main .secCution { margin-top: 80px; }
  main .secCution ul li { font-size: 18px; }
  footer p { padding: 30px 0; }
  footer p small { font-size: 12px; line-height: 1; } }
/* 1000- */
@media all and (min-width: 1000px) { main .sec00 { background-attachment: fixed; position: relative; height: 100vh; }
  main .sec00 h1 { text-align: center; }
  main .sec00 h1 img { max-width: 300px; height: auto; }
  main .sec00 h1 p { margin-top: 1em; font-size: 34px; letter-spacing: .1em; }
  main .sec00 nav.pcNav { position: absolute; bottom: 15px; width: 715px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 250, 0.6); }
  main .sec00 nav.pcNav.navFix { position: fixed; bottom: auto; top: 15px; background: rgba(255, 255, 250, 0.8); }
  main .sec00 nav.pcNav ul { width: 100%; display: flex; justify-content: space-between; padding: 10px 15px; }
  main .sec00 nav.pcNav ul li { display: inline-block; font-family: 'Poppins', sans-serif; letter-spacing: .14em; }
  main .sec00 nav.pcNav ul li a { color: #191412; display: block; padding: 20px 22px; transition: .2s all; border-radius: 10px; }
  main .sec00 nav.pcNav ul li a:hover { background: white; color: var(--main-color); }
  main .generalSectionInner { width: 900px; margin: 0 auto; } }


  /* =========================
   Form Base
========================= */
.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* =========================
   Input / Textarea / Select
========================= */
input,
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #fff;
  transition: 0.2s ease;
  outline: none;
}

/* 高さ調整 */
textarea {
  min-height: 140px;
  resize: vertical;
}

/* フォーカス */
input:focus,
textarea:focus,
select:focus {
  border-color: #333;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

/* プレースホルダー */
::placeholder {
  color: #aaa;
}

/* =========================
   Radio / Checkbox
========================= */
input[type="radio"],
input[type="checkbox"] {
  width: auto;
  margin-right: 6px;
  accent-color: #333;
}

/* 横並び */
.form-inline {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* =========================
   Button
========================= */
button,
input[type="submit"] {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #000;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.2s ease;
}

button:hover,
input[type="submit"]:hover {
  background: #333;
}

/* =========================
   Error / Req
========================= */
.req::after {
  content: "必須";
  font-size: 11px;
  color: #fff;
  background: #e53935;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
}

.error {
  font-size: 12px;
  color: #e53935;
  margin-top: 4px;
}

/* =========================
   Responsive
========================= */
@media (max-width: 768px) {
  input,
  textarea,
  select {
    font-size: 16px; /* iOSズーム防止 */
  }
}