@charset "utf-8";

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

html {
    scroll-padding-top: 10vh;
    font-family: "kepler-std", "a-otf-ryumin-pr6n", serif;
    font-size: 62.5%;
    font-optical-sizing: auto;
    line-break: strict;
    font-feature-settings: "palt";
    background-color: var(--color-yellow);
}

img,
picture {
    display: block;
    width: 100%;
    object-fit: contain;
}

:root {
    --font-size-XL: clamp(2rem, calc(3rem + 0.625vw), 9rem);
    --font-size-L: clamp(2.8rem, calc(1.4rem + 0.625vw), 5.4rem);
    --font-size-R: clamp(1.2rem, calc(0.65rem + 0.625vw), 1.8rem);
    --font-size-S: clamp(0.8rem, calc(0.48rem + 0.5vw), 1.2rem);
    --header-size-vertical: clamp(20px, calc(12px + 2.5vw), 46px);
    --header-size--horizontal: clamp(32px, calc(20px + 5vw), 58px);
    --color-black: #0E0000;
    --color-white: #fff;
    --color-yellow: rgb(255, 241, 0);
    --font-hiragino: "hiragino-kaku-gothic-pron", sans-serif;
}

h2 {
    font-size: var(--font-size-XL);
    margin-bottom: 0.5em;
}

h2 picture img {
    height: 1.6em;
    width: auto;
}

h3,
p {
    font-size: var(--font-size-R);
    font-weight: 400;
    font-style: normal;
    line-height: 2em;
    letter-spacing: .25em;
}

a {
    font-size: var(--font-size-R);
    font-style: normal;
    text-decoration: none;
    color: var(--color-black);
    -webkit-text-stroke: 0.08em var(--color-black);
    text-stroke: 0.08em var(--color-black);
}

.text-black {
    color: var(--color-black);
    -webkit-text-stroke: 0.08em var(--color-black);
    text-stroke: 0.08em var(--color-black);
}

.text-white {
    color: var(--color-white);
    -webkit-text-stroke: 0.08em var(--color-white);
    text-stroke: 0.08em var(--color-white);
}

#splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    background-color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

#splash p span {
    opacity: 0;
    visibility: hidden;
    font-weight: 600;
    font-size: var(--font-size-L);
    animation: splash 0.25s ease forwards;
}

#splash p span:nth-child(5) {
    margin-right: 1em;
}

@keyframes splash {
    0% {
        opacity: 0;
        visibility: visible;
    }

    100% {
        opacity: 1;
        visibility: visible;
    }
}

#g-nav {
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position: fixed;
    z-index: -999;
    /*ナビのスタート位置と形状*/
    top: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    -webkit-transition: all .6s;
    transition: all .6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive {
    z-index: 999;
    opacity: 1;
    background: #ffffffd5;
    backdrop-filter: blur(24px);
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list {
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100vh;
    /*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*リストのレイアウト設定*/


#g-nav li {
    text-align: center;
}

#g-nav li a {
    padding: 20px;
    display: block;
    font-size: var(--font-size-L);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    -webkit-transition: all .4s;
    transition: all .4s
}

#g-nav li a:hover,
#g-nav li a:active {
    transform: scale(110%);
}

/*========= ボタンのためのCSS ===============*/
.g-nav-openbtn {
    position: fixed;
    z-index: 9999;
    /*ボタンを最前面に*/
    top: 30px;
    right: 30px;
    cursor: pointer;
    width: var(--header-size--horizontal);
    height: var(--header-size-vertical);
    -webkit-transition: all .4s;
    transition: all .4s
}

.g-nav-openbtn:hover {
    transform: scale(110%);
}

/*×に変化*/
.g-nav-openbtn span {
    display: inline-block;
    -webkit-transition: all .4s;
    transition: all .4s;
    position: absolute;
    filter: drop-shadow(0 0 2px var(--color-yellow));
}

.g-nav-openbtn span:nth-of-type(1) {
    top: 0;
}

.g-nav-openbtn span:nth-of-type(2) {
    top: 50%;
}

.g-nav-openbtn span:nth-of-type(3) {
    top: 100%;
}

.g-nav-openbtn.active span:nth-of-type(1) {
    top: 50%;
    transform: rotate(-45deg);
    width: var(--header-size--horizontal);
}

.g-nav-openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.g-nav-openbtn.active span:nth-of-type(3) {
    top: 50%;
    transform: rotate(45deg);
    width: var(--header-size--horizontal);
}

a.disable {
    pointer-events: none;
    opacity: .4;
}

footer {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 6em 8vw;

}

.footer-branding {
    display: flex;
    justify-content: space-between;
    height: fit-content;
}

.footer-logo {
    width: clamp(200px, 25vw, 500px);
    margin-right: 4em;
    margin-bottom: 4em;
    height: fit-content;
}

.footer-branding .label {
    font-family: var(--font-hiragino);
    font-size: var(--font-size-R);
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    white-space: nowrap;
    margin-bottom: 1em
}

.sns {
    font-size: var(--font-size-R);
    margin-bottom: 2em;
}

.sns-icon-container {
    width: 8.75em;
    display: flex;
    justify-content: space-between;
}

.sns-icon-container a img {
    height: 2em;
    max-height: 60px;
}


.footer-info {
    font-size: var(--font-size-S);
    font-family: var(--font-hiragino);
    margin-bottom: 2em;
}

.footer-info p {
    font-size: var(--font-size-S);
    margin-bottom: 0.6em;
}

.footer-info__university {
    margin-bottom: 2.4em;
}

.copyright {
    margin-top: 4em;
    text-align: center;
    font-weight: 800;
}

.pc-img,
.tablet-img,
.sp-img {
    display: none;
}

.pc-img {
    display: block;
}

#about,
#profile,
#movie,
#gallery,
#access {
    scroll-padding-top: 10vh;
    scroll-margin-top: 10vh;
}

.br {
    margin-bottom: 1em;
    white-space: nowrap;
}

.photographer {
    text-align: center;
    margin-bottom: 2.6em;
    letter-spacing: .8em;
}

@media only screen and (max-width: 1366px) {

    .footer-branding {
        flex-direction: column;
    }
}

/* タブレット（1280px） */
@media only screen and (max-width: 1280px) {

    .footer-branding {
        flex-direction: row;
        justify-content: space-between;
        height: fit-content;
    }

    .footer-logo {
        margin-bottom: 4em;
    }
}

/* スマホ（〜767px） */
@media only screen and (max-width: 767px) {
    .pc-img {
        display: none;
    }

    .tablet-img {
        display: none;
    }

    .sp-img {
        display: block;
    }

    /*
    .g-nav-openbtn {
        top: 10px;
        right: 10px;
    }

    #language-selecter {
        top: 10px;
        right: 4em;
    }
*/


    .footer-branding {
        flex-direction: column;
        justify-content: space-between;
        height: fit-content;
        margin-bottom: 2em;
    }

    .footer-logo {
        width: 100%;
        margin-bottom: 4em;
    }

    .sns-icon-container a img {
        height: 2em;
        max-height: 40px;
    }
}