@charset "utf-8";
/* CSS Document */

 /**
 * 2. Header
 */

.ms-header {
	background: rgba(245,247,242,.75);
}

/* 2.1 Menu */

.ms-nav {
    padding: 1em 3em;
    color: inherit;
}

@media only screen and (max-width: 805px) {
 .ms-nav {
        padding: 0.75em;
    }
}

/**
 *	Index
 */
 
@media only screen and (max-width: 374.98px) {
	.slide-inner--info h1 {
		font-size: calc(24px + 16 * (100vw - 992px) / 1508);
		line-height: 1.25;
		margin: 0.3em 0;
		padding: 0 0.3em;
	}
    
    .slide-inner--image{
        background-size: auto 47.5%, auto 35.0%;
        background-position: center top, center bottom;
        background-repeat: no-repeat, no-repeat !important;
    }
	
	.swiper-slide:nth-child(4) .slide-inner--image {
        background-position: 60% top, center bottom;
    }
	.swiper-slide:nth-child(5) .slide-inner--image {
        background-position: 40% top, center bottom;
    }
	.swiper-slide:nth-child(6) .slide-inner--image {
        background-position: 60% top, center bottom;
    }
	.swiper-slide:nth-child(8) .slide-inner--image {
        background-position: 70% top, center bottom;
    }
    
    .slide-inner--info {
        bottom: auto;
        top: 50%;
        background-color: #222325;
    }
}
@media (min-width: 375px) and (max-width: 389.98px) {
	.slide-inner--info h1 {
		font-size: calc(28px + 16 * (100vw - 992px) / 1508);
		line-height: 1.25;
		margin: 0.3em 0;
		/*padding: 0 0.3em;*/
	}
    
    .slide-inner--image{
        background-size: auto 47.5%, auto 35.0%;
        background-position: center top, center bottom;
        background-repeat: no-repeat, no-repeat !important;
    }
	
	.swiper-slide:nth-child(4) .slide-inner--image {
        background-position: 60% top, center bottom;
    }
	.swiper-slide:nth-child(5) .slide-inner--image {
        background-position: 40% top, center bottom;
    }
	.swiper-slide:nth-child(6) .slide-inner--image {
        background-position: 60% top, center bottom;
    }
	.swiper-slide:nth-child(8) .slide-inner--image {
        background-position: 70% top, center bottom;
    }
    
    .slide-inner--info {
        bottom: auto;
        top: 50%;
        background-color: #222325;
    }
	
}
@media (min-width: 390px) and (max-width: 767.98px) {

	.slide-inner--info h1 {
		font-size: calc(32px + 16 * (100vw - 992px) / 1508);
		line-height: 1.25;
		margin: 0.3em 0;
		/*padding: 0 0.3em;*/
	}
    
    .slide-inner--image{
        background-size: auto 47.5%, auto 35.0%;
        background-position: center top, center bottom;
        background-repeat: no-repeat, no-repeat !important;
    }
	
	.swiper-slide:nth-child(4) .slide-inner--image {
        background-position: 60% top, center bottom;
    }
	.swiper-slide:nth-child(5) .slide-inner--image {
        background-position: 40% top, center bottom;
    }
	.swiper-slide:nth-child(6) .slide-inner--image {
        background-position: 60% top, center bottom;
    }
	.swiper-slide:nth-child(8) .slide-inner--image {
        background-position: 70% top, center bottom;
    }
    
    .slide-inner--info {
        bottom: auto;
        top: 50%;
        background-color: #222325;
    }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    
    .slide-inner--image{
        background-size: auto 62.5%;
        background-position: center top;
        background-repeat: no-repeat !important;
    }

    .slide-inner--info {
		text-align: center;
		padding-left: 0;
		bottom: auto;
        top: 62.5%;
		width: 100%;
        background-color: #222325;
    }
}

@media (min-width: 1024px) {
	
	.slide-inner--info h1 {
		font-size: calc(60px + 16 * (100vw - 992px) / 1508);
	}
	
	.slide-inner--image{
        background-size: 100% auto;
        background-position: center;
        background-repeat: no-repeat !important;
    }
	.slide-inner--info {
		text-align: center;
        /*bottom: auto;*/
		/*top: 83.3%;*/
		padding-left: 0;
		width: 100%;
        background-color: rgba(34,35,37,0.64);
    }
}


/**
 *	Clock
 */

/* スクロールコンテナ（横スクロール前提） */
.clock-wrap{
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: visible;
  margin: 0 auto 6em;
  -webkit-overflow-scrolling: touch;
}
@media only screen and (max-width: 805px) {
	.clock-wrap{ margin: 0 auto 3em; }
}

.clock-wrap > #world{
  position: relative;
  display: inline-block; /* width指定が効きやすい */
}
	
/* 地図画像：縦基準で表示。横は画像比率のまま伸びる */
/* ワイドモニターに対応させる必要がある*/
.clock-wrap > #world > img{
  display: block;
  height: 100vh;
  width: auto;
  max-width: none;
}

