/* ==========================================================================
   共通
   ========================================================================== */
/* --------------------------------------------------------------------------
   全体
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
a,a:visited {
	color: #222;
}
#mymainback_bg a:visited {
	color: #660099;
}
body {
	font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック",
		"Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Meiryo", "メイリオ",
		sans-serif;
}

#container {
	position: relative;
}
.sr-only, .hide {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
#header {
	display: flex;
	align-items: center;
	gap: 1.5em;
	padding: 0em 1.5em;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	width: 100vw;
	height: 75px;
	background-color: #fffe;
}
.menu-trigger {
    display: none; /* PCでは非表示 */
}
#taiken_header {
    flex: 1 1 520px;     /* 伸びる(1) / 少し縮む(1) / 基準幅300px */
    min-width: 320px;    /* 「大きくは縮まない」の担保として最小幅を指定 */
}
#taiken-nav-wrapper {
	flex: 1 1 auto;
	display: flex;
	gap: 1em;
	align-items: center;
	justify-content: right;
}


/*
 * サイトタイトル（トップページの見出し1）
 */

#taiken_header img {
	width: 520px;
	max-width: 100%;
}
#taiken_header h1, #taiken_header > div {
	margin: 0.5em 0;
	padding: 0 1em 0 0;
}
#taiken_header h1 div, #taiken_header > div div {
	display: flex;
	align-items: center;
}

/*
 * メニュー
 */
.taiken-nav {
	flex: 0 1 auto;      /* 伸びない(0) / 縮む(1) / 幅はコンテンツ次第 */
}
.taiken-nav ul {
	display: flex;
	gap: 2.5em;
	white-space: nowrap; /* ★重要：中身のテキストが改行されるのを防ぐ */

	list-style-type: none;
	margin: 0;
	padding: 0;

	height: 30px;
}
.taiken-nav a {
	color: #222;
	text-decoration: none;
}
.taiken-nav a:hover {
	text-decoration: underline;
}



/*
 * 検索ボックス
 */
#searchKeyword2 {
    flex: 0 0 200px;
}
table.gsc-search-box {
	width: 200px;
}
.gsc-selected-option-container {
	max-width: 100%;
}
.gsc-search-box table.gsc-search-box td.gsc-input {
	padding-right: 0;
}
.gsc-input .gsib_a {
	padding: 0;
}
#searchKeyword2 .gsc-search-button {
	display: table-cell !important;
}
.gsc-search-button .gsc-search-button {
	margin-left: 0;
}
.gsc-search-button .gsc-search-button-v2 {
	padding: 6px 15px;
	border-radius: 0px;
	border-color: #24742E;
	background-color: #24742E;
	background-image: linear-gradient(top, #4d90fe, #4787ed);
}
table.gsc-search-box td.gsib_b {
	display: none;
}
.gsib_a #gsc-i-id1 {
	height: 30px !important;
	border: 1px solid #24742E !important;
	padding: 0px 5px !important;
	background-position: 10px center !important;
}
.gsc-search-button.gsc-search-button-v2 {
	height: 30px;
}
.gsc-input .gsc-input-box {
	border: none;
}
#___gcse_0 .gsc-control-cse {
	background-color: transparent;
	border: none;
}




/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */

/* ==========================================================================
   トップページ
   ========================================================================== */
/* --------------------------------------------------------------------------
   スライドショー
   -------------------------------------------------------------------------- */
/* --- スライダー全体のコンテナ --- */
.content-slider-container {
	padding: 40px 0;
}

.content-slider-container .swiper {
	padding: 0 30px;
}

.content-slider-container .myContentSwiper .free_box p {
	margin: 0;
	color: #000;
}
.swiper-slide {
	margin: 0;
	padding: 0;
}
.swiper-slide p {
	margin: 0;
	padding: 0;
}

/* --- 高さを揃えるための重要な設定 --- */
.myContentSwiper .swiper-slide {
	height: auto !important; /* スライド自体の高さを自動（Swiperの計算に任せる）に */
	display: flex; /* Flexboxを有効化 */
}

/* --- 各カード（スライド）のスタイル --- */
.myContentSwiper .free_box {
	background: #fff;
	border: 1px solid #333;
	padding: 15px;
	box-sizing: border-box;
	text-align: center;
	width: 100%; /* 横幅いっぱい */
	height: 100%; /* 親(swiper-slide)の高さに100%合わせる */
	display: flex; /* カードの中身もFlexにして縦に並べる */
	flex-direction: column; /* 縦並び */
	box-shadow: 10px 10px 0px #E3DBBA;
}

.myContentSwiper .free_box img {
	width: 100% !important;
	height: auto !important;
	border: 1px solid #eee;
	margin-bottom: 10px;
	flex-shrink: 0;
	aspect-ratio: 240/210;
	object-fit: cover;
	object-position: top;
	max-width: 240px;
}

.free_box p {
    color: #0d59b7 !important;
}
.free_box:not(:has(a)) p {
    color: #222 !important;
}

/* テキスト部分：ここを可変にすることで、中身が少なくてもカードが伸びます */
.myContentSwiper .free_box p:last-child {
	margin: 0;
	flex-grow: 1; /* 余白を埋めるように伸びる */
	display: flex;
	align-items: center; /* テキストを上下中央にしたい場合はこれ */
	justify-content: center;
}

/* --- コントロール部分（矢印・ドット）の配置 --- */
.slider-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 30px;
}

/* --- ページネーション（ドット形式） --- */
.myContentSwiper .swiper-pagination {
	position: static;
	display: flex;
	gap: 8px; /* ドット間の隙間 */
	width: auto !important;
}

/* 通常時のドット（グレー） */
.myContentSwiper .swiper-pagination-bullet {
	width: 25px; /* 横長の線状 */
	height: 4px;
	background: #A8A8A8; /* 通常時の色 */
	opacity: 1; /* 透明度を固定 */
	border-radius: 2px;
	margin: 0 !important;
}

