@charset "UTF-8";

/* ---------------------------------------------
*   c-block
--------------------------------------------- */
.c-block-outer {
    padding: 2.4%;
    border: 7px solid #0188D6;
    box-sizing: border-box;
    background-color: rgba(186, 230, 255, 0.6);
}

.js-square-scope[data-condition="1"] .c-block-outer {
    border-color: #FF7F00;
    background-color: rgba(255, 218, 186, 0.6);
}

.js-square-scope[data-condition="2"] .c-block-outer {
    border-color: #3BCD00;
    background-color: rgba(218, 255, 186, 0.6);
}

.js-square-scope[data-condition="3"] .c-block-outer {
    border-color: #0188D6;
    background-color: rgba(186, 230, 255, 0.6);
}

.c-block-outer__frame {
    padding: 0.8571428571%;
    background: url("../img/game/bg_frame.png") 0 0 no-repeat;
    background-size: 100% auto;
}

.c-block {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.c-block__item {
    width: 100%;
    aspect-ratio: 1/1;
    cursor: pointer;
}

.c-block__item.antibiotic,
.c-block__item.virus,
.c-block__item.bacteria,
.c-block__item.amr {
    pointer-events: none;
}

.js-square-scope.is-paused .c-block__item {
    pointer-events: none;
}

.c-block__icon {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: center center no-repeat;
    background-size: 69.7674418605%;
    transition: opacity 0.3s;
}

.c-block__item.is-fade-in .c-block__icon {
    animation: sqfadeIn 0.3s forwards;
}

.c-block__item.is-fade-out .c-block__icon {
    animation: sqfadeOut 0.3s 0.3s forwards;
}

.c-block__item.antibiotic .c-block__icon {
    background-image: url("../img/game/icon_antibiotic.png");
}

.c-block__item.virus .c-block__icon {
    background-image: url("../img/game/icon_virus.gif");
}

.c-block__item.bacteria .c-block__icon {
    background-image: url("../img/game/icon_bacteria1.gif");
}

.c-block__item.amr .c-block__icon {
    background-image: url("../img/game/icon_amr1.gif");
}

.c-block__item.bacteria:nth-child(even):nth-child(-n+6) .c-block__icon,
.c-block__item.bacteria:nth-child(odd):nth-child(n+7):nth-child(-n+12) .c-block__icon,
.c-block__item.bacteria:nth-child(even):nth-child(n+13):nth-child(-n+18) .c-block__icon,
.c-block__item.bacteria:nth-child(odd):nth-child(n+19):nth-child(-n+24) .c-block__icon,
.c-block__item.bacteria:nth-child(even):nth-child(n+25):nth-child(-n+30) .c-block__icon,
.c-block__item.bacteria:nth-child(odd):nth-child(n+31):nth-child(-n+36) .c-block__icon {
    background-image: url("../img/game/icon_bacteria2.gif");
}

.c-block__item.amr:nth-child(even):nth-child(-n+6) .c-block__icon,
.c-block__item.amr:nth-child(odd):nth-child(n+7):nth-child(-n+12) .c-block__icon,
.c-block__item.amr:nth-child(even):nth-child(n+13):nth-child(-n+18) .c-block__icon,
.c-block__item.amr:nth-child(odd):nth-child(n+19):nth-child(-n+24) .c-block__icon,
.c-block__item.amr:nth-child(even):nth-child(n+25):nth-child(-n+30) .c-block__icon,
.c-block__item.amr:nth-child(odd):nth-child(n+31):nth-child(-n+36) .c-block__icon {
    background-image: url("../img/game/icon_amr2.gif");
}

@keyframes sqfadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes sqfadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* ---------------------------------------------
*   c-cassette
--------------------------------------------- */
.c-cassette {
    margin-top: 9.5081967213%;
}

.c-cassette__img {
    width: 85.737704918%;
    margin-inline: auto;
}

.c-cassette__img img {
    display: block;
    max-width: 100%;
}

/*  c-cassette-2
--------------------------------------------- */
.c-cassette-2 {
    display: flex;
    flex-wrap: wrap;
    margin-top: 7.2131147541%;
    padding-inline: 4.9180327869%;
}

.c-cassette-2__item {
    display: flex;
    align-items: center;
}

.c-cassette-2__item:nth-of-type(odd) {
    width: 46.1818181818%;
}

.c-cassette-2__item:nth-of-type(even) {
    width: 53.8181818182%;
}

.c-cassette-2__item:nth-of-type(n + 3) {
    margin-top: 5.8181818182%;
}

.c-cassette-2__icon {
    flex-shrink: 0;
}

.c-cassette-2__item:nth-of-type(odd) .c-cassette-2__icon {
    width: 23.6220472441%;
}

.c-cassette-2__item:nth-of-type(even) .c-cassette-2__icon {
    width: 33.7837837838%;
}

/*  c-cassette-3
--------------------------------------------- */
.c-cassette-3 {
    margin-top: 10.4918032787%;
}

.c-cassette-3__txt-outer {
    text-align: center;
}

.c-cassette-3__img {
    width: 83.7704918033%;
    margin: 2.9508196721% auto 0;
}

.c-cassette-3__img img {
    display: block;
    max-width: 100%;
}

/*  c-cassette-4
--------------------------------------------- */
.c-cassette-4 {
    margin-top: 7.868852459%;
    padding-inline: 15.5737704918%;
}

.c-cassette-4__dl {
    display: flex;
    align-items: center;
    gap: 0 3.8095238095%;
}

.c-cassette-4__dl:nth-of-type(n + 2) {
    margin-top: 6.1904761905%;
}

.c-cassette-4__dt {
    display: flex;
    gap: 0 9.1549295775%;
    width: 33.8095238095%;
}

.c-cassette-4__icon {
    flex-shrink: 0;
    width: 42.2535211268%;
    margin-top: 5.6338028169%;
}

/*  c-cassette-5
--------------------------------------------- */
.c-cassette-5 {
    margin-top: 9.5081967213%;
}

.c-cassette-5__img {
    width: 67.5409836066%;
    margin-inline: auto;
}

.c-cassette-5__img img {
    display: block;
    max-width: 100%;
}

/*  c-cassette-6
--------------------------------------------- */
.c-cassette-6 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding-block: 2.9508196721% 2.4590163934%;
    box-sizing: border-box;
}

