@charset "UTF-8";

/*//////////////////////////////////////////////////////////////////////////////

	目次

	設定           変数・WEBフォントなど、値の置き場
	ベース         素の HTML 要素に対する既定スタイル
	レイアウト     ページの骨格（ヘッダー／ナビ／フッター／段組み）
	コンポーネント 複数ページで使い回す部品
	ユーティリティ 単機能の微調整クラス

	ページ別       特定ページだけのスタイル
		トップページ
		利用案内
		イベント
		プラネタリウム
		キッズ工房
		クラブ・講座

	各ルール内のプロパティは以下の順で記述する
	  表示・レイアウト → ボックス・背景 → テキスト → 装飾 → アニメーション・変形

//////////////////////////////////////////////////////////////////////////////*/

/*//////////////////////////////////////////////////////////////////////////////

	設定

//////////////////////////////////////////////////////////////////////////////*/

/*=============================================================================
	カラー
==============================================================================*/

* {
	--main-color: #f79e18;
	--tint: #f7f5f2;
}

/*=============================================================================
	WEBフォント（源柔ゴシック）
==============================================================================*/

/* 標準 */
@font-face {
	font-family: "GenJyuuGothic";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/GenJyuuGothic/GenJyuuGothic-Normal.ttf");
}

/* 中太字（強調など） */
@font-face {
	font-family: "GenJyuuGothic";
	font-style: bold;
	font-weight: 600;
	src: url("../fonts/GenJyuuGothic/GenJyuuGothic-Medium.ttf");
}

/* 太字（見出し） */
@font-face {
	font-family: "GenJyuuGothic";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/GenJyuuGothic/GenJyuuGothic-Bold.ttf");
}

/* 極太字（大見出し） */
@font-face {
	font-family: "GenJyuuGothic";
	font-style: normal;
	font-weight: 900;
	src: url("../fonts/GenJyuuGothic/GenJyuuGothic-Heavy.ttf");
}

/*=============================================================================
	アイコン（Google Fonts / Material Symbols）
==============================================================================*/

.material-symbols-outlined {
	display: inline-block;
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	font-size: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/*//////////////////////////////////////////////////////////////////////////////

	ベース

//////////////////////////////////////////////////////////////////////////////*/

/*=============================================================================
	文字サイズの基準
==============================================================================*/

/* スマホ */
html { font-size: 2.2vw; }

/* タブレット */
@media screen and (min-width:768px) { html { font-size: 1.0vw; } }

/* PC */
@media screen and (min-width:1024px) { html { font-size: 60%; } }

/*=============================================================================
	body
==============================================================================*/

body {
	position: relative;
	background-color: #ffffff;
	font-family: "GenJyuuGothic",'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	font-weight: 400;
	font-size: 1.8rem;
	color: #333333;
}

/*=============================================================================
	画像
==============================================================================*/

img {
	display: inline-block;
	max-width: 100%;
	max-height: 100%;

	/* 右クリック（長押し）での保存を抑止 */
	pointer-events: none;
}

/*=============================================================================
	見出し
==============================================================================*/

h1,h2,h3,h4,h5,h6 {
	font-weight: 700;
}
h1 { font-size: 3.0rem; }
h2 { font-size: 2.8rem; }
h3 {
	margin-bottom: 1.0em;
	padding-bottom: 0.3em;
	font-size: 3.0rem;
	text-align: center;
}
h4 {
	margin: 1em 0 0.8em;
	font-size: 2.4rem;
}
h5 {
	margin: 1em 0;
	font-size: 2.2rem;
}
h6 {
	margin: 1em 0 0.4em;
	font-size: 2.0rem;
}
@media screen and (min-width:768px) {
	h1 { font-size: 3.0rem; }
	h2 { font-size: 2.8rem; }
	h3 { font-size: 3.6rem; }
	h4 { font-size: 2.4rem; }
	h5 { font-size: 2.2rem; }
	h6 { font-size: 2.0rem; }
}
@media screen and (min-width:1024px) {
	h1 { font-size: 3.0rem; }
	h2 { font-size: 2.8rem; }
	h3 { font-size: 4.2rem; }
	h4 { font-size: 2.4rem; }
	h5 { font-size: 2.2rem; }
	h6 { font-size: 2.0rem; }
}

/*=============================================================================
	リンク
==============================================================================*/

a:link,a:hover,a:active,a:visited { color: #f48404; }
a { text-decoration: underline;	transition: 0.1s; }
a:hover { text-decoration: none; }

/*=============================================================================
	テキスト
==============================================================================*/

p:last-of-type {
	margin-bottom: 0;
}
li small {
	color: #949494;
}

/* 文字選択時の配色 */
::selection {
	background-color: #fdebd0;
	color: #333333;
}

/*=============================================================================
	表
==============================================================================*/

/* 概要用
------------------------------------------------------------------------------*/

table.desc {
	width: 100%;
	margin: 1em 0;
}
table.desc th,
table.desc td {
	display: block;
}
table.desc th {
	padding: 0.5em 0.5em 0.5em 0.7em;
	background-color: #f4f4f4;
	letter-spacing: 5px;
}
table.desc td {
	padding: 0.6em 0.5em 1em;
	background-color: #ffffff;
}
table.desc td ul {
	padding-left: 1em;
}

/* 詳細
------------------------------------------------------------------------------*/

table.detail {
	width: 100%;
}
table.detail th,
table.detail td {
	padding: 1em;
	border: 1px #dfdfdf solid;
	text-align: center;
	word-break: break-all;
}
table.detail tr:first-child th {
	padding: 0.5em;
	border: 1px var(--main-color) solid;
	background-color: var(--main-color);
	color: #ffffff;
}
table.detail td:first-child {
	background-color: #f4f4f4;
	font-weight: bold;
	text-align: left;
}
table.detail td {
	padding: 1em;
}

/*//////////////////////////////////////////////////////////////////////////////

	レイアウト

//////////////////////////////////////////////////////////////////////////////*/

/*=============================================================================
	セクション
==============================================================================*/

.section, .article {
	width: calc(100% - 3em);
	max-width: 1024px;
	margin: 0 auto 3em;
}

/*=============================================================================
	カラム
==============================================================================*/

/* 2カラム
------------------------------------------------------------------------------*/

.column-2 div {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
}
@media screen and (min-width:1024px) {
	.column-2 {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5em;
	}
	.column-2.ratio-21 { grid-template-columns: 2fr 1fr; }
	.column-2.ratio-12 { grid-template-columns: 1fr 2fr; }
}

/* 3カラム
------------------------------------------------------------------------------*/

.column-3 div {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
}
@media screen and (min-width:1024px) {
	.column-3 {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.5em;
	}
}

/*=============================================================================
	ヘッダー
==============================================================================*/

/* ベースレイアウト
------------------------------------------------------------------------------*/

.header-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header-wrap .left {
	align-self: stretch;
}
.header-wrap .for-PC {
	display: none;
}
.header-wrap .for-Mobile {
	width: 3em;
	padding: 0.25em 0.8em;
}
@media screen and (min-width:1024px) {
	.header-wrap {
		align-items: flex-start;
	}
	.header-wrap .for-Mobile {
		display: none;
	}
	.header-wrap .for-PC {
		display: block;
	}
}

.header-wrap #site-title {
	display: flex;
	align-items: center;
	width: 5em;
	height: 100%;
	padding: 0.25em 0.5em;
}
.header-wrap #site-title a {
	display: flex;
	align-items: center;
	width: 100%;
}
@media screen and (min-width:1024px) {
	.header-wrap #site-title {
		width: 7.5em;
		padding: 0 0.5em 0 1em;
	}
}

