@charset "UTF-8";

/* モバイル向けをまず定義（モバイルファースト） */
/* デバイスに応じた出力制御 */
.sp { display: block; }
.pc { display: none; }

:root {
	--ctc-blue: #0091D5;
	--ctc-dark-blue: #00529B;
	--ctc-deep: #002D5A;
	--bg-light-blue: #F0F8FF;
	--bg-page: #f0f5fa;
	--accent-gold: #C5A059;
	--text-main: #1a2a3a;
	--text-muted: #5a7080;
	--white: #FFFFFF;
	--border: #d0e4f0;
	--shadow-sm: 0 2px 8px rgba(0,60,120,0.08);
	--shadow-md: 0 6px 20px rgba(0,60,120,0.12);
	--shadow-lg: 0 12px 40px rgba(0,60,120,0.18);
	--radius: 10px;
	--radius-lg: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
body { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; margin: 0; background-color: var(--bg-page); color: var(--text-main); overflow-x: hidden; line-height: 1.7; }


/* ============================================
   アイコン関係
   ============================================ */
.utility-nav a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
}
/* Instagram */
.utility-nav a[href*="instagram"]::before {
    background-image: url(../img/ico_insta.png);
}
/* アクセス */
.utility-nav a[href*="address"]::before {
    background-image: url(../img/ico_maps.png);
}
/* 各種相談窓口 */
.utility-nav a[href*="contact"]::before {
    background-image: url(../img/ico_phone.png);
}
/* サイト内検索 */
.search-box button::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    vertical-align: middle;
    background-image: url(../img/ico_search.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px 18px;
    flex-shrink: 0;
}
/* ハンバーガーメニュー */
.menu-btn-toggle::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    vertical-align: middle;
    background-image: url(../img/ico_menu.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px 18px;
    flex-shrink: 0;
}
.menu-btn-toggle .menu-label {
    display: none;
}
/* -------------------------------------------
   モバイルメニュー アイコン
   ------------------------------------------- */
.mnav-home::before,
.mnav-about::before,
.mnav-const::before,
.mnav-water::before,
.mnav-city::before,
.mnav-doki::before,
.mnav-book::before,
.mnav-each::before,
.mnav-bell::before,
.mnav-publish::before,
.mnav-read::before,
.mnav-books::before,
.mnav-system::before,
.mnav-maps::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    margin-right: 0.4em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    background-color: transparent;
}
.mnav-home::before    { background-image: url(../img/ico_home.png); }
.mnav-about::before   { background-image: url(../img/ico_about.png); }
.mnav-const::before   { background-image: url(../img/ico_const.png); }
.mnav-water::before   { background-image: url(../img/ico_water.png); }
.mnav-city::before    { background-image: url(../img/ico_city.png); }
.mnav-doki::before    { background-image: url(../img/ico_doki.png); }
.mnav-book::before    { background-image: url(../img/ico_book.png); }
.mnav-each::before    { background-image: url(../img/ico_each.png); }
.mnav-bell::before    { background-image: url(../img/ico_bell.png); }
.mnav-publish::before { background-image: url(../img/ico_publish.png); }
.mnav-read::before    { background-image: url(../img/ico_read.png); }
.mnav-system::before  { background-image: url(../img/ico_system.png); }
.mnav-books::before   { background-image: url(../img/ico_books.png); }
.mnav-maps::before    { background-image: url(../img/ico_maps.png); }


/* -------------------------------------------
   ターゲット別カード ヘッダーアイコン（修正②）
   ------------------------------------------- */
.acc-title.ico-gov::before,
.acc-title.ico-qual::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    max-width: 24px;
    max-height: 24px;
    margin-right: 0.4em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 24px 24px;
    background-color: transparent;
}
.acc-title.ico-gov::before  { background-image: url(../img/ico_office.png); }
.acc-title.ico-qual::before { background-image: url(../img/ico_person.png); }


/* -------------------------------------------
   menu-btn アイコン 通常時・ホバー時固定
   ------------------------------------------- */
