@charset "utf-8";

/*============================================
 基本CSS
============================================*/
* {
	text-align:center;			/* IE6以下でセンタリングするための対策 */
	margin:0; padding:0; 		/* 全要素のマージン・パディングをリセット */
	color:#333333;			/* 文字色 */
	line-height:1.5;			/* 行の高さを1.5倍にする */
} 

html {
	scroll-behavior: smooth;
}

body {
	top:0;
	text-align:center;			/* IE6以下でセンタリングするための対策 */
	background-color:#ffffff;		/* ページ全体の背景色 */
}

div#pagebody {
	max-width:1000px; margin:auto;	/* 内容全体をセンタリング */
	text-align:center;			/* テキストの配置を左揃えにする */
}

ul,div,img {
	margin: 0px;			/* 間隔ゼロ*/
	padding: 0px;			/* 余白ゼロ*/
	list-style: none;			/* リストマーカー無しにする */
	font-family:"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;	/*字体*/
	font-weight: 500;			/* 文字太さ */
}

/* パソコン用 */
@media screen and (min-width: 801px) {
	a {
		display: inline-block;		/* リンクブロック表示 */
		text-decoration:none; 	/* リンクの下線を無くす */
		transition: color 0.3s;	/* 色変化速度 */
	}

	a:hover {	
		color: #bbbbbb;     		/* リンクにマウスが載ったときの文字色*/
	}
}
					
/* スマホ用 */
@media screen and (max-width: 800px) {
	a {
		display: inline-block;		/* リンクブロック表示 */
		text-decoration:none; 	/* リンクの下線を無くす */
	}

	a:hover {	
		color: #bbbbbb;     		/* リンクにマウスが載ったときの文字色*/
	}
}

/*リンク画像マウスオーバーで透明度下げる*/
a:hover img {
	opacity: 0.6;			/* 透明度60％に指定 */
	filter:opacity(60);			/* IE対応用 */
	-ms-filter:opacity(60);
	transition: 0.3s;			/* 色変化速度 */
}

/*本文文字設定*/
p {
	font-size:90%;			/* フォントサイズ */
	padding:5px 50px;			/* 余白調整 */
	text-align:left;			/* テキストの配置を左揃えにする */
}

/* 誘導リンク文字設定 */
p.guide {
	font-size:90%;			/* フォントサイズ */
	padding:5px 40px 5px 40px;		/* 余白調整 */
	text-align:right;			/* テキストの配置を右揃えにする */
}

/* メインページ説明文文字設定 */
p.main {
	font-size:90%;			/* フォントサイズ */
	padding:0px 40px 5px 40px;		/* 余白調整 */
	text-align:center;			/* テキストの配置を中央揃えにする */
}

/* 強調文字設定 */
p.strong {
	font-size:90%;			/* フォントサイズ */
	font-family:游明朝,ヒラギノ明朝,serif;	/* フォントの種類 */
	font-weight: bold;			/* 文字太さ */
	padding:10px 40px;			/* 余白調整 */
	text-align:left;			/* テキストの配置を左揃えにする */
}
/*============================================
ヘッダー（参考：https://parlor-gimp.com/hamburger_menu_2/）
============================================*/
/* ページ上部に固定 */
header {
	background: #ffffff;
	display: flex;
	top: 0;
	height:60px;
 	padding: 0px;
	position: sticky;
	justify-content: space-between;
	z-index: 10;
	width: 100%;
}

.logo {
	margin:0 10px;
	font-family:Georgia,游明朝,ヒラギノ明朝,serif;	/* フォントの種類 */
}

h1 {
	letter-spacing:10px;
	font-weight: bold;			/* 文字太さ */
	font-size: 180%;
	color: #333333;
}

#switch{
	display: none;			/* チェックボックスを非表示にする */
}

/* PC用 */
@media (min-width: 801px) {
	nav#sm {
		display: none;			/* スマホ用メニューを表示しない */
	}

	nav#pc {
		display: flex;			/* 横に並べる */
		align-items: center;			/* 上下中央揃え */
	}

	ul.menu {
		display: flex;			/* 横に並べる */
		align-items: center;			/* 上下中央揃え */
		list-style-type: none;			/* リストマーカーの種類 */
		list-style-position: inside;		/* リストマーカーを余白の内側に含める */
		font-size:100%;			/* フォントサイズ */
		font-family:游明朝,ヒラギノ明朝,serif;	/* フォントの種類 */
		padding:0px;			/* 余白調整 */
	}

	li.menu {
		margin:0px 10px;			/* 余白調整 */
	}

}

