/* =========================
RESET & BASE
========================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: #f8f9fa; color: #333;
    line-height: 1.6;
}
.maguro-container { max-width: 1200px; margin: auto; padding: 40px 20px; }

/* =========================
HEADER
========================= */
.maguro-header {
    background: #fff; border-bottom: 1px solid #f0f0f0;
    padding: 15px 0; position: sticky; top: 0; z-index: 1000;
}
.maguro-header-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
    display: flex; align-items: center; justify-content: space-between;
}
.maguro-logo a { display: flex; align-items: center; text-decoration: none; color: #323da0; }
.maguro-logo img { height: 50px; width: auto; margin-right: 12px; }
.logo-text { font-size: 20px; font-weight: 800; letter-spacing: 1px; }
.maguro-nav { display: flex; gap: 25px; }
.maguro-nav a { text-decoration: none; color: #555; font-size: 14px; font-weight: 600; }
.maguro-nav a:hover { color: #323da0; }

/* =========================
HERO SECTION (修正：トップページ用の2カラム対応)
========================= */
/* .maguro-category-hero ではなく .maguro-hero として定義 */
.maguro-hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 60px;
}
.hero-left {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 500px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
/* 修正：TRAVEL画像にアニメーションを追加 */
.hero-main-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    transition: transform 0.3s ease; 
}
/* 修正：ホバー時に拡大 */
.hero-left:hover .hero-main-img {
    transform: scale(1.05);
}

.hero-title {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 60px 40px 40px;
    color: white; z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
}
.hero-title span { font-size: 14px; letter-spacing: 2px; font-weight: bold; display: block; }
.hero-title h2 { font-size: 48px; font-weight: 900; line-height: 1; margin-top: 5px; }

/* 右側3枚カード用スタイル追加 */
.hero-right {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.hero-card {
    position: relative;
    flex: 1;
    border-radius: 15px;
    overflow: hidden;
    text-decoration: none;
    display: block;
}
.hero-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; }
.hero-card span {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: white; font-weight: bold; font-size: 18px; letter-spacing: 2px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    z-index: 2;
}
.hero-card::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.2); transition: 0.3s;
}
.hero-card:hover img { transform: scale(1.05); }
.hero-card:hover::after { background: rgba(0,0,0,0.4); }

