@charset "utf-8";

/* ======================================
   reset
====================================== */
/* すべての要素のマージン、パディング、ボックスサイズを初期化 */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

/* HTML、BODYの設定 */
html,
body {
    width: 100%;
    height: 100%;
    line-height: 0;
    font-family: sans-serif;
    background-color: #fff;
}

body {
    overflow-x: hidden;
}

/* メディア要素のレスポンシブ対応 */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* リストの初期化 */
ul,
ol {
    list-style: none;
}

/* リンクの初期化 */
a {
    color: inherit;
}

/* テーブルの初期化 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ボタンの初期化 */
button {
    background: none;
    border: none;
    cursor: pointer;
}

/* 入力フォームの初期化 */
input,
textarea {
    border: none;
    outline: none;
    background: transparent;
}

/* その他 */
input,
textarea,
select {
    font-family: inherit;
    font-size: 1rem;
}

/* ノンクリティカルな余白はここで調整 */
body {
    padding: 0;
    margin: 0;
}

/* ======================================
   共通
====================================== */
a:hover {
    text-decoration: none;
}

/* 別窓アイコン */
.dli-external-link {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    width: 0.7em;
    height: 0.7em;
    border: 0.1em solid currentColor;
    border-radius: 0.1em;
    background: #5b3318;
    box-sizing: content-box;
    position: relative;
}

.dli-external-link>span {
    position: absolute;
    top: -0.2em;
    right: -0.2em;
    width: 45%;
    height: 45%;
    border: 0.1em solid currentColor;
    border-bottom: 0;
    border-left: 0;
    background: #5b3318;
    box-shadow: -0.1em 0.1em 0 0.1em #5b3318;
    box-sizing: border-box;
}

.dli-external-link>span::before {
    content: '';
    position: absolute;
    top: -0.05em;
    right: -0.1em;
    width: 0.1em;
    height: 0.9em;
    background: currentColor;
    transform: rotate(45deg);
    transform-origin: top center;
}

/* 別窓アイコン 茶色　薄茶地 */
.dli-external-link2 {
    color: #5b3318;
    background: #d9c7b6;
}

.dli-external-link2>span {
    background: #d9c7b6;
    box-shadow: -0.1em 0.1em 0 0.1em #d9c7b6;
}

/* 別窓アイコン 茶色　白地 */
.dli-external-link3 {
    color: #5b3318;
    background: #fff;
}

.dli-external-link3>span {
    background: #fff;
    box-shadow: -0.1em 0.1em 0 0.1em #fff;
}

/* SP切り替え */
.sp_only {
    display: none;
}

.pc_only {
    display: block;
}

@media screen and (max-width: 767px) {
    .sp_only {
        display: block;
    }

    .pc_only {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    picture img {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
    }
}

/* ======================================
   header
====================================== */
#head_logo {
    background-color: #fff;
    text-align: center;
    height: 40px;
    width: 100%;
}

header h1 {
    padding-top: 6px;
}

header img {
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    header {
        background: url(../img/mv_bg_bottom.webp) repeat #5b3318;
    }

    header img {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
    }

    header h1 {
        padding-top: 3px;
    }

    header h1 img {
        width: 206px;
    }
}

/* ======================================
   header　MV
====================================== */
#head_mv {
    background: url(../img/mv_bg_up.webp) center bottom / cover no-repeat, #3bb5ea;
    text-align: center;

}

#head_mv_wrapper {
    position: relative;
    width: 950px;
    left: 50%;
    transform: translateX(-50%);
}

#mv_left {
    position: absolute;
    top: 320px;
    left: 40px;
}

#mv_right {
    position: absolute;
    top: 290px;
    right: 50px;
}

@media screen and (max-width: 950px) {
    #head_mv_wrapper {
        width: 100%;
    }
    #mv_left {
    width: 130px;
    top: 290px;
    left: 50px;
}

#mv_right {
    width: 130px;
    top: 260px;
    right: 50px;
}

}
@media screen and (max-width: 850px) {
#mv_left {
    width: 110px;
    top: 275px;
    left: 50px;
}

#mv_right {
    width: 110px;
    top: 245px;
    right: 50px;
}

}
@media screen and (max-width: 767px) {
    #head_mv {
        background: none;
    }

    #head_mv_wrapper {
        width: 100%;
    }
}

/* ======================================
   CTA
====================================== */
#head_mv_cta {
    background: url(../img/mv_bg_bottom.webp) repeat #5b3318;
    color: #fff;
    text-align: center;
    padding: 16px 0 0 0;
    font-size: 13px;
}

