@charset "utf-8";
/* ===============================
   メインビジュアル
   =============================== */
/* デフォルトは非表示にしておく */
.wtev-pc-area, .wtev-tablet-area, .wtev-smt-area {
    display: none;
}
/* PC用（幅1920px以上で表示） */
@media (min-width: 1025px) {
    .wtev-pc-area {
        display: block;
    }
}
/* タブレット用（1024px以上481px未満で表示） */
@media (max-width: 1024px) and (min-width: 481px) {
    .wtev-tablet-area {
        display: block;
    }
}
/* スマホ用（～480px以下で表示） */
@media (max-width: 480px) {
    .wtev-smt-area {
        display: block;
    }
}
.bc-bingo {
    background: linear-gradient(100deg, #d6000f 50%, #57b9e9 50%);
}
/* ===============================
   デフォルト設定
   =============================== */
/* === Type Scale & Base (injected 2025-09-22) === */ :root {
    --step-0: clamp(1.00rem, 0.60vw + 0.80rem, 1.125rem);
    --step-1: clamp(1.125rem, 0.80vw + 0.90rem, 1.375rem);
    --step-2: clamp(1.375rem, 1.20vw + 1.00rem, 1.75rem);
    --step-3: clamp(1.75rem, 1.80vw + 1.05rem, 2.25rem);
}
body {
    font-size: var(--step-0);
    line-height: 160%;
}
.m-c-width {
    max-width: 1280px;
    margin: 0 auto;
}
@media (max-width: 1280px) {
    .m-c-width {
        max-width: 95%;
        margin: 0 auto;
    }
}
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.c-area-stm {
    text-align: center;
    font-size: var(--step-2);
}
.br-smt {
    display: none;
}
@media screen and (max-width: 1080px) {
    .br-smt {
        display: inline-block;
    }
}
.narabe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* デフォルトは左寄せ */
    gap: 1.5rem; /* アイテム間の間隔 */
    padding: 0;
    list-style: none;
    margin: 3rem 0;
}
@media screen and (max-width: 1080px) {
    .narabe {
        gap: 2rem; /* アイテム間の間隔 */
        margin: 1rem 0;
    }
}
/* 子要素のスタイル */
.narabe li {
    width: calc(33.333% - 1rem);
    box-sizing: border-box;
    text-align: center;
}
@media screen and (max-width: 495px) {
    .narabe li figure {
        width: 80%;
        margin: 1rem auto;
    }
}
.narabe li p {
    font-size: var(--step-0);
}
/* 画像サイズ調整など */
.narabe figure {
    margin: 0 0 1rem 0;
}
.narabe img {
    max-width: 100%;
    height: auto;
}
/* レスポンシブ対応：画面が狭くなったときの2列、1列 */
@media (max-width: 900px) {
    .narabe li {
        width: calc(50% - 1rem);
    }
}
@media (max-width: 600px) {
    .narabe li {
        width: 100%;
    }
}
.point-area {
    display: block;
    max-width: 830px;
    margin: 1rem auto;
    background-color: white;
    padding: 3rem 5rem;
    position: relative;
    border-radius: 10px;
}
.point-area::before {
    content: "";
    display: block;
    width: 145px;
    height: 160px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../../uploads/img-bingo/point-img-left-top.png);
    background-position: center;
    position: absolute;
    top: -10px;
    left: -20px;
}
.point-area::after {
    content: "";
    display: block;
    width: 190px;
    height: 135px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../../uploads/img-bingo/point-img-right-bottom.png);
    background-position: center;
    position: absolute;
    bottom: -10px;
    right: -20px;
}
@media (max-width: 830px) {
    .point-area {
        max-width: 80%;
        padding: 1.5rem 2rem;
        margin: 3rem auto 1rem;
    }
    .point-area::before {
        width: 75px;
        height: 100px;
        top: -20px;
        left: -30px;
    }
    .point-area::after {
        width: 135px;
        height: 70px;
        bottom: -10px;
        right: -45px;
    }
}
/* ===============================
   エリア1設定
   =============================== */
