@charset "utf-8";
/* CSS Document */
* {
	margin:0;
	padding:0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	box-sizing:border-box;
}
body {
	overflow-x:hidden;
}
img {
	width:100%;
}
li {
	list-style:none;
}
a {
	text-decoration:none;
	color:inherit;
}
section {
	position:relative;
}
.wrapper {
	margin:0 auto;
	width:90%;
	max-width:900px;
}
.w80 {
	margin: 0 auto;
	width:80%;
}
.purple {
	color:#6D17CC;
}

.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition : all 1s;
}
.fadein-r {
    opacity : 0;
    transform : translate(100px, 0);
    transition : all 1s;
}
.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}
.left {
	float:left;
}
.right {
	float:right;
}

.pc {
}
.sp {
	display:none;
}

video {
	margin:2em 0;
	width:100%;
}
@media screen and (max-width: 768px) {
	.pc {
		display:none;
	}
	.sp {
		display:block;
	}
}


header#navbar {
	padding:2em;
	width:300px;
	height:100%;
	background:#333;
	border-bottom:none;
	position:fixed;
	top:0;
	left:0;
	z-index:9998;
	opacity:1;
	transition:transform 0.3s;
	transform:translateX(-270px);
}
header#navbar.open {
	transform:translateX(0);
}
header#navbar div.navbtn {
	content:"";
	width:40px;
	height:100%;
	display:block;
	cursor:pointer;
	position:absolute;
	top:0;
	right:0;
	z-index:9998;
	transition:all 0.5s;
}
header#navbar div.navbtn:hover {
	background:#444;
}
header#navbar div.navbtn::after {
	content:"";
	margin:auto;
	width:15px;
	height:15px;
	border-top:1px solid #FFF;
	border-right:1px solid #FFF;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
	left:0;
	transition:all 0.5s;
	transform:rotate(45deg);
}
header#navbar div.navbtn.open::after {
	transform:rotate(585deg);
}
header#navbar div.wrapper {
	padding-top:10px;
	position:relative;
}
header#navbar h1 {
	padding:0;
}
header#navbar ul {
	margin-top:100px;
}
header#navbar ul li {
	padding:1em;
	display:block;
}
header#navbar ul li a {
	padding:1em 0;
	color:#FFF;
	font-size:13px;
	font-weight:bold;
	position:relative;
	transition: all 0.5s;
}
header#navbar ul li a::after {
	content:"";
	width:100%;
	height:2px;
	background:#333;
	position:absolute;
	bottom:0.5em;
	left:0;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: all 0.5s;
}
header#navbar ul li a:hover {
	color: #FFF;
	transform:scale(1.2) translate(0.5em,-0.5em);
}
header#navbar ul li a:hover::after {
	transform: scale(1,1);
	background:#FFF;
}

section#top {
	padding:0 !important;
	height:100%;
	border-bottom:1px solid #CCC;
}

div#desi-bg01 {
	width:560px;
	height:444px;
	position:fixed;
	top:-40px;
	right:0;
	z-index:-1;
	overflow:hidden;
	background-image:url(images/desi-bg01.jpeg);
	background-size:1600px 900px;
	opacity:0.5;
	animation: bgLoop 60s linear infinite;
}
@keyframes bgLoop {
    0% { background-position: 400px 200px;}
   25% { background-position: -400px 700px;}
   50% { background-position: -1200px 200px;}
   75% { background-position: -400px -300px;}
  100% { background-position: 400px 200px;}
}
div#desi-bg01 img {
	width:100%;
	position:absolute;
	top:0;
	right:0;
}
div.contents1 {
	margin-top:35vh;
	position:relative;
}
div.contents1::before {
	content:"";
	display:block;
	padding-top:65vh;
}
div#logo {
	margin:auto;
	width:320px;
	position:absolute;
	top:200px;
	bottom:0;
	left:0;
	right:0;
	z-index:99;
	transition:transform 1.5s;
}
div#logo > img,
div#logo h1 img {
	width:320px;
	position:absolute;
	top:0;
	left:0;
}
div#logo svg {
	width:100%;
}
path {
	fill-opacity: 0;
}
.done path {
	transition:all 3s;
	fill-opacity: 1;
}

#about {
	margin:20px auto;
	width:120px;
}
#about a {
	transition:transform 0.75s;
	position:relative;
}
#about a:hover::after {
	transform:skew(-10deg,0);
}
#about a::after {
	content:"";
	width:0;
	height:1px;
	background:#000;
	position:absolute;
	bottom:0;
	left:0;
}

