@charset "UTF-8";

/* ==========================================================================
   Project: Connect Station HOME
   File: main.css
   Description: トップ、About、News、Legal等の主要ページ用スタイル
   ========================================================================== */

/* ----------------------------------------------------
   1. Universal Hero Section (全ページ共通の顔)
   ---------------------------------------------------- */
.hero-base {
    min-height: 350px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 4rem 0;
    position: relative;
    color: white;
}
/* 読みやすさのためのオーバーレイ */
.hero-base::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
    z-index: 1;
}
.hero-base .container { position: relative; z-index: 2; }

.hero-base h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin: 0;
    border-left: 5px solid var(--color-secondary);
    padding-left: 1.5rem;
    line-height: 1.3;
}
.hero-base p {
    font-size: 1.2rem;
    margin-top: 1rem;
    padding-left: 1.8rem;
    opacity: 0.9;
}

/* --- 各ページの背景画像定義 --- */
.hero-top     { /* トップはスライダーJSで制御するため、高さ確保のみ */ height: 70vh; }
.hero-about   { background-image: url('../images/common/all_characters.png'); background-position: center 20%; }
.hero-news    { background-image: url('../images/common/news-hero.jpg'); }
.hero-contact { background-image: url('../images/common/contact-hero.jpg'); }
.hero-legal   { background-image: url('../images/common/legal-hero.jpg'); }
.hero-guideline { background-image: url('../images/common/guideline-hero.jpg'); }
.hero-sitemap { background-image: url('../images/common/sitemap-hero.jpg'); }

/* ----------------------------------------------------
   2. Top Page Specifics
   ---------------------------------------------------- */
/* ヒーロー内のキャラ集合 */
.top-char-group {
    margin-top: 2rem;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}
.top-char-group img {
    height: 100px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    transition: transform 0.3s;
}
.top-char-group img:hover { transform: translateY(-10px); }
/* サイズ調整（遠近感） */
.char-l { height: 140px !important; } /* 先生、コレクト */
.char-m { height: 120px !important; } /* コネクト */
.char-s { height: 100px !important; } /* ちさまる、ポチまる */
.char-xs { height: 80px !important; } /* ミニまる */

/* 最新ニュースリスト（トップ用） */
.news-list-top {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.news-row {
    display: flex;
    align-items: baseline;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #eee;
    color: var(--color-text);
    transition: background 0.2s;
}
.news-row:hover { background: #f9f9f9; color: var(--color-primary); }
.news-row time { font-weight: bold; min-width: 100px; color: #888; font-size: 0.9rem; }

/* ----------------------------------------------------
   3. News Page (List & Detail)
   ---------------------------------------------------- */
.news-card {
    display: block;
    background: white;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-left: 5px solid transparent;
    transition: all 0.3s;
}
.news-card:hover {
    transform: translateX(10px);
    border-left-color: var(--color-secondary);
}
.news-badge {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: white;
    margin-left: 1rem;
}
.cat-info { background: var(--color-primary); }
.cat-update { background: #4caf50; }
.cat-urgent { background: #d32f2f; }

/* 記事詳細 */
.post-content {
    background: white;
    padding: 3rem;
    border-radius: 8px;
}
.post-content h2 {
    font-size: 1.8rem;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 0.5rem;
    margin-top: 3rem;
}
.post-content img { margin: 2rem 0; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-radius: 8px; }

/* ----------------------------------------------------
   4. About / Philosophy (Timeline & Grid)
   ---------------------------------------------------- */
.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}
.philosophy-item {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #eee;
}
.philosophy-item h3 { color: var(--color-primary); margin-bottom: 0.5rem; }
.philosophy-item.chisai { border-top: 5px solid #1e88e5; }
.philosophy-item.gensai { border-top: 5px solid #43a047; }
.philosophy-item.josai { border-top: 5px solid #fb8c00; }
.philosophy-item.josai-remove { border-top: 5px solid #e53935; }

/* ----------------------------------------------------
   5. Legal / Guideline
   ---------------------------------------------------- */
.legal-box {
    background: white;
    padding: 3rem;
    margin-bottom: 2rem;
    border-radius: 8px;
}
.legal-box h2 {
    font-size: 1.5rem;
    background: #f0f0f0;
    padding: 0.5rem 1rem;
    border-left: 5px solid var(--color-text);
}
.rule-list li { margin-bottom: 0.5rem; }