/* style.css */
/* --- 基本設定 & 変数 --- */
:root {
    --primary-color: #4a69bd; /* メインカラー (例: 青系) */
    --secondary-color: #1e3799; /* アクセントカラー */
    --text-color: #333;
    --text-color-light: #555;
    --bg-color: #dee8ee;
    --card-bg-color: #ffffff;
    --header-height: 70px;
    --transition-speed: 0.3s;
    --border-radius: 8px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* スムーズスクロールの基本設定 */
    scroll-padding-top: var(--header-height); /* ヘッダー分のオフセット */
}

body {
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.7;
    font-size: 16px;
    overflow-x: hidden; /* 横スクロールバーを防止 */
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed) ease; /* Hover.css と干渉しないように */
}
a:hover {
    color: var(--secondary-color);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.section {
    padding: 80px 0; /* セクション上下の余白を増やす */
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: 50px; /* タイトル下の余白を増やす */
    font-weight: 700;
    position: relative;
    padding-bottom: 15px; /* 下線のスペース */
}
.section-title::after { /* タイトルの下線アニメーション */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70px; /* 少し長く */
    height: 4px; /* 少し太く */
    background-color: var(--primary-color);
    border-radius: 2px;
}

/* --- Header --- */
.header {
    position: fixed; /* ヘッダーを固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    background-color: rgba(255, 255, 255, 0.9); /* 半透明 */
    box-shadow: none; /* 初期状態では影なし */
    z-index: 1000;
    transition: background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
    backdrop-filter: blur(5px); /* 背景をぼかす (対応ブラウザのみ) */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.logo {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--secondary-color);
    font-family: 'Poppins', sans-serif; /* ロゴだけ別のフォント */
}
.logo:hover { color: var(--primary-color); }

.nav-list {
    display: flex;
    list-style: none;
}

.nav-link {
    padding: 10px 15px;
    font-weight: 700;
    color: var(--text-color);
    position: relative; /* Hover.css の下線用に */
    /* Hover.css の hvr-underline-from-center を使う */
}
.nav-link.hvr-underline-from-center {
    display: inline-block;
  }
.nav-link.hvr-underline-from-center::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px; /* 下線の太さ */
    background-color: var(--primary-color); /* 下線の色 */
    transition: width var(--transition-speed) ease, left var(--transition-speed) ease;
} 
.nav-link.hvr-underline-from-center:hover::after {
    width: 100%; /* ホバー時に下線が広がる */
    left: 0; /* 左端に揃える */
}
.nav-link:not(.hvr-underline-from-center)::after { /* 下線を消す */
    content: none;
}
 
.nav-link:hover,
.nav-link.active {
    color: var(--primary-color); /* ホバー/アクティブ時の色 */
}

/* Hamburger Menu (Mobile) */
.hamburger {
    display: none; /* デフォルトは非表示 */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1001; /* ナビより手前 */
}
.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--text-color);
    margin: 5px 0;
    transition: all var(--transition-speed) ease;
}
.hamburger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- Hero Section --- */
.hero-section {
    min-height: 100vh; /* 画面の高さいっぱい */
    display: flex;
    flex-direction: column; /* 縦中央揃えのため */
    align-items: center;
    justify-content: center;
    text-align: center;    
    position: relative; /* 疑似要素を絶対配置するための基準点 */
    z-index: 0; /* 他の要素との重なり順を考慮（必要に応じて調整）*/
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); /* 既存の背景グラデーション */
    color: #fff;
    padding: var(--header-height) 20px 20px 20px;
    overflow: hidden; /* 疑似要素がはみ出すのを防ぐ */
}
.hero-section::before {
    content: "";         /* 必須 */
    position: absolute;  /* 絶対配置 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;           /* 親要素全体をカバー */
    background-image: url('images/back.jpg'); /* ★透過画像のパスを指定 */
    background-size: cover; /* 例: cover, contain, auto など調整 */
    background-position: center; /* 例: center, top left など調整 */
    background-repeat: no-repeat; /* 通常は no-repeat */
    opacity: 0.4;        /* 例: 画像の透明度 (0から1で指定、必要なければ削除) */
    z-index: -1;         /* 背景グラデーションより手前、コンテンツより奥に配置 */
}
.hero-section .container {
    position: relative; /* z-indexを有効にするため */
    z-index: 1; /* 疑似要素(z-index: -1)より手前 */
}
.hero-title {
    font-size: clamp(2.5rem, 7vw, 4.5rem); /* レスポンシブなフォントサイズ */
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
    min-height: 1.5em; /* タイピング中に高さがガタつかないように */
    color: #fff; /* 明示的に白 */
}
.cursor { /* タイピングカーソル */
    display: inline-block;
    animation: blink 0.7s infinite;
    color: #fff; /* 明示的に白 */
    margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

.hero-subtitle {
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    opacity: 0.9;
    margin-bottom: 40px;
    max-width: 600px; /* 長すぎないように */
}

.cta-button {
    display: inline-block;
    background-color: #fff;
    color: var(--primary-color);
    padding: 14px 40px; /* 少し大きめに */
    border-radius: 50px;
    font-weight: 700;
    /* transition は Hover.css側で設定されることが多いので削除または注意 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    /* Hover.css の hvr-grow を使う */
}
/* Hover.css 側でホバースタイルが提供されるため、:hover スタイルは最小限に */
.cta-button:hover {
     background-color: var(--secondary-color); /* 例: ホバー時の色変更は追加OK */
     color: #fff;
}


/* --- About Section --- */
.about-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 画像があってもなくても対応 */
    gap: 40px;
    align-items: center;
}
.about-text p {
    margin-bottom: 1rem;
    color: var(--text-color-light);
}
.about-text p:last-child { margin-bottom: 0; }

