@charset "UTF-8";
/*==========================
    - 〜479px      ：SP portrait
    - 480px〜599px ：SP landscape
    - 600px〜959px ：tablet
    - 960px〜1279px：small PC
    - 1280px〜     ：large PC
    - 1400px〜     ：largest PC
==========================*/
/* 〜479px：SP portrait
------------------------------ */
/***************************
    container
***************************/

#container p {
	font-size: 115%;
	font-weight: 600;
	line-height: 1.8;
	text-align: left;
	max-width: 750px;
	margin: 0 auto;
}
section.block {
	z-index: 1;
}
.block .inner {
	padding-top: 0;
}

/* mv */
#mv {
	/*margin-bottom: 3vw;*/
}
#mv h1 {
	position: absolute;
	top: 23vw;
	left: 0;
	right: 0;
	margin: 0 auto;
}
#mv h1 img {
	display: block;
	margin: 0 auto;
}
#mv h1 img.mv_ttl {
	width: 80vw;
	margin-bottom: 2vw;
}
#mv h1 img.eventreport {
	width: 70vw;
}


.movie_wrap {
	position: relative;
}
.movie_bg {
	background: -webkit-linear-gradient(top left, #fe8257 0%, #f6539c 100%);
	background: -o-linear-gradient(top left, #fe8257 0%, #f6539c 100%);
	background: linear-gradient(to bottom right, #fe8257 0%, #f6539c 100%);
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	border-radius: 30px;
	width: 96%;
	max-width: 690px;
	margin: 16vw auto 0;
}

.movie {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 0 auto;
}
.movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
	border-radius: 24px;
}
.movie_wrap .imgarea {
	position: absolute;
	width: 20vw;
	top: 10vw;
	left: 0;
	right: 0;
	margin: 0 auto;	
}

section.block.sec h2 {
	font-weight: 600;
	letter-spacing: 0.05em;
	color: #fff;
	background: -webkit-linear-gradient(left, #fe8257 0%, #f6539c 100%);
	background: -o-linear-gradient(left, #fe8257 0%, #f6539c 100%);
	background: linear-gradient(to right, #fe8257 0%, #f6539c 100%);
	line-height: 1.3;
	padding: 0.7em 0.5em 0.6em;
	border-radius: 0.3em;	
}

/* intro */
#intro {
	background: url("../../fes/img/bg_icon01_sp.jpg") no-repeat 50% 0 / 100% auto;
	padding-top: 60px;
}

#intro .txtarea {	
	position: relative;
	padding: 2em;	
	border-radius: 30px;
	background-size: auto auto;
	background-color: rgba(255, 255, 255, 1);
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(254, 179, 213, 1) 6px, rgba(254, 179, 213, 1) 12px );
	width: 96%;
	max-width: 870px;
	box-sizing: border-box;
	margin: 0 auto 3em;
}
#intro .txtarea::before {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
	background: #ffffff;
    content: '';
	border-radius: 24px;
}
#intro .txtarea p {
	position: relative;
	z-index: 2;
}
#intro .icon {
	position: relative;
	top: 0;
	left: 0;
}
#intro .icon img {
	position: absolute;	
}
#intro .icon img:first-of-type {
	width: 50px;
	top: -50px;
	left: -5%;
}
#intro .icon img:last-of-type {
	width: 60px;
	bottom: -50px;
	right: -9%;
}
#intro .movie_wrap h2 {
	width: 68vw;
	margin: 0 auto 0.6em;
	padding-right: 6vw;
}


/* .sec */
.sec .imgarea {
	max-width: 585px;
	margin: 0 auto 4vw;
}
.sec .imgarea.pair {
	position: relative;
	margin-bottom: 0;
}
.sec .imgarea.pair .img_sml {
	position: relative;
	top: -5vw;
	z-index: 2;
	width: 70%;
}
.sec .imgarea.flexbox img:first-of-type {
	margin-bottom: 1em;
}
.sec p {
	padding: 0 4%;
}
.sec.lastcont {
	padding-bottom: 22vw;
	background: url("../../fes/img/bg_icon02_sp.jpg") no-repeat 50% 100% / 100% auto;
}
.sec.lastcont p {
	background: #ffffff;
}

@media screen and (max-width: 374px) {
	#event ul.flexbox li .txtarea .btnarea a {
		background-color: #f6539c;
		font-size: 14px;
		letter-spacing: 0;
		padding: 0 30px 0 12px;
		background-position: right 10px center;
		background-size: 16px auto;
	}
}

