@charset "utf-8";

:root{
    --main-color:#ff6699;
    --sub-color:#FFCCDD;
    --accent-color01:#00cc00;
    --accent-color02:#3333ff;
    --base-color-01:#ffffff;
    --base-color-02:#FFE5EE;
    --font-color:#333;
    /*calendar_color*/
    --calendar-01:red; /* 検定日(入校日) */
    --calendar-02:blue; /* 申込期間 */
    --calendar-03:green; /* 振込期限 */
    --calendar-04:#00B7CE; /* 受付終了 */
    /* eddito_color */
    --job-training:#3366CC;
    --job-training_lighter:#84A3E0;
    --job-training_brighter:#EAEFF9;
    --corporate-training:#339966;
    --corporate-training_lighter:#67CA99;
    --corporate-training_brighter:#ECF8F2;
    --personal:#CC6699;
    --personal_lighter:#E5B2CC;
    --personal_brighter:#F8EBF2;

    /* font-size */
    --PC-base-font:1.6rem;
    --PC-small-font:1.4rem;
    --PC-middle-font:1.8rem;
    --SP-base-font:1.4rem;
    --PC-small-font:1.25rem;
    --SP-middle-font:1.6rem;
}

/* ==============

共通CSS

============== */
/* --------
mainvisual_sub
-------- */
.mv-content{
    height:auto;
    position: relative;
}

/*背景画像*/
.mv-content .image-area img{
    object-fit: cover;
    width:100%;
    height:200px; /* 高さの基準 */
}
.mv-content .image-area::after{/*フィルター*/
    content: "";
    background-color: var(--main-color);
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    opacity: 0.1;
}

/*コース説明の場合*/
.mv-content.cource-mv .image-area::before{
    content: "";
    width:60%;
    height:100%;
    position: absolute;
    top:0;
    left:0;
}
.mv-content.cource-mv .image-area img{
    transform: translate(150%,0);
    width: 40%;
    height:200px; /* 高さの基準 */
}

/*タイトル文字*/
.mv-content .text-area{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    text-align: center;
    text-shadow: 2px 2px 5px #000;
    color:#fff;
}
.mv-content .text-area h2{
    margin:0;
    font-size:4.2rem;
    letter-spacing: 5px;
}
/*コース説明の場合*/
.mv-content.cource-mv .text-area{
    top:50%;
    left:10%;
    transform: translate(-5%,-50%);
    text-align: left;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}

/* --------
breadcrumb
-------- */
#breadcrumb{
    background: #eee;
    padding: 10px 0;
    font-size: var(--PC-base-font);
    & ul{
        display: flex;
        margin:0 40px;
    }
    & li{
        position: relative;
        margin-right:2em;
        & a:hover{text-decoration: underline;}
        &::after{
            content: " > ";
            color:var(--font-color);
            margin-left:10px;
            position: absolute;
            top:0;
            right:-1.5em;
        }
        &:last-child:after{display: none;}
    }
}

/* --------
フォーム(.form-area)
-------- */
.form-area form{
    margin-top:20px;
    display: flex;
    flex-direction: column;
    gap:15px;
}

.form-area form>p,.form-item{
    max-width: 900px;
    width:100%;
    margin: auto;
    & button{cursor: pointer;}
}

.form-item-title{font-weight: bold;}

/*
フォーム設定
*/
textarea,input,select{
    font-family: 'notosansjp', sans-serif;
    box-sizing: border-box;
    font-size: var(--PC-base-font);
    margin:0;
    padding:5px;
    border:1px solid #333;
    border-radius: 5px;
}

textarea{
    resize:none;
    width:100%;
}

input,select{width:80%;}

input[type=checkbox],input[type=radio]{
    width:auto;
    margin:0 10px 0 0.25em;
}

