/* =========================================================
   Oripaone Beginner Guide LP
   - Desktop reference: 1440px (content max-width 1120px, side pad 160px)
   - Mobile  reference:  393px (content side pad 24px)
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
    --color-main-100: #F3BE21;
    --color-main-70: #F7D264;
    --color-main-40: #FAE5A6;
    --color-main-30: #FBEBBC;
    --color-main-15: #FDF5DE;
    --color-main-10: #FEF8E9;
    --color-point-green: #25AF61;
    --color-white: #FFFFFF;
    --color-light-gray: #E4E8ED;
    --color-gray: #BDC0C5;
    --color-mid-gray: #86888A;
    --color-dark-gray: #6D6D6D;
    --color-black: #282828;
    --color-red: #FF3B30;
    --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-card-deep: 0 4px 16px rgba(0, 0, 0, 0.08);

    --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-num: "Inter", "Noto Sans JP", sans-serif;

    --container-max: 1120px;
    --container-pad-pc: 160px;
}

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

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-jp);
    font-weight: 500;
    line-height: 1.6;
    font-feature-settings: "palt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-weight: 800;
    line-height: 1.2;
}

a {
    color: inherit;
    text-decoration: none;
}

small {
    font-size: 0.85em;
}

/* ---------- Layout helpers ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
}

.section {
    position: relative;
    padding: 120px var(--container-pad-pc);
    overflow: hidden;
}

.section__head {
    text-align: center;
    margin-bottom: 64px;
}

.section__title {
    position: relative;
    display: inline-flex;
    align-items: center;
    /* Fluidly scale between the mobile (28px) and PC (48px) reference sizes
       so the title never collides with surrounding character art. */
    font-size: clamp(26px, 3.4vw, 48px);
    font-weight: 800;
    color: var(--color-black);
    line-height: 1;
}

.section__title--quoted {
    padding: 0 clamp(36px, 4.4vw, 64px);
}

.section__title--white {
    color: #282828;
}

.section__quote {
    position: absolute;
    height: clamp(22px, 2.2vw, 32px);
    display: block;
}

.section__quote--open {
    left: 0;
    top: -8px;
    width: clamp(32px, 3.4vw, 48px);
}

.section__quote--close {
    right: 0;
    top: clamp(14px, 1.7vw, 24px);
    width: clamp(30px, 3.2vw, 46px);
}

.section__lead {
    margin-top: clamp(20px, 2.8vw, 40px);
    font-size: clamp(14px, 1.55vw, 20px);
    font-weight: 500;
    line-height: 2;
    color: var(--color-black);
}

.section__lead--center {
    text-align: center;
}

/* Reasons section: desktop is left-aligned, mobile centers (handled in media query).
   The character group on the right is absolutely positioned over this area, so
   reserve a fluid right-side gutter that always matches `.reasons-chars`
   width plus a 16px safety buffer — this guarantees the title and lead never
   get clipped by the artwork at any intermediate viewport width. */
.section__head--reasons {
    text-align: left;
    padding-right: clamp(296px, calc(30vw + 16px), 420px);
}

.section__lead--reasons {
    text-align: left;
    font-weight: 600;
    line-height: 1.2;
}

.section__lead-break {
    display: none;
}

.section__title-break {
    display: none;
}

/* =========================================================
   Header
   ========================================================= */
.site-header {
    width: 100%;
    line-height: 0;
}

.site-header__img {
    width: 100%;
    height: auto;
    display: block;
}

/* =========================================================
   Section 1: Hero / Guide intro
   ========================================================= */
.section--hero {
    background-color: var(--color-white);
    padding-top: 120px;
    padding-bottom: 120px;
}

.section__bg-dots {
    position: absolute;
    inset: 0;
    background-image: url("../images/bg-dots-2.svg");
    background-repeat: no-repeat;
    /* Figma PC reference (node 13731:50049 — 1440 × 1022 hero):
       Pattern Group 10963 is 1888.5 × 1534.27 px positioned at (-271.12, -303.36)
       so the corner diamond clusters peek in from each edge. */
    background-position: -271.12px -303.36px;
    background-size: 1888.5px 1534.27px;
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.hero {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

.hero__text {
    flex: 0 0 auto;
    width: 480px;
}

.hero__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.hero__title-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-main-100);
    padding: 8px;
    color: var(--color-black);
    font-size: clamp(36px, 4.5vw, 56px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.hero__title-line--sm {
    font-size: clamp(28px, 3.8vw, 48px);
}

.hero__title-text {
    display: inline-block;
}

.hero__title-icon {
    width: clamp(44px, 4.8vw, 64px);
    height: clamp(44px, 4.8vw, 64px);
    flex-shrink: 0;
}

.hero__subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: clamp(20px, 2.4vw, 32px);
    font-weight: 600;
    color: var(--color-black);
    line-height: 1;
}

.hero__subtitle-line {
    display: inline-block;
    width: clamp(40px, 4.2vw, 56px);
    height: 2px;
    background-color: var(--color-black);
    flex-shrink: 0;
}

.hero__lead {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.8vw, 24px);
    font-size: clamp(14px, 1.55vw, 20px);
    font-weight: 600;
    color: var(--color-black);
    line-height: 1;
}

