/* CSS Document */
@charset 'utf-8';
/* CSS Document */
/* Tablet */
@media only screen and (max-width: 1000px) {
.br-pc {
        display: none;
      }
.wrapper {
	position: relative;
	clear: both;
	max-width: 1000px;
	width: 95%;
	margin: 0 auto;
}
.box {
	position: relative;
	clear: both;
	overflow: hidden;
}
/*-------------------- intro */
.intro img{
	width: 80%;
	margin: 0 auto;
	height: auto;
}
.newspaper_mark {
    top: 15em;
    right: 8%;
}

.newspaper_mark img {
    width: 160px;
}
	
/*-------------------- break */
.break h4{
	width: 700px;
	color: white;
	margin: auto;
    display: block;
	padding-bottom: 30px;
}

/*-------------------- points */
	.points_title{
		padding: 30px 0;
	}

.points_title h2{
	width: 680px;
	font-size: 24px;
	text-align: center;
	letter-spacing: -0.05em
}

.points .diamond {
  margin:20px;
}


.point01,.point02{
	margin: 30px 0px;
}

.point_container h4{
	font-size: 14px;
}
	
.point_container h3{
	font-size: 18px;
}	
/*-------------------- explanation */

.explanation h4{
	width: 700px;
	margin: auto;
    display: block;
	padding-bottom: 30px;
}
/*-------------------- explanation */
/*-------------------- schedule */
ul.rounge-contents{
width: 95%;
flex-wrap: wrap;
}	
ul.rounge-contents img{
width: 60%;
}		
li.content{
width: calc(100% / 3 - 1%);
justify-content: space-between;
}
ul.rounge-contents dl {
margin-top: 10px;
}

/*-------------------- schedule */
/*-------------------- modelcourse*/

/*おおきな範囲*/
.mc-contents{
	width: 750px;
	margin: auto;
}
.mc-text{
	margin: 30px 0px;
}
.mc-text h3{
	font-size: 18px;
}
.mc-text h2{
text-align: center;
}
.mc-text h2 span{
	font-size: 32px;
	padding-left: 0px;
}

.mc-img img{
	width: 140px;
}

/*三角を作ろう*/
.triangle {
  background:  #E0C58E;
  height: calc(200px / 2);
  width: 200px;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  transform: rotate(180deg);
  margin: auto;

}
.daybox{
	margin-top: 30px;
	height: auto;
}
	.daybox p{
	font-size: 12px;
			line-height: 1.3;
}

.daybox h4{
	font-size: 14px;
	line-height: 1.3;
}
/*mc-leftの設定-----------修正しました！------*/	
.mc-left img{
height: 210px;
object-fit: cover;
}
		
.mc-left{
	height: 210px;
}
	.left-text{
		max-width:300px;
	}
	
/*mc-rightの設定*/		
.mc-right{
	height: 210px;
	margin-left: -200px
}
.right-text{
		max-width: 250px;
	}

/*最後の注意書き*/
.modelcourse .notice{
	display: flex;
	justify-content: center;
	padding-bottom: 60px;
}
.notice h3{
	font-size: 16px;
	background-color: white;
	padding:10px 30px;
	text-align: center;
}

.box01{
 top:240px;
 left:110px;
}
.box02{
 top:300px;
 right:10px;
}
.box03{
 top:520px;
 left:90px;
}
.box04{
 top:770px;
 right:60px;
}
.box05{
 top:130px;
 left:10px;
}
.box06{
 top:150px;
 right:10px;
}
.box07{
 top:300px;
 left:10px;
}
.box08{
 top:770px;
 left:45px;
}
.box09{
 top:940px;
 left:90px;
}
.box10{
 top:1010px;
 right:15px;
}
.box11{
 top:90px;
 left:200px;
}
.box12{
 top:550px;
 left:100px;
}
.box13{
 top:380px;
 right:90px;
}
.box14{
 top:610px;
 left:40px;
}
.box15{
 top:610px;
 right:20px;
}

.illust01{
	position: absolute; 
	top:230px;
   left:0px;
}
	
.illust02{
	position: absolute; 
	top:460px;
   right:-10px;
}
.illust03{
	position: absolute; 
	top:450px;
   right:30px;
}
.illust04{
	position: absolute; 
	top:750px;
   right:5px;
}
.illust05{
	position: absolute; 
	top:240px;
  left:30px;
}
.illust06{
	position: absolute; 
	top:450px;
   right:10px;
}
/*-------------------- bar*/
.bar{display: block;
	position: relative;
    vertical-align: top;
}

.bar-image {
   width: 100vw;
   min-height:auto;
bottom: 0;
}

.bar h2{
	font-size: 24px;
}
.bar-detail{
	font-size: 14px;
}

.offer-detail{
	font-size: 14px;
	}	
	
.offer{
	padding: 20px 50px;
}

.cocktail-illust{
	width: 70px;
	height: auto;
}
 
.offer .notice{
	text-align: center;
}	

/*-------------------- recommendation-videos */
/*-------------------- recommendation */
.recommendation{
	padding: 3em 0 3em;
}
.ul_style_C{
	display: block;
}
/*-------------------- movies */
.videos{
	padding: 1em 0 3em;
}
.ytp-cued-thumbnail-overlay-image {
    width: 95%;
    height: 95%;
}
/*-------------------- Call Center */
.callcenter {
	padding: 2em 0;
	
}
.callcenter h2 {
	font-size: 2rem;
}
.callcenter h3 {
	font-size: 2rem;
}
.callcenter ul p{
	font-size: 1.6rem;
	margin-bottom: .3em;
}
  
}