/* 414px〜479px：SP landscape
------------------------------ */
@media screen and (min-width: 414px) {
  /***************************
      container
  ***************************/ }
/* 480px〜599px：SP landscape
------------------------------ */
@media screen and (min-width: 480px) {
  /***************************
      container
  ***************************/ 

}

/* 600px〜959px：tablet
------------------------------ */
@media screen and (min-width: 600px) {
  /***************************
      container
  ***************************/
	#container p {
		font-size: 16px;
	}
	#mv h1 {
		top: 7vw;
	}
	#mv h1 img.mv_ttl {
		width: 60vw;		
		margin-bottom: 1vw;
	}
	#mv h1 img.eventreport {
		width: 50vw;
	}
	#intro .txtarea {
		margin-bottom: 4em;
	}
	#intro .icon img:first-of-type {
		width: 70px;
		top: -64px;
		left: -10%;
	}
	#intro .icon img:last-of-type {
		width: 86px;
		bottom: -64px;
		right: -10%;
	}
	#intro .movie_wrap h2 {
		width: 337px;
		padding-top: 40px;
		margin: inherit;
		position: relative;
		left: calc(50% - 240px);
	}
	.movie_bg {
		margin-top: 20px;
	}
	.movie_wrap .imgarea {
		width: 130px;
		top: 0;
		left: calc(50% + 110px);
		right: inherit;
	}
	section.block.sec h2 {
		font-size: 21px;
	}
	.sec .imgarea {		
		margin-bottom: 2em;
	}
	.sec .imgarea.pair {
		margin-bottom: -1em;
	}
	.sec .imgarea.pair .img_sml {
		width: 50%;
		top: -2.2em;
	}
	.sec .imgarea.pair .img_rig {		
		left: 20%;
	}
	.sec .imgarea.pair .img_lef {		
		right: 20%;
	}
}


/* 720px〜959px：tablet
------------------------------ */
@media screen and (min-width: 720px) {
	#intro {
		background-size: 640px auto;
	}
	.sec .imgarea.flexbox {
		max-width: inherit;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-start;
	}
	.sec .imgarea.flexbox img {
		width: 48%;
	}
	.sec .imgarea.flexbox img:first-of-type {
		margin-bottom: 0;
	}
	.sec.lastcont {
	  padding-bottom: 160px;
	  background-size: 640px auto;
	}
}


/* 960px〜1279px：small PC
------------------------------ */
@media screen and (min-width: 960px) {	
	#container {
		position: relative;
	}
	#container::before {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: calc(50% + 440px);
		background: url("../../fes/img/bg_icon.jpg") repeat 50% 0 / 400px auto;
	}
	#container::after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		right: calc(50% + 440px);
		background: url("../../fes/img/bg_icon.jpg") repeat 50% 0 / 400px auto;
	}
	#container p {
		font-size: 19px;
	}
	section.block > .inner {
		padding-top: 0;
	}
	#mv {
		background: #fcfbdb;
		position: relative;
		margin-bottom: 30px;
		z-index: 2;
	}
	#mv::after {
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 40px;
		background: #50bb75;
	}
	#mv .mvbg{
		position: relative;
		z-index: 5;
		background: url("../../fes/img/bg_dot01.png") no-repeat calc(50% - 690px) 5px / 431px auto, url("../../fes/img/bg_dot02.png") no-repeat calc(50% + 680px) 12px / 369px auto;
	}	
	#mv .mvbg img {
		width: 950px;		
	}
	#mv h1 {
		z-index: 10;
		top: 45px;
	}
	#mv h1 img.mv_ttl {
		width: 486px;
	}
	#mv h1 img.eventreport {
		width: 340px;
		position: absolute;
		left: 0;
		right: 0;
		top: 130px;
	}
	#intro {
		background: none;
	}
	#intro .txtarea {		
		padding: 2em 3.5em;
		margin-bottom: 2em;
	}
	.movie_bg {
		padding: 13px;
	}
	.movie iframe {
		border-radius: 22px;
	}
	section.block.sec h2 {
		font-size: 27px;
		padding: 0.4em 0.5em 0.3em;
	}
	.sec .imgarea {		
		margin-bottom: 2.5em;
	}
	.sec .imgarea.pair {
		margin-bottom: -1.5em;
	}
	.sec .imgarea.pair .img_sml {
		top: -3.2em;
	}
	.sec.lastcont {
		background: none;
		padding-bottom: 0;
	}
	.sec.lastcont p {
		background: none;
	}
}