/* 以下、ハンバーガーメニューの設定 */
/* スマホ用 */
@media (max-width: 800px) {
	nav#pc {
		display: none;			/* PC用メニューを表示しない */
	}

	#switch ~ label {				/* ハンバーガーの箱 */
		padding: 12px 12px;
		width: 60px;
		height: 60px;
		background: #ffffff;
		position: fixed;
		box-sizing: border-box;
		top: 0;
		right: 0;
	}

	#switch ~ label span{			/* 三本線の真ん中 */
		display: block;
		width:22px;
		height:3px;
		top: 50%;
		left: 0;
		right: 0;
		margin:auto;
		background: #333333;
		border-radius: 8px;
		position: absolute;
		-webkit-transition: 0.2s transform;
		transition: 0.2s transform;
	}

	#switch ~ label span:before,
	#switch ~ label span:after{			/* 三本線の上と下 */
		content: "";
		display: block;
		background: #333333;
		border-radius: 8px;
		position: absolute;
		width:22px;
		height:3px;
		left: 0;
		right: 0;
		margin: auto;
	}

	#switch ~ label span:before{
		top: -9px;
	}

	#switch ~ label span:after{
		top: 9px;
	}

	#switch:checked ~ label span{
		-webkit-transform:rotate(-45deg) ;	/* 回転してバッテンになる */
		transform:rotate(-45deg) ;
	}

	#switch:checked ~ label span:before{
		top:0;
	}

	#switch:checked ~ label span:after{
		-webkit-transform:rotate(270deg);	/* 回転してバッテンになる */
		transform:rotate(270deg);
		top:0;
		margin-top:0;
	}

	#switch:checked ~ #sm { 
		display: block; 
		top: 0;
	}

	#sm{
		opacity: 0.9;
		padding-top: 0;
		position: fixed;
		top: -100%;
		left: 0;
		width: calc(100% - 60px);
		height: 100%;
		background: #ffffff;
		transition: all 0.4s;
		padding: 60px;
		box-sizing: border-box;
	}

	.scroll-prevent {
		position: fixed;
		z-index: -1;
		width: 100%;
		height: 100%;
	}

	li.spmenu{
		text-align: center;
		font-size:100%;			/* フォントサイズ */
		font-family:游明朝,ヒラギノ明朝,serif;	/* フォントの種類 */
		padding:30px;			/* 余白調整 */
	}
}

/*============================================
メインビジュアル
============================================*/
div#mainvisual {
	margin-top: 0px;			/* メインビジュアルをメニューの高さ分下げる */
}

/* パソコン用 */
@media screen and (min-width: 801px) {
	img.mainvisual {
		display:block;			/* PCのとき表示 */
		width:100%;			/* 画像横幅を画面横幅に合わせる */
		max-width: 100%;			/* 画像横幅を画面横幅に合わせる */
		height: auto;			/* 高さ自動で拡大縮小 */
	}
	
img.mainvisual_m {
		display: none;			/* PCのとき隠す */
	}
}

/* スマホ用 */
@media screen and (max-width: 800px) {
	img.mainvisual {
		display: none;			/* スマホのとき隠す */
	}
	
img.mainvisual_m {
		display:block;			/* スマホのとき表示 */
		width:100%;			/* 表示する */
		max-width:100%;			/* 画像横幅を画面横幅に合わせる */
		height: auto;			/* 高さ自動で拡大縮小 */
	}
}

/*============================================
メインコンテンツ
============================================*/
div#main {
	max-width:800px; margin:auto;		/* 内容全体をセンタリング */
	padding:20px 0px;
	text-align:center;
}

section {
	margin:20px 0px 80px 0px;		/* 余白調整 */
}

h2 { 
	text-align: center;
	font-family:游明朝,ヒラギノ明朝,serif;	/* フォントの種類 */
	color:#333333;			/* フォントの色 */
	font-size:130%;			/* フォントサイズ */
	font-weight: bold;			/* 太字にする */
	margin:10px;			/* 位置調整 */
	border:none;
	background:none;
}

h3 {
	text-align: left;
	font-family:游明朝,ヒラギノ明朝,serif;	/* フォントの種類 */
	font-size:110%;			/* フォントサイズ */
	font-weight:bold;			/* 太字にする */
	margin:0px 40px;			/* 位置調整*/
}

h4 {
	text-align: left;
	font-family:游明朝,ヒラギノ明朝,serif;	/* フォントの種類 */
	clear:both;
	font-size:100%;			/* フォントサイズ */
	font-weight:bold;			/* 太字にする */
	margin:20px 50px 5px 50px;		/* 位置調整*/
}

img.main {
	max-width:300px; margin:auto;		/* 内容全体をセンタリング */
	margin:5px;			/*位置調整*/
}

/*トップページのリストの装飾*/
ul.main {
	list-style-type: none;			/* リストマーカーの種類 */
	list-style-position: inside;		/* リストマーカーを余白の内側に含める */
	font-size:90%;			/* フォントサイズ */
	margin:10px;			/* 余白調整 */
}

li.main {
	display: inline-block;			/* 横に並べる */
	margin:0px;			/* 余白調整 */
}

