/*
Theme Name: Musiksaal
Author: 株式会社ドルフィンズ
Author URI: https://dolphins.ne.jp/
Version: 1.0
*/

@charset "utf-8";
@font-face {
font-family: "Montserrat";
src: url('lib/font/Montserrat-VariableFont_wght.ttf') format("truetype");
}
@font-face {
font-family: "Shippori Mincho";
src: url("lib/font/ShipporiMincho-SemiBold.ttf") format("truetype");
}
@font-face {
font-family: "Noto Sans Regular JP";
src: url("lib/font/NotoSansJP-Regular.ttf") format("truetype");
}

/* =reset
--------------------------------------------------------- */
html,body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
p,form,fieldset,legend,a,em,address,img {
font-weight: normal;
font-size: 100%;
margin: 0;
padding: 0;
border: none;
text-align: left;
line-height: 1;
list-style-type: none;
font-family: "Noto Sans Regular JP", sans-serif;
}
input,textarea {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

img {
display:block;
}
/* 画面サイズ 〜959px*/
@media only screen and (max-width: 959px) {
img {
max-width: 100%;
height: auto;
width /***/:auto;
}
}

a {
opacity:1;
transition:.3s;
}
a:link {
color:#b1945d;
text-decoration: none;
line-height:150%;
}
a:visited {
color:#b1945d;
text-decoration: none;
}
a:hover {
color:#b1945d;
text-decoration: none;
opacity:0.5;
}

/* 画面サイズ 〜959px*/
@media screen and (max-width: 959px){
.brPc {display:none;}
.brSp {display:block;}
}
/* 画面サイズ 960px〜*/
@media screen and (min-width: 960px){
.brPc {display:block;}
.brSp {display:none;}
}

/* =framework
--------------------------------------------------------- */
body {
font-size: 16px;
margin: 0px;
padding: 0px;
text-align: center;
color:#e0e0e0;
background:#0d0d0d;
}
#skipNav {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
}
#mainCont {
width:80vw;
margin:0 auto;
padding:100px 0 80px;
}

/* 画面サイズ 480px〜*/
@media only screen and (min-width: 480px) {
#mainCont {
padding:150px 0 100px;
}
}

/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#mainCont {
width:960px;
margin:0 auto;
padding:80px 0 120px;
}
}

/* 画面サイズ 1400px〜*/
@media only screen and (min-width: 1400px) {
#mainCont {
width:1100px;
}
}

/* =object
--------------------------------------------------------- */
h1 {
font-size: 150%;/* 24px */
/*font-size: 113%;*//* 18px */
line-height:150%;
margin:0 0 20px;
color:#e0e0e0;
font-family: "Shippori Mincho", serif;
letter-spacing: 0.05em;
}
h2 {
font-size: 100%;/* 16px */
line-height:150%;
margin:0 0 15px;
color:#e0e0e0;
font-family: "Shippori Mincho", serif;
letter-spacing: 0.05em;
}
p {
font-size: 75%;/* 12px */
line-height:180%;
margin:0 0 25px;
}
.english {
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
}

.gold {
color:#b1945d;
}

.alignCenter {
text-align:center;
}
.alignRight {
text-align:right;
}
.alignCenter img {
margin:0 auto;
}
.alignRight img {
margin:0 0 0 auto;
}

.mgn0{
margin-bottom:0px !important;
}
.mgn10{
margin-bottom:10px !important;
}
.mgn20{
margin-bottom:20px !important;
}
.mgn30{
margin-bottom:30px !important;
}
.mgn40{
margin-bottom:40px !important;
}
.mgn50{
margin-bottom:50px !important;
}
.mgn60{
margin-bottom:60px !important;
}

/* imghover */
a.imghover img {
transition: .3s;
}
a.imghover img:hover {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}

/* underline */
a.underline {
position: relative;
}
a.underline:hover {
opacity:1;
}
a.underline::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 1px;
background: #b1945d;
bottom: -3px;
transform: scale(0, 1);
transform-origin: right top;
transition: transform 0.1s;
}
a.underline:hover::after {
transform: scale(1, 1);
transform-origin: left top;
}

/* viewMore */
.viewMore {
text-align:center;
font-size: 88%;/* 14px */
}
.viewMore a{
display:inline-block;
padding:10px 20px;
background:#3f322a;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
border-radius: 100px;
}
.viewMore a:hover{
color:#0d0d0d;
background:#b1945d;
opacity:1;
}

/* fade_in */
.fade_in {
transition: 1.5s ease-in-out;
transform: translateY(15px);
opacity: 0;
}
.fade_in.on {
transform: translateY(0);
opacity: 1;
}

/* fade_in_img */
.fade_in_img {
transition: 1.5s ease-in-out;
transform: scale(0.9, 0.9);
opacity: 0;
}
.fade_in_img.on {
transform: scale(1, 1);
opacity: 1;
}

/* comming_soon */
.comming_soon {
position: relative;
min-height:60vh;
}
.comming_soon .text{
position:absolute;
top:50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
right:0;
left:0;
margin:auto;
text-align:center;
}
.comming_soon h1{
font-size: 150%;/* 24px */
text-align:center;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
}

/* 画面サイズ 480px〜*/
@media only screen and (min-width: 480px) {
h1 {
font-size: 175%;/* 28px */
/*font-size: 125%;*//* 20px */
margin:0 0 30px;
}
h2 {
font-size: 125%;/* 20px */
}
p {
font-size: 82%;/* 13px */
margin:0 0 30px;
}
}