.h2wrap {
	margin:auto;
	padding:1em;
	max-width:500px;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
h2 {
	padding-bottom:0.5em;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size:30px;
	letter-spacing:0.03em;
}
h2 span {
	font-size:80%;
	font-family:inherit;
}
.h2wrap p {
	padding-top:1em;
	padding-left:0.2em;
	color:#CCC;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:14px;
}
.hr01 {
	width:100%;
	min-width:420px;
	height:1px;
	position:absolute;
	top:60px;
	left:0;
}
@media screen and (max-width: 768px) {
	div#logo {
		left:30px;
	}
	.h2wrap h2 {
		padding-left:30px;
		font-size:26px;
	}
	.h2wrap p {
		padding-left:30px;
		font-size:12px;
	}
	.hr01 {
		top:55px;
	}
}
@media screen and (max-width: 480px) {
	.h2wrap {
		padding-top:1em;
		padding-bottom:1em;
	}
	.h2wrap h2 {
		font-size:20px;
	}
	.hr01 {
		top:45px;
	}
}



div#ebanner {
	width:380px;
	color:#FFF;
	background:#1cb8cc;
	background:#333;
	position:absolute;
	bottom:15%;
	right:0;
	cursor:pointer;
	z-index:999;
}
div#ebanner a {
	padding:10px;
	width:100%;
	height:100%;
	font-weight:bold;
	color:#FFF;
	display:block;
}
div#ebanner:hover {
	opacity:0.5;
	transition:all 0.5s;
}
div#ebanner_nolink {
	width:280px;
	color:#FFF;
	background:#000;
	background:#1cb8cc;
	position:absolute;
	bottom:15%;
	right:0;
	z-index:999;
}
div#banner-ems {
	height: 310px;
	width: 310px;
	position:absolute;
	bottom:0;
	left:0;
	z-index:199;
	overflow:hidden;
}
div#banner-ems > div {
	overflow:hidden;
}
div#banner-ems a {
	padding:0 50px;
	width:100%;
	height:100%;
	color:#666;
	text-align:center;
	position:absolute;
	bottom:-170px;
	left:-160px;
	transform: skew(-45deg, 45deg);
}
div#banner-ems a span {
	margin-top:0.5em;
	color:inherit;
	font-size:9px;
	line-height:1.2;
	font-weight:bold;
	display:block;
}
div#banner-ems a span span {
	margin-top:0em;
	color:inherit;
	font-size:20px;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

div#banner-ems a img {
	display:block;
}
div#banner-ems::after {
	content:"";
	border: 150px solid #000;
	border-top-color: transparent;
	border-right-color: transparent; 
	height: 0;
	width: 0;
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	z-index:-1;
}
div#banner-ems::before {
	content:"";
	border: 155px solid #DE322E;
	border-top-color: transparent;
	border-right-color: transparent; 
	height: 0;
	width: 0;
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	z-index:-2;
}
@media screen and (max-width: 768px) {
	div#ebanner,
	div#ebanner_nolink {
		width:250px;
	}
}

#desilab {
	padding:150px 0;
	border-top:1px solid #CCC;
	background:rgba(255,255,255,0.8);
}
@media screen and (max-width: 768px) {
	#desilab {
		padding-left:30px;
	}
}
#desilab div.wrapper {
	max-width:500px;
}
#news {
	margin:100px auto 200px auto;
	max-width:500px;
}
.news_title {
	text-align:center;
	color:#6CF;
	border-bottom:1px solid #6CF;
}
#news ul {
	padding:1em 0;
	border-bottom:1px solid #6CF;
}
#news ul li {
	margin:1em 0;
	height:90px;
	font-size:0.8em;
	line-height:1.3;
	border:1px solid #CCC;
	overflow:hidden;
	position:relative;
	display:flex;
}
#news ul li:hover {
	opacity:0.5;
}
#news ul li a {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
#news ul li div.news_l {
	padding:0;
	width:40%;
	overflow:hidden;
	background:#000;
}
#news ul li div.news_l img {
	transition:.5s all;
}
#news ul li:hover div.news_l img {
	transform:scale(1.1,1.1);
}
#news ul li div.news_r {
	padding:1em;
	width:60%;
	color:#FFF;
	background:#666;
}
#news ul li div.news_r span {
	font-size:80%;
	font-style:italic;
	color:#CCC;
}