@media (max-height: 760px) and (min-width: 1000px){
	.clock-wrap > #world > img{
		height: 150vh;
		width: auto;
	}
}
@media only screen and (max-width: 374.98px) {
	.clock-wrap > #world > img{
		display: block;
		height: 130vh;
		width: auto;
		max-width: none;
	}
}

/* 下部バー：画像の下端に固定して全幅に広げる（JS更新） */
/* gridセル */
#tzbar{
	position: absolute;
	z-index:2;
	left: 0;
	bottom: 0;
	display: grid;
	background: linear-gradient(
		to bottom,
		#071b2d 0%,
		#0c2f4a 40%,
		#0f3e63 70%,
		#145c8c 100%
	 );
	color: #f5f7f2;
}
#tzbar div.city{
	padding: 0.5rem 0;
}

/* 表示 */
/* 縮小率83.33% */
#tzbar div.city p{
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0.90rem;
	font-weight: 500;
	line-height: 1;
	margin: 0;
}
/*
#tzbar div.city p:nth-child(3){
	min-height:38px;
}
*/
/* 天候名称 */
#tzbar div.city p:nth-child(4) {
	font-size: 0.75rem;
	font-weight: 400;
}
/* 余白管理 */
#tzbar div.city p:not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(6)) { margin-bottom: 0.4rem; }

@media only screen and (max-width: 805px) {
	#tzbar div.city p{
		font-size: 0.75rem;
	}
	#tzbar div.city p:nth-child(4) {
		font-size: 0.625rem;
	}
}
@media only screen and (max-width: 374.98px) {
	#tzbar div.city p{
		font-size: 0.6rem;
	}
	#tzbar div.city p:nth-child(4) {
		font-size: 0.5rem;
	}
}


/* Live Display */
.monitor-status {
	color: #ff0000;
}
.live-dot {
	display: inline-block;
	width: 0.83rem;
	height: 0.83rem;
	background: #ff0000;
	border-radius: 50%;
	animation: blink 2.2s infinite;
}
.live-text {
	letter-spacing: -0.01rem !important;
}
.live-note {
	letter-spacing: -0.01rem !important;
}
@keyframes blink {
	0%,100% { opacity: 1; }
	50% { opacity: 0.18; }
}

.spot-dot{
	--size: 0.5rem;				/* 中心点サイズ */
	--ring: 1px;				/* 波紋の線の太さ */
	--color: #39e1ff;			/* LIVE色（ネオン） */
	--duration: 2.2s;			/* 波紋の速度 */
	--scale: 2.2;				/* 波紋の広がり */
	
	position: absolute;
	z-index: 2;
	width: var(--size);
	height: var(--size);
	display: inline-block;
	border-radius: 999px;
	background: var(--color);
	
	transform: translate(-50%, -50%);
	
	box-shadow:
0 0 0 1px #000,
0 0 0 1px var(--color),
0 0 8px rgba(57,225,255,.9),
0 0 18px rgba(57,225,255,.6);
	/*
	background:var(--color);
	box-shadow:
	0 0 6px rgba(57,225,255,.9),
	0 0 14px rgba(57,225,255,.7);
	*/
}
	
	/* 波紋（2枚） */
.spot-dot::before,
.spot-dot::after{
	content:"";
	position:absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%) scale(1);
	border-radius: 999px;
	border: var(--ring) solid var(--color);
	opacity: 0;
	animation: liveRipple var(--duration) infinite;
}
	
.spot-dot::after{
	animation-delay: calc(var(--duration) / 2);
}
	
@keyframes liveRipple{
0%   { transform: translate(-50%,-50%) scale(1.0); opacity: 0; }
15%  { opacity: .85; }
100% { transform: translate(-50%,-50%) scale(var(--scale)); opacity: 0; }
}
	
/* アニメ苦手配慮（OS設定に従う） */
@media (prefers-reduced-motion: reduce){
	.spot-dot::before, .spot-dot::after{ animation: none; opacity: 0; }
}

#night-overlay{
	position:absolute;
	inset:0;
	pointer-events:none;
	z-index:1;
	overflow:hidden;
	
	/*
	地軸23.4度
	rotate: -23.4deg;
	*/
}

#night-overlay .night-slab{
	position:absolute;
	top:0;
	height:100%;
	width:48%;	/* 12/25 = 48% */
	left: calc(var(--night-left, 0) * 1%);   /* ★ここがポイント */
	background: linear-gradient(
		to right,
		rgba(0,0,0,0.10) 0%,
		rgba(0,0,0,0.30) 12%,
		rgba(0,0,0,0.50) 24%,
		rgba(0,0,0,0.50) 76%,
		rgba(0,0,0,0.30) 88%,
		rgba(0,0,0,0.10) 100%
	);
	mix-blend-mode:multiply;
}