@charset "utf-8";



.sitewidth,
.g-sitewidth {
	max-width: calc(1000px + 12%);
	min-width: 320px;

	margin-left: auto;
	margin-right: auto;

	padding-left: 6%;
	padding-right: 6%;

	box-sizing: border-box;
}
.g-footer .g-sitewidth{
	padding-inline: 0;
}
.sitewidth2{
	max-width: calc(800px + 12%);
	min-width: 320px;

	margin-left: auto;
	margin-right: auto;

	padding-left: 6%;
	padding-right: 6%;

	box-sizing: border-box;
}

.ondemand-section{
	margin-top: 2.25em;
	margin-bottom: 2.25em;
}

/* @ Breadcrumbs */
.g-breadcrumb {
	line-height: 1.5;
	font-size: 0.75rem;
	color: #888;
	background: #f8f8f8;
	padding: 1em 0;
}
.g-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 0;
	list-style: none;
	margin: 0;
	padding: 0;
}
.g-breadcrumb__item {
	margin-right: 0.75em;
}
.g-breadcrumb__item:not(:first-child)::before {
	content: "\003E";
	color: #000;
	margin-left: 0.75em;
	margin-right: 0.75em;
}
.product-page .g-breadcrumb__item:nth-child(3)::before {
    content: "\002C";
}
.product-page .g-breadcrumb__item:nth-child(4)::before {
    content: "\003E";
}
.g-breadcrumb__back {
	color: #000;
}
.g-breadcrumb__back:hover {
	text-decoration: none;
}
.g-breadcrumb__back--home {
	/* text-indent: -99rem;
	overflow: hidden;
	display: block;
	width: 1em;
	height: 1em;
	background: url(../_img2/base/icon-home.gif) no-repeat center / contain; */

	display: flex;
	align-items: center;
	gap: 0.5em;
}
.g-breadcrumb__back--home::before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	background: url(/_img2/base/icon-home.gif) no-repeat center / contain;
}
.g-breadcrumb__item br {
	display: none;
}

@media print,screen and (min-width:641px){ .for-sp{ display: none !important; } }
@media print,screen and (max-width:640px){ .for-pc{ display: none !important; } }

@keyframes fadein{
	from{
		opacity: 0;
	}
}




/*--------------------------------------------------

 * javascript modules

--------------------------------------------------*/

