/* お役立ち情報（tips）詳細の導線 ①〜④（functions/tips-cta.php） */

.tipsCtaBox {
	box-sizing: border-box;
	margin: 3.2rem 0;
	padding: 2.4rem 2.8rem;
	background: #fdf4ea;
	border: 1px solid #f6dcc0;
	border-radius: 16px;
	color: #4d320d;
}

.tipsCtaBox *,
.tipsCtaBox *::before,
.tipsCtaBox *::after {
	box-sizing: border-box;
}

.reviewPuppy .tipsCtaBox p.tipsCtaBox__heading,
.tips .newsSingle__text .tipsCtaBox p.tipsCtaBox__heading,
.tipsCtaBox__heading {
	margin: 0 0 1.2rem;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.6;
	color: #4d320d;
}

.reviewPuppy .tipsCtaBox p.tipsCtaBox__lead,
.tips .newsSingle__text .tipsCtaBox p.tipsCtaBox__lead,
.tipsCtaBox__lead {
	margin: 0 0 2rem;
	font-size: 1.4rem;
	line-height: 1.8;
	color: #6b5134;
}

/* ボタン */
.tipsCtaBox__btns {
	display: grid;
	gap: 1.2rem;
}

.tipsCtaBox__btns--2col {
	grid-template-columns: 1fr 1fr;
}

.reviewPuppy .tipsCtaBox a.tipsCtaBox__btn,
.tips .tipsCtaBox a.tipsCtaBox__btn,
.tipsCtaBox__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 1.2rem 1.6rem;
	border-radius: 999px;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.2s, transform 0.2s;
}

.tipsCtaBox__btn:hover {
	opacity: 0.88;
}

.reviewPuppy .tipsCtaBox a.tipsCtaBox__btn--main,
.tips .tipsCtaBox a.tipsCtaBox__btn--main {
	background: #ef6a22;
	color: #fff;
	box-shadow: 0 4px 0 #b84a10;
}

.reviewPuppy .tipsCtaBox a.tipsCtaBox__btn--dark,
.tips .tipsCtaBox a.tipsCtaBox__btn--dark {
	background: #4d320d;
	color: #fff;
}

.reviewPuppy .tipsCtaBox a.tipsCtaBox__btn--outline,
.tips .tipsCtaBox a.tipsCtaBox__btn--outline {
	background: #fff;
	color: #4d320d;
	border: 2px solid #4d320d;
}

/* ③ 都道府県ボタン */
.tipsCtaBox__prefs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.2rem;
}

.reviewPuppy .tipsCtaBox a.tipsCtaBox__btn--pref,
.tips .tipsCtaBox a.tipsCtaBox__btn--pref {
	min-height: 48px;
	padding: 0.8rem 0.4rem;
	border-radius: 8px;
	background: #fff;
	border: 2px solid #ef6a22;
	color: #ef6a22;
	font-size: 1.5rem;
}

/* ② 子犬スライダー */
.tipsPuppy {
	overflow: hidden;
}

.tipsPuppy__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.2rem;
	margin-bottom: 1.6rem;
}

.reviewPuppy .tipsPuppy p.tipsCtaBox__lead,
.tips .newsSingle__text .tipsPuppy p.tipsCtaBox__lead {
	margin-bottom: 0;
}

.tipsPuppy__nav {
	display: flex;
	flex-shrink: 0;
	gap: 0.8rem;
}

.tipsPuppy__arrow {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid #4d320d;
	border-radius: 50%;
	background: #fff;
	color: #4d320d;
	font-size: 2.2rem;
	line-height: 1;
	cursor: pointer;
}

.tipsPuppy__arrow:disabled {
	opacity: 0.3;
	cursor: default;
}

.reviewPuppy ul.tipsPuppy__track,
.tips .newsSingle__text ul.tipsPuppy__track,
.tipsPuppy__track {
	display: flex;
	gap: 1.2rem;
	margin: 0 -2.8rem 0 0;
	padding: 0 2.8rem 0.4rem 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.tipsPuppy__track::-webkit-scrollbar {
	display: none;
}

.reviewPuppy li.tipsPuppy__item,
.tips .newsSingle__text li.tipsPuppy__item,
.tipsPuppy__item {
	flex: 0 0 calc((100% - 2.4rem) / 3);
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.reviewPuppy li.tipsPuppy__item::before,
.tips .newsSingle__text li.tipsPuppy__item::before {
	content: none;
}

.reviewPuppy .tipsPuppy a.tipsPuppy__card,
.tips .tipsPuppy a.tipsPuppy__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid #f0d9bf;
	border-radius: 12px;
	background: #fff;
	color: #4d320d;
	text-decoration: none;
}

.tipsPuppy__img {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: #f3ece4;
}

.reviewPuppy .tipsPuppy .tipsPuppy__img img,
.tips .tipsPuppy .tipsPuppy__img img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.tipsPuppy__gender,
.tipsPuppy__new {
	position: absolute;
	top: 8px;
	padding: 0.2rem 1rem;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.6;
	color: #fff;
}

.tipsPuppy__gender {
	left: 8px;
	border-radius: 999px;
	background: #e0607e;
}

.tipsPuppy__gender--male {
	background: #3d7fc9;
}

.tipsPuppy__new {
	right: 8px;
	border-radius: 4px;
	background: #ef6a22;
}

.tipsPuppy__body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 1rem 1.2rem 1.2rem;
}