/* Tablet */
@media only screen and (max-width: 732px) {}


/* Smart */
@media only screen and (max-width: 500px) {
	
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: none !important; }
.sp { display: block !important; }	
.sp_text{
	display: block
}
	
.br-sp {
        display: block;
      } 
.br-pc {
        display: none;
      } 	
	
#container {
overflow-x: hidden;
}	
/*-------------------- title */
/*-------------------- intro */
.intro {
	background: url("../img/clubloungeview_sp.png");
	background-size: cover;
	height: 500px;
}
	
.intro img{
		width: 80%;
	margin: 0 auto;
}
.newspaper_mark {
    top: 4.5em;
    right: 5%;
}

.newspaper_mark img {
    width: 120px;
}
		
	
 /*-------------------- break */

.break img{
	 width: 160px;
}
.break h2{
	font-size: 21px;
}

.break h4{
	font-size: 14px;
	width: 350px;
	padding-bottom: 40px;
}

/*-------------------- points */


.points{
	background: url("../img/marblestone.png");
	background-size: 300%;
	background-repeat: repeat;
}

/* タイトル部分 */
.points_title{
	padding: 30px 0px 30px;
	text-align: center;
}
.points_title h2{
	font-size:21px;
}

.points_title span{
	font-size: 36px;
}

.points .diamond {
  display: none;
}

/* 内容 */
.point_container {
    width: 350px;
	padding-bottom: 20px;
}
.point_container  img{
    width: 350px;
}
.point01{
    flex-flow: column;
}
.point02{
    flex-flow: column-reverse;
}
.point_container p{
	font-size: 12px;
}
.point_container h4{
	font-size: 12px;
}
.point-box01,.point-box02{
margin: 0;
}

/*-------------------- room */

 /* タイトル部分 */
.diamond {
  width: 10px;
  height: 10px;
  background: black;
  transform: rotate(45deg);
}
	
.room h5 {
	padding-top: 20px;
}
.room h2{
	font-size: 24px;
}
.room h3{
	font-size: 21px;
	text-align: center;
	padding-top: 30px;
	padding-bottom: 10px;
}
 /* タブ部分 */
.tab{
	max-width: 350px;
}

.tab {
    padding-bottom: 40px;
}
.tab label{
		font-size: 12px;
	}
	
.tab-item+label {
    padding: 0;
}	
 /* タブ中写真部分 */
.roomimg-box{
	flex-flow: column;	
	margin: 0 calc(50% - 50vw);
	width: 100vw;
}

.roomimg-box img{
	width: 100vw;
	height: auto;
	margin-bottom: 10px;
}
	
.tab-content .button{
	font-size: 18px;
}
	.tab-content p{
	text-align: left;
}

.tab p{
	font-size: 14px;
	margin: 0px 0px 30px 0px;
}	
	
ul.tour-list li {
        width: 100%;
	margin-bottom: 20px;
    }	
.newspaper {
    padding: 0 1em;
}	
	
/*-------------------- clubrounge */	
.clubrounge h2{
	font-size: 24px;
	text-align: center;
}	
.clubrounge-title span{
	font-size: 18px;
}	
	

.clubrounge .diamond {
  margin-top:80px;
}

.explanation h4{
	width: 360px;
	font-size: 12px;
}

.schedule span{
	font-size: 12px;
}

.schedule-sub h3{
	font-size: 18px;
}

ul.rounge-contents img{
width: 95%;
}		

/*--------------------modelcourse */
.modelcourse{
background: #E0C58E;
    padding-top:0px;
	position:relative;
}

/*おおきな範囲*/
.mc-contents{
	width: 100vw;
}

/*タイトルのとこ*/
.mc-text h3{
	font-size: 12px;
}
.mc-text h2{
	font-size: 18px;
	text-align: left;
}
.mc-text h2 span{
	font-size: 24px;
}
	.day{
		font-size: 12px;
	}
.mc-img {
	width: 50px;
	position: absolute;
	top: 70px;
	right:3px;
}

.mc-img img{
	width: 50px;
}

/*三角を作ろう*/
.triangle {
  height: calc(100px / 2);
  width: 100px;
	margin-bottom: 30px;
}
/*三角の上の文字*/
.day{
	padding-bottom: 20px;
}