@media screen and (min-width:1024px) {
	.header-wrap .for-PC .site-search {
		width: 100%;
		padding: 0;
	}
	.header-wrap .for-PC .site-search input {
		display: inline-block;
		margin: 0 auto;
		border: none;
	}
	.header-wrap .for-PC .site-search input[type="text"] {
		width: 23em;
		height: 2em;
		margin: 0 0.3em 0 0;
		padding: 0 1em;
		background-color: #f4f4f4;
		font-size: 1.6rem;
		border-radius: 1em;
	}
	.header-wrap .for-PC .site-search input[type="submit"] {
		margin: 0;
		padding: 0;
		background-color: transparent;
		font-size: 1.8rem;
		color: var(--main-color);
		text-align: center;
	}
	.header-wrap .for-PC .site-search input[type="text"]:focus,
	.header-wrap .for-PC .site-search input[type="submit"]:focus {
		outline: none;
	}
	.header-wrap .for-PC {
		display: block;
		padding: 0.8em 1.5em 0 0;
		text-align: right;
	}
	.header-wrap .for-PC .top {
		margin-bottom: 0.2em;
	}
	.header-wrap .for-PC .bottom {
		height: 5.0rem;
		line-height: 5.0rem;
	}
}

@media screen and (min-width:1024px) {
	.header-wrap .for-PC .bottom ul {
		display: flex;
		justify-content: flex-end;
		list-style-type: none;
	}
	.header-wrap .for-PC .bottom ul li a {
		text-decoration: none;
		font-weight: 700;
		font-size: 90%;
		color: #333333;
	}
	.header-wrap .for-PC .bottom ul li:not(:last-child)::after {
		margin: 0 0.6em 0 1em;
		font-weight: normal;
		color: #bfbfbf;
		content: "|";
	}
}

header {
	position: relative;
	z-index: 10;
	background-color: #ffffff;
	border-bottom: 1px solid #e3dfd9;
}

.header-wrap .for-Mobile a {
	display: block;
	cursor: pointer;
}

/*=============================================================================
	グローバルナビゲーション（スマホ・タブレット用スライドメニュー）
==============================================================================*/

#nav-area {
	display: none;
	position: relative;
	z-index: 20;
}
#nav {
	position: fixed;
	z-index: 40;
	top: 0;
	right: -80vw;
	width: 80vw;
	height: 100vh;
	overflow: auto;
	background-color: #ffffff;
	box-shadow: 0 0 3px 3px rgba(0,0,0,0.2);
}
#nav-back {
	position: fixed;
	z-index: 30;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.6);
}
#nav-hdr {
	display: flex;
	width: 100%;
}
#nav-hdr #home,
#nav-hdr #close {
	flex: 1;
	padding: 0.4em 0;
	border-bottom: 1px solid var(--rule);
	font-size: 140%;
	color: var(--main-color);
	text-align: center;
	text-decoration: none;
}
#nav-hdr #home {
	border-right: 1px solid var(--rule);
}
#nav-list {
	padding: 0;
	list-style-type: none;
}
#nav-list li {
	font-weight: 400;
	font-size: 90%;
}
#nav-list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
	padding: 1em;
	border-bottom: 1px solid var(--rule);
	background-color: #ffffff;
	color: #333333;
	text-decoration: none;
}
#nav-list li a::after {
	font-family: "Material Symbols Outlined";
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
	content: "chevron_right";
	color: var(--main-color);
}

/* メニュー内 サイト内検索
------------------------------------------------------------------------------*/

.nav-search {
	padding: 0.8em 1em;
	border-bottom: 1px solid var(--rule);
	text-align: center;
}
.nav-search .site-search input {
	display: inline-block;
	margin: 0 auto;
	border: none;
}
.nav-search .site-search input[type="text"] {
	width: calc(100% - 2.4em);
	height: 2em;
	padding: 0 1em;
	background-color: var(--tint);
	font-size: 1.6rem;
	border-radius: 1em;
}
.nav-search .site-search input[type="submit"] {
	width: 1.6em;
	background-color: transparent;
	font-size: 1.8rem;
	color: var(--main-color);
	text-align: center;
}
.nav-search .site-search input[type="text"]:focus,
.nav-search .site-search input[type="submit"]:focus {
	outline: none;
}

/* PC では非表示（PC は header-wrap .for-PC の検索・ナビを使用）
------------------------------------------------------------------------------*/

@media screen and (min-width:1024px) {
	#nav-area {
		display: none !important;
	}
}

/*=============================================================================
	フッター
==============================================================================*/

/* フッターエリア
------------------------------------------------------------------------------*/

#footer {
	background-color: #f6f6f6;
}

/* 住所
------------------------------------------------------------------------------*/

