@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

/*==========================================
    2025.11
    career-tips　renew-01

    page__career-tips-renew-01

    font-family: "Noto Sans JP", sans-serif;
    100 ~ 900

    common
    ─ 基本設定・リセット・変数（:root）・共通スタイル

    page__career-tips-renew-01
    ─ ページ全体レイアウトの外枠・基礎スタイル

    tips__mv
    ─ MVエリア

    tips__btn-cta
    ─ MV直下のCTA

    l-main__content
    ─ コンテンツ全体

    tips__content
    ─ コンテンツ本体の3カラム構造

    tips__content-toc
    ─ 目次

    tips__course-list
    ─ 関連コース一覧

    tips__Intro
    ─ 記事冒頭のイントロテキスト

    tips__content-body
    ─ 記事本文ブロック

    frame__course-list
    ─ コース紹介の最終ブロック

--------------------------------------------*/



/*============================================================
   common
============================================================*/


*,
::before,
::after {
    box-sizing: border-box;
}
:root {
    /* ---------- breakpoint ---------- */
    --bp-sp: 599px;
    --bp-pc: 600px;

    /* ---------- colors ---------- */
    --color-green: #19AE4D;
    --color-green-light:#84BF3E;
    --color-green-lighter:#BFE876;
    --color-yellow-light:#EAFDA0;
    --color-orange: #E27415;

    /* ---------- font size ---------- */
    --font-size-base:16px;
    --font-size-table:15px;

    /* ---------- font weight ---------- */
    --font-weight-R:400;
    --font-weight-M:500;
    --font-weight-B:700;

}
    @media (min-width: 600px) {
        :root {
            /* ---------- font size ---------- */
            --font-size-base:17px;
            --font-size-table:16px;
        }
    }

#l-wrapper {
    overflow: visible !important;
}

