@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');

/* ******************************************* */
/*		  total
/* ******************************************* */
.hiragino { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif; }
.meiryo { 	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif; }
.mincho {	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }

* { box-sizing: border-box; }
body {
	font-family: 'Roboto', 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-color1);
	word-wrap: break-word;
	overflow-y: scroll;
	counter-reset: points;
}

/* ******************************************* */
/*		  container wrapper section etc
/* ******************************************* */
#container {
	min-width: 100%;
	min-height: 100vh;
	margin: 0 auto;
	overflow: hidden;
	background: var(--sub-color);
}
.wrapper {
	max-width: 1200px;
	padding: 0 1.5rem;
	margin: 0px auto;
}
.fullsize {
	margin-left: calc( ( 96vw - 100% ) / -2 ) !important;
	margin-right: calc( ( 96vw - 100% ) / -2 ) !important;
}

strong { color: var(--main-color2); font-size: 1.2em; }
.invisible { display: none !important; }
rt { position: relative; top: -2px; transform: translateY( 3px ); }

a.textlink { color: var(--main-color1); text-decoration: none; display: inline-block; }
a.textlink:hover { color: var(--main-color1); text-decoration: underline; }
a.simplelink { background: var(--main-color1); color: #FFFFFF; padding: 2px 8px; text-decoration: none; display: inline-block; }
a.simplelink:hover { background: var(--main-color1); opacity: 0.8; }

.flex_cc { display: flex; justify-content: center; align-items: center; margin: 0 -1.0rem; }
.flex_bc { display: flex; justify-content: space-between; align-items: center; margin: 0 -1.0rem; }
.flex_cs { display: flex; justify-content: center; align-items: stretch; margin: 0 -1.0rem; }
.flex_bs { display: flex; justify-content: space-between; align-items: stretch; margin: 0 -1.0rem; }
.flex_cc > *, .flex_bc > *, .flex_cs > *, .flex_bs > * { margin: 0 1rem; }

.c1  { width: calc(  8.33% - 2rem ); margin: 0 1.0rem; }
.c2  { width: calc( 16.66% - 2rem ); margin: 0 1.0rem; }
.c3  { width: calc( 25.00% - 2rem ); margin: 0 1.0rem; }
.c4  { width: calc( 33.33% - 2rem ); margin: 0 1.0rem; }
.c5  { width: calc( 41.66% - 2rem ); margin: 0 1.0rem; }
.c6  { width: calc( 50.00% - 2rem ); margin: 0 1.0rem; }
.c7  { width: calc( 58.33% - 2rem ); margin: 0 1.0rem; }
.c8  { width: calc( 66.66% - 2rem ); margin: 0 1.0rem; }
.c9  { width: calc( 75.00% - 2rem ); margin: 0 1.0rem; }
.c10 { width: calc( 83.33% - 2rem ); margin: 0 1.0rem; }
.c11 { width: calc( 92.66% - 2rem ); margin: 0 1.0rem; }

@media( max-width: 1024px ){
	.flex_cc { flex-wrap: wrap; margin: 0 -0.5rem; }
	.flex_bc { flex-wrap: wrap; margin: 0 -0.5rem; }
	.flex_cs { flex-wrap: wrap; margin: 0 -0.5rem; }
	.flex_bs { flex-wrap: wrap; margin: 0 -0.5rem; }
	.c1  { width: calc(    50% - 1rem ); margin: 0 0.5rem; }
	.c2  { width: calc(    50% - 1rem ); margin: 0 0.5rem; }
	.c3  { width: calc(    50% - 1rem ); margin: 0 0.5rem; }
	.c4  { width: calc(   100% - 1rem ); margin: 0 0.5rem; }
	.c5  { width: calc(   100% - 1rem ); margin: 0 0.5rem; }
	.c6  { width: calc(   100% - 1rem ); margin: 0 0.5rem; }
	.c7  { width: calc(   100% - 1rem ); margin: 0 0.5rem; }
	.c8  { width: calc(   100% - 1rem ); margin: 0 0.5rem; }
	.c9  { width: calc(   100% - 1rem ); margin: 0 0.5rem; }
	.c10 { width: calc(   100% - 1rem ); margin: 0 0.5rem; }
	.c11 { width: calc(   100% - 1rem ); margin: 0 0.5rem; }

	body { font-size: 14px; line-height: 1.4; -webkit-text-size-adjust: 100%; }
	.wrapper { width: 100%; padding: 0 3vw; }
}
article article { margin-bottom: 2rem; }

/* ******************************************* */
/*		  a link setting
/* ******************************************* */
a { color: var(--text-color1); text-decoration: none; cursor: pointer; outline: none; user-select: none; }
a:hover, a:focus, a:active { color: var(--text-color1); text-decoration: none; }
a img { border: 0; }
img { max-width: 100%; }
a[href^="tel:"] { cursor: default; }

sub { font-size: .7em; vertical-align: bottom; position: relative; bottom: -2px; }
p a { color: var(--main-color1); text-decoration: underline;  }
p a:hover { color: var(--main-color1); }

/* ******************************************* */
/*		  汎用素材
/* ******************************************* */
.loading {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	top: 0px; left: 0px;
	z-index: 10000;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.loading p { font-weight: bold; text-align: center;}

/* ************* 囲いボックス **************/
.padding_box,
.border_box,
.border_box2 {
	position: relative;
	background: rgba(255, 255, 255, 0.85 );
	padding: 1.5rem 1.5rem;
	box-shadow: 2px 2px 4px rgba( 0, 0, 0, 0.1 );
	z-index: 0;
}
.border_box2 { border: 6px solid var(--main-color1); }
.border_box::before {
	position: absolute;
	content: "";
	width: calc( 100% - 16px );
	height: calc( 100% - 16px );
	top: 6px;
	left: 6px;
	border: 2px dashed #ccc;
	z-index: -1;
}
.border_contents {
	border: 10px solid var(--main-color1);
	padding: 40px;
	box-shadow: 2px 2px 2px 2px rgba( 0, 0, 0, 0.3 );
	margin: 40px auto;
}
.underline_box {
	position: relative;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid #ccc;
}
.comment_box {
	margin: 20px auto;
	padding: 1.5rem;
	border: 1px solid #ddd;
	box-shadow: 3px 3px 1px rgba( 0, 0, 0, 0.3 );
}
.comment_box p {
	line-height: 45px;
	font-size: 18px;
	background: url('/_images/note1.png');
	background-size: 4px 45px;
}
.contents_box1 { padding: 0 1rem; }
.contents_box2 { padding: 0 2rem; }
.contents_box3 { padding: 0 2.5rem; }
@media(max-width:767px){
	.padding_box { padding: 3vw; }
	.border_box { padding: 25px; }
	.border_box2 { padding: 20px; }
	.contents_box1 { padding: 0 0vw; }
	.contents_box2 { padding: 0 1.5vw; }
	.contents_box3 { padding: 0 3vw; }
}

/* ************* メインイメージ＋サムネイル画像（クリック差し換え式） **************/
.thumbnails li .image,
.mainimage {
	margin: 0px auto 20px;
	overflow: hidden;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	height: 384px;
}
.thumbnails li .image { height: 126px; }
.thumbnails li { margin-bottom: 10px; }
.thumbnails li .caption {
	font-size: 95%;
	font-weight: bold;
	text-align: center;
	color: #000;
}
.thumbnails img { cursor: pointer;  }
.mainimage,
.thumbnails img { box-shadow: 0 0 8px rgba( 0, 0, 0, 0.2 ); }
.thumbnails img,
.mainimage img { width: 100%; }
@media(max-width:767px){
	.mainimage {
		margin: 0px auto 20px;
		height: auto;
	}
	.thumbnails { display: flex; flex-wrap: wrap; margin: 20px -5px; }
	.thumbnails li .image { height: auto; margin: 0px; }
	.thumbnails li {
		margin: 0 5px 10px;
		width: calc( 50% - 10px );
	}
	.thumbnails li .caption {
		font-size: 90%;
		font-weight: bold;
		text-align: center;
		color: #000;
	}
}

/* ************* 写真風画像 **************/
.photocaption {
	font-size: 110%;
	font-weight: bold;
	margin-bottom: 8px;
	text-align: center;
}
.photoimage {
	padding: 8px 10px;
	box-shadow: rgba(0, 0, 0, 0.35) 4px 3px 11px;
	background: #fff;
	margin-bottom: 20px;
	position: relative;
}
.photoimage p.title {
	position: absolute;
	bottom: 1em; right: 1em;
	padding: 0.3em 1em;
	background: rgba(0, 0, 0, 0.5);
	color: #FFFFFF;
}
.photoimage p.serif {
	position: absolute;
	top: 1em; left: 50%;
	text-align: center;
	font-size: 0.8;
	width: 90%; margin-left: -45%;
	padding: 0.2em 1em;
	background: rgba( 255, 255, 255, 0.7 );
	border-radius: 30px;
}
.photoimage.l05 { transform: rotate( -0.5deg ); }
.photoimage.l10 { transform: rotate( -1.0deg ); }
.photoimage.l15 { transform: rotate( -1.5deg ); }
.photoimage.r05 { transform: rotate(  0.5deg ); }
.photoimage.r10 { transform: rotate(  1.0deg ); }
.photoimage.r15 { transform: rotate(  1.5deg ); }

.view_image { margin: 0 auto 0.5rem; text-align: center; }
.view_image img { box-shadow: 4px 4px 6px rgba( 0, 0, 0, 0.3 ); max-width: 80%; }

/* ************* 丸囲いイメージ **************/
.circleimage {
	position: relative;
	overflow: hidden;
	border-radius: 1000px;
	box-shadow: 4px 4px 5px rgba( 0, 0, 0, 0.3 );
	min-width: 150px;
}

.effect { opacity: 0; transition: 1.0s; position: relative; top: 100px; }
.effect.scroll { opacity: 1; top: 0; }

/* ******************************************* */
/*		  header PC
/* ******************************************* */
#header {
	background: var(--bg-color1);
	position: fixed;
	z-index: 9999;
	width: 100%;
	top: 0;
	transition: 0.1s;
	padding: 0.25rem 0rem;
	border-bottom: 1px solid var(--main-color1);
}
#header.skeleton { opacity: 0.9; }
#header.skeleton:hover { opacity: 1.0; }
#header .inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 0.25rem;
	position: relative;
}
#header .inner .mainbody,
#header .inner .buttons { display: flex; align-items: center; }
#header .inner .mainbody > *,
#header .inner .buttons > * {
	margin: 0 0.25rem;
}
#header .inner .buttons .button {
	border-radius: 4px;
	transition: 0.3s;
	width: 40px; height: 40px;
	font-size: 25px; line-height: 25px;
	border: 3px solid var(--main-color1);
	background: var(--main-color1);
	color: #FFFFFF;
	display: flex; justify-content: center; align-items: center;
}
#header .inner .buttons .button.open {
	background: #FFFFFF;
	color: var(--main-color1);
	transition: 0.3s;
}
@media(max-width:1024px){
	#header { position: relative; }
}

