/* ==========================================================
   Study's Life v2
   Brand / Base
   ========================================================== */

.sl-design{
    --sl-teal:#009b93;
    --sl-teal-dark:#00766f;
    --sl-teal-soft:#d9eeee;
    --sl-teal-pale:#f3f8f8;

    --sl-ink:#253637;
    --sl-muted:#657475;
    --sl-line:#dce4e4;
    --sl-grey:#e9ecec;

    --sl-blue:#eaf4f7;
    --sl-pink:#f7eef2;
    --sl-purple:#f1edf5;
    --sl-yellow:#faf4df;

    width:100%;

    color:var(--sl-ink);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Noto Sans JP",
        "Yu Gothic",
        Meiryo,
        sans-serif;

    font-size:16px;
    line-height:1.9;
}


.sl-design,
.sl-design *{
    box-sizing:border-box;
}


.sl-design [hidden]{
    display:none !important;
}


.sl-design h1,
.sl-design h2,
.sl-design h3,
.sl-design p{
    margin-top:0;
    padding:0;

    border:0;

    background:none;

    box-shadow:none;

    color:inherit;
}


.sl-design h1::before,
.sl-design h1::after,
.sl-design h2::before,
.sl-design h2::after,
.sl-design h3::before,
.sl-design h3::after{
    content:none;
}


.sl-design a{
    color:inherit;
    text-decoration:none;

    box-shadow:none;
}


.sl-design a:focus-visible,
.sl-design button:focus-visible,
.sl-design [tabindex="0"]:focus-visible{
    outline:3px solid var(--sl-teal);
    outline-offset:3px;
}


.sl-design .support-section-inner{
    width:min(
        1100px,
        calc(100% - 56px)
    );

    margin:0 auto;
}


.sl-design .support-eyebrow{
    margin:0 0 9px;

    color:var(--sl-teal-dark);

    font-size:13px;
    font-weight:700;

    letter-spacing:.13em;
}


.sl-design .support-section-title{
    margin:0;

    color:var(--sl-ink);

    font-size:clamp(
        25px,
        2.8vw,
        32px
    );

    font-weight:700;

    line-height:1.55;

    letter-spacing:.015em;
}


.sl-design .support-section-lead{
    margin:9px 0 0;

    color:var(--sl-muted);

    font-size:15px;
}


/* ==========================================================
   HERO
   写真を主役にしたトップ
   ========================================================== */

.sl-design .support-hero{
    position:relative;

    padding:0 0 68px;

    background:#fff;

    border-bottom:
        1px solid var(--sl-line);
}


/* ==========================================================
   Hero photo
   ========================================================== */

.sl-design .support-hero-photo{
    position:relative;

    display:flex;
    align-items:center;

    min-height:540px;

    overflow:hidden;

        background-image:
        url("https://www.study-s-life.com/wp-content/uploads/2026/09/hero-forest-desktop.webp");

    background-size:cover;

    background-position:center center;

    background-repeat:no-repeat;
}


/*
 * 写真を落ち着かせ、
 * 白文字を読みやすくするための単色オーバーレイ。
 * グラデーションではありません。
 */
.sl-design .support-hero-overlay{
    position:absolute;

    inset:0;

    background:
        rgba(18,58,55,.46);
}


/* ==========================================================
   Hero copy
   ========================================================== */

.sl-design .support-hero-copy{
    position:relative;

    z-index:1;

    padding-top:65px;
    padding-bottom:110px;

    color:#fff;
}


.sl-design .support-hero-copy .support-eyebrow{
    margin:0 0 10px;

    color:#d8efed;

    font-size:13px;
    font-weight:700;

    letter-spacing:.15em;
}


.sl-design .support-hero-sub{
    margin:0 0 19px;

    color:
        rgba(255,255,255,.88);

    font-size:14px;
}


.sl-design .support-hero h1{
    max-width:680px;

    margin:0 0 24px;

    color:#fff;

    font-size:
        clamp(34px,4.1vw,51px);

    font-weight:700;

    line-height:1.5;

    letter-spacing:.025em;

    text-shadow:
        0 1px 5px rgba(0,0,0,.14);
}