#ftr-top #address {
	padding: 4em 0 1em;
}
#ftr-top #address dl dt,
#ftr-top #address dl dd {
	width: 100%;
	text-align: center;
}
#ftr-top #address dl dt {
	margin-bottom: 2.0em;
}
#ftr-top #address dl dt img {
	width: 10em;
}
#ftr-top #address dl dd {
	margin: 0;
	font-size: 1.4rem;
}
#ftr-top #address dl dd.tel,
#ftr-top #address dl dd.fax {
	font-weight: 700;
}
#ftr-top #address dl dd.tel span {
	margin-left: 0.8rem;
	font-size: 3.4rem;
}
#ftr-top #address dl dd.fax span {
	margin-left: 0.8rem;
	font-size: 2.0rem;
}
@media screen and (min-width:1024px) {
	#ftr-top #address {
		padding-top: 8em;
	}
	#ftr-top #address dl dd.tel span {
		font-size: 4.2rem;
	}
}

/* お問い合わせ
------------------------------------------------------------------------------*/

#contact {
	padding: 0;
}
#contact a {
	display: block;
	position: relative;
	width: 70%;
	max-width: 20em;
	margin: 0 auto;
	padding: 1em;

	background-color: var(--main-color);

	font-weight: bold;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	letter-spacing: 0.2em;

	border-radius: 2em;
}
#contact a::after {
	position: absolute;
	top: 50%;
	right: 0.8em;
	margin-top: -0.7em;
	font-family: "Material Symbols Outlined";
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
	content: "chevron_right";
}
@media screen and (min-width:1024px) {
	#contact {
		padding-bottom: 8em;
	}
	#contact a {
		border: 2px var(--main-color) solid;
		transition: background-color 0.15s,color 0.15s;
	}
	#contact a:hover {
		background-color: #ffffff;
		color: var(--main-color);
	}
}

/* リンク一覧
------------------------------------------------------------------------------*/

#ftr-other {
	padding: 4em 1.5em 2em;
}
#ftr-top #ftr-other ul {
	margin: 0;
	padding: 0;
	font-size: 1.4rem;
	text-align: center;
	list-style-type: none;
}
#ftr-top #ftr-other ul li {
	display: inline;
	margin: 0;
}
#ftr-top #ftr-other ul li::after {
	margin: 0 0.5em 0 1em;
	color: #b4b4b4;
	content: "|";
}
#ftr-top #ftr-other ul li:last-child::after {
	content: none;
}
@media screen and (min-width:1024px) {
	#ftr-other {
		padding: 0 0 2em;
	}
}

/* 下部の背景
------------------------------------------------------------------------------*/

#ftr-bottom {
	padding: 4em 0 5em;
	background-color: transparent;
	background-image: url("../img/common/mv_ov.jpg");
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: auto 20em;
	background-attachment: fixed;
}
@media screen and (min-width:1024px) {
	#ftr-bottom {
		background-size: contain;
	}
}

/* SNS共有ボタン
------------------------------------------------------------------------------*/

#ftr-bottom #sns {
	margin: 0 0 3em;
}
#ftr-bottom #sns ul {
	width: 100%;
	padding: 0;
	text-align: center;
	text-shadow: 1px 1px 8px rgba(0,0,0,0.7);
	list-style-type: none;
}
#ftr-bottom #sns ul li {
	display: inline;
	margin: 0 0.1em;
	font-size: 6.6rem;
}
#ftr-bottom #sns ul li a.twitter,
#ftr-bottom #sns ul li a.facebook,
#ftr-bottom #sns ul li a.line {color: #ffffff; }
@media screen and (min-width:1024px) {
	#ftr-bottom #sns ul li {
		font-size: 4.6rem;
	}
	#ftr-bottom #sns ul li a.twitter,
	#ftr-bottom #sns ul li a.facebook,
	#ftr-bottom #sns ul li a.line { transition: color 0.1s; }
	#ftr-bottom #sns ul li a:hover.twitter {
		color: #00aced;
	}
	#ftr-bottom #sns ul li a:hover.facebook {
		color: #3b5998;
	}
	#ftr-bottom #sns ul li a:hover.line {
		color: #00c300;
	}
}

/* 著作権表示
------------------------------------------------------------------------------*/

#copy {
	display: block;
	width: 100%;

	font-weight: bold;
	font-size: 1.2rem;
	color: #fff;
	text-align: center;
	text-shadow: 1px 1px 8px black;
	letter-spacing: 0.12em;
}

/*//////////////////////////////////////////////////////////////////////////////

	コンポーネント

//////////////////////////////////////////////////////////////////////////////*/

/*=============================================================================
	ページタイトル
==============================================================================*/

#page-title {
	background-color: #fff;
}
#page-title h2 {
	margin: 0 0 0 0.2em;
	padding: 2em 0;

	font-family: "GenJyuuGothic";
	font-weight: 900;
	font-size: 2.8rem;
	line-height: 1.5;
	text-align: center;
	letter-spacing: 0.2em;
}
@media screen and (min-width:1024px) {
	#page-title h2 {
		padding: 2em 0;
		font-size: 4.0rem;
	}
}

/*=============================================================================
	パンくずリスト
==============================================================================*/

#topic-path { margin-bottom: 2em; }
#topic-path ol {
	padding: 1em 0.5em;
	font-size: 70%;
	text-align: right;
	list-style-type: none;
}
#topic-path ol li {
	display: inline;
}
#topic-path ol li::after {
	margin: 0 0.1em 0 0.5em;
	font-family: "Material Symbols Outlined";
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
	font-size: 1.0rem;
	color: #b4b4b4;
	content: "chevron_right";
}
#topic-path ol li:last-child::after {
	content: none;
}
@media screen and (min-width:1024px) {
	#topic-path { margin-bottom: 6em; }
	#topic-path ol {
		padding: 1em 1.5vw;
	}
	#topic-path ol li::after {
		margin: 0 0.6em 0 1em;
	}
}

/*=============================================================================
	警告ボックス
==============================================================================*/

.caution {
	margin: 1em 0;
	padding: 1em;
	background-color: #fdf7f7;
	color: #8d1d1d;
}
.caution h4 {
	margin-top: 0;
	margin-bottom: 0.5em;
	font-size: 1.8rem;
}
.caution h4::before {
	margin-right: 0.3em;
	font-family: "Material Symbols Outlined";
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
	content: "error";
}
.caution p {
	margin: 0;
	padding: 0;
}
.caution ul {
	margin: 0;
	padding: 0 0 0 1.5em;
}

/*=============================================================================
	関連項目
==============================================================================*/