#desilab div.sp p {
	margin:2em 0;
	font-size:16px;
	line-height:2em;
}
a.linkbtn {
	margin:100px auto 0 auto;
	padding:20px 1em;
	color: #999;
	font-size:100%;
	text-align: center;
	text-decoration: none;
	line-height:1em;
	background-color: #FFF;
	border: 1px solid #999;
	outline: none;
	display: block;
	position: relative;
	z-index: 2;
}
a.linkbtn::before,
a.linkbtn::after {
	width: 100%;
	height: 50%;
	background-color: #FFF;
	position: absolute;
	left: 0;
	z-index: -1;
	display: block;
	content: '';
}
a.linkbtn::before {
	top: 0;
}
a.linkbtn::after {
	bottom: 0;
}
a.linkbtn,
a.linkbtn::before,
a.linkbtn::after {
	-webkit-transition: all .5s;
	transition: all .5s;
}
a.linkbtn:hover {
	background-color: #fff;
	border-color: #3d64a6;
	color: #3d64a6;
}
a.linkbtn:hover::before,
a.linkbtn:hover::after {
	height: 0;
	background-color: #3d64a6;
}
a.linkbtn > span::after {
	content:"";
	margin:auto;
	width:8px;
	height:8px;
	border-top:1px solid #CCC;
	border-right:1px solid #CCC;
	display:block;
	position:absolute;
	right:1em;
	top:0;
	bottom:0;
	transition:transform 0.4s;
	transform:rotate(45deg);
}
a.linkbtn:hover > span::after {
	transform:rotate(405deg);
}
a.linkbtn span span {
	font-size:80%;
}

#desilab2 {
	padding:150px 0;
	background:rgba(250,250,250,1);
	transform:skew(0,-5deg);
}
@media screen and (max-width: 768px) {
	#desilab2 {
		padding-left:30px;
	}
}
#desilab2 div.wrapper {
	padding-bottom:100px;
	max-width:700px;
	line-height:2em;
	transform:skew(0,5deg);
}
.mb-5 {
	margin-bottom:5em;
}
.al-c {
	text-align:center;
}
#desilab2 p.notice {
	font-size:80%;
}
div.desi-icon {
	margin:4em 0;
	overflow:hidden;
}
div.desi-icon table {
	margin:4em 0;
	padding:1em;
	border-collapse:collapse;
}
div.desi-icon th {
	width:40%;
}
div.desi-icon td {
	padding:1em;
	font-size:90%;
	font-weight:bold;
	line-height:1.5em;
}
div.exam {
	padding:1em;
	width:100%;
	border:5px solid #83ccd0;
}
div.exam p {
	text-align:center;
}
div.exam p span {
	font-size:80%;
}
div.exam p.m1em {
	margin:1em 0 0 0;
	font-weight:bold;
}
div.exam p.m1em span {
	font-size:140%;
}


section#esports {
	margin-top:-100px;
	position:relative;
}

#espo1 {
	padding:20px 0;
	background:#000;
	background-image:url(images/esportsflyer.png);
	background-size:cover;
	background-repeat:no-repeat;
	position:relative;
}
#espo1 div.wrapper {
	width:90%;
	max-width:600px;
}
#espo2 {
	padding:50px 0 120px 0;
	position:relative;
	background:rgba(255,255,255,1);
}
@media screen and (max-width: 768px) {
	#espo1,
	#espo2 {
		padding-left:30px;
	}
}
#espo2::before {
	content:"";
	margin:auto;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 30px solid #3d64a6;
	position:absolute;
	top:0;
	left:0;
	right:0;
}
#espo2 div.wrapper {
	width:90%;
	max-width:500px;
}
#espo2 h2 {
	margin:2em 0;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align:center;
	font-size:16px;
}
h2.time {
	padding:0.2em;
	color:#FFF;
	background:#3d64a6;
}
#espo2 ul {
	margin:30px 0;
}
#espo2 ul.time {
	margin:0 auto 1em auto;
}
#espo2 ul.time li {
	margin-bottom:0.5em;
	padding-left:9em;
	text-indent:-9em;
}
#espo2 p.notice {
	margin-bottom:80px;
	padding-left:1em;
	text-indent:-1em;
	font-size:10px;
}
#espo2 p.notice::before {
	content:"※";
}

#espo2 ul.notice li {
	margin-bottom:0.8em;
	padding-left:2em;
	text-indent:-1em;
	font-size:13px;
}
#espo2 ul.notice li::before {
	content:"▶";
	color:#7a0;
}

