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

*{ margin:0 auto;}

body{
	color: #000;
	margin:0 auto;
	padding: 0px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
    font-style: normal;
	-webkit-text-size-adjust: none;
	overflow-x: hidden;
	width:100%;
}

.loading {
	width: 100%;
	height: 100%;
	background: #e69d59;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20000;
}
.loading img {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -20px;
	margin-left: -20px;
}

.lum-gallery-button {
  display: none;
}

*{
	list-style: none;
	margin: 0px;
	padding: 0px;
}

img{
	border: none;
	line-height: 0em;
	vertical-align: top;
}

html,body{
	overflow-x: hidden;
}

.clearfix:after{
	content: ".";  
	display: block;  
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix{display: inline-table;}
.clear{clear: both;}
.pcv {display:inherit;}
.spv {display:none;}

.area{overflow: hidden;}
.wrap{display: flex;}
.item{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
    font-weight: bold;
    color: #fff;
    background-color: #e69d59;
}
#hyoshi_area {margin: 0 auto;padding-top: 5rem;width: 120vh;text-align: center;}
.hyoshi {width: 100%;margin: 0 auto 4rem;}
.hyoshi img {height: auto;}
.hyoshi_txt1 {text-align: center;font-size: 1rem;height: auto;margin-bottom: 2rem;animation: down 5s infinite}
.hyoshi_txt1 img {width: 18vh;}
@keyframes down {
  0% {transform: translateY(0px);}
  50% {transform: translateY(-80px);}
  100% {transform: translateY(0px);}
}

#concept {
    text-align: center;
	padding: 4rem;
	width: 150vh;
    border: 1px solid #FFF;
    border-radius: 1.5em;
    margin: 0 auto;
}

#concept .ttl {
    margin: 0 auto 3em;
}
#concept .concept_txt {
    line-height: 1.5em;
    margin: 0 auto;
}

.line {
    text-decoration: underline;
    color: #FFF;
    text-underline-offset: 0.5rem;
    text-decoration-thickness: 0.2rem;
}
.font-s {
    font-size: 0.7em;
}

#infomation{
	padding: 4rem 0 4rem 8rem;
	width: 160vh;
	border: 1px solid #FFF;
	border-radius: 1.5em;
	margin: 0 auto;
}
#infomation .ttl {
    margin: 0 auto 1em;
    text-align: center;
}
#infomation .info_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 142vh;
}
#infomation .info_box .hyimg {
    width: 45vh;
}
#infomation .info_box .hyimg img {
    width: 100%;
}
#infomation .info_box .hy_txt_box {
    width: 90vh;
}
#infomation .info_box .hy_txt_box .hy_txt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 1rem;
    border-bottom: 1px dotted #FFF;
    padding-bottom: 1rem;
}
#infomation .info_box .hy_txt_box .hy_txt .info_l {
    width: 9rem;
    text-align: justify;
    text-align-last: justify;
    font-weight: 500;
    font-size: 1.2rem;
}
#infomation .info_box .hy_txt_box .hy_txt .info_r {
	width: 41rem;
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: 0.2rem;
}
.font-s2 {
	font-size: 1.2rem;
	padding-left: 0.6rem;
	letter-spacing: 0.15rem;
}
.info_r a,
.info_r a:hover,
.info_r a:visited {
    text-decoration: underline;
    color: #FFF;
    text-underline-offset: 0.5rem;
    text-decoration-thickness: 0.05rem;
}

#sample_box1,#sample_box2,#sample_box3 {
	width: 180vh;
	border: 1px solid #FFF;
	border-radius: 1.5em;
	margin: 0 auto;
	height: 80vh;
}
#sample_box1 {
	padding: 5rem 3rem 2rem;
}
#sample_box2,#sample_box3 {
	padding: 4rem 3rem 2rem;
}
#sample_box1 .ttl,#sample_box2 .ttl,#sample_box3 .ttl {
    text-align: center;
}
#sample_box1 .ttl {
    margin: 0 auto 10rem;
}
#sample_box2 .ttl,#sample_box3 .ttl {
    margin: 0 auto 3rem;
}
.sample_sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    flex-wrap: wrap;
    text-align: center;
}
#sample_box1 .sample_sec{
}
#sample_box3 .sample_sec{
    width: 77%;
    margin: 0 auto;
}
.sample_box{
   width: 28vh;
}
#sample_box2 .sample_box{
    margin: 0 auto 1.5rem;
}

#sample_box3 .sample_box{
   margin: 0 auto 2rem;
}

