@charset "utf-8";
body {
	overflow-x: hidden;
}
/* -----------------------------------------------------------------------------
	top container
*/
.top-container {
	max-width: 1100px;
	margin-inline: auto;
	padding: 0 40px;
}
@media screen and (max-width: 767px) {
	.top-container {
		padding: 0 20px;
	}
}
/* -----------------------------------------------------------------------------
	top section
*/
.top-section {
	margin: 150px 0 0;
}
@media screen and (max-width: 767px) {
	.top-section {
		margin: 75px 0 0;
	}
}

/* -----------------------------------------------------------------------------
	header
*/
#header{
	position:absolute;
	top:0;
	left:0;
}
@media only screen and (max-width: 767px){
	#header{
		position:relative;
	}
}
@media print {
	.ie8 #header {
		position:relative;
	}
}
/* -----------------------------------------------------------------------------
	article
*/
article{
	position:relative;
	padding-bottom: 160px;
}
@media only screen and (max-width: 767px){
	article{
		margin:0;
		padding: 0 0 85px;
	}
}
@media print {
	article{
		top:0;
		margin:0;
	}
}
/* -----------------------------------------------------------------------------
	top-section-title
*/
.top-section-title-link {
	display: block;
	position: relative;
	width: fit-content;
}
.top-section-title {
	position: absolute;
	left: 95px;
	bottom: -18px;
	display: inline-block;
	background-color: #fff;
	font-size: 80px;
	font-weight: 700;
	line-height: 1;
	padding: 0 8px;
	transition: color 0.5s;
	width: max-content;
}
.top-section-title-icon {
	border:1px solid #ff2600;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 150px;
	height: 150px;
	box-sizing: border-box;
}
.top-section-title-icon__inner {
	position: relative;
	overflow: hidden;
}
.top-section-title-icon__inner img {
	display: block;
	width: 45px;
	height: auto;
}
.top-section-title-icon__inner .default-hide {
	position: absolute;
	left: -150%;
	top: 0;
}
.top-section-title-link:hover {
		background-color: #fff;
	}
@media screen and (min-width: 768px) {
	.top-section-title-link:hover .top-section-title,
	.top-section:has(.top-section-image:hover) .top-section-title {
		color: #ff2600;
	}
	.animate-arrow {
    animation: slide-arrow 0.5s;
  }
}
@keyframes slide-arrow {
	0% {
		translate: 0 0;
	}
	100% {
		translate: 150% 0;
	}
}

@media screen and (max-width: 767px){
	.top-section-title{
		left: 45px;
		bottom: -10px;
		font-size: 40px;
		padding: 0 3px;
	}
	.top-section-title-icon {
		width: 75px;
		height: 75px;
	}
	.top-section-title-icon__inner img {
		width: 22px;
	}
}
/* -----------------------------------------------------------------------------
	top-section-contents
*/
.top-section-contents {
	margin-top: 70px;
}
@media screen and (max-width: 767px) {
	.top-section-contents {
		margin-top: 30px;
	}
}

/* -----------------------------------------------------------------------------
	top-section-image
*/
.top-section-image img {
	width: 100%;
	height: auto;
}

/* -----------------------------------------------------------------------------
	main visual video
*/
.mv {
	margin-top: 100px;
	background-color: #fff;
}
.mv__background {
	position: relative;
	max-width: 1326px;
	width: 100%;
	overflow: hidden;
	background: #000;
	border-radius: 10px;
	margin-inline: auto;
}
.mv__background.mv__background--movie {
	aspect-ratio: 16 / 9;
}

