@charset "utf-8";

body{ position: relative;}


/* parallax-bg */

.parallax-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: 100vh;
  display: block;
  z-index: -1;
}

.parallax-bg .bg-image{
  position: relative;
  width: 100vw;
  height: 100vh;
  display: block;
  object-fit: cover;
  background: url(/forms/common/img/tatami2026/bg.avif);
  opacity: 1;
}


.tatami-campaign {
  font-family: "M PLUS 2", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.tatami-campaign strong{ font-weight: 700;}

.tatami-campaign-title-2026{
  position: relative;
  padding: 4em 2em  2em;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
}

@media screen and (max-width: 580px) {

.tatami-campaign-title-2026{ padding: 4em 0 2em;}

} /* End max 580 */

/*
.tatami-campaign-title-2026::before{
  position: absolute;
  top: 2.5rem;
  left: 0;
  width: 100%;
  height: calc(100% - 2.5rem);
  display: block;
  background-color: #addef8;
  mix-blend-mode: multiply;
  content: "";
  opacity: 1;
  z-index: 5;
}*/

.tatami-campaign-title-2026::after{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.5rem;
  display: block;  
  background:repeating-linear-gradient(-55deg,#a5d3e8,#a5d3e8 1rem,#fff 0,#fff 2rem);
  mix-blend-mode: multiply;
  content: "";
  opacity: 1;
  z-index: 5;
}

.tatami-footer::after{
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
}


.tatami-title-inner{
  position: relative;
  width: 100%;
  max-width: 80rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 800 / 560;
  z-index: 100;
  opacity: 1;
}

.tatami-title-inner .main-image{
  position: relative;
  width: 100%;
  max-width: 80rem;
  display: block;
  aspect-ratio: 800 / 560;
  z-index: 20;
}

.tatami-title-inner h1{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: 80rem;
  display: block;
  aspect-ratio: 800 / 560;
  z-index: 10;
}

.tatami-title-inner .main-image img,
.tatami-title-inner h1 img{
  width: 100%;
  display: block;
  aspect-ratio: 800 / 560;
}


.start .tatami-title-inner .main-image{
  animation: fade-img 1s 1.5s ease forwards;
  opacity: 0;
}

@keyframes fade-img {
  0% { transform: translateY(2em); opacity: 0;}
  50% { transform: translateY(-2em); opacity: 1;}
  100% { transform: translateY(0); opacity: 1;}
}


.start .tatami-title-inner h1{
  animation: show-logo-img 1s 0.5s ease forwards;
  opacity: 0;
}

@keyframes show-logo-img {
  0% { opacity: 0;}
  100% { opacity: 1;}
}


.started .tatami-title-inner .main-image,
.started .tatami-title-inner h1{ opacity: 1;}

/* .tatami-campaign-intro */

.tatami-campaign-intro{
  position: relative;
  margin: 0;
  padding: 4em 0;
  width: 100%;
  display: block;
}

.tatami-campaign-intro::before{
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #e88694;
  mix-blend-mode: multiply;
  content: "";
}


.tatami-campaign-intro .inner-bg{
  position: absolute;
  left: 0;
  top: -2%;
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  aspect-ratio: 1000 / 422;
  opacity: 0.5;
  z-index: -1;
  
    -webkit-mask-image: linear-gradient(180deg,rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 90%);
  mask-image: linear-gradient(180deg,rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 90%);
}



.tatami-campaign-intro .tatami-campaign-intro-inner{
  position: relative;
  margin: 0 auto;
  padding: 3em 1.5em 2em;
  width: 90%;
  max-width: 84rem;
  display: block;
  border: solid 0.3rem #fff;
  border-radius: 1em;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 1rem 1rem 0 #de5a6b;
  z-index: 10;
}

.intro-info div{
  position: relative;
  margin: 0;
  padding: 1.2em 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 0.2rem dotted #ccc;
}

.intro-info div .info-title{
position: relative;
  margin: 0;
  padding: 0.2em;
  width: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #de5a6b;
  color: #fff;
}

.intro-info div .info-title::after{
  position: absolute;
  top: 0;
  right: -1rem;
  margin: 0;
  width: 1rem;
  height: 100%;
  display: block;
  background-color: #de5a6b;
  clip-path: polygon(1rem 50%, 0% 0%, 0% 100%);  
  content: "";
}

.intro-info .catch{
  position: absolute;
  top: -2rem;
  right: 0;
  margin: 0;
  padding: 0;
  width: 60%;
  max-width: 18rem;
  display: block;
  aspect-ratio: 140 / 42;
}

.intro-info div dd em{ font-size: 2rem;}

.intro-info div .info-txt{
  margin: 0;
  padding: 0.2em;
  width: calc(100% - 6em);
  display: block;
}

.period{
  margin-top: -0.2em;
  display: block;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: #de5a6b;
}

.period span{ white-space: nowrap;}


.prize{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.prize dt{
  margin: 0 0 0.5em 0;
  width: 19.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;  
  color: #333;
}

.prize dt img{ width: 15rem;}
.prize dt strong{ width: calc(100% - 15.5rem); font-size: 1.8rem; white-space: nowrap;}

.prize-1st{ color: #036eb8;}
.prize-2nd{ color: #22ac38;}
.prize-3rd{ color: #f39800;}

.prize dd{
  margin: 0 0 0.5em 0;
  width: calc(100% - 19.5em);
  display: flex;
  align-items: center;
  justify-content: flex-start;  
  font-weight: 700;
  white-space: nowrap;
}

.prize dd em{ padding-right: 0.3rem; font-size: 2.4rem;}

.prize dd::before{
  margin: 0 0.5em 0 0;
  width: 5em;
  display: block;
  border-top: 0.4rem dotted #ccc;
  content: "";
}



@media screen and (max-width: 640px) {

.tatami-campaign-intro .tatami-campaign-intro-inner{ box-shadow: 0.5rem 0.5rem 0 #de5a6b;}

.intro-info div{
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.intro-info div .info-title{
  margin: 0;
  padding: 0.2em;
  width: 5.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-info .catch{
  top: 0.5em;
  right: -0.5em;
  width: 65%;
  max-width: 18rem;
}

.intro-info div .info-txt{
  margin: 0;
  padding: 1em 0 0.2em 0;
  width: 100%;
  display: block;
}


.prize dt{
  margin: 0 0 0.5em 0;
  width: 19.5em;
  display: flex;
  align-items: center;
  justify-content: space-between;  
  color: #333;
}

.prize dt img{ width: 14rem;}
.prize dt strong{ width: calc(100% - 14.5rem); font-size: 1.8rem; white-space: nowrap;}


.prize dd{
  margin: 0 0 0.5em 0;
  width: calc(100% - 19.5em);
  display: flex;
  align-items: center;
  justify-content: flex-start;  
  font-weight: 700;
  white-space: nowrap;
}

.prize dd::before{ width: 2em;}


}/* End max 640 */



@media screen and (max-width: 520px) {

.prize{
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.prize dt{
  margin: 0 0 0.5em 0;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;  
  color: #333;
}

.prize dt img{ width: 15rem;}
.prize dt strong{ margin-top: -0.5rem; width: calc(100% - 16rem); font-size: 1.8rem; white-space: nowrap;}


.prize dd{
  margin: -4rem 0 1em 0;
  width: calc(100% - 16.5rem);
  display: flex;
  align-items: center;
  justify-content: flex-end;  
  font-weight: 700;
  white-space: nowrap;  
  z-index: 100;
}

.prize dd::before{
  margin: 0 0.5em 0 0;
  width: calc(100% - 5em);
  display: block;
  border-top: 0.4rem dotted #ccc;
  content: "";
}

}/* End max 520 */


.tatami-campaign-contents {
  position: relative;
  margin: 0 auto 3em;
  padding: 0;
  width: 100%;
  display: block;
  overflow: hidden;
  z-index: 10;
}

.tatami-step{
  margin: 0 0 3em;
  padding: 0;
  display: flex;
  overflow: hidden;
  background-color: #eee;
}

.tatami-step li{
  position: relative;
  margin: 0;
  padding: 0.5em 0.2em 0.5em 1.5em;
  width: calc(100% / 3);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
 background: rgb(238,238,238);
background: linear-gradient(60deg, rgba(238,238,238,1) 25%, rgba(204,204,204,1) 75%); 
}


.tatami-step li:before{
  position: absolute;
  top: 0;
  right: -1.7rem;
  bottom: 0;
  margin: auto;
  padding: 0;
  width: 2.5em;
  height: 2.5em;
  background-color: #ccc;
  display: inline-block;
  transform: rotate(45deg) skew(calc((90deg - 45deg) / 2),calc((90deg - 45deg) / 2));  
  pointer-events: none;
  content: "";
  z-index: 10;
}

.tatami-step li:last-child::before{ display: none;}
.tatami-step li.active{ background: #de5a6b; color: #fff;}
.tatami-step li.active:before{ background-color: #de5a6b;}

.tatami-step li span{
  width: 100%;
  display: block;
  font-size: 1.2rem;
  line-height: 1.4;
}

.tatami-step li strong{
  position: relative;
  width: 100%;
  display: block;
  font-size: min(max(1.3rem, calc(1.3rem + ((1vw - 0.48rem) * 0.5769))), 1.6rem);
  min-height: 0vw;
  line-height: 1.4;
  z-index: 11;
}


@media screen and (max-width: 380px) {

.tatami-step li strong em{ display: none;}

} /* End max 380 */


.tatami-contents-title{
  position: relative;
  margin: 0 0 0.5em;
  padding: 1.5em 0 1.5em;
  font-size: min(max(2.8rem, calc(2.8rem + ((1vw - 0.48rem) * 1.5385))), 3.6rem);
  min-height: 0vw;
  text-align: center;
  font-weight: normal;
  line-height: 1.4;
  filter: drop-shadow(0 0 0.2rem #fff) drop-shadow(0 0 0.2rem #fff) drop-shadow(0 0 0.2rem #fff);
  z-index: 100;
}

.tatami-contents-title::after{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5em;
  margin: 0 auto;
  padding: 0;
  width: 2em;
  height: 0.4rem;
  display: block;
  background-color: #de5a6b;
  content: "";
}

.tatami-contents-title span{ padding: 0 1rem; white-space: nowrap;}

.form-button.form-submit-button.tatami{ background: url(/form/img/icon_arrow_next.svg) center right 1em no-repeat #de5a6b; background-size: 1.8rem; border: solid 0.1rem #de5a6b;}

.tatami-footer{
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;  
  height: 8rem;  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;  
  overflow: hidden;    
  color: #333;
  font-size: 1.4rem;
  text-align: center;
  font-weight: normal;
  line-height: 1.5;
  z-index: 100;
  mix-blend-mode: multiply;
}

.tatami-footer::after{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.5rem;  
  background:repeating-linear-gradient(-55deg,#a5d3e8,#a5d3e8 1rem,#fff 0,#fff 2rem);
  content: "";
}




.form-table {
  position: relative;
  margin: 0.5em 0 2em;
  padding: 0;
  width: 100%;
  overflow: hidden;
  border-top: solid 0.1rem #ccc;
  border-spacing: 0;
  background-color: #fff;
  text-align: left;
}

 #CONFIRMENQ { display: none; }