@charset "UTF-8";
/* CSS Document */
* {box-sizing: border-box;}
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}
}
/* リリース前 */
#releaseday { display: none; text-align: center; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 999999; background-color: #5dbbbc; padding-top: 32vh;}
#releaseday img { display: block; margin: 20px auto; width: 90%; max-width: 320px;}
#releaseday p { color: #fff; display: block}
#releaseday a { color: #67d1d3; font-size: 11rem; display: inline-block; opacity:0.8;}
.before-release { display: block!important}

#container{ width: 100%; height: 100%; background: #5dbbbc;}
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%; height: 48px; position: fixed; padding: 0 3vw;  z-index: 999;}
h1.head-left{ display: block; width: 35%; height: 100%;}
h1.head-left a { display: flex; justify-content: flex-start; align-items: center; width: auto; height: 100%;}
h1.head-left a img { display: block; height: 70%; width: auto; margin: 0 auto 0 0;}

div.head-right{ width: 64%; display: flex; justify-content: flex-end; flex-wrap: wrap;}
div.head-right a{ display: block; padding: 2% 20px; max-width: 50%; margin: 2px 10px 2px 0; border: 2px solid #333;  color: #111; background-color:#f7b400; font-size: 14rem;; font-weight: bold}
div.head-right a:hover{ color: #fff; background-color:#004da0; opacity: 1!important; }
div.head-right span{ display: flex; justify-content: center; align-items: center; width: auto; height: 100%;}
div.head-right span img{ display: block; height: 70%; width: auto; max-width: 200px; margin: 0 0 0 20px;}

@media screen and (max-width: 960px) {
	#header{background-color: rgba(255,255,255,0.9); padding: 0 1vw;}
	h1.head-left{ width: auto}
	h1.head-left a { height: 100%; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
	h1.head-left a img {height: 45%;}
	div.head-right { align-items: center}
	div.head-right a{ display: flex; justify-content: center; align-items: center; text-align: center; padding: 0 8px; height: 90%; max-width: 36%; margin: 2px 2% 2px 0; font-size: 10.5rem; line-height: 1.2}
	div.head-right span{ width: 22% }
	div.head-right span img{ height: auto; width: 100%; max-width: 200px; margin: 0;}

}

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

/* Main */
#contents_main{width: 100%; max-height: 95vh; background: #5dbbbc url("../img/bg-img.png") repeat center center / auto auto;}
#contents_main h2{ display: block; width: 100%; height: 100%; max-height: 95vh; padding: 11vh 0 6vh 0; margin: 0 auto; opacity: 0;
	background-image: url("../img/main-bg01.png"), url("../img/main-bg02.png"); background-position: center left, center right; background-repeat: no-repeat; background-size: 30vw auto;
	animation: fadeIn 1s ease forwards; animation-delay: 1s;}
#contents_main h2 img{ display: block; width: auto; margin: 0 auto; opacity: 0; animation: fadeIn 1s ease forwards; animation-delay:  1.8s;}
#contents_main h2 img.main-title{ height: 60vh; margin-bottom: 5vh;}
#contents_main h2 img.main-copy{ height: 11vh;}

@keyframes fadeIn{
    from{ opacity: 0;}
    to{ opacity: 1;}
}

@media screen and (max-width: 960px) {
	#contents{padding-top: 30px; }
	#contents_main{height: 100vw;}
	#contents_main h2{ width: 100%; height: 100vw; padding: 12vw 0 0 0; 
		background-image: url("../img/main-bg01.png"), url("../img/main-bg02.png"); 
		background-position: center left -10%, center right -10%; 
		background-repeat: no-repeat; background-size: auto 90%;}
	#contents_main h2 img{  }
	#contents_main h2 img.main-title{height: 62vw; margin-bottom: 5vw;}
	#contents_main h2 img.main-copy{ height: 13vw}
}

/* 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 0 0; background-color: #fff;}
#contents2 h5{ font-size: 16rem; color: #004da0; margin-bottom: 10px;}
#contents2 h4{ font-size: 18rem; line-height: 1.4}
#contents2 h4 strong{ font-size: 30rem; display: inline-block; vertical-align: baseline}

dl.box-2clumn {display: flex; justify-content: space-between; flex-wrap: wrap; width: 84%; margin: 0 auto 40px auto;}
.box-2clumn dt {display: block; width: 30%; }
.box-2clumn dt img {display: block; width: 100%; height: auto; margin-bottom: 30px; }
.box-2clumn dd {display: block; width: 60%; }
.box-2clumn dd p{ font-size: 18rem; color: #555; font-weight: bold}
.box-2clumn dd figure {display: block; margin-top: 20px;}
.box-2clumn dd figure img {display: block; width: 100%; height: auto; margin-bottom: 30px;  }
.box-grayline {border-bottom: 1px solid #ccc;}

aside.bg-gray { background: #eee; padding: 6vh 0;}
.box-access { display: flex; justify-content: space-around; flex-wrap: wrap;}
.box-access div { display: block; width: 45%;}
.box-access div a { display: block; color: #111; position: relative;}
.box-access div a::after { content: ''; width: 36px; height: 36px; display: inline-block; background: url("../img/map-icon.png") no-repeat center center / contain; margin-left: 10px;}
.box-access div p.address { font-size: 15rem; color: #555; margin-bottom: 20px;}
.box-access figure { display: block; width: 45%;}
.box-access img { max-width: 100%}

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

/* Contents3 */
#contents3{ padding: 80px 0; background: #fff;}
#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; }
#contents3 ol li::before{ content: '■'; color:#c16d87; position: absolute; top:0; left: 0;}

.sankabtn {margin-bottom: 30px}
.sankabtn a {display: block; width: 32%; min-width: 360px; margin: 0 auto; color: #004da0; font-size: 18rem; font-weight: bold; text-align: center; padding: 30px 40px;
	background-image: url("../img/btn-bg01.png"), url("../img/btn-bg03.png"), url("../img/btn-bg02.png");
	background-position: left center, right center, center center;
	background-repeat: no-repeat, no-repeat, repeat-x;
	background-size: contain;}
.sankabtn a img {}
.sankabtn a:hover { transform: scale(1.1)}
.sankabtn a:hover img {}

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

.text-min {font-size: 85%; line-height: 1.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%; min-width: 0px}
	.box-green h4 {font-size: 22rem;}
	.box-green p {line-height: 1.5}
	#contents3 p.green-date { padding: 10px 20px; font-size: 17rem!important;}
}

