@charset "UTF-8";
/*----------
	IR トップページ
----------*/
/*-----------
	animation
----------*/
/* swiper スライドタイマー */
@keyframes moveRight {
	0% {
		width: 9px;
	}
	18% {
		width: 9px;
	}
	100% {
		width: 28px;
	}
}
/*-----------
	.message
----------*/
.message {
	display: flex;
	flex-direction: column-reverse;
	margin-bottom: 60px;
}
.message__catch {
	margin-top: 20px;
	font-weight: 700;
	font-size: 2rem;
	line-height: 1.6;
}
.message__button {
	margin-top: 30px;
}
.message__button-item + .message__button-item {
	margin-top: 18px;
}
@media (width >= 768px), print {
	.message {
		flex-direction: row;
		align-items: center;
	}
	.message__image {
		flex: 0 0 calc(50% - 30px);
		margin-left: 60px;
	}
	.message__detail {
		flex: 1 1 auto;
	}
	.message__catch {
		margin-top: 0;
		font-weight: 700;
		font-size: 3.2rem;
	}
	.message__button {
		max-width: 272px;
		margin-top: 40px;
	}
	.message__button-item + .message__button-item {
		margin-top: 26px;
	}
}

/*-----------
	.card-sliders
----------*/
.card-sliders {
	padding: 50px 20px 40px;
	background-color: #EBF4FC;
}
.card-sliders__usability {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
	margin-top: 30px;
}
.card-sliders .swiper {
	overflow: visible;
}
.card-sliders .swiper .swiper-slide {
	width: 100%;
	position: relative;
	overflow: hidden;
	transition: var(--t-opacity);
	opacity: 1;
}
.card-sliders .swiper .swiper-slide:not(.swiper-slide-visible) {
	pointer-events: none;
	opacity: 0.5;
}
.card-sliders .swiper-pagination {
	position: static;
	width: auto;
	line-height: 1;
	cursor: pointer;
}
.card-sliders .swiper-pagination-bullet {
	width: 9px;
	height: 9px;
	background-color: #CCC;
	margin: 0 5px;
	opacity: 1;
	transition: var(--t-bgColor);
}
.card-sliders .swiper-pagination-bullet-active {
	background-color: #666;
}
.card-sliders .swiper-pagination-bullet.swiper-pagination-bullet-active {
	position: relative;
	width: 28px;
	height: 9px;
	border-radius: calc(infinity * 1px);
	background-color: #CCC;
}
.card-sliders .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 9px;
	background-color: #666;
	border-radius: calc(infinity * 1px);
	transform-origin: top left;
	animation: moveRight 4.5s linear forwards;
	z-index: var(--z-1);
}
.card-sliders .swiper-pagination-bullet.swiper-pagination-bullet-active.is-running::before {
	animation-play-state: running;
}
.card-sliders .swiper-pagination-bullet.swiper-pagination-bullet-active.is-paused::before {
	animation-play-state: paused;
}
.card-sliders :is(.swiper-button-prev, .swiper-button-next) {
	display: block;
	position: static;
	width: 17px;
	height: 32px;
	margin-top: 0;
	cursor: pointer;
	color: var(--color-txt-caption);
}
.card-sliders :is(.swiper-button-prev, .swiper-button-next)::after {
	font-size: 32px;
}
.card-sliders .swiper-button-prev {
	margin-right: 40px;
}
.card-sliders .swiper-button-next {
	margin-left: 40px;
}
.card-sliders .swiper-pause {
	display: block;
	position: relative;
	width: 26px;
	height: 26px;
	margin-left: 22px;
	line-height: 1;
	cursor: pointer;
	background-color: var(--color-txt-caption);
	mask-image: var(--icon-stop);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: cover;
	transition: var(--t-bgColor);
}
.card-sliders .swiper-pause.is-paused {
	background-color: var(--color-txt-caption);
	mask-image: var(--icon-play);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: cover;
	transition: var(--t-bgColor);
}
@media (width >= 768px), print {
	.card-sliders {
		padding: 100px 120px 60px;
	}
}
@media (width >= 768px) and (any-hover: hover) {
	.card-sliders :is(.swiper-button-prev, .swiper-button-next) {
		transition: var(--t-scale);
	}
	.card-sliders :is(.swiper-button-prev, .swiper-button-next):hover {
		scale: 1.2;
	}
}

