@charset "Shift_JIS";

/*--------------------------------------------------------
  フルCSSプロフェッショナルテンプレート部品設定
--------------------------------------------------------*/

.hpb-parts-cnt-style {
    border-color: #cbcbcb;
}

.hpb-parts-hl-style {
	clear: both;
    border-color: #cbcbcb !important;
	background-image: none !important;
	color: #000 !important;
	width: auto !important;
	line-height: normal !important;
	background-color: transparent !important;
	padding-bottom: 0 !important;
	padding-left: 5px !important;
	height: auto !important;
}

.hpb-parts-cbox-style {
    border-color: #cbcbcb;
}

.hpb-parts-hr-style {
    border-color: #cbcbcb;
}

.hpb-parts-pbox-style {
    border-color: #cbcbcb;
}
.hpb-parts-pbox-style h4 {
    padding: 0px !important;
}
.hpb-parts-pbox-style img {
	margin: 0 !important;
}

.hpb-parts-blist-style {
    background-color: #c9d2ea;
    border-color: #a3b1d8;
}
a.hpb-parts-blist-style:link {
    color: #000;
}
a.hpb-parts-blist-style:visited {
    color: #000;
}
a.hpb-parts-blist-style:hover {
	background-color:#d7def1;
}
a.hpb-parts-blist-style:active {
	background-color:#d7def1;
}

/*--------------------------------------------------------
  hpbparts
--------------------------------------------------------*/
/* 飾りなし 幅自動 */
.hpb-parts-cnt-01 {
    margin-bottom: 5px;
    padding: 5px;
}

/* 飾りなし 幅60px */
.hpb-parts-cnt-01-060 {
    margin-bottom: 5px;
    padding: 5px;
}

/* 飾りなし 幅120px */
.hpb-parts-cnt-01-120 {
    margin-bottom: 5px;
    padding: 5px;
}

/* 飾りなし 幅180px */
.hpb-parts-cnt-01-180 {
    margin-bottom: 5px;
    padding: 5px;
}

/* 飾りなし 幅240px */
.hpb-parts-cnt-01-240 {
    margin-bottom: 5px;
    padding: 5px;
}

/* 飾りなし 幅360px */
.hpb-parts-cnt-01-360 {
    margin-bottom: 5px;
    padding: 5px;
}

/* 線囲み 幅自動 */
.hpb-parts-cnt-02 {
    margin-bottom: 5px;
    padding: 5px;
}

/* 線囲み 幅60px */
.hpb-parts-cnt-02-060 {
    margin-bottom: 5px;
    padding: 5px;
}

/* 線囲み 幅120px */
.hpb-parts-cnt-02-120 {
    margin-bottom: 5px;
    padding: 5px;
}

/* 線囲み 幅180px */
.hpb-parts-cnt-02-180 {
    margin-bottom: 5px;
    padding: 5px;
}

/* 線囲み 幅240px */
.hpb-parts-cnt-02-240 {
    margin-bottom: 5px;
    padding: 5px;
}

/* 線囲み 幅360px */
.hpb-parts-cnt-02-360 {
    margin-bottom: 5px;
    padding: 5px;
}

/******************************
 * 見出し (h1-h6)
 ******************************/

/* 飾りなし */
.hpb-parts-hl-01 {
}

/* 下線 1 */
.hpb-parts-hl-02 {
    padding-bottom: 5px !important;
}

/* 下線 2 (2重線) */
.hpb-parts-hl-03 {
    padding-bottom: 5px !important;
}

/* 線囲み 1 */
.hpb-parts-hl-04 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* 線囲み 2 (2重線) */
.hpb-parts-hl-05 {
	padding-top: 6px !important;
    padding-bottom: 5px !important;
}

/* 飾りつき 1 (左■付き) */
.hpb-parts-hl-06 {
    border-left-width: 0.5em !important;
}

/* 飾りつき 2 (左■付き＆下線) */
.hpb-parts-hl-07 {
    padding-top: 6px !important;
    padding-bottom: 5px !important;
    border-left-width: 0.5em !important;
	border-bottom-width: 1px !important;
	border-bottom-color: #cbcbcb !important;
	border-bottom-style: dotted !important;
}

/* 飾りつき 3 (左■付き＆線囲み) */
.hpb-parts-hl-08 {
    padding-top: 6px !important;
    padding-bottom: 5px !important;
    border-left-width: 0.5em !important;
	border-top-width: 1px !important;
	border-top-color: #cbcbcb !important;
	border-top-style: dotted !important;
	border-bottom-width: 1px !important;
	border-bottom-color: #cbcbcb !important;
	border-bottom-style: dotted !important;
	border-right-width: 1px !important;
	border-right-color: #cbcbcb !important;
}

