@charset "UTF-8";

body {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

.wrapper {
    width: 100%;
    height: 800px;
}

.mainwrap {
    width: 100%;
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: 10;
}

.header_wrap {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
}

.logo {
    width: 194px;
    margin: 24px 0 0 28px;
    animation: slidein 2.5s linear forwards;
}

@keyframes slidein {
    0%{opacity:0;}
    40%{opacity:0;
        transform:translate(-100%, 0)}
    100%{opacity:1;
        transform:translate(0, 0)}
}


.top_wrap {
    width: 100%;
    height: 400px;
    background: url(../images/back_top3.jpg);
    background-size: 100%;
    background-attachment: fixed;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 1;
    animation: grow 2s linear forwards;
}

@keyframes grow {
    0%{opacity:0;
        width: 0%}
    30%{opacity:0;
        transform:translate(0, -5%)}
    100%{opacity:1;
        width: 100%;
        transform:translate(0, 0)}
}

 .ltop-box {
    width: 50%;
    height: 322px;
    margin: 0;
    padding: 0;
}

.rtop-box {
    width: 50%;
    height: 322px;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.65);
    position: relative;
    z-index: 2;
}

.low_wrap {
    width: 100%;
    height: 400px;
    background: url(../images/back_bottom.jpg);
    background-position: center 30%;
    background-attachment: fixed;
    background-size: 100%;
    display: flex;
    position: relative;
    z-index: 0;
    animation: grow 1.5s linear forwards;
}

.rlow-box {
    width: 50%;
    height: 400px;
    margin: 0;
    padding: 0;
    position: sticky;
}

.llow-box {
    width: 50%;
    height: 400px;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.65);
}


.mainpic {
    width: 100%;
    height: 290px;
    background: url(../images/toppic.png) center no-repeat;
    background-size: cover;
    transform: translate(0, 62%)
}

.llow-text {
    transform: translate(0, 80%)
}
 
h2 {
    margin: 25px;
    font-size: 24px;
    color: #fff;
    font-family: fot-rodin-pron, sans-serif;
    font-weight: 100;
    font-style: normal;
    animation: advent 2.5s linear forwards;
}

@keyframes advent {
    0%{opacity:0;}
    30%{opacity:0;
        transform:translate(0, -10%)}
    100%{opacity:1;
        transform:translate(0, 0)}
}

p {
    margin: 0 25px;
    font-size: 12px;
    color: #fff;
    line-height: 18px;
    z-index: 5;
    font-family: fot-rodin-pron, sans-serif;
    font-weight: 100;
    font-style: normal;
}

.llow-box p, .rtop-box p {
    animation: advent 2s linear forwards;
}

p.right, h2.right {
    text-align: right;
}

.linewrap {
    display: block;
    height: 12px;
}

p.adress {
    line-height: 18px;
    text-align: right;
    margin: 0 4% 0 0;
    position: relative;
    top: 60%;
    right: 0;
    z-index: 5;
}

h1.bottomlogo {
    width: 70%;
    position: relative;
    top: 56%;
    left: 26%;
    z-index: 3;
    filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.4));
}

.bottomlogo img {
    text-align: center;
}