/* アクティブ（現在地）のドット（緑） */
.myContentSwiper .swiper-pagination-bullet-active {
	background: #379E43;
	width: 25px;
}

/* --- 矢印のカスタマイズ --- */
.myContentSwiper .swiper-button-prev,
.myContentSwiper .swiper-button-next {
	position: static;
	color: #333;
	width: 30px;
	height: auto;
	margin: 0;
}

.myContentSwiper .swiper-button-prev::after,
.myContentSwiper .swiper-button-next::after {
	font-size: 20px;
	font-weight: bold;
}

/* ▼▼▼ 1. ページ基本スタイル ▼▼▼ */
.swiper-pattern-content {
	width: 100%;
	max-width: 1600px;
	padding: 0 1rem;
	box-sizing: border-box;
	margin: 0 auto;
}

.swiper-pattern-section {
	width: 100%;
	height: 100%;
	margin-bottom: 3rem;
	overflow: hidden;
}

/* ▼▼▼ 2. Swiper共通スタイル ▼▼▼ */
.swiper-container-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100dvw;
	height: 100%;
	padding: 0;
	box-sizing: border-box;
	position: relative;
}

/* --- スライドの共通設定（JS実行前後での重複を統合） --- */
.swiper-wrapper > *,
.swiper-slide {
	/* レイアウト崩れ(FOUC)防止と基本デザイン */
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 2rem;
	font-weight: bold;
	color: white;
	background-size: cover;
	background-position: center;
	box-sizing: border-box;
}

/* JS実行前の初期状態のみに必要な設定 */
.swiper-wrapper > * {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	/* CMS等のデフォルトスタイルリセット */
}
.main_visual_area .swiper-wrapper > * {
	width: 100dvw !important;
	max-width: 100%;
}

/* --- コントロール周り --- */
.swiper-controls-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.5rem;
	width: 100%;
	max-width: 800px;
	position: relative;

	position: absolute;
	right: 0;
	bottom: 2.5em;
	z-index: 8;
	width: auto;
	padding: 0 2em;
	filter: drop-shadow(0px 0px 2px #000a);
}

.single-slide .swiper-controls-wrapper {
	display: none;
}

/* 再生/停止ボタン (CSS描画) */
.autoplay-controls {
	margin-left: 20px;
	display: flex;
}

.autoplay-controls button {
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	width: 30px;
	height: 30px;
	vertical-align: middle;
	position: relative;
	border: 1px solid #333;
	border-radius: 3px;
}

#play-button-swiper-instance-1 {
	background-image: url(/img/taiken/btn_slide_play.png);
	width: 18px;
	height: 18px;
	border: none;
}

.play-button,
.stop-button {
	/* background-color: #FFF; */
	border: 1px solid #333;
	/* border-radius: 50%; */
	box-sizing: border-box;
}

.stop-button::before {
	left: 8px;
}

.stop-button::after {
	right: 8px;
}

#stop-button-swiper-instance-1 {
	background-image: url(/img/taiken/btn_slide_stop.png);
	width: 18px;
	height: 18px;
	border: none;
}

/* 左右矢印共通 */
.swiper-button-prev,
.swiper-button-next {
	position: static;
	width: 30px;
	height: 30px;
	margin-top: 0;
	margin-bottom: 0;
	/* background-color: #333; */
	background-image: none;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper-button-prev {
	margin-right: 1.5rem;
}

.swiper-button-next {
	margin-left: 1.5rem;
}

.swiper-button-prev::after,
.swiper-button-next::after {
	content: "";
	box-sizing: border-box;
	width: 24px;
  height: 10px;
	position: relative;
	left: -3px;
}
.swiper-button-prev::after {
	background-image: url(/img/taiken/img_slide_before.png);
}
.swiper-button-next::after {
	background-image: url(/img/taiken/img_slide_after.png);
}

/* ページネーション (ドット) スタイル */
.swiper-pagination {
	position: static;
	width: auto !important;
	display: flex;
	gap: 8px;
	align-items: center;
}

.swiper-pagination-bullet {
	width: 30px;
	height: 4px;
	background-color: #fff;
	opacity: 1;
	margin: 0;
	border-radius: 0;
	transition: background-color 0.3s;
	/* border: 3px solid #8F7321; */
}

.swiper-pagination-bullet-active {
	width: 30px;
	height: 4px;
	background-color: #379E43;
}

svg.swiper-navigation-icon {
	display: none;
}

/* ▼▼▼ 3. 各パターン固有スタイル ▼▼▼ */

/* --- Multiパターン --- */
.swiper-multi .swiper-container {
	width: 100%;
	max-width: 100vw;
}

/* --- Peekパターン --- */
.swiper-peek .swiper-container {
	width: 100%;
	max-width: 100vw;
	max-height: 100vh;
	overflow: visible;
	position: relative;
	z-index: 1;
}

/* クラス付与前後で共通 */
.swiper-peek .swiper-wrapper > *,
.swiper-peek .swiper-slide {
	width: 80%;
	opacity: 0.4;
	transition: opacity 0.3s;
}

.swiper-peek .swiper-slide-active {
	opacity: 1;
}

.swiper-peek .swiper-controls-wrapper {
	z-index: 2;
}

/* --- Coverflowパターン --- */
.swiper-coverflow .swiper-container {
	width: 100%;
	max-width: 100vw;
	overflow: visible;
	padding-top: 50px;
	padding-bottom: 50px;
}

/* クラス付与前後で共通 */
.swiper-coverflow .swiper-wrapper > *,
.swiper-coverflow .swiper-slide {
	width: 60%;
}

/* --- Gridパターン --- */
.swiper-grid .swiper-container {
	width: 100%;
}

/* クラス付与前後で共通 */
.swiper-grid .swiper-wrapper > *,
.swiper-grid .swiper-slide {
	height: auto;
	box-sizing: border-box;
}

.main_visual_area .swiper-slide img {
	width: 100vw !important;
	height: auto !important;
}

.swiper-controls-wrapper + .swiper-controls-wrapper {
	display: none;
}




/* --------------------------------------------------------------------------
   トピックス
   -------------------------------------------------------------------------- */
.topics_area {
	position: relative;
	margin: 10em 0 7.5em;
}
.topics_area::before {
	content: '';
	position: absolute;
	top: -20%;
	left: 0;
	width: 90%;
	height: 80%;
	background-color: #E3DBBA;
	border-radius: 0 50px 50px 0;
	z-index: 0;
}
.topics_area::after {
	content: '';
	position: absolute;
	top: -5%;
	right: 0;
	display: block;
	width: 85%;
	height: 80%;
	background-color: #EEEBE0;
	border-radius: 50px 0 0 50px;
	z-index: 0;
}


.topics_area h2 {
	position: relative;
	z-index: 3;
	padding: 0 1.5em;
	color: #08442C;
	font-size: 1.875em;
	text-align: center;
	letter-spacing: 0.25em;
}
.topics_area h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-image: url(/img/taiken/bg_h2.png);
	width: 159px;
	height: 92px;
	margin: auto;
}
.topics_area h2::after {
	content: 'topics';
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	bottom: -33%;
	font-size: 0.46666666em;
	letter-spacing: 0.1em;
}