/*科目選択*/
.form-subject select:not(:first-child){margin-top:0.5em;}
/* mosの選択色 */
.mos-Associate{background-color: #fff;}
.mos-Expert{background-color: #b2e0e9;}

.form-ex{ /*入力例,備考*/
    font-weight: normal;
    margin:5px 0 5px 1.45em;
    font-size:var(--PC-small-font);
    & a{
        font-weight: bold;
        text-decoration: underline;
        display: inline;
        &:hover{text-decoration: none;}
    }
}

/*
各フォーム設定
*/
.form-gender .form-item-content{margin-left:1em;}

/*住所*/
.form-adress textarea{height:4em;}

/*入力内容*/
.form-text textarea{height:10em;}

.form-exam{ /* 受験内容(table) */
    & table{
        border:1px solid #333;
        width:100%;
    }
    & tbody tr:first-child{border-top:1px solid #333;}
    & tbody tr:not(:first-child){border-top:1px dotted #333;}
    & :where(th,td):not(:first-child){border-left:1px solid #333;}
    & input[type=text],& input[type=text]:focus{
        width:100%;
        border:none;
        outline: 0;
    }    
}

/* 受験希望日 */
.form-examdate .form-item-content{
    display: flex;
    justify-content: space-between;
}
.examdate-item{
    width:48%;
    &:first-child{margin-right:4%;}
}

.form-contactable{ /* 連絡可能な時間/曜日 */
    & .form-item-content{
        margin-left:1em;
        &:last-child{margin-top:10px;}
    }
    & input[type=time]{width:100px;}
    & input[type=text]{width:40%;}    
}

.form-consent{ /* 同意 */
    padding-top:10px;
    & input[type=checkbox]{ margin:0 0.25em 0 0; }
    & ul span{color:red;}
    & a{
        display: inline;
        font-weight: bold;
        text-decoration: underline;
        color:var(--accent-color02);
        &:hover{text-decoration: none;}
    }
    & label{
        display: block;
        margin-left:1em;
        cursor: pointer;
        &:not(:first-child){margin-top:0.5em;}
    }    
}

input[type=submit]{ /* ボタン */
    border:solid 2px var(--main-color);
    color:#fff;
    font-weight: bold;
    font-size: var(--PC-middle-font);
    background-color: var(--main-color);
    transition: 0.3s;
    width:50%;
    padding:20px 45px;
    display: block;
    margin:20px auto 0;
    cursor: pointer;
    &:hover{
        color:var(--main-color);
        background-color: #fff;
    }
}

#reload{
    padding:2.5px 5px;
    & img{width:1.5em;}
}

p.form-required,.form-required{color:red;} /* 必須(*) */

/* ========================================================

各ページ別 設定

======================================================== */

/* ============================

コース設定(共通)

============================ */
/* --------
cource-feature
-------- */
#cource-feature{
    padding:80px 0;
    & .sec-title{
        letter-spacing: 1em;
        transform: translate(0.5em,0);
    }
}

.feature-list{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.feature-list-item{
    display: grid;
    grid-template-rows: 1fr 0.5fr;
    gap: 10px;
    box-shadow: 0 0 10px #ccc;
    padding:10px;
    border-radius: 10px;
    & .image-area{
        display: flex;
        justify-content: center;
        & img{
            width:60%;
            object-fit: contain;
        }
    }
    & .text-area{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin:0 40px 40px;
        & h3{
            margin:0 20px 20px;
            font-size: var(--PC-middle-font);
        }
        & p{
            margin:0 20px 0;
            text-align: left;
        }    
    }
}

/*
講習例
*/
.curriculum{
    margin-top:80px;
    & h3{
        text-align: center;
        font-size: 2.75rem;
        margin:0 0 20px;
    }
    & table{
        margin:0 auto;
        border:1px solid var(--font-color);
    }
    & tbody{display: flex;}
    & tr{
        display: grid;
        grid-template-rows: 1fr 0.5fr 3fr;
        width:100%;
        &:not(:first-child){border-left:1px solid rgba(0,0,0,0.2);}
    }
    & th,& td{padding:10px 0;}
    & .notes{
        display: flex;
        justify-content: center;
        margin-top:1em;
        & ul li{
            list-style-type: "※";
        }
        & ul>li:last-child{margin-top: 1em;}
        & ol li{list-style-type: upper-alpha;}    
    }
}

.curriculum-title,.curriculum-time{
    display: grid;
    place-content: center;
    font-size: var(--PC-base-font);
}
.curriculum-title{color:#fff;}

.curriculum-content{
    & ul{margin:10px 10px 10px 2em;}
    & li{
        list-style-type: disc;
        &:not(:first-child){margin-top:5px;}
    } 
}

/*
料金リスト
*/
#cource-tariff{padding:0 0 60px;}

.tariff-list-head{
    & h3{
        padding:5px 0 5px 0.5em;
        margin:0;
        font-size:2.25rem;
        & .svg_pen{
            line-height: 1;
            margin-right:5px;
        }
    }
    & p{margin:20px 1em;}    
}

.tariff-list-item{
    &:not(:first-child){margin-top:40px;}
    & table{
        width:100%;
        display: table;
        background-color: #fff;
        border:1px solid #333;
        &:not(:first-child){margin-top:40px;}
        & + p{margin:0.25em 0 0 1em;}
    }
    & caption{
        text-align: left;
        margin-bottom:0.5em;
        font-weight: bold;
        font-size: var(--PC-middle-font);
    }
    & tr:nth-child(n+3){border-top:1px solid rgba(0,0,0,0.2);}
    & th{
        background-color: #333;
        color:#fff;
        padding:5px 10px;
        &:not(:last-child){border-right:1px solid #fff;}
    }
    & td{
        padding:5px 10px;
        &:not(:last-child){border-right:1px solid rgba(0,0,0,0.2);}
        &[rowspan]:not(:first-child){border-left:1px solid rgba(0,0,0,0.2);}
    }
    &:last-child tr:nth-last-child(even){border-top:1px solid #333;}
}

/* --------
cource-card
-------- */
#cource-card{padding:0 0 80px;}

.card-list{
    display: grid;
    gap: 20px;
}
#Cource_CT .card-list{
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
#Cource_P .card-list{grid-template-columns: 1fr 1fr 1fr;}

.card-list-item{
    display: grid;
    grid-template-rows: 250px 5em 1fr 3em;
    box-shadow: 0 0 5px #ccc;
    border-radius: 10px;
}

.card-list-item .tag-area{
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
    display: grid;
    place-content: center;
    padding:0 15px;
}

.card-list-item .image-area img{
    width:100%;
    height:100%;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

.card-list-item .text-area{
    padding:15px;
    & h4{
        margin:0 0 10px;
        color:red;
        font-size: var(--PC-base-font);
    }
    & p{margin:0;}
    & span{background:linear-gradient(transparent 60%, #FFFC72 60%);}
}

.card-list-item :where(.text-area p,.notes){font-size:1.5rem;}

.card-list-item .notes{
    text-align: right;
    margin:15px;
}

/* --------
voice_list
-------- */
#voice_list{
    & .voice-title h3{margin:0;}
    & .voice:not(:first-child){margin-top:40px;} 
}

.voice-head{
    width:100%;
    & p{
        margin:40px 0 15px;
        text-align: center;
        font-weight: bold;
        font-size: var(--PC-middle-font);
    }
    & .material-symbols-outlined{
        font-size:4rem;
        margin:-5px 5px 0 0;
    }
    & img{
        width:4rem;
        margin:-5px 5px 0 0;
    }
}

/* --------
course_list
-------- */
#course_list{padding:80px 0;}

/* --------
contact(サブページ)
-------- */
#contact.sub-contact{
    padding:60px 0;
    background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='75' height='75' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(0, 0%, 94%, 1)'/><path d='M32.763-11.976c-1.05-.075-1.95.676-2.024 1.726L29.764.849c-.075 1.05.675 1.95 1.725 2.026 1.05.075 1.95-.675 2.025-1.725l.975-11.1c.075-1.05-.675-1.95-1.725-2.025zM54.299 1.32a1.912 1.912 0 0 0-.386.015c-.975.15-1.725 1.05-1.575 2.1l1.5 11.025c.15.975 1.05 1.725 2.1 1.575a1.732 1.732 0 0 0 1.575-2.1l-1.5-11.025c-.131-.853-.836-1.533-1.714-1.59zm-46.93 1.22a1.809 1.809 0 0 0-1.662 1.663c-.075 1.05.675 1.952 1.65 2.027l11.1 1.05c.975.15 1.95-.601 2.025-1.651.15-.975-.6-1.95-1.65-2.025l-11.1-1.05a1.643 1.643 0 0 0-.363-.015zM1.76 13.017a1.825 1.825 0 0 0-1.285.6l-7.65 8.101c-.75.75-.675 1.95.075 2.625s1.95.674 2.625-.076l7.651-8.099c.75-.75.674-1.95-.076-2.625a1.785 1.785 0 0 0-1.34-.526zm75 0a1.825 1.825 0 0 0-1.285.6l-7.65 8.101c-.75.75-.675 1.95.075 2.625s1.95.674 2.625-.076l7.651-8.099c.75-.75.674-1.95-.076-2.625a1.785 1.785 0 0 0-1.34-.526zm-39.731 2.906a1.785 1.785 0 0 0-1.34.527l-7.95 7.723c-.75.675-.826 1.875-.076 2.625.675.75 1.875.752 2.625.077l7.95-7.725c.75-.675.826-1.875.076-2.625a1.825 1.825 0 0 0-1.285-.602zm24.639 18.928c-.24.02-.48.085-.705.197a1.903 1.903 0 0 0-.825 2.55l5.1 9.902a1.902 1.902 0 0 0 2.55.824c.975-.45 1.276-1.574.826-2.55l-5.1-9.9c-.395-.73-1.125-1.083-1.846-1.023zm-50.37-4.862a1.756 1.756 0 0 0-1.035.336c-.825.6-1.05 1.725-.524 2.625l6.15 9.223c.6.9 1.8 1.127 2.625.526.9-.6 1.124-1.8.524-2.624l-6.15-9.226a1.912 1.912 0 0 0-1.59-.86zm32.705 9.766c-.12-.006-.243 0-.365.019l-10.95 2.175c-1.05.15-1.725 1.126-1.5 2.176.15 1.05 1.126 1.725 2.176 1.5l10.95-2.175c1.05-.15 1.725-1.125 1.5-2.175a1.99 1.99 0 0 0-1.811-1.52zm4.556 12.195a1.932 1.932 0 0 0-1.845.949c-.45.9-.15 2.025.75 2.55l9.75 5.4c.9.45 2.025.15 2.55-.75.525-.9.15-2.025-.75-2.55l-9.75-5.4a1.958 1.958 0 0 0-.705-.199zM71.913 58c-1.05-.075-1.875.748-1.95 1.798l-.45 11.1c-.075 1.05.75 1.876 1.8 1.95.975 0 1.875-.75 1.95-1.8l.45-11.1c.075-1.05-.75-1.873-1.8-1.948zm-55.44 1.08a1.865 1.865 0 0 0-1.035.42l-8.775 6.825c-.75.6-.9 1.8-.3 2.625.6.75 1.8.9 2.626.3l8.775-6.827c.75-.6.9-1.8.3-2.625a1.783 1.783 0 0 0-1.591-.72zm16.29 3.945c-1.05-.075-1.95.675-2.024 1.725l-.975 11.099c-.075 1.05.675 1.95 1.725 2.026 1.05.075 1.95-.675 2.025-1.725l.975-11.102c.075-1.05-.675-1.95-1.725-2.024z'  stroke-width='1' stroke='none' fill='hsla(0, 0%, 100%, 1)'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
    & .wrapper{
        background-color: #fff;
        padding:0 0 40px;
    }
    & .sec-content-head{padding-top:20px;}
    & .sec-content-body{
        display: flex;
        align-items: center;
        justify-content: center;
        margin:0 40px;
    }
    /*詳しく見るボタン*/
    & .more-btn{margin-top:20px;}
    & .more-btn a{
        background-color: var(--accent-color02);
        color: #fff;
        border:solid 3px var(--accent-color02);
        &:before,&:after{background-color: #6bb6ff;}
        &:hover {
            background: #fff;
            color: var(--accent-color02);
        }    
    }
}

/* ==============

職業訓練(cource_jt.html)

============== */
/* --------
jt-movie(動画)
-------- */
#jt-movie{
    background-color:var(--accent-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding:0 0 80px;
}

.movie-responsive{
    max-width: 600px;
    width: calc(100% - 40px);
    margin:0 20px;
    /* aspect-ratio: 16/9;
    box-shadow: 0 0 5px #ccc;
    & iframe{
        width: 100%;
        height: 100%;
    }
    & video{
        object-fit: contain;
        width: 100%;
        height: 100%;
    } */
    & a{
        display: block;
        & img{
            object-fit: contain;
            width: 100%;
        }
    }
    & p{text-align: center;}
}

/* .movie-text{
    & h2{margin:0 0 20px;}
    & p{margin:1em 1em 0;}
    & a{
        text-decoration: underline;
        display: inline;
        &:hover{text-decoration: none;}
    }    
} */

/* --------
subject_top(科目別トップ)
-------- */
#subject_top{
    padding:40px 0;
    background-color: var(--job-training);
    & .sec-title{color:#fff;}
}

.subject-list{
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap:20px;
    & .link-btn{width: calc(100% / 3) ;}
    & .link-btn a{
        border: 3px solid var(--job-training); color: var(--job-training);
        &::before {background-color: var(--job-training_lighter);}
        &:hover {color: #fff;}
        & .link-btn-down{border-color: var(--job-training);}
        &:hover .link-btn-down{border-color: #fff;}
    }
}

/* --------
科目(共通設定)
-------- */
#subject_accounting,#subject_webdesign{font-feature-settings: "palt";}

/*
(科目の)タイトル
*/
.subject-title{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin:0 0 40px;
    & h3{
        position: relative;
        padding: 2rem;
        text-align: center;
        border: 2px solid #333;
        background-color: #fff;
        font-size:3.6rem;
        width:80%;
        &:before,&:after{
            position: absolute;
            content: '';
        }
        &:before{
            top: -40px;
            left: calc(50% - 40px);
            width: 80px;
            height: 80px;
            border: 2px solid #333;
            border-radius: 50%;
            background-color: #fff;
        } 
        &:after{
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
    }
    & .tocom-leaf .svg_leaf{
        z-index: 1;
        position: absolute;
        top:-2.5rem;
        left:calc(50% - 2rem);;
        width: 4rem;
        vertical-align: bottom;
    }
}

.subject-title-maker{
    position: relative;
    z-index: 1;
}

/*
(科目の)特徴
*/
.subject-features h3{
    margin:0 0 20px;
    font-size:3.0rem;
    text-align: center;
}

:where(.subject-features-pillar,.subject-features-step,.subject-features-qualification){margin-top:60px;}
:where(.subject-features-point,.subject-features-step,.subject-features-qualification) ul{display: flex;}

/* ポイント */
.subject-features-point{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:40px auto 0;
    & .text-area{
        background-color: #f0f0f0;
        width:50%;
        padding:40px 0;
        margin-right:5%;
        border-radius: 10px;
        position: relative;
        &::after{
            content:"";
            position: absolute;
            right:-30px;
            bottom:30px;
            width: 30px;
            height: 30px;
            clip-path: polygon(0 0, 0% 100%, 100% 0);
            background-color: #f0f0f0;
        }
    }
    & ul{
        flex-direction: column;
        align-items: flex-start;
        gap:0.5em;
        margin:auto;
        width: fit-content;
        transform: translate(-1em,0);
    }
    & li{
        position: relative;
        margin-left:2em;
        font-size: var(--PC-middle-font);
        & span{font-weight: bold;}    
    }
    & .image-area{
        width:45%;
        & img{border-radius: 10px;}
    }    
}

/* 4つの柱 */
.subject-features-pillar{
    & h3{
        position: relative;
        width: fit-content;
        padding: 12px 16px;
        border-bottom: 2px solid #333333;
        margin:0 auto 40px;
        &::after{
            content: "";
            position: absolute;
            top: calc(100% + 5px);
            left: 50%;
            width: 30px;
            height: 2px;
            box-sizing: border-box;
            background-color: #333333;
            box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff;
            rotate: 50deg;
            translate: -25%;
        }
        & span{color:var(--job-training);}    
    }
    & ul{
        max-width: 800px;
        margin:auto;
        display: grid;
        grid-template-rows:1fr 1fr;
        grid-template-columns:1fr 1fr;
        gap:20px;
    }
    & li{
        border:5px solid #ddd;
        border-radius: 10px;
        padding:20px 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    & h4{
        margin:0 0 8px;
        text-align: center;
        font-size:2.125rem;
        color:var(--job-training);
    }
    & p{margin:auto 20px;}    
}

/* ステップ */
.subject-features-step h3{
    position: relative;
    width: fit-content;
    margin:0 auto 60px;
    &::after{
        content:"";
        width:calc(100% + 40px);
        height:1.5px;
        background-color: var(--font-color);
        position: absolute;
        left:-20px;
        bottom:-10px;
    }
    & span{
        border-right:2px solid var(--font-color);
        border-bottom:2px solid var(--font-color);
        width:20px;
        height:20px;
        display: inline-block;
        position: absolute;
        &:nth-child(1){
            bottom:-10px;
            right:-20px;
        }
        &:nth-child(2){
            bottom:10px;
            right:-40px;
        }
        &:nth-child(3){
            bottom:30px;
            right:-60px;
        }
    }
}

.subject-features-step .top-area{
    display: flex;
    justify-content: center;
    margin-bottom:10px;
    translate: 5%  0;
    & img{
        width:100px;
        object-fit: contain;
    }
    & p{ /*ふきだし*/
        position: relative;
        display: grid;
        place-items: center;
        width: 120px;
        height: 85px;
        border: 2px solid #333333;
        border-radius: 50%;
        translate: 20px  -25%;
        font-size: var(--PC-middle-font);
        &::before,&::after{
            content: "";
            position: absolute;
            box-sizing: border-box;
        }
        &::before{
            bottom: 0;
            left: 8%;
            width: 15px;
            height: 15px;
            transform: rotate(135deg);
            background-color: #ffffff; /* 背景色と同じ色を指定 */
        }
        &::after{
            top: 100%;
            left: 4%;
            width: 20px;
            height: 2px;
            transform: rotate(-50deg);
            background-color: #333333;
            box-shadow: 0 2px 0 #ffffff, 0 -2px 0 #ffffff; /* 背景色と同じ色を指定 */
        }    
    }
}

.subject-features-step .step-area{
    display: flex;
    justify-content: space-between;
}

/* ステップ(arrow) */
.subject-features-step .arrow{
    width:10%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & p{
        background-color: #eee;
        clip-path: polygon(50% 0, 100% 20%, 100% 100%, 0 100%, 0 20%);
        display: grid;
        line-height: 1.5;
        place-content: center;
        height:90%;
        margin:0 10px 0 0;
        font-weight: bold;    
        &:first-child{ margin-bottom:10px;}
        &:last-child{margin-top:10px;}
    }
}

.subject-features-step :where(.arrow-head,.arrow-main,.arrow-foot){
    width:calc(100% - 10px);
    height:20%;
    margin-right:10px;
}

.subject-features-step .arrow-head p:first-child{
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background-color: #ff0;
}

.subject-features-step .arrow-main span{
    width:90%;
    height:100%;
    background-color: #ddd;
    display: block;
    &:first-child{clip-path: polygon(100% 50%, 75% 50%, 75% 100%, 25% 100%, 25% 50%, 0 50%, 50% 0);}
    &:not(:first-child){clip-path: polygon(25% 0%, 75% 0%, 75% 100%, 25% 100%);}
}

/* ステップ(step) */
.subject-features-step .step{
    flex-direction: column;
    align-items: flex-end;
    width:90%;
    & .number{
        text-align: center;
        margin:0 0 10px;
        line-height: 1;
        & span{
            font-weight: bold;
            font-size: 4rem;
        }    
    }
    & .text{
        color:var(--font-color);
        margin-left:10px;
        font-size:2.0rem;
    }
    & li{
        width:100%;
        color:#fff;
        display: flex;
        align-items: center;
        border-radius: 10px;
        position: relative;
        padding:10px 10px 10px 0;
        &:not(:first-child){margin-top: 10px;}
        &:nth-child(1){
            background-color: #00eb33;
            width:80%;
        }
        &:nth-child(2){
            background-color: #0dca59;
            width:85%;
        }
        &:nth-child(3){
            background-color: #1aa980;
            width:90%;
        }
        &:nth-child(4){
            background-color: #2687a6;
            width:95%;
        }
        &:nth-child(5){
            background-color: var(--job-training);
            width:100%;
        }
    }    
}

.subject-features-step .step-head{width:10%;}
.subject-features-step .step-body{
    background-color: #fff;
    border-radius: 0 5px 5px 0;
    width:90%;
    height:100%;
    display: flex;
    align-items: center;
}

/* 資格 */
.subject-features-qualification h3{
    background-color: var(--main-color);
    color:#fff;
    width: fit-content;
    margin:0 auto 40px;
    padding:5px 40px 5px 20px;
    clip-path: polygon(100% 0%, 95% 50%, 100% 100%, 0 100%, 0 0);
    z-index: 1;
}

.qualification-list ul{
    justify-content: center;
    flex-wrap: wrap;
    gap:0.25em 1.5em;
}

/* 作品リンク */
.subject-features-gallery{
    margin:60px auto 0;
    & p{
        text-align: center;
        margin:0 0 20px;
    }
}
.gallery-btn{
    margin-top:40px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    & img{width: 4em;}
    & .btn{
        margin:0 0 1em 30px;
        & a,a::after{
            background-color: var(--job-training);
            transition: 0.3s;
        }
        & a{
            display: block;
            color:#fff;
            font-size:2.8rem;
            font-weight: bold;
            letter-spacing: 3px;
            padding:1em 20px;
            line-height: 1;
            position: relative;
            &::after{
                content:"";
                height:5em;
                width:2em;
                clip-path: polygon(0 0, 0% 100%, 100% 50%);
                position: absolute;
                right:-1.5em;
                top:-1em;
            }
            &:hover,&:hover::after{
                background-color:var(--job-training_lighter);
                translate: 3px 0;
            }
        }
        & br{display: none;}
    }
}

/* --------
subject_accounting(経理科)
-------- */
#subject_accounting{padding:60px 0 80px;}

/* --------
subject_webdesign(Web科)、subject_levelup(レベルアップ科)
-------- */
#subject_webdesign,#subject_levelup{padding:0 0 80px;}

/*卒業生の声*/
#Cource_JT{
    & #voice_list{ & .voice:not(:first-child){margin-top:0;} }
}

/*-----------------------------------------------------------------------
色
-----------------------------------------------------------------------*/
#Cource_JT{
    /* --------
    mainvisual_sub
    -------- */
    & .mv-content.cource-mv .image-area::before{background-color: var(--job-training);}

    /* --------
    voice_list
    -------- */
    /*卒業生の声*/
    & :where(.voice-title h3, .voice-title h3:after){background-color:var(--job-training);}
    & .voice-area{background-color: var(--job-training_brighter);}
    & :where(.voice-item, .voice-image img){border:3px solid var(--job-training_lighter);}
}

/* ==============

企業研修(cource_ct.html)

============== */
#Cource_CT{
    /* --------
    cource-card
    -------- */
    & .card-list-item:first-child .image-area img{object-position: left center;}

    /* --------
    voice_list
    -------- */
    & .voice{
        grid-template-rows: repeat(3, 1fr);
        grid-template-columns: 1fr;
    }
    & .voice-image{
        width:30%;
        height:100%;
    }
    & .voice-image img{
        width:50%;
        height:100%;
    }
    & .voice-text{width:70%;}
    & .voice-text-among{margin:10px 0 0;}
    & .among-item{display: flex;}
    & .among-item-label{
        color:var(--corporate-training);
        font-weight: bold;
    }
    & .voice-text-body{margin:10px 0 0;}
}

/*-----------------------------------------------------------------------
色
-----------------------------------------------------------------------*/
#Cource_CT{
    /* --------
    mainvisual_sub
    -------- */
    & .mv-content.cource-mv .image-area::before{background-color: var(--corporate-training);}

    /* --------
    voice_list
    -------- */
    /*卒業生の声*/
    & :where(.voice-title h3, .voice-title h3:after){background-color:var(--corporate-training);}
    & .voice-area{background-color: var(--corporate-training_brighter);}
    & :where(.voice-item, .voice-image img){border:3px solid var(--corporate-training_lighter);}
}

/* --------
cource-feature (講習例のtable)
-------- */
.curriculum-title{background-color: var(--corporate-training);}
.curriculum-time{background-color: var(--corporate-training_lighter);}
.curriculum{ & tr{background-color: #fff;} }

/* ==============

個別講習(cource_p.html)

============== */

/*-----------------------------------------------------------------------
色
-----------------------------------------------------------------------*/
#Cource_P{
    /* --------
    mainvisual_sub
    -------- */
    & .mv-content.cource-mv .image-area::before{background-color: var(--personal);}

    /*
    料金リスト
    */
    & .tariff-list-head{
        & h3{
            background-color: var(--personal);
            color:#fff;
        }
    }

    /* --------
    voice_list
    -------- */
    /*卒業生の声*/
    & :where(.voice-title h3, .voice-title h3:after){background-color:var(--personal);}
    & .voice-area{background-color: var(--personal_brighter);}
    & :where(.voice-item, .voice-image img){border:3px solid var(--personal_lighter);}
}

/* ==============

資格試験(exam.html)

============== */
/* --------
exam_info
-------- */
#exam_info{
    text-align: center;
    padding:80px 0;
    background-color:var(--main-color);
    color:#fff;
    & h2 br{display: none;}
    & .sec-content-body p{
        margin:20px 0 0;
        line-height: 1.75;
        font-size: var(--PC-base-font);
    }
}

/*ボタン*/
.exam_info-list{
    margin-top:40px;
    display: flex;
    gap:20px;
    & .link-btn{width: calc(100% / 2);}
    & .link-btn a{
        border: 3px solid #fff; color: var(--main-color);
        &:hover {color: #fff;} 
        &::before {background-color: var(--main-color);}
        & .link-btn-down{border-color: var(--main-color);}
        &:hover .link-btn-down{border-color: #fff;}
    }    
}

/* --------
exam_flow
-------- */
#exam_flow{
    padding:60px 0 80px;
    background-color:#fff4f9;
}

/*フロー*/
.exam_flow-list{
    display: flex;
    flex-direction: column;
    border:3px solid var(--main-color);
    border-radius:5px;
    position: relative;
    &:not(:first-child){
        margin-top:80px;
        &::before{
            content:"";
            background-image: url(../img/chevron_right_24dp_FILL1_wght300_GRAD0_opsz24.svg);
            background-size: contain;
            width:80px;
            height:80px;
            position: absolute;
            top:-80px;
            left:50%;
            transform:translate(-50% , 0) rotate(90deg);
        }    
    }
}

/*フロー(タイトル)*/
.flow-head{
    display: flex;
    align-items: center;
    background-color:var(--main-color);
    padding:10px 20px;
    & .image-area{
        border-radius:50%;
        width:80px;
        background-color:#fff;
        padding:10px;
        & img{object-fit: contain;}
    }
    & .text-area{
        color:#fff;
        font-weight:bold;
        font-size:2.8rem;
        letter-spacing: 2px;
        margin-left:40px;
    }    
}

/*フロー(中身)*/
.flow-body{
    padding:20px 40px;
    background-color:#fff;
    & p{
        margin:0;
        &:not(:first-child){margin-top:0.5em;}
        & span{color:red;}
    }
}

/* --------
exam_top(試験別トップ)
-------- */
#exam_top{padding:60px 0 80px;}

.exam_top-head{
    display: flex;
    flex-direction: column;
    align-items: center;
    & h3{
        margin:0; 
        line-height: 1.75;
        text-align: center;
    }
    & p{
        margin:20px 0 0;
        & a{
            display: inline;
            text-decoration: underline;
            font-weight: bold;
            color:var(--accent-color02);
            margin:0 0.5rem;
            &:hover{text-decoration: none;}
        }
    }
}

/* カレンダー */
.exam-calendar{
    margin:40px 20px 0;
    width:calc(100% - 40px);
}

/* カレンダーのラベル */
#exam_top .calendar-label-area{
    margin-top:20px;
    flex-direction: row;
    flex-wrap: wrap;
    & .calendar-label:not(:last-child){margin-right:10px;}
}

/* リストボタン */
.exam-list{
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap:20px;
    & .link-btn{width: calc(100% / 4);}
    & .link-btn a{
        border: 3px solid var(--main-color); color: var(--main-color);
        &::before {background-color: var(--main-color);}
        &:hover {color: #fff;}
        & .link-btn-down{border-color: var(--main-color);}
        &:hover .link-btn-down{border-color: #fff;}
    }
}

@media screen and (max-width: 950px){
    .exam-list{
        flex-wrap: wrap;
        & .link-btn{width: calc(100% / 2 - 10px);}
    }
}

/* --------
試験(共通設定)
-------- */
#exam_CS,#exam_MOS,#exam_bookkeeping,#exam_adobe,#exam_PC,#exam_accounting{padding:20px 0;}

/*
タイトル
*/
.exam-title h3{
    margin:0;
    font-size:2.25rem;
}

.exam-title .exam-title-marker{
    background:linear-gradient(transparent 60%, var(--sub-color) 60%);
    padding:0 0.25em;
}

.exam-title .tocom-leaf .svg_leaf{width:3.5rem;}

/* 団体 */
.exam-content-group{
    font-weight: bold;
    font-size: var(--PC-base-font);
    margin:5px 0 0 25px;
}

/*
説明中身
*/
.exam-content{
    max-width: 900px;
    width:calc(100% - 40px);
    padding:20px;
    margin:0 auto;
}

/* 説明 */
.exam-content-text{
    margin:20px auto 40px;
    padding:40px 60px;
    line-height: 1.75;
    background-color: #f0f0f0;
    border-radius:10px;
    font-feature-settings: "palt";
    letter-spacing: 0.15rem;
    display: flex;
    align-items: center;
    & .text-area{width:70%;}
    & p{
        margin:0;
        & span{
            color:var(--accent-color02);
            font-weight: bold;
        }    
    }
    & .image-area{
        width:20%;
        margin-left:10%;
    }
    & img{
        width:100%;
        border-radius: 10px;
    }
}

/* テーブル */
.exam-content-table{
    margin-bottom:30px;
    & table{
        margin:auto;
        width:100%;
        background-color: #fff;
        border:1px solid #333;
        & .svg_open{filter: invert(21%) sepia(87%) saturate(4577%) hue-rotate(240deg) brightness(96%) contrast(111%);}/*青*/
    }
    & tr{
        display: grid;
        grid-template-columns: 2fr 4fr 1fr 1fr;
        &:nth-child(n+3){border-top:1px solid rgba(0,0,0,0.2);}
    }
    & th{
        color:#fff;
        background-color: #333;
        padding:5px 10px;
        display: grid;
        place-content: center;
        &:not(:first-child){border-left:1px solid #fff;}
    }
    & td{
        padding:5px 10px;
        &:not(:first-child){border-left:1px solid rgba(0,0,0,0.2);}
    }
    & a{
        color:var(--accent-color02);
        font-weight: bold;
        text-decoration: underline;
        &:hover{text-decoration: none;}
    }    
}
.exam-table-br{display: block;}

/* ボタン */
.exam-content-btn .link-btn{
    border:var(--main-color) solid 3px;
    color:var(--main-color);
    width:50%;
    margin:auto;
}

.exam-content-btn .link-btn a{
    &::before {background-color: var(--main-color);}
    &:hover {color: #fff;}
}

/* --------
各試験(個別設定)
-------- */
#exam_bookkeeping{margin:20px auto;}
#exam_accounting{padding-bottom:60px;}


/*adobe*/
.exam_adobe-campaign{
    margin:0;
    & a{display: inline;}
}

/* ============================

試験申し込みフォーム設定(共通)

============================ */
/* --------
request_top
-------- */
#request_top{padding-top:80px;}

.request-method-area{
    display: flex;
    flex-direction: column;
    align-items: center;
    & p{margin:0;}
    & .link-btn a{
        & .link-btn-down{border-color: var(--main-color);}
        &:hover .link-btn-down{border-color: #fff;}    
    }
}

/*
フォームリンク
*/
.request-method{
    display: flex;
    flex-direction: column;
    align-items: center;
    width:80%;
    & .link-btn{
        border:var(--main-color) solid 3px;
        color:var(--main-color);
        width:100%;
        margin:auto;
    }
    & .link-btn a{
        padding: 2rem 2rem;
        &::before {background-color: var(--main-color);}
        &:hover {color: #fff;}
    }
    & p{
        margin-top:20px;
        line-height: 1.75;
        & span{font-weight: bold;}
    }
}

/* --------
request_form
-------- */
#request_form{padding:80px 0;}

/* ==============

MOS試験(form_mos.html)

============== */
/* mosの場合 */
.mos-consent-area{margin-bottom:10px;}

.mos-consent-title{
	padding: 15px;
	color: #fff;
    font-weight: bold;
	font-size: var(--PC-middle-font);
	background: var(--main-color);
    cursor:pointer;
	position: relative;
    & span{
        font-weight: normal;
        font-size:var(--PC-small-font);
        margin-left:1em;
    }
    &::before{/* 閉じている時 */
        content: "＋";
        position: absolute;
        font-weight: bold;
        top:50%;
        right: 20px;
        transform: translate(0,-50%);
    }
    &.active::before{content: "－";}/* 開いている時 */
}

.mos-consent{
    display: none;
    background-color:#fff;
    padding:20px 40px;
    text-align: left;
    & li{
        list-style-type: disc;
        margin-left:1em;
    }
}

.mos-consent-pribacy p{margin:20px 0 0;}

.form-examdate .form-ex span{text-decoration: underline;}

/* ==============

お知らせ(news.html)

============== */
/* --------
news_list
-------- */
#news_list{
    padding:80px 0 80px;
    & .note{
        text-align: center; margin:0 0 10px;
        & a{
            display: inline;
            text-decoration: underline;
            font-weight: bold;
            color:var(--accent-color02);
            margin:0 0.5rem;
            &:hover{text-decoration: none;}
        }    
    }
    & .info-news-list{
        border-top:2px solid #ccc;
        border-bottom:2px solid #ccc;
        margin:40px 0 0;
    }
    & .info-news-list li{
        & a{
            padding:20px;
            display: flex;
        }    
    }
    & .news-date{
        width:calc(20% - 20px);
        text-align: center;
        margin-right:20px;
    }
    & .news-content{width:80%;}
}

/* ==============

よくあるご質問(faq.html)

============== */
#faq_list{padding:80px 0 60px;}

/* ==============

お問い合わせ(contact.html)

============== */
/* --------
contact_access
-------- */
#contact_access{
    padding:80px 0 0;
    & .sec-content-body{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    & .image-area{
        width:50%;
        & img{
            width:100%;
            object-fit: contain;
        }
    }
    & .text-area{
        width:50%;
        & p{margin:0 0 0 40px;}
    }    
}

/* --------
contact_map
-------- */
#contact_map{
    padding:40px 0 80px;
    & .sec-title{display: none;}
    & .sec-content-body{
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: space-between;
    }
    & .contact-map{
        width:55%;
        & iframe{
            width:100%;
            height:500px;
        }
    }
    & .contact-adress{width:45%;}
    & .contact-adress-inner{
        display: flex;
        align-items: flex-start;
        margin-right:40px;
    }
    & .adress-name{
        width:100%; 
        text-align: center;
        & h3{margin:0 0 20px;}
    }
    & .adress-text{width:100%;}
    & table{
        margin:auto;
        width:100%;
    }
    & tr{display: flex;}
    & th{
        text-align: left;
        padding-right:15px;
        width:30%;
    }
    & td{width:70%;}
}

/* --------
contact_form
-------- */
#contact_form{
    background-color: #eee;
    padding:60px 0;
    & .sec-title p{
        margin:0.5em 0 0;
        font-size: var(--PC-middle-font);
        & a{
            display: inline-block;
            text-decoration: underline;
            font-weight: bold;
            color:var(--accent-color02);
            &:hover{text-decoration: none;}
        }    
    }
    & .sec-content{
        background-color: #fff;
        padding:40px;
        border-radius: 10px;
    }
}

/* ==============

プライバシーポリシー(privacy.html)

============== */
#privacy{
    padding:80px 0;
    & p{
        margin:0 0 0 1em;
        line-height: 1.75;
    }
    & .sec-title{ /* トップ */
        text-align: left;
        margin:0 0 40px;
        & h2{
            font-size:2.5rem;
            margin:0 0 10px;
        }
        & p{font-size: var(--PC-base-font);}    
    }
}

/* 各アイテム */
.privacy-item{
    margin:25px 0 0;
    & h3{margin:0 0 10px;}
}
.privacy-item-indent{margin:1em 0 0 2em;}

/* ==============

サイトマップ(sitemap.html)

============== */
#sitemap{
    padding:80px 0;
    & .sec-title{display: none;}
}

.sitemap-listarea{display: flex;}

.sitemap-list{
    width:calc(100% / 3);
    & a:hover{text-decoration: underline;}
    & ul{
        display: flex;
        flex-direction: column;
    }
    & li{margin-bottom:10px;}
    & .svg_open{filter: invert(12%) sepia(1%) saturate(3244%) hue-rotate(95deg) brightness(87%) contrast(75%);} /*#333*/
}

.main-list p{
    margin:0 0 10px;
    font-weight: bold;
}

.sub-list{
    font-weight: normal;
    margin:0 0 0 1em;
    & li{
        position: relative;
        &::before{
            content:">";
            position: absolute;
            top:0;
            left:-1em;
        }    
    }
}

/* ==============

サンクスページ(thanks.html)

============== */
#thanks{padding:60px 0 40px;}

.thanks-area .text-area{text-align: center;}

.thanks-area .image-area{
    display: flex;
    justify-content: center;
    & img{margin-top:40px;}
}

#thanks .chara{
    position: relative;
    margin-right:20px;  
}

.thank-you{
    position: absolute;
    top:-30px;
    left:0;
    translate: -100% 0;
}

/* ==============

生徒作品ページ(gallery.html)

============== */
#gallery{
    padding:80px 0;
    & .sec-title p{
        font-size: 1.8rem;
        margin:10px 0 0;
        & a{
            display: inline-block;
            color:var(--accent-color02);
            font-weight: bold;
            &:hover{text-decoration: underline;}
        }
    }
    & .note{
        text-align: center;
        margin-bottom: 20px;
    }
}

/*
ギャラリーリスト
*/
.gallery-list{
    margin:0;
    padding:0;
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 30px;
    & li{box-shadow: 0 0 5px #ccc;}
}

/*
モーダル設定
*/
/* モーダルを開くボタン */
.modal-open{
    cursor: pointer;
    border:0;
    padding:0;
    & img{
        width:100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        object-position: center top;
    }
}

/* モーダルと背景の指定 */
.modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    text-align: center;
    background: rgba(0,0,0,50%);
    padding: 40px 20px;
    overflow: auto;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    box-sizing: border-box;
    z-index: 210;
    &.is-active{
        opacity: 1;
        visibility: visible;
    }
    &:before{
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
        margin-left: -0.2em;
    }
}

/* モーダル内側の指定 */
.modal-container{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 700px;
    width: 100%;
}

.modal-close{ /* 閉じるボタン */
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    color: #fff;
    background: var(--font-color);
    border-radius: 50%;
    cursor: pointer;
}

.modal-content{ /* モーダルのコンテンツ */
    background: #fff;
    padding: 10px;
    width:100%;
    & img{
        width:100%;
        object-fit: contain;
    }
}

/*==============
SP(中)
==============*/
@media screen and (max-width: 768px){
    /* --------
    mainvisual_sub
    -------- */
    /*背景画像*/
    .mv-content .image-area img{height:25vh;} /* 高さの基準 */
    /*コース説明の場合*/
    .mv-content.cource-mv .image-area img{
        transform: translate(150%,0);
        width: 40%;
        height:25vh; /* 高さの基準 */
    }

    /*タイトル文字*/
    .mv-content .text-area h2{font-size:3.5rem;}

    /* 一足先に調整 */
    @media screen and (max-width: 450px){
        .mv-content .text-area h2{font-size:2.25rem;}
    }

    /* --------
    breadcrumb
    -------- */
    #breadcrumb{ & ul{margin:0 20px;} }

    /* --------
    フォーム(.form-area)
    -------- */
    .form-area form>p,.form-item{
        max-width: 900px;
        width:100%;
        margin: auto;
    }

    /*
    フォーム設定
    */
    input,select{width:90%;}

    /*
    各フォーム設定
    */
    /* 受験希望日 */
    .form-examdate .form-item-content{
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    .examdate-item{width:90%;}
    .examdate-item:first-child{
        margin-right:0;
        margin-bottom:10px;
    }

    /* 連絡可能な時間/曜日 */
    .form-contactable{ & input[type=text]{width:60%} }

    /* ボタン */
    input[type=submit]{
        padding:18px 40px;
        margin:10px auto 0;
    }

    /* ========================================================

    各ページ別 設定

    ======================================================== */
    /* ============================

    コース設定(共通)

    ============================ */
    /* --------
    cource-feature
    -------- */
    #cource-feature{padding:60px 0;}
    .feature-list{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 20px;
    }
    .feature-list-item{
        gap: 0;
        padding:20px;
        & .image-area{
            & img{
                width:80%;
                max-height:200px;
                margin:10px 0;
            }
        }
        & .text-area{
            margin:0;
            justify-content: center;
            & h3{margin:0 0 10px;}
            & p{
                margin:0 10px 10px;
                text-align: left;
            }
        }
    }

    /*
    講習例
    */
    .curriculum{
        margin-top:40px;
        & table{
            max-width: 600px;
            width:100%;
        }
        & tbody{flex-direction: column;}
        & tr:not(:first-child){
            border-left:none;
            border-top:1px solid var(--font-color);
        }
        & .notes{
            margin:1em auto 0;
            max-width: calc(600px - 2em);
            width:calc(100% - 2em);
        }
    }
    .curriculum-title{ font-size: 1.8rem; }

    /* --------
    cource-card
    -------- */
    #cource-card{padding:0 0 60px;}

    .card-list{
        column-gap: 20px;
        row-gap: 30px;
    }

    #Cource_CT .card-list{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    #Cource_P .card-list{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    @media screen and (max-width: 570px){
        #Cource_CT .card-list{
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr;
        }
        #Cource_P .card-list{
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr 1fr;
        }
        .card-list-item{grid-template-rows: 200px 4em 1fr 3em;}
    }
    
    /*
    料金リスト
    */
    #cource-tariff{padding:0 0 40px;}
    .tariff-list-head{ & p{margin:15px 1em;} }
    .tariff-list-item{
        & table:not(:first-child){margin-top:30px;}
        & caption{margin-bottom:0.25em;}
        & th,& td{font-size:var(--SP-base-font);}
        & table{ & + p{font-size:var(--SP-base-font);} }    
    }

    /* --------
    course_list
    -------- */
    #course_list{padding:60px 0;}

    /* --------
    contact(サブページ)
    -------- */
    #contact.sub-contact{padding:40px 0;}

    /* ==============

    職業訓練(cource_jt.html)

    ============== */
    /* --------
    jt-movie(動画)
    -------- */
    #jt-movie{padding:0 0 60px;}

    /* --------
    subject_top(科目別トップ)
    -------- */
    #subject_top{padding:40px 0;}

    .subject-list{
        flex-direction: column;
        gap:10px;
        & .link-btn{width: 100%;}
        & .link-btn a{
            padding:1rem 0;
            line-height: 1.5;
            font-size: 2rem;
        }
    }

    /* --------
    科目(共通設定)
    -------- */
    /* タイトル */
    .subject-title{
        margin:0 0 20px;
        & h3{
            font-size:2.6rem;
            width:90%;
        }
    }

    /*
    (科目の)特徴
    */
    .subject-features h3{
        margin:0 0 10px;
        font-size:2.4rem;
    }

    :where(.subject-features-pillar,.subject-features-step,.subject-features-qualification){margin-top:40px;}

    /* ポイント */
    .subject-features-point{
        margin:0 auto 0;
        flex-direction: column;
        & .text-area{
            max-width: 450px;
            width:100%;
            padding:25px 0;
            margin-right:0;
            margin-bottom:30px;
            &::after{
                right:50px;
                bottom:-20px;
                width: 40px;
                height: 20px;
                clip-path: polygon(100% 0, 0 0, 0 100%);
            }
        }
        & li{font-size: var(--SP-middle-font);}
        & .image-area{
            width:100%;
            max-width: 350px;
        }    
    }

    /* 4つの柱 */
    .subject-features-pillar{
        & h3{margin:0 auto 30px;}
        & ul{gap:15px;}
        & h4{margin:0 0 5px;}
        & p{margin:auto;}
    }
    @media screen and (max-width: 500px){
        .subject-features-pillar{ & ul{
            grid-template-rows:repeat(4 , 1fr);
            grid-template-columns:1fr;
            gap:10px;
        } }
    }

    /* ステップ */
    .subject-features-step h3 {
        margin:0 auto 40px;
        & span{
            width:15px;
            height:15px;
            &:nth-child(2){
                bottom:5px;
                right:-35px;
            }
            &:nth-child(3){
                bottom:20px;
                right:-50px;
            }
        }
    }
    
    /* ステップ(arrow) */
    .subject-features-step .arrow{width:100px;}

    /* ステップ(step) */
    .subject-features-step .step{
        width:calc(100% - 100px);        
        & .number{ & span{font-size: 3rem;} }
        & .text{font-size:var(--SP-middle-font);}
    }

    .subject-features-step .step-head{width:65px;}
    .subject-features-step .step-body{width:calc(100% - 65px);}

    /* 資格 */
    .subject-features-qualification h3{margin:0 auto 20px;}

    /* 作品リンク */
    .subject-features-gallery{margin:30px auto 0;}
    .gallery-btn .btn{
        margin-left:20px;
        & a{font-size:2.25rem;}
    }

    /* --------
    subject_accounting(経理科)
    -------- */
    #subject_accounting{padding:40px 0 40px;}

    /* --------
    subject_webdesign(Web科)、subject_levelup(レベルアップ科)
    -------- */
    #subject_webdesign,#subject_levelup{padding:0 0 40px;}

    /* ==============

    企業研修(cource_ct.html)

    ============== */
    /* --------
    voice_list
    -------- */
    #Cource_CT{
        & .voice-item-inner{
            display: flex;
            flex-direction: column;
            margin:20px 40px;
        }
        & .voice-image{width:30%; margin-bottom:20px;}
        & .voice-image img{width:100%;}
        & .voice-text{width:100%;}    
    }

    /* ==============

    個別講習(cource_p.html)

    ============== */

    /* ==============

    資格試験(exam.html)

    ============== */
    /* --------
    exam_info
    -------- */
    #exam_info{
        padding:40px 0;
        & h2 br{display: block;}
    }
    
    /*ボタン*/
    .exam_info-list{
        margin-top:20px;
        flex-direction: column;
        gap:15px;
        & .link-btn{width:100%;}    
    }

    /* --------
    exam_flow
    -------- */
    #exam_flow{padding:40px 0 60px;}

    /*フロー*/
    .exam_flow-list{
        &:not(:first-child){
            margin-top:40px;
            &::before{
                width:45px;
                height:45px;
                top:-45px;
                transform:translate(-50% , 0) rotate(90deg);
            }        
        }
    }

    /*フロー(タイトル)*/
    .flow-head{
        padding:8px 15px;
        & .image-area{width:60px;}
        & .text-area{
            font-size:2.5rem;
            margin-left:20px;
        }    
    }

    /*フロー(中身)*/
    .flow-body{padding:20px 20px;}

    /* --------
    exam_top(試験別トップ)
    -------- */
    #exam_top{padding:40px 0 40px;}

    /* カレンダー */
    .exam-calendar{
        margin:40px 0 0;
        width:100%;
    }
    /* カレンダーのラベル */
    #exam_top .calendar-label-area{margin-top:10px;}

    /* リストボタン */
    .exam-list{
        margin-top: 40px;
        flex-direction: column;
        gap:10px;
        & .link-btn{width:100%;}    
    }

    /*
    説明中身
    */
    .exam-content{
        width:100%;
        padding:0;
    }

    /* 説明 */
    .exam-content-text{
        margin:20px auto 20px;
        padding:40px 40px;
        align-items: center;
        flex-direction: column-reverse;
        & .text-area{width:100%;}
        & .image-area{
            width:100%;
            max-width:200px;
            margin:0 0 20px;
        }    
    }

    /* テーブル */
    .exam-content-table{
        & tr{
            grid-template-columns:1fr;
            grid-template-rows: 1fr;
        }
        & th{
            padding:10px 10px;
            &:not(:first-child){display: none;}
        }
        & td{
            padding:10px 10px;
            &:not(:first-child){border-top:1px solid rgba(0,0,0,0.2);}
            &:last-child{border-bottom:1px solid #333;}
            &:not(:nth-child(2)){
                display: grid;
                place-content: center;
            }
        }    
    }
    .exam-table-br{display: none;}

    /* ============================

    試験申し込みフォーム設定(共通)

    ============================ */
    /* --------
    request_top
    -------- */
    #request_top{padding-top:40px;}

    /* --------
    request_form
    -------- */
    #request_form{padding:40px 0;}

    /* お問い合わせ */
    .sec-title.exam-form h2{font-size: 2.4rem;}

    /* ==============

    MOS試験(form_mos.html)

    ============== */
    /* mosの場合 */
    .mos-consent{padding:20px 20px;}

    /* ==============

    お知らせ(news.html)

    ============== */
    /* --------
    news_list
    -------- */
    #news_list{
        padding:40px 0 40px;
        & .info-news-list li{
            & a{
                padding:15px;
                flex-direction: column;
            }
        }
        & .news-date{
            width:100%;
            text-align: left;
            margin-right:0;
        }
        & .news-content{width:100%;}
    }

    /* ==============

    よくあるご質問(faq.html)

    ============== */
    #faq_list{padding:40px 0 40px;}

    /* ==============

    お問い合わせ(contact.html)

    ============== */
    /* --------
    contact_access
    -------- */
    #contact_access{
        padding:40px 0 0;
        & .sec-content-body{flex-direction: column-reverse;}
        & .image-area{width:100%;}
        & .text-area{
            width:100%;
            & p{margin:0 0 10px 0;}
        }    
    }

    /* --------
    contact_map
    -------- */
    #contact_map{
        padding:40px 0 40px;
        & .sec-content-body{ flex-direction: column-reverse; }
        & .contact-map{
            width:100%;
            & iframe{height:30vh;}
        }
        & .contact-adress{ width:100%; }
        & .contact-adress-inner{
            margin-right:0;
            margin-bottom:20px;
        }    
    }

    /* --------
    contact_form
    -------- */
    #contact_form{
        padding:40px 0;
        & .sec-content{padding:20px;}
    }

    /* ==============

    プライバシーポリシー(privacy.html)

    ============== */
    #privacy{padding:40px 0;}

    /* ==============

    サイトマップ(sitemap.html)

    ============== */
    #sitemap{padding:40px 0;}

    .sitemap-listarea{
        flex-direction: column;
        align-items: center;
    }

    .sitemap-list{
        width:auto;
        &:not(:first-child){margin-top:20px;}
        & ul{flex-direction:column;}
    }

    /* ==============

    サンクスページ(thanks.html)

    ============== */
    .thanks-area .image-area{ & img{margin-top:90px;} }
    @media screen and (max-width: 510px){
        .thank-you{
            top:0;
            left:50%;
            translate: 0 -55%;
            width:100px;
        }
    }

    /* ==============

    生徒作品ページ(gallery.html)

    ============== */
    #gallery{padding:40px 0;}

    .gallery-list{
        grid-template-columns:repeat(2, 1fr);
        gap: 25px;
    }

    .modal-container{max-width: 450px;}
    
    @media screen and (max-width: 500px){
        .modal-container{
            max-width: 380px;
            width:90%;
        }
    }
}/* SP(中) */

/*==============
SP(小)
==============*/
@media screen and (max-width: 425px){
    /* --------
    mainvisual_sub
    -------- */ 
    .mv-content .image-area img,.mv-content.cource-mv .image-area img{height:20vh;} /* 高さの基準 */

    /* --------
    breadcrumb
    -------- */
    #breadcrumb{
        padding: 8px 0;
        font-size:var(--SP-base-font);
    }

    /* --------
    フォーム(.form-area)
    -------- */
    /*入力例,備考*/
    .form-ex{margin:5px 0 5px 0.5em;}
    /* ボタン */
    input[type=submit]{padding:15px 40px;}
    #reload{
        padding:5px 5px;
        font-size: 1.4rem;
    }

    /* ========================================================

    各ページ別 設定

    ======================================================== */
    /* ============================

    コース設定(共通)

    ============================ */
    /* --------
    cource-feature
    -------- */
    #cource-feature{padding:40px 0;}
    .feature-list-item{
        grid-template-rows: auto 1fr;
        & .image-area{width:100%;}
        & .text-area{width:100%; margin-top:10px;}
    }

    /* --------
    cource-card
    -------- */
    #cource-card{padding:0 0 40px;}
    .card-list-item :where(.text-area p,.notes){font-size:var(--SP-base-font);}

    /*
    料金リスト
    */
    .tariff-list-item{ & caption{font-size:var(--SP-middle-font);} }

    /* ==============

    職業訓練(cource_jt.html)

    ============== */
    /* --------
    jt-movie(動画)
    -------- */
    #jt-movie{padding:0 0 40px;}
    #jt-movie p{margin:10px 20px 0;}

    /* --------
    subject_top(科目別トップ)
    -------- */
    .subject-list{ & .link-btn a{font-size: 1.8rem;} }

    /* --------
    科目(共通設定)
    -------- */
    /* タイトル */
    .subject-title{
        & h3{
            padding: 1.25rem;
            font-size:2.25rem;
        }
    }

    /*
    (科目の)特徴
    */
    /* ステップ(arrow) */
    .subject-features-step .arrow{width:80px;}

    /* ステップ(step) */
    .subject-features-step .step{
        width:calc(100% - 80px);
    }

    /* 資格 */
    .qualification-list ul{
        flex-direction: column;
        align-items: center;
        gap:0.5em 1.5em;
    }

    /* 作品リンク */
    .gallery-btn{
        margin-top:20px;
        & .btn{
            margin-left:15px;
            & a{
                font-size:1.8rem;
                &::after{height:6em;}
            }
            & br{display: block;}
        }
    }
    
    /* ==============

    企業研修(cource_ct.html)

    ============== */
    /* --------
    voice_list
    -------- */
    #Cource_CT{
        & .voice-item-inner{ margin:20px 20px; }
        & .voice-image{width:50%; margin-bottom:0px;}
        & .voice-text{width:100%;}
        & .among-item{flex-direction: column;}
    }

    /* ==============

    資格試験(exam.html)

    ============== */
    /* --------
    exam_top(試験別トップ)
    -------- */
    #exam_top{padding:40px 0 20px;}
    
    /* --------
    exam_flow
    -------- */
    #exam_flow{padding:40px 0 40px;}

    /*フロー(タイトル)*/
    .flow-head{
        padding:8px 10px;
        & .image-area{width:50px;}
        & .text-area{
            font-size:2.0rem;
            letter-spacing: 1px;
            margin-left:15px;
        }    
    }

    /*フロー(中身)*/
    .flow-body{padding:10px 15px;}

    /* --------
    試験(共通設定)
    -------- */
    /*
    タイトル
    */
    .exam-title h3{font-size:1.8rem;}

    /* 団体 */
    .exam-content-group{
        font-size: var(--SP-middle-font);
        margin:5px 0 0 0;
    }

    /*
    説明中身
    */
    /* 説明 */
    .exam-content-text{padding:25px;}

    /* ボタン */
    .exam-content-btn .link-btn{
        width:80%;
        padding:5px 0;
    }

    /* ============================

    試験申し込みフォーム設定(共通)

    ============================ */
    /* --------
    request_top
    -------- */
    #request_top{padding-top:40px;}

    /* --------
    request_form
    -------- */
    #request_form{padding:40px 0;}

    /* お問い合わせ */
    .sec-title.exam-form h2{font-size: 2.0rem;}

    /* ==============

    MOS試験(form_mos.html)

    ============== */
    /* mosの場合 */
    .mos-consent{padding:20px 20px;}

    /* ==============

    お知らせ(news.html)

    ============== */
    /* --------
    news_list
    -------- */
    #news_list{ & .info-news-list{margin:20px 0 0;} }

    /* ==============

    生徒作品ページ(gallery.html)

    ============== */
    .gallery-list{
        grid-template-columns:repeat(1, 1fr);
        gap: 15px;
    }
    .modal-open img{aspect-ratio: 4 / 3;}
    .modal-container{max-width: auto;}
    
}/* SP(小) */