.cta_btn {
    background: url(../img/mv_bg_bottom.webp) repeat #5b3318;
    font-size: 13px;
    color: #fff;
    text-align: center;
    padding: 32px 0 32px 0;
}

#head_mv_cta p {
    padding-top: 20px;
    padding-bottom: 32px;
    line-height: 1.5;
}

.cta_btn p {
    padding-top: 20px;
    line-height: 1.5;
}

.comp_btn img {
    animation: scaleUpDown 1.5s infinite alternate, sparkle 1.5s infinite alternate;
}

@media screen and (max-width: 767px) {
    #head_mv_cta {
        background: none;
    }

    .cta_btn img,
    #head_mv_cta .comp_btn img {
        width: 90%;
        margin: 0 auto;
    }
}

/* スケールアップダウンのアニメーション */
@keyframes scaleUpDown {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.03);
    }
}

/* 照度を上げるアニメーション */
@keyframes sparkle {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.7);
    }
}

/* ホバー時のアニメーション */
.comp_btn img:hover {
    animation: moveDown 0.3s ease forwards;
    transform: scale(0.98);
    filter: brightness(2);
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* ホバー時の移動アニメーション */
@keyframes moveDown {
    0% {
        transform: translateY(0);
    }

    100% {
        transition: transform 0.3s;
        filter: brightness(1.5);
    }
}

/* 追随CTA */

#fixed_cta {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgba(104, 66, 39);
    z-index: 1000;
    opacity: 0;
    /* 初期状態で透明 */
    visibility: hidden;
    /* 初期状態で非表示 */
    transform: translateY(-20px);
    /* 初期位置を少し上に */
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
    /* アニメーションを追加 */
}

#fixed_cta.show {
    opacity: 1;
    /* 不透明にする */
    visibility: visible;
    /* 表示状態にする */
    transform: translateY(0);
    /* 元の位置に戻す */
}

.cta_container_inner {
    text-align: center;
    margin: 20px auto;
}

.cta_container_inner a {
    color: #ffea35;
    background: linear-gradient(to bottom, #d92000 50%, #9d0000 50%);
    border: 5px solid #ffea35;
    text-decoration: none;
    letter-spacing: 0.1rem;
    font-weight: bold;
    box-shadow: #333 0px 0px 5px;
}

.cta_container_inner a:hover {
    transition: filter 0.3s ease;
    filter: brightness(1.5);
}

.cta_container_inner a {
    padding: 10px 200px;
    border-radius: 40px;
    font-size: 18px;
}

.cta_container_inner {
    text-align: center;
    padding: 20px 0;
}

@media (max-width: 767px) {
    #fixed_cta {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }

    .cta_container_inner {
        text-align: center;
        padding: 15px 0;
    }

    .cta_container_inner a {
        padding: 10px 50px;
        font-size: 16px;
        border: 3px solid #ffea35;
    }

}


/* ======================================
   navigation
====================================== */
nav {
    width: 100%;
}

ul#gnav {
    width: 805px;
    margin: 0 auto;
    line-height: 0;
    display: flex;
    justify-content: space-between;
}

ul#gnav li {
    text-align: center;
    margin: 0 auto;
}

ul#gnav li a img:hover {
    transition: all 1s;
    filter: brightness(1.2);
}

#lnav_bg {
    background-color: #ebebeb;
    border-bottom: 3px solid #42210b;
}

ul#lnav {
    display: flex;
    align-items: baseline;
    width: 800px;
    margin: 0 auto;
}

ul#lnav li {
    text-align: center;
    margin: 0 auto;
}

ul#lnav li a {
    display: block;
    padding: 20px 25px 10px 25px;
    transition: transform 0.3s ease;
}

ul#lnav li a:hover {
    transform: translateY(2px);
    filter: brightness(1.2);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@media screen and (max-width: 815px) {
    ul#gnav {
        width: 90%;
    }

    ul#gnav li {
        width: 50%;
        margin: 0;
    }
   ul#gnav li img{
        width: 100%;
        height: auto;
    }

    ul#lnav {
        width: 100%;
    }

    ul#lnav li a {
        padding: 12px 8px 10px 8px;
    }

}

/* ======================================
   TOP
====================================== */
section {
    text-align: center;
}

.sec_inner {
    width: 800px;
    margin: 0 auto;
    padding: 64px 0;

}

