@charset "UTF-8";

/* component -------------------------------- */
.top-main-area {
	background-color: #F7F7F7;
  max-width: 1920px;
  margin: 0 auto;
  box-shadow: 0 0 27px 21px #39373747;
  overflow: hidden;
	@media only screen and (max-width: 1920px) {
  	box-shadow: none;
	}
}

.c-con-full-1450 {
	max-width: 1450px;
	margin: 0 auto;
}

.top-sec-container {
	position: relative;
  margin: 0 auto;
  max-width: 1250px;
  z-index: 6;
}
@media only screen and (max-width: 1450px) {
	.top-sec-container {
	  max-width: calc( 1250px + 15vw);
	  padding: 0 calc( 15vw / 2);
	}
}
@media only screen and (max-width: 767px) {
  .top-sec-container {
    max-width: calc(100%);
  	padding: 0 calc( 40px / 2);
  }
}

.top-sec-title-deco {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	font-size: clamp(10px, calc(0.902vw + 5.68px), 23px);
  width: auto;
  height: auto;
  z-index: 5;
  @media only screen and (max-width: 767px) {
  	display: none;
	}
}
.top-sec-title-deco span {
	display: inline-block;
  letter-spacing: 0.5vw;
  text-align: center;
	transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
}
.top-sec-title-deco.black span {
	color: #2E2E2E;
}

.top-sec-title-deco.white span {
	color: #fff;
}
/* セクション別 */
.top-sec-title-deco-strength {
	top: 44.7%;
  left: -1.5%;
}
.top-sec-title-deco-company {
	top: 52%;
	left: -0.8%;
}
.top-sec-title-deco-works {
	right: -0.2%;
}
.top-sec-title-deco-products {
	left: -1.4vw;
}
.top-sec-title-deco-news {
	left: 1.4vw;
}


.top-sec-title p {
	overflow: hidden;
}
.top-sec-title.black {
	color: #2E2E2E;
}
.top-sec-title.white {
	color: #fff;
}

.top-sec-title-en {
	display: block;
		font-size: 127px;
  letter-spacing: -0.8px;
  @media only screen and (max-width: 1920px) {
		font-size: 6.6vw;
	}
	@media only screen and (max-width: 767px) {
    font-size: clamp(46px, calc(12.245vw + 0.08px), 94px);
    letter-spacing: 0.8px;
	}
}

.top-sec-title-jp {
	display: inline-block;
	vertical-align: middle;
	font-size: 26.8px;
	font-weight: 700;
	padding-top: 23px;
}
.top-sec-title-jp::before {
	display: inline-block;
	vertical-align: middle;
	content: "●";
	font-size: 21px;
	padding-right: 9.6px;
	padding-left: 9.6px;
	padding-bottom: 4px;
}
.top-sec-title-jp.red::before {
	color: #E60012;
}
.top-sec-title-jp.white::before {
	color: #fff;
}
@media only screen and (max-width: 1919px) {
	.top-sec-title-jp {
		font-size: 1.4vw;
		padding-top: 1.7vw;
	}
	.top-sec-title-jp::before {
		font-size: 1.05vw;
		padding-right: 0.5vw;
		padding-left: 0.5vw;
		padding-bottom: 2%;
	}
}
@media only screen and (max-width: 767px) {
	.top-sec-title-jp {
		font-size: clamp(20px, calc(3.571428vw + 6.607143px), 34px);
    padding-top: 3.1vw;
	}
	.top-sec-title-jp::before {
		font-size: clamp(15px, calc(3.316vw + 2.565px), 25px);
    padding-right: 0.7vw;
    padding-left: 0vw;
		padding-bottom: 1.2vw;
	}
}

.top-sec-desc-text {
	font-size: 20px;
	font-weight: 700;
  line-height: 2;
  letter-spacing: 0.8px;
	padding-top: 6%;
  padding-left: 0.6vw;
	@media only screen and (max-width: 1365px) {
  	font-size: 1.45vw;
	}
  @media only screen and (max-width: 767px) {
	  font-size: clamp(16px, calc(0.510vw + 14.08px), 18px);
  	line-height: 2.14;
		padding-top: 47px;
	}
}
.top-sec-desc-text.white {
	color: #fff;
}

.js-c-title-fadeup {
	transform: translateY(100%);
  transition: opacity 0.5s ease-out, transform 0.4s ease-out;
}
.js-c-title-fadeup.active {
  transform: translateY(0);
}
.js-c-title-sub-fadeup {
	transform: translateY(100%);
  transition: opacity 0.5s ease-out, transform 0.7s ease-out;
}
.js-c-title-sub-fadeup.active {
  transform: translateY(0);
}


/* mainvisual -------------------------------- */
.top-mainvisual-wrap {
}

.top-mainvisual-sprit-box {
  position: relative;
  align-items: center;
  aspect-ratio: 1600/900;
  display: flex;
  justify-content: space-between;
  margin-block-end: clamp(-130px, calc(-109px + (100vw - 1366px) * -0.09928), -75px);
  padding-block-start: clamp(85px, calc(110px + (100vw - 1366px) * 0.04505), 135px);
  width: 100%;
  z-index: 5;
  @media (min-width: 1451px) and (max-width: 1800px) {
  	margin-block-end: clamp(-130px, calc(-78px + (100vw - 1366px) * -0.09928), -75px);
	}
	@media (min-width: 768px) and (max-width: 1450px) {
	  margin-block-end: calc(-84px + (100vw - 768px) * (-25 / 566));
	  /*margin-block-end: calc(-61px + (100vw - 768px) * (-25 / 566));  ←最後こっちにする*/
	}
	@media only screen and (max-width: 767px) {
	  padding-block-start: 100px;
	  margin-block-end: clamp(55px, calc(6.378vw + 31.1px), 80px);
  	flex-wrap: wrap;
	}
}

