@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700;900&display=swap');
/*
------------------------------
(C)Netlearning LP Style CSS
------------------------------
*/

:root {
    
    /* --font-size-s: clamp(1.4rem, 2vw, 1.6rem);
    --font-size-m: clamp(1.4rem, 2vw, 1.8rem);
    --font-size-l: clamp(1.6rem, 2vw, 2rem);
    --font-size-xl: clamp(1.6rem, 2vw, 2.2rem); */

    --color-text-link: var(--color-primary-500);

    --color-primary-700: #005c96;
    --color-primary-500: #006CA7;
    --color-primary-300: #4a96c2;
    --color-primary-200: #C0E8FF;
    --color-primary-100: #E4F4FD;
    --color-primary-50: #F6FCFF;

    --color-accent: #FFDA46;

    --color-btn-primary: var(--color-accent);
    --color-btn-primary-text: var(--color-primary-500);
    --color-btn-primary-frame: var(--color-white);

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

    
    --font-weight-heavy:900;
    --font-weight-bold: 700;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    --font-weight-light: 300;

    /* --font-size-h1: clamp(2.2rem, 5vw, 4.8rem);
    --font-size-h2: clamp(2.2rem, 4vw, 4.0rem);
    --font-size-h3: clamp(2rem, 3vw, 3.2rem);
    --font-size-h4: clamp(2rem, 3vw, 2.8rem);
    --font-size-h5: clamp(1.8rem, 2vw, 2.4rem); */
}

.fadeTopBtn {
    background-color: #fff;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    box-shadow: 0px 5px 15px 0px rgba(154, 154, 154, 0.35);
    position: relative;
    cursor: pointer;
    bottom: 0;
    z-index: 999;
}

.fadeTopBtn::before {
    position: absolute;
    content: "";
    border-top: solid 1px #001195;
    border-left: solid 1px #001195;
    width: 1.2rem;
    height: 1.2rem;
    transform: rotate(45deg) translateX(-50%);
    top: 50%;
    left: 50%;
}


.c-contents {
    width: clamp(375px, 90%, 1440px);
}

.c-sec {
    padding-top: clamp(var(--size-05), 5vw, var(--size-15));
    padding-bottom: clamp(var(--size-05), 5vw, var(--size-15));
}

h3,h4,h5 {
    color: var(--color-primary-500);
}

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

/* リンク */
.u-mark-anchor {
    color: var(--color-primary-500);
    padding-left: 2em;
}


.u-mark-anchor::before {
    mask-image: url(../img/security/anchor.svg);
    -webkit-mask-image: url(../img/security/anchor.svg);
    width: 1.5em;
    height: 1.5em;
    top: calc((1lh - 1.5em) / 2);
}


/* ボタン */
.c-btn {
    border-width: 5px;
    display: flex;
    font-size: var(--font-size-xl);
    max-width: 48rem;
}

.c-btn.u-btn-rounded {
    padding-top: var(--size-03);
    padding-bottom: var(--size-03);
}

.c-btn.u-btn-primary {
    padding-left: 0;
}

.c-btn .p-btn-label {
    padding: 0 var(--size-02);
    margin-right: var(--size-02);
    display: inline-block;
    background-color: var(--color-white);
    border-radius: 500px;
    transition: 0.3s;
}

/* #sec-contact .c-btn.u-btn-sub {
        background-color: var(--color-primary-300);
        color: var(--color-white);
        border-color: var(--color-white);
        } */


@media (any-hover: hover) {
    /* .c-btn:hover .p-btn-label {
        background-color: var(--color-primary-500);
        color: var(--color-white);
    } */

    .c-btn.u-btn-rev.u-btn-primary:hover {
        color: var(--color-primary-500);
        border-color: var(--color-btn-primary);
        background-color: #fff7df;
    }

    .c-btn.u-btn-rev.u-btn-primary:hover .p-btn-label {
        background-color: var(--color-primary-500);
        color: var(--color-white);
    }

    .c-btn.u-btn-rev.u-btn-sub:hover {
        background-color: var(--color-primary-100);
        color: var(--color-btn-sub);
        border-color: var(--color-primary-500);
    }

    #sec-contact .c-btn.u-btn-sub:hover {
        border-color: var(--color-primary-200);
        background-color: var(--color-white);
    }
}

.c-card .c-card-cnt .c-card-ttl {
    text-align: center;
}