.sl-design .support-hero h1 span{
    color:#fff;
}


.sl-design .support-hero-text{
    margin:0 0 17px;

    color:
        rgba(255,255,255,.95);

    font-size:16px;

    line-height:2;

    text-shadow:
        0 1px 4px rgba(0,0,0,.12);
}


.sl-design .support-audience{
    margin:0;

    color:
        rgba(255,255,255,.82);

    font-size:14px;
}


/* ==========================================================
   Search panel
   ========================================================== */

.sl-design .support-search-wrap{
    position:relative;

    z-index:2;

    margin-top:-62px;
}


.sl-design .support-search-entry{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(340px,.85fr);

    gap:50px;

    align-items:center;

    padding:30px 34px;

    background:#fff;

    border:
        1px solid var(--sl-line);

    border-left:
        6px solid var(--sl-teal);

    box-shadow:none;
}


/* ==========================================================
   Search copy
   ========================================================== */

.sl-design .support-entry-label{
    margin:0 0 8px;

    color:var(--sl-muted);

    font-size:13px;
}


.sl-design .support-search-entry h2{
    margin:0 0 10px;

    color:var(--sl-ink);

    font-size:
        clamp(23px,2.5vw,29px);

    font-weight:700;

    line-height:1.6;
}


.sl-design .support-entry-text{
    margin:0;

    color:var(--sl-muted);

    font-size:14px;

    line-height:1.9;
}


/* ==========================================================
   Main search button
   ========================================================== */

.sl-design .support-main-button{
    display:flex;

    justify-content:center;
    align-items:center;

    gap:10px;

    min-height:53px;

    padding:13px 18px;

    background:#fff;

    border:
        1px solid #91bbb7;

    color:
        var(--sl-teal-dark);

    font-size:16px;
    font-weight:700;

    line-height:1.6;

    text-align:center;

    transition:
        background-color .15s,
        border-color .15s;
}


.sl-design .support-main-button:hover{
    background:
        var(--sl-teal-soft);

    border-color:
        var(--sl-teal);
}


/* ==========================================================
   Shortcuts
   ========================================================== */

.sl-design .support-search-shortcuts{
    margin-top:15px;

    padding-top:14px;

    border-top:
        1px solid var(--sl-line);
}


.sl-design .support-search-shortcuts p{
    margin:0 0 8px;

    color:var(--sl-muted);

    font-size:12px;
}


.sl-design .support-shortcut-links{
    display:flex;

    flex-wrap:wrap;

    gap:7px;
}


.sl-design .support-shortcut{
    display:inline-flex;

    justify-content:center;
    align-items:center;

    min-height:39px;

    padding:6px 12px;

    background:#fff;

    border:
        1px solid #a9c9c6;

    color:
        var(--sl-teal-dark);

    font-size:13px;
    font-weight:600;

    line-height:1.6;
}


.sl-design .support-shortcut:hover{
    background:
        var(--sl-teal-soft);
}


/* ==========================================================
   Tablet
   ========================================================== */

@media(max-width:960px){

    .sl-design .support-hero-photo{
        min-height:510px;

        background-position:center center;
    }


    .sl-design .support-hero-copy{
        padding-top:58px;
        padding-bottom:105px;
    }


    .sl-design .support-search-entry{
        grid-template-columns:
            minmax(0,1fr)
            minmax(300px,.9fr);

        gap:30px;

        padding:27px;
    }

}


/* ==========================================================
   Mobile
   ========================================================== */

