@charset "utf-8";
/**
 * ============================================================================
 * com-sections-kito-tables.css
 * ============================================================================
 * 
 * 【目的】
 * ご祈祷関連ページで使用するテーブルスタイル。
 * 厄年表、戌の日表、マタニティフォト見出しを提供。
 * 
 * 【使用ページ】
 * - /kito/yakuyoke.php (body_class: kito) - 厄年表
 * - /kito/anzan.php (body_class: kitotop) - 戌の日表、マタニティフォト
 * 
 * 【依存関係】
 * - 必須: com-core-reset.css, com-core-base.css, com-core-layout.css
 * - 必須: com-pages-nottop.css
 * - 推奨: com-components-common.css
 * 
 * 【読み込み順序】
 * 6番目以降（com-components-common.css の後）
 * 
 * 【主要なコンポーネント】
 * 1. 厄年表 (table.yakuyoke)
 *    - 男性用 (.hm, .m) - 青系（#bbf, #eef）
 *    - 女性用 (.hf, .f) - 赤系（#fbb, #fee）
 *    - 角丸デザイン
 *    - グラデーション背景
 *    - 本厄は em タグで強調（110%サイズ）
 * 
 * 2. 戌の日表 (table.inu)
 *    - 月と日付の2カラム構成
 *    - ピンク系の配色（#c36, #fdd）
 *    - 角丸デザイン（border-radius: 13px）
 *    - 日付は monospace フォント
 * 
 * 3. マタニティフォト見出し (h3#maternityphoto)
 *    - ピンク背景（#fdd）
 *    - 枠線なし
 * 
 * 【テーブル構造】
 * 
 * 厄年表:
 * <table class="yakuyoke">
 *   <tr class="hm"><th>本厄</th><th>前厄</th><th>後厄</th></tr>
 *   <tr class="m"><td>25歳</td><td>24歳</td><td>26歳</td></tr>
 *   <tr class="hf"><th>本厄</th><th>前厄</th><th>後厄</th></tr>
 *   <tr class="f"><td>33歳</td><td>32歳</td><td>34歳</td></tr>
 * </table>
 * 
 * 戌の日表:
 * <table class="inu">
 *   <tr><th colspan="2">戌の日カレンダー</th></tr>
 *   <tr><td class="month">1月</td><td class="day">1日、13日、25日</td></tr>
 *   <tr><td class="month">2月</td><td class="day">6日、18日</td></tr>
 * </table>
 * 
 * 【注意事項】
 * - 厄年表の em タグは font-size:110% で本厄を強調
 * - 戌の日表の .day は monospace フォント使用（日付の幅を揃えるため）
 * - テーブルの border-radius は角を丸くするため複数箇所に設定
 * - グラデーション背景はベンダープレフィックス付き（旧ブラウザ対応）
 * - ミニファイ後は sections-kito-tables.css にリネームされます
 * 
 * 【変更履歴】
 * 2025-10-20: perso.css セクション1から分割作成
 * 
 * ============================================================================
 */


/* ============================================================================
   table.yakuyoke - 厄年表
   ----------------------------------------------------------------------------
   【構造】
   男性と女性で異なる色を使用:
   - 男性: 青系（.hm ヘッダー、.m セル）
   - 女性: 赤系（.hf ヘッダー、.f セル）
   
   【デザイン】
   - 幅: 90%
   - border-spacing: 0（セル間の隙間なし）
   - 角丸: 6px（:first-child, :last-child で制御）
   - グラデーション背景: 白 → 色付き → 白
   
   【本厄の強調】
   em タグで本厄を強調表示（font-size: 110%）
   
   【使用例】
   <table class="yakuyoke">
     <tr class="hm">
       <th>本厄</th><th>前厄</th><th>後厄</th>
     </tr>
     <tr class="m">
       <td><em>25歳</em></td><td>24歳</td><td>26歳</td>
     </tr>
   </table>
   ============================================================================ */

table.yakuyoke{
 width:90%;
 margin:5px auto;
 border-spacing: 0;
}
.yakuyoke{
 line-height:1.2;
 margin:10px auto;
}


