@charset "UTF-8";

/*
Skin Name: Kontek Portal
Description: コンテクサーバーのフロントページデザインをベースにしたダークネオン系Cocoonスキン（全体用）
Skin URI: https://www.kontekugame-server.com/
Author: kontek u
Author URI: https://www.kontekugame-server.com/
Version: 1.3.0
Priority: 999000000
*/

/************************************************
 *  カラーバリエーション（変数）
 ************************************************/
:root {
  --kp-bg: #020617;             /* 全体ベース */
  --kp-bg-soft: #020617;
  --kp-bg-panel: #020617;
  --kp-bg-panel-soft: rgba(15, 23, 42, 0.92);
  --kp-border: #111827;
  --kp-border-soft: #1f2937;
  --kp-text: #e5e7eb;
  --kp-text-sub: #9ca3af;
  --kp-text-mute: #6b7280;
  --kp-accent-green: #22c55e;
  --kp-accent-green-soft: rgba(34, 197, 94, 0.2);
  --kp-accent-green-strong: #16a34a;
  --kp-accent-cyan: #38bdf8;
  --kp-accent-cyan-soft: rgba(56, 189, 248, 0.35);
}

/************************************************
 *  ベース / 全体
 ************************************************/

html,
body {
  background: var(--kp-bg) !important;
  color: var(--kp-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Cocoon が貼る白背景を全域で殺す */
#wrapper,
#container,
#content,
#main,
#inner-content,
.wrap,
.main,
.article,
.article-inner,
.post,
.page {
  background: transparent !important;
  box-shadow: none !important;
}

/* エントリー本体パネル */
.article,
.post,
.page {
  background: var(--kp-bg-panel);
}

/* デフォルト文字色 */
body,
.main,
.sidebar,
.footer,
.header-container {
  color: var(--kp-text);
}

/* リンク */
a {
  color: var(--kp-accent-cyan);
}
a:hover {
  color: #7dd3fc;
}

/* テキスト選択色 */
::selection {
  background: var(--kp-accent-cyan-soft);
  color: #f9fafb;
}

/************************************************
 *  ヘッダー / グローバルナビ
 ************************************************/

#header-container,
#header {
  background: var(--kp-bg);
  border-bottom: 1px solid #0b1220;
}

.site-name-text-link,
#header .logo,
#header .logo a {
  color: var(--kp-text);
}

.tagline {
  color: var(--kp-text-sub);
}

/* グローバルメニュー */
#navi,
#navi-in {
  background: var(--kp-bg);
  border-bottom: 1px solid #0b1220;
}
#navi ul,
#navi-in ul {
  background: transparent;
}
#navi ul li,
#navi-in ul li {
  border-right: none;
}
#navi a,
#navi-in a {
  color: var(--kp-text);
  font-size: 14px;
}
#navi a:hover,
#navi-in a:hover,
#navi .current-menu-item > a,
#navi-in .current-menu-item > a {
  background: #0b1220;
  color: var(--kp-accent-green);
}

/* 固定ヘッダー時 */
.fixed-header .header,
.header-container.fixed-header {
  background: var(--kp-bg);
}

/************************************************
 *  パンくず / メタ
 ************************************************/

.breadcrumb {
  font-size: 11px;
  color: var(--kp-text-mute);
  background: transparent;
}
.breadcrumb a {
  color: var(--kp-text-sub);
}
.breadcrumb a:hover {
  color: var(--kp-text);
}

.post-meta,
.post-meta a,
.date-tags {
  font-size: 11px;
  color: var(--kp-text-mute);
}
.post-meta a:hover {
  color: var(--kp-text);
}

/************************************************
 *  記事タイトル / 見出し
 ************************************************/

.entry-title,
.article h1 {
  font-size: 1.8rem;
}
.entry-title a {
  color: #f9fafb;
  text-decoration: none;
}
.entry-title a:hover {
  color: var(--kp-accent-green);
}

/* 本文 */
.entry-content {
  line-height: 1.9;
  font-size: 15px;
  color: var(--kp-text);
}

/* 見出し：本文内 */
.entry-content h2,
.article h2 {
  border-left: 4px solid var(--kp-accent-green);
  padding-left: 10px;
  margin: 1.8em 0 0.8em;
  font-size: 1.4rem;
  color: var(--kp-text);
}
.entry-content h3,
.article h3 {
  border-bottom: 2px solid var(--kp-border-soft);
  padding-bottom: 4px;
  margin: 1.4em 0 0.6em;
  font-size: 1.2rem;
  color: var(--kp-text);
}
.entry-content h4,
.article h4 {
  margin: 1.2em 0 0.4em;
  font-size: 1.05rem;
  color: var(--kp-text);
}
.article h5,
.article h6 {
  margin: 1em 0 0.4em;
  color: var(--kp-text);
}

/************************************************
 *  サイドバー / ウィジェット
 ************************************************/

.sidebar,
#sidebar {
  background: transparent !important;
  color: var(--kp-text);
}

/* サイドバーの白板を完全に潰す */
.sidebar .widget,
#sidebar .widget {
  background: var(--kp-bg-panel) !important;
  border-radius: 18px;
  border: 1px solid var(--kp-border);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65);
}