@media(max-width:760px){

    .sl-design .support-hero{
        padding-bottom:47px;
    }


    .sl-design .support-hero-photo{
        min-height:480px;

        background-image:
            url("https://www.study-s-life.com/wp-content/uploads/2026/09/hero-forest-mobile-scaled.webp");

        background-position:center center;
    }


    .sl-design .support-hero-overlay{
        background:
            rgba(18,58,55,.50);
    }


    .sl-design .support-hero-copy{
        padding-top:48px;
        padding-bottom:78px;
    }


    .sl-design .support-hero h1{
        max-width:none;

        margin-bottom:18px;

        font-size:
            clamp(30px,8vw,40px);

        line-height:1.55;
    }


    .sl-design .support-hero-text{
        font-size:14px;

        line-height:1.9;
    }


    .sl-design .support-audience{
        font-size:13px;
    }


    /* Search */

    .sl-design .support-search-wrap{
        margin-top:-36px;
    }


    .sl-design .support-search-entry{
        grid-template-columns:1fr;

        gap:21px;

        padding:22px 19px;

        border-left-width:5px;
    }


    .sl-design .support-entry-text br{
        display:none;
    }


    .sl-design .support-search-actions{
        width:100%;
    }


    .sl-design .support-main-button{
        width:100%;
    }


    .sl-design .support-shortcut-links{
        display:grid;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:7px;
    }


    .sl-design .support-shortcut{
        width:100%;

        padding:7px 6px;
    }

}


/* ==========================================================
   Small mobile
   ========================================================== */

@media(max-width:400px){

    .sl-design .support-hero-photo{
        min-height:500px;

        background-position:center center;
    }

    .sl-design .support-shortcut-links{
        grid-template-columns:1fr;
    }

}

/* ==========================================================
   Section heading
   ========================================================== */

.sl-design .support-section-heading{
    display:flex;

    justify-content:space-between;
    align-items:flex-end;

    gap:28px;

    margin-bottom:27px;

    padding-left:17px;

    border-left:
        5px solid var(--sl-teal);
}


.sl-design .support-section-heading
.support-section-lead{
    max-width:420px;

    margin:0 0 3px;
}


/* ==========================================================
   Pickup
   ========================================================== */

.sl-design .support-pickup-section{
    padding:62px 0 68px;

    background:#fff;
}


.sl-design .support-pickup-empty{
    display:flex;

    justify-content:center;
    align-items:center;

    gap:24px;

    min-height:150px;

    padding:30px;

    background:var(--sl-teal-pale);

    border:
        1px solid var(--sl-line);

    border-left:
        5px solid var(--sl-teal);
}


.sl-design .support-preparing{
    flex-shrink:0;

    padding:5px 10px;

    background:var(--sl-teal-soft);

    border:
        1px solid #b9d8d5;

    color:var(--sl-teal-dark);

    font-size:13px;
    font-weight:700;
}


.sl-design .support-pickup-empty h3{
    margin:0 0 3px;

    font-size:19px;
    font-weight:600;

    line-height:1.7;
}


.sl-design .support-pickup-empty p{
    margin:0;

    color:var(--sl-muted);

    font-size:14px;
}


.sl-design .slhp-hint{
    margin:0 0 11px;

    color:var(--sl-muted);

    font-size:13px;
}


.sl-design .slhp-track{
    display:flex;

    gap:20px;

    overflow-x:auto;

    padding:3px 0 13px;

    scroll-snap-type:x mandatory;
    scroll-padding:0;

    overscroll-behavior-x:contain;

    scrollbar-width:thin;

    direction:ltr;

    -webkit-overflow-scrolling:touch;
}


.sl-design .slhp-card{
    display:flex;

    flex:
        0 0 calc((100% - 40px) / 3);

    min-width:0;

    overflow:hidden;

    background:#fff;

    border:
        1px solid var(--sl-line);

    scroll-snap-align:start;
}


.sl-design .slhp-link{
    display:flex;

    flex-direction:column;

    width:100%;

    color:inherit;

    text-decoration:none;
}


.sl-design .slhp-image{
    position:relative;

    overflow:hidden;

    aspect-ratio:4 / 3;

    background:#eff3f3;
}


.sl-design .slhp-image img{
    display:block;

    width:100%;
    height:100%;

    margin:0;

    object-fit:cover;
}


/* 写真なし */

