/* ▼ アカウント系ページ共通レイアウト */
.accountSection .container {
    max-width: 480px;
    margin: 0 auto 3rem;
}

/* ▼ カード型コンテンツ（フォームやメッセージを囲むボックス） */
.accountSection .loginContent,
.accountSection .registerContent,
.accountSection .logoutContent,
.accountSection .profileContent,
.accountSection .changeEmailContent,
.accountSection .changePasswordContent,
.accountSection .lostPasswordContent,
.accountSection .resetPasswordContent,
.accountSection .deleteAccountContent,
.accountSection .deleteAccountCompleteContent,
.accountSection .loginAlready,
.accountSection .registerAlready {
    position: relative;
    margin: 35px 0 0 0;
    padding: 2.6rem 2rem 2rem;
    background-color: #f9fafe;
    border-left: 4px solid var(--main-color-3);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ▼ 浮いた見出し風タイトル（全ページ共通） */
.accountSection .loginTitle,
.accountSection .registerTitle,
.accountSection .logoutTitle,
.accountSection .profileTitle,
.accountSection .changeEmailTitle,
.accountSection .changePasswordTitle,
.accountSection .lostPasswordTitle,
.accountSection .resetPasswordTitle,
.accountSection .deleteAccountTitle,
.accountSection .deleteAccountCompleteTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #34495e;
    background-color: #ffffff;
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    border: 1px solid #e1e5ef;
    position: absolute;
    top: -35px;
    left: 1.6rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* ▼ 文字サイズのベース */
.accountSection label,
.accountSection input,
.accountSection button,
.accountSection p,
.accountSection a {
    font-size: 1.5rem;
}

/* ▼ 共通フォームグループ */
.accountSection .formGroup {
    margin-bottom: 3.5rem;
}
.accountSection form .formGroup:last-child {
    margin-bottom: 0.1rem;
}

.accountSection .formGroup label {
    display: block;
    color: #34495e;
    margin-bottom: 0.45rem;
    font-weight: 500;
}

/* ▼ テキスト入力欄共通 */
.accountSection input[type="text"],
.accountSection input[type="email"],
.accountSection input[type="password"],
.accountSection input[type="number"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    border: 1px solid #d0d7e2;
    background-color: #ffffff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.accountSection input[type="text"]:focus,
.accountSection input[type="email"]:focus,
.accountSection input[type="password"]:focus,
.accountSection input[type="number"]:focus {
    outline: none;
    border-color: var(--main-color-3);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.18);
}

/* ▼ チェックボックス（ログイン状態維持、削除確認など） */
.accountSection .formGroup.checkBox label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-weight: 400;
}

.accountSection .formGroup.checkBox input[type="checkbox"] {
    margin-top: 0.2rem;
}

/* ▼ エラーメッセージ共通 */
.accountSection .errorMessage {
    margin: 0 0 1.5rem;
    padding: 1rem 1.2rem;
    background-color: #fff5f5;
    border-left: 4px solid #e74c3c;
    border-radius: 6px;
}

.accountSection .errorMessage .errorItem {
    margin: 0 0 0.3rem;
    font-size: 1.4rem;
    color: #c0392b;
}

/* ▼ お知らせ・案内メッセージ系 */
.accountSection .profileNotice,
.accountSection .changeEmailNotice,
.accountSection .changeEmailInfo,
.accountSection .autoRenewActiveInfo,
.accountSection .changePasswordNotice,
.accountSection .lostPasswordNotice,
.accountSection .resetPasswordNotice,
.accountSection .deleteAccountCompleteMessageMain,
.accountSection .deleteAccountCompleteMessageDetail {
    font-size: 1.4rem;
    color: #555;
}

.accountSection .profileInfo p,
.accountSection .changeEmailInfo p,
.accountSection .autoRenewActiveInfo p {
    font-size: 1.4rem;
    margin-bottom: 3.5rem;
}

/* ▼ パスワード系ページ説明文 */
.accountSection .lostPasswordDescription,
.accountSection .resetPasswordDescription {
    font-size: 1.4rem;
    color: #555;
    margin-bottom: 2rem;
}

/* ▼ ボタン共通（見た目を統一） */
.accountSection .loginBtn,
.accountSection .registerBtn,
.accountSection .logoutBtn,
.accountSection .profileBtn,
.accountSection .changeEmailBtn,
.accountSection .changePasswordBtn,
.accountSection .lostPasswordBtn,
.accountSection .resetPasswordBtn,
.accountSection .deleteAccountBtn,
.accountSection .cancelAutoRenewBtn,
.accountSection .homeBtn {
    display: inline-block;
    padding: 0.7rem 2.2rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 600;
    background-color: var(--main-color-1);
    color: #000000;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
    transition: 0.2s;
}

.accountSection .loginBtn:hover,
.accountSection .registerBtn:hover,
.accountSection .logoutBtn:hover,
.accountSection .profileBtn:hover,
.accountSection .changeEmailBtn:hover,
.accountSection .changePasswordBtn:hover,
.accountSection .lostPasswordBtn:hover,
.accountSection .resetPasswordBtn:hover,
.accountSection .deleteAccountBtn:hover,
.accountSection .cancelAutoRenewBtn:hover,
.accountSection .homeBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.accountSection .loginBtn:active,
.accountSection .registerBtn:active,
.accountSection .logoutBtn:active,
.accountSection .profileBtn:active,
.accountSection .changeEmailBtn:active,
.accountSection .changePasswordBtn:active,
.accountSection .lostPasswordBtn:active,
.accountSection .resetPasswordBtn:active,
.accountSection .deleteAccountBtn:active,
.accountSection .cancelAutoRenewBtn:active,
.accountSection .homeBtn:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

