@charset "UTF-8";

/* ------------------------------------------------------
   基本設定
------------------------------------------------------ */
:root {
	--v-space: clamp(90px, 9vw, 120px);
	--main-bg: #f2f2f2;
	--main-text: #252525;
	--list-bg: #fff;
	--list-text: #666;
	--shadow-color: 0, 0, 0;
	--side-bg: #d3d5de;
	--area-table: #939ec4;
	--area-border: #666;
	--area-th: #c5cad9;
	--area-td: #f2f2f2;
	--jma-container: #f2f2f2;
	--jma-border: #666;
	--accent-color: #2d4fe3;
	--accent-color-rgb: 45, 79, 227;
}

body {
	background-color: var(--main-bg);
	color: var(--main-text);
}
a {
	color: var(--accent-color);
}

/* sticky-footer
---------------------- */
body > footer.global-footer {
	position: sticky;
	top: 100vh;
}


/* ------------------------------------------------------
   ヘッダー
------------------------------------------------------ */
.header {
	padding: calc(var(--v-space) / 2) 0 0;
	background: #111;
	text-align: center;
}
.page-title {
	color: #fff;
	font-family: "Nico Moji", sans-serif;
	font-size: max(2rem, min((1.636rem + 1.82vw), 3rem));
	line-height: 1;
}
.page-desc {
	display: inline-block;
	margin: .5em 1rem 0;
	padding-top: .5em;
	padding-bottom: calc(var(--v-space) / 2);
	border-top: 1px solid #999;
	font-size: max(.813rem, min((.744rem + .34vw), 1rem));
	color: #fff;
}

/* 臨時（Youtube）
---------------------- */
.rinji {
	position: relative;
	z-index: 0;
	background: center bottom no-repeat;
	background-size: cover;
	overflow: hidden;
}
.rinji::before {
	content: "";
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: -5px;
	right: -5px;
	z-index: -2;
	background: inherit;
	filter: blur(8px);
}
.rinji::after {
	content: "";
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: -5px;
	right: -5px;
	z-index: -1;
	background: url(/web-cam/image/dot.png) repeat;
	opacity: .5;
}
#rinji .category-title {
	visibility: hidden;
	font-size: 0;
}
.rinji-container {
	position: relative;
	margin: auto;
	max-width: 960px;
}
.rinji .youtube-container {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin: auto;
	max-width: 960px;
}
.rinji .youtube-container iframe {
	width: 100%;
	height: 100%;
}
.rinji .sp-meta {
	margin: auto;
	max-width: 960px;
	background: rgba(0, 0, 0, .5);
}
@media (min-width: 961px) {
	#rinji .rinji-container {
		margin: clamp(1rem, -0.25rem + 5.33vw, 3.75rem) auto;
	}
}

/* 特設
---------------------- */
.special {
	position: relative;
	z-index: 0;
	background: center bottom no-repeat;
	background-size: cover;
	overflow: hidden;
}
.special::before {
	content: "";
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: -5px;
	right: -5px;
	z-index: -2;
	background: inherit;
	filter: blur(8px);
}
.special::after {
	content: "";
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: -5px;
	right: -5px;
	z-index: -1;
	background: url(/web-cam/image/dot.png) repeat;
	opacity: .5;
}
#special .category-title {
	visibility: hidden;
	font-size: 0;
}
.sp-cam {
	position: relative;
	margin: auto;
	max-width: 960px;
}
.sp-thumb img {
	margin: auto;
	width: 960px;
}
.sp-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: .3em 1em;
	width: 100%;
	background: rgba(0, 0, 0, .5);
}
.sp-title {
	color: #fff;
	font-size: max(1rem, min((.955rem + .23vw), 1.125rem));
}
.sp-meta > p {
	margin-bottom: 0;
	color: #fff;
	font-size: var(--12px);
}
.sp-meta > p::before {
	content: "/";
	padding: 0 .5em;
}
.sp-meta p:last-child::before {
	content: "";
}
@media (min-width: 961px) {
	#special .sp-cam {
		margin: clamp(1rem, -0.25rem + 5.33vw, 3.75rem) auto;
	}
}

