@charset "utf-8";

/* ---------- ANIMATION ---------- */
@keyframes slideDown {
	0% {
		opacity: 0;
		transform: translateY(-100px);
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}
@keyframes slideUp {
	0% {
		opacity: 0;
		transform: translateY(100px);
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1!important;
		transform: translateY(0px);
	}
}
@keyframes slideUp02 {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1!important;
		transform: translateY(0px);
	}
}
@keyframes slideIn {
	0% {
		opacity: 0;
		transform: translateX(-100px);
	}
	100% {
		opacity: 1!important;
		transform: translateX(0px);
	}
}
@keyframes scaleAnm {
	0% {
		opacity: 0;
		transform: scale(0%);
	}
	100% {
		opacity: 1!important;
		transform: scale(100%);
	}
}
@keyframes rotation {
  0%{ 
	  transform: rotate(0);
  }
  100%{ 
	  transform: rotate(360deg);
  }
}

.none { opacity: 0; }
.scale { animation: scaleAnm ease 1.2s; animation-fill-mode: forwards; }
.slideDown { animation: slideDown ease 2s; animation-fill-mode: forwards; }
.slideIn { animation: slideIn ease 1.5s; animation-fill-mode: forwards; }
.slideUp { animation: slideUp ease 1.5s; animation-fill-mode: forwards; }
.logoSlideUp { animation-name: slideUp; animation-duration: 1.5s; animation-delay: 6s; }

/* ---------- TITLE ---------- */
.ttlStyle01 {
    text-align: center;
    margin-bottom: 32px;
}
.ttlStyle01 span {
	display: inline-block;
    color: #fff;
	font-size: 2.6rem;
    font-weight: bold;
	padding: 4px 48px;
	z-index: 1;
	position: relative;
}
.ttlStyle01 span::after {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	background-color: #00559b;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.ttlStyle01.obiAnm span::after {
	animation: obi ease 1.2s;
}
@keyframes obi {
  0%{ 
	  opacity: 0;
	  width: 0%;
  }
  100%{ 
	  opacity: 1;
	  width: 100%;
  }
}

