@charset "UTF-8";

/* ============================
THEME VARIANT B (SOLID / CLEAN)
============================ */

:root {
    _--brand: #2350D2;
    --brand: #e9173d;
    --brand-l: #fff2f6;
    _--brand-d: #0f34a3;
    --brand-d: #ba0b2b;
    /* 指定メインカラー */
    _--ink: #0f1630;
    --ink: #130e10;
    /* 本文色 */
    --muted: #5c6373;
    /* 補助色 */
    _--bg: #f7f9ff;
    --bg: #fff7f8;
    /* 全体背景（薄いブルーグレー） */
    --paper: #ffffff;
    /* 純白 */
    _--line: #e6ecff;
    --line: #e5e4e4;
    /* 薄い罫線 */
    _--accent: #405ee9;
    --accent: #e9405f;
    /* ボタン/リンク濃色 */
    _--cta: #ff6e50;
    --cta: #169157;
    /* アクセント（価格タグ等） */
    --shadow: 0 8px 24px rgba(96, 93, 94, 0.08);
    --max: calc(70rem + var(--container-space-x) * 2);
}

:root {
    --color-primary: var(--brand);
    --color-primary-hover: var(--brand-d);
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--ink);
    line-height: 1.75;
    letter-spacing: .01em
}

img {
    max-width: 100%;
    height: auto;
    display: block
}

a {
    color: var(--brand);
    text-decoration: none
}

/* Layout */
.pko2-wrap {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding: 0 clamp(16px, 3.2vw, 28px)
}

.pko2-section {
    padding: clamp(56px, 8vw, 96px) 0
}

.pko2-grid {
    display: grid;
    gap: clamp(16px, 2.4vw, 28px)
}

.pko2-two {
    grid-template-columns: 1fr
}

@media(min-width:960px) {
    .pko2-two {
        grid-template-columns: 1.1fr .9fr
    }
}

/* Hero (full width band) */
.pko2-hero {
    position: relative;
    background: #fff;
    _border-bottom: 1px solid var(--line)
}

.pko2-hero .pko2-wrap {
    padding-top: clamp(72px, 10vw, 120px);
    padding-bottom: clamp(40px, 6vw, 72px)
}

.pko2-kicker {
    color: var(--brand);
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .9rem
}

h1 {
    margin: .35em 0;
    font-size: clamp(28px, 5.2vw, 54px);
    line-height: 1.12
}

.pko2-lead {
    color: var(--muted);
    font-size: clamp(15px, 2.1vw, 18px)
}

.pko2-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 999px;
    background: var(--brand-l);
    color: var(--brand-d);
}

.pko2-pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: .8rem
}

.pko2-hero-visual {
    border-radius: 16px;
    overflow: hidden;
    _box-shadow: var(--shadow);
    _border: 1px solid var(--line)
}

.pko2-hero::after {
    content: "";
    position: absolute;
    right: 0px;
    overflow: hidden;
    top: -60px;
    width: min(40vw, 520px);
    aspect-ratio: 1/1;
    _background: radial-gradient(42% 42% at 50% 50%, rgba(35, 80, 210, .22), rgba(130, 170, 255, .1) 60%, transparent 65%);
    background: radial-gradient(42% 42% at 50% 50%, rgb(210 35 90 / 22%), rgb(255 130 171 / 5%) 60%, transparent 65%);
    pointer-events: none
}

.pko2-cta {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-weight: 800;
    box-shadow: var(--shadow);
    transition: background-color .25s ease, filter .25s ease;
    text-decoration: none
}

.pko2-cta:hover {
    background: var(--color-primary-hover);
    filter: brightness(1.03);
    text-decoration: none
}


/* Section heads */
.pko2-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px
}

.pko2-head .jp {
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: 900;
    margin: 0
}

.pko2-head .en {
    font-size: .82rem;
    color: var(--muted);
    letter-spacing: .08em
}

section#pko2-news {
    h4 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        white-space: initial;
    }
}

@media screen and (max-width:767px) {
    .pko2-head {
        display: block;
        margin-bottom: 25px;
    }

    section#pko2-news {
        h4 {
            margin-top: 0 !important;
        }

        .pko2-news .item {
            align-items: center;
        }
    }
}

/* Cards / lists */
.pko2-cards {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr
}

@media(min-width:760px) {
    .pko2-cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width:1060px) {
    .pko2-cards {
        grid-template-columns: repeat(3, 1fr)
    }
}

.pko2-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    box-shadow: var(--shadow)
}

