:root {
  --size-scale: calc(1px * 480 / 375);
  --size-scale-pc: calc(1vw / 1780 * 100);
}
@media screen and (min-width: 1640px) {
  :root {
    --size-scale-pc: calc(1 * 1px);
  }
}


@media screen and (max-width: 1280px) {
  :root {
    --size-scale: calc(1px);
  }
}
@media screen and (max-width: 768px) {
  :root {
    --size-scale: calc(1vw / 375 * 100);
  }
}

html{
  scroll-behavior: smooth;
  scroll-padding: 200px;
  scrollbar-gutter: stable;
}
body{
  visibility: visible!important;
  opacity: 1 !important;
}
body.is-fixed{
  overflow: hidden;
}
img{
  max-width: 100%;
  backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
video{
  max-width: 100%;
  backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
  pointer-events: none;
}


/* layout
------------------------------------------------------ */
.topping{
  background-image: url(/synced-assets/campaign_topping/assets/img/pc_bg.jpg);
  background-size: 600px;
  background-repeat: repeat;
  background-attachment: fixed;
}
.wrap{
  position: relative;
  display: flex;
  justify-content: center;
}

.l-main{
  width: calc(375 * var(--size-scale));
  background-image: url(/synced-assets/campaign_topping/assets/img/bg02.jpg);
  box-sizing: content-box;
  overflow: hidden;
  background-color: #fff;
  border: 4px solid #fff;
  box-shadow: 4px 4px 8px #9f671f;
  flex: 0 0 auto;
}
.l-copy{
  /* grid-column: 1 / 2; */
}


.l-link{
  position: relative;
  opacity: 0;
  transition: opacity .3s;
}
.l-link.is-load{
  opacity: 1;
}
.l-link_wrap{
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  max-width: calc(720 * var(--size-scale-pc));
  height: 100vh;
  box-sizing: content-box;
  padding-right: calc(20 * var(--size-scale-pc));
}
.l-link_wrap_title{
  display: block;
  width: calc(255 * var(--size-scale-pc));
  margin: auto;
  margin-top: calc(30 * var(--size-scale-pc));
  margin-left: calc(-30 * var(--size-scale-pc));
  cursor: pointer;
}
.l-link_wrap_bottom{
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  margin: calc(30 * var(--size-scale-pc)) auto calc(60 * var(--size-scale-pc));
  width: calc(480 * var(--size-scale-pc));
}
.l-link_wrap_bottom_button{
  width: calc(92 * var(--size-scale-pc));
  margin: calc(10 * var(--size-scale-pc)) calc(10 * var(--size-scale-pc));
  flex: 0 0 auto;
  cursor: pointer;
  flex: 0 0 auto;
}
.l-link_wrap_bottom_button-l01{
  width: calc(112 * var(--size-scale-pc));
  margin: calc(-14 * var(--size-scale-pc)) calc(-10 * var(--size-scale-pc)) calc(5 * var(--size-scale-pc)) calc(0 * var(--size-scale-pc));
  flex: 0 0 auto;
  cursor: pointer;
}
.l-link_wrap_bottom_button-l02{
  width: calc(126 * var(--size-scale-pc));
  margin: calc(-14 * var(--size-scale-pc)) calc(-10 * var(--size-scale-pc)) calc(5 * var(--size-scale-pc)) calc(10 * var(--size-scale-pc));
  flex: 0 0 auto;
  cursor: pointer;
}
.l-link_copy{
  position: static;
  width: 100%;
  margin-top: calc(12 * var(--size-scale-pc));
  font-size: calc(12 * var(--size-scale-pc));
}

.l-copy{
  position: relative;
  opacity: 0;
  transition: opacity .3s;
}
.l-copy.is-load{
  opacity: 1;
}
.l-copy_wrap{
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: calc(296 * var(--size-scale-pc));
  height: 100vh;
  padding-bottom: calc(60 * var(--size-scale-pc));
  margin-left: calc(60 * var(--size-scale-pc));
}
.l-copy_wrap_image{
  width: calc(183 * var(--size-scale-pc));
  margin-bottom: calc(55 * var(--size-scale-pc));
}
.l-copy_wrap_bottom{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.l-copy_wrap_bottom_button{
  width: calc(92 * var(--size-scale-pc));
}
.l-copy_wrap_bottom_button-end{
  width: calc(113 * var(--size-scale-pc));
  margin-right: calc(-22 * var(--size-scale-pc));
}

/* .o-mobile-header__bar {
  height: calc(80 * var(--size-scale-pc));
  height: 80px;
}

.t-layout {
  display: flex;
  min-height: 100vh;
} */


@media screen and (max-width: 768px) {
  .wrap{
    display: block;
  }
  .l-main{
    width: 100%;
    /* height: calc(4225 * var(--size-scale)); */
    border: none;
    box-shadow: unset;
  }
  .l-link{
    display: none;
  }
  .l-copy{
    display: none;
  }
}


/* kv
------------------------------------------------------ */

.kv{
  position: relative;
  width: 100%;
  height: calc(530 * var(--size-scale));
  background-image: url(/synced-assets/campaign_topping/assets/img/kv_item_bg.jpg);
  background-size: 126% auto;
  transform: translateZ(0);
  overflow: hidden;
  background-position: top 77% right 48%;
  animation-name: kv;
  animation-delay: 5.4s;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-direction: normal;
  animation-play-state: paused;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  z-index: 2;
}
.kv.is-active{
  animation-play-state: running;
}
@keyframes kv {
  0%{
    filter: drop-shadow(0px 0px 0px #333);
    transform: translate(0, 0) rotate(0deg);
  }
  100%{
    opacity: 1;
    filter: drop-shadow(4px 4px 6px #333);
    transform: translate(0px, 10px) rotate(-3.6deg);
  }
}
.kv_item{
  position: absolute;
  opacity: 1;
}
.kv_item-01{
  position: absolute;
  top: calc(99 * var(--size-scale));
  right: calc(-59 * var(--size-scale));
  width: calc(222 * var(--size-scale));
  opacity: 0;
  z-index: 18;
  animation-duration: .9s;
  animation-delay: 2.6s;
}
.kv.is-active .kv_item-01{
  animation-name: kv_item-01;
  animation-fill-mode: both;
}
@keyframes kv_item-01 {
  0%{
    opacity: 0;
    transform: translate(10px, 0px);
  }
  100%{
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
.kv_item-02{
  position: absolute;
  top: calc(298 * var(--size-scale));
  right: calc(-56 * var(--size-scale));
  width: calc(165 * var(--size-scale));
  z-index: 17;
}
.kv_item-03{
  position: absolute;
  bottom: calc(-53 * var(--size-scale));
  right: calc(-53 * var(--size-scale));
  width: calc(305 * var(--size-scale));
  z-index: 16;
}
.kv_item-04{
  position: absolute;
  bottom: calc(-48 * var(--size-scale));
  right: calc(202 * var(--size-scale));
  width: calc(140 * var(--size-scale));
  z-index: 15;
}
.kv_item-05{
  position: absolute;
  bottom: calc(-47 * var(--size-scale));
  left: calc(-53 * var(--size-scale));
  width: calc(255 * var(--size-scale));
  z-index: 14;
}
.kv_item-06{
  position: absolute;
  top: calc(105 * var(--size-scale));
  left: calc(-65 * var(--size-scale));
  width: calc(421 * var(--size-scale));
  opacity: 0;
  z-index: 13;
  animation-duration: .9s;
  animation-delay: 2s;
}
.kv.is-active .kv_item-06{
  animation-name: kv_item-06;
  animation-fill-mode: both;
}
@keyframes kv_item-06 {
  0%{
    opacity: 0;
    transform: translate(-8px, -2px);
  }
  100%{
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
.kv_item-07{
  position: absolute;
    top: calc(64 * var(--size-scale));
  left: calc(-32 * var(--size-scale));
  width: calc(149 * var(--size-scale));
  z-index: 12;
}
.kv_item-08{
  position: absolute;
  top: calc(-112 * var(--size-scale));
  left: calc(-3 * var(--size-scale));
  width: calc(255 * var(--size-scale));
  z-index: 11;
}

.kv_dondon{
  bottom: calc(-52 * var(--size-scale));
  right: calc(-62 * var(--size-scale));
  width: calc(355 * var(--size-scale));
  position: absolute;
  z-index: 35;
  transform: translateZ(0);
  opacity: 1;
  animation-name: kv_dondon;
  animation-delay: 4s;
  animation-duration: .9s;
  animation-timing-function: ease-in-out;
  animation-direction: normal;
  animation-play-state: paused;
  animation-fill-mode: both;
  animation-iteration-count: 1;
  will-change: transform;
  cursor: pointer;
}
.kv.is-active .kv_dondon{
  opacity: 1;
  animation-play-state: running;
}
@keyframes kv_dondon {
  0%{
    opacity: 0;
    transform: translate(0px, 0px) scale(0.85);
  }
  80%{
    opacity: 1;
    transform: translate(0px, 0px) scale(0.25);
  }
  100%{
    opacity: 1;
    transform: scale(.36) rotate(3deg);
  }
}
.kv_message-01{
  position: absolute;
  top: calc(49 * var(--size-scale));
  right: calc(91 * var(--size-scale));
  width: calc(60 * var(--size-scale));
  opacity: 0;
  z-index: 31;
  animation-duration: .3s;
  animation-delay: 2s;
}
.kv.is-active .kv_message-01{
  animation-name: kv_message-01;
  animation-fill-mode: both;
}
@keyframes kv_message-01 {
  0%{
    filter: brightness(10);
    transform: scale(.95);
    opacity: 0;
  }
  100%{
    filter: brightness(1);
    transform: scale(1);
    opacity: 1;
  }
}
.kv_message-02{
  position: absolute;
  top: calc(75 * var(--size-scale));
  right: calc(141 * var(--size-scale));
  width: calc(60.5 * var(--size-scale));
  opacity: 0;
  z-index: 31;
  animation-duration: .3s;
  animation-delay: 2.6s;
}
.kv.is-active .kv_message-02{
  animation-name: kv_message-02;
  animation-fill-mode: both;
}
@keyframes kv_message-02 {
  0%{
    filter: brightness(10);
    transform: scale(.95);
    opacity: 0;
  }
  100%{
    filter: brightness(1);
    transform: scale(1);
    opacity: 1;
  }
}
.kv_message-03{
  position: absolute;
  top: calc(67 * var(--size-scale));
  right: calc(183 * var(--size-scale));
  width: calc(101 * var(--size-scale));
  opacity: 0;
  z-index: 31;
  animation-duration: .3s;
  animation-delay: 3.2s;
}
.kv.is-active .kv_message-03{
  animation-name: kv_message-03;
  animation-fill-mode: both;
}
@keyframes kv_message-03 {
  0%{
    filter: brightness(10);
    transform: scale(.95);
    opacity: 0;
  }
  100%{
    filter: brightness(1);
    transform: scale(1);
    opacity: 1;
  }
}
.kv_message-04{
  position: absolute;
  top: calc(253 * var(--size-scale));
  right: calc(184 * var(--size-scale));
  width: calc(84 * var(--size-scale));
  opacity: 0;
  z-index: 31;
  animation-duration: .3s;
  animation-delay: 3.2s;
}
.kv.is-active .kv_message-04{
  animation-name: kv_message-04;
  animation-fill-mode: both;
}
@keyframes kv_message-04 {
  0%{
    transform: scale(.85);
    opacity: 0;
  }
  100%{
    filter: brightness(1);
    transform: scale(1);
    opacity: 1;
  }
}
.kv_message-05{
  position: absolute;
  bottom: calc(96 * var(--size-scale));
  left: calc(70 * var(--size-scale));
  width: calc(72 * var(--size-scale));
  opacity: 0;
  z-index: 31;
  animation-duration: .6s;
  animation-delay: 3.6s;
}
.kv.is-active .kv_message-05{
  animation-name: kv_message-05;
  animation-fill-mode: both;
}
@keyframes kv_message-05 {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.kv_message-06{
  position: absolute;
  bottom: calc(4 * var(--size-scale));
  right: calc(25 * var(--size-scale));
  width: calc(280 * var(--size-scale));
  opacity: 0;
  z-index: 31;
  animation-duration: .6s;
  animation-delay: 5.2s;
}
.kv.is-active .kv_message-06{
  animation-name: kv_message-06;
  animation-fill-mode: both;
}
@keyframes kv_message-06 {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.kv_logo{
  position: absolute;
  bottom: calc(20 * var(--size-scale));
  left: calc(25 * var(--size-scale));
  width: calc(49 * var(--size-scale));
  opacity: 0;
  z-index: 31;
  animation-duration: .3s;
  animation-delay: 3.6s;
}
.kv.is-active .kv_logo{
  animation-name: kv_logo;
  animation-fill-mode: both;
}
@keyframes kv_logo {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}





/* table
------------------------------------------------------ */
.float{
  
}
@media screen and (min-width: 768px){
  .float{
    /* display: none; */
  }
}
.float_area{
  position: fixed;
  bottom: calc(60 * var(--size-scale));
  left: auto;
  width: calc(375 * var(--size-scale));
  height: calc(1 * var(--size-scale));
  margin: auto;
  transition: opacity .3s;
  z-index: 20;
}

@media screen and (min-width: 1280px){
  .float_area{
    bottom: calc(30 * var(--size-scale));
  }
}

.table:has(.float-end.is-active) .float_area{
  position: absolute;
  opacity: 0;
}

.table_copy{
  margin: calc(40 * var(--size-scale))  calc(10 * var(--size-scale)) calc(0 * var(--size-scale));
  font-family: Yu Gothic Pr6N B,sans-serif;
  font-size: calc(12 * var(--size-scale));
  font-weight: 500;
  line-height: 1.45;
  text-align: justify;
  font-feature-settings: "palt";
  color: #fff;
  letter-spacing: .035em;
  opacity: .6;
}

.float_dondon{
  position: absolute;
  bottom: 0;
  right: calc(10 * var(--size-scale));
  width: calc(80 * var(--size-scale));
  filter: drop-shadow(calc(4 * var(--size-scale)) calc(4 * var(--size-scale)) calc(4 * var(--size-scale)) #4A3115);
  transform: translateY(calc(10vh + calc(375 * var(--size-scale))));
  transition: transform .6s;
  transition-timing-function: cubic-bezier(.34,-0.1,.78,-0.1);
}
.float_dondon a{
  display: block;
  cursor: pointer;
}
.float.is-active .float_dondon{
  transform: translateY(0);
  transition-timing-function: cubic-bezier(.29,1.1,.63,1.1);
}
.float .float_dondon:has(.is-hidden){
  transform: translateY(0);
  transition: opacity.3s;
  opacity: 0;
  pointer-events: none;
}
.float.is-active .float_dondon:hover{
  transform: scale(1.1) translateY(0);
}



.table{
  position: relative;
  width: 100%;
  padding-bottom: calc(30 * var(--size-scale));
  background-size: cover;
  background-position: top center;
  background-image: url(/synced-assets/campaign_topping/assets/img/bg02.jpg);
  background-size: 100% auto;
  background-repeat: repeat;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s;
}
.table.is-load{
  opacity: 1;
}

.product{

}
.product-steam{
  position: absolute;
  mix-blend-mode: screen;
  opacity: 0;
  animation-name: product-steam;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  pointer-events: none;
  z-index: 5;
}
.product-steam img{
  pointer-events: none;
}
.product-steam + .product-steam{
  animation-delay: 2.5s;
}
@keyframes product-steam {
  0%{
    opacity: 0;
    transform: scale(.8);
  }
  50%{
    opacity: 1;
    transform: scale(1);
  }
  100%{
    opacity: 0;
    transform: scale(1.2);
  }
}


/* attention01
------------------------ */
.product-attention01{
  margin-top: calc(-6 * var(--size-scale));
  margin-left: auto;
  margin-right: calc(3 * var(--size-scale));
  width: calc(192 * var(--size-scale));
}


/* info01
------------------------ */
.product-info01{
  margin-top: calc(17 * var(--size-scale));
  margin-left: calc(4 * var(--size-scale));
  width: calc(333 * var(--size-scale));
}

/* wakame
------------------------ */
.product-wakame01{
  position: relative;
  width: calc(352 * var(--size-scale));
  margin-top: calc(-214 * var(--size-scale));
  margin-left: calc(-26 * var(--size-scale));
}
.product-wakame01-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(-20%, -2%);
}
.is-active > .product-wakame01-slideIn{
  transform: translate(0, 0);
}
.product-wakame01-front{
  transform-origin: 0% 10%;
}
.product-wakame01-linkArea{
  position: absolute;
  top: calc(26 * var(--size-scale));
  left: calc(-4 * var(--size-scale));
  width: calc(202 * var(--size-scale));
  height: calc(290 * var(--size-scale));
  transform: rotate(7deg);
  cursor: pointer;
  z-index: 50;
}
.product-wakame01_plate01{
  position: relative;
  width: calc(138 * var(--size-scale));
  margin-top: calc(-43 * var(--size-scale));
  margin-left: calc(41 * var(--size-scale));
}
.product-wakame01_plate01-linkArea{
  position: absolute;
  top: calc(6 * var(--size-scale));
  left: calc(13 * var(--size-scale));
  width: calc(98 * var(--size-scale));
  height: calc(221 * var(--size-scale));
  transform: rotate(-11deg);
  cursor: pointer;
  z-index: 50;
}
.product-wakame01_plate02{
  position: relative;
  width: calc(170 * var(--size-scale));
  margin-top: calc(-212 * var(--size-scale));
  margin-left: auto;
  margin-right: calc(16 * var(--size-scale));
}
.product-wakame01_plate02-linkArea{
  position: absolute;
  top: calc(31 * var(--size-scale));
  left: calc(1 * var(--size-scale));
  width: calc(163 * var(--size-scale));
  height: calc(89 * var(--size-scale));
  cursor: pointer;
  transform: rotate(-19deg);
  z-index: 50;
}
.product-udon01{
  position: relative;
  width: calc(345 * var(--size-scale));
  margin-top: calc(-185 * var(--size-scale));
  margin-left: auto;
  margin-right: calc(-147 * var(--size-scale));
  z-index: 1;
}
.product-udon01-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(30%, -5%);
}
.is-active > .product-udon01-slideIn{
  transform: translate(0, 0);
}
.product-udon01-front{
  transform-origin: 60% 20%;
}
.product-udon01-linkArea{
  position: absolute;
  top: calc(-4 * var(--size-scale));
  left: calc(14 * var(--size-scale));
  width: calc(283 * var(--size-scale));
  height: calc(310 * var(--size-scale));
  border-radius: 100%;
  cursor: pointer;
  z-index: 50;
}
.product-udon01-steam{
  top: calc(9 * var(--size-scale));
  left: calc(134 * var(--size-scale));
  width: calc(333 * var(--size-scale));
}


/* rayu
------------------------ */
.product-rayu01{
  position: relative;
  width: calc(253 * var(--size-scale));
  margin-top: calc(-269 * var(--size-scale));
  margin-left: auto;
  margin-right: calc(-13 * var(--size-scale));
}
.product-rayu01-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(20%, -3%);
}
.is-active > .product-rayu01-slideIn{
  transform: translate(0, 0);
}
.product-rayu01-front{
  transform-origin: 70% 15%;
}
.product-rayu01-linkArea{
  position: absolute;
  top: calc(20 * var(--size-scale));
  left: calc(50 * var(--size-scale));
  width: calc(200 * var(--size-scale));
  height: calc(270 * var(--size-scale));
  cursor: pointer;
  z-index: 50;
}
.product-rayu01_plate01{
  position: relative;
  width: calc(157 * var(--size-scale));
  margin-top: calc(-110 * var(--size-scale));
  margin-left: calc(196 * var(--size-scale));
}
.product-rayu01_plate01-linkArea{
  position: absolute;
  top: calc(-2 * var(--size-scale));
  left: calc(14 * var(--size-scale));
  width: calc(128 * var(--size-scale));
  height: calc(221 * var(--size-scale));
  transform: rotate(6deg);
  cursor: pointer;
  z-index: 50;
}
.product-rayu01_plate02{
  position: relative;
  width: calc(138 * var(--size-scale));
  margin-top: calc(18 * var(--size-scale));
  margin-left: calc(38 * var(--size-scale));
  z-index: 5;
}
.product-rayu01_plate02-linkArea{
  position: absolute;
  top: calc(6 * var(--size-scale));
  left: calc(1 * var(--size-scale));
  width: calc(138 * var(--size-scale));
  height: calc(91 * var(--size-scale));
  transform: rotate(-11deg);
  cursor: pointer;
  z-index: 50;
}
.product-udon02{
  position: relative;
  width: calc(350 * var(--size-scale));
  margin-top: calc(-114 * var(--size-scale));
  margin-left: calc(-133 * var(--size-scale));
  z-index: 1;
}
.product-udon02-linkArea{
  position: absolute;
  top: calc(11 * var(--size-scale));
  left: calc(21 * var(--size-scale));
  width: calc(300 * var(--size-scale));
  height: calc(300 * var(--size-scale));
  border-radius: 100%;
  cursor: pointer;
  z-index: 50;
}
.product-udon02-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(-20%, -10%);
}
.is-active > .product-udon02-slideIn{
  transform: translate(0, 0);
}
.product-udon02-front{
  transform-origin: 40% 20%;
}
.product-udon02-steam{
  top: calc(49 * var(--size-scale));
  left: calc(-106 * var(--size-scale));
  width: calc(293 * var(--size-scale));
}



/* shitimi
------------------------ */
.product-shitimi01{
  position: relative;
  width: calc(170 * var(--size-scale));
  margin-top: calc(-30 * var(--size-scale));
  margin-left: calc(-27 * var(--size-scale));
  z-index: 5;
}
.product-shitimi01-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(-20%, 20%);
}
.is-active > .product-shitimi01-slideIn{
  transform: translate(0, 0);
}
.product-shitimi01-front{
  transform-origin: 5% 30%;
}
.product-shitimi01-linkArea{
  position: absolute;
  top: calc(-20 * var(--size-scale));
  left: calc(10 * var(--size-scale));
  width: calc(103 * var(--size-scale));
  height: calc(180 * var(--size-scale));
  transform: rotate(45deg);
  cursor: pointer;
  z-index: 50;
}
.product-shitimi02{
  position: relative;
  width: calc(190 * var(--size-scale));
  margin-top: calc(-199 * var(--size-scale));
  margin-left: calc(4 * var(--size-scale));
  z-index: 3;
}
.product-shitimi01_plate01{
  position: relative;
  width: calc(62 * var(--size-scale));
  margin-top: calc(-190 * var(--size-scale));
  margin-left: calc(19 * var(--size-scale));
}

/* udon03
------------------------ */
.product-udon03{
  position: relative;
  width: calc(341 * var(--size-scale));
  margin-top: calc(-144 * var(--size-scale));
  margin-left: auto;
  margin-right: calc(-152 * var(--size-scale));
  z-index: 2;
}
.product-udon03-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(20%, 5%);
}
.product-udon03-linkArea{
  position: absolute;
  top: calc(7 * var(--size-scale));
  left: calc(10 * var(--size-scale));
  width: calc(300 * var(--size-scale));
  height: calc(350 * var(--size-scale));
  border-radius: 100% 100% 0 0;
  cursor: pointer;
  z-index: 50;
}
.is-active > .product-udon03-slideIn{
  transform: translate(0, 0);
}
.product-udon03-front{
  transform-origin: 70% 34%;
}
.is-active > .c-motion_vibration.product-udon03-front{
  animation-delay: 1s;
}
.product-udon03_option{
  position: relative;
  width: calc(175 * var(--size-scale));
  margin-top: calc(-94 * var(--size-scale));
  margin-left: auto;
  margin-right: calc(61 * var(--size-scale));
  z-index: 1;
}
.product-udon03_option-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(20%, 5%);
}
.product-udon03_option-linkArea{
  position: absolute;
  top: calc(7 * var(--size-scale));
  left: calc(8 * var(--size-scale));
  width: calc(133 * var(--size-scale));
  height: calc(133 * var(--size-scale));
  border-radius: 100%;
  cursor: pointer;
  z-index: 50;
}
.is-active > .c-motion_vibration.product-udon03_option-front{
  animation-delay: 1s;
}
.is-active > .product-udon03_option-slideIn{
  transform: translate(0, 0);
}
.product-udon03-steam{
  top: calc(-41 * var(--size-scale));
  left: calc(174 * var(--size-scale));
  width: calc(293 * var(--size-scale));
}
.product-udon03-modal{
  position: absolute;
  top: calc(60 * var(--size-scale));
  right: calc(163 * var(--size-scale));
  width: calc(125 * var(--size-scale));
  height: calc(217 * var(--size-scale));
  z-index: 50;
  opacity: 0;
  transition: opacity .6s, transform .6s;
  transform: translateX(10%);
  pointer-events: none;
  z-index: 61;
}
.product-udon03-modal.is-open{
  opacity: 1;
  transform: translateX(0%);
  pointer-events: all;
}

.product-udon03-modal_out{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
}
.product-udon03-modal.is-open + .product-udon03-modal_out{
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
}



/* shoga
------------------------ */
.product-shoga01{
  position: relative;
  width: calc(185 * var(--size-scale));
  margin-top: calc(-59 * var(--size-scale));
  margin-left: calc(22 * var(--size-scale));
}
.product-shoga01-linkArea{
  position: absolute;
  top: calc(18 * var(--size-scale));
  left: calc(28 * var(--size-scale));
  width: calc(110 * var(--size-scale));
  height: calc(180 * var(--size-scale));
  cursor: pointer;
  transform: rotate(-32deg);
  z-index: 50;
}
.product-shoga01-linkArea{
  position: absolute;
  top: calc(-13 * var(--size-scale));
  left: calc(8 * var(--size-scale));
  width: calc(126 * var(--size-scale));
  height: calc(190 * var(--size-scale));
  cursor: pointer;
  transform: rotate(22deg);
  z-index: 50;
}
.product-shoga01-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(-7%, 10%);
}
.is-active > .product-shoga01-slideIn{
  transform: translate(0, 0);
}
.product-shoga01-front{
  transform-origin: 45% 0%;
}
.is-active > .c-motion_vibration.product-shoga01-front{
  animation-delay: 1.5s;
}
.product-shoga01_plate01{
  position: relative;
  width: calc(65 * var(--size-scale));
  margin-top: calc(-345 * var(--size-scale));
  margin-left: calc(33 * var(--size-scale));
}




/* goma
------------------------ */
.product-goma01{
  position: relative;
  width: calc(159 * var(--size-scale));
  margin-top: calc(-78 * var(--size-scale));
  margin-left: calc(155 * var(--size-scale));
  z-index: 1;
}
.product-goma01-linkArea{
  position: absolute;
  top: calc(1 * var(--size-scale));
  left: calc(0 * var(--size-scale));
  width: calc(100 * var(--size-scale));
  height: calc(100 * var(--size-scale));
  cursor: pointer;
  border-radius: 100%;
  z-index: 50;
}
.product-goma01-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(2%, 15%);
}
.is-active > .product-goma01-slideIn{
  transform: translate(0, 0);
}
.product-goma01-front{
  transform-origin: 21% 13%;
}
.is-active > .c-motion_vibration.product-goma01-front{
  animation-delay: 1.5s;
}
.product-goma_plate01{
  position: relative;
  width: calc(68 * var(--size-scale));
  margin-top: calc(-239 * var(--size-scale));
  margin-left: calc(50 * var(--size-scale));
}
.product-goma01_plate01{
  position: relative;
  width: calc(50 * var(--size-scale));
  margin-top: calc(-152 * var(--size-scale));
  margin-left: calc(130 * var(--size-scale));
}


/* udon04
------------------------ */
.product-udon04{
  position: relative;
  width: calc(225 * var(--size-scale));
  margin-top: calc(9 * var(--size-scale));
  margin-left: calc(-13 * var(--size-scale));
}
.product-udon04-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(-20%, 7%);
}
.is-active > .product-udon04-slideIn{
  transform: translate(0, 0);
}
.product-udon04-linkArea{
  position: absolute;
  top: calc(-1 * var(--size-scale));
  left: calc(-85 * var(--size-scale));
  width: calc(300 * var(--size-scale));
  height: calc(330 * var(--size-scale));
  border-radius: 100%;
  cursor: pointer;
  z-index: 50;
}
.product-udon04-front{
  transform-origin: 20% 20%;
}
.is-active > .c-motion_vibration.product-shoga01-front{
  animation-delay: 1.5s;
}
.is-active > .product-udon04-back{
  animation-name: unset;
}
.product-udon04-steam{
  top: calc(-61 * var(--size-scale));
  left: calc(-116 * var(--size-scale));
  width: calc(353 * var(--size-scale));
}
.product-udon04-modal{
  position: absolute;
  top: calc(42 * var(--size-scale));
  left: calc(155 * var(--size-scale));
  margin: auto;
  width: calc(125 * var(--size-scale));
  height: calc(217 * var(--size-scale));
  z-index: 50;
  opacity: 0;
  transition: opacity .6s, transform .6s;
  transform: translateX(-10%);
  pointer-events: none;
  z-index: 61;
}
.product-udon04-modal.is-open{
  opacity: 1;
  transform: translateX(0%);
  pointer-events: all;
}
.product-udon04-modal_out{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  z-index: 60;
}
.product-udon04-modal.is-open + .product-udon04-modal_out{
  opacity: 1;
  pointer-events: all;
  cursor: pointer;
}


/* negi
------------------------ */
.product-negi01{
  position: relative;
  width: calc(317 * var(--size-scale));
  margin-top: calc(-244 * var(--size-scale));
  margin-left: auto;
  margin-right: calc(-150 * var(--size-scale));
}
.product-negi01-linkArea{
  position: absolute;
  top: calc(28 * var(--size-scale));
  left: calc(42 * var(--size-scale));
  width: calc(210 * var(--size-scale));
  height: calc(300 * var(--size-scale));
  cursor: pointer;
  transform: rotate(-16deg);
  z-index: 50;
}
.product-negi01-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(13%, 17%);
}
.is-active > .product-negi01-slideIn{
  transform: translate(0, 0);
}
.product-negi01-front{
  transform-origin: 85% 20%;
}
.is-active > .c-motion_vibration.product-negi01-front{
  animation-delay: 1.75s;
}
.product-negi01_plate01{
  position: relative;
  width: calc(64 * var(--size-scale));
  margin-top: calc(-160 * var(--size-scale));
  margin-left: calc(208 * var(--size-scale));
}