/* ---------- TEXT ---------- */
.marker {
    background: transparent;
    background: -moz-linear-gradient(top,  transparent 70%, #fcd000 71%);
    background: -webkit-linear-gradient(top,  transparent 70%,#fcd000 71%);
    background: linear-gradient(to bottom,  transparent 70%,#fcd000 71%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='transparent', endColorstr='#fcd000',GradientType=0 );
}

.txtBr {
    border: 2px solid #000;
    border-radius: 5px;
    background-color: #fff;
    padding: 4px 32px;
    text-align: center;
    font-size: 2rem;
	letter-spacing: 0.1rem;
    display: inline-block;
}

.indent { text-indent: 1rem; }

.caution {
	background-color: #fff;
	color: #d9332c;padding: 6px;
	display: inline-block;
}

.notes {
	font-size: 1.4rem!important;
	text-indent: -1rem;
	padding-left: 2rem;
}
.notes::before {
	content: '※';
	display: inline-block;
	margin-right: 6px;
}


/* ---------- LIST ---------- */
/* CIRCLE */
.listCircle li {
	text-indent: -0.8rem;
	line-height: 1.6;
    padding-left: 1.6rem;
}
.listCircle li::before {
	content: '●';
	display: inline-block;
	margin-right: 4px;
}

/* SQUARE */
.listSquare { list-style: none; }
.listSquare li {
	text-indent: -0.8rem;
	margin-left: 1.6rem;
}
.listSquare li::before {
	content: '■';
	display: inline-block;
}
.listSquare li:not(:last-child) {
	margin-bottom: 16px;
}

/* ---------- BUTTON ---------- */
.btn {
	display: block;
	text-align: center;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
	border: 2px solid #646464;
	background-color: #fcd000;
	line-height: 1;
    padding: 14px 40px 14px 14px;
    font-size: 1.6rem;
    margin: auto;
	color: #231815;
	transition: all 0.5s;
	font-weight: bold;
}
.btn span { position: relative;}
.btn span::after {
	content: '＞';
	font-size: 100%;
	display: inline-block;
	margin-left: 14px;
	position: absolute;
	right: -30px;
	top: 50%;
	transform: translateY(-50%);
	transition: right 0.5s;
}
.btn:hover span::after { right: -34px; }
.btn:hover { cursor: pointer; box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); }


/* ---------- 参加対象 ---------- */
.practicals {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.practicals .ttlStyle01 {
    display: inline-block;
}
.practicals .ttlStyle01 span { padding-left: 32px; padding-right: 32px; }
.practicals > div.practical01,
.practicals > div.practical02 {
    text-align: center;
    padding: 24px;
    margin: 2%;
	font-weight: bold;
}
.practicals .practical01 {
    background: url("../img/common/bg_sprite.png") center center no-repeat;
    background-size: cover;
	padding-right: 48px;
}
.practicals .practical02 {
    background: url("../img/common/bg_stripe.png") center center no-repeat;
    background-size: cover;
	padding-left: 48px;
}
.practicals .practical01 p:first-child,
.practicals .practical02 p:first-child { font-size: 2.5rem; margin-bottom: 12px; }
.practicals .practical01 p span,
.practicals .practical02 p span { font-size: 2.1rem; }

/* ---------- SCHEDULE ---------- */
.schedule {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
	justify-content: center;
	margin-bottom: 40px;
}
.schedule .real { width: 342px; margin-right: 4%; }
.schedule .online { width: 341px; }

.free {
	width: 192px;
	height: 192px;
	position: relative;
}
.free > img {
	width: 80%;
	padding: 20px;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: auto;
	transform: translateY(-50%);
}
.free::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: url("../img/common/free_bg.svg") center center no-repeat;
    background-size: contain;
    z-index: -1;
    animation: rotation ease 6s infinite;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}	

/* ---------- 会場 ---------- */
dl.venue {
	background-color: #fcd000;
	padding: 24px;
	display: flex;
	flex-wrap: wrap;
	margin-top: 24px;
	max-width: 1020px;
	margin: auto;
}
dl.venue dt {
	position: relative;
	background-color: #ffffff;
	border-radius: 50%;
	width: 131px;
	height: 131px;
}
dl.venue dt > p {
	display: block;
	text-align: center;
	font-size: 2.9rem;
	line-height: 0.8;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: auto;
	transform: translateY(-50%);
}
dl.venue dt > p > span {
	font-size: 1.5rem;
	margin-top: 8px;
}
dl.venue dd {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	margin-left: auto;
}
dl.venue dd > div > p:first-child {
	font-size: 3rem;
	line-height: 1.2;
}
dl.venue dd > div > p span.address {
	font-size: 1.4rem;
	line-height: 1.5;
    display: inherit;
	margin-top: 0.8rem;
}
dl.venue dd > div > .listCircle {
	font-size: 1.6rem;
	margin-top: 1.6rem;
	margin-bottom: 1rem;
	line-height: 1.5;
}
dl.venue dd > div > .notes {
	font-size: 1.4rem;
}

/* ---------- 企業 ---------- */
.campanyArea {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
dl.campanyBox {
	background: url("../img/common/box_stripe.png") left top repeat-y;
	padding-left: 80px;
	margin-bottom: 6%;
}
dl.campanyBox dt { font-size: 2.1rem; margin-bottom: 10px; }
dl.campanyBox dt span { display: block; max-width: 280px; margin-bottom: 10px; }
dl.campanyBox dt img { width: auto; }
dl.campanyBox dd { display: flex; flex-wrap: wrap; }
dl.campanyBox dd p { font-size: 1.8rem; margin-bottom: 12px; width: 100%; }
dl.campanyBox dd a { width: 100%; margin-top: auto; margin-bottom: 0; }

/* ---------- 概要 ---------- */
#outline .inner {
	position: relative;
	padding-top: 60px;
}
#outline .inner::before {
	content: '';
	background: url("../img/common/stripe_left.png") bottom left no-repeat;
	width: 6.129vw;/*76px*/
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 2%;
}
#outline .inner::after {
	content: '';
	background: url("../img/common/stripe_right.png") top left no-repeat;
	width: 6.129vw;/*76px*/
	height: 100%;
	position: absolute;
	top: 0;
	right: 2%;
}
.outlineArea {
	margin: auto;
	padding-left: 9.677vw;/*120px*/
	padding-right: 9.677vw;/*120px*/
}
.outlineArea dl {
	display: flex;
	margin-bottom: 40px;
}
.outlineArea dl dt { padding-right: 12px; }
.outlineArea dl dt span {
	width: 104px;
	display: block;
	z-index: -1;
}
.outlineArea dl dt span + img {
	width: 74px;
	height: 74px;
	margin: auto;
	display: block;
}
.outlineArea dl dd { display: flex; flex-wrap: wrap; justify-content: space-between; }
.outlineArea dl dd > div:first-child img.title { max-width: 476px; margin-bottom: 14px; }
.outlineArea dl dd > div:last-child img { max-width: 242px; }
.outlineArea dl dd p { font-size: 1.8rem; }
.outlineArea dl.outline03 dd > div:first-child img.img {
	width: 258px;
	float: right;
	margin-top: 20px;
}

