@charset "UTF-8";

/*!
 * MUNI KYOTO - Page Styles
 * 役割：各ページ固有のスタイル（カフェ・レストラン・ジム・アクセス等）
 * 依存：components.css
 *
 * @package MUNIKYOTO_WP_THEME
 */

/* ==================================================
   通常ページ（page.php）
================================================== */

.page-fv {
	position: relative;
	width: 100%;
	height: 30vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	color: var(--color-text-sub);
	text-align: center;
	margin-top: 8rem;
}

.page-fv::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.4);
}

.page-fv__inner {
	position: relative;
	z-index: 2;
}

.page-fv__title {
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-family: var(--font-heading);
	color: var(--color-text-sub);
	text-shadow: 0 0.2rem 0.6rem var(--color-text-shadow);
	margin-bottom: 0;
}

.page-main {
	padding: var(--spacing-unit-xlarge) 0;
}

.page-main__inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 2rem;
	line-height: var(--line-height-base);
	color: var(--color-text-main);
}

.page-main__inner h1,
.page-main__inner h2,
.page-main__inner h3 {
	margin-top: 2em;
	margin-bottom: 1em;
}

.page-main__inner p {
	margin-bottom: 1.5em;
}

/* ==================================================
   通常投稿（single-post.php）
================================================== */

.single {
	padding-top: var(--section-padding-y);
}

.single-article {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 10rem;
	/* 記事本文の大きめ余白のため固定値 */
	background-color: var(--color-bg-main);
	box-shadow: 0 0.4rem 1.2rem var(--color-shadow-subtle);
	border-radius: var(--border-radius-sm);
	margin-bottom: var(--section-margin-bottom);
}

.single-meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-unit-small);
	margin-bottom: var(--spacing-unit-medium);
}

.single-cat {
	display: inline-block;
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	font-size: var(--font-size-xsmall);
	padding: 0.2rem var(--spacing-unit-small);
	border-radius: var(--border-radius-sm);
	font-weight: 600;
}

.single-title {
	font-size: var(--font-size-xl);
	margin-top: 80px;
	/* ヘッダー固定分のオフセット。px 固定値維持 */
	margin-bottom: var(--spacing-unit-large);
	line-height: var(--line-height-tight);
}

.single-content {
	margin-bottom: var(--spacing-unit-xlarge);
}

.single-thumb {
	margin-bottom: var(--spacing-unit-large);
}

.single-thumb img {
	width: 100%;
	height: auto;
	border-radius: var(--border-radius-sm);
}

.single-footer {
	text-align: center;
	margin-top: var(--spacing-unit-xlarge);
}

/* ==================================================
   ニュース記事詳細（single-news.php）
================================================== */

.single-news {
	padding-top: var(--section-padding-y);
	padding-bottom: var(--section-margin-bottom);
}

.news-article {
	max-width: 900px;
	margin: 0 auto;
	padding: var(--spacing-unit-large) var(--spacing-unit-medium);
	background-color: var(--color-bg-main);
	line-height: var(--line-height-base);
}

.news-article__header {
	margin-bottom: var(--spacing-unit-large);
	padding-bottom: var(--spacing-unit-medium);
	border-bottom: var(--border-width) solid var(--color-border);
}

.news-article__title {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-tight);
	margin-bottom: var(--spacing-unit-medium);
	color: var(--color-text-main);
}

.news-article__date {
	font-size: var(--font-size-small);
	color: var(--color-accent);
	display: block;
	margin-bottom: var(--spacing-unit-small);
}

.news-article__category {
	display: inline-block;
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	font-size: var(--font-size-xsmall);
	padding: 0.2rem var(--spacing-unit-small);
	border-radius: var(--border-radius-sm);
	font-weight: 600;
	margin-right: var(--spacing-unit-small);
}

.news-article__thumbnail {
	margin-bottom: var(--spacing-unit-large);
}

.news-article__thumbnail img {
	width: 100%;
	height: auto;
	border-radius: var(--border-radius-sm);
}

.news-article__content {
	margin-bottom: var(--spacing-unit-xlarge);
}

