@charset "UTF-8";
/*
    Template: swell
    Theme Name: Colorful SWELL Child
    Theme URI: https://swell-theme.com/
    Description: SWELL向けのPOP＆cyber系ゲームメディア用子テーマ。ピンクを基調に、水色・エメラルドグリーンを差し色として使用します。
    Version: 1.0.0
    Author: Colorful Media
    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================
   Colorful SWELL Child
   Design: POP × CYBER × GAMING
   Palette:
   Pink   #ff3fa4
   Cyan   #21d4fd
   Mint   #2ee6a6
   Purple #8b5cf6
   Navy   #0b1020
   ========================================================= */

:root {
  --cm-pink: #ff3fa4;
  --cm-pink-deep: #ef2189;
  --cm-cyan: #21d4fd;
  --cm-mint: #2ee6a6;
  --cm-purple: #8b5cf6;
  --cm-ink: #151226;
  --cm-navy: #0b1020;
  --cm-bg: #fff8fc;
  --cm-line: #f1d7e7;
  --cm-shadow: 0 10px 30px rgba(255, 63, 164, .16);
  --cm-radius: 16px;
}

/* ----- Base ----- */
html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 8% 3%, rgba(33, 212, 253, .13), transparent 20rem),
    radial-gradient(circle at 92% 12%, rgba(46, 230, 166, .11), transparent 22rem),
    linear-gradient(180deg, #fffafe 0%, #ffffff 24rem);
  color: var(--cm-ink);
}

a {
  transition: color .2s ease, opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

::selection {
  background: var(--cm-pink);
  color: #fff;
}

/* ----- Header ----- */
.l-header {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--cm-pink), var(--cm-cyan), var(--cm-mint)) 1;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
}

.l-header__logo a,
.c-headLogo a {
  color: var(--cm-pink);
}

.l-header__logo a:hover,
.c-headLogo a:hover {
  color: var(--cm-pink-deep);
}

.c-gnav > li > a {
  position: relative;
  font-weight: 800;
  letter-spacing: .02em;
}

.c-gnav > li > a::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 8px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cm-pink), var(--cm-cyan));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}

.c-gnav > li > a:hover::after,
.c-gnav > li.is-active > a::after {
  transform: scaleX(1);
}

/* ----- Main content wrapper ----- */
.l-main {
  position: relative;
}

.l-main::before {
  content: "";
  display: block;
  width: min(1120px, 92%);
  height: 6px;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cm-pink), var(--cm-purple) 40%, var(--cm-cyan) 70%, var(--cm-mint));
  box-shadow: 0 0 24px rgba(255, 63, 164, .24);
}

/* ----- Headings ----- */
.c-pageTitle,
.post_content h2,
.post_content h3,
.post_content h4 {
  font-weight: 900;
  letter-spacing: .015em;
}

.post_content h2 {
  position: relative;
  overflow: hidden;
  padding: 1.05em 1.1em 1em 1.25em;
  border: 0;
  border-radius: 14px;
  background:
    linear-gradient(100deg, rgba(255, 63, 164, .12), rgba(33, 212, 253, .08));
  box-shadow: inset 6px 0 0 var(--cm-pink), var(--cm-shadow);
}

.post_content h2::after {
  content: "◆";
  position: absolute;
  right: 16px;
  top: 12px;
  color: rgba(33,212,253,.65);
  font-size: .65em;
  transform: rotate(15deg);
}

.post_content h3 {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--cm-cyan), var(--cm-mint)) 1;
  padding-bottom: .55em;
}

.post_content h4 {
  border-left: 5px solid var(--cm-purple);
  padding-left: .7em;
}

/* ----- Links ----- */
.post_content a:not(.swell-block-button-link) {
  color: #d51c7a;
  text-decoration-color: rgba(213, 28, 122, .35);
  text-underline-offset: 3px;
}

.post_content a:not(.swell-block-button-link):hover {
  color: var(--cm-pink);
}

/* ----- Buttons ----- */
.swell-block-button .swell-block-button__link,
.c-button,
.post_content .c-button,
.wp-block-button__link {
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(100deg, var(--cm-pink), var(--cm-purple), var(--cm-cyan)) !important;
  background-size: 180% 100% !important;
  color: #fff !important;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(255, 63, 164, .25);
  transition: transform .2s ease, box-shadow .2s ease, background-position .35s ease;
}

