@charset "utf-8";

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

html {
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-padding-top: 20vh;
    scroll-behavior: smooth;
    font-size: 62.5%;
    background-color: var(--color-Ecru);
}

main {
    overflow: hidden;
}

img {
    display: block;
    width: 100%;
}

:root {
    --en-heading-font: adobe-caslon-pro, sans-serif;
    --en-copy-font: univers-next-pro, sans-serif;
    --jp-font: ryo-gothic-plusn, sans-serif;
    --jichikai-font: novantique-script, sans-serif;

    --font-size-Heading-L: clamp(1.8rem, calc(1.19rem + 2.51vw), 4.2rem);
    --font-size-Heading-M: clamp(1.8rem, calc(1.4rem + 0.625vw), 3.6rem);
    --font-size-Heading-Ms: clamp(1.32rem, calc(1.1rem + 1vw), 3.6rem);
    --font-size-Heading-R: clamp(1.6rem, calc(1rem + 1vw), 3.6rem);
    --font-size-M: clamp(1.32rem, calc(1.15rem + 0.711vw), 2rem);
    --font-size-R: clamp(1.2rem, calc(1.1rem + 0.625vw), 2rem);
    --font-size-Rs: clamp(1rem, calc(0.72rem + 0.625vw), 1.6rem);

    --line-height-Heading-R: 1.5em;
    --line-height-Heading-S: 1.5em;
    --line-height-R: clamp(183%, 199%, 215%);
    --line-height-Rs: clamp(183%, 195%, 206%);

    --letter-spacing-Heading-R: 15%;
    --letter-spacing-Heading-S: 10%;
    --letter-spacing-R: clamp(10%, 12.5%, 15%);
    --letter-spacing-Rs: 15%;

    --header-size-vertical: clamp(20px, calc(12px + 2.5vw), 46px);
    --header-size--horizontal: clamp(32px, calc(20px + 5vw), 58px);

    --color-Black: #000000;
    --color-white: #fff;
    --color-Ecru: rgb(255 254 238);
    --color-NETSU: rgb(236 18 52);
    --color-BLUE: rgb(0 98 157);
    --color-GREEN: rgb(0 177 123);

}

.jichikai-en {
    font-size: calc(var(--font-size-R) + 20%);
    font-family: var(--jichikai-font);
    font-weight: 400;
    font-style: normal;
    margin-left: 1em;
}

h2,
h3,
h4,
p,
a,
span,
address,
time {
    font-family: var(--jp-font);
    font-style: normal;
    font-optical-sizing: auto;
    font-feature-settings: "palt" on;
    line-break: strict;
    overflow-wrap: break-word;
}

h2 {
    font-size: var(--font-size-Heading-R);
    font-weight: 500;
    line-height: var(--line-height-Heading-R);
    letter-spacing: var(--letter-spacing-Heading-R);
}

p,
address {
    z-index: 99;
    font-size: var(--font-size-R);
    font-style: normal;
    font-weight: 400;
    line-height: var(--line-height-R);
    letter-spacing: var(--letter-spacing-R);
}

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


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

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

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

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    font-size: var(--font-size-Heading-R);
    width: 16em;
    margin: 0 auto;
    margin-top: 16vh;
}

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


#g-nav li {
    margin-bottom: 2em;
}

#g-nav li a {
    padding: 10px;
    display: flex;
    align-items: center;
    font-size: var(--font-size-Heading-R);
    font-weight: 500;
    line-height: var(--line-height-Heading-R);
    letter-spacing: var(--letter-spacing-Heading-R);
    text-transform: uppercase;
    transition: all .4s;
    white-space: nowrap;
}

#g-nav .red a::before {
    content: "";
    display: inline-block;
    background-image: url('../images/rock-red.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 1em;
    vertical-align: middle;
    margin-right: 1em;
    aspect-ratio: 1 / 1;
}

#g-nav .green a::before {
    content: "";
    display: inline-block;
    background-image: url('../images/rock-green.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 1em;
    vertical-align: middle;
    margin-right: 1em;
    aspect-ratio: 1 / 1;
}

#g-nav .blue a::before {
    content: "";
    display: inline-block;
    background-image: url('../images/rock-blue.png');
    background-size: contain;
    background-repeat: no-repeat;
    height: 1em;
    vertical-align: middle;
    margin-right: 1em;
    aspect-ratio: 1 / 1;
}


