@charset "utf-8";

/*==============================
　　Webクリエイター養成科
　　各ページスタイル（style.css）
==============================*/
/* ↓↓↓↓↓↓↓↓↓↓　トップページ　ここから　↓↓↓↓↓↓↓↓↓↓ */
/*------------------------------
　[index] コンテンツ
------------------------------*/
#contents {
    margin-bottom: 170px;
}

/*------------------------------
　[index] メインビジュアル
------------------------------*/
#mainvisual {
    position: relative;
}

#catchcopy {
    position: absolute;
    bottom: 5vh;
    left: 15vw;
}

#catchcopy p {
    text-align: center;
    font-size: clamp(16px, 2vw, 24px);
    font-weight: 900;
    line-height: 1;
}

#catchcopy p span {
    display: inline-block;
    color: #000;
    background-color: #fff;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .15);
    margin-bottom: 20px;
    padding: 6px 15px 7px 15px;
}

#catchcopy p span:last-of-type {
    margin-bottom: 0;
}

#catchcopy p span br {
    display: none;
}

/*------------------------------
　[index] コンセプト
------------------------------*/
#concept {
    margin-bottom: 90px;
    padding: 140px 0 140px 0;
    background: #000 url(../images/concept_bg.jpg) right top no-repeat;
    background-size: cover;
}

.concept_inner {
    width: 1140px;
    margin: 0 auto;
}

#concept h2 {
    text-align: center;
    margin-bottom: 75px;
}

#concept h2 img {
    max-width: 700px;
}

#concept p {
    color: #FFF;
    font-size: 17px;
    margin-bottom: 1.95em;
}

#concept p:last-of-type {
    margin-bottom: 0;
}

/*------------------------------
　[index] この訓練が選ばれる理由
------------------------------*/
.reason_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.reason_card {
    background-color: #FFF;
    border: 4px solid #000;
    padding: 35px 30px;
    text-align: center;
}

.reason_icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.reason_name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 16px;
    line-height: 1.2;
}

/*------------------------------
　[index] スライドギャラリー
------------------------------*/
#gallery {
    margin-bottom: 170px;
}

.slideshow {
    list-style-type: none;
}

.slideshow li {
    width: 25vw;
    height: auto;
}

.slideshow li img {
    width: 100%;
    border-left: 4px solid #000;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
}

/* スライドレールの枠 */
.wrap {
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: auto;
}

/* contentをまとめたスライドブロック */
.slideshow {
    display: flex;
    -webkit-animation: loop-slide 30s infinite linear 1s both;
    animation: loop-slide 30s infinite linear 1s both;
    /* アニメーション名 */
    animation-name: loop-slide;
    /* 開始から終了までの所要時間 */
    animation-duration: 50s;
    /* アニメーションのループ回数 */
    animation-iteration-count: infinite;
    /* 動きの加減速 */
    animation-timing-function: linear;
    /* アニメーションが開始するまでの遅延時間 */
    animation-delay: 1s;
    /* アニメーション開始前・終了後の挙動 */
    animation-fill-mode: both;
}

@-webkit-keyframes loop-slide {
    from {
        transform: translateX(0);
    }

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

@keyframes loop-slide {
    from {
        transform: translateX(0);
    }

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

/* ホバー時に動きを止める */
.slide_paused:hover .slideshow {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

/*------------------------------
　[index] お知らせ
------------------------------*/
#news {
    width: 1140px;
    margin: 0 auto 0 auto;
    padding: 40px 80px 90px;
    background-color: #fff;
    border: 4px solid #000;
}

.news_box {
    height: 310px;
    overflow-y: scroll;
    margin-bottom: 80px;
}

.news_box dl dt {
    width: 200px;
    float: left;
    padding-top: 20px;
}

.news_box dl dt span {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    color: #000;
    background-color: #DEFF49;
    border: 2px solid #000;
    border-radius: 15px;
    padding: 2px 7px;
    margin-left: 5px;
    position: relative;
    top: -1px;
}

.news_box dl dd {
    padding: 20px 10px 20px 200px;
    border-bottom: 2px dotted #000;
    text-align: justify;
}

.news_box dl dd a {
    text-decoration: none;
    background-color: #000;
    color: #DEFF49;
    font-weight: 600;
    padding: 0 3px;
}

.news_box dl dt:first-of-type,
.news_box dl dd:first-of-type {
    padding-top: 0;
}

.check_btn {
    padding: 11px 60px 11px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.check_btn img {
    width: 87px;
    margin-right: 15px;
}

/* ↑↑↑↑↑↑↑↑↑↑　トップページ　ここまで　↑↑↑↑↑↑↑↑↑↑ */

/* ↓↓↓↓↓↓↓↓↓↓　受講生募集　ここから　↓↓↓↓↓↓↓↓↓↓ */
/*------------------------------
　[bosyu] 募集要項
------------------------------*/
.rec_status p {
    text-align: center;
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.3;
}

.rec_box {
    margin-bottom: 50px;
}

.rec_box .item_card {
    overflow: hidden;
    padding: 20px 24px 20px 24px;
    margin-bottom: 15px;
}

.rec_box .item_card:last-child {
    margin-bottom: 0;
}

.rec_box .item_card h3 {
    font-size: 1rem;
    font-weight: 800;
    width: 170px;
    float: left;
}

.rec_box .item_card p {
    margin: 0 0 0 180px;
}

.rec_box .item_card p .br_none {
    display: none;
}

/*------------------------------
　[bosyu] 受講申込の流れ
------------------------------*/
.flow_block {
    margin: 0 0 20px 0;
    padding: 0 0 0 93px;
    position: relative;
}

.flow_block:last-of-type {
    margin-bottom: 0;
}

.flow_block:first-of-type:before {
    content: "1";
}

.flow_block:nth-of-type(2):before {
    content: "2";
}

.flow_block:nth-of-type(3):before {
    content: "3";
}

.flow_block:nth-of-type(4):before {
    content: "4";
}

.flow_block:nth-of-type(5):before {
    content: "5";
}

.flow_block:before {
    width: 63px;
    height: 63px;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 2rem;
    text-align: center;
    line-height: 3.4rem;
    letter-spacing: 0;
    border-radius: 50%;
    border: 3px solid #000;
    background: #000;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 200;
}

.flow_block:after {
    content: "";
    display: inline-block;
    width: 5px;
    height: calc(100% + 80px);
    background: #000;
    position: absolute;
    left: 29px;
    top: 0;
    z-index: 100;
}

.flow_block:last-of-type:after {
    height: 0;
    /*
	height: calc(50%);
	bottom: 90%;
	top: auto;
*/
}

.flow_block p {
    background: #FFF;
    padding: 20px 24px;
    border: 4px solid #000;
}

/*------------------------------
　[bosyu] 訓練実績
------------------------------*/
#achieve_box {
    margin: 0 auto 0 auto;
    padding: 0 24px 0;
    background-color: #fff;
    border: 4px solid #000;
    height: 400px;
    overflow-y: scroll;
}

#achieve_box dl {
    line-height: 1.5;
}

#achieve_box dl dt {
    width: 350px;
    float: left;
    padding-top: 22px;
}

#achieve_box dl dt::before {
    display: inline-block;
    margin: 0 14px 0 0;
    width: 13px;
    height: 13px;
    content: '';
    border-radius: 100%;
    background: #DEFF49;
    border: 2px solid #000;
}

#achieve_box dl dd {
    padding: 22px 10px 22px 350px;
    border-bottom: 2px dotted #000;
    text-align: justify;
}

#achieve_box dl dd:last-of-type {
    border: none;
}

/* #achieve_box dl dt:first-of-type,
#achieve_box dl dd:first-of-type {
    padding-top: 0;
} */

/* ↑↑↑↑↑↑↑↑↑↑　受講生募集　ここまで　↑↑↑↑↑↑↑↑↑↑ */

/* ↓↓↓↓↓↓↓↓↓↓　訓練内容　ここから　↓↓↓↓↓↓↓↓↓↓ */
/*------------------------------
　[curriculum] カリキュラム
------------------------------*/
.cur_box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.cur_box .item_card {
    margin-bottom: 3px;
    padding: 23px 24px 23px 24px;
    position: relative;
}

.cur_box .item_card:nth-last-child(2),
.cur_box .item_card:nth-last-child(1) {
    margin-bottom: 3px;
}

.cur_box .item_card span {
    display: block;
    width: 65px;
    position: absolute;
    top: -9px;
    right: 13px;
}

.cur_box .item_card h3 {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.05em;
    margin: 0 50px 27px 0;
    padding-top: 7px;
}

.cur_box .item_card p {
    margin: 0 0 0 0;
}

/*------------------------------
　[curriculum] この訓練の特徴
------------------------------*/
.feature_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature_box figcaption {
    padding: 28px 30px 28px 30px;
    position: relative;
}

.feature_box figcaption span {
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    color: #DEFF49;
    -webkit-text-stroke: 5px #000000;
    paint-order: stroke fill;
    position: absolute;
    top: -90px;
    left: 7px;
}

.feature_box figcaption h3 {
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.2;
    padding: 0 0 20px 0;
}

.feature_box .br_none {
    display: inline;
}

/* ↑↑↑↑↑↑↑↑↑↑　訓練内容　ここまで　↑↑↑↑↑↑↑↑↑↑ */

/* ↓↓↓↓↓↓↓↓↓↓　過去受講生　ここから　↓↓↓↓↓↓↓↓↓↓ */
/*------------------------------
　[voice] 受講生の声
------------------------------*/
.voice_face {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 4px solid #000;
    background-color: #fff;
    overflow: hidden;
}

.voice_left,
.voice_right {
    overflow: hidden;
    margin-bottom: 40px;
}

.voice_left:last-child,
.voice_right:last-child {
    margin-bottom: 0;
}

.voice_left .voice_face {
    float: left;
}

.voice_right .voice_face {
    float: right;
}

.voice_text {
    position: relative;
    background: #fff;
    border: 4px solid #000;
    padding: 25px 35px;
}

.voice_left .voice_text {
    margin: 0 0 0 220px;
}

.voice_left .voice_text:after,
.voice_left .voice_text:before {
    right: 100%;
    top: 90px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.voice_left .voice_text:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #FFF;
    border-width: 20px;
    margin-top: -20px;
}

.voice_left .voice_text:before {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #000;
    border-width: 25px;
    margin-top: -25px;
}

.voice_right .voice_text {
    margin: 0 220px 0 0;
}

.voice_right .voice_text:after,
.voice_right .voice_text:before {
    left: 100%;
    top: 90px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    transform: rotate(180deg);
}

.voice_right .voice_text:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #FFF;
    border-width: 20px;
    margin-top: -20px;
}

.voice_right .voice_text:before {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #000;
    border-width: 25px;
    margin-top: -25px;
}

.voice_text .voice_comment {
    margin-bottom: 12px;
}

.voice_text .voice_name {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    text-align: right;
}

/*------------------------------
　[voice] 受講生の作品
------------------------------*/
#loadarea {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

#loadarea .item img {
    border: 4px solid #000;
}

.works_box .black-btn {
    background-image: none;
}

/* ↑↑↑↑↑↑↑↑↑↑　過去受講生　ここまで　↑↑↑↑↑↑↑↑↑↑ */

/* ↓↓↓↓↓↓↓↓↓↓　よくある質問　ここから　↓↓↓↓↓↓↓↓↓↓ */
/*------------------------------
　[question] 共通
------------------------------*/
.regist_box {
    width: 100%;
}

.toggle_content {
    background-color: #fff;
    border: 4px solid #000;
    margin-bottom: 17px;
}

.toggle_content:last-child {
    margin-bottom: 0;
}


.toggle_title {
    position: relative;
    padding: 28px 60px 28px 90px;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
}

.toggle_title::before {
    width: 50px;
    height: 50px;
    content: "Q";
    color: #FFFFFF;
    font-weight: 800;
    font-size: 2rem;
    text-align: center;
    line-height: 2.5rem;
    letter-spacing: 0;
    border-radius: 50%;
    border: 3px solid #000;
    background-color: #000;
    display: block;
    position: absolute;
    left: 20px;
    top: calc(50% - 25px);
}

.toggle_btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: block;
    width: 30px;
    height: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.toggle_btn:before,
.toggle_btn:after {
    display: block;
    content: '';
    background-color: #333;
    position: absolute;
    width: 26px;
    height: 4px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.toggle_btn:before {
    width: 4px;
    height: 26px;
}

.toggle_title.selected .toggle_btn:before {
    content: normal;
}

.toggle_content dd {
    display: none;
    padding: 23px 24px 23px 90px;
    position: relative;
}

.toggle_content dd p::before {
    width: 50px;
    height: 50px;
    content: "A";
    color: #000;
    font-weight: 800;
    font-size: 2rem;
    text-align: center;
    line-height: 2.5rem;
    letter-spacing: 0;
    border-radius: 50%;
    border: 3px solid #000;
    background-color: #FFF;
    display: block;
    position: absolute;
    left: 20px;
    top: 10px;
    z-index: 300;
}

/* ↑↑↑↑↑↑↑↑↑↑　よくある質問　ここまで　↑↑↑↑↑↑↑↑↑↑ */

/* ↓↓↓↓↓↓↓↓↓↓　アクセス　ここから　↓↓↓↓↓↓↓↓↓↓ */
/*------------------------------
　[access] 訓練校情報
------------------------------*/
.info_box {
    margin-bottom: 50px;
}

.info_box .item_card {
    overflow: hidden;
    padding: 20px 24px 20px 24px;
    margin-bottom: 15px;
}

.info_box .item_card:last-child {
    margin-bottom: 0;
}

.info_box .item_card h3 {
    font-size: 1rem;
    font-weight: 800;
    width: 160px;
    float: left;
}

.info_box .item_card p {
    margin: 0 0 0 160px;
}

.info_box .item_card p .br_none {
    display: none;
}

/*------------------------------
　[access] 地図
------------------------------*/
#map {
    width: 100%;
}

.map_box {
    width: 100%;
    height: 500px;
    margin-bottom: 40px;
    border-top: 4px solid #000;
    border-bottom: 4px solid #000;
}

.map_box iframe {
    vertical-align: bottom;
}

#map p {
    text-align: center;
}

#map p .br_none {
    display: none;
}

/* ↑↑↑↑↑↑↑↑↑↑　アクセス　ここまで　↑↑↑↑↑↑↑↑↑↑ */

/* ↓↓↓↓↓↓↓↓↓↓　雇用保険受給延長　ここから　↓↓↓↓↓↓↓↓↓↓ */
.encho_intro {
    font-size: 1.2rem;
    font-weight: 500;
    padding-bottom: 40px;
}

.encho_box .item_card {
    margin-bottom: 50px;
}

.encho_box dl {
    padding: 30px 24px 30px 24px;
    font-weight: 600;
}

.encho_box dl dt {
    width: 160px;
    float: left;
    line-height: 1.5;
}

.encho_box dl dt::before {
    display: inline-block;
    margin: 0 14px 0 0;
    width: 13px;
    height: 13px;
    content: '';
    border-radius: 100%;
    border: 2px solid #000;
    background-color: #DEFF49;
}

.encho_box dl dd {
    margin: 0 0 25px 160px;
    line-height: 1.5;
}

.encho_box dl dd:last-of-type {
    margin-bottom: 0;
}

.encho_img h3 {
    margin-bottom: 20px;
}

.encho_img h3 span {
    display: inline-block;
    background-color: #000;
    color: #DEFF49;
    line-height: 1;
    padding: 7px 10px 8px 10px;
}

.encho_img picture {
    display: inline-block;
    margin-bottom: 50px;
}

.encho_list {
    margin-bottom: 50px;
}

.encho_list li {
    line-height: 1.5;
    padding: 0 0 0 25px;
    margin-bottom: 20px;
    position: relative;
}

.encho_list li:before {
    content: "※";
    position: absolute;
    left: 0;
}

.encho_list li:last-child {
    margin-bottom: 0;
}

/* ↑↑↑↑↑↑↑↑↑↑　雇用保険受給延長　ここまで　↑↑↑↑↑↑↑↑↑↑ */

/* ↓↓↓↓↓↓↓↓↓↓　お問い合わせ　ここから　↓↓↓↓↓↓↓↓↓↓ */
.tel_box p,
.form_box p {
    text-align: center;
    margin-bottom: 40px;
}

.custom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    padding: 30px 24px;
    background-color: #000;
    border: 4px solid #000;
    border-radius: 30px;
    transition: 0.5s;
}

.custom-btn:hover {
    opacity: 0.7;
    transform: translateY(-5px);
}


.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    flex-shrink: 0;
}

.btn-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-text {
    display: flex;
    flex-direction: column;
}

/* 上段のテキスト（電話） */
.tel_box .btn-sub {
    display: inline-block;
    color: #DEFF49;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 15px;
}

/* 下段のテキスト（電話） */
.tel_box .btn-main {
    display: inline-block;
    color: #DEFF49;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
}

/* 上段のテキスト（フォーム） */
.form_box .btn-sub {
    display: inline-block;
    color: #DEFF49;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 10px;
}

/* 下段のテキスト（フォーム） */
.form_box .btn-main {
    display: inline-block;
    color: #DEFF49;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
}

/* ↑↑↑↑↑↑↑↑↑↑　お問い合わせ　ここまで　↑↑↑↑↑↑↑↑↑↑ */




/*------------------------------
　メディアクエリ（1200px以下）
------------------------------*/
@media (max-width: 1200px) {

    /*----- [index] コンセプト -----*/
    .concept_inner {
        width: 90%;
    }

    /*----- [index] お知らせ -----*/
    #news {
        width: 90%;
    }

}

/*------------------------------
　メディアクエリ（1140px以下）
------------------------------*/
@media (max-width: 1140px) {

    /*----- [index] この訓練が選ばれる理由 -----*/
    .reason_name {
        font-size: clamp(19px, 2vw, 23px);
    }

    /*----- [index] スライドギャラリー -----*/
    .slideshow li {
        width: 33.33vw;
    }

    /*----- [index] お知らせ -----*/
    #news {
        padding: 40px 30px 50px;
    }

    .check_btn .br_none {
        display: inline;
    }

    /*----- [curriculum] カリキュラム -----*/
    .cur_box {
        gap: 16px;
    }

    .cur_box .item_card span {
        width: 50px;
        top: -7px;
    }

    .cur_box .item_card h3 {
        font-size: 1.18rem;
        margin: 0 40px 20px 0;
    }

    /*----- [curriculum] この訓練の特徴 -----*/
    .feature_box figcaption {
        padding: 28px 20px 28px 20px;
    }

    .feature_box figcaption h3 {
        font-size: 1.25rem;
        letter-spacing: 0.05em;
        padding: 0 0 20px 0;
    }

}

/*------------------------------
　メディアクエリ（900px以下）
------------------------------*/
@media screen and (max-width: 900px) {

    /*----- [index] この訓練が選ばれる理由 -----*/
    .reason_grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .reason_name {
        font-size: clamp(23px, 2.2vw, 35px);
    }

    .reason_name br {
        display: none;
    }

    .reason_icon img {
        width: 50%;
    }

    /*----- [bosyu] 訓練実績 -----*/
    #achieve_box dl dt {
        width: 100%;
        float: none;
        padding-top: 20px;
        text-align: center;
    }

    #achieve_box dl dt::before {
        display: none;
    }

    #achieve_box dl dd {
        padding: 5px 0 20px;
        text-align: center;
    }

    /*----- [curriculum] カリキュラム -----*/
    .cur_box {
        grid-template-columns: repeat(1, 1fr);
        gap: 16px;
    }

    .cur_box .item_card span {
        width: 60px;
        top: -7px;
    }

    /*----- [curriculum] この訓練の特徴 -----*/
    .feature_box {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .feature_box figcaption h3 {
        font-size: 1.4rem;
        letter-spacing: 0.05em;
    }

    /*----- [voice] 受講生の作品 -----*/
    #loadarea {
        grid-template-columns: repeat(2, 1fr);
    }

}

/*------------------------------
　メディアクエリ（750px以下）
------------------------------*/
@media (max-width: 750px) {

    /*----- [index] コンテンツ -----*/
    #contents {
        margin-bottom: 60px;
    }

    /*----- [index] コンセプト -----*/
    #concept {
        padding: 60px 0 60px 0;
        margin-bottom: 50px;
    }

    #concept h2 {
        margin-bottom: 50px;
    }

    #concept p {
        font-size: 14px;
    }

    /*----- [index] この訓練が選ばれる理由 -----*/
    .reason_card {
        padding: 25px 14px;
    }

    .reason_icon img {
        width: 75%;
    }

    /*----- [index] スライドギャラリー -----*/
    #gallery {
        margin-bottom: 60px;
    }

    .slideshow li {
        width: 50vw;
    }

    /*----- [index] お知らせ -----*/
    #news {
        padding: 20px 15px 30px;
    }

    .news_box {
        margin-bottom: 40px;
    }

    .news_box dl dt {
        width: 100%;
        float: none;
        padding-top: 20px;
        font-size: 1.1rem;
        font-weight: 800;
        text-align: center;
    }

    .news_box dl dd {
        padding: 20px 5px 20px 0px;
    }

    .news_box dl dd:first-of-type {
        padding-top: 20px;
    }

    .check_btn {
        padding: 11px 25px;
        font-size: clamp(16px, 2vw, 20px);
        background-position: right 15px center;
    }

    .check_btn img {
        width: 55px;
        margin-right: 6px;
    }

    /*----- [bosyu] 募集要項 -----*/
    .rec_box {
        margin-bottom: 35px;
    }

    .rec_box .item_card {
        padding: 14px 14px 20px;
    }

    .rec_box .item_card h3 {
        width: 100%;
        float: none;
        text-align: center;
        font-size: 110%;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid #000;
    }

    .rec_box .item_card p {
        margin: 0 0 0 0;
        text-align: center;
    }

    .rec_box .item_card:nth-last-of-type(1) p,
    .rec_box .item_card:nth-last-of-type(2) p,
    .rec_box .item_card:nth-last-of-type(3) p {
        text-align: justify;
    }

    #guideline a.black-btn .br_none {
        display: inline;
    }

    /*----- [bosyu] 訓練実績 -----*/
    #achieve_box {
        padding: 0 14px;
    }

    /*----- [bosyu] 受講申込の流れ -----*/
    .flow_block {
        padding: 0 0 0 63px;
    }

    .flow_block:before {
        width: 48px;
        height: 48px;
        line-height: 2.8rem;
    }

    .flow_block:after {
        height: calc(100% + 60px);
        left: 21px;
    }

    .flow_block p {
        padding: 20px 14px 18px 14px;
    }

    /*----- [curriculum] カリキュラム -----*/
    .cur_box .item_card {
        padding: 18px 14px 18px 14px;
    }

    .cur_box .item_card h3 {
        font-size: 1.18rem;
        margin: 0 50px 20px 0;
    }

    /*----- [curriculum] この訓練の特徴 -----*/
    .feature_box {
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }

    .feature_box figcaption {
        padding: 28px 14px 23px 14px;
    }

    .feature_box figcaption h3 {
        font-size: 1.4rem;
        letter-spacing: 0;
    }

    .feature_box figcaption h3 .br_none {
        display: none;
    }

    /*----- [voice] 受講生の声 -----*/
    .voice_left,
    .voice_right {
        margin-bottom: 20px;
    }

    .voice_face {
        width: 120px;
        height: 120px;
    }

    .voice_text {
        padding: 15px 15px;
    }

    .voice_left .voice_text {
        margin: 0 0 0 150px;
    }

    .voice_right .voice_text {
        margin: 0 150px 0 0;
    }

    .voice_left .voice_text:after,
    .voice_left .voice_text:before,
    .voice_right .voice_text:after,
    .voice_right .voice_text:before {
        top: 60px;
    }

    /*----- [question] 共通 -----*/
    .toggle_content {
        margin-bottom: 12px;
    }

    .toggle_title {
        padding: 18px 48px 18px 63px;
    }

    .toggle_title::before {
        width: 40px;
        height: 40px;
        line-height: 2rem;
        left: 13px;
        top: calc(50% - 20px);
    }

    .toggle_btn {
        right: 13px;
    }

    .toggle_content dd {
        padding: 18px 16px 18px 63px;
    }

    .toggle_content dd p::before {
        width: 40px;
        height: 40px;
        line-height: 2rem;
        left: 13px;
        top: 10px;
    }

    /*----- [access] 訓練校情報 -----*/
    .info_box {
        margin-bottom: 35px;
    }

    .info_box .item_card {
        padding: 14px 14px 20px;
    }

    .info_box .item_card h3 {
        width: 100%;
        float: none;
        text-align: center;
        font-size: 110%;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid #000;
    }

    .info_box .item_card p {
        margin: 0 0 0 0;
        text-align: center;
    }

    #info a.black-btn {
        background-position: right 20px center;
        padding: 23px 30px;
    }

    #info a.black-btn .br_none {
        display: inline;
    }

    /*----- [access] 地図 -----*/
    .map_box {
        height: 400px;
        margin-bottom: 30px;
    }

    #map p .br_none {
        display: inline;
    }

    #map p span {
        display: none;
    }

    /*----- [encho] 雇用保険受給延長 -----*/
    .encho_intro {
        font-size: 1.1rem;
    }

    .encho_box dl {
        padding: 20px 15px 20px 15px;
    }

    .encho_box dl dt {
        float: none;
        width: 100%;
        margin-bottom: 8px;
        padding-bottom: 6px;
        margin-left: 0;
        text-indent: 0;
        font-weight: 800;
        border-bottom: 2px solid #000000;
    }

    .encho_box dl dt span {
        display: none;
    }

    .encho_box dl dt::before {
        margin-right: 7px;
    }

    .encho_box dl dd {
        margin-left: 0;
    }

    .encho_box .black-btn {
        padding: 23px 40px;
    }

    /*----- [contact] お問い合わせ -----*/
    .tel_box p,
    .form_box p {
        text-align: justify;
        margin-bottom: 30px;
    }

    .custom-btn {
        flex-direction: column;
    }

}

/*------------------------------
　メディアクエリ（430px以下）
------------------------------*/
@media screen and (max-width: 430px) {

    /*----- [index] メインビジュアル -----*/
    #mainvisual {
        min-height: 100%;
    }

    #catchcopy {
        position: absolute;
        bottom: 2vh;
        right: 5vw;
    }

    #catchcopy p {
        font-size: clamp(15px, 2vw, 20px);
        line-height: 1.2;
    }

    #catchcopy p span {
        display: inline-block;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, .15);
        margin-bottom: 20px;
        padding: 5px 10px 6px 10px;
    }

    #catchcopy p span:last-of-type {
        display: none;
    }

    #catchcopy p span br {
        display: inline;
    }

    /*----- [index] この訓練が選ばれる理由 -----*/
    .reason_name br {
        display: inline;
    }

    .reason_icon img {
        width: 85%;
    }

    /*----- [index] スライドギャラリー -----*/
    .slideshow li {
        width: 95vw;
    }

    /*----- [index] お知らせ -----*/
    .check_btn img,
    .check_btn span {
        display: none;
    }

    /*----- [bosyu] 募集要項 -----*/
    .rec_box .item_card {
        margin-bottom: 10px;
    }

    .rec_box .item_card p .br_none {
        display: inline;
    }

    .rec_box .item_card p span {
        display: none;
    }

    /*----- [bosyu] 訓練実績 -----*/
    #achieve_box dl dt,
    #achieve_box dl dd {
        text-align: justify;
    }

    /*----- [curriculum] カリキュラム -----*/
    .cur_box .item_card span {
        width: 50px;
        top: -7px;
    }

    /*----- [curriculum] この訓練の特徴 -----*/
    .feature_box figcaption {
        padding: 28px 14px 23px 14px;
    }

    .feature_box figcaption span {
        font-size: 100px;
        top: -75px;
    }

    .feature_box figcaption h3 {
        font-size: 150%;
        letter-spacing: 0;
    }

    .feature_box figcaption h3 .br_none {
        display: inline;
    }

    /*----- [voice] 受講生の声 -----*/
    .voice_face {
        width: 80px;
        height: 80px;
    }

    .voice_face img {
        transform: scale(1.3);
    }

    .voice_left .voice_text {
        margin: 0 0 0 105px;
    }

    .voice_right .voice_text {
        margin: 0 105px 0 0;
    }

    .voice_left .voice_text:after,
    .voice_left .voice_text:before,
    .voice_right .voice_text:after,
    .voice_right .voice_text:before {
        top: 40px;
    }

    .voice_left .voice_text:after,
    .voice_right .voice_text:after {
        border-width: 15px;
        margin-top: -15px;
    }

    .voice_left .voice_text:before,
    .voice_right .voice_text:before {
        border-width: 20px;
        margin-top: -20px;
    }

    /*----- [voice] 受講生の作品 -----*/
    #loadarea {
        grid-template-columns: repeat(1, 1fr);
        margin-bottom: 30px;
    }

    /*----- [access] 訓練校情報 -----*/
    .info_box .item_card p .br_none {
        display: inline;
    }

    .info_box .item_card p span {
        display: none;
    }

    /*----- [encho] 雇用保険受給延長 -----*/
    .encho_intro {
        padding-bottom: 25px;
    }

    .encho_box .item_card {
        margin-bottom: 30px;
    }

    .encho_img picture {
        margin-bottom: 25px;
    }

    .encho_list {
        margin-bottom: 30px;
    }

    .encho_box .black-btn {
        font-size: 1.1rem;
        padding: 10px 25px;
        background-position: right 15px center;
    }

    .encho_box .black-btn .br_none {
        display: inline;
    }

    /*----- [contact] お問い合わせ -----*/
    /* 上段のテキスト（電話） */
    .tel_box .btn-sub {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    /* 上段のテキスト（フォーム） */
    .form_box .btn-sub {
        font-size: 14px;
        margin-bottom: 7px;
    }

    /* 下段のテキスト（フォーム） */
    .form_box .btn-main {
        font-size: 20px;
    }

}

/*------------------------------
　メディアクエリ（370px以下）
------------------------------*/
@media screen and (max-width: 370px) {

    /*----- [index] この訓練が選ばれる理由 -----*/
    .reason_icon img {
        width: 94%;
    }

    /*----- [index] お知らせ -----*/
    .check_btn {
        padding: 11px 25px 11px 20px;
        font-size: 13px;
        background-position: right 10px center;
    }

    /*----- [bosyu] 受講申込の流れ -----*/
    .flow_block {
        margin-bottom: 25px;
        padding: 0 0 0 0;
    }

    .flow_block:before {
        width: 45px;
        height: 45px;
        font-size: 1.8rem;
        line-height: 2.6rem;
        top: -20px
    }

    .flow_block:after {
        /* display: none; */
        left: calc(50% - 2px);
    }

    .flow_block p {
        padding-top: 24px;
        position: relative;
        z-index: 150;
    }

    /*----- [voice] 受講生の声 -----*/
    .voice_face {
        width: 65px;
        height: 65px;
    }

    .voice_left .voice_text {
        margin: 0 0 0 85px;
    }

    .voice_right .voice_text {
        margin: 0 85px 0 0;
    }

    .voice_left .voice_text:after,
    .voice_left .voice_text:before,
    .voice_right .voice_text:after,
    .voice_right .voice_text:before {
        top: 32px;
    }

    .voice_left .voice_text:after,
    .voice_right .voice_text:after {
        border-width: 12px;
        margin-top: -12px;
    }

    .voice_left .voice_text:before,
    .voice_right .voice_text:before {
        border-width: 17px;
        margin-top: -17px;
    }

}

/*------------------------------
　メディアクエリ（350px以下）
------------------------------*/
@media screen and (max-width: 350px) {}