@charset "UTF-8";
/*
 * /tripguide/ トップ 観光情報カードの「今風」スタイル
 *
 * 2026-08-03 作成。ユーザー提示の参考デザイン（SUWAガラスの里様 top-modern.css の
 * カード言語＝角丸・影・画像上・下部にタイトル＋右矢印）に合わせる。
 *
 * 🔴 tripguide/css/style.css は編集しない。
 *    .item-container / .item_m / .item_m2 は同ページの他ブロック（メディア掲載・
 *    木もれ陽チャンネル等）でも使われており、共通定義を直接触ると巻き添えになる。
 *    → 対象の6枚だけを囲む .tg-cards スコープを付け、その中だけを上書きする。
 *      （.tg-cards は index.php 側の <div class="item-container tg-cards"> で付与）
 *
 * 元の style.css 側の指定（上書き対象）:
 *   .item-container  display:flex; flex-wrap:wrap; border:1px solid #eee;
 *                    padding:.4em; margin:0 0 2em; justify-content:space-around;
 *   .item_m          （PC用の定義なし。SP 668px以下でのみ背景#f9f9f9・角丸5px）
 *   .item_m a        text-decoration:none;
 *
 * 元のカード内の並び:  h2（見出し）→ img_set（画像）→ txt_set（説明）→ btn_set（moreボタン）
 * 参考デザインの並び:  画像 → 説明 → 区切り線 → タイトル＋右矢印（moreボタンは無し）
 *   → マークアップは変えず、flex の order で並べ替え、moreボタンは非表示にする。
 */

/* ------------------------------------------------------------------
 * 1. カードを並べる器
 *    元の border と padding を外し、gap で等間隔に並べる
 * ------------------------------------------------------------------ */
.item-container.tg-cards {
	--tg-radius: 14px;                          /* カードの角丸 */
	--tg-gap: 24px;                             /* カード同士の間隔 */
	--tg-shadow: 0 2px 10px rgba(0, 0, 0, .06); /* 通常時の影 */
	--tg-shadow-hover: 0 8px 24px rgba(0, 0, 0, .12);
	--tg-line: #ececec;                         /* 区切り線 */
	--tg-text: #666;                            /* 説明文 */
	--tg-title: #333;                           /* タイトル */
	--tg-arrow: #b5b5b5;                        /* 矢印 */

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tg-gap);
	border: none;
	padding: 0;
	/* 上: 直前の「伊東・熱海のイベント情報」リストとの間に余白を空ける（2026-08-03 指摘） */
	margin: 40px 0 3em;
	justify-content: initial;
	align-items: stretch;
	background: none;
}

/* ------------------------------------------------------------------
 * 2. カード本体
 * ------------------------------------------------------------------ */
.item-container.tg-cards > .item_m {
	background: #fff;
	border-radius: var(--tg-radius);
	box-shadow: var(--tg-shadow);
	overflow: hidden;
	padding: 0;
	margin: 0;
	width: auto;
	max-width: none;
	display: flex;
	flex-direction: column;
	transition: box-shadow .3s ease, transform .3s ease;
}

/* カード内のリンクが中身を縦に積む */
.item-container.tg-cards > .item_m > a {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	text-decoration: none;
	color: inherit;
}

/* ------------------------------------------------------------------
 * 3. 並べ替え（画像 → 説明 → タイトル）
 *    元のマークアップは h2 → img_set → txt_set の順なので order で入れ替える
 * ------------------------------------------------------------------ */
/* 🔴 紅葉（momiji）ブロックだけ <p class="img_set"> / <p class="txt_set"> ではなく
 *    素の <p><img></p> ／ <p>本文</p> で書かれている。
 *    クラス指定だけだと本文 <p> に order が当たらず、既定の order:0 で
 *    画像より前に出てしまう（2026-08-03 実機で確認）。
 *    そこで「n番目の <p>」でも指定して、どちらの書き方でも同じ並びになるようにする。
 *      1番目の <p> ＝ 画像 → order 1
 *      2番目の <p> ＝ 本文 → order 2
 *      h2                  → order 3 */
.item-container.tg-cards > .item_m > a > .img_set,
.item-container.tg-cards > .item_m > a > p:first-of-type  { order: 1; }
.item-container.tg-cards > .item_m > a > .txt_set,
.item-container.tg-cards > .item_m > a > p:nth-of-type(2) { order: 2; }
.item-container.tg-cards > .item_m > a > h2               { order: 3; }