/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
h1 {
margin:0 0 40px;
}
h2 {
margin:0 0 30px;
}
p {
font-size: 88%;/* 14px */
}
.comming_soon h1{
font-size: 175%;/* 28px */
}

/* viewMore */
.viewMore {
text-align:right;
}
}

/* 画面サイズ 1400px〜*/
@media only screen and (min-width: 1400px) {
}

/* =index
--------------------------------------------------------- */
#index #keyvisual{
position: relative;
}

#index #keyvisual .catchCopy{
width:80vw;
position:absolute;
top:50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
right:0;
left:0;
margin:auto;
text-align:center;
z-index:11;
}
#index #keyvisual .catchCopy h1{
font-size: 138%;/* 22px */
color:#e0e0e0;
text-align:center;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
margin:0 0 20px;
}
#index #keyvisual .catchCopy .btnBookNow{
width:80vw;
margin:0 auto;
background:url("lib/images/arrow_white.svg") no-repeat 0 50%;
background-size: 14vw;
}

#index #keyvisual .catchCopy .btnBookNow a{
display:block;
width:48vw;
border:1px solid #e0e0e0;
font-size: 100%;/* 16px */
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-align:center;
margin:0 auto;
padding:10px 0;
color:#e0e0e0;
border-radius: 100px;
transition:0.5s;
}
#index #keyvisual .catchCopy .btnBookNow a:visited {
color:#e0e0e0;
}
#index #keyvisual .catchCopy .btnBookNow a:hover {
opacity:0.5;
}

#index #keyvisual ul.image{
height: 100vh;
overflow: hidden;
position: relative;
}
#index #keyvisual ul.image li{
width: 100%;
height: 100vh;
z-index:10;
opacity: 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
-webkit-animation: anime 24s 0s infinite;
animation: anime 24s 0s infinite;
}
#index #keyvisual ul.image li:nth-of-type(2) {
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
#index #keyvisual ul.image li:nth-of-type(3) {
-webkit-animation-delay: 16s;
animation-delay: 16s;
}

#index #keyvisual .scroll{
width:80vw;
position:absolute;
bottom:0;
right:0;
left:0;
margin:0 auto;
font-size: 82%;/* 13px */
color:#e0e0e0;
text-align:center;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.1em;
padding:0 0 35px;
background:url("lib/images/arrow2.svg") no-repeat 50% 50%;
background-size: 10px;
z-index:11;
}

/* =「#keyvisual」のkeyframes anime */
@keyframes anime {
0% {/* 0秒 */
opacity: 0;
}
16% {/* 約4秒後 */
opacity: 1;
}
33% {/* 約8秒後 */
opacity: 1;
}
50% {/* 12秒後 */
opacity: 0;
z-index:9;
}
100% {/* 24秒後 */
transform: scale(1.12) ;
opacity: 0;
}
}

#index #indexEventSpace{
width:80vw;
margin:0 auto;
padding:12vh 0 10vh;
}
#index #indexEventSpace .text{
margin:0 0 5vh;
}
#index #indexEventSpace .image{
width:75vw;
margin:0 auto 5vh;
}
#index #indexEventSpace .image .photo1{
width:75vw;
margin:0 0 3vh;
}
#index #indexEventSpace .image .photo2{
width:50vw;
margin:0 auto 3vh;
}
#index #indexEventSpace .image .photo3{
width:75vw;
}

#index #indexEvent{
padding:8vh 0;
background:url("lib/images/background_texture_sp.jpg") no-repeat 50% 50%;
background-size: cover;
}
#index #indexEvent h1{
font-size: 150%;/* 24px */
margin:0 0 20px;
color:#b1945d;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-align:center;
}
#index #indexEvent .eventList{
width:80vw;
margin:0 auto;
position: relative;
}
#index #indexEvent .eventList ul{
}
#index #indexEvent .eventList ul li{
width:55vw;
margin:0 auto;
}
#index #indexEvent .eventList ul li:nth-child(2){
display:none;
}
#index #indexEvent .eventList ul li:nth-child(3){
display:none;
}
#index #indexEvent .eventList ul li:nth-child(4){
display:none;
}
#index #indexEvent .eventList ul li img{
width:55vw;
margin:0 0 10px;
opacity:1;
transition:.3s;
}
#index #indexEvent .eventList ul li a{
font-size: 82%;/* 13px */
line-height:180%;
}
#index #indexEvent .eventList ul li a:hover img{
opacity:0.5;
}
#index #indexEvent .eventList ul li a:link {
color:#e0e0e0;
}
#index #indexEvent .eventList ul li a:visited {
color:#e0e0e0;
}
#index #indexEvent .eventList ul li a:hover {
color:#e0e0e0;
}
#index #indexEvent .eventList .prev{
position:absolute;
top:50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
left:0;
width:22px;
height:22px;
background:url("lib/images/prev.svg") no-repeat 50% 50%;
background-size: cover;
overflow: hidden;
}
#index #indexEvent .eventList .prev a{
display:block;
width:22px;
height:22px;
opacity:0;
}
#index #indexEvent .eventList .next{
position:absolute;
top:50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
right:0;
width:22px;
height:22px;
background:url("lib/images/next.svg") no-repeat 50% 50%;
background-size: cover;
overflow: hidden;
}
#index #indexEvent .eventList .next a{
display:block;
width:22px;
height:22px;
opacity:0;
}

