@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.2rem;
    --SP-middle-font:1.6rem;    
}

*,*::before,*::after {box-sizing: inherit;}

html{
    font-size: 62.5%;/* 10px */
    box-sizing: border-box;
}

body{
    margin:0;
    padding:0;
    background:#fff;
    /* font関係 */
    font-family: 'notosansjp', sans-serif;
    color:var(--font-color);
    letter-spacing: 1px;
    width:100%;
}

img{
	max-width:100%;
	vertical-align: bottom;
}

ul{
    margin:0;
    padding:0;
}

li{list-style-type: none;}

a{
	text-decoration:none;
	color:inherit;
    display: block;
}
/* PDFのリンク */
a[href$=".pdf"]:after { /* aタグのhrefの中身が.pdfで終わる */
    content:" ";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../img/PDF-icon.png) no-repeat;
    background-size: 24px;
    background-position: center bottom;
}
:where(#TOP-Page #about,#info,#news_list,#Cource_JT) a[href$=".pdf"]:after{display: none;} /* TOPのabout、ニュースは除く */

table{
    border-collapse: collapse;
    border:none;
    & :where(th,td){border:none;}
}
main{overflow-x: hidden;}

/* ==============
フォント設定
============== */
@font-face {
    font-family: 'notosansjp';
    font-weight: normal;
    font-display: swap;
    src: url(../font/NotoSansJP-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'notosansjp';
    font-weight: bold;
    font-display: swap;
    src: url(../font/NotoSansJP-Bold.ttf) format('truetype');
}

/* ==============
アイコン関連
============== */
.svg_icon{ /*全般*/
    width:1em;
    vertical-align: middle;
}

.svg_bell{filter: invert(12%) sepia(1%) saturate(3244%) hue-rotate(95deg) brightness(87%) contrast(75%);} /*#333*/
.svg_cached{translate: 0 -.125em;}
.svg_check{
    filter: invert(29%) sepia(98%) saturate(1087%) hue-rotate(199deg) brightness(95%) contrast(86%); /*職業訓練カラー*/
    width: 1.25em;
    translate: 0 -.125em;
}
.svg_medal{
    filter: invert(100%) brightness(300%); /*#fff*/
    width: 1.25em;
    translate: 0 -.125em;
}
.svg_computer{filter: invert(12%) sepia(1%) saturate(3244%) hue-rotate(95deg) brightness(87%) contrast(75%);} /*#333*/
.svg_group{filter: invert(12%) sepia(1%) saturate(3244%) hue-rotate(95deg) brightness(87%) contrast(75%);} /*#333*/
.svg_help{filter: invert(100%) brightness(300%);} /*#fff*/
.svg_leaf{filter: invert(40%) sepia(98%) saturate(1196%) hue-rotate(88deg) brightness(106%) contrast(115%);} /*緑*/
.svg_open{filter: invert(100%) brightness(300%);} /*#fff*/
.svg_pen{
    filter: invert(100%) brightness(300%); /*#fff*/
    translate: 0 -.125em;
}

/* ==============
共通CSS
============== */
.wrapper{
    max-width: 1100px;
    width:100%;
    margin:0 auto;
}
:where(main, footer) .wrapper{
    width:calc( 100% - 40px );
    padding:0 20px;
}

.sec-title{
    text-align: center;
    margin-bottom:40px;
    color: var(--accent-color);
    font-size:2.5rem;
    & h2{margin:0;}
}

main, main img{z-index: 1;}
header,main,footer{box-sizing: content-box; font-size:1.6rem;}

/*
リンクボタン
*/
.link-btn a {
	font-weight: bold;
	text-align: center;
    font-size:2.25rem;
	display: block;
	margin: auto;
	padding: 2rem 4rem;
    background-color: #fff;
	cursor: pointer;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
    &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: translateY(-100%);
        transition: all .3s;
        z-index: -1;
    }
    &:hover::before {transform: translateY(0);}
}

.link-btn-down{
    display: inline-block;
    width:0.5em;
    height:0.5em;
    border-top:#000 4px solid;
    border-right:#000 4px solid;
    transform: rotate(135deg) translate(0,0);
	transition: all .3s;
}

/*
詳しくはこちらのボタン
*/
.more-btn a{
    background-color: #eee;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 240px;
    padding: 25px 30px;
    font-size: 1.5rem;
    font-weight: normal;
    color: #313131;
    transition: 0.3s ease-in-out;
    &:hover {
        background-color: #edf6ff;
        color: #6bb6ff;
    }
    &:before{
        content: '';
        position: absolute;
        top: calc(50% - 2px);
        right: -2em;
        transform: translateY(calc(-50% - 2px)) rotate(30deg);
        width: 12px;
        height: 2px;
        background-color: #6bb6ff;
        transition: 0.3s;
    }
    &:after{
        content: '';
        position: absolute;
        top: 50%;
        right: -2em;
        transform: translateY(-50%);
        width: 50px;
        height: 2px;
        background-color: #6bb6ff;
        transition: 0.3s;
    }
    &:hover:before{right: -2.5em;}
    &:hover:after{right: -2.5em;}
}

/*
カレンダー
*/
#calendar{height:100%;}

/* カレンダーカスタマイズ */
.fc-theme-standard .fc-scrollgrid {/*外枠*/
    border: 1px solid #333;
    border-radius: 5px;
}
.fc .fc-toolbar-title{margin-left:0.5em;} /* XXXX年XX月 */
#calendar thead{/*曜日*/
    background:#2c3e50;
    color:#fff;
}
.fc-daygrid-day.fc-day-today {background:var(--base-color-02);} /*TODAY*/
.fc-daygrid-event-harness a{border:none;} /*デフォルトのイベントボタン*/
.fc-daygrid-body{pointer-events: none;}/*カレンダーのポインタ無効*/
.fc-daygrid-dot-event{ flex-direction: column;/* flex */ } /*上記の中身*/
.fc-event-title,.fc-daygrid-dot-event .fc-event-title{/*タイトル*/
    white-space: normal;
    font-weight: normal;
    font-feature-settings: "palt";
    line-height: 1.25;
}

