Merge branch 'develop'

Author: y-yamasaki

assets/css/base.css

@@ -59,12 +59,13 @@ html {
     scroll-behavior: smooth;
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
+    overflow-x: hidden; /* 横スクロール防止 */
 }
 
 body {
     margin: 0;
     padding: 0;
-    overflow-x: hidden;
+    overflow-x: hidden; /* 横スクロール防止 */
     font-family: var(--font-body);
     line-height: 1.6;
     color: var(--color-text);
@@ -88,6 +89,8 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
+    overflow-wrap: break-word; /* 長い単語の折り返し */
+    word-break: break-word; /* 長い単語の折り返し(互換性) */
 }
 
 h1,
@@ -197,6 +200,7 @@ button {
     margin: 0 auto;
     padding: 2.5rem 1.25rem;
     flex-grow: 1;
+    width: 100%; /* コンテナのはみ出し防止 */
 }
 
 .text-muted {

assets/css/layout.css

@@ -158,12 +158,6 @@
     border: 1px solid var(--color-border);
 }
 
-.section--soft {
-    background: var(--color-surface);
-    box-shadow: var(--shadow-md);
-    border-color: var(--color-border-soft);
-}
-
 .section__title {
     margin-top: 0;
     margin-bottom: 1.5rem;

assets/css/top.css

@@ -161,20 +161,6 @@
     );
 }
 
-.btn-outline {
-    background: var(--color-surface);
-    border-color: var(--color-border);
-    color: var(--color-text-muted);
-}
-
-.btn-outline:hover {
-    background: var(--color-accent-soft);
-    border-color: var(--color-accent);
-    color: var(--color-text);
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-glow);
-}
-
 /* ==========================================================================
    3. サイドパネル
    ========================================================================== */
@@ -249,7 +235,7 @@
 }
 
 /* ==========================================================================
-   4. プロフィールセクション
+   4. プロフィールセクション & Featuresセクション
    ========================================================================== */
 .section--profile {
     margin-top: 2.5rem;
@@ -264,54 +250,14 @@
     gap: 1.25rem;
 }
 