.news-article__content h2 {
	margin: 2em 0 1em;
	border-left: 4px solid var(--color-accent);
	padding-left: var(--spacing-unit-small);
	font-size: var(--font-size-large);
	line-height: var(--line-height-tight);
}

.news-article__content h3 {
	margin: 2em 0 1em;
	color: var(--color-accent);
	border-bottom: 1px solid var(--color-accent);
	padding-bottom: 4px;
	font-size: var(--font-size-base);
	line-height: var(--line-height-tight);
}

.news-article__content ul,
.news-article__content ol {
	list-style: disc;
	margin-left: 1.5em;
	padding-left: 0;
}

.news-article__content p {
	margin-bottom: var(--spacing-unit-medium);
	line-height: var(--line-height-base);
}

.news-article figure img {
	max-width: 100%;
	height: auto;
	margin: var(--spacing-unit-medium) auto;
}

/* ナビゲーション */
.news-article__nav {
	margin-top: var(--spacing-unit-xlarge);
	padding-top: var(--spacing-unit-medium);
	border-top: var(--border-width) solid var(--color-border);
}

.news-article__nav-list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: var(--spacing-unit-small);
}

.news-article__nav-item {
	flex: 1;
	text-align: center;
}

.news-article__nav-item a {
	display: inline-block;
	font-size: var(--font-size-small);
	color: var(--color-accent);
	text-decoration: none;
	padding: var(--spacing-unit-small);
	transition: background-color var(--transition-speed-medium)
		var(--transition-timing-ease);
}

/* ==================================================
   ニュースアーカイブ（archive-news.php）
================================================== */

.archive-news {
	padding-bottom: var(--section-margin-bottom);
}

.archive-news .inner {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding-inline: var(--spacing-unit-medium);
}

/* ニュース一覧：背景色と、固定ヘッダー（約 8rem）分を加算した上余白 */
.archive-news .news-section {
	background-color: var(--color-bg-emphasis);
	padding: calc(8rem + var(--section-padding-y)) 0 var(--section-padding-y);
}

/* ==================================================
   モバイル（768px 以下）
================================================== */

@media (max-width: 768px) {
	.single-article {
		padding: var(--spacing-unit-large);
	}

	.news-article {
		padding: var(--spacing-unit-medium) var(--spacing-unit-small);
		max-width: 100%;
	}

	.news-article__title {
		font-size: var(--font-size-large);
	}

	.archive-news .news-section {
		padding-top: calc(4.4rem + var(--section-padding-y));
	}
}

/* ==================================================
   FVなし固定ページ（page-bestrate.php, page-review.php）
================================================== */

.section--static {
	padding-top: calc(var(--section-padding-y) * 2);
	padding-bottom: var(--spacing-unit-large);
}

/* CTAボタンエリア */
.btn-area {
	text-align: center;
	margin-top: var(--spacing-unit-large);
}

/* ==================================================
   Review ページ（page-review.php）
================================================== */

#review {
	background-color: #fff;
}

#review .section__lead {
	text-align: center;
}

#review .section-contact__btn .btn {
	width: 16rem;
	padding-block: 1rem;
}

.review-trustyou {
	border-top: 0.1rem solid var(--color-border);
	padding-top: var(--spacing-unit-medium);
}

.page-template-page-review .section {
	margin-bottom: 0;
}

.page-template-page-review .section--static {
	padding-bottom: 0;
}

.section-contact {
	background-color: var(--color-bg-gray);
	padding: var(--spacing-unit-xlarge) 0;
}

.page-template-page-review .section-contact {
	padding: calc(var(--spacing-unit-xlarge) * 1.5) 0;
}

.section-contact__inner {
	text-align: center;
}

.section-contact__head {
	font-size: var(--font-size-xl);
	margin-bottom: var(--spacing-unit-large);
}

.section-contact__btn {
	margin-bottom: var(--spacing-unit-large);
}

.section-contact__desc {
	line-height: var(--line-height-base);
	font-size: var(--font-size-base);
}

/* ==================================================
   朝食ページ（page-breakfast.php）
================================================== */

.breakfast-info {
	margin: var(--spacing-unit-large) 0;
}

.breakfast-info dt {
	font-weight: 600;
	color: var(--color-accent);
	margin-top: var(--spacing-unit-small);
}

