@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap");
* {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  list-style: none; }

body {
  -webkit-text-size-adjust: 100%;
  font-family: 'Hiragino Kaku Gothic ProN','YuGothic','Yu Gothic','ヒラギノ角ゴ ProN W3','メイリオ', 'Meiryo','ＭＳ ゴシック',sans-serif;
  font-size: 15px;
  line-height: 1.75;
  font-feature-settings: "palt";
  color: #3C7942;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

img {
  width: 100%;
  height: auto;
  display: block; }

a {
  display: block;
  text-decoration: none; }

.tgt {
  opacity: 0;
  transition: opacity 0.5s ease-out; }
  .tgt.tgt-ill {
    transition: opacity 0.8s 0.3s ease-out; }
  .tgt.on {
    opacity: 1; }

@keyframes msgOn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes menuOn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes kvOn {
  0% {
    transform: scale(1.2);
    opacity: 0; }
  50% {
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 1; } }

@keyframes kvOff {
  0% {
    transform: scale(1);
    opacity: 1; }
  100% {
    transform: scale(1);
    opacity: 0; } }

@keyframes mdOn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.wrapper {
  overflow: hidden; }

.header {
  position: fixed;
  width: 100%;
  z-index: 200;
  opacity: 0; }
  .header .logo {
    position: absolute; }
  .header .hbg {
    position: absolute;
    z-index: 10; }
    .header .hbg li {
      position: absolute;
      height: 1px;
      background: #fff; }
      .header .hbg li:nth-child(2) {
        transition: opacity 0.3s ease-out; }
    .header .hbg.on li:nth-child(2) {
      opacity: 0; }
  .header .nav {
    position: absolute;
    height: 100vh;
    background: #3C7942; }
    .header .nav .nav-inner {
      position: absolute;
      width: 100%; }
      .header .nav .nav-inner .nav-list-box .nav-list a {
        text-align: center;
        color: #fff; }
  .header.on {
    opacity: 1;
    transition: opacity 0.5s 2s ease-out; }

.hero-content {
  height: 100vh;
  overflow: hidden; }
  .hero-content::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #3C7942; }
  .hero-content .logo-typo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    opacity: 0; }
  .hero-content .msg-box {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(211, 180, 149, 0.9) url(../imgs/hero/bg_news.png) center center no-repeat;
    background-size: cover;
    text-align: center;
    color: #fff;
    z-index: 20;
    opacity: 0; }
    .hero-content .msg-box .msg-btn {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 10; }
    .hero-content .msg-box .msg-close {
      position: absolute;
      display: none;
      z-index: 10; }
      .hero-content .msg-box .msg-close::before {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(40deg);
        width: 100%;
        height: 1px;
        background: #fff; }
      .hero-content .msg-box .msg-close::after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(-40deg);
        width: 100%;
        height: 1px;
        background: #fff; }
    .hero-content .msg-box .msg-box-inner .msg-list-box li {
      margin-bottom: 3em;
      display: none; }
      .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-icon {
        position: absolute;
        background: #fff;
        text-align: center;
        color: #3C7942;
        font-weight: 600; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-icon span {
          position: absolute;
          display: block;
          top: 50%;
          transform: translateY(-50%);
          width: 100%; }
      .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-tit {
        font-weight: 600;
        letter-spacing: 0.05em;
        opacity: 0; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-tit span {
          font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
          letter-spacing: 0; }
      .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-info-box {
        text-align: left;
        font-weight: 600;
        opacity: 0; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-info-box .msg-info p {
          margin-bottom: 1em; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-info-box .msg-info a {
          color: #fff;
          text-decoration: underline; }
      .hero-content .msg-box .msg-box-inner .msg-list-box li.msg-list-0 {
        display: block; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li.msg-list-0 .msg-tit {
          opacity: 1 !important; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li.msg-list-0 .msg-info-box {
          display: none; }
    .hero-content .msg-box.on {
      background: rgba(211, 180, 149, 0.9); }
      .hero-content .msg-box.on .msg-btn {
        display: none; }
      .hero-content .msg-box.on .msg-close {
        display: block; }
      .hero-content .msg-box.on .msg-box-inner {
        overflow-y: scroll; }
        .hero-content .msg-box.on .msg-box-inner::-webkit-scrollbar {
          width: 5px; }
        .hero-content .msg-box.on .msg-box-inner::-webkit-scrollbar-track {
          background: none; }
        .hero-content .msg-box.on .msg-box-inner::-webkit-scrollbar-thumb {
          box-shadow: 0 0 5px rgba(255, 255, 255, 0.5) inset; }
        .hero-content .msg-box.on .msg-box-inner .msg-list-box li {
          display: block; }
          .hero-content .msg-box.on .msg-box-inner .msg-list-box li .msg-info-box {
            display: block;
            animation: msgOn 0.5s 0.1s 1 forwards; }
          .hero-content .msg-box.on .msg-box-inner .msg-list-box li:not(.msg-list-0) .msg-tit {
            animation: msgOn 0.5s 0.1s 1 forwards; }
  .hero-content .kv-box {
    width: 100%;
    height: 100%;
    transform: scale(1.2); }
    .hero-content .kv-box::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.2);
      z-index: 15; }
    .hero-content .kv-box .kv {
      width: 100%;
      height: 100%; }
      .hero-content .kv-box .kv li {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        animation: kvOff 4s 1 forwards;
        opacity: 0; }
        .hero-content .kv-box .kv li.on {
          z-index: 10;
          animation: kvOn 4s 1 forwards; }
          .hero-content .kv-box .kv li.on.on-init {
            animation: inherit;
            opacity: 1; }
        .hero-content .kv-box .kv li.off {
          animation: inherit;
          opacity: 0; }
  .hero-content.on .logo-typo {
    opacity: 1;
    transition: opacity 1s ease-out; }
  .hero-content.on::after {
    width: 0;
    transition: width 0.3s 1.1s ease-out; }
  .hero-content.on .kv-box {
    transform: scale(1);
    transition: transform 4s 1s ease-out; }
  .hero-content.on .msg-box {
    opacity: 1;
    transition: opacity 0.5s 2s ease-out; }
  .hero-content.on2::after {
    content: none; }

.introduction-content {
  background: #0D341B;
  z-index: 100;
  overflow: hidden; }
  .introduction-content .inner {
    color: #FEFFF2; }
    .introduction-content .inner .content-tit {
      font-weight: 700; }
    .introduction-content .inner .text-box {
      text-align: justify; }
      .introduction-content .inner .text-box .text {
        font-weight: 600;
        letter-spacing: 0.06em; }
    .introduction-content .inner .bg-box {
      position: absolute; }
      .introduction-content .inner .bg-box p::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #3C7942;
        transition: width 0.3s ease-out; }
      .introduction-content .inner .bg-box.on p::after {
        width: 0; }

.content {
  z-index: 100;
  overflow: hidden; }
  .content .content-tit {
    font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
    line-height: 1;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); }
  .content.menu-content {
    background: #fff; }
    .content.menu-content .content-tit {
      color: #0D341B; }
    .content.menu-content .base-btn-box, .content.menu-content .menu-btn-box {
      display: flex;
      justify-content: center;
      background: #0D341B; }
      .content.menu-content .base-btn-box li, .content.menu-content .menu-btn-box li {
        font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
        text-align: center; }
      .content.menu-content .base-btn-box::before, .content.menu-content .menu-btn-box::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        background: #fff;
        box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.16); }
    .content.menu-content .base-box .base-list {
      display: none; }
      .content.menu-content .base-box .base-list.on {
        display: block; }
      .content.menu-content .base-box .base-list .detail-box {
        display: flex;
        justify-content: center; }
        .content.menu-content .base-box .base-list .detail-box li {
          font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
          text-align: center;
          color: #0D341B;
          opacity: 0; }
          .content.menu-content .base-box .base-list .detail-box li p {
            line-height: 1; }
      .content.menu-content .base-box .base-list .option-box {
        color: #0D341B; }
        .content.menu-content .base-box .base-list .option-box .option {
          letter-spacing: 0.05em; }
        .content.menu-content .base-box .base-list .option-box .option-price {
          margin-bottom: 0.5em;
          font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
          text-align: right; }
      .content.menu-content .base-box .base-list .note {
        margin: 2em auto 0;
        color: #0D341B; }
    .content.menu-content .base-box.on .base-list .detail-box li {
      opacity: 1; }
      .content.menu-content .base-box.on .base-list .detail-box li:nth-child(1) {
        transition: opacity 0.5s ease-out; }
      .content.menu-content .base-box.on .base-list .detail-box li:nth-child(2) {
        transition: opacity 0.5s 0.1s ease-out; }
      .content.menu-content .base-box.on .base-list .detail-box li:nth-child(3) {
        transition: opacity 0.5s 0.2s ease-out; }
    .content.menu-content .base-btn-box.off, .content.menu-content .base-box.off {
      opacity: 0.3;
      pointer-events: none; }
    .content.menu-content .menu-box {
      display: none; }
      .content.menu-content .menu-box li {
        text-align: center;
        display: none;
        opacity: 0; }
        .content.menu-content .menu-box li p {
          line-height: 1; }
          .content.menu-content .menu-box li p.menu-name-en {
            font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
            font-weight: 700; }
          .content.menu-content .menu-box li p.thumb {
            overflow: hidden; }
            .content.menu-content .menu-box li p.thumb::after {
              content: '';
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: #3C7942; }
        .content.menu-content .menu-box li.reccomend::after {
          content: 'オススメ';
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          background: #3C7942;
          font-weight: 600;
          color: #fff;
          text-align: center; }
        .content.menu-content .menu-box li.seasonal::after {
          content: '季節限定';
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          background: #C9AE92;
          font-weight: 600;
          color: #fff;
          text-align: center; }
        .content.menu-content .menu-box li.set {
          display: block; }
        .content.menu-content .menu-box li.on {
          transition: opacity 0.5s ease-out;
          opacity: 1; }
          .content.menu-content .menu-box li.on p.thumb::after {
            transition: left 0.5s ease-out;
            left: 100%; }
      .content.menu-content .menu-box.on {
        display: flex;
        flex-wrap: wrap; }
    .content.menu-content .btn-more {
      margin: 0 auto;
      font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
      text-align: center;
      overflow: hidden; }
      .content.menu-content .btn-more span {
        z-index: 1; }
      .content.menu-content .btn-more::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: -100%; }
      .content.menu-content .btn-more.btn-more-menu {
        background: #3C7942;
        color: #fff; }
        .content.menu-content .btn-more.btn-more-menu::before {
          background: #0D341B; }
      .content.menu-content .btn-more.btn-more-cafe {
        background: #FEFFF2;
        color: #2C1D00; }
        .content.menu-content .btn-more.btn-more-cafe::before {
          background: #2C1D00; }
      .content.menu-content .btn-more.off {
        display: none; }
    .content.menu-content .wrap-cafe {
      background: #503400;
      overflow: hidden; }
      .content.menu-content .wrap-cafe .inner .ill-box {
        position: absolute; }
        .content.menu-content .wrap-cafe .inner .ill-box .ill {
          position: absolute;
          top: 0;
          opacity: 0; }
        .content.menu-content .wrap-cafe .inner .ill-box.on .ill {
          opacity: 1; }
          .content.menu-content .wrap-cafe .inner .ill-box.on .ill:nth-child(1) {
            transition: opacity 0.5s 0.1s ease-out; }
          .content.menu-content .wrap-cafe .inner .ill-box.on .ill:nth-child(2) {
            transition: opacity 0.5s 0.2s ease-out; }
          .content.menu-content .wrap-cafe .inner .ill-box.on .ill:nth-child(3) {
            transition: opacity 0.5s 0.3s ease-out; }
      .content.menu-content .wrap-cafe .inner .bg-cafe {
        position: absolute; }
        .content.menu-content .wrap-cafe .inner .bg-cafe p::after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          background: #2C1D00;
          transition: width 0.3s ease-out; }
        .content.menu-content .wrap-cafe .inner .bg-cafe.on p::after {
          width: 0; }
      .content.menu-content .wrap-cafe .inner .text {
        color: #fff;
        font-weight: 700;
        letter-spacing: 0.02em; }
      .content.menu-content .wrap-cafe .inner .cafe-box {
        display: flex;
        flex-wrap: wrap; }
        .content.menu-content .wrap-cafe .inner .cafe-box li {
          opacity: 0;
          display: none; }
          .content.menu-content .wrap-cafe .inner .cafe-box li p {
            line-height: 1;
            color: #fff;
            text-align: center; }
            .content.menu-content .wrap-cafe .inner .cafe-box li p.menu-name-en {
              font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
              font-weight: 700; }
            .content.menu-content .wrap-cafe .inner .cafe-box li p.thumb {
              overflow: hidden; }
              .content.menu-content .wrap-cafe .inner .cafe-box li p.thumb::after {
                content: '';
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #2C1D00; }
          .content.menu-content .wrap-cafe .inner .cafe-box li.reccomend::after {
            content: 'オススメ';
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            background: #3C7942;
            font-weight: 600;
            color: #fff;
            text-align: center; }
          .content.menu-content .wrap-cafe .inner .cafe-box li.seasonal::after {
            content: '季節限定';
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            background: #C9AE92;
            font-weight: 600;
            color: #fff;
            text-align: center; }
          .content.menu-content .wrap-cafe .inner .cafe-box li.set {
            display: block; }
          .content.menu-content .wrap-cafe .inner .cafe-box li.on {
            transition: opacity 0.5s ease-out;
            opacity: 1; }
            .content.menu-content .wrap-cafe .inner .cafe-box li.on p.thumb::after {
              transition: left 0.5s ease-out;
              left: 100%; }
  .content.story-content {
    background: #0D341B;
    margin-top: 50px; }
    .content.story-content .content-tit {
      color: #FEFFF2; }
    .content.story-content .bg-box, .content.story-content .ill-box {
      position: absolute; }
    .content.story-content .bg-box p::after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: #3C7942;
      transition: width 0.3s 0.05s ease-out; }
    .content.story-content .bg-box.on p::after {
      width: 0; }
    .content.story-content .text-box {
      transform: translateY(20px); }
      .content.story-content .text-box .text {
        color: #222;
        letter-spacing: 0.05em; }
        .content.story-content .text-box .text sup {
          color: #FF0000; }
      .content.story-content .text-box.on {
        transform: translateY(0);
        transition: all 0.5s ease-out; }
    .content.story-content .credit {
      color: #FEFFF2;
      font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
      line-height: 1;
      text-align: center; }
  .content.shop-content {
    background: #030C20; }
    .content.shop-content .inner .content-tit {
      color: #fff;
      text-align: center; }
      .content.shop-content .inner .content-tit span {
        display: block;
        line-height: 1; }
    .content.shop-content .inner .shop-box {
      margin: 0 auto; }
      .content.shop-content .inner .shop-box .shop-list .thumb::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #D3B495;
        transition: width 0.3s ease-out; }
      .content.shop-content .inner .shop-box .shop-list .shop-info {
        color: #fff;
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.5s 0.3s ease-out; }
        .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner {
          background: #D3B495; }
          .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop {
            text-align: center;
            line-height: 1; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop span {
              display: block; }
              .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop span.en {
                font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif; }
              .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop span.ja {
                font-weight: 400; }
          .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box {
            display: flex;
            justify-content: space-between; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .map {
              line-height: 0; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail {
              display: flex;
              flex-wrap: wrap;
              align-content: space-between; }
              .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail .add {
                font-style: normal; }
                .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail .add a {
                  display: inline;
                  color: #fff; }
              .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail .delivery-box {
                display: flex; }
        .content.shop-content .inner .shop-box .shop-list .shop-info .service-box {
          display: flex; }
          .content.shop-content .inner .shop-box .shop-list .shop-info .service-box li {
            background: #3C7942; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .service-box li span {
              position: absolute;
              display: block;
              font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif; }
      .content.shop-content .inner .shop-box .shop-list.on .thumb::after {
        width: 0; }
      .content.shop-content .inner .shop-box .shop-list.on .shop-info {
        opacity: 1;
        transform: translateY(0); }
  .content.insta-content .inner .content-tit {
    text-shadow: none;
    color: #0B5932;
    text-align: center; }
    #inst_tag,#inst_tag:hover,#inst_tag:visited{
      color: #0B5932;}

  .content.insta-content .inner .insta-box {
    margin: 0 auto; }
  .content.insta-content .inner .policy_link {
    color: #0B5932;}
  .content.insta-content .inner .policy_link:hover {
    color: #0B5932;}
  .content.insta-content .inner .policy_link:visited {
    color: #0B5932;}

.footer {
  text-align: center;
  font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif; }

#modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden; }
  #modal.on {
    visibility: visible; }
  #modal .md-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); }
  #modal .md-content-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    opacity: 0; }
    #modal .md-content-inner .md-close-btn-box {
      margin: 0 auto; }
      #modal .md-content-inner .md-close-btn-box .md-close-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(40deg);
        display: block;
        background: #fff;
        height: 1px; }
      #modal .md-content-inner .md-close-btn-box .md-close-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%) rotate(-40deg);
        display: block;
        background: #fff;
        height: 1px; }
      #modal .md-content-inner .md-close-btn-box .md-close-text {
        text-align: center;
        font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
        color: #fff;
        line-height: 1; }
    #modal .md-content-inner .md-special {
      position: absolute;
      top: 0;
      text-align: center; }
      #modal .md-content-inner .md-special .en {
        display: block;
        font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
        line-height: 1; }
      #modal .md-content-inner .md-special .ja {
        display: block;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.2em; }
      #modal .md-content-inner .md-special.md-seasonal {
        background: #C9AE92; }
      #modal .md-content-inner .md-special.md-reccomend {
        background: #3C7942; }
    #modal .md-content-inner .md-premium {
      background: #3C7942; }
      #modal .md-content-inner .md-premium em {
        margin-right: 0.5em;
        display: inline-block;
        font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
        font-style: normal;
        font-weight: 700; }
    #modal .md-content-inner .md-menu-en {
      font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
      font-weight: 700;
      text-align: center; }
    #modal .md-content-inner .md-menu-ja {
      text-align: center; }
    #modal .md-content-inner .md-thumb {
      overflow: hidden; }
    #modal .md-content-inner .md-text-box {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      border-bottom: 1px solid #3C7942;
      letter-spacing: 0.05em; }
    #modal .md-content-inner .md-price {
      font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif; }
      #modal .md-content-inner .md-price span {
        margin-left: 0.5em;
        display: inline-block; }
    #modal .md-content-inner .md-base-box {
      margin: 0 auto;
      display: none; }
      #modal .md-content-inner .md-base-box .md-base-list {
        display: none; }
        #modal .md-content-inner .md-base-box .md-base-list.on {
          display: block; }
        #modal .md-content-inner .md-base-box .md-base-list .detail-box {
          display: flex;
          justify-content: center; }
          #modal .md-content-inner .md-base-box .md-base-list .detail-box li {
            font-family: "Lato", "Hiragino Kaku Gothic ProN", "YuGothic", "Yu Gothic", "ヒラギノ角ゴ ProN W3", "メイリオ", "Meiryo", "ＭＳ ゴシック", sans-serif;
            text-align: center; }
            #modal .md-content-inner .md-base-box .md-base-list .detail-box li p {
              line-height: 1; }
      #modal .md-content-inner .md-base-box.on {
        display: block; }
    #modal .md-content-inner.on {
      animation: mdOn 0.5s 0.3s 1 forwards; }

