@charset "UTF-8";


/* ============================================
  開催概要
============================================ */
#about-lead p + p{ margin-top: 1.25em; }

#about article dl{
display: flex;
flex-wrap: wrap;
padding: 16px 0 0 2%;
}
#about article dt{ width: 140px; }
#about article dd{ width: calc( 100% - 140px ); padding-left: 40px; }

#about article dt, #about article dd{ margin-bottom: 40px; line-height: 1.4; }
#about article dt{ font-size: 18px; font-weight: 700; }
#about article dd ul{ margin: 0 0 8px 16px; }
#about article dd li{ margin-right: 24px; }
#about article dd img{ width: 70%; max-width: 360px; height: auto; margin-bottom: 8px; }

#about article ol h4{
position: relative;
font-size: 1.25em;
font-weight: 700;
margin-bottom: 8px;
padding-top: .25em;
}
#about article ol h4 span{
position: absolute;
top: 0; left: -54px;
display: block;
color: #ead98b;
background: #000;
text-align: center;
font-size: 20px;
line-height: 40px;
width: 40px; height: 40px;
border-radius: 50%;
}
#about article ol{ margin-bottom: 40px; }
#about article ol > li{ margin-top: 40px; padding-left: 54px; }

@media screen and (max-width: 1000px){
#about article dt{ width: 120px; }
#about article dd{ width: calc( 100% - 120px ); }
#about article dt{ font-size: 16px; }
}

/*SP*/
@media screen and (max-width: 640px){
#about article dl{
display: block;
padding: 0;
}
#about article dt{ 
display: inline-block;
width: 6em;
font-size: 14px;
font-weight: 700;
line-height: 1;
color: #ead98b;
background: #000;
padding: .15em 0;
border-radius: 4px;
margin-bottom: 0;
}
#about article dd{
width: 100%;
padding: 4px 0 16px 16px;
margin-bottom: 24px;
}
#about article dd ul{ margin-top: 4px; }
#about article dd img{ width: 80%; max-width: 320px; height: auto; margin: 8px 0 4px 0; }

#about article ol h4{ padding-top: .15em; }
#about article ol h4 span{ left: -40px; font-size: 15px; line-height: 32px; width: 32px; height: 32px; }
#about article ol{ margin-bottom: 24px; }
#about article ol > li{ margin-top: 24px; padding-left: 40px; }
}



/* ============================================
  ギャラリー
============================================ */
#gallery article ul{
display: flex;
flex-wrap: wrap;
gap: 16px 1.5%;
}
#gallery article ul li{
width: 23.875%;
}

#gallery article li a{
position: relative;
display: block;
border: 6px solid #fff;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.16);
}
#gallery article li a::before,
#gallery article li a::after{
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
transition: .3s;
}
#gallery article li a::before{
content: 'Zoom';
font-size: 13px;
font-weight: 700;
width: 5em; height: 24px;
background: #000;
border: 1px solid #ead98b;
border-radius: 4px;
z-index: 2;
opacity: 0;
}
#gallery article li a::after{
content: '';
width: 100%; height: 100%;
background: #000;
opacity: 0;
}
#gallery article li a:hover::before{ opacity: 1; }
#gallery article li a:hover::after{ opacity: .4; }

@media screen and (max-width: 1000px){
#gallery article ul li{ width: 32.333%; }
}
@media screen and (max-width: 840px){
#gallery article li a{ border-width: 4px; }
}
@media screen and (max-width: 640px){
#gallery article ul li{ width: 49.25%; }
}



/* ============================================
  スクロールアニメ
============================================ */
.slide-in, .zoom-in{ opacity: 0; transition: all .8s ease; }
.slide-in.active, .zoom-in.active{ opacity: 1; }

.slide-in{ transform: translateX(-100%); }
.slide-in.active{ transform: translateX(0); }

.zoom-in{ transform: scale(0.5); }
.zoom-in.active{ transform: scale(1); }

.stretch{
display: block;
width: 0; height: 3px;
background: #9b8037;
border-radius: 2px;
transition: all 1s ease;
margin-bottom: 24px;
}
.stretch.active{ width: 100%; }

.delay1{ transition-delay: .2s; }
.delay2{ transition-delay: .4s; }
.delay3{ transition-delay: .6s; }
.delay4{ transition-delay: .8s; }
.delay5{ transition-delay: 1s; }

@media screen and (max-width: 640px){
.stretch{ margin-bottom: 16px; }
}