@charset "UTF-8";

/*ブルースカイランドリー20230906*/

/*このCSSファイルにおける、メディアクエリの分け方
※各画面サイズ共通クラス

※PC*******1081~　tablet横、PC　
※タブレット******415~1080　タブレット縦　スマホ横　及びiPad miniなど 
※スマホ縦　iphone6,7,8及び　pluse*********~414
*/

/*PC*/
@media (min-width : 1081px ) and (max-width : 1599px ){
}
/*タブレット*/
@media ( min-width : 641px ) and (max-width : 1080px ){
}
/*スマホサイズ*/
@media (max-width : 640px ){
}

/*スクリーン幅検出テスト*/
/* Default style for extra small devices (like iPhone SE) */
body {
    background-color: #ddd;
}

/* Small devices (phones, 576px and up) */
@media (min-width: 576px) {
    body {
        background-color: #edd;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        background-color: #ede
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        background-color: #dde;
    }
}

/* Extra large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {
    body {
        background-color: lightyellow;
    }
}
/* XX large devices (large desktops, 2000px and up) */
@media (min-width: 2000px) {
    body {
        background-color: black;
		}
}

/*=============================================================
Customized especially for bsl1
=============================================================*/
		/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1600px) {
    #client {
	width:100%;
	margin:0 auto;
	}
	}
	/*PC*/
@media (min-width : 1025px ) and (max-width : 1599px ){
#client {
	width:500px;
	margin:0 auto;
	}

}
/*タブレット大*/
@media ( min-width : 800px ) and (max-width : 1024px ){
		#client {
	width:412px;
	margin:0 auto;
	}

}
/*タブレット小*/
@media ( min-width : 641px ) and (max-width : 799px ){
	#client {
	width:412px;
	margin:0 auto;
	}

}

/*スマホサイズ*/
@media (max-width : 640px ){
	#client {
	width:300px;
	margin:0 auto;
		}

	}
	

/*=============================================================
Initialize
=============================================================*/
body {
	/*background-color:#eee;*/
	text-align:center;
	color:#fff;
	fofont-family: "BIZ UDPGothic", sans-serif;
	font-feature-settings: "palt";
	font-size:62.5%;
}

*, *:before, *:after {/*全てborder-boxに*/
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

		
h1,h2,h3,h4,ul,li,dl,dt,dd, p {
margin:0;/*必須*/
padding:0;
border:0;
}
		
li {
list-style:none;
}

/*=============================================================
動的に表示／非表示 制御
=============================================================*/
/*各サイズ共通*/
.hiding {display:none!important;}
.appearing {display:block;}

/*=============================================================
Common UI
=============================================================*/
/* Extra large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {
	.xlarge {display:block;}
	.pc {display:none;}
	.mobile{display:none;}
	
	body{
	width:100%;
	}
		
	#wrap {
		width:100%;
		margin:0 auto;
		padding:1rem;
		overflow: hidden;
		background-color:#ddd;
		border-radius:50px 50px 50px 50px;
	}
	
	.sheet {
	width:95%;
	margin:10px auto 10px;
	padding:50px;
	overflow: hidden;
	background-color:#0082cc;
	}
	/*	
	.note {
		margin:0 16%;
		text-align:left;
		font-size:4.5em;
		color:lightgray;
	}
	*/
		
		/* 大画面表示用レイアウト　*/
		#horizon {
			margin-top:8rem;
			display:grid;
			grid-template-rows: 50rem;
			grid-template-columns: 1fr 1fr;
			width:100%;
		}
		
		.box {
			border-top: 0;
		}
		
#type_a {
			grid-column:1/2;
		}
