Merge branch 'develop'

Author: y-yamasaki

assets/css/base.css

@@ -1,31 +1,23 @@
-/*
- * base.css
- * 全体的なベーススタイル、デザイントークン、リセット、共通要素
- */
-
 /* ==========================================================================
    1. デザイントークン
    ========================================================================== */
 :root {
     /* カラーパレット */
-    --color-bg: #0d111c; /* ページ背景（より落ち着いた濃紺） */
-    --color-surface: #161b22; /* ヘッダー、フッター背景など */
-    --color-panel: #161b22; /* カード、ブロック背景 */
+    --color-bg: #0d111c;
+    --color-surface: #161b22;
+    --color-panel: #161b22;
     --color-border: #30363d;
     --color-border-soft: #21262d;
 
-    --color-text: #e2e8f0; /* 明るいテキスト */
-    --color-text-muted: #a0aec0; /* 控えめなテキスト */
-    --color-heading: #e2e8f0; /* 見出し色 */
+    --color-text: #e2e8f0;
+    --color-text-muted: #a0aec0;
+    --color-heading: #e2e8f0;
 
-    --color-accent: #6366f1; /* メインアクセント (indigo-500) */
-    --color-accent-dark: #4f46e5; /* アクセントの暗いバージョン */
-    --color-accent-soft: rgba(
-        99,
-        102,
-        241,
-        0.1
-    ); /* アクセントの透明バージョン */
+    --color-accent: #6366f1;
+    --color-accent-dark: #4f46e5;
+    --color-accent-soft: rgba(99, 102, 241, 0.1);
+    --color-accent-rgb:
+        99, 102, 241; /* グローエフェクト用にRGB値を変数化 */
 
     /* シャドウ */
     --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@@ -38,133 +30,124 @@
     --shadow-xl:
         0 20px 25px rgba(0, 0, 0, 0.1),
         0 8px 10px rgba(0, 0, 0, 0.06);
+    --shadow-glow:
+        0 0 12px rgba(var(--color-accent-rgb), 0.4),
+        0 0 24px rgba(var(--color-accent-rgb), 0.2);
 
     /* 角丸 */
     --radius-sm: 4px;
     --radius-md: 8px;
-    --radius-lg: 12px; /* 少し小さめに調整 */
+    --radius-lg: 12px;
 
     /* フォント */
     --font-body:
         "Inter", system-ui, -apple-system,
         BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
         "Noto Sans JP", sans-serif;
-    --font-heading: var(
-        --font-body
-    ); /* 見出しも同じフォントで統一感を出す */
+    --font-heading: var(--font-body);
+
+    /* トランジション */
+    --transition-smooth: all 0.25s
+        cubic-bezier(0.165, 0.84, 0.44, 1); /* スムーズなアニメーション */
 }
 
 /* ==========================================================================
    2. CSSリセット / ベーススタイル
    ========================================================================== */
-
-/* 全要素のボックスモデルをborder-boxに設定 */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
 }
 
-/* HTMLとBodyの基本的なリセットと設定 */
 html {
-    font-size: 16px; /* 基本フォントサイズ */
-    scroll-behavior: smooth; /* スムーズスクロール */
-    -webkit-text-size-adjust: 100%; /* iOSのテキストサイズ調整を無効化 */
+    font-size: 16px;
+    scroll-behavior: smooth;
+    -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
 }
 
 body {
     margin: 0;
     padding: 0;
-    overflow-x: hidden; /* 横スクロールの防止 */
+    overflow-x: hidden;
     font-family: var(--font-body);
-    line-height: 1.6; /* 行間を少し調整して可読性向上 */
+    line-height: 1.6;
     color: var(--color-text);
     background:
+        radial-gradient(
+            ellipse 80% 50% at 50% -20%,
+            rgba(var(--color-accent-rgb), 0.1),
+            transparent
+        ),
         radial-gradient(
             circle at top left,
             rgba(99, 102, 241, 0.1),
-            /* 新しいアクセントカラーの薄いバージョン */
-                transparent 65%
+            transparent 50%
         ),
         radial-gradient(
             circle at bottom right,
             rgba(56, 189, 248, 0.08),
-            /* 青系の薄いグラデーション */ transparent 65%
+            transparent 50%
         ),
         var(--color-bg);
-    min-height: 100vh; /* 少なくともビューポートの高さを持つように */
-    display: flex; /* flexboxを使ってフッターを下に固定しやすくする */
+    min-height: 100vh;
+    display: flex;
     flex-direction: column;
 }
 