.topics_area .myContentSwiper .free_box {
	justify-content: flex-start;
}
.topics_area .content-slider-container .myContentSwiper .free_box p {
	width: 100%;
}
.topics_area .content-slider-container .myContentSwiper .free_box p:nth-child(1) {
	padding: 1em 1em 0;
}
.topics_area .content-slider-container .myContentSwiper .free_box p:nth-child(2) {
	padding: 0.5em 1em 0.5em;
	position: relative;
	font-weight: 400;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #222;
}
.topics_area .content-slider-container .myContentSwiper .free_box p:nth-child(2)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 104%;
	height: 2px;
	display: block;
	background-color: #000;
}
/*
.topics_area .myContentSwiper .free_box img {
	width: auto !important;
}
*/
.topics_area .myContentSwiper .free_box {
	padding: 0;
}

/*
 * トピックスのリンク設定が画像のみ・テキストのみで両方に適用。スクリーンリーダーでは片方のみ読み上げ。（CSS側）
 */
/* スライドを基準位置にする */
.swiper-slide {
  position: relative;
}

/* JSで挿入した透明リンクのスタイル */
.swiper-slide-overlay-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 10; /* テキストや画像より上に配置 */
	background-color: rgba(0,0,0,0); /* 透明（古いブラウザ対策） */
	text-decoration: none;
}

/* ホバー時の効果をスライド全体につけたい場合 */
.swiper-slide a {
	opacity: 0.8;
	text-decoration: none;
}
.swiper-slide a:hover {
	transition: opacity 0.3s;
	text-decoration: underline;
}

.topics_area .content-slider-container .myContentSwiper .free_box p:nth-child(2):has(+ a:hover) {
	text-decoration: underline;
}








/* --------------------------------------------------------------------------
   新着情報＆予約状況
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.content_area {
	padding: 0 1em;
}
.content_area_inner {
	display: flex;
	gap: 2em;
	width: 1100px;
	max-width: 100%;
	margin: 0 auto;
}
.news_area {
	flex: 1 1 60%;
}
.reserve {
	flex: 1 1 40%;
}

/*
 * 見出し
 */
.content_area h2 {
	position: relative;
	z-index: 3;
	margin: 0 0 1.5em;
	padding: 0 1.5em 0 0;
	color: #08442C;
	font-size: 1.875em;
	text-align: left;
	letter-spacing: 0.25em;
}
.content_area h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: auto;
	bottom: 0;
	z-index: -1;
	background-image: url(/img/taiken/bg_h2.png);
	width: 159px;
	height: 92px;
	margin: auto;
}
.content_area h2::after {
	content: '';
	position: absolute;
	top: auto;
	left: 3.5em;
	right: auto;
	bottom: -50%;
}
.content_area .news_area h2::after {
	background-image: url(/img/taiken/img_h2_news.png);
	width: 91px;
	height: 41px;
}
.content_area .reserve h2::after {
	background-image: url(/img/taiken/img_h2_reserve.png);
	width: 126px;
	height: 51px;

}


/*
 * 新着情報
 */
.content_area .section_information {
	border: 1px solid #707070;
	border-radius: 8px;
}
.content_area .section_information_list {
	padding: 2em;
}
.content_area .section_information_list ul {
	margin: 0 0 1.25em;
	padding: 0;
	list-style: none;
}
.content_area .section_information_list ul li {
	background-image: radial-gradient(circle, #ccc 1px, transparent 1px);
	background-size: 8px 2px;
}
.content_area .linkBox {
	margin: 1em 0 0;
}
.content_area .link_ichiran.linkBtn a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	color: #FFF;
	background-color: #24742E;
	border: 1px solid #24742E;
	padding: 0.5em 1em;
	border-radius: 5px;
	text-decoration: none;
	text-align: center;
	line-height: 1.5;
	letter-spacing: 0;
	width: 250px;
}
.content_area .link_ichiran.linkBtn a::after {
	content: '';
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	width: 33px;
	height: 10px;
	background-image: url('/img/taiken/icon_arrow_white.png');
	background-size: contain;
	background-repeat: no-repeat;
}
.content_area .link_ichiran.linkBtn a:hover {
	transform: translateY(0px);
	box-shadow: none;
	background-color: #fff;
	color: #24742E;
}
.content_area .link_ichiran.linkBtn a:hover::after {
	background-image: url('/img/taiken/icon_arrow_green.png');
}
.article_title a {
	text-decoration: none;
}
.article_title a:hover {
	text-decoration: underline;
}