/* ==============
JS関係
============== */
/*
ふわっと出現
*/
.fade-in{/*スクロールCSS*/
    opacity: 0;
    transition-duration: 1000ms;
    transition-property: opacity, translate;
}

/*下から上*/
.fade-in-up{translate:0 50px;}
/*上から下*/
.fade-in-down{translate:0 -50px;}
/*右から左*/
.fade-in-left{translate:-50px 0;}
/*左から右*/  
.fade-in-right{translate:50px 0;}
  
.scroll-in{
    opacity: 1;
    translate:0;
}

/* ==============
各種CSS
============== */
/* --------
header
-------- */
#header{
    position: -webkit-sticky;
    position: sticky;
    top:0;
    width:100%;
    background-color: #fff;
    z-index: 100;
    &.is-active{box-shadow: 0 1px 2px rgba(0,0,0,0.2);} /*スクロールしたらラインが出る*/
    & p{margin:0;}
}

/* 
ロゴ、電話
*/
#header .site-branding{ /*通常は全体表示*/
    height:80px;
    margin:10px 0;
    transition: 0.3s;
    visibility: visible;
    opacity: 1;
}
#header.is-active .site-branding{ /*スクロールしたら隠れる*/
    height:0;
    margin-top:0;
    margin-bottom:0;
    visibility: hidden;
    opacity: 0;
}

.site-branding .wrapper{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.site-branding .site-branding-content{display: flex;} /*表示*/
.header-nav-area .site-branding-content{display: none;} /*非表示*/

/* ロゴ */
#header .logo{
    margin:0 15px;
    z-index: 100;
    & p{font-size:1rem;}
    & h1{
        margin:0;
        line-height: 1;
        font-size:4rem;
        color:var(--main-color);
        & span{color:var(--sub-color);}
    }
    & img{
        height:60px;
        object-fit: cover;
        vertical-align: text-bottom;
        margin-right:10px;
    }
}

/* 本社リンク */
.main-office{
    border-radius: 5px;
    background-color: #fff;
    color:var(--font-color);
    padding:0 5px;
    display: flex;
    align-items: flex-end;
    transition: 0.3s;
    &:hover{opacity: 0.6;}
    & a{
        display: flex;
        align-items: center;
    }    
    & span{color:#2f9471;}
    & img{
        height:40px;
        margin-right:3px;
    }
    & p{
        font-weight: bold;
        font-size: 1.8rem;
    }
}

/* 電話 */
#header .tel-area{
    display: flex;
    align-items: flex-end;
    margin-left:20px;
    & .tel{
        text-align: center;
        margin:0 10px 0 0;
    }
    & .tel-number{
        font-size:2.5rem;
        color:var(--main-color);
        font-weight: bold;
        line-height: 1;
        padding-bottom:2.5px;
    }
    & .tel-time{
        font-size: 1.2rem;
        letter-spacing: 1px;
        font-feature-settings: "palt";
    }
    & .chara img{ /* マーくん */
        height:55px;
        object-fit: cover;
        vertical-align: bottom;
        margin-right:10px;
    }    
}

/*
ナビメニュー
*/
.header-nav-area{
    font-size:1.8rem;
    background-color: var(--main-color);
    border-top:2px solid var(--main-color);
    border-bottom:2px solid var(--main-color);
    & a{
        width:100%;
        height:100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* メインナビ */
.main-nav{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    text-align: center;
}

.main-nav li {
    width:20%;
    height:60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--main-color);
    color:#fff;
    transition: 0.3s;
    &:hover{
        background-color:#fff;
        color:var(--main-color);
    }
}

.main-nav-down{
    cursor: pointer;
    position: relative;
    &::before, &::after{ /* + */
        content:"";
        position:absolute;
        top:50%;
        right:0;
        width:15px;
        height:2px;
        background-color: #fff;
        opacity: 1;
    }
    &::before{transform: translate(-50%,-50%);} /* ― */
    &::after{transform:translate(-49%,-49%) rotate(90deg);} /* | */
    &:hover::before, &:hover::after{ background-color:var(--main-color); }
    /*閉*/
    &.active::after{opacity: 0;}
}

/* サブナビ */
.sub-nav{ /* 通常時は閉じてる */
    position: absolute;
    top:0;
    left:0;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    opacity: 0;
    pointer-events: none;
    &.active{ /* ホバーすると開く */
        top:100%;
        opacity: 1;
        pointer-events: auto;
    }
}

.sub-nav li{
    height:60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:var(--main-color);
    color:#fff;
    border-top:2px solid var(--main-color);
    width:100%;
    transition: 0.3s;
    &:first-child{padding-top:10px;}
    &:hover{
        background-color:var(--main-color);
        color:#fff;
    }
    & a{width:100%;}
}

/*
ハンバーガーメニュー
*/
.nav-hamburger-btn{display: none;}/*PCでは非表示*/

/* --------
mainvisual
-------- */
/* ↓ スライドの外枠 */
.slide-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9 ; /* heightではなくアスペクト比に縦を合わせるようにする */
    max-height:450px; /* 画面いっぱいになるので指定 */
    position: relative;
    overflow: hidden; /* はみ出したスライドを隠す */
}