.breakfast-info dd {
	margin: 0 0 var(--spacing-unit-small) var(--spacing-unit-medium);
}

.news-article__content ul.store-details--breakfast {
	margin-top: var(--spacing-unit-large);
	font-size: var(--font-size-small);
	list-style: none;
	padding-left: 0;
}

.news-article__content ul.store-details--breakfast li {
	line-height: var(--line-height-base);
}

/* ==================================================
   採用ページ（page-recruit.php / recruit-item.php）
================================================== */

.recruit-concept {
	margin-top: var(--spacing-unit-xlarge);
	padding-top: var(--spacing-unit-large);
	padding-bottom: var(--spacing-unit-large);
}

.recruit-concept .section__lead {
	text-align: left;
	margin-inline: auto;
	margin-bottom: var(--spacing-unit-medium);
}

.recruit-gallery {
	margin-top: var(--spacing-unit-xlarge);
	margin-bottom: var(--spacing-unit-xlarge);
}

/* ==================================================
   制度・福利厚生グリッド
================================================== */

.recruit-benefits {
	margin-top: var(--spacing-unit-xlarge);
	margin-bottom: var(--spacing-unit-xlarge);
}

.recruit-benefits__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--spacing-unit-large);
	margin-top: var(--spacing-unit-large);
	margin-bottom: var(--spacing-unit-xlarge);
}

.recruit-benefits__item {
	text-align: center;
	background-color: var(--color-bg-emphasis);
	padding: var(--spacing-unit-large);
	border-radius: var(--border-radius-md);
	box-shadow: 0 0.4rem 1rem var(--color-shadow-subtle);
}

.recruit-benefits__item img {
	width: 88px;
	height: 88px;
	/* アイコンサイズの固定値 */
	margin: 0 auto var(--spacing-unit-small);
	display: block;
}

.recruit-benefits__item h3 {
	font-size: var(--font-size-large);
	color: var(--color-accent);
	margin-bottom: var(--spacing-unit-small);
}

.recruit-benefits__item p {
	font-size: var(--font-size-small);
	text-align: left;
}

/* ==================================================
   ジャンプリンク
================================================== */

.recruit-jump-links {
	margin-top: var(--spacing-unit-xlarge);
}

.recruit-jump-links__list {
	display: flex;
	gap: var(--spacing-unit-medium);
	list-style: none;
	padding: 0;
	margin: var(--spacing-unit-large) 0;
	flex-wrap: wrap;
}

.recruit-jump-links__list li a {
	display: inline-block;
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	padding: var(--spacing-unit-small) var(--spacing-unit-medium);
	border-radius: var(--border-radius-md);
	text-decoration: none;
	font-weight: bold;
	transition: background-color var(--transition-speed-medium)
		var(--transition-timing-ease);
}

/* ==================================================
   部署グループ・部署タイトル
================================================== */

.recruit-dept-group {
	margin-top: var(--spacing-unit-xlarge);
}

.dept-title {
	margin-top: var(--spacing-unit-xlarge);
	padding-left: 0.75em;
	border-left: 3px solid var(--color-accent);
	/* 縦線アクセント。3px は視覚的な固定値 */
}

.recruit-empty-message {
	font-size: var(--font-size-small);
	color: var(--color-text-main);
	padding: var(--spacing-unit-medium) 0;
}

/* ==================================================
   求人詳細（recruit-item.php）
================================================== */

.recruit-details {
	margin-bottom: var(--spacing-unit-xlarge);
}

.recruit-title {
	margin-top: var(--spacing-unit-large);
	margin-bottom: var(--spacing-unit-medium);
	font-size: var(--font-size-large);
	color: var(--color-text-main);
}

.recruit-summary-wrapper {
	border: var(--border-width) solid var(--color-border);
	background-color: var(--color-bg-main);
	box-shadow: 0 0.4rem 1rem var(--color-shadow-subtle);
	padding: 0;
	margin-top: var(--spacing-unit-medium);
	margin-bottom: var(--spacing-unit-large);
}

.recruit-summary-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--font-size-small);
	background-color: transparent;
}