.sl-design .slhp-image-empty{
    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    gap:5px;

    width:100%;
    height:100%;

    background:#eef3f3;

    color:#546969;

    text-align:center;
}


.sl-design .slhp-noimage-main{
    font-size:14px;
    font-weight:600;

    letter-spacing:.04em;
}


.sl-design .slhp-noimage-brand{
    color:#849595;

    font-size:11px;

    letter-spacing:.13em;
}


/* 注目 */

.sl-design .slhp-featured{
    position:absolute;

    top:11px;
    left:11px;

    padding:3px 9px;

    background:#fff7df;

    border:
        1px solid #dec78b;

    color:#725c25;

    font-size:12px;
    font-weight:700;

    line-height:1.6;
}


/* Card body */

.sl-design .slhp-body{
    display:flex;

    flex:1;

    flex-direction:column;

    align-items:flex-start;

    padding:19px;
}


.sl-design .slhp-badges{
    display:flex;

    flex-wrap:wrap;

    gap:5px;

    margin-bottom:9px;
}


.sl-design .slhp-target,
.sl-design .slhp-type{
    display:inline-block;

    padding:3px 8px;

    border:1px solid;

    font-size:12px;

    line-height:1.55;
}


.sl-design .slhp-target{
    font-weight:700;
}


.sl-design .slhp-target-individual{
    background:var(--sl-blue);

    border-color:#bfd5dd;

    color:#426875;
}


.sl-design .slhp-target-family{
    background:var(--sl-pink);

    border-color:#dec6cf;

    color:#775361;
}


.sl-design .slhp-type{
    background:var(--sl-purple);

    border-color:#d9d0df;

    color:#65586e;
}


.sl-design .slhp-body h3{
    margin:0 0 5px;

    color:var(--sl-ink);

    font-size:19px;
    font-weight:700;

    line-height:1.6;

    overflow-wrap:anywhere;
}


.sl-design .slhp-area{
    margin:0 0 9px;

    color:var(--sl-muted);

    font-size:13px;
}


.sl-design .slhp-description{
    margin:0 0 16px;

    color:#4d5d5e;

    font-size:14px;

    line-height:1.85;

    overflow-wrap:anywhere;
}


.sl-design .slhp-more{
    margin-top:auto;

    color:var(--sl-teal-dark);

    font-size:13px;
    font-weight:700;

    text-decoration:underline;

    text-underline-offset:4px;
}


/* Carousel controls */

.sl-design .slhp-controls{
    display:flex;

    justify-content:flex-end;
    align-items:center;

    flex-wrap:wrap;

    gap:7px;

    margin:0 0 11px;
}


.sl-design .slhp-controls button{
    min-height:41px;

    padding:7px 11px;

    background:#fff;

    border:
        1px solid #b1cdca;

    color:var(--sl-teal-dark);

    font:inherit;
    font-size:12px;

    cursor:pointer;

    box-shadow:none;
}


.sl-design .slhp-controls button:hover{
    background:var(--sl-teal-soft);
}


.sl-design .slhp-controls button:disabled{
    opacity:.45;

    cursor:default;
}


.sl-design .slhp-position{
    min-width:74px;

    color:var(--sl-muted);

    font-size:12px;

    text-align:center;

    font-variant-numeric:
        tabular-nums;
}


/* ==========================================================
   HOW TO FIND
   パンフレット「入塾までの流れ」型
   ========================================================== */

.sl-design .support-guide-section{
    padding:68px 0 72px;

    background:#fff;

    border-top:
        1px solid var(--sl-line);

    border-bottom:
        1px solid var(--sl-line);
}


.sl-design .support-guide-heading{
    margin-bottom:29px;

    padding-left:17px;

    border-left:
        5px solid var(--sl-teal);
}


.sl-design .support-guide-flow{
    display:block;

    list-style:none;

    margin:0;

    padding:24px;

    background:#e8ebeb;
}


/* 各工程 */

