@charset "utf-8";
/*
------------------------------
(C)株式会社ネットラーニング デジタル人材育成研修運営事務局 Style CSS ver.1.0
------------------------------
*/

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* プライマリーカラーの設定 */
    --color-primary-500: #3C65AF;

    /* 研修カラーの設定 */
    --color-yellow: #BBA44C;
    --color-red: #C36060;
    --color-sky: #5FAFAF;
    --color-green: #7D9F47;
    --color-blue: #3C65AF;
    --color-pink: #AF4E7C;
    --color-purple: #5C4FA9;


    --color-yellow-l: #fffae8;
    --color-red-l: #fff0f0;
    --color-sky-l: #eafafa;
    --color-green-l: #f3ffe0;
    --color-blue-l: #e3edff;
    --color-pink-l: #ffeaf4;
    --color-purple-l: #eeebff;

    /* テキストリンク色の設定 */
    --color-text-link: var(--color-primary-500);

    /* 見出しサイズの設定 */
    --font-size-h1: clamp(2.8rem, 3vw, 3.6rem);
    --font-size-h2: clamp(2.4rem, 2vw, 3.2rem);
    --font-size-h3: clamp(2rem, 2vw, 2.8rem);
    --font-size-h4: clamp(1.8rem, 2vw, 2.4rem);
    --font-size-h5: clamp(1.8rem, 2vw, 2rem);


    --font-size-m: clamp(1.4rem, 1.8vw, 1.6rem);
    --font-size-l: clamp(1.6rem, 1.8vw, 1.8rem);
    --font-size-xl: clamp(1.6rem, 1.8vw, 2rem);

    --color-btn-primary: var(--color-black);
    --color-btn-primary-frame: var(--color-black);
    --color-btn-sub-frame: var(--color-black);
    --color-btn-sub-text: var(--color-black);

    /* フォントの設定 */
    --font-family: "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "Segoe UI", "verdana", sans-serif;
    --font-family-mont: "Montserrat", "Zen Kaku Gothic New", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "Segoe UI", "verdana", sans-serif;


    /* コンテンツ幅の設定 */
    --size-contents: clamp(375px, 90%, 1440px);
}

.is-01 {
    --program-color: var(--color-red);
    --program-color-l: var(--color-red-l);
}

.is-02 {
    --program-color: var(--color-yellow);
    --program-color-l: var(--color-yellow-l);
}

.is-03 {
    --program-color: var(--color-green);
    --program-color-l: var(--color-green-l);
}

.is-04 {
    --program-color: var(--color-pink);
    --program-color-l: var(--color-pink-l);
}

.is-05 {
    --program-color: var(--color-sky);
    --program-color-l: var(--color-sky-l);
}

.is-06 {
    --program-color: var(--color-blue);
    --program-color-l: var(--color-blue-l);
}

.is-07 {
    --program-color: var(--color-purple);
    --program-color-l: var(--color-purple-l);
}

.is-seminar {
    --program-color: var(--color-blue);
    --program-color-l: var(--color-blue-l);
}

.u-mark-arrow::before,
.u-mark-check::before,
.u-mark-anchor::before {
    z-index: 2;
    background-color: var(--color-white);
    left: 0.1em;
    top: 0.4em;
}

.u-mark-arrow::after,
.u-mark-check::after,
.u-mark-anchor::after {
    background-color: var(--program-color);
    width: 1.2em;
    height: 1.2em;
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
}

.u-mark-dot::before {
    content: "・";
    color: var(--program-color, inherit);
}

header {
    height: var(--height-header);
}

.c-header .c-header-logo img {
    width: auto;
}

.c-card.u-card-num .c-card-num {
    font-family: var(--font-family-mont);
}

.p-head-l {
    font-size: clamp(3.2rem, 5vw, 8rem);
    color: var(--program-color, var(--color-primary-500));
    font-weight: var(--font-weight-regular);
    font-family: var(--font-family-mont);
    letter-spacing: .025em;
    line-height: 1;
    margin-bottom: var(--size-03);

}

