.border {
    border: double 10px #454545;
    background-color: #FFFFFF;
    border-radius: 30px;
    margin: 20px
}

.soro-background1102 {
    /*背景を設定*/
    -webkit-appearance: none; /*iosデフォルトスタイルを適用しない*/
    background-image: url(../img/img_soro/haikei_pair.png);
    height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: right;
    padding: 0;
    margin: 0;
}

.soro-background1103 {
    /*背景を設定*/
    -webkit-appearance: none; /*iosデフォルトスタイルを適用しない*/
    background-image: url(../img/img_soro/suisai03.png);
    height: 100vh;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: right;
    padding: 0;
    margin: 0;
}




footer {
    background-color: #CAE5CD;
}



/**
 * 画面幅が小サイズのとき
 */
@media (max-width: 799px) {

    /*フルーツマッチフィーバー*/
    .title {
        /*文字の装飾*/
        font-size: 20px;
        text-align: center;
        line-height: 0.95em;
        font-weight: bold;
        color: #FFAB91;
        text-shadow: 0.02em 0.02em 0.02em rgba(0,0,0,1);
        margin-top: 10px;
    }

    /*シングルプレイランキング*/
    .play-ranking-title {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
        margin: 0;
        padding: 0;
    }

    .play-ranking-fontsize {
        margin-inline: 10px;
        font-size: 16px;
    }

    .title-font {
        font-family: "Comic Sans MS";
        text-align: center;
        font-size: 1.3em;
        color: #F39A38;
    }

    .fruits-size {
        width: 60px;
        height: 60px;
    }

    ul {
        list-style: none;
        width: 780px;
    }

    .li-content1102 {
        background: #fffde8;
        box-shadow: 0px 0px 0px 10px #fffde8; /*線の外側*/
        border: dashed 2px #ffb03f; /*破線*/
        border-radius: 9px;
        margin: 25px 0px 25px 0px;
        padding: 0.5em 0.5em 0.5em 0.5em;
    }

    /*全体的なレイアウトの調整*/
    .rank-whole {
        display: flex;
        justify-content: center;
        margin-right: 30px;
    }

    .rank-content {
        display: flex;
        align-items: center; /*上下中央揃え*/
    }

    .rank-name {
        font-size: 16px;
        margin-left: 3px;
    }

    /*得点数を表示*/
    .rank-point {
        margin-right: 5px;
        font-size: 16px;
        font-family: "Comic Sans MS";
        margin-left: auto;
        position: absolute;
        margin-right: 30px;
        top: 50%;
        left: 40%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        padding: 0;
        margin: 0;
    }

    /*ポイントのフレーム*/
    .frame-img {
        margin-right: 10px;
        margin-left: auto;
        width: 60px;
    }

    /*王冠の画像サイズ*/
    .crown-img {
        position: absolute;
        top: -30%;
        left: -30%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        transform: rotate( -20deg );
        padding: 0;
        margin: 0;
        width: 25px;
    }

    /*ランキング順位文字の大きさ(top3)*/
    .top-number-img {
        width: 40px;
    }

    /*ランキング順位文字の大きさ(3位以下 10位以上)*/
    .number-img {
        width: 40px;
    }

    /*ランキング11位以下*/
    .base-ranking-number {
        font-family: "Comic Sans MS";
        color: rgba(244,0,25,0.5);
        font-size: 30px;
        margin-right: 10px;
    }

    /*現在表示されているランキングの日付*/
    .main-date {
        display: inline-block;
        border-radius: 10px;
        font-weight: bold; /* 文字の太さ */
        text-align: center;
        font-size: 16px;
        padding: 5px;
        width: 40%;
        border: 2px solid #000;
        background: #fff; /* ボタン上色 */
        opacity: 1.0;

    }

    /*現在表示されていないランキングの日付*/
    .sub-date {
        display: inline-block;
        border-radius: 10px;
        font-weight: bold; /* 文字の太さ */
        text-align: center;
        font-size: 16px;
        padding: 5px;
        width: 40%;
        border: 2px solid #000;
        background: #fff; /* ボタン上色 */
        text-decoration: none;
        color: inherit;
        opacity: 0.5;
    }

    .menu-btn {
        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        height: 40px;
        width: 40px;
        justify-content: center;
        align-items: center;
        z-index: 90;
        background-color: #FAB27B;
    }

    /*ページトップへ移動するボタン*/
    .page-top {
        position: fixed;
        right: 10px;
        bottom: 70px;
        margin: 0;
        opacity: 0.7;
        transition: opacity 0.4s ease-in;
    }

        .page-top a {
            position: relative;
            display: flex;
            width: 40px;
            height: 40px;
            justify-content: center;
            background: rgb(255 166 80);
            transition: opacity .6s ease;
            color: #FFF;
            align-items: center;
            text-decoration: none;
            font-size: 20px;
            border-radius: 100%;
        }

    /*ページボトムへ移動するボタン*/
    .page-down {
        position: fixed;
        right: 10px;
        bottom: 10px;
        margin: 0;
        opacity: 0.7;
        transition: opacity 0.4s ease-in;
    }

        .page-down a {
            position: relative;
            display: flex;
            width: 40px;
            height: 40px;
            justify-content: center;
            background: rgb(255 166 80);
            transition: opacity .6s ease;
            color: #FFF;
            align-items: center;
            text-decoration: none;
            font-size: 20px;
            border-radius: 100%;
        }

    /*div.fadein-top {
        opacity: 0.7;
    }

    div.fadein-bottom {
        opacity: 0.7;
    }*/

    /* 2023.10.18 タイトル画像云々 */
    .pc {
        display: none !important;
        width: 100%;
        max-width: 800px;
    }

    .sp {
        display: block !important;
        width: 100%;
        max-width: 400px;
    }


}
/**
 * 画面幅が中サイズのとき
 */
