@charset "utf-8";
/* CSS Document */
.tss_footer{
  background-color: #C57D54;
}
.smf_spbr{
  display: inline-block;
}

.smf_keyvisual{
  position: relative;
  text-align: center;
  background-image: url(../img/top/ph_kv.webp);
  background-position: center top;
  background-size: contain;
  background-repeat: repeat-y;
}
.smf_keyvisual h1{
  max-width: 1350px;
  margin: 0 auto;
  transform: translateX(clamp(1rem, 0.033rem + 1.89vw, 1.625rem));
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: all 0.2s linear;
}
.smf_keyvisual h1 picture{
  display: block;
  margin: auto;
  aspect-ratio: 1350/396;
}
.smf_keyvisual h1.inView{opacity: 1;}

.smf_keyvisual .smf_catchcopy{
  position: relative;
  opacity: 0;
  transition: all 0.2s linear;
}
.smf_catchcopy_txt{
  position: relative;
  z-index: 1;
  width: 19%;
  margin: auto;
}
.smf_catchcopy_img{
  max-width: 1200px;
  width: 90%;
  position: absolute;
  top: clamp( -96px, calc(-62px + (-34) * ((100vw - 530px) / 1490)), -62px);
  left: 50%;
  transform: translateX(-50%);
}
.smf_catchcopy_img picture{
  aspect-ratio: 1200/828;
}
.smf_keyvisual .smf_catchcopy.inView{opacity: 1;}


.smf_bgwrap {
  padding: 0 12px;
  padding-top: clamp(10.625rem, 0.955rem + 18.87vw, 16.875rem);
}
.smf_corner h3 a{
  pointer-events:none;
}
.smf_corner{
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0 2%;
  margin-bottom: 32px;
}
.smf_corner .smf_cornerwrap{
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(20px);
}
.smf_corner > .smf_cornerwrap {
  flex: 1 1 78%;
}
.smf_corner > div:last-child {
  flex: 1 1 38.8%;
}
.smf_corner > div h2{
  margin-bottom: 12px;
  text-align: center;
  line-height: normal;
  font-weight: bold;
  color: #95241D;
  border: 2px solid #95241D;
  border-radius: 20px;
  background-color: #FFFFFF;
  padding: 4px 0;
}
.smf_corner > div:last-child h2{
  color: #368739;
  border: 2px solid #368739;
}
.smf_placewrap{
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.smf_placewrap > div{
  display:flex;
  flex-direction: column;
  gap: 5px 0;
}
.smf_placebox{
  max-width: 470px;
  margin: 0 auto;
  border: solid 1px #95241D;
  background-color: #FFFFFF;
  display:flex;
  flex-direction: column;
  gap:24px;
  padding: 6px 12px;
  border-radius:20px;
  height: 100%;
}
.smf_placebox a{
  display: flex;
  height: 100%;
}
.smf_corner > div:nth-of-type(2) .smf_placebox{
  border: solid 1px #368739;
}
.smf_corner.inView .smf_cornerwrap{
  opacity: 1;
  transform: translateY(0);
}


.smf_applecation{
  max-width: 470px;
  margin: 0 auto;
  padding: 6px;
  border-radius: 20px;
  background-color: #FBE582;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transition: all 0.2s linear;
}
.smf_applecation > div{
  padding: 8px 6px;
  border-radius: 20px;
  border: 2px dotted #FFFFFF;
}
.smf_applecation.inView{opacity: 1;}
.smf_applecation ul{
  display: flex;
  justify-content: center;
  gap: 0 12px;
}
.smf_applecation ul li{
  max-width: 150px;
  width: 100%;
}
.smf_applecation ul li a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  background-color: #040000;
  border: 1px solid #ADACA7;
}


.smf_shimanekko{
  max-width: 860px;
  margin: 0 auto 48px;
}