.p-head-l .c-head-sub {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family);
}

.l-bg {
    background-image: url(../../../common/assets/img/top/bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.l-lead {
    font-weight: var(--font-weight-bold);
    text-align: center;
    font-size: var(--font-size-l);
}

#sec-mv {
    min-height: calc(100vh - var(--height-header));
}

#sec-mv .l-mv {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--size-06);
    padding: var(--size-06) 0;
}

#sec-mv .l-mv-cnt {
    align-items: flex-end;
    flex-shrink: 0;
}

#sec-mv .l-h1 {
    font-weight: var(--font-weight-heavy);
    font-size: clamp(3.2rem, 4vw, 6rem);
    line-height: 1.4;
}

#sec-mv .l-h1-sub {
    color: var(--color-primary-500);
}

#sec-mv .l-mv-lead {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h5);
}

#sec-mv .l-mv-dtl {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--size-04);
    align-items: end;
}

#sec-mv .l-mv-list {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-l);
    display: flex;
    gap: var(--size-03);
}

#sec-mv .l-mv-list li::before {
    content: "・";
    color: var(--program-color);
}

.p-free {
    margin-bottom: var(--size--10);
    writing-mode: horizontal-tb;
    border-radius: 50%;
    background-color: var(--program-color, var(--color-white));
    border: solid 3px var(--color-white);
    aspect-ratio: 1;
    color: var(--color-white);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: var(--font-size-h1);
    padding: clamp(1.2rem, 3vw, 2.4rem);
    line-height: 1.2;
    width: fit-content;
    flex: 0 0 auto;
}

#sec-mv .p-free {
    margin-bottom: 0;
    color: var(--color-primary-500);
    border-color: var(--color-primary-500);
}

.p-program {
    flex: 1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

.p-program-slider {
    padding-left: max(calc((100vw - min(90vw, var(--size-contents))) / 2),
            1.6rem);
}

#sec-mv .p-program-slider {
    height: 100%;
}


.p-program-slider .swiper-wrapper {
    align-items: stretch;
}

.p-program-slider .swiper-slide {
    height: auto;
    display: flex;
    min-height: 400px;
    min-width: 400px;
}

.p-program-slider .p-program-box {
    width: 100%;
    height: auto;
    flex: 1;
}

.p-program-controls {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    width: 30%;
}

.p-program-progress {
    flex: 1;
    position: relative;
    height: 4px;
    background: #ddd;
}

.p-program-progress .swiper-pagination-progressbar-fill {
    background: var(--program-color, var(--color-primary-500));
}


.swiper-button-prev,
.swiper-button-next {
    position: static;
    margin: 0;
    width: 40px;
    height: 40px;
    color: var(--program-color, var(--color-primary-500));
}


.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 20px;
    font-weight: bold;
}

