@charset "utf-8";

:root{
    --font-base: YakuHanJP,"FP-こぶりなゴシック StdN W3", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-jp-normal: "FP-こぶりなゴシック StdN W3";
    --font-jp-medium: "FP-こぶりなゴシック StdN W6";
    --font-en-light:"FuturaLTPro-Light";
    --font-en-normal:"FuturaLTPro-Book";
    --font-en-medium:"FuturaLTPro-Medium";

    --color-black1: #111;
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img{
    width: 100%;
    height: auto;
    vertical-align: bottom;
}


html{
    font-size: 62.5%;
    @media screen and (min-width: 1921px){
      font-size: 0.521vw;
    }
    @media screen and (max-width: 1440px) and (min-width:769px){
        /*1920pxと1280pxの間の数値、1440px の画面幅を基準 に 10px を vw に変換した数値が0.694vw。*/
        font-size: 0.694vw;
    }

}


body{
    position: fixed;
    margin:auto;
    font-family: var(--font-base);
    width: 100%;
    color: var(--color-black1);
    font-size: 18px;
    font-size: 1.8rem;
    font-weight:normal;
    word-wrap: break-word;
    line-height: 1;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: unset;
    font-feature-settings: "palt";
    overflow-x: hidden;
    overflow-y: scroll;
    background:#fff;
}

/*
body.is-header-transparent{
    background: #0C1A3A;
}
*/



body.is-loaded{
    position:relative;
}

a{
    color: var(--color_main);
    text-decoration: none;
}

ul{
    list-style: none;
}



img{
    max-width:100%;
    height: auto;
}




/* ---------------------------


l-loading


--------------------------- */


.l-loading{
    position: fixed;
    z-index: 10000;
    width: 100%;
    height:100%;
    background:#fff;
    transition: opacity 1s, visibility 1s;
    visibility: visible;
    opacity: 1;
    display:flex;
    align-items: center;
    justify-content: center;
    pointer-events:none;
}


.is-loaded .l-loading{
    visibility: hidden;
    opacity: 0;
}



.l-loading__spinner{
    position:fixed;
    right:50%;
    top:50%;
    width:4rem;
    height:4rem;
    margin-top: -2rem;
    margin-right: -2rem;
    border-radius: 50%;
    border: .1rem solid #aaa;
    border-top-color:transparent;
    animation: rotate_animation 1s linear infinite;
    @media screen and (max-width: 428px){
        width: 2.8rem;
        height: 2.8rem;
        margin-top: -1.4rem;
        margin-right: -1.4rem;
    }
}

@keyframes rotate_animation{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

.l-loading__logo{
    width: 24rem;
}

/* =====================

 l-header

===================== */



/* =====================

 l-footer

===================== */


/* =====================

 l-bg-video

===================== */

.l-bg-video{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    @media screen and (min-width: 769px){
        min-height: 551px;
    }
}

.l-bg-video video{
    width:100%;
    height:100%;
    object-fit: cover;
    @media screen and (min-width: 769px){
        object-position: 50% 75%;
    }
}

.l-bg-video:after{
    content: '';
    width:100%;
    height:100%;
    position:absolute;
    left: 0;
    top:0;
    background:rgba(0,0,0,0);
    transition: background 1s;
}

.is-dark .l-bg-video:after{
    background:rgba(0,0,0,0.7);
}

/* =====================

 l-content

===================== */

.l-content{
    position:relative;
    z-index: 5;
    color:#fff;
}


/* =====================

 l-sns

===================== */

.l-sns{
    position:fixed;
    z-index: 25;
    right: 4rem;
    bottom: 4rem;
    display:flex;
    align-items:center;
    gap:1.6rem;
    @media screen and (max-width:768px){
        transform: rotate(90deg);
        transform-origin: right bottom;
        right: 5rem;
    }
}

.l-sns__title{
    color:#fff;
    font-family: var(--font-en-light);
    letter-spacing:.1em;
    font-size:1.6rem;
    @media screen and (max-width:768px){
        font-size:1.2rem;
    }
}

.l-sns__list a{
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.3);
    display:flex;
    align-items:center;
    justify-content:center;
    transition: border .3s;
    @media screen and (max-width:768px){
        width: 3.2rem;
        height:3.2rem;
    }
    img{
        width: 57%;
    }
}

@media (hover: hover) {
    .l-sns__list a:hover{
        border: 1px solid rgba(255,255,255,0.8);
    }
}

.l-sns__list li{
    @media screen and (max-width:768px){
        transform: rotate(-90deg);
    }
}

/* =====================

 p-top-header

===================== */

.p-top-header{
    position:absolute;
    left:0;
    top:0;
    z-index: 25;
    width:100%;
    /* padding-top: 4.7%; */
    display:flex;
    justify-content:center;
    color:#fff;
}

.p-top-header__inner{
    position:relative;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    /* width: 38.2rem;
    height:24rem;
    width:41.2rem; */
    width: 47svh;
    /* height: 35svh; */
    height: 42svh;
    @media screen and (max-width:769px){
        min-height: 192px;
    }
    @media screen and (max-width:768px){
        height: 49svh;
        width: 60%;
        max-width: 33.7rem;
    }

    @media (max-width: 900px) and (orientation: landscape) {
        min-height: initial;
        min-height:auto;

    }
}


.p-top-header__description{
    /* order:1; */
    position:absolute;
    left:0;
    top: 0;
    padding-left: 4rem;
    padding-top: 4rem;
    width:100%;
    letter-spacing:.1em;
    font-size:1.6rem;
    @media screen and (max-width:768px){
        padding-left: 2.4rem;
        padding-top: 2.4rem;
        font-size:1.2rem;
    }
    @media (max-width: 767px) and (orientation: landscape) {
        display:none;
    }
}

.p-top-header__logo{
    /* order:2; */

    width:100%;
    @media screen and (min-width:769px){
        min-width:253px;
        max-width: 520px;
    }
    @media (max-width: 900px) and (orientation: landscape) {
        width:49svh;
    }
    img{
        width:100%;
    }
}

.p-top-header__en{
    position:absolute;
    left:0;
    top: calc(100% - 2em);
    width:100%;
    text-align:center;
    order:3;
    font-family:var(--font-en-light);
    letter-spacing:.1em;
    font-size:1.3rem;
}


/* =====================

 p-top-keyvisual

===================== */

.p-top-keyvisual{
    width:100%;
    height: 100svh;
    
    position:relative;
    @media screen and (min-width: 769px){
        min-height: 551px;
    }

}

.p-top-keyvisual__info{
    width:100%;
    position:absolute;
    left:0;
    bottom:4rem;
    text-align:center;
    font-family:var(--font-en-light);
}

.p-top-keyvisual__open{
    font-size:3.2rem;
    letter-spacing:.1em;
    @media screen and (max-width:768px){
        font-size:4vw;
    }
    @media (max-width: 900px) and (orientation: landscape) {
        font-size:3vw;
    }
    /*
    @media screen and (max-width:500px){
        font-size:9vw;
    }
    */
}

.p-top-keyvisual__timer{
    font-size: 5.6rem;
    margin-bottom:.8em;
    display:flex;
    justify-content:center;
    gap:.1em;
    @media screen and (max-width:768px){
        font-size:7vw;
    }
    @media (max-width: 900px) and (orientation: landscape) {
        font-size:5vw;
    }
}

.p-top-keyvisual__timer__item .__unit{
    font-size:22%;
    text-align:center;
    margin-top: .3em;
    opacity:.5;
    letter-spacing:.1em;
    @media screen and (max-width:500px){
        font-size:36%;
    }
}

.p-top-keyvisual__timer__item .__number{
    height:1em;
}


/* =====================

 p-top-footer

===================== */

.p-top-footer__mchd{
    width:100%;
    height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    @media screen and (min-width: 769px){
        min-height: 551px;
    }
    @media (max-width: 900px) and (orientation: landscape) {
        min-height: 667px;
    }
}

.p-top-footer__mchd__inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    @media screen and (max-width: 768px){
        width: 60%;
        min-width: 180px;
    }
}