/*  ↓ スライド（コンテンツ） */
.slide { /*スライド全体 */
    width: 400%; /* 親要素(.slide-wrapper)の4倍 (100% * 4 → 400%) */
    height: 100%;
    display: flex;
    transition: all 1s;
}

.slide div { /* スライド */
    width: 25%; /* 1/4 */
    height: 100%;
    display: flex;
    text-align: center;
    justify-content: center;
    /*画像(設定)*/
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    & a{
        display: block;
        width:100%;
        height:100%;
        max-width: 900px; /*高さ500pxに対して*/
    }
    /*画像(中身)*/
    &:nth-of-type(1){background-image: url(../img/mv_course01_pc.png);}
    &:nth-of-type(2){background-image: url(../img/mv_course02_pc.png);}
    &:nth-of-type(3){background-image: url(../img/mv_course03_pc.png);}
    &:nth-of-type(4){background-image: url(../img/mv_40th_pc.png);}
}

/* スライドさせるために必要なクラス */
.slide1 {transform: translateX(0);}/* 初期位置 */
.slide2 {transform: translateX(-25%);} /* 全体の 1/4 左に移動 */
.slide3 {transform: translateX(-50%);} /* 全体の 2/4 左に移動 */
.slide4 {transform: translateX(-75%);} /* 全体の 2/4 左に移動 */

/* ↓ 左右のボタン */
.next,.prev {
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: 50%;
    z-index: 10;
    cursor: pointer;
    border-top: solid 3px #000;
    border-right: solid 3px #000;
}
.next {
    right: 20px;
    -webkit-transform: rotate(45deg) translateY(50%);
    transform: rotate(45deg) translateY(50%);
}
.prev {
    left: 35px;
    -webkit-transform: rotate(-135deg) translateY(-50%);
    transform: rotate(-135deg) translateY(-50%);
}

/* ↓ インジケーター */
.indicator {
    width: 100%;
    position: absolute;
    bottom: 20px;
    display: flex;
    column-gap: 18px;
    z-index: 10;
    justify-content: center;
    align-items: center;
    & li {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        list-style: none;
        background-color: #fff;
        border: 2px #000 solid;
        cursor: pointer;
        &:first-of-type {background-color: #000;}
    }
}

/* --------
about
-------- */
#about{
    padding:60px 0 60px;
    background: linear-gradient(#fff 50%, #f3f3f3);
}

:where(#about .sec-content-head,.about-area .text-area) span{color:var(--main-color);}

#about .sec-content-head{
    display: grid;
    place-content: center;
}

#about .sec-content-head h4{
    margin:0 0 40px;
    font-size:2.8rem;
    text-align: center;
}

.about-area{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.about-area .text-area{
    width:calc(55% - 40px);
    margin-right:40px;
    & p{
        margin:0 1em;
        font-size: 1.40rem;
    }
}

.about-area .image-area{
    width:45%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    gap:10px;
    & a{text-align: center;}
    & img{
        width:100%;
        max-width: 430px;
        object-fit: contain;
    }
}

/* --------
info
-------- */
#info{padding:60px 0;}
#info .wrapper{max-width: 1400px;}
#info .sec-content-body{
    display: flex;
    align-items: center;
    margin:0 20px;
}

/*
カレンダー
*/
/* カレンダー */
.info-calendar-area{
    width:50%;
    margin-right:5%;
}

.info-calendar{padding-bottom:20px;}

/* カレンダーラベル */
.calendar-label-area{
    display: flex;
    flex-direction: column;
}

.calendar-label{display: flex;}

.calendar-label .label{
    width:100px;
    height:1em;
    margin:0.25em 0 0 0;
    position: relative;
    font-feature-settings: "palt";
}
.calendar-label .label::after{
    content:"…";
    position: absolute;
    top:0;
    right:-1.5em;
}
/*色*/
.label.label-01{background-color:var(--calendar-01);}
.label.label-02{background-color:var(--calendar-02);}
.label.label-03{background-color:var(--calendar-03);}
.label.label-04{background-color:var(--calendar-04);}

.calendar-label-content{
    margin-left:1.75em;
    width:calc( 100% - 120px );
}

/*
お知らせ
*/
.info-news{
    width:45%;
    padding:10px 0;
}

.info-news h2{
    font-size:3rem;
    margin-left:20px;
    & .svg_bell{
        vertical-align:middle;
        width: 3.25rem;
    }
}

.info-news-list{
    border-top:2px solid #ccc;
    border-bottom:2px solid #ccc;
    margin:40px 0;
}

