@charset "UTF-8";
/* CSS Document */

html{font-size: 6.25%; scroll-behavior: smooth;}
body{ font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;}
br.show-pc {display: inline}
br.show-sp {display: none}
img.show-pc {display: block}
img.show-sp {display: none}
@media screen and (max-width: 960px) {
	br.show-pc {display: none}
	br.show-sp {display: inline}
	img.show-pc {display: none}
	img.show-sp {display: block}
}

#container{ width: 100%; height: 100%; box-sizing: border-box; background-color: #fbf9e6;}
p{ font-size: 16rem; line-height: 1.8}
#container a{text-decoration: none; transition: 0.3s;}
#container a:hover{opacity: 0.5;}
#container a.nolink{opacity: 0.3; pointer-events: none; color:#ccc}
small {font-size: 12px; color: #333;}
hr { display: block; border: none; background-color: #333; height: 1px; margin: 10px auto;}
sup {font-size: 50%; vertical-align: text-top}
@media screen and (max-width: 960px) {
	#container p{ font-size: 15rem;}
}

/* header */
#header{display: flex; flex-wrap: nowrap; justify-content: space-between; width: 100%; position: fixed; padding: 0 3vw; box-sizing: border-box; z-index: 999;}
h1.head-left{ display: block; width: 420px; max-width: 36%}
h1.head-left img { display: block; width: 100%; margin-top: 1vw;}
div.head-right{ width: 60%; display: flex; justify-content: flex-end; flex-wrap: wrap;}
div.head-right a{ display: block; padding: 8px 20px; max-width: 50%; margin: 2px 10px; background-color: #e63d77; border: 1px solid #eee; box-sizing: border-box; color: #fff; font-size: 14rem;; font-weight: bold}
div.head-right a:hover{ color: #e63d77; background-color:#fdacc5; opacity: 1!important; }

@media screen and (max-width: 960px) {
	#header{background-color: rgba(255,255,255,0.9); padding: 0 1vw;}
	h1.head-left{ max-width: 48%}
	h1.head-left img { margin-top: 2.5vw;}
	div.head-right a{ display: block; padding: 6px 10px; max-width: 48%; margin: 2px 2% 2px 0; font-size: 11rem;}
}

/* contents */
#contents{}
.box-inner {width: 90%; max-width: 1260px; margin: 0 auto;}

/* Main */
#contents_main{width: 100%; height: 90vh; }
#contents_main h2{ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 50px 0 5px 0; margin: 0 auto; box-sizing: border-box;}
#contents_main h2 img{ display: block; width: auto; height: 100%; max-height: 100%; margin: 0 auto}


.seq{
  position: relative;
  width: 100%;
  height: 100%;           
  overflow: hidden;
}

.seq .frame{
  position: absolute;
  inset: 0; 
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
	clip-path: inset(0 100% 0 0 );
  transition: 0.5s ease; 
}
.seq .frame > img{
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
}
.seq .frame:nth-child(2){
	clip-path: inset(0 0 0 100% );
}
.seq .frame:nth-child(4){
	transform: scale(2);
	clip-path: inset(0 0 0 0);
}

.seq .frame.active{
  opacity: 1;
	clip-path: inset(0 0 0 0);
	transform: scale(1);
}

@media screen and (max-width: 960px) {
	#contents{padding-top: 30px; }
	#contents_main{height: auto;}
	#contents_main h2{ width: 100vw; height: 100vw; padding: 10px 0 }
	#contents_main h2 img{ width: 100%; height: auto; }
}

/* Contents1 */
#contents1{ padding: 60px 0;}
#contents1 article{ width: 50%; margin: 0 auto;}
#contents1 article h3{ text-align: center; margin-bottom: 40px}
#contents1 article h3 img{ display: block; margin: 0 auto; width: 100%}

@media screen and (max-width: 960px) {
	#contents1{ padding: 10px 0;}
	#contents1 article{ width: 100%;}
	#contents1 article h3{ margin-bottom: 20px}
	#contents1 article p{ margin-bottom: 20px}
}

/* Contents2 */

#contents2{ padding: 80px 0;}
dl.box-2clumn {display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30px;}
.box-2clumn dt {display: block; width: 48%; }
.box-2clumn dd {display: block; width: 46%; }

dl.box-2clumn img { margin-bottom: 30px; width: 100%; max-width: 100%;}
dl.box-2clumn p {display: block; font-size: 22rem; margin-bottom: 20px; font-weight: bold; line-height: 1.4}
dl.box-2clumn strong {display: block; font-size: 18rem; margin-bottom: 5px; color: #3c3c3c}
#contents p .text-min {font-size: 85%; vertical-align: baseline; line-height: 1.6; }
.text-red {color: #e63d77; line-height: 1.4 }

#contents2 p img{ display: block; max-width: 100%; margin-left: auto; margin-right: auto;}
#contents2 p.timetable img {max-width: 80%}

@media screen and (max-width: 960px) {
	#contents2{ padding: 40px 0;}
	dl.box-2clumn {display: block; }
	.box-2clumn dt {width: 100%; }
	.box-2clumn dd {width: 100%; }
	#contents2 p.timetable img {max-width: 100%}
}

/* Contents3 */
#contents3{ padding: 80px 0;}
#contents3 h3{ text-align: center; margin: 0 auto 40px auto; font-size: 24px; }
#contents3 h3 img{ display: block; margin: 0 auto; height: 24px; width: auto;}
#contents3 p{ text-align: center; margin: 0 auto 20px auto; font-size: 18rem; line-height: 2}

#contents3 ol{ display: block; padding: 15px; max-width: 70%; margin: 0 auto 40px auto}
#contents3 ol li{ display: block; position: relative; font-size: 14rem; margin-bottom: 5px; padding-left: 16px; box-sizing: border-box;}
#contents3 ol li::before{ content: '■'; color:#c16d87; position: absolute; top:0; left: 0;}

.sankabtn {margin-bottom: 30px}
.sankabtn a {display: block; width: 36%; margin: 0 auto;}
.sankabtn a img {display: block; width: 90%; margin: 0 5%; transition: 0.5s}
.sankabtn a:hover {}
.sankabtn a:hover img {animation: swing-margin 0.9s ease infinite forwards;}

.box-green {background-color: #fff; border: 3px solid #007a8b; border-radius: 10px; padding: 40px 5% 20px 5%; margin: 60px auto; box-sizing: border-box;}
.box-green h4 {display: block; font-size: 24rem; color: #007a8b; text-align: center; margin-bottom: 20px}
.box-green p {text-align: left!important}
#contents3 p.green-date {display: block; background-color: #007a8b; padding: 10px 30px; color: #fff; font-size: 20rem!important; font-weight: bold; box-sizing: border-box;}

/* hover時のanimation */
@keyframes swing-margin {
  0%   { margin: 0 5% 0 5%; }
  20%  { margin: 0 0 0 10%; }
  40%   { margin: 0 5% 0 5%; }
  60%  { margin: 0 0 0 10%; }
  80%   { margin: 0 5% 0 5%; }
  100%   { margin: 0 5% 0 5%; }
}

@media screen and (max-width: 960px) {
	#contents3{ padding: 40px 0; }
	#contents3 h3{ max-width: 90%; margin-bottom: 20px }
	#contents3 p{ text-align: left; font-size: 15rem}
	.sankabtn {margin-bottom: 10px}
	.sankabtn a {width: 90%;}
	p.green-date { padding: 10px 20px; font-size: 18rem!important;}
}

/* Contents4 */
#contents4{ padding: 80px 0;  background-color: #fff;}

dl.detail-2clumn {display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30px; border-bottom: 1px solid #ccc; padding: 30px 0;}
.detail-2clumn dt {display: block; width: 60%; }
.detail-2clumn dd {display: block; width: 38%; }

dl.detail-2clumn img { margin-bottom: 40px; width: 90%;}
dl.detail-2clumn p {display: block; font-size: 18rem; margin-bottom: 10px}

h4.title_redsub { display: block; color: #d2533c; font-size: 18rem; margin-bottom: 5px;}
h4.title_red { display:inline-block; background-color: #d2533c; color: #fff; font-size: 24rem; margin-bottom: 20px; padding: 4px 10px; letter-spacing: 2px; line-height: 1.2}
h4.title_green { display:inline-block; background-color: #007a8b; color: #fff; font-size: 24rem; margin-bottom: 20px; padding: 4px 10px; letter-spacing: 2px; line-height: 1.2}
p.toudansya {display: block; position: relative; padding-left: 80px; }
p.toudansya strong {display: inline-block; position: absolute; top:0; left: 0}
p.box-online {display: block; border: 2px solid #007a8b;  padding: 20px; margin: 20px auto}
p.box-online strong {display: block; color: #007a8b; font-size: 22rem;}
p.box-online a {display: inline-block; background-color: #007a8b; color: #fff; padding: 3px 25px 3px 15px; font-size: 16px; font-weight: bold; clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%); margin: 10px 0}

.esports h3 { display: block; background: url("../img/esports_01.png") no-repeat center bottom / 100% auto; width: 100%; min-height:7.2vw; }
.esports h3 img { display: block; width: 30vw; height: auto; margin: 0 auto 0 auto; }
.esports-2clumn { background-image: url("../img/esports_02.png"); background-repeat: repeat-y; background-size: 100% auto;
padding: 20px 5% 5px 5%; display: flex; justify-content: space-around; flex-wrap: wrap;}
.esports-2clumn p {width: 50%; font-size: 20rem}
.esports-2clumn img {width: 35%;}
.esports::after {content: ''; display: block; background: url("../img/esports_03.png") no-repeat center top / contain; width: 100%; height:120px}

@media screen and (max-width: 960px) {
	#contents4{ padding: 40px 0 10px 0; }
	dl.detail-2clumn {display: block; }
	.detail-2clumn dt {width: 100%; }
	.detail-2clumn dd { width: 100%; }
	dl.detail-2clumn h4 { display: block;}
	dl.detail-2clumn img { display: block; margin: 0 auto 10px auto; width: 90%;}
	
	.esports h3 { height: 11vw}
	.esports h3 img { width: 70vw; height: auto; margin: 0 auto}
	.esports-2clumn { padding: 20px 5% 10px 5%; display: block;}
	.esports-2clumn p {width: 90%; margin: 0 auto}
	.esports-2clumn img { display: block; width: 90%; margin: 10px auto}
}

/* Contents5 */
#contents5{ padding: 80px 0; }
#contents5 h3{ text-align: center; margin: 0 auto 40px auto;}
#contents5 h3 img{ display: block; margin: 0 auto; height: auto; width: 520px; max-width: 90%}
#contents5 p{ text-align: center; margin: 0 auto 40px auto;}
@media screen and (max-width: 960px) {
	#contents5{ padding: 40px 0; }
	#contents5 p img{ max-width: 60%}
}
/* Footer */
#footer{display: block; width: 100%; text-align: center; color: #fff; background-color: #007a8b; padding: 60px 20px 40px 20px; box-sizing: border-box;}
#footer p{display: block; font-size: 15rem; margin-bottom: 10px; text-align: left; line-height: 1.5}

.foot_2clumn {display: flex; justify-content: space-between; flex-wrap: wrap;}
.foot_2clumn div {margin: 20px 0; width: 60%;}
.foot_2clumn div img {display: block; max-width: 360px; margin: 0 auto 10px 0}

ul.bana_area { width: 30%; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; margin:30px auto 30px auto;}
ul.bana_area li {width: 48%; margin: 0 1% 15px 1%;}
ul.bana_area li a {display: block; border: 1px solid #ccc;}
ul.bana_area li img {width: 100%;}

ul.sns { width: 90%; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin:0 auto 30px auto;}
ul.sns li {width: 36px; margin: 0 1% 5px 1%;}
ul.sns li a {display: block; width: 36px; height: 36px; color: #fff; line-height: 36px; border-radius: 36px;}
ul.sns li a img {width: 100%;}

.syusai {display: block; position: relative; padding-left: 50px;}
.syusai::before {content: '主催：'; display: block; position: absolute; top: 0; left: 0;}
.kyoryoku {display: block; position: relative; padding-left: 50px;}
.kyoryoku::before {content: '協力：'; display: block; position: absolute; top: 0; left: 0;}

p#copy {font-size: 11rem; text-align: center}
@media screen and (max-width: 960px) {
	#footer{padding: 20px 0; }
	#footer p{font-size: 13rem;}
	.foot_2clumn div {width: 100%;}
	
	ul.bana_area { width: 100%; justify-content: space-between; margin:30px auto 30px auto;}
	ul.bana_area li {width: 48%;}
}

/* スクロール時のアニメーション　*/
.fadein {opacity: 0; transition: 1s 0.25s;}
.fade_action {opacity: 1;}



/* 企業リスト */
.link-pdf a {display: block; background-color: #007a8b; color: #fff; padding: 10px 15px; font-size: 16px; margin: 10px auto 30px auto; max-width: 300px; box-sizing: border-box; text-align: center;}
.link-pdf a::before {content: 'PDF'; display:inline-block; font-size: 11px; color: #007a8b; background-color: #fff; padding: 2px 3px 1px 3px; box-sizing: border-box; margin-right: 5px; }

.filter-nav { width: 90%; display: flex; justify-content: center; flex-wrap: wrap;  margin: 0 auto 30px auto}
.filter-nav a { display: block; background-color: #bbb; color: #fff; text-align: center; font-weight: bold; font-size: 16rem; padding: 8px 2px; line-height: 1.1; box-sizing: border-box; width: 19%; margin: 0 auto 10px auto; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); border: 1px solid #bbb; transition: 0.5s;}
.filter-nav a:hover { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0px), calc(100% - 0px) 100%, 0 100%); border: 1px solid #e63d77; }
.filter-nav a.btn-active { background-color: #e63d77}

.icon-detail{}
.icon-detail h4{ display: block; text-align: center; font-size: 16rem; margin: 0 auto 20px auto}
ul.icon-list { display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0 auto 40px auto}
ul.icon-list li { display: block; width: 48%; text-align: left; font-size: 14rem; margin-bottom: 10px;}
ul.icon-list li span { display: inline-block; background-color: #fff; padding: 3px 2px; line-height: 1.1; box-sizing: border-box; font-size: 11rem; margin: 0 3px 3px 0; text-align: center; margin-right: 5px; min-width: 80px;}
ul.icon-list li a{ display: inline-block; margin-left: 5px; color: #007a8b; text-decoration: underline!important}

ul.list-kigyou{ display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;}
ul.list-kigyou li{ display: block; width: 48%; background-color: #fff; box-sizing: border-box; box-shadow: 0 8px 18px rgba(0,0,0,0.3); margin-bottom: 3vw; position: relative; padding: 30px 0 40px 0; min-height: 400px;}
ul.list-kigyou li h5{ font-size: 20rem; color: #007a8b; width: 92%; margin: 0 auto 10px auto; }

.kigyou-icon{width: 92%; margin: 0 auto 10px auto; }
.kigyou-icon span{ display: inline-block; background-color: #fff; padding: 2px 4px; line-height: 1.1; box-sizing: border-box; font-size: 11rem; margin: 0 3px 3px 0;}
.icon-green{color: #009aa3; border: 1px solid #009aa3;}
.icon-purple{color: #9c549d; border: 1px solid #9c549d;}
.icon-pink{color: #ea6da4; border: 1px solid #ea6da4;}
.icon-blue{color: #5aa7dd; border: 1px solid #5aa7dd;}
.icon-yellow{color: #bf9643; border: 1px solid #bf9643;}
.icon-lime{color: #5ea565; border: 1px solid #5ea565;}

ul.list-kigyou li dl{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 92%; margin: 0 auto 20px auto; }
ul.list-kigyou li dl dt{ display: block; width: 44%;}
ul.list-kigyou li dl dd{ display: block; width: 54%; max-height: 230px;}
ul.list-kigyou li dl dd span{ display: flex; width: 100%; height: 100%; align-items: center; }
ul.list-kigyou li dl dd span img{ display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; margin: 0 auto}

ul.list-kigyou li h4{ display: block; font-size: 22rem; margin: 10px 0; line-height: 1.4 }
#contents5 p.gyousyu { display: block; text-align:left; margin: 0; font-size: 14rem; }
#contents5 p.kinmuchi {display: block; text-align:left; margin: 0 0 5px 0;font-size: 14rem; }
#contents5 p.linkurl {display: block; text-align:left; margin: 0; }
#contents5 p.linkurl a {color: #007a8b; text-decoration: underline}

.kigyou-more {width: 92%; margin: 0 auto 10px auto; max-height: 0px; overflow: hidden; transition: 0.5s;}
.kigyou-more.more-active {max-height: 1000px;}
.kigyou-more::before {content: ''; width: 100%; height: 1px; display: block; background-color: #ccc; margin:5px auto 20px auto; }
#contents5 p.more-read {display: block; text-align:left; margin: 0 0 5px 0; border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px; }
#contents5 p.more-add {display: block; text-align:left; margin: 0; font-size: 13rem;}
#contents5 p.more-add span {color: #007a8b}

ul.list-kigyou li div.kigyou-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 36px; background-color: #007a8b}
ul.list-kigyou li div.kigyou-bottom a { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
ul.list-kigyou li div.kigyou-bottom a::before {content: ''; display: block; width: 20%; height: 50%; background-color: #fff; 
	clip-path: polygon(0 0, 50% 80%, 100% 0, 100% 20%, 50% 100%, 0 20%); transition: 0.5s}
ul.list-kigyou li div.kigyou-bottom a:hover::before {height: 80%;}
ul.list-kigyou li div.kigyou-bottom a.open-active {transform: scaleY(-1);}

@media screen and (max-width: 960px) {
	.filter-nav { width: 100%; }
	.filter-nav a { width: 48%; margin-bottom: 5px;}
	
	ul.icon-list { width: 100%; margin: 0 auto 20px auto
	}
	ul.icon-list li { font-size: 13rem; }
	ul.icon-list li span { display: block; }
	
	ul.list-kigyou{ display: block; }
	ul.list-kigyou li{ width: 100%; min-height: 0;}
	ul.list-kigyou li h5{ font-size: 16rem; }
	ul.list-kigyou li dl dt{ width: 54%;}
	ul.list-kigyou li dl dd{ width: 42%; max-height: 230px;}
	ul.list-kigyou li h4{ font-size: 18rem;}
	#contents5 p.gyousyu { font-size: 13rem;}
	#contents5 p.kinmuchi {font-size: 13rem;}
	#contents5 p.linkurl {font-size: 13rem;}
}