.c-card .c-card-ttl > :is(h1, h2, h3, h4, h5, h6) {
    font-size: var(--font-size-h5);
}

.c-card.u-card-frame .c-card-box {
    border: solid 10px var(--color-primary-500);
    border-radius: var(--size-01);
    background-color: var(--color-white);
}


.c-card.u-card-frame.u-card-num .c-card-cnt .c-card-ttl {
    padding-bottom: var(--size-02);
    border-bottom: solid 1px var(--color-gray-100);
}

.c-card.u-card-frame.u-card-num .c-card-num {
    left: 50%;
    top: var(--size--05);
    transform: translateX(-50%);
    font-size: var(--font-size-h5);
    background-color: var(--color-primary-500);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    width: var(--size-10); 
    height: var(--size-10); 
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* セクション見出し */
.p-h-sec {
    font-size: var(--font-size-h4);
    text-align: center;
}

.p-h-sec .p-h-sec-l {
    font-size: var(--font-size-h3);
}

.p-h-sec .p-h-sec-xl {
    font-size: var(--font-size-h2);
    color: var(--color-primary-500);
}

/* 効果線付き見出し */
.p-h-emp {
    position: relative;
    display: inline-block;
    padding: 0 var(--size-08);
}

.p-h-emp::before,
.p-h-emp::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 100%;
    background-color: var(--color-primary-500);
    bottom: 0;
}

.p-h-emp::before {
    left: 0;
    transform: rotate(-30deg);
}

.p-h-emp::after {
    right: 0;
    transform: rotate(30deg);
}


/* 見出しアンダーライン */
.p-h-u {
    position: relative;
    z-index: 0;
}

.p-h-u::after {
    content: "";
    position: absolute;
    left: var(--size--005);
    bottom: 0;
    width: 100%;
    height: 10px;
    background-color: var(--color-accent);
    z-index: -1;
    transform: skew(-20deg);
    transform-origin: left bottom;
}

/* 見出し上下ライン */
.p-h-line {
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
    padding: var(--size-01) var(--size-04);
    border-top: solid 3px var(--color-primary-500);
    border-bottom: solid 3px var(--color-primary-500);
    font-size: var(--font-size-h5);
    margin-bottom: var(--size-02);
    display: inline-block;
    text-align: center;
}


/* 吹き出ししっぽ */
.p-bubble {
    position: relative;
}

.p-bubble::before {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    border: var(--size-02) solid transparent;
    border-top: var(--size-02) solid currentColor;
}

/* セクション見出し吹き出し */
.p-sec-bubble {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: var(--font-size-h5);
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
    padding: var(--size-01) var(--size-04);
    border-radius: 500px;
    background-color: var(--color-white);
    border: solid 5px var(--color-primary-500);
    top: var(--size--04);
}


/* 三角形矢印 */
.p-triangle {
    border: var(--size-02) solid transparent;
    border-left: var(--size-02) solid var(--color-primary-200);
}

/* コース関連のCTAエリア */

.p-course-cta {
    display: flex;
    justify-content: center;
    gap: var(--size-04);
    margin-top: var(--size-06);
}


.p-course-cta .p-cta-box {
    width: 100%;
    max-width: 48rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-course-cta .p-cta-box .p-bubble {
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
    background-color: var(--color-primary-100);
    border-radius: 500px;
    padding: var(--size-005) var(--size-04);
    white-space: nowrap;
    margin-bottom: var(--size--02);
}

.p-course-cta .p-cta-box .p-bubble::before {
    border-top: var(--size-02) solid var(--color-primary-100);
}

/* 追従ボタン */
.p-btn-fixed {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.p-btn-fixed.is-hide {
    opacity: 0;
}

.p-btn-fixed:not(.is-hide) {
    opacity: 1;
}

.p-btn-fixed {
    position: fixed;
    top: var(--size-15);
    right: 0;
    background-color: var(--color-accent);
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-l);
    letter-spacing: 0.05em;
    writing-mode: vertical-rl;
    padding: var(--size-02);
    border-radius: var(--size-02) 0 0 var(--size-02);
    z-index: 1000;
    border-top: solid 5px var(--color-white);
    border-bottom: solid 5px var(--color-white);
    border-left: solid 5px var(--color-white);
    transition: 0.3s;
}

.p-btn-fixed .p-btn-label {
    border-radius: 500px;
    background-color: var(--color-white);
    padding: var(--size-01) var(--size-005);
    margin-bottom: var(--size-01);
}

.p-btn-fixed:hover {
    padding-right: var(--size-03);
}

.p-asterisk {
    font-size: 1.2rem;
}

.c-header .c-header-wrap {
    padding: var(--size-005) var(--size-02);
}


/* sec-mv */
#sec-mv {
    padding-top: clamp(var(--size-05), 10vw, var(--size-20));
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/security/mv_bg.png);
}

