*{
    margin: 0;
    padding: 0;
    z-index: 50;

    --color-base: 29,29,39;
    --color-primary: 27,20,100;
    --color-white: 250,250,250;
    --color-gray-blue: 53, 56, 75;
    --color-black: 0,0,0;

    --color-green: 26, 112, 43;
    --color-gray: 126,126,126;
    --color-white-gray: 200,200,200;
    --color-dark-gray: 22,22,22;

    --logo-typo-weight: 400;
    --general-max-width: 1600px;
    --general-border-radius: 30px;
    --general-contents-box-padding: 10rem;
    --general-contents-box-padding-smt: clamp(2rem, -2rem + 20vw, 2.5rem);
    color: rgb(var(--color-white));
}

:root{
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    width: 100%;
}


html{
    width: 100vh;
    padding: 0;
    background-color: black;
}

body{
    width: 100%;
    display: flex;
    flex-direction: column;
}

h1,h2,h3,h4,.font_barlow{
    font-family: "Barlow", serif;
    font-family: "Noto Sans", sans-serif;
    font-weight: 500;
}

p,li,span,a{
    font-size: 0.8rem;
}
ul{
    list-style: disc;
    list-style-position: inside;
}
li{
    padding-left: 0;
    display: flex;
}
ul li::before{
    content: "•";
    margin-right: 0.8rem;
    flex: 0 0 auto;
}
a{
    text-decoration: none;
    color: rgb(var(--color-white));
    transition: color ease-in-out .3s;
    border-style: solid;
    border-bottom-width: 0;
    border-color: rgb(var(--color-white));
}
a:hover{
    color: rgb(var(--color-gray));
}

input[type="text"],
input[type="email"],
textarea{
    color: rgb(var(--color-black));
    margin: 0;
    font-size: 0.7rem;
    padding: 0.8rem 1rem;
    border-radius: 0.3rem;
    background-color: rgb(var(--color-white));
    border: 0.1rem solid rgb(var(--color-black));
    width: 100%;
}

textarea{
    height: 10rem;
    resize: none;
    overflow-y: auto;
}

.link_button{
    padding: 0.7rem 2rem;
    border-radius: 5px;
    border-width: 0.1rem;
    color: rgb(var(--color-white));
    border-color: rgb(var(--color-white));
    background-color: rgba(var(--color-white),0);
    font-size: 0.8rem;
    transition: background-color ease-in-out .3s;
}

.link_button:hover{
    background-color: rgba(var(--color-green),1);
}

.link_button.skelton{
    background-color: rgba(var(--color-green),0);
}

.link_button.skelton:hover{
    background-color: rgba(var(--color-green),1);
}

.link_wide{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 0.5rem;
    padding: 2rem 1rem;
    border-radius: var(--general-border-radius);
    border-style: solid;
    border-color: rgb(var(--color-primary));
    border-width: 3px;
}
.link_wide span{
    font-family: "Noto Serif JP";
    font-weight: 500;
    font-size: 2.2rem;
}
.link_wide p{
    font-size: 0.7rem;
}

input[type="submit"].link_button{
    width: 10rem;
    text-align: center;
}

header{
    position: sticky;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: visible;
    height: 4rem;
    z-index: 100;
    background: linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 16%, rgba(0, 0, 0, 1) 76%);

}



header a{
    font-family: "Barlow", serif;
    color: rgb(var(--color-white));
    font-weight: 500;
    font-style: normal;
    font-size: 0.8rem;
}

header .title_wrapper{
    position: absolute;
    height: 100%;
    display: flex;
    left:3rem;
}
header .title_wrapper a{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    width: auto;
    align-items: center;
    font-size: 0.9rem;
    font-weight: var(--logo-typo-weight);
    flex-direction: row;
    column-gap: 0.5rem;
}
header .title_wrapper a img{
    height: 1.5rem;
}

header .top_bar{
    position: absolute;
    right: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 2rem;
    height: 100%;
}

header .top_bar a{
    font-weight: 400;
    font-family: "Noto Serif JP";
}

