@charset "UTF-8";
@import url("https://use.typekit.net/dbc0dlk.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&family=Open+Sans&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}h1{margin:.67em 0;font-size:2em;}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;}

*::-webkit-media-controls-panel {
  display: none !important;

  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none !important;

  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */
*::-webkit-media-controls-start-playback-button {
  display: none !important;

  -webkit-appearance: none;
}

/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    background: #F4F5F7;
    color: #404040;
    letter-spacing: .1rem;
    font-size: 1.4rem;
    font-family: canto, 'Noto Serif JP', serif;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
}
img{ width: 100%; vertical-align: bottom;}
a{ color: #404040; text-decoration: none; transition: all .1s ease;}
.sp{ display: none;}

@media screen and (max-width: 768px){
    body{ letter-spacing: normal;}
    .pc{ display: none;}
    .sp{ display: block;}
}

.act1 { opacity: 0; transform: translateY(45px);}
.fadein1 {
    animation-name: fadein1;
    animation-duration: 2s;

    animation-fill-mode: forwards;
}
@keyframes fadein1 {
    0% { opacity: 0; transform: translateY(45px);}
    100% { opacity: 1; transform: translateY(0);}
}

.act2 { opacity: 0; animation: 2s fadein2 .5s forwards;}
@keyframes fadein2 {
    0% { opacity: 0;}
    100% { opacity: 1;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header { position: fixed; z-index: 200; display: flex; padding: 0 2.5vw 18px; width: 100%; height: 50px; background: #F4F5F7; line-height: 1; justify-content: space-between; align-items: flex-end;}
.header h1{ width: 136px;}
.header nav ul{ display: flex; font-size: 1.2rem; font-family: 'Noto Serif JP', serif; align-items: flex-end;}
.header nav ul > li{ padding: 0 0 0 40px;}
.header nav ul > li a{ position: relative; display: inline-block;}
.header nav ul > li a:before,
.header nav ul > li a:after{ position: absolute; bottom: -5px; width: 0; height: 1px; background: #404040; content: ""; transition: all .3s;}
.header nav ul > li a:before{ left: 50%;}
.header nav ul > li a:after{ right: 50%;}
.header nav ul > li a:hover:before{ width: 50%;}
.header nav ul > li a:hover:after{ width: 50%;}

@media screen and (max-width: 768px){
    .header{ padding: 0 15px 15px;}
    .header h1{ width: 36.26vw;}
    .header nav ul > li{ padding: 0 0 0 20px;}
    .header nav ul > li:first-child{ display: none;}
}

/* --------------------------------------------------
 main
--------------------------------------------------- */
main{ padding: 50px 0 0; line-height: 1.625;}

@media screen and (max-width: 768px){
}

.blt span{ position: relative; display: inline-block; padding: 0 2em; font-family: canto, serif; font-style: italic;}
.blt span:before,
.blt span:after { position: absolute; top: 50%; width: 60px; border-top: 1px solid #707070; content: "";}
.blt span:before { right: 100%;}
.blt span:after { left: 100%;}

@media screen and (max-width: 768px){
    .blt span{ padding: 0 1em;}
    .blt span:before,
    .blt span:after { width: 40px;}
}

.sec1{ position: relative; /*overflow: hidden; min-height: calc(var(--vh, 1vh) * 100 - 50px);*/ width: 100vw;}
.sec1 video{ width: 100%;}
.arrow{ position: absolute; bottom: -15px; left: 50%; transition: all .5s; transform: translate(-50%,0);}
.arrow img{ width: 36px;}
.arrow:hover{ bottom: -30px;}

@media screen and (max-width: 768px){
    .sec1{ position: relative; overflow: visible; min-height: 0;}
    .sec1 video{ position: relative; top: auto; left: auto; width: 100%; transform: none;}
    .arrow{ display: none;}
}

.sec2{ padding: 140px 0 90px; text-align: center;}
.sec2 h2 img{ width: 560px;}
.sec2 p{ margin: 30px 0 0; font-size: 1.6rem;}
.sec2 h2 + p{ margin: 80px 0 0;}

@media screen and (max-width: 768px){
    .sec2{ padding: 40px 0 50px;}
    .sec2 h2 img{ width: 100%;}
    .sec2 p{ font-size: 1.4rem;}
    .sec2 h2 + p{ margin: 30px 0 0;}
}

.sec3{ margin: 0 auto; padding: 75px; width: 920px; background: #fff;}
.sec3 h2{ text-align: center; font-size: 1.6rem;}
.sec3 h3{ margin: 20px 0 0; text-align: center; line-height: 1;}
.sec3 h3 span{ display: block;}
.sec3 h3 .t2{ padding: 20px 0 0; font-size: 3.2rem;}
.sec3 h3 .t3{ padding: 15px 0 0;}

@media screen and (max-width: 768px){
    .sec3{ padding: 50px 20px; width: 100%;}
}

.sec3 .flex{ display: flex; padding: 50px 0 0; justify-content: space-between;}
.sec3 .flex.reverse{ flex-direction: row-reverse;}
.sec3 .flex figure{ width: 210px;}
.sec3 .flex figure.img3{ width: 220px;}
.sec3 .flex dl{ width: 510px; font-size: 1.6rem;}
.sec3 .flex dt{ position: relative; padding: 0 0 0 6rem; color: #7B7044;}
.sec3 .flex dt:before{ position: absolute; top: 0; left: 0; content: "Q"; font-size: 3.6rem; font-family: tenez, sans-serif; line-height: 1;}
.sec3 .flex dt:after{ position: absolute; top: 1rem; left: 3rem; content: "_"; font-size: 3rem; line-height: 1;}
.sec3 .flex dd{ position: relative; margin: 30px 0 0; padding: 0 0 0 6rem;}
.sec3 .flex dd:before{ position: absolute; top: 0; left: 0; content: "A"; font-size: 3.6rem; font-family: tenez, sans-serif; line-height: 1;}
.sec3 .flex dd:after{ position: absolute; top: 1rem; left: 3rem; content: "_"; font-size: 3rem; line-height: 1;}
.sec3 .flex dd + dt{ margin: 30px 0 0;}

@media screen and (max-width: 768px){
    .sec3 .flex{flex-direction: column; padding: 30px 0 0; }
    .sec3 .flex.reverse{ flex-direction: column;}
    .sec3 .flex figure{ width: 100%;}
    .sec3 .flex figure.img3{ width: 100%;}
    .sec3 .flex dl{ margin: 30px 0 0; width: 100%; font-size: 1.4rem;}
    .sec3 .flex dt{ padding: 0 0 0 4rem;}
    .sec3 .flex dt:before{ top: 0; left: 0; font-size: 2.4rem;}
    .sec3 .flex dt:after{ top: 1rem; left: 2rem; font-size: 2rem;}
    .sec3 .flex dd{ margin: 20px 0 0; padding: 0 0 0 4rem;}
    .sec3 .flex dd:before{ font-size: 2.4rem;}
    .sec3 .flex dd:after{ top: 1rem; left: 2rem; font-size: 2rem;}
    .sec3 .flex dd + dt{ margin: 30px 0 0;}
}

.sec3 .prof{ margin: 70px auto 0; width: 620px;}
.sec3 .prof dt{ position: relative; text-align: center;}
.sec3 .prof dt:after{ position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background: #707070; content: "";}
.sec3 .prof dt span{ position: relative; z-index: 2; display: inline-block; padding: 0 1em; background: #fff; font-size: 1.6rem;}
.sec3 .prof dt span em{ font-style: italic;}
.sec3 .prof dd{ margin: 20px 0 0; text-align: justify;}

@media screen and (max-width: 768px){
    .sec3 .prof{ margin: 40px 0 0; width: 100%;}
}

.sec4{ padding: 0 5vw;}
.sec4 h2{ margin: 100px 0 0; text-align: center;}
.sec4 .t1 span{ font-size: 2.6rem; font-style: normal;}
.sec4 .t2 span{ font-size: 2rem; font-style: normal;}
.sec4 .t2 em{ font-style: italic;}

@media screen and (max-width: 768px){
    .sec4{ padding: 50px 20px 0;}
    .sec4 h2{ margin: 0;}
    .sec4 .t1{ font-size: 1.8rem;}
    .sec4 .t2{ margin: 50px 0 0;}
}

.list-cnt{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.list-cnt > li{ padding: 50px 0 0; width: calc(50% - 25px);}
.list-cnt.row4 > li{ width: calc(25% - 25px);}
.list-cnt figure a{ position: relative; display: block;}
.list-cnt figure img{ opacity: 1; transition: all .5s;}
.list-cnt figcaption{ position: absolute; top: 50%; left: 50%; display: inline-block; padding: 10px 20px; border: 1px solid #707070; white-space: nowrap; font-size: 1.6rem; line-height: 1; opacity: 0; transition: all .5s; transform: translate(-50%,-50%);}
.list-cnt figure a:hover{ cursor: pointer;}
.list-cnt figure a:hover img{ opacity: .5;}
.list-cnt figure a:hover figcaption{ opacity: 1;}

@media screen and (max-width: 768px){
    .list-cnt > li{ padding: 30px 0 0; width: 100%;}
    .list-cnt.row4 > li{ padding: 20px 0 0; width: calc(50% - 10px);}
}

.slider-wrap { position: relative; min-height: calc(var(--vh, 1vh) * 100); width: 100%; background: #fff;}
.slider-wrap .slider{ position: absolute; top: 50%; left: 50%; width: 34.375vw; height: calc(100vh - 8.332vw); transform: translate(-50%,-50%);}
.slider-wrap .slick-slide{ display: flex; width: 34.375vw; height: calc(100vh - 8.332vw); align-items: center; justify-content: center;}
.slider-wrap .slick-slide img{ width: 100%; height: auto;}
.slider-wrap .detail2{ position: absolute; bottom: 4.166vw; left: 4.166vw; color: #606060; text-align: left; font-size: 1.2rem; line-height: 1.8;}
.slider-wrap .detail2 h3{ height: 66px;}
.slider-wrap .detail2 h3 img{ width: auto; height: 100%;}
.slider-wrap .detail2 p{ padding: 20px 0 0; font-family: 'Noto Serif JP', serif;}
.slider-wrap .detail2 p small`{ font-size: 1.2rem; line-height: 1.5;}
.slider-wrap .detail2 h3 + p{ margin: 40px 0 0;}

@media screen and (max-width: 768px){
    .slider-wrap{ padding: 40px 0 0;}
    .slider-wrap .slider{ position: relative; top: auto; left: 50%; width: calc(100vw - 120px); height: 100vw; transform: translate(-50%,0);}
    .slider-wrap .slick-slide{ display: flex; width: 100vw; height: 100vw;}
    .slider-wrap .detail2{ position: relative; bottom: auto; left: auto; padding: 40px 60px 20px; font-size: 1.2rem;}
    .slider-wrap .detail2 p{ padding: 10px 0 0;}
    .slider-wrap .detail2 p:first-of-type{ padding: 0;}
    .slider-wrap .detail2s{ padding: 20px 60px; text-align: center;}
}

.slick-prev,
.slick-next { top: 50%; z-index: 20; width: 30px; height: 30px;}
.slick-prev { left: calc(50% - 26.562vw); transform: translate(0,-50%);}
.slick-next { right: calc(50% - 26.562vw); transform: translate(0,-50%);}
.slick-prev:before,
.slick-next:before { position: absolute; top: 0; width: 30px; height: 30px; border-top: 1px solid #7a7a7a; border-right: 1px solid #7a7a7a; background: none; content: ""; opacity: 1;}
.slick-prev:before{ left: 0; transform: rotate(-135deg);}
.slick-next:before{ right: 0; transform: rotate(45deg);}

@media screen and (max-width: 768px){
    .slick-prev,
    .slick-next { width: 20px; height: 20px;}
    .slick-prev { left: -40px;}
    .slick-next { right: -40px;}
    .slick-prev:before,
    .slick-next:before { width: 20px; height: 20px;}
}

/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ padding: 100px 0 50px; text-align: center;}
.footer aside{ display: flex; color: #fff; font-size: 2rem; line-height: 1; justify-content: center; align-items: center;}
.footer aside ul{ display: flex; padding: 10px 50px; border-radius: 5px; background: #5A5D46; justify-content: center; align-items: center;}
.footer aside ul > li{ padding: 0 10px 0 0;}
.footer aside ul > li:last-child{ padding: 0 0 0 10px;}
.footer aside a{ color: #fff;}
.footer aside i{ vertical-align: middle; font-size: 3rem;}
.footer .flex{ padding: 60px 0 0;}
.footer nav ul{ display: flex; text-align: center; font-size: 1.4rem; font-family: 'Noto Serif JP', serif; justify-content: center;}
.footer nav ul > li{ padding: 0 60px;}
.footer nav ul > li:first-child{ padding: 0 60px 0 calc(60px + 3em);}
.footer nav ul > li a{ position: relative; display: inline-block;}
.footer nav ul > li a:before,
.footer nav ul > li a:after{ position: absolute; bottom: -5px; width: 0; height: 1px; background: #404040; content: ""; transition: all .3s;}
.footer nav ul > li a:before{ left: 50%;}
.footer nav ul > li a:after{ right: 50%;}
.footer nav ul > li a:hover:before{ width: 50%;}
.footer nav ul > li a:hover:after{ width: 50%;}

.footer h1{ display: inline-block; margin: 60px 0 0;}
.footer h1 img{ width: 8.854vw;}
.footer small{ display: block; padding: 30px 0 0; font-size: 1.2rem;}

@media screen and (max-width: 768px){
    .footer{ padding: 50px 0;}
    .footer aside ul{ padding: 10px 20px;}
    .footer aside ul > li{ padding: 0 5px 0 0;}
    .footer aside ul > li:last-child{ padding: 0 0 0 5px;}
    .footer .flex{ padding: 50px 0 0;}
    .footer nav ul{ font-size: 1.2rem;}
    .footer nav ul > li{ padding: 0 20px;}
    .footer nav ul > li:first-child{ padding: 0 20px 0 calc(20px + 2.5em);}
    .footer h1{ margin: 50px 0 0; transform: none;}
    .footer h1 img{ width: 25vw;}
    .footer small{ padding: 20px 0 0; font-size: 1rem;}
}

/* --------------------------------------------------
 pagetop
--------------------------------------------------- */
.pagetop{ position: fixed; right: 40px; bottom: 16px;}
.pagetop a{ position: relative; display: block; font-size: 1.2rem; font-family: 'Open Sans', sans-serif;}
.pagetop a:before{ position: absolute; top: -16px; left: 5px; display: block; width: 15px; height: 15px; border-right: 1px solid #404040; border-bottom: 1px solid #404040; content: ""; transition: all .3s; transform: rotate(-135deg);}
.pagetop a:hover:before{ top: -32px;}
.pagetop a:after{ position: absolute; top: -18px; left: 12px; width: 1px; height: 15px; background: #404040; content: ""; transition: all .3s;}
.pagetop a:hover:after{ top: -33px; height: 30px;}

@media screen and (max-width: 768px){
    .pagetop{ right: 20px;}
}