@charset "utf-8";

/* ---------------------------------------
   テーマ情報（WordPress用）
---------------------------------------- */
/*
Theme Name: OneCoreSystem
Author: 株式会社 一針一歩
Description: OneCoreSystemは、壊れない構造設計を基盤にしたWordPressテーマ。バックエンドの強固な設計と拡張性を重視し、どんな変化にも対応できる柔軟な運用が可能です。
Version: 1.0
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: responsive, flexible, SEO-friendly, clean, backend-optimized, custom-theme, modular
Text Domain: onecoresystem  /* 




/* ============================================
   Body設定（基本のフォントや背景など）
   ============================================ */

body {
  font-family: 'Noto Sans JP', 'Inter', 'Helvetica Neue', Arial, sans-serif;  /* フォントの優先順 */
  font-size: 1rem;  /* 基準16px。1rem = 16px（デフォルトのブラウザフォントサイズ） */
  line-height: 1.6;  /* 行間を1.6に設定。読みやすさを向上させる */
  color: var(--color-text-primary);  /* 文字の色をカスタムプロパティで設定 */
  background-color: var(--color-bg-light);  /* 背景色をカスタムプロパティで設定 */
  margin: 0;  /* ページ全体の余白をリセット */
  
  /* フォントスムージング（アンチエイリアス）で文字を滑らかに */
  -webkit-font-smoothing: antialiased;  /* WebKitブラウザ（Chrome, Safariなど）向け */
  -moz-osx-font-smoothing: grayscale;  /* Firefox（macOS）向け */
}

:root {
  /* 色 */
  --color-main: #0f172a;               /* メインカラー */
  --color-sub: #334155;                /* サブカラー */
  --color-accent: #3b82f6;             /* アクセントカラー */
  --color-bg: #ffffff;                 /* 背景色 */
  --color-line: #eee;                  /* 区切り線色 */
  --color-accent-light: #60a5fa;       /* アクセント・ライト */
  --color-accent-dark: #2563eb;        /* アクセント・ダーク */
  --color-bg-dark: #111827;            /* ダークテーマの背景色 */
  --color-text-light: #ffffff;         /* ライトテーマの文字色 */
  --color-text-dark: #333333;          /* ダークテーマの文字色 */

  /* フォントサイズ */
  --font-size-base: 1rem;              /* 基本フォントサイズ */
  --font-size-xl: 2rem;                /* 見出し用 */
  --font-size-lg: 1.5rem;              /* 中見出し用 */
  --font-size-sm: 0.875rem;            /* 小さめフォント */
  
  /* 行間 */
  --line-height-base: 1.75;            /* 基本行間 */
  --line-height-xl: 1.3;               /* 見出し用行間 */
  --line-height-lg: 1.4;               /* 中見出し用行間 */
  --line-height-sm: 1.5;               /* 小さめ行間 */

  /* 余白 */
  --spacing-small: 1rem;               /* 小さな余白 */
  --spacing-medium: 2rem;              /* 中くらいの余白 */
  --spacing-large: 3rem;               /* 大きな余白 */
  
  /* ボーダー・角丸 */
  --border-radius: 8px;                /* 基本角丸 */
  --border-radius-large: 16px;         /* 大きな角丸 */
  
  /* ボタン関連 */
  --btn-padding: 0.5rem 1rem;          /* ボタンのパディング */
  --btn-font-size: 1rem;               /* ボタンのフォントサイズ */
  --btn-border-radius: 0.25rem;        /* ボタンの角の丸み */
  --btn-primary-bg: var(--color-accent); /* プライマリボタンの背景色 */
  --btn-secondary-bg: var(--color-sub); /* セカンダリボタンの背景色 */
  --btn-text-color: var(--color-text-light); /* ボタンのテキスト色 */
  
  /* ボタンのホバースタイル */
  --btn-hover-bg: darken(var(--color-accent), 10%); /* ホバー時の背景色 */
  --btn-hover-transform: translateY(-2px);          /* ホバー時の移動エフェクト */
  --btn-hover-text-color: #000000;                  /* ホバー時の文字色（黒） */
  
  /* CTAボタン関連 */
  --cta-button-padding: 14px 30px;          /* CTAボタンのパディング */
  --cta-button-font-size: 0.8rem;           /* フォントサイズ */
  --cta-button-font-weight: 700;            /* フォントの太さ */
  --cta-button-border-radius: 50px;         /* ボタンの角丸 */
  --cta-button-bg-color: var(--color-accent);  /* ボタンの背景色 */
  --cta-button-box-shadow: 0 5px 15px rgba(37, 99, 235, 0.4); /* ボタンのシャドウ */
  --cta-button-cursor: pointer;             /* カーソルをポインターに */
  --cta-button-margin-top: 25px;             /* 上部余白 */
  --cta-button-width: auto;                 /* 幅（自動調整） */
  
  /* ボタンホバースタイル */
  --cta-button-hover-bg-color: var(--color-accent-light); /* ホバー時の背景色 */
  --cta-button-hover-box-shadow: 0 7px 20px rgba(29, 78, 216, 0.6); /* ホバー時のシャドウ */
  --cta-button-hover-transform: translateY(-4px); /* ホバー時の浮き上がり効果 */
  --cta-button-outline-color: var(--color-accent);  /* ホバー時のアウトラインカラー */
  
  /* アクティブ時のスタイル */
  --cta-button-active-bg-color: var(--color-accent); /* アクティブ時の背景色 */
}



/* ============================= */
/* Main Section */
/* ============================= */
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}





/* ============================================
   404ページセクション（404ページのスタイル）
   ============================================ */

