/*
 * /hotel/ 配下のスタイル。
 *
 * テーマ（Cocoon）の外枠の中に入るため、ページ全体のレイアウトは定義しない。
 * 色は極力指定せず、テーマの設定を活かす。クラス名は yg- 接頭辞で衝突を避ける。
 */

.yg-page {
	max-width: 100%;
}

/* パンくず */
.yg-breadcrumb {
	font-size: .85em;
	margin-bottom: 1.2em;
	line-height: 1.8;
}

.yg-breadcrumb__sep {
	margin: 0 .5em;
	opacity: .5;
}

/* 見出し・本文 */
.yg-title {
	margin: 0 0 .6em;
	line-height: 1.4;
}

.yg-lead {
	margin-bottom: 1.5em;
}

/*
 * 独自文の本文。
 *
 * entry-content クラスを併記しており、見出し・リスト・行間などの装飾は
 * テーマ（Cocoon）に任せる。記事ページと同じ見た目に揃えるため、
 * ここでは余白以外を指定しない。
 */
.yg-content {
	margin-bottom: 2.5em;
}

.yg-section {
	margin: 2.5em 0;
}

/*
 * セクション見出し。
 *
 * 装飾はテーマに任せる（ページの外枠に article クラスを付けており、
 * Cocoon のスキンが .article h2 として装飾する）。ここで枠線などを
 * 足すと二重になるため、余白だけを指定する。
 */
.yg-section__title {
	margin: 0 0 .8em;
}

.yg-section__count {
	font-size: .7em;
	font-weight: normal;
	margin-left: .6em;
	opacity: .7;
}

.yg-meta {
	font-size: .9em;
	margin-bottom: 1.2em;
}

.yg-meta__label {
	display: inline-block;
	padding: .1em .6em;
	margin-right: .6em;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: .85em;
}

/* 宿カード */
.yg-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.2em;
}

.yg-card {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(128, 128, 128, .3);
	border-radius: 6px;
	overflow: hidden;
}

.yg-card__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(128, 128, 128, .1);
}

.yg-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yg-card__noimage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: .85em;
	opacity: .6;
}

.yg-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: .9em;
}

.yg-card__onsen {
	font-size: .8em;
	margin: 0 0 .3em;
	opacity: .75;
}

.yg-card__title {
	font-size: 1.02em;
	margin: 0 0 .4em;
	line-height: 1.5;
}

.yg-card__catch {
	font-size: .85em;
	margin: 0 0 .6em;
	line-height: 1.6;
	opacity: .85;
}

/* 料金 */
.yg-rate {
	margin: 0 0 .8em;
	line-height: 1.5;
}

.yg-rate__label {
	font-size: .8em;
	margin-right: .4em;
	opacity: .75;
}

.yg-rate__value {
	font-size: 1.2em;
	font-weight: bold;
}

.yg-rate__unit {
	font-size: .85em;
}

.yg-rate__date {
	display: block;
	font-size: .75em;
	opacity: .65;
}

.yg-rate--none {
	font-size: .85em;
	opacity: .7;
}

/* CTA */
.yg-cta {
	display: block;
	margin-top: auto;
	padding: .7em 1em;
	border-radius: 4px;
	background: #d94f3d;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	line-height: 1.4;
}

.yg-cta:hover {
	opacity: .85;
	color: #fff;
}

.yg-cta--large {
	font-size: 1.1em;
	padding: .9em 1.2em;
}

.yg-cta-block {
	margin: 1.5em 0 2em;
	padding: 1.2em;
	border: 1px solid rgba(128, 128, 128, .3);
	border-radius: 6px;
}

/* 料金レンジ */
.yg-ratebar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3em .8em;
	margin: 0 0 1.2em;
	padding: .7em 1em;
	border: 1px solid rgba(128, 128, 128, .3);
	border-radius: 5px;
}

.yg-ratebar__label {
	font-size: .82em;
	opacity: .75;
}

.yg-ratebar strong {
	font-size: 1.1em;
}

.yg-ratebar__note {
	font-size: .78em;
	opacity: .65;
}

/* エリア一覧・タグ */
.yg-region {
	margin-bottom: 1.6em;
}

.yg-region__title {
	font-size: 1em;
	margin: 0 0 .5em;
}

.yg-region__list,
.yg-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.yg-region__list a,
.yg-tags a {
	display: inline-block;
	padding: .35em .9em;
	border: 1px solid rgba(128, 128, 128, .4);
	border-radius: 999px;
	text-decoration: none;
	font-size: .9em;
}

.yg-tags a.is-current {
	background: rgba(128, 128, 128, .18);
	font-weight: bold;
}

