@charset "utf-8";

/*//////////////////////////////////////////////////////////////////////////////

	TOP

//////////////////////////////////////////////////////////////////////////////*/

/*------------------------------------------------------------------------------

	共通

------------------------------------------------------------------------------*/

#promotion .title {
	display: block;
	overflow: hidden;
	outline: none;
	clear: both;
	text-indent: -9999px;
	white-space: nowrap;
	background-repeat: no-repeat;
	background-size: contain;
}

#info .box {
	margin-bottom: 2em;
	padding: 1.5em 2em;
	border: 1px solid rgba(255,0,4,1);
	font-weight: bold;
	color: rgba(255,0,4,1);
}

#info .mail a {
	color: rgba(255,0,4,1);
}


/*------------------------------------------------------------------------------

	promotion

------------------------------------------------------------------------------*/

/*	main_image
------------------------------------------------------------------------------*/

#promotion .main_image {
	position: relative;
	height: 610px;
	background-image: url(../img/promotion_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

#promotion .site_column {
	position: relative;
	height: 100%;
}

#promotion .site_column::after {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%); 
	content: '';
	background-image: url(../img/promotion_img.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 555px;
	height: 570px;
}

#promotion .site_column .text {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	font-weight: bold;
	font-feature-settings: normal;
}

#promotion .site_column .text h2 {
	margin: 0;
	font-weight: bold;
	text-align: center;
}

#promotion .site_column .text .sub {
	font-size: 1.750em;
}

/*
#promotion .site_column .text .sub span:nth-child(1) {
	display: inline-block;
	vertical-align: middle;
	margin-right: 1em;
	padding: .3em 1.5em;
	background-color: #29ABE2;
	border-radius: 5px;
	color: #FFF;
	font-size: 0.714em;
}

#promotion .site_column .text .sub span:nth-child(2) {
	display: inline-block;
	vertical-align: middle;
}
*/

#promotion .title {
	width: 726px;
	height: 118px;
	margin: 2% auto 1%;
	background-image: url(../img/promotion_title.svg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

#promotion .site_column .info {
	width: 75%;
	margin: 0 auto;
	line-height: 1.6;
}

#promotion .site_column dl {
	display: flex;
	align-items: center;
}

#promotion .site_column dl dt {
	margin-right: 1em;
	padding: 0 1.5em;
	background-color: #2194A3;
	border-radius: 5px;
	color: #FFF;
	font-size: 1.250em;
}

#promotion .site_column dl dd {
	color: #2194A3;
	font-size: 1.875em;
}

#promotion .site_column dl dd span {
	vertical-align: middle;
	margin-right: .2em;
}

#promotion .site_column .organizer {
	margin-top: 1em;
}

#promotion .site_column .organizer dd {
	font-size: 1.3em;
}

#promotion .site_column dl dd .num {
	font-size: 1.400em;
}

#promotion .site_column dl dd .date {
	font-size: 0.867em;
}

#promotion .site_column dl dd .week {
	position: relative;
	font-size: 0.733em;
	margin-left: .5em;
}

#promotion .site_column dl dd .week::after {
	position: absolute;
	top: 52%;
	left: 50%;
	content: '';
	transform: translate(-50%,-50%);
	display: inline-block;
	width: 36px;
	height: 36px;
	background-color: #FFF;
	border-radius: 50%;
	line-height: 36px;
	font-size: 0.733em;
	z-index: -1;
}

#promotion .site_column dl dd .celebrate {
	/*padding: .3em .5em .5em;*/
	background-color: #FFF;
	border-radius: 20px;
}

#promotion .site_column .note {
	margin: 1em 0;
	font-size: 0.750em;
}

@media screen and (max-width: 1410px){

#promotion .main_image {
	height: 47vw;
}

#promotion .site_column::after {
	width: 41vw;
	height: 42vw;
}

#promotion .site_column .text .sub span:nth-child(1) {
	font-size: 1.5vw;
}

#promotion .site_column .text .sub span:nth-child(2) {
	font-size: 2vw;
	text-shadow: 
		#FFF 2px 0px,  #FFF -2px 0px,
		#FFF 0px -2px, #FFF 0px 2px,
		#FFF 2px 2px , #FFF -2px 2px,
		#FFF 2px -2px, #FFF -2px -2px,
		#FFF 1px 2px,  #FFF -1px 2px,
		#FFF 1px -2px, #FFF -1px -2px,
		#FFF 2px 1px,  #FFF -2px 1px,
		#FFF 2px -1px, #FFF -2px -1px;
}

#promotion .title {
	width: 55vw;
	height: 9vw;
}

#promotion .site_column dl dt{
	font-size: 1.5vw;
}

#promotion .site_column dl dd {
	font-size: 1.9vw;
}

#promotion .site_column dl dd .num {
	font-size: 3vw;
}

#promotion .site_column dl dd .date {
	font-size: 1.8vw;
}

#promotion .site_column dl dd .week {
	font-size: 1.5vw;
}
	
#promotion .site_column dl dd .week::after {
	top: 54%;
	width: 2.5vw;
	height: 2.5vw;
}

#promotion .site_column .info {
	width: 43vw;
}

}


@media screen and (max-width: 1165px){
	
#promotion .site_column .organizer dd {
	font-size: 1em;
}

}

@media screen and (max-width: 782px){

#promotion .site_column .organizer dd {
	font-size: .8em;
}
	
}

@media screen and (max-width: 767px){
	
#promotion .main_image {
	height: 145vw;
}

#promotion .site_column::after {
	top: 4vw;
	left: 50%;
	transform: translate(-50%,0);
	width: 79vw;
	height: 81vw;
}