@media screen and (max-width: 800px) {
    .sec_inner {
        width: 90%;
        padding: 32px 0;
    }
}

@media screen and (max-width: 767px) {
    .sec_inner a img {
        height: auto;
        width: auto;
    }
}

/* ======================================
   TOP 参加方法
====================================== */
#sec_sanka {
    width: 100%;

    background: repeating-linear-gradient(90deg,
            #ffce00,
            #ffce00 50px,
            #ffdd4c 50px,
            #ffdd4c 100px);
}

section h2 {
    margin: 0 auto;
    padding: 0 0 48px 0;
    text-align: center;
    line-height: 1.5;
    color: #42210b;
}

.sanka1 {
    position: relative;
}

.sanka1_btn {
    position: absolute;
    left: 20px;
    top: 110px;
}

@media screen and (max-width: 767px) {
    .sanka1_btn {
        left: 5%;
        top: 18%;
        width: 40%;
    }

    section h2 {
        margin: 0 auto;
        padding: 0 0 16px 0;
    }

    h2 img {
        height: 30px;
        width: auto;
    }
}

/* ======================================
   TOP 賞金チャンス
====================================== */
#sec_shokin {
    background-color: #ffea35;
    background-image: radial-gradient(circle, #ffffff 2.5px, transparent 2.5px), radial-gradient(circle, #ffffff 2.5px, transparent 2.5px);
    background-position: 0 0, 7.5px 15px;
    background-size: 15px 30px;
}

.shokin1,
.shokin3 {
    position: relative;

}

.shokin1_btn,
.shokin3_btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.shokin1_btn {
    top: 830px;
}

.shokin3_btn {
    top: 700px;
}

.shokin1_btn a:hover img {
    transform: translateY(2px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: brightness(1.2);
}

.shokin3_btn a:hover img {
    transform: translateX(2px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: brightness(1.2);
}

.shokin1,
.shokin2 {
    margin-bottom: 64px;
}

.shokin2_bottom {
    background: #562111;
    border-radius: 0 0 10px 10px;
}

.shokin2_bottom p {
    width: 700px;
    margin: 32px auto 0 auto;
}

.shokin2_bottom dl {
    width: 700px;
    margin: 0 auto;
    padding-top: 48px;
}

.shokin2_bottom dt {
    background-color: #fff;
    color: #5a2d1a;
    font-weight: bold;
    border-radius: 5px;
    line-height: 1.5;
}

.shokin2_bottom dd {
    margin-top: 16px;
    border-radius: 5px;
}

.shokin2_bottom dd img {
    margin: 0 auto;
}

.shokin2_bottom dd a {
    display: block;
    text-align: right;
    font-size: 12px;
    margin: 0 80px 1rem 0;
}

.shokin2_bottom dd img {
    padding: 0 0 32px 0;
}

/* 開閉トグルのスタイル */
.toggle {
    cursor: pointer;
    background-color: #fff;
    color: #5a2d1a;
    padding: 0px 15px;
    font-size: 1.2rem;
    border: none;
    text-align: left;
    width: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
}

.toggle::after {
    content: '＋';
    font-size: 2rem;
}

.toggle.active::after {
    content: '－';
}

.toggle+.content {
    overflow: hidden;
    height: 0;
    transition: height 0.5s ease;
    /* 高さのアニメーションを追加 */
}

.content {
    display: none;
    background-color: #d9c7b6;
    padding: 34px;
    font-size: 1rem;
    color: #3a2a1a;
    border-top: 1px solid #5a2d1a;
    transition: max-height 0.5s ease, padding 0.5s ease;
}

.content.open {
    display: block;
}
@media screen and (max-width: 850px) {
    .shokin1_btn{
         top: auto;
        bottom: 16%
    }
   .shokin3_btn {
        top: auto;
        bottom: 18%;
    }
}
@media screen and (max-width: 800px) {
    .toggle {
        width: 90%;
        margin: 0 auto;
        padding: 5px 5px 5px 10px;
        font-size: 15px;
    }

    .toggle::after {
        font-size: 1.5rem;
    }

    .content {
        padding: 16px;
    }
     }
@media screen and (max-width: 767px) {
    .shokin2_bottom {
        width: 100%;
    }

    .shokin2_bottom p {
        width: 90%;
    }

    .shokin2_bottom dl {
        width: 100%;
        padding-top: 32px;
    }

    .shokin2_bottom dd {
        width: 90%;
        margin: 8px auto 8px auto;
    }

    .shokin2_bottom dd a {
        margin: 0 0 1rem 0;
    }

    .shokin1_btn {
        top: auto;
        bottom: 20%
    }

    .shokin3_btn {
        top: auto;
        bottom: 23%;
        width: 80%;
    }

    .shokin1,
    .shokin2 {
        margin-bottom: 32px;
    }
}

/* ======================================
   TOP ランキングルール
====================================== */
#sec_rule {
    background-color: #6ecff6;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.5) 1px, transparent 1px);
    background-size: 20px 20px;
}

ul#rule_list {
    display: flex;
}

