@charset "utf-8";

@media (max-width: 767px) {
    #top_panel {
        display: grid;
        grid-template-rows: repeat(11,1fr);
        grid-template-columns: repeat(6,1fr);
        grid-template-areas:
        "panel_01 panel_01 panel_01 panel_01 panel_02 panel_02"
        "panel_01 panel_01 panel_01 panel_01 panel_03 panel_03"
        "panel_01 panel_01 panel_01 panel_01 panel_04 panel_04"
        "panel_01 panel_01 panel_01 panel_01 panel_05 panel_05"
        "panel_11 panel_11 panel_11 panel_12 panel_12 panel_12"
        "panel_11 panel_11 panel_11 panel_12 panel_12 panel_12"
        "panel_11 panel_11 panel_11 panel_12 panel_12 panel_12"
        "panel_06 panel_06 panel_10 panel_10 panel_10 panel_10"
        "panel_07 panel_07 panel_10 panel_10 panel_10 panel_10"
        "panel_08 panel_08 panel_10 panel_10 panel_10 panel_10"
        "panel_09 panel_09 panel_10 panel_10 panel_10 panel_10"
    }
}

@media (min-width: 768px) {
    #top_panel {
        display: grid;
        grid-template-rows: repeat(4,1fr);
        grid-template-columns: repeat(8,1fr);
        grid-template-areas:
        "panel_01 panel_01 panel_02 panel_02 panel_06 panel_06 panel_07 panel_07"
        "panel_01 panel_01 panel_11 panel_11 panel_12 panel_12 panel_08 panel_08"
        "panel_03 panel_03 panel_11 panel_11 panel_12 panel_12 panel_10 panel_10"
        "panel_04 panel_04 panel_05 panel_05 panel_09 panel_09 panel_10 panel_10"
    }
}

#panel_01 {
    grid-area: panel_01;
}
#panel_02 {
    grid-area: panel_02;
}
#panel_03 {
    grid-area: panel_03;
}
#panel_04 {
    grid-area: panel_04;
}
#panel_05 {
    grid-area: panel_05;
}
#panel_06 {
    grid-area: panel_06;
}
#panel_07 {
    grid-area: panel_07;
}
#panel_08 {
    grid-area: panel_08;
}
#panel_09 {
    grid-area: panel_09;
}
#panel_10 {
    grid-area: panel_10;
}
#panel_11 {
    grid-area: panel_11;
}
#panel_12 {
    grid-area: panel_12;
}

.touch {
    overflow: hidden;
}

.grid_image {
    width: 100%;
}

/* zoom */
.zoom {
    max-width: 100%;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.touch:hover .zoom {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.snip {
    position: relative;
    overflow: hidden;
}

.img_cap {
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 0;
}

.img_cap_text {
    margin: 0;
    width: 100%;
    padding: 5px;
    /* text-align: left; */
    bottom: 0;
    color: #555;
    background-color: #FFFFFF;
    opacity: 0.5;
}

/* text slide */
.snip * {
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

.img_cap {
    z-index: 1;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.snip:hover .img_cap,
.snip:hover .img_cap {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}




.logo_box {
    width: 100%;
    padding: 5px;
    position: relative;
    background-color: red;
    border: solid 8px #868686;
}

.logo_01 {
    background-color: #FFFFFF;
}

.logo_02 {
    background-color: #FFFFFF;
}

.logo_img {
    width: 100%;
}


/* enter button */
.enter_btn_box {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.enter_btn {
    padding: 0 2px;
    line-height: 16px;
    border-radius: 2px;
    font-weight: bold;
}

.enter_atemi {
    border: solid 2px #18477F;
    color: #18477F;
}

.enter_kenshi {
    border: solid 2px #000000;
    color: #000000;
}

/* top_container */
#top_container {
    width: 100%;
    margin-bottom: 120px;
    background-color: rgba(0,0,0,0.5);
}

/*common for pc large*/
@media (min-width: 1617px) {
    #top_panel {
        width: 1600px;
        margin: 0 auto;
    }
}

/*common for pc*/
@media (max-width: 1616px) {
    #top_panel {
        width: 100%;
    }
}






/* responsive */
@media (max-width: 389px) {
}

@media (min-width: 390px) {
    /* enter button */
    .enter_btn_box {
        bottom: 4px;
    }

    .enter_btn {
        padding: 0 2px;
        line-height: 18px;
        border-radius: 3px;
    }

    .enter_atemi {
        border: solid 3px #18477F;
    }

    .enter_kenshi {
        border: solid 3px #000000;
    }
}

@media (min-width: 768px) {
    /* enter button */
    .enter_btn_box {
        bottom: 4px;
    }

    .enter_btn {
        padding: 2px 3px 2px 3px;
        line-height: 20px;
        border-radius: 4px;
    }

    .enter_atemi {
        border: solid 4px #18477F;
    }

    .enter_kenshi {
        border: solid 4px #000000;
    }
}

@media (min-width: 1280px) {
    /* enter button */
    .enter_btn_box {
        bottom: 12px;
    }

    .enter_btn {
        padding: 2px 16px 2px 16px;
        border-radius: 5px;
    }

    .enter_atemi {
        border: solid 5px #18477F;
    }

    .enter_kenshi {
        border: solid 5px #000000;
    }
}