.recruit-summary-table th,
.recruit-summary-table td {
	padding: var(--spacing-unit-medium) var(--spacing-unit-large);
	text-align: left;
	word-break: break-word;
	vertical-align: top;
	border-bottom: var(--border-width) solid var(--color-border);
}

.recruit-summary-table tr:last-child th,
.recruit-summary-table tr:last-child td {
	border-bottom: none;
}

.recruit-summary-table th {
	width: 30%;
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	font-weight: bold;
	font-size: var(--font-size-base);
}

.recruit-summary-table td {
	width: 70%;
	background-color: var(--color-bg-main);
	color: var(--color-text-main);
	font-size: var(--font-size-base);
}

.recruit-summary-table td p {
	margin-bottom: 0.2em;
}

/* アコーディオン */
.recruit-details__summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--spacing-unit-medium) var(--spacing-unit-large);
	border-top: var(--border-width) solid var(--color-accent);
	border-bottom: var(--border-width) solid var(--color-accent);
	background-color: var(--color-bg-main);
	font-size: var(--font-size-base);
	color: var(--color-accent);
	cursor: pointer;
	transition: background-color var(--transition-speed-medium)
		var(--transition-timing-ease);
}

.summary-text {
	margin: 0 auto;
	text-align: center;
	flex-grow: 1;
}

.summary-icon {
	font-size: var(--font-size-large);
	margin-left: auto;
	padding-left: var(--spacing-unit-small);
	transition: transform var(--transition-speed-medium)
		var(--transition-timing-ease);
}

.recruit-details__accordion[open] .summary-icon {
	transform: rotate(180deg);
}

.recruit-details__content {
	padding: var(--spacing-unit-small) 0;
	font-size: var(--font-size-small);
	color: var(--color-accent);
}

.recruit-details h3 {
	margin-top: 1.5em;
}

.recruit-details__content ul {
	list-style: none;
	padding: 0;
}

.recruit-details__content li {
	margin-bottom: var(--spacing-unit-small);
}

/* 空行スペーサー */
.recruit-details__empty {
	margin: var(--spacing-unit-small) 0;
}

/* ==================================================
   応募ボックス
================================================== */

.recruit-apply {
	margin-top: var(--spacing-unit-xlarge);
}

.apply-box {
	padding: var(--spacing-unit-xlarge);
	border-radius: var(--border-radius-md);
	text-align: center;
	margin-top: var(--spacing-unit-large);
}

.apply-box__button {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-unit-small);
	background-color: var(--color-accent);
	color: var(--color-text-sub);
	padding: var(--spacing-unit-small) var(--spacing-unit-medium);
	border: var(--border-width) solid var(--color-border);
	border-radius: var(--border-radius-sm);
	font-weight: bold;
	font-size: var(--font-size-base);
	text-decoration: none;
	transition: background-color var(--transition-speed-medium) ease-in-out;
}

.apply-box__button .material-symbols-outlined {
	font-size: 1.1em;
	vertical-align: -0.15em;
}

/* ==================================================
   採用ページ モバイル（768px 以下）
================================================== */

@media (max-width: 768px) {
	.recruit-concept {
		margin-top: var(--spacing-unit-medium);
		padding-top: var(--spacing-unit-small);
		padding-bottom: var(--spacing-unit-small);
	}

	.recruit-jump-links__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--spacing-unit-small);
	}

	.recruit-jump-links__list li a {
		display: inline-block;
		min-width: 180px;
		width: auto;
		text-align: left;
	}

	.recruit-summary-table th,
	.recruit-summary-table td {
		font-size: var(--font-size-small);
		padding: var(--spacing-unit-small) var(--spacing-unit-medium);
	}
}

/* ==================================================
   採用ページ ホバー効果
================================================== */

@media (hover: hover) {
	.recruit-jump-links__list li a:hover {
		background-color: var(--color-accent-hover);
	}

	.recruit-details__summary:hover {
		background-color: var(--color-bg-emphasis);
	}

	.apply-box__button:hover {
		background-color: var(--color-accent-hover);
	}
}

/* ==================================================
   Stay ページ（page-stay.php）
================================================== */

.stay-section-title {
	margin: var(--section-padding-y) 0 var(--spacing-unit-xlarge);
	text-align: center;
}

