/* =========================================
   全体設定 (Base)
   ========================================= */
body {
    font-family: "M PLUS Rounded 1c", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    margin: 0;
    padding: 0;
    /* 背景に薄いドット柄を入れてポップにする */
    background-color: #fff0f5;
    background-image: radial-gradient(#e91e63 1px, transparent 1px);
    background-size: 20px 20px;
    color: #444;
    line-height: 1.8;
}

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

a:hover {
    color: #880e4f;
}

/* =========================================
   ヘッダー (Header) 
   ========================================= */
header {
    /* 背景のグラデーション設定：左上の色, 右下の色 */
    background: linear-gradient(135deg, #e91e63, #f48fb1);
    color: white;
    
    /* 【重要】ヘッダーの厚み（高さ）を決定する余白：上下 左右 */
    /* 120pxを大きくするとヘッダーがより縦に広がる */
    padding: 30px 20px; 
    
    /* ヘッダーの最低限の高さ：コンテンツが少なくてもこの高さは維持される */
    min-height: auto; 
    
    /* 中の要素（ロゴや文字）を中央に寄せるための設定 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

header h1 {
    width: 100%;
    margin: 0; /* 余計な余白を排除 */
}
/* ヘッダー内のロゴ画像設定 */
header h1 img {
    /* 横幅の最大値：画面端にロゴがくっつかないよう90%に制限 */
    max-width: 95%; 
    height: auto;
    
    /* 【重要】ロゴ自体の表示サイズ：この数値を大きくするとロゴが巨大になる */
    max-height: 150px; 
    
    /* ロゴの下に作る空間：日付テキストとの距離を調整 */
    margin-bottom: 10px; 
    
    /* ロゴに影をつけて浮き上がらせる効果（水平 垂直 ぼかし 色） */
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1));
}

