/* =========================================
   0. カラーパレット & 変数定義 (変更なし)
   ========================================= */
:root {
    /* メインカラー（KMIブルー） */
    --color-primary: #0056b3;
    
    /* 基本テキスト・ボタン色（濃い黒） */
    --color-text-main: #333333;
    
    /* サブテキスト（薄いグレー文字） */
    --color-text-sub: #888888;
    
    /* 背景色（薄いグレー） */
    --color-bg-gray: #f7f9fb;
    
    /* ▼▼▼ アクセントカラー設定 ▼▼▼ */
    --color-badge-cafe: #d97706;    /* CAFE (オレンジ) */
    --color-service-booth: #27ae60; /* BOOTH (展示ブース用の濃い緑) */
    --color-service-others: #c05a5a;
    
    /* ▼▼▼ コンテンツ・サービス固有カラー ▼▼▼ */
    --color-service-youtube: #ff0000;   /* YouTube (赤) */
    --color-service-spotify: #1DB954;   /* Spotify (緑) */
    --color-service-apple: #872EC4;     /* Apple/Podcast (紫) */
    --color-service-darkcandy: #2c3e50; /* Dark Candy (紺) */
    --color-service-pocket: #27ae60;    /* Pocket Physics (緑) */
    --color-service-note: #2cb696;      /* Note (エメラルド) */
}

/* =========================================
   1. 基本設定 & アニメーション (変更なし)
   ========================================= */
body, html {
    margin: 0; padding: 0; height: 100%;
    background-color: #000;
    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
    color: var(--color-text-main);
    line-height: 1.8; letter-spacing: 0.05em;
}

.js-fade-up {
    opacity: 0; transform: translateY(40px);
    transition: opacity 1.5s cubic-bezier(0.2, 1, 0.3, 1), transform 1.5s cubic-bezier(0.2, 1, 0.3, 1);
}
.js-fade-down {
    opacity: 0; transform: translateY(-20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.is-active { opacity: 1 !important; transform: translateY(0) !important; }

/* 順番表示用 */
.news-card:nth-child(2) { transition-delay: 0.2s; }
.news-card:nth-child(3) { transition-delay: 0.4s; }


/* =========================================
   2. メインビジュアル (Slider & Hero) (変更なし)
   ========================================= */
.swiper { width: 100%; height: 100vh; }
.swiper-slide { background-size: cover; background-position: center; }

.slide1 { background-image: url('../images/youtube_podcast/morishima2.jpg'); }
.slide2 { background-image: url('../images/events/202410_hcd_2.JPG'); }
.slide3 { background-image: url('../images/events/202512_museum_3.jpeg'); }


.swiper-pagination-bullet { background: white; opacity: 0.5; width: 10px; height: 10px; }
.swiper-pagination-bullet-active { opacity: 1; background: white; }

.hero-message {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 10; text-align: center; color: white; width: 100%;
}
.hero-message.is-active { opacity: 1 !important; transform: translate(-50%, -50%) !important; }

.hero-message h1 {
    font-size: 4rem; margin: 0 0 20px 0; line-height: 1.1; font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8); /* 影を濃く変更 */
}
.hero-message p { 
    font-size: 1.2rem; font-weight: 400; opacity: 1; /* opacityを1に戻し、文字自体をはっきりさせる */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9); /* サブタイトル用の影を追加 */
}


/* =========================================
   3. ヘッダー・ナビ・ページタイトル
   ========================================= */
/* 固定ヘッダー */
.page-header {
    position: fixed; top: 0; left: 0; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 40px; z-index: 100; box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
}
.logo { 
    color: white; font-size: 1.5rem; font-weight: 700; letter-spacing: 2px;
    text-decoration: none; cursor: pointer;
}
.logo:hover { opacity: 0.8; }

/* ナビゲーション */
.nav-list { display: flex; list-style: none; gap: 30px; margin: 0; padding: 0; }
.nav-list a { text-decoration: none; color: white; font-size: 0.9rem; font-weight: 700; transition: opacity 0.3s; }
.nav-list a:hover { opacity: 0.7; }
.menu-toggle { display: none; cursor: pointer; }

/* プルダウンメニュー */
.dropdown { position: relative; padding-bottom: 10px; margin-bottom: -10px; }
.dropdown-menu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(0, 0, 0, 0.9);
    list-style: none; padding: 10px 0; margin: 0; min-width: 200px;
    border-radius: 4px; opacity: 0; visibility: hidden;
    transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.3); z-index: 200;
}
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-menu li { display: block; text-align: left; }
.dropdown-menu a {
    display: block; padding: 12px 20px; color: #ccc; font-size: 0.85rem;
    white-space: nowrap; transition: background 0.3s, color 0.3s;
}
.dropdown-menu a:hover { background: rgba(255, 255, 255, 0.1); color: white; opacity: 1; }
.dropdown-toggle::after { content: "▼"; font-size: 0.6rem; margin-left: 6px; vertical-align: middle; opacity: 0.7; }

