@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*
 * おでかけブログ Cocoon子テーマ追加CSS
 * Cocoon設定 > 追加CSS、または子テーマ style.css 末尾へ追記。
 */

.odekake-area-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 24px 0;
}

.odekake-area-card {
	display: block;
	min-height: 118px;
	padding: 16px;
	border: 1px solid #d8ded8;
	border-radius: 8px;
	background: #fff;
	color: #1f2a24;
	text-decoration: none;
	box-shadow: 0 1px 0 rgba(31, 42, 36, 0.05);
}

.odekake-area-card:hover,
.odekake-area-card:focus {
	border-color: #3f7d58;
	color: #184b2c;
	text-decoration: none;
}

.odekake-area-card__label {
	display: block;
	margin-bottom: 8px;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.35;
}

.odekake-area-card__description {
	display: block;
	font-size: 0.9rem;
	line-height: 1.65;
	color: #55625b;
}

.odekake-spot-info {
	width: 100%;
	margin: 20px 0;
	border-collapse: collapse;
	border-top: 1px solid #d8ded8;
}

.odekake-spot-info th,
.odekake-spot-info td {
	padding: 12px 14px;
	border-bottom: 1px solid #d8ded8;
	vertical-align: top;
	line-height: 1.7;
}

.odekake-spot-info th {
	width: 7.5em;
	background: #f5f8f5;
	font-weight: 700;
	text-align: left;
	white-space: nowrap;
}

.odekake-hub-back {
	margin: 28px 0;
}

.odekake-hub-back a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 11px 16px;
	border: 1px solid #3f7d58;
	border-radius: 8px;
	color: #184b2c;
	background: #f7fbf7;
	font-weight: 700;
	text-decoration: none;
}

.odekake-hub-back a::before {
	content: "<";
	font-weight: 700;
}

.odekake-faq {
	margin: 24px 0;
}

.odekake-faq__item {
	border: 1px solid #d8ded8;
	border-radius: 8px;
	background: #fff;
}

.odekake-faq__item + .odekake-faq__item {
	margin-top: 10px;
}

.odekake-faq__item summary {
	cursor: pointer;
	padding: 14px 16px;
	font-weight: 700;
	line-height: 1.6;
}

.odekake-faq__answer {
	padding: 0 16px 16px;
	line-height: 1.8;
	color: #2f3a34;
}

@media (max-width: 600px) {
	.odekake-area-cards {
		grid-template-columns: 1fr;
	}

	.odekake-spot-info th,
	.odekake-spot-info td {
		display: block;
		width: 100%;
	}

	.odekake-spot-info th {
		padding-bottom: 6px;
		border-bottom: 0;
	}

	.odekake-spot-info td {
		padding-top: 6px;
	}
}

/*
 * フロントトップだけCocoonのシェアボタンを非表示
 * Cocoon設定の追加CSS、または子テーマ style.css 末尾へ追記。
 */

body.home .sns-share,
body.home .sns-share-message,
body.home .sns-share-buttons,
body.home .share-button,
body.home .share-buttons,
body.home .sns-buttons,
body.home .bc-brand-color,
body.front-page .sns-share,
body.front-page .sns-share-message,
body.front-page .sns-share-buttons,
body.front-page .share-button,
body.front-page .share-buttons,
body.front-page .sns-buttons,
body.front-page .bc-brand-color {
	display: none !important;
}

/* ==========================================
 * ここから差し替える完全版CSS
 * ========================================== */

/* 1. 不要な要素の非表示（カルーセル・標準ヘッダー・日付） */
.home #carousel {
	display: none !important;
}
.home .header-in {
	display: none !important;
}
.home.page .post-date,
.home.page .post-update,
.home.page .date-tags,
.home.page .post-meta {
	display: none !important;
}