/* ロゴの下にある日付や会場名のテキスト */
header p {
    margin-top: 10px;
    /* 文字の大きさ：1.2emは標準の1.2倍 */
    font-size: 1.2em; 
    font-weight: bold;
    /* 文字同士の間隔：値を大きくすると横に広がる */
    letter-spacing: 0.1em; 
    /* 文字の影：読みやすさを助ける */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

/* =========================================
   スマホ対応 (Responsive) 
   ========================================= */
/* 画面幅が 600px 以下のデバイス（スマホ等）に適用される設定 */
@media (max-width: 600px) {
    header {
        /* スマホでは画面を占領しすぎないよう、余白を小さくする */
        padding: 60px 15px;
        min-height: 200px;
    }
    header h1 img {
        /* スマホでのロゴの最大サイズ */
        max-height: 120px;
    }
}

/* =========================================
   ナビゲーション (Navigation)
   ========================================= */
nav {
    background-color: #fff;
    position: sticky; /* スクロールしても上についてくる */
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

nav li a {
    display: block;
    padding: 15px 20px;
    color: #555;
    font-weight: bold;
    transition: background 0.3s, color 0.3s;
}

nav li a:hover {
    background-color: #ffeef4;
    color: #e91e63;
}

/* ハンバーガーメニューボタン */
.hamburger {
    display: none;
    background: linear-gradient(135deg, #e91e63, #f48fb1);
    border: none;
    font-size: 32px;
    cursor: pointer;
    padding: 18px 22px;
    color: white;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    border-radius: 0 0 0 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.hamburger:hover {
    background: linear-gradient(135deg, #c2185b, #e91e63);
}

/* ナビゲーションのコンテナ */
nav-container {
    position: relative;
}

/* スマホ時のナビゲーション展開状態 */
nav.active ul {
    display: flex;
    flex-direction: column;
}

nav ul.collapsed {
    display: none;
}

/* =========================================
   メインコンテンツ (Main)
   ========================================= */
main {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

/* コンテンツをカード風にする */
section {
    background: white;
    padding: 40px;
    margin-bottom: 40px;
    border-radius: 15px; /* 角丸 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* ふんわりした影 */
}

/* =========================================
   見出し (Headings)
   ========================================= */
/* 大見出しのデザイン（ステッチ風ライン） */
h2 {
    text-align: center;
    color: #e91e63;
    border-bottom: 2px dashed #e91e63;
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-size: 1.8em;
}

/* 小見出しのデザイン（左線アクセント） */
h3 {
    background: #fff0f5; /* 薄いピンク背景 */
    padding: 10px 15px;
    border-left: 5px solid #e91e63;
    border-radius: 0 5px 5px 0;
    margin-top: 40px;
    color: #333;
}

/* =========================================
   パーツ (Components)
   ========================================= */

/* ニュースリスト */
.news-list {
    list-style: none;
    padding: 0;
}
.news-list li {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}
.date {
    font-weight: bold;
    color: #e91e63;
    margin-right: 10px;
}

/* テーブル */
table {
    width: 100%;
    border-collapse: collapse; /* 枠線を重ねる */
    margin-top: 15px;
    background-color: #fff;
}
th, td {
    border: 1px solid #eee;
    padding: 15px;
}
th {
    background-color: #ffeef4;
    color: #e91e63;
    width: 30%;
    text-align: left;
}
/* タイムテーブル用調整 */
.timetable th {
    text-align: center;
    width: 20%;
}

/* 注意書きボックス */
.notice-box {
    border: 2px solid #e91e63;
    background-color: #fffafc;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    color: #555;
}

/* 禁止リスト */
.warning-list li {
    color: #d32f2f; /* 赤文字 */
    margin-bottom: 5px;
}

/* ボタン */
.btn {
    display: block;
    width: fit-content;
    margin: 30px auto 0; /* 中央寄せ */
    background: linear-gradient(to right, #e91e63, #f06292);
    color: white;
    padding: 15px 40px;
    border-radius: 50px; /* 丸いボタン */
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(233, 30, 99, 0.3);
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn:hover {
    color: white;
    transform: translateY(-3px); /* 浮き上がる */
    box-shadow: 0 6px 15px rgba(233, 30, 99, 0.4);
}

/* マップエリア */
.map-placeholder {
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* =========================================
   サークル一覧 (Circle List - Grid)
   ========================================= */
.circle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.circle-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    /* カード自体の影はsectionでついているが、ここはさらに内側のカード */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    padding: 0; /* sectionのpaddingをリセット */
}

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

.circle-header {
    background-color: #e91e63;
    color: white;
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.space-no {
    background: white;
    color: #e91e63;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 0.9em;
}

.circle-name {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.circle-img-area {
    height: 180px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.circle-img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.circle-info {
    padding: 15px;
}

.pen-name {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 10px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 5px;
}

.comment {
    font-size: 0.9em;
    color: #444;
    line-height: 1.5;
    margin-bottom: 15px;
    height: 3em; /* 2行分くらいで高さを揃える */
    overflow: hidden;
}

.circle-link {
    display: inline-block;
    font-size: 0.8em;
    color: #e91e63;
    border: 1px solid #e91e63;
    padding: 4px 12px;
    border-radius: 20px;
}
.circle-link:hover {
    background-color: #e91e63;
    color: white;
}

/* =========================================
   フッター (Footer)
   ========================================= */
footer {
    background-color: #333;
    color: #ccc;
    text-align: center;
    padding: 30px 10px;
    margin-top: 40px;
    font-size: 0.9em;
}

/* =========================================
   スマホ対応 (Responsive)
   ========================================= */
@media (max-width: 600px) {
    header h1 { font-size: 1.5em; }
    
    /* スマホ時はハンバーガーメニューボタンを表示 */
    .hamburger {
        display: block;
    }
    
    /* スマホ時のナビゲーション */
    nav ul {
        flex-direction: column;
        display: none;
        background: white;
        padding: 10px 0;
    }
    
    /* ナビゲーションがアクティブな時は表示 */
    nav ul.active {
        display: flex;
    }
    
    nav li a { 
        border-bottom: 1px solid #f0f0f0;
        padding: 15px;
    }
    
    main { padding: 0 15px; }
    section { padding: 20px; }
    
    th, td {
        display: block;
        width: auto;
    }
    th {
        background-color: #e91e63;
        color: white;
    }
}

/* ロゴとキービジュアルの調整 */

.keyvisual {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}

.keyvisual img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* スマホ表示での調整 */
@media (max-width: 600px) {
    .keyvisual {
        margin-bottom: 20px;
    }
}