@charset "utf-8";

/*style-opening.cssの読み込み*/
@import url(style-opening.css);

/*全体の設定
---------------------------------------------------------------------------*/
body,html {width: 95%;height: 100%;}
body {
	margin: 0px;
	padding: 0px;
	color: #444444;	/*全体の文字色 #666から変更*/
	font-family: "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 13px;	/*文字サイズ*/
	line-height: 2;		/*行間*/
	background: #fff;	/*背景色*/
	-webkit-text-size-adjust: none;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {
	width: 100%;
	border: none;
}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #666;		/*リンクテキストの色*/
	transition: 0.4s;	/*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}
a:hover {
	color: #223741;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*header
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	text-align: center;	/*内容をセンタリング*/
	position: fixed;	/*スクロールしても固定表示する指定*/
	z-index: 10;
	left: 0px;
	top: 0px;
	width: 100%;
	background: rgba(71, 102, 115, 0.85); /* 背景色。59,110,191は青系、0.85は85%の不透明度 */
	display: flex;              /* ← フレックスボックスで配置制御 */
	align-items: center;        /* ← 縦方向の中央寄せ */
	justify-content: center;    /* ← 横方向の中央寄せ */
}
header h1 {
	font-size: 22px;		/*文字サイズ*/
}
header h1 a {
	text-decoration: none;
	color: #fff;	/*文字色*/
	letter-spacing: 0.2em;		/*文字間隔*/
	margin-top: 20px;		/*上に空けるスペース*/
}

/*メニュー
---------------------------------------------------------------------------*/
/*メニュー全体を囲むブロック*/
#menubar {
	position: relative;
	text-align: center;		/*文字をセンタリング*/
	font-size: 16px;		/*文字サイズ*/
	margin-top: 15px;		/*上に空けるスペース*/
}

/*メニュー１個あたりの設定*/
#menubar li {
	display: inline;	/*横並びにする設定*/
}
#menubar li a {
	text-decoration: none;
	color: #fff;	/*文字色*/
	padding: 0px 10px 5px 13px;	/*上、右、下、左へのメニュー内の余白*/
	letter-spacing: 0.2em;		/*文字間隔*/
	margin: 0 10px;				/*上下、左右へのメニューの外側の余白*/
	transition: 0.4s;	/*マウスオン時の移り変わるまでの時間設定。0.4秒。*/
}
#menubar li a:hover {
	color: #223741;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}


/*inner
---------------------------------------------------------------------------*/
.inner {
	background: rgba(255,255,255,0.95);	/*背景色。255,255,255は白の事で、0.9は色が90%ついた状態の事。*/
	width: 70%;				/*幅*/
}

/*contents
---------------------------------------------------------------------------*/
/*アニメーション設定------------------------*/
@keyframes contents {
/*0コマ目*/
0% {
	opacity: 0;
	top: 10px;
}
/*100コマ目*/
100% {
	opacity: 1;
	top: 0px;
}
}
/*contentsブロック*/
#contents {
	animation-duration: 0.5S;	/*アニメーションの実行時間。秒。*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを、完了後は最後のキーフレームを維持する*/
	animation-name: contents;	/*上のアニメーション設定で使っているkeyframesの名前。contents。*/
	animation-delay: 0.5s;		/*アニメーションを遅れて開始させる指定。0.5sは0.5秒の事。*/
	position: relative;
	width: 110%;
	height: 110%;
	overflow: hidden;
}
/*トップページのcontentsブロック*/
.home #contents {
	animation-delay: 3s;	/*アニメーションを遅れて開始させる指定の上書き。5.5sは5.5秒の事。アニメーションが終了した後、contentsを出力するまでの待機時間。*/
}

/*段落タグ*/
#contents p {
	padding: 0px 10px 20px;		/*上、左右、下への余白*/
}
/*段落タグが続いた場合の設定*/
#contents p + p {
	margin-top: -10px;
}

.main{
	display: flex;
	justify-content: space-between;
	margin: 30px;
}

#menu_math ul li {
	margin-bottom: 15px;
	list-style-type: none;
	border: none; /* ボーダーは消すか、必要に応じて再設定 */
	display: block;
	padding: 0;
}
#menu_math h3{	
	clear: both;
	margin-bottom: 10px;	/*下に空けるスペース*/
	font-size: 20px;		/*文字サイズ*/
	padding: 0 10px;		/*上下、左右へのブロック内の余白*/
}