ul#rule_list li {

    text-align: center;
    margin: 0 auto 32px auto;
}

ul#rule_list li:nth-child(2) {
    padding: 0 15px;
}

ul#rule_list li a:hover img {
    transform: translateY(2px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: brightness(1.2);
}

#rule1,
#rule2 {
    margin-bottom: 64px;
}

#rule2 {
    position: relative;
}

.rule2_btn {
    position: absolute;
    top: 570px;
    left: 50%;
    transform: translateX(-50%);
}

.rule2_btn a:hover img {
    transform: translateX(2px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: brightness(1.5);
}
@media screen and (max-width: 850px) {
        .rule2_btn {
        top: auto;
        bottom: 25%;
    }
}
@media screen and (max-width: 767px) {
    ul#rule_list li img {
        width: 105px;
        height: auto;

    }

    ul#rule_list li:nth-child(2) {
        padding: 0;
    }

    .rule2_btn {
        top: auto;
        bottom: 20%;
    }

    #rule1,
    #rule2 {
        margin-bottom: 32px;
    }
}

/* ======================================
   TOP 攻略
====================================== */
#sec_how {
    background: repeating-linear-gradient(-45deg,
            #aeeeff,
            #aeeeff 20px,
            #c2f2ff 20px,
            #c2f2ff 40px);
}

#how1,
#how2,
#how3 {
    position: relative;
}

#how1,
#how2 {
    margin-bottom: 64px;
}

.how1_btn,
.how2_btn,
.how3_btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.how1_btn {
    top: 590px;
}

.how2_btn {
    top: 610px;
}

.how3_btn {
    top: 640px;
}

.how1_btn a:hover img {
    transform: translateY(-2px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: brightness(1.5);
}

.how2_btn a:hover img,
.how3_btn a:hover img,
.kakunin1_btn a:hover img {
    transform: translateX(2px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: brightness(1.5);
}
@media screen and (max-width: 850px) {
    
    .how1_btn,
    .how2_btn,
    .how3_btn {
        top: auto;
        bottom: 7%;
    }
}
@media screen and (max-width: 767px) {

    .how1_btn,
    .how2_btn,
    .how3_btn {
        top: auto;
        bottom: 6%;
    }

    .how3_btn {
        width: 225px;
        margin: 0 auto;
    }

    #how1,
    #how2 {
        margin-bottom: 32px;
    }
}

/* ======================================
   CP詳細
====================================== */
#sec_detail {
    background-color: #f7f7f7
}

.sec_line {
    border: #42210b 4px solid;
    border-radius: 10px;
    background-color: #fff;
    padding: 48px 48px 32px 48px;
    line-height: 1.6;
    text-align: left;
}

.sec_line h3 {
    font-size: 16px;
    color: #42210b;
    border-top: 1px dashed #42210b;
    padding: 24px 0 8px 0;
}

.sec_line h3:first-child {
    border-top: none;
    padding-top: 0;
}

.sec_line p {
    font-size: 14px;
    color: #333;
    padding: 0 0 24px 0;
}

table.detail_table {
    width: 270px;
    border-bottom: 1px solid #42210b;
    border-left: 1px solid #42210b;
    margin: 0px 0 20px 0;
}

.detail_table tr th {
    background-color: #42210b;
    color: #fff;
    text-align: center;
}

.detail_table tr th,
.detail_table tr td {
    border-top: 1px solid #42210b;
    border-right: 1px solid #42210b;
    padding: 2px;
    font-size: 14px;
}

table.detail_table span {
    background-color: #42210b;
    color: #fff;
    display: inline-block;
    font-size: 10px;
    padding: 1px 4px;
    margin: 0 2px 0 2px;
    border-radius: 3px;
}

.detail_table tr td {
    background-color: #fff;
}