/* 特設 2カラムver
---------------------- */
.hero {
	position: relative;
	z-index: 0;
	background: center bottom no-repeat;
	background-size: cover;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: -5px;
	right: -5px;
	z-index: -2;
	background: inherit;
	filter: blur(8px);
}
.hero::after {
	content: "";
	position: absolute;
	top: -5px;
	bottom: -5px;
	left: -5px;
	right: -5px;
	z-index: -1;
	background: url(/web-cam/image/dot.png) repeat;
	opacity: .5;
}
#hero .category-title {
	visibility: hidden;
	font-size: 0;
}
.hero-container {
	display: grid;
	--col-width: 310px; /* 2col */
	--col-width: 400px; /* 4col */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-width)), 1fr));
	grid-gap: 1em .3em;
	margin: 0 auto;
	padding: clamp(1rem, -0.25rem + 5.33vw, 3.75rem) 1rem;
	max-width: 1200px;
}
.hero-list {
	list-style: none;
	background: var(--list-bg);
}
.hero .youtube-container {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin: auto;
	max-width: 960px;
}
.hero .youtube-container iframe {
	width: 100%;
	height: 100%;
}
.hero .sp-meta {
	flex-direction: column;
	margin: auto;
	padding: .75em .5em;
	max-width: 960px;
	background: var(--list-bg);
}
.hero .sp-title,
.hero .sp-meta p {
	color: var(--main-text);
}
.hero .sp-meta > p {
	margin-top: auto;
}
.hero .sp-meta > p::before {
	padding: 0;
}


/* ------------------------------------------------------
   カテゴリーメニュー
------------------------------------------------------ */
.category-nav {
	width: 100%;
	background: rgba(var(--accent-color-rgb), 1);
	transition: padding .3s;
}
.category-menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	text-align: center;
}
.category-menu li a {
	display: block;
	padding: 1em .5em;
	color: #fff;
	font-size: var(--18px);
	font-weight: bold;
	text-shadow: -1px 1px 0 rgba(30, 53, 156, .8);
}
.category-menu li a:hover {
	color: #9ff;
	text-shadow: 1px 0 5px #9ff;
}

/* js設定 */
#category-nav.menu-fix {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	animation-duration: .3s;
}
#category-nav ul li.current a {
	color: #d9e32d;
	text-shadow: 1px 0 5px #ffc211;
}


/* ------------------------------------------------------
   コンテンツ
------------------------------------------------------ */
.main {}
.i-container {
	margin: 0 auto;
	padding: 0 1rem;
	max-width: 1200px;
}

/* セクション
---------------------- */
.category {
	margin: 0 auto;
	padding: calc(var(--v-space) / 2) 1rem;
	background-color: var(--main-bg);
}
.category-title {
	margin-bottom: 1em;
	font-size: max(1.5rem, min((1.318rem + .91vw), 2rem));
	line-height: 1;
}
section:not(:first-child) > h2 {
	padding-top: 1em;
}
.category-title span {
	margin-left: .2em;
	color: #999;
	font-size: max(.75rem, min((0.659rem + .45vw), 1em));
}

.category-title-sub {
	display: flex;
	align-items: center;
	margin-top: 2em;
	margin-bottom: 1em;
	font-size: max(1.25rem, min((1.068rem + .91vw), 1.75rem));
	line-height: 1;
}
.category-title-sub::after {
	content: "";
	flex-grow: 1;
	border-bottom: 1px solid #666;
	border-image: linear-gradient(to right, #666 0%, #f0f0f0 100%);
	border-image-slice: 1;
	margin-left: .5em;
	padding-right: 1rem;
}

/* カメラリスト
---------------------- */
.cam-list {
	display: grid;
	--col-width: 300px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col-width)), 1fr));
	grid-gap: 1rem;
	padding: 0;
	list-style: none;
}
.cam-list-item {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--list-bg);
	box-shadow: 0 1px 4px rgba(var(--shadow-color), .1);
}
.cam-thumb {
	position: relative;
	order: -1;
	background-color: #000;
}
.cam-image {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	overflow: hidden;
}
.cam-image > img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
}
.cam-link {
	position: absolute;
	display: block;
	bottom: -1.5rem;
	right: 0;
	z-index: 1;
	margin-right: .5em;
	width: 3rem;
	height: 3rem;
	background: url(/web-cam/image/icon-play.svg) no-repeat;
	opacity: .7;
}
.cam-title {
	margin: .75rem 4rem 0 .5rem;
	font-size: 1rem;
	line-height: 1.2;
}
.cam-meta {
	display: flex;
	flex-wrap: wrap;
	margin: .5rem .5rem .75rem;
}
.cam-meta p {
	margin-bottom: 0;
}
.cam-map {
	margin-right: .5em;
	color: var(--list-text);
	font-size: var(--12px);
}
.cam-map::before {
	content: "";
	display: inline-block;
	padding-right: 1.5em;
	width: 1rem;
	height: 1rem;
	background: url(/web-cam/image/icon-map.svg) no-repeat;
	vertical-align: text-top;
}
.cam-owner {
	margin-right: .5em;
	color: var(--list-text);
	font-size: var(--12px);
}
.cam-owner::before {
	content: "";
	display: inline-block;
	padding-right: 1.5em;
	width: 1rem;
	height: 1rem;
	background: url(/web-cam/image/icon-camera.svg) no-repeat;
	vertical-align: text-top;
}
.cam-metasub {
	color: var(--list-text);
	font-size: var(--12px);
}
.cam-metasub::before {
	content: "";
	display: inline-block;
	margin-top: .1em;
	padding-right: 1.5em;
	width: 1rem;
	height: 1rem;
	background: url(/web-cam/image/icon-handshake.svg) no-repeat;
	vertical-align: text-top;
}

