.premium-notice{
    width: 100%;
    height: 100%;
    display: grid;
    gap: 30px;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    padding: 50px;
    text-align: center;
    font-size: 16px;
}

.premium-notice .text{
    line-height: 2;
}

.premium-notice .text p{
    margin-block:calc((1em - 1lh) / 2) !important;
}

.premium-notice .headline{
        font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    margin-block: calc((1em - 1lh) / 2);
}

/* ダイアログのオーバーレイ（画面全体を覆う） */
.premium-auth-dialog{
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0 と同じ */
    z-index: 99999999;

    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-dialog の見た目をこちらに移動） */
.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;
}

/* is-open 時にちょい上に戻すアニメ（好みで） */
.premium-auth-dialog.is-open .premium-auth-panel{
    transform: translateY(0);
}

/* タイトル、閉じるボタンなどはそのままでもOK */
.premium-auth-title{
    font-size: 20px;
    font-weight: 600;
    margin-block: calc((1em - 1lh) / 2) !important;
    text-align: center;
}

.premium-auth-close{
    position: absolute;
    right: 8px;
    top: 3px;
    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;
}
}

/* 以下、既存のフォーム系スタイルはそのままでOK */
.premium-btn{
    border: none;
    cursor: pointer;
}

.premium-btn{
  border: 1px solid #000;
  width: 200px;
  margin: 0 auto;
  color: #000 !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;
  background-color: #fff;
  font-size: 16px;
  text-decoration: none;
}

.premium-btn:hover{
  color: #fff !important;
  background-color: #000;
  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: calc((1em - 1lh) / 2) !important;
}

.premium-purchase-dialog-inner p{
  font-size: 16px;
  line-height: 1.6;
  margin-block: calc((1em - 1lh) / 2) !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: #000;
    border: 1px solid #000;
    text-decoration: none !important;
    padding: 0 25px;
    transition: color 0.3s ease,background-color 0.3s ease;
    background-color: #fff;
}


.premium-auth-toggle:hover{
  color: #fff;
  background-color: #000;
}

.premium-auth-toggle:hover{
  color: #fff;
  background-color:#000;
}

.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: calc((1em - 1lh) / 2) !important;
}

.premium-register-desc{
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  margin-block: calc((1em - 1lh) / 2) !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 #000;
  color: #000;
  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: #000;
  color: #fff;
}

/* --- タブナビ --- */

.mypage-paid-article .mypage-tabs{
  display: flex;
  margin: 0 auto 50px;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #000;
  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: 0;
  border-right: 1px solid #000;
  background: #fff;
  color: #000;
  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: #000;
}

.mypage-paid-article .mypage-tab:last-child{
  border-right: none;
}

.mypage-paid-article .mypage-tab.is-active{
  background:#000;
  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 screen and (max-width: 1000px){

	/*
	 * PC用の固定幅・最小幅を解除
	 */
	.mypage-paid-article .mypage-tabs-wrap,
.mypage-paid-article .mypage-tabs,
.mypage-paid-article .mypage-tab-panels{
		min-width: 0 !important;
	}

	/*
	 * メインタブのスクロール領域
	 */
	.mypage-paid-article .mypage-tabs-wrap{
		display: block;
		position: relative;

		width: calc(100% - 40px);
		max-width: 1000px;
		min-width: 0;

		margin: 0 auto 40px;
		padding: 0;

		overflow-x: auto !important;
		overflow-y: hidden !important;

		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;

		/*
		 * スマホの横スワイプを明示的に許可
		 */
		touch-action: pan-x;
	}

	.mypage-paid-article .mypage-tabs-wrap::-webkit-scrollbar{
		display: none;
		width: 0;
		height: 0;
	}

	/*
	 * タブ本体
	 *
	 * 親幅には合わせず、タブの合計幅を持たせる。
	 */
	.mypage-paid-article .mypage-tabs{
		display: flex !important;
		flex-flow: row nowrap !important;

		width: max-content !important;
		inline-size: max-content !important;
		max-width: none !important;
		min-width: max-content !important;

		margin: 0 !important;
		padding: 0 !important;

		border: 0;
		border-radius: 0;
		background: transparent;

		overflow: visible !important;
	}

	/*
	 * 各メインタブ
	 */
	.mypage-paid-article .mypage-tab{
		appearance: none;
		-webkit-appearance: none;

		display: inline-flex;
		align-items: center;
		justify-content: center;

		flex: 0 0 160px !important;
		width: 160px !important;
		min-width: 160px !important;
		max-width: 160px !important;

		height: 54px;
		margin: 0 -1px 0 0;
		padding: 0 14px;

		border: 1px solid #000 !important;
		border-radius: 0;

		background: #fff;
		color: #000;

		font-size: 14px;
		font-weight: 400;
		line-height: 1.4;
		text-align: center;
		white-space: nowrap;

		box-sizing: border-box;
	}

	.mypage-paid-article .mypage-tab:last-child{
		margin-right: 0;
		border-right: 1px solid #000 !important;
	}

	.mypage-paid-article .mypage-tab.is-active{
		background: #000;
		color: #fff;
	}

	/*
	 * タブパネルは通常の画面幅に収める
	 */
	.mypage-paid-article .mypage-tab-panels{
		max-width: 1000px;
		margin-right: auto;
		margin-left: auto;
	}

	/*
	 * アカウント内サブタブも横スクロール化
	 */
	.mypage-paid-article .mypage-membership-subtabs-wrap{
		display: block;
		position: relative;

		width: 100%;
		max-width: 100%;
		min-width: 0;

		margin: 0 0 32px;
		padding: 0;

		overflow-x: auto !important;
		overflow-y: hidden !important;

		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		scroll-behavior: smooth;
		scrollbar-width: none;
		-ms-overflow-style: none;
		touch-action: pan-x;
	}

	.mypage-paid-article
	.mypage-membership-subtabs-wrap::-webkit-scrollbar{
		display: none;
		width: 0;
		height: 0;
	}

	.mypage-paid-article .mypage-membership-subtabs{
		display: flex !important;
		flex-flow: row nowrap !important;

		width: max-content !important;
		max-width: none !important;
		min-width: max-content !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow: visible !important;
	}

	.mypage-paid-article .mypage-membership-subtab{
		display: inline-flex;
		align-items: center;
		justify-content: center;

		flex: 0 0 auto !important;
		width: auto !important;
		min-width: 145px;

		height: 50px;
		padding: 0 20px;
		margin: 0;

		white-space: nowrap;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 767px){

	.mypage-paid-article .mypage-tabs-wrap{
		width: calc(100% - 40px);
		margin-bottom: 30px;
	}

	.mypage-paid-article .mypage-tab{
		flex-basis: 150px !important;
		width: 150px !important;
		min-width: 150px !important;
		max-width: 150px !important;
		height: 50px;
		padding: 0 12px;
		font-size: 13px;
	}


	.mypage-paid-article .mypage-membership-subtab{
		min-width: 135px;
		height: 46px;
		padding: 0 16px;
		font-size: 13px;
	}
}

/* --- 購入記事一覧 --- */

.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;
  font-size: 16px;
}

.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: calc((1em - 1lh) / 2);
  line-height: 1.6;
}