/* tablet
------------------------ */
.product-tablet01{
  position: relative;
  width: calc(336 * var(--size-scale));
  margin-top: calc(23 * var(--size-scale));
  margin-left: calc(4 * var(--size-scale));
}
.product-tablet01-linkArea{
  position: absolute;
  top: calc(20 * var(--size-scale));
  left: calc(15 * var(--size-scale));
  width: calc(310 * var(--size-scale));
  height: calc(210 * var(--size-scale));
  transform: rotate(10deg);
  cursor: pointer;
  z-index: 50;
}
.product-tablet01_movie{
  position: absolute;
  top: calc(34 * var(--size-scale));
  left: calc(34 * var(--size-scale));
  width: calc(266 * var(--size-scale));
  height: calc(178 * var(--size-scale));
  object-fit: cover;
  transform: rotate(11deg);
  pointer-events: none;
  z-index: 1;
}
.product_tablet01_play{
  position: absolute;
  top: calc(100 * var(--size-scale));
  left: calc(136 * var(--size-scale));
  width: calc(49 * var(--size-scale));
  transform: rotate(11deg);
  z-index: 5;
}


/* wasabi
------------------------ */
.product-wasabi01{
  position: relative;
  width: calc(132 * var(--size-scale));
  margin-top: calc(-151 * var(--size-scale));
  margin-left: calc(36 * var(--size-scale));
  z-index: 1;
}
.product-wasabi01-linkArea{
  position: absolute;
  top: calc(2 * var(--size-scale));
  left: calc(5 * var(--size-scale));
  width: calc(100 * var(--size-scale));
  height: calc(130 * var(--size-scale));
  cursor: pointer;
  z-index: 50;
}
.product-wasabi01-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(-10%, 10%);
}
.is-active > .product-wasabi01-slideIn{
  transform: translate(0, 0);
}
.product-wasabi01-front{
  transform-origin: 50% 10%;
}
.is-active > .c-motion_vibration.product-wasabi01-front{
  animation-delay: 1s;
}
.product-wasabi01_plate01{
  position: relative;
  width: calc(43 * var(--size-scale));
  margin-top: calc(106 * var(--size-scale));
  margin-left: calc(22 * var(--size-scale));
}

