@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
.container{
  width: 100%;
}
@media (min-width: 640px){
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .container{
    max-width: 1536px;
  }
}
.visible{
  visibility: visible;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.bottom-0{
  bottom: 0px;
}
.bottom-\[calc\(-25px\*var\(--scale\)\)\]{
  bottom: calc(-25px * var(--scale));
}
.left-0{
  left: 0px;
}
.left-\[26\%\]{
  left: 26%;
}
.left-\[calc\(-68px\*var\(--scale\)\)\]{
  left: calc(-68px * var(--scale));
}
.left-\[calc\(-73px\*var\(--scale\)\)\]{
  left: calc(-73px * var(--scale));
}
.left-\[calc\(-79px\*var\(--scale\)\)\]{
  left: calc(-79px * var(--scale));
}
.right-0{
  right: 0px;
}
.right-\[calc\(-25px\*var\(--scale\)\)\]{
  right: calc(-25px * var(--scale));
}
.top-0{
  top: 0px;
}
.top-\[-30\%\]{
  top: -30%;
}
.top-\[calc\(60px\*var\(--scale\)\)\]{
  top: calc(60px * var(--scale));
}
.top-\[calc\(68px\*var\(--scale\)\)\]{
  top: calc(68px * var(--scale));
}
.top-\[calc\(70px\*var\(--scale\)\)\]{
  top: calc(70px * var(--scale));
}
.z-10{
  z-index: 10;
}
.mx-\[calc\(30px\*var\(--scale\)\)\]{
  margin-left: calc(30px * var(--scale));
  margin-right: calc(30px * var(--scale));
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-\[calc\(16px\*var\(--scale\)\)\]{
  margin-top: calc(16px * var(--scale));
  margin-bottom: calc(16px * var(--scale));
}
.mb-\[calc\(22px\*var\(--scale\)\)\]{
  margin-bottom: calc(22px * var(--scale));
}
.mb-\[calc\(30px\*var\(--scale\)\)\]{
  margin-bottom: calc(30px * var(--scale));
}
.mb-\[calc\(46px\*var\(--scale\)\)\]{
  margin-bottom: calc(46px * var(--scale));
}
.mt-\[calc\(10px\*var\(--scale\)\)\]{
  margin-top: calc(10px * var(--scale));
}
.mt-\[calc\(16px\*var\(--scale\)\)\]{
  margin-top: calc(16px * var(--scale));
}
.mt-\[calc\(20px\*var\(--scale\)\)\]{
  margin-top: calc(20px * var(--scale));
}
.mt-\[calc\(26px\*var\(--scale\)\)\]{
  margin-top: calc(26px * var(--scale));
}
.mt-\[calc\(30px\*var\(--scale\)\)\]{
  margin-top: calc(30px * var(--scale));
}
.mt-\[calc\(36px\*var\(--scale\)\)\]{
  margin-top: calc(36px * var(--scale));
}
.mt-\[calc\(40px\*var\(--scale\)\)\]{
  margin-top: calc(40px * var(--scale));
}
.mt-\[calc\(46px\*var\(--scale\)\)\]{
  margin-top: calc(46px * var(--scale));
}
.mt-\[calc\(60px\*var\(--scale\)\)\]{
  margin-top: calc(60px * var(--scale));
}
.mt-\[calc\(76px\*var\(--scale\)\)\]{
  margin-top: calc(76px * var(--scale));
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.flex{
  display: flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}
.aspect-\[4\/3\]{
  aspect-ratio: 4/3;
}
.aspect-video{
  aspect-ratio: 16 / 9;
}
.h-\[90vh\]{
  height: 90vh;
}
.h-screen{
  height: 100vh;
}
.w-\[96\%\]{
  width: 96%;
}
.w-\[calc\(102px\*var\(--scale\)\)\]{
  width: calc(102px * var(--scale));
}
.w-\[calc\(107px\*var\(--scale\)\)\]{
  width: calc(107px * var(--scale));
}
.w-\[calc\(255px\*var\(--scale\)\)\]{
  width: calc(255px * var(--scale));
}
.w-\[calc\(301px\*var\(--scale\)\)\]{
  width: calc(301px * var(--scale));
}
.w-\[calc\(313px\*var\(--scale\)\)\]{
  width: calc(313px * var(--scale));
}
.w-\[calc\(327px\*var\(--scale\)\)\]{
  width: calc(327px * var(--scale));
}
.w-\[calc\(33px\*var\(--scale\)\)\]{
  width: calc(33px * var(--scale));
}
.w-\[calc\(343px\*var\(--scale\)\)\]{
  width: calc(343px * var(--scale));
}
.w-\[calc\(60px\*var\(--scale\)\)\]{
  width: calc(60px * var(--scale));
}
.w-\[calc\(70px\*var\(--scale\)\)\]{
  width: calc(70px * var(--scale));
}
.w-\[calc\(85px\*var\(--scale\)\)\]{
  width: calc(85px * var(--scale));
}
.w-\[calc\(89px\*var\(--scale\)\)\]{
  width: calc(89px * var(--scale));
}
.w-\[calc\(92px\*var\(--scale\)\)\]{
  width: calc(92px * var(--scale));
}
.w-\[calc\(98px\*var\(--scale\)\)\]{
  width: calc(98px * var(--scale));
}
.w-full{
  width: 100%;
}
.flex-shrink{
  flex-shrink: 1;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize{
  resize: both;
}
.list-disc{
  list-style-type: disc;
}
.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-col{
  flex-direction: column;
}
.items-center{
  align-items: center;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-around{
  justify-content: space-around;
}
.gap-\[2vh\]{
  gap: 2vh;
}
.gap-\[calc\(10px\*var\(--scale\)\)\]{
  gap: calc(10px * var(--scale));
}
.gap-\[calc\(13px\*var\(--scale\)\)\]{
  gap: calc(13px * var(--scale));
}
.space-y-\[calc\(10px\*var\(--scale\)\)\] > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(calc(10px * var(--scale)) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(calc(10px * var(--scale)) * var(--tw-space-y-reverse));
}
.space-y-\[calc\(16px\*var\(--scale\)\)\] > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(calc(16px * var(--scale)) * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(calc(16px * var(--scale)) * var(--tw-space-y-reverse));
}
.border{
  border-width: 1px;
}
.border-none{
  border-style: none;
}
.bg-\[\#603814\]{
  --tw-bg-opacity: 1;
  background-color: rgb(96 56 20 / var(--tw-bg-opacity, 1));
}
.bg-\[\#F3F1EF\]{
  --tw-bg-opacity: 1;
  background-color: rgb(243 241 239 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FCEE21\]{
  --tw-bg-opacity: 1;
  background-color: rgb(252 238 33 / var(--tw-bg-opacity, 1));
}
.bg-\[\#FFDB00\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 219 0 / var(--tw-bg-opacity, 1));
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.px-\[calc\(15px\*var\(--scale\)\)\]{
  padding-left: calc(15px * var(--scale));
  padding-right: calc(15px * var(--scale));
}
.px-\[calc\(30px\*var\(--scale\)\)\]{
  padding-left: calc(30px * var(--scale));
  padding-right: calc(30px * var(--scale));
}
.px-\[calc\(60px\*var\(--scale\)\)\]{
  padding-left: calc(60px * var(--scale));
  padding-right: calc(60px * var(--scale));
}
.py-\[calc\(14px\*var\(--scale\)\)\]{
  padding-top: calc(14px * var(--scale));
  padding-bottom: calc(14px * var(--scale));
}
.py-\[calc\(16px\*var\(--scale\)\)\]{
  padding-top: calc(16px * var(--scale));
  padding-bottom: calc(16px * var(--scale));
}
.py-\[calc\(18px\*var\(--scale\)\)\]{
  padding-top: calc(18px * var(--scale));
  padding-bottom: calc(18px * var(--scale));
}
.pb-\[calc\(53px\*var\(--scale\)\)\]{
  padding-bottom: calc(53px * var(--scale));
}
.pl-\[calc\(105px\*var\(--scale\)\)\]{
  padding-left: calc(105px * var(--scale));
}
.pl-\[calc\(25px\*var\(--scale\)\)\]{
  padding-left: calc(25px * var(--scale));
}
.pr-\[calc\(30px\*var\(--scale\)\)\]{
  padding-right: calc(30px * var(--scale));
}
.pt-40{
  padding-top: 10rem;
}
.pt-\[calc\(94px\*var\(--scale\)\)\]{
  padding-top: calc(94px * var(--scale));
}
.text-center{
  text-align: center;
}
.text-\[calc\(16px\*var\(--scale\)\)\]{
  font-size: calc(16px * var(--scale));
}
.text-\[calc\(20px\*var\(--scale\)\)\]{
  font-size: calc(20px * var(--scale));
}
.text-lg{
  font-size: 1.8rem;
}
.font-bold{
  font-weight: 700;
}
.uppercase{
  text-transform: uppercase;
}
.leading-\[1\.5\]{
  line-height: 1.5;
}
.text-\[\#FCEE21\]{
  --tw-text-opacity: 1;
  color: rgb(252 238 33 / var(--tw-text-opacity, 1));
}
.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.drop-shadow{
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
:root {
  --scale: calc(min(100vw, 544px) / 414px);
  overscroll-behavior: none;
}
body {
  width: 100vw;
  min-width: 310px;
  overflow-x: hidden;
  background: #FFEEB5;
  color: #6A2414;
  font-family: "Noto Sans JP", sans-serif;
}
ul {
  list-style: none;
}
body main.main,
body:has(.l-lowerNav) .l-main .main {
  padding: 0;
}
img{
  display: block;
  vertical-align: bottom;
}
.lp_header {
  display: none;
}
.lp_main {
  overflow: visible;
}
/* ==============================
lp layout
================================*/
.lp__leftColumn {
  grid-column: 1;
}
.lp__leftColumn * {
  display: none;
}
@media (min-width: 1024px) {
  .lp__leftColumn * {
    display: block;
  }
  .lp__leftColumn__inner {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: calc(60px * var(--scale));
    padding-right: calc(60px * var(--scale));
    padding-top: 10rem;
  }
  .lp__leftColumn .season--sns--icon{
    margin-top: 0px;
  }
}
.lp__leftColumn .season--pc--logo img{
  margin-left: auto;
  margin-right: auto;
}
.lp__rightColumn {
  grid-column: 3;
}
.lp__rightColumn * {
  display: none;
}
@media (min-width: 1024px) {
  .lp__rightColumn * {
    display: block;
  }
  .lp__rightColumn__inner {
    position: sticky;
    top: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: calc(60px * var(--scale));
    padding-right: calc(60px * var(--scale));
    padding-top: 10rem;
  }
  .lp__rightColumn__inner nav{
    margin-left: auto;
    margin-right: auto;
  }
  .lp__rightColumn__inner nav ul{
    display: flex;
    flex-direction: column;
    gap: 2vh;
  }
  .lp__rightColumn__inner nav ul > :not([hidden]) ~ :not([hidden]){
    --tw-space-y-reverse: 0;
    margin-top: calc(calc(10px * var(--scale)) * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(calc(10px * var(--scale)) * var(--tw-space-y-reverse));
  }
  .lp__rightColumn__inner nav ul img {
    max-width: 500px;
    width: 100%;
  }
}
.lp__wrapper {
  display: grid;
  grid-template-columns: 1fr min(544px, 100%) 1fr;
}
.lp__wrapper::before {
  position: fixed;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("/wp-content/themes/mngtr_basic/img/lp/howto/bg.webp") no-repeat center bottom;
  background-size: 100%;
}
.lp__mainColumn {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  box-shadow: 0 0 calc(40px * var(--scale)) 0 rgba(0, 0, 0, 0.2);
}
.lp_footer {
  position: relative;
  z-index: 10;
}
/* ==============================
okohon20th
================================*/
.lp__mainColumn {
  background: #FCEE21;
  overflow: hidden;
}
.hero {
  height: calc(800px * var(--scale));
  position: relative;
  overflow: hidden;
}
.hero__head{
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 100%;
}
.hero__head .hero__logo{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(26px * var(--scale));
  width: calc(328px * var(--scale));
}
.hero__okonomiyaki{
  position: absolute;
  top: 0px;
  left: 0px;
}
.experience__imgList{
  position: relative;
  padding-left: calc(105px * var(--scale));
  padding-right: calc(30px * var(--scale));
}
.experience__imgList::before {
  content: "";
  display: block;
  width: calc(18px * var(--scale));
  height: calc(2499px * var(--scale));
  background: url("/wp-content/themes/mngtr_basic/img/lp/howto/experience_arrow.svg") repeat-y center top;
  background-size: 100% auto;
  position: absolute;
  top: calc(165px * var(--scale));
  left: calc(58px * var(--scale));
}
.c-qaList dt{
  margin-left: calc(30px * var(--scale));
  margin-right: calc(30px * var(--scale));
  display: flex;
  cursor: pointer;
  gap: calc(10px * var(--scale));
  padding-top: calc(18px * var(--scale));
  padding-bottom: calc(18px * var(--scale));
  font-size: calc(20px * var(--scale));
  font-weight: 700;
  border-bottom: 1px solid #603814;
}
.c-qaList dt::before {
  width: calc(35px * var(--scale));
  height: calc(35px * var(--scale));
  background: url("/wp-content/themes/mngtr_basic/img/lp/howto/icon-q.svg") no-repeat center center;
  background-size: contain;
  content: "";
  flex-shrink: 0;
}
.c-qaList dt::after {
  width: calc(19px * var(--scale));
  height: calc(19px * var(--scale));
  background: url("/wp-content/themes/mngtr_basic/img/lp/howto/icon-triangle.svg") no-repeat center center;
  background-size: contain;
  content: "";
  flex-shrink: 0;
  margin-top: auto;
  margin-bottom: calc(8px * var(--scale));
}
.c-qaList dt[aria-expanded=true] {
  border-color: transparent;
}
.c-qaList .accordion__inner{
  gap: calc(10px * var(--scale));
  --tw-bg-opacity: 1;
  background-color: rgb(96 56 20 / var(--tw-bg-opacity, 1));
  padding-left: calc(30px * var(--scale));
  padding-right: calc(30px * var(--scale));
  font-size: calc(16px * var(--scale));
  --tw-text-opacity: 1;
  color: rgb(252 238 33 / var(--tw-text-opacity, 1));
}
.c-qaList .accordion__inner > div{
  margin-top: calc(16px * var(--scale));
  margin-bottom: calc(16px * var(--scale));
}
.c-qaList .accordion__inner::before {
  width: calc(35px * var(--scale));
  height: calc(35px * var(--scale));
  background: url("/wp-content/themes/mngtr_basic/img/lp/howto/icon-a.svg") no-repeat center center;
  background-size: contain;
  content: "";
  flex-shrink: 0;
}
.c-qaList a {
  color: #fff;
}
.c-qaList a:hover {
  text-decoration: underline;
}
/* ==============================
howto
================================*/
.overlay__opening {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100lvh;
  z-index: 100010;
  background: #FCEE21;
}
.scene--01,
.scene--02 {
  background: #FCEE21;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.scene__content {
  height: 100%;
  max-width: 100%;
  aspect-ratio: 1/2;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.scene--01__kanban {
  position: absolute;
  bottom: 0;
}
.scene--01__syucyu {
  max-width: none;
  height: 120%;
  position: absolute;
  top: 0;
  left: 0;
}
.scene--01__kininaru {
  max-width: none;
  height: 36%;
  position: absolute;
  top: 5%;
  left: 35%;
}
.scene--01__nazonokanban {
  max-width: none;
  height: 55%;
  position: absolute;
  top: 4%;
  left: 8%;
}
.scene--02__hoka {
  max-width: none;
  width: 108%;
  position: absolute;
  top: 0;
  left: -2%;
}
.scene--02__okonomi {
  max-width: none;
  width: 136%;
  position: absolute;
  bottom: 0;
  left: -16%;
}
.scene--02__tabehoudai {
  position: absolute;
  top: 38%;
  width: 50%;
}
.scene--02__okonomiyaki {
  position: absolute;
  top: 47.5%;
  width: 44%;
  left: 4%;
}
.scene--02__dakejyanai {
  position: absolute;
  top: 40%;
}
.accordion__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease-out;
}
.accordion__body[aria-hidden=false] {
  grid-template-rows: 1fr;
}
.accordion__inner {
  overflow: hidden;
}
.anime-invisible_to_visible {
  opacity: 0;
  transition: opacity 0.5s ease-out 0.4s;
}
.anime-invisible_to_visible.active {
  opacity: 1;
}
.anime-zoomin {
  opacity: 0;
  transform: scale(2);
  transition: opacity 0.3s ease-out, transform 0.2s ease-out 0.5s;
}
.anime-zoomin.active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s ease-out 0.3s, transform 0.2s ease-out 0.3s;
}
.anime-slideDown {
  animation: 0.5s ease-in-out 0.5s infinite alternate slideDown;
}
@keyframes slideDown {
  from {
    transform: translateY(-10%);
  }
  to {
    transform: translateY(10%);
  }
}
.season--info--button {
  padding: clamp(2rem, 1.636rem + 0.97vw, 2.8rem);
}
.season--info--button a {
  display: inline-block;
  width: 100%;
  padding: 0.5em 2.5em;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: calc(1.5rem * var(--scale));
  text-align: center;
  color: #030303;
  text-decoration: none;
  background-color: #fff;
  border: solid 1px #707070;
  border-radius: 50px;
  transition: 0.4s;
}