/* 下層ページ用ヘッダー (Page Hero) */
.page-hero {
    width: 100%; height: 300px;
    background-color: #111;
    background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('../images/home/header_2.png');
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: white; margin-bottom: 0;
}
.page-hero h1 { font-size: 2.5rem; font-weight: 700; margin: 0; letter-spacing: 0.1em; }
.page-hero p { font-size: 1rem; opacity: 0.8; margin-top: 10px; font-family: 'Noto Sans JP', sans-serif; }

/* 各ページのヘッダー画像設定 */
.page-hero-news { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('../images/home/header_2.png'); }
.page-hero-events { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('../images/home/header_2.png'); }
.page-hero-members { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('../images/home/header_2.png'); }
.page-hero-contact { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('../images/home/header_2.png'); }
.page-hero-about { background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.8)), url('../images/home/header_2.png'); }


/* =========================================
   4. 共通UIコンポーネント (ボタン・バッジ・レイアウト)
   ========================================= */
/* レイアウト */
.content-section { background: white; padding: 120px 0; position: relative; z-index: 20; }
.bg-gray { background-color: var(--color-bg-gray); }
.bg-dark { background-color: #1a1a1a; color: white; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 40px; }
.text-center { text-align: center; }
.mt-50 { margin-top: 50px; }
.mt-small { margin-top: 30px; }

/* セクション見出し */
.section-header { margin-bottom: 60px; }
.subtitle { 
    display: block; color: var(--color-primary); 
    font-weight: 700; letter-spacing: 0.2em; font-size: 0.9rem; margin-bottom: 0px;
}
.section-header h2 { font-size: 2.5rem; margin: 0; font-weight: 700; }

/* ボタン */
.btn-more {
    display: inline-block; padding: 12px 40px;
    border: 1px solid var(--color-text-main);
    color: var(--color-text-main); text-decoration: none;
    border-radius: 50px; font-weight: 700; font-size: 0.9rem; transition: all 0.3s;
    margin-top: 20px;
}
.btn-more:hover { 
    background-color: var(--color-text-main); 
    color: white; transform: translateY(-3px); 
}
.btn-white { border-color: white; color: white; }
.btn-white:hover { background-color: white; color: var(--color-text-main); }

/* 既存のリンク設定（カードなどはそのまま） */
.news-link, .news-link:visited, .news-link:hover, .news-link:active,
.archive-link, .archive-link:visited, .archive-link:hover, .archive-link:active {
    color: var(--color-text-main);
    text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.3s; display: inline-block;
}
.news-link:hover, .archive-link:hover { opacity: 0.6; color: var(--color-text-main); }
.news-no-link { color: var(--color-text-main); text-decoration: none; }

/* ▼▼▼ 追加：文中テキストリンク（改行なし・色付き・下線） ▼▼▼ */
.text-link {
    display: inline;              /* ★改行させない */
    color: var(--color-primary);  /* ★文字色（青） */
    text-decoration: underline;   /* ★下線 */
    text-underline-offset: 3px;   /* 下線の位置調整 */
    transition: opacity 0.3s;
}
.text-link:hover {
    opacity: 0.7;                 /* ホバー時に薄く */
    text-decoration: none;        /* ホバー時は下線を消す */
}

/* ▼▼▼ バッジ (News/Event/Contents) ▼▼▼ */
.news-badge {
    display: inline-block;
    background-color: var(--color-primary); /* デフォルト青 */
    color: white;
    font-size: 0.7rem; font-weight: 700;
    padding: 3px 8px; border-radius: 4px;
    white-space: nowrap; letter-spacing: 0.05em;
    margin-bottom: 2px;
}
/* カテゴリ別カラー設定 */
.news-badge.cafe, .news-badge[style*="d97706"] { background-color: var(--color-badge-cafe) !important; }
.news-badge.booth, .news-badge[style*="27ae60"] { background-color: var(--color-service-booth) !important; }
.news-badge.note, .news-badge[style*="2cb696"] { background-color: var(--color-service-note) !important; }
.news-badge.others, .news-badge[style*="617ce9"] { background-color: var(--color-service-others) !important; }
.news-badge.youtube { background-color: var(--color-service-youtube) !important; }
.news-badge.podcast { background-color: var(--color-service-apple) !important; }
.news-badge.darkcandy { background-color: var(--color-service-darkcandy) !important; }
.news-badge.pocket { background-color: var(--color-service-pocket) !important; }
.news-badge.workshop, .news-badge.events { background-color: var(--color-primary) !important; }


/* =========================================
   5. カードデザイン (News, Members, Contents)
   ========================================= */
/* [A] News Grid Card (Newsページ, Home) */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.news-card a {
    text-decoration: none; color: var(--color-text-main); display: block; background: white;
    border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s, box-shadow 0.4s;
}
.news-card a:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.news-img { height: 200px; overflow: hidden; }
.news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.news-card a:hover .news-img img { transform: scale(1.08); }
.news-body { padding: 25px; position: relative; }
.news-cat {
    position: absolute; top: -15px; right: 20px; 
    background: var(--color-primary); color: white;
    font-size: 0.7rem; padding: 4px 10px; border-radius: 4px; font-weight: bold;
}
.news-body time { font-size: 0.85rem; color: var(--color-text-sub); display: block; margin-bottom: 10px; }
.news-body h3 { font-size: 1.1rem; margin: 0; line-height: 1.5; font-weight: 700; }

/* [B] Latest Events Card (Home) - 完全修正版 */
#latest-events-grid { 
    display: grid; 
    /* 常時「3列」の枠組みを維持する。中身が1つでも1/3の幅に制限される */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; 
    width: 100%; 
    /* 要素を左詰めに固定 */
    justify-content: start; 
}