/* 中の要素の白背景や影も殺す（ただしフォーム系は後で上書き） */
.sidebar .widget *,
#sidebar .widget * {
  background-color: transparent;
  box-shadow: none;
}

/* ウィジェットタイトル（ネオン枠） */
#sidebar .widgettitle,
#sidebar .widget-title,
.sidebar .widgettitle,
.sidebar .widget-title {
  background: linear-gradient(
      120deg,
      rgba(34, 197, 94, 0.16),
      rgba(56, 189, 248, 0.12)
    ) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  margin: -4px -6px 10px !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--kp-text) !important;
  border: 1px solid rgba(34, 197, 94, 0.6) !important;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.8);
}

/* ウィジェット内テキスト／リンク */
.widget,
.widget p,
.widget li {
  color: var(--kp-text);
  font-size: 13px;
}
.widget a {
  color: var(--kp-text);
  text-decoration: none;
}
.widget a:hover {
  color: #7dd3fc;
}

/* リスト系ウィジェット（最近の投稿・コメント・アーカイブ・カテゴリ） */
.widget ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.widget ul li {
  padding: 4px 0;
  border-bottom: 1px solid var(--kp-bg);
}
.widget ul li:last-child {
  border-bottom: none;
}

/* Cocoon がつける白背景カードを無効化 */
.widget_recent_entries ul li a,
.widget_recent_comments ul li,
.widget_archive ul li,
.widget_categories ul li,
.widget_pages ul li a,
.widget_meta ul li a,
.widget_rss ul li a,
.widget_nav_menu ul li a,
.widget_block .wp-block-archives li a,
.widget_block .wp-block-categories li a,
.widget_block .wp-block-latest-posts li a {
  background: transparent !important;
  border: none !important;
  color: var(--kp-text) !important;
  box-shadow: 0 2px 0 #111827;
}

/* ホバー時はラインだけ光らせる */
.widget_recent_entries ul li a:hover,
.widget_categories ul li a:hover,
.widget_archive ul li a:hover,
.widget_pages ul li a:hover,
.widget_meta ul li a:hover,
.widget_rss ul li a:hover,
.widget_nav_menu ul li a:hover,
.widget_block .wp-block-archives li a:hover,
.widget_block .wp-block-categories li a:hover,
.widget_block .wp-block-latest-posts li a:hover {
  background: rgba(15, 23, 42, 0.85);
  color: #7dd3fc !important;
}

/* カテゴリのバレット */
.cat-item .cf::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 4px;
  width: 4px;
  height: 4px;
  background-color: rgba(34, 197, 94, 0.6);
  border: 1px outset #4b5563;
  transform: rotate(45deg);
}

/************************************************
 *  検索フォーム（サイドバー・ヘッダー）
 ************************************************/

.widget_search form,
#searchform {
  display: flex;
  gap: 6px;
}
.widget_search input[type="text"],
.widget_search input[type="search"],
#searchform input[type="text"],
#searchform input[type="search"] {
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--kp-border-soft) !important;
  background: rgba(2, 6, 23, 0.98) !important;
  color: var(--kp-text) !important;
}
.widget_search input[type="text"]::placeholder,
#searchform input[type="text"]::placeholder {
  color: var(--kp-text-mute);
}
.widget_search input[type="submit"],
#searchform input[type="submit"] {
  padding: 8px 12px;
  border-radius: 999px !important;
  border: none;
  background: #4b5563 !important;
  color: #f9fafb !important;
  font-size: 12px;
}
.widget_search input[type="submit"]:hover,
#searchform input[type="submit"]:hover {
  background: #6b7280 !important;
}

/************************************************
 *  テキスト要素（引用 / テーブル / コード）
 ************************************************/

/************************************************
 * KONTEKU 引用ブロック（blockquote）
 ************************************************/
.entry-content blockquote {
  position: relative;
  margin: 1.8rem 0;
  padding: 1.3rem 1.5rem 1.3rem 2rem;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.15), transparent 55%),
    rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 14px;
  color: #e5e7eb;
  line-height: 1.7;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(15, 23, 42, 0.7);
}

/* 左のネオンライン */
.entry-content blockquote::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #22c55e,
    #2dd4bf,
    #38bdf8
  );
}

/* 引用符デザイン */
.entry-content blockquote::after {
  content: "”";
  font-size: 2rem;
  color: rgba(148, 163, 184, 0.4);
  position: absolute;
  bottom: 6px;
  right: 12px;
  pointer-events: none;
}
/************************************************
 * KONTEKU TABLE 完成版（ダークネオンテーマ）
 ************************************************/

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0;
  font-size: 0.95rem;
  background: rgba(3, 7, 18, 0.7);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(76, 219, 140, 0.25); /* 緑系ネオンの縁 */
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.55),
    0 0 20px rgba(76, 219, 140, 0.05);
}

/* ヘッダー（テーマに合わせたグラデ） */
.entry-content table th {
  padding: 12px 14px;
  text-align: left;
  color: #f1f5f9;
  font-weight: 600;
  border-bottom: 1px solid rgba(148, 163, 184, 0.25);
  background: linear-gradient(
      90deg,
      rgba(76, 219, 140, 0.22),
      rgba(56, 189, 248, 0.12)
    ),
    rgba(15, 23, 42, 0.9);
}