.c-cassette-6__txt-outer {
    margin-left: 4.5901639344%;
    padding-inline: 3.2786885246%;
}

.c-cassette-6__btn-wrap {
    display: flex;
    justify-content: center;
    gap: 0 4.0983606557%;
    margin-top: 1.9672131148%;
}

.c-cassette-6__btn {
    position: relative;
    display: block;
    width: 27.5409836066%;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: none;
    touch-action: manipulation;
    cursor: pointer;
}

.c-cassette-6__btn:focus-visible {
    outline: none;
}

[id^=modal-quiz][data-correct=true] .c-cassette-6__btn,
[id^=modal-quiz][data-correct=false] .c-cassette-6__btn {
    pointer-events: none;
}

.c-cassette-6__btn img {
    transition: opacity 0.3s;
}

.c-cassette-6__btn img:first-of-type {
    opacity: 1;
}

.c-cassette-6__btn img:last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    .c-cassette-6__btn:hover img:first-of-type {
        opacity: 0;
    }

    .c-cassette-6__btn:hover img:last-of-type {
        opacity: 1;
    }
}

/*  c-cassette-7
--------------------------------------------- */
.c-cassette-7 {
    padding: 4.9180327869% 8.1967213115%;
}

.c-cassette-7__head {
    text-align: center;
}

.c-cassette-7__body {
    margin-top: 10.9126984127%;
}

/* ---------------------------------------------
*   c-list
--------------------------------------------- */
.c-list {
    display: flex;
    justify-content: space-between;
    gap: 0 4%;
    padding: 0;
}

.c-list__item {
    display: flex;
    align-items: flex-end;
}

.c-list__item:first-of-type {
    gap: 0 9.0909090909%;
    width: 14.6666666667%;
}

.c-list__item:nth-of-type(2),
.c-list__item:nth-of-type(3) {
    gap: 0 9.2592592593%;
    width: 14.4%;
}

.c-list__item:last-of-type {
    justify-content: flex-end;
    gap: 0 2.994011976%;
    width: 44.5333333333%;
}

.c-list__icon {
    flex-shrink: 0;
}

.c-list__item:first-of-type .c-list__icon {
    width: 41.8181818182%;
}

.c-list__item:nth-of-type(2) .c-list__icon,
.c-list__item:nth-of-type(3) .c-list__icon {
    width: 40.7407407407%;
}

