:root {
    --font-family-en: 'Roboto', sans-serif;
    --font-family-num: 'oswald', sans-serif;
    --font-family-jp: 'noto sans japanese', sans-serif;
    --color-blue : #214083;
    --color-blue-light : #1657aa;
    --color-red : #D74141;    
    --color-yellow : #F7AC1C;
    --color-orange : #F18329;
    --color-white : #fff;
    --color-black : #000;
    --color-text : #282848;
    --color-border : #BCC5D9;
    --color-bg : #f4f4f4;

    --size-sm: 640px;
    --size-md: 768px;
    --size-lg: 1024px;
    --size-xl: 1280px;
}

body {
    font-family: var(--font-family-jp);
    color: var(--color-text);
    font-size: clamp(8px, calc(10 / 912 * 100vw), 12px);
    @media (width < 768px) {
        font-size: calc(10 / 390 * 100vw);
    }
}

.is-sp {
    @media (width > 912px) {
        display: none;
    }    
}

.color-blue {
    color: var(--color-blue);
}
.color-orange {
    color: var(--color-orange);
}
.color-blue-light {
    color: var(--color-blue-light);
}

.--align-center {
    text-align: center;
}
.--align-left {
    text-align: left;
}
.--align-right {
    text-align: right;
}
.c-flex {
    display: flex;
}


.l-wrap-main {
    background: var(--color-blue);    
    padding: 6px;
    overflow: clip;
    @media (width < 768px) {
        padding: 4px;
    }
    body[data-page="sell"] & {
        background: none;
        padding: 0;
    }
}


.l-main {
    background: var(--color-white);
    border-radius: min(1.6em, 16px);
    @media (width < 768px) {
        border-radius: 1em;
    }
}

.hl-section-common {
    font-size: 3.5em;
    font-weight: 600;
    @media (width < 768px) {
        font-size: 2.5em;
    }
}


.l-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    .c-inner {
        position: relative;
        display: flex;
        width: 100%;
        padding-block: 24px 0;
        padding-inline: max(2vw, 16px);
        @media (width < 768px) {
            padding-block: 16px 0;
            flex-direction: column;
            gap: 1.2em;
        }
    }
    .header-logo {
        @media (width >= 768px) {
            position: absolute;
            left: min(2.5vw);
        }
        @media (width < 768px) {
        }
        &:not(.--wide) {
            left: 40px;
            top: 0;
            &::before,
            &::after {
                content: '';
                display: block;
                width: min(1.6em, 16px);
                aspect-ratio: 1/1;
                background: url(/regeneration/assets_img/common/parts_curve_w.svg) no-repeat center/contain;
                position: absolute;
            }
            &::before {
                top: 0;
                right: -16px;
            }
            &::after {
                bottom: -16px;
                left: 20px;
            }
            a {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 150px;
                aspect-ratio: 1/1;
                border-radius: 0 0 min(1.6em, 16px) 0;
                background: var(--color-white);
                img {
                    width: 64%;
                    height: auto;
                }
            }            
        }
        &.--wide a {
            display: inline-block;
            position: relative;
            img {
                width: auto;
                height: 44px;
            }
            .c-caption {
                display: block;
                font-size: min(1.2em, 12px);
                color: var(--color-text);
                margin-bottom: .5em;
                font-weight: 600;
                opacity: .7;
            }
            @media (width < 768px) {
                img {
                    width: auto;
                    height: 3.5em;
                }                
                .c-caption {
                    display: none;
                }
            }
        }
    }
    .header-contact {
        position: absolute;
        right: 6px;
        top: 6px;
        @media (width < 768px) {
            right: 4px;
            top: 4px;
        }
        body[data-page="sell"] & {
            right: 0;
            top: 0;
        }
        a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: min(12.8vw, 128px);
            aspect-ratio: 6/5.5;
            border-radius: 0 0 0 min(1.6em, 16px);
            background: var(--color-blue);
            @media (width < 768px) {
                width: 5em;
                border-radius: 0 0 0 1em;
            }            
            span {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1em;
                color: var(--color-white);
                font-size: min(1.3em, 13px);
                transition: .3s opacity;
                &::before {
                    content: '';
                    display: block;
                    width: min(64%, 44px);
                    aspect-ratio: 48/33.6;
                    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-Envelope%22%3E%3Cpath%20d%3D%22M2%206a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6z%22%2F%3E%3Cpath%20d%3D%22M2%208l7.501%206.001a4%204%200%200%200%204.998%200L22%208%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat;
                }
                @media (width < 768px) {
                    font-size: 0;
                    &::before {
                        width: calc(35 / 390 * 100vw);
                    }
                }
            }
            @media (hover: hover) {
                &:hover {
                    span {
                        opacity: .7;
                    }
                }
            }
        }
        &::before, &::after {
            content: '';
            display: block;
            background: url('/regeneration/assets_img/common/parts_curve_blue.svg') center/contain no-repeat;
            width: min(1.6em, 16px);
            aspect-ratio: 1/1;
            position: absolute;
            rotate: 90deg;
            @media (width < 768px) {
                width: 1em;
            }
        }
        &::before {
            left: calc(-1 * min(1.6em, 16px));
            top: 0;
            @media (width < 768px) {
                left: calc(-1 * 1em);
            }
        }
        &::after {
            right: 0;
            bottom: calc(-1 * min(1.6em, 16px));
            @media (width < 768px) {
                bottom: calc(-1 * 1em);
            }
        }
    }
}
.header-nav {
    margin-inline: auto;
    > ul {
        display: flex;
        gap: 1.2em;
        li {
            line-height: 1;
            font-size: min(2em, 20px);
            a {
                display: flex;
                padding: .5em 2em;
                background: #e9e9e9;
                border-radius: 100vmax;
                font-weight: 600;
                transition: background .3s;
                &.is-active {
                    background: var(--color-orange);
                    color: var(--color-white);
                }
                @media (hover: hover) {
                    &:not(.is-active):hover {
                        background: var(--color-yellow);
                        color: var(--color-white);
                    }
                }
            }
        }
        @media (width < 768px) {
            gap: .5em;
            li {
                font-size: 1.5em;
            }
        }
    }
}
.l-article-header {
    padding-block: min(11em, 120px) min(2.4em, 24px);
    padding-inline: max(2vw, 10px);
    .c-inner {
        max-width: 1200px;
        margin-inline: auto;
    }
    @media (width < 768px) {
        padding-block: 12em 1.6em;
    }
}
.l-article-bukken {
    padding-block: 3em;
    padding-inline: max(2vw, 10px);
    border-radius: min(1.6em, 16px); 
    position: relative; 
    z-index: 1;
    background: var(--color-white);
    @media (width < 768px) {
        padding-top: 0;
    }
    &.is-no-pagination {
        padding-bottom: 8em;
        @media (width < 768px) {
            padding-bottom: 4em;
        }
    }
}
.hl-page-title {
    font-size: 4.4em;
    font-weight: 600;
    @media (width < 768px) {
        font-size: 3.2em;
    }
}
.hl-shoulder {
    font-size: 1.5em;
    margin-bottom: .4em;
}
.hl-detail-title {
    font-size: 3.6em;
    font-weight: 600;
    @media (width < 768px) {
        font-size: 2.5em;
    }
}
.c-page-description {
    font-size: 1.6em;
    font-weight: 400;
    *+& {
        margin-top: .8em;
    }
    @media (width < 768px) {
        font-size: 1.5em;
    }
}
.l-breadcrumb {
    position: relative;
    margin-top: -0.64em;
    padding-inline: max(2vw, 10px);
    .p-breadcrumb {
        padding: .64em 1.5em;
        max-width: 1200px;
        margin-inline: auto;
        background: var(--color-bg);
        border-radius: 100vmax;
    }
}
.p-breadcrumb {
    display: flex;
    gap: 1em;
    font-size: 1.05em;
    li {
        display: inline-flex;
        gap: 1em;
        &::after {
            content: '>';
        }
    }
}

.l-wrap-main .l-article {
    position: relative;
    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 10svh;
        background: var(--color-blue);
        position: absolute;
        bottom: 0;
        z-index: 0;
    }
}