/* セル */
.entry-content table td {
  padding: 12px 14px;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

/* 行のストライプ（暗い背景でも見やすい最高バランス） */
.entry-content table tr:nth-child(even) td {
  background: rgba(30, 41, 59, 0.45);
}

.entry-content table tr:nth-child(odd) td {
  background: rgba(15, 23, 42, 0.55);
}

/* hover 効果：ほんのりネオン */
.entry-content table tr:hover td {
  background: rgba(76, 219, 140, 0.08);
  transition: 0.17s ease;
}
/* コード */
pre,
code {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
pre {
  background: var(--kp-bg);
  border-radius: 10px;
  padding: 12px 14px;
  border: 1px solid var(--kp-border);
  overflow-x: auto;
}
code {
  background: rgba(15, 23, 42, 0.9);
  border-radius: 4px;
  padding: 2px 4px;
}

/************************************************
 *  フォーム / ボタン（コメント含む）
 ************************************************/

.btn,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.comment-btn,
.container input[type="submit"] {
  background: var(--kp-accent-green);
  border-radius: 999px;
  border: none;
  color: #022c22;
  padding: 0.55em 1.4em;
  font-size: 0.95rem;
  cursor: pointer;
}
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.comment-btn:hover,
.container input[type="submit"]:hover {
  background: var(--kp-accent-green-strong);
  color: #022c22;
}

/* テキスト/テキストエリア（コメントフォーム含め全域） */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background: rgba(2, 6, 23, 0.98);
  border-radius: 10px;
  border: 1px solid var(--kp-border-soft);
  color: var(--kp-text);
  padding: 8px 10px;
}

/* コメントフォーム専用・Cocoon の !important 対策 */
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea#comment {
  background: rgba(2, 6, 23, 0.98) !important;
  border: 1px solid var(--kp-border) !important;
  color: var(--kp-text) !important;
  border-radius: 10px !important;
}
.comment-respond textarea#comment::placeholder {
  color: var(--kp-text-mute) !important;
}

/* フォーカス時の縁をネオングリーンに */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus,
.comment-respond input[type="text"]:focus,
.comment-respond input[type="email"]:focus,
.comment-respond input[type="url"]:focus,
.comment-respond textarea#comment:focus {
  outline: none !important;
  border-color: var(--kp-accent-green) !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.4);
}

/************************************************
 *  カテゴリ / タグ / タグクラウド
 ************************************************/

.cat-label,
.tag-label,
.tag-link,
.comment-reply-link {
  background: #111827;
  color: var(--kp-text);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
}
.cat-label:hover,
.tag-label:hover,
.tag-link:hover,
.comment-reply-link:hover {
  background: var(--kp-accent-green);
  color: #022c22;
}

/* タグクラウド */
.tagcloud a {
  border-radius: 999px;
  background: var(--kp-bg);
  border: 1px solid var(--kp-border);
  padding: 4px 10px;
  margin: 2px 4px;
  font-size: 12px !important;
  color: var(--kp-text);
}
.tagcloud a:hover {
  border-color: var(--kp-accent-green);
  color: #4ade80;
}

/************************************************
 *  カード系（一覧・関連記事・新着）
 ************************************************/

.entry-card,
.related-entry-card,
.new-entry-card,
.widget-entry-card,
.carousel-entry-card {
  background: var(--kp-bg-panel);
  border-radius: 16px;
  border: 1px solid var(--kp-border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
  color: var(--kp-text);
}
.entry-card-content,
.related-entry-card-content,
.new-entry-card-content {
  color: var(--kp-text);
}

/************************************************
 *  コメント
 ************************************************/

.comments-area {
  border-top: 1px solid #0b1220;
  margin-top: 40px;
  padding-top: 20px;
  background: transparent !important;
}
.comment-list li {
  border-bottom: 1px solid var(--kp-border);
}
.comment-body {
  color: var(--kp-text);
}
.comment-author,
.comment-author a {
  color: var(--kp-text);
}
.comment-meta,
.comment-meta a {
  font-size: 11px;
  color: var(--kp-text-mute);
}
.comment-meta a:hover {
  color: var(--kp-text);
}

/* コメント送信ボタン */
.comment-respond input[type="submit"] {
  background: var(--kp-accent-green);
  border-radius: 999px;
  border: none;
  color: #022c22;
  padding: 0.65em 1.6em;
}
.comment-respond input[type="submit"]:hover {
  background: var(--kp-accent-green-strong);
}

/************************************************
 *  ページネーション / マルチページ
 ************************************************/

.pagination,
.pager,
.page-numbers {
  text-align: center;
  margin: 32px 0;
}
.page-numbers a,
.page-numbers span {
  display: inline-block;
  margin: 0 4px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--kp-border-soft);
  background: var(--kp-bg);
  color: var(--kp-text);
  font-size: 12px;
}
.page-numbers .current,
.page-numbers a:hover {
  background: var(--kp-accent-green);
  border-color: var(--kp-accent-green);
  color: #022c22;
}

