@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(max-width:959px){

	
/*STYLE*/
.pc {
  display:none;
}
.pcOnly{
	display: none;
}
.cts {
  width:90%;
  margin:0 auto;
  padding:50px 0 0;
}

.symbol {
  width:50px;
  margin:0 auto 10px;
}
.title {
  font-weight: bold;
  font-family: 'Playfair Display', serif,HGS明朝E,メイリオ,Meiryo,serif;
}
.maincopy {
  text-align:left;
  padding-bottom:30px;
}


/*COMMON*/	
body {
  background-color: #2D2D2D;	
}
p {
  font-size: 1em;
  line-height: 1.5em;
}
img {
  width:100%;
  height:auto;
}
h2 {
  text-align:center;
  padding-bottom:20px;
  color: #fff;
}
h2 span {
  font-size: 2em;
  letter-spacing: 0.1em;
}
h3 {
  font-size: 1.2em;
  text-align:center;
  padding-bottom:20px;
  color: #fff;
}
h4 {
  font-size: 1em;
  text-align: left;
  color: #fff;
}



/*GROBAL*/
.fixed {
  position:fixed;
  width:100%;
  height:100%;
}
.nav_btn {
  position:fixed;
  width:55px;
  height:55px;
  overflow:hidden;
  top:0;
  right:0;
  background:#000;
  cursor:pointer;
  display:flex;
  z-index:9999;
}
.nav_btn span {
  width:50%;
  height:3px;
  background:#fff;
  position:absolute;
  left:0;
  right:0;
  margin:auto;
}
.nav_btn span:nth-child(1) { top:15px; }
.nav_btn span:nth-child(2) { top:27.5px; }
.nav_btn span:nth-child(3) { top:40px; }

#grobal {
  position:fixed;
  width:100%;
  top:70px;
  left:0;
  right:0;
  margin:auto;
  z-index:999;
}
#grobal .nav_close {
  display:none;
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:#000;
  opacity:0;
  z-index:98;
  cursor:pointer;
}
#grobal .grobal_nav {
  display:none;
  position:relative;
  z-index:9999;
}
#grobal .grobal_nav .navs {
  width:90%;
  margin:auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
#grobal .grobal_nav .navs nav {
  width:48%;
  height:55px;
  background:rgba(0,0,0,0.8);
  margin-bottom:10px;
}
#grobal .grobal_nav .navs nav a {
  width:100%;
  height:100%;
  text-decoration:none;
  font-weight:normal;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:100%;
  line-height:100%;
  text-align:center;
}


	
/*ANIMATION*/
.marker_line {
  position:relative;
  font-size:110%;
  font-weight:bold;
}
.inviewTitleLine {
  width:0%;
  height:2px;
  background:#f50312;
  position:absolute;
  bottom:-10px;
  left:0;
  transition:1s;
}
.inviewTitleLineBK { 
  width:0%;
  height:2px;
  background:#000;
  position:absolute;
  bottom:-10px;
  left:0;
  transition:1s;
}
.inviewTitleLinePL { 
  width:0%;
  height:2px;
  background:#bc69bf;
  position:absolute;
  bottom:-10px;
  left:0;
  transition:1s;
}
.TitleLine {
  width:100%;
}