@media screen and (min-width: 768px) {
  @keyframes btn-anime-on {
    0% {
      left: -100%; }
    100% {
      left: 0; } }
  @keyframes btn-anime-off {
    0% {
      left: 0; }
    100% {
      left: 100%; } }
  @keyframes hbg_on1 {
    0% {
      top: 0; }
    50% {
      top: 11px; }
    100% {
      top: 11px;
      transform: rotate(40deg); } }
  @keyframes hbg_on3 {
    0% {
      top: 22px; }
    50% {
      top: 11px; }
    100% {
      top: 11px;
      transform: rotate(-40deg); } }
  @keyframes hbg_off1 {
    0% {
      top: 11px;
      transform: rotate(40deg); }
    50% {
      top: 11px;
      transform: rotate(0); }
    100% {
      top: 0;
      transform: rotate(0); } }
  @keyframes hbg_off3 {
    0% {
      top: 11px;
      transform: rotate(-40deg); }
    50% {
      top: 11px;
      transform: rotate(0); }
    100% {
      top: 22px;
      transform: rotate(0); } }
  .sp {
    display: none; }
  .inner {
    margin: 0 auto;
    width: 960px; }
  .header {
    top: 0;
    left: 0; }
    .header .logo {
      top: 34px;
      left: 26px;
      width: 38px;
      -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
      -moz-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
      -ms-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3));
      filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.3)); }
    .header .hbg {
      top: 30px;
      right: 28px;
      width: 28px;
      height: 23px;
      transition: opacity 0.3s ease-out;
      cursor: pointer; }
      .header .hbg li {
        width: 28px;
        box-shadow: 0px 3px 3px 0px rgba(10, 10, 10, 0.2), 0px 0px 0px 1px rgba(10, 10, 10, 0.2); }
        .header .hbg li:nth-child(1) {
          top: 0; }
        .header .hbg li:nth-child(2) {
          top: 11px; }
        .header .hbg li:nth-child(3) {
          top: 22px; }
      .header .hbg.on li {
        width: 35px;
        box-shadow: none; }
        .header .hbg.on li:nth-child(1) {
          animation: hbg_on1 0.3s 1 forwards; }
        .header .hbg.on li:nth-child(3) {
          animation: hbg_on3 0.3s 1 forwards; }
      .header .hbg.off li {
        width: 28px; }
        .header .hbg.off li:nth-child(1) {
          animation: hbg_off1 0.3s 1 forwards; }
        .header .hbg.off li:nth-child(3) {
          animation: hbg_off3 0.3s 1 forwards; }
      .header .hbg:hover {
        opacity: 0.5; }
    .header .nav {
      top: 0;
      right: -238px;
      width: 238px;
      transition: right 0.3s ease-out; }
      .header .nav .nav-inner {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%; }
        .header .nav .nav-inner .typo {
          margin: 0 auto;
          width: 63px; }
        .header .nav .nav-inner .nav-list-box {
          margin: 35px 0; }
          .header .nav .nav-inner .nav-list-box .nav-list a {
            font-size: 20px;
            line-height: 60px;
            transition: opacity 0.3s ease-out; }
            .header .nav .nav-inner .nav-list-box .nav-list a:hover {
              opacity: 0.5; }
        .header .nav .nav-inner .icon-insta {
          margin: 0 auto;
          width: 30px;
          transition: opacity 0.3s ease-out; }
          .header .nav .nav-inner .icon-insta:hover {
            opacity: 0.5; }
      .header .nav.on {
        right: 0; }
  .hero-content .logo-typo {
    width: 193px; }
  .hero-content .msg-box {
    bottom: 25px;
    width: 350px;
    height: 120px;
    border-radius: 10px;
    cursor: pointer; }
    .hero-content .msg-box:hover .msg-tit .msg-text {
      opacity: 0.5; }
    .hero-content .msg-box .msg-close {
      top: 10px;
      right: 10px;
      width: 28px;
      height: 24px;
      transition: opacity 0.3s ease-out;
      cursor: pointer; }
      .hero-content .msg-box .msg-close:hover {
        opacity: 0.5; }
    .hero-content .msg-box .msg-box-inner {
      margin-top: 8px;
      height: 480px; }
      .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-icon {
        top: -12px;
        left: -12px;
        width: 48px;
        height: 48px;
        border-radius: 24px; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-icon span {
          font-size: 12px;
          line-height: 15px; }
      .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-tit {
        font-size: 20px;
        line-height: 32px; }
      .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-tit .msg-text {
          transition: opacity 0.3s ease-out;
      }
      .msg-box:not(.on) .msg-text {
        margin: 0 12%;
      }
      .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-info-box {
        padding: 0 35px; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-info-box::before {
          margin: 15px auto 20px;
          content: '';
          display: block;
          width: 166px;
          height: 2px;
          background: #fff; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-info-box .msg-info {
          font-size: 14px;
          line-height: 22px; }
          .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-info-box .msg-info .pic {
            margin: 1em 50px; }
    .hero-content .msg-box.on {
      background: rgba(211, 180, 149, 0.9);
      padding-bottom: 8px;
      width: 440px;
      height: 488px;
      top: 50%;
      bottom: inherit;
      transform: translate(-50%, -50%); }
      .hero-content .msg-box.on:hover .msg-tit .msg-text {
        opacity: 1 !important; }
      .hero-content .msg-box.on .msg-close {
        display: block; }
      .hero-content .msg-box.on .msg-box-inner .msg-list-box li {
        display: block; }
        .hero-content .msg-box.on .msg-box-inner .msg-list-box li .msg-tit {
          padding: 0 40px;
          display: inline-block; }
          .hero-content .msg-box.on .msg-box-inner .msg-list-box li .msg-tit .msg-icon {
            top: 50%;
            left: -24px;
            transform: translateY(-50%); }
        .hero-content .msg-box.on .msg-box-inner .msg-list-box li.msg-list-0 .msg-info-box {
          display: block; }
  .hero-content .kv-box .kv li:nth-child(1) {
    background-image: url(../imgs/kv/kv_1_pc.jpg); }
  .hero-content .kv-box .kv li:nth-child(2) {
    background-image: url(../imgs/kv/kv_2_pc.jpg); }
  .hero-content .kv-box .kv li:nth-child(3) {
    background-image: url(../imgs/kv/kv_3_pc.jpg); }
  .hero-content .kv-box .kv li:nth-child(4) {
    background-image: url(../imgs/kv/kv_4_pc.jpg); }
  .hero-content .kv-box .kv li:nth-child(5) {
    background-image: url(../imgs/kv/kv_5_pc.jpg); }
  .hero-content .btn-prevnext {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 31px;
    z-index: 50;
    cursor: pointer;
    opacity: 0; }
    .hero-content .btn-prevnext.btn-prev {
      left: 20px;
      background: url(../imgs/hero/btn_arw_prev.svg) center center no-repeat;
      background-size: contain; }
    .hero-content .btn-prevnext.btn-next {
      right: 20px;
      background: url(../imgs/hero/btn_arw_next.svg) center center no-repeat;
      background-size: contain; }
  .hero-content.on .logo-typo {
    opacity: 1;
    transition: opacity 1s ease-out; }
  .hero-content.on::after {
    width: 0;
    transition: width 0.3s 1.1s ease-out; }
  .hero-content.on .kv-box {
    transform: scale(1);
    transition: transform 4s 1s ease-out; }
  .hero-content.on .msg-box {
    opacity: 1;
    transition: opacity 0.5s 2s ease-out; }
  .hero-content.on .btn-prevnext {
    opacity: 1;
    transition: opacity 0.5s 2s ease-out; }
    .hero-content.on .btn-prevnext:hover {
      opacity: 0.5;
      transition: opacity 0.3s ease-out; }
  .hero-content.on2 .btn-prevnext {
    transition: opacity 0.3s ease-out; }
    .hero-content.on2 .btn-prevnext:hover {
      opacity: 0.5; }
  .introduction-content .inner {
    padding: 105px 0 100px; }
    .introduction-content .inner .content-tit {
      margin: 0 0 60px 175px;
      font-size: 36px;
      line-height: 61px; }
    .introduction-content .inner .text-box {
      margin-left: 175px;
      width: 420px; }
      .introduction-content .inner .text-box .text {
        margin-bottom: 28px;
        font-size: 18px;
        line-height: 28px; }
    .introduction-content .inner .bg-box.bg-box-l {
      bottom: 15px;
      width: 296px; }
    .introduction-content .inner .bg-box.bg-box-r {
      top: 35px;
      right: 0;
      width: 389px; }
  .content .content-tit {
    font-size: 40px; }
  .content.menu-content {
    padding: 120px 0 0; }
    .content.menu-content .content-tit {
      text-align: center; }
    .content.menu-content .base-btn-box, .content.menu-content .menu-btn-box {
      width: 310px;
      border-radius: 25px; }
      .content.menu-content .base-btn-box li, .content.menu-content .menu-btn-box li {
        width: calc(50% - 15px);
        cursor: pointer;
        font-size: 18px;
        line-height: 50px;
        transition: opacity 0.3s ease-out; }
        .content.menu-content .base-btn-box li:hover, .content.menu-content .menu-btn-box li:hover {
          opacity: 0.5; }
      .content.menu-content .base-btn-box::before, .content.menu-content .menu-btn-box::before {
        width: 170px;
        height: 50px;
        border-radius: 25px;
        transition: left 0.3s ease-out; }
      .content.menu-content .base-btn-box.cup::before, .content.menu-content .base-btn-box.gelato::before, .content.menu-content .menu-btn-box.cup::before, .content.menu-content .menu-btn-box.gelato::before {
        left: 0; }
      .content.menu-content .base-btn-box.cone::before, .content.menu-content .base-btn-box.other::before, .content.menu-content .menu-btn-box.cone::before, .content.menu-content .menu-btn-box.other::before {
        left: calc(100% - 170px); }
    .content.menu-content .base-btn-box {
      margin: 50px auto 30px; }
    .content.menu-content .menu-btn-box {
      margin: 0 auto 60px; }
    .content.menu-content .base-box {
      margin-bottom: 190px; }
      .content.menu-content .base-box .base-list .detail-box li {
        margin: 0 8px;
        width: 149px; }
        .content.menu-content .base-box .base-list .detail-box li .size {
          margin-bottom: 7px;
          font-size: 20px; }
        .content.menu-content .base-box .base-list .detail-box li .price {
          font-size: 22px; }
      .content.menu-content .base-box .base-list .option-box {
        margin: 33px auto 0;
        padding-top: 12px;
        width: 465px;
        border-top: 2px solid #3C7942; }
        .content.menu-content .base-box .base-list .option-box .option {
          float: left;
          width: 50%;
          font-size: 20px;
          line-height: 36px; }
        .content.menu-content .base-box .base-list .option-box .option-price {
          margin-left: 50%;
          width: 50%;
          font-size: 23px;
          line-height: 36px; }
          .content.menu-content .base-box .base-list .option-box .option-price .option-note {
            font-size: 14px; }
          .content.menu-content .base-box .base-list .option-box .option-price .option-flavor-box {
            margin-left: calc(100% - 165px);
            width: 165px; }
            .content.menu-content .base-box .base-list .option-box .option-price .option-flavor-box .option-flavor-size {
              float: left;
              width: 75px;
              font-size: 20px;
              text-align: left; }
            .content.menu-content .base-box .base-list .option-box .option-price .option-flavor-box .option-flavor-price {
              margin-left: 90px; }
      .content.menu-content .base-box .base-list .note {
        width: 465px;
        font-size: 14px; }
    .content.menu-content .menu-box {
      margin: 0 auto 35px;
      width: 660px; }
      .content.menu-content .menu-box li {
        margin: 0 20px 40px;
        width: 180px;
        cursor: pointer; }
        .content.menu-content .menu-box li .thumb {
          border-radius: 90px;
          transition: transform 0.3s ease-out; }
        .content.menu-content .menu-box li .menu-name-en {
          margin: 18px 0 2px;
          font-size: 18px;
          line-height: 22px; }
        .content.menu-content .menu-box li .menu-name {
          font-size: 14px;
          line-height: 16px; }
        .content.menu-content .menu-box li:hover .thumb {
          transform: scale(1.15); }
        .content.menu-content .menu-box li.reccomend::after {
          width: 60px;
          font-size: 12px;
          line-height: 20px;
          border-radius: 10px; }
          .content.menu-content .menu-box .tmpTag {
            width: 60px;
            font-size: 12px;
            line-height: 20px;
            border-radius: 10px; }
        .content.menu-content .menu-box li.seasonal::after {
          width: 60px;
          font-size: 12px;
          line-height: 20px;
          border-radius: 10px; }
    .content.menu-content .btn-more {
      width: 150px;
      font-size: 18px;
      line-height: 30px;
      border-radius: 15px;
      cursor: pointer; }
      .content.menu-content .btn-more::before {
        animation: btn-anime-off 0.3s 1 forwards; }
      .content.menu-content .btn-more:hover::before {
        left: 0;
        animation: btn-anime-on 0.3s 1 forwards; }
      .content.menu-content .btn-more.btn-more-cafe:hover {
        color: #FEFFF2; }
    .content.menu-content .wrap-cafe {
      margin-top: 180px; }
      .content.menu-content .wrap-cafe .inner {
        padding: 256px 0 75px; }
        .content.menu-content .wrap-cafe .inner .ill-box {
          top: 0;
          left: 50%;
          transform: translateX(-329px);
          width: 255px;
          height: 364px; }
          .content.menu-content .wrap-cafe .inner .ill-box .ill {
            width: 100%; }
        .content.menu-content .wrap-cafe .inner .bg-cafe {
          top: 64px;
          right: 0;
          width: 393px; }
        .content.menu-content .wrap-cafe .inner .text {
          margin: 0 0 185px 390px;
          width: 253px;
          font-size: 14px;
          line-height: 20px; }
        .content.menu-content .wrap-cafe .inner .cafe-box {
          margin: 0 auto 30px;
          width: 760px; }
          .content.menu-content .wrap-cafe .inner .cafe-box li {
            margin: 0 20px 40px;
            width: 150px;
            cursor: pointer; }
            .content.menu-content .wrap-cafe .inner .cafe-box li .thumb {
              transition: transform 0.3s ease-out;
              border-radius: 75px; }
            .content.menu-content .wrap-cafe .inner .cafe-box li .menu-name-en {
              margin: 22px 0 0;
              font-size: 18px;
              line-height: 22px; }
            .content.menu-content .wrap-cafe .inner .cafe-box li:hover .thumb {
              transform: scale(1.15); }
            .content.menu-content .wrap-cafe .inner .cafe-box li.reccomend::after {
              width: 60px;
              font-size: 12px;
              line-height: 20px;
              border-radius: 10px; }
            .content.menu-content .wrap-cafe .inner .cafe-box li.seasonal::after {
              width: 60px;
              font-size: 12px;
              line-height: 20px;
              border-radius: 10px; }
  .content.story-content .inner {
    padding: 130px 0 60px; }
    .content.story-content .inner .content-tit {
      margin: 0 0 40px 190px; }
    .content.story-content .inner .bg-box.bg-box-1 {
      top: 75px;
      right: 0;
      width: 464px; }
    .content.story-content .inner .bg-box.bg-box-2 {
      top: 640px;
      width: 488px; }
    .content.story-content .inner .bg-box.bg-box-3 {
      top: 1014px;
      left: 50%;
      transform: translateX(-50%);
      width: 645px; }
    .content.story-content .inner .bg-box.bg-box-4 {
      top: 1400px;
      right: 0;
      width: 425px; }
    .content.story-content .inner .ill-box.ill-box-1 {
      top: 345px;
      left: 572px;
      width: 303px; }
    .content.story-content .inner .ill-box.ill-box-2 {
      top: 640px;
      left: 524px;
      width: 142px; }
    .content.story-content .inner .ill-box.ill-box-3 {
      top: 1410px;
      left: 312px;
      width: 234px; }
    .content.story-content .inner .ill-box.ill-box-4 {
      top: 1512px;
      left: 110px;
      width: 203px; }
    .content.story-content .inner .ill-box.ill-box-5 {
      top: 2038px;
      left: 50%;
      transform: translateX(-50%);
      width: 184px; }
    .content.story-content .inner .text-box {
      padding: 5px 0; }
      .content.story-content .inner .text-box.text-box-1 {
        margin: 0 0 354px 190px;
        width: 260px;
        background: url(../imgs/story/bg_text_1.jpg);
        background-size: 260px 273px; }
      .content.story-content .inner .text-box.text-box-2 {
        margin: 0 0 325px 442px;
        width: 347px;
        background: url(../imgs/story/bg_text_2.jpg);
        background-size: 383px 115px; }
      .content.story-content .inner .text-box.text-box-3 {
        margin: 0 0 353px 291px;
        width: 383px;
        background: url(../imgs/story/bg_text_2.jpg);
        background-size: 383px 115px; }
      .content.story-content .inner .text-box.text-box-4 {
        margin: 0 0 340px 158px;
        width: 256px;
        background: url(../imgs/story/bg_text_1.jpg);
        background-size: 260px 273px; }
      .content.story-content .inner .text-box .text {
        margin: 0 7px;
        font-size: 14px;
        line-height: 24px; }
        .content.story-content .inner .text-box .text.text-mgn {
          margin-bottom: 24px; }
        .content.story-content .inner .text-box .text sup {
          font-size: 10px;
          display: inline-block;
          transform: scale(0.9);
          transform-origin: left bottom; }
      .content.story-content .inner .text-box .note {
        position: absolute;
        bottom: -32px;
        color: #FEFFF2;
        font-size: 10px;
        line-height: 14px;
        transform: scale(0.9); }
    .content.story-content .inner .credit {
      font-size: 14px; }
  .content.shop-content .inner {
    padding: 45px 0 10px;
    width: auto; }
    .content.shop-content .inner .content-tit {
      margin: 0 auto 55px; }
      .content.shop-content .inner .content-tit span {
        margin-top: 10px;
        font-size: 20px; }
    .content.shop-content .inner .shop-box {
      min-width: 428px;
      width: 50%; }
      .content.shop-content .inner .shop-box .shop-list {
        margin-bottom: 60px; }
        .content.shop-content .inner .shop-box .shop-list .shop-info {
          margin: -37px auto 0;
          width: calc(100% - 100vw * 28/960);
          min-width: 400px; }
          .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner {
            padding: 15px 12px 7px; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop {
              margin-bottom: 20px; }
              .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop span.en {
                margin-bottom: 7px;
                font-size: 34px; }
              .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop span.ja {
                font-size: 14px; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .map {
              width: calc(100% - 207px);
              height: calc(100vw * 144/960 * 0.8);
              min-height: 144px; }
              .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .map iframe {
                width: 100%;
                height: 100%; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail {
              width: 183px; }
              .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail .add .text {
                font-size: 12px;
                line-height: 14px; }
                .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail .add .text.text-add {
                  margin-bottom: 14px; }
              .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail .delivery-box li {
                margin-right: 7px;
                width: 42px; }
                .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail .delivery-box li a {
                  transition: opacity 0.3s ease-out; }
                  .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail .delivery-box li a:hover {
                    opacity: 0.7; }
          .content.shop-content .inner .shop-box .shop-list .shop-info .service-box {
            margin: 9px 9px 0px; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .service-box li {
              margin: 0 5px;
              width: 42px;
              height: 42px;
              border-radius: 21px; }
              .content.shop-content .inner .shop-box .shop-list .shop-info .service-box li span {
                font-size: 10px;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%) scale(0.8); }
  .content.insta-content .inner {
    padding: 140px 0 55px; }
    .content.insta-content .inner .content-tit {
      margin-bottom: 45px;
      font-size: 30px; }
    .content.insta-content .inner .insta-box {
      width: 880px; }
  .footer {
    margin-bottom: 10px;
    font-size: 14px; }
  #modal {
    z-index: 300; }
    #modal .md-content-inner {
      padding-top: 40px;
      width: 320px; }
      #modal .md-content-inner .md-close-btn-box .md-close-btn {
        margin: 25px auto 7px;
        width: 36px;
        height: 28px;
        transition: opacity 0.3s ease-out;
        cursor: pointer; }
        #modal .md-content-inner .md-close-btn-box .md-close-btn::before {
          width: 36px; }
        #modal .md-content-inner .md-close-btn-box .md-close-btn::after {
          width: 36px; }
        #modal .md-content-inner .md-close-btn-box .md-close-btn:hover {
          opacity: 0.5; }
      #modal .md-content-inner .md-close-btn-box .md-close-text {
        font-size: 18px; }
      #modal .md-content-inner .md-special {
        padding-top: 6px;
        width: 100px;
        height: 34px;
        border-radius: 20px; }
        #modal .md-content-inner .md-special .en {
          margin-bottom: 5px;
          font-size: 10px; }
        #modal .md-content-inner .md-special .ja {
          font-size: 13px; }
      #modal .md-content-inner .md-thumb {
        margin: 0 auto 10px;
        width: 224px;
        height: 224px;
        border-radius: 112px; }
      #modal .md-content-inner .md-menu-en {
        font-size: 24px;
        line-height: 30px; }
      #modal .md-content-inner .md-menu-ja {
        font-size: 16px; }
      #modal .md-content-inner .md-text-box {
        margin: 20px auto 0;
        padding-bottom: 25px;
        min-height: 310px; }
      #modal .md-content-inner .md-menu-text {
        font-size: 14px;
        line-height: 20px;
        height: 120px; }
      #modal .md-content-inner .md-price {
        margin-top: 30px;
        font-size: 24px;
        line-height: 24px; }
        #modal .md-content-inner .md-price span {
          font-size: 16px; }
      #modal .md-content-inner .md-premium {
        margin-top: 12px;
        padding: 0 5px;
        font-size: 12px;
        line-height: 20px; }
        #modal .md-content-inner .md-premium em {
          font-size: 13px; }
      #modal .md-content-inner .md-base-box .md-base-list {
        left: -11px;
        width: 342px; }
        #modal .md-content-inner .md-base-box .md-base-list .detail-box li {
          margin: 0 12px;
          width: 90px; }
          #modal .md-content-inner .md-base-box .md-base-list .detail-box li .size {
            margin: 7px 0 5px;
            font-size: 14px; }
          #modal .md-content-inner .md-base-box .md-base-list .detail-box li .price {
            font-size: 16px; }
      #modal .md-content-inner .md-allergies {
        margin: 8px 0 2px;
        font-size: 13px;
        line-height: 15px; }
      #modal .md-content-inner .md-note {
        font-size: 12px;
        line-height: 14px; } }

