@charset 'UTF-8';
/*----------------------------------------

	- pageTitle
	- sample

-----------------------------------------*/

/*----------------------------------------
	pageTitle
-----------------------------------------*/
.pageTitle {
	display: grid;
	grid-template-columns: auto max-content;
	grid-template-areas: 'pageTitleContainer pageCategory';
	inline-size: min(80%, 1120px);
	margin-block-start: 35px;
	margin-inline: auto;
}

.pageTitle .pageTitleContainer {
	grid-area: pageTitleContainer;
	inline-size: min(100%, 1028px);
	margin-block: 156px 23px;
}

.pageTitle .pageTitleContainer h1 {
	font-weight: var(--font-weight-medium);
	font-size: var(--font-size24);
	line-height: var(--line-height15);
}

.pageTitle .pageTitleContainer h1 span {
	display: block;
	margin-block-start: 13px;
	font-size: var(--font-size52);
}

.pageTitle .pageCategory>span:not(:first-of-type) {
	margin-inline-end: 0;
}

@media (width <=800px) {
	.pageTitle {
		inline-size: 94%;
		margin-block-start: 22px;
		padding-inline-start: 3%;
	}

	.pageTitle .pageTitleContainer {
		inline-size: 100%;
		margin-block: 78px 7px;
	}

	.pageTitle .pageTitleContainer h1 {
		font-size: var(--font-size16);
	}

	.pageTitle .pageTitleContainer h1 span {
		font-size: var(--font-size32);
	}
}

/* mapContent */
/* mapRouteに基本の高さを確保（背景画像基準） */
.map>div .mapRoute {
	position: relative;
	min-height: 400px;
	/* 基本高さを確保 */
}

