@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&family=Noto+Serif+JP:wght@700..900&display=swap');

/* reset */
/* -------------------------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0; padding:0;}
html {width:100%; height:100%; overflow-y:scroll;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:bold;}
p, ul, ol, dl, address, blockquote, table, div {font-size:100%;}
p {margin:0 0 0 0;}
ol,ul {list-style:none;}
fieldset,img {border:0; vertical-align:top;}
table {border-collapse:collapse; border-spacing:0;}
caption,th {text-align:left;}
th {vertical-align:top; font-weight:normal; text-align:left;}
td {vertical-align:top;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}


/* common */
/* -------------------------------------------------------- */
html,body {font-variant-ligatures:none;}
html {font-size:62.5%;}
body {font-size:14px; font-size:1.4rem; font-family:"Noto Serif JP", serif; font-weight:700; color:#333; text-align:center; -webkit-text-size-adjust:100%; text-size-adjust:100%; background:none;}

h1, h2, h3, h4, h5, h6, h7 {font-weight:700; line-height:1.2;}
p, li, dt, dd, th, td, address, blockquote, div {line-height:1.6;}
input, select, option, textarea, button {font-size:14px; font-size:1.4rem; font-family:"Noto Serif JP", serif; font-weight:700; line-height:1.4; vertical-align:middle; color:inherit; outline:none;}
input[type='submit'],input[type='reset'],input[type='button'], button {color:inherit; cursor:pointer; -ms-appearance:none; -webkit-appearance:none; appearance:none;}
:placeholder-shown {color:#ccc;}
::-webkit-input-placeholder {color:#ccc;}
:-moz-placeholder {color:#ccc; opacity:1;}
::-moz-placeholder {color:#ccc; opacity:1;}
:-ms-input-placeholder {color:#ccc;}

strong {font-weight:bold;}
ol {list-style-type:decimal; margin-left:2.2em;}
img {max-width:100%; width:auto; height:auto; line-height:0; vertical-align:top; border:0; display:inline;}

a {color:#333; text-decoration:none;}
a:hover {color:#333; text-decoration:underline;cursor:pointer;}


/* decision */
/* -------------------------------------------------------- */
#bpCheck {display:none;}

body .pc {display:block;}
br.pc, span.pc, img.pc {display:inline;}
body .sp, br.sp, span.sp, img.sp {display:none;}

a.off {pointer-events:none; cursor:default; opacity:0.3;}
a.tel {pointer-events:none; cursor:default;}
body.mobile a.tel {pointer-events:auto; cursor:pointer;}

@media screen and (max-width:767px){
    #bpCheck {display:block;}

    body .pc, br.pc, span.pc, img.pc {display:none;}
    body .sp {display:block;}
    br.sp, span.sp, img.sp {display:inline;}
}


/* container */
/* -------------------------------------------------------- */
#container {width:100%; overflow:hidden;}


/* header */
/* -------------------------------------------------------- */
#header {padding:0 0 10px 0;}
#header .ttl {text-align:left;}
#header .ttl .en {font-size:5.4rem; line-height:1; color:#b3b3b3; display:block;}
#header .ttl .jp {font-size:2.8rem; line-height:1; margin:0; display:block;}

#header .ttl.parallax.on .en {opacity:1; transform:translate3d(0,0,0); transition:opacity 0.6s 0.3s ease, transform 0.6s 0.3s ease;}

#header .ttl.parallax.on .jp {opacity:1; transform:translate3d(0,0,0); transition:opacity 0.6s 0.3s ease, transform 0.6s 0.3s ease;}




/* footer */
/* -------------------------------------------------------- */
#footer {padding:0 0 20px 0;position: fixed;bottom:0;text-align: center;width: 100%;background: white;}
#footer .logo {max-width:150px; margin:0 auto;}
#footer .logo a {display:block; transition:opacity 0.3s ease;}
#footer .logo a:hover {opacity:0.7;}
#footer .nav {margin:30px 0 0 0; display:flex; flex-wrap:wrap; justify-content:center;}
#footer .nav > li {font-size:1.7rem; font-weight:900; padding:0 2.0em;}
#footer .copy {font-family:"Noto Sans JP", sans-serif; font-size:1.5rem; font-weight:400; margin:10px 0 0 0;}

/* contents */
/* -------------------------------------------------------- */
.sec {max-width:1000px; text-align:left; margin:0 auto; padding:0 10px; box-sizing:border-box;}

#loading-layer {width:100%; height:100%; background-color:rgba(255,255,255,0.8); display:block; position:fixed; top:0; left:0; opacity:0; pointer-events:none; z-index:9999; transition:opacity 0.3s ease;}
#loading-layer svg {width:60px; height:60px; margin:-30px 0 0 -30px; display:block; position:absolute; top:50%; left:50%;}
body.loading #loading-layer {opacity:1; pointer-events:auto;}
body.loading #loading-layer svg {animation:loading 2s linear 0s infinite normal none;}
@keyframes loading {
    0% {transform:rotate(0deg);}
    100% {transform:rotate(360deg);}
}

@media screen and (max-width:767px){
    .sec {padding:0 4.0vw;}
}

/* top */
.top-mv-sec {width:100%; height:100vh; padding:0 5.0vw; box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:relative;}
.top-mv-sec .logo {max-width:430px; width:100%; height:140px; position:relative;}
.top-mv-sec .logo img {width:100%; height:auto; display:block;}
.top-mv-sec .logo > div {width:100%; position:absolute; top:0; left:0;}
.top-mv-sec .logo .mark1 {opacity:0; transform:scale3d(1.1,1.1,1); transform-origin:15.5% 50%;}
.top-mv-sec .logo .mark2 {opacity:0; transform:scale3d(0.9,0.9,1); filter:blur(3px); transform-origin:15.5% 50%;}
.top-mv-sec .logo .type1 {opacity:0; transform:translate3d(0,-5px,0);}
.top-mv-sec .logo .type2 {opacity:0; transform:translate3d(0,5px,0);}
.top-mv-sec .scrolldown {width:100%; position:absolute; bottom:0; left:0; animation:arrowmove 1s ease-in-out infinite; opacity:0;}
.top-mv-sec .scrolldown a {margin:0 auto; display:inline-block; transition:opacity 0.3s ease;}
.top-mv-sec .scrolldown a:hover {opacity:0.7;}
body.load .top-mv-sec .logo .mark1 {opacity:1; transform:scale3d(1,1,1); transition:opacity 2.0s 2.0s ease, transform 3.0s 2.0s ease;}
body.load .top-mv-sec .logo .mark2 {opacity:1; transform:scale3d(1,1,1); filter:blur(0); transition:opacity 2.0s 1.0s ease, transform 3.0s 1.0s ease, filter 3.0s 1.0s ease;}
body.load .top-mv-sec .logo .type1 {opacity:1; transform:translate3d(0,0,0); transition:opacity 2.0s 4.5s ease, transform 2.0s 4.5s ease;}
body.load .top-mv-sec .logo .type2 {opacity:1; transform:translate3d(0,0,0); transition:opacity 2.0s 4.5s ease, transform 2.0s 4.5s ease;}
body.load .top-mv-sec .scrolldown {opacity:1; transition:opacity 1.0s 6.0s ease;}
@keyframes arrowmove{
    0%{bottom:0;}
    50%{bottom:2%;}
    100%{bottom:0;}
}

.top-catch-sec {padding:50px 0 0 0;}
.top-catch-sec .clm > div > div {text-align:center; display:inline-block;}
.top-catch-sec .clm > div:nth-of-type(1) {text-align:left;}
.top-catch-sec .clm > div:nth-of-type(2) {text-align:right;}
.top-catch-sec .clm > div:nth-of-type(2) > div {margin:0 0 0 auto;}
.top-catch-sec .clm > div:nth-of-type(3) {margin:0 0 0 12%;}
.top-catch-sec .clm > div:nth-of-type(3) .txt1 {margin:1.5em 0 0 0;}
.top-catch-sec .clm > div:nth-of-type(4) {margin:200px 0 0 0;}
.top-catch-sec .clm > div:nth-of-type(4) > div {display:block;}
.top-catch-sec .txt1 {font-size:3.8rem; line-height:1; color:#b3b3b3;}
.top-catch-sec .txt2 {font-size:3.5rem; line-height:1.2; margin:0.5em 0 0 0;}
.top-catch-sec .txt3 {font-size:1.7rem; line-height:1.8; margin:1.0em 0 0 0;}
.top-catch-sec .txt4 {font-size:2.0rem; line-height:2.2;}
.top-catch-sec .txt4 > span {display:block;}
.top-catch-sec .parallax .txt1 {opacity:0; transform:translate3d(0,15px,0);}
.top-catch-sec .parallax.on .txt1 {opacity:1; transform:translate3d(0,0,0); transition:opacity 0.6s 0.3s ease, transform 0.6s 0.3s ease;}
.top-catch-sec .parallax .txt2 {opacity:0; transform:translate3d(0,15px,0);}
.top-catch-sec .parallax.on .txt2 {opacity:1; transform:translate3d(0,0,0); transition:opacity 0.6s 0.6s ease, transform 0.6s 0.6s ease;}
.top-catch-sec .parallax .txt3 {opacity:0; transform:translate3d(0,15px,0);}
.top-catch-sec .parallax.on .txt3 {opacity:1; transform:translate3d(0,0,0); transition:opacity 0.6s 0.9s ease, transform 0.6s 0.9s ease;}
.top-catch-sec .parallax .txt4 > span {opacity:0; transform:translate3d(0,15px,0);}
.top-catch-sec .parallax.on .txt4 > span {opacity:1; transform:translate3d(0,0,0); transition:opacity 0.6s 0.3s ease, transform 0.6s 0.3s ease;}
.top-catch-sec .parallax.on .txt4 > span:nth-of-type(1) {transition-delay:0.3s, 0.3s;}
.top-catch-sec .parallax.on .txt4 > span:nth-of-type(2) {transition-delay:0.5s, 0.5s;}
.top-catch-sec .parallax.on .txt4 > span:nth-of-type(3) {transition-delay:0.7s, 0.7s;}
.top-catch-sec .parallax.on .txt4 > span:nth-of-type(4) {transition-delay:0.9s, 0.9s;}
.top-catch-sec .parallax.on .txt4 > span:nth-of-type(5) {transition-delay:1.1s, 1.1s;}
.top-catch-sec .parallax.on .txt4 > span:nth-of-type(6) {transition-delay:1.3s, 1.3s;}
.top-catch-sec .parallax.on .txt4 > span:nth-of-type(7) {transition-delay:1.5s, 1.5s;}
.top-catch-sec .parallax.on .txt4 > span:nth-of-type(8) {transition-delay:1.7s, 1.7s;}

.top-info-sec {margin:200px 0 0 0;}
.top-info-sec .sec {max-width:670px;}
.top-info-sec dl {margin:30px 0 0 0; display:flex;}
.top-info-sec dt {width:7em; font-size:1.8rem; line-height:1.4;}
.top-info-sec dd {font-size:2.2rem; line-height:1.4; flex:1;}
.top-info-sec dl.parallax {opacity:0; transform:translate3d(0,15px,0);}
.top-info-sec dl.parallax.on {opacity:1; transform:translate3d(0,0,0); transition:opacity 0.6s 0.3s ease, transform 0.6s 0.3s ease;}

@media screen and (max-width:767px){
    .top-mv-sec .logo {height:14.0vw;}

    .top-catch-sec {padding:30px 0 0 0;}
    .top-catch-sec .clm > div:nth-of-type(3) .txt1 {margin:1.5em 0 0 0;}
    .top-catch-sec .clm > div:nth-of-type(4) {margin:100px 0 0 0;}
    .top-catch-sec .txt1 {font-size:2.4rem; margin:1.5em 0 0 0;}
    .top-catch-sec .txt2 {font-size:2.0rem;}
    .top-catch-sec .txt3 {font-size:1.4rem;}
    .top-catch-sec .txt4 {font-size:1.6rem;}

    .top-info-sec {margin:100px 0 0 0;}
    .top-info-sec dl {margin:15px 0 0 0; display:block;}
    .top-info-sec dt {width:auto; font-size:1.4rem;}
    .top-info-sec dd {font-size:1.6rem;}
}

/* about */
.about-sec .clm1 {margin:120px 0 0 0;}
.about-sec .clm2 {margin:80px 0 0 0;}
.about-sec .clm3 {margin:0 -3px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.about-sec .clm3 > div {width:33.33%; padding:3px; box-sizing:border-box;}
.about-sec .txt1 {font-size:3.4rem;}
.about-sec .txt2 {padding:15px 0 0 0;}
.about-sec .txt2 dl {margin:40px 0 0 0;}
.about-sec .txt2 dt {font-size:1.9rem;}
.about-sec .txt2 dd {font-size:2.4rem; margin:0.2em 0 0 0;}
.about-sec .txt3 {font-size:2.0rem; line-height:2.2; margin:1.5em 0 0 0 ;}
.about-sec .txt4 {padding:15px 0 0 0;}
.about-sec .txt4 dl {margin:30px 0 0 0;}
.about-sec .txt4 dt {font-size:2.4rem;}
.about-sec .txt4 dd {font-size:1.4rem; margin:0.2em 0 0 0;}
.about-sec .parallax {opacity:0; transform:translate3d(0,15px,0);}
.about-sec .parallax.on {opacity:1; transform:translate3d(0,0,0); transition:opacity 0.6s 0.3s ease, transform 0.6s 0.3s ease;}

@media screen and (max-width:767px){
    .about-sec .clm1 {margin:50px 0 0 0;}
    .about-sec .clm2 {margin:30px 0 0 0;}
    .about-sec .clm3 {margin:0 -2px;}
    .about-sec .clm3 > div {width:50%; padding:2px;}
    .about-sec .txt1 {font-size:2.4rem;}
    .about-sec .txt2 {padding:10px 0 0 0;}
    .about-sec .txt2 dl {margin:20px 0 0 0;}
    .about-sec .txt2 dt {font-size:1.4rem;}
    .about-sec .txt2 dd {font-size:2.0rem;}
    .about-sec .txt3 {font-size:1.6rem; line-height:1.8;}
    .about-sec .txt4 {padding:10px 0 0 0;}
    .about-sec .txt4 dl {margin:15px 0 0 0;}
    .about-sec .txt4 dt {font-size:1.8rem;}
    .about-sec .txt4 dd {font-size:1.2rem;}
}

/* contact */
.contact-sec .form {display:block;}
.contact-sec .form > dl {max-width:330px; margin:50px 0 0 0;}
.contact-sec .form > dl.type1 {max-width:600px;}
.contact-sec .form > dl > dt {font-size:1.8rem;}
.contact-sec .form > dl > dd {padding:0.5em 0; border-bottom:solid 1px #333;}
.contact-sec .form .btns {margin:60px 0 0 0; display:flex; flex-wrap:wrap;}
.contact-sec .form .btns > div {padding:20px 20px 0 0;}
.contact-sec .form input[type="text"],
.contact-sec .form input[type="email"],
.contact-sec .form select,
.contact-sec .form textarea {width:100%; font-size:1.8rem; line-height:1; padding:0.5em; background-color:transparent; border:1px solid transparent; border-radius:5px; box-sizing:border-box; outline:none; resize:none; transition:border 0.3s ease;}
.contact-sec .form textarea {height:120px; font-size:1.6rem; line-height:1.4;}
.contact-sec .form input[type="text"]:focus,
.contact-sec .form input[type="email"]:focus,
.contact-sec .form select:focus,
.contact-sec .form textarea:focus {border:1px solid #333;}
.contact-sec .form button {font-size:2.2rem; line-height:1; padding:0.5em 1.5em; background-color:#fff; border:1px solid #333; display:block; transition:background-color 0.3s ease;}
.contact-sec .form button:hover {background-color:#ccc;}
.contact-sec .form .erro-txt {font-size:1.6rem; color:#c00; margin:5px 0 0 0;}
.contact-sec .form input.inputCheck {display:none;}
.contact-sec .txt1 {font-size:3.0rem;}
.contact-sec .txt2 p {font-size:1.8rem; line-height:2.2; margin:1.0em 0 0 0;}
.contact-sec .parallax {opacity:0; transform:translate3d(0,15px,0);}
.contact-sec .parallax.on {opacity:1; transform:translate3d(0,0,0); transition:opacity 0.6s 0.3s ease, transform 0.6s 0.3s ease;}

@media screen and (max-width:767px){
    .contact-sec .form > dl {margin:30px 0 0 0;}
    .contact-sec .form > dl > dt {font-size:1.6rem;}
    .contact-sec .form .btns {margin:30px 0 0 0;}
    .contact-sec .form .btns > div {padding:10px 10px 0 0;}
    .contact-sec .form input[type="text"],
    .contact-sec .form input[type="email"],
    .contact-sec .form select,
    .contact-sec .form textarea {font-size:1.6rem;}
    .contact-sec .form textarea {height:100px; font-size:1.6rem;}
    .contact-sec .form button {font-size:1.8rem;}
    .contact-sec .form .erro-txt {font-size:1.2rem;}
    .contact-sec .txt1 {font-size:2.0rem;}
    .contact-sec .txt2 p {font-size:1.4rem; line-height:1.8;}
}

/* privacy-policy */
.privacy-policy-sec .clm1 {margin:120px 0 0 0;}
.privacy-policy-sec .txt1 {font-size:3.4rem;}
.privacy-policy-sec .txt2 {margin:30px 0 0 0;}
.privacy-policy-sec .txt2 li {font-size:1.8rem; line-height:2.2; padding:0 0 0 2.0em; position:relative;}
.privacy-policy-sec .txt2 li span {position:absolute; top:0; left:0;}
.privacy-policy-sec .txt3 {font-size:1.8rem; line-height:2.2; margin:1.5em 0 0 0 ;}
.privacy-policy-sec .parallax {opacity:0; transform:translate3d(0,15px,0);}
.privacy-policy-sec .parallax.on {opacity:1; transform:translate3d(0,0,0); transition:opacity 0.6s 0.3s ease, transform 0.6s 0.3s ease;}

@media screen and (max-width:767px){
    .privacy-policy-sec .clm1 {margin:50px 0 0 0;}
    .privacy-policy-sec .txt1 {font-size:2.4rem;}
    .privacy-policy-sec .txt2 {margin:15px 0 0 0;}
    .privacy-policy-sec .txt2 li {font-size:1.6rem;}
    .privacy-policy-sec .txt3 {font-size:1.6rem; line-height:1.8;}
}


#header h1{
    position: relative;
}

#header a{
    display: inline-block;
    position: absolute;
    right: 140px;
    top: 18px;
    border: 1px solid #000000;
    padding: 10px 15px;
    font-size: 16px;
    background: #555;
    color: white;
}
#header a.info-page{
    right: 10px;
}
#header a img{
    height: 20px;
    width: auto;
    display: inline-block;
    margin-right: 5px;
    margin-top: 3px;
}
#header a p{
    display: inline-block;
}
#header a.mypage{
    display: inline-block;
    position: absolute;
    right: 20px;
    top: 18px;
    border: 1px solid #000000;
    padding: 10px 15px;
    font-size: 16px;
    background: white;
    color: black;
}
.error{
    color: red;
}
.hosoku{
    font-size: 16px;
    font-weight: normal;
    display: inline-block;
    margin-left: 15px;
}