@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/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Zetta:wght@900&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', var(--google-fonts);
	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);
	position: relative;
}
.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: 3px; 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; }

.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; }

.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; }
	.flex_bc { flex-wrap: wrap; }
	.flex_cs { flex-wrap: wrap; }
	.flex_bs { flex-wrap: wrap; display: block; }
	.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 1.0rem; }
	.c5  { width: calc( 41.66% - 1rem ); margin: 0 0.5rem; }
	.c6  { width: calc( 50.00% - 1rem ); margin: 0 0.5rem; }
	.c7  { width: calc( 58.33% - 1rem ); margin: 0 0.5rem; }
	.c8  { width: calc(   100% - 1rem ); margin: 0 0.5rem 1.0rem; }
	.c9  { width: calc(   100% - 1rem ); margin: 0 0.5rem 1.0rem; }
	.c10 { width: calc(   100% - 1rem ); margin: 0 0.5rem 1.0rem; }
	.c11 { width: calc(   100% - 1rem ); margin: 0 0.5rem 1.0rem; }

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

/* ******************************************* */
/*		  a link setting
/* ******************************************* */
a { color: var(--text-color1); text-decoration: none; cursor: pointer; outline: 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.0rem 1.5rem 1.5rem;
	box-shadow: 2px 2px 4px rgba( 0, 0, 0, 0.1 );
	z-index: 0;
}
.padding_box,
.border_box2 { padding: 24px 40px; }
.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;
	background-size: cover;
	background-position: 50% 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 10px solid #ffffff;
	box-shadow: 4px 4px 5px rgba( 0, 0, 0, 0.3 );
}

.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 button,
.linkbutton a {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	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 a img { margin-right: 0.5rem; }
.linkbutton button {
	margin: 0 0.25rem 0.5rem;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 0.5rem 0.8rem 0.5rem 0.8rem;
	border: none;
	cursor: pointer;
	font-weight: bold;
	color: #FFFFFF;
	background: var(--main-color1);
	font-family: var(--google-fonts);
}
.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 button:hover,
.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 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;
}

.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; }
h5 { font-size: 1.0rem; font-weight: bold; margin: 0 auto 0.25rem; }

/* ******************************************* */
/*		  カレンダー
/* ******************************************* */
.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% ); }

/* ******************************************* */
/*          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: 25%;
	min-width: 100px;
	padding: 0.5rem 1rem;
	text-align: center;
	border-radius: 100px;
	border: 4px double var(--main-color1);
	color: var(--main-color1);
}
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 var(--sub-color);
	border-right: 3px solid var(--sub-color);
	border-bottom: 1px solid var(--main-color1);
	color: var(--main-color1);
}
table.result_table tr td {
	padding: 0.5rem 1rem;
	border-left: 3px solid var(--sub-color);
	border-right: 3px solid var(--sub-color);
	border-bottom: 1px solid var(--main-color2);
}
table.result_table.ranking tr th,
table.result_table.ranking tr td { font-size: 0.8rem; }

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

/* ******************************************* */
/*		  Footer PC
/* ******************************************* */
#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
}
@media(min-width:768px){
	.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_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;
}
.iframe_wrap {
	width: 100%;
	height: 0;
	padding-bottom: 75%;
	position: relative
}
.iframe_wrap iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left:0
}

.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;
	margin: 3rem auto 5rem;
	height: auto;
	top: auto;
	left: auto;
	position: relative;
	z-index: 0;
}
.login_board form h3 {
	margin: 1.0rem auto 0.2rem;
	font-size: 0.95rem;
	color: var(--main-color1);
	font-weight: bold;
	padding: 0;
	border: none;
}
.login_board.wide form { max-width: 800px; }
.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="date"],
.edit_profile input[type="text"] {
	padding: 4px;
	border-radius: 4px;
	border: 1px solid #ccc;
	font-family: var(--google-fonts);
}
.login_board input[type="date"],
.login_board input[type="text"],
.login_board input[type="email"],
.login_board input[type="password"] {
	display: block;
	border-radius: 4px;
	width: 100%;
	padding: 4px 1rem;
	font-size: 1rem; line-height: 30px;
	border: 1px solid #ccc;
	margin: 0.2rem auto 1.0rem;
	font-family: var(--google-fonts);
}
.login_board input[type="text"]:focus,
.login_board input[type="email"]:focus,
.login_board input[type="password"]:focus {
	border: 1px solid var(--main-color1);
}
.login_board input:focus {
	outline: 0;
}
.edit_profile input[type="submit"],
.login_board input[type="submit"],
.login_board input[type="button"] {
	display: block;
	width: 100%;
	margin: 0.5rem auto;
	font-size: 1rem; line-height: 30px;
	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: var(--google-fonts);
}
.edit_profile input[type="submit"]:hover,
.login_board input[type="submit"]:hover,
.login_board input[type="button"]:hover {
	opacity: 0.8;
}
.login_board form label a { color: var(--main-color1); font-weight: bold; margin: 0 0.25rem; }
.login_board p { color: #999; text-align: center; }
::placeholder { color: #999; }
@media(max-width: 768px) {
.login_board {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 94vw;
		margin: 3rem auto 5rem;
		height: auto;
		top: auto;
		left: auto;
		position: relative;
		z-index: 0;
	}
}

.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; flex-wrap: wrap; flex: 1; }
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; flex-wrap: wrap; }
.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; margin: 1.0rem auto; }
.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; }

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);
}
.login_board table {
	width: 100%;
	margin: 1rem auto 2rem;
	border-collapse: collapse;
}
.login_board table tr th { font-weight: bold; }
.login_board table tr th,
.login_board table tr td {
	padding: 0.25rem;
	border: 3px solid var(--bg-color1);
	background: #FFFFFF;
}