/*
 * 予約状況
 */
.reserve ul {
	list-style-type: none;
}
.reserve ul li {
	margin: 1em 0;
}
.reserve ul li a {
	padding: 1em 1.5em 1em 2.5em;
	border: 1px solid #222;
	display: block;
	border-radius: 8px;
	position: relative;
	text-decoration: none;
	transition: 0.3s;
	color: #222;
}
.reserve ul li a::before {
	content: '';
	position: absolute;
	left: 0;
	top: calc(50% - 2px / 2);
	display: block;
	height: 2px;
	width: 30px;
	background-color: #24742E;
	transform: translateX(-50%);
}
.reserve ul li a::after {
	content: '';
	position: absolute;
	top: calc(50% - 10px / 2);
	right: 0.5em;
	width: 33px;
	height: 10px;
	background-image: url(/img/taiken/icon_arrow_green.png);
}
.reserve ul li a:hover {
	color: #fff;
	background-color: #24742E;
}
.reserve ul li a:hover::after {
	background-image: url(/img/taiken/icon_arrow_white.png);
}
.reserve ul li a span {
	white-space: nowrap;
}


/* --------------------------------------------------------------------------
   施設案内
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.facility_area {
	margin: 7.5em 0;
}
.facility_area_inner {
	margin: 3.5em 0;
	padding: 2.5em 1em;
	background-color: #033E0A;
	position: relative;
}
.facility_area_inner::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* 背景画像の設定 */
	background-image: url(/img/taiken/bg_facility.png);
	background-size: auto;
	background-position: center;

	/* ここで透明度を指定 */
	opacity: 0.1;

	/* 背景色の「上」、コンテンツの「下」に配置 */
	z-index: 0;
}
.balloon-container {
	max-width: 100%;
	width: 1000px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 3em 1em;
	position: relative;
}
.facility_item {
	flex: 1 0 calc(33% - 1em / 2);
	max-width: 300px;
}

/*
 * 見出し
 */
.facility_area h2 {
	position: relative;
	z-index: 3;
	padding: 0 1.5em;
	color: #08442C;
	font-size: 1.875em;
	text-align: center;
	letter-spacing: 0.25em;
}
.facility_area h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-image: url(/img/taiken/bg_h2.png);
	width: 159px;
	height: 92px;
	margin: auto;
}
.facility_area h2::after {
	content: 'facility';
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	bottom: -33%;
	font-size: 0.46666666em;
	letter-spacing: 0.1em;
}

/*
 * 吹き出し
 */
.balloon {
	position: relative;
	display: inline-block;
	padding: 0.75em 0.5em;
	background: #fff;
	border-radius: 15px;
	color: #333;
	font-weight: bold;
	border: 3px solid;
	width: 100%;
	text-align: center;
}

/* 吹き出しの三角部分（外側の線用） */
.balloon::before {
	content: "";
	position: absolute;
	top: 100%; /* 枠線の真下に配置 */
	left: 50%;
	transform: translateX(-50%);
	border: 12px solid transparent;
	z-index: 1;
}

/* 吹き出しの三角部分（内側の塗りつぶし用） */
.balloon::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 10px solid transparent;
	border-top-color: #fff; /* 中の色と同じにする */
	z-index: 2;
	margin-top: -1px; /* 1px上にずらして線を隠す */
}
/* ライム */
.lime {
	border-color: #a5ff30;
}
.lime::before {
	border-top-color: #a5ff30;
}

/* オレンジ */
.orange {
	border-color: #ff8000;
}
.orange::before {
	border-top-color: #ff8000;
}

/* シアン */
.cyan {
	border-color: #00bcd4;
}
.cyan::before {
	border-top-color: #00bcd4;
}

/* ピンク */
.pink {
	border-color: #e67bff;
}
.pink::before {
	border-top-color: #e67bff;
}

/* コーラル（赤系） */
.coral {
	border-color: #ff5e5e;
}
.coral::before {
	border-top-color: #ff5e5e;
}

/* スカイ（青系） */
.sky {
	border-color: #758cff;
}
.sky::before {
	border-top-color: #758cff;
}
.baloon_img {
	margin: 1em 0 0;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.baloon_img img {
	max-width: 100%;
	border-radius: 10px;
	border-radius: 10px;
	overflow: hidden;
}
.baloon_img::before {
	content: '';
	display: block;
	width: 0;
	height: 100%;
	opacity: 0.8;
	position: absolute;
	transition: 0.3s;
}
.balloon.lime + .baloon_img::before {
	background-color: #396400;
}
.balloon.orange + .baloon_img::before {
	background-color: #642a00;
}
.balloon.cyan + .baloon_img::before {
	background-color: #006448;
}
.balloon.pink + .baloon_img::before {
	background-color: #781f8c;
}
.balloon.coral + .baloon_img::before {
	background-color: #8c1616;
}
.balloon.sky + .baloon_img::before {
	background-color: #26378e;
}

.facility_item a:hover .baloon_img::before {
	width: 100%;
}
.facility_item a:hover .baloon_img img {
	opacity: 1;
}
.baloon_img::after {
	content: '';
	position: absolute;
	z-index: 1;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	color: #fff;
	opacity: 0;
	transition: 0.3s;
	font-weight: 700;
	white-space: pre-wrap;
	text-align: center;
	font-size: 1.25em;
}
.facility_item a:hover .baloon_img::after {
	opacity: 1;
}
.balloon.lime + .baloon_img::after {
	content: '猪苗代町体験交流館\A（学びいな）';
}
.balloon.orange + .baloon_img::after {
	content: '猪苗代町図書歴史情報館\A（和みいな）';
}
.balloon.cyan + .baloon_img::after {
	content: '町有体育施設';
}
.balloon.pink + .baloon_img::after {
	content: 'むかし体験館';
}
.balloon.coral + .baloon_img::after {
	content: '文化財';
}
.balloon.sky + .baloon_img::after {
	content: '歴史民俗資料館';
}

.balloon span {
	white-space: nowrap;
}



/* --------------------------------------------------------------------------
   バナーエリア
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.bnr_area {
	padding: 0 1em;
}
.bnr_area_inner {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
}
.bnr_area_inner ul {
	list-style-type: none;
	display: flex;
	gap: 1em;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}
.bnr_area_inner ul li {
	flex: 1 1 calc(50% - 1em);
}
.bnr_area_inner ul li a img {
	width: 470px;
	max-width: 100%;
}


/* --------------------------------------------------------------------------
   関連リンク
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.link_area {
	margin: 7.5em 0 0;
	padding: 0 1em;
}
.link_area_inner {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
}

/*
 * 見出し
 */
.link_area h2 {
	position: relative;
	z-index: 3;
	padding: 0 1.5em;
	color: #08442C;
	font-size: 1.875em;
	text-align: center;
	letter-spacing: 0.25em;
}
.link_area h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-image: url(/img/taiken/bg_h2.png);
	width: 159px;
	height: 92px;
	margin: auto;
}
.link_area h2::after {
	content: 'link';
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	bottom: -33%;
	font-size: 0.46666666em;
	letter-spacing: 0.1em;
}

