@charset "UTF-8";

/*---Topページ---*/
/* メインビジュアル */
.p-mainVisual__imgLayer {
background-image: url('https://cardstack.jp/wp-content/uploads/2026/08/cardstack-bg_sp3.jpg');
background-size: cover;
background-position: center;
background-color: #01040f; /* 画像読み込み前の保険としても残す */
}

#mainVisual_content_wrap {
z-index: 10;
}

#mainVisual_content_wrap .swell-block-fullWide__inner {
display: flex;
flex-direction: column;
justify-content: center;
width: 100vw;
height: 100vh;
background: rgb(0 0 0 / 50%);
}

.mainVisual_content_area {
text-align: center;
}

.mainVisual_subtitle {
font-family: "Oswald", "Noto Sans JP", YuGothic, -apple-system, sans-serif;
font-size: .85em;
margin-bottom: 1em;
text-shadow: 0.05em 0.05em 0.05em rgb(0, 0, 0);
}

.mainVisual_title {
display: none;
font-weight: 600;
font-size: clamp(2.4rem, 1.68vw + 2.02rem, 3.375rem);
line-height: 1.4;
margin-bottom: 20px;
text-shadow: 0.03em 0.03em 0.03em rgb(0, 0, 0);
}

.mainVisual_text {
text-shadow: 0.05em 0.05em 0.05em rgb(0, 0, 0);
}

.p-mainVisual__textLayer .wp-block-search__input {
padding: .30em 1em;
border-radius: 6px;
background: #fff;
border: 2px solid #000;
font-size: 16px;
}

.p-mainVisual__textLayer .wp-block-search {
position: relative;
}

.p-mainVisual__textLayer .wp-block-search:after {
position: absolute;
top: 50%;
right: 15px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
display: block;
content: "\e92e";
font-family: icomoon !important;
font-style: normal;
font-variant: normal;
font-weight: 400;
line-height: 1;
text-transform: none;
color: #000;
font-size: 22px;
pointer-events: none;
}

.p-mainVisual__textLayer .keyword-list {
justify-content: center;
}