.top-mainvisual-loop-text-wrap {
  line-height: 1;
  left: 0;
  position: absolute;
	top: clamp(195px, calc(195px + (100vw - 1366px) * 0.0812), 240px);
  width: 100%;
  height: clamp(125px, calc(125px + (100vw - 1366px) * 0.09025), 175px);
  overflow: hidden;
  display: flex;
  align-items: center;
  @media only screen and (max-width: 1920px) {
		translate: -50% 0;
	  margin-inline: calc(50% - 50vw);
	  left: 50%;
	}
  @media (min-width: 768px) and (max-width: 1366px) {
	  top: clamp(119px, calc(119px + (100vw - 768px) * 0.12709), 195px);
  	height: clamp(84px, calc(84px + (100vw - 768px) * 0.06856), 125px);
	}
	@media only screen and (max-width: 767px) {
		top: clamp(130px, calc(130px + (100vw - 375px) * 0.06378), 155px);
  	height: clamp(60px, calc(60px + (100vw - 375px) * 0.15306), 120px);
	}
}

.top-mainvisual-loop-text {
  white-space: nowrap;
	display: inline-block;
  padding-right: 0;
  font-size: clamp(140px, calc(140px + (100vw - 1366px) * 0.1083), 200px);
  letter-spacing: 0;
  line-height: 1;
  color: #fff;
  vertical-align: middle;
  @media (min-width: 768px) and (max-width: 1366px) {
	  font-size: clamp(95px, calc(95px + (100vw - 768px) * 0.0795), 140px);
	}
	@media only screen and (max-width: 767px) {
  	font-size: clamp(60px, calc(60px + (100vw - 375px) * 0.15306), 120px);
	}
}

.top-mainvisual-loop-text-wrap p:nth-child(odd) {
  animation: MoveLeft calc(var(--tick-duration, 24s) * 1) calc(var(--tick-delay, -24s) * 1) infinite linear;
}

.top-mainvisual-loop-text-wrap p:nth-child(2n) {
  animation: MoveLeft2 calc(var(--tick-duration, 24s) * 1) infinite linear;
}