/* footer */
.l-footer-bottom {
    display: grid;
    padding: 4em 0;
    justify-content: center;
    padding-inline: max(2vw, 10px);
    .hl-corp-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        strong {
            font-size: 2rem;
            font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", serif;
        }
        span {
            margin-left: 0;
            padding-left: 30px;
            border-left: 1px solid #ccc;
            img {
                height: 45px;
                width: auto;
            }
        }
        @media (width < 768px) {
            flex-direction: column;
            gap: 1.5em;
            strong {
                font-size: 2em;
                padding-left: .5em;
            }
            span {
                margin-left: 0;
                padding-left: 0;
                border-left: none;
                img {
                    height: 4em;
                }
            }
        }
    }
    p:not(.hl-corp-footer) {
        font-size: 1.3em;
        text-align: center;
        line-height: 1.7;
        margin: 30px auto 0;
    }
    .c-flex {
        font-size: 1.1em;
        gap: 2em;
        justify-content: center;
        margin-block: 2em 0;
        padding: 1em 2em;
        border-radius: 100vmax;
        background: var(--color-bg);
        a {
            display: flex;
            gap:.5em;
            &::after {
                content: '';
                display: block;
                width: .8em;
                aspect-ratio: 1/1;
                border: none;
                transform: rotate(0);
                background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-LinkOut%22%3E%3Cpath%20d%3D%22M13.5%2010.5L21%203%22%2F%3E%3Cpath%20d%3D%22M16%203h5v5%22%2F%3E%3Cpath%20d%3D%22M21%2014v5a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h5%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
                background-size: contain;
                opacity: .7;                
            }
            @media (hover: hover) {
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        @media (width < 768px) {
            flex-wrap: wrap;
            gap: 1em 2em;
            background: none;
            border-radius: 0;
            margin-top: 1em;
        }
    }
    small {
        font-size: 1.1em;
        text-align: center;
        margin-top: 2em;
    }
}

.p-block-cta {
    background: var(--color-blue);
    padding-block: 6em;
    padding-inline: max(2vw, 16px);
    @media (width < 768px) {
        padding-block: 4em;
    }
    .c-inner {
        max-width: 1100px;
        margin-inline: auto;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 2.5em 4em;
        color: #fff;
        @media (width < 768px) {
            grid-template-columns: 1fr;
            gap: 2em 0;
        }
        h2 {
            @media (width >= 768px) {
                grid-column: span 2;
            }
        }
    }
    h2 {
        font-size: 2.5em;
        font-weight: 600;
        position: relative;
        @media (width < 768px) {
            font-size: 2em;
        }
        &::before {
            content: '';
            width: 1em;
            height: 3px;
            background: var(--color-orange);
            display: block;
            border-radius: 100vmax;
            position: absolute;
            bottom: 0;
            z-index: 1;
        }
        &::after {
            content: '';
            width: 100%;
            height: 3px;
            background: var(--color-bg);
            opacity: .2;
            display: block;
            margin-top: .6em;
            border-radius: 100vmax;
        }        
    }
    p {
        font-size: 1.4em;
        line-height: 1.7;
        margin-bottom: 1em;
    }
    .p-list-cta {
        display: grid;
        gap: 2em;
        @media (width < 768px) {
            text-align: center;
            li:has(.dedicated_line) {
                > span:not(.dedicated_line) {
                    font-size: 1.5em;
                    padding-bottom: .5em;
                    display: inline-block;
                }
            }
        }
        > li > span {
            font-size: 1.1em;
        } 
    }
    .c-btn-detail.--cta {
        border-radius: 100vmax;
        padding: 1.5em 2em;
        background: var(--color-white);
        transition: .3s background;
        span {
            color: var(--color-blue);
            font-weight: 600;
            font-size: 1.6em;
            line-height: 1.3;
            &::before {
                background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23214083%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-Envelope%22%3E%3Cpath%20d%3D%22M2%206a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6z%22%2F%3E%3Cpath%20d%3D%22M2%208l7.501%206.001a4%204%200%200%200%204.998%200L22%208%22%2F%3E%3C%2Fsvg%3E');
            }
        }
        @media (hover: hover) {
            &:hover {
                background: var(--color-yellow)!important;
            }
        }
    }
}

/* parts 選用ダイヤル */
a.dedicated_line {
    display: inline-block;
    position: relative;
    text-decoration: none;
    font-size: 4em;
    font-family: var(--font-family-num);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 12px;
    color: var(--color-white);
    @media (width >= 768px) {
        pointer-events: none;
    }
}
/* a.dedicated_line::before {
    content: '';
    display: block;
    position: absolute;
    width: 1em;
    aspect-ratio: 60/34;
    background: url(/regeneration/assets_img/common/ico_fd.svg) center/contain no-repeat;
    left: 0;
    bottom: 4px;
} */


/* parts: faq */
.l-section-root.section-faq {
    padding-inline: max(2vw, 16px);    
    .c-inner {
        padding-block: 10em;
        @media (width < 768px) {
            padding-block: 6em;
        }
    }
}
.p-list-faq {
    display: grid;
    gap: 2.4em;
    max-width: 1040px;
    margin-inline: auto;
    *+& {
        margin-top: 3em;
    }
}
.p-list-faq__item {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    font-size: 1.35em;
    border-radius: .8em;
    padding: 1.6em 3em;
    box-shadow: 0 4px 8px rgba(0, 0, 40, .05);
    @media (width < 768px) {
        padding: 1.5em 1em;
    }
}
.p-list-faq__item__q {
    display: grid;
    grid-template-columns: 2.75em auto;
    gap: 0 1.5em;
    align-items: center;
    font-weight: 600;
    @media (width < 768px) {
        grid-template-columns: 1.6em auto;
        gap: 0 1em;
    }    
    &::before {
        content: 'Q';
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.2em;
        aspect-ratio: 1/1;
        background-color: var(--color-yellow);
        border-radius: 50%;
        font-size: 1.4em;
        font-family: var(--font-family-en);
        font-weight: 700;
        @media (width < 768px) {
            width: 1.6em;
            font-size: 1.1em;
        }        
    }
    span {
        font-size: 1.1em;
    }
}
.p-list-faq__item__a {
    margin-top: 1.4em;
    padding-top: 1.4em;
    border-top: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: 2.75em auto;
    gap: 1.5em;
    align-items: center;
    @media (width < 768px) {
        grid-template-columns: 1.6em auto;
        gap: 1em;
    }    
    &::before {
        content: 'A';
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2.2em;
        aspect-ratio: 1/1;
        background-color: var(--color-blue);
        border-radius: 50%;
        font-size: 1.4em;
        font-family: var(--font-family-en);
        font-weight: 700;
        color: var(--color-white);
        @media (width < 768px) {
            width: 1.6em;
            font-size: 1.1em;
        }
    }
    div {
        line-height: 1.6;        
    }
}


/* parts 物件一覧 フィルター */
.c-filter-form {
    display: grid;
    align-items: end;
    grid-template-columns: auto auto;
    gap: 0 4em;
    max-width: 1220px;
    margin-inline: auto;
    margin-bottom: 2em;
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgb(255 255 255 / 90%);
    border-radius: .75em;
    @media (width < 768px) {
        grid-template-columns: auto;
        gap: 0;
    }
    .c-result {
        padding: 10px;
        font-size: 1.7em;
        display: flex;
        align-items: baseline;
        b {
            font-size: 2em;
            color: var(--color-orange);
            margin-right: .2em;
        }
        @media (width < 768px) {
            font-size: 1.5em;
            justify-content: right;
            b {
                font-size: 1.5em;
            }
        }        
    }
    .c-filter {
        background: #f4f4f4;
        padding: 10px;
        border-radius: .75em;
        font-size: 1.35em;
        display: grid;
        grid-template-columns: repeat(3, auto);
        gap: .5em;
        @media (width < 768px) {
            grid-template-columns: 40% 40% auto;
            font-size: 1.2em;
        }
    }    
}
.c-select {
    border: 1px solid var(--color-border);
    border-radius: .4em;
    background: var(--color-white);
    select {
        border-radius: .4em;
        padding: 1em 1em;
        width: 100%;
        height: 100%;
        background: transparent;
        @media (width < 768px) {
            padding: 1em .5em;
        }        
    }
}
.c-btn-search {
    padding: .9em 2em;
    background: var(--color-orange);
    border-radius: .4em;
    color: var(--color-white);
    font-weight: 600;
    text-align: center;
    line-height: 0;
    span {
        display: inline-flex;
        gap: .5em;
        align-items: center;
        &::before {
            content: '';
            display: block;
            width: 1.2em;
            aspect-ratio: 1/1;
            background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-Search%22%3E%3Cpath%20d%3D%22M21%2021l-4.486-4.494M19%2010.5a8.5%208.5%200%201%201-17%200%208.5%208.5%200%200%201%2017%200z%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat;
        }
    }
    @media (width < 768px) {
        padding: .9em .5em;
        span {
            font-size: 0;
            &::before {
                width: 1.2rem;
            }
        }
    }    
}

/* parts 物件一覧 */
.p-list-bukken {
    display: grid;
    gap: 1.5em;
    max-width: 1200px;
    margin-inline: auto;
}
.p-list-bukken-item {
    border: 1px solid #e9e9e9;
    background: #fff;
    border-radius: 1em;
    font-size: 1.25em;
    position: relative;
    box-shadow: 0 8px 16px rgba(0, 0, 40, .05);
    transition: .3s box-shadow;
    &.is-filter-hidden,
    &.is-page-hidden {
        display: none;
    }
    @media (width < 768px) {
        font-size: 1.35em;
    }
    > .c-inner {
        display: grid;
        padding: .5em;
        @media (width < 768px) {
            grid-template-columns: auto;
        }
        @media (768px <= width <= 1024px) {
            grid-template-columns: 30% auto min(18em, 180px);
        }        
        @media (width > 1024px) {
            grid-template-columns: 40% auto min(18em, 180px);
        }
        
    }
    .c-img {
        border-radius: .8em;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            overflow-clip-margin: unset;            
        }
    }
    .c-text {
        padding: 1em 2em;
        @media (width < 768px) {
            padding: 1.5em 1em;
        }
        h2 {
            font-size: 1.5em;
            font-weight: 600;
            color: var(--color-blue);
        }
    }
    .c-price {
        display: flex;
        flex-direction: column;
        justify-content: end;
        padding: 1em;
        background: var(--color-bg);
        border-radius: 0 .75em .75em 0;
        text-align: right;
        .c-btn-detail {
            background:var(--color-blue-light);
            margin-top: 1em;
            transition: .3s background;
            @media (width < 768px) {
                margin-top: 0em;
                font-size: 1.1em;
                padding-inline: 1em;
            }
            span {
                padding-left: .75em;
                display: inline-flex;
                align-items: center;
                gap: .5em;
                &::after {
                    content: '';
                    display: block;
                    width: .5em;
                    aspect-ratio: 1/2;
                    opacity: .8;
                    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ChevronRight%22%3E%3Cpath%20d%3D%22M8%204l8%208-8%208%22%2F%3E%3C%2Fsvg%3E') center/cover no-repeat;
                }
            }
        }
        @media (width < 768px) {
            padding: .5em;
            display: grid;
            width: 100%;
            grid-template-columns: 1fr auto;
            justify-content: space-around;
            gap: 1em;
            align-items: center;
            border-radius: 0 0 .5em .5em;
            text-align: unset;
            .c-bukken-item__price {
                grid-template-columns: 1fr auto;
                gap: .5em;
            }
        }        
    }
    .c-bukken-item__address {
        margin-block: .64em 0;
        display: flex;
        align-items: center;
        gap: .2em;
        padding-bottom: .5em;
        border-bottom: 1px solid #e9e9e9;
        &::before {
            content: '';
            display: block;
            width: 1.2em;
            aspect-ratio: 1/1;
            position: relative;
            top:.1em;
            background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2248px%22%20fill%3D%22%231657aa%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5c-1.38%200-2.5-1.12-2.5-2.5s1.12-2.5%202.5-2.5%202.5%201.12%202.5%202.5-1.12%202.5-2.5%202.5z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
        }        
    }
    .c-bukken-item__description {
        line-height: 1.4;
        margin-top: 1.2em;
    }
    .c-bukken-item__info {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 6px 1em;
        margin-block: .7em 1em;
        @media (width < 768px) {
            grid-template-columns: auto;
            gap: 0;
        }
        > div {
            border-bottom: 1px solid var(--color-bg);
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: baseline;
            @media (width < 768px) {
                grid-template-columns: 6em 1fr;
            }            
            dt {
                padding: .5em 1em;
                background: var(--color-bg);
                border-radius: .2em;
                font-weight: 400;
                font-size: .85em;               
            }
            dd {
                padding: .5em 1em .4em;
            }            
            &:nth-of-type(3) {
                @media (width >= 768px) {
                    grid-column: span 2;
                }
            }
        }
    }
    &.is-sold {
        pointer-events: none;
        .c-bukken-item__address { display: none;}
        .c-bukken-item__price { display: none;}
        .c-bukken-item__description { display: none;}
        box-shadow: none;
        .c-btn-detail {
            background: var(--color-red);
            > span {
                font-size: 0;
                &::before { 
                    content: '成約済み';
                    font-size: 1rem;
                 }
                &::after { display: none; }
            }
        }
    }
    @media (hover: hover) {
        &:not(.is-sold):hover {
            box-shadow: 0 8px 24px rgba(0, 0, 40, .2);
            .c-price .c-btn-detail {
                background: var(--color-text);
            }
        }
    }
}
/* parts 物件一覧 ページネーション */
.c-pagenation {
    padding-block: 4em;
    @media (width < 768px) {
        padding-block: 3em 1em;
    }
    .c-flex {
        justify-content: center;
        gap: 1.5em;
        @media (width < 768px) {
            gap: .5em;    
        }
    }
    .c-btn-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        aspect-ratio: 1/1;
        border-radius: 50%;
        background: var(--color-white);
        @media (width < 768px) {
            width: 2.2rem;
        }        
        &::before {
            content: '';
            display: block;
            width: 1.4em;
            aspect-ratio: 1/1;
            background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ArrowRight%22%3E%3Cpath%20d%3D%22M4%2012h16%22%2F%3E%3Cpath%20d%3D%22M13%205l7%207-7%207%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
        }
        &.--prev {
            margin-right: 1em;
            &::before {
                transform: rotate(180deg);
            }
        }
        &.--next {
            margin-left: 1em;
        }        
        &.is-disabled {
            opacity: .1;
            pointer-events: none;
        }
    }
    .c-btn-page {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        aspect-ratio: 1/1;
        font-size: 1.6em;
        border-radius: 50%;
        font-family: var(--font-family-en);
        @media (width < 768px) {
            width: 2.2rem;
        }        
        &.--active {
            background: var(--color-orange);
            color: var(--color-white);
        }
    }
}
.c-bukken-item__price {
    display: grid;
    gap: .25em;
    align-items: baseline;
    dt {
        font-weight: 400;
    }
    dd {
        font-size: 1.5em;
        b {
            margin-right: .2em;
            color: var(--color-orange);
        }
    }
}
.c-btn-detail {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .8em 2em;
    background: #000;
    border-radius: .4em;
    transition: .3s background;
    span {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 1em;
        color: #fff;
    }
    &.--contact {
        span::before {
            content: '';
            display: block;
            width: 1.4em;
            aspect-ratio: 1/1;
            background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-Envelope%22%3E%3Cpath%20d%3D%22M2%206a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6z%22%2F%3E%3Cpath%20d%3D%22M2%208l7.501%206.001a4%204%200%200%200%204.998%200L22%208%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat;
        }
    }    
    &.--cta {
        span::before {
            content: '';
            display: block;
            width: 1.2em;
            aspect-ratio: 1/1;
            background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-Envelope%22%3E%3Cpath%20d%3D%22M2%206a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v12a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V6z%22%2F%3E%3Cpath%20d%3D%22M2%208l7.501%206.001a4%204%200%200%200%204.998%200L22%208%22%2F%3E%3C%2Fsvg%3E') center/contain no-repeat;
        }
    }
    @media (hover: hover) {
        &:not(.--prev):hover {
            background: var(--color-text)!important;
        }
    }
}

