/* モバイルスタイル */
/* ページタイトル */
.workshop-title {
    text-align: center;
    font-family: Papyrus;
    font-size: 25px;
    margin: 30px 0;
}

.alert {
    background: #ffe0e0;
    border: 1px solid rgb(255, 0, 0, 0.5);
    color: rgb(255, 0, 0, 0.5);
    font-size: 16px;
    font-weight: 1000;
    padding: 10px 5px;
    text-align: center;
    margin-bottom: 20px;
}

/* 説明枠 */
.fullerene-description {
    width: 90%;
    margin: 0 auto;
}

/* 説明　メイン画像 */
.fullerene-description__img {
    width: 100%;
    border-radius: 5px;
}

/* 説明　タイトル */
.fullerene-description__title {
    border-bottom: solid 2px #bbbbbb;
}

.fullerene-description__text {
    margin: 0 0 20px;
}

.fullerene-description__text-itemization {
    background-color: rgb(187, 187, 187, 0.5);
    padding: 10px 0;
    margin: 0;
}

.text-itemization-title {
    font-weight: 700;
    background: linear-gradient(to bottom, #ffffff, #fdf490);
}

.text-itemization-content {
    margin: 0;
}

.text-itemization-content:last-of-type {
    margin-bottom: 20px;
}

/* 説明補足 */
.fullerene-description-supplement {
    text-align: center;
}

.fullerene-description-supplement__img {
    width: 100%;
    height: 300px;
    border-radius: 5px;
}

.fullerene-description-supplement__text {
    color: #a59aca;
    line-height: 40px;
    font-weight: 700;
}

.workshop-info {
    width: 90%;
    margin: 0 auto;
}

/* 各セクションタイトル */
.info-title {
    margin: 20px 0;
    text-align: center;
}

/* メインタイトル */
.info-main-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
}