/*
 * コンテンツ
 */
#site_footer_box {
	padding: 2em 0;
	display: grid;
	gap: 1em;
	justify-content: space-between;
	grid-template-columns: repeat(4, auto);
}
#site_footer_box p {
	flex: 1 0 calc(25% - 1em);
	text-align: center;
	margin: 0;
	padding: 0;
}
#site_footer {
	margin: 0;
	padding: 0;
	width: 100%;
}



/* --------------------------------------------------------------------------
   アクセス
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.access_area {
	margin: 5em 0 0;
}

/*
 * 見出し
 */
.access_area h2 {
	position: relative;
	z-index: 3;
	padding: 0 1.5em;
	color: #08442C;
	font-size: 1.875em;
	text-align: center;
	letter-spacing: 0.25em;
}
.access_area h2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-image: url(/img/taiken/bg_h2.png);
	width: 159px;
	height: 92px;
	margin: auto;
}
.access_area h2::after {
	content: 'access';
	position: absolute;
	top: auto;
	left: 0;
	right: 0;
	bottom: -33%;
	font-size: 0.46666666em;
	letter-spacing: 0.1em;
}

/*
 * コンテンツ
 */
.access_area iframe {
	margin: 2em 0 -5px;
	max-width: 100%;
}



/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
/*
 * レイアウト
 */
.footer_area {
	color: #fff;
	background-color: #24742E;
	padding: 0 1em;
}
.footer_area_inner {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0 2em;
}
.footer_sitetitle {
	padding: 2em 0 0.5em;
	flex: 1 0 100%;
}
.footer_contact {
	flex: 1 1 calc(50% - 2em / 2);
}
.footer_bnr {
	flex: 1 1 calc(50% - 2em / 2);
}
.copyright {
	flex: 1 0 100%;
	padding: 1.5em 0 0.5em;
	text-align: center;
}
.contact_num, .contact_num a, .contact_num a[href^="tel"] {
	color: #fff !important;
}


/*
 * コンテンツ
 */
.footer_sitetitle img {
	width: 382px;
	max-width: 100%;
}

/*
 * 右側バナー
 */
.footer_bnr ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	justify-content: center;
}
.footer_bnr ul li {
	flex: 1 0 calc(50% - 1em / 2);
	max-width: 250px;
	min-width: 170px;
}
.footer_bnr ul li a {
	color: #222;
	text-decoration: none;
	display: block;
	background-color: #fff;
	text-align: center;
	padding: 0.75em;
	border-radius: 5px;
	position: relative;
	font-weight: 700;
	transition: 0.3s;
}
.footer_bnr ul li a:hover {
	opacity: 0.8;
}
.footer_bnr ul li a.btn_contact::after {
	content: '';
	position: absolute;
	background-image: url(/img/taiken/icon_arrow_green.png);
	width: 33px;
	height: 10px;
	top: calc(50% - 10px / 2);
	right: 1em;
}
.footer_bnr ul li a.btn_main span {
	position: relative;
}
.footer_bnr ul li a.btn_main span::before {
	content: '';
	position: absolute;
	left: -10px;
	top: calc(50% - 28px / 2);
	background-image: url(/img/taiken/logo_inawashiro.png);
	width: 28px;
	height: 28px;
	transform: translateX(-100%);
}

/* --------------------------------------------------------------------------
   トップへ戻るボタン
   -------------------------------------------------------------------------- */
#toTopBtn {
	position: fixed;
	bottom: 15px;
	right: 20px;
	width: 60px;
	height: 60px;
	background-color: #fff;
	color: #24742e;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 9999;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s, visibility 0.5s;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #24742e;
	/* font-size: 3em; */
}
#toTopBtn:hover {
	opacity: 0.8;
}

/* スクロールした時に付与するクラス */
#toTopBtn.is-visible {
  opacity: 1;
  visibility: visible;
}
#toTopBtn p {
	margin: 0;
	font-size: 1.125em;
	font-weight: 400;
	position: relative;
}
#toTopBtn p::before {
	content: 'TOP';
}


/* ==========================================================================
   下層ページ
   ========================================================================== */
/* --------------------------------------------------------------------------
   レイアウト
   -------------------------------------------------------------------------- */
