/* --- 既存のベース設定を継承 --- */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: black;
}

html { scroll-behavior: smooth; }

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

.container {
    background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1a1a1a 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313;
    background-size: 20px 20px;
    width: 100%;
    min-height: 100vh;
}

/* --- ヘッダー・メニュー系（既存） --- */
.header {
    position: fixed; top: 0; left: 0; width: 100%; height: 60px;
    background: rgba(255, 255, 255, 0.6);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; z-index: 1000;
    box-shadow: 0px 0px 10px rgba(0, 2, 50, 0.5);
}

.logo img { height: 40px; margin-top: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 10px; }

.header-center { flex: 1; text-align: center; font-size: 24px; color: #333; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }

.menu-icon { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 22px; cursor: pointer; }
.menu-icon span { display: block; height: 4px; width: 100%; background-color: #333; transition: 0.3s; }
.menu-icon.open span:nth-child(1) { transform: rotate(45deg) translate(6.5px, 6.5px); }
.menu-icon.open span:nth-child(2) { opacity: 0; }
.menu-icon.open span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

.side-menu {
    position: fixed; top: 0; right: 0; width: 100%; height: 100vh;
    background: rgba(0, 0, 0, 0.7); display: flex; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
    transform: translateX(100%); transition: transform 0.3s ease-in-out; z-index: 999;
}
.side-menu a { color: white; text-decoration: none; font-size: 20px; margin: 15px 0; }
.side-menu.open { transform: translateX(0); }

/* --- ブログ記事用のレイアウト修正（ここを中心に調整） --- */
.imgdiv {
    max-width: 1000px; /* 写真縮小に合わせて少し狭くしてバランスを調整 */
    margin: 0 auto;
    padding: 100px 30px 50px 30px; /* 余白を微調整 */
    text-align: left;
}

.blog-item {
    display: flex;
    flex-direction: row; /* PCでは横並び */
    align-items: flex-start;
    gap: 30px; /* 写真と文章の間隔 */
    margin-bottom: 70px; /* 記事間の余白 */
    border-bottom: 1px solid rgba(255,255,255,0.1); /* 記事間に薄い区切り線を追加 */
    padding-bottom: 40px;
}

/* 最後の記事は下線を消す */
.blog-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.blog-img-box {
    flex: 0 0 250px; /* 写真の幅を250px（元の約半分）に固定 */
}

/* 既存のbikeimgを流用 */
.bikeimg {
    width: 100%; /* 親要素(blog-img-box)の幅(250px)に合わせる */
    height: auto;
    border-radius: 4px; /* 角丸を少しシャープに */
    box-shadow: 0px 0px 10px rgba(0, 3, 100, 0.3); /* 影を少し薄く */
    display: block;
}

.bikeimg:hover {
    transform: scale(1.05); /* 少し大きく拡大 */
    transition: all 0.3s ease;
    box-shadow: 0px 0px 15px rgba(100, 100, 0, 0.5);
}

.blog-description {
    flex: 1; /* 残りの幅をすべて使用 */
    color: white;
}

.blog-description h2 {
    font-size: 24px; /* 文字サイズを少し小さく */
    margin-bottom: 10px;
    color: #fff;
    /* 下線デザインを廃止し、スッキリさせました */
}

.blog-description p {
    font-size: 15px; /* 文字サイズを少し小さく */
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 10px;
}

.post-date {
    display: block;
    font-size: 13px;
    color: #888;
}

/* --- レスポンシブ（スマホ対応） --- */
@media (max-width: 768px) { /* タブレット・スマホ */
    .imgdiv {
        padding-top: 80px; /* ヘッダーとの余白を調整 */
    }
    .blog-item {
        flex-direction: column; /* 縦並びに */
        align-items: flex-start; /* 左揃え */
        gap: 15px;
        margin-bottom: 50px;
        padding-bottom: 30px;
    }
    .blog-img-box {
        width: 100%; /* スマホでは横幅いっぱい */
        max-width: 350px; /* でも大きくなりすぎないように制限 */
        margin: 0 auto; /* 中央寄せ（お好みで左寄せなら削除） */
    }
    .blog-description {
        width: 100%;
    }
    .blog-description h2 {
        font-size: 20px;
    }
}

/* --- アニメーション・オープニング（既存を維持） --- */
.animate-up { animation: fadeInUp 1.2s ease-in-out; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-down { animation: fadeInDown 1.2s ease-in-out; }
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}

.first { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
.first_h1 {
    background: linear-gradient(to right, rgb(150, 0, 255), rgb(255, 200, 0));
    -webkit-background-clip: text; color: transparent; text-align: center; font-size: 45px;
    overflow: hidden; white-space: nowrap; width: 0; opacity: 0;
}
@media screen and (min-width: 480px) { .first_br { display: none; } }
.first_h1.animate { animation: fadeInWidth 3s ease-in-out; opacity: 1; }
@keyframes fadeInWidth { 0% { width: 0; } 100% { width: 100%; } }

.main_con { display: none; }
.main_con.show { display: block; }