.c-bukken-item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4em;
    font-size: .85em;
    li {
        border: 1px solid var(--color-border);
        padding: .4em .4em;
        border-radius: .4em;
    }
}


/* page 物件詳細 */
/* parts 物件詳細 ヘッダー */

.l-hero-detail {
    max-width: 1200px; 
    margin-inline: auto; 
    display: grid; 
    grid-template-columns: auto 250px; 
    gap: 4em; 
    @media (width < 768px) {
            margin-top: 2em;
    }
}
.l-bukken-detail-inner {
    max-width: 1200px; 
    margin-inline: auto; 
    display: grid; 
    grid-template-columns: auto 250px; 
    gap: 4em; 
    margin-top: 4em;
    @media (width < 913px) {
        grid-template-columns: auto;
        gap: 0;
        .c-aside {
            display: none;
        }
    }
}

.c-bukken-detail-header {
    display: grid;
    grid-template-columns: auto 280px;
    gap: 4em;
    align-items: end;
    @media (width < 768px) {
        grid-template-columns: auto;
        gap: 0;
    }
    .c-flex {
        gap: 2em;
        margin-top: 1em;
        align-items: center;
        .c-address {
            font-size: 1.4em;            
            display: flex;
            align-items: center;
            gap: .2em;
            &::before {
                content: '';
                display: block;
                width: 1.2em;
                aspect-ratio: 1/1;
                background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2248px%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2248px%22%20fill%3D%22%231657aa%22%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5c-1.38%200-2.5-1.12-2.5-2.5s1.12-2.5%202.5-2.5%202.5%201.12%202.5%202.5-1.12%202.5-2.5%202.5z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
            }
        }
        .c-updated {
            font-size: 1.2em;
            opacity: .7;
        }
    }
    .c-btn-detail {
        font-size: 1.4em;        
        background: var(--color-blue-light);
        span {
            line-height: 1.3;
            font-weight: 600;
        }
        @media (width < 768px) {
            margin-top: 1em;
            br {
                display: none;
            }
            &.--contact.is-fixed {
                position: fixed;
                top: 0;
                z-index: 99;
                width: 92vw;
            }
        }
    }
}
.section-bukken-detail {
    &:not(.section-around) {
        background: #fff;
        padding: 2.4em 0 2em; 
    }
    p {
        font-size: 1.7em;
        line-height: 1.6;
        @media (width < 768px) {
            font-size: 1.5em;
        }
    }
    pre {
        font-size: 1.3em;
        line-height: 1.7;
        padding: 1.5em;
        background: var(--color-bg);
        border-radius: .5em;
        white-space: pre-wrap;
        *+& {
            margin-top: 1.5em;
        }
        @media (width < 768px) {
            padding: 1.2em 1em;
        }
    }
    &.section-around {
        margin: 3em auto 0;
        max-width: 1200px;
        background: #fff; 
        padding: 2.4em 0 2em; 
    }
}
.hl-section-detail {
    font-size: 2em;
    font-weight: 600;
    letter-spacing: .1em;
    margin-bottom: 1em;
    position: relative;
    &:not(.--no_border) {
        &::before {
            content: '';
            width: 1em;
            height: 3px;
            background: var(--color-orange);
            display: block;
            border-radius: 100vmax;
            position: absolute;
            bottom: 0;
            z-index: 1;
        }
        &::after {
            content: '';
            width: 100%;
            height: 3px;
            background: var(--color-bg);
            display: block;
            margin-top: .6em;
            border-radius: 100vmax;
        }
    }
}
.hl-section-detail-sub {
    display: flex;
    gap: .7em;
    margin-bottom: 1em;
    font-size: 1.5em;
    font-weight: 600;
    &::before {
        content: '';
        width: 3px;
        height: 1.2em;
        border-radius: 100vmax;
        background: var(--color-orange);
    }
    *+& {
        margin-top: 3em;
    }
}
.p-grid-around {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 2em 1.5em;
    padding-block: 1em;
    @media (width < 768px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 1em 1em;
    }
    > figure {
        .c-img {
            aspect-ratio: 3/2;
            overflow: hidden;
            border-radius: .4em;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                overflow-clip-margin: unset;
            }
        }
        figcaption {
            margin-top: .6em;
            font-size: 1.2em;
            padding: 0 .5em;
        }
    }
}
.p-grid-map__map {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 1em;
    min-height: 480px;
}
.p-grid-map__map iframe {
    width: 100%;
}
.p-block-around {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
    margin-top: 2em;
    @media (width < 913px) {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .p-grid-map__content {
        position: sticky;
        top: 20px;
    }
}
.p-grid-map__content {
    background: #fff;
    font-size: 1.3em;
    display: grid;
    border-radius: 1em;    
    div {
        padding: 1.5em 1em;
    }
    @media (width < 768px) {
        font-size: 1.4em;
        div {
            padding: 1.5em .5em;
        }
    }    
    dt {
        display: flex;
        gap: .7em;
        margin-bottom: .8em;
        &::before {
            content: '';
            width: 3px;
            height: 1.2em;
            border-radius: 100vmax;
            background: var(--color-orange);
            position: relative;
            top: -.1em;
        }
    }
    dd {
        font-size: .9em;
        line-height: 1.7;
    }
    > div+div {
        border-top: 1px solid #f2f2f2;
    }
}
.p-grid-map {
    display: grid;
    grid-template-columns: 53% 1fr;
    align-items: start;
    background: var(--color-white);
    border-radius: 1em;
    margin-bottom: 4em;
}
.c-table-detail {
    font-size: 1.4em;
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--color-bg);
    border-bottom: 1px solid var(--color-bg);
    tr {
        border-top: 1px solid var(--color-bg);
        border-bottom: 1px solid var(--color-bg);        
    }
    th {
        padding: .7em 1em;
        font-size: .9em;
        background: var(--color-bg);
        width: 17%;
        font-weight: normal;
        @media (width < 768px) {
            display: block;
            width: 100%;
            padding: .5em 1em;
            border-radius: 100vmax;
        }
    }
    td {
        padding: .7em 1em;
        &:not([colspan="3"]) {
            width: 33%;            
        }
        @media (width < 768px) {
            display: block;
            width: 100%!important;
            padding: .7em .9em 1em;
        }        
    }    
}
.p-list-equipments {
    display: grid;
    gap: 4px;
    @media (width < 768px) {
        gap: 8px;
    }    
}
.p-list-equipments__item {
    display: grid;
    grid-template-columns: 12em auto;
    align-items: center;
    background: var(--color-bg);
    padding: 1.2em;
    gap: 2em;
    border-radius: .4em;
    @media (width < 768px) {
        grid-template-columns: 1fr;
        gap: 1em;
        border-radius: .6em;
    }
    dt {
        font-size: 1.25em;
    }
    dd {
        ul {
            display: grid;
            gap: 4px;
            grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
            li {
                max-width: 100%;
                height: auto;
                img {
                    mix-blend-mode: multiply;
                }
            }
        }
    }
}
.c-box-sticky {
    position: sticky;
    top: 40px;
    .c-img {
        aspect-ratio: 16/9;
        overflow: hidden;
        border-radius: .3em;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            overflow-clip-margin: unset;
        }
    }
    h2 {
        font-size: 1.4em;
        line-height: 1.2;
        font-weight: 600;
        margin-block: 1em .5em;
    }
    .c-address {
        font-size: 1.1em;
        margin-bottom: 1.5em;
    }
    .c-bukken-item__price {
        font-size: 1.4em;
        line-height: 1;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 1em;
        align-items: end;
        text-align: right;
    }
    .p-list-btns {
        margin-top: 1.5em;
        .c-btn-detail {
            font-size: 1.2em;
            line-height: 1.3;
            background: var(--color-blue-light);
        }
        .c-text-link {
            margin-top: 1em;
            font-size: 1.1em;
            a {
                display: inline-flex;
                align-items: center;
                gap: .8em;
                &::after {
                    content: '';
                    display: block;
                    width: 1.5em;
                    aspect-ratio: 1 / 1;
                    background: currentColor url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ChevronRight%22%3E%3Cpath%20d%3D%22M8%204l8%208-8%208%22%2F%3E%3C%2Fsvg%3E) center center no-repeat;
                    background-size: auto 60%;
                    border-radius: 50%;
                }
                @media (hover: hover) {
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
}

.p-list-btns-around {
    position: relative;
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    gap: 1em;
    justify-content: center;
    background: var(--color-bg);
    border-radius: 100vmax;
    @media (width < 768px) {
        display: grid;
        gap: 0;
        background: none;
        border-radius: 0;
    }
    li:nth-of-type(2) {
        order: -1;
        margin-top: .8em;
        @media (width < 768px) { 
            order: 2;
        }
    }
    *+& {
        margin-block: 5em 3em;
        @media (width < 768px) {
            margin-block: 3em 1em;
        }        
    }
    .c-btn-detail {
        &.--contact {
            background: var(--color-blue-light);
            font-size: 1.6em;
            border-radius: 100vmax;
            padding: 1.2em 2.4em;
            transition: .3s background;
            @media (width < 768px) { 
                font-size: 1.5em;
                &.is-fixed {
                    position: fixed;
                    top: 0;
                    z-index: 99;
                    width: 92vw;                    
                }
            }
        }
        &.--prev {
            background: none;
            font-size: 1.4em;
            position: absolute;
            left: 0;
            span {
                color: var(--color-text);
                display: flex;
                gap:.8em;
                &::before {
                    content: '';
                    display: block;
                    width: 1.5em;
                    aspect-ratio: 1/1;
                    background: currentColor url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ChevronRight%22%3E%3Cpath%20d%3D%22M8%204l8%208-8%208%22%2F%3E%3C%2Fsvg%3E') center center no-repeat;
                    background-size: auto 60%;
                    rotate: 180deg;
                    border-radius: 50%;
                }
            }
            @media (width < 768px) { 
                position: relative;
                order: 2;
            }
            @media (hover: hover) {
                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }
}

/* Slideshow — メイン画像エリア */
.c-hero-imgs {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius: 8px;
    background: #222;
    @media (width < 1100px) {
        aspect-ratio: 4/3;
    }
}
.c-list-imgs {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
    will-change: transform;
    > .c-img {
        flex: 0 0 100%;
        width: 100%;
        height: 100%;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            overflow-clip-margin: unset;
        }
    }
}

/* 前へ / 次へ ボタン */
.c-slide-prev,
.c-slide-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: min(4em, 40px);
    height: min(4em, 40px);
    background: rgba(255, 255, 255, 0.85);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: background 0.2s;
    &:hover {
        background: #fff;
    }
    &::before {
        content: '';
        display: block;
        width: 2.5em;
        aspect-ratio: 1 / 1;
        background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23222%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ChevronRight%22%3E%3Cpath%20d%3D%22M8%204l8%208-8%208%22%2F%3E%3C%2Fsvg%3E') center center no-repeat;
        background-size: auto 60%;
        border-radius: 50%;
    }
}
.c-slide-prev {
    left: 12px;
    &::before {
        transform: rotate(180deg);
    }
}
.c-slide-next {
    right: 12px;
    &::before {
        transform: rotate(0deg);
    }
}

/* キャプション表示エリア */
.c-slide-caption {
    margin-top: 0.75em;
    font-size: 1.3em;
    color: #444;
    text-align: center;
    min-height: 1.5em;
    letter-spacing: .05em;
}

/* 枚数カウンター */
.c-slide-counter {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.1em;
    line-height: 1;
    padding: 5px 12px;
    border-radius: 100vmax;
    pointer-events: none;
    letter-spacing: .05em;
}

/* サムネイルリスト */
.c-list-thumbs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    > .c-img {
        aspect-ratio: 4/3;
        overflow: hidden;
        border-radius: 4px;
        background: #c6c6c6;
        cursor: pointer;
        border: 1px solid transparent;
        transition: border-color 0.2s, opacity 0.2s;
        opacity: 0.6;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            overflow-clip-margin: unset;
        }
        &.is-active {
            border-color: var(--color-orange);
            opacity: 1;
        }
        &:hover {
            opacity: 1;
        }
        &.is-hidden {
            display: none;
        }
    }
}