.mypage-account_withdrawal .mypage-account-btn{
  margin-top: 30px;
}

.mypage-account-btn{
  border: 1px solid #000;
  width: 300px;
  margin: 0 auto;
  color: #000;
  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;
  background-color: #fff;
}


.mypage-account-btn:hover{
  color: #fff;
  background-color: #000;
}


/* --- レスポンシブ --- */

@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;
    /*margin-bottom: 30px;*/
  }

  .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: calc((1em - 1lh) / 2) !important;
  line-height: 1.4;
}

.mypage-account-notice-inner p{
  font-size: 14px;
  line-height: 1.6;
  margin-block: calc((1em - 1lh) / 2) !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;
  color: #fff;
}

@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 #000;
  width: 300px;
  margin: 0 auto;
  color: #000;
  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: #000;
  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;
    position: absolute;
    top: 35px;
    left: 45px;
    z-index: 5;
}
    */

@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 .mypage-article-category{
	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.is-confirm { display:none; }
.mypage-account-notice.is-confirm.is-open { display:block; }

/* マイページのダイアログ（成功/エラー/確認 共通） */
.mypage-account-notice{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  display: none; /* is-open で表示 */
  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;
  background-color: #000;
}

.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: #000;
  margin-block: calc((1em - 1lh) / 2) !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;
}


@media screen and (max-width: 767px){


.premium-price_headline{
  font-size: 18px !important;
}

.premium-price{
  font-size: 25px;
}

.premium-price_currency{
  font-size: 18px;
}


}

.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;
}

}

/* パスワードの再設定周りCSS */
.premium-auth-forgot-wrap{
  color: #999999;
  transition: opacity 0.3s ease;
  text-align: center;
  border: none;
}

.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: calc((1em - 1lh) / 2) !important;
  text-align: center;
}

.premium-auth-panel-login .premium-auth-buttons{
  margin-bottom: 0 !important;
}

.premium-auth-forgot-wrap{
  margin-block: calc((1em - 1lh) / 2) !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: calc((1em - 1lh) / 2);
  color:#666;
}

/* 表ジョンテーマ用のレイアウト調整 */
.premium-content-info p{
  margin-block: 0 !important;
}

.mypage-admin-tools{
  margin-bottom: 50px;
}

.mypage-clear-purchases-confirm .desc{
  text-align: left;
}

.premium-price_tax{
  font-size: 14px;

}



#paid-article-cta{
  scroll-margin-top: 20px;
}

.premium-notice_top_content{
  display: grid;
  gap: 20px;
}


.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;
  margin: 0 0 40px;
}

.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: #d9d9d9;
}

@media (hover: hover){
.mypage-membership-subtab:hover{
  opacity: 0.5;
}
}

.mypage-membership-subtab.is-active{
  color: #000;
  font-weight: 600;
}

.mypage-membership-subtab:focus-visible{
  outline: none;
  color: #000;
}