/************************************************
 *  目次（Cocoon標準）
 ************************************************/

.toc,
.toc-widget {
  background: var(--kp-bg-panel);
  border-radius: 14px;
  border: 1px solid var(--kp-border);
}
.toc-title,
.toc .toc-title {
  background: var(--kp-bg-panel);
  color: var(--kp-text);
  border-bottom: 1px solid var(--kp-border);
}
.toc-content ul li a,
.toc-content ol li a {
  color: var(--kp-text);
}
.toc-content ul li a:hover,
.toc-content ol li a:hover {
  color: #7dd3fc;
}

/************************************************
 *  カレンダー
 ************************************************/

.wp-calendar-table th,
.wp-calendar-table td {
  border: 1px solid var(--kp-border-soft);
}
.wp-calendar-table th {
  background: var(--kp-bg);
  color: var(--kp-text);
}
.wp-calendar-table td {
  background: var(--kp-bg);
  color: var(--kp-text);
}
.wp-calendar-table [id$=today],
#slide-in-wp-calendar #slide-in-today {
  background-color: var(--kp-accent-green-strong);
}
.wp-calendar-table [id$=today] a,
#slide-in-wp-calendar #slide-in-today a {
  background-color: #bbf7d0;
  color: #022c22;
}
.wp-calendar-table td a,
#slide-in-wp-calendar td a {
  display: block;
  background-color: rgba(34, 197, 94, 0.25);
  color: var(--kp-text);
}
.wp-calendar-table td a:hover,
#slide-in-wp-calendar td a:hover {
  background-color: rgba(34, 197, 94, 0.45);
}

/************************************************
 *  Topへ戻るボタン
 ************************************************/

.go-to-top-button {
  border: 2px outset var(--kp-accent-green);
  color: var(--kp-accent-green);
  background: none;
  border-radius: 50%;
}
.go-to-top-button:hover {
  color: var(--kp-accent-green);
}

/************************************************
 *  フッター
 ************************************************/

#footer,
#footer-in {
  background: var(--kp-bg);
  border-top: 1px solid #0b1220;
  color: var(--kp-text-mute);
}
#footer a {
  color: var(--kp-text-sub);
}
#footer a:hover {
  color: var(--kp-text);
}
#footer .footer-bottom {
  border-top: 1px solid #0b1220;
}

/************************************************
 *  フロントページ専用（HERO / ABOUT / CASE / JOIN）
 *  ここは元の front-page.js と連動するクラスを維持
 ************************************************/

/* 背景動画（ヒーローセクション内） */
.l-background-movie {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  max-height: 640px;
  pointer-events: none;
}
.l-background-movie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(6px) brightness(0.25);
  transform: scale(1.05);
}

/* メインラッパー */
.kontek-main {
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.kontek-main-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 80px 24px 80px;
}

/* イントロオーバーレイ */
.p-front-enter {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at top, #0f172a 0, #020617 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.p-front-enter.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.p-front-enter__inner {
  text-align: center;
  max-width: 640px;
  padding: 24px;
}
.p-front-enter__text p {
  position: relative;
  font-size: clamp(24px, 4vw, 32px);
  letter-spacing: 0.25em;
  text-shadow:
    0 0 8px rgba(148, 163, 184, 0.7),
    0 0 18px rgba(15, 23, 42, 0.9);
  animation: enter-glitch 2s infinite steps(2, end);
}
.p-front-enter__hint {
  margin-top: 16px;
  font-size: 12px;
  color: var(--kp-text-sub);
  letter-spacing: 0.2em;
}
.p-front-enter__video {
  margin-top: 24px;
  max-width: 360px;
  margin-inline: auto;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.95);
}
.p-front-enter__video video {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes enter-glitch {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 1; }
  8% { transform: translate3d(1px, -1px, 0); }
  10% { transform: translate3d(-2px, 2px, 0); }
  12% { transform: translate3d(1px, 1px, 0); }
  20% { opacity: 0.8; }
  22% { opacity: 1; }
}

/* body 状態 */
body.intro-active { overflow: hidden; }
body.intro-finished { overflow: auto; }

/* HERO */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 24px 64px;
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98) 0, #020617 60%);
  overflow: hidden;
}
.hero-inner {
  max-width: 880px;
  text-align: center;
  margin: 0 auto;
}
.hero-kicker {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--kp-accent-green);
  margin-bottom: 12px;
}
.hero-title {
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 12px;
}
.hero-title span.accent {
  background: linear-gradient(120deg, var(--kp-accent-green), #2dd4bf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-subtitle {
  font-size: 14px;
  line-height: 1.9;
  color: var(--kp-text-sub);
  margin-bottom: 24px;
}
.hero-meta {
  font-size: 11px;
  color: var(--kp-text-mute);
  margin-bottom: 24px;
}
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #4b5563;
  color: var(--kp-text);
  background: transparent;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease;
}
.hero-button.primary {
  background: var(--kp-accent-green);
  border-color: var(--kp-accent-green);
  color: #022c22;
}
.hero-button.ghost {
  background: rgba(15, 23, 42, 0.6);
}
.hero-button.secondary {
  background: rgba(15, 23, 42, 0.85);
  border-color: var(--kp-accent-green);
}
.hero-button.small {
  font-size: 12px;
  padding: 6px 14px;
}
.hero-button:hover {
  transform: translateY(-1px);
  background: var(--kp-accent-green-strong);
  border-color: var(--kp-accent-green-strong);
  color: #022c22;
  box-shadow: 0 18px 45px rgba(22, 163, 74, 0.35);
}

