@charset "utf-8";
/**
 * ============================================================================
 * com-pages-nottop.css
 * ============================================================================
 * 
 * 【目的】
 * トップページ以外の全ページで使用する2カラムレイアウトを提供。
 * サイドメニュー(#bodymenu)とメインコンテンツ(#bodymain)の配置を制御。
 * 
 * 【使用ページ】
 * トップページ以外の全ページ
 * - /kito/* (ご祈祷)
 * - /event/* (年間祭事)
 * - /about/* (ご参拝案内)
 * - /access/* (交通アクセス)
 * - /sintou/* (神道とは)
 * - /juyo/* (授与品)
 * - /link/* (リンク)
 * - /facilities/* (会館案内)
 * - その他個別ページ
 * 
 * 【依存関係】
 * - 必須: com-core-reset.css, com-core-base.css, com-core-layout.css
 * - JavaScript: /js/or.js (サイドメニューのスクロール追従、アコーディオンメニュー)
 * 
 * 【読み込み順序】
 * 4番目（com-core-* の後、com-components-* や com-sections-* の前）
 * 
 * 【主要な機能】
 * 1. 2カラムレイアウト (#body)
 *    - 幅: 1058px
 *    - 白背景、影付き
 * 
 * 2. サイドメニュー (#bodymenu)
 *    - 幅: 195px
 *    - 絶対配置 (position: absolute)
 *    - スクロール追従機能（body.sticky時にfixedに変更）
 *    - アコーディオンメニュー（.accordion_head*）
 * 
 * 3. メインコンテンツ (#bodymain)
 *    - 最大幅: 838px
 *    - 左マージン: 220px（サイドメニュー幅195px + 余白25px）
 * 
 * 4. 見出しスタイル
 *    - h2: 背景画像、アニメーション
 *    - h3: グラデーション下線、テキストシャドウ
 *    - h4: 枠線ホバーエフェクト
 *    - h5: 点線下線
 * 
 * 5. ファイル種別アイコン
 *    - .docx: Word アイコン
 *    - .pdf: PDF アイコン
 * 
 * 【レスポンシブブレークポイント】
 * - 1062px: #body width 100%、#bodymain width auto
 * - 800px: #bodymenu 非表示、#bodymain width 100vw、margin-left 0
 * 
 * 【JavaScriptとの連携】
 * or.js が以下のクラスを動的に追加・削除します:
 * 
 * - body.sticky: スクロール時に追加
 *   → #bodymenu を position: fixed に変更（上部に固定）
 * 
 * - .accordion_head*: アコーディオンメニューのヘッダー
 *   → クリックで次の要素の表示/非表示を切り替え
 * 
 * 【h2背景画像の変更方法】
 * body_classに応じて背景画像を変更できます。
 * 
 * デフォルト: /i/h2back/about.jpg
 * 例:
 * - #sintoutop: /i/h2back/jingu0.jpg
 * - #kitotop: /i/h2back/kito.jpg
 * 
 * 新しい背景を追加する場合:
 * 1. /i/h2back/ に画像を配置
 * 2. このファイルに以下を追加:
 *    #your_body_class #bodymain h2 { background-image: url('/i/h2back/your_image.jpg'); }
 * 
 * 【注意事項】
 * - #bodymain の margin-left (220px) は #bodymenu の width (195px) + 余白に対応
 * - h2 のアニメーション (headline2) は0.7秒後、1.0秒かけて実行
 * - com-pages-top.css とは排他的（同時に読み込まない）
 * - 800px以下では #bodymenu が非表示になり、ハンバーガーメニューのみ使用
 * - ミニファイ後は pages-nottop.css にリネームされます
 * 
 * 【変更履歴】
 * 2025-10-20: nottop.css から改名・充実したドキュメント追加
 * 
 * ============================================================================
 */


/* ============================================================================
   #body - 2カラムレイアウトコンテナ
   ----------------------------------------------------------------------------
   【構造】
   #body (1058px幅)
   ├─ #bodymenu (195px幅、絶対配置)
   └─ #bodymain (838px幅、左マージン220px)
   
   【レスポンシブ】
   1062px以下: width 100% に変更
   ============================================================================ */

#bodywrap{ background-image:url('/i/layout/bg_main.jpg');/*ピンクの亀背景*/
}
/* 上のIDはarticleに振られているID。 #bodyはarticle直下のdiv。bodymenuとbodymainで2カラム。 */
#body{
 width:1058px;
 padding:0 0 3em 0;
 margin:0 auto;
 background-color:#fff;
 box-shadow: 5px 5px 5px 0 #777, -2px 0 5px #aaa;
 position:relative;
}


