/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 2019/02/22, 9:51:45
    Author     : S.Niikura
*/
@media (min-width: 481px) {
    .modal_wrap input{
        display: none;
    }

    .modal_overlay{
        display: flex;
        justify-content: center;
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        opacity: 0;
        transition: opacity 0.5s, transform 0s 0.5s;
        transform: scale(0);
    }

    .modal_trigger{
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .modal_content{
        position: relative;
        align-self: center;
        width: 500px;
        padding: 20px 20px;
        box-sizing: border-box;
        background: #fff;
        line-height: 1.4em;
        transition: 0.5s;
        font-size: 1.4rem;
        font-weight: bold;
        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    }

    .modal_block {
        display: inline-block;
    }
    .modal_block img {
        width:150px;
    }
    .modal_title {
        font-size: 1.2em;
        margin-bottom: 20px;
    }
    .modal_result {
    }
    .modal_info {
        line-height: 1.5;
        font-size: 0.6em;
    }
    .modal_info_debug {
        margin-top: 10px;
        margin-bottom: 5px;
        line-height: 1.5;
        color: green;
        font-size: 0.8em;
    }

    .close_button{
        position: absolute;
        top: 14px;
        right: 16px;
        font-size: 24px;
        cursor: pointer;
    }

    .modal_wrap input:checked ~ .modal_overlay{
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s;
    }

    .judge_button{
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        align-items: center;
        padding: 8px 16px;
        color: #fff;
        background-color: orangered;
        font-size: 1.4rem;
        font-weight: bold;
        font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
        box-shadow: 0 1px 3px rgba(0,0,0,0.6);
        border-radius: 16px;
        cursor: pointer;
    }
    .judge_button:hover{
        background-color: #ffcc99;
        color: orangered;
    }

    .reset_button{
        float: right;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        align-items: center;
        padding: 8px 16px;
        color: #fff;
        background-color: #4D4D4D;
        font-size: 1.0rem;
        font-weight: bold;
        font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
        box-shadow: 0 1px 3px rgba(0,0,0,0.6);
        border-radius: 16px;
        cursor: pointer;
    }
    .reset_button:hover{
        background-color: #CCCCCC;
        color: #000;
    }
}

@media (max-width: 480px) {
    .modal_wrap input{
        display: none;
    }

    .modal_overlay{
        display: flex;
        justify-content: center;
        overflow: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        opacity: 0;
        transition: opacity 0.5s, transform 0s 0.5s;
        transform: scale(0);
    }

    .modal_trigger{
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .modal_content{
        position: relative;
        align-self: center;
        width: 95%;
        padding: 15px 5px;
        box-sizing: border-box;
        background: #fff;
        line-height: 1.4em;
        transition: 0.5s;
        font-size: 1.4rem;
        font-weight: bold;
        font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    }

    .modal_block {
        display: inline-block;
    }
    .modal_block img {
        width:100px;
    }
    .modal_title {
        font-size: 1.2em;
        margin-bottom: 20px;
    }
    .modal_result {
    }
    .modal_info {
        line-height: 1.5;
        font-size: 0.6em;
    }
    .modal_info_debug {
        margin-top: 10px;
        margin-bottom: 5px;
        line-height: 1.5;
        color: green;
        font-size: 0.8em;
    }

    .close_button{
        position: absolute;
        top: 14px;
        right: 16px;
        font-size: 24px;
        cursor: pointer;
    }

    .modal_wrap input:checked ~ .modal_overlay{
        opacity: 1;
        transform: scale(1);
        transition: opacity 0.5s;
    }

    .judge_button{
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        align-items: center;
        padding: 8px 16px;
        color: #fff;
        background-color: orangered;
        font-size: 1.4rem;
        font-weight: bold;
        font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
        box-shadow: 0 1px 3px rgba(0,0,0,0.6);
        border-radius: 16px;
        cursor: pointer;
    }

    .reset_button{
        float: right;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        align-items: center;
        padding: 8px 16px;
        color: #fff;
        background-color: #4D4D4D;
        font-size: 0.6rem;
        font-weight: bold;
        font-family: 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
        box-shadow: 0 1px 3px rgba(0,0,0,0.6);
        border-radius: 16px;
        cursor: pointer;
    }
    .reset_button:hover{
        background-color: #CCCCCC;
        color: #000;
    }
}