.info-news-list li{
    &:not(:first-child){border-top:1px solid #ccc;}
    & a{padding:20px;}
    & a:hover{background-color: #f0f0f0;}
}

.news-date{color:var(--accent-color02);}

/* --------
skill
-------- */
#skill{
    text-align: center;
    padding:80px 0 60px;
    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='40' height='40' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(339, 100%, 95%, 1)'/><path d='M11 6a5 5 0 01-5 5 5 5 0 01-5-5 5 5 0 015-5 5 5 0 015 5'  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>");
}

/*
フォームへのリンクのボタン
*/
.skill-list-area p{font-size: 1.8rem;}

.skill-list{
    margin-top: 60px;
    display: flex;
    justify-content: center;
    gap:20px;
}

.skill-list .link-btn{
    width: 100%;
    max-width:350px;
    & br{display: none;}
    /* 色 */
    & a:hover{color: #fff;}
    & :where(a.btn_MOS, a.btn_bookkeeping){
        border: 3px solid var(--main-color);
        color: var(--main-color);
    }
    & a.btn_MOS::before,& a.btn_bookkeeping::before{background-color: var(--main-color);}
}
@media screen and (max-width: 820px){
    .skill-list .link-btn{ & br{display: block;} }
}

/*詳しく見るボタン*/
#skill .more-btn{margin-top:40px;}
#skill .more-btn a{
    background-color: var(--accent-color02);
    color: #fff;
    border:solid 3px var(--accent-color02);
    &:hover{
        background-color: #fff;
        color: var(--accent-color02);
    }
    &:before,&:after{background-color: #6bb6ff;}
}

/* --------
course_top(最初の3ボタン)
-------- */
#course_top{padding:40px 0;}

#course_top .sec-content-head{    
    padding:20px 0 0;
    border-radius: 10px;
    & p{
        text-align: center;
        font-size: 1.8rem;
    }
}

.course-list{
    margin-top: 40px;
    display: flex;
    justify-content: center;
    gap:20px;
    & .link-btn {width: calc(100% / 3) ;}
}

/* 色 */
.course-list .link-btn a{
    &.btn_job-training{
        border: 3px solid var(--job-training);
        color: var(--job-training);
        &::before {background-color: var(--job-training);}
        & .link-btn-down{border-color:var(--job-training);}
    }
    &.btn_corporate-training{
        border: 3px solid var(--corporate-training);
        color: var(--corporate-training);
        &::before {background-color: var(--corporate-training);}
        & .link-btn-down{border-color:var(--corporate-training);}
    }
    &.btn_personal{
        border: 3px solid var(--personal);
        color: var(--personal);
        &::before {background-color: var(--personal);}
        & .link-btn-down{border-color:var(--personal);}
    }
    &:hover{
        color: #fff;
        & .link-btn-down{border-color: #fff;}
    }
}

/* --------
コース解説(共通)
-------- */
/*
コース説明
*/
.course-summary-area{
    display: flex;
    align-items: center;
    margin:80px auto;
}

.course-image{
    width:50%;
    text-align: center;
    & img{
        width:95%;
        object-fit: contain;
    }
}

.course-text{
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    & h3{
        margin:0 0 20px;
        font-size:2.5rem;
    }
    & p{
        margin:0 60px 40px;
        line-height:1.75;
    }
}

/*
タイトル
*/
:where(#course_job-training, #course_corporate-training, #course_personal){
    & .sec-title{
        padding:60px 0;
        margin:0;
        color:#fff;
        font-size:3rem;
        letter-spacing: 5px;
        overflow: hidden;
        position: relative;
        &::after{
            content: '';
            background-color: #fff;
            opacity: 0.3;
            transform: rotate(-65deg);
            position: absolute;
            bottom: -250px;
            right: -250px;
            width: 40%;
            height: 500px;
        }
    }    
    /*詳しく見るボタン*/
    & .more-btn a{
        padding: 20px 30px;
        /*矢印調整*/
        &:before{right: -1.25em;}
        &:after{
            width: 30px;
            right: -1.25em;
        }
        &:hover:before,&:hover:after{right: -1.75em;}
    }
}

/*
卒業生の声
*/
.voice-area{padding:40px 0;}

.voice-title{
    text-align: center;
    margin-bottom:20px;
}

.voice-title h3{
    position: relative;
    border-radius: 100% 80px / 80px 100%;
    padding: 1.5rem 4rem;
    font-size:2.75rem;
    color:#fff;
    display: inline-block;
}
.voice-title h3:after {
    content: '';
    position: absolute;
    bottom: -19px;
    left: 35%;
    width:30px;
    height:20px;
    clip-path: polygon(100% 100%, 0 0, 70% 0);
}

.voice-area .voice{
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap:20px;
}

.voice-item{
    border:3px solid #ccc;
    border-radius: 10px;
    background-color:#fff ;
    display: flex;
    align-items: center;
}

.voice-item-inner{
    display: flex;
    align-items: center;
    margin:20px 20px 20px 0;
}

.voice-image{
    width:50%;
    display: flex;
    justify-content: center;
    height:100%;
}

.voice-image img{
    border-radius:50%;
    border:3px solid #ccc;
    width:50%;
    height:100%;
    margin:auto;
}

.voice-text{width:50%;}
.voice-text-head{margin:0; font-weight: bold;}
.voice-text-body{margin:10px 0 0;}

/* --------
course_job-training(職業訓練)
-------- */
/*
色
*/
#course_job-training{
    & .sec-title{background-color: var(--job-training);}
    & .course-text {& h3{color:var(--job-training);}}
    /*卒業生の声*/
    & :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);}
    /*詳しく見るボタン*/
    & .more-btn a{
        &:hover{background-color: var(--job-training_brighter); color: var(--job-training);}
        &:before,&:after{background-color: var(--job-training);}
    }
}

/* --------
course_corporate-training(企業研修)
-------- */
/* 企業研修だけ横長 */
#course_corporate-training{
    & .voice-area .voice{
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
    }
    & .voice-image{
        width:30%;
        height:100%;
        & img{
            width:50%;
            height:100%;
        }
    }
    & .voice-text{
        width:60%;
        margin:0 5%;
    }
}

/*
色
*/
#course_corporate-training{
    & .sec-title{background-color: var(--corporate-training);}
    & .course-text {& h3{color:var(--corporate-training);}}
    /*卒業生の声*/
    & :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);}
    /*詳しく見るボタン*/
    & .more-btn a{
        &:hover {background-color: var(--corporate-training_brighter); color: var(--corporate-training);}
        &:before,&:after{background-color: var(--corporate-training);}
    }
}