.mv__background__inner {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	padding-top: calc(100% * 9 / 16);
	transform: translate(0, -50%)
}
.mv__background.mv__background--movie .video-js {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* .mv__background.mv__background--image {
	display: none;
} */
@media screen and (max-width:767px) {
	.mv {
		margin-top: 10px;
	}
	/* .mv__background__inner {
		position: static;
		padding-top: 0;
		transform: translate(0, 0)
	} */
	/* .mv__background.mv__background--image {
		display: block;
	} 
	.mv__background.mv__background--image img {
		width: 100%;
		height: auto;
	} */
}


@keyframes arrow {
  0% {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  100% {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%, -8px, 0);
    transform: translate3d(-50%, -8px, 0);
  }
}

/* 動画の再生停止 */
.mv__custom-controls {
	position: absolute;
	right: 110px;
	bottom: 0;
	background-color: rgba(0, 0, 0 , 0.7);
  width: 150px;
}

.mv__btn-wrap {
	display: grid;
	place-items: center;
	height: 62px;
}
.mv__btn-wrap button {
	background-color: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}
.mv__btn-wrap button img{
	width: 100%;
	height: auto;
}
.mv__play-btn {
	display: none;
	max-width: 18px;
	pointer-events: none;
}
.mv__play-btn.is-active,
.mv__pause-btn.is-active {
	display: block;
	pointer-events: visible;
}
.mv__pause-btn {
	display: none;
	max-width: 20px;
	pointer-events: none;
}

.mv__seek-bar {
  position: relative;
  width: 150px;
  height: 3px;
  background: #fff;
  cursor: pointer;
}

.mv__seek-fill {
  position: absolute;
  height: 100%;
  background: #ff2600;
  width: 0;
}
@media screen and (max-width: 767px) {
	.mv__custom-controls {
		right: calc(15 / 375 * 100vw);
		width: calc(80 / 375 * 100vw);
	}
	.mv__btn-wrap {
		height: calc(35 / 375 * 100vw);
	}

	.mv__play-btn {
		max-width: calc(13 / 375 * 100vw);
	}
	.mv__pause-btn {
		max-width: calc(11.5 / 375 * 100vw);
	}
	.mv__seek-bar {
		position: relative;
		width: calc(80 / 375 * 100vw);
		height: calc(3 / 375 * 100vw);
	}
}

/* mvスクロールアイコン */
.mv__scroll-icon {
	display: flex;
	align-items: center;
	position: absolute;
	left: 120px;
	bottom: 20px;
	z-index: 1;
}
.mv__scroll-icon-arrow {
	animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate;
}
.mv__scroll-icon-arrow::before {
	content: "";
	display: block;
	width: 13px;
	height: 13px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	rotate: 45deg;
}
.mv__scroll-icon-arrow::after {
	content: "";
	display: block;
	width: 13px;
	height: 13px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	rotate: 45deg;
	margin-top: -8px;
}
.mv__scroll-icon-txt {
	text-transform: uppercase;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}
@media screen and (max-width: 767px){
	.mv__scroll-icon {
		display: flex;
		align-items: center;
		position: absolute;
		left: calc(20 / 375 * 100vw);
		bottom: calc(12 / 375 * 100vw);
		z-index: 1;
	}
	.mv__scroll-icon-txt {
		font-size: calc(12 / 375 * 100vw);
	}
}

/* -----------------------------------------------------------------------------
	top-business
*/
.top-business-slider {
	max-width: 1230px;
	margin-inline: auto;
}

@media screen and (max-width: 767px) {
	.top-business-slider .splide__track {
		overflow: visible;
		translate: calc(-13 / 375 * 100vw) 0;
	}
}
/* top-business-slider */
.top-business-slider .splide__slide {
	max-width: 300px;
	padding: 40px 0;
}
@media screen and (max-width: 767px) {
	.top-business-slider .splide__slide {
		max-width: calc(150 / 375 * 100vw);
		padding: 40px 0 20px;
	}
}
.top-business-slider .splide__slide:nth-child(even) {
	translate: 0 -40px;
}
.top-business-slider-card {
	position: relative;
}
.top-business-slider-card__thumbnail img {
	display: block;
	width: 100%;
	height: auto;
}
.top-business-slider-card__content {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 1;
	padding: 0 min(15px, calc(15 / 1100 * 100vw));
	border-radius: 10px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
	overflow: auto;
}
.top-business-slider-card__title {
	color: #fff;
	font-size: min(24px, calc(24 / 1100 * 100vw));
	text-align: center;
	margin-top: min(130px, calc(130 / 1366 * 100vw));
}

.top-business-slider-card__txt {
	text-align: center;
	color: #fff;
	font-size: min(16px, calc(16 / 1100 * 100vw));
}
.top-business-slider-card__icon {
	position: absolute;
	bottom: 0;
	right: 0;
	display: grid;
	place-items: center;
	background-color: #000;
	border-radius: 50%;
	translate: 50% 50%;
	width: min(70px, calc(70 / 1366 * 100vw));
	height: min(70px, calc(70 / 1366 * 100vw));
	z-index: 1;
	transition: background-color 0.3s;
}
.top-business-slider-card__icon img {
	width: min(14px, calc(14 / 1366 * 100vw));
	height: auto;
}

.splide__pagination {
	position: static;
	padding: 0;
	height: 3px;
	z-index: 2;
	margin-top: 40px;
}
@media screen and (max-width: 767px) {
	.splide__pagination {
		margin-top: 20px;
	}
}
.splide__pagination__page {
	display: block;
	border-radius: 0;
	width: min(137.5px, calc(137.5 / 1366 * 100vw));
	height: 3px;
	margin: 0;
	background-color: #000;
	transition: background-color 0.5s;
}
.splide__pagination__page.is-active {
	transform: none;
	background-color: #ff2600;
}

@media screen and (min-width: 768px) {
	.top-business-slider-card:hover .top-business-slider-card__content {
		opacity: 1;
		pointer-events: visible;
	}
	.top-business-slider-card:hover .top-business-slider-card__icon {
		background-color: #ff2600;
	}
}
.top-business-slider .splide__arrows {
	width: min(1100px, calc(1100 / 1366 * 100vw));
	margin-inline: auto;
	margin-top: 15px;
}
.splide__arrows-inner {
	display: flex;
	column-gap: 30px;
	align-items: center;
	justify-content: end;
}

.top-business-slider .splide__arrow{
	position: static;
	max-width: 18px;
	background-color: transparent;
	translate: 0 13px;
}
.splide__arrows-inner:has(.splide__toggle.is-active) .splide__arrow {
	opacity: 0.3;
	pointer-events: none;
}
.splide__toggle {
	background-color: #fff;
	border: none;
	max-width: 20px;
	height: 25px;
	padding: 0;
}
.splide__toggle .splide__toggle__play {
	display: inline-block;
	translate: 3px -2px;
}
.splide__toggle img {
	width: 100%;
	height: auto;
}
.top-business-slider .splide__arrow img {
	width: 100%;
	height: auto;
}


@media screen and (max-width: 767px) {
	.top-business-slider-card__icon {
		translate: 20% 20%;
		width: calc(35 / 375 * 100vw);
		height: calc(35 / 375 * 100vw);
	}
	.top-business-slider-card__icon img {
		width: calc(7 / 375 * 100vw);
	}
	.top-business-slider .splide__arrows {
		width: calc(305 / 375 * 100vw);
	}
	.splide__arrows-inner {
		column-gap: 22.5px;
	}
	.top-business-slider .splide__arrow{
		max-width: 13.5px;
		translate: 0 13px;
	}
	.splide__toggle {
		max-width: 15px;
		height: 19px;
	}
	.splide__toggle .splide__toggle__play {
		translate: 2px -1px;
	}

	.splide__pagination__page {
		width: calc(38.125 / 375 * 100vw);
	}
}

/* -----------------------------------------------------------------------------
	localLogo
*/
#localLogo {
	margin: 10px auto 15px;
	max-width: 1200px;
}

/* -----------------------------------------------------------------------------
	fade in animation
*/
.fade-in-element {
	opacity: 0;
	translate: 0 -30px;
	transition: opacity 1s, translate 1s;
}
.fade-in-element.is-active {
	opacity: 1;
	translate: 0 0;
}