/* サムネイルページ送りナビ */
.c-thumbs-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    margin-top: 0.6em;
}
.c-thumbs-prev,
.c-thumbs-next {
    width: 28px;
    height: 28px;
    background: #ddd;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
    &:hover { background: #bbb; }
    &::before {
        content: '';
        display: block;
        width: 7px;
        height: 7px;
        border-top: 2px solid #555;
        border-right: 2px solid #555;
    }
}
.c-thumbs-prev {
    &::before { transform: rotate(-135deg) translateY(2px); }
}
.c-thumbs-next {
    &::before { transform: rotate(45deg) translateY(2px); }
}
.c-thumbs-page {
    font-size: 1.2em;
    color: #666;
    min-width: 3.5em;
    text-align: center;
    letter-spacing: .05em;
}

/* タブレット・スマホ：縦積み＋横スクロールサムネイル */
@media (width <= 912px) {
    .l-hero-detail {
        grid-template-columns: 1fr;
        gap: 0.8em;
    }
    .c-hero-thumbs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        &::-webkit-scrollbar { display: none; }
    }
    /* SP は全サムネイルを横スクロールで表示 */
    .c-list-thumbs > .c-img.is-hidden {
        display: block;
    }
    .c-thumbs-nav {
        display: none;
    }
    .c-list-thumbs {
        display: flex;
        gap: 6px;
        width: max-content;
        > .c-img {
            flex: 0 0 72px;
            width: 72px;
        }
    }
}