/* --------
course_personal(個別講習)
-------- */
/*
色
*/
#course_personal{
    & .sec-title{background-color: var(--personal);}
    & .course-text {& h3{color:var(--personal);}}
    /*卒業生の声*/
    & :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);}
    /*詳しく見るボタン*/
    & .more-btn a{
        &:hover {background-color: var(--personal_brighter); color: var(--personal);}
        &:before,&:after{background-color: var(--personal);}
    }
}

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

/*アコーディオン*/
.faq-list-area{
    margin-bottom:40px;
    & details{
        cursor: pointer;
        &:not(:first-child){margin-top:20px;}
    }
    & summary {
        display: block; /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */
        &::-webkit-details-marker { display: none; }  /* 上記Safari対策 */
    }
}

.faq-title{ /* summary */
	padding: 15px;
	font-size: 1.8rem;
	color: #fff;
    background-color: var(--main-color);
	position: relative;
    cursor: pointer;
    & h3{
        display: flex;
        align-items: center;
        gap:5px;
        margin-right:calc(1em + 5px);
    }
    & .svg_help{
        fill:#fff;
        width:1.25em;
    }
    &::before,&::after{
        content: "";
        width:1em;
        height:2px;
        background-color: #fff;
        position: absolute;
        top:calc(50% - 1px);
        right:calc(15px + 0.5em);
    }
    &::before{rotate: 90deg;}
}
details[open] .faq-title::before{rotate: 0deg;}

/*アコーディオン中身 */
.js-content {
    max-height: 0;
    overflow: hidden;
    background-color:#fff;
    transition: max-height 0.3s ease-out;
}

.js-content_inner {
    padding:20px 40px;
    & h3{font-size: 2rem;}
    & p{font-size: 1.6rem;}
}

/* --------
SNS
-------- */
#sns{
    margin:0 0 80px;
    box-sizing: border-box;
}

#sns .wrapper{
    margin:0 auto;
    width: calc(100% - 20px);
    padding: 0 10px;
    overflow-x: scroll;
}

.sns-link-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin:0;
}

.sns-link{
    width:calc( ( 100% / 2 ) - 5% ); /* ←複数 */
    /* width:100%; */ /* ←単数 */
    &:nth-child(even){margin-left:10%;}
}
.sns-title{color:var(--accent-color02);font-weight:bold;}

/* facebook */
.facebook_wrap{
    margin:0 auto;
    width: 100%;
}
.facebook_wrap iframe{
    border-radius: 3px;
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.5), 0 1px 10px 0 rgba(0,0,0,0.15);
}

.fb-page a{
    width: 100% !important;
    height: 500px !important;
}

/* instagram */
/* .instagram_wrap{}
.instagram_wrap blockquote{} */

/* X(twitter) */
.X-twitter_wrap{
    width: 100%;
    max-width: 500px;
}
.X-twitter_wrap iframe{
    width: 100% !important;
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.5), 0 1px 10px 0 rgba(0,0,0,0.15);
    border-radius: 3px;
}

.X-twitter_caution{
    font-size:1.25rem;
    margin:10px 0 0;
    text-align: left;
}

/* --------
contact
-------- */
#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>");
}

#contact .wrapper{
    background-color: #fff;
    padding:40px 0 40px;
}

#contact .sec-content-body{
    display: flex;
    align-items: center;
    margin:0 40px;
}

/*
地図
*/
.contact-map{width:50%;}
.contact-map iframe{
    width: 100%;
    height:400px;
}

/*
住所、フォームへのボタン
*/
.contact-adress{width:50%;}

.contact-adress-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.adress-name h3{
    font-size:1.8rem;
    margin:0 0 10px;
    text-align: center;
}
.adress-text p{margin:10px 0;}

.contact-adress .more-btn{margin-top:20px;}

/*詳しく見るボタン*/
#contact .more-btn{margin-top:40px;}
#contact .more-btn a{
    background-color: var(--accent-color02);
    color: #fff;
    border:solid 3px var(--accent-color02);
    &:hover {
        background-color: #fff;
        color: var(--accent-color02);
    }
    &:before,&:after{background-color: #6bb6ff;}
}

/* --------
footer
-------- */
#footer{
    background-color: var(--main-color);
    color:#fff;
}

/*
トップへジャンプ
*/
#page-top a{/*リンクの形状*/
	display: flex;
	justify-content:center;
	align-items:center;
	background-color:var(--main-color);
	border-radius: 5px;
	width: 60px;
	height: 60px;
	color: #fff;
    border: 1px solid #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:1rem;
	transition:all 0.3s;
    &:hover{background-color: var(--accent-color02);}
}

#page-top{/*リンクを右下に固定*/
	position: fixed;
	right: 20px;
	z-index: 10;
	opacity: 0;/*はじめは非表示*/
    translate: 0 100px;
    &::after{/*ボタンの中身*/
        content:"";
        border-top:solid 2px #fff;
        border-right:solid 2px #fff;
        width:10px;
        height:10px;
        position: absolute;
        top:50%;
        left:50%;
        rotate: -45deg;
        translate: -50% -25%;
    }
}
#page-top.UpMove{animation: UpAnime 0.5s forwards;}/* 上に上がる動き */
@keyframes UpAnime{
  from {opacity: 0; translate: 0 100px;}
  to {opacity: 1; translate: 0;}
}
#page-top.DownMove{animation: DownAnime 0.5s forwards;}/* 下に下がる動き */
@keyframes DownAnime{
  from {opacity: 1; translate: 0;}
  to {opacity: 1; translate: 0 100px;}
}