/******************************
 * 文章枠 (div)
 ******************************/

/* 装飾なし */
.hpb-parts-cbox-01 {
    margin-bottom: 5px;
}

/* 線囲み 1 (実線) */
.hpb-parts-cbox-02 {
    margin-bottom: 5px;
}

/* 線囲み 2 (点線) */
.hpb-parts-cbox-03 {
    margin-bottom: 5px;
}

/* 線囲み 3 (2重線) */
.hpb-parts-cbox-04 {
	margin-bottom: 5px;
}

/******************************
 * 写真/画像 (img)
 ******************************/

/* 余白なし */
.hpb-parts-img-01 {
}

/* 余白あり */
.hpb-parts-img-02 {
}

/* 写真ボックス 左寄せ配置用 */
.hpb-parts-img-03 {
}

/* 写真ボックス 右寄せ配置用 */
.hpb-parts-img-04 {
}

/* 複数写真ボックス 左端用 */
.hpb-parts-img-05 {
}

/* 複数写真ボックス 2列目用 */
.hpb-parts-img-06 {
}

/* 複数写真ボックス 左端・2行目用 */
.hpb-parts-img-07 {
}

/* 複数写真ボックス 2行目用 */
.hpb-parts-img-08 {
}

/******************************
 * 水平線 (hr)
 ******************************/

/* 水平線 1 (実線・細) */
.hpb-parts-hr-01 {
}

/* 水平線 2 (実線・太) */
.hpb-parts-hr-02 {
}

/* 水平線 3 (点線・細) */
.hpb-parts-hr-03 {
}

/* 水平線 4 (点線・太) */
.hpb-parts-hr-04 {
}

/* 水平線 5 (破線・細) */
.hpb-parts-hr-05 {
}

/* 水平線 6 (破線・太) */
.hpb-parts-hr-06 {
}

/* 水平線 7 (2重線) */
.hpb-parts-hr-07 {
}

/******************************
 * 写真ボックス (div)
 ******************************/

/* 飾りなし */
.hpb-parts-pbox-01 {
}

.hpb-parts-pbox-01 h4 {
	margin-bottom: 0.5em;
}

/* 飾りなし 画像幅60px */
.hpb-parts-pbox-01-060 {
}

/* 飾りなし 画像幅120px */
.hpb-parts-pbox-01-120 {
}

/* 飾りなし 画像幅180px */
.hpb-parts-pbox-01-180 {
}

/* 飾りなし 画像幅240px */
.hpb-parts-pbox-01-240 {
}

/* 線囲み */
.hpb-parts-pbox-02 {
}

.hpb-parts-pbox-02 h4 {
	margin-bottom: 0.5em;
}

/* 線囲み 画像幅60px */
.hpb-parts-pbox-02-060 {
}

/* 線囲み 画像幅120px */
.hpb-parts-pbox-02-120 {
}

/* 線囲み 画像幅180px */
.hpb-parts-pbox-02-180 {
}

/* 線囲み 画像幅240px */
.hpb-parts-pbox-02-240 {
}

/* 写真ボックス用 文章領域 */
.hpb-parts-pbox-desc {
}

.hpb-parts-pbox-desc h4 {
	margin-bottom: 0.5em;
}

/******************************
 * 複数写真ボックス (div)
 ******************************/

/* 飾りなし 画像幅60px 横2x縦1 */
.hpb-parts-mpbox-01-2060 {
}

/* 飾りなし 画像幅60px 横3x縦1 */
.hpb-parts-mpbox-01-3060 {
}

/* 飾りなし 画像幅60px 横4x縦1 */
.hpb-parts-mpbox-01-4060 {
}

/* 飾りなし 画像幅120px 横2x縦1 */
.hpb-parts-mpbox-01-2120 {
}

/* 飾りなし 画像幅120px 横3x縦1 */
.hpb-parts-mpbox-01-3120 {
}

/* 飾りなし 画像幅120px 横4x縦1 */
.hpb-parts-mpbox-01-4120 {
}

/* 飾りなし 画像幅180px 横2x縦1 */
.hpb-parts-mpbox-01-2180 {
}

/* 飾りなし 画像幅180px 横3x縦1 */
.hpb-parts-mpbox-01-3180 {
}