.pko2-card h3 {
    margin: .2rem 0 .75rem;
    font-size: clamp(18px, 2.4vw, 22px)
}

.pko2-muted {
    color: var(--muted)
}

.pko2-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px
}

.pko2-list li {
    display: flex;
    gap: 10px;
    align-items: center;
}

.pko2-list li:before {
    content: "";
    background-color: var(--brand);
    font-weight: 900;
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    display: block;
    border-radius: 99px
}

/* Pricing */
.pko2-price {
    position: relative
}

.pko2-tag {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: .8rem;
    background: #14539e;
    color: #fff;
    padding: 6px 15px;
    border-radius: 999px;
    font-weight: 800;
}

.pko2-yen {
    font-size: 28px;
    font-weight: 900
}

/* News/Blog list */
.pko2-news {
    display: grid;
    gap: 14px
}

.pko2-news .item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    box-shadow: var(--shadow);
    display: flex;
    column-gap: 20px;
}

.pko2-chip {
    display: inline-block;
    padding: 4px 20px;
    border-radius: 999px;
    background: var(--brand-l);
    _color: var(--brand-d);
    font-weight: 800;
    font-size: .86rem;
    white-space: nowrap;
}

@media screen and (max-width:767px) {
    .pko2-news .item {
        h4 {
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            white-space: initial;
        }

        .media-item-img-warp {
            order: 2;
            margin-left: auto;
            max-width: 145px;
        }

        .wrap_date_title {
            order: 1;
        }
    }
}

@media screen and (max-width:767px) {
    .pko2-news .item {
        display: initial;

        .media-item-img-warp {
            margin-left: initial;
            max-width: initial;
            margin-bottom: 10px;
        }
    }
}

/* Gallery */
.pko2-gallery {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, 1fr)
}

@media(min-width:800px) {
    .pko2-gallery {
        grid-template-columns: repeat(4, 1fr)
    }
}

.pko2-thumb {
    position: relative;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow)
}

.pko2-cap {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    background: rgba(255, 255, 255, .94);
    border-radius: 10px;
    padding: 6px 8px;
    font-size: .85rem
}

/* Forms */
.pko2-form {
    display: grid;
    gap: 12px
}

.pko2-field {
    display: grid;
    gap: 6px
}

.pko2-input,
.pko2-textarea,
select {
    width: 100%;
    background: #fff;
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px 14px;
    outline: none;
    -webkit-appearance: none;
    appearance: none
}

.pko2-input:focus,
.pko2-textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(64, 94, 233, .15)
}

.pko2-textarea {
    min-height: 140px;
    resize: vertical
}

/* Footer */
@media (min-width: 48rem) {
    .footer-group {
        gap: 12.5rem;
    }
}

footer {
    border-top: none;
    color: #fff;
    padding: 24px 0 56px;
    background: #2c2c2c;

    .footer-company-logo {
        max-height: 2.5rem;
    }

    .footer-copyright-text {
        font-weight: 300;
    }

    .footer-item.-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;

        ul {
            padding: 0;
            margin: 0;
            list-style: none;

            li {
                padding: 0;
                margin: 0 0 12px;
                line-height: 1.3;

                a {
                    color: #fff;
                    font-size: 14px;
                }

            }
        }
    }
}

.footer {
    border-top: none;
}


/* Utilities */
.pko2-center {
    text-align: center
}

.pko2-div {
    height: 1px;
    background: var(--line);
    margin: 22px 0
}

.pko2-mt {
    margin-top: clamp(8px, 1vw, 12px)
}

.pko2-mt-lg {
    margin-top: clamp(16px, 2vw, 28px)
}

/* ここから上書き */
.page-title-wrapper {
    height: 8.5rem;
    color: #fff;
    background: var(--brand);
}

.entry-style ul:not(:where([class~=not-editor-style], [class~=not-editor-style] *))>li::before {
    content: "";
    background-color: var(--brand);
    font-weight: 900;
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    display: block;
    border-radius: 99px;
    left: -20px;
}

@media (min-width: 64rem) {
    .header-item-wrap {
        padding: 1.5rem var(--gutter-lg) 1rem;
    }
}

.header-logo {
    width: 100%;
}

@media screen and (max-width:1023px) {
    .header-logo {
        padding: 10px 0;
    }

    .header-title {
        display: flex;
        justify-content: start;
    }
}

@media screen and (max-width:767px) {
    #pko2-curriculum {
        .pko2-wrap li strong {
            display: block;
            white-space: nowrap;
        }
    }
}