.bingo-area01-haikei {
    background-image: url("../../../uploads/img-bingo/contents-haikei-1.gif");
    padding: 5rem 0 10rem;
}
@media (max-width: 1280px) {
    .bingo-area01-haikei {
        padding: 2.5rem 0 5rem;
    }
}
.bingo-area01-c1 {
    margin-bottom: 2rem;
}
.bingo-area01-c2 {
    display: flex;
    flex-wrap: wrap; /* スマホなどで折り返し */
    justify-content: space-between;
    background: linear-gradient(90deg, #d6000f 50%, #57b9e9 50%);
    border-radius: 20px;
}
@media (max-width: 1280px) {
    .bingo-area01-c2 {
        max-width: 85%;
    }
}
@media (max-width: 400px) {
    .bingo-area01-c2 {
        max-width: 95%;
    }
}
/* 左右の列（2カラム） */
.bingo-area01-c2-left, .bingo-area01-c2-right {
    width: 50%;
    box-sizing: border-box;
    padding: 4rem 4rem 0 4rem;
}
@media screen and (max-width: 820px) {
    .bingo-area01-c2-left, .bingo-area01-c2-right {
        padding: 1.25rem 1.25rem 0 1.25rem;
    }
}
.bingo-area01-c2-left figure, .bingo-area01-c2-right figure {
    margin-bottom: 2rem;
}
@media (max-width: 800px) {
    .bingo-area01-c2-left figure, .bingo-area01-c2-right figure {
    margin-bottom: 1.25rem;
}
}
.bingo-area01-c2-left > a, .bingo-area01-c2-right > a {
    background-image:
        url("../../../uploads/img-bingo/bingo-area01-c2-left-bt.png"), /* 画像を上に */ linear-gradient(to bottom, #f8dada 0%, #c30000 20%, #d00000 50%, #ff0033 70%, #d1ebfa 100%);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    max-width: 450px;
    height: 90px;
    border-radius: 45px;
    margin: 0 auto 1.25rem;
    text-indent: 250%;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    transition: all 0.3s ease;
}
@media (max-width: 800px) {
    .bingo-area01-c2-left > a, .bingo-area01-c2-right > a {
        display: block;
        max-width: 450px;
        height: 70px;
        border-radius: 45px;
        margin: 0 auto 1.25rem;
        text-indent: 250%;
        white-space: nowrap;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
        transition: all 0.3s ease;
    }
}
@media (max-width: 600px) {
    .bingo-area01-c2-left > a, .bingo-area01-c2-right > a {
        background-image:
            url("none"), linear-gradient(to bottom, #f8dada 0%, #c30000 20%, #d00000 50%, #ff0033 70%, #d1ebfa 100%);
        display: block;
        max-width: 450px;
        height: 50px;
        border-radius: 45px;
        margin: 0 auto 1.25rem;
        text-indent: 0;
        white-space: wrap;
        overflow: visible;
        text-align: center;
        font-weight: bold;
        padding: 0.25rem 0.5rem;
        line-height: 110%;
        color: white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
        transition: all 0.3s ease;
    }
    .bingo-area01-c2-left > a span, .bingo-area01-c2-right > a span {
        display: block;
        font-size: 60%;
    }
}
@media (max-width: 445px) {
    .bingo-area01-c2-left > a, .bingo-area01-c2-right > a {
        font-size: 70%;
        height: 40px;
    }
    .bingo-area01-c2-left > a span, .bingo-area01-c2-right > a span {
        font-size: 120%;
    }
}
.bingo-area01-c2-right > a {
    background-image:
        url("../../../uploads/img-bingo/bingo-area01-c2-right-bt.png"), /* 画像を上に */ linear-gradient(to bottom, #f8dada 0%, #0088bf 20%, #26a2d0 50%, #59bded 70%, #d1ebfa 100%);
}
@media (max-width: 600px) {
    .bingo-area01-c2-right > a {
        background-image:
            url("none"), linear-gradient(to bottom, #f8dada 0%, #0088bf 20%, #26a2d0 50%, #59bded 70%, #d1ebfa 100%);
    }
    .bingo-area01-c2-left > a span, .bingo-area01-c2-right > a span {
        display: block;
        font-size: 60%;
    }
}
.bingo-area01-c2-left > p.kaijyo, .bingo-area01-c2-right > p.kaijyo {
    font-weight: 900;
    text-align: center;
    color: white;
    font-size: var(--step-0);
}
@media screen and (max-width: 470px) {
    .bingo-area01-c2-left > p.kaijyo, .bingo-area01-c2-right > p.kaijyo {
        font-size: 70%;
    }
}
/* ホバー時のエフェクト */
.bingo-area01-c2-left > a:hover, .bingo-area01-c2-right > a:hover {
    transform: translateY(4px); /* 少し上に浮かせる */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.35); /* シャドウを強調 */
}
/* ===============================
   エリア2設定
   =============================== */
.bingo-area02-haikei {
    background-color: #fffbc7;
    padding: 0;
    position: relative;
}
.bingo-area02-haikei::before {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    top: -80px;
    width: 100%;
    height: 80px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'>\
<path fill='%23fffbc7' d='\
M0,30 \
C90,0 90,60 180,30 \
C270,0 270,60 360,30 \
C450,0 450,60 540,30 \
C630,0 630,60 720,30 \
C810,0 810,60 900,30 \
C990,0 990,60 1080,30 \
C1170,0 1170,60 1260,30 \
C1350,0 1350,60 1440,30 \
L1440,80 L0,80 Z'/>\
</svg>");
    z-index: 1;
}
.bingo-area02-haikei::after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    bottom: -80px;
    width: 100%;
    height: 80px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'>\
<path fill='%23fffbc7' d='\
M0,30 \
C90,0 90,60 180,30 \
C270,0 270,60 360,30 \
C450,0 450,60 540,30 \
C630,0 630,60 720,30 \
C810,0 810,60 900,30 \
C990,0 990,60 1080,30 \
C1170,0 1170,60 1260,30 \
C1350,0 1350,60 1440,30 \
L1440,80 L0,80 Z'/>\
</svg>");
    transform: rotate(180deg);
    z-index: 1;
}
.bingo-area02-t1, .bingo-area02-t2 {
    margin: 0
}
.bingo-area02-t1::before, .bingo-area02-t2::before {
    display: block;
    content: "";
    width: 100%;
    height: 230px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../../uploads/img-bingo/c-a2-1title.png);
    background-position: center;
    z-index: 1;
}
.bingo-area02-t2::before {
    height: 225px;
    background-image: url(../../../uploads/img-bingo/c-a2-2title.png);
}
@media (max-width: 1000px) {
    .bingo-area02-t1::before, .bingo-area02-t2::before {
        height: 170px;
    }
}
@media (max-width: 490px) {
    .bingo-area02-t1::before, .bingo-area02-t2::before {
        height: 100px;
    }
}
/* ===============================
   エリア3設定
   =============================== */
.bingo-area03-haikei {
    background-image: url("../../../uploads/img-bingo/contents-haikei-1.gif");
    padding: 6rem 0 5rem;
}
.bingo-area03-t1::before {
    display: block;
    content: "";
    width: 100%;
    height: 245px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../../uploads/img-bingo/c-a3-title.png);
    background-position: center;
    z-index: 1;
}
@media (max-width: 1000px) {
    .bingo-area03-t1::before {
        height: 170px;
    }
}
@media (max-width: 490px) {
    .bingo-area03-t1::before {
        height: 100px;
    }
}
/* ===============================
   エリア4設定
   =============================== */
.bingo-area04-haikei {
    padding: 6rem 0 0;
    background-color: #51baeb;
}
@media (max-width: 1280px) {
    .bingo-area04-haikei {
        padding: 2rem 0 0;
    }
}
.bingo-area04-c1-haikei .m-c-width {
    padding: 0rem 0 3rem;
    max-width: 750px;
    margin: 0 auto;
}
.bingo-area04-t1::before {
    display: block;
    content: "";
    width: 100%;
    height: 230px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../../uploads/img-bingo/c-a4-title.png);
    background-position: center;
    z-index: 1;
}
@media (max-width: 1000px) {
    .bingo-area04-t1::before {
        height: 170px;
    }
}
@media (max-width: 490px) {
    .bingo-area04-t1::before {
        height: 100px;
    }
}
.bingo-area04-haikei .m-c-width {
    text-align: center;
    position: relative;
    max-width: 750px;
    margin: 0 auto;
    padding-top: 1.5rem;
}
@media (max-width: 1280px) {
    .bingo-area04-haikei .m-c-width {
        max-width: 95%;
        margin: 0 auto;
    }
}
.bingo-area04-c1-haikei .m-c-width h3, .bingo-area04-c2-haikei .m-c-width h3 {
    color: white;
    font-size: 160%;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
}
.bingo-area04-c2-haikei {
    background-color: #e70012;
    padding: 3rem 0 6rem;
}
@media (max-width: 1280px) {
    .bingo-area04-c2-haikei {
        padding: 1rem 0 2rem;
    }
}
/* ===============================
   エリア5設定
   =============================== */