@keyframes MoveLeft {
  0% { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

@keyframes MoveLeft2 {
  0% { transform: translateX(0); }
  to { transform: translateX(-200%); }
}


.top-mainvisual-slider-side {
  font-size: 1187px;
  order: 1;
  @media only screen and (max-width: 1920px) {
  	font-size: 62vw;
	}
  @media only screen and (max-width: 1367px) {
  	font-size: 61.7vw;
	}
	@media only screen and (max-width: 767px) {
    font-size: 91.8vw;
  	order: 0;
  	width: 100%;
	}
}

.top-mainvisual-slider-side-inner {
  position: relative;
  aspect-ratio: 1/1;
  width: 1em;
  @media only screen and (max-width: 767px) {
  	float: right;
	}
}

.top-mainvisual-decoration01 {
	position: absolute;
	bottom: 10.2%;
  right: 2.1%;
  width: 8.1%;
	display: block;
	z-index: 10;
	@media only screen and (max-width: 767px) {
    bottom: -7.8%;
    right: 0.9%;
    width: 18.8%;
	}
}

.top-mainvisual-swiper {
  width: 100%;
  height: 100%;
}

.top-mainvisual-swiper-wrapper {
  width: 100%;
  height: 100%;
}

.top-mainvisual-swiper-slide img {
	position: relative;
	width: 100%;
  height: auto;
  display: block;
  right: -4%;
  @media only screen and (max-width: 767px) {
  	right: -12.4%;
	}
}

.top-mainvisual-copy-side {
  padding-inline-start: 162px;
	@media only screen and (max-width: 1920px) {
	  font-size: 5.25vw;
	  padding-inline-start: clamp(1.3em, 8.5vw, 1.7em);
	}
	@media only screen and (max-width: 1800px) {
	  font-size: 5.25vw;
	  padding-inline-start: 1.5em;
	}
	@media only screen and (max-width: 767px) {
	  padding-inline-start: 5.5%;
	}
	@media only screen and (max-width: 374px) {
	  padding-inline-start: 20px;
	}
}


.top-mainvisual-copy-side .sub {
  font-size: 31px;
  color: #e60012;
  font-weight: 700;
  letter-spacing: 0.15vw;
  margin: 45px 0 15px 0;
	@media only screen and (max-width: 1919px) {
	  font-size: clamp(23px, calc(1.08vw + 9px), 29px);
	}
  @media (min-width: 768px) and (max-width: 1366px) {
  	letter-spacing: 0;
    margin: 2.5vw 0 17px 0;
    font-size: clamp(13px, 2.01vw - 2.46px, 25px);
  }
  @media only screen and (max-width: 767px) {
  	letter-spacing: 0.8px;
  	font-size: clamp(18px, calc(5.102vw - 1.14px), 33px);
  	margin: 40px 0 15px 0;
  }
}

.top-mainvisual-copy-side .main-sub {
	font-weight: 700;
  letter-spacing: 2.1px;
  padding-top: 0.5vw;
	font-size: 36px;
  margin-bottom: 15px;
  @media only screen and (max-width: 1920px) {
  	font-size: clamp(18.6px, calc(0.0151 * 100vw + 7.003px), 36px);
  	letter-spacing: clamp(0px, calc(0.1822vw - 1.398px), 2.1px);
	}
  @media only screen and (max-width: 767px) {
		font-size: clamp(21.5px, calc(0.0574 * 100vw - 0.025px), 40px);
  }
}

.top-mainvisual-copy-side .main {
  font-weight: 700;
  line-height: 1.3;
  font-size: 95px;
  letter-spacing: 0.2px;
  @media only screen and (max-width: 1920px) {
	  font-size: clamp(36.864px, calc(0.04768 * 100vw + 0.256px), 91.776px);
	}
  @media only screen and (max-width: 767px) {
		font-size: clamp(38px, calc(9.949vw + 0.73px), 77px);
  }
  @media only screen and (max-width: 900px) {
  	letter-spacing: 0;
  }
}
.top-mainvisual-copy-side .main span {
	color: #E60012;
}


/* strength -------------------------------- */
.top-strength-wrap {
	width: 100%;
	position: relative;
	z-index: 1;
	overflow: hidden;
	@media only screen and (max-width: 767px) {
		overflow: visible;
	}
}

.top-strength_bg {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	z-index: -1;
}
.top-strength_bg.bg1920 {
  object-fit: cover;
	display: block;
	height: 86%;
	@media only screen and (max-width:1450px) {
		display: none;
	}
}
.top-strength_bg.bg1450 {
  object-fit: contain;
	display: none;
	height: auto;
	@media only screen and (max-width:1450px) {
		display: block;
	}
	@media only screen and (max-width:767px) {
		display: none;
	}
}
.top-strength_bg.bg767 {
  object-fit: cover;
	display: none;
	height: 91%;
	@media only screen and (max-width:767px) {
		display: block;
	}
}

.top-strength-sec-title {
	text-align: center;
  margin: 0 auto;
  padding-top: 16.7%;
  letter-spacing: 0px;
  @media only screen and (max-width: 767px) {
  	padding-top: 25.7%;
	}
}
.top-strength-sec-title p {
	overflow: hidden;
}

.top-strength-sec-title .title-en {
	display: block;
	font-size: 176px;
	text-align: center;
}
.top-strength-sec-title .title-jp {
	display: block;
	font-size: 34px;
  font-weight: 700;
  padding-top: 14px;
}
@media only screen and (max-width: 1920px) {
	.top-strength-sec-title .title-en {
		font-size: 9.2vw;
	}
	.top-strength-sec-title .title-jp {
		font-size: 1.8vw;
	}
}
@media only screen and (max-width: 1800px) {
	.top-strength-sec-title .title-en {
		font-size: 10.2vw;
	}
	.top-strength-sec-title .title-jp {
  	font-size: 2.05vw;
	}
}
@media only screen and (max-width: 767px) {
	.top-strength-sec-title .title-en {
		font-size: 12.2vw;
	}
	.top-strength-sec-title .title-jp {
  	font-size: 5.05vw;
  	padding-top: 5.5%;
	}
}

.top-strength-sprit-box {
	display: flex;
	justify-content: space-between;
	@media only screen and (max-width: 1450px) {
		justify-content: start;
	}
	@media only screen and (max-width: 767px) {
		overflow: hidden;
		flex-wrap: wrap;
	}
}

.top-strength-girl-box {
	@media only screen and (max-width: 767px) {
		order: 1;
		height: 100%;
    margin: 39px auto 0 auto;
	}
}
.top-strength-girl-box img{
	position: relative;
  top: -4.2%;
  left: -13.2%;
  width: 105.8%;
  @media only screen and (max-width: 1366px) {
  	width: 106.5%;
	}
	@media only screen and (max-width: 767px) {
    width: clamp(87vw, calc(138.85vw - 194.44px), 113.5vw);
    left: 0;
    margin-left: clamp(-9vw, calc(-14.74vw + 43.04px), -3vw);
	}
}

.top-strength-desc-box {
	@media only screen and (max-width: 767px) {
		width: 100%;
		padding-top: 12%;
		padding-right: 20px;
		padding-left: 20px;
	}
}

.top-strength-desc-img-flex {
	display: flex;
	gap: 15px;
	@media only screen and (max-width: 767px) {
		display: block;
		margin-right: -20px;
	}
}
.top-strength-desc-img {
	display: block;
  position: relative;
  height: auto;
  @media only screen and (max-width: 767px) {
    width: 100%;
    margin-left: auto;
	}
}
@media only screen and (max-width: 767px) {
	.top-strength-desc-img + .top-strength-desc-img {
		margin-top: 6%;
	}
}

.top-strength-desc-img img {
  position: relative;
  width: 435px;
  @media only screen and (max-width: 1450px) {
 	 width: 30vw;
	}
	@media only screen and (max-width: 767px) {
		position: static;
 	 	width: 100%;
	}
	&.fade-img {
	  transition: opacity 0.5s ease-in-out; /* フェード時間 */
	  opacity: 1;
	}
	&.fade-out {
	  opacity: 0;
	}
}
.top-strength-desc-img:nth-of-type(1) img {
  top: 19.2%;
  left: -5%;
}
.top-strength-desc-img:nth-of-type(2) img {
  top: 0;
  right: 0;
}
@media only screen and (max-width: 1450px) {
	.top-strength-desc-img:nth-of-type(1) img {
	  top: 19.2%;
	  left: -3%;
	}
	.top-strength-desc-img:nth-of-type(2) img {
	  top: 0;
	  right: 0;
	}
}

.top-strenght-desc-text {
  margin-top: 151px;
  position: relative;
  top: 0;
	left: -2.3%;
  color: #fff;
  font-weight: 700;
  line-height: 2;
  letter-spacing: 1.2px;
	font-size: 21px;
	margin-top: 18.3%;
	width: clamp(738.869px, calc(0.1103 * 100vw + 588.259px), 800px);
  @media only screen and (max-width: 1450px) {
  	font-size: 1.45vw;
  	left: -1.5%;
	}
	@media only screen and (max-width: 1366px) {
		width: 54.09vw;
	}
  @media only screen and (max-width: 767px) {
	  position: static;
	  font-size: clamp(16px, calc(0.510vw + 14.08px), 18px);
	  margin-top: 40px;
	  margin-bottom: 45px;
  	letter-spacing: 1px;
  	width: auto;
	}
}

.top-sec-link-btn {
	display: block;
  text-align: center;
  transition: .3s ease-out;
  transition-property: background;
  overflow: hidden;
  max-width: 345px;
  font-size: 16px;
  line-height:64px;
  font-weight: 700;
	@media (min-width: 768px) and (max-width: 1366px) {
		width: 25vw;
    font-size: 1.1vw;
    line-height: 4.4vw;
  }
  @media only screen and (max-width: 767px) {
		max-width: 345px;
	  font-size: 16px;
	  line-height:64px;
	}
	@media only screen and (max-width: 550px) {
		max-width: 100%;
	}
}
.top-sec-link-btn.top-sec-link-btn-black {
  background: #2E2E2E;
  border: 1px solid #2E2E2E;
  color: #fff;
}
.top-sec-link-btn.top-sec-link-btn-red {
  background: #E60012;
  border: 1px solid #E60012;
  color: #fff;
}

.top-strength-link-btn-wrap {
	position: relative;
  top: 5%;
  left: -1.5%;
  @media only screen and (max-width: 767px) {
  	margin: 0 auto;
  	top: 0;
  	left: 0;
	}
}
@media (hover: hover) {
	.top-sec-link-btn.top-sec-link-btn-black:hover {
	  border: 1px solid #E60012;
	  background: #fff;
	  color: #E60012;
	}
	.top-sec-link-btn.top-sec-link-btn-red:hover {
	  border: 1px solid #E60012;
	  background: #fff;
	  color: #E60012;
	}
}

.top-sec-link-btn-arrow {
	position: absolute;
  width: 0;
  height: 0;
  right: 2px;
  bottom: 2px;
  border-right: 11px solid #fff;
  border-left: 11px solid transparent;
  border-top: 11px solid transparent;
  transition: .3s ease-out;
}
@media (hover: hover) {
	.top-sec-link-btn.top-sec-link-btn-black:hover .top-sec-link-btn-arrow {
	  border-right: 11px solid #E60012;
	}
	.top-sec-link-btn.top-sec-link-btn-red:hover .top-sec-link-btn-arrow {
	  border-right: 11px solid #E60012;
	}
}

.top-strength-deco_01 {
	position: absolute;
  width: 27.3%;
  bottom: 10%;
  left: -1%;
}
.top-strength-deco_02 {
  position: absolute;
  width: 41.9%;
  bottom: -5.3%;
  right: -9.7%;
}


/* company -------------------------------- */
.top-company-wrap {
	position: relative;
	margin-block-start: -2vw;
	@media only screen and (max-width: 767px) {
		margin-block-start: 24.3vw;
	}
}

.top-company-deco_01 {
	position: absolute;
  width: 19.7%;
  top: 12.4%;
  right: 15.7%;
}
.top-company-deco_02 {
  position: absolute;
  width: 31.9%;
  top: -24.9%;
  right: 0.2%;
}

.top-company-link-list {
	padding-top: 102.45px;
	display: flex;
	justify-content: space-between;
	gap: 15px;
	@media only screen and (max-width: 1366px) {
		padding-top: 4.4vw;
	}
	@media only screen and (max-width: 767px) {
		flex-wrap: wrap;
		padding-top: 8.4vw;
	}
}

.top-company-link-listitem {
	text-align: center;
	width: 50%;
	height: 230px;
	@media only screen and (max-width: 1365px) {
    height: 16.838vw;
	}
	@media only screen and (max-width: 767px) {
		width: calc(50% - 7.5px);
		height: 53vw;
	}
}

.top-company-link {
	display: inline-block;
	background-color: #fff;
	border-bottom: 6px solid #E60012;
	width: 100%;
	height: 100%;
	@media only screen and (max-width: 1365px) {
		border-bottom: 0.6vw solid #E60012;
	}
	@media only screen and (max-width: 767px) {
		border-bottom: 1.1vw solid #E60012;
	}
}

.top-company-link-flex {
	@media only screen and (min-width: 768px) {
		padding: 40px;
		display: flex;
		align-items: center;
	}
	@media only screen and (max-width: 1365px) {
		padding: 2.929vw;
	}
	@media only screen and (max-width: 767px) {
		padding: 0;
	}
}

.top-company-link-icon {
	position: relative;
	border: 3px solid #E60012;
	border-radius: 100%;
	width: 147px;
	height: 147px;
	@media only screen and (max-width: 1365px) {
		border: 0.3vw solid #E60012;
		width: 10.762vw;
		height: 10.762vw;
	}
	@media only screen and (max-width: 767px) {
    border: 0.5vw solid #E60012;
    width: 24.5vw;
    height: 24.5vw;
    margin: 5vw auto 0 auto;
	}
}
.top-company-link-icon img {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width: auto;
	@media only screen and (max-width: 1365px) {
		width: 5.3vw;
	}
	@media only screen and (max-width: 767px) {
		width: 11vw;
	}
}

.top-company-link-title-box {
	display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.5px;
  width: calc(100% - 147px);
  @media only screen and (max-width: 1365px) {
  	font-size: 1.48vw;
  	width: calc(100% - 10.762vw);
	}
	@media only screen and (max-width: 767px) {
  	justify-content: center;
  	margin: 0 auto;
	  font-size: clamp(16px, calc(3.571vw + 2.61px), 30px);
    padding-top: 6.8vw;
  	letter-spacing: 0.8px;
  	width: auto;
	}
}

.top-company-link-title-box span {
	padding-left: 25px;
	@media only screen and (max-width: 1365px) {
		padding-left: 1.832vw;
	}
	@media only screen and (max-width: 767px) {
		text-align: left;
		padding-left: auto;
		padding-right: 1.5vw;
		line-height: clamp(20.6px, calc(4.694vw + 3px), 36px);
	}
}

.top-company-link-title-box .arrow {
	display: inline-block;
  background-color: #2E2E2E;
	border: 1px solid #2E2E2E;
  border-radius: 100%;
  width: 46px;
  height: 46px;
	padding: 15px;
  transition: .3s ease-out;
  @media only screen and (max-width: 1365px) {
	 	width: 3.368vw;
	  height: 3.368vw;
  	padding: 4.3%;
	}
	@media only screen and (max-width: 767px) {
	 	width: 6vw;
	  height: 6vw;
  	padding: 3.4%;
	}
}

.top-company-link-title-box .arrow path {
	fill: #fff;
}

@media (hover: hover) {
	.top-company-link:hover .top-company-link-title-box .arrow {
		background-color: transparent;
		border: 1px solid #E60012;
	}
	.top-company-link:hover .top-company-link-title-box .arrow path {
		fill: #E60012;
	}
}

.top-company-link-btn-wrap {
	position: relative;
  margin: 75px auto 0 auto;
  @media only screen and (max-width: 1366px) {
  	margin: 5.5vw auto 0 auto;
	}
	@media only screen and (max-width: 767px) {
  	margin: 41.25px auto 0 auto;
	}
}


/* movie -------------------------------- */
.top-movie-wrap {
	position: relative;
	margin-block-start: 7.8vw;
	background-image: url('../images/top/movie_bg.png');
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 100%;
  padding-bottom: 186px;
  @media only screen and (max-width:1920px){
    padding-bottom: 9.5vw;
  }
  @media only screen and (max-width:1365px){
  	padding-bottom: 9.1vw;
  }
	@media only screen and (max-width: 767px) {
		margin-block-start: 21.4vw;
		background-image: url('../images/top/movie_bg_sp.png');
  	padding-bottom: 11.7vw;
	}
	@media only screen and (max-width:500px){
		padding-bottom: 12vw;
	}
}

.movie-player-box {
	position: relative;
	width: 1348px;
  aspect-ratio: 16 / 9;
  margin: 3.6vw auto 0 auto;
	bottom: -0.3vw;
	left: 12px;
	@media only screen and (max-width:1920px){
		width: 69.6vw;
    bottom: -0.3vw;
    left: 10.1px;
	}
	@media only screen and (max-width: 1365px) {
    width: 69.5vw;
    bottom: 0.05vw;
    left: 6.2px;
	}
	@media only screen and (max-width: 767px) {
    width: 90%;
    bottom: -0.3vw;
    left: 0;
  	margin: 9vw auto 0 auto;
	}
	@media only screen and (max-width: 500px) {
    width: 90%;
    bottom: -0.1vw;
    left: 0;
	}
}

.movie-player-btn {
	width: 114px;
	height: 114px;
	background-color: #E60012;
	border-radius: 100%;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}
.movie-player-btn span {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.movie-player-btn span svg {
	display: block;
	width: 63px;
	height: 63px;
	position: absolute;
	top: 0;
	right: 0;
	left: 13px;
	bottom: 0;
	margin: auto;
}
@media only screen and (max-width: 1365px) {
	.movie-player-btn {
		width: 8.4vw;
		height: 8.4vw;
	}
	.movie-player-btn span svg {
		width: 4.6vw;
		height: 4.6vw;
		left: 1vw;
	}
}
@media only screen and (max-width: 767px) {
	.movie-player-btn {
		width: 15.4vw;
		height: 15.4vw;
	}
	.movie-player-btn span svg {
		width: 7.6vw;
    height: 7.6vw;
    left: 1.5vw;
	}
}


/* works -------------------------------- */
.top-works-wrap {
	position: relative;
	padding-top: 13.3vw;
	padding-bottom: 340.692px;
	background-color: #E60012;
	overflow: hidden;
	@media only screen and (max-width: 1450px) {
		padding-bottom: 17.8vw;
	}
	@media only screen and (max-width: 767px) {
		padding-top: 25.3vw;
		padding-bottom: 0;
	}
}

.top-works-bg-deco {
	position: absolute;
	z-index: 2;
}
.top-works-bg-deco.top {
	top: 4.4vw;
  left: 0;
	width: clamp(948.3px, calc(122.06vw - 823.6px), 1522px);
	height: clamp(309.53px, calc(23.87vw - 36.6px), 421.74px);
}
.top-works-bg-deco.bottom {
	bottom: clamp(-377.058px, calc(-25.31vw + 108.9px), -258.1px);
  left: 0;
  width: 100%;
}
@media only screen and (max-width: 1450px) {
	.top-works-bg-deco.top {
	top: 4.4vw;
  left: 0;
	width: 65.4vw;
  height: auto;
	}
	.top-works-bg-deco.bottom {
		bottom: -19.7vw;
	}
}
@media only screen and (max-width: 767px) {
	.top-works-bg-deco.top {
		top: 3.1vw;
	  left: 0;
		width: 100%;
  	height: 14.7%;
	}
	.top-works-bg-deco.bottom {
    bottom: -30.9vw;
    left: 0;
    width: 100%;
	}
}

.top-works-deco_01 {
  position: absolute;
	width: clamp(377px, calc(17.66vw + 120.9px), 460px);
  bottom: 1.2%;
  left: 23%;
	z-index: 3;
	@media only screen and (max-width: 1450px) {
		width: 26.3%;
  	bottom: 1.2%;
  	left: 17%;
	}
  @media only screen and (max-width: 767px) {
  	width: 46.9%;
    bottom: 128vw;
    left: 59.6%;
	}
}

.top-works-image_01 {
	position: relative;
	left: 0;
	width: 713px;
	margin-top: 102.45px;
	z-index: 6;
	@media only screen and (max-width: 1365px) {
		width: 52.2vw;
		margin-top: 7.5vw;
	}
	@media only screen and (max-width: 767px) {
		width: 100%;
		margin-top: 7.5vw;
	}
}
.top-works-image_01::before {
	content: "";
	display: block;
	position: absolute;
	right: -1px;
	bottom: -1px;
	background-color: #E60012;
	width: 249px;
	height: 136px;
	z-index: 1;
	@media only screen and (max-width: 1365px) {
		width: 18.25vw;
	  height: 10vw;
	}
	@media only screen and (max-width: 767px) {
		content: "";
    display: none;
	}
}

.top-works-image_01 img {
	width: 100%;
}

.top-works-link-btn-wrap {
	position: relative;
	top: -96px;
	z-index: 5;
  margin: 0 auto 0 auto;
  @media only screen and (max-width: 1365px) {
		top: -7vw;
	}
	@media only screen and (max-width: 767px) {
		top: 0;
  	margin: 5.5vw auto 0 auto;
	}
}

.top-works-girl {
	position: absolute;
	top: 3.6vw;
  right: 0.8vw;
	width: 812px;
	z-index: 5;
	@media only screen and (max-width: 1920px) {
		width: clamp(688.9px, calc(22.42vw + 382.7px), 813.1px);
	}
	@media only screen and (max-width: 1366px) {
		width: 50.4vw;
	}
	@media only screen and (max-width: 767px) {
		position: relative;
		top: 0;
  	right: 0;
    width: 142.7vw;
    padding-top: 31.7vw;
    margin-left: -28.2vw;
    object-fit: cover;
    height: 178.5vw;
    object-position: top;
    margin-block-start: -7vw;
	}
	@media only screen and (max-width: 500px) {
    margin-block-start: 0;
	}
}


/* products -------------------------------- */
.top-products-wrap {
	position: relative;
	padding-top: 132px;
	padding-bottom: 145px;
	background-image: url('../images/top/products_bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  @media only screen and (max-width: 1920px) {
		padding-top: 6.9vw;
		padding-bottom: 7.8vw;
	}
	@media only screen and (max-width: 1366px) {
		padding-bottom: 50.1vw;
	}
	@media only screen and (max-width: 767px) {
		padding-top: 22.3vw;
		padding-bottom: clamp(476.75px, calc(0.628 * 100vw + 233.25px), 715px);
	}
}

.top-products-inner {
	position: relative;
}

.top-products-sec-desc-text-flex {
	display: flex;
	justify-content: space-between;
}

.top-products-sec-desc-text-left {
	width: 50%;
	@media only screen and (max-width:767px){
		width: 100%;
	}
}

.top-products-sec-desc-text-right {
	width: 50%;
}

.top-products-link-box {
  width: 100%;
  order: 5;
}

.top-products-sec-desc-text {
	padding-bottom: 69.084px;
	@media only screen and (max-width: 1920px) {
		padding-bottom: 3.6vw;
	}
	@media only screen and (max-width: 1365px) {
		padding-bottom: 4.6vw;
	}
	@media only screen and (max-width: 767px) {
		padding-bottom: 9.6vw;
	}
}

.top-products-height-box {
	display: block;
	height: 542px;
	@media only screen and (max-width: 1366px) {
		display: none;
	}
}

.top-products-swiper {
	width: auto;
	position: absolute;
	top: 0;
	@media only screen and (max-width: 1920px) {
	}
  @media only screen and (max-width: 767px) {
  	width: calc(100% - ( 40px / 2));
	}
}

.top-products-swiper-wrapper {
  width: 100%;
  @media only screen and (max-width: 1365px) {
  	width: 93vw;
	}
  @media only screen and (max-width: 767px) {
	}
}

.top-products-swiper-slide {
	width: auto;
	margin-right: 50px;
	@media only screen and (max-width: 1365px) {
		width: clamp(234px, calc(0.3177 * 100vw - 9.85px), 424px);
		margin-right: 3.5vw;
	}
	@media only screen and (max-width: 767px) {
		width: clamp(262.5px, calc(41.2vw + 108px), 424px);
		margin-right: 5.2vw;
	}
}

.top-products-slide-anchor {
	position: relative;
	overflow: hidden;
}

.top-products-slide-anchor img {
  transition: .3s ease;
}

.top-products-slide-anchor-title-box {
	position: absolute;
  right: 26.1px;
	bottom: 24.65px;
	display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 0.5px;
  @media only screen and (max-width: 1450px) {
  	right: 1.8vw;
  	bottom: 1.7vw;
  	font-size: 1.4vw;
	}
	@media only screen and (max-width: 767px) {
    right: 5.4vw;
    bottom: 4.7vw;
	  font-size: clamp(15px, calc(0.77vw + 12.13px), 18px);
  	letter-spacing: 0.8px;
	}
}

.top-products-slide-anchor-title-box span {
	color: #fff;
	padding-right: 8px;
	@media only screen and (max-width: 1365px) {
		padding-right: 0.4vw;
	}
	@media only screen and (max-width: 767px) {
		text-align: left;
		padding-right: 1.5vw;
		line-height: clamp(20.6px, calc(4.694vw + 3px), 36px);
	}
}

.top-products-slide-anchor-title-box .arrow {
	display: inline-block;
  background-color: #2E2E2E;
	border: 1px solid #2E2E2E;
  border-radius: 100%;
  width: 46px;
  height: 46px;
  padding: 14.49px;
  transition: .3s ease-out;
  @media only screen and (max-width: 1450px) {
	 	width: 3.2vw;
	  height: 3.2vw;
  	padding: 1vw;
	}
	@media only screen and (max-width: 767px) {
	 	width: clamp(22.5px, calc(0.04044 * 100vw + 7.335px), 38.35px);
	  height: clamp(22.5px, calc(0.04044 * 100vw + 7.335px), 38.35px);
  	padding: 1.4vw;
	}
}

.top-products-slide-anchor-title-box .arrow path {
	fill: #fff;
}

@media (hover: hover) {
	.top-products-slide-anchor:hover img {
		transform: scale(1.1);
	}
	.top-products-slide-anchor:hover .top-products-slide-anchor-title-box .arrow {
		border: 1px solid #E60012;
		background-color: #E60012;
	}
	.top-products-slide-anchor:hover .top-products-slide-anchor-title-box .arrow path {
		fill: #fff;
	}
}

.top-products-slide-option-wrap {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	padding-top: 29px;
	@media only screen and (max-width: 1920px) {
		padding-top: 1.5vw;
}
	@media only screen and (max-width: 1366px) {
		padding-top: 0;
		position: relative;
		bottom: -42.3vw;
	}
	@media only screen and (max-width: 767px) {
		justify-content: center;
		flex-wrap: wrap;
		/*bottom: -100.3vw;*/
		bottom: clamp(-598.26px, calc(-0.567 * 100vw - 163.37px), -376px);
	}
}

.top-products-slide-scrollbar-box {
	width: 74%;
	margin-right: auto;
}
.top-products-slide-scrollbar {
	position: static !important;
	width: 100% !important;
	height: 3px !important;
	background: #fff !important;
}
.top-products-slide-scrollbar .swiper-scrollbar-drag {
	background: #E60012;
}
.top-products-slide-scrollbar .swiper-scrollbar-drag:hover {
	cursor: pointer;
}
@media only screen and (max-width: 1366px) {
	.top-products-slide-scrollbar-box {
		width: 60.9vw;
	}
}
@media only screen and (max-width: 767px) {
	.top-products-slide-scrollbar-box {
		width: 100%;
	}
	.top-products-slide-scrollbar {

	}
}

.top-products-slide-counter {
	color: #fff;
	font-size: 20px;
  margin-right: 31.418px;
	@media only screen and (max-width: 1366px) {
		font-size: 1.4vw;
  	margin-right: 2.3vw;
	}
	@media only screen and (max-width: 767px) {
		order: 3;
  	margin-right: 2.3vw;
		font-size: 20.25px;
		margin-top: clamp(37.5px, calc(-0.00217 * 100vw + 39.16px), 38.35px);
  	margin-right: 25.125px;
  	margin-left: 25.125px;
	}
}

.top-products-slide-button {
	border: 2px solid #E60012;
	border-radius: 100%;
	width: 60px;
	height: 60px;
	cursor: pointer;
	transition: .3s ease;
	position: relative;
}
.top-products-slide-button.prev {
	background: #fff;
	margin-right: 15.026px;
}
.top-products-slide-button.next {
	background: #E60012;
}
@media only screen and (max-width: 1366px) {
	.top-products-slide-button {
		width: 4.4vw;
		height: 4.4vw;
	}
	.top-products-slide-button.prev {
		margin-right: 1.1vw;

	}
}
@media only screen and (max-width: 767px) {
	.top-products-slide-button {
		width: 48.45px;
		height: 48.45px;
		margin-top: clamp(37.5px, calc(-0.00217 * 100vw + 39.16px), 38.35px);
	}
	.top-products-slide-button.prev {
		margin-right: 0;
		order: 2;
	}
	.top-products-slide-button.next {
		order: 4;
	}
}

.top-products-slide-button .arrow {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width: 22px;
	height: 22px;
	transition: .2s;
}
.top-products-slide-button.prev .arrow {
	transform: rotate(180deg);
}
.top-products-slide-button.prev .arrow path {
	fill: #E60012;
}
.top-products-slide-button.next .arrow path {
	fill: #fff;
}
@media only screen and (max-width: 1366px) {
	.top-products-slide-button .arrow {
		width: 1.6vw;
		height: 1.6vw;
	}
}
@media only screen and (max-width: 767px) {
	.top-products-slide-button .arrow {
		width: 20.625px;
		height: 20.625px;
	}
}

@media (hover: hover) {
	.top-products-slide-button.prev:hover .arrow {
		transform: rotate(180deg) translateX(2.5px);
	}
	.top-products-slide-button.next:hover .arrow {
		transform: translateX(2.5px);
	}
}

.top-products-slide-button.swiper-button-disabled {
	opacity: 0.3;
	cursor: auto;
}
.top-products-slide-button.prev.swiper-button-disabled .arrow {
	transform: rotate(180deg) translateX(0);
}
.top-products-slide-button.next.swiper-button-disabled .arrow {
	transform: none;
}


/* news -------------------------------- */
.top-news-wrap {
	position: relative;
	padding-top: 9vw;
	padding-bottom: 8.8vw;
	@media only screen and (max-width: 767px) {
		padding-top: 22vw;
		padding-bottom: 16.8vw;
	}
}

.top-news-deco_01 {
	position: absolute;
  width: 26%;
  top: 5.4%;
  right: 2.3%;
}
.top-news-deco_02 {
  position: absolute;
  width: 17.2%;
  top: 21.8%;
  right: 16.2%;
}
@media only screen and (max-width: 767px) {
	.top-news-deco_01 {
		width: 33vw;
    top: 3.4%;
    right: -5%;
	}
	.top-news-deco_02 {
    width: 29.4%;
    top: clamp(114.25px, calc(15.09vw + 51.67px), 260.438px);
    right: 4.9%;
	}
}

.top-news-list {
	padding-top: 102.45px;
	@media only screen and (max-width: 1366px) {
  	padding-top: 6.2vw;
	}
	@media only screen and (max-width: 767px) {
		padding-top: 63.37px;
	}
}

.top-news-listitem:first-child {
	.top-news-list-anchor {
	  padding-top: 0;
	}
}

.top-news-list-anchor {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  padding-top: 21.856px;
  padding-bottom: 24.588px;
  border-bottom: 1px solid #2E2E2E;
  @media only screen and (max-width: 1366px) {
		padding-top: 1.6vw;
	  padding-bottom: 1.8vw;
	}
	@media only screen and (max-width: 767px) {
		padding-top: 29.625px;
	  padding-bottom: 25.5px;
	}

}

.top-news-list-date {
	font-size: 16px;
	letter-spacing: 0.1px;
	width: 100%;
	padding-bottom: 16.4px;
  transition: .2s ease;
	@media only screen and (max-width: 1366px) {
		font-size: 1.15vw;
		padding-bottom: 1.2vw;
	}
	@media only screen and (max-width: 767px) {
		width: auto;
		font-size: 14px;
		padding-bottom: 0;
		order: 2;
	}
}

.top-news-list-category {
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	text-align: center;
	background-color: #2E2E2E;
	padding: 6.4px 5px;
	margin-right: 10px;
	width: 96px;
  transition: .2s ease;
	@media only screen and (max-width: 1366px) {
		font-size: 1vw;
		padding: 0.5vw 5px;
		width: 7vw;
	}
	@media only screen and (max-width: 767px) {
		font-size: 12px;
		padding: 6px 5px;
		margin-right: 15px;
		width: 87.45px;
		order: 1;
	}
}
.top-news-list-category span {
	@media only screen and (max-width: 950px) {
	  display: inline-block;
	  transform: scale(0.8);
	}
	@media only screen and (max-width: 767px) {
	  transform: scale(1.0);
	}
}

.top-news-list-desc {
	font-weight: 700;
	font-size: 16px;
	width: auto;
  transition: .2s ease;
  line-height: 1.4;
  @media only screen and (max-width: 1366px) {
		font-size: 1.175vw;
	}
	@media only screen and (max-width: 767px) {
    font-size: 16px;
    line-height: 1.75;
    margin-top: clamp(13px, calc(-1.5306vw + 24.74px), 19px);
		width: 100%;
		order: 3;
	}
}

@media (hover: hover) {
	.top-news-list-anchor:hover .top-news-list-date {
		color: #E60012;
	}
	.top-news-list-anchor:hover .top-news-list-category {
		background-color: #E60012;
	}
	.top-news-list-anchor:hover .top-news-list-desc {
		color: #E60012;
	}
}

.top-news-link-btn-wrap {
	position: relative;
  margin: 60.104px 0 0 auto;
  @media only screen and (max-width: 1366px) {
  	margin: 4.4vw 0 0 auto;
	}
	@media only screen and (max-width: 767px) {
  	/*margin: 11vw auto 0 auto;*/
  	margin: 41.25px auto 0 auto;
	}
}


/* recruit -------------------------------- */
.top-recruit-wrap {
	position: relative;
	padding-top: 7.1vw;
	padding-bottom: 140.698px;
	background-image: url('../images/top/recruit_bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
	@media only screen and (max-width: 1450px) {
		padding-bottom: 10.1vw;
	}
	@media only screen and (max-width: 767px) {
		background-image: url('../images/top/recruit_bg_sp.png');
    padding-top: 17.6vw;
    padding-bottom: 14.7vw;
    margin-top: 99vw;
	}
}

.recruit-contents-flex {
	display: flex;
	justify-content: flex-end;
}

.recruit-contents-flex-item {

}

.top-sec-title-en.recruit-sec-title-en {
	font-size: 176px;
	@media only screen and (max-width: 1920px) {
		font-size: 9.2vw;
	}
	@media only screen and (max-width: 1366px) {
	  font-size: 9.5vw;
	}
	@media only screen and (max-width: 767px) {
	  font-size: 12.2vw;
	}
}

.recruit-sec-title-jp {
	display: inline-block;
	font-size: 34px;
	font-weight: 700;
	padding-top: 14px;
  padding-left: 0.6vw;
	@media only screen and (max-width: 1920px) {
	  font-size: 1.8vw;
	  padding-top: 1.4vw;
	}
	@media only screen and (max-width: 1366px) {
	  font-size: 1.9vw;
	}
	@media only screen and (max-width: 767px) {
		font-size: 5.05vw;
	  padding-top: 4.6vw;
	}
}

.recruit-sec-desc-text {
	font-size: 20px;
	font-weight: 700;
  line-height: 2;
  letter-spacing: 1.7px;
	padding-top: 12%;
	color: #fff;
  width: 634.05px;
	@media only screen and (max-width: 1365px) {
  	font-size: 1.45vw;
  	width: 46.413vw;
	}
  @media only screen and (max-width: 767px) {
	  font-size: clamp(16px, calc(0.510vw + 14.08px), 18px);
  	line-height: 2.14;
		padding-top: 38.6px;
		width: auto;
	}
}

.top-recruit-girl {
	position: absolute;
	z-index: 5;
  width: 962.63px;
  top: -247.266px;
  left: -280.524px;
  @media only screen and (max-width: 1920px) {
	  top: clamp(-247.266px, calc(-0.02223 * 100vw - 204.612px), -234.952px);
	  left: clamp(-280.524px, calc(-0.028 * 100vw - 226.756px), -265.004px);
		width: clamp(849.652px, calc(0.2100 * 100vw + 562.792px), 965.954px);
	}
	@media only screen and (max-width: 1366px) {
		top: clamp(-233.586px, calc(-0.1965 * 100vw + 34.912px), -116px);
  	left: clamp(-265.006px, calc(-0.1619 * 100vw - 43.982px), -168.192px);
		width: 62.2vw;
	}
	@media only screen and (max-width: 767px) {
		top: -99.6vw;
    left: 26.2px;
    width: 107.2vw;
	}
}

.top-recruit-link-btn-wrap {
	position: relative;
  margin-right: auto;
  margin-top: 75.13px;
  @media only screen and (max-width: 1365px) {
  	margin-top: 5.5vw;
	}
	@media only screen and (max-width: 767px) {
  	margin-left: auto;
  	margin-top: 40.125px;
	}
}