@charset "utf-8";

/*-------------------------------------------------------
// Base
		variables
		default reset
		base
-------------------------------------------------------*/

/*-------------------------------------------------------
		variables
-------------------------------------------------------*/

:root {
	--c_white: #fff;
	--c_main: #1c1c1c;
	--c_base: var(--c_white);

	--c_accent: #488f2d;
	--c_accent-rbg: 72 143 45;
	--c_accent-lt: #efe;
	--c_eyecatch: #e70040;
	--c_maintext: #333;
	--c_subtext: #767676;
	--c_solidline: #ddd;

	--c_slgray: #fbfbfb;
	--c_plgray: #f9f9f9;
	--c_ltgray: #f0f0f0;
	--c_mdgray: #767676;
	--c_dkgray: #444;
	--c_dkblue: #1c344d;

	--c_transparent: rgb(0 0 0 / 0);
	--c_link: var(--c_maintext);
	--c_hover: var(--c_link);
	--c_active: var(--c_link);
	--c_visited: var(--c_link);
	--width: 1200px;
}

/*-------------------------------------------------------
		default reset
-------------------------------------------------------*/

html {
	/* 1rem */
	font-size: 16px;
	scroll-padding-top: 100px;
}

@media (max-width: 320px) {
	html {
		/* 1rem */
		font-size: 14px;
	}
}

html *,
::before,
::after {
	box-sizing: border-box;
}

address {
	font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
button,
ul,
dl,
dt,
dd {
	margin: 0;
	padding: 0;
	font-weight: normal;
	/* ul only */
	list-style: none;
}

img {
	width: 100%;
	max-width: 100%;
	/* 古いブラウザ用 */
	height: auto;
	/* 画像下のスペースを消す */
	vertical-align: bottom;
	/* for chrome 縮小画像がぼやけるため */
	image-rendering: -webkit-optimize-contrast;
}

table {
	border-spacing: 0;
	border-collapse: collapse;
}

input,
button,
textarea,
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	background-color: #fff;
}

button,
select {
	border: none;
	cursor: pointer;
}

/*-------------------------------------------------------
		base
-------------------------------------------------------*/

body {
	line-height: 1.7;
	color: var(--c_maintext);
	background-color: var(--c_base);
	font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", "Yu Gothic", sans-serif;
}

a {
	color: var(--c_link);
	/* for iOS */
	text-decoration-line: underline;
	text-decoration-style: dashed;
	text-decoration-color: var(--c_link);
	text-decoration-thickness: 1px;
	text-underline-offset: 25%;
}

a:hover {
	color: var(--c_hover);
	text-decoration-style: solid;
	opacity: 0.7;
}

.main-visual__item a,
.headergroup__logo a,
.headergroup__logo a:hover,
footer a,
footer a:hover {
	color: var(--c_white);
	text-decoration: none;
}

/*-------------------------------------------------------
// Layout（全体のレイアウト）
		header（共通ヘッダー）
		headergroup（ヘッダーグループ）
		burger（ハンバーガーボタン）
		dropdown（施設管理ボタン）
		menu・nav（メニューリスト）
		main-contents（メインコンテンツ）
		main-visual（メイン画像）
		container（メインコンテンツの囲み）
		section（セクション）
		section-title（セクション見出し）
		section-body（セクション本文）
		grid（グリッド）
		li-flex（リストの横並び）
		dl-flex（説明リストの横並び）
		event-list（イベント一覧）
		facility-list（管理施設一覧）
		links（リンク集）
		footer（共通フッター）
		footergroup（フッターグループ）
		address（連絡先）
		pagetop（ページトップボタン）
-------------------------------------------------------*/

/* header（共通ヘッダー）
-------------------------------------------------------*/

.header {
	position: sticky;
	align-items: center;
	top: -64px;
	height: 128px;
	z-index: 100;
}

.header__inner {
	position: sticky;
	height: 64px;
}

@media (min-width: 768px) {
	.header {
		top: -74px;
		height: 148px;
	}

	.header__inner {
		height: 74px;
	}
}

/* 財団コンテンツのみ */

.header--zaidan {
	position: fixed;
	top: 0;
	height: 64px;
}

@media (min-width: 768px) {
	.header--zaidan {
		height: 74px;
	}
}

/* headergroup（ヘッダーグループ）
-------------------------------------------------------*/

.headergroup {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	width: 100%;
	height: 64px;
}

.headergroup--global {
	border-bottom: solid 1px var(--c_solidline);
	background-color: var(--c_base);
	z-index: 90;
}

.headergroup--facility {
	background-color: var(--c_main);
	z-index: 80;
}

@media (min-width: 768px) {
	.headergroup {
		height: 74px;
	}
}

/* ロゴエリア */

.headergroup__logo {
	flex: 1 1 auto;
	display: inline-block;
	font-size: 1rem;
}

.headergroup--global .headergroup__logo {
	margin-left: 15px;
}

.headergroup--facility .headergroup__logo {
	margin-left: 22px;
	line-height: 1.2;
	font-weight: 500;
	font-size: 1.125rem;
	word-break: keep-all;
}

@media (min-width: 768px) {
	.headergroup--facility .headergroup__logo {
		margin-left: 25px;
		font-size: 1.375rem;
	}
}

/* タイトルロゴ */

.headergroup--global .headergroup__title {
	width: 200px;
}

@media (min-width: 768px) {
	.headergroup--global .headergroup__title {
		width: 300px;
	}
}

/* SNS ボタン */

.headergroup--facility .headergroup__sns {
	width: 30px;
	height: 30px;
	/* 44-28/2 */
	margin-right: 7px;
}

@media (min-width: 768px) {
	.headergroup--facility .headergroup__sns {
		width: 36px;
		height: 36px;
		margin-right: 13px;
	}
}

@media (min-width: 992px) {
	.headergroup--facility .headergroup__sns {
		margin: 0 24px 0 4px;
		order: 1;
	}
}

/* 財団コンテンツのみ */

.header--zaidan .headergroup {
	position: fixed;
}

/* burger（ハンバーガーボタン）
-------------------------------------------------------*/

.burger {
	position: sticky;
	width: 44px;
	height: 44px;
	cursor: pointer;
}

.burger--global {
	order: -1;
	margin-left: 15px;
}

.burger--facility {
	margin-right: 15px;
	background-color: var(--c_main);
}

@media (min-width: 768px) {
	.burger {
		width: 54px;
		height: 54px;
	}
}

@media (min-width: 992px) {
	.burger--facility {
		display: none;
	}
}

/* バーガーライン */

.burger__line {
	display: block;
	position: relative;
	margin: 0 auto;
	top: 0;
	width: 28px;
	transition: 0.3s ease;
}