.stay-content-section {
	margin-bottom: var(--section-margin-bottom);
}

/* ==================================================
   客室概要ブロック（stay-room-overview.php）
================================================== */

.stay-room-overview {
	padding: var(--spacing-unit-large) 0;
	margin-bottom: var(--spacing-unit-xlarge);
	background-color: var(--color-bg-gray);
}

.stay-room-overview__wrapper {
	display: flex;
	align-items: center;
	gap: var(--spacing-unit-xlarge);
	flex-direction: row;
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-unit-large);
}

.stay-room-overview__image {
	flex: 1 1 60%;
	max-width: 60%;
}

.stay-room-overview__image img,
.stay-room-overview__image .metaslider img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--border-radius-sm);
	box-shadow: 0 0.8rem 2.4rem var(--color-shadow-medium);
	transition: transform var(--transition-speed-medium)
		var(--transition-timing-ease);
}

.stay-room-overview__body {
	flex: 1 1 40%;
	max-width: 400px;
	text-align: left;
	margin-right: var(--spacing-unit-medium);
	padding: var(--spacing-unit-medium);
	box-sizing: border-box;
	min-width: 0;
}

.stay-room-overview__specs dl {
	display: grid;
	grid-template-columns: 100px 1fr;
	/* ラベル幅の固定値 */
	row-gap: var(--spacing-unit-small);
	column-gap: var(--spacing-unit-medium);
	font-size: var(--font-size-small);
	color: var(--color-text-main);
}

.stay-room-overview__specs dt {
	font-weight: 600;
	color: var(--color-accent);
}

.stay-room-overview__specs dd {
	margin: 0;
}

.stay-room-overview__specs dt:empty + dd {
	margin-top: -6px;
}

.stay-room-overview__buttons {
	margin-top: var(--spacing-unit-large);
}

/* ==================================================
   バスセクション（stay-bath-section.php）
================================================== */

.stay-bath {
	padding: var(--spacing-unit-large) 0;
	margin-bottom: var(--spacing-unit-large);
}

.stay-bath__point {
	display: flex;
	align-items: center;
	gap: var(--spacing-unit-large);
}

.stay-bath--reverse .stay-bath__point {
	flex-direction: row-reverse;
}

.stay-bath__point-image {
	flex: 1 1 50%;
}

.stay-bath__point-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: var(--border-radius-sm);
}

.stay-bath__point-body {
	flex: 1 1 50%;
	max-width: 480px;
	text-align: left;
	padding: var(--spacing-unit-large);
	box-sizing: border-box;
	min-width: 0;
}

.stay-bath__point-category {
	font-size: var(--font-size-small);
	margin-bottom: var(--spacing-unit-small);
	text-transform: uppercase;
	color: var(--color-accent);
}

.stay-bath__point-title {
	font-size: 1.8rem;
	margin-bottom: var(--spacing-unit-small);
}

.stay-bath__point-text {
	font-size: var(--font-size-small);
	line-height: var(--line-height-base);
}

/* ==================================================
   アメニティ・設備（amenities-facilities.php）
================================================== */

.room-amenities-facilities {
	margin-top: var(--spacing-unit-xlarge);
}

.amenities-facilities-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-unit-xlarge);
	background-color: var(--color-bg-gray);
	padding: var(--spacing-unit-xlarge);
	margin-bottom: var(--spacing-unit-xlarge);
}

.amenities-column,
.facilities-column {
	flex: 1 1 calc(50% - var(--spacing-unit-xlarge));
	min-width: 300px;
}

.amenities-column ul,
.facilities-column ul {
	list-style: disc;
	padding-left: var(--spacing-unit-large);
	font-size: var(--font-size-small);
}

/* ==================================================
   Stay 系 モバイル（768px 以下）
================================================== */