#type_b {
			grid-column:2/3;
		}
		#type_a img, #type_b img {
			transform: scale(1.75);
			transform-origin: center top ;
		}
		
		.note {
			display:none;
		margin:0 16%;
		text-align:left;
		font-size:4.5em;
		color:lightgray;
	}
		
}
/*PC*/
@media (min-width : 1025px ) and (max-width : 1599px ){
		/*デバイスにより表示／非表示 を制御するためのクラス。*/
.xlarge {display:none;}
.pc {display:block;}
.mobile{display:none;}
	
body{
		width:100%;
	}
	
#wrap {
	width:100%;
	max-width:1024px;/*iphone11のレンダリングサイズ*/
	margin:0 auto;
	padding:15px 10px;
	overflow: hidden;
	background-color:#ddd;
			border-radius:20px 20px 20px 20px;

}

.sheet {
	width:95%;
	margin:10px auto 10px;
	padding:10px;
	overflow: hidden;
	background-color:#0082cc;
			border-radius:20px 20px 20px 20px;
												border:solid 1px lightblue;
	}
		
.box {
	border-top:solid 1px lightblue;
		}

.note {
	margin:0 7%;
	text-align:left;
	font-size:2.5em;
	color:lightgray;
}
}

/*タブレット*/
@media ( min-width : 415px ) and (max-width : 1024px ){
.xlarge{display:none;}
.pc {display:block;}
.mobile{display:none;}

	
body{
	max-width:1024px;/*iphone11のレンダリングサイズ*/
	width:100%;
	}
	
#wrap {
	width:100%;
	margin:0 auto;
	padding:15px 10px;
	overflow: hidden;
	background-color:#ddd;
	border-radius:20px 20px 20px 20px;
}

.sheet {
	width:95%;
	margin:10px auto 10px;
	padding:10px;
	overflow: hidden;
	background-color:#0082cc;
	border-radius:20px 20px 20px 20px;
	}
	
.box {
	border-top:solid 1px lightblue;
		}
		
.note {
	margin:0;
	text-align:left;
	font-size:2.0em;
	color:lightgray;
}
}

/*スマホサイズ*/
@media (max-width : 640px ){
.xlarge{display:none;}
.pc {display:none;}
.mobile{display:block;}
	
body{
		max-width:640px;
		width:100%;
	}
	
#wrap {
	width:100%;
	margin:0 auto;
		padding:15px 10px;
		overflow: hidden;
	background-color:#ddd;
	border-radius:20px 20px 20px 20px;
}

.sheet {
	width:95%;
	margin:10px auto 10px;
		padding:10px;
		overflow: hidden;
	background-color:#0082cc;
	border-radius:20px 20px 20px 20px;
		}
.box {
	border-top:solid 1px lightblue;
}
		
.note {
	margin:0;
	text-align:left;
	font-size:1.0rem;
	color:lightgray;
}
}

/*各サイズ共通*/
.box {
	clear:both;
	width:95%;
	margin:0 auto;
	text-align:center;
	padding-top:1rem;
}
img  {/*全ての画像（アイコン、静止画像）*/
	width:auto;
    height:auto;
    max-width:100%;
	max-height:100%;
	margin:0 auto;
}

div ul li img {/*アイコンのみ*/
	height:2.5em!important;
}
.pointer:hover {
	/*border-bottom: solid 0px #C8CFD2;*/
	cursor:pointer;
	/*color:#ffffff;*/
	}
/*=============================================================
header & footer
=============================================================*/
/* Extra large devices (large desktops, 1600px and up) */
@media (min-width: 1600px) {
		
		#logo {
	width:152px;
	height:128px;
		}
		
		.xlarge {
		font-size:7.5rem;	
		}
	
#place {
	font-size:6.2rem;
	}
	
.present_time {
	font-size:6.5em;
	}
		
}

/*PC*/
@media (min-width : 1025px ) and (max-width : 1599px ){
	
	#logo {
	width:76.2px;
	height:64.4px;
	}
	
#place {
	font-size:3.2rem;
	}
	