#mymainback_bg {
	background-color: #fff;
	background-image: none;
}
.mymainback_bg_inner {
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
}
#site-list-2 #container, #site-list1 #container, #site-detail #container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
    box-sizing: border-box; 
    flex: 1;
    margin-top: 0 !important; 
}
#site-list-2 #container #mymainback_bg, #site-list1 #container #mymainback_bg, #site-detail #container #mymainback_bg {
	flex: 1;
}
.tpl_side1 #mymainback {
	display: block;
	background-color: #fff;
	padding: 1.5em 0 7.5em;
}
.tpl_side1 #main_a, .tpl_side2 #main_a {
	padding: 0;
}

/* --------------------------------------------------------------------------
   見出し1
   -------------------------------------------------------------------------- */
#main_header {
	margin: 0;
	background-color: #08442C;
	background-image: none;
	position: relative;
}
#main_header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-size: 168px 128px;
	background-image: url(/img/taiken/bg_facility.png);
	background-repeat: repeat;
	display: block;
	width: 100%;
	height: 100%;
	opacity: 0.05;
}
#main_header h1 {
	width: 100%;
	margin: 0;
	padding: 1.2em 1em;
	font-size: 2.625em;
	text-align: center;
}

/* --------------------------------------------------------------------------
   パンくず
   -------------------------------------------------------------------------- */
.pankuzu:first-child .icon_current, #footstep_ttl {
	background: #24742E;
}
#clear_footstep {
	border: 2px solid #24742E;
	background: url("/img/common/icon_clear.png") no-repeat center center #24742E;
}
.pankuzu a {
	color: #222;
}
#pankuzu_wrap {
	padding: 2em 0 0;
}
div#footstep_wrap {
    display: none !important;
}

/* --------------------------------------------------------------------------
   大メニュー
   -------------------------------------------------------------------------- */
#site-list-2 .info_list ul li .article_title a {
	font-size: 1.5em;
	padding: 1em;
	display: block;
	color: #222;
	background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="2"><circle cx="1" cy="1" r="1" fill="%23000000"/></svg>');
	background-repeat: repeat-x;
	background-position: top;
	background-size: 5px 2px;
	position: relative;
	transition: 0.3s;
}

#site-list-2 .info_list ul li:last-child .article_title a {
	background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="2"><circle cx="1" cy="1" r="1" fill="%23000000"/></svg>'),
					  url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="2"><circle cx="1" cy="1" r="1" fill="%23000000"/></svg>');
	background-position: top, bottom;
}
#site-list-2 .info_list ul li .article_title a::before {
	display: none;
}
#site-list-2 .info_list ul li .article_title a::after {
	content: '';
	position: absolute;
	top: calc(50% - 10px / 2);
	right: 0.5em;
	width: 33px;
	height: 10px;
	background-image: url(/img/taiken/icon_arrow_green.png);
}
.info_list ul li {
	margin: 0;
	padding: 0;
	isolation: isolate;
}
#site-list-2 .info_list ul li .article_title a::before {
	content: '';
	position: absolute;
	top: 1px;
	left: 0;
	display: block;
	background-color: #fff;
	z-index: -1;
	width: 100%;
	height: 100%;
	transition: 0.3s;

	border: none;
	right: 0;
	margin-top: 0;
	transform: rotate(0);
}
#site-list-2 .info_list ul li:last-child .article_title a::before {
	height: calc(100% - 3px);
}

#site-list-2 .info_list ul li .article_title a:hover {
	color: #fff;
}
#site-list-2 .info_list ul li .article_title a:hover::before {
	background-color: #24742E;
	text-decoration: none;
}
#site-list-2 .info_list ul li .article_title a:hover::after {
	background-image: url(/img/taiken/icon_arrow_white.png);
}

/* --------------------------------------------------------------------------
   小メニュー
   -------------------------------------------------------------------------- */
.info_list.info_list_date ul li {
	margin: 0;
	padding: 1em;
	display: block;
	background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="2"><circle cx="1" cy="1" r="1" fill="%23000000"/></svg>');
	background-repeat: repeat-x;
	background-position: top;
	background-size: 5px 2px;
}
.info_list.info_list_date ul li:last-child {
	background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="2"><circle cx="1" cy="1" r="1" fill="%23000000"/></svg>'),
					  url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="2"><circle cx="1" cy="1" r="1" fill="%23000000"/></svg>');
	background-position: top, bottom;
}
.info_list.info_list_date ul li > span.article_date {
	display: inline-block;
	padding: 0 0 0 1em;
	position: relative;
}
.info_list.info_list_date ul li > span.article_date::before {
	content: '';
	position: absolute;
	top: calc(50% - 15px / 2);
	left: 0;
	display: block;
	width: 5px;
	height: 15px;
	background-color: #24742E;
}
.info_list.info_list_date ul li > span.article_title {
	padding: 0.5em 0 0 1em;
}
.info_list.info_list_date ul li > span.article_title a {
	text-decoration: underline;
}
.info_list.info_list_date ul li > span.article_title a:hover {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   最終ページ
   -------------------------------------------------------------------------- */
#mainimg, #site-detail .tpl_side1 #mymainback {
	max-width: 100%;
}
#site-detail #main_body div.detail_free {
	isolation: isolate;
}
#main_body h2 {
	border-radius: 0;
	outline: none;
	border: 2px solid #222;
	background-image: none;
	box-shadow: none;
	background-color: #fff;
	font-size: 1.5em;
	padding: 1em 1.5em;
	position: relative;
	width: calc(100% - 10px);
}
#main_body h2::before {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	display: block;
	width: 75px;
	height: 75px;
	background-color: #F8F827;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