#sec-mv .p-mv-copy {
    font-size: var(--font-size-h5);
    /* font-style: italic; */
    line-height: 1.4;
    white-space: nowrap;
    font-weight: var(--font-weight-bold);
    position: relative;
    z-index: 1;
    /* border-bottom: solid 1px var(--color-primary-500);
    padding-bottom: var(--size-01); */
}


/* #sec-mv .p-mv-copy::after {
    content: "";
    position: absolute;
    left: var(--size--005);
    bottom: -5px;
    width: 100%;
    height: 5px;
    background-color: #fff7df;
    z-index: -1;
    transform: skew(-20deg);
    transform-origin: left bottom;
} */

#sec-mv .p-mv-copy span {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-heavy);
    color: var(--color-primary-500);
}

#sec-mv .p-h-h1 {
    font-size: clamp(3.2rem, 5vw, 4.8rem);
    line-height: 1.5;
    margin-top: var(--size-02);
    font-weight: var(--font-weight-heavy);
}

#sec-mv .p-h-h1 span {
    font-size: var(--font-size-h2);
    display: block;
}

#sec-mv .c-list li {
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, 0px 1px 0 #FFFFFF, 0 -1px 0 #FFFFFF, -1px 0 0 #FFFFFF, 1px 0 0 #FFFFFF;
}

#sec-mv .p-mv-img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}


/* sec-bar */

#sec-bar {
    background-color: var(--color-primary-500);
    position: relative;
    margin-top: var(--size--03);
}

#sec-bar a {
    padding: var(--size-02) 0 var(--size-03);
    display: block;
}

#sec-bar a .p-bar-cnt {
    transition: 0.3s;
}

#sec-bar .p-bar {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    gap: var(--size-04);
}

#sec-bar .p-bar .p-sec-bubble {
    font-size: var(--font-size-m);
    padding: var(--size-005) var(--size-04);
    top: var(--size--05);
    white-space: nowrap;
}

/* #sec-bar .p-bar::after {
    content: "";
    background-color: var(--color-primary-500);
    width: 100vw;
    height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    position: absolute;
} */


#sec-bar .p-bar-circle {
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
    text-align: center;
    background-color: #fff7df;
    border-radius: 50%;
    padding: var(--size-02);
    border: solid 10px var(--color-primary-500);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    line-height: 1.5;
    position: absolute;
    right: 0;
    top: var(--size--08);
}

#sec-bar .p-bar-circle.p-bubble::before {
    border: var(--size-03) solid transparent;
    border-top: var(--size-03) solid var(--color-white);
    transform: rotate(-45deg);
}


#sec-bar .p-bar-cnt {
    color: var(--color-white);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    display: flex;
    flex-direction: column;
    align-items: center;
}

#sec-bar .p-bar-cnt .p-bar-term {
    color: var(--color-primary-500);
    padding: var(--size-005) var(--size-03);
    border-radius: 500px;
    font-size: var(--font-size-m);
    margin-top: var(--size-01);
    margin-bottom: var(--size-01);
    background-color: var(--color-white);
}

#sec-bar .p-bar-cnt .p-h-u::after {
    height: 8px;
}

#sec-bar .c-link {
    font-size: var(--font-size-m);
    /* border-top: solid 2px var(--color-white);
    border-bottom: solid 2px var(--color-white); */
    padding: var(--size-01) 0;
}


#sec-bar .c-link .u-mark-anchor {
    color: var(--color-white);
}

#sec-bar .c-link .u-mark-anchor::before {
    background-color: white;
}

#sec-bar .c-link .u-mark-anchor::before {
    transform: none;
}

#sec-bar a:hover .c-link .u-mark-anchor::before {
    transform: translateY(var(--size-005));
}

#sec-bar .p-bar-dtl {
    display: flex;
    align-items: center;
    gap: var(--size-04);
}