@media screen and (min-width: 768px) and (max-width: 959px) {
  @keyframes hbg_on1_tb {
    0% {
      top: 0; }
    50% {
      top: 11px; }
    100% {
      top: 11px;
      transform: rotate(40deg); } }
  @keyframes hbg_on3_tb {
    0% {
      top: 22px; }
    50% {
      top: 11px; }
    100% {
      top: 11px;
      transform: rotate(-40deg); } }
  @keyframes hbg_off1_tb {
    0% {
      top: 11px;
      transform: rotate(40deg); }
    50% {
      top: 11px;
      transform: rotate(0); }
    100% {
      top: 0;
      transform: rotate(0); } }
  @keyframes hbg_off3_tb {
    0% {
      top: 11px;
      transform: rotate(-40deg); }
    50% {
      top: 11px;
      transform: rotate(0); }
    100% {
      top: 22px;
      transform: rotate(0); } }
  .inner {
    margin: 0 auto;
    width: 768px; }
  .header {
    top: inherit;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 70px;
    z-index: 400; }
    .header .icon-insta {
      display: block;
      position: absolute;
      margin-left: -188px;
      top: 50%;
      left: 50%;
      transform: translateY(-50%);
      width: 30px;
      z-index: 10; }
    .header .logo {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 38px;
      z-index: 10; }
    .header .hbg {
      position: absolute;
      margin-left: 162px;
      top: 50%;
      left: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 22px;
      z-index: 10; }
      .header .hbg li {
        width: 28px; }
        .header .hbg li:nth-child(1) {
          top: 0; }
        .header .hbg li:nth-child(2) {
          top: 11px; }
        .header .hbg li:nth-child(3) {
          top: 22px; }
      .header .hbg.on li {
        width: 35px; }
        .header .hbg.on li:nth-child(1) {
          animation: hbg_on1_tb 0.3s 1 forwards; }
        .header .hbg.on li:nth-child(3) {
          animation: hbg_on3_tb 0.3s 1 forwards; }
      .header .hbg.off li {
        width: 28px; }
        .header .hbg.off li:nth-child(1) {
          animation: hbg_off1_tb 0.3s 1 forwards; }
        .header .hbg.off li:nth-child(3) {
          animation: hbg_off3_tb 0.3s 1 forwards; }
    .header::after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 70px;
      background: #3C7942;
      z-index: 9; }
    .header .nav {
      top: inherit;
      bottom: -100vh;
      left: 0;
      width: 100vw;
      transition: bottom 0.3s ease-out;
      z-index: 8; }
      .header .nav .nav-inner {
        position: absolute;
        width: 100%;
        height: 100%; }
        .header .nav .nav-inner .typo {
          margin: 0 auto;
          padding-top: 70px;
          width: 110px; }
        .header .nav .nav-inner .nav-list-box {
          position: absolute;
          top: calc((100% - 70px)/2);
          transform: translateY(-50%);
          width: 100%; }
          .header .nav .nav-inner .nav-list-box .nav-list a {
            font-size: 24px;
            line-height: 80px; }
        .header .nav .nav-inner .icon-insta {
          display: none; }
      .header .nav.on {
        bottom: 0; }
  .hero-content .logo-typo {
    top: 42.9%;
    width: 190px; }
  .hero-content .msg-box {
    bottom: 90px; }
    .hero-content .msg-box.on {
      top: inherit;
      bottom: 90px;
      transform: translateX(-50%); }
  .hero-content .btn-prevnext {
    top: 43.1%;
    transform: none;
    width: 20px;
    height: 50px;
    z-index: 50; }
    .hero-content .btn-prevnext.btn-prev {
      background-position: left center; }
    .hero-content .btn-prevnext.btn-next {
      background-position: right center; }
  .introduction-content .inner .bg-box.bg-box-l {
    bottom: 36px;
    width: 278px; }
  .introduction-content .inner .bg-box.bg-box-r {
    width: 338px; }
  .content.menu-content {
    padding: 100px 0 0; }
    .content.menu-content .base-btn-box {
      margin: 50px auto 25px; }
    .content.menu-content .menu-btn-box {
      margin: 0 auto 40px; }
    .content.menu-content .base-box {
      margin-bottom: 80px; }
      .content.menu-content .base-box .base-list .detail-box li {
        margin: 0 4px;
        width: 108px; }
        .content.menu-content .base-box .base-list .detail-box li .size {
          margin-bottom: 3px;
          font-size: 14px; }
        .content.menu-content .base-box .base-list .detail-box li .price {
          font-size: 16px; }
      .content.menu-content .base-box .base-list .option-box {
        margin: 18px auto 0;
        padding-top: 8px;
        width: 320px; }
        .content.menu-content .base-box .base-list .option-box .option {
          font-size: 14px;
          line-height: 25px; }
        .content.menu-content .base-box .base-list .option-box .option-price {
          width: 50%;
          font-size: 16px;
          line-height: 25px; }
          .content.menu-content .base-box .base-list .option-box .option-price .option-note {
            font-size: 12px; }
          .content.menu-content .base-box .base-list .option-box .option-price .option-flavor-box {
            margin-left: calc(100% - 120px);
            width: 120px; }
            .content.menu-content .base-box .base-list .option-box .option-price .option-flavor-box .option-flavor-size {
              width: 50px;
              font-size: 14px; }
            .content.menu-content .base-box .base-list .option-box .option-price .option-flavor-box .option-flavor-price {
              margin-left: 70px; }
      .content.menu-content .base-box .base-list .note {
        width: 320px;
        font-size: 12px; }
    .content.menu-content .menu-box {
      margin: 0 auto 10px;
      width: 390px; }
      .content.menu-content .menu-box li {
        margin: 0 10px 30px;
        width: 110px; }
        .content.menu-content .menu-box li .thumb {
          border-radius: 55px; }
    .content.menu-content .wrap-cafe {
      margin-top: 85px; }
      .content.menu-content .wrap-cafe .inner {
        padding: 271px 0 50px; }
        .content.menu-content .wrap-cafe .inner .ill-box {
          transform: translateX(-265px); }
        .content.menu-content .wrap-cafe .inner .bg-cafe {
          top: 32px; }
        .content.menu-content .wrap-cafe .inner .text {
          margin: 0 0 98px 335px; }
        .content.menu-content .wrap-cafe .inner .cafe-box {
          margin: 0 auto 10px;
          width: 390px; }
          .content.menu-content .wrap-cafe .inner .cafe-box li {
            margin: 0 10px 30px;
            width: 110px; }
            .content.menu-content .wrap-cafe .inner .cafe-box li .thumb {
              border-radius: 55px; }
            .content.menu-content .wrap-cafe .inner .cafe-box li .menu-name-en {
              margin: 16px 0 0; }
  .content.story-content .inner {
    padding: 130px 0 55px; }
    .content.story-content .inner .content-tit {
      margin: 0 0 50px 135px;
      font-size: 30px; }
    .content.story-content .inner .bg-box.bg-box-1 {
      top: 30px;
      right: 0;
      width: 434px; }
    .content.story-content .inner .bg-box.bg-box-2 {
      top: 596px;
      width: 460px; }
    .content.story-content .inner .bg-box.bg-box-3 {
      top: 1014px;
      left: 50%;
      transform: translateX(-50%);
      width: 428px; }
    .content.story-content .inner .bg-box.bg-box-4 {
      top: 1343px;
      right: 0;
      width: 373px; }
    .content.story-content .inner .ill-box.ill-box-1 {
      top: 260px;
      left: 463px;
      width: 304px; }
    .content.story-content .inner .ill-box.ill-box-2 {
      top: 618px;
      left: 485px;
      width: 176px; }
    .content.story-content .inner .ill-box.ill-box-3 {
      top: 1313px;
      left: 200px;
      width: 170px; }
    .content.story-content .inner .ill-box.ill-box-4 {
      top: 1382px;
      left: 49px;
      width: 160px; }
    .content.story-content .inner .ill-box.ill-box-5 {
      top: 1938px;
      left: 50%;
      transform: translateX(-50%);
      width: 184px; }
    .content.story-content .inner .text-box.text-box-1 {
      margin: 0 0 383px 135px; }
    .content.story-content .inner .text-box.text-box-2 {
      margin: 0 0 218px 442px; }
    .content.story-content .inner .text-box.text-box-3 {
      margin: 0 0 287px 195px; }
    .content.story-content .inner .text-box.text-box-4 {
      margin: 0 0 370px 106px; }
    .content.story-content .inner .credit {
      font-size: 12px; }
  .content.insta-content .inner {
    padding: 55px 0; }
    .content.insta-content .inner .insta-box {
      width: 740px; }
  .footer {
    margin-bottom: 100px; }
  #modal .md-content-inner {
    top: calc((100% - 70px)/2); } }

