.premium-notice {
width: 100%;
height: 100%;
display: grid;
gap: 30px;
justify-content: center;
align-items: center;
background-color: #f5f5f5;
padding: 50px;
text-align: center;
}
.premium-notice .text {
line-height: 2;
margin-block: var(--tcd-half-read);;
}
.premium-notice .headline {
font-size: 18px;
font-weight: 600;
line-height: 1.6;
margin-block: var(--tcd-half-read);
} .premium-auth-dialog {
position: fixed;
inset: 0; z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.4); opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity .25s ease,
visibility .25s ease;
} .premium-auth-dialog.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
} .premium-auth-panel {
position: relative;
max-width: 500px;
padding: 50px 0 50px 0;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
transform: translateY(10px);
transition: transform .25s ease;
z-index: 3;
}
.premium-auth-form-inner {
display: grid;
gap: 30px;
padding-inline: 50px;
margin-bottom: 30px;
} .premium-auth-dialog.is-open .premium-auth-panel {
transform: translateY(0);
} .premium-auth-title {
font-size: 20px;
font-weight: 600;
margin-block: var(--tcd-half-read) !important;
}
.premium-auth-close {
position: absolute;
right: 13px;
top: 2px;
background: none;
border: none;
font-size: 30px;
cursor: pointer;
transition: opacity 0.3s ease;
margin-top: unset !important;
line-height: normal;
}
@media(hover: hover) {
.premium-auth-close:hover {
opacity: 0.6;
}
} .premium-btn {
border: none;
cursor: pointer;
}
.premium-btn {
border: 1px solid var(--tcd-accent-color);
width: 200px;
margin: 0 auto;
color: var(--tcd-accent-color) !important;
transition: color 0.3s ease,background-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
padding-inline: 15px;
border-radius: 4px;
}
.premium-btn:hover {
color: #fff !important;
background-color: var(--tcd-accent-color);
text-decoration: none !important;
} .premium-purchase-complete-dialog {
position: fixed;
z-index: 9999;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
} .premium-purchase-complete-dialog.is-open {
opacity: 1;
pointer-events: auto;
} .premium-purchase-dialog-inner {
background: #000;
padding: 50px;
text-align: center;
transform: translateY(20px);
opacity: 0;
animation: purchaseDialogFade .35s ease forwards;
display: grid;
gap: 30px;
border-radius: 8px;
color: #fff;
transition: opacity 0.3s ease;
}
.premium-purchase-dialog-inner a {
color: #fff;
text-decoration: underline;
}
@media(hover: hover) {
.premium-purchase-dialog-inner a:hover {
opacity: 0.6;
color: #fff !important;
}
} @keyframes purchaseDialogFade {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.premium-purchase-dialog-inner .headline {
font-size: 20px;
font-weight: 600;
margin-block: var(--tcd-half-read) !important;
}
.premium-purchase-dialog-inner p {
font-size: 16px;
line-height: 1.6;
margin-block: var(--tcd-half-read) !important;
} .premium-dialog-close {
position: absolute;
right: 12px;
top: 6px;
background: none;
border: none;
font-size: 28px;
cursor: pointer;
opacity: 1;
transition: opacity 0.3s ease;
}
.premium-dialog-close:hover {
opacity: 0.6;
}
.premium-auth-toggle {
display: grid;
place-items: center;
width: fit-content;
width: 200px;
height: 60px;
border-radius: 4px;
font-size: 16px;
color: var(--tcd-accent-color);
border: 1px solid var(--tcd-accent-color);
text-decoration: none !important;
padding: 0 25px;
transition: color 0.3s ease,background-color 0.3s ease;
}
.premium-auth-toggle:hover {
color: #fff;
background-color: var(--tcd-accent-color);
}
.premium-auth-entry-buttons {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
}
.premium-auth-bottom-area {
display: grid;
gap: 30px;
padding-top: 30px;
padding-inline: 50px;
border-top: 1px solid #ddd;
}
.premium-register-note {
font-size: 14px;
line-height: 1.6;
text-align: left;
margin-block: var(--tcd-half-read) !important;
}
.premium-register-desc {
font-size: 16px;
line-height: 1.6;
text-align: left;
margin-block: var(--tcd-half-read) !important;
}
.premium-auth-field p {
text-align: left;
margin-bottom: 10px;
}
.premium-auth-field_input {
height: 45px;
width: 100%;
padding-inline: 15px;
border: 1px solid #ddd;   
border-radius: 4px;
box-shadow: none;
outline: none;
}
.premium-auth-panel-register .premium-auth-form-inner {
margin-bottom: 0;
}
@media (max-width: 767px) {
.premium-notice {
padding: 30px;
gap: 20px;
}
.premium-purchase-dialog-inner { 
width: min(90%, 500px);
}
.premium-notice .text {
font-size: 14px;
}
.premium-auth-toggle {
height: 50px;
font-size: 14px;
width: 180px;
font-weight: 400 !important;
}
.premium-auth-panel {
max-width: 100%;
margin-inline: 20px;
padding-block: 30px;
}
.premium-auth-title {
font-size: 18px;
}
.premium-auth-form-inner {
padding-inline: 30px;
gap: 20px;
margin-bottom: 20px;
}
.premium-auth-field_input {
font-size: 14px;
}
.premium-register-note {
font-size: 14px;
}
.premium-auth-bottom-area {
gap: 20px;
padding-top: 20px;
}
.premium-btn {
font-size: 14px;
width: 180px;
height: 50px;
font-weight: 400;
}
.premium-register-desc {
font-size: 14px;
}
} .mypage-paid-article {
padding-bottom: 70px;
padding-top: 70px;
margin: 0 auto;
} .mypage-paid-article .mypage-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
padding: 30px;
margin-bottom: 50px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #ddd;
inline-size: min(calc(100% - 40px), 1000px);
margin-right: auto;
margin-left: auto;
}
.mypage-paid-article .mypage-header-left {
display: flex;
align-items: center;
gap: 2px;
}
.mypage-paid-article .mypage-header-left_headline {
white-space: nowrap;
flex-shrink: 0;
}
.mypage-paid-article .mypage-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background: #e6e6e6;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: 700;
color: #999;
overflow: hidden;
}
.mypage-paid-article .mypage-avatar-initial {
line-height: 1;
}
.mypage-paid-article .mypage-user-name {
font-size: 18px;
font-weight: 700;
color: #333;
}
.mypage-paid-article .mypage-user-name span{
font-size: 16px;
font-weight: 400;
}
.mypage-paid-article .mypage-header-right {
margin-left: auto;
}
.mypage-paid-article .mypage-logout-button {
display: inline-block;
padding-inline: 15px;
font-size: 14px;
border-radius: 4px;
border: 1px solid var(--tcd-accent-color);
color: var(--tcd-accent-color);
text-decoration: none;
height: 60px;
width: 200px;
display: flex;
justify-content: center;
align-items: center;
transition: background 0.2s ease, color 0.2s ease, color 0.2s ease;
}
.mypage-paid-article .mypage-logout-button:hover {
background: var(--tcd-accent-color);
color: #fff;
} .mypage-paid-article .mypage-tabs {
display: flex;
margin: 0 auto 50px;
border-radius: 0;
overflow: hidden;
border: 1px solid var(--tcd-accent-color);
background: #f5f5f5;
inline-size: min(calc(100% - 40px), 1000px);
}
.mypage-paid-article .mypage-tab {
flex: 1 1 0;
padding-inline: 15px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
font-size: 16px;
line-height: 1.4;
border-right: 1px solid var(--tcd-accent-color);
background: #fff;
color: var(--tcd-accent-color);
cursor: pointer;
outline: none;
border-radius: 0;
transition: background 0.2s ease, color 0.2s ease, font-weight 0.2s ease;
white-space: normal;
flex-shrink: 0;
}
.mypage-paid-article .mypage-tab:hover {
color: #fff;
background-color: var(--tcd-accent-color);
}
.mypage-paid-article .mypage-tab:last-child {
border-right: none;
}
.mypage-paid-article .mypage-tab.is-active {
background: var(--tcd-accent-color);
color: #fff;
} .mypage-paid-article .mypage-tab-panels {
background: #ffffff;
border-radius: 0;
inline-size: min(calc(100% - 40px), 1000px);
margin-right: auto;
margin-left: auto;
} .mypage-tab-panels,
.mypage-membership-subtab-panels,
.mypage-account-block {
position: relative;
}  .mypage-tab-panel > *:not(.mypage-empty),
.mypage-membership-subtab-panel > *:not(.mypage-empty),
.mypage-account-subtab-panel > *:not(.mypage-empty) {
opacity: 0;
transform: translate3d(0, 30px, 0);
transition:
opacity 2s ease 0.2s, transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.mypage-tab-panel.is-active > *:not(.mypage-empty),
.mypage-membership-subtab-panel.is-active > *:not(.mypage-empty),
.mypage-account-subtab-panel.is-active > *:not(.mypage-empty) {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.mypage-tab-panel,
.mypage-membership-subtab-panel,
.mypage-account-subtab-panel {
display: block;
visibility: hidden;
pointer-events: none;
height: 0;
overflow: hidden;
}
.mypage-tab-panel.is-active,
.mypage-membership-subtab-panel.is-active,
.mypage-account-subtab-panel.is-active {
visibility: visible;
pointer-events: auto;
height: auto;
overflow: visible;
} @media (max-width: 1000px) {
.mypage-paid-article .mypage-tabs-wrap {
margin: 0 0 40px;
padding: 0 20px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
scroll-behavior: smooth;
}
.mypage-paid-article .mypage-tabs-wrap::-webkit-scrollbar {
height: 6px;
}
.mypage-paid-article .mypage-tabs-wrap::-webkit-scrollbar-track {
background: transparent;
}
.mypage-paid-article .mypage-tabs-wrap::-webkit-scrollbar-thumb {
background: transparent;
}
.mypage-paid-article .mypage-tabs {
display: inline-flex;
flex-wrap: nowrap;
margin: 0;
padding: 0 0 1px;
min-width: max-content;
width: max-content;
border: none;
background: transparent;
gap: 0;
}
.mypage-paid-article .mypage-tab {
appearance: none;
-webkit-appearance: none;
flex: 0 0 auto;
display: inline-flex;
justify-content: center;
align-items: center;
white-space: nowrap;
width: auto;
min-width: 160px;
height: 60px;
padding: 0 20px;
margin: 0;
margin-right: -1px;
font-size: 14px;
line-height: 1.4;
border: 1px solid var(--tcd-accent-color);
background: #fff;
box-sizing: border-box;
}
.mypage-paid-article .mypage-tab:last-child {
margin-right: 0;
}
.mypage-paid-article .mypage-tab-panels {
inline-size: min(calc(100% - 40px), 1000px);
}
@media (hover: hover) {
.mypage-paid-article .mypage-tabs-wrap:hover {
scrollbar-color: #ddd #f2f2f2;
}
.mypage-paid-article .mypage-tabs-wrap:hover::-webkit-scrollbar-track {
background: #f2f2f2;
}
.mypage-paid-article .mypage-tabs-wrap:hover::-webkit-scrollbar-thumb {
background: #ddd;
}
}
.mypage-paid-article .mypage-tab:last-child {
border-right: 1px solid var(--tcd-accent-color);
}  .mypage-paid-article .mypage-tabs-wrap::-webkit-scrollbar {
display: none;
} .mypage-paid-article .mypage-tabs-wrap {
scrollbar-width: none;
} .mypage-paid-article .mypage-tabs-wrap {
-ms-overflow-style: none;
}
}
@media (max-width: 767px) {
.mypage-paid-article .mypage-tabs-wrap {
margin: 0 0 40px;
padding: 0 20px;
}
.mypage-paid-article .mypage-tab {
min-width: 150px;
height: 50px;
font-size: 14px;
padding: 0 18px;
}
} .mypage-paid-article .mypage-purchased-list {
border-top: 1px solid #eeeeee;
}
.mypage-paid-article .mypage-purchased-item {
border-bottom: 1px solid #eeeeee;
}
.mypage-paid-article .mypage-purchased-link {
display: block;
padding: 18px 8px;
text-decoration: none;
color: inherit;
}
.mypage-paid-article .mypage-purchased-link:hover {
background: #fafafa;
}
.mypage-paid-article .mypage-purchased-meta {
margin-bottom: 4px;
}
.mypage-paid-article .mypage-purchased-date {
font-size: 11px;
color: #999999;
}
.mypage-paid-article .mypage-purchased-title {
font-size: 14px;
font-weight: 500;
margin: 0;
color: #333333;
}
.mypage-paid-article .mypage-empty {
font-size: 16px;
color: #777;
} .mypage-paid-article .mypage-account-block {
width: 100%;
display: grid;
gap: 50px;
padding: 50px;
border: 1px solid #ddd;
}
.mypage-paid-article .mypage-account-heading {
font-size: 24px;
font-weight: 600;
text-align: center;
margin-bottom: 50px;
}
.mypage-paid-article .mypage-account-list {
margin: 0 0 24px;
}
.mypage-paid-article .mypage-account-row {
display: flex;
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
}
.mypage-paid-article .mypage-account-row dt {
width: 140px;
color: #777;
}
.mypage-paid-article .mypage-account-row dd {
margin: 0;
flex: 1;
color: #333;
}
.mypage-paid-article .mypage-account-edit a {
font-size: 12px;
text-decoration: underline;
}
.mypage-account-form {
display: grid;
gap: 30px;
justify-content: center;
}
.mypage-account-form-row {
display: grid;
grid-template-columns: 220px 500px;
column-gap: 20px;
align-items: center;
}
.mypage-account-label {
width: 220px;
}
.mypage-account-input {
height: 50px;
padding-inline: 20px;
width: 500px;
border: 1px solid #ddd;
}
.mypage-account-form-actions {
display: grid;
gap: 30px;
margin-top: 20px;
}
.mypage-account_withdrawal {
margin-top: 30px;
}
.mypage-account_withdrawal .desc {
font-size: 16px;
text-align: center;
margin-block: var(--tcd-half-read);
line-height: 1.6;
}
.mypage-account_withdrawal .mypage-account-btn {
margin-top: 30px;
}
.mypage-account-btn {
border: 1px solid var(--tcd-accent-color);
width: 300px;
margin: 0 auto;
color: var(--tcd-accent-color);
transition: color 0.3s ease, background-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
padding-inline: 15px;
border-radius: 4px;
font-size: 16px;
}
.mypage-membership-info-list .mypage-account-btn {
width: auto;
padding-inline: 20px;
height: 40px;
background-color: #fff;
margin: 0;
}
.mypage-account-btn:hover {
color: #fff;
background-color: var(--tcd-accent-color);
}
.mypage-account-btn.mypage-membership-inline-cancel-btn:hover {
color: #fff;
background-color: var(--tcd-accent-color);
} @media screen and (max-width: 767px) {
.mypage-paid-article {
padding: 40px 0 40px;
}
.mypage-paid-article .mypage-header {
flex-direction: column;
align-items: center;
padding:20px;
gap: 20px;
margin-bottom: 30px;
}
.mypage-paid-article .mypage-logout-button {
height: 50px;
width: 180px;
}
.mypage-paid-article .mypage-header-right {
margin-left: 0;
}
.mypage-paid-article .mypage-tab {
height: 50px;
font-size: 14px;
}
.mypage-paid-article .mypage-tabs {
flex-direction: row;
font-size: 12px; }
.mypage-paid-article .mypage-account-row {
flex-direction: column;
}
.mypage-paid-article .mypage-account-row dt {
width: auto;
margin-bottom: 4px;
}
} .mypage-account-notice {
position: fixed;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.45);
z-index: 9999;
box-sizing: border-box;
}
.mypage-account-notice.is-open {
display: flex;
}
.mypage-account-notice-inner {
position: relative;
max-width: 500px;
width: 100%;
background: #000;
color: #fff;
padding: 50px;
box-sizing: border-box;
text-align: center;
display: grid;
gap: 30px;
border-radius: 8px;
}
.mypage-account-notice-inner .headline {
font-size: 18px;
font-weight: 600;
margin-block: var(--tcd-half-read) !important;
line-height: 1.4;
}
.mypage-account-notice-inner p {
font-size: 14px;
line-height: 1.6;
margin-block: var(--tcd-half-read) !important;
} .mypage-account-notice-close {
position: absolute;
top: 6px;
right: 12px;
border: none;
background: transparent;
font-size: 30px;
line-height: 1;
cursor: pointer;
transition: opacity 0.3s ease;
}
@media(hover: hover) {
.mypage-account-notice-close:hover {
opacity: 0.6;
}
}
.mypage-register-block {
display: grid;
gap: 30px;
padding: 50px;
border: 1px solid #ddd;
margin: 0 auto;
inline-size: fit-content;
}
.mypage-register-title {
font-size: 24px;
font-weight: 600;
text-align: center;
}
.mypage-register-desc {
font-size: 16px;
line-height: 1.6;
margin: 0 auto;
}
.mypage-register-form {
display: grid;
gap: 30px;
margin: 0 auto;
}
.mypage-register-input {
height: 50px;
width: 500px;
padding-inline: 20px;
border: 1px solid #ddd;
}
.mypage-register-btn {
border: 1px solid var(--tcd-accent-color);
width: 300px;
margin: 0 auto;
color: var(--tcd-accent-color);
transition: color 0.3s ease, background-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
padding-inline: 15px;
border-radius: 4px;
}
.mypage-register-btn:hover {
background-color: var(--tcd-accent-color);
color: #fff;
}
.mypage-register-buttons {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin: 0 auto;
}
.mypage-register-buttons .premium-auth-toggle {
margin: 0;
}
@media screen and (max-width: 767px) {
.mypage-paid-article .mypage-account-block {
gap: 30px;
padding: 20px;
}
.mypage-paid-article .mypage-account-heading {
font-size: 18px;
margin-bottom: 30px;
}
.mypage-account-btn {
height: 50px;
width: 250px;
font-weight: 400;
font-size: 14px;
}
.premium-auth-forgot-wrap {
font-size: 14px;
}
.mypage-account-form-row {
display: grid;
gap: 15px;
}
.mypage-account-label {
font-size: 14px;
}
.mypage-account-input {
width: 100%;
font-size: 14px;
}
.mypage-account-form-actions {
margin-top: 0;
}
.mypage-account_withdrawal {
margin-top: 0;
}
.mypage-register-title {
font-size: 18px;
}
.mypage-register-block {
padding: 20px;
gap: 20px;
margin-inline: 20px;
}
.mypage-register-desc {
font-size: 14px;
}
.mypage-register-buttons {
justify-content: center;
}
.mypage-account-notice-inner {
padding: 30px;
gap: 20px;
}
.mypage-account-notice-inner .headline {
font-size: 16px;
}
} .post_item_cover {
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: flex;
gap: 20px;
}
.blog_list.type2 .paid-article-label { 
position: absolute;
top: 0;
left: 0;
z-index: 3;
padding: 0 10px;
height: 40px;
}
.paid-article-label {  
height: 50px;
display: grid;
place-items: center;
font-size: 12px;
max-width: 100%;
color: #fff;
}
@media screen and (max-width: 767px) {
.paid-article-label {
height: 40px;
}
.post_item_cover {
gap: 10px;
}
.mypage-account_withdrawal .desc {
font-size: 14px;
}
}
.paid-article-label svg {
fill: var(--tcd-paid-label-icon-color);
}
.tab_post_list .paid-article-label {
position: absolute;
top: 0;
left: 0;
z-index: 3;
padding: 0 5px;
height: 40px;
}
.cb_blog_list.type3 .paid-article-label {
position: absolute;
top: 0;
left: 0;
z-index: 3;
padding: 0 15px;
}
.widget_tcd_widget_designed_post_list .post_list .paid-article-label {
position: absolute;
top: 0;
left: 0;
z-index: 3;
padding: 0 10px;
height: 45px;
}
.p-widget-tab-post .p-widget-tab-post-list-item-image .paid-article-label {
position: absolute;
top: 0;
left: 0;
z-index: 3;
padding: 0 5px;
height: 40px;
}
.ranking_page_post_list .blog_list.type2 .paid-article-label {
position: absolute;
top: 0;
left: 40px;
z-index: 3;
padding: 0 5px;
height: 40px;
}
.right_area .paid-article-label {
position: absolute;
top: 0;
left: 0;
z-index: 3;
padding: 0 10px;
height: 45px;
}
.right_area .image {
position: relative;
} .featured_list.swiper .swiper-wrapper {
display: flex;
}
.featured_list.swiper .swiper-slide {
width: 100%;
}
.mypage-tab-panel .blog_list .category_button {
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.widget_tcd_widget_ranking_list .paid-article-label {
position: absolute;
top: 19px;
left: 49px;
z-index: 3;
height: 30px;
padding: 0 5px;
}
.ranking_post_list .paid-article-label {
position: absolute;
top: 0;
left: 40px;
z-index: 3;
height: 40px;
padding: 0 5px;
}
.megamenu_post_carousel .paid-article-label {
position: absolute;
top: 0;
left: 0;
z-index: 3;
height: 40px;
padding: 0 5px;
}
.megamenu3 .item {
position: relative;
}
.megamenu3 .paid-article-label {
position: absolute;
top: 0;
left: 0;
z-index: 3;
height: 40px;
padding: 0 5px;
}
#related_post .post_list .paid-article-label {
position: absolute;
top: 0;
left: 0;
z-index: 3;
height: 40px;
padding: 0 5px;
}
@media screen and (max-width: 767px) {
.ranking_post_list .paid-article-label {
height: 30px;
left: 30px;
}
#related_post .post_list .paid-article-label {
top: 20px;
left: 20px;
}
.ranking_page_post_list .blog_list.type2 .paid-article-label {
left: 30px;
height: 30px;
}
} .mypage-account-notice {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99999;
display: none; width: 90%;
max-width: 480px;
background: #fff;
border-radius: 12px;
}
.mypage-account-notice.is-open {
display: flex;
} .mypage-account-notice-overlay {
position: fixed;
inset: 0;
z-index: 99998;
display: none;
}
.mypage-account-notice-overlay.is-open {
opacity: 1;
pointer-events: auto;
display: block;
} .mypage-account-notice-inner {
position: relative;
}
.mypage-account-notice-close {
position: absolute;
top: 6px;
right: 12px;
font-size: 30px;
background: none;
border: none;
cursor: pointer;
}
.mypage-account-notice-buttons {
display: flex;
gap: 12px;
flex-direction: column;
}
.mypage-empty {
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
}
.premium-notice a {
color: var(--tcdce-base-link-color);
}
.mypage-register-block a {
color: var(--tcdce-base-link-color);
}
.mypage-account-notice-inner a {
color: var(--tcdce-base-link-color);
}
@media(hover: hover) {
.premium-notice a:hover {
color: var(--tcdce-base-link-color) !important;
text-decoration: underline;
}
.premium-notice a.premium-btn:hover {
color: #fff !important;
}
.premium-notice .premium-btn-purchase:hover {
color: #fff !important;
}
.mypage-register-block a:hover {
color: var(--tcdce-base-link-color) !important;
text-decoration: underline;
}
.mypage-account-notice-inner a:hover {
color: var(--tcdce-base-link-color) !important;
text-decoration: underline;
}
}
.mypage-account-notice-inner .mypage-account-notice-buttons .mypage-account-btn{
color: #fff;
border-color: #fff;
}
.mypage-account-notice-inner .mypage-account-notice-buttons .mypage-account-btn:hover{
color: #000;
border-color: #fff;
background-color: #fff;
} 
.premium-price {
font-size: 30px;
font-weight: 600;
color: var(--tcd-accent-color);
margin-block: var(--tcd-half-read) !important;
}
.premium-price .premium-price_mark {
font-size: 18px;
padding-inline: 3px;
}
.premium-price_headline {
font-size: 20px;
font-weight: 400;
}
.premium-price_currency {
font-size: 20px;
padding-left: 5px;
}
.mypage_free_space {
margin-bottom: 50px;
inline-size: calc(
var(--mypage-free-width-type) * 100% +
(1 - var(--mypage-free-width-type)) * min(calc(100% - 40px), var(--mypage-free-width))
);
margin-inline: auto;
}
@media screen and (max-width: 767px) {
.mypage_free_space {
margin-bottom: 30px;
}
.premium-price_headline {
font-size: 18px !important;
}
.premium-price {
font-size: 25px;
}
.premium-price_currency {
font-size: 18px;
}
.premium-price .price-unit {
font-size: 18px !important;
}
}
.premium-auth-form-register .premium-auth-title {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
color: #ffffff;
background-color: #000;
font-weight: 500;
font-size: 18px;
}
@media screen and (max-width: 767px) {
.premium-auth-form-register .premium-auth-title {
height: 40px;
font-size: 16px;
}
.premium-auth-close {
font-size: 20px;
right: 13px;
top: 5px;
}
} .premium-auth-forgot-wrap {
color: #999999;
transition: opacity 0.3s ease;
text-align: center;
}
.premium-reset-form-area {
display: grid;
gap: 30px;
}
.pass_change_buttons {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 15px;
}
.pass_change_buttons .premium-auth-buttons .premium-btn{
width: 150px;
}
@media(hover: hover) {
.premium-auth-forgot-wrap:hover {
opacity: 0.6;
}
}
.premium-auth-form-inner:has(.premium-reset-complete-message) {
margin-bottom: 0;
}
.premium-auth-error-message {
margin-block: var(--tcd-half-read) !important;
text-align: center;
}
.premium-auth-panel-login .premium-auth-buttons {
margin-bottom: 0 !important;
}
.premium-auth-forgot-wrap {
margin-block: var(--tcd-half-read) !important;
}
.premium-auth-panel-login .premium-auth-title {
text-align: center;
}
.premium-auth-panel-register .premium-register-desc a {
color: var(--tcdce-base-link-color) !important;
}
.premium-auth-panel-login .premium-register-note a {
color: var(--tcdce-base-link-color) !important;
}
@media(hover: hover) {
.premium-auth-panel-register .premium-register-desc a:hover {
text-decoration: underline;
}
.premium-auth-panel-login .premium-register-note a:hover {
text-decoration: underline;
}
}
.premium-content-info {
font-size: 14px;
line-height: 1.6;
margin-block: var(--tcd-half-read);
color:#666;
}
.mypage-admin-tools {
margin-bottom: 50px;
}
.mypage-clear-purchases-confirm .desc {
text-align: left;
}
.premium-price_tax {
font-size: 14px;
}
.premium-countdown {
padding-inline: 50px;
padding-block: 40px;
text-align: center;
box-shadow: 0 0 20px rgba(0, 0, 0, .15);
margin-bottom: 30px;
font-size: 16px;
line-height: 1.6;
}
@media screen and (max-width: 767px) {
.premium-countdown {
padding: 20px;
margin-bottom: 20px;
font-size: 14px;
}
}
.paid_article_toc {
margin-bottom: var(--tcdce-base-margin-bottom-pc);
}
#paid-article-cta{
scroll-margin-top: 20px;
}
.premium-notice_top_content {
display: grid;
gap: 20px;
}
.premium-membership-notice {
margin-top: 40px;
}
.premium-membership-plan-name {
font-size: 22px;
line-height: 1.6;
}
.premium-membership-plan-name_contents {
display: grid;
gap: 15px;
}
.mypage-membership-heading {
margin: 0 0 30px;
font-size: 24px;
line-height: 1.4;
display: flex;
justify-content: center;
align-items: center;
}
.mypage-membership-subtabs {
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
}
.mypage-membership-subtab {
appearance: none;
border: 0;
background: transparent;
color: #222;
font-size: 16px;
line-height: 1.4;
font-weight: 400;
padding: 18px 42px;
position: relative;
cursor: pointer;
transition: color 0.3s ease, opacity 0.3s ease;
} .mypage-membership-subtab + .mypage-membership-subtab::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 42px;
background-color: #d9d9d9;
opacity: 1;
transition: none;
pointer-events: none;
} @media (hover: hover) {
.tcd-member-plan-post-tabs .mypage-membership-subtab:hover {
opacity: 1 !important;
}
.tcd-member-plan-post-tabs .mypage-membership-subtab:hover > span {
opacity: 0.5;
}
} .tcd-member-plan-post-tabs .mypage-membership-subtab > span {
display: inline-block;
transition: opacity 0.3s ease;
}
.mypage-membership-subtab.is-active {
color: var(--tcd-accent-color);
font-weight: 600;
}
.mypage-membership-subtab:focus-visible {
outline: none;
color: var(--tcd-accent-color);
} .mypage-membership-subtab-panels {
position: relative;
}
.mypage-membership-subtab-panel {
display: block;
visibility: hidden;
opacity: 0;
transform: translate3d(0, 50px, 0);
pointer-events: none;
height: 0;
overflow: hidden;
transition:
opacity 0.8s ease 0.1s,
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
visibility 0s linear 0.9s;
}
.mypage-membership-subtab-panel.is-active {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
pointer-events: auto;
height: auto;
overflow: visible;
transition:
opacity 0.8s ease 0.1s,
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
visibility 0s linear 0s;
} @media (max-width: 1000px) {
.mypage-paid-article .mypage-membership-subtabs-wrap {
margin: 0 0 30px;
padding: 0 20px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
scroll-behavior: smooth;
}
.mypage-paid-article .mypage-membership-subtabs-wrap::-webkit-scrollbar {
height: 6px;
}
.mypage-paid-article .mypage-membership-subtabs-wrap::-webkit-scrollbar-track {
background: transparent;
}
.mypage-paid-article .mypage-membership-subtabs-wrap::-webkit-scrollbar-thumb {
background: transparent;
}
.mypage-paid-article .mypage-membership-subtabs {
display: inline-flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
min-width: max-content;
width: max-content;
margin: 0;
}
.mypage-paid-article .mypage-membership-subtab {
flex: 0 0 auto;
white-space: nowrap;
font-size: 14px;
padding: 14px 24px;
}
.mypage-paid-article .mypage-membership-subtab + .mypage-membership-subtab::before {
height: 28px;
}
@media (hover: hover) {
.mypage-paid-article .mypage-membership-subtabs-wrap:hover {
scrollbar-color: #ddd #f2f2f2;
}
.mypage-paid-article .mypage-membership-subtabs-wrap:hover::-webkit-scrollbar-track {
background: #f2f2f2;
}
.mypage-paid-article .mypage-membership-subtabs-wrap:hover::-webkit-scrollbar-thumb {
background: #ddd;
}
}
}
@media (max-width: 767px) {
.mypage-paid-article .mypage-membership-subtabs-wrap {
margin: 0 0 30px;
padding: 0;
margin-inline: -20px;
justify-content: center;
text-align: center;
}
.mypage-paid-article .mypage-membership-subtab {
font-size: 14px;
padding: 12px 20px;
}
}
.mypage-account-subtab-panel {
display: none;
}
.mypage-account-subtab-panel.is-active {
display: block;
}
.mypage-membership-info-list {
display: grid;
gap: 24px;
}
.mypage-membership-info-card {
background: #F6F6F6;
padding: 40px;
display: grid;
gap: 30px;
}
.mypage-membership-info-card-title {
font-size: 20px;
line-height: 1.4;
font-weight: 500;
margin-block: var(--tcd-half-read);
}
.mypage-membership-cancel-note-inline {
color: #666;
}
.mypage-membership-cancel-note-inline.is-pc-only {
padding-left: 10px;
}
.mypage-membership-cancel-note-inline.is-pc-only.past_due_text {
padding-left: 0;
}
.mypage-membership-info-price-cell {
display: flex;
align-items: center;
justify-content: space-between;
}
.mypage-membership-info-row {
display: grid;
grid-template-columns: 180px 1fr;
gap: 12px;
padding: 5px 0;
align-items: center;
}
.mypage-membership-info-data:not(:has(.mypage-account-btn))
.mypage-membership-info-row {
padding: 12.5px 0;
}
.mypage-membership-info-row:first-child {
border-top: 0;
padding-top: 0;
}
.mypage-membership-info-row dt {
font-size: 16px;
}
.mypage-membership-info-row dd {
margin: 0;
}
.mypage-membership-cancel-note {
color: #666;
}
.mypage-membership-cancel-status {
color: #666;
}
@media screen and (max-width: 767px) {
.mypage-membership-info-row {
grid-template-columns: 1fr;
gap: 6px;
}
.mypage-membership-info-card {
padding: 30px;
gap:20px;
}
.mypage-membership-info-card-title {
font-size: 16px;
}
.mypage-membership-info-row:first-child {
display: flex;
justify-content: space-between;
}
.mypage-membership-info-row {
display: flex;
justify-content: space-between;
padding: 10px;
padding-inline: 0;
}
.mypage-membership-info-row dt {
font-size: 14px;
}
.mypage-membership-info-row dd {
font-size: 14px;
}
.mypage-membership-info-row:last-child {
display: flex;
justify-content: space-between;
}
}
.premium-price .price-unit {
font-size: 20px;
font-weight: 400;
}
.premium-auth-field-password {
position: relative;
}
.premium-auth-field-password .premium-auth-field_input {
padding-right: 56px;
}
.premium-auth-password-toggle {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
width: 24px;
height: 24px;
padding: 0;
border: 0;
background: transparent;
appearance: none;
cursor: pointer;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.premium-auth-password-toggle-icon {
display: block;
width: 24px;
height: 24px;
line-height: 0;
}
.premium-auth-password-toggle-icon .icon-eye {
display: block;
width: 24px;
height: 24px;
color: inherit;
fill: currentColor !important;
}
.premium-auth-password-toggle-icon .icon-eye path {
fill: currentColor !important;
stroke: none !important;
}
.premium-auth-password-toggle-icon .icon-eye-closed {
display: none;
} .premium-auth-field-password .premium-auth-password-toggle[aria-pressed="false"] .icon-eye-open {
display: none;
}
.premium-auth-field-password .premium-auth-password-toggle[aria-pressed="false"] .icon-eye-closed {
display: block;
} .premium-auth-field-password .premium-auth-password-toggle[aria-pressed="true"] .icon-eye-open {
display: block;
}
.premium-auth-field-password .premium-auth-password-toggle[aria-pressed="true"] .icon-eye-closed {
display: none;
}
.premium-auth-password-toggle:focus-visible {
outline: 2px solid #333;
outline-offset: 2px;
border-radius: 4px;
}
.mypage-membership-single-heading {
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40px;
line-height: 1.4;
} .is-sp-only {
display: none;
}
.is-pc-only {
display: inline-flex;
} @media (max-width: 767px) {
.is-pc-only {
display: none !important;
}
.is-sp-only {
display: block;
}
.is-sp-only .mypage-account-btn {
height: 50px;
width: 250px;
}
.mypage-membership-block-cancel-btn {
width: 100%;
justify-content: center;
height: 50px;
font-size: 14px;
}
}
@media (max-width: 767px) {
.mypage-membership-cancel-form-block {
margin-top: 0px;
margin-inline: auto;
}
.mypage-membership-block-cancel-btn {
width: 100%;
min-height: 50px;
justify-content: center;
}
.mypage-membership-cancel-status-block {
font-size: 14px;
line-height: 1.8;
color: #666;
text-align: center;
margin-block: var(--tcd-half-read);
}
.mypage-membership-cancel-note-block {
font-size: 13px;
line-height: 1.8;
color: #666;
}
}
.js-open-login {
color: rgb(231, 76, 60) !important;
text-decoration: underline;
}
@media(hover: hover) {
.js-open-login:hover {
opacity: 0.5;
}
}
.js-open-membership-info-subtab {
color: var(--tcdce-base-link-color) !important;
cursor: pointer;
}
@media(hover: hover) {
.js-open-membership-info-subtab:hover {
text-decoration: underline;
}
}
.mypage-payment-method-desc {
font-size: 16px;
line-height: 2.4;
text-align: center;
}
.mypage-payment-method-button-wrap {
margin-top: 40px;
}
@media (max-width: 767px) {
.mypage-payment-method-desc {
font-size: 14px !important;
line-height: 2;
}
.mypage-payment-method-button-wrap {
margin-top: 20px;
}
}
.mypage-payment-method-current {
text-align: center;
margin-bottom: 40px;
}
@media (max-width: 767px) {
.mypage-payment-method-current {
font-size: 14px;
line-height: 2;
}
}
.mypage-membership-info-card {
position: relative;
}
.mypage-membership-remove-btn {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
border: none;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
line-height: 1;
}
.mypage-membership-remove-btn:hover {
opacity: 0.6;
}
.mypage-membership-info-row_first {
padding-bottom: 15px;
}
@media (max-width: 767px) {
.is-sp-only.mypage-account-btn {
width: 250px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin-inline: auto;
}
}
.paid-article-content-fade {
height: 100px;
margin-top: -130px;
position: relative;
z-index: 1;
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 55%,
#fff 100%
);
}
@media (max-width: 767px) {
.paid-article-content-fade {
margin-top: -120px;
}
}
.mypage-membership-inline-actions,
.mypage-membership-block-actions {
display: flex;
gap: 12px;
align-items: center;
}
.mypage-membership-inline-actions form,
.mypage-membership-block-actions form {
margin: 0;
} .mypage-membership-block-actions {
display: none;
} @media (max-width: 767px) {
.mypage-membership-block-actions {
display: grid;
justify-content: center;
align-items: center;
}
}
.mypage-membership-change-plan-list {
display: grid;
gap: 10px;
}
.mypage-membership-change-plan-list {
display: grid;
gap: 10px;
}
.mypage-membership-change-plan-item {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
text-align: left;
border: 1px solid #d6dde3;
padding: 14px 16px;
line-height: 1.5;
transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.mypage-membership-change-plan-item:hover {
border-color: #b8c6d1;
}
.mypage-membership-change-plan-item.is-current {
opacity: 0.5;
pointer-events: none;
}
.mypage-membership-change-plan-item input[type="radio"] {
-webkit-appearance: none;
appearance: none;
margin: 0;
width: 26px;
height: 26px;
flex: 0 0 26px;
border: 1px solid #b9c5cf;
border-radius: 2px;
position: relative;
cursor: pointer;
}
.mypage-membership-change-plan-item input[type="radio"]:checked {
background: #0b8fc7;
border-color: #0b8fc7;
}
.mypage-membership-change-plan-item input[type="radio"]:checked::after {
content: "";
position: absolute;
left: 8px;
top: 5px;
width: 6px;
height: 12px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.mypage-membership-change-plan-item span {
display: block;
font-size: 16px;
}
.paid-membership-cta-wrap {
margin-top: 0px;
padding-block: 0px;
}
.paid-membership-cta-panels {
position: relative;
}
.paid-membership-cta-panel {
width: 100%;
}
.paid-membership-cta-wrap .mypage-membership-subtabs-wrap {
margin: 0 0 30px;
}
.paid-membership-cta-wrap .mypage-membership-subtab {
padding: 15px 15px;
}
.paid-membership-cta-wrap .premium-membership-notice {
margin-top: 0;
}
.paid-membership-cta-wrap .mypage-membership-subtabs {
margin-bottom: 30px;
}
@media (max-width: 767px) {
.paid-membership-cta-wrap .mypage-membership-subtabs {
margin-bottom: 0;
justify-content: center;
}
.paid-membership-cta-wrap .mypage-membership-subtabs-wrap {
margin-bottom: 20px;
}
.paid-membership-cta-wrap .mypage-membership-subtab {
padding: 10px;
}
.mypage-membership-change-plan-item span {
font-size: 14px;
}
}
.mypage-membership-change-breakdown {
border: 1px solid #fff;
padding: 15px;
line-height: 1.8;
}
.mypage-membership-change-note {
line-height: 1.8;
font-size: 14px;
}
.mypage-membership-change-payment-label {
margin-bottom: 0.5em;
}
.mypage-membership-change-breakdown-formula {
margin-bottom: 0.5em;
}
.mypage-membership-change-summary-row {
margin-bottom: 0.5em;
}
.mypage-membership-change-breakdown-toggle {
transition: opacity 0.3s ease;
}
@media(hover: hover) {
.mypage-membership-change-breakdown-toggle:hover {
opacity: 0.6;
}
} .tcd-member-plan-list-wrap {
position: relative;
max-width: 100%;
margin: 0 auto;
}
.tcd-member-plan-list {
display: block;
margin: 0;
background: #fff;
overflow: hidden;
} .tcd-member-plan-list {
border: none;
background: transparent;
} .tcd-member-plan-list .swiper-slide {
border-right: none;
} .tcd-member-plan-item {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
color: #000 !important;
box-sizing: border-box;
height: 100%;
} .tcd-member-plan-item__name {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
text-align: center;
z-index: 2;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
} .tcd-member-plan-item__name.is-color-plan {
border-color: var(--plan-color);
} .tcd-member-plan-item__name.is-white-plan {
border-color: #ddd;
} .tcd-member-plan-item__body {
display: flex;
flex: 1;
flex-direction: column;
padding: 40px;
padding-top: 35px;
background: color-mix(in srgb, var(--plan-color) 10%, #fff 90%);
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
} .tcd-member-plan-list .swiper-slide:last-child .tcd-member-plan-item__body {
border-right: 1px solid #ddd;
} .tcd-member-plan-item:has(.is-color-plan)
+ .tcd-member-plan-item
.tcd-member-plan-item__body {
border-left-color: #ddd;
} .tcd-member-plan-list .swiper-slide:last-child .tcd-member-plan-item {
border-right: 1px solid #ddd;
} .tcd-member-plan-list.is-single-slide
.tcd-member-plan-item__body {
border-right: 1px solid #ddd;
}
.tcd-member-plan-list .swiper-wrapper {
align-items: stretch;
}
.tcd-member-plan-list .swiper-slide {
height: auto;
box-sizing: border-box;
} .tcd-member-plan-list .swiper-slide.is-visible-last {
border-right: none;
}
.tcd-member-plan-list .swiper-slide {
box-sizing: border-box;
} .tcd-member-plan-list .swiper-slide:last-child {
border-right: none;
} .tcd-member-plan-list .swiper-wrapper:has(.swiper-slide:only-child) {
justify-content: center;
} .tcd-member-plan-list .swiper-slide:only-child {
width: 500px !important;
max-width: 100%;
flex-shrink: 0;
}
.tcd-member-plan-list.is-single-slide .swiper-slide {
border-right: none;
} .tcd-member-plan-item {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
color: #000 !important;
box-sizing: border-box;
} .tcd-member-plan-item__name {
font-size: 18px;
font-weight: 600;
line-height: 1.5;
text-align: center;
color: var(--tcd-accent-color);
display: flex;
justify-content: center;
align-items: center;
height: 60px;
border-bottom: 1px solid #ddd;
} .tcd-member-plan-item__body {
display: flex;
flex: 1;
flex-direction: column;
padding:40px;
padding-top: 30px;
} .tcd-member-plan-item__body-top {
display: grid;
gap: 30px;
align-content: start;
} .tcd-member-plan-item__body-bottom {
display: grid;
gap: 20px;
align-content: end;
margin-top: auto;
justify-content: center;
align-items: center;
}
.tcd-member-plan-item__body {
background: color-mix(in srgb, var(--plan-color) 10%, #fff 90%);
} .tcd-member-plan-item__desc {
margin-block: var(--tcd-half-read);
font-size: 14px;
line-height: 2;
text-align: left;
}
.tcd-member-plan-item__desc::-webkit-scrollbar {
display: none;
}
.tcd-member-plan-item__body-bottom {
margin-top: max(40px, auto);
} .tcd-member-plan-item__desc.fade-mask {
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 30%,
black 70%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
black 30%,
black 70%,
transparent 100%
);
}
.tcd-member-plan-item__desc.no-fade-top {
mask-image: linear-gradient(
to bottom,
black 0%,
black 70%,
transparent 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
black 0%,
black 70%,
transparent 100%
);
}
.tcd-member-plan-item__desc.no-fade-bottom {
mask-image: linear-gradient(
to bottom,
transparent 0%,
black 30%,
black 100%
);
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
black 30%,
black 100%
);
}
.tcd-member-plan-item__desc.no-fade {
mask-image: none;
-webkit-mask-image: none;
}
.tcd-member-plan-item__price {
position: relative;
display: inline-block;
}
.tcd-member-plan-item__price-cycle {
font-weight: 500;
font-size: 16px;
}
.tcd-member-plan-item__saving-balloon {
position: absolute;
right: -60px;
bottom: calc(100% - 20px);
z-index: 2;
display: inline-block;
min-width: max-content;
padding: 6px 10px;
border-radius: 999px;
background: #00A4DE;
color: #fff;
font-size: 0.5em;
font-weight: 600;
line-height: 1.4;
opacity: 0;
transform: translate(30%, -6px);
pointer-events: none;
transition:
opacity 0.4s ease,
transform 0.4s ease;
}
.tcd-member-plan-item__saving-balloon.is-show {
opacity: 1;
transform: translate(30%, -12px);
} .tcd-member-plan-item__count {
font-size: 14px;
color: #666;
text-align: center;
line-height: 1;
} .tcd-member-plan-item__price-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
padding-top: 35px;
}
.tcd-member-plan-item__year-saving {
position: absolute;
top: 5px;
left: 75%;
z-index: 2;
transform: translateX(-50%) translateY(4px);
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 26px;
padding: 6px 12px;
background: #00A4DE;
color: #fff;
font-size: 12px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.tcd-member-plan-item__year-saving::after {
content: '';
position: absolute;
left: 50%;
bottom: -4px;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid #00A4DE;
}
.tcd-member-plan-item__year-saving.is-show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.tcd-member-plan-item__price-switch {
display: flex;
justify-content: center;
gap: 20px;
}
.tcd-member-plan-item__price-option {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
line-height: 1;
} .tcd-member-plan-item__price-option input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.tcd-member-plan-item__price-option span {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
}
.tcd-member-plan-item__price-option span::before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #bbb;
border-radius: 50%;
background: #fff;
box-sizing: border-box;
}
.tcd-member-plan-item__price-option span::after {
content: '';
position: absolute;
left: 6px;
top: 50%;
width: 8px;
height: 8px;
border-radius: 50%;
background: #00A4DE;
transform: translateY(-50%) scale(0);
transition: transform 0.2s ease;
}
.tcd-member-plan-item__price-option input[type="radio"]:checked + span::after {
transform: translateY(-50%) scale(1);
}
.tcd-member-plan-item__price-option input[type="radio"]:checked + span::before {
border-color: #bbb;
}
.tcd-member-plan-item__price {
font-size: 22px;
font-weight: 600;
line-height: 1.2;
text-align: center;
color: #000;
} .tcd-member-plan-item__button {
display: grid;
place-items: center;
justify-content: center;
width: 200px;
min-height: 60px;
background-color: #fff;
border-radius: 4px;
border: 1px solid #000;
padding: 0 25px;
font-size: 15px;
line-height: 1.4;
color: #000 !important;
text-decoration: none !important;
text-align: center;
transition:
background-color 0.3s ease,
color 0.3s ease,
border-color 0.3s ease;
}
@media (hover: hover) {
.tcd-member-plan-item__button:hover {
background: #000;
color: #fff !important;
}
} .tcd-member-plan-list-arrow {
position: absolute;
top: 50%;
z-index: 5;
width: 48px;
height: 48px;
border: none;
background: transparent;
cursor: pointer;
transform: translateY(-50%);
}
.tcd-member-plan-list-arrow--prev {
left: -64px;
}
.tcd-member-plan-list-arrow--next {
right: -64px;
}
.tcd-member-plan-list-arrow::before {
content: '';
display: block;
width: 14px;
height: 14px;
margin: auto;
border-top: 2px solid #000;
border-right: 2px solid #000;
}
.tcd-member-plan-list-arrow--prev::before {
transform: rotate(-135deg);
}
.tcd-member-plan-list-arrow--next::before {
transform: rotate(45deg);
}
.tcd-member-plan-list-arrow.swiper-button-disabled {
opacity: 0.25;
pointer-events: none;
}
@media (hover: hover) {
.tcd-member-plan-list-arrow:hover {
opacity: 0.6;
}
}
.tcd-member-plan-list-wrap {
max-width: 100%;
margin: 0 auto;
position: relative;
margin-bottom: 80px !important;
}
.tcd-member-plan-list-wrap.is-no-post-list {
margin-bottom: 40px !important;
}
.tcd-member-plan-list {
overflow: hidden;
}
.tcd-member-plan-list .swiper-slide {
width: 400px;
max-width: 400px;
flex-shrink: 0;
}
.tcd-member-plan-item {
height: 100%;
} .tcd-member-plan-list-scrollbar {
position: relative !important;
left: auto !important;
bottom: auto !important;
width: 100% !important;
height: 4px !important;
margin-top: 32px;
background: #e5e5e5;
border-radius: 999px;
}
.tcd-member-plan-list-scrollbar .swiper-scrollbar-drag {
height: 4px;
background: #000;
border-radius: 999px;
}
.tcd-member-plan-list-scrollbar .swiper-scrollbar-drag:active {
cursor: grabbing;
} .tcd-member-plan-list.is-fit-slides {
width: fit-content;
max-width: 100%;
margin-inline: auto;
} .tcd-member-plan-list.is-fit-slides .swiper-wrapper {
justify-content: flex-start;
} .tcd-member-plan-list.is-fit-slides + .tcd-member-plan-list-scrollbar {
display: none;
}  .tcd-member-plan-list.is-fit-slides .swiper-wrapper {
justify-content: center;
} .tcd-member-plan-list.is-fit-slides .swiper-slide:last-child {
border-right: none;
} .tcd-member-plan-list.is-fit-slides + .tcd-member-plan-list-scrollbar {
display: none;
}
.tcd-member-plan-list.is-fit-slides .swiper-wrapper {
justify-content: center;
}
.tcd-member-plan-list.is-fit-slides .swiper-slide:last-child {
border-right: none;
}
.tcd-member-plan-list.is-fit-slides + .tcd-member-plan-list-scrollbar {
display: none;
}
.tcd-member-plan-post-list .blog_list .title {
text-align: left;
font-size: 16px;
}
.tcd-member-plan-post-list .blog_list .title a {
color: #000;
}
.tcd-member-plan-posts {
display: grid;
gap: 40px;
}
.tcd-member-plan-posts .mypage-membership-subtab {
color: #000;
}
@media (hover: hover) {
.tcd-member-plan-posts .mypage-membership-subtab:hover {
text-decoration: none;
}
}
@media screen and (max-width: 767px) {
.tcd-member-plan-list .swiper-slide {
width: 86vw;
max-width: 86vw;
}
.tcd-member-plan-list-scrollbar {
margin-top: 24px;
}
}
.tcd-member-plan-item__year-saving[hidden] {
display: none;
}
.tcd-member-plan-item__year-saving.is-show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.tcd-member-plan-item__year-saving[hidden] {
display: none;
}
.tcd-member-plan-item__name {
position: relative;
border-bottom: 1px solid #ddd;
z-index: 2;
} .tcd-member-plan-item__name.is-white-plan {
margin-top: 0;
margin-right: 0;
height: 60px;
border-bottom-color: #ddd;
} @media screen and (max-width: 1100px) {
.tcd-member-plan-list-arrow--prev {
left: 10px;
}
.tcd-member-plan-list-arrow--next {
right: 10px;
}
}
@media screen and (max-width: 767px) {
} .archive-member-plan-tabs {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: stretch;
}
.archive-member-plan-tab {
text-decoration: none;
}
@media (max-width: 1000px) {
.archive-member-plan-tabs-wrap {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.archive-member-plan-tabs-wrap::-webkit-scrollbar {
height: 6px;
}
.archive-member-plan-tabs-wrap::-webkit-scrollbar-track {
background: transparent;
}
.archive-member-plan-tabs-wrap::-webkit-scrollbar-thumb {
background: transparent;
}
.archive-member-plan-tabs {
display: inline-flex;
min-width: max-content;
width: max-content;
justify-content: flex-start;
}
.archive-member-plan-tab {
flex: 0 0 auto;
white-space: nowrap;
}
}
#mypage-membership-change-loading {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
margin: 16px 0 20px;
}
.mypage-membership-change-loading-spinner {
width: 28px;
height: 28px;
border: 3px solid rgba(255,255,255,0.25);
border-top-color: #fff;
border-radius: 50%;
animation: paidArticleSpin 0.8s linear infinite;
}
.mypage-membership-change-loading-text {
margin: 0;
font-size: 14px;
line-height: 1.7;
text-align: center;
}
@keyframes paidArticleSpin {
to {
transform: rotate(360deg);
}
}
.mypage-membership-change-body_inner {
display: grid;
gap: 15px;
}
.tcd-legacy-migration-notice {
margin-bottom: 25px;
padding: 40px;
background: #fff;
border: 1px solid #F6AA00;
border-radius: 6px;
}
.tcd-legacy-migration-notice__title {
font-weight: bold;
font-size: 16px;
margin-bottom: 20px;
}
.tcd-legacy-migration-notice__text {
font-size: 14px;
margin-bottom: 20px;
line-height: 2.4;
}
.tcd-legacy-migration-notice__current {
font-size: 14px;
margin-bottom: 20px;
line-height: 2;
}
.tcd-legacy-migration-notice__actions {
margin-top: 10px;
}
.tcd-legacy-migration-notice__actions {
transition: opacity 0.3s ease;
}
@media(hover: hover) {
.tcd-legacy-migration-notice__actions a:hover {
color: #fff !important;
}
.tcd-legacy-migration-notice__actions:hover {
opacity: 0.6;
}
}
.tcd-btn {
padding: 10px 16px;
border: none;
cursor: pointer;
}
.tcd-btn-primary {
background: #F6AA00;
color: #fff;
border-radius: 4px;
transition: opacity 0.3s ease;
}
.tcd-btn-primary_post {
background: #F6AA00;
color: #fff;
border-radius: 5px;
border:1px solid #F6AA00;
transition: opacity 0.3s ease;
}
@media(hover: hover) {
.tcd-btn-primary_post:hover {
opacity: 0.6;
color: #fff !important;
}
.tcd-btn-primary:hover {
opacity: 0.6;
}
}
.mypage-legacy-membership-cleanup-inner_text {
line-height: 2.4;
padding: 40px;
border: 1px solid #F6AA00;
}
.mypage-legacy-membership-cleanup-inner_text_content {
margin-top: 20px;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
display: grid;
gap: 15px;
}
.legacy-membership-cancel-form {
display: grid;
gap: 30px;
}
.legacy-membership-cancel-list {
display: grid;
gap: 15px;
}
.mypage-membership-info-list-cancel-reserved {
margin-top: 25px;
}
.mypage-membership-change-scheduled-note {
color: #777;
}
.mypage-membership-info-card-inner {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0;
}
.mypage-membership-card-actions {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
}
@media (max-width: 767px) {
.mypage-membership-info-card-inner {
display: block;
}
}
.mypage-membership-info-main {
display: grid;
gap: 20px;
}
#mypage-membership-change-overlay.is-transparent-overlay {
background: transparent !important;
}
body.membership-dialog-open {
overflow: hidden;
}
#mypage-membership-change-overlay,
#mypage-membership-change-charge-overlay,
#mypage-membership-change-success-overlay {
background: transparent !important;
}
.premium-membership-year-saving {
font-size: 16px;
font-weight: 600;
color: #D90000;
text-align: center;
}
@media (max-width: 767px) {
.premium-membership-year-saving {
font-size: 14px;
}
.mypage-legacy-membership-cleanup-inner_text {
padding: 30px;
font-size: 14px;
} 
.tcd-legacy-migration-notice {
padding: 30px;
font-size: 14px;
}
.legacy-membership-cancel-item {
font-size: 14px !important;
padding: 8px !important;
}
.mypage-account-notice-inner p {
font-size: 14px;
line-height: 1.8;
}
.tcd-legacy-migration-notice__title {
line-height: 1.6;
}
}
.premium-membership-price-choice input {
margin: 0;
}
.premium-membership-price-choices {
display: flex;
justify-content: center;
gap: 30px;
}
.mypage-account-form-row {
flex-wrap: wrap;
}
.mypage-account-field-error {
grid-column: 2 / 3;
margin: 8px 0 0;
color: #f00;
font-size: 13px;
line-height: 1.6;
}
@media (max-width: 767px) {
.mypage-account-form-row {
grid-template-columns: 1fr;
gap: 15px;
}
.mypage-account-field-error {
grid-column: 1 / -1;
}
}
.mypage-membership-change-success-message {
font-size: 14px;
line-height: 1.8;
}
@media screen and (max-width: 1100px) {
.mypage-membership-period-cell {
display: grid;
}
}
@media screen and (max-width: 767px) {
.mypage-membership-period-cell {
display: flex;
flex-direction: column;
gap: 6px;
}
.mypage-membership-period-date {
text-align: end;
}
.mypage-membership-change-summary {
font-size: 14px !important;
}
}
.mypage-membership-change-scheduled-note {
font-size: 16px;
line-height: 1.6;
font-weight:600;
color: #00A32A;
}
@media screen and (max-width: 767px) {
.mypage-membership-change-scheduled-note {
font-size: 14px;
}
}
body.page-template-page__plan-php .c-breadcrumb__list {
width: 1200px;
}
body.page-template-page__plan-php .no_post {
display: flex;
justify-content: center;
align-items: center;
}
.plan-page-subscribe-area {
display: flex;
justify-content: center;
align-items: center; 
margin-bottom: 70px;
}
.plan-page-load-more-wrap {
display: flex;
justify-content: center;
align-items: center;
margin-top: 70px;
margin-bottom: 40px;
}
.tcd-member-plan-post-list .no_post {
display: flex;
justify-content: center;
align-items: center;
}
.tcd-member-plan-post-list {
opacity: 1;
transition: opacity 0.25s ease;
}
.tcd-member-plan-post-list.is-fade-out {
opacity: 0;
}
.tcd-member-plan-post-list.is-fade-in {
animation: tcdMemberPlanPostsFadeIn 0.45s ease both;
}
@keyframes tcdMemberPlanPostsFadeIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.tcd-member-plan-post-headline {
text-align: center;
font-size: 24px;
line-height: 1.6;
font-weight: 600;
margin-block: var(--tcd-half-read) !important;
}
@media (max-width: 767px) {
.tcd-member-plan-post-headline {
margin: 45px 0 25px;
font-size: 20px;
}
}
.tcd-member-plan-post-list article.item.is-ajax-added {
opacity: 0;
transform: translateY(12px);
}
.tcd-member-plan-post-list article.item.is-ajax-added.is-show {
animation: tcdMemberPlanPostsItemFadeIn 0.45s ease both;
}
@keyframes tcdMemberPlanPostsItemFadeIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media screen and (max-width: 767px) {
.tcd-member-plan-list-wrap {
width: calc(100% + 40px);
max-width: none;
margin-left: -20px;
margin-right: -20px;
overflow: hidden;
margin-bottom: 40px !important;
}
.tcd-member-plan-list {
overflow: visible;
}
.tcd-member-plan-list-scrollbar {
margin-inline: 20px;
width: calc(100% - 40px) !important;
}
.tcd-member-plan-posts {
gap: 30px;
}
.plan-page-load-more-wrap {
margin-top: 30px;
margin-bottom: 0px;
}
}
.tcd-member-plan-item__name.is-color-plan {
position: relative;
}
.mypage-membership-subtab {
appearance: none;
border: 0;
background: transparent;
color: #222;
font-size: 16px;
line-height: 1.4;
font-weight: 400;
padding: 18px 42px;
position: relative;
cursor: pointer;
transition: color 0.3s ease;
} .mypage-membership-subtab > span {
transition: opacity 0.3s ease;
} @media(hover: hover) {
.mypage-membership-subtab:hover > span {
opacity: 0.5;
}
}
.mypage-membership-subtab.is-active {
color: var(--tcd-accent-color);
font-weight: 400;
}  .tcd-member-plan-item__price-option {
cursor: pointer;
} .tcd-member-plan-item__price-option span {
cursor: pointer;
} .tcd-member-plan-item__price-option span::before,
.tcd-member-plan-item__price-option span::after {
cursor: pointer;
} .tcd-member-plan-list-wrap {
cursor: grab;
}
.tcd-member-plan-list-wrap:active {
cursor: grabbing;
} .tcd-member-plan-list,
.tcd-member-plan-list .swiper-wrapper,
.tcd-member-plan-list .swiper-slide {
cursor: inherit;
}
@media (max-width: 767px) {
.archive-member-plan-tabs-wrap {
margin-inline: -20px;
padding-inline: 20px;
text-align: center;
}
.mypage-paid-article .mypage-membership-subtabs-wrap { margin-inline: -20px; margin-bottom: 30px; overflow-x: auto;
overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-inline: 20px; scrollbar-width: none;
-ms-overflow-style: none;
}
.mypage-paid-article .mypage-membership-subtabs-wrap::-webkit-scrollbar {
display: none;
}
.mypage-paid-article .mypage-membership-subtabs { width: max-content;
min-width: max-content; justify-content: center; padding-right: 20px;
}
.mypage-membership-subtab {
font-size: 14px;
padding: 10px;
}
} .tcd-member-plan-item__name.is-color-plan {
border-inline: 1px solid var(--plan-color);
} .tcd-member-plan-item:has(.is-white-plan)
+ .tcd-member-plan-item:has(.is-color-plan)
.tcd-member-plan-item__name.is-color-plan {
border-left-color: var(--plan-color);
} .tcd-member-plan-item__name.is-color-plan {
left: auto !important;
width: 100% !important;
margin-left: 0 !important;
box-sizing: border-box;
border-inline: 1px solid var(--plan-color);
} .tcd-member-plan-item:has(.tcd-member-plan-item__name.is-white-plan):has(+ .tcd-member-plan-item .tcd-member-plan-item__name.is-color-plan)
.tcd-member-plan-item__name.is-white-plan {
border-right-color: transparent;
}
.tcd-member-plan-item__name.is-color-plan {
border-right-color: var(--plan-color) !important;
} .tcd-member-plan-item__name.is-color-plan {
position: relative;
}
.tcd-member-plan-item__name.is-color-plan::after {
content: "";
position: absolute;
top: -1px;
right: -2px;
bottom: -1px;
width: 1px;
background: var(--plan-color);
z-index: 3;
pointer-events: none;
}
.tcd-member-plan-item:has(.tcd-member-plan-item__name.is-color-plan)
+ .tcd-member-plan-item:has(.tcd-member-plan-item__name.is-white-plan)
.tcd-member-plan-item__name.is-white-plan {
border-left-color: transparent;
} .tcd-member-plan-list .swiper-slide:has(.tcd-member-plan-item__name.is-color-plan) {
position: relative;
z-index: 2;
}
.tcd-member-plan-list .swiper-slide:has(.tcd-member-plan-item__name.is-white-plan) {
position: relative;
z-index: 1;
}
@media(hover: hover) {
.tcd-member-plan-posts .blog_list a:hover {
text-decoration: none;
}
.tcd-member-plan-posts .blog_list .title a:hover {
opacity: 0.6;
}
} .tcd-member-plan-item:has(.tcd-member-plan-item__name.is-white-plan):has(+ .tcd-member-plan-item .tcd-member-plan-item__name.is-white-plan)
.tcd-member-plan-item__name.is-white-plan {
border-right-color: transparent;
}
@media screen and (max-width: 767px) {
.tcd-member-plan-list .swiper-slide:last-child
.tcd-member-plan-item__name.is-color-plan::after {
display: none;
}
}
.premium-auth-dialog.is-mypage-auth .premium-auth-title {
display: none;
}
.tcd-member-plan-load-more {
position: relative;
}
.tcd-member-plan-load-more.is-loading {
pointer-events: none;
color: transparent !important;
border-color: transparent !important;
background: transparent !important;
}
.tcd-member-plan-load-more.is-loading::before,
.tcd-member-plan-load-more.is-loading::after,
.tcd-member-plan-load-more.is-loading .tcd-loading-dot-center {
content: '';
position: absolute;
top: 50%;
display: block;
width: 14px;
height: 14px;
background: var(--tcd-accent-color);
border-radius: 50%;
animation: tcd-member-plan-ajax-load-animation 1.8s infinite ease-in-out;
animation-fill-mode: both;
}
.tcd-member-plan-load-more.is-loading::before {
left: calc(50% - 32px);
transform: translateY(-50%);
animation-delay: -0.32s;
}
.tcd-member-plan-load-more.is-loading .tcd-loading-dot-center {
left: 50%;
transform: translate(-50%, -50%);
animation-delay: -0.16s;
}
.tcd-member-plan-load-more.is-loading::after {
left: calc(50% + 18px);
transform: translateY(-50%);
animation-delay: 0s;
}
@keyframes tcd-member-plan-ajax-load-animation {
0%,
80%,
100% {
opacity: 0;
transform: translateY(-50%) scale(0.2);
}
40% {
opacity: 1;
transform: translateY(-50%) scale(1);
}
} .tcd-member-plan-load-more.is-loading .tcd-loading-dot-center {
animation-name: tcd-member-plan-ajax-load-animation-center;
}
@keyframes tcd-member-plan-ajax-load-animation-center {
0%,
80%,
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.2);
}
40% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
@media (min-width: 768px) {
.tcd-member-plan-list-wrap.is-wide-plan-layout {
width: min(1200px, calc(100vw - 40px));
max-width: none;
margin-left: 50%;
margin-right: 0;
transform: translateX(-50%);
}
.tcd-member-plan-list-wrap.is-wide-plan-layout.is-plan-overflow {
width: min(1250px, calc(100vw - 40px));
}
.tcd-member-plan-list-wrap.is-wide-plan-layout .tcd-member-plan-item {
width: 500px;
flex: 0 0 500px;
}
}