/* Content block section (image + text)
   Breakpoint: PC 768px+ / SP 767px- */

.content-block {
    padding-bottom: var(--space-12xl);
}

/* padding-top は .content-section--after-hero-image（hero.css）に任せる。padding-block だと後から上書きして効かなくなる */
.content-block:not(.content-section--after-hero-image) {
    padding-top: var(--space-12xl);
}

.content-block__inner {
    max-width: var(--content-max-width);
    margin-inline: auto;
    padding-inline: var(--content-inner-padding-inline);
}

.content-block__figure {
    margin: 0;
}

.content-block__image {
    display: block;
    width: 400px;
    height: 560px;
    object-fit: cover;
    border-radius: var(--radius-md);
    filter: drop-shadow(18px 18px 0 var(--color-corporate));
}


.content-block__body {
    color: var(--color-text);
}

.content-block__heading {
    font-size: var(--fs-section-heading-sm);
    font-weight: 900;
    margin: 0 0 var(--space-md);
    padding-bottom: 0;
    line-height: var(--lh-normal);
    letter-spacing: 0.03em;
}

.content-block__heading::after {
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background: var(--color-corporate);
    margin-top: var(--space-xs);
}

.content-block__subheading {
    font-family: var(--font-english);
    font-size: var(--fs-sm);
    font-weight: bold;
    color: var(--color-corporate);
    margin: 0 0 var(--space-sm);
    letter-spacing: 0.1em;
}

.content-block__content {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
}

.content-block__content p {
    margin: 0 0 var(--space-md);
}

.content-block__content p:last-child {
    margin-bottom: 0;
}

.content-block__content ul {
    list-style: none;
    padding: var(--space-sm) 0;
    margin: 0 0 var(--space-md);
}

.content-block__content ul li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5em;
    
    padding: var(--space-xs) 1em;
    margin-bottom: var(--space-sm);
    color: var(--color-sub2);
    
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: 0.05em;

    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.1);
}

.content-block__content ul li::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%230066cc' d='M5 4 L15 10 L5 16 Z'/%3E%3Cpath fill='%23eecd15' d='M3 2 L13 8 L3 14 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* SP: 767px以下 — 上に画像、下にテキスト（2パターン共通） */
@media (max-width: 767px) {
    .content-block {
        padding-bottom: var(--space-4xl);
    }
    .content-block.content-section--after-hero-image {
        padding-bottom: 0;
    }

    .content-section--support-intro .content-block.content-section--after-hero-image {
        margin-bottom: var(--space-6xl);
    }
    .content-block:not(.content-section--after-hero-image) {
        padding-top: var(--space-4xl);
    }

    .content-block__inner {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }

    .content-block__figure {
        order: 0;
    }

    .content-block__body {
        order: 1;
    }

    .content-block__image {
        width: 100%;
        max-width: 400px;
        margin-inline: auto;
        height: auto;
        aspect-ratio: 400 / 560;
        object-fit: cover;
        filter: drop-shadow(12px 12px 0 var(--color-corporate));
    }

    .content-block__content {
        font-size: var(--fs-sm);
    }
}

/* PC: 768px+ （画像:4 テキスト:6 を常に維持） */
@media (min-width: 768px) {
    .content-block__inner {
        display: grid;
        grid-template-columns: 4fr 6fr;
        gap: var(--space-4xl);
        align-items: center;
    }

    .content-block--image-left .content-block__figure {
        grid-column: 1;
        grid-row: 1;
    }

    .content-block--image-left .content-block__body {
        grid-column: 2;
        grid-row: 1;
    }

    /* 画像右のときは列を 6fr 4fr にして、テキスト=6・画像=4 にする */
    .content-block--image-right .content-block__inner {
        grid-template-columns: 6fr 4fr;
    }

    .content-block--image-right .content-block__figure {
        grid-column: 2;
        grid-row: 1;
    }

    .content-block--image-right .content-block__body {
        grid-column: 1;
        grid-row: 1;
    }

    .content-block--image-right .content-block__image {
        margin-left: auto;
    }

    /* 画像なしのときは本文のみ幅いっぱい */
    .content-block__body:only-child {
        grid-column: 1 / -1;
    }
}