.mainVisual_bg_wrap {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

.mainVisual_bg_area {
pointer-events: none;
height: 100%;
}

.mainVisual_bg_card {
list-style: none;
width: min(29.1667vw, 560px);
height: 100%;
position: absolute;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-fill-mode: both;
}

.mainVisual_bg_card.pokeca-list {
left: 0px;
filter: drop-shadow(rgba(255, 170, 0, 0.86) min(0.260417vw, 5px) min(0.677083vw, 13px) min(2.60417vw, 50px));
}

.mainVisual_bg_card.yugioh-list {
right: 0px;
filter: drop-shadow(rgba(136, 43, 255, 0.86) min(0.260417vw, 5px) min(0.677083vw, 13px) min(2.60417vw, 50px));
}

.cs-stats-bar {
display: flex;
justify-content: center;
gap: 3em;
margin-top: 2em;
flex-wrap: wrap;
}

.cs-stats-item {
text-align: center;
}

.cs-stats-number {
display: block;
font-family: "Oswald", "Noto Sans JP", YuGothic, -apple-system, sans-serif;
font-size: clamp(2.6rem, 0.6vw + 2.46rem, 3rem);
font-weight: 600;
background: linear-gradient(90deg, #a020f0, #ff8c00);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1;
}

.cs-stats-label {
display: block;
font-size: .85rem;
color: #ccc;
margin-top: .6rem;
}

.cs-stats-caption {
font-size: 11px;
color: #8a8a95;
text-align: center;
margin-top: 0.6em;
}

/* keyframes */
@keyframes loopSp {
0%   { transform: translateY(min(44vw, 330px));            opacity: 0; }
10%  { opacity: 1; }
90%  { opacity: 1; }
100% { transform: translateY(max(-182.6666666667vw, -1370px)); opacity: 0; }
}

@keyframes rotate01 {
0%   { transform: rotateX(0deg)   rotateY(0deg)   rotateZ(0deg); }
100% { transform: rotateX(45deg)  rotateY(65deg)  rotateZ(60deg); }
}

@keyframes rotate02 {
0%   { transform: rotateX(20deg)  rotateY(10deg)  rotateZ(40deg); }
100% { transform: rotateX(35deg)  rotateY(45deg)  rotateZ(-20deg); }
}

@keyframes rotate03 {
0%   { transform: rotateX(-20deg) rotateY(20deg)  rotateZ(-20deg); }
100% { transform: rotateX(40deg)  rotateY(60deg)  rotateZ(40deg); }
}

@keyframes rotate04 {
0%   { transform: rotateX(20deg)  rotateY(20deg)  rotateZ(30deg); }
100% { transform: rotateX(-30deg) rotateY(-40deg) rotateZ(-30deg); }
}

@keyframes rotate05 {
0%   { transform: rotateX(35deg)  rotateY(20deg)  rotateZ(-20deg); }
100% { transform: rotateX(-15deg) rotateY(-25deg) rotateZ(40deg); }
}

.post_content li.mainVisual_bg_item {
position: absolute;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: loopSp;
animation-duration: 11s;
bottom: max(-6.6666666667vw, -50px);
}

.mainVisual_bg_item img {
animation-timing-function: linear;
animation-iteration-count: infinite;
max-width: 200px;
}

/* 各カードの設定 */
.mainVisual_bg_card.pokeca-list li img {
border-radius: 3.8%;
}

.post_content li.mainVisual_bg_item.pokeca-1 {
left: max(-1.04167vw, -20px);
z-index: 9;
animation-duration: 10s;
animation-delay: -2.9s;
}
.post_content li.mainVisual_bg_item.pokeca-2 {
left: min(3.90625vw, 75px);
z-index: 8;
animation-duration: 14s;
animation-delay: -11.5s;
}
.post_content li.mainVisual_bg_item.pokeca-3 {
left: min(10.4167vw, 200px);
z-index: 7;
animation-duration: 9s;
animation-delay: -6.2s;
}
.post_content li.mainVisual_bg_item.pokeca-4 {
left: min(15.1042vw, 290px);
z-index: 6;
animation-duration: 13s;
animation-delay: -1.2s;
}
.post_content li.mainVisual_bg_item.pokeca-5 {
left: min(20.8333vw, 400px);
z-index: 5;
animation-duration: 18s;
animation-delay: -6s;
}
.post_content li.mainVisual_bg_item.pokeca-6 {
z-index: 4;
animation-duration: 17s;
animation-delay: -11.9s;
}
.post_content li.mainVisual_bg_item.pokeca-7 {
left: min(15.1042vw, 290px);
z-index: 3;
animation-duration: 18s;
animation-delay: -10.3s;
}
.post_content li.mainVisual_bg_item.pokeca-8 {
left: min(10.4167vw, 200px);
z-index: 2;
animation-duration: 17s;
animation-delay: -0.6s;
}

.post_content li.mainVisual_bg_item.pokeca-1 img {
width: min(31.6vw, 237px);
animation-name: rotate04;
animation-duration: 10s;
animation-delay: -2.9s;
}
.post_content li.mainVisual_bg_item.pokeca-2 img {
width: min(31.6vw, 237px);
animation-name: rotate02;
animation-duration: 14s;
animation-delay: -11.5s;
}
.post_content li.mainVisual_bg_item.pokeca-3 img {
width: min(20.4vw, 153px);
animation-name: rotate03;
animation-duration: 9s;
animation-delay: -6.2s;
}
.post_content li.mainVisual_bg_item.pokeca-4 img {
width: min(20.4vw, 153px);
animation-name: rotate01;
animation-duration: 13s;
animation-delay: -1.2s;
}
.post_content li.mainVisual_bg_item.pokeca-5 img {
width: min(12.6666666667vw, 95px);
animation-name: rotate05;
animation-duration: 18s;
animation-delay: -6s;
}
.post_content li.mainVisual_bg_item.pokeca-6 img {
width: min(12.6666666667vw, 95px);
animation-name: rotate02;
animation-duration: 17s;
animation-delay: -11.9s;
}
.post_content li.mainVisual_bg_item.pokeca-7 img {
width: min(12.6666666667vw, 95px);
animation-name: rotate05;
animation-duration: 18s;
animation-delay: -10.3s;
}
.post_content li.mainVisual_bg_item.pokeca-8 img {
width: min(12.6666666667vw, 95px);
animation-name: rotate04;
animation-duration: 17s;
animation-delay: -0.6s;
}

.post_content li.mainVisual_bg_item.yugioh-1 {
right: min(1.6145833333vw, 31px);
z-index: 9;
animation-duration: 10.5s;
animation-delay: -8.9s;
}
.post_content li.mainVisual_bg_item.yugioh-2 {
right: min(2.6041666667vw, 50px);
z-index: 8;
animation-duration: 13s;
animation-delay: -6.6s;
}
.post_content li.mainVisual_bg_item.yugioh-3 {
right: min(20.5729166667vw, 395px);
z-index: 7;
animation-duration: 10s;
animation-delay: -7.2s;
}
.post_content li.mainVisual_bg_item.yugioh-4 {
right: min(16.3020833333vw, 313px);
z-index: 6;
animation-duration: 18s;
animation-delay: -5.2s;
}
.post_content li.mainVisual_bg_item.yugioh-5 {
right: min(19.7916666667vw, 380px);
z-index: 5;
animation-duration: 17s;
animation-delay: -6.4s;
}
.post_content li.mainVisual_bg_item.yugioh-6 {
right: min(19.7916666667vw, 380px);
z-index: 4;
animation-duration: 18s;
animation-delay: -1s;
}
.post_content li.mainVisual_bg_item.yugioh-7 {
right: min(1.6145833333vw, 31px);
z-index: 3;
animation-duration: 17s;
animation-delay: -2.8s;
}
.post_content li.mainVisual_bg_item.yugioh-8 {
right: min(16.3020833333vw, 313px);
z-index: 2;
animation-duration: 18s;
animation-delay: -13.3s;
}

.post_content li.mainVisual_bg_item.yugioh-1 img {
width: min(31.6vw, 237px);
animation-name: rotate05;
animation-duration: 10.5s;
animation-delay: -8.9s;
}
.post_content li.mainVisual_bg_item.yugioh-2 img {
width: min(31.6vw, 237px);
animation-name: rotate02;
animation-duration: 13s;
animation-delay: -6.6s;
}
.post_content li.mainVisual_bg_item.yugioh-3 img {
width: min(20.4vw, 153px);
animation-name: rotate01;
animation-duration: 10s;
animation-delay: -7.2s;
}
.post_content li.mainVisual_bg_item.yugioh-4 img {
width: min(20.4vw, 153px);
animation-name: rotate04;
animation-duration: 18s;
animation-delay: -5.2s;
}
.post_content li.mainVisual_bg_item.yugioh-5 img {
width: min(12.6666666667vw, 95px);
animation-name: rotate03;
animation-duration: 17s;
animation-delay: -6.4s;
}
.post_content li.mainVisual_bg_item.yugioh-6 img {
width: min(12.6666666667vw, 95px);
animation-name: rotate02;
animation-duration: 10s;
animation-delay: -1s;
}
.post_content li.mainVisual_bg_item.yugioh-7 img {
width: min(12.6666666667vw, 95px);
animation-name: rotate05;
animation-duration: 17s;
animation-delay: -2.8s;
}
.post_content li.mainVisual_bg_item.yugioh-8 img {
width: min(12.6666666667vw, 95px);
animation-name: rotate04;
animation-duration: 18s;
animation-delay: -13.3s;
}

@media (max-width: 600px) {
.cs-stats-bar {
gap: 2em;
}
}

@media (min-width: 600px) {
#mainVisual_content_wrap .swell-block-fullWide__inner {
width: 100%;
height: auto;
max-width: 700px;
padding: 2em;
border-radius: 1em;
}
}

/* 【PC】メインビジュアル */
@media (min-width: 960px) {
.mainVisual_text {
font-size: 1.2rem;
}

.p-mainVisual__imgLayer {
background-image: url('https://cardstack.jp/wp-content/uploads/2026/08/cardstack-bg3.jpg');
background-size: cover;
background-position: center;
background-color: #01040f;
}

/* keyframes */
@keyframes loop01 {
0%   { transform: translateY(0px); opacity: 0; }
10%  { opacity: 1; }
80%  { opacity: 1; }
95%  { opacity: 0; }
100% { transform: translateY(calc(50% + max(-47.3958vw, -910px))); opacity: 0; }
}

@keyframes loop02 {
0%   { transform: translateY(100%); opacity: 0; }
20%  { opacity: 1; }
90%  { opacity: 1; }
95%  { opacity: 0; }
100% { transform: translateY(calc(50% + max(-47.3958vw, -910px))); opacity: 0; }
}

.post_content li.mainVisual_bg_item {
position: absolute;
animation-timing-function: linear;
animation-iteration-count: infinite;
bottom: max(-2.60417vw, -50px);
}

.mainVisual_bg_item img {
animation-timing-function: linear;
animation-iteration-count: infinite;
}
	
/* 各カードの設定 */
.post_content li.mainVisual_bg_item.pokeca-1 {
animation-name: loop02;
animation-duration: 5s;
animation-delay: -3s;
}
.post_content li.mainVisual_bg_item.pokeca-2 {
animation-name: loop01;
animation-duration: 7s;
animation-delay: 2s;
opacity: 0;
}
.post_content li.mainVisual_bg_item.pokeca-3 {
animation-name: loop01;
animation-duration: 8s;
animation-delay: -1s;
}
.post_content li.mainVisual_bg_item.pokeca-4 {
animation-name: loop02;
animation-duration: 10s;
animation-delay: 1s;
opacity: 0;
}
.post_content li.mainVisual_bg_item.pokeca-5 {
animation-name: loop01;
animation-duration: 11s;
animation-delay: 3.5s;
opacity: 0;
}
.post_content li.mainVisual_bg_item.pokeca-6 {
animation-name: loop02;
animation-duration: 12s;
animation-delay: 4.3s;
opacity: 0;
}
.post_content li.mainVisual_bg_item.pokeca-7 {
z-index: 4;
animation-name: loop01;
animation-duration: 13s;
animation-delay: -7.2s;
}
.post_content li.mainVisual_bg_item.pokeca-8 {
animation-name: loop02;
animation-duration: 14s;
animation-delay: 2.0s;
opacity: 0;
}

.post_content li.mainVisual_bg_item.pokeca-1 img {
width: min(10.9375vw, 210px);
animation-name: rotate01;
animation-duration: 5s;
animation-delay: -3s;
}
.post_content li.mainVisual_bg_item.pokeca-2 img {
width: min(10.9375vw, 210px);
animation-name: rotate02;
animation-duration: 7s;
animation-delay: 2s;
}
.post_content li.mainVisual_bg_item.pokeca-3 img {
width: min(9.375vw, 180px);
animation-name: rotate03;
animation-duration: 8s;
animation-delay: -1s;
}
.post_content li.mainVisual_bg_item.pokeca-4 img {
width: min(7.8125vw, 150px);
animation-name: rotate04;
animation-duration: 10s;
animation-delay: 1s;
}
.post_content li.mainVisual_bg_item.pokeca-5 img {
width: min(7.2916666667vw, 140px);
animation-name: rotate05;
animation-duration: 11s;
animation-delay: 3.5s;
}
.post_content li.mainVisual_bg_item.pokeca-6 img {
width: min(5.2083333333vw, 100px);
animation-name: rotate02;
animation-duration: 12s;
animation-delay: 4.3s;
}
.post_content li.mainVisual_bg_item.pokeca-7 img {
width: min(7.2916666667vw, 140px);
animation-name: rotate05;
animation-duration: 13s;
animation-delay: -7.2s;
}
.post_content li.mainVisual_bg_item.pokeca-8 img {
width: min(5.2083333333vw, 100px);
animation-name: rotate01;
animation-duration: 14s;
animation-delay: 2.0s;
}

.post_content li.mainVisual_bg_item.yugioh-1 {
animation-name: loop01;
animation-duration: 7s;
animation-delay: -1.2s;
}
.post_content li.mainVisual_bg_item.yugioh-2 {
animation-name: loop01;
animation-duration: 7s;
animation-delay: 1.8s;
opacity: 0;
}
.post_content li.mainVisual_bg_item.yugioh-3 {
animation-name: loop02;
animation-duration: 10s;
animation-delay: -2s;
}
.post_content li.mainVisual_bg_item.yugioh-4 {
animation-name: loop01;
animation-duration: 10s;
animation-delay: 3.8s;
opacity: 0;
}
.post_content li.mainVisual_bg_item.yugioh-5 {
animation-name: loop02;
animation-duration: 11s;
animation-delay: -6.2s;
}
.post_content li.mainVisual_bg_item.yugioh-6 {
animation-name: loop01;
animation-duration: 12s;
animation-delay: 1s;
opacity: 0;
}
.post_content li.mainVisual_bg_item.yugioh-7 {
z-index: 4;
animation-name: loop02;
animation-duration: 13s;
animation-delay: 8.6s;
opacity: 0;
}
.post_content li.mainVisual_bg_item.yugioh-8 {
animation-name: loop01;
animation-duration: 14s;
animation-delay: -6.2s;
}

.post_content li.mainVisual_bg_item.yugioh-1 img {
width: min(10.9375vw, 210px);
animation-name: rotate03;
animation-duration: 7s;
animation-delay: -1.2s;
}
.post_content li.mainVisual_bg_item.yugioh-2 img {
width: min(10.9375vw, 210px);
animation-name: rotate02;
animation-duration: 7s;
animation-delay: 1.8s;
}
.post_content li.mainVisual_bg_item.yugioh-3 img {
width: min(9.375vw, 180px);
animation-name: rotate01;
animation-duration: 10s;
animation-delay: -2s;
}
.post_content li.mainVisual_bg_item.yugioh-4 img {
width: min(7.8125vw, 150px);
animation-name: rotate04;
animation-duration: 10s;
animation-delay: 3.8s;
}
.post_content li.mainVisual_bg_item.yugioh-5 img {
width: min(7.2916666667vw, 140px);
animation-name: rotate05;
animation-duration: 11s;
animation-delay: -6.2s;
}
.post_content li.mainVisual_bg_item.yugioh-6 img {
width: min(5.2083333333vw, 100px);
animation-name: rotate02;
animation-duration: 12s;
animation-delay: 1s;
}
.post_content li.mainVisual_bg_item.yugioh-7 img {
width: min(7.2916666667vw, 140px);
animation-name: rotate01;
animation-duration: 13s;
animation-delay: 8.6s;
}
.post_content li.mainVisual_bg_item.yugioh-8 img {
width: min(5.2083333333vw, 100px);
animation-name: rotate04;
animation-duration: 14s;
animation-delay: -6.2s;
}
}

/* スライダーバナー */
.post_content #top_slider_bnr li {
margin: 0;
}