/* ------------------------------------------------------------------
 * 4. 画像 — 上部に固定比率で敷く
 * ------------------------------------------------------------------ */
.item-container.tg-cards > .item_m > a > p:first-of-type,
.item-container.tg-cards > .item_m > a > .img_set {
	margin: 0;
	padding: 0;
	line-height: 0;
	overflow: hidden;
}

.item-container.tg-cards > .item_m img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
	transition: transform .5s ease;
}

/* ------------------------------------------------------------------
 * 5. 説明文
 * ------------------------------------------------------------------ */
.item-container.tg-cards > .item_m > a > .txt_set,
.item-container.tg-cards > .item_m > a > p:nth-of-type(2) {
	flex: 1 1 auto;
	margin: 0;
	padding: 20px 20px 18px;
	color: var(--tg-text);
	font-size: 13px;
	line-height: 1.9;
	text-align: left;
}

/* ------------------------------------------------------------------
 * 6. タイトル行 — 区切り線の下・太字・右に矢印
 * ------------------------------------------------------------------ */
.item-container.tg-cards > .item_m > a > h2 {
	position: relative;
	margin: 0;
	padding: 16px 44px 16px 20px;
	border-top: 1px solid var(--tg-line);
	color: var(--tg-title);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
	transition: color .25s ease;
}

/* 見出し左の葉っぱアイコンは今回のデザインでは使わない */
.item-container.tg-cards > .item_m > a > h2 > span {
	display: none;
}

/* 右端の山形（chevron） */
.item-container.tg-cards > .item_m > a > h2::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	width: 7px;
	height: 7px;
	border-top: 1px solid var(--tg-arrow);
	border-right: 1px solid var(--tg-arrow);
	transform: translate(0, -50%) rotate(45deg);
	transition: transform .3s ease, border-color .3s ease;
}

/* ------------------------------------------------------------------
 * 7. more ボタンは使わない（タイトル行がリンクの役割を持つ）
 * ------------------------------------------------------------------ */
/* .item_m の直下にある <p> は「more ボタン」だけ（本文・画像は <a> の中）。
   紅葉ブロックは class="btn_set" が付いていないため、クラス指定ではなく
   「直下の p」で確実に消す。 */
.item-container.tg-cards > .item_m > .btn_set,
.item-container.tg-cards > .item_m > p {
	display: none;
}

/* ------------------------------------------------------------------
 * 8. ホバー
 *    ガラスの里様の作法にならい、動きは控えめに
 *      - カードの影が少し強くなる／わずかに浮く
 *      - 画像がゆっくり拡大
 *      - タイトルが色付き、矢印が右へ
 * ------------------------------------------------------------------ */
html.no-touchevents .item-container.tg-cards > .item_m:hover {
	box-shadow: var(--tg-shadow-hover);
	transform: translateY(-3px);
}

html.no-touchevents .item-container.tg-cards > .item_m:hover img {
	transform: scale(1.05);
}

html.no-touchevents .item-container.tg-cards > .item_m:hover > a > h2 {
	color: #c1272d;
}

html.no-touchevents .item-container.tg-cards > .item_m:hover > a > h2::after {
	border-top-color: #c1272d;
	border-right-color: #c1272d;
	transform: translate(4px, -50%) rotate(45deg);
}

/* ------------------------------------------------------------------
 * 9. レスポンシブ
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 1024px) {
	.item-container.tg-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		--tg-gap: 20px;
	}
}

@media only screen and (max-width: 668px) {
	.item-container.tg-cards {
		grid-template-columns: minmax(0, 1fr);
		--tg-gap: 16px;
	}

	/* style.css の SP 用 .item_m（背景#f9f9f9・角丸5px・width:99%）を打ち消す */
	.item-container.tg-cards > .item_m {
		background: #fff;
		border-radius: var(--tg-radius);
		width: auto;
		margin: 0;
		padding: 0;
	}

	.item-container.tg-cards > .item_m img {
		height: 200px;
	}

	.item-container.tg-cards > .item_m > a > .txt_set,
	.item-container.tg-cards > .item_m > a > p:nth-of-type(2) {
		padding: 16px 16px 14px;
	}

	.item-container.tg-cards > .item_m > a > h2 {
		padding: 14px 40px 14px 16px;
	}

	.item-container.tg-cards > .item_m > a > h2::after {
		right: 16px;
	}
}