/* sec-intro */
#sec-intro {
    background-color: var(--color-primary-50);
}

#sec-intro .p-intro {
    margin-top: var(--size-08);
}


/* sec-answer */
#sec-answer {
    position: relative;
    background-color: var(--color-primary-500);
    color: var(--color-white);
}

#sec-answer::before {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    top: var(--size--01);
    border: var(--size-06) solid transparent;
    border-radius: var(--size-01);
    border-top: var(--size-06) solid var(--color-primary-50);

}

#sec-answer .p-h-emp::before,
#sec-answer .p-h-emp::after {
    background-color: var(--color-white);
}

#sec-answer .p-h-sec,
#sec-answer .p-h-sec .p-h-sec-xl {
    color: var(--color-white);
}

#sec-answer .p-answer-img {
    display: flex;
    justify-content: center;
    margin-top: var(--size-06);
}


#sec-answer .c-text {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xl);
    text-align: center;
}

/* sec-course */
#sec-course {
    background-color: var(--color-primary-50);
}

#sec-course .p-h-course-cmp {
    font-size: var(--font-size-m);
    color: var(--color-white);
    margin-bottom: var(--size-01);
    display: inline-block;
    background-color: var(--color-primary-500);
    border-radius: 500px;
    padding: var(--size-005) var(--size-03);
}

#sec-course .p-course {
    background-color: var(--color-white);
    border: solid 10px var(--color-primary-100);
    border-radius: var(--size-02);
    padding: clamp(var(--size-03), 5vw, var(--size-06));
    padding-top: var(--size-06);
    margin-top: var(--size-06);
    position: relative;
}

#sec-course .p-course:first-of-type {
    margin-bottom: clamp(var(--size-05), 5vw, var(--size-20));
}

#sec-course .p-rcm {
    background-color: var(--color-primary-500);
    border-radius: 50%;
    color: var(--color-white);
    aspect-ratio: 1; 
    position: absolute;
    right: var(--size-06);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-l);
    display: flex;
    flex-direction: column;
    align-items: center;    
    justify-content: center;
    padding: 0 var(--size-03);
    top: var(--size--06);
    text-align: center;
}

#sec-course .p-rcm .p-rcm-item {
    font-size: var(--font-size-h4);
}


#sec-course .p-info .p-price {
    display: flex;
    align-items: end;
    justify-content: end;
    font-weight: var(--font-weight-medium);
    margin-top: var(--size-03);
    line-height: 1.2;
}

#sec-course .p-info .p-price .p-price-regular {
    margin-right: var(--size-03);
}


#sec-course .p-info .p-price .p-price-cmp {
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
    display: flex;
    flex-direction: column;
}

#sec-course .p-info .p-price .p-price-cmp .p-price-discount {
    text-align: center;
    width: fit-content;
    background-color: var(--color-accent);
    color: var(--color-primary-500);
    font-weight: var(--font-weight-bold);
    padding: var(--size-01) var(--size-03);
    margin-bottom: var(--size-02);
    border-radius: 500px;
    white-space: nowrap;
}

#sec-course .p-info .p-price .p-price-cmp .p-price-discount.p-bubble::before {
    border: var(--size-01) solid transparent;
    border-top: var(--size-01) solid var(--color-accent);
}

#sec-course .p-info .p-asterisk {
    text-align: right;
    margin-top: var(--size-01);
}

#sec-course .p-course .p-dtl {
    margin-top: var(--size-04);
    background-color: var(--color-primary-50);
    padding: var(--size-04);
    border-radius: var(--size-01);
}

#sec-course .p-feat {
    margin-top: var(--size-08);
}

#sec-course .p-feat .p-feat-box {
    border: solid 10px var(--color-primary-100);
}

#sec-course .p-feat .p-feat-box .c-card-cnt {
    padding-top: var(--size-04);
}

#sec-course .p-feat .p-feat-box .c-card-ttl {
    border-bottom: none;
    padding-bottom: 0;
}

#sec-course .p-feat .p-feat-box .c-card-num {
    border-radius: 500px;
    width: auto;
    height: auto;
    top: var(--size--04);
    font-size: var(--font-size-l);
    padding: var(--size-02) var(--size-04);
}

#sec-course .p-feat .p-feat-box .c-card-num.p-bubble::before {
    border: var(--size-01) solid transparent;
        border-top: var(--size-01) solid var(--color-primary-500);
}

