/* 変数定義（あおかぜカラー） */
:root {
    --limited-express-color: #e65100; /* オレンジみの赤（例: Deep Orange 800） */
    --primary-color: #003366; /* 濃い青（鉄紺に近い） */
    --accent-color: #00A1E9;  /* 鮮やかなシアン */
    --bg-light: #f4f7f9;
    --text-main: #333;
    --text-light: #666;
    --status-ok: #28a745;
    --status-warn: #ffc107;
}

/* 基本設定 */
body {
    font-family: 'Noto Sans JP', "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-main);
    line-height: 1.6;
    background-color: #fff;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダー */
header {
    background: #fff;
    border-bottom: 4px solid var(--primary-color);
    padding: 15px 0;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo {
    display: flex;
    align-items: center;
    color: var(--primary-color);
}

.logo-icon {
    font-size: 2.5rem;
    margin-right: 15px;
}

.logo-text h1 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
}

.logo-text span {
    font-size: 0.7rem;
    color: var(--accent-color);
    letter-spacing: 0.2em;
    font-weight: bold;
}

/* ナビゲーション */
.nav-list {
    display: flex;
    gap: 20px;
    font-weight: 500;
}

.nav-list a:hover {
    color: var(--accent-color);
}

.lang-switch {
    font-size: 0.8rem;
    border: 1px solid #ccc;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* 運行情報バー */
.status-bar {
    background-color: #eee;
    padding: 10px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #ddd;
}

.status-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-label {
    background: var(--primary-color);
    color: #fff;
    padding: 2px 8px;
    border-radius: 2px;
    margin-right: 10px;
    font-size: 0.8rem;
}

.status-content {
    font-weight: bold;
    color: var(--status-ok);
    flex-grow: 1;
}

.current-time {
    color: var(--text-light);
    font-family: monospace;
}

/* メインビジュアル */
.hero {
    height: 450px;
    /* フリー素材の鉄道っぽい画像 */
    background: linear-gradient(rgba(0,51,102,0.2)), url('./image/蒼急7300系.png'); 
    background-size: cover;
    
    /* ★ここを変更/追記します★ */
    background-position: center; /* PCなど広い画面では中央表示 */
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

/* 768px以下の画面幅（スマートフォン）での設定 */
@media (max-width: 768px) {
    .hero {
        /* background-positionを右端に設定 */
        background-position: left center; 
        /* もしくはパーセンテージで右端を基準にする */
        /* background-position: 100% center; */
    }
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero p {
    font-size: 1.2rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}



/* 重要なお知らせ */
.important-notice {
    background: #fff3cd; /* 注意喚起の黄色 */
    padding: 15px 0;
    border-bottom: 1px solid #ffeeba;
    color: #856404;
}

.notice-list li {
    margin-bottom: 5px;
}

.notice-list a {
    text-decoration: underline;
}

/* クイックメニュー */
.quick-menu {
    padding: 40px 0;
    background: var(--bg-light);
}

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.menu-card {
    background: #fff;
    padding: 30px 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-top: 4px solid var(--accent-color);
}

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.menu-card i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.menu-card h3 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
}

.menu-card p {
    color: var(--text-light);
    font-size: 0.8rem;
    margin: 0;
}

/* ニュースリリース */
.news-section {
    padding: 40px 0;
}

.section-title {
    text-align: center;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.section-title2 {
    text-align: center;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.section-title2 {
    text-align: center;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: -30px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}


.section-title3 {
    text-align: center;
    border-bottom: 2px dashed var(--primary-color);
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 0px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.section-title small {
    display: block;
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: normal;
}

.news-item {
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.news-item .tag {
    font-size: 0.7rem;
    padding: 3px 8px;
    border-radius: 2px;
    margin-right: 10px;
    color: #fff;
    min-width: 60px;
    text-align: center;
}

.tag.event { background: #e83e8c; }
.tag.operation { background: #dc3545; }
.tag.goods { background: #fd7e14; }

.news-item .date {
    margin-right: 15px;
    color: var(--text-light);
    font-family: monospace;
}

.btn-area {
    text-align: right;
    margin-top: 20px;
}

.btn-outline {
    border: 1px solid var(--text-light);
    padding: 5px 20px;
    font-size: 0.9rem;
    border-radius: 20px;
}

/* 路線図 */
.route-map-section {
    background: var(--primary-color);
    color: #fff;
    padding: 40px 0;
}

.route-map-section2 {
    background: var(--accent-color);
    color: #fff;
    padding: 40px 0;
}


.route-map-section .section-title {
    border-color: #fff;
}

.route-scroll {
    overflow-x: auto;
    padding: 20px 0;
}

.route-line {
    display: flex;
    align-items: center;
    min-width: 800px; /* 横スクロールさせるため */
    position: relative;
    padding: 0 20px;
}

/* 路線（線） */
.route-line::before {
    content: '';
    position: absolute;
    left: 20px;
    right: 20px;
    top: 14px;
    height: 4px;
    background: #fff;
    z-index: 0;
}

.station {
    position: relative;
    z-index: 1;
    flex: 1;
    text-align: center;
}

.station .dot {
    display: block;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 4px solid var(--primary-color); /* 線と同じ色で縁取り */
    border-radius: 50%;
    margin: 0 auto 10px auto;
}

.station2 .dot2 {
    display: block;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 4px solid var(--primary-color); /* 線と同じ色で縁取り */
    border-radius: 50%;
    margin: 0 auto 10px auto;
}

.station.rapid .dot {
    width: 16px;
    height: 16px;
    background: var(--accent-color); /* 快速停車駅の色 */
    border-color: #fff;
    box-shadow: 0 0 0 4px var(--primary-color);
    margin-top: -2px;
}

.station.rapid2 .dot {
    width: 20px;
    height: 20px;
    background: var(--limited-express-color); /* 快速停車駅の色 */
    border-color: #fff;
    box-shadow: 0 0 0 4px var(--primary-color);
    margin-top: -2px;
}

/* --- 追加: 特急停車駅のスタイル --- */
.station.limited-express .dot {
    width: 20px; /* 快速より少し大きく */
    height: 20px;
    background: var(--limited-express-color); /* オレンジみの赤 */
    border: 3px solid #fff;
    border-radius: 50%;
    /* 外側のリングはメインカラーで強調 */
    box-shadow: 0 0 0 4px var(--primary-color);
    margin-top: -4px; /* サイズが大きくなった分、位置を調整 */
}
/* 快速と特急の両方が停車する場合、特急のスタイルを適用 */
.station.rapid.limited-express .dot {
    /* 特急のスタイルを優先し、ドットがオレンジになるようにします */
    width: 20px; 
    height: 20px;
    background: var(--limited-express-color); 
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px var(--primary-color);
    margin-top: -4px;
}

.station .name {
    font-size: 0.8rem;
    writing-mode: vertical-rl; /* 縦書き */
    text-orientation: upright;
    letter-spacing: 2px;
    height: 100px; /* 高さ確保 */
}

.name2 {
    font-size: 0.75rem;
    writing-mode: vertical-rl; /* 縦書き */
    text-orientation: upright;
    letter-spacing: 2px;
    height: 100px; /* 高さ確保 */
}

.route-note {
    text-align: center;
    font-size: 0.8rem;
    margin-top: 20px;
    opacity: 0.8;
}

/* フッター */
footer {
    background: #333;
    color: #fff;
    padding-top: 40px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-bottom: 40px;
}

.footer-links a {
    display: inline-block;
    margin-left: 20px;
    font-size: 0.9rem;
    color: #ccc;
}

.copyright {
    background: #222;
    text-align: center;
    padding: 10px;
    font-size: 0.7rem;
    color: #666;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .nav-list {
        display: none; /* モバイルでは隠す（JSで制御想定） */
    }
    .mobile-menu-btn {
        display: block;
    }
    .grid-wrapper {
        grid-template-columns: 1fr 1fr;
    }
    .hero h2 {
        font-size: 1.8rem;
    }
    .footer-content {
        flex-direction: column;
        gap: 20px;
    }
    .footer-links a {
        margin-left: 0;
        margin-right: 15px;
    }
}

.kaisoku {
    color: var(--accent-color);
}


/* ヘッダー */
header {
    background: #fff;
    border-bottom: 4px solid var(--primary-color);
    padding: 7px 0;
    /* --- 追加 --- */
    position: fixed; /* ヘッダーを画面上部に固定 */
    top: 0;
    width: 100%;
    z-index: 1000; /* 最前面 */
    /* ------------ */
}

/* 運行情報バー */
.status-bar {
    background-color: #eee;
    padding: 13px 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #ddd;
    /* --- 追加 --- */
    position: fixed; /* 運行情報バーを固定 */
    top: 82px; /* ヘッダーの高さに合わせて調整 */
    width: 100%;
    z-index: 999; /* ヘッダーよりは下 */
    /* ------------ */
}

/* 基本設定 */
body {
    font-family: 'Noto Sans JP', "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    /* ------------------------------------- */
    /* 修正: 固定ヘッダー/ステータスバーの高さ分を追加 */
    padding-top: 105px; 
    /* ------------------------------------- */
    color: var(--text-main);
    line-height: 1.6;
    background-color: #fff;
}

/* ナビゲーションのモバイル展開時のオーバーライド (JSが操作するスタイル) */
@media (max-width: 768px) {
    /* 既存のコードをそのまま残し、JSが操作する要素だけ調整します */
    /* ... (中略) ... */

    /* JSによって設定されるnav-listのスタイルをここで調整します */
    .nav-list {
        /* JSでdisplay: flexになるので、それ以外はCSSで調整 */
        padding: 0; /* JSで20px設定されているので上書き */
    }

    /* .nav-list内のリストアイテムも調整（任意：見た目をよりリストらしく） */
    .nav-list li {
        padding: 10px 40px;

    }
}

/* --- 追加: 路線図セクション内のボタン --- */
.route-map-btn-area {
    text-align: center;
    margin-top: 25px; /* 凡例からの間隔 */
}

.route-map-btn {
    /* ニュースセクションの .btn-outline をベースに色を反転させる */
    display: inline-block;
    border: 1px solid #fff; /* 枠線を白に */
    color: #fff; /* 文字色を白に */
    padding: 8px 25px;
    font-size: 0.9rem;
    border-radius: 25px;
    background: transparent; /* 背景は透明 */
    transition: background-color 0.3s, color 0.3s;
}

.route-map-btn i {
    margin-left: 5px;
}

.route-map-btn:hover {
    background-color: #fff; /* ホバーで背景を白に */
    color: var(--primary-color); /* 文字色を濃い青に */
    /* border: 1px solid #fff; は変化なし */
}

/* =================================================== */
/* ICカードサービス（ic.html）専用スタイル - デザイン調整版 */
/* =================================================== */

.ic-service-section {
    padding: 40px 0; /* padding: 40px 0; はsection-paddingクラスで既に定義されているはずですが、念のため */
}

/* ページタイトル */
.page-title-section {
    background: var(--bg-light); /* 薄い背景色 */
    padding: 30px 0;
    text-align: center;
    border-bottom: 2px solid var(--accent-color);
}
.page-title-section h1 {
    color: var(--primary-color);
    font-size: 2rem;
    margin: 0 0 5px 0;
}
.page-title-section .subtitle {
    color: var(--text-light);
    font-size: 1rem;
    margin: 0;
}

/* Misacaカード全体を包むコンテナ */
.ic-misaca-card {
    border: 1px solid var(--bg-light); 
    border-radius: 8px; /* 角丸は維持 */
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* 影を薄めに */
}

/* カードのヘッダー部分 */
.ic-header {
    background-color: var(--primary-color); /* 濃い青を維持 */
    color: #fff;
    padding: 15px 25px;
}

.ic-header h2 {
    font-size: 1.2rem;
    margin: 0;
    font-weight: bold;
}

/* Misacaカードの内容（画像とテキスト）のレイアウト */
.ic-content-grid {
    padding: 25px;
    background: #fff; /* 背景を白に */
    display: grid;
    grid-template-columns: 1fr; 
    gap: 30px;
}

/* Misacaロゴ風のダミーデザインを蒼風急行のアクセントカラーに統一 */
.misaca-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 120px;
    /* 蒼風急行のアクセントカラー（シアン）を使用 */
    background: var(--accent-color); 
    color: #fff;
    font-size: 2.2rem;
    font-weight: 900;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}

.ic-note {
    font-size: 0.85rem;
    color: var(--text-light); /* 薄い色に統一 */
}

/* テキストコンテンツ */
.ic-text-content h3 {
    color: var(--primary-color);
    /* 見出しの下線をアクセントカラーに統一 */
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 5px;
    margin-top: 0;
}

/* 重要な注意書き（発行/払い戻し不可）のデザインを調整 */
.important-note {
    /* 背景を薄いグレー/ブルー系に変更し、ブランドカラーに寄せる */
    background-color: #e9f7ff; 
    /* 左の境界線を濃い青（プライマリカラー）に変更 */
    border-left: 5px solid var(--primary-color); 
    padding: 15px;
    margin: 20px 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.red-text {
    /* 重要なテキストは警告色（赤）を維持しつつ、トーンを統一 */
    color: #dc3545; 
    font-weight: bold;
}

/* 若狭海岸鉄道へのリンクボタンをプライマリカラーのベタ塗りに変更 */
.btn-primary.misaca-link {
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    background-color: var(--primary-color); /* 濃い青 */
    border-radius: 4px;
    transition: background-color 0.3s;
    text-decoration: none;
    font-weight: 500;
}

.btn-primary.misaca-link:hover {
    background-color: #004d99; /* 少し濃くする */
}


/* その他の情報 */
.ic-other-info {
    padding: 25px;
    background: var(--bg-light); /* 他のセクションと同じ背景色 */
    border-radius: 8px;
}

.ic-other-info h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.3rem; /* 少し小さく調整 */
}


/* PC（タブレット以上）でのレイアウト調整 (変更なし) */
@media (min-width: 768px) {
    .ic-content-grid {
        grid-template-columns: 250px 1fr; 
        align-items: start;
    }
    
    .ic-image-container {
        padding-top: 10px;
        text-align: left;
    }

    .misaca-logo {
        margin-left: 0;
    }
}

.topback{
    margin: 20px;
}

/* =================================================== */
/* 特急列車紹介（limited_express.html）専用スタイル */
/* =================================================== */

.section-padding {
    padding: 40px 0;
}

.le-concept-section {
    background: #fff;
    padding: 50px 0;
}

/* コンセプトセクションのレイアウト */
.le-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
}

.le-text-content h2 {
    color: var(--primary-color);
    border-bottom: 2px solid var(--accent-color);
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.le-image-container {
    text-align: center;
    padding: 20px;
    border: 1px dashed #ccc;
    border-radius: 8px;
    background: var(--bg-light);
}
.le-image-container p {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--text-light);
}

/* 特徴セクション */
.le-feature-section {
    background: var(--bg-light);
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.le-feature-section h2 {
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.feature-lead {
    text-align: center;
    margin-bottom: 30px;
    color: var(--text-light);
}

.feature-card-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.feature-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    text-align: center;
    flex: 1 1 250px; /* 最小幅250pxで伸縮 */
    max-width: 400px;
}

.feature-card i {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.feature-card h3 {
    font-size: 1.1rem;
    margin: 0 0 10px 0;
    color: var(--primary-color);
}

/* 快適装備リスト */
.le-comfort-section {
    padding-bottom: 50px;
}

.comfort-list {
    margin-top: 20px;
    padding-left: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
}

.comfort-list li {
    background: #fcfcfc;
    border: 1px solid #eee;
    padding: 15px;
    border-radius: 4px;
    font-weight: 500;
}

.comfort-list i {
    color: var(--accent-color);
    margin-right: 10px;
}

/* プライマリボタン（時刻表へ） */
.btn-primary {
    display: inline-block;
    padding: 10px 25px;
    color: #fff;
    background-color: var(--primary-color);
    border-radius: 4px;
    transition: background-color 0.3s;
    font-weight: 500;
    text-decoration: none;
}
.btn-primary:hover {
    background-color: #004d99;
}


/* レスポンシブ調整 */
@media (min-width: 768px) {
    .le-grid {
        grid-template-columns: 2fr 1fr; /* PCでは左右に分割 */
    }
}

.midashi {
    font-size: 1.8rem;
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* =================================================== */
/* 運賃・きっぷ（fares.html）専用スタイル */
/* =================================================== */

/* 運賃表コンテナ */
.fare-table-container {
    max-width: 600px;
    margin: 20px auto;
    overflow-x: auto; /* スマホで横スクロール可能にする */
}

/* 運賃表のデザイン */
.fare-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.fare-table th, .fare-table td {
    padding: 12px 15px;
    text-align: center;
    border: 1px solid #ddd;
}

.fare-table thead th {
    background-color: var(--primary-color);
    color: #fff;
    font-weight: 600;
}

.fare-table tbody tr:nth-child(even) {
    background-color: var(--bg-light);
}

.fare-table tbody tr:hover {
    background-color: #e6f7ff; /* ホバーでアクセントカラー系に */
}

.small-note {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    margin-top: 20px;
}

/* お得なきっぷカード */
.ticket-card-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 20px;
}

.ticket-card {
    background: #fff;
    border: 1px solid #ddd;
    border-top: 4px solid var(--accent-color); /* アクセントカラーを上部に使用 */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.ticket-card h3 {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-top: 0;
}

/* カード内の詳細リンク */
.btn-link {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    margin-top: 10px;
}

.btn-link:hover {
    text-decoration: underline;
}

/* 関連情報リスト */
.related-list {
    margin-top: 20px;
    list-style: none;
    padding-left: 0;
}

.related-list li {
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
}

.related-list a {
    color: var(--text-color);
    text-decoration: none;
    display: block;
    transition: color 0.3s;
}

.related-list a:hover {
    color: var(--primary-color);
}

.related-list i {
    color: var(--accent-color);
    margin-right: 10px;
}

/* =================================================== */
/* 車両紹介（train_guide.html）専用スタイル */
/* =================================================== */

.train-summary-section {
    padding-bottom: 30px;
}

.train-name {
    color: var(--primary-color);
    font-size: 2.5rem;
    border-bottom: 3px solid var(--accent-color);
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.train-catch {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
}

/* 概要のグリッドレイアウト */
.summary-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 30px;
}

.summary-specs {
    background: var(--bg-light);
    padding: 20px;
    border-radius: 8px;
}

.summary-specs h3 {
    color: var(--primary-color);
    margin-top: 0;
    font-size: 1.3rem;
}

.summary-specs ul {
    list-style: none;
    padding-left: 0;
    line-height: 2;
}

.summary-specs i {
    color: var(--accent-color);
    margin-right: 10px;
}

.train-image-placeholder {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}
.train-image-placeholder p {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-top: 10px;
}

.train-description {
    line-height: 1.7;
}

/* 技術的特徴セクション */
.train-feature-section h2 {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 40px;
}

.feature-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.feature-icon {
    text-align: center;
}

.feature-icon i {
    font-size: 3.5rem;
    color: var(--primary-color);
    background: #fff;
    padding: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {

    .fa-palette {
        display: none;
    }

}

.feature-text h3 {
    color: var(--primary-color);
    border-bottom: 2px dashed var(--accent-color);
    padding-bottom: 5px;
    margin-top: 0;
    margin-bottom: 15px;
}


/* 車内設備リスト */
.train-interior-section h2 {
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 30px;
}

.interior-list {
    list-style: none;
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.interior-list li {
    background: #fff;
    border: 1px solid #eee;
    padding: 20px;
    border-left: 5px solid var(--accent-color);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.interior-list h4 {
    margin-top: 0;
    color: var(--primary-color);
}

.interior-list i {
    color: var(--primary-color);
    margin-right: 10px;
}

/* PC（タブレット以上）での調整 */
@media (min-width: 768px) {
    .summary-grid {
        grid-template-columns: 1fr 1.2fr;
    }
    .summary-photo {
        order: 2; /* 写真を右側へ */
    }

    /* 左右交互配置 */
    .feature-detail-grid {
        grid-template-columns: 1fr 100px 1fr;
        gap: 0;
        align-items: center;
    }
    .feature-text {
        padding: 0 40px;
    }

    .feature-text:nth-child(1) {
        grid-column: 1 / 2;
        text-align: right;
    }
    .feature-icon:nth-child(2) {
        grid-column: 2 / 3;
    }

    .feature-icon.order-2 {
        grid-column: 2 / 3;
        grid-row: 2 / 3;
    }
    .feature-text.order-1 {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        text-align: left;
    }
}

.img {
    border-radius: 10px;
}

/* --- 追加: 車両形式名用のH3スタイル --- */
.train-summary-section h3 {
    color: var(--primary-color); /* 濃い青 */
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
    /* アクセントカラーを使った点線の下線を追加 */
    border-bottom: 1px dashed var(--accent-color); 
    padding-bottom: 5px;
}

.kome {
    text-align: right;
    font-size: 0.7rem;
    color: #c1c1c1
}

.kome2 {
    text-align: right;
    font-size: 0.7rem;
    color: #fefefe
}

/* =================================================== */
/* お知らせページ（news.html）専用スタイル */
/* =================================================== */

/* 1. 絞り込みフィルターボタン */
.news-filter {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 40px;
    flex-wrap: wrap; /* スマホで折り返す */
}

.filter-btn {
    border: 1px solid #ddd;
    background: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    color: #666;
}

.filter-btn:hover {
    background: #f0f0f0;
}

/* アクティブ（選択中）のボタン */
.filter-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* 2. お知らせリスト本体 */
.news-list {
    list-style: none;
    padding: 0;
    border-top: 1px solid #eee;
}

.news-item {
    border-bottom: 1px solid #eee;
    padding: 20px 0;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
}

.news-item:hover {
    background-color: #f9fbfd; /* ホバー時に薄い青 */
}

/* 日付とタグのグループ */
.news-meta {
    display: flex;
    align-items: center;
    min-width: 220px; /* PCでの幅確保 */
    gap: 15px;
}

.news-meta time {
    font-family: 'Roboto', sans-serif; /* 英数字用フォントがあれば */
    color: #888;
    font-size: 0.95rem;
}

/* カテゴリタグのデザイン */
.news-tag {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 4px;
    color: #fff;
    background: #aaa; /* デフォルト（お知らせ） */
    font-weight: 500;
    min-width: 80px;
    text-align: center;
}

/* タグごとの色分け */
.tag-traffic { background-color: #dc3545; } /* 運行情報：赤 */
.tag-event   { background-color: var(--accent-color); } /* イベント：シアン */
.tag-corporate { background-color: var(--primary-color); } /* 企業情報：濃い青 */
.tag-info    { background-color: #6c757d; } /* その他：グレー */


/* 記事タイトル */
.news-title {
    color: var(--text-color);
    text-decoration: none;
    flex: 1; /* 残りの幅を埋める */
    padding-left: 20px;
    transition: color 0.3s;
    display: block;
}

.news-title:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* NEWアイコン */
.new-icon {
    color: #dc3545;
    font-size: 0.7rem;
    font-weight: bold;
    border: 1px solid #dc3545;
    padding: 1px 5px;
    margin-left: 10px;
    vertical-align: text-bottom;
}

/* 3. ページネーション */
.pagination {
    margin-top: 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.page-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    color: var(--primary-color);
    text-decoration: none;
    transition: all 0.3s;
}

.page-number:hover,
.page-number.current {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}


/* ------------------------------------------------ */
/* スマホ用レスポンシブ設定 */
/* ------------------------------------------------ */
@media (max-width: 768px) {
    .news-item {
        flex-direction: column; /* 縦並びにする */
        align-items: flex-start; /* 左寄せ */
        padding: 15px 0;
    }

    .news-meta {
        margin-bottom: 8px; /* 日付タグとタイトルの間に余白 */
        min-width: auto;
    }

    .news-title {
        padding-left: 0; /* 左の余白を消す */
        font-size: 0.95rem;
    }
}

/* =================================================== */
/* 会社案内（company.html）専用スタイル */
/* =================================================== */

/* 1. 代表挨拶セクション */
.message-box {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.message-box h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.message-box p {
    text-align: left; /* 本文は左揃え */
    line-height: 1.8;
    margin-bottom: 20px;
}

.ceo-name {
    margin-top: 40px;
    text-align: right;
}

.ceo-name p {
    text-align: right;
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}

.ceo-name .name {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

/* 2. 会社概要テーブル */
.company-table-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 30px; /* 白いカード風の背景 */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.company-table {
    width: 100%;
    border-collapse: collapse;
}

.company-table th, 
.company-table td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top;
}

.company-table th {
    width: 30%; /* 見出しの幅 */
    color: var(--primary-color);
    font-weight: 600;
    white-space: nowrap; /* 見出しを改行させない（PC時） */
}

.company-table tr:last-child th,
.company-table tr:last-child td {
    border-bottom: none; /* 最後の線は消す */
}

/* 3. 沿革リスト */
.history-list {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    border-left: 2px solid #ddd; /* タイムラインの線 */
    padding-left: 30px;
}

.history-item {
    margin-bottom: 30px;
    position: relative;
}

/* タイムラインの点 */
.history-item::before {
    content: '';
    position: absolute;
    left: -36px; /* 線の位置に合わせる調整 */
    top: 5px;
    width: 10px;
    height: 10px;
    background: var(--accent-color);
    border-radius: 50%;
    border: 2px solid #fff; /* 白枠 */
    box-shadow: 0 0 0 2px var(--accent-color); /* さらに外枠 */
}

.history-year {
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 5px;
}


/* ------------------------------------------------ */
/* スマホ用レスポンシブ設定 */
/* ------------------------------------------------ */
@media (max-width: 768px) {
    /* 会社概要テーブルを縦積みに */
    .company-table th, 
    .company-table td {
        display: block;
        width: 100%;
        padding: 8px 0;
        border: none;
    }

    .company-table th {
        padding-top: 15px;
        border-bottom: 1px dashed var(--accent-color); /* 区切り線 */
        margin-bottom: 5px;
        white-space: normal;
    }

    .company-table td {
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;
    }

    /* テーブルラッパーの余白調整 */
    .company-table-wrapper {
        padding: 20px;
    }

    /* 沿革リストの調整 */
    .history-list {
        padding-left: 20px;
    }
    .history-item::before {
        left: -26px;
    }
}

@media screen and (min-width:641px) {
	.sp {
		display: none;
	}
}

.pin-icon {
    color: var(--limited-express-color);
}
/* =================================================== */
/* 撮影ルール（photography_rules.html）専用スタイル */
/* =================================================== */

/* 警告ボックス */
.important-warning {
    background-color: #fff3f3;
    border: 1px solid #ffaaaa;
    border-left: 5px solid #dc3545; /* 警告色（赤） */
    padding: 15px;
    margin-top: 30px;
    border-radius: 4px;
    display: flex;
    align-items: flex-start;
}
.important-warning i {
    font-size: 1.5rem;
    color: #dc3545;
    margin-right: 15px;
    margin-top: 5px;
}
.important-warning p {
    margin: 0;
    line-height: 1.6;
}

/* ルールリスト */
.rules-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.rules-list li {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    border-left: 5px solid; /* 色はカテゴリで指定 */
}

/* 禁止事項 (Prohibited) */
.rule-prohibited {
    border-left-color: #dc3545; /* 赤 */
}

/* 注意事項 (Caution) */
.rule-caution {
    border-left-color: var(--primary-color); /* 濃い青 */
}

.rules-list h4 {
    margin-top: 0;
    font-size: 1.1rem;
    color: #333;
}

.rules-list i {
    font-size: 1.5rem;
    float: right;
    margin-top: -5px;
}

.rule-prohibited i {
    color: #dc3545;
}
.rule-caution i {
    color: var(--primary-color);
}

.rules-list p {
    font-size: 0.95rem;
    line-height: 1.5;
}

.rules-note {
    font-size: 0.85rem;
    color: #666;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #ccc;
    text-align: center;
}

/* 最後のメッセージ */
.final-message-section {
    text-align: center;
}
.final-message-section h2 {
    color: var(--primary-color);
    border-bottom: 2px dashed var(--accent-color);
    display: inline-block;
    padding-bottom: 5px;
}
/* =================================================== */
/* お問い合わせページ（form.html）専用スタイル */
/* =================================================== */

.lead-text {
    text-align: center;
    color: var(--text-color);
    margin-bottom: 40px;
    line-height: 1.7;
}

.contact-form {
    max-width: 700px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.form-fieldset {
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 6px;
}

.fieldset-legend {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: bold;
    padding: 0 10px;
}

.required-tag {
    color: #dc3545; /* 赤色 */
    font-size: 0.8rem;
    font-weight: bold;
    margin-left: 5px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 5px;
    color: #333;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box; /* paddingを含めて幅100%にする */
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 1px rgba(0, 150, 255, 0.2);
}

/* プライバシー同意チェックボックス */
.privacy-check {
    text-align: center;
    margin-top: 30px;
    font-size: 0.95rem;
}

.privacy-check label a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* 送信ボタンエリア */
.submit-area {
    text-align: center;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-submit {
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
}

.btn-secondary {
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #ccc;
    background: #f0f0f0;
    color: #666;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.btn-secondary:hover {
    background: #e0e0e0;
}

/* 電話連絡先 */
.contact-info {
    max-width: 700px;
    margin: 40px auto 0;
    padding: 20px;
    background: #fcfcfc;
    border: 1px solid #eee;
    border-radius: 6px;
    text-align: center;
}

.contact-info h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-top: 0;
}

.contact-info a {
    color: #dc3545; /* 目立つ色で強調 */
    font-size: 1.2rem;
    text-decoration: none;
    font-weight: bold;
    display: block;
    margin-top: 10px;
}