#relation {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	list-style-type: none;
}
#relation li {
	display: block;
	position: relative;
	width: 100%;
	height: 7em;
	margin-bottom: 0.5em;
	box-sizing: border-box;
}
#relation li a {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 1em;

	box-sizing: border-box;
	border: 1px #dfdfdf solid;
	background-color: #f9f9f9;

	font-weight: bold;
	color: #333333;
	text-decoration: none;
}
#relation li a::after {
	display: block;
	position: absolute;
	top: calc(50% - 0.5em);
	right: 0.8em;

	font-family: "Material Symbols Outlined";
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
	line-height: 1;
	color: var(--main-color);
	content: "chevron_right";
}
#relation li a img {
	display: block;
	float: left;
	height: 5em;
	margin-right: 1em;
}
#relation li a span {
	display: block;
	float: left;
	height: 100%;
	line-height: 5em;
}
@media screen and (min-width:768px) {
	#relation {
		display: flex;
		justify-content: center;
		align-items: stretch;
		max-width: 1720px;
	}
	#relation li {
		max-width: 28em;
		margin: 0 0.5em;
	}
	#relation li a {
		transition: all 0.1s ease;
	}
	#relation li a:hover {
		border-color: #aaaaaa;
		color: var(--main-color);
	}
}

/*=============================================================================
	ボタン
==============================================================================*/

/* くわしく見る
------------------------------------------------------------------------------*/

.more {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 5em 0;
	font-size: 80%;
}
.more a {
	display: block;
	position: relative;
	width: 70%;
	max-width: 20em;
	padding: 1em 0;

	background-color: var(--main-color);

	font-weight: bold;
	color: #ffffff;
	text-align: center;
	text-decoration: none;

	border-radius: 3em;
}
.more a::after {
	position: absolute;
	top: 50%;
	right: 0.8em;
	margin-top: -0.7em;
	font-family: "Material Symbols Outlined";
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
	content: "chevron_right";
}
@media screen and (min-width:1024px) {
	.more a {
		border: 2px var(--main-color) solid;
		transition: background-color 0.15s,color 0.15s;
	}
	.more a:hover {
		background-color: #ffffff;
		color: var(--main-color);
	}
}

/* ページ先頭へ
------------------------------------------------------------------------------*/

#page-top {
	position: fixed;
	z-index: 4;
	right: 0.8em;
	bottom: 0.8em;
	width: 3em;
	height: 3em;

	background-color: var(--main-color);

	border-radius: 50%;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1);
	cursor: pointer;
}
#page-top a {
	display: block;
	position: absolute;
	top: 1.5em;
	width: 100%;
	margin-top: -0.8em;
	color: #fff;
	text-align: center;
}
@media screen and (min-width:1024px) {
	#page-top {
		right: 2em;
		bottom: 2em;
	}
}

/*=============================================================================
	もっと読む（開閉）
==============================================================================*/

@media screen and (max-width:1023px) {
	.cp-box *, .cp-box *:before, .cp-box *:after {
		box-sizing: border-box;
	}
	.cp-box {
		position: relative;
	}
	.cp-box label {
		position: absolute;
		z-index: 1;
		bottom: -1em;
		width: 100%;
		height: 10em;

		background: linear-gradient(to bottom, rgba(250, 252, 252, 0) 0%, rgba(255, 255, 255, 1.0) 90%);

		text-align: center;

		cursor: pointer;
	}
	.cp-box input:checked + label {
		background: inherit;
	}
	.cp-box label:after {
		position: absolute;
		z-index: 2;
		bottom: 20px;
		left: 50%;
		width: 16rem;

		background-color: #e9e9e9;

		line-height: 2.5rem;
		color: #555;
		letter-spacing: 0.05em;
		content: 'もっと読む';

		border-radius: 20px;

		transform: translate(-50%, 0);
	}
	.cp-box input {
		display: none;
	}
	.cp-box .cp-container {
		height: 10em;
		overflow: hidden;
		transition: all 0.5s;
	}
	.cp-box input:checked + label {
		display: none ;
	}
	.cp-box input:checked ~ .cp-container {
		height: auto;
		padding-bottom: 0;
		transition: all 0.5s;
	}
}
@media screen and (min-width:1024px) {
	#cp01 {
		display: none;
	}
}

/*=============================================================================
	サイトマップ
==============================================================================*/

#sitemap ul {
	padding-left: 1.5em;
}
#sitemap ul li a {
	display: inline-block;
	margin-bottom: 0.5em;
}
@media screen and (min-width:1024px) {
	#sitemap {
		display: flex;
	}
	#sitemap #left,
	#sitemap #right {
		width: 50%;
	}
}

/*=============================================================================
	お知らせ一覧
==============================================================================*/

.content-page .news-list-row {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}
.content-page .news-list-links {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
}
.content-page .news-list-links .banner-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 1em 1.5em;
	background-color: var(--tint);
	border-radius: 0.4em;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, color 0.15s;
}
.content-page .news-list-links .banner-link:hover {
	background-color: var(--main-color);
	color: #fff;
}
@media screen and (max-width:767px) {
	.content-page .news-list-links .banner-link {
		width: 100%;
	}
}

.content-page .news-list-page dl {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 1em 0 0;
	border-top: 1px dashed var(--rule);
}
.content-page .news-list-page dl:last-of-type {
	padding-bottom: 0.5em;
	border-bottom: 1px dashed var(--rule);
}
.content-page .news-list-page dt {
	flex: none;
	width: 60px;
	height: 17px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.content-page .news-list-page dd {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
	min-width: 0;
}
.content-page .news-list-page dd p {
	margin: 0;
}
.content-page .news-list-page .date {
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--ink-sub);
}
.content-page .news-list-page .title a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.content-page .news-list-page .title a:hover {
	color: var(--main-color);
}
.content-page .news-list-page .label-info dt { background-image: url("../img/common/label/home/info.svg"); }
.content-page .news-list-page .label-plane dt { background-image: url("../img/common/label/home/plane.svg"); }
.content-page .news-list-page .label-event dt { background-image: url("../img/common/label/home/event.svg"); }
.content-page .news-list-page .label-kids dt { background-image: url("../img/common/label/home/kids.svg"); }
.content-page .news-list-page .label-club dt { background-image: url("../img/common/label/home/club.svg"); }
.content-page .news-list-page .label-other dt { background-image: url("../img/common/label/home/other.svg"); }
.content-page .news-list-page .label-important dt { background-image: url("../img/common/label/home/important.svg"); }
@media screen and (min-width:768px) {
	.content-page .news-list-page dt {
		width: 80px;
		height: 23px;
	}
}

/*//////////////////////////////////////////////////////////////////////////////

	ユーティリティ

//////////////////////////////////////////////////////////////////////////////*/