#sec-course .p-cmp {
    margin-top: var(--size-06);
    padding: var(--size-01) 0 var(--size-03);
    border-top: 5px solid var(--color-primary-500);
    border-bottom: 5px solid var(--color-primary-500);
    display: flex;
    align-items: center;
    flex-direction: column;
}

#sec-course .p-cmp .c-link {
    margin-top: var(--size-01);
}



/* sec-cmp */
#sec-cmp {
    background-color: var(--color-primary-100);
    border-top: 10px solid var(--color-primary-500);
    position: relative;
    padding-top: clamp(var(--size-05), 5vw, var(--size-06));
}




#sec-cmp .p-h-sec {
    color: var(--color-primary-500);
}

#sec-cmp .p-period {
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
    display: flex;
    justify-content: center;
    margin-top: var(--size-02);
}

#sec-cmp .p-period .p-period-item {
    background-color: var(--color-primary-500);
    border-radius: 500px;
    padding: var(--size-01) var(--size-10);
}

#sec-cmp .p-cmp {
    padding: clamp(var(--size-03), 5vw, var(--size-06));
    background-color: var(--color-white);
    border: solid 10px var(--color-primary-200);
    border-radius: var(--size-02);
    margin-top: var(--size-06);
}

#sec-cmp .p-cmp .p-cmp-box {
    display: flex;
    gap: var(--size-04);
    align-items: baseline;
}

#sec-cmp .p-cmp .p-cmp-box:not(:last-of-type) {
    border-bottom: solid 1px var(--color-gray-100);
    padding-bottom: var(--size-04);
}

#sec-cmp .p-cmp .p-cmp-box:not(:first-of-type) {
    padding-top: var(--size-04);
}


#sec-cmp .p-cmp .p-cmp-ttl {
    border-radius: 500px;
    background-color: var(--color-primary-100);
    padding: 0 var(--size-02);
    font-size: var(--font-size-m);
    min-width: 12rem;
    text-align: center;
}

#sec-cmp .p-course-cta .p-cta-box .p-bubble {
    background-color: var(--color-white);
}

#sec-cmp .p-course-cta .p-cta-box .p-bubble::before {
    border-top: var(--size-02) solid var(--color-white);
}



/* sec-mail */
#sec-mail .p-mail {
    background-color: var(--color-white);
    border: 10px solid var(--color-primary-100);
    border-radius: var(--size-02);
    padding:  clamp(var(--size-03), 5vw, var(--size-06));
    padding-top: var(--size-06);
}

#sec-mail .p-mail .p-sec-bubble {
    background-color: var(--color-primary-500);
    color: var(--color-white);
    white-space: nowrap;
    font-size: var(--font-size-xl);
    top: var(--size--03);
}


#sec-mail .p-mail .p-sec-bubble::before {
    border-top: var(--size-02) solid var(--color-primary-500);
}

#sec-mail .p-mail .p-sec-bubble span {
    background-color: var(--color-white);
    color: var(--color-primary-500);
    border-radius: 500px;    
    padding: 0 var(--size-02);
    margin-right: var(--size-02);
}

/* sec-contact */
#sec-contact .p-course-cta {
    margin-top: var(--size-04);
}



/* sec-service */
#sec-service {
    padding-bottom: 0;
    /* background: linear-gradient(to bottom, #fff7d6, var(--color-white)); */
    background-color: #fff7df;
}

#sec-service .p-service  {
    margin-top: var(--size-10);
}

#sec-service .p-service .p-service-box .p-h-sub {
    display: inline-block;
    font-size: var(--font-size-s);
    background-color: var(--color-accent);
    border-radius: 500px;
    padding: var(--size-005) var(--size-02);
    margin-bottom: var(--size-01);
}

#sec-service .p-service.c-card.u-card-frame.u-card-text .c-card-cnt {
    padding-top: var(--size-02);
}

#sec-service .p-service .p-worries {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: var(--size--005);
    z-index: 1;
    position: relative;
}

#sec-service .p-service .p-worries .p-bubble {
    border-radius: 500px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white);
    background-color: var(--color-primary-500);
    padding: var(--size-005) var(--size-03);
    margin-bottom: var(--size-02);
    display: inline-block;
    white-space: nowrap;
}

#sec-service .p-service .p-worries .p-bubble::before {
    border: var(--size-01) solid transparent;
    border-top: var(--size-01) solid var(--color-primary-500);
}