@media (max-width: 768px) {
	.stay-room-overview {
		padding: var(--spacing-unit-xlarge) 0;
		margin-bottom: var(--spacing-unit-xlarge);
	}

	.stay-room-overview__wrapper {
		flex-direction: column;
		gap: var(--spacing-unit-xlarge);
		padding: 0 var(--spacing-unit-medium);
	}

	.stay-room-overview__image {
		max-width: 100%;
		flex: none;
	}

	.stay-room-overview__body {
		width: 100%;
		max-width: 100%;
		padding: 0 var(--spacing-unit-medium);
		margin-right: 0;
		text-align: left;
	}

	.stay-room-overview__specs dl {
		grid-template-columns: 90px 1fr;
		row-gap: 0.6rem;
		font-size: var(--font-size-small);
	}

	.stay-room-overview__buttons {
		margin-top: var(--spacing-unit-medium);
		display: flex;
		justify-content: center;
	}

	.stay-room-overview__buttons .btn {
		width: 66%;
		max-width: 260px;
	}

	.stay-bath {
		padding: var(--spacing-unit-small) 0;
		margin-bottom: var(--spacing-unit-medium);
	}

	.stay-bath__point {
		flex-direction: column;
		gap: var(--spacing-unit-large);
	}

	.stay-bath--reverse .stay-bath__point {
		flex-direction: column;
	}

	.stay-bath__point-body {
		width: 100%;
		max-width: 100%;
		margin-right: 0;
		padding: var(--spacing-unit-medium);
	}

	.amenities-facilities-wrapper {
		flex-direction: column;
		gap: var(--spacing-unit-large);
	}

	.amenities-column,
	.facilities-column {
		flex: 1 1 100%;
		min-width: auto;
	}

	.amenities-column ul,
	.facilities-column ul {
		padding-left: var(--spacing-unit-medium);
	}

	.amenities-column li,
	.facilities-column li {
		margin-bottom: var(--spacing-unit-small);
	}
}

/* ==================================================
   アクセスページ（page-access.php）
================================================== */

.access-info-section {
	padding: var(--spacing-unit-large) 0;
}

.access-info-text {
	max-width: none;
	min-width: auto;
	margin: 0 auto;
	text-align: center;
	margin-bottom: var(--spacing-unit-large);
}

.access-surrounding {
	padding: var(--spacing-unit-large) 0;
	margin-bottom: var(--section-margin-bottom);
}

.access-surroundingphoto__image {
	width: 100%;
	height: auto;
	display: block;
	margin: var(--spacing-unit-large) 0 var(--section-padding-y);
	object-fit: cover;
}

.section__description {
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-text-main);
	margin-top: var(--spacing-unit-medium);
}

/* アクセスタブ */
.access-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--spacing-unit-small);
	margin: var(--spacing-unit-xlarge) auto var(--spacing-unit-medium);
	padding: 0 var(--spacing-unit-small);
	border-bottom: var(--border-width) solid var(--color-border);
	max-width: 960px;
	list-style: none;
}

.tab-contents {
	margin-bottom: var(--spacing-unit-large);
}

.access-tabs .tab {
	cursor: pointer;
	padding: var(--spacing-unit-small) var(--spacing-unit-medium);
	font-weight: 500;
	background-color: var(--color-bg-emphasis);
	border: var(--border-width) solid var(--color-border);
	border-bottom: none;
	border-top-left-radius: var(--border-radius-sm);
	border-top-right-radius: var(--border-radius-sm);
	transition: all var(--transition-speed-medium) var(--transition-timing-ease);
	color: var(--color-text-main);
}

.access-tabs .tab.active {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-text-sub);
}

.access-tabs .tab__button {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  text-align: inherit;
}

.access-tabs .tab__button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.tab-content {
	display: none;
	margin: 0 auto;
	padding: var(--spacing-unit-large);
	background-color: var(--color-bg-emphasis);
	box-sizing: border-box;
	max-width: 960px;
	border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.tab-content.active {
	display: block;
}

.tab-content h2 {
	font-size: var(--font-size-large);
	margin-bottom: var(--spacing-unit-small);
}

.tab-content p {
	line-height: var(--line-height-base);
	color: var(--color-text-main);
	margin-top: var(--spacing-unit-small);
}

.tab-content.car p {
	line-height: var(--line-height-tight);
}

.access-train-columns {
	display: flex;
	gap: var(--spacing-unit-large);
	align-items: flex-start;
}

.access-train-text {
	flex: 0 0 38%;
	/* 約350〜380px */
	max-width: 380px;
}

.access-train-image {
	flex: 1 1 62%;
	/* 約530〜560px */
	max-width: 560px;
}

.access-train-image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--border-radius-md);
}