.map>div .mapRoute picture {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

/* コースマップの絶対配置（レスポンシブ対応） */
.map>div .mapRoute .course-map {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 100%;
	block-size: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 60分コースマップの配置 */
.map>div .mapRoute .course-map.course-1 {
	z-index: 3;
	/* PC版の配置 */
	inset-block-start: 20.2%;
	inset-inline-start: 25.2%;
	inline-size: 46.5%;
	block-size: auto;
}

/* 90分コースマップの配置 */
.map>div .mapRoute .course-map.course-2 {
	z-index: 2;
	/* PC版の配置 */
	inset-block-start: 20.2%;
	inset-inline-start: 25.2%;
	inline-size: 46.5%;
	block-size: auto;
}

/* SP版レスポンシブ対応 */
@media (width <=800px) {

	/* 60分コースマップのSP版配置 */
	.map>div .mapRoute .course-map.course-1 {
        inset-block-start: 20.2%;
        inset-inline-start: 15.5%;
        inline-size: 64.85%;
		block-size: auto;
	}

	/* 90分コースマップのSP版配置 */
	.map>div .mapRoute .course-map.course-2 {
        inset-block-start: 20.2%;
        inset-inline-start: 15.5%;
        inline-size: 64.85%;
		block-size: auto;
	}

	/* SP版でのmapRouteの高さ調整 */
	.map>div .mapRoute {
		min-height: 300px;
	}
}

/* コースマップの表示制御ギミック */
/* デフォルトは両方とも非表示 */
.mapContent .map>div .mapRoute .course-map.course-1 {
	opacity: 0;
	visibility: hidden;
	z-index: 3;
}

.mapContent .map>div .mapRoute .course-map.course-2 {
	opacity: 0;
	visibility: hidden;
	z-index: 2;
}

/* 60分コースがアクティブな時（JavaScriptで制御される .course-active-1 クラス使用） */
.mapContent.course-active-1 .map>div .mapRoute .course-map.course-1 {
	opacity: 1;
	visibility: visible;
	z-index: 3;
}

.mapContent.course-active-1 .map>div .mapRoute .course-map.course-2 {
	opacity: 0;
	visibility: hidden;
	z-index: 2;
}

/* 90分コースがアクティブな時の切り替え */
.mapContent.course-active-2 .map>div .mapRoute .course-map.course-1 {
	opacity: 0;
	visibility: hidden;
	z-index: 2;
}

.mapContent.course-active-2 .map>div .mapRoute .course-map.course-2 {
	opacity: 1;
	visibility: visible;
	z-index: 3;
}

/* コース切り替え時のスムーズなアニメーション（フェードのみ） */
.mapContent.switching .map>div .mapRoute .course-map {
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

/*----------------------------------------
	Map Markers - Absolute Positioning (Naiku)
-----------------------------------------*/

/* === Naikuページ マーカー座標（画像の実際の位置に基づく） === */

/* Course 1 マーカー (60分コース) - スライダー順序に対応 */
#\31-1 { top: 20.5%; left: 44.47%; }   /* ① 宇治橋 */
#\31-2 { top: 52%; left: 28.04%; }  /* ② 手水舎・御手洗場 */
#\31-2-sub { top: 60.33%; left: 23.22%; }  /* ② 手水舎・御手洗場（サブマーカー） */
#\31-3 { top: 67.66%; left: 22.15%; }     /* ③ 瀧祭神 */
#\31-4 { top: 82.83%; left: 66.25%; }   /* ④ 正宮　皇大神宮 */
#\31-5 { top: 74.66%; left: 60.54%; }     /* ⑤ 御稲御倉 */
#\31-6 { top: 56.66%; left: 68.75%; }  /* ⑥ 別宮　荒祭宮 */
#\31-7 { top: 88.33%; left: 30.18%; }     /* ⑦ 別宮　風日祈宮 */
#\31-8 { top: 62.33%; left: 50.9%; }   /* ⑧ 内宮神楽殿 */
#\31-9 { top: 40%; left: 49.29%; }   /* ⑨ 参集殿 */

/* Course 2 マーカー (90分コース) - スライダー順序に対応 */
#\32-1 { top: 20.5%; left: 44.47%; }   /* ① 宇治橋 */
#\32-2 { top: 35.66%; left: 41.79%; }   /* ② 神苑 */
#\32-3 { top: 52%; left: 28.04%; }  /* ③ 手水舎・御手洗場 */
#\32-3-sub { top: 60.33%; left: 23.22%; }  /* ③ 手水舎・御手洗場（サブマーカー） */
#\32-4 { top: 67.66%; left: 22.15%; }     /* ④ 瀧祭神 */
#\32-5 { top: 70.33%; left: 58.22%; }  /* ⑤ 忌火屋殿・祓所 */
#\32-6 { top: 91.66%; left: 67.15%; }  /* ⑥ 御贄調舎 */
#\32-7 { top: 82.83%; left: 66.25%; }   /* ⑦ 正宮　皇大神宮 */
#\32-8 { top: 74.66%; left: 60.54%; }     /* ⑧ 御稲御倉 */
#\32-9 { top: 68.66%; left: 61.08%; }  /* ⑨ 外幣殿 */
#\32-10 { top: 56.66%; left: 68.75%; } /* ⑩ 別宮　荒祭宮 */
#\32-11 { top: 68.16%; left: 54.47%; } /* ⑪ 由貴御倉 */
#\32-12 { top: 71.5%; left: 51.43%; } /* ⑫ 五丈殿 */
#\32-13 { top: 74%; left: 57.15%; } /* ⑬ 四至神 */
#\32-14 { top: 88.33%; left: 30.18%; }    /* ⑭ 別宮　風日祈宮 */
#\32-15 { top: 62.33%; left: 50.9%; }  /* ⑮ 内宮神楽殿 */
#\32-16 { top: 50.66%; left: 48.58%; } /* ⑯ 御厩 */
#\32-16-sub { top: 66.33%; left: 39.83%; } /* ⑯ 御厩（サブマーカー） */
#\32-17 { top: 40%; left: 49.29%; }  /* ⑰ 参集殿 */
#\32-18 { top: 29.66%; left: 67.5%; } /* ⑱ 大山祇神社・子安神社 */

/* スマートフォン対応 */
@media (width <= 800px) {
	/* SP版での座標（Course 1） - スライダー順序対応 */
	#\31-1 { left: 42.25%; }   /* ① 宇治橋 */
	#\31-2 { left: 19.25% }    /* ② 手水舎・御手洗場 */
	#\31-2-sub { left: 12.5%; }    /* ② 手水舎・御手洗場（サブマーカー） */
	#\31-3 { left: 11%; }      /* ③ 瀧祭神 */
	#\31-4 { left: 72.75%; }   /* ④ 正宮　皇大神宮 */
	#\31-5 { left: 64.75%; }      /* ⑤ 御稲御倉 */
	#\31-6 { left: 76.25%; }    /* ⑥ 別宮　荒祭宮 */
	#\31-7 { left: 22.25%; }   /* ⑦ 別宮　風日祈宮 */
	#\31-8 { left: 51.25%; }      /* ⑧ 内宮神楽殿 */
	#\31-9 { left: 49%; }    /* ⑨ 参集殿 */

	/* SP版での座標（Course 2） - スライダー順序対応 */
	#\32-1 { left: 42.25%; }   /* ① 宇治橋 */
	#\32-2 { left: 38.5%; }    /* ② 神苑 */
	#\32-3 { left: 19.25% }    /* ③ 手水舎・御手洗場 */
	#\32-3-sub { left: 12.5%; }    /* ③ 手水舎・御手洗場（サブマーカー） */
	#\32-4 { left: 11%; }      /* ④ 瀧祭神 */
	#\32-5 { left: 61.5%; }      /* ⑤ 忌火屋殿・祓所 */
	#\32-6 { left: 74%; }   /* ⑥ 御贄調舎 */
	#\32-7 { left: 72.75%; }   /* ⑦ 正宮　皇大神宮 */
	#\32-8 { left: 64.75%; }      /* ⑧ 御稲御倉 */
	#\32-9 { left: 65.5%; }   /* ⑨ 外幣殿 */
	#\32-10 { left: 76.25%; }   /* ⑩ 別宮　荒祭宮 */
	#\32-11 { left: 56.25%; }   /* ⑪ 由貴御倉 */
	#\32-12 { left: 52%; }  /* ⑫ 五丈殿 */
	#\32-13 { left: 60%; }  /* ⑬ 四至神 */
	#\32-14 { left: 22.25%; }  /* ⑭ 別宮　風日祈宮 */
	#\32-15 { left: 51.25%; }     /* ⑮ 内宮神楽殿 */
	#\32-16 { left: 48%; }     /* ⑯ 御厩 */
	#\32-16-sub { left: 35.75%; }     /* ⑯ 御厩（サブマーカー） */
	#\32-17 { left: 49%; }   /* ⑰ 参集殿 */
	#\32-18 { left: 74.5%; }  /* ⑱ 大山祇神社・子安神社 */
}

/*----------------------------------------
	マーカーグループ制御
-----------------------------------------*/
/* マーカーグループ（同一タイミングで制御される）
	Course 1: #\31-2 と #\31-2-sub は同じdata-number="2"で同時制御される（手水舎・御手洗場）
	Course 2: #\32-3 と #\32-3-sub は同じdata-number="3"で同時制御される（手水舎・御手洗場）
	Course 2: #\32-16 と #\32-16-sub は同じdata-number="16"で同時制御される（御厩） */