.bingo-area05-haikei {
    background-image: url("../../../uploads/img-bingo/contents-haikei-1.gif");
    padding: 6rem 0 5rem;
}
@media (max-width: 1280px) {
    .bingo-area05-haikei {
        padding: 3rem 0;
    }
}
@media (max-width: 490px) {
    .bingo-area05-haikei {
        padding: 2rem 0;
    }
}
.bingo-area05-t1::before {
    display: block;
    content: "";
    width: 100%;
    height: 188px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../../../uploads/img-bingo/c-a5-1title.png);
    background-position: center;
    z-index: 1;
}
@media (max-width: 1000px) {
    .bingo-area05-t1::before {
        height: 170px;
    }
}
@media (max-width: 490px) {
    .bingo-area05-t1::before {
        height: 100px;
    }
}
.qa-list {
    border: 1px solid #ccc;
}
.qa-item {
    max-width: 1200px;
    margin: 0 auto 2rem;
    overflow: hidden;
    border-radius: 8px; /* 角丸追加 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* ドロップシャドウ追加 */
    background-color: #fff; /* 背景色指定でシャドウを見やすく */
}
@media (max-width: 1200px) {
    .qa-item {
        width: 85%;
        margin: 0 auto 2rem;
    }
}
@media (max-width: 860px) {
    .qa-item {
        width: 85%;
        margin: 0 auto 1rem;
        font-size: 80%;
    }
}
.qa-item input {
    display: none;
}
.qa-item label {
    display: block;
    background-color: #fff;
    color: #000;
    padding: 1em;
    cursor: pointer;
    font-weight: bold;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.qa-item .answer {
    background-color: #00adef;
    color: #000;
    padding: 0 1em;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
/* 開いているときの状態 */
.qa-item input:checked + label + .answer {
    max-height: 300px; /* 十分大きく設定 */
    opacity: 1;
    padding: 1em;
}