/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[3]!../assets/scss/styles.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
       appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

:root {
  --font-zen: "Zen Kaku Gothic New", sans-serif;
  --font-quattrocento: "Quattrocento", serif;
  --color-base: #141414;
  --color-sub: #a69f9f;
  --color-accent: #d1b066;
}

html {
  font-size: 6.25%;
  scroll-behavior: smooth;
}
@media (max-width: 750px) {
  html {
    font-size: calc(100vw / 750);
  }
}
@media (min-width: 751px) and (max-width: 1920px) {
  html {
    font-size: calc(100vw / 1920);
  }
}
@media (min-width: 1921px) {
  html {
    font-size: 6.25%;
  }
}

body {
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-zen);
  color: var(--color-base);
  max-width: 100vw;
}
body[data-active=true], body.is-expanded {
  overflow: hidden;
}

main {
  overflow-x: hidden;
}

img,
image {
  width: 100%;
  height: auto;
}

.pc {
  display: block;
}
@media screen and (max-width: 750px) {
  .pc {
    display: none;
  }
}

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

.js-fade-target {
  opacity: 0;
  visibility: hidden;
}
.js-fade-target.is-show {
  opacity: 1;
  visibility: visible;
}

hgroup {
  position: relative;
  z-index: 2;
}
hgroup h2 {
  position: relative;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  color: var(--color-accent);
  font-family: var(--font-quattrocento);
  font-size: 28rem;
  line-height: 2;
  letter-spacing: 0.12em;
}
@media screen and (max-width: 750px) {
  hgroup h2 {
    font-size: 26rem;
    letter-spacing: 0.1em;
  }
}
hgroup h2:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 108rem;
  height: 8rem;
  background: url(../images/common/line02.svg) no-repeat center/contain;
}
hgroup .lead {
  margin-top: 62rem;
  font-size: 43rem;
  font-weight: 700;
  line-height: 1.44;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 750px) {
  hgroup .lead {
    margin-top: 50rem;
    font-size: 41rem;
    line-height: 1.5;
  }
}

.description {
  font-size: 19rem;
  line-height: 2.571;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 750px) {
  .description {
    font-size: 23rem;
    line-height: 1.869;
  }
}

section:not(.about):not(.gift) hgroup h2 {
  margin: 0 auto;
}
section:not(.about):not(.gift) hgroup .lead {
  text-align: center;
}

.decorations img,
.decorations image {
  position: absolute;
}

.bg {
  height: 1051rem;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  .bg {
    height: 701rem;
  }
}

.common-buy-button a {
  display: block;
  width: 357rem;
  transition: opacity 0.2s ease;
}
.common-buy-button a:focus {
  opacity: 0.75;
}
@media (hover: hover) and (pointer: fine) {
  .common-buy-button a:hover {
    opacity: 0.75;
  }
}
@media screen and (max-width: 750px) {
  .common-buy-button a {
    width: 440rem;
  }
}

.instagram-button {
  width: 357rem;
}
@media screen and (max-width: 750px) {
  .instagram-button {
    width: 440rem;
  }
}
.instagram-button a {
  display: grid;
  place-items: center;
  border: 1px solid #d7d5d5;
  border-radius: 50rem;
  background: url(../images/common/instagram.svg) no-repeat center left 50rem/38rem;
  color: #5f5755;
  font-family: var(--font-quattrocento);
  font-size: 23rem;
  line-height: 82rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 750px) {
  .instagram-button a {
    background-size: 47rem;
    background-position: center left 65rem;
    font-size: 28rem;
    line-height: 100rem;
  }
}

.label {
  color: #fff;
}
.label.category01 {
  background-color: #e7435f;
}
.label.category02 {
  background-color: #42adc1;
}
.label.category03 {
  background-color: #029d73;
}
.label.category04 {
  background-color: #f95892;
}
.label.category05 {
  background-color: #37467a;
}
.label.category06 {
  background-color: #ffb700;
}
.label.category07 {
  background-color: #e7435f;
}
.label.category08 {
  background-color: #9173be;
}