header .slide_menu_toggle{
    visibility: hidden;
    position: absolute;
    bottom: calc(50% - 0.6rem);
    right: 2.5rem;
    width: 2.1rem;
    height: 1.2rem;
    z-index: 130;
}

header .slide_menu_toggle div{
    width: 100%;
    height: 1.5px;
    background-color: rgba(var(--color-white));
    position: absolute;
    transition: top ease-in-out .5s, bottom ease-in-out .5s, opacity ease-in-out .5s, rotate ease-in-out .6s;
    border-radius: 100rem;
    user-select: none;
}
header .slide_menu_toggle div:nth-child(1){
    top: 0;
}
header .slide_menu_toggle div:nth-child(2){
    top: calc(50% - .5px);
    opacity: 0;
}
header .slide_menu_toggle div:nth-child(3){
    top: calc(100% - 1px);
}

header .slide_menu_checkbox:checked ~ .slide_menu_toggle div:nth-child(1){
    top: calc(50% - 2px*0.5);
    rotate: 45deg;
}

header .slide_menu_checkbox:checked ~ .slide_menu_toggle div:nth-child(2){
    opacity: 0;
}

header .slide_menu_checkbox:checked ~ .slide_menu_toggle div:nth-child(3){
    top: calc(50% - 0.2rem*0.5);
    rotate: -45deg;
}

footer{
    height: 25rem;
    background-color: rgb(var(--color-black));
    position: relative;
    display: flex;
    justify-content: center;
}

footer p, footer a{
    color: rgb(var(--color-white));
}

footer h4{
    color: rgb(var(--color-white));
    font-family: "Barlow", serif;
    font-weight: 500;
    font-style: normal;
    font-size: 0.8rem;
}

footer .content_box{
    position: relative;
    justify-content: space-between;
    height: 100%;
}

footer .content_box .upper_box::before{
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    margin: 3rem 0 2rem 0;
    background-color: rgb(var(--color-primary));
}

footer .site_map_wrapper{
    display: flex;
    flex-direction: row;
    column-gap: 2rem;
}

footer .site_map_list{
    display: flex;
    flex-direction: column;
    row-gap: 0.8rem;   
    min-width: 6rem;
}

footer .site_map_list h4{
    font-family: "Noto Sans", sans-serif;
    font-weight: 500;
    font-size: 0.6rem;
    margin-bottom: 1rem;
}

footer .site_map_list a{
    font-family: "Noto Serif JP";
    font-size: 0.7rem;
    transition: color ease-in-out .3s;
}

footer .site_map_list a:hover{
    color: rgb(var(--color-white));
}

footer .copy_box{
    width: 100%;
    display: flex;
    align-items: end;
    flex-direction: column;
    row-gap: 0.2rem;
    margin-bottom: 2rem;
}
footer .copy_box *{
    color: rgb(var(--color-white));
}
footer .copy_box span{
    font-size: 1rem;
    font-weight: normal;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    font-family: "Barlow", serif;
    font-weight: var(--logo-typo-weight);
}
footer .copy_box img{
    height: 1.5rem;
}
footer .copy_box p{
    font-size: 0.6rem;
}