@media (min-width: 800px) {

    /*フルーツマッチフィーバー*/
    .title {
        /*文字の装飾*/
        font-size: 2em;
        text-align: center;
        line-height: 0.95em;
        font-weight: bold;
        color: #FFAB91;
        text-shadow: 0.02em 0.02em 0.02em rgba(0,0,0,1);
        margin-top: 10px;
    }

    /*シングルプレイランキング*/
    .play-ranking-title {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
        padding: 5px;
    }

    .play-ranking-fontsize {
        margin-inline: 30px;
        font-size: 25px;
    }

    .title-font {
        font-family: "Comic Sans MS";
        text-align: center;
        font-size: 1.5em;
        color: #F39A38;
    }

    .fruits-size {
        width: 100px;
        height: 100px;
    }

    ul {
        list-style: none;
        width: 780px;
    }

    .li-content1102 {
        background: #fffde8;
        box-shadow: 0px 0px 0px 10px #fffde8; /*線の外側*/
        border: dashed 2px #ffb03f; /*破線*/
        border-radius: 9px;
        margin: 25px;
        padding: 0.5em 0.5em 0.5em 2em;
    }

    /*全体的なレイアウトの調整*/
    .rank-whole {
        display: flex;
        justify-content: center;
        margin-right: 40px;
    }

    .rank-content {
        display: flex;
        align-items: center; /*上下中央揃え*/
    }

    .rank-name {
        font-size: 25px;
        margin-left: 10px;
    }

    /*得点数を表示*/
    .rank-point {
        margin-right: 30px;
        font-size: 30px;
        font-family: "Comic Sans MS";
        margin-left: auto;
        position: absolute;
        margin-right: 30px;
        top: 50%;
        left: 40%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        padding: 0;
        margin: 0;
    }

    /*ポイントのフレーム*/
    .frame-img {
        margin-right: 30px;
        margin-left: auto;
        width: 130px;
    }

    /*王冠の画像サイズ*/
    .crown-img {
        position: absolute;
        top: -30%;
        left: -30%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        transform: rotate( -20deg );
        padding: 0;
        margin: 0;
        width: 50px;
    }

    /*ランキング順位文字の大きさ(top3)*/
    .top-number-img {
        width: 100px;
    }

    /*ランキング順位文字の大きさ(3位以下 10位以上)*/
    .number-img {
        width: 100px;
    }

    /*ランキング11位以下*/
    .base-ranking-number {
        font-family: "Comic Sans MS";
        color: rgba(244,0,25,0.5);
        font-size: 70px;
        margin-right: 10px;
    }

    /*現在表示されているランキングの日付*/
    .main-date {
        display: inline-block;
        border-radius: 10px;
        font-weight: bold; /* 文字の太さ */
        text-align: center;
        font-size: 100%;
        padding: 15px;
        width: 40%;
        border: 2px solid #000;
        background: #fff; /* ボタン上色 */
        opacity: 1.0;

    }

    /*現在表示されていないランキングの日付*/
    .sub-date {
        display: inline-block;
        border-radius: 10px;
        font-weight: bold; /* 文字の太さ */
        text-align: center;
        font-size: 100%;
        padding: 15px;
        width: 40%;
        border: 2px solid #000;
        background: #fff; /* ボタン上色 */
        text-decoration: none;
        color: inherit;
        opacity: 0.5;
    }

    /*ページトップへ移動するボタン*/
    .page-top {
        position: fixed;
        right: 10px;
        bottom: 70px;
        margin: 0;
        transition: opacity 0.4s ease-in;
    }

        .page-top a {
            position: relative;
            display: flex;
            width: 40px;
            height: 40px;
            justify-content: center;
            background: rgb(255 166 80);
            transition: opacity .6s ease;
            color: #FFF;
            align-items: center;
            text-decoration: none;
            font-size: 20px;
            border-radius: 100%;
        }

    /*ページボトムへ移動するボタン*/
    .page-down {
        position: fixed;
        right: 10px;
        bottom: 10px;
        margin: 0;
        transition: opacity 0.4s ease-in;
    }

        .page-down a {
            position: relative;
            display: flex;
            width: 40px;
            height: 40px;
            justify-content: center;
            background: rgb(255 166 80);
            transition: opacity .6s ease;
            color: #FFF;
            align-items: center;
            text-decoration: none;
            font-size: 20px;
            border-radius: 100%;
        }

    /* 2023.10.18 タイトル画像云々 */
    .pc {
        display: block !important;
        width: 100%;
        max-width: 800px;
    }

    .sp {
        display: none !important;
        width: 100%;
        max-width: 400px;
    }
}
/**
 * 画面幅が大サイズのとき
 */
