.account-menu {
    display: flex;
    flex-flow: column;
    padding-top: 3px;
    width: 100%;
    height: 100%;
    overflow-x:scroll;
}

.account-title {
    width: 100%;
    min-width: 1200px;
    height: 20px;
    line-height: 20px;
    color: #000;
    background-color: #FFC000;
    text-align: center;
}

.account-menu-area-no1 {
    width: 100%;
    display: flex;
    /*min-width: 1200px;*/
}

.account-menu-area-no2,
.account-menu-area-no3 {
    width: 100%;
    display: flex;
    /*min-width: 1200px;*/
    height: 65px;
}

.account-menu-group1,
.account-menu-group2 {
    display: flex;
    width: 34%;
    height: 65px;
}


.account-menu-group3 {
    display: flex;
    width: 40%;
    height: 65px;
}

.account-menu-group4  {
    display: flex;
    width: 30%;
    height: 65px;
}

.account-menu-group5 {
    display: flex;
    width: 26%;
    height: 65px;
}

.account-menu-group5-2 {
    display: flex;
    width: 29%;
    height: 65px;
}

.account-menu-group6 {
    display: flex;
    width: 15%;
}

.account-menu-group7 {
    display: flex;
    width: 100%;
}

.account-menu-flex {
    display: flex;
}

.account-menu-area-title1 {
    height: 28px;
    width: 15%;
    text-align: center;
}

.account-menu-area-title1-1,
.account-menu-area-title1-2,
.account-menu-area-title1-4,
.account-menu-area-title6 {
    height: 65px;
    width: 50%;
    border-left: 1px solid #D8D8D8;
    border-top: 1px solid #D8D8D8;
    text-align: center;
}

.account-menu-area-title1-3 {
    height: 65px;
    width: 55%;
    border-left: 1px solid #D8D8D8;
    border-top: 1px solid #D8D8D8;
    text-align: center;
}

.new-account-menu-area-title {
    height: 65px;
    width: 45%;
    border-left: 1px solid #D8D8D8;
    border-top: 1px solid #D8D8D8;
    text-align: center;
}

.account-menu-area-title1-5,
.account-menu-area-title1-6 {
    height: 65px;
    width: 50%;
    border-left: 1px solid #D8D8D8;
    border-top: 1px solid #D8D8D8;
    text-align: center;
}

.account-menu-area-title1-9 {
    height: 65px;
    width: 50%;
    border-left: 1px solid #D8D8D8;
    border-top: 1px solid #D8D8D8;
    text-align: center;
}

.account-menu-area-title2 {
    height: 28px;
    width: 10%;
    border-left: solid 1px #D8D8D8;
    border-top: solid 1px #D8D8D8;
    text-align: center;
}

.account-menu-area-title2-1 {
    height: 65px;
    width: 35%;
    border-left: solid 1px #D8D8D8;
    border-top: solid 1px #D8D8D8;
    text-align: center;
}

.account-menu-area-title3-1 {
    height: 65px;
    width: 65%;
    border-left: solid 1px #D8D8D8;
    border-top: solid 1px #D8D8D8;
    text-align: center;
}

#accountSelectYear {
    width: 30%;
}

#accountSelectMonth {
    width: 21%;
}

#accountSelectDay {
    width: 21%;
}


.account-menu-area-title3 {
    height: 28px;
    width: 12%;
    border-left: solid 1px #D8D8D8;
    border-top: solid 1px #D8D8D8;
    text-align: center;
}

.account-menu-area-title4 {
    height: 28px;
    width: 18%;
    color: #FFFFFF;
    border-left: solid 1px #D8D8D8;
    border-top: solid 1px #D8D8D8;
    text-align: center;
}

.account-menu-area-title5 {
    height: 64px;
    width: 15.1%;
    border-left: solid 1px #D8D8D8;
    border-right: solid 1px #D8D8D8;
    border-top: solid 1px #D8D8D8;
    border-bottom: solid 1px #D8D8D8;
    text-align: center;
}


.account-menu-area-title7 {
    height: 65px;
    width: 50%;
    border-left: solid 1px #D8D8D8;
    border-top: solid 1px #D8D8D8;
    text-align: center;
}

.account-menu-area-title8 {
    height: 64px;
    width: 100%;
    border-left: solid 1px #D8D8D8;
    border-right: solid 1px #D8D8D8;
    border-top: solid 1px #D8D8D8;
    text-align: center;
}