/* 飾りなし 画像幅180px 横4x縦1 */
.hpb-parts-mpbox-01-4180 {
}

/* 飾りなし 画像幅240px 横2x縦1 */
.hpb-parts-mpbox-01-2240 {
}

/* 飾りなし 画像幅240px 横3x縦1 */
.hpb-parts-mpbox-01-3240 {
}

/* 飾りなし 画像幅240px 横4x縦1 */
.hpb-parts-mpbox-01-4240 {
}

/* 線囲み 画像幅60px 横2x縦1 */
.hpb-parts-mpbox-02-2060 {
}

/* 線囲み 画像幅60px 横3x縦1 */
.hpb-parts-mpbox-02-3060 {
}

/* 線囲み 画像幅60px 横4x縦1 */
.hpb-parts-mpbox-02-4060 {
}

/* 線囲み 画像幅120px 横2x縦1 */
.hpb-parts-mpbox-02-2120 {
}

/* 線囲み 画像幅120px 横3x縦1 */
.hpb-parts-mpbox-02-3120 {
}

/* 線囲み 画像幅120px 横4x縦1 */
.hpb-parts-mpbox-02-4120 {
}

/* 線囲み 画像幅180px 横2x縦1 */
.hpb-parts-mpbox-02-2180 {
}

/* 線囲み 画像幅180px 横3x縦1 */
.hpb-parts-mpbox-02-3180 {
}

/* 線囲み 画像幅180px 横4x縦1 */
.hpb-parts-mpbox-02-4180 {
}

/* 線囲み 画像幅240px 横2x縦1 */
.hpb-parts-mpbox-02-2240 {
}

/* 線囲み 画像幅240px 横3x縦1 */
.hpb-parts-mpbox-02-3240 {
}

/* 線囲み 画像幅240px 横4x縦1 */
.hpb-parts-mpbox-02-4240 {
}

/******************************
 * バナーリスト
 ******************************/

/* 文字型 1 */
.hpb-parts-blist-01 {
	clear: both;
}
.hpb-parts-blist-01 ul {
	margin-bottom: 5px;
}
.hpb-parts-blist-01 li {
	border-bottom: none !important;
	padding: 2px !important;
	padding-left: 0 !important;
	background-image: none !important;	
}
.hpb-parts-blist-01 li a {
     padding: 7px !important;
}

/* 文字型 2 */
.hpb-parts-blist-02 {
	clear: both;
}
.hpb-parts-blist-02 ul {
	margin-bottom: 5px;
}
.hpb-parts-blist-02 li {
	border-bottom: none !important;
	padding: 2px !important;
	padding-left: 0 !important;
	background-image: none !important;	
}
.hpb-parts-blist-02 li a {
	border-style: dotted;
}

/* 文字型 3 */
.hpb-parts-blist-03 { 
	clear: both;
}
.hpb-parts-blist-03 ul {
	margin-bottom: 5px;
}
.hpb-parts-blist-03 li {
    border-bottom: none !important;
	padding: 2px !important;
	padding-left: 0 !important;
	background-image: none !important;	
}
.hpb-parts-blist-03 li a {
    border-left-width: 1em;
    border-right-width: 1em;
    border-right-style: solid;
    border-top-style: dotted;
    border-bottom-style: dotted;
}

/* 画像付き 1 */
.hpb-parts-blist-04 {
}
.hpb-parts-blist-04 ul {
    margin-bottom: 5px;
}
.hpb-parts-blist-04 li {
	border-bottom: none !important;
	padding: 2px !important;
	padding-left: 0 !important;
	background-image: none !important;
}
.hpb-parts-blist-04 li a {
}
.hpb-parts-blist-04 li a img {
}

/* 画像付き 2 */
.hpb-parts-blist-05 {
}
.hpb-parts-blist-05 ul {
}
.hpb-parts-blist-05 li {
    border-bottom: none !important;
	padding: 2px !important;
	padding-left: 0 !important;
	background-image: none !important;	
}
.hpb-parts-blist-05 li a {
    border-style: dotted;
}
.hpb-parts-blist-05 li a img {
}

/*--------------------------------------------------------
  ユーザー設定スタイル
--------------------------------------------------------*/

