@charset "UTF-8";

@layer reset, base, layout, components, utilities;

:root {
  --color-pink: #ff92b4;
  --color-red: #ec2349;
  --color-accent: #e5bb68;
  --color-ink: #252123;
  --color-paper: #fff;
  --color-line: #d9d9d9;
  --color-price: #f32e5c;
  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;
  --font-size-body: 1rem;
  --line-height-body: 1.45;
  --motion-fast: 150ms;
}

@layer reset {

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  h1,
  h2,
  h3,
  p {
    margin: 0;
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    color: var(--color-ink);
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    line-height: var(--line-height-body);
    background: #fff;
    -webkit-font-smoothing: antialiased;
  }

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

  a:focus-visible {
    outline: 2px solid var(--color-price);
    outline-offset: 3px;
  }
}

@layer layout {
  .l-site {
    max-width: 1100px;
    margin: 12.3076923077vw auto 0;
    padding: 15px 20px 0;
  }

  .l-masthead {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: center;
    gap: 12px;
    min-height: auto;
    margin-bottom: 22px;
  }

  .l-menu-grid,
  .l-set-grid {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 18px;
  }

  .l-menu-column {
    display: grid;
    gap: 18px;
  }

  .l-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 38px;
  }

  .l-options {
    margin-top: 24px;
  }

  .l-section-2 {
    padding-top: 38px;
  }

  .l-second-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 20px;
  }

  .l-set-grid {
    gap: 23px;
  }

}

