/* 共通スタイル */
body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    color: #333;
}

.section {
    padding: 4rem 0;
}

/* ヘッダー・ナビゲーション */
.navbar {
    padding: 1rem 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
    font-size: 1.5rem;
}

.nav-link {
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #0d6efd !important;
}

/* ヒーローセクション */
.hero {
    background-color: #f8f9fa;
    text-align: center;
    padding: 6rem 0;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

.hero p {
    font-size: 1.25rem;
    color: #6c757d;
}

/* カード共通スタイル */
.card {
    border: none;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
}

.card:hover {
    transform: translateY(-5px);
}

.card-title {
    font-weight: bold;
    color: #2d3436;
}

.card-title a {
    color: rgb(0 0 0);
    text-decoration: underline;
}

.card-text {
    color: #636e72;
    line-height: 1.6;
}

/* サービスページ */
.service-card {
    text-align: center;
    padding: 2rem;
}

.service-icon {
    color: #0d6efd;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.price-text {
    color: #2d3436;
    margin-bottom: 0;
}

.price-text .h3 {
    color: #0d6efd;
    font-weight: bold;
}

/* ポートフォリオページ */
.portfolio-showcase .badge {
    font-size: 0.8rem;
    padding: 0.5em 1em;
    margin-right: 0.5rem;
}

.portfolio-item .card-img-top {
    height: 200px;
    object-fit: cover;
}

.portfolio-item dl {
    font-size: 0.9rem;
    margin-bottom: 0;
}

.portfolio-item dt {
    font-weight: 600;
    color: #2d3436;
}

.portfolio-item dd {
    color: #636e72;
}

/* ゲームページ */
.game-showcase .badge {
    font-size: 0.9rem;
    padding: 0.6em 1.2em;
}

.game-item {
    margin-bottom: 3rem;
}

.game-item .card {
    border: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    overflow: hidden;
}

.game-item .card:hover {
    transform: translateY(-5px);
}

.game-img {
    min-height: 400px;
    object-fit: cover;
}

.game-details ul li {
    color: #636e72;
    margin-bottom: 0.5rem;
}

.game-details ul li strong {
    color: #2d3436;
    margin-right: 0.5rem;
}

/* ブログ一覧ページ */
.blog-item .card {
    border: none;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.blog-item .card:hover {
    transform: translateY(-5px);
}

.blog-item .card-img-top {
    height: 200px;
    object-fit: cover;
}

.blog-item .card-title {
    font-weight: 600;
    line-height: 1.4;
}

.blog-item .badge {
    font-weight: 500;
    padding: 0.5em 1em;
}

/* ブログ投稿ページ */
.blog-post {
    max-width: 800px;
    margin: 0 auto;
}

.blog-post-header {
    margin-bottom: 3rem;
}

.blog-post-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.blog-post-meta {
    font-size: 0.9rem;
}

.blog-post-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.blog-post-content h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.blog-post-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 1.2rem;
}

.blog-post-content p {
    margin-bottom: 1.5rem;
}

.blog-post-content ul,
.blog-post-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.2rem;
}

.blog-post-content li {
    margin-bottom: 0.5rem;
}

.blog-post-content .info-box {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.blog-post-content .code-block {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 2rem 0;
    overflow-x: auto;
}

.blog-post-content pre {
    margin-bottom: 0;
}

.blog-post-content code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
}

.blog-post-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #dee2e6;
}

.blog-post-tags {
    margin-bottom: 2rem;
}

.blog-post-tags .badge {
    font-size: 0.9rem;
    padding: 0.5em 1em;
    margin-right: 0.5rem;
}

.blog-post-share {
    margin-bottom: 3rem;
}

.blog-post-nav {
    font-size: 0.9rem;
}

/* toppage */
.news_list {
    text-align: left;
}

.news_list ul {}

.news_list ul li {
    list-style-type: none;
}

.news_list ul li a {}

.news_new {}

.news_old {}

.news_date {
    float: left;
    padding-right: 20px;
    width: 120px;
}

#toppage {
    background-image: url("/images/IMG_5931.jpg");
}

.h-500 {
    height: 500px;
}

/* お問い合わせフォーム */
.contact .form-control {
    padding: 0.8rem;
    border: 1px solid #dee2e6;
}

.contact .form-control:focus {
    box-shadow: none;
    border-color: #0d6efd;
}

