/*--- 共通 ---*/
/*position関連*/
.absolute-center {
	position: absolute !important;
	left: 0px !important;
	right: 0px !important;
	top: 0px !important;
	bottom: 0px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.absolute-top {
	position: absolute !important;
	top: 0px !important;
	bottom: unset !important;
}
.absolute-bottom {
	position: absolute !important;
	top: unset !important;
	bottom: 0px !important;
}
.absolute-right-top {
	position: absolute !important;
	top: 0px !important;
	right: 0px !important;
	left: unset !important;
	bottom: unset !important;
}
.absolute-right-bottom {
	position: absolute !important;
	right: 0px !important;
	bottom: 0px !important;
	top: unset !important;
	left: unset !important;
}
.fixed-top,
.fixed-top-right,
.fixed-bottom {
	position: fixed !important;
	z-index: 1050;
}
.fixed-top-right {
	top: 0px !important;
	right: 0px !important;
	left: unset !important;
}
.fixed-bottom {
	bottom: 0px !important;
	top: unset !important;
}
/*display関連*/
.display-block {display: block !important;}
.display-inline-block {display: inline-block !important;}
.display-none {display: none !important;}
.flexbox {
	display: flex;
	flex-wrap: wrap;
}
.flexbox-nowrap {
	display: flex;
	flex-wrap: nowrap;
}
.flexbox-center {
	display: flex;
	flex-wrap: wrap;
  justify-content:center;
  align-items:center;
}
.justify-content-center {
	display: flex;
	flex-wrap: wrap;
  justify-content:center;
}
.justify-content-right {
	display: flex;
	flex-wrap: wrap;
  justify-content:right;
}
.justify-content-between {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
}
.align-items-center {
	display: flex;
	flex-wrap: wrap;
  align-items:center;
}
.align-items-start {
	display: flex;
	flex-wrap: wrap;
  align-items:flex-start;
}
.align-items-end {
	display: flex;
	flex-wrap: wrap;
  align-items:flex-end;
}
.flex-wrap {flex-wrap: wrap !important;}
.flex-nowrap {flex-wrap: nowrap !important;}
.flex-1 {flex: 1;}
.relative {position: relative !important;}

/*表示*/
.overflow-hidden {overflow: hidden !important;}
.overflow-x-auto {overflow-x: auto !important;}
.overflow-y-auto {overflow-y: auto !important;}

/*全幅表示*/
.overall-width {
	position: relative;
	left: calc(-50vw + 50%);
	width: 100vw;
	box-sizing: border-box;
}

/*テキスト関連*/
.text-ellipsis {
	width:100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.text-ellipsis-3 { /*表示行数*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.text-ellipsis-3 > p {display:inline;}
.text-ellipsis-5 { /*表示行数*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.text-ellipsis-5 > p {display:inline;}
.text-ellipsis-10
.text-ellipsis-10 > p { /*表示行数*/
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
}
.text-ellipsis-10 > p {display:inline;}
.text-vertical
.text-vertical > p {/*縦書き*/
	writing-mode: vertical-rl;
	text-orientation: upright;
}
.text-decoration-none,
.text-decoration-none:hover,
.text-decoration-none:focus {text-decoration: none !important;}

/*float関連*/
.clear-both {clear: both;}

/*スクロール関連*/
.scrollbar-hidden {
	-ms-overflow-style:none;
	scrollbar-width: none;
}
.scrollbar-hidden::-webkit-scrollbar {
	display: none;
	-webkit-appearance: none;
}

/*タブの横スクロール*/
.scroll-tabs {
	position: relative;
	z-index: 1; 
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;

  /*スクロールバー非表示*/
  -ms-overflow-style: none;/* IE・旧Edge */
  scrollbar-width: none;/* Firefox */
  scroll-behavior: smooth; /* 矢印キー/プログラム操作の滑らかさ */
}
.scroll-tabs-outer {position: relative;}
.scroll-tabs::-webkit-scrollbar {display: none;}/*Chrome・Edge*/
.scroll-tabs-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  font-size: 14px;
  color: #333;
  transition: background 0.2s ease, opacity 0.2s ease;
}
.scroll-tabs-arrow:hover {background: rgba(0,0,0,0.12);}
.scroll-tabs-arrow.disabled {
  opacity: .3;
  pointer-events: none;
}
.scroll-tabs-arrow.left {left: 5px;}
.scroll-tabs-arrow.right {right: 5px;}
.scroll-tabs-arrow.hidden {display: none !important;}

/*各番号付き要素*/
.counter-reset {counter-reset: icon-counter;} /* カウンターの初期化 */
.numbered {
	position: relative;
	padding-left: 2em; /* アイコン部分のスペースを確保 */
}
a.numbered,
span.numbered {
	display: inline-block;
}
/*番号アイコンのスタイル*/
.numbered::before {
	content: counter(icon-counter); /* カウンターを表示 */
	counter-increment: icon-counter; /* カウンターを進める */
	position: absolute;
	top: 50%;
	left: 0px;
	transform: translateY(-50%);
	width: 2em;
	height: 2em;
	line-height: 2em;
	font-weight: bold;
	font-size: 0.75em;
	text-align: center;
	border-radius: 50%; /* 丸いアイコン */
}

/*擬似要素関連*/
.bg-border-vertical::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 1.15em;
	width: 3px;
	z-index: -1;
}