.sl-design .support-guide-step{
    position:relative;

    display:grid;

    grid-template-columns:
        44px minmax(0,1fr);

    column-gap:15px;

    align-items:start;

    margin:0;

    padding:23px 24px;

    background:#fff;
}


.sl-design .support-guide-step:not(:last-child){
    margin-bottom:42px;
}


/* 番号 */

.sl-design .support-step-number{
    display:flex;

    justify-content:center;
    align-items:center;

    width:38px;
    height:40px;

    margin:0;

    background:var(--sl-teal);

    color:#fff;

    font-size:17px;
    font-weight:700;

    line-height:1;
}


/* Text */

.sl-design .support-step-content h3{
    margin:0 0 6px;

    color:var(--sl-ink);

    font-size:19px;
    font-weight:700;

    line-height:1.65;
}


.sl-design .support-step-content p{
    margin:0;

    color:var(--sl-muted);

    font-size:15px;

    line-height:1.9;
}


/* 工程間の矢印 */

.sl-design
.support-guide-step:not(:last-child)::after{
    content:"";

    position:absolute;

    left:50%;
    bottom:-26px;

    width:14px;
    height:14px;

    border-right:
        4px solid #bdc5c5;

    border-bottom:
        4px solid #bdc5c5;

    transform:
        translateX(-50%)
        rotate(45deg);
}


.sl-design .support-guide-note{
    margin:24px 0 0;

    color:var(--sl-muted);

    font-size:13px;

    text-align:center;
}


/* ==========================================================
   ABOUT
   ========================================================== */

.sl-design .support-about-section{
    padding:74px 0 70px;

    background:#fff;
}


.sl-design .support-about-grid{
    display:grid;

    grid-template-columns:
        minmax(0,.85fr)
        minmax(0,1.15fr);

    gap:62px;

    align-items:start;
}


.sl-design .support-about-heading{
    padding-left:17px;

    border-left:
        5px solid var(--sl-teal);
}


.sl-design .support-about-copy p{
    margin:0 0 17px;

    color:var(--sl-muted);

    font-size:15px;

    line-height:2;
}


.sl-design
.support-about-copy p:last-child{
    margin-bottom:0;
}


.sl-design .support-about-highlight{
    margin-top:23px !important;

    padding:
        9px 0 9px 17px !important;

    border-left:
        4px solid var(--sl-teal) !important;

    color:#416362 !important;

    font-weight:600;
}


/* ==========================================================
   Listing
   ========================================================== */

.sl-design .support-listing-section{
    padding:0 0 70px;

    background:#fff;
}


.sl-design .support-listing-panel{
    display:grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(0,1fr);

    gap:38px;

    align-items:center;

    padding:34px 36px;

    background:var(--sl-teal-soft);

    border:
        1px solid #bad9d6;

    border-left:
        6px solid var(--sl-teal);
}


.sl-design .support-listing-panel
.support-section-title{
    font-size:clamp(
        23px,
        2.7vw,
        29px
    );
}


.sl-design .support-listing-copy > p:last-child{
    margin:13px 0 0;

    color:var(--sl-muted);

    font-size:14px;

    line-height:1.95;
}


.sl-design .support-listing-action{
    min-width:0;

    text-align:center;
}


.sl-design .support-listing-action > p{
    max-width:290px;

    margin:11px auto 0;

    color:var(--sl-muted);

    font-size:13px;

    line-height:1.8;
}


.sl-design .support-apply-button{
    display:flex;

    justify-content:center;
    align-items:center;

    gap:10px;

    width:100%;
    min-height:53px;

    padding:13px 19px;

    background:var(--sl-teal);

    border:
        1px solid var(--sl-teal);

    color:#fff !important;

    font-size:15px;
    font-weight:700;

    line-height:1.65;

    text-align:center;

    transition:
        background-color .15s,
        border-color .15s;
}


.sl-design .support-apply-button:hover{
    background:var(--sl-teal-dark);

    border-color:
        var(--sl-teal-dark);
}


/* ==========================================================
   Tablet
   ========================================================== */

