@charset "utf-8";
/**
 * ============================================================================
 * com-components-common.css
 * ============================================================================
 * 
 * 【目的】
 * 複数のページで共通使用されるコンポーネントのスタイルを提供。
 * 画像装飾、お申し込みブロック、準備品リスト、式次第、コロナ対策案内など。
 * 
 * 【使用ページ】
 * - /kito/* (ご祈祷関連 - お申し込み、準備品、式次第)
 * - /event/* (年間祭事 - 画像表示)
 * - /juyo/* (授与品 - 画像表示)
 * - /sintou/* (神道とは - 画像表示、特殊スタイル)
 * - /wall.php (コロナ対策 - .koro)
 * - その他画像を使用する全ページ
 * 
 * 【依存関係】
 * - 必須: com-core-reset.css, com-core-base.css
 * - 推奨: com-pages-nottop.css または com-pages-top.css
 * 
 * 【読み込み順序】
 * 5番目以降（com-pages-* の後）
 * 
 * 【主要なコンポーネント】
 * 1. 画像スタイル
 *    - #bodymain img: 基本の枠と影
 *    - .imgcenter: 中央寄せコンテナ
 *    - .omap: レスポンシブ対応地図画像
 *    - 例外: h4内の画像、七福神画像、マタニティフォトなど
 * 
 * 2. お申し込みブロック (.entry)
 *    - ご祈祷申し込みフォームの装飾
 *    - 背景画像: /i/kito/entry.png
 *    - strong タグで重要部分を強調
 * 
 * 3. FAX申込用紙 (ul.faxpaper)
 *    - FAX申込用のリストスタイル
 *    - 点線枠、内側の影
 * 
 * 4. 準備品リスト (.junbi)
 *    - 外祭の準備品を表示するスタイル
 *    - 点線枠、内側の影
 * 
 * 5. 式次第 (.sikisidai)
 *    - 祭事の式次第を表示するスタイル
 *    - 正楷書体フォント
 *    - 黄色背景、角丸
 * 
 * 6. 神道ページ専用スタイル (body[id^="sintou"])
 *    - 画像枠なし
 *    - 中央寄せ
 * 
 * 7. コロナ対策 (.koro)
 *    - 感染症対策案内のスタイル
 *    - グレー枠
 * 
 * 【レスポンシブブレークポイント】
 * - 500px: マタニティフォト画像サイズ調整
 * - 1062px: .entry, ul.faxpaper, .sikisidai, .junbi の余白調整
 * 
 * 【注意事項】
 * - 画像スタイルは #bodymain 内の img に適用されます
 * - 特定の画像（h4内、about/7-*など）は例外的に枠・影なし
 * - .imgcenter は h4 がある場合の画像センタリングに使用
 * - .omap はレスポンシブ対応が必要な大きな画像に使用
 * - ミニファイ後は components-common.css にリネームされます
 * 
 * 【変更履歴】
 * 2025-10-20: perso.css セクション0とセクション12から統合・作成
 * 
 * ============================================================================
 */


/* ============================================================================
   基本スタイル調整
   ----------------------------------------------------------------------------
   特定のページやセクションで h2 を左寄せにする必要がある場合の調整。
   ============================================================================ */

#syugokitou,#nenkan h2,#body #bodymain h2{
 text-align:left;
}/*センター寄せした場合h2の修正*/

.imgcenter{
 text-align:center;
}/*imgをセンター寄せするブロック。h4がある頁はこれを使用するしか無い*/

td.fancyTitle{/* ファンシーズームの調整 */
vertical-align:middle; }


/* ============================================================================
   画像の基本スタイル
   ----------------------------------------------------------------------------
   #bodymain 内の全ての画像に枠と影を適用し、統一感を持たせます。
   
   【基本スタイル】
   - 枠線: #ccc 1px solid
   - 影: 右下と左の二重影
   - パディング: 3px
   - マージン: 1em
   
   【使用例】
   <div id="bodymain">
     <img src="/image.jpg"><!-- 自動的に枠と影が付く -->
   </div>
   ============================================================================ */

