.sidebar {
    width: 240px;
}

@media (max-width: 1199px) {
    .sidebar {
        width: 200px;
    }
}

@media (max-width: 991px) {
    .sidebar {
        width: 180px;
    }
}

.mypage__row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mypage__row--button {
    display: flex;
    padding-top: 0;
    margin-top: 0;
}


.mycontents {
    width: calc(100% - 260px);
}

@media (max-width: 1199px) {
    .mycontents {
        width: calc(100% - 220px);
    }
}

@media (max-width: 991px) {
    .mycontents {
        width: calc(100% - 200px);
    }
}

@media (max-width: 767px) {
    .mycontents {
        width: 100%;
    }
}

.mycontents__head {
    font-size: 3.2rem;
    font-weight: 700;
    color: #fff;
    width: 100%;
    padding: 80px 60px 90px 225px;
    background-color: #84bb00;
    border-radius: 10px;
}

@media (max-width: 991px) {
    .mycontents__head {
        padding: 80px 60px 90px 190px;
    }
}

@media (max-width: 767px) {
    .mycontents__head {
        font-size: 2rem;
        width: calc(100% + 20px);
        margin-left: -10px;
        padding: 40px 30px 60px 110px;
    }
}

.mycontents__inner {
    width: 94%;
    margin: -60px auto 0;
    padding: 40px;
    background-color: #fff;
    border: 1px solid #cfd8dd;
    border-radius: 10px;
    position: relative;
    z-index: 2;
}

