@charset "utf-8";
/**
 * ============================================================================
 * com-sections-kito-layout.css
 * ============================================================================
 * 
 * 【目的】
 * ご祈祷案内トップページの3カラムレイアウトを提供。
 * 神前祈祷、外祭、人生儀礼の3つのカテゴリを横並びで表示。
 * 
 * 【使用ページ】
 * - /kito/index.php (body_class: kito) のみ
 * 
 * 【依存関係】
 * - 必須: 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. 3カラムレイアウト (#kitousyurui)
 *    - 幅: 660px（固定）
 *    - 角丸: 10px
 *    - 影付き
 * 
 * 2. 各カラム
 *    - #sinzen: 神前祈祷（250px、黄色背景）
 *    - #gaisai: 外祭（217px、水色背景）
 *    - #jinsei: 人生儀礼（193px、ピンク背景）
 * 
 * 3. 等高カラム
 *    - padding-bottom: 32767px
 *    - margin-bottom: -32767px
 *    → 3つのカラムの高さが揃う
 * 
 * 4. h3 スタイル
 *    - 玉串背景画像
 *    - 枠線なし
 * 
 * 【レスポンシブブレークポイント】
 * - 1062px以下: 
 *   - 幅: 80%（可変）
 *   - 各カラム: width 90%、max-width 540px
 *   - 縦並びレイアウトに変更
 * 
 * 【注意事項】
 * - 等高カラムテクニック（padding-bottom/margin-bottom）を使用
 * - overflow: hidden が #kitousyurui に必須
 * - レスポンシブ時は float が解除され、縦並びになる
 * - ミニファイ後は sections-kito-layout.css にリネームされます
 * 
 * 【変更履歴】
 * 2025-10-20: kobetu.css から分割作成
 * 
 * ============================================================================
 */


/* ============================================================================
   #kitousyurui - 3カラムコンテナ
   ----------------------------------------------------------------------------
   【構造】
   #kitousyurui（コンテナ、660px幅）
   ├─ #sinzen（神前祈祷、250px、黄色）
   ├─ #gaisai（外祭、217px、水色）
   └─ #jinsei（人生儀礼、193px、ピンク）
   
   【等高カラムテクニック】
   各カラムに padding-bottom: 32767px と margin-bottom: -32767px を設定。
   親要素の overflow: hidden と組み合わせることで、
   3つのカラムの高さが自動的に揃います。
   
   【デザイン】
   - 角丸: 10px
   - 枠線: #f36 2px groove（立体的）
   - 影: 1px 1px 5px #444
   
   【レスポンシブ】
   1062px以下: width 80%（可変）に変更
   ============================================================================ */

div#kitousyurui{
  margin:1em auto;
  text-align:center;
  overflow:hidden;
  border-radius:10px;
  border:2px groove #f36;
  width:660px;
  font-size:0.9em;
  box-shadow:1px 1px 5px #444;
}
div#kitousyurui h4{margin:0
}
div#syugokitou{
 clear:both;
}


/* ============================================================================
   等高カラムの設定
   ----------------------------------------------------------------------------
   各カラムに padding-bottom: 32767px と margin-bottom: -32767px を設定。
   
   【仕組み】
   1. padding-bottom: 32767px で下に大きな余白を作る
   2. margin-bottom: -32767px で余白をキャンセル
   3. overflow: hidden（親要素）で余分な部分を隠す
   
   → 結果: 一番高いカラムに合わせて全てのカラムの高さが揃う
   ============================================================================ */

div#kitousyurui div{
 padding-bottom: 32767px;
 margin-bottom:-32767px;
}
div#kitousyurui p{
 clear:both;
 background-color:yellow;
}


/* ============================================================================
   #kitousyurui ul - リストスタイル
   ----------------------------------------------------------------------------
   3カラム内のリストのスタイル調整。
   ============================================================================ */

#body #kitousyurui ul{
 list-style:none;
 text-align:left;
 margin-left:2em;
 line-height:1.4;
 list-style-type:disc;
}