.hero__highlight {
    position: relative;
    display: inline-block;
    padding: 0;
    line-height: 1;
    color: var(--color-black);
}

.hero__highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/highlight-line.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    z-index: 0;
    pointer-events: none;
}

.hero__highlight-text {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 5px 4px;
    font-weight: 600;
    line-height: 1;
}

/* ---- phone slider ---- */
.hero__phone-wrap {
    flex: 0 0 auto;
    width: 320px;
}

.phone-slider {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: 320px;
}

.phone-slider__frame {
    flex-shrink: 0;
    width: 320px;
    height: 694px;
    background-color: var(--color-white);
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}

.phone-slider__media {
    position: relative;
    width: 100%;
    height: 100%;
}

.phone-slider__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #000;
}

.phone-slider__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
}

.phone-slider.is-playing .phone-slider__overlay {
    opacity: 0;
}

.phone-slider:hover.is-playing .phone-slider__overlay {
    opacity: 1;
}

.phone-slider__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.18);
    border: 2.5px solid #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, opacity 0.25s ease;
    opacity: 1;
    cursor: pointer;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.phone-slider.is-playing .phone-slider__play {
    opacity: 0;
}

.phone-slider:hover.is-playing .phone-slider__play {
    opacity: 1;
}

.phone-slider__play:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

.phone-slider__icon-play,
.phone-slider__icon-pause {
    width: 36px;
    height: 40px;
}

.phone-slider__icon-play {
    margin-left: 6px;
    display: block;
}

.phone-slider__icon-pause {
    margin-left: 0;
    display: none;
}

.phone-slider.is-playing .phone-slider__icon-play {
    display: none;
}

.phone-slider.is-playing .phone-slider__icon-pause {
    display: block;
}

/* --- Unsupported fallback (端末側で動画が再生できない場合) -------------
   現在の動画は H.264 Level 6.0 でエンコードされており iOS Safari/Chrome は
   再生不可。互換版が R2 にアップロードされるまでの間、ポスター画像を
   そのまま見せ、再生ボタンを無効化する。 */
.phone-slider.is-unsupported .phone-slider__overlay {
    background-color: rgba(0, 0, 0, 0);
}

.phone-slider.is-unsupported .phone-slider__play {
    cursor: not-allowed;
    background-color: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
}

.phone-slider.is-unsupported .phone-slider__icon-play,
.phone-slider.is-unsupported .phone-slider__icon-pause {
    display: none;
}

.phone-slider.is-unsupported .phone-slider__play::before {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    position: relative;
}

.phone-slider.is-unsupported .phone-slider__play::after {
    content: '';
    position: absolute;
    width: 44px;
    height: 2.5px;
    background-color: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
}

/* Controls row (prev | dots | next) sits below the phone frame */
.phone-slider__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
}

.phone-slider__nav {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: transparent;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.phone-slider__nav img {
    width: 64px;
    height: 64px;
    display: block;
}

.phone-slider__nav:hover {
    opacity: 0.85;
    transform: scale(1.04);
}

.phone-slider__nav:active {
    transform: scale(0.98);
}

.phone-slider__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phone-slider__dot {
    width: 16px;
    height: 16px;
    border-radius: 10px;
    background-color: var(--color-gray);
    transition: background-color 0.2s ease, transform 0.2s ease;
    padding: 0;
}

.phone-slider__dot:hover {
    transform: scale(1.15);
}

.phone-slider__dot.is-active {
    background-color: var(--color-main-100);
}

/* =========================================================
   Section 2: What is Oripaone (yellow)
   ========================================================= */
.section--what {
    background-color: var(--color-main-100);
    color: var(--color-black);
    padding-top: 120px;
    padding-bottom: 120px;
}

/* Characters absolute positions match Figma 1440px frame.
   z-index needs to sit ABOVE `.section--what .container` (z-index: 3)
   so the characters render on top of the POINT cards instead of being
   clipped behind them — matches the Figma SP reference. */
.section--what__char-left,
.section--what__char-right {
    position: absolute;
    z-index: 4;
    pointer-events: none;
    top: 128px;
}

/* Anchor characters to the centred content area (max-width 1120px + 160px
   padding) so positions stay natural at any PC viewport width. The base
   Figma frame is 1440px, so:
   - niki at section.x=215 → container left + 55px → calc(50vw - 505px)
   - onna right edge: container right + 55px past it (左右55pxで対称配置)
     → right: calc(50vw - 615px)
   At 1440px viewport these resolve to 215px / 105px values. */
.section--what__char-left {
    left: calc(50% - 475px);
    width: clamp(120px, 13vw, 185px);
    height: auto;
    aspect-ratio: 185 / 260;
    object-fit: contain;
    object-position: top left;
}

.section--what__char-right {
    right: calc(50% - 515px);
    width: clamp(160px, 18vw, 260px);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: top right;
    transform: scaleX(-1);
    /* ワン娘は POINT カード（.container の z-index: 3）の背面に回す */
    z-index: 2;
}

.section--what .container {
    position: relative;
    z-index: 3;
}

.section--what .section__head {
    max-width: 720px;
    margin: 0;
    text-align: center;
    flex-shrink: 0;
}

.section--what .section__title {
    white-space: nowrap;
}

.section--what .section__lead {
    font-weight: 500;
    margin-top: 40px;
}

.section--what__top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    margin-bottom: -40px;
}