#bodymain img{
 border:#ccc solid 1px;
 margin:1em;
 display:inline-block;
 padding:3px;
 vertical-align:baseline;
 box-shadow: 2px 2px 5px 0 #000, -2px 0 5px #aaa;
 text-align: center;
}


/* ============================================================================
   .imgcenter - 画像中央寄せコンテナ
   ----------------------------------------------------------------------------
   【用途】
   h4 がある場合の画像センタリング、バナー画像などに使用。
   
   【スタイル】
   - 枠線: #79b ridge 5px（立体的）
   - 影: より強い影
   - パディング: 2px
   
   【使用例】
   <div class="imgcenter">
     <img src="/banner.jpg">
   </div>
   ============================================================================ */

.imgcenter img{/* バナーなどに　使われているクラス*/
 border:#79b ridge 5px;
 margin:1em 3px;
 box-shadow: 5px 5px 5px 0 #777, -2px 0 5px #aaa;
 display:inline-block;
 padding:2px;
 vertical-align:baseline;
}


/* ============================================================================
   画像スタイルの例外ルール
   ----------------------------------------------------------------------------
   特定の画像は枠や影を適用しない、または特別なスタイルを適用します。
   ============================================================================ */

/* バナー画像・.nob クラス: 枠なし影あり */
#bodymain a img[src*="/b_"],#bodymain .imgcenter img.nob{
 border:none;
 margin:0 3px 1em 3px;
 box-shadow: 5px 5px 5px 0 #777, -2px 0 5px #aaa;
 padding:2px;
}/*リンク用バナー・h4ある頁のnobクラスには 枠なし影ありの指定*/


/* ============================================================================
   .omap - レスポンシブ対応地図画像
   ----------------------------------------------------------------------------
   【用途】
   アクセスマップなどの大きな画像をレスポンシブ対応させるクラス。
   
   【スタイル】
   - 幅: 80%（デフォルト）
   - 最大幅: 600px
   
   【レスポンシブ】
   1062px以下: max-width 100vw（画面幅いっぱい）
   
   【使用例】
   <div class="imgcenter">
     <img src="/map.jpg" class="omap">
   </div>
   ============================================================================ */

#bodymain .imgcenter img.omap,#bodymain .imgcenter img.nob,img.omap{
  width:80%;
  height:auto;
  max-width:600px;
}/* オリジナルマップ用画像の設定。大きな画像をスマホ画面などで表示させるときには.omapを追加する。 */
@media only screen and (max-width: 1062px) {#bodymain .imgcenter img.omap,img.omap{max-width:100vw;
}
}


/* ============================================================================
   枠・影ともになしの画像
   ----------------------------------------------------------------------------
   以下の画像は枠と影を適用しません:
   1. h4 内の画像（七福神など）
   2. about/7 で始まる画像（七福神の写真）
   3. マタニティフォト（#maternityphoto の後の画像）
   ============================================================================ */

#bodymain h4 img,/*about*/
#bodymain img[src*="about/7"],/*七福神の写真など*/
#kitotop #bodymain #maternityphoto~img{ border:none; 
 box-shadow:none;
}/*枠影ともになしの指定マタニティフォト他*/
@media only screen and (max-width: 500px) {#kitotop #bodymain h3#maternityphoto+img{max-width: 95vw;margin:auto 0;

	}}

#bodymain img[src*="about/7-"]{ margin:0;
 padding:0;
}/*七福神の写真などは余白をなくさないといけない*/


/* ============================================================================
   #syugokitou h4 - 守護祈祷の h4
   ----------------------------------------------------------------------------
   玉串の背景画像を追加します。
   
   【背景】
   /i/tamagusi.png
   ============================================================================ */