/* tenkasu
------------------------ */
.product-tenkasu01{
  position: relative;
  width: calc(286 * var(--size-scale));
  margin-top: calc(-172 * var(--size-scale));
  margin-left: auto;
  margin-right: calc(-94 * var(--size-scale));
  z-index: 1;
}
.product-tenkasu01-linkArea{
  position: absolute;
  top: calc(21 * var(--size-scale));
  left: calc(25 * var(--size-scale));
  width: calc(220 * var(--size-scale));
  height: calc(264 * var(--size-scale));
  cursor: pointer;
  transform: rotate(-10deg);
  z-index: 50;
}
.product-tenkasu01-slideIn{
  transition: transform .3s;
  transition-timing-function: ease-out;
  transform: translate(10%, 10%);
}
.is-active > .product-tenkasu01-slideIn{
  transform: translate(0, 0);
}
.product-tenkasu01-front{
  transform-origin: 50% 10%;
}
.is-active > .c-motion_vibration.product-tenkasu01-front{
  animation-delay: 1.5s;
}
.product-tenkasu01_plate01{
  position: relative;
  width: calc(57 * var(--size-scale));
  margin-top: calc(-30 * var(--size-scale));
  margin-left: calc(165 * var(--size-scale));
}


/* smartphone
------------------------ */
.product-smartphone01{
  position: relative;
  width: calc(153 * var(--size-scale));
  margin-top: calc(-184 * var(--size-scale));
  margin-left: calc(25 * var(--size-scale));
}
.product-smartphone01-linkArea{
  position: absolute;
  top: calc(5 * var(--size-scale));
  left: calc(19 * var(--size-scale));
  width: calc(110 * var(--size-scale));
  height: calc(234 * var(--size-scale));
  cursor: pointer;
  transform: rotate(9deg);
  z-index: 50;
}