/* ******************************************* */
/*		  gnav PC
/* ******************************************* */
ul#gnav { display: flex; align-items: center; }
ul#gnav li { margin: 0 0.4rem; }
ul#gnav li a { color: var(--text-color1); }
ul#gnav li a:hover { opacity: 0.7; }
#menu {
	position: absolute;
	top: 100%;
	right: -210px;
	background: var(--main-color1);
	box-shadow: 2px 2px 5px rgba( 0,0,0,0.3 );
	transition: 0.2s;
	width: 200px;
}
#menu.open { right: 0; }
#menu ul li a {
	display: block;
	padding: 1rem 1.5rem;
	color: var(--text-color1);
	background: var(--bg-color1);
	text-decoration: none;
}
#menu ul li a:hover { opacity: 0.8; }

/* ******************************************* */
/*		  gnav SP
/* ******************************************* */
@media(max-width:767px){
	#rwd_menu {
		background: var(--main-color1);
		color: #fff;
		width: 100%;
	}
		#rwd_menu ul {
			width: 100%;
			max-height: 75vh;
			overflow-y: scroll;
		}
		#rwd_menu ul li {
			border-bottom: 1px solid rgba( 0, 0, 0, 0.3 );
		}
		#rwd_menu ul li a {
			display: block;
			font-size: 15px;
			color: #fff;
			line-height: 2.5;
			text-align: center;
			text-decoration: none;
		}
		#rwd_menu ul li a::after {
			content: "　≫";
		}

}

/* -------------------------------------------------------------------------------------------------- */

/* ******************************************* */
/*		  見出し・セクション
/* ******************************************* */

/* ******************************************* */
/*		  ボタン関係
/* ******************************************* */
.linkbutton {
	margin-left: -0.25rem;
	margin-right: -0.25rem;
}
.linkbutton p,
.linkbutton a {
	display: inline-block;
	margin: 0 0.25rem 0.5rem;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 0.5rem 0.5rem 0.5rem 0.8rem;
	background: var(--main-color1);
	color: #FFFFFF;
}
.linkbutton p.back,
.linkbutton a.back { padding: 0.5rem 0.8rem 0.5rem 0.5rem; background: #AAAAAA; color: #FFFFFF; }
.linkbutton p.back,
.linkbutton p { background: #DDDDDD; }
.linkbutton p::after,
.linkbutton p::before,
.linkbutton a::after,
.linkbutton a::before { font-family: "Font Awesome 5 Free"; font-weight: 900; }
.linkbutton p::after,
.linkbutton a::after { content: "　\f138\00a0"; }
.linkbutton p.back::before,
.linkbutton a.back::before { content: "\f137\00a0　"; }
.linkbutton p.back::after,
.linkbutton a.back::after { content: ""; }
.linkbutton a:hover { opacity: 0.7; }

/* ******************************************* */
/*		  画像汎用・テキスト汎用
/* ******************************************* */

/* ******************************************* */
/*		  リスト汎用・テーブル汎用
/* ******************************************* */
@media(min-width:768px){
	ul.col_2, ul.col_3, ul.col_4, ul.col_5 {
		display: flex;
		align-items: stretch;
		flex-wrap: wrap;
		margin: 0px -10px 40px;
	}
	ul.col_2 li { width: calc( 50% - 20px ); margin: 10px; }
	ul.col_3 li { width: calc( 33% - 20px ); margin: 10px; }
	ul.col_4 li { width: calc( 25% - 20px ); margin: 10px; }
	ul.col_5 li { width: calc( 20% - 20px ); margin: 10px; }
}
@media(max-width:767px){
	ul.col_2, ul.col_3, ul.col_4, ul.col_5 {
		display: flex;
		align-items: stretch;
		flex-wrap: wrap;
		margin: 0px -10px 30px;
	}
	ul.col_2 li { width: calc( 50% - 20px ); margin: 10px; }
	ul.col_3 li { width: calc( 33% - 20px ); margin: 10px; }
	ul.col_4 li { width: calc( 33% - 20px ); margin: 10px; }
	ul.col_5 li { width: calc( 33% - 20px ); margin: 10px; }
}
@media(max-width:736px){
	ul.col_2, ul.col_3, ul.col_4, ul.col_5 {
		margin: 20px -5px 20px;
	}
	ul.col_2 li { width: calc( 100% - 10px ); margin: 5px; }
	ul.col_3 li { width: calc( 50% - 10px ); margin: 5px; }
	ul.col_4 li { width: calc( 50% - 10px ); margin: 5px; }
	ul.col_5 li { width: calc( 50% - 10px ); margin: 5px; }
}
@media(max-width:480px){
	ul.col_2, ul.col_3, ul.col_4, ul.col_5 {
		margin: 20px -5px 20px;
	}
	ul.col_2 li { width: calc( 100% - 10px ); margin: 5px; }
	ul.col_3 li { width: calc( 100% - 10px ); margin: 5px; }
	ul.col_4 li { width: calc( 50% - 10px ); margin: 5px; }
	ul.col_5 li { width: calc( 50% - 10px ); margin: 5px; }
}
/* ******************************************* */
/*          スライダー関連 PC
/* ******************************************* */
@media(min-width:768px){
	.top_slider { position: relative; z-index: 1000; box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.4 ); left: 50%; margin-left: -960px; width: 1920px; padding: 10px 0px;}
	.top_slider .slick-slide { width: 800px; height: 300px; margin: 0 10px; }
}
@media(max-width:767px){
	.top_slider { position: relative; z-index: 1000; box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.4 ); width: calc( 100% + 8vw ); margin: 0 -4vw; }
	.top_slider .slick-slide { width: 100vw; height: 36.5vw; max-width: 800px; max-height: 300px; }
}

/* ******************************************* */
/*		  TOP NEWS Ticker
/* ******************************************* */
.news_slider {
	background: #1e2425;
	position: relative;
	width: 100%; left: 0px; top: 0px;
	box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.5 );
	z-index: 1200;
}
.news_slider ul {
	margin: 0 auto;
}
.news_slider ul li {
	color: #ffe03d;
	font-size: 175%;
	font-weight: 500;
	text-shadow: 0 0 3px #ffe03d, 0 0 3px #ffe03d;
}
.news_slider::after {
	position: absolute;
	content: "";
	width: 100%; height: 100%;
	top: 0px; left: 0px;
	background: url('/_images/flash_board.png');
	background-size: 3px 3px;
	z-index: 1000;
}