#bodymain #syugokitou h4{
 background-image:url('/i/tamagusi.png');
 background-repeat:no-repeat;
 background-position:.2em;
 padding-left:2.5em;

}
@media only screen and (max-width: 1062px) {#bodymain #syugokitou h4{
 margin-left:.5em;
}
}


/* ============================================================================
   外祭の画像調整
   ----------------------------------------------------------------------------
   外祭の個別ページでフロート対応のためのマージン調整。
   
   【レスポンシブ】
   1062px以下: マージンを縮小
   ============================================================================ */

#kitogaisai .gaisaikobetu img{
 margin:5em 1em 3em;
}/*外祭の個別ページのフロート対応にmargin調整 ちょい下にモバイル設定あり*/


/* ============================================================================
   .entry - お申し込みブロック
   ----------------------------------------------------------------------------
   【用途】
   ご祈祷申し込みフォーム、申込案内などに使用。
   
   【デザイン】
   - 背景色: #dbfddc（淡い緑）
   - 背景画像: /i/kito/entry.png（左上）
   - 枠線: #999 1px solid
   - フォント: ボールド
   
   【strong タグ】
   .entry 内の strong タグは特別な強調スタイル:
   - 色: #f00（赤）
   - 下線: #ff9 3px solid（黄色）
   - 背景: 黄色マーカー風
   
   【レスポンシブ】
   1062px以下:
   - 背景色変更（#fddbdc）
   - マージン縮小
   - パディング調整
   
   【使用例】
   <div class="entry">
     <p>お申し込みは<strong>事前予約</strong>が必要です。</p>
   </div>
   ============================================================================ */

.entry {
 /*お申し込みというブロックちょい下にモバイル*/
 background-color: #dbfddc;
 border: 1px solid #999;
 background-image: url('/i/kito/entry.png');
 background-position: left top;
 background-repeat: no-repeat;
 margin: 0 3em;
 color: #000;
 font-weight: bold;
}
.entry strong{
 color:#f00;
 font-weight: bold;
 border-bottom: 3px #ff9 solid;
 background: linear-gradient(transparent 50%,rgba(255,255,90,.84) 50%);
}/*お申し込みというブロック*/


/* ============================================================================
   ul.faxpaper - FAX申込用紙
   ----------------------------------------------------------------------------
   【用途】
   FAX で申し込む際の記入事項リスト。
   
   【デザイン】
   - 点線枠: #779 1px dashed
   - 内側の影: inset
   - リストスタイル: none
   
   【レスポンシブ】
   1062px以下:
   - マージン auto（中央寄せ）
   - パディング調整
   - 枠線を dotted に変更
   - フォントサイズ 90%
   
   【使用例】
   <ul class="faxpaper">
     <li>お名前</li>
     <li>ご住所</li>
     <li>電話番号</li>
   </ul>
   ============================================================================ */

ul.faxpaper{
 margin:1em 5em;
 margin-right:1em;
 line-height:1.5;
 padding:9px;
 border:#779 dashed 1px;
 box-shadow:inset 0px 0px 20px -5px #f55;
 list-style:none;
}
@media only screen and (max-width: 1062px) {

ul.faxpaper{
 margin:1em auto;
 padding:.9rem;
 border:#779 dotted 1px;
 font-size:90%;
}
#kitogaisai .gaisaikobetu img{
 margin:1.5em auto auto;
}
.entry {
 background-color: #fddbdc;
 margin: 0 .5em;

}
#bodymain .entry p{margin: 0;padding: .8em .8em .8em 2em }


} /*  media*/
.faxpaper a{
 padding:3px 0;
 display:block;
}
.gaisaifax a:hover,.faxpaper a:hover{
 text-shadow:0 0 2px deepskyblue;
 box-shadow:inset 0px 0px 20px -5px #4a00f8;
}