footer {
    width: 65%;
    height: 30px;
    background-color: #fff;
    transform: translate(0, 215px);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

small {
    display: block;
    margin: 0;
    line-height: 30px;
    text-align: center;
    font-family: fot-rodin-pron, sans-serif;
    font-size: 5px;
    color: #5c5c5c;
}


/*@media screen and (max-width:840px){
    
    .wrapper {
    width: 100%;
    height: 100vh;
    overflow: scroll;
    }
    
    .top_wrap {
    display: block;
    width: 100%;
    height: 500px;
    background: url(../images/back_top3.jpg) no-repeat;
    background-size: cover;
    background-attachment:fixed;
    }
    
    .logo {
    margin: 10px 0 0 24px;
    }
    
    .low_wrap {
    display: block;
    width: 100%;
    height: 1000px;
    background: url(../images/back_bottom.jpg) no-repeat;
    background-position: center 30%;
    background-attachment:fixed;
    background-size: cover;
    }
    
    .mainpic {
    transform: translate(0, 50%)
}
    
    .ltop-box {
    width: 100%;
    height: 20%;
    }

    .rtop-box {
    width: 100%;
    height: 65%;
    position: absolute;
    top: 173%;
    left: 0;
    z-index: 10;
    }
    
    .llow-box {
    width: 100%;
    height: 35%;
    position: absolute;
    top: -10%;
    left: 0;
    z-index: 50;
    }

    .rlow-box {
    width: 100%;
    height: 15%;
    position: absolute;
    bottom: 5%;
    left: 0;
    z-index: 50;
    background-color: rgba(0, 0, 0, 0.65);
    }
    
    .rtop-box h2, .llow-box h2 {
    margin: 25px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    }
    
    .rtop-box p, .llow-box p {
    text-align: center;
    }
    
    footer {
    width: 100%;
    height: 30px;
    background-color: #fff;
    transform: translate(0, 80px);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
}

    
}*/


/*施設紹介*/

.pagetitle {
    height: 45px;
    margin: 17px 0 0 28px;
    border-left: 12px solid #fff;
}

h2.index {
    font-size: 20px;
    margin: 0 12px;
    line-height: 22px;
    padding: 0;
}

p.h2cap {
    font-size: 9px;
    margin: 0 12px;
    padding: 0;
}

.ltop-box-b {
    width: 50%;
    height: 322px;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.65);
}

.ctlr_container {
    display: flex;
    width: 87%;
    height: 180px;
    margin: 28px 7% 40px 8%;
    padding: 0;
}

.blackbox {
    width: 30%;
    background-color: rgba(0, 0, 0, 1);
}

.blackbox h2{
    margin: 20px 0;
    text-align: right;
    line-height: 23px;
    letter-spacing: 1px;
    font-size: 1.7vw;
}

.ctrlr {
    width: 70%;
    flex-grow: 2;
    background-image: url(../images/ctrl1.jpg);
    background-size: cover;
    background-position: center;
}

p.piccaption {
    margin: 0 5% 0 0;
    padding: 0;
    line-height: 12px;
    text-align: right;
    position: relative;
    right: 0%;
    bottom: 10%;
}

.rtop-box-b {
    width: 50%;
    height: 322px;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.65);
}

.rtop-box-b .ctlr_container {
    margin: 90px 14% 40px 5%;
}

.recr {
    width: 70%;
    flex-grow: 2;
    background-image: url(../images/booth.jpg);
    background-size: cover;
    background-position: center;
}

.rtop-box-b h2 {
    text-align: left;
    margin: 20px 0;
    letter-spacing: 1px;
    line-height: 23px;
    overflow: hidden;
}

p.piccaption2 {
    margin: 0 0 0 5%;
    padding: 0;
    line-height: 20px;
    position: relative;
    left: 0;
    bottom: 11%;
    z-index: 0;
}

.llow-box-b {
    width: 50%;
    height: 400px;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.65);
}

.llow-box-b .ctlr_container {
    margin: 45px 7% 20px 8%;
}

.waitr {
    width: 30%;
    flex-grow: 2;
    background-image: url(../images/wait1.jpg);
    background-size: cover;
    background-position: center;
}

p.piccaption3 {
    margin: 0 5% 0 0;
    padding: 0;
    line-height: 12px;
    text-align: right;
    position: relative;
    right: 0%;
    bottom: 3%;
}

/*@media screen and (max-width:840px){
    
    .ltop-box-b {
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.65);
    }
    
    .eqltop-box-b {
    width: 100%;
    height: 100%;
    margin: 0;
    padding-top: 80px;
    background-color: rgba(0, 0, 0, 0.65);
    }
    
    .pagetitle {
    height: 45px;
    margin: 0 0 0 28px;
    border-left: 12px solid #fff;
    }
    
    .rtop-box-b {
    width: 100%;
    height: 90%;
    margin: 0;
    padding: 0;
    background-color: rgba(0, 0, 0, 0.65);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    }
    
    .llow-box-b {
    width: 100%;
    height: 25%;
    margin: 0;
    padding-bottom: 50%;
    background-color: rgba(0, 0, 0, 0.65);
    position: absolute;
    top: 30%;
    left: 0;
    z-index: 50;
    }

    .llow-text {
    transform: translate(0, 60%)
}
    
    .blackbox h2{
    margin: 20px 0;
    text-align: right;
    line-height: 22px;
    letter-spacing: 1px;
    font-size: 3.5vw;
    }
    
    .rtop-box-b h2 {
    text-align: left;
    margin: 20px 0;
    letter-spacing: 1px;
    line-height: 22px;
    overflow: hidden;
    }
    
}*/

