@charset "utf-8";

html {
    scroll-behavior: smooth;
}

/*-------------------------------------------------------------------------
RESET
-------------------------------------------------------------------------*/

.l-main {
    padding: 0;
}
.l-main *{
    font-family: 'NotoSansJP', 'Hiragino Kaku Gothic ProN','Meiryo', sans-serif;
    font-size: 16px;
}
.l-header{
    background-color: transparent;
    pointer-events: none;
}
.l-header > *{
    pointer-events: auto;
}
.header__right::after{
    display: none;
}
body{
    padding-top: 0;
}
.l-contents{
    background: var(--white);
}

/*-------------------------------------------------------------------------
UI
-------------------------------------------------------------------------*/

/* common.css の a:hover / button:hover { opacity: .7 } を打ち消し */
.l-main a:hover,
.l-main button:hover {
    opacity: 1;
}

/*-------------------------------------------------------------------------
MV
-------------------------------------------------------------------------*/

.mv-slider-link{
    text-align: center;
}
.mv-slider-link img {
    max-height: 800px;
    object-fit: cover;
}
.mv-slider-link:hover {
    opacity: 1;
}
#js-mv-slider:not(.slick-initialized) .mv-slider-link:nth-child(n+2) {
    display: none;
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.proposal {
    background: #F8F8F8 url("/images/index/bg_text.webp") repeat center;
}
    .proposal__panel {
        width: var(--screen-size);
        background-color: #fff;
        margin-inline: auto;
        padding: 34px 50px 50px;
    }
        .proposal__ttl {
            width: fit-content;
            margin: 0 auto 30px;
            padding: 0 0 6px 10px;
            font-size  : 30px;
            font-weight: 700;
            text-align: center;
            letter-spacing: .06em;
            position: relative;
        }
        .proposal__ttl::after{
            content: '';
            display: block;
            width: 462px;
            height: 3px;
            background: var(--dark-color);
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
        .proposal__list {
            display              : grid;
            gap                  : 20px;
            grid-template-columns: repeat(2, 1fr);
        }
        /* 奇数件の最終行を中央寄せ（逆三角形配置） */
        .proposal__list > li:last-child:nth-child(odd) {
            grid-column: 1 / -1;
            width: calc((100% - 20px) / 2);
            justify-self: center;
        }
            .proposal__link {
                background-color: #F8F8F8;
                border: 2px solid #F8F8F8;
                display    : flex;
                gap        : 20px;
                align-items: center;
                padding: 8px;
                font-size  : 18px;
                font-weight: 700;
                letter-spacing: .04em;
                transition: 0.4s;
            }
            .proposal__link:hover {
                background-color: #fff;
                border-color: var(--dark-color);
                color: var(--dark-color);
            }
            .proposal__link::before{
                content: url(/images/index/img_check.webp);
            }

/*-------------------------------------------------------------------------
お知らせ
-------------------------------------------------------------------------*/

/* LAYOUT
--------------------------- */
.news {
    background: #333 url("/images/index/bg_news.webp") no-repeat center / cover;
}
    .news__ttl {
        display       : flex;
        gap           : 10px;
        align-items   : center;
        flex-direction: column;
        margin: 0 0 30px;
        font-size  : 30px;
        font-weight: 700;
        color      : #fff;
    }
    .news__ttl:after {
        content: "";
        width: 40px;
        height: 2px;
        background-color: #fff;
    }
    .news__contents {
        width: var(--screen-size);
        background-color: #fff;
        margin: 0 auto 30px;
        padding: 30px;
    }
        .news__scroll {
            height: 220px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
        .news__scroll::-webkit-scrollbar { 
            width: 6px;
        }
        .news__scroll::-webkit-scrollbar-thumb,
        .news__scroll::-webkit-scrollbar-track-piece:start,
        .news__scroll::-webkit-scrollbar-track-piece:end {
            border-radius: 7px;
        }
        .news__scroll::-webkit-scrollbar-thumb { 
            background: var(--dark-color);
        }
        .news__scroll::-webkit-scrollbar-track-piece:start,
        .news__scroll::-webkit-scrollbar-track-piece:end {
            background: #D9D9D9;
        }
        /* Firefox専用のスタイル */
        @-moz-document url-prefix() {
            .news__scroll {
              scrollbar-color: var(--dark-color) #D9D9D9;
              scrollbar-width: thin; 
            }
        }

/* OBJECT
--------------------------- */
.news__list {
    border-bottom: 1px solid #D9D9D9;
    display: flex;
    gap: 20px;
    margin: 0 30px 20px 0;
    padding: 0 0 20px;
}
    .news__time {
        margin: 2px 0 0;
        white-space: nowrap;
    }
        .news__time time {
            font-size: 14px;
        }
.news__btn {
    width: 400px;
    height: 60px;
    background-color: transparent;
    border: 2px solid #fff;
    display        : flex;
    gap            : 10px;
    align-items    : center;
    justify-content: center;
    margin-inline: auto;
    font-family: var(--archivo);
    font-size  : 20px;
    font-weight: 900;
    color      : #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-left: 22px;
    transition: 0.4s;
}
.news__btn:hover {
    background-color: #fff;
    color: var(--dark-color);
}
.news__btn .ui-btn-arw--light {
    background-color: #fff;
}
.news__btn .ui-btn-arw--light svg {
    stroke: var(--dark-color);
}
.news__btn:hover .ui-btn-arw--light {
    background-color: var(--dark-color);
}
.news__btn:hover .ui-btn-arw--light svg {
    stroke: #fff;
}

/*-------------------------------------------------------------------------
物件検索
-------------------------------------------------------------------------*/

/* LAYOUT
--------------------------- */
.search {
    padding-block: 66px 100px;
}
    .searech__section {
        background-color: #fff;
        margin: 0 0 30px;
        padding: 30px 50px;
    }

/*-------------------------------------------------------------------------
物件検索：フリーワード
-------------------------------------------------------------------------*/

.freeword {
    display        : flex;
    gap            : 19px;
    align-items    : center;
    justify-content: space-between;
    margin-top: -21px;
    position: relative;
}
    .freeword__form {
        flex: 1;
        display: flex;
    }
        .freeword__form input {
            flex: 1;
            border: 1px solid #DCDCDC;
            border-radius: 0;
            height: 48px;
            padding: 0 0 0 28px;
        }
    .search__cnt {
        background-color: var(--dark-color);
        padding: 2px 15px 5px;
        position: absolute;
        bottom  : calc(100% + 30px);
        right   : 0;
        font-size  : 20px;
        font-weight: 700;
        color      : #fff;
    }
    .search__cnt:after {
        content: "";
        width: 12px;
        height: 11px;
        background-color: inherit;
        clip-path: polygon(0 0, 100% 0, 20% 100%);
        position: absolute;
        top: calc(100% - 1px);
        left: -4px;
        right: 0;
        margin: auto;
    }
        .search__cnt span {
            margin: 0 5px;
            font-size: 30px;
        }

/*-------------------------------------------------------------------------
物件検索：人気キーワード
-------------------------------------------------------------------------*/

.keyword {
    display        : flex;
    justify-content: space-between;
}
    .keyword__left {
        padding: 10px 0 0;
    }
        .keyword__caution {
            font-size: 13px;
            color    : #959595;
        }
    .keyword__right {
        width: 880px;
        background-color: var(--main-light-color);
        padding: 17px 22px 23px;
        position: relative;
    }
        .keyword__list {
            display              : grid;
            gap                  : 14px;
            grid-template-columns: repeat(5, 1fr);
        }
            .keyword__label {
                display    : flex;
                gap        : 4px;
                align-items: center;
                color: #82A0B1;
                transition: 0.4s;
            }
            .keyword__label:hover {
                cursor: pointer;
                color: var(--main-color);
            }
            .keyword__label input[type="checkbox"]:hover {
                cursor: pointer;
            }
            .keyword__label input[type="checkbox"]:checked{
                border: none;
                background-image: url(/images/index/img_check.webp);
                background-repeat: no-repeat;
                background-size: contain;
            }
            .keyword__label input[type="checkbox"]:checked::after{
                display: none;
            }
        .keyword__btn {
            position: absolute;
            bottom: 0;
            right: 0;
        }


/*-------------------------------------------------------------------------
物件検索：エリア検索
-------------------------------------------------------------------------*/

/* エリア沿線検索
--------------------------- */
.linearea {
    display              : grid;
    gap                  : 60px;
    grid-template-columns: 410px 570px;
    padding-block: 51px;

    /* 「農学部の方はこちら」ボタンと同時に表示
    padding-block: 51px 30px;
    */
}
    .linearea__ttl {
        margin: 0 0 20px;
        font-size  : 18px;
        font-weight: 700;
    }
.area-search__ttl {
    display    : flex;
    gap        : 6px;
    align-items: center;
    margin: 21px 0 8px;
    font-size  : 16px;
    font-weight: 700;
}
.area-search__ttl:before {
    content: "";
    width: 14px;
    height: 14px;
    background-color: var(--main-color);
    border-radius: 50%;
}
.area-list {
    display              : grid;
    gap                  : 10px;
    grid-template-columns: repeat(3, 1fr);
}
.area-list > li:last-child {
    grid-column: span 2;
}
    [class*="area-list__btn--"]{
        height: 40px;
        display        : flex;
        align-items    : center;
        justify-content: center;
        font-weight: 500;
        transition: 0.4s;
    }
    .area-list__btn--light {
        background-color: var(--main-light-color);
        border: 1px solid var(--main-color);
        color: var(--main-color);
    }
    .area-list__btn--light:hover {
        background-color: var(--main-color);
        color: #fff;
    }
    .area-list__btn--dark {
        background-color: var(--main-color);
        border: 1px solid var(--main-color);
        color: #fff;
    }
    .area-list__btn--dark:hover {
        background-color: #fff;
        color: var(--main-color);
    }
.google-map-btn {
    height: 60px;
    border: 2px solid var(--dark-color);
    display        : flex;
    gap            : 10px;
    align-items    : center;
    justify-content: center;
    margin: 40px 0 0;
    font-size  : 20px;
    font-weight: 700;
    letter-spacing: .06em;
    transition: 0.4s;
}
.google-map-btn:hover {
    background-color: var(--dark-color);
    color: #fff;
}
.google-map-btn:hover .ui-btn-arw--dark {
    background-color: #fff;
}
.google-map-btn:hover .ui-btn-arw--dark svg {
    stroke: var(--dark-color);
}

/*-------------------------------------------------------------------------
物件検索：沿線検索
-------------------------------------------------------------------------*/

.line-search__map {
    position: relative;
    margin: 15px 0 0;
}
    /* common.css の a:hover { transition: 0.4s } より詳細度を上げて上書き */
    .line-search__map a[class*="line-btn--"] {
        position: absolute;
        font-size: 16px;
        font-weight: 500;
    }
    .line-btn--blue {
        color: #0169B7;
        transition: .2s ease;
    }
    .line-btn--blue:hover {
        background-color: var(--main-light-color);
        color: var(--dark-color);
    }
    .line-btn--red {
        color: var(--point-color);
        transition: .2s ease;
    }
    .line-btn--red:hover {
        background-color: #FFF0F3;
        color: var(--dark-color);
    }
    .line-btn01 {
        top: 11px;
        left: 129px;
    }
    .line-btn02 {
        top: 99px;
        left: 189px;
    }
    .line-btn03 {
        top: 219px;
        left: 165px;
    }
    .line-btn04 {
        top: 350px;
        left: 146px;
    }
    .line-btn05 {
        top: 65px;
        right: 263px;
    }
    .line-btn06 {
        top: 65px;
        right: 153px;
    }
    .line-btn07 {
        top: 65px;
        right: 29px;
    }
    .line-btn08 {
        top: 219px;
        left: 268px;
    }
    .line-btn09 {
        top: 333px;
        right: 172px;
    }
    .line-btn010 {
        top: 404px;
        right: 92px;
    }

    .line-search__map a[class*="line-btn--"]::before,
    .line-search__map a[class*="line-btn--"]:hover::before {
        content: '';
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 50%;
        position: absolute;
        transition: .2s ease;
    }
    .line-search__map a[class*="line-btn--"]:hover::before {
        border-width: 10px;
    }
    .line-btn--blue::before { border: 5px solid #0169B7;}
    .line-btn--red::before  { border: 5px solid var(--point-color);}

    .line-btn01::before {
        top: 32px;
        left: 40px;
    }
    .line-btn02::before {
        top: 3px;
        left: -25px;
    }
    .line-btn03::before {
        top: 4px;
        left: -23px;
    }
    .line-btn04::before {
        top: 3px;
        left: -26px;
    }
    .line-btn05::before {
        top: -22px;
        right: 33px;
    }
    .line-btn06::before {
        top: -22px;
        right: 34px;
    }
    .line-btn07::before {
        top: -22px;
        right: 33px;
    }
    .line-btn08::before {
        top: 4px;
        left: -25px;
    }
    .line-btn09::before {
        top: 4px;
        right: 56px;
    }
    .line-btn010::before {
        top: 5px;
        right: 89px;
    }
.line-search__btn {
    width: 230px;
    height: 40px;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    border-top: none;
    display        : flex;
    gap            : 10px;
    align-items    : center;
    justify-content: center;
    margin: 0 0 0 auto;
    font-weight: 500;
    color      : #fff;
    transition: 0.4s;
    padding-bottom: 3px;
}
.line-search__btn:hover {
    background-color: #fff;
    color: var(--main-color);
}
.line-search__btn:hover .ui-btn-arw--light {
    background-color: var(--main-color);
}
.line-search__btn:hover .ui-btn-arw--light svg {
    stroke: #fff;
}
    .line-search__btn svg {
        transform: rotate(90deg);
    }


/*-------------------------------------------------------------------------
物件検索：診断
-------------------------------------------------------------------------*/

.diagnosis {
    background-color: #fff;
}
    .diagnosis__ttl {
        background-color: var(--main-color);
        padding: 9px 0 9px;
        font-size  : 20px;
        font-weight: 700;
        color      : #fff;
        text-align: center;
    }
        .diagnosis__ttl span {
            color: #FFF000;
            font-size: inherit;
        }
    .diagnosis__catch {
        display        : flex;
        align-items    : center;
        justify-content: center;
        margin-block: 20px 23px;
    }
        .diagnosis__text {
            font-weight: 500;
        }
        .diagnosis__bold {
            font-size  : 18px;
            font-weight: 700;
        }
        .diagnosis__arw {
            display: flex;
            margin: 0 6px 0 20px;
        }
        .diagnosis__arw:before,
        .diagnosis__arw:after {
            content: "";
            width: 14px;
            height: 18px;
            clip-path: polygon(0 0, 100% 50%, 0 100%);
        }
        .diagnosis__arw:before { background-color: #6297B5;}
        .diagnosis__arw:after  { background-color: var(--main-color);}

    .diagnosis__foot {
        display        : flex;
        align-items    : center;
        justify-content: center;
        padding: 0 20px 40px 33px;
    }
        .diagnosis__btn {
            width: 300px;
            height: 48px;
            background-color: var(--main-light-color);
            border: 1px solid var(--main-color);
            padding: 0 40px 0 20px;
            position: relative;
            text-align: left;
            color: var(--main-color);
            transition: 0.4s;
        }
        .diagnosis__btn:hover {
            background-color: var(--main-color);
            color: #fff;
        }
            .diagnosis__assignment {
                display: block;
                text-align: center;
                font-size  : 18px;
                font-weight: 500;
                color      : inherit;
                text-overflow: ellipsis;
                overflow     : hidden;
                white-space  : nowrap;
            }
            .diagnosis__plus {
                width: 16px;
                height: 16px;
                position: absolute;
                top     : 0;
                bottom  : 0;
                right   : 13px;
                margin  : auto;
            }
            .diagnosis__plus:before,
            .diagnosis__plus:after {
                content: "";
                width: 100%;
                height: 1px;
                background-color: currentColor;
                position: absolute;
                inset   : 0;
                margin  : auto;
            }
            .diagnosis__plus:before { transform: rotate(90deg);}

        .diagnosis__closs {
            width: 30px;
            height: 30px;
            margin-inline: 16px;
            position: relative;
        }
        .diagnosis__closs:before,
        .diagnosis__closs:after {
            content: "";
            width: 100%;
            height: 1px;
            background-color: var(--dark-color);
            position: absolute;
            inset   : 0;
            margin  : auto;
        }
        .diagnosis__closs:before { transform: rotate(45deg);}
        .diagnosis__closs:after  { transform: rotate(-45deg);}

        .diagnosis__submit {
            margin: 0 0 0 30px;
            width: 150px;
        }

/* ダイアログ
--------------------------- */
.dialog {
    width: 980px;
    border: none;
    position: fixed;
    inset: 0;
    margin: auto;
    padding: 37px 100px 52px;
}
.dialog::backdrop {
  background: rgba(0, 0, 0, 0.8);
}
    .dialog__heading {
        display       : flex;
        align-items   : center;
        flex-direction: column;
        margin: 0 0 20px;
    }
        .dialog__heading svg {
            width: 55px;
            height: 55px;
            fill: var(--main-color);
        }
        .dialog__ttl {
            margin-block: 3px;
            font-size  : 25px;
            font-weight: 700;
        }
        .dialog__caution {
            font-weight: 500;
        }
    .dialog__decision {
        width: 120px;
        height: 48px;
        background-color: var(--dark-color);
        border: 2px solid var(--dark-color);
        display        : flex;
        align-items    : center;
        justify-content: center;
        margin-inline: auto;
        font-weight: 500;
        color      : #fff;
        letter-spacing: .1em;
        transition: 0.4s;
    }
    .dialog__decision:hover {
        background-color: #fff;
        color: var(--dark-color);
    }

/* リスト
--------------------------- */
.choice-list {
    display              : grid;
    gap                  : 10px 12px;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 20px;
}
    .choice-list__label {
        height: 100%;
        background-color: var(--main-light-color);
        border: 1px solid currentColor;
        display        : flex;
        gap            : 3px;
        align-items    : center;
        flex-direction : column;
        justify-content: center;
        padding-block: 13px;
        font-size  : 16px;
        font-weight: 500;
        color      : var(--main-color);
        text-align: center;
        cursor: pointer;
    }
    .choice-list__label:has(input:checked){
        background-color: var(--main-color);
        color: #fff;
    }
    .choice-list__label input {
        display: none;
    }
        .choice-list__small {
            font-size: 12px;
            line-height: 1.3;
        }
        .choice-list__text {
            font-weight: 500;
            line-height: 1.3;
        }


/*-------------------------------------------------------------------------
物件
-------------------------------------------------------------------------*/

.recommend {
    background: url("/images/index/bg_recommend.webp") no-repeat center / cover;
    padding-block: 120px 47px;
}
.bkn__list {
    display              : grid;
    gap                  : 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: -16px 0 30px;
}
    .bkn__list [aria-hidden="true"]{
        display: none;
    }
.bkn__toggle {
    width: 260px;
    height: 60px;
    background-color: var(--main-color);
    border: 2px solid var(--main-color);
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin: auto;
    padding: 0 18px 0 0;
    position: relative;
    font-size  : 20px;
    font-weight: 500;
    color      : #fff;
    transition: 0.4s;
}
.bkn__toggle:hover {
    background-color: #fff;
    color: var(--main-color);
}

    .bkn__toggle span {
        width: 24px;
        height: 24px;
        background-color: currentColor;
        border-radius: 50%;
        display        : flex;
        align-items    : center;
        justify-content: center;
        position: absolute;
        top     : 0;
        bottom  : 0;
        right   : 30px;
        margin  : auto;
        transition: 0.4s;
    }
    .bkn__toggle svg {
        width: 12px;
        height: 12px;
        fill: var(--main-color);
        transition: 0.4s;
    }
    .bkn__toggle:hover svg {
        fill: #fff;
    }

/* CARD
--------------------------- */
.bkn__card {
    background-color: #fff;
    border: 1px solid var(--dark-color);
    display: block;
    height: 100%;
    position: relative;
}
.bkn__card:hover {
    filter: brightness(1.1);
}
    .bkn__img {
        height: 179px;
    }
    .bkn__info {
        padding: 5px 15px 11px;
    }
        .bkn__name {
            text-overflow: ellipsis;
            overflow     : hidden;
            white-space  : nowrap;
            font-size: 16px;
            font-weight: 700;
        }
        .bkn__price {
            font-size  : 14px;
            font-weight: 700;
            color      : var(--main-color);
        }
            .bkn__price span {
                font-size: 18px;
            }
        .bkn__text {
            text-overflow: ellipsis;
            overflow     : hidden;
            white-space  : nowrap;
            font-size: 14px;
        }
        .bkn__text.is-limit-line2 {
            display           : -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            white-space: normal;
        }
        .bkn__bottom {
            border-top: 1px solid var(--dark-color);
            margin: 9px 0 0;
            padding: 10px 0 0;
        }
        .bkn__bottom > * + * {
            margin: 4px 0 0;
        }
        .bkn__favorite-btn {
            width: 35px;
            height: 35px;
            background-color: rgb(255 255 255 / 80%);
            border-radius: 50%;
            position: absolute;
            top: 10px;
            right: 10px;
        }
            .bkn__favorite-btn svg {
                width: 18px;
                height: 18px;
                fill: #BFBFBF;
            }
            .bkn__favorite-btn.is-checked svg {
                fill: #CB0000;
                animation: heartAnime 800ms;
            }

/* ハートのアニメーション内容 */
@keyframes heartAnime {
    0% {
        transform: scale(0);
    }
    75% {
        transform: scale(1.1, 0.9) translate(0%, 5%);
    }
    80% {
        transform: scale(0.95, 1.05) translate(0%, -3%);
    }
    100% {
        transform: scale(1, 1) translate(0%, 0%);
    }
}

/*-------------------------------------------------------------------------
#
-------------------------------------------------------------------------*/

.flow {
    padding-block: 66px 80px;
    overflow-x: hidden;
}
    .flow__contents {
        background-color: var(--main-color);
        padding-block: 42px 50px;
    }

/* TAB
--------------------------- */
.tab {
    display: flex;
    gap: 10px;
}
    .tab__items {
        height: 48px;
        background-color: #A5B1B9;
        border: 2px solid #A5B1B9;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        padding: 0 18px 2px;
        font-size: 25px;
        font-weight: 700;
        color: #fff;
        letter-spacing: .06em;
        transition: 0.4s;
    }
    .tab__items:hover {
        background-color: #fff;
        color: #A5B1B9;
    }
    .tab__items.active{
        background-color: var(--main-color);
        border-color: var(--main-color);
        color: #fff;
    }
    .tab__items.active:hover {
        background-color: #fff;
        color: var(--main-color);
    }
    .js-tab-panel{
        display: none;
    }
    .js-tab-panel.is-active{
        display: block;
    }
    .flow__contents .js-tab-panel {
        max-width: var(--screen-size);
        margin-inline: auto;
    }

/* LIST
--------------------------- */
/* 左右とも画面幅いっぱいにブレイクアウト。カード初期位置はコンテナ左端 */
.flow__panel {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}
    .flow__list {
        /* 画面端〜1140pxコンテナ端（スクロールバー左右マージンと共通） */
        --flow-side-offset: max(0px, calc((100vw - var(--screen-size)) / 2));
        display: flex;
        white-space: nowrap;
        overflow-x: auto;
        padding: 0 0 30px;
        box-sizing: border-box;
    }
    /* 先頭スペーサー: scrollLeft=0 のときカードがコンテナ左端に揃う */
    .flow__list::before {
        content: '';
        flex: 0 0 auto;
        width: var(--flow-side-offset);
    }
    /* 末尾スペーサー: 最後のカードがコンテナ右端に揃うまでスクロール可 */
    .flow__list::after {
        content: '';
        flex: 0 0 auto;
        width: var(--flow-side-offset);
    }
    .flow__list::-webkit-scrollbar { 
        height: 6px;
    }
    /* スクロールバーを1140px幅（コンテナ幅）に見せる */
    .flow__list::-webkit-scrollbar-thumb,
    .flow__list::-webkit-scrollbar-track-piece:start,
    .flow__list::-webkit-scrollbar-track-piece:end {
        margin-inline: var(--flow-side-offset);
        border-radius: 7px;
    }
    .flow__list::-webkit-scrollbar-thumb { 
        background: #fff;
    }
    .flow__list::-webkit-scrollbar-track-piece:start,
    .flow__list::-webkit-scrollbar-track-piece:end {
        background: #9C9C9C;
    }
        .flow__items {
            width: 260px;
            min-width: 260px;
        }
        .flow__items + .flow__items {
            margin-left: 30px;
        }
            .flow__ttl {
                display    : flex;
                gap        : 12px;
                align-items: center;
                margin-block: 0 5px;
                font-size  : 20px;
                font-weight: 700;
                color      : #fff;
            }
            .flow__text {
                margin: 15px 0 0;
                color: #fff;
                white-space: normal;
            }

/*-------------------------------------------------------------------------
バナー
-------------------------------------------------------------------------*/

.banner-section {
    padding-block: 100px;
}
    .banner-list {
        display        : flex;
        gap            : 20px;
        flex-wrap      : wrap;
        justify-content: center;
    }
        .banner-list a:hover {
            filter: brightness(1.1);
        }

/*-------------------------------------------------------------------------
お役立ち情報
-------------------------------------------------------------------------*/

.usuful {
    padding-block: 69px 100px;
}
    .usuful__heading {
        display        : flex;
        align-items    : center;
        justify-content: space-between;
    }
        .usuful__btn {
            min-width: 240px;
            height: 60px;
            background-color: #fff;
            border: 2px solid var(--dark-color);
            display        : flex;
            gap            : 9px;
            align-items    : center;
            justify-content: center;
            font-family: var(--archivo);
            font-size  : 20px;
            font-weight: 900;
            letter-spacing: .06em;
            text-transform: uppercase;
            position: relative;
            top: -10px;
            transition: 0.4s;
        }
        .usuful__btn:hover {
            background-color: var(--dark-color);
            color: #fff;
        }
        .usuful__btn:hover .ui-btn-arw--dark {
            background-color: #fff;
        }
        .usuful__btn:hover .ui-btn-arw--dark svg {
            stroke: var(--dark-color);
        }

/* LIST
--------------------------- */
.usuful__list {
    display              : grid;
    gap                  : 20px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: -20px 0 0;
}
    .usuful__img {
        display: block;
        height: 180px;
    }
    .usuful__img:hover {
        filter: brightness(1.1);
    }
    .usuful__time {
        margin-block: 2px 1px;
        font-size  : 14px;
        font-weight: 500;
    }
    .usuful__text {
        overflow          : hidden;
        display           : -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

/*-------------------------------------------------------------------------
近賃。
-------------------------------------------------------------------------*/

.chikachin {
    background: url("/images/index/bg_chikachin.webp") no-repeat center / cover;
    padding-block: 100px;
}
    .chikachin__panel {
        background-color: #fff;
        padding-block: 43px 46px;
        text-align: center;
    }
        .chikachin__catch {
            width: fit-content;
            background-color: var(--main-color);
            margin: 24px auto 29px;
            padding: 1px 12px;
            font-size  : 25px;
            font-weight: bold;
            color      : #fff;
            letter-spacing: .06em;
        }
        .chikachin__text {
            line-height: 1.87;
        }

/*-------------------------------------------------------------------------
保護者の方へ
-------------------------------------------------------------------------*/

.parents {
    background: var(--main-color) url("/images/index/bg_text_bg_blue.webp") repeat;
    padding-block: 91px 95px;
    text-align: center;
}
    .parents__ttl {
        width: fit-content;
        border-bottom: 3px solid #fff;
        margin: 0 auto 48px;
        padding: 0 0 11px;
        font-size  : 30px;
        font-weight: 700;
        color      : #fff;
    }
    .parents__text {
        margin-block: 24px 0;
        font-weight: 500;
        color      : #fff;
        line-height: 1.87;
    }

/*-------------------------------------------------------------------------
STORE
-------------------------------------------------------------------------*/

.store {
    background-color: #F8F8F8;
    padding-block: 68px 100px;
    overflow: hidden;
}
.store.is-dark {
    background-color: #292929;
}
    .store__list {
        width: 960px;
    }
        .store__items {
            width: 300px;
            margin: 0 15px;
        }
            .store__img {
                display: block;
                height: 200px;
            }
            .store__name {
                background-color: #292929;
                margin: 0 0 15px;
                padding: 5px 0 6px;
                font-size  : 20px;
                font-weight: 700;
                color      : #fff;
                text-align: center;
            }
            .is-dark .store__name {
                background-color: #fff;
                color: #333;
            }
            .store__info {
                margin: 5px 0 0;
                display: flex;
                gap    : 10px;
            }
                .store__ttl {
                    width: 80px;
                    height: 28px;
                    background-color: #717171;
                    display        : flex;
                    align-items    : center;
                    justify-content: center;
                    font-weight: 700;
                    color      : #fff;
                }
                .store__text {
                    text-overflow: ellipsis;
                    overflow     : hidden;
                    white-space  : nowrap;
                }
                .is-dark .store__text {
                    color: #fff;
                }

/* スライダー  */
.store__list .slick-list {
    overflow: visible;
}