.l-inner990 {
  max-width: 990px;
  position: relative;
  margin: 0 auto;
  color: #000;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
}

.l-inner990 img {
  max-width: 100%;
}

.sp_only {
  display: none;
}

.l-header {
  z-index: 110;
}

@media only screen and (max-width: 767px) {
  .l-inner990 {
    padding: 0;
    font-size: 14px;
  }
  .pc_only {
    display: none;
  }
  .sp_only {
    display: block;
  }
}
/*----------------------------------------------------- */
/*  attaka_mv           */
/*----------------------------------------------------- */
.attaka_mv {
  height: 750px;
  background: url(../images/bg_mv.png) center center no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attaka_mv h1 {
  position: relative;
  max-width: 60%;
  margin: 0 auto;
  z-index: 5;
}
.attaka_mv .logo {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 83px;
}
.attaka_mv .kv_steam01 {
  position: absolute;
  top: 0;
  left: -10%;
  width: 60%;
  height: 100%;
}
.attaka_mv .kv_steam02 {
  position: absolute;
  top: 0;
  right: -10%;
  width: 60%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .attaka_mv {
    height: 300px;
  }
  .attaka_mv h1 {
    width: 90%;
    margin: 0 auto;
  }
  .attaka_mv .logo {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
  }
}
/*----------------------------------------------------- */
/*  attaka_body           */
/*----------------------------------------------------- */
.attaka_body_ttl {
  padding: 50px 3% 0px;
  position: relative;
  z-index: 101;
}
.attaka_body_ttl img {
  display: block;
  max-width: 77%;
  margin: 0 auto;
}

.attaka_body_bg {
  background: url(../images/bg_body.png) center top no-repeat;
  background-size: cover;
  padding-bottom: 1px;
  position: relative;
  overflow: hidden;
}
.attaka_body_bg::after {
  display: block;
  padding-top: 230%;
  content: "";
}

.mask {
  z-index: 5;
  position: absolute;
  bottom: 0;
}

.steam_wrap {
  position: relative;
  height: 50%;
  overflow: hidden;
}

.demo_steam {
  position: absolute;
  z-index: 2;
  width: 80%;
  top: 100%;
  left: 10%;
  animation: steam_up 12s infinite linear;
  transition: all 1s;
}

.demo_steam2 {
  z-index: 3;
  position: absolute;
  width: 80%;
  top: 100%;
  left: 12%;
  animation: steam_up 13s 5s infinite linear;
  transition: all 1s;
}

@keyframes steam_up {
  0% {
    filter: blur(10px);
    transform: rotateY(0deg);
    transform: scale(1, 1);
    opacity: 0.3;
    top: 50%;
  }
  50% {
    opacity: 0.7;
    transform: rotateY(40deg);
    transform: scale(0.6, 1.2);
  }
  70% {
    transform: rotateY(2deg);
    transform: scaleY(1.2, 0.4);
  }
  100% {
    filter: blur(16px);
    transform: rotateY(50deg);
    transform: scaleY(1.4, 1.2);
    opacity: 0;
    top: -100%;
  }
}
@media screen and (max-width: 767px) {
  .attaka_body_ttl {
    padding: 20px 3% 0px;
  }
  .demo_steam {
    width: 100%;
    left: 0;
  }
  .demo_steam2 {
    width: 100%;
    left: 3%;
  }
}
/*----------------------------------------------------- */
/*  ramen           */
/*----------------------------------------------------- */
.attaka_ramen {
  width: 73%;
  position: absolute;
  top: 2.2%;
  left: 0%;
  z-index: 10;
}
.attaka_ramen::before {
  display: block;
  padding-top: 112%;
  content: "";
}
.attaka_ramen a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/bg_ramen.png) left bottom no-repeat;
  background-size: contain;
  transition: 0.3s ease-in-out;
}
.attaka_ramen .steam_wrap {
  height: 65%;
  transform: translateX(-10%);
}

