@charset "utf-8";
/* ----------------------------------------------------------------------
 トップスライダー 上書き（1920x800 の全面表示用）
 ※ テーマ標準の layout_type1 は height:450px 固定で、
   2.4:1 の画像だと上下が切れて文字が欠けるため aspect-ratio に差し替える
---------------------------------------------------------------------- */
:root {
	--tcd-index-slider-width: 1920;
	--tcd-index-slider-height: 800;
}

#header_slider_container.layout_type1 {
	height: auto;
	aspect-ratio: var(--tcd-index-slider-width) / var(--tcd-index-slider-height);
}

/* 親が height:auto だと #header_slider の height:100% が解決できないので
   絶対配置でコンテナを埋める。
   あわせて custom.css の #header_slider { min-height:600px } を解除する
   （旧デザイン用の値で、1920x800 を aspect-ratio で出すと下にはみ出すため） */
#header_slider_container.layout_type1 #header_slider {
	position: absolute;
	inset: 0;
	height: auto;
	min-height: 0;
}

/* 画像に文字が入っているので切らずに全体を見せる */
#header_slider .bg_image img {
	object-fit: contain;
	background: #fff;
}

@media (max-width: 1280px) {
	#header_slider_container { min-height: 0; }
}

@media (max-width: 767px) {
	#header_slider_container.layout_type1 {
		height: auto;
		aspect-ratio: var(--tcd-index-slider-width) / var(--tcd-index-slider-height);
	}
}

/* SP用スライド画像(1080x1630)に合わせて縦長の比率にする。
   テンプレート側の <source media="(max-width: 768px)"> と同じ境界にすること。
   ここを入れないと、2.4:1 のコンテナに 1:1.51 の画像が入って
   上下左右に大きな余白が出る。 */
@media screen and (max-width: 768px) {
	#header_slider_container.layout_type1 {
		aspect-ratio: 1080 / 1630;
	}
}

/* ----------------------------------------------------------------------
 トップページ本文コンテナの上余白（タブレット〜PC のみ 50px）

 custom.css に下記が !important 付きで入っているため、
 こちらも !important でないと勝てない：
   @media (max-width:1290px) #post_container { margin:200px 50px 100px !important }
   @media (max-width: 768px) #post_container { margin: 20px 50px 100px !important }
 ※ 200px は旧スライダーがコンテナから約150pxはみ出していた頃の回避策。

 SP（768px以下）はこのルールを当てず、custom.css の 20px をそのまま活かす。
 SP の余白を変えたいときは custom.css:1487 を編集すること。
---------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
	body.home section + #post_container {
		margin-top: 50px !important;
	}
}

/* ----------------------------------------------------------------------
 トップスライダーのページネーション（ドット）
 ※ マークアップとクリック処理は slider-custom.js 側
---------------------------------------------------------------------- */
.header_slider_pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 24px;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0 12px;
	pointer-events: none;
}

.header_slider_pagination_bullet {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	pointer-events: auto;
	transition: background-color 0.3s ease, transform 0.3s ease;
	appearance: none;
}

.header_slider_pagination_bullet:hover {
	background: #fff;
}

.header_slider_pagination_bullet.is-active {
	background: var(--tcd-accent-color, #003040);
	border-color: var(--tcd-accent-color, #003040);
	transform: scale(1.15);
}

@media (max-width: 767px) {
	.header_slider_pagination {
		bottom: 12px;
		gap: 0 8px;
	}

	.header_slider_pagination_bullet {
		width: 8px;
		height: 8px;
	}
}

/* ----------------------------------------------------------------------
 ドラッグ/スワイプ操作まわり
 画像のネイティブD&Dやテキスト選択がドラッグを邪魔しないようにする
---------------------------------------------------------------------- */
#header_slider {
	touch-action: pan-y;
}

#header_slider .bg_image img {
	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}