.present_time {
	font-size:3.5em;
	}
	
	
}
/*タブレット*/
@media ( min-width : 641px ) and (max-width : 1024px ){
	
	#logo {
	width:60px;
	}
	
	@media ( min-width : 800px ) and (max-width : 1024px ){
#place {
	font-size:2.8rem;
		}
	}
	@media ( min-width : 641px ) and (max-width : 799px ){
#place {
	font-size:2.0rem;
		}
	}
	
.present_time {
	font-size:3em;
	}
	
	}
/*スマホサイズ*/
@media (max-width : 640px ){	
	
	#logo {
	width:60px;
	}
	
#place {
	font-size:1.8rem;
	}
	
.present_time {
	font-size:2em;
	}
	
	}
/*各サイズ共通*/
footer{font-size:2.0em;}

/*=============================================================
混雑表示部分
=============================================================*/
/* Extra large devices (large desktops, 1600px and up) */
	@media (min-width: 1600px) {
		
		.box h1 {font-size:6.0rem;}
.box h2 {font-size:5.5rem;padding:2rem 0;}
.box h3 {font-size:4.0rem;}
.box ul {font-size:6.0rem;}
.box p {font-size:4.5rem;}
		
	}
/*PC*/
@media (min-width : 1025px ) and (max-width : 1599px ){

h1 {font-size:4.0rem;}
h2 {font-size:3.5rem;padding:1rem 0;}
h3 {font-size:2.0rem;}
ul {font-size:4.0rem;}
p {font-size:3.0rem;}
	
}
/*タブレット*/
@media ( min-width : 641px ) and (max-width : 1024px ){

h1 {font-size:3.0rem;}
h2 {font-size:2.6rem;padding:1rem 0;}
h3 {font-size:3.0rem;}
ul {font-size:3.0rem;}
p {font-size:2.5rem;}
	
}
/*スマホサイズ*/
@media (max-width : 640px ){

h1 {font-size:2.5rem;}
h2 {font-size:2.0rem;padding:1rem 0;}
h3 {font-size:1.0rem;}
ul {font-size:1.8rem;}
p {font-size:1.8rem;}
	
}

/*各サイズ共通*/
ul {
	/*display:none;*/
	margin:2.0rem auto;
}
.closed dl {
	display:grid;
	grid:1.2em 1.2em 1.2em / 4em 9em;
	width:13em;
	margin:0 auto;
}

/*混雑レベル フォントサイズ*/
ul li:nth-child(1) { /*混雑レベル文言（bsl1で追加「現在N人です」20230727）*/
	font-weight:bold;
	font-size:1.5em;
}
ul li:nth-child(2) { /*混雑レベル文言*/
	font-weight:bold;
	font-size:0.7em;
}
ul li:nth-child(3) { /*コメント部分*/
	font-size:0.5em;
}


/*混雑レベル文言の色の指定*/
.density_mid li:nth-child(2) {
	color:yellow;
}
.density_high li:nth-child(2) {
	color:orange;
}
.lock_down li:nth-child(2) {
	color:red;
}
.closed li:nth-child(2) {
	color:#ee8;
}

/*ホネホネ画像の明度*/
img.hone_0, img.hone_1 {
	filter: brightness(200%);
	filter: contrast(80%);
}


/*=============================================================
nv ナビゲーション
=============================================================*/
/* Extra large devices (large desktops, 1200px and up) */
	@media (min-width: 1600px) {
		
			.nv {
		width:95% ;
		margin:0 auto;
		font-size:2.0rem;
			color:lightblue;
	}
	.nv dl{
		width:90%;
		margin:0.3rem auto 0;
		padding:0.3rem;	
		overflow:auto;
	}	

	.nv dt{
		float:left;
		width:35%;
		padding-top:0.7rem;
		padding-right:1.5rem;
		text-align:right;
		font-size:1.0rem;
	}
	.nv dd{
		float:left;
		width:65%;
		text-align:left;
		}
	}