#top_slider_bnr {
margin-bottom: 0;
background-image: linear-gradient(0deg, #01040f, #858392 30%, #ffffff 50%, #858392 70%, #01040f);
}

#top_slider_bnr .splide__slide a {
display: block;
border-radius: 1em;
overflow: hidden;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
opacity   0.8s cubic-bezier(0.16, 1, 0.3, 1);
filter: brightness(.5) grayscale(10%);
transform: scale(0.92);
transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
z-index: 1;
}

#top_slider_bnr .splide__slide a,
#top_slider_bnr .splide__slide img {
-webkit-user-drag: none;
-webkit-touch-callout: none;
}

#top_slider_bnr .splide__slide.cs-active a {
filter: none;
transform: scale(1.1);
z-index: 2;
}

#top_slider_bnr .splide__slide.cs-active a:hover {
box-shadow: 0 0 2px #882bff, 0 0 6px #882bff, 0 0 10px #882bff;
}

#top_slider_bnr .splide__track {
overflow: visible;
}

#top_slider_bnr .splide__pagination {
max-width: 200px;
margin: 2.2em auto 0;
padding: 0;
justify-content: space-between;
}

#top_slider_bnr .splide__pagination li {
width: 31%;
}

#top_slider_bnr .splide__pagination__page {
display: block;
width: 100%;
background: #2e2e2e;
border-radius: 100px;
}

