/**
 * Mission 4 向けCSS
 * @author toguchi@media-labo.co.jp
 */
 /* メインコンテンツの非表示（スプラッシュ終了後に表示） */
 #main-content {
    text-align: center;
    font-size: 2rem;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    /* overflow: hidden; */
}


.site_logo {
    height: 24px;
}  


header {
    /* height: 56px; */
    background: #fff;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
        .header_row_top {
            width: 100%;
            padding: 8px 11px;
            display: flex;
            justify-content: flex-end !important;
            background: #005F2F;
            font-size: 12px;
            box-sizing: border-box;            
            a{
                color: #fff;
            }
        }
        .header_row_bottom {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 11px 12px 15px;
            font-size: 10px;
            width: 100%;
            box-sizing: border-box;
            a {
                color: #fff;
            }
        }
}

.map_header_image {
    position: fixed;
    z-index: 100;
    width: 50%;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgb(255, 255, 255, 0.6);
    padding: 8px 16px;
    border-radius: 16px;
    border: 4px solid #000;
    max-width: 560px;
}

/* スマホの縦向き（768px以下 & 縦向き） */
@media (max-width: 768px) and (max-aspect-ratio: 1/1) {
    /* .site_logo {
        height: 35% !important;
    } */

    img#m3_header_image {
        width: 80% !important;
        top: 80px !important;
    }

    .overlay_content {
        margin: 0px 16px 16px 16px;
        iframe {
            border-radius: 8px;
            border: 4px solid #000;
            max-width: fit-content;
        }
    }
}

/* スポットライトの追加 */
section#m3 {
    /* width: 100vw; */
    box-sizing: border-box;
    position: relative;
    .map_world {
        width: 100%;
        /* height: 100%; */
        position: relative;
        /* overflow: hidden; */
        background-color: #FFEF25;
        img#map {        
            width: 100%;
            height: auto;
        }
    }
    
    /* @keyframes float {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-30px);
        }
    } */
    /* padding: 16px; */
    .frame_header {
        width: calc(100% - 48px);
        max-width: 600px;
        margin-top: 16px;
        margin-bottom: 16px;
    }
    .frame_body {
        position: relative;
        border: 4px solid #019e40ff;
        border-radius: 16px;
        width: calc(100% - 32px);
        max-width: 900px;
        margin: auto;
        background: #fff;
    }
    #q0 {
        display: block;
    }
    .frame_item {
        display: none;
        .right {
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            justify-content: space-between; /* 縦に等分配置 */
            .checkmark {
                width: 30px;  /* 幅を大きくする */
                height: 30px; /* 高さを大きくする */
                display: inline-block;
                border: 6px solid #333;  /* 枠線をさらに太くする */
                border-radius: 5px;
                position: relative;
                background-color: white;
                font-family: 'Architects Daughter', cursive; /* 手書き風フォント */
                font-size: 32px; /* チェックマークのサイズを調整 */
                text-align: center;
                line-height: 36px; /* 中央に配置 */
                transition: all 0.2s;
            }
            .checkmark:hover {
                transform: scale(1.1);
            }
            
            .custom-checkbox {
                cursor: pointer;
                margin-right: 16px;
                input[type="checkbox"] {
                    display: none;
                }
            }
            .custom-checkbox input:checked + .checkmark::after {
                content: "✓";
                color: #333;
                position: absolute;
                left: -2px; /* 位置を調整 */
                top: 0px;
                font-size: 36px; /* チェックマークのサイズを合わせる */
            }
            
            img {
                width: 50%;
            }
        }

        .frame_item_header {
            width: 40%;
            margin-top: 16px;
            min-width: 280px;
            z-index: 200;
            display: inline-block;
        }
        .frame_item_header.question {
            width: 10% !important;
        }
        .frame_item_header.answer {
            width: 15% !important;
            min-width: 480px;
        }
        .frame_item_subtitle {
            font-size: 40px;
            font-weight: bold;
            margin-top: 8px;
        }
        .frame_item_start, .frame_item_select {
            background: #00A95F;
            font-size: 40px;
            font-weight: bold;
            border-radius: 32px;
            padding: 0px 32px;
            cursor: pointer;
            -webkit-text-stroke: 3px #000;
            color: #fff;
            box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); /* 影を追加 */
            margin-top: 24px;
            margin-bottom: 32px;
        }
        .frame_item_select:hover {
            transform: scale(1.1);
        }
        .frame_item_start:hover {
            transform: scale(1.1);
        }
        .red {
            color: red;
        }
        span {
            vertical-align: bottom;
        }
        .frame_item_title-ok {
            font-size: 80px;
            font-weight: bold;
            padding-top: 40px;
            color: red; /* 文字色 */
            text-shadow:
                -2px -2px 0 #fff, 
                2px -2px 0 #fff, 
                -2px 2px 0 #fff, 
                2px 2px 0 #fff; /* 文字の周りに黒枠 */
        }
        .frame_item_title-ng {
            font-size: 80px;
            font-weight: bold;
            padding-top: 40px;
            color: #4d4398; /* 文字色 */
            text-shadow:
                -2px -2px 0 #fff, 
                2px -2px 0 #fff, 
                -2px 2px 0 #fff, 
                2px 2px 0 #fff; /* 文字の周りに黒枠 */
        }
    }
    .frame_item-ok {
        background: #F7C5DB;
    }
    .frame_item-ng {
        background: #CAE9FA;
    }
    .frame_item-result {
        img {
            width: 43%;
            margin: 0 auto 0px;
        }

        .frame_item_start {
            background: yellow;
            font-size: 30px;
            font-weight: bold;
            border-radius: 32px;
            padding: 0px 32px;
            cursor: pointer;
            -webkit-text-stroke: 1px #000;
            color: #fff;
            box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8); /* 影を追加 */
            margin-top: 24px;
            margin-bottom: 32px;
        }
    }

    .virus {
        position: absolute;
        display: block;
        width: 100px; /* 画像サイズ */
        height: 100px;
        z-index: 100;
    }
}
#movie_backdrop {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100vh;
    z-index: 199;
    display: none;
}
.layer {
    display: block;
    animation: overlay 1.8s ease-in-out infinite alternate-reverse;
}
@keyframes overlay {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

.overlay_popup {
    position: fixed;
    top: 50%;
    left: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    border-radius: 8px;
    border: 6px solid #000;
    display: none;
    max-width: 85%;
    width: 100%;
    z-index: 200;
    .overlay_header {
        margin: 0px 8px;
        text-align: right;
        .overlay_close {
            width: 50px;
            cursor: pointer;
        }
        .overlay_close:hover {
            transform: scale(1.1);
        }
    }
    .overlay_content {
        margin: 0px 8px 8px 8px;
        iframe {
            border-radius: 8px;
            border: 4px solid #000;
        }
    }
}
footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #005f2f;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .copyright {
        color: #fff;
        font-size: 12px;
    }
    .footer-links {
        display: flex;
        display: -webkit-flex;
        gap: 16px;
        justify-content: center;
        width: 90%;
        span {
            flex: 1;
            font-size: 12px;
            a { color: #fff; }
        }
    }
}
 /* 画面幅が768px以下（スマホサイズ）のとき */