#index #indexPrice{
width:80vw;
margin:0 auto;
padding:12vh 0 10vh;
}
#index #indexPrice h1{
font-size: 150%;/* 24px */
margin:0 0 20px;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-align:center;
}
#index #indexPrice .priceList {
}
#index #indexPrice .priceList dl {
padding:20px 0;
border-bottom:1px solid #555555;
}
#index #indexPrice .priceList dl:first-child {
border-top:1px solid #555555;
}
#index #indexPrice .priceList dl:last-child {
margin:0 0 30px;
}
#index #indexPrice .priceList dl dt {
font-size: 100%;/* 16px */
text-align:center;
margin:0 0 10px;
}
#index #indexPrice .priceList dl dd {
font-size: 100%;/* 16px */
text-align:center;
}

#index #indexOccasions{
position: relative;
width: 100%;
min-height:90vh;
/*height: 100vh;*/
background-image: url('lib/images/bg_occasions.jpg?version=20251110');
background-repeat: repeat-x;
background-size: cover;
background-position: 0 0;
animation-name: slide_img;
animation-duration: 400s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes slide_img {
100% {
background-position: -10000px 0;
}
}

#index #indexOccasions .float{
position:absolute;
top:50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
left:0;
right:0;
width:70vw;
margin:0 auto;
}
#index #indexOccasions .float .box{
margin:0 0 30px;
padding:5vh 0;
background:url("lib/images/background_texture_sp.jpg") no-repeat 50% 50%;
background-size: cover;
}
#index #indexOccasions .float .box h1{
font-size: 150%;/* 24px */
margin:0 0 20px;
color:#b1945d;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-align:center;
}
#index #indexOccasions .float .box .inner{
width:55vw;
margin:0 auto;
}
#index #indexOccasions .float .box .inner h2{
font-size: 88%;/* 14px */
margin:0 0 10px;
}
#index #indexOccasions .float .box .inner .left li,
#index #indexOccasions .float .box .inner .right li {
font-size: 94%;/* 15px */
line-height:130%;
color:#e0e0e0;
font-family: "Shippori Mincho", serif;
letter-spacing: 0.05em;
padding:8px 0;
border-bottom:1px solid #555555;
}
#index #indexOccasions .float .box .inner .left li:first-child {
border-top:1px solid #555555;
}

#index #indexAccess{
width:80vw;
margin:0 auto;
padding:12vh 0 10vh;
}
#index #indexAccess h1{
font-size: 150%;/* 24px */
margin:0 0 20px;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-align:center;
}
#index #indexAccess .inner .text{
margin:0 0 30px;
}
#index #indexAccess .inner .map{
margin:0 0 30px;
}
#index #indexAccess .inner .text dl{
padding:20px 0;
border-bottom:1px solid #555555;
}
#index #indexAccess .inner .text dl:first-child{
border-top:1px solid #555555;
}
#index #indexAccess .inner .text dl:after {
content: "";
display: block;
clear: both;
}
#index #indexAccess .inner .text dl dt{
float:left;
width:25vw;
font-size: 88%;/* 14px */
line-height:150%;
}
#index #indexAccess .inner .text dl dd{
float:right;
width:55vw;
font-size: 88%;/* 14px */
line-height:150%;
}
#index #indexAccess .inner .map iframe{
width:80vw;
height:80vw;
}

#index #indexBooking{
padding:15vh 0 20vh;
background:url("lib/images/bg_booking_sp.jpg") no-repeat 50% 50%;
background-size: cover;
}
#index #indexBooking .inner{
width:90vw;
margin:0 auto;
}
#index #indexBooking .inner h2{
text-align:center;
}
#index #indexBooking .inner .btnBooking{
width:90vw;
margin:0 auto;
background:url("lib/images/arrow.svg") no-repeat 0 50%;
background-size: 14vw;
}
#index #indexBooking .inner .btnBooking a{
display:block;
width:58vw;
font-size: 100%;/* 16px */
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-align:center;
margin:0 auto;
padding:10px 0;
color:#ffffff;
background:#b1945d;
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.80);
}
#index #indexBooking .inner .btnBooking a img{
display:inline-block;
width:24px;
margin:0 10px 0 0;
position:relative;
top:5px;
}
#index #indexBooking .inner .btnBooking a:hover {
background:#c4a771;
opacity:1;
}


/* 画面サイズ 480px〜*/
@media only screen and (min-width: 480px) {
#index #keyvisual .catchCopy h1{
font-size: 150%;/* 24px */
margin:0 0 30px;
}
#index #keyvisual .catchCopy .btnBookNow{
width:60vw;
background-size: 10vw;
}
#index #keyvisual .catchCopy .btnBookNow a{
width:36vw;
font-size: 113%;/* 18px */
padding:15px 0;
}
#index #keyvisual .scroll{
font-size: 88%;/* 14px */
padding:0 0 40px;
background-size: 13px;
}

#index #indexEventSpace .image{
width:80vw;
margin:0 auto 5vh;
padding:0 0 35vw;
position: relative;
}
#index #indexEventSpace .image .photo1{
width:66vw;
margin:0 auto;
}
#index #indexEventSpace .image .photo2{
width:30vw;
margin:0;
position:absolute;
top:34vw;
left:0;
z-index:2;
transition-delay: 0.5s;
}
#index #indexEventSpace .image .photo3{
width:45vw;
margin:0;
position:absolute;
top:49vw;
right:0;
z-index:3;
transition-delay: 1s;
}
#index #indexEventSpace .text div{
transition-delay: 0.5s;
}