#top_slider_bnr .splide__pagination__page.is-active {
background: linear-gradient(-45deg, #ffaa00 0%, #7c00ff 100%) !important;
}

/* 【PC】スライダーバナー */
@media (min-width: 600px) {
#top_slider_bnr .splide__pagination {
margin-top: 3em;
}
}

/* カテゴリー別の記事 */
#top_category_area {
margin: 0;
position: relative;
overflow: hidden;
}

#hc-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
z-index: 0;
-webkit-mask-image:
linear-gradient(to bottom, transparent 0%, black 20%, black 90%, transparent 100%),
linear-gradient(to right,  transparent 0%, black 10%, black 90%, transparent 100%);
-webkit-mask-composite: destination-in;
  mask-image:
linear-gradient(to bottom, transparent 0%, black 20%, black 90%, transparent 100%),
linear-gradient(to right,  transparent 0%, black 10%, black 90%, transparent 100%);
mask-composite: intersect;
}

#top_category_area > .swell-block-fullWide__inner {
position: relative;
z-index: 1;
}

#top_category_area .swell-block-fullWide__inner {
padding: 0;
}

.top .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
border: none;
}

.weeklyPicks_wrap {
margin-bottom: 2.6em;
}

.post_content .top_contents_title {
margin-bottom: 2em;
text-align: center;
}