#menu_math ul li a {
	display: inline-block;
	background-color: #d2e2e8;  /* 水色ボタン */
	color: #000044;
	text-decoration: none;
	border-radius: 8px;
	border: 1px solid #999;
}
#menu_math ul li a:hover {
	background-color: #8ac0d6;
}
#menu_math img{
	width: 20%;
	height: auto;  /* 縦横比同じ */
}
#menu_math .group {
	display: block;
	margin-top: 6px;
	margin-left: 10px;
	color: #333;
	font-size: 14px;
}
#menu_link ul li {
	margin-bottom: 15px;
	list-style-type: none;
	border: none; /* ボーダーは消すか、必要に応じて再設定 */
	display: block;
	padding: 0;
}
#menu_link h3{	
	clear: both;
	margin-bottom: 10px;	/*下に空けるスペース*/
	font-size: 20px;		/*文字サイズ*/
	padding: 0 10px;		/*上下、左右へのブロック内の余白*/
}

#menu_link ul li a {
	display: inline-block;
	background-color: #d2e2e8;  /* 水色ボタン */
	color: #000044;
	text-decoration: none;
	border-radius: 8px;
	border: 1px solid #999;
}
#menu_link ul li a:hover {
	background-color: #8ac0d6;
}
#menu_link img{
	width: 20%;
	height: auto;  /* 縦横比同じ */
}
#menu_link .group {
	display: block;
	margin-top: 6px;
	margin-left: 10px;
	color: #333;
	font-size: 14px;
}

#poster {
	padding-top: 0px;
}
#link {
	padding-top: 0px;
}
.inner.link img {
	width: 10%;
	height: auto;
}


/* --- PC向け（幅801px以上）--- */
@media screen and (min-width: 801px) {
	header {
		height: 100px;
	}
	.inner {
		padding: 30px;			/*ボックス内の余白*/
		margin: 140px auto 20px;	/*上、左右、下へのボックスの外側の余白。左右にautoを指定すると中央配置になる。*/
		border-radius: 30px;	/*角丸のサイズ*/
		text-align: center;
	}
	.inner p{
		font-size: 16px;
	}

	.mainmenu {
		width: 70%;
		padding-top: 30px;
	}
	.mainmenu .inner {
		margin: 20px 20px 10px;
		width: 90%;
	}
	.mainmenu.group-page {
    	padding-top: 100px; 
	}
	.submenu {
		width: 30%;
		padding-top: 30px;
	}
	.submenu .inner{
		margin: 20px 20px 10px;	/*上、左右、下へのボックスの外側の余白。左右にautoを指定すると中央配置になる。*/
	}
	.submenu.group-page {
    	padding-top: 100px; 
	}

	#menu_math {
		margin-bottom: 50px;
	}
	#menu_math ul li a {
		font-size: 17px;
		padding: 6px 14px;
	}
	#menu_math ul li .group {
		font-size: 17px;
	}
	
	#menu_link {
		margin-bottom: 50px;
	}
	#menu_link ul li a {
		font-size: 17px;
		padding: 6px 14px;
	}
	#menu_link ul li .group {
		font-size: 17px;
	}

	.group_info .group_name::after {
		content: "　　"; /* 全角スペース2つ分を自動で挿入 */
	}

	/*サムネイル画像を囲むブロック*/
	#thumbnail-box {
		margin: 0px 100px 0px;
		text-align: center;     /* 中央寄せ */
		position: relative;     /* 上下位置を微調整 */
		top: 10px;              /* 上に少し余白 */
		margin-bottom: 20px;    /* 下に少し余白 */
		z-index: 3;             /* 他の要素より前面に */
	}
	/*サムネイル画像*/
	.thumbnail {
		width: 90px;	/*画像の幅*/
		height: 115px;	/*画像の高さ*/
		border: 1px solid #ccc;	/*枠線の幅、線種、色*/
		padding: 5px;		/*余白*/
		background: #fff;	/*余白部分の色*/
		margin: 5px;	/*上下、左右へのサムネイルの外にとるスペース*/
	}

	#contents h2 {
		clear: both;
		margin-bottom: 20px;	/*下に空けるスペース*/
		font-size: 22px;		/*文字サイズ*/
		text-align: center;		/*文字をセンタリング*/
		letter-spacing: 0.2em;	/*文字間隔を少し広くとる設定*/
		line-height: 1.5;		/*行間をデフォルトから少し狭くする*/
		background: url(../images/bg_line1.png) repeat-x center bottom / auto 3px;	/*下線の背景画像の読み込み。X軸(横)にリピート、左右中央、下部に配置。幅はauto(自動)で高さを3pxにする。*/
		padding-bottom: 10px;
	}
	#contents h3 {
		clear: both;
		margin-bottom: 10px;	/*下に空けるスペース*/
		font-size: 20px;		/*文字サイズ*/
		padding: 0 10px;		/*上下、左右へのブロック内の余白*/
	}

}

