body {
  background: #fffdfa;
}

.global-nav .is-current::after {
  transform: scaleX(1);
}

.icon-link svg {
  width: 2.6rem;
  height: 2.6rem;
}

.menu-hero {
  display: grid;
  grid-template-columns: 46% 54%;
  height: 40rem;
  background: repeating-linear-gradient(
    90deg,
    #ffffff 0,
    #ffffff 22px,
    #a3d6cc5c 22px,
    #a3d6cc5c 44px
  );
}

.menu-left {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.pagetop-frame {
  position: absolute;
  inset: 3rem;
  display: grid;
  place-items: center;
}

.pagetop-frame__content {
  position: relative;
  z-index: 3;
  padding: 3rem;
  text-align: center;
}

.menu-hero h1 {
  font-family: var(--en);
  font-size: 6rem;
  font-weight: 400;
  line-height: 1.2;
}

.menu-hero__jp {
  margin: 0.5rem 0 2.5rem;
  font-size: 2rem;
}

/* .menu-sample {
  display: grid;
  place-items: center;
  background: #d9d9d9;
  color: #747474;
  font-family: var(--en);
  letter-spacing: 0.08em;
} */

/* sample枠をimgへ置き換えた場合も、元の枠内に収める */

.design__image {
  display: block;
  width: 50rem;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.menu-hero__image {
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
  font-size: 2rem;
}

/* 下層トップ右側：div.sampleをimgへ差し替えた場合もセクション内の同じ大きさに収める */
img.menu-hero__image {
  display: block;
  background: none;
}

.menu-page-section {
  padding: 5rem 0;
}

.menu-page-container {
  width: min(calc(100% - 6rem), 112rem);
  margin-inline: auto;
  margin-bottom: 5rem;
}

.menu-page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--blue);
  font-family: var(--en);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}
/* 
.menu-page-heading::before,
.menu-page-heading::after {
  content: "✧";
  color: var(--mint);
  font-size: 1.8rem;
} */

.menu-page-heading small {
  flex-basis: 100%;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.3rem;
}

.decorated-heading {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
  align-items: center;
  gap: 2rem;
  width: min(100%, 86rem);
  margin-inline: auto;
}

.decorated-heading__image {
  width: 100%;
  max-height: 2rem;
  object-fit: contain;
}

.decorated-heading .menu-page-heading::before,
.decorated-heading .menu-page-heading::after {
  display: none;
}

.heading-description {
  margin-top: 0.8rem;
  color: var(--ink);
  font-size: 1.6rem;
  text-align: center;
}
.heading-p {
  font-size: 1.8rem;
  text-align: center;
  margin: 3rem 0;
  font-weight: 200;
}

.price-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 2rem;
  border: 1px solid #add8d1;
  background: #fff;
}

.price-group {
  padding: 1.5rem 2.5rem;
  border-left: 1px solid #c7e1dc;
  border-bottom: 1px solid #c7e1dc;
}

.price-group--extension {
  grid-row: span 2;
  border-left: 0;
  border-bottom: 0;
}

.price-group:nth-child(2) {
  grid-column: 2 / 4;
}

/* 「その他のメニュー」の枠幅：リペアと同じく2〜3列目まで使用します */
.price-group--other {
  grid-column: 2 / 4;
}

/* 「その他のメニュー」内の各項目を、広げた枠幅いっぱいにします */
.price-group--other dl,
.price-group--other dl div {
  width: 100%;
}

/* .price-group:nth-child(4) {
  border-bottom: 0;
} */

.price-group h3 {
  padding: 0.6rem 1.5rem;
  border-radius: 0.7rem;
  background: #8dccbf;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 400;
  text-align: center;
}

.price-group dl {
  /* 料金一覧と見出しの間隔：この数値を小さくすると間隔が詰まります */
  margin-top: 0.7rem;
}

.price-group dl div {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 1fr minmax(8rem, auto);
  align-items: center;
  /* 各メニュー行の高さ：この数値で行間を調節できます */
  min-height: 3rem;
  /* メニュー名と金額の間ではなく、各行の下に表示する線です */
  border-bottom: 1px solid #d8e8e5;
}

.price-group dt {
  grid-column: 1;
}

.price-group dd {
  grid-column: 3;
  text-align: right;
}

.price-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5rem;
}

.price-note {
  margin-top: 1rem;
  font-size: 1.1rem;
  text-align: center;
}

.lash-guide {
  padding-top: 2rem;
}

.lash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.lash-card {
  padding: 1.5rem;
  border: 1px solid #c7e1dc;
  border-radius: 1rem;
  background: #fff;
  text-align: center;
  margin: 0 auto;
}

