/* フォント設定 */
:root {
    --primary-font: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic Medium', 'Yu Gothic', 'Meiryo', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --heading-font: 'Hiragino Mincho ProN', 'Hiragino Mincho Pro', 'Yu Mincho', 'YuMincho', 'Noto Serif JP', 'Times New Roman', serif;
    --code-font: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', monospace;
}

/* 基本フォント設定 */
body {
    font-family: var(--primary-font);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    padding-bottom: 60px; /* フッター用の余白 */
}

/* 見出し用フォント */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

/* 英語テキスト用クラス */
.en-text {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 0.01em;
}

/* 日本語テキスト用クラス */
.ja-text {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', 'Yu Gothic', 'Meiryo', sans-serif;
    letter-spacing: 0.05em;
}

/* コード用フォント */
code, pre, kbd, samp {
    font-family: var(--code-font);
    font-size: 0.9em;
}

/* レスポンシブデザイン用のメディアクエリ */
@media (max-width: 768px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .display-5 {
        font-size: 2rem;
    }
}

/* ヘッダーのスタイル調整 */
.navbar-brand {
    font-weight: bold;
    color: #dc3545 !important;
}

/* メインコンテンツの調整 */
.bg-body-secondary {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6;
}

/* フッターの位置調整 */

.fixed-bottom {
    height: 60px;
    display: flex;
    align-items: center;
}

/* リンクのスタイル */
a {
    color: #dc3545;
    text-decoration: none;
}

a:hover {
    color: #b02a37;
    text-decoration: underline;
}

/* コンテナの余白調整 */
.container {
    max-width: 1200px;
}

/* 見出しのスタイル */
h1, h2 {
    color: #a56a6a;
}

.fst-italic {
    font-style: italic;
    margin-bottom: 1rem;
}

/* ブログページのレイアウト */
@media (min-width: 992px) {
    .blog-main {
        padding-right: 15px;
    }
    
    .blog-sidebar {
        padding-left: 15px;
        position: sticky;
        top: 100px;
        height: fit-content;
    }
}

/* サイドバーのカード */
.blog-sidebar .card {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
}

.blog-sidebar .card-header {
    background-color: #f8f9fa;
}

/* 記事カード */
article .card {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
    transition: transform 0.2s ease-in-out;
}

article .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 技術スタック用のバッジ */
.tech-stack .badge {
    background: linear-gradient(45deg, #6c757d, #495057) !important;
    color: white;
    font-weight: 500;
    padding: 0.5em 0.75em;
    border-radius: 0.375rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease-in-out;
}

.tech-stack .badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* 技術カテゴリ別の色分け */
.tech-stack .badge.tech-3d {
    background: linear-gradient(45deg, #ff0000, #927777) !important;
}

.tech-stack .badge.tech-design {
    background: linear-gradient(45deg, #ff0000, #927777) !important;
}

.tech-stack .badge.tech-software {
    background: linear-gradient(45deg, #ff0000, #927777) !important;
}

.tech-stack .badge.tech-status {
    background: linear-gradient(45deg, #ff0000, #927777) !important;
    color: #000;
}

/* プロジェクトページのバッジコンテナ */
.project-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.project-badges .badge {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
}

/* プロジェクトタイトルリンクのホバーエフェクト */
.project-title-link {
    color: inherit !important;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.3s ease-in-out;
    display: inline-block;
}

.project-title-link:hover {
    background-color: #dc2626 !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.project-title-link:focus {
    background-color: #dc2626 !important;
    color: white !important;
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

/* 統一されたボタンスタイル */
.btn-custom {
    background: linear-gradient(45deg, #dc2626, #b91c1c);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.btn-custom:hover {
    background: linear-gradient(45deg, #b91c1c, #991b1b);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.btn-custom:focus {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

.btn-custom:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

/* アウトラインボタンスタイル */
.btn-custom-outline {
    background: transparent;
    color: #dc2626;
    border: 2px solid #dc2626;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}

.btn-custom-outline:hover {
    background: #dc2626;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.btn-custom-outline:focus {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

/* ソーシャルリンクボタン */
.btn-social {
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    border: 2px solid transparent;
}

.btn-social:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Twitter用 */
.btn-social.btn-twitter {
    background: linear-gradient(45deg, #1DA1F2, #0d95e8);
    color: white;
    border-color: #1DA1F2;
}

.btn-social.btn-twitter:hover {
    background: linear-gradient(45deg, #0d95e8, #0c7cd5);
    color: white;
}

/* Instagram用 */
.btn-social.btn-instagram {
    background: linear-gradient(45deg, #E4405F, #c13584);
    color: white;
    border-color: #E4405F;
}

.btn-social.btn-instagram:hover {
    background: linear-gradient(45deg, #c13584, #8a3ab9);
    color: white;
}

/* GitHub用 */
.btn-social.btn-github {
    background: linear-gradient(45deg, #333, #24292e);
    color: white;
    border-color: #333;
}

.btn-social.btn-github:hover {
    background: linear-gradient(45deg, #24292e, #1b1f23);
    color: white;
}

/* BOOTH用 */
.btn-social.btn-booth {
    background: linear-gradient(45deg, #fc4d50, #e63946);
    color: white;
    border-color: #fc4d50;
}

.btn-social.btn-booth:hover {
    background: linear-gradient(45deg, #e63946, #d62828);
    color: white;
}

/* ダウンロードボタン */
.btn-download {
    background: linear-gradient(45deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.btn-download:hover {
    background: linear-gradient(45deg, #20c997, #17a2b8);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

/* 小さいサイズのボタン */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.btn-custom.btn-sm,
.btn-custom-outline.btn-sm,
.btn-social.btn-sm,
.btn-download.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}