.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;
}

/* =========================
   SP時：横スクロール化
========================= */
@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;
  }

  .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;
}


.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;
}

/* デフォルト：PC */
.is-sp-only{
  display: none;
}

.is-pc-only{
  display: inline-flex;
}

/* SPだけ切り替え */
@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;
  }


}


.js-open-login{
  color: rgb(231, 76, 60) !important;
  text-decoration: underline;
}

@media (hover: hover){
.js-open-login:hover{
  opacity: 0.5;
}
}


@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;
}
}


/* デフォルト（PC）では非表示 */


/* SPで表示 */


.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;
}
}


@media (max-width: 767px){


.mypage-account-notice-inner p{
  font-size: 14px;
  line-height: 1.8;
}


}


.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;
  }
}


/*
#related_post .paid-article-label {
  top: 15px;
  left: 25px;
}

.p-widget-tab-post-list .paid-article-label {
 top: 10px;
 left: 23px;
}

.widget_tcd_widget_ranking_list .p-widget-tab-post-list .paid-article-label {
  left: 45px;
  top: 20px;
}

#ranking_post_list_wrap .ranking_post_list .paid-article-label {
  top: 40px;
  left: 80px;
}

.megamenu_post_list .paid-article-label {
  top: 15px;
  left: 23px;
}
*/

@media screen and (max-width: 767px){


/*
.paid-article-label {
  top: 20px;
  left: 25px;
}

.ranking_post_list .paid-article-label {
  left: 40px;
  height: 40px;
}

#related_post .paid-article-label {
  top: 20px;
}

.p-widget-tab-post-list .paid-article-label {
  top: 15px;
  left: 20px;
}

.widget_tcd_widget_ranking_list .p-widget-tab-post-list .paid-article-label {
  top: 18px;
}

#ranking_post_list_wrap .ranking_post_list .paid-article-label {
  top: 20px;
  left: 60px;
}
*/
}


@media (max-width: 1200px){
  #header{
    z-index: 100000;
  }

  .mypage-account-notice-overlay{
    z-index: 99990;
  }

  .mypage-account-notice{
    z-index: 99995;
  }
}


/* 外側のborderは使わない */


/* 各プランごとにborderを持たせる */


/* --------------------
  カード本体
-------------------- */


/* --------------------
  プラン名エリア
-------------------- */


/* 色付きプラン */


/* 白背景プラン */


/* --------------------
  本文エリア
-------------------- */


/* 最後のプランだけ右borderを付ける */


/* 色付きプランの直後が白プランの場合も、本文の左borderは消さない */


/* 最後のプランだけ右borderを付ける */


/* 1件時だけ本文右borderを付ける */


/* 表示中の右端だけ内側borderを消す */


/* 最後だけ線を消す */


/* プラン1件だけの時は中央配置 */


/* 1件時は固定幅維持 */


/* --------------------
  プランカード
-------------------- */


/* プラン名 */


/* 本文全体 */


/* 上詰め */


/* 下詰め */


/* --------------------
  説明文
-------------------- */


/* フェード */


/* --------------------
  記事数
-------------------- */


/* --------------------
  金額まわり
-------------------- */


/* --------------------
  ボタン
-------------------- */


/* --------------------
  矢印
-------------------- */


/* スクロールバー */


/* プラン合計幅が組み幅以下の時は、外枠も中身幅に合わせる */


/* 中央寄せは不要になるので通常配置 */


/* スクロールバーは非表示 */


/* スライド合計幅が組み幅以下の時 */
/* 組み幅以下なら中央配置 */


/* 最後の区切り線だけ消す */


/* スクロールバー不要 */


/* 白背景は通常通り */

/* --------------------
  SP
-------------------- */


.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;
}
}


@media (max-width: 767px){


.mypage-account-notice-inner p{
  font-size: 14px;
  line-height: 1.8;
}


}


.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-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 > span{
  transition: opacity 0.3s ease;
}

/* hover時は文字だけopacity */
@media (hover: hover){
  .mypage-membership-subtab:hover > span{
    opacity: 0.5;
  }
}


.mypage-membership-subtab.is-active{
  color: #000;
  font-weight: 600;
}


/* ラベル全体 */


/* テキスト */


/* 疑似ラジオ */


/* ========================================
   スクロールエリア：grab cursor
======================================== */


/* Swiper内部も */


@media (max-width: 767px){


  .mypage-paid-article .mypage-membership-subtabs-wrap{

    /* 左右paddingを打ち消す */
    margin-inline: -20px;

    /* 下余白 */
    margin-bottom: 30px;

    /* スクロール */
    overflow-x: auto;
    overflow-y: hidden;

    /* iOS慣性 */
    -webkit-overflow-scrolling: touch;

    /* 横padding */
    padding-inline: 20px;

    /* scrollbar */
    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;
}

}

/* 色付きプラン名は左右borderも背景色にする */


/* 色付きプランの左隣が白プランの場合、白プラン側の右borderを色付き側で上書きする */


/* 色付きプラン名：位置ズレを完全リセット */