/* content box */
.content_box_wrapper{
    position: relative;
    width: 100%;
    min-height: 20rem;
    background-color: rgb(var(--color-black));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 2rem 0;
    row-gap: 1rem;
    align-items: center;
}
.content_box{
    width: 100%;
    max-width: var(--general-max-width);
    padding: 0 var(--general-contents-box-padding);
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

/* Template 1 */
div.content_box_wrapper.temp1_header{
    height: 70vh;
    position: relative;
    background-color: rgb(var(--color-black));
}

div.content_box_wrapper.temp1_header video,
div.content_box_wrapper.temp1_header img{
    position: absolute;
    opacity: 0.2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
div.content_box_wrapper.temp1_header::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 10rem;
    background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
    z-index: 1;
}
div.content_box_wrapper.temp1_header::after{
    content: "";
    position: absolute;
    left: 0;
    bottom:0;
    width: 100%;
    height: 10rem;
    z-index: 1;
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
}

div.content_box_wrapper.temp1_header .content_box{
    height: 100%;
    max-width: var(--general-max-width);
    justify-content: center;
    align-items: center;
}

div.content_box_wrapper.temp1_header .content_box h1{
    color: rgb(var(--color-white));
    font-size: 3rem;
    font-family: "Noto Serif JP";
    font-weight: 600;
    z-index: 2;
}

div.content_box_wrapper.temp1_header .content_box p{
    color: rgb(var(--color-white));
    font-size: 1rem;
    font-family: "Noto Serif", serif;
    text-align: center;
    z-index: 2;
}

/* Template 2 */
div.content_box_wrapper.temp2_header{
    height: 70vh;
    margin-bottom: 3rem;
    position: relative;
    background-color: rgb(var(--color-black));
}

div.content_box_wrapper.temp2_header video,
div.content_box_wrapper.temp2_header img{
    position: absolute;
    opacity: 0.5;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
div.content_box_wrapper.temp2_header::before{
    content: "";
    position: absolute;
    left: 30%;
    top: 0;
    width: 5rem;
    height: 100%;
    background: linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
    z-index: 1;
}
div.content_box_wrapper.temp2_header::after{
    content: "";
    position: absolute;
    left: 30%;
    bottom:0;
    width: 70%;
    height: 100%;
    z-index: 1;
    background: radial-gradient(circle, rgba(0, 0, 0, 0) 29%, rgba(0, 0, 0, 1) 90%),
                linear-gradient(270deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 10%),
                linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 10%);
}

div.content_box_wrapper.temp2_header .content_box{
    height: 100%;
    max-width: var(--general-max-width);
    justify-content: start;
    padding-top: 15lvh;
    align-items: start;
    z-index: 50;
}

div.content_box_wrapper.temp2_header .title_box{
    display: flex;
    flex-direction: column;
    align-items: start;
    row-gap: 0.3rem;
}

div.content_box_wrapper.temp2_header .content_box h1.title_en{
    position: relative;
}

div.content_box_wrapper.temp2_header .content_box h1.title_en span{
    color: rgb(var(--color-white));
    position: relative;
    font-size: 1.2rem;
    font-family: "Noto Serif JP";
    font-weight: 600;
    letter-spacing: 0.1rem;
    padding-left: 0.1rem;
    z-index: 50;
}
div.content_box_wrapper.temp2_header .content_box h1.title_en::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0rem;
    width: 100%;
    height: 30%;
    z-index: 2;
    background-color: rgb(var(--color-primary));
}

div.content_box_wrapper.temp2_header .content_box h1.title_ja{
    color: rgb(var(--color-white));
    font-size: 1.8rem;
    font-family: "Noto Serif JP";
    font-weight: 600;
}

div.content_box_wrapper.temp2_header .content_box p{
    color: rgb(var(--color-white));
    font-size: 1rem;
    font-family: "Noto Serif", serif;
    padding-left: 0.1rem;
    z-index: 2;
}


/* Template Card */

.temp_card{
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 15rem;
    min-height: 25rem;
    border-radius: 2rem;
    overflow: hidden;
    padding-bottom: 2rem;
}
.temp_card .card_contents{
    --card-grad-height: 5rem;
    position: relative;
    padding: 1.5rem;
    padding-top: 4rem;
    padding-top: 3rem;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    position: relative;
    background-color: rgba(var(--color-black),0.7);
    margin-bottom: var(--card-grad-height)
}
.temp_card .card_contents::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: calc(-1*var(--card-grad-height));
    width: 100%;
    height: var(--card-grad-height);
    background: linear-gradient(180deg,rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.6) 30%,rgba(0, 0, 0, 0) 100%);
    z-index: 3;
}
.temp_card .card_contents span,
.temp_card .card_contents p{
    font-family: "Noto Sans JP", sans-serif;
    font-family: "Barlow", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    flex-wrap: wrap;
}
.temp_card .card_bg{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    z-index: 2;
}
/* Card Hover Animation Elements*/
.temp_card .hover_overlay{
    position: absolute;
    right: 100%;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color-black),0.5);
    transition: right cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s;
    z-index: 3;
}
.temp_card:hover .hover_overlay{
    right: 0;
}
.temp_card .hover_overlay:after{
    content: "";
    position: absolute;
    right: 1rem;
    bottom: 0.5rem;
    width: 2rem;
    height: 2rem;
    background-image: url("../img/arrow_right.svg");
    filter: invert(100%) sepia(0%) saturate(363%) hue-rotate(165deg) brightness(109%) contrast(110%);
    z-index: 50;
    opacity: 0;
    background-size: contain;
    transition: opacity cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s;
}
.temp_card:hover .hover_overlay:after{
    opacity: 1;
}