/* JS アニメ前状態（front.js でフェードイン） */
.hero-kicker,
.hero-title,
.hero-subtitle,
.hero-buttons .hero-button,
.js-fade-in,
.js-fade-up {
  opacity: 0;
  transform: translateY(18px);
}

/* セクション共通 */
.section {
  padding: 64px 24px;
  background: linear-gradient(to bottom, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.98));
}
.section:nth-of-type(even) {
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.96), #020617);
}
.section-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.section-header {
  margin-bottom: 24px;
}
.section-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kp-accent-green);
  margin-bottom: 6px;
}
.section-title {
  font-size: 22px;
  margin-bottom: 10px;
}
.section-text {
  font-size: 14px;
  line-height: 1.9;
  color: var(--kp-text-sub);
}

/* ABOUT：テキストブロック */
.p-front-introduction__block-inner {
  position: relative;
  padding: 24px 20px;
  border-radius: 20px;
  border: 1px solid var(--kp-border-soft);
  background: var(--kp-bg-panel-soft);
  overflow: hidden;
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}
.p-front-introduction__block-inner.is-active {
  border-color: var(--kp-accent-green);
  background: radial-gradient(circle at top, rgba(15, 23, 42, 0.98), #020617);
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.4),
    0 24px 80px rgba(0, 0, 0, 0.9);
}
.p-front-introduction__block-inner p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--kp-text);
}

/* サーバーカード */
.p-front-case-mark__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.p-front-case-mark__item {
  border-radius: 18px;
  border: 1px solid var(--kp-border-soft);
  background: var(--kp-bg-panel-soft);
  padding: 16px;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}
.p-front-case-mark__item:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(34, 197, 94, 0.7);
  background: radial-gradient(circle at top, #020617, rgba(15, 23, 42, 0.96));
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.9);
}

/************************************************
 *  TOPページをフル幅に
 ************************************************/

.home #sidebar,
.home .sidebar,
.home #sidebar-left,
.home #sidebar-right {
  display: none !important;
}
.home #container,
.home #content,
.home #content-in,
.home #main {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
  box-sizing: border-box;
}
.home #content .wrap,
.home #content-in .wrap,
.home #main .wrap,
.home #main .main {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.home .kontek-main {
  margin: 0 !important;
  padding: 0 !important;
}

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

@media screen and (max-width: 1023px) {
  .hero {
    padding-top: 80px;
  }
  .kontek-main-inner {
    padding-inline: 16px;
  }
  .section {
    padding-inline: 16px;
  }
}
@media screen and (max-width: 834px) {
  .hero-title {
    font-size: 32px;
  }
}
@media screen and (max-width: 480px) {
  .hero-subtitle {
    font-size: 12px;
  }
  .hero-button {
    padding: 8px 14px;
    font-size: 12px;
  }
  .p-front-enter__video {
    margin-top: 20px;
    max-width: 300px;
  }
}
/************************************************
 * KONTEKU 完全統一 DARK THEME FINAL
 * front-page.js やアニメーションに影響しない純CSS版
 ************************************************/

/* -----------------------------
   0. 全体基本設定
----------------------------- */
body, html {
  background: #020617 !important;
  color: #e5e7eb !important;
}

a {
  color: #38bdf8 !important;
}
a:hover {
  color: #4ade80 !important;
}

/* 記事全体の白背景を完全に殺す */
.post, .page, .article, .entry-content,
#main, #content, .wrap, .box, .entry-card {
  background: transparent !important;
  color: #e5e7eb !important;
  box-shadow: none !important;
  border: none !important;
}

/* -----------------------------
   1. 関連記事（白いカードをなくす）
----------------------------- */
.related-entry-card,
.related-entry,
.related-entries,
#related-entries,
.carousel-entry {
  background: #0f172a !important;
  border-radius: 16px !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  padding: 16px !important;
}

.related-entry-card *,
.related-entry *,
.carousel-entry * {
  color: #e5e7eb !important;
}

/* サムネ部分の白を消す */
.related-entry-card .no-image,
.carousel-entry .no-image {
  background: #1e293b !important;
  color: #64748b !important;
}

/* ホバー時の白発光を無効化 */
.related-entry-card:hover,
.carousel-entry:hover {
  background: #0f172a !important;
  transform: translateY(-2px);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.3) !important;
}

/* -----------------------------
   2. 記事本文（白背景を除去）
----------------------------- */
.entry-content p,
.entry-content li,
.entry-content span {
  color: #e5e7eb !important;
}

.entry-content h2 {
  border-left: 4px solid #22c55e;
  padding-left: 12px;
  font-size: 1.4rem;
  margin-top: 2rem;
}