.section--what__mock {
    width: 360px;
    height: auto;
    flex-shrink: 0;
}
/* Point cards */
.point-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
}

.point-card {
    position: relative;
    background-color: var(--color-white);
    border-radius: 16px;
    padding: 24px 12px;
    text-align: center;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    overflow: visible;
}

.point-card__badge {
    position: absolute;
    top: -16px;
    left: 16px;
    width: 76px;
    height: 95px;
    background-image: url("../images/point-badge.svg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 14px;
    color: var(--color-white);
    text-align: center;
    pointer-events: none;
    z-index: 2;
}

.point-card__badge-label {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    line-height: 1;
}

.point-card__badge-num {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 30px;
    line-height: 0.85;
}

.point-card__visual {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.point-card__visual img,
.point-card__visual svg {
    width: 140px;
    height: 140px;
    object-fit: contain;
}

.point-card__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.point-card__title {
    font-size: clamp(16px, 1.7vw, 20px);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-black);
}

.point-card__text {
    font-size: clamp(13px, 1.2vw, 14px);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-black);
}

/* =========================================================
   Section 3: Voices grid (white)
   ========================================================= */
.section--voices {
    background-color: var(--color-white);
    padding-top: 120px;
    padding-bottom: 120px;
}

.voices-wrap {
    position: relative;
}

.voices-note {
    margin-top: 24px;
    padding-right: 260px;
    color: var(--color-dark-gray);
    font-family: var(--font-jp);
    font-size: 14px;
    line-height: 1.4;
}

/* Fixed-grid showcase: up to 4 cards laid out in a single row on PC
   (4 columns × 1 row) and a 2-column × 2-row grid on mobile.
   No internal scrolling — the page itself is the only scroll container. */
.voice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 12px;
}

.voice-card {
    background-color: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
}

.voice-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-height: 100%;
    color: inherit;
    text-decoration: none;
}

.voice-card__link:focus-visible {
    outline: 2px solid var(--color-main-100);
    outline-offset: 2px;
}

.voice-card--empty {
    grid-column: 1 / -1;
    padding: 24px;
    text-align: center;
}

.voice-grid.is-loading .voice-card--skeleton {
    pointer-events: none;
}

.voice-card--skeleton .voice-card__img,
.voice-card--skeleton .voice-card__avatar,
.voice-card--skeleton .voice-card__name,
.voice-card--skeleton .voice-card__text,
.voice-card--skeleton .voice-card__date {
    background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
    background-size: 200% 100%;
    animation: voice-skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 4px;
    color: transparent;
}

.voice-card--skeleton .voice-card__img {
    aspect-ratio: 271 / 207;
}

.voice-card--skeleton .voice-card__avatar {
    width: 24px;
    height: 24px;
    border-radius: 200px;
}

.voice-card--skeleton .voice-card__name {
    flex: 1;
    height: 14px;
}

.voice-card--skeleton .voice-card__text {
    height: 56px;
}

.voice-card--skeleton .voice-card__date {
    width: 64px;
    height: 10px;
    margin-left: auto;
}

.voice-card--skeleton img {
    visibility: hidden;
}

@keyframes voice-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.voice-card__img {
    width: 100%;
    aspect-ratio: 271 / 207;
    overflow: hidden;
}

.voice-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.voice-card__body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.voice-card__user {
    display: flex;
    align-items: center;
    gap: 8px;
}

.voice-card__avatar {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 200px;
    overflow: hidden;
}

.voice-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.voice-card__name {
    font-size: 14px;
    color: #000;
    font-weight: 400;
    line-height: 1;
}

.voice-card__text {
    font-size: 14px;
    line-height: 1.4;
    color: #000;
    font-weight: 500;
    flex-grow: 1;
}

.voice-card__date {
    font-size: 10px;
    color: #575757;
    font-weight: 500;
    text-align: right;
    margin-top: auto;
}

.voices-badge {
    position: absolute;
    right: -20px;
    bottom: -72px;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.voices-badge__star {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.voices-badge__text {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--color-white);
    font-weight: 800;
}

.voices-badge__label {
    display: block;
    font-size: 18px;
    margin-bottom: 4px;
    font-family: var(--font-jp);
    font-weight: 800;
}

.voices-badge__num {
    display: block;
    font-size: 56px;
    line-height: 1;
    font-family: var(--font-num);
    font-weight: 800;
}

.voices-badge__unit {
    font-size: 16px;
    font-family: var(--font-jp);
    margin-left: 2px;
    font-weight: 800;
}

/* =========================================================
   Section 4: 3 Steps (cream)
   ========================================================= */
.section--steps {
    background-color: var(--color-main-10);
    padding-top: 120px;
    padding-bottom: 120px;
}

.section--steps .section__head {
    margin-bottom: 104px;
}

.step-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
}