/* menu
------------------------ */
.product-menu01{
  position: relative;
  width: calc(277 * var(--size-scale));
  margin-top: calc(-114 * var(--size-scale));
  margin-left: calc(-86 * var(--size-scale));
}
.product-menu01-linkArea{
  position: absolute;
  top: calc(12 * var(--size-scale));
  left: calc(19 * var(--size-scale));
  width: calc(240 * var(--size-scale));
  height: calc(170 * var(--size-scale));
  cursor: pointer;
  transform: rotate(5deg);
  z-index: 50;
}

/* map
------------------------ */
.product-map01{
  position: relative;
  width: calc(373 * var(--size-scale));
  margin-top: calc(-150 * var(--size-scale));
  margin-left: auto;
  margin-right: calc(-185 * var(--size-scale));
}
.product-map01-linkArea{
  position: absolute;
  top: calc(30 * var(--size-scale));
  left: calc(19 * var(--size-scale));
  width: calc(200 * var(--size-scale));
  height: calc(232 * var(--size-scale));
  cursor: pointer;
  transform: rotate(-8deg);
  z-index: 50;
}



/* motion
------------------------ */
.c-motion_vibration{
  animation-duration: .15s;
  animation-delay: 0.6s;
  animation-iteration-count: 3;
  animation-play-state: running;
  animation-timing-function: steps(2);
  pointer-events: none;
}
.is-active > .c-motion_vibration{
  animation-name: motion_vibration;
}
.product_group{
  position: relative;
}
.product_item{
  transition: transform .3s;
}
.product_item:has(.product_linkArea:hover),
.product_group:has(.product_linkArea:hover) .product_item{
  transform: scale(1.025);
  transition: transform .3s;
  transition-timing-function: cubic-bezier(.31,1.44,.63,1.52);
}
@keyframes motion_vibration {
  0%{
    transform: translateX(0px);
  }
  25%{
    transform: translateX(-2px) rotate(-1deg);
  }
  50%{
    transform: translateX(0px) rotate(0deg);
  }
  75%{
    transform: translateX(2px) rotate(1deg);
  }
  100%{
    transform: translateX(0px);
  }
}