/* ============================================================================
   #bodymenu - サイドメニュー
   ----------------------------------------------------------------------------
   【通常時】
   - position: absolute
   - width: 195px
   - 左端に配置 (left: 0)
   
   【スクロール追従時（body.sticky）】
   or.js によって body に .sticky クラスが追加されると:
   - position: fixed に変更
   - top: 55px（ナビゲーションの下）
   - left: auto（中央寄せのため）
   
   【構成要素】
   - h2/h3: セクション見出し
   - ul > a: メニューリンク
   - .accordion_head*: アコーディオンメニュー
   
   【背景】
   /i/about/submenuback.jpg
   
   【レスポンシブ】
   800px以下: display: none（非表示）
   ============================================================================ */

#bodymenu{/*　#bodymenuはサブメニュー部。　*/
  position:absolute;
  width:195px;
  background-color:#fcf;
  line-height:1.5;
  border-radius:0.5em;
  border:0px solid #000;
  box-shadow: 5px 5px 2px 0 #111;
  background-image:url('/i/about/submenuback.jpg');
  left:0;
  font-size:0.75em;
   transition: all 0.55s ease-in;

}
body.sticky #bodymenu/*スクロールすると nav.jsによってbodyにstickyクラスが追加される。スクロール時追随固定のための指定*/{
  position:fixed !important;
  position:absolute;
  top:55px;
  left:100px;
  left:auto !important;
  box-shadow: 1px 1px 7px 3px rgba(22,22,22,.7);
  transition: all 0.55s ease-in;
}
#bodymenu h3,#bodymenu h2{
 border-radius:0.5em;
 letter-spacing:1px;
}
#bodymenu h2:first-child,#bodymenu h3:first-child{
 background-color:#ec0080;
 color:white;
}
#bodymenu h2~*{line-height:1}/*　h2の後ろのすべての要素に適用される。サブメニューでh2を配置して細かいセクション訳をするということは余白に余裕がない証拠*/


/* ============================================================================
   #bodymenu アコーディオンメニュー
   ----------------------------------------------------------------------------
   クラス名が "accordion_head" で始まる h3 要素は、
   or.js によってクリック時に次の要素の表示/非表示を切り替えます。
   
   【使用例】
   <h3 class="accordion_head1">メニュー1</h3>
   <ul>...</ul>
   <h3 class="accordion_head2">メニュー2</h3>
   <ul>...</ul>
   
   【スタイル】
   - cursor: pointer（カーソルが指に変化）
   - hover時: 背景色変更、"メニューを開閉"テキスト表示
   ============================================================================ */

#bodymenu h3[class^="accordion_head"]{
  cursor:pointer;
  text-indent:1em;
  padding:3px 0;
  text-decoration:underline;
  color:royalblue;
  }
[class^="accordion_head"]:hover { color:#f03992;
 background-color: rgba(255, 233, 233, 0.5); /* 赤, 緑, 青, 透明度 */

}
[class^="accordion_head"]:hover::after{
 color:#f03992;
 content:"メニューを開閉";
 font-size:smaller;
 font-weight:normal;
 font-family:sans-serif;}
#bodymenu ul{
 margin-left:0;
 color:#000;
}
#bodymenu ul a{
  color:#232FA1;
  display:block;
  width:185px;
  text-align:right;
  padding:5px 10px 0 0;
  transition: background-color 0.5s ease-out 0;
}
#bodymenu ul a:visited{color:#243E6A;
}
#bodymenu ul a:hover{
 color:#f03992;
 background-color: rgba(255, 233, 233, 0.5); /* 赤, 緑, 青, 透明度 */
}
#bodymenu ul a::after{
 content:"";
 display:block;
 line-height:0;
 text-decoration:none;
 color:#222;
 background-image:url('/i/nav/dot.gif');
 height:1px;
 margin-top:0.3em;
}


/* ============================================================================
   #bodymain - メインコンテンツエリア
   ----------------------------------------------------------------------------
   【サイズ】
   - 最大幅: 838px
   - 最小幅: 320px
   - 左マージン: 220px（サイドメニュー195px + 余白25px）
   
   【レスポンシブ】
   1062px以下: width auto に変更
   800px以下: width 100vw、margin-left 0 に変更（サイドメニュー非表示のため）
   ============================================================================ */

#bodymain {
 max-width: 838px;
 min-width: 320px;
 margin-left: 220px;
 text-align: center;
}