.p-program-toggle {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-program-toggle svg {
    width: 20px;
    height: 20px;
}

.p-program-toggle svg {
    fill: var(--program-color, var(--color-primary-500));
}

.icon-play {
    display: none;
}

.p-program-toggle.is-play .icon-pause {
    display: none;
}

.p-program-toggle.is-play .icon-play {
    display: block;
}



.p-program-box {
    height: 100%;
    position: relative;
    border: solid var(--size-01) var(--program-color);
    border-radius: var(--size-01);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

.p-program-thum {
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

a:hover .p-program-thum {
    transform: scale(1.05);
}

.p-program-box.is-01 .p-program-thum {
    background-image: url(../../../common/assets/img/top/program-01.jpg);
}

.p-program-box.is-02 .p-program-thum {
    background-image: url(../../../common/assets/img/top/program-02.jpg);
}

.p-program-box.is-03 .p-program-thum {
    background-image: url(../../../common/assets/img/top/program-03.jpg);
}

.p-program-box.is-04 .p-program-thum {
    background-image: url(../../../common/assets/img/top/program-04.jpg);
}

.p-program-box.is-05 .p-program-thum {
    background-image: url(../../../common/assets/img/top/program-05.jpg);
}

.p-program-box.is-06 .p-program-thum {
    background-image: url(../../../common/assets/img/top/program-06.jpg);
}

.p-program-box.is-07 .p-program-thum {
    background-image: url(../../../common/assets/img/top/program-07.jpg);
}

.p-program-num {
    font-family: var(--font-family-mont);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h1);
    background: var(--program-color);
    position: absolute;
    top: var(--size--01);
    right: 0;
    border-bottom-left-radius: var(--size-01);
    padding: var(--size-015) var(--size-03);
}

.p-program-sub {
    font-size: var(--font-size-l);
    display: block;
}


.p-program .l-arrow {
    bottom: 0;
    background-color: var(--color-white);
}

.p-program-ttl {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h5);
    background-color: var(--program-color);
    color: var(--color-white);
    padding: var(--size-04) var(--size-02) var(--size-07);
    line-height: 1.4;
    z-index: 1;
    width: 100%;
    min-height: var(--size-11);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#top #sec-about .l-about-ttl {
    font-size: var(--font-size-h1);
    text-align: center;
    display: block;
    margin-bottom: var(--size-06);
}

#top #sec-about .l-about-ttl span {
    color: var(--color-primary-500);
}

#top #sec-about .l-about-text {
    font-size: var(--font-size-xl);
    line-height: 2.2;
    font-weight: var(--font-weight-bold);
}

#top #sec-program .p-program-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--size-06) var(--size-04);
}

#top #sec-program .l-program .l-head {
    margin-bottom: var(--size-04);
    padding-left: var(--size-02);
    border-left: var(--size-01) solid var(--color-primary-500);
    font-weight: var(--font-weight-bold);
}

#top #sec-program .l-program .l-head .c-head {
    color: var(--color-primary-500);
}

#top #sec-program .p-program-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border: solid var(--size-01) var(--program-color);
    height: auto;
}


#top #sec-program .p-program-num {
    padding: 0;
    width: var(--size-08);
    height: var(--size-08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-h2);
}

#top #sec-program .p-program-cnt {
    padding: var(--size-03) var(--size-04);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#top #sec-program .l-program-target {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
    color: var(--program-color);
    padding: var(--size-005) var(--size-01);
    background-color: var(--program-color-l);
    border-radius: var(--size-005);
    display: inline-block;
    margin-bottom: var(--size-01);
}

#top #sec-program .l-program-ttl {
    padding-bottom: var(--size-03);
    padding-right: var(--size-04);
    border-bottom: solid 1px var(--program-color);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h5);
    margin: var(--size-01) 0 var(--size-02);
}

.p-program-place {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
    align-items: center;
    display: flex;
    gap: var(--size-01);
    margin-bottom: var(--size-01);
}

.p-program-place .p-icon-pin {
    fill: var(--color-white);
}

#top #sec-program .p-program-place {
    color: var(--program-color);
    padding-right: var(--size-04);
}

#top #sec-program .p-program-place .p-icon-pin {
    fill: var(--program-color);
}

#top #sec-program .l-speaker {
    margin-top: var(--size-03);
    display: flex;
    gap: var(--size-02);
    align-items: center;
}

#top #sec-program .l-speaker img {
    width: var(--size-12);
}

#top #sec-program .l-speaker-name {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    line-height: 1.4;
}

#top #sec-program .l-speaker-name span {
    font-size: var(--font-size-s);
}

.l-arrow {
    color: var(--program-color);
    font-size: 1.2rem;
    font-weight: var(--font-weight-heavy);
    font-family: var(--font-family-mont);
    position: absolute;
    right: var(--size-01);
    bottom: var(--size-015);
    background-color: var(--program-color-l);
    padding: 0 var(--size-015);
    padding-right: var(--size-025);
    border-radius: 500px;
    z-index: 10;
}