.menu-btn {
    display: flex;
    align-items: center;
}
.btn-num {
    order: 1;
    flex-shrink: 0;
}
.btn-icon-wrap {
    order: 2;
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    flex-shrink: 0;
    /* アイコンはmenu-btnの::beforeで表示するため
       このspanは幅確保のみ。不要であれば削除可。 */
}
.btn-text {
    order: 3;
    flex: 1;
}
.btn-arrow {
    order: 99;
    margin-left: auto;
    flex-shrink: 0;
}

/* menu-btn ::before アイコン定義（通常時・ホバー時共通） */
.menu-btn[class*="ico-"]::before,
.menu-btn[class*="ico-"]:hover::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    max-width: 20px;
    max-height: 20px;
    margin-right: 0.4em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    background-color: transparent;
    flex-shrink: 0;
    order: 2;
}

/* 通常時 */
.menu-btn.ico-partner::before  { background-image: url(../img/ico_partner.png); }
.menu-btn.ico-bell::before     { background-image: url(../img/ico_bell.png); }
.menu-btn.ico-person::before   { background-image: url(../img/ico_person.png); }
.menu-btn.ico-pc::before       { background-image: url(../img/ico_pc.png); }
.menu-btn.ico-books::before    { background-image: url(../img/ico_books.png); }
.menu-btn.ico-board::before    { background-image: url(../img/ico_board.png); }
.menu-btn.ico-workman::before  { background-image: url(../img/ico_workman.png); }
.menu-btn.ico-town::before     { background-image: url(../img/ico_town.png); }
.menu-btn.ico-leaf::before     { background-image: url(../img/ico_leaf.png); }
.menu-btn.ico-search::before   { background-image: url(../img/ico_search.png); }
.menu-btn.ico-each::before     { background-image: url(../img/ico_each.png); }
.menu-btn.ico-contact::before  { background-image: url(../img/ico_contact.png); }
.menu-btn.ico-read::before     { background-image: url(../img/ico_read.png); }
.menu-btn.ico-teacher::before  { background-image: url(../img/ico_teacher.png); }

/* ホバー時（background-imageを明示維持） */
.menu-btn.ico-partner:hover::before  { background-image: url(../img/ico_partner.png); }
.menu-btn.ico-bell:hover::before     { background-image: url(../img/ico_bell.png); }
.menu-btn.ico-person:hover::before   { background-image: url(../img/ico_person.png); }
.menu-btn.ico-pc:hover::before       { background-image: url(../img/ico_pc.png); }
.menu-btn.ico-books:hover::before    { background-image: url(../img/ico_books.png); }
.menu-btn.ico-board:hover::before    { background-image: url(../img/ico_board.png); }
.menu-btn.ico-workman:hover::before  { background-image: url(../img/ico_workman.png); }
.menu-btn.ico-town:hover::before     { background-image: url(../img/ico_town.png); }
.menu-btn.ico-leaf:hover::before     { background-image: url(../img/ico_leaf.png); }
.menu-btn.ico-search:hover::before   { background-image: url(../img/ico_search.png); }
.menu-btn.ico-each:hover::before     { background-image: url(../img/ico_each.png); }
.menu-btn.ico-contact:hover::before  { background-image: url(../img/ico_contact.png); }
.menu-btn.ico-read:hover::before     { background-image: url(../img/ico_read.png); }
.menu-btn.ico-teacher:hover::before  { background-image: url(../img/ico_teacher.png); }

/* -------------------------------------------
   5本柱 pillar-icon（imgタグ対応）
   ------------------------------------------- */
.pillar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;        /* 外寸を少し大きくして余白を確保 */
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
    background-color: #e6f5fc;
    border-radius: 8px;
    padding: 7px;      /* ここで余白を調整（8〜12pxが目安） */
    box-sizing: border-box;
}
.pillar-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* フッター アクセスボタン アイコン */
.footer-map-btn::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    vertical-align: middle;
    background-image: url(../img/ico_maps.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 18px 18px;
}
/* ─── アイコン関係 END ─── */