#index #indexEvent{
padding:6vh 0;
background:url("lib/images/background_texture_tablet.jpg") no-repeat 50% 50%;
}
#index #indexEvent h1{
font-size: 163%;/* 26px */
margin:0 0 50px;
}
#index #indexEvent .eventList ul {
}
#index #indexEvent .eventList ul:after {
content: "";
display: block;
clear: both;
}
#index #indexEvent .eventList ul li{
float:left;
width:24vw;
margin:0 4vw 0 0;
}
#index #indexEvent .eventList ul li:nth-child(2){
display:block;
}
#index #indexEvent .eventList ul li:nth-child(3){
display:block;
margin:0 0 0 0;
}
#index #indexEvent .eventList ul li img{
width:24vw;
}
#index #indexEvent .eventList .prev{
position:absolute;
top:-45px;
left:auto;
right:60px;
width:24px;
height:24px;
-webkit-transform: translateY(0); /* Safari用 */
transform: translateY(0);
}
#index #indexEvent .eventList .prev a{
width:24px;
height:24px;
}
#index #indexEvent .eventList .next{
position:absolute;
top:-45px;
right:10px;
width:24px;
height:24px;
-webkit-transform: translateY(0); /* Safari用 */
transform: translateY(0);
}
#index #indexEvent .eventList .next a{
width:24px;
height:24px;
}

#index #indexPrice h1{
font-size: 163%;/* 26px */
margin:0 0 30px;
}
#index #indexPrice .priceList dl {
}
#index #indexPrice .priceList dl:after {
content: "";
display: block;
clear: both;
}
#index #indexPrice .priceList dl dt {
float:left;
width:38vw;
font-size: 113%;/* 18px */
text-align:left;
margin:0 0 0;
}
#index #indexPrice .priceList dl dd {
float:right;
width:38vw;
font-size: 113%;/* 18px */
text-align:right;
}

#index #indexOccasions .float{
width:55vw;
}
#index #indexOccasions .float .box{
margin:0 0 50px;
background:url("lib/images/background_texture_tablet.jpg") no-repeat 50% 50%;
}
#index #indexOccasions .float .box h1{
font-size: 163%;/* 26px */
}
#index #indexOccasions .float .box .inner{
width:40vw;
}
#index #indexOccasions .float .box .inner h2{
font-size: 100%;/* 16px */
margin:0 0 20px;
}
#index #indexOccasions .float .box .inner .left li,
#index #indexOccasions .float .box .inner .right li {
font-size: 113%;/* 18px */
padding:12px 0;
}

#index #indexAccess h1{
font-size: 163%;/* 26px */
margin:0 0 30px;
}
#index #indexAccess .inner .map{
margin:0 0 50px;
transition-delay: 0.5s;
}
#index #indexAccess .inner .text dl dt{
width:20vw;
}
#index #indexAccess .inner .text dl dd{
width:60vw;
}

#index #indexBooking .inner{
width:70vw;
}
#index #indexBooking .inner .btnBooking{
width:70vw;
background-size: 10vw;
}
#index #indexBooking .inner .btnBooking a{
width:48vw;
font-size: 113%;/* 18px */
padding:15px 0;
}
#index #indexBooking .inner .btnBooking a img{
width:27px;
}
}

/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#index #keyvisual .catchCopy{
width:960px;
}
#index #keyvisual .catchCopy h1{
font-size: 175%;/* 28px */
}
#index #keyvisual .catchCopy .btnBookNow{
width:360px;
background-size: 60px;
}
#index #keyvisual .catchCopy .btnBookNow a{
width:215px;
font-size: 125%;/* 20px */
padding:12px 0;
}
#index #keyvisual .scroll{
width:960px;
}

#index #indexEventSpace{
width:960px;
margin:0 auto;
padding:180px 0;
}
#index #indexEventSpace:after {
content: "";
display: block;
clear: both;
}
#index #indexEventSpace .text{
float:right;
width:350px;
margin:0;
}
#index #indexEventSpace .image{
float:left;
width:550px;
margin:0;
padding:0 0 230px;
}
#index #indexEventSpace .image .photo1{
width:420px;
}
#index #indexEventSpace .image .photo2{
width:220px;
top:210px;
left:0;
}
#index #indexEventSpace .image .photo3{
width:300px;
top:310px;
right:0;
}

#index #indexEvent{
padding:70px 0;
background:url("lib/images/background_texture_pc.jpg") no-repeat 50% 50%;
background-size: cover;
}
#index #indexEvent h1{
font-size: 175%;/* 28px */
}
#index #indexEvent .eventList{
width:960px;
}
#index #indexEvent .eventList ul li{
width:200px;
margin:0 53px 0 0;
}
#index #indexEvent .eventList ul li:nth-child(2){
margin:0 53px 0 0;
}
#index #indexEvent .eventList ul li:nth-child(3){
margin:0 53px 0 0;
}
#index #indexEvent .eventList ul li:nth-child(4){
display:block;
margin:0 0 0 0;
}
#index #indexEvent .eventList ul li img{
width:200px;
}