.lash-card h3 {
  margin-bottom: 1rem;
  font-family: var(--en);
  font-size: 2.4rem;
  font-weight: 400;
  color: var(--blue);
}

.lash-card h3 small {
  display: block;

  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.4rem;
}

.lash-card .menu-sample {
  aspect-ratio: 16/9;
  border-radius: 0.5rem;
}

.lash-card p {
  font-size: 1.6rem;
  margin-top: 3rem;
  text-align: left;
}

.treatment-section {
  padding-top: 0;
}

.treatment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.treatment-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 20rem;
  border: 1px solid #c7e1dc;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
}

.treatment-card .menu-sample {
  min-height: 20rem;
}

.treatment-card .design__image {
  min-height: 20rem;
}

.treatment-card > div:last-child {
  padding: 2rem;
}

.treatment-card h2 {
  color: var(--blue);
  font-family: var(--en);
  font-size: 2.5rem;
  font-weight: 400;
}

.treatment-card h2 small {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.2rem;
}

.treatment-card p {
  margin-top: 3rem;
  font-size: 1.8rem;
}
.recommended-section {
  padding-top: 5rem;
}

.recommended-card {
  display: grid;
  grid-template-columns: 30rem 1fr;
  gap: 4rem;
  padding: 2rem;
  /* border: 1px solid #c7e1dc; */
  border-radius: 1rem;
  /* background: #fff; */
}

/* .recommended-card > .menu-sample {
  min-height: 20rem;
  border-radius: 0.6rem;
} */
.recommended-image {
  display: block;
  width: 90%;
  height: auto;
  max-width: none;
  object-fit: cover;
  object-position: center center;
  margin: 0 auto;
  margin-top: 10%;
  border-radius: 0.8rem;
}
.recommended-card .menu-page-heading {
  justify-content: flex-start;
}

.recommended-card p {
  margin-top: 1.5rem;
}

.menu-contact {
  padding: 4rem 0;
}

.menu-contact > .menu-page-container {
  padding: 2.5rem 4rem;
  border: 1px solid #add8d1;
  border-radius: 1rem;
  background: #fff;
  text-align: center;
}

.menu-contact > div > p {
  margin: 1rem 0 2rem;
}

.menu-contact__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

.menu-contact__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid #c9a98e;
  border-radius: 0.8rem;
  transition: 0.25s;
}

.menu-contact__links a:hover {
  background: #dceeea;
  border-color: #dceeea;
}

.menu-contact__links .menu-contact__reserve {
  background: #72bcae;
  color: #fff;
}

.menu-contact__links img,
.menu-contact__links svg {
  width: 3.8rem;
  height: 3.8rem;
  object-fit: contain;
}

.menu-contact__links small {
  display: block;
  font-size: 1rem;
}

/* ==============================
   New Menu
============================== */

.new-menu-section {
  background: #faf8f4;
  color: #3b2d28;
  padding: 5rem 2rem;
}

/* 見出し */
.new-menu-heading {
  margin: 0 auto 48px;
  text-align: center;
}

.new-menu-heading__coming {
  margin: 0 0 4px;
  color: #a3d6cc;
  font-family: "Allura", cursive;
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 400;
  line-height: 1;
}

.new-menu-heading__title {
  margin: 0;
  color: #3b7084;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(48px, 6vw, 76px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.04em;
}

.new-menu-heading__ja {
  margin: 14px 0 0;
  font-size: 15px;
  letter-spacing: 0.16em;
}

/* 本体 */
.new-menu-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(48px, 7vw, 90px);
  align-items: center;
  width: min(1120px, 100%);
  margin: 0 auto;
}

/* Before / After */
.new-menu-visual {
  display: grid;
  gap: 24px;
}

.new-menu-photo {
  margin: 0;
}

.new-menu-photo img {
  display: block;
  width: 80%;
  height: 200px;
  aspect-ratio: 2/ 5;
  object-fit: cover;
  border-radius: 14px;
}

.new-menu-photo figcaption {
  margin-top: 10px;
  color: #3b7084;
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  text-align: left;
  letter-spacing: 0.08em;
}

/* 説明 */
.new-menu-content__brand {
  margin: 0 0 10px;
  color: #a3d6cc;
  font-family: "Allura", cursive;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  text-align: left;
}

.new-menu-content__title {
  margin: 0 0 26px;
  color: #3b7084;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: left;
}

.new-menu-content__lead {
  margin: 0 0 28px;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 2;
  letter-spacing: 0.08em;
  text-align: left;
}

.new-menu-content__description {
  margin-bottom: 3rem;
  font-size: 16px;
  line-height: 2.2;
  letter-spacing: 0.04em;
  text-align: left;
}