.burger--global .burger__line {
	/* 中央ライン非表示 */
	height: 0;
	background-color: var(--c_main);
}

.burger--facility .burger__line {
	height: 2px;
	background-color: var(--c_white);
}

.burger__line::before,
.burger__line::after {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: inherit;
	transition: all .3s;
}

.burger--global .burger__line::before {
	top: -5px;
}

.burger--global .burger__line::after {
	top: 5px;
}

.burger--facility .burger__line::before {
	top: -8px;
}

.burger--facility .burger__line::after {
	top: 8px;
}

@media (min-width: 768px) {
	.burger__line {
		width: 34px;
	}

	.burger--global .burger__line::before {
		top: -7px;
	}

	.burger--global .burger__line::after {
		top: 7px;
	}

	.burger--facility .burger__line::before {
		top: -10px;
	}

	.burger--facility .burger__line::after {
		top: 10px;
	}
}

/* メニューが開いたとき */

.gmenu-open,
.fmenu-open {
	overflow: hidden;
}

.gmenu-open .burger--global,
.fmenu-open .burger--facility {
	z-index: 99;
}

.gmenu-open .burger--global .burger__line,
.fmenu-open .burger--facility .burger__line {
	width: 30px;
}

.fmenu-open .burger--facility .burger__line {
	background-color: var(--c_main);
}

.gmenu-open .burger--global .burger__line::before,
.gmenu-open .burger--global .burger__line::after,
.fmenu-open .burger--facility .burger__line::before,
.fmenu-open .burger--facility .burger__line::after {
	top: 0;
}

.fmenu-open .burger--facility .burger__line::before,
.fmenu-open .burger--facility .burger__line::after {
	background-color: var(--c_white);
}

.gmenu-open .burger--global .burger__line::before,
.fmenu-open .burger--facility .burger__line::before {
	transform: rotate(45deg);
}

.gmenu-open .burger--global .burger__line::after,
.fmenu-open .burger--facility .burger__line::after {
	transform: rotate(-45deg);
}

.gmenu-open .menu--global .menu__list,
.fmenu-open .menu--facility .menu__list {
	transform: translateY(0);
}

@media (min-width: 768px) {

	.gmenu-open .burger--global .burger__line,
	.fmenu-open .burger--facility .burger__line {
		width: 36px;
	}
}

/* dropdown（施設管理ボタン）
-------------------------------------------------------*/

.dropdown {
	position: sticky;
	width: 44px;
	height: 44px;
	margin-right: 15px;
	font-weight: 500;
	font-size: 0.625rem;
	cursor: pointer;
	/* for iOS */
	color: var(--c_link);
}

.dropdown__icon {
	display: block;
	position: relative;
	margin: 0 auto;
	bottom: -5px;
	width: 10px;
	height: 10px;
	border-top: solid 2px var(--c_main);
	border-right: solid 2px var(--c_main);
	transform: rotate(135deg);
	transition: 0.3s ease;
}

@media (min-width: 768px) {
	.dropdown {
		width: 54px;
		height: 54px;
		font-size: 0.75rem;
	}

	.dropdown__icon {
		bottom: -5px;
		width: 12px;
		height: 12px;
	}
}

/* 施設管理メニューが開いたとき */

.nav-open {
	overflow: hidden;
}

.nav-open .dropdown {
	z-index: 99;
}

.nav-open .dropdown__icon {
	bottom: -10px;
	transform: rotate(315deg);
}

.nav-open .nav__list {
	transform: translateX(0);
}

/* menu・nav（メニューリスト）
-------------------------------------------------------*/

.menu,
.nav {
	text-align: left;
}

/* メニューリスト */

.menu__list,
.nav__list {
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	position: fixed;
	top: 64px;
	width: 100%;
	max-width: 400px;
	height: 100%;
	padding-top: 0.5em;
	overflow: auto;
	background-color: var(--c_slgray);
	font-weight: 500;
	transition: 0.3s ease;
}

.menu--global .menu__list {
	left: 0;
	transform: translateX(-100%);
}

.menu--facility .menu__list,
.nav__list {
	right: 0;
	transform: translateX(100%);
}

@media (min-width: 768px) {

	.menu__list,
	.nav__list {
		top: 74px;
		font-size: 1.125rem;
	}
}

@media (min-width: 992px) {
	.menu--facility .menu__list {
		flex-direction: row;
		justify-content: flex-end;
		font-size: 0.75rem;
		/* reset */
		position: relative;
		top: auto;
		width: auto;
		max-width: none;
		height: auto;
		padding-top: 0;
		margin-right: 12px;
		overflow: visible;
		background-color: transparent;
		transition: none;
		transform: none;
	}
}

@media (min-width: 1024px) {
	.menu--facility .menu__list {
		font-size: 0.875rem;
	}
}

/* メニューアイテム */

.menu__item,
.nav__item {
	width: 100%;
	border-bottom: solid 1px var(--c_solidline);
}

@media (min-width: 992px) {
	.menu--facility .menu__item {
		width: auto;
		border-bottom: none;
	}
}

/* メニューリンク */

.menu__link,
.nav__link {
	display: block;
	text-decoration: none;
}

.menu--global .menu__link {
	padding: 1em 1em 1em 74px;
}

.menu--facility .menu__link,
.nav__link {
	padding: 1em 2em;
}

@media (min-width: 768px) {
	.menu--global .menu__link {
		padding-left: 84px;
	}
}

@media (min-width: 992px) {
	.menu--facility .menu__link {
		padding: 0 0.5rem;
		color: var(--c_white);
	}
}

/* main-contents（メインコンテンツ）
-------------------------------------------------------*/

.main-contents--zaidan {
	margin-top: 64px;
}

@media (min-width: 768px) {
	.main-contents--zaidan {
		margin-top: 74px;
	}
}

/* main-visual（メイン画像）
-------------------------------------------------------*/

.main-visual {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	position: relative;
	height: 300px;
	padding-top: calc(64px * 2);
	background-position: center;
	background-size: cover;
}

.main-visual--zaidan {
	/* height変更 */
	height: 500px;
	background-image: linear-gradient(0deg, var(--c_dkblue) 0%, var(--c_transparent) 25%), url(../images/photo-main-zaidan.jpg);
}

.main-visual--okanoyama {
	background-image: url(../images/photo-main-okanoyama.jpg);
	background-position: bottom;
	/* 変更 */
	padding-top: 60px;
	justify-content: center;
}

.main-visual--apikahall {
	background-image: url(../images/photo-main-apikahall.jpg);
}