.p-top-footer__mchd__text{
    font-family:var(--font-en-light);
    letter-spacing:.1em;
    font-size:1.4rem;
    text-align:center;
    @media screen and (max-width:500px){
        font-size:1rem;
    }
}

.p-top-footer__mchd__logo{
    margin-top: 4.4rem;
    margin-left:auto;
    margin-right:auto;
    max-width:20.8rem;
    width:100%;
    @media screen and (max-width:500px){
        /* width:75%; */
        width:55%;
    }
    img{
        width:100%;
    }
}

.p-top-footer__mchd__btn{
    margin-top: 4rem;
    display:block;
    text-align:center;
    max-width:24.8rem;
    width:100%;
    border: 1px solid rgba(255,255,255,.3);
    border-radius:10rem;
    padding: .8em 0;
    font-family:var(--font-en-light);
    font-size:1.6rem;
    letter-spacing:.1em;
    transition: border .3s;
    @media screen and (max-width: 428px){
        padding: .7em 0;
        width: 16rem;
        font-size:1.4rem;
        margin-top: 3.2rem;
    }
}

@media (hover: hover) {
    .p-top-footer__mchd__btn:hover{
        border: 1px solid rgba(255,255,255,.8);
    }
}

.p-top-footer__mchd__copyright{
    position:absolute;
    left:0;
    bottom: 5.6rem;
    width:100%;
    text-align:center;
    font-family: var(--font-en-light);
    letter-spacing:.1em;
    opacity:.5;
    font-size:1.2rem;
    @media screen and (max-width: 768px){
        bottom: 4.2rem;
        font-size:1rem;
    }
}



/* =====================

 u-visually-hidden

===================== */

.u-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}