#top {
  background-color: #f3ede9;
  /*================= ▼ MV =================*/
  /*================= ▼ ABOUT =================*/
  /*================= ▼ PACKAGE =================*/
  /*================= ▼ recipes =================*/
  /*================= ▼ KODAWARI =================*/
  /*================= ▼ GIFT =================*/
  /*================= ▼ PRODUCTS =================*/
  /*================= ▼ INSTAGRAM =================*/
  /*================= ▼ MODAL =================*/
}
#top .buy-button {
  position: fixed;
  bottom: 50rem;
  right: 105rem;
  z-index: 4;
  width: 198rem;
  border-radius: 50%;
  background-color: #fff;
}
@media screen and (max-width: 750px) {
  #top .buy-button {
    bottom: 70rem;
    right: 16rem;
    width: 200rem;
  }
}
#top .buy-button a {
  transition: opacity 0.2s ease;
}
#top .buy-button a:focus {
  opacity: 0.75;
}
@media (hover: hover) and (pointer: fine) {
  #top .buy-button a:hover {
    opacity: 0.75;
  }
}
#top .mv {
  position: relative;
}
#top .mv::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: 1514rem;
  height: 1214rem;
  background: url(../images/top/mv/bg.svg) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .mv::before {
    width: 100%;
    height: 1290rem;
    background-image: url(../images/top/mv/bg-sp.svg);
  }
}
#top .mv .inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1104rem;
}
@media screen and (max-width: 750px) {
  #top .mv .inner {
    height: 1200rem;
  }
}
#top .mv .inner > p {
  width: calc((100% - 1780rem) / 2);
  display: flex;
  align-items: center;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  writing-mode: vertical-rl;
  color: var(--color-sub);
  font-family: var(--font-quattrocento);
  font-size: 16rem;
  letter-spacing: 0.3em;
}
@media screen and (max-width: 750px) {
  #top .mv .inner > p {
    font-size: 20rem;
    width: calc((100% - 636rem) / 2);
  }
}
#top .mv .images {
  position: relative;
  width: 1780rem;
  height: 1000rem;
}
@media screen and (max-width: 750px) {
  #top .mv .images {
    width: 636rem;
    height: 1092rem;
  }
}
#top .mv .images p {
  position: absolute;
  z-index: 2;
  top: 120rem;
  left: 50%;
  transform: translateX(-50%);
  width: 468rem;
}
#top .mv .images picture img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  border-radius: 0 60rem 0 60rem;
}
#top .mv .images picture img.main-image02 {
  -webkit-animation: fade1 2s linear infinite;
          animation: fade1 2s linear infinite;
}
@-webkit-keyframes fade1 {
  0% {
    opacity: 0;
  }
  24% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  36% {
    opacity: 1;
  }
  37% {
    opacity: 0;
  }
  64% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  79% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade1 {
  0% {
    opacity: 0;
  }
  24% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  36% {
    opacity: 1;
  }
  37% {
    opacity: 0;
  }
  64% {
    opacity: 0;
  }
  65% {
    opacity: 1;
  }
  79% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
#top .mv .scroll {
  position: relative;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin: 22rem auto 0;
}
#top .mv .scroll::before {
  content: "";
  position: absolute;
  top: -54rem;
  left: -9rem;
  transform: rotate(90deg);
  width: 104rem;
  height: 3rem;
  background: url(../images/common/line-dots.svg) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .mv .scroll::before {
    width: 106rem;
    height: 4rem;
  }
}
#top .mv .scroll span {
  color: var(--color-sub);
  font-family: var(--font-quattrocento);
  font-size: 16rem;
  letter-spacing: 0.3em;
}
#top .about {
  position: relative;
  margin-top: 44em;
}
@media screen and (max-width: 750px) {
  #top .about {
    margin-top: 103rem;
  }
}
#top .about .inner {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  width: 1442rem;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  #top .about .inner {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
}
#top .about hgroup {
  position: relative;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-top: 76rem;
}
#top .about hgroup::before {
  content: "";
  position: absolute;
  bottom: 60rem;
  right: -20rem;
  width: 370rem;
  height: 370rem;
  background: url(../images/top/about/decoration.gif) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .about hgroup::before {
    bottom: -360rem;
  }
}
#top .about hgroup .lead {
  margin: 62rem auto 0;
  writing-mode: vertical-rl;
  line-height: 2;
}
@media screen and (max-width: 750px) {
  #top .about hgroup .lead {
    line-height: 2.4;
  }
}
#top .about .body {
  width: 1140rem;
}
@media screen and (max-width: 750px) {
  #top .about .body {
    width: 100%;
    margin-top: 345rem;
    padding: 0 53rem;
  }
}
#top .about .body .description {
  padding: 57rem 108rem 87rem;
}
@media screen and (max-width: 750px) {
  #top .about .body .description {
    padding: 65rem 0 148rem;
  }
}
#top .package {
  position: relative;
}
#top .package::before {
  content: "";
  position: absolute;
  top: -134rem;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 215rem;
  background: url(../images/common/line-round.svg) no-repeat center bottom/contain;
}
@media screen and (max-width: 750px) {
  #top .package::before {
    top: -109rem;
    height: 110rem;
    background-image: url(../images/common/line-round-sp.svg);
  }
}
#top .package::after {
  content: "";
  position: absolute;
  top: 1061rem;
  left: 0;
  z-index: 1;
  width: 1215rem;
  height: 1670rem;
  background: url(../images/top/package/bg.svg) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .package::after {
    top: 1350rem;
    width: 622rem;
    height: 1071rem;
    background-image: url(../images/top/package/bg-sp.svg);
  }
}
#top .package hgroup {
  margin-top: -80rem;
}
@media screen and (max-width: 750px) {
  #top .package hgroup {
    margin-top: 0;
    padding-top: 40rem;
  }
}
#top .package .description {
  margin-top: 63rem;
  text-align: center;
}
@media screen and (max-width: 750px) {
  #top .package .description {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    margin: 42rem auto 0;
    text-align: initial;
  }
}
#top .package .items.list01 {
  position: relative;
  height: 1130rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list01 {
    height: 1220rem;
    margin-top: 30rem;
  }
}
#top .package .items.list01 li {
  position: absolute;
  z-index: 2;
}
#top .package .items.list01 li:nth-of-type(1) {
  top: -50rem;
  left: 153rem;
  width: 486rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list01 li:nth-of-type(1) {
    top: 0;
    left: 30rem;
    width: 360rem;
  }
}
#top .package .items.list01 li:nth-of-type(2) {
  top: 88rem;
  left: 750rem;
  width: 501rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list01 li:nth-of-type(2) {
    top: 102rem;
    left: initial;
    right: 35rem;
    width: 307rem;
  }
}
#top .package .items.list01 li:nth-of-type(3) {
  top: -45rem;
  right: 147rem;
  width: 471rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list01 li:nth-of-type(3) {
    top: 372rem;
    left: 16rem;
    width: 347rem;
  }
}
#top .package .items.list01 li:nth-of-type(4) {
  top: 507rem;
  left: 216rem;
  width: 456rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list01 li:nth-of-type(4) {
    top: 502rem;
    left: initial;
    right: 20rem;
    width: 332rem;
  }
}
#top .package .items.list01 li:nth-of-type(5) {
  top: 580rem;
  left: 796rem;
  width: 418rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list01 li:nth-of-type(5) {
    top: initial;
    bottom: 96rem;
    left: 49rem;
    width: 300rem;
  }
}
#top .package .items.list01 li:nth-of-type(6) {
  top: 533rem;
  right: 169rem;
  width: 437rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list01 li:nth-of-type(6) {
    top: initial;
    bottom: 0;
    left: initial;
    right: 40rem;
    width: 318rem;
  }
}
#top .package .items.list02 {
  position: relative;
  height: 1646rem;
  z-index: 2;
}
@media screen and (max-width: 750px) {
  #top .package .items.list02 {
    height: 1613rem;
    margin-top: 60rem;
  }
}
#top .package .items.list02 li {
  position: absolute;
  z-index: 2;
  overflow: hidden;
}
#top .package .items.list02 li:nth-of-type(1) {
  top: 0;
  left: 0;
}
@media screen and (max-width: 750px) {
  #top .package .items.list02 li:nth-of-type(1) {
    left: 10rem;
  }
}
#top .package .items.list02 li:nth-of-type(1) svg {
  width: 953rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list02 li:nth-of-type(1) svg {
    width: 513rem;
  }
}
#top .package .items.list02 li:nth-of-type(1) svg path {
  transform: scale(2, 1.45);
  transform-origin: 0 21%;
}
#top .package .items.list02 li:nth-of-type(2) {
  top: 90rem;
  right: -20rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list02 li:nth-of-type(2) {
    top: 360rem;
    right: -26rem;
  }
}
#top .package .items.list02 li:nth-of-type(2) svg {
  width: 986rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list02 li:nth-of-type(2) svg {
    width: 684rem;
  }
}
#top .package .items.list02 li:nth-of-type(2) svg path {
  transform: scale(2, 1.7);
  transform-origin: 3% 17%;
}
#top .package .items.list02 li:nth-of-type(3) {
  top: 780rem;
  left: 294rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list02 li:nth-of-type(3) {
    top: initial;
    bottom: 320rem;
    left: -30rem;
  }
}
#top .package .items.list02 li:nth-of-type(3) svg {
  width: 800rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list02 li:nth-of-type(3) svg {
    width: 665rem;
  }
}
#top .package .items.list02 li:nth-of-type(3) svg path {
  transform: scale(1.6, 1.2);
  transform-origin: 7% 41%;
}
#top .package .items.list02 li:nth-of-type(4) {
  top: 1020rem;
  right: 194rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list02 li:nth-of-type(4) {
    top: initial;
    bottom: -167rem;
    right: 35rem;
  }
}
#top .package .items.list02 li:nth-of-type(4) svg {
  width: 701rem;
}
@media screen and (max-width: 750px) {
  #top .package .items.list02 li:nth-of-type(4) svg {
    width: 420rem;
  }
}
#top .package .items.list02 li:nth-of-type(4) svg path {
  transform: scale(1.5, 2.1);
  transform-origin: 5% 10%;
}
#top .recipes {
  position: relative;
  padding: 240rem 0 200rem;
}
@media screen and (max-width: 750px) {
  #top .recipes {
    padding: 160rem 0 142rem;
  }
}
#top .recipes::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 2159rem;
  background: url(../images/top/recipes/bg.svg) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .recipes::before {
    height: 2788rem;
    background-image: url(../images/top/recipes/bg-sp.svg);
  }
}
#top .recipes ul {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 115rem 27rem;
  margin-top: 95rem;
}
@media screen and (max-width: 750px) {
  #top .recipes ul {
    align-items: flex-start;
    gap: 58rem 20rem;
    margin-top: 66rem;
  }
}
#top .recipes ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 412rem;
  transition: opacity 0.2s ease;
  cursor: pointer;
}
#top .recipes ul li:focus {
  opacity: 0.75;
}
@media (hover: hover) and (pointer: fine) {
  #top .recipes ul li:hover {
    opacity: 0.75;
  }
}
@media screen and (max-width: 750px) {
  #top .recipes ul li {
    width: 300rem;
  }
}
#top .recipes ul li img {
  border-radius: 0 50rem 0 50rem;
}
#top .recipes ul li .label {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  min-width: 211rem;
  margin-top: 37rem;
  border-radius: 17rem;
  padding: 0 20rem;
  text-align: center;
  font-size: 19rem;
  line-height: 47rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 750px) {
  #top .recipes ul li .label {
    min-width: 260rem;
    margin-top: 30rem;
    border-radius: 27rem;
    padding: 0 28rem;
    font-size: 24rem;
    line-height: 54rem;
  }
}
#top .recipes ul li p {
  margin-top: 16rem;
  font-size: 25rem;
  font-weight: 700;
  line-height: 1.56;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 750px) {
  #top .recipes ul li p {
    margin-top: 24rem;
    white-space: nowrap;
    font-size: 26rem;
    line-height: 1.154;
    letter-spacing: 0.03em;
  }
}
#top .recipes ul li .link-text {
  position: relative;
  color: var(--color-sub);
  margin-top: 43rem;
  font-size: 19rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 750px) {
  #top .recipes ul li .link-text {
    margin-top: 26rem;
    font-size: 22rem;
    line-height: 1.7;
  }
}
#top .recipes ul li .link-text::before {
  content: "";
  position: absolute;
  bottom: -10rem;
  left: -20rem;
  width: 181rem;
  height: 20rem;
  background: url(../images/top/recipes/link-arrow.svg) no-repeat center bottom/contain;
}
@media screen and (max-width: 750px) {
  #top .recipes ul li .link-text::before {
    left: -15rem;
    width: 213rem;
    height: 24rem;
  }
}
#top .kodawari {
  padding-top: 60rem;
}
@media screen and (max-width: 750px) {
  #top .kodawari {
    padding-top: 95rem;
  }
}
#top .kodawari ul {
  display: flex;
  justify-content: center;
  gap: 78rem;
  margin: 95rem 0 158rem;
}
@media screen and (max-width: 750px) {
  #top .kodawari ul {
    flex-direction: column;
    align-items: center;
    gap: 90rem;
    margin: 63rem 0 115rem;
  }
}
#top .kodawari ul li {
  position: relative;
  width: 507rem;
}
@media screen and (max-width: 750px) {
  #top .kodawari ul li {
    width: 552rem;
  }
}
#top .kodawari ul li::before {
  content: "";
  position: absolute;
}
#top .kodawari ul li .lead {
  position: absolute;
  top: 1rem;
  right: 20rem;
  writing-mode: vertical-rl;
  font-size: 32rem;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.2em;
}
#top .kodawari ul li .description {
  padding: 44rem 59rem 0;
}
@media screen and (max-width: 750px) {
  #top .kodawari ul li .description {
    padding: 26rem 0 0;
  }
}
#top .kodawari ul li:nth-of-type(1)::before {
  top: 163rem;
  left: 10rem;
  width: 480rem;
  aspect-ratio: 900/630;
  background: url(../images/top/kodawari/oishisa01-image.gif) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .kodawari ul li:nth-of-type(1)::before {
    width: 520rem;
  }
}
#top .kodawari ul li:nth-of-type(1) .lead {
  color: #e36162;
}
#top .kodawari ul li:nth-of-type(2)::before {
  top: 136rem;
  left: 38rem;
  width: 350rem;
  aspect-ratio: 1/1;
  background: url(../images/top/kodawari/oishisa02-image.gif) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .kodawari ul li:nth-of-type(2)::before {
    width: 390rem;
  }
}
#top .kodawari ul li:nth-of-type(2) .lead {
  color: #5bb19c;
}
#top .kodawari ul li:nth-of-type(3)::before {
  top: 150rem;
  left: 40rem;
  width: 320rem;
  aspect-ratio: 1/1;
  background: url(../images/top/kodawari/oishisa03-image.gif) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .kodawari ul li:nth-of-type(3)::before {
    left: 60rem;
    width: 350rem;
  }
}
#top .kodawari ul li:nth-of-type(3) .lead {
  color: #e2ad1f;
}
#top .gift {
  position: relative;
}
#top .gift::before {
  content: "";
  position: absolute;
  top: -214rem;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 215rem;
  background: url(../images/common/line-round.svg) no-repeat center bottom/contain;
}
@media screen and (max-width: 750px) {
  #top .gift::before {
    top: -109rem;
    height: 110rem;
    background-image: url(../images/common/line-round-sp.svg);
  }
}
#top .gift .inner {
  width: 1290rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  #top .gift .inner {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
}
#top .gift hgroup {
  margin-top: -40rem;
}
@media screen and (max-width: 750px) {
  #top .gift hgroup {
    margin-top: 36rem;
    text-align: center;
  }
}
@media screen and (max-width: 750px) {
  #top .gift hgroup h2 {
    margin: 0 auto;
  }
}
#top .gift .description {
  margin-bottom: -28rem;
}
@media screen and (max-width: 750px) {
  #top .gift .description {
    margin: 40rem 0 0;
    padding: 0 53rem;
  }
}
#top .gift ul {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 60rem;
  height: 870rem;
  margin-top: 100rem;
}
@media screen and (max-width: 750px) {
  #top .gift ul {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 65rem;
    height: 1049rem;
    margin-top: 60rem;
  }
}
#top .gift ul li {
  position: relative;
}
#top .gift ul li::before {
  content: "";
  position: absolute;
  width: 350rem;
  aspect-ratio: 1/1;
  z-index: 2;
}
@media screen and (max-width: 750px) {
  #top .gift ul li::before {
    width: 250rem;
  }
}
#top .gift ul li:nth-of-type(1)::before {
  bottom: -80rem;
  left: -10rem;
  background: url(../images/top/gift/decoration01.gif) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .gift ul li:nth-of-type(1)::before {
    top: -30rem;
    bottom: initial;
    left: initial;
    right: -60rem;
    background-image: url(../images/top/gift/decoration02.gif);
  }
}
#top .gift ul li:nth-of-type(1) svg {
  width: 801rem;
}
@media screen and (max-width: 750px) {
  #top .gift ul li:nth-of-type(1) svg {
    width: 630rem;
  }
}
#top .gift ul li:nth-of-type(1) svg path {
  transform: scale(1.7, 1.45);
  transform-origin: 2% 29%;
}
#top .gift ul li:nth-of-type(2) {
  margin-top: 10rem;
}
@media screen and (max-width: 750px) {
  #top .gift ul li:nth-of-type(2) {
    margin-top: initial;
  }
}
#top .gift ul li:nth-of-type(2)::before {
  top: -60rem;
  right: -81rem;
  background: url(../images/top/gift/decoration02.gif) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .gift ul li:nth-of-type(2)::before {
    top: initial;
    bottom: -36rem;
    left: -48rem;
    right: initial;
    background-image: url(../images/top/gift/decoration01.gif);
  }
}
#top .gift ul li:nth-of-type(2) svg {
  width: 780rem;
}
@media screen and (max-width: 750px) {
  #top .gift ul li:nth-of-type(2) svg {
    width: 600rem;
  }
}
#top .gift ul li:nth-of-type(2) svg path {
  transform: scale(1.7, 1.25);
  transform-origin: 9% 35%;
}
#top .products {
  position: relative;
  left: calc(50% - 1023rem);
  width: 2045rem;
  padding-bottom: 254rem;
}
@media screen and (max-width: 750px) {
  #top .products {
    left: calc(50% - 798rem);
    width: 1596rem;
    padding-bottom: 167rem;
  }
}
#top .products .product {
  position: relative;
}
#top .products .product > .inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;
  background-color: #fff;
}
#top .products .product h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#top .products .product h3 .count {
  font-size: 43rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 750px) {
  #top .products .product h3 .count {
    font-size: 39rem;
  }
}
#top .products .product h3 img {
  margin: 15rem 0;
}
#top .products .product h3 .en,
#top .products .product h3 .ja {
  color: var(--color-accent);
  font-weight: 700;
}
#top .products .product h3 .en {
  font-family: var(--font-quattrocento);
  font-size: 32rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 750px) {
  #top .products .product h3 .en {
    font-size: 30rem;
  }
}
#top .products .product h3 .ja {
  font-size: 24rem;
  line-height: 1.41;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 750px) {
  #top .products .product h3 .ja {
    font-size: 26rem;
    line-height: 2;
  }
}
#top .products .product .price {
  margin-top: 50rem;
  font-size: 38rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 750px) {
  #top .products .product .price {
    margin-top: 35rem;
  }
}
#top .products .product .common-buy-button {
  margin-top: 46rem;
}
@media screen and (max-width: 750px) {
  #top .products .product .common-buy-button {
    margin-top: 35rem;
  }
}
#top .products .product:nth-of-type(1) {
  margin-top: 81rem;
  padding-top: 208rem;
}
#top .products .product:nth-of-type(1) .inner {
  justify-content: center;
  width: 1344rem;
  height: 1344rem;
  border-radius: 50%;
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(1) .inner {
    width: 1050rem;
    height: 1050rem;
  }
}
#top .products .product:nth-of-type(1) h3 {
  width: 350rem;
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(1) h3 {
    width: 309rem;
  }
}
#top .products .product:nth-of-type(1) figure {
  position: relative;
  width: 878rem;
  margin-top: 52rem;
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(1) figure {
    width: 636rem;
    margin-top: 44rem;
  }
}
#top .products .product:nth-of-type(1) figure::before {
  content: "";
  position: absolute;
  bottom: 40rem;
  right: -70rem;
  width: 182rem;
  height: 267rem;
  background: url(../images/top/products/catch.svg) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(1) figure::before {
    bottom: 20rem;
    right: -25rem;
    width: 123rem;
    height: 180rem;
  }
}
#top .products .product:nth-of-type(2) {
  margin-top: 573rem;
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(2) {
    margin-top: 210rem;
  }
}
#top .products .product:nth-of-type(2) > .inner {
  gap: 133rem;
  width: 1344rem;
  padding: 140rem 93rem;
  border-radius: 70rem;
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(2) > .inner {
    gap: 110rem;
    width: 573rem;
    padding: 70rem 86rem;
  }
}
#top .products .product:nth-of-type(2) .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 63rem;
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(2) .item {
    flex-direction: column;
    gap: 0;
  }
}
#top .products .product:nth-of-type(2) .item figure {
  position: relative;
  width: 604rem;
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(2) .item figure {
    order: 2;
    width: 436rem;
    margin-top: 30rem;
  }
}
#top .products .product:nth-of-type(2) .item:nth-of-type(1) figure::before {
  content: "";
  position: absolute;
  bottom: 20rem;
  right: -70rem;
  width: 152rem;
  height: 222rem;
  background: url(../images/top/products/catch.svg) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(2) .item:nth-of-type(1) figure::before {
    bottom: 12rem;
    right: -51rem;
    width: 123rem;
    height: 180rem;
  }
}
#top .products .product:nth-of-type(2) .item .body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 490rem;
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(2) .item .body {
    display: contents;
    width: 100%;
  }
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(2) .item h3 {
    order: 1;
  }
}
#top .products .product:nth-of-type(2) .item h3 img {
  width: 350rem;
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(2) .item h3 img {
    width: 309rem;
  }
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(2) .item p {
    order: 3;
  }
}
@media screen and (max-width: 750px) {
  #top .products .product:nth-of-type(2) .item .common-buy-button {
    order: 4;
  }
}
#top .products .decoration {
  position: absolute;
  top: 265rem;
  left: 0;
  width: 100%;
}
#top .products .decoration span {
  display: block;
}
#top .instagram {
  margin: 201rem 0 72rem;
}
@media screen and (max-width: 750px) {
  #top .instagram {
    margin: 170rem 0 127rem;
  }
}
#top .instagram ul {
  display: flex;
  flex-wrap: wrap;
  gap: 11rem;
  width: 1894rem;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  #top .instagram ul {
    width: 100%;
    gap: 14rem;
  }
}
#top .instagram ul li {
  width: 370rem;
  aspect-ratio: 1/1;
}
@media screen and (max-width: 750px) {
  #top .instagram ul li {
    width: calc((100% - 28rem) / 3);
  }
}
@media screen and (max-width: 750px) {
  #top .instagram ul li:nth-child(n+10) {
    display: none;
  }
}
#top .instagram ul li img {
  -o-object-fit: cover;
     object-fit: cover;
}
#top .instagram .instagram-button {
  margin: 67rem auto 0;
}
@media screen and (max-width: 750px) {
  #top .instagram .instagram-button {
    margin: 43rem auto 0;
  }
}
#top .instagram .instagram-button a {
  background-color: #fff;
  transition: 0.2s ease;
}
#top .instagram .instagram-button a:focus {
  opacity: 0.75;
}
@media (hover: hover) and (pointer: fine) {
  #top .instagram .instagram-button a:hover {
    opacity: 0.75;
  }
}
#top .modal-bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  transition: visibility 0.3s ease, opacity 0.3s ease;
}
#top .modal-bg[data-expanded=false] {
  opacity: 0;
  visibility: hidden;
}
#top .modal-bg[data-expanded=true] {
  opacity: 1;
  visibility: visible;
}
#top .modal {
  position: fixed;
  z-index: 7;
  top: calc(50% - 494rem);
  left: calc(50% - 822rem);
  width: 1644rem;
  height: 988rem;
  padding: 78rem 97rem 161rem 80rem;
  transition: visibility 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  #top .modal {
    top: 5vh;
    left: 50rem;
    width: 650rem;
    height: min(100vh - 121rem, 1436rem);
    padding: 52rem 25rem 135rem 50rem;
  }
}
#top .modal::before {
  content: "";
  position: absolute;
  top: calc(50% - 494rem);
  left: calc(50% - 822rem);
  width: 1644rem;
  height: 988rem;
  background-color: #fff;
  border-radius: 0 60rem 0 60rem;
}
@media screen and (max-width: 750px) {
  #top .modal::before {
    top: 0;
    left: 0;
    width: 650rem;
    height: min(100vh - 121rem, 1436rem);
  }
}
#top .modal[aria-modal=false] {
  opacity: 0;
  visibility: hidden;
}
#top .modal[aria-modal=true] {
  opacity: 1;
  visibility: visible;
}
#top .modal .inner {
  position: relative;
}
@media screen and (max-width: 750px) {
  #top .modal .inner {
    height: 100%;
    overflow-y: scroll;
  }
}
#top .modal .inner::before {
  content: "";
  position: absolute;
  top: -50rem;
  right: -26rem;
  width: 290rem;
  height: 154rem;
  background: url(../images/top/recipes/decoration.svg) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .modal .inner::before {
    top: 124rem;
    right: 19rem;
    width: 199rem;
    height: 89rem;
  }
}
#top .modal .inner::-webkit-scrollbar {
  width: 7rem;
}
@media screen and (max-width: 750px) {
  #top .modal .inner::-webkit-scrollbar {
    width: 5rem;
  }
}
#top .modal .inner::-webkit-scrollbar-track {
  border-radius: 15rem;
  background-color: #f3efec;
}
@media screen and (max-width: 750px) {
  #top .modal .inner::-webkit-scrollbar-track {
    border-radius: 2.5px;
  }
}
#top .modal .inner::-webkit-scrollbar-thumb {
  border-radius: 15rem;
  background-color: #e8ded7;
}
@media screen and (max-width: 750px) {
  #top .modal .inner::-webkit-scrollbar-thumb {
    border-radius: 2.5px;
  }
}
#top .modal header {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 750px) {
  #top .modal header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 25rem 0;
  }
}
#top .modal header h2 {
  position: relative;
  font-size: 43rem;
  font-weight: 700;
}
@media screen and (max-width: 750px) {
  #top .modal header h2 {
    width: 100%;
    font-size: 34rem;
  }
}
#top .modal header h2::after {
  content: "";
  position: absolute;
  bottom: -32rem;
  left: 0;
  width: 108rem;
  height: 9rem;
  background: url(../images/common/line02.svg) no-repeat center top/contain;
}
@media screen and (max-width: 750px) {
  #top .modal header h2::after {
    bottom: -117rem;
    width: 79rem;
    height: 6rem;
  }
}
#top .modal header span {
  border-radius: 30rem;
  padding: 0 30rem;
  font-size: 26rem;
  font-weight: 500;
  line-height: 60rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 750px) {
  #top .modal header span {
    border-radius: 27rem;
    padding: 0 30rem;
    font-size: 23rem;
    line-height: 44rem;
  }
}
#top .modal header span:first-of-type {
  margin-left: 46rem;
}
@media screen and (max-width: 750px) {
  #top .modal header span:first-of-type {
    margin-left: 0;
  }
}
#top .modal header span + span {
  margin-left: 14rem;
}
#top .modal header .time {
  background-color: #f0eae6;
  color: var(--color-sub);
}
#top .modal header .time::before {
  content: "調理時間：";
  display: inline-block;
}
#top .modal .detail {
  display: flex;
  justify-content: space-between;
  height: 630rem;
  margin-top: 60rem;
}
@media screen and (max-width: 750px) {
  #top .modal .detail {
    flex-direction: column;
    height: initial;
    margin: 110rem 20rem 0 0;
  }
}
#top .modal .detail figure {
  width: 590rem;
}
@media screen and (max-width: 750px) {
  #top .modal .detail figure {
    width: 550rem;
  }
}
#top .modal .detail figure img {
  border-radius: 0 72rem;
}
@media screen and (max-width: 750px) {
  #top .modal .detail figure img {
    border-radius: 0 92rem;
  }
}
#top .modal .detail .body {
  width: 800rem;
  overflow-y: auto;
  margin-top: 20rem;
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body {
    overflow-y: initial;
    width: 100%;
  }
}
#top .modal .detail .body::-webkit-scrollbar {
  width: 7rem;
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body::-webkit-scrollbar {
    width: 5rem;
  }
}
#top .modal .detail .body::-webkit-scrollbar-track {
  border-radius: 15rem;
  background-color: #f3efec;
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body::-webkit-scrollbar-track {
    border-radius: 2.5px;
  }
}
#top .modal .detail .body::-webkit-scrollbar-thumb {
  border-radius: 15rem;
  background-color: #e8ded7;
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body::-webkit-scrollbar-thumb {
    border-radius: 2.5px;
  }
}
#top .modal .detail .body section + section::before {
  content: "";
  display: block;
  width: 746rem;
  height: 1rem;
  background-color: #e6d6b3;
  margin: 33rem 0;
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body section + section::before {
    width: 100%;
    height: 2px;
    border-top: 2px dotted #e6d6b3;
    background-color: initial;
    margin: 25rem 0;
  }
}
#top .modal .detail .body section h3 {
  color: #cead66;
  font-size: 27rem;
  font-weight: 500;
  letter-spacing: 0.1em;
}
#top .modal .detail .body section p,
#top .modal .detail .body section ul li,
#top .modal .detail .body section ol li {
  margin-top: 20rem;
  font-size: 17rem;
  font-weight: 500;
  letter-spacing: normal;
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body section p,
#top .modal .detail .body section ul li,
#top .modal .detail .body section ol li {
    font-size: 23rem;
  }
}
#top .modal .detail .body section.ingredients ul li {
  display: flex;
}
#top .modal .detail .body section.ingredients ul li + li {
  margin-top: 20rem;
}
#top .modal .detail .body section.ingredients ul li span {
  vertical-align: top;
}
#top .modal .detail .body section.ingredients ul li span:first-of-type {
  position: relative;
  display: inline-block;
  width: min(100%, 200rem);
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body section.ingredients ul li span:first-of-type {
    width: 200rem;
    min-width: 120rem;
  }
}
#top .modal .detail .body section.ingredients ul li span:first-of-type.mark::after {
  content: "★";
  position: absolute;
  font-size: 1px;
  top: -2px;
}
#top .modal .detail .body section.ingredients ul li span:last-of-type {
  position: relative;
  display: inline-block;
  padding-left: 84rem;
  width: min(100%, 594rem);
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body section.ingredients ul li span:last-of-type {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 350rem;
    padding-left: 74rem;
  }
}
#top .modal .detail .body section.ingredients ul li span:last-of-type::before {
  content: "……………";
  position: absolute;
  top: -5rem;
  left: 0rem;
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body section.ingredients ul li span:last-of-type::before {
    content: "………";
    top: -8rem;
    font-size: 23rem;
    font-weight: 500;
    color: #948e8d;
  }
}
#top .modal .detail .body section.recipe ol {
  counter-reset: li;
}
#top .modal .detail .body section.recipe ol li {
  position: relative;
  padding-left: 2em;
  line-height: 1.8;
}
#top .modal .detail .body section.recipe ol li:not(.star):before {
  content: counter(li) ":";
  position: absolute;
  top: -2rem;
  left: 0;
  counter-increment: li;
  color: #9f9fa1;
  font-size: 18rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body section.recipe ol li:not(.star):before {
    font-size: 22rem;
  }
}
#top .modal .detail .body section.recipe ol li.star:before {
  content: "☆";
  position: absolute;
  top: -2rem;
  left: 0;
  color: #9f9fa1;
  font-size: 18rem;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body section.recipe ol li.star:before {
    font-size: 22rem;
  }
}
#top .modal .detail .body section.recipe ol li + li {
  margin-top: 30rem;
}
@media screen and (max-width: 750px) {
  #top .modal .detail .body section.recipe ol li + li {
    margin-top: 20rem;
  }
}
#top .modal button {
  position: absolute;
  bottom: 35rem;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 750px) {
  #top .modal button {
    bottom: 18rem;
  }
}
#top .modal button span {
  color: #9f9fa1;
  font-size: 19rem;
  line-height: 1.6;
}
@media screen and (max-width: 750px) {
  #top .modal button span {
    font-size: 22rem;
  }
}
#top .modal button span::before {
  content: "";
  display: block;
  width: 60rem;
  height: 60rem;
  background: url(../images/common/cancel-button02.svg) no-repeat center/contain;
}
@media screen and (max-width: 750px) {
  #top .modal button span::before {
    width: 64rem;
    height: 64rem;
  }
}