/*機材・設備*/

.ctlr_container2 {
    width: 30%;
    height: 274px;
    margin: 60px 7% 40px 8%;
    padding: 0;
    position: relative;
    z-index: 2;
}

.ctrlpic {
    width: 100%;
    height: 117px;
    flex-grow: 2;
    background-image: url(../images/toppic.png);
    background-size: cover;
    background-position: center;
}

.eq_blackbox {
    width: 100%;
    height: 166px;
    padding-top: 20px;
    background-color: rgba(0, 0, 0, 1);
}

.ctlr_container2 .eq_blackbox h2 {
    margin: 0;
    text-align: right;
    letter-spacing: 1px;
    line-height: 23px;
    font-size: 1.7vw;
}

.ctrleq table, .receq table {
    width: 70%;
    margin-right: 5%;
    margin-left: auto;
    color: #fff;
    font-family: fot-rodin-pron, sans-serif;
    font-weight: 100;
    font-size: 10px;
    line-height: 19px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-collapse: collapse;
    position: relative;
}

.ctrleq td, .receq td {
    vertical-align: top;
    text-align: right;
    padding: 0 0 0 0px;
    font-size: 5px;
}

.ctrleq th, .receq th {
    padding: 0 15px 10px 0;
    vertical-align: top;
    border-right: 1px solid #ccc; 
    border-collapse: collapse;
    text-align: left;
}

.ctrleq {
    width: 70%;
    margin: 0;
    padding: 20px 0;
    vertical-align: middle;
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    bottom: 110%;
    left: 26%;
    z-index: 1;
    overflow: hidden;
    text-align: right;
}

.recpic {
    width: 100%;
    height: 117px;
    flex-grow: 2;
    background-image: url(../images/rec.jpg);
    background-size: cover;
    background-position: center;
}

.rec_container {
    width: 30%;
    height: 274px;
    margin: 122px 8% 0 0;
    padding: 0;
    position: relative;
    left: 62%;
    top: 0;
    z-index: 2;
}

.rec_container .eq_blackbox h2 {
    margin: 0;
    text-align: left;
    letter-spacing: 1px;
    line-height: 23px;
    font-size: 1.7vw;
}

.receq {
    padding: 20px 0;
    width: 70%;
    margin: 0;
    vertical-align: middle;
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    bottom: 112%;
    left: 3%;
    z-index: 1;
}

.receq table {
    width: 74%;
    margin-right: 20%;
    margin-left: 5%;
}

.receq table th {
    padding: 0 5px 10px 0;
}

.receq table td {
    padding: 0;
    margin: 0;
}

.ctrleq tr:nth-last-child(2n) {
    background-color: rgba(255, 255, 255, 0.1);
}

.receq tr:nth-last-child(2n) {
    background-color: rgba(255, 255, 255, 0.1);
}

/*@media screen and (max-width:840px){

    .ctlr_container2 .eq_blackbox h2 {
    margin: 0;
    text-align: right;
    letter-spacing: 1px;
    line-height: 22px;
    font-size: 3.5vw;
    }

    .rec_container .eq_blackbox h2 {
    margin: 0;
    text-align: left;
    letter-spacing: 1px;
    line-height: 22px;
    font-size: 3.5vw;
    }
    
    .ctrleq {
    width: 70%;
    margin: 0;
    padding: 20px 0;
    vertical-align: middle;
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    bottom: 85%;
    left: 26%;
    z-index: 1;
    overflow: hidden;
    text-align: right;
}
    
    .receq {
    padding: 20px 0;
    width: 70%;
    margin: 0;
    vertical-align: middle;
    background-color: rgba(255, 255, 255, 0);
    position: relative;
    bottom: 90%;
    left: 3%;
    z-index: 1;
}

}*/

/*料金*/

.price_comment {
    margin: 20px 0 0 50px;
    font-size: 12px;
    color: #fff;
    z-index: 5;
    font-family: fot-rodin-pron, sans-serif;
}

h2.rec_price {
    margin: 17px 0 17px 50px;
    line-height: 24px;
    font-size: 20px;
}