/* 2. トップページ専用の余白徹底排除（隙間ゼロ化） */
.home #content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
.home #main {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
.home.page .entry-content {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
.home #header {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.home.page .main {
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.home.page .article {
	background-color: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}
.home .entry-content > p:first-child:empty,
.home .entry-content > br:first-child {
	display: none !important;
}

/* 3. FV（ヒーロー画像）を画面幅いっぱいに全幅表示 */
.odekake-front-hero {
	display: block !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-top: 0 !important;
	margin-bottom: 40px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: none !important;
	overflow: hidden;
}
.odekake-front-hero__visual {
	margin: 0 !important;
	width: 100%;
}
.odekake-front-hero__visual img {
	display: block;
	width: 100% !important;
	height: auto !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.odekake-front-hero__seo-title {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* 4. エリアカード：全体クリック・傾き・アニメーション */
.odekake-front a,
.odekake-front-areas a,
.odekake-front-areas a *,
.odekake-front-scene-list a {
	text-decoration: none !important;
	border-bottom: none !important;
}

.odekake-front-area {
	position: relative;
	display: block !important;
	min-height: 154px;
	padding: 18px;
	overflow: hidden;
	border: 1px solid var(--odekake-line) !important;
	border-radius: 12px;
	background: #fff;
	color: var(--odekake-ink) !important;
	box-shadow: 0 4px 12px rgba(32, 36, 38, 0.04) !important;
	transition: transform 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), 
	            box-shadow 0.25s cubic-bezier(0.25, 0.8, 0.25, 1), 
	            border-color 0.25s ease !important;
}

/* 背景アイコン（絵文字）の共通設定 */
.odekake-front-area::after {
	position: absolute;
	right: 10px;
	bottom: -5px;
	font-size: 5rem;
	line-height: 1;
	opacity: 0.12;
	font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif !important;
	transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.2), 
	            opacity 0.3s ease;
	pointer-events: none;
}

/* データベースエラーを回避するUnicodeエスケープ記述 */
.odekake-front-area--akashi::after   { content: "\1f419" !important; } /* タコ (🐙) */
.odekake-front-area--kobe::after     { content: "\1f3a1" !important; } /* 観覧車 (🎡) */
.odekake-front-area--harima::after   { content: "\1f995" !important; } /* 恐竜 (🦕) */
.odekake-front-area--himeji::after   { content: "\1f3ef" !important; } /* お城 (🏯) ★姫路城！ */
.odekake-front-area--awaji::after    { content: "\1f9c5" !important; } /* 玉ねぎ (🧅) */
.odekake-front-area--kansai::after   { content: "\1f697" !important; } /* 自動車 (🚗) */

/* PC表示（画面幅601px以上）での傾き */
@media (min-width: 601px) {
	.odekake-front-areas a:nth-child(odd) {
		transform: rotate(-1.5deg) !important;
	}
	.odekake-front-areas a:nth-child(even) {
		transform: rotate(1.2deg) !important;
	}
	.odekake-front-areas a:nth-child(3n) {
		transform: rotate(-0.8deg) !important;
	}
}

/* ホバー時に起き上がる */
.odekake-front-area:hover,
.odekake-front-area:focus {
	transform: rotate(0deg) translateY(-8px) scale(1.02) !important;
	z-index: 10;
}
.odekake-front-area:hover::after {
	opacity: 0.25;
	transform: scale(1.15) rotate(10deg) !important;
}

/* エリア別のホバーカラー＆オーラ */
.odekake-front-area--akashi:hover {
	border-color: #d84d34 !important;
	box-shadow: 0 16px 32px rgba(216, 77, 52, 0.18) !important;
}
.odekake-front-area--kobe:hover {
	border-color: #147c93 !important;
	box-shadow: 0 16px 32px rgba(20, 124, 147, 0.18) !important;
}
.odekake-front-area--harima:hover {
	border-color: #4c7a57 !important;
	box-shadow: 0 16px 32px rgba(76, 122, 87, 0.18) !important;
}
.odekake-front-area--himeji:hover {
	border-color: #9245a8 !important;
	box-shadow: 0 16px 32px rgba(146, 69, 168, 0.18) !important;
}
.odekake-front-area--awaji:hover {
	border-color: #f2b84b !important;
	box-shadow: 0 16px 32px rgba(242, 184, 75, 0.22) !important;
}
.odekake-front-area--kansai:hover {
	border-color: #e05295 !important;
	box-shadow: 0 16px 32px rgba(224, 82, 149, 0.18) !important;
}

/* スマホ表示（画面幅600px以下） */
@media (max-width: 600px) {
	.odekake-front-areas a {
		transform: none !important;
	}
	.odekake-front-area:hover {
		transform: translateY(-4px) !important;
	}
}

/* ==========================================
 * エリアカード内のテキスト縦並び ＆ 隙間（余白）リペア
 * ========================================== */

/* 1. キッカー（「海辺・商店街・明石焼き」など）を縦並びに */
.odekake-front-area__kicker {
	display: block !important;
	color: var(--odekake-red) !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
}

/* 2. エリア名（「明石」など）を大きくし、上下に隙間を作る */
.odekake-front-area__name {
	display: block !important;
	margin: 8px 0 !important;
	font-size: 1.45rem !important;
	font-weight: 800 !important;
	line-height: 1.3 !important;
}

/* 3. 説明文を縦並びにして、背景絵文字の上に正しく重ねる */
.odekake-front-area__text {
	display: block !important;
	position: relative !important;
	z-index: 2 !important; /* 絵文字（z-index:1）の上に重ねて文字の視認性を確保します */
	color: var(--odekake-muted) !important;
	line-height: 1.7 !important;
}

/* ==========================================
 * エリアカード：親グリッドの復元 ＆ 上下重なり対策
 * ========================================== */

/* 1. 親コンテナを3カラムのグリッドにし、カード間に20pxの隙間を確保しますわ */
.odekake-front-areas {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 20px !important; /* カード同士の「隙間」をしっかり確保 */
	margin: 20px 0 40px !important;
}

/* 2. カード自体の上下マージン（縦並びになった時の念のための安全策ですわ） */
.odekake-front-area {
	margin-bottom: 10px !important;
}

/* 3. タブレット表示（画面幅900px以下）の時は2カラムにして隙間を維持 */
@media (max-width: 900px) {
	.odekake-front-areas {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
}

/* 4. スマホ表示（画面幅600px以下）の時は1カラムにし、重ならないよう隙間を調整 */
@media (max-width: 600px) {
	.odekake-front-areas {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
	.odekake-front-area {
		margin-bottom: 16px !important; /* スマホ時のカードの隙間 */
	}
}

/* ==========================================
 * 「目的で探す」セクション：ポップ＆クラフト風装飾
 * ========================================== */

/* 1. セクション全体の背景をクラフト紙風にして、ステッチ（点線）で囲みますわ */
.odekake-front-scenes {
	margin: 0 0 32px !important;
	padding: 24px !important;
	border: 2px dashed #d2c8b8 !important; /* 可愛いステッチ風の点線 */
	border-radius: 16px !important;
	background: #FAF6EE !important; /* 温かみのあるクラフト紙風カラー */
	box-shadow: 0 4px 10px rgba(160, 150, 130, 0.08) !important;
	transform: rotate(-0.5deg); /* 全体もほんの少しだけ傾けて手作り感を演出 */
}

/* 2. キッカー「目的で探す」を斜めに貼ったマスキングテープ風に */
.odekake-front-section-head__kicker {
	display: inline-block !important;
	padding: 4px 10px !important;
	background: #fdf2d0 !important; /* マステの黄色 */
	border-left: 3px solid #f2b84b !important;
	color: #6a4310 !important;
	font-size: 0.85rem !important;
	font-weight: 800 !important;
	transform: rotate(-2deg) translateY(-2px) !important;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.05) !important;
}

/* 3. タイトル（全体をミントグリーンのバック帯で包みますわ！） */
.odekake-front-section-head h2 {
	display: inline-block !important;
	margin: 8px 0 0 0 !important;
	font-size: 1.35rem !important; /* 少しだけサイズを整えましたわ */
	font-weight: 800 !important;
	color: var(--odekake-ink) !important;
	
	/* 💡 下線ではなく、文字全体のバックグラウンド帯にしましたわ！ */
	background: #e2f2f2 !important; 
	padding: 6px 14px !important;    /* 帯の中に心地よい余白を作ります */
	border-radius: 8px !important;   /* 角を丸めてポップな印象に */
	
	line-height: 1.3 !important;
	padding-left: 14px !important;   /* 左の余白も均等に確保 */
}

/* 💡 テーマ側の余計なアイコン消去は維持しますわ */
.odekake-front-section-head h2::before {
	content: none !important;
	display: none !important;
}



/* 4. タグボタンを丸っこいバッジ風にし、先頭に絵文字を追加しますわ */
.odekake-front-scene-list {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-top: 16px !important;
}

.odekake-front-scene-list a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	min-height: 40px !important;
	padding: 8px 16px !important;
	border: 1px solid #d2c8b8 !important;
	border-radius: 20px !important; /* 丸みのあるカプセル型 */
	background: #fff !important;
	color: var(--odekake-ink) !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	box-shadow: 0 2px 5px rgba(0,0,0,0.04) !important;
	transition: all 0.2s ease !important;
}

/* 5. 各ボタンの左側に、安全な暗号コードでアイコン絵文字を自動挿入しますわ！ */
.odekake-front-scene-list a::before {
	font-size: 1.15rem !important;
	font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
}

.odekake-front-scene-list a:nth-child(1)::before { content: "\1f373"; } /* グルメ 🍳 */
.odekake-front-scene-list a:nth-child(2)::before { content: "\1f3a1"; } /* テーマパーク 🎡 */
.odekake-front-scene-list a:nth-child(3)::before { content: "\26e9"; }  /* 神社・仏閣 ⛩️ */
.odekake-front-scene-list a:nth-child(4)::before { content: "\1f476"; } /* 子連れOK 👶 */
.odekake-front-scene-list a:nth-child(5)::before { content: "\2614"; }  /* 雨の日OK ☔ */

/* 6. ホバー時に、ピョコッと上に浮き上がり、それぞれのテーマカラーに光りますの！ */
.odekake-front-scene-list a:hover {
	transform: translateY(-3px) scale(1.03) !important;
	color: #fff !important; /* テキストを白文字にしてバッジらしく */
}

/* グルメ：オレンジ 🍳 */
.odekake-front-scene-list a:nth-child(1):hover {
	background: #f27435 !important;
	border-color: #f27435 !important;
	box-shadow: 0 6px 12px rgba(242, 116, 53, 0.25) !important;
}
/* テーマパーク：パープル 🎡 */
.odekake-front-scene-list a:nth-child(2):hover {
	background: #9245a8 !important;
	border-color: #9245a8 !important;
	box-shadow: 0 6px 12px rgba(146, 69, 168, 0.25) !important;
}
/* 神社・仏閣：レッド ⛩️ */
.odekake-front-scene-list a:nth-child(3):hover {
	background: #d84d34 !important;
	border-color: #d84d34 !important;
	box-shadow: 0 6px 12px rgba(216, 77, 52, 0.25) !important;
}
/* 子連れOK：グリーン 👶 */
.odekake-front-scene-list a:nth-child(4):hover {
	background: #4c7a57 !important;
	border-color: #4c7a57 !important;
	box-shadow: 0 6px 12px rgba(76, 122, 87, 0.25) !important;
}
/* 雨の日OK：ブルー ☔ */
.odekake-front-scene-list a:nth-child(5):hover {
	background: #147c93 !important;
	border-color: #147c93 !important;
	box-shadow: 0 6px 12px rgba(20, 124, 147, 0.25) !important;
}

/* ==========================================
 * お出かけブログ：クラフト調オリーブフッター
 * ========================================== */

/* フッター全体の背景と文字色 */
.footer {
  background-color: #2d3e33 !important; /* 深いオリーブグリーン */
  color: #f4f6f0 !important; /* サンドホワイト */
  padding: 40px 0 20px 0;
  border-top: 4px solid #f1c40f; /* アクセント of マスタードイエロー */
}

/* フッター見出し */
.footer .widget-title,
.footer h3.footer-title {
  color: #f1c40f !important;
  font-size: 1.1rem;
  border-bottom: 2px dashed #f1c40f;
  padding-bottom: 8px;
  margin-bottom: 15px;
  font-weight: bold;
}

/* リンクの色とホバー効果 */
.footer a {
  color: #f4f6f0 !important;
  transition: color 0.3s ease;
}
.footer a:hover {
  color: #81a687 !important; /* 淡いリーフグリーン */
  text-decoration: none;
}

/* 左カラム：ガチャボックス */
.footer-gacha-box {
  text-align: center;
  padding: 10px;
}
.gacha-description {
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* 🎲 ガチャボタン本体 */
.gacha-btn {
  display: inline-block;
  background-color: #f1c40f !important;
  color: #2d3e33 !important;
  font-weight: bold;
  font-size: 1rem;
  padding: 12px 28px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 0 #b7950b;
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s !important;
}

/* 🚨 ガチャボタン：ホバー時の立体浮き上がりエフェクト（ダイスの揺れは削除） */
.gacha-btn:hover {
  background-color: #f4d03f !important; /* 少し明るいイエロー */
  transform: translateY(-2px) !important; /* 少し上に浮く */
  box-shadow: 0 6px 0 #b7950b !important; /* 影を厚くして浮遊感を出す */
}

/* ガチャボタン：クリック（アクティブ）時の押し込み */
.gacha-btn:active {
  transform: translateY(4px) !important;
  box-shadow: none !important;
}
.gacha-btn:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}

/* 🎰 ガチャ結果表示エリアの装飾 */
.gacha-result-wrap {
  margin-top: 20px;
  padding: 20px 15px;
  background: rgba(244, 246, 240, 0.05);
  border: 2px dashed #f1c40f;
  border-radius: 8px;
  animation: gacha-fade-in 0.4s ease-out forwards;
}

.gacha-result-lead {
  font-size: 0.8rem;
  color: #81a687;
  margin-bottom: 10px;
  font-weight: bold;
}

.gacha-result-title {
  font-size: 1.15rem;
  font-weight: bold;
  color: #f1c40f !important;
  margin-bottom: 18px;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
  transition: filter 0.1s, opacity 0.1s;
}

.gacha-spinning {
  opacity: 0.5;
  filter: blur(1.5px);
}

/* 遷移ボタン（初期表示） */
.footer .gacha-result-go-btn {
  display: inline-block !important;
  background-color: #81a687 !important;
  color: #2d3e33 !important;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s ease, background-color 0.2s, color 0.2s !important;
}

/* 遷移ボタン（ホバー時の文字色固定） */
.footer .gacha-result-go-btn:hover {
  background-color: #f1c40f !important;
  color: #2d3e33 !important;
  text-decoration: none !important;
}

@keyframes gacha-fade-in {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 右カラム：タグクラウドのポップ化 */
.footer .tagcloud a {
  display: inline-block;
  background: rgba(244, 246, 240, 0.1);
  padding: 4px 10px;
  margin: 4px;
  border-radius: 4px;
  font-size: 0.85rem !important;
  border: 1px solid rgba(244, 246, 240, 0.2);
}
.footer .tagcloud a:hover {
  background: #f1c40f;
  color: #2d3e33 !important;
}

/* ==========================================
 * 「上へ戻る」カミカミ大王カスタマイズボタン
 * ========================================== */
#go-to-top {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 140px !important;
  height: 140px !important;
  bottom: 20px !important;
  right: 20px !important;
  cursor: pointer;
  z-index: 9999;
  position: fixed !important;
}

/* デフォルトの矢印アイコンを隠し、カミカミ大王を配置 */
#go-to-top .go-to-top-button {
  background-image: url('http://b-spot01.net/wp/wp-content/uploads/2026/07/kamikami_daioh_mascot.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* デフォルトのフォントアイコン（矢印マーク）を完全に消去 */
.go-to-top-button::before,
.go-to-top-button::after,
.go-to-top-button span::before,
.go-to-top-button span::after {
  content: none !important;
  display: none !important;
}

/* ホバー時のぴょこぴょこアニメーション */
#go-to-top:hover {
  animation: kamikami-bounce 0.6s ease infinite alternate;
}

@keyframes kamikami-bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-20px);
  }
}