-/* 見出しのリセット */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     margin-top: 0;
-    margin-bottom: 0.5em; /* 下マージンを追加 */
+    margin-bottom: 0.5em;
     line-height: 1.2;
     color: var(--color-heading);
     font-family: var(--font-heading);
+    font-weight: 700; /* 見出しの太さを強調 */
+    letter-spacing: -0.02em; /* 文字間を少し詰める */
 }
 
-/* 段落のリセット */
 p {
     margin-top: 0;
-    margin-bottom: 1em; /* 下マージンを追加 */
+    margin-bottom: 1em;
 }
 
-/* リストのリセット */
 ul,
 ol {
     margin-top: 0;
     margin-bottom: 1em;
-    padding-left: 1.5em; /* リストのインデント */
-    list-style: none; /* デフォルトのリストスタイルを削除 */
-}
-ul li::before,
-ol li::before {
-    /* 必要に応じてカスタムのリストスタイル（例: ドットや数字）を追加 */
+    padding-left: 1.5em;
+    list-style: none;
 }
 
-/* リンク */
 a {
-    color: var(
-        --color-accent
-    ); /* アクセントカラーをリンク色に */
-    text-decoration: none; /* デフォルトの下線を削除 */
-    transition:
-        color 0.2s ease-in-out,
-        text-decoration 0.2s ease-in-out;
+    color: var(--color-accent);
+    text-decoration: none;
+    transition: var(--transition-smooth);
+    text-shadow: 0 0 8px transparent;
 }
 a:hover {
-    color: var(
-        --color-accent-dark
-    ); /* ホバー時に少し濃く */
-    text-decoration: underline; /* ホバー時に下線を表示 */
+    color: var(--color-accent-dark);
+    text-decoration: none;
+    text-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.5); /* ホバー時にグローエフェクト */
 }
 
-/* 画像 */
 img {
     max-width: 100%;
     height: auto;
-    vertical-align: middle; /* 画像のベースライン調整 */
-    display: block; /* 余分なスペースを削除 */
+    display: block;
 }
 
-/* フォーム要素 */
 input,
 textarea,
 select,
 button {
-    font-family: var(
-        --font-body
-    ); /* 全てのフォーム要素に共通フォント */
-    font-size: 1rem; /* デフォルトのフォントサイズを統一 */
+    font-family: var(--font-body);
+    font-size: 1rem;
     line-height: 1.5;
     color: var(--color-text);
 }
@@ -180,18 +163,16 @@ button {
    3. 共通ユーティリティクラス
    ========================================================================== */
 
-/* メインコンテナ */
 .main-container {
-    max-width: 1120px; /* 少し広げる */
+    max-width: 1120px;
     margin: 0 auto;
-    padding: 2.5rem 1.25rem; /* paddingをrem単位で統一 (40px 20px) */
-    flex-grow: 1; /* コンテンツが少ないページでフッターを下に固定 */
+    padding: 2.5rem 1.25rem;
+    flex-grow: 1;
 }
 
-/* 小さいテキスト */
 .text-muted {
     color: var(--color-text-muted);
-    font-size: 0.9rem; /* 少し大きく */
+    font-size: 0.9rem;
 }
 
 /* ==========================================================================
@@ -200,9 +181,7 @@ button {
 
 .reveal-on-scroll {
     opacity: 0;
-    transform: translateY(
-        20px
-    ); /* 少しY軸の移動量を増やす */
+    transform: translateY(20px);
     transition:
         opacity 0.6s ease-out,
         transform 0.6s ease-out;
@@ -212,7 +191,3 @@ button {
     opacity: 1;
     transform: translateY(0);
 }
-
-/*
- * その他のスタイルは `layout.css`, `top.css`, `blog.css` などで定義
- */