@media screen and (min-width: 768px) {
  .attaka_ramen a:hover {
    opacity: 0.8;
  }
}
.ramen_ttl {
  width: 70%;
  position: absolute;
  top: 30%;
  right: -39%;
  z-index: 110;
}

/*----------------------------------------------------- */
/*  soba           */
/*----------------------------------------------------- */
.attaka_soba {
  width: 59%;
  position: absolute;
  top: 24.5%;
  right: 0%;
  z-index: 20;
}
.attaka_soba::before {
  display: block;
  padding-top: 132%;
  content: "";
}
.attaka_soba a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/bg_soba.png) center bottom no-repeat;
  background-size: contain;
  transition: 0.3s ease-in-out;
}
.attaka_soba .steam_wrap {
  position: relative;
  height: 70%;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .attaka_soba a:hover {
    opacity: 0.8;
  }
}
.soba_ttl {
  width: 80%;
  position: absolute;
  top: 31%;
  left: -59%;
  z-index: 100;
}

/*----------------------------------------------------- */
/*  udon           */
/*----------------------------------------------------- */
.attaka_udon {
  width: 59%;
  position: absolute;
  top: 45%;
  left: 0%;
  z-index: 30;
}
.attaka_udon::before {
  display: block;
  padding-top: 120%;
  content: "";
}
.attaka_udon a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/bg_udon.png) center bottom no-repeat;
  background-size: contain;
  transition: 0.3s ease-in-out;
}
.attaka_udon .steam_wrap {
  height: 70%;
}

@media screen and (min-width: 768px) {
  .attaka_udon a:hover {
    opacity: 0.8;
  }
}
.udon_ttl {
  width: 88%;
  position: absolute;
  top: 36%;
  right: -64%;
  z-index: 100;
}

/*----------------------------------------------------- */
/*  miso          */
/*----------------------------------------------------- */
.attaka_miso {
  width: 50%;
  position: absolute;
  bottom: 8%;
  left: -1%;
  z-index: 8;
}
.attaka_miso::before {
  display: block;
  padding-top: 120%;
  content: "";
}
.attaka_miso a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/bg_miso.png) center bottom no-repeat;
  background-size: contain;
  transition: 0.3s ease-in-out;
}
.attaka_miso .steam_wrap {
  height: 70%;
}

@media screen and (min-width: 768px) {
  .attaka_miso a:hover {
    opacity: 0.8;
  }
}
.miso_ttl {
  width: 91%;
  position: absolute;
  top: 77%;
  right: -5%;
  z-index: 100;
}

/*----------------------------------------------------- */
/*  chawan           */
/*----------------------------------------------------- */
.attaka_chawan {
  width: 37%;
  position: absolute;
  bottom: 16%;
  right: 7%;
  z-index: 5;
}
.attaka_chawan::before {
  display: block;
  padding-top: 160%;
  content: "";
}
.attaka_chawan a {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/bg_chawan.png) center bottom no-repeat;
  background-size: contain;
  transition: 0.3s ease-in-out;
}
.attaka_chawan .steam_wrap {
  height: 80%;
}

@media screen and (min-width: 768px) {
  .attaka_chawan a:hover {
    opacity: 0.8;
  }
}
.chawan_ttl {
  width: 138%;
  position: absolute;
  top: 83%;
  left: -15%;
  z-index: 100;
}

/*----------------------------------------------------- */
/*  yuge          */
/*----------------------------------------------------- */
.txt_image {
  color: #fff;
  position: absolute;
  right: 20px;
  bottom: 40px;
}

@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.anime01 {
  animation: 3s fuwafuwa infinite;
}

.anime02 {
  animation: 3s fuwafuwa infinite;
  animation-direction: reverse;
}

