@charset "UTF-8";
.m-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  /* スクロール固定中はスクロールバーが消えてfixedの基準幅が広がるため、
     本文と同じだけ右に余白を入れて中央位置を保つ */
  padding-right: var(--scrollbar-width, 0px);
  background: #4f0003;
  transition: opacity 0.6s;
}
.m-loading.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s, visibility 0s 0.6s;
}
.m-loading .m-loading-inner {
  text-align: center;
}
.m-loading .m-loading-logo {
  margin-bottom: 15px;
}
.m-loading .m-loading-logo img {
  width: 220px;
}
.m-loading .m-loading-txt {
  margin-bottom: 4px;
}
.m-loading .m-loading-txt img {
  width: 70px;
}
.m-loading .m-loading-fork {
  margin-left: 40px;
}
.m-loading .m-loading-fork img {
  width: 140px;
  -webkit-animation: loading-fork 0.7s ease-in-out infinite;
  animation: loading-fork 0.7s ease-in-out infinite;
}

@-webkit-keyframes loading-fork {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-10px) rotate(5deg);
  }
}
@keyframes loading-fork {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-10px) rotate(5deg);
  }
}
#namachoko-sweets .sp {
  display: block;
}
@media (min-width: 768px) {
  #namachoko-sweets .sp {
    display: none;
  }
}
#namachoko-sweets img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
#namachoko-sweets .p-lead {
  padding: 32px 25px;
  background: url("../img/bg-lead-sp.png") no-repeat center top/cover;
  position: relative;
}
#namachoko-sweets .p-lead .p-lead-release {
  margin-bottom: 24px;
  color: #fff;
  /* StdNはmacOSのみ（W8単一ウェイト）。Windows・iOSは以降のフォントにフォールバックする */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic StdN", "ヒラギノ角ゴ StdN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", sans-serif;
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.01em;
  /* 「*」の字形自体が上寄りのため、上付きにせず少し下げて注記の＊と高さを揃える */
}
#namachoko-sweets .p-lead .p-lead-release sup {
  position: relative;
  top: 0em;
  font-size: 1em;
  vertical-align: baseline;
  margin: 0 3px;
}
#namachoko-sweets .p-lead .p-lead-release-txt {
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.5;
}
#namachoko-sweets .p-lead .p-lead-release-note {
  font-size: 10px;
  line-height: 1.5;
}
#namachoko-sweets .p-lead .p-lead-container {
  padding: 18px 20px 176px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
}
#namachoko-sweets .p-lead .p-lead-container::before {
  content: "";
  display: block;
  width: 228px;
  height: 245px;
  background: url("../img/lead-deco-sp.png") no-repeat center top/cover;
  position: absolute;
  left: 0;
  bottom: 4px;
  z-index: 0;
}
#namachoko-sweets .p-lead .p-lead-container h2 {
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
#namachoko-sweets .p-lead .p-lead-container figure {
  margin-bottom: 23px;
  position: relative;
  z-index: 1;
}
#namachoko-sweets .p-lead .p-lead-container .p-lead-text {
  position: relative;
  z-index: 1;
}
#namachoko-sweets .m-kuchidoke {
  padding: 18px 0 0;
  background: #fff;
  border-left: 25px solid #F29600;
  border-right: 25px solid #C34D96;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-container {
  text-align: center;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-heading {
  margin-bottom: 10px;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-heading img {
  width: 320px;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-item:not(:last-child) {
  margin-bottom: 20px;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-img {
  margin-bottom: 15px;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-img img {
  width: 188px;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-btn {
  display: block;
  margin-bottom: 14px;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-btn img {
  width: 93px;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-feature {
  display: block;
  margin: 0 auto -6px;
  cursor: pointer;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-feature:hover {
    opacity: 0.8;
  }
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-feature img {
  width: 225px;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-note img {
  width: 110px;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-howto {
  margin: 20px calc(50% - 50vw) 0;
}
#namachoko-sweets .m-kuchidoke .m-kuchidoke-howto img {
  width: 100%;
  max-width: 1230px;
}
#namachoko-sweets .m-kuchidoke-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  /* スクロールバーが消えた分を補い、背景コンテンツと中央位置を揃える */
  padding-right: var(--scrollbar-width, 0px);
  outline: none;
}
#namachoko-sweets .m-kuchidoke-modal.is-active {
  display: block;
}
#namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
#namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  max-width: 765px;
  max-height: 100%;
  margin: 0 auto;
  padding: 15px 15px 14px;
  border-radius: 12px;
  overflow-y: auto;
  text-align: center;
}
#namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-ttl {
  max-width: 220px;
  margin: 0 auto 12px;
}
#namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-body {
  padding: 15px 10px;
  background: #fff;
  border-radius: 16px;
}
#namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-body img {
  width: 100%;
}
#namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-close {
  display: block;
  margin: 14px auto 0;
  cursor: pointer;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  #namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-close:hover {
    opacity: 0.7;
  }
}
#namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-close img {
  width: 69px;
}
#namachoko-sweets .m-kuchidoke-modal-milk .m-kuchidoke-modal-inner {
  background: #f29600;
}
#namachoko-sweets .m-kuchidoke-modal-cacao .m-kuchidoke-modal-inner {
  background: #c34d96;
}
#namachoko-sweets .m-case {
  padding: 0 0 48px;
  background: url("../img/case-bg-sp.png") no-repeat center top/cover;
  position: relative;
}
#namachoko-sweets .m-case .m-case-ribbon {
  margin-bottom: 10px;
}
#namachoko-sweets .m-case .m-case-ribbon img {
  width: 100%;
}
#namachoko-sweets .m-case .m-case-container {
  text-align: center;
}
#namachoko-sweets .m-case .m-case-heading {
  margin-bottom: 10px;
}
#namachoko-sweets .m-case .m-case-heading img {
  width: 287px;
}
#namachoko-sweets .m-case .m-case-item:not(:last-child) {
  margin-bottom: 32px;
}
#namachoko-sweets .m-case .m-case-item img {
  width: 250px;
}
#namachoko-sweets .m-recipe {
  padding: 32px 20px 24px;
  background: url("../img/recipe-bg-sp.png") no-repeat center top/cover;
}
#namachoko-sweets .m-recipe .m-recipe-heading {
  margin-bottom: -28px;
  text-align: center;
  position: relative;
  z-index: 1;
}
#namachoko-sweets .m-recipe .m-recipe-heading img {
  width: 272px;
}
#namachoko-sweets .m-recipe .m-recipe-container {
  padding: 34px 14px 14px;
  background: #fff;
  border-radius: 16px;
  text-align: center;
}
#namachoko-sweets .m-recipe .m-recipe-txt {
  margin-bottom: 15px;
}
#namachoko-sweets .m-recipe .m-recipe-txt img {
  width: 195px;
}
#namachoko-sweets .m-recipe .m-recipe-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px 10px;
  max-width: 100%;
  margin: 0 auto;
}
#namachoko-sweets .m-recipe .m-recipe-item {
  width: calc((100% - 10px) / 2);
}
#namachoko-sweets .m-recipe .m-recipe-btn {
  display: block;
  cursor: pointer;
  overflow: hidden;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  #namachoko-sweets .m-recipe .m-recipe-btn:hover {
    opacity: 0.85;
  }
}
#namachoko-sweets .m-recipe .m-recipe-btn img {
  width: 100%;
  transition: transform 0.3s;
}
#namachoko-sweets .m-recipe-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  /* スクロールバーが消えた分を補い、背景コンテンツと中央位置を揃える */
  padding-right: var(--scrollbar-width, 0px);
  outline: none;
}
#namachoko-sweets .m-recipe-modal.is-active {
  display: block;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  max-width: 790px;
  max-height: 100%;
  margin: 0 auto;
  padding: 15px;
  background: #4f0003;
  overflow-y: auto;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-body {
  background: #fff;
  /* レシピ詳細が入るまでの仮の高さ。本文実装時に削除可 */
  min-height: 300px;
  color: #4F0002;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", sans-serif;
  text-align: left;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-ttl {
  margin-bottom: 16px;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-ttl img {
  width: 100%;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-photo {
  margin: 0 15px 14px;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-photo img {
  width: 100%;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-txt {
  padding: 0 15px 15px;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-block:not(:last-child) {
  margin-bottom: 16px;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-subttl {
  margin-bottom: 8px;
  padding-bottom: 4px;
  padding-left: 8px;
  border-bottom: 1px solid #2c0000;
  font-size: 13px;
  font-weight: 600;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-list {
  font-size: 12px;
  line-height: 1.3;
  padding-left: 8px;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-list li {
  padding-left: 1em;
  text-indent: -1em;
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-close {
  display: block;
  margin: 12px auto 0;
  cursor: pointer;
  transition: opacity 0.3s;
}
@media (hover: hover) {
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-close:hover {
    opacity: 0.7;
  }
}
#namachoko-sweets .m-recipe-modal .m-recipe-modal-close img {
  width: 65px;
}
#namachoko-sweets .banner {
  text-align: center;
  margin-top: 14px;
}
#namachoko-sweets .banner-lead,
#namachoko-sweets .banner-sub {
  color: #4f0003;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic StdN", "ヒラギノ角ゴ StdN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", sans-serif;
  font-weight: 600;
  line-height: 1.5;
}
#namachoko-sweets .banner-lead {
  font-size: 14px;
}
#namachoko-sweets .banner-sub {
  margin-bottom: 6px;
  font-size: 12px;
}

/* スクロールを止めるとスクロールバーが消えて内容が右にずれるため、
   消えた幅（JSで --scrollbar-width に格納）を padding で埋めて位置を保つ */
body.is-fixed {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

@media only screen and (min-width: 768px) {
  .m-loading .m-loading-logo img {
    width: 315px;
  }
  .m-loading .m-loading-fork img {
    width: 176px;
  }
  #namachoko-sweets {
    /* タブレット帯はPCデザインの等倍縮小に対してさらに85%縮小する */
    --fluid-vw: 0.85vw;
  }
  #namachoko-sweets .p-lead {
    padding: min(40px, calc(3.9063 * var(--fluid-vw, 1vw))) min(17px, calc(1.6602 * var(--fluid-vw, 1vw))) min(102px, calc(9.9609 * var(--fluid-vw, 1vw)));
    background-image: url("../img/bg-lead.png");
  }
  #namachoko-sweets .p-lead .p-lead-release {
    margin-bottom: min(40px, calc(3.9063 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .p-lead .p-lead-release-txt {
    margin-bottom: min(8px, calc(0.7813 * var(--fluid-vw, 1vw)));
    font-size: 18px;
  }
  #namachoko-sweets .p-lead .p-lead-release-note {
    font-size: 14px;
  }
  #namachoko-sweets .p-lead .p-lead-container {
    max-width: min(870px, calc(84.9609 * var(--fluid-vw, 1vw)));
    margin: 0 auto;
    padding: min(36px, calc(3.5156 * var(--fluid-vw, 1vw))) min(17px, calc(1.6602 * var(--fluid-vw, 1vw))) min(78px, calc(7.6172 * var(--fluid-vw, 1vw)));
    border-radius: min(27px, calc(2.6367 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .p-lead .p-lead-container::before {
    width: min(284px, calc(27.7344 * var(--fluid-vw, 1vw)));
    height: min(333px, calc(32.5195 * var(--fluid-vw, 1vw)));
    background-image: url("../img/lead-deco.png");
    bottom: min(60px, calc(5.8594 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .p-lead .p-lead-container h2 {
    margin-bottom: min(15px, calc(1.4648 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .p-lead .p-lead-container h2 img {
    width: min(661px, calc(64.5508 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .p-lead .p-lead-container figure {
    margin-bottom: min(100px, calc(9.7656 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .p-lead .p-lead-container figure img {
    width: min(628px, calc(61.3281 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .p-lead .p-lead-container .p-lead-text {
    max-width: min(496px, calc(48.4375 * var(--fluid-vw, 1vw)));
    margin-left: 36%;
  }
  #namachoko-sweets .m-kuchidoke {
    /* 左右パディングで「おすすめの食べ方」が色帯に寄りすぎないよう余白を確保する */
    padding: min(54px, calc(5.2734 * var(--fluid-vw, 1vw))) min(107px, calc(10.4492 * var(--fluid-vw, 1vw))) min(100px, calc(9.7656 * var(--fluid-vw, 1vw)));
    border-left-width: min(60px, calc(5.8594 * var(--fluid-vw, 1vw)));
    border-right-width: min(60px, calc(5.8594 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-container {
    max-width: min(1046px, calc(102.1484 * var(--fluid-vw, 1vw)));
    margin: 0 auto;
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-heading {
    margin-bottom: min(34px, calc(3.3203 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-heading img {
    width: min(870px, calc(84.9609 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-list {
    display: flex;
    justify-content: center;
    gap: min(42px, calc(4.1016 * var(--fluid-vw, 1vw)));
    max-width: min(795px, calc(77.6367 * var(--fluid-vw, 1vw)));
    margin: 0 auto;
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-item {
    flex: 1;
    max-width: min(382px, calc(37.3047 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-item:not(:last-child) {
    margin-bottom: 0;
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-img {
    margin-bottom: min(27px, calc(2.6367 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-img img {
    width: 86%;
    max-width: min(322px, calc(31.4453 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-btn {
    margin-bottom: min(27px, calc(2.6367 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-btn img {
    width: min(158px, calc(15.4297 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-feature {
    width: 100%;
    margin-bottom: min(7px, calc(0.6836 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-feature img {
    width: 100%;
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-note img {
    width: min(185px, calc(18.0664 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke .m-kuchidoke-howto {
    /* SPの全幅はみ出しを解除してコンテナ内に収める */
    margin: min(81px, calc(7.9102 * var(--fluid-vw, 1vw))) 0 0;
  }
  #namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-inner {
    max-width: min(680px, calc(66.4063 * var(--fluid-vw, 1vw)));
    padding: min(34px, calc(3.3203 * var(--fluid-vw, 1vw))) min(42px, calc(4.1016 * var(--fluid-vw, 1vw))) min(15px, calc(1.4648 * var(--fluid-vw, 1vw)));
    border-radius: min(17px, calc(1.6602 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-ttl {
    margin-bottom: min(17px, calc(1.6602 * var(--fluid-vw, 1vw)));
    max-width: min(352px, calc(34.375 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-body {
    padding: 0;
    border-radius: min(17px, calc(1.6602 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-body img {
    width: min(580px, calc(56.6406 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-close {
    margin-top: min(17px, calc(1.6602 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-kuchidoke-modal .m-kuchidoke-modal-close img {
    width: min(117px, calc(11.4258 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-case {
    padding: min(82px, calc(8.0078 * var(--fluid-vw, 1vw))) min(17px, calc(1.6602 * var(--fluid-vw, 1vw))) min(71px, calc(6.9336 * var(--fluid-vw, 1vw)));
    background-image: url("../img/case-bg.png");
  }
  #namachoko-sweets .m-case .m-case-ribbon {
    position: absolute;
    top: -5vw;
    left: 0;
    width: 100%;
    /* リボン本体は他要素と同じく fluid で頭打ちにし、
       画像が届かない右側は帯と同色（画像右端の色）で延長して全幅を保つ */
    background-image: linear-gradient(to bottom, transparent 29.7468%, #e6370c 29.7468%, #e6370c 43.038%, transparent 43.038%);
  }
  #namachoko-sweets .m-case .m-case-ribbon img {
    max-width: min(1632px, calc(159.375 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-case .m-case-heading {
    margin-bottom: min(11px, calc(1.0742 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-case .m-case-heading img {
    width: min(797px, calc(77.832 * var(--fluid-vw, 1vw)));
    transform: translateX(max(-14px, calc(-1.3672 * var(--fluid-vw, 1vw))));
  }
  #namachoko-sweets .m-case .m-case-list {
    display: flex;
    justify-content: center;
    gap: min(23px, calc(2.2461 * var(--fluid-vw, 1vw)));
    max-width: min(877px, calc(85.6445 * var(--fluid-vw, 1vw)));
    margin: 0 auto;
  }
  #namachoko-sweets .m-case .m-case-item {
    width: calc((100% - min(26px, calc(2.5391 * var(--fluid-vw, 1vw)))) / 2);
    max-width: min(425px, calc(41.5039 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-case .m-case-item:not(:last-child) {
    margin-bottom: 0;
  }
  #namachoko-sweets .m-case .m-case-item img {
    width: 100%;
  }
  #namachoko-sweets .m-recipe {
    padding: min(94px, calc(9.1797 * var(--fluid-vw, 1vw))) min(17px, calc(1.6602 * var(--fluid-vw, 1vw))) min(98px, calc(9.5703 * var(--fluid-vw, 1vw)));
    background: url("../img/recipe-bg.png") no-repeat center top/cover;
  }
  #namachoko-sweets .m-recipe .m-recipe-heading {
    margin-bottom: max(-39px, calc(-3.8086 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-recipe .m-recipe-heading img {
    width: min(807px, calc(78.8086 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-recipe .m-recipe-container {
    max-width: min(867px, calc(84.668 * var(--fluid-vw, 1vw)));
    margin: 0 auto;
    padding: min(60px, calc(5.8594 * var(--fluid-vw, 1vw))) min(47px, calc(4.5898 * var(--fluid-vw, 1vw))) min(47px, calc(4.5898 * var(--fluid-vw, 1vw)));
    border-radius: min(20px, calc(1.9531 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-recipe .m-recipe-txt {
    margin-bottom: min(17px, calc(1.6602 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-recipe .m-recipe-txt img {
    width: min(309px, calc(30.1758 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-recipe .m-recipe-list {
    max-width: none;
    gap: min(19px, calc(1.8555 * var(--fluid-vw, 1vw))) min(17px, calc(1.6602 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-recipe .m-recipe-item {
    width: calc((100% - min(17px, calc(1.6602 * var(--fluid-vw, 1vw)))) / 2);
  }
  #namachoko-sweets .m-recipe .m-recipe-item-sm {
    width: calc((100% - min(34px, calc(3.3203 * var(--fluid-vw, 1vw)))) / 3);
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-inner {
    max-width: min(700px, calc(68.3594 * var(--fluid-vw, 1vw)));
    padding: min(24px, calc(2.3438 * var(--fluid-vw, 1vw))) min(24px, calc(2.3438 * var(--fluid-vw, 1vw))) min(17px, calc(1.6602 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-detail {
    display: grid;
    grid-template-columns: 1fr 53%;
    grid-template-areas: "head photo" "txt photo";
    grid-template-rows: auto 1fr;
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-head {
    grid-area: head;
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-ttl {
    margin-bottom: min(12px, calc(1.1719 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-ttl img {
    width: min(333px, calc(32.5195 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-photo {
    grid-area: photo;
    margin: 0;
    min-height: 100%;
    padding: min(8px, calc(0.7813 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-photo picture {
    display: block;
    height: 100%;
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-photo img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-txt {
    grid-area: txt;
    padding: 0 min(12px, calc(1.1719 * var(--fluid-vw, 1vw))) min(26px, calc(2.5391 * var(--fluid-vw, 1vw))) min(20px, calc(1.9531 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-subttl {
    font-size: 12px;
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-list {
    font-size: 12px;
    line-height: 1.2142857143;
  }
  #namachoko-sweets .m-recipe-modal .m-recipe-modal-close {
    margin-top: min(13px, calc(1.2695 * var(--fluid-vw, 1vw)));
  }
  #namachoko-sweets .banner {
    max-width: min(580px, calc(56.6406 * var(--fluid-vw, 1vw)));
    margin: min(17px, calc(1.6602 * var(--fluid-vw, 1vw))) auto 0;
  }
  #namachoko-sweets .banner-lead {
    font-size: 20px;
  }
  #namachoko-sweets .banner-sub {
    margin-bottom: min(8px, calc(0.7813 * var(--fluid-vw, 1vw)));
    font-size: 18px;
  }
}
@media only screen and (min-width: 1025px) {
  #namachoko-sweets {
    /* 1024pxでの0.85倍から1440pxの等倍まで連続的に拡大する。
       1440pxを超えた分は fluid() の min() 側（固定px）で頭打ちになる */
    --fluid-vw: calc(4.9231px + 0.36923vw);
  }
}
/*# sourceMappingURL=common.css.map */