@charset "UTF-8";

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

/* 依存ファイルは functions.php の wp_enqueue_style() で管理する。
   @import は使用しない。 */
   
/* ==================================================
   通常ページ（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 2px 6px rgba(0, 0, 0, 0.5);
	margin-bottom: 0;
}

.page-main {
	padding: var(--section-padding-y) 0;
}

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

.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-white);
	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-white);
	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 {
	font-size: var(--font-size-small);
	margin-top: var(--spacing-unit-large);
	margin-bottom: var(--spacing-unit-medium);
}

.news-article__content h3 {
	font-size: var(--font-size-xsmall);
	margin-top: var(--spacing-unit-medium);
	margin-bottom: var(--spacing-unit-small);
}

.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);
}

.news-article__split {
	display: flex;
	gap: var(--spacing-unit-large);
	align-items: flex-start;
	flex-wrap: wrap;
	margin: var(--spacing-unit-large) 0;
}

.news-article__split .text-block,
.news-article__split figure {
	flex: 1 1 45%;
	max-width: 50%;
}

.news-article__split figure img {
	width: 100%;
	height: auto;
}

.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-section {
	padding: var(--section-padding-y) 0;
}

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

.news-card__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.news-card__empty {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--spacing-unit-xlarge);
	color: var(--color-text-main);
	font-size: var(--font-size-base);
}

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

@media (max-width: 768px) {

	.single-article {
		padding: var(--spacing-unit-large);
	}

	.single-title {
		margin-top: 80px; /* ヘッダー固定分のオフセット。px 固定値維持 */
	}

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

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

	.news-article__split {
		flex-direction: column;
		gap: var(--spacing-unit-medium);
	}

	.news-article__split .text-block,
	.news-article__split figure {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.news-article__nav-list {
		flex-direction: row;
		justify-content: space-between;
		gap: var(--spacing-unit-small);
	}

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

	.news-article__nav-item a {
		width: auto;
		text-align: center;
		padding: var(--spacing-unit-small);
	}
}

/* ==================================================
   PC（769px 以上）
================================================== */

@media (min-width: 769px) {

	.single-prev,
	.single-next {
		width: 100%;
	}

	.single-prev {
		order: 2;
	}

	.single-next {
		order: 1;
	}
}

/* ==================================================
   ベストレートページ（page-bestrate.php）
================================================== */

.section--bestrate {
	/* .section の padding-top に加えて上余白を追加する場合のみ使用 */
	margin-top: var(--section-padding-y);
}

.btn-area {
	text-align: center;
	margin-top: var(--spacing-unit-large);
}

/* ==================================================
   朝食ページ（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-white);
	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);
	font-family: var(--font-base);
	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-white);
	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-white);
	font-family: var(--font-base);
	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-white);
	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) var(--transition-timing-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 {
		table-layout: fixed;
	}

	.recruit-summary-table th,
	.recruit-summary-table td {
		word-break: break-word;
		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-background);
}

.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__points {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 var(--spacing-unit-large);
	display: flex;
	flex-direction: column;
	gap: 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;
	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: clamp(1.6rem, 1.8rem, 2rem);
	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-background);
	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);
	}

	.stay-bath__intro,
	.stay-bath__points {
		padding: 0 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-feature {
	padding: var(--section-padding-y) 0;
}

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

.access-info-block {
	margin-top: var(--spacing-unit-large);
	margin-bottom: var(--spacing-unit-xlarge);
}

.access-info-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--spacing-unit-large);
	margin-top: var(--spacing-unit-large);
	margin-bottom: var(--spacing-unit-xlarge);
}

.access-info-text,
.access-info-image {
	flex: 1 1 48%;
	max-width: 550px;
	min-width: 280px;
	box-sizing: border-box;
}

.access-info-image {
	overflow: hidden;
}

.access-info-image img {
	width: 100%;
	height: auto;
	display: block;
}

.access-image {
	width: 100%;
	max-width: 100%;
	height: auto;
	object-fit: contain;
	image-rendering: auto;
}

.access-train-image {
	width: 100%;
	height: auto;
}

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

.access-surroundingmap__image {
	width: 72%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: var(--spacing-unit-medium);
	margin-bottom: var(--spacing-unit-xlarge);
}

.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-large) 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);
}

.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 h3 {
	font-size: var(--font-size-large);
	margin-bottom: var(--spacing-unit-small);
	color: var(--color-accent);
}

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

/* ==================================================
   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-text-sub);
	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-surroundingmap__image {
		width: 100%;
	}

	.access-info-inner {
		flex-direction: column;
		gap: var(--spacing-unit-large);
	}

	.access-info-text,
	.access-info-image {
		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-medium);
	}

  .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-hover-display {
		display: none;
	}

	.map-modal-gallery {
		display: grid;
		gap: var(--spacing-unit-medium);
		margin-top: var(--spacing-unit-large);
	}

	.map-modal-gallery .modal-image-block {
		text-align: center;
	}

	.map-modal-gallery img {
		width: 100%;
		max-width: 320px;
		border-radius: var(--border-radius-sm);
		margin-bottom: var(--spacing-unit-small);
	}

	.map-modal-gallery p {
		font-size: var(--font-size-xsmall);
		color: var(--color-text-main);
	}
}

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

@media (min-width: 769px) {

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

	.map-modal-gallery {
		display: none;
	}

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

	.access-image {
		object-fit: cover;
		border-radius: var(--border-radius-sm);
	}
}

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

@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);
	}
}

/* ==================================================
   ギャラリーページ
================================================== */

.gallery__inner {
	padding-top: 0;
}

.gallery__grid {
	margin-top: calc(var(--spacing-unit-xlarge) * -1);
}

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

/* ==================================================
   全ページ共通 モバイル（480px 以下）
================================================== */

@media (max-width: 480px) {

	.gallery-text-content__title {
		font-size: var(--font-size-large);
	}
}

/* ==================================================
   全ページ共通 ホバー効果
================================================== */

@media (hover: hover) {

	.header-recruit-link a:hover::after {
		transform: scaleX(1);
	}
}