/* 白プランの右隣が色付きプランの場合、白プラン側の右borderだけ消す */


/* 色付きプラン名の右端に、背景色と同じ1px線を上から被せる */


/* 色付きプランを隣の白プランより前面に出す */


/* 白プラン同士が並ぶ時だけ、前側の右borderを消す */


.premium-auth-dialog.is-mypage-auth .premium-auth-title{
  display: none;
}


/* 中央だけ translate が違うので専用補正 */


/* 各カードの外側borderは付けない */


/* プラン名 */


/* 本文 */


/* 最後のプランだけ右線を付ける */


/* 1件だけの場合も右線を付ける */


/* 色付きプラン名の場合 */


/* 色付きプランの本文は通常border */


/* 白プラン */


/* スライダー無効時は外側のgrabカーソルを解除 */


/* ボタンやラジオは通常通り */


/* カテゴリーリンクなど、カード内の個別リンクを前面に出す */


.premium-auth-field{
	position: relative;
}

.premium-auth-field-password .premium-auth-field_input{
	padding-right: 56px;
	box-sizing: border-box;
}

.premium-auth-password-toggle{
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	min-width: 0;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

.premium-auth-password-toggle:hover,
.premium-auth-password-toggle:focus{
	background: transparent;
	box-shadow: none;
	outline: none;
}

.premium-auth-password-toggle-icon,
.premium-auth-password-toggle svg{
	width: 22px;
	height: 22px;
	display: block;
}

.premium-auth-dialog,
.premium-auth-dialog *{
	box-sizing: border-box;
}

.premium-auth-panel{
	width: min(520px, calc(100vw - 32px));
	max-width: 100%;
	overflow: hidden;
}

.premium-auth-form-inner{
	width: 100%;
	max-width: 100%;
}

.premium-auth-field{
	width: 100%;
	max-width: 100%;
	position: relative;
}

.premium-auth-field_input{
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.premium-btn:hover{
  background-color: #000;
}

.premium-purchase-desc{
  font-size: 14px;
}

.premium-dialog-close{
  color: #fff;
}

.paid-article-locked-cta-group{
	clear: both;
	position: relative;
	z-index: 1;
}

.paid-article-locked-cta-group > .premium-notice{
	margin-top: 0;
}

.paid-article-locked-cta-group > :last-child{
	margin-bottom: 0;
}

/*鍵アイコンの位置調整*/
.paid-article-label--icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-right: 7px;
	color: #000;
	vertical-align: -4px;
}

.paid-article-label--icon svg{
	width: 100%;
	height: 100%;
  fill: currentColor;
}

.paid-article-label--paid{
	color: #000;
}

.paid-article-label--free{
	color:#000;
}

.paid-article-title-lock{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 6px;
	font-size: 0.85em;
	line-height: 1;
	vertical-align: 1px;
}

.premium-notice .text p{
  font-size: 16px;
}

.mypage-account-label{
  font-size: 16px;
}

.mypage-paid-article .mypage-header-left_headline{
  font-size: 16px;
}


.mypage-paid-article .mypage-tab-panel .mypage-article-category-list{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}


.mypage-paid-article .mypage-tab-panel .mypage-article-category{
	position: static;
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 3px 8px;
	font-size: 12px;
	background: #f2f2f2;
	color: #333;
}


/* SP */
@media screen and (max-width: 767px){
  .mypage-paid-article .mypage-tab-panel .blog_list{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .mypage-paid-article .mypage-tab-panel .blog_list .item_link{
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .mypage-paid-article .mypage-tab-panel .blog_list .title{
    font-size: 16px;
  }
}

.mypage-register-block p{
  line-height: 1.6;
}

.mypage-paid-article{
  padding-block: 0;
}

/* マイページ用の記事一覧のレイアウト調整：アイキャッチなし */
.mypage-paid-article .mypage-tab-panel .blog_list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
  border: none;
}

.mypage-paid-article .mypage-tab-panel .blog_list .item{
  margin: 0;
  padding: 0;
  border: 1px solid #ddd;
  background: #fff;
  list-style: none;
  padding: 20px;
  gap: 20px;
}

.mypage-paid-article .mypage-tab-panel .blog_list .item.no-thumbnail{
  padding: 0;
  gap: 0;
}

.mypage-paid-article .mypage-tab-panel .blog_list .item_link{
  display: block;
  padding: 22px 26px;
  color: inherit;
  text-decoration: none;
}


.mypage-paid-article .mypage-tab-panel .blog_list .content{
  min-width: 0;
  display: grid;
  gap: 20px;
}

.mypage-paid-article .mypage-tab-panel .blog_list .title{
  position: static;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: #222;
  text-decoration: none;
}

.mypage-paid-article .mypage-tab-panel .blog_list .title *{
  text-decoration: none;
}

.mypage-paid-article .mypage-tab-panel .blog_list .date{
  display: block;
  font-size: 14px;
  color: #888;
  text-decoration: none;
}

@media screen and (max-width: 767px){
  .mypage-paid-article .mypage-tab-panel .blog_list .item_link{
    padding: 18px 20px;
  }

  .mypage-paid-article .mypage-tab-panel .blog_list .title{
    font-size: 16px;
  }
}


.mypage-purchased-article-title{
  margin-block: 0 !important;
  color: #000 !important;
  font-size: 18px !important;
}

.mypage-purchased-article-category{
  color: #000 !important;
  font-size: 14px !important;
}

.mypage-purchased-article-date{
  color: #000;
  font-size: 14px !important;
}

.mypage-purchased-article{
  border: 1px solid #ddd;
  padding-block: 20px;
  padding-inline: 30px;
}

.mypage-purchased-article-link:hover{
  text-decoration: none !important;
}


/* ---------- PC ---------- */

@media screen and (min-width: 768px){

	/*
	 * 本文幅を抜けて、画面中央を基準に表示する。
	 */


	/*
	 * 1プラン：500px
	 */


	/*
	 * 2プラン：400px × 2
	 */


	/*
	 * 3プラン：400px × 3
	 */


	/*
	 * Splideと同じ要素に付いているカード幅を固定する。
	 */


	/*
	 * 1〜3件のPC固定表示ではスクロールバー不要。
	 */

}

/* ---------- SP ---------- */

@media screen and (max-width: 767px){


	/*
	 * 1件は通常表示。
	 */


	/*
	 * 2件・3件はスマホスライダー。
	 */


}

/* ---------- スクロールバー ---------- */

/* PCでは固定表示なので不要 */


/* SPは2件・3件のみ表示 */


/* ==========================================================
 * マイページの記事一覧
 * アイキャッチ画像の表示サイズを統一
 * ========================================================== */

/*
 * 実際のHTMLでは、画像と本文はarticle.itemの直下にある。
 */
.mypage-paid-article .blog_list .item{
	display: flex;
	align-items: center;
	gap: 30px;
	min-width: 0;
}

/*
 * アイキャッチ画像の表示枠を固定する。
 *
 * 元画像が縦長・横長・正方形でも、
 * 必ず180px × 135pxの枠で表示する。
 */
.mypage-paid-article .blog_list .item > .image{
	position: relative;
	display: block;
	flex: 0 0 220px;
	width: 220px;
	height: 160px;
	min-width: 180px;
	overflow: hidden;
	background-color: #f2f2f2;
}

/*
 * 枠全体を覆うように画像を拡大し、
 * はみ出した部分を中央基準で切り取る。
 */
.mypage-paid-article .blog_list .item > .image img{
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: 50% 50%;
}

/*
 * 記事情報部分。
 */
.mypage-paid-article .blog_list .item > .content{
	flex: 1 1 auto;
	min-width: 0;
}

/*
 * アイキャッチがない記事は本文だけで横幅を使う。
 */
.mypage-paid-article .blog_list .item.no-thumbnail > .content{
	width: 100%;
}

/*
 * スマートフォン。
 */
@media screen and (max-width: 767px){

	.mypage-paid-article .blog_list .item{
		gap: 15px;
	}

	.mypage-paid-article .blog_list .item > .image{
		flex-basis: 130px;
		width: 130px;
		height: 120px;
		min-width: 130px;
	}
}

.mypage-tab-panel .blog_list .has-thumbnail .item_link{
  display: flex !important;
  gap: 25px;
}

.premium-price-limit-note{
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px solid #d63638;
	background: #fff5f5;
	color: #b32d2e;
	line-height: 1.8;
}


/* ========================================
 * マイページ全体の中央配置
 * ======================================== */
.mypage-paid-article,
.mypage-paid-article *{
	box-sizing: border-box;
}

.mypage-paid-article{
	width: 100%;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

/*
 * テーマ側の .l-inner の幅に左右されず、
 * マイページの各主要エリアを中央配置する。
 */
.mypage-paid-article .mypage-header,
.mypage-paid-article .mypage-tabs-wrap,
.mypage-paid-article .mypage-tab-panels{
	width: 100%;
	max-width: 1000px;
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
}

/*
 * タブ自体はラッパー幅いっぱい
 */
.mypage-paid-article .mypage-tabs{
	width: 100%;
	max-width: none;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
}

/*
 * アカウントブロックはタブパネル内の幅いっぱい
 */
.mypage-paid-article .mypage-account-block{
	width: 100%;
	max-width: none;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
}

/*
 * 各サブタブパネルも親幅いっぱい
 */
.mypage-paid-article .mypage-account-subtab-panel{
	width: 100%;
	max-width: none;
	min-width: 0;
}

/*
 * 画像・入力欄などが親幅を押し広げないようにする
 */
.mypage-paid-article img,
.mypage-paid-article input,
.mypage-paid-article select,
.mypage-paid-article textarea{
	max-width: 100%;
}

@media screen and (max-width: 767px){
	.mypage-paid-article .mypage-header,
.mypage-paid-article .mypage-tabs-wrap,
.mypage-paid-article .mypage-tab-panels{
		width: 100%;
		max-width: none;
	}

	.mypage-paid-article .mypage-tabs{
		width: 100%;
	}

  .mypage-paid-article .l-inner{
    inline-size: 100%;
  }
}


.mypage-tab-panels{
  padding-bottom: 40px;
}

.l-main .mypage-tab-panels{
  padding-bottom: 0;
}


.l-main:has(.mypage-paid-article){
  gap: 40px;
}


/* 記事カードを行の高さまで伸ばす */
.mypage-paid-article .blog_list .item{
	display: flex;
	height: 100%;
}

/* リンクをカード全体の高さまで伸ばす */
.mypage-paid-article .blog_list .item_link{
	display: flex !important;
	align-items: center;
	width: 100%;
	height: 100%;
	min-height: 100%;
	box-sizing: border-box;
}

/* アイキャッチなしもflexを維持 */
.mypage-paid-article .blog_list .item.no-thumbnail .item_link{
	display: flex !important;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
}

/* アイキャッチなしの本文をカード中央へ */
.mypage-paid-article .blog_list .item.no-thumbnail .content{
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-width: 0;
  padding: 30px;
}

.mypage-paid-article{
  padding-bottom: 40px;
}


.premium-auth-field-password{
	position: relative;
}

.premium-auth-field-password .premium-auth-field_input{
	width: 100%;
	padding-right: 55px;
	box-sizing: border-box;
}

.premium-auth-password-toggle{
	position: absolute;
	top: 50%;
	right: 14px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #222;
	transform: translateY(-50%);
	cursor: pointer;
}

.premium-auth-password-toggle-icon{
	display: block;
	width: 22px;
	height: 22px;
	pointer-events: none;
}

.premium-auth-password-toggle .icon-eye{
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* パスワード非表示時 */
.premium-auth-password-toggle .icon-eye-open{
	display: none;
}

.premium-auth-password-toggle .icon-eye-closed{
	display: block;
}

/* パスワード表示時 */
.premium-auth-field-password.is-password-visible
.icon-eye-open{
	display: block;
}

.premium-auth-field-password.is-password-visible
.icon-eye-closed{
	display: none;
}


.paid-article-locked-cta-group{
	display: flex;
	flex-direction: column;
	gap: 32px;

	width: 100%;

	/*
	 * WordPressブロックテーマの記事本文幅を使用。
	 * CSS変数がないテーマでは820pxを使用する。
	 */
	max-width: var(--wp--style--global--content-size, 100%);

	margin-left: auto;
	margin-right: auto;

	padding: 0;
	box-sizing: border-box;
}

/* グループ内の各CTA */
.paid-article-locked-cta-group > .premium-notice{
	position: static;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	margin-left: 0;
	margin-right: 0;

	transform: none;
	box-sizing: border-box;
}


/* フォームも親幅に収める */


/* スマホ */
@media screen and (max-width: 767px){
	.paid-article-locked-cta-group{
		max-width: 100%;
		gap: 24px;
	}


}


.p-single-content > .paid-article-locked-cta-group{
	clear: both;
	width: 100%;
	max-width: 100%;
	margin-top: 40px;
	margin-bottom: 50px;
	box-sizing: border-box;
}

@media screen and (max-width: 767px){
	.p-single-content > .paid-article-locked-cta-group{
		margin-top: 0;
		margin-bottom:0;
	}
}

/*
.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;
}
}


/*
 * 一部有料記事：無料部分末尾のフェード
 */
.tcdce-body:has(> .paid-article-content-fade){
	position: relative;
	overflow: visible;
}

/*
 * フェード要素自体は高さを持たせず、
 * 本文末尾へ重ねる
 */
.tcdce-body > .paid-article-content-fade{
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;

	width: 100%;
	height: 5.5em;

	margin: 0;
	padding: 0;

	pointer-events: none;

	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.45) 35%,
		rgba(255, 255, 255, 0.88) 72%,
		#fff 100%
	);
}

/*
 * CTAとの間隔
 */
.tcdce-body:has(> .paid-article-content-fade)
+ .paid-article-locked-cta-group{
	margin-top: 0;
}


@media screen and (max-width: 767px){
.mypage-paid-article .mypage-tab-panel .blog_list{
  grid-template-columns: 1fr;
  gap: 20px;
}
}


@media screen and (max-width: 767px){

	/*
	 * タブスクロール領域
	 */
	.mypage-paid-article .mypage-tabs-wrap{

		width: 100vw !important;
		max-width: none !important;

		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		margin-bottom: 30px;

		overflow-x: auto !important;
		overflow-y: hidden !important;

		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;

		touch-action: pan-x;
	}

	.mypage-paid-article .mypage-tabs-wrap::-webkit-scrollbar{
		display: none;
	}

	/*
	 * タブ本体
	 */
	.mypage-paid-article .mypage-tabs{

		display: flex !important;
		flex-wrap: nowrap !important;

		width: max-content !important;
		min-width: max-content !important;
		max-width: none !important;

		margin: 0 !important;
		padding: 0 !important;

		overflow: visible !important;
	}

	/*
	 * 左右の余白
	 */
	.mypage-paid-article .mypage-tabs::before,
.mypage-paid-article .mypage-tabs::after{
		content: "";
		flex: 0 0 20px;
	}

	/*
	 * タブ
	 */
	.mypage-paid-article .mypage-tab{

		flex: 0 0 150px !important;

		width: 150px !important;
		min-width: 150px !important;
		max-width: 150px !important;

		height: 50px;

		margin: 0 -1px 0 0;
		padding: 0 12px;

		box-sizing: border-box;
		white-space: nowrap;
	}

	.mypage-paid-article .mypage-tab:last-child{
		margin-right: 0;
	}
}

@media screen and (max-width: 767px){
.mypage-paid-article{
  padding-bottom: 0;
}
}


@media screen and (max-width: 767px){


	/*
	 * カード幅
	 * 画面の左右に少し次のカードが見えるサイズ
	 */

}


@media screen and (min-width: 768px){


	/*
	 * Splide自身にリスト幅とtransformを管理させる。
	 * width:max-content や min-width:100% は指定しない。
	 */


	/*
	 * autoWidth:true を使用しているため、
	 * カード幅だけ400pxに固定する。
	 */


}

.mypage-purchased-article-link{
  text-decoration: none !important;
}

body.my-paid-article-mypage-page .l-sidebar{
	display: none !important;
}

.premium-auth-buttons{
  margin-top: 0;
}


/* ==========================================================
 * マイページの記事一覧リンク
 * ========================================================== */

.mypage-paid-article .blog_list .item{
	position: relative;
}

.mypage-paid-article .blog_list .item > .image{
	display: block;
	color: inherit;
	text-decoration: none;
}

.mypage-paid-article .blog_list .item > .image img{
	display: block;
	width: 100%;
	height: auto;
}

.mypage-paid-article .blog_list .title a{
	display: block;
	color: inherit;
	text-decoration: none;
}

.mypage-paid-article .blog_list .mypage-article-category{
	position: relative;
	z-index: 2;

	display: inline-flex;
	align-items: center;

	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

@media (hover: hover){

	.mypage-paid-article .blog_list .title a:hover{
		opacity: 0.7;
	}

	.mypage-paid-article .blog_list .mypage-article-category:hover{
		opacity: 0.7;
		text-decoration: none;
	}

}

.mypage-paid-article .blog_list .title a{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;

	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;

	line-height: 1.7;
}

/* ==========================================================
 * ショートコード：プラン記事一覧リンク
 * ========================================================== */


.mypage-purchased-article .content{
  display: grid;
  gap: 15px;
}

/*
 * タイトル3行制限
 */


/* パスワードをお忘れの方はこちら */
.premium-auth-forgot-wrap{
  margin: 0;
  text-align: center;
}

.premium-auth-forgot-link{
  display: inline;
  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #999999;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: center;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  font-size: 16px !important;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.premium-auth-forgot-link:hover,
.premium-auth-forgot-link:focus,
.premium-auth-forgot-link:active{
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #999999;
  transform: none;
}

.premium-auth-forgot-link:focus-visible{
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (hover: hover){
  .premium-auth-forgot-link:hover{
    opacity: 0.6;
  }
}


/*
 * マイページ本体の共通幅
 */
body.my-paid-article-mypage-page .mypage-inner{
	width: min(1000px, calc(100vw - 40px));
	max-width: 1000px;
	margin-inline: auto;
	box-sizing: border-box;
}


.premium-single-sales-stopped-note{
	max-width: 760px;
	padding: 25px 30px;
	border: 1px solid #e64545;
	box-sizing: border-box;
	background: #fff;
	color: #e64545;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
	text-align: center;
}

/* ==========================================================
 * マイページの記事一覧：タイトルを2行まで表示
 * ========================================================== */

.mypage-paid-article
.blog_list
.mypage-article-title{
	margin: 0;
	min-width: 0;
	overflow: hidden;
}

.mypage-paid-article
.blog_list
.mypage-article-title > a{
	display: block;
	min-width: 0;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.mypage-paid-article
.blog_list
.mypage-article-title-text{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;

	line-height: 1.6;
	max-height: 3.2em;
}

/* ==========================================================
 * マイページ・プラン記事ショートコード共通の記事一覧
 * ========================================================== */

/*
 * 一覧全体
 * PCでは2列表示
 */
.mypage-paid-article .blog_list{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/*
 * 記事カード
 */
.mypage-paid-article .blog_list .item{
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
	min-width: 0;
	padding: 20px;
	border: 1px solid #ddd;
  flex-direction: row;
	background: #fff;
	box-sizing: border-box;
}

/*
 * アイキャッチ画像
 */
.mypage-paid-article .blog_list .item > .image{
	position: relative;
	display: block;
	flex: 0 0 220px;
	width: 220px;
	height: 160px;
	min-width: 180px;
	overflow: hidden;
	background: #f2f2f2;
}

/*
 * 元画像の縦横比にかかわらず中央で切り取る
 */
.mypage-paid-article .blog_list .item > .image img{
	position: absolute;
	inset: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: 50% 50%;
}

/*
 * 記事情報
 */
.mypage-paid-article .blog_list .item > .content{
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
  gap: 15px;
}

/*
 * アイキャッチがないカード
 */
.mypage-paid-article .blog_list .item.no-thumbnail > .content{
	width: 100%;
}

/*
 * カテゴリー一覧
 */
.mypage-paid-article .blog_list .mypage-article-category-list{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * カテゴリーボタン
 */
.mypage-paid-article .blog_list .mypage-article-category{
	position: static;
	display: inline-flex;
	align-items: center;
	width: auto;
	min-width: 0;
	padding: 8px 8px;
	background: #f5f5f5;
	color: #000;
	font-size: 12px;
	line-height: 1.4;
	text-decoration: none;
}

/*
 * タイトル
 */
.mypage-paid-article .blog_list .mypage-article-title{
	width: 100%;
	min-width: 0;
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}

/*
 * タイトルリンク
 */
.mypage-paid-article .blog_list .mypage-article-title > a{
	display: block;
	min-width: 0;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	white-space: normal;
}

/*
 * タイトルは2行まで
 */
.mypage-paid-article .blog_list .mypage-article-title-text{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	line-height: 1.6;
	max-height: 3.2em;
}

/*
 * 投稿日
 */
.mypage-paid-article .blog_list .date{
	display: block;
	color: #888;
	font-size: 14px;
	line-height: 1.5;
}

/*
 * タブ切り替え時などのテーマ側アニメーションの影響を避ける
 */


@media screen and (max-width: 767px){

	.mypage-paid-article .blog_list{
		gap: 20px;
	}

	.mypage-paid-article .blog_list .item{
		gap: 15px;
		padding: 15px;
	}

	.mypage-paid-article .blog_list .item > .image{
		flex-basis: 130px;
		width: 140px;
		height: 130px;
		min-width: 130px;
	}

	.mypage-paid-article .blog_list .mypage-article-title{
		margin-bottom: 12px;
		font-size: 15px;
	}

	.mypage-paid-article .blog_list .mypage-article-category-list{
	}

	.mypage-paid-article .blog_list .mypage-article-category{
		padding: 5px 8px;
		font-size: 12px;
	}

	.mypage-paid-article .blog_list .date{
		font-size: 12px;
	}

	.mypage-paid-article .blog_list .item > .content{
		gap: 7px;
	}


}


/* ==========================================================
 * 販売停止メッセージ共通
 * 枠・背景なしの赤文字表示
 * ========================================================== */
/* ==========================================================
 * 販売停止メッセージ共通
 * 1つのdiv内に赤文字・黒文字をまとめて表示
 * ========================================================== */


/*
 * 1行目：販売停止メッセージ
 */


/*
 * 2行目：ログイン案内
 */


/*
 * ボタンとの間隔
 */
.premium-single-sales-stopped
.premium-auth-entry-buttons{
	margin-top: 0;
}

/*
 * 旧クラスが残っている箇所のための保険
 */
.premium-single-sales-stopped-note{
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 0;
	background: transparent;

	color: #e64545;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7;
	text-align: center;
}

@media screen and (max-width: 767px){


	.premium-single-sales-stopped-note{
		font-size: 14px;
		line-height: 1.7;
	}
}


/* ==========================================================
 * マイページの記事一覧
 * 画像ホバー時のみズーム
 * ========================================================== */

/* 画像枠 */
.blog_list .item.has-thumbnail .image{
	display: block;
	overflow: hidden;
}

/* 画像 */
.blog_list .item.has-thumbnail .image img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;

	transform: scale(1);
	transition: transform .8s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}

/* 画像ホバー時のみ */
@media (hover: hover){

	.blog_list .item.has-thumbnail .image:hover img,
.blog_list .item.has-thumbnail .image:focus img{
		transform: scale(1.08);
	}

}

/* ==========================================================
 * マイページ記事一覧
 * リンクホバーを滑らかに
 * ========================================================== */

.blog_list .mypage-article-category,
.blog_list .mypage-article-title a{
	transition: opacity .3s ease, color .3s ease !important;
}

/* ホバー時 */
@media (hover: hover){

	.blog_list .mypage-article-category:hover,
.blog_list .mypage-article-title a:hover{
		opacity: .5 !important;
	}

}

.mypage-paid-article .mypage-tab-panel .blog_list .date{
margin-top: -5px;
}


/**
 * YOMERU - Paywall & Membership - My Page layout
 *
 * Loaded only on the plugin's virtual My Page.
 */

body.my-paid-article-mypage-page .l-contents{
	width: 100% !important;
	max-width: none !important;
}

body.my-paid-article-mypage-page .c-breadcrumb{
	display: none !important;
}


.page_headline_paid_member{
  font-size: 32px;
  text-align: center;
  padding-top: 70px;
  margin-block: calc((1em - 1lh) / 2);
}

.page_headline_paid_member{
  margin-bottom: 40px;
}

.l-contents .l-main .page_headline_paid_member{
  margin-bottom: 0;
}

@media screen and (max-width: 767px){
.page_headline_paid_member{
  font-size: 20px;
  padding-top: 40px;
}
}