/* 💬 カミカミ大王の「上へ戻るよ！」吹き出し演出 */
#go-to-top::before {
  content: "上へ戻るよ！" !important;
  display: block !important;
  position: absolute !important;
  bottom: 95% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  background-color: #f1c40f !important;
  color: #2d3e33 !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
  z-index: 10000 !important;
}

#go-to-top::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  bottom: 95% !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(10px) !important;
  border-width: 6px 6px 0 6px !important;
  border-style: solid !important;
  border-color: #f1c40f transparent transparent transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
  z-index: 10000 !important;
}

#go-to-top:hover::before {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(-5px) !important;
}

#go-to-top:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(1px) !important;
}

.odekake-pr-disclosure {
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid #d8c58a;
  border-left: 4px solid #b68a21;
  border-radius: 6px;
  background: #fff8df;
  color: #3a3324;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.7;
}

/* =======================================================
   投稿ページ ＆ 固定ページ（トップ除く）専用のヘッダー画像設定
   ======================================================= */

/* 1. 投稿ページ ＆ トップ以外の固定ページにヘッダー画像を設定 */
.single #header,
.page:not(.home) #header {
  background-image: url('http://b-spot01.net/wp/wp-content/uploads/2026/07/e2e814a87a23dfc31c4d3315fa270bbf.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  
  width: 100% !important;
  aspect-ratio: 2 / 1 !important;
  min-height: auto !important; 
  position: relative !important;
  border: none !important;

  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
}