/*HEADER*/
header {
  width:100%;
  background:rgba(0,0,0,0.85);
  position:fixed;
  top:0;
  z-index:999;
}
header .header_cts {
  width:95%;
  height:55px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
header .header_cts .logo {
  width:230px;
}
header .header_cts .header_menu {
  display:none;
}



/*MV*/
.mv {
  width:100%;
  height:500px;
  position:relative;
}
.mv .opening-hour {
  position:absolute;
  background-color: #1F1F1F;
  right:20px;
  bottom:20px;
  z-index:99;
  -webkit-animation:cta_btn 1s ease infinite alternate;
  animation:cta_btn 1s ease infinite alternate;
  opacity:0.9;
  padding: 5px;
  color: #fff;
}
.mv .opening-box {
  padding: 20px;
  border: #bc69bf double 1px;
}
.mv .opening-hour .place {
  widows: 100%;
  font-size: 0.7em;
  background-color: #bc69bf;
  padding: 0.3em 1em;
  margin-bottom: 0.5em;
}
.mv .opening-hour .name {
  font-size: 1em;
  font-weight: bold;
  padding-bottom: 0.4em;
}
.mv .opening-hour .name span {
  font-size: 0.8em;
  font-weight: normal;
  letter-spacing: 0em;
  margin-right: 1em;
}
.mv .opening-hour .day {
  font-size: 0.8em;
}
.mv .opening-hour .time {
  font-size: 0.8em;
  padding-bottom: 0.5em;
}
.mv .opening-hour .caption {
  font-size: 0.7em;
}


	
/*LOUNGE*/
#lounge {
  padding-bottom: 40px;
  background-image: url("../img/lounge-img.png") ;
  background-repeat: repeat;
}
#lounge h2 {
}
#lounge h3 {
}
#lounge h4 {
  border-bottom: 1px #bc69bf dotted;
  padding-bottom: 0.5em;
  margin-bottom: 1em;		
}
#lounge .greeting {
  padding: 0;
  margin-bottom:30px;
}

#lounge .greeting .photo {
  padding: 0;
  margin: 0;
}

#lounge .greeting .text {
  width: 100%;
  text-align: left;
  padding: 2em 0;
}	
#lounge .greeting .text p {
  color: #FFF;
  line-height: 1.8em;
}
#lounge .rooms {
}
#lounge .rooms .room {
  background:#e7d0e8;
  width: auto;
  padding: 0 0 25px;
  margin-bottom:30px;
}
#lounge .rooms .room .photo {
  padding-bottom:20px;
}
#lounge .rooms .room .name {
  font-size: 1.2em;
  text-align: center;
  margin-bottom: 0.3em;
}
#lounge .rooms .room .kana {
  font-size: 0.8em;
  color: #bc69bf;
  text-align:center;
  padding-bottom: 20px;
}
#lounge .rooms .room .detail {
  font-size: 1em;
  line-height: 1.5em;
  width: 85%;
  margin:auto;
  color: #272727;
}


	
/*NEWS*/
#news {
  background-image: url("../img/price-img.png") ;
  background-repeat: repeat;
  background-color: #bc69bf;
  padding-bottom:70px;
}
#news h2 {
  color: #fff;
}
#news h3 {
  color: #fff;
}
#news .news_area {
  margin-bottom: 40px;
}
#news .news_area  .topics .topic {
  background:#ffff;
  border:#e1e1e1 1px solid;
  margin-bottom: 20px;
}
#news .news_area .topic {
  background:#ffff;
  border:#e1e1e1 1px solid;
  margin-bottom:15px;
  position:relative;
  padding: 15px 30px;
}
#news .news_area .topics .topic .topic_cts {
  display:flex;
  justify-content:space-between;
  margin-bottom: 15px;
}	
#news .news_area .topics .topic .box {
  align-items:center;
  padding: 3px 6px;
  margin-right: 12px;
  background-color: #f50312;
  font-size: 0.7em;
  font-weight: bold;
  color: #fff;
}
#news .news_area .topics .topic .date {
  font-size: 0.7em;
  padding: 3px;
  color: #666666;
}
#news .news_area .topics .text {
}
#news .news_area .topics .text .text_cts {
  font-family: 'Playfair Display', serif,HGS明朝E,メイリオ,Meiryo,serif;
  font-weight: bold;
  font-size: 1.2em;
  line-height: 1.5em;
  letter-spacing: 0em;
  margin-bottom: 0.5em;
}
#news .news_area .topics .text .date {
  font-size: 1em;
  color: #272727;
}	
#news .news_area .topics .text .jump {
  width: 100%;
  text-align: center;
  margin-top: 1em;
}
#news .news_area .topics .text a {
  background-color: #bc69bf;
  padding: 5px 3em;
  margin-top: 1em;
  border-radius: 100vh;
  font-size: 0.9em;
  color: #fff;
  text-align: center;
  transition: .6s;
}
#news .news_area .topics .text a:hover {
  background-color: #fff;
  border: #bc69bf solid 1px;
  color: #bc69bf;
}
#news .news_area .line { 
  width: 100%;
  padding: 0;
  margin: 0 0 40px 0;
}		
#news .line_btn {
  width:80%;
  margin:auto;
  text-align: center;
}
#news .line_btn a {
  display: inline-block;
  border: 2px solid #bc69bf;
  border-radius: 100vh;
  background-color: #000;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  padding: 16px 32px;
  transition: .6s;
}
#news .line_btn a:hover {
  background-color: #fff;
  border-color: #000;
  color: #000;
}
	
	
/*RESERVATION*/
#reservation {
  background: #f50312;
  padding-bottom: 40px;
  background-image: url("../img/reservation-img.png") ;
  background-repeat: repeat;
}
#reservation h2 {
  color:#fff;
}
#reservation h3 {
  color:#fff;
}
#reservation p {
  color:#fff;
  text-align: center;
}
#reservation .system {
  width: 100%;
  height: 800px;
  margin-bottom: 20px;
  background-color: #fff;
}
#reservation .tel {
  text-align: center;
}
#reservation .tel a {
  width: 240px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.2em;
  color: #fff;
  background-color: #bc69bf;
  border: 1px solid #bc69bf;
  border-radius: 100vh;
  transition: .6s;
  padding: 8px 0px 16px 0px;
}
#reservation .tel a:hover {
  background-color: #fff;
  border-color: ##bc69bf;
  color: #bc69bf;
}
	