.product_item-plate{
  transition: transform .3s;
}
.product_item-plate:has(.product_linkArea:hover){
  transform: scale(1.025);
}


/* modal
------------------------------------------------------ */

.c-modal{
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  animation-name: modalClose;
  animation-duration: 1s;
  animation-delay: .1s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-direction: normal;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
}
.c-modal.is-open{
  display: flex;
  animation-name: modalOpen;
  animation-fill-mode: both;
  animation-direction: normal;
  pointer-events: all;
  backdrop-filter: blur(2px);
}
@keyframes modalOpen {
  0%{
    display: none;
    opacity: 0;
  }
  1%{
    display: flex;
    opacity: 1;
  }
  100%{
    display: flex;
    opacity: 1;
  }
}
@keyframes modalClose {
  0%{
    display: flex;
    opacity: 1;
  }
  99%{
    display: flex;
    opacity: 0;
  }
  100%{
    display: none;
    opacity: 0;
  }
}

.c-modal_bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .3);
}
.c-modal_closeButton{
  display: block;
  width: calc(111 * var(--size-scale));
  margin: 20px auto 0;
  cursor: pointer;
  z-index: 5;
}
.c-modal_closeButton img{
  width: 100%;
}


.c-modal_button{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: calc(375 * var(--size-scale));
  height: calc(1 * var(--size-scale));
  z-index: 60;
}
.c-modal_button_left{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(30 * var(--size-scale));
  height: calc(40 * var(--size-scale));
  margin: auto;
  background-color: #f00;
  clip-path: polygon(100% 0, 0% 50%, 100% 100%);
}
.c-modal_button_right{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: calc(30 * var(--size-scale));
  height: calc(40 * var(--size-scale));
  margin: auto;
  background-color: #f00;
  clip-path: polygon(0 0, 100% 50%, 0% 100%);
}
.c-modal_window{
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(350 * var(--size-scale));
  height: auto;
  margin: auto;
  transform-origin: center top;
  animation: unset;
  z-index: 60;
}
.c-modal.is-open > .c-modal_window{
  transform: none;
  animation-name: modalWindowOpen;
  animation-duration: .6s;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.3,1.6,.4,1.7);
  animation-fill-mode: both;
  animation-direction: normal;
}
@keyframes modalWindowOpen {
  0%{
    transform: translate(25%, 0) rotate(-10deg);
  }
  99%{
    transform: translate(0%, 0) rotate(0deg);
  }
  100%{
    transform: none;
  }
}