.c-list__item:last-of-type .c-list__icon {
    position: relative;
    width: 34.9520958084%;
}

.c-list__item:last-of-type .c-list__icon img {
    position: relative;
    z-index: 1;
    transition: opacity 0.3s;
    opacity: 0;
}

.c-list__item:last-of-type .c-list__icon img.condition2,
.c-list__item:last-of-type .c-list__icon img.condition3 {
    position: absolute;
    top: 0;
    left: 0;
}

.js-square-scope[data-condition="1"] .c-list__item:last-of-type .c-list__icon img.condition1,
.js-square-scope[data-condition="2"] .c-list__item:last-of-type .c-list__icon img.condition2,
.js-square-scope[data-condition="3"] .c-list__item:last-of-type .c-list__icon img.condition3 {
    opacity: 1;
}

.c-list__icon img {
    display: block;
    max-width: 100%;
}

/* ---------------------------------------------
*   c-modal
--------------------------------------------- */
.c-modal {
    display: none;
}

.c-modal.is-open {
    display: block;
}

.c-modal__overlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c-modal[id=modal-clear] .c-modal__overlay {
    background-color: rgba(255, 213, 191, 0.5);
}

.c-modal[id=modal-failure] .c-modal__overlay {
    background-color: rgba(0, 93, 150, 0.5);
}

.c-modal__container {
    position: absolute;
    transform: translateY(-50%);
    top: 58.5%;
    width: 100%;
    max-width: 870px;
    margin-inline: auto;
    padding-inline: 10px;
    box-sizing: border-box;
}

.c-modal[id^=modal-quiz] .c-modal__container {
    top: 60.5%;
}

.c-modal__btn {
    position: relative;
    display: block;
    width: 36.7058823529%;
    margin: 1.1764705882% auto 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: none;
    touch-action: manipulation;
    cursor: pointer;
}

.c-modal__btn:focus-visible {
    outline: none;
}

.c-modal__btn img:first-of-type {
    opacity: 1;
    transition: opacity 0.3s;
}

.c-modal__btn img:last-of-type {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    width: 97.1153846154%;
    box-sizing: border-box;
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    .c-modal__btn:hover img:first-of-type {
        opacity: 0;
    }

    .c-modal__btn:hover img:last-of-type {
        transform: translate(2.8846153846%, 6.976744186%);
        opacity: 1;
    }
}