.tipsPuppy__name {
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.5;
}

.tipsPuppy__store {
	font-size: 1.3rem;
	line-height: 1.5;
}

.tipsPuppy__store::before {
	content: "📍";
	font-size: 1.1rem;
}

.tipsPuppy__priceOld {
	font-size: 1.2rem;
	color: #9a8b7a;
}

.tipsPuppy__price {
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1.4;
	color: #d6204e;
}

.tipsPuppy__price small {
	margin-left: 0.2rem;
	font-size: 1.1rem;
	font-weight: 400;
	color: #6b5134;
}

.tipsPuppy__dots {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
	margin: 1.6rem 0 2rem;
}

.tipsPuppy__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #d9cbbb;
}

.tipsPuppy__dot.is-active {
	background: #ef6a22;
}

/* スマホ */
@media screen and (max-width: 1000px) {
	.tipsCtaBox {
		margin: 2.4rem 0;
		padding: 2rem 1.6rem;
	}

	.reviewPuppy .tipsCtaBox p.tipsCtaBox__heading,
	.tips .newsSingle__text .tipsCtaBox p.tipsCtaBox__heading,
	.tipsCtaBox__heading {
		font-size: 1.8rem;
	}

	.reviewPuppy .tipsCtaBox p.tipsCtaBox__lead,
	.tips .newsSingle__text .tipsCtaBox p.tipsCtaBox__lead,
	.tipsCtaBox__lead {
		font-size: 1.3rem;
	}

	.reviewPuppy .tipsCtaBox a.tipsCtaBox__btn,
	.tips .tipsCtaBox a.tipsCtaBox__btn {
		min-height: 48px;
		padding: 1rem 0.8rem;
		font-size: 1.4rem;
	}

	.tipsCtaBox__prefs {
		gap: 0.8rem;
	}

	.reviewPuppy .tipsCtaBox a.tipsCtaBox__btn--pref,
	.tips .tipsCtaBox a.tipsCtaBox__btn--pref {
		min-height: 44px;
		font-size: 1.3rem;
	}

	.tipsPuppy__arrow {
		width: 36px;
		height: 36px;
		font-size: 1.8rem;
	}

	.reviewPuppy ul.tipsPuppy__track,
	.tips .newsSingle__text ul.tipsPuppy__track,
	.tipsPuppy__track {
		gap: 1rem;
		margin-right: -1.6rem;
		padding-right: 1.6rem;
	}

	.reviewPuppy li.tipsPuppy__item,
	.tips .newsSingle__text li.tipsPuppy__item,
	.tipsPuppy__item {
		flex-basis: 42%;
	}
}