.swell-block-button .swell-block-button__link:hover,
.c-button:hover,
.post_content .c-button:hover,
.wp-block-button__link:hover {
  background-position: 100% 0 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(33, 212, 253, .23);
}

/* ----- Cards / post lists ----- */
.p-postListWrap .p-postList .p-postList__item {
  border-radius: var(--cm-radius);
}

.p-postList__item {
  overflow: hidden;
}

.p-postList__link {
  border: 1px solid var(--cm-line);
  border-radius: var(--cm-radius);
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 24px rgba(30, 20, 50, .06);
}

.p-postList__link:hover {
  border-color: rgba(255, 63, 164, .55);
  box-shadow: 0 14px 30px rgba(255, 63, 164, .12);
  transform: translateY(-3px);
}

.p-postList__title {
  font-weight: 900;
}

.p-postList__meta {
  color: #6c6780;
}

/* Thumbnails: colorful glow */
.p-postList__thumb,
.p-postList__thumb + .p-postList__body {
  background: #fdf1f8;
}

.p-postList__thumb img {
  transition: transform .35s ease, filter .35s ease;
}

.p-postList__link:hover .p-postList__thumb img {
  transform: scale(1.045);
  filter: saturate(1.1);
}

/* ----- Sidebar ----- */
.c-widget {
  border: 1px solid var(--cm-line);
  border-radius: var(--cm-radius);
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 22px rgba(30, 20, 50, .05);
}

.c-widget__title {
  border-radius: 11px 11px 0 0;
  background: linear-gradient(90deg, rgba(255,63,164,.12), rgba(33,212,253,.08));
  color: var(--cm-ink);
  font-weight: 900;
}

.c-widget__title::before {
  background: linear-gradient(180deg, var(--cm-pink), var(--cm-cyan)) !important;
}

/* ----- Search ----- */
.c-searchForm {
  border: 2px solid rgba(255,63,164,.32);
  border-radius: 999px;
  box-shadow: 0 5px 18px rgba(255, 63, 164, .08);
}

.c-searchForm:focus-within {
  border-color: var(--cm-cyan);
  box-shadow: 0 0 0 4px rgba(33,212,253,.12);
}

/* ----- Tags / pills ----- */
.c-tagList a,
.post-cat,
.c-categoryList__link {
  border-radius: 999px;
}

.post-cat {
  background: linear-gradient(100deg, var(--cm-pink), var(--cm-purple));
  color: #fff !important;
  font-weight: 800;
}

/* ----- Tables ----- */
.post_content table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--cm-line);
  border-radius: 12px;
  box-shadow: 0 7px 22px rgba(30, 20, 50, .05);
}

.post_content th {
  background: linear-gradient(90deg, rgba(255,63,164,.13), rgba(33,212,253,.10));
  color: var(--cm-ink);
  font-weight: 900;
}

/* ----- Notice / balloon feel ----- */
.post_content blockquote {
  border-left: 5px solid var(--cm-cyan);
  border-radius: 10px;
  background: rgba(33, 212, 253, .08);
  box-shadow: inset 0 0 0 1px rgba(33,212,253,.10);
}

/* ----- Footer ----- */
.l-footer {
  margin-top: 40px;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,63,164,.20), transparent 20rem),
    radial-gradient(circle at 87% 12%, rgba(33,212,253,.18), transparent 18rem),
    linear-gradient(140deg, #0b1020, #18122b 60%, #102522);
  color: #f7f5ff;
}

.l-footer a {
  color: #fff;
}

.l-footer a:hover {
  color: var(--cm-mint);
}

.l-footer__foot {
  border-top-color: rgba(255,255,255,.12);
}

/* ----- Decorative separators ----- */
hr {
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cm-pink), var(--cm-cyan), var(--cm-mint), transparent);
}

/* ----- Mobile tuning ----- */
@media (max-width: 599px) {
  .l-main::before {
    width: 88%;
    height: 4px;
  }

  .post_content h2 {
    padding: .85em .95em .8em 1em;
    border-radius: 12px;
  }

  .c-widget,
  .p-postList__link {
    border-radius: 13px;
  }
}

/* ----- Optional utility classes ----- */
.cm-neon {
  text-shadow:
    0 0 8px rgba(255,63,164,.45),
    0 0 18px rgba(33,212,253,.22);
}

.cm-gradient-text {
  background: linear-gradient(90deg, var(--cm-pink), var(--cm-purple), var(--cm-cyan), var(--cm-mint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}