.smf_event{margin-bottom: 8px;}
.smf_event > div{
  max-width: 860px;
  margin: auto;
  padding: 24px 12px 32px;
  border-radius: 30px;
  background-color: #FFFFFF;
}
.smf_eventimage{
  max-width: 762px;
  margin-inline: auto;
  margin-bottom: 16px;
}
.smf_eventtext{
  max-width: 714px;
  margin: auto;
  padding: 8px 0 0 210px;
  background: url(../img/top/ph_image.webp) left top no-repeat;
  background-size: 334px;
}
.smf_eventtext h3{
  line-height: 1.5;
  margin-bottom: 8px;
  font-size: clamp(1.125rem, 0.6131rem + 1.9048vw, 1.375rem);
  font-weight: bold;
  color: #C57D54;
}
.smf_eventtext p{
  padding-left: 156px;
  line-height: 1.6;
  font-size: 0.75rem;
  text-align: left;
}
.smf_eventtext p:nth-last-of-type(n+2){margin-bottom: 8px;}
.smf_eventtext p a{color: #C57D54;}


.smf_venue{
  display: flex;
  justify-content: space-between;
  justify-content: center;
  align-items: flex-start;
  gap: 16px 8px;
  max-width: 1200px;
  width: 90%;
  margin: 0 auto 32px;
  padding: 44px clamp(0.875rem, -1.639rem + 4.91vw, 2.5rem);
  border-radius: 20px;
  background-color: #FFFFFF;
  border: 1px solid #BEBEBE;
}
.smf_venue dl{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 562px;
}
.smf_venue dl dt{
  width: 140px;
  text-align: left;
  line-height: 1.75;
  font-size: clamp(1rem, 0.807rem + 0.38vw, 1.125rem);
  font-weight: bold;
  color: #7b7b7b;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.2s linear;
}
.smf_venue dl dd{
  width: calc(100% - 140px);
  line-height: 1.75;
  font-size: clamp(1rem, 0.807rem + 0.38vw, 1.125rem);
  text-align: left;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.2s linear;
}
.smf_venue dl dt:nth-of-type(2),
.smf_venue dl dd:nth-of-type(2){transition-delay: 0.15s;}
.smf_venue dl dt:nth-of-type(3),
.smf_venue dl dd:nth-of-type(3){transition-delay: 0.3s;}
.smf_venue dl dt:nth-last-of-type(n+2),
.smf_venue dl dd:nth-last-of-type(n+2){margin-bottom: 24px;}
.smf_venue dl.inView dt,
.smf_venue dl.inView dd{
  opacity: 1;
  transform: translateY(0);
}

.smf_maparea{
  text-align:center;
  margin: 40px 0;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.smf_maparea h3{
  margin-bottom: 8px;
  font-size: clamp(1.25rem, 0.6987rem + 2.0513vw, 1.75rem);
  font-weight: 600;
}
.smf_maparea a {
  background: #A72417;
  border-radius: 9999px;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: auto;
  max-width: 320px;
  padding: 16px 25px;
  text-decoration: none;
  color: #FFFFFF;
  line-height: 1.8;
  transition: 0.3s ease-in-out;
  font-weight: 500;
}


.smf_map{
  width: 438px;
  aspect-ratio: 438/342;
  opacity: 0;
  transition: all 0.2s linear;
}
.smf_map.inView{opacity: 1;}
.smf_map iframe{
  width: 100%;
  height: 100%;
}


.smf_character{
  margin-bottom: 40px;
}

.smf_sponsor{text-align: center;padding-bottom: 72px;}
.smf_sponsor h3{
  margin-bottom: 18px;
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  font-size: 1.875rem;
  font-weight: 600;
  opacity: 0;
  transition: all 0.2s linear;
}
.smf_sponsor h3.inView{opacity: 1;}
.smf_sponsor ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: auto;
  gap: 16px 24px;
}
.smf_sponsor ul li{
  max-width: 242px;
  aspect-ratio: 242/102;
  border: 1px solid #BEBEBE;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.2s linear;
}
.smf_sponsor ul li:nth-of-type(2){transition-delay: 0.15s;}
.smf_sponsor ul li:nth-of-type(3){transition-delay: 0.3s;}
.smf_sponsor ul li:nth-of-type(4){transition-delay: 0.45s;}
.smf_sponsor ul li:nth-of-type(5){transition-delay: 0.6s;}
.smf_sponsor ul li:nth-of-type(6){transition-delay: 0.75s;}
.smf_sponsor ul li:nth-of-type(7){transition-delay: 0.9s;}
.smf_sponsor ul li:nth-of-type(8){transition-delay: 1.05s;}
.smf_sponsor ul.inView li{
  opacity: 1;
  transform: translateY(0);
}





@media screen and (min-width:821px){
  .smf_eventtext p a:hover{text-decoration: underline;}
  .smf_applecation ul li a:hover,
  /* .smf_placebox a:hover{opacity:0.5;} */
  .smf_maparea a:hover {
    background: #910920;
    color: #FFF;
  }
}




@media screen and (max-width:820px){
  .smf_bgwrap {
    padding-bottom: calc(20vw + 120px);
  }
  .smf_keyvisual h1{
    transform: translate(0);
    margin-bottom: 32px;
  }
  .smf_keyvisual{
    background-image: url(../img/top/ph_kvsp.webp);
    background-size: cover;
    background-position: center top;
  }

  .smf_catchcopy_img{
    width: 99%;
    top: 0px;
    }
  .smf_bgwrap{padding-top: clamp(9.375rem, 1.106rem + 30.77vw, 16.875rem);}


  .smf_corner{width: 100%;flex-wrap: wrap;justify-content: center;}


  .smf_venue{
    flex-wrap: wrap;
    width: 100%;
    padding: max(24px, 5.36vw) max(16px, 4.87vw);
  }
  .smf_venue dl{
    width: 100%;
    margin-bottom: 16px;
  }
  .smf_venue dl dt,
  .smf_venue dl dd{font-size: clamp(0.875rem, 0.599rem + 1.03vw, 1.125rem);}/*14-18 430-820*/
  .smf_map{width: 100%;}


  .smf_sponsor h3{font-size: clamp(1.25rem, 0.147rem + 4.1vw, 2.25rem);}/*20-36 430-820*/
  .smf_sponsor ul li{width: calc((100% - 60px) / 4);}
}


@media screen and (max-width:640px){
  .smf_corner{
    max-width: 470px;
    justify-content: center;
  }
  .smf_placewrap{
    flex-wrap: wrap;
    justify-content: center;
  }
  .smf_placewrap > div{
    width: 100%;
  }
  .smf_corner > div:nth-of-type(2){width: 100%;}

  .smf_eventtext{
    padding: 0;
    background-position: center 64px;
    background-size: contain;
  }
  .smf_eventtext h3{
    margin-bottom: 54vw;
    text-align: center;
  }
  .smf_eventtext h3 span{display: block;}
  .smf_eventtext p{padding-left: 0;}
}
@media screen and (max-width:430px){
  .smf_corner{
    flex-wrap: wrap;
    justify-content: center;
  }


  .smf_applecation ul{
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
  }


  .smf_venue{padding: 24px 16px;}
  .smf_venue dl dt{
    width: 100%;
    font-size: 0.875rem;
  }
  .smf_venue dl dt:nth-last-of-type(n+2){margin-bottom: 0;}
  .smf_venue dl dd{
    width: 100%;
    font-size: 0.875rem;
  }


  .smf_sponsor ul{
    justify-content: space-between;
    gap: 16px 4%;
  }
  .smf_sponsor ul li{width: 48%;}
}