/* --- スマホ横向き・小型タブレット（481px〜800px）--- */
@media screen and (max-width: 800px) and (min-width: 481px) {
	header {
		height: 60px;
	}
	.inner {
		padding: 20px;			/*ボックス内の余白*/
		margin: 100px auto 10px;	/*上、左右、下へのボックスの外側の余白。左右にautoを指定すると中央配置になる。*/
		border-radius: 20px;	/*角丸のサイズ*/
		text-align: center;
	}
	.inner p{
		font-size: 13px !important;
	}

	.mainmenu {
		width: 60%;
		padding: 30px 10px 10px;
	}
	.mainmenu .inner {
		margin: 10px;
		width: 90%;
		height: auto;
	}
	.submenu {
		width: 40%;
		padding-top: 30px;
	}
	.submenu .inner{
		margin: 10px;	/*上、左右、下へのボックスの外側の余白。左右にautoを指定すると中央配置になる。*/
	}

	#menu_math {
		margin-bottom: 30px;
	}	
	#menu_math ul li a {
		font-size: 13px;
		padding: 3px 5px;
	}
	#menu_math ul li .group {
		font-size: 12px;
	}

	#menu_link {
		margin-bottom: 30px;
	}	
	#menu_link ul li a {
		font-size: 13px;
		padding: 3px 5px;
	}
	#menu_link ul li .group {
		font-size: 12px;
	}

	.group_info {
    	display: flex;
		flex-direction: column;
	}

	/*サムネイル画像を囲むブロック*/
	#thumbnail-box {
		margin: 0px 10px 0px;
		text-align: center;     /* 中央寄せ */
		position: relative;     /* 上下位置を微調整 */
		top: 10px;              /* 上に少し余白 */
		margin-bottom: 20px;    /* 下に少し余白 */
		z-index: 3;             /* 他の要素より前面に */
	}
	/*サムネイル画像*/
	.thumbnail {
		width: 75px;	/*画像の幅*/
		height: 95px;	/*画像の高さ*/
		border: 1px solid #ccc;	/*枠線の幅、線種、色*/
		padding: 3px;		/*余白*/
		background: #fff;	/*余白部分の色*/
		margin: 3px;	/*上下、左右へのサムネイルの外にとるスペース*/
	}

	#contents h2 {
		clear: both;
		margin-bottom: 20px;	/*下に空けるスペース*/
		font-size: 18px;		/*文字サイズ*/
		text-align: center;		/*文字をセンタリング*/
		letter-spacing: 0.2em;	/*文字間隔を少し広くとる設定*/
		line-height: 1.5;		/*行間をデフォルトから少し狭くする*/
		background: url(../images/bg_line1.png) repeat-x center bottom / auto 3px;	/*下線の背景画像の読み込み。X軸(横)にリピート、左右中央、下部に配置。幅はauto(自動)で高さを3pxにする。*/
		padding-bottom: 10px;
	}
	#contents h3 {
		clear: both;
		margin-bottom: 10px;	/*下に空けるスペース*/
		font-size: 16px;		/*文字サイズ*/
		padding: 0 10px;		/*上下、左右へのブロック内の余白*/
	}
}


/* --- スマホ向け（縦向き）（〜480px）--- */
@media screen and (max-width: 480px) {
	header {
		height: 50px;
	}
	.inner {
		padding: 10px;			/*ボックス内の余白*/
		margin: 100px auto 10px;	/*上、左右、下へのボックスの外側の余白。左右にautoを指定すると中央配置になる。*/
		border-radius: 20px;	/*角丸のサイズ*/
		text-align: center;
	}
	.inner p{
		font-size: 12px;
	}

	.mainmenu {
		display: none;
	}
	.mainmenu.group-page {
		display: block;
		width: 100%;
	}
	.mainmenu.group-page .inner {
		margin: 50px auto 10px;
		width: 90%;
	}
	.submenu.group-page {
		display: none;
	}
	.submenu {
		width: 100%;
		text-align: center;
		margin: 0px auto;
	}
	.submenu .inner{
		margin: 10px auto 10px;	
	}
	.submenu iframe {
		display: block;
		margin: 0 auto;
	}

	#menu_math {
		margin-bottom: 30px;
	}	
	#menu_math ul li a {
		font-size: 15px;
		padding: 6px 14px;
	}
	#menu_math ul li .group {
		font-size: 13px;
	}

	#menu_link {
		margin-bottom: 30px;
	}	
	#menu_link ul li a {
		font-size: 15px;
		padding: 6px 14px;
	}
	#menu_link ul li .group {
		font-size: 13px;
	}

	.group_info {
    	display: flex;
		flex-direction: column;
	}

	#contents h2 {
		clear: both;
		margin-bottom: 20px;	/*下に空けるスペース*/
		text-align: center;		/*文字をセンタリング*/
		line-height: 1.5;		/*行間をデフォルトから少し狭くする*/
		background: url(../images/bg_line1.png) repeat-x center bottom / auto 3px;	/*下線の背景画像の読み込み。X軸(横)にリピート、左右中央、下部に配置。幅はauto(自動)で高さを3pxにする。*/
		padding-bottom: 10px;
		font-size: 13px;
		letter-spacing: normal;
	}
	#contents h3 {
		clear: both;
		margin-bottom: 10px;	/*下に空けるスペース*/
		padding: 0 10px;		/*上下、左右へのブロック内の余白*/
		font-size: 12px;
	}
	#menubar {display: none;}
}