/* 2. 不要な「テキストタイトル」「画像ロゴ」「キャッチコピー」等を非表示 */
.single #header .site-header-inside,
.single #header .site-title,
.single #header .site-description,
.single #header .logo,
.single #header .logo-image,
.single #header .header-logo-image,
.single #header .logo-header,
.single #header .tagline,
.page:not(.home) #header .site-header-inside,
.page:not(.home) #header .site-title,
.page:not(.home) #header .site-description,
.page:not(.home) #header .logo,
.page:not(.home) #header .logo-image,
.page:not(.home) #header .header-logo-image,
.page:not(.home) #header .logo-header,
.page:not(.home) #header .tagline {
  display: none !important;
}

/* 3. 投稿ページ ＆ 固定ページ共通：ポラロイドスタンプの配置設定 */
.single #header::after,
.page:not(.home) #header::after {
  content: "";
  position: absolute;
  right: 5.8%;      
  top: 23.8%;       
  width: 16.5%;     
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  transform: rotate(8deg); 
  
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 10;
  opacity: 0.95;
}

/* 4. スタンプ画像の適用指定 */

/* 【基本】デフォルト表示（明石のタコスタンプ） */
.single #header::after,
.page:not(.home) #header::after {
  background-image: url('http://b-spot01.net/wp/wp-content/uploads/2026/07/abd788975462cfe49ea7f28a84bebcbe.png') !important;
}