/*=============================================================================
	文字装飾
==============================================================================*/

span.strike {
	text-decoration: line-through;
}
.text-alert {
	font-weight: 700;
	color: #bf1414;
}
.content-page .empty-notice {
	padding: 1.5em;
	border: 1px solid var(--rule);
	border-radius: 0.4em;
	text-align: center;
	color: var(--ink-sub);
}
.content-page .button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1em;
}
.content-page #access .button-row {
	margin-top: 1.5em;
	justify-content: flex-end;
}
.content-page .button-row .link-more {
	margin-left: 0;
}

/*=============================================================================
	折り返し制御
==============================================================================*/

.no-wrap {
	display: inline-block;
}

/*=============================================================================
	注意書き
==============================================================================*/

.precautions {
	padding: 0;
	font-size: 70%;
	color: rgb(124, 124, 124);
}

/*//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////

	★★★ ここから下を style.css に分割する ★★★
	（上は common.css として全ページで読み込む）

//////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

/*//////////////////////////////////////////////////////////////////////////////

	ページ別

//////////////////////////////////////////////////////////////////////////////*/

/*=============================================================================
	トップページ
==============================================================================*/

/* スライド
------------------------------------------------------------------------------*/

.slider {
	width: 100%;
	max-width: 100vw;
	margin: 0;
	padding: 0;
}

/* 休館日のお知らせ
------------------------------------------------------------------------------*/

.content-page .closure-notice {
	width: calc(100% - 3em);
	max-width: var(--content-max);
	margin: 2em auto;
	padding: 1em;
	border: 2px solid #d52b2b;
	border-radius: 0.4em;
	text-align: center;
}
.content-page .closure-notice p {
	margin: 0;
	font-weight: 700;
	color: #d52b2b;
}


/*=============================================================================
	利用案内
==============================================================================*/

/* アクセス（トップページの地図でも使用）
------------------------------------------------------------------------------*/

#google-map {
	width: 100%;
	height: 16em;
}
@media screen and (min-width:1024px) {
	#google-map {
		height: 32em;
	}
}

/*=============================================================================
	ページ共通テンプレート（新デザイン）

	利用案内ページ（/info/）で作成した、余白と罫線を基調にしたシンプルなデザイン。
	今後リニューアルする各ページはこの .content-page をベースに作る。
==============================================================================*/

.content-page {
	--ink-sub: #8a8a8a;
	--rule: #e3dfd9;
	--content-max: 1024px;
}

.content-page .page-title {
	padding: 2em 0 4em;
	text-align: center;
}
.content-page .page-title-inner {
	width: calc(100% - 3em);
	max-width: var(--content-max);
	margin: 0 auto;
}
@media screen and (min-width:1024px) {
	.content-page .page-title {
		padding: 3.5em 0 4.5em;
	}
}
.content-page .page-title .main-label {
	display: block;
	font-size: 3.4rem;
	font-weight: 700;
	letter-spacing: 0.15em;
}

.content-page .topic-path-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding: 0.8em 1.5em 3em;
	list-style-type: none;
	font-size: 1.3rem;
	color: var(--ink-sub);
}
.content-page .topic-path-list li:not(:last-child)::after {
	margin: 0 0.5em;
	content: "/";
}
.content-page .topic-path-list a {
	color: var(--ink-sub);
	text-decoration: none;
}

.content-page .info-section {
	position: relative;
	width: calc(100% - 3em);
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 4em 0 5em;
}
.content-page .info-section:nth-child(2n of .info-section)::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: -1;
	width: 100vw;
	height: 100%;
	margin-left: -50vw;
	background-image: url("../img/common/pattern_bg_tri.svg");
	background-repeat: repeat;
	background-size: 260px 260px;
}
.content-page .info-section-title {
	margin-bottom: 1.2em;
}
.content-page .info-section-title .main-label {
	display: inline-block;
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: 0.15em;
}
.content-page .info-section-title .sub-label {
	display: block;
	margin-top: 0.3em;
	font-size: 1.1rem;
	letter-spacing: 0.05em;
	color: var(--main-color);
}
@media screen and (max-width:767px) {
	.content-page .page-title .main-label {
		font-size: 2.6rem;
	}
	.content-page .info-section-title .main-label {
		font-size: 2.3rem;
	}
}

.content-page .lead-text {
	margin-bottom: 2em;
	line-height: 1.9;
}

.content-page .info-section ul,
.content-page .info-section ol {
	margin-bottom: 1.5em;
	padding-left: 1.5em;
	line-height: 1.8;
}

.content-page .table-wrap {
	margin-bottom: 2em;
	border: 1px solid var(--rule);
	border-radius: 0.4em;
	overflow: hidden;
}
.content-page .table-wrap.tight {
	margin-bottom: 0.8em;
}
.content-page .lead-text.tight {
	margin-bottom: 0.8em;
}
.content-page .info-table {
	width: 100%;
	border-collapse: collapse;
}
.content-page .info-table th,
.content-page .info-table td {
	padding: 1em 0.8em;
	text-align: left;
	border-bottom: 1px solid var(--rule);
}
.content-page .info-table td {
	padding-left: 1em;
	background-color: #fff;
}
.content-page .info-table th {
	width: 8em;
	background-color: var(--tint);
	font-weight: 700;
	vertical-align: top;
}
.content-page .info-table small {
	display: block;
	margin-top: 0.3em;
	color: var(--ink-sub);
}

.content-page .note-box {
	padding-left: 1em;
	border-left: 3px solid var(--main-color);
}
.content-page .note-box h4 {
	margin-bottom: 0.4em;
	font-size: 1.4rem;
	font-weight: 700;
}
.content-page .note-box p {
	line-height: 1.8;
	color: var(--ink-sub);
}

.content-page .link-list {
	display: flex;
	flex-direction: column;
	gap: 1em;
}
.content-page .link-item {
	display: flex;
	align-items: center;
	gap: 1.2em;
	padding: 1.2em;
	background-color: #fff;
	border-radius: 0.4em;
	text-decoration: none;
	color: inherit;
}
.content-page .link-item .thumb {
	flex: 0 0 8em;
}
.content-page .link-item .thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.3em;
}
.content-page .link-item h4 {
	margin-bottom: 0.3em;
	font-size: 1.6rem;
	font-weight: 700;
}
.content-page .link-item p {
	color: var(--ink-sub);
	line-height: 1.7;
}
@media screen and (min-width:1024px) {
	.content-page .link-list {
		flex-direction: row;
	}
	.content-page .link-item {
		flex: 1;
	}
	.content-page .link-list.stack {
		flex-direction: column;
	}
}