/* ============================================================================
   .junbi - 準備品リスト
   ----------------------------------------------------------------------------
   【用途】
   地鎮祭などの外祭で準備していただくもののリスト。
   
   【デザイン】
   - 点線枠: #933 1px dashed（赤茶色）
   - 内側の影: inset（赤系）
   - フォントサイズ: 90%
   
   【レスポンシブ】
   1062px以下: マージン調整
   
   【使用例】
   <ul class="junbi">
     <li>お酒（一升）</li>
     <li>お米（一合）</li>
     <li>お塩（一掴み）</li>
   </ul>
   ============================================================================ */

.junbi{
 line-height:1.5;
 margin:1em 250px 1em 5em;
 border:#933 dashed 1px;
 box-shadow:inset 0px 0px 20px -5px #f55;
 padding:15px 15px 15px 45px;
 background-position: 0px 3.5px;
 font-size:90%;
}/*個別の出張祭ページで準備品ul*/


/* ============================================================================
   body[id^="sintou"] - 神道ページ専用スタイル
   ----------------------------------------------------------------------------
   【対象ページ】
   /sintou/* （神道とは、伊勢神宮について、御神札について、人生儀礼など）
   
   【スタイル】
   - #bodymain: 中央寄せ
   - img: 枠なし
   - リンク画像: マージン調整
   
   【理由】
   神道ページは画像中心のレイアウトのため、枠を削除してすっきり表示。
   ============================================================================ */

body[id^="sintou"] #bodymain{ text-align:center;}
body[id^="sintou"] #bodymain img{ border:none;}
body[id^="sintou"] #bodymain a img{
 margin:0 3px 1em 3px;
}
body[id^="sintou"] #bodymain .right a img{
 margin:0;
}


/* ============================================================================
   .sikisidai - 式次第
   ----------------------------------------------------------------------------
   【用途】
   祭事の式次第（進行順序）を表示するリスト。
   
   【デザイン】
   - 背景色: #fec（淡い黄色）
   - 角丸: 15px
   - フォント: HG正楷書体-PRO（正楷書体）
   - リスト位置: inside
   
   【レスポンシブ】
   1062px以下: マージン調整
   
   【使用例】
   <ol class="sikisidai">
     <li>修祓（しゅばつ）</li>
     <li>献饌（けんせん）</li>
     <li>祝詞奏上（のりとそうじょう）</li>
     <li>玉串拝礼（たまぐしはいれい）</li>
     <li>撤饌（てっせん）</li>
   </ol>
   ============================================================================ */

.sikisidai li{font-family:'HG正楷書体-PRO',"游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","Sawarabi Mincho", serif;
 }
.sikisidai{
 margin:1em 250px 1em 5em;
 background-color:#fec;
 list-style-position: inside;
 padding:15px;
 border-radius:15px;
}
.sikisidai li {
font-family: 'HG正楷書体-PRO',"游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN","Sawarabi Mincho", serif;
}/*個別のご祈祷案内ページで式次第のスタイル*/
@media only screen and (max-width: 1062px) {
.sikisidai,.junbi{
  margin:1em 0;
  clear:both;
}
}


/* ============================================================================
   .koro - コロナ対策案内
   ----------------------------------------------------------------------------
   【用途】
   感染症対策の案内、お願い事項などを表示するブロック。
   
   【デザイン】
   - 枠線: #ccc 1pc solid（グレー、太い）
   - マージン: 2em
   - パディング: 1em
   - リストスタイル: square（四角マーク）
   
   【使用ページ】
   /wall.php (感染症対応について)
   その他、コロナ対策案内が必要なページ
   
   【使用例】
   <div class="koro">
     <ul>
       <li>マスクの着用をお願いします</li>
       <li>手指の消毒をお願いします</li>
       <li>ソーシャルディスタンスの確保をお願いします</li>
     </ul>
   </div>
   ============================================================================ */

.koro {
 margin: 2em;
 border: solid 1pc #ccc;
 padding:1em;
}

.koro li {
 margin: 0.3em 0;
 list-style:none;
 list-style-type:square;text-align: left;
}