.entry-content h3 {
  border-bottom: 2px solid #1f2937;
  padding-bottom: 4px;
  margin-top: 1.4rem;
}

/* 引用 */
blockquote {
  background: rgba(15, 23, 42, 0.85) !important;
  border-left: 4px solid #38bdf8 !important;
  color: #e5e7eb !important;
}

/* テーブル */
table {
  background: transparent !important;
}
table th, table td {
  border: 1px solid #1e293b !important;
  color: #e5e7eb !important;
}

/* -----------------------------
   3. コメント欄
----------------------------- */
.comments-area {
  background: #0f172a !important;
  border-radius: 20px;
  border: 1px solid rgba(34, 197, 94, 0.5) !important;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

.comment-respond input,
.comment-respond textarea {
  background: rgba(2, 6, 23, 0.98) !important;
  border: 1px solid #1e293b !important;
  color: #e5e7eb !important;
  border-radius: 10px !important;
}

.comment-respond input:focus,
.comment-respond textarea:focus {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.5) !important;
}

.comment-respond input[type="submit"] {
  background: #22c55e !important;
  color: #022c22 !important;
  border-radius: 999px !important;
  font-weight: 600;
  padding: 10px 24px !important;
}
.comment-respond input[type="submit"]:hover {
  background: #16a34a !important;
}

/* -----------------------------
   4. サイドバーの完全ダーク化
----------------------------- */
#sidebar .widget {
  background: #0f172a !important;
  border-radius: 16px !important;
  border: 1px solid rgba(34, 197, 94, 0.35) !important;
  padding: 18px !important;
}

#sidebar .widget *,
#sidebar .widget-title {
  color: #e5e7eb !important;
}

#sidebar .widget-title {
  border: 1px solid rgba(34, 197, 94, 0.6) !important;
  border-radius: 999px !important;
  padding: 6px 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

/* -----------------------------
   5. ホバー時に白く光る要素の全停止
----------------------------- */
*:hover {
  box-shadow: none !important;
}

/* ただし、リンクの色変化だけは許可 */
a:hover {
  box-shadow: none !important;
}

/* -----------------------------
   6. モバイルの固定操作バー（白を黒に）
----------------------------- */
.footer-mobile-buttons,
.mobile-menu-buttons,
.sns-share,
.share-button,
#fixbtn {
  background: #0f172a !important;
  border-color: #1e293b !important;
}

.footer-mobile-buttons *,
.mobile-menu-buttons *,
.sns-share *,
.share-button *,
#fixbtn * {
  color: #e5e7eb !important;
}

/* シェアアイコンが白になるのを防ぐ */
.share-button svg,
.sns-share svg {
  fill: #22c55e !important;
}
/************************************************
 * KONTEKU 追加仕上げ：枠アニメ＋白背景殺し
 ************************************************/

/* =============================
   A. サイドバー & 関連記事の枠をネオン化
   （CSSだけでアニメ、JS不要）
============================= */

/* 共通カード（サイドバーウィジェット & 関連記事カード） */
#sidebar .widget,
.related-entry-card,
.related-entries .a-wrap,
.carousel-entry {
  position: relative;
  overflow: hidden;
  background: #020617 !important;
  border-radius: 18px !important;
  border: 1px solid rgba(34, 197, 94, 0.45) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.7) !important;
}

/* 内側の要素の白背景を完全に消す */
#sidebar .widget *,
.related-entry-card *,
.related-entries .a-wrap *,
.carousel-entry * {
  background-color: transparent !important;
}

/* ネオンの“にじみ”レイヤー */
#sidebar .widget::before,
.related-entry-card::before,
.related-entries .a-wrap::before,
.carousel-entry::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.45), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.45), transparent 55%);
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  pointer-events: none;
}

/* hover時にふわっと光るアニメ */
#sidebar .widget:hover::before,
.related-entry-card:hover::before,
.related-entries .a-wrap:hover::before,
.carousel-entry:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* hover時も背景が白くならないように固定 */
.related-entry-card:hover,
.related-entries .a-wrap:hover,
.carousel-entry:hover {
  background: #020617 !important;
}

/* 関連カード内のリンクも白背景禁止 */
.related-entry-card a,
.related-entries .a-wrap a,
.carousel-entry a {
  background: transparent !important;
  color: #e5e7eb !important;
}

/* =============================
   B. スマホのスライドメニュー背景をダークに
============================= */

/* スライドイン系オーバーレイ（サイドバー／検索／シェア／フォロー） */
#sidebar-menu-input:checked ~ #sidebar-menu-content,
#search-menu-input:checked ~ #search-menu-content,
#share-menu-input:checked ~ #share-menu-content,
#follow-menu-input:checked ~ #follow-menu-content {
  background-color: rgba(2, 6, 23, 0.98) !important;
  backdrop-filter: blur(12px);
}

/* メニュー内リンク */
.menu-drawer a {
  background-color: transparent !important;
  color: #e5e7eb !important;
  border-bottom: 1px solid #020617 !important;
}
.menu-drawer a:hover {
  background-color: rgba(34, 197, 94, 0.16) !important;
  color: #bbf7d0 !important;
}