/* ============================================================================
   厄年表 - 男性用ヘッダー (.hm)
   ----------------------------------------------------------------------------
   【スタイル】
   - 背景色: #bbf（明るい青）
   - 左ボーダー: #30c（濃い青）
   - フォント: ボールド
   ============================================================================ */

.hm th{
 padding:3px 0;
 border-left:1px solid #30c;
 background-color:#bbf;
 font-weight:bold;
 vertical-align:middle;
}


/* ============================================================================
   厄年表 - 女性用ヘッダー (.hf)
   ----------------------------------------------------------------------------
   【スタイル】
   - 背景色: #fbb（明るい赤）
   - 左ボーダー: #c03（濃い赤）
   - フォント: ボールド
   ============================================================================ */

.hf th{
 padding:3px 0;
 border-left:1px solid #c03;
 background-color:#fbb;
 font-weight:bold;
 vertical-align:middle;
}


/* ============================================================================
   厄年表 - 角丸デザイン
   ----------------------------------------------------------------------------
   左上、右上、右下の角を丸くします。
   :first-child と :last-child 疑似クラスを使用。
   ============================================================================ */

.yakuyoke th:first-child {
 border-radius: 6px 0 0 6px;
 border-right:1px solid #30c;
 border-left:none;
}
tr.hf th:first-child{ border-right:1px solid #c03;
}
.yakuyoke th:last-child {
 border-radius: 0 6px 0 0;
}
.yakuyoke tr:last-child td{
 border-bottom:none;
}
.yakuyoke tr:last-child td:last-child{
 border-radius:0 0 6px 0;
}


/* ============================================================================
   厄年表 - 男性用セル (.m)
   ----------------------------------------------------------------------------
   【スタイル】
   - 文字色: #309（濃い青）
   - ボーダー: #30c（濃い青）
   - 背景: #eef（淡い青）
   - グラデーション: 白 → 淡い青 → 白（立体感）
   
   【ベンダープレフィックス】
   旧ブラウザ対応のため、複数のグラデーション構文を記述。
   ============================================================================ */