/* ==================================================
   Access Feature (Template Part)
================================================== */

/* セクション間の余白（旧: margin-top: 80px） */
.access-feature:not(:first-of-type) {
	margin-top: var(--section-padding-y);
}

/* 見出し下のイントロ */
.access-feature__intro {
	position: relative;
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	margin-bottom: var(--spacing-unit-large);
	color: var(--color-text-main);
	padding-left: var(--spacing-unit-medium);
}

.access-feature__intro::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background-color: var(--color-border);
}

/* カードリスト */
.access-feature__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--spacing-unit-xlarge);
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
}

/* カード本体 */
.access-feature__card {
	background-color: var(--color-card);
	border-radius: var(--border-radius-lg);
	padding: var(--spacing-unit-xlarge) var(--spacing-unit-large);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: 0 0.2rem 0.8rem var(--color-shadow-subtle);
	transition: box-shadow var(--transition-speed-medium)
		var(--transition-timing-ease);
}

/* 画像枠 */
.access-feature__image {
	width: 240px;
	height: 240px;
	overflow: hidden;
	margin-bottom: var(--spacing-unit-large);
	border-radius: var(--border-radius-sm);
}

.access-feature__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* サブタイトル */
.access-feature__subtitle {
	font-size: var(--font-size-small);
	color: var(--color-subtitle);
	margin-bottom: var(--spacing-unit-small);
}

/* タイトル */
.access-feature__title {
	font-size: var(--font-size-large);
	font-weight: bold;
	color: var(--color-text-main);
	margin-bottom: var(--spacing-unit-medium);
}

/* 説明文 */
.access-feature__desc {
	font-size: var(--font-size-small);
	color: var(--color-text-main);
	line-height: var(--line-height-base);
	max-width: 280px;
	margin: 0 auto var(--spacing-unit-medium);
	text-align: left;
}

/* ボタン */
.access-feature__card .btn {
	margin-top: var(--spacing-unit-medium);
	border-radius: var(--border-radius-md);
}

.access-feature__card .btn--outline {
	padding: var(--spacing-unit-medium) var(--spacing-unit-xlarge);
	font-size: var(--font-size-base);
}

/* ==================================================
   ジムページ（page-gym.php）
================================================== */

.gym-content {
	margin-bottom: var(--section-margin-bottom);
}

.gym-info__note {
	font-size: var(--font-size-base);
	color: var(--color-text-main);
	border: var(--border-width) solid var(--color-border);
	background-color: var(--color-bg-emphasis);
	border-radius: var(--border-radius-sm);
	padding: var(--spacing-unit-large);
	max-width: 1100px;
	margin: 0 auto var(--spacing-unit-xlarge);
}

.gym-feature {
	margin-bottom: var(--spacing-unit-xlarge);
}

.gym-feature__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--spacing-unit-large);
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-unit-large);
	box-sizing: border-box;
}

.gym-feature__card {
	background-color: var(--color-bg-main);
	border-radius: var(--border-radius-md);
	padding: var(--spacing-unit-small);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: 0 0.2rem 0.8rem var(--color-shadow-subtle);
	transition: box-shadow var(--transition-speed-medium)
		var(--transition-timing-ease);
	min-height: 320px;
	justify-content: space-between;
}

.gym-feature__image {
	width: 120px;
	height: 120px;
	/* アイコン画像の固定サイズ */
	overflow: hidden;
	margin-bottom: var(--spacing-unit-medium);
}

.gym-feature__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
	transition: filter var(--transition-speed-medium)
		var(--transition-timing-ease);
}

.gym-feature__category {
	display: inline-block;
	font-size: var(--font-size-xl);
	color: var(--color-subtitle);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	margin-bottom: var(--spacing-unit-small);
}

.gym-feature__title {
	font-size: var(--font-size-small);
	font-weight: bold;
	color: var(--color-text-main);
	margin-bottom: var(--spacing-unit-small);
}

.gym-feature__subtitle {
	font-size: var(--font-size-xsmall);
	font-weight: 500;
	color: var(--color-accent);
	margin-bottom: var(--spacing-unit-small);
}