.main-visual--seinennoie {
	background-image: url(../images/photo-main-seinennoie.jpg);
}

.main-visual--tenjinike {
	background-image: url(../images/photo-main-tenjinike.jpg);
}

@media (min-width: 768px) {
	.main-visual {
		height: 360px;
		padding-top: calc(74px * 2);
		background-position: center 55%;
	}

	.main-visual--zaidan {
		/* height変更 */
		height: 600px;
	}

	.main-visual--okanoyama {
		/* 変更 */
		padding-top: 50px;
		background-position: center 85%;
	}
}

/* 財団のみ */

.main-visual__title {
	padding: 1em;
	background-color: var(--c_accent);
	color: var(--c_white);
	font-size: clamp(1.25rem, 5vw, 2rem);
	font-family: "Oswald", sans-serif;
	font-weight: 500;
	text-align: center;
}

.main-visual__listwrapper {}

.main-visual__list {
	color: var(--c_white);
	font-size: clamp(0.75rem, 3vw, 1rem);
	font-weight: 700;
	text-shadow: 1px 1px 2px var(--c_main), 0 0 0.5rem var(--c_dkblue);
	text-align: center;
}

@media (min-width: 768px) {
	.main-visual__list {
		display: flex;
		justify-content: center;
		margin-bottom: 0.75em;
		font-size: clamp(1rem, 2vw, 1.25rem);
	}

	.main-visual__item {
		padding: 0 0.75em;
		line-height: 1;
	}

	.main-visual__item:not(:last-child) {
		border-right: solid 1px var(--c_white);
	}
}

/* 他施設のみ */

.main-visual__subtitle,
.main-visual__subtitle--big {
	color: var(--c_white);
	text-shadow: 1px 1px 2px var(--c_main), 0 0 0.5rem var(--c_main);
}

.main-visual__subtitle {
	font-size: clamp(0.875rem, 3vw, 1.375rem);
	font-family: "Oswald", sans-serif;
	font-weight: 400;
}

.main-visual__subtitle--big {
	font-size: clamp(1.125rem, 8vw, 2.75rem);
	font-weight: 500;
}

.main-visual__logo {
	position: absolute;
	right: 24px;
	bottom: 30px;
	width: 50%;
	max-width: 320px;
}

.main-visual__caption {
	position: absolute;
	left: 15px;
	bottom: 15px;
	color: var(--c_white);
	font-size: clamp(0.625rem, 2vw, 0.75rem);
}

/* container（メインコンテンツの囲み）
-------------------------------------------------------*/

.container {
	max-width: var(--width);
	margin: 0 auto;
	padding: 3rem 15px;
}

@media (min-width: 768px) {
	.container {
		padding: 3rem 25px;
	}
}

/* section（セクション）
-------------------------------------------------------*/

.section {
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.section {
		margin-bottom: 5rem;
	}
}

/* section-title（セクション見出し）
-------------------------------------------------------*/

.section-title {
	margin-bottom: 2rem;
	text-align: center;
}

.section-title__main {
	font-size: 1.625rem;
	font-weight: 600;
}

.section-title__sub {
	font-family: "Oswald", sans-serif;
	font-weight: 300;
}

@media (min-width: 768px) {

	.section-title {
		margin-bottom: 3rem;
	}

	.section-title__main {
		font-size: 2rem;
	}

	.section-title__sub {
		font-size: 1.25rem;
	}
}

/* section-body（セクション本文）
-------------------------------------------------------*/

.section-body {
	margin: 0 auto;
}

/* grid（グリッド）
-------------------------------------------------------*/

.grid {
	display: grid;
	gap: 1rem;
}

/* SP1カラム TB2カラム PC2カラム */