@media screen and (max-width: 767px) {
  .txt_image {
    font-size: 10px;
    right: 10px;
    bottom: 20px;
  }
  @keyframes fuwafuwa {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
}
/*----------------------------------------------------- */
/*  ramen_modal          */
/*----------------------------------------------------- */
.modal_wrap {
  max-width: 690px;
  padding: 0;
  height: 760px;
  overflow-y: scroll;
  margin: 0 auto;
  position: relative;
}
.modal_wrap img {
  max-width: 100%;
}

.modal_list {
  width: 100%;
}
.modal_list li + li {
  margin-top: 60px;
}

.modal_box {
  width: 100%;
  position: relative;
}

.modal_txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

.modal_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}

.modal_steam_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  overflow: hidden;
}

.scroll {
  width: 180px;
  position: absolute;
  top: calc(50% - 90px);
  left: calc(50% - 90px);
  z-index: 20;
  animation: fadeout-anim 2s linear forwards;
}
.scroll img {
  max-width: 100%;
}

@keyframes fadeout-anim {
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
.ramen_modal {
  display: none;
}

.ramen01 {
  background: url(../images/ramen/bg_01.png) center bottom no-repeat;
  background-size: contain;
}
.ramen01::before {
  display: block;
  padding-top: 122.5%;
  content: "";
}

.ramen02 {
  background: url(../images/ramen/bg_02.png) center bottom no-repeat;
  background-size: contain;
}
.ramen02::before {
  display: block;
  padding-top: 113%;
  content: "";
}

.ramen03 {
  background: url(../images/ramen/bg_03.png) center bottom no-repeat;
  background-size: contain;
}
.ramen03::before {
  display: block;
  padding-top: 126%;
  content: "";
}

.ramen04 {
  background: url(../images/ramen/bg_04.png) center bottom no-repeat;
  background-size: contain;
}
.ramen04::before {
  display: block;
  padding-top: 117.4%;
  content: "";
}

.ramen05 {
  background: url(../images/ramen/bg_05.png) center bottom no-repeat;
  background-size: contain;
}
.ramen05::before {
  display: block;
  padding-top: 110%;
  content: "";
}

.ramen06 {
  background: url(../images/ramen/bg_06.png) center bottom no-repeat;
  background-size: contain;
}
.ramen06::before {
  display: block;
  padding-top: 118.5%;
  content: "";
}

.ramen07 {
  background: url(../images/ramen/bg_07.png) center bottom no-repeat;
  background-size: contain;
}
.ramen07::before {
  display: block;
  padding-top: 110%;
  content: "";
}

.ramen08 {
  background: url(../images/ramen/bg_08.png) center bottom no-repeat;
  background-size: contain;
}
.ramen08::before {
  display: block;
  padding-top: 110%;
  content: "";
}

/*----------------------------------------------------- */
/*  udon_modal          */
/*----------------------------------------------------- */
.udon_modal {
  display: none;
}

.udon01 {
  background: url(../images/udon/bg_01.png) center bottom no-repeat;
  background-size: contain;
}
.udon01::before {
  display: block;
  padding-top: 113%;
  content: "";
}

.udon02 {
  background: url(../images/udon/bg_02.png) center bottom no-repeat;
  background-size: contain;
}
.udon02::before {
  display: block;
  padding-top: 113%;
  content: "";
}

.udon03 {
  background: url(../images/udon/bg_03.png) center bottom no-repeat;
  background-size: contain;
}
.udon03::before {
  display: block;
  padding-top: 113%;
  content: "";
}

.udon04 {
  background: url(../images/udon/bg_04.png) center bottom no-repeat;
  background-size: contain;
}
.udon04::before {
  display: block;
  padding-top: 121%;
  content: "";
}

.udon05 {
  background: url(../images/udon/bg_05.png) center bottom no-repeat;
  background-size: contain;
}
.udon05::before {
  display: block;
  padding-top: 113%;
  content: "";
}
.udon05 .modal_steam_wrap {
  height: 50%;
}

.udon06 {
  background: url(../images/udon/bg_06.png) center bottom no-repeat;
  background-size: contain;
}
.udon06::before {
  display: block;
  padding-top: 113%;
  content: "";
}

.udon07 {
  background: url(../images/udon/bg_07.png) center bottom no-repeat;
  background-size: contain;
}
.udon07::before {
  display: block;
  padding-top: 113%;
  content: "";
}
.udon07 .modal_steam_wrap {
  height: 50%;
}

/*----------------------------------------------------- */
/*  soba_modal          */
/*----------------------------------------------------- */
.soba_modal {
  display: none;
}

.soba01 {
  background: url(../images/soba/bg_01.png) center top no-repeat;
  background-size: contain;
}
.soba01::before {
  display: block;
  padding-top: 109%;
  content: "";
}

.soba02 {
  background: url(../images/soba/bg_02.png) center top no-repeat;
  background-size: contain;
}
.soba02::before {
  display: block;
  padding-top: 109%;
  content: "";
}
.soba02 .modal_steam_wrap {
  height: 50%;
}

.soba03 {
  background: url(../images/soba/bg_03.png) center top no-repeat;
  background-size: contain;
}
.soba03::before {
  display: block;
  padding-top: 109%;
  content: "";
}

.soba04 {
  background: url(../images/soba/bg_04.png) center top no-repeat;
  background-size: contain;
}
.soba04::before {
  display: block;
  padding-top: 115%;
  content: "";
}

/*----------------------------------------------------- */
/*  miso_modal          */
/*----------------------------------------------------- */
.miso_modal {
  display: none;
}

.miso01 {
  background: url(../images/miso/bg_01.png) center bottom no-repeat;
  background-size: contain;
}
.miso01::before {
  display: block;
  padding-top: 109%;
  content: "";
}

.miso02 {
  background: url(../images/miso/bg_02.png) center bottom no-repeat;
  background-size: contain;
}
.miso02::before {
  display: block;
  padding-top: 108%;
  content: "";
}

.miso03 {
  background: url(../images/miso/bg_03.png) center bottom no-repeat;
  background-size: contain;
}
.miso03::before {
  display: block;
  padding-top: 117%;
  content: "";
}

@media screen and (max-width: 767px) {
  .modal_wrap {
    padding: 0 10px;
    height: 87vw;
  }
  .modal_list li + li {
    margin-top: 40px;
  }
  .modal_box {
    width: 100%;
    position: relative;
  }
  .scroll {
    width: 100px;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
  }
}
/*----------------------------------------------------- */
/*  chawan_modal          */
/*----------------------------------------------------- */
.chawan_modal {
  display: none;
}

.chawan01 {
  background: url(../images/chawan/bg_01.png) center bottom no-repeat;
  background-size: contain;
}
.chawan01::before {
  display: block;
  padding-top: 117%;
  content: "";
}
.chawan01 .modal_steam_wrap {
  left: 20%;
  width: 60%;
  height: 50%;
}

.chawan02 {
  background: url(../images/chawan/bg_02.png) center bottom no-repeat;
  background-size: contain;
}
.chawan02::before {
  display: block;
  padding-top: 117%;
  content: "";
}
.chawan02 .modal_steam_wrap {
  left: 20%;
  width: 60%;
  height: 50%;
}

.chawan03 {
  background: url(../images/chawan/bg_03.png) center bottom no-repeat;
  background-size: contain;
}
.chawan03::before {
  display: block;
  padding-top: 113%;
  content: "";
}
.chawan03 .modal_steam_wrap {
  left: 20%;
  width: 60%;
  height: 50%;
}

.chawan04 {
  background: url(../images/chawan/bg_04.png) center bottom no-repeat;
  background-size: contain;
}
.chawan04::before {
  display: block;
  padding-top: 121%;
  content: "";
}
.chawan04 .modal_steam_wrap {
  left: 20%;
  width: 60%;
  height: 50%;
}

.modaal-container {
  background: #F3EFE0;
}

.modaal-close {
  z-index: 100;
}/*# sourceMappingURL=style.css.map */