@charset "UTF-8";

/* --------------------------------------------------------------------------------------
	キービジュアル
--------------------------------------------------------------------------------------- */

.key-award {
	background: url(../img/award/award-main-bg.png) no-repeat center top;
	min-height: 834px;
	padding-top: 190px;
}

@media (min-width: 1681px) {
	.key-award {
		background-size: cover;
		min-height: 50.333vw;
	}
}

.key-award .logo {
	margin: auto;
	width: 480px;
}

.key-award .head-title { margin-top: 32px; }

.key-award .head-title strong { font-size: 40px; }

.key-award .head-title strong,
.key-award .head-title small {
	background: linear-gradient(90deg, #F6AA1E 0%, #FFFDCA 20%, #EC9A44 40%, #E5BF5E 60.1%, #FBE68A 81.25%, #EC9A44 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-inline: auto;
	width: fit-content;
}

@media (max-width: 900px) {

	.key-award {
		background-position: center center;
		background-size: cover;
		min-height: 0;
		padding-bottom: 12.484vw;
		padding-top: 24.969vw;
	}

	.key-award .logo {
		margin-inline: auto;
		width: 59.925vw;
	}

	.key-award .head-title { margin-top: 3.995vw; }

	.key-award .head-title strong { font-size: 5.993vw; }

}

/* --------------------------------------------------------------------------------------
	導入文（キービジュアルと受賞施設の間）
--------------------------------------------------------------------------------------- */

.award-intro {
	max-width: 900px;
	padding-top: 80px;
	text-align: left;
}

.award-intro .catch {
	font-size: 28px;
	font-weight: var(--Bold);
	line-height: 160%;
	text-align: center;
}

.award-intro p {
	line-height: 200%;
	margin-top: 24px;
}

.award-intro .catch + p { margin-top: 40px; }

@media (max-width: 900px) {

	.award-intro { padding-top: 9.988vw; }

	.award-intro .catch { font-size: 4.494vw; }

	.award-intro p {
		font-size: 3.496vw;
		line-height: 180%;
		margin-top: 3.995vw;
	}

	.award-intro .catch + p { margin-top: 5.993vw; }

}

/* --------------------------------------------------------------------------------------
	一覧
--------------------------------------------------------------------------------------- */

.award-list-wrap { width: min(100% - 60px, 1230px); }

.award-list-wrap .award-title { text-align: center; }

.award-list-wrap .award-title strong {
	display: block;
	font-size: 32px;
	font-weight: var(--Bold);
	line-height: 150%;
}

.award-list-wrap .award-title small {
	display: block;
	font-weight: var(--Bold);
	line-height: 200%;
	margin-top: 4px;
}

.award-list {
	display: flex;
	flex-wrap: wrap;
	gap: 40px 2.43%;
	margin-top: 64px;
}

.award-list .award-item {
	background-color: #f9f6ec;
	border-top-left-radius: 20px;
	display: block;
	max-width: 31.7%;
	overflow: hidden;
	width: 100%;
}

/* アーカイブの絞り込みで外れたカード。display: block より強くする */
.award-list .award-item[hidden] { display: none; }

.award-list .award-item .photo {
	overflow: hidden;
	position: relative;
}

.award-list .award-item .photo .image img {
	/* 施設ごとに写真の縦横比が違うので、カードの高さが揃うよう 3:2 に切り抜く */
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: all .3s ease-in-out;
	width: 100%;
}

.award-list .award-item .photo .icon-banner {
	bottom: 10px;
	position: absolute;
	right: 12px;
}

@media (any-hover: hover) {

	.award-list .award-item .photo:hover .image img { transform: scale(1.05); }

}

.award-list .award-item .award-text {
	color: #000;
	padding: 24px 16px;
}

.award-list .award-item .star {
	display: flex;
	gap: 6px;
}

.award-list .award-item .name-column,
.award-list .award-item .name-column dd { margin-top: 10px; }

.award-list .award-item .name-column dt {
	font-size: 20px;
	font-weight: var(--Bold);
}

.award-list .award-item .area-column  {
	align-items: center;
	background: url(../img/common/icon-pin.svg) no-repeat left center;
	display: flex;
	flex-wrap: wrap;
	gap: 3px 24px;
	margin-top: 16px;
	padding-left: 26px;
}

.award-list .award-item .area-column dt {
	align-items: center;
	display: flex;
	min-height: 24px;
}

.award-list .award-item .area-column dd { font-size: 78%; }

.award-list .award-item .water {
	font-size: 14px;
	margin-top: 10px;
}

.award-list-wrap .award-empty {
	margin-top: 64px;
	text-align: center;
}

@media (max-width: 900px) {

	.award-list-wrap { width: min(100% - 12.484vw, 1230px); }

	.award-list-wrap .award-title strong { font-size: 5.993vw; }

	.award-list-wrap .award-title small {
		font-size: 3.496vw;
		margin-top: 0;
	}

	.award-list {
		gap: 7.99vw;
		margin-top: 7.99vw;
	}

	.award-list-wrap .award-empty { margin-top: 7.99vw; }

	.award-list .award-item {
		border-top-left-radius: 2.497vw;
		max-width: 100%;
	}

	.award-list .award-item .photo .icon-banner {
		bottom: 2.497vw;
		right: 2.996vw;
	}

	.award-list .award-item .award-text { padding: 4.994vw 3.995vw; }

	.award-list .award-item .star { gap: 1.498vw; }

	.award-list .award-item .star img { width: 4.994vw; }

	.award-list .award-item .name-column,
	.award-list .award-item .name-column dd { margin-top: 2.497vw; }

	.award-list .award-item .name-column dt { font-size: 4.494vw; }

	.award-list .award-item .area-column {
		background-size: 4.494vw auto;
		gap: .749vw 4.994vw;
		margin-top: 3.995vw;
		padding-left: 6.492vw;
	}

	.award-list .award-item .area-column dt { min-height: 5.993vw; }

	.award-list .award-item .water {
		font-size: 3.246vw;
		margin-top: 2.497vw;
	}

}

/* --------------------------------------------------------------------------------------
	詳細
--------------------------------------------------------------------------------------- */

.details-name {
	padding-bottom: 56px;
	padding-top: 160px;
	text-align: center;
}

.details-name .star {
	display: flex;
	gap: 6px;
	justify-content: center;
}

.details-name h1 {
	font-size: 40px;
	font-weight: var(--Bold);
	margin-top: 24px;
}

.details-name h2 {
	font-size: 20px;
	font-weight: var(--Bold);
	margin-top: 20px;
}

.award-swiper,
.award-thumbs { overflow: hidden; }

.award-swiper .swiper-wrapper,
.award-swiper .swiper-slide  { height: 880px; }

.award-swiper .swiper-slide img,
.award-thumbs .swiper-slide img {
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.award-thumbs { margin-top: 20px; }

.award-thumbs .swiper-slide {
	cursor: pointer;
	height: 160px;
	opacity: .5;
	transition: opacity .3s;
	width: 160px;
}

.award-thumbs .swiper-slide-thumb-active { opacity: 1; }

/* Swiper が動き出す前（.swiper-initialized が付く前）も、動き出した後と同じ位置に並べる。
   間隔は common.js の spaceBetween（PC 20px / SP 8px）と揃えること。
   safe center … 枚数が多くて幅に収まらない時は左寄せ（Swiper も同じ動きをする） */
.award-thumbs:not(.swiper-initialized) .swiper-wrapper {
	gap: 20px;
	justify-content: safe center;
}

.award-thumbs:not(.swiper-initialized) .swiper-slide:first-child { opacity: 1; }

.comment-section {
	margin-top: 40px;
	padding-bottom: 80px;
	text-align: center;
}

.comment-section h2 {
	background: url(../img/common/icon-pin.svg) no-repeat left center;
	display: inline-block;
	font-size: 20px;
	min-height: 23px;
	padding-left: 28px;
}

.comment-section .comment { margin-top: 103px; }

.comment-section .comment dt {
	border-bottom: 1px solid var(--color-gold);
	color: var(--color-gold);
	font-size: 22px;
	font-weight: var(--Bold);
	padding-bottom: 8px;
}

.comment-section .comment dd {
	line-height: 1.8;
	margin-top: 24px;
	text-align: left;
}

.award-section .inner { max-width: 864px; }

.award-section .line-title,
.facility-details .facility-info .line-title {
	border-bottom: 1px solid #000;
	font-size: 22px;
	font-weight: var(--Bold);
	margin-bottom: 24px;
	padding-bottom: 8px;
	width: 100%;
}

.award-section .bathtub {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.award-section .bathtub .column {
	max-width: 48.611%;
	width: 100%;
}

.award-section .bathtub .column .star {
	display: flex;
	gap: 4px;
}

.table-style dl { display: table-row; }

.table-style dt,
.table-style dd { padding: 8px 0; }

.table-style dt {
	display: table-cell;
	font-weight: var(--Bold);
	white-space: nowrap;
	width: 90px;
}

.table-style dd {
	display: table-cell;
	line-height: 1.8;
	padding-left: 8px;
}

.award-section .comment { margin-top: 80px; }

.award-section .comment .text { line-height: 1.8; }

.facility-details .facility-info {
	background-color: #fff;
	color: #000;
	padding: 40px 90px 60px;
}

.facility-details .facility-info a {
	color: #000;
	text-decoration: underline;
}

.facility-details .facility-info .facility-section {
	display: flex;
	justify-content: space-between;
}

.facility-details .facility-info .facility-section .column {
	max-width: 49.157%;
	width: 100%;
}

.facility-details .facility-info .facility-section .column dl { font-size: 16px; }
.facility-details .facility-info .facility-section .column dt { width: 76px; }

.facility-details .facility-info .facility-section .column .note {
	font-size: 16px;
	font-weight: var(--Bold);
	margin-top: 8px;
}

.facility-details .facility-info .facility-section .google-map {
	max-width: 392px;
	width: 100%;
}

.facility-details .facility-info .facility-section .google-map iframe {
	height: 306px;
	width: 100%;
}

.facility-details .warnings {
	border: 20px solid transparent;
	border-image: url(../img/common/frame-chamfer.svg) 20 fill / 20px stretch;
	color: #000;
	margin-top: 64px;
	padding: 28px 70px;
}

.facility-details .warnings h3 {
	background-color: var(--color-orange);
	border-radius: 100vw;
	color: #fff;
	font-size: 20px;
	font-weight: var(--SemiBold);
	padding: 4px 0;
	text-align: center;
}

.facility-details .warnings h4 {
	color: var(--color-orange);
	line-height: 1.8;
	margin-top: 24px;
}

.facility-details .warnings .note {
	font-size: 16px;
	margin-left: 1em;
	margin-top: 16px;
	text-indent: -1em;
}

.facility-details .border-banner { margin-top: 64px; }

.clause-wrap { background-color: #1D1D1D; }

.clause-wrap .border-banner { margin-top: 50px; }

@media (max-width: 900px) {

	.details-name {
		padding: 27.466vw 6.242vw 7.99vw;
	}

	.details-name .star { gap: 1.498vw; }

	.details-name .star img { width: 5.993vw; }

	.details-name h1 {
		font-size: 5.993vw;
		line-height: 1.5;
		margin-top: 3.995vw;
	}

	.details-name h2 {
		font-size: 3.496vw;
		margin-top: 2.497vw;
	}

	.award-swiper .swiper-wrapper,
	.award-swiper .swiper-slide { height: 66.667vw; }

	.award-thumbs { margin-top: 2.497vw; }

	.award-thumbs:not(.swiper-initialized) .swiper-wrapper { gap: 8px; }

	.award-thumbs .swiper-slide {
		height: 17.478vw;
		width: 17.478vw;
	}

	.comment-section {
		margin-top: 7.99vw;
		padding-bottom: 12.484vw;
	}

	.comment-section h2 {
		background-size: 3.745vw auto;
		font-size: 3.995vw;
		min-height: 4.869vw;
		padding-left: 5.743vw;
	}

	.comment-section .comment { margin-top: 12.484vw; }

	.comment-section .comment dt {
		font-size: 4.494vw;
		padding-bottom: 1.998vw;
	}

	.comment-section .comment dd { margin-top: 3.995vw; }

	.award-section .line-title,
	.facility-details .facility-info .line-title {
		font-size: 4.494vw;
		margin-bottom: 3.995vw;
		padding-bottom: 1.998vw;
	}

	/* 2列 → 縦積み。左列（評価〜pH）の下に右列（湧出形態〜備考）が続く */
	.award-section .bathtub { display: block; }

	.award-section .bathtub .column { max-width: none; }

	.award-section .bathtub .column .star img { width: 4.494vw; }

	.table-style dt,
	.table-style dd { padding: 1.998vw 0; }

	.table-style dt { width: 17.478vw; }

	.table-style dd { padding-left: 1.998vw; }

	.award-section .comment { margin-top: 12.484vw; }

	.facility-details .facility-info { padding: 7.99vw 4.994vw 9.988vw; }

	.facility-details .facility-info .facility-section { display: block; }

	.facility-details .facility-info .facility-section .column { max-width: none; }

	.facility-details .facility-info .facility-section .column dl,
	.facility-details .facility-info .facility-section .column .note { font-size: 3.246vw; }

	.facility-details .facility-info .facility-section .column dt { width: 15.98vw; }

	/* 長いURLで枠からはみ出さないように */
	.facility-details .facility-info .facility-section .column dd { word-break: break-all; }

	.facility-details .facility-info .facility-section .column .note { margin-top: 1.998vw; }

	.facility-details .facility-info .facility-section .google-map {
		margin-top: 4.994vw;
		max-width: none;
	}

	.facility-details .facility-info .facility-section .google-map iframe { height: 59.925vw; }

	.facility-details .warnings {
		border-image-width: 2.497vw;
		border-width: 2.497vw;
		margin-top: 9.988vw;
		padding: 3.995vw 2.497vw;
	}

	.facility-details .warnings h3 {
		font-size: 3.995vw;
		padding: .999vw 0;
	}

	.facility-details .warnings h4 { margin-top: 3.995vw; }

	.facility-details .warnings .note {
		font-size: 3.246vw;
		margin-top: 2.996vw;
	}

	.facility-details .border-banner { margin-top: 7.99vw; }

	.clause-wrap .border-banner { margin-top: 7.99vw; }

}