/* ============================================================================
   #bodymain h2 - セクション見出し
   ----------------------------------------------------------------------------
   コンテンツのメイン見出し（h2）のスタイル。
   
   【背景画像】
   デフォルト: /i/h2back/about.jpg
   
   各body_classごとに異なる背景画像を設定:
   - #sintoutop: /i/h2back/jingu0.jpg
   - #kitotop: /i/h2back/kito.jpg
   
   新しい背景を追加する場合は、このセクションの下に追加してください。
   ============================================================================ */

#bodymain h2{
  background-color:#000;
  color:#000;
  background-image:url('/i/h2back/about.jpg');
  background-repeat:no-repeat;
  font-weight:normal;
  font-size:150%;
  padding-left:5%;
  background-size:100%;
  width:95%;
  padding-top:30%  ;
    animation: 0.7s headline2 1.0s forwards;
}

/*アニメーション*/
@keyframes headline2 {
  0% {
  }
  100% {
    color:#ffff25;font-weight: bold;
  text-shadow: 0px 0px 3px white;
  text-shadow: 0px 0px 3px white;
  text-shadow: 0px 0px 3px white;
  }
}

/*h2backフォルダに画像は入れておく*/
#sintoutop #bodymain h2{ background-image:url('/i/h2back/jingu0.jpg');
}
#kitotop #bodymain h2{
 background-image:url('/i/h2back/kito.jpg');
}


/* ============================================================================
   #bodymain h2+p - h2直後の段落
   ----------------------------------------------------------------------------
   h2の直後に配置される段落（リード文など）のスタイル。
   
   【アニメーション】
   0.7秒後、1.6秒かけて実行:
   - 文字色: #000 → #ffe（淡い黄色）
   - text-shadow: なし → 白色の影
   ============================================================================ */

#bodymain h2+p{
 background-color:#000;
 margin:0 0 1em 0;
 padding:1em 2em;
 color:#000;
 font-family:serif;
     animation: 0.7s headline2plus 1.6s forwards;

}
#bodymain p{
 padding:0.8em 2em;
 text-align:left;
}

@keyframes headline2plus {
  0% {
  }
  100% {
    color:#ffe;
    text-shadow:0 0 3px #fff;
  }
}


/* ============================================================================
   #bodymain リンクボタン
   ----------------------------------------------------------------------------
   "ページの一番上へ" や "詳しくはリンク先" などのボタンスタイル。
   
   【使用例】
   <p class="totop"><a href="#top">ページの一番上へ</a></p>
   <p class="right"><a href="/path/to/page">詳しくはこちら</a></p>
   
   【デザイン】
   - totop: 右ボーダー #ff7c5c（オレンジ）
   - right: 右ボーダー #45bffc（青）
   - hover: opacity 0.7
   - active: 影がinsetに、2px下に移動
   ============================================================================ */

#bodymain p.totop {text-align: right;;
}
#bodymain p.totop a,
#bodymain p.right a {
 display: inline-block;
 padding: .5em 1em .5em .8em;
 text-decoration: none;
 background: #f7f7f7;
 border-right: solid 6px #ff7c5c;
 color: #111;
 font-weight: bold;
 box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
 font-size: 0.9rem
}
#bodymain p.right a{
 border-right: solid 6px #45bffc;
}

#bodymain p.totop a:hover,
#bodymain p.right a:hover {
 opacity: .7
}
#bodymain p.totop a:active,
#bodymain p.right a:active {
 box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
 transform: translateY(2px);
}


/* ============================================================================
   #bodymain h3 - 中見出し（リニューアル版）
   ----------------------------------------------------------------------------
   【デザインコンセプト】
   - すっきりとしたボーダーデザイン
   - h2との階層関係が明確
   - CSS変数でブランドカラー使用
   
   【旧デザインからの変更点】
   - 背景画像を削除
   - グラデーション下線をシンプルなボーダーに
   - 派手なテキストシャドウを削除
   
   更新日: 2025-10-23
   ============================================================================ */

#bodymain h3 {
    /* 配置・サイズ */
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 2em 0 1em 0;
    padding: 0.5em 0 0.5em 1em;
    
    /* カラー */
    color: var(--color-footer-heading);
    
    /* ボーダー */
    border-left: 4px solid var(--color-primary-light);
    border-bottom: 2px solid var(--color-footer-border);
    
    /* フォント */
    font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
    letter-spacing: 0.05em;
    
    /* その他 */
    text-align: left;
    clear: both;
    position: relative;
}


