@charset "UTF-8";

/*
Skin Name: Kontek Portal
Description: コンテクサーバーのサイト全体デザイン（Apple風・ライト/ダーク自動対応）
Skin URI: https://www.kontekugame-server.com/
Author: kontek u
Author URI: https://www.kontekugame-server.com/
Version: 2.0.0
Priority: 999000000
*/

/*=========================================================
  2026-09-18 全面書き直し
  旧バージョン(1.3.0)は複数回の追記パッチ（DARK THEME FINAL /
  追加仕上げ / GLOW NAVIGATION ×2 等）が積み重なり、子テーマ側の
  スタイルと二重管理になって予期しない競合を起こしていた。
  今回はサイト全体のクロム（ヘッダー・ナビ・記事・サイドバー・
  フッター等）をここ一箇所に一本化し、フロントページ専用の
  HERO演出（front-page.php / front.js 連動）のみ旧ファイルから
  そのまま移植して維持する。
=========================================================*/

/************************************************
 *  カラートークン（ライトを既定、ダークは自動追従のみ）
 ************************************************/
:root {
  --kp-bg: #fbfbfd;
  --kp-bg-soft: #f5f5f7;
  --kp-bg-panel: #ffffff;
  --kp-bg-panel-soft: rgba(245, 245, 247, 0.92);
  --kp-border: #d2d2d7;
  --kp-border-soft: #e8e8ed;
  --kp-text: #1d1d1f;
  --kp-text-body: #3a3a3c;
  --kp-text-sub: #6e6e73;
  --kp-text-mute: #86868b;
  --kp-accent-green: #15803d;
  --kp-accent-green-soft: rgba(21, 128, 61, 0.1);
  --kp-accent-green-strong: #166534;
  --kp-accent-cyan: #0284c7;
  --kp-accent-cyan-soft: rgba(2, 132, 199, 0.14);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kp-bg: #050a16;
    --kp-bg-soft: #0b1323;
    --kp-bg-panel: #111d30;
    --kp-bg-panel-soft: rgba(17, 29, 48, 0.92);
    --kp-border: #1e293b;
    --kp-border-soft: #23334d;
    --kp-text: #e5e7eb;
    --kp-text-body: #cbd1db;
    --kp-text-sub: #b4bdcc;
    --kp-text-mute: #9aa6b8;
    --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);
    color-scheme: dark;
  }
}

/************************************************
 *  ベース / 全体
 ************************************************/
html,
body {
  background: var(--kp-bg) !important;
  color: var(--kp-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  letter-spacing: 0.01em;
}

/* Cocoon が貼る白背景を全域で殺す（テーマ自体の箱はすべて透明化し、色は body に委ねる） */
#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);
}

a {
  color: var(--kp-accent-cyan);
  text-decoration: none;
}
a:hover {
  color: var(--kp-accent-green);
}

::selection {
  background: var(--kp-accent-cyan-soft);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--kp-text);
}

/************************************************
 *  モバイル下部固定メニューバーを完全に廃止
 *  （Cocoon標準機能。Apple的なサイトにこの手のUIは存在しないため）
 *  重大バグ修正(2026-09-18): .mobile-button-fmb / .mblt-footer-mobile-buttons /
 *  .mblt-header-and-footer-mobile-buttons は実は要素のクラスではなく、
 *  Cocoonが<body>タグ自体に付与する「機能フラグ」用クラスだった。
 *  display:none をこれらに適用すると<body>全体が非表示になり、
 *  サイト全ページが白紙/黒一色に見える不具合の直接原因になっていた。
 *  実際のボタンバー本体のクラスは .mobile-menu-buttons のみ。
 ************************************************/
.mobile-menu-buttons {
  display: none !important;
}

/************************************************
 *  ヘッダー / グローバルナビ
 ************************************************/
#header-container {
  background: var(--kp-bg) !important;
  border-bottom: 1px solid var(--kp-border);
}
#header {
  background: var(--kp-bg) !important;
}

.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) !important;
}
#navi ul,
#navi-in ul {
  background: transparent;
}
#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: var(--kp-accent-green-soft);
  color: var(--kp-accent-green-strong);
  border-radius: 9999px;
}

.fixed-header .header,
.header-container.fixed-header {
  background: var(--kp-bg) !important;
}

