/*
Theme Name: LP Common Styles
Description: サイト共通コンポーネント（セクション見出し、波形装飾など）
Note: base.css, variables.css は先に読み込まれている前提
*/

/* ===================================================================
 * セクション見出しコンポーネント
 * =================================================================== */

.c-section-heading {
    margin-bottom: var(--space-2xl);
}

.c-section-heading__subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-black);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: var(--space-sm);
}

.c-section-heading__title {
    font-family: var(--font-family-zen-maru);
    font-size: var(--font-size-xl);
    color: var(--color-black);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
    margin: 0.5rem 0 1rem;
}

.c-section-heading__description {
    font-size: var(--font-size-base);
    color: var(--color-black);
    line-height: var(--line-height-relaxed);
    max-width: 640px;
    margin: 0 auto;
}

/* ===================================================================
 * 波形装飾コンポーネント
 * =================================================================== */

.u-wave {
    width: 100%;
    height: 92px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    flex-shrink: 0;
    background: var(--color-white);
}

/* 上部波形 */
.u-wave--top {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 80' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M115.259 46.2574C35.9431 46.2574 0 9.18811 0 8.71287V80H402V30.4158C402 30.4158 366.86 3.86757e-05 294.773 0C220.076 -4.00762e-05 193.57 46.2574 115.259 46.2574Z' fill='url(%23paint0_linear)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear' x1='201' y1='0' x2='201' y2='80' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFC9C4'/%3E%3Cstop offset='0.5' stop-color='%23FFE6E4'/%3E%3Cstop offset='1' stop-color='%23FFF5F5'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

/* 下部波形 */
.u-wave--bottom {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 80' fill='none' preserveAspectRatio='none'%3E%3Cpath d='M286.741 33.7426C366.057 33.7426 402 70.8119 402 71.2871V0H0V49.5842C0 49.5842 35.1399 80 107.227 80C181.924 80 208.43 33.7426 286.741 33.7426Z' fill='url(%23paint0_linear_bottom)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_bottom' x1='201' y1='80' x2='201' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFC9C4'/%3E%3Cstop offset='0.5' stop-color='%23FFE6E4'/%3E%3Cstop offset='1' stop-color='%23FFF5F5'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

/* ピンク */
.u-wave--pink.u-wave--top {
    background: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 80' fill='none' preserveAspectRatio='none'%3E%3Crect width='402' height='80' fill='%23FFFFFF'/%3E%3Cpath d='M115.259 46.2574C35.9431 46.2574 0 9.18811 0 8.71287V80H402V30.4158C402 30.4158 366.86 3.86757e-05 294.773 0C220.076 -4.00762e-05 193.57 46.2574 115.259 46.2574Z' fill='url(%23paint0_linear_pink)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_pink' x1='201' y1='0' x2='201' y2='80' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFC9C4'/%3E%3Cstop offset='0.5' stop-color='%23FFE6E4'/%3E%3Cstop offset='1' stop-color='%23FFF5F5'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

.u-wave--pink.u-wave--bottom {
    background: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 80' fill='none' preserveAspectRatio='none'%3E%3Crect width='402' height='80' fill='%23FFFFFF'/%3E%3Cpath d='M286.741 33.7426C366.057 33.7426 402 70.8119 402 71.2871V0H0V49.5842C0 49.5842 35.1399 80 107.227 80C181.924 80 208.43 33.7426 286.741 33.7426Z' fill='url(%23paint0_linear_pink_bottom)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_pink_bottom' x1='201' y1='80' x2='201' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFC9C4'/%3E%3Cstop offset='0.5' stop-color='%23FFE6E4'/%3E%3Cstop offset='1' stop-color='%23FFF5F5'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

/* グリーン */
.u-wave--green.u-wave--top {
    background: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 80' fill='none' preserveAspectRatio='none'%3E%3Crect width='402' height='80' fill='%23FFFFFF'/%3E%3Cpath d='M115.259 46.2574C35.9431 46.2574 0 9.18811 0 8.71287V80H402V30.4158C402 30.4158 366.86 3.86757e-05 294.773 0C220.076 -4.00762e-05 193.57 46.2574 115.259 46.2574Z' fill='url(%23paint0_linear_green)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_green' x1='201' y1='0' x2='201' y2='80' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D4F2E2'/%3E%3Cstop offset='0.5' stop-color='%23E1F6EB'/%3E%3Cstop offset='1' stop-color='%23F5FAF8'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

.u-wave--green.u-wave--bottom {
    background: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 80' fill='none' preserveAspectRatio='none'%3E%3Crect width='402' height='80' fill='%23FFFFFF'/%3E%3Cpath d='M286.741 33.7426C366.057 33.7426 402 70.8119 402 71.2871V0H0V49.5842C0 49.5842 35.1399 80 107.227 80C181.924 80 208.43 33.7426 286.741 33.7426Z' fill='url(%23paint0_linear_202_842)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_202_842' x1='201' y1='80' x2='201' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D4F2E2'/%3E%3Cstop offset='0.5' stop-color='%23E1F6EB'/%3E%3Cstop offset='1' stop-color='%23F5FAF8'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

/* イエロー */
.u-wave--yellow.u-wave--top {
    background: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 80' fill='none' preserveAspectRatio='none'%3E%3Crect width='402' height='80' fill='%23FFFFFF'/%3E%3Cpath d='M115.259 46.2574C35.9431 46.2574 0 9.18811 0 8.71287V80H402V30.4158C402 30.4158 366.86 3.86757e-05 294.773 0C220.076 -4.00762e-05 193.57 46.2574 115.259 46.2574Z' fill='url(%23paint0_linear_yellow)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_yellow' x1='201' y1='0' x2='201' y2='80' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF2CC'/%3E%3Cstop offset='0.5' stop-color='%23FFF8E2'/%3E%3Cstop offset='1' stop-color='%23FFFCF1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

.u-wave--yellow.u-wave--bottom {
    background: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 402 80' fill='none' preserveAspectRatio='none'%3E%3Crect width='402' height='80' fill='%23FFFFFF'/%3E%3Cpath d='M286.741 33.7426C366.057 33.7426 402 70.8119 402 71.2871V0H0V49.5842C0 49.5842 35.1399 80 107.227 80C181.924 80 208.43 33.7426 286.741 33.7426Z' fill='url(%23paint0_linear_yellow_bottom)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_yellow_bottom' x1='201' y1='80' x2='201' y2='0' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23FFF2CC'/%3E%3Cstop offset='0.5' stop-color='%23FFF8E2'/%3E%3Cstop offset='1' stop-color='%23FFFCF1'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}

/* ===================================================================
 * 有機的円形クリップパス（iPhone/Safari対応）
 * =================================================================== */

.u-clip-organic-01,
.u-clip-organic-02,
.u-clip-organic-03 {
    position: relative;
    overflow: hidden;
}

.u-clip-organic-01 img,
.u-clip-organic-02 img,
.u-clip-organic-03 img {
    width: 100%;
    height: auto;
    display: block;
}

/* パターン1: やや縦長の有機的な円 */
.u-clip-organic-01 img {
    clip-path: polygon(48% 1%, 52% 1%, 58% 2%, 64% 4%, 70% 7%, 75% 11%, 80% 16%,
            84% 22%, 87% 28%, 90% 35%, 92% 42%, 93% 49%, 93% 56%,
            92% 63%, 90% 69%, 87% 75%, 83% 80%, 78% 85%, 72% 89%,
            66% 92%, 59% 95%, 52% 97%, 45% 98%, 38% 97%, 32% 95%,
            26% 92%, 21% 88%, 16% 83%, 12% 77%, 9% 71%, 6% 64%,
            4% 57%, 3% 49%, 3% 42%, 4% 35%, 6% 28%, 9% 22%,
            13% 16%, 18% 11%, 24% 7%, 30% 4%, 37% 2%, 43% 1%);
}

/* パターン2: やや横長の有機的な円 */
.u-clip-organic-02 img {
    clip-path: polygon(52% 2%, 58% 2%, 64% 3%, 69% 5%, 75% 8%, 80% 12%, 85% 17%,
            89% 23%, 92% 30%, 94% 37%, 96% 44%, 97% 51%, 97% 58%,
            96% 65%, 94% 71%, 91% 77%, 87% 82%, 82% 87%, 76% 91%,
            70% 94%, 63% 96%, 56% 97%, 49% 97%, 42% 96%, 36% 94%,
            30% 91%, 24% 87%, 19% 82%, 15% 76%, 11% 69%, 8% 62%,
            6% 55%, 5% 48%, 5% 41%, 6% 34%, 8% 27%, 11% 21%,
            15% 15%, 20% 10%, 26% 6%, 33% 3%, 40% 2%, 46% 2%);
}

/* パターン3: 正円に近い有機的な形 */
.u-clip-organic-03 img {
    clip-path: polygon(46% 3%, 52% 3%, 58% 4%, 64% 6%, 69% 9%, 74% 13%, 79% 18%,
            83% 24%, 87% 30%, 90% 37%, 92% 44%, 94% 51%, 94% 58%,
            93% 65%, 91% 71%, 88% 77%, 84% 82%, 79% 87%, 74% 91%,
            68% 94%, 62% 96%, 55% 97%, 49% 97%, 42% 96%, 36% 94%,
            30% 91%, 25% 87%, 20% 82%, 16% 76%, 12% 70%, 9% 63%,
            7% 56%, 5% 49%, 5% 42%, 6% 35%, 8% 28%, 11% 22%,
            15% 16%, 20% 11%, 26% 7%, 32% 4%, 39% 3%);
}

/* ===================================================================
 * ボタンコンポーネント（共通）
 * =================================================================== */

button {
    color: var(--color-black);
}

/* ベースボタン */
.c-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: var(--border-radius-full);
    cursor: pointer;
    transition: all var(--transition-base);
    animation: float 2.5s ease-in-out infinite;
}

.c-button:hover {
    animation-play-state: paused;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* サイズバリエーション */
.c-button--lg {
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
    font-size: var(--font-size-lg);
}

.c-button--md {
    gap: var(--space-sm);
    width: auto;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
    font-size: var(--font-size-base);
}

.c-button--sm {
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* カラーバリエーション */
.c-button--white {
    background: var(--color-white);
    color: var(--color-amiee-red);
    border: none;
    box-shadow: var(--shadow-red);
}

.c-button--red {
    background: var(--color-amiee-red);
    color: var(--color-white);
    border: none;
    box-shadow: var(--shadow-red);
}

.c-button--outline {
    background-color: var(--color-amiee-natural);
    color: var(--color-black);
    border: 1px solid var(--color-line-gray);
    box-shadow: var(--shadow-sm);
}

.c-button--black {
    background-color: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
    box-shadow: var(--shadow-sm);
}

/* ホバー時シャドウOFF */
.c-button--white:hover,
.c-button--red:hover,
.c-button--outline:hover,
.c-button--black:hover {
    box-shadow: none;
}

/* ボタンアイコン */
.c-button__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.c-button--lg .c-button__icon {
    width: var(--space-3xl);
    height: var(--space-3xl);
}

.c-button--md .c-button__icon {
    width: var(--space-xl);
    height: var(--space-xl);
}

.c-button--sm .c-button__icon {
    width: 20px;
    height: 16px;
}

.c-button__icon svg {
    width: 100%;
    height: auto;
}

/* ボタンテキスト */
.c-button__text {
    flex: 1;
    line-height: var(--line-height-tighter);
}

.c-button--sm .c-button__text {
    text-align: center;
}

/* ボタン矢印（丸囲み） */
.c-button__arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full);
    flex-shrink: 0;
}

.c-button--lg .c-button__arrow {
    width: var(--space-3xl);
    height: var(--space-3xl);
    background: var(--color-amiee-pink-lighter);
    border: 1px solid var(--color-amiee-red);
}

.c-button--md .c-button__arrow {
    width: var(--space-xl);
    height: var(--space-xl);
    background: var(--color-amiee-pink-lighter);
    border: 1px solid var(--color-amiee-red);
}

.c-button--sm .c-button__arrow {
    width: 24px;
    height: 24px;
    background: var(--color-white);
    border: 1px solid var(--color-black);
}

.c-button--red .c-button__arrow {
    border: 1px solid var(--color-white);
    background: var(--color-white);
}

.c-button--black .c-button__arrow {
    background: var(--color-white);
}

.c-button__arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.c-button--lg .c-button__arrow::before {
    width: var(--space-md);
    height: var(--space-md);
    border-right: 1px solid var(--color-amiee-red);
    border-bottom: 1px solid var(--color-amiee-red);
}

.c-button--md .c-button__arrow::before {
    width: var(--space-sm);
    height: var(--space-sm);
    border-right: 1px solid var(--color-amiee-red);
    border-bottom: 1px solid var(--color-amiee-red);
}

.c-button--sm .c-button__arrow::before {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--color-black);
    border-bottom: 1.5px solid var(--color-black);
}

.c-button--red .c-button__arrow::before {
    border-right: 1px solid var(--color-amiee-red);
    border-bottom: 1px solid var(--color-amiee-red);
}

/* ボタンテキスト */
.c-button__text {
    flex: 1;
    line-height: var(--line-height-tighter);
}

.c-button--sm .c-button__text {
    text-align: center;
}

/* ボタン矢印（丸囲み） */
.c-button__arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full);
    flex-shrink: 0;
}

.c-button--lg .c-button__arrow {
    width: var(--space-3xl);
    height: var(--space-3xl);
    background: var(--color-amiee-pink-lighter);
    border: 1px solid var(--color-amiee-red);
}

.c-button--md .c-button__arrow {
    width: var(--space-xl);
    height: var(--space-xl);
    background: var(--color-amiee-pink-lighter);
    border: 1px solid var(--color-amiee-red);
}

.c-button--sm .c-button__arrow {
    width: 24px;
    height: 24px;
    background: var(--color-black);
    border: 1px solid var(--color-black);
}

.c-button--red .c-button__arrow {
    border: 1px solid var(--color-white);
    background: var(--color-white);
}

.c-button--outline .c-button__arrow {
    background: var(--color-black);
}

.c-button--black .c-button__arrow {
    background: var(--color-white);
}

.c-button__arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.c-button--lg .c-button__arrow::before {
    width: var(--space-md);
    height: var(--space-md);
    border-right: 1px solid var(--color-amiee-red);
    border-bottom: 1px solid var(--color-amiee-red);
}

.c-button--md .c-button__arrow::before {
    width: var(--space-sm);
    height: var(--space-sm);
    border-right: 1px solid var(--color-amiee-red);
    border-bottom: 1px solid var(--color-amiee-red);
}

.c-button--sm .c-button__arrow::before {
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--color-black);
    border-bottom: 1.5px solid var(--color-black);
}

.c-button--outline .c-button__arrow::before {
    border-color: var(--color-white);
}

.c-button--red .c-button__arrow::before {
    border-right: 1px solid var(--color-amiee-red);
    border-bottom: 1px solid var(--color-amiee-red);
}

/* ===================================================================
 * Slick Slider 共通スタイル
 * =================================================================== */

/* Slick Dots（ドット） */
.slick-slider .slick-dots {
    bottom: calc(-1 * var(--space-xl));
    display: flex !important;
    justify-content: center;
    gap: var(--space-xs);
}

.slick-slider .slick-dots li {
    width: 8px;
    height: 8px;
    margin: 0;
}

.slick-slider .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
}

.slick-slider .slick-dots li button:before {
    width: 8px;
    height: 8px;
    font-size: 0;
    background: var(--color-white);
    border-radius: 50%;
    opacity: 1;
    content: '';
}

.slick-slider .slick-dots li.slick-active button:before {
    background: var(--color-black);
}

/* Slick Arrow（矢印ボタン） */
.slick-slider .slick-prev,
.slick-slider .slick-next {
    width: var(--space-3xl);
    height: var(--space-3xl);
    z-index: 3;
    background: var(--color-white);
    border: 1px solid var(--color-black);
    border-radius: var(--border-radius-full);
    transition: all var(--transition-base);
}

.slick-slider .slick-prev:hover,
.slick-slider .slick-next:hover {
    background: var(--color-black);
}

.slick-slider .slick-prev {
    left: var(--space-sm);
}

.slick-slider .slick-prev:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 58%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: var(--space-md);
    height: var(--space-md);
    border-left: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
    opacity: 1;
}