/*-----------
	.ir-information
----------*/
.ir-information .c-heading-secondary {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ir-information__more a {
	color: var(--color-txt);
	font-size: 1.4rem;
	font-weight: 500;
}
.ir-information__more a::after {
	content: "";
	display: inline-block;
	width: 17px;
	height: 12px;
	margin-left: 12px;
	background-color: var(--color-txt);
	mask-image: var(--icon-arrow-right);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	transition: var(--t-bgColor);
}
.ir-information__more a span {
	border-bottom: 1px solid transparent;
}
.ir-information .bnrarea {
	max-width: 300px;
	margin: 40px auto 0;
	border: 1px solid var(--color-border);
}
@media (width >= 768px) and (any-hover: hover) {
	.ir-information__more a {
		transition: var(--t-color);
	}
	.ir-information__more a::after {
		transition: var(--t-bgColor);
	}
	.ir-information__more a span {
		transition: border var(--hvr) linear;
	}
	.ir-information__more a:hover {
		color: var(--color-prim-light-hover);
		border-color: var(--color-prim-light-hover);
	}
	.ir-information__more a:hover::after {
		background-color: var(--color-prim-light-hover);
	}
	.ir-information__more a:hover span {
		border-color: var(--color-prim-light-hover);
	}
	.ir-information .bnrarea a {
		transition: var(--t-opacity);
	}
	.ir-information .bnrarea a:hover {
		opacity: 0.7;
	}
}

/*-----------
	.categorylink
----------*/
.categorylink__title {
	margin-block: 80px 30px;
}
.categorylink__title > a {
	position: relative;
	display: block;
	padding-bottom: 16px;
}
.categorylink__title > a::before, .categorylink__title > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--color-prim);
}
.categorylink__title > a::before {
	width: 0;
	transition: var(--t-width);
}
.categorylink__title > a::after {
	width: 100%;
}
.categorylink__title h2 {
	position: relative;
	padding-right: 25px;
	color: var(--color-txt);
	font-weight: 700;
	font-size: 2.5rem;
	line-height: 1.44;
}
.categorylink__title h2::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0.8em;
	right: 0;
	width: 18px;
	height: 12px;
	background-color: var(--color-txt);
	mask-image: var(--icon-arrow-right);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	transition: var(--t-bgColor);
	z-index: var(--z-1);
}
.categorylink__lower li + li {
	margin-top: 20px;
}
@media (width >= 768px), print {
	.categorylink__title {
		margin-block: 120px 50px;
	}
	.categorylink__title > a {
		font-size: 2.6rem;
		line-height: 1.62;
		padding-bottom: 24px;
	}
	.categorylink__title h2::before {
		top: 0.7em;
	}
}
@media (width >= 768px) and (any-hover: hover) {
	.categorylink__title > a h2 {
		transition: var(--t-color);
	}
	.categorylink__title > a h2:before {
		transition: var(--t-bgColor);
	}
	.categorylink__title > a:hover::before {
		width: 100%;
	}
	.categorylink__title > a:hover::after {
		width: 0;
	}
	.categorylink__title > a:hover h2 {
		color: var(--color-txt-link-hover);
	}
	.categorylink__title > a:hover h2:before {
		background-color: var(--color-txt-link-hover);
	}
}

/* override */
.categorylink .c-icontext > a[target=_blank]::before, .categorylink .c-icontext > a[target=_blank]::after {
	display: none;
}
.categorylink .c-icontext > a[target=_blank] .c-icontext__icon {
	position: absolute;
	top: 0.3em;
	left: 0;
	margin-left: 0;
}
@media (width >= 768px), print {
	.categorylink .c-icontext > a[target=_blank]::before, .categorylink .c-icontext > a[target=_blank]::after {
		display: none;
	}
	.categorylink .c-icontext > a[target=_blank] .c-icontext__icon {
		top: 0.5em;
	}
}

/*-----------
	.otherslink
----------*/
.otherslink {
	max-width: 1240px;
	padding: 50px 20px;
	margin-inline: auto;
	background-color: #EBF4FC;
	box-shadow: 0 0 0 100vmax #EBF4FC;
	clip-path: inset(0 -100vmax);
}
@media (width >= 768px), print {
	.otherslink {
		padding-block: 100px;
	}
}