/*PC*/
@media (min-width : 1025px ) and (max-width : 1599px ) {
	.nv {
		width:95% ;
		margin:0 auto;
		font-size:2.0rem;
			color:lightblue;
	}
	.nv dl{
		width:90%;
		margin:0.3rem auto 0;
		padding:0.3rem;	
		overflow:auto;
	}	

	.nv dt{
		float:left;
		width:35%;
		padding-top:0.7rem;
		padding-right:1.5rem;
		text-align:right;
		font-size:1.0rem;
	}
	.nv dd{
		float:left;
		width:65%;
		text-align:left;
		}
}
/*タブレット*/
@media ( min-width : 641px ) and (max-width : 1024px ){
	.nv {
	width:95% ;
	margin:0 auto;
		font-size:1.6rem;
		color:lightblue;
	}
	.nv dl{
		width:90%;
		margin:0.3rem auto 0;
		padding:0.3rem;	
		overflow:auto;
	}	
	
	.nv dt{
		float:left;
		width:30%;
			padding-top:0.35rem;
			padding-right:1.0rem;
		text-align:right;
		font-size:1.0rem;
	}
	.nv dd{
		float:left;
		width:70%;
		text-align:left;
		}
}
/*スマホサイズ*/
@media (max-width : 640px ){
	.nv {
		width:95% ;
		/*text-align:center;*/
		color:lightblue;
		overflow:auto;
		/*border:solid 1px red;*/
	}
	.nv dl{
		width:90%;
		margin:0.3rem auto 0;
		overflow:auto;
	}	
	
	.nv dt{
		float:left;
		width:30%;
			padding-top:0.35rem;
			padding-right:0.5rem;
		
		text-align:right;
		font-size:1.0rem;
	}
	.nv dd{
		float:left;
		width:70%;
			text-align:left;
			font-size:1.6rem;
		}
}
/*各サイズ共通*/
.ginza {
	color:white;
}

/*=============================================================
nav dead 休止中ナビアイテム
=============================================================*/

/*PC*/
@media (min-width : 1025px ) {
	.nvdead {
		width:95% ;
		margin:0 auto;
		font-size:1.8rem;
			color:lightblue;
	}
	.nvdead dl{
		width:90%;
		margin:0.3rem auto 0;
		padding:0.3rem;	
		overflow:auto;
	}	

	.nvdead dt{
		float:left;
		width:35%;
		padding-top:0.7rem;
		padding-right:1.5rem;
		text-align:right;
		font-size:1.0rem;
	}
	.nvdead dd{
		float:left;
		width:65%;
		text-align:left;
		}
}
/*タブレット*/
@media ( min-width : 641px ) and (max-width : 1024px ){
	.nvdead {
	width:95% ;
	margin:0 auto;
		font-size:1.4rem;
		color:lightblue;
	}
	.nvdead dl{
		width:90%;
		margin:0.3rem auto 0;
		padding:0.3rem;	
		overflow:auto;
	}	
	
	.nvdead dt{
		float:left;
		width:30%;
			padding-top:0.35rem;
			padding-right:1.0rem;
		text-align:right;
		font-size:1.0rem;
	}
	.nvdead dd{
		float:left;
		width:70%;
		text-align:left;
		}
}
/*スマホサイズ*/
@media (max-width : 640px ){
	.nvdead {
		width:95% ;
		color:lightblue;
		overflow:auto;
	}
	.nvdead dl{
		width:90%;
		margin:0.3rem auto 0;
		overflow:auto;
	}	
	
	.nvdead dt{
		float:left;
		width:30%;
			padding-top:0.35rem;
			padding-right:0.5rem;
		
		text-align:right;
		font-size:1.0rem;
	}
	.nvdead dd{
		float:left;
		width:70%;
			text-align:left;
			font-size:1.4rem;
		}
}
/*各サイズ共通*/