.about-image { /* 画像を使う場合 */
    text-align: center;
}
.about-image img {
    max-width: 300px;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 5px solid #fff;
}

.hobby-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 画像があってもなくても対応 */
    gap: 10px;
    justify-items: center;
    align-items: center;
    margin-top: 40px; /* 上のセクションとの余白 */
    padding: 0 20px; /* 左右の余白を追加 */
}
.hobby-content > * { /* 追加: hobby-content直下の子要素全てに適用 */
    grid-column: 1 / -1; /* 追加: 全幅を使用 */
}
.hobby-content h3.hobby-title { /* セレクタを少し具体的に */
    text-align: left; /* 左寄せ */
    width: 60%;
    margin-bottom: 20px; /* 上のセクションとの余白 */
    margin-top: 40px; /* 上のセクションとの余白 */
    color: var(--text-color-light); /* 元のスタイルを維持 */
}
/* h3は、元々text-color-lightのため削除 */
.hobby-content img{
    max-width: 400px;
    width: 100%; /* 追加: コンテナに合わせて伸縮 */
    height: auto;
    display: block; /* インライン要素の余白を削除 */
    margin: 0 auto; /* 水平方向の中央揃え */
}

.hobby-content video {
    max-width: 400px;
    width: 100%; /* 追加: コンテナに合わせて伸縮 */
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 5px solid #fff;
    display: block; /* インライン要素の余白を削除 */
    margin: 0 auto; /* 水平方向の中央揃え */
}

.hobby-content video:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* ホバー時の影を強調 */
}

.info-grid,
.info-grid-links {
    display: grid;
    grid-template-columns: 160px 1fr; /* ラベル幅と残り幅 */
    gap: 0.5em 0.5em; /* 行間と列間のスペース */
    align-items: start;
    margin-top: 20px; /* 上のセクションとの余白 */
  }
  
.info-grid .label,
.info-grid-links .label {
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
    line-height: 1.5;
  }
.info-grid .label span {
    vertical-align: baseline;
  }


  /* Major の行のラベルとコンテンツだけ上端揃えにする */
  .info-grid .multi-line-label,
  .info-grid .multi-line-content {
    align-self: start;
  }
  
  .info-grid .content { /* Major のコンテンツ用 */
    line-height: 1.5;
    gap: 0.3em; /* 行間のスペース */
  }
  
  /* リンクとアイコンのスタイル */
  .info-grid-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    line-height: 1.5; /* 他の要素と高さを合わせる */
  }
  .info-grid > div:nth-child(2n):not(.multi-line-content) {
    line-height: 1.5;
}

/* --- Skills Section --- */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.skill-item {
    background-color: var(--card-bg-color);
    padding: 25px; /* 少し広く */
    border-radius: var(--border-radius);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
    /* Hover.css の hvr-float-shadow を使う */
    /* 既存の transition は削除またはHover.cssと競合しないか確認 */
}
/* .skill-item:hover の transform, box-shadow は削除 */
/* .skill-item:hover {
     background-color: #eee; /* 色変更などはOK
} */

.skill-item h3 {
    font-size: 1.3rem; /* 少し大きく */
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--primary-color);
}
.skill-item ul { list-style: none; padding: 0; }
.skill-item li {
    margin-bottom: 10px;
    font-size: 1rem;
    color: var(--text-color-light);
}

/* --- Projects Section --- */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* カード幅を調整 */
    gap: 35px; /* カード間隔を調整 */
}