.button {
	margin:20px auto;
	padding:10px;
	color: #FFF;
	font-weight:bold;
	text-align: center;
	text-decoration: none;
	background-color: #333;
	border: 2px solid #333;
	outline: none;
	display: block;
	position: relative;
	z-index: 2;
}
.button::before,
.button::after {
	width: 100%;
	height: 50%;
	background-color: #333;
	position: absolute;
	left: 0;
	z-index: -1;
	display: block;
	content: '';
}
.button::before {
	top: 0;
}
.button::after {
	bottom: 0;
}
.button,
.button::before,
.button::after {
	-webkit-transition: all .5s;
	transition: all .5s;
}
.button:hover {
	background-color: #fff;
	border-color: #3d64a6;
	color: #3d64a6;
}
.button:hover::before,
.button:hover::after {
	height: 0;
	background-color: #3d64a6;
}


#espo2 div.exp h2 {
	margin-bottom:0;
}
#espo2 div.exp ul {
	margin-top:0;
}
#espo2 ul.notice2 li {
	margin-bottom:0.8em;
	padding-left:2em;
	text-indent:-1em;
	font-size:13px;
}
#espo2 ul.notice2 li::before {
	content:"▶";
	color:#3d64a6;
}
#espo2 div.exp p.notice {
	padding-left:0;
	text-indent:0;
}
#espo2 div.exp p.notice::before {
	content:"";
}
div#overlay {
	padding:8em 1em;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
	position:absolute;
	top:0;
	left:0;
}
div#overlay p {
	margin-top:2em;
	color:#FFF;
	font-weight:bold;
	text-align:center;
}
#report p {
	margin:1em auto;
	width:80%;
	font-size:80%;
}
#report h3 {
	margin:1em auto;
	width:80%;
}
#report table {
	margin:0 auto 100px auto;
	width:80%;
	border-collapse:collapse;
}
#report table tr {
}
#report table td {
	padding:0.5em 1em 0.5em 0;
	border:none;
	font-size:80%;
	border-bottom:1px solid #CCC;
}
.openbtn {
	margin-top:100px;
	padding:0.5em 1em;
	font-size:13px;
	cursor:pointer;
	border:1px solid #CCC;
	position:relative;
}
.openbtn::after {
	content:"▼開く";
	margin:auto;
	color:#999;
	font-size:80%;
	position:absolute;
	right:1em;
}
.openbtn.active::after {
	content:"▲閉じる";
}


a.youkou {
	padding-left:1em;
	font-size:12px;
	text-decoration:underline;
	position:relative;
}
a.youkou::before {
	margin-top: -4px;
	content: '';
	width: 6px;
	height: 6px;
	border: 0px;
	border-top: solid 1px #7a0;
	border-right: solid 1px #7a0;
	transform: rotate(45deg);
	position: absolute;
	top: 50%;
	left: 0;
}


#overview {
	margin-top:-50px;
	margin-bottom:100px;
	padding:100px 0 150px 0;
	background:#FBF5E3;
	transform:skew(0,-5deg);
	position:relative;
	z-index:99;
}
@media screen and (max-width: 768px) {
	#overview {
		padding-left:30px;
	}
}
#overview .wrapper {
	width:90%;
	max-width:500px;
	transform:skew(0,5deg);
}
#overview .wrapper h1 {
	margin:2em auto;
	max-width:380px;
}
#overview table {
	margin-bottom:2em;
	width:100%;
	font-size:14px;
}
#overview table th,
#overview table td {
	padding:0.5em;
	text-align:left;
	vertical-align:top;
	font-weight:normal;
	border-bottom:2px solid #FFF;
}
#overview table th {
	width:7em;
	background:#FFF;
}
#overview table td span {
	margin-left:0.5em;
	font-size:10px;
}
#overview ul.notice li {
	padding-left:2em;
	text-indent:-2em;
	font-size:10px;
}