/*SUPPLIMENT*/
#supplement {
  background-color: #d1d1d1;
  padding-bottom:40px;
  background-image: url("../img/supplement-img.png") ;
  background-repeat: repeat;
}
#supplement h2 {
  color:#323232;
}
#supplement h3 {
  color:#000;
}

#supplement .cta {
width:80%;
margin:auto;
  -webkit-animation:cta_btn 1s ease infinite alternate;
  animation:cta_btn 1s ease infinite alternate;
}
#supplement .cach {
  margin:auto;
  margin-bottom: 2em;
  text-align: left;
}


#supplement .items {
  justify-content:space-between;
}
#supplement .itemTitle {
  width: 100%;
  background:#bc69bf;
  padding: 0.4em;
  font-size: 1.2em;
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
  clear: both;
}
	
#supplement .itemWrap {
  width: 100%;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}	
#supplement .item p {
  display: block;
}	
#supplement .itemWrap .item {
  width:48%;
  padding-bottom:20px;
  text-align: center;
}
#supplement .itemWrap .point .item {
  font-size: 0.8em;
  letter-spacing: 0.2em;
  padding: 0.5em 0;
}
#supplement .shop-btn {
  font-size: 1.2em;
}

/*PRICE*/
#price {
  background-image: url("../img/price-img.png") ;
  background-repeat: repeat;
  background-color: #bc69bf;
  padding-bottom: 40px;
}
#price h2 {
}
#price h3 {
}
#price h4 {
  text-align: center;
  padding: 10px;
  background-color: #000;
  margin: 0;
  color: #FFF;
  letter-spacing: 0.2em;
  border-bottom: dotted 1px #FFF;
}
#price p {
  color: #fff;
}
#price .table {
  width: 100%;
  display: block;
  margin-bottom: 30px;
  padding: 0;
  background-color: #d7bad8;
}
#price .table .th {
  padding: 5px 5px 10px 5px;
  width: 100%;
  color: #fff;
  background-color: #1a061b;
}
#price .table .tr {
  display: block;
  width: 100%;
  border-bottom: dotted 1px #FFF;
}