/* カード（画像+説明文+ボタン）
------------------------------------------------------------------------------*/

.content-page .feature-card-list {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}
.content-page .feature-card {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	border: 1px solid var(--rule);
	border-radius: 0.4em;
	overflow: hidden;
}
.content-page .feature-card .thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.content-page .feature-card .detail {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.2em;
}
.content-page .feature-card h4 {
	margin-top: 0;
	margin-bottom: 0.5em;
	font-size: 1.8rem;
	font-weight: 700;
}
.content-page .feature-card p {
	margin-bottom: 0;
	color: var(--ink-sub);
	line-height: 1.7;
}
.content-page .feature-card .link-more {
	margin-top: auto;
	gap: 0.5em;
	font-size: 0.85em;
}
.content-page .feature-card .link-more::after {
	width: 2em;
	height: 2em;
	font-size: 1em;
}
@media screen and (min-width:1024px) {
	.content-page .feature-card-list {
		flex-direction: row;
		gap: 2em;
	}
	.content-page .feature-card {
		flex: 1;
	}
}

.content-page .data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.5rem;
}
.content-page .data-table th,
.content-page .data-table td {
	padding: 0.8em;
	text-align: left;
	border-bottom: 1px solid var(--rule);
}
.content-page .data-table td {
	background-color: #fff;
}
.content-page .data-table th {
	background-color: var(--tint);
	font-weight: 700;
	white-space: nowrap;
}

/* 利用案内ページ固有パーツ
------------------------------------------------------------------------------*/

.content-page .facility-photo {
	margin-bottom: 1.5em;
}
.content-page .facility-photo img {
	width: 100%;
	border-radius: 0.3em;
}

.content-page #access .table-wrap {
	margin-bottom: 0;
}
.content-page #access iframe {
	width: 100%;
	height: 320px;
	margin-bottom: 1.5em;
	border: 0;
}

.content-page .floor-block {
	margin-bottom: 2.5em;
}
.content-page .floor-block:last-child {
	margin-bottom: 0;
}
.content-page .floor-block h4 {
	margin-bottom: 1em;
	font-size: 1.6rem;
	font-weight: 700;
}
.content-page .floor-map-img {
	margin-bottom: 1em;
}
.content-page .floor-map-img img {
	width: 100%;
	border-radius: 0.3em;
}
.content-page ul.floor-place-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	padding: 0;
	list-style-type: none;
}
.content-page .floor-place-list li {
	display: flex;
	align-items: center;
	padding: 0.7em 0.5em;
	border-bottom: 1px solid var(--rule);
}
.content-page .floor-place-list img {
	width: 1.5em;
	margin-right: 0.6em;
}
.content-page .floor-place-list small {
	display: block;
	color: var(--ink-sub);
}

.content-page .exhibits-link {
	display: flex;
	align-items: stretch;
	gap: 1.2em;
	padding: 1.5em;
	background-color: var(--tint);
	border-radius: 0.4em;
}
.content-page .exhibits-link .thumb {
	flex: 0 0 8em;
}
.content-page .exhibits-link .thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.3em;
}
.content-page .exhibits-link .detail {
	display: flex;
	flex: 1;
	flex-direction: column;
}
.content-page .exhibits-link p {
	margin-bottom: 0.8em;
	color: var(--ink-sub);
	line-height: 1.7;
}
.content-page .exhibits-link .link-more {
	margin-top: auto;
}
.content-page .calendar-cta {
	text-align: center;
}
.content-page .arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.2em;
	padding: 0.6em 1.4em;
	border: 2px solid var(--main-color);
	border-radius: 2em;
	color: var(--main-color);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s;
}
.content-page .arrow-link:hover {
	background-color: var(--main-color);
	color: #fff;
}
.content-page .arrow-link::after {
	font-family: "Material Symbols Outlined";
	font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
	content: "chevron_right";
}

.content-page .link-more {
	display: flex;
	width: fit-content;
	margin-left: auto;
	align-items: center;
	gap: 0.8em;
	color: inherit;
	font-weight: 700;
	text-decoration: none;
}
.content-page .link-more::after {
	content: "→";
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.8em;
	height: 2.8em;
	font-size: 1.2em;
	border: 2px solid var(--main-color);
	border-radius: 50%;
	color: var(--main-color);
	transition: background-color 0.15s, color 0.15s;
}
.content-page .link-more:hover::after {
	background-color: var(--main-color);
	color: #fff;
}

@media screen and (min-width:768px) {
	.content-page .access-layout {
		display: flex;
		align-items: flex-start;
		gap: 3em;
	}
	.content-page .access-layout iframe {
		flex-basis: 55%;
	}
	.content-page .access-layout .table-wrap {
		flex-basis: 45%;
	}
	.content-page .floor-layout {
		display: flex;
		gap: 3em;
	}
	.content-page .floor-layout .floor-map-img {
		flex-basis: 48%;
		margin-bottom: 0;
	}
	.content-page .floor-layout .floor-place-list {
		flex: 1;
		align-content: flex-start;
	}
	.content-page .exhibits-link .thumb {
		flex-basis: 12em;
	}
}

/* 館内展示物と設備ページ固有パーツ
------------------------------------------------------------------------------*/

.content-page .device-list {
	display: flex;
	flex-direction: column;
	gap: 2em;
}
.content-page .device-item .thumb img {
	width: 100%;
	margin-bottom: 1em;
	border-radius: 0.3em;
}
.content-page .device-item h4 {
	margin-bottom: 0.5em;
	font-size: 1.6rem;
	font-weight: 700;
}
.content-page .device-item p {
	line-height: 1.9;
}
.content-page .device-item p a {
	color: var(--main-color);
}

.content-page .exhibit-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.2em 1em;
}
.content-page .exhibit-item img {
	width: 100%;
	margin-bottom: 0.5em;
	border-radius: 0.3em;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.content-page .exhibit-item h5 {
	font-size: 1.2rem;
	font-weight: 700;
	text-align: center;
}

@media screen and (min-width:768px) {
	.content-page .device-list {
		flex-direction: row;
	}
	.content-page .device-item {
		flex-basis: 50%;
	}
	.content-page .exhibit-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5em;
	}
}