.l-arrow::before {
    content: '';
    position: absolute;
    display: inline-block;
    mask-image: url(../img/anchor.svg);
    -webkit-mask-image: url(../img/anchor.svg);
    background-color: var(--program-color);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    width: 1.5em;

    height: 1.5em;
    top: 50%;
    display: block;
    right: 0.15em;
    transform: translateY(-50%) rotate(-90deg);
    transition: all 0.3s ease-in-out;
}

a:hover .l-arrow::before {
    right: -0.15em;
}


#top #sec-feature {
    background-color: var(--color-primary-500);
}

#top #sec-feature>*,
#top #sec-feature .c-head,
#top #sec-feature .c-card.u-card-num .c-card-num {
    color: var(--color-white);
}

#top #sec-feature .c-card .c-head {
    font-size: var(--font-size-h4);

}

#top #sec-feature .c-card-ttl {
    border-bottom: solid 1px var(--color-white);
    padding-bottom: var(--size-03);
}

#top #sec-feature .l-feature-dtl {
    gap: 0 var(--size-column);
}


#top #sec-feature .l-feature-dtl .c-card-box:nth-child(2),
#top #sec-feature .l-feature-dtl .c-card-box:nth-child(4) {
    margin-top: var(--size-06);
}

#top #sec-feature .l-feature {
    align-items: flex-start;
}

#top #sec-feature .l-feature-cnt {
    align-self: flex-start;
}

#top #sec-feature .l-feature-slide {
    overflow: hidden;
    min-height: 0;
}

#top #sec-feature .l-feature-slide {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--size-04);
    overflow: hidden;
}

#top #sec-feature .l-feature-slide-col {
    overflow: hidden;
}

#top #sec-feature .l-feature-slide-track {
    display: flex;
    flex-direction: column;
    gap: var(--size-04);
}

#top #sec-feature .l-feature-slide-track img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 16px;
}

#top #sec-feature .l-feature-slide-col.is-up .l-feature-slide-track {
    animation: featureScrollUp 24s linear infinite;
}

#top #sec-feature .l-feature-slide-col.is-down .l-feature-slide-track {
    animation: featureScrollDown 24s linear infinite;
}

@keyframes featureScrollUp {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-50%);
    }
}

@keyframes featureScrollDown {
    from {
        transform: translateY(-50%);
    }

    to {
        transform: translateY(0);
    }
}

#sec-ob .l-lead {
    margin-top: var(--size-06);
    line-height: 2.2;
}

#sec-search {
    background-color: var(--color-gray-50);
}

#sec-search .p-program-thum {
    aspect-ratio: 4 / 3;
}

.p-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--size-06);
}

.p-footer .p-footer-logo {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.p-footer .p-footer-logo p {
    font-size: 1.2rem;
}

.p-footer .p-footer-cnt .c-col-box {
    padding-left: var(--size-02);
    font-weight: var(--font-weight-bold);
    border-left: solid 3px var(--program-color);
    justify-content: center;
}

.p-footer-under {
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 1.2rem;
    padding: var(--size-01) 0;
}

.p-footer-under .p-footer-copr {
    display: flex;
    justify-content: space-between;
}

.p-footer-under .p-footer-link {
    display: flex;
    gap: var(--size-03);
}

.p-footer-under .p-footer-link a:hover {
    text-decoration: underline;
}

#detail .p-mv {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--size-06);
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    background-position: top right;
    padding-bottom: clamp(var(--size-02), 5vw, var(--size-05));
}

#detail .is-01 .p-mv {
    background-image: url(../img/mv-01.jpg);
}

#detail .is-02 .p-mv {
    background-image: url(../img/mv-02.jpg);
}

#detail .is-03 .p-mv {
    background-image: url(../img/mv-03.jpg);
}