#g-nav li a:hover,
#g-nav li a:active {
    transform: translateX(0.4em);
}

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

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

/*×に変化*/
.g-nav-openbtn span {
    display: inline-block;
    transition: all .4s;
    position: absolute;
}

.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);
}

#page-top a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: clamp(80px, calc(60px + 4.5vw), 120px);
    color: var(--color-Black);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 0.6rem;
    transition: all 0.3s;
}

#page-top a span {
    display: block;
    font-family: var(--en-copy-font);
    font-size: var(--font-size-R);
    font-weight: 500;
    letter-spacing: 0.28em;
    line-height: 130%;
    margin-top: 0.2em;
}

#page-top a:hover,
#page-top a:active {
    transform: scale(1.06);
}

/*リンクを右下に固定*/
#page-top {
    position: fixed;
    right: 30px;
    bottom: 50px;
    z-index: 998;
    /*はじめは非表示*/
    opacity: 0;
    transform: translateX(300px);
}

/*　上に上がる動き　*/

#page-top.UpMove {
    animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
    from {
        opacity: 0;
        transform: translateY(300px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*　下に下がる動き　*/

#page-top.DownMove {
    animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 1;
        transform: translateY(300px);
    }
}

.red,
.red a {
    color: var(--color-NETSU);
}

.green,
.green a {
    color: var(--color-GREEN);
}

.blue,
.blue a {
    color: var(--color-BLUE);
}

.pic-up-program {
    width: 70vw;
    margin: 32vh auto 16vh;
}

.pic-up-program__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
}

.pic-up-program__content {
    flex: 1 1 calc(33.333% - 4.33em);
    /* 3列 */
    max-width: calc(33.333% - 4.33em);
    margin-bottom: 4em;
    transition: all .3s ease-out;
}

.pic-up-program__content:hover,
.pic-up-program__content:active {
    transform: scale(1.02);
}

.pic-up-program h3 {
    font-size: var(--font-size-R);
    font-weight: 500;
    margin: 0.4em 0 0.2em;

}

.pic-up-program__note {
    color: var(--color-BLUE);
}

.pic-up-program__content__text {
    font-size: var(--font-size-Rs);
    line-height: var(--line-height-Rs);
    letter-spacing: var(--letter-spacing-Rs);
    margin-bottom: 2em;
}

.pic-up-program__content__place-time span {
    font-size: var(--font-size-Rs);
    line-height: var(--line-height-Rs);
    letter-spacing: var(--letter-spacing-Rs);
}

footer {
    text-align: center;
    position: relative;
    z-index: 99;
    width: fit-content;
    margin: 0 auto 100px;
}

footer .copyright {
    font-family: var(--en-heading-font) !important;
    font-size: var(--font-size-R);
    font-weight: 400;
    white-space: nowrap;
    display: block;
    text-align: center;
    margin-top: 2em;
}

footer .zokei-logo {
    width: clamp(260px, 30vw, 460px);
    margin-bottom: clamp(32px, 10vw, 64px);

}

footer .sns {
    margin: 0 auto;
}

.sns h3 {
    font-family: var(--en-heading-font);
    font-size: var(--font-size-R);
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.5em;
    white-space: nowrap;
}

.sns__flex-container {
    width: 105px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}


footer .sns__flex-container a i {
    display: block;
    height: clamp(28px, calc(11.65px + 1.42vw), 48px);
    transition: all .4s ease;
}

footer .sns__flex-container a i img {
    height: 100%;
    width: auto;
}

.sns a:hover i,
.sns a:active i {
    transform: scale(1.1)
}

.flip-vertical-img {
    display: block;
    transform: scaleY(-1);
}


@media only screen and (max-width: 1280px) {
    #g-nav li:nth-child(9) {
        display: none;
    }

    #page-top {
        right: 10px;
        bottom: 10px;
    }

    .pic-up-program {
        width: 80vw;
        margin: 24vh auto 6vh;
    }

    footer {
        margin-top: 0;
    }
}

@media only screen and (max-width: 767px) {
    .g-nav-openbtn {
        top: 30px;
        right: 30px;
    }

    .pic-up-program {
        width: 88vw;
        margin: 16vh auto 16vh;
    }

    .pic-up-program__content {
        flex: 1 1 calc(50% - 1em);
        /* 2列 */
        max-width: calc(50% - 1em);
    }


}