/*
Theme Name: Hayabusa Log
Description: 2026年 Webディレクター仕様・ミニマルテーマ
*/
/* --- 1. Root Variables & Global Settings --- */
:root {
    --main-black: #1a1a1a;
    --accent-blue: #4A96BD;
    --bg-gray: #f5f5f7;
    --font-base: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    }
    body {
    font-family: var(--font-base);
    color: var(--main-black);
    line-height: 1.8;
    background: var(--bg-gray);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    }
    /* Base Links */
    a {
    color: var(--main-black);
    text-decoration: none;
    transition: opacity 0.3s ease;
    }
    a:hover {
    opacity: 0.7;
    }
    /* --- 2. Layout Containers --- */
    .container {
    max-width: 1200px; /* TOP/ABOUT/FOOTER共通 */
    margin: 0 auto;
    padding: 0 16px; /* SP版左右16pxマージン */
    box-sizing: border-box;
    }
    /* --- 3. Header --- */
    .site-header {
    position: fixed;
    top: 0;
    width: 100%;
    background: #FAF9F6;
    z-index: 1000;
    transition: transform 0.3s ease;
    }
    .site-header.hide { transform: translateY(-100%); }
    .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    }
    .logo img { width: 90px; height: auto; }
    .nav ul { display: flex; list-style: none; gap: 20px; margin: 0; padding: 0; }
    .nav a { font-weight: bold; font-size: 14px; }
    /* --- 4. TOP Page: Article Grid --- */
    .site-lead {
    text-align: center;
    margin-top: 164px;
    margin-bottom: 60px;
    font-size: 14px;
    letter-spacing: 0.1em;
    color: #666;
    }
    .article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 40px;
    margin-top: 40px;
    }
    /* 1記事目特大指定 (PC版) */
    .post-item:first-child {
    grid-column: 1 / -1;
    display: flex;
    gap: 40px;
    align-items: center;
    }
    .post-item:first-child .post-thumb {
    flex: 0 0 55%;
    aspect-ratio: 16 / 9;
    }
    .post-item:first-child .post-content { flex: 1; }
    .post-item:first-child .post-title { font-size: 28px; }
    /* 通常記事の画像比率 */
    .post-thumb {
    background: #FAF9F6;
    aspect-ratio: 3 / 2;
    width: 100%;
    object-fit: cover;
    border-radius: 4px;
    overflow: hidden;
    }
    /* --- 5. Article Detail (single.php) --- */
    .article-detail {
    padding-top: 164px; /* site-leadと揃える */
    max-width: 720px; /* コンテンツ幅をW720pxに制限 */
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    }
    .article-detail .post-eyecatch img {
    width: 100%;
    aspect-ratio: 1200 / 630; /* 指定の比率 */
    object-fit: cover;
    border-radius: 8px;
    }
    .post-title { font-size: 32px; font-weight: 700; line-height: 1.4; margin-bottom: 24px; }
    .post-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    }
    .post-categories a {
    background: #7a89d1;
    color: #fff;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
    }
    /* 本文装飾 (H2/H3/Blockquote/Link) */
    .post-content h2 {
    font-size: 24px;
    font-weight: 700;
    border-left: 4px solid var(--accent-blue);
    padding-left: 16px;
    margin: 48px 0 24px;
    }
    .post-content h3 {
    font-size: 20px;
    font-weight: 700;
    border-bottom: 1px solid var(--accent-blue);
    padding-bottom: 8px;
    margin: 40px 0 16px;
    }
    .post-content p a {
    color: #4A69BD;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
    }
    .post-content blockquote {
    border: 1px solid #4A69BD;
    padding: 16px 24px;
    margin: 40px 0;
    background: #fff;
    }
    /* --- 6. ABOUT Section --- */
    .about-section { padding: 100px 0; }
    .about-flex { display: flex; align-items: center; justify-content: center; gap: 60px; margin-top: 40px; }
    .about-image img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; }
    .about-text { flex: 1; text-align: left; }
    .name { font-size: 28px; font-weight: bold; margin-bottom: 20px; }
    /* --- 7. Footer --- */
    .site-footer { background-color: #2D3133; color: #ffffff; padding: 60px 0 40px; }
    .footer-inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: flex-end; }
    .footer-logo-img { width: 80px; filter: brightness(0) invert(1); margin-bottom: 15px; }
    .footer-nav ul { list-style: none; padding: 0; margin: 0 0 20px 0; display: flex; gap: 30px; }
    .footer-nav a { color: #fff; font-weight: bold; font-size: 14px; }
    .sns-icon a { color: #fff; font-size: 20px; text-transform: lowercase; }
    .copyright { font-size: 10px; opacity: 0.6; margin: 0; }
    /* --- 8. Responsive Adjustments (SP) --- */
    @media screen and (max-width: 768px) {
    .site-lead { margin-top: 130px; margin-bottom: 40px; }
    /* TOP Grid SP */
    .article-grid { grid-template-columns: 1fr; }
    .post-item:first-child { flex-direction: column; grid-column: auto; }
    .post-item:first-child .post-thumb { aspect-ratio: 3 / 2; }
    /* Detail SP */
    .article-detail { padding-top: 120px; }
    .post-title { font-size: 26px; }
    /* About & Footer SP */
    .about-flex { flex-direction: column; text-align: center; }
    .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 30px; }
    .footer-left { order: 1; display: flex; flex-direction: column; align-items: center; }
    .footer-right { order: 2; display: flex; flex-direction: column; align-items: center; }
    .footer-left .copyright { order: 4; margin-top: 20px; }
    .footer-nav ul { justify-content: center; margin-bottom: 20px; }
    .sns-icon { order: 3; }
    }
    /* --- 1. はみ出しを防ぐ絶対ルール (Reset) --- */
    *, *::before, *::after {
    box-sizing: border-box; /* パディングを幅に含める */
    }
    /* 本文内の画像や動画が親要素を絶対に超えないようにする */
    img, video, iframe, table {
    max-width: 100% !important;
    height: auto !important;
    }
    /* 長い英単語などが突き抜けるのを防ぐ */
    body {
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow-x: hidden; /* 最終手段：横スクロールを強制カット */
    }
    /* --- 2. 各コンテナの再定義 --- */
    .container {
    width: 100%; /* max-widthだけでなくwidth 100%を指定 */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    }
    .article-detail {
    width: 100%; /* 親の幅に合わせる */
    max-width: 720px; /* ここで制限 */
    margin: 0 auto;
    padding: 164px 16px 80px; /* 上・左右・下 */
    }
    /* --- 3. TOPページのグリッド修正 --- */
    .article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 40px;
    width: 100%; /* グリッド自体も100%に */
    }
    /* 1記事目の横並びが崩れないように制限 */
    .post-item:first-child {
    grid-column: 1 / -1;
    display: flex;
    gap: 40px;
    width: 100%;
    }
    .post-item:first-child .post-thumb {
    flex: 0 0 55%; /* ここを固定ではなく比率に */
    max-width: 55%;
    }
    /* --- 4. テーブル等の横スクロール対応 --- */
    /* もし「基本ルール」がテーブル（HTML）なら、これを囲む必要がある */
    .post-content {
    width: 100%;
    overflow: hidden; /* 本文エリアからはみ出させない */
    }
    /* --- クリックエリアの拡大設定 --- */
    .post-item {
    position: relative; /* リンクの基準点にする */
    transition: transform 0.3s ease;
    }
    /* ホバー時にカード全体を少し浮かせて「押せる感」を出す */
    .post-item:hover {
    transform: translateY(-5px);
    }
    .post-title a {
    color: var(--main-black);
    text-decoration: none;
    }
    /* 魔法の一手：擬似要素を使ってリンクを親要素全体に広げる */
    .post-title a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* 他の要素より上に配置 */
    }
    /* カテゴリーの装飾（リンクなし版） */
    .category {
    background: #7a89d1; /* Figmaの紫/青系 */
    color: #fff;
    padding: 2px 10px;
    font-size: 11px;
    border-radius: 4px;
    margin-right: 8px;
    display: inline-block;
    }
    /* --- Article Detail Refinement --- */
    /* カテゴリーラベル (リンクなし) */
    .category-label {
    background: #7a89d1; /* デザイン案のカラー */
    color: #fff;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 4px;
    margin-right: 8px;
    }
    /* SHAREセクションの調整 */
    .share-section {
    margin-top: 80px;
    text-align: center;
    border-top: 1px solid #ddd;
    padding-top: 40px;
    }
    .share-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 60px;
    }
    .share-btn {
    width: 44px; /* アイコンのコンテナサイズ */
    height: 44px;
    background: #333;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    }
    .share-btn img {
    width: 24px; /* 中のアイコンサイズ */
    height: auto;
    }
    /* 一覧に戻るボタン */
    .back-btn-container {
    margin-top: 40px;
    }
    .btn-back {
    display: inline-block;
    background: #2D3133;
    color: #fff;
    padding: 15px 60px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    }
    /* --- Footer X Icon Reset --- */
    /* 指示：サイズを元に戻す (デザイン案のバランスに調整) */
    .footer-inner .sns-icon-img {
    width: 24px; /* 元の適切なサイズに固定 */
    height: auto;
    }
    /* --- 1. Header Refinement --- */
.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    /* 修正：白ではなくコンテンツの背景色 (#f9f8f5) に合わせる */
    background: #f9f8f5; 
    z-index: 1000;
    transition: transform 0.3s ease;
    /* 境界線を消して背景に溶け込ませる */
    border-bottom: none; 
}
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    /* 修正：パディングを半分にして高さを抑える (20px -> 10px) */
    padding: 10px 20px; 
}
.logo img {
    /* ヘッダーに合わせて少し調整（お好みで） */
    width: 80px; 
    height: auto;
}
/* --- 2. Content Offset Adjustment --- */
/* ヘッダーが低くなった分、上部の余白を再計算 (ヘッダー約50px + 64px = 114px) */
.site-lead {
    text-align: center;
    margin-top: 114px; 
    margin-bottom: 60px;
}
.article-detail {
    width: 100%;
    max-width: 720px; 
    margin: 0 auto;
    /* 記事詳細の開始位置も調整 */
    padding: 114px 16px 80px; 
}
/* --- 3. Breadcrumbs (記事詳細ページ) --- */
.breadcrumbs {
    /* 修正：高さ50px、一覧ボタンから48pxの空き */
    height: 50px; 
    margin-top: 48px; 
    display: flex;
    align-items: center; /* 50pxの中で上下中央 */
    font-size: 14px;
    color: #666;
    /* Figmaに合わせて左寄せ */
    border-top: 1px solid #eee; /* 境界線をうっすら入れるとプロっぽい */
}
.breadcrumbs a {
    color: #666;
}
/* --- Responsive Adjustments (SP) --- */
@media screen and (max-width: 768px) {
    .site-lead {
        margin-top: 90px; /* SPヘッダーに合わせて調整 */
    }
    .article-detail {
        padding-top: 90px;
    }
}