@media (min-width: 1051px) {

    /*フルーツマッチフィーバー*/
    .title {
        /*文字の装飾*/
        font-size: 3em;
        text-align: center;
        line-height: 0.95em;
        font-weight: bold;
        color: #FFAB91;
        text-shadow: 0.02em 0.02em 0.02em rgba(0,0,0,1);
        margin-top: 20px;
    }


    /*シングルプレイランキング*/
    .play-ranking-title {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-weight: bold;
        font-size: 35px;
    }

    .play-ranking-fontsize {
        margin-inline: 30px;
        font-size: 35px;
    }

    .title-font {
        font-family: "Comic Sans MS";
        text-align: center;
        font-size: 2.5em;
        color: #F39A38;
    }

    .fruits-size {
        width: 130px;
        height: 130px;
    }

    ul {
        list-style: none;
        width: 1100px;
    }

    .li-content1102 {
        background: #fffde8;
        box-shadow: 0px 0px 0px 10px #fffde8; /*線の外側*/
        border: dashed 2px #ffb03f; /*破線*/
        border-radius: 9px;
        margin: 25px;
        padding: 0.5em 0.5em 0.5em 2em;
    }

    /*全体的なレイアウトの調整*/
    .rank-whole {
        display: flex;
        justify-content: center;
        margin-right: 40px;
    }

    .rank-content {
        display: flex;
        align-items: center; /*上下中央揃え*/
    }

    .rank-name {
        font-size: 30px;
        margin-left: 20px;
    }

    /*得点数を表示*/
    .rank-point {
        margin-right: 30px;
        font-size: 20px;
        font-family: "Comic Sans MS";
        margin-left: auto;
        position: absolute;
        margin-right: 30px;
        top: 50%;
        left: 40%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        padding: 0;
        margin: 0;
        font-size: 40px;
    }

    /*ポイントのフレーム*/
    .frame-img {
        margin-right: 30px;
        margin-left: auto;
        width: 200px;
    }

    /*王冠の画像サイズ*/
    .crown-img {
        position: absolute;
        top: -30%;
        left: -30%;
        -ms-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        transform: rotate( -20deg );
        padding: 0;
        margin: 0;
        width: 80px;
    }

    /*ランキング順位文字の大きさ(top3)*/
    .top-number-img {

        width:150px;
    }

    /*ランキング順位文字の大きさ(3位以下 10位以上)*/
    .number-img {
        width: 150px;
    }

    /*ランキング11位以下*/
    .base-ranking-number {
        font-family: "Comic Sans MS";
        color: rgba(244,0,25,0.5);
        font-size: 100px;
        margin-right:10px;
    }

    /*現在表示されているランキングの日付*/
    .main-date {
        display: inline-block;
        border-radius: 10px;
        font-weight: bold; /* 文字の太さ */
        text-align: center;
        font-size: 100%;
        padding: 15px;
        width: 40%;
        border: 2px solid #000;
        background: #fff; /* ボタン上色 */
        opacity: 1.0;
    }

    /*現在表示されていないランキングの日付*/
    .sub-date {
        display: inline-block;
        border-radius: 10px;
        font-weight: bold; /* 文字の太さ */
        text-align: center;
        font-size: 100%;
        padding: 15px;
        width: 40%;
        border: 2px solid #000;
        background: #fff; /* ボタン上色 */
        text-decoration: none;
        color: inherit;
        opacity: 0.5;
    }

    /* 2023.10.18 タイトル画像云々 */
    .pc {
        display: block !important;
        width: 100%;
        max-width: 800px;
    }

    .sp {
        display: none !important;
        width: 100%;
        max-width: 400px;
    }
}

/*日付のボタンに応じて別の影を表示する*/
.date_color1102 {
    box-shadow: 2px 5px 0 0 #F38173
}

.date_color1103 {
    box-shadow: 2px 5px 0 0 #78E5E5
}



html {
    scroll-behavior: smooth;
}






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

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0); /*メニューオープン時は真ん中の線を透明にする*/
}

    #menu-btn-check:checked ~ .menu-btn span::before {
        bottom: 0;
        transform: rotate(45deg);
    }

    #menu-btn-check:checked ~ .menu-btn span::after {
        top: 0;
        transform: rotate(-45deg);
    }

#menu-btn-check {
    display: none;
}