/* root */
.l-section-hero-root {
    margin-top: 90px;
    padding-inline: max(2vw, 16px);
    @media (width < 768px) {
        margin-top: 10.5em;
        padding-inline: 0;
    }
    .c-inner {
        margin-inline: auto;
        display: grid;
        grid-template-columns: auto min(24em, 280px);
        gap: min(4vw, 64px);
        /* align-items: end; */
align-items: center;
        padding-right: 2vw;
        max-width: 1720px;
        @media (913px <= width < 1100px) {
            align-items: unset;
        }
        @media (width < 913px) {
            grid-template-columns: auto;
            gap: 0;
            padding-right: 0;
        }        
        .c-hero {
            position: relative;
            .c-img {
                height: 640px;
                overflow: hidden;
                border-radius: 16px;
                background: #222;
                /* margin-top: 90px; */
                @media (913px <= width < 1100px) {
                    height: 100%;
                }
                @media (width < 913px) {
                    height: auto;
                    aspect-ratio: 1/1;
                    border-radius: 0;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: 80% 50%;                    
                }
            }
            .p-hero-title {
                position: absolute;
                bottom: calc(-1 * min(2em, 20px));
                left: 0;
                padding: 0 1.5em;
                background: #fff;
                border-radius: 0 min(1.6em, 16px) 0 0;
                padding: 1.5em 4em 0 0;
                @media (width < 768px) {
                    bottom: -1em;                    
                    border-radius: 0 1em 0 0;
                    padding: 1.3em 2em 0 0;
                }
                &::before,
                &::after {
                    content: '';
                    display: block;
                    width: min(1.6em, 16px);
                    aspect-ratio: 1/1;
                    background: url(/regeneration/assets_img/common/parts_curve_w.svg) no-repeat center/contain;
                    position: absolute;
                    rotate: -90deg;
                    @media (width < 768px) {
                        width: 1em;
                    }
                }
                &::before {
                    top: calc(-1 * min(1.6em, 16px));
                    left: 0;
                    @media (width < 768px) {
                        top: -1em;
                    }
                }
                &::after {
                    bottom: min(2em, 20px);
                    right: calc(-1 * min(1.6em, 16px));
                    @media (width < 768px) {
                        bottom: 1em;                        
                        right: -1em;
                    }                    
                }
            }
        }
        .c-data {
            margin-left: auto;
            /* padding-bottom: 3em; */
            @media (913px <= width < 1100px) {
                padding-block: 3em 0;
            }
            @media (width < 913px) {
                margin-left: 0;
            }
            @media (width < 768px) {
                margin-inline: auto;
                padding-bottom: 2em;
            }
            p {
                margin-top: 1em;
                text-align: right;
            }
        }
    }
}
.hl-section-hero {
    font-size: 4.8em;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .05em;
    font-feature-settings: "palt";
    @media (width < 1100px) {
        font-size: 4.5em;
    }    
    @media (width < 768px) {
        font-size: 3em;
        padding-left: min(2vw, 20px);
    }
    b {
        color: var(--color-orange);
        font-weight: 600;
    }
}
.hl-section-hero-sub {
    font-size: 1.5em;
    letter-spacing: .2em;
    margin-top: .8em;
    margin-left: 2em;
    font-feature-settings: "palt";
    @media (width < 768px) {
        font-size: 1.3em;
    }    
    span {
        display: inline-flex;
        color: var(--color-white);
        background: var(--color-text);
        padding: .4em 1em .5em;
        border-radius: 4px;
    }
}

/* 実績数値 */
.p-list-data {
    @media (width < 913px) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1em;
        padding-inline: min(2vw, 10px);
        align-items: end;
        margin-top: 2em;
    }
    @media (width < 768px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
        padding-inline: min(2vw, 10px);
        align-items: end;
        margin-top: 1em;
    }
    > div {
        font-size: 1.6em;
        padding-block: 3em 1em;
        border-bottom: 1px solid #b4b4b4;
        @media (width < 768px) {
            font-size: 1.4em;
padding-block: 2em 1em;
            .l-section-hero-root &:nth-of-type(3) {
                display: none;
            }
        }        
        dt {
            font-weight: 600;
            font-size: .9em;
        }
        dd {
            display: flex;
            gap: .4em;
            align-items: end;
            font-weight: 600;
            b {
                font-size: 4em;
                color: var(--color-orange);
                font-family: var(--font-family-num);
                line-height: 1;
                position: relative;
                bottom: -.03em;
                @media (width < 768px) {
                    font-size: 3em;
                }                
            }
            span:not(.c-number) {
                width: 1em;
            }
            >.c-number {
                display: grid;
                grid-template-columns: auto 2em;
                align-items: end;
                gap: .4em;
                font-size: 1.1em;
            }
        }
    }
}

.l-nav-point {
    margin-block: 8em;
}
.p-list-point {
    max-width: 1200px;
    margin: 4em auto 14em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5em;
    li {
        font-size: 1.4em;
        > a {
            display: block;
            background: var(--color-white);
            padding: 2em 2em 2.5em;
            border-radius: 10px;
            height: 100%;
            position: relative;
            border: 1px solid var(--color-border);
            box-shadow: 0 2px 2px rgb(0 0 0 / .05);
            &::after {
                content: '';
                display: block;
                width: 1.6em;
                aspect-ratio: 1/1;
                background: var(--color-text) url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ChevronRight%22%3E%3Cpath%20d%3D%22M8%204l8%208-8%208%22%2F%3E%3C%2Fsvg%3E) 50% 50% no-repeat;
                background-size: 60% auto;
                border-radius: 50%;
                position: absolute;
                bottom: 1em;
                right: 1em;
                rotate: 90deg;
            }
        }
        span.c-number {
            display: block;
            font-size: 1.1em;
            color: var(--color-blue);
            font-family: var(--font-family-en);
            margin-bottom: .5em;
            b {
                font-size: 1.2em;
            }
        }
        span:not(.c-number) {
            display: block;
            font-size: 1.3em;
            line-height: 1.4;
            font-weight: 600;
        }
    }
}

.hl-section-title:not(.hl-vertical) {
    font-feature-settings: "palt";
    b {
        font-weight: 600;
    }
}
.l-section#sec-point {
    margin: 0 auto;
    max-width: 1720px;
    margin-top: 8em;
    background: #f5f5f7;
    border-radius: 4em;
    padding: 8em 4vw;
    overflow: clip;
    @media (width < 913px) {
        margin-top: 2em;
        border-radius: 2em;
        padding: 6em 4vw;
    }
}