.post_content .top_contents_title h2 {
background: none;
color: #fff;
font-size: 1.8em;
margin: 0 0 .1em;
padding: 0;
}

.post_content .top_contents_title span {
font-family: "Oswald", "Noto Sans JP", YuGothic, -apple-system, sans-serif;
font-size: .85em;
font-weight: 600;
color: #ffaa00;
}

.is-style-balloon>.c-tabList .c-tabList__button[aria-selected=true], .c-tabList .c-tabList__item:first-child .c-tabList__button {
background: none;
}

.c-tabBody .c-tabBody__item {
padding: 2em 0;
}

#content #top_category_area .c-tabList {
display: flex;
flex-wrap: var(--the-tab-flex_wrap);
justify-content: center;
padding: 0 1em;
}

.c-tabList li.c-tabList__item {
padding: 0 .5em;
}

.c-tabList li.c-tabList__item .c-tabList__button {
padding: 1.2em 0.75em;
font-size: 1em;
font-weight: bold;
opacity: 1;
}

.c-tabList li.c-tabList__item:first-child .c-tabList__button {
background: linear-gradient(270deg, #ff5858, #f09819, #ff5858) 0 50% / 300% 100%;
color: #fff;
transition: all .5s ease;
}

.c-tabList li.c-tabList__item:nth-child(2) .c-tabList__button {
background: linear-gradient(270deg, #5c13d2, #aa20cc, #5c13d2) 0 50% / 300% 100%;
color: #fff;
transition: all .5s ease;
}

.is-style-balloon>.c-tabList li.c-tabList__item:first-child .c-tabList__button[aria-selected=true] {
background: #e55c01;
color: #fff;
}

.is-style-balloon>.c-tabList li.c-tabList__item:nth-child(2) .c-tabList__button[aria-selected=true] {
background: #7c00ff;
color: #fff;
}

.is-style-balloon>.c-tabList li.c-tabList__item:first-child .c-tabList__button:before {
border-top: 8px solid #e55c01;
}

.is-style-balloon>.c-tabList li.c-tabList__item:nth-child(2) .c-tabList__button:before {
border-top: 8px solid #7c00ff;
}

.c-tabList li.c-tabList__item:first-child .c-tabList__button:hover, .c-tabList li.c-tabList__item:nth-child(2) .c-tabList__button:hover {
background-position: 100% 50%;
}

.c-tabList li.c-tabList__item:first-child .c-tabList__button:before {
content:"\e901";
font-family: icomoon;
font-weight: normal;
font-size: 24px;
margin-right: 6px;
vertical-align: middle;
}

.c-tabList li.c-tabList__item:nth-child(2) .c-tabList__button:before {
content:"\e900";
font-family: icomoon;
font-weight: normal;
font-size: 26px;
margin-right: 6px;
vertical-align: middle;
}

#top_category_area .is-style-default .c-tabBody {
border: none;
padding: 0;
}

#top_category_area .c-tabBody__item {
padding: 3em 0;
background:rgb(0 0 0 / 26%);
backdrop-filter:blur(1.8px);
}

#tab-top_category_post-0 {
border:1px solid #ff5858;
}

#tab-top_category_post-1 {
border:1px solid #5c13d2;
}

#top_category_area .p-postListWrap {
padding: 0 var(--swl-fw_inner_pad, 0);
padding-bottom: 3em;
}

#tab-top_category_post-0 .top_contents_title span {
color: #e55c01;
}

#tab-top_category_post-1 .top_contents_title span {
color: #7c00ff;
}

.top .p-postList__link {
border-radius: 1em;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 4px -4px rgba(0, 0, 0, .1);
border: 1px solid rgb(82 82 82);
transition: box-shadow .25s;
}

.top .p-postList__link:hover, li.weeklyPicks_item a:hover {
box-shadow: 0 0 2px #882bff, 0 0 6px #882bff, 0 0 10px #882bff;
}

.top .p-postList__body {
padding: 1em;
}

.top .p-postList__thumb {
box-shadow: none;
}

#top_category_area .is-style-more_btn a, #top_other_post .is-style-more_btn a {
width: 100%;
min-width: inherit;
max-width: 600px;
border: 2px solid #5164a5;
border-radius: 6px;
font-weight: bold;
background: #101f53;
color: #fff;
box-shadow: none;
}

#top_category_area .is-style-more_btn a:hover, #top_other_post .is-style-more_btn a:hover {
background: #253a82;
box-shadow: 0 0 2px #882bff, 0 0 6px #882bff, 0 0 10px #882bff;
}

#top_other_post {
margin-bottom: 0;
padding-bottom: 8em !important;
}

#top_other_post .l-container {
padding-top: 3em;
padding-bottom: 3em;
background: rgb(0 0 0 / 26%);
backdrop-filter: blur(1.8px);
border: 1px solid #ffaa00;
}

.top .p-postList__item,
.top .weeklyPicks_item {
opacity: 0;
transform: translateY(-20px);
transition: opacity 0.5s ease, transform 0.5s ease;
}

.top .p-postList__item.is-visible,
.top .weeklyPicks_item.is-visible {
opacity: 1;
transform: translateY(0);
}

/* 【PC】カテゴリー別の記事 */
@media (min-width: 960px) {
.top .post_content .top_contents_title h2 {
font-size: 2em;
}

#content #top_category_area .c-tabList {
--the-tab-flex: 0 0 32%;
}
}

/* カテゴリー別の注目カード */
.top .post_content .weeklyPicks_area {
margin-bottom: 3em !important;
padding: 0 var(--swl-fw_inner_pad, 0);
}