.c-modal_window_close_wrap{
  position: fixed;
  top: 2vh;
  right: 0;
  left: 0;
  width: calc(350 * var(--size-scale));
  height: 0;
  margin: auto;
  z-index: 60;
}
.c-modal_window_close{
  position: absolute;
  top: calc(5 * var(--size-scale));
  right: calc(5 * var(--size-scale));
  width: calc(30 * var(--size-scale));
  height: calc(30 * var(--size-scale));
  cursor: pointer;
  z-index: 100;
}
.c-modal_window_close span{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(25 * var(--size-scale));
  height: calc(2 * var(--size-scale));
  margin: auto;
  background-color: #000;
}
.c-modal_window_close-white{
  position: absolute;
  top: calc(45 * var(--size-scale));
  right: calc(5 * var(--size-scale));
  width: calc(30 * var(--size-scale));
  height: calc(30 * var(--size-scale));
  cursor: pointer;
  z-index: 100;
}
.c-modal_window_close-white span{
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: calc(25 * var(--size-scale));
  height: calc(2 * var(--size-scale));
  margin: auto;
  background-color: #fff;
}
.c-modal_window_close span:first-child{
  transform: rotate(45deg);
}
.c-modal_window_close span:last-child{
  transform: rotate(-45deg);
}
.c-modal_body{
  position: relative;
  width: calc(350 * var(--size-scale));
  max-height: 98svh;
  padding-bottom: calc(29 * var(--size-scale));
  box-sizing: border-box;
  border: 9px solid #fff;
  background-image: url(/synced-assets/campaign_topping/assets/img/modal_bg.jpg);
  background-repeat: repeat;
  background-size: 50% 50%;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.c-modal_body::-webkit-scrollbar{
  display: none;
}
.c-modal_copy{
  position: absolute;
  top: calc(5 * var(--size-scale));
  left: 0;
  width: calc(70 * var(--size-scale));
  z-index: 5;
}
.c-modal_movie{
  margin: calc(24 * var(--size-scale)) auto 0;
  mask-image: linear-gradient(to bottom, transparent 3%, #000 10%, #000 90%, transparent 97%);
  mask-image: url(/synced-assets/campaign_topping/assets/img/movie_gradation_mask.png);
  mask-size: 100% 100%;
  overflow: hidden;
}

.c-modal_movieLink{
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  margin: calc(25 * var(--size-scale)) auto 0 ;
  background-color: #000;
}
.c-modal_movieLink_thumb{
  max-width: 50%;
  width: calc(160 * var(--size-scale));
  height: calc(160 * var(--size-scale));
  order: 1;
  transition: height .3s;
  cursor: pointer;
}
.c-modal_movieLink:has(.c-modal_movieLink_thumb.is-active) > .c-modal_movieLink_thumb{
  max-width: 33%;
  width: calc(106.3 * var(--size-scale));
  height: calc(106.3 * var(--size-scale));
}
.c-modal_movieLink:has(.c-modal_movieLink_thumb.is-active) > .c-modal_movieLink_thumb.is-active{
  max-width: 100%;
  width: calc(320 * var(--size-scale));
  height: calc(320 * var(--size-scale));
  order: 0;
}
.c-modal_movieLink_thumb img{
  display: block;
  width: 100%;
  pointer-events: none;
}
.c-modal_movieLink_thumb.is-active img{
  display: none;
}
.c-modal_movieLink_thumb iframe{
  display: none;
}
.c-modal_movieLink_thumb.is-active iframe{
  display: block;
  width: 100%;
  height: 100%;
}
.c-modal_movieLink_thumb-wide{
  width: 100%;
  height: calc(160 * var(--size-scale));
  order: 1;
  transition: height .3s;
}
.c-modal_movieLink_thumb-wide img{
  display: block;
  width: 100%;
}
.c-modal_movieLink_thumb-wide iframe{
  display: none;
  width: 100%;
}
.c-modal_movieLink_thumb-wide.is-active{
  width: calc(320 * var(--size-scale));
  height: calc(320 * var(--size-scale));
  order: 0;
}
.c-modal_movieLink_thumb-wide img{
  display: block;
  width: 100%;
}
.c-modal_movieLink_thumb-wide.is-active img{
  display: none;
}
.c-modal_movieLink_thumb-wide.is-active iframe{
  display: none;
}
.c-modal_movieLink_thumb-wide.is-active iframe{
  display: block;
  width: 100%;
  height: 100%;
}

.c-modal_title{
  position: relative;
  max-width: calc(300 * var(--size-scale));
  margin: calc(0 * var(--size-scale)) auto calc(10 * var(--size-scale));
  width: 100%;
  height: calc(70 * var(--size-scale));
  text-align: center;
  z-index: 5;
}
.c-modal_title img{
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: center center;
}
.c-modal_title--large{
  position: relative;
  max-width: calc(300 * var(--size-scale));
  margin: calc(-30 * var(--size-scale)) auto calc(10 * var(--size-scale));
  width: 100%;
  height: calc(110 * var(--size-scale));
  text-align: center;
  z-index: 5;
}
.c-modal_title_sub{
  position: relative;
  margin: calc(15 * var(--size-scale)) auto calc(10 * var(--size-scale));
  width: calc(250 * var(--size-scale));
  text-align: center;
  z-index: 5;
}
.c-modal_title-l{
  position: relative;
  width: calc(250 * var(--size-scale));
  margin: calc(25 * var(--size-scale)) auto calc(10 * var(--size-scale));
  text-align: center;
  z-index: 5;
}
.c-modal_title-xl{
  position: relative;
  width: calc(255 * var(--size-scale));
  margin: calc(45 * var(--size-scale)) auto calc(10 * var(--size-scale));
  text-align: center;
  z-index: 5;
}
.c-modal_float{
  width: calc(305 * var(--size-scale));
  margin: 0 auto;
}
.c-modal_float::after{
  content: "";
  display: block;
  clear: both;
}
.c-modal_text{
  width: calc(305 * var(--size-scale));
  margin: calc(0 * var(--size-scale)) auto 0;
  font-family: Yu Gothic Pr6N B,sans-serif;
  font-size: calc(15 * var(--size-scale));
  font-weight: 500;
  line-height: 1.45;
  text-align: justify;
  font-feature-settings: "palt";
  letter-spacing: .035em;
  color: #3a0003;
}
.c-modal_text-s{
  width: calc(305 * var(--size-scale));
  margin: calc(0 * var(--size-scale)) auto calc(20 * var(--size-scale));
  font-family: Yu Gothic Pr6N B,sans-serif;
  font-size: calc(15 * var(--size-scale));
  font-weight: 500;
  line-height: 1.45;
  text-align: justify;
  font-feature-settings: "palt";
  letter-spacing: .035em;
  color: #3a0003;
}
.c-modal_letter{
  width: calc(330 * var(--size-scale));
  margin: calc(-35 * var(--size-scale)) auto 0;
}
.c-modal_text_marker{
  display: inline;
  background-color: #fff103;
}
.c-modal_text_image01{
  width: calc(205 * var(--size-scale));
  height: calc(260 * var(--size-scale));
  margin-top: calc(-130 * var(--size-scale));
  margin-left: auto;
  margin-right: calc(-40 * var(--size-scale));
  overflow: hidden;
  pointer-events: none;
  margin-bottom: calc(-120 * var(--size-scale));
}
.c-modal_text_image01 img{
  transform: rotate(16deg);
}
.c-modal_text_image02{
  width: calc(195 * var(--size-scale));
  height: calc(120 * var(--size-scale));
  margin-top: calc(-90 * var(--size-scale));
  margin-left: auto;
  margin-right: calc(-10 * var(--size-scale));
  pointer-events: none;
}
.c-modal_text-float{
  width: calc(305 * var(--size-scale));
  margin: calc(0 * var(--size-scale)) auto 0;
  font-family: Yu Gothic Pr6N B,sans-serif;
  font-size: calc(15 * var(--size-scale));
  font-weight: 500;
  line-height: 1.45;
  color: #3a0003;
  float: left;
}
.c-modal_caution{
  display: block;
  width: calc(305 * var(--size-scale));
  margin: calc(20 * var(--size-scale)) auto 0;
  font-family: Yu Gothic Pr6N B,sans-serif;
  font-size: calc(12 * var(--size-scale));
  font-weight: 500;
  line-height: 1.45;
  color: #3a0003;
  text-align: justify;
  font-feature-settings: "palt";
  letter-spacing: .01em;
}
.c-modal_caution-campaign{
  display: block;
  width: calc(305 * var(--size-scale));
  margin: calc(20 * var(--size-scale)) auto 0;
  font-family: Yu Gothic Pr6N B,sans-serif;
  font-size: calc(12 * var(--size-scale));
  font-weight: 500;
  line-height: 1.45;
  color: #3a0003;
  text-align: justify;
  font-feature-settings: "palt";
  letter-spacing: .05em;
}
.c-modal_campaign01{
  margin: calc(50 * var(--size-scale)) auto 0;
  width: calc(310 * var(--size-scale));
  padding: 0 calc(10 * var(--size-scale)) calc(25 * var(--size-scale));
  box-sizing: border-box;
  border-radius: calc(10 * var(--size-scale));
  background-color: #fff;
}
.c-modal_campaign01 + .c-modal_campaign01{
  margin: calc(35 * var(--size-scale)) auto 0;
}
.c-modal_campaign01_title{
  margin: calc(0 * var(--size-scale)) auto 0;
  width: calc(130 * var(--size-scale));
  transform: translateY(calc(-20 * var(--size-scale)));
}
.c-modal_campaign01_schedule01{
  width: calc(242 * var(--size-scale));
  margin: calc(-20 * var(--size-scale)) auto 0;
}
.c-modal_campaign01_text{
  position: relative;
  font-family: Yu Gothic Pr6N B,sans-serif;
  font-size: calc(15 * var(--size-scale));
  font-weight: 500;
  line-height: 1.45;
  color: #3a0003;
  font-feature-settings: "palt";
  letter-spacing: .035em;
  text-align: justify;
  padding-left: calc(25 * var(--size-scale));
}
.c-modal_campaign01_text::before{
  content: "";
  display: block;
  position: absolute;
  top: .15em;
  left: 0;
  width: calc(17 * var(--size-scale));
  height: calc(17 * var(--size-scale));
  background-size: contain;
  background-position: center center;
}
.c-modal_campaign01_text:nth-of-type(1)::before{
  background-image: url(/synced-assets/campaign_topping/assets/img/modal_number01.png);
}
.c-modal_campaign01_text:nth-of-type(2)::before{
  background-image: url(/synced-assets/campaign_topping/assets/img/modal_number02.png);
}
.c-modal_campaign01_text:nth-of-type(3)::before{
  background-image: url(/synced-assets/campaign_topping/assets/img/modal_number03.png);
}
.c-modal_campaign01_text + .c-modal_campaign01_text{
  margin-top: calc(15 * var(--size-scale));
}
.c-modal_campaign01_text_marker01{
  position: relative;
  display: inline;
  font-size: calc(18 * var(--size-scale));
  z-index: 1;
}
.c-modal_campaign01_text_marker01::after{
  content: "";
  display: block;
  position: absolute;
  top: -.1em;
  left: 0;
  width: 100%;
  height: 1.3em;
  background-color: #fff103;
  z-index: -1;
}
.c-modal_campaign01_text_marker02{
  position: relative;
  display: inline;
  z-index: 1;
}
.c-modal_campaign01_text_marker02::after{
  content: "";
  display: block;
  position: absolute;
  top: -.1em;
  left: 0;
  width: 100%;
  height: 1.2em;
  background-color: #fff103;
  z-index: -1;
}
.c-modal_campaign01_text a{
  color: #2f5a9e;
}
.c-modal_campaign_link{
  display: block;
  margin: calc(20 * var(--size-scale)) auto 0;
  width: 100%;
}
.c-modal_campaign_notes{
  position: relative;
  width: 100%;
  margin-top: calc(15 * var(--size-scale));
  font-size: calc(15 * var(--size-scale));
  text-align: center;
  font-family: Yu Gothic Pr6N B,sans-serif;
  font-size: calc(15 * var(--size-scale));
  font-weight: 500;
  line-height: 1.45;
  color: #3a0003;
}
.c-modal_campaign_notes a{
  color: #c81432;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.c-modal_campaign_notes img{
  display: inline-block;
  margin-top: -.35em;
  margin-left: .25em;
  width: 1em;
  height: 1em;
  object-fit: contain;
  object-position: top left;
}

.c-modal_window_dondon{
  position: relative;
  display: block;
  width: calc(200 * var(--size-scale));
  height: calc(200 * var(--size-scale));
  margin: 10vh auto;
  object-fit: contain;
  transform: scale(2.6);
  transition: .9s;
  opacity: 0;
  z-index: 5;
}
.is-active > .c-modal_window_dondon{
  opacity: 1;
  transform: scale(1);
}
.c-modal_ttl{

}
.c-modal_image{
  position: relative;
  width: calc(375 * var(--size-scale));
  height: calc(300 * var(--size-scale));
  margin-left: calc(-20 * var(--size-scale));
}
.c-modal_image-campaign{
  margin-bottom: calc(-20 * var(--size-scale));
}





/* modal-message
------------------------ */
.c-modal-message{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: .6s;
}
.c-modal-message.is-open{
  opacity: 1;
  pointer-events: all;
  backdrop-filter: blur(2px);
}
.c-modal_window-message{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: calc(350 * var(--size-scale));
  height: 85vh;
  background-color: #000;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: calc(20 * var(--size-scale));
  margin: auto;
  z-index: 60;
}
.c-modal_window_container-message{
  position: relative;
  width: 100%;
  height: auto;
  /* margin-top: 40vh; */
  box-sizing: border-box;
}
.c-modal_window_container-message + .c-modal_window_container-message{
  margin-top: 0;
}
.c-modal_window_container-message:first-child{
  margin-top: 15vh;
}
.c-modal_body-message{
  position: relative;
  margin-top: 10vh;
  min-height: 100%;
}
.c-modal_window_block-message{
  position: relative;
  margin: calc(30 * var(--size-scale)) 0;
  z-index: 0;
}
.c-modal_text-message{
  position: relative;
  display: block;
  text-align: left;
  width: calc(280 * var(--size-scale));
  margin: calc(20 * var(--size-scale)) auto;
  font-family: Shuei ShogoMincho, serif;
  font-size: calc(14 * var(--size-scale));
  line-height: 1.8;
  font-weight: 800;
  font-feature-settings: "palt";
  color: #fff;
  letter-spacing: .1em;
  z-index: 5;
  box-sizing: border-box;
  z-index: 1;
}
.c-modal_text-message p{
  opacity: 0;
  transition: opacity 1s;
}
.c-modal_text-message p.c-modal_text_paragraph-message{
  margin-top: 1em;
}
.c-modal_text-message p.is-active{
  opacity: .85;
}
.c-modal_text-message p.is-active.is-activeAdd{
  opacity: 0;
}
.c-modal_text-last-message{
  font-size: calc(24 * var(--size-scale));
  margin-bottom: 10vh;
}

.c-modal_movie-message{
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: calc(350 * var(--size-scale));
  height: calc(200 * var(--size-scale));
  margin: auto;
  opacity: 0;
  filter: blur(5px);
  transition: .9s;
  pointer-events: none;
  z-index: 1;
}
.is-active.c-modal_movie-message{
  opacity: 1;
  filter: blur(0);
}
.is-active.is-activeAdd.c-modal_movie-message{
  opacity: 0;
  filter: blur(0);
}
.c-modal_movie-message video{
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: calc(375 * var(--size-scale));
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}

.c-modal_movie-back-message video{
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
  object-position: center bottom;
}
.c-modal_window_fill-message{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: calc(350 * var(--size-scale));
  height: 100%;
  object-fit: cover;
  opacity: 0;
  background-color: #000;
  filter: brightness(.55) blur(5px);
  transition: .9s;
  pointer-events: none;
  z-index: 0;
}
.c-modal_window_container-message.is-active > .c-modal_window_fill-message{
  opacity: 1;
  filter: brightness(.55) blur(0);
}
.c-modal_window_scrollAttention-message{
  position: fixed;
  right: 0;
  bottom: 13vh;
  left: 0;
  width: calc(15 * var(--size-scale));
  height: calc(15 * var(--size-scale));
  margin: auto;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  animation-name: c-modal_window_scrollAttention-message;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-direction: alternate-reverse;
  z-index: 100;
}
@keyframes c-modal_window_scrollAttention-message {
  0%{
    transform: translateY(0) rotate(45deg);
  }
  0%{
    transform: translateY(100%) rotate(45deg);
  }
}
.c-modal_window_container-message.is-active .c-modal_window_scrollAttention-message{
  opacity: 0;
}


/* statement
------------------------------------------------------ */

.bottomLinks_button01 {
  font-family: Yu Mincho Pr6N D, serif;
  overflow: hidden;
  background-image: url(/synced-assets/campaign_topping/assets/img/bottom_links_bg.png);
  background-size: 100% 100%;
  transition: box-shadow .33s linear;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(200 * var(--size-scale));
  margin: calc(-34 * var(--size-scale)) 0 0 calc(161 * var(--size-scale));
  min-height: calc(52 * var(--size-scale));
  padding: 0 calc(8 * var(--size-scale));
  font-size: calc(14 * var(--size-scale));
  color: #000;
  line-height: calc(27 * var(--size-scale));
  position: relative;
  text-align: center;
  transform: rotate(-6deg);
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,.4));
  transition: transform .3s;
}
.bottomLinks_button01:hover {
  transform: rotate(-6deg) scale(1.05);
}
.bottomLinks_button01::after{
  content: "";
  display: inline-block;
  background-image: url(/synced-assets/campaign_topping/assets/img/icon_window.png);
  background-size: contain;
  width: calc(15 * var(--size-scale));
  height: calc(15 * var(--size-scale));
  margin-left: calc(6 * var(--size-scale));
  margin-bottom: calc(2 * var(--size-scale));
}
.bottomLinks_button02 {
  font-family: Yu Mincho Pr6N D, serif;
  overflow: hidden;
  background-image: url(/synced-assets/campaign_topping/assets/img/bottom_links_bg.png);
  background-size: 100% 100%;
  transition: box-shadow .33s linear;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(200 * var(--size-scale));
  margin: calc(24 * var(--size-scale)) 0 0 calc(40 * var(--size-scale));
  min-height: calc(52 * var(--size-scale));
  padding: 0 calc(8 * var(--size-scale));
  font-size: calc(14 * var(--size-scale));
  color: #000;
  line-height: calc(27 * var(--size-scale));
  position: relative;
  text-align: center;
  filter: drop-shadow(1px 1px 2px rgba(0,0,0,.4));
  transform: rotate(4deg);
  transition: transform .3s;
}
.bottomLinks_button02:hover{
  transform: rotate(4deg) scale(1.05);
}
.bottomLinks_button02::after{
  content: "";
  display: inline-block;
  background-image: url(/synced-assets/campaign_topping/assets/img/icon_window.png);
  background-size: contain;
  width: calc(15 * var(--size-scale));
  height: calc(15 * var(--size-scale));
  margin-left: calc(6 * var(--size-scale));
  margin-bottom: calc(2 * var(--size-scale));
}