@media (max-width: 991px) {
    .mycontents__inner {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .mycontents__inner {
        width: 100%;
        margin: -30px auto 0;
        padding: 20px;
    }
}

.mycontents__inner::before {
    content: "";
    width: 112px;
    height: 132px;
    background-image: url("/images/futaba_login.png");
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -118px;
    left: 40px;
    display: block;
}

@media (max-width: 767px) {
    .mycontents__inner::before {
        width: 79px;
        height: 93px;
        top: -84px;
        left: 10px;
    }
}

.mycontents__row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

@media (max-width: 991px) {
    .mycontents__row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
}

.mycontents__title {
    font-size: 2rem;
    font-weight: 700;
}

@media (max-width: 767px) {
    .mycontents__title {
        font-size: 1.6rem;
    }
}

.mycontents__subtitle {
    font-size: 1.8rem;
    font-weight: 700;
}

@media (max-width: 767px) {
    .mycontents__subtitle {
        font-size: 1.6rem;
    }
}

.mycontents__primarytitle {
    color: #1d9bf0;
    font-size: 1.8rem;
    font-weight: 700;
}

@media (max-width: 767px) {
    .mycontents__primarytitle {
        font-size: 1.6rem;
    }
}

.mycontents__maintitle {
    color: #84bb00;
    font-size: 1.8rem;
    font-weight: 700;
}

@media (max-width: 767px) {
    .mycontents__maintitle {
        font-size: 1.6rem;
    }
}

.mycontents__box--primary {
    padding: 35px;
    border: 1px solid #1d9bf0;
    border-radius: 10px;
}

@media (max-width: 767px) {
    .mycontents__box--primary {
        padding: 20px 15px;
    }
}

.mycontents__box--main {
    padding: 35px;
    border: 1px solid #84bb00;
    border-radius: 10px;
}

@media (max-width: 767px) {
    .mycontents__box--main {
        padding: 20px 15px;
    }
}

.mycontents__switcharea {
    border: 1px solid #ff7b22;
    border-radius: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

@media (max-width: 991px) {
    .mycontents__switcharea {
        margin-top: 10px;
    }
}

.mycontents__switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.mycontents__switch:first-child {
    border-right: 1px solid #ff7b22;
}

.mycontents__switch:first-child a {
    border-radius: 20px 0 0 20px;
}

.mycontents__switch:last-child a {
    border-radius: 0 20px 20px 0;
}

.mycontents__switch a {
    font-size: 1.4rem;
    color: #ff7b22;
    padding: 5px 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 767px) {
    .mycontents__switch a {
        font-size: 1.2rem;
        padding: 5px;
    }
}

@media (max-width: 374px) {
    .mycontents__switch a {
        font-size: 1.1rem;
        padding: 5px;
    }
}

.mycontents__switch.active a {
    color: #fff;
    font-weight: 700;
    background-color: #ff7b22;
    pointer-events: none;
}

.mycontents__btn {
    font-size: 1.4rem;
    color: #ff7b22;
    width: auto;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #ff7b22;
    border-radius: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 991px) {
    .mycontents__btn {
        margin-top: 10px;
    }
}

.mycontents__alert {
    font-size: 1.4rem;
    color: #ff2c2c;
    padding: 20px;
    background-color: #fff8f8;
    border: 1px solid #ff2c2c;
    border-radius: 5px;
}

@media (max-width: 767px) {
    .mycontents__alert {
        padding: 10px;
    }
}

.mycontents__alert a {
    color: #ff2c2c;
    text-decoration: underline;
}

.mycontents__alerttext {
    font-size: 1.4rem;
    color: #FF3C34;
}

@media (max-width: 767px) {
    .mycontents__alerttext {
        font-size: 1.4rem;
    }
}

.mycontents__text {
    font-size: 1.6rem;
}

@media (max-width: 767px) {
    .mycontents__text {
        font-size: 1.4rem;
    }
}

.reserve__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

@media (max-width: 991px) {
    .reserve__item {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

.reserve__item:not(:last-child) {
    border-bottom: 1px solid #cfd8dd;
    margin-bottom: 60px;
    padding-bottom: 60px;
}

.reserve__inner {
    width: 100%;
}

@media (max-width: 991px) {
    .reserve__inner {
        margin-top: 30px;
    }
}

.reserve__img {
    width: 220px;
    height: 150px;
    margin-right: 30px;
    border-radius: 10px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -o-object-fit: cover;
    object-fit: cover;
}

.reserve__title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
}

@media (max-width: 767px) {
    .reserve__title {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
}

.reserve__text,
.reserve__text--em {
    font-size: 1.6rem;
}

@media (max-width: 767px) {

    .reserve__text,
    .reserve__text--em {
        font-size: 1.4rem;
    }
}

.reserve__text:not(:last-of-type),
.reserve__text--em:not(:last-of-type) {
    margin-bottom: 10px;
}

.reserve__text--em {
    font-size: 1.8rem;
    font-weight: bold;
}

@media (max-width: 767px) {
    .reserve__text--em {
        font-size: 1.6rem;
    }
}

.reserve__alert {
    font-size: 1.4rem;
    color: #FF3C34;
}

.reserve__row {
    margin-bottom: 5px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

@media (max-width: 767px) {
    .reserve__row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }
}

.reserve__tag {
    text-align: center;
    font-weight: 700;
    font-size: 1.6rem;
    color: #fff;
    margin-right: 10px;
    padding: 2px 5px;
    background-color: #84bb00;
    border-radius: 5px;
}

@media (max-width: 767px) {
    .reserve__tag {
        font-size: 1.2rem;
        margin-bottom: 5px;
    }
}

.reserve__name {
    font-size: 2rem;
    font-weight: 700;
    color: #84bb00;
}

@media (max-width: 767px) {
    .reserve__name {
        font-size: 1.6rem;
    }
}

.reserve__name.font-small {
    font-size: 1.6rem;
    font-weight: 700;
    color: #84bb00;
}

@media (max-width: 767px) {
    .reserve__name.font-small {
        font-size: 1.4rem;
    }
}

.reserve__time {
    font-size: 1.6rem;
    color: #545f6d;
    padding-left: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Ccircle cx='7.5' cy='7.5' r='7' fill='none' stroke='%23545f6d' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.65,4.52l1.79,3.1H9.82' fill='none' stroke='%23545f6d' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: top 5px left;
    background-repeat: no-repeat;
    background-size: 14px;
}

@media (max-width: 767px) {
    .reserve__time {
        font-size: 1.4rem;
    }
}