/* base */
 a.sidenav-trigger.top-nav {
   position: fixed;
   text-align: center;
   height: 48px;
   width: 48px;
   top: 20px;
   right: 0;
   float: none;
   margin-right: 1.5rem;
   color: #f3989b;
   font-size: 36px;
   z-index: 99;
   background-color: #fff;
 }

 .sidenav-trigger .material-icons {
   font-size: 36px !important;
 }

 .sidenav li {
   line-height: 48px;
   margin-bottom: 24px;
 }

 .sidenav li a {
   line-height: 1;
 }

 .sidenav li a span {
   display: block;
   font-size: 12px;
   margin-bottom: 8px;
 }

 .split {
   position: absolute;
   width: 50%;
   height: 100%;
 }

 .left-box {
   left: 0;
 }

 .right-box {
   right: 0;
 }

 .left-box {
   background: url(../img/common/bg-left.jpg) no-repeat top center;
   background-size: cover;
   position: fixed;
 }

 .box-menu {
   width: 300px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }

 .box-menu ul {
   margin-bottom: 64px;
   margin-top: 64px;
   text-align: center;
 }

 .header-nav-lang {
   text-align: center;
   margin-bottom: 64px;
   margin-top: 64px;
 }

 .header-nav-lang-jp:not([href]) {
   font-weight: bold;
 }

 .header-nav-lang-jp {
   padding: 0 10px;
   display: inline-block;
   border-right: 1px solid #000;
 }

 .header-nav-lang-en:not([href]) {
   font-weight: bold;
 }

 .header-nav-lang-en {
   padding: 0 10px;
   display: inline-block;
 }

 .share-social {
   text-align: center;
 }

 .share-social h3 {
   margin-bottom: 24px;
 }

 .box-menu ul.sns_list {
   gap: 15%;
   margin-bottom: 0px !important;
   margin-top: 0px;
 }

 .box-menu li {
   margin-bottom: 16px;
 }

 .box-menu li a {
   font-size: 18px;
 }

 .box-menu li a:hover {
   opacity: 0.7;
   transition: 0.3s;
 }

 .box-menu li a span {
   font-size: 12px;
   display: block;
 }

 main {
   position: relative;
   max-width: 640px;
   margin: 0px auto;
   background-color: #fff;
   overflow: visible;
   filter: drop-shadow(0 0 15px rgba(50, 0, 1, 0.25));
   /* z-index: 1000; */
 }

 .sidenav {
   box-shadow: 0px 10px 15px 2px rgba(0, 0, 0, 0.2);
 }

 .sidenav li>a>i.material-icons {
   line-height: 1;
   margin: 0;
   font-size: 20px;
   color: #fd8c8a;
 }

 #logo-container {
   height: 200px;
   padding: 64px 0px 0px;
   background-color: #fff;
   text-align: center;
 }

 #logo-container span {
   display: block;
   line-height: 1.5;
   font-family: "Zen Old Mincho", sans-serif;
   letter-spacing: 8px;
   font-size: 12px;
   text-transform: uppercase;
 }

 .main {
   padding: 0 25px;
 }

 .intro h1 {
   text-align: center;
 }

 .intro h1 span {
   font-size: 18px;
   line-height: 1.25;
   display: block;
   padding-top: 8px;

 }

 .intro h2 {
   color: #EF4A5F;
   border-top: 1px solid #EF4A5F;
   border-bottom: 1px solid #EF4A5F;
   text-align: center;
   padding: 16px 0px;
 }

 dt {
   margin-bottom: 8px;
   font-weight: bold;
   color: #743a2e;
 }

 dd {
   margin-bottom: 24px;
   margin-left: 0;
 }


 .mb32 {
   margin-bottom: 32px !important;
 }

 .end {
   margin-bottom: 0px !important;
   padding-bottom: 0px !important;
 }

 .no-mb {
   margin-bottom: 0 !important;
 }

 .resp-img {
   max-width: 100%;
   height: auto;
 }

 .sp-br {
   display: none;
 }

 .box {
   border-radius: 16px;
   padding: 32px;
   margin: 0px 0px 8px;
   text-align: center;
   background-color: #f8f6f4;
 }

 .menu-container {
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .menu-item {
   width: 48%;
   margin-bottom: 24px;
 }

 .menu-item img {
   width: 100%;
   aspect-ratio: 1/1;
   object-fit: cover;
   border-radius: 16px;
 }

 .menu-item p.price {
   font-size: 14px;
   margin-bottom: 0px !important;
 }

 .menu-item p.price span.yen {
   font-size: 12px;
 }

 .page-footer h3 {
   margin-bottom: 8px;
 }

 .page-footer p {
   font-size: 14px;
   margin-bottom: 32px;
 }

 .sns_list {
   display: flex;
   align-items: flex-end;
   justify-content: center;
   gap: 10%;
   margin-bottom: 48px !important;
 }

 .page-footer {
   padding: 64px 0 0;
   color: #000;
   background-color: #f8f6f4;
 }

 .page-footer .footer-copyright {
   overflow: hidden;
   min-height: 50px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
   padding: 10px 0px;
   color: #fff;
   background-color: #fd8c8a;
 }

 /* スクロールダウンの位置 */
 .scroll {
   position: absolute;
   right: 10%;
   top: 80%;
   writing-mode: vertical-rl;
 }

 .scroll span {
   color: #fff;
 }

 /* 線のアニメーション部分 */
 .scroll::before {
   animation: scroll 2s infinite;
   background-color: #fff;
   bottom: -115px;
   content: "";
   height: 100px;
   left: 0;
   margin: auto;
   position: absolute;
   right: 0;
   width: 1px;
 }

 /* 線のアニメーション */
 @keyframes scroll {
   0% {
     transform: scale(1, 0);
     transform-origin: 0 0;
   }

   50% {
     transform: scale(1, 1);
     transform-origin: 0 0;
   }

   51% {
     transform: scale(1, 1);
     transform-origin: 0 100%;
   }

   100% {
     transform: scale(1, 0);
     transform-origin: 0 100%;
   }
 }

 /*==================================================
アニメーション
===================================*/
 /* ブラー */
 .photo-blur {
   filter: blur(0px);
   animation-name: blur;
   animation-duration: 2s;
 }

 @keyframes blur {
   0% {
     filter: blur(5px);
     opacity: 0;
   }

   100% {
     filter: blur(0);
     opacity: 1;
   }
 }

 /* その場で */
 .fadeIn {
   animation-name: fadeInAnime;
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeInAnime {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }

 /* 下から */
 .fadeUp {
   animation-name: fadeUpAnime;
   animation-duration: 1.0s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeUpAnime {
   from {
     opacity: 0;
     transform: translateY(50px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* 上から */
 .fadeDown {
   animation-name: fadeDownAnime;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeDownAnime {
   from {
     opacity: 0;
     transform: translateY(-50px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 /* 左から */
 .fadeLeft {
   animation-name: fadeLeftAnime;
   animation-duration: 2s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeLeftAnime {
   from {
     opacity: 0;
     transform: translateX(-50px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 /* 右から */
 .fadeRight {
   animation-name: fadeRightAnime;
   animation-duration: 0.5s;
   animation-fill-mode: forwards;
   opacity: 0;
 }

 @keyframes fadeRightAnime {
   from {
     opacity: 0;
     transform: translateX(50px);
   }

   to {
     opacity: 1;
     transform: translateX(0);
   }
 }

 /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 .fadeInTrigger,
 .fadeUpTrigger,
 .fadeDownTrigger,
 .fadeLeftTrigger,
 .fadeRightTrigger {
   opacity: 0;
 }

 .mfp-bg {
   opacity: 0;
   transition: opacity 1s;
 }

 .mfp-bg.mfp-ready {
   opacity: 0.8;
 }

 .mfp-bg.mfp-removing {
   opacity: 0;
 }

 .mfp-wrap .mfp-content {
   opacity: 0;
   transition: opacity 1s;
 }

 .mfp-wrap.mfp-ready .mfp-content {
   opacity: 1;
 }

 .mfp-wrap.mfp-removing .mfp-content {
   opacity: 0;
 }

 @media screen and (max-width: 992px) {
   .sp-hide {
     display: none;
   }

   header,
   main {
     padding-left: 0px;
   }



   h1 {
     padding: 32px 0;
   }

   h1 span.maim {
     font-size: 24px;
   }

   h2 {
     font-size: 20px;
     margin: 0 0 16px;
   }

   .split {
     position: relative;
     width: 100%;
     height: auto;
   }
 }

 /* スマートフォン：max-width : 599px */
 @media screen and (max-width: 599px) {
   .section.no-pad {
     padding: 24px 0px 0px;
   }

   .row {
     margin-bottom: 32px;
   }

   .sp-br {
     display: block;
   }

   .box {
     padding: 16px;
   }

   .page-footer p {
     font-size: 14px;
   }

   .main {
     padding: 0 25px;
   }

   .header-nav-lang {
     margin-top: 40px;
   }

   .sidenav li a.header-nav-lang-en {
     display: inline;
     padding: 0 16px;
   }

   .sidenav li a.header-nav-lang-jp {
     display: inline;
     padding: 0 16px;
   }
 }

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

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