/* statement
------------------------------------------------------ */
#component-statement {
  position: relative;
  width: 100%
}

@media screen and (min-width: 768px) and (max-width:1024px) {
  #component-statement {
      -webkit-box-shadow: 0 10px 10px rgba(85,47,38,.2);
      box-shadow: 0 10px 10px rgba(85,47,38,.2);
      margin-left: auto;
      margin-right: 15vw;
      max-width: 485px
  }
}

@media screen and (min-width: 1025px) and (max-width:1280px) {
  #component-statement {
      -webkit-box-shadow: 0 10px 10px rgba(85,47,38,.2);
      box-shadow: 0 10px 10px rgba(85,47,38,.2);
      margin-left: auto;
      margin-right: 15vw;
      max-width: 506px
  }
}

@media screen and (min-width: 1281px) and (max-width:1366px) {
  #component-statement {
      -webkit-box-shadow: 0 10px 10px rgba(85,47,38,.2);
      box-shadow: 0 10px 10px rgba(85,47,38,.2);
      margin-left: auto;
      margin-right: 16.09vw;
      max-width: 506px
  }
}

@media screen and (min-width: 1367px) {
  #component-statement {
      -webkit-box-shadow: 0 10px 10px rgba(85,47,38,.2);
      box-shadow: 0 10px 10px rgba(85,47,38,.2);
      margin-left: auto;
      margin-right: auto;
      max-width: 540px
  }
}

.o-statement__content-wrapper {
  background-image: linear-gradient(180deg,transparent 40px,#fcefce 0,#fcefce);
  margin-bottom: 0
}

.o-statement-top {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center
}

.o-statement-top__heading {
  font-weight: 700
}

.o-statement-top__sentence-wrapper {
  font-weight: 700;
  line-height: 1.6
}

.o-statement-bottom__background {
  aspect-ratio: 375/400
}

.o-statement-bottom__content {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 40px 30px
}

.o-statement-bottom__heading {
  font-size: 32px;
  font-weight: 700;
  line-height: 50px
}

.o-statement-bottom__button {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

@media screen and (min-width: 768px) {
  #component-footer {
      z-index:1
  }
}