#detail .is-04 .p-mv {
    background-image: url(../img/mv-04.jpg);
}

#detail .is-05 .p-mv {
    background-image: url(../img/mv-05.jpg);
}

#detail .is-06 .p-mv {
    background-image: url(../img/mv-06.jpg);
}

#detail .is-07 .p-mv {
    background-image: url(../img/mv-07.jpg);
}

#detail .is-seminar .p-mv {
    background-image: url(../img/mv-seminar.jpg);
}



#detail .p-mv-nav {
    display: flex;
    justify-content: space-around;
    background-color: var(--program-color-l);
    border-radius: var(--size-01);
    color: var(--program-color);
    font-weight: var(--font-weight-heavy);
    font-size: var(--font-size-l);
    padding: var(--size-01) var(--size-02);
}

#detail .p-mv-cnt {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--size-08);
}


#detail .p-mv-target {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-heavy);
    color: var(--program-color);
    border: solid 3px var(--program-color);
    padding: var(--size-005) var(--size-03);
    border-radius: var(--size-01);
    display: inline-block;
    margin-bottom: var(--size-02);
    background-color: var(--color-white);
}

#detail .p-mv h1 {
    gap: var(--size-01);
    font-size: clamp(3.2rem, 5vw, 6rem);
    color: var(--program-color);
    line-height: 1.4;
    font-weight: var(--font-weight-heavy);
    text-shadow: rgb(255, 255, 255) 1px 1px 0px, rgb(255, 255, 255) -1px -1px 0px, rgb(255, 255, 255) -1px 1px 0px, rgb(255, 255, 255) 1px -1px 0px, rgb(255, 255, 255) 0px 1px 0px, rgb(255, 255, 255) 0px -1px 0px, rgb(255, 255, 255) -1px 0px 0px, rgb(255, 255, 255) 1px 0px 0px;
}

#detail .p-mv h1 span {
    font-size: var(--font-size-h2);
}

#detail .p-mv-lead {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    margin-top: var(--size-02);
    text-shadow: rgb(255, 255, 255) 1px 1px 0px, rgb(255, 255, 255) -1px -1px 0px, rgb(255, 255, 255) -1px 1px 0px, rgb(255, 255, 255) 1px -1px 0px, rgb(255, 255, 255) 0px 1px 0px, rgb(255, 255, 255) 0px -1px 0px, rgb(255, 255, 255) -1px 0px 0px, rgb(255, 255, 255) 1px 0px 0px;
}

#detail .p-mv-place {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    color: var(--program-color);
    margin-top: var(--size-02);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--size-01);
}

.p-icon-pin {
    fill: var(--program-color);
}

#detail #sec-program {
    background: linear-gradient(to bottom, var(--color-white) 0%, var(--color-gray-50) 100%);
}

#detail .p-about {
    display: flex;
    gap: var(--size-06);
}

#detail .p-about-box {
    display: flex;
    flex-direction: column;
    gap: var(--size-04);
}

#detail .p-about-box.p-sticky {
    position: sticky;
    height: 100%;
    top: var(--height-header);
}

#detail .p-about-box:last-of-type {
    margin-top: var(--size-20);
}

#detail .p-about-cnt {
    display: flex;
    align-items: baseline;
    gap: var(--size-03);
    position: relative;
}

#detail .p-about-num span {
    background-color: var(--program-color);
    font-family: var(--font-family-mont);
    color: var(--color-white);
    font-size: var(--font-size-h1);
    border-radius: 50%;
    aspect-ratio: 1;
    width: var(--size-08);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* #detail .is-06 .p-about-num span,
#detail .is-07 .p-about-num span {
    border-radius: 500px;
    font-size: var(--font-size-h5);


    aspect-ratio: unset;
    padding: var(--size-01) var(--size-02);
    width: auto;
    font-family: var(--font-family);
    font-weight: var(--font-weight-bold);
}

