body{
    font-family: makinas-4-square, sans-serif;
    font-style: normal;
}
img {
    user-drag: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
}

.content_header{
    position: relative;
}

.content_header::after{
    content: "";
    position: absolute;
    right: 0;
    bottom: calc((6 * var(--content_width)) / 750);
    width: calc((136 * var(--content_width)) / 750);
    height: calc((112 * var(--content_width)) / 750);

    background-size: 100% 100%;
}


.mode_easy   .content_header::after{    background-image: url(../images/icon_header_easy.png); }
.mode_normal .content_header::after{    background-image: url(../images/icon_header_normal.png); }
.mode_hard   .content_header::after{    background-image: url(../images/icon_header_hard.png); }

.scene_block{
    position: relative;
}
.scene_wrapper{
    display: none;
    position: relative;
    width: 100%;
    min-height: calc(100vh - ((190 * var(--content_width)) / 750));

    padding:  calc((40 * var(--content_width)) / 750) calc((32 * var(--content_width)) / 750);

    background-repeat: repeat;
    background-position: top left;
}
.mode_select #mode_select,
.game_main   #game_main,
.failed      #game_main,
.result      #result,
.failed      #failed{
    display: block;
}

#mode_select{
    background-image: url(../images/bg_mode_pat.jpg);
    background-size: calc((8 * var(--content_width)) / 750);
}

.terms_wrapper{
    display: none;
    font-family: sans-serif;
    margin-top: calc((20 * var(--content_width)) / 750);
    padding: calc((30 * var(--content_width)) / 750);
    text-align: left;
    font-size: calc((24 * var(--content_width)) / 750);
    line-height: calc((35 * var(--content_width)) / 750);
    background-color: #fff;
}
.terms_wrapper hr{
    height: calc((2 * var(--content_width)) / 750);;
    background-color: #000;
    border: 0;
    margin-bottom: calc((5 * var(--content_width)) / 750);;
}
.terms_wrapper .terms_title{
    font-weight: bold;
}
.terms_list{
    list-style: none;
    counter-reset: terms_no 0;
}
.terms_list li{
    padding-left: 1.2em;
}
.terms_list li::before{
    display: inline-block;
    width: 1.2em;
    margin-left: -1.2em;
}
.terms_list li.terms_no::before{
    counter-increment: terms_no 1;
    content: counter(terms_no)".";
}
.terms_list li.terms_no2::before{
    counter-increment: terms_no 1;
    content: counter(terms_no)")";
}
.terms_list li.terms_dot::before{
    content: "・";
}
.terms_list li.terms_attention::before{
    content: "※";
}

#game_main {
    background-image: url(../images/bg_game_pat.jpg);
    background-size: calc((150 * var(--content_width)) / 750);
}

.game_container{
    position: relative;
    padding: 0 calc((35 * var(--content_width)) / 750) calc((16 * var(--content_width)) / 750);
}

.game_container ul li{
    float: left;
    width: calc((136 * var(--content_width)) / 750);
    height: calc((176 * var(--content_width)) / 750);

    margin-right: calc((24 * var(--content_width)) / 750);
    margin-bottom: calc((24 * var(--content_width)) / 750);
}
.game_container ul li .btn_card{
    display: block;
    width: 100%;
    height: 100%;

    background-size: 100% 100%;
}
.game_container ul li .btn_card.closed{
    background-image: url(../images/btn_card_back.png);
}

.game_container ul li .btn_card img{
    display: none;
    width: 100%;
    height: 100%;
}
.game_container ul li .btn_card.opened img{
    display: block;
}
.game_container ul li:nth-child(4n){
    margin-right: 0;
}

.choose_card{
    display: none;
    position: absolute;
    left: calc((60 * var(--content_width)) / 750);
    top: 0;
    width: calc((556 * var(--content_width)) / 750);
    height: calc((776 * var(--content_width)) / 750);

    background-size: 100% 100%;
    pointer-events: none;
}

.fail_count_container{
    width: calc((508 * var(--content_width)) / 750);
    height: calc((138 * var(--content_width)) / 750);
    line-height: calc((80 * var(--content_width)) / 750);

    padding: calc((29 * var(--content_width)) / 750) calc((20 * var(--content_width)) / 750) calc((29 * var(--content_width)) / 750) calc((292 * var(--content_width)) / 750);
    margin: 0 auto calc((45 * var(--content_width)) / 750);

    text-align: center;
    font-size: calc((50 * var(--content_width)) / 750);
    font-weight: bold;
    background-image: url(../images/frame_fail_count.png);
    background-size: 100% 100%;

    color: #c2007b;
}
.fail_count_label{
	margin-left: calc((10 * var(--content_width)) / 750);
	font-size: calc((28 * var(--content_width)) / 750);

	color: #666666;
}



#result {
    padding-top: calc((50 * var(--content_width)) / 750);
    background-image: url(../images/bg_clear_pat.jpg);
    background-size: calc((40 * var(--content_width)) / 750) calc((25 * var(--content_width)) / 750);
}

#failed {
    position: absolute;
    left: 0;
    top: 0;
    padding-top: calc((50 * var(--content_width)) / 750);
    background-color: rgba(211, 231, 248, 0.9);
}

.image_clear{
    width: calc((610 * var(--content_width)) / 750);
    margin: 0 auto calc((60 * var(--content_width)) / 750);
}

.btn_share{
	display: none;
}

.popup{
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    background-color: rgb(0, 0, 0, 0.7);
    z-index: 100;
}

.mt25 { margin-top: calc((25 * var(--content_width)) / 750); }

.mb25 { margin-bottom: calc((25 * var(--content_width)) / 750); }
.mb35 { margin-bottom: calc((35 * var(--content_width)) / 750); }
.mb40 { margin-bottom: calc((40 * var(--content_width)) / 750); }
.mb50 { margin-bottom: calc((50 * var(--content_width)) / 750); }

.lh0 { line-height: 0; }