.l-section-point-item {
    filter: drop-shadow(.5em .5em 0 rgb( 33 64 131 / .1));
    > .c-inner {
        border: 1px solid var(--color-border);
        background: #fff;
        margin-inline: auto;
        border-radius: min(1.6em, 16px);
        padding: 6.5em 5em 5em;
        position: relative;
        @media (width < 768px) {
            padding: 5em 2em 3em;
            border-radius: 1em;
        }
        > *:not(.hl-section-point-item):not(.c-title) {
            font-size: 1.45em;
            line-height: 1.64;
        }
    }
    &:last-of-type {
        margin-bottom: 0;
    }
    .c-title {
        display: grid;
        align-items: center;
        gap: 3em;
        margin-bottom: 2.5em;
        .hl-section-point-item {
            margin-bottom: 0;
            color: var(--color-blue);
        }
    }
    *+& {
        margin-top: 6em;
    }
}
.hl-section-point-number {
    background: var(--color-blue-light);
    color: var(--color-white);
    width: 5em;
    aspect-ratio: 1/1;
    border-radius: 50%;
    font-family: var(--font-family-en);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 1.5em!important;
    line-height: 1!important;
    gap: 0;
    position: absolute;
    left: -1em;
    top: -1.5em;
    @media (width < 768px) {
        width: 4.5em;
        font-size: 1em;
        left: 50%;
        translate: -50% 0;
        top: -2em;
        scale: .9;
    }
    b {
        font-size: 2em;
        line-height: 1;
        @media (width < 768px) {
            font-size: 1.5em;
        }        
    }
}
.hl-section-point-item {
    font-size: 2.8em;
    letter-spacing: .1em;
    line-height: 1.4;
    font-weight: 600;
    margin-bottom: 1em;
    font-feature-settings: "palt";
    position: relative;
    @media (width < 768px) {
        font-size: 1.9em;
    }
    b {
        font-weight: 600;
        font-size: 1.1em;
        color: var(--color-orange);
    }
    &::before {
        content: '';
        display: block;
        width: 2em;
        height: 3px;
        background: var(--color-blue);
        border-radius: 100vmax;
        position: absolute;
        bottom: 0;
        left: 0;
    }    
    &::after {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background: var(--color-bg);
        border-radius: 100vmax;
        margin-top: .5em;
    }
}
.p-list-point-item01 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    width: 90%;
    margin: 3em auto 0;
    @media (width < 768px) {
        width: 100%;
        display: block;
        margin-top: 2em;
    }
    > figure {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        gap: 1em;
        @media (width < 768px) {
            grid-template-rows: unset;
            grid-template-columns: 27% auto;
            align-items: center;
            *+& {
                margin-top: 1em;
            }
        }
        > .c-img {
            display: flex;
            justify-content: center;
            align-items: center;
            width: min(calc(192 / 1200 * 100vw), 192px);
            aspect-ratio: 1/1;
            background: #f5f5ff;
            border-radius: 50%;
            margin-inline: auto;
            position: relative;
            z-index: 1;
            @media (width < 768px) {
                width: 100%;
            }
            &::before {
                content: '';
                display: block;
                width: 25%;
                aspect-ratio: 1/1;
                background: var(--color-orange) url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-Check%22%3E%3Cpath%20d%3D%22M4%2012l6%206L20%206%22%2F%3E%3C%2Fsvg%3E') 50% 50% no-repeat;
                background-size: 60% auto;
                border-radius: 50%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 0;
            }
            img {
                width: auto;
                height: 50%;
            }
        }
        > figcaption {
            font-size: 1.1em;
            font-weight: 600;
            text-align: center;
            line-height: 1.4;
            @media (width < 768px) {
                text-align: left;
                br {
                    display: none;
                }
            }
        }
    }  
}

.p-list-point-item02 {
    margin-top: 3em;
    @media (width < 768px) {
        margin-top: 2em;
    }
}
.p-list-point-item02-item {
        display: grid;
        grid-template-columns: 45% auto;
        gap: 3em;
        align-items: center;
        @media (width < 768px) {
            grid-template-columns: auto;
            gap: 2em;
        }
        .c-img {
            aspect-ratio: 3/2;
            overflow: hidden;
            filter: drop-shadow(.5em .5em 0 rgb( 33 64 131 / .3));
            @media (width < 768px) {
                margin-inline: auto;
                aspect-ratio: 16/9;
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: min(1.6em, 16px);
                @media (width < 768px) {
                    border-radius: .5em;
                }
            }
        }
        .c-text {
            @media (width < 768px) {
                padding-inline: .5em;
            }
            h4 {
                font-size: 1.4em;
                font-weight: 600;
                margin-bottom: 1em;
                @media (width < 768px) {
                    font-size: 1.3em;
                    margin-bottom: 1em;
                    line-height: 1.2;
                }
            }
            p {
                font-size: .9em;
                @media (width < 768px) {
                    font-size: 1em;
                }                
            }
        }
        *+& {
            margin-top: 3em;
        }
    &:nth-of-type(2n) {
        @media (width >= 768px) {
        grid-template-columns: auto 49%;        
            .c-img {
                order: 2;
            }
            .c-text {
                order: 1;
            }
        }
    }
}

.hl-point-item-sub {
    position: relative;
    &::before {
        content: '';
        display: block;
        width: 1.5em;
        aspect-ratio: 1/1;
        background: var(--color-orange);
        border-radius: 50%;
        position: absolute;
        left: -.5em;
        top: -.3em;
        z-index: 0;
        opacity: .5;
    }
    > span {
        position: relative;
        z-index: 1;
    }
    #sec-point03 & {
        display: flex;
        gap: .8em;
        align-items: center;
        font-size: 1.4em;
        @media (width < 768px) {
            font-size: 1.3em;
            line-height: 1.3;
        }
        .c-number-sub {
            font-size: .5em;
            line-height: 1.2;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            color: var(--color-white);
            background: var(--color-orange);
            padding: .6em;
            border-radius: .5em;
            width: 4.5em;
            aspect-ratio: 1/1;
            font-weight: 600;
            b {
                font-size: 1.5em;
                font-family: var(--font-family-num);
            }
        }
    }    
    #sec-point03 &::before {
        display: none;
    }
}

.p-list-point-item03 {
    margin-top: 3em;
    @media (width < 768px) {
        margin-top: 2em;
    }
}
.p-list-point-item03-item {
        display: grid;
        grid-template-columns: auto 24%;
        gap: 2em;
        border-bottom: 2px solid var(--color-bg);
        padding: 0 .5em 3em;
        @media (width < 768px) {
            grid-template-columns: auto;
            gap: 2em;
            padding: 0 0 2em;
        }
        .c-img {
            display: flex;
            align-items: center;
            justify-content: center;
            order: 2;
            overflow: hidden;
            background: #f5f5ff;
            border-radius: 10px;
            padding: 2.4em;
            img {
                width: 100%;
                height: 100%;
                max-width: 112px;
                max-height: 112px;
                object-fit: contain;
            }
            @media (width < 768px) {
                display: none;
            }
        }
        .c-text {
            h4 {
                font-size: 1.3em;
                font-weight: 600;
                margin-bottom: 1em;
            }
            .hl-point-item-sub {
                > span > span {
                    font-size: .7em;
                    color: var(--color-orange);
                    display: block;
                    line-height: 1;
                }
            }
            p {
                font-size: .9em;
                @media (width < 768px) {
                    font-size: 1em;
                }
            }
            .c-more-link {
                margin-top: 1em;
            }
        }
        *+& {
            margin-top: 3em;
            @media (width < 768px) {
                margin-top: 2em;
            }
        }
        &:first-of-type {
            @media (width < 768px) {
                border-top: 1px solid var(--color-bg);
                padding-top: 2em;
            }
        }        
        &:last-of-type {
            border-bottom: none;
            padding-bottom: 0;
        }
}


.p-block-reason-aside {
    max-width: 1000px;
    margin-inline: auto;
    background: var(--color-blue);
    padding: 2em 3em;
    border-radius: 1em;
    > h3 {
        font-size: 1.4em;
        font-weight: 600;
        line-height: 1.4;
        margin-bottom: 1em;
        color: #fff;
        text-align: center;
    }
    > p {
        line-height: 1.6;
        color: #fff;
        text-align: center;
    }
    .c-notice {
        font-size: .9em;
    }
}

.p-list-reason-aside {
    padding: 1.5em 3em;
    background: #fff;
    margin-block: 1.6em .5em;
    border-radius: 10px;
    li {
        display: flex;
        flex-direction: column;
        p {
            flex: 1;
            font-weight: 600;
            font-size: 1.15em;
        }
        .c-bar-wrap {
            display: flex;
            align-items: baseline;
            gap: 1em;
            font-size: 2em;
            font-weight: 600;
            gap: 1em;
            font-family: var(--font-family-num);
            line-height: 1;
            color: var(--color-orange);
            margin-top: -.2em;
            .c-bar {
                display: flex;
                width: 100%;
                height: .6em;
                background: var(--color-bg);
                border-radius: 100vmax;
                &::before {
                    content: '';
                    display: block;
                    width: 100%;
                    height: 100%;
                    background: var(--color-orange);
                    border-radius: 100vmax;
                }
            }
        }
        *+& {
            margin-top: 1em;
        }
    }
    li:nth-of-type(2) {
        .c-bar-wrap .c-bar::before {
                    width: calc(165/255*100%);
        }
    }
    li:nth-of-type(3) {
        .c-bar-wrap .c-bar::before {
                    width: calc(158/255*100%);
        }
    }
    li:nth-of-type(4) {
        .c-bar-wrap .c-bar::before {
                    width: calc(106/255*100%);
        }
    }        
}
.c-notice {
    font-size: .5em;
    color: #666;
    margin-top: 1em;
    text-indent: -1em;
    padding-left: 1em;
}