#detail .is-06 .p-about-num,
#detail .is-07 .p-about-num {
    flex-shrink: 0;
}

#detail .is-06 .p-about-cnt,
#detail .is-07 .p-about-cnt {
    flex-direction: column;
    gap: var(--size-005);
}

#detail .is-06 .p-about-cnt::before,
#detail .is-07 .p-about-cnt::before {
    content: none;
} */


#detail .p-about-cnt::before {
    content: "";
    position: absolute;
    width: 3px;
    height: calc(100% - var(--size-08));
    background-color: var(--program-color-l);
    left: var(--size-04);
    bottom: var(--size--02);
}

#detail .p-about-speaker {
    background-color: var(--program-color-l);
    padding: var(--size-04);
    display: flex;
    border-radius: var(--size-01);
    flex-direction: column;
    gap: var(--size-03);
}

#detail .p-about-speaker .p-speaker-cnt {
    display: flex;
    gap: var(--size-02);
    align-items: center;
    font-weight: var(--font-weight-bold);
}

#detail .p-about-speaker .p-speaker-cnt img {
    width: 120px;
    height: 100%;
}

#detail .p-about-speaker .p-speaker-name {
    font-size: var(--font-size-xl);
}

#detail .p-about-speaker .p-speaker-name span {
    font-size: var(--font-size-m);
}

#detail .p-about-speaker .p-speaker-dtl {
    font-size: var(--font-size-s);
}

.p-head-line {
    padding-left: var(--size-02);
    border-left: solid 3px var(--program-color);
}

#detail .sec-contact {
    background-color: var(--program-color);
}

#detail .sec-contact p {
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-l);
    color: var(--color-white);
}

#detail .p-outline-box {
    display: flex;
    gap: var(--size-04);
    align-items: baseline;
    padding: var(--size-04) 0;
    border-top: solid 1px var(--color-gray-100);
}


#detail .p-outline-box .p-head-line {
    font-size: var(--font-size-l);
    min-width: 5em;
}

#detail .p-outline-dtl {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
}

#detail .p-outline-dtl h4 {
    color: var(--program-color);
    position: relative;
    padding-left: var(--size-015);
}

#detail .p-outline-dtl h4:not(:first-of-type) {
    margin-top: var(--size-03);
}

#detail .p-outline-dtl h4::before {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background-color: var(--program-color);
}

#detail .p-outline-dtl .c-list li .is-closed {
    text-decoration: line-through;
    color: #999;
}

#detail .p-outline-dtl .c-list li .closed-note {
    margin-left: var(--size-02);
    color: var(--color-caution-500);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
}

#detail .p-outline-address {
    font-weight: var(--font-weight-bold);
}

#detail .p-outline-address span {
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-s);
}

#detail .p-outline-map {
    margin-top: var(--size-02);
}

#sec-course {
    background-color: var(--color-gray-50);
}

.p-course.cardSwiper .swiper-slide {
    height: auto;
}

.p-course .c-card-box {
    overflow: hidden;
    height: 100%;
    flex: none;
}

.p-course .c-card-dtl {
    font-size: var(--font-size-s);
}

.p-course .c-card-thum img {
    width: 100%;
    display: block;
    border-radius: var(--size-005);
}

.p-course-nav {
    display: flex;
    align-items: center;
    gap: var(--size-03);
    margin-top: var(--size-03);
}

.p-course-nav .swiper-scrollbar {
    position: static;
    flex: 1;
}

.p-course-nav .swiper-scrollbar-drag {
    background: var(--program-color, var(--color-primary-500));
}

#sec-faq {
    background-color: var(--color-gray-50);
}

#sec-faq .c-acd-ttl button {
    position: relative;
}

#sec-faq .c-acd-ttl button::before {
    content: "Q.";
    color: var(--program-color, var(--color-primary-500));
}

#sec-faq .c-acd-dtl p::before {
    content: "A.";
    color: var(--program-color, var(--color-primary-500));
    font-weight: var(--font-weight-bold);
    padding-right: var(--size-01);

}