/* Cocoonのテーマカラー設定（カスタマイザー）が生成する固定色インラインCSSの上書き */
#header-container,
#header-container .navi,
#navi .navi-in > .menu-header .sub-menu,
.article h2,
.sidebar h2,
.sidebar h3,
.cat-link,
.cat-label,
.appeal-content .appeal-button,
.demo .cat-label,
.blogcard-type .blogcard-label,
#footer {
  background-color: var(--kp-bg) !important;
}
.header,
.header .site-name-text,
#navi .navi-in a,
#navi .navi-in a:hover,
.article h2,
.sidebar h2,
.sidebar h3,
#footer,
#footer a:not(.sns-button) {
  color: var(--kp-text) !important;
}

/************************************************
 *  パンくず / メタ
 ************************************************/
.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);
}

/************************************************
 *  記事タイトル / 本文
 ************************************************/
.entry-title,
.article h1 {
  font-size: clamp(2.1rem, 4.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: break-word;
  color: var(--kp-text);
}
.entry-title a {
  color: var(--kp-text);
}
.entry-title a:hover {
  color: var(--kp-accent-green);
}

.entry-content {
  line-height: 1.95;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--kp-text-body);
  text-wrap: pretty;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.entry-content p {
  margin-bottom: 1.4em;
}

.entry-content h2,
.article h2 {
  border-left: 4px solid var(--kp-accent-green);
  padding-left: 14px;
  margin: 2.2em 0 0.9em;
  font-size: clamp(1.45rem, 2.8vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.32;
  color: var(--kp-text);
}
.entry-content h3,
.article h3 {
  border-bottom: 2px solid var(--kp-border-soft);
  padding-bottom: 6px;
  margin: 1.8em 0 0.7em;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.4;
  color: var(--kp-text);
}
.entry-content h4,
.article h4 {
  margin: 1.4em 0 0.5em;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--kp-text);
}

blockquote {
  background: var(--kp-bg-soft);
  border-left: 4px solid var(--kp-border);
  color: var(--kp-text-sub);
  padding: 1em 1.4em;
  border-radius: 12px;
}

table {
  border-color: var(--kp-border) !important;
}
table th {
  background: var(--kp-bg-soft) !important;
  color: var(--kp-text);
}
table td {
  border-color: var(--kp-border) !important;
}

pre,
code {
  background: var(--kp-bg-soft) !important;
  color: var(--kp-text);
  border: 1px solid var(--kp-border);
  border-radius: 8px;
}

/************************************************
 *  サイドバー / ウィジェット
 *  （子テーマ側で display:none 済みだが、印刷等の
 *    フォールバック用に色だけ揃えておく）
 ************************************************/
.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;
}
.widget a {
  color: var(--kp-text);
}
.widget a:hover {
  color: var(--kp-accent-green);
}

/************************************************
 *  カード系（一覧・関連記事・新着・ブログカード）
 ************************************************/
.entry-card-wrap,
.related-entry-card-wrap {
  display: block;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  transform: translateY(-4px) !important;
}

.blogcard-wrap {
  background: transparent !important;
}
.blogcard-title {
  color: var(--kp-text) !important;
}
.blogcard-snippet,
.blogcard-date,
.blogcard-post-date {
  color: var(--kp-text-sub) !important;
  text-wrap: pretty;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.blogcard-site,
.blogcard-domain {
  color: var(--kp-text-mute) !important;
}

.entry-card,
.related-entry-card,
.a-wrap.blogcard {
  background: var(--kp-bg-panel) !important;
  border: 1px solid var(--kp-border-soft) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.entry-card-wrap:hover .entry-card,
.related-entry-card-wrap:hover .related-entry-card,
.a-wrap.blogcard:hover {
  border-color: var(--kp-accent-green) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12) !important;
}
@media (prefers-color-scheme: dark) {
  .entry-card,
  .related-entry-card,
  .a-wrap.blogcard {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  }
  .entry-card-wrap:hover .entry-card,
  .related-entry-card-wrap:hover .related-entry-card,
  .a-wrap.blogcard:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7) !important;
  }
}