/* =======================================================
  レスポンシブ設定
======================================================= */
@media screen and (max-width: 568px) {
	
	/*--------------------------------------------------------
		フルCSSプロフェッショナルテンプレート部品設定
	--------------------------------------------------------*/

	.hpb-parts-hl-style {
		border-radius: 0px !important;
		-webkit-border-radius: 0px !important;
	}
	
	/******************************
	 * 見出し (h1-h6)
	 ******************************/

	/* 飾りなし */
	.hpb-parts-hl-01 {
		padding-top: 0px !important;
	}

	/* 下線 1 */
	.hpb-parts-hl-02 {
		padding-top: 0px !important;
	}
	
	/* 下線 2 (2重線) */
	.hpb-parts-hl-03 {
    padding-top: 0px !important;
	}

	/* 飾りつき 1 (左■付き) */
	.hpb-parts-hl-06 {
    padding-top: 0px !important;
	}

}


/* --- 八幡神社便りリスト用カスタマイズ --- */



/* 1. リンク全体の下線を消す・色をリセット */
.newsletter-list .item a {
    text-decoration: none !important; /* 強制的に下線を消す */
    color: #333 !important; /* 文字色を黒で統一 */
    display: block; /* ブロック要素として扱う */
}

/* 2. マウスを乗せた時の動き */
.newsletter-list .item a:hover {
    opacity: 1; /* 全体の透明度は変えない */
    background-color: transparent; /* 背景色も変更なし */
    color: #333 !important;
}

/* 3. 画像（サムネイル）のデザイン */
.newsletter-list .item a img {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 影をつけて少し浮き出させる */
    transition: all 0.3s ease; /* 動きをなめらかに */
    border-radius: 2px; /* 角を少しだけ丸く */
}

/* マウスを乗せた時に画像を少し動かす（クリックできる感を出す） */
.newsletter-list .item a:hover img {
    transform: translateY(-3px); /* 上に少し持ち上がる */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* 影を濃くする */
    opacity: 0.9;
}

/* 4. タイトル（●●号）のデザイン */
.newsletter-list .item .itemdata h4 {
    text-decoration: none !important; /* 下線なし */
    color: #6a588c !important; /* 神社のテーマカラー（紫） */
    font-weight: bold;
    margin-top: 10px;
    transition: color 0.3s;
}

/* マウスを乗せた時だけタイトルを少し明るく、下線を表示 */
.newsletter-list .item a:hover .itemdata h4 {
    text-decoration: underline !important; /* ここだけ下線を出す */
    color: #4e3f6b !important; /* 濃い紫へ */
}

/* 5. 発行日・説明文のデザイン（普通の文章に見せる） */
.newsletter-list .item .itemdata h5,
.newsletter-list .item .itemdata p {
    text-decoration: none !important; /* 下線なし */
    color: #555 !important; /* 濃いグレー */
    font-weight: normal;
}

/* --- スマホ表示：八幡神社便り（ニュース）を2列固定にする設定 --- */
@media screen and (max-width: 768px) {
    
    /* リスト全体の設定：Flexboxを使って整列させる */
    .newsletter-list {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important; /* 左右に配置し、間に余白を作る */
        width: 100% !important;
        padding: 0 5px !important; /* 画面端に少し余白 */
        box-sizing: border-box; /* 余白の計算を簡単にする */
    }

    /* 各記事（カード）の設定：横幅を画面の約半分にする */
    .newsletter-list .item {
        width: 48% !important; /* 2列にするため48%（残り4%は隙間になります） */
        margin: 0 0 20px 0 !important; /* 下に余白 */
        padding: 0 !important;
        float: none !important;
        display: block !important;
        height: auto !important; /* 高さの固定を解除 */
        background-color: transparent !important;
    }

    /* 画像の設定：枠に合わせて伸縮（レスポンシブ対応） */
    .newsletter-list .item img {
        width: 100% !important; /* 親要素（48%）の幅いっぱいに広げる */
        height: auto !important; /* 縦横比を崩さない */
        max-width: 100% !important;
        display: block;
        margin: 0 auto !important;
        /* 少し影をつけて浮き出させる（見やすくするため） */
        box-shadow: 0 2px 5px rgba(0,0,0,0.15); 
    }

    /* テキスト部分の設定：幅固定を解除して全体を使えるようにする */
    .newsletter-list .item .itemdata {
        width: 100% !important; /* 元の「160px固定」を解除 */
        padding: 5px 0 !important;
        text-align: left !important; /* 文字は左揃えで見やすく */
        margin: 0 !important;
    }

    /* タイトルの文字サイズ調整 */
    .newsletter-list .item .itemdata h4 {
        font-size: 14px !important; /* スマホで見やすい大きさに */
        line-height: 1.4 !important;
        margin-top: 5px !important;
    }

    /* 日付・説明の文字サイズ調整 */
    .newsletter-list .item .itemdata h5,
    .newsletter-list .item .itemdata p {
        font-size: 12px !important; /* 少し小さくして情報を収める */
        line-height: 1.4 !important;
    }
    
    /* 発行日の文字色調整（見やすく） */
    .newsletter-list .item .itemdata h5 {
        margin-bottom: 3px !important;
        color: #888 !important;
    }
}


















