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

.item-link {
    display: block;
    text-align: center;
    margin: 0 auto;
    width: 90%;
    padding: 10px 0;
    background-color: rgb(165, 154, 202, 0.3);
    border: solid 2px rgb(165, 154, 202, 0.5);
    border-radius: 8px;
    text-decoration: none;
    color: #222222;
}

.item-container {
    width: 90%;
    margin: 0 auto;
}

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

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

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

.mobile__delete-form {
    display: flex;
    justify-content: right;
}

.mobile__item-delete {
    border: none;
    background-color: #bbbbbb;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}

.item-mobile__item {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    border: solid 2px #bbbbbb;
}

.item-tablet-pc {
    display: none;
}

.mobile__item-label {
    width: 22%;
    border-right: solid 2px #bbbbbb;
    text-align: center;
}

.mobile__item {
    width: 78%;
}

.mobile__number,
.mobile__number-label {
    margin: 0;
    border-bottom: solid 2px #bbbbbb;
    padding: 5px 3px;
}

.mobile__item-name,
.mobile__item-name-label {
    margin: 0;
    border-bottom: solid 2px #bbbbbb;
    padding: 5px 3px;
    white-space: nowrap; /* 改行しない */
    overflow: hidden; /* 内部の文字がはみ出すのを防ぐ */
    text-overflow: ellipsis; /* ...で省略 */
}

.mobile__item-stone,
.mobile__item-stone-label {
    margin: 0;
    border-bottom: solid 2px #bbbbbb;
    padding: 5px 3px;
    white-space: nowrap; /* 改行しない */
    overflow: hidden; /* 内部の文字がはみ出すのを防ぐ */
    text-overflow: ellipsis; /* ...で省略 */
}

.mobile__item-size,
.mobile__item-size-label,
.mobile__item-quantity-label,
.mobile__item-quantity {
    margin: 0;
    border-bottom: solid 2px #bbbbbb;
    padding: 5px 3px;
}

.mobile__item-size::after {
    content: "㎜";
}

.mobile__item-sub-price,
.mobile__item-sub-price-label {
    margin: 0;
    padding: 5px 3px;
}

.mobile__item-sub-price::before {
    content: "￥";
}

/* お支払いについて、キャンセルポリシー */
.payment-info {
    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 {
    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;
}

.total-price {
    margin: 0;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}

.total-price::before {
    content: "￥";
    padding-right: 5px;
}

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

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

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

.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) {
    .item-mobile {
        display: none;
    }

    .item-tablet-pc {
        display: block;
    }

    .item,
    .item-label {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: solid 2px #bbbbbb;
        border-left: solid 2px #bbbbbb;
        border-right: solid 2px #bbbbbb;
        white-space: nowrap; /* 改行しない */
        overflow: hidden; /* 内部の文字がはみ出すのを防ぐ */
        text-overflow: ellipsis; /* ...で省略 */
    }

    .item-label {
        text-align: center;
        font-size: 15px;
    }

    .item-label:last-of-type,
    .item:last-of-type {
        border-bottom: solid 2px #bbbbbb;
    }

    .number,
    .number-label {
        margin: 0;
        padding: 5px 3px;
        width: 7%;
        white-space: nowrap; /* 改行しない */
        overflow: hidden; /* 内部の文字がはみ出すのを防ぐ */
        text-overflow: ellipsis; /* ...で省略 */
    }

    .item-name,
    .item-name-label {
        margin: 0;
        padding: 5px 3px;
        width: 38%;
        border-left: solid 2px #bbbbbb;
        white-space: nowrap; /* 改行しない */
        overflow: hidden; /* 内部の文字がはみ出すのを防ぐ */
        text-overflow: ellipsis; /* ...で省略 */
    }

    .item-stone,
    .item-stone-label {
        margin: 0;
        padding: 5px 3px;
        width: 20%;
        border-left: solid 2px #bbbbbb;
        white-space: nowrap; /* 改行しない */
        overflow: hidden; /* 内部の文字がはみ出すのを防ぐ */
        text-overflow: ellipsis; /* ...で省略 */
    }

    .item-size,
    .item-size-label,
    .item-quantity,
    .item-quantity-label {
        margin: 0;
        padding: 5px 3px;
        width: 10%;
        border-left: solid 2px #bbbbbb;
        white-space: nowrap; /* 改行しない */
        overflow: hidden; /* 内部の文字がはみ出すのを防ぐ */
        text-overflow: ellipsis; /* ...で省略 */
    }

    .item-size::after {
        content: "㎜";
    }

    .item-sub-price,
    .item-sub-price-label {
        margin: 0;
        padding: 5px 3px;
        width: 15%;
        border-left: solid 2px #bbbbbb;
        border-right: solid 2px #bbbbbb;
        white-space: nowrap; /* 改行しない */
        overflow: hidden; /* 内部の文字がはみ出すのを防ぐ */
        text-overflow: ellipsis; /* ...で省略 */
    }

    .item-sub-price::before {
        content: "￥";
    }

    .delete-form,
    .item-delete-label {
        margin: 0;
        width: 10%;
        height: 34px;
    }

    .item-delete {
        display: block;
        margin: 4px auto;
        padding: 3px 10px;
        border: none;
        border-radius: 5px;
        background-color: #bbbbbb;
        color: #ffffff;
        font-size: 14px;
        cursor: pointer;
    }

    .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) {
    .item-link {
        width: 950px;
    }

    .item-container {
        width: 950px;
    }
}