.entry-card-thumb,
.related-entry-card-thumb,
.blogcard-thumbnail {
  border-radius: 14px !important;
  overflow: hidden !important;
}
.entry-card-thumb img,
.related-entry-card-thumb img,
.blogcard-thumbnail img {
  border-radius: 14px !important;
  transition: transform 0.35s ease !important;
}
.entry-card-wrap:hover .entry-card-thumb img,
.related-entry-card-thumb:hover img,
.a-wrap.blogcard:hover .blogcard-thumbnail img {
  transform: scale(1.04) !important;
}

.entry-card-title,
.related-entry-card-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--kp-text) !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.015em !important;
}
.entry-card-snippet {
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--kp-text-sub) !important;
  text-wrap: pretty;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* カテゴリ・リボン等のpill化 */
.cat-label,
.cat-link,
.card-label,
.blogcard-label,
.ribbon {
  border-radius: 9999px !important;
  background: var(--kp-accent-green) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 12px !important;
}

/************************************************
 *  フォーム / ボタン（pill形状統一）
 ************************************************/
input,
textarea,
select {
  background: var(--kp-bg-panel);
  color: var(--kp-text);
  border: 1px solid var(--kp-border);
  border-radius: 12px;
}

.article a.button,
input[type="submit"],
button[type="submit"],
.wp-block-button__link,
.search-submit,
.comment-form input[type="submit"] {
  background: var(--kp-accent-green) !important;
  color: #ffffff !important;
  border: none;
  border-radius: 9999px !important;
  padding: 0.7em 1.6em;
  font-weight: 600;
  transition: transform 0.15s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}
.article a.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.wp-block-button__link:hover,
.search-submit:hover {
  opacity: 0.9;
  box-shadow: 0 8px 24px rgba(22, 163, 74, 0.3);
}
.article a.button:active,
input[type="submit"]:active,
button[type="submit"]:active {
  transform: scale(0.96);
}

/************************************************
 *  ページネーション / 目次（pill形状統一）
 ************************************************/
.pagination a,
.pagination .current,
.page-numbers,
.pagination-next,
.pagination-prev {
  background: var(--kp-bg-panel);
  border: 1px solid var(--kp-border);
  color: var(--kp-text);
  border-radius: 9999px !important;
  transition: all 0.2s ease;
}
.pagination a:hover,
.page-numbers:hover {
  border-color: var(--kp-accent-green);
  color: var(--kp-accent-green);
}
.pagination .current {
  background: var(--kp-accent-green);
  color: #ffffff;
  border-color: var(--kp-accent-green);
}

.article .toc {
  background: var(--kp-bg-panel);
  border: 1px solid var(--kp-border-soft);
  border-radius: 20px;
}
.article .toc .toc-title {
  color: var(--kp-text);
}
.article .toc a {
  color: var(--kp-text-sub);
}
.article .toc a:hover {
  color: var(--kp-accent-green);
}

/************************************************
 *  Topへ戻るボタン
 ************************************************/
.page-top-button,
.go-to-top-button {
  background: var(--kp-bg-panel) !important;
  border: 1px solid var(--kp-border) !important;
  color: var(--kp-text) !important;
  border-radius: 9999px !important;
}

/************************************************
 *  フッター
 ************************************************/
#footer {
  border-top: 1px solid var(--kp-border);
}
#footer a:not(.sns-button):hover {
  color: var(--kp-accent-green) !important;
}

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

/* トップページもサイト共通の --kp-* 変数（ライト/ダーク自動切替）に統一 */

/* NEWSカード（.post-card）: Apple Books「ライブラリ」マーキー(横自動スクロール)を参考に実装。
   横スクロールは投稿一覧を2セット連続描画し、-50%まで動かして継ぎ目なくループ
   (Appleは独自JSのrAF駆動だが、ここでは保守性を優先しCSS animationで同等の見た目を実現)。 */