.weeklyPicks_date {
margin-bottom: 1em;
font-size: 14px;
color: #666;
text-align: right;
}

ul.weeklyPicks_list {
display: grid;
gap: 2.5em;
list-style: none;
padding: 0;
}

li.weeklyPicks_item {
margin: 0;
}

li.weeklyPicks_item a {
display: block;
background: #fff;
border-radius: 1em;
border: 1px solid #ddd;
color: #333;
position: relative;
transition: box-shadow .25s;
}

li.weeklyPicks_item a:before {
font-family: "Oswald", "Noto Sans JP", YuGothic, -apple-system, sans-serif;
font-weight: 900;
font-size: 4.4em;
position: absolute;
top: -57px;
left: 10px;
z-index: 1;
}

li.weeklyPicks_item:first-child a:before {
content: "1";
color: #CAA846;
background: linear-gradient(-45deg, #756012 0%, #dbc54f 50%, #756012 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

li.weeklyPicks_item:nth-child(2) a:before {
content: "2";
color: #848788;
background: linear-gradient(-45deg, #5f5f5f 0%, #b3b3b3 50%, #5f5f5f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

li.weeklyPicks_item:nth-child(3) a:before {
content: "3";
color: #9A6229;
background: linear-gradient(-45deg, #854e15 0%, #d99d5f 45%, #854e15 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.weeklyPicks_card {
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: auto auto;
box-sizing: border-box;
width: 100%;
overflow: hidden;
padding: 12px;
}

.weeklyPicks_thumb {
grid-column: 1;
grid-row: 1;
padding-right: 10%;
}

.weeklyPicks_figure {
position: relative;
overflow: hidden;
}

.weeklyPicks_figure:after {
content: "";
position: absolute;
top: 0;
left: -150%;
width: 50%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
transform: skewX(-25deg);
animation: shiny 3s infinite;
}

.weeklyPicks_info {
grid-column: 2;
grid-row: 1;
place-content: center;
font-family: "Oswald", "Noto Sans JP", YuGothic, -apple-system, sans-serif;
text-align: center;
}

h3.weeklyPicks_name {
border-left: none;
margin: 0 0 .3em;
padding: 0;
font-size: .85em;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
display: -webkit-box;
overflow: hidden;
}

.weeklyPicks_box {
margin-bottom: 1em;
font-size: .75em;
color: #888;
}

.weeklyPicks_price {
font-size: 10px;
color: #888;
margin-top: 0.3em;
}

.weeklyPicks_price span {
font-size: 2.6em;
font-weight: 700;
margin-left: 10px;
color: #222;
}

.weeklyPicks_diff {
font-size: 11px;
margin-top: 3px;
padding: 2px 0;
}

.weeklyPicks_diff span {
font-size: 1.2em;
font-weight: bold;
margin-left: 10px;
}

.weeklyPicks_diff.is-up {
background: #ffe6f8;
}

.weeklyPicks_diff.is-up span {
color: #ff0230;
}

.weeklyPicks_diff.is-down {
background: #e2f1ff;
}

.weeklyPicks_diff.is-down span {
color: #1402ff;
}

.weeklyPicks_graph {
grid-column: 1 / 3;
grid-row: 2;
border-top: 1px solid #ddd;
margin-top: 10px;
padding-top: 10px;
}

.weeklyPicks_graph_title {
text-align: center;
font-size: 10px;
color: #888;
}

.weeklyPicks_graph img {
display: block;
margin: auto;
}

.weeklyPicks-footer-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
align-items: center;
margin: 3em auto 0;
width: 90%;
max-width: 640px;
}

.weeklyPicks-footer-wrap .weeklyPicks-footer-item {
height: 100%;
transition: transform 0.15s ease-out, filter 0.3s ease;
}

.weeklyPicks-footer-wrap .weeklyPicks-footer-item a {
display: flex;
justify-content: center;
align-items: center;
height: 56px;
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
text-align: center;
color: #fff;
border-radius: 100px;
background: linear-gradient(270deg, #ff5858, #f09819, #ff5858) 0 50% / 300% 100%;
background-clip: padding-box;
border-color: #f09819;
transition: all .5s ease;
position: relative;
}

#tab-top_category_post-1 .weeklyPicks-footer-wrap .weeklyPicks-footer-item a {
background: linear-gradient(-45deg, #aa20cc 0%, #5c13d2 100%);
background-clip: padding-box;
border-color: #aa20cc;
}

.weeklyPicks-footer-wrap .box-list-link a:before {
content: "\e901";
font-family: icomoon;
font-weight: normal;
font-style: normal;
font-size: 1.3rem;
margin-right: 8px;
vertical-align: middle;
color: #fff;
}

#tab-top_category_post-1 .weeklyPicks-footer-wrap .box-list-link a:before {
content: "\e900";
font-family: icomoon;
font-weight: normal;
font-style: normal;
font-size: 1.5rem;
}

.weeklyPicks-footer-wrap .card-search-link a::before {
content: "\f002";
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 1.2rem;
margin-right: 6px;
vertical-align: middle;
}

/* 【TB】カテゴリー別の注目カード */
@media (min-width: 600px) {
.top .post_content .weeklyPicks_area {
margin-bottom: 5em !important;}
	
.weeklyPicks_card {
grid-template-columns: 34% 66%;
}
	
.weeklyPicks_thumb {
grid-row: 1 / 3;
}
	
.weeklyPicks_graph {
grid-column: 2;
}
}

/* 【PC】カテゴリー別の注目カード */
@media (min-width: 960px) {
ul.weeklyPicks_list {
grid-template-columns: repeat(3, 1fr);
gap: 1em;
}
	
.weeklyPicks_card {
grid-template-columns: 40% 60%;
}
	
.weeklyPicks_thumb {
grid-row: 1;
}
	
.weeklyPicks_graph {
grid-column: 1 / 3;
}

.weeklyPicks-footer-wrap {
gap: 20px;
}

.weeklyPicks-footer-wrap .weeklyPicks-footer-item:hover {
filter: drop-shadow(0 0 13px rgba(255, 242, 183, 0.800));
}

.weeklyPicks-footer-wrap .weeklyPicks-footer-item a:hover {
background-position: 100% 50%;
}
}

/* ── 今週の注目カード セクション全体 ── */
.cs-weekly-picks-wrap {
display: flex;
flex-direction: column;
gap: 2.5em;
}

/* 2026-08-19追記: ランキングセクションはスクロール読み込みで最大10件が
   マウントされたまま破棄されずDOMに残り続けるため、画面外に出たセクションの
   レイアウト/ペイント/合成コストをブラウザ側でスキップし、特にモバイルでの
   スクロール負荷を軽減する（関連カードスライダーは常時1〜3件のみのため対象外）。 */
.cs-weekly-picks-section {
content-visibility: auto;
contain-intrinsic-size: auto 420px;
}

.cs-weekly-picks-section .top_contents_title h3 {
font-family: "Oswald", "Noto Sans JP", YuGothic, -apple-system, sans-serif;
font-size: 1.1em;
font-weight: 700;
color: #fff;
text-align: center;
margin-bottom: 1em;
}

/* ── スライダー枠 ── */
.cs-weekly-picks-slider {
position: relative;
padding: 0 2.5em;
}

.cs-weekly-picks-slider .splide__slide {
box-sizing: border-box;
}

/* カードは元がライト背景想定なので、ダークセクションでも浮かないよう外枠を明るく保つ */
.cs-weekly-picks-slider .cardBox-included-item a {
background: #fff;
}

/* このスライダー内は「スクロールで検知してフェードイン」の対象外にする。
   常に全カードを最初から表示した状態にし、Splideの横スワイプだけで見せる */
.cs-weekly-picks-slider .cardBox-included-item {
opacity: 1 !important;
transform: none !important;
}

/* ── ランキング番号バッジ ── */
.weeklyPicks-item {
position: relative;
}

.weeklyPicks-rank {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-family: "Oswald", sans-serif;
font-size: 14px;
font-weight: 700;
color: #fff;
background: #555;
box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* 上位3件はブランドカラーのグラデーションで強調 */
.weeklyPicks-item.is-rank-top .weeklyPicks-rank {
background: linear-gradient(135deg, #a020f0, #ff8c00);
width: 32px;
height: 32px;
font-size: 16px;
}

/* ── スクロール位置インジケーター（進捗バー） ── */
.cs-weekly-picks-progress {
position: relative;
width: 60px;
height: 4px;
margin: 16px auto 0;
background: rgba(255,255,255,.15);
border-radius: 2px;
overflow: hidden;
}

.cs-weekly-picks-progress-bar {
position: absolute;
top: 0;
height: 100%;
background: linear-gradient(90deg, #a020f0, #ff8c00);
border-radius: 2px;
transition: none;
}

.cs-weekly-picks-slider img,
.cs-weekly-picks-slider a {
-webkit-user-drag: none;
-webkit-touch-callout: none;
}

/* ── スマホ幅の調整 ── */
@media (max-width: 600px) {
.cs-weekly-picks-slider {
padding: 0 1.2em;
}
.weeklyPicks-rank {
width: 24px;
height: 24px;
font-size: 12px;
top: 6px;
left: 6px;
}
.weeklyPicks-item.is-rank-top .weeklyPicks-rank {
width: 28px;
height: 28px;
font-size: 14px;
}
}



/* ==========================================================
   トップページの記事セクション（#top_other_post / #top_category_area）
   スマホのみ、コンパクトな横並びリスト表示に上書き
   ========================================================== */
@media (max-width: 959px) {
	#top_other_post .p-postListWrap .p-postList.-type-card,
	#top_category_area .p-postListWrap .p-postList.-type-card {
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem !important;
		margin: 0 !important;
	}
	#top_other_post .is-style-more_btn,
	#top_category_area .is-style-more_btn {
		margin-top: 16px !important;
	}
	#top_other_post .p-postListWrap .p-postList.-type-card .p-postList__item,
	#top_category_area .p-postListWrap .p-postList.-type-card .p-postList__item {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	#top_other_post .p-postListWrap .p-postList.-type-card .p-postList__link,
	#top_category_area .p-postListWrap .p-postList.-type-card .p-postList__link {
		display: grid !important;
		grid-template-columns: 120px 1fr !important;
		column-gap: 10px !important;
		row-gap: 4px !important;
		align-items: start !important;
		height: auto !important;
		padding: 12px !important;
		background: rgb(47 47 47 / 90%) !important;
		border-radius: 10px !important;
		transition: transform 0.15s ease, background 0.15s ease !important;
	}
	#top_other_post .p-postListWrap .p-postList.-type-card .p-postList__link:active,
	#top_category_area .p-postListWrap .p-postList.-type-card .p-postList__link:active {
		transform: scale(0.97) !important;
		background: rgba(255, 255, 255, 0.1) !important;
	}
	#top_other_post .p-postListWrap .p-postList.-type-card .p-postList__thumb,
	#top_category_area .p-postListWrap .p-postList.-type-card .p-postList__thumb {
		display: contents !important;
	}
	#top_other_post .p-postListWrap .p-postList.-type-card .c-postThumb__figure,
	#top_category_area .p-postListWrap .p-postList.-type-card .c-postThumb__figure {
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
		width: 120px !important;
		aspect-ratio: 1200 / 628;
		border-radius: 8px !important;
		overflow: hidden !important;
	}
	#top_other_post .p-postListWrap .p-postList.-type-card .c-postThumb__cat,
	#top_category_area .p-postListWrap .p-postList.-type-card .c-postThumb__cat {
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-self: start !important;
		position: static !important;
		display: inline-block !important;
		width: fit-content !important;
		font-size: 9px !important;
		padding: 2px 8px !important;
	}
	#top_other_post .p-postListWrap .p-postList.-type-card .p-postList__body,
	#top_category_area .p-postListWrap .p-postList.-type-card .p-postList__body {
		display: contents !important;
	}
	#top_other_post .p-postListWrap .p-postList.-type-card .p-postList__title,
	#top_category_area .p-postListWrap .p-postList.-type-card .p-postList__title {
		grid-column: 2 !important;
		grid-row: 2 !important;
		color: #fff !important;
		font-size: 12px !important;
		line-height: 1.6 !important;
		display: -webkit-box !important;
		-webkit-line-clamp: 2 !important;
		-webkit-box-orient: vertical !important;
		overflow: hidden !important;
	}
	#top_other_post .p-postListWrap .p-postList.-type-card .p-postList__meta,
	#top_category_area .p-postListWrap .p-postList.-type-card .p-postList__meta {
		grid-column: 2 !important;
		grid-row: 1 !important;
		justify-self: end !important;
		margin-top: 0 !important;
	}
	#top_other_post .p-postListWrap .p-postList.-type-card .p-postList__times,
	#top_category_area .p-postListWrap .p-postList.-type-card .p-postList__times {
		color: rgba(255, 255, 255, 0.55) !important;
		font-size: 10px !important;
	}
}