.c-acd.u-acd-arrow .c-acd-ttl button::after {
    background-color: var(--program-color, var(--color-primary-500));
}

#detail .is-seminar .p-mv {
    min-height: 50vh;
}


#detail .is-seminar .p-mv-schedule {
    font-family: var(--font-family-mont);
    margin-top: var(--size-03);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-h4);
    color: var(--program-color);
    text-shadow: rgb(255, 255, 255) 1px 1px 0px, rgb(255, 255, 255) -1px -1px 0px, rgb(255, 255, 255) -1px 1px 0px, rgb(255, 255, 255) 1px -1px 0px, rgb(255, 255, 255) 0px 1px 0px, rgb(255, 255, 255) 0px -1px 0px, rgb(255, 255, 255) -1px 0px 0px, rgb(255, 255, 255) 1px 0px 0px;
}

#detail .is-seminar .p-mv-schedule span {
    font-size: var(--font-size-h1);
}

#detail .is-seminar #sec-program {
    background: none;
    background-color: var(--color-gray-50);
}

#detail .is-seminar iframe {
    border-radius: var(--size-01);
    border: solid 1px var(--color-gray-100);
}

#detail .is-seminar .p-about-box {
    flex: 1;
}

#form h1 {
    font-size: var(--font-size-h1);
}

#form h1 .c-head-sub {
    color: var(--program-color);
}


#form #sec-ttl {
    background-color: var(--color-gray-50);
}

#form #sec-form {
    padding-top: 0;
}

@media only screen and (max-width:1280px) {

    #top #sec-program .p-program-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--size-04) var(--size-02);
    }
}


@media only screen and (max-width:1024px) {

    /* #sec-mv .l-mv-cnt {
        flex-direction: column;
        flex-wrap: nowrap;
    } */

    .u-header-pc {
        display: none !important;
    }

    .u-header-sp {
        display: flex !important;
    }

    .p-footer .p-footer-cnt .c-col-box {
        font-size: var(--font-size-s);
    }


    #sec-mv .p-free {
        padding: var(--size-02);
        font-size: var(--font-size-h5);
    }

    .p-program-slider .swiper-slide {
        height: auto;
        display: flex;
        min-height: 380px;
        min-width: 380px;
    }

    #top #sec-feature .l-feature-dtl {
        gap: var(--size-column);
    }


    #sec-mv .l-mv-lead {
        font-size: var(--font-size-l);
    }

    #sec-mv .l-mv-list {
        font-size: var(--font-size-m);
    }

    .p-program-ttl {
        font-size: var(--font-size-m);
        line-height: 1.6;
    }

    .p-program-sub {
        font-size: var(--font-size-s);
    }

    #detail .p-mv {
        padding-top: clamp(var(--size-02), 5vw, var(--size-05));
    }

    #detail .p-mv-cnt {
        margin-bottom: 0;
    }

    .p-free {
        margin-bottom: 0;
    }

    .p-footer .p-footer-logo {
        flex-direction: column;
        align-items: baseline;
        gap: var(--size-02);
    }
}