@media (max-width: 768px) {
    footer {
        .copyright {
            font-size: 10px !important;
        }
        .footer-links {
            span {
                font-size: 9px !important;
            }
        }
    }
}
 section {
    /* width: 100vw; */
    /* height: calc(100vh - 80px); */

    

 }
 footer {
    p {
        color: #fff;
        display:block;
        bottom: 0px;
        position: absolute;
    }
 }

/* ナビゲーションスタイル */
.drag-navigation {
    z-index: 100;
    position: fixed;
    bottom: 100px;
    right: 40px;
    background: #fff;
    color: #000;
    padding: 20px 40px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
    font-family: 'Arial Rounded MT Bold', 'Hiragino Maru Gothic Pro', 'Yu Gothic Rounded', sans-serif;
    pointer-events: none; /* クリックを邪魔しない */
    border: 4px solid #000;
    img {
        width: 32px;
        vertical-align: middle;
        margin-top: -6px;
        margin-left: 8px;
    }
}

/* 点滅アニメーション */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/* 5秒後に点滅開始 */
.blinking {
    animation: blink 2s infinite;
}
/* フェードアウト用 */
.hidden {
    opacity: 0 !important;
    display: none !important;
}

.m3_ttl_wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 15px 0;
    width: 100%;
}
.m3_ttl_wrap .m3_ttl_img {
    max-width: 278px;
    text-align: left;
}
.m3_ttl_wrap .m3_subttl_img {
    max-width: 354px;
    text-align: left;
}
.m3_ttl_img img {
    width: 100%;
    height: auto;
}
.m3_subttl_img img {
    width: 100%;
    height: auto;
}
.overlay_content img {
    width: 100%;
}
@media (min-width: 768px) {
    header .header_row_top {
        font-size: 18px;
    }
    .site_logo {
        height: 40px;
    }  
    .m3_ttl_wrap {
        flex-direction: row;
        gap: 0 50px;
        width: 90%;
    }
    .m3_ttl_wrap .m3_ttl_img {
        width: 30%;
        max-width: unset;
    }
    .m3_ttl_wrap .m3_subttl_img {
        width: 40%;
        max-width: unset;
    }
    section#m3 .map_world {
        width: 100%;
        height: 100%;
    }
    section#m3 .map_world img#map {
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: bottom;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .overlay_content {
        margin: 0px 16px 16px 16px;
    }
    .copyright br {
        display: none;
    }
    .overlay_popup {
        max-width: 586px;
        width: 100%;
    }
}
@media (min-width: 1025px) {
    .m3_ttl_wrap {
        gap: 0 105px;
        width: 100%;
    }
}
#story {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    z-index: 1000;
    text-align: right;
    img.overlay_story {
        min-width: 320px !important;
        width: 100%;
        max-width: 640px !important;
        height: auto;
    }
}
#story_backdrop {
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100vh;
    z-index: 999;
    display: none;
}