/* --- トップページ　スライドショーの設定 --- */
#main-slideshow {
    position: relative;
    width: 100%;
    /* 写真の縦横比を保つための高さ設定（スマホ対応） */
    padding-top: 56.25%; /* 16:9の場合。4:3なら75%に */
    overflow: hidden;
    margin-bottom: 30px; /* 下のトピックスとの間隔 */
}

#main-slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠に合わせて画像を切り抜く */
    opacity: 0; /* 最初は隠しておく */
    transition: opacity 2s ease-in-out; /* 2秒かけてふわっと変わる */
    z-index: 0;
}

/* 1枚目だけ最初から表示 */
#main-slideshow img.active {
    opacity: 1;
    z-index: 1;
}

/* --- スライドショーのタイマーバー設定 --- */
#slide-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px; /* 線の太さ */
    background-color: #c4a868; /* 神社のアクセントカラー（金色） */
    z-index: 10; /* 画像より手前に表示 */
    width: 0; /* 最初は幅0 */
}

/* アニメーションの動き（クラスがついた時だけ動く） */
#slide-timer.run {
    animation: timerBar 5s linear; /* 5秒かけて等速で動く */
}

/* 伸びていくアニメーションの定義 */
@keyframes timerBar {
    0% { width: 0; }
    100% { width: 100%; }
}/* --- スライドショーの設定 --- */
#main-slideshow {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9比率 */
    overflow: hidden;
    margin-bottom: 30px;
}

#main-slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    z-index: 0;
}

#main-slideshow img.active {
    opacity: 1;
    z-index: 1;
}

/* --- タイマーバーの設定（classに変更） --- */
.slide-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 5px;
    background-color: #c4a868; /* 金色 */
    z-index: 10;
    width: 0;
}

.slide-timer.run {
    animation: timerBar 5s linear;
}

@keyframes timerBar {
    0% { width: 0; }
    100% { width: 100%; }
}






/* --- ▼▼▼ ここから修正：オープニング（全画面・モーダル風）用 ▼▼▼ */
#opening-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999;
    /* 背景色：少し透ける黒 */
    background-color: rgba(0, 0, 0, 0.85); 
}

/* PCなどの基本設定：画面の70%の大きさで表示 */
#opening-overlay img {
    width: 80%;  /* 横幅は最大80% */
    height: 70%; /* 高さは70%（上下に15%ずつの余白ができます） */
    
    /* 画面のど真ん中に配置 */
    position: absolute;
    top: 45%; /* 少しだけ上にずらして、下の文字スペースを確保 */
    left: 50%;
    transform: translate(-50%, -50%);
    
    object-fit: cover; /* 枠いっぱいにトリミング */
    object-position: center center;
    
    opacity: 0;
    transition: opacity 2s ease-in-out;
    
    /* 写真が浮いているような影 */
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
}

#opening-overlay img.active {
    opacity: 1;
}

/* 縦長写真（集合写真など）用の特別ルール */
#main-slideshow img.vertical-mode,
#opening-overlay img.vertical-mode {
    object-fit: contain !important;
}


/* --- クリック案内のデザイン修正（見切れ・改行ズレ防止） --- */
.click-guide {
    display: none;
}

#opening-overlay .click-guide {
    display: block;
    position: absolute;
    /* 写真の下（画面下部から10%の位置）に配置 */
    bottom: 10%; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: 100%;
    
    /* 文字のデザイン */
    color: #fff;
    font-size: 1.2rem;
    font-family: 'Shippori Mincho', serif;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(0,0,0,0.8);
    pointer-events: none;
    
    text-align: center;
    line-height: 1.5;
    
    animation: blinkGuide 2s infinite ease-in-out;
    opacity: 0;
    transition: opacity 1s ease;
}

/* ★ここがポイント：強制的に2行にする設定 */
#opening-overlay .click-guide span {
    display: block; /* 「Click to Enter」をブロックにして改行させる */
    margin-top: 10px; /* 上の文字との間隔 */
    font-size: 1.4em; /* 文字を大きく */
}