#index #indexPrice{
width:660px;
padding:170px 0;
}
#index #indexPrice h1{
font-size: 175%;/* 28px */
margin:0 0 50px;
}
#index #indexPrice .priceList dl dt {
width:320px;

}
#index #indexPrice .priceList dl dd {
width:320px;
}

#index #indexOccasions{
min-height:0;
padding:250px 0 200px;
/*position:static;*/
}
#index #indexOccasions .float{
position:static;
top:auto;
-webkit-transform: translateY(0); /* Safari用 */
transform: translateY(0);
left:auto;
right:auto;
width:960px;
margin:0 auto;
}
#index #indexOccasions .float .box{
padding:55px 0;
background:url("lib/images/background_texture_pc.jpg") no-repeat 50% 50%;
}
#index #indexOccasions .float .box h1{
font-size: 175%;/* 28px */
}
#index #indexOccasions .float .box .inner{
width:880px;
}
#index #indexOccasions .float .box .inner:after {
content: "";
display: block;
clear: both;
}
#index #indexOccasions .float .box .inner h2{
font-size: 113%;/* 18px */
}
#index #indexOccasions .float .box .inner .left{
float:left;
width:420px;
}
#index #indexOccasions .float .box .inner .right{
float:right;
width:420px;
}
#index #indexOccasions .float .box .inner .left li:first-child,
#index #indexOccasions .float .box .inner .right li:first-child {
border-top:1px solid #555555;
}
#index #indexOccasions .float .viewMore {
text-align:center;
}

#index #indexAccess{
width:960px;
margin:0 auto;
padding:170px 0;
}
#index #indexAccess h1{
font-size: 175%;/* 28px */
margin:0 0 50px;
}
#index #indexAccess .inner{
}
#index #indexAccess .inner:after {
content: "";
display: block;
clear: both;
}
#index #indexAccess .inner .text{
float:left;
width:360px;
margin:0 0 50px;
}
#index #indexAccess .inner .map{
float:right;
width:520px;
}
#index #indexAccess .inner .text dl dt{
width:70px;
}
#index #indexAccess .inner .text dl dd{
width:280px;
}
#index #indexAccess .inner .map iframe{
width:520px;
height:360px;
}
#index #indexAccess .viewMore {
text-align:center;
}

#index #indexBooking{
padding:180px 0 240px;
background:url("lib/images/bg_booking_pc.jpg") no-repeat 50% 50%;
background-size: cover;
}
#index #indexBooking .inner{
width:960px;
}
#index #indexBooking .inner .btnBooking{
width:740px;
background-size: 60px;
}
#index #indexBooking .inner .btnBooking a{
width:585px;
padding:25px 0;
}
}

/* 画面サイズ 1400px〜*/
@media only screen and (min-width: 1400px) {
#index #indexEventSpace{
width:1100px;
}
#index #indexEventSpace .text{
width:390px;
}
#index #indexEventSpace .image{
width:650px;
padding:0 0 230px;
}
#index #indexEventSpace .image .photo1{
width:480px;
}
#index #indexEventSpace .image .photo2{
width:270px;
top:240px;
}
#index #indexEventSpace .image .photo3{
width:350px;
top:350px;
}

#index #indexEvent .eventList{
width:1100px;
}
#index #indexEvent .eventList ul li{
width:228px;
margin:0 62px 0 0;
}
#index #indexEvent .eventList ul li:nth-child(2){
margin:0 62px 0 0;
}
#index #indexEvent .eventList ul li:nth-child(3){
margin:0 62px 0 0;
}
#index #indexEvent .eventList ul li:nth-child(4){
}
#index #indexEvent .eventList ul li img{
width:228px;
}

#index #indexOccasions .float{
width:1100px;
}
#index #indexOccasions .float .box .inner{
width:1020px;
}
#index #indexOccasions .float .box .inner .left{
width:490px;
}
#index #indexOccasions .float .box .inner .right{
width:490px;
}

#index #indexAccess{
width:1100px;
}
#index #indexAccess .inner .text{
width:380px;
}
#index #indexAccess .inner .map{
width:640px;
}
#index #indexAccess .inner .text dl dt{
width:80px;
}
#index #indexAccess .inner .text dl dd{
width:290px;
}
#index #indexAccess .inner .map iframe{
width:640px;
}
}

/* =navigation
--------------------------------------------------------- */

#navigation {
display:none;
}

#navigationSp {
display:block;
}
#navigationSp .logo {
position: absolute;
top: 20px;
left: 20px;
width:35vw;
z-index: 97;
}
#navigationSp a:hover {
opacity: 1;
}
#navigationSp .navToggle {
display: block;
position: fixed;
right: 15px;
top: 15px;
width: 30px;
height: 21px;
cursor: pointer;
z-index: 100;
}
#navigationSp .navToggle span {
display: block;
position: absolute;
width: 30px;
border-bottom: solid 1px #e0e0e0;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
#navigationSp .navToggle span:nth-child(1) {
top: 0;
}
#navigationSp .navToggle span:nth-child(2) {
top: 10px;
}
#navigationSp .navToggle span:nth-child(3) {
top: 20px;
}

/* 最初のspanをマイナス45度に */
#navigationSp .navToggle.active span:nth-child(1) {
top: 10px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* 2番目のspanを45度に */
#navigationSp .navToggle.active span:nth-child(2) {
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
/* 3番目のspanを45度に */
#navigationSp .navToggle.active span:nth-child(3) {
top: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}

