.data {
	font-size: 10px;
}
.onairback {
	background-image: url(images/dou2003_onairback.gif);
	background-repeat: repeat-y;
	background-position: left;
}
.onair {
	font-size: 15px;
}
.onair2 {
	margin:5px 10px 0px 10px;
	border-radius: 5px;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	background: #fff;
	width: 96%;
	height: 100%;
}
.onair3 {
	font-size: 15px;
		margin:5px 5px 5px 5px;
		padding:3px 3px 3px 3px;
}
.info {
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1pt;

}
.linkinfo {
	font-family: "Geneva", "Arial", "Helvetica", "sans-serif";
	font-size: 13px;
	font-weight: bold;
}
.diary {
	font-size: 12px;

}
.logoback {
	background-image: url(images/dou2003_logoback.gif);
	background-repeat: repeat-y;
	background-position: right;
}
.diary2 {
	font-size: 16px;
}
.diary3 {
	padding:3px 10px 10px 20px;
	width:400px;
}
.comback {
	background-image: url(images/dou_2003_back.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
.titile {
	font-family: "Geneva", "Arial", "Helvetica", "sans-serif";
	font-size: 16px;
	font-style: normal;
	font-weight: bold;
}
.title2 {
	font-size: 15px;
	line-height: 22px;

}
.faqmain {
	font-size: 14px;
}
.topback {
	background-attachment: scroll;
	background-image: url(images/dou_top2005_Back.gif);
	background-repeat: no-repeat;
	background-position: left top;
}
.offbody1 {
	width:640px;
	margin-left:auto;
	margin-right:auto;
}
.offbody2 {
	font-size: 12px;
		margin:5px 5px 5px 5px;
		padding:3px 3px 3px 3px;
}	
.midashi1 {
	height:auto;
	background-color:#FA9441;
	padding-left:5px;
}
.midashi2 {
    width: auto;            /* 615px から auto に変更（親要素いっぱいに広がる） */
    box-sizing: border-box; /* 内側の余白を含んだ計算にする */
    height: auto;
    background-color: #796A6A;
    padding: 4px 2px 4px 4px;
    font-size: 15px;
    font-weight: bold;
    color: white;
    text-align: left;
}
/* --- 【追加】中見出し（イベント内の詳細用）用の調整 --- */
/* オレンジの背景を「左側の太い縦線」に変化させます */
.sub-box .midashi1 {
    background-color: transparent; /* 背景のオレンジを透明に */
    border-left: 6px solid #FA9441; /* 代わりに左側に太いオレンジの線を引く */
    padding-left: 0;                /* 余白の調整 */
}

/* 茶色の背景を無くし、文字色を落ち着いた茶色に変更します */
/* --- [修正] 中見出しの横幅固定も解除します --- */
.sub-box .midashi2 {
    background-color: transparent; 
    color: #796A6A;                
    padding: 4px 0 4px 8px;        
    border-bottom: 1px solid #E0DCDA; 
    width: auto;            /* 609px から auto に変更 */
    box-sizing: border-box; /* 追記 */
}

/* ==========================================================================
   【共通】画像の下に生まれる数ピクセルの隙間を強制的に消去する
   ========================================================================== */
table img {
    display: block;
    vertical-align: bottom;
}

/* =====================================================
   1. イベントタイトル（PC基準スタイル）
===================================================== */
.sticky-event-header{
    position:relative;
    background:#FA9441;
    margin-bottom:15px;
}

/* タイトル */
.sticky-event-header .midashi2{
    background:#796A6A;
    color:#fff;
    padding:4px 12px 4px 4px; 
    font-size:15px;
    font-weight:bold;
    line-height:1.5; /* お知らせ見出しと高さを完全同期 */
}

/* PCではボタン非表示 */
.menu-jump-btn{
    display:none;
}

/* PCではスマホ専用の改行タグを無効化（1行で表示） */
.sp-br {
    display: none;
}

/* ==========================================================================
   2. 【共通】イベント内メニュー（PC用の4列配置・ベーススタイル）
   ========================================================================== */
.event-submenu {
    list-style: none;
    margin: 20px auto;
    padding: 0;
    width: 600px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px; /* セル同士の間隔 */
    box-sizing: border-box;
}

.event-submenu li {
    width: calc(25% - 1.5px); /* 4列に均等割り付け */
    background-color: #E3C7B7;
    border: 1px solid #796A6A; /* 枠線をメニュー単体に施すことで、空スペースのベタ塗りを防止 */
    box-sizing: border-box;
    text-align: center;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    transition: background-color 0.2s ease; /* ホバー時の変化を滑らかに */
}

/* PCでマウスを載せたときの視覚効果 */
.event-submenu li:hover {
    background-color: #ebd7cb;
}

.event-submenu li a {
    color: #0000EE; /* リンクの標準色 */
    text-decoration: underline;
    font-size: 12px;
    display: block;
    width: 100%;
}

/* =====================================================
   3. イベント切り替えメニュー全体の囲み枠（PC用）
===================================================== */
.event-menu-container {
    width: 600px;                      /* PCのメインコンテンツ幅（600px）に合わせる */
    margin: 25px auto;
    padding: 20px 24px;
    border: 2px solid #FA9441;         /* テーマカラーのオレンジの太枠 */
    border-radius: 16px;               /* 美しい角丸 */
    background-color: #ffffff;         /* 内側は清潔感のある白背景 */
    box-shadow: 0 6px 15px rgba(250, 148, 65, 0.08); /* ほんのりオレンジの影 */
    box-sizing: border-box;
}

/* 案内テキスト */
.event-menu-instruction {
    font-size: 13px !important;
    color: #444444 !important;
    text-align: center !important;
    margin: 0 0 16px 0 !important;
    font-weight: bold !important;
    line-height: 1.5 !important;
}

/* タブを横並びにする親要素 */
.event-menu {
    display: flex !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 個々のボタン（通常・未選択の状態） */
.event-menu .tab-link {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 4px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #555555 !important;
    text-decoration: none !important;
    background-color: #f4f0ed !important; /* 落ち着いた極薄のベージュ */
    border: 1px solid #d0c2b9 !important; /* 目立ちすぎない薄い枠線 */
    border-radius: 6px !important;        /* 緩やかな角丸 */
    text-align: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;

    /* 【PC版はみ出し対策】 */
    min-width: 0 !important;             /* ボタン幅を縮めて均等にするための記述 */
    word-break: break-all !important;     /* 文字数が多くても枠内で自動改行させる */
}

/* 通常時のボタンにマウスを乗せたとき */
.event-menu .tab-link:hover {
    background-color: #ebd7cb !important; /* 少し濃いベージュにして反応を返す */
    color: #333333 !important;
    border-color: #bfaea5 !important;
}

/* アクティブ（現在選択中）のボタン */
.event-menu .tab-link.active {
    background: linear-gradient(135deg, #ffaa66 0%, #fa9441 100%) !important; /* オレンジの鮮やかなグラデーション */
    color: #ffffff !important;
    border-color: #e07b28 !important;
    box-shadow: 0 3px 6px rgba(250, 148, 65, 0.25) !important; /* アクティブボタンのみ少し浮き立たせる */
}

/* =====================================================
   4. プランB：CSSで再現する「ぷっくり立体3Dボタン」（スリム調整版）
===================================================== */
.css-3d-btn {
    display: block;
    width: 80%;               /* スマホでの横幅に少し余裕を持たせました */
    max-width: 240px;         /* 最大横幅を 240px に縮小 */
    margin: 20px auto;
    padding: 8px 10px;        /* 上下パディングを 8px にして縦幅をスリム化 */
    text-align: center;
    text-decoration: none !important;
    
    background: linear-gradient(to bottom, #b4dfaa 0%, #82b977 40%, #588e50 100%);
    border: 2px solid #3d6338; 
    border-radius: 30px;       
    
    box-shadow: 
        0 3px 6px rgba(0, 0, 0, 0.25), 
        inset 0 3px 3px rgba(255, 255, 255, 0.6), 
        inset 0 -3px 5px rgba(0, 0, 0, 0.2);
    
    box-sizing: border-box;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    cursor: pointer;
}

/* ボタン内のテキスト */
.css-3d-btn span {
    font-size: 16px;          
    font-weight: 900;
    color: #2c442a;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    letter-spacing: 1px;
    display: inline-block;
    line-height: 1.2;
    
    text-shadow: 
        1.5px 1.5px 0 #ffffff, -1.5px -1.5px 0 #ffffff, 1.5px -1.5px 0 #ffffff, -1.5px 1.5px 0 #ffffff,
        1.5px 0px 0 #ffffff, -1.5px 0px 0 #ffffff, 0px 1.5px 0 #ffffff, 0px -1.5px 0 #ffffff,
        2px 2px 2px rgba(0, 0, 0, 0.5);
}

/* クリック時の沈み込み */
.css-3d-btn:active {
    transform: translateY(2px); 
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.2), 
        inset 0 3px 3px rgba(255, 255, 255, 0.4),
        inset 0 -3px 5px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   5. スマホ固定ヘッダー用：ドロップダウンメニュー
   ========================================================================== */
.menu-dropdown {
    position: relative;
    display: inline-block;
    margin: 0 !important; 
    padding: 0 !important;
    line-height: 1 !important;
}

.menu-dropdown summary::-webkit-details-marker {
    display: none;
}
.menu-dropdown summary {
    list-style: none;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown-content {
    position: absolute;
    right: 0;
    top: calc(100% + 8px); 
    background: #ffffff;
    border: 1px solid #796A6A;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 10000;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    
    transform: translateY(-10px);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu-dropdown[open] .dropdown-content {
    transform: translateY(0);
    opacity: 1;
}

.dropdown-content a {
    color: #333333 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    text-align: left !important;
    display: block !important;
    line-height: 1.4 !important;
    transition: background-color 0.2s;
}

.dropdown-content a:hover,
.dropdown-content a:active {
    background-color: #ebd7cb !important;
}

.dropdown-divider {
    height: 1px;
    background-color: #ebd7cb;
    margin: 6px 0;
}

.dropdown-title {
    font-size: 11px !important;
    color: #888888 !important;
    padding: 4px 16px !important;
    text-align: left !important;
    font-weight: bold !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* ==========================================================================
   6. 【スマートフォン・タブレット用】画面横幅が800px以下の場合（※最下部へ配置）
   ========================================================================== */
@media screen and (max-width:800px){

    /* スマホ時のみ改行タグを有効化 */
    .sp-br {
        display: block !important;
    }

    /* --- 大枠の固定幅を解除し、スマホ画面幅にフィットさせる --- */
    table, .offbody1 {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .offbody1 {
        padding: 0 10px !important;
    }

    /* --- 見出しの追随設定 --- */
    .sticky-event-header {
        position: relative;
        transition: .25s;
    }

    .sticky-event-header.fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100% !important;
        margin: 0;
        z-index: 9999;
        box-shadow: 0 2px 8px rgba(0,0,0,.25);
        box-sizing: border-box !important; 
        
        padding-left: 5px !important; 
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background: #FA9441 !important; 
    }

    .sticky-event-header .midashi2 {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        background: #796A6A !important;
        padding: 4px 12px 4px 4px !important; 
        width: 100% !important;
        box-sizing: border-box !important;
        line-height: 1.5 !important;
    }

    .sticky-event-header .midashi2 > a:not([href]) {
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* 「メニュー」へ戻るジャンプボタン */
    .menu-jump-btn {
        display: flex !important; 
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: #E3C7B7;
        color: #333;
        font-size: 11px; 
        font-weight: bold;
        border-radius: 4px;
        white-space: nowrap;

        opacity: 0;
        max-width: 0;
        padding: 0 !important; 
        margin-left: 0 !important;
        overflow: hidden;
        pointer-events: none;
        line-height: 1 !important; 

        transition: opacity 0.3s ease, max-width 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    }

    .sticky-event-header.fixed .menu-jump-btn {
        opacity: 1;
        max-width: 100px;
        padding: 4px 10px !important; 
        margin-left: 10px !important;
        pointer-events: auto;
    }

    .sticky-event-header.fixed + .event-submenu {
        margin-top: 58px;
    }

    /* --- 【スマホ用】イベント切り替えメニュー全体の囲み枠と2列対応 --- */
    .event-menu-container {
        width: 100% !important;
        margin: 15px auto !important;
        padding: 12px 10px !important;
        border-radius: 12px !important; 
        box-shadow: 0 3px 8px rgba(250, 148, 65, 0.05) !important;
        box-sizing: border-box !important;
    }

    .event-menu-instruction {
        font-size: 11px !important; 
        margin-bottom: 10px !important;
        line-height: 1.5 !important; /* 改行された時の行間を少し調整 */
        text-align: center !important;
        display: block !important;
    }

    .event-menu {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        gap: 6px !important; 
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    .event-menu .tab-link {
        flex: none !important;  
        width: calc(50% - 3px) !important; /* スマホ時に確実に2列へ上書き */
        font-size: 11px !important;        
        padding: 11px 0 !important;
        margin-bottom: 0 !important; 
        box-sizing: border-box !important;
        text-align: center !important;
        border-radius: 4px !important; 
        
        /* スマホ用はみ出し・テキスト崩れ防止 */
        min-width: 0 !important;
        word-break: break-all !important;
    }

    /* --- イベント内メニュー（スマホ用の2列カードデザイン） --- */
    .event-submenu {
        width: 100% !important;
        gap: 6px !important;
        border: none !important;
        background-color: transparent !important;
        margin: 15px auto !important;
        scroll-margin-top: 60px !important; 
    }

    .event-submenu li {
        width: calc(50% - 3px) !important;
        background-color: #E3C7B7 !important;
        border: 1px solid #d4b09c !important;
        border-radius: 4px !important;
        margin-bottom: 0 !important;
        min-height: 48px !important;
        padding: 10px 6px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    }

    .event-submenu li a {
        font-size: 12px !important;
        text-decoration: none !important;
        color: #333333 !important;
    }

    /* --- 【スマホ用隙間バグ対策】 --- */
    table, tr, td {
        border-spacing: 0 !important;
        border-collapse: collapse !important;
    }

    table img {
        width: 100% !important;
        height: auto !important;
        vertical-align: bottom !important;
    }
    
    td {
        line-height: 0 !important;
        font-size: 0 !important;
    }
    
    /* 文字の復元 */
    .offbody2, 
    .offbody2 td, 
    table[width="600"] td, 
    .midashi2 {
        line-height: 1.5 !important;
        font-size: 12px !important;
    }
    
    .midashi2 {
        font-size: 15px !important;
    }

    /* ページ内ジャンプの余白確保 */
    a[name] {
        display: inline-block !important; 
    }
    [id], a[name], h2, h3, h4, .midashi3 {
        scroll-margin-top: 85px !important; 
    }
}