@charset "utf-8";

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

@media(min-width:960px){

	
/*STYLE*/
.sp {
  display:none;
}
.spOnly{
	display: none;
}
.cts {
  width:960px;
  margin:0 auto;
  padding:70px 0 0;
}
.symbol {
  width:50px;
  margin:0 auto 10px;
}
.title {
  font-family: 'Playfair Display', serif,HGS明朝E,メイリオ,Meiryo,serif;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.maincopy {
  text-align:center;
  padding-bottom:30px;
}



/*COMMON*/
h2 {
  text-align:center;
  padding-bottom:20px;
  font-size: 36px;
  color: #fff;
}
h2 img {
  width:auto;
  height:30px;
}
h2 span {
}
h3 {
  font-size: 1.2em;
  text-align:center;
  padding-bottom:30px;
  color: #fff;
}
h4 {
  font-size: 1.2em;
  color: #fff;
  text-align:left;
  border-bottom: 1px #bc69bf dotted;
  margin-bottom: 1em;
}	
p {
  font-size: 1em;
  line-height: 1.8en;
  letter-spacing: 0.5px;
}
img {
  width:100%;
  height:auto;
}	


/*GROBAL*/
#grobal {
  display:none;
}


/*ANIMATION*/
.marker_line {
  position:relative;
  font-size:100%;
}
.inviewTitleLine {
  width:0%;
  height:2px;
  position:absolute;
  background:#f50312;
  bottom:-10px;
  left:0;
  transition:1s;
}	
.inviewTitleLineBK {
  width:0%;
  height:2px;
  position:absolute;
  background:#000;
  bottom:-10px;
  left:0;
  transition:1s;
}
.inviewTitleLinePL {
  width:0%;
  height:2px;
  position:absolute;
  background:#bc69bf;
  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:960px;
  height:55px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
header .header_cts .logo {
  width:250px;
}
header .header_cts .header_menu {
  display:flex;
  align-items:center;
}
header .header_cts .header_menu nav {
  padding: 0 0.5em ;
  line-height:100%;
}
header .header_cts .header_menu nav a {
  font-size: 0.8em;
  font-weight:bold;
  color:#fff;
}
header .header_cts .header_menu nav a:hover {
  opacity:0.7;
}



/*MV*/
.mv {
  width:100%;
  height:655px;
  position:relative;
}
.mv .opening-hour {
  width:250px;
  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: 1.4em;
  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: 1em;
}
.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 .greeting {
  display:flex;
  justify-content:space-between;
  padding: 0;
  margin-bottom:20px;
}
#lounge .greeting .photo {
  float: left;
  padding: 0;
  margin: 0;
}
#lounge .greeting .photo img {
width: 500px;
padding: 0;
margin: 0;
}
#lounge .greeting .text {
  width:auto;
  float: right;
  text-align: left;
  padding: 0 0 0 50px;
  line-height: 2em;
  margin-bottom: 20px;
}
#lounge .greeting .text p {
  color: #FFF;
}
#lounge .rooms {
  display:flex;
  justify-content:space-between;
  color: #272727;
  margin-bottom: 40px;
}
#lounge .rooms .room {
  width:300px;
  background:#e7d0e8;
  padding:0 0 25px;
}
#lounge .rooms .room .photo {
  padding-bottom:20px;
}

#lounge .rooms .room .name {
  font-size: 1.4em;
  font-weight: 800;
  text-align: center;
}
#lounge .rooms .room .kana {
  font-size: 0.8em;
  color: #bc69bf;
  text-align:center;
  padding-bottom:15px;
}
#lounge .rooms .room .detail {
  width: 260px;
  margin: auto;
  font-size: 0.9em;
}
#lounge .rooms .room .attention {
width:240px;
margin:auto;
font-size:70%;
padding-top:7px;
}

	

/*NEWS*/
#news {
  background-image: url("../img/price-img.png") ;
  background-repeat: repeat;
  background-color: #bc69bf;
  padding-bottom:70px;
}
#news h2 {
  color:#000;
}
#news h3 {
  color:#fff;
}

#news .news_area {
  display:flex;
  margin-bottom: 60px;
}
#news .news_area .topics {
  width: 320px;
  margin-right: 20px;
}
#news .news_area .topics .topic {
  background: #fff;
  border:#e1e1e1 1px solid;
  margin-bottom: 15px;
  padding: 20px;
  width: 100%;
}
#news .news_area .topics .topic_cts {
  display:flex;
  margin-bottom: 20px;
}
#news .news_area .topics .topic .box {
  display:flex;
  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 {
  width: auto;
}
#news .news_area .topics .text .text_cts {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.2em;
  letter-spacing: 0em;
  margin-bottom: 0.5em;
  font-family: 'Playfair Display', serif,HGS明朝E,メイリオ,Meiryo,serif;
  font-weight: 800;
}
#news .news_area .topics .text .date {
  font-size: 0.9em;
}
#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: 600px;
}		
#news .line_btn {
  width: 100%;
  text-align: center;
}
#news .line_btn a {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  border: 2px solid #bc69bf;
  font-size: 1.5em;
  text-align: center;
  color: #fff;
  background-color: #000;
  text-decoration: none;
  font-weight: bold;
  padding: 16px 0px;
  border-radius: 100vh;
  transition: .6s;
}
#news .line_btn a:hover {
  background-color: #fff;
  border-color: #000;
  color: #000;
}
	

	

