/* 文字コードを指定 */
@charset "UTF-8";

/* sanitize.cssを読み込み */
@import url(sanitize.css);

/* ページ全体に関わる設定 */
body {
    /* 文字系（フォント・色・行の高さ） */
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 16px;
    line-height: 1.6;

    /* 背景色 */
    /* background-color: #fafafa; */
    background-color: #ffffff;

    /* 外側の要素に対する余白系 */
    margin: 0;
}

/* 全てのaタグに対して調整 */
a {
    /* アンダーラインを削除 */
    text-decoration: none;
}

section {
    /* bodyに対してsectionを中央揃え */
    margin: 0 auto;
    padding: 0;

    display: flex;
    flex-direction: column;

}

.first-view {
    padding: 0px;
    margin: 0;
}

.first-view .img-with-text {
    position: relative;

    display: flex;
    width: 100%;
    height: 700px;
}

.first-view .img-with-text .color-block {
    width: 13%; /* 左30%の幅 */
    background-color: #f08340; /* アクセントカラー */
    /* background-color: #f06815; */
    /* background-color: #FFF6DB; */
    height: 100%;
}

.first-view .img-with-text img {
    width: 87%;
    height: 100%;
    object-fit: cover;
    /* 画像自体をぼんやりさせる */
    /* filter: blur(5px); */
    position: absolute;
    right: 0;
    /* background-color: rgba(0, 0, 0, 0.8); */
}

.first-view .img-with-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* 黒色の透過度を調整 */
    /* background: rgba(0, 0, 0, 0.12); */
     /* 画像より前面に表示させる */
    z-index: 1;
}


.first-view .img-with-text h1 {
    position: absolute;

    /* top: 30%; */
    bottom: 25%;
    left: 7%;
    color: #fff;
    /* color: black; */
    font-size: 54px;
    line-height: 1.4;
    
    /* font-family: 'Roboto', sans-serif; */
    font-family: 'Noto Sans JP', sans-serif;

    z-index: 3;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);

}

@media screen and (max-width: 1200px) {
    .first-view .img-with-text h1 {
        font-size: 46px;
        line-height: 1.4;
    }
}

@media screen and (max-width: 1000px) {
    .first-view .img-with-text h1 {
        font-size: 36px;
    }
}

@media screen and (max-width: 768px) {
    .first-view .img-with-text {
        height: 500px;
    }
    .first-view .img-with-text h1 {
        font-size: 24px;
    }
}

@media screen and (max-width: 480px) {
    .first-view .img-with-text {
        height: 400px;
    }

    .first-view .img-with-text h1 {
        left: 6%;
        font-size: 18px;
        line-height: 1.3;
    }
}



/* 誘い文 */
.invitation {
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;

    background-color: #FFF6DB;
}

.invitation .invitation-header {
    padding: 0;
    padding-top: 60px;
    padding-bottom: 60px;

    margin: 0 auto;
    
    text-align: center;
}

.invitation .invitation-header h2 {
    margin: 0;
    padding: 0;

    color: #f08340;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 40px;
    
}

.invitation .invitation-body {
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
}

.invitation .invitation-body .invitation-cards {
    display: flex;
    flex-direction: row;
    /*通常の折り返し*/
    flex-wrap: wrap; 
    /* カードを均等に */
    justify-content: center;
    /*高さ指定されていないものは高さが一番高いものに合わせる*/
    align-items: stretch;

    gap: 20px;

}

.invitation .invitation-body .invitation-cards .invitation-card {
    padding: 0;
    margin: 0;

    width: 32%;
    
    display: flex;
    flex-direction: column;

    text-align: center;
}

.invitation .invitation-body .invitation-cards .invitation-card .card-image {
    padding: 0;
    margin: 0 auto;
    
    width: 62%;
    text-align: center;
}

.invitation .invitation-body .invitation-cards .invitation-card .card-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

.invitation .invitation-body .invitation-cards .invitation-card .card-text {
    padding: 0;
    padding-top: 20px;
    margin: 0;
}

.invitation .invitation-body .invitation-cards .invitation-card .card-text h3 {
    padding: 0;
    margin: 0;

    font-size: 24px;

    color: #333;
    font-family: 'Noto Sans JP', sans-serif;
}

.invitation .invitation-body .invitation-cards .invitation-card .card-text p {
    padding: 0;
    margin: 0;
    margin-top: 8px;
    font-size: 18px;

    color: #333;
    font-family: 'Noto Sans JP', sans-serif;
}

.invitation .invitation-body .invitaiton-text {
    padding: 0;
    padding-top: 60px;
    padding-bottom: 100px;
    margin: 0;

    display: flex;
    flex-direction: column;

    text-align: center;

}

.invitation .invitation-body .invitaiton-text h3 {
    padding: 0;
    margin: 0;

    font-size: 30px;
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
}

.invitation .invitation-body .invitaiton-text h2 {
    padding: 0;
    margin: 0;
    margin-top: 32px;

    font-size: 48px;
    color: #f08340;
    font-family: 'Noto Sans JP', sans-serif;
}

