@charset "utf-8";
/**
* ============================================================================
* com-sections-about.css
* ============================================================================
*
* 【目的】
* ご参拝案内ページの専用スタイルを提供。
* 背景画像、末社リスト、由緒写真などの特殊なレイアウト。
*
* 【使用ページ】
* - /about/index.php (body_class: about) - ご参拝案内トップ
* - /about/gosaijin.php - 御祭神
* - /about/yuisyo.php - 由緒
* - /about/keidai.php - 境内ご案内
*
* 【依存関係】
* - 必須: com-core-reset.css, com-core-base.css, com-core-layout.css
* - 必須: com-pages-nottop.css
*
* 【読み込み順序】
* 8番目以降
*
* 【主要な機能】
* 1. 背景画像ブロック
* - .about_bgphoto: 参拝案内画像背景
* - .gosinboku_bgphoto: 御神木画像背景
*
* 2. dl#massya - 末社リスト
* - 定義リスト形式
* - 社名（dt）と御利益（dd）
* - レスポンシブ対応
*
* 3. #yuisyop - 由緒写真
* - 特殊な枠線（ridge）
* - 縦横サイズ指定
*
* 4. div.keidailist - 境内案内
* - 背景画像
*
* 【レスポンシブブレークポイント】
* - 1062px以下: dl#massya の配置変更
*
* 【注意事項】
* - ミニファイ後は sections-about.css にリネームされます
*
* 【変更履歴】
* 2025-10-20: perso.css セクション4 + kobetu.css から統合作成
*
* ============================================================================
*/
/* ============================================================================
.about_bgphoto - 参拝案内背景画像
----------------------------------------------------------------------------
【用途】
参拝案内トップページの背景画像ブロック。
【デザイン】
- 背景画像: /i/about/about.jpg
- パディング: 26% 39%（画像の表示領域）
- background-size: contain（画像を収める）
============================================================================ */
.about_bgphoto{
padding:26% 39%;
background-image:url('/i/about/about.jpg');
background-position:center;
background-repeat:no-repeat;
margin:0 auto;
background-size:contain;
}
.about_bgphoto p{ color:#fff;
}
/* ============================================================================
.gosinboku_bgphoto - 御神木背景画像
----------------------------------------------------------------------------
【用途】
御神木の紹介ブロック。
【デザイン】
- 背景画像: /i/about/sinboku.jpg
- 幅: 90%
- パディング上: 62%（画像の表示領域）
- inset box-shadow: 白色の内側の影（ぼかし効果）
============================================================================ */
.gosinboku_bgphoto{
width:90%;
background-image:url('/i/about/sinboku.jpg');
background-position:center;
background-repeat:no-repeat;
margin:0 auto;
padding-top:62%;
box-shadow:inset 0px 0px 20px 20px #fff;
}
.gosinboku_bgphoto p{
color:#000;
background-color: rgba(255, 255, 255, 0.7);
border-radius:1em;
font-size:15px;
}
/* ============================================================================
dl#massya - 末社リスト
----------------------------------------------------------------------------
【用途】
境内の末社（小さな神社）のリストを定義リスト形式で表示。
【構造】
- 稲荷社
- 商売繁盛
商売繁盛
- 天神社
- 学業成就
学業成就
【デザイン】
- dt（社名）: 下線、太字、頭文字を赤く大きく
- dd/p（御利益）: 右側に配置（margin-left: 150px）、青色
【レスポンシブ】
1062px以下:
- dd/p をブロック表示、margin削除
- p::before で「ご利益：」を追加
============================================================================ */
dl#massya{
font-size:72%;
text-align:left;
margin:1em 80px 1em 3em;
line-height:1.5;
}
dl#massya dt{
text-align:left;
font-size:95%;
font-weight:bold;
border-bottom:#acf solid 1px;
margin:0.8em 0 1em 0;
}
dl#massya dt:first-letter{
font-weight:bold;
color:#f13;
font-size:105%;
}
dl#massya p,dl#massya dd{
margin-top:-3.2em;
margin-bottom:0;
margin-left:150px;
margin-right:0;
padding-right:0;
color:#63f;
}
@media only screen and (max-width: 1062px) {
dl#massya{
font-size:1rem;
margin:1em;
line-height:1.5;
}
dl#massya dt{
display:block;
}
dl#massya dt:first-letter{
font-weight:bold;
color:#f13;
font-size:105%;
}
dl#massya p,dl#massya dd{
color:#63f;margin:0;
display:block;padding:0;}
dl#massya p::before{
content:"ご利益：";
}
}
/* ============================================================================
#yuisyop - 由緒写真
----------------------------------------------------------------------------
【用途】
由緒ページの歴史的な写真の表示。
【デザイン】
- 枠線: #544 ridge 4px（立体的）
- 影: 右下と左の二重影
- span: 写真のキャプション
- .tate: 縦写真用（220px）
- .yoko: 横写真用（260px）
【使用例】
明治時代の社殿
大正時代の祭事
============================================================================ */
#yuisyop{
}
#yuisyop div{
text-align:center;
}
#yuisyop span{
color:#009;
font-size:14px;
display:inline-block;
}#yuisyop span.tate{
width:220px;
}#yuisyop span.yoko{
width:260px;
}
#yuisyop img{
border:#544 ridge 4px;
margin:1em auto;
-webkit-box-shadow: 5px 5px 5px 0 #777, -2px 0 5px #aaa;
-moz-box-shadow: 5px 5px 5px 0 #777, -2px 0 5px #aaa;
box-shadow: 5px 5px 5px 0 #777, -2px 0 5px #aaa;
display:block;
padding:1px
}
#yuisyop span+span{margin-left:10px;
}
/* ============================================================================
div.keidailist - 境内ご案内
----------------------------------------------------------------------------
【用途】
境内案内ページの背景画像。
【デザイン】
- 背景画像: /i/about/keidai_b.jpg
- 高さ: 760px
============================================================================ */
div.keidailist{
background-image:url('/i/about/keidai_b.jpg');
background-position:center;
background-repeat:no-repeat;
height:760px;
}
/* ============================================================================
ol.touka - 透過リスト
----------------------------------------------------------------------------
【用途】
特殊なリストスタイル（透過背景）。
【デザイン】
- 背景画像: /i/touka.png
- display: run-in
============================================================================ */
ol.touka{
background-image:url('/i/touka.png');
display:run-in;
}
/* ============================================================================
table#biyou - 美容テーブル
----------------------------------------------------------------------------
【用途】
境内案内や施設案内のテーブル。
============================================================================ */
table#biyou{line-height:1.3}
#biyou td{
text-align:left;
padding:2px;
}