.step-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    /* The number badge scales relative to this column width so it keeps
       the Figma proportion (80px badge ÷ ~373px column ≈ 21.4%) at any
       intermediate viewport width. */
    container-type: inline-size;
}

.step-card__num {
    position: absolute;
    /* Fluid badge: tracks the column width via container-query units so the
       1/2/3 circles never look oversized when the phone mock shrinks at
       768–1440px viewports. Caps at the Figma reference of 80px / 40px. */
    top: clamp(-40px, -10.7cqi, -24px);
    left: 50%;
    transform: translateX(-50%);
    width: clamp(44px, 21.4cqi, 80px);
    height: clamp(44px, 21.4cqi, 80px);
    border-radius: 50%;
    background-color: var(--color-main-100);
    color: var(--color-white);
    font-family: var(--font-num);
    font-weight: 700;
    font-size: clamp(24px, 10.7cqi, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.step-card__phone {
    /* step1/2/3-phone.png には既にスマホ枠（角丸＋薄グレーの縁）が
       描画されているため、コンテナ側で background / border / border-radius は
       付けない。3 画像とも実寸 976 × 2020 で揃っているのでコンテナにも
       同じアスペクト比を固定し、3 カードの高さを統一する。 */
    aspect-ratio: 976 / 2020;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
}

.step-card__phone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top;
}

/* All three step phones use a single Figma composite screenshot rendered to
   match the design 1:1 (Figma nodes 13731:50313 / 50321 / 50333). The base
   `.step-card__phone img` rule above already fills the frame with cover. */

.step-card__body {
    text-align: center;
    color: var(--color-black);
    width: 100%;
}

.step-card__title {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: clamp(10px, 1.2vw, 16px);
}

.step-card__text {
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.4;
    font-weight: 500;
}

/* =========================================================
   Section 5: Reasons (yellow)
   ========================================================= */
.section--reasons {
    background-color: var(--color-main-100);
    color: var(--color-black);
    padding-top: 120px;
    padding-bottom: 120px;
}

.section--reasons::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/bg-decoration.svg");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;
    pointer-events: none;
    z-index: 1;
}

.section--reasons .container {
    position: relative;
    z-index: 2;
}

.section--reasons .section__head {
    margin-bottom: 60px;
}

/* Figma reasons character group at x=876, y=31.89, w=404, h=267 in 1440 frame.
   The group fluidly scales between ~280px and 404px so it never crowds the
   adjacent title/lead at intermediate viewport widths. Children use % units
   relative to this group so the layout remains intact at any size. */
.reasons-chars {
    position: absolute;
    top: clamp(-88px, -6.1vw, -56px);
    right: 0;
    width: clamp(280px, 30vw, 404px);
    aspect-ratio: 404 / 268;
    height: auto;
    z-index: 3;
    pointer-events: none;
}

.reason-char {
    position: absolute;
    margin: 0;
    /* 各キャラ figure 内で独立した重ね順を作り、figcaption の破線アンダーラインが
       同じ figure 内のキャラ画像より必ず背面に来るようにする。これがないと
       2 つの .reason-char がまたがる stacking context で z-index 比較が
       行われ、HTML 順序の影響でラベルが画像の前に出てしまう。 */
    isolation: isolate;
}

.reason-char img {
    display: block;
    position: relative;
    z-index: 2;
}

/* Callout label: text with a horizontal dashed line that extends from the label
   toward the character. The dashed line passes BEHIND the character so the
   figcaption sits at z-index 1 while the character image is at z-index 2.
   Use em units for padding so the tail scales with the label font-size. */
.reason-char figcaption {
    position: absolute;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 0 0 4px;
    border-bottom: 1px dashed var(--color-black);
    color: var(--color-black);
    line-height: 1;
    background-color: transparent;
    white-space: nowrap;
}

.reason-char__label {
    display: inline-block;
    font-size: clamp(14px, 1.5vw, 20px);
    font-weight: 700;
}

/* ワン娘 character: 260/404 = 64.36% wide, sits at the left of the group.
   Label box drops ~15% of the figure height (40 / 260) with the dashed tail
   extending into the character. */
.reason-char--onna {
    left: 0;
    top: 0;
    width: 64.36%;
}

.reason-char--onna img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
}

.reason-char--onna figcaption {
    left: 0;
    top: 15.4%;
    padding-right: 2em;
}

/* ワンニキ character: 184/404 = 45.54% wide, offset 164/404 = 40.59% from left.
   The label sits at 120/184 = 65.2% from the niki figure's left and 160/260
   = 61.5% down the figure. */
.reason-char--niki {
    left: 40.59%;
    top: 2.6%;
    width: 45.54%;
}

.reason-char--niki img {
    width: 100%;
    height: auto;
    aspect-ratio: 184 / 260;
    object-fit: contain;
}

.reason-char--niki figcaption {
    left: 65.2%;
    top: 61.5%;
    padding-left: 2em;
}