.terms_area {
	border: 1px solid var(--main-color1);
	padding: 1.2rem;
	width: 100%; height: 340px;
	overflow-y: scroll;
	font-size: 0.8rem;
	text-align: left;
}
.terms_area p {
	margin-bottom: 1rem;
	text-align: left;
}

section .question {
	margin: 1rem auto;
	border: 4px solid var(--main-color1);
	color: var(--main-color1);
	padding: 1.0rem 1.5rem 1.0rem 1.4rem; border-radius: 6px;
	font-weight: bold;
	font-size: 1.1rem;
	position: relative;
}
section .question::before {
	width: 2.5rem; height: 2.5rem;
	font-size: 1.75rem; text-align: center;
	font-family: 'Font Awesome 5 Free';
	content: "\f128";
	background: var(--main-color1); border-radius: 2.5rem;
	color: #FFFFFF;
	position: absolute;
	top: -0.8rem; left: -0.8rem;
}
section .answer > img,
section .quesiton > img { display: block; margin-bottom: 0.8rem; }
section .answer {
	margin: 0.5rem auto 2rem;
}



.audio-controller {
	position: relative;
	margin: 1.5rem auto 3rem;
	width: 100%;
	padding: 3.5rem;
	background-color: var(--bg-color2);
	color: var(--text-color1);
}
.audio-controller .controls {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.audio-controller .controls .row {
	display: flex;
	gap: 10px;
	width: 100%;
}
.audio-controller .controls button {
	border: none;
	padding: 0.5rem 2rem;
	cursor: pointer;
	font-size: 1.0rem;
	min-width: 100px;
	font-weight: bold;
	color: #fff;
	background: var(--main-color1);
}
.audio-controller .controls button.toggle.playing { opacity: 0.7;}
.audio-controller .controls button.mute.active { opacity: 0.7;}
.audio-controller .controls .time { font-size: 1.2rem;}

/* レンジスライダー */
.audio-controller input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	cursor: pointer;
	outline: none;
	border-radius: 15px;
	height: 6px;
	background: var(--bg-color2);
	margin-top: 14px;
}

/* スライダーのツマミ部分（webkit） */
.audio-controller input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	height: 15px;
	width: 10px;
	background-color: var(--main-color1);
	border-radius: 0%;
	border: none;
	transition: .2s ease-in-out;
	box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.2);
}

/* スライダーのツマミ部分（Firefox） */
.audio-controller input[type="range"]::-moz-range-thumb {
	height: 15px;
	width: 10px;
	background-color: var(--main-color1);
	border-radius: 0%;
		border: none;	transition: .2s ease-in-out;
	box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.2);
}

/* スライダーのツマミ部分のホバー、アクティブ、フォーカス（Webkit 用） */
.audio-controller input[type="range"]::-webkit-slider-thumb:hover { box-shadow: 0 0 0 8px rgba(248, 200, 245, 0.4)}
.audio-controller input[type="range"]:active::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(248, 200, 245, .5)}
.audio-controller input[type="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(248, 200, 245, .5)}
/* スライダーのツマミ部分のホバー、アクティブ、フォーカス（Firfox 用） */
.audio-controller input[type="range"]::-moz-range-thumb:hover { box-shadow: 0 0 0 8px rgba(248, 200, 245, .4)}
.audio-controller input[type="range"]:active::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(248, 200, 245, .5)}
.audio-controller input[type="range"]:focus::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(248, 200, 245, .5)}

