@charset "utf-8";

html { width: 100%; overflow: auto; font-size: 62.5%;}
body {
    text-align: center;
    font-size:1.8rem;
    width: 100%;
    height: 100vh;
    background: #111421;
    color: #fff;
    position:relative;
    overflow:hidden;
}

h1 { display: none; visibility: hidden;}
.wrap { width: 100%; height: 100%; padding: 40px 36px 56px; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; position: relative;}
body.pc .wrap { min-width:960px;}

.innerBoxWrap { width: 100%; max-width: 1386px; height: 100%; max-height:600px; display: -webkit-flex; display: flex;/* -webkit-flex-wrap: wrap; flex-wrap: wrap;*/ -webkit-justify-content: center; justify-content: center; -webkit-align-items: stretch; align-items:stretch;}
body.pc .innerBoxWrap { height: 70%;}

.innerBox { flex:1; height: auto; position: relative; overflow: hidden;}
.innerBox:first-child { margin-right: 2.6%;}
.innerBox a {display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; text-decoration: none; color: inherit; height: 100%; padding: 30px;}
.innerBox a:after { content: ""; display:block; width: calc(100% - 24px); height: calc( 100% - 24px); border: #fff 1px solid; opacity: 0.6; position: absolute; left: 11px; top: 11px;}
.innerBox a div { width: 100%;}

.logo { width: 50%; margin-left: auto; margin-right: auto; max-width:280px; padding-bottom: 0%;}
/*h2 { width: 80%; margin-left: auto; margin-right: auto; max-width: 400px;}*/
.txt { height: 2em; line-height: 1.4; margin-top: 1.5em;}

.ie .innerBox a { -webkit-flex-direction: row; flex-direction:row; width: 100%;}

.innerBox:before { content: ""; width: 100%; height: 100%; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; opacity: 0.5; transition: all 0.3s ease-out;}
#bsBox:before { background: url(../img/img_bs.jpg) no-repeat; background-size: cover;}
#csBox:before { background: url(../img/img_cs.jpg) no-repeat; background-size: cover;}
#wellBox:before { background: url(../img/img_well.jpg) no-repeat; background-size: cover;}
.innerBox:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; background: #000; opacity: 0; transition: opacity 0.3s ease-out;}

.pc .innerBox:hover:before { width: 104%; height: 104%; transition: all 0.5s ease-out;}
.pc .innerBox:hover:after { opacity: 0.5; transition: opacity 0.5s ease-out;}

.copyRight { position: absolute; left: 50%; bottom: 14px;transform: translate(-50%, 0); font-size: 1.2rem; letter-spacing: 1.4px; padding-left: 2px; opacity: 0.4;}



@media screen and ( max-width:900px ) and (orientation: landscape){
    body:not(.pc) { font-size:1.5rem;}
}
@media screen and ( max-width:700px ) and (orientation: landscape){
    body:not(.pc) { font-size: 1.3rem;}
    body:not(.pc) .wrap { padding: 5% 4% 8%;}
    body:not(.pc) .innerBox:first-child {margin-right: 2.4%;}
    body:not(.pc) .logo { width: 54%; padding-bottom: 5%;}
    body:not(.pc) .innerBox a { padding: 20px;}
    body:not(.pc) .innerBox a:after { width: calc(100% - 20px); height: calc( 100% - 20px); left: 9px; top: 9px;}
}

@media screen and (orientation: portrait){
    body:not(.pc) .wrap { min-width:0; padding:5% 10% 10%; overflow:scroll; }
    body:not(.pc) .innerBoxWrap { width: 80%; margin: 0 auto; -webkit-flex-wrap: wrap; flex-wrap: wrap; height: auto; max-height: none;}
    body:not(.pc) .innerBox { flex: auto; width: 100%;}
    body:not(.pc) .innerBox:first-child { margin-right: 0px; margin-bottom: 6%;}
    body:not(.pc) .innerBox a { min-height: 56vw; padding: 50px 30px;}
}
@media screen and ( max-width:600px ) and ( orientation: portrait ){
    body:not(.pc) { font-size: 1.3rem;}
    body:not(.pc) .wrap { padding: 4.8% 7.5% 8%; }
    body:not(.pc) .innerBoxWrap { width: 100%;}
    body:not(.pc) .innerBox a { padding: 30px 20px; min-height: 68vw;}
    body:not(.pc) .innerBox a:after { width: calc(100% - 20px); height: calc( 100% - 20px); left: 9px; top: 9px;}
    body:not(.pc) .innerBox:first-child { margin-bottom: 7%;}
    .logo { width: 62%; max-width:280px;  padding-bottom: 0%;}
    /*h2 { width: 90%; max-width: 400px; }*/
    .copyRight { font-size: 1.1rem; letter-spacing: 1.3px; width: 100vw; bottom: 9px;}
}