@media screen and (min-width: 1280px) {
  html {
    font-size: calc(100vw / 1.280); }
  .content.story-content .inner {
    padding: 130px 0 0.26rem;
    width: 0.960rem; }
    .content.story-content .inner .content-tit {
      margin: 0 0 40px 0.19rem; }
    .content.story-content .inner .bg-box.bg-box-1 {
      top: 0.075rem;
      right: 0;
      width: 0.464rem; }
    .content.story-content .inner .bg-box.bg-box-2 {
      top: 0.640rem;
      width: 0.488rem; }
    .content.story-content .inner .bg-box.bg-box-3 {
      top: 1.014rem;
      width: 0.645rem; }
    .content.story-content .inner .bg-box.bg-box-4 {
      top: 1.400rem;
      width: 0.425rem; }
    .content.story-content .inner .ill-box.ill-box-1 {
      top: 0.345rem;
      left: 0.572rem;
      width: 0.303rem; }
    .content.story-content .inner .ill-box.ill-box-2 {
      top: 0.640rem;
      left: 0.524rem;
      width: 0.142rem; }
    .content.story-content .inner .ill-box.ill-box-3 {
      top: 1.410rem;
      left: 0.312rem;
      width: 0.234rem; }
    .content.story-content .inner .ill-box.ill-box-4 {
      top: 1.512rem;
      left: 0.110rem;
      width: 0.203rem; }
    .content.story-content .inner .ill-box.ill-box-5 {
      top: 2.038rem;
      left: 50%;
      transform: translateX(-50%);
      width: 0.184rem; }
    .content.story-content .inner .text-box {
      padding: 0.005rem 0;
      /*
				.text{
					margin: 0 0.007rem;
					font-size: 0.014rem;
					line-height: 0.024rem;
					&.text-mgn{
						margin-bottom: 0.024rem;
					}
					sup{
						font-size: 0.010rem;
					}
				}
				.note{
					bottom:-0.032rem;
					font-size: 0.010rem;
					line-height: 0.014rem;

				}
*/ }
      .content.story-content .inner .text-box.text-box-1 {
        margin: 0 0 0.354rem 0.19rem; }
      .content.story-content .inner .text-box.text-box-2 {
        margin: 0 0 0.325rem 0.442rem; }
      .content.story-content .inner .text-box.text-box-3 {
        margin: 0 0 0.353rem 0.291rem; }
      .content.story-content .inner .text-box.text-box-4 {
        margin: 0 0 0.34rem 0.158rem; }
    .content.story-content .inner .credit {
      position: absolute;
      width: 100%;
      text-align: center;
      bottom: 54px; } }

