@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..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}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 0.069444444vw}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
--------------------------------------------------- */
/*:root{ --header-height: 3.472222222vw; scroll-padding-top: var(--header-height);}*/
html{ -webkit-overflow-scrolling: touch; width: 100%; font-size: 62.5%; /*scroll-behavior: smooth;*/ scroll-behavior: smooth; scroll-padding-top: 4.166666667vw;}
body{
    background: #212121;
    color: #c8c2af;
    letter-spacing: .1em;
    font-weight: 400;
    font-size: 1.388888889vw;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.5;

    font-feature-settings: "palt";
}
img{ width: 100%; vertical-align: bottom;}
video{ width: 100%; vertical-align: bottom;}
a{ color: #c8c2af; text-decoration: none; transition: all .1s ease;}
.sp{ display: none;}

@media screen and (max-width: 768px){
    html{ scroll-padding-top: 10.66666667vw;}
    body{ font-size: 3.2vw;}
    .pc{ display: none;}
    .sp{ display: block;}
}

/* --------------------------------------------------
 header
--------------------------------------------------- */
.header{ position: fixed; top: 0; left: 0; z-index: 100; display: flex; padding: 0 3.125vw; width: 100%; height: 4.166666667vw; border-bottom: 0.069444444vw solid #c8c2af; background: rgba(255,255,255,.9); color: #212121; font-size: 1.041666667vw; /*transition: transform .4s ease; transform: translate(0,0);*/ justify-content: space-between; align-items: center;}
/*.head-animation { transform: translate(0,-150%);}*/
.header a{ color: #212121; font-weight: 500;}
.header h1 a{ display: flex; font-weight: 500; font-size: 1.111111111vw; line-height: 1.3; align-items: center;}
.header h1 i{ margin: 0 .5em 0 0; width: 3.125vw;}
.header h1 div{ display: flex; flex-direction: column;}
.header h1 div small{ letter-spacing: .17em; font-size: 0.972222222vw;}
.header .switch{ display: none;}
.header nav a:hover{ color: #f2aa00;}
.header nav ul{ display: flex; align-items: center;}
.header nav ul > li + li{ margin: 0 0 0 2em;}

@media screen and (max-width: 768px){
    .header{ flex-direction: column; padding: .5em 1em 0; height: 10.66666667vw; border-bottom: 0.266666667vw solid #c8c2af; font-size: 3.2vw; align-items: flex-start; justify-content: flex-start;}
    .header.open{ overflow: auto; height: 100dvh; background: #c8c2af; transition: height .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}

    .header .switch{ position: fixed; top: 1em; right: 1em; z-index: 110; display: block; width: 5.333333333vw;}
    .header h1 a{ white-space: nowrap; font-size: 2.666666667vw;}
    .header h1 i{ width: 8vw;}
    .header h1 div small{ letter-spacing: .13em; font-size: 2.4vw;}
    
    .header nav{ position: relative; visibility: hidden; width: 100%; opacity: 0; padding: 3em 0 0;}
    .header nav.open{ visibility: visible; opacity: 1; transition: all 1.2s .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transform: translateY(0);}
    .header nav ul{ flex-direction: column; font-size: 120%;}
    .header nav ul > li + li{ margin: 1.5em 0 0;}
}

@media screen and (max-width: 768px){
    .drawer-hamburger{ display: flex; width: 5.333333333vw; height: 4.266666667vw; outline: 0; border: 0; background: transparent; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transform: translate3d(0, 0, 0); justify-content: flex-end; align-items: center;}
    .drawer-hamburger:hover{ background: transparent; cursor: pointer;}
    .drawer-hamburger-icon{ position: relative; display: block;}
    .drawer-hamburger-icon,
    .drawer-hamburger-icon:before,
    .drawer-hamburger-icon:after{ width: 100%; height: 0.266666667vw; background: #212121; transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);}
    .drawer-hamburger-icon:before,
    .drawer-hamburger-icon:after{ position: absolute; right: 0; content: '';}
    .drawer-hamburger-icon:before{ top: -2.133333333vw; width: 100%;}
    .drawer-hamburger-icon:after{ top: 2.133333333vw; width: 100%;}
    .drawer-hamburger.open .drawer-hamburger-icon { background: transparent;}
    .drawer-hamburger.open .drawer-hamburger-icon:before,
    .drawer-hamburger.open .drawer-hamburger-icon:after{ top: 0; width: 100%;}
    .drawer-hamburger.open .drawer-hamburger-icon:before{ transform: rotate(45deg);}
    .drawer-hamburger.open .drawer-hamburger-icon:after { transform: rotate(-45deg);}
}

/* --------------------------------------------------
 main
--------------------------------------------------- */
main{ padding: 4.166666667vw 0 0;}

@media screen and (max-width: 768px){
    main{ padding: 10.66666667vw 0 0;}
}


/* --------------------------------------------------
 footer
--------------------------------------------------- */
.footer{ display: flex; flex-direction: column; padding: 2.083333333vw 0 calc(2.083333333vw + 4.513888889vw); font-size: 0.972222222vw; line-height: 1.75; align-items: center;}
.footer small{ font-size: 0.833333333vw;}

@media screen and (max-width: 768px){
    .footer{ padding: 4vw 0 calc(4vw + 13.33333333vw); font-size: 2.666666667vw;}
    .footer small{ font-size: 2.666666667vw;}
}

/* --------------------------------------------------
 bn
--------------------------------------------------- */
/*
.bn{ position: fixed; bottom: 0; left: 50%; z-index: 100; transform: translate(-50%,0);}
.bn a{ display: flex; padding: 0 2.083333333vw; height: 4.166666667vw; border: 0.208333333vw solid; border-bottom: none; border-radius: 0.694444444vw 0.694444444vw 0 0; background: #509b70; color: #fff; white-space: nowrap; font-weight: 500; font-size: 1.388888889vw; line-height: 1; align-items: center; justify-content: center;}
.bn a span{ margin: 0 1em 0 0; padding: 0 1em 0 0; border-right: 0.069444444vw solid;}
.bn a i{ margin: 0 0 0 .5em; width: 1.041666667vw;}
.bn a img{ vertical-align: middle;}

@media screen and (max-width: 768px){
    .bn a{ flex-direction: column; padding: 0; width: 90vw; height: 13.33333333vw; border: 0.533333333vw solid; border-bottom: none; border-radius: 2.666666667vw 2.666666667vw 0 0; text-align: center; font-size: 3.2vw; line-height: 1.5; align-items: center;}
    .bn a span{ margin: 0; padding: 0; border-right: none;}
    .bn a i{ display: none;}
}
*/

.bn{ position: fixed; right: 0; bottom: 1em; z-index: 100;}
.bn a{ display: flex; flex-direction: column; padding: 1em 1.5em; border: 0.208333333vw solid; border-right: none; border-radius: 0.520833333vw 0 0 0.520833333vw; background: #509b70; color: #fff; text-align: center; font-weight: 500; font-size: 1.041666667vw; line-height: 1.5; align-items: center; justify-content: center;}
.bn a i{ display: inline-block; margin: 0 0 0 .5em; width: .75em;}
.bn a i img{ vertical-align: middle;}
.bn a span{ margin: .5em 0 0; padding: .25em 0; width: 100%; border-top: 0.104166667vw solid; border-bottom: 0.104166667vw solid;}

@media screen and (max-width: 768px){
    .bn{ position: fixed; right: auto; bottom: 0; left: 50%; z-index: 100; transform: translate(-50%,0);}
    .bn a{ display: flex; padding: 0; width: 90vw; height: 13.33333333vw; border: 0.533333333vw solid; border-bottom: none; border-radius: 2.666666667vw 2.666666667vw 0 0; white-space: nowrap; font-size: 3.2vw; line-height: 1.5; align-items: center;}
    .bn a span{ margin: 0; padding: 0; border: none;}
    .bn a i{ display: none;}
}