/*
ロゴ、フッターナビ
*/
#footer .wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding:40px 0;
}

/* ロゴ */
#footer .logo{
    & a{
        font-size: 2.25rem;
        font-weight: bold;
        margin-bottom:15px;
    }
    & img{
        height: 40px;
        margin-right: 5px;
    }
    & p{
        margin:5px 0;
        &:nth-child(4),&:nth-last-child(2){margin-top:1.5em;}
    }    
}

/* フッターナビ */
.footer-nav{
    display: flex;
    font-size: 1.6rem;
    gap:60px;
}

.footer-nav-item{
    display: flex;
    flex-direction: column;
    & p{
        margin:0 0 10px;
        font-weight: bold;
    }
    & a:hover{text-decoration: underline;}
}

.footer-nav-item li{
    margin-left:1em;
    position: relative;
    &::after{
        content:">";
        position: absolute;
        top:0;
        left:-1em;
    }
    & span{vertical-align: middle;}
}

/*本社リンク*/
.footer-main-office{
    margin-top:1em;
    & .svg_open{width: 2.5rem; vertical-align: bottom;}
}

/* 
コピーライト 
*/
.copyright p{
    margin:0;
    text-align: center;
    padding:10px 0;
    font-size:1.2rem;
}

/*==============
ヘッダーナビの変形
==============*/
@media screen and (max-width: 905px){
    /* --------
    header
    -------- */
    #header.is-active{ box-shadow: 0 0.5px 1px #ccc; } /* 下ライン */

    /* 
    ロゴ、電話
    */
    #header .site-branding{
        height:auto;
        margin:0;
    }

    .site-branding .wrapper{
        flex-direction: column;
        align-items: flex-start;
    }
    #header.is-active .site-branding{ /*SPはスクロールしても隠れない*/
        height:auto;
        margin-top:10px;
        margin-bottom:10px;
        visibility: visible;
        opacity: 1;
    }

    .site-branding-content{
        width:100%;
        justify-content: center;
        align-items: center;
    }

    /* ロゴ */
    #header .logo{
        margin:0 10px 20px;
        height:60px;
        & img{
            height:50px;
            vertical-align:text-bottom;
        }
    }

    /* 電話 */
    #header .chara img{ /* マーくん */
        height:45px;
        vertical-align: bottom;
    }

    /*
    ナビメニュー
    */
    .header-nav-area{
        border-top:none;
        border-bottom:none;
    }

    .header-nav{
        position: fixed;
        left:0;
        z-index: 100;
        width:100%;
        height:auto;
        background-color: var(--main-color);
        padding-top: 70px; /*ロゴ分(70px(10+60))*/
        padding-bottom: 20px;
        transition: 0.3s;
        pointer-events: none;
        top:-200%;
        opacity:0;
    }
    .header-nav.active{
        top:0;
        opacity:1;
        pointer-events: auto;
    }

    /* メインナビ */
    .main-nav{
        align-items: center;
        flex-direction: column;
    }

    .main-nav li {
        width:100%;
        height:50px;
        justify-content: center;
        background-color: var(--main-color);
        color:#fff;
        &:hover{
            background-color:#fff;
            color:var(--main-color);
        }
    }

    .main-nav-down{ &::before, &::after{right:60px;} } /* + */

    /* サブナビ */
    .sub-nav{ /* 通常時は閉じてる */
        position: absolute;
        top:0;
        left:0;
        display: flex;
        flex-direction: column;
        align-items: center;
        width:100%;
        &.active{ /* ホバーすると開く */
            top:100%;
            opacity: 1;
            pointer-events: auto;
        }
    }

    .sub-nav li{
        height:60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color:#fff;
        border-top:none;
        color:var(--main-color);
        font-size:1.6rem;
        width:100%;
        &:first-child{padding-top:0;}
        &:hover{
            background-color:var(--main-color);
            color:#fff;
        }
    }

    /*
    ハンバーガーメニュー
    */
    .nav-hamburger-btn{
        display: block;/*SPでは表示*/
        position: fixed;
        top:10px;
        right:10px;
        z-index: 110;
    }

    .hamburger-btn{
        position: relative;
        width:60px;
        height:60px;
        background-color: var(--main-color);
        cursor: pointer;
        & span{ /* 閉 */
            position: absolute;
            left:10px;
            width:40px;
            height:2px;
            background-color: #fff;
            transition: 0.3s;
            &:nth-child(1){top:15px;}
            &:nth-child(2){top:29px;}
            &:nth-child(3){bottom:15px;}
        }
        &.active span{ /* 開 */
            &:nth-child(1){top:29px; transform: rotate(-45deg);}
            &:nth-child(2){opacity: 0;}
            &:nth-child(3){bottom:29px; transform: rotate(45deg);}
        }
    }

    /* --------
    mainvisual
    -------- */
    .next,.prev {border-color: #fff;}

    /* --------
    about
    -------- */
    #about .sec-content-head h4{
        margin:0 0 25px;
        font-size:2.25rem;
    }

    .about-area{flex-direction: column;}

    .about-area .text-area{
        max-width: 700px;
        width:100%;
        margin-right:0;
        margin-bottom:25px;
        & p{margin:0 1em;}
    }
    
    .about-area .image-area{
        width:100%;
        justify-content: center;
        & img{
            width:100%;
            max-width: 500px;
        }
    }

    /* --------
    info
    -------- */
    #info .sec-content-body{
        flex-direction: column;
        margin:0 0;
    }

    /*
    カレンダー
    */
    .info-calendar-area{
        width: 100%;
        margin:0 0 40px;
        box-sizing: border-box;
    }

    /*
    お知らせ
    */
    .info-news{
        width:100%;
        padding: 0;
    }
    .info-news h2{
        font-size:2rem;
        & .svg_bell{width: 2.5rem;}
    }
    .info-news-list{margin:20px 0;}
    .info-news-list li{
        margin:0 10px;
        & a{padding: 10px;}
    }
    .info-news .more-btn{padding-top: 10px;}

    /* --------
    SNS
    -------- */
    #sns{margin:20px 0 40px;}

    .sns-link-area{
        flex-direction: column;
        align-self: center;
        text-align: center;
    }

    .sns-link{
        width:100%;
        &:nth-child(even){margin:20px auto;}
    }
    /* X(twitter) */
    .X-twitter_wrap{margin:auto;}

}/* ヘッダーナビの変形 */