/* モバイル下部のボタン帯（テーマ側のやつ） */
.mobile-menu-buttons {
  background-color: #020617 !important;
  border-top: 1px solid #111827 !important;
}
.mobile-menu-buttons .menu-button > a {
  color: #e5e7eb !important;
}
.mobile-menu-buttons .menu-button:hover {
  background-color: #0f172a !important;
  color: #22c55e !important;
}
.mobile-menu-buttons .menu-icon {
  color: #e5e7eb !important;
}

/* =============================
   C. 予防的に関連記事の白hoverを殺しておく
============================= */

/* Cocoon の .a-wrap hover で白くならないように */
.entry-card-wrap.a-wrap,
.entry-card-wrap.a-wrap:hover {
  background-color: transparent !important;
}

/* 関連スライダーのボタンも暗く */
.carousel-prev,
.carousel-next {
  background-color: rgba(15, 23, 42, 0.9) !important;
  border-radius: 999px !important;
  border: 1px solid #1e293b !important;
  color: #e5e7eb !important;
}
.carousel-prev:hover,
.carousel-next:hover {
  background-color: rgba(34, 197, 94, 0.3) !important;
  color: #bbf7d0 !important;
}
/************************************************
 * KONTEKU 見出しカスタム（本文 H2 / H3）
 ************************************************/

/* ===== H2：大見出し ===== */
.entry-content h2,
.article .entry-content h2 {
  position: relative;
  margin: 2.6rem 0 1.4rem;
  padding: 0.9rem 1.4rem 0.9rem 1.3rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #f9fafb;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.6);
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.22), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.22), transparent 55%),
    #020617;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(15, 23, 42, 0.9);
}

/* 左のネオンバー */
.entry-content h2::before,
.article .entry-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #22c55e,
    #2dd4bf,
    #38bdf8
  );
}

/* ===== H3：中見出し ===== */
.entry-content h3,
.article .entry-content h3 {
  position: relative;
  margin: 2rem 0 1.1rem;
  padding: 0.7rem 1.2rem 0.7rem 1.1rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: #e5e7eb;
  border-radius: 12px;
  border: 1px solid rgba(30, 64, 175, 0.7);
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.18), transparent 60%),
    #020617;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
}

/* H3用ネオンバー（少し弱め） */
.entry-content h3::before,
.article .entry-content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(34, 197, 94, 0.9),
    rgba(56, 189, 248, 0.7)
  );
}

/* 「◆見出しテスト」の ◆ が左に詰まりすぎないよう少し余白 */
.entry-content h2,
.entry-content h3 {
  text-indent: 0;           /* 念のためリセット */
}
.entry-content h2,
.entry-content h3 {
  /* 先頭に ◆ を書いている前提で、文字とバーがくっつきすぎないよう調整 */
  padding-left: 1.6rem;
}

/* ===== 区切り線（hr）もネオン寄りに ===== */
.entry-content hr {
  border: none;
  height: 1px;
  margin: 2.2rem 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34, 197, 94, 0.4),
      rgba(56, 189, 248, 0.3),
      transparent
    );
}
/* ========================================
   テーブル hover を白くする Cocoon の仕様を完全無効化
   ======================================== */

/* 白化を上書きして禁止 */
.entry-content table tr:hover td {
  background: rgba(76, 219, 140, 0.08) !important; /* あなたのテーマ用hover */
  transition: 0.17s ease;
  color: #e2e8f0 !important; /* 白化による文字消失も防止 */
}

/* 白化された A ラベルなども暗く戻す */
.entry-content table tr:hover th {
  background: rgba(76, 219, 140, 0.15) !important;
  color: #f1f5f9 !important;
}
/************************************************
 * TABLE 行 hover の白化を完全に止める
 ************************************************/

/* 行全体の背景色を固定（Cocoon 本体より強く） */
.entry-content table tr:hover td,
.entry-content table tr:hover th,
.entry-content table tbody tr:hover td,
.entry-content table tbody tr:hover th,
.article .entry-content table tr:hover td,
.article .entry-content table tr:hover th,
.post .entry-content table tr:hover td,
.post .entry-content table tr:hover th {
  background: rgba(76, 219, 140, 0.08) !important; /* 好きな色に変えてOK */
  color: #e2e8f0 !important;
}

/* セルの中にある要素の白背景も殺す */
.entry-content table tr:hover td *,
.entry-content table tr:hover th * {
  background-color: transparent !important;
  color: inherit !important;
}
/**********************************************
 * KONTEKU GLOW NAVIGATION
 **********************************************/
.konteku-nav {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.konteku-nav ul {
  display: flex;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.konteku-nav a {
  position: relative;
  padding: 6px 0;
  font-size: 17px;
  color: #7fffe0; /* ネオンブルーグリーン */
  text-decoration: none;
  letter-spacing: 1px;
  transition: color 0.25s ease;
}

/* 発光 */
.konteku-nav a:hover {
  color: #bafff0;
  text-shadow: 0 0 8px #47ffca, 0 0 15px #47ffca;
}

/* 下線アニメーション（レーザー風） */
.konteku-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #0aff9d, #1acfff);
  box-shadow: 0 0 8px #1acfff;
  transition: width 0.3s ease;
}

.konteku-nav a:hover::after {
  width: 100%;
}

/* クリック時の波紋（JS用） */
.konteku-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(0, 255, 200, 0.5);
  animation: konteku-ripple-effect 0.5s linear;
}