/*footerブロック
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;	/*センタリング*/
	padding-bottom: 20px;
	color: #333;	/*文字色*/
	background-color: white
}
footer a {text-decoration: none;color: #333;}
footer a:hover {color: #333;}
footer .pr {display: block;}

/*galleryページの画像切り替え
---------------------------------------------------------------------------*/
/*大きな画像のボックスと説明文を入れるボックス*/
#item-image {
	position: relative;
	margin: 0 auto 20px;
	padding-bottom: 40px;
	top: 30px;
	width: 80%;			/*画像の幅*/
	max-width: 1300px;	/*画像の最大幅。これ以上広がらない指定です。ウィンドウに対して常に80%のまま表示したいならこの１行削除。*/
	text-align: center;
}
#item-image a{
	background-color: #d2e2e8;
	margin: 2px 10px;
	border: 1px ; 
	border-radius: 5px;
}
#item-image img {
    max-width: 80%;
}
/*大きな画像の１行目*/
#item-image #item_image1 {
	z-index:2;
	position:relative;
	overflow:hidden;
	top:10px;
	width: 100%;
}
/*大きな画像の２行目*/
#item-image #item_image2 {
	z-index:1;
	position:absolute;
	overflow:hidden;
	width: 0%;
	left:0px;
	top:10px; 
} 
.thumbnail:hover {
	border: 1px solid #000;	/*マウスオン時の枠線の幅、線種、色*/
}


/*説明文*/
#imgcaption {
	font-size: 15px;
	text-align: center;	/*文字をセンタリング*/
}

/*アニメーションのキーフレーム設定（変更不要）*/
@keyframes scroll {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*デフォルトでは非表示に*/
body .nav-fix-pos-pagetop a {display: none;}
/*ボタンの設定*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 100;position: fixed;
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	bottom: 50px;		/*下から50pxの場所に配置*/
	right: 1%;			/*右から1%の場所に配置*/
	background: #000;	/*背景色（古いブラウザ用）*/
	background: rgba(0,0,0,0.6);	/*背景色。0,0,0は黒の事で0.6は透明度60%の事。*/
	color: #fff;		/*文字色*/
	border-radius: 50%;		/*円形にする指定。この行削除すれば正方形になります。*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
	animation-name: scroll;	/*上のアニメーションで指定しているkeyframesの名前（scroll）*/
	animation-duration: 1S;	/*アニメーションの実行時間*/
	animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*マウスオン時*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #999;	/*背景色*/
}


/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	list-style: disc;
	padding: 0 20px 20px 42px;
}
ol {
	padding: 0 20px 20px 45px;
}

/*その他
---------------------------------------------------------------------------*/
.look {background: #c3b5a2;background: rgba(0,0,0,0.1);padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb50 {margin-bottom: 50px !important;}
.clear {clear: both;}
.color1, .color1 a {color: #b52654 !important;}
.pr {font-size: 10px;}
.wl {width: 96%;}
.ws {width: 50%;}
.c {text-align: center;}
.r {text-align: right;}
.l {text-align: left;}
.fl {float: left;}
.fr {float: right;}
.big1 {font-size: 40px;}
.mini1 {font-size: 11px;display: inline-block;line-height: 1.5;}
.sh {display: none;}

body.s-n #sub,body.s-n #footermenu,.m-n {display: none;}
.big1 {font-size: 20px;}
.fl {float: none;}
.fr {float: none;}
.sh {display:block;}
.pc {display:none;}