/* 固定ページID「25615」（明石ハブ記事）専用指定 */
body.page-id-25615 #header::after {
  background-image: url('http://b-spot01.net/wp/wp-content/uploads/2026/07/abd788975462cfe49ea7f28a84bebcbe.png') !important;
}

/* 姫路カテゴリー（カテゴリーID: 103）の投稿ページに姫路スタンプを適用 */
body.categoryid-103.single #header::after {
  background-image: url('http://b-spot01.net/wp/wp-content/uploads/2026/07/145f0ec9e74490a2148ac08de28dcd14.png') !important;
}

/* 東播磨カテゴリー（カテゴリーID: 103）の投稿ページに姫路スタンプを適用 */
body.categoryid-103.single #header::after {
  background-image: url('http://b-spot01.net/wp/wp-content/uploads/2026/07/8b12b5bbe975fad64b839d687b6bbb3e.png') !important;
}

/* ==========================================================================
   本文内画像のスクラップブック風自動適用スタイル（アイキャッチ除く）
   ========================================================================== */

/* 本文内の画像ブロックにスクラップブック風デザインを自動適用（除外クラス .no-scrapbook を除く） */
.entry-content .wp-block-image:not(.no-scrapbook) {
	position: relative;
	display: table;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
	padding: 10px 10px 15px 10px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	transform: rotate(-1.2deg);
	max-width: 100%;
	box-sizing: border-box;
}