/*============================================================
   page__career-tips-renew-01
============================================================*/
.page__career-tips-renew-01{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 64px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight:400;
}
.page__career-tips-renew-01 h2,
.page__career-tips-renew-01 h3,
.page__career-tips-renew-01 h4,
.page__career-tips-renew-01 h5{
    position: relative;
    font-weight:var(--font-weight-B);
    color: #494949;
}
/*============================================================
   tips__mv
============================================================*/
.tips__mv{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 70px;
    padding: 20px 20px 0;
    gap: 20px;
}
    @media screen and (min-width:600px){
        .tips__mv {
            padding-top: 30px;
            gap: 36px;
        }
        .tips__mv::before {
            top: auto;
            bottom: 0;
            height: 120px;
            background: linear-gradient(rgba(255, 255, 255, 0), #fff);
        }
    }

    /* tips__mv-bg　-----------------------------------------------*/
    .tips__mv-bg {
        position: absolute;
        inset: 0;
        top: -70px;
        z-index: -2;
        height:280px;
        overflow: hidden;
    }
        .tips__mv-bg::after{
            position: absolute;
            left: 50%;
            bottom: -20px;
            transform:translateX(-50%);
            width: 100%;
            height: 120px;
            background: linear-gradient(360deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0) 100%);
            content:'';
        }
        .tips__mv-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 25%;
            filter: blur(40px);
        }
        @media screen and (min-width:600px){
            .tips__mv-bg{
                top: -100px;
                height:380px;
            }
            .tips__mv-bg::after{
                bottom: 0px;
            }
        }

        /* tips__mv-frame　-----------------------------------------------*/
        .tips__mv-frame{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 960px;
            padding: 20px 0;
            gap: 20px;
            border-radius: 10px 10px 0 0;
            background: #FFF;
        }
        @media screen and (min-width:600px){
            .tips__mv-frame{
                display: flex;
                padding-top: 42px;
                gap: 36px;
            }
        }

        /* tips__mv-title　-----------------------------------------------*/
        .tips__mv-title{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 88.9%;
            min-height: 82px;
        }
        .tips__mv-title h1{
            position: relative;
            display: flex;
            align-items: center;
            width:100%;
            padding-left:21px; 
            font-size: 21px;
            font-weight:var(--font-weight-M);
            letter-spacing: -0.02em;
            line-height:1.6em;
        }
        .tips__mv-title h1:before{
            position: absolute;
            top: 50%;
            left: 0;
            width: 5px;
            height:100%;
            border-radius: 5px;
            background: linear-gradient(180deg, #5AE98C 0%, #C5F673 100%);
            transform:translateY(-50%);
            content:"";
        }
        @media screen and (min-width:600px){
            .tips__mv-title{
                max-width: 840px;
            }
            .tips__mv-title h1{
                padding-left:25px; 
                font-size: 30px;
                line-height:1.75em;
            }
        }

        /* p-breadcrumb__list　-----------------------------------------------*/
        .p-breadcrumb__list{
            width: 88.9%;
            padding: 0;
        }
        @media screen and (min-width:600px){
            .p-breadcrumb__list{
                max-width: 840px;
            }
        }

        /* tips__mv-date　-----------------------------------------------*/
        .tips__mv-date{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 88.9%;
            gap: 10px;
        }
        @media screen and (min-width:600px){
            .tips__mv-date{
                max-width: 840px;
            }
        }
            .tips__mv-date .txt__date{
                display: flex;
                align-items: center;
                gap: 10px;
            }
                .tips__mv-date .txt__date dt{
                    font-size: 13px;
                    font-weight:var(--font-weight-B);
                    line-height: 100%;
                }
                .tips__mv-date .txt__date dd{
                    font-size: 13px;
                    line-height: 100%;
                }
            .txt__readtime{
                font-size: 12px;
                line-height: 100%;           
            }

/*============================================================
   tips__btn-cta
============================================================*/
.tips__btn-cta{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 10px;
}
    .tips__btn-cta.is-bg{
        padding: 16px 16px 24px;
        background: #FFFCDD;
    }
    @media screen and (min-width:600px){
        .tips__btn-cta{
            max-width: 840px;
        }
    }
    .tips__btn-cta p{
        width: 80%;
        text-align: center;
    }
    .tips__btn-cta a+p{
        line-height: 1.6em;
        margin-top: 10px;
    }
    .tips__btn-cta a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 300px;
        height: 72px;
        font-size: 21px;
        font-weight:var(--font-weight-B);
        line-height: 100%; 
        letter-spacing:3%;
        text-decoration: none;
        color: #FFF;
        border-radius: 72px;
        background: linear-gradient(90deg, #FF861C 12.02%, #FFC21C 100%);
        box-shadow: 0 6px 0 0 #D3711C;
    }
    .tips__btn-cta a:hover{
        box-shadow: none;
    }
    .tips__btn-cta .txt-label{
        font-size: 16px;
        text-align: center;
        line-height:1.3em;
        letter-spacing:3%;
        color:var(--color-orange);
    }
    @media screen and (min-width:600px){
        .tips__btn-cta a{
            width: 420px;
            height: 94px;
            border-radius: 94px;
            font-size: 25px;
        }
    }

/*============================================================
    l-main__content
============================================================*/
.l-main__content{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
    margin: 0;
}

/*============================================================
    tips__content
============================================================*/
.tips__content{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 64px;
    margin: 0;
}
    @media screen and (min-width:1024px){
        .tips__content{
            display: grid;
            grid-template-columns: 240px minmax(0, 600px) 240px;
            align-items:flex-start;
            justify-content: space-between;
            max-width: 1144px;
            gap: 22px;
        }
    }

/*============================================================
   tips__toc
============================================================*/
.tips__content-toc-wrap{
    display: flex;
    flex-direction: column;
    width:80%;
    max-width: 640px;
}
.tips__content-toc-inner{
    display: flex;
    flex-direction: column;
    width:100%;
}
.tips__content-toc{
    display: flex;
    flex-direction: column;
    width:100%;
    gap: 10px;
}
    @media screen and (min-width:710px){
        .tips__content-toc-wrap{
            width:100%;
        }
    }
    @media screen and (min-width:1024px){
        .tips__content-toc-wrap{
            position:sticky;
            top:100px;
            width: 240px;
            height: max-content;
        }
        .tips__content-toc-inner{
            max-height: calc(100vh - 100px - 20px);
            padding-right: 10px;
            padding-left: 10px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .tips__content-toc{
            width: 100%;
            flex-shrink: 0;
        }
    }
    .tips__content-toc h2{
        color: var(--color-green);
        font-size: 14px;
        line-height: 100%;
    }
    .tips__content-toc .tips__toc-list{
        border-top: 3px solid  var(--color-green-lighter);
    }
    .tips__content-toc .tips__toc-list li{
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        padding: 8px 0;
        font-size: 15px;
        line-height:200%;
        letter-spacing:.03em;
        border-bottom: 1px solid var(--color-green-lighter);
    }
    .tips__content-toc .tips__toc-list li a{
        display: flex;
        align-items: flex-start;
        align-self: stretch;
        padding: 3px;
        font-size: 15px;
        line-height:200%;
        letter-spacing:.03em;
        text-decoration: none;
    }
    .tips__content-toc .tips__toc-list li a span{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 5px;
        padding-right:5px;
        gap:8px;
        font-size: 15px;
        text-align: center;
        color: var(--color-green);
    }
    .tips__content-toc .tips__toc-list li a span:after{
        width: 1.5px;
        height: 15px;
        background: var(--color-green-lighter);
        display: block;
        flex-shrink: 0;
        content: "";
    }

    @media screen and (min-width:1024px){
        .tips__content-toc h2{
            color:#333;
        }
        .tips__content-toc .tips__toc-list{
            border-top: 3px solid var(--color-green-lighter);
        }
        .tips__content-toc .tips__toc-list li{
            font-size: 14px;
            line-height:140%;
            letter-spacing:-.03em;
        }
        .tips__content-toc .tips__toc-list li a{
            width: 100%;
            display: flex;
            font-size: 14px;
            line-height:140%;
            letter-spacing:-.03em;
            transition: background-color .25s, color .25s;
        }
            .tips__content-toc .tips__toc-list li a span{
                color:#177A39;
            }
            .tips__content-toc .tips__toc-list li a span:after{
                background: #9ED143;
            }
        .tips__toc-list li a.is-active {
            background-color: var(--color-yellow-light);
            color: #177A39;
        }
            .tips__content-toc .tips__toc-list li a.is-active span{
                color:#333;
            }
            .tips__content-toc .tips__toc-list li a.is-active span:after{
                background: #BCBCBC;
            }
    }

/*============================================================
   tips__course-list
============================================================*/
.tips__course-list-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:90%;
}
.tips__course-list-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:100%;
}
.tips__course-list{
    display: flex;
    flex-direction: column;
    width:100%;
    max-width: 540px;
}
    @media screen and (min-width:1024px){
        .tips__course-list-wrap{
            position:sticky;
            top:100px;
            width: 240px;
            height: max-content;
        }
        .tips__course-list-inner{
            max-height: calc(100vh - 100px - 20px);
            padding-right: 10px;
            padding-left: 10px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .tips__course-list{
            width: 100%;
            flex-shrink: 0;
        }
    }

/* tips__course-list-tit */
.tips__course-list-tit{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    padding: 20px 0;
    border-top: 2px solid #BFE876;
    border-bottom: 2px solid #BFE876;
}
    .tips__course-list-tit:after{
        position: absolute;
        bottom: -16.5px;
        left: 50%;
        margin-left: -15px;
        width: 27px;
        height: 17px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='19' viewBox='0 0 30 19' fill='none'%3E%3Cpath d='M1.74902 15.5002L6.74902 0.000244141H28.5958L1.74902 15.5002Z' fill='white'/%3E%3Cpath d='M6.74902 1.00024L1.74902 16.5002L28.5958 1.00024' stroke='%23BFE876' stroke-opacity='0.894118' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        background-size: contain;
        background-repeat: no-repeat;
        content:"";
    }

    .tips__course-list-tit h2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        text-align: center;
        font-size: 18px;
        line-height: 100%;
    }
        .tips__course-list-tit h2 span{
            font-size: 14px;
        }
        @media screen and (min-width:1024px){
            .tips__course-list-tit{
                margin-bottom: 16px;
                padding: 12px 0 14px;
            }
        }