.new-menu-schedule {
  margin-top: 100px;
  padding: 22px 24px;
  background: #dceeea;
  border-radius: 12px;
  width: 90%;
  margin: 0 auto;
}

.new-menu-schedule__label {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: 0.12em;
  text-align: center;
}

.new-menu-schedule__date {
  margin: 0;
  color: #3b7084;
  font-family: "Noto Serif JP", serif;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.08em;
  text-align: center;
}

.new-menu-content__message {
  margin: 30px 0 0;
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  text-align: center;
  letter-spacing: 0.12em;
}

/* タブレット
@media (max-width: 900px) {
  .new-menu-section {
    padding: 80px 24px;
  }

  .new-menu-card {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .new-menu-content {
    text-align: center;
  }

  .new-menu-content__description {
    text-align: left;
  }

  .new-menu-schedule {
    text-align: left;
  }
} */

/* スマホ */
@media (max-width: 600px) {
  .new-menu-section {
    padding: 64px 50px;
  }

  .new-menu-heading {
    margin-bottom: 36px;
  }

  .new-menu-heading__coming {
    font-size: 40px;
  }

  .new-menu-heading__title {
    font-size: 46px;
  }

  .new-menu-heading__ja {
    font-size: 13px;
  }

  .new-menu-card {
    gap: 40px;
  }

  .new-menu-visual {
    gap: 20px;
  }

  .new-menu-photo img {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
  }

  .new-menu-photo figcaption {
    margin-top: 8px;
    font-size: 18px;
  }

  .new-menu-content__brand {
    font-size: 34px;
  }

  .new-menu-content__title {
    font-size: 26px;
  }

  .new-menu-content__lead {
    font-size: 17px;
    line-height: 1.9;
  }

  .new-menu-content__description {
    font-size: 14px;
    line-height: 2;
  }

  .new-menu-schedule {
    padding: 18px;
    width: 70%;
  }
  .new-menu-schedule__label {
    text-align: center;
  }

  .new-menu-schedule__date {
    font-size: 22px;
    text-align: center;
  }

  .new-menu-content__message {
    font-size: 15px;
  }

  .new-menu-card {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .new-menu-card {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /*
   * new-menu-contentの箱だけをなくして、
   * 中の要素を個別に並べ替えられるようにする
   */
  .new-menu-content {
    display: contents;
  }

  /* 商品名まわり */
  .new-menu-content__brand {
    order: 1;
    margin: 0 0 10px;
    text-align: left;
  }

  .new-menu-content__title {
    order: 2;
    margin: 0 0 24px;
    text-align: left;
  }

  /* 説明 */
  .new-menu-content__lead {
    order: 3;
    margin: 0 0 20px;
    text-align: left;
  }

  .new-menu-content__description {
    order: 4;
    margin: 0 0 32px;
    text-align: left;
  }

  /* Before・After写真 */
  .new-menu-visual {
    order: 5;
    display: grid;
    grid-template-columns: 1fr; /* 1列＝縦並び */
    gap: 20px;
    width: 100%;
    margin-bottom: 30px;
  }

  .new-menu-photo {
    min-width: 100%;
    margin: 0;
  }

  .new-menu-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* 横長 */
    object-fit: cover;
    border-radius: 10px;
  }

  .new-menu-photo figcaption {
    margin-top: 8px;
    font-size: 14px;
    text-align: center;
  }

  /* 写真の下に導入予定 */
  .new-menu-schedule {
    order: 6;
    width: 100%;
    margin: 0;
    padding: 18px;
    text-align: left;
  }

  /* 一番下のメッセージ */
  .new-menu-content__message {
    order: 7;
    margin: 24px 0 0;
    text-align: center;
  }
  .new-menu-content__brand,
  .new-menu-content__title,
  .new-menu-content__lead,
  .new-menu-content__description {
    width: 100%;
    text-align: left;
  }
}

.menu-footer {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.5fr;
  gap: 4rem;
  align-items: center;
  padding: 3rem max(4rem, calc((100% - 110rem) / 2));
  background: linear-gradient(90deg, #cae8e2, #fff 30%, #fff 70%, #cae8e2);
}

.menu-footer__brand {
  text-align: center;
}

.menu-footer__brand img {
  width: 13rem;
  height: 8rem;
  margin: auto;
  object-fit: contain;
}

.menu-footer h2 {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.menu-footer h2 svg {
  color: #66b5a8;
}

.menu-footer p {
  font-size: 1.2rem;
}

.menu-copyright {
  padding: 0.7rem;
  background: #8dccbf;
  color: #fff;
  font-family: var(--en);
  font-size: 1rem;
  text-align: center;
}

@media (max-width: 1000px) {
  .price-panel {
    grid-template-columns: 1fr 1fr;
  }

  .price-group--extension {
    grid-row: auto;
  }

  .price-group:nth-child(2) {
    grid-column: auto;
  }

  .price-group--other {
    grid-column: 1 / -1;
  }

  .price-group:nth-child(4) {
    border-bottom: 0;
  }

  .lash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .treatment-grid {
    grid-template-columns: 1fr;
  }

  .menu-contact__links {
    gap: 1.5rem;
  }

  .menu-footer {
    grid-template-columns: 1fr 1fr;
  }

  .menu-footer__brand {
    grid-column: 1 / 3;
  }
}

@media (max-width: 767px) {
  .menu-hero {
    grid-template-columns: 1fr;
    height: auto;
  }
  .menu-hero__image {
    width: 100%;
    height: 20rem;

    object-position: center;
  }

  .menu-left {
    min-height: 30rem;
  }

  .pagetop-frame {
    inset: 1.5rem;
  }

  .menu-left .fv__corner {
    width: 6rem;
  }

  .menu-left .fv__corner--lt,
  .menu-left .fv__corner--rt {
    top: 0;
  }

  .menu-left .fv__corner--lb,
  .menu-left .fv__corner--rb {
    bottom: 0;
  }

  .menu-left .fv__corner--lt,
  .menu-left .fv__corner--lb {
    left: 0;
  }

  .menu-left .fv__corner--rt,
  .menu-left .fv__corner--rb {
    right: 0;
  }

  .menu-hero h1 {
    font-size: 4rem;
  }

  .menu-hero__jp {
    font-size: 1.7rem;
  }

  .menu-page-section {
    padding: 4rem 0;
  }

  .menu-page-container {
    width: min(calc(100% - 3.2rem), 112rem);
  }

  .menu-page-heading {
    font-size: 2.8rem;
  }

  .decorated-heading {
    grid-template-columns: minmax(4rem, 1fr) auto minmax(4rem, 1fr);
    gap: 0.8rem;
  }

  .decorated-heading__image {
    max-height: 2rem;
  }

  .decorated-heading--compact .menu-page-heading {
    max-width: 17rem;
    font-size: 2rem;
  }

  .price-panel {
    grid-template-columns: 1fr;
  }

  .price-group,
  .price-group--extension,
  .price-group:nth-child(2),
  .price-group:nth-child(4),
  .price-group--other {
    grid-column: auto;
    grid-row: auto;
    border-left: 0;
    border-bottom: 1px solid #c7e1dc;
  }

  .price-group:last-child {
    border-bottom: 0;
  }

  .price-two-column {
    grid-template-columns: 1fr;
  }

  .lash-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .lash-card {
    padding: 1rem;
  }

  .lash-card h3 {
    font-size: 2rem;
  }

  .lash-card p {
    font-size: 1.6rem;
  }
  .heading-description {
    margin-top: 0.8rem;
    color: var(--ink);
    font-size: 1.4rem;
    text-align: center;
  }
  .heading-p {
    font-size: 1.6rem;
    text-align: center;
    margin-top: 3rem;
    font-weight: 200;
  }
  .treatment-card {
    grid-template-columns: 1fr;
    min-height: 0;
    overflow: hidden;
  }

  .treatment-card .menu-sample {
    min-height: 18rem;
  }

  .treatment-card .design__image {
    display: block;
    width: 100%;
    max-width: none;
    height: 30rem;
    min-height: 0;
    margin-inline: auto;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
  }

  .treatment-card > div:last-child {
    padding: 1.8rem 1.6rem 2rem;
  }

  .treatment-card h2 {
    font-size: 2.4rem;
    line-height: 1.25;
  }

  .treatment-card p {
    margin-top: 1.2rem;
    font-size: 1.6rem;
    line-height: 1.9;
  }

  .recommended-card {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .recommended-card > .menu-sample {
    min-height: 22rem;
  }

  .recommended-card .menu-page-heading {
    justify-content: center;
  }

  .menu-contact > .menu-page-container {
    padding: 2.5rem 1.6rem;
  }

  .menu-contact__links {
    grid-template-columns: 1fr;
  }

  .menu-footer {
    grid-template-columns: 0.8fr 1fr 1.2fr;
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: left;
  }

  .menu-footer__brand {
    grid-column: auto;
  }

  .menu-footer h2 {
    justify-content: left;
    gap: 0.4rem;
    font-size: 1rem;
    margin: 1rem 0;
  }

  .menu-footer h2 svg {
    width: 1.8rem;
    height: 1.8rem;
  }

  .menu-footer p {
    font-size: 0.9rem;
    line-height: 1.5;
    width: fit-content;
    text-align: left;
    margin: 0 auto;
  }

  .menu-footer__brand img {
    width: 7rem;
    height: 5rem;
  }
}