/*=============================================================================
	オリジナルキャラクター
==============================================================================*/

.content-page .character-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.4em 1.5em;
}
.content-page .character-card .thumb {
	margin-bottom: 1em;
}
.content-page .character-card img {
	display: block;
	width: 60%;
	margin: 0 auto;
}
.content-page .character-card h4 {
	margin-bottom: 0.6em;
	text-align: center;
}
@media screen and (min-width:1024px) {
	.content-page .character-card .thumb {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height: 10em;
	}
	.content-page .character-card img {
		width: auto;
		max-width: 60%;
		max-height: 100%;
		object-fit: contain;
		margin: 0;
	}
}
.content-page .character-card .info-table th {
	width: 5em;
}

@media screen and (min-width:1024px) {
	.content-page .character-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 2em;
	}
}

/*=============================================================================
	イベント
==============================================================================*/

/* 一覧
------------------------------------------------------------------------------*/

.event {
	display: flex;
	position: relative;
	padding: 1em;
	overflow: hidden;
	background-color: #fff;
	border-radius: 0.4em;
	margin-bottom: 1em;
}
.event:last-child {
	margin-bottom: 0;
}
.event a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.event .thumb {
	display: flex;
	flex-direction: column;
	max-width: 6em;
	margin-right: 1em;
}
.event .thumb img {
	display: block;
	width: 6em;
	height: auto;
	background-color: #f4f4f4;
}
.event .thumb small {
	margin-top: 0.5em;
	font-size: 60%;
	line-height: 1.2em;
}
.event .detail {
	width: calc(100% - 6em - 1em);
}
.event .detail h4 {
	margin: 0 0 0.5em 0;
	font-size: 120%;
	color: #f48404;
}
.event .detail .content {
	font-size: 90%;
}
.event .detail .date {
	margin: 0;
	font-size: 80%;
	color: #8a8a8a;
}
.event .detail .omit {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.event .detail .label {
	margin-bottom: 0.3em;
	line-height: 0;
}
.event .detail .label img {
	height: 1em;
}
.event.end::after,
.event.pause::after,
.event.full::after {
	display: block;
	position: absolute;
	top: 15px;
	left: -125px;
	width: 320px;
	padding: 0.5em 0;

	font-weight: bold;
	font-size: 80%;
	color: #ffffff;
	text-align: center;

	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.event.end::after {
	background-color: #b4b4b4;
	content: "終了";
}
.event.pause::after {
	background-color: #b4b4b4;
	content: "休止中";
}
.event.full::after {
	background-color: #0080ff;
	content: "定員満了";
}
.event.end a,
.event.pause a,
.event.full a {
	background-color: rgba(255,255,255,0.5);
}
	@media screen and (min-width:1024px) {
		.event {
			padding: 1.5em;
			transition: 0.3s;
		}
		.event:hover {
			background-color: #f9f9f9;
		}
		.event .thumb {
			margin-right: 2em;
		}
		.event .detail {
			width: calc(100% - 6em - 2em);
		}
		.event .detail h4 {
			margin-bottom: 1em;
		}
	}

/* 詳細ページ
------------------------------------------------------------------------------*/

.event-program {
	display: flex;
	flex-direction: column-reverse;
}
.event-program dd {
	margin-bottom: 1em;
}
@media screen and (min-width:1024px) {
	.event-program {
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	.event-program div {
		width: 44%;
	}
	.event-program h4 {
		margin-top: 0;
	}
}

.event-program {
	margin: 0 0 5em;
}
.event-program .visual small {
	white-space: nowrap;
}
.event-program .description p {
	margin-bottom: 1.5em;
}
.event-program .description dd {
	margin-bottom: 1em;
}
@media screen and (min-width:768px) {
	.event-program {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}
	.event-program h4 {
		margin-top: 0;
	}
	.event-program .visual {
		width: calc(40% - 1em);
	}
	.event-program .description {
		width: calc(60% - 1em);
	}
}
.ginga {
	flex-wrap: wrap;
}
.ginga .copy  {
	width: 100%;
	margin-top: 0em;
}

/* イベントカレンダー
------------------------------------------------------------------------------*/

.content-page .event-list {
	margin-bottom: 3em;
}
.content-page .day-line {
	display: flex;
	width: 100%;
	padding: 0.8em 1em;
	background-color: var(--tint);
	border-radius: 0.4em;
	margin-bottom: 0.8em;
}
.content-page .day-line:last-child {
	margin-bottom: 0;
}
.content-page .day-date {
	display: block;
	width: 5em;
	flex-shrink: 0;
}
.content-page .day-contents {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 0.4em;
}
.content-page .day-content {
	display: inline-block;
	padding: 0.2em 0.7em;
	background-color: #fff;
	border-radius: 1em;
	font-size: 0.85em;
	font-weight: 600;
}
.content-page .day-content.close-day {
	display: block;
	padding: 0;
	background-color: transparent;
	border-radius: 0;
	font-size: 1em;
	color: #bf1414;
}
@media screen and (min-width:768px) {
	.content-page .day-contents {
		flex-direction: row;
	}
}

/*=============================================================================
	プラネタリウム
==============================================================================*/

/* 観覧料
------------------------------------------------------------------------------*/

.content-page .price-grid {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}
.content-page .price-grid .table-wrap {
	margin-bottom: 0;
}
.content-page .price-grid h5 {
	margin-bottom: 0.6em;
	font-size: 1.4rem;
	font-weight: 700;
}
.content-page .price-grid .info-table td {
	text-align: right;
}
.content-page .price-grid .info-table th {
	vertical-align: middle;
}
@media screen and (min-width:768px) {
	.content-page .price-grid {
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;
	}
	.content-page .price-grid > div {
		display: flex;
		flex-basis: 32%;
		flex-direction: column;
	}
	.content-page .price-grid .table-wrap {
		display: flex;
		flex: 1;
	}
	.content-page .price-grid .info-table {
		height: 100%;
	}
}

/* 投影プログラム
------------------------------------------------------------------------------*/

.content-page .program-card {
	margin-top: 3em;
}
.content-page .program-card:first-child {
	margin-top: 0;
}
.content-page .program-card .visual img {
	display: block;
	width: 100%;
	margin-bottom: 0.5em;
	border-radius: 0.3em;
}
.content-page .program-card .visual small {
	display: block;
	margin-bottom: 1.5em;
	color: var(--ink-sub);
}
.content-page .program-card h4 {
	margin-top: 0;
	margin-bottom: 0.8em;
}
.content-page .program-card p {
	margin-bottom: 1.5em;
	line-height: 1.9;
}
@media screen and (min-width:768px) {
	.content-page .program-card {
		display: flex;
		gap: 3em;
	}
	.content-page .program-card .visual {
		flex-basis: 40%;
	}
	.content-page .program-card .description {
		flex-basis: 60%;
	}
	.content-page .program-card.reverse {
		flex-direction: row-reverse;
	}
	body#home .content-page .program-card .visual {
		flex-basis: 50%;
	}
	body#home .content-page .program-card .description {
		display: flex;
		flex-direction: column;
		flex-basis: 50%;
	}
	body#home .content-page .program-card .description p {
		flex: 1;
	}
	body#home .content-page .program-card .link-more {
		margin-bottom: 0.6em;
	}
}