#main_body h2::after {
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	display: block;
	width: 100%;
	height: 100%;
	background-color: #E3DBBA;
	z-index: -1;
}
#main_body h3 {
	border-radius: 0;
	background-color: #24742E;
	padding: 0.75em 1.25em;
	border-top: none;
	border-left: 15px solid #08442C;
	border-right: none;
	border-bottom: none;
	color: #fff;
	font-size: 1.25em;
}
#main_body h4 {
	background: repeating-linear-gradient( to right, #DCF1DF, #DCF1DF 3px, #F2FFF4 3px, #F2FFF4 6px );
	border: 2px solid #23742D;
	padding: 0.75em 1.75em;
	font-size: 1.125em;
}
#main_body h5 {
	padding: 0.5em 2em;
	font-size: 1.0625em;
	position: relative;
	border: none;
	background-image: none;
}
#main_body h5::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 15px;
	height: 12px;
	background: linear-gradient(to bottom, #24742E 50%, #08442C 50%);
}
#main_body h5::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	border-radius: 5px;
	display: block;
	background-color: #23742D;
}
#main_body h6 {
	padding: 0.5em 2em;
	font-size: 1em;
	border: none;
	background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="5" height="2"><circle cx="1" cy="1" r="1" fill="%2324742E"/></svg>');
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: 5px 2px;
}
#main_body th {
	background-color: #FBFB7D;
}
/*
 * お問い合わせ先
 */
#section_footer {
	border: 1px solid #222;
	border-radius: 5px;
}
#main_body #section_footer h2 {
	width: 100%;
	background-color: #23742D;
	margin: 0;
	padding: 0.75em;
}
#section_footer_detail {
	padding: 1em 2.5em;
	line-height: 1.6;
}
.sf_email a {
	display: inline-block;
	background-color: #23742D;
	color: #fff;
	text-decoration: none;
	padding: 0.75em 1.5em 0.75em 3em;
}
.sf_email a {
	display: inline-block;
	background-color: #23742D;
	color: #fff;
	text-decoration: none;
	padding: 0.75em 1.5em 0.75em 3.25em;
	position: relative;
	border-radius: 5px;
	border: 1px solid #23742D;
	transition: 0.3s;
}
.sf_email a::before {
	content: '';
	position: absolute;
	left: 1em;
	top: calc(50% - 18px / 2);
	background-image: url(/img/taiken/icon_mail_white.png);
	width: 24px;
	height: 18px;
	transition: 0.3s;
}
.sf_email a:hover {
	background-color: #fff;
	color: #23742D;
}
.sf_email a:hover::before {
	background-image: url(/img/taiken/icon_mail_green.png);
}
#section_footer_detail span[class*="sf_name"] {
    margin-bottom: 3px;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
   
/* --------------------------------------------------------------------------
   1200px以下ここから
   -------------------------------------------------------------------------- */
@media all and (max-width:1200px){
	/*
	 * ヘッダー
	 */
	#header {
		gap: 1em;
	}
	.taiken-nav ul {
		display: flex;
		gap: 1.75em;
		white-space: nowrap;
		list-style-type: none;
		margin: 0;
		padding: 0;
		height: 30px;
	}
	
	/*
	 * 新着情報＆予約状況
	 */
	.content_area_inner {
		gap: 0;
	}

	/*
	 * フッター
	 */
	.copyright {
		flex: 1 0 100%;
		padding: 2.25em 0 2.25em;
		text-align: center;
	}
}
/* --------------------------------------------------------------------------
   1200px以下ここまで
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   991px以下ここから
   -------------------------------------------------------------------------- */
