@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600;700&display=swap');

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- common */

html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;}
article, header, footer, aside, figure, figcaption, nav, section {display: block;}
body {line-height: 1;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;}
ol, ul {list-style: none;list-style-type: none;}
figure {margin: 0;}
button, input[type="submit"] {border: 0 none;background: none;cursor: pointer;outline: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
select::-ms-expand {display: none;}
img, input[type="image"] {max-width: 100%;width:auto;height: auto;backface-visibility: hidden;-webkit-backface-visibility: hidden;object-fit: cover;}
a {text-decoration: none;color: #222;}
a:hover, a img:hover, button:hover {opacity: 0.7;transition: all 0.5s ease;}

* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html {height: 100%;overflow-x: hidden;-webkit-text-size-adjust: 100%;-webkit-overflow-scrolling: touch;overflow-scrolling: touch;scroll-behavior: smooth;font-size: 62.5%;}
body {background: #fff;color: #394049;font-family: 'Noto Serif JP', serif;font-size: 1.8rem;font-weight: 400;line-height: 2;letter-spacing: 0.08em;}
@media only screen and (max-width: 767px) {body {font-size: 1.3rem;line-height: 1.8;letter-spacing: 0.05em;}}

.pc {display: inherit;}
.sp {display: none;}
.inner {width: 100%;margin: auto;}
@media only screen and (max-width: 767px) {.pc {display: none;}.sp {display: block;}}
.flex {display: -webkit-box;display: -moz-box;display: -webkit-flexbox;display: -moz-flexbox;display: -ms-flexbox;display: -webkit-flex;display: -moz-flex;display: flex;flex-wrap: wrap;}
.Acenter {position: absolute;top: 50%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

header {width: 100%;max-width: 650px;padding: 15px 0 10px 45px;position: fixed;top: 5%;right: 0;z-index: 1;background: rgba(0,0,0,0.6);}
header #gNav {align-items: center;}
header #gNav li {margin: 0 35px 0 0;}
header #gNav li:last-child {margin: 0;}
header #gNav li a {color: #fff;}
header #gNav li p a {margin: 0 5px 0 0;}
@media only screen and (max-width: 767px) {
header {padding: 0;}
header #gNav {width: 100%;height: 100vh;visibility: hidden;position: fixed;top: 0;left: 0;z-index: 3;text-align: center;opacity: 0;transition: all 0.5s;-webkit-overflow-scrolling: touch;}
header #gNav ul {position: absolute;top: 50%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
header #gNav ul li {width: calc(100%/1);margin: 0;text-align: center;font-size: 1.3rem;}
header #gNav ul li a {padding: 2% 0;display: block;color: #fff;font-size: 2rem;}
header #gNav ul li:last-child {margin: 5% auto 0;}
header #gNav ul li p a {padding: 0;display: inline-block;}
header #navBtn {height: 60px;position: fixed;top: 3%;right: 0;z-index: 10;background: rgba(0,0,0,0.6);}
header #navBtn > p {width: 60px;position: relative;cursor: pointer;}
header #navBtn > p::after {content: "MENU";position: absolute;top: 35px;left: 10px;display: block;color: #fff;font-size: 1.2rem;letter-spacing: 0.1em;transition: top .5s ease, -webkit-transform .6s ease-in-out;transition: transform .6s ease-in-out, top .5s ease;transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;}
header #navBtn span {padding: 3px;position: absolute;top: 22px;display: block;background: #fff;border-radius: 50%;transition: top .5s ease, -webkit-transform .6s ease-in-out;transition: transform .6s ease-in-out, top .5s ease;transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;}
header #navBtn span:nth-child(1) {left: 14px;}
header #navBtn span:nth-child(2) {left: 27px;}
header #navBtn span:nth-child(3) {left: 40px;}
.open {overflow: hidden;}
.open header #navBtn span:nth-child(1) {top: 8px;left: 27px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
.open header #navBtn span:nth-child(3) {top: 35px;left: 27px;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}
.open header #navBtn > p::after {content: "CLOSE";top: 50px;}
.open header #gNav {background: #000;visibility: visible;overflow-y: auto;opacity: 1;animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;}	
}

footer {width: 100%;padding: 10% 10%;background: url("images/footer_back.jpg") no-repeat center / 100% auto;}
footer p#topBtn {padding: 10px 20px 5px;position: fixed;right: 20px;bottom: 20px;z-index: 3;cursor: pointer;background: rgba(0,0,0,1);color: #fff;}
footer p#topBtn::after {content: "";width: 5px;height: 5px;position: absolute;top: 20%;left: 50%;display: block;border-top: 1px solid #fff;border-left: 1px solid #fff;transform: rotate(45deg);}
footer ul {align-items: center;}
footer ul li:nth-child(1) {margin: 0 2% 0 0;}
footer ul li:nth-child(2) {color: #fff;}
footer ul li:nth-child(2) address {margin: 0 0 20px;font-style: normal;line-height: 1.5;}
footer ul li:nth-child(2) p {}
footer ul li:nth-child(2) p a {margin: 0 2% 0 0;}
@media only screen and (max-width: 980px) {
footer {background: url("images/footer_back.jpg") no-repeat center / 130% auto;}
}
@media only screen and (max-width: 767px) {
footer {padding: 12% 0 38% 5%;background: url("images/footer_back_sp.jpg") no-repeat center / cover;}
footer ul {align-items: flex-start;justify-content: space-between;}
footer ul li:nth-child(1) {width: 18%;}
footer ul li:nth-child(2) {width: 78%;font-size: 1.2rem;}
footer ul li:nth-child(2)	figure {width: 80%;}
footer ul li:nth-child(2) p img {width: 25px;}
}

#mv {width: 100%;height: 100vh;position: relative;background-attachment: fixed;background-size: cover;background-repeat: no-repeat;background-position: center;}
#mv #mvCont {position: absolute;top: 50%;left: 50%;margin-right: -50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);text-align: center;}
#mv #mvCont h1#logo {margin: auto;}
#mv #mvCont h2#catch {margin: 1% auto;font-size: 5rem;font-weight: 300;}
#mv #mvCont p#company {margin: auto;font-size: 2rem;font-weight: 600;}
@media only screen and (max-width: 980px) {
#mv {height: 700px;background-attachment: scroll;background-size: 155% auto;}
}
@media only screen and (max-width: 767px) {
#mv {height: 350px;background-size: cover;}
#mv #mvCont h1#logo {width: 30%;}
#mv #mvCont h2#catch {font-size: 3rem;}
#mv #mvCont p#company {font-size: 1.5rem;}
}

#sec1 {width: 100%;padding: 8% 0 5%;}
#sec1 .inner {max-width: 710px;}
#sec1 h3 {margin: 0 auto 5%;text-align: center;}
#sec1 figure {margin: 0 auto 5%;text-align: center;}
#sec1 p {margin: 0 auto 5%;}
@media only screen and (max-width: 767px) {
#sec1 {padding: 15% 0 13%;}
#sec1 .inner {padding: 0 20px;}
#sec1 h3 {width: 60%;}
#sec1 p {padding: 0 20px;}
}

#sec2 {width: 100%;padding: 8% 0 5%;background: #e5e5e5 url("images/sec2_back.jpg") no-repeat 0 0 / cover;}
#sec2 .inner {max-width: 710px;}
#sec2 .inner div {max-width: 405px;margin: 0 0 0 auto;}
#sec2 h3 {text-align: right;}
#sec2 h4 {margin: 5% 0;text-align: right;}
#sec2 p {margin: 0 auto 5%;}
@media only screen and (max-width: 980px) {
#sec2 {background: #e5e5e5 url("images/sec2_back.jpg") no-repeat center/ 100% auto;}
}
@media only screen and (max-width: 767px) {
#sec2 {padding: 15% 0 13%;background: #e5e5e5 url("images/sec2_back_sp.jpg") no-repeat center / 100% auto;}
#sec2 .inner {padding: 0 20px;}
#sec2 h3 {width: 70%;margin: 3% 10% 3% auto;}
#sec2 h4 {width: 60%;margin: 3% 10% 3% auto;}
#sec2 p {padding: 0 20px;}
}

#sec3 {width: 100%;padding: 8% 0;}
#sec3 .inner {max-width: 620px;}
#sec3 h3 {margin: 0 auto 5%;text-align: center;}
#sec3 dl {margin: 0 auto 8%;}
#sec3 dl dt {}
#sec3 dl dd {margin: 0 0 3%;}
#sec3 dl dd input[type="text"], #sec3 dl dd input[type="tel"], #sec3 dl dd input[type="email"] {width: 100%;padding: 3% 5%;background: #dcdcdc;border: 0 none;border-radius: 30px;}
#sec3 dl dd textarea {width: 100%;height: 200px;padding: 3% 5%;background: #dcdcdc;border: 0 none;border-radius: 30px;}
#sec3 input[type="submit"] {margin: auto;padding: 2% 15% 3%;display: block;background: #000;border-radius: 20px;color: #fff;font-family: 'Noto Serif JP', serif;font-size: 2rem;}
@media only screen and (max-width: 767px) {
#sec3 {padding: 15% 0;}
#sec3 .inner {padding: 0 20px;}
#sec3 h3 {width: 60%;}
#sec3 dl {margin: 0 auto 5%;}
#sec3 input[type="submit"] {padding: 4% 20% 5%;font-size: 1.5rem;}
}

/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */