/* =========================================================
   基本設定
========================================================= */

body {
    margin: 0;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
}

/* PC・スマホで改行位置を切り替える */
.br_sp {
    display: none;
}

.br_pc {
    display: block;
}


/* =========================================================
   共通レイアウト
========================================================= */

.lp-container {
    width: 100%;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
}

.lp-container h2 {
    margin-top: 0;
}

.lp-container img {
    display: block;
    width: 100%;
}


/* =========================================================
   メインビジュアル
========================================================= */

.lp-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background-image: url("../img/main-visual.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.lp-hero__inner {
    display: flex;
    justify-content: center;
    width: min(100% - 40px, 960px);
}

.lp-hero__title {
    margin: 0;
    padding: 18px 70px;
    background: rgba(0, 105, 195, 0.82);
    color: #fff;
    font-size: 32px;
    line-height: 1.5;
    text-align: center;
}

.lp-hero__title span {
    white-space: nowrap;
}


/* =========================================================
   講座バナー
========================================================= */

.lp-banner {
    padding-top: 60px;
    padding-bottom: 60px;
}

.lp-banner .lp-container {
    max-width: 680px;
}


/* =========================================================
   講座概要
========================================================= */

.lp-intro {
    position: relative;
    padding: 60px 20px;
    background-image: url("../img/22367711_m.jpg");
    background-repeat: no-repeat;
    background-position: center 95%;
    background-size: cover;
}

/* 背景画像の上に暗いレイヤーを重ねる */
.lp-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(51, 51, 51, 0.3);
}

.lp-intro__inner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: min(100%, 800px);
    margin: 0 auto;
    padding: 40px 50px;
    background: rgba(255, 255, 255, 0.88);
}

.lp-section-title {
    margin: 0 0 25px;
    color: #c40000;
    font-size: 24px;
    line-height: 1.5;
    text-align: center;
}

.lp-intro__text {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.9;
}

.lp-intro__text .text1 {
    font-size: 20px;
    line-height: 1.6em;
}

.lp-intro__text .text2 {
    font-size: 16px;
    line-height: 1.6em;
}

.lp-intro__text ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.lp-intro__text li {
    color: #0068b7;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6em;
}


/* =========================================================
   講座詳細
========================================================= */

.lp-details {
    padding: 40px 20px;
}

.course-info {
    width: 100%;
    margin: 0;
}

.course-info__row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 0;
    border-bottom: 1px solid #ddd;
}

/* スケジュール説明後の「対象」の上線 */
.course-info__row--border-top {
    border-top: 1px solid #ddd;
}

/* 最後の項目には下線を表示しない */
.course-info__row:last-child {
    border-bottom: none;
}

.course-info__term {
    flex: 0 0 80px;
    margin: 0;
    color: #0071ce;
    font-weight: 700;
}

.course-info__content {
    flex: 1;
    margin: 0;
    padding-left: 18px;
    border-left: 4px solid #0071ce;
    font-size: 15px;
    line-height: 1.8;
}

.notice_1 {
    margin-bottom: 40px;
}


/* =========================================================
   タイムスケジュール表
========================================================= */

.lp-schedule {
    width: 100%;
    overflow-x: auto;
}

.lp-schedule__table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
    line-height: 1.4;
}

.lp-schedule__table th,
.lp-schedule__table td {
    padding: 4px 8px;
    border: 1px solid #cfcfcf;
    vertical-align: middle;
}

.lp-schedule__table th {
    background: #0060bb;
    color: #fff;
    text-align: center;
}

.lp-schedule__table th:first-child,
.lp-schedule__table td:first-child {
    width: 26%;
}

.lp-schedule__table td:first-child {
    background: #0060bb;
    color: #fff;
}

.lp-schedule__table td:nth-child(2) {
    background: #fff;
    color: #111;
}

.lp-schedule__table td span {
    white-space: nowrap;
}


/* =========================================================
   申込みエリア
========================================================= */

.lp-application {
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #fafaed;
}

.lp-section-heading {
    color: #0071ce;
    font-size: 24px;
    text-align: center;
}

.lp-application__flow {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin-bottom: 50px;
    padding: 38px 38px 28px;
    border-radius: 30px;
    background-color: #ffe8ac;
}

.lp-application__flow h3,
.lp-form h3 {
    margin: 0;
    font-size: 18px;
    text-align: center;
}


/* =========================================================
   申込みの流れ
========================================================= */

.flow-list {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.flow-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.flow-list__number {
    flex: 0 0 2em;
}

.flow-list__text {
    flex: 1;
}


/* =========================================================
   申込みフォーム
========================================================= */

.lp-form h3 {
    margin-bottom: 40px;
}

.lp-form__embed {
    width: 100%;
}

.lp-form__embed iframe {
    display: block;
    width: 100%;
    height: 600px;
    border: 0;
}

.lp-form__fallback {
    margin-top: 15px;
    text-align: center;
}


/* =========================================================
   フッター
========================================================= */

.lp-footer {
    padding-top: 10px;
    padding-bottom: 30px;
    background: #0060bb;
}

.lp-footer p {
    color: #fff;
    font-size: 14px;
    text-align: center;
}


/* =========================================================
   スマートフォン表示
========================================================= */

@media (max-width: 767px) {

    /* 改行表示の切り替え */
    .br_sp {
        display: block;
    }

    .br_pc {
        display: none;
    }


    /* メインビジュアル */
    .lp-hero {
        min-height: 360px;
        padding-right: 50px;
        padding-left: 50px;
        background-position: 80% center;
    }

    .lp-hero__inner {
        width: calc(100% - 30px);
    }

    .lp-hero__title {
        width: 100%;
        padding: 14px 20px;
        font-size: 24px;
    }


    /* 講座バナー */
    .lp-banner {
        padding-top: 0;
        padding-bottom: 0;
    }


    /* 講座概要 */
    .lp-intro {
        padding: 0;
        background-position: 70% 95%;
    }

    .lp-intro__inner {
        max-width: 100%;
        padding-right: 5%;
        padding-left: 5%;
        background: rgba(255, 255, 255, 0.7);
    }

    .lp-section-title {
        font-size: 18px;
    }

    .lp-intro__text .text1 {
        font-size: 16px;
    }

    .lp-intro__text .text2 {
        font-size: 14px;
    }

    .lp-intro__text li {
        font-size: 16px;
    }


    /* 講座詳細 */
    .lp-details {
        padding-bottom: 20px;
    }

    .course-info__row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0 0 22px;
        border-bottom: none;
    }

    .course-info__row--border-top {
        border-top: none;
    }

    .course-info__term {
        flex: auto;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #0060bb;
        color: #fff;
        text-align: center;
    }

    .course-info__content {
        flex: auto;
        width: 100%;
        padding: 0;
        border-left: none;
    }

    .course-info__content p {
        margin: 0;
    }


    /* タイムスケジュール表 */
    .lp-schedule__table {
        font-size: 12px;
    }

    .lp-schedule__table th,
    .lp-schedule__table td {
        padding: 5px 6px;
    }


    /* 申込みエリア */
    .lp-application {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .lp-application .lp-container {
        width: 90%;
    }

    .lp-application__flow {
        margin-right: auto;
        margin-left: auto;
        padding: 15px 20px;
        border-radius: 20px;
    }

    .flow-list {
        margin-top: 16px;
    }

}