.talkArea > div { opacity: 0; }


@media screen and (min-width: 751px) and (max-width: 1240px) {
	.practicals { max-width: 1240px; margin-left: auto; margin-right: auto; }
}

@media screen and (min-width: 751px) {
	/* MAIN VISUAL */
	#mainvisual {
		position: relative;
		background: url("../img/top/mainvisual_bg.png") top center no-repeat;
		background-size: auto 100%;
		min-height: 630px;
		max-width: 1240px;
		margin: auto;
	}
	#eventLogo {
		max-width: 786px;
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		animation: slideUp ease 2s;
	}
	.talkArea {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 904px;
		display: flex;
		justify-content: space-evenly;
		flex-direction: row-reverse;
	}
	
	/* COPY */
	.copy { display: flex; align-items: center; justify-content: center; margin-bottom: 32px; }
	.line01, .line02 { display: block; }
	.line01 { width: 362px; }
	.line02 { width: 490px; margin-left: 80px; }
	.free { margin-left: 24px; }

	/* ---------- 会場 ---------- */
	dl.venue dd { width: 80%; }
	dl.venue dd > div { width: 64%; }
	dl.venue dd > figure { width: 32%; margin-left: 20px; }
	
	/* 参加対象 */
	.practicals > div { width: 46%; }
	.practicals .ttlStyle01 {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		margin: auto;
	}
	
	/* 概要 */
	.outlineArea dl dd > div:first-child { width: 65%; }
	.outlineArea dl dd > div:last-child { width: 30%; }
	.outlineArea dl dd { padding-top: 40px; }
	
	/* 出展企業 */
	dl.campanyBox { width: 47%; }
	dl.campanyBox dt { height: 110px; }
}

@media screen and (max-width: 750px) {
	/* MAIN VISUAL */
	#mainvisual {
		position: relative;
		background: url("../img/top/mainvisual_bg_sp.png") top center no-repeat;
		background-size: 100% auto;
		margin: 0 auto 60px;
		padding-bottom: calc(100vw + 75%);
	}
	#eventLogo {
    	padding: 0 10%;
		margin-left: auto;
		margin-right: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: auto;
		animation: slideDown ease 2s;
	}
	.talkArea {
		position: absolute;
		top: 60%;
		left: 0;
		right: 0;
		margin: auto;
		width: 90%;
		display: flex;
		justify-content: space-evenly;
		flex-direction: row-reverse;
	}
	.talkArea > div { padding: 2%; }
	
	/* COPY */
	.copy { width: 80vw; margin: 32px auto; }
	.copy h2 { margin-bottom: 20px; }
	.line01, .line02 { display: block; }
	.line01 { max-width: 362px; }
	.line02 { max-width: 490px; }
	.free { margin: auto; }
	
	/* ---------- 会場 ---------- */
	dl.venue dt { margin-right: auto; margin-left: auto; margin-bottom: 24px; }
	dl.venue dd,
	dl.venue dd > div,
	dl.venue dd > figure { width: 100%; }
	dl.venue dd > figure { margin-top: 32px; }
	
	/* 参加対象 */
	.practicals > div { width: 100%; }
	
	/* 概要 */
	.outlineArea dl { flex-wrap: wrap; }
	.outlineArea dl dt { margin: auto; }
	.outlineArea dl dd { padding-top: 30px; }
	.outlineArea dl dd > div:first-child,
	.outlineArea dl dd > div:last-child { width: 100%; }
	.outlineArea dl dd > div:last-child { margin-top: 4%; text-align: center; }
	
	/* 参加予約 */
	.real { margin-bottom: 40px; }
	
	/* 出展企業 */
	.campanyArea {
		padding-left: 2%;
    	padding-right: 4%;
	}
	dl.campanyBox {
		width: 100%;
		background-size: 10%;
		padding-left: 16%;
		margin-bottom: 10%;
	}
	dl.campanyBox dt img { width: 100%; }
	
	/* FOOTER */
	#footer div.inner > div:first-child { margin-bottom: 20px; }
}