.account-menu-id-aarea {
    width: calc(100% - 40px);
    color: #FFFFFF;
    text-align: left;
    margin-left: 10px;
}

.account-menu-img-area {
    width: 40px;
}

.account-menu-img-area > img {
    margin-top: 2px;
    width: 32px;
    height: 32px;
}

.account-menu-img-area > div {
    margin-top: 2px;
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.user-name-area {
    display: flex;
}

.account-menu-title-text {
    height: 28px;
    align-items: center;
    align-content: center;
}

.account-menu-title-text-name-area {
    height: 28px;
    align-items: center;
    align-content: center;
    width: 50%;
}

.account-menu-title-text-name-area2 {
    height: 28px;
    align-items: center;
    align-content: center;
    width: 50%;
    border-left: 1px solid #D8D8D8;
}

.new-account-help-icon {
    width: 15px;
    height: 15px;
    transform: translateY(2px);
}

.account-menu-data-area {
    width: calc(100% + 1px);
    height: 37px;
    border-top: solid 1px #D8D8D8;
    border-left: solid 1px #D8D8D8;
    border-bottom: solid 1px #D8D8D8 ;
    padding-left: 3px;
    padding-right: 3px;
    transform: translateX(-1px);
}

.account-menu-data-area1-1,
.account-menu-data-area1-2,
.account-menu-data-area1-3,
.new-account-menu-data-area,
.account-menu-data-area1-4,
.account-menu-data-area1-5,
.account-menu-data-area1-6,
.account-menu-data-area1-7,
.account-menu-data-area1-8,
.account-menu-data-area1-9,
.account-menu-data-area1-10 {
    width: calc(100% + 1px);
    height: 37px;
    line-height: 37px;
    transform: translateX(-1px);
}

.account-menu-data-area1-5 {
    display: flex;
}

.account-menu-data-area-other {
    height: 37px;
    line-height: 37px;
    transform: translateX(-1px);
}

.account-menu-data-area-other2 {
    height: 37px;
    width: 100%;
    transform: translateX(-1px);
}

.account-menu-data-area-other3 {
    width: calc(100% + 2px);
    height: 37px;
    line-height: 37px;
    transform: translateX(-1px);
}

.account-menu-data-text-area2 > input,
.account-menu-data-text-area2 > select {
    width: calc(100% - 20px);
}

.account-menu-data-text-area2 {
    position: relative;
    color: #FFFFFF;
    text-align: center;
}

.account-menu-data-text-area2-user-name-area > input,
.account-menu-data-text-area2-user-name-area2 > input {
    width: 80%;
}

.account-menu-data-text-area2-user-name-area {
    color: #FFFFFF;
    text-align: center;
    width: calc(50% + 1px);
}

.account-menu-data-text-area2-user-name-area2 {
    color: #FFFFFF;
    text-align: center;
    width: 50%;
    border-left: 1px solid #D8D8D8;
}

.account-menu-data-text-area1 {
    color: #FFFFFF;
    text-align: left;
    margin-left: 10px;
}

.new-account-menu-data-text-area {
    text-align: left;
    margin-left: 10px;
}

.account-menu-check-area {
    margin-top: 7px;
    text-align: left;
    margin-right: 5px;
    color: #FFFFFF;
}

.account-license-key-area1,
.account-license-key-area2,
.account-license-key-area3 {
    position: relative;
    top: 6px;
}

.account-menu-outfit-hyphen {
    color: white;
    position: relative;
    top: 6px;
}

.account-menu-area-button1 {
    border-left: 1px solid #D8D8D8;
    border-top: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
    width: 50%;
    height: 65px;
    line-height: 65px;
    text-align: center;
}

.account-menu-button {
    width: 200px;
    height: 40px;
    background-color: #595959;
    border: solid 2px #7EFFFF;
    color: #7EFFFF;
}

.account-menu-button:hover {
    opacity: 0.8;
}

#accountMenuGoogleCheck {
    margin-right: 10px;
}

.account-menu-line {
    width: 100%;
    height: auto;
    margin-top: 3px;
    text-align: center;
}

.account-menu-button-area {
    width: 100%;
    min-width: 1200px;
    justify-content: center;
    display: flex;
}

#accountMenuSaveButton {
    margin-right: 10px;
    margin-top: 8px;
    border: 1px solid #D8D8D8;
    color: #FFFFFF;
    width: 200px;
    height: 40px;
}

.button-athor-color {
    background-color: black;
}