/* tips__course-list-tit */
.tips__course-list-box{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
    @media screen and (max-width:420px){
        .tips__course-list-box{
           /* grid-template-columns: repeat(1, 1fr);*/
            gap: 10px;
        }
    }
    @media screen and (max-width:599px){
        .tips__course-list-box{
            gap: 10px;
        }
    }
    @media screen and (min-width:1024px){
        .tips__course-list-box{
            grid-template-columns: repeat(1, 1fr);
            gap: 10px;
        }
    }
    .tips__course-list-box a{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8px;
        gap: 6px;
        border-radius: 5px;
        border: 1px solid #C3C3C3;
        text-decoration: none;
    }
    .tips__course-list-box a p{
        font-size: 13px;
        line-height: 150%;
    }
    @media screen and (max-width:420px){
        .tips__course-list-box a{
            padding: 6px;
            gap: 4px;
        }
    }



/*============================================================
   tips__Intro
============================================================*/
.tips__Intro{
    display: flex;
    flex-direction: column;
    width: 88.9%;
    gap:42px;
}
    @media screen and (min-width:600px){
        .tips__Intro{
            max-width: 840px;
        }
    }

    /* tips__Intro-body　-----------------------------------------------*/
    .tips__Intro-body{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 24px;
    }
    .tips__Intro-body p{
        width: 100%;
        text-align: justify;
        font-size:var(--font-size-base);
        line-height: 200%;
        letter-spacing: .03em;
    }

    @media screen and (min-width:600px){
        .tips__Intro-body p{
            letter-spacing: .05em;
        }
    }


/*============================================================
   tips__content-body
============================================================*/
.tips__content-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:80%;
    max-width: 640px;
    gap: 64px;
}
    @media screen and (min-width:710px){
        .tips__content-body{
            width:100%;
        }
    }
    @media screen and (min-width:1024px){
        .tips__content-body{
            max-width: 600px;
            gap: 100px;
        }
    }

/* layout　-----------------------------------------------*/
.tips__content-body .tips__section{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 42px;
}
.tips__content-body .box__ph{
    padding-top: 1em;
}


/* txt　-----------------------------------------------*/
.tips__content-body h2,
.tips__content-body h3,
.tips__content-body h4,
.tips__content-body h5{
    display: flex;
    justify-content: flex-start;
    width:100%;
    color: #494949;
}
    .tips__content-body h2:after,
    .tips__content-body h3:after,
    .tips__content-body h4:after{
        position: absolute;
        left: 50%;
        bottom: 0;
        transform:translateX(-50%);
        width: 100%;
        content:"";
    }

