:root {
    /* Colors: */
    --unnamed-color-ffffff: #ffffff;
    --unnamed-color-000000: #000000;
    --unnamed-color-ff0000: #ff0000;

    /* Font/text values */
    --unnamed-font-family-hiragino-sans: Hiragino Sans;
    --unnamed-font-family-truelogog-bold: "vdl-logog";
    --unnamed-font-style-normal: normal;
    --unnamed-font-weight-normal: normal;
    --unnamed-font-size-16: 16px;
    --unnamed-font-size-20: 20px;
    --unnamed-font-size-25: 25px;
    --unnamed-font-size-30: 30px;
    --unnamed-character-spacing-0: 0px;
    --unnamed-line-spacing-27: 27px;
    --unnamed-line-spacing-30: 30px;
    --unnamed-decoration-underline: underline;
}

/* Character Styles */
.unnamed-character-style-1 {
    font-family: var(--unnamed-font-family-hiragino-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-20);
    line-height: var(--unnamed-line-spacing-30);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
    text-decoration: var(--unnamed-decoration-underline);
}
.unnamed-character-style-2 {
    font-family: var(--unnamed-font-family-hiragino-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-25);
    line-height: var(--unnamed-line-spacing-30);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
}
.unnamed-character-style-3 {
    font-family: var(--unnamed-font-family-hiragino-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-30);
    line-height: var(--unnamed-line-spacing-30);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
}
.unnamed-character-style-4 {
    font-family: var(--unnamed-font-family-truelogog-bold);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-27);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
}
.unnamed-character-style-5 {
    font-family: var(--unnamed-font-family-hiragino-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-20);
    line-height: var(--unnamed-line-spacing-30);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ff0000);
}
.unnamed-character-style-6 {
    font-family: var(--unnamed-font-family-hiragino-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-20);
    line-height: var(--unnamed-line-spacing-30);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
}
.unnamed-character-style-7 {
    font-family: var(--unnamed-font-family-hiragino-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-27);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
}
.unnamed-character-style-8 {
    font-family: var(--unnamed-font-family-hiragino-sans);
    font-style: var(--unnamed-font-style-normal);
    font-weight: var(--unnamed-font-weight-normal);
    font-size: var(--unnamed-font-size-16);
    line-height: var(--unnamed-line-spacing-27);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
}

body {
    /* UI Properties */
    padding: 0;
    background: #460077 0% 0% no-repeat padding-box;
    opacity: 1;
}

main {
    max-width: 450px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    opacity: 0;
    padding-bottom: 6rem;
    transition: opacity 2s linear;
}

.visible {
    opacity: 1;
    transition: opacity 2s linear;
}

/* * イントロダクション * */
section.introduction {
    position: relative;
    box-sizing: border-box;
    margin: 1rem;
}
.bg_box {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    opacity: 1;
    filter: blur(5px);
    z-index: -1;
}
.text_box {
    padding: 1.5rem;
    line-height: 1.75rem;
}
.talk_text {
    font-weight: bold !important;
}

/* * 指示 * */
section.direction {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 166px;
    /* UI Properties */
    background: transparent
        linear-gradient(90deg, #557ba2 0%, #00f4ff 51%, #557ba2 100%) 0% 0%
        no-repeat padding-box;
    opacity: 1;

    font: var(--unnamed-font-style-normal) normal
        var(--unnamed-font-weight-normal) var(--unnamed-font-size-20) /
        var(--unnamed-line-spacing-30) var(--unnamed-font-family-hiragino-sans);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-000000);
    text-shadow: 0px 0px 5px var(--unnamed-color-ffffff);
    text-align: center;
    font: normal normal normal 20px/30px Hiragino Sans;
    letter-spacing: 0px;
    color: #000000;
    text-shadow: 0px 0px 5px #ffffff;
    padding: 1rem;
    opacity: 1;
    font-weight: bold;
}