.reasons-wrap {
    position: relative;
}

.reason-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    row-gap: 20px;
    width: 100%;
}

.reason-card {
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 155px;
}

.reason-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
}

.reason-card__num {
    position: relative;
    width: 40px;
    height: 40px;
    background-image: url("../images/shield-icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-num);
    font-weight: 700;
    color: var(--color-white);
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.reason-card__num span {
    display: block;
    line-height: 1;
    transform: translate(-0.02em);
}

.reason-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(44px, 5vw, 64px);
    height: clamp(44px, 5vw, 64px);
    flex-shrink: 0;
}

/* Truck icon is horizontally wider in Figma (109×64) */
.reason-card__icon--truck {
    width: clamp(75px, 8.5vw, 109px);
}

.reason-card__icon img,
.reason-card__icon svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.reason-card__text {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--color-black);
}

.reason-card__text small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 400;
}

/* =========================================================
   Section 6: First pack
   ========================================================= */
.section--first-pack {
    background-color: var(--color-main-10);
    padding-top: 120px;
    padding-bottom: 80px;
}

.section--first-pack__char-left,
.section--first-pack__char-right {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: 172px;
}

/* Anchor characters to the centred content area so they scale gracefully:
   - niki-moeru at section.x=160 sits flush with the container left edge
     (50vw - 560px).
   - banzai-b right edge at section.x=1290 sits 10px past the container
     right edge (50vw + 570px) → right: calc(50vw - 570px).
   At 1440px viewport these resolve to the original 160px / 150px values. */
.section--first-pack__char-left {
    left: calc(50% - 560px);
    width: clamp(110px, 12vw, 171px);
    height: auto;
    aspect-ratio: 171 / 212;
    object-fit: contain;
    object-position: top left;
}

.section--first-pack__char-right {
    right: calc(50% - 570px);
    width: clamp(140px, 15.3vw, 220px);
    height: auto;
    aspect-ratio: 220 / 212;
    object-fit: contain;
    object-position: top right;
}

.section--first-pack .container {
    position: relative;
    z-index: 2;
}

.section--first-pack .section__head {
    margin-bottom: 40px;
}

.first-pack__sub {
    margin-top: 40px;
    text-align: center;
    color: var(--color-black);
}

.first-pack__sub-title {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: clamp(14px, 1.7vw, 24px);
}

.first-pack__sub-text {
    font-size: clamp(14px, 1.4vw, 18px);
    font-weight: 500;
    line-height: 2;
}

.first-pack__title-br,
.first-pack__sub-text-br {
    display: none;
}

/* Horizontal pack strip.
   - PC (≥1200px): driven by Embla Carousel with `align: 'center'` +
     `loop: true`, so the strip always frames a 5-pack symmetric bleed
     and snaps to slide centres on drag/wheel release. Native overflow
     scrolling is disabled (`overflow: hidden`) — Embla animates via
     transform on the container instead.
   - Mobile (≤1199px): the strip switches to a vertical stack (see
     the @media block lower in this file) per the Figma reference. */
.pack-strip {
    width: auto;
    margin-inline: calc(var(--container-pad-pc) * -1);
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    margin-top: 24px;
    scroll-snap-type: none;
    scroll-padding-inline: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.pack-strip::-webkit-scrollbar {
    display: none;
}

.pack-strip.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.pack-strip.is-dragging .pack-strip__link {
    pointer-events: none;
}

.pack-strip.is-dragging img {
    pointer-events: none;
    -webkit-user-drag: none;
}

.pack-strip__list {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    padding-inline: 0;
}

.pack-strip__item {
    flex-shrink: 0;
    width: 372px;
    height: 244px;
    /* Use per-slide margins instead of flex `gap`.
       Embla's `loop: true` moves wrap-around slides by transforming
       the slide itself, which does NOT carry the parent's flex gap
       with it — so the visual gap collapses at the wrap boundary
       (the join between the last and first slide).  Margins, on the
       other hand, are part of each slide's own box and survive any
       transform, so the 16px separation stays consistent everywhere
       (8px on each side × 2 adjacent slides = 16px). */
    margin-inline: 8px;
}

.pack-strip__link {
    display: block;
    width: 100%;
    height: 100%;
}

.pack-strip__link:focus-visible {
    outline: 2px solid var(--color-main-100);
    outline-offset: 2px;
    border-radius: 4px;
}

.pack-strip__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: var(--shadow-card);
    display: block;
}