.star01,
.complete01,
.lv01 {
	z-index: 10000;
	display: flex;
	width: 100vw; height: 100vh;
	justify-content: center;
	align-items: center;
	position: fixed; top: 0; left: 0;
	pointer-events: none;
	opacity: 1;
}
.star01 > *,
.complete01 > *,
.lv01 > * { opacity: 0; }
.star01.animation > *,
.complete01.animation > *,
.lv01.animation > * { opacity: 1; position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; display: flex; justify-content: center; align-items: center; }
.star01.animation > * { justify-content: center; }
.animation .lv01_000 {
	background: #FFFFFF;
	width: 100vw; height: 100vh;
	animation: lv_background forwards 1 ease-in;
}
.animation .lv01_001 {
	background: var(--main-color1);
	width: 100vw;
	animation: lv_centerline forwards 1 ease-in;
}
.animation .lv01_002 {
	color: var(--main-color2);
	animation: lv_text1 forwards 1 linear, lv_text2 forwards 1 linear;
	font-family: 'Anton', sans-serif;
}
.animation .lv01_004 {
	color: var(--main-color2);
	animation: lv_text3 forwards 1 linear, lv_text4 forwards 1 linear;
	font-family: 'Anton', sans-serif;
}
.animation .lv01_003 {
	border: 5vmin solid #FFFFFF;
	box-shadow: 0 0 3vmin var(--main-color1), 0 0 3vmin var(--main-color1) inset;
	mix-blend-mode: overlay; border-radius: 500vmax;
	animation: lv_circle forwards 1 ease-out, lv_background forwards 1 ease-in;
}
.animation.lv01 > * > * { animation-duration: 1.5s; }

.animation .complete01_000 {
	background: var(--main-color1);
	animation: complete_back forwards 1 2.0s linear;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.animation .complete01_004 {
	color: #FFFFFF;
	font-size: 3.5vw; letter-spacing: 0.15vw; line-height: 5vw;
	font-weight: bold;
}
.animation .complete01_005 {
	color: #FFFFFF;
	font-family: 'Lexend Zetta', sans-serif; opacity: 0;
	font-size: 7vw; line-height: 8vw;
	animation: zoomchara forwards 1 2.0s ease-in;
}
.animation .star01_001 { opacity: 0; animation: starget forwards 1 3.0s; position: relative; }

@keyframes lv_background {
	0%   { opacity: 1.0; }
	100% { opacity: 0; }
}
@keyframes lv_centerline {
	0%   { opacity: 0.3; height: 15vh; }
	45%	 { opacity: 0.3; height: 15vh; }
	90%	 { opacity: 0.65; height: 0.25vh; }
	100% { opacity: 0; height: 0.1vh; }
}
@keyframes lv_text1 { 0%   { font-size: 9vw; } 100% { font-size: 10vw; }}
@keyframes lv_text3 { 0%   { font-size: 9.4vw; } 100% { font-size: 11vw; }}
@keyframes lv_text2 { 0%   { opacity: 1; } 85%  { opacity: 0.3; } 88%  { opacity: 0; } 91%  { opacity: 0.3; } 94%  { opacity: 0; } 97%  { opacity: 0.3; } 100% { opacity: 0; }}
@keyframes lv_text4 { 0%   { opacity: 0.5; } 100% { opacity: 0; }}
@keyframes lv_circle { 0%   { width: 10vw; height: 10vw; } 100%   { width: 100vw; height: 100vw; }}

@keyframes complete_back {
	0% { opacity: 0.9; height: 15vw; width: 1px; animation-timing-function: ease-in; }
	10% { width: 100vw; height: 15.1vw; transform: scale( 1 ) }
	80% { width: 100vw; height: 15.1vw; opacity: 0.7; transform: scale(1.05) }
	95% { width: 100vw; height: 1px; transform: scale(1.05) }
	100% { width: 1px; height: 1px; opacity: 0; transform: scale(1.05) }
}
@keyframes zoomchara {
	0% { opacity: 0; transform: scale( 1.5 ); } 33% { opacity: 1; transform: scale( 1.1 ); } 100% { opacity: 1; transform: scale( 1 ); } 
}
@keyframes starget {
	0% { opacity: 0; transform: scale( 2.0 ); animation-timing-function: ease-in; top: 0; }
	30% { opacity: 1; transform: scale( 0.5 ); top: 0; }
	32% { opacity: 1; transform: scale( 0.35 ); top: 0; }
	34% { opacity: 1; transform: scale( 0.5 ); top: 0; }
	70% { opacity: 1; transform: scale( 0.5 ); animation-timing-function: ease-in; top: 0; }
	75% { opacity: 1; transform: scale( 0.5 ); animation-timing-function: ease-in; top: 10vh; }
	77% { opacity: 1; transform: scale( 0.5 ); animation-timing-function: ease-in; top: 10vh; }
	100% { opacity: 0; transform: scale( 0.5 ); animation-timing-function: ease-in; top: -150vh;}
}