/* --------------------------------------------------------------------------------------- Media tags -------*/

@media screen and (min-width: 320px) {/* -------------------------------------------------- 320 px ----------*/
    .kanji1{
        margin-top: -15px;
        margin-left: 240px;
    }
    .kanji2{
        margin-top: -13px;
        margin-left: 150px;
    }
    #mediabox{
        background-size:cover;
        background-position: 55% 0%;
        /*box-shadow: inset 0px 20px 20px -10px rgba(0,11,40,1);
        -webkit-box-shadow: inset 0px 25px 30px -12px rgba(2,28,65,1);
        -moz-box-box-shadow: inset 0px 20px 15px -10px rgba(0,11,40,1);*/
    }
    #content{
        margin-top: 50px;
    }
    header{
        margin-top: 20px;
    }
    #headerLogo{
        display:none;
    }
    .boxstyle p{
        margin-top: 30%; 
/*        margin-left: 25px;*/
    }
    #boxwrapper{
        width: 50%;
        margin: 0 auto;
    }
    .contentBox{
        margin: 0 10px 0 10px;
        width: calc(100% - 15px * 2 - 10px * 2);
    }
    #contif{
/*        width: 265px;*/
        height: 320px;
    }
    #wrapper{
        width: 95%;
    }
    .instBox{
        width: 100%;
        margin-left: 0;
    }
    #box11{
        display: none;
        opacity: 0;
        position: static;
        margin-left: 25px;
    }
    #box12{
        display: none;
        opacity: 0;
        position: static;
        margin-left: 25px;
    }
    .boxstyle2:hover p{
        margin-top: 0 !important;
    }
}
@media screen and (min-width: 350px) {/* -------------------------------------------------- 350 px ----------*/
    .kanji1{
        margin-top: -15px;
        margin-left: 260px;
    }
    .kanji2{
        margin-top: -8px;
        margin-left: 125px;
    }
    #wrapper{
        width: 95%;
    }
}
@media screen and (min-width: 400px) {/* -------------------------------------------------- 400 px ----------*/
    #boxwrapper{
        width: 60%;
        margin: 0 auto;
    }
    #content{
        margin-top: 50px;
    }
    .kanji1{
        margin-top: -15px;
        margin-left: 270px;
        font-size: 20px;
    }
    #wrapper{
        width: 95%;
    }
}
@media screen and (min-width: 450px) {/* -------------------------------------------------- 450 px ----------*/
    .kanji1{
        margin-top: -15px;
        margin-left: 330px;
        font-size: 25px;
    }
    #contif{
/*        width: 370px;*/
        height: 320px;
    }
    #wrapper{
        width: 95%;
    }
}
@media screen and (min-width: 500px) {/* -------------------------------------------------- 500 px ----------*/
    #boxwrapper{
        width: 50%;
        margin: 0 auto;
    }
    .kanji1{
        margin-top: -15px;
        margin-left: 330px;
        font-size: 25px;
    }
    #contif{
/*        width: 390px;*/
        height: 320px;
    }
    #wrapper{
        width: 90%;
    }
}
@media screen and (min-width: 550px) {/* -------------------------------------------------- 550 px ----------*/
    #boxwrapper{
        width: 50%;
        margin: 0 auto;
    }
    .kanji1{
        margin-top: -15px;
        margin-left: 330px;
        font-size: 25px;
    }
    #contif{
/*        width: 390px;*/
        height: 320px;
    }
    #wrapper{
        width: 80%;
    }
    .instBox{
        width: 45%;
        margin-left: calc((10% - 6px) / 1);
    }
    .instBox:nth-child(3), .instBox:nth-child(5), .instBox:nth-child(7){
        margin-left:0;
    }
}
@media screen and (min-width: 600px) { /* -------------------------------------------------- 600 px ----------*/
    .boxstyle{
        float: left;
        margin-right: 15px;
        width: calc((100% - (6px + 2 * 15px)) / 3);
    }
    #box1{
        margin-top:25px;
    }
    #box4{
        margin-right: 0;
    }
    #box9{
        margin-right: 0;
        display: none;
    }
    #fbdiv{
        margin-right: 0;
        margin-left: 0;
        width: 20%;
    }
    .boxstyle p{
        margin-top: 50%;
    }
    .kanji1{
        margin-top: -90px;
        margin-left: 475px;
        font-size: 30px;
    }
    .kanji2{
        margin-top: -35px;
        margin-left: 110px;
    }
    #boxwrapper{
        display: block;
        width: 95%;
        margin: 50px auto 0 auto;
        max-height: 200px;
    }
    #content{
        max-height: 200px;
    }
    .contentBox{
        margin: 25px 5px 0 14px;
        width: calc(75% - 15px * 2 - 14px * 2);
    }
    #contif{
/*        width: 300px;*/
        height: 320px;
