@charset "UTF-8";

/*
File: odekake-single.css
Version: 2026.09.14.1
Modified: 2026-09-14 (JST)
Author: コデコ
Changes: 画像URL 7箇所をHTTPS化、明石・関西広域のカテゴリースタンプを明示。
*/

/* =======================================================
 * お出かけブログ：個別記事・固定ページ・カテゴリー専用 CSS
 * （odekake-single.css）
 * ======================================================= */

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

/* 投稿ページ ＆ トップ以外の固定ページにヘッダー画像を設定 */
.single #header,
.page:not(.home) #header {
  background-image: url('https://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;
}

/* 不要な「テキストタイトル」「画像ロゴ」「キャッチコピー」等を非表示 */
.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;
}

/* 投稿ページ ＆ 固定ページ共通：ポラロイドスタンプの配置設定 */
.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;
}

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

/* 基本：明石スタンプ */
.single #header::after,
.page:not(.home) #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/07/abd788975462cfe49ea7f28a84bebcbe.png') !important;
}

/* 明石ハブ固定ページ */
body.page-id-25615.page:not(.home) #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/07/abd788975462cfe49ea7f28a84bebcbe.png') !important;
}

/* 姫路ハブ固定ページ */
body.page-id-25910.page:not(.home) #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/07/145f0ec9e74490a2148ac08de28dcd14.png') !important;
}

/* 東播磨ハブ固定ページ */
body.page-id-25973.page:not(.home) #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/07/8b12b5bbe975fad64b839d687b6bbb3e.png') !important;
}

/* 神戸ハブ固定ページ */
body.page-id-26201.page:not(.home) #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/07/fe1f584ec414ab6f998065c56775cd64.png') !important;
}

/* 但馬・丹波ハブ固定ページ */
body.page-id-26342.page:not(.home) #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/08/4b290b58eb3878f9fbe4a59b2c8baad0.png') !important;
}

/* 関西広域・遠出ハブ固定ページ */
body.page-id-26488.page:not(.home) #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/08/c0f4d6dbc89fdf607511c1e7e25e1287.png') !important;
}

/* 淡路島ハブ固定ページ */
body.page-id-26651.page:not(.home) #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/09/8ad045e92101a22d19122613e6115874.png') !important;
}

/* 姫路カテゴリーの投稿 */
body.single-post.categoryid-103 #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/07/145f0ec9e74490a2148ac08de28dcd14.png') !important;
}

/* 東播磨カテゴリーの投稿 */
body.single-post.categoryid-102 #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/07/8b12b5bbe975fad64b839d687b6bbb3e.png') !important;
}

/* 神戸カテゴリーの投稿 */
body.single-post.categoryid-101 #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/07/fe1f584ec414ab6f998065c56775cd64.png') !important;
}

/* 但馬・丹波カテゴリーの投稿 */
body.single-post.categoryid-105 #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/08/4b290b58eb3878f9fbe4a59b2c8baad0.png') !important;
}

/* 淡路島カテゴリーの投稿 */
body.single-post.categoryid-104 #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/09/8ad045e92101a22d19122613e6115874.png') !important;
}

/* 明石・関西広域のカテゴリーデフォルト（記事別指定より前） */
body.single-post.categoryid-100 #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/07/abd788975462cfe49ea7f28a84bebcbe.png') !important;
}
body.single-post.categoryid-106 #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/08/c0f4d6dbc89fdf607511c1e7e25e1287.png') !important;
}

/* 大阪スタンプ対象記事 */
body.single-post.postid-2017 #header::after,
body.single-post.postid-2284 #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/08/083c8157564f8193b9c390f8672d6cd6.png') !important;
}

/* 三重スタンプ対象記事 */
body.single-post.postid-2279 #header::after {
  background-image: url('https://b-spot01.net/wp/wp-content/uploads/2026/08/ddb83695fb955a8358f60bab2d2d4158.png') !important;
}

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

/* 本文内の画像ブロックにスクラップブック風デザインを自動適用（除外クラス .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;
}

/* ==========================================================================
   3. SNSシェアボタン：おでかけチケット風カスタム
   ========================================================================== */

/* シェアエリア全体の調整（マージンと余白） */
.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;
  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;
  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-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;
}

/* ==========================================================================
   4. 関連記事（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）に対してクラフト台紙風の枠を直接適用 */
.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;
  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 {
  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;
  }
}