.gym-feature__lead {
	font-size: var(--font-size-small);
	color: var(--color-text-main);
	line-height: var(--line-height-base);
	max-width: 280px;
	margin: 0 auto var(--spacing-unit-small);
	text-align: left;
}

.gym-feature__text {
	font-size: 0.9rem;
	color: var(--color-text-sub);
	background-color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: var(--spacing-unit-small);
	font-weight: 600;
	border-radius: var(--border-radius-md);
	align-self: center;
	margin-top: auto;
}

.gym-map-container {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	z-index: 10;
}

.gym-map-image {
	width: 100%;
	height: auto;
	display: block;
}

.map-wrapper {
	position: relative;
	max-width: 800px;
	margin: 0 auto var(--spacing-unit-large);
	padding: 0 var(--spacing-unit-small);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	height: auto;
}

.map-hover-display {
	position: absolute;
	top: var(--spacing-unit-small);
	right: var(--spacing-unit-small);
	width: 240px;
	/* ホバー表示エリアの固定幅 */
	background-color: var(--color-bg-emphasis);
	padding: var(--spacing-unit-small);
	border-radius: var(--border-radius-sm);
	box-shadow: 0 0.2rem 1rem var(--color-shadow-subtle);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--transition-speed-medium) var(--transition-timing-ease),
		transform var(--transition-speed-medium) var(--transition-timing-ease);
	transform: translateY(-10px);
	z-index: 2000;
}

.map-hover-display.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.map-hover-display img {
	width: 100%;
	border-radius: var(--border-radius-sm);
	margin-bottom: var(--spacing-unit-small);
}

.map-marker {
	position: absolute;
	width: 50px;
	/* マーカーアイコンの固定サイズ */
	height: 50px;
	background-image: url("../img/page/gym/icon-camera.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	transition: transform var(--transition-speed-medium)
		var(--transition-timing-ease);
}

.store-info__text {
	flex: 1 1 auto;
}

/* ==================================================
   アクセス・ジム モバイル（768px 以下）
================================================== */

@media (max-width: 768px) {
	.access-surroundingphoto__image {
		width: 100%;
		min-height: 300px;
		max-height: 60vh;
		object-fit: cover;
		margin-bottom: var(--spacing-unit-large);
	}

	.access-feature__heading {
		font-size: var(--font-size-large);
		margin-top: var(--spacing-unit-large);
	}

	.access-info-text {
		flex: 1 1 100%;
		max-width: 100%;
		min-width: auto;
	}

	.access-tabs {
		gap: var(--spacing-unit-small);
		margin-bottom: var(--spacing-unit-medium);
	}

	.tab-content {
		padding: var(--spacing-unit-small);
	}

	.tab-content p {
		line-height: var(--line-height-tight);
	}

	.tab-content.car p {
		margin-bottom: var(--spacing-unit-small);
	}

	.access-train-columns {
		flex-direction: column;
	}

	.access-train-text,
	.access-train-image {
		max-width: 100%;
		flex: none;
	}

	.gym-feature__list {
		grid-template-columns: 1fr;
		gap: var(--spacing-unit-medium);
		padding: 0 var(--spacing-unit-medium);
	}

	.gym-feature__card {
		max-width: 280px;
		width: 100%;
		margin: 0 auto;
		min-height: auto;
	}

	.map-wrapper {
		max-width: 100%;
		padding: 0;
		margin-bottom: var(--spacing-unit-medium);
	}

	.map-marker {
		display: none;
	}

	.map-hover-display {
		display: none;
	}
}

/* ==================================================
   アクセス・ジム PC（769px 以上）
================================================== */

@media (min-width: 769px) {
	.map-hover-display {
		display: block;
	}

	.map-wrapper {
		max-width: 800px;
		margin-bottom: var(--spacing-unit-large);
	}
}

/* ==================================================
   アクセス・ジム ホバー効果
================================================== */

@media (hover: hover) {
	.map-marker:hover {
		transform: scale(1.2);
	}

	.gym-feature__image img:hover {
		filter: none;
	}

	.access-tabs .tab:hover {
		background-color: var(--color-bg-emphasis);
		color: var(--color-accent);
	}
}