#policy {
	margin-top:-200px;
	padding:300px 0 100px 0;
	font-size:13px;
	background:rgba(255,255,255,0.9);
	position:relative;
}
@media screen and (max-width: 768px) {
	#policy {
		padding-left:30px;
	}
}
#policy .wrapper {
	max-width:500px;
}
#policy h1 {
	margin-bottom:2em;
	color:#CCC;
	text-align:right;
	font-weight:normal;
	border-bottom:1px solid #CCC;
}
#policy h2 {
	margin:4em 0 1em 0;
	font-size:16px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#policy p {
	margin-bottom:0.5em;
	padding-left:1em;
	text-indent:1em;
}
#policy ul {
	padding-left:1em;
}
#policy ul li {
	margin-bottom:0.5em;
	padding-left:1em;
	text-indent:-1em;
}
#policy ul.pp1 li::before {
	content:"▶";
}
#policy ul.pp2 {
	margin-bottom:1em;
}
#policy div.policy {
	padding-left:1em;
}
#policy h3 {
	margin-top:1em;
	font-size:13px;	
}
#policy div.sign {
	padding:2em 0;
	text-align:right;
}
#policy h4 {
	font-weight:normal;
}


#pagetop {
	width:50px;
	height:50px;
	color:#d70b23;
	text-align:center;
	font-weight:bold;
	line-height:48px;
	background:#333;
	border:2px solid #333;
	cursor:pointer;
	position:fixed;
	bottom:50px;
	right:20px;
	opacity:0.5;
	border-radius:5px;
	z-index:9998;
}
#pagetop::before {
	content:"";
	margin:auto;
	width:15px;
	height:15px;
	border:0px;
	border-top: solid 2px #FFF;
	border-right: solid 2px #FFF;
	transform:rotate(-45deg);
	position: absolute;
	top: 0;
	bottom:0;
	left: 0;
	right:0;
}
#pagetop::after {
	content:"";
	margin:auto;
	width:15px;
	height:15px;
	border:0px;
	border-top: solid 2px #FFF;
	border-right: solid 2px #FFF;
	transform:rotate(-45deg);
	position: absolute;
	top: 15px;
	bottom:0;
	left: 0;
	right:0;
}


#copyright {
	padding:0.3em;
	width:100%;
	color:#999;
	font-size:9px;
	text-align:center;
	background:#EFEFEF;
}

.modal-content {
	width:80%;
	height:100%;
	margin: 0 ;
	background: #000 ;
	position: fixed ;
	top:0;
	right:0;
	display: none ;
	z-index: 9999 ;
	overflow:auto;
}
.modal-content p {
	margin:0;
}
div.modal-close {
	cursor:pointer;
}
div.close {
	width:20px;
	height:20px;
	padding:0.2em;
	line-height:1;
	text-align:center;
	color:#FFF;
	background:#666;
	border-radius:20px;
}
.modal-class {
	cursor:pointer;
}
#modal-overlay {
	z-index:9998 ;
	display: none ;
	position: fixed ;
	top: 0 ;
	left: 0 ;
	width: 100% ;
	height: 120% ;
	background-color: rgba( 0,0,0, 0.25 ) ;
}
#modal-content-01 {
	padding:10%;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color:#FFF;
	background-image:url(images/esportsflyer.png);
	background-size:cover;
}
#modal-content-01 div.pc-wrapper {
	width:600px;	
}

#modal-content-01 div.modal-close {
	width:30px;
	background:#000;
	position:absolute;
	top:10px;
	left:10px;
}



#modal-content-01 h2 {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#modal-content-02 {
	width:320px;
	background:#FBF5E3;
	left:0;
}


.page section {
	padding-top:70px;
	line-height:2.5em;
	position:relative;
}
@media screen and (max-width: 480px) {
	.page section {
		font-size:80%;
	}
}
header {
	width:100%;
	height:70px;
	background:rgba(255,255,255,0.95);
	border-bottom:1px solid #CCC;
	position:fixed;
	z-index:9999;
}
header div.wrapper {
	padding:10px 0;
	position:relative;
}
header h1 {
	margin:0;
	width:150px;
	line-height:0;
	float:left;
}
nav {
	float:right;
}
nav > ul > li {
	margin:25px 1em 10px 1em;
	display:inline-block;
	position:relative;
}
nav > ul > li > a {
	padding:1em 0;
	color:#333;
	font-size:13px;
	font-weight:bold;
	position:relative;
	transition: all 0.5s;
}
nav > ul > li > a::after {
	content:"";
	width:100%;
	height:2px;
	background:#333;
	position:absolute;
	bottom:0.5em;
	left:0;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: all 0.5s;
}
nav > ul > li:hover > a {
	transform:scale(1.0) translate(0.5em,-0.5em);
}
nav > ul > li:hover > a::after {
	transform: scale(1,1);
}
nav > ul > li > ul {
	display:none;
	position:absolute;
	top:120%;
	left:0.4em;
}
nav > ul > li > ul li {
	background:#333;
	border-bottom:1px solid #999;
	transition: all 0.5s;
}
nav > ul > li > ul li a {
	padding:0.8em 3em;
	width:15em;
	color:#ffffff;
	font-size:13px;
	font-weight:bold;
	display:block;
}
nav > ul > li > ul li:hover {
	background:#666;
}
.header-link {
	height:22px;
	background:#333;
	position:absolute;
	top:0;
	transition:all 0.5s;
}
.header-link::after {
	content:"";
	position:absolute;
	left:100%;
	border-top:11px solid #333;
	border-right:11px solid transparent;
	border-bottom:11px solid transparent;
	border-left:11px solid #333;
	transition:all 0.5s;
}
.header-link:hover {
	background:#999;
}
.header-link:hover::after {
	border-top:11px solid #999;
	border-left:11px solid #999;
}
#header-policy {
	right:120px;
}
#header-contact {
	right:0;
}
.header-link a {
	padding:0 1em;
	color:#fff;
	font-size:11px;
	font-weight:bold;
	display:inline-block;
}