/* parts: reforms */
.section-reform {
    background: #FDEDDB;
    border-radius: 4em;
    padding-block: 10em;
    margin-block: 5em 0;
    padding-inline: max(2vw, 16px);
    @media (width < 768px) {
        padding-block: 5em 4em;
        border-radius: 2em;
        margin-block: 0;
    }
    .c-inner {
        max-width: 1200px;
        margin-inline: auto;
        display: grid;
        grid-template-columns: auto auto;
        gap: 6em;
        @media (width < 768px) {
            grid-template-columns: 1fr;
            gap: 2em;
        }
        .c-title {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            order: 2;
            @media (width < 768px) {
                order: 0;
            }            
            h2 {
                font-size: 3em;
                position: relative;
                z-index: 1;
                b {
                    font-weight: 600;
                }
                @media (width < 768px) {
                    font-size: 2.7em;
                    writing-mode: horizontal-tb;
                }
            }
            .p-list-data {
                font-size: .9em;
                margin-top: 4em;
                position: relative;
                z-index: 1;
                @media (width < 768px) {
                    font-size: 1.1em;
                    margin-top: 0;
                    display: grid;
                    gap:2em;
                    grid-template-columns: repeat(2, 1fr);
                }
            }
            .c-bg-circle {
                position: absolute;
                top: 1em;
                right: 0;
                width: 100%;
                scale: 4;
                aspect-ratio: 1/1;
                z-index: 0;
                opacity: 1;
                border: min(3em, 30px) solid var(--color-white);
                border-radius: 50%;
                @media (width < 768px) {
                    right: -20vw;
                    top: -35vw;
                    scale: 1;
                    width: calc((254/350) * 100vw);
                    border-width: 8em;
                }                
            }
        }
        .c-content {
            .p-grid-reforms {
                margin-bottom: 3em;
                @media (width < 768px) {
                    margin-bottom: 2em;
                }
            }
            > p {
                font-size: 1.6em;
                line-height: 1.6;
                padding-inline: 1em;
                *+& {
                    margin-top: 1em;
                }
                @media (width < 768px) {
                    font-size: 1.4em;
                }
            } 
        }
    }
}
.p-grid-reforms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    > figure {
        aspect-ratio: 3/2;
        @media (width < 768px) {
            aspect-ratio: 4/3;
        }
        a {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 8px;
            position: relative;
            &::before {
                content: '';
                display: block;
                width: 100%;
                height: 100%;
                background-image: linear-gradient(to bottom, rgb(28 28 48 / 0) 50%, rgb(28 28 48 / .7) 100%);
                mix-blend-mode: multiply;
                position: absolute;
                z-index: 1;
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                overflow-clip-margin: unset;
                scale: 1;
                transition: .3s scale;
            }
            figcaption {
                position: relative;
                position: absolute;
                z-index: 2;
                font-size: 1.6em;
                bottom: 1.2em;
                left: 0;
                padding: 0 1.5em;
                width: 100%;
                color: #fff;
                font-weight: 600;
                font-feature-settings: "palt";
                span {
                    font-size: .75em;
                }
                @media (width < 768px) {
                    font-size: 1.3em;
                    bottom: 1em;
                    padding: 0 1em;
                }
                &::after {
                    content: '';
                    display: block;
                    width: 1.5em;
                    aspect-ratio: 1/1;
                    background: var(--color-blue-light) url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ChevronRight%22%3E%3Cpath%20d%3D%22M8%204l8%208-8%208%22%2F%3E%3C%2Fsvg%3E) 55% 50% no-repeat;
                    background-size: auto 50%;
                    border-radius: 50%;
                    position: absolute;
                    right: 1em;
                    top: 50%;
                    translate: 0 -50%;
                    @media (width < 768px) {
                        width: 1.2em;
                        right: .5em;
                    }
                }
            }
            @media (hover: hover) {
                &:hover {
                    img {
                        scale: 1.05;
                    }
                }
            }
        }
    }
}

.c-more-link {
    display: flex;
    gap: .5em;
    align-items: center;
    span {
        flex: 1;
    }
    &::before {
        content: '';
        display: block;
        width: 1.4em;
        aspect-ratio: 1 / 1;
        background: var(--color-blue-light) url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2236%22%20height%3D%2236%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ChevronRight%22%3E%3Cpath%20d%3D%22M8%204l8%208-8%208%22%2F%3E%3C%2Fsvg%3E) 55% 50% no-repeat;
        background-size: auto 50%;
        border-radius: 50%;

    }
}

/* parts: reform-reason */
.p-block-reason {
    max-width: 1000px;
    border-radius: min(1.6em, 16px);
    margin: 6em auto 0;
    background: var(--color-white);
    padding: 4em;
    @media (width < 768px) {
        padding: 2.4em 2em;
        border-radius: 1em;
        margin-top: 4em;        
    }
    .c-notice {
        font-size: 1.3em;
        color: #555;
        margin-top: 2.5em;
        text-align: center;
    }
}
.hl-block-reason {
    text-align: center;
    span {
        display: inline-block;
        font-size: 1.5em;
        padding: .3em 4em;
        line-height: 1.4;
        color: #fff;
        border-radius: 100vmax;
        background: var(--color-blue-light);
        margin-bottom: .6em;
        @media (width < 768px) {
            font-size: 1.4em;
            padding: .3em 2em;
        }
    }
}
.c-block-reason__description {
    text-align: center;
    font-size: 2.3em;
    font-weight: 600;
    line-height: 1.4;
    @media (width < 768px) {
        font-size: 2em;
        font-feature-settings: "palt";        
        br {
            display: none;
        }
    }    
}
.p-grid-reason-graph {
    margin-top: 3em;
    max-width: 92%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5em;
    @media (width < 768px) {
        max-width: none;
        grid-template-columns: 1fr;
        gap: 1.5em;
        margin-top: 2em;
        figure {
            display: grid;
            grid-template-columns: 33% 1fr;
            gap: 3em;
        }        
    }
    .c-img {
        display: flex;
        aspect-ratio: 1/1;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            overflow-clip-margin: unset;
            position: relative;
        }
        b {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            > span {
                font-size: 6em;
                font-weight: 600;
                font-family: var(--font-family-num);
                > span {
                    font-size: .5em;
                }
                @media (width < 768px) {
                    font-size: 3.2em;
                }                
            }
        }
    }
    figcaption {
        font-size: 1.4em;
        font-weight: 600;
        line-height: 1.4;
        margin-top: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .7em;
        @media (width < 768px) {
            font-size: 1.5em;
            justify-content: flex-start;
        }        
        &::before {
            content: '';
            display: block;
            width: 1.4em;
            height: 1.4em;
            background: #607FCE;
            border-radius: 4px;
        }
    }
    figure:nth-of-type(1) {
        figcaption {
            &::before {
                background: #F7AC1C;
            }
        }
    }
    figure:nth-of-type(3) {
        figcaption {
            &::before {
                background: #DC81B8;
            }
        }
    }
}

.l-section-root {
    .c-inner {
        max-width: 1200px;
        margin-inline: auto;
        padding-block: 8em;
    }
}

.section-sell {
    .c-inner {
        padding-top: 10em;
        padding-inline: min(2vw, 16px);
        @media (width < 768px) {
            padding-block: 6em 3em;
        }   
        .hl-section-title {
            font-size: 3em;
            font-weight: 600;
            letter-spacing: .15em;
            line-height: 1.4;
            @media (width < 768px) {
                font-size: 2.7em;
            }
        }
        > p {
            font-size: 1.6em;
            line-height: 1.6;
            margin-block: 1em 2em; 
            text-align: center;
        }
    }
}
.section-faq {
    .c-inner {
        .hl-section-common {
            font-size: 3em;
            font-weight: 600;
            letter-spacing: .15em;
        }
    }
}