.grid--pc2col {
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 576px) {
	.grid--pc2col {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* SP1カラム TB2カラム PC3カラム */

.grid--pc3col {
	grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 576px) {
	.grid--pc3col {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.grid--pc3col {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* SP2カラム TB3カラム PC4カラム */

.grid--pc4col {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {
	.grid--pc4col {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 768px) {
	.grid--pc4col {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* li-flex（リストの横並び）
-------------------------------------------------------*/

.li-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

/* SP1カラム TB1カラム PC2カラム */

.li-flex--pc2tb1col li {
	width: 100%;
}

@media (min-width: 768px) {
	.li-flex--pc2tb1col li {
		/* width: 47%; */
		width: calc((100% - 1rem) / 2);
	}
}

/* SP1カラム TB2カラム PC2カラム */

.li-flex--pc2col li {
	width: 100%;
}

@media (min-width: 576px) {
	.li-flex--pc2col li {
		/* width: 47%; */
		width: calc((100% - 1rem) / 2);
	}
}

/* SP1カラム TB2カラム PC3カラム */

.li-flex--pc3col li {
	width: 100%;
}

@media (min-width: 576px) {
	.li-flex--pc3col li {
		/* width: 47%; */
		width: calc((100% - 1rem) / 2);
	}
}

@media (min-width: 992px) {
	.li-flex--pc3col li {
		width: calc((100% - 2rem) / 3);
	}
}

/* dl-flex（説明リストの横並び）
複数行になる場合は dt・dd直下にdivを入れること
-------------------------------------------------------*/

.dl-flex {
	margin-bottom: 2rem;
	border-top: solid 1px var(--c_mdgray);
	width: 100%;
}

.dl-flex dt,
.dl-flex dd {
	padding: 0.625rem;
	border-bottom: solid 1px var(--c_mdgray);
}

.dl-flex dt {
	background-color: var(--c_accent-lt);
	font-weight: bold;
}

@media (min-width: 768px) {
	.dl-flex {
		display: flex;
		flex-wrap: wrap;
	}

	.dl-flex dt,
	.dl-flex dd {
		display: flex;
		align-items: center;
	}

	.dl-flex dt {
		justify-content: center;
		width: 20%;
	}

	.dl-flex dd {
		width: 80%;
	}
}

/* event-list（イベント一覧）
-------------------------------------------------------*/

.event-list {
	display: grid;
	grid-row: span 5;
	grid-template-rows: subgrid;
	gap: 0.5rem;
	/* サブグリッドでrow-gap指定の不具合あるため */
	margin-bottom: 2rem;
}

.event-list--4row {
	grid-row: span 4;
}

.event-list:hover {
	opacity: 0.7;
}

.event-list__title {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-weight: 600;
}

.event-list__photo {
	order: -2;
	border: solid 1px var(--c_ltgray);
}

.event-list__spot {
	order: -1;
	padding: 2px;
	background-color: var(--c_main);
	color: var(--c_white);
	font-size: 0.875rem;
	text-align: center;
}

.event-list__date {
	font-size: 0.875rem;
}

.event-list__label {}


/* facility-list（管理施設一覧）
-------------------------------------------------------*/

.facility-list {
	position: relative;
}

.facility-list__text {
	position: absolute;
	left: 0;
	top: 0;
	padding: 1rem;
	width: 100%;
	height: 20%;
	background-image: linear-gradient(180deg, var(--c_dkblue), var(--c_transparent));
	color: var(--c_white);
	font-weight: 600;
	font-size: 1.125rem;
	text-shadow: 1px 1px 2px var(--c_main), 0 0 0.5rem var(--c_dkblue);
	line-height: 1.2;
}

@media (min-width: 576px) {
	.facility-list__text {
		height: 35%;
	}
}

@media (min-width: 992px) {
	.facility-list__text {
		height: 30%;
	}
}

/* links（リンク集）
-------------------------------------------------------*/

.links {
	padding: 4rem 15px;
	background-color: var(--c_ltgray);
	text-align: center;
}

.links__list {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	max-width: var(--width);
	margin: 0 auto 1rem auto;
}

.links__list:last-of-type {
	margin-bottom: 0;
}

@media (min-width: 768px) {
	.links__list {
		font-size: 1.125rem;
	}
}

@media (min-width: 992px) {
	.links__list {
		flex-wrap: nowrap;
	}
}

/* リンクアイテム */

.links__item {
	background-color: var(--c_white);
}

.links--1col .links__item {
	width: 100%;
}

.links--2col .links__item {
	/* 2列用 gap半分を引算 */
	width: calc(50% - 0.5rem);
}

.links--external .links__item:only-of-type {
	/* 外部リンクが1つのみのとき */
	/* バナー2個分 + gap */
	max-width: 592px;
	margin: 0 auto;
}

/* リンク部分 */

.links--internal .links__link {
	background-image: linear-gradient(150deg, rgb(var(--c_accent-rbg) / 0.5) 0%, rgb(var(--c_accent-rbg) / 0.2) 15%, var(--c_white) 35%);
}

.links__link {
	display: block;
	padding: 1.5em 0;
	border: solid 1px var(--c_accent);
	font-weight: 500;
	text-decoration: none;
	position: relative;
}

.links__link--2row {
	padding: 1em 0;
	line-height: 1.35;
}

@media (min-width: 768px) {
	.links__link--2row {
		/* 1行に戻す */
		padding: 1.5em 0;
		line-height: 1.7;
	}

	.links__link--2row br {
		display: none;
	}
}

.links--internal .links__link::before {
	content: "";
	position: absolute;
	bottom: 5px;
	right: 5px;
	width: 0;
	height: 0;
	border-style: solid;
	border-color: var(--c_transparent) var(--c_transparent) var(--c_accent) var(--c_transparent);
	border-width: 0 0 0.75em 0.75em;
}

.links--external .links__link::before {
	/* arrow-up-right-from-square */
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
	content: "\f08e";
	position: absolute;
	bottom: 5px;
	right: 5px;
	color: var(--c_accent);
}

/* footer（共通フッター）
-------------------------------------------------------*/

.footer {
	color: var(--c_white);
	text-align: center;
}

.footer__copyright {
	margin-top: 2rem;
	font-size: 0.875rem;
}

.address--facility+.footer__copyright {
	margin-top: 0;
}

/* footergroup（フッターグループ）
-------------------------------------------------------*/

.footergroup {
	padding: 4rem 15px;
}

.footer .footergroup:nth-of-type(2) {
	padding: 2rem 15px;
}

.footergroup--global {
	background-color: var(--c_main);
}

.footergroup--facility {
	background-color: var(--c_dkgray);
}

.footergroup__inner {
	max-width: var(--width);
	margin: 0 auto;
}

/* address（連絡先）
-------------------------------------------------------*/

.address__logo {
	display: inline-block;
	width: 85%;
	max-width: 330px;
	margin-bottom: 2rem;
	padding: 0 0.5rem 0.75rem 0.5rem;
	border-bottom: solid 2px var(--c_white);
}

.address__title {
	font-weight: 500;
	font-size: 1.375rem;
}

.address__text {
	margin-bottom: 1rem;
}

.address__link {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.address__info {
	margin-bottom: 0.5rem;
}

.address__info:last-of-type {
	margin-bottom: 0;
}

.address__contact {
	display: inline-block;
	width: 85%;
	max-width: 240px;
}

.address--facility .address__logo {
	max-width: 280px;
	margin-bottom: 0;
	border: none;
}

@media (min-width: 768px) {
	.address__logo {
		max-width: 420px;
	}

	.address__title {
		font-size: 1.75rem;
	}
}

/* pagetop（ページトップボタン）
-------------------------------------------------------*/

.pagetop {
	display: none;
	position: fixed;
	right: 10px;
	bottom: 15px;
	z-index: 100;
	padding: 7px 12px;
	border: solid 1px var(--c_link);
	border-radius: 50%;
	background-color: var(--c_white);
	color: var(--c_link);
	font-size: 24px;
	text-align: center;
}

/*-------------------------------------------------------
// Page Layout（ページレイアウト）
// ウェブページという意味ではない
		page-title（ページ見出し）
		page-body（ページ本文）
		page-nav（ページナビ）
		article-list（記事リスト）
-------------------------------------------------------*/

/* 画像表示調整用 */

.event-list__photo img,
.article-list__photo img {
	aspect-ratio: 1/1.414;
	object-fit: cover;
}

/* page-title（ページ見出し）
-------------------------------------------------------*/

.page-title {
	margin-bottom: 2rem;
	text-align: center;
}

.page-title__main {
	display: inline-block;
	padding-bottom: 0.3em;
	border-bottom: solid 3px var(--c_main);
	line-height: 1.3;
	font-size: 1.875rem;
	font-weight: 600;
}

.page-title__sub {
	font-family: "Oswald", sans-serif;
	font-size: 1.25rem;
	font-weight: 300;
}

.page-title__lead {
	margin-top: 1rem;
}

@media (min-width: 768px) {
	.page-title {
		margin-bottom: 4rem;
	}

	.page-title__main {
		border-bottom-width: 5px;
		font-size: 2.25rem;
	}

	.page-title__sub {
		font-size: 1.5rem;
	}
}

/* page-body（ページ本文）
-------------------------------------------------------*/

.page-body {
	margin-bottom: 1rem;
}

.page-body--error {
	/* 404エラーページ用 */
	margin-top: 3rem;
}

@media (min-width: 768px) {
	.page-body {
		margin-bottom: 2rem;
	}
}


/* page-nav（ページナビ）
-------------------------------------------------------*/

.page-nav {
	margin-top: 1rem;
	text-align: center;
}

/* article-list（記事リスト）
-------------------------------------------------------*/

.article-list {
	display: grid;
	gap: 1rem 2rem;
	margin-bottom: 5rem;
}

.article-list--okanoyama {
	margin-bottom: 5rem;
}

.article-list__photo {
	order: -1;
	max-width: 360px;
	margin: 0 auto 1rem auto;
}

.article-list__title {
	margin-bottom: 0.5rem;
	line-height: 1.25;
	font-weight: 600;
	font-size: 1.5rem;
}

.article-list__date {
	border-bottom: solid 1px var(--c_solidline);
	padding-bottom: 1rem;
	font-weight: 600;
	font-size: 1.125rem;
}

.article-list__leadtext {
	line-height: 1.8;
	margin-bottom: 2rem;
	/* 行数による省略表示 */
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 7;
	line-clamp: 7;
}

.article-list__more {
	margin-left: auto;
}

@media (min-width: 768px) {
	.article-list {
		grid-template-columns: max-content auto;
		grid-template-rows: max-content max-content max-content 1fr;
	}

	.article-list__photo {
		grid-column: 1;
		grid-row: 1/-1;
		min-width: 300px;
	}

	.article-list__title {
		grid-column: 2;
		grid-row: 1;
	}

	.article-list__date {
		grid-column: 2;
		grid-row: 2;
	}

	.article-list__leadtext {
		grid-column: 2;
		grid-row: 3;
	}

	.article-list__more {
		grid-column: 2;
		grid-row: 4;
	}
}

/*-------------------------------------------------------
// Article Layout（記事レイアウト）
		article（記事）
		article-title（記事見出し）
		article-photo（記事画像）
		article-text（記事文章）
		article-detail（記事詳細）
-------------------------------------------------------*/

/* 記事入力用 */

.article-list__leadtext p,
.article-text p,
.article-text hr {
	margin-bottom: 1.7rem;
}

.article-list__leadtext ul,
.article-text ul {
	margin: 1.7rem 0;
	padding-left: 1.5rem;
	list-style-type: disc;
}

.article-text hr {
	height: 0;
	border: none;
	border-top: solid 1px var(--c_mdgray);
}

/* 画像枠 */

.event__photo img,
.article-list__photo img,
.article-photo img,
.article-text img {
	border: solid 1px var(--c_solidline);
}

/* YouTube 埋め込み用 */

iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"] {
	display: block;
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 500px;
	height: auto;
	margin: 0 auto 3rem auto;
}

@media (min-width: 768px) {

	iframe[src*="youtube.com"],
	iframe[src*="youtube-nocookie.com"] {
		max-width: 560px;
	}
}

/* article（記事）
-------------------------------------------------------*/

.article {
	margin-bottom: 3rem;
}

@media (min-width: 768px) {
	.article {
		margin-bottom: 5rem;
	}
}

/* article-title（記事見出し）
企画展などの h2用
-------------------------------------------------------*/

.article-title {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 2rem;
}

.article-title * {
	font-weight: 600;
}

.article-title__main {
	line-height: 1.25;
	font-size: 1.5rem;
}

.article-title__date {
	font-size: 1.125rem;
}

.article-title__cat {
	order: -1;
}

@media (min-width: 768px) {
	.article-title {
		margin-bottom: 4rem;
	}

	.article-title__main {
		font-size: 2rem;
	}

	.article-title__date {
		font-size: 1.5rem;
	}

	.article-title__cat {
		font-size: 1.25rem;
	}
}

/* article-photo（記事画像）
-------------------------------------------------------*/

.article-photo {
	max-width: 500px;
	margin: 0 auto 3rem auto;
}

.article-photo__img {}

.article-photo__pdf {
	margin-top: 1rem;
}

@media (min-width: 768px) {
	.article-photo {
		max-width: 560px;
	}
}

/* article-text（記事文章）
-------------------------------------------------------*/

.article-text {
	line-height: 1.8;
	margin-bottom: 3rem;
}

/* 説明文（下）に画像を入れた場合のサイズ調整 */

.article-text img {
	max-width: 450px;
}

@media (min-width: 768px) {
	.article-text img {
		max-width: 500px;
	}
}

/* article-detail（記事詳細）
-------------------------------------------------------*/

.article-detail {
	display: grid;
	margin-bottom: 5rem;
	border-bottom: solid 1px var(--c_mdgray);
}

.article-detail__item {
	padding: 1.125rem 0.25rem 1rem 0.25rem;
	border-top: solid 1px var(--c_mdgray);
	font-weight: 700;
}

.article-detail__text {
	padding: 0 0.25rem 1.125rem 0.25rem;
}

@media (min-width: 768px) {
	.article-detail {
		grid-template-columns: max-content auto;
	}

	.article-detail__item {
		padding: 1.5rem 2rem 1.5rem 1rem;
	}

	.article-detail__text {
		padding: 1.5rem 1rem;
		border-top: solid 1px var(--c_mdgray);
	}
}

/*-------------------------------------------------------
// Compornent（汎用）
		heading（本文見出し）
		btn（ボタン）
		banner（バナー）
		pagination（ページ送り）
		icon（アイコン）
		download（ダウンロード）
		card（カード）
		label（ラベル）
		whitelogo（黒を白に変更）
		text-uppercase（大文字表示）
		text-nowrap（折り返しなし）
		text-balance（バランスのよいところで折り返し）
		text-autophrase（自動改行）
		text-big（大きめテキスト）
		text-small（小さめテキスト）
		text-xsmall（さらに小さめテキスト）
		text-eyecatch（目立つテキスト）
		right（右寄せ）
		center（中央寄せ）
		margin（余白）
-------------------------------------------------------*/

/* heading（本文見出し）
-------------------------------------------------------*/

[class^="heading-lv"] {
	margin-bottom: 1.5em;
	padding: 0.3em 0;
	font-weight: 600;
}

/* h2見出し */

.heading-lv2 {
	border-bottom: solid 2px var(--c_main);
	font-size: 1.5rem;
}

@media (min-width: 768px) {
	.heading-lv2 {
		border-bottom: solid 3px var(--c_main);
		font-size: 1.875rem;
	}
}

/* h3見出し */

.heading-lv3 {
	position: relative;
	border-bottom: solid 2px var(--c_ltgray);
	font-size: 1.25rem;
}

.heading-lv3:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 15%;
	height: 2px;
	background-color: var(--c_accent);
}

.heading-lv3:not(:first-child) {
	margin-top: 1.8em;
}

@media (min-width: 768px) {
	.heading-lv3 {
		border-bottom: solid 3px var(--c_ltgray);
		font-size: 1.5rem;
	}

	.heading-lv3:after {
		bottom: -3px;
		height: 3px;
	}
}

/* btn（ボタン）
-------------------------------------------------------*/

.btn,
.btn--prev,
.btn--none {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 1rem;
	border: solid 1px;
	line-height: 1;
	font-weight: 500;
	text-decoration: none;
}

.btn::after,
.btn--prev::before {
	content: "";
	width: 10px;
	height: 10px;
	border-top: solid 2px;
	border-right: solid 2px;
}

.btn::after {
	transform: translateY(2px) rotate(45deg);
	margin-left: 0.5rem;
}

.btn--prev::before {
	transform: translateY(2px) rotate(-135deg);
	margin-right: 0.5rem;
}

.btn--more {
	width: 10rem;
}

.btn--nav {
	width: 70%;
	max-width: 600px;
	margin: 0 auto;
}

.btn--pdf {
	width: 150px;
	margin-left: auto;
	padding: 0.5rem 1rem;
}

/* banner（バナー）
-------------------------------------------------------*/

.banner {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 1.5em 0.5rem;
	border: solid 1px;
	font-weight: 600;
	text-decoration: none;
}

.banner--okanoyama {
	border: solid 3px var(--c_dkgray);
	background: linear-gradient(135deg, #fff 25%, var(--c_ltgray) 25%, var(--c_ltgray) 75%, #fff 75%);
}

.banner--apikahall {
	border: solid 3px #db3888cc;
	background: linear-gradient(135deg, #fff 25%, #ffefff 25%, #ffefff 75%, #fff 75%);
}

.banner--tenjinike {
	border: solid 3px #1271cc;
	background: linear-gradient(135deg, #fff 25%, #e2f5ff 25%, #e2f5ff 75%, #fff 75%);
}

.banner--tenjinike2 {
	border: solid 3px #1271cc;
	background: linear-gradient(135deg, #fff 25%, #ff8 25%, #ff8 75%, #fff 75%);
}

.banner--seinennoie {
	border: solid 3px #158760de;
	background: linear-gradient(135deg, #fff 25%, #d0ffe0 25%, #d0ffe0 75%, #fff 75%);
}

@media (min-width: 768px) {
	.banner {
		padding: 2em 0.5rem;
		font-size: 1.125rem;
	}
}

/* pagination（ページ送り）
-------------------------------------------------------*/

.pagination {
	display: flex;
	justify-content: center;
	gap: 1rem;
}

.pagination p {
	width: 40%;
	max-width: 300px;
}

/* icon（アイコン）
-------------------------------------------------------*/

.icon::before {
	padding-right: 0.5rem;
	font-family: "Font Awesome 7 Free";
	font-weight: 900;
}

.icon--googlemaps::before {
	/* location-dot */
	content: "\f3c5";
}

.icon--mail::before {
	/* envelope */
	content: "\f0e0";
}

.icon--download {
	display: block;
	text-decoration: none;
}

.icon--download::before {
	/* download */
	content: "\f019";
}

/* download（ダウンロード）
-------------------------------------------------------*/

.download {
	padding: 0.5em 0.5em 0.5em 2em;
	text-indent: -1.5em;
	border: solid 1px;
	max-width: 500px;
	line-height: 1.3;
}

/* card（カード）
-------------------------------------------------------*/

.card {
	/* for subgrid */
	display: contents;
	text-decoration: none;
}

/* label（ラベル）
-------------------------------------------------------*/

.label {
	display: inline-block;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	color: var(--c_white);
	font-size: 0.875rem;
}

.label--on {
	background-color: var(--c_accent);
}

.label--off {
	background-color: var(--c_mdgray);
}

/* whitelogo（黒を白に変更）
-------------------------------------------------------*/
.whitelogo {
	/* 白に変更 */
	filter: brightness(0) invert(1);
}

/* text-uppercase（大文字表示）
-------------------------------------------------------*/

.text-uppercase {
	text-transform: uppercase;
}

/* text-nowrap（折り返しなし）
-------------------------------------------------------*/

.text-nowrap {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

/* text-balance（バランスのいいところで折り返し）
-------------------------------------------------------*/

.text-balance {
	text-wrap: balance;
}

/* text-autophrase（自動改行）
Safari Firefox 未対応
カタカナが続く場合は半角スペースを入れる
-------------------------------------------------------*/

.text-autophrase {
	text-wrap: balance;
	word-break: auto-phrase;
}

/* text-big（大きめテキスト）
-------------------------------------------------------*/

.text-big {
	font-size: 110%;
}

/* text-small（小さめテキスト）
-------------------------------------------------------*/

.text-small {
	font-size: 85%;
}

/* text-xsmall（さらに小さめテキスト）
-------------------------------------------------------*/

.text-xsmall {
	font-size: 65%;
}

/* text-eyecatch（目立つテキスト）
-------------------------------------------------------*/

.text-eyecatch {
	color: var(--c_eyecatch);
}

/* right（右寄せ）
-------------------------------------------------------*/

.right {
	text-align: right;
}

/* center（中央寄せ）
-------------------------------------------------------*/

.center {
	text-align: center;
}

/* margin（余白）
-------------------------------------------------------*/

.margin-3btm {
	margin-bottom: 3rem;
}

/*-------------------------------------------------------
// Compornent（独自）
		news（お知らせ）
		event（各施設トップページ用）
		seinennoie（青年の家トップページ専用）
		// 以下はフォルダパス名で設定
		sports（スポーツ事業）
		about（財団について）
		recruit（採用情報）
		contact（お問い合わせ）
		information（施設案内）
		guide（ご利用案内）
		access（アクセス）
		artgoods（アートグッズ）
		lesson（音楽教室）
		bonantagon（ボナンタゴン）
		calendar（予約状況カレンダー）
		areaguide（周辺施設案内）
		swimming（水泳教室）
-------------------------------------------------------*/

/* ウェブページ入力用 */

.sports p,
.about p,
.recruit p,
.contact p,
.information p,
.guide p,
.access p,
.artgoods p,
.lesson p,
.bonantagon p,
.calendar p,
.areaguide p,
.swimming p {
	margin-bottom: 1.7rem;
}

.sports ul,
.about ul,
.recruit ul,
.contact ul,
.information ul,
.guide ul,
.access ul,
.artgoods ul,
.lesson ul,
.calendar ul,
.swimming ul {
	/* bonantagon はなし */
	/* areaguide はなし */
	/* デフォルトに戻す */
	margin: 1.7rem 0;
	padding-left: 1.5rem;
	list-style-type: disc;
}

/* news（お知らせ）
-------------------------------------------------------*/

.news {
	max-width: 800px;
	padding: 1rem 0.5rem;
	border-top: solid 2px var(--c_solidline);
	border-bottom: solid 2px var(--c_solidline);
	line-height: 1.75;
}

/* かんたんデザイン編集用 */

.news p {
	margin-bottom: 1rem;
}

.news ul {
	/* デフォルトに戻す */
	margin: 1em 0;
	list-style-type: disc;
}

.news ul,
.news ol {
	padding-left: 1.5rem;
}

/* event（各施設トップページ用）
-------------------------------------------------------*/

.event__link {
	text-decoration: none;
}

.event {
	display: grid;
	gap: 1rem;
	margin-bottom: 5rem;
	padding: 1rem;
	background-color: var(--c_ltgray);
}

.event__photo {
	order: -1;
	max-width: 400px;
	margin: 0 auto;
}

.event__photo--small {
	max-width: 300px;
}

.event__titlegroup {
	padding: 1rem;
	width: 100%;
	border-radius: 0.25rem;
	background: var(--c_white);
}

.event__title {
	margin-bottom: 0.5rem;
	line-height: 1.25;
	font-weight: 600;
	font-size: 1.5rem;
	text-align: center;
}

.event__date {
	font-weight: 600;
	font-size: 1.125rem;
	text-align: center;
}

.event__none {
	margin: 0 auto;
	padding: 2rem 0;
	max-width: 400px;
	border-top: solid 2px;
	border-bottom: solid 2px;
	text-align: center;
}

.event__none--okanoyama {
	margin-bottom: 5rem;
}

@media (min-width: 768px) {
	.event {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr;
		place-items: center;
		padding: 1rem 4rem;
	}

	.event__photo {
		grid-column: 1;
		grid-row: 1/-1;
		min-width: 300px;
	}

	.event__photo--small {
		min-width: 225px;
	}

	.event hgroup {
		grid-column: 2;
		grid-row: 1;
	}
}

/* seinennoie（青年の家トップページ専用）
-------------------------------------------------------*/

.seinennoie {
	margin-bottom: 3rem;
}

.seinennoie+p {
	margin: 0 auto;
	max-width: 600px;
}

.seinennoie li {
	position: relative;
	max-width: 500px;
	line-height: 1.5;
	text-align: center;
}

.seinennoie img {
	border-radius: 50%;
}

.seinennoie p:last-of-type {
	position: absolute;
	right: 50%;
	bottom: 50%;
	transform: translate(50%, 50%);
	width: 100%;
	padding: 1.5rem 0;
	background-color: #158760f2;
	color: var(--c_white);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
}

.seinennoie p:last-of-type span {
	display: inline-block;
	margin-bottom: 5px;
	padding: 0 3px;
	background-color: #ff5;
	color: var(--c_maintext);
	font-size: 1.125rem;
}

.seinennoie li:first-of-type span {
	background-color: #fcf;
}

.seinennoie li:last-of-type span {
	background-color: #aff;
}

@media (min-width: 768px) {
	.seinennoie li {
		max-width: 600px;
	}

	.seinennoie p:last-of-type {
		font-size: 1.125rem;
	}

	.seinennoie p:last-of-type span {
		font-size: 1.25rem;
	}
}

/* sports（スポーツ事業）
-------------------------------------------------------*/

/* about（財団について）
-------------------------------------------------------*/

.about__info {
	margin-top: 3rem;
}

.about__chart img {
	max-width: 700px;
}

.about__detail dt,
.about__detail dd {
	padding: 0.625rem;
}

.about__detail dt {
	border-left: solid 3px var(--c_eyecatch);
	background-color: var(--c_plgray);
	font-weight: bold;
}

/* recruit（採用情報）
-------------------------------------------------------*/

.recruit__list {}

/* contact（お問い合わせ）
-------------------------------------------------------*/

.contact__list {
	margin-bottom: 2rem;
}

.contact__list p {
	padding-left: 5px;
	border-left: solid 5px var(--c_accent);
	font-weight: bold;
	font-size: 1.125rem;
}

.contact__list dl {
	display: flex;
	flex-wrap: wrap;
	border-top: solid 1px var(--c_mdgray);
	border-bottom: solid 1px var(--c_mdgray);
	width: 100%;
}

.contact__list dt,
.contact__list dd {
	display: flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	border-bottom: solid 1px var(--c_solidline);
}

.contact__list dt:not(:last-child),
.contact__list dd:not(:last-child) {
	border-bottom: solid 1px var(--c_solidline);
}

.contact__list dt {
	justify-content: center;
	width: 20%;
	background-color: var(--c_plgray);
	text-wrap: nowrap;
}

.contact__list dd {
	width: 80%;
	overflow-wrap: anywhere;
}

/* information（施設案内）
-------------------------------------------------------*/

.information__overviewphoto {
	margin: 2rem auto;
	max-width: 700px;
}

.information__overviewphoto figcaption {
	margin-top: 0.5rem;
}

.information__facephoto img {
	width: 80%;
	max-width: 200px;
	text-align: right;
}

.information__photolist dl {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.information__photolist dl dd:first-of-type {
	order: -1;
}

.information__photolist dt {
	padding-left: 0.5rem;
	border-left: solid 0.25rem var(--c_accent);
	font-size: 1.125rem;
	font-weight: bold;
}

.information__guidemap,
.information__seatingchart {
	text-align: center;
}

.information__guidemap {
	margin: 0 auto;
	max-width: 700px;
}

.information__guidemap img {
	max-width: 100%;
	max-height: 800px;
	width: auto;
	height: auto;
}

.information__guidemap iframe {
	width: 100%;
	max-width: 700px;
	border: solid 1px var(--c_solidline);
}

.information__seatingchart img {
	max-width: 500px;
}

/* guide（ご利用案内）
-------------------------------------------------------*/

.guide__table {
	width: 100%;
	max-width: 540px;
	margin-bottom: 1rem;
	border-top: solid 1px var(--c_dkgray);
	border-right: solid 1px var(--c_dkgray);
	border-left: solid 1px var(--c_dkgray);
}

.guide__table caption {
	padding: 0.5rem 0.75rem;
	background-color: var(--c_dkgray);
	color: var(--c_white);
	font-weight: bold;
	text-align: left;
}

.guide__table th,
.guide__table td {
	padding: 0.5rem 0.75rem;
	border-bottom: solid 1px var(--c_dkgray);
	text-align: left;
}

.guide__table th {
	background-color: var(--c_plgray);
	font-weight: normal;
}

.guide__table tr td:only-of-type {
	text-align: right;
}

.guide__pricelist th~th,
.guide__pricelist td~td {
	white-space: nowrap;
	text-align: right;
}

.guide__pricelist th {
	font-weight: bold;
}

.guide__pricelist td:first-of-type {
	text-wrap: balance;
}

.guide__photolist {
	row-gap: 2rem;
	max-width: 400px;
}

.guide__photolist dt {
	padding: 0.5rem 0;
	font-weight: 600;
}

@media (min-width: 576px) {
	.guide__photolist {
		max-width: 800px;
	}
}

/* access（アクセス）
-------------------------------------------------------*/

.access__map {
	margin-bottom: 1rem;
	width: 100%;
	border: solid 1px var(--c_solidline);
}

/* artgoods（アートグッズ）
-------------------------------------------------------*/

.artgoods__cataloglist dl {
	display: grid;
	gap: 1rem 1rem;
	margin-bottom: 2.5rem;
}

.artgoods__cataloglist dt {
	font-weight: bold;
}

.artgoods__cataloglist img {
	max-width: 250px;
	border: solid 1px var(--c_mdgray);
}

.artgoods__cataloglist dl dd:first-of-type {
	order: -1;
	padding: 0.5rem 1rem;
	background-color: var(--c_ltgray);
	text-align: center;
}

.artgoods__order {
	padding: 1.5rem;
	max-width: 700px;
	border: solid 1px var(--c_mdgray);
	background-color: var(--c_plgray);
}

.artgoods ul {
	/* デフォルトから変更 */
	padding-left: 2.5rem;
	margin-bottom: 2rem;
}

.artgoods__contact dt {
	margin-bottom: 0.5rem;
	font-size: 1.125rem;
	font-weight: bold;
}

.artgoods__table {
	width: 100%;
	max-width: 700px;
	margin-bottom: 1rem;
	border-bottom: solid 1px var(--c_dkgray);
}

.artgoods__table caption {
	padding: 0.5rem 0;
	font-weight: bold;
	text-align: left;
}

.artgoods__table th,
.artgoods__table td {
	padding: 0.5rem;
	border-top: solid 1px var(--c_dkgray);
	border-right: solid 1px var(--c_dkgray);
	border-left: solid 1px var(--c_dkgray);
}

.artgoods__table th {
	background-color: var(--c_plgray);
	width: 6em;
	font-weight: normal;
	text-align: center;
}

@media (min-width: 576px) {
	.artgoods__cataloglist dl {
		grid-template-columns: 40% calc(60% - 2rem);
		grid-template-rows: max-content 1fr;
		gap: 1.5rem 2rem;
		margin-bottom: 2rem;
	}

	.artgoods__cataloglist dl dd:first-of-type {
		grid-column: 1;
		grid-row: 1 / -1;
	}

	.artgoods__cataloglist dt {
		grid-column: 2;
		grid-row: 1;
		padding-top: 0.5rem;
	}

	.artgoods__cataloglist dl dd:nth-of-type(2) {
		grid-column: 2;
		grid-row: 2;
	}
}

/* lesson（音楽教室）
-------------------------------------------------------*/

.lesson__info {
	max-width: 700px;
	margin-right: auto;
	margin-left: auto;
	border: solid 2px #488f2d;
}

.lesson__info h2 {
	padding: 0.25rem;
	font-weight: 500;
	font-size: 1.25rem;
	text-align: center;
	background-color: #488f2d;
	color: #fff;
}

.lesson__info div {
	padding: 1rem;
}

/* bonantagon（ボナンタゴン）
-------------------------------------------------------*/

.bonantagon__list li:first-of-type a {
	font-weight: bold;
}

/* calendar（予約状況カレンダー）
-------------------------------------------------------*/

.calendar__monthly {
	margin-top: 3rem;
	text-align: center;
}

.calendar__monthly iframe {
	width: 100%;
	max-width: 800px;
	border: solid 3px #158760de;
}

/* areaguide（周辺施設案内）
-------------------------------------------------------*/

.areaguide__photolist {
	text-align: right;
}

.areaguide__photolist span::before {
	padding-right: 0.5rem;
	vertical-align: middle;
	content: "●";
	color: var(--c_accent);
	font-size: 0.5rem;
}

.areaguide__linklist {
	margin-bottom: 1.5rem;
	padding: 1rem;
	line-height: 2;
	width: 100%;
	background-color: var(--c_accent-lt);
}

/* swimming（水泳教室）
-------------------------------------------------------*/

.swimming__table {
	width: 100%;
	max-width: 540px;
	margin-bottom: 1rem;
	border-top: solid 1px var(--c_dkgray);
	border-right: solid 1px var(--c_dkgray);
	border-left: solid 1px var(--c_dkgray);
}

.swimming__table th,
.swimming__table td {
	padding: 0.5rem 0.75rem;
	border-bottom: solid 1px var(--c_dkgray);
}

.swimming__table th {
	background-color: var(--c_accent-lt);
	width: 4rem;
	font-weight: normal;
}

/*-------------------------------------------------------
// Compornent（サムホール大賞展受賞作品のみ）
		winner（受賞作品）
-------------------------------------------------------*/

/* winner（受賞作品）
-------------------------------------------------------*/

.winner hgroup,
.winner h2 {
	text-align: center;
}

.winner h2 {
	font-weight: 600;
	font-size: 1.5rem;
}

.winner div {
	margin-top: 1rem;
	padding: 1rem;
	border: solid 1px var(--c_ltgray);
	background-color: var(--c_plgray);
	text-align: center;
}

.winner ul {
	/* li-flex を上書き */
	justify-content: space-evenly;
	gap: 1.5rem 1rem;
}

.winner li p {
	margin-bottom: 1rem;
}

@media (min-width: 768px) {
	.winner h2 {
		font-size: 1.875rem;
	}
}

/* 共通 */

.winner__1col img,
.winner__pc2col li img,
.winner__pc3col li img {
	max-width: 100%;
	width: auto;
	height: auto;
}

/* 1列（大賞用） */

.winner__1col p {
	margin: 0 auto 1rem auto;
	max-width: 600px
}

.winner__1col img {
	max-height: 600px;
}

/* 2列（準大賞用） */

.winner__pc2col li {
	max-width: 450px;
}

.winner__pc2col li img {
	max-height: 450px;
}

/* 3列 */

.winner__pc3col li {
	max-width: 350px;
}

.winner__pc3col li img {
	max-height: 350px;
}

/*-------------------------------------------------------
// 印刷用
-------------------------------------------------------*/

@media print {

	.header,
	.pagetop {
		display: none;
	}
}