#sec-service .p-service .p-worries img {
    height: 150px;
    width: auto;
}

#sec-service .p-service .p-service-arrow {
    display: flex;
    justify-content: center;
    margin: var(--size-04) 0;
}

.p-tab {
    border-bottom: 10px solid var(--color-primary-500);
    /* background-color: #fff7df; */
}

.p-tab .p-tab-box {
    display: flex;
    gap: var(--size-column);
    align-items: flex-end;
}

.p-tab .p-tab-item {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
    text-align: center;
    flex: 1;
    padding: var(--size-02) var(--size-04);
    background-color: var(--color-primary-100);
    border: solid 5px var(--color-primary-500);
    border-bottom: none;
    border-top-left-radius: var(--size-03);
    border-top-right-radius: var(--size-03);
    margin-top: var(--size-04);
}

.p-tab .p-tab-item.p-tab-active {
    color: var(--color-white);
    background-color: var(--color-primary-500);
    font-size: var(--font-size-h3);
    padding: var(--size-04) var(--size-04);
    margin-top: 0;
}

/* sec-ls */
#sec-ls {
    padding-top: 0;
    /* background-color: #fff7df; */
}

#sec-ls .p-tab {
    background-color: #fff7df;
}

#sec-ls .c-sec {
    background-color: var(--color-white);
}

#sec-ls .p-ls  {
    align-items: center;
    margin-top: var(--size-06);
}


#sec-ls .p-ls .p-ls-adv {
    display: flex;
    flex-direction: column;
}

#sec-ls .p-ls .p-ls-adv-box {
    display: flex;
    align-items: flex-end;
    gap: var(--size-03);
    padding-bottom: var(--size-04);
    padding-top: var(--size-04);
    border-bottom: solid 1px var(--color-gray-100);
}

#sec-ls .p-ls .p-ls-adv-box:first-of-type {
    border-top: solid 1px var(--color-gray-100);
}

#sec-ls .p-ls .p-ls-adv-box .p-ls-adv-num {
    font-weight: var(--font-weight-bold);
    font-size: clamp(2.2rem, 5vw, 5.6rem);
    line-height: 1.2;
    color: var(--color-primary-500);
}
#sec-ls .p-ls-slide {
    width: 100%;
    overflow: hidden;
    margin-top: clamp(var(--size-05), 5vw, var(--size-15));
}

#sec-ls .p-ls-slide-box {
    display: flex;
    animation: scroll 20s linear infinite;
    display: flex;
    gap: var(--size-column);
}

#sec-ls .p-plaza {
    position: relative;
    border: solid 10px var(--color-primary-500);
    padding: var(--size-06);
    margin-top: clamp(var(--size-05), 5vw, var(--size-15));
    border-radius: var(--size-02);
}

#sec-ls .p-plaza .p-sec-bubble {
    background-color: var(--color-primary-500);
    color: var(--color-white);
}

#sec-ls .p-plaza .p-sec-bubble::before {
    border-top: var(--size-02) solid var(--color-primary-500);
}

.p-contact {
    background-color: var(--color-primary-700)!important;
    padding-top: clamp(var(--size-05), 5vw, var(--size-08));
    padding-bottom: clamp(var(--size-05), 5vw, var(--size-08));
}

.p-contact .p-h-sec,
.p-contact .p-h-sec .p-h-sec-xl {
    color: var(--color-white);
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-1200px);
    }
}


/* sec-custom */
#sec-custom {
    /* background-color: #fff7df; */
    padding: 0;
}

#sec-custom .c-sec {
    background-color: var(--color-white);
}

#sec-custom .p-custom {
    margin-top: var(--size-06);
}

#sec-custom .p-custom-box {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-100);
}

#sec-custom .p-custom-box .c-card-ttl {
    line-height: 1.5;
}

#sec-custom .p-custom-case {
    border: solid 10px var(--color-primary-500);
    border-radius: var(--size-02);
    position: relative;
    padding:  clamp(var(--size-03), 5vw, var(--size-06));
    padding-top: var(--size-10);
    margin-top: clamp(var(--size-05), 5vw, var(--size-15));
}