/* ============================================================================
   #bodymain h4 - 小見出し（リニューアル版）
   ----------------------------------------------------------------------------
   【デザインコンセプト】
   - インラインブロック要素としてコンパクト
   - 左ボーダーアクセント
   - 控えめな背景色
   
   【旧デザインからの変更点】
   - ラベンダー背景を淡いピンク系に
   - 二重枠線を削除してシンプルに
   - text-transform: uppercase を削除
   
   【特殊スタイル】
   - h3#cmenu0+h4: 特定の見出し（装飾なし）
   - .dotboard h4: 点線背景の見出し（維持）
   
   更新日: 2025-10-23
   ============================================================================ */

#bodymain h4 {
    /* 配置・サイズ */
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.5;
    margin: 1.5em 0 0.8em 0;
    padding: 0.5em 1em 0.5em 0.8em;
    
    /* カラー */
    color: var(--color-footer-heading);
    background: linear-gradient(
        90deg,
        rgba(255, 192, 203, 0.15) 0%,
        rgba(255, 192, 203, 0.05) 100%
    );
    
    /* ボーダー */
    border-left: 3px solid var(--color-primary);
    border-radius: 0 4px 4px 0;
    
    /* フォント */
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.05em;
    
    /* レイアウト */
    text-align: left;
    display: inline-block;
    position: relative;
    
    /* シャドウ */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 特殊スタイル: 装飾なし見出し */
h3#cmenu0+h4,
#bodymain .dotboard h4 {
    border: none;
    background-color: inherit;
    display: block;
    color: #333;
    box-shadow: none;
}

/* dotboard専用装飾 */
.dotboard h4 span {
    padding: 0.3em 1em;
    background-image: url('/i/h4back.png');
    background-position: bottom;
    background-repeat: repeat-x;
    border-left: 5px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary-light);
}


/* ============================================================================
   #bodymain h5 - 最小見出し（リニューアル版）
   ----------------------------------------------------------------------------
   【デザインコンセプト】
   - さらにシンプルなデザイン
   - 点線ボーダーを維持
   - CSS変数使用
   
   更新日: 2025-10-23
   ============================================================================ */

h5 {
    color: #333;
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 2px dotted var(--color-primary-light);
    padding: 0.3em 0 0.3em 0.8em;
    margin: 1.2em 1em 1em 0;
    font-family: 'Noto Sans JP', "AR P丸ゴシック体M04", "Hiragino Sans", sans-serif;
}


/* ============================================================================
   ファイル種別アイコン
   ----------------------------------------------------------------------------
   .docx と .pdf ファイルへのリンクに自動的にアイコンを表示します。
   
   【使用例】
   <a href="/files/document.docx">Word文書</a>
   <a href="/files/document.pdf">PDF文書</a>
   
   【アイコン】
   - Word: /i/wordicon.png
   - PDF: /i/pdficon.png
   ============================================================================ */

a[href$='.docx'] {
 padding-right: 30px;
 background: transparent url(/i/wordicon.png) no-repeat center right;
}
a[href$='.pdf'] {
 padding-right: 30px;
 background: transparent url(/i/pdficon.png) no-repeat center right;
}


/* ============================================================================
   レスポンシブ: 1062px以下
   ----------------------------------------------------------------------------
   タブレット対応
   ============================================================================ */

@media only screen and (max-width: 1062px) {
 #bodymain {
  width: auto;
 }

 #body {
  width: 100%;
 }

 #bodymain p {
  padding: 0.8em 0;
 }
}


/* ============================================================================
   レスポンシブ: 800px以下
   ----------------------------------------------------------------------------
   モバイル対応
   
   【変更内容】
   - #bodymenu を非表示（ハンバーガーメニューのみ使用）
   - #bodymain を画面幅いっぱいに（100vw）
   - margin-left を 0 に（サイドメニューがないため）
   ============================================================================ */

@media only screen and (max-width: 800px) {
 #bodymenu {
  display: none;
 }

 #bodymain {
  width: 100vw;
  margin-left: 0;
 }

 /* 見出しのモバイル最適化 */
 #bodymain h3 {
  font-size: 1.2rem;
  padding: 0.4em 0 0.4em 0.8em;
  margin: 1.5em 0 0.8em 0;
 }

 #bodymain h4 {
  font-size: 1rem;
  padding: 0.4em 0.8em;
  margin: 1.2em 0 0.6em 0;
 }

 #bodymain p {
  padding: 0.6em 1em;
 }
}/*media*/