@charset "UTF-8";
body {
  font-family: "Noto Sans JP", sans-serif;
}

.u-desktop {
  display: block;
}

.u-mobile {
  display: none;
}

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

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  line-height: 1.5;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  display: block;
  max-width: 100%;
  width: 100%;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}

/* フォームリセット */
input,
button,
select,
textarea {
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/* ホバー */
a {
  -webkit-text-decoration: none;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}

a[href^="tel:"] {
  cursor: default;
  pointer-events: none;
}
/* リキッドレイアウト対応 */
html {
  font-size: 16px;
}

body.is-scroll {
  overflow: hidden;
}

.wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

/* ========================================
  KV
======================================== */
.p-top-kv__title {
  margin: 0;
}

.p-top-kv__image {
  aspect-ratio: 1440/1020;
  display: block;
  height: auto;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-top {
  background-color: #fefcf1;
  color: #494949;
}

/* ========================================
  イントロ・3商品紹介
======================================== */
.p-top-intro {
  container-type: inline-size;
  overflow-x: clip;
  padding-top: 9.8125rem;
  position: relative;
  z-index: 0;
}

.p-top-intro__deco {
  height: auto;
  max-width: none;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.p-top-intro__deco--circle {
  left: calc(50% + 25.375rem);
  top: 13.5rem;
  width: 26.25rem;
}

.p-top-intro__deco--dotcircle {
  left: calc(50% + 22.875rem);
  top: 23.8125rem;
  width: 17.875rem;
}

.p-top-intro__deco--dots {
  left: calc(50% - 46.3125rem);
  rotate: -90deg;
  top: 3.9375rem;
  width: 16.0625rem;
}

.p-top-intro__deco--gummy01,
.p-top-intro__deco--gummy02,
.p-top-intro__deco--gummy03,
.p-top-intro__deco--gummy04,
.p-top-intro__deco--gummy05,
.p-top-intro__deco--gummy06 {
  aspect-ratio: 1/1;
  width: 5rem;
  -o-object-fit: cover;
     object-fit: cover;
}

/* 影は Figma 上で回転前の画面座標（10, 10）。回転分を打ち消したオフセットで指定 */
.p-top-intro__deco--gummy01 {
  filter: drop-shadow(0.745625rem 0.475rem 0.9375rem rgba(0, 0, 0, 0.1));
  left: calc(50% - 28.45625rem);
  rotate: 12.48deg;
  top: 8rem;
}

.p-top-intro__deco--gummy02 {
  filter: drop-shadow(0.801875rem 0.3725rem 0.9375rem rgba(0, 0, 0, 0.1));
  left: calc(50% - 35.73125rem);
  rotate: 20.09deg;
  top: 20.14375rem;
}

.p-top-intro__deco--gummy03 {
  filter: drop-shadow(0.44375rem 0.764375rem 0.9375rem rgba(0, 0, 0, 0.1));
  left: calc(50% - 27.816875rem);
  rotate: -14.87deg;
  top: 27.933125rem;
}

.p-top-intro__deco--gummy04 {
  filter: drop-shadow(0.801875rem 0.3725rem 0.9375rem rgba(0, 0, 0, 0.1));
  left: calc(50% + 21.83125rem);
  rotate: 20.09deg;
  top: 8.20625rem;
}

.p-top-intro__deco--gummy05 {
  filter: drop-shadow(0.44375rem 0.764375rem 0.9375rem rgba(0, 0, 0, 0.1));
  left: calc(50% + 29.308125rem);
  rotate: -14.87deg;
  top: 17.620625rem;
}

.p-top-intro__deco--gummy06 {
  filter: drop-shadow(0.6075rem 0.641875rem 0.9375rem rgba(0, 0, 0, 0.1));
  left: calc(50% + 22.35625rem);
  rotate: -1.59deg;
  top: 26.60625rem;
}

.p-top-intro__inner {
  position: relative;
  z-index: 10;
}

.p-top-intro__lead {
  align-items: center;
  color: #212121;
  display: flex;
  font-size: 1.25rem;
  font-weight: 700;
  gap: 1.25rem;
  justify-content: center;
  line-height: 1.4;
}
.p-top-intro__lead::before, .p-top-intro__lead::after {
  background: url("/contents/health/gummy-supplement/assets/images/top/intro_lead_line.svg") no-repeat center/1.6774rem 2.5340625rem;
  content: "";
  flex-shrink: 0;
  height: 2.5rem;
  width: 1.625rem;
}
.p-top-intro__lead::after {
  transform: scaleX(-1);
}

.p-top-intro__lead-text {
  display: block;
}

.p-top-intro__title {
  font-weight: 700;
  line-height: 1.25;
  margin-top: 1.9375rem;
  text-align: center;
}

.p-top-intro__title-sub {
  color: #212121;
  display: block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.5rem;
}

.p-top-intro__title-main {
  color: #e1037e;
  display: block;
  font-family: "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif;
  font-size: 4rem;
  margin-top: 0.625rem;
}

.p-top-intro__text {
  color: #212121;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 2;
  margin-top: 3.75rem;
  text-align: center;
}

.p-top-intro__em {
  color: #e1037e;
  font-size: 1.75rem;
  font-weight: 700;
}

.p-top-intro__products {
  display: grid;
  grid-template-columns: 1fr min(28rem, 33.3333333333cqw) 1fr;
  margin-top: calc(9.44375rem + min(6.43125rem, 7.65625cqw));
  position: relative;
  z-index: 10;
}

.p-top-intro__product {
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 1.25rem 16.125rem;
  padding-bottom: 3.33125rem;
}

.p-top-intro__product--grape {
  background-color: #d4bced;
  background-image: url("/contents/health/gummy-supplement/assets/images/top/intro_pattern_grape.svg");
  color: #60236d;
}

.p-top-intro__product--lemon {
  background-color: #fff695;
  background-image: url("/contents/health/gummy-supplement/assets/images/top/intro_pattern_lemon.svg");
  color: #e04b1e;
}

.p-top-intro__product--peach {
  background-color: #ffd0db;
  background-image: url("/contents/health/gummy-supplement/assets/images/top/intro_pattern_peach.svg");
  color: #de2c5d;
}

.p-top-intro__product-body {
  margin-inline: auto;
  margin-top: calc(-1 * (3.19375rem + min(6.43125rem, 7.65625cqw)));
  position: relative;
  width: min(28rem, 33.3333333333cqw);
  z-index: 0;
}

.p-top-intro__product--grape .p-top-intro__product-body {
  margin-right: 0;
}

.p-top-intro__product--peach .p-top-intro__product-body {
  margin-left: 0;
}

.p-top-intro__product-fruit {
  height: auto;
  left: calc(-1 * min(0.0625rem, 0.0744047619cqw));
  max-width: none;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: min(12.5rem, 14.880952381cqw);
  z-index: 0;
}

.p-top-intro__product--grape .p-top-intro__product-fruit {
  left: calc(-1 * min(1.0625rem, 1.2648809524cqw));
  width: min(12.8125rem, 15.2529761905cqw);
}

.p-top-intro__product-flavor {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.65;
  position: relative;
  text-align: center;
  z-index: 10;
}

.p-top-intro__product-package {
  aspect-ratio: 1811/3228;
  display: block;
  height: auto;
  margin-inline: auto;
  margin-top: 0.71875rem;
  position: relative;
  width: min(13.745rem, 16.3630952381cqw);
  z-index: 10;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-top-intro__product-button {
  margin-top: 1.5rem;
  position: relative;
  z-index: 10;
}

.p-top-intro__note {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-inline: auto;
  margin-top: 2.5rem;
  max-width: 42.375rem;
  text-align: center;
}

/* ========================================
  お悩み
======================================== */
.p-top-worry {
  overflow-x: clip;
  padding-bottom: 8.725rem;
  padding-top: 9.95rem;
  position: relative;
  z-index: 0;
}

.p-top-worry__deco {
  height: auto;
  max-width: none;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.p-top-worry__deco--circle {
  left: calc(50% - 47.9375rem);
  top: 1.625rem;
  width: 21.1875rem;
}

.p-top-worry__deco--stripe {
  left: calc(50% + 31.625rem);
  top: 9.8125rem;
  width: 13.773625rem;
}

.p-top-worry__deco--ellipse {
  left: calc(50% + 25.375rem);
  top: 37.25rem;
  width: 26.25rem;
}

.p-top-worry__deco--dotcircle {
  left: calc(50% + 20.625rem);
  top: 46.375rem;
  width: 17.875rem;
}

.p-top-worry__inner {
  position: relative;
  text-align: center;
  z-index: 10;
}

.p-top-worry__bubbles {
  background: url("/contents/health/gummy-supplement/assets/images/top/worry_bubbles.svg") no-repeat left top/100% 100%;
  height: 12.25rem;
  margin-left: 15.875rem;
  position: relative;
  width: 39.6875rem;
  z-index: 0;
}

.p-top-worry__bubble {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
  position: absolute;
  text-align: center;
  z-index: 10;
}

.p-top-worry__bubble--01 {
  left: 1.5rem;
  top: 5.5rem;
  width: 9.8125rem;
}

.p-top-worry__bubble--02 {
  left: 16.125rem;
  top: 3.5625rem;
  width: 8.4375rem;
}

.p-top-worry__bubble--03 {
  left: 28.25rem;
  top: 4.1875rem;
  width: 8.8125rem;
}

.p-top-worry__title {
  color: #212121;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 1.25rem;
}

.p-top-worry__arrow {
  height: auto;
  margin-inline: auto;
  margin-top: 1.5625rem;
  width: 1.875rem;
}

.p-top-worry__catch {
  color: #212121;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 0.8125rem;
}

.p-top-worry__catch-text {
  display: inline-block;
  position: relative;
  z-index: 0;
}
.p-top-worry__catch-text::after {
  background-color: #faeb1e;
  content: "";
  height: 1.125rem;
  left: calc(50% - 22.0625rem);
  mix-blend-mode: multiply;
  pointer-events: none;
  position: absolute;
  top: 1.625rem;
  width: 42.8125rem;
  z-index: 10;
}

.p-top-worry__text {
  color: #212121;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 2.3125rem;
}

/* ========================================
  コンセプト
======================================== */
.p-top-concept {
  overflow-x: clip;
  position: relative;
  z-index: 20;
}

.p-top-concept__deco {
  height: auto;
  max-width: none;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.p-top-concept__deco--ring-pink {
  left: calc(50% - 42.6875rem);
  top: -6.9375rem;
  width: 13.875rem;
}

.p-top-concept__deco--lines {
  left: calc(50% + 37.8125rem);
  top: 51.375rem;
  width: 17.8576875rem;
}

.p-top-concept__deco--ellipse {
  left: calc(50% - 50.25rem);
  top: 61.6875rem;
  width: 13.375rem;
}

.p-top-concept__deco--ring-yellow {
  left: calc(50% + 37.5rem);
  top: 67.24625rem;
  width: 13.875rem;
}

.p-top-concept__deco--circle-pink {
  left: calc(50% - 48.8125rem);
  top: 133rem;
  width: 31.4826875rem;
}

.p-top-concept__deco--dots {
  left: calc(50% + 29rem);
  top: 142.4375rem;
  width: 16.0625rem;
}

.p-top-concept__deco--diamonds {
  left: calc(50% - 46.9675rem);
  rotate: -42.8deg;
  top: 95.555rem;
  width: 20.216125rem;
}

.p-top-concept__inner {
  position: relative;
  z-index: 10;
}

.p-top-concept__box {
  background-color: #fff695;
  border-radius: 3.75rem;
  color: #212121;
  padding-bottom: 8.7rem;
  padding-top: 8.75rem;
  text-align: center;
}

.p-top-concept__head {
  translate: -0.34375rem 0;
}

.p-top-concept__label img {
  height: auto;
  margin-inline: auto;
  width: 10.375rem;
}

.p-top-concept__fruits {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.p-top-concept__fruit img {
  aspect-ratio: 1/1;
  height: auto;
  width: 3.75rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-top-concept__title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 1.25rem;
}

.p-top-concept__text {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 3.75rem;
}

.p-top-concept__text--bottom {
  margin-top: 2.5rem;
}

.p-top-concept__text-lead {
  font-size: 1.75rem;
  font-weight: 700;
}

.p-top-concept__text-line {
  line-height: 2.2;
}

.p-top-concept__text--bottom .p-top-concept__text-line {
  line-height: 1.8;
  margin-top: 0.625rem;
}

.p-top-concept__em {
  color: #e1037e;
  font-size: 1.75rem;
  font-weight: 700;
}

.p-top-concept__mark {
  font-size: 1.75rem;
}

.p-top-concept__points {
  display: grid;
  grid-template-columns: repeat(3, 17.96875rem);
  justify-content: center;
  margin-top: 5.15rem;
  translate: -0.46875rem 0;
}

.p-top-concept__point {
  position: relative;
  z-index: 0;
}
.p-top-concept__point::before {
  background: no-repeat center/100% 100%;
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: -10;
}

.p-top-concept__point-em {
  color: #e1037e;
}

.p-top-concept__point--01::before {
  background-image: url("/contents/health/gummy-supplement/assets/images/top/concept_point_bg01.svg");
  height: 15.5625rem;
  left: calc(50% - 7.5625rem);
  top: -1.25rem;
  width: 15.75rem;
}

.p-top-concept__point--02::before {
  background-image: url("/contents/health/gummy-supplement/assets/images/top/concept_point_bg02.svg");
  height: 15.75rem;
  left: calc(50% - 8.03125rem);
  top: -1.3125rem;
  width: 16.0625rem;
}

.p-top-concept__point--03::before {
  background-image: url("/contents/health/gummy-supplement/assets/images/top/concept_point_bg03.svg");
  height: 16.6875rem;
  left: calc(50% - 7.71875rem);
  rotate: -90deg;
  top: -1.8125rem;
  width: 16.0625rem;
}

.p-top-concept__point-label {
  color: #e1037e;
  font-family: "Akshar", sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 0.85;
}

.p-top-concept__point-num {
  font-size: 2.25rem;
}

.p-top-concept__point-title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 1rem;
}

.p-top-concept__point-title-sub {
  display: block;
  font-size: 1.25rem;
}

.p-top-concept__point-text {
  font-size: 1rem;
  line-height: 1.65;
  margin-top: 0.625rem;
}

.p-top-concept__note {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-inline: auto;
  margin-top: 5.1125rem;
}

.p-top-concept__subtitle {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 8.7rem;
}

.p-top-concept__figure {
  display: block;
  margin-top: 2.5rem;
}

.p-top-concept__figure img {
  aspect-ratio: 840/540;
  height: auto;
  margin-inline: auto;
  width: 52.5rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-top-concept__notes {
  color: #000;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-inline: auto;
  margin-top: 1.1625rem;
  text-align: left;
  width: -moz-fit-content;
  width: fit-content;
}

.p-top-concept__notes-item {
  display: flex;
  gap: 0.875rem;
}

.p-top-concept__notes-item + .p-top-concept__notes-item {
  gap: 0.21875rem;
}

.p-top-concept__notes-mark {
  flex-shrink: 0;
}

/* ========================================
  ラインナップ
======================================== */
.p-top-lineup {
  background: linear-gradient(#fff 0 123.6875rem, transparent 123.6875rem);
  overflow-x: clip;
  padding-top: 6.75rem;
  position: relative;
  z-index: 10;
}

.p-top-lineup__deco {
  height: auto;
  max-width: none;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.p-top-lineup__deco--ring {
  left: calc(50% - 36.375rem);
  top: 23.75rem;
  width: 8.625rem;
}

.p-top-lineup__deco--triangles {
  left: calc(50% - 46.521875rem);
  rotate: 54.57deg;
  top: 37.1375rem;
  width: 9.246rem;
}

.p-top-lineup__deco--half {
  left: calc(50% + 31.0625rem);
  top: 16.9375rem;
  width: 10.03375rem;
}

.p-top-lineup__deco--dotcircle {
  left: calc(50% + 34.5625rem);
  top: 16.9375rem;
  width: 14.875rem;
}

.p-top-lineup__head {
  color: #212121;
  position: relative;
  text-align: center;
  z-index: 10;
}

.p-top-lineup__label img {
  height: auto;
  margin-inline: auto;
  width: 7.4375rem;
}

.p-top-lineup__fruits {
  display: flex;
  gap: 1.25rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.p-top-lineup__fruits-item img {
  aspect-ratio: 1/1;
  height: auto;
  width: 3.75rem;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-top-lineup__title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 4.5625rem;
}

.p-top-lineup__intro {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.8;
  margin-top: 3.75rem;
}

.p-top-lineup__items {
  margin-top: 13.5rem;
}

.p-top-lineup__item {
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 44.878125rem 20.375rem;
  color: #212121;
  position: relative;
  scroll-margin-top: 9.75rem;
  z-index: 0;
}
.p-top-lineup__item::before, .p-top-lineup__item::after {
  content: "";
  height: 9.75rem;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: -10;
}
.p-top-lineup__item::before {
  clip-path: polygon(0 92.3077%, 100% 0, 100% 100%, 0 100%);
  top: -9.6875rem;
}
.p-top-lineup__item::after {
  bottom: -9.6875rem;
  clip-path: polygon(0 0, 100% 0, 100% 7.6923%, 0 100%);
}

.p-top-lineup__item + .p-top-lineup__item {
  margin-top: 11.125rem;
}

.p-top-lineup__item--zinc {
  background-color: #d4bced;
  background-image: url("/contents/health/gummy-supplement/assets/images/top/lineup_halftone_zinc.webp");
}
.p-top-lineup__item--zinc::before {
  background-color: #d4bced;
}
.p-top-lineup__item--zinc::after {
  background-color: #cca9f3;
}

.p-top-lineup__item--vc {
  background-color: #fff695;
  background-image: url("/contents/health/gummy-supplement/assets/images/top/lineup_halftone_vc.webp");
}
.p-top-lineup__item--vc::before {
  background-color: #fff695;
}
.p-top-lineup__item--vc::after {
  background-color: #fff04d;
}

.p-top-lineup__item--gaba {
  background-color: #ffd0db;
  background-image: url("/contents/health/gummy-supplement/assets/images/top/lineup_halftone_gaba.webp");
}
.p-top-lineup__item--gaba::before {
  background-color: #ffd0db;
}
.p-top-lineup__item--gaba::after {
  background-color: #ffc4d1;
}

.p-top-lineup__item-inner {
  display: flex;
  margin-inline: auto;
  width: min(83.75rem, 100% - 50px);
}

.p-top-lineup__media {
  container-type: inline-size;
  flex: 0 1 51.9375rem;
  min-width: 0;
  position: relative;
  z-index: 0;
}

.p-top-lineup__model,
.p-top-lineup__copy,
.p-top-lineup__fruit,
.p-top-lineup__package,
.p-top-lineup__gummy,
.p-top-lineup__catch {
  height: auto;
  max-width: none;
  pointer-events: none;
  position: absolute;
}

.p-top-lineup__model {
  aspect-ratio: 539/380;
  left: 0;
  top: 33.9350180505cqw;
  width: 64.861612515cqw;
  z-index: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-top-lineup__copy {
  z-index: 10;
}

.p-top-lineup__fruit {
  left: 42.5992779783cqw;
  top: 6.4981949458cqw;
  width: 30.0842358604cqw;
  z-index: 20;
}

.p-top-lineup__package {
  aspect-ratio: 324/578;
  left: 60.6498194946cqw;
  top: 15.6438026474cqw;
  width: 38.9891696751cqw;
  z-index: 30;
  -o-object-fit: contain;
  filter: drop-shadow(0 0.4813477738cqw 6.0168471721cqw rgba(255, 255, 255, 0.5));
     object-fit: contain;
}

.p-top-lineup__gummy {
  left: 49.0974729242cqw;
  top: 72.6835138387cqw;
  width: 18.0505415162cqw;
  z-index: 40;
}

.p-top-lineup__catch {
  left: 12.6353790614cqw;
  top: 17.2081829122cqw;
  width: 37.6654632972cqw;
  z-index: 50;
}

.p-top-lineup__item--zinc .p-top-lineup__model {
  top: 36.7027677497cqw;
}

.p-top-lineup__item--zinc .p-top-lineup__copy {
  left: 10.2286401925cqw;
  top: 62.8158844765cqw;
  width: 22.9843561974cqw;
}

.p-top-lineup__item--zinc .p-top-lineup__fruit {
  left: 41.6365824308cqw;
  width: 31.2876052948cqw;
}

.p-top-lineup__item--zinc .p-top-lineup__package {
  left: 61.0108303249cqw;
}

.p-top-lineup__item--zinc .p-top-lineup__catch {
  left: 18.0505415162cqw;
}

.p-top-lineup__item--vc .p-top-lineup__copy {
  left: 10.1083032491cqw;
  top: 59.8074608905cqw;
  width: 23.1046931408cqw;
}

.p-top-lineup__item--gaba .p-top-lineup__model {
  top: 34.055354994cqw;
}

.p-top-lineup__item--gaba .p-top-lineup__copy {
  left: 42.8399518652cqw;
  top: 39.3501805054cqw;
  width: 10.4693140794cqw;
}

.p-top-lineup__item--gaba .p-top-lineup__fruit {
  left: 41.7569193742cqw;
}

.p-top-lineup__item--gaba .p-top-lineup__package {
  left: 59.8074608905cqw;
  top: 15.7641395909cqw;
}

.p-top-lineup__item--gaba .p-top-lineup__gummy {
  left: 48.7364620939cqw;
  top: 73.1648616125cqw;
}

.p-top-lineup__item--gaba .p-top-lineup__catch {
  top: 17.3285198556cqw;
}
.p-top-lineup__body {
  flex-shrink: 0;
  margin-left: 1.6875rem;
  padding-bottom: 5.20625rem;
  padding-top: 5.4375rem;
  position: relative;
  width: 24.1875rem;
  z-index: 60;
}

.p-top-lineup__item--vc .p-top-lineup__body {
  padding-bottom: 3rem;
}

.p-top-lineup__item--gaba .p-top-lineup__body {
  margin-left: 1.875rem;
  padding-bottom: 5.25rem;
  padding-top: 5.5rem;
  width: 24rem;
}

.p-top-lineup__lead {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.65;
}

.p-top-lineup__item--zinc .p-top-lineup__lead {
  color: #60236d;
}

.p-top-lineup__item--vc .p-top-lineup__lead {
  color: #e04b1e;
}

.p-top-lineup__item--gaba .p-top-lineup__lead {
  color: #de2c5d;
}

.p-top-lineup__name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 0.5625rem;
}

.p-top-lineup__taste {
  border-radius: 6.25rem;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 1.25rem;
  padding: 0.375rem 1.25rem;
  text-align: center;
  width: 10rem;
}

.p-top-lineup__item--zinc .p-top-lineup__taste {
  background-color: #60236d;
}

.p-top-lineup__item--vc .p-top-lineup__taste {
  background-color: #e04b1e;
}

.p-top-lineup__item--gaba .p-top-lineup__taste {
  background-color: #de2c5d;
}

.p-top-lineup__juice {
  align-items: flex-start;
  display: flex;
  margin-top: 1rem;
}

.p-top-lineup__juice-main {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  white-space: nowrap;
}

.p-top-lineup__juice-sub {
  font-size: 0.8125rem;
}

.p-top-lineup__juice-note {
  display: block;
  font-size: 0.75rem;
  line-height: 1.2;
  padding-left: 1em;
  text-indent: -1em;
  white-space: nowrap;
}

.p-top-lineup__juice-note-mark {
  display: inline-block;
  text-indent: 0;
  width: 1em;
}

.p-top-lineup__text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  margin-top: 1rem;
  width: 24rem;
}

.p-top-lineup__item--vc .p-top-lineup__text {
  width: 24.1875rem;
}

.p-top-lineup__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.9375rem;
}

.p-top-lineup__tag {
  background-color: #fff;
  border: 1px solid currentColor;
  border-radius: 6.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.65;
  padding: 0.375rem 1.25rem;
}

.p-top-lineup__item--zinc .p-top-lineup__tag {
  color: #60236d;
}

.p-top-lineup__item--vc .p-top-lineup__tag {
  color: #e04b1e;
}

.p-top-lineup__item--gaba .p-top-lineup__tag {
  color: #de2c5d;
}

.p-top-lineup__note {
  font-size: 0.75rem;
  line-height: 1.1;
  margin-top: 0.75rem;
}

.p-top-lineup__figure {
  aspect-ratio: 186/141;
  height: auto;
  margin-top: 1rem;
  width: 11.625rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.p-top-lineup__item--vc .p-top-lineup__figure {
  margin-left: 0.5625rem;
}

.p-top-lineup__price {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.65;
  margin-top: 1.25rem;
}

/* ========================================
  よくある質問
======================================== */
.p-top-faq {
  padding-bottom: 7.5rem;
  padding-top: 12.875rem;
  position: relative;
  z-index: 0;
}
.p-top-faq::before {
  background: url("/contents/health/gummy-supplement/assets/images/top/faq_bg.webp") repeat left top/1.28rem 1.28rem;
  content: "";
  inset: 0;
  opacity: 0.8;
  pointer-events: none;
  position: absolute;
  z-index: -10;
}

.p-top-faq__title {
  color: #212121;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.p-top-faq__list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-inline: auto;
  margin-top: 3.75rem;
  max-width: 52.5rem;
}

.p-top-faq__question {
  align-items: center;
  background-color: #fff;
  border: 1px solid #e1037e;
  border-radius: 0.625rem;
  cursor: pointer;
  display: flex;
  gap: 0.625rem;
  list-style: none;
  padding: 0.75rem 1.25rem;
  transition: opacity 0.3s;
}
.p-top-faq__question::-webkit-details-marker {
  display: none;
}
.p-top-faq__question::after {
  background-image: linear-gradient(#e1037e, #e1037e), linear-gradient(#e1037e, #e1037e);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.1875rem 0.1875rem, 0.1875rem 1.1875rem;
  content: "";
  flex-shrink: 0;
  height: 1.1875rem;
  transition: background-size 0.3s;
  width: 1.1875rem;
}
.p-top-faq__question:focus-visible {
  outline: 0.125rem solid #e1037e;
  outline-offset: 0.125rem;
}

.p-top-faq__item[open] .p-top-faq__question {
  border-bottom: none;
  border-radius: 0.625rem 0.625rem 0 0;
}

.p-top-faq__badge {
  align-items: center;
  background-color: #e1037e;
  border-radius: 50%;
  color: #fff;
  display: flex;
  flex-shrink: 0;
  font-family: "Roboto", sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  height: 2.5rem;
  justify-content: center;
  line-height: 1.65;
  width: 2.5rem;
}

.p-top-faq__badge--answer {
  background-color: #fff;
  color: #e1037e;
}

.p-top-faq__question-text {
  color: #494949;
  flex: 1;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.65;
}

.p-top-faq__item[open] .p-top-faq__question::after {
  background-size: 1.1875rem 0.1875rem, 0.1875rem 0;
}

.p-top-faq__answer {
  align-items: flex-start;
  background-color: #fff0f8;
  border: 1px solid #e1037e;
  border-radius: 0 0 0.625rem 0.625rem;
  border-top: none;
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 1.25rem 1.25rem;
}

.p-top-faq__answer-text {
  color: #494949;
  flex: 1;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.65;
}

/* ========================================
  取扱店舗一覧
======================================== */
.p-top-shop {
  color: #212121;
  padding-top: 7.5rem;
}

.p-top-shop__title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.p-top-shop__stores {
  display: flex;
  justify-content: center;
  margin-top: 3.75rem;
}

.p-top-shop__store {
  width: 17.5625rem;
}

.p-top-shop__store + .p-top-shop__store {
  margin-left: -1px;
}

.p-top-shop__store-link {
  background-color: #fff;
  border: 1px solid #a6a6a6;
  color: #000;
  display: block;
  font-size: 1rem;
  font-weight: 500;
  height: 4.375rem;
  line-height: 1.65;
  padding: 1.3125rem 3.25rem 1.3125rem 0.9375rem;
  position: relative;
  transition: opacity 0.3s;
  z-index: 0;
}
.p-top-shop__store-link::after {
  background: url("/contents/health/gummy-supplement/assets/images/common/icon_arrow_circle_gray.svg") no-repeat center/1.125rem 1.125rem;
  content: "";
  height: 1.125rem;
  position: absolute;
  right: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  z-index: 10;
}
.p-top-shop__store-link:focus-visible {
  outline: 0.125rem solid #494949;
  outline-offset: -0.125rem;
}

/* ========================================
  お客様相談室
======================================== */
.p-top-contact {
  color: #212121;
  padding-bottom: 3.125rem;
  padding-top: 3.75rem;
}

.p-top-contact__box {
  background-color: #fff;
  border-radius: 1.25rem;
  margin-inline: auto;
  max-width: 52.5rem;
  padding-bottom: 3.75rem;
  padding-top: 3.75rem;
  text-align: center;
}

.p-top-contact__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
}

.p-top-contact__text {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.65;
  margin-top: 1.25rem;
}

.p-top-contact__tel {
  font-family: "Roboto", sans-serif;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.25;
  margin-top: 1.875rem;
}

.p-top-contact__tel-link:focus-visible {
  outline: 0.125rem solid #212121;
  outline-offset: 0.125rem;
}

.p-top-contact__info {
  border-top: 1px solid #c5c5c5;
  margin-inline: auto;
  margin-top: 1.875rem;
  padding-top: 1.875rem;
  width: 43.625rem;
}

.p-top-contact__free {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.65;
}

.p-top-contact__hours {
  font-size: 1.125rem;
  line-height: 1.65;
  margin-top: 0.625rem;
}

.p-top-contact__note {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 1.25rem;
  white-space: nowrap;
}

/* ========================================
  グミの揺れ（swing）
  ポップに見せるため、オーバーシュートするイージングで少しカクっと揺らす。
  揺れ幅・周期・開始タイミングを3パターンに分けてランダムに見せる
  先方FB（2026/10）で「動きが分かりにくい」とのことで振れ幅を約1.8倍に拡大
======================================== */
@keyframes swing-1 {
  20% {
    transform: rotate(18deg);
  }
  40% {
    transform: rotate(-13deg);
  }
  60% {
    transform: rotate(7deg);
  }
  80% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes swing-2 {
  20% {
    transform: rotate(-15deg);
  }
  40% {
    transform: rotate(11deg);
  }
  60% {
    transform: rotate(-6deg);
  }
  80% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes swing-3 {
  20% {
    transform: rotate(21deg);
  }
  40% {
    transform: rotate(-16deg);
  }
  60% {
    transform: rotate(9deg);
  }
  80% {
    transform: rotate(-4deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.u-swing {
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.u-swing--1 {
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: swing-1;
}

.u-swing--2 {
  animation-delay: -1.3s;
  animation-duration: 3.6s;
  animation-name: swing-2;
}

.u-swing--3 {
  animation-delay: -0.7s;
  animation-duration: 2.6s;
  animation-name: swing-3;
}

/* ========================================
  幾何学模様のふわふわ（上下＋わずかな回転）
======================================== */
@keyframes fuwa-1 {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }
  50% {
    transform: translate(0, -7px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}
@keyframes fuwa-2 {
  0% {
    transform: translate(0, 0) rotate(4deg);
  }
  50% {
    transform: translate(0, -10px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(-4deg);
  }
}
@keyframes fuwa-3 {
  0% {
    transform: translate(0, -3px) rotate(-5deg);
  }
  50% {
    transform: translate(0, 5px) rotate(0deg);
  }
  100% {
    transform: translate(0, -3px) rotate(5deg);
  }
}
.u-fuwa {
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.u-fuwa--1 {
  animation-delay: 0s;
  animation-duration: 3s;
  animation-name: fuwa-1;
}

.u-fuwa--2 {
  animation-delay: -1.5s;
  animation-duration: 4s;
  animation-name: fuwa-2;
}

.u-fuwa--3 {
  animation-delay: -2.5s;
  animation-duration: 5s;
  animation-name: fuwa-3;
}

/* ========================================
  文字のふんわり出現（JS で .is-inview を付与）
  JS が動かない環境では隠さない（html.is-js のときだけ初期非表示）
  動きを減らす設定（prefers-reduced-motion）の環境ではすべて止める
======================================== */
.is-js .js-fadein {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.is-js .js-fadein.is-inview {
  opacity: 1;
  transform: none;
}

/* ========================================
  見出しのフルーツのぽよん（JS で .is-inview を付与）
  画面に入ったときに1回だけ、くるっと回りながら弾ませる。3つを少しずつずらす
======================================== */
@keyframes fruit-pop {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  30% {
    transform: translateY(-1.125rem) rotate(-20deg) scale(1.15);
  }
  55% {
    transform: translateY(0) rotate(15deg) scale(0.92, 1.06);
  }
  75% {
    transform: translateY(-0.375rem) rotate(-6deg) scale(1.03);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}
.js-fruit-pop.is-inview > li {
  animation: fruit-pop 0.9s ease-out both;
}

.js-fruit-pop.is-inview > li:nth-child(2) {
  animation-delay: 0.15s;
}

.js-fruit-pop.is-inview > li:nth-child(3) {
  animation-delay: 0.3s;
}

/* ========================================
  ページ内リンクボタン（下矢印）
======================================== */
.c-button-down {
  align-items: center;
  background-color: #fff;
  border: 0.125rem solid currentColor;
  border-radius: 6.25rem;
  display: flex;
  filter: drop-shadow(0.375rem 0.375rem 0 rgba(0, 0, 0, 0.25));
  font-size: 1.125rem;
  font-weight: 700;
  gap: 0.3125rem;
  justify-content: center;
  line-height: 1.65;
  margin-inline: auto;
  padding: 0.9375rem 2.5rem;
  transition: transform 0.3s ease-out;
  width: -moz-fit-content;
  width: fit-content;
}
.c-button-down::after {
  background-color: currentColor;
  content: "";
  flex-shrink: 0;
  height: 1.5rem;
  width: 1.0625rem;
  -webkit-mask: url("/contents/health/gummy-supplement/assets/images/common/icon_arrow_down.svg") no-repeat center/contain;
          mask: url("/contents/health/gummy-supplement/assets/images/common/icon_arrow_down.svg") no-repeat center/contain;
}
.c-button-down:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.25rem;
}

.c-button-down--grape {
  color: #60236d;
}

.c-button-down--lemon {
  color: #e04b1e;
}

.c-button-down--peach {
  color: #de2c5d;
}

/* ========================================
  店舗一覧ボタン
======================================== */
.c-button-shop {
  align-items: center;
  background-color: #0058aa;
  border: 0.125rem solid #0058aa;
  border-radius: 0.3125rem;
  color: #fff;
  display: flex;
  font-size: 1.5rem;
  font-weight: 500;
  gap: 0.625rem;
  justify-content: center;
  line-height: 1.4;
  min-height: 5rem;
  padding: 0.625rem;
  transition: opacity 0.3s;
}
.c-button-shop::after {
  background: url("/contents/health/gummy-supplement/assets/images/common/icon_arrow_circle_white.svg") no-repeat center/1.875rem 1.875rem;
  content: "";
  flex-shrink: 0;
  height: 1.875rem;
  width: 1.875rem;
}
.c-button-shop:focus-visible {
  outline: 0.125rem solid #0058aa;
  outline-offset: 0.125rem;
}

.c-button-shop--outline {
  background-color: #fff;
  color: #0058aa;
}
.c-button-shop--outline::after {
  background-image: url("/contents/health/gummy-supplement/assets/images/common/icon_arrow_circle_blue.svg");
}

.c-button-shop__text {
  text-align: center;
  width: 47rem;
}

/* ========================================
  フッター
======================================== */
.l-footer {
  background-color: #fefcf1;
  color: #212121;
  padding-bottom: 3.75rem;
}

.l-footer__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-inline: auto;
  max-width: calc(52.5rem + 50px);
  padding-inline: 25px;
}

.l-footer__brand {
  align-items: center;
  display: flex;
  gap: 1.75rem;
}

.l-footer__logo img {
  aspect-ratio: 131/60;
  height: auto;
  width: 8.1875rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.l-footer__name {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
}

.l-footer__address {
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.8;
  margin-top: 1.25rem;
}

.l-footer__sns {
  display: flex;
  gap: 1.25rem;
}

.l-footer__sns-link {
  border-radius: 50%;
  display: block;
  height: 4rem;
  overflow: hidden;
  transition: opacity 0.3s;
  width: 4rem;
}
.l-footer__sns-link img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.l-footer__sns-link:focus-visible {
  outline: 0.125rem solid #212121;
  outline-offset: 0.125rem;
}

.l-footer__sns-link--note {
  background-color: #fff;
  border: 1px solid #c4c4c4;
}

.l-footer__copyright {
  color: #979797;
  font-size: 0.875rem;
  line-height: 1.6;
  margin-top: 3.75rem;
  text-align: center;
  width: 100%;
}
.l-footer__copyright small {
  font-size: inherit;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 1190px;
  padding-left: 25px;
  padding-right: 25px;
  width: 100%;
}

/* ========================================
  文字詰め（Figma の字間調整を再現）
======================================== */
.u-ls-n100 {
  letter-spacing: -0.1em;
}

.u-ls-n200 {
  letter-spacing: -0.2em;
}

.u-ls-n300 {
  letter-spacing: -0.3em;
}

.u-ls-n600 {
  letter-spacing: -0.6em;
}

/* ========================================
  上付き文字（Figma の OpenType SUPS を再現）
  ※ Google Fonts 版 Noto Sans JP は sups 字形を持たないため、
    Figma の上付き字形と同じ縮小率（0.645）で組む
======================================== */
.u-sups {
  font-size: 0.645em;
  line-height: 1;
  vertical-align: 0.6em;
}

/* ========================================
  ビューポート別の改行
======================================== */
.u-br-sp {
  display: none;
}
@media (max-width: 1140px){
  html {
    font-size: 1.4035087719vw;
  }
}
@media (any-hover: hover){
  .p-top-faq__question:hover {
    opacity: 0.7;
  }
  .p-top-shop__store-link:hover {
    opacity: 0.7;
  }
  .c-button-down:hover {
    transform: translateY(0.625rem);
  }
  .c-button-shop:hover {
    opacity: 0.7;
  }
  .l-footer__sns-link:hover {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce){
  .u-swing {
    animation: none;
  }
  .u-fuwa {
    animation: none;
  }
  .is-js .js-fadein {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-fruit-pop.is-inview > li {
    animation: none;
  }
}