#sec-custom .p-custom-case .p-case-ttl {
    font-size: var(--font-size-h4);
    color: var(--color-white);
    background-color: var(--color-primary-500);
    top: -10px;
    left: -10px;
    position: absolute;
    padding: var(--size-02) var(--size-06);
    border-bottom-right-radius: var(--size-02);
    border-top-left-radius: var(--size-02);
}

#sec-custom .p-custom-case .p-case-company {
    font-size: var(--font-size-l);
    font-weight: var(--font-weight-bold);
    text-align: right;
    display: block;
    padding-bottom: var(--size-01);
    border-bottom: solid 1px var(--color-primary-500);
}

/* sec-kantan */
#sec-kantan {
    padding-bottom: 0;
    /* background-color: #fff7df; */
}

#sec-kantan .c-sec {
    background-color: var(--color-white);
}

#sec-kantan .p-kantan {
    margin-top: var(--size-06);
}

#sec-kantan .p-kantan .p-kantan-box {
    background-color: var(--color-primary-50);
    border-color: var(--color-primary-100);
}

#sec-kantan .p-kantan .p-kantan-box img {
    width: 450px;
    display: inline-block;
}

#sec-kantan .p-kantan .p-kantan-box .c-card-ttl {
    line-height: 1.5;
}



/* sec-flow */
#sec-flow {
    background-color: var(--color-primary-100);
}

#sec-flow .p-triangle {
    border: var(--size-08) solid transparent;
    border-top: var(--size-08) solid var(--color-primary-500);
    display: table;
    margin: 0 auto;
}


#sec-flow .p-flow {
    padding: var(--size-06) 0;
}



.footer-wrap .menu-01,
.footer-wrap .menu-02 {
    display: none;
}


.footer-wrap .menu-03 {
    background-color: #000;
    padding: 1.2rem 0;
    color: #fff;
    font-size: 1.2rem;
}

.footer-wrap .menu-03 ul {
    display: flex;
    justify-content: center;    
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    padding: 0.5rem 2rem;
}

.footer-wrap .menu-03 ul li {
    padding: 0 2.4rem;
    border-right: solid 1px #fff;
}


.footer-wrap .menu-03 ul li a {
    color: #fff;
    text-decoration: none;
}

.footer-wrap .menu-03 ul li a:hover {
    text-decoration: underline;
}

.footer-wrap .menu-03 .copyright {
    text-align: center;
    padding-top: 0.5rem;
}


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

}


@media only screen and (min-width:1025px) and (max-width:1280px) {    
    .p-tab .p-tab-item {
        white-space: nowrap;
    }
}


@media only screen and (max-width:1024px){
    #sec-service .p-service .p-worries .p-bubble {
        white-space: unset;
    }
    #sec-mv .c-list li {
        white-space: unset;
    }

    #sec-course .p-info .p-price {
        justify-content: center;
    }

    #sec-course .p-info .p-asterisk {
        text-align: center;
    }
    
    #sec-ls .p-ls-slide-box img {
        width: 200px;
    }

    
        .footer-wrap .menu-03 ul {
        justify-content: left;
    }

    .footer-wrap .menu-03 ul li {
        padding: 0 1.2rem;
        margin-bottom: 0.5rem;
    }

    .footer-wrap .menu-03 ul li:last-child {
        border-right: none;
    }

}

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

    #sec-course .p-info,
    #sec-course .p-feat {
        flex-direction: column;
    }

    #sec-course .p-info .p-info-box,
    #sec-course .p-feat .p-feat-box {
        flex: 0 0 100%;
        max-width: 100%;
    }

    
    #sec-course .p-info .p-info-box:first-of-type {
        align-items: center;
    }

    #sec-answer .p-answer-img img,
    #sec-course .p-info .p-info-box img {
        width: 400px;
    }

    #sec-course .p-info .p-price {
        margin-top: 0;
    }
    
    #sec-flow .p-flow.c-card.u-card-text .c-card-cnt,
    #sec-intro .c-card.u-card-text.u-card-num .p-intro-box .c-card-cnt  {
        padding: var(--size-02);
        padding-top: var(--size-06);
    }

    #sec-service .p-service.c-card.u-card-frame.u-card-text .c-card-cnt {
        padding: var(--size-02);
    }

    #sec-custom .c-card.u-card-text .p-custom-box .c-card-cnt {
        padding: var(--size-02);
    }


    .p-tab .p-tab-item {
        font-size: var(--font-size-xl);
        padding: var(--size-02);
    }

    .p-tab .p-tab-item.p-tab-active {
        font-size: var(--font-size-h5);
    }
    /* .c-card .c-card-ttl > :is(h1, h2, h3, h4, h5, h6) {
        font-size: var(--font-size-l);
    }

    .p-tab .p-tab-item {
        font-size: var(--font-size-xl);
        padding: var(--size-02);
    }

    .p-tab .p-tab-item.p-tab-active {
        font-size: var(--font-size-h5);
    }

    .p-h-sec {
        font-size: var(--font-size-xl);
    }

    .p-h-sec .p-h-sec-xl {
        font-size: var(--font-size-h3);
    }

    .p-h-sec .p-h-sec-l {
        font-size: var(--font-size-h4);
    } */

}