@media screen and (max-width: 374px) {
	.tipsCtaBox__btns--2col {
		grid-template-columns: 1fr;
	}

	.tipsCtaBox__prefs {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ボタンの矢印（サイト共通の span の色指定に負けないよう明示） */
.reviewPuppy .tipsCtaBox .tipsCtaBox__btn .tipsCtaBox__arrow,
.tips .tipsCtaBox .tipsCtaBox__btn .tipsCtaBox__arrow {
	display: inline-block;
	margin-left: 0.6em;
	color: inherit;
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1;
}

/* ④ 末尾CTA: PC は3つのボタンを横1行、スマホは縦並び */
@media screen and (min-width: 1001px) {
	.tipsCtaBox__btns--3col {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ② 見出し横の「新着順」 */
.tipsPuppy__tag {
	display: inline-block;
	margin-left: 0.8rem;
	padding: 0.2rem 0.8rem;
	border: 1px solid #c9b49b;
	border-radius: 4px;
	background: #fff;
	color: #6b5134;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.5;
	vertical-align: middle;
}

/* ④ PC の3つ並び: 文字を小さめにして各ボタン1行に */
@media screen and (min-width: 1001px) {
	.reviewPuppy .tipsCtaBox .tipsCtaBox__btns--3col a.tipsCtaBox__btn,
	.tips .tipsCtaBox .tipsCtaBox__btns--3col a.tipsCtaBox__btn {
		padding: 1.2rem 0.8rem;
		font-size: 1.4rem;
		white-space: nowrap;
	}
}

/* ④ 既存の「サポート充実」CTA 枠に統合したときの本文とボタン */
.tips .tipsCta--breed .tipsCta__lead {
	margin: 0 0 2rem;
	font-size: 1.5rem;
	line-height: 1.8;
	color: #6b5134;
}

.tipsCtaBox.tipsCtaBox--buttonsOnly {
	margin: 2.4rem 0 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

/* スマホの調整（2026-11 確認時の崩れ対応） */
@media screen and (max-width: 1000px) {
	/* ①② 2つ並びのボタンは文字が折れるので縦並びに */
	.tipsCtaBox__btns--2col {
		grid-template-columns: 1fr;
	}

	.reviewPuppy .tipsCtaBox p.tipsCtaBox__heading,
	.tips .newsSingle__text .tipsCtaBox p.tipsCtaBox__heading,
	.tipsCtaBox__heading {
		font-size: 1.6rem;
	}

	/* ② 見出しを全幅にして、矢印はその下の右寄せ */
	.tipsPuppy__head {
		flex-direction: column;
		align-items: stretch;
		gap: 0.4rem;
	}

	.tipsPuppy__nav {
		justify-content: flex-end;
	}

	.reviewPuppy .tipsPuppy p.tipsCtaBox__heading,
	.tips .newsSingle__text .tipsPuppy p.tipsCtaBox__heading {
		margin-bottom: 0;
	}

	/* ② カードを広めに（1.6枚ほど見える） */
	.reviewPuppy li.tipsPuppy__item,
	.tips .newsSingle__text li.tipsPuppy__item,
	.tipsPuppy__item {
		flex-basis: 60%;
	}

	/* ③ 県ボタンは4列のまま、文字を小さくして1行に */
	.reviewPuppy .tipsCtaBox a.tipsCtaBox__btn--pref,
	.tips .tipsCtaBox a.tipsCtaBox__btn--pref {
		padding: 0.6rem 0.2rem;
		font-size: 1.2rem;
		white-space: nowrap;
	}
}

/* ② カードの店舗名を小さめに */
.tipsPuppy__store {
	font-size: 1.2rem;
	color: #6b5134;
}

@media screen and (max-width: 1000px) {
	.tipsPuppy__store {
		font-size: 1.1rem;
	}
}

/* ② 店舗名は1行。収まらないときは「…」で省略 */
.tipsPuppy__store {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ② スマホは矢印を出さない（スワイプで送る） */
@media screen and (max-width: 1000px) {
	.tipsPuppy__nav {
		display: none;
	}
}

/* ② 見出しの改行はスマホだけ（PC は1行） */
@media screen and (min-width: 1001px) {
	.tipsPuppy__br {
		display: none;
	}
}

/* ④ 統合した枠（犬種あり）: 見出し＋本文を左、写真を右に並べて余白を詰める */
.tips .tipsCta--breed {
	padding: 2.4rem 3.2rem 2.8rem;
}

.tips .tipsCta--breed .tipsCta__inner {
	align-items: center;
	gap: 3.2rem;
}

.tips .tipsCta--breed h2.tipsCta__title {
	margin: 0 0 1.2rem;
}

.tips .tipsCta--breed .tipsCta__lead {
	margin: 0;
}

.tips .tipsCta--breed .tipsCta__img {
	flex: 0 0 170px;
}

.tips .tipsCta--breed .tipsCtaBox--buttonsOnly {
	margin-top: 2rem;
}

@media screen and (max-width: 1000px) {
	.tips .tipsCta--breed {
		padding: 2rem 1.6rem 2.4rem;
	}

	.tips .tipsCta--breed .tipsCta__inner {
		gap: 1.6rem;
	}

	.tips .tipsCta--breed .tipsCta__img {
		flex-basis: auto;
		max-width: 150px;
	}
}

@media screen and (min-width: 1001px) {
	.tips .tipsCta--breed h2.tipsCta__title {
		font-size: 2.1rem;
	}
}

/* ② 画像が読めないときに alt の文字を重ねて出さない */
.reviewPuppy .tipsPuppy .tipsPuppy__img img,
.tips .tipsPuppy .tipsPuppy__img img {
	color: transparent;
	font-size: 0;
}

/* ② PC はカードを4枚並びにして縦幅を控えめに */
@media screen and (min-width: 1001px) {
	.reviewPuppy li.tipsPuppy__item,
	.tips .newsSingle__text li.tipsPuppy__item,
	.tipsPuppy__item {
		flex-basis: calc((100% - 3.6rem) / 4);
	}

	.tipsPuppy__body {
		padding: 0.8rem 1rem 1rem;
	}

	.tipsPuppy__name {
		font-size: 1.4rem;
	}

	.tipsPuppy__store {
		font-size: 1.1rem;
	}

	.tipsPuppy__priceOld {
		font-size: 1.1rem;
	}

	.tipsPuppy__price {
		font-size: 1.6rem;
	}

	.tipsPuppy__gender,
	.tipsPuppy__new {
		top: 6px;
		padding: 0.1rem 0.8rem;
		font-size: 1.1rem;
	}

	.tipsPuppy__gender {
		left: 6px;
	}

	.tipsPuppy__new {
		right: 6px;
	}
}

/* お客様フォト詳細（single-review.php）: スマホは本文と同じ左右の余白を取る */
.reviewPuppy {
	margin-top: 3rem;
}

@media screen and (max-width: 1000px) {
	.reviewPuppy {
		padding: 0 8px;
	}

	.reviewPuppy .tipsCtaBox {
		padding-left: 12px;
		padding-right: 12px;
	}
}