-.profile-card {
-    position: relative;
-    z-index: 1;
-    background: var(--color-surface);
-    border-radius: var(--radius-md);
+/* 共通カード（layout.css）への拡張 */
+.card--profile {
     padding: 1.5rem;
-    border: 1px solid var(--color-border-soft);
-    box-shadow: var(--shadow-md);
-    transition: var(--transition-smooth);
-    overflow: hidden;
 }
 
-.profile-card::before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: inherit;
-    border: 1px solid transparent;
-    background: linear-gradient(
-            to right,
-            var(--color-accent),
-            var(--color-accent-dark)
-        )
-        border-box;
-    mask:
-        linear-gradient(#fff 0 0) padding-box,
-        linear-gradient(#fff 0 0);
-    -webkit-mask-composite: destination-out;
-    mask-composite: exclude;
-    opacity: 0;
-    transition: var(--transition-smooth);
-}
-
-.profile-card:hover {
-    transform: translateY(-4px);
-    box-shadow: var(--shadow-lg), var(--shadow-glow);
-    background: var(--color-panel);
-}
-
-.profile-card:hover::before {
-    opacity: 1;
-}
-
-.profile-card-title {
+/* カード内タイトル */
+.card--profile .card__title,
+.section--feature .card h3 {
     margin: 0 0 1rem;
     font-size: 1.3rem;
     color: var(--color-heading);
@@ -428,10 +374,10 @@
         grid-template-columns: 1fr;
         gap: 1rem;
     }
-    .profile-card {
+    .card--profile {
         padding: 1.2rem;
     }
-    .profile-card-title {
+    .card--profile .card__title {
         font-size: 1.15rem;
         margin-bottom: 0.8rem;
     }
@@ -460,3 +406,48 @@
         minmax(280px, 1fr)
     );
 }
+
+/* コンテンツカードのリンク化対応 */
+.section--top-grid .card-list li {
+    display: flex; /* aタグの高さを揃えるためにflex化 */
+}
+
+.card--link {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+    color: var(--color-text);
+}
+
+.card--link h3 {
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    color: var(--color-heading);
+    transition: color 0.2s ease;
+}
+
+.card--link p {
+    flex-grow: 1; /* 下部余白を埋めて、"もっと見る"を下揃えに */
+}
+
+.card__more {
+    margin-top: 1.25rem;
+    color: var(--color-accent);
+    font-weight: 600;
+    font-size: 0.95rem;
+    display: inline-flex;
+    align-items: center;
+    transition: transform 0.2s ease;
+}
+
+/* ホバー時の挙動 */
+.card--link:hover h3 {
+    color: var(--color-accent);
+}
+
+.card--link:hover .card__more {
+    transform: translateX(6px);
+    text-decoration: underline;
+}

assets/js/menuAnimation.js

@@ -10,18 +10,16 @@ const repulsionStrength = 20;
 let isMouseInsideBrowserWindow = false;
 
 function setup() {
-  // ページの全体の高さを取得
-  let pageHeight = Math.max(
-    document.body.scrollHeight,
-    document.documentElement.scrollHeight,
-    document.body.offsetHeight,
-    document.documentElement.offsetHeight,
-    document.body.clientHeight,
-    document.documentElement.clientHeight,
-  );
+  // スクロールバーを含まないビューポートの幅を取得
+  let w = document.documentElement.clientWidth;
+  // 背景固定 (fixed) なので、ページ全体の高さではなくウィンドウの高さを使用
+  let h = windowHeight;
 
-  animationCanvas = createCanvas(windowWidth, pageHeight);
+  animationCanvas = createCanvas(w, h);
   animationCanvas.position(0, 0);
+
+  // position: fixed を明示的に設定（p5.jsのデフォルト動作による上書き防止）
+  animationCanvas.style("position", "fixed");
   animationCanvas.style("z-index", "-1");
   animationCanvas.style("pointer-events", "none");
 
@@ -40,15 +38,10 @@ function draw() {
 }
 
 function windowResized() {
-  let pageHeight = Math.max(
-    document.body.scrollHeight,
-    document.documentElement.scrollHeight,
-    document.body.offsetHeight,
-    document.documentElement.offsetHeight,
-    document.body.clientHeight,
-    document.documentElement.clientHeight,
-  );
-  resizeCanvas(windowWidth, pageHeight);
+  // リサイズ時もスクロールバーを含まない幅で計算
+  let w = document.documentElement.clientWidth;
+  let h = windowHeight;
+  resizeCanvas(w, h);
 }
 
 class Particle {
@@ -88,25 +81,29 @@ class Particle {
     this.pos.add(this.vel);
     this.acc.mult(0);
 
+    // 画面端の判定と位置補正
+    // (ウィンドウリサイズでキャンバスが小さくなった場合にパーティクルが外に残らないよう constrain で補正)
     if (
       this.pos.x > width - this.size / 2 ||
       this.pos.x < this.size / 2
     ) {
       this.vel.x *= -1;
-      if (this.pos.x > width - this.size / 2)
-        this.pos.x = width - this.size / 2;
-      if (this.pos.x < this.size / 2)
-        this.pos.x = this.size / 2;
+      this.pos.x = constrain(
+        this.pos.x,
+        this.size / 2,
+        width - this.size / 2,
+      );
     }
     if (
       this.pos.y > height - this.size / 2 ||
       this.pos.y < this.size / 2
     ) {
       this.vel.y *= -1;
-      if (this.pos.y > height - this.size / 2)
-        this.pos.y = height - this.size / 2;
-      if (this.pos.y < this.size / 2)
-        this.pos.y = this.size / 2;
+      this.pos.y = constrain(
+        this.pos.y,
+        this.size / 2,
+        height - this.size / 2,
+      );
     }
   }