.sample_thum {margin: 0;width: 26vh;}
.sample_thum img {
    width: 100%;
    padding: 0.75rem;
    border: 1px #FFF dashed;
    border-radius: 1em;
}
.sample_name {
    text-align: justify;
    text-align-last: justify;
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.75rem 0 0;
}
.chara {font-size: 0.9rem;}

#attendee {
	padding: 4rem;
	width: 175vh;
	border: 1px solid #FFF;
	border-radius: 1.5em;
	margin: 0 auto;
}
#attendee .ttl {
    text-align: center;
    margin: 0 auto 4rem;
}
.font-s3 {
    font-size: 0.6em;
    padding-left: 0.6em;
}
#attendee .attend_sec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.5rem;
    margin: 0px auto 2.2rem;
}
.circle {
    font-size: 0.8em;
}

.atte_mem {
	padding: 0.7rem 2rem 1.2rem;
	border: 1px #FFF dashed;
	border-radius: 1em;
	font-weight: 500;
	width: 20rem;
	height: auto;
	text-align: center;
}
.attend_sec a,
.attend_sec a:hover,
.attend_sec a:visited {
    text-decoration: underline;
    color: #FFF;
    text-underline-offset: 0.5rem;
    text-decoration-thickness: 0.05rem;
}

.info_inner, .sample1_inner, .sample2_inner, .sample3_inner, .attend_inner {margin: 0 auto;}

.info_inner {width: 100%;}
.sample1_inner {width: 90%;}
.sample2_inner {width: 62%;}
.sample3_inner {width: 100%;}
.attend_inner {width: 76%;margin: 0;}

/*アニメーション*/

#concept::before {
    content: "";
    position: fixed;
    top: 20rem;
    left: 15rem;
    display: inline-block;
    width: 20rem;
    height: 25rem;
    background-image: url('../img/anime/fuji_etc.png');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    animation: anime1 2s infinite;
}
#concept::after {
    content: "";
    position: fixed;
    top: 20rem;
    right: 15rem;
    display: inline-block;
    width: 20rem;
    height: 25rem;
    background-image: url('../img/anime/mejiro.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    animation: anime2 4.5s infinite;
}
#sample_box2::before {
    content: "";
    position: fixed;
    top: 5rem;
    left: 6rem;
    display: inline-block;
    width: 22rem;
    height: 25rem;
    background-image: url('../img/anime/gran_etc.png');
    background-repeat: no-repeat;
    background-position: top left;
    background-size: contain;
    animation: anime1 2s infinite;
}
#sample_box2::after {
    content: "";
    position: fixed;
    top: 32rem;
    right: 7rem;
    display: inline-block;
    width: 20rem;
    height: 25rem;
    background-image: url('../img/anime/crown_etc.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    animation: anime2 4.5s infinite;
}
#attendee::after {
    content: "";
    position: fixed;
    top: 26rem;
    right: 7rem;
    display: inline-block;
    width: 25rem;
    height: 25rem;
    background-image: url('../img/anime/nature_etc.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: contain;
    animation: anime2 4.5s infinite;
}
@keyframes anime1 {
  0% {transform: translateY(0px);}
  50% {transform: translateY(-40px);}
  100% {transform: translateY(0px);}
}
@keyframes anime2 {
  0% {transform: translateY(0px);}
  50% {transform: translateY(-80px);}
  100% {transform: translateY(0px);}
}

@media screen and (max-width:1400px) {
.chara {
    font-size: 0.7em;
}
#concept::before {
    left:0 !important;
}
#concept::after {
	right: 0;
}
#infomation {
    padding: 4rem 1rem 1rem 2rem;
    width: 145vh;
    border: 1px solid #FFF;
    border-radius: 1.5em;
    margin: 0 auto;
    height: 80vh;
}
#infomation .info_box {
    width: 140vh;
}
#infomation .info_box .hy_txt_box {
    width: 90vh;
}
#sample_box1 .ttl {
    margin: 0 auto 3rem;
}
.sample_sec {
    width: 111vh;
}
.sample_box {
    width: 28vh;
    margin: 0 auto 2rem;
}

#sample_box2::before {
    top: 2rem;
    left: 0;
    width: 13rem;
    height: 14rem;
}
#sample_box2::after {
    top: 45rem;
    right: 0;
    width: 12rem;
    height: 16rem;
}
.sample2_inner {
    width: 78%;
    margin: 0 auto;
}
#sample_box3 .sample_sec {
    width: 85%;
    margin: 0 auto;
}
.attend_inner {
    width: 95%;
    margin: 0 auto;
}
#attendee::after {
    top: 5rem;
    right: 0;
    width: 12rem;
    height: 12rem;
}
}