/* ─── HEADER ─── */
header { background: var(--white); padding: 10px 16px; border-bottom: 3px solid var(--ctc-blue); display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,60,120,0.10); }
.logo-link { display: block; flex-shrink: 1; min-width: 0; }
.logo-image { display: block; height: 36px; width: auto; max-width: 100%; object-fit: contain; }
.header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.utility-nav { display: none; }
.search-area { display: flex; gap: 8px; align-items: center; }
.search-box { display: none; }
.insta-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: white; font-size: 1.1rem; text-decoration: none; flex-shrink: 0; transition: opacity 0.2s, transform 0.2s; }
.insta-btn:hover { opacity: 0.85; transform: scale(1.07); }
.menu-btn-toggle { background: var(--ctc-blue); color: white; border: none; padding: 8px 13px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 0.85rem; font-family: inherit; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; transition: background 0.2s; }
.menu-btn-toggle:hover { background: var(--ctc-dark-blue); }

/* ─── MOBILE MENU ─── */
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,20,50,0.55); backdrop-filter: blur(2px); z-index: 900; opacity: 0; visibility: hidden; transition: all 0.3s; }
.menu-overlay.active { opacity: 1; visibility: visible; }
.mobile-menu { position: fixed; top: 0; right: -100%; width: 82%; max-width: 320px; height: 100%; background: #fff; z-index: 1000; box-shadow: -4px 0 30px rgba(0,0,0,0.2); transition: right 0.32s cubic-bezier(0.4,0,0.2,1); overflow-y: auto; display: flex; flex-direction: column; }
.mobile-menu.active { right: 0; }
.mobile-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: var(--ctc-blue); color: white; flex-shrink: 0; }
.mobile-menu-title { font-weight: 700; font-size: 1rem; letter-spacing: 0.1em; }
.close-btn { background: rgba(255,255,255,0.15); border: none; font-size: 1.4rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: white; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.close-btn:hover { background: rgba(255,255,255,0.3); }
.mobile-nav-body { padding: 10px 0 20px; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.mobile-nav-list { list-style: none; padding: 0; margin: 0; }
.mobile-nav-list li { border-bottom: 1px solid #f0f0f0; }
.mobile-nav-list li a { display: flex; align-items: center; gap: 10px; padding: 13px 22px; color: var(--text-main); text-decoration: none; font-weight: 500; font-size: 0.92rem; transition: background 0.15s, color 0.15s; }
.mobile-nav-list li a:hover { background: var(--bg-light-blue); color: var(--ctc-blue); }
.mobile-nav-list li.sub-item a { padding-left: 38px; font-size: 0.85rem; color: var(--text-muted); font-weight: 400; }
.mobile-nav-list li.sub-item a:hover { color: var(--ctc-blue); }
.nav-section-title { margin-top: 16px; margin-bottom: 4px; font-size: 0.72rem; color: #aaa; font-weight: 700; padding: 0 22px; letter-spacing: 0.1em; }

/* ─── SECTION HEADER ─── */
.section-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.section-title { font-family: "Noto Serif JP", serif; font-size: 1.1rem; color: var(--ctc-deep); margin: 0; display: flex; align-items: center; gap: 10px; }
.section-title::before { content: ''; display: inline-block; width: 4px; height: 1.1rem; background: var(--ctc-blue); border-radius: 2px; flex-shrink: 0; }
.section-subtitle { font-size: 0.8rem; color: var(--text-muted); margin: 0; }
.section-more { font-size: 0.82rem; color: var(--ctc-blue); text-decoration: none; font-weight: 700; white-space: nowrap; }
.section-more:hover { text-decoration: underline; }

/* ─── BENTO GRID ─── */
.container { width: 100%; padding: 20px 16px; box-sizing: border-box; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 14px; }

/* --- Main Hero Card (小さめ) --- */
.card-main {
	border-radius: var(--radius-lg);
	background-size: cover; background-position: center;
	border-top: 4px solid var(--accent-gold);
	color: white; text-decoration: none;
	padding: 10px 16px 8px;
	display: flex; align-items: flex-start; gap: 20px;
	box-shadow: var(--shadow-md);
	position: relative; overflow: hidden;
	transition: box-shadow 0.22s ease;
}
/* スライド共通 */
.card-bg-slides {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.card-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    animation: cardFade 40s infinite;  /* 5枚 × 8秒 = 40s */
}

/* 画像ファイルを指定 */
.slide-1 { background-image: url(../img/top_slide1.jpg); }
.slide-2 { background-image: url(../img/top_slide2.jpg); }
.slide-3 { background-image: url(../img/top_slide3.jpg); }
.slide-4 { background-image: url(../img/top_slide4.jpg); }
.slide-5 { background-image: url(../img/top_slide5.jpg); }

/* 各スライドのアニメーション開始タイミングをずらす */
.slide-1 { animation-delay:  0s; }
.slide-2 { animation-delay:  8s; }
.slide-3 { animation-delay: 16s; }
.slide-4 { animation-delay: 24s; }
.slide-5 { animation-delay: 32s; }

.card-bg-gradient {
	position: absolute;
	inset: 0;
	z-index: 1;  /* スライド（z-index:0）の上に重なる */
	background-image: linear-gradient(
			145deg,
			rgba(0, 50, 105, 0.25) 0%,
			rgba(0, 60, 109, 0.23) 60%,
			rgba(0, 175, 243, 0.07) 100%
		);
	pointer-events: none;  /* クリック等を透過させる */
}

/* フェードイン・アウトのキーフレーム */
/* 1枚あたり8秒（全体40秒中） */
/* フェードイン1秒 → 表示6秒 → フェードアウト1秒 */
@keyframes cardFade {
     0%    { opacity: 0; }   /* 非表示 */
     2.5%  { opacity: 1; }   /* フェードイン完了（約1秒） */
    22.5%  { opacity: 1; }   /* 表示維持（約7秒） */
    25%    { opacity: 0; }   /* フェードアウト完了（約1秒） */
   100%    { opacity: 0; }   /* 次のターンまで非表示 */
}

/* card-main の中身（テキスト等）を背景の上に表示 */
.card-main > *:not(.card-bg-slides) {
    position: relative;
    z-index: 1;
}

/* 既存のbackground-imageを無効化 */
.card-main {
    background-image: none !important;
}
.card-main:hover { box-shadow: var(--shadow-lg); }
.card-main::after {
	content: '30th';
	position: absolute; bottom: -12px; right: 10px;
	font-family: "Noto Serif JP", serif; font-size: 6rem; font-weight: 700;
	color: rgba(255,255,255,0.05); line-height: 1; pointer-events: none;
}
.anniv-logo-img {
	width: 50px; height: 50px; flex-shrink: 0;
	background: rgba(255,255,255,0.95); padding: 4px 5px;
	border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.25);
	object-fit: contain; overflow: hidden;
}
.hero-text { flex: 1; min-width: 0; text-shadow: black 2px 2px 2px}
.hero-text h2 { font-family: "Noto Serif JP", serif; font-size: 1.1rem; margin: 0 0 4px; color: white; line-height: 1.3; text-shadow: 2px 2px 4px rgba(0,0,0,0.4); }
.hero-text p { margin: 0 0 8px; color: rgba(220, 235, 255, 0.993); font-size: 0.78rem; line-height: 1.5; text-shadow: 2px 2px 3px rgba(0,0,0,0.4); }
.hero-link { display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: white; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); padding: 7px 13px; border-radius: 5px; backdrop-filter: blur(4px); transition: background 0.2s; }
.card-main:hover .hero-link { background: rgba(255,255,255,0.22); }
.hero-link-arrow { background: var(--accent-gold); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; }

/* --- Target Cards（アコーディオン）--- */
.target-grid { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: start; }
.card-target {
	border-radius: var(--radius-lg);
	background: var(--white); border: 1px solid var(--border);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.card-gov { border-left: 5px solid var(--ctc-blue); }
.card-qual { border-left: 5px solid var(--ctc-blue); }

/* アコーディオンのヘッダー（常時表示） */
.acc-header {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px; cursor: pointer;
	user-select: none;
	transition: background 0.18s;
}
.acc-header:hover { background: var(--bg-light-blue); }
.acc-title { flex: 1; font-size: 1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.card-gov .acc-title { color: var(--ctc-dark-blue); }
.card-qual .acc-title { color: var(--ctc-dark-blue); }
.acc-toggle {
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--bg-light-blue); border: 1px solid var(--border);
	display: flex; align-items: center; justify-content: center;
	font-size: 0.75rem; color: var(--ctc-blue); flex-shrink: 0;
	transition: transform 0.28s ease, background 0.18s;
}
.card-target.open .acc-toggle { transform: rotate(180deg); background: var(--ctc-blue); color: white; border-color: var(--ctc-blue); }

/* アコーディオン本体（開閉） */
.acc-body {
	max-height: 0; overflow: hidden;
	transition: max-height 0.35s ease, padding 0.28s ease;
	padding: 0 14px;
}
.card-target.open .acc-body {
	max-height: 600px;
	padding: 0 14px 14px;
}
.menu-list { display: flex; flex-direction: column; gap: 6px; }
.menu-btn { background: var(--white); padding: 9px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 500; text-align: left; display: flex; align-items: center; gap: 9px; text-decoration: none; border: 1px solid var(--border); color: var(--text-main); transition: background 0.18s, border-color 0.18s, transform 0.18s; line-height: 1.4; }
.menu-btn:hover { background: var(--ctc-blue); color: white; border-color: var(--ctc-blue); transform: translateX(3px); }
.menu-btn:hover::before { background: white; color: var(--ctc-blue); }
.menu-btn .btn-num { font-size: 0.72rem; font-weight: 700; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--ctc-blue); color: white; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.menu-btn:hover .btn-num { background: white; color: var(--ctc-blue); }
.menu-btn .btn-icon { font-size: 0.95rem; flex-shrink: 0; width: 20px; text-align: center; }
.menu-btn .btn-arrow { margin-left: auto; opacity: 0.35; font-size: 0.85rem; flex-shrink: 0; transition: opacity 0.18s, transform 0.18s; }
.menu-btn:hover .btn-arrow { opacity: 1; transform: translateX(3px); }

/* ─── 5本の柱（コンパクト版）─── */
.pillars-section { margin: 0 auto; padding: 0 16px 16px; }
.pillars-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pillar-card {
	background: var(--white); border-radius: var(--radius);
	border: 1px solid var(--border); box-shadow: var(--shadow-sm);
	text-decoration: none; color: var(--text-main);
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px;
	border-left: 5px solid transparent;
	transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.pillar-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pillar-icon { font-size: 1.6rem; flex-shrink: 0; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.pillar-text { flex: 1; min-width: 0; }
.pillar-text h4 { margin: 0 0 2px; font-size: 0.95rem; font-weight: 700; }
.pillar-text p { margin: 0; font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; white-space: normal; overflow: visible; text-overflow: clip; }
.pillar-num { font-family: "Noto Serif JP", serif; font-size: 1.4rem; font-weight: 700; opacity: 0.12; flex-shrink: 0; line-height: 1; }
.pillar-arrow-icon { color: var(--ctc-blue); opacity: 0.35; font-size: 1rem; flex-shrink: 0; transition: opacity 0.2s, transform 0.2s; }
.pillar-card:hover .pillar-arrow-icon { opacity: 1; transform: translateX(3px); }

.pillar-1, .pillar-2, .pillar-3, .pillar-4, .pillar-5 { border-left-color: var(--ctc-blue); }
.pillar-1 .pillar-icon, .pillar-2 .pillar-icon, .pillar-3 .pillar-icon, .pillar-4 .pillar-icon, .pillar-5 .pillar-icon { background: #e6f5fc; }
.pillar-1 .pillar-text h4, .pillar-2 .pillar-text h4, .pillar-3 .pillar-text h4, .pillar-4 .pillar-text h4, .pillar-5 .pillar-text h4 { color: var(--ctc-dark-blue); }

/* ─── NEWS ─── */
.news-section { margin: 0 auto; padding: 0 16px 28px; }
.news-tabs { display: flex; }
.news-tab { padding: 7px 13px; font-size: 0.8rem; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: #f5f9fc; color: var(--text-muted); border-bottom: none; border-radius: 6px 6px 0 0; margin-right: 3px; transition: background 0.2s, color 0.2s; font-family: inherit; }
.news-tab.active { background: var(--white); color: var(--ctc-blue); }
.news-list { background: var(--white); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); overflow: hidden; }
.news-panel { display: none; }
.news-panel.active { display: block; }
.news-item { padding: 12px 18px; border-bottom: 1px solid #edf3f8; display: flex; flex-direction: column; gap: 4px; transition: background 0.15s; }
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: var(--bg-light-blue); }
.news-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.news-date { font-weight: 700; color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; }
.news-dept { font-size: 0.74rem; color: var(--text-muted); }
.news-cat { padding: 2px 8px; font-size: 0.7rem; font-weight: 700; border-radius: 4px; white-space: nowrap; }
/* ── 区分バッジ カラー定義 ──────────────────────────
	使い方: <span class="news-cat cat-重要">重要</span>
	------------------------------------------------
	cat-重要    : 緊急・HP停止・システム障害など
	cat-お知らせ: 一般的なインフォメーション・掲載報告
	cat-研修    : 講習会・研修・セミナー案内
	cat-入札    : 入札公告・開札結果
	cat-資格    : 資格試験・更新講習（排水設備等）
	cat-調査    : 発掘調査・報告会・成果報告
	cat-メディア: テレビ・新聞等マスコミ掲載
	cat-SNS     : Instagram・SNS関連
	cat-刊行物  : 年報・報告書・広報誌の発行
────────────────────────────────────────────── */
.cat-重要    { background: #ffeaea; color: #c62828; }
.cat-お知らせ{ background: #e3f2fd; color: #1565c0; }
.cat-研修    { background: #e8f5e9; color: #2e7d32; }
.cat-入札    { background: #fff3e0; color: #e65100; }
.cat-資格    { background: #ede7f6; color: #4527a0; }
.cat-調査    { background: #e8f4f0; color: #00695c; }
.cat-メディア{ background: #fff8e1; color: #f57f17; }
.cat-SNS     { background: #fef0f8; color: #d6249f; }
.cat-刊行物  { background: #e8eaf6; color: #283593; }
.news-link { color: var(--text-main); text-decoration: none; font-size: 0.87rem; line-height: 1.6; font-weight: 500; }
.news-link:hover { color: var(--ctc-blue); }

/* ─── QUICK LINKS ─── */
.quicklinks-section { margin: 0 auto; padding: 0 16px 32px; }
.quicklinks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ql-card { background: var(--white); border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 13px 14px; text-decoration: none; color: var(--text-main); display: flex; align-items: center; gap: 10px; transition: transform 0.2s, box-shadow 0.2s; }
.ql-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ql-icon { font-size: 1.4rem; flex-shrink: 0; }
.ql-text { min-width: 0; }
.ql-title { font-size: 0.82rem; font-weight: 700; color: var(--ctc-dark-blue); line-height: 1.3; }
.ql-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; margin-top: 2px; }

/* ─── FOOTER ─── */
.site-footer { background: var(--ctc-blue); color: #FFFFFF; padding: 48px 20px 24px; }
.footer-container { display: grid; grid-template-columns: 1fr; gap: 32px; }
.footer-logo-name { font-weight: 700; font-size: 1rem; line-height: 1.6; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,0.3); }
.footer-logo-name small { display: block; font-size: 0.75rem; font-weight: 400; color: rgba(255,255,255,0.9); letter-spacing: 0.04em; margin-top: 4px; }
.footer-info p { font-size: 0.88rem; line-height: 1.9; color: rgba(255,255,255,0.95); margin: 0; }
.footer-map-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: white; text-decoration: none; font-size: 0.85rem; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); padding: 9px 16px; border-radius: 6px; transition: background 0.2s; font-weight: 500; }
.footer-map-btn:hover { background: rgba(255,255,255,0.18); }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.footer-nav-col h5 { font-size: 0.8rem; margin: 0 0 12px; padding: 5px 10px; background: rgba(255,255,255,0.2); border-radius: 4px; color: white; font-weight: 700; letter-spacing: 0.06em; display: inline-block; }
.footer-nav-col ul { list-style: none; padding: 0; margin: 0; }
.footer-nav-col ul li { margin-bottom: 9px; }
.footer-nav-col ul li a { color: rgba(255,255,255,0.95); text-decoration: none; font-size: 0.83rem; transition: color 0.18s; }
.footer-nav-col ul li a:hover { color: #FFFFFF; }
.footer-bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.3); text-align: center; }
.footer-bottom p { font-size: 0.73rem; color: rgba(255,255,255,0.9); margin-bottom: 12px; }
.footer-sub-links { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.footer-sub-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.73rem; }
.footer-sub-links a:hover { color: white; }

/* ─── ANIMATIONS ─── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.card-main    { animation: fadeUp 0.45s ease 0.05s both; }
.target-grid  { animation: fadeUp 0.45s ease 0.12s both; }
.pillars-section { animation: fadeUp 0.45s ease 0.18s both; }
.news-section { animation: fadeUp 0.45s ease 0.24s both; }
.quicklinks-section { animation: fadeUp 0.45s ease 0.28s both; }

/* ==================================================
    タブレット以上 (Min-width: 768px)
================================================== */
@media (min-width: 768px) {
	.sp { display: none; }
	.pc { display: block; }

	header { padding: 10px 36px; }
	.logo-image { height: 42px; width: auto; max-width: none; }
    .utility-nav {
        display: flex;
        gap: 16px;
        font-size: 0.82rem;
        align-items: center;
    }
    .utility-nav a {
        color: var(--text-muted);
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 5px;
        transition: color 0.18s;
    }
    .utility-nav a:hover { color: var(--ctc-blue); }

    /* テキストを非表示 */
    .utility-nav a span {
        display: none;
    }
	.header-right { gap: 10px; }
	.insta-btn { display: none; }
	.icon-insta { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color: white; width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 8px; font-weight: bold; flex-shrink: 0; }
    .menu-btn-toggle .menu-label {
        display: inline;
    }
	/* Bento: ヒーロー + 2カード横並び */
	.container { max-width: 1120px; padding: 28px 24px 20px; display: flex; flex-direction: column; gap: 14px; }
	.card-main { align-items: center; padding: 12px 22px; }
	.anniv-logo-img { width: 75px; height: 75px; }
	.hero-text h2 { font-size: 1.2rem; }
	.hero-text p { font-size: 0.84rem; }

	.target-grid { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

	/* 5本柱: 横5列 */
	.pillars-section { max-width: 1120px; padding: 0 24px 20px; }
	.pillars-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }
	.pillar-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; border-left: none; border-top: 4px solid transparent; }
	.pillar-1, .pillar-2, .pillar-3, .pillar-4, .pillar-5 { border-top-color: var(--ctc-blue); border-left: none; }
	.pillar-icon { width: 40px; height: 40px; font-size: 1.4rem; }
	/* .pillar-text p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } */
	.pillar-num { display: none; }
	.pillar-arrow-icon { display: none; }

	.news-section { max-width: 1120px; padding: 0 24px 36px; }
	.news-item { flex-direction: row; align-items: center; gap: 12px; }
	.news-meta { flex-shrink: 0; flex-wrap: nowrap; }

	.quicklinks-section { max-width: 1120px; padding: 0 24px 40px; }
	.quicklinks-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }

	.footer-container { max-width: 1120px; margin: 0 auto; grid-template-columns: 1fr 2fr; gap: 48px; }
	.footer-nav { grid-template-columns: repeat(3, 1fr); }
	.footer-bottom { max-width: 1120px; margin: 40px auto 0; display: flex; justify-content: space-between; align-items: center; text-align: left; }
	.footer-bottom p { margin: 0; }
}
/* ==================================================
    デスクトップPC・大型モニター (Min-width: 1120px)
================================================== */
@media (min-width: 1120px) {
	.utility-nav { display: flex; gap: 16px; font-size: 0.82rem; align-items: center; }
	.utility-nav a { color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: 5px; transition: color 0.18s; }
	.utility-nav a:hover { color: var(--ctc-blue); }
    .utility-nav a span { display: inline; }
	.search-box { display: flex; border: 1.5px solid var(--border); border-radius: 6px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
	.search-box:focus-within { border-color: var(--ctc-blue); box-shadow: 0 0 0 3px rgba(0,145,213,0.15); }
	.search-box input { padding: 7px 12px; border: none; outline: none; width: 160px; font-size: 0.88rem; font-family: inherit; color: var(--text-main); background: transparent; }
	.search-box button { background: var(--ctc-blue); color: white; border: none; padding: 7px 12px; cursor: pointer; font-size: 0.9rem; transition: background 0.2s; flex-shrink: 0; }
	.search-box button:hover { background: var(--ctc-dark-blue); }
}