.project-card {
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}

.project-image { /* 画像を使う場合 */
    width: 100%;
    height: 350px;
    object-fit: cover; /* 画像のアスペクト比を保ちつつカバー */
    border-bottom: 1px solid #eee; /* 画像とコンテンツの境界線 */
}

.project-content {
    padding: 25px;
    flex-grow: 1; /* カードの高さを揃えるため */
    display: flex;
    flex-direction: column;
}
.project-content h3 {
    margin-top: 0;
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--secondary-color);
}
.project-content p {
    margin-bottom: 15px;
    color: var(--text-color-light);
    flex-grow: 1; /* 説明文で高さを調整 */
}
.project-tags {
    margin-bottom: 15px; /* タグとリンクの間の余白 */
}
.project-tags span {
    display: inline-block;
    background-color: #e9ecef;
    color: #495057;
    padding: 4px 10px; /* 少し大きく */
    border-radius: 4px;
    font-size: 0.85rem; /* 少し大きく */
    margin-right: 6px;
    margin-bottom: 6px;
}
.project-link {
    font-weight: 700;
    align-self: flex-start; /* リンクを左下に配置 */
    margin-top: auto; /* 残りのスペースを埋める */
    /* Hover.css の hvr-icon-forward を使う */
}

.github-link-bottom {
    margin-top: 40px;
    text-align: center;
    font-size: 1.1rem;
}

/* --- ベースのSwiperスタイル  --- */
.swiper {
    width: 100%;
    margin: 20px auto; /* 上下に少し余白を追加 */
    position: relative;
    overflow: hidden;
    border-radius: 16px; /* スライダーコンテナ自体の角丸 */
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #ffffff00; /* 透明な背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* スライド自体の高さはSwiperコンテナに依存させる */
    /* height: 100%; */ /* ← height指定はコンテナ側で行うため、ここでは削除またはコメントアウト推奨 */
    overflow: hidden; /* スライド内の画像はみ出し防止 */
}

.swiper-slide img {
    display: block;
    width: 100%; /* 基本は幅100% */
    height: 100%; /* 基本は高さ100% */
    object-fit: cover; /* デフォルトはカバー（はみ出しトリミング） */
}

/* --- AI Art Swiper の固有スタイル --- */
.ai-art-slider {
    max-width: 400px; /* AIアートのスライダー最大幅 */
    height: 400px;    /* AIアートのスライダー高さ (正方形) */
    /* AIアート固有のスタイルがあればここに追加 */
}
/* AIアートの画像スタイル (もしデフォルトと変えたい場合) */
/* .ai-art-slider .swiper-slide img {
    object-fit: contain;
} */


/* --- Motorcycle Swiper の固有スタイル  --- */
.motorcycle-slider {
    max-width: 400px; /* バイク用スライダーの最大幅 (例: 横長にする) */
    height: 225px;    /* バイク用スライダーの高さ (例: 16:9 に近い比率) */
    /* motorcycle-slider 固有のスタイルがあればここに追加 */
    /* 例: 影をつける */
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); */
}

/* バイク画像の表示方法を調整 */
.motorcycle-slider .swiper-slide img {
    /* 画像全体を表示し、アスペクト比を維持 (上下または左右に余白ができる場合あり) */
    /* object-fit: contain; */

    /* contain を使う場合は width/height 100% でも良いことが多い */
    /* width: 100%;
    height: 100%; */

    /* もし 'cover' (トリミングあり) にしたい場合は以下のように */
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;


    /* もし画像本来のサイズで表示したい場合 (スライドサイズを超える可能性あり) */
    /* width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%; */
}


/* --- Swiperコントロール要素のスタイル (固有クラスで指定) --- */

/* ナビゲーションボタン */
.swiper-button-next,
.swiper-button-prev {
    color: var(--text-color); /* ベースのボタン色 */
    font-weight: 900;
}
/* AIアート用ボタンの色を変える場合 */
.ai-art-button-next,
.ai-art-button-prev {
    color: var(--primary-color); 
}
/* バイク用ボタンの色を変える場合 */
.motorcycle-slider .motorcycle-button-next,
.motorcycle-slider .motorcycle-button-prev {
    color: #ffffff;
}
.motorcycle-slider .motorcycle-button-next::after,
.motorcycle-slider .motorcycle-button-prev::after {
    font-size: 20px; /* アイコンサイズ調整 */
}
.ai-art-slider .ai-art-button-next::after,
.ai-art-slider .ai-art-button-prev::after {
    font-size: 24px;
}