/* =========================
LATEST UPDATES & OTHER
========================= */
.maguro-section { margin-bottom: 80px; }
.section-title { font-size: 28px; font-weight: 800; margin-bottom: 30px; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ""; width: 4px; height: 24px; background: #323da0; border-radius: 2px; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.post-card { background: #fff; border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: .3s; }
.post-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.post-card-thumb { position: relative; height: 220px; }
/* カテゴリーバッジ追加 */
.post-badge { position: absolute; top: 15px; left: 15px; background: #323da0; color: white; padding: 4px 12px; border-radius: 20px; font-size: 10px; font-weight: bold; z-index: 2; }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { padding: 25px; }
.post-date { font-size: 12px; color: #aaa; margin-bottom: 10px; display: block; }
.post-title { font-size: 18px; font-weight: bold; line-height: 1.5; margin-bottom: 12px; }
.post-excerpt { font-size: 13px; color: #666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* =========================
PHOTO CTA (追加)
========================= */
.maguro-photo-cta { background: #000; color: white; border-radius: 30px; padding: 60px; margin-top: 80px; }
.photo-cta-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.photo-cta-text h2 { font-size: 32px; font-weight: 800; }
.photo-cta-line { width: 60px; height: 2px; background: #323da0; margin: 20px 0; }
.photo-cta-text p { font-size: 15px; color: #ccc; margin-bottom: 30px; }
.photo-cta-button { display: inline-block; padding: 12px 30px; background: white; color: black; text-decoration: none; border-radius: 30px; font-weight: bold; transition: 0.3s; }
.photo-cta-button:hover { background: #323da0; color: white; }
.photo-cta-gallery { display: flex; gap: 15px; }
.photo-col { display: flex; flex-direction: column; gap: 15px; }
.col-narrow { width: 40%; }
.col-wide { width: 60%; }
.photo-img { border-radius: 15px; overflow: hidden; }
.photo-img img { width: 100%; height: 100%; object-fit: cover; }
.img-s { height: 140px; }
.img-l { height: 200px; }

/* =========================
MOBILE RESPONSIVE
========================= */
@media(max-width: 900px) {
    .maguro-hero { grid-template-columns: 1fr; }
    .hero-right { flex-direction: row; height: 150px; }
    .post-grid { grid-template-columns: 1fr; }
    .hero-left { height: 300px; }
    .hero-title h2 { font-size: 32px; }
    .photo-cta-inner { grid-template-columns: 1fr; padding: 40px; }
    .photo-cta-gallery { display: none; } /* モバイルではギャラリーを隠す */
}

/* =========================
CATEGORY HERO (ページ幅一致・高め設定)
========================= */

/* コンテナの上部余白をなくしてヘッダーに密着させる */
.maguro-container.hero-no-padding {
    padding-top: 0;
}

.maguro-category-hero-standard {
    margin-bottom: 60px;
    width: 100%; /* コンテナ幅(1200px)いっぱい */
}

.maguro-category-hero-standard .hero-inner-square {
    position: relative;
    border-radius: 0; /* 角丸なし */
    overflow: hidden;
    height: 600px; /* 縦に大きく設定 */
    background: #000;
}

.maguro-category-hero-standard .hero-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s ease;
}

/* ホバーアニメーション */
.maguro-category-hero-standard .hero-inner-square:hover .hero-main-img {
    transform: scale(1.05);
}

.maguro-category-hero-standard .hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    z-index: 1;
}

.maguro-category-hero-standard .hero-title-box {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px;
    color: white;
    z-index: 2;
}

.maguro-category-hero-standard .hero-subtitle {
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

.maguro-category-hero-standard .hero-main-title {
    font-size: 80px; /* 迫力のあるサイズ */
    font-weight: 900;
    line-height: 1;
    margin: 0;
    font-style: italic;
    text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* モバイル対応 */
@media(max-width: 900px) {
    .maguro-category-hero-standard .hero-inner-square {
        height: 400px;
    }
    .maguro-category-hero-standard .hero-main-title {
        font-size: 50px;
    }
    .maguro-category-hero-standard .hero-title-box {
        padding: 30px;
    }
}

/* =================================================
   ROADBIKE HERO (修正：レイアウト維持・ダッシュボード拡大)
   ================================================= */

/* --- コンテナとヒーロー外枠は既存のまま --- */
.maguro-container.hero-no-padding {
    padding-top: 0;
}

.roadbike-hero-standard {
    margin-bottom: 60px;
    width: 100%;
}

.roadbike-hero-standard .hero-inner-square {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    height: 700px; /* 縦に大きく */
    background: #000;
}

.roadbike-hero-standard .hero-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- 左側テキストエリア（レイアウト維持） --- */
.roadbike-hero-standard .hero-text-area {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 80px 60px;
    color: white;
    z-index: 5;
}

.roadbike-hero-standard .hero-main-title {
    font-size: 80px;
    font-weight: 900;
    line-height: 0.9;
    margin: 15px 0 35px;
    text-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* --- 右側ダッシュボード：一回り大きく修正 --- */
.roadbike-hero-standard .hero-dashboard-panel.big-panel {
    position: absolute;
    top: 60px; /* 上からの位置 */
    right: 60px;
    /* 幅を 340px から 400px に拡大 */
    width: 420px; 
    /* 内側の余白を 30px から 40px に拡大 */
    padding: 40px; 
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    color: white;
    z-index: 10;
}

/* --- パネル内の文字サイズと余白調整 --- */
.panel-title { 
    font-weight: 800; 
    font-size: 18px; /* 16pxからアップ */
    display: block; 
}

.panel-status { 
    font-size: 12px; /* 10pxからアップ */
    color: #ccc; 
}

.machine-name { 
    font-weight: 900; 
    font-size: 24px; /* 18pxからアップ */
    margin: 15px 0 35px; /* 余白を広く */
}

/* 統計項目を縦並びに調整 */
.panel-stats-list {
    display: flex;
    flex-direction: column;
    gap: 25px; /* 項目間の余白 */
    margin-bottom: 35px;
}

.stat-label {
    font-size: 12px; /* 10pxからアップ */
    color: #aaa;
    margin-bottom: 8px;
}

.stat-value { 
    font-weight: 900; 
    font-size: 36px; /* 24pxから大幅アップ */
    line-height: 1;
}

.stat-value span { 
    font-size: 16px; /* 12pxからアップ */
    margin-left: 4px; 
}

.stat-value.small {
    font-size: 28px; /* 20pxからアップ */
}

/* ステータスバッジ */
.status-badge { 
    background: rgba(0,255,0,0.1); 
    color: #0ff000; 
    padding: 8px 16px; /* 余白を広く */
    border-radius: 20px; 
    font-size: 12px; /* 10pxからアップ */
    font-weight: bold; 
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* モバイル対応 */
@media(max-width: 900px) {
    .roadbike-hero-standard .hero-inner-square { height: 450px; }
    .roadbike-hero-standard .hero-main-title { font-size: 48px; }
    .roadbike-hero-standard .hero-dashboard-panel { display: none; } /* モバイルでは複雑なパネルを非表示 */
}

/* --- 投稿枠（カード）のカスタマイズ --- */
.gallery-item {
    display: inline-block;
    width: 31.6% !important; /* 3列維持 */
    margin-bottom: 35px;
    border-radius: 12px; /* 少しシャープでおしゃれな角丸に */
    overflow: hidden;
    background: #fff;
    /* 影を「濃く」ではなく「広く・薄く」して上品な立体感を出す */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); 
    border: 1px solid rgba(0, 0, 0, 0.03); /* 非常に薄い枠線で輪郭を強調 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* 滑らかな動き */
}

/* マウスを置いた時（ホバー）の演出 */
.gallery-item:hover {
    transform: translateY(-12px); /* 上にふわっと浮き上がる */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); /* 影を強くして浮遊感を出す */
}

/* --- 画像エリアの演出 --- */
.gallery-image-wrapper {
    overflow: hidden;
    position: relative;
}

.gallery-image-wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block;
    transition: transform 0.6s ease; /* ズームアニメーション */
}

/* ホバー時に画像をわずかにズームさせる（高級感を出す定番テク） */
.gallery-item:hover .gallery-image-wrapper img {
    transform: scale(1.08);
}

/* --- タイトル（テキスト）部分の装飾 --- */
.gallery-item-title {
    padding: 18px 15px;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 600;
    color: #444;
    background: #fff;
    letter-spacing: 0.05em;
    border-top: 1px solid rgba(0, 0, 0, 0.02); /* 写真と文字の境目を自然に */
}