/* 解答欄 */
.answer {
    text-align: center !important;
}
.answer_input {
    width: 314px;
    height: 70px;
    /* UI Properties */
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: inset 0px 3px 6px #00000029;
    border: 1px solid #707070;
    border-radius: 5px;
    opacity: 1;
    margin: auto;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
}
.incorrect {
    font: var(--unnamed-font-style-normal) normal
        var(--unnamed-font-weight-normal) var(--unnamed-font-size-20) /
        var(--unnamed-line-spacing-30) var(--unnamed-font-family-hiragino-sans);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ff0000);
    text-align: center;
    font: normal normal normal 20px/30px Hiragino Sans;
    letter-spacing: 0px;
    color: #ff0000;
    opacity: 1;
    visibility: hidden;
}

/* 送信・決定ボタン */
section.send {
    text-align: center;
}
.send_button {
    width: 314px;
    height: 70px;

    background: transparent linear-gradient(180deg, #ffff00 0%, #ff7600 100%) 0%
        0% no-repeat padding-box;
    border-radius: 35px;
    opacity: 1;
    font: var(--unnamed-font-style-normal) normal
        var(--unnamed-font-weight-normal) var(--unnamed-font-size-30) /
        var(--unnamed-line-spacing-30) var(--unnamed-font-family-hiragino-sans);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
    text-align: center;
    border: none;
    font: normal normal normal 30px/30px Hiragino Sans;
    letter-spacing: 0px;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
}
.button_green {
    width: 314px;
    height: 70px;

    background: transparent linear-gradient(180deg, #00ff9d 0%, #007729 100%) 0%
        0% no-repeat padding-box;
    border-radius: 35px;
    opacity: 1;
    font-weight: normal;
    font: normal normal normal 25px/30px Hiragino Sans;
}

/* * hover, active, disabled * */
.send_button:hover {
    position: relative;
    top: 1px;
    opacity: 0.75;
}
.send_button:active {
    position: relative;
    top: 2px;
    opacity: 0.3;
}
.send_button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* ヒント */
.hint_link {
    height: 20px;

    text-decoration: var(--unnamed-decoration-underline);
    font: var(--unnamed-font-style-normal) normal
        var(--unnamed-font-weight-normal) var(--unnamed-font-size-20) /
        var(--unnamed-line-spacing-30) var(--unnamed-font-family-hiragino-sans);
    letter-spacing: var(--unnamed-character-spacing-0);
    color: var(--unnamed-color-ffffff);
    text-align: center;
    text-decoration: underline;
    font: normal normal normal 20px/30px Hiragino Sans;
    letter-spacing: 0px;
    color: #ffffff;
    opacity: 1;
}

/* * グリッド背景 * */
.bg_grid_section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 3rem 0;

    background-image: url("/images/bg_grid.png");
    background-size: contain;
    background-position: center;
}

/* * STEP2 * */
.step2_grid_section {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}
.step2_grid_section > div {
    background-color: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: background-color 0.5s ease-out;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.step2_grid_section > div.selected,
.step3_list_buttons > div.selected {
    background-color: #ff9595;
}
.step2_grid_section > div > img {
    width: 100%;
}

#step2_q2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    height: 0px;
    visibility: hidden;
    transition: height 2s ease-out;
    max-height: 450px;
    overflow: hidden;
}

#step2_check,
#step3_check {
    width: 314px;
    height: 70px;
    text-align: center;
    background: var(--unnamed-color-ff0000) 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 5px;
    background-color: #fff;
    opacity: 1;
    transition: background-color 0.3s ease-out;
}
#step2_check > img,
#step3_check > img {
    max-width: 100%;
    max-height: 100%;
    display: none;
}
#step2_check.zz,
#step3_check.zz {
    background-color: #ff0000;
}
#step2_check.zzx,
#step3_check.zzx {
    background-color: #00b1ff;
}

#step2_q2_grid_section {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - 6px);
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
#step2_q2_grid_section > div {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    cursor: pointer;
    transition: background-color 0.5s ease-out;
}

#step2_q2_grid_section > div.selected {
    background-color: #fffc;
}