#price .table .th, .table .td {
  display: block;
  border-bottom: none;
  text-align: center;
  font-size: 0.9em;
}
#price .table .td {
  padding: 10px 20px;
  color: #000;
}
#price .table .tr:first-of-type .th, .table .tr:first-of-type .td {
  padding-top: 15px;
}
#price	.table .caption {
  font-size: 0.8em;
}
#price .drink {
  margin: 0;
  background-color: #1a061b;
  padding: 0.5em;
  text-align: center;
  color: #fff;
  border-bottom: dotted 1px #FFF;
}
#price .annotation {
  margin: 0;
  background-color: #1a061b;
  padding: 0.5em 2em;
  font-size: 0.8em;
  text-align: center;
  color: #fff;
}
#price .menu {
  display: table;
  width: 100%;
  background-color: #d7bad8;
  padding: 0;
}
#price .menu .subtitle {
  display: block;
  background-color: #4e2650;
  color: #FFF;
  width: 100%;
}
#price .menu .tr .subtitle {
  display: block;
  background-color: #4e2650;
  color: #FFF;
  width: 100%;
}
#price .menu .tr {
  display: table-row;
  color: #fff;
}
#price .menu .th {
  padding: 5px 20px;
  width: 60%;
  background-color: #4e2650;
  color: #fff;
  font-size: 1em;
}
#price .menu .th, .menu .td {
  display: table-cell;
  border-bottom: none;
  font-size: 0.9em;
  border-bottom: dotted 1px #FFF;
}
#price .menu .td {
  color: #000;
  text-align: center;
}
#price .menu .tr:first-of-type .th, .menu .tr:first-of-type .td {
  padding-top: 15px;
}
#price	.menu .caption {
  font-size: 0.8em;
}
*/	


/*ACCESS*/
#access {
  padding-bottom: 40px;
  background-image: url("../img/access-img.png") ;
  background-repeat: repeat;
}
#access h3 {
}
#access h4 {
  color: #FFF;
  border-bottom: 1px #bc69bf dotted;
  padding-bottom: 0.5em;
  margin-bottom: 1em;
}
#access p {
color:#fff;
display:flex;
}
#access p span {
 color: #bc69bf;
}

#access .map {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}
#access .address {
  color:#fff;
}
#access .access {
  padding:50px 0;
}
#access .access .titles {
  display:flex;
  align-items:center;
  border-bottom: 1px #bc69bf dotted;
  padding-bottom:7px;
  margin-bottom:10px;
}

#access .access .titles .icon {
width:30px;
margin-right:7px;
}

#access .access .titles .title {
font-weight:bold;
color:#fff;
}

#access .access .train {
width:100%;
padding-bottom:50px;
}

#access .access .taxi {
  width:100%;
}

#access .spot {
  justify-content:space-between;
}	
#access .spot p {
  display: block;
}
#access .spotTitle {
  width: 100%;
  background:#bc69bf;
  padding: 0.4em;
  font-size: 1.2em;
  text-align: center;
  margin-bottom: 30px;
  clear: both;
}
#access .spotWrap {
  width: 100%;
  display:flex;
  justify-content:space-between;
flex-wrap:wrap;
}	
#access .spotWrap .point {
  width:48%;
  padding-bottom:20px;
  text-align: center;
}

#access .spotWrap .point .item {
  font-size: 0.8em;
  letter-spacing: 0.2em;
  padding: 0.5em 0;
}


/*CONTACT*/
#contact {
  background-color: #d1d1d1;
  padding-bottom: 40px;
  background-image: url("../img/contact-img.png") ;
  background-repeat: repeat;
}
#contact h2 {
  color:#323232;
}
#contact h3 {
  color:#000;
}
#contact .cta {
width:80%;
margin:auto;
-webkit-animation:cta_btn 1s ease infinite alternate;
animation:cta_btn 1s ease infinite alternate;
}
#contact .cta a:hover {
opacity:0.7;
}
#contact .calam {
  width:80%;
  margin:auto;
}
#contact .calam .titles {
  display:flex;
  align-items:center;
  margin: 50px 0;
}
#contact .calam .titles .title {
  font-size: 1em;
  position:absolute;
  text-align:center;
  left:0;
  right:0;
}
#contact .calam .titles .title span {
  background: #d1d1d1;
  padding: 0 30px;
}
#contact .calam .title_line {
  width: 100%;
  height:1px;
  background:#323232;
  position:relative;
}
#contact .calam .lines {
  display:flex;
  justify-content:center;
}
#contact .calam .lines .line {
  width: 80px;
  margin-right:30px;
}