/* 偶数番目の画像は逆方向に傾けてランダム感を演出 */
.entry-content .wp-block-image:not(.no-scrapbook):nth-of-type(even) {
	transform: rotate(1.2deg);
}

/* マスキングテープ（奇数画像用：左上） */
.entry-content .wp-block-image:not(.no-scrapbook)::before {
	content: "";
	position: absolute;
	top: -15px;
	left: 20px;
	width: 90px;
	height: 28px;
	background-color: rgba(220, 235, 220, 0.7); /* くすみグリーンの半透明テープ */
	border-left: 2px dashed rgba(255, 255, 255, 0.5);
	border-right: 2px dashed rgba(255, 255, 255, 0.5);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transform: rotate(-12deg);
	z-index: 10;
}

/* マスキングテープ（偶数画像用：右上） */
.entry-content .wp-block-image:not(.no-scrapbook):nth-of-type(even)::before {
	left: auto;
	right: 20px;
	transform: rotate(12deg);
	background-color: rgba(235, 220, 220, 0.7); /* 偶数枚目はくすみピンクベージュ系のテープ */
}

/* キャプションのフォントと配置の微調整 */
.entry-content .wp-block-image:not(.no-scrapbook) figcaption {
	font-size: 0.85rem;
	color: #55625b;
	text-align: center;
	margin-top: 10px;
}

/* ==========================================================================
   アイキャッチ画像用：スクラップブック風の枠（傾き・テープなし）
   ========================================================================== */
.eye-catch-image {
	background: #fff;
	padding: 10px 10px 15px 10px;
	border: 1px solid #e2e8f0;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	box-sizing: border-box;
}

/* ==========================================================================
   SNSシェアボタン：おでかけチケット風カスタム（案A）
   ========================================================================== */

/* シェアエリア全体の調整（マージンと余白） */
.sns-share {
  margin: 40px 0 24px 0 !important;
  padding: 24px 16px !important;
  background-color: #f7f9f7 !important; /* 淡いくすみグリーンで優しく囲む */
  border: 1px solid #d8ded8 !important;
  border-radius: 12px !important;
}

/* 「シェアする」見出しの装飾（レトロフォント風） */
.sns-share-message {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #184b2c !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

/* ボタンコンテナの並び調整（Flexboxで確実・柔軟に並べる） */
.sns-share-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 12px 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 各シェアボタンの基本スタイル（レトロな切符・半券化） */
.sns-share-buttons a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  width: auto !important; /* 元の固定幅指定をリセット */
  min-width: 120px !important; /* 文字が見切れないよう最低幅を確保 */
  max-width: 180px !important; /* 2行目の「コピー」ボタンなどが横に伸びすぎるのを防ぐ */
  flex: 1 1 140px !important; /* 空きスペースに合わせて伸縮するチケット幅 */
  padding: 0 16px !important;
  margin: 0 !important;
  border-style: dashed !important;
  border-width: 1px !important;
  border-radius: 6px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  overflow: hidden !important; /* 左右のパンチ穴を綺麗に切り抜くため */
  box-sizing: border-box !important;
}