@layer components {
  .c-intro {
    max-width: 100%;
    height: auto;
    margin: 0 auto 0;
  }

  .c-identity {
    width: 100%;
    padding-top: 0;
    text-align: center;
  }

  .c-logo {
    display: block;
    width: 100%;
    max-width: 680px;
    height: auto;
    margin: 0 auto;
  }

  .c-page-title {
    width: 100%;
  }

  .c-intro-grid {
    width: 100%;
    text-align: center;
  }

  .c-menu-title {
    margin: 0;
    color: #16050e;
    font: 700 60px/1.1 Arial, sans-serif;
    font-size: 46px;
    letter-spacing: .02em;
  }

  .c-menu-card {
    min-width: 0;
    border: 3px solid var(--color-accent);
    background: var(--color-paper);
  }

  .c-menu-card__heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    color: white;
    font-size: 27px;
    font-weight: 400;
    letter-spacing: .075em;
    white-space: nowrap;
    background: linear-gradient(105deg, #ff8cac 0%, #ffadc3 74%, #fff1ee 100%);
    overflow: hidden;
    text-shadow: 0 0 1px rgba(150, 15, 70, .08);
    --menu-face: none;
  }

  .c-menu-card__heading::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 98px;
    height: 100%;
    background-image: var(--menu-face);
    background-position: center;
    background-size: cover;
    mask-image: linear-gradient(90deg, transparent, #000 25%);
    pointer-events: none;
    content: "";
  }

  .c-menu-card__heading span {
    position: relative;
    z-index: 1;
  }

  .c-menu-card__heading--strong {
    justify-content: flex-start;
    padding-left: 14px;
    font-weight: 700;
    text-align: left;
    background: linear-gradient(100deg, #e72d3a 0%, #e76b75 66%, #fff3ef);
  }

  .c-menu-card__heading--strong span {
    font-size: 26px;
  }

  .c-menu-card__heading small {
    font-size: .62em;
  }

  .c-menu-card__body {
    padding: 5px 12px 7px;
  }

  .c-price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 45px;
    padding: 9px 1px;
    border-bottom: 1px solid #d9d9d9;
  }

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

  .c-service {
    font-size: 17px;
    line-height: 1.43;
  }

  .c-service small {
    font-size: 12px;
  }

  .c-price {
    color: #f32e5c;
    font-size: 24px;
    line-height: 1.1;
    white-space: nowrap;
  }

  .c-price .c-yen {
    margin-right: 3px;
    font-size: 14px;
  }

  .c-section-marker__note {
    color: var(--color-ink);
  }

  .c-section-marker {
    margin: 5px 0 -2px;
    color: #f02b59;
    font-size: 14px;
    font-weight: bold;
  }

  .c-service-note {
    color: #f02b59;
    font-size: 13px;
  }

  .c-multi-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .c-multi-price > div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .c-zero-banner {
    margin: 22px -20px 0;
  }

  .c-zero-banner img {
    display: block;
    width: 100%;
    height: auto;
  }

  .c-set-card .c-menu-card__heading {
    height: 65px;
  }

  .c-set-card .c-menu-card__body {
    padding: 12px 14px 18px;
  }

  .c-group {
    padding: 13px 0;
    border-bottom: 1px solid #d5d5d5;
  }

  .c-group:last-child {
    border-bottom: none;
  }

  .c-group-title {
    margin: 0 0 8px;
    color: #ef233b;
    font-size: 17px;
    font-weight: bold;
  }

  .c-group-title::before {
    font-size: 15px;
    content: '■ ';
  }

  .c-set-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 8px 0 17px;
  }

  .c-set-row:last-child {
    margin-bottom: 0;
  }

  .c-set-name {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.35;
  }

  .c-set-detail {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.5;
  }

  .c-set-note {
    margin: 6px 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
  }

  .c-subhead {
    margin: 9px 0;
    padding: 3px 6px;
    border: 2px solid #f53647;
    color: #f53647;
    font-size: 15px;
  }

  .c-instagram {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    margin: 25px 0;
    padding: 15px;
    border: 3px solid var(--color-accent);
    background: #fff;
  }

  .c-instagram-title {
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd;
    border-right: 0;
    color: #e32940;
    font: 49px/1.05 Georgia, serif;
    text-align: center;
  }

  .c-instagram-title small {
    display: block;
    color: #111;
    font: 700 22px/1.5 serif;
  }

  .c-instagram-accounts {
    padding: 10px 0 0;
    padding-left: 35px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.65;
  }

  .c-instagram-accounts b {
    color: #e8253d;
  }

  .c-instagram-accounts small {
    display: block;
    font: 12px/1.6 sans-serif;
    font-size: 11px;
  }

  .c-logo--secondary {
    width: 360px;
    max-width: 100%;
    margin: 0;
  }

  .c-menu-title--secondary {
    margin: 0;
    margin-right: 160px;
    font-size: 52px;
  }

  .c-menu-card__heading--hyaluronic {
    --menu-face: url("../assets/face-hyaluronic.png");
  }

  .c-menu-card__heading--skin {
    --menu-face: url("../assets/face-skin.png");
  }

  .c-menu-card__heading--botox {
    --menu-face: url("../assets/face-botox.png");
  }

  .c-menu-card__heading--fat {
    --menu-face: url("../assets/face-fat.png");
  }

  .c-menu-card__heading--thread {
    --menu-face: url("../assets/face-thread.png");
  }

  .c-menu-card__heading--set {
    --menu-face: url("../assets/face-set.png");
  }

  .c-menu-card__heading--recommend {
    --menu-face: url("../assets/face-recommend.png");
  }

}

@media (min-width: 768px) {
  @layer layout {
    .l-site {
      margin-top: min(70px, 4.8611111111vw);
      padding: 18px 54px 0;
    }

    .l-masthead {
      gap: 38px;
    }

    .l-menu-grid,
    .l-set-grid {
      grid-template-columns: 1fr 1fr;
      gap: 23px;
    }

    .l-menu-column {
      gap: 25px;
    }

    .l-section-2 {
      padding-top: 56px;
    }

    .l-second-header {
      gap: 20px;
      margin-bottom: 32px;
    }

  }

  @layer components {
    .c-zero-banner {
      margin: 17px -54px 0;
    }

    .c-instagram {
      grid-template-columns: 40% 60%;
      margin: 45px 0 36px;
      padding: 13px 20px;
    }

    .c-instagram-title {
      border-right: 1px solid #ddd;
    }

    .c-instagram-accounts {
      font-size: 21px;
    }

    .c-logo--secondary {
      width: 460px;
      max-width: 50%;
    }

    .c-menu-title--secondary {
      font-size: 82px;
    }

  }
}

@media (prefers-reduced-motion: reduce) {
  @layer base {
    html {
      scroll-behavior: auto;
    }
  }
}