/* Contents4 */
#contents4{ padding: 80px 0;  background-color: #e6f1f5;}
#contents4 h4{ display: block; text-align: center; font-size: 26rem; padding: 10px 0; margin: 0 auto 40px auto; color: #111; position: relative;}
#contents4 h4::after{ content: ''; width: 100px; height: 2px; background-color: #004da0; position: absolute; bottom: 0; left: calc(50% - 50px);}

.detail-3clumn {display: flex; justify-content: space-between; flex-wrap: wrap; align-items: stretch}
.detail-3clumn dl {width: 31%;}
.detail-3clumn dl img {max-width: 100%;}
.detail-3clumn dl dt { margin-bottom: 10px;}
.detail-3clumn dl dt img {}
.detail-3clumn dl dd { background: #004da0; padding: 10% 8% 5% 8%; position: relative; z-index: 0}
.detail-3clumn dl dd * { position: relative;}
.detail-3clumn dl dd h6 { font-size: 20rem; display: block; line-height: 1.8; margin-bottom: 20px; }
.detail-3clumn dl dd h6 span { display: inline-block;  background: url("../img/nami.png") repeat-x bottom left / auto 4px;}
.detail-3clumn dl dd h6 small { font-size: 13rem; display: block; }
.detail-3clumn dl dd p { font-size: 15rem; display: block; margin-bottom: 20px; line-height: 1.5 }
.detail-3clumn dl dd p.hosoku { font-size: 14rem;  }
.detail-3clumn dl dd img { display: block; width: 80%; margin: 0 auto 10px auto}
.detail-3clumn dl dd .sankabtn a { min-width: 100%}

.detail-3clumn dl dd::before {content: ''; position: absolute; height: 100%; width: 100%; background: #fff; top: 0; left: 0; z-index: 0;
	clip-path: polygon(15px 0%, calc(100% - 15px) 0%, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0% calc(100% - 15px), 0% 15px); border: 1px solid #fff;}

.detail-list { list-style: disc; font-size: 14rem; font-weight: bold; margin-left: 15px}
.detail-list li { display: list-item; margin: 5px auto}

.box-soudan { background-color: #fff; margin: 40px auto 10px auto}
.box-soudan h5 { font-size: 22rem; color: #fff; background: #004da0; padding: 10px 30px; line-height: 1.5}
.box-soudan h5 span { font-size: 14rem; font-weight: normal; margin-left: 10px; display: inline-block; vertical-align: middle}
.box-soudan dl { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row-reverse;}
.box-soudan dt { width: 34%}
.box-soudan dt figure { display: block; width: 100%; padding: 30px}
.box-soudan dt figure img { display: block; width: 100%; height: auto;}
.box-soudan dd { width: 65%; padding: 30px 30px 10px 30px;}
.box-soudan dd h6 {font-size: 18rem; margin-bottom: 20px;}
.box-soudan dd p { font-size: 16rem; margin-bottom: 20px;}
.box-soudan dd p strong { font-size: 18rem; display: block}
.box-soudan dd p.txt-blue {color: #004da0}

@media screen and (max-width: 960px) {
	#contents4{ padding: 40px 0 10px 0; }
	
	.detail-3clumn {display: block; }
	.detail-3clumn dl {width: 100%; margin-bottom: 50px;}
	.detail-3clumn dl img {}
	.detail-3clumn dl dt { margin-bottom: 10px;}
	.detail-3clumn dl dt img { }
	.detail-3clumn dl dd { padding: 8% 5% 5% 5%; }
	.detail-3clumn dl dd * { }
	.detail-3clumn dl dd h6 { }
	.detail-3clumn dl dd h6 span { }
	.detail-3clumn dl dd h6 small { }
	.detail-3clumn dl dd p { }
	.detail-3clumn dl dd p.hosoku { }
	.detail-3clumn dl dd img { width: 60%; margin:0 auto 20px auto}
	.detail-3clumn dl dd .sankabtn a { min-width: 100%}
	
	.box-soudan { margin: 40px auto 40px auto}
	.box-soudan h5 { padding: 20px;}
	.box-soudan h5 span { margin-left: 0px; display: block; vertical-align: middle}
	.box-soudan dt { width: 100%}
	.box-soudan dt figure { width: 80%; margin: 0 auto }
	.box-soudan dd h6 {font-size: 16rem; }
	.box-soudan dd { width: 100%; padding: 0 20px 10px 20px;}
}

/* Contents5 */
#contents5{ padding: 80px 0; background-color: #fff;}
#contents5 h3{ display: block; text-align: center; font-size: 26rem; padding: 10px 0; margin: 0 auto 40px auto; color: #111; position: relative;}
#contents5 h3::after{ content: ''; width: 100px; height: 2px; background-color: #004da0; position: absolute; bottom: 0; left: calc(50% - 50px);}
#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: #449a9f; padding: 60px 20px 40px 20px; }
#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: #004da0; color: #fff; padding: 10px 15px; font-size: 16px; margin: 10px auto 30px auto; max-width: 300px;  text-align: center;}
.link-pdf a::before {content: 'PDF'; display:inline-block; font-size: 11px; color: #666; background-color: #fff; padding: 2px 3px 1px 3px;  margin-right: 5px; }


.filter-nav-date { width: 90%; display: flex; justify-content: center; flex-wrap: wrap;  margin: 0 auto 10px auto}
.filter-nav-date a { display: block; background-color: #bbb; color: #fff; text-align: center; font-weight: bold; font-size: 16rem; padding: 8px 2px; line-height: 1.1;  width: 32%; margin: 0 auto 10px 0; 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-date a:hover { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0px), calc(100% - 0px) 100%, 0 100%); border: 1px solid #004da0; }
.filter-nav-date a.btn-active { background-color: #ff68af}

.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;  width: 19%; margin: 0 auto 10px 0; 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 #004da0; }
.filter-nav a.btn-active { background-color: #f7b400}


.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;  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: #004da0; 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-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: #004da0; 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;  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-orange{color: #bd672c; border: 1px solid #bd672c;}
.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: #004da0; 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: #004da0}

ul.list-kigyou li div.kigyou-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 36px; background-color: #296cb4}
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-date { width: 98%; }
	.filter-nav-date a{ width: 48%; margin-bottom: 5px; font-size: 14rem}
	.filter-nav-date a:first-child { width: 100%; margin-bottom: 5px;}
	
	.filter-nav { width: 100%; }
	.filter-nav a { width: 48%; margin-bottom: 5px; font-size: 14rem}
	
	.icon-detail h4{ margin: 0 auto 10px auto}
	ul.icon-list { width: 100%; margin: 0 auto 20px auto}
	ul.icon-list li { display: flex; width: 100%; text-align: left; font-size: 13rem; margin-bottom: 5px; line-height: 1.2}
	ul.icon-list li span { display: flex; align-items: center; justify-content: center; min-width: 60px;}
	
	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;}
}