/* ページネーション */
.swiper-pagination {
    bottom: 15px !important; /* ベースの位置 */
}
.swiper-pagination-bullet {
    background-color: #808080;
    opacity: 0.6;
}
.swiper-pagination-bullet-active {
    background: var(--primary-color); /* ベースのアクティブ色 */
}
/* AIアート用ページネーションの色を変える場合 */
/* .ai-art-pagination .swiper-pagination-bullet-active {
    background: #ffcc00;
} */
/* バイク用ページネーションの色を変える場合 */
.motorcycle-pagination .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.5); /* 通常時を白っぽく */
}
.motorcycle-pagination .swiper-pagination-bullet-active {
    background: #ffffff; /* アクティブ時を白に */
}


/* 自動再生プログレスバー */
.autoplay-progress-bar {
    position: absolute;
    bottom: 0px; /* Swiperコンテナの角丸に合わせるため、下にぴったりつける */
    left: 0;
    width: 100%;
    height: 6px;
    background-color: rgba(0, 0, 0, 0.15);
    z-index: 10;
    /* 親要素(.swiper)の角丸に合わせる */
    border-bottom-left-radius: 16px; /* .swiper の border-radius と合わせる */
    border-bottom-right-radius: 16px; /* .swiper の border-radius と合わせる */
    overflow: hidden; /* 中の progress がはみ出さないように */
}
.autoplay-progress-bar .progress {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--primary-color); /* ベースのバーの色 */
    transform: scaleX(0);
    transform-origin: left;
}
/* AIアート用プログレスバーの色を変える場合 */
/* .ai-art-autoplay-progress-bar .progress {
    background-color: #ffcc00;
} */
/* バイク用プログレスバーの色を変える場合 */
.motorcycle-autoplay-progress-bar .progress {
    background-color: #ffffff; /* 例: 白にする */
}

/* 不要になったかもしれないスタイル (確認用) */
/* キャプションは現在未使用であればコメントアウトまたは削除 */
/* .ai-art-caption { ... } */

/* --- Contact Section --- */
.contact-container {
    text-align: center;
    max-width: 700px; /* 中央寄せの幅を制限 */
}
.contact-container p {
    font-size: 1.1rem;
    color: var(--text-color-light);
    margin-bottom: 30px;
}
.contact-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: #fff;
    padding: 15px 45px; /* さらに大きく */
    border-radius: 50px;
    font-weight: 700;
    /* transition は Hover.css側で設定されることが多いので削除または注意 */
    font-size: 1.1rem;
    /* Hover.css の hvr-pulse を使う */
}
/* Hover.css 側でホバースタイルが提供されるため、:hover スタイルは最小限に */
.contact-button:hover {
     background-color: var(--secondary-color); /* 例: ホバー時の色変更は追加OK */
}

/* --- Footer --- */
.footer {
    background-color: #e0e0e0; /* 少し濃いグレー */
    color: #555;
    text-align: center;
    padding: 25px 0;
    margin-top: 80px;
    font-size: 0.9rem;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 992px) {
    .container { max-width: 960px; }
}

@media (max-width: 768px) {
    :root { --header-height: 60px; }
    body { font-size: 15px; }
    .section { padding: 50px 0; }
    .section-title { font-size: 2.2rem; margin-bottom: 40px; }

    /* Header for Mobile */
    .main-nav {
        position: fixed;
        top: 0;
        right: -100%; /* 初期状態は画面外 */
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background-color: #fff;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        padding-top: var(--header-height);
        transition: right var(--transition-speed) ease;
        z-index: 999;
    }
    .main-nav.is-active { right: 0; /* アクティブ時に表示 */ }
    .nav-list { flex-direction: column; padding: 20px; }
    .nav-link { display: block; padding: 15px 0; border-bottom: 1px solid #eee; }

    .hamburger { display: block; }

    /* About Section for Mobile */
    .about-content { grid-template-columns: 1fr; }
    .about-image { margin-top: 30px; } /* モバイルでは画像下に表示 */
}

@media (max-width: 576px) {
    body { font-size: 14px; }
    .section-title { font-size: 1.8rem; }
    .hero-title { font-size: clamp(2rem, 10vw, 3rem); }
    .hero-subtitle { font-size: clamp(1rem, 4vw, 1.2rem); }
    .cta-button, .contact-button { padding: 12px 30px; font-size: 1rem; }
    .projects-grid { grid-template-columns: 1fr; gap: 25px; }
    .skills-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } /* スキル列幅調整 */
    .skill-item { padding: 20px; }
    .project-content { padding: 20px; }
    .project-content h3 { font-size: 1.3rem; }
}