@charset "UTF-8";

/*
File: odekake-front.css
Version: 2026.09.14.1
Modified: 2026-09-14 (JST)
Author: コデコ
Changes: 但馬・丹波カード追加、8タグのホバー色・アイコンをクラス指定へ統一。
*/

/* ==========================================
 * お出かけブログ：トップページ専用 CSS
 * （front-page.css）
 * ========================================== */

/* 0. フロントトップ専用のシェアボタン非表示 */
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;
}

/* 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. エリアカード：親グリッド（3カラム・隙間確保） */
.odekake-front-areas {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 20px !important;
	margin: 20px 0 40px !important;
}

.odekake-front a:not(.odekake-front-area),
.odekake-front-scene-list a {
	text-decoration: none !important;
	border-bottom: none !important;
}

.odekake-front-areas a {
	text-decoration: none !important;
}

/* カード本体：詳細度を上げて下枠を四方均等に100%描画 */
.odekake-front-areas a.odekake-front-area,
.odekake-front-area {
	position: relative;
	display: block !important;
	min-height: 154px;
	padding: 18px;
	overflow: hidden;
	border: 1px solid var(--odekake-line, #dfe7e7) !important;
	border-bottom: 1px solid var(--odekake-line, #dfe7e7) !important;
	border-radius: 12px;
	background: #fff;
	color: var(--odekake-ink, #202426) !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: 0px;
	font-size: 4.8rem;
	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;
	z-index: 1;
}

/* 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; } /* 🚗 */

/* エリアカード内のテキスト縦並び ＆ フォント鮮明化（ボケ防止） */
.odekake-front-area__kicker {
	display: block !important;
	color: var(--odekake-red, #d84d34) !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	-webkit-font-smoothing: antialiased;
}
.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;
	-webkit-font-smoothing: antialiased;
}
.odekake-front-area__text {
	display: block !important;
	position: relative !important;
	z-index: 2 !important;
	color: var(--odekake-muted, #5b686f) !important;
	line-height: 1.7 !important;
	-webkit-font-smoothing: antialiased;
}

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

/* ホバー時に起き上がる（ブレのない吸い付く浮上） */
.odekake-front-areas a.odekake-front-area:hover,
.odekake-front-areas a.odekake-front-area:focus {
	transform: rotate(0deg) translateY(-6px) !important;
	z-index: 20 !important;
}
.odekake-front-areas a.odekake-front-area:hover::after {
	opacity: 0.25;
	transform: scale(1.1) rotate(6deg) !important;
}

/* エリア別のホバーカラー＆オーラ（四方すべての枠線を確実に着色！） */
.odekake-front-areas a.odekake-front-area--akashi:hover {
	border-color: #d84d34 !important;
	border-bottom-color: #d84d34 !important;
	box-shadow: 0 14px 28px rgba(216, 77, 52, 0.18) !important;
}
.odekake-front-areas a.odekake-front-area--kobe:hover {
	border-color: #147c93 !important;
	border-bottom-color: #147c93 !important;
	box-shadow: 0 14px 28px rgba(20, 124, 147, 0.18) !important;
}
.odekake-front-areas a.odekake-front-area--harima:hover {
	border-color: #4c7a57 !important;
	border-bottom-color: #4c7a57 !important;
	box-shadow: 0 14px 28px rgba(76, 122, 87, 0.18) !important;
}
.odekake-front-areas a.odekake-front-area--himeji:hover {
	border-color: #9245a8 !important;
	border-bottom-color: #9245a8 !important;
	box-shadow: 0 14px 28px rgba(146, 69, 168, 0.18) !important;
}
.odekake-front-areas a.odekake-front-area--awaji:hover {
	border-color: #f2b84b !important;
	border-bottom-color: #f2b84b !important;
	box-shadow: 0 14px 28px rgba(242, 184, 75, 0.22) !important;
}
.odekake-front-areas a.odekake-front-area--kansai:hover {
	border-color: #e05295 !important;
	border-bottom-color: #e05295 !important;
	box-shadow: 0 14px 28px rgba(224, 82, 149, 0.18) !important;
}

/* タブレット（900px以下） */
@media (max-width: 900px) {
	.odekake-front-areas {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
}

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

/* 5. 「目的で探す」セクション：クラフト風装飾 */
.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);
}

.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;
}

.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, #202426) !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;
}

/* タグボタン（丸みカプセル＆絵文字） */
.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, #202426) !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;
}

.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:hover {
	transform: translateY(-3px) scale(1.03) !important;
	color: #fff !important;
	background: #59645c !important;
}






/* 2026-09-14: 但馬・丹波カード */
.odekake-front-area--tajima-tanba::after { content: "\1f3d4" !important; }
.odekake-front-areas a.odekake-front-area--tajima-tanba:hover {
  border-color: #7a6247 !important;
  border-bottom-color: #7a6247 !important;
  box-shadow: 0 14px 28px rgba(122,98,71,.18) !important;
}
/* タグの位置・URL部分一致への依存をなくす */
.odekake-front-scene-list a.odekake-front-scene--gourmet::before { content: "🍳"; }
.odekake-front-scene-list a.odekake-front-scene--gourmet:hover {
  background: #f27435 !important;
  border-color: #f27435 !important;
  box-shadow: 0 6px 12px #f2743540 !important;
}
.odekake-front-scene-list a.odekake-front-scene--theme-park::before { content: "🎡"; }
.odekake-front-scene-list a.odekake-front-scene--theme-park:hover {
  background: #9245a8 !important;
  border-color: #9245a8 !important;
  box-shadow: 0 6px 12px #9245a840 !important;
}
.odekake-front-scene-list a.odekake-front-scene--zoo-aquarium::before { content: "🐬"; }
.odekake-front-scene-list a.odekake-front-scene--zoo-aquarium:hover {
  background: #147c93 !important;
  border-color: #147c93 !important;
  box-shadow: 0 6px 12px #147c9340 !important;
}
.odekake-front-scene-list a.odekake-front-scene--shrine-temple::before { content: "⛩️"; }
.odekake-front-scene-list a.odekake-front-scene--shrine-temple:hover {
  background: #d84d34 !important;
  border-color: #d84d34 !important;
  box-shadow: 0 6px 12px #d84d3440 !important;
}
.odekake-front-scene-list a.odekake-front-scene--park::before { content: "🌳"; }
.odekake-front-scene-list a.odekake-front-scene--park:hover {
  background: #4c7a57 !important;
  border-color: #4c7a57 !important;
  box-shadow: 0 6px 12px #4c7a5740 !important;
}
.odekake-front-scene-list a.odekake-front-scene--town-walk::before { content: "🚶"; }
.odekake-front-scene-list a.odekake-front-scene--town-walk:hover {
  background: #b5762a !important;
  border-color: #b5762a !important;
  box-shadow: 0 6px 12px #b5762a40 !important;
}
.odekake-front-scene-list a.odekake-front-scene--kids-ok::before { content: "🐣"; }
.odekake-front-scene-list a.odekake-front-scene--kids-ok:hover {
  background: #c9557f !important;
  border-color: #c9557f !important;
  box-shadow: 0 6px 12px #c9557f40 !important;
}
.odekake-front-scene-list a.odekake-front-scene--rainy-day-ok::before { content: "☂️"; }
.odekake-front-scene-list a.odekake-front-scene--rainy-day-ok:hover {
  background: #4a6fa5 !important;
  border-color: #4a6fa5 !important;
  box-shadow: 0 6px 12px #4a6fa540 !important;
}