/* ── 高騰/下落 トグルボタン ── */
.cs-ranking-toggle {
display: flex;
justify-content: center;
gap: 0.6em;
margin-bottom: 1.2em;
}

.cs-ranking-toggle-btn {
appearance: none;
border: 1px solid rgba(255,255,255,.25);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.7);
font-family: "Oswald", "Noto Sans JP", YuGothic, -apple-system, sans-serif;
font-size: 0.95em;
font-weight: 700;
padding: 0.55em 1.6em;
border-radius: 999px;
cursor: pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .1s ease;
}

.cs-ranking-toggle-btn:hover {
border-color: rgba(255,255,255,.45);
color: #fff;
}

.cs-ranking-toggle-btn:active {
transform: scale(0.96);
}

.cs-ranking-toggle-btn.is-active {
background: linear-gradient(135deg, #a020f0, #ff8c00);
border-color: transparent;
color: #fff;
box-shadow: 0 3px 10px rgba(160,32,240,.35);
}

/* ── ジャンプナビ（アンカーピル） ── */
.cs-ranking-jumpnav {
display: flex;
flex-wrap: nowrap;
gap: 0.5em;
overflow-x: auto;
padding: 0.2em 1.5em 1.6em;
margin-bottom: 0.4em;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}

.cs-ranking-jumpnav::-webkit-scrollbar {
height: 4px;
}

.cs-ranking-jumpnav::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.2);
border-radius: 2px;
}

