/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2023/09/28, 14:42:37
    Author     : u1min
*/

/* ****************************************/
/* Font */
/* ****************************************/

@import url('https://fonts.googleapis.com/css?family=Impact');
@import url('https://fonts.googleapis.com/css?family=Futura+PT');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@1,700&family=Petit+Formal+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

.wf-Gothic {
    font-family: -apple-system, 'Noto Sans JP',BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;

}

.wf-Mincho {
    font-family:  'Noto Serif JP',Georgia,游明朝 Regular,"Yu Mincho Regular",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,sans-serif,serif;
    transform: rotate(0.001deg);
}

.wf-Cormorant {
    font-family: 'Cormorant', serif ! important;
}

.wf-Josefin-Sans {
    font-family: 'Josefin Sans' ! important;
}

.wf-Impact {
    font-family: 'Impact', sans-serif;
}

.wf-FuturaPT {
    font-family: 'Futura PT', sans-serif;
}

.wf-Condor-ExtraLight {
    font-family: "condor", sans-serif !important ;
    font-weight: 200;
    font-style: normal;

}

.wf-Condor-Light {
    font-family: "condor", sans-serif !important ;
    font-weight: 300;
    font-style: normal;
}

.wf-Condor-Regular {
    font-family: "condor", sans-serif !important ;
    font-weight: 400;
    font-style: normal;
}

.wf-Condor-Italic {
    font-family: "condor", sans-serif !important ;
    font-weight: 400;
    font-style: italic;
}

.wf-Condor-Medium {
    font-family: "condor", sans-serif !important ;
    font-weight: 500;
    font-style: normal;
}

.wf-Condor-Bold {
    font-family: "condor", sans-serif !important ;
    font-weight: 700;
    font-style: normal;
}

.wf-Condor-Bold-Italic {
    font-family: "condor", sans-serif !important ;
    font-weight: 700;
    font-style: italic;
}

.wf-Condor-Black {
    font-family: "condor", sans-serif !important ;
    font-weight: 800;
    font-style: normal;
}