@media only screen and (max-width:768px) {
    .c-header .c-header-logo img {
        width: 250px;
    }

    #sec-mv .l-mv-dtl {
        justify-content: space-between;
    }

    #top #sec-program .p-program-wrap {
        grid-template-columns: repeat(1, 1fr);
    }

    #top #sec-feature .l-feature-slide {
        gap: 12px;
    }

    #top #sec-feature .l-feature-slide-track {
        gap: 12px;
    }

    #top #sec-feature .l-feature-slide-track img {
        border-radius: 12px;
    }

    #detail .p-mv {
        min-height: auto;
    }

    #detail .p-mv-nav {
        display: none;
    }



    #detail .p-about {
        flex-direction: column;
    }

    #detail .p-about-box.p-sticky {
        position: static;
        gap: unset;
    }

    #detail .p-about-speaker {
        margin-top: var(--size-03);
    }

    #detail .p-about-box:last-of-type {
        margin-top: var(--size-03);
    }

    #sec-search .p-program-thum {
        aspect-ratio: 3 / 2;
    }

    .p-program-controls {
        width: 100%;
    }


    #detail .p-mv-target {
        margin-bottom: var(--size-005);
    }

    #detail .p-free {
        margin-bottom: var(--size-02);
        border-radius: var(--size-01);
        aspect-ratio: unset;
        font-size: var(--font-size-xl);
        font-weight: var(--font-weight-heavy);
        padding: var(--size-005) var(--size-03);
        line-height: 1.8;
        display: inline-block !important;
    }

    .p-footer .p-footer-logo img {
        width: auto;
    }

    .p-footer-under .p-footer-copr {
        flex-direction: column;
    }

    .p-footer-under .p-footer-link {
        justify-content: center;
    }

    #top #sec-feature {
        padding-bottom: clamp(var(--size-05), 5vw, var(--size-10));
    }

    #top #sec-feature .l-feature-slide {
        height: auto !important;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    #top #sec-feature .l-feature-slide-col {
        height: 150px;
    }

    #top #sec-feature .l-feature-slide-track {
        flex-direction: row;
        align-items: center;
        width: max-content;
        gap: 12px;
    }

    #top #sec-feature .l-feature-slide-track img {
        width: 220px;
        height: 150px;
        flex: 0 0 auto;
    }

    #top #sec-feature .l-feature-slide-col.is-up .l-feature-slide-track {
        animation: featureScrollLeft 24s linear infinite;
    }

    #top #sec-feature .l-feature-slide-col.is-down .l-feature-slide-track {
        animation: featureScrollRight 24s linear infinite;
    }



    @keyframes featureScrollLeft {
        from {
            transform: translateX(0);
        }

        to {
            transform: translateX(-50%);
        }
    }

    @keyframes featureScrollRight {
        from {
            transform: translateX(-50%);
        }

        to {
            transform: translateX(0);
        }
    }


}

@media (max-width: 520px) {
    .c-header .c-header-logo img {
        width: 200px;
    }

    .l-bg {
        background-attachment: unset;
        background-size: cover;
    }

    #detail .p-mv {
        background-size: cover;
        background-position: center calc(-1 * var(--height-header));
        height: 750px;
        justify-content: end;
    }

    #detail .is-01 .p-mv {
        background-image: url(../img/mv-01-sp.jpg);
    }

    #detail .is-02 .p-mv {
        background-image: url(../img/mv-02-sp.jpg);
    }

    #detail .is-03 .p-mv {
        background-image: url(../img/mv-03-sp.jpg);
    }

    #detail .is-04 .p-mv {
        background-image: url(../img/mv-04-sp.jpg);
    }

    #detail .is-05 .p-mv {
        background-image: url(../img/mv-05-sp.jpg);
    }

    #detail .is-06 .p-mv {
        background-image: url(../img/mv-06-sp.jpg);
    }

    #detail .is-07 .p-mv {
        background-image: url(../img/mv-07-sp.jpg);
    }


    #detail .is-seminar .p-mv {
        background-image: url(../img/mv-seminar-sp.jpg);
    }


    .p-program-slider .swiper-slide {
        min-height: 300px;
        min-width: 300px;
    }

    .p-program-place {
        align-items: normal;
    }

    #sec-mv .l-mv-lead,
    #sec-mv .l-mv-list,
    #top #sec-about .l-about-text {
        font-size: var(--font-size-s);
    }

    #sec-mv .l-mv-dtl {
        gap: 0;
    }

    #top #sec-about .l-about-ttl {
        font-size: var(--font-size-h4);
    }

    #detail .p-outline-box {
        flex-direction: column;
        gap: var(--size-02);
    }
}