@media screen and (min-width:2000px) {
#concept::before {
    left:20rem !important;
}
#concept::after {
    right:20rem !important;
}
#sample_box2::before {
    top:7rem !important;
    left:14rem !important;
}
#sample_box2::after {
    right:15rem !important;
}
}

@media screen and (min-width:2100px) {
#attendee::after {
    right:12rem !important;
}
}

@media screen and (min-width:2200px) {
#concept::before {
    left: 30rem !important;
    top: 25rem;
    width: 21rem;
    height: 30rem;
}
#concept::after {
    right: 30rem !important;
    top: 30rem;
    width: 25rem;
    height: 30rem;
}
#sample_box2::before {
    top:7rem !important;
    left:24rem !important;
}
#sample_box2::after {
    right:25rem !important;
}
#sample_box3::after {
    right:25rem !important;
}
#attendee::after {
    right:17rem !important;
}


}
@media screen and (min-width:2400px) {

#infomation {
    padding: 4rem 0 4rem 7rem;
    width: 160vh;
    border: 1px solid #FFF;
    border-radius: 1.5em;
    margin: 0 auto;
}
.info_inner {
    width: 100%;
}
#infomation .info_box {
    width: 145vh;
}
#infomation .info_box .hy_txt_box .hy_txt {
    margin: 0 auto 2rem;
    padding-bottom: 2rem;
}
#infomation .info_box .hy_txt_box .hy_txt .info_l {
    width: 12rem;
    font-size: 1.4rem;
}
#infomation .info_box .hy_txt_box .hy_txt .info_r {
    width: 52rem;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
}

#sample_box1 {
    padding: 10rem 3rem;
    height: auto;
}
#sample_box1 .ttl {
    margin: 0 auto 13rem;
}

#sample_box2::before {
    top: 11rem !important;
    left: 10rem !important;
    width: 26rem;
    height: 30rem;
}
#sample_box2::after {
    right: 10rem !important;
    top: 44rem;
}
#attendee::after {
    right: 11rem !important;
    width: 28rem;
    height: 28rem;
    top: 35rem;
}

}

/*Pad 横*/
@media only screen and (max-width : 1194px){
#hyoshi_area {
	width: auto;
}
#concept {
	width: 125vh;
}
#concept::before {
	left: 1rem;
	width: 15rem;
}
#concept::after {
	right: 1rem;
	width: 16rem;
}
#infomation {
	width: 135vh;
    padding: 4rem 1rem 3rem 2rem;
}
#infomation .info_box {
	width: 135vh;
}
#infomation .info_box .hy_txt_box {
	width: 87vh;
}
#infomation .info_box .hy_txt_box .hy_txt .info_l {
	width: 8rem;
	font-weight: 500;
	font-size: 1.1rem;
}
#infomation .info_box .hy_txt_box .hy_txt .info_r {
	width: 36rem;
	font-size: 1.2rem;
	letter-spacing: 0;
}
.font-s2 {
	letter-spacing: 0.1rem;
}
#sample_box1 {
	padding: 3rem;
}
#sample_box1, #sample_box2, #sample_box3 {
	width: 125vh;
}
.sample_sec {
	width: auto;
}
.sample_box {
	width: 16rem;
	margin: 0 auto 1rem;
}
.sample_thum {
	margin: 0 auto;
	width: 14rem;
}
.sample_name {
	text-align: right;
	text-align-last: auto;
	padding: 0.5rem;
	font-size: 1rem;
}
.chara {
	font-size: small;
}
#sample_box2, #sample_box3 {
	padding: 3rem 3rem 5rem;
}
.sample2_inner {
	width: 80%;
}
#sample_box2::after {
	top: 5rem;
	right: 0;
	width: 12rem;
	height: 16rem;
}
#sample_box2::before {
	top: 2rem;
	left: 0;
	width: 13rem;
	height: 15rem;
}
#sample_box3 .sample_sec {
	width: 100%;
	margin: 0 auto;
}
#attendee {
	padding: 4rem 1rem 2rem;
	width: 135vh;
}
.attend_inner {
	width: 90%;
}
#attendee .attend_sec {
	font-size: 1.2rem;
	width: 89%;
}
.atte_mem {
	padding: 0.7rem 0 1.2rem;
	width: 18rem;
}
}/*Pad 横*/