.overlay_close {
    width: 50px;
    height: 59px;
    cursor: pointer;
}
/* 動画リンク */
#overlay { 
    top: 49%;
    left: 16%;
}
/* #overlay2 { transform: translate(520px, 280px); } */
#overlay3 { 
    top: 45%;
    left: 44%;
}
/* #overlay4 { transform: translate(420px, 280px); } */
#overlay5 { 
    top: 54%;
    left: 73%;
}
#overlay6 {
    top: 25%;
    left: 56%;
}
#overlay7 { 
    top: 38%;
    left: 66%;
}
#overlay8 { 
    top: 81%;
    left: 8%;
}
#overlay9 { 
    top: 84%;
    left: 75%;
}

.layer {
    position: absolute;
    /* pointer-events: none; */
    cursor: pointer;
    left: 50%;
    top: 50%;
    width: 13.4%;
    /* animation: float 1s infinite ease alternate; */
}
#overlay.layer {
    width: 37.4%;
}
.layer:hover {
    transform: scale(1.1);
} 
section#m3 {
    height: auto;
    padding: 0 0 138px;
}
section#m3 #overlay.layer {
    width: 31%;
}
section#m3 .layer {
    width: 11%;
}
.m3_img_area_01, .m3_img_area_02, .m3_img_area_03 {display: none;}
section#m3 .m3_img_area_01 #overlay.layer { 
    display: none;
}
section#m3 .m3_img_area_01 #overlay3.layer {
    display: none;
}
section#m3 .m3_img_area_01 #overlay5.layer {
    display: none;
}
section#m3 .m3_img_area_02 #overlay6.layer {
    display: none;
}
section#m3 .m3_img_area_02 #overlay7.layer {
    display: none;
}
section#m3 .m3_img_area_03 #overlay8.layer {
    display: none;
}
section#m3 .m3_img_area_03 #overlay9.layer {
    display: none;
}
@media (min-width: 768px) {
    section#m3 {
        height: calc(100vh - 170px);
        padding: 0;
    }
    .m3_img_area_01 {
        position: absolute;
        left: 12%;
        top: 32%;
        width: 38%;
        display: block;
    }
    .m3_img_area_01_main {
        width: 100%;
    }
    .m3_img_area_02 {
        position: absolute;
        left: 56%;
        top: 26%;
        width: 24%;
        z-index: 1;
        display: block;
    }
    .m3_img_area_02_main {
        width: 100%;
    }
    .m3_img_area_03 {
        position: absolute;
        left: 50.6%;
        bottom: 0;
        width: 32%;
        z-index: 1;
        display: block;
    }
    .m3_img_area_03_main {
        width: 100%;
    }
    section#m3 #overlay.layer { 
    display: none;
    }
    section#m3 #overlay3.layer {
        display: none;
    }
    section#m3 #overlay5.layer {
        display: none;
    }
    section#m3 #overlay6.layer {
        display: none;
    }
    section#m3 #overlay7.layer {
        display: none;
    }
    section#m3 #overlay8.layer {
        display: none;
    }
    section#m3 #overlay9.layer {
        display: none;
    }
    section#m3 .m3_img_area_01 #overlay.layer { 
        display: block;
        width: 34%;
        top: 5%;
        left: 16%;
    }
    section#m3 .m3_img_area_01 #overlay3.layer {
        display: block;
        width: 10%;
        top: -9%;
        left: 42%;
    }
    section#m3 .m3_img_area_01 #overlay5.layer {
        display: block;
        width: 10%;
        left: 76%;
        top: 20%;
    }
    section#m3 .m3_img_area_02 #overlay6.layer {
        display: block;
        width: 15%;
        top: 12%;
        left: 39%;
    }
    section#m3 .m3_img_area_02 #overlay7.layer {
        display: block;
        width: 15%;
        left: 50%;
        top: 57%;
    }
    section#m3 .m3_img_area_03 #overlay8.layer {
        display: block;
        width: 15%;
        top: 38%;
        left: -3%;
    }
    section#m3 .m3_img_area_03 #overlay9.layer {
        display: block;
        width: 15%;
        left: 77%;
        top: 27%;
    }
}
@media (min-width: 1280px) {
    section#m3 {
        height: calc(100vh - 148px);
        padding: 0;
    }
}