.p-front-posts__marquee {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.p-front-posts__marquee + .p-front-posts__marquee {
  margin-top: 20px;
}
.p-front-posts__list {
  display: flex;
  gap: 20px;
  width: max-content;
  animation: kontek-marquee-scroll 34s linear infinite;
}
.p-front-posts__marquee--reverse .p-front-posts__list {
  animation-name: kontek-marquee-scroll-reverse;
}
.p-front-posts__marquee:hover .p-front-posts__list,
.p-front-posts__marquee:focus-within .p-front-posts__list {
  animation-play-state: paused;
}
@keyframes kontek-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes kontek-marquee-scroll-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .p-front-posts__list { animation: none; }
}
.post-card {
  display: block;
  flex: 0 0 auto;
  width: 300px;
  overflow: visible;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.post-card:hover {
  transform: translateY(-4px);
}
.post-card-link {
  display: block;
  color: inherit;
}
.hover-container {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
.hover-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 300ms ease;
}
.post-card-link:hover .hover-content,
.post-card-link:focus-visible .hover-content {
  opacity: 1;
}
.marquee-cta {
  display: inline-block;
  border-radius: 980px;
  background: #ffffff;
  color: #1d1d1f;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 21px;
  transform: translateY(15px);
  transition: transform 400ms ease;
}
.post-card-link:hover .marquee-cta,
.post-card-link:focus-visible .marquee-cta {
  transform: translateY(0);
}
.post-card-thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: var(--kp-bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-card-thumb img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.post-title {
  font-size: 17px;
  font-weight: 700;
  margin: 16px 4px 4px;
  color: var(--kp-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-date {
  font-size: 12px;
  color: var(--kp-text-mute);
  margin: 0 4px 10px;
}

/* 背景動画（ヒーローセクション内） */
.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;
}

/* イントロオーバーレイ（2026-09-18廃止: クリック必須ゲートを撤去。
   JS側(front.js)も常時スキップするよう変更済みだが、万一JSが遅延/
   失敗しても黒い全画面が残らないようCSS側でも既定非表示にする） */
.p-front-enter {
  display: none !important;
}
.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: var(--kp-bg);
  overflow: hidden;
}
.hero-inner {
  max-width: 880px;
  text-align: center;
  margin: 0 auto;
}
/* アプリアイコン風ロゴ演出（Apple Books参考）:
   --big-icon-size で大きく表示 → JS(playHeroIntro)で --target-icon-size まで
   縮小させながら定位置に収める。初期状態はopacity:0で、JS実行前に見えないようにする */
.hero-app-icon {
  --big-icon-size: 300px;
  --target-icon-size: 150px;
  width: var(--big-icon-size);
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto 20px;
  opacity: 0;
  transform-origin: center top;
}

.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(36px, 7vw, 68px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.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: 17px;
  line-height: 1.8;
  color: var(--kp-text-sub);
  max-width: 640px;
  margin: 0 auto 28px;
}
.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 var(--kp-border);
  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-strong);
  border-color: var(--kp-accent-green-strong);
  color: #ffffff;
}
.hero-button.ghost {
  background: var(--kp-bg-panel-soft);
  border: 1px solid var(--kp-border);
  color: var(--kp-text);
}
.hero-button.secondary {
  background: var(--kp-bg-panel);
  border-color: var(--kp-accent-green);
  color: var(--kp-text);
}
.hero-button.small {
  font-size: 12px;
  padding: 6px 14px;
}
.hero-button:hover {
  transform: translateY(-1px);
  background: var(--kp-accent-green);
  border-color: var(--kp-accent-green);
  color: #ffffff;
  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: 130px 24px;
  background: var(--kp-bg);
}
.section:nth-of-type(even) {
  background: var(--kp-bg-soft);
}
.section-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.section-eyebrow {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kp-accent-green);
  margin-bottom: 12px;
}
.section-title {
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.section-text {
  font-size: 17px;
  line-height: 1.8;
  color: var(--kp-text-sub);
  max-width: 560px;
  margin: 0 auto;
  text-wrap: pretty;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ABOUT：テキストブロック */
.p-front-introduction__block-inner {
  position: relative;
  padding: 36px 32px;
  border-radius: 24px;
  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: var(--kp-bg-panel);
  box-shadow:
    0 0 0 1px rgba(34, 197, 94, 0.4),
    0 24px 80px rgba(0, 0, 0, 0.2);
}
.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: var(--kp-accent-green);
  background: var(--kp-bg-panel);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.2);
}

/************************************************
 *  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: 80px 16px;
  }
}
@media screen and (max-width: 834px) {
  .hero-title {
    font-size: 40px;
  }
  .section-title {
    font-size: 30px;
  }
}
@media screen and (max-width: 480px) {
  .section {
    padding: 64px 16px;
  }
}
@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;
  }
}