@media(max-width:960px){

    .sl-design .support-hero-grid{
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:34px;
    }


    .sl-design .support-search-entry{
        padding:26px;
    }


    .sl-design .support-hero h1{
        font-size:35px;
    }


    .sl-design .slhp-card{
        flex-basis:
            calc((100% - 20px) / 2);
    }


    .sl-design .support-about-grid{
        gap:36px;
    }


    .sl-design .support-listing-panel{
        gap:27px;

        padding:29px;
    }

}


/* ==========================================================
   Mobile
   ========================================================== */

@media(max-width:760px){

    .sl-design .support-section-inner{
        width:
            calc(100% - 36px);
    }


    .sl-design .support-hero{
        padding:39px 0 44px;
    }


    .sl-design .support-hero-grid{
        grid-template-columns:1fr;

        gap:31px;
    }


    .sl-design .support-hero h1{
        margin-bottom:16px;

        font-size:
            clamp(29px,6.9vw,40px);
    }


    .sl-design .support-search-entry{
        padding:23px 20px;

        border-left-width:5px;
    }


    .sl-design .support-search-entry h2{
        font-size:24px;
    }


    .sl-design .support-section-heading{
        display:block;

        margin-bottom:23px;

        padding-left:13px;

        border-left-width:5px;
    }


    .sl-design
    .support-section-heading
    .support-section-lead{
        margin-top:7px;
    }


    .sl-design .support-pickup-section{
        padding:47px 0 51px;
    }


    .sl-design .support-pickup-empty{
        flex-direction:column;

        align-items:flex-start;

        gap:12px;

        min-height:0;

        padding:23px 20px;
    }


    .sl-design .slhp-card{
        flex-basis:100%;
    }


    .sl-design .slhp-controls{
        justify-content:center;
    }


    /* How to find */

    .sl-design .support-guide-section{
        padding:49px 0 53px;
    }


    .sl-design .support-guide-heading{
        margin-bottom:24px;

        padding-left:13px;

        border-left-width:5px;
    }


    .sl-design .support-guide-flow{
        padding:13px;
    }


    .sl-design .support-guide-step{
        grid-template-columns:
            36px minmax(0,1fr);

        column-gap:12px;

        padding:19px 16px;
    }


    .sl-design .support-step-number{
        width:32px;
        height:34px;

        font-size:15px;
    }


    .sl-design .support-step-content h3{
        font-size:17px;
    }


    .sl-design .support-step-content p{
        font-size:14px;
    }


    .sl-design
    .support-guide-step:not(:last-child){
        margin-bottom:38px;
    }


    .sl-design
    .support-guide-step:not(:last-child)::after{
        bottom:-24px;

        width:12px;
        height:12px;
    }


    .sl-design .support-guide-note{
        text-align:left;
    }


    /* About */

    .sl-design .support-about-section{
        padding:51px 0;
    }


    .sl-design .support-about-grid{
        grid-template-columns:1fr;

        gap:27px;
    }


    .sl-design .support-about-heading{
        padding-left:13px;

        border-left-width:5px;
    }


    /* Listing */

    .sl-design .support-listing-section{
        padding-bottom:41px;
    }


    .sl-design .support-listing-panel{
        grid-template-columns:1fr;

        gap:23px;

        padding:25px 20px;

        border-left-width:5px;
    }


    .sl-design
    .support-listing-action > p{
        max-width:none;
    }

}


/* ==========================================================
   Small mobile
   ========================================================== */

@media(max-width:400px){

    .sl-design .support-section-inner{
        width:
            calc(100% - 28px);
    }


    .sl-design .support-search-entry{
        padding:20px 17px;
    }


    .sl-design .support-search-shortcuts{
        gap:7px;
    }


    .sl-design .support-shortcut{
        flex:1;

        padding:8px 7px;
    }

}


/* ==========================================================
   Reduced motion
   ========================================================== */

@media(prefers-reduced-motion:reduce){

    .sl-design *{
        transition:none !important;

        scroll-behavior:auto !important;
    }

}