.detail_table tr td:first-child {
    background-color: #f3f0df;
}
.detail_table tr td:last-child {
    text-align: right;
}
.detail_table tr.table_gray td {
    background-color: #cccccc;
    color: #666;
}

@media screen and (max-width: 767px) {
    .sec_line {
        padding: 16px 16px 8px 16px;
        border: #42210b 2px solid;
    }

    table.detail_table {
        width: 100%;
    }

    .sec_line h3 {
        font-size: 15px;
    }

    table.detail_table tr th,
    table.detail_table tr td {
        font-size: 12px;
    }
}

/* ======================================
   FAQ
====================================== */
#sec_faq {
    background-color: #ebebeb;
}

#sec_faq h3,
#sec_faq dt,
#sec_faq dd {
    line-height: 1.5;
}

#sec_faq h3 {
    color: #42210b;
    padding: 0 0 16px 0;
}

#sec_faq dl {
    margin: 0 0 64px 0;
    color: #42210b;
}

#sec_faq dl:last-child {
    margin-bottom: 0;
}

#sec_faq .sec_inner h3:first-child {
    margin-top: 0;
}

#sec_faq .toggle {
    width: 600px;
    margin: 0 auto 6px auto;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
}

#sec_faq dd {
    background-color: #ebebeb;
    border: none;
    text-align: left;
    width: 600px;
    margin: 0 auto 2px auto;
    padding: 16px;
    font-size: 14px;
}

#sec_faq dd p {
    margin-bottom: 16px;
}

#sec_faq dd h4 {
    padding: 16px 0 0 0;
}

#sec_faq dd h4:first-child {
    padding-top: 0;
}

@media screen and (max-width: 767px) {
    #sec_faq .toggle {
        width: 100%;
        font-size: 14px;
    }

    #sec_faq dd {
        width: 100%;
        padding: 8px;
    }

    #sec_faq dl {
        margin-bottom: 32px;
    }
}

/* ======================================
   footer
====================================== */
footer {
    line-height: 1.5;
    background-color: #42210b;
    color: #eee;
    padding: 32px 0 32px 0;
    text-align: center;
    font-size: 11px;
}

/* ======================================
   complete　順位確認
====================================== */
#complete .cta_btn_wrapper {
    padding: 16px 0 34px 0;
}

#complete .cta_btn {
    padding-bottom: 0;
}

/* ======================================
   complete　順位確認
====================================== */
#sec_kakunin {
    background: #ebebeb;
}

.kakunin1 {
    position: relative;
}

.kakunin1_btn {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
}

/* ======================================
   complete　参加方法
====================================== */
#sec_sanka2 {
    background-color: #f7f7f7;
}

#sec_sanka2 h2 {
    padding-bottom: 16px;
}

@media screen and (max-width: 767px) {
    #sec_sanka2 h2 img {
        height: 70px;
    }
}

/* ======================================
   complete　攻略方法
====================================== */
#complete #sec_how {
    background: #ebebeb;
}

.how1_btn2 {
    font-size: 0.8rem;
    position: absolute;
    bottom: 104px;
    left: 400px;
    color: #5b3318;
}

@media screen and (max-width: 767px) {
    .how1_btn2 {
        min-width: 100%;
        bottom: 1%;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ======================================
   ランキング　フォーム
====================================== */
#ranking1 {
    line-height: 1.5;
    background-color: #ebebeb;
}

#ranking1 h2 {
    padding-bottom: 0;
}

.ranking1_day {
    font-weight: bold;
    margin-top: 8px;
}

.ranking_form2 {
    background-color: #ffea35;
    border-radius: 10px;
    border: 5px solid #42210b;
    width: 70%;
    margin: 32px auto 32px auto;
    padding: 32px;
    font-size: 1.7rem;
}

.ranking_form2 strong {
    font-size: 3rem;
}

/* .ranking_formの四隅にSVGアイコンを配置 */
.ranking_form {
    position: relative;
    /* 子要素の絶対配置用 */
    background-color: #ffea35;
    border: 5px solid #42210b;
    border-radius: 10px;
    padding: 48px;
    margin-top: 48px;
    /* 既存プロパティはそのまま */
}

.ranking_form::before,
.ranking_form::after,
.ranking_form .corner-icon {
    content: "";
    position: absolute;
    width: 48px;
    /* アイコンサイズ調整 */
    height: 48px;
    background: url('../img/ranking1_bgico.svg') no-repeat center/contain;
    z-index: 2;
    pointer-events: none;
}

/* 左上 */
.ranking_form::before {
    top: -4px;
    left: -4px;
    transform: rotate(0deg);
}

