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

#contents{
margin-top: 0;
}
/* 中身-モバイルファースト======================================================================================================== */

#introduction{
padding-top: 20vw;
position: relative;
}
#introduction::before,
#introduction::after{
content: "";
display: block;
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
width: 40%;
height: auto;
aspect-ratio: 1/1;
position: absolute;
top: 0;
z-index: -10;
}
#introduction::before{
background-image: url(../images/bg_tree-r.jpg);
background-image: -webkit-image-set(url(../images/bg_tree-r.jpg) 1x, url(../images/bg_tree-r@2x.jpg) 2x);
right: 0;
}
#introduction::after{
background-image: url(../images/bg_tree-l.jpg);
background-image: -webkit-image-set(url(../images/bg_tree-l.jpg) 1x, url(../images/bg_tree-l@2x.jpg) 2x);
left: 0;
}
#introduction h2{
font-size: 14vw;
font-weight: 700;
line-height: 1.4;
text-align: center;
position: relative;
margin-bottom: 10px;
}
#introduction h2::before{
content: "";
display: block;
width: auto;
height: 120%;
aspect-ratio: 1/1;
background: #cae6ad;
background: radial-gradient(circle,#cae6ad 0%, rgba(255,255,255,0) 70%);
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
z-index: -1;
}
#introduction h3{
font-size: 5vw;
text-align: center;
margin-bottom: 20px;
}

#introduction ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: 10vw;
}
#introduction li{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 30%;
margin-bottom: 5%;
aspect-ratio: 1/1;
text-align: center;
background-color: #FFF;
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.15);
}
#introduction li.title{
width: 65%;
aspect-ratio: inherit;
font-size: 18px;
background-color: #cb261e;
color: #fff;
}
#introduction li span{
font-size: min(2.5vw,12px);
}



#information{
background: #C7CACD;
background-image: -webkit-image-set(url(../images/bg.png) 1x, url(../images/bg@2x.png) 2x),radial-gradient(circle, #fff 0%, #C7CACD 200%);
background-repeat: no-repeat, no-repeat;
background-position: -5vw -5vw, left top;
background-size: 130% auto, auto;
padding-top: 20vw;
padding-bottom: 20vw;
}
#information .common_title{
text-align: center;
}
#information .common_title .en{
color: rgba(0, 0, 0, 0.1);
}


#information article{
margin-bottom: 10vw;
}
#information article:last-child{
margin-bottom: 0;
}
#information article .photo{
width: 80vw;
position: relative;
z-index: 10;
}
#information article:nth-child(even) .photo{
clip-path: polygon(0% 0%, 100% 0%, calc(100% - 8vw) 100%, 0% 100%);
margin-left: -5vw;
}
#information article:nth-child(odd) .photo{
clip-path: polygon(8vw 0%, 100% 0%, 100% 100%, 0% 100%);
margin-right: -5vw;
margin-left: auto;
}
#information article .text{
width: 80vw;
margin-left: auto;
margin-top: -5vw;
background-color: #857e7a;
color: #fff;
position: relative;
z-index: 5;
}
#information article:nth-child(even) .text{
clip-path: polygon(8vw 0%, 100% 0%, 100% 100%, 0% 100%);
margin-right: -5vw;
padding: 10vw 5vw 5vw 10vw;
}
#information article:nth-child(odd) .text{
clip-path: polygon(0% 0%, 100% 0%, calc(100% - 8vw) 100%, 0% 100%);
margin-left: -5vw;
padding: 10vw 10vw 5vw 5vw;
}
#information article dt{
font-size: 24px;
}


#e-pile{
position: relative;
}
#e-pile .common_title{
text-align: center;
}
#e-pile .img{
width: 48vw;
position: absolute;
top: 30vw;
right: -5vw;
z-index: -5;
}
#e-pile h3{
font-size: 6.5vw;
}
#e-pile h3 + em{
display: block;
font-size: 4vw;
margin-bottom: 5vw;
}
#e-pile .text{
margin-bottom: 40px;
}
#e-pile .text p{
margin-bottom: 1em;
}
#e-pile .text p:last-child{
margin-bottom: 0;
}
#e-pile .youtube iframe{
vertical-align: top;
width: 100%;
height: auto;
aspect-ratio: 16/9;
}