.latest-card {
    display: block; 
    background: white; 
    border-radius: 12px; 
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
    transition: transform 0.3s, box-shadow 0.3s; 
    height: 100%;
    /* ★最重要：カードの最大幅を制限（3枚並んだ時と同じサイズに固定） */
    max-width: 350px;
    width: 100%;
}

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

.latest-card-img-wrapper { 
    position: relative; 
    width: 100%; 
    height: 200px; 
}

.latest-card-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.latest-card-badge {
    position: absolute; 
    bottom: 0; 
    right: 0; 
    background-color: var(--color-primary); 
    color: white;
    font-size: 0.75rem; 
    font-weight: 700; 
    padding: 6px 15px; 
    border-top-left-radius: 8px;
}

.latest-card-body { 
    padding: 20px; 
}

.latest-card-date { 
    display: block; 
    font-size: 0.85rem; 
    color: var(--color-text-sub); 
    margin-bottom: 10px; 
    font-family: 'Montserrat', sans-serif; 
}

.latest-card-title { 
    font-size: 1rem; 
    font-weight: 700; 
    line-height: 1.5; 
    margin: 0; 
    color: var(--color-text-main); 
}

/* [C] Member Card / Contents Card (Members, Contents) */
.members-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.member-card { background: #fff; height: 100%; }
.member-card a {
    text-decoration: none; color: inherit; display: block; height: 100%;
}
.member-card .member-img {
    width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px;
    margin-bottom: 20px; background-color: #f0f0f0; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.member-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; border-radius: 8px; }
.member-info { padding: 20px; }
.member-info h4 { font-size: 1.2rem; margin: 0 0 10px 0; font-weight: 700; }
.member-card .member-name { border-bottom: none; padding-bottom: 0; margin-bottom: 5px; display: block; }
.member-card .member-en { display: block; margin-bottom: 10px; }

/* [D] Media Card Link (横長・リスト用) */
.media-card-link {
    display: flex; align-items: center; background: #fff; border-radius: 12px;
    overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); text-decoration: none;
    color: var(--color-text-main); transition: transform 0.3s, box-shadow 0.3s; margin-bottom: 20px;
    height: auto; min-height: 120px; cursor: pointer;
}
.media-card-link:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.media-card-img-wrap {
    position: relative; flex: 0 0 120px; width: 120px; height: 120px;
    overflow: hidden; background: #f0f0f0; flex-shrink: 0;
}
.media-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.media-card-link:hover .media-card-img-wrap img { transform: scale(1.05); }
.media-card-icon {
    position: absolute; bottom: 5px; right: 5px; background: rgba(0,0,0,0.6); color: white;
    width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem;
}
.media-card-body { flex: 1; padding: 15px 20px; min-width: 0; }
.media-card-body h3 {
    font-size: 1rem; font-weight: 700; margin: 0; color: var(--color-primary);
    white-space: normal; overflow: visible; line-height: 1.5; word-break: break-word;
}

/* ヘビの絵の左右にあるリスト内のタイトル文字を強制的に小さくする */
#js-media-list-left h3, 
#js-media-list-left h4,
#js-media-list-right h3, 
#js-media-list-right h4 {
    font-size: 1.0rem !important; /* 1.0rem に縮小 */
    line-height: 1.6 !important;   /* 行間を広げて読みやすく */
}

/* =========================================
   6. ページ固有: Home & General Sections
   ========================================= */