#navbar-sp {
	width:100%;
	background:#FFF;
	position:fixed;
	top:0;
	z-index:9998;
	opacity:0.95;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}
#navbar-sp div.wrapper {
	padding:10px 0;
	overflow:hidden;
}
#navbar-sp h1 {
	float:left;
}

#drawer-checkbox {
  display: none;
}
#drawer-icon {
  margin:auto;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: inline-block;
  position:absolute;
  top:0;
  bottom:0;
  right:5%;
  z-index:9999;
}
#drawer-icon span {
  margin:auto;
  width: 100%;
  height: 3px;
  background:  #333;
  border-radius: 4px;
  display: block;
  position: absolute;
  top: 0;
  bottom:0;
  right:0;
  transition: all 0.3s ease-in-out 0s;
}
#drawer-icon span:before,
#drawer-icon span:after {
  content: "";
  margin: -8% 0 0 -50%;
  width: 100%;
  background: #333;
  border-radius: 4px;
  display: block;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: rotate(0);
  -webkit-transform: rotate(0);
  transition: all 0.3s ease-in-out;
}
#drawer-icon span:before {
  margin-top: -12px;
}
#drawer-icon span:after {
  margin-top: 10px;
}
#drawer-checkbox:checked ~ #drawer-icon span {
  background: rgba(51, 51, 51, 0);
}
#drawer-checkbox:checked ~ #drawer-icon span::before,
#drawer-checkbox:checked ~ #drawer-icon span::after {
  content: "";
  margin: -8% 0 0 -42%;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
}
#drawer-checkbox:checked ~ #drawer-icon span::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
#drawer-checkbox:checked ~ #drawer-icon span::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#drawer-close {
  display: none;
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: all 0.3s ease-in-out 0s;
}
#drawer-checkbox:checked ~ #drawer-close {
  display: block;
  opacity: 0.3;
}

#drawer-content {
  overflow: auto;
  width: 300px;
  max-width: 70%;
  height: 100%;
  background: #333;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: all 0.3s ease-in-out 0s;
  transform: translateX(-100%);
}
#drawer-checkbox:checked ~ #drawer-content {
  transform: translateX(0);
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.16);
}
#drawer-content ul {
}
#drawer-content ul li {
	width:100%;
}
#drawer-content ul li a {
	padding:1em;
	padding-left:3em;
	width:100%;
	height:100%;
	color:#FFF;
	font-weight:bold;
	display:block;
	position:relative;
}
#drawer-content ul li a:hover {
	background:#666;
}
#drawer-content ul li a:after {
	content:"";
	margin:auto;
	width:0.5em;
	height:0.5em;
	border-top:2px solid #FFF;
	border-right:2px solid #FFF;
	position:absolute;
	top:0;
	bottom:0;
	left:1.5em;
	transform:rotate(45deg);
}