/* * STEP3 * */
.step3_select_group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.step3_select_group > select {
    width: 314px;
    height: 55px;
    background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
    background: #ffffff 0% 0% no-repeat padding-box;
    border-radius: 28px;
    opacity: 1;

    font-size: 1.5rem;
    padding: 0 1rem;
    font-weight: bold;
}

/* * STEP3 問題画面 * */
.step3_header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;
    width: 100%;
    max-width: 450px;
}
.step3_mystery_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1rem;
}
.step3_mystery_list > img {
    width: 100%;
}
.step3_mystery_list > img:hover {
    position: relative;
    top: 1px;
    opacity: 0.75;
}
.step3_mystery_list > img:active {
    position: relative;
    top: 2px;
    opacity: 0.3;
}
.bg_grid_main {
    background-image: url("/images/bg_grid.png");
    background-size: contain;
    background-position: center;
}

/* * Modal * */
#modal {
    display: none;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;

    transition: opacity 0.5s ease-out;
}
.modal_inner {
    box-sizing: border-box;
    padding: 4rem 0;
    height: 100%;
    max-width: 450px;
    margin: auto;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 1rem;
    flex-direction: column;
    background-image: url("/images/bg_grid.png");
    background-size: contain;
    background-position: center;
    overflow: scroll;
}
.step3_list_buttons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 1rem;
}
.step3_list_buttons > div {
    border: 1px solid #ccc;
    background-color: white;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.step3_list_buttons img {
    width: 100%;
}
.close_button:hover {
    position: relative;
    opacity: 0.75;
    top: 1px;
}
.close_button:active {
    position: relative;
    opacity: 0.3;
    top: 2px;
}
#step3_check {
    flex-shrink: 0;
}

/* * STEP4 * */
#record_submitbtn_4 {
    width: 120px;
    height: 50px;
    background: transparent
        linear-gradient(180deg, #ff6c00 0%, var(--unnamed-color-ff0000) 100%) 0%
        0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #ff6c00 0%, #ff0000 100%) 0%
        0% no-repeat padding-box;
    border-radius: 9px;
    opacity: 1;
}
#record_submitbtn_4:hover {
    position: relative;
    top: 1px;
    opacity: 0.75;
}
#record_submitbtn_4:active {
    top: 2px;
    opacity: 0.3;
}
#record_submitbtn_4:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* * CLEAR * */
.clear_bg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 343px;
    background: transparent
        linear-gradient(180deg, #00ffff 0%, var(--unnamed-color-000000) 100%) 0%
        0% no-repeat padding-box;
    background: transparent linear-gradient(180deg, #00ffff 0%, #000000 100%) 0%
        0% no-repeat padding-box;
    mix-blend-mode: screen;
    opacity: 1;
}
.star_group {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
img.star {
    width: 1.25rem !important;
    height: 1.25rem !important;
}
section.clear_text {
    padding-top: 4rem;
    text-align: center;
}
section.credit {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}
.talk_text_02 {
    font-family: "vdl-logog", sans-serif;
    font-weight: bold;
    font-style: normal;
}

/* * 次へモーダル * */
#next_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: #000000af;

    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    opacity: 0;

    transition: opacity 0.5s ease-out;
}
#next_modal > div {
    box-sizing: border-box;
    margin: 1rem;
    width: 100%;
    max-width: 450px;
    min-height: 200px;
    border-radius: 12px;
    background-color: white;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* * ヒント * */
.btn {
    font-weight: bold;
    padding: 0.25rem 1rem;
    background-color: #460077;
    color: white;
    cursor: pointer;
}
.btn.active {
    background-color: #ca7eff;
}
.title {
    font-weight: bold;
    padding: 1rem;
    background-color: #460077;
    color: white;
    margin-top: 2rem;
    cursor: pointer;
}
.btn:hover {
    opacity: 0.9;
}
.btn:active {
    opacity: 0.3;
}
.hid {
    background-color: #eee7;
}
.prev_next_link {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
}
.introduction img {
    width: calc(100% - 1rem);
    box-sizing: border-box;
    margin: 0.5rem;
}
.hint_title {
    font-weight: bold;
    text-align: center;
    font-size: 1.25rem;
}