/* ============================================================================
   #sinzen - 神前祈祷カラム（1列目）
   ----------------------------------------------------------------------------
   【内容】
   - 厄除け
   - 交通安全
   - 工事安全
   - 初宮詣
   - 七五三
   など
   
   【スタイル】
   - 幅: 250px
   - 背景色: #ffffdd（淡い黄色）
   - 背景画像: /i/grad_y.png（グラデーション）
   - float: left（左に配置）
   
   【レスポンシブ】
   1062px以下: width 90%、max-width 540px
   ============================================================================ */

div#sinzen{
 float:left;
 width:250px;
 background-color:#ffffdd;
 background-image:url('/i/grad_y.png');
 background-position:top;
}


/* ============================================================================
   #gaisai - 外祭カラム（2列目）
   ----------------------------------------------------------------------------
   【内容】
   - 地鎮祭
   - 竣功祭
   - 新宅祭
   - 井戸・樹木祓い
   など
   
   【スタイル】
   - 幅: 217px
   - 背景色: #ddffff（淡い水色）
   - 背景画像: /i/grad_b.png（グラデーション）
   - float: left（左に配置）
   
   【レスポンシブ】
   1062px以下: width 90%、max-width 540px
   ============================================================================ */

div#gaisai{
 float:left;
 width:217px;
 background-color:#ddffff;
 background-image:url('/i/grad_b.png');
 background-position:top;
}


/* ============================================================================
   #jinsei - 人生儀礼カラム（3列目）
   ----------------------------------------------------------------------------
   【内容】
   - 安産祈願
   - 初宮詣
   - 七五三
   - 十三詣り
   - 成人奉告祭
   - 結婚式
   など
   
   【スタイル】
   - 幅: 193px
   - 背景色: #ffddff（淡いピンク）
   - 背景画像: /i/grad_p.png（グラデーション）
   - float: left（左に配置）
   
   【レスポンシブ】
   1062px以下: width 90%、max-width 540px
   ============================================================================ */

div#jinsei{
 float:left;
 width:193px;
 background-color:#ffddff;
 background-image:url('/i/grad_p.png');
 background-position:top;
}


/* ============================================================================
   レスポンシブ: 1062px以下
   ----------------------------------------------------------------------------
   【変更内容】
   1. #kitousyurui の幅を 80%（可変）に
   2. 各カラムの幅を 90%、max-width 540px に
   
   → 結果: 3カラムが縦並びになり、タブレット・スマホで読みやすくなる
   ============================================================================ */

@media only screen and (max-width: 1062px) {
div#kitousyurui{
  margin:1em auto;
  text-align:center;
  overflow:hidden;
  border-radius:10px;
  border:2px groove #f36;
  width:80%;
  font-size:1em;
  box-shadow:1px 1px 5px #444;
}
div#sinzen,
div#gaisai,
div#jinsei{
  max-width:540px;
  width:90%;
  background-position:top;
}
}


/* ============================================================================
   各カラムの h3 スタイル
   ----------------------------------------------------------------------------
   【デザイン】
   - 幅: 100%
   - 色: #000（黒）
   - 背景画像: /i/tamagusi.png（玉串の画像）
   - 背景位置: 左中央
   - フォント: ボールド、letter-spacing: 3px
   
   【com-pages-nottop.css との関係】
   com-pages-nottop.css の h3 スタイルを上書きします:
   - border: none（枠線を削除）
   - background-image を玉串に変更
   - ::after の装飾を削除
   ============================================================================ */

#bodymain #sinzen h3,#bodymain #gaisai h3,#bodymain #jinsei h3{
  width:100%;
  color:#000;
  line-height:1.9;
  vertical-align:baseline;
  font-weight:bold;
  letter-spacing:3px;
  background-image:url('/i/tamagusi.png');
  background-position:left center;
  background-repeat:no-repeat;
  border:none;
  text-align:left;
  text-indent:0.3em;
  margin:0;
}

#bodymain #sinzen h3:after,#bodymain #gaisai h3:after,#bodymain #jinsei h3:after{background-image: none;box-shadow: none}