.page section div.page-title {
	width:100%;
	height:280px;
	text-align:center;
	line-height:0;
	background:#F7EFFE;
	background-image:url(images/espo1.jpg);
	background-position:center;
	background-size:auto 280px;
	background-repeat:no-repeat;
}
.page section div#title-espo {
	background-image:url(images/esporecruit.png);
}
.page section div#title-learning {
	background-image:url(images/learning.jpg);
}
@media screen and (max-width: 768px) {
	.page section div.page-title {
		height:190px;
		background-size:auto 190px;
	}
}
@media screen and (max-width: 480px) {
	.page section div.page-title {
		height:140px;
		background-size:auto 140px;
	}
}
.page section div.wrapper {
	padding:80px 1em;
}
.page section div.wrapper h1 {
	margin-bottom:2em;
	padding:0.5em 0;
	padding-left:55px;
	color:#6D17CC;
	color:#1cb8cc;
	font-family:inherit;
	font-size:24px;
	line-height:normal;
	font-weight:normal;
	border-bottom:3px solid #6D17CC;
	border-bottom:3px solid #1cb8cc;
	position:relative;
}
.page section div.wrapper h1 span {
	font-size:80%;
}
.page section div.wrapper h1::before {
	content:"";
	width:32px;
	height:32px;
	background:#E3CBFC;
	background:#A6EEE3;
	position:absolute;
	top:12px;
	left:12px;
}
.page section div.wrapper h1::after {
	content:"";
	width:24px;
	height:24px;
	border:1px solid #C79AF8;
	border:1px solid #58E2ED;
	position:absolute;
	top:0;
	left:0;
}
div.line-l {
}
div.w700 {
	margin:0 auto;
	max-width:700px;
}
dl.recruitment {
	margin:6em auto 3em auto;
	max-width:700px;
	font-size:90%;
}
dl.recruitment span {
	font-size:80%;
}
dl.recruitment dt {
	margin-bottom:0.5em;
	color:#6D17CC;
	color:#1cb8cc;
	font-weight:bold;
	border-bottom:1px solid #CCC;
}
dl.recruitment dd {
	margin:0 0 3em 2em;
}

div#festa {
	margin:5em auto 10em auto;
	max-width:400px;
}

.page div#espo2 {
	margin:0 auto;
	max-width:550px;
	line-height:1.5em;
}
.page div#espo2::before {
	content:"";
	margin:auto;
	width: 0;
	height: 0;
	border:none;
	position:absolute;
	top:0;
	left:0;
	right:0;
}


ul.list1 li {
	margin-bottom:0.5em;
	margin-left:1em;
	text-indent:-1em;
}
ul.list1 li::before {
	content:"▶";
}

dl.espo-vol4 h2 {
	margin-top:5em;
	color:#1cb8cc;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:15px;
}
dl.espo-vol4 h3 {
	margin-top:1em;
	font-size:15px;
}
dl.espo-vol4 dd {
	line-height:1.9;
}
dl.espo-vol4 dd span {
	font-size:95%;
	display:block;
	margin-bottom:1em;
}


ul.gallery {
	margin-top:20px;
	margin-bottom:20px;
	display: flex;
	flex-wrap: wrap;
}
ul.gallery li {
	margin:5px;
	width:calc(25% - 10px);
	position: relative;
}
ul.gallery li:before {
	content: "";
	display: block;
	padding-top: 100%;
}
ul.gallery img{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	object-fit: cover;
}
.lb-details span {
	color:#FFF;
}
@media screen and (max-width:769px) {
	ul.gallery li {
		width:calc(33.33% - 10px);
	}
}
.news-all ul {
	border-bottom:none !important;
}

.provided-img {
	margin-top:2em;
	display:flex;
	gap:0 2%;
}
.provided-img > div {
	width:50%;
}
.provided-img img {
	margin:0;
}
.provided-img p {
	margin:0;
	padding:0;
	font-size:8px;
	line-height:1;
	text-align:right;
}
@media screen and (max-width:769px) {
.provided-img {
	display:block;
}
.provided-img > div {
	margin-bottom:2em;
	width:100%;
}
}

.sponsor-link {
	width:100%;
	padding:1em;
	border:2px solid #1cb8cc;
}
.sponsor-link .nowdate {
	font-size:70%;
	line-height:1;
	text-align:right;
}
.sponsor-link .bannerarea {
	padding-top:1em;
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
	align-items: center;
}
.sponsor-link .bannerarea > div {
	width: 31%;
	margin-bottom:4em;
	display:flex;
	flex-flow: column;
}
.sponsor-link .bannerarea::after {
    content: "";
    display:block;
    width:31%;
}
.bannerbox {
    position: relative;
    width: 100%;
}
.bannerbox::before {
    content:"";
    display: block;
    padding-top: 60%; /* 高さを幅の75%に固定 */
}
.bannerbox img {
	margin:auto;
	position:absolute;
	top:50%;
	bottom:50%;
	left:0%;
	right:50%;
	display:block;
}
.sponsor-link .bannerarea > div div {
	margin-top:1em;
	text-align:center;
	font-size:65%;
	line-height:1;
}
ul.sponsor-list {
	margin:auto 1em;
	font-size:70%;
}
ul.sponsor-list li {
	line-height:1.5;
}
ul.sponsor-list li::before {
	content:"・";
}
@media screen and (max-width:769px) {
.sponsor-link .bannerarea > div {
	width: 45%;
}
.sponsor-link .bannerarea::after {
    width:45%;
}
}