#accountMenuDeleteButton {
    margin-top: 8px;
    border: 1px solid black;
    color: #FFFFFF;
    width: 200px;
    height: 40px;
}

#accountMenuSaveButton:hover,
#accountMenuDeleteButton:hover {
    opacity: 0.8;
}

/* オーバーレイのスタイル */
.account-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 薄暗くする */
    z-index: 9996; /* アラートより一つ下の層 */
}

.check-password-alert {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: solid #BDC0BC 1px;
    z-index: 9997;
    background-color: #595959;
    width: 320px;
    height: auto;
    text-align: center;
}

.check-password-alert-title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-bottom: solid 1px #BDC0BC;
    background-color: #9CC3E5;
    color: #000;
}

.check-password-alert-explainarea {
    margin-top: 8px;
    margin-left: 8px;
    margin-right: 10px;
}

.check-password-alert-textarea {
    text-align: center;
}

.check-password-alert-textarea input {
    width: 75%;
}

.check-password-alert-button1 {
    border: 1px solid #D8D8D8;
    color: #FFFFFF;
    background-color: #0000FF;
    width: 200px;
    height: 40px;
    text-align: center;
    padding-top: 8px;
    margin-top: 20px;
    margin-left: 60px;
}

.check-password-alert-button2 {
    border: 1px solid #7EFFFF;
    color: #7EFFFF;
    background-color: #595959;
    width: 200px;
    height: 40px;
    text-align: center;
    padding-top: 8px;
    margin-top: 20px;
    margin-left: 60px;
    margin-bottom: 30px;
}

.check-password-alert-button1:hover,
.check-password-alert-button2:hover {
    opacity: 0.8;
}

.account-menu-point-icon-area {
    width: 93%;
    height: 27px;
    background-color: white;
    transform: translateY(3.5px);
    display: flex;
    margin-left: 3.5%;
}

.account-menu-icon {
    width: 17px;
    height: 22px;
    padding-bottom: 1.5px;
}

.account-menu-icon-left {
    margin:0;
    padding-left: 4px;
    transform: translateY(1px);
}

.account-menu-icon-right {
    margin:0;
    padding-right: 4px;
    transform: translateY(1px);
}

.account-menu-point-items {
    display: flex;
    list-style-type: none;
    margin: 0.1px;
    white-space: nowrap;
    transform: translateY(1px);
    overflow-x: scroll;
    padding-left: 1px;
}

.icon-item {
    width: 25px;
    height: 25px;
}

.account-menu-point-items::-webkit-scrollbar {
    display: none; 
}

.account-menu-point-items input[type="radio"] {
    display: none;
}

.account-menu-point-items input[type="radio"]:checked + label > li > div {
    border: #0000FF solid 1.5px;
    padding: 0px;
    height: 25px;
}

@media (min-width: 1580px) {
    .account-menu-icon-left,
    .account-menu-icon-right {
        display: none;
    }
}

.account-menu-icon-button-text {
    color: black;
}

.account-menu-button2 {
    width: 200px;
    height: 40px;
    background-color: #595959;
    border: solid 2px #7EFFFF;
    color: #7EFFFF;
    margin-top: 10px;
}

 .account-menu-button3,
 .account-menu-button4 {
    margin-top: 10px;
    width: 200px;
    height: 40px;
    background-color: #595959;
    border: solid 2px #7EFFFF;
    color: #7EFFFF;
}

.account-menu-button4 {
    width: calc(100% - 2px);
}


.account-menu-button2:hover,
.account-menu-button3:hover,
.account-menu-button4:hover {
    opacity: 0.8;
}

.account-menu-area-button2 {
    height: 64px;
    line-height: 64px;
    width: 84.9%;
    /* text-align: right; */
    padding-right: 20px;
    border-top: 1px solid #D8D8D8;
    border-bottom: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
    display: flex;
    justify-content: space-between;
}

.account-menu-area-button3 {
    padding-right: 20px;
}