.cs-ranking-pill {
flex: 0 0 auto;
display: inline-block;
white-space: nowrap;
font-family: "Noto Sans JP", YuGothic, -apple-system, sans-serif;
font-size: 0.82em;
font-weight: 600;
color: rgba(255,255,255,.75);
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.15);
padding: 0.45em 1.1em;
border-radius: 999px;
text-decoration: none;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.cs-ranking-pill:hover {
color: #fff;
border-color: rgba(255,255,255,.35);
background: rgba(255,255,255,.12);
}

.cs-ranking-pill.is-current {
background: linear-gradient(135deg, #a020f0, #ff8c00);
border-color: transparent;
color: #fff;
}

/* ── 未読み込みセクションのプレースホルダ ── */
.cs-weekly-picks-section[data-loaded="0"] .cs-weekly-picks-slider {
min-height: 220px;
display: flex;
align-items: center;
justify-content: center;
}

.cs-weekly-picks-section[data-loaded="0"] .cs-weekly-picks-slider::before {
content: "";
width: 32px;
height: 32px;
border-radius: 50%;
border: 3px solid rgba(255,255,255,.15);
border-top-color: #ff8c00;
animation: cs-ranking-spin 0.8s linear infinite;
}

@keyframes cs-ranking-spin {
to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
.cs-ranking-toggle-btn {
font-size: 0.85em;
padding: 0.5em 1.3em;
}
.cs-ranking-jumpnav {
padding: 0.2em 1.2em 1.4em;
}
.cs-ranking-pill {
font-size: 0.78em;
padding: 0.4em 0.9em;
}
}


/* PC幅ではジャンプナビをセンター寄せ（横スクロールしない想定のため） */
@media (min-width: 601px) {
.cs-ranking-jumpnav {
justify-content: center;
flex-wrap: wrap;
overflow-x: visible;
}
}