/*        margin-left: calc(50% - 150px);*/
    }
    #wrapper{
        width: 95%;
    }
    .instBox{
        width: 47%;
        margin-left: calc((6% - 6px) / 1);
    }
    .instBox:nth-child(3), .instBox:nth-child(5), .instBox:nth-child(7){
        margin-left:0;
    }
    #box11{
        display: none;
        opacity: 0;
        position: absolute;
        left: -18px;
        margin-left: 0;
    }
    #box12{
        display: none;
        opacity: 0;
        position: absolute;
        left: 100px;
        margin-left: 0;
    }
    .boxstyle2:hover p{
    margin-top:83% !important;
    }
}
@media screen and (min-width: 650px) { /* -------------------------------------------------- 650 px ----------*/
    #wrapper{
        width: 90%;
    }
}
@media screen and (min-width: 700px) { /* -------------------------------------------------- 700 px ----------*/
    #wrapper{
        width: 85%;
    }
}
@media screen and (min-width: 750px) { /* -------------------------------------------------- 750 px ----------*/
    #wrapper{
        width: 82%;
    }
}
@media screen and (min-width: 800px) { /* -------------------------------------------------- 800 px ----------*/
    #wrapper{
        width: 80%;
    }
    #box11{
        
    }
    #box12{
        left: 105px;
    }
}
}
@media screen and (min-width: 850px) { /* -------------------------------------------------- 850 px ----------*/
    #wrapper{
        width: 80%;
    }
    #box11{
        
    }
    #box12{
        left: 120px;
    }
}
@media screen and (min-width: 900px) { /* -------------------------------------------------- 900 px ----------*/
    #wrapper{
        width: 75%;
    }
    #box12{
        left: 113px;
    }
}
@media screen and (min-width: 960px) {/* -------------------------------------------------- 960 px ----------*/
    .kanji2 {
        margin-top: -35px;
        margin-left: 110px;
    }
    .kanji1 {
        margin-top: -90px;
        margin-left: 490px;
        font-size: 30px;
    }
    .boxstyle{
        margin-left:0;
        margin-right: 20px;
        height: 170px;
        width: calc((100% - (6px + 2 * 20px)) / 3.01);
    }
    .boxstyle2{
        margin-right: 15px;
    }
    .contentBox{
        margin: 25px 5px 0 14px;
        width: calc(81.2% - 15px * 2 - 14px * 2);
    }
    #box9{
        margin-right: 0;
    }
    #boxwrapper{
        width: 60%;
        margin: 0 auto;
    }
    #headerContentWrapper{
        margin: 0 auto;
    }
    header{
        width: 605px;
        margin: 0 auto;
    }
    #wrapper{
        width: 70%;
    }
    #fbdiv{
        width: 15%;
    }
    .instBox{
        width: 32%;
        margin-left: calc((4% - 6px) / 2);
    }
    .instBox:nth-child(3), .instBox:nth-child(6), .instBox:nth-child(9){
        margin-left:0;
    }
    .instBox:nth-child(5), .instBox:nth-child(7){
        margin-left: calc((4% - 6px) / 2);
    }
    #box11{
        
    }
    #box12{
        left: 70px;
    }
}
@media screen and (min-width: 1050px) {/* ------------------------------------------------ 1050 px
----------*/
    #box11{
        
    }
    #box12{
        left: 80px;
    }
}
@media screen and (min-width: 1200px) {/* ------------------------------------------------ 1200 px
----------*/
    #box11{
        
    }
    #box12{
        left: 90px;
    }
}
@media screen and (min-width: 1300px) {/* ------------------------------------------------ 1300 px
----------*/
    #box11{
        
    }
    #box12{
        left: 95px;
    }
}
@media screen and (min-width: 1400px) {/* ------------------------------------------------ 1400 px
----------*/
    .boxstyle2{
        margin-right: 18px;
    }
    .instBox{
        width: 30%;
        margin-left: calc((10% - 6px) / 2);
    }
    .instBox:nth-child(5), .instBox:nth-child(7){
        margin-left: calc((10% - 6px) / 2);
    }
    #box11{
        
    }
    #box12{
        left: 103px;
    }
}

@media screen and (min-width: 1500px) {/* ------------------------------------------------ 1500 px
----------*/    
    #mediabox{
        background-position: 0 -220px;
        transform: scale(1.10,1.10);
    }
    #boxwrapper{
        margin-top: 130px;
    }
    #wrapper{
        width: 60%;
    }
    #box11{
        
    }
    #box12{
        left: 93px;
    }
}

@media screen and (min-width: 1600px) {/* ------------------------------------------------ 1600 px
    ----------*/   
    #box12{
        left: 98px;
    }
}

@media screen and (min-width: 1700px) {/* ------------------------------------------------ 1700 px
    ----------*/   
    #box12{
        left: 105px;
    }
}

@media screen and (min-width: 1800px) {/* ------------------------------------------------ 1800 px
----------*/    
    #mediabox{
        background-position: 0 -200px;
        transform: scale(1.10,1.10);
    }
    #boxwrapper{
        margin-top: 180px;
    }
    #wrapper{
        width: 50%;
    }
    #box12{
        left: 95px;
    }
}

@media screen and (max-width: 599px){/* --------------------------------------------------- 600 px ------------------------- */
    #boxwrapper{
        display: none;
    }
    #menu{
        display: block;
        z-index: 1;
    }
    .boxstyle{
        margin: 0;
        border-radius: 0;
        border-top: none;
        box-shadow: none;
        -webkit-box-shadow: none;
    }
    #boxwrapper div:nth-last-child(2){
        border-bottom: none;
    }
    #menu #boxwrapper #box5, #menu #boxwrapper #box6, #menu #boxwrapper #box7, #menu #boxwrapper #box8, #menu #boxwrapper #box10{
        margin-left: 25px;
    }
    #menu #boxwrapper p{
        margin: 0 0 0 3px;
        text-align: left;
    }
    #mediabox{
        transform: scale(1.2, 1.2);
    }
    .locimg{
        margin: 0 8px 0 0;
        width: 30%;
    }
    #fbdiv{
        margin-top: 10px;
        width: calc(100% - 15px * 2 - 10px * 2);
    }
}