@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/* --------------------------------------------------
 normalize
--------------------------------------------------- */
button,hr,input{overflow:visible;padding:0;}progress,sub,sup{vertical-align:baseline;}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0;}html{line-height:1;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-size:1em;font-family:monospace,monospace;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-size:100%;font-family:inherit;line-height:1;}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none;}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{display:table;max-width:100%;color:inherit;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px-webkit-appearance:textfield;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;}summary{display:list-item}[hidden],template{display:none}table{border-spacing:0;border-collapse:collapse;}td,th{padding:0;font-weight:normal;}ul{margin:0;padding:0;}ul li{margin:0;padding:0;list-style:none;}ol{margin:0;padding:0;}ol li{margin:0;padding:0;list-style:none;}
main,figure,figcaption,time,address,dl,dt,dd{display: block;margin:0;padding:0;}h1,h2,h3,h4,h5{margin:0;font-size:100%;}p{margin:0; padding:0;}address{font-style: normal;}*,*:after,*:before{outline:none;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);scrollbar-color: transparent transparent;scrollbar-width: 0px;-ms-overflow-style: none;}h1,h2,h3,h4{font-weight:normal;}mark{background: none;}html{box-sizing:border-box;}*,*:before,*:after{box-sizing:border-box;}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ -webkit-overflow-scrolling: touch; width: 100%; font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: 0;}
body{
    background: #F5F2EC;
    color: #131832;
    letter-spacing: .1em;
    font-weight: 500;
    font-size: 0.520833333vw/* = 10px / 1920px * 100 */;
    font-family: "Inter", "Zen Kaku Gothic New", sans-serif;
    line-height: 1;

    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}