/* Misc */
h1.big{
    font-size: 2rem;
}

p.big{
    font-size: 1rem;
}


.font_normal{
    font-weight: normal;
}


.smt_show{
    display: none !important;
}

@media screen and (max-width: 800px) {
	/* CSS for SmartPhones */
    :root{
        font-size: 14px;
    }


    header{
        height: 6rem;
    }
    header .title_wrapper{
        align-items: end;
        padding-bottom: 2rem;
        left: 2.5rem;
    }
    header .top_bar{
        right: 0;
        top:0;
        visibility: hidden;
        position: fixed;
        height: 100dvh;
        flex-direction: column;
        align-items: end;
        row-gap: 3rem;
        justify-content: flex-start;
        background-color: rgb(var(--color-black));
        padding-top: 10rem;
        padding-left: 2rem;
        right: -130%;
        width: 85lvw;
        transition: right cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s, visibility linear 0.5s;
    }
    header .top_bar a, .logo_typo{
        font-family: "Noto Serif JP";
        font-size: 1.2rem;
        white-space: nowrap;
    }
    header .top_bar a{
        font-weight: 600;
        font-size: 1.7rem;
        position: relative;
        right: 2.5rem;
    }

    header .slide_menu_checkbox:checked ~ .top_bar{
        visibility: visible;
        right: 0%;
    }

    header .slide_menu_toggle{
        visibility: visible;
    }

    footer{
        height: 40rem;
        padding: 2rem 0;
    }

    footer .content_box .upper_box::before{
        margin: 3rem 0 5rem 0;
    }

    footer .site_map_list{
        row-gap: 0.6rem;
        row-gap: 1rem;
    }
    footer .site_map_list h4{
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    footer .site_map_list a{
        font-size: 0.8rem;
    }
    footer .copy_box{
        align-items: start;
        margin: 0;
    }
    footer .copy_box span{
        font-size: 1.2rem;
    }
    footer .copy_box img{
        height: 1.5rem;
    }

    .content_box{
        /* padding: 0 3rem; */
        padding: 0 var(--general-contents-box-padding-smt);
    }



    /* Template1 */
    div.content_box_wrapper.temp1_header{
        height: 30rem;
    }

    div.content_box_wrapper.temp1_header .content_box{
        align-items: start;
        row-gap: 4rem;
    }


    div.content_box_wrapper.temp1_header .content_box p{
        font-size: 1rem;
        text-align: left;
    }

    /* Template2 */
    div.content_box_wrapper.temp2_header{
        height: 40rem;
    }
    div.content_box_wrapper.temp2_header video,
    div.content_box_wrapper.temp2_header img{
        width: 100%;
    }
    div.content_box_wrapper.temp2_header .content_box{
        padding-top: 5rem;
    }
    div.content_box_wrapper.temp2_header::before{
        left: 0;
        top: 0;
        width: 100%;
        height: 50%;
        background: linear-gradient(180deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
        z-index: 1;
    }
    div.content_box_wrapper.temp2_header::after{
        content: "";
        position: absolute;
        left: 0;
        bottom:0;
        width: 100%;
        height: 20%;
        background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.01) 100%);
    }
    div.content_box_wrapper.temp2_header .content_box p{
        width: 80%;
    }

    /* Temp Card */
    .temp_card .card_contents span,
    .temp_card .card_contents p{
        font-size: 1.2rem;
    }

    .smt_hide{
        display: none !important;
    }
    
    .smt_show{
        display: inherit !important;
    }
}