body.is-expanded .header-btn {
  background-color: #f3ede9;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  width: 100%;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.site-header a {
  transition: 0.2s ease;
}
.site-header a:focus {
  opacity: 0.7;
}
@media (hover: hover) and (pointer: fine) {
  .site-header a:hover {
    opacity: 0.7;
  }
}
.site-header > .logo {
  display: grid;
  place-items: center;
  width: 302rem;
  height: 192rem;
  background-color: #fff;
  border-radius: 0 0 68rem 0;
}
@media screen and (max-width: 750px) {
  .site-header > .logo {
    width: 211rem;
    height: 132rem;
  }
}
.site-header > .logo a {
  width: 191rem;
}
@media screen and (max-width: 750px) {
  .site-header > .logo a {
    width: 134rem;
  }
}
.site-header nav {
  margin: 27rem 66rem 0 0;
}
@media screen and (max-width: 750px) {
  .site-header nav {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 90rem;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 167rem 100rem 0;
    opacity: 0;
    visibility: hidden;
    overflow-y: scroll;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    background: #fff;
  }
}
.site-header nav::before {
  display: none;
}
@media screen and (max-width: 750px) {
  .site-header nav::before {
    content: "";
    position: absolute;
    top: 140rem;
    left: 61rem;
    display: block;
    width: 631rem;
    height: 1152rem;
    background: url(../images/common/header-deoration-sp.svg) no-repeat center/contain;
  }
}
.site-header nav.is-expanded {
  opacity: 1;
  visibility: visible;
}
.site-header nav p {
  display: none;
}
@media screen and (max-width: 750px) {
  .site-header nav p {
    display: block;
    width: 314rem;
  }
}
.site-header nav ul:not(.button-list) {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 36rem;
  background-color: #fff;
  border-radius: 25rem;
  padding: 0 55rem;
}
@media screen and (max-width: 750px) {
  .site-header nav ul:not(.button-list) {
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    background-color: initial;
    margin-right: 60rem;
    padding: 0;
  }
}
@media screen and (max-width: 750px) {
  .site-header nav ul:not(.button-list) li {
    width: 90rem;
  }
}
@media screen and (max-width: 750px) {
  .site-header nav ul:not(.button-list) li:not(:last-of-type) a {
    writing-mode: vertical-rl;
  }
}
.site-header nav ul:not(.button-list) li:not(:last-of-type) a .en {
  display: none;
}
@media screen and (max-width: 750px) {
  .site-header nav ul:not(.button-list) li:not(:last-of-type) a .en {
    display: block;
    color: var(--color-accent);
    font-family: var(--font-quattrocento);
    font-size: 17rem;
    font-weight: 700;
    letter-spacing: 0.1em;
  }
}
.site-header nav ul:not(.button-list) li:not(:last-of-type) a .ja {
  font-size: 19rem;
  font-weight: 700;
  line-height: 69rem;
  letter-spacing: 0.1em;
  transition: opacity 0.2s ease;
}
@media screen and (max-width: 750px) {
  .site-header nav ul:not(.button-list) li:not(:last-of-type) a .ja {
    text-orientation: upright;
    font-size: 26rem;
    line-height: 1.2;
    letter-spacing: 0.15em;
  }
}
.site-header nav ul:not(.button-list) li:last-of-type img {
  width: 31rem;
  vertical-align: middle;
}
@media screen and (max-width: 750px) {
  .site-header nav ul:not(.button-list) li:last-of-type img {
    display: none;
  }
}
.site-header nav .button-list {
  display: none;
}
@media screen and (max-width: 750px) {
  .site-header nav .button-list {
    display: block;
    padding: 0 53rem;
    position: relative;
    z-index: 4;
  }
}
.site-header nav .button-list li + li {
  margin-top: 34rem;
}
.site-header nav .button-list li.instagram-button a {
  background-color: #f3ede9;
}
.site-header .drawer-button {
  position: relative;
  top: 18rem;
  right: 33rem;
  z-index: 6;
  display: none;
  width: 114rem;
  height: 114rem;
  transition: background-color 0.5s ease;
}
@media screen and (max-width: 750px) {
  .site-header .drawer-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.site-header .drawer-button button {
  position: relative;
  z-index: 4;
  display: inline-block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
}
.site-header .drawer-button button span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 37rem;
  height: 3rem;
  border-radius: 10rem;
  background-color: #000;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, background-color 0.3s ease, top 0.3s ease;
}
.site-header .drawer-button button span::before, .site-header .drawer-button button span::after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 10rem;
  background-color: #000;
  transition: inherit;
}
.site-header .drawer-button button span::before {
  top: -11rem;
}
.site-header .drawer-button button span::after {
  top: 11rem;
}
.site-header .drawer-button button[aria-expanded=true] {
  border: none;
}
.site-header .drawer-button button[aria-expanded=true] span {
  background-color: transparent;
}
.site-header .drawer-button button[aria-expanded=true] span::before, .site-header .drawer-button button[aria-expanded=true] span::after {
  top: 0;
  background-color: #000;
}
.site-header .drawer-button button[aria-expanded=true] span::before {
  transform: rotate(45deg);
}
.site-header .drawer-button button[aria-expanded=true] span::after {
  transform: rotate(-45deg);
}

