@charset "utf-8";
/* CSS Document */
.tss_comprehensiveHead,
#adminBox, .acms-admin-box,
.tss_footer{
 position: relative;
 z-index: 100;
 margin-bottom: 0;
}

img{
  max-width: 100%;
}


.tss_body{
  background-color: #E1F6FF;
}
.hgm_body{
  background-image: url(../img/bg_sky.webp);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: max(750px, 39.06vw) 100%;
}
section:not(.gm_btmImg){
  position: relative;
  z-index: 1;
}

.hgm_visible{
  transform: translateY(60px);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.9s cubic-bezier(0, 0, 0.58, 1), opacity 0.9s ease-out;
  will-change: transform, opacity;
}
.hgm_visible.is_show{
  transform: translateY(0);
  visibility: visible;
  opacity: 1;
}
.hgm_fadeIn{
  visibility: hidden;
  opacity: 0;
  transition: opacity 1s 0.2s ease-out;
  will-change: opacity;
}
.hgm_fadeIn.is_show{
  visibility: visible;
  opacity: 1;
}


.hgm_mv{
  padding: 48px 0 0;
}
h1.hgm_logo{
  max-width: clamp(15rem, 5.412rem + 35.68vw, 23.25rem);/* 240-372 430-800 */
  margin-inline: auto;
}
.hgm_freeTag{
  width: fit-content;
  max-width: 50%;
  margin-inline: auto;
  margin-top: 24px;
} 
h2.hgm_eventDateWrap{
  width: fit-content;
  margin-inline: auto;
  margin-top: 24px;
  padding: 0 16px;
}
.hgm_eventYear{
  display: block;
  font-size: 1.25rem;
  color: #5E7252;
  font-weight: bold;
}
.hgm_eventDate{
  display: block;
  font-size: clamp(1.5rem, 0.3974rem + 4.1026vw, 2.5rem);/*24-40 430-820*/
  color: #5E7252;
  font-weight: bold;
}
.hgm_eventDateNum{
  font-size: clamp(2.5rem, 1.1218rem + 5.1282vw, 3.75rem);/*40-60 430-820*/
}
.hgm_eventPlace{
  margin-top: 14px;
  font-size: clamp(1rem, 0.4487rem + 2.0513vw, 1.5rem);/*16-24 430-820*/
  color: #3CA36C;
  font-weight: bold;
  text-align: center;
}

.hgm_txt01Wrap{
  margin-top: clamp(2rem, 0.3462rem + 6.1538vw, 3.5rem);/*32-56 430-820*/
  padding: 0 16px;
}
.hgm_txt01{
  font-size: clamp(1.25rem, 0.5609rem + 2.5641vw, 1.875rem);/*20-30 430-820*/
  color: #5E7252;
  font-weight: bold;
  line-height: calc(52/30);
  text-align: center;
}
.hgm_txt01:last-child{
  margin-top: clamp(2.5rem, 0.2949rem + 8.2051vw, 4.5rem);/*40-72 430-820*/
}
.hgm_txt02{
  margin-top: clamp(2rem, 0.3462rem + 6.1538vw, 3.5rem);/*32-56 430-820*/
  font-size: clamp(1.875rem, 0.9103rem + 3.5897vw, 2.75rem);/*30-44 430-820*/
  color: #5E7252;
  font-weight: bold;
  text-align: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.hgm_txt02_num{
  margin-top: 56px;
  color: #EC6D5E;
}
.hgm_txt02 em{
  display:block;
  font-size:0.75rem;
  padding-right: 1.25em;
  text-align: right;
}

.hgm_topImg{
  max-width: max(730px, 38.02vw);
  width: 100%;
  margin-inline: auto;
  margin-top: 48px;
}


.hgm_splide{
  position: relative;
  max-width: max(728px, 37.92vw);
  margin-inline: auto;
  background-color: #FFFFFF;
  padding: 56px 0;
}
.hgm_splide::before{
  position: absolute;
  content: '';
  display: block;
  top: 0;
  left: 0;
  transform: scale(-1);
  width: 100%;
  height: 40px;
  background-image: url(../img/il_moya.webp);
}
.hgm_splide::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-image: url(../img/il_moya.webp);
}
.hgm_splide_slide{
  max-width: 234px;
}


.hgm_LinkWrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(16px,2vw,32px);
  padding-top: 16px;
}
.hgm_LinkWrap a{
  max-width: 80%;
  margin-inline: auto;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}
a.hgm_LinkShow{
  transition: opacity 0.2s ease;
}
a.hgm_LinkHidden{
  position: relative;
  pointer-events: none;
}
a.hgm_LinkHidden img{
  opacity: 0.3;
}
a.hgm_LinkHidden::after{
  position: absolute;
  content: '';
  display: block;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 30px;
  background-image: url(../img/txt_comingsoon.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-color: #FFFFFF;
}


.hgm_sponsorWrap{
  max-width: 638px;
  margin-inline: auto;
  margin-top: 48px;
}

.hgm_btmImg{
  max-width: max(730px, 38.02vw);
  width: 100%;
  margin-inline: auto;
  margin-top: 48px;
}



@media screen and (min-width:801px){
  a.hgm_LinkShow:hover{
    opacity: 0.7;
  }
}
@media screen and (max-width:800px){
  .tss_body{padding-bottom: 17.5vw;}
}