#navigationSp .globalMenuBg {
position: fixed;
z-index: 98;
top: 0;
left: 0;
width: 100%;
height:100%;
background:#0d0d0d;
opacity: 0;
display: none; 
}
#navigationSp nav.globalMenu {
position: fixed;
width: 65vw;
z-index: 99;
top:50%;
-webkit-transform: translateY(-50%); /* Safari用 */
transform: translateY(-50%);
right:0;
left:0;
margin:auto;
text-align:center;
opacity: 0;
display: none; 
}
#navigationSp nav.globalMenu ul {
margin:0 0 30px;
}
#navigationSp nav.globalMenu ul li {
font-size: 100%;/* 16px */
border-bottom: 1px solid #555555;
}
#navigationSp nav.globalMenu ul li:first-child {
border-top: 1px solid #555555;
}
#navigationSp nav.globalMenu ul li a {
display: block;
padding: 0.7em 0;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-align:center;
}
#navigationSp nav.globalMenu ul li a:link {
color:#e0e0e0;
}
#navigationSp nav.globalMenu ul li a:visited {
color:#e0e0e0;
}
#navigationSp nav.globalMenu ul li a:hover {
color:#b0935d;
opacity:1;
}
#navigationSp nav.globalMenu h2 {
font-size: 88%;/* 14px */
text-align:center;
margin:0 0 10px;
}
#navigationSp nav.globalMenu .booking {
margin:0 0 30px;
}
#navigationSp nav.globalMenu .booking a{
display:block;
font-size: 100%;/* 16px */
line-height:200%;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
text-align:center;
margin:0 auto;
padding:8px 0;
color:#ffffff;
background-color:#b0935d;
/*background:#b1945d;
box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.80);*/
}
#navigationSp nav.globalMenu .booking a img{
display:inline-block;
width:25px;
margin:0 10px 0 0;
position:relative;
top:5px;
}
#navigationSp nav.globalMenu .booking a:hover{
background-color:#3f322a;
}
#navigationSp nav.globalMenu .instagram {
display:inline;
width:25px;
margin:0 20px;
}
#navigationSp nav.globalMenu .x {
display:inline;
width:25px;
margin:0 20px;
}

/* このクラスをjQueryで付与・削除する */
#navigationSp nav.globalMenu.active {
display: block; 
animation-name: fadeInMenu;
animation-fill-mode:forwards;
animation-duration:1s;
}
#navigationSp .globalMenuBg.active {
display: block; 
animation-name: fadeInBg;
animation-fill-mode:forwards;
animation-duration:1s;
}

/*フェードインアニメ*/
@keyframes fadeInMenu{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInBg{
0% {
opacity: 0;
}
100% {
opacity: 0.95;
}
}

/* 画面サイズ 480px〜*/
@media only screen and (min-width: 480px) {
#navigationSp .logo {
top: 30px;
left: 30px;
width:20vw;
}
#navigationSp .navToggle {
right:20px;
top: 20px;
width: 38px;
height: 28px;
}
#navigationSp .navToggle span {
width: 38px;
}
#navigationSp .navToggle span:nth-child(1) {
top: 0;
}
#navigationSp .navToggle span:nth-child(2) {
top: 14px;
}
#navigationSp .navToggle span:nth-child(3) {
top: 28px;
}

/* 最初のspanをマイナス45度に */
#navigationSp .navToggle.active span:nth-child(1) {
top: 14px;
}
/* 2番目のspanを45度に */
#navigationSp .navToggle.active span:nth-child(2) {
top: 14px;
}
/* 3番目のspanを45度に */
#navigationSp .navToggle.active span:nth-child(3) {
top: 14px;
}

#navigationSp nav.globalMenu {
width: 45vw;
}
#navigationSp nav.globalMenu h2 {
font-size: 100%;/* 16px */
}
}

/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#navigationSp {
display:none;
}

#navigation {
display:block;
width:960px;
padding:30px 0;
margin:0 auto;
}
#navigation:after {
content: "";
display: block;
clear: both;
}
#index #navigation {
position:absolute;
top:0;
left:0;
right:0;
z-index:11;
}
#navigation .logo {
float:left;
width:160px;
}
#navigation ul.menuPc {
float:right;
width:720px;
}
#navigation ul.menuPc li {
display:inline-block;
font-size: 94%;/* 15px */
line-height:100%;
margin:0 23px 0 0;
}
#navigation ul.menuPc li:last-child {
margin:0 0 0 0;
}
#navigation ul.menuPc li a {
color:#e0e0e0;
font-family: "Montserrat", sans-serif;
font-weight: 400;
letter-spacing: 0.05em;
}
#navigation ul.menuPc li a:link {
color:#e0e0e0;
}
#navigation ul.menuPc li a:visited {
color:#e0e0e0;
}
#navigation ul.menuPc li a:hover {
color:#b0935d;
opacity:1;
}

#navigation ul.menuPc li.booking {
width:140px;
}
#navigation ul.menuPc li.booking a {
display:block;
padding:10px 0 10px 52px;
background-image:url("lib/images/icon_booking.svg");
background-repeat:no-repeat;
background-position: 20px 50%;
background-color:#3f322a;
background-size: 27px;
color:#b1945d;
}
#navigation ul.menuPc li.booking a:visited {
color:#b1945d;
}
#navigation ul.menuPc li.booking a:hover {
color:#3f322a;
opacity:1;
background-image:url("lib/images/icon_booking_black.svg");
background-color:#b0935d;
}
#navigation ul.menuPc li.instagram,
#navigation ul.menuPc li.x {
width:22px;
}
#navigation ul.menuPc li.instagram img,
#navigation ul.menuPc li.x img {
position:relative;
top:8px;
opacity:1;
transition:.3s;
}
#navigation ul.menuPc li.instagram img,
#navigation ul.menuPc li.x img {
position:relative;
top:8px;
opacity:1;
transition:.3s;
}
#navigation ul.menuPc li.instagram img:hover,
#navigation ul.menuPc li.x img:hover {
opacity:0.5;
}
}