.day span{
	font-size: 21px;
}
	
	
/*dayboxの設定　横並びを解除*/	
.daybox{
	display: block;
	margin-top: 0px;
	}
.daybox p{
	font-size: 9px;
	max-width: 200px;
	letter-spacing: -0.02em;
	line-height: 1.4;
	}
/*mc-leftの設定-----------修正しました！------*/	
.mc-left img{
height: 100%;
min-width:30%;
max-width:100%;
}
		
.mc-left{
	height: 180px;
	margin-right:0px;
}
	
.left-text p{
	margin-left: 4px;
}
.left-text {
		max-width: 250px;
	}	
	
/*mc-rightの設定*/		
.mc-right{
	margin-top: -30px;
	margin-bottom: 20px;
	height: 180px;
	margin-left: 0px;
}

.right-text p{
	margin-right: 4px;
}
.modelcourse h4 {
	font-size: 12px;
	line-height: 1.6;
}
.daybox span{
	font-size: 11px;
	letter-spacing: -0.02em;
	line-height: 1.4;
}

.mc-contents h5{
	font-size: 10px;
	padding: 5px 5px;
}

.daybox{
	height: auto;
}
/*青い吹き出しとイラストの位置を決めよう*/
.box01{
 top:190px;
 left:110px;
}
.box02{
 top:360px;
 right:10px;
}
.box03{
 top:880px;
 left:90px;
}
.box04{
 top:1070px;
 right:60px;
}
.box05{
 top:70px;
 left:10px;
}
.box06{
 top:415px;
 right:10px;
}
.box07{
 top:590px;
 left:10px;
}
.box08{
 top:770px;
 left:45px;
}
.box09{
 top:1220px;
 left:90px;
}
.box10{
 top:1430px;
 right:15px;
}
.box11{
 top:170px;
 left:160px;
}
.box12{
 top:550px;
 left:100px;
}
.box13{
 top:590px;
 right:90px;
}
.box14{
 top:770px;
 left:40px;
}
.box15{
 top:900px;
 right:20px;
}

.illust01{
	position: absolute; 
	top:210px;
   left:10px;
	width: 80px;
}
	
.illust02{
	position: absolute; 
	top:680px;
   right:10px;
   width: 80px;
}
.illust03{
	position: absolute; 
	top:660px;
   right:30px;
   width: 75px;
}
.illust04{
	position: absolute; 
	top:1010px;
   right:5px;
   width: 100px;
}
.illust05{
	position: absolute; 
	top:190px;
  left:30px;
   width: 80px;
}
.illust06{
	position: absolute; 
	top:650px;
   right:10px;
   width: 110px;
}

/*最後の注意書き*/
.modelcourse .notice{
	padding-bottom: 30px;
}
.notice h3{
	font-size: 12px;
	padding:5px 10px;
	margin: 0 10px;
}	
	
/*-------------------- bar*/

.bar{display: block;
	position: relative;
    vertical-align: top;
}

.bar_item{
	
}

.bar-image {
   width: 100vw;
   min-height:auto;
bottom: 0;
}

.bar h2{
	font-size: 21px;
}

.bar-text{
	margin: 0 15px;
}

.bangai{
	margin-top: 0px;
}

.bar-detail{
	margin: 0 20px 20px;
	font-size: 11px;
}

.offer-detail{
	margin: 0 10px 10px;
	font-size: 11px;
	}	
	
.offer{
	padding: 20px 0;
}

.offer .button{
	padding: 15px 5px;
	margin:0 25%;
	font-size: 16px;

}

.cocktail-illust{
	width: 70px;
	height: auto;
}
 
.offer .notice{
	text-align: center;
	font-size: 11px;
}	

/*-------------------- recommendation-videos */
	
.recommendation h2{
	font-size: 18px;
}	
	.videos h2	{
	font-size: 21px;	
	}

.content_title{
	margin-bottom: 20px;
}

.recommendation,.videos{
	padding: 2em 0 4em;
}
.ul_style_C{
	display: block;
}
.recommendation img{
	aspect-ratio: unset;
}
.recommendation img:hover{
	opacity: .8;
}
/*--------------------videos */
.responsive {
width: 100%;
aspect-ratio: 16/9;
}	
/*-------------------- movies */
 #movies{
	padding: 1em 0 3em;
}
.ytp-cued-thumbnail-overlay-image {
    width: 95%;
    height: 95%;
}
/*-------------------- Call Center */
.callcenter {
	padding: 2em 0;
	
}
.callcenter h2 {
	font-size: 1.8rem;
}
.callcenter h3 {
	font-size: 1.8rem;
}
.callcenter ul p{
	font-size: 1.4rem;
	margin-bottom: .3em;
}
/*-------------------- page-top */
	#page-top img{
		width: 100%;}
#page-top a {
        width: 50px;
        padding: 10px;
        border-radius: 6px;
    }
}