.m td{
 color:#309;
 border:solid 1px #30c;
 background-color:#eef;
 background-image: -moz-linear-gradient(top, #fff, #e6e6ff, #fff);
 background-image: -o-linear-gradient(top, #fff, #e6e6ff, #fff);
 background-image: -ms-linear-gradient(top, #fff, #e6e6ff, #fff);
 background-image: -webkit-linear-gradient(top, #fff, #e6e6ff, #fff);
 background-image: -webkit-gradient(linear,left top,left bottom,from(#fff), color-stop(0.5,#e6e6ff), to(#fff))
}


/* ============================================================================
   厄年表 - 女性用セル (.f)
   ----------------------------------------------------------------------------
   【スタイル】
   - 文字色: #903（濃い赤）
   - ボーダー: #c03（濃い赤）
   - 背景: #fee（淡い赤）
   - グラデーション: 白 → 淡い赤 → 白（立体感）
   ============================================================================ */

.f td{
 color:#903;
 border:solid 1px #c03;
 background-color:#fee;
 background-image: -moz-linear-gradient(top, #fff, #ffe6e6, #fff);
 background-image: -o-linear-gradient(top, #fff, #ffe6e6, #fff);
 background-image: -ms-linear-gradient(top, #fff, #ffe6e6, #fff);
 background-image: -webkit-linear-gradient(top, #fff, #ffe6e6, #fff);
 background-image: -webkit-gradient(linear,left top,left bottom,from(#fff), color-stop(0.5,#ffe6e6), to(#fff));}


/* ============================================================================
   厄年表 - セル基本スタイル
   ----------------------------------------------------------------------------
   【スタイル】
   - 中央寄せ
   - 幅: 30%（3カラム）
   - 上・右ボーダー: なし（ボーダーを左・下のみに統一）
   ============================================================================ */

.yakuyoke td{
 text-align:center;
 width:30%;
 border-top:none;
 border-right:none;
}


/* ============================================================================
   厄年表 - 本厄の強調
   ----------------------------------------------------------------------------
   em タグで本厄を強調表示します。
   
   【使用例】
   <td><em>25歳</em></td><!-- 本厄 -->
   <td>24歳</td><!-- 前厄 -->
   ============================================================================ */

.yakuyoke em{
 font-weight:bold;
 font-size:110%;
}


/* ============================================================================
   table.inu - 戌の日表
   ----------------------------------------------------------------------------
   【構造】
   - 月（.month）: 8%幅、中央寄せ、ピンク背景
   - 日付（.day）: 42%幅、左寄せ、monospace フォント
   
   【デザイン】
   - border-collapse: separate（セル間に隙間）
   - border-radius: 13px（角丸）
   - ボーダー: #c36（ピンク系）
   
   【フォント】
   日付部分は Consolas, Courier New などの monospace フォントを使用。
   これにより、日付の数字の幅が揃い、読みやすくなります。
   
   【使用例】
   <table class="inu">
     <tr><th colspan="2">令和7年 戌の日カレンダー</th></tr>
     <tr>
       <td class="month">1月</td>
       <td class="day">1日（水）、13日（月）、25日（土）</td>
     </tr>
   </table>
   ============================================================================ */

table.inu{
 font-size:.90rem;
 width:95%;
 margin: 10px auto;
 border-collapse:separate;
}
table.inu td,table.inu th{
 line-height:2;
 border:solid 1px #c36;
 padding:3px;border-radius:13px
}
table.inu th{
 font-weight: bold;
 color: #c36;
 font-size:120%;
 letter-spacing:2px;
 border-bottom:none;
}


/* ============================================================================
   戌の日表 - 月カラム (.month)
   ----------------------------------------------------------------------------
   【スタイル】
   - 幅: 8%
   - 中央寄せ
   - 背景色: #fdd（淡いピンク）
   - 文字色: #c36（濃いピンク）
   - フォント: ボールド
   ============================================================================ */

.inu .month{
 width: 8%;
 text-align: center;
 line-height: 20px;
 font-weight: bold;
 color: #c36;
 background-color:#fdd;
}


/* ============================================================================
   戌の日表 - 日付カラム (.day)
   ----------------------------------------------------------------------------
   【スタイル】
   - 幅: 42%
   - 左寄せ
   - 文字色: #e25（赤系）
   - フォント: monospace（Consolas, Courier New など）
   - フォントサイズ: 90%
   
   【monospace フォントの理由】
   日付の数字幅を揃えるため。
   「1日」と「25日」の見た目の幅が揃い、読みやすくなります。
   ============================================================================ */

.inu .day{
 color: #e25;
 width: 42%;
 padding-left:5px;
 font-size: 90%;
 font-family: Consolas, 'Courier New', Courier, Monaco, monospace;}


/* ============================================================================
   h3#maternityphoto - マタニティフォト見出し
   ----------------------------------------------------------------------------
   【用途】
   安産祈願ページ（/kito/anzan.php）のマタニティフォトセクション見出し。
   
   【スタイル】
   - 背景: #fdd（淡いピンク）
   - 枠線: なし
   - フォント: normal（太字なし）
   
   【com-pages-nottop.css との関係】
   com-pages-nottop.css の h3 スタイルを上書きします:
   - background: none（背景画像を削除）
   - border: none（枠線を削除）
   
   【使用例】
   <h3 id="maternityphoto">マタニティフォト</h3>
   <img src="/maternity.jpg">
   ============================================================================ */

h3#maternityphoto{
 background:none;
 font-weight:normal;
 background-color:#fdd;
 border:none;
}


/* ============================================================================
   戌の日表 - 曜日の色分け
   ----------------------------------------------------------------------------
   【用途】
   戌の日カレンダーで土曜日・日曜日を色分け表示します。
   
   【スタイル】
   - .red: 赤色（日曜日用）
   - .blue: 青色（土曜日用）
   - .inu strong.red: 日曜日を太字の赤で表示
   - .inu em.blue: 土曜日を青で表示（イタリック解除）
   
   【使用例】
   <td class="day">1日<strong class="red">（日）</strong></td>
   <td class="day">2日<em class="blue">（土）</em></td>
   ============================================================================ */

.red {
 color: red;
}

.blue {
 color: blue;
}

.inu strong.red {
 color: red;
}

.inu em.blue {
 color: blue;
 font-style: normal;
}