#promotion .site_column .text {
	left: 50%;
	top: 88vw;
	right: auto;
	transform: translate(-50%,0);
}

#promotion .site_column .text .sub span:nth-child(1) {
	font-size: 3vw;
}

#promotion .site_column .text .sub span:nth-child(2) {
	font-size: 4vw;
	text-shadow: 
		#FFF 2px 0px,  #FFF -2px 0px,
		#FFF 0px -2px, #FFF 0px 2px,
		#FFF 2px 2px , #FFF -2px 2px,
		#FFF 2px -2px, #FFF -2px -2px,
		#FFF 1px 2px,  #FFF -1px 2px,
		#FFF 1px -2px, #FFF -1px -2px,
		#FFF 2px 1px,  #FFF -2px 1px,
		#FFF 2px -1px, #FFF -2px -1px;
}

#promotion .title {
	width: 89vw;
	height: 14vw;
}

#promotion .site_column .info {
	width: 92%;
}

#promotion .site_column dl dt{
	font-size: 2.5vw;
}

#promotion .site_column dl dd {
	font-size: 3.7vw;
}
	
#promotion .site_column .organizer dd {
	font-size: 3.2vw;
}

#promotion .site_column dl dd .num {
	font-size: 5vw;
}

#promotion .site_column dl dd .date {
	font-size: 3.4vw;
}

#promotion .site_column dl dd .week {
	font-size: 2.8vw;
}
	
#promotion .site_column dl dd .week::after {
	top: 54%;
	width: 5vw;
	height: 5vw;
}
	
#promotion .site_column .organizer {
	margin-top: .5em;
}

}


/*------------------------------------------------------------------------------

	wrap

------------------------------------------------------------------------------*/

#wrap {
	margin-top: 3.7em;
}

#wrap .site_column {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}


/*	info
------------------------------------------------------------------------------*/

#info {
	width: 67%;
}

#overview {
	margin-bottom: 3.25em;
}

#overview h2,
#news h2 {
	margin: 0 0 1.5em;
	padding-bottom: .3em;
	border-bottom: 4px solid #2194A3;
	font-weight: bold;
	font-size: 1.688em;
}

#content > main .support {
	width: 100%;
	margin-top: 0;
}

#content > main .support a .box p::before {
	left: 1.125em;
}

@media screen and (max-width: 1410px){
	
#content > main .support a .box p::before {
	left: 0;
}
	
}


/*	#overview
------------------------------------------------------------------------------*/

#overview h2 {
	margin-top: 0;
}

#overview h3,
#overview p.catch {
	font-weight: bold;
	font-size: 1.250em;
}

#overview p.catch {
	color: #2194A3;
}

#overview h3 {
	margin: 1.5em 0 1em;
	padding: .25em 0 .25em .5em;
	border-left: .18em solid #29ABE2;
	color: #29ABE2;
}

#overview .map {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 35%;
	margin: 2em 0;
}

#overview .map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 767px){

#overview h2 {
	font-size: 5vw;
}

#overview h3,
#overview p.catch {
	font-size: 4vw;
}

main h4 {
	font-size: 3.5vw;
}

#overview .map {
	padding-top: 55%;
}

}

/*	#news
------------------------------------------------------------------------------*/

#news dl {
	display: flex;
	margin-bottom: 2em;
}

#news dl:last-child {
	margin-bottom: 0;
}

#news dt {
	margin-right: 2em;
	color: #29ABE2;
	font-weight: bold;
	white-space: nowrap;
}

#news dd.caution {
	color: rgba(255,0,4,1);
}

/*	other
------------------------------------------------------------------------------*/

#other {
	width: 29%;
}

#other .banner {
	margin: 0;
	list-style: none;
}

#other .banner li {
	margin-bottom: 1em;
}

#other .banner li a {
	display: block;
	background-color: #29ABE2;
	color: #FFF;
	text-align: center;
}

#other .banner li a {
	padding: 1.5em 0;
	font-weight: bold;
	font-size: 1.250em;
	text-decoration: none;
}

#other .banner li a span {
	position: relative;
	padding-left: 2em;
}

#other .banner li a span::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 35px;
	height: 35px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	vertical-align: middle;
}

#other .banner li:nth-child(1) a span::before {
	background-image: url(../../common/img/icon_program.svg);
}

#other .banner li:nth-child(2) a span::before {
	background-image: url(../../common/img/icon_registration.svg);
}

#other .contact {
	margin-top: 2em;
	padding: 1em 1.3em 1.5em;
	background-color: #F2F2F0;
}

#other .contact dt,
#other .contact dd {
	text-align: center;
}

#other .contact dt {
	margin-bottom: .5em;
	color: #2194A3;
	font-weight: bold;
	font-size: 1.250em;
}

#other .contact dd {
	font-size: 0.875em;
	text-align: center;
	font-feature-settings: normal;
}

#other .contact .caution {
	color: rgba(255,0,4,1);
}

#other .contact .caution a {
	color: rgba(255,0,4,1);
}

@media screen and (max-width: 1300px){

#other .contact dd {
	text-align: left;
}

}

@media screen and (max-width: 1024px){

#other .banner li a span {
	padding-left: 4vw;
}

#other .banner li a span::before {
	width: 3.5vw;
	height: 3.5vw;
}

}

@media screen and (max-width: 767px){

#info,
#other {
	width: 100%;
}

#other {
	margin-top: 10vw;
}

#other .banner li a span {
	padding-left: 8vw;
}

#other .banner li a span::before {
	width: 7vw;
	height: 7vw;
}

}