@media all and (max-width:991px){
	/*
	 * ハンバーガーメニュー
	 */
	/* 1. ヘッダーの重なりを最前面に固定 */
	#taiken_header {
		position: relative;
		z-index: 9999; /* 非常に高い値に */
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 0 1 90%;
	}

	/* 2. ボタンをメニューより手前に配置 */
	.menu-trigger {
		display: block;
		position: absolute;
		right: 5px;
		z-index: 10002; /* ヘッダーよりさらに上 */
		width: 44px;
		height: 44px;
		background: none;
		border: none;
	}

	/* 3. メニュー本体：transformで制御 */
	#taiken-nav-wrapper {
		position: fixed !important;
		top: 0;
		left: 0;
		width: 80%;
		max-width: 80%;
		min-width: 300px;
		height: 100vh;
		background: #fff;
		z-index: 10000;
		
		/* 初期状態：隠す。transitionはここには書かない */
		transform: translateX(-100%);
		visibility: hidden;
		transition: none; /* アニメーションを無効にしておく */

		padding-top: 3em;
		box-shadow: 5px 0 15px rgba(0,0,0,0.1);
		overflow-y: auto;
	}

	/* アニメーションを許可するクラス（JSで制御） */
	#taiken-nav-wrapper.is-animating {
		transition: transform 0.4s ease-out, visibility 0.4s;
	}

	/* メニュー展開時 */
	body.is-menu-open #taiken-nav-wrapper {
		transform: translateX(0);
		visibility: visible;
		display: block;
	}

	/* 4. オーバーレイ：クラス付与時に確実に表示 */
	.menu-overlay {
		display: none; /* デフォルト非表示 */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 9999; /* メニューのすぐ下 */
	}

	/* クラスがついた時だけ表示 */
	body.is-menu-open .menu-overlay {
		display: block;
	}

	/* 5. 三本線 → ×印（再掲） */
	.menu-trigger span {
		display: block; position: absolute; left: 7px;
		width: 30px; height: 2px; background-color: #333; transition: all 0.3s;
	}
	.menu-trigger span:nth-child(1) { top: 13px; }
	.menu-trigger span:nth-child(2) { top: 21px; }
	.menu-trigger span:nth-child(3) { top: 29px; }

	.menu-trigger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.menu-trigger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.menu-trigger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	body.is-menu-open {
		overflow: hidden; /* 背景スクロール禁止 */
	}
	.taiken-nav ul {
		display: block;
		height: auto;
		padding: 1em;
	}
	.taiken-nav ul li a {
		padding: 1em;
		display: block;
		font-size: 1.25em;
		border-top: 1px dashed #ccc;
		position: relative;
	}
	.taiken-nav ul li:last-child a {
		border-bottom: 1px dashed #ccc;
	}
	.taiken-nav ul li a::after {
		content: '';
		position: absolute;
		top: calc(50% - 10px / 2);
		right: 0.5em;
		width: 33px;
		height: 10px;
		background-image: url(/img/taiken/icon_arrow_green.png);
	}

	.gsib_a #gsc-i-id1 {
		height: 60px !important;
	}
	.gsc-search-button.gsc-search-button-v2 {
		height: 60px;
		padding: 6px 30px;
	}
	.gsc-search-button-v2 svg {
		width: 25px;
		height: 25px;
	}

	/*
	 * 施設案内
	 */
	.balloon-container {
		justify-content: center;
		align-items: flex-end;
	}
	.facility_item {
		flex: 1 0 calc(50% - 1em / 2);
		max-width: calc(50% - 1em / 2);
	}

	/*
	 * フッター
	 */
	.footer_bnr ul li a.btn_contact::after {
		width: calc(33px * 0.8);
		height: calc(10px *0.8);
		background-size: calc(33px * 0.8) calc(10px * 0.8);
	}

	/*
	 * 大メニュー
	 */
	#main_header h1 {
		font-size: 2em;
	}
	#site-list-2 .info_list ul li .article_title a {
		font-size: 1.25em;
	}
	.tpl_side1 #mymainback {
		padding: 1.5em 0 2.5em;
	}

	/*
	 * 最終ページ
	 */
	#main_body h2 {
		font-size: 1.25em;
	}
	#main_body h2::before {
		width: 50px;
		height: 50px;
	}
	#main_body h3 {
		font-size: 1.15em;
	}
}
/* --------------------------------------------------------------------------
   991px以下ここまで
   -------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------
   767px以下ここから
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
	/*
	 * スライドショー
	 */
	.main_visual_area .swiper-slide img {
		width: 100vw !important;
		height: auto !important;
		object-fit: cover;
		aspect-ratio: 4.5/3;
	}
	.swiper-controls-wrapper {
		bottom: 1em;
		filter: drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 1px #fff);
	}
	
	
	/*
	 * コンテンツスライダー
	 */
	.swiper-peek .swiper-wrapper > *,
	.swiper-peek .swiper-slide {
		width: 80% !important;
	}
	.content-slider-container .swiper {
		padding: 0 20px;
	}
	/*
	 * 予約状況
	 */
	.reserve ul li {
		margin: 0.5em 0;
	}
	/*
	 * 施設案内
	 */
	.facility_area {
		margin: 5em 0;
	}
	.facility_item {
		flex: 1 0 calc(50% - 1em / 2);
	}

	/*
	 * バナー
	 */
	.link_area {
		margin: 5em 0 0;
	}
	.bnr_area_inner ul li {
		flex: 1 1 calc(100% - 1em);
	}

	/*
	 * 関連リンク
	 */
	#site_footer_box {
		padding: 2em 0;
		display: grid;
		grid-template-columns: repeat(2, auto);
		justify-content: center;
	}
	#site_footer_box p {
	}

	/*
	 * フッター
	 */
	.footer_area_inner {
		gap: 1em 2em;
	}
	.footer_sitetitle {
		padding: 2em 0 0;
	}
	.footer_contact {
		flex: 1 1 100%;
	}
	.footer_bnr {
		flex: 1 1 auto;
	}
}
/* --------------------------------------------------------------------------
   767px以下ここまで
   -------------------------------------------------------------------------- */




/* --------------------------------------------------------------------------
   680px以下ここから
   -------------------------------------------------------------------------- */
@media screen and (max-width: 680px) {
	/*
	 * トピックス
	 */
	.content-slider-container .swiper {
		padding: 0 50px;
	}
	.topics_area .content-slider-container .myContentSwiper .free_box p:nth-child(2) {
		font-size: 0.9em;
	}
	.content-slider-container {
		padding: 15px 0;
	}
	.topics_area::before {
		top: -10%;
	}
	.topics_area::after {
		top: 0;
	}

	/*
	 * 新着情報＆予約状況
	 */
	.content_area_inner {
		display: block;
	}
	.reserve {
		margin: 7.5em 0 0;
	}
	.reserve ul {
		display: flex;
		gap: 0 3em;
		margin: 0;
		padding: 0 1em;
		flex-wrap: wrap;
	}
	.reserve ul li {
		flex: 1 0 calc(50% - 3em / 2);
		min-width: 260px;
	}
	.reserve ul li a {
		padding: 1em 1.5em 1em 1.5em;
	}
	.reserve ul li a::before {
		width: 20px;
	}
	.reserve ul li a::after {
		width: calc(33px * 0.8);
		height: calc(10px * 0.8);
		background-size: calc(33px * 0.8) calc(10px * 0.8);
	}
	
	#section_footer_detail {
		padding: 1em 1.5em;
	}
}
/* --------------------------------------------------------------------------
   680px以下ここまで
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   480px以下ここから
   -------------------------------------------------------------------------- */
@media screen and (max-width: 480px) {
	#site_footer_box p {
	}
}
/* --------------------------------------------------------------------------
   480px以下ここまで
   -------------------------------------------------------------------------- */




/* --------------------------------------------------------------------------
   374px以下ここから
   -------------------------------------------------------------------------- */
@media all and (max-width:374px){
	#taiken_header img {
		max-width: 280px;
	}
	.facility_item {
		max-width: calc(50% - 1em / 2);
	}

	.baloon_img::after {
		font-size: 0.95em;
	}
}
/* --------------------------------------------------------------------------
   374px以下ここまで
   -------------------------------------------------------------------------- */