/* スマホ等で画面幅が狭い場合、2列でピッタリ収まるように調整 */
@media (max-width: 600px) {
  .sns-share-buttons a {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: none !important; /* スマホでは最大幅制限を解除して画面幅に合わせる */
  }
}

/* チケットの左右の切り欠き（パンチ穴） */
.sns-share-buttons a::before,
.sns-share-buttons a::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  width: 10px !important;
  height: 10px !important;
  background: #f7f9f7 !important; /* シェアエリアの背景色と同期させて「切り抜かれた穴」を演出 */
  border-style: solid !important;
  border-width: 1px !important;
  border-color: inherit !important; /* 親（aタグ）のborder-colorを継承 */
  border-radius: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 2 !important;
}

/* 左側のパンチ穴 */
.sns-share-buttons a::before {
  left: -6px !important;
}

/* 右側のパンチ穴 */
.sns-share-buttons a::after {
  right: -6px !important;
}

/* 各アイコンとテキストの間の縦ミシン目（半券切り取り線） */
.sns-share-buttons a .social-icon {
  margin-right: 6px !important;
  padding-right: 6px !important;
  border-right: 1px dashed rgba(0, 0, 0, 0.2) !important; /* 親クラスで上書きするため初期値を薄い黒に */
  font-size: 15px !important;
  display: flex !important;
  align-items: center !important;
}

.sns-share-buttons a .button-caption {
  font-size: 0.8rem !important;
}

/* 通常時の各SNSカラー切符（シックなカラフル） */
.sns-share-buttons a.twitter-button {
  background-color: #eff3f7 !important;
  border-color: #3a688c !important;
  color: #14354f !important;
  box-shadow: 2px 2px 0px rgba(58, 104, 140, 0.2) !important;
}
.sns-share-buttons a.twitter-button .social-icon {
  border-right-color: rgba(20, 53, 79, 0.3) !important;
}

.sns-share-buttons a.facebook-button {
  background-color: #ecf1f8 !important;
  border-color: #3d6396 !important;
  color: #152d4c !important;
  box-shadow: 2px 2px 0px rgba(61, 99, 150, 0.2) !important;
}
.sns-share-buttons a.facebook-button .social-icon {
  border-right-color: rgba(21, 45, 76, 0.3) !important;
}

.sns-share-buttons a.hatebu-button {
  background-color: #ebf3f9 !important;
  border-color: #316d99 !important;
  color: #10324c !important;
  box-shadow: 2px 2px 0px rgba(49, 109, 153, 0.2) !important;
}
.sns-share-buttons a.hatebu-button .social-icon {
  border-right-color: rgba(16, 50, 76, 0.3) !important;
}

.sns-share-buttons a.line-button {
  background-color: #edf7f0 !important;
  border-color: #2b7d46 !important;
  color: #0e3b1c !important;
  box-shadow: 2px 2px 0px rgba(43, 125, 70, 0.2) !important;
}
.sns-share-buttons a.line-button .social-icon {
  border-right-color: rgba(14, 59, 28, 0.3) !important;
}

.sns-share-buttons a.pinterest-button {
  background-color: #f9eff0 !important;
  border-color: #9e3640 !important;
  color: #4b1218 !important;
  box-shadow: 2px 2px 0px rgba(158, 54, 64, 0.2) !important;
}
.sns-share-buttons a.pinterest-button .social-icon {
  border-right-color: rgba(75, 18, 24, 0.3) !important;
}

.sns-share-buttons a.copy-button {
  background-color: #f4f5f5 !important;
  border-color: #6c7073 !important;
  color: #26292b !important;
  box-shadow: 2px 2px 0px rgba(108, 112, 115, 0.2) !important;
}
.sns-share-buttons a.copy-button .social-icon {
  border-right-color: rgba(38, 41, 43, 0.3) !important;
}

/* ホバー時の演出：改札を通るように「カチッ」と沈み込み、各SNSカラーがほんのり滲み出る */
.sns-share-buttons a:hover {
  transform: translate(1px, 1px) !important;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0) !important;
}

.sns-share-buttons a.twitter-button:hover {
  background-color: #e1eaf2 !important;
  color: #0f1419 !important;
  border-color: #0f1419 !important;
}
.sns-share-buttons a.twitter-button:hover .social-icon {
  border-right-color: rgba(15, 20, 25, 0.3) !important;
}