/* 画面サイズ 1400px〜*/
@media only screen and (min-width: 1400px) {
#navigation {
width:1100px;
}
#navigation ul.menuPc {
width:860px;
}
#navigation ul.menuPc li {
margin:0 42px 0 0;
}
}

/* =page
--------------------------------------------------------- */

/* Access */
#access .accessBox .text{
margin:0 0 30px;
}
#access .accessBox .text dl{
padding:20px 0;
border-bottom:1px solid #555555;
}
#access .accessBox .text dl:first-child{
border-top:1px solid #555555;
}
#access .accessBox .text dl:after {
content: "";
display: block;
clear: both;
}
#access .accessBox .text dl dt{
float:left;
width:25vw;
font-size: 88%;/* 14px */
line-height:150%;
}
#access .accessBox .text dl dd{
float:right;
width:55vw;
font-size: 88%;/* 14px */
line-height:150%;
}
#access .accessBox .map iframe{
width:100%;
height:80vh;
}

/* form */
form.wpcf7-form {
background:#222222;
padding:50px 0 30px;
border-radius: 5px;
width:80vw;
margin:0 auto;
}
form.wpcf7-form p {
}
form.wpcf7-form p label {
}
form.wpcf7-form p label span.item {
display:block;
width:70vw;
color:#e0e0e0;
margin:0 auto 5px;
}
form.wpcf7-form p label span.wpcf7-form-control-wrap {
display:block;
width:70vw;
margin:0 auto;
}
form.wpcf7-form p label span.wpcf7-form-control-wrap input {
width:70vw;
border:1px solid #555555;
font-size: 100%;
background:#e0e0e0;
padding:8px 0;
border-radius: 3px;
}
form.wpcf7-form p label span.wpcf7-form-control-wrap textarea {
width:70vw;
height: 200px;
border:1px solid #555555;
font-size: 100%;
background:#e0e0e0;
padding:8px 0;
border-radius: 3px;
resize: none;
}
form.wpcf7-form p span.submit{
display:block;
padding:20px 0 0;
}
form.wpcf7-form p span.submit input{
display:block;
width:50vw;
border:1px solid #555555;
color:#e0e0e0;
font-size: 129%;/* 18px */
padding:15px 0;
text-align:center;
border-radius: 100px;
margin:0 auto;
background-color:#b1945d;
background-image:url("lib/images/arrow3.svg");
background-repeat:no-repeat;
background-position: 90% 50%;
background-size: 8px;
cursor:pointer;
transition:.5s;
}
form.wpcf7-form p span.submit input:hover{
background-position: 93% 50%;
}
form.wpcf7-form .wpcf7-not-valid-tip {
color:#ff6600;
}

/* 送信ボタン下完了時 */
.wpcf7 form.sent .wpcf7-response-output {
display:block;
width:70vw;
margin:0 auto 30px;
padding:30px 0;
border:0;
text-align:center;
}
/* 送信ボタン下未入力警告 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
display:block;
width:70vw;
margin:0 auto 30px;
padding:0;
border:0;
color:#ff6600;
line-height:150%;
text-align:center;
}

form.sent p {
display: none;
}

/* 画面サイズ 480px〜*/
@media only screen and (min-width: 480px) {
#access .accessBox .text dl dt{
width:20vw;
}
#access .accessBox .text dl dd{
width:60vw;
}
#access .accessBox .map iframe{
height:60vh;
}
}

/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#access .accessBox:after {
content: "";
display: block;
clear: both;
}
#access .accessBox .text{
float:left;
width:360px;
}
#access .accessBox .map{
float:right;
width:520px;
}
#access .accessBox .text dl dt{
width:80px;
}
#access .accessBox .text dl dd{
width:270px;
}
#access .accessBox .map iframe{
height:500px;
}

form.wpcf7-form {
width:900px;
}
form.wpcf7-form p {
width:800px;
margin:0 auto 30px;
}
form.wpcf7-form p label {
}
form.wpcf7-form p label:after {
content: "";
display: block;
clear: both;
}
form.wpcf7-form p label span.item {
float:left;
width:120px;
margin:0;
}
form.wpcf7-form p label span.wpcf7-form-control-wrap {
float:right;
width:630px;
margin:0;
}
form.wpcf7-form p label span.wpcf7-form-control-wrap input {
width:600px;
}
form.wpcf7-form p label span.wpcf7-form-control-wrap textarea {
width:600px;
height: 200px;
}
form.wpcf7-form p span.submit input{
width:300px;
background-position: 92% 50%;
}
form.wpcf7-form p span.submit input:hover{
background-position: 95% 50%;
}
/* 送信ボタン下完了時 */
.wpcf7 form.sent .wpcf7-response-output {
width:800px;
}
/* 送信ボタン下未入力警告 */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
width:800px;
}
}