h2.mix_price {
    margin: 80px 0 17.5px 25px;
    font-size: 20px;
}

.rec_back table {
    width: 88.5%;
    margin: 0 20px 0 50px;
    padding: 0;
    color: #fff;
    font-size: 12px;
    text-align: left;
    font-family: fot-rodin-pron, sans-serif;
    border-collapse: collapse;
}

.mix_back table {
    width: 88.5%;
    margin: 0 50px 0 25px;
    padding: 0;
    color: #fff;
    font-size: 12px;
    text-align: left;
    font-family: fot-rodin-pron, sans-serif;
    border-collapse: collapse;
}

.rec_back th, .mix_back th {
    padding-right: 5%;
}

.rec_back td, .mix_back td {
    padding-right: 5%;
}

.rec_back tr, .mix_back tr {
    border-bottom: 1px solid #fff;
}

.rec_back tr td:nth-child(3), .mix_back tr td:nth-child(3) {
    padding-right: 0;
    font-size: 10px;
}

.price_cap {
    margin: 20px 50px 0 50px;
    font-size: 10px;
}

/*お問合せ*/

.form_back {
    width: calc(100%-50px;);
    margin: 50px 0 0 20%;
}

dl {
    margin: 0;
    font-family: fot-rodin-pron, sans-serif;
    font-size: 14px;
    color: #fff;
}

dt {
    float: left;
    clear: both;
    padding: 1em;
    padding-left: 0;
}

dd {
    margin: 0;
    padding: 1em 0 1em 10em;
}

input, button, textarea, select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="text"] {
    width: 25%;
    min-width: 5em;
    border-bottom: 1px solid #fff;
    cursor: text;
    -webkit-transition: all .3s;
    transition: all .3s;
    color: #fff;
    font-size: 16px;
}

input[type="text"]:focus,
input[type="email"]:focus {
    width: 95%;
   border-bottom: 1px solid #00fff2;
    color: #fff;
    background-color: rgba(110, 110, 110, 0.5);
}

input[type="email"] {
    width: 55%;
    min-width: 10em;
    border-bottom: 1px solid #fff;
    cursor: text;
    -webkit-transition: all .3s;
    transition: all .3s;
    color: #fff;
    font-size: 16px;
}

input[type="radio"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 5px;
    border: solid 1px #fff;
    border-radius: 10px;
    line-height: 20px;
    position: relative;
    left: 0;
    top: 5px;
}

input[type="radio"]:checked {
    background-color: #00fff2;
}

textarea {
    width: 55%;
    min-width: 10em;
    height: 5em;
    border: 1px solid #fff;
    cursor: text;
    -webkit-transition: all .3s;
    transition: all .3s;
    color: #fff;
    font-size: 16px;
}

textarea:focus {
    width: 95%;
    height: 10em;
    border: 1px solid #00fff2;
    color: #fff;
    background-color: rgba(110, 110, 110, 0.5);
}

input[type="submit"] {
    display: block;
    padding: 5px 30px;
    margin: 20px 0 0 25%;
    background-color: #fff;
    text-align: center;
    font-family: fot-rodin-pron, sans-serif;
    font-size: 16px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
}

input[type="submit"]:hover {
    padding: 5px 30px;
    box-shadow: 0 0 10px 4px rgba(0, 234, 255, 0.8);
}

.tel_mail p {
    margin-bottom: 17px;
    font-size: 20px;
}

/*@media screen and (max-width:840px){
    .form_back {
    margin: 10px 0 0 20%;
}
    
    dt {
        padding: 5px 0 5px 0;
    }
    
    dd{
        padding: 0 0 0 10em;
    }
}*/

/*アクセス*/

address {
    font-style: normal;
    font-family: fot-rodin-pron, sans-serif;
    color: #fff;
    margin: 0 0 10px 50px;
}

.map_wrapper {
    display: flex;
}

.map_back p {
    margin: 0 0 0 50px;
}

iframe {
    width: 40%;
    margin: 0 3% 0 auto;
}

.way h3 {
    margin: 0;
    font-family: fot-rodin-pron, sans-serif;
    color: #fff;
}

.way p {
    margin:0 0 20px 0;
    font-size: 10px;
}

.way {
    margin: 0;
    padding: 55px 0 10px 20px;
    background-color: rgba(0, 0, 0, 0.65);
}