/*ストーリーページのリストの装飾*/
ul.story {
	text-align:left;
	list-style-type: none;			/* リストマーカーの種類 */
	list-style-position: inside;		/* リストマーカーを余白の内側に含める */
	font-size:90%;			/* フォントサイズ */
	margin:10px 50px 20px 50px;		/* 余白調整 */
}

li.story {
	display: inline-block;			/* 横に並べる */
	margin:0px 10px 0px 0px;		/* 余白調整 */
}

/*本文中のリンクの装飾*/
/* パソコン用 */
@media screen and (min-width: 801px) {
	a.main {
		color:#333333;			/* リンクの文字色 */
		text-decoration:underline; 		/* リンクの下線 */
		transition: color 0.3s;		/* 色変化速度 */
	}

	a.main:hover {
		color :#bbbbbb;			/* リンクの文字色 */
	}

	/*リンク画像マウスオーバーで透明度下げる*/
	a:hover img {
		opacity: 0.6;			/* 透明度60％に指定 */
		filter:opacity(60);			/* IE対応用 */
		-ms-filter:opacity(60);
		transition: 0.3s;			/* 色変化速度 */
	}
}

/* スマホ用 */
@media screen and (max-width: 800px) {
	.main a {
		color:#333333;			/* リンクの文字色 */
		text-decoration:underline; 		/* リンクの下線 */
	}

	.main a:hover {
		color :#bbbbbb;			/* リンクの文字色 */
	}
}

/* トップページ用テーブル装飾 */
table.top {
	margin:auto;			/* 余白調整 */
	padding:5px 40px ;			/* サブメニュー項目のパディング */
}

th.top {
	text-align:left;			/* 左よせ */
	vertical-align:top;			/* 上よせ */
	font-weight:normal;			/* 太字にしない */
	min-width:110px;			/* 幅の指定 */
	font-size:90%;			/* フォントサイズ */
	padding:2px 10px 2px 20px;		/* サブメニュー項目のパディング */
}

td.top {
	width:800px;
	max-width:800px;
	font-size:90%;			/* フォントサイズ */
	text-align:left;			/* 左よせ */
	padding:2px 5px;			/* サブメニュー項目のパディング */
}

/* キャラ紹介用テーブル装飾 */
table.chara {
	margin:auto;			/* 余白調整 */
	padding:5px 20px 5px 40px;		/* サブメニュー項目のパディング */
}

th.chara {
	text-align:left;			/* 左よせ */
	vertical-align:top;			/* 上よせ */
	font-weight:normal;			/* 太字にしない */
	min-width:90px;			/* 幅の指定 */
	font-size:90%;			/* フォントサイズ */
	padding:10px 0px 20px 5px;		/* サブメニュー項目のパディング */
}

td.chara {
	width:800px;
	max-width:800px;
	font-size:90%;			/* フォントサイズ */
	text-align:left;			/* 左よせ */
	padding:10px 5px 20px 0px;		/* サブメニュー項目のパディング */
}

h4.chara {
	text-align: left;
	clear:both;
	font-family:游明朝,ヒラギノ明朝,serif;	/* フォントの種類 */
	font-size:105%;			/* フォントサイズ */
	font-weight:bold;			/* 太字にする */
	margin:2px 20px;			/* 位置調整*/
}

p.chara {
	font-size:100%;			/* フォントサイズ */
	padding:5px 25px;			/* 余白調整 */
	text-align:left;			/* テキストの配置を左揃えにする */
}

/*============================================
過去のお知らせをしまうやつ
============================================*/
details {
	position: relative;
	top: 20px;
	bottom: 10px;
}

summary {
	cursor: pointer;
	font-size:90%;			/* フォントサイズ */
	outline: none;
	transition: 0.3s; 			/* 変化を滑らかに */
}

/* ホバー時のスタイル */
summary:hover {
	cursor: pointer;			 /* カーソルを指マークに */
	color: #dddddd;
}

/* オープン時にアニメーションを設定 */
details[open] .details-content {
	animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
	0% {
		opacity: 0;			 /* 透明 */
		transform: translateY(-10px); 	/* 上から表示 */
 	}

	100% {
		opacity: 1;
		transform: none;
	}
}

/*============================================
ページトップに戻るやつ（参考：https://cotodama.co/pagetop/）
============================================*/
#page_top{
	width: 50px;
	height: 50px;
	position: fixed;
	right: 0;
	bottom: 0;
	background: #ffffff;
	opacity: 0.6;
	border-radius: 50%;
	}

#page_top a{
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
	text-decoration: none;
}

#page_top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f102';
	font-size: 25px;
	color: #333333;
	position: absolute;
	width: 30px;
	height: 30px;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;
}

/*============================================
フッター
============================================*/
div#footer {
	padding: 10px;			/* 余白 */
}

/* (c)表示 */
p.c {
	text-align:center;			/* テキストの配置を左揃えにする */
	font-size: 80%;
	padding:5px 40px;			/* 余白調整 */
}