/*=============================================================
スライダー周り
=============================================================*/
.slider{
    margin: 0 auto;
	width: 100%;
	opacity: 0.5;
	transition: 3s;
}
.slick-initialized{
	opacity: 1;
}

.slider img{
    width:auto;
    height:auto;
    max-width:100%;
	max-height:100%;
	margin:0 auto;
}

/*slick setting*/
.slick-prev:before,
.slick-next:before {
    color: #000;
}

/*=============================================================
メーター類スタイル
=============================================================*/

/*LEDメーター　共通 1508*/

.led_meter {
	display:grid;
	width:90%;
	max-width:900px;
	grid: 1rem 2.0rem / repeat(11, 1fr);/*左端のダミーLED(横方向の位置調整用)の分を含めて「11」*/
	grid-gap: 3px;
	justify-items: center;
	align-items:center;
	margin:1.8rem auto 1rem;
	padding-right: 8.4%; /* 横位置調整のため、右にpaddingを追加。左には、ダミーのLED一個あり*/
}

.led {
	grid-row:1/2;
	height:1rem;
	width:90%;
	background-color:#9cf;
	border-bottom: solid 2px gray;
    border-right: solid 2px gray;
	}
	
.led_meter p {/*10%以下と90％以上の文字*/
	grid-row:2/3;
	font-size:1.4rem;
	white-space: nowrap;
	color:white;
}
#scale_0 {grid-column:1/3;text-align:left;}
#scale_50 {grid-column:6/8;}
#scale_100 {grid-column:11/13;text-align:right;}
	
	
/* LEDメーター　Extra large devices (large desktops, 1600px and up) */
	@media (min-width: 1600px) {
		.led_meter {
	display:grid;
	width:90%;
	max-width:2000px;
	grid: 3rem 4.0rem / repeat(11, 1fr);/*左端のダミーLED(横方向の位置調整用)の分を含めて「11」*/
	grid-gap: 3px;
	justify-items: center;
	align-items:center;
			margin:1.8rem auto 1rem;
	padding-left: 5%;  /*横位置調整のため、右にpaddingを追加。左には、ダミーのLED一個あり*/
}
		
	.led {
		height:2.5rem;
	}
	.led_meter p {
		font-size:5.0rem;
	}
	}	
/*LEDメーター　PC*/
@media (min-width : 1025px ) and (max-width : 1599px ){
	.led {
		height:1rem;
	}
	.led_meter p {
		font-size:1.4rem;
	}
}

/*LEDメーター　タブレット*/
@media ( min-width : 641px ) and (max-width : 1024px ){
	.led {
		height:0.8rem;
	}
	.led_meter p {
		font-size:1.2rem;
	}
	}
/*LEDメーター　スマホ*/
@media (max-width : 640px ){
	.led {
		height:0.5rem;
	}
	.led_meter p {
	font-size:1.0rem;
	}
}

/*レベルメーター　共通*/
.level_meter {
	display:grid;
	width:80%;
	max-width:800px;
	grid: 10px / 6% 80% 14% ;
	justify-content: center;
	align-items:center;
	margin:0.3rem auto 1rem;
}
.rect {
	border:solid 1px lightgray;
	text-align:left;
}

/*レベルメーター　PC*/
@media (min-width : 1025px ) and (max-width : 1599px ) {
.bar {
	height:7px;
	width:0;
	//background-color:lightgreen;
	}
.level_meter p {
	font-size:1.5rem;
	color:gray;
	}
}
/*レベルメーター　タブレット*/
@media ( min-width : 641px ) and (max-width : 1024px ){
.bar {
	height:7px;
	width:0;
	//background-color:lightgreen;
	}
.level_meter p {
	font-size:1.2rem;
	color:gray;
	}
}
/*レベルメーター　スマホ*/
@media (max-width : 640px ){
.bar {
	height:5px;
	width:0;
	//background-color:lightgreen;
}
.level_meter p {
	font-size:1.0rem;
	color:gray;
	}
	}