/* 右上 */
.ranking_form::after {
    top: -4px;
    right: -4px;
    transform: rotate(90deg);
}

/* 左下 */
.ranking_form .corner-icon.corner-bl {
    bottom: -4px;
    left: -4px;
    transform: rotate(270deg);
}

/* 右下 */
.ranking_form .corner-icon.corner-br {
    bottom: -4px;
    right: -4px;
    transform: rotate(180deg);
}

#section_ranking {
    background-color: #ffea35;
}

.ranking_list {
    background-color: #fff;
    border: 5px solid #42210b;
    border-radius: 10px;
    padding: 32px;
    line-height: 1.5;
    margin-bottom: 32px;
}

.ranking1_txt {
    color: #666666;
    font-size: 0.8rem;
    padding: 8px 0 0 0;
}

.ranking_form_input {
    margin-top: 16px;
}

@media screen and (max-width:767px) {
    .ranking_form {
        padding: 32px;
        margin-top: 16px;
    }

    .ranking_form::before,
    .ranking_form::after,
    .ranking_form .corner-icon {
        width: 32px;
        /* アイコンサイズ調整 */
        height: 32px;
    }

    .ranking_list {
        padding: 32px 16px;
    }

    .ranking_form2 {
        width: 100%;
        font-size: 1.3rem;
        margin-bottom: 32px;
        font-weight: bold;
        border: 3px solid #42210b;
    }

    .ranking_form2 strong {
        font-size: 2rem;
    }
}