.contact .form-label {
    font-weight: 500;
    color: #2d3436;
}

/* プライバシーポリシーページ */
.privacy .content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

.privacy h2 {
    color: #2d3436;
    margin-top: 2.5rem;
    font-weight: bold;
}

/* フッター */
footer {
    background-color: #f8f9fa;
    padding: 3rem 0;
    margin-top: 3rem;
}

footer a {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #0d6efd;
    text-decoration: none;
}

/* フィルターボタン */
.filter-buttons {
    margin-bottom: 2rem;
}

.filter-buttons .btn {
    margin: 0.25rem;
    border-radius: 20px;
    padding: 0.5rem 1.5rem;
}

/* ユーティリティクラス */
.text-primary {
    color: #0d6efd !important;
}

.bg-primary {
    background-color: #0d6efd !important;
}

.btn-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: #0b5ed7;
    border-color: #0b5ed7;
    transform: translateY(-2px);
}

.btn-outline-primary {
    border-color: #0d6efd;
    color: #0d6efd;
    transition: all 0.3s ease;
}

.btn-outline-primary:hover {
    background-color: #0d6efd;
    border-color: #0d6efd;
    transform: translateY(-2px);
}

/* アニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

/* レスポンシブ調整 */
@media (max-width: 992px) {
    .section {
        padding: 3rem 0;
    }

    .hero {
        padding: 5rem 0;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .blog-post-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 4rem 0;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .blog-post-content {
        font-size: 1rem;
    }

    .blog-post-content h2 {
        font-size: 1.5rem;
    }

    .blog-post-content h3 {
        font-size: 1.3rem;
    }

    .game-img {
        min-height: 300px;
    }

    .game-item .card-body {
        padding: 1.5rem !important;
    }

    .service-icon {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 1.8rem;
    }

    .section {
        padding: 2rem 0;
    }

    .blog-post-title {
        font-size: 1.8rem;
    }

    .game-img {
        min-height: 250px;
    }

    .service-card {
        padding: 1.5rem;
    }

    .filter-buttons .btn {
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    }

    .blog-post {
        padding: 0 1rem;
    }

}
/* 2027 共通レイアウト：固定ヘッダーの高さ分だけ本文を下げます。 */
:root { --site-header-height: 44px; }
html { scroll-padding-top: calc(var(--site-header-height) + 16px); }
body { padding-top: var(--site-header-height); min-height: 100vh; display: flex; flex-direction: column; }
#main-content { flex: 1; }
.site-header { padding: 0; min-height: var(--site-header-height); }
.site-header > .container { justify-content: flex-end; }
.site-header .nav-link { padding: 10px 14px !important; font-size: 14px; line-height: 24px; }
.site-header .navbar-toggler { margin: 3px 0; padding: 3px 7px; font-size: 20px; }
.site-header .navbar-collapse { flex-grow: 0; }
@media (max-width: 991.98px) {
    .site-header .navbar-collapse { flex-basis: 100%; max-height: calc(100dvh - var(--site-header-height)); overflow-y: auto; }
    .site-header .navbar-nav { align-items: flex-end; padding-bottom: 6px; }
}


/* 黒い共通ヘッダー・フッター */
.site-header, .site-footer { background-color: #000; color: #fff; }
.site-header .nav-link, .site-footer a { color: #fff; }
.site-header .nav-link:hover, .site-header .nav-link:focus,
.site-header .nav-link.active, .site-footer a:hover, .site-footer a:focus { color: #b9d5ff !important; }
.site-header .navbar-toggler { border-color: rgba(255,255,255,.5); }
.site-footer hr { border-color: currentColor; }

/* ゲーム本体は独立した表示領域に保持します。 */
.embedded-game { display: block; width: 100%; height: max(720px, calc(100dvh - var(--site-header-height))); border: 0; }

/* 写真の上に表示する、アクセスごとの言葉 */
.blog-post-header { isolation: isolate; }
.blog-post-header > img { height: clamp(440px, 48vw, 560px); object-fit: cover; }
.blog-post-header::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); pointer-events: none; }
.blog-post-header .header-caption { z-index: 1; width: min(90%, 900px); }
.header-quote { margin: 1.25rem 0 0; text-shadow: 0 1px 5px rgba(0,0,0,.5); }
.header-quote blockquote { margin: 0; }
.header-quote [data-quote-text] { font-size: clamp(1.1rem, 2.3vw, 1.8rem); line-height: 1.7; font-weight: 500; margin: 0 0 .65rem; }
.header-quote-original { font-size: .85rem; line-height: 1.6; margin-bottom: .8rem; opacity: .85; }
.header-quote figcaption { font-size: .85rem; }
.header-quote figcaption a { color: inherit; margin-left: 1rem; text-underline-offset: 3px; }

/* トップページ：余白を抑えた紹介文とお知らせ */
.home-hero { margin-bottom: 0 !important; }
.news-section { padding: 1.5rem 0 2rem; }
.site-introduction { margin: 0 0 1.25rem; line-height: 1.65; font-size: .95rem; }
.news_list > h3 { margin: 0 0 .5rem; font-size: 1.2rem; font-weight: 600; }
.news_list > ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #ddd; }
.news_list > ul > li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; padding: .25rem 0; border-bottom: 1px solid #eee; line-height: 1.4; font-size: .9rem; }
.news_list .news_date { float: none; width: auto; padding: 0; color: #666; white-space: nowrap; font-size: .85rem; line-height: 1.48; font-variant-numeric: tabular-nums; }
.news-content { min-width: 0; overflow-wrap: anywhere; }
.news-content a { text-underline-offset: .15em; }
@media (max-width: 575.98px) {
    .news-section { padding-top: 1rem; }
    .site-introduction { margin-bottom: 1rem; font-size: .9rem; }
    .news_list > ul > li { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; padding: .25rem 0; font-size: .85rem; }
    .news_list .news_date { font-size: .8rem; }
}

/* トップのヒーローは文章の高さ + 上下合計50px。 */
.home-hero { min-height: 300px; padding: 25px 0; display: flex; align-items: center; }
.home-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero .header-caption { position: relative !important; top: auto !important; left: auto !important; transform: none !important; margin: 0 auto; }
.home-hero .header-quote { margin: 0; }

/* サイト全体のリンク反応：文字と、その行・カードの背景を変える。 */
a { transition: color .15s ease, background-color .15s ease; }
a:focus-visible { outline: 2px solid #3478c5; outline-offset: 3px; }
.news_list > ul > li, main .card, main p, main li, main tr,
main h1, main h2, main h3, main h4, .site-header .nav-item,
.site-footer a { transition: background-color .15s ease, box-shadow .15s ease; }
main a:hover, main a:focus-visible { color: #064b9c; background-color: #c4dcfa; }
.news_list > ul > li:has(a:hover), .news_list > ul > li:has(a:focus-visible),
main .card:has(a:hover), main .card:has(a:focus-visible),
main p:has(> a:hover), main p:has(> a:focus-visible),
main li:has(> a:hover), main li:has(> a:focus-visible),
main tr:has(a:hover), main tr:has(a:focus-visible),
main :is(h1,h2,h3,h4):has(> a:hover), main :is(h1,h2,h3,h4):has(> a:focus-visible) {
    background-color: #c4dcfa;
}
.news_list > ul > li:has(a:hover), .news_list > ul > li:has(a:focus-visible) {
    box-shadow: inset 3px 0 #3478c5;
}
.site-header .nav-item:has(a:hover), .site-header .nav-item:has(a:focus-visible) {
    background-color: #26384e;
}
.site-footer a { display: block; padding: 2px 0; }
.site-footer a + br { display: none; }
.site-footer a:hover, .site-footer a:focus-visible { background-color: #26384e; }
/* 写真上の出典リンクは白文字のまま、背景で反応を示す。 */
.header-quote a:hover, .header-quote a:focus-visible { color: #fff; background-color: rgba(255,255,255,.2); }
@media (prefers-reduced-motion: reduce) {
    a, .news_list > ul > li, main .card, main p, main li, main tr,
    main h1, main h2, main h3, main h4, .site-header .nav-item, .site-footer a { transition: none; }
}

/* お知らせ：行頭のアクセントと本文を離し、行内に余白を確保。 */
.news_list > ul > li { padding: .35rem .85rem; }
.news_list > ul > li:has(a:hover), .news_list > ul > li:has(a:focus-visible) {
    background-color: #b5d4fa;
    box-shadow: inset 3px 0 #185da8;
}
@media (max-width: 575.98px) {
    .news_list > ul > li { padding: .35rem .65rem; }
}