/* 団体利用
------------------------------------------------------------------------------*/

.group-desc {
	margin-bottom: 1em;
	padding: 1em;
	border: 1px #000 solid;
	background-color: #eeeeee;
}
.group-desc h5 {
	margin: 0 0 0.5em;
}
.group-desc p {
	margin: 0;
}

/*=============================================================================
	キッズ工房
==============================================================================*/

/* 工房メニュー
------------------------------------------------------------------------------*/

.menu-list .menu-item {
	display: flex;
	margin-bottom: 0.5em;
	padding: 1em;
	background-color: #fff;
	border-radius: 5px;
}
.menu-list .menu-item .thumb {
	width: calc(30% - 1em);
	margin-right: 1em;
}
.menu-list .menu-item .thumb img {
	border-radius: 3px;
}
.menu-list .menu-item .text {
	width: 70%;
}
.menu-list .menu-item .text h5 {
	margin: 0 0 0.2em;
	font-size: 110%;
}
.menu-list .menu-item .text .price {
	display: block;
	margin: 0.5em 0;
	font-weight: 700;
	color: #c27c12;
}
.menu-list .menu-item .text .how-to-movie a {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.2em 0.5em;

	background-color: #efefef;

	font-weight: 600;
	color: #333333;
	text-decoration: none;

	border-radius: 5px;
}
.menu-list .menu-item .text .how-to-movie a .youtube-icon {
	font-weight: 400;
	color: #d52b2b;
}
@media screen and (min-width:1024px) {
	.menu-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.menu-list .menu-item {
		width: calc(50% - 0.5em);
		margin-bottom: 1em;
	}
}

/* ワークショップ
------------------------------------------------------------------------------*/

.workshop-content {
	position: relative;
	margin-bottom: 1.6em;
	padding: 1em;
	overflow: hidden;
	background-color: #ffffff;
	border-radius: 5px;
	box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.05);
}
.new::after {
	display: block;
	position: absolute;
	top: 15px;
	left: -125px;
	width: 320px;
	padding: 0.5em 0;

	background-color: #ff2b2b;

	font-weight: bold;
	font-size: 80%;
	color: #ffffff;
	text-align: center;
	content: "NEW";

	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.workshop-content .thumb {
	margin-bottom: 1em;
	text-align: center;
}
.workshop-content .thumb img {
	width: 80%;
}
.workshop-content .detail h4 {
	margin-bottom: 0.5em;
}
.workshop-content .detail table {
	width: 100%;
}
.workshop-content .detail table tr {
	display: block;
	padding: 0.2em 0;
}
.workshop-content .detail table th,
.workshop-content .detail table td {
	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
}
.workshop-content .detail table th {
	position: relative;
	width: 5.9em;
	margin-right: 1em;
	padding: 0.2em 0.3em 0.2em 0.5em;

	background-color: #f48404;

	font-weight: normal;
	font-size: 80%;
	color: #ffffff;
	text-align: center;
	letter-spacing: 0.2em;

	border-radius: 5px;
}
.workshop-content.ended div {
	opacity: 0.3;
}
.workshop-content.ended::after {
	display: flex;
	position: absolute;
	top: calc(50% - 2.5em);
	left: calc(50% - 6em);
	justify-content: center;
	align-items: center;
	width: 12em;
	height: 5em;

	border: 2px #d52b2b solid;

	border-radius: 5px;

	background-color: #fdf7f7;

	font-weight: 700;
	color: #d52b2b;
	content: "終了しました";
}
@media screen and (min-width:768px) {
	.workshop-contents::after {
		display: block;
		width: 33%;
		content: "";
	}
	.workshop-content {
		display: flex;
		flex-grow: 0;
		flex-shrink: 1;
		flex-basis: 49.9%;
		align-items: center;
		margin-bottom: 0.3em;
		padding: 2em;
	}
	.workshop-content:nth-child(2n) {
		flex-direction: row-reverse;
	}
	.workshop-content .thumb {
		flex-basis: 20%;
	}
	.workshop-content:nth-child(2n-1) .thumb {
		margin-right: 1em;
	}
	.workshop-content .detail {
		flex-basis: 80%;
	}
	.workshop-content .detail h4 {
		margin: 0;
		margin-bottom: 0.5em;
	}
	.workshop-content .detail p {
		margin-bottom: 2em;
	}
	.workshop-content .detail table tr {
		display: inline-block;
		width: 25%;
	}
}

/*=============================================================================
	クラブ・講座
==============================================================================*/

.club {
	display: flex;
	position: relative;
	padding: 1em 0;
	overflow: hidden;
	border-top: 1px #e9e9e9 solid;
}
.club:last-child {
	border-bottom: 1px #e9e9e9 solid;
}
.club a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.club .thumb {
	width: 6em;
	height: 6em;
	margin-right: 1em;
	background-color: #f4f4f4;
	text-align: center;
}
.club .thumb img {
	margin: 0 auto;
}
.club .detail {
	width: calc(100% - 6em - 1em);
}
.club .detail h4 {
	margin: 0 0 0.5em 0;
	font-size: 120%;
	color: #f48404;
}
.club .detail .content {
	font-size: 90%;
}
@media screen and (min-width:1024px) {
	.club {
		padding: 1.5em 0;
		transition: 0.3s;
	}
	.club:hover {
		background-color: #f9f9f9;
	}
	.club .thumb {
		margin-right: 2em;
	}
	.club .detail {
		width: calc(100% - 6em - 2em);
	}
	.club .detail h4 {
		margin-bottom: 1em;
	}
}