/* -------------------------
   ランキング
------------------------- */
a:hover .ranking_btn img {
    transform: translateX(-2px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: brightness(1.2);

}

.rankcheck {
    position: relative;
    z-index: 2;
}

.lead+.rankcheck {
    margin-top: 64px;
}

@media screen and (max-width:767px) {
    .ranking_btn img {
        max-width: 200px;
        margin: 0 auto 0 auto;
        padding-bottom: 16px;
    }
}

/* 検索ボックス */

.rankcheck_title {
    width: 88%;
    max-width: 2000px;
    display: block;
    position: relative;
    top: 50px;
    padding: 15px 20px;
    font-size: 18px;
    color: #171c61;
    background: #ffdf29;
    text-align: center;
    margin: 0 auto;
    z-index: 3;
}


.contents_search_form {
    max-width: 700px;
    margin: 0 auto 32px auto;
    justify-content: center;
    align-content: center;
    text-align: center;
}


.contents_search_form input {
    display: inline-block;
    width: 300px;
    background: #f2f2f2;
    border: solid 5px #42210b;
    border-radius: 5px;
    font-size: 3.0rem;
    padding: 5px;
    font-family: 'Roboto Mono', monospace;
    height: 64px;
    text-align: center;
}

.contents_search_form input::placeholder {
    color: #ccc;
}

.contents_search_form .btn {
    width: 160px;
    padding: 8px 16px;
    background: linear-gradient(to bottom, #d92000 50%, #9d0000 50%);
    border: solid 2px #42210b;
    border-radius: 5px;
    margin: 8px 0 0 0;
    box-shadow: none;
    display: inline-block;
    cursor: pointer;
    font-weight: bold;
    color: #fff;
    font-size: 1.6rem;
}

.contents_search_form .btn:hover {
    filter: brightness(2.5);
    transform: translateY(2px);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 結果メッセージ */
.cr_result {
    display: none;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 32px;
    text-align: center;
    color: #42210b;
    background-color: #fff;
    padding: 32px 0;
    border-radius: 10px;
}

.cr_result.show {
    display: block;
}

.cr_result p {
    font-size: 1.2rem;
    font-weight: bold;
}


/* 注意書き */
.contents_search_list {
    list-style: none;
    width: 100%;
    max-width: 720px;
    margin: 0 auto 1em;
    padding: 1em 0;
}

.contents_search_list li {
    font-size: 1.3rem;
    padding: 0 0 0 1em;
    text-indent: -1em;
    line-height: 1.4em;
}

/* 順位とか */
.rank_list {
    width: 96%;
    max-width: 1000px;
    margin: 0 auto;
}

.rank_list ul {
    list-style: none;
    padding: 0;
    margin: 0px auto 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#rank_list ul:nth-of-type(-n+4) {
    display: block;
}

.rank_list ul li {
    width: 32%;
    height: 40px;
    margin: 0 0.4% 0.7%;
    background: #ededed;
    border-radius: 4px;
    position: relative;
    line-height: 1.5;
}
.rank_list ul.more_list li{
    width: 19%;
}
.rank_more{
    border-top: 2px dashed #42210b;
    padding-top:10px;
}
#rank_list ul:nth-of-type(-n+4) li {
    width: 500px;
    height: 50px;
    margin: 0 auto 0.4%;
}


.rank_list ul li.highlight {
    background: #fff179;
    box-shadow: 0px 5px 15px 0px rgba(255, 231, 227, 0.5);
    position: relative;
    overflow: hidden;
    /* 既存の色はそのまま */
    /* キラキラ効果追加 */
    background-image: linear-gradient(-45deg,
            #fff179 50%,
            #fffbe7 60%,
            #fff179 70%);
    background-size: 600% 100%;
    animation: shine 8s linear infinite;
}

@keyframes shine {
    0% {
        background-position-x: 400%;
    }

    50% {
        background-position-x: 0%;
    }

    100% {
        background-position-x: -400%;
    }
}

.rank_list ul li.highlight .no {
    color: #d92000;
}

.rank_list ul li.highlight .fas,
.rank_list ul li.highlight .rank {
    opacity: 1;
}

.rank_list ul li p {
    position: absolute;
    top: 0;
    left: 0;
}

.rank {
    font-size: 2rem;
    font-family: 'Roboto Mono', monospace;
    font-weight: bold;
    margin-left: 5%;
    color: #42210b;
    opacity: 0.6;
}

.rank span {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1rem;
}

.fa {
    display: inline-block;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ランキング矢印アイコンをSVG画像に置換＆色付け・右寄せ */
.fas.fa-arrow-right.right,
.fas.fa-arrow-up.up,
.fas.fa-arrow-down.down {
    font-size: 2rem;
    /* 必要に応じて調整 */
    color: transparent;
    background: none;
    position: absolute;
    right: 16px;
    top: -4px;
    text-align: right;
    width: 2em;
    height: 2em;
    padding: 0;
    margin: 0;
}

.fas.fa-arrow-right.right::before,
.fas.fa-arrow-up.up::before,
.fas.fa-arrow-down.down::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url('../img/ico_allow.svg') no-repeat center/contain;
    vertical-align: middle;
}

/* 色分け */
.fas.fa-arrow-right.right::before {
    filter: sepia(1) hue-rotate(0deg) saturate(8) brightness(2.1);
    transform: rotate(90deg);
}

.fas.fa-arrow-up.up::before {
    filter: sepia(1) hue-rotate(-30deg) saturate(8) brightness(1.3);
}

.fas.fa-arrow-down.down::before {
    filter: sepia(1) hue-rotate(180deg) saturate(6) brightness(1.3);
    transform: rotate(180deg);
}

.fas {
    display: block;
    position: absolute;
    right: 16px;
    top: 8px;
    font-size: 2rem;
    opacity: 0.6;
}


.no {
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    font-family: 'Roboto Mono', monospace;
    line-height: 1.5em;
    color: #ccc;
    position: absolute;
    padding-top: 6px;
    top: 0px;
    left: 0px;
}

#rank_list ul:nth-of-type(n+5) .rank {
    font-size: 1.5rem;
}

#rank_list ul:nth-of-type(n+5) .no {
    font-size: 1rem;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
}
#rank_list ul.more_list .no {
    font-size: 1rem;
    top: 5px !important;
    left: 50% !important;
    transform: translateX(-50%);
}

#rank_list ul:nth-of-type(n+5) .fas {
    font-size: 1.3em;
    top: 0px;
    right: 10px;
}

#rank_list ul:nth-of-type(n+8) .rank {
    top: 5px;
    font-size: 1.2rem;
}

#rank_list ul:nth-of-type(n+8) .no {
    top: 5px;
    left: 58%;
}