.l-wrapper-sell {
    /* background: var(--color-bg); */
    border-radius: 4em;
    @media (width < 768px) {
        border-radius: 2em;
    }
}
.p-grid-sell {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 4em;
    padding-inline: 2vw;
    @media (width < 768px) {
        display: block;
    }
}
.p-grid-sell-item {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 0;
    @media (width < 768px) {
        grid-template-columns: 45% auto;
        grid-template-rows: auto auto auto;
        align-items: center;
        *+& {
            margin-top: 4em;
        }
    }
    .c-img {
        aspect-ratio: 400/305;
        margin-bottom: 2.5em;
        width: 90%;
        margin-inline: auto;
        transform-origin: center;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        @media (width < 768px) {
            grid-column: 1/2;
            grid-row: 1/3;
            margin-bottom: 0;
            width: 100%;
        }        
    }
    > p:not(.c-should-sell) {
        font-size: 1.4em;
        line-height: 1.7;
        padding-inline: 1em;
        margin-top: 1em;
        @media (width < 768px) {
            grid-column: 1/3;
            grid-row: 3/4;
            margin-top: 1.5em;
        }        
    }
}
.c-should-sell {
    font-size: 1.6em;
    font-weight: 600;
    color: var(--color-orange);
    text-align: center;
    margin-bottom: .5em;
    span {
        border-bottom: 1px solid var(--color-orange);
        padding-bottom: .4em;
        &::after {
            content: '';
            display: block;
            width: 1em;
            height: 1em;
            background: var(--color-orange);
            clip-path: polygon(100% 50%, 50% 100%, 0% 50%);
            margin-inline: auto;
            position: relative;
            top: .1em;
        }
    }
    @media (width < 768px) {
        grid-column: 2/3;
        grid-row: 1/2;
        margin-bottom: 0;
    }    
}
.hl-sell-item {
    text-align: center;
    font-size: 2.7em;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.1em;
    @media (width < 768px) {
        grid-column: 2/3;
        grid-row: 2/3;
        position: relative;
        top: -.5em;
    }    
}
.hl-vertical {
    writing-mode: vertical-rl;
    font-size: 3.2em;
    line-height: 1.3;
    letter-spacing: 0.05em;
    b {
        font-size: calc((45 / 35) * 1em);
        @media (width < 768px) {
            font-size: 1.2em;
        }
    }
}
.section-sell-step {
    .c-inner {
        padding-top: 0;
        padding-inline: 3vw;
        display: grid;
        grid-template-columns: auto auto;
        gap: 5em;
        @media (width < 768px) {
            grid-template-columns: 1fr;
            gap: 2em;
        }
        .c-title {            
            position: relative;
            z-index: 1;
            padding-top: 1em;
            @media (width < 768px) {
                writing-mode: horizontal-tb;
                text-align: center;
                h2 {
                    font-size: 2.7em;
                }
            }
            .c-bg-circle {
                position: absolute;
                top: 3.5em;
                right: 0;
                width: 100%;
                scale: 2.5;
                aspect-ratio: 1/1;
                z-index: 0;
                border: 1.8em solid #FDEDDB;
                border-radius: 50%;
                @media (width < 768px) {
                    left: -30vw;
                    top: 10vw;
                    scale: 1;
                    width: calc((254/350) * 100vw);
                    border-width: 8em;
                }
            }            
        }
    }
}
.p-list-sell-step {
    position: relative;
    z-index: 1;
    @media (width < 768px) {
        padding-inline: 2vw;
    }
    li {
        padding: 2em 3em;
        border-radius: 10px;
        background:var(--color-white);
        border: 1px solid var(--color-border);
        display: grid;
        grid-template-columns: 6em 19em 1fr;
        gap: 3em;
        align-items: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        @media (width < 768px) {
            padding: 1.5em;
            grid-template-columns: 4em auto;
            gap: 1em 1em;
        }        
        .hl-sell-step-number {
            font-family: var(--font-family-num);
            font-weight: 400;
            font-size: 1.3em;
            line-height: 1.1;
            aspect-ratio: 1/1;
            background: var(--color-blue-light);
            color: #fff;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;            
            b {
                font-weight: 400;
                display: block;
                font-size: calc((25 / 16) * 1em);
            }
            @media (width < 768px) {
                font-size: 1.1em;
                grid-column: 1/2;
            }            
        }
        h3 {
            font-size: 2em;
            line-height: 1.4;
            font-weight: 600;
            color: var(--color-blue);
            span {
                font-size: .8em;
                display: block;
            }
            @media (width < 768px) {
                font-size: 1.6em;
                grid-column: 2/3;
                font-feature-settings: "palt";
                br {
                    display: none;
                }
            }            
        }
        p {
            font-size: 1.35em;
            line-height: 1.7;
            @media (width < 768px) {
                grid-column: 1/3;
                font-size: 1.3em;
                line-height: 1.5;
            }
        }
        *+& {
            margin-top: 2em;
            @media (width < 768px) {
                margin-top: 1em;
            }           
        }
    }
    &::before {
        content: '';
        display: block;
        width: 10px;
        height: 100%;
        background: var(--color-blue-light);
        position: absolute;
        left: 67px;
        z-index: -1;
        @media (width < 768px) {
            left: 3.5em;
        }
    }
}
.l-fixed-conversion {
    position: fixed;
    top: 48%;
    translate: 0 -50%;
    right: 0;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s, visibility .3s;
    &.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    ul {
        display: flex;
        flex-direction: column;
        gap: .4em;
        li {
            writing-mode: vertical-rl;
            font-size: 1.8em;
            line-height: 1.4;
            letter-spacing: .05em;
            @media (width < 768px) {
                font-size: 1.4em;
            }   
            a {
                display: flex;
                padding: 1em .7em;
                border-radius: 10px 0 0 10px;
                background: var(--color-orange);
                border: 3px solid #fff;
                border-right: none;
                color: #fff;
                gap: .5em;
                align-items: center;
                transition: background .3s;
                &::before {
                    content: '';
                    display: block;
                    width: 1.2em;
                    aspect-ratio: 1/1;
                    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-Search%22%3E%3Cpath%20d%3D%22M21%2021l-4.486-4.494M19%2010.5a8.5%208.5%200%201%201-17%200%208.5%208.5%200%200%201%2017%200z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                }
                @media (hover: hover) {
                    &:hover {
                        background: var(--color-text);
                    }
                }
            }
        }
    }    
}
.c-btn-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: var(--color-blue);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s, background .3s;
    @media (width < 768px) {
        bottom: 16px;
        right: 16px;
        width: 40px;
    }
    &.is-active {
        opacity: 1;
        visibility: visible;
    }
    &::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22ai%20ai-ArrowUp%22%3E%3Cpath%20d%3D%22M12%2019l-7-7%207-7%22%2F%3E%3C%2Fsvg%3E') no-repeat 60% center;
        rotate: 90deg;
        background-size: 50% auto;
    }
    @media (hover: hover) {
        &:hover {
            background: var(--color-text);
        }
    }
}
.l-grid-point {
    display: grid; 
    grid-template-columns: auto 11em; 
    align-items: start; 
    margin-inline: auto; 
    max-width: 1200px;
    @media (width < 913px) {
        display: block;
    }
    .hl-section-title {
        order: 2; 
        font-size: 3em;
        position: sticky;
        top: 100px;
        z-index: 1;
        p {
            z-index: 1; 
            position: sticky; 
            top: 0; 
            display: block; 
            padding-top: 2em;
            @media (width < 913px) {
                display: none;
            }
            span {
                display: block;
                font-size: 0.6em;
            }
        }
        @media (width < 768px) {
            position: relative;
            top: 0;
            width: 100%;
        }        
        .c-bg-circle {
            position: absolute;
            top: 30%;
            left: 50%;
            translate: -40% 0;
            width: 100%;
            aspect-ratio: 1/1;
            border-radius: 50%;
            z-index: -1;
            scale: 4.8;
            opacity: 1;
            border: .8em solid var(--color-blue-light);
            mix-blend-mode: multiply;
            opacity: .1;
            @media (width < 768px) {
                position: absolute;
                left: -10%;
                top: calc(-1 * ((560 / 608) * 100vw));
                scale: 1;
                width: calc((400 / 350) * 100vw);
                border-width: 3.5em;
                opacity: .1;
            }            
        }
    }
}

.hl-section-point {
    font-size: 2.8em;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 2.5em;
    color: var(--color-blue);
    font-weight: 700;
    font-feature-settings: "palt";
    position: relative;
    z-index: 2;
    @media (width < 913px) {
        margin-bottom: 1.6em;
    }    
    @media (width < 768px) {
        font-size: 2.2em;
        margin-bottom: 2em;
    }    
    span {
        letter-spacing: .05em;
    }
    b {
        font-weight: 600;
        font-size: calc((35 / 28) * 1em);
        @media (width < 768px) {
            font-size: 1.2em;
        }
    }  
}
.c-blooming-refine {
    border-radius: 5px;
    display: grid;
    grid-template-columns: 7em 1fr;
    background: #f5f5ff;
    margin-top: 1em;
    align-items: center;
    padding: .8em 2em;
    gap: 1em;
    .c-img {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    .c-text {
        padding: 1em;
        p {
            font-size: .9em;
            *+& {
                margin-top: 1em;
            }
        }
    }
    @media (width < 768px) {
        grid-template-columns: 1fr;
        padding: 1em;
        gap: 0;
        .c-img {
            img {
                width: 40%;
                max-width: 120px;
            }
        }
    }
}