@charset "utf-8";
/**
 * ============================================================================
 * com-sections-access.css
 * ============================================================================
 * 
 * 【目的】
 * 交通アクセスページの専用スタイルを提供。
 * 経路案内、駐車場案内のスタイル。
 * 
 * 【使用ページ】
 * - /access/index.php (body_class: access) - 交通アクセス
 * 
 * 【依存関係】
 * - 必須: com-core-reset.css, com-core-base.css, com-core-layout.css
 * - 必須: com-pages-nottop.css
 * 
 * 【読み込み順序】
 * 8番目以降
 * 
 * 【主要な機能】
 * 1. div.keiro - 経路案内ブロック
 *    - 点線枠、角丸
 * 
 * 2. .parking テーブル - 駐車場料金表
 *    - ピンク系の配色
 * 
 * 3. div#parking - 駐車場セクション
 *    - 点線枠
 * 
 * 4. div#access - アクセスセクション
 *    - h3, h4 の特殊スタイル
 * 
 * 【レスポンシブブレークポイント】
 * - 1062px以下: 駐車場画像サイズ調整
 * 
 * 【注意事項】
 * - perso.css と kobetu.css のスタイルを統合
 * - ミニファイ後は sections-access.css にリネームされます
 * 
 * 【変更履歴】
 * 2025-10-20: perso.css セクション5 + kobetu.css から統合作成
 * 
 * ============================================================================
 */


/* ============================================================================
   div.keiro - 経路案内ブロック
   ----------------------------------------------------------------------------
   【用途】
   各交通手段からの経路を表示するブロック。
   
   【デザイン】
   - 枠線: #999 1px dashed（点線）
   - 角丸: 1em
   - マージン: 1em 3em
   
   【使用例】
   <div class="keiro">
     <h4>JR亀戸駅から</h4>
     <p>北口を出て...</p>
   </div>
   ============================================================================ */

div.keiro{
 margin:1em 3em;
 border:#999 1px dashed;
 border-radius:1em;
 padding:0.3em;
}
#bodymain div.keiro p{padding:2px;}


/* ============================================================================
   .parking テーブル - 駐車場料金表
   ----------------------------------------------------------------------------
   【用途】
   駐車場の料金や時間を表示するテーブル。
   
   【デザイン】
   - 背景色: #fee（淡いピンク）
   - 枠線: #fbb 1px solid（ピンク）
   - caption: 太字、中央寄せ
   - th: line-height 1.5em、font-size 15px、太字
   
   【使用例】
   <table class="parking">
     <caption>駐車場料金表</caption>
     <tr><th>時間</th><th>料金</th></tr>
     <tr><td>30分まで</td><td>無料</td></tr>
   </table>
   ============================================================================ */

.parking{
 background:#fee;
 margin-bottom:1em;
 margin-left:10px;
 border-collapse:collapse;
 border:#fbb solid 1px;
 color:#000;
}
.parking caption{text-align:center;font-weight:bold;padding:2px 0;}
.parking th{ line-height:1.5em;
 font-size:15px;
 padding:5px;
 font-weight:bold;
}


/* ============================================================================
   div#parking - 駐車場セクション
   ----------------------------------------------------------------------------
   【用途】
   駐車場の全体セクション。
   
   【デザイン】
   - 枠線: pink 3px dotted（太い点線）
   - マージン: 1em
   
   【レスポンシブ】
   1062px以下: table.parking 内の img を max-width 80vw に
   ============================================================================ */

div#parking{
 border:dotted 3px pink;
 margin:1em;
}

@media only screen and (max-width: 1062px) {
table.parking img{max-width: 80vw}
}


/* ============================================================================
   div#access - アクセスセクション
   ----------------------------------------------------------------------------
   【用途】
   交通アクセス全体のセクション。
   
   【h3 スタイル】
   - 上下線: #999 1px solid
   - 背景画像: /i/h4back.png（下部に点線パターン）
   - com-pages-nottop.css の h3 スタイルを上書き
   
   【h4 スタイル】
   - 下線: #000 1px solid
   - 背景: none
   - マージン: 1em 2em
   
   【使用例】
   <div id="access">
     <h3>電車でお越しの方</h3>
     <h4>JR総武線</h4>
     <p>...</p>
   </div>
   ============================================================================ */

div#access{
 margin:1em 0;
}
div#access h3{
 border:none;
 border-top:#999 solid 1px;
 border-bottom:#999 solid 1px;
 background:none;
 background-image:url('/i/h4back.png');
 background-position:bottom;
 background-repeat:repeat-x;
}
div#access h4{
 border-bottom:#000 solid 1px;
 background:none;
 margin:1em 2em;
}