body.ems {
	background:#222;
	color:#FFF;
}
.h1-ems {
	margin:0 auto !important;
	padding:0 0 3em 0 !important;
	max-width:700px;
	border:none !important;
}
.h1-ems::before,
.h1-ems::after {
	display:none;
}
.page-key {
	background:#000;
}
.page-key img {
	margin:auto;
	max-width:1280px;
	display:block;
}
.lead-text {
	margin:auto;
	padding:3em 0;
	max-width:700px;
	font-weight:bold;
	border-top:2px solid #DE322E;
}

p.a-link {
	margin-top:3em;
	line-height:1.8em;
	font-weight:normal;
}
p.a-link a {
	text-decoration:underline;
}
.ems-member {
	margin:5em auto;
	background:#000;
}
.ems-member h2 {
	padding:0.7em 0 0 0;
	font:inherit;
	font-weight:bold;
	text-align:center;
	font-size:24px;
	line-height:1;
}
.ems-member h2 img {
	max-width:400px;
}
.ems-member h2 span {
	color:inherit;
	font-size:50%;
	display:inline-block;
}
p.h2-desc {
	margin:0.5em 0 6em 0;
	color:#666;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size:24px;
	text-align:center;
	line-height:1;
	letter-spacing:0.1em;
	font-weight:bold;
}
div.member-profile {
	margin-bottom:4em;
	line-height:1.5;
	display:flex;
}
div.member-profile div > img {
	max-width:300px;
}
.member-info {
	padding:0 0 0 3em;
	width:70%;
	min-width:50%;
	position:relative;
}
.member-info p.position1 {
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color:#333;
	text-align:right;
	line-height:1;
	font-size:3em;
	position:absolute;
	top:0;
	right:0;
	z-index:1;
}
.member-info p.name1 {
	margin-top:1.5em;
	margin-bottom:0.2em;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size:36px;
	border-bottom:1px solid #FFF;
	border-bottom:2px solid #DE322E;
}
.member-info p.name2 {
	margin-bottom:1em;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color:#999;
}
.member-info p.age {
	margin-bottom:1em;
	font-style:italic;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color:#999;
}
.member-info p.position2 {
	margin-bottom:1em;
	color:#999;
}
.member-info p.history {
}
@media screen and (max-width:769px) {
p.h2-desc {
	margin:0.5em 0 3em 0;
}
div.member-profile div > img {
	min-width:150px;
}
.member-info p.name1 {
	margin-top:0;
	font-size:28px;
}
}
.ems-staff {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between; 
}
.ems-staff::after{
	content:"";
	display: block;
	width:calc(100% / 3 - 3em);
}
.ems-staff div.staff-profile {
	margin-bottom:4em;
	width:calc(100% / 3 - 3em);
}
.staff-info p {
	line-height:1.5;
	text-align:center;
}
.staff-info p.name1 {
	margin-bottom:0.2em;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	font-size:24px;
	border-bottom:1px solid #666;
}
.staff-info p.name2 {
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color:#999;
}
.staff-info p.age {
	font-style:italic;
	font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	color:#999;
}
.staff-info p.position2 {
	color:#999;
}
@media screen and (max-width:769px) {
.ems-staff div.staff-profile {
	width:calc(100% / 2 - 3em);
}
.staff-info p.name1 {
	font-size:20px;
}
}
div.ems-sponser {
	background:#FFF;
}
div.ems-sponser p {
	color:#333;
}
div.ems-sponser p.h2-desc {
	color:#999;
}

div.ems-sponser div.sponser-list {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:6em;
}
.ems-sponser div.sponser-item {
	margin-bottom:4em;
	width:calc(100% / 2 - 6em);
}
div.ems-sponser hr {
	border:none;
	border-bottom:1px solid #666;
}
@media screen and (max-width:769px) {
div.ems-sponser div.sponser-list {
	gap:2em;
}
.ems-sponser div.sponser-item {
	width:calc(100% / 2 - 2em);
}
}