.pack-strip__list.is-loading .pack-strip__item--skeleton {
    background: linear-gradient(90deg, #ececec 25%, #f5f5f5 50%, #ececec 75%);
    background-size: 200% 100%;
    animation: voice-skeleton-shimmer 1.2s ease-in-out infinite;
    border-radius: 4px;
    box-shadow: var(--shadow-card);
}

/* Empty / error state — the list only contains a single message item, so
   we override the default `width: max-content; flex-start;` layout and
   center it within the container instead of pinning it to the left edge. */
.pack-strip__list.is-empty {
    width: 100%;
    justify-content: center;
}

.pack-strip__item--empty {
    flex-shrink: 0;
    width: auto;
    min-width: 280px;
    height: auto;
    padding: 24px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #575757;
    text-align: center;
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
    background-color: #2E2E2E;
    color: var(--color-white);
    padding: 40px var(--container-pad-pc);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.site-footer__logo {
    width: 189px;
    height: 32px;
}

.site-footer__copy {
    font-family: var(--font-num);
    font-size: 12px;
    color: var(--color-white);
    text-align: center;
    line-height: 1;
}

/* =========================================================
   Responsive (Tablet)
   ========================================================= */
@media (max-width: 1199px) {
    :root {
        --container-pad-pc: 60px;
    }

    .section {
        padding-left: 60px;
        padding-right: 60px;
    }

    .hero {
        gap: 40px;
    }

    /* Snap characters to the section gutter at tablet widths.
       Their sizes are already fluid via clamp() in the base rules. */
    .section--what__char-left {
        left: 60px;
    }

    .section--what__char-right {
        right: -60px;
    }

    .section--first-pack__char-left {
        left: 40px;
    }

    .section--first-pack__char-right {
        right: 40px;
    }
}

/* =========================================================
   Responsive (Mobile, 393px base)
   ========================================================= */
@media (max-width: 768px) {
    .section {
        padding: 80px 24px 80px;
    }

    .section__head {
        margin-bottom: 40px;
    }

    .section__title {
        font-size: 24px;
        padding: 0 28px;
        letter-spacing: 0.04em;
        line-height: 1.2;
    }

    /* Quote-decorated titles reserve enough horizontal padding for the
       quote glyph (30px) plus an 8px breathing gap so the SVG never
       collides with the title text on narrow viewports. */
    .section__title--quoted {
        padding: 0 38px;
    }

    .section__quote {
        height: 20px;
    }

    .section__quote--open {
        top: -6px;
        width: 30px;
    }

    .section__quote--close {
        top: 14px;
        width: 29px;
    }

    .section__lead {
        margin-top: 24px;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 600;
    }

    /* ---- Hero ---- */
    .section--hero {
        padding: 40px 24px 80px;
    }

    /* Figma SP reference (node 13731:49625 — 393-wide hero, pattern node 13731:49628):
       Pattern Group 10963 is 1015.76 × 1425.71 px positioned at (-275.06, -253.59).
       The SP pattern bunches diamonds in the top-left and bottom-right, so the
       arrangement differs from PC and needs its own SVG. */
    .section__bg-dots {
        background-image: url("../images/bg-dots-2-sp.svg");
        background-position: -275.06px -253.59px;
        background-size: 1015.76px 1425.71px;
    }

    .hero {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }

    .hero__text {
        width: 100%;
    }

    .hero__title {
        gap: 12px;
        margin-bottom: 16px;
    }

    .hero__title-line {
        font-size: 32px;
    }

    .hero__title-line--sm {
        font-size: 24px;
    }

    .hero__title-icon {
        width: 32px;
        height: 32px;
    }

    .hero__subtitle {
        gap: 8px;
        margin-bottom: 16px;
        font-size: 18px;
    }

    .hero__subtitle-line {
        width: 40px;
    }

    .hero__lead {
        gap: 16px;
        font-size: 14px;
    }

    .hero__phone-wrap {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    /* On mobile the slider switches to CSS Grid so the prev/next arrows
       flank the video frame in the same row, and the dots stack centered
       on a second row below — matching the Figma SP reference
       (node 13731:49683). `display: contents` on the controls bar lets its
       children participate directly in the parent grid. */
    .phone-slider {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 8px;
        row-gap: 16px;
        width: 100%;
        max-width: none;
    }

    .phone-slider__frame {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        max-width: 201px;
        margin-inline: auto;
        aspect-ratio: 320 / 694;
        height: auto;
        border-radius: 16px;
    }

    .phone-slider__play {
        width: 64px;
        height: 64px;
    }

    .phone-slider__controls {
        display: contents;
    }

    .phone-slider__nav {
        width: 40px;
        height: 40px;
    }

    .phone-slider__nav img {
        width: 40px;
        height: 40px;
    }

    .phone-slider__nav--prev {
        grid-column: 1;
        grid-row: 1;
    }

    .phone-slider__nav--next {
        grid-column: 3;
        grid-row: 1;
    }

    .phone-slider__dots {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-self: center;
    }

    .phone-slider__dot {
        width: 10px;
        height: 10px;
    }

    /* ---- What ---- */
    /* Padding follows the Figma SP frame (pt=80, pb=120, px=20) so that the
       ワンニキ character anchored to the bottom-left sits in the right place
       relative to the final POINT card (head overlaps the card by ~11px and
       its feet keep a ~11px gap to the next section). */
    .section--what {
        padding: 80px 20px 120px;
    }

    /* SP layout: pin characters to the section corners following the Figma
       SP reference (frame 393×1045):
       - niki (char-left): left=20, top=914.25, w=85, h=120
         → bottom=10.75 to stay anchored when the section grows taller
       - onna (char-right): x=397 (frame extends past right edge), top=218.25,
         w=120, h=120 → right=-4 keeps the same overshoot on any width */
    .section--what__char-left {
        top: auto;
        bottom: 10.75px;
        left: 20px;
        right: auto;
        width: 85px;
        height: 120px;
    }

    .section--what__char-right {
        top: 218.25px;
        bottom: auto;
        right: -4px;
        left: auto;
        width: 120px;
        height: 120px;
        transform: scaleX(-1);
    }

    .section--what__top {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    
    .section--what__mock {
        display: block;
        width: 100%;
        height: auto;
    }

    .section--what .section__head {
        max-width: none;
        margin-bottom: 24px;
    }

    /* SP: drop the desktop <br>s and switch to natural wrapping + left
       alignment so the lead reads like the Figma reference (last wrapped
       line lands short on the left, leaving the right column free for the
       ワン娘 character). */
    .section--what .section__lead {
        text-align: left;
    }

    .section--what .section__lead br {
        display: none;
    }

    /* SP: section--what__char-right（ワン娘）が top: 218.25px / 高さ 120px で
       配置されており、見出しと最初のカードの間に重なってしまうため、カードを
       下げてキャラクターがカードの上に見える余白を確保する。 */
    .point-cards {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-top: 104px;
    }

    .point-card {
        padding: 16px 12px;
        gap: 12px;
    }

    .point-card__visual {
        width: 100px;
        height: 100px;
    }

    .point-card__visual img,
    .point-card__visual svg {
        width: 100px;
        height: 100px;
    }

    .point-card__title {
        font-size: 16px;
    }

    .point-card__text {
        font-size: 14px;
    }

    .point-card__badge {
        width: 64px;
        height: 80px;
        padding-top: 12px;
        top: -16px;
        left: 0;
    }

    .point-card__badge-label {
        font-size: 14px;
    }

    .point-card__badge-num {
        font-size: 32px;
    }

    /* ---- Voices ---- */
    .section--voices {
        padding: 80px 24px;
    }

    .voice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .voices-note {
        margin-top: 24px;
        padding-right: 120px;
        font-size: 12px;
    }

    .voice-card__name {
        font-size: 12px;
    }

    .voice-card__date {
        font-size: 8px;
    }

    .voices-badge {
        right: -16px;
        bottom: -40px;
        width: 130px;
        height: 130px;
    }

    .voices-badge__label {
        font-size: 12px;
    }

    .voices-badge__num {
        font-size: 32px;
    }

    .voices-badge__unit {
        font-size: 12px;
    }

    /* ---- Steps ---- */
    .section--steps {
        padding: 80px 20px;
    }

    .section--steps .section__head {
        margin-bottom: 64px;
    }

    .section--steps .section__title-break,
    .section--voices .section__title-break {
        display: block;
        height: 0;
    }

    /* Two-line title on mobile pushes the closing quote toward the bottom-right */
    .section--steps .section__quote--close,
    .section--voices .section__quote--close {
        top: auto;
        bottom: -8px;
    }

    .step-cards {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .step-card {
        padding: 0;
        gap: 20px;
    }

    /* Mobile phone mock is fixed at 160px wide per Figma SP reference
       (node 13731:49843). The step body retains 100% width so the title
       and description span the column. */
    .step-card__phone {
        width: 160px;
        max-width: 100%;
    }

    .step-card__num {
        width: 48px;
        height: 48px;
        font-size: 32px;
        top: -24px;
    }

    .step-card__title {
        font-size: 18px;
    }

    .step-card__text {
        font-size: 14px;
    }

    /* ---- Reasons ---- */
    .section--reasons {
        padding: 80px 20px;
    }

    /* Mobile: title is centered, subtitle has a forced line break */
    .section--reasons .section__head {
        margin-bottom: 24px;
    }

    .section__head--reasons {
        text-align: center;
        /* Reset the fluid right-side gutter used on PC/tablet — on mobile
           the character group flows below the title, not over it. */
        padding-right: 0;
    }

    .section__lead--reasons {
        text-align: center;
        font-size: 16px;
        line-height: 1.6;
    }

    /* Force a line break in the subtitle: "楽しさの土台に、しっかりした" / "品質と運営があります" */
    .section__lead-break {
        display: block;
        height: 0;
    }

    /* Mobile: character group flows below the title and is right-aligned within
       the section container so the pair sits against the right edge while
       leaving the "ワン娘" label and dashed tail room to extend leftward. */
    .reasons-chars {
        position: relative;
        top: auto;
        right: auto;
        width: 234px;
        height: 135px;
        margin: 0 0 16px auto;
    }

    /* ワン娘 character at relative (20, 0), 131x131 */
    .reason-char--onna {
        left: 20px;
        top: 0;
        width: 131px;
    }

    .reason-char--onna img {
        width: 131px;
        height: 131px;
        object-fit: contain;
    }

    /* Label sits to the LEFT of the girl with a dashed line extending right
       past the girl's hair. The text starts slightly inside the group's left
       edge so it visually hugs the character — the dashed tail then runs from
       the label across to (and behind) the girl's body. The figcaption keeps
       the base z-index: 1 so the dashed tail passes BEHIND the character
       image (z-index: 2 within the isolated .reason-char context). */
    .reason-char--onna figcaption {
        left: -4px;
        top: 20px;
        padding-right: 40px;
    }

    .reason-char--onna .reason-char__label {
        font-size: 12px;
    }

    /* ワンニキ character at relative (104, 5), 92x130 */
    .reason-char--niki {
        left: 104px;
        top: 5px;
        width: 92px;
    }

    .reason-char--niki img {
        width: 92px;
        height: 130px;
        object-fit: contain;
    }

    /* Label sits to the RIGHT of the boy with a dashed line extending left
       past the boy's body. The dashed tail starts near the boy's left side
       so the label visually hugs the character — left:24 pulls the text
       closer to the boy's right shoulder. The figcaption keeps the base
       z-index: 1 so the dashed tail passes BEHIND the character image
       (z-index: 2 within the isolated .reason-char context). */
    .reason-char--niki figcaption {
        left: 40px;
        top: 74px;
        padding-left: 40px;
    }

    .reason-char--niki .reason-char__label {
        font-size: 14px;
    }

    .reason-cards {
        grid-template-columns: 1fr;
        gap: 12px;
        row-gap: 12px;
    }

    .reason-card {
        padding: 20px;
        gap: 16px;
        min-height: 0;
    }

    .reason-card__head {
        min-height: 0;
    }

    .reason-card__icon {
        width: 40px;
        height: 40px;
    }

    .reason-card__icon--truck {
        width: 68px;
    }

    .reason-card__text {
        font-size: 16px;
    }

    /* ---- First pack ---- */
    /* Figma SP frame (393×2466.71): pt=80, pb=80, head bottom y=326,
       pack-strip top y=390 (=> head margin-bottom 64). */
    .section--first-pack {
        padding: 80px 0 80px;
        overflow: hidden;
    }

    .section--first-pack .container {
        padding: 0 24px;
    }

    .section--first-pack .section__head {
        margin-bottom: 64px;
        position: relative;
    }

    /* Characters follow the Figma SP placement exactly:
       - niki (char-left):  x=24,  y=310.96, 81×100   → left: 24,  top: 310.96
       - onna (char-right): x=277, y=310.96, 104×100  → right: 12, top: 310.96
       Their heads slightly overlap the last lead line and their feet
       slightly overlap the pack-strip top, matching the Figma reference. */
    .section--first-pack__char-left {
        position: absolute;
        left: 24px;
        top: 292px;
        width: 81px;
        height: 100px;
        z-index: 1;
    }

    .section--first-pack__char-right {
        position: absolute;
        right: 12px;
        top: 292px;
        width: 104px;
        height: 100px;
        z-index: 1;
    }

    .first-pack__sub-title {
        font-size: 18px;
        line-height: 1.6;
        margin-bottom: 14px;
    }

    .first-pack__sub-text {
        font-size: 14px;
        line-height: 1.6;
    }

    .first-pack__title-br,
    .first-pack__sub-text-br {
        display: inline;
    }

    /* Mobile pack strip: vertical stack per Figma 13731:50015.
       Each pack fills the container width with 16px side padding and
       6px top/bottom padding (which becomes the gap between cards).
       Aspect ratio 337/220 keeps card geometry consistent across
       viewports. No horizontal scrolling on this breakpoint. */
    .pack-strip {
        margin-top: 28px;
        margin-inline: 0;
        overflow: visible;
        scroll-snap-type: none;
        scroll-padding-inline: 0;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
        z-index: 2;
    }

    .pack-strip__list {
        flex-direction: column;
        gap: 0;
        padding-inline: 0;
        width: 100%;
    }

    .pack-strip__item {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: auto;
        padding: 0px 16px 12px;
        /* Reset the PC-only per-slide margin so the vertical stack
           sits flush against the container edges on mobile. */
        margin-inline: 0;
        scroll-snap-align: none;
        scroll-snap-stop: normal;
    }

    .pack-strip__link {
        width: 100%;
        aspect-ratio: 337 / 220;
        border-radius: 8px;
        overflow: hidden;
    }

    .pack-strip__item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: none;
    }

    /* ---- Footer ---- */
    .site-footer {
        padding: 32px 24px;
    }

    .site-footer__logo {
        width: 150px;
        height: auto;
    }
}

@media (max-width: 480px) {
    .section__title {
        font-size: 22px;
        padding: 0 28px;
    }

    /* Match the smaller quote glyph (26px) used on very narrow viewports
       while keeping an 8px gap between the SVG and the title text. */
    .section__title--quoted {
        padding: 0 34px;
    }

    .section__quote {
        height: 18px;
    }

    .section__quote--open {
        top: -5px;
        width: 26px;
    }

    .section__quote--close {
        top: 13px;
        width: 25px;
    }

    .hero__title-line {
        font-size: 32px;
    }

    .hero__title-line--sm {
        font-size: 24px;
    }
}