/*==============
SP(中)
==============*/
@media screen and (max-width: 768px){
    /* ==============
    アイコン関連
    ============== */
    .svg_check{width: 1.20em;}

    /* ==============
    共通CSS
    ============== */
    .sec-title{
        margin-bottom:20px;
        font-size:2rem;
    }

    /*
    リンクボタン
    */
    .link-btn a {
        font-size:1.8rem;
        margin: 0;
        padding: 1.5rem 3rem;
    }
    .link-btn .material-symbols-outlined{ font-size: 2.5rem; }

    /*
    詳しくはこちらのボタン
    */
    .more-btn a{
        max-width: auto;
        width:auto;
        padding: 20px 25px;
        font-size: 1.5rem;
        &:before {
            right: -2em;
            width: 12px;
        }
        &:after {
            right: -2em;
            width: 50px;
        }    
    }

    /*
    カレンダー
    */
    .fc .fc-toolbar-title{font-size:1.5em;}/* XXXX年XX月 */
    .fc .fc-toolbar.fc-header-toolbar{margin-bottom: 1.25em;}/* テーブル上の余白 */
    .fc .fc-daygrid-day-number,.fc .fc-col-header-cell-cushion{font-size:0.9em;}/* 曜日/日付 */

    /* ==============
    各種CSS
    ============== */
    /* --------
    header
    -------- */
    /* 
    ロゴ、電話
    */
    /* ロゴ */
    #header .logo{ & h1{font-size:3rem;} }

    /* 一足先に調整 */
    @media screen and (max-width: 450px){
        /* --------
        header
        -------- */
        /* ロゴ */
        #header .logo{
            & h1{font-size:2.25rem;}
            & img{margin-right:2.5px;}
        }
        .site-branding-content{
            margin-top:25px;
            flex-direction: column;
        }
        .site-branding .site-branding-content{display: none;} /*非表示*/
        .header-nav-area .site-branding-content{display: flex;} /*表示*/

        /* 本社リンク */
        .main-office{
            padding:0 10px 10px;
            background-color: transparent;
            color:#fff;
            & span{color:#fff;}
            & img{filter: invert(100%) brightness(300%);} /*#fff*/
        }

        /* 電話 */
        #header .tel-area{
            margin-left: 0;
            & .tel{margin:0;}
            & .tel-number{
                font-size:2.25rem;
                color:#fff;
            }
            & .tel-time{color:#fff;}
            & .chara img{display: none;} /*マーくん*/
        }
    }

    /* --------
    about
    -------- */
    @media screen and (max-width: 600px){
        #about .sec-content-head h4{font-size:2.0rem;}
    }

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

    /*
    カレンダー
    */
    .calendar-label-area{ flex-direction: column; }
    .calendar-label{
        width: 100%;
        margin-right:0;
    }

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

    /*
    フォームへのリンクのボタン
    */
    .skill-list-area{margin:0 40px;}
    .skill-list-area p{font-size: 1.6rem;}

    /*詳しく見るボタン*/
    #skill .more-btn{margin-top:40px;}

    /* --------
    course_top(最初の3ボタン)
    -------- */
    #course_top{padding:40px 0;}
    #course_top .sec-content-head{
        padding:0 20px;
        & p{font-size: 1.6rem;}
    }

    @media screen and (max-width: 550px){
        .course-list{
            flex-direction: column;
            align-items: center;
            margin:20px 0 0;
            gap:10px;
            & .link-btn {width: 100%;}
        }
    }

    /* --------
    コース解説(共通)
    -------- */
    /*
    コース説明
    */
    .course-summary-area{
        margin:0 auto 40px;
        flex-direction: column;
    }
    .course-image{
        width:100%;
        & img{
            margin-top:20px;
            width:100%;
            height:300px;
        }
    }

    .course-text{
        width:100%;
        flex-direction: column;
        align-items: center;
        margin-top:40px;
        & p{margin:0 60px 20px;}
    }

    /*
    タイトル
    */
    :where(#course_job-training, #course_corporate-training, #course_personal){
        & .sec-title {
            padding:40px 0;
            font-size:2.5rem;
            &::after{
                bottom: -300px;
                right: -250px;
                width: 50%;
            }
        }
        /*詳しく見るボタン*/
        & .more-btn a{transform: translate(-30px,0);} 
    }

    /*
    卒業生の声
    */
    .voice-area{padding:20px 0;}
    .voice-title{margin-bottom:20px;}
    .voice-title h3{font-size:2.0rem;}
    .voice-title h3:after {
        bottom: -14px;
        width:20px;
        height:15px;
    }

    .voice-area .voice{
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: 1fr;
    }

    /* --------
    course_corporate-training(企業研修)
    -------- */
    #course_corporate-training{
        & .voice-image{
            width:50%;
            height:100%;
            & img{
                width:70%;
                height:100%;
            }
        }        
        & .voice-text{width:55%;}
    }

    /* --------
    faq
    -------- */
    #faq{padding:20px 0;}

    /*アコーディオン*/
    .faq-list-area{margin-bottom:20px;}
    .faq-title{
        padding:5px 10px;
        font-size: 1.4rem;
        &::before,&::after{ right:calc(5px + .5em); }
    }
    .js-content_inner {
        padding:10px 30px;
        & h3{font-size: 1.6rem;}
        & p{font-size: 1.4rem;}
    }

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

    #contact .wrapper{
        width:calc( 100% - 40px );
        padding:20px 0;
        margin:0 20px;
    }

    #contact .sec-content-body{
        display: flex;
        align-items: center;
        margin:0 40px;
        flex-direction: column;
    }

    /*
    地図
    */
    .contact-map{width:100%;}
    .contact-map iframe{height:200px;}

    /*
    住所、フォームへのボタン
    */
    .contact-adress{width:100%;}
    .adress-name h3{margin:20px 0 10px;}

    /*詳しく見るボタン*/
    #contact .more-btn{margin-top:20px;}

    /* --------
    footer
    -------- */
    /*
    トップへジャンプ
    */
    /*リンクの形状*/
    #page-top,#page-top a{display: none;/*SPでは非表示*/}

    /*
    ロゴ、フッターナビ
    */
    #footer .wrapper{
        flex-direction: column;
        padding:40px 20px 20px;
        width:calc( 100% - 40px );
    }

    /*
    フッターナビ
    */
    .footer-nav{margin-top:20px;}
}/* SP(中) */