/*イメージ関連*/
.ratio-4by3,
.ratio-4by3 {
	width:100%;
	object-fit:cover;
	aspect-ratio: 4 / 3;
}
.ratio-16by9,
.ratio-16by9 {
	width:100%;
	object-fit:cover;
	aspect-ratio: 16 / 9;
}

@media screen and (min-width: 992px) {
	.clear-both-md {clear: both;}
}
@media screen and (min-width: 768px) {
	/*position関連*/
	.absolute-center-sm {
		position: absolute !important;
		left: 0px !important;
		right: 0px !important;
		top: 0px !important;
		bottom: 0px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.absolute-top-sm {
		position: absolute !important;
		top: 0px !important;
		bottom: unset !important;
	}
	.absolute-bottom-sm {
		position: absolute !important;
		top: unset !important;
		bottom: 0px !important;
	}
	.absolute-right-top-sm {
		position: absolute !important;
		top: 0px !important;
		right: 0px !important;
		left: unset !important;
		bottom: unset !important;
	}
	.absolute-right-bottom-sm {
		position: absolute !important;
		right: 0px !important;
		bottom: 0px !important;
		top: unset !important;
		left: unset !important;
	}
	.fixed-top-sm,
	.fixed-top-right-sm,
	.fixed-bottom-sm {
		position: fixed !important;
		z-index: 1050;
	}
	.fixed-top-right-sm {
		top: 0px !important;
		right: 0px !important;
		left: unset !important;
	}
	.fixed-bottom-sm {
		bottom: 0px !important;
		top: unset !important;
	}

	/*display関連*/
	.display-block-sm {display: block !important;}
	.display-inline-block-sm {display: inline-block !important;}
	.display-none-sm {display: none !important;}
	.flexbox-sm {
		display: flex;
		flex-wrap: wrap;
	}
	.flexbox-nowrap-sm {
		display: flex;
		flex-wrap: nowrap;
	}
	.flexbox-center-sm {
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
		align-items:center;
	}
	.flexbox-col-reverse-sm {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
	.flexbox-row-reverse-sm {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row-reverse;
	}
	.justify-content-center-sm {
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
	}
	.justify-content-right-sm {
		display: flex;
		flex-wrap: wrap;
		justify-content:right;
	}
	.justify-content-between-sm {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}
	.align-items-center-sm {
		display: flex;
		flex-wrap: wrap;
		align-items:center;
	}
	.align-items-start-sm {
		display: flex;
		flex-wrap: wrap;
		align-items:flex-start;
	}
	.align-items-end-sm {
		display: flex;
		flex-wrap: wrap;
		align-items:flex-end;
	}

	.flex-wrap-sm {flex-wrap: wrap !important;}
	.flex-nowrap-sm {flex-wrap: nowrap !important;}
	.flex-1-sm {flex: 1;}
	.relative-sm {position: relative !important;}
	
	/*表示*/
	.overflow-hidden-sm {overflow: hidden !important;}
	.overflow-x-auto-sm {overflow-x: auto !important;}
	.overflow-y-auto-sm {overflow-y: auto !important;}
	/*全幅表示*/
	.overall-width-sm {
		position: relative;
		left: calc(-50vw + 50%);
		width: 100vw;
		box-sizing: border-box;
	}

	.clear-both-sm {clear: both;}

	/*テキスト関連*/
	.text-ellipsis-sm {
		width:100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.text-ellipsis-3-sm { /*表示行数*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.text-ellipsis-3-sm > p {display:inline;}
	.text-ellipsis-5-sm { /*表示行数*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		overflow: hidden;
	}
	.text-ellipsis-5-sm > p {display:inline;}
	.text-ellipsis-10-sm
	.text-ellipsis-10-sm > p { /*表示行数*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 10;
		overflow: hidden;
	}
	.text-ellipsis-10-sm > p {display:inline;}
	.text-vertical-sm
	.text-vertical-sm > p {/*縦書き*/
		writing-mode: vertical-rl;
		text-orientation: upright;
	}

	/*---ナビゲーションバーの横スクロールー*/
	.nav-collapse {
		border-top: 0px;
		-webkit-box-shadow: none;;
		box-shadow: inset none;;
	}
	.scroll-navbar {
		display: flex;
		position: relative;
		align-items: center;
		overflow: hidden;
	}
	.scroll-navbar.collapse.nav-collapse {
		display: flex !important;
		overflow: hidden !important;
	}
	.scroll-navbar .nav-items {
		z-index: 1; 
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.scroll-navbar .nav-items,
	.scroll-navbar .dropdown-items {
		-ms-overflow-style: none;
		scrollbar-width: none;
		scroll-behavior: smooth;
	}
	.scroll-navbar .nav-items::-webkit-scrollbar,
	.scroll-navbar .dropdown-items::-webkit-scrollbar {
		display: none;
		-webkit-appearance: none;
	}
	.scroll-navbar .nav-items.justified > li {width: 100%;}
	.scroll-navbar .nav-items.justified > li > a {margin: unset;}
	.scroll-navbar .nav-item {white-space: nowrap;}
	.scroll-navbar .nav-arrow {
		text-align: center;
		cursor: pointer;
	}
	.scroll-navbar .dropdown-menu {box-shadow: none;}
	.scroll-navbar .dropdown-menu.full-width {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 9999;
		margin: 0px;
		padding: 30px;
		border: 0px;
		border-radius: 0px;
	}
	.scroll-navbar .dropdown-items {
		padding: 0px;
		list-style: none;
	}
	.scroll-navbar .dropdown-menu-title,
	.scroll-navbar .dropdown-menu-content {padding: 15px;}
	.scroll-navbar .dropdown-item {
		list-style: none;
		line-height: 20px;
		white-space: nowrap;
	}
	.scroll-navbar .nav-arrow {
		display: flex;
		position: absolute;
		z-index:100;
		top: 50%;
		transform: translateY(-50%);
		align-items: center;
		justify-content: center;
	}
	.scroll-navbar .nav-arrow i {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 3;
		font-size: 14px;
		color: #333;
		transition: background 0.2s ease, opacity 0.2s ease;
	}
	.scroll-navbar .nav-arrow i:hover {background: #ddd;}
	.scroll-navbar .nav-arrow-left {left: 5px;}
	.scroll-navbar .nav-arrow-right {right: 5px;}
	.scroll-navbar .nav-arrow.hidden {display: none !important;}

	/*イメージ関連*/
	.ratio-4by3-sm,
	.ratio-4by3-sm {
		width:100%;
		object-fit:cover;
		aspect-ratio: 4 / 3;
	}
	.ratio-16by9-sm,
	.ratio-16by9-sm {
		width:100%;
		object-fit:cover;
		aspect-ratio: 16 / 9;
	}
}
@media screen and (max-width: 767px) {
	/*position関連*/
	.absolute-center-xs {
		position: absolute !important;
		left: 0px !important;
		right: 0px !important;
		top: 0px !important;
		bottom: 0px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.absolute-top-xs {
		position: absolute !important;
		top: 0px !important;
		bottom: unset !important;
	}
	.absolute-bottom-xs {
		position: absolute !important;
		top: unset !important;
		bottom: 0px !important;
	}
	.absolute-right-top-xs {
		position: absolute !important;
		top: 0px !important;
		right: 0px !important;
		left: unset !important;
		bottom: unset !important;
	}
	.absolute-right-bottom-xs {
		position: absolute !important;
		right: 0px !important;
		bottom: 0px !important;
		top: unset !important;
		left: unset !important;
	}
	.fixed-top-xs,
	.fixed-top-right-xs,
	.fixed-bottom-xs {
		position: fixed !important;
		z-index: 1050;
	}
	.fixed-top-right-xs {
		top: 0px !important;
		right: 0px !important;
		left: unset !important;
	}
	.fixed-bottom-xs {
		bottom: 0px !important;
		top: unset !important;
	}

	/*display関連*/
	.display-block-xs {display: block !important;}
	.display-inline-block-xs {display: inline-block !important;}
	.display-none-xs {display: none !important;}
	.flexbox-xs {
		display: flex;
		flex-wrap: wrap;
	}
	.flexbox-nowrap-xs {
		display: flex;
		flex-wrap: nowrap;
	}
	.flexbox-center-xs {
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
		align-items:center;
	}
	.flexbox-col-reverse-xs {
		display: flex;
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}
	.flexbox-row-reverse-xs {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row-reverse;
	}
	.justify-content-center-xs {
		display: flex;
		flex-wrap: wrap;
		justify-content:center;
	}
	.justify-content-right-xs {
		display: flex;
		flex-wrap: wrap;
		justify-content:right;
	}
	.justify-content-between-xs {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}
	.align-items-center-xs {
		display: flex;
		flex-wrap: wrap;
		align-items:center;
	}
	.align-items-start-xs {/*親の上*/
		display: flex;
		flex-wrap: wrap;
		align-items:flex-start;
	}
	.align-items-end-xs {
		display: flex;
		flex-wrap: wrap;
		align-items:flex-end;
	}
	.flex-wrap-xs {flex-wrap: wrap !important;}
	.flex-nowrap-xs {flex-wrap: nowrap !important;}
	.flex-1-xs {flex: 1;}
	.relative-xs {position: relative !important;}

	/*表示*/
	.overflow-hidden-xs {overflow: hidden !important;}
	.overflow-x-auto-xs {overflow-x: auto !important;}
	.overflow-y-auto-xs {overflow-y: auto !important;}
	/*全幅表示*/
	.overall-width-xs {
		position: relative;
		left: calc(-50vw + 50%);
		width: 100vw;
		box-sizing: border-box;
	}

	.clear-both-xs {clear: both;}

	/*テキスト関連*/
	.text-ellipsis-xs {
		width:100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.text-ellipsis-3-xs { /*表示行数*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}
	.text-ellipsis-3-xs > p {display:inline;}
	.text-ellipsis-5-xs { /*表示行数*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		overflow: hidden;
	}
	.text-ellipsis-5-xs > p {display:inline;}
	.text-ellipsis-10-xs
	.text-ellipsis-10-xs > p { /*表示行数*/
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 10;
		overflow: hidden;
	}
	.text-ellipsis-10-xs > p {display:inline;}
	.text-vertical-xs
	.text-vertical-xs > p {/*縦書き*/
		writing-mode: vertical-rl;
		text-orientation: upright;
	}

	/*擬似要素関連*/
	.bg-border-vertical::before {
		left: 0.9em;
	}

	/*イメージ関連*/
	.ratio-4by3-xs,
	.ratio-4by3-xs {
		width:100%;
		object-fit:cover;
		aspect-ratio: 4 / 3;
	}
	.ratio-16by9-xs,
	.ratio-16by9-xs {
		width:100%;
		object-fit:cover;
		aspect-ratio: 16 / 9;
	}
}