/* サブタイトル */
.info-sub-title {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

/* 詳細カード枠 */
.making-group__card,
.lecture-group {
    width: 100%;
    margin: 30px auto;
    text-align: center;
    border: solid 2px #bbbbbb;
    border-radius: 5px;
}

/* 詳細画像 */
.making-group__img,
.lecture-group__img {
    width: 250px;
    height: 250px;
    margin: 20px 0;
    border-radius: 5px;
}

.making-group__name,
.lecture-group__name {
    font-size: 20px;
    margin-bottom: 20px;
}

.making-group__price,
.lecture-group__price {
    font-weight: 1000;
    margin: 0;
}

.making-group__price::before,
.lecture-group__price::before {
    content: "￥";
}

.making-group__price::after,
.lecture-group__price::after {
    content: "（税込）";
    font-weight: 400;
}

.making-group__detail,
.lecture-group__detail {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 90%;
    background-color: rgb(187, 187, 187, 0.5);
    margin: 20px auto;
}

/* 注記 */
.making-note,
.lecture-note {
    width: 100%;
    margin: 30px auto;
    background-image: radial-gradient(
        rgba(234, 235, 196, 1),
        rgba(80, 188, 223, 1) 58%,
        rgba(108, 133, 242, 1)
    );
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

/* お支払いについて、キャンセルポリシー */
.payment-info {
    width: 90%;
    margin: 0 auto;
    border-bottom: solid 2px #bbbbbb;
}

.payment-info__details {
    border-top: solid 2px #bbbbbb;
    border-bottom: solid 2px #bbbbbb;
}

.details-title,
.cancel-policy-title,
.application-info__title {
    background-color: rgb(187, 187, 187, 0.5);
    padding: 10px 0;
    margin: 0;
}

/* 申し込み */
.application-info {
    width: 90%;
    margin: 0 auto;
}

.application-info__form-container {
    margin-top: 20px;
}

.form-label-required,
.form-label {
    display: flex;
    align-items: center;
    background-color: rgb(165, 154, 202, 0.3);
    border: solid 2px rgb(165, 154, 202, 0.5);
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    padding: 5px 0 5px 10px;
}

.form-label-required::before {
    content: "必須";
    background-color: rgb(255, 0, 0, 0.5);
    border-radius: 5px;
    color: #ffffff;
    font-size: 12px;
    padding: 5px;
    margin-right: 10px;
}

.form-content,
.form-content-last {
    border-left: solid 2px rgb(165, 154, 202, 0.5);
    border-right: solid 2px rgb(165, 154, 202, 0.5);
    padding: 20px 10px;
    font-size: 16px;
}

.form-input,
.preferred-date-group__input,
.content-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 5px 10px;
    border-radius: 5px;
    border: solid 1px rgb(165, 154, 202);
    font-size: 16px;
}

.preferred-date-group {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.preferred-date-group__label {
    margin: 0 20px 0 0;
}

.preferred-date-label {
    width: 150px;
}

.form-content-last {
    border-bottom: solid 2px rgb(165, 154, 202, 0.5);
}

.gender-radio {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.form-deposit_method {
    text-align: center;
    margin: 0;
}

.form-textarea {
    width: 100%;
    height: 70px;
    padding: 5px 10px;
    border-radius: 5px;
    border: solid 1px rgb(165, 154, 202);
    font-size: 16px;
}

/* 注記 */
.form-note {
    margin: 0;
    font-weight: 700;
}

/* バリデーションエラー */
.error-message {
    margin: 10px 0 0;
    text-align: center;
    color: red;
}

.form-submit {
    width: 100%;
    margin: 30px 0;
    text-align: center;
}

/* 送信ボタン */
.form-submit-button {
    width: 90%;
    padding: 20px 0;
    background: linear-gradient(
        to top,
        #a59aca,
        #cfa7cd,
        #ecc0c0,
        #fcd7a1,
        #fcf5ad,
        #b8da92,
        #a3bce2,
        #a59aca,
        #cfa7cd
    );
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-size: 20px;
    color: #222222;
}

/* 連絡先枠 */
.contact-info {
    text-align: center;
    background-color: #f8f5cf;
    padding: 20px 0;
}

.contact-info__img {
    width: 280px;
    height: 280px;
    margin: 20px;
    border-radius: 5px;
}

.contact-info__text {
    margin: 0;
}

/* タブレットスタイル */
@media screen and (min-width: 768px) {
    /* 補足説明 */
    .fullerene-description-supplement {
        width: 100%;
        display: flex;
        justify-content: space-between;
        text-align: left;
    }

    .fullerene-description-supplement__img {
        width: 50%;
        height: 280px;
    }

    .fullerene-description-supplement__text {
        width: 45%;
        line-height: 30px;
    }

    .making-group__card,
    .lecture-group {
        display: flex;
        justify-content: space-around;
    }

    .making-group__img,
    .lecture-group__img {
        margin: 20px;
    }

    .card-right {
        width: 57%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }

    .form-row,
    .form-row-last {
        display: flex;
        justify-content: center;
        border-top: solid 2px rgb(165, 154, 202, 0.5);
        border-left: solid 2px rgb(165, 154, 202, 0.5);
        border-right: solid 2px rgb(165, 154, 202, 0.5);
    }

    .form-row-last {
        border-bottom: solid 2px rgb(165, 154, 202, 0.5);
    }

    .form-label-required,
    .form-label {
        width: 32%;
        border: none;
    }

    .form-content,
    .form-content-last {
        width: 68%;
        border: none;
    }

    .contact-info__details {
        width: 760px;
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}

/* パソコンスタイル */
@media screen and (min-width: 1024px) {
    .fullerene-description,
    .workshop-info,
    .payment-info,
    .application-info {
        width: 950px;
    }

    .fullerene-description-supplement__img {
        height: 370px;
    }

    .fullerene-description-supplement__text {
        line-height: 40px;
    }
}