.tips__content-body h2{
    gap:10px;
    padding-bottom: 15px;
    font-size: 21px;
    line-height: 145%;
    letter-spacing: .05em;
}
    .tips__content-body h2 span{
        position: relative;
        display: flex;
        justify-content: center;
        padding-left:3px;
        gap:12px;
        font-size: 23px;
        text-align: center;
        color:  var(--color-green);
        flex-shrink: 0;
    }
    .tips__content-body h2 span:after{
        margin-top: 5px;
        width: 2px;
        height: 30px;
        background: #BFE876;
        display: block;
        flex-shrink: 0;
        content: "";
    }
    .tips__content-body h2:after{
        height: 5px;
        border-radius: 5px;
        background: linear-gradient(90deg, #19AE4D 0%, #C3F674 19%, #F2FE97 100%);
    }
.tips__content-body h3{
    gap:10px;
    padding-bottom: 15px;
    font-size: 19px;
    line-height: 145%;
    letter-spacing: .05em;
    flex-shrink: 0;
}
    .tips__content-body h3:after{
        height: 3px;
        border-radius: 3px;
        background:#BFE876;
    }
    .tips__content-body h3 span{
        position: relative;
        display: flex;
        justify-content: center;
        padding-left:3px;
        gap:12px;
        font-size: 19px;
        text-align: center;
        color:  var(--color-green);
        flex-shrink: 0;
    }
    .tips__content-body h3 span:after{
        margin-top: 5px;
        width: 2px;
        height:26px;
        background: #BFE876;
        display: block;
        flex-shrink: 0;
        content: "";
    }
.tips__content-body h4{
    padding-bottom: 16px;
    font-size: 17px;
    line-height: 145%;
    letter-spacing: .05em;
}
    .tips__content-body h4 span{
        position: relative;
        display: flex;
        justify-content: center;
        padding-left:3px;
        padding-right: 10px;
        gap:12px;
        font-size: 17px;
        text-align: center;
        color:  var(--color-green);
        flex-shrink: 0;
    }

    .tips__content-body h4:after{
        height: 1px;
        border-radius: 1px;
        background:#BFE876;
    }
    .tips__content-body .tit__nomal{
        padding-bottom: 0;
    }
    .tips__content-body .tit__nomal:after{
        display: none;
    }
    .tips__content-body .tit__circle{
        flex-direction:row;
        gap:10px;
        padding-bottom: 0;
    }
    .tips__content-body .tit__circle:before{
            margin-top: 6px;
            width: 18px;
            height:18px;
            border-radius:100%;
            background:var(--color-green-light);
            content:"";
            flex-shrink: 0;
    }
    .tips__content-body h4.tit__circle:after{
        display: none;
    }

.tips__content-body h5{
    width:100%;
    font-size: 16px;
    line-height: 145%;
    letter-spacing: .05em;
    color: #494949;
}

.tips__content-body p{
    width:100%;
    text-align: justify;
    font-size:var(--font-size-base);
    line-height: 200%;
    letter-spacing: .03em;
}
.tips__content-body li{
    width:100%;
    text-align: justify;
    font-size:var(--font-size-base);
    line-height: 160%;
    letter-spacing: .03em;
}

@media screen and (min-width:600px){
    .tips__content-body h2{
        font-size: 24px;
        line-height: 150%;
        letter-spacing: .05em;
    }
    .tips__content-body h2 span{
        font-size: 26px;
    }
    .tips__content-body h3{
        font-size: 21px;
        line-height: 150%;
        letter-spacing: .05em;
    }
    .tips__content-body h3 span{
        font-size: 21px;
    }
    .tips__content-body h4{
        font-size: 19px;
        line-height: 150%;
        letter-spacing: .05em;
    }
        .tips__content-body h4 span{
            font-size: 19px;
        }
        .tips__content-body h4.tit__circle:before{
            margin-top: 8px;
        }
    .tips__content-body h5{
        font-size: 18px;
        line-height: 150%;
        letter-spacing: .05em;
    }
    .tips__content-body p{
        letter-spacing: .05em;
    }
    .tips__content-body li{
        letter-spacing: .05em;
    }
}

.tips__content-body h2+p,
.tips__content-body h2+ul,
.tips__content-body h2+ol,
.tips__content-body h2+div,
.tips__content-body h2+table,
.tips__content-body h3+p,
.tips__content-body h3+ul,
.tips__content-body h3+ol,
.tips__content-body h3+div,
.tips__content-body h3+table,
.tips__content-body h4+p,
.tips__content-body h4+ul,
.tips__content-body h4+ol,
.tips__content-body h4+div,
.tips__content-body h4+table,
.tips__content-body h5+p,
.tips__content-body h5+ul,
.tips__content-body h5+ol,
.tips__content-body h5+div,
.tips__content-body h5+table{
    margin-top: -26px;
}

.tips__content-body a{
    text-decoration: none;
}

.tips__content-body p a{ color:#00F;}
.tips__content-body p .txt__note{
    margin-top: .5em;
}
.tips__content-body .txt__note{
    display: block; 
    color: #7D7B7B;
    font-size: 12px;
    line-height: 1.6em;
}
.tips__content-body .txt__note a{
    color: #7D7B7B;
    font-size: 12px;
    line-height: 1.6em;
    text-decoration: underline;
}
.tips__content-body .txt__caption{
    color: #7D7B7B;
    font-size: 13.5px;
    line-height: 1.5em;
}
.tips__content-body .txt__bold{ font-weight:var(--font-weight-B);}
.tips__content-body .txt__green{ color: var(--color-green-light);; }

.tips__content-body .box_boder{
    background:#D4D4D4;
    width: 100%;
    height: 1px;
    display: block;
}

.tips__content-body a.txt__link{
    position: relative;
    color: var(--color-green-light);;
    text-decoration: underline;
}
.tips__content-body a.txt__link:after{
    width: 7px;
    height: 7px;
    border-top: 1px solid var(--color-green-light);;
    border-right: 1px solid var(--color-green-light);;
    transform: rotate(45deg);
    display: inline-block;
    margin-left: .5em;
    content: "";
}
.tips__content-body .txt__bg{
    background: #EAFDA0;
    font-weight:var(--font-weight-B);
}


/* img　-----------------------------------------------*/
.page__career-tips-renew-01 .box__ph{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:1em;
}
    .page__career-tips-renew-01 .box__ph img{
        width: 100%;
        max-width: 600px;
        height: auto;
    }
    .page__career-tips-renew-01 .box__ph p{
        margin-top: -1em;
    }

/* list　-----------------------------------------------*/
.tips__content-body ol,
.tips__content-body ul{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5px;
    list-style: none;
}

.tips__content-body ol li,
.tips__content-body ul li{
    position: relative;
}
.tips__content-body ol li a,
.tips__content-body ul li a{
    color:var(--color-green-light);
    text-decoration: none;
 }

/*list__box --------------------------------------*/
.tips__content-body .list__box{
    display: flex;
    flex-direction: column;
    gap:1em;
}

/*list__dot*/
    .tips__content-body .list__dot li{
        display: flex;
    }
        .tips__content-body .list__dot li:before{
            width: 1em;
            content:"・";
        }
    /*list__dot*/
    .tips__content-body .list__icon li{
        display: flex;
        gap:5px;
    }
        .tips__content-body .list__icon li .icon{
            display: flex;
            align-items: center;
            justify-content:center;;
            margin-top:2px;
            width:22px;
            height:22px;
            padding-bottom: 1px;
            aspect-ratio: 1 / 1;
            border-radius: 50%;
            font-size: .8em;
            line-height:22px;
            text-align: center;
            background:var(--color-green-light);
            font-weight:var(--font-weight-B);
            color: #fff;
            flex-shrink: 0;
        }
        @media (min-width: 600px){
            .tips__content-body .list__icon li .icon{
                display: flex;
                align-items: center;
                justify-content:center;;
                margin-top:2px;
                width:22px;
                height:22px;
                padding-bottom: 2px;
                aspect-ratio: 1 / 1;
                border-radius: 50%;
                font-size: .8em;
                line-height:22px;
                text-align: center;
                background:var(--color-green-light);
                font-weight:var(--font-weight-B);
                color: #fff;
                flex-shrink: 0;
            }
        }

    .tips__content-body .list__check li{
        padding-left: 1em
    }
        .tips__content-body .list__check li:before{
            position: absolute;
            left: -4px;
            top: 6px;
            width: 16px;
            height: 16px;
            background-repeat: no-repeat;
            background-size: contain;
            background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 13'%3E%3Cpath fill='%238CC846' d='M2 4.5l5 4 7.7-7.4.8 1.4L7 12.5s-5.5-6.6-6-7z'/%3E%3C/svg%3E");
            content:"";
        }
        @media (min-width: 600px){
            .tips__content-body .list__check li:before{
                top: 7px;
            }
        }


/*blockquote　-----------------------------------------------*/
.tips__content blockquote{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 24px 30px 20px 36px;
    gap: 8px;
    background:#F3F5F0;
    border-left: 1px solid #8CC846;
}
.tips__content blockquote p{
    line-height: 1.75em;
}
.tips__content blockquote:before{
    position: absolute;
    top: 8px;
    left: 8px;
    width: 21px;
    height: 21px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.8 19.8'%3E%3Cpath fill='%23BABFB3' d='M7.8,1.1l1.5,1.8C6.1,5.1,4.8,7.3,4.8,9.7c0,0.8,0.3,1.1,1.2,1.3c2.5,0.6,3.5,1.8,3.5,3.8c0,2.2-1.7,4-4.1,4c-2.8,0-4.7-2.1-4.7-5.4C0.7,8.1,3.2,3.9,7.8,1.1z M17.5,1.1L19,2.9c-3.1,2.2-4.5,4.4-4.5,6.8c0,0.8,0.3,1.1,1.2,1.3c2.5,0.6,3.5,1.8,3.5,3.8c0,2.2-1.7,4-4.1,4c-2.8,0-4.7-2.1-4.7-5.4C10.4,8.1,12.9,3.9,17.5,1.1z'/%3E%3C/svg%3E") 0 0 no-repeat;
    background-size: 100% auto;
    content: "";
}
.tips__content blockquote:after{
    position: absolute;
    bottom: 10px;
    right: 7px;
    width: 21px;
    height: 21px;
    transform:rotateZ(180deg);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19.8 19.8'%3E%3Cpath fill='%23BABFB3' d='M7.8,1.1l1.5,1.8C6.1,5.1,4.8,7.3,4.8,9.7c0,0.8,0.3,1.1,1.2,1.3c2.5,0.6,3.5,1.8,3.5,3.8c0,2.2-1.7,4-4.1,4c-2.8,0-4.7-2.1-4.7-5.4C0.7,8.1,3.2,3.9,7.8,1.1z M17.5,1.1L19,2.9c-3.1,2.2-4.5,4.4-4.5,6.8c0,0.8,0.3,1.1,1.2,1.3c2.5,0.6,3.5,1.8,3.5,3.8c0,2.2-1.7,4-4.1,4c-2.8,0-4.7-2.1-4.7-5.4C10.4,8.1,12.9,3.9,17.5,1.1z'/%3E%3C/svg%3E") 0 0 no-repeat;
    background-size: 100% auto;
    content: "";
}
    .tips__content blockquote cite{
        font-size: 13px;
        text-align: right;
        color: #7D7B7B;
    }

    @media (min-width: 600px){
        .tips__content blockquote{
            padding: 24px 40px 20px 43px;
        }
        .tips__content blockquote:before{
            width: 24px;
            height: 24px;
            top: 6px;
            left: 10px;
        }
        .tips__content blockquote:after{
            width: 24px;
            height: 24px;
            bottom: 10px;
            right: 12px;
        }
    }


/*table　-----------------------------------------------*/

.tips__content .table__box{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap:1em;
}

.tips__content .table__wrap{
    overflow-x: scroll;
    width: 100%;
    padding-bottom: 10px;
}
.tips__content .table__wrap table{
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}
.tips__content table{
    border:1px solid #D4D4D4;
}
.tips__content th,
.tips__content td{
    padding: 9px 10px 10px;
    font-size: var(--font-size-table);
    line-height: 1.3em;
    border:1px solid #D4D4D4;
}
    @media (min-width: 600px){
    .tips__content th,
    .tips__content td{
        padding: 9px 10px 10px;
    }
}
.tips__content table.table__txt-center th,
.tips__content table.table__txt-center td{
    text-align: center;
}
    @media (min-width: 600px){
    .tips__content th,
    .tips__content td{
        padding: 9px 10px 10px;
    }
}

/*table-x*/
.tips__content table.table-x tr th{
    background: #F3F5F0;
    color:#8A8A8A;
}
.tips__content table.table-x tr:first-child th{
    background:var(--color-green-light);
    color: #fff;
}

/*table-y*/
.tips__content table.table-y tr:first-child th{
    background: #F3F5F0;
    color:#8A8A8A;
}
.tips__content table.table-y tr:first-child th:first-child,
.tips__content table.table-y tr th{
    background:var(--color-green-light);
    color: #fff;
}

/*box__line　-----------------------------------------------*/
.tips__content .box__line{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px 20px 18px 20px;
    gap: 1em;
    border: 1px solid #8CC846;
}
.tips__content .box__line .box__line-tit{
    position: absolute;
    color:#8CC846;
    font-size: 13px;
    line-height: 1em;
    font-weight: bold;
    display: flex;
    padding: 5px 20px;
    gap: 10px;
    border-radius: 23px;
    border: 1px solid #8CC846;
    background: #FFF;
    width: auto;
    top:-12px;
    left: 5px;
}
    .tips__content .box__line p{
        line-height: 1.78em;
        width: 100%;
    }
    @media (min-width: 600px){
        .tips__content .box__line{
            padding: 20px 40px 18px 40px;
        }
        .tips__content .box__line .box__line-tit{
            left: 20px;
        }
    }
.tips__content-body .box__line .box__ph{
    padding-top: 0;
}
.tips__content-body .box__line h3+p,
.tips__content-body .box__line h3+ul,
.tips__content-body .box__line h3+ol,
.tips__content-body .box__line h3+div,
.tips__content-body .box__line h3+table,
.tips__content-body .box__line h4+p,
.tips__content-body .box__line h4+ul,
.tips__content-body .box__line h4+ol,
.tips__content-body .box__line h4+div,
.tips__content-body .box__line h4+table,
.tips__content-body .box__line h5+p,
.tips__content-body .box__line h5+ul,
.tips__content-body .box__line h5+ol,
.tips__content-body .box__line h5+div,
.tips__content-body .box__line h5+table{
    margin-top: 0px;
}
.tips__content-body .box__line h3,
.tips__content-body .box__line h4,
.tips__content-body .box__line h5{
    margin: 0;
    padding: 0
}
.tips__content-body .box__line h3:after,
.tips__content-body .box__line h4:after,
.tips__content-body .box__line h5:after,
.tips__content-body .box__line h3:before,
.tips__content-body .box__line h4:before,
.tips__content-body .box__line h5:before{
    display: none;
}

/*box__background-gray　-----------------------------------------------*/
.tips__content .box__background-gray{
    display: flex;
    padding: 20px;
    flex-direction: column;
    gap: 1em;
    align-self: stretch;
    border-radius: 10px;
    background:#F3F5F0;
}
    .tips__content .box__background-gray p{
        line-height: 1.78em;
        width: 100%;
    }
    @media (min-width: 600px){
        .tips__content .box__background-gray{
            padding: 20px 40px;
        }
    }
.tips__content-body .box__background-gray .box__ph{
    padding-top: 0;
}
.tips__content-body .box__background-gray h3+p,
.tips__content-body .box__background-gray h3+ul,
.tips__content-body .box__background-gray h3+ol,
.tips__content-body .box__background-gray h3+div,
.tips__content-body .box__background-gray h3+table,
.tips__content-body .box__background-gray h4+p,
.tips__content-body .box__background-gray h4+ul,
.tips__content-body .box__background-gray h4+ol,
.tips__content-body .box__background-gray h4+div,
.tips__content-body .box__background-gray h4+table,
.tips__content-body .box__background-gray h5+p,
.tips__content-body .box__background-gray h5+ul,
.tips__content-body .box__background-gray h5+ol,
.tips__content-body .box__background-gray h5+div,
.tips__content-body .box__background-gray h5+table{
    margin-top: 0px;
}
.tips__content-body .box__background-gray h3,
.tips__content-body .box__background-gray h4,
.tips__content-body .box__background-gray h5{
    margin: 0;
    padding: 0;
}
.tips__content-body .box__background-gray h3:after,
.tips__content-body .box__background-gray h4:after,
.tips__content-body .box__background-gray h5:after,
.tips__content-body .box__background-gray h3:before,
.tips__content-body .box__background-gray h4:before,
.tips__content-body .box__background-gray h5:before{
    display: none;
}


/* movie__block　-----------------------------------------------*/
    .movie__block{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 16px;
    }
        /*movie__fukidashi*/
        .movie__fukidashi{
            position:relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 62px;
            padding-bottom: 5px;
            gap: 10px;
            border-radius: 62px;
            background: linear-gradient(90deg, #19AE4D 0%, #9FDC2D 77.89%, #BFE876 100%);
            color: #FFF;
            text-align: center;
            font-size:15px;
            font-weight:var(--font-weight-B);
            line-height: 100%;
        }

        .movie__fukidashi span{
            font-size: 20px;
        }
            .movie__fukidashi:before{
                position: absolute;
                left: 50%;
                bottom: -24px;
                content: "";
                width: 32px;
                height: 28px;
                margin-left: -20px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28' viewBox='0 0 32 28'%3E%3Cpath d='M0 28L9.45455 0H32L0 28Z' fill='%2371CC38'/%3E%3C/svg%3E");
            }
        @media screen and (min-width:600px){
            .movie__fukidashi{
                flex-direction: row;
                width: 100%;
                height: 42px;
                padding-bottom: 2px;
                gap: 0px;
                border-radius: 42px;
                color: #FFF;
            }
        }
        /* movie__frame */
        .movie__frame{
            display: flex;
            padding: 14px;
            flex-direction: column;
            align-items: center;
            gap: 32px;
            align-self: stretch;
            border: 4px solid;
            border-image: linear-gradient(90deg, #19AE4D 0%, #9FDC2D 77.89%, #BFE876 100%) 1;
        }
        @media screen and (min-width:600px){
            .movie__frame{
                padding: 24px;
            }
        }

        .movie__box{
            width: 100%;
            display:block;
        }
        .movie__unit{
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
        }
        .movie__unit iframe{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        /* movie__txt */
        .movie__txt{
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            gap: 10px;
        }
            .movie__txt h3{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: var(--color-green);
                text-align: center;
                font-size: 19px;
                line-height: 150%;
                letter-spacing:0.05em;
            }
            .movie__txt p{
                font-size: 14px;
                line-height: 175%; 
                letter-spacing:0.05em;
            }
            .movie__btn{
                display: flex;
                width: 100%;
                padding: 10px;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 32px;
            }
            .movie__btn a{
                display:flex;
                width: 100%;
                max-width:260px;
                height: 56px;
                justify-content: center;
                align-items: center;
                border-radius: 56px;
                border: 2px solid var(--color-green);
                background: #FFF;
                font-size: 16px;
                font-weight:var(--font-weight-B);
                line-height: 100%;
                color: var(--color-green);
                text-decoration: none;
            }
        @media screen and (min-width:600px){
            .movie__txt h3{
                font-size: 20px;
            }
            .movie__txt p{
                font-size: 15px;
            }
        }
.tips__content-body .movie__txt h3+p,
.tips__content-body .movie__txt h3+ul,
.tips__content-body .movie__txt h3+ol,
.tips__content-body .movie__txt h3+div,
.tips__content-body .movie__txt h4+p,
.tips__content-body .movie__txt h4+ul,
.tips__content-body .movie__txt h4+ol,
.tips__content-body .movie__txt h4+div,
.tips__content-body .movie__txt h5+p,
.tips__content-body .movie__txt h5+ul,
.tips__content-body .movie__txt h5+ol,
.tips__content-body .movie__txt h5+div{
    margin-top: 0px;
}
.tips__content-body .movie__txt h3,
.tips__content-body .movie__txt h4,
.tips__content-body .movie__txt h5{
    margin: 0;
    padding: 0
}
.tips__content-body .movie__txt h3:after,
.tips__content-body .movie__txt h4:after,
.tips__content-body .movie__txt h5:after,
.tips__content-body .movie__txt h3:before,
.tips__content-body .movie__txt h4:before,
.tips__content-body .movie__txt h5:before{
    display: none;
}


/*============================================================
   box__writing
============================================================*/
.tips__writing{
    display: flex;
    padding: 20px 0px;
    gap: 20px;
    border-top: 1px solid #D4D4D4;
    border-bottom: 1px solid #D4D4D4;
    flex-direction: column;
    align-items: center;
}
    .tips__writing .writing__ph{
        display: flex;
        padding: 8px;
        align-items: center;
        border: 1px solid #BFBFBF;
        flex-shrink: 0;
    }
    .tips__writing .writing__ph img{
        width: 100px;
    }
    .tips__writing .writing__txt{
        display: flex;
        gap: 10px;
        flex-direction: column;
        align-items: center;
    }
    .tips__writing h3{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 16px;
        text-align: center;
    }
    .tips__writing p{
        font-size: var(--font-size-table);
        line-height: 1.75em;
    }

    @media (min-width: 600px){
        .tips__writing{
            flex-direction:row;
            align-items:flex-start;
        }
        .tips__writing h3{
            text-align: left;
            align-items: flex-start;
        }
        .tips__writing .writing__txt{
            padding-top: 10px;
        }
    }
.tips__writing h3+p,
.tips__writing h3+div{
    margin-top: 0px;
}
.tips__writing h3{
    margin: 0;
    padding:0;
}
.tips__writing h3:after,
.tips__writing h3:before{
    display: none;
}


/*============================================================
   tips__article
============================================================*/
.tips__article{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 14px;
}
.tips__article h3{
    padding-bottom: 0;
    font-size: 14px;
    font-weight: bold;
}
.tips__article ol{
    list-style-position: outside;
    list-style-type: disc;
    padding-left: 1em;
    color: #84BF3E;
}
.tips__article h3+p,
.tips__article h3+ol{
    margin-top: 0px;
}
.tips__article h3{
    margin:0;
    padding:0;
}
.tips__article h3:after,
.tips__article h3:before{
    display: none;
}


/*============================================================
   banner__list
============================================================*/
.banner__list{
    display: flex;
    width: 100%;
    max-width: 600px;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    background: #F3F5F0;
}
    @media screen and (min-width:600px){
        .banner__list{
            padding: 20px 16px 32px 16px;
            flex-direction: column;
            gap: 20px;
            border-radius: 16px;
        }
    }
    .banner__list h3+p,
    .banner__list h3+ul,
    .banner__list h3+ol,
    .banner__list h3+div,
    .banner__list h4+p,
    .banner__list h4+ul,
    .banner__list h4+ol,
    .banner__list h4+div,
    .banner__list h5+p,
    .banner__list h5+ul,
    .banner__list h5+ol,
    .banner__list h5+div{
        margin-top: 0px;
    }
    .banner__list h3,
    .banner__list h3 span,
    .banner__list h4,
    .banner__list h5{
        margin: 0;
        padding: 0
    }
    .banner__list h3:after,
    .banner__list h3 span:after,
    .banner__list h4:after,
    .banner__list h5:after,
    .banner__list h3:before,
    .banner__list h3 span:before,
    .banner__list h4:before,
    .banner__list h5:before{
        display: none;
    }

    /* h3 */
    .banner__list h3{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 8px 0;
        gap: 5px;
        color: #FFF;
        text-align: center;
        font-size: 15px;
        line-height: 100%;
        background: linear-gradient(90deg, #19AE4D 0%, #9FDC2D 77.89%, #BFE876 100%);
    }
        .banner__list h3 span{
            position: relative;
            display:flex;
            gap: 0px;
            padding:0;
            font-size: 18px;
            color: #FFF;
        }
        @media screen and (min-width:600px){
            .banner__list h3{
                flex-direction: row;
                padding: 8px 0;
                gap: 0px;
            }
        }
        .banner__list p{
            font-size: .9em;
            line-height: 160%;
            text-align: center;
        }

    /* link */
    .banner__list a{
        position: relative;
        display: flex;
        padding: 8px;
        align-items: stretch;
        width: 100%;
        gap: 8px;
        border-radius: 5px;
        border: 1px solid #8CD064;
        background: #FFF;
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.15);
        text-decoration: none;
    }
    .banner__list a:hover{
        box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.05);
    }
    .banner__list a:after{
        content:"";
        position: absolute;
        right: -6px;
        bottom:-18px;
        width: 17px;
        height: 30px;
        transform: rotate(-24deg);
        background: url("../images/icon__arrow.svg") 0 0 / 100% no-repeat;
        z-index: 10;
    }
        @media screen and (min-width:600px){
            .banner__list a{
                padding: 16px;
                gap: 16px;
            }
            .banner__list a:after{
                right: -2px;
                bottom:-20px;
                width: 20px;
                height: 36px;
                transform: rotate(-24deg);
            }
        }

        .banner__list .banner__box-img{
            width: 26vw;
            max-width: 210px;
            flex-shrink: 0;
        }
        .banner__list .banner__box-img img{
            width: 100%;
            height: auto;
        }
        .banner__list .banner__box-txt{
            position: relative;
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0;
            gap: 5px;
            padding-bottom: 20px;
        }
        .banner__list .banner__box-txt h4{
            font-size: 13px;
            line-height: 130%;
            letter-spacing:0.03em;
            padding-bottom: 0;
        }
        .banner__list .banner__box-txt p{
            color: #787878;
            text-align: justify;
            font-size: 11px;
            line-height: 130%;
            letter-spacing: -0.05em;
        }

        @media screen and (min-width:600px){
            .banner__list .banner__box-txt h4{
                font-size: 17px;
                line-height: 150%;
            }
            .banner__list .banner__box-txt p{
                font-size: 14px;
                line-height: 150%;
            }
        }

        .banner__list .banner__box-txt .txt__link{
            position: absolute;
            display: flex;
            justify-content: flex-end;
            width: 100%;
            bottom: 0px;
            right: 0px;
            gap: 5px;
            text-align: right;
            font-size: 10px;
            font-weight:var(--font-weight-B);
            line-height: 100%;
            color: var(--color-green);
        }
        .banner__list .banner__box-txt .txt__link:after{
            content: "";
            display: flex;
            width: 13px;
            height: 13px;
            justify-content: center;
            align-items: center;
            border-radius: 20px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='13' height='13' viewBox='0 0 13 13'%3E%3Ccircle cx='6.5' cy='6.5' r='6.5' fill='%23FBFFAC'/%3E%3Cpath d='M5 3.5L8 6.5L5 9.5' stroke='%2322B14B' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
        }
        @media screen and (min-width:600px){
            .banner__list .banner__box-txt .txt__link{
                font-size: 11px;
            }
        }



/*============================================================
   frame__course-list
============================================================*/
.frame__course-list{
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    background: #F3F5F0;
    padding-top: 20px;
    padding-bottom: 40px;
}
.p-index-course__item{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.p-index-course__ttl{
    margin: .125em 0 10px;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
    max-width: 1124px;
    line-height: 1.5;
    font-size: 21px;
    font-weight:var(--font-weight-B);
    letter-spacing: 1px;
}
@media screen and (min-width:600px){
    .p-index-course__ttl{
        padding-left: 10px;
        padding-right: 10px;
        font-size: 24px;
    }
}