@charset "UTF-8";
/* CSS Document */
/* ==========================================================================
   ページ全体の背景色（温かみのあるベージュグレー）
   ========================================================================== */
body {
    /* ★赤みと黄色みをわずかに含んだ、上品なベージュグレー */
    background-color: #f4f1ea !important; 
}

/* もしコンテンツの枠（#container）にも白い背景がついている場合の調和用 */
#container {
    background-color: transparent !important; /* 背景を透過させてbodyの色を出す */
}
/* ==========================================================================
   2. ページ全体の中央寄せ
   ========================================================================== */
#contents .wrapper {
    max-width: 900px;
    margin: 0 auto !important;
    float: none !important;
    padding: 20px 0 40px; 
}

/* ヘッダーとの隙間調整 */
#contents {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   3. チラシセクション
   ========================================================================== */
#chirashi-section {
    text-align: center;
    margin-bottom: 40px;
}
.chirashi-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}
.chirashi-info {
    font-size: 0.9rem;
    color: #666;
}
.chirashi-area img {
    max-width: 100%;
    height: auto;
    margin-top: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* ==========================================================================
   4. 見出し・レイアウト（共通）
   ========================================================================== */
/* 開催要項などの大きなベタ見出し */
.main-section-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;              /* 文字は白のまま */
    
    /* ★背景を落ち着いたディープネイビーに変更 */
    background: #1a365d; 
    
    padding: 12px 10px;
    margin: 50px auto 25px;
    border-radius: 4px;
    max-width: 800px;
}

/* 今後使うかもしれないサブ見出し（左側に縦線があるタイプ） */
.category-sub-title {
    text-align: left;
    font-size: 1.2rem;
    font-weight: bold;
    color: #333;
    
    /* ★左の縦線を少し明るいブルーに変更 */
    border-left: 6px solid #2b6cb0; 
    
    /* ★下線の薄い色もブルーグレー系に変更して調和 */
    border-bottom: 1px solid #cbd5e0; 
    
    padding: 4px 12px;
    margin: 35px auto 15px;
    max-width: 800px;
}

/* ==========================================================================
   5. 事業所リスト（テーブル）
   ========================================================================== */
.eventTable {
    width: 95%;
    max-width: 800px;
    margin: 0 auto 30px;
    border-collapse: collapse;
    border: 1px solid #ccc;
    table-layout: fixed; 
    font-size: 0.95rem;
    background-color: #fff;
}
.eventTable caption {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 6px 8px;
    text-align: center;
    color: #fff;
}
.eventTable th {
    background-color: #eee;
    border: 1px solid #ccc;
    padding: 6px 10px;
    text-align: center;
}
.eventTable td {
    border: 1px solid #ccc;
    padding: 5px 12px;
    vertical-align: middle;
    word-break: break-all;
    color: #333 !important;
    text-align: left !important;
}
.col-name { 
    width: 30% !important; 
}
.col-address { 
    width: 70% !important; 
}

/* 表示制御用 */
.sp-only {
    display: none;
}

/* ==========================================================================
   6. 開催要項（PDFチラシ並び）＆ 参加申込（ボタン）
   ========================================================================== */
.guide-info {
    text-align: center;
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.guide-list {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 30px auto;
    max-width: 800px;
}
.guide-item {
    flex: 1;
    max-width: 380px; /* 横並び時のチラシ最大幅を制限 */
    margin: 0;
	position: relative; /* 文字を画像の上に載せるための基準 */
    display: inline-block;
}
.guide-item img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ccc;
    transition: all .3s ease;
}

.guide-item:hover img {
    opacity: 0.8;
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.guide-item a {
    display: block;
    cursor: pointer;
}

.guide-label {
    position: absolute;
    top: 40%;
    left: 50%;         /* 基準を真ん中に */
    transform: translateX(-50%); /* 自身の幅の半分だけ左に戻して完全に中央揃え */
    z-index: 10;        /* 画像の手前に出す */
    
    /* 100%ゴシック体を指定 */
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 1.0rem;
    font-weight: bold;
    white-space: nowrap; /* 文字を横一桁でキープ */
    
    /* デザイン：落ち着いた紺背景に白文字 */
    background-color: rgba(16, 36, 62, 0.9); /* 深いブルー（不透明度90%） */
    color: #ffffff;
    padding: 6px 16px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* 文字をクッキリ見せるための軽い影 */
}
/* ダウンロードボタン */
.download-btn {
    text-align: center;
    margin-top: 40px;
}
.download-btn a {
    display: inline-block;
    padding: 18px 45px;
    background: #2b6cb0;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 1.1rem;       /* 文字を少し大きく */
    font-weight: bold;
    transition: .3s;
}
.download-btn a:hover {
    opacity: .8;
	background: #1a365d;
}

/* ==========================================================================
   7. レスポンシブ対応（スマホ表示調整）
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* チラシを縦並びに変更 */
    .guide-list {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    .guide-item {
        width: 100%;
        max-width: 500px;
    }
}

@media screen and (max-width: 640px) {
    #contents .wrapper {
        padding-top: 5px !important;
        padding-bottom: 30px;
    }

    #chirashi-section {
        margin-top: -60px !important;
        padding-top: 0 !important;
    }
    .chirashi-title {
        margin-top: 0 !important;
        font-size: 1.1rem;
    }

    header, #header, .header-inner, nav, #nav {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .main-section-title { 
        font-size: 1.3rem; 
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .eventTable { 
        font-size: 0.85rem; 
        width: 94% !important;
        margin: 0 auto 20px !important;
    }
    .col-name { width: 45% !important; }
    .col-address { width: 55% !important; }

    .sp-only {
        display: inline;
    }
}
/* ==========================================================================
   ページタイトル（共通CSSのh1ルールをすり抜けて完全中央寄せ）
   ========================================================================== */
.page-title-area {
    width: 100%;
    max-width: 900px; /* .wrapperの幅（900px）に合わせる */
    margin: 40px auto 20px;
    padding: 0 15px;
    text-align: center; /* 中身を中央寄せ */
    box-sizing: border-box;
    float: none;
    clear: both;
}

.main-page-title {
    /* 画面幅に合わせて文字サイズを自動伸縮 */
    font-size: clamp(1.1rem, 4.5vw, 2.2rem); 
    font-weight: bold;
    
    /* ★落ち着いた深いネイビー（文字色） */
    color: #1a365d; 
    
    /* 1行表示＋中央配置の維持 */
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
    white-space: nowrap; /* 自動改行させない */
    text-align: center;
    float: none;
    
    /* 下線との隙間 */
    padding-bottom: 15px; 
    
    /* ★文字の長さに連動する下線（少し明るく引き締まったブルー） */
    border-bottom: 4px solid #2b6cb0; 
}

/* スマホ表示の調整（余白調整のみ） */
@media screen and (max-width: 640px) {
    .page-title-area {
        margin: 25px auto 10px;
    }
}