/* 画面サイズ 1400px〜*/
@media only screen and (min-width: 1400px) {
#access .accessBox .text{
width:380px;
}
#access .accessBox .map{
width:640px;
}
#access .accessBox .text dl dt{
width:90px;
}
#access .accessBox .text dl dd{
width:280px;
}
#access .accessBox .map iframe{
width:640px;
}
}

/* =footer
--------------------------------------------------------- */
#footer {
}
#index #footer {
padding:120px 0 0;
}
#footer .inner {
width:80vw;
margin:0 auto;
padding:10vh 0 8vh;
border-top:1px solid #555555;
}
#footer .inner .logo {
width:40vw;
margin:0 auto 30px;
}
#footer .inner .address {
margin:0 0 30px;
}
#footer .inner .menuLeft {
width:80vw;
margin:0 auto;
border-top:1px solid #555555;
}
#footer .inner .menuCenter {
width:80vw;
margin:0 auto 30px;
}
#footer .inner .menuRight {
width:80vw;
margin:0 auto;
text-align:center;
}
#footer .inner .address p {
text-align:center;
margin:0 0 10px;
}
#footer .inner .address .sns {
text-align:center;
}
#footer .inner .address .sns li {
display:inline;
}
#footer .inner .address .sns li a {
display:inline-block;
width:22px;
margin:0 10px;
}
#footer .inner .menuLeft li,
#footer .inner .menuCenter li{
border-bottom:1px solid #555555;
}
#footer .inner .menuRight li {
display:inline-block;
margin:0 10px;
}
#footer .inner .menuLeft li a,
#footer .inner .menuCenter li a {
display:block;
padding:12px 0;
font-size: 100%;/* 16px */
line-height:100%;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
color:#e0e0e0;
text-align:center;
}
#footer .inner .menuRight li a {
font-size: 75%;/* 12px */
line-height:100%;
color:#e0e0e0;
}
#footer .inner .menuLeft li a:hover,
#footer .inner .menuCenter li a:hover,
#footer .inner .menuRight li a:hover {
color:#b0935d;
opacity:1;
}
#footer .copyright {
text-align:center;
margin:0 20px 20px;
font-size: 82%;/* 13px */
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
}

/* 画面サイズ 480px〜*/
@media only screen and (min-width: 480px) {
#footer .inner {
padding:10vh 0 8vh;
}
#footer .inner:after {
content: "";
display: block;
clear: both;
}
#footer .inner .logo {
width:25vw;
}
#footer .inner .menuLeft {
float:left;
width:37vw;
margin:0 0 30px;
}
#footer .inner .menuCenter {
float:right;
width:37vw;
margin:0 0 30px;
border-top:1px solid #555555;
}
#footer .inner .menuRight {
clear:both;
}
#footer .inner .address p {
margin:0 0 20px;
}
#footer .inner .address .sns li a {
width:26px;
margin:0 15px;
}
#footer .inner .menuLeft li,
#footer .inner .menuCenter li{
text-align:left;
}
#footer .inner .menuLeft li a,
#footer .inner .menuCenter li a {
padding:15px 0;
font-size: 113%;/* 18px */
text-align:left;
}
#footer .inner .menuRight li a {
font-size: 88%;/* 14px */
}
}

/* 画面サイズ 960px〜*/
@media only screen and (min-width: 960px) {
#footer {
width:92vw;
margin:0 auto;
border-top:1px solid #555555;
}
#index #footer {
margin:150px auto 0;
padding:0;
/*padding:150px 0 0;*/
}
#footer .inner {
width:960px;
margin:0 auto;
padding:40px 0;
border-top:0;
/*border-top:1px solid #555555;*/
}
#footer .inner .logo {
float:left;
width:180px;
margin:0 50px 0 0;
}
#footer .inner .address {
float:left;
width:280px;
/*margin:0 30px 0 0;*/
margin:0 210px 0 0;
}
#footer .inner .menuLeft {
float:left;
width:130px;
margin:0 10px 0 0;
border-top:0;
}
#footer .inner .menuCenter {
float:left;
width:100px;
/*margin:0 10px 0 0;*/
margin:0;
border-top:0;
}
#footer .inner .menuRight {
clear:both;
/*float:left;*/
/*width:170px;*/
/*clear:none;*/
margin:0;
text-align:left;
}
#footer .inner .address p {
font-size: 82%;/* 13px */
line-height:150%;
margin:0 0 20px;
text-align:left;
}
#footer .inner .address .sns {
text-align:left;
}
#footer .inner .address .sns li {
display:inline;
}
#footer .inner .address .sns li a {
display:inline-block;
width:26px;
margin:0 20px 0 0;
}
#footer .inner .menuLeft li,
#footer .inner .menuCenter li{
border-bottom:0;
margin:0 0 15px;
}
#footer .inner .menuRight li {
display:block;
margin:0 0 15px;
}
#footer .inner .menuLeft li a,
#footer .inner .menuCenter li a {
font-size: 100%;/* 16px */
line-height:100%;
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
color:#e0e0e0;
padding:0;
}
#footer .inner .menuRight li a {
}
#footer .copyright {
text-align:right;
font-size: 82%;/* 13px */
font-family: "Montserrat", sans-serif;
font-weight: 300;
letter-spacing: 0.05em;
}
}

/* 画面サイズ 1400px〜*/
@media only screen and (min-width: 1400px) {
#footer .inner {
width:1100px;
}
#footer .inner .address {
width:420px;
}
}