@charset "utf-8";
/* =============================================================
 * sp-swipe.css  v2.45.3
 * スマホで「PCでは横並びのかたまり」を横スクロール（1.15枚見せ＋ドット）にし、
 * それでも長いブロックは「すべて見る」で畳む。
 * 対象の判定は assets/js/sp-swipe.js 側。ここは見た目だけ。
 * ============================================================= */

@media ( max-width: 760px ) {

	/* ---- 横スクロール本体 ----
	   grid（grid-auto-flow:column）で組む。flex だと、型ごとに入っている
	   flex-shrink の指定に負けてカードが潰れる箇所があるため。
	   詳細度は .is-swipe を3回重ねて、型ごとの !important に勝たせている。 */
	.pm-mock .is-swipe.is-swipe.is-swipe {
		display: grid !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 86% !important;   /* 1.15枚見せ */
		grid-template-columns: none !important;
		grid-template-rows: none !important;
		align-items: stretch;
		gap: 10px !important;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 2px !important;
		scrollbar-width: none;
	}
	.pm-mock .is-swipe.is-swipe.is-swipe::-webkit-scrollbar { display: none; }

	.pm-mock .is-swipe.is-swipe.is-swipe > * {
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0 !important;
		scroll-snap-align: start;
	}

	/* 背の低いカード（リンクカードなど）は 1.5 枚見せ */
	.pm-mock .is-swipe.is-swipe.is-swipe--sm { grid-auto-columns: 66% !important; }

	/* ---- 現在位置のドット ---- */
	.pm-mock .pfg-dots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6px;
		margin: 10px 0 0;
		padding: 0;
	}
	.pm-mock .pfg-dots span {
		display: block;
		width: 6px; height: 6px;
		border-radius: 50%;
		background: rgba( 27, 34, 76, .20 );
		transition: width .18s ease, background .18s ease;
	}
	.pm-mock .pfg-dots span.is-on {
		width: 16px;
		border-radius: 3px;
		background: var( --sky, #1C93D2 );
	}

	/* ---- 「すべて見る」で畳む ---- */
	.pm-mock .is-foldbox.is-foldbox {
		max-height: 520px;
		overflow: hidden;
		-webkit-mask-image: linear-gradient( #000 68%, rgba( 0, 0, 0, .12 ) );
		        mask-image: linear-gradient( #000 68%, rgba( 0, 0, 0, .12 ) );
	}
	.pm-mock .is-foldbox.is-foldbox.is-open {
		max-height: none;
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.pm-mock .pfg-fold-btn {
		display: block;
		width: 100%;
		margin: 12px 0 0;
		padding: 11px 0;
		background: #fff;
		border: 1px solid var( --line, #E2E8F1 );
		border-radius: 4px;
		font-family: inherit;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.4;
		color: var( --navy, #1B224C );
		text-align: center;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.pm-mock .pfg-fold-btn::after { content: " ▾"; font-size: 11px; color: var( --sky, #1C93D2 ); }
	.pm-mock .pfg-fold-btn.is-open::after { content: " ▴"; }
}

/* PC では痕跡を出さない */
@media ( min-width: 761px ) {
	.pm-mock .pfg-dots,
	.pm-mock .pfg-fold-btn { display: none !important; }
}