.slick-slider .slick-prev:hover:before {
    border-color: var(--color-white);
}

.slick-slider .slick-next {
    right: var(--space-sm);
}

.slick-slider .slick-next:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 42%;
    transform: translate(-50%, -50%) rotate(-135deg);
    width: var(--space-md);
    height: var(--space-md);
    border-left: 1px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
    opacity: 1;
}

.slick-slider .slick-next:hover:before {
    border-color: var(--color-white);
}

/* ===================================================================
 * カードコンポーネント（共通）
 * =================================================================== */

/* ベースカード - 左上・右下が大きく丸い角 */
.c-card {
    background: var(--color-white);
    border-radius: var(--border-radius-base);
    border-top-left-radius: var(--border-radius-2xl);
    border-bottom-right-radius: var(--border-radius-2xl);
}

/* シャドウバリエーション */
.c-card--shadow-pink {
    box-shadow: var(--shadow-pink);
}

.c-card--shadow-green {
    box-shadow: var(--shadow-green);
}

.c-card--shadow-yellow {
    box-shadow: var(--shadow-yellow);
}

.c-card--shadow-red {
    box-shadow: var(--shadow-red);
}

/* ===================================================================
 * バッジコンポーネント（共通）
 * =================================================================== */

/* ベースバッジ - ピル型 */
.c-badge {
    display: inline-block;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-base);
    line-height: 1;
    white-space: nowrap;
}

