@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&display=swap');

html {
	font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size: 62.5%;
	color: #333;
	font-weight: 500;
	line-height: 30px;}

/* ======================== COMMON ======================== */
body {
	font-size: 16px;
	position: relative;
	overflow-x: hidden; }
body.fixed {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 0; }
*{ outline: none; }
a { color:#0066ff; text-decoration:none; overflow:hidden; outline:none;}
a:hover { text-decoration:none; color: #ff3300;}
a.anchor{
	margin-top:-80px;
	padding-top:80px;}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	cursor: pointer;}
img {
	object-fit: cover;
	object-position: 50% 50%;
	width: 100%;
	height: 100%;
	overflow:hidden;
	vertical-align: top;}
strong {font-weight: 600;}
ol { margin:0 0 5px 0;}
ol li {
	list-style:decimal;
	margin-left:20px;}
h1 {font-size: 2.0rem;}
h2 {font-size: 1.8rem;}
h3 {font-size: 1.6rem;}
h1, h2, h3{ font-weight: 600;}
.caution, .attention, .notice, .member, .new {font-weight: 600;}
.caution {
	color: #cc0000;}
.attention {
	color: #009900;}
.notice {
	font-size:1.4rem;
	padding:5px;
	margin-bottom:10px;
	color: #990000;
	background:#eee;
	text-align: center;}
.member {
	font-size:1.4rem;
	padding:5px;
	margin-bottom:10px;
	color: #990000;
	background:#ddd;
	text-align: center;}
.new {
	margin-right: 5px;
	padding-right: 10px;
	padding: 2px;
	font-size: 0.9rem;
	color: #ff6600;}
.uline {
	display: inline;
	background: linear-gradient(transparent 50%, #ffff66 0%);}
.tline { text-decoration: line-through;}

.mb10 {margin-bottom: 10px!important;}
.mb30 {margin-bottom: 30px!important;}
.pcN { display: block!important;}
.spN { display: none!important;}

/* ---------------- HEADER ---------------- */
header {
	position: fixed;
	width: 100%;
	z-index: 1000;
	top: 0;
	left: 0;
	background-color: #fff;}

body.fixed header {
	position: fixed;}
body.fixed .hNav {
	background-color: #fff;}

header.hMenu {
	border-color: #fff;
	background: none;}
header.hMenu, header.hMenu a {
	color: #fff;
	/*color: #000;*/}
/*header.hMenu .hNav div.nav nav ul li a {
	padding: 0 10px;
	background: rgba(255,255,255,0.5);}*/
header.hMenu .hNav div.nav nav ul li a::after {
	background: #ff3300;}

.hNav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*height: 150px;*/
	height: 80px;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;}

.hNav a.logo {
	display: flex;
	margin-left: 5%;
	width: 50px;
	height: 50px;}
.hNav a.logo div {
	width: 50px;
	height: 50px;
	/*margin-right: 15px;*/}

.hNav div.nav nav {
	position: absolute;
	/*top: 65%;*/
	top: 32%;
	right: 20px;
	/*transform: translateX(-50%);*/
	white-space: nowrap;}
.hNav div.nav nav ul {
	display: flex;}
.hNav div.nav nav ul li {
	margin: 0 12px;}
.hNav div.nav nav ul li a {
	display: inline-block;
	position: relative;}
.hNav div.nav nav ul li a::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 1px;
	background: #eee;
	transform: scale(0, 1);
	transform-origin: left top;}
.hNav div.nav nav ul li a.current::after {
	display: none;}
.hNav div.nav nav ul li a:hover::after {
	transform: scale(1, 1);}

/* ---------------- HEADER Memu Scroll ---------------- */
header.on,
header.on a,
header.on2,
header.on2 a {
	color: #222;
	/*font-weight: 600;
	transition: all 0.8s ease;*/}

header.on::before {
	content: '';
	position: absolute;
	height: 50%;
	width: 100%;
	background: linear-gradient(to bottom, rgba(21,31,36,0.02) 0%,rgba(0,0,0,0) 100%);
	left: 0;
	top: 100%;
	pointer-events: none;
	z-index: 100;
	/*transition: all 0.7s ease;*/}

header.on .hNav,
header.on2 .hNav {
	height: 80px;
	background-color: #fff;
	opacity: 0.9;}

header.on .hNav a.logo,
header.on2 .hNav a.logo {
	/*margin-left: 3.5%;*/
	margin-left: 5%;}

header.on .hNav div.nav div,
header.on2 .hNav div.nav div {
	visibility: hidden;
	opacity: 0;}

header.on .hNav div.nav nav,
header.on2 .hNav div.nav nav {
	top: 32%;}

header.on .hNav div.nav nav ul li a::after,
header.on2 .hNav div.nav nav ul li a::after {
	background: #ff3300;}

/* ---------------- HEADER hamburger ---------------- */
.hNav div.spHum {
	position: relative;
	cursor: pointer;
	margin-right: 30px;}
.hNav div.spHum button {
	display: block;
	width: 26px;
	height: 16px;
	position: relative;
	overflow: visible;}
.hNav div.spHum button span.line {
	position: absolute;
	display: block;
	border-top: 2px solid #fff;
	right: 0;
	width: 100%;
	transition: all 0.2s ease;}

header.hMenu .hNav div.spHum button span.line {
	border-color: #fff;}
body.fixed .hNav div.spHum button span.line,
header.on .hNav div.spHum button span.line,
header.on2 .hNav div.spHum button span.line {
	border-color: #000;}

div.spHum button span.line:nth-child(1) {
	top: 0;}
div.spHum button span.line:nth-child(2) {
	top: 50%;
	transform: translateY(-50%);}
div.spHum button span.line:nth-child(3) {
	bottom: 0;}
div.spHum button.on span.line:first-child {
	transform: rotate(45deg);
	top: 8px;}
div.spHum button.on span.line:nth-child(2) {
	transform: rotate(-45deg);
	top: 8px;}
div.spHum button.on span.line:nth-child(3) {
	opacity: 0;}

/* ---------------- HEADER SP Menu ---------------- */
div.spMenu {
	visibility: visible;
	opacity: 0;
	width: 100%;
	height: calc(100% - 70px);
	margin-top: 70px;
	transition: opacity 0.5s ease;
	display: block;
	position: fixed;
	z-index: 200;
	left: 0;
	top: -100%;}
div.spMenu.on {
	visibility: visible;
	opacity: 1;
	top: 0;}
div.spMenu .inner {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	overflow: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
	background-color: #fff;
	opacity: 0.9;
	text-align: center;}

div.spMenu ul {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);}
div.spMenu ul li {
	height: 60px;
	font-size: 1.8rem;
	font-weight: 600;}
div.spMenu ul li a { color: #666;}
div.spMenu ul li a:hover { color: #ff3300;}

/* ---------------- MAIN_Top ---------------- */
div.mainvTop {
	position: relative;
	width: 100%;
	height: 250px;
	/*min-height: 100vh;*/
	background: url(../img/top/top_main2021sp.jpg) no-repeat center;
	background-size: cover;}

div.mainvTop div.top_copy {
	position: absolute;
	/*top: 35%;*/
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	width: 500px;}

div.mainvTop div.topFixTopic {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 20px;
	text-align: center;}
div.mainvTop div.topFixTopic a {
	display: inline-block;
	padding: 12px 22px;
	color: #333;
	font-weight: 600;
	background: rgba(255,255,255,0.8);
	border:1px solid #c1e2e4;
	border-radius: 4px;
	box-shadow: 4px 4px 1px #82c5ca;
	text-align: left;}
div.mainvTop div.topFixTopic a:hover {
	opacity: 0.8;}
div.mainvTop div.topFixTopic a p.title{
	display: inline;
	font-size: 1.4rem;
	line-height: 22px;
	/*max-height: 66px;*/
	background:linear-gradient(transparent 60%, #ffff66 0%);
	overflow: hidden;}
div.mainvTop div.topFixTopic a:hover p.title{
	color: #ff3300;}

/* ---------------- MAIN ---------------- */
div.mainv {
	position: relative;
	width: 100%;
	height: 50vh;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url(../img/top/top_main.jpg);
	background-size: cover;
}

div.mainv h1.maintit{
	position:absolute;
	width: 100%;
	bottom: 80px;
	margin: 0 -1px;
	padding: 5px;
	/*font:bold 2.2rem/1.6;*/
	text-align: center;
	color: #ff6600;
	background: rgba(255, 255, 255, 0.8);
	-webkit-transform: rotate(-2deg) skew(-2deg);
	-moz-transform: rotate(-2deg) skew(-2deg);
	-o-transform: rotate(-2deg) skew(-2deg);
	-ms-transform: rotate(-2deg) skew(-2deg);
	transform: rotate(-2deg) skew(-2deg);}

div.mainv h1.maintit_member{
	position:absolute;
	width: 100%;
	bottom: 80px;
	margin: 0 -1px;
	padding: 5px;
	/*font:bold 2.2rem/1.6;*/
	text-align: center;
	color: #000000;
	background: rgba(255, 255, 255, 0.8);
	-webkit-transform: rotate(-2deg) skew(-2deg);
	-moz-transform: rotate(-2deg) skew(-2deg);
	-o-transform: rotate(-2deg) skew(-2deg);
	-ms-transform: rotate(-2deg) skew(-2deg);
	transform: rotate(-2deg) skew(-2deg);}


/* ---------------- CONTENTS ---------------- */
#contents {
	width: 86%;
	margin: 0 auto;}

div.mtitle {
	width: 100%;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
	/*position: relative;*/}
div.mtitle h2.sbtitle{
	/*position:absolute;*?
	width: 100%;
	/*bottom: 80px;*/
	margin: 0 -1px;
	padding: 5px;
	/*font:bold 2.2rem/1.6;*/
	text-align: center;
	color: #0066ff;
	border-top: 1px solid #0066ff;
	border-bottom: 1px solid #0066ff;
	background: rgba(255, 255, 255, 0.8);
	-webkit-transform: rotate(-2deg) skew(-2deg);
	-moz-transform: rotate(-2deg) skew(-2deg);
	-o-transform: rotate(-2deg) skew(-2deg);
	-ms-transform: rotate(-2deg) skew(-2deg);
	transform: rotate(-2deg) skew(-2deg);}

div.tdate {
	display: block;
	width: 90%;
	margin: 0px;
	padding: 0 10px 0;
	font-size: 1.2rem;
	text-align: right;}

/* ---- TOP_blog ---- */
#contents .bloglink {
	font-size: 1.2rem;
	line-height: 20px;
	margin: 10px 0 25px;
	/*padding: 10px 10px;*/
	text-align: left;}

/* ---- TOP_banner ---- */
#contents .bannerlink {
	width: 100%;
	padding-bottom: 15px;
	text-align: center;}
#contents .bannerlink img{
	max-width: 720px;}

/* ---- TOP_Message ---- */
#contents .box_message {
	margin: 60px 0 35px;
	padding: 5px 5px;
	border: solid 1px #ff9933;
	border-radius: 4px;}
#contents .box_message .box_title {
	display: block;
	padding: 0 9px;
	margin: 0;
	font-size: 1.4rem;
	line-height: 20px;
	color: #ff9933;
	font-weight: 600;
	background: #fff;}
#contents .box_message p {
	margin: 0; 
	padding: 5px;
	background: #ffffee;
	border-radius: 4px;
	font-size: 1.2rem;
	line-height: 20px;}

/* ---- TOP_Today ---- */
#contents .box_today {
	position: relative;
	margin: 20px 0 20px;
	padding: 5px;
	border: solid 2px #ff6600;
	border-radius: 4px;}
#contents .box_today .box_title {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10%;
	padding: 0 9px;
	font-size: 1.8rem;
	line-height: 22px;
	color: #ff6600;
	font-weight: 600;
	background: #fff;}

#contents .box_game {
	position: relative;
	margin: 20px 0 20px;
	padding: 5px;
	border: solid 2px #0065cb;
	border-radius: 4px;}
#contents .box_game .box_title-blue {
	position: absolute;
	display: inline-block;
	top: -13px;
	left: 10%;
	padding: 0 9px;
	font-size: 1.8rem;
	line-height: 22px;
	color: #0065cb;
	font-weight: 600;
	background: #fff;}
#contents .box_today p, #contents .box_game p {
	margin: 0;
	padding: 10px;
	background: #ffffee;
	border-radius: 4px;}

/* ---- TOP_News ---- */
div.top_news {
	/*position: relative;*/
	padding: 5px;
	background: #3299ff;
	border-radius: 4px;}
div.top_news .news_tit {
	padding: 2px 10px;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;}
div.top_news .news_list {
	background: #fff;}
div.top_news .news_list a.nlist {
	display: flex;
	justify-content: left;
	align-items: flex-start;
	border-bottom: dotted 1px #666;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;}
div.top_news .news_list a.nlist p.data {
	padding: 0 20px 0 10px;
	font-size: 1.2rem;
	color: #666;}
div.top_news .news_list a.nlist p.title {
	padding-right: 35px;
	font-size: 1.4rem;}

/* ---- TOP_News_member ---- */
div.top_news_member {
	/*position: relative;*/
	padding: 5px;
	background: #ff6600;
	border-radius: 4px;}
div.top_news_member .news_tit {
	padding: 2px 10px;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;}
div.top_news_member .news_list {
	background: #fff;}
div.top_news_member .news_list a.nlist {
	display: flex;
	justify-content: left;
	align-items: flex-start;
	border-bottom: dotted 1px #666;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;}
div.top_news_member .news_list a.nlist p.data {
	padding: 0 20px 0 10px;
	font-size: 1.2rem;
	color: #666;}
div.top_news_member .news_list a.nlist p.title {
	padding-right: 35px;
	font-size: 1.4rem;}

/* ---- News more ---- */
.new_tite {
	position: relative;
	margin-top: 50px;
	padding: 5px 15px 2px;
	color: #0065cb;
	font-size: 1.6rem;
	font-weight: bold;
	background: #fff;
	/*border-top:#666 solid 3px;*/
	border-bottom: #0065cb solid 2px;
	background-size: 4px 4px;}
.new_tite:before {
	content: " ";
	position: absolute;
	top: 100%;
	left: 22px;
	width: 0;
	height: 0;
	border-width: 12px 8px 0 8px;
	/*border-width: 12px;*/
	border-style: solid;
	border-color: transparent;
	border-top-color: #0065cb;}
.new_tite:after {
	content:" ";
	position:absolute;
	top: 100%;
	left: 25px;
	width: 0;
	height: 0;
	border-width: 9px 5px 0 5px;
	border-style: solid;
	border-color: transparent;
	border-top-color: #fff;
	z-index: 1;}

.new_tite_member {
	position: relative;
	margin-top: 50px;
	padding: 5px 15px 2px;
	color: #000000;
	font-size: 1.6rem;
	font-weight: bold;
	background: #fff;
	border-bottom: #000000 solid 2px;
	background-size: 4px 4px;}
.new_tite_member:before {
	content: " ";
	position: absolute;
	top: 100%;
	left: 22px;
	width: 0;
	height: 0;
	border-width: 12px 8px 0 8px;
	/*border-width: 12px;*/
	border-style: solid;
	border-color: transparent;
	border-top-color: #000000;}
.new_tite_member:after {
	content:" ";
	position:absolute;
	top: 100%;
	left: 25px;
	width: 0;
	height: 0;
	border-width: 9px 5px 0 5px;
	border-style: solid;
	border-color: transparent;
	border-top-color: #fff;
	z-index: 1;}

.news_inner {
	margin: 0;}
.news_inner .heading {
	position: relative;;
	height: 40px;
	margin: 25px 0 10px;
	padding: 0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #3299ff;
	line-height: 40px;}
.news_inner .heading .date {
	float: left;
	font-size: 1.2rem;
	padding-left: 20px;}
.news_inner .heading .caption {
	position: absolute;
	right: 0;
	top: 0;
	padding-left: 25px;
	padding-right: 40px;
	background: #3299ff;
	color: #fff;
	font-size: 1.6rem;}
.news_inner .heading .caption:before{
	display: block;
	content: ' ';
	width: 0;
	height: 0;
	overflow: hidden;
	position: absolute;
	right: 99.9%;
	top: 0;
	border: 0 solid transparent;
	border-width: 40px 37px 0 0;
	border-right-color:#3299ff;}

.news_inner_member {
	margin: 0;}
.news_inner_member .heading {
	position: relative;;
	height: 40px;
	margin: 25px 0 10px;
	padding: 0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid #ff6600;
	line-height: 40px;}
.news_inner_member .heading .date {
	float: left;
	font-size: 1.2rem;
	padding-left: 20px;}
.news_inner_member .heading .caption {
	position: absolute;
	right: 0;
	top: 0;
	padding-left: 25px;
	padding-right: 40px;
	background: #ff6600;
	color: #fff;
	font-size: 1.6rem;}
.news_inner_member .heading .caption:before{
	display: block;
	content: ' ';
	width: 0;
	height: 0;
	overflow: hidden;
	position: absolute;
	right: 99.9%;
	top: 0;
	border: 0 solid transparent;
	border-width: 40px 37px 0 0;
	border-right-color:#ff6600;}

div.news_more {
	width: 90%;
	margin: 0 auto 20px;
	text-align: center;}
div.news_more .box_gray {
	display: inline-block;
	text-align: left;
	margin: 5px 0 20px;
	background: #eee;
	border-radius: 4px ;
	padding: 5px 10px;}
div.news_more .box_orange {
	display: inline-block;
	text-align: left;
	margin: 5px;
	background: #ffe8b5;
	border-radius: 4px ;
	padding: 5px 10px;}
div.news_more .box_blue {
	display: inline-block;
	text-align: left;
	margin: 15px 5px;
	background: #cce5ff;
	border-radius: 4px ;
	padding: 5px 10px;}
div.news_more p {
	font-size: 1.4rem;
	margin-bottom: 20px;
	text-align: left;}
div.news_more p.tcenter {
	font-size: 1.4rem;
	margin: 10px 0 0;}
/*div.news_more p.tleft {border: solid 1px red;
	font-size: 1.4rem;
	margin: 0 auto 20px;
	margin-bottom: 20px;
	width: 60%;
	text-align: left;}*/

h3.square {
	position: relative;
	margin: 10px 0 5px;
	padding-left: 25px;
	display: inline-block;}
h3.square:before {
	position:absolute;
	width: 16px;
	height: 16px;
	border-radius: 4px;
	background: #ff6600;
	/*background: #ffe4b5;
	border: 2px solid #ff6600;*/
	left: 0;
	top: 5px;
	content:"";}

h3.checkmark {
	position: relative;
	margin: 10px 0 5px;
	padding-left: 30px;
	display: inline-block;}
h3.checkmark:before,
h3.checkmark:after {
	position:absolute;
	content:"";}
h3.checkmark:before {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: #fff;
	border: 2px solid #ff6600;
	left: 0;
	top: 2px;}
h3.checkmark:after {
	border-left: 3px solid #ff6600;
	border-bottom: 3px solid #ff6600;
	width: 20px;
	height: 6px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left: 5px;
	top: 2px;}

/* ---- Practice ---- */
.practice {
	 position:relative;
	 margin: 50px 0 0;
	 /*padding: 35px 20px 20px;*/
	 padding: 20px 20px 5px;
	 width: 100%;
	 border: solid 1px #0065cb;
	 border-radius: 4px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}
.practice_title {
	position: absolute;
	top: -20px;
	left: 15px;
	padding: 2px 10px;
	color: #0065cb;
	font-size: 1.6rem;
	font-weight: bold;
	border: solid 1px #0065cb;
	background-color: #fff;
	/*transform: rotate(-3deg);*/}

.practice table {
	width: 100%;
	margin: 5px auto 0;
	font-size: 1.4rem;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}
.practice .practice_inner th, .practice .practice_ta01 th {
	width: 15%;
	padding: 2px;
	font-weight: bold;
	border: solid 2px #fff;
	/*background: #ffe8b5;*/
	background: #f2f2f2;
	text-align: center;}
.practice .practice_inner th.stime {
	width: 15%;
	padding: 2px;
	font-weight: bold;
	border: solid 2px #fff;
	border-bottom: solid 2px #eee;
	background: #fff;
	text-align: center;}
.practice .practice_inner td, .practice .practice_ta01 td {
	padding: 2px 10px;
	text-align: left;
	border-bottom: solid 2px #eee;}
.practice .practice_inner tr:last-child td, .practice .practice_ta01 tr:last-child td { border-bottom:none; }
.practice .practice_inner td p, .practice .practice_ta01 td p {
	margin-left: 15px;}

/* ---------------- Activity Staff Recruitment ---------------- */
div.exp {
	position:relative;
	top: -40px;
	margin: 0 auto 10px;}

div.exp p.texp {
	margin: 10px 0 20px;
	text-align: center;}

.google_map {
	position: relative;
	padding-bottom: 75%;
	height: 0;

	overflow: hidden;}
.google_map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;}

table.ta01g {
	width: 100%;}
table.ta01g th {
	width: 15%;
	padding: 10px;
	background: rgba(227, 227, 227, 0.5);
	/*background: #f2f2f2;*/
	border-bottom: solid 1px #ccc;
	/*color: #fff;*/
	text-align: center;}
table.ta01g td {
	border-top: solid 1px #ccc;
	padding: 10px 20px;
	text-align: left;}
table.ta01g tr:last-child td { border-bottom: solid 1px #ccc; }
table.ta01g td.tstaff {
	padding: 10px 20px 10px;}
table.ta01g td p {
	margin-bottom: 10px}

table.ta01o {
	width: 100%;
	margin-bottom: 30px;}
table.ta01o td {
	padding: 10px 20px;
	background: rgba(255, 153, 0, 0.1);
	border: double 3px #ff6600;
	text-align: center;}
table.ta01o td p {
	margin-bottom: 10px}

table td ul.sname {
	width: 90%;
	white-space: nowrap;}
table td ul.sname li {
	display: inline-block;
	vertical-align: top;}
table td ul.sname li:first-child {
	width: 20%;
	padding-right: 60px;}
table td ul.sname li:nth-child(2) {
	width: 70%;}

/* ---------------- Guidance ---------------- */
div.guidance{
	width: 90%;
	margin: 0 auto 50px;
	text-align: left;}

div.guidance p.tit01{
	margin: 0 0 0 20px;
	text-align: left;}
div.guidance ul.tit02{
	padding-left: 35px;
	text-align: left;}

/* ---------- FOOTER Message---------- */
#foot_message {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: auto;
	padding: 10px 20px;
	background: rgba(255,102,0,0.9);
	text-align: center;
	z-index: 50;}
#foot_message .fmtxt{
	color: #fff;
	font-size: 1.3rem;
	line-height: normal;
}

/* ---------------- FOOTER ---------------- */
footer {
	width: 100%;
	/*background-color: #ff6600;*/
	text-align: center;
	margin: 10px 0 100px;
	padding: 6px 0;}
footer .copyright {
	display: inline-block;
	/*margin: 0 auto;*/
	color: #000;
	font-size: 1.3rem;
	border-top: solid 1px #ff6600;}

/* ---------------- PAGETOP ---------------- */
#page-top{
 	display: none;
	width: 40px;
	height: 40px;
	position: fixed;
	right: 15px;
	bottom: 70px;
	background: rgba(255,102,0,0.8);
	opacity: 0.6;
	border-radius: 50%;}
#page-top a{
	position: relative;
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;}
#page-top a::before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f102';
	font-size: 25px;
	color: #fff;
	position: absolute;
	width: 25px;
	height: 25px;
	top: 0;
	bottom: 6px;
	right: 0;
	left: 0;
	margin: auto;
	text-align: center;}


/* ---------------- MORE ---------------- */
.more_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	font-size: 1.2rem;
	color: #333;}
.more_actab input {
	position: absolute;
	z-index: -1;
	opacity: 0;}
.more_actab label {
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	cursor: pointer;
	margin: 0 0 1px 0;
	background: #eee;}
.more_actab .more_actab-content {
	overflow: scroll;
	-webkit-transition: max-height 0.35s;
	transition: max-height 0.35s;
	max-height: 0;
	background: #eee;}
/* :checked */
.more_actab input:checked ~ .more_actab-content {
	max-height: 20em;}
/* Icon */
.more_actab label::after {
	line-height: 3;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 3em;
	height: 3em;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	text-align: center;}
.more_actab input[type=checkbox] + label::after {
	content: '+';}
.more_actab input[type=checkbox]:checked + label::after {
	transform: rotate(315deg);}


	/* ======================== RESPONSIVE ======================== */
	@media screen and (max-width: 900px) {

	body { font-size: 14px; position: relative; overflow-x: hidden;}

		h1 { font-size: 1.9rem;}
		h2 { font-size: 1.6rem;}
		h3 { font-size: 1.4rem;}
		.pcN { display: none!important;}
		.spN { display: block!important;}
		.pc2 { display: none!important;}
		.sp2 { display: block!important;}

		/* ---------------- HEADER sp ---------------- */
		.hNav { height: 70px;}

		.hNav a.logo { margin-left: 30px;}
		.hNav a.logo div { margin-right: 0;}
		.hNav div.nav div {
			position: relative;
			top: 0;
			left: 0;
			transform: translate(0); }
		.hNav div.nav div { padding-bottom: 0; }
		/*.hNav div.nav div svg {
			width: 150px;
			height: 28px;}*/

		header.on .hNav,
		header.on2 .hNav { height: 70px;}
		header.on .hNav a.logo,header.on2 .hNav a.logo { margin-left: 30px;}
		header.on .hNav div.nav div,
		header.on2 .hNav div.nav div {
			display: block;
			width: 150px;
			position: relative;
			visibility: visible;
			opacity: 1;}
		header.on .hNav div.spHum,
		header.on2 .hNav div.spHum { margin-right: 30px;}

		body.fixed .hNav { height: 70px;}
		body.fixed .hNav a.logo {
			opacity: 1;
			pointer-events: none;}
		/*body.fixed .hNav a.logo { opacity: 0; pointer-events: none;}*/
		body.fixed .hNav div.nav div { width: 150px;}

		/* --------------- MAIN_Top sp --------------- */
		div.mainvTop {
		width: 100%;
		height: 70px;
		min-height: 70px;
		background: url(../img/top/top_main2021sp.jpg) no-repeat center;
		background-size: cover;}
		/*div.mainvTop div.top_copy { width: 300px; top: 30%;}
		div.mainvTop div.top_copy { width: 300px;}*/
		div.mainvTop a.scroll.none {bottom: 90px;}

		div.mainvTop div.topFixTopic {
			max-width: inherit;
			right: 10px;
			bottom: 20px;
			width: calc(95% - 20px);}
		div.mainvTop div.topFixTopic a{
			padding: 12px 10px;
			/*display: block;*/}
		div.mainvTop div.topFixTopic a p.title{
			max-height: 22px;
			text-align: center;}


		/* ---------------- MAIN sp ---------------- */
		/*div.mainv {height: calc(50vh - 20px);}*/
		div.mainv {height: calc(30vh - 20px);}
		div.mainv h1.maintit {
			width: 100%;
			max-width: inherit;
			bottom: 30px;
			/*width: calc(100% - 10px);*/}

		div.mainv {height: calc(30vh - 20px);}
		div.mainv h1.maintit_member {
			width: 100%;
			max-width: inherit;
			bottom: 30px;
			/*width: calc(100% - 10px);*/}


		/* ---------------- CONTENTS sp ---------------- */
		#contents {
			width: 94%;
			margin: 0 auto;}

		div.title {}
		div.title h2.sbtitle{
		}

		div.tdate {
			width: 94%;
			display: block;
			margin: 0px;
			padding: 0 10px 0;
			font-size: 1.2rem;
			text-align: right;}

		/* ---- TOP_blog ---- */
		#contents .bloglink {
		}

		/* ---- TOP_Message sp ---- */
		#contents .box_message {
		}
		#contents .box_message .box_title {
		}
		#contents .box_message p {
			margin: 0; 
			padding: 5px;
			background: #ffffee;
			border-radius: 4px;
			font-size: 1.1rem;
			line-height: 14px;}

		/* ---- TOP_Today sp ---- */
		#contents .box_today,
		#contents .box_game {
			position: relative;}
		#contents .box_today .box_title,
		#contents .box_game .box_title-blue {
			position: absolute;
			display: inline-block;
			font-size: 1.6rem;
			line-height: 20px;
			left: 10px;}
		#contents .box_game {
			border: solid 2px #0065cb;
		}
		#contents .box_game .box_title-blue {
			color: #0065cb;
		}
		#contents .box_today p,
		#contents .box_game p {
			margin: 5px 0 0;
			padding: 5px;
			font-size: 1.4rem;
			line-height: 24px;}

		/* ---- TOP_News sp ---- */
		div.top_news{
			padding: 5px;
			background: #3299ff;}
		div.top_news div.news_tit{
			font-size: 1.6rem;}
		div.top_news .news_list {
			background: #fff;}
		div.top_news .news_list a.nlist {
			display: block;
			justify-content: normal;
			white-space: normal;}
		div.top_news .news_list a.nlist p.data{
			margin: 10px 0 0;
			padding: 0 5px;
			font-size: 1.2rem;
			line-height: 15px;}
		div.top_news .news_list a.nlist p.title{
			margin: 0;
			padding: 0 5px;
			font-size: 1.4rem;
			line-height: normal;}

		div.top_news_member{
			padding: 5px;
			background: #ff6600;}
		div.top_news_member div.news_tit{
			font-size: 1.6rem;}
		div.top_news_member .news_list {
			background: #fff;}
		div.top_news_member .news_list a.nlist {
			display: block;
			justify-content: normal;
			white-space: normal;}
		div.top_news_member .news_list a.nlist p.data{
			margin: 10px 0 0;
			padding: 0 5px;
			font-size: 1.2rem;
			line-height: 15px;}
		div.top_news_member .news_list a.nlist p.title{
			margin: 0;
			padding: 0 5px;
			font-size: 1.4rem;
			line-height: normal;}

		/* ---- News more ---- */
		.new_tite {
		}
		.new_tite:before {
		}
		.new_tite:after {
		}

		.new_tite_member {
		}
		.new_tite_member:before {
		}
		.new_tite_member:after {
		}

		.news_inner,.news_inner_member {
			margin: 0;}
		.news_inner .heading,.news_inner_member .heading {
			position: relative;
			margin: 25px 0 15px;}
		.news_inner .heading .caption,.news_inner_member .heading .caption{
			position: absolute;
			/*margin-top: -60px;*/
			padding-right: 5px;
			font-size: 1.4rem;
			text-align: left;}
		.news_inner .heading .caption:before,.news_inner_member .heading .caption:before{
			border-width: 40px 20px 0 0;}
		.news_inner .heading .date,.news_inner_member .heading .date{
			float: none;
			display: block;
			font-size: 1.1rem;
			padding-left: 10px;}

		div.news_more {
			width: 100%;
			margin: 0;
			padding: 0 10px 0;
			/*background: #fafafa;*/
			text-align: left;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;}
		div.news_more .box_gray {
			margin-bottom: 5px;
			padding: 5px 10px;}
		div.news_more .box_orange {
			margin-bottom: 5px;
			padding: 5px 10px;}
		div.news_more .box_blue {
			margin-bottom: 5px;
			padding: 5px 10px;}
		div.news_more p {
			font-size: 1.4rem;
			line-height: normal;
			margin: 0 0 30px 5px;}
		div.news_more p.tcenter {
			font-size: 1.4rem;
			text-align: center;
			margin-bottom: 10px;}

		h3.square {
			margin:0 0 5px;
			padding-left: 25px;}
		h3.square:before {}

		h3.checkmark {
			margin: 0 0 5px;
			padding-left: 30px;}
		h3.checkmark:before,
		h3.checkmark:after {}
		h3.checkmark:before {}
		h3.checkmark:after {}

		/* ---- Practice sp ---- */
		.practice {
			 margin: 50px 0 0;
	 		padding: 20px 5px 5px;}
		.practice_title {
			font-size: 1.6rem;}

		.practice table {}
		.practice .practice_inner th {
			width: 20%;}
		.practice .practice_inner th.stime {
			width: 20%;
			border: solid 2px #fff;
			background: #fff;}
		.practice .practice_inner td {font-size: 1.2rem;}
		.practice .practice_inner  tr:last-child td{}
		.practice .practice_inner td p {}

		.practice table.practice_ta01 {
			width: 100%;
			margin-bottom: ０;}
		.practice table.practice_ta01 th {
			padding: 5px 20px;
			border-bottom: none;
			text-align: center;}
		.practicetable.practice_ta01 tr:last-child { border-bottom: none;}

		.practice table.practice_ta01 th,
		.practice table.practice_ta01 td {
			display: block;
			border-top: solid 1px #ccc;
			border-bottom: 0px;
			width: 100%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;}
		.practice table.practice_ta01 td {
			padding: 10px 6px 20px;
			text-align: left;}
		.practice table.practice_ta01 td p {
			margin-left: 10px;}

		/* ---------------- Activity Staff Recruitment ---------------- */
		div.exp {
			position: static!important;
			margin: 0 auto 0;}
		div.exp p.texp {
			text-align: center;}

		table.ta01g {
			width: 100%;
			margin-bottom: 40px;}
		table.ta01g th {
			padding: 5px 20px;
			border-bottom: none;
			text-align: center;}
		table.ta01g tr:last-child { border-bottom: none;}
		table.ta01g th,
		table.ta01g td {
			display: block;
			border-top: solid 1px #ccc;
			border-bottom: none;
			width: 100%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;}
		table.ta01g td {
			padding: 10px 20px 10px;
			text-align: left;}
		table.ta01g td.tstaff {
			padding: 10px 5px 10px;
			text-align: center;}
		table.ta01g td {
			margin-bottom: 20px;}

		div.txtl {
			text-align: left;}

		table td ul.sname {
			width: 100%;
			margin: 0 auto;
			/*white-space: nowrap;*/}
		table td ul.sname li {
			display: inline-block;
			text-align: left;
			vertical-align: top;}
		table td ul.sname li:first-child {
			width: 25%;
			padding-right: 20px;}
		table td ul.sname li:nth-child(2) {
			width: 70%;}

		/* ---------------- FOOTER sp ---------------- */
		footer {
			/*background-color: #ff6600;*/
			padding: 5px 0;}
		footer div.copyright {
			margin: 0 auto;
			text-align: center;
			color: #000;
			font-size: 1.2rem;}

	}



	@media screen and (max-width: 568px) {
	body { font-size: 12px; position: relative; overflow-x: hidden;}

		h1 { font-size: 1.9rem;}
		h2 { font-size: 1.6rem;}
		h3 { font-size: 1.4rem;}
		.pcN { display: none!important;}
		.spN { display: block!important;}
		.pc2 { display: none!important;}
		.sp2 { display: block!important;}

		/* ---- News more ---- */
		.new_tite {
		}
		.new_tite:before {
		}
		.new_tite:after {
		}

		.news_inner,.news_inner_memeber {
			margin: 0;}

		.news_inner .heading,.news_inner_member .heading {
			position: static;
			height:auto;
			border: none;}

		.news_inner .heading .caption,.news_inner_member .heading .caption{
			position: relative;
			display: block;
			padding: 10px;
			color: #fff;
			font-size: 1.4rem;
			font-weight: bold;
			right: 0;
			text-align: right;
			line-height: 1.3;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			border-radius: 4px;
			z-index:-1;}
		.news_inner .heading .caption:before,.news_inner_member .heading .caption:before{
			position: absolute;
			content: '';
			left: -2px;
			top: -2px;
			border: none;
			border-left: solid 35px #fff;
			border-bottom: solid 40px transparent;
			z-index:-2}
		.news_inner .heading .date,.news_inner_member .heading .date{
			float: none;
			display: block;
			margin: 5px;
			padding-left: 0;
			font-size: 1.1rem;
			line-height: normal;
			text-align: right;}
		div.news_more {
			margin: 0 auto 40px;}

	}


/* ================== add_20231225 ============ */
/* ---------------- Banner ---------------- */
#contents .box_banner {
	text-align: center;}

/* 縮小 */
.zoomOut{
  animation-name:zoomOutAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
  transform: scale(1.5);
  }

  to {
      transform:scale(1);
  }
}


.banner_btn {
  display: inline-block;
  color: #fff;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 2.2rem;
  width: 100%;
  max-width: 400px;
  text-decoration: none;
  border: 2px solid #ff6600;
  border-bottom: 7px solid #ff2200;
  padding: 1em 1em;
  border-radius: 4px;
  text-align: center;
  position: relative;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% auto;
  background-image: linear-gradient(to right, #fff 0%, #fff 50%, #ff6600 50%, #ff6600 100%);
  transition: background-position .8s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transition: background-position .8s cubic-bezier(0.19, 1, 0.22, 1);
}
.banner_btn .exp01 {
   font-size: 1.8rem;
}
.banner_btn .exp02 {
	width: 80%;
	margin: 5px auto;
	padding: 5px;
	font-size: 1.4rem;
	font-family: sans-serif;
	line-height: 130%;
	border: solid 1px #fff;
}
.banner_btn .exp03 {
	font-size: 1.4rem;
	font-family: sans-serif;
	line-height: 130%;
}

	@media screen and (max-width: 900px) {
		.banner_btn {
			width: 80%;
			max-width: 300px;
			font-size: 1.8rem;
		}
		.banner_btn .exp01 {
		   font-size: 1.6rem;
		}
		.banner_btn .exp02 {
			width: 90%;
			margin: 5px auto;
			padding: 5px;
			font-size: 1.4rem;
			font-family: sans-serif;
			line-height: 130%;
			border: solid 1px #fff;
		}
		.banner_btn .exp03 {
			font-size: 1.4rem;
			font-family: sans-serif;
			line-height: 130%;
		}
	}


.banner_btn_arrow {
  display: inline-block;
  padding-left: 0.5em;
}

/* マウスオーバーした際のデザイン */
.banner_btn:hover {
  background-position: 0 0;
  color: #ff6600;
}

.banner_btn:hover .banner_btn-line path ,
.banner_btn:hover .banner_btn-line line {
  stroke: #ff6600;
}