.account-toggle-icon {
    position: absolute;
    top: 4px;
    left:  calc(100% - 29px);
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.check-account-toggle-icon {
    position: absolute;
    /* top: 156px; */
    left:  calc(100% - 60px);
    cursor: pointer;
    width: 20px;
    height: 20px;
}

/* 利用規約・プライバシーポリシー表示 */
.account-rule-area {
    width: 100%;
    align-items: center;
    display: flex;
    flex-direction: column;
    min-width: 1200px;
    display: none;
}

.account-terms-of-service-area {
    width:280px;
    display: flex;
    margin-top: 5px;
    margin-bottom: 10px;
    /* justify-content: flex-start; */
    /* border: 1px solid black; */
}

.account-privacy-policy-area {
    width:280px;
    display: flex;
    margin-bottom: 20px;
    /* justify-content: flex-start; */
    
}

.privacy-policy-clause,
.terms-of-service-clause {
    display: none;
}

.terms-of-service-text1,
.privacy-policy-text1 {
    color: #7EFFFF;
    border-bottom: 1px solid #7EFFFF;
}

.terms-of-service-text1:hover,
.privacy-policy-text1:hover {
    opacity: 0.8;
}

/* WEB版 利用規約・プライバシーポリシー表示 */
.web-rule-area {
    display: flex;
}

.web-terms-of-service-clause,
.web-privacy-policy-clause {
    width: 15px;
    margin-left: 10px;
}

.web-terms-of-service-text1 {
    width: 60px;
    height: 40px;
    color: #7EFFFF;
    border-bottom: 1px solid #7EFFFF;
    margin-right: 15px;
}

.web-privacy-policy-text1 {
    width: 150px;
    height: 40px;
    color: #7EFFFF;
    border-bottom: 1px solid #7EFFFF;
    margin-right: 15px;
}

.web-terms-of-service-text1:hover,
.web-privacy-policy-text1:hover {
    opacity: 0.8;
}

@media screen and (min-width:769px) and (max-width:1500px) {
    .account-menu-area-title1-3 {
        min-width: 240px;
    }
}

/* 1200pxから768pxの間のスタイル */
@media screen and (min-width:769px) and (max-width:1200px) {
    .account-menu-area-no1,
    .account-menu-area-no2,
    .account-menu-area-no3 {
        min-width: 1200px; /* 最小幅を1200pxに設定 */
    }
}

/*アンドロイド版アカウント画面編集*/
@media screen and (min-width:0px) and (max-width:768px) {
    .account-title {
        min-width: 100%;
    }

    .account-menu-area-no1 {
        display: block;
    }

    .account-menu-area-no2 {
        display: block;
        height: 195px;
    }

    .account-menu-area-no3 {
        display: block;
        width: 75.4%;
    }

    .account-menu-group1 {
        width: 100%;
    }

    .account-menu-group2 {
        width: 100%;
    }

    .account-menu-group3 {
        width: 100%;
    }

    .account-menu-group4 {
        width: 100%;
    }

    .account-menu-group5 {
        width: 100%;
    }

    .account-menu-group5-2 {
        width: 100%;
    }

    .account-menu-group6 {
        width: 30.2%;
    }

    .account-menu-group7 {
        width: 100%;
    }

    .account-menu-area-no3 {
        transform: translatex(42.8%);
        width:70%;
    }

    .account-menu-button {
        width: 170px;
    }

    .account-menu-button2 {
        width: 150px;
    }

    .account-menu-button3 {
        display: none;
    }

    .account-menu-area-button2 {
        width: 55%;
        text-align: center;
        padding-right: 0;
        display: inline;
    }

    .account-menu-area-title5 {
        width: 45%;
    }

    .account-menu-area-title1-2,
    .account-menu-area-title7 {
        border-right: 1px solid #D8D8D8;
    }

    .account-menu-area-title5,
    .account-menu-area-title8 {
        border-bottom: 1px solid #D8D8D8;
    }
    .account-menu-area-title8 {
        border-right: 0;
    }
    .account-menu-button-area {
        min-width: 100%;
    }
    #accountPhoneNumber {
        width: 83%;
    }
    .account-menu-img-area > img {
        width: 25px;
        margin-top: 3px;
    }

    .account-menu-area-title1-3 {
        width: 50%;
    }

    .new-account-menu-area-title {
        width: 50%;
    }

    .account-rule-area {
        min-width: 100%;
    }

    .web-rule-area {
        display: none;
    }

    #accountMenuSaveButton, 
    #accountMenuDeleteButton {
        width: 160px;
    }
}

/* 画面幅が415px以下の場合のスタイル */
@media screen and (max-width: 415px) {
    .account-menu-title-text,
    .account-menu-button,
    .account-menu-title-text-name-area,
    .account-menu-title-text-name-area2 {
        font-size: 10px;
    }

    .new-account-help-icon {
        height: 12px;
    }

    .account-menu-button2 {
        font-size: 9px;
    }

    .account-menu-button {
        width: 100px;
    }

    .account-menu-button2 {
        width: 110px;
    }

}