/* Modal Animation Style（アニメーション不要の場合は削除）
--------------------------------------------- */
.c-modal[aria-hidden=false] .c-modal__overlay {
    animation: mmfadeIn 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.c-modal[aria-hidden=false] .c-modal__container {
    animation: mmfadeIn 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.c-modal[aria-hidden=true] .c-modal__overlay {
    animation: mmfadeOut 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.c-modal[aria-hidden=true] .c-modal__container {
    animation: mmfadeOut 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.c-modal__overlay,
.c-modal__container {
    will-change: transform;
}

@keyframes mmfadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes mmslideIn {
    from {
        transform: translateY(15%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes mmslideOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(15%);
    }
}

/*  c-modal-section
--------------------------------------------- */
.c-modal-section {
    width: 75.6470588235%;
    aspect-ratio: 1/1;
    margin-inline: auto;
    box-sizing: border-box;
    background: url("../img/game/bg_box_red.png") 0 0 no-repeat;
    background-size: 100% auto;
    transform: translate(0);
}

.c-modal-section--quiz {
    position: relative;
    aspect-ratio: 643/368;
    background-image: url("../img/game/bg_box_yellow.png");
}

.c-modal-section--quiz::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: 86.6251944012%;
    aspect-ratio: 1/1;
    background: center center no-repeat;
    background-size: 100% auto;
    transition: opacity 0.3s;
    opacity: 0;
    pointer-events: none;
}

[id^=modal-quiz][data-correct=true] .c-modal-section--quiz::before {
    opacity: 1;
    pointer-events: auto;
    background-image: url("../img/game/icon_correct.png");
}

[id^=modal-quiz][data-correct=false] .c-modal-section--quiz::before {
    opacity: 1;
    pointer-events: auto;
    background-image: url("../img/game/icon_incorrect.png");
}

.c-modal-section--failure {
    background-image: url("../img/game/bg_box_blue.png");
}

.c-modal-section__container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 1.7107309487% 3.4214618974% 3.4214618974% 1.7107309487%;
    box-sizing: border-box;
}

.c-modal-section__head {
    width: calc(100% + 2px);
    margin-top: -1px;
    margin-left: -1px;
    padding-block: calc(2.6229508197% + 1px) 3.606557377%;
    background-color: #FF3A00;
}

.c-modal-section--quiz .c-modal-section__head {
    padding-block: 0 1.4754098361%;
    background-color: transparent;
}

.c-modal-section--clear .c-modal-section__head,
.c-modal-section--failure .c-modal-section__head {
    padding-block: 0 2.4590163934%;
    background-color: transparent;
}

.c-modal-section__ttl {
    width: 38.3606557377%;
    margin-inline: auto;
    box-sizing: border-box;
}

.c-modal-section--quiz .c-modal-section__ttl {
    width: 39.0163934426%;
}

.c-modal-section--clear .c-modal-section__ttl,
.c-modal-section--failure .c-modal-section__ttl {
    width: 80.3278688525%;
    margin-top: -14.7540983607%;
}

.c-modal-section__body {
    flex-grow: 1;
    overflow-y: auto;
}

/*  c-modal-slider
--------------------------------------------- */
.c-modal-slider {
    height: 100%;
}

.c-modal-slider__container {
    position: relative;
    height: 100%;
}

.c-modal-slider .splide__track {
    height: 100%;
}

.c-modal-slider .splide__slide {
    transform: translate3d(0, 0, 0);
    overflow-y: auto;
}

.c-modal-slider .splide__slide img {
    display: block;
    max-width: 100%;
}

.c-modal-slider .splide__arrow {
    position: fixed;
    top: 50%;
    translate: 0 -50%;
    z-index: 1;
    display: block;
    width: 13.5303265941%;
    aspect-ratio: 1/1;
    border: none;
    box-shadow: none;
    border-radius: 0;
    background: url("../img/game/icon_arrow.png") center center no-repeat;
    background-size: 100% auto;
    touch-action: manipulation;
    cursor: pointer;
    overflow: hidden;
}

.c-modal-slider .splide__arrow[disabled] {
    display: none;
}

.c-modal-slider .splide__arrow--prev {
    left: -6.6874027994%;
}

.c-modal-slider .splide__arrow--next {
    right: -5.132192846%;
    rotate: 180deg;
}

.c-modal-slider .splide__arrow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../img/game/icon_arrow_hover.png") center center no-repeat;
    background-size: 100% auto;
    opacity: 0;
    transition: opacity 0.3s;
}

@media (hover: hover) and (pointer: fine) {
    .c-modal-slider .splide__arrow:hover {
        background-size: 99% auto;
    }

    .c-modal-slider .splide__arrow:hover::before {
        opacity: 1;
    }
}

.c-modal-slider__slide {
    padding-block: 2.9508196721%;
}

.c-modal-slider__txt-wrap {
    padding-inline: 7.5409836066% 5.9016393443%;
}

.c-modal-slider__txt-wrap .c-txt {
    position: relative;
    padding-left: 4.8262548263%;
}

.c-modal-slider__txt-wrap .c-txt::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1.1583011583%;
    height: calc(100% - 20px);
    background-color: #FF3A00;
}

@media screen and (max-width: 735px) {
    .c-modal-slider__txt-wrap .c-txt::before {
        height: calc(100% - 2.1333333333vw);
    }
}

.c-modal-slider__txt-wrap .c-txt+.c-txt {
    margin-top: 1.9305019305%;
}

/* ---------------------------------------------
*   c-section
--------------------------------------------- */
.c-section {
    position: relative;
    /*background: url("../img/game/bg_game.png") center bottom repeat-x;
    background-size: 504px auto;*/
}

@media screen and (max-width: 735px) {
    .c-section {
        background-size: 59.0476190476vw auto;
    }
}

.c-section__container {
    max-width: 870px;
    margin-inline: auto;
    padding-inline: 10px;
    box-sizing: border-box;
}

.c-section__bg {
    padding-block: 40px 80px;
    background-color: rgba(255, 255, 255, 0.7);
}

@media screen and (max-width: 735px) {
    .c-section__bg {
        padding-block: 5.4421768707vw 10.8843537415vw;
    }
}

.c-section__head {
    margin-bottom: 25px;
}

@media screen and (max-width: 735px) {
    .c-section__head {
        margin-bottom: 3.4013605442vw;
    }
}

.c-section__ttl {
    position: relative;
    width: 69.4117647059%;
    margin-inline: auto;
    box-sizing: border-box;
}

.c-section__ttl::before,
.c-section__ttl::after {
    content: "";
    position: absolute;
    z-index: 1;
    aspect-ratio: 1/1;
    background: url("../img/game/icon_circle.png") center center no-repeat;
    background-size: 100% auto;
}

.c-section__ttl::before {
    top: 16.8888888889%;
    left: -5.7627118644%;
    width: 19.4915254237%;
}

.c-section__ttl::after {
    top: 2.2222222222%;
    right: -2.8813559322%;
    width: 25.0847457627%;
}

.c-section__ttl img {
    position: relative;
    z-index: 2;
}

.c-section__body {
    width: 88.2352941176%;
    margin-inline: auto;
    box-sizing: border-box;
}

.c-section__row {
    margin-top: 12px;
}

@media screen and (max-width: 735px) {
    .c-section__row {
        margin-top: 1.6326530612vw;
    }
}

.c-section__row:first-of-type {
    margin-top: 0;
}

/* ---------------------------------------------
*   c-txt
--------------------------------------------- */
.c-txt {
    font-family: "M PLUS 1p";
    font-weight: 500;
    font-size: 28px;
    line-height: 1.7142857143;
}

@media screen and (max-width: 735px) {
    .c-txt {
        font-size: 3.2vw;
        line-height: 1.6666666667;
    }
}

/*  c-txt-2
--------------------------------------------- */
.c-txt-2 {
    font-family: "M PLUS 1p";
    font-weight: 500;
    font-size: 32px;
    line-height: 1;
}

@media screen and (max-width: 735px) {
    .c-txt-2 {
        font-size: 3.4666666667vw;
    }
}

/*  c-txt-3
--------------------------------------------- */
.c-txt-3 {
    font-family: "DotGothic16";
    font-weight: 400;
    font-size: 27px;
    line-height: 1.4444444444;
}

@media screen and (max-width: 735px) {
    .c-txt-3 {
        font-size: 3vw;
    }
}

/*  c-txt-4
--------------------------------------------- */
.c-txt-4 {
    font-family: "DotGothic16";
    font-weight: 400;
    font-size: 46px;
    line-height: 1.4347826087;
}

@media screen and (max-width: 735px) {
    .c-txt-4 {
        font-size: 5.0666666667vw;
    }
}

/*  c-txt-5
--------------------------------------------- */
.c-txt-5 {
    font-family: "M PLUS 1p";
    font-weight: 800;
    font-size: 38px;
    line-height: 1.2631578947;
}

@media screen and (max-width: 735px) {
    .c-txt-5 {
        font-size: 4.2666666667vw;
    }
}

.c-txt-5--red {
    color: #FF3A00;
}

.c-txt-5--blue {
    color: #0188D6;
}

/*  c-txt-6
--------------------------------------------- */
.c-txt-6 {
    margin-bottom: 1.1764705882%;
    padding: 1.9607843137% 3.3333333333%;
    background-color: #FFE400;
    font-family: "M PLUS 1p";
    font-weight: 800;
    font-size: 30px;
    line-height: 1.2;
}

@media screen and (max-width: 735px) {
    .c-txt-6 {
        font-size: 3.3333333333vw;
    }
}

/*  c-txt-7
--------------------------------------------- */
.c-txt-7 {
    display: flex;
    align-items: center;
    margin-top: 11.7647058824%;
    padding-bottom: 1.1764705882%;
    border-bottom: 5px solid #FF3A00;
}

@media screen and (max-width: 750px) {
    .c-txt-7 {
        border-width: 0.6666666667vw;
    }
}

.c-txt-7__num {
    display: block;
}

.c-txt-7--1 .c-txt-7__num {
    width: 3.5294117647%;
    margin-right: 5.4901960784%;
}

.c-txt-7--2 .c-txt-7__num {
    width: 6.2745098039%;
    margin-right: 3.5294117647%;
}

.c-txt-7--3 .c-txt-7__num,
.c-txt-7--4 .c-txt-7__num {
    width: 7.2549019608%;
    margin-right: 3.137254902%;
}

.c-txt-7__txt {
    font-family: "M PLUS 1p";
    font-weight: 800;
    font-size: 30px;
    line-height: 1.2;
}

@media screen and (max-width: 735px) {
    .c-txt-7__txt {
        font-size: 3.3333333333vw;
    }
}