@charset "utf-8";

/* 共通設定 */
:root {
    /* カラー */
    --main-color: #fafaff;
    --sub-color: #333333;
    --btn-color: #E2027E;
    /* フォント */
    --mincho-font: yu-mincho-pr6n, sans-serif;
    --gothic-font: source-han-sans-japanese, sans-serif;
    --futura-font: futura-pt-bold, sans-serif;
    --design-font: above-the-beyond, sans-serif;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--mincho-font), var(--gothic-font), var(--futura-font), sans-serif;
    color: var(--main-color);
}

body.menu-open {
    overflow: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol,
li {
    list-style-type: none;
}

h1 {
    font-family: var(--futura-font), sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: clamp(1.25rem, 0.036rem + 5.178vw, 6.25rem);
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    position: absolute;
    inset: 0;
    padding-right: 5%;
}

h1 span {
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 1px var(--main-color);

}

h2 {
    text-transform: uppercase;
    text-align: center;
    display: flex;
    flex-direction: column;
    font-size: clamp(1rem, 0.515rem + 2.071vw, 3rem);
    text-shadow: 2px 2px 10px var(--sub-color);
    padding: 1rem;
    background: url(../img/logo2.png) no-repeat center / contain;
    margin-bottom: 5%;
}

h2::after {
    font-size: clamp(0.75rem, 0.568rem + 0.777vw, 1.5rem);
}

.about h2::after {
    content: "私について";
}

.news h2::after {
    content: "お知らせ";
}

.contact h2::after {
    content: "お問い合わせ";
}

.sponsor h2::after {
    content: "スポンサー";
}

h3 {
    font-size: clamp(1rem, 0.939rem + 0.259vw, 1.25rem);
    font-family: var(--gothic-font), sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 2%;
}

h4 {
    font-family: var(--gothic-font), sans-serif;
}

p {
    font-size: clamp(0.875rem, 0.845rem + 0.129vw, 1rem);
    font-family: var(--gothic-font), sans-serif;
    line-height: 1.7;
}

small {
    font-family: var(--gothic-font), sans-serif;
    font-size: clamp(0.75rem, 0.705rem + 0.194vw, 0.938rem);
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;

}

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

/* ボタン */
.link-btn {
    background-color: var(--btn-color);
    color: var(--main-color);
    width: clamp(12.5rem, 9.466rem + 12.945vw, 25rem);
    display: block;
    margin: 7% auto 0;
    position: relative;
    font-size: clamp(0.75rem, 0.568rem + 0.777vw, 1.5rem);
    padding: 0.5rem;
    text-align: center;
    box-shadow: 0 4px 4px rgba(48, 10, 17, 0.4);
    transition: filter 0.5s ease, translate 0.2s ease, box-shadow 0.2s ease;
}

.link-btn:hover {
    translate: 0 2px;
    box-shadow: 0 2px 4px rgba(48, 10, 17, 0.2);
    filter: brightness(0.9);
}

.link-btn::after {
    position: absolute;
    content: "";
    width: 8px;
    height: 8px;
    border-top: clamp(0.063rem, 0.047rem + 0.065vw, 0.125rem) solid;
    border-right: clamp(0.063rem, 0.047rem + 0.065vw, 0.125rem) solid;
    display: block;
    transform: rotate(45deg);
    top: calc(50% - 4px);
    right: 20px;
}

.link-btn:hover::after {
    animation: linkbtnarrow 1s infinite;
}

@keyframes linkbtnarrow {

    0%,
    100% {
        translate: 0;
    }

    50% {
        translate: 5px 0;
    }
}

/* リンク、ホバー */
.ham-menu li a,
.about-text li,
.sponsor_link a,
.news .container a,
.sponsor-list a,
footer .sns-icon li {
    transition: 0.3s ease-in-out;
}

.ham-menu li a:hover,
.about-text li:hover,
.sponsor_link a:hover,
.sponsor-list a:hover,
footer .sns-icon li:hover {
    translate: 0 -1px;
    scale: 1.2;
}

.news .container a:hover {
    opacity: 0.5;
}


/* 背景 */

section:nth-child(1) {
    background-image: url(../img/paul1_side.webp);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.about_bgd {
    background-color: rgba(0, 0, 0, 0.85);
    padding: 8% 0;
}

.sponsor_bgd {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 8% 0;
}

section:nth-child(2) {
    background-image: url(../img/forest.webp);
    background-size: cover;
    background-position: center center;
    padding: 8% 0;
}

section:nth-child(3) {
    background-image: url(../img/bgimg-gray.webp);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

section:nth-child(4) {
    background-image: url(../img/paul3_side.webp);
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

/* フェードインアニメーション */
.fade-in {
    opacity: 0;
    transition: 1s ease-in-out;
    translate: 0 100px;
}

.fade-in.show {
    opacity: 1;
    translate: 0;
}

/* ハンバーガーメニュー */
.ham-menu {
    width: 100vw;
    height: 100vh;
    position: fixed;
    translate: 100% 0;
    transition: 0.3s ease-in-out;
    background: linear-gradient(180deg, rgba(51, 51, 51, 1), rgba(133, 133, 133, 1));
    opacity: 0.9;
    visibility: hidden;
    pointer-events: none;
}

/* ハンバーガーボタン */
.ham-btn {
    width: 24px;
    height: 24px;
    position: fixed;
    z-index: 999;
    right: 5%;
    top: 2%;
}

.ham-btn span,
.ham-btn span::before,
.ham-btn span::after {
    width: 24px;
    height: 2px;
    background-color: var(--main-color);
    display: block;
    content: "";
    position: absolute;
    transition: 0.3s ease-in-out;
}

.ham-btn span::before {
    top: 8px;
}

.ham-btn span::after {
    top: -8px;
}

.ham-menu.open {
    translate: 0;
    visibility: visible;
    pointer-events: auto;
}

.ham-btn.open span {
    background-color: transparent;
}

.ham-btn.open span::before {
    top: 0;
    transform: rotate(45deg);
}

.ham-btn.open span::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ナビメニュー */
.ham-menu {
    z-index: 100;
}

.ham-menu ul {
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5%;
    height: 100%;
}

.ham-menu li:nth-child(1)::after {
    content: "トップメニュー";
}

.ham-menu li:nth-child(2)::after {
    content: "私について";
}

.ham-menu li:nth-child(3)::after {
    content: "お知らせ";
}

.ham-menu li:nth-child(4)::after {
    content: "スポンサー";
}

.ham-menu li:nth-child(5)::after {
    content: "お問い合わせ";
}

.ham-menu li::after {
    font-size: clamp(0.5rem, 0.374rem + 0.535vw, 0.75rem);
}

.ham-menu li {
    display: flex;
    flex-direction: column;
    text-align: center;
    font-size: clamp(1rem, 0.749rem + 1.071vw, 1.5rem);
    text-shadow: 0px 0px 10px rgba(133, 133, 133, 0.7);
}

/* フッター */
footer {
    background-color: var(--sub-color);
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1%;
    position: relative;
}

.footer-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-arrow img {
    width: clamp(6.25rem, 4.733rem + 6.472vw, 12.5rem);
    margin-top: 30%;
}

footer span {
    position: absolute;
    content: "";
    width: 15px;
    height: 15px;
    border-top: 1px solid;
    border-right: 1px solid;
    display: block;
    transform: rotate(-45deg);
    animation: footerarrow 2s infinite;
}

footer .sns-icon {
    justify-content: space-between;
}

.footer-privacy {
    display: block;
    width: fit-content;
    margin: 1rem auto 0.35rem;
    font-family: var(--gothic-font), sans-serif;
    font-size: 0.65rem;
    text-decoration: none;
}

.footer-privacy:hover {
    opacity: 0.7;
}

/* ----------プライバシーポリシー---------- */
.privacy-page {
    min-height: 100vh;
    background: var(--sub-color);
}

.privacy-container {
    width: min(90%, 900px);
    margin: 0 auto;
    padding: clamp(5rem, 12vw, 9rem) 0 clamp(4rem, 10vw, 7rem);
}

.privacy-container h1 {
    position: static;
    display: block;
    padding: 0;
    margin-bottom: 2.5rem;
    font-family: var(--gothic-font), sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.5rem);
    font-style: normal;
    text-align: left;
}

.privacy-container h2 {
    display: block;
    padding: 0;
    margin: 2.5rem 0 1rem;
    background: none;
    font-family: var(--gothic-font), sans-serif;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    text-align: left;
    text-transform: none;
}

.privacy-container p,
.privacy-container li {
    line-height: 2;
}

.privacy-container ul {
    margin: 0.75rem 0 0.75rem 1.25rem;
}

.privacy-container li {
    list-style: disc;
}

.privacy-container a {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

@keyframes footerarrow {

    0%,
    100% {
        translate: 0;
    }

    50% {
        translate: 0 10px;
    }


}

/* snsアイコン */
.sns-icon {
    display: flex;
    gap: 3%;
    margin-top: 5%;
}

.sns-icon img {
    width: clamp(1.25rem, 0.947rem + 1.294vw, 2.5rem);
}


/* ----------インデックスページ---------- */


.header-title {
    display: block;
    padding: 10px 0 0 10px;
    position: absolute;
    z-index: 1;
}

.header-title span {
    font-size: 10px;
    font-family: var(--gothic-font), sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.header-title img {
    width: clamp(5rem, 3.938rem + 4.531vw, 9.375rem);
}

.design-font {
    position: absolute;
    bottom: 80px;
    font-family: blithe, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: clamp(3.75rem, 1.626rem + 9.061vw, 12.5rem);
    display: flex;
    opacity: 0.5;
    line-height: 0.7;
    padding-left: 5%;
    rotate: -5deg;
}

/* アバウト */
.about-img {
    margin-bottom: 2%;
    box-shadow: 2px 2px 10px rgb(88, 87, 87);
    width: initial;
}

.about-text {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 5%;
}


/* ニュース */
/* 動画 */

.news .container,
.news-page-list .container {
    margin-bottom: 5%;
}

.news {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news article a {
    margin: 0 auto;
}

.news-link {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 1%;
    display: block;
    /* width: fit-content; */
    padding: 3%;
}

.splide__list {
    gap: 1%;
}

/* コンタクト */
.contact h3,
.contact p {
    text-align: center;
}

/* スポンサー */
.sponsor img {
    width: clamp(5.5rem, 25vw, 9.375rem);
    max-width: 100%;
    height: clamp(3rem, 14vw, 5rem);
    object-fit: contain;
}

.sponsor_link a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 64px;
}

.sponsor .container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    width: 96%;
    max-width: 1400px;
}

.sponsor .container a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 0;
}

@media (min-width:767px) {
    h3 {
        font-size: 1.125rem;
    }

    p {
        font-size: 0.9375rem;
    }

    .about .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5%;
    }

    .sponsor .container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

}

@media (min-width:1023px) {
    h3 {
        font-size: clamp(1.125rem, 0.542rem + 1.215vw, 2rem);
    }

    p {
        font-size: clamp(0.9375rem, 0.729rem + 0.434vw, 1.25rem);
    }

    .ham-btn {
        display: none;
    }

    .ham-menu {
        translate: 0;
        background: transparent;
        height: fit-content;
        padding-top: 2%;
        position: absolute;
        visibility: visible;
        pointer-events: auto;
    }

    .ham-menu ul {
        flex-direction: row;
        justify-content: flex-end;
        padding-right: 5%;
    }

    .ham-menu li {
        font-size: clamp(1rem, -0.409rem + 2.008vw, 2rem);
    }

    .ham-menu li::after {
        font-size: clamp(0.5rem, -0.205rem + 1.004vw, 1rem);
    }

    .header-title {
        z-index: 200;
    }

    .sponsor .container {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        column-gap: clamp(0.5rem, 1vw, 1rem);
    }

    .sponsor .container img {
        width: clamp(6.25rem, 10vw, 9.375rem);
        height: clamp(3.5rem, 6vw, 5rem);
    }
}

/* -------------- アバウトページ-------------- */

.about-visual {
    background-image: url(../img/paul3_vi.webp);
    background-position: center;
    background-color: var(--sub-color);
    background-blend-mode: soft-light;
    background-size: cover;

}

.about-header {
    height: clamp(8.125rem, 5.546rem + 11.003vw, 18.75rem);
}

.pf-container {
    margin-bottom: 5%;
}

.pf-container h3 {
    font-size: clamp(1.125rem, -0.119rem + 5.307vw, 6.25rem);
    font-weight: bold;
    color: transparent;
    -webkit-text-stroke: 1px var(--main-color);
}


.pf-container h4 {
    font-size: clamp(0.75rem, 0.174rem + 2.46vw, 3.125rem);
    margin-bottom: 2%;
}

.pf-container article {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
    margin-bottom: 5%;
}

.message-container {
    text-align: center;
}

.message-container p {
    line-height: 2.5;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2%;
    text-align: left;
    border: 1px solid rgba(250, 250, 255, 0.5);
    backdrop-filter: blur(6px);
}


table {
    border-collapse: separate;
    border-spacing: clamp(0.625rem, 0.322rem + 1.294vw, 1.875rem) clamp(0.313rem, -0.018rem + 1.408vw, 1.25rem);
    position: relative;
    right: clamp(0.625rem, 0.322rem + 1.294vw, 1.875rem);
    ;
    margin-bottom: 10%;
}

th {
    text-align: left;
    font-family: var(--gothic-font), sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(0.5rem, 0.242rem + 1.1vw, 1.563rem);
}



.board-line {
    position: relative;
    background-image: url(../img/board.svg);
    background-size: contain;
    aspect-ratio: 4/1;
}

.left-foot,
.right-foot {
    position: absolute;
    top: 0;
    opacity: 0.8;
    width: 16px;
}


@media (min-width:375px) {

    .left-foot,
    .right-foot {
        width: clamp(1rem, 0.025rem + 4.16vw, 2.625rem);
    }
}

@media (min-width:1000px) {

    .left-foot,
    .right-foot {
        width: clamp(2.625rem, 1.740rem + 1.415vw, 3.438rem);
    }
}

.left-foot {
    left: 30%;
    rotate: -9deg;
}

.right-foot {
    right: 30%;
    rotate: 9deg;
}

.angle-deg {
    position: absolute;
    top: 10%;
}

.lf {
    left: 33%;
}

.rf {
    right: 32%;
}

.board-line span {
    position: absolute;
    display: flex;
    justify-content: center;
    inset: 0;
    margin: 8% auto 0;
    background-image: url(../img/stance.svg);
    aspect-ratio: 16/9;
    width: clamp(1.25rem, 0.036rem + 5.178vw, 6.25rem);
    height: fit-content;
    font-family: var(--gothic-font), sans-serif;
    font-size: clamp(0.375rem, 0.223rem + 0.647vw, 1rem);
}

/* スライドショー */
.loop-splide {
    width: 100%;
    margin: 0 auto 5%;
}

.loop-splide img {
    width: 100%;
    aspect-ratio: 3/5;
    object-fit: cover;
    padding: 3%;
}

/* スライド間のギャップを設定 */
.splide__slide {
    margin-right: 20px;
}

.sponsor h3 {
    text-align: center;
}

/* -------------- ニュースページ-------------- */

.news-visual {
    background-image: url(../img/mountain.webp);
    background-size: cover;
    background-position: center center;
    background-color: var(--sub-color);
    background-blend-mode: overlay;
}

.news-container .news {
    background-image: none;
}

.news-container .pf-container h3,
.sponsor h3 {
    text-align: center;
}

.snow {
    position: relative;
}

.particle {
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    width: 3px;
    height: 3px;
    pointer-events: none;
    animation: roundsnow 5s linear infinite;
}

@keyframes roundsnow {
    0% {
        translate: 0 0;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        translate: 0 200px;
        opacity: 0;
    }
}

/* トップページ・動画メインビジュアル */

.hero-header {
    position: relative;
}

.hero-header video {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    vertical-align: bottom;
    filter: contrast(0.6);
}

@media (min-width:1023px) {
    .hero-header video {
        aspect-ratio: 4/3;
    }
}

/* ---------- スポンサーページ---------- */
/* ---------- コンタクトページ---------- */
.sponsor_body {
    background-image: url(../img/paul6_vi.webp);
    background-size: cover;
    background-position: top left;
    background-color: #3d3838;
    background-blend-mode: overlay;
    background-attachment: fixed;

}

.sponsor-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin: 10% auto 0;
    filter: drop-shadow(2px 2px 7px #3d3838);
}

.sponsor-list:nth-last-child(1) {
    margin-bottom: 10%;
}

.sponsor-list a {
    width: min(70%, 250px);
    display: flex;
    justify-content: center;
}

.sponsor-list>div {
    width: 100%;
}

.sponsor-list h4 {
    font-family: var(--futura-font);
    font-size: clamp(0.875rem, 0.329rem + 2.33vw, 3.125rem);
    text-transform: uppercase;
}

.contact-visual {
    background-image: url(../img/paul2_vi.webp);
    background-size: cover;
    background-position: top left;
    background-color: var(--sub-color);
    background-blend-mode: overlay;
}

.contact-title,
.sponsor-title {
    text-align: center;
}

.sponsor_body h3,
.contact-title h3 {
    font-size: clamp(1.25rem, -0.722rem + 8.414vw, 9.375rem);
    color: transparent;
    -webkit-text-stroke: 1px var(--main-color);
}

.sponsor-container,
.form-container {
    width: 90%;
}

.sponsor-container,
.news-page-container {
    max-width: 900px;
}

.form-container {
    max-width: 900px;
    margin: 5% auto 15%;
}

.google-form-placeholder {
    text-align: center;
    padding: clamp(2rem, 8vw, 5rem) 1rem;
    border: 1px solid rgba(250, 250, 255, 0.5);
    background-color: rgba(51, 51, 51, 0.5);
    backdrop-filter: blur(6px);
}

.google-form-frame {
    display: block;
    width: 100%;
    min-height: 900px;
    border: 0;
}

@media (min-width:767px) {
    .sponsor-list {
        flex-direction: row;
        gap: 5%;
    }

    .sponsor-list a {
        width: clamp(15.625rem, 13.350rem + 9.709vw, 25rem);
    }
}

/* ---------- NEWS記事---------- */
.newspage-visual {
    background-image: url(../img/paul5_vi.webp);
    background-size: cover;
    background-position: center center;
    background-color: #402b2b;
    background-blend-mode: darken;
    background-attachment: fixed;
}

.news-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.news-page-container-under {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1%;
    margin: auto;
    margin-bottom: 10%;
}

.news-page-container-under img {
    width: clamp(1.875rem, 1.117rem + 3.236vw, 5rem);
}

.news-page-container h3 {
    font-size: clamp(1.125rem, 0.640rem + 2.071vw, 3.125rem);
}

.news-page-container h3,
.news-page-container p {
    margin-bottom: 10%;
    line-height: 2.0;
}

.news-page-container-img {
    width: clamp(7.5rem, 1.735rem + 24.595vw, 31.25rem);
}