#contact .calam .lines .line_qr {
  width: 80px;
}
#contact .calam .maincopy {
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  line-height: 1.5em;
  margin: 30px 0;
}
#contact .tel,.form {
  text-align: center;
}
#contact .tel a {
  width: 240px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.2em;
  color: #fff;
  background-color: #bc69bf;
  border: 1px solid #bc69bf;
  border-radius: 100vh;
  transition: .6s;
  padding: 8px 0px 16px 0px;
}
#contact .tel a:hover {
  background-color: #fff;
  border-color: ##bc69bf;
  color: #bc69bf;
}
#contact .form a {
  width: 240px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #bc69bf;
  border: 1px solid #bc69bf;
  border-radius: 100vh;
  transition: .6s;
  padding: 8px 0px;
}
#contact .form a:hover {
  background-color: #fff;
  border-color: ##bc69bf;
  color: #bc69bf;
}



/*BACK TO TOP*/
.BackToTop {
position:fixed;
width:45px;
height:45px;
right:15px;
bottom:15px;
z-index:100;
display:none;
}

	

/*FOOTER*/
footer {
  padding:50px 0 15px;
  color:#fff;;
  background-image: url("../img/footer-img.png") ;
  background-repeat: repeat;
}
footer p {
  font-size: 0.8em;
}
footer a {
  color: #fff;
  transition: .6s;
}
footer a:hover {
  color: #bc69bf;
}
footer .logo {
  width: 250px;
  margin: auto;
  padding-bottom: 20px;
}
footer .infos {
  width: 90%;
  margin:auto;
  text-align: center;
  padding-bottom:50px;
}
footer .address {
  margin: 0.5em;
  line-height: 1.8em;
}
footer .tel {
  margin: 0.5em;
}
footer .mail {
}
footer .item {
  color:#969696;
}
footer .copyright {
  font-size: 0.8em;
  color:#969696;
  text-align:center;
}	



/*CONTACT FORM*/
#contactform {
  background-color: #d1d1d1;
  padding-bottom:70px;
  background-image: url("../img/access-img.png") ;
  background-repeat: repeat;
  margin-top: 55px;
}
#contactform h2 {
  color:#323232;
}
#contactform h3 {
  color:#000;
}
#contactform .cta {
  width:400px;
  margin:auto;
  -webkit-animation:cta_btn 1s ease infinite alternate;
  animation:cta_btn 1s ease infinite alternate;
}

#contactform .thanks {
  width: auto;
  text-align: left;
  margin-top: 40px;
  font-size: 0.9em;
  line-height: 1.6em;
}
#contactform .thanks a {
  margin: 0 0.2em;
  padding: 1px 0.2em;
  color: #fff;
  font-weight: bold;
  background-color: #bc69bf;
  border: solid 1px #bc69bf;
}
#contactform .thanks a:hover {
  color: #bc69bf;
  background-color: #fff;
  transition: .6s;
}
#contactform .cts .index {
  width: 100%;
  text-align: center;
  margin-top: 80px;
  left: auto;
  right: auto;
  display: inline-block;
}
#contactform .cts .index a {
  border: 1px solid #bc69bf;
  font-size: 1.2em;
  text-align: center;
  color: #fff;
  background-color: #bc69bf;
  text-decoration: none;
  font-weight: bold;
  padding: 16px 3em;
  border-radius: 100vh;
  transition: .6s;
}
#contactform .cts .index a:hover {
  background-color: #fff;
  border-color: ##bc69bf;
  color: #bc69bf;
}



@keyframes appears {
0%{transform:translateX(100%);}
100%{transform:translateX(0);}
}


/*INVIEW*/
.inviewTitleRoll {
opacity:0;
transform:translate(0,-50%) rotate(180deg);
transition:0.5s;
}

.TitleRoll {
opacity:1;
transform:translate(0, 0);
}

.inviewfadeInUp {
opacity:0;
transform:translate(0,10%);
transition:1s ease;
}

.fadeInUp {
opacity:1;
transform:translate(0, 0);
}




}