/* ----------------------------------------
info
---------------------------------------- */
 .li_info {
 	margin-bottom: 30px;
 	& li {
 		display: flex;
 		gap: 15px;
 		color: #111;
 		&:not(:last-child) {
 			margin-bottom: 15px;
 		}
 		& .date {
 			font-family: "Jost", sans-serif;
 			font-size: 14px;
 			color: #999;
 			flex-shrink: 0;
 		}
 		& .tag p {
 			& label.cms_topic_tag a {
 				font-size: 12px;
 				font-weight: bold;
 				border-radius: 15px;
 				display: flex;
 				justify-content: center;
 				width: 70px;
 				&[href*="/info/topic/5/90/"] {
 					/*更新*/
 					color: #FF7700;
 					border: 1px solid #FF7700;
 				}
 				&[href*="/info/topic/5/89/"] {
 					/*お知らせ*/
 					color: #46B500;
 					border: 1px solid #46B500;
 				}
 				&[href*="/info/topic/5/88/"] {
 					/*重要*/
 					color: #FF0000;
 					border: 1px solid #FF0000;
 				}
 			}
 		}
 		& .link {
 			color: #111;
 			&:hover {
 				text-decoration: underline;
 			}
 		}
 	}
 }
 .de_info_meta {
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: 30px;
 }
 .de_info_meta_tag {
 	& p {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 10px;
 		& label {
 			& a {
 				display: flex;
 				align-items: center;
 				gap: 3px;
 				border: 1px solid #ccc;
 				padding: 1px 10px;
 				border-radius: 5px;
 				color: #111;
 				font-size: 15px;
 				&:before {
 					content: '#';
 				}
 				&:hover {
 					border: 1px solid var(--point-color);
 					color: var(--point-color);
 					box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 				}
 			}
 		}
 	}
 }
 .de_info_meta_date {
 	font-family: "Jost", sans-serif;
 	font-size: 14px;
 	color: #999;
 }
 .de_info_txt {
 	width: clamp(900px, 90%, 1100px);
 	margin: 0 auto;
 	& img {
 		height: auto !important;
 	}
 }
 /* ----------------------------------------
list
---------------------------------------- */
 .li_h1 {
 	font-size: 24px;
 	font-weight: bold;
 	border-bottom: 1px solid #ccc;
 	padding-bottom: 10px;
 	margin-bottom: 30px;
 }
 /* li_basic
---------------------------------------- */
 .li_basic {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	gap: clamp(10px, 1.5vw, 25px);
 	margin-bottom: 30px;
 	& a {
 		display: block;
 		height: 100%;
 		border: 1px solid #ccc;
 		border-radius: 5px;
 		padding: clamp(5px, 1vw, 15px);
 		& .thumb {
 			& img {
 				aspect-ratio: 16 / 9;
 				object-fit: cover;
 				margin-bottom: 10px;
 			}
 		}
 		& .title {
 			overflow: hidden;
 			display: -webkit-box;
 			text-overflow: ellipsis;
 			-webkit-box-orient: vertical;
 			-webkit-line-clamp: 2;
 			height: 52px;
 			font-size: 18px;
 			font-weight: bold;
 			color: #111;
 		}
 		& .tag p {
 			margin-top: 10px;
 			display: flex;
 			flex-wrap: wrap;
 			gap: 3px;
 			& label {
 				cursor: pointer;
 				display: flex;
 				align-items: center;
 				gap: 3px;
 				border: 1px solid #ccc;
 				padding: 1px 5px;
 				border-radius: 3px;
 				color: #111;
 				font-size: 13px;
 			}
 		}
 		&:hover {
 			border: 1px solid var(--point-color);
 			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 			& .title {
 				color: var(--point-color);
 			}
 		}
 	}
 }
 /* ----------------------------------------
detail
---------------------------------------- */
 .de_h1 {
 	font-size: 24px;
 	font-weight: bold;
 	border-bottom: 1px solid #ccc;
 	padding-bottom: 10px;
 	margin-bottom: 30px;
 }
 .de_pager {
 	margin: 0 auto;
 	margin-top: 50px;
 	background-color: #f5f5f5;
 	& ul {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		& li {
 			flex-basis: 350px;
 			align-self: center;
 			font-size: 14px;
 			line-height: 22px;
 			position: relative;
 			flex-grow: 1;
 			& a {
 				display: flex;
 				align-items: center;
 				gap: 10px;
 				color: #111;
 				&:hover {
 					text-decoration: underline;
 				}
 			}
 		}
 	}
 }
 .de_pager li {
 	&:nth-child(1) a {
 		padding: 35px 0 35px 65px;
 		&::before {
 			content: '';
 			width: 6px;
 			height: 6px;
 			border: 0;
 			border-top: solid 2px #aaa;
 			border-right: solid 2px #aaa;
 			transform: rotate(225deg);
 			flex-shrink: 0;
 		}
 	}
 	&:nth-child(2) {
 		flex-basis: 80px;
 		height: 40px;
 		border: 1px solid #999999;
 		border-radius: 3px;
 		background-color: #ffffff;
 		text-align: center;
 		line-height: 40px;
 		box-sizing: border-box;
 		margin: 0 20px;
 		flex-grow: 0;
 		& a {
 			display: block;
 			color: #111111;
 			text-decoration: none;
 		}
 	}
 	&:nth-child(3) a {
 		padding: 35px 65px 35px 0;
 		&::after {
 			content: '';
 			width: 6px;
 			height: 6px;
 			border: 0;
 			border-top: solid 2px #aaa;
 			border-right: solid 2px #aaa;
 			transform: rotate(45deg);
 			margin-left: auto;
 			flex-shrink: 0;
 		}
 	}
 }
 /* de_basic
---------------------------------------- */
 .de_basic_meta {
 	display: flex;
 	justify-content: space-between;
 	margin-bottom: 30px;
 }
 .de_basic_meta_tag {
 	& p {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 10px;
 		& label {
 			& a {
 				display: flex;
 				align-items: center;
 				gap: 3px;
 				border: 1px solid #ccc;
 				padding: 1px 10px;
 				border-radius: 5px;
 				color: #111;
 				font-size: 15px;
 				&:before {
 					content: '#';
 				}
 				&:hover {
 					border: 1px solid var(--point-color);
 					color: var(--point-color);
 					box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 				}
 			}
 		}
 	}
 }
 .de_basic_meta_btn {
 	display: flex;
 	align-items: center;
 	gap: 10px;
 }
 .de_basic_meta_btn label.good_button span {
 	cursor: pointer;
 	border: 1px solid #f98289;
 	border-radius: 3px;
 	background: #f98289;
 	display: flex;
 	font-size: 13px;
 	line-height: 20px;
 	font-weight: bold;
 	color: #fff;
 	padding-right: 6px;
 	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
 }
 .de_basic_meta_btn span.jcjs_good_icon:before {
 	content: "いいね";
 	background: #fff;
 	color: #f98289;
 	font-size: 11px;
 	padding: 0 5px;
 	margin-right: 5px;
 }
 .de_basic_meta_btn span.jcjs_good_icon:hover:before,
 .de_basic_meta_btn label.good_button span.checked:before {
 	background: #f98289;
 	color: #fff;
 }
 .de_basic_meta_btn label.favo_button span {
 	cursor: pointer;
 	border-radius: 3px;
 	display: block;
 	color: #fff;
 }
 .de_basic_meta_btn label.favo_button span.jcjs_favorite_icon:before {
 	content: "★";
 	color: #ccc;
 	font-weight: bold;
 	font-size: 20px;
 	line-height: 1;
 	font-family: "Jost", sans-serif;
 }
 .de_basic_meta_btn label.favo_button span.jcjs_favorite_icon:hover:before,
 .de_basic_meta_btn label.favo_button span.checked:before {
 	color: #FDCE00;
 }
 .de_basic_movie {
 	width: clamp(900px, 90%, 1100px);
 	margin: 0 auto;
 	& iframe {
 		aspect-ratio: 16 / 9;
 		max-width: 100%;
 		height: auto;
 	}
 	&:not(:empty) {
 		margin-bottom: 30px;
 	}
 }
 .de_basic_txt {
 	width: clamp(900px, 90%, 1100px);
 	margin: 0 auto;
 	& img {
 		height: auto !important;
 	}
 }
 .de_basic_dl:not(:has(a)) {
 	display: none;
 }
 .de_basic_dl:has(a) {
 	margin-top: 30px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
 	gap: 15px;
 	padding: 25px 20px;
 	border: 2px dashed #d5d5d5;
 	border-radius: 5px;
 	background: #f5f5f5;
 	& h2 {
 		font-size: 18px;
 		font-weight: bold;
 	}
 	& a {
 		height: 50px;
 		background: var(--sub-color);
 		border: 2px solid var(--point-color);
 		border-radius: 40px;
 		padding: 0 20px;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		gap: 5px;
 		color: #111;
 		font-weight: bold;
 		font-size: 16px;
 		&:hover {
 			color: var(--point-color);
 			box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 		}
 	}
 	& .note {
 		color: #666;
 		font-size: 14px;
 	}
 }
 /* de_step
---------------------------------------- */
 .de_step_intro {
 	display: flex;
 	flex-wrap: wrap;
 	margin: 50px auto;
 }
 .de_step_intro_txt:not(:empty) {
 	width: 100%;
 	padding-bottom: 30px;
 }
 .de_step_intro_figure {
 	img {
 		max-width: 480px;
 		width: 100% !important;
 		height: auto;
 		display: block;
 		cursor: zoom-in;
 		&:hover {
 			outline: 2px solid var(--point-color);
 			outline-offset: -2px;
 			cursor: zoom-in;
 		}
 	}
 	iframe {
 		max-width: 480px;
 		aspect-ratio: 16 / 9;
 		width: 100%;
 		height: auto;
 		display: block;
 	}
 }
 .de_step_intro_figure:not(:empty) {
 	max-width: 50%;
 	width: 480px;
 	margin-right: 30px;
 }
 .de_step_intro_figure:not(:empty)+.de_step_intro_conts {
 	width: calc(100% - 510px);
 	flex-grow: 3;
 }
 .de_step_intro_figure:empty+.de_step_intro_conts {
 	width: 100%;
 }
 .de_step_intro_index {
 	width: 100%;
 	border: 1px solid var(--border-color);
 	font-size: 16px;
 	background: var(--base-color);
 	border-radius: 5px;
 	box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
 }
 .de_step_intro_index_ttl {
 	background: #f3f4f6;
 	font-weight: bold;
 	padding: 10px 15px;
 	display: flex;
 	align-items: center;
 	border-bottom: 1px solid var(--border-color);
 }
 .de_step_intro_index_link {
 	padding: 15px;
 	counter-reset: number 0;
 	font-weight: normal;
 	li:has(a:not(:empty)) {
 		display: flex;
 		padding-bottom: 3px;
 		&:before {
 			counter-increment: number 1;
 			content: "STEP "counter(number) " ";
 			padding-right: 10px;
 			flex-shrink: 0;
 		}
 		a {
 			display: block;
 			font-weight: bold;
 			flex-grow: 3;
 			&:hover {
 				text-decoration: underline;
 			}
 			&:before {
 				content: none;
 			}
 		}
 	}
 }
 .de_step_intro_nav {
 	font-size: 13px;
 	margin-top: 15px;
 }
 @media screen and (max-width: 1200px) {
 	.de_step_intro_nav {
 		display: block;
 	}
 }
 .de_step_intro_btn {
 	cursor: pointer;
 	display: flex;
 	align-items: center;
 	padding: 0 10px;
 	height: 28px;
 	border-radius: 14px;
 	background: #fff;
 	border: 1px solid #999;
 	&:hover {
 		background: #eee;
 		border: 1px solid #333;
 	}
 }
 .de_step_intro_update {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
 	justify-content: flex-end;
 }
 .de_step_intro_update_date {
 	margin-right: 10px;
 	font-size: 15px;
 }
 .history-toggle {
 	position: absolute;
 	opacity: 0;
 	pointer-events: none;
 }
 .de_step_intro_history_pop {
 	position: fixed;
 	inset: 0;
 	display: none;
 	z-index: 1000;
 }
 .history-toggle:checked+.de_step_intro_btn+.de_step_intro_history_pop {
 	display: block;
 }
 .de_step_intro_history_pop .history_overlay {
 	position: absolute;
 	inset: 0;
 	background: rgba(0, 0, 0, 0.2);
 	cursor: pointer;
 }
 .de_step_intro_history_pop .history_box {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	width: min(90vw, 700px);
 	height: min(90vh, 700px);
 	transform: translate(-50%, -50%);
 	background: #fff;
 	border-radius: 10px;
 	box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
 	padding: min(3%, 20px) min(5%, 30px);
 	overflow: auto;
 }
 .de_step_intro_history_pop .history_box_ttl {
 	font-weight: 700;
 	font-size: 18px;
 	border-bottom: 1px solid #ccc;
 	padding-bottom: 15px;
 	margin-bottom: 15px;
 }
 .de_step_intro_history_pop .history_box_txt {
 	overflow-y: scroll;
 	font-size: 15px;
 	height: calc(100% - 60px);
 	padding: 10px;
 }
 .de_step_intro_history_pop .history_close {
 	position: absolute;
 	top: 8px;
 	right: 10px;
 	width: 32px;
 	height: 32px;
 	line-height: 32px;
 	text-align: center;
 	border-radius: 8px;
 	cursor: pointer;
 	font-size: 20px;
 	color: #333;
 	user-select: none;
 }
 .de_step_intro_history_pop .history_close:hover {
 	background: #f3f4f6;
 }
 .de_step_intro_function {
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
 	flex-wrap: wrap;
 	border-top: 1px dashed #ccc;
 	padding-top: 15px;
 	margin-top: 15px;
 	&>div {
 		flex-shrink: 0;
 		margin: 3px;
 	}
 }
 @media screen and (max-width: 1200px) {
 	.de_step_intro_function {
 		border-top: 1px solid #ccc;
 		padding-top: 15px;
 		margin-top: 15px;
 	}
 }
 .de_step_intro_pdf .de_step_intro_btn {
 	font-size: 13px;
 }
 /* -- de_step_contents -- */
 .de_step_contents {
 	border-top: 1px solid var(--border-color);
 	margin: 50px auto;
 }
 .de_step_conts_box {
 	margin-top: 90px;
 	border-radius: 10px;
 	border: 1px solid var(--border-color);
 	background: #fff;
 	padding: min(5%, 30px);
 	box-shadow: 0 1px 8px rgba(0, 0, 0, .04);
 	position: relative;
 	&:first-child {
 		margin-top: 50px;
 	}
 	&:not(:first-child):before {
 		content: "";
 		background-color: var(--point-color);
 		position: absolute;
 		left: 0;
 		right: 0;
 		margin: auto;
 		top: -60px;
 		width: 100px;
 		height: 40px;
 		display: block;
 		clip-path: polygon(0 0, 100% 0, 50% 100%);
 	}
 }
 .de_step_conts_box:has(h2:empty) {
 	display: none;
 	margin-top: 0;
 }
 .de_step_conts_ttl {
 	display: flex;
 	align-items: center;
 	margin-bottom: 20px;
 	h2 {
 		font-weight: bold;
 		font-size: 24px;
 	}
 }
 .de_step_conts_no {
 	background: var(--point-color);
 	color: var(--point-text-color);
 	width: 100px;
 	height: 30px;
 	border-radius: 15px;
 	margin-right: 15px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex-shrink: 0;
 }
 .de_step_conts_main {
 	display: flex;
 	align-items: flex-start;
 }
 .de_step_conts_figure {
 	img {
 		max-width: 480px;
 		width: 100% !important;
 		height: auto;
 		display: block;
 		cursor: zoom-in;
 		&:hover {
 			outline: 2px solid var(--point-color);
 			outline-offset: -2px;
 		}
 	}
 	iframe {
 		max-width: 480px;
 		aspect-ratio: 16 / 9;
 		width: 100%;
 		height: auto;
 		display: block;
 	}
 }
 .de_step_conts_figure:not(:empty) {
 	max-width: 50%;
 	width: 480px;
 	margin-right: 30px;
 }
 .de_step_conts_figure:not(:empty)+.de_step_conts_text {
 	width: calc(100% - 510px);
 	flex-grow: 3;
 }
 .de_step_conts_figure:empty+.de_step_conts_text {
 	width: 100%;
 }
 .de_step_conts_text {
 	font-size: 18px;
 	table {
 		th, td {
 			border: 1px solid #999;
 			padding: 10px 15px;
 			font-size: 16px;
 		}
 		th {
 			background: var(--base-color);
 			font-weight: bold;
 		}
 	}
 	a {
 		display: flex;
 		align-items: center;
 		&:before {
 			content: "";
 			width: 20px;
 			height: 20px;
 			background: url(/channel_setting/img/icon_link.webp) 0 0 no-repeat;
 			background-size: 20px 20px;
 			margin-right: 5px;
 			flex-shrink: 0;
 		}
 	}
 	b {
 		background: var(--sub-color);
 		padding: 10px 15px;
 		display: block;
 	}
 }