/*==============
SP(小)
==============*/
@media screen and (max-width: 425px){
    header,main,footer{box-sizing: content-box; font-size:1.4rem;}
    .sec-title{font-size:1.6rem;}
    .link-btn a {padding: 1rem 2rem;}
    .link-btn .material-symbols-outlined{font-size:2rem;}
    .more-btn a{
        padding: 15px;
        font-size:1.4rem;
        &:before {
            right: -1em;
            width: 12px;
        }
        &:after {
            right: -1em;
            width: 30px;
        }
        &:hover:before, &:hover:after {right: -1.5em;}
    }
    
    /* カレンダー */
    .fc .fc-toolbar-title{font-size:1.25em;}/* XXXX年XX月 */
    .fc .fc-toolbar.fc-header-toolbar{margin-bottom: 1em;}/* テーブル上の余白 */
    .fc .fc-daygrid-day-number,.fc .fc-col-header-cell-cushion{font-size:0.85em;}/* 曜日/日付 */
    
    /* --------
    header
    -------- */
    /* ロゴ */
    #header .logo{ & h1{font-feature-settings: "palt";} }

    /* --------
    mainvisual
    -------- */
    /* ↓ スライドの外枠 */
    .slide-wrapper {aspect-ratio: 4 / 3 ;}

    /* 画像 */
    .slide div{
        background-size: cover;
        &:nth-of-type(1){background-image: url(../img/mv_course01_sp.png);}
        &:nth-of-type(2){background-image: url(../img/mv_course02_sp.png);}
        &:nth-of-type(3){background-image: url(../img/mv_course03_sp.png);}
        &:nth-of-type(4){background-image: url(../img/mv_40th_sp.png);}
    }

    /* --------
    about
    -------- */
    #about {padding: 20px 0 40px;}
    #about .sec-content-head h4{
        margin:0 0 15px;
        font-size:1.65rem;
    }

    .about-area .text-area{
        margin-bottom:20px;
        & h4{
            margin:0 0 10px;
            font-size:1.6rem;
        }
        & p{font-size:1.4rem;}   
    }

    /* --------
    info
    -------- */
    /*
    お知らせ
    */
    #info .sec-content-body{ margin:0; }
    .info-news h2{margin:0 0 0 20px;}
    .info-news-list{margin:10px 0;}
    .news-date,.news-content{font-size: 1.4rem;}

    /*
    カレンダー
    */
    .calendar-label .label,.calendar-label .label::after,.calendar-label-content{font-size:1.4rem;}

    /* --------
    skill
    -------- */
    .skill-list{
        flex-direction: column;
        gap:10px;
        margin: 20px 0 0 0;
    }

    .skill-list .link-btn{
        width: 100% ;
        & a{padding:2rem 1rem;}
        & br{display: none;}    
    }

    .skill-list-area p{font-size: 1.4rem;}

    /* --------
    course
    -------- */
    #course_top .sec-content-head{& p{font-size: 1.4rem;}}
    :where(#course_job-training, #course_corporate-training, #course_personal){
        & .sec-title {
            padding:25px 0;
            font-size:2.0rem;
        }
    }
    .course-image{& img{height:200px;}}
    .course-text{
        margin-top:20px;
        & p{margin:0 20px 20px;}
    }
    .voice-item-inner{
        margin:20px 0;
        flex-direction: column;
    }
    .voice-text{
        width:80%;
        margin-top:20px;
    }
    #course_corporate-training{& .voice-text{
        width:80%;
        margin-top:20px;
    }}

    /* --------
    faq
    -------- */
    .faq-box{padding:10px 15px;}
    
    /*アコーディオン*/
    .js-content_inner { padding:0 15px; }

    /* --------
    footer
    -------- */
    .footer-nav{
        flex-direction: column;
        gap:20px;
    }
}/* SP(小) */