/*RESERVATION*/
#reservation {
  background:#f50312;
  padding-bottom:70px;
  background-image: url("../img/reservation-img.png") ;
  background-repeat: repeat;
}
#reservation h2 {
  color:#000;
}
#reservation h3 {
  color:#000;
}
#reservation p {
  font-size: 1em;
  color:#fff;
  display:flex;
}
#reservation .system {
  width: 960px;
  height: 1220px;
  margin-bottom:20px;
  background-color: #fff;
}	

#reservation .tel,.form {
  text-align: center;
}
#reservation .tel a {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  border: 1px solid #bc69bf;
  font-size: 2em;
  text-align: center;
  color: #fff;
  background-color: #bc69bf;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 0px 16px 0px;
  border-radius: 100vh;
  transition: .6s;
}
#reservation .tel a:hover {
  background-color: #fff;
  border-color: ##bc69bf;
  color: #bc69bf;
}
	

/*SUPPLIMENT*/
#supplement {
  background-color: #d1d1d1;
  padding-bottom:70px;
  background-image: url("../img/supplement-img.png") ;
  background-repeat: repeat;
}
}
#supplement h2 {
  color:#323232;
  margin-bottom: 10px;
}
#supplement h3 {
  color:#000;
}
#supplement .caht p {
  font-size: 1em;
  display:flex;
}
#supplement .cta {
  width:400px;
  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 .item {
  margin-bottom: 20px;
  text-align: center;
}
#supplement .items .photo{
  margin-bottom: 15px;
}
#supplement .itemTitle {
  width: 960px;
  background:#bc69bf;
  padding: 0.4em;
  font-size: 1.2em;
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
  clear: both;
}	
#supplement .itemWrap {
  width: 960px;
  display:flex;
  justify-content:space-between;
}
#supplement .item p {
  vertical-align: top;
  width: 100%;
}
#supplement .item a {
  color: #000;
  text-decoration: none;
  line-height: 0.6em;
}
#supplement .item a:hover {
  color: #e7236d;
  text-decoration: underline;
  line-height: 0.6em;
}
#supplement .item a:visited {
  color: #000;
  text-decoration: none;
}
#supplement .itemWrap .item {
  width:220px;
  padding-bottom:20px;
  flex-wrap:wrap;
  display:flex;
}
#supplement .itemWrap .point .item {
  font-size: 0.8em;
  letter-spacing: 0.2em;
  padding: 0.5em 0;
}
#supplement .caption {
  margin:auto;
  margin-top: 2em;
  text-align: left;
}
#supplement .shop-btn {
  width: 100%;
  text-align: center;
  font-size: 24px;
  margin-top: 60px;
  left: auto;
  right: auto;
  display: inline-block;
}
#supplement .shop-btn 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;
}
#supplement .shop-btn a:hover {
  background-color: #fff;
  border-color: ##bc69bf;
  color: #bc69bf;
}

	
	
	
	

/*PRICE*/
#price {
  background-image: url("../img/price-img.png") ;
  background-repeat: repeat;
  background-color: #bc69bf;
  color: #fff;
  padding-bottom:70px;
}
#price h2 {
  color: #000;
}
#price h4 {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  padding: 10px;
  background-color: #4e2650;
  margin: 0;
}
#price p {
}
#price .caption {
  font-size: 0.8em;
}
#price .drink {
  width: 100%;
  max-width: 960px;
  margin: 0;
  background-color: #000;
  padding: 20px 40px 0px 40px;
  font-size: 1.2em;
}
#price .annotation {
  width: 100%;
  max-width: 960px;
  text-align: right;
  background-color: #000;
  padding: 0px 40px 20px 40px;
  font-size: 0.8em;
  margin-bottom: 40px;
}
	
#price .table {
  display: table;
  width: 100%;
  max-width: 960px;
  margin: 0 0 40px 0;
  background-color: #000;
  padding: 40px;
  font-family: 'Playfair Display', serif,HGS明朝E,メイリオ,Meiryo,serif;
  font-size: 1.2em;
}
#price .table .tr {
  display: table-row;
}
#price .table .th {
  width: 35%;
  text-align: right;
  padding-right: 80px;
  color: #e494e7;
  font-weight: bold;;
  border-bottom: 1px dotted #fff;
}
#price .table .td {
  padding-left: 1em;
  letter-spacing: 0.1em;
  color: #FFF;;
  border-bottom: 1px dotted #bc69bf;
}
#price .table .th, .table .td {
  padding: 15px 0;
  display: table-cell;
  line-height: 2
}
#price .table .tr:first-of-type .th, .table .tr:first-of-type .td {
  padding-top: 0;
}	
#price .menu {
  display: table;
  width: 100%;
  max-width: 960px;
  margin: 0;
  background-color: #000;
  padding: 0 40px 20px 40px;
  font-family: 'Playfair Display', serif,HGS明朝E,メイリオ,Meiryo,serif;
  font-size: 1.2em;
}
#price .menu .tr {
  display: table-row;
}
#price .menu .tr .subtitle {
  width: 100%;
}
#price .menu .th {
  width: 65%;
  text-align: left;
  padding-left: 180px;
  color: #e494e7;
  padding: 1px 40px 10px 120px;
  border-bottom: 1px dotted #fff;
}
#price .menu .td {
  padding-left: 1em;
  letter-spacing: 0.1em;
  padding: 10px 40px;
  border-bottom: 1px dotted #bc69bf;
}
#price .menu .th, .menu .td {
  display: table-cell;
  line-height: 2;
}