@keyframes blinkGuide {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* 文字の表示・非表示ルール */
#opening-overlay img.active ~ .click-guide { opacity: 1; }
#opening-overlay img:nth-of-type(1).active ~ .click-guide { opacity: 0 !important; }

/* ▼▼▼ スマホの時だけの特別ルール ▼▼▼ */
@media screen and (max-width: 768px) {
    #opening-overlay img {
        /* スマホは横幅いっぱい、高さも少し大きめに */
        width: 100%;
        height: 80%; /* 文字スペースのために少し空ける */
        top: 45%; 
        left: 50%;
        transform: translate(-50%, -50%); /* 中央配置 */
        
        object-fit: contain;
        box-shadow: none;
    }
    
    #opening-overlay .click-guide {
        bottom: 5%; /* スマホではもう少し下に */
        font-size: 1.0rem;
    }
}




/* --- 御由緒略記 御祭神・御利益セクションのデザイン --- */

.deities-section {
    margin: 40px 0;
    font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif; /* 明朝体で格式高く */
}

/* 主祭神カード（特別感のあるデザイン） */
.deity-card.main-deity {
    border: 2px solid #6a588c; /* テーマカラーの枠線 */
    background-color: #fcfbff; /* ほんのり紫がかった白 */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 4px 15px rgba(106, 88, 140, 0.15);
}

.deity-card.main-deity .card-header {
    background-color: #6a588c;
    color: #fff;
    padding: 15px;
    text-align: center;
}

.deity-card.main-deity h4 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff !important; /* 強制的に白 */
}

.deity-card.main-deity .subtitle {
    font-size: 0.8rem;
    opacity: 0.8;
    font-family: sans-serif;
    letter-spacing: 0.1em;
}

.deity-card.main-deity .card-body {
    padding: 30px 20px;
    text-align: center;
}

/* 主祭神リスト */
.deity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.deity-list li {
    margin-bottom: 25px;
    border-bottom: 1px dotted #ccc; /* 点線で区切る */
    padding-bottom: 15px;
    background-image: none !important; /* 既存の点の背景を消す */
    padding-left: 0 !important;
}

.deity-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.deity-list .name {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.deity-list .kana {
    display: block;
    font-size: 0.9rem;
    color: #666;
}

/* ご利益タグ */
.tag {
    display: inline-block;
    background-color: #eaddff; /* 薄い紫 */
    color: #4e3f6b;
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 20px;
    margin-top: 8px;
    font-family: sans-serif;
}

/* 境内社の見出し */
.sub-title-header {
    border-left: 5px solid #6a588c;
    padding-left: 15px;
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: #333;
    display: flex;
    align-items: baseline;
    background: none !important; /* 既存背景リセット */
}

.sub-title-header .en {
    font-size: 0.9rem;
    color: #888;
    margin-left: 10px;
    font-family: sans-serif;
}

/* 境内社グリッド（PCでは2列、スマホでは1列） */
.shrine-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.deity-card.sub-shrine {
    width: 48%; /* PCで2列 */
    background: #fff;
    border: 1px solid #ddd;
    border-top: 4px solid #c4a868; /* アクセントの金色の線 */
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-radius: 4px;
}

.sub-shrine .shrine-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #6a588c;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.sub-shrine .deity-name {
    font-size: 1.1rem;
    font-weight: bold;
}

.sub-shrine .deity-kana {
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 10px;
}

.sub-shrine .sub-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.sub-shrine .sub-list li {
    margin-bottom: 5px;
    background: none !important;
    padding-left: 0 !important;
}
.kana-s {
    font-size: 0.8rem;
    color: #777;
    margin-left: 5px;
}

.blessing-note {
    margin-top: 10px;
    font-size: 0.85rem;
    color: #c4a868; /* 金色 */
    font-weight: bold;
}

/* スマホ用レスポンシブ設定 */
@media screen and (max-width: 768px) {
    .deity-list .name {
        font-size: 1.3rem;
    }
    
    .deity-card.sub-shrine {
        width: 100%; /* スマホでは1列 */
    }
}


/* --- スマホ用フローティングメニュー（ボトムナビ） --- */

/* 基本設定：PCでは非表示にする */
.floating-menu {
    display: none;
}