/* カラーバリエーション */
.c-badge--pink {
    background: var(--color-amiee-pink);
    color: var(--color-white);
}

.c-badge--pink-gradient {
    background: linear-gradient(90deg, var(--color-amiee-pink-darker) 0%, var(--color-amiee-pink) 100%);
    color: var(--color-white);
}

.c-badge--black {
    background: var(--color-black);
    color: var(--color-white);
}

/* サイズバリエーション */
.c-badge--lg {
    padding: var(--space-sm) var(--space-xl);
    font-size: var(--font-size-lg);
}

.c-badge--sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-sm);
}

/* ===================================================================
 * タグコンポーネント（共通）
 * =================================================================== */

/* ベースタグ - 枠線付きピル */
.c-tag {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--color-amiee-pink);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-black);
    white-space: nowrap;
}

.c-tag--pink {
    background: var(--color-amiee-pink-lighter);
    border-color: var(--color-amiee-pink);
}

.c-tag--white {
    background: var(--color-white);
    border-color: var(--color-amiee-pink);
}

/* ===================================================================
 * 商品アイテム共通コンポーネント
 * c-scene-item, c-lp-cart で共通して使用するパーツ
 * =================================================================== */

/* 商品アイテム - ヘッダー（画像 + 情報の横並び） */
.c-product-item__header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