.sns-share-buttons a.facebook-button:hover {
  background-color: #dde7f5 !important;
  color: #1877f2 !important;
  border-color: #1877f2 !important;
}
.sns-share-buttons a.facebook-button:hover .social-icon {
  border-right-color: rgba(24, 119, 242, 0.3) !important;
}

.sns-share-buttons a.hatebu-button:hover {
  background-color: #dceaf7 !important;
  color: #008fde !important;
  border-color: #008fde !important;
}
.sns-share-buttons a.hatebu-button:hover .social-icon {
  border-right-color: rgba(0, 143, 222, 0.3) !important;
}

.sns-share-buttons a.line-button:hover {
  background-color: #e0f5e7 !important;
  color: #06c755 !important;
  border-color: #06c755 !important;
  border-style: solid !important; /* ホバー時は実線にして改札切られた感を演出 */
}
.sns-share-buttons a.line-button:hover .social-icon {
  border-right-color: rgba(6, 199, 85, 0.3) !important;
}

.sns-share-buttons a.pinterest-button:hover {
  background-color: #f7e1e3 !important;
  color: #bd081c !important;
  border-color: #bd081c !important;
}
.sns-share-buttons a.pinterest-button:hover .social-icon {
  border-right-color: rgba(189, 8, 28, 0.3) !important;
}

.sns-share-buttons a.copy-button:hover {
  background-color: #eaebec !important;
  color: #5f6368 !important;
  border-color: #5f6368 !important;
}
.sns-share-buttons a.copy-button:hover .social-icon {
  border-right-color: rgba(95, 99, 104, 0.3) !important;
}

/* ==========================================================================
   関連記事（Related Articles）のカスタム（アイキャッチ枠線＆ホバー）
   ========================================================================== */

/* 関連記事カードの各ラッパー */
.related-entry-card-wrap {
  border-bottom: 1px dashed #d8ded8 !important; /* ミシン目（切り取り線）風 */
  padding: 20px 8px !important;
  margin: 0 !important;
  display: block !important;
  border-radius: 8px !important;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

.related-entry-card-wrap:last-of-type {
  border-bottom: none !important;
}

/* ホバー時にカード全体が少し浮き上がり、淡いくすみグリーン背景にして一体感を出す */
.related-entry-card-wrap:hover {
  background-color: #f7fbf7 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(24, 75, 44, 0.04) !important;
  text-decoration: none !important;
}

/* サムネイル画像（img）そのものに対して「クラフト台紙風の枠」を直接適用（Cocoonの絶対配置等に邪魔されない対策） */
.related-entry-card-thumb img,
.related-entry-thumb img,
.card-thumb img,
.related-entry-card-thumb-in,
.related-entry-thumb-in,
.card-thumb-in {
  background: #eae5db !important; /* レトロなクラフトベージュ */
  padding: 5px !important; /* 均一な台紙のフチ（内側） */
  border: 1px solid #ffffff !important; /* 画像の周りの白フチ */
  border-radius: 6px !important; /* 角を少し丸くして優しい印象に */
  /* outlineの代わりにbox-shadowの重なりで外枠線を表現（角丸に100%追従させるためのハック） */
  box-shadow: 0 0 0 1px #cfc7b9, 0 3px 6px rgba(0, 0, 0, 0.08) !important;
  box-sizing: border-box !important;
  display: block !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* ホバー時に画像枠の影を少し深めにする */
.related-entry-card-wrap:hover .related-entry-card-thumb img,
.related-entry-card-wrap:hover .related-entry-thumb img,
.related-entry-card-wrap:hover .card-thumb img,
.related-entry-card:hover .related-entry-card-thumb img,
.related-entry-card:hover .related-entry-thumb img,
.related-entry-card:hover .card-thumb img {
  /* 外枠線（1px）を維持しながら、影を深くする */
  box-shadow: 0 0 0 1px #cfc7b9, 0 5px 12px rgba(24, 75, 44, 0.12) !important;
}

/* タイトルとテキストの色調整 */
.related-entry-card-title {
  color: #1f2a24 !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  transition: color 0.2s ease !important;
}

.related-entry-card-wrap:hover .related-entry-card-title {
  color: #184b2c !important; /* おでかけグリーン */
}

.related-entry-card-snippet {
  color: #55625b !important;
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}

/* スマホ閲覧時（横幅が狭い時）のレイアウト崩れ防止 */
@media (max-width: 480px) {
  .related-entry-thumb.card-thumb,
  .related-entry-thumb {
    margin-top: 5px !important;
    margin-bottom: 15px !important;
  }
}



/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}