body.open{ overflow: hidden;}
img{ width: 100%; vertical-align: bottom;}
video{ max-width: 100%; vertical-align: bottom;}
a{ color: #000; text-decoration: none; transition: all .1s ease;}
.sp{ display: none;}
p a{ text-decoration: underline;}

@media screen and (max-width: 768px){
    body{ letter-spacing: .05em; font-size: 2.666666667vw/* = 10px / 375px * 100 */;}
    .pc{ display: none;}
    .sp{ display: block;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: fixed; top: 0; left: 0; z-index: 10; display: flex; padding: 2.604166667vw 5.208333333vw 0; width: 100%; font-size: 1.8em; justify-content: space-between; align-items: flex-start;}
.header .tl-wrap{ display: flex; align-items: center;}
.header h1 a{ display: block; width: 5.208333333vw;}
.header .info{ visibility: visible; margin: 0 0 0 1.041666667vw; line-height: 1.5; opacity: 1; transition: all .1s ease;}
.header.off .info{ visibility: hidden; opacity: 0;}
.header .switch{ display: none;}
.header nav > ul > li + li{ margin: 1.5em 0 0;}
.header nav address,
.header nav aside{ display: none;}

@media screen and (max-width: 768px){
    .header{ padding: 4vw; background: #F5F2EC; font-size: 1em; transition: all .1s ease;}
    .header h1 a{ display: flex; width: 12vw; align-items: center;}
    .header .info{ margin: 0 0 0 2.666666667vw; font-size: 1.2em;}
    .header.off .info{ visibility: visible; opacity: 1;}
    .header .info address{ display: none;}
    .header .switch{ position: fixed; top: 9vw; right: 8vw; display: flex; width: 4vw; height: 2vw; justify-content: center; align-items: center;}
    .header .switch:before,
    .header .switch:after{ position: absolute; left: 50%; width: 100%; height: 0.266666667vw; background: #131832; content: ""; transition: transform .3s ease-out; transform: translate(-50%,0) rotate(0);}
    .header .switch:before{ top: 0;}
    .header .switch:after{ bottom: 0;}
    .header .switch.open:before{ top: 50%; transform: translate(-50%,-50%) rotate(45deg);}
    .header .switch.open:after{top: 50%;  bottom: auto; transform: translate(-50%,-50%) rotate(-45deg);}
    .header nav{ position: fixed; top: -100%; left: 0; visibility: hidden; padding: 10.66666667vw; min-height: 100dvh; width: calc(100vw - 5.333333333vw); width: 100%; background: #fff; line-height: 2.5; opacity: 0; transition: all .5s ease;}
    .header nav.open{ top: 0; visibility: visible; opacity: 1;}
    .header nav > ul{ font-size: 1.8em;}
    .header nav > ul > li + li{ margin: 0;}
    .header nav address,
    .header nav aside{ display: block; margin: 8vw 0 0; padding: 4vw 0 0; border-top: 0.133333333vw solid; font-size: 1.3em;}
}


/* --------------------------------------------------
 main
--------------------------------------------------- */

/* top
--------------------------------------------------- */
.hero{ position: relative; overflow: hidden; max-height: 56.25vw; width: 100%; height: 100vh;}
.hero video{ position: absolute; top: 0; left: 0; z-index: 0; display: block; width: 100%;}
.hero h1{ position: absolute; bottom: 7.8125vw; left: 11.45833333vw; z-index: 5; visibility: hidden; font-weight: 500; font-size: 3.3em; line-height: 2.5; opacity: 0; animation: fadein1 2s ease-in-out forwards;}

@keyframes fadein1 {
    0%{ visibility: hidden; opacity: 0; filter: blur(20px);}
    100% { visibility: visible; opacity: 1; filter: blur(0);}
}

@media screen and (max-width: 768px){
    .hero{ margin: 0 calc(50% - 50vw); min-height: 100dvh; max-height: none; width: 100vw;}
    .hero video{ height: 100%; object-fit: cover;}
    .hero h1{ top: 50%; bottom: auto; left: 8vw; white-space: nowrap; font-size: 1.6em; line-height: 2; transform: translate(0,-50%);}
}

.lead{ position: relative; padding: 15.625vw 0 7.8125vw; text-align: center;}
.lead p{ font-size: 2.2em; line-height: 2.5;}
.lead p + p{ margin: 4em 0 0;}
.blt{ margin: 0 auto 15.625vw; width: 1px; height: 7.8125vw; background: #707070;}

@media screen and (max-width: 768px){
    .lead{ padding: 16vw 8vw 0; text-align: left;}
    .lead p{ font-size: 1.3em; line-height: 2.5;}
    .lead p + p{ margin: 12vw 0 0;}
    .blt{ margin: 16vw auto 32vw; width: 0.133333333vw; height:20vw;}
}

.sec{ position: relative; display: flex; flex-direction: column; padding: 0 15.625vw 15.625vw; align-items: flex-end;}
.sec .tl{ width: 100%;}
.sec h2{ display: flex; flex-direction: column; font-weight: 500; font-size: 3.85em; line-height: 1.5;}
.sec h2 span{ margin: 0 0 1em; font-weight: 400; font-size: 50%; line-height: 1;}
.sec h3{ margin: 2.604166667vw 0 0; font-weight: 500; font-size: 2.6em; line-height: 1.75;}
.sec .detail{ padding: 7.8125vw 0 0; width: 50%;}
.sec p{ font-size: 2.2em; line-height: 2.5;}
.sec p + p{ margin: 4em 0 0;}

@media screen and (max-width: 768px){
    .sec{ padding: 0 8vw 32vw; align-items: flex-start;}
    .sec .tl{ width: 100%;}
    .sec h2{ font-size: 2.2em;}
    .sec h2 span{ margin: 0 0 1em;}
    .sec h3{ margin: 8vw 0 0; font-weight: 500; font-size: 1.8em; line-height: 1.75;}
    .sec .detail{ padding: 12vw 0 0; width: 100%;}
    .sec p{ font-size: 1.3em; line-height: 2.5;}
    .sec p + p{ margin: 12vw 0 0;}
}

.aside{ position: relative; display: flex; flex-direction: column; padding: 0 15.625vw 15.625vw; align-items: center;}
.aside .tl{ width: 50%;}
.aside h2{ display: flex; flex-direction: column; font-weight: 500; font-size: 3.85em; line-height: 1.5;}
.aside .detail{ width: 50%;}
.aside p{ margin: 4em 0 0; font-size: 2.2em; line-height: 2.5;}
.aside p a{ text-decoration: underline;}

@media screen and (max-width: 768px){
    .aside{ padding: 0 8vw 32vw; align-items: flex-start;}
    .aside .tl{ width: 100%;}
    .aside h2{ font-size: 2.2em; line-height: 1.5;}
    .aside .detail{ width: 100%;}
    .aside p{ margin: 12vw 0 0; font-size: 1.3em; line-height: 2.5;}
}

.act{ opacity: 0;}
.is-active{ animation: fadein2 .6s ease-in forwards;}

@keyframes fadein2 {
    0%{ opacity: 0;}
    100% { opacity: 1;}
}

/* page
--------------------------------------------------- */
.page article{ padding: 15.625vw 23.4375vw 15.625vw;}

@media screen and (max-width: 768px){
    .page article{ padding: 32vw 8vw;}
}

.page h1{ display: flex; flex-direction: column; font-weight: 500; font-size: 3.85em; line-height: 1.5;}
.page h1 span{ margin: 0 0 1em; font-weight: 400; font-size: 50%; line-height: 1;}

@media screen and (max-width: 768px){
    .page h1{ font-size: 2.2em; line-height: 1.5;}
    .page h1 span{ line-height: 1;}
}

.page .content{ position: relative; padding: 7.8125vw 0 0;}
.page section{ position: relative; padding: 15.625vw 0 0;}
.page .content > section:first-child{ padding: 0;}

@media screen and (max-width: 768px){
    .page .content{ padding: 16vw 0 0;}
    .page section{ padding: 32vw 0 0;}
    .page .content > section:first-child{ padding: 0;}
}

.page p{ margin: 4em 0 0; font-size: 2.2em; line-height: 2.5;}
.page section > p:first-child{ margin: 0;}

@media screen and (max-width: 768px){
    .page p{ margin: 12vw 0 0; font-size: 1.3em; line-height: 2.5;}
    .page section > p:first-child{ margin: 0;}
}

.page h2{ font-weight: 500; font-size: 3.85em; line-height: 1.5;}
.page h2.lead2{ font-size: 3.3em; line-height: 2;}

@media screen and (max-width: 768px){
    .page h2{ font-size: 2.2em;}
    .page h2.lead2{ font-size: 1.95em;}
}

.profile .img1{ position: absolute; top: 0; right: 0; width: 15.625vw;}
.profile .img1 figcaption{ padding: 1em 0 0; text-align: center; font-size: 2em;}

@media screen and (max-width: 768px){
    .profile .img1{ position: relative; top: auto; right: auto; margin: 0 auto; width: 45vw;}
    .profile .img1 figcaption{ padding: 1em 0 0; text-align: center; font-size: 1.2em;}
}

.list1{ margin: 4em 0 0 1.5em; font-size: 2.2em; line-height: 2.5;}
.list1 > li{ list-style: disc;}

@media screen and (max-width: 768px){
    .list1{ margin: 12vw 0 0 1.5em; font-size: 1.3em; line-height: 2.5;}
}

.table1{ margin: 4em 0 0; width: 100%; text-align: left; font-weight: 500; font-size: 2.2em; line-height: 2.5;}
.table1 th{ width: 25%; vertical-align: baseline; font-weight: 500;}
.table1 td{ padding: 0 0 2em; font-weight: 500;}
.table1 p{ margin: 0; font-size: 100%;}

@media screen and (max-width: 768px){
    .table1{ margin: 12vw 0 0; font-size: 1.3em;}
    .table1 th{ display: block; width: 100%;}
    .table1 td{ display: block; padding: 0 0 6vw; width: 100%;}
}

.form{ margin: 4em 0 0; padding: 5rem; border-radius: 1em; background: rgba(0,0,0,.05); font-size: 2.2em;}
section > .form:first-child{ margin: 0;}
.form h3{ padding: 0 0 4rem; color: #f00; font-weight: 500;}
.form table{ width: 100%; text-align: left; font-weight: 500; line-height: 2.5;}
.form table th{ width: 30%; vertical-align: baseline; font-weight: 500;}
.form table th span{ display: inline-block; margin: 0 0 0 1em; padding: .5em; background: #f00; color: #fff; vertical-align: text-bottom; font-size: 60%; line-height: 1;}
.form table td{ padding: 0 0 2rem; font-weight: 500;}
.form input[type="text"],
.form input[type="email"],
.form textarea{ padding: 1rem; width: 100%; border: 1px solid #ddd; line-height: 1;}
.form textarea{ height: 10em; line-height: 1.5;}
.form .submit{ margin: 2em 0 0; text-align: center;}
.form .submit button{ padding: 1em 0; width: 30%; border: none; border-radius: 0; background: #000; color: #fff; font-weight: 500; cursor: pointer;}
.form p{ margin: 0; font-size: 100%;}
.form p + p{ margin: 2em 0 0;}

@media screen and (max-width: 768px){
    .form{ margin: 12vw 0 0; padding: 8vw; border-radius: .5em; font-size: 1.3em;}
    .form table th{ display: block; width: 100%;}
    .form table th span{ display: inline-block; margin: 0 0 0 1em; padding: .5em; background: #f00; color: #fff; vertical-align: text-bottom; font-size: 60%; line-height: 1;}
    .form table td{ display: block; padding: 0 0 2rem; width: 100%; font-weight: 500;}
    .form input[type="text"],
    .form input[type="email"],
    .form textarea{ padding: 1rem; width: 100%; border: 1px solid #ddd; line-height: 1;}
    .form textarea{ height: 10em; line-height: 1.5;}
    .form .submit{ margin: 0; text-align: center;}
    .form .submit button{ padding: 1em 0; width: 40%; border: none; border-radius: 0; background: #000; color: #fff; font-weight: 500; cursor: pointer;}
}

.privacy ol{ margin: 2em 0 0 1.4em; font-size: 2.2em; line-height: 2;}
.privacy ol > li{ list-style: decimal;}
.privacy ol > li + li{ margin: 1em 0 0;}
.privacy .right{ text-align: right;}
.privacy h3{ margin: 8em 0 0; font-weight: 500; font-size: 3.3em; line-height: 1.75;}
.privacy .box{ margin: 8em 0 0; padding: 8em 0; background: rgba(0,0,0,.05); text-align: center;}
.privacy .box h3{ margin: 0; font-size: 2.75em; line-height: 1.75;}
.privacy .box p{ margin: 1em 0 0; font-size: 2.2em; line-height: 2;}
.privacy h4{ margin: 4em 0 0; font-weight: 500; font-size: 2.6em; line-height: 1.75;}
.privacy h5{ margin: 4em 0 0; font-weight: 500; font-size: 2.6em; line-height: 1.75;}
.privacy h4 + p,
.privacy h5 + p{ margin: 2em 0 0;}
.privacy h5 + p + ol{ margin: 2em 0 0 1.4em;}
.privacy ul{ margin: 2em 0 0 1em; font-size: 2.2em; line-height: 2;}
.privacy ul > li{ list-style: disc;}
.privacy ul > li + li{ margin: 1em 0 0;}
.privacy dl{ font-size: 2.2em; line-height: 2;}
.privacy dt{ margin: 4em 0 0;}
.privacy dd{ padding: 1em 0 0;}
.privacy table{ width: 100%; border: 1px solid #dbd7d3; text-align: center; font-weight: 500;}
.privacy th{ padding: 1em 0; border: 1px solid #dbd7d3; background: rgba(0,0,0,.05); text-align: center; font-weight: 500;}
.privacy th:first-child{ width: calc(100% / 3);}
.privacy th:nth-child(2){ width: calc(100% / 3);}
.privacy td{ padding: 1em 0; border: 1px solid #dbd7d3; text-align: center; font-weight: 500;}

@media screen and (max-width: 768px){
    .privacy ol{ margin: 2em 0 0 1.4em; font-size: 1.3em; line-height: 2;}
    .privacy ol > li{ list-style: decimal;}
    .privacy ol > li + li{ margin: 1em 0 0;}
    .privacy .right{ text-align: right;}
    .privacy h3{ margin: 8em 0 0; font-weight: 500; font-size: 1.95em; line-height: 1.75;}
    .privacy .box{ margin: 4em 0 0; padding: 4em 0; background: rgba(0,0,0,.05); text-align: center;}
    .privacy .box h3{ margin: 0; font-size: 1.625em; line-height: 1.75;}
    .privacy .box p{ margin: 1em 0 0; font-size: 1.3em; line-height: 2;}
    .privacy h4{ margin: 4em 0 0; font-weight: 500; font-size: 1.625em; line-height: 1.75;}
    .privacy h5{ margin: 4em 0 0; font-weight: 500; font-size: 1.625em; line-height: 1.75;}
    .privacy h4 + p,
    .privacy h5 + p{ margin: 2em 0 0;}
    .privacy h5 + p + ol{ margin: 2em 0 0 1.4em;}
    .privacy ul{ margin: 2em 0 0 1em; font-size: 1.3em; line-height: 2;}
    .privacy ul > li{ list-style: disc;}
    .privacy ul > li + li{ margin: 1em 0 0;}
    .privacy dl{ font-size: 1.3em; line-height: 2;}
    .privacy dt{ margin: 4em 0 0;}
    .privacy dd{ padding: 1em 0 0;}
    .privacy table{ width: 100%; border: 1px solid #dbd7d3; text-align: center; letter-spacing: normal;font-weight: 500; font-size: 90%; }
    .privacy th{ padding: 1em 0; border: 1px solid #dbd7d3; background: rgba(0,0,0,.05); text-align: center; font-weight: 500;}
    .privacy th:first-child{ width: calc(100% / 3);}
    .privacy th:nth-child(2){ width: calc(100% / 3);}
    .privacy td{ padding: 1em 0; border: 1px solid #dbd7d3; text-align: center; font-weight: 500;}
}


/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ position: relative; display: flex; padding: 0 5.208333333vw 2.604166667vw; justify-content: space-between;}
.footer address{ display: none;}
.footer aside{ font-size: 1.6em;}
.footer aside ul{ display: flex;}
.footer aside ul > li + li{ margin: 0 0 0 2em; padding: 0 0 0 2em; border-left: 1px solid;}
.footer small{ font-size: 1.6em;}

@media screen and (max-width: 768px){
    .footer{ flex-direction: column; padding: 0 0 8vw; text-align: center; align-items: center; justify-content: flex-start;}
    .footer address{ display: block; font-size: 1em; line-height: 2;}
    .footer aside{ margin: 4vw 0 0; font-size: 1em;}
    .footer aside ul{ display: flex; justify-content: center;}
    .footer aside ul > li + li{ margin: 0 0 0 1.5em; padding: 0 0 0 1.5em; border-left: 0.133333333vw solid;}
    .footer small{ display: block; margin: 8vw 0 0; font-size: 1em;}
}