/* エリア名だけでは場所が分かりにくいため、県名を小さく添える */
.yg-tags__sub {
	margin-left: .4em;
	font-size: .82em;
	opacity: .6;
}

.yg-arealist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: .4em 1.2em;
}

.yg-arealist li {
	padding: .5em 0;
	border-bottom: 1px dotted rgba(128, 128, 128, .35);
}

.yg-arealist__count {
	font-size: .8em;
	margin-left: .5em;
	opacity: .7;
}

.yg-arealist__draft {
	font-size: .75em;
	margin-left: .4em;
	padding: .1em .4em;
	border-radius: 3px;
	background: rgba(214, 54, 56, .12);
	color: #a02;
}

/* 宿詳細 */
.yg-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: .8em;
	margin-bottom: 1.5em;
}

.yg-gallery__item {
	margin: 0;
}

.yg-gallery__item:first-child {
	grid-column: 1 / -1;
}

.yg-gallery__item img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.yg-gallery__item figcaption {
	font-size: .78em;
	margin-top: .3em;
	opacity: .75;
	line-height: 1.5;
}

.yg-table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92em;
}

.yg-table th,
.yg-table td {
	padding: .7em .8em;
	border: 1px solid rgba(128, 128, 128, .3);
	text-align: left;
	vertical-align: top;
}

.yg-table th {
	width: 30%;
	background: rgba(128, 128, 128, .08);
	white-space: nowrap;
}

.yg-table p {
	margin: 0 0 .4em;
}

.yg-maplink {
	display: inline-block;
	margin-left: .6em;
	font-size: .9em;
}

.yg-plans {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .8em;
}

.yg-plan {
	padding: .9em;
	border: 1px solid rgba(128, 128, 128, .3);
	border-radius: 5px;
}

.yg-plan__name {
	font-size: 1em;
	margin: 0 0 .5em;
	line-height: 1.5;
}

.yg-plan__meta {
	margin: 0 0 .4em;
	display: flex;
	flex-wrap: wrap;
	gap: .35em;
}

.yg-badge {
	display: inline-block;
	padding: .15em .6em;
	border-radius: 3px;
	font-size: .78em;
	background: rgba(128, 128, 128, .15);
}

.yg-plan__rooms,
.yg-plan__rate {
	margin: .2em 0 0;
	font-size: .88em;
}

.yg-plan__rate {
	font-weight: bold;
}

/* PR表記 */
.yg-pr {
	display: inline-block;
	margin: 0 0 1.2em;
	padding: .3em .8em;
	border: 1px solid rgba(128, 128, 128, .4);
	border-radius: 3px;
	font-size: .8em;
	opacity: .85;
}

/* 記事下部の導線 */
.yg-article-links {
	margin-top: 2.5em;
}

.yg-pillar-links {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
	margin-bottom: 2em;
}

.yg-pillar-link {
	display: inline-block;
	padding: .7em 1.4em;
	border: 2px solid currentColor;
	border-radius: 4px;
	text-decoration: none;
	font-weight: bold;
}

.yg-pillar-link:hover {
	opacity: .75;
}

/* 関連・注記 */
.yg-related {
	list-style: none;
	margin: 0;
	padding: 0;
}

.yg-related li {
	padding: .5em 0;
	border-bottom: 1px dotted rgba(128, 128, 128, .35);
}

.yg-notice,
.yg-stale,
.yg-empty {
	font-size: .85em;
	opacity: .8;
	margin: 1em 0;
}

.yg-stale {
	padding: .6em .9em;
	border-left: 3px solid rgba(128, 128, 128, .5);
}

.yg-draft-notice {
	padding: .8em 1em;
	margin-bottom: 1.5em;
	border: 1px solid #d6a300;
	border-radius: 4px;
	background: rgba(214, 163, 0, .1);
	font-size: .9em;
}

.yg-credit {
	margin-top: 2.5em;
	padding-top: 1.2em;
	border-top: 1px solid rgba(128, 128, 128, .3);
	font-size: .85em;
}

.yg-pagination {
	margin-top: 1.5em;
	text-align: center;
}

.yg-pagination .page-numbers {
	display: inline-block;
	padding: .4em .8em;
	margin: 0 .15em;
	border: 1px solid rgba(128, 128, 128, .4);
	border-radius: 3px;
	text-decoration: none;
}

.yg-pagination .page-numbers.current {
	background: rgba(128, 128, 128, .2);
	font-weight: bold;
}

@media (max-width: 600px) {
	.yg-cards {
		grid-template-columns: 1fr;
	}

	.yg-table th {
		width: 34%;
	}
}