/*
Theme Name: スカイビル眼科
Theme URI: 
Author: イーエックス・パートナーズ
Author URI: 
Description: 
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.0
Text Domain: exptn
*/

.pickup-buttons.is-layout-flex {

    .wp-block-button__link {
        --icon-size-w: clamp(2.5rem, 5vw, 4rem);
        display: flex;
        align-items: center;
        text-align: left;
        font-size: clamp(0.9rem, 1.2vw, 1.1rem);

        strong {
            font-size: clamp(1.4rem, 2.2vw, 2rem);
        }

        .button-svg-label {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: flex-end;
        }

        .button-svg-icon {
            margin-top: -0.1em;
            margin-bottom: -0.1em;
            aspect-ratio: 1/1;
            background-color: #fff;
            border-radius: 50%;
            color: var(--wp--preset--color--primary);

            svg {
                width: 70%;
            }
        }
    }

    .wp-block-button__link.rich-text {
        --icon-size-w: clamp(2.5rem, 5vw, 4rem);
        flex-wrap: wrap;

        &::before {
            margin-top: -0.1em;
            margin-bottom: -0.1em;
            aspect-ratio: 1/1;
            border-radius: 50%;
        }
    }
}

@media screen and (max-width: 768px) {
    .pickup-buttons.is-layout-flex {
        grid-template-columns: 1fr;
    }
}


.home-treatment {
    position: relative;

    >* {
        position: relative;
        z-index: 2;
    }

    &::before {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        background-image: linear-gradient(to right,
                color-mix(in srgb, var(--wp--preset--color--primary) 80%, transparent) 80%,
                color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) 80%);
    }

    .wp-block-buttons {
        grid-auto-rows: 1fr;
    }
}

.home-about {
    background-image: linear-gradient(to bottom, #fff 60%, var(--wp--preset--color--gray-lighter) 60%);
}

.is-layout-constrained>.sbi {
    max-width: 100% !important;
}


.wp-block-heading:has(.heading-svg-icon) {
    display: flex;
    align-items: center;

    .heading-svg-icon {
        color: var(--wp--preset--color--primary);

        svg {
            fill: currentColor;
        }
    }
}

.heading-svg-icon {
    display: inline-flex;
    margin-right: 0.4em;
    vertical-align: middle;
}

.heading-svg-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.wp-block-acf-button-grid .items {
    .type-other {
        --color: var(--wp--preset--color--success);
        color: var(--color);
        border-color: var(--color);
        background-color: color-mix(in srgb, var(--color) 3%, #fff);

        &::after {
            border-color: var(--color);
        }

        &:hover {
            color: var(--color);
            background-color: color-mix(in srgb, var(--color) 15%, #fff);
        }
    }
}

/* アイキャッチ画像 PC表示位置調整（対象ページのみ） */
@media screen and (min-width: 651px) {
    .page-id-4386 .page-header > .image img,  /* 歴史 */
    .page-id-4388 .page-header > .image img,  /* 医師紹介 */
    .page-id-4452 .page-header > .image img,  /* Wi-Fi */
    .page-id-4390 .page-header > .image img,  /* 診療案内 */
    .page-id-4412 .page-header > .image img,  /* 子供の近視 */
    .page-id-4414 .page-header > .image img,  /* オルソ */
    .page-id-4474 .page-header > .image img   /* 目の病気 */
    {
        object-position: 50% 35%;
    }
}