.site-footer {
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 811rem;
  background: url(../images/common/footer-bg.svg) no-repeat center top/contain;
}
@media screen and (max-width: 750px) {
  .site-footer::before {
    height: 1438rem;
    background-image: url(../images/common/footer-bg-sp.svg);
  }
}
.site-footer::after {
  content: "";
  display: block;
  width: 100%;
  height: 5.11rem;
  margin-top: 45rem;
  background: url(../images/common/line01.svg) repeat center top/contain;
}
@media screen and (max-width: 750px) {
  .site-footer::after {
    height: 11rem;
    margin-top: 72rem;
    background-image: url(../images/common/line01-sp.svg);
  }
}
.site-footer a {
  transition: opacity 0.2s ease;
}
.site-footer a:focus {
  opacity: 0.75;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover {
    opacity: 0.75;
  }
}
.site-footer .inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 1520rem;
  height: 811rem;
  margin: 0 auto;
  padding-top: 100rem;
}
@media screen and (max-width: 750px) {
  .site-footer .inner {
    flex-direction: column;
    gap: 90rem;
    width: 100%;
    height: 1438rem;
    padding: 234rem 100rem 0;
  }
}
.site-footer .button-list,
.site-footer .logo,
.site-footer .menu-list {
  width: 450rem;
}
@media screen and (max-width: 750px) {
  .site-footer .button-list,
.site-footer .logo,
.site-footer .menu-list {
    width: 100%;
  }
}
.site-footer .button-list {
  padding: 0 46rem;
}
@media screen and (max-width: 750px) {
  .site-footer .button-list {
    order: 3;
    padding: 0 55rem;
  }
}
.site-footer .button-list li + li {
  margin-top: 27rem;
}
@media screen and (max-width: 750px) {
  .site-footer .button-list li + li {
    margin-top: 34rem;
  }
}
.site-footer .button-list li.instagram-button a {
  background-color: #f3ede9;
}
.site-footer .logo {
  display: block;
  width: 354rem;
  margin: 0 auto;
}
@media screen and (max-width: 750px) {
  .site-footer .logo {
    order: 1;
    width: 314rem;
  }
}
.site-footer .menu-list {
  display: flex;
  flex-direction: row-reverse;
  gap: 40rem;
  margin-top: 30rem;
}
@media screen and (max-width: 750px) {
  .site-footer .menu-list {
    order: 2;
    margin-top: 0rem;
    justify-content: center;
  }
}
@media screen and (max-width: 750px) {
  .site-footer .menu-list li {
    width: 90rem;
  }
}
.site-footer .menu-list li a {
  writing-mode: vertical-rl;
}
.site-footer .menu-list li a .en {
  display: block;
  color: var(--color-accent);
  font-family: var(--font-quattrocento);
  font-size: 13rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 750px) {
  .site-footer .menu-list li a .en {
    font-size: 17rem;
    letter-spacing: 0.1em;
  }
}
.site-footer .menu-list li a .ja {
  text-orientation: upright;
  font-size: 22rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 750px) {
  .site-footer .menu-list li a .ja {
    font-size: 26rem;
    letter-spacing: 0.15em;
  }
}
.site-footer .decorations img {
  position: absolute;
  z-index: 2;
}
.site-footer .decorations img:nth-of-type(1) {
  width: 68rem;
  top: 287rem;
  left: 59rem;
}
@media screen and (max-width: 750px) {
  .site-footer .decorations img:nth-of-type(1) {
    width: 54rem;
    top: 204rem;
    left: initial;
    right: 133rem;
  }
}
.site-footer .decorations img:nth-of-type(2) {
  width: 57rem;
  top: 210rem;
  left: 158rem;
}
@media screen and (max-width: 750px) {
  .site-footer .decorations img:nth-of-type(2) {
    width: 44rem;
    top: 228rem;
    left: initial;
    right: 59rem;
  }
}
.site-footer .decorations img:nth-of-type(3) {
  width: 95rem;
  top: 192rem;
  left: 352rem;
}
@media screen and (max-width: 750px) {
  .site-footer .decorations img:nth-of-type(3) {
    width: 78rem;
    top: 265rem;
    left: 62rem;
  }
}
.site-footer .decorations img:nth-of-type(4) {
  width: 81rem;
  top: 670rem;
  right: 528rem;
}
@media screen and (max-width: 750px) {
  .site-footer .decorations img:nth-of-type(4) {
    width: 59rem;
    top: 1150rem;
    left: 60rem;
    right: initial;
  }
}
.site-footer .decorations img:nth-of-type(5) {
  width: 74rem;
  top: 751rem;
  right: 408rem;
}
@media screen and (max-width: 750px) {
  .site-footer .decorations img:nth-of-type(5) {
    top: 1230rem;
    width: 48rem;
    left: 113rem;
    right: initial;
  }
}
.site-footer .decorations img:nth-of-type(6) {
  width: 90rem;
  top: 707rem;
  right: 120rem;
  transform: rotate(20deg);
}
@media screen and (max-width: 750px) {
  .site-footer .decorations img:nth-of-type(6) {
    width: 70rem;
    top: 1280rem;
    right: 166rem;
  }
}
.site-footer .logo-sub {
  display: block;
  width: 144rem;
  margin: 53rem auto 0;
}
@media screen and (max-width: 750px) {
  .site-footer .logo-sub {
    width: 204rem;
    margin: 101rem auto 0;
  }
}
.site-footer p {
  margin-top: 25rem;
  text-align: center;
  color: var(--color-sub);
  font-size: 15rem;
  font-weight: 700;
  letter-spacing: 0.15em;
}
@media screen and (max-width: 750px) {
  .site-footer p {
    margin-top: 78rem;
    font-size: 18rem;
  }
}

/*# sourceMappingURL=styles.css.map*/