:root{--ksp-blue:#2f76d2;--ksp-deep:#17375d;--ksp-text:#30465f;--ksp-shadow:0 10px 28px rgba(67,94,128,.08);}
.kailab-story{color:var(--ksp-text);font-size:1.1rem;line-height:1.85;}
.kailab-story > *{max-width:980px !important;margin-left:auto !important;margin-right:auto !important;}
.kailab-story > .kailab-story-hero-wrap{max-width:none !important;width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;}
.kailab-story p{margin-top:.55em;margin-bottom:.8em;}
.kailab-story a{color:#4c83d4;text-decoration-color:#b8d0f1;text-decoration-thickness:1px;text-underline-offset:.17em;transition:.2s ease;}
.kailab-story a:hover{color:#2f76d2;background:rgba(212,228,248,.45);}
.kailab-story-hero-wrap{margin-top:0 !important;margin-bottom:4.8rem !important;padding:2.25rem 0 1rem !important;background:radial-gradient(circle at 82% 18%, rgba(211,229,250,.5), transparent 26%),linear-gradient(180deg,#fff 0%, #fbfdff 48%, #f6fbff 100%);}
.kailab-story-hero{max-width:1080px !important;gap:3.4rem;align-items:flex-start !important;margin-top:0 !important;margin-bottom:0 !important;}
.kailab-story-kicker{display:inline-block;margin:0 0 .65rem;padding:.16rem .65rem;border-radius:999px;background:#6e9fe8;color:#fff;font-size:.72rem;font-weight:700;line-height:1.4;}
.kailab-story-title{margin:0 0 .75rem;color:var(--ksp-deep);font-size:clamp(1.55rem,2.2vw,2rem);line-height:1.25;}
.kailab-story-catch{margin:.2rem 0 1.1rem !important;color:var(--ksp-deep);font-size:clamp(1.8rem,2.7vw,2.35rem);font-weight:700;line-height:1.45;}
.kailab-story-hero-text{font-size:1rem;line-height:1.85;color:#50657c;}
.kailab-story-hero-image{margin:0 !important;}
.kailab-story-hero-image img{display:block;width:100%;height:auto;max-height:380px;object-fit:contain;}
.kailab-story-message,.kailab-story-intro,.kailab-story-next{max-width:900px !important;}
.kailab-story-message{margin-bottom:5rem !important;padding:1.4rem 1.6rem;border:1px solid #d6e4f3;border-radius:16px;background:linear-gradient(145deg,#fbfdff,#f2f7fd);box-shadow:6px 6px 15px rgba(69,96,128,.06),-6px -6px 15px rgba(255,255,255,.95);}
.kailab-story-label{margin-top:0 !important;color:#2f76d2;font-size:.92rem;font-weight:700;}
.kailab-story-intro{margin-bottom:5rem !important;}
.kailab-story-intro h2,.kailab-story-section h2,.kailab-story-next h2{color:var(--ksp-blue);font-size:1.5rem;line-height:1.55;}
.kailab-story-intro h2{margin-top:0;}
.kailab-story-section{max-width:900px !important;gap:3.5rem;align-items:flex-start !important;margin-bottom:6.5rem !important;}
.kailab-story-copy,.kailab-story-figure-col{align-self:flex-start !important;}
.kailab-story-copy h2{margin-top:0;margin-bottom:1.15rem;}
.kailab-story-terms{margin-top:1.15rem;}
.kailab-story-terms__label{margin:0 0 .55rem !important;font-size:.82rem;font-weight:700;color:#6d7f93;}
.kailab-story-terms__links{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 !important;}
.kailab-story-terms__links a{display:inline-flex;align-items:center;padding:.36rem .76rem;border-radius:999px;border:1px solid #dbe5f1;background:#fbfdff;box-shadow:4px 4px 10px rgba(81,107,139,.04),-4px -4px 10px rgba(255,255,255,.96);color:#587fc1;text-decoration:none;font-size:.82rem;line-height:1.25;}
.kailab-story-terms__links a:hover{background:#f2f7fd;color:#2f76d2;}
.kailab-story-figure-col{display:flex;align-items:flex-start;justify-content:center;}
.kailab-story-figure{width:100%;max-width:430px;margin:0 !important;padding:1rem;border:1px solid #e1e9f2;border-radius:18px;background:#fff;box-shadow:7px 7px 18px rgba(76,105,140,.07),-7px -7px 18px rgba(255,255,255,.95);}
.kailab-story-figure.has-background{background:var(--wp--preset--color--base,#fff);}
.kailab-story-figure > .wp-block-image{margin:0 !important;}
.kailab-story-figure img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;object-position:center center;background:transparent;}
.kailab-story-next{margin-top:1rem !important;margin-bottom:4rem !important;padding:1.6rem 1.8rem;border:1px solid #ddd6f5;border-radius:16px;background:linear-gradient(145deg,#fcfbff,#f3f0fd);box-shadow:var(--ksp-shadow);}
.kailab-story-next-label{margin:0 !important;font-size:.8rem;color:#6e6490;}
.editor-styles-wrapper .kailab-story{font-size:1.1rem;line-height:1.85;}
.editor-styles-wrapper .kailab-story-hero-image img{max-height:340px;}
.editor-styles-wrapper .kailab-story-figure{max-width:430px;}
.editor-styles-wrapper .kailab-story-figure img{max-height:320px;object-fit:contain;}

@media (max-width:781px){

.kailab-story{font-size:1.05rem;line-height:1.82;}
.kailab-story > *{width:calc(100% - 20px);}
.kailab-story-hero-wrap{margin-bottom:4.3rem !important;padding:1.1rem 0 .5rem !important;}
.kailab-story-hero{display:block;gap:1.6rem;}
.kailab-story-hero .wp-block-column,.kailab-story-section .wp-block-column{
width:100% !important;
flex-basis:auto !important;
padding:20px 0px !important;
}
.kailab-story-title{font-size:1.55rem;}
.kailab-story-catch{font-size:1.65rem;}
.kailab-story-intro h2,.kailab-story-section h2,.kailab-story-next h2{font-size:1.28rem;}
.kailab-story-hero-image{margin-top:1.1rem !important;}
.kailab-story-hero-image img{max-height:none;}
.kailab-story-section{display:block;margin-bottom:5.5rem !important;}
.kailab-story-figure-col{margin-top:1.5rem;}
.kailab-story-figure{max-width:100%;}

}


/* =========================================================
   Horizontal Swipe Cards
   ========================================================= */

.kailab-story-swipe {
    width: 100%;
    max-width: none;
    margin: 3.5rem 0;
    padding: 0;
    overflow: hidden;
}


.kailab-story-swipe__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100%;
    max-width: none !important;

    gap: 1.5rem;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}


.kailab-story-swipe__track::-webkit-scrollbar {
    display: none;
}


.kailab-story-swipe__card {
    flex: 0 0 min(80vw, 520px);

    min-width: 0;

    padding: 0 !important;

    background: #ffffff;

    border: 1px solid rgba(132, 154, 185, 0.14);

    border-radius: 16px;

    overflow: hidden;

    scroll-snap-align: center;

    box-shadow:
        7px 7px 20px rgba(132, 154, 185, 0.08),
        -5px -5px 16px rgba(255, 255, 255, 0.96);
}


.kailab-story-swipe__image {
    width: 100%;
    margin: 0 !important;
}


.kailab-story-swipe__image img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    background: #ffffff;
}


/* ナビ */

.kailab-story-swipe__nav {
    display: flex;

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

    gap: 1rem;

    margin-top: 0.75rem;
}


.kailab-story-swipe__prev,
.kailab-story-swipe__next {
    display: inline-flex;

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

    width: 42px;
    height: 42px;

    padding: 0;

    border: 1px solid #e2e9f2;
    border-radius: 50%;

    background: #ffffff;

    color: #708fc4;

    font-size: 1.5rem;

    cursor: pointer;
}


.kailab-story-swipe__prev:disabled,
.kailab-story-swipe__next:disabled {
    opacity: 0.3;
}


.kailab-story-swipe__dots {
    display: flex;

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

    gap: 0.5rem;
}


.kailab-story-swipe__dot {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 999px;

    background: #dce4ef;

    transition:
        width 0.2s ease,
        background-color 0.2s ease;
}


.kailab-story-swipe__dot.is-active {
    width: 22px;

    background: #708fc4;
}


@media (max-width: 600px) {

    .kailab-story-swipe__track {
        gap: 0.9rem;
    }


    .kailab-story-swipe__card {
        flex-basis: calc(100vw - 2.5rem);

        border-radius: 12px;
    }

}

/* =====================================
   Story swipe - initial slide size fix
   ===================================== */

/* スライダーの表示領域からはみ出させない */
.kailab-story-swipe {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
}

/* 各カードは必ず表示領域と同じ幅 */
.kailab-story-swipe__card {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	flex: 0 0 100%;
	box-sizing: border-box;
}

/* カード内の要素がカードを押し広げない */
.kailab-story-swipe__card > * {
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

/* 画像の1024pxというHTML上のwidthを
   カード幅より優先させない */
.kailab-story-swipe__image {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

.kailab-story-swipe__image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	box-sizing: border-box;
}