/* モーダル
---------------------- */
.modaal-inner-wrapper {
	padding: 16px;
}
.modaal-video-wrap {
	margin: auto;
}


/* 補足
------------------------------------------------------ */
.aside {
	padding: calc(var(--v-space) / 2) 0 calc((var(--v-space) / 2) - .5em);
	background-color: var(--side-bg);
}

/* 注意書き
---------------------- */
.notice-list {
	margin-bottom: 1em;
	list-style: none;
}
.notice {
	margin-bottom: .3em;
}
.notice::before {
	content: "";
	display: inline-block;
	padding-right: 1.3em;
	margin-bottom: .2em;
	width: 1rem;
	height: 1rem;
	background: url(/web-cam/image/icon-notice.svg) no-repeat;
	vertical-align: middle;
}

/* エリア一覧
---------------------- */
details > summary {
	padding: .5em 0;
	width: 15em;
	font-weight: bold;
	cursor: pointer;
}
details[open] + details {
	margin-top: 2.5em;
}
.area-table-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	grid-gap: 1rem;
}
.area-table {
	width: 100%;
	border-collapse: collapse;
}
.area-table caption {
	padding: .5em;
	background-color: var(--area-table);
	border: 1px solid var(--area-border);
	border-bottom: none;
	font-weight: bold;
}
.area-table tr {
	border: 1px solid var(--area-border);
}
.area-table th {
	padding: .3em;
	width: 7em;
	background-color: var(--area-th);
	border-right: 1px solid var(--area-border);
	font-size: 80%;
}
.area-table td {
	padding: .5em;
	width: calc(100% - 7em);
	background-color: var(--area-td);
	font-size: 90%;
}

/* 気象庁 火山監視カメラ
---------------------- */
.jma-container {
	padding: 1em;
	background-color: var(--jma-container);
	border: 1px solid var(--jma-border);
}
.jma-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	grid-gap: 1em;
	margin-bottom: 1em;
	padding-bottom: 2em;
	border-bottom: 1px solid #aaa;
}
.jma-list dt {
	margin-bottom: .3em;
}
.jma-list ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}
.jma-list li {
	font-size: 90%;
}
.jma-list li a {
	display: block;
	padding: .3em;
	min-width: 4em;
	border: 1px solid var(--accent-color);
	border-radius: .3em;
	text-align: center;
}

.jma-container p:nth-of-type(2) {
	margin-bottom: 0;
}

/* ------------------------------------------------------
   ムービー movie.html
------------------------------------------------------ */
body#movie-page {
	background-color: #000;
}
.mov-container {
	margin: auto;
}

/* swiper */
.swiper {
	margin: auto;
	width: 100%;
	height: 100vh;
}
.swiper-wrapper {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%;
	height: 100vh;
}
.swiper-slide {
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.swiper-horizontal > .swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal {
	bottom: 35px;
	top: auto;
}
.swiper-pagination-progressbar {
	background-color: rgba(255, 255, 255, .1);
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
	background-color: rgba(255, 255, 255, .3);
}

.button-start,
.button-stop {
	position: absolute;
	bottom: 5px;
	left: 15px;
	transform: translateX(-50%);
	z-index: 1;
	width: 25px;
	height: 25px;
	cursor: pointer;
}
.flash-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1; /* 必要に応じてボタンを前面に出すためにz-indexを指定 */
	width: 8em;
	opacity: 0;
	transition: opacity .5s ease-in-out;
}
.flash-center.show {
	opacity: 1;
}