/* ポップアップ用 */
.rank-popup {
    position: absolute;
    z-index: 1000;
    background: #fff;
    border: 3px solid #ffdd4c;
    border-radius: 8px;
    padding: 14px 18px 14px 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 500px;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

.rank-popup .close {
    position: absolute;
    right: 8px;
    top: 4px;
    cursor: pointer;
    font-size: 18px;
    color: #888;
}

.rank-popup a {
    text-decoration: underline;
    font-size: 13px;
    color: #046db5;
}

.popup_message {
    padding-bottom: 10px;
    display: inline-block;
}

/* 見出し */
.rank_list_title {
    text-align: center;
    margin: 0 auto;
    font-size: 2.2rem;
    padding-bottom: 1px;
}

.bonus_pink {
    font-size: 2.6rem;
    color: #fcee21;
    font-family: 'Roboto Mono', monospace;
}

.small {
    font-size: 2.1rem;
    font-family: 'Noto Sans JP', sans-serif;
}



@media screen and (max-width:767px) {
    #rank_list ul:nth-of-type(-n+4) li {
        width: 100%;
    }

    #rank_list ul:nth-of-type(n+5) .rank {
        font-size: 1.1rem;
        margin-left: 4px;
        top: 7px;
    }

    #rank_list ul:nth-of-type(n+5) .rank span {
        font-size: 0.8rem;
    }

    #rank_list ul:nth-of-type(n+5) .no {
        font-size: 1rem;
        top: 3px;
        left: 55%;
        transform: translateX(-50%);
    }

    #rank_list ul:nth-of-type(n+5) .fas {
        font-size: 1.1em;
        top: 4px;
        right: 5px;
    }

    #rank_list ul:nth-of-type(n+8) .rank {
        top: 8px;
        font-size: 1rem;
    }

    #rank_list ul:nth-of-type(n+8) .rank span {
        font-size: 0.7rem;
    }

    #rank_list ul:nth-of-type(n+8) .no {
        top: 5px;
        left: 58%;
    }
.rank_list ul.more_list li{
    width: 30%;
}
    .rank_list ul.more_list li .no {
        left: 50% !important;
    }
    .bg_bird {
        background: url(../img/bg_coin.png) no-repeat;
        background-position: center 600px;
        background-size: 100% auto;
    }

    .lead+.rankcheck,
    #abm_ranking .rankcheck {
        margin-top: 64px;
    }

    .rankcheck {
        margin: 0;
    }

    /* 検索ボックス */
    .rankcheck_title {
        width: 90%;
        font-size: 1.8rem;
        top: 20px;
    }

    .contents_search_form {
        width: 90%;
        margin: 0 auto 24px;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        text-align: center;
    }

    .contents_search_form label {
        font-size: 1.6rem;
        line-height: 1.5;
        padding-right: 0;
        width: 100%;
        text-align: left;
    }

    .contents_search_form input {
        width: 100%;
        font-size: 3.0em;
        height: 80px;
        border-radius: 10px;
    }

    .contents_search_form .btn {
        width: 50%;
        padding: 16px 0 16px 0;
        font-size: 1.2rem;
    }

    /* 結果メッセージ */
    .cr_result {
        width: 100%;
        margin: 0 auto 8px;
        text-align: center;
        padding: 16px 0;
    }

    .cr_result p {
        font-size: 0.9rem;
        font-weight: bold;
        width: 90%;
        margin: 0 auto 0px;
    }

    .cr_result p small {
        font-size: 0.8rem;
    }

    /* 注意書き */
    .contents_search_list {
        width: 90%;
        margin: 0 auto 16px;
    }

    .contents_search_list li {
        font-size: 1.2rem;
    }

    /* 順位とか */
    .rank_list {
        width: 96%;
        max-width: 96%;
        margin: 0 auto;
    }

    .rank_list ul {
        list-style: none;
        padding: 0;
        margin: 0px auto 56px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .rank_list ul li {
        width: 48%;
        margin: 0 1% 4px;
        border-radius: 4px;
        position: relative;
    }

    .rank_list ul li p {
        margin-bottom: 0;
    }

    .rank {
        font-size: 2rem;
        font-family: 'Roboto Mono', monospace;
        font-weight: bold;
        margin-left: 10px;
    }

    .rank span {
        font-family: 'Noto Sans JP', sans-serif;
        font-size: 1rem;
    }


    .fas {
        display: block;
        position: absolute;
        right: 8px;
        top: 8px;
        color: #ccc;
        font-size: 2.0rem;
    }

    .fas.fa-arrow-right.right,
    .fas.fa-arrow-up.up,
    .fas.fa-arrow-down.down {
        font-size: 1.5rem;
        right: 10px;
        top: 2px;
    }

    .no {
        font-size: 1.4rem;
    }

    /* 見出し */
    .rank_list_title {
        width: 100%;
    }

    .rank-popup {
        min-width: 220px;
    }


    /* 見出し */


    .bonus_pink {
        font-size: 2.4rem;
        color: #fcee21;
    }

    .small {
        font-size: 2.0rem;
    }

}