#price .menu .tr:first-of-type .th, .menu .tr:first-of-type .td {
  padding-top: 0;
}	
#price .menu .caption {
  font-size: 0.8em;
}
	


/*ACCESS*/
#access {
  padding-bottom:70px;
  background-image: url("../img/access-img.png") ;
  background-repeat: repeat;
}
#access h3 {
  color:#fff;
}
#access p {
  font-size: 1em;
  color:#fff;
  display:flex;
}
#access .map {
width:960px;
height:550px;
margin-bottom:20px;
}
#access .address {
}
#access .access {
  display:flex;
  justify-content:space-between;
  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 {
  
}
#access .access .train {
  width:460px;
}
#access .access .taxi {
  width:460px;
}
#access .access .taxi .copy {
  padding-bottom:10px;
}
#access .spot {
  justify-content:space-between;
}	
#access .spot p {
  display: block;
}
#access .spotTitle {
  width: 960px;
  background:#bc69bf;
  padding: 0.4em;
  font-size: 1.2em;
  text-align: center;
  margin-bottom: 30px;
  clear: both;
}
#access .spotWrap {
  width: 960px;
  display:flex;
  justify-content:space-between;
}	
#access .spotWrap .point {
  width:220px;
  padding-bottom:20px;
  flex-wrap:wrap;
  display:flex;
}
#access .spotWrap .point .item {
  font-size: 0.8em;
  letter-spacing: 0.2em;
  padding: 0.5em 0;
}



/*CONTACT*/
#contact {
  background-color: #d1d1d1;
  padding-bottom:70px;
  background-image: url("../img/access-img.png") ;
  background-repeat: repeat;
}
#contact h2 {
  color:#323232;
}
#contact h3 {
  color:#000;
}
#contact .cta {
  width:400px;
  margin:auto;
  -webkit-animation:cta_btn 1s ease infinite alternate;
  animation:cta_btn 1s ease infinite alternate;
}
#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: 100px;
  margin-right:30px;
}
#contact .calam .lines .line_qr {
  width: 100px;
}
#contact .calam .maincopy {
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  margin: 30px 0;
}
#contact .tel,.form {
  text-align: center;
}
#contact .tel a {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  border: 1px solid #bc69bf;
  font-size: 2em;
  text-align: center;
  color: #fff;
  background-color: #bc69bf;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 0px 16px 0px;
  border-radius: 100vh;
  transition: .6s;
}
#contact .tel a:hover {
  background-color: #fff;
  border-color: ##bc69bf;
  color: #bc69bf;
}
#contact .form a {
  width: 400px;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  border: 1px solid #bc69bf;
  font-size: 1.5em;
  text-align: center;
  color: #fff;
  background-color: #bc69bf;
  text-decoration: none;
  font-weight: bold;
  padding: 16px 0px;
  border-radius: 100vh;
  transition: .6s;
}
#contact .form a:hover {
  background-color: #fff;
  border-color: ##bc69bf;
  color: #bc69bf;
}



/*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: 320px;
  margin: auto;
  padding-bottom: 30px;
}
footer .name {
  font-size:80%;
  font-weight:bold;
  color:#fff;
  text-align:center;
  padding-bottom:20px;
}
footer .infos {
  text-align: center;
  padding-bottom:30px;
}
footer .address {
  padding-bottom: 0.6em;
}
footer .tel {
  padding-bottom: 0.6em;
}
footer .mail {
  padding-bottom: 0.6em;
}
footer .item {
  color:#969696;
}
footer .copyright {
  font-size: 0.8em;
  text-align:center;
}



/*CONTACT FORM*/
#contactform {
  background-color: #d1d1d1;
  padding-bottom:70px;
  background-image: url("../img/access-img.png") ;
  background-repeat: repeat;
  margin-top: 60px;
}
#contactform h2 {
  color:#323232;
  margin-bottom: 10px;
}
#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: center;
  margin-top: 40px;
  line-height: 2em;
}	
#contactform .thanks a {
  margin: 0 1em;
  padding: 2px 5px;
  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;
}





	
/*SWIPER*/
.swiper_size {
width:480px;
margin:auto;
}


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


/*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);
}



	



}