/* スマホ表示の時だけ有効にする設定 */
@media screen and (max-width: 768px) {
    
    /* 下に余白を作る（メニューがコンテンツに被らないように） */
    body {
        padding-bottom: 70px !important;
    }
    
    .floating-menu {
        display: block;
        position: fixed; /* 画面に固定 */
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px; /* メニューの高さ */
        background-color: rgba(255, 255, 255, 0.98); /* 白背景（少し透ける） */
        border-top: 2px solid #c4a868; /* アクセントの金色の線 */
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* ふんわり影をつける */
        z-index: 9999; /* 最前面に表示 */
        
        /* iPhone X以降の下部バー対策 */
        padding-bottom: env(safe-area-inset-bottom);
    }

    .floating-menu ul {
        display: flex; /* 横並びにする */
        justify-content: space-around; /* 均等に配置 */
        align-items: center;
        margin: 0;
        padding: 0;
        list-style: none;
        height: 100%;
    }

    .floating-menu li {
        flex: 1; /* 幅を均等に */
        text-align: center;
        padding: 0;
        margin: 0;
        border: none !important;
        background: none !important;
    }

    .floating-menu a {
        display: flex;
        flex-direction: column; /* アイコンと文字を縦並びに */
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        color: #6a588c !important; /* 文字色：神社の紫 */
        padding: 5px 0;
        height: 100%;
        box-sizing: border-box;
        font-family: sans-serif; /* 読みやすいゴシック体 */
        transition: background-color 0.2s;
    }
    
    /* タップした時の反応 */
    .floating-menu a:active {
        background-color: #f3eff9; /* 薄い紫の背景 */
    }

    /* アイコン（SVG）の設定 */
    .floating-menu svg {
        width: 24px;
        height: 24px;
        fill: currentColor; /* 文字色と同じ色になる */
        margin-bottom: 3px;
    }

    /* 文字の設定 */
    .floating-menu span {
        font-size: 10px; /* 小さくして収める */
        line-height: 1;
        font-weight: bold;
        letter-spacing: -0.05em; /* 文字間を少し詰める */
    }
}



/* --- 境内のご案内ページ：文字だけのモダンデザイン --- */

/* グリッドレイアウト */
.keidai-grid.text-mode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin: 40px 0;
}