.wf-CondorComp-Regular {
    font-family: condor-compressed, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.wf-CondorComp-Italic {
    font-family: "condor-compressed", sans-serif !important ;
    font-weight: 400;
    font-style: italic;
}

.wf-CondorComp-Bold {
    font-family: "condor-compressed", sans-serif !important ;
    font-weight: 700;
    font-style: normal;
}

.wf-CondorComp-Bold-Italic {
    font-family: "condor-compressed", sans-serif !important ;
    font-weight: 700;
    font-style: italic;
}

.wf-CondorCond-Regular {
    font-family: "condor-condensed", sans-serif !important ;
    font-weight: 400;
    font-style: normal;
}

.wf-CondorCond-Italic {
    font-family: "condor-condensed", sans-serif !important ;
    font-weight: 400;
    font-style: italic;
}

.wf-CondorCond-Bold {
    font-family: "condor-condensed", sans-serif !important ;
    font-weight: 700;
    font-style: normal;
}

.wf-CondorCond-Bold-Italic {
    font-family: "condor-condensed", sans-serif !important ;
    font-weight: 700;
    font-style: italic;
}

.wf-CondorExtd-Regular {
    font-family: "condor-extended", sans-serif !important ;
    font-weight: 400;
    font-style: normal;
}

.wf-CondorExtd-Italic {
    font-family: "condor-extended", sans-serif !important ;
    font-weight: 400;
    font-style: italic;
}

.wf-CondorExtd-Bold {
    font-family: "condor-extended", sans-serif !important ;
    font-weight: 700;
    font-style: normal;
}

.wf-CondorExtd-Bold-Italic {
    font-family: "condor-extended", sans-serif !important ;
    font-weight: 700;
    font-style: italic;
}

.wf-CondorWide-Regular {
    font-family: "condor-wide", sans-serif !important ;
    font-weight: 400;
    font-style: normal;
}

.wf-CondorWide-Italic {
    font-family: "condor-wide", sans-serif !important ;
    font-weight: 400;
    font-style: italic;
}

.wf-CondorWide-Bold {
    font-family: "condor-wide", sans-serif !important ;
    font-weight: 700;
    font-style: normal;
}

.wf-CondorWide-Bold-Italic {
    font-family: "condor-wide", sans-serif !important ;
    font-weight: 700;
    font-style: italic;
}

.wf-TA-koigokoro {
    font-family: "ta-koigokoro", sans-serif !important ;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: '07ロゴたいぷゴシックCondense';
    src:local(''),
        url('../font/LogoTypeGothicCondensed.otf');
}

.wf-LogoTypeGothicCondensed {
    font-family: '07ロゴたいぷゴシックCondense' !important ;
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: '殴り書きクレヨン';
    src:local(''),
        url('../font/crayon_1-1.ttf');
}

.wf-crayon_1-1 {
    font-family: '殴り書きクレヨン' !important ;
    font-weight: 400;
    font-style: normal;

}

/* inter-300 - latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: local(''),
        url('../fonts/inter-v12-latin-300.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/inter-v12-latin-300.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local(''),
        url('../fonts/inter-v12-latin-500.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/inter-v12-latin-500.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local(''),
        url('../fonts/inter-v12-latin-700.woff2') format('woff2'),
        /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/inter-v12-latin-700.woff') format('woff');
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

.wf-BrandonGrotesque-Regular {
    font-family: "brandon-grotesque", sans-serif !important ;
    font-weight: 400;
    font-style: normal;
}

.wf-BrandonGrotesque-Regular-Italic {
    font-family: "brandon-grotesque", sans-serif !important ;
    font-weight: 400;
    font-style: italic;
}

.wf-BrandonGrotesque-Bold {
    font-family: "brandon-grotesque", sans-serif !important ;
    font-weight: 700;
    font-style: normal;
}

.wf-BrandonGrotesque-Bold-Italic {
    font-family: "brandon-grotesque", sans-serif !important ;
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'ロゴたいぷゴシック';
    src:url('../fonts/ロゴたいぷゴシック.otf');
}

.wf-LogoTypeGothic {
    font-family: 'ロゴたいぷゴシック' !important ;
    font-weight: 400;
    font-style: normal;

}

@font-face {
    font-family: 'やさしさゴシック手書き';
    src:url('../fonts/やさしさゴシック手書き.otf');
}

.wf-YasashisaGothic {
    font-family: 'やさしさゴシック手書き' !important ;
    font-weight: 400;
    font-style: normal;

}

.wf-Alisha-Regular {
    font-family: "alisha", sans-serif !important;
    font-weight: 400;
    font-style: normal;
    }


/*--------------------------------------------------------------
# font-weight
--------------------------------------------------------------*/
.fw100 {
    font-weight: 100 !important;
}

.fw300 {
    font-weight: 300 !important;
}

.fw400 {
    font-weight: 400 !important;
}

.fw500 {
    font-weight: 500 !important;
}

.fw700 {
    font-weight: 700 !important;
}

/*--------------------------------------------------------------
# margin & padding
--------------------------------------------------------------*/
mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-35 {
    margin-top: 35px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-60 {
    margin-top: 60px;
}

.mt-70 {
    margin-top: 70px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-90 {
    margin-top: 90px;
}

.mt-100 {
    margin-top: 100px;
}

.mt-120 {
    margin-top: 120px;
}

.mt-150 {
    margin-top: 150px;
}

.mt-300 {
    margin-top: 300px;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-60 {
    margin-bottom: 60px;
}

.mb-70 {
    margin-bottom: 70px;
}

.mb-80 {
    margin-bottom: 80px;
}

.mb-90 {
    margin-bottom: 90px;
}

.mb-100 {
    margin-bottom: 100px;
}

.mb-120 {
    margin-bottom: 120px;
}

.mb-150 {
    margin-bottom: 150px;
}

.pt-10 {
    padding-top: 10px;
}

.pt-15 {
    padding-top: 15px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-25 {
    padding-top: 25px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-35 {
    padding-top: 35px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-50 {
    padding-top: 50px;
}

.pt-60 {
    padding-top: 60px;
}

.pt-70 {
    padding-top: 70px;
}

.pt-80 {
    padding-top: 80px;
}

.pt-90 {
    padding-top: 90px;
}

.pt-100 {
    padding-top: 100px;
}

.pt-120 {
    padding-top: 120px;
}

.pt-150 {
    padding-top: 150px;
}

.pb-10 {
    padding-bottom: 10px;
}

.pb-15 {
    padding-bottom: 15px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-25 {
    padding-bottom: 25px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-35 {
    padding-bottom: 35px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-60 {
    padding-bottom: 60px;
}

.pb-70 {
    padding-bottom: 70px;
}

.pb-80 {
    padding-bottom: 80px;
}

.pb-90 {
    padding-bottom: 90px;
}

.pb-100 {
    padding-bottom: 100px;
}

.pb-120 {
    padding-bottom: 120px;
}

.pb-150 {
    padding-bottom: 150px;
}

.pl-10 {
    padding-left: 10px;
}

.pl-15 {
    padding-left: 15px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-25 {
    padding-left: 25px;
}

.pl-30 {
    padding-left: 30px;
}

.pl-35 {
    padding-left: 35px;
}

.pl-40 {
    padding-left: 40px;
}

.pl-50 {
    padding-left: 50px;
}

.pl-60 {
    padding-left: 60px;
}

.pl-70 {
    padding-left: 70px;
}

.pl-80 {
    padding-left: 80px;
}

.pl-90 {
    padding-left: 90px;
}

.pl-100 {
    padding-left: 100px;
}

.pl-120 {
    padding-left: 120px;
}

.pl-150 {
    padding-left: 150px;
}

.pr-10 {
    padding-right: 10px;
}

.pr-15 {
    padding-right: 15px;
}

.pr-20 {
    padding-right: 20px;
}

.pr-25 {
    padding-right: 25px;
}

.pr-30 {
    padding-right: 30px;
}

.pr-35 {
    padding-right: 35px;
}

.pr-40 {
    padding-right: 40px;
}

.pr-50 {
    padding-right: 50px;
}

.pr-60 {
    padding-right: 60px;
}

.pr-70 {
    padding-right: 70px;
}

.pr-80 {
    padding-right: 80px;
}

.pr-90 {
    padding-right: 90px;
}

.pr-100 {
    padding-right: 100px;
}

.pr-120 {
    padding-right: 120px;
}

.pr-150 {
    padding-right: 150px;
}

.mt--360 {
    margin-top: -360px;
}
.mt--600 {
    margin-top: -600px;
}

/*--------------------------------------------------------------
# link decoration
--------------------------------------------------------------*/

.link-dark {
    color: #343a40 !important;
}
.link-dark:hover, .link-dark:focus {
    color: #2a2e33 !important;
}

.link-fancy {
    color: #151515;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.link-fancy:hover {
    color: #6c757d;
}

.link-fancy:before {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    transform-origin: left;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(90deg, #151515 0, #151515 25%, transparent 0, transparent 50%, #151515 0, #151515 75%, transparent 0, transparent);
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 400% 1px;
    transition: background-position 0.8s ease-in-out;
}

.link-fancy:hover:before {
    background-position: 100%;
}

/*--------------------------------------------------------------
# shadow decoration
--------------------------------------------------------------*/

.shadow {
    box-shadow: 0 3rem 4rem rgba(21, 21, 21, 0.25) !important;
}

.shadow-sm {
    box-shadow: 0 1rem 1.5rem rgba(21, 21, 21, 0.25) !important;
}

.shadow-lg {
    box-shadow: 0 4rem 6rem rgba(21, 21, 21, 0.25) !important;
}

.shadow-none {
    box-shadow: none !important;
}

.text-shadow-b {
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
.text-shadow-w {
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.5);
}

/*--------------------------------------------------------------
# text aligin
--------------------------------------------------------------*/
.align-left {
    text-align: left ! important;
}
.align-center {
    text-align: center ! important;
}
.align-right {
    text-align: right ! important;
}

/*--------------------------------------------------------------
# text underline
--------------------------------------------------------------*/
.bottom-line {
    border-bottom: 1px solid #444444;
    padding-bottom: 0.25em;
}
.bottom-line-w {
    border-bottom: 1px solid #FFFFFF;
    padding-bottom: 0.25em;
}
.bottom-line-g {
    border-bottom: 1px solid #555555;
    padding-bottom: 0.25em;
}


/*--------------------------------------------------------------
# mobile ON/OFF
--------------------------------------------------------------*/

.mobile-display-ON {
    display: none ;
}
.mobile-display-OFF {
    display: block ;
}
@media screen and (max-width: 768px) {
    .mobile-display-ON {
        display: block ;
    }
    .mobile-display-OFF {
        display: none ;
    }
}


#Ranking {
    margin-top: 12rem;

}


/*--------------------------------------------------------------
# test scroll
--------------------------------------------------------------*/

@keyframes scroll {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* 追加：親要素のスタイル */
.scrolling-text-wrapper {

    white-space: nowrap;
    overflow: hidden; /* 横方向のオーバーフローを非表示にする */
    position: absolute;
    top: 80%;
    color: #FFFFFF;
    z-index: 1;
    width: 100%; /* 幅を画面幅に合わせる */
    left: 0;

}

/* 追加：子要素のスタイル */
.scrolling-text-inner {

    overflow: scroll; /* スクロール可能にする */
    animation: scroll 20s linear infinite; /* アニメーションを適用 */
    width: 100%; /* 幅を親要素と同じにする */

}
.scrolling-text {

    display: flex;
    white-space: nowrap;
    overflow: hidden;
    animation: scroll 20s linear infinite;

    position: absolute; /* 絶対位置指定 */
    top: 80%; /* 上端からの距離をパーセンテージで指定 */
    /*left: 50%;  左端からの距離をパーセンテージで指定 */
    color: #FFFFFF; /* テキストの色を設定 */
    z-index: 1;

}

.marquee {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    gap: 1rem;
    font-size: 3rem;
}

.marquee {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    gap: 1rem;
    font-size: 256px;
    z-index: 1;
}
.marquee-inner {
    position: absolute;
    top: 80%;
    overflow-x: no-content ;
    color: #FFFFFF;

    animation: marquee 20s linear infinite;
}

@media screen and (max-width: 768px) {
    .marquee {
        display: flex;
        white-space: nowrap;
        overflow: hidden;
        gap: 1rem;
        font-size: 160px;
        z-index: 1;
    }
    .marquee-inner {
        position: absolute;
        top: 90%;
        overflow-x: no-content ;
        color: #FFFFFF;

        animation: marquee 20s linear infinite;
    }

}

@keyframes marquee {
    0%   {
        translate: 0;
    }
    100% {
        translate: calc(-100% - 1rem);
    }
}