@keyframes konteku-ripple-effect {
  to {
    transform: scale(6);
    opacity: 0;
  }
}
/**********************************************
 * KONTEKU GLOW GLOBAL NAV (Cocoon #navi 用)
 **********************************************/
#navi,
#navi-in {
  background: var(--kp-bg);
  border-bottom: 1px solid #0b1220;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.85);
}

/* メニューリスト */
#navi-in ul,
#navi ul {
  background: transparent;
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 0;
  padding: 4px 0 6px;
}

/* li の右境界線などを殺す */
#navi-in ul li,
#navi ul li {
  border-right: none;
  float: none;
}

/* リンク本体 */
#navi-in a,
#navi a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  font-size: 14px;
  color: #a5f3fc;
  text-decoration: none;
  letter-spacing: 0.08em;
  text-transform: none;
  overflow: hidden; /* ripple 用 */
  transition:
    color 0.25s ease,
    text-shadow 0.25s ease,
    transform 0.12s ease;
}

/* 通常状態を少しだけ落ち着かせる */
#navi-in a span,
#navi a span {
  display: inline-block;
}

/* Hover 時のネオン発光 */
#navi-in a:hover,
#navi a:hover,
#navi .current-menu-item > a,
#navi-in .current-menu-item > a {
  color: #e0f2fe;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.9),
    0 0 18px rgba(56, 189, 248, 0.6);
  transform: translateY(-1px);
}

/* 下線レーザーアニメ */
#navi-in a::after,
#navi a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #22c55e, #2dd4bf, #38bdf8);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.9);
  transition: width 0.25s ease;
}

#navi-in a:hover::after,
#navi a:hover::after,
#navi .current-menu-item > a::after,
#navi-in .current-menu-item > a::after {
  width: 100%;
}

/* クリック波紋用 */
.konteku-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(45, 212, 191, 0.55);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.9;
  animation: konteku-ripple-effect 0.5s ease-out;
}

@keyframes konteku-ripple-effect {
  to {
    transform: scale(5.5);
    opacity: 0;
  }
}

/* スマホ幅では少し詰める */
@media screen and (max-width: 768px) {
  #navi-in ul,
  #navi ul {
    gap: 18px;
  }
  #navi-in a,
  #navi a {
    font-size: 13px;
    padding: 6px 2px;
  }
}
/**********************************************
 * KONTEKU GLOW GLOBAL NAV (Cocoon #navi 用)
 **********************************************/
#navi,
#navi-in {
  background: #020617;
  border-bottom: 1px solid #020617;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.85);
}

/* メニューリスト */
#navi-in ul,
#navi ul {
  background: transparent;
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 0;
  padding: 4px 0 6px;
}

/* li の右境界線などを殺す */
#navi-in ul li,
#navi ul li {
  border-right: none;
  float: none;
}

/* リンク本体 */
#navi-in a,
#navi a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  font-size: 14px;
  color: #a5f3fc;
  text-decoration: none;
  letter-spacing: 0.08em;
  overflow: hidden; /* ripple 用 */
  transition:
    color 0.25s ease,
    text-shadow 0.25s ease,
    transform 0.12s ease;
}

#navi-in a span,
#navi a span {
  display: inline-block;
}

/* Hover 時のネオン発光 */
#navi-in a:hover,
#navi a:hover,
#navi .current-menu-item > a,
#navi-in .current-menu-item > a {
  color: #e0f2fe;
  text-shadow:
    0 0 8px rgba(56, 189, 248, 0.9),
    0 0 18px rgba(56, 189, 248, 0.6);
  transform: translateY(-1px);
}

/* 下線レーザーアニメ */
#navi-in a::after,
#navi a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #22c55e, #2dd4bf, #38bdf8);
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.9);
  transition: width 0.25s ease;
}

#navi-in a:hover::after,
#navi a:hover::after,
#navi .current-menu-item > a::after,
#navi-in .current-menu-item > a::after {
  width: 100%;
}

/* クリック波紋用 span */
.konteku-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background: rgba(45, 212, 191, 0.55);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0.9;
  animation: konteku-ripple-effect 0.5s ease-out;
}

@keyframes konteku-ripple-effect {
  to {
    transform: scale(5.5);
    opacity: 0;
  }
}

/* モバイルのスライドインメニュー背景をダークに */
#navi-menu-content,
#sidebar-menu-content {
  background: #020617;
}

/* モバイルのメニューボタン帯の背景 */
.mobile-menu-buttons {
  background-color: rgba(15, 23, 42, 0.97);
}

/* スマホ幅では少し詰める */
@media screen and (max-width: 768px) {
  #navi-in ul,
  #navi ul {
    gap: 18px;
  }
  #navi-in a,
  #navi a {
    font-size: 13px;
    padding: 6px 2px;
  }
}