/* @group @variables */

[class*="m-mypage-body"] {
--mypage-gap: 3rem;
}

@media (width < 48em) { /* 0 -> 767px */

[class*="m-mypage-body"] {
--mypage-gap: 3rem;
}

}

@media (width >= 48em) { /* 768px -> * */

[class*="m-mypage-body"] {
--mypage-grid-template-columns: 1fr 3fr;
--book-detail-section-grid-template-rows: auto 2.25rem auto 2.25rem auto 2.25rem 1fr;
--book-detail-title-grid-column: 2;
--book-detail-title-grid-row: 1;
--book-detail-cover-grid-column: 1;
--book-detail-cover-grid-row: 1;
}

}

/* @end @variables */

/* @group @m-mypage-body */

[class*="m-mypage-body"] {
display: grid;
align-items: start;
grid-template-columns: var(--mypage-grid-template-columns);
gap:  var(--mypage-gap);
}

[class*="m-mypage-contents"] {
grid-column: var(--book-detail-title-grid-column);
grid-row: var(--book-detail-title-grid-row);
}

[class*="m-mypage-sidebar-nav"] {
grid-column: var(--book-detail-cover-grid-column);
grid-row: var(--book-detail-cover-grid-row);
}

/* @end @m-mypage-body */

/* @group @m-mypage-contents */

[class*="m-mypage-contents"] {
display: grid;
gap: 3rem;
}

:where([class*="m-mypage-contents"]) [class*="m-headline"] {
order: -1;
}

/* @end @m-mypage-contents */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="a-wpum-form-message"] {
--color: var(--wpum-form-message-color);
--font-weight: 500;
--color-success-primary: hsl(120deg 55% 45%);
--color-success-secondary: hsl(120deg 60% 95%);
--color-error-primary: hsl(355deg 55% 55%);
--color-error-secondary: hsl(355deg 60% 95%);
--color-warning-primary: hsl(50deg 95% 47.5%);
--color-warning-secondary:hsl(50deg 100% 95%);
}

[class*="has-success-message"] {
--wpum-form-message-background-color: var(--color-success-secondary);
--wpum-form-message-color: var(--color-success-primary);
}

[class*="has-info-message"] {
--wpum-form-message-background-color: var(--color-success-secondary);
--wpum-form-message-color: var(--color-success-primary);
}

[class*="has-error-message"] {
--wpum-form-message-background-color: var(--color-error-secondary);
--wpum-form-message-color: var(--color-error-primary);
}

[class*="has-warning-message"] {
--wpum-form-message-background-color: var(--color-warning-secondary);
--wpum-form-message-color: var(--color-warning-primary);
}

/* @end @variables */

/* @group @a-wpum-form-message */

[class*="a-wpum-form-message"] {
padding: .75rem;
background-color: var(--wpum-form-message-background-color);
border-radius: .25rem;
color: var(--wpum-form-message-color);
}

/* @end @a-wpum-form-message */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="m-mypage-sidebar-nav"] {
--color: var(--color-white);
--font-size: .875rem;
--line-height: 1.71428571;
--link-color: var(--color-white);
--link-action-color: var(--color-white-action);
--link-active-color: var(--color-white-active);
}

[class*="m-mypage-sidebar-nav"] p {
--font-size: 1rem;
--line-height: 1.5;
--font-weight: 500;
}

/* @end @variables */

[class*="m-mypage-sidebar-nav"] {
overflow: hidden;
background-color: var(--color-primary);
border-radius: .375rem;
}


[class*="m-mypage-sidebar-nav"] p {
padding: .75rem;
box-shadow: inset 0 -1px 0 0 hsl(220deg 5% 50%);
text-align: center;
text-transform: uppercase;
}

/* @group @m-mypage-nav-list */

[class*="m-mypage-nav-list"] {
display: grid;
gap: 1px;
}

[class*="m-mypage-nav-list"]>li {
display: grid;
}

/* @end @m-mypage-nav-list */

/* @group @a-mypage-nav-link */

[class*="a-mypage-nav-link"] {
box-sizing: border-box;
display: grid;
align-items: center;
min-height: 3rem;
padding-block: .1875rem;
padding-inline: .75rem;
transition: var(--link-primary-transition);
}

[class*="a-mypage-nav-link"]:hover,
[class*="a-mypage-nav-link"]:focus {
background-color: var(--color-primary-action);
}

[class*="a-mypage-nav-link"]:active {
background-color: var(--color-primary-active);
}

/* @end @a-mypage-nav-link */