/* ▼ ボタンを右寄せしたい場合（formGroup 内） */
.accountSection .formGroup > button,
.accountSection .formGroup > .loginBtn,
.accountSection .formGroup > .registerBtn,
.accountSection .formGroup > .logoutBtn,
.accountSection .formGroup > .profileBtn,
.accountSection .formGroup > .changeEmailBtn,
.accountSection .formGroup > .changePasswordBtn,
.accountSection .formGroup > .lostPasswordBtn,
.accountSection .formGroup > .resetPasswordBtn,
.accountSection .formGroup > .deleteAccountBtn {
    margin-left: auto;
}

/* ▼ ログイン済み／未ログイン時のリンク（マイページ・ログインページへなど） */
.accountSection .loginAlready a,
.accountSection .registerAlready a,
.accountSection .deleteAccountCompleteHomeLink a,
.accountSection .profileContent a,
.accountSection .changeEmailContent a,
.accountSection .changePasswordContent a,
.accountSection .lostPasswordContent a,
.accountSection .resetPasswordContent a,
.accountSection .deleteAccountContent a {
    color: var(--main-color-3);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: 0.15s ease;
}

.accountSection .loginAlready a:hover,
.accountSection .registerAlready a:hover,
.accountSection .deleteAccountCompleteHomeLink a:hover,
.accountSection .profileContent a:hover,
.accountSection .changeEmailContent a:hover,
.accountSection .changePasswordContent a:hover,
.accountSection .lostPasswordContent a:hover,
.accountSection .resetPasswordContent a:hover,
.accountSection .deleteAccountContent a:hover {
    color: #2c3e50;
    border-color: var(--main-color-3);
}

/* ▼ 削除完了ページのメッセージ整形 */
.deleteAccountCompleteMessageMain {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.deleteAccountCompleteMessageDetail {
    margin-bottom: 1.2rem;
}

/* ▼ スマホ対応 */
@media (max-width: 480px) {
    .accountSection .loginContent,
    .accountSection .registerContent,
    .accountSection .logoutContent,
    .accountSection .profileContent,
    .accountSection .changeEmailContent,
    .accountSection .changePasswordContent,
    .accountSection .lostPasswordContent,
    .accountSection .resetPasswordContent,
    .accountSection .deleteAccountContent,
    .accountSection .deleteAccountCompleteContent,
    .accountSection .loginAlready,
    .accountSection .registerAlready {
        padding: 2.6rem 1.4rem 2rem;
    }

    .accountSection .loginTitle,
    .accountSection .registerTitle,
    .accountSection .logoutTitle,
    .accountSection .profileTitle,
    .accountSection .changeEmailTitle,
    .accountSection .changePasswordTitle,
    .accountSection .lostPasswordTitle,
    .accountSection .resetPasswordTitle,
    .accountSection .deleteAccountTitle,
    .accountSection .deleteAccountCompleteTitle {
        top: -24px;
        font-size: 1.8rem;
        padding: 0.45rem 1.1rem;
    }
}

/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
/* ==========================
   JWS Common Layout (Dashboard base)
   Structure:
   jwsSection
     jwsContainer
       header
       jwsCardContainer
         jwsCard
           jwsCardTitle
           p
           a (button)
========================== */

/* ---------- Section ---------- */
.jwsSection {
    padding: 2.5rem 0 3.5rem;
}

/* ---------- Width control ---------- */
.jwsContainer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.2rem;
}

/* ---------- Group header ---------- */
.jwsSection > .jwsContainer > header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.2rem;
    margin: 0 0 1.2rem 0;
    padding: 0 0.2rem;
}

.jwsSection > .jwsContainer > header h2 {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    color: #34495e;
    letter-spacing: 0.02em;
}

.jwsSection > .jwsContainer > header p {
    margin: 0;
    font-size: 1.3rem;
    color: #6b7280;
}

/* ---------- Cards container ---------- */
.jwsCardContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
}

/* ---------- Card ---------- */
.jwsCard {
    position: relative;
    padding: 1.6rem 1.6rem 1.4rem;
    background-color: #f9fafe;
    border-left: 4px solid var(--main-color-3);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Card title */
.jwsCardTitle {
    margin: 0 0 0.8rem 0;
    font-size: 1.7rem;
    font-weight: 800;
    color: #34495e;
}

/* Card description */
.jwsCard p {
    margin: 0 0 1.2rem 0;
    font-size: 1.4rem;
    color: #555;
    line-height: 1.6;
}

/* ---------- Spacing between multiple sections ---------- */
/* 連続する jwsSection の間隔を自然に */
.jwsSection + .jwsSection {
    padding-top: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
    .jwsSection {
        padding: 2.0rem 0 3.0rem;
    }

    .jwsCardContainer {
        grid-template-columns: 1fr;
        gap: 1.0rem;
    }

    .jwsCard {
        padding: 1.4rem 1.3rem 1.2rem;
    }

    .jwsCardTitle {
        font-size: 1.6rem;
    }

    .jwsSection > .jwsContainer > header h2 {
        font-size: 1.8rem;
    }
}