/* 商品アイテム - 画像 */
.c-product-item__image {
    flex-shrink: 0;
}

.c-product-item__image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 商品アイテム - 情報エリア */
.c-product-item__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* 商品アイテム - 商品名 */
.c-product-item__name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-black);
    line-height: 1;
    margin: 0;
}

.c-product-item__name--lg {
    font-size: var(--font-size-2xl);
}

/* 商品アイテム - サイズ・容量 */
.c-product-item__size {
    font-size: var(--font-size-sm);
    color: var(--color-black);
    margin: 0;
}

/* 商品アイテム - カラー表示 */
.c-product-item__colors {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.c-product-item__color {
    width: 16px;
    height: 16px;
    border-radius: var(--border-radius-full);
}

.c-product-item__color--natural {
    border: 1px solid var(--color-line-gray);
    background-color: var(--color-amiee-natural);
}

.c-product-item__color--black {
    border: 1px solid var(--color-amiee-black);
    background-color: var(--color-amiee-black);
}

.c-product-item__color-label {
    font-size: var(--font-size-xs);
    color: var(--color-black);
}

/* 商品アイテム - 価格 */
.c-product-item__price {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
}

.c-product-item__price-amount {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.c-product-item__price-unit {
    font-size: var(--font-size-base);
    line-height: 1;
}

.c-product-item__price-tax {
    font-size: var(--font-size-sm);
}

/* 商品アイテム - 説明文 */
.c-product-item__description {
    font-size: var(--font-size-sm);
    color: var(--color-black);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

/* 商品アイテム - ボタンエリア */
.c-product-item__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.c-product-item__buttons .c-button {
    animation: none;
}

/* ===================================================================
 * スクロールヒント
 * =================================================================== */
.c-scroll-hint {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

.c-scroll-hint::after {
    content: "→";
    display: inline-block;
    animation: scrollArrow 1s ease-in-out infinite;
    margin-left: var(--space-xs);
}

@keyframes scrollArrow {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }
}

/* ===================================================================
 * カート - 数量セレクト
 * =================================================================== */
.c-lp-cart__quantity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.c-lp-cart__quantity-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.c-lp-cart__quantity-select {
    padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: 1px solid;
    border-radius: var(--border-radius-base);
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 10px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    min-width: 100px;
}

.c-lp-cart__quantity-select:focus {
    outline: none;
}

/* ===================================================================
 * カート - 送料無料表示（ボタン内）
 * =================================================================== */
.c-lp-cart__shipping-info {
    position: absolute;
    top: -12px;
    display: block;
    width: 60%;
    text-align: center;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-sm) var(--space-xs);
    border: 1px solid;
    border-radius: var(--border-radius-full);
    margin-bottom: var(--space-xs);
    line-height: 1;
}

.c-lp-cart__shipping-info .js-remaining-amount {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.c-lp-cart__shipping-free {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

/* ボタンとの間隔調整 */
.c-lp-cart__form form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-lp-cart__form .c-button {
    flex-wrap: wrap;
}

/* ===================================================================
 * カート - インライン数量セレクト
 * =================================================================== */
.c-lp-cart__quantity-inline {
    display: inline-block;
    padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-sm);
    font-size: var(--font-size-base);
    color: var(--color-black);
    border: 1px solid;
    border-radius: var(--border-radius-base);
    background-color: var(--color-white);
    -webkit-text-fill-color: var(--color-black);
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 8px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    min-width: 50px;
    margin-right: var(--space-xs);
    text-align: center;
    vertical-align: middle;
}

.c-lp-cart__quantity-inline:focus {
    outline: none;
}