/* convert background */
.js-bg{
	overflow: hidden;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.js-bg__trigger{
	visibility: hidden;
}
.js-bg__hide{
	display: block;
	position: fixed;
	left: 110%;
}






/* tab & filter */
.js-tab__trigger,
.js-filter__trigger{
	display: none;
}
.js-tab:not(.js-tab--active) + .ondemand-nav-secondary,
.js-tab__target:not(.js-tab--active),
.js-filter__target:not(.js-filter--active){
	display: none;
}
.js-tab.js-tab--active + .ondemand-nav-secondary,
.js-tab__target.js-tab--active,
.js-filter__target.js-filter--active{
	animation: jsin-fadeIn 360ms ease-out both;
}






/* jsin */
.js-in{}
.js-in.js-in--active{}

.a-target{
	visibility: hidden;
}
.js-in--active .a-target{
	visibility: visible;
}

.a-target:nth-child( 1){ animation-delay: 0000ms !important; }
.a-target:nth-child( 2){ animation-delay: 0090ms !important; }
.a-target:nth-child( 3){ animation-delay: 0180ms !important; }
.a-target:nth-child( 4){ animation-delay: 0270ms !important; }
.a-target:nth-child( 5){ animation-delay: 0360ms !important; }
.a-target:nth-child( 6){ animation-delay: 0450ms !important; }
.a-target:nth-child( 7){ animation-delay: 0540ms !important; }
.a-target:nth-child( 8){ animation-delay: 0630ms !important; }
.a-target:nth-child( 9){ animation-delay: 0720ms !important; }
.a-target:nth-child(10){ animation-delay: 0810ms !important; }
.a-target:nth-child(11){ animation-delay: 0900ms !important; }
.a-target:nth-child(12){ animation-delay: 0990ms !important; }
.a-target:nth-child(13){ animation-delay: 1080ms !important; }
.a-target:nth-child(14){ animation-delay: 1170ms !important; }
.a-target:nth-child(15){ animation-delay: 1260ms !important; }
.a-target:nth-child(16){ animation-delay: 1350ms !important; }
.a-target:nth-child(17){ animation-delay: 1440ms !important; }
.a-target:nth-child(18){ animation-delay: 1530ms !important; }

.a-fade.js-in--active .a-target{
	animation: jsin-fadeIn 360ms ease-out both;
}
.a-blur.js-in--active .a-target{
	animation: jsin-blurIn 64.0ms linear both;
}
.a-slide.js-in--active .a-target{
	animation: jsin-slideIn 640ms ease-out both;
}
.a-zoom.js-in--active .a-target{
	animation: jsin-zoomIn 640ms ease-out both;
}
.a-hero.js-in--active .a-target{
	animation: jsin-hero 1280ms ease-out both;
}

@keyframes jsin-fadeIn{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}

@keyframes jsin-blurIn{
	from{
		opacity: 0;
		filter: blur(5rem);
	}
	to{
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes jsin-slideIn{
	from{
		opacity: 0;
		transform: translateY(2rem);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes jsin-zoomIn{
	from{
		opacity: 0;
		transform: scale(1.75);
	}
	to{
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes jsin-hero{
	from{
		opacity: .5;
		transform: scale(1.2);
		filter: blur(2em);
	}
	to{
		opacity: 1;
		transform: scale(1);
		filter: blur(0);
	}
}




/*--------------------------------------------------

 * base custom

--------------------------------------------------*/



header{
	border-top: 10px solid #000;
	background-color: #e60010;
}
header h1{
	position: static;
	z-index: 0;
	margin: 0;
	padding: 0;
	width: auto;
}
header h1 img{
	margin: 0;
	width: auto;
}
.g-header__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

@media print,screen and (min-width:641px){
	.g-header__inner{
		width: 1000px;
		margin: 0 auto;
	}
}
@media print,screen and (max-width:640px){
	header{
		padding-top: 1.25em;
		padding-bottom: 1.25em;
	}
	.g-header__inner{
		margin-left: 6%;
		margin-right: 6%;
	}
	header h1 img{
		width: 100px;
	}
}

.g-header-nav{
	font-size: 1.3em;
}
.g-header-nav__item{}
.g-header-nav__more{
	color: #fff;
	text-decoration: none;
}






/* ver 2.0 */
@media print,screen and (min-width:641px){
	.g-header-nav__item--toggle{
		display: none;
	}
}
@media print,screen and (max-width:640px){
	header{
		padding-top: 0;
		padding-bottom: 0;
	}
	.g-header__inner{
		height: 50px;
		align-items: stretch;
		margin-right: 0;
	}
	.g-header__inner h1{
		height: auto;
		align-self: center;
	}



	.g-header-nav{
		display: flex;
		align-items: center;
	}
	.g-header-nav__item{}
	.g-header-nav__item:not(:first-child){
		margin-left: 1em;
	}
	.g-header-nav__item--mypage{}
	.g-header-nav__item--toggle{
		border-left: 1px solid #fff;

		align-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.g-header-nav__toggle{
		cursor: pointer;
		display: block;

		padding-left: 1em;
		padding-right: 1em;
	}
}



/*--------------------------------------------------

 * custom sp navigation @ 250307

--------------------------------------------------*/

@media (min-width: 641px){
	.ondemand-menu-sp{
		display: none;
	}
}
@media (max-width: 640px){
	.ondemand-menu-sp{

		font-size: 1.4em;
		text-align: center;
		color: white;
		background: #fd3a3a;
		padding: 1em;

		display: flex;
		justify-content: center;
		align-items: center;
		gap: .5em;

		height: 50px;
		box-sizing: border-box;
		align-content: center;

		position: fixed;
		z-index: 1;
		inset: auto 0 0 0;
	}
	.g-container:has(.ondemand-menu-sp){
		margin-bottom: 50px;
	}
}







/*--------------------------------------------------

 * tab and navigation

--------------------------------------------------*/

.ondemand-nav-primary{
	color: #fff;
	background-color: #EC140E;
}
.ondemand-nav-primary__item{
	font-weight: bold;
}
.ondemand-nav-primary__item.js-tab--active{
	background-color: #A4000B;
}
.ondemand-nav-primary__button{
	display: block;
	cursor: pointer;
	box-sizing: border-box;

	padding: 1.5em;
}

.ondemand-nav-secondary{
	background-color: #A4000B;
}
.ondemand-nav__button{
	cursor: pointer;
}

.ondemand-nav__all{
	cursor: pointer;

	margin: 0;
	padding: 0;
	line-height: 1.32;

	color: inherit;
	background-color: transparent;

	border: 0 none;
	outline: 0 none;

	padding: .25em 1em;
	border-radius: 1em;
}
.ondemand-nav__all.js-filter--active{
	color: #A4000B;
	background-color: #fff;
}

@media (min-width: 641px){
	.ondemand-nav{
		max-width: calc(1000px + 12%);
		margin-left: auto;
		margin-right: auto;
		padding-left: 6%;
		padding-right: 6%;
		box-sizing: border-box;
	}
	.ondemand-nav-primary{
		display: flex;
		flex-wrap: wrap;
	}
	.ondemand-nav-primary__item{
		flex: 1 1;
		word-break: break-all;

		text-align: center;
	}
	.ondemand-nav-primary__button{
		line-height: 1.5;
	}
	.ondemand-nav-secondary{
		order: 1;
		flex: 1 1 100%;

		line-height: 2;
		font-size: .875em;

		display: flex;
		flex-wrap: wrap;

		padding: .42em 2em;
	}

	.ondemand-nav-secondary__item{
		margin-left: 2em;
		margin-right: 2em;

		margin-top: .5em;
		margin-bottom: .5em;
	}


	.js-filter__state{
		padding: .25em 1em;
		border-radius: 1em;
	}
	.js-filter__trigger:checked + .js-filter__state{
		color: #A4000B;
		background-color: #fff;
	}


	.ondemand-nav-primary__item:not(.js-tab--active){
		border-bottom: 1px solid;
	}
	.ondemand-nav-primary__item:not(:first-child){
		border-left: 1px solid;
	}
}
@media (max-width: 640px){
	.ondemand-nav-primary{}
	.ondemand-nav-primary__item,
	.ondemand-nav-secondary__item{
		border-style: solid;
		border-width: 0 0 1px 1px;
	}
	.ondemand-nav-primary__button:before{
		content: "›";
		margin-right: .5em;
		display: inline-block;
	}
	.ondemand-nav-secondary{}
	.ondemand-nav__button{
		box-sizing: border-box;
		display: block;

		padding: .5em;
		padding-left: 3em;
	}
	.ondemand-nav-primary__item.js-tab--active .ondemand-nav-primary__button:before{
		transform: rotate(90deg);
	}
	.ondemand-nav-primary__item.js-tab--active{
		background-color: #ec140e;
	}



	.js-filter__state{
		padding: .25em 1em;
		border-radius: 1em;
	}
	.js-filter__state:before{
		content: "›";
		margin-right: .5em;
	}
	.js-filter__trigger:checked + .js-filter__state{
		color: #A4000B;
		background-color: #fff;
	}


	.ondemand-nav__all:before{
		content: "›";
		margin-right: .5em;
	}

}

#ondemand-nav-toggle{
	display: none;
}
@media print,screen and (min-width:641px){
	.ondemand-nav__toggle{
		display: none;
	}
}
@media print,screen and (max-width:640px){
	.ondemand-nav{
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		display: flex;

		border-top: 10px solid #000;
		/*background-color: rgba(0,0,0, .2);*/

		transition: transform 240ms ease-out;
	}
	#ondemand-nav-toggle:not(:checked) ~ .ondemand .ondemand-nav{
		transform: translateX(100%);
	}
	.ondemand-nav__toggle{
		flex: 0 1 80px;
		text-indent: -999em;

		position: relative;
		z-index: 0;
	}
	.ondemand-nav__toggle:before{
		content: "×";

		font-size: 3.75em;
		text-indent: 0;

		color: #fff;
		background-color: #ED140F;

		box-sizing: border-box;

		cursor: pointer;

		display: flex;
		align-items: center;
		justify-content: center;

		position: absolute;
		top: 0;
		left: 0;
		right: 0;

		width: 80px;
		height: 80px;
	}
	.ondemand-nav-primary{
		flex: 1 1 auto;

		height: 100%;
		overflow: auto;
	}


	#ondemand-nav-toggle{
		position: fixed;
		z-index: 3;
		top: 0;
		right: 0;
	}
}






/*--------------------------------------------------

 * contents

--------------------------------------------------*/

.ondemand{
	/* font-size: 1.6em; */
	line-height: 2em;

	margin-top: 2.75em;
	/*margin-bottom: 4.5em;*/

	overflow: hidden;
}
@media print,screen and (max-width:640px){
	.ondemand{
		/* font-size: 1.3em; */
	}
}






/* header */
.ondemand-header{
	color: #333;
	text-align: center;

	margin-top: 0;
}
.ondemand-header__title{
	font-size: 1.5em;
	font-weight: bold;
}
.ondemand-header__note{

}






/* banner */
.ondemand-banner{}
.ondemand-banner__items{}
.ondemand-banner__item{}
.ondemand-banner__more{
	color: inherit;
	text-decoration: inherit;
}
.ondemand-banner__image{}
.ondemand-text-banner{
	border: 1px solid #999;

	padding: 2em;
	text-align: center;
}

/* slick custom */
.ondemand-banner__items.slick-slider button{
	cursor: pointer;
	outline: 0 none;
}
.ondemand-banner__items.slick-slider .slick-arrow{
	position: absolute;
	z-index: 1;
	top: 0;
	bottom: 1.625em;

	width: 3em;

	margin: 0;
	padding: 0;
	overflow: hidden;
	text-indent: -999em;

	background-color: transparent;
	border: 0 none;
}
.ondemand-banner__items.slick-slider .slick-prev{
	left: 0;
}
.ondemand-banner__items.slick-slider .slick-next{
	right: 0;
}
.ondemand-banner__items.slick-slider .slick-arrow:before{
	content: "あ";

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	display: block;

	width: 1em;
	height: 1em;
	margin: auto;

	transform: rotate(45deg);
	border: 3px solid #ddd;
}
.ondemand-banner__items.slick-slider .slick-prev:before{
	border-top-color: transparent;
	border-right-color: transparent;
}
.ondemand-banner__items.slick-slider .slick-next:before{
	border-left-color: transparent;
	border-bottom-color: transparent;
}

.ondemand-banner__items.slick-slider .slick-dots{
	display: flex;
	justify-content: center;

	margin-top: 1em;
}
.ondemand-banner__items.slick-slider .slick-dots li:not(:first-child){
	margin-left: .625em;
}
.ondemand-banner__items.slick-slider .slick-dots button{
	display: block;

	margin: 0;
	padding: 0;
	border: 0 none;

	width: .625em;
	height: .625em;
	border-radius: 99em;

	overflow: hidden;
	text-indent: -99em;
}
.ondemand-banner__items.slick-slider .slick-dots li:not(.slick-active) button{
	background-color: #ddd;
}
.ondemand-banner__items.slick-slider .slick-dots li.slick-active button{
	background-color: #e60010;
}

@media print,screen and (min-width:641px){
	.ondemand-banner__items.slick-slider .slick-prev{
		transform: translateX(-100%);
	}
	.ondemand-banner__items.slick-slider .slick-next{
		transform: translateX(100%);
	}
}









/* video list */
.ondemand-video-list{}
.ondemand-video-list__items{
	display: flex;
	flex-wrap: wrap;
}
.ondemand-video-list__item{
	display: flex;
	flex-direction: column;
}

@media print,screen and (min-width:641px){
	.ondemand-video-list__items{
		margin-left: -2.33%;
		margin-bottom: -2.33%;
	}
	.ondemand-video-list__item{
		flex: 0 0 31%;

		margin-left: 2.33%;
		margin-bottom: 2.33%;
	}
}
@media print,screen and (max-width:640px){
	.ondemand-video-list__items{
		margin-left: -5%;
		margin-bottom: -5%;
	}
	.ondemand-video-list__item{
		flex: 0 0 45%;

		margin-left: 5%;
		margin-bottom: 5%;
	}
}






/* video list 2.0 */
.ondemand-video-list2{}
.ondemand-video-list2__items{
	display: flex;
	flex-wrap: wrap;

	margin-left: -2.33%;
	margin-bottom: -2.33%;
}
.ondemand-video-list2__item{
	box-sizing: border-box;

	margin-left: 2.33%;
	margin-bottom: 2.33%;
}
.ondemand-video-list2__title{
	line-height: 1;
	font-weight: bold;

	display: flex;
	align-items: flex-start;

	margin-bottom: .625em;
}
.ondemand-video-list2__title:before{
	content: url(../img/icon-title.svg);
	display: block;

	width: 15px;
	height: 15px;

	margin-right: .5em;
	/*
	-ms-interpolation-mode: nearest-neighbor;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: pixelated;
	*/
}
.ondemand-video-list2__title:after{
	content: "";

	display: block;
	flex: 1 1 auto;
	align-self: center;

	margin-left: 2em;

	border-bottom: 1px solid #F7E0E2;
}

@media print,screen and (min-width:641px){
	.ondemand-video-list2{}
	.ondemand-video-list2__items{}
	.ondemand-video-list2__item{
		flex: 0 0 22.67%;
	}
}
@media print,screen and (max-width:640px){
	.ondemand-video-list2{}
	.ondemand-video-list2__items{}
	.ondemand-video-list2__item{
		flex: 0 0 47.67%;
	}
}






.ondemand-video{}
.ondemand-video__preview{
	position: relative;
	z-index: 0;
}
.js-modal .ondemand-video__preview{
	cursor: pointer;
}
.ondemand-video__preview:before,
.ondemand-video__preview:after{
	content: "";

	display: block;

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	transition-property: visibility opacity transform;
	transition-duration: 320ms;
	transition-timing-function: ease-out;
}
.ondemand-video__preview:before{
	background-color: rgba(0, 0, 0, .5);
}
.ondemand-video__preview:after{
	content: "▶";

	display: flex;
	align-items: center;
	justify-content: center;

	width: 1em;
	height: 1em;
	margin: auto;
	padding: 1.25em;

	color: #fff;
	border: 1px solid;
}
.ondemand-video__preview:not(:hover):before,
.ondemand-video__preview:not(:hover):after{
	opacity: 0;
	visibility: hidden;
}
.ondemand-video__preview:not(:hover):after{
	transform: scale(1.2);
}

.ondemand-video__icon{
	position: relative;
	 z-index: 0;

	display: block;
	position: absolute;
	top: 0;
	left: 0;

	font-size: .75em;
	font-weight: bold;
	width: 4em;
	height: 4em;

	color: #fff;
	text-align: center;

	transform: rotate(-45deg);
}
.ondemand-video__icon:before{
	content: "";

	display: block;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	transform: rotate(45deg);

	background-image: linear-gradient(to right bottom, red 50%, transparent 50%);
}

.ondemand-video__thumb{
	width: 100%;
}
.ondemand-video__detail{}
.ondemand-video-header + .ondemand-video__detail{
	margin-top: 1.25em;
}
.ondemand-video__source{
	width: 100%;
	display: block;
}


.js-modal__trigger:not(:checked) ~ .js-modal__target .ondemand-video__detail,
.js-modal__trigger:checked ~ .js-modal__target .ondemand-video__preview,
.js-modal__trigger:not(:checked) ~ .js-modal__target .ondemand-modal__close,
.js-modal__trigger:checked ~ .js-modal__target .ondemand-video__icon,
.js-modal__trigger:not(:checked) ~ .js-modal__target .ondemand-relate-nav,
.js-modal__trigger:checked ~ .js-modal__target .ondemand-video-header__title--front,
.js-modal__trigger:not(:checked) ~ .js-modal__target .ondemand-video-header__title--modal{
	display: none;
}

.ondemand-video-header{
	padding-left: .5em;
	border-left: 2px solid #e60010;
}
.ondemand-video-header__title,
.ondemand-video-header__note{
	line-height: 1em;
}
.ondemand-video-header__title{
	font-size: 1em;
}
.ondemand-video-header__title--front{
	margin-top: 1em;
	margin-bottom: 1em;
}
.ondemand-video-header__note{
	font-size: .875em;
}
.js-modal__trigger:checked ~ .js-modal__target .ondemand-video-header{
	margin-left: -.5625em;
	margin-top: 1em;
}
.js-modal__trigger:checked ~ .js-modal__target .ondemand-video-header__title{
	font-size: 1.33em;
}
.js-modal__trigger:checked ~ .js-modal__target .ondemand-video-header__note{
	font-size: 1.125em;
}
.ondemand-video-header__title + .ondemand-video-header__note{
	margin-top: .75em;
}

.ondemand-video-nav{
	margin-top: auto;
}
.ondemand-video-nav__item:not(:last-child){
	margin-bottom: .5em;
}
.ondemand-video-nav__more{
	display: block;

	padding: .33em;

	color: inherit;
	text-align: center;
	text-decoration: inherit;

	border: 1px solid #ccc;
}
.ondemand-video-nav__more:hover{
	background-color: #f8f8f8;
}
.ondemand-video-nav__more--download{
	position: relative;
	z-index: 0;
}
.ondemand-video-nav__more--download:after{
	content: url(../img/icon_download.png);

	display: block;

	width: 15px;
	height: 21px;

	position: absolute;
	top: 0;
	right: .75em;
	bottom: 0;

	margin-top: auto;
	margin-bottom: auto;
}

@media print,screen and (min-width:641px){}
@media print,screen and (max-width:640px){}

/* 修正コメントアウト */
.ondemand-video__icon{
	display: none;
}
.ondemand-video__preview:before,
.ondemand-video__preview:after{
	display: none;
}
/* 修正コメントアウト */




.ondemand-modal__close{
	font-size: 1.5em;
	cursor: pointer;

	position: absolute;
	top: .5625em;
	right: .5625em;
	line-height: 1em;
}



.js-modal__trigger:checked ~ .js-modal__target.ondemand-modal{
	position: fixed;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	animation: fadein 360ms ease-out;
}
.js-modal__trigger:checked ~ .js-modal__target .ondemand-modal__bg{
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	background-color: rgba(0, 0, 0, .8);
}
.js-modal__trigger:checked ~ .js-modal__target .ondemand-modal__inner{
	position: relative;
	z-index: 0;

	background-color: #fff;

	padding: .5625em;

	width: 800px;
	max-width: 80vw;
	max-height: 80vh;
	overflow: auto;
}

@media print,screen and (min-width:641px){}
@media print,screen and (max-width:640px){}

.js-modal{}
.js-modal__trigger{
	display: none;
}
.js-modal__target{}
.js-modal__trigger:not(:checked) ~ .js-modal__target{}
.js-modal__trigger:checked ~ .js-modal__target{}

.js-modal__depth.js-modal--active{
	position: relative;
	z-index: 2;
}





.ondemand-relate-nav{
	display: flex;
	flex-wrap: wrap;

	margin-top: .75em;
	margin-left: -1em;
	margin-bottom: -.5em;


	font-size: .875em;
	line-height: 2em;

}
.ondemand-relate-nav__item{
	margin-left: 1em;
	margin-bottom: .5em;
}
.ondemand-relate-nav__more{
	display: block;
	box-sizing: border-box;

	padding: 0 1em;

	color: #fff;
	background-color: #999;

	text-decoration: none;
	border-radius: .25em;
}
.ondemand-relate-nav__more--pdf{
	background-color: #e60010;
}
.ondemand-relate-nav__more:hover{
	opacity: .78;
}







/* float navi */
.ondemand-floatnav{
	pointer-events: none;

	position: fixed;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ondemand-floatnav__items{}
.ondemand-floatnav--vertical .ondemand-floatnav__items{
	transform: rotate(-90deg) translateY(65%);
}

.ondemand-floatnav__item{}
.ondemand-floatnav__item:not(:first-child){
	margin-top: .6875em;
}
.ondemand-floatnav__more{
	pointer-events: auto;

	display: block;
	width: 1em;
	line-height: 1.125em;
	text-align: center;
	text-decoration: inherit;

	padding: 1.5em 1.25em;

	color: #e60010;
	background-color: #fff;

	border: 3px solid;
	border-right: 0 none;
	border-radius: .6875em 0 0 .6875em;
}
.ondemand-floatnav__more:after{
	content: "›";


	display: flex;
	align-items: center;
	justify-content: center;


	width: 1em;
	height: 1em;
	margin-top: .75em;

	border-radius: 99em;




	color: #fff;
	background-color: #e60010;
}
.ondemand-floatnav__more--vertical{
	width: auto;

	border: 3px solid;
	border-bottom: 0 none;
	border-radius: .6875em .6875em 0 0;


	display: flex;
}
.ondemand-floatnav__more--vertical:after{
	order: -1;
	margin-top: 0;
	margin-right: .75em;

	transform: rotate(90deg);
}





.ondemand-pagetop{
	text-align: right;

	margin-left: 2em;
	margin-right: 2em;
	margin-bottom: 2em;
}
.ondemand-pagetop__icon{
	display: table;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	position: relative;
	z-index: 0;

	width: 1em;
	height: 1em;
	padding: 1.5em;

	border-radius: 99em;

	color: #fff;
	background-color: rgba(0,0,0,.5);
}
.ondemand-pagetop__icon:after{
	content: "";

	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	width: .5em;
	height: .5em;
	margin: auto;

	border-style: solid;
	border-width: 2px 0 0 2px;

	transform: rotate(45deg);
}






/* copyright */
.ondemand-copyright{
	margin-bottom: 0;
}
.ondemand-copyright__items{}
.ondemand-copyright__item{
	font-size: .7em;
	line-height: 1.5;

	padding-left: 1em;
	text-indent: -1em;
}
.ondemand-copyright__item + .ondemand-copyright__item{
	margin-top: .5em;
}
.ondemand-copyright__note{
	display: block;
}






/*--------------------------------------------------

 * detail video page

--------------------------------------------------*/
.ondemand--video-page{
	margin-top: .5em;
}
.ondemand--video-page .ondemand-copyright{
	margin-top: 1em;
}



.ondemand-sns{
	margin-top: 0;
	margin-bottom: 0;
}
.ondemand-sns__items{
	display: flex;
	justify-content: flex-end;
}
.ondemand-sns__item{}
.ondemand-sns__item:not(:first-child){
	margin-left: .25em;
}
.ondemand-sns__share{}
.ondemand-sns__icon{
	height: 33px;
}



.ondemand-video{
	margin-top: 0;
	margin-bottom: 0;
}



.video-header{}
.video-header__ch-name{}
.video-header__v-name{
	font-size: 1.25em;
	font-weight: bold;

	margin-bottom: .8em;
}



.ondemand-pankuzu{
	font-size: .75em;

	margin-top: 1em;
	margin-bottom: 1em;

	display: flex;
	font-weight: wrap;
}
.ondemand-pankuzu__item{}
.ondemand-pankuzu__item:not(:last-child){
	margin-right: .5em;
}
.ondemand-pankuzu__item:not(:first-child):before{
	content: ">";
	margin-right: .5em;
}
.ondemand-pankuzu__link{
	color: inherit;
	text-decoration: inherit;
}



.ondemand-video__source{}



.ondemand-back{
	margin-top: 2em;
	text-align: center;
}

.aside-nav{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.aside-nav__item{}
.aside-nav__button{
	display: block;
	padding: 1em 2em;

	font-size: .75em;

	color: inherit;
	text-decoration: inherit;
	background-color: #ccc;
}
.aside-nav__button:before{
	content: ">";
	margin-right: 1em;
}
.aside-nav__button:hover{
	background-color: #eee;
}






@media print,screen and (min-width:641px){}
@media print,screen and (max-width:640px){}

/*--------------------------------------------------
 * base.cssのローディングスタイルを流用
 * .js-ajax__append.js-ajax__is-loading::before を使用
 *--------------------------------------------------*/

/* ローダーを最上位に表示するためのz-index調整 */
.js-ajax__append.js-ajax__is-loading::before {
  z-index: 9999 !important;
}

/* z-index階層の整理
 * 9999: ローダー (最上位)
 * 20:   再生ボタンオーバーレイ
 * 10:   サムネイルオーバーレイ
 * 3:    モバイルナビトグル
 * 2:    ナビゲーション、モーダル
 * 1:    その他の固定要素
 * 0:    通常要素（動画コンテナ含む）
 * -1:   背景要素
 */

/*--------------------------------------------------
 * サムネイルクリック再生機能用のスタイル
 *--------------------------------------------------*/

/* 動画コンテナのスタイル */
.ondemand-video-container {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 100%;
	z-index: 0; /* 通常要素として配置 */
}

/* サムネイルオーバーレイのスタイル */
.video-thumbnail-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
	transition: filter 0.3s ease, transform 0.2s ease;
	z-index: 10;
}

.video-thumbnail-overlay:hover {
	filter: brightness(1.15);
	transition: filter 0.3s ease;
}

.video-thumbnail-overlay:active {
	transform: scale(0.98);
}

.video-thumbnail-overlay:focus {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

/* サムネイル画像のスタイル */
.thumbnail-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 再生ボタンのスタイル */
.play-button-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.7);
	border-radius: 50%;
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.play-button-overlay:hover {
	background: rgba(0, 0, 0, 0.9);
	transform: translate(-50%, -50%) scale(1.1);
}

.play-icon {
	color: white;
	font-size: 24px;
	margin-left: 4px; /* 三角形の視覚的中心調整 */
	font-family: Arial, sans-serif;
}

/* 動画再生時のオーバーレイ非表示 */
.video-playing {
	display: none !important;
}

/* エラーメッセージのスタイル */
.video-error-message {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(255, 255, 255, 0.95);
	padding: 20px;
	border-radius: 8px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	z-index: 20;
}

.video-error-message p {
	margin: 0 0 15px 0;
	color: #333;
	font-size: 14px;
}

.video-error-message button {
	background: #007bff;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
}

.video-error-message button:hover {
	background: #0056b3;
}

/* モバイル対応のスタイル */
@media screen and (max-width: 768px) {
	.play-button-overlay {
		width: 80px;
		height: 80px;
	}

	.play-icon {
		font-size: 32px;
	}

	.video-thumbnail-overlay {
		/* タッチデバイスでのタップしやすさを向上 */
		min-height: 44px;
		min-width: 44px;
	}
}

/* タッチデバイス用のアクティブ状態 */
@media (hover: none) and (pointer: coarse) {
	.video-thumbnail-overlay:active {
		background: rgba(0, 0, 0, 0.1);
	}

	.play-button-overlay:active {
		transform: translate(-50%, -50%) scale(0.95);
	}
}

/* 高コントラストモード対応 */
@media (prefers-contrast: high) {
	.play-button-overlay {
		background: rgba(0, 0, 0, 0.9);
		border: 2px solid white;
	}

	.play-icon {
		color: white;
		text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
	}
}

/* アニメーション無効化対応 */
@media (prefers-reduced-motion: reduce) {
	.video-thumbnail-overlay,
	.play-button-overlay {
		transition: none;
	}
}