.invitation .invitation-body .invitaiton-text p {
    padding: 0;
    margin: 0;
    margin-top: 40px;

    font-size: 24px;

    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
}

/* 1024pxから1200pxまで */
@media screen and (max-width: 1200px) {
    .invitation .invitation-header {
        padding-top: 52px;
        padding-bottom: 52px;
    }
    .invitation .invitation-header h2 {
        font-size: 38px;
    }
    .invitation .invitation-body .invitation-cards {
        gap: 28px;
    }
    .invitation .invitation-body .invitation-cards .invitation-card {
        width: 30%;
    }
    .invitation .invitation-body .invitation-cards .invitation-card .card-text h3 {
        font-size: 20px;
    }
    .invitation .invitation-body .invitation-cards .invitation-card .card-text p {
        font-size: 16px;
    }
    .invitation .invitation-body .invitaiton-text h3 {
        font-size: 28px;
    }
    .invitation .invitation-body .invitaiton-text p {
        font-size: 22px;
    }
}

@media screen and (max-width: 1000px) {
    .invitation .invitation-header {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .invitation .invitation-header h2 {
        font-size: 36px;
    }
    .invitation .invitation-body .invitation-cards {
        gap: 20px;
    }
    .invitation .invitation-body .invitation-cards .invitation-card {
        width: 45%;
    }
    .invitation .invitation-body .invitation-cards .invitation-card .card-text h3 {
        font-size: 20px;
    }
    .invitation .invitation-body .invitation-cards .invitation-card .card-text p {
        font-size: 16px;
    }
    .invitation .invitation-body .invitaiton-text h3 {
        font-size: 26px;
    }
    .invitation .invitation-body .invitaiton-text p {
        font-size: 20px;
    }
}

/* タブレットサイズ */
@media screen and (max-width: 768px) {
    .invitation .invitation-header {
        padding-top: 52px;
        padding-bottom: 52px;
    }
    .invitation .invitation-header h2 {
        font-size: 32px;
    }
    .invitation .invitation-body .invitation-cards {
        gap: 24px;
    }
    .invitation .invitation-body .invitation-cards .invitation-card {
        width: 70%;
    }
    .invitation .invitation-body .invitation-cards .invitation-card .card-text h3 {
        font-size: 20px;
    }
    .invitation .invitation-body .invitation-cards .invitation-card .card-text p {
        font-size: 16px;
    }
    .invitation .invitation-body .invitaiton-text {
        padding-bottom: 80px;
    }
    .invitation .invitation-body .invitaiton-text h3 {
        font-size: 24px;
    }
    .invitation .invitation-body .invitaiton-text h2 {
        font-size: 34px;
    }

    .invitation .invitation-body .invitaiton-text p {
        font-size: 18px;
        line-height: 1.8;
    }
    .invitation .invitation-body .invitaiton-text p .break {
        display: block;
    }
}

/* スマホサイズ */

@media screen and (max-width: 480px) {
    .invitation .invitation-header {
        padding-top: 44px;
        padding-bottom: 44px;
    }
    .invitation .invitation-header h2 {
        font-size: 26px;
    }
    .invitation .invitation-body .invitation-cards {
        gap: 24px;
    }
    .invitation .invitation-body .invitation-cards .invitation-card {
        width: 78%;
    }
    .invitation .invitation-body .invitation-cards .invitation-card .card-text h3 {
        font-size: 18px;
    }
    .invitation .invitation-body .invitation-cards .invitation-card .card-text p {
        font-size: 16px;
    }
    .invitation .invitation-body .invitaiton-text {
        padding-bottom: 60px;
    }
    .invitation .invitation-body .invitaiton-text h3 {
        font-size: 20px;
    }
    .invitation .invitation-body .invitaiton-text h2 {
        font-size: 28px;
    }

    .invitation .invitation-body .invitaiton-text p {
        font-size: 16px;
        line-height: 1.6;
    }
}

/* 超スモール */
@media screen and (max-width: 374px) {
    .invitation .invitation-header {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .invitation .invitation-header h2 {
        font-size: 22px;
    }
    .invitation .invitation-body .invitation-cards {
        gap: 24px;
    }
    .invitation .invitation-body .invitation-cards .invitation-card {
        width: 78%;
    }
    .invitation .invitation-body .invitation-cards .invitation-card .card-text h3 {
        font-size: 16px;
    }
    .invitation .invitation-body .invitation-cards .invitation-card .card-text p {
        font-size: 13px;
    }
    .invitation .invitation-body .invitaiton-text {
        padding-bottom: 60px;
    }
    .invitation .invitation-body .invitaiton-text h3 {
        font-size: 18px;
    }
    .invitation .invitation-body .invitaiton-text h2 {
        font-size: 26px;
    }

    .invitation .invitation-body .invitaiton-text p {
        font-size: 13px;

    }
}



/* 得られることに関する */

.value {
    margin: 0;
    margin-top: 20px;
    padding: 0;

    display: flex;
    flex-direction: column;
}

.value .value-header {
    position: relative;
    padding-left: 32px;
}

.value .value-header:before {
    /* 必須：疑似要素に内容を追加（ここでは空） */
    content: "";
    position: absolute;
    /* 縦棒の左端からの位置 */
    left: 0;
    /* 縦棒の上端 */
    top: 0;
    /* 縦棒の下端 */
    bottom: 0;
     /* 縦棒の太さ */
    width: 5px;
     /* 縦棒の色 */
    background-color: #f08340;
}

.value .value-header h2 {
    margin: 0;

    font-size: 28px;
    color: #f08340;
    font-family: 'Noto Sans JP';
}

.value .value-header p {
    margin: 0;

    font-size: 16px;
    color: #f08340;
    font-family: 'Noto Sans JP';
}

.value .value-body {
    margin: 0;
    margin-top: 32px;
    padding: 0;

    display: flex;
    flex-direction: column;

    /* アイテムを中央揃え */
    align-items: center;
    /* コンテンツを中央揃え */
    justify-content: center;

    /* カード間のスペース */
    gap: 20px;

}

.value .value-body .value-card {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    /* アイテムを中央揃え */
    align-items: center;
    /* コンテンツを中央揃え */
    justify-content: center;

    /* テキストと写真のスペース */
    gap: 48px;
}

/* 2番目のカードだけ例外処理 */
.value .value-body .value-card:nth-child(2) {
     /* 画像を左、テキストを右に配置 */
    flex-direction: row-reverse;
}

.value .value-body .value-card .value-text {
    padding: 0;
    padding-bottom: 36px;
    margin: 0;

    display: flex;
    flex-direction: column;

    /* テキストエリアを柔軟に調整 */
    width: 47%;
    text-align: center;

}

.value .value-body .value-card .value-text .value-text-number {
    text-align: left;
    padding: 0;
    padding-left: 16px;
    margin: 0;

    /* 番号のフォントサイズと色を指定 */
    font-size: 100px;
    /* 薄グレー色 */
    color: #f0f0f0;
    font-family: 'Noto Sans JP', sans-serif;

}


.value .value-body .value-card .value-text .value-text-header {
    padding: 0;
    margin: 0;

    color: #f08340;
    font-size: 32px;
}

.value .value-body .value-card .value-text p {
    padding: 0;
    margin: 0;
    margin-top: 20px;

    font-size: 18px;
}

.value .value-body .value-card .value-image {
     /* 画像エリアを柔軟に調整 */
    width: 47%;
    max-width: 500px;
    height: auto;
    display: flex;
    /* 画像を中央に配置 */
    justify-content: center;
     /* 画像を垂直方向の中央に配置 */
    align-items: center;

}

.value .value-body .value-card .value-image img {
    /* 画像の幅を親要素に合わせる */
    width: 100%;
     /* 画像の高さを自動調整 */
    height: 100%;
     /* 画像のアスペクト比を保持 */
    object-fit: cover;

    border-radius: 8px;
}

/* タブレットサイズまで */
@media screen and (max-width: 1024px) {
    .value .value-body {
        gap: 12px;
    }
    .value .value-body .value-card {
        gap: 32px;
    }

    .value .value-body .value-card .value-text {
        width: 45%;
    }

    .value .value-body .value-card .value-image {
        width: 45%;
    }
    .value .value-body .value-card .value-text .value-text-number {
        font-size: 92px;
        padding-left: 8px;
    }

    .value .value-body .value-card .value-text .value-text-header {
        font-size: 28px;
    }
    .value .value-body .value-card .value-text p {
        font-size: 16px;
    }
    .value .value-body .value-card .value-text p .break {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .value-header {
        padding-left: 32px;
    }

    .value-header h2 {
        font-size: 24px;
    }

    .value-header p {
        font-size: 12px;
    }

    .value-header:before {
        left: 8px;
    }


    .value .value-body {
        gap: 8px;
    }
    .value .value-body .value-card {
        flex-direction: column;
        gap: 0;
    }

    .value .value-body .value-card:nth-child(2) {
        flex-direction: column;
    }

    .value .value-body .value-card .value-text {
        width: 90%;
    }
    .value .value-body .value-card .value-image {
        width: 75%;
        max-width: none;
    }

    .value .value-body .value-card .value-text .value-text-number {
        font-size: 80px;
        padding-left: 0;
    }

    .value .value-body .value-card .value-text .value-text-header {
        font-size: 26px;
    }
    .value .value-body .value-card .value-text p {
        font-size: 17px;
    }
    .value .value-body .value-card .value-text p .break {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .value .value-header {
        padding-left: 20px;
    }

    .value .value-header h2 {
        font-size: 20px;
    }

    .value .value-header p {
        font-size: 12px;
    }

    .value-header:before {
        left: 4px;
    }

    .value .value-body {
        gap: 12px;
    }
    .value .value-body .value-card {
        flex-direction: column;
        gap: 0;
    }

    .value .value-body .value-card:nth-child(2) {
        flex-direction: column;
    }

    .value .value-body .value-card .value-text {
        width: 90%;
    }
    .value .value-body .value-card .value-image {
        width: 70%;
    }

    .value .value-body .value-card .value-text .value-text-number {
        font-size: 68px;
        padding-left: 0;
    }

    .value .value-body .value-card .value-text .value-text-header {
        font-size: 24px;
        text-align: center;
    }
    .value .value-body .value-card .value-text p {
        font-size: 15px;

        /* 中央揃え左寄せ */
        /* margin: 20px auto 0px auto; */
        /* text-align: left; */
    }
    .value .value-body .value-card .value-text p .break {
        display: block;
    }
    .value .value-body .value-card .value-text p .comma {
        display: none;
    }
}


/* 講座内容に関する */

.contents {
    margin: 0;
    margin-top: 32px;
    padding: 0;

    display: flex;
    flex-direction: column;
}


.contents .contents-header {
    position: relative;
    padding-left: 32px;
}


.contents .contents-header:before {
    /* 必須：疑似要素に内容を追加（ここでは空） */
    content: "";
    position: absolute;
    /* 縦棒の左端からの位置 */
    left: 0;
    /* 縦棒の上端 */
    top: 0;
    /* 縦棒の下端 */
    bottom: 0;
     /* 縦棒の太さ */
    width: 5px;
     /* 縦棒の色 */
    background-color: #f08340;
}


.contents .contents-header h2 {
    margin: 0;

    font-size: 28px;
    color: #f08340;
    font-family: 'Noto Sans JP';
}

.contents .contents-header p {
    margin: 0;

    font-size: 16px;
    color: #f08340;
    font-family: 'Noto Sans JP';
}


.contents .contents-body {
    margin: 0;
    padding: 0;

    padding-top: 32px;
    padding-bottom: 32px;

    display: flex;
    /*カードを横並びにする*/
    flex-direction: row;
    /*通常の折り返し*/
    flex-wrap: wrap; 
    /* カードを均等に */
    justify-content: center;
    /*高さ指定されていないものは高さが一番高いものに合わせる*/
    align-items: stretch;

    gap: 28px;

    /* background-color: red; */
}

.contents .contents-body .contents-card {
    display: flex;
    flex-direction: column;
    
    padding: 0;
    padding-bottom: 12px;
    margin: 0;

    /* カード幅 */
    width: 44%;

    text-align: center;

    background-color: #FFF6DB;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;

}

.contents .contents-body .contents-card .contents-title {
    padding: 0;
    margin: 0;
    padding-top: 36px;
    padding-bottom: 24px;

    display: flex;
    flex-direction: column;
}


.contents .contents-body .contents-card .contents-title h3 {
    margin: 0;
    padding: 0;

    font-size: 28px;
    color: #f08340;
    font-weight: bold;

    text-align: center;
}

.contents .contents-body .contents-card .contents-image {
    padding: 0;
    margin: 0 auto;
    /* margin-top: 20px;
    margin-bottom: 16px; */
    
    width: 75%;
    padding-top: 56.25%;

    position: relative;
    overflow: hidden;
    
}

.contents .contents-body .contents-card .contents-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    border-radius: 5px;
}

.contents .contents-body .contents-card .contents-text {
    margin: 0;
    padding: 0;

    padding-top: 12px;

    display: flex;
    text-align: center;
}

.contents .contents-body .contents-card .contents-text p {
    margin: 0 auto;
    padding: 0;
    padding-top: 16px;
    padding-bottom: 16px;

    font-size: 17px;
    line-height: 1.6;

    text-align: left;
}

/* 1200px - 1000px */
@media screen and (max-width: 1200px) {
    .contents .contents-body .contents-card .contents-title {
        padding-top: 24px;
        padding-bottom: 16px;
    }
    .contents .contents-body .contents-card .contents-title h3 {
        font-size: 26px;
    }
    .contents .contents-body .contents-card .contents-text p {
        font-size: 15px;
    }
    .contents .contents-body .contents-card .contents-text {
        padding-top: 4px;
    }
}

@media screen and (max-width: 985px) {

    .contents .contents-body {
        flex-direction: column;
    /* カードを均等に */
        justify-content: center;
        /*高さ指定されていないものは高さが一番高いものに合わせる*/
        align-items: center;
    }
    .contents .contents-body .contents-card .contents-text p {
        font-size: 16px;
    }
    .contents .contents-body .contents-card {
        width: 65%;
    }
}

@media screen and (max-width: 768px) {
    .contents-header {
        padding-left: 32px;
    }
    .contents-header h2 {
        font-size: 24px;
    }
    .contents-header p {
        font-size: 12px;
    }
    .contents-header:before {
        left: 8px;
    }


    .contents .contents-body .contents-card .contents-title h3 {
        font-size: 24px;
    }
    .contents .contents-body .contents-card .contents-text p .break {
        display: block;
    }
    .contents .contents-body .contents-card {
        width: 77%;
    }
    .contents .contents-body .contents-card .contents-title {
        padding-top: 28px;
        padding-bottom: 16px;
    }
}



@media screen and (max-width: 500px) {
    .contents .contents-header {
        padding-left: 20px;
    }

    .contents .contents-header h2 {
        font-size: 20px;
    }

    .contents .contents-header p {
        font-size: 12px;
    }

    .contents-header:before {
        left: 4px;
    }


    .contents .contents-body .contents-card {
        width: 88%;
    }
    .contents .contents-body .contents-card .contents-title {
        padding-top: 16px;
        padding-bottom: 12px;
    }
    .contents .contents-body .contents-card .contents-title h3 {
        font-size: 20px;
    }
    .contents .contents-body .contents-card .contents-text p {
        padding-top: 12px;
        font-size: 13px;
    }
    .contents .contents-body .contents-card .contents-text p .break {
        display: block;
    }
}

@media screen and (max-width: 375px) {
    .contents .contents-body .contents-card .contents-text p {
        font-size: 12px;
    }
}



/* 講師紹介 */

.facilitator {
    margin: 0;
    padding: 0;
    padding-top: 32px;

    display: flex;
    flex-direction: column;
}

.facilitator .facilitator-header {
    position: relative;
    padding-left: 32px;
}


.facilitator .facilitator-header:before {
    /* 必須：疑似要素に内容を追加（ここでは空） */
    content: "";
    position: absolute;
    /* 縦棒の左端からの位置 */
    left: 0;
    /* 縦棒の上端 */
    top: 0;
    /* 縦棒の下端 */
    bottom: 0;
     /* 縦棒の太さ */
    width: 5px;
     /* 縦棒の色 */
    background-color: #f08340;
}


.facilitator .facilitator-header h2 {
    margin: 0;

    font-size: 28px;
    color: #f08340;
    font-family: 'Noto Sans JP';
}

.facilitator .facilitator-header p {
    margin: 0;

    font-size: 16px;
    color: #f08340;
    font-family: 'Noto Sans JP';
}

.facilitator .facilitator-body {
    margin: 0;
    padding: 0;

    padding-top: 40px;

    display: flex;
    flex-direction: row;

    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: stretch;
    text-align: center;

    gap: 42px;
}

.facilitator .facilitator-body .facilitator-name {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;

    width: 35%;
}

.facilitator .facilitator-body .facilitator-name h3 {
    padding: 0;
    margin: 0;

    font-size: 24px;
    color: #f08340;

    text-align: left;
}

.facilitator .facilitator-body .facilitator-name .facilitator-image {
    padding: 0;
    margin: 0;

    margin-top: 20px;
    
    width: 100%;
    padding-top: 80%;

    position: relative;
    text-align: left;
}

.facilitator .facilitator-body .facilitator-name .facilitator-image img {
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    object-fit: cover;

    border-radius: 8px;
}

.facilitator .facilitator-body .facilitator-text {
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: stretch;
    text-align: center;
    width: 45%;
}

.facilitator .facilitator-body .facilitator-text p {
    font-size: 17px;
    text-align: left;
}

@media screen and (max-width: 1200px) {
    .facilitator .facilitator-body .facilitator-text p {
        font-size: 16px;
    }
}

@media screen and (max-width: 1024px) {
    .facilitator .facilitator-body .facilitator-text p {
        padding: 0;
        margin: 0;

        margin-top: 12px;
        margin-bottom: 12px;

        font-size: 14px;
    }

    .facilitator .facilitator-body {
        gap: 32px;
    }
    .facilitator .facilitator-body .facilitator-name h3 {
        font-size: 20px;
    }
    .facilitator .facilitator-body .facilitator-text {
        width: 50%;
    }
    .facilitator .facilitator-body .facilitator-text p {
        margin: 0 auto;
        margin-bottom: 32px;

        font-size: 16px;
    }
    .facilitator .facilitator-body .facilitator-text p .break {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .facilitator-header {
        padding-left: 32px;
    }

    .facilitator-header h2 {
        font-size: 24px;
    }

    .facilitator-header p {
        font-size: 12px;
    }

    .facilitator-header:before {
        left: 8px;
    }

    .facilitator .facilitator-body {
        flex-direction: column;
        gap: 4px;
    }
    .facilitator .facilitator-body .facilitator-name {
        width: 80%;
    }
    .facilitator .facilitator-body .facilitator-name h3 {
        font-size: 18px;
    }
    .facilitator .facilitator-body .facilitator-text {
        width: 90%;
    }
    .facilitator .facilitator-body .facilitator-text p {
        margin: 0;
        margin-bottom: 12px;
    }
    .facilitator .facilitator-body .facilitator-text p .break {
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .facilitator .facilitator-header {
        padding-left: 20px;
    }

    .facilitator .facilitator-header h2 {
        font-size: 20px;
    }

    .facilitator .facilitator-header p {
        font-size: 12px;
    }

    .facilitator-header:before {
        left: 4px;
    }

    .facilitator .facilitator-body {
        gap: 4px;
    }
    .facilitator .facilitator-body .facilitator-name {
        width: 80%;
    }
    .facilitator .facilitator-body .facilitator-name h3 {
        font-size: 18px;
    }
    .facilitator .facilitator-body .facilitator-text {
        width: 90%;
    }
    .facilitator .facilitator-body .facilitator-text p {
        margin: 0;
        margin-bottom: 12px;
        font-size: 14px;
    }
    .facilitator .facilitator-body .facilitator-text p .break {
        display: block;
    }
}

@media screen and (max-width: 375px) {
    .facilitator .facilitator-body .facilitator-text p {
        font-size: 13px;
    }
}



/* 受講者の声 */

.voice {
    margin: 0;
    margin-top: 32px;
    padding: 0;

    display: flex;
    flex-direction: column;
}

.voice .voice-header {
    position: relative;
    padding-left: 32px;
}

.voice .voice-header:before {
    /* 必須：疑似要素に内容を追加（ここでは空） */
    content: "";
    position: absolute;
    /* 縦棒の左端からの位置 */
    left: 0;
    /* 縦棒の上端 */
    top: 0;
    /* 縦棒の下端 */
    bottom: 0;
     /* 縦棒の太さ */
    width: 5px;
     /* 縦棒の色 */
    background-color: #f08340;
}

.voice .voice-header h2 {
    margin: 0;

    font-size: 28px;
    color: #f08340;
    font-family: 'Noto Sans JP';
}

.voice .voice-header p {
    margin: 0;

    font-size: 16px;
    color: #f08340;
    font-family: 'Noto Sans JP';
}

.voice .voice-body {
    margin: 0;
    padding: 0;
    margin-top: 62px;

    display: flex;
    flex-direction: row;

    /*通常の折り返し*/
    flex-wrap: wrap; 
    /* カードを均等に */
    justify-content: center;
    /*高さ指定されていないものは高さが一番高いものに合わせる*/
    align-items: stretch;

    gap: 20px;
}

.voice .voice-body .voice-card {
    width: 44%;
    padding: 0;
    margin: 0;

    /* margin-left: 16px;
    margin-right: 16px; */
    /* margin-top: 0;
    margin-bottom: 28px; */

    display: flex;
    flex-direction: column;

    align-items: center;
}

.voice .voice-body .voice-card .voice-image {
    width: 60%;

    border: 6px solid #f08340;
    padding-top: 60%;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
}

.voice .voice-body .voice-card .voice-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.voice .voice-body .voice-card .voice-text {
    padding: 0;
    margin: 0;
    margin-top: 24px;
}

.voice .voice-body .voice-card .voice-text h3 {
    padding: 0;
    margin: 0;

    text-align: left;
    text-align: center;

    font-size: 18px;
}

.voice .voice-body .voice-card .voice-text h4 {
    padding: 0;
    margin: 0;
    margin-top: 8px;

    text-align: left;
    text-align: center;
    font-size: 20px;
}

.voice .voice-body .voice-card .voice-text p {
    padding: 0;
    margin: 0;

    margin-top: 16px;

    font-size: 17px;
    line-height: 1.6;
}

@media screen and (max-width: 1200px) {
    /* .voice .voice-body .voice-card .voice-text {
        padding: 0;
        margin: 0;
        margin-top: 24px;
    } */

    .voice .voice-body .voice-card .voice-text h3 {
        font-size: 16px;
    }

    .voice .voice-body .voice-card .voice-text h4 {
        margin-top: 8px;

        font-size: 18px;
    }

    .voice .voice-body .voice-card .voice-text p {
        margin-top: 12px;
        font-size: 15px;
    }
}

@media screen and (max-width: 900px) {
    .voice .voice-body {
        flex-direction: column;
        align-items: center;

        gap: 36px;
    }
    .voice .voice-body .voice-card {
        width: 75%;
    }
    .voice .voice-body .voice-card .voice-image {
        width: 45%;
        padding-top: 45%;
    }
    .voice .voice-body .voice-card .voice-text {
        margin-top: 28px;
    }
    .voice .voice-body .voice-card .voice-text h3 {
        font-size: 18px;
    }
    .voice .voice-body .voice-card .voice-text h4 {
        margin-top: 8px;
        font-size: 20px;
    }
    .voice .voice-body .voice-card .voice-text p {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .voice-header {
        padding-left: 32px;
    }

    .voice-header h2 {
        font-size: 24px;
    }

    .voice-header p {
        font-size: 12px;
    }

    .voice-header:before {
        left: 8px;
    }


    .voice .voice-body {
        gap: 20px;
    }
    .voice .voice-body .voice-card {
        width: 80%;
    }
    .voice .voice-body .voice-card .voice-image {
        width: 45%;
        padding-top: 45%;
    }
    .voice .voice-body .voice-card .voice-text {
        margin-top: 16px;
    }
    .voice .voice-body .voice-card .voice-text h3 {
        font-size: 16px;
    }
    .voice .voice-body .voice-card .voice-text h4 {
        margin-top: 8px;
        font-size: 18px;
    }
    .voice .voice-body .voice-card .voice-text p {
        font-size: 15px;
    }
}

@media screen and (max-width: 500px) {
    .voice .voice-header {
        padding-left: 20px;
    }

    .voice .voice-header h2 {
        font-size: 20px;
    }

    .voice .voice-header p {
        font-size: 12px;
    }

    .voice-header:before {
        left: 4px;
    }

    .voice .voice-body {
        margin-top: 28px;
        gap: 20px;
    }
    .voice .voice-body .voice-card {
        width: 85%;
    }
    .voice .voice-body .voice-card .voice-image {
        width: 45%;
        padding-top: 45%;
    }
    .voice .voice-body .voice-card .voice-text {
        margin-top: 16px;
    }
    .voice .voice-body .voice-card .voice-text h3 {
        font-size: 14px;
    }
    .voice .voice-body .voice-card .voice-text h4 {
        margin-top: 8px;
        font-size: 16px;
    }
    .voice .voice-body .voice-card .voice-text p {
        font-size: 13px;
        line-height: 1.4;
    }
}

@media screen and (max-width: 375px) {
    .voice .voice-body {
        margin-top: 24px;
    }
    .voice .voice-body .voice-card {
        width: 85%;
    }
    .voice .voice-body .voice-card .voice-image {
        width: 45%;
        padding-top: 45%;
    }
    .voice .voice-body .voice-card .voice-text {
        margin-top: 12px;
    }
    .voice .voice-body .voice-card .voice-text h3 {
        font-size: 14px;
    }
    .voice .voice-body .voice-card .voice-text h4 {
        margin-top: 4px;
        font-size: 16px;
    }
    .voice .voice-body .voice-card .voice-text p {
        font-size: 12px;
    }
}

/* 受講開始までの流れ */

.flow {
    margin: 0;
    padding: 0;
    padding-top: 32px;
    padding-bottom: 72px;

    display: flex;
    flex-direction: column;
}


.flow .flow-header {
    position: relative;
    padding-left: 32px;
}


.flow .flow-header:before {
    /* 必須：疑似要素に内容を追加（ここでは空） */
    content: "";
    position: absolute;
    /* 縦棒の左端からの位置 */
    left: 0;
    /* 縦棒の上端 */
    top: 0;
    /* 縦棒の下端 */
    bottom: 0;
     /* 縦棒の太さ */
    width: 5px;
     /* 縦棒の色 */
    background-color: #f08340;
}


.flow .flow-header h2 {
    margin: 0;

    font-size: 28px;
    color: #f08340;
    font-family: 'Noto Sans JP';
}

.flow .flow-header p {
    margin: 0;

    font-size: 16px;
    color: #f08340;
    font-family: 'Noto Sans JP';
}



.flow .flow-body {
    padding: 0;
    margin: 0;

    margin-top: 64px;

    display: flex;
    flex-direction: row;

    align-items: center;
    justify-content: center;

    align-items: stretch;

}

.flow .flow-body .flow-step {
    width: 22%;

    margin: 0;
    padding: 0;

    margin-left: 28px;
    margin-right: 28px;
    
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #FFF6DB;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    border-radius: 8px;

}

.flow .flow-body .flow-step .step-number {
    margin: 0;
    padding: 0;
    margin-left: 12px;
    margin-right: 12px;

    position: absolute;
    top: -24px; /* 番号をカードの上部に少し重ねる */
    left: 8px;
    background-color: #f08340;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

    z-index: 3;
}

.flow .flow-body .flow-step .flow-card {
    margin: 0;
    padding: 0px;
    padding-top: 32px;
    padding-bottom: 32px;

    width: 100%;

    display: flex;
    flex-direction: column;
}

.flow .flow-body .flow-step .flow-card .card-image {
    width: 70%;

    padding-top: 66%;

    margin: 0 auto;

    overflow: hidden;
    position: relative;
    text-align: center;
}

.flow .flow-body .flow-step .flow-card .card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;

    border-radius: 8px;
}

.flow .flow-body .flow-step .flow-card p {
    padding: 0;
    margin: 0;
    margin-top: 36px;
    
    text-align: center;

    font-size: 16px;
}

.flow .flow-body .arrow {
    margin: auto 0;
    padding: 0;

    align-items: center;
    justify-content: center;
}

.flow .flow-body .arrow .fa-solid {
    font-size: 32px;
}


@media screen and (max-width: 1024px) {
    .flow .flow-body .flow-step .step-number {
        top: -24px; /* 番号をカードの上部に少し重ねる */
        left: 4px;
        font-size: 18px;
    }
    
    .flow .flow-body .flow-step .flow-card p {
        font-size: 15px;
    }

    .flow .flow-body .flow-step {
        margin-left: 20px;
        margin-right: 20px;
    }
    
    .flow .flow-body .arrow .fa-solid {
        font-size: 28px;
    }
}

@media screen and (max-width: 768px) {
    .flow {
        padding-bottom: 72px;
    }
    .flow-header {
        padding-left: 32px;
    }

    .flow-header h2 {
        font-size: 24px;
    }

    .flow-header p {
        font-size: 12px;
    }

    .flow-header:before {
        left: 8px;
    }

    .flow .flow-body {
        margin-top: 36px;
    }
    .flow .flow-body .flow-step {
        width: 30%;
    }
    .flow .flow-body .flow-step .flow-card {
        padding-top: 24px;
        padding-bottom: 24px;

        display: flex;
        flex-direction: column;
    }

    .flow .flow-body .flow-step .step-number {
        top: -20px; /* 番号をカードの上部に少し重ねる */
        left: 0px;
        font-size: 16px;

        width: 35px;
        height: 35px;
    }
    
    .flow .flow-body .flow-step .flow-card p {
        padding: 0;
        margin: 0;
        margin-top: 16px;

        font-size: 14px;
    }

    .flow .flow-body .flow-step {
        margin-left: 8px;
        margin-right: 8px;
    }
    
    .flow .flow-body .arrow .fa-solid {
        font-size: 24px;
    }
}

@media screen and (max-width: 500px) {
    .flow {
        padding-bottom: 32px;
    }
    
    .flow .flow-header {
        padding-left: 20px;
    }

    .flow .flow-header h2 {
        font-size: 20px;
    }

    .flow .flow-header p {
        font-size: 12px;
    }

    .flow-header:before {
        left: 4px;
    }

    .flow .flow-body {
        margin-top: 28px;
    }

    .flow .flow-body .flow-step {
        width: 28%;
    }
    .flow .flow-body .flow-step .flow-card {
        padding-top: 20px;
        padding-bottom: 20px;

        display: flex;
        flex-direction: column;

    }

    .flow .flow-body .flow-step .step-number {
        top: -18px; /* 番号をカードの上部に少し重ねる */
        left: -5px;
        font-size: 14px;

        width: 30px;
        height: 30px;
    }
    
    .flow .flow-body .flow-step .flow-card p {
        padding: 0;
        margin: 0;
        margin-top: 16px;
        
        font-size: 11px;
    }

    .flow .flow-body .flow-step {
        margin-left: 4px;
        margin-right: 4px;
    }
    
    .flow .flow-body .arrow .fa-solid {
        font-size: 20px;
    }
}

@media screen and (max-width: 375px) {
    .flow .flow-body {
        margin-top: 20px;
    }
    .flow .flow-body .flow-step {
        width: 28%;
    }
    .flow .flow-body .flow-step .flow-card {
        padding-top: 20px;
        padding-bottom: 20px;

        display: flex;
        flex-direction: column;

    }

    .flow .flow-body .flow-step .step-number {
        top: -15px; /* 番号をカードの上部に少し重ねる */
        left: -5px;
        font-size: 12px;

        width: 25px;
        height: 25px;
    }
    
    .flow .flow-body .flow-step .flow-card p {
        padding: 0;
        margin: 0;
        margin-top: 16px;
        
        font-size: 9px;
    }

    .flow .flow-body .flow-step {
        margin-left: 4px;
        margin-right: 4px;
    }
    
    .flow .flow-body .arrow .fa-solid {
        font-size: 16px;
    }
}

.form-btn {
    margin: 0px auto;
    padding: 0;
    padding-bottom: 100px;

    text-align: center;
}

.form-btn .btn {
    display: inline-block;

    border-radius: 4px;
    border: 1px solid #f08340;
    padding: 15px 20px;

    background-color: #f08340;
    color: #fff;

    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.btn::after {
    content: '\f105';
    font: var(--fa-font-solid);
    padding-left: 10px;
}

.btn:hover {
    /* 透明度変更 */
    opacity: 0.7;
    /* アニメーション */
    transition: 0.4s;
} 

@media screen and (max-width: 500px) {
    .form-btn .btn {
        font-size: 14px;
        padding: 12px 18px;
    }
}

/* 固定ボタン */

.fixed-button .fixed-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;

    background-color: #f08340;
    color: #fafafa;

    width: 170px; /* 円の直径 */
    height: 170px; /* 円の直径 */
    text-decoration: none;
    font-weight: bold;
    border-radius: 50%; /* 円形にする */

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
    z-index: 1000; /* 必要に応じて調整 */

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 初期状態の影 */

    transition: transform 0.3s, box-shadow 0.3s;
}

.fixed-button .fixed-btn p {
    padding: 0;
    margin: 0;

    font-size: 16px;
}

.fixed-button .fixed-btn i {
    margin-left: 4px; /* アイコンとテキストの間隔を調整 */
}

.fixed-button .fixed-btn:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* ホバー時の影を大きく */
}

@media screen and (max-width: 1024px) {
    .fixed-button .fixed-btn {
        bottom: 16px;
        right: 16px;
        
        width: 150px; /* 円の直径 */
        height: 150px; /* 円の直径 */
    }
    .fixed-button .fixed-btn p {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .fixed-button .fixed-btn {
        bottom: 8px;
        right: 8px;
        
        width: 120px; /* 円の直径 */
        height: 120px; /* 円の直径 */
    }
    .fixed-button .fixed-btn p {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .fixed-button .fixed-btn {
        bottom: 8px;
        right: 8px;
        
        width: 100px; /* 円の直径 */
        height: 100px; /* 円の直径 */
    }
    .fixed-button .fixed-btn p {
        font-size: 12px;
    }
}

/* 著作権 */
footer {
    text-align: center;
    font-size: .8em;
    padding: 5px;
    background-color: #ccc;
}