/* カード全体の基本デザイン */
.keidai-card {
    display: block;
    background: #fff;
    /* ほんのり和紙のような生成り色にする場合： background: #fdfdfb; */
    border: 1px solid #e0dbe9; /* 薄い藤色の枠線 */
    border-left: 5px solid #6a588c; /* 左側に太い藤色のアクセント */
    border-radius: 4px; /* 角を少しだけ丸く */
    text-decoration: none !important;
    color: #333;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

/* リンク付きカードのホバー時 */
a.keidai-card:hover {
    transform: translateY(-3px); /* 浮き上がる */
    box-shadow: 0 5px 15px rgba(106, 88, 140, 0.15);
    background-color: #fcfbff; /* 薄い紫の背景に変化 */
    border-color: #c4a868; /* 枠線を金色に */
    border-left-color: #c4a868;
}

/* カードの中身 */
.card-content {
    padding: 25px 20px;
    text-align: center;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 140px; /* 最低限の高さを確保 */
}

/* 英語のサブタイトル（装飾用） */
.sub-en {
    display: block;
    font-family: sans-serif;
    font-size: 0.75rem;
    color: #c4a868; /* 金色 */
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

/* メインのタイトル */
.keidai-card h4 {
    margin: 5px 0 10px 0;
    font-size: 1.3rem;
    font-weight: bold;
    color: #6a588c; /* 藤色 */
    font-family: "Shippori Mincho", serif;
    line-height: 1.4;
}

/* カッコ書きの注釈 */
.keidai-card h4 .note {
    font-size: 0.7em;
    display: block; /* 改行させる */
    font-weight: normal;
    margin-top: 2px;
}

/* 説明文 */
.desc {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

/* 「詳しく見る」ボタン風テキスト */
.link-text {
    margin-top: 15px;
    font-size: 0.8rem;
    color: #fff;
    background-color: #6a588c;
    padding: 3px 12px;
    border-radius: 20px;
    opacity: 0; /* 最初は隠す */
    transform: translateY(5px);
    transition: all 0.3s ease;
}

/* ホバー時に「詳しく見る」を表示 */
a.keidai-card:hover .link-text {
    opacity: 1;
    transform: translateY(0);
}

/* リンクなしカード（背景色を変えて控えめに） */
.keidai-card.no-link {
    background: #f5f5f5;
    border-color: #ddd;
    border-left-color: #aaa; /* グレーのアクセント */
    cursor: default;
}
.keidai-card.no-link h4 {
    color: #555;
}
.keidai-card.no-link .sub-en {
    color: #999;
}

/* --- 特別なデザイン（拝殿） --- */
@media screen and (min-width: 769px) {
    .keidai-card.main-spot {
        grid-column: span 2; /* PCでは2つ分の幅 */
        background-color: #fdfdfb;
        border-left-width: 8px;
    }
    .keidai-card.main-spot h4 {
        font-size: 1.6rem;
    }
}

/* スマホ調整 */
@media screen and (max-width: 768px) {
    .keidai-grid.text-mode {
        grid-template-columns: 1fr; /* 1列 */
    }
    .keidai-card {
        border-left-width: 6px; /* スマホでもアクセントを見やすく */
    }
    .card-content {
        min-height: auto; /* 高さは成り行きで */
        padding: 20px;
        align-items: flex-start; /* 左寄せにする */
        text-align: left;
    }
    .keidai-card h4 .note {
        display: inline; /* スマホなら改行しなくてもいいかも */
    }
}


/* =========================================
   トップページ　index.html トピックス：あっさり系・和風モダンバナー
========================================= */
.assari-banners {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-top: 15px;
}

/* カード共通のベーススタイル */
.banner-card {
    display: block;
    width: 48%;
    height: 180px; /* あっさり見せるため少し高さを抑える */
    text-decoration: none !important;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* ホバー時のふんわりとした浮き上がり */
.banner-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.banner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    padding: 15px;
}

/* 文字のスタイリング */
.banner-subtitle {
    font-size: 0.75em;
    color: #888;
    margin-bottom: 8px;
    letter-spacing: 0.1em;
}

.banner-title {
    font-size: 1.25em;
    color: #333;
    margin: 0 0 12px 0;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.banner-date, .banner-status {
    font-size: 0.85em;
    font-weight: bold;
    border-bottom: 1px solid;
    padding-bottom: 2px;
}

/* -----------------------------------------
   個別のカラーリング（上部に細いアクセントライン）
----------------------------------------- */
/* 左：便り（若草色で日常の清らかさを表現） */
.banner-letter {
    border-top: 3px solid #7c9473; 
}
.banner-letter .banner-date {
    color: #7c9473;
}

/* 右：大祭（サイトカラーの高貴な紫で特別感を表現） */
.banner-festival {
    border-top: 3px solid #5a4b81; 
}
.banner-festival .banner-status {
    color: #C5A059; /* 神社らしい落ち着いた金色 */
    border-bottom-color: #C5A059;
}

/* -----------------------------------------
   スマホ表示用のレスポンシブ対応
----------------------------------------- */
@media screen and (max-width: 768px) {
    .assari-banners {
        flex-direction: column;
        gap: 15px;
    }
    .banner-card {
        width: 100%;
        height: auto;
        min-height: 120px;
    }
}


/* =========================================
   サイドバー（住所・お問い合わせ）のモダン化
========================================= */
#shopinfo {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-top: 20px;
}

#shopinfo h4 {
    font-size: 1.1em;
    color: #333;
    border-bottom: 2px solid #5a4b81; /* 紫のラインで引き締める */
    padding-bottom: 8px;
    margin-bottom: 12px;
}

/* 住所の不自然な改行を防ぐ */
#shopinfo p {
    font-size: 0.9em;
    line-height: 1.6;
    color: #555;
    margin-bottom: 15px;
    word-break: keep-all; /* 「くだし」で変に改行させない */
    overflow-wrap: break-word;
}

/* 古いアイコン画像を消す */
#shopinfo p a img {
    display: none; 
}

/* お問い合わせリンクを「ボタン」化する */
#shopinfo p a {
    display: block; /* ブロック要素にして横幅いっぱいに */
    text-align: center;
    background-color: #5a4b81; /* 神社の紫 */
    color: #ffffff;
    text-decoration: none;
    padding: 12px 10px;
    border-radius: 4px;
    font-weight: bold;
    letter-spacing: 0.05em;
    transition: background-color 0.3s ease;
}

#shopinfo p a:hover {
    background-color: #453965; /* マウスオーバーで少し濃く */
}

/* ボタンにメールアイコン風の記号を添える（お好みで） */
#shopinfo p a::before {
    content: "\2709 ";
    margin-right: 5px;
}