@media screen and (max-width: 767px) {
  @keyframes hbg_on1_sp {
    0% {
      top: 0; }
    50% {
      top: 0.022rem; }
    100% {
      top: 0.022rem;
      transform: rotate(40deg); } }
  @keyframes hbg_on3_sp {
    0% {
      top: 0.044rem; }
    50% {
      top: 0.022rem; }
    100% {
      top: 0.022rem;
      transform: rotate(-40deg); } }
  @keyframes hbg_off1_sp {
    0% {
      top: 0.022rem;
      transform: rotate(40deg); }
    50% {
      top: 0.022rem;
      transform: rotate(0); }
    100% {
      top: 0;
      transform: rotate(0); } }
  @keyframes hbg_off3_sp {
    0% {
      top: 0.022rem;
      transform: rotate(-40deg); }
    50% {
      top: 0.022rem;
      transform: rotate(0); }
    100% {
      top: 0.044rem;
      transform: rotate(0); } }
  .pc {
    display: none; }
  html {
    font-size: calc(100vw / 0.75); }
  .inner {
    margin: 0 auto;
    width: 0.750rem; }
  .header {
    bottom: 0;
    left: 0;
    width: 0.750rem;
    height: 0.140rem;
    z-index: 400; }
    .header .icon-insta {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0.050rem;
      width: 0.060rem;
      z-index: 10; }
    .header .logo {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 0.076rem;
      z-index: 10; }
    .header .hbg {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 0.050rem;
      height: 0.046rem;
      width: 0.056rem;
      z-index: 10; }
      .header .hbg li {
        width: 0.056rem; }
        .header .hbg li:nth-child(1) {
          top: 0; }
        .header .hbg li:nth-child(2) {
          top: 0.022rem; }
        .header .hbg li:nth-child(3) {
          top: 0.044rem; }
      .header .hbg.on li {
        width: 0.070rem; }
        .header .hbg.on li:nth-child(1) {
          animation: hbg_on1_sp 0.3s 1 forwards; }
        .header .hbg.on li:nth-child(3) {
          animation: hbg_on3_sp 0.3s 1 forwards; }
      .header .hbg.off li {
        width: 0.056rem; }
        .header .hbg.off li:nth-child(1) {
          animation: hbg_off1_sp 0.3s 1 forwards; }
        .header .hbg.off li:nth-child(3) {
          animation: hbg_off3_sp 0.3s 1 forwards; }
    .header::after {
      content: '';
      display: block;
      position: absolute;
      width: 100%;
      height: 0.140rem;
      background: #3C7942;
      z-index: 9; }
    .header .nav {
      bottom: -100vh;
      left: 0;
      width: 0.750rem;
      transition: bottom 0.3s ease-out;
      z-index: 8; }
      .header .nav .nav-inner {
        position: absolute;
        width: 100%;
        height: 100%; }
        .header .nav .nav-inner .typo {
          margin: 0 auto;
          padding-top: 0.060rem;
          width: 0.220rem; }
        .header .nav .nav-inner .nav-list-box {
          position: absolute;
          top: calc((100% - 0.140rem)/2);
          transform: translateY(-50%);
          width: 100%; }
          .header .nav .nav-inner .nav-list-box .nav-list a {
            font-size: 0.048rem;
            line-height: 0.120rem; }
      .header .nav.on {
        bottom: 0; }
  .hero-content .logo-typo {
    top: calc((100% - 0.140rem)/2);
    width: 0.386rem; }
  .hero-content .msg-box {
    bottom: 0.186rem;
    width: 0.640rem;
    height: 0.160rem;
    border-radius: 0.020rem; }
    .hero-content .msg-box .msg-icon {
      top: -0.048rem;
      left: -0.048rem;
      width: 0.096rem;
      height: 0.096rem;
      border-radius: 0.048rem; }
      .hero-content .msg-box .msg-icon span {
        font-size: 0.024rem;
        line-height: 0.030rem; }
    .hero-content .msg-box .msg-tit {
      margin-top: 0.016rem;
      font-size: 0.040rem;
      line-height: 0.064rem; }
  .msg-box:not(.on) .msg-text {
      margin: 0%;
  }
  .hero-content .msg-box {
    bottom: 0.186rem;
    width: 0.640rem;
    height: 0.240rem;
    border-radius: 0.020rem; }
    .hero-content .msg-box .msg-close {
      top: 10px;
      right: 10px;
      width: 28px;
      height: 24px;
      transition: opacity 0.3s ease-out;
      cursor: pointer; }
      .hero-content .msg-box .msg-close:hover {
        opacity: 0.5; }
    .hero-content .msg-box .msg-box-inner {
      margin-top: 0.016rem;
      height: calc(100% - 0.032rem); }
      .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-icon {
        top: -0.024rem;
        left: -0.024rem;
        width: 0.096rem;
        height: 0.096rem;
        border-radius: 0.048rem; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-icon span {
          font-size: 0.024rem;
          line-height: 0.030rem; }
      .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-tit {
        font-size: 0.040rem;
        line-height: 0.064rem; }
      .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-info-box {
        padding: 0 0.07rem; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-info-box::before {
          margin: 0.03rem auto 0.04rem;
          content: '';
          display: block;
          width: 0.340rem;
          height: 2px;
          background: #fff; }
        .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-info-box .msg-info {
          font-size: 0.028rem;
          line-height: 0.044rem; }
          .hero-content .msg-box .msg-box-inner .msg-list-box li .msg-info-box .msg-info .pic {
            margin: 1em 0; }
    .hero-content .msg-box.on {
      background: rgba(211, 180, 149, 0.9);
      padding-bottom: 0.016rem;
      width: 0.640rem;
      height: calc(100% - 0.274rem - 0.016rem);
      max-height: 1.060rem;
      top: calc((100% - 0.140rem)/2);
      bottom: inherit;
      transform: translate(-50%, -50%); }
      .hero-content .msg-box.on .msg-close {
        display: block; }
      .hero-content .msg-box.on .msg-box-inner .msg-list-box li {
        display: block; }
        .hero-content .msg-box.on .msg-box-inner .msg-list-box li .msg-tit {
          padding: 0 0.08rem;
          display: inline-block; }
          .hero-content .msg-box.on .msg-box-inner .msg-list-box li .msg-tit .msg-icon {
            top: 50%;
            left: -0.048rem;
            transform: translateY(-50%); }
        .hero-content .msg-box.on .msg-box-inner .msg-list-box li.msg-list-0 .msg-info-box {
          display: block; }
  .hero-content .kv-box .kv li:nth-child(1) {
    background-image: url(../imgs/kv/kv_1_sp.jpg); }
  .hero-content .kv-box .kv li:nth-child(2) {
    background-image: url(../imgs/kv/kv_2_sp.jpg); }
  .hero-content .kv-box .kv li:nth-child(3) {
    background-image: url(../imgs/kv/kv_3_sp.jpg); }
  .hero-content .kv-box .kv li:nth-child(4) {
    background-image: url(../imgs/kv/kv_4_sp.jpg); }
  .hero-content .kv-box .kv li:nth-child(5) {
    background-image: url(../imgs/kv/kv_5_sp.jpg); }
  .introduction-content .inner {
    padding: 0.251rem 0 0.5rem; }
    .introduction-content .inner .content-tit {
      margin: 0 0 0.093rem 0.046rem;
      font-size: 0.060rem;
      line-height: 0.102rem; }
    .introduction-content .inner .text-box {
      margin-left: 0.046rem;
      width: 0.652rem; }
      .introduction-content .inner .text-box .text {
        margin-bottom: 0.044rem;
        font-size: 0.032rem;
        line-height: 0.044rem; }
    .introduction-content .inner .bg-box.bg-box-l {
      bottom: 0.148rem;
      width: 0.456rem; }
    .introduction-content .inner .bg-box.bg-box-r {
      top: 0.134rem;
      right: 0;
      width: 0.394rem; }
  .content .content-tit {
    font-size: 0.080rem; }
  .content.menu-content {
    padding: 0.250rem 0 0; }
    .content.menu-content .content-tit {
      text-align: center; }
    .content.menu-content .base-btn-box, .content.menu-content .menu-btn-box {
      width: 0.620rem;
      border-radius: 0.050rem; }
      .content.menu-content .base-btn-box li, .content.menu-content .menu-btn-box li {
        width: calc(50% - 0.030rem);
        font-size: 0.036rem;
        line-height: 0.100rem; }
      .content.menu-content .base-btn-box::before, .content.menu-content .menu-btn-box::before {
        width: 0.340rem;
        height: 0.100rem;
        border-radius: 0.050rem;
        transition: left 0.3s ease-out; }
      .content.menu-content .base-btn-box.cup::before, .content.menu-content .base-btn-box.gelato::before, .content.menu-content .menu-btn-box.cup::before, .content.menu-content .menu-btn-box.gelato::before {
        left: 0; }
      .content.menu-content .base-btn-box.cone::before, .content.menu-content .base-btn-box.other::before, .content.menu-content .menu-btn-box.cone::before, .content.menu-content .menu-btn-box.other::before {
        left: calc(100% - 0.340rem); }
    .content.menu-content .base-btn-box {
      margin: 0.1rem auto 0.06rem; }
    .content.menu-content .menu-btn-box {
      margin: 0 auto 0.12rem; }
    .content.menu-content .base-box {
      margin-bottom: 0.182rem; }
      .content.menu-content .base-box .base-list .detail-box li {
        margin: 0 0.007rem;
        width: 0.216rem; }
        .content.menu-content .base-box .base-list .detail-box li .size {
          margin-bottom: 0.010rem;
          font-size: 0.028rem; }
        .content.menu-content .base-box .base-list .detail-box li .price {
          font-size: 0.032rem; }
      .content.menu-content .base-box .base-list .option-box {
        margin: 0.040rem auto 0;
        padding-top: 0.016rem;
        width: 0.640rem;
        border-top: 2px solid #3C7942; }
        .content.menu-content .base-box .base-list .option-box .option {
          float: left;
          width: 50%;
          font-size: 0.028rem;
          line-height: 0.048rem; }
        .content.menu-content .base-box .base-list .option-box .option-price {
          margin-left: 50%;
          width: 50%;
          font-size: 0.032rem;
          line-height: 0.048rem; }
        .content.menu-content .base-box .base-list .option-box .option-price .option-note {
          font-size: 0.024rem; }
        .content.menu-content .base-box .base-list .option-box .option-price .option-flavor-box {
          margin-left: calc(100% - 0.240rem);
          width: 0.240rem; }
          .content.menu-content .base-box .base-list .option-box .option-price .option-flavor-box .option-flavor-size {
            float: left;
            width: 0.120rem;
            font-size: 0.028rem;
            text-align: left; }
          .content.menu-content .base-box .base-list .option-box .option-price .option-flavor-box .option-flavor-price {
            margin-left: 0.120rem; }
      .content.menu-content .base-box .base-list .note {
        width: 0.640rem;
        font-size: 0.024rem; }
    .content.menu-content .menu-box {
      margin: 0 auto 0.074rem;
      width: 0.654rem; }
      .content.menu-content .menu-box li {
        margin: 0 0.017rem 0.034rem;
        width: 0.184rem; }
        .content.menu-content .menu-box li .thumb {
          border-radius: 0.092rem; }
        .content.menu-content .menu-box li .menu-name-en {
          margin: 0.03rem 0 0.01rem;
          font-size: 0.028rem; }
        .content.menu-content .menu-box li .menu-name {
          font-size: 0.020rem; }
        .content.menu-content .menu-box li.reccomend::after {
          width: 60px;
          font-size: 12px;
          line-height: 20px;
          border-radius: 10px; }
        .content.menu-content .menu-box .tmpTag {
            width: 60px;
            font-size: 12px;
            line-height: 20px;
            border-radius: 10px; }
        .content.menu-content .menu-box li.seasonal::after {
          width: 60px;
          font-size: 12px;
          line-height: 20px;
          border-radius: 10px; }
    .content.menu-content .btn-more {
      width: 0.300rem;
      font-size: 0.036rem;
      line-height: 0.060rem;
      border-radius: 0.030rem; }
    .content.menu-content .wrap-cafe {
      margin-top: 0.306rem; }
      .content.menu-content .wrap-cafe .inner {
        padding: 0.542rem 0 0.15rem; }
        .content.menu-content .wrap-cafe .inner .ill-box {
          top: 0;
          left: 0;
          width: 0.348rem;
          height: 0.684rem; }
          .content.menu-content .wrap-cafe .inner .ill-box .ill {
            width: 100%; }
        .content.menu-content .wrap-cafe .inner .bg-cafe {
          top: 0.130rem;
          right: 0;
          width: 0.344rem; }
        .content.menu-content .wrap-cafe .inner .text {
          margin: 0 0 0.046rem 0.324rem;
          width: 0.386rem;
          font-size: 0.028rem;
          line-height: 0.040rem; }
        .content.menu-content .wrap-cafe .inner .cafe-box {
          margin: 0 auto 0.046rem;
          width: 0.690rem; }
          .content.menu-content .wrap-cafe .inner .cafe-box li {
            margin: 0 0.018rem 0.074rem;
            width: 0.194rem; }
            .content.menu-content .wrap-cafe .inner .cafe-box li .thumb {
              transition: transform 0.3s ease-out;
              border-radius: 0.097rem; }
            .content.menu-content .wrap-cafe .inner .cafe-box li .menu-name-en {
              margin: 0.036rem 0 0;
              font-size: 0.030rem; }
            .content.menu-content .wrap-cafe .inner .cafe-box li.reccomend::after {
              width: 60px;
              font-size: 12px;
              line-height: 20px;
              border-radius: 10px; }
            .content.menu-content .wrap-cafe .inner .cafe-box li.seasonal::after {
              width: 60px;
              font-size: 12px;
              line-height: 20px;
              border-radius: 10px; }
  .content.story-content .inner {
    padding: 0.316rem 0 60px; }
    .content.story-content .inner .content-tit {
      margin: 0 0 0.1rem 0.046rem;
      font-size: 0.060rem; }
    .content.story-content .inner .bg-box.bg-box-1 {
      top: 0.202rem;
      right: 0;
      width: 0.426rem; }
    .content.story-content .inner .bg-box.bg-box-2 {
      top: 1.328rem;
      width: 0.650rem; }
    .content.story-content .inner .bg-box.bg-box-3 {
      top: 2.252rem;
      width: 0.750rem; }
    .content.story-content .inner .bg-box.bg-box-4 {
      top: 3.034rem;
      right: 0;
      width: 0.384rem; }
    .content.story-content .inner .ill-box.ill-box-1 {
      top: 0.546rem;
      left: 0.456rem;
      width: 0.339rem;
      z-index: 10; }
    .content.story-content .inner .ill-box.ill-box-2 {
      top: 1.154rem;
      right: 0;
      width: 0.274rem;
      z-index: 10; }
    .content.story-content .inner .ill-box.ill-box-3 {
      top: 2.946rem;
      left: 0.152rem;
      width: 0.224rem; }
    .content.story-content .inner .ill-box.ill-box-4 {
      top: 3.170rem;
      left: 0.028rem;
      width: 0.290rem; }
    .content.story-content .inner .ill-box.ill-box-5 {
      top: 4.108rem;
      left: 50%;
      transform: translateX(-50%);
      width: 0.230rem; }
    .content.story-content .inner .text-box {
      padding: 0.010rem 0; }
      .content.story-content .inner .text-box.text-box-1 {
        margin: 0 0 0.606rem 0;
        width: 0.520rem;
        background: url(../imgs/story/bg_text_1.jpg);
        background-size: 260px 273px; }
      .content.story-content .inner .text-box.text-box-2 {
        margin: 0 0 0.542rem 0.197rem;
        width: 0.554rem;
        background: url(../imgs/story/bg_text_2.jpg);
        background-size: 383px 115px; }
      .content.story-content .inner .text-box.text-box-3 {
        margin: 0 auto 0.574rem;
        width: 0.672rem;
        background: url(../imgs/story/bg_text_2.jpg);
        background-size: 383px 115px; }
      .content.story-content .inner .text-box.text-box-4 {
        margin: 0 0 0.52rem 0.039rem;
        width: 0.512rem;
        background: url(../imgs/story/bg_text_1.jpg);
        background-size: 260px 273px; }
      .content.story-content .inner .text-box .text {
        margin: 0 0.02rem;
        font-size: 0.028rem;
        line-height: 0.048rem; }
        .content.story-content .inner .text-box .text.text-mgn {
          margin-bottom: 0.048rem; }
        .content.story-content .inner .text-box .text sup {
          display: inline-block;
          font-size: 0.020rem;
          transform: scale(0.9);
          transform-origin: left bottom; }
      .content.story-content .inner .text-box .note {
        margin: 0.048rem 0 0.01rem 0.06rem;
        font-size: 0.020rem;
        line-height: 0.028rem;
        transform: scale(0.9);
        transform-origin: left bottom;
        color: #222222; }
    .content.story-content .inner .credit {
      font-size: 0.024rem; }
  .content.shop-content .inner {
    padding: 0.09rem 0 0.02rem; }
    .content.shop-content .inner .content-tit {
      margin: 0 auto 0.11rem; }
      .content.shop-content .inner .content-tit span {
        margin-top: 0.010rem;
        font-size: 0.040rem; }
    .content.shop-content .inner .shop-box .shop-list {
      margin-bottom: 0.226rem; }
      .content.shop-content .inner .shop-box .shop-list .shop-info {
        margin: -0.066rem auto 0;
        width: 0.702rem; }
        .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner {
          padding: 0.03rem 0.024rem 0.014rem; }
          .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop {
            margin-bottom: 20px; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop span.en {
              margin-bottom: 0.014rem;
              font-size: 0.066rem; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop span.ja {
              font-size: 0.028rem; }
          .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .map iframe {
            width: 0.314rem;
            height: 0.252rem; }
          .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail {
            width: 0.316rem; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail .add .text {
              font-size: 0.024rem;
              line-height: 0.028rem; }
              .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail .add .text.text-add {
                margin-bottom: 0.028rem; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .shop-info-inner .shop-detail-box .shop-detail .delivery-box li {
              margin-right: 0.014rem;
              width: 0.074rem; }
        .content.shop-content .inner .shop-box .shop-list .shop-info .service-box {
          margin: 0.014rem 0.016rem 0px; }
          .content.shop-content .inner .shop-box .shop-list .shop-info .service-box li {
            margin: 0 0.01rem;
            width: 0.084rem;
            height: 0.084rem;
            border-radius: 0.042rem; }
            .content.shop-content .inner .shop-box .shop-list .shop-info .service-box li span {
              font-size: 10px;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%) scale(0.8); }
  .content.insta-content .inner {
    padding: 0.11rem 0 0.1rem; }
    .content.insta-content .inner .content-tit {
      margin-bottom: 0.080rem;
      font-size: 0.060rem; }
    .content.insta-content .inner .insta-box {
      width: 0.700rem; }
  .footer {
    margin-bottom: 0.160rem;
    font-size: 0.028rem; }
  #modal {
    z-index: 300; }
    #modal .md-content-inner {
      padding-top: 0.034rem;
      width: 0.560rem;
      top: calc((100% - 0.140rem)/2);
      left: 50%;
      transform: translate(-50%, -50%); }
      #modal .md-content-inner .md-close-btn-box .md-close-btn {
        margin: 0.04rem auto 0.014rem;
        width: 0.060rem;
        height: 0.050rem; }
        #modal .md-content-inner .md-close-btn-box .md-close-btn::before {
          width: 100%; }
        #modal .md-content-inner .md-close-btn-box .md-close-btn::after {
          width: 100%; }
      #modal .md-content-inner .md-close-btn-box .md-close-text {
        font-size: 0.030rem; }
      #modal .md-content-inner .md-special {
        padding-top: 0.010rem;
        width: 0.176rem;
        height: 0.060rem;
        border-radius: 0.088rem; }
        #modal .md-content-inner .md-special .en {
          margin-bottom: 0.006rem;
          font-size: 0.020rem;
          transform: scale(0.8); }
        #modal .md-content-inner .md-special .ja {
          font-size: 0.022rem; }
      #modal .md-content-inner .md-thumb {
        margin: 0 auto 0.03rem;
        /*
			width: 0.340rem;
			height: 0.340rem;
			border-radius: 0.170rem;
			*/
        width: 0.320rem;
        height: 0.320rem;
        border-radius: 0.160rem; }
      #modal .md-content-inner .md-menu-en {
        font-size: 0.042rem;
        line-height: 0.050rem; }
      #modal .md-content-inner .md-menu-ja {
        margin-top: 0.004rem;
        font-size: 0.026rem; }
      #modal .md-content-inner .md-text-box {
        margin: 0.030rem auto 0;
        padding-bottom: 0.032rem;
        min-height: 0.320rem; }
      #modal .md-content-inner .md-menu-text {
        font-size: 0.026rem;
        line-height: 0.040rem;
        height: 0.240rem; }
      #modal .md-content-inner .md-price {
        margin: 0.024rem 0 0;
        font-size: 0.046rem;
        line-height: 0.046rem; }
        #modal .md-content-inner .md-price span {
          font-size: 0.034rem; }
      #modal .md-content-inner .md-premium {
        margin-top: 0.024rem;
        padding: 0.004rem 0.01rem;
        font-size: 0.026rem;
        line-height: 0.028rem; }
        #modal .md-content-inner .md-premium em {
          font-size: 0.026rem; }
      #modal .md-content-inner .md-base-box {
        display: none !important; }
      #modal .md-content-inner .md-allergies {
        margin: 0.016rem 0 0.008rem;
        font-size: 0.026rem;
        line-height: 0.030rem; }
      #modal .md-content-inner .md-note {
        font-size: 0.020rem;
        line-height: 0.024rem; } }