.not-found {
  background-color: var(--color-bg);  /* 背景色をカスタムプロパティで設定 */
  padding: var(--spacing-large) var(--spacing-small); /* 上下4rem、左右1rem */
  text-align: center;  /* 中央揃え */
}

/* パンくずリスト */
.not-found .breadcrumbs_container {
  margin-bottom: var(--spacing-medium); /* 下の余白調整 */
}

/* 画像ヘッダー部分 */
.not-found .image_header {
  background-color: #f7fafc;  /* 背景色 */
  padding: var(--spacing-medium) 0;  /* 上下3remの余白 */
  border-radius: 0.75rem;  /* 角を丸く */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);  /* ボックスシャドウ */
}

/* ヘッダー情報 */
.not-found .header_info h1 {
  font-size: var(--font-size-xl);  /* 見出し用フォントサイズ */
  color: var(--color-main);  /* メインカラー */
  margin-bottom: var(--spacing-small);  /* 下の余白調整 */
  font-weight: 700;  /* 太字 */
}

.not-found .header_info p {
  font-size: var(--font-size-base);  /* 基本フォントサイズ */
  color: var(--color-sub);  /* サブカラー */
  line-height: var(--line-height-base); /* 行間調整 */
  margin: 0;
}

/* ============================================
   追加の説明とリンク
   ============================================ */

.not-found-details {
  padding: var(--spacing-large) var(--spacing-small);  /* 上下5rem、左右1rem */
  background-color: var(--color-bg);  /* 背景色をカスタムプロパティで設定 */
  border-top: 1px solid var(--color-line);  /* 上部に区切り線 */
}

/* コンテナ（中央揃え） */
.not-found-details .container {
  max-width: 960px;
  margin: 0 auto;
  text-align: center;  /* 中央揃え */
}

.not-found-details p {
  font-size: var(--font-size-base);  /* 基本フォントサイズ */
  color: var(--color-main);  /* メインカラー */
  line-height: var(--line-height-base); /* 行間調整 */
  margin-bottom: var(--spacing-medium);  /* 下の余白調整 */
}

/* ボタン */
.not-found-details .btn {
  display: inline-block;
  padding: var(--cta-button-padding);  /* ボタンのパディング */
  font-size: var(--cta-button-font-size);  /* フォントサイズ */
  font-weight: var(--cta-button-font-weight);  /* フォント太さ */
  background-color: var(--cta-button-bg-color);  /* ボタンの背景色 */
  border-radius: var(--cta-button-border-radius);  /* 角丸 */
  text-decoration: none; /* 下線をなくす */
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  box-shadow: var(--cta-button-box-shadow);  /* シャドウ */
  cursor: var(--cta-button-cursor);  /* カーソルをポインターに */
  margin-top: var(--cta-button-margin-top);  /* 上の余白 */
  width: var(--cta-button-width);  /* 幅は自動調整 */
}

/* ホバー時のボタンスタイル */
.not-found-details .btn:hover {
  background-color: var(--cta-button-hover-bg-color);  /* ホバー時の背景色 */
  box-shadow: var(--cta-button-hover-box-shadow);  /* ホバー時のシャドウ */
  transform: var(--cta-button-hover-transform);  /* 浮き上がり効果 */
  outline-offset: 2px;
  outline: 2px solid var(--cta-button-outline-color);  /* アウトライン色 */
}

/* アクセシビリティのためのフォーカススタイル */
.not-found-details .btn:focus-visible {
  outline: 2px solid var(--cta-button-outline-color);  /* フォーカス時のアウトライン */
  text-decoration: none;  /* フォーカス時の下線をなくす */
}

/* アクティブ時（クリック時）のスタイル */
.not-found-details .btn:active {
  background-color: var(--cta-button-active-bg-color); /* アクティブ時の背景色 */
  transform: translateY(0);  /* クリック時のリセット */
  text-decoration: none;  /* クリック時の下線をなくす */
}

/* ============================================
   スマホ対応（レスポンシブ）
   ============================================ */

/* 768px以下のサイズで調整 */
@media (max-width: 768px) {
  .not-found {
    padding: var(--spacing-medium) var(--spacing-small);  /* 上下4rem、左右1rem */
  }

  .not-found .image_header {
    padding: var(--spacing-small) 0;  /* 上下2remの余白 */
  }

  .not-found .header_info h1 {
    font-size: var(--font-size-lg);  /* 見出しのフォントサイズを調整 */
  }

  .not-found .header_info p {
    font-size: var(--font-size-sm);  /* 小さめフォントサイズ */
  }

  .not-found-details {
    padding: var(--spacing-medium) var(--spacing-small);  /* 上下4rem、左右1rem */
  }

  .not-found-details p {
    font-size: var(--font-size-sm);  /* 小さめフォントサイズ */
    margin-bottom: var(--spacing-small);  /* 下の余白調整 */
  }

  .not-found-details .btn {
    padding: var(--spacing-small) 2rem;  /* 上下1rem、左右2rem */
    font-size: var(--font-size-sm);  /* 小さめフォントサイズ */
  }
}

/* より小さなスマホ対応（480px以下） */
@media (max-width: 480px) {
  .not-found .header_info h1 {
    font-size: 1.75rem;  /* 見出しフォントサイズ調整 */
  }

  .not-found .header_info p {
    font-size: 0.875rem;  /* フォントサイズ調整 */
  }

  .not-found-details p {
    font-size: 0.875rem;  /* フォントサイズ調整 */
  }

  .not-found-details .btn {
    padding: 0.75rem 1.5rem;  /* 上下0.75rem、左右1.5rem */
    font-size: 0.875rem;  /* フォントサイズ調整 */
  }
}