@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;
}
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){
    html{ scroll-padding-top: 18.66666667vw;}
    body{ font-size: 3.2vw;}
    .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 address{ visibility: visible; margin: 0 0 0 1.041666667vw; line-height: 1.5; opacity: 1; transition: all .3s ease;}
.header address.off{ visibility: collapse; opacity: 0;}
.header nav ul > li{ margin: 0 0 1.5em;}


/* --------------------------------------------------
 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);}
}

.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;}

.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;}

.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;}

.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;}

.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;}

.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;}

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

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

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

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

.table1{ font-size: 2.2em; margin: 4em 0 0; line-height: 2.5; width: 100%; font-weight: 500; text-align: left;}
.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%;}

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


/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ position: relative; padding: 0 5.208333333vw 2.604166667vw; text-align: right;}
.footer small{ font-size: 1.6em;}