.info_text { margin: 1rem auto 2rem; font-size: 1.2rem; line-height: 1.6; }
.info_text p { margin-bottom: 1rem; }
.text_s { margin-bottom: 1.0rem; }
.text_s p { margin-bottom: 0.5rem; }
.text_m { font-size: 1.2rem; margin-bottom: 1.0rem; }
.text_m p { margin-bottom: 0.5rem; }
.text_l { font-size: 1.4rem; margin-bottom: 1.0rem; }
.text_l p { margin-bottom: 0.5rem; }
.caution { font-size: 0.9rem; margin-bottom: 0.5rem; opacity: 0.6; }
.caution p::before { content: '※ '; }

/* ******************************************* */
/*          BASE
/* ******************************************* */
.dashboard_main {
	display: flex;
	background-size: cover;
	background-position: center center;
}

h2 {
	margin: 0 auto 0.5rem;
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--main-color1);
}
h3 {
	margin: 0 auto 0.5rem;
	font-size: 1.15rem;
	font-weight: bold;
	padding: 0.2rem 0 0.2rem 1rem;
	border-left: 0.5rem solid var(--main-color1);
}
h4 {
	margin: 0 auto 0.5rem;
	font-size: 1.1rem;
	font-weight: bold;
	padding: 0.2rem 0 0.2rem 1rem;
	background: var(--main-color1);
	border-radius: 50px;
	color: #FFFFFF;
	position: relative;
}
h4 a {
	position: absolute;
	color: #FFFFFF;
	border: 1px solid #FFFFFF; border-radius: 4px;
	top: 50%; right: 1rem;
	font-size: 0.8rem; line-height: 1; padding: 0.1rem 0.25rem; margin-top: -0.5rem;
}
h4 a::after { content: " >"; }
h4 a:hover { color: #FFFFFF; opacity: 0.7; }

/* ******************************************* */
/*		  カレンダー
/* ******************************************* */
.calendar .date_area {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -2px;
	color: #5b5758;
}
.calendar .date_area > *:nth-child(7n+1) { color: #d4437b; }
.calendar .date_area > *:nth-child(7n+7) { color: #287cd4; }
.calendar .date_area p,
.calendar .date_area a {
	display: block;
	width: calc( 14.285% - 4px );
	margin: 2px;
	border: 1px solid #ddd;
	background: #FFFFFF;
	border-radius: 4px;
	text-align: center;
	height: 2.0rem;
	line-height: 2.0rem;
	font-weight: bold;
	cursor: default;
}
.calendar .date_area > *:nth-child(-n+7) { border: none; font-weight: normal; }

.calendar .date_area p.now { border-color: var(--main-color1); }
.calendar .date_area p.level1 { background: linear-gradient( to bottom, #FFFFFF 0%, #FFFFFF 90%, var(--main-color2) 91%, #FFFFFF 100% ); }
.calendar .date_area p.level2 { background: linear-gradient( to bottom, #FFFFFF 0%, #FFFFFF 80%, var(--main-color2) 81%, #FFFFFF 100% ); }
.calendar .date_area p.level3 { background: linear-gradient( to bottom, #FFFFFF 0%, #FFFFFF 70%, var(--main-color2) 71%, #FFFFFF 100% ); }
.calendar .date_area p.level4 { background: linear-gradient( to bottom, #FFFFFF 0%, #FFFFFF 60%, var(--main-color2) 61%, #FFFFFF 100% ); }
.calendar .date_area p.level5 { background: linear-gradient( to bottom, #FFFFFF 0%, #FFFFFF 50%, var(--main-color2) 51%, #FFFFFF 100% ); }
.calendar .date_area p.level6 { background: linear-gradient( to bottom, #FFFFFF 0%, #FFFFFF 40%, var(--main-color2) 41%, #FFFFFF 100% ); }
.calendar .date_area p.level7 { background: linear-gradient( to bottom, #FFFFFF 0%, #FFFFFF 30%, var(--main-color2) 31%, #FFFFFF 100% ); }
.calendar .date_area p.level8 { background: linear-gradient( to bottom, #FFFFFF 0%, #FFFFFF 20%, var(--main-color2) 21%, #FFFFFF 100% ); }
.calendar .date_area p.level9 { background: linear-gradient( to bottom, #FFFFFF 0%, #FFFFFF 10%, var(--main-color2) 11%, #FFFFFF 100% ); }
.calendar .date_area p.level10{ background: linear-gradient( to bottom, var(--main-color2) 0%, #FFFFFF 100% ); }
.calendar .date_area p.circle1 { background: radial-gradient( ellipse at center, #FFFFFF 0%, #FFFFFF 50%, var(--alert-color) 55%, #FFFFFF 60%, #FFFFFF 100% ); }
.calendar .date_area p.circle2 { background: radial-gradient( ellipse at center, #FFFFFF 0%, #FFFFFF 50%, var(--alert-color) 55%, #FFFFFF 60%, #FFFFFF 100% ); }
.calendar .date_area p.circle3 { background: radial-gradient( ellipse at center, #FFFFFF 0%, #FFFFFF 50%, var(--alert-color) 55%, #FFFFFF 60%, #FFFFFF 100% ); }
.calendar .date_area p.circle4 { background: radial-gradient( ellipse at center, #FFFFFF 0%, #FFFFFF 50%, var(--alert-color) 55%, #FFFFFF 60%, #FFFFFF 100% ); }
.calendar .date_area p.circle5 { background: radial-gradient( ellipse at center, #FFFFFF 0%, #FFFFFF 50%, var(--alert-color) 55%, #FFFFFF 60%, #FFFFFF 100% ); }
.calendar .date_area p.circle6 { background: radial-gradient( ellipse at center, #FFFFFF 0%, #FFFFFF 50%, var(--alert-color) 55%, #FFFFFF 60%, #FFFFFF 100% ); }
.calendar .date_area p.circle7 { background: radial-gradient( ellipse at center, #FFFFFF 0%, #FFFFFF 50%, var(--alert-color) 55%, #FFFFFF 60%, #FFFFFF 100% ); }
.calendar .date_area p.circle8 { background: radial-gradient( ellipse at center, #FFFFFF 0%, #FFFFFF 50%, var(--alert-color) 55%, #FFFFFF 60%, #FFFFFF 100% ); }
.calendar .date_area p.circle9 { background: radial-gradient( ellipse at center, #FFFFFF 0%, #FFFFFF 50%, var(--alert-color) 55%, #FFFFFF 60%, #FFFFFF 100% ); }
.calendar .date_area p.circle10 { background: radial-gradient( ellipse at center, #FFFFFF 0%, #FFFFFF 50%, var(--alert-color) 55%, #FFFFFF 60%, #FFFFFF 100% ); }

.calendar_table { width: 100%; border-collapse: separate; border-spacing: 1px; }
.calendar_table tr th { width: 14.44%; text-align: center; }
.calendar_table tr td {
	width: 14.44%;
	height: 3rem;
	padding: 20px 2px 1px;
	position: relative;
	height: 110px;
	min-width: 123.55px;
	border: 1px solid var(--bg-color2);
}
.calendar_table tr td.today::before {
	width: 100%; height: 100%;
	position: absolute;
	top: -2px; left: -2px; border-radius: 3px;
	background: var( --alert-color );
	content: ""; opacity: 0.4; padding: 2px;
	z-index: 0;
}
.calendar_table tr td .days {
	position: absolute;
	top: 1px; width: calc( 100% - 2px ); left: 1px;
	background: #FFFFFF;
	color: var(--main-color1);
	font-weight: bold;
	border-radius: 4px; font-size: 0.75rem;
	text-align: center;
}
.calendar_area {
	position: relative;
}
.calendar_button {
	display: flex;
	align-items: center;
	position: absolute;
	top: -2.5rem; right: 0;
	height: 1.5rem;
	font-size: 1.1rem;
}
.calendar_button div.prev_button,
.calendar_button div.next_button {
	cursor: pointer;
	user-select: none;
}
.calendar_button > a, .calendar_button > b,
.calendar_button > div { border: 1px solid var(--main-color1); padding: 0.2rem 1rem; font-size: 0.9rem; line-height: 1.0; border-radius: 4px; margin: 0 0.5rem; font-weight: bold; }
.calendar_button .no_button { opacity: 0.3; margin: 0 0.5rem; }
.calendar_button .prev_button:hover, .calendar_button .next_button:hover { opacity: 0.8; }
@media(max-width: 736px) {
	.calendar_button { position: static; justify-content: flex-end; font-size: 0.85rem; margin-bottom: 1rem; }
	.calendar_button > a, .calendar_button > b, .calendar_button > div { font-size: 0.75rem; }
}

.lesson {
	font-size: 0.7rem;
	line-height: 1.2;
	margin: 1px auto;
	border: 2px solid var(--main-color1);
	background: var(--main-color1);
	color: #FFFFFF;
	position: relative;
	z-index: 10;
}
.lesson:hover { opacity: 0.8;}
.lesson .inner {
	padding: 2px;
}
.lesson .date { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 2px; }
.lesson .curriculum { display: flex; justify-content: space-between; }
.lesson .buttons { display: flex; justify-content: center; margin: 2px auto 0px; }
.lesson input[type="submit"],
.lesson input[type="button"] {
	margin: 0px 2px;
	text-align: center;
	display: block;
	padding: 2px 4px 3px;
	border: 2px solid var(--main-color1);
	border-radius: 4px;
	cursor: pointer;
	color: var(--main-color1);
	background: none; line-height: 1;
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
}
.lesson input[type="submit"]:hover,
.lesson input[type="button"]:hover {
	background: rgba( 255, 255, 255, 0.2 );
}

.calendar_today {
	background: #FFFFFF;
	padding: 1.5rem;
	box-shadow: 3px 3px 5px rgba( 0, 0, 0, 0.3 );
}
.calendar_today li {
	background: var(--main-color1);
	position: relative;
	z-index: 10;
	margin: 2px auto;
	border: 4px solid #FFFFFF; border-radius: 8px;
	box-shadow: 3px 3px 5px rgba( 0, 0, 0, 0.35 );
}
.calendar_today li:hover { opacity: 0.8; }
.calendar_today li .inner { padding: 1.0rem; }
.calendar_today li .inner a { color: #FFFFFF; }
.calendar_today li .information { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 0.5rem; }
.calendar_today li .information p:nth-of-type(1) { width: 80px; }
.calendar_today li .information p:nth-of-type(2) { margin-right: 1rem; }
.calendar_today li .information p:nth-of-type(3) { flex: 1; text-align: right; }

.members { margin: 0.5rem auto 0; display: flex; flex-wrap: wrap; }
.members p { border: 1px solid #FFFFFF; border-radius: 4px; padding: 2px 8px; margin: 2px; }
.members p.export { opacity: 0.6; }

@media(min-width:768px){
	.calendar_today li .inner { padding: 0.5rem; }
	.members { font-size: 0.8rem; }
}


.qrcode_wrapper { margin: 0 auto 2rem; max-width: 450px; }
.qrcode_wrapper canvas { max-width: 100%; }
#qrcode { padding: 2rem; background: #FFF; }

/* ******************************************* */
/*          table
/* ******************************************* */
table.chara_table,
table.common_table {
	width: 100%;
	max-width: 1000px;
}
table.chara_table tr,
table.common_table tr {
	display: flex;
	margin: 8px auto;
	align-items: center;
	padding-bottom: 8px;
	border-bottom: 1px dotted #cccccc;
}
table.chara_table tr th,
table.common_table tr th {
	width: 20%;
	min-width: 80px;
	padding: 0.3rem 1rem;
	text-align: center;
	border: 1px solid var(--main-color1);
	font-weight: bold;
}
table.common_table tr td {
	flex: 1;
	padding-left: 1.5rem;
}
table.chara_table tr td {
	flex: 1;
	font-size: 20px;
	padding-left: 1.5rem;
}
table.log_table { width: 100%; text-align: center; }
table.log_table tr th { background: var(--main-color1); color: #ffffff; }
table.log_table tr th, table.log_table tr td { padding: 4px 1rem; }

table.result_table {
	width: 100%;
}
table.result_table tr th {
	padding: 0.5rem 1rem;
	text-align: center;
	font-size: 1.05em; font-weight: bold;
	border-left: 3px solid #FFFFFF;
	border-right: 3px solid #FFFFFF;
	border-bottom: 1px solid var(--main-color1);
	color: var(--main-color1);
}
table.result_table tr th.gender1::after { content: " ♂️"; }
table.result_table tr th.gender2::after { content: " ♀️"; }

table.result_table tr td {
	padding: 0.5rem 1rem;
	border-left: 3px solid #FFFFFF;
	border-right: 3px solid #FFFFFF;
	border-bottom: 1px solid #6ec1f4;
}
table.result_table label { margin-right: 1rem; }
@media(max-width:767px) {
	table.chara_table tr { display: block; }
	table.chara_table tr th,
	table.chara_table tr td { width: auto; }
}

/* ******************************************* */
/*		  新着情報
/* ******************************************* */

/* ******************************************* */
/*		  Footer PC
/* ******************************************* */
@media(min-width:768px){
	#footer {
		margin: 0;
	}
	.footer_main {
		margin-top: 10px;
	}
	.footer_main .logo { width: 300px; margin: 0px auto 10px; }
	.footer_info {
		margin: 0 -1000px;
		padding: 10px 1000px;
		background: #ddf2ff;
	}
	#fnav {
		font-size: 90%;
		display: flex;
		justify-content: space-between;
		align-items: top;
		margin: 20px auto;
	}
		#fnav ul {
			padding-right: 2em;
		}
		#fnav ul li {
			margin-left: 1em;
		}
		#fnav ul li:first-of-type { margin-left: 0em; margin-top: 1em; }
		#fnav ul li a {
			display: block;
			text-align: left;
			font-size: 0.9em;
			transition: 0.2s;
			padding: 4px 0px;
		}
		#fnav ul li a:hover {
			opacity: 0.7;
		}
		#fnav ul li:first-of-type a { font-size: 1.2em; font-weight: bold; }

	#footer .footer_main .tel p:nth-of-type(1) { font-size: 40px; line-height: 40px; }
	#footer .footer_main .tel p:nth-of-type(2) { font-size: 13px; line-height: 14px; }
	.copyright {
		font-size: 10px;
		line-height: 30px;
		color: #fff;
		background: var(--main-color1);
	}
	.copyright .wrapper { display: flex; justify-content: space-between; }
	.copyright p { flex: 1; text-align: left; }
	.copyright a { text-decoration: underline; color: #ffffff; margin-left: 1.5em; }
	.copyright a:hover { text-decoration: none; }
	/************ pagetop *************/
	#pagetop {
		position: fixed;
		bottom: 60px;
		right: 60px;
		width: 64px;
		height: 64px;
		z-index: 1000;
	}
		#pagetop a {
			display: block;
			text-align: center;
			width: 64px;
			height: 64px;
			background: #FFFFFF;
			color: var(--main-color1);
			font-size: 30px;
			line-height: 30px;
			border-radius: 100px;
			padding-top: 8px;
			border: 2px solid var(--main-color1);
		}
		#pagetop a span {
			font-size: 10px;
			line-height: 10px;
			font-weight: 600;
			display: block;
		}
		#pagetop a:hover {
			opacity: 0.75;
		}
}
/* ******************************************* */
/*		  Footer SP
/* ******************************************* */
@media(max-width:767px){
	#footer {
		margin: 0;
	}
	.footer_info {
		display: block;
		padding: 20px 0px;
	}
		.footer_info .logo,
		.footer_info .contents {
			width: 66%;
			margin: 8px auto;
		}
		.footer_info .contents a {
			margin: 20px auto;
		}

	#fnav {
		background: #1784de;
	}
		#fnav ul {
			text-align: center;
			margin: 0px auto;
		}
		#fnav ul li {
			font-size: 4vw;
			padding: 2vw 0vw;
		}
		#fnav ul li:nth-of-type(n+2) { border-top: 1px solid #fff; }
		#fnav ul li a {
			color: #fff;
			text-decoration: none;
		}
	.copyright {
		font-size: 10px;
		line-height: 30px;
		text-align: center;
		color: #fff;
		background: var(--main-color1);
	}
	.copyright a { color: #fff; margin: 0 1em; text-decoration: underline; }
	/************ pagetop *************/
	#pagetop {
		position: fixed;
		bottom: 70px;
		right: 10px;
		width: 64px;
		height: 64px;
		z-index: 1000;
		opacity: 0.7;
	}
		#pagetop a {
			display: block;
			text-align: center;
			width: 64px;
			height: 64px;
			background: var(--main-color1);
			color: #fff;
			font-size: 30px;
			line-height: 30px;
			border-radius: 100px;
			padding-top: 8px;
		}
		#pagetop a span {
			font-size: 10px;
			line-height: 10px;
			font-weight: 600;
			display: block;
		}

	#footer .fixed_entry,
	#footer .fixed_button {
		position: fixed;
		justify-content: space-between;
		bottom: 0; left: 0;
		width: 100%;
		padding: 3vw;
		display: flex;
		background: #ffffff;
		text-align: center;
		z-index: 4000;
	}
		#footer .fixed_entry a,
		#footer .fixed_button a {
			display: block;
			width: 45.5vw;
			background: #EE9600;
			color: #FFFFFF;
			border: 3px solid #ffffff;
			border-radius: 40vw;
			padding: 0.5rem;
			box-shadow: 0 0 3px rgba( 0, 0, 0, 0.3 );
		}
		#footer .fixed_button a:nth-of-type(2) { background: var(--main-color1); }
		#footer .fixed_entry { justify-content: center; transition: 0.2s; }
		#footer .fixed_entry a { width: 90vw; }
		#footer .fixed_entry.scroll { bottom: -100px; }
}

/* -------------------------------------------------------------------------------------------------- */

/* ******************************************* */
/*		  Breadcrumb PC
/* ******************************************* */
#breadcrumb {
	font-size: 0.8rem;
	color: var(--text-color1);
	padding: 1.0rem 0rem;
}
#breadcrumb ul {
	display: block;
	text-align: left;
}
#breadcrumb ul li {
	display: inline;
	padding: 0em 0em;
}
#breadcrumb ul li:nth-of-type(n+2)::before{
	display: inline;
	text-align: center;
	content: "> ";
	color: var(--main-color1);
	width: 1.5rem;
	height: 1rem;
	padding: 0rem 0.5rem;
}
#breadcrumb ul li a {
	color: var(--main-color1);
	text-decoration: none;
}
#breadcrumb ul li a:hover{
	color: var(--main-color1);
	text-decoration: underline;
}
@media(max-width:767px){
	#breadcrumb { padding: 2vw 0vw; font-size: 12px; }
	#breadcrumb ul li:nth-of-type(n+2)::before{ width: 18px; height: 12px; }
}

/* -------------------------------------------------------------------------------------------------- */

/* ******************************************* */
/*		  PC SP 共通（拡張）
/* ******************************************* */
.mincho {
	font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.alp-gothic {
	font-family: 'Century Gothic', 'Quicksand', sans-serif;
}
.italic { font-style: italic; }
.add-relative { position: relative; }
.tx_red { color: #CF000D; }
.tx_blue { color: #1A5FAD; }
.hover_white:hover { opacity: 0.75; }

/* ******************************************* */
/*          pagenation
/* ******************************************* */
ul.pagenation {
	display: flex;
	justify-content: center;
	margin: 40px auto;
}
	ul.pagenation li {
		min-width: 32px; min-height: 32px;
		line-height: 32px;
		text-align: center;
		margin: 0 4px;
	}
	ul.pagenation li p,
	ul.pagenation li a {
		display: block;
		font-size: 1.1em;
		line-height: 32px;
		font-weight: bold;
		color: #fff;
		background: #ccc;
		min-width: 32px; min-height: 32px;
		text-align: center;
		border: 1px solid #bbb;
		border-radius: 5px;
		padding: 0 4px;
	}
	ul.pagenation li p.current {
		background: #fff;
		color: #bbb;
	}
	ul.pagenation li a {
		color: #fff;
		background: var(--main-color1);
		border: 1px solid #71c2f4;
	}
	ul.pagenation li a:hover {
		background: #ffffff;
		color: var(--main-color1);
		border: 1px solid #71c2f4;
	}

/* -------------------------------------------------------------------------------------------------- */

/* ******************************************* */
/*		  iframe
/* ******************************************* */
.googlemap_wrap{
	position: relative;
	padding-bottom: 55%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	border: 1px solid #ccc;
	margin-bottom: 40px;
}
.googlemap_wrap img.fitimage{
	max-width: 900px;
}
.googlemap_wrap iframe,
.googlemap_wrap object,
.googlemap_wrap embed{
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}
.youtube_wrap {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background: rgba( 0, 0, 0, 0.05 );
}
.youtube_wrap iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
	box-shadow: 2px 2px 5px #999;
}
.game_wrap {
	position: relative;
	width: 100%;
	padding-top: 80.25%;
	background: rgba( 0, 0, 0, 0.05 );
}
.game_wrap iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
	box-shadow: 2px 2px 5px #999;
}

.kurukuru { animation: kurukuru 5s infinite linear; }
.fuwafuwa { animation: fuwafuwa 3s infinite ease-in-out alternate; }
.pukapuka { animation: pukapuka 4s infinite ease-in-out alternate; }
@keyframes kurukuru {
	0% {transform: rotate(0deg); }
	100% {transform: rotate(360deg); }
}
@keyframes fuwafuwa {
	0% {transform: translate( 0, -5px ); }
	50% {transform: translate( 0, 5px ); }
	100% {transform: translate( 0, -5px ); }
}
@keyframes pukapuka {
	0% {transform: scale( 1.0 ); }
	50% {transform: scale( 1.05 ); }
	100% {transform: scale( 1.0 ); }
}
.err, .error {
	color: var(--alert-color);
	margin: 0.5em auto;
	text-align: center;
	font-weight: bold;
}

.login_board {
	display: flex;
	justify-content: center; align-items: center;
	width: 94vw; height: 80vh; top: 0; left: 3vw;
	position: absolute;
	z-index: 0;
}
.login_board form {
	width: 100%;
	max-width: 480px;
	padding: 2.5rem;
	border: 1px solid #ddd;
	border-radius: 0.5rem;
	background: var(--bg-color1);
}
.edit_profile input[type="email"],
.edit_profile input[type="date"],
.edit_profile input[type="text"] {
	padding: 4px;
	border-radius: 4px;
	border: 1px solid #ccc;
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
.login_board input[type="text"],
.login_board input[type="password"] {
	display: block;
	border-radius: 4px;
	width: 100%;
	padding: 5px 1rem;
	font-size: 1rem; line-height: 40px;
	border: 1px solid #ccc;
	margin: 1.0rem auto;
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
.login_board input[type="text"]:focus,
.login_board input[type="password"]:focus {
	border: 1px solid var(--main-color1);
}
.login_board input:focus {
	outline: 0;
}
.enquete_box input[type="submit"],
.edit_profile input[type="submit"],
.login_board input[type="submit"],
.login_board input[type="button"] {
	display: block;
	width: 100%;
	margin: 1.0rem auto;
	font-size: 1rem; line-height: 40px;
	padding: 0.5rem 2.5rem;
	text-align: center;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	font-weight: bold;
	color: #FFFFFF;
	background: var(--main-color1);
	font-family: 'Noto Sans JP', 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}
.enquete_box input[type="submit"]:hover,
.edit_profile input[type="submit"]:hover,
.login_board input[type="submit"]:hover,
.login_board input[type="button"]:hover {
	opacity: 0.8;
}
.login_board p { color: #999; text-align: center; }
::placeholder { color: #999; }

.popup_message {
	position: fixed;
	top: 50%; left: 50%;
	width: 20em; height: 8em;
	margin-top: -6em; margin-left: -10em;
	padding: 1rem;
	border: 3px solid var(--main-color1);
	color: var(--text-color1);
	box-shadow: 0 0 0 5px var(--bg-color1);
	background: var(--bg-color1);
	border-radius: 8px; z-index: 9999;
	text-align: center;
	display: flex; justify-content: center; align-items: center;
}

ul.status_curriculum,
ul.list_curriculum {
	margin: 0 auto 2rem;
}
ul.status_curriculum li,
ul.list_curriculum li {
	display: flex;
	margin: 0rem auto 0.7rem;
	background: var(--bg-color1);
	box-shadow: 2px 2px 5px rgba( 0, 0, 0, 0.2 );
	position: relative;
}
ul.status_curriculum li .images,
ul.list_curriculum li .images { width: 150px; }
ul.list_curriculum li .mainbody { padding: 0.6rem 1.25rem; flex: 1; }
ul.list_curriculum li .mainbody .title { font-weight: bold; color: var(--main-color2); font-size: 1.1rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--main-color2); }
ul.list_curriculum li .mainbody .linkbutton { position: absolute; right: 0.7rem; bottom: 0.2rem; }
ul.list_curriculum li dl { display: flex; font-size: 0.85rem; margin: 2px auto; }
ul.list_curriculum li dl dt { width: 120px; background: var(--main-color2); padding: 0rem 0.7rem; font-weight: bold; color: #FFFFFF; border-radius: 8px; margin-right: 0.5rem; }
ul.list_curriculum li dl dd { display: flex; align-items: center; }
ul.list_curriculum li .gauge { display: inline-block; width: 120px; height: 5px; background: #DDDDDD; position: relative; margin-right: 1rem; }
ul.list_curriculum li .gauge .value { background: var(--main-color1); position: absolute; top: 0; left: 0; height: 5px; }
ul.list_curriculum li .gauge p { position: absolute; right: -50px; width: 40px; top: 50%; line-height: 1.0; margin-top: -0.4rem; }
@media( max-width: 768px ) {
	ul.status_curriculum li .images,
	ul.list_curriculum li .images { width: 20%;	 }
	ul.list_curriculum li .mainbody { padding: 0.6rem; flex: 1; }
	ul.list_curriculum li .mainbody .linkbutton { position: relative; text-align: right; right: 0; bottom: 0; margin: 0.5rem 0 0 0; }
	ul.list_curriculum li .mainbody .linkbutton a { margin: 0; }
	ul.list_curriculum li .gauge { width: 80px; }
}

.simple_status { display: flex; align-items: center; margin: 0 0.5rem; font-size: 0.8rem; }
.simple_status .in1-1 { width: 32px; height: 32px; border-radius: 32px; overflow: hidden; box-shadow: 0 0 0px 0.5px rgba( 0, 0, 0, 0.3 ); margin-right: 0.25rem; }
.simple_status .names { position: relative; padding: 0 0.5rem; }
.simple_status .gauge { width: 100%; height: 5px; background: #DDDDDD; position: relative; }
.simple_status .gauge .value { background: var(--main-color1); position: absolute; top: 0; left: 0; height: 5px; }

.mini_status { margin: 0 auto 1.5rem; }
.mini_status dl { display: flex; font-size: 0.7rem; margin: 2px auto; font-weight: bold; }
.mini_status dl dt { width: 30%; background: var(--main-color2); padding: 0.25rem; font-weight: bold; color: #FFFFFF; margin-right: 0.5rem; }
.mini_status dl dd { display: flex; align-items: center; flex: 1; }
.mini_status .gauge { display: block; width: 100%; height: 20px; background: #DDDDDD; position: relative; margin-right: 1rem; border: 1px solid #FFFFFF; box-shadow: 0 0 0 1px #BBBBBB; }
.mini_status .gauge .value { background: var(--main-color1); position: absolute; top: 0; left: 0; height: 18px; }
.mini_status .gauge p { position: absolute; top: 50%; left: 10px; line-height: 1.0; margin-top: -6px; font-size: 12px; color: #FFFFFF; }

ul.status_curriculum li { padding: 1rem; flex-wrap: wrap; }
ul.status_curriculum li .mainbody { flex: 1; margin-left: 1rem; }
ul.status_curriculum li .mainbody .title { font-weight: bold; color: var(--main-color2); font-size: 1.1rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--main-color2); }
.statusbody dl,
ul.status_curriculum li .mainbody dl { display: flex; font-size: 1rem; margin: 2px auto; font-weight: bold; }
.statusbody dl dt,
ul.status_curriculum li .mainbody dl dt { width: 25%; background: var(--main-color2); padding: 0.7rem; font-weight: bold; color: #FFFFFF; margin-right: 1rem; }
.statusbody dl dd,
ul.status_curriculum li .mainbody dl dd { display: flex; align-items: center; flex: 1; }
.statusbody .gauge,
ul.status_curriculum li .gauge { display: inline-block; width: 100%; height: 30px; background: #DDDDDD; position: relative; margin-right: 1rem; border: 1px solid #FFFFFF; box-shadow: 0 0 0 1px #BBBBBB; }
.statusbody .gauge .value,
ul.status_curriculum li .gauge .value { background: var(--main-color1); position: absolute; top: 0; left: 0; height: 28px; }
.statusbody .gauge p,
ul.status_curriculum li .gauge p { position: absolute; top: 50%; left: 20px; line-height: 1.0; margin-top: -0.5rem; font-size: 1.0rem; color: #FFFFFF; }
ul.status_curriculum li .subbody { width: 100%; margin-top: 1rem; display: flex; }
ul.status_curriculum li .subbody dl { display: flex; font-size: 0.85rem; margin: 2px 2px 2px 0px; flex: 1; align-items: center; }
ul.status_curriculum li .subbody dl dt { background: var(--main-color2); padding: 0rem 0.7rem; font-weight: bold; color: #FFFFFF; border-radius: 8px; margin-right: 0.5rem; }
ul.status_curriculum li .subbody dl dd { display: flex; align-items: center; }

.user_status .images { width: 120px; height: 120px; border-radius: 120px; overflow: hidden; margin: 0 auto 0.5rem; }
.user_status dl { display: flex; margin: 0.3rem auto; font-size: 0.9rem; }
.user_status dl dt { width: 40%; font-weight: bold; text-align: center; background: var(--main-color1); padding: 0.25rem 0.5rem; font-weight: bold; color: #FFFFFF; margin-right: 1.5rem; border-radius: 100px; }
.user_status dl dd { display: flex; align-items: center; flex: 1; }

.edit_profile dl { display: flex; padding: 1.0rem 0; align-items: center; border-top: 1px solid var(--main-color1); }
.edit_profile dl dt { width: 30%; font-weight: bold; padding: 0.25rem 0.5rem; font-weight: bold; color: var(--main-color1); margin-right: 1.5rem; }
.edit_profile dl dd { flex: 1; }
@media(max-width: 768px) {
	.edit_profile dl { display: block; padding: 1.0rem 0; align-items: center; border-top: 1px solid var(--main-color1); }
	.edit_profile dl dt { width: 100%; font-weight: bold; padding: 0.25rem 0.5rem; font-weight: bold; color: var(--main-color1); margin-right: 1.5rem; }
	.edit_profile dl dd { flex: 1; }
}
ul.contents_list {
	padding: 0.4rem 0.75rem 0.4rem 0.4rem;
	background: var(--bg-color1);
	height: 460px;
	max-width: 400px;
	margin: 0 auto;
	border: 1px solid rgba( 0, 0, 0, 0.3 );
	box-shadow: 0 0 0 3px var(--bg-color1);
}
ul.contents_list li ul {
	display: none;
	padding-left: 0.8rem;
}
ul.contents_list li { margin: 0.2rem auto; }
ul.contents_list li p,
ul.contents_list li a {
	display: flex;
	cursor: pointer;
	background: var(--main-color1);
	color: #FFFFFF;
	padding: 0.5rem 2.0rem 0.5rem 0rem;
	line-height: 1.4rem;
	align-items: center;
	position: relative;
}
ul.contents_list li p:hover,
ul.contents_list li a:hover { opacity: 0.7; }
ul.contents_list li a > i,
ul.contents_list li p > i { width: 3.5rem; text-align: center; font-size: 2rem; }
ul.contents_list li a > b,
ul.contents_list li p > b { flex: 1; font-size: 0.8rem; font-weight: normal; }
ul.contents_list li a::after,
ul.contents_list li p::after {
	position: absolute;
	right: 0.5rem; top: 50%;
	margin-top: -0.7rem;
}
ul.contents_list li ul li a::after, ul.contents_list li ul li p::after { margin-top: -0.5rem; }
ul.contents_list li a::after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "　\f138"; }
ul.contents_list li p::after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "　\f055"; }
ul.contents_list li p.open::after { font-family: "Font Awesome 5 Free"; font-weight: 900; content: "　\f056"; }
ul.contents_list li a .keylock {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f023";
	font-size: 2.2rem; line-height: 1.0; opacity: 0.8;
	position: absolute;
	top: 50%; left: 80%; margin-top: -1.1rem; margin-left: -1.1rem;
}
@media screen and (min-width: 600px) and (max-width: 768px) {
	.rwd_flex { display: flex; }
	.rwd_flex > article { width: calc( 50% - 2rem ); margin: 0 1rem; }
}

.now_current { box-shadow: 0 0 0 4px var(--alert-color) inset; }
.clear_flag { position: relative; }
.clear_flag::before {
	content: var(--clear_text);
	position: absolute;
	top: -2px; left: 2px; color: var(--alert-color); line-height: 1.0;
	font-weight: bold;
	font-size: 0.7rem;
	text-shadow: -1px -1px #FFF, -1px 0 #FFF, -1px 1px #FFF, 0 -1px #FFF, 0 1px #FFF, 1px -1px #FFF, 1px 0 #FFF, 1px 1px #FFF;
}
.clear_flag.complete_flag::before { content: var(--complete_text); }
.clear_flag.waiting_scoring::before { content: var(--waiting_text); }
.clear_flag.failure::before { content: var(--failure_text); }

ul.service_menu {
	margin: 0 -0.5rem 2rem;
	display: flex;
	flex-wrap: wrap;
}
ul.service_menu li {
	width: calc( 25% - 1rem );
	margin: 0 0.5rem 1rem;
	border: 5px solid var(--main-color1);
	border-radius: 0.5rem;
	box-shadow: 0.2rem 0.2rem 8px rgba( 0, 0, 0, 0.25 );
	overflow: hidden;
}
ul.service_menu li:hover { opacity: 0.8; }
@media(max-width:767px){
	ul.service_menu { margin: 0 -0.2rem 2rem; }
	ul.service_menu li { width: calc( 25% - 0.4rem ); margin: 0 0.2rem 0.5rem; }
}

#result {
	margin: 20px auto 40px;
}
#result ul.platform_info li {
	display: flex;
}
#result ul.platform_info li span:nth-of-type(1) { background: #ffffff; width: 30%; font-size: 1.1rem; font-weight: bold; padding: 1rem 1.5rem; margin: 2px; }
#result ul.platform_info li span:nth-of-type(2) { background: #ffffff; width: 70%; padding: 1rem 1.5rem; margin: 2px; }
@media(max-width:767px){
	#result ul.platform_info li span { display: block; }
}


ul.test_window {
	border: 3px solid var(--main-color1);
	box-shadow: 0 0 0 3px var(--bg-color1);
	background: var(--bg-color1);
	padding: 1.5rem;
	position: relative;
}
ul.test_window .times {
	position: absolute;
	line-height: 1.0;
	right: 1rem; top: 0.5rem;
}
ul.test_window .times meter { margin-left: 0.5rem; width: 180px; border: 1px solid var(--main-color1); border-radius: 100px; overflow: hidden; }
meter::-webkit-meter-optimum-value { background: var(--main-color1); }
meter:-moz-meter-optimum::-moz-meter-bar { background: var(--main-color1); }
ul.test_window li:nth-of-type(n+2) { display: none; }
ul.test_window li .prevnext { display: flex; justify-content: space-between; margin: 1rem auto; }
ul.test_window li .prevnext p,
ul.test_window li .prevnext a {
	display: block;
	color: #FFFFFF;
	border: 4px solid #FFFFFF;
	border-radius: 100px;
	background: var(--main-color1);
	padding: 0.3rem 1rem;
	box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.3 );
}
ul.test_window li .prevnext p { background: #DDDDDD; }
ul.test_window li .prevnext a:hover { opacity: 0.7; }

ul.test_window li input[type="text"] { padding: 0.25rem; border-radius: 8px; width: 12rem;}
ul.test_window li textarea { padding: 0.25rem; border-radius: 8px; width: 100%; height: 10rem; }

.question_answer { display: flex; flex-wrap: wrap; border: 1px solid rgba( 0, 0, 0, 0.2 ); border-radius: 1rem; padding: 1rem; }
.question_answer > div { display: flex; align-items: center; margin: 1rem; }
.question_answer > div p { display: inline-block; }

.question_answer.image_exists > div { width: calc( 33.33% - 2rem ); }
.question_answer.image_exists > div p { max-width: 180px; max-height: 120px; }
.question_answer.image_exists > div .question_image { margin: 0 auto; text-align: center; }
.question_answer.image_exists > div img { max-width: 180px; max-height: 120px; }

.marubatsu {
  display: flex;
  border-radius: 3px;
  justify-content: center;
  overflow: hidden;
}

.marubatsu div { position: relative; width: 120px; height: 120px; margin: 0 1rem; cursor: pointer; }
.marubatsu input { width: 120px; height: 120px; opacity: 0;}

.marubatsu label {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%; padding: 1rem;
	color: #FFFFFF;
	background: #EEEEEE;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
	font-weight: bold;
	font-size: 180px;
}
.marubatsu div:nth-of-type(2) input:checked + label { background: #e34d4d; }
.marubatsu div:nth-of-type(3) input:checked + label { background: #1d8fe2; }

dl.answers { display: flex; padding: 0.5rem 1.0rem; border: 1px solid #DDD; margin: 0.25rem auto; }
dl.answers dd { display: flex; justify-content: space-between; flex: 1; }
dl.answers dd > div { flex: 1; margin: 0 0.5rem; font-weight: bold; text-align: center; font-size: 1.3rem; }
dl.answers .true { font-size: 1.5rem; font-weight: bold; color: #e34d4d; }
dl.answers .false { font-size: 1.5rem; font-weight: bold; color: #1d8fe2; }
.kaisetsu {
	background: #AAAAAA;
	box-shadow: 0 0 0 5px #AAAAAA;
	border: 1px dashed #FFFFFF;
	color: #FFFFFF;
	margin: 1rem auto;
	font-style: italic;
	padding: 0.5rem 1.5rem;
}

ul.recent_history li {
	display: flex;
	border: 1px solid var(--main-color1);
	background: #FFFFFF;
	font-size: 0.8rem;
	border-radius: 8px;
	padding: 0.3rem;
	line-height: 1.2rem;
	margin: 0.3rem auto;
	overflow: hidden;
}
ul.recent_history li:hover { opacity: 0.8; }
ul.recent_history li .image { width:80px; height: 80px; }
ul.recent_history li .mainbody { flex: 1; margin-left: 0.5rem; }
ul.recent_history li .mainbody > p { overflow: hidden; height: 1.2rem; }
ul.recent_history li .mainbody > p:nth-of-type(1) { opacity: 0.5; text-align: right; }
ul.recent_history li .mainbody > p:nth-of-type(2) { font-weight: bold; color: var(--main-color2); }
ul.recent_history li .mainbody > p:nth-of-type(3) { padding-left: 0.4rem; }
ul.recent_history li .gauge { display: inline-block; width: 120px; height: 5px; background: #DDDDDD; position: relative; margin-right: 1rem; }
ul.recent_history li .gauge .value { background: var(--main-color1); position: absolute; top: 0; left: 0; height: 5px; }
ul.recent_history li .gauge p { position: absolute; right: -50px; width: 40px; top: 50%; line-height: 1.0; margin-top: -0.4rem; }

.news_column { display: flex; margin: 0.25rem auto;}
.news_column .date { opacity: 0.5; margin-right: 2rem; font-size: 0.8rem; }
.news_column .title { flex: 1; font-size: 0.9rem; }
.news_column .important {
	display: inline-block;
	margin-right: 0.5rem;
	background: var(--alert-color);
	border-radius: 4px; color: #FFFFFF;
	font-weight: bold;
	padding: 0 0.8rem;
}
.news_column .title a {
	color: var(--main-color1);
	font-weight: bold;
}

.posts {
	background: #FFFFFF;
	padding: 2.0rem;
}
.posts .news_info { display: flex; justify-content: flex-end; margin: 0 auto 1rem; }
.posts .news_info .date { font-size: 0.9rem; opacity: 0.5; }
.posts p {
	margin-bottom: 1rem;
}

dl.testparam { display: flex; align-items: center; margin: 0.25rem auto; position: relative; }
dl.testparam dt {
	background: var(--main-color1);
	border-radius: 8px;
	color: #FFFFFF; font-weight: bold;
	letter-spacing: 0.2rem; min-width: 120px;
	text-align: center;
}
dl.testparam dd {
	padding: 0 1.5rem;
	font-weight: bold;
}
dl.testparam .accordion {
	position: absolute;
	font-size: 0.9rem; line-height: 1.0;
	right: 0.5rem; top: 50%; margin-top: -0.45rem;
	background: var(--main-color1); color: #FFFFFF; border-radius: 4px;
	padding: 0.15rem; cursor: pointer;
}

table.testdetail {
	width: 100%;
	font-size: 0.85rem; text-align: center;
}
table.testdetail tr th,
table.testdetail tr td { padding: 0.2rem 0.5rem; border-bottom: 1px dotted #DDD; }

.prologue {
	position: fixed;
	z-index: 9999;
	width: 100%; height: 100%; top: 0; left: 0;
	background: rgba( 0, 0, 0, 0.8 );
	display: flex; justify-content: center; align-items: center;
}
.prologue .inner {
	width: 50%;
	min-width: 320px;
	padding: 1rem 2rem;
	background: var(--bg-color1);
}


ul.sidelink {
	margin-bottom: 1rem;
}
ul.sidelink li {
	margin: 0.25rem auto;
	position: relative;
}
ul.sidelink li a {
	display: block;
	background: var(--main-color2);
	border-radius: 4px;
	color: #FFFFFF;
	padding: 0.2rem 0.5rem;
}
ul.sidelink li a:hover { opacity: 0.7; }

.ee_control { display: flex; justify-content: center; }
.ee_control table { text-align: center; margin: 0 3px; border: 5px solid #FFFFFF; border-width: 5px 10px 8px 10px; background: #FFFFFF;}
.ee_control table:nth-of-type(1) { max-width: 120px; }
.ee_control table tr th { padding: 0.2rem 0.5rem; font-weight: bold; border-bottom: 1px dotted var(--main-color1); }
.ee_control table tr td { padding: 0.2rem 1.5rem; border-bottom: 1px dotted var(--main-color1); }

@media(max-width: 736px) {
	.ee_control { display: flex; justify-content: flex-start; }
	.rwd_scroll { overflow: auto; white-space: nowrap; }
	.rwd_scroll::-webkit-scrollbar { height: 5px; }
	.rwd_scroll::-webkit-scrollbar-track { background: #f1f1f1; }
	.rwd_scroll::-webkit-scrollbar-thumb { background: #bcbcbc; }
	.rwd_scroll::after { content: '← スクロールできます →'; font-size: 0.9rem; font-weight: bold; opacity: 0.7; text-align: center; display: block; margin: 0.5rem auto;}
}

.badge {
	position: absolute;
	top: -0.2rem; right: -0.2rem;
	width: 1.3rem; height: 1.3rem;
	background: #FF0000; color: #FFFFFF;
	text-align: center;
	font-size: 0.9rem;
	line-height: 1.3rem;
	font-weight: bold; border-radius: 1rem;
}

ul.at_thread {
	margin: 0;
}
ul.at_thread li {
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	margin: 0.5rem auto;
}
ul.at_thread li .images { position: relative; width: 60px; height: 60px; overflow: hidden; border-radius: 60px; box-shadow: 0.2rem 0.2rem 0.5rem rgba( 0,0,0,0.25); }
ul.at_thread li .mainbody { flex: 1; margin: 0 1rem; }
ul.at_thread li .mainbody .badge { top: -0.5rem; left: 45px; }
ul.at_thread li .mainbody .names { font-weight: bold; font-size: 1.1rem; }
ul.at_thread li .mainbody .comment { opacity: 0.7; font-size: 0.9rem; overflow: hidden; height: 1.2rem; line-height: 1.2rem; }
ul.at_thread li .times { font-size: 0.9rem; opacity: 0.5; }

ul.at_thread_message {
	max-height: 60vh;
	overflow-y: scroll;
}
ul.at_thread_message li {
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	margin: 0.2rem auto;
	padding: 0.2rem 0.35rem 0.2rem 0.2rem;
}
ul.at_thread_message li .images { position: relative; width: 60px; height: 60px; overflow: hidden; border-radius: 60px; box-shadow: 0.2rem 0.2rem 0.5rem rgba( 0,0,0,0.25); }
ul.at_thread_message li .mainbody {
	max-width: calc( 80% - 60px );
	min-width: 40%;
	margin: 0 1rem;
	padding: 0.5rem;
	background: #FFFFFF;
	border-radius: 1rem;
}
ul.at_thread_message li .times { font-size: 0.8rem; line-height: 1.0rem; }
ul.at_thread_message li .dammy { flex: 1; }
ul.at_thread_message li.leftside .images { order: 0; }
ul.at_thread_message li.leftside .mainbody { order: 1; background: rgba( 0, 0, 0, 0.1 ); }
ul.at_thread_message li.leftside .times { order: 2; text-align: left; }
ul.at_thread_message li.leftside .dammy { order: 3; }
ul.at_thread_message li.rightside .images { order: 3; }
ul.at_thread_message li.rightside .mainbody { order: 2; background: var(--bg-color2); }
ul.at_thread_message li.rightside .times { order: 1; text-align: right; }
ul.at_thread_message li.rightside .dammy { order: 0; }

.messagearea { margin: 2rem auto; }
.messagearea dl { display: flex; justify-content: space-between; align-items: center; }
.messagearea dl dt { flex: 1; margin-right: 1rem; }
.messagearea dl dt input { padding: 4px; border-radius: 6px; width: 100%; border: 1px solid #999; }
.messagearea dl dd input { padding: 2px 8px; }

ul.list_member {
	display: flex; justify-content: flex-start; align-items: stretch;
	margin: 0 -0.25rem 1.5rem; flex-wrap: wrap;
}
ul.list_member li {
	border: 2px solid var(--main-color1);
	border-radius: 6px; padding: 0.15rem;
	display: flex;
	justify-content: center; align-items: center;
	margin: 0.25rem; width: calc( 25% - 0.5rem );
}
ul.list_member li:hover { opacity: 0.65; }
ul.list_member li .images { width: 40px; margin-right: 0.5rem; border-radius: 40px;}
ul.list_member li .mainbody { flex: 1; font-weight: bold; }
ul.list_member li .mainbody a { font-size: inherit; }

ul.list_change li {
	margin: 0.2rem auto;
	border: 2px solid var(--main-color1);
	border-radius: 5px;
	padding: 0.4rem 0.4rem 0;
}
ul.list_change li p { color: var(--alert-color); font-size: 0.8rem; font-weight: bold; text-align: center; margin: 0.5rem auto; }
ul.list_change li dl {
	margin: 2px auto;
	display: flex;
	line-height: 1.2;
	font-size: 0.9rem;
}
ul.list_change li dl dt { width: 100px; padding: 2px 4px; font-weight: bold; }

table.default_table { width: 100%; }
table.default_table tr th { font-weight: bold; padding: 0.3rem 1rem 0.3rem 0; }
table.default_table tr td { padding: 0.3rem 1rem 0.3rem 0; }

ul.admin_message { position: relative; margin: 0rem auto 1rem; padding: 0.7rem 0.9rem; border: 3px solid var(--main-color1); border-radius: 8px; }
ul.admin_message li { display: flex; flex-wrap: wrap; font-size: 0.85rem; align-items: center; margin: 2px auto; }
ul.admin_message li.unconfirmed { font-weight: bold; }
ul.admin_message li p:nth-of-type(2) { opacity: 0.6; margin-left: 1.0rem; font-size: 0.7rem; }
ul.admin_message li > b,
ul.admin_message li > a {
	display: block;
	width: 120px;
	color: var(--main-color1);
	background: #FFFFFF;
	padding: 0 8px; text-align: center; border-radius: 6px;
	margin-right: 1rem;
}
ul.admin_message li > b.birth { width: auto; font-size: 0.75rem; box-shadow: 0 0 3px var(--main-color1); margin: 1.5px; }
ul.admin_message li > a:hover { opacity: 0.8; }
ul.admin_message li p a { color: #FFFFFF; }
ul.admin_message li span { display: inline-block; margin-right: 0.5rem; color: var(--main-color1); font-weight: bold; }
ul.admin_message::before {
	background: var(--sub-color);
	padding: 0px 4px; position: absolute;
	top: -0.8rem; left: 1.2rem;
	font-size: 0.9rem; color: var(--main-color1); font-weight: bold;
	content: attr(data-text);
}
ul.admin_message .link { position: absolute; right: 0.4rem; bottom: 0.4rem; }
ul.admin_message .link a {
	background: var(--main-color1);
	padding: 2px 0.6rem 2px 1.2rem; color: #FFFFFF; font-weight: bold; font-size: 0.8rem;
	border-radius: 6px;
}
@media(max-width: 736px) {

}

form.furikae input[type="text"] { margin-right: 1rem; padding: 4px; border-radius: 6px; font-size: 0.8rem; min-width: 15rem; }
form.furikae input[type="submit"] { font-size: 0.8rem; border-radius: 6px; padding: 4px 0.5rem; }

table.info_view {
	margin: 1rem auto;
	width: 100%;
	text-align: center;
}
table.info_view tr.midoku a {
	font-weight: bold;
}
table.info_view tr.midoku a::before {
	content: "未読";
	display: inline-block;
	font-size: 0.85rem;
	background: var(--alert-color);
	margin-right: 0.3rem;
	padding: 0 0.3rem; border-radius: 5px;
	color: #FFFFFF;
}
table.info_view tr.enquete a::after {
	content: "アンケート";
	display: inline-block;
	font-size: 0.85rem;
	background: var(--main-color1);
	padding: 0 0.3rem;
	margin-left: 0.3rem;
	border-radius: 5px;
	color: #FFFFFF;
}
table.info_view tr th {
	padding: 0.3rem 1rem;
	background: var(--main-color1); color: #FFFFFF; font-weight: bold;
}
table.info_view tr td {
	padding: 0.3rem 0.1rem;
	font-size: 0.9rem;
	border-bottom: 1px dotted var(--main-color1);
}
table.info_view tr td:nth-of-type(1) { text-align: left; }
table.info_view tr td p {
	font-size: 0.7rem; opacity: 0.6;
}

.enquete_box label { margin-right: 1rem; }
.enquete_box input[type="text"] { padding: 5px; border-radius: 6px; width: 20rem; border: 1px solid #999; }
.enquete_box textarea { padding: 5px; border-radius: 6px; width: 20rem; height: 5rem; border: 1px solid #999; }