#stage{
background-color: #cb261e;
background-image: url(../images/bg_red.png);
background-image: -webkit-image-set(url(../images/bg_red.png) 1x, url(../images/bg_red@2x.png) 2x);
background-repeat: no-repeat;
background-position: 5vw -5vw;
background-size: 130% auto;
color: #fff;
padding-top: 20vw;
padding-bottom: 20vw;
position: relative;
}
#stage .common_title{
position: relative;
z-index: 10;
}
#stage .common_title .en{
color: #fff;
}
#stage .common_title h2{
text-shadow:
3px 3px 2px #cb261e,
-3px 3px 2px #cb261e,
-3px -3px 2px #cb261e,
3px -3px 2px #cb261e;
}
#stage .alpha .img{
width: 70%;
position: absolute;
top: 5vw;
right: -5vw;
z-index: 5;
}
#stage ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#stage ul li{
width: 48%;
margin-top: 4%;
}


/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#introduction{
padding-top: 10vw;
}
#introduction::before,
#introduction::after{
width: 25%;
display: block;
}
#introduction .contents_size{
text-align: center;
}
#introduction h2{
width: auto;
font-size: 7vw;
margin-bottom: 40px;
}
#introduction h2::before{
}
#introduction h3{
font-size: 3vw;
text-align: center;
margin-bottom: 20px;
}
#introduction p{
font-size: 24px;
}

#introduction ul{
width: 54vw;
margin: 5vw auto 0;
}
#introduction li{
width: 12vw;
margin-bottom: 2vw;
font-size: 1.5vw;
}
#introduction li.title{
width: 12vw;
font-size: 2vw;
}


#information{
background-position: -2% -100px, left top;
background-size: auto, auto;
padding-top: 12vw;
padding-bottom: 12vw;
}
#information article{
margin-bottom: 8vw;
}
#information article .photo{
width: 55%;
position: relative;
z-index: 10;
clip-path: polygon(4vw 0%, 100% 0%, calc(100% - 4vw) 100%, 0% 100%) !important;
}
#information article .photo img{
width: 100%;
}
#information article:nth-child(even) .photo{
margin-left: 0;
}
#information article:nth-child(odd) .photo{
margin-right: 0;
}

#information article .text{
display: grid;
place-items: center;
width: 55%;
min-height: 28vw;
margin-top: -25vw;
clip-path: polygon(4vw 0%, 100% 0%, calc(100% - 4vw) 100%, 0% 100%) !important;
}
#information article:nth-child(even) .text{
margin-right: 0;
padding: 0 5vw 0 8vw;
}
#information article:nth-child(odd) .text{
margin-left: 0;
padding: 0 8vw 0 5vw;
}
#information article dt{
font-size: 3vw;
}



#e-pile .img{
width: 45vw;
top: 9vw;
right: -12vw;
}
#e-pile .img img{
width: 100%;
}
#e-pile h3{
font-size: 3vw;
}
#e-pile h3 + em{
font-size: 2vw;
margin-bottom: 2vw;
}
#e-pile .beta{
display: flex;
}

#e-pile .text{
flex: 1;
margin-right: 2vw;
margin-bottom: 0px;
}
#e-pile .youtube{
width: 480px;
}


#stage{
background-position: 120% -100px;
background-size: auto;
padding-top: 12vw;
padding-bottom: 12vw;
}
#stage .alpha{
display: flex;
align-items: flex-end;
margin-bottom: 5vw;
}
#stage .alpha .text{
flex: 1;
margin-right: 2vw;
}
#stage .alpha .img{
width: 55%;
position: inherit;
top: inherit;
right: inherit;
}

#stage ul{
justify-content: flex-start;
}
#stage ul li{
width: 32%;
margin-left: 2%;
margin-top: 2%;
}
#stage ul li:nth-child(3n-2){
margin-left: 0;
}
#stage ul li p{
font-size: 16px;
text-align: center;
}


}