@media only screen and (max-width:768px){
    #sec-mv {
        padding-top: var(--size-18);
        padding-bottom: var(--size-18);
        background-image: url(../img/security/mv_bg_tb.png);
            background-position: bottom center;
    }

    #sec-mv .c-list li {
        font-size: var(--font-size-s);
    }


    .p-course-cta {
        flex-direction: column;
        align-items: center;
    }

    #sec-bar .p-bar-cnt {
        font-size: var(--font-size-h5);
    }

    #sec-course .p-rcm {
        padding: 0 var(--size-02);
        right: 0;
    }

    #sec-course .p-info{
        margin-top: var(--size-04);
        gap: 0;
    }


    #sec-cmp .p-cmp .p-cmp-box {
        flex-direction: column;
        gap: var(--size-01);
    }

    #sec-mail .p-mail .p-sec-bubble {
        text-align: center;
    }

    #sec-service .p-service .p-service-arrow {
        display: none;
    }

    #sec-ls .p-tab {
        padding-top: clamp(var(--size-05), 5vw, var(--size-15));
    }

    .p-tab .p-tab-item.p-tab-active,
    .p-tab .p-tab-item {
        font-size: var(--font-size-xl);
        padding: var(--size-02);
        line-height: 1.4;
    }

    
    .p-tab .p-tab-item.p-tab-active {
        padding: var(--size-04) var(--size-02);

    }

    .p-tab .p-tab-box {
        gap: var(--size-02);
    }

}


@media (max-width: 520px) {
    .c-header .c-header-logo img {
        width: 120px;
    }
    .p-h-emp {
        padding: 0;
    }

    .p-h-emp::before,
    .p-h-emp::after {
        content: none;
    }
    .p-btn-fixed {
        display: none;
    }
    
    #sec-bar .p-bar-cnt {
        font-size: var(--font-size-xl);
        text-align: center;
    }



    #sec-bar .p-bar-cnt .p-h-u::after {
        height: 6px;
    }

    #sec-answer::before {
        border: var(--size-04) solid transparent;
        border-top: var(--size-04) solid var(--color-primary-50);
    }

    #sec-course .p-info .p-price {
        flex-direction: column;
        align-items: center;
    }

    #sec-course .p-info .p-price-asterisk {
        text-align: left;
    }

    #sec-course .p-info .p-price .p-triangle {
        transform: rotate(90deg);
    }

    #sec-course .p-info .p-price .p-price-regular {
        margin-right: 0;
    }

    #sec-course .p-info .p-price .p-price-regular .p-price-item {
        margin-bottom: var(--size-02);
    }

    #sec-course .p-cmp {
        padding: var(--size-03) 0 var(--size-03);
    }

    #sec-course .p-cmp .c-link {
        margin-top: var(--size-02);
    }


    #sec-cmp .p-period .p-period-item {
            padding: var(--size-01) var(--size-03);
    }

    #sec-mail .p-mail {
        padding-top: var(--size-08);
    }

    #sec-ls .p-ls .p-ls-adv-box {
        flex-direction: column;
        align-items: baseline;
        gap: var(--size-01);
    }

    #sec-custom .p-custom-case .p-case-company {
        margin-top: var(--size-01);
    }

    /* .p-tab .p-tab-item {
        display: none;
    }

    .p-tab .p-tab-item.p-tab-active {
        display: block;
    } */
     
    .p-tab .p-tab-box.c-contents {
        width: auto;
    }
        
    .p-tab .p-tab-box {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto;
        gap: var(--size-01);
    }

    .p-tab .p-tab-item {
        flex: 0 0 auto;
        white-space: nowrap;
    }

}