/* About Section */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-image img { width: 100%; border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

/* Updates List (Home) */
.update-section { padding: 60px 0; border-top: 1px solid #eee; }
.update-wrapper { display: flex; align-items: flex-start; gap: 60px; }
.update-header { flex-basis: 200px; flex-shrink: 0; }
.update-header h3 { font-size: 1.5rem; margin: 0; font-weight: 700; }
.update-list { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
.update-list li { display: flex; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px dotted #ddd; }
.update-list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.update-date { 
    font-weight: 700; font-size: 0.9rem; 
    color: var(--color-primary); width: 120px; flex-shrink: 0; 
}
.update-text { font-size: 0.95rem; color: var(--color-text-main); }

/* Survey & Collaboration */
.survey-section { max-width: 800px; margin: 100px auto 0; text-align: center; border-top: 1px solid #eee; padding-top: 60px; }
.survey-text { font-size: 1rem; margin-bottom: 25px; font-weight: 500; font-family: 'Noto Sans JP', sans-serif; }
.btn-survey {
    display: inline-block; background-color: var(--color-text-main);
    color: white !important; padding: 12px 60px; border-radius: 50px;
    text-decoration: none; font-weight: bold; transition: all 0.3s;
    margin-bottom: 80px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.btn-survey:hover { background-color: #555; color: white !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.collab-card { max-width: 600px; margin: 0 auto; text-align: center; }
.collab-label { font-size: 0.8rem; color: #999; margin: 0 0 10px 0; font-family: 'Montserrat', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }
.collab-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 15px 0; color: var(--color-text-main); line-height: 1.4; }
.collab-title a, .collab-desc a { color: var(--color-primary) !important; text-decoration: none; font-weight: bold; }
.collab-title a:hover, .collab-desc a:hover { text-decoration: underline; opacity: 0.7; }
.collab-desc { font-size: 0.9rem; line-height: 1.8; margin: 0; color: #555; }


/* =========================================
   7. ページ固有: News, Events, Articles
   ========================================= */
/* Archive List (Accordion) */
.archive-container { max-width: 900px; margin: 0 auto; }
.archive-year-group { margin-bottom: 20px; border: 1px solid #eee; border-radius: 8px; overflow: hidden; }
.accordion-btn {
    background-color: #f9f9f9; color: var(--color-text-main); cursor: pointer; padding: 18px 25px;
    width: 100%; border: none; text-align: left; outline: none;
    font-size: 1.2rem; font-family: 'Montserrat', sans-serif; font-weight: 700;
    transition: 0.3s; display: flex; justify-content: space-between; align-items: center;
}
.accordion-btn:hover, .accordion-btn.active { background-color: #eef2f6; color: var(--color-primary); }
.accordion-btn .icon { font-size: 1rem; color: #999; transition: transform 0.3s; }
.accordion-panel { background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.archive-list { list-style: none; padding: 10px 20px 20px 20px; margin: 0; }
.archive-list li { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px dotted #eee; flex-wrap: wrap; }
.archive-list li:last-child { border-bottom: none; }
.archive-date { 
    font-family: 'Montserrat', sans-serif; font-weight: 500; 
    margin-right: 15px; color: #666; min-width: 50px; 
}
.archive-list .news-badge { margin-right: 15px; }
.archive-title { flex: 1; font-weight: 500; }

/* Article Details */
.article-item {
    display: flex; align-items: center; justify-content: space-between;
    text-decoration: none; color: var(--color-text-main); padding: 20px 0;
    border-bottom: 1px solid #eee; transition: all 0.3s;
}
.article-item:first-child { border-top: 1px solid #eee; }
.article-item:hover { padding-left: 15px; border-bottom: 1px solid var(--color-text-main); }
.article-tag {
    font-size: 0.7rem; background: var(--color-text-main); color: white; padding: 3px 8px;
    border-radius: 4px; margin-right: 15px; white-space: nowrap;
}
.article-title { flex-grow: 1; font-size: 1rem; font-weight: 500; margin: 0; }
.article-img-box { margin-bottom: 50px; }
.article-img-box img { width: 100%; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.article-img-box p { font-size: 0.8rem; color: #666; text-align: center; margin-top: 5px; }
.article-content h3 { font-size: 1.5rem; margin-top: 50px; margin-bottom: 20px; font-weight: 700; }
.article-point-box { background: #f9f9f9; padding: 25px; border-radius: 8px; margin-top: 20px; }
.article-point-box h4 { color: var(--color-primary); margin-top: 0; font-size: 1.1rem; border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 15px; }
.recruit-box { border: 2px solid var(--color-primary); padding: 40px; border-radius: 12px; margin-top: 60px; text-align: center; background-color: white; }
.recruit-box h3 { color: var(--color-primary); margin-top: 0; font-size: 1.4rem; }

/* Privacy Policy */
.policy-wrapper { max-width: 800px; margin: 0 auto; }
.policy-content { background: #fff; padding: 0 20px; }
.policy-content h3 { font-size: 1.5rem; margin-bottom: 30px; border-bottom: 2px solid var(--color-text-main); padding-bottom: 10px; }
.policy-content h4 { font-size: 1.2rem; margin-top: 40px; margin-bottom: 15px; padding-left: 10px; border-left: 4px solid var(--color-primary); }
.policy-content p { font-size: 1rem; line-height: 2; margin-bottom: 20px; }
.policy-date { margin-top: 60px; text-align: right; color: #666; font-size: 0.9rem; }


/* =========================================
   8. ページ固有: Members
   ========================================= */
.member-name {
    font-size: 1.2rem; margin: 0 0 5px 0; font-weight: 700; line-height: 1.4;
    border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 15px;
    display: flex; align-items: baseline; gap: 10px;
}
.member-en {
    font-size: 0.8rem; color: var(--color-text-sub); font-weight: 400; font-family: 'Montserrat', sans-serif;
}
.member-affil {
    font-size: 0.9rem; color: var(--color-primary); 
    font-weight: bold; margin-bottom: 15px; line-height: 1.6;
}
.member-affil a {
    color: var(--color-primary); 
    text-decoration: underline; transition: opacity 0.3s;
}
.member-affil a:hover { opacity: 0.7; }
.member-comment {
    font-size: 0.95rem; color: #444; line-height: 1.8; text-align: justify;
}
.rep-layout { display: flex; align-items: flex-start; gap: 50px; }
.rep-layout .member-img { flex: 0 0 320px; max-width: 100%; margin-bottom: 0; }
.rep-layout .member-name { font-size: 1.6rem; }
.rep-layout img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; border-radius: 8px; }
.rep-layout:hover img { transform: scale(1.05); }


/* =========================================
   9. ページ固有: Contact
   ========================================= */
.contact-wrapper { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: flex-start; margin-top: 40px; }
.contact-form-area { background: #fff; }
.form-group { margin-bottom: 25px; }
.form-group label { display: block; font-weight: 700; margin-bottom: 8px; font-size: 0.95rem; }
.required { color: #ff0000; margin-left: 5px; font-size: 0.8rem; }
input[type="text"], input[type="email"], select, textarea {
    width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem;
    font-family: inherit; background: #f9f9f9; transition: 0.3s; box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--color-text-main); background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}
.form-btn-area { text-align: center; margin-top: 40px; }
.btn-submit { 
    min-width: 200px; cursor: pointer; 
    background: var(--color-text-main); 
    color: white; border: none; 
}
.btn-submit:hover { background: #555; color: white; }

.contact-info-area { background: var(--color-bg-gray); padding: 30px; border-radius: 12px; }
.info-box { margin-bottom: 30px; }
.info-box h3 { font-size: 1.2rem; margin: 0 0 15px 0; border-bottom: 1px solid #ddd; padding-bottom: 10px; }
.info-box p { font-size: 0.95rem; line-height: 1.8; margin-bottom: 15px; }
.contact-mail { font-weight: 700; color: var(--color-primary); }
.contact-sns a { font-size: 1.5rem; color: var(--color-text-main); margin-right: 15px; transition: opacity 0.3s; }
.contact-sns a:hover { opacity: 0.7; }
.map-container { width: 100%; border-radius: 8px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }


/* =========================================
   10. ページ固有: Contents & Media
   ========================================= */
/* Media Circle Layout */
.media-circle-wrapper { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; margin-top: 60px; position: relative; }
.media-center-image { flex: 0 0 350px; text-align: center; position: sticky; top: 150px; z-index: 1; align-self: flex-start; }
.media-center-image img { width: 100%; height: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); animation: floatSnake 6s ease-in-out infinite; }
@keyframes floatSnake { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
.media-side-list { flex: 1; z-index: 2; }
.media-side-list h3 { text-align: center; font-size: 1.5rem; margin-bottom: 30px; color: var(--color-primary); font-weight: 700; }
.media-card-stack { display: flex; flex-direction: column; gap: 20px; height: auto; overflow: visible; padding-bottom: 10px; }

/* Media Switcher */
.media-switch-container { display: flex; justify-content: center; gap: 20px; margin-bottom: 50px; }
.media-switch-btn {
    background: #f0f0f0; border: 2px solid #ddd; color: var(--color-text-sub);
    font-size: 1.1rem; font-weight: 700; padding: 12px 40px; border-radius: 50px;
    cursor: pointer; transition: all 0.3s; font-family: 'Montserrat', sans-serif;
    display: flex; align-items: center; gap: 10px;
}
.media-switch-btn:hover { background: #e0e0e0; color: #555; transform: translateY(-2px); }
.media-switch-btn.active {
    background: var(--color-primary); border-color: var(--color-primary); color: white;
    box-shadow: 0 5px 15px rgba(0, 86, 179, 0.3);
}
#btn-podcast.active { background: #6f42c1; border-color: #6f42c1; box-shadow: 0 5px 15px rgba(111, 66, 193, 0.3); }
#btn-youtube.active { background: #c4302b; border-color: #c4302b; box-shadow: 0 5px 15px rgba(196, 48, 43, 0.3); }

/* Video */
.media-wrapper { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: flex-start; }
.video-container {
    position: relative; width: 100%; padding-bottom: 56.25%; height: 0;
    overflow: hidden; border-radius: 8px; box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-caption { font-size: 0.9rem; color: #666; margin-top: 10px; text-align: right; }


/* =========================================
   11. Footer
   ========================================= */
.site-footer { background: #111; color: #aaa; padding: 60px 0 30px; font-size: 0.9rem; }
.footer-content { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 50px; flex-wrap: wrap; }
.footer-left { display: flex; flex-direction: column; gap: 15px; }
.footer-logo { color: white; font-size: 1.5rem; font-weight: 700; letter-spacing: 2px; line-height: 1; }
.footer-desc { font-size: 0.8rem; color: #888; line-height: 1.5; }
.social-links { margin-top: 5px; }
.social-links a { color: white; font-size: 1.2rem; margin-right: 20px; transition: opacity 0.3s; text-decoration: none; }
.social-links a:hover { opacity: 0.7; }

/* メインナビゲーションの基本設定（横並び） */
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 30px; }
.footer-nav a {
    color: #aaa; text-decoration: none; font-size: 0.9rem; font-weight: 700;
    transition: color 0.3s; text-transform: uppercase; padding-top: 5px;
}
.footer-nav a:hover { color: white; }

/* ▼ ドロップダウンメニュー用の修正▼ */
.footer-nav .dropdown-menu {
    flex-direction: column; /* 横並びを縦並びに上書き */
    gap: 10px; /* 縦の項目間の余白 */
    padding-top: 10px; /* 親メニューとの間の余白 */
}
.footer-nav .dropdown-menu li {
    text-align: left; /* テキストを左揃えにする */
}
.footer-nav .dropdown-menu a {
    padding-top: 0; /* aタグ上部の余白をリセット */
    text-transform: none; /* 大文字化を解除し、日本語を正常に表示 */
}

.footer-kmi-link { text-align: center; border-top: 1px solid #333; padding-top: 30px; margin-bottom: 15px; }
.kmi-link-container { display: inline-flex; align-items: center; text-decoration: none; color: #ddd; transition: opacity 0.3s; }
.kmi-link-container:hover { opacity: 0.7; }
.kmi-link-container:hover .kmi-footer-text { text-decoration: underline; }
.kmi-footer-logo-img { height: 45px; width: auto; margin-right: 20px; }
.kmi-footer-text { font-size: 1.1rem; font-family: 'Times New Roman', serif; letter-spacing: 0.02em; }

.footer-legal { text-align: center; margin-bottom: 5px; }
.footer-legal a { color: #888; font-size: 0.8rem; text-decoration: none; font-family: 'Montserrat', sans-serif; transition: color 0.3s; }
.footer-legal a:hover { color: white; text-decoration: underline; }
.copyright { text-align: center; font-size: 0.75rem; border-top: none; padding-top: 0; color: #666; font-family: 'Montserrat', sans-serif; }


/* =========================================
   12. Media Modal
   ========================================= */
#media-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    visibility: hidden; opacity: 0; transition: all 0.3s ease;
}
#media-modal.active { visibility: visible; opacity: 1; }
.modal-container {
    background: white; width: 95%; max-width: 800px; max-height: 90vh;
    overflow-y: auto; border-radius: 12px; padding: 40px; position: relative;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.media-modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; position: relative; }
.media-modal-title-area h3 { font-size: 1.6rem; color: var(--color-text-main); margin: 0; line-height: 1.3; font-weight: 700; padding-right: 40px; }
.modal-close-btn {
    position: absolute; top: -10px; right: -10px; background: transparent;
    border: none; width: 40px; height: 40px; font-size: 1.8rem; color: #999;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    z-index: 10; transition: color 0.3s;
}
.modal-close-btn:hover { color: var(--color-text-main); }
.media-modal-img-full { width: 100%; height: auto; border-radius: 8px; overflow: hidden; background: #f0f0f0; margin-bottom: 30px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.media-modal-img-full img { width: 100%; height: auto; object-fit: cover; display: block; }
.media-modal-body p { font-size: 1rem; color: #444; line-height: 1.9; margin-bottom: 40px; }
.media-modal-links-simple { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.modal-link-btn-simple {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 35px; border-radius: 6px; text-decoration: none;
    font-weight: bold; font-size: 0.9rem; color: white;
    transition: opacity 0.3s, transform 0.2s; gap: 8px;
}
.modal-link-btn-simple:hover { opacity: 0.9; transform: translateY(-2px); }

/* モーダル用ボタン色設定 */
.btn-spotify { background-color: var(--color-service-spotify); }
.btn-apple { background-color: var(--color-service-apple); }
.btn-youtube { background-color: var(--color-service-youtube); }
.btn-note { background-color: var(--color-service-note); }
.btn-booth { background-color: var(--color-service-booth); }
.btn-default { background-color: var(--color-text-main); }


/* =========================================
   13. レスポンシブ (スマホ調整) - ハンバーガーメニュー実装版
   ========================================= */
@media (max-width: 1024px) { 
    .members-grid { grid-template-columns: repeat(2, 1fr); } 
    .media-center-image { flex: 0 0 300px; } 
}

@media (max-width: 768px) {
    /* --- Base --- */
    .hero-message h1 { font-size: 2.5rem; }
    .page-hero { height: 200px; }
    .page-hero h1 { font-size: 1.8rem; }
    
    /* --- Layout --- */
    .about-grid, .media-wrapper, .update-wrapper, .rep-content, .contact-wrapper, .media-circle-wrapper { 
        flex-direction: column; grid-template-columns: 1fr; 
    }
    .media-center-image { order: 1; flex: auto; width: 80%; max-width: 350px; position: static; margin-bottom: 20px; }
    .media-left { order: 2; width: 100%; }
    .media-right { order: 3; width: 100%; }
    
    /* --- Header & Hamburger Menu (ここが重要) --- */
    .menu-toggle { 
        display: block; /* ボタンを表示 */
        color: white; 
        font-size: 1.8rem; 
        cursor: pointer; 
        z-index: 1001; /* メニューより手前に表示 */
    }

    .nav-list {
        display: flex; /* 消さずにFlexのまま */
        position: fixed;
        top: 0;
        right: -100%; /* 最初は画面外（右）に隠す */
        width: 80%;   /* 画面の80%幅 */
        height: 100vh; /* 画面いっぱいの高さ */
        background: rgba(0, 0, 0, 0.95); /* 黒背景 */
        flex-direction: column; /* 縦並び */
        justify-content: center;
        align-items: center;
        transition: right 0.3s ease-in-out; /* スライドのアニメーション */
        z-index: 1000;
        padding: 0;
        margin: 0;
    }

    /* クラスがついたら画面内へスライド */
    .nav-list.active {
        right: 0;
    }

    .nav-list li {
        margin: 20px 0; /* メニューの間隔を広げる */
    }

    .nav-list a {
        font-size: 1.2rem; /* 文字を大きく */
    }
    
    /* --- Components --- */
    .members-grid, #latest-events-grid{ grid-template-columns: 1fr !important; }
    .rep-layout { flex-direction: column; }
    .rep-layout .member-img { flex: auto; width: 100%; max-width: 100%; }
    .rep-image { flex: auto; width: 100%; max-width: 400px; margin: 0 auto; }
    .contact-info-area { order: -1; }
    
    /* --- Archive List --- */
    .archive-list li { align-items: flex-start; }
    .archive-date { font-size: 0.9rem; margin-top: 2px; }
    .archive-title { width: 100%; margin-top: 5px; display: block; }
    
    /* --- Card --- */
    .media-card-img-wrap { flex: 0 0 90px; width: 90px; height: 90px; }
    .media-card-link { min-height: 90px; }
    .media-card-body { padding: 10px 15px; }
    .media-card-body h3 { font-size: 0.9rem; }
    
    /* --- Footer --- */
    .footer-content { flex-direction: column; align-items: flex-start; gap: 40px; }
    .footer-nav ul { flex-direction: column; gap: 15px; }
    .footer-nav a { padding-top: 0; }
    .kmi-link-container { flex-direction: column; gap: 15px; }
    .kmi-footer-logo-img { margin-right: 0; height: 55px; }
    .kmi-footer-text { font-size: 1rem; line-height: 1.4; text-align: center; display: block; }
    
    /* --- Modal --- */
    .modal-container { padding: 25px; width: 90%; }
    .media-modal-title-area h3 { font-size: 1.3rem; }
    .media-modal-body p { font-size: 0.95rem; }
    .modal-link-btn-simple { padding: 10px 25px; width: 100%; text-align: center; }
}


/* =========================================
   14. Pocket Physics 付箋デザイン
   ========================================= */
.fusen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    padding: 20px;
}

.fusen-card {
    display: flex;
    align-items: center; /* 垂直中央 */
    justify-content: center; /* 水平中央 */
    padding: 40px;
    aspect-ratio: 1 / 1; /* 正方形にする */
    text-decoration: none;
    color: #333;
    font-family: 'Noto Sans JP', serif; /* 明朝体っぽくして雰囲気出す */
    font-size: 1.05rem;
    line-height: 1.8;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    position: relative;
}

/* ホバー時に少し浮いて傾く演出 */
.fusen-card:hover {
    transform: scale(1.03) rotate(-1deg);
    box-shadow: 10px 10px 25px rgba(0,0,0,0.15);
    z-index: 10;
}

/* 色のバリエーション（JSで指定） */
.fusen-pink { background-color: #fadcd9; }  /* 薄いピンク */
.fusen-green { background-color: #eaf4d3; } /* 薄い黄緑 */
.fusen-blue { background-color: #d6eff6; }  /* 薄い水色 */

/* スマホでは正方形だと縦長になりすぎるので少し調整 */
@media (max-width: 768px) {
    .fusen-card {
        aspect-ratio: auto;
        min-height: 250px;
    }
}

/* =========================================
   15. Pocket Physics 詳細解説ページ共通設定
   ========================================= */

/* --- レイアウトコンテナ (質問とイラストの横並び) --- */
.pocket-layout-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

.pocket-layout-left {
    flex: 1;
    max-width: 400px;
}

.pocket-layout-right {
    flex: 1;
    max-width: 500px;
    display: flex;
    align-items: center;
}

/* --- イラスト (右側のイメージ) --- */
.pocket-visual-img-side {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* --- 付箋 (詳細ページ用アレンジ) --- */
.fusen-detail {
    /* サイズと形状のリセット */
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    min-height: 300px;
    padding: 30px !important;
    
    /* テキスト配置 */
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important;
    text-align: left !important;

    /* 動きを止める */
    pointer-events: none;
    transform: none !important;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1) !important;
}
/* ホバー時も動かさない */
.fusen-detail:hover {
    transform: none !important;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1) !important;
}

/* 付箋内のテキスト */
.pocket-q-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}
.pocket-a-text {
    font-size: 1.2rem;
    font-weight: bold;
}
.pocket-a-text .mark {
    background: linear-gradient(transparent 60%, rgba(255, 255, 0, 0.4) 60%);
}

/* --- 解説セクション --- */
.pocket-answer-section {
    margin-top: 50px;
    padding: 0 10px; /* スマホで見切れないように */
}

.pocket-answer-title {
    font-size: 1.5rem;
    color: var(--color-primary);
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}

.pocket-answer-content {
    max-width: 800px;
    margin: 0 auto;
}

.pocket-answer-text {
    line-height: 2;
    margin-bottom: 30px;
    text-align: justify; /* 両端揃えで論文っぽく */
}

/* --- 図表エリア (figure) --- */
.pocket-figure {
    margin: 40px 0;
    text-align: center;
}

.pocket-figure-img {
    width: 100%;
    max-width: 100%; /* 親要素(800px)からはみ出さない */
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.pocket-figcaption {
    text-align: left;
    font-size: 0.9rem;
    color: #666;
    margin-top: 15px;
    line-height: 1.6;
}

.pocket-figcaption a {
    color: var(--color-primary);
    text-decoration: underline;
    word-break: break-all; /* 長いURLを折り返す */
}

/* --- 署名 --- */
.pocket-author {
    text-align: right;
    margin-top: 50px;
    font-weight: bold;
    color: #555;
    line-height: 1.6;
}

/* --- 戻るボタン --- */
.pocket-back-link {
    text-align: center;
    margin-top: 60px;
}

/* --- スマホ対応 (レスポンシブ) --- */
@media (max-width: 768px) {
    .pocket-layout-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .pocket-layout-left,
    .pocket-layout-right {
        max-width: 100%;
        width: 100%;
    }
    .fusen-detail {
        min-height: auto;
        padding: 25px !important;
    }
    .pocket-visual-img-side {
        margin-top: 20px;
    }
}

/* =========================================
   16. Dark Candy ページ
   ========================================= */

/* ヒーローエリアの背景上書き */
.darkcandy-hero {
    background-color: var(--color-service-darkcandy);
    /* 元画像URLをそのまま使用しています。必要に応じてローカル画像パスに変更してください */
    background-image: url('https://static.wixstatic.com/media/43c284_95d1373976c845dfbc8e6451e285868a~mv2.jpg/v1/fill/w_1920,h_560,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/43c284_95d1373976c845dfbc8e6451e285868a~mv2.jpg');
    background-blend-mode: multiply; /* 背景色と画像を乗算して暗くする */
    background-size: cover;
    background-position: center;
}

/* イントロダクションテキスト */
.candy-intro-text {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 60px;
    font-size: 1rem;
    line-height: 2;
}
.candy-intro-text h2 {
    color: var(--color-service-darkcandy);
    margin-bottom: 30px;
    font-size: 1.8rem;
    font-weight: 700;
}

/* キャンディカードのグリッド */
.candy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

/* キャンディ風カード本体 */
.candy-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    text-decoration: none;
    color: var(--color-text-main);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid #eee;
}

.candy-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    border-color: var(--color-service-darkcandy);
}

/* カード上部の色帯（アクセント） */
.candy-card::before {
    content: '';
    display: block;
    height: 8px;
    background: linear-gradient(90deg, var(--color-service-darkcandy), #8e44ad);
}

/* 画像エリア */
.candy-img-area {
    height: 180px;
    overflow: hidden;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.candy-img-area img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    transition: transform 0.5s;
}

/* ホバー時の画像の動き（少し傾いて拡大） */
.candy-card:hover .candy-img-area img {
    transform: scale(1.1) rotate(5deg);
}

/* カード本文エリア */
.candy-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.candy-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--color-service-darkcandy);
    line-height: 1.4;
}

.candy-desc {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

/* タグ */
.candy-tag {
    margin-top: auto;
    padding-top: 15px;
    font-size: 0.75rem;
    color: #999;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 5px;
}