@charset "utf-8";


/********************
/* 経営理念・ビジョン
********************/
#top_vision{
	width: 87.17%;
	margin: 4.4rem auto 0;
}
.tv_left{
	display: flex;
	flex-direction: column;
	margin-bottom: 3.25rem;
}
#top_vision .c-title1{
	margin-bottom: 2.92rem;
}
.vision_img1{
	width: 76.47%;
}
#top_vision .txt_block{
	text-align: justify;
	font-size: 1.05rem;
}
#top_vision .vm{
	margin-top: 2.82rem;
}
.vision_imgArea{
	display: flex;
	flex-direction: column;
	margin-top: 3.125rem;
}
.vision_img2{
	width: 57.35%;
}
.vision_img3{
	width: 76.47%;
	margin-top: 1.25rem;
	margin-left: auto;
}
@media screen and (min-width: 768px){
	#top_vision{
		width: 91.11%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}
	.tv_left{
		width: 44.7%;
		margin-bottom: 0;
	}
	.vision_img1{
		width: 96.82%;
	}
	.tv_right{
		width: 44.43%;
		margin-top: 6.2rem;
	}
}
@media screen and (min-width: 992px){
	.tv_left{
		width: 36.52%;
	}
	#top_vision .c-title1{
		margin-left: auto;
	}
	.tv_right{
		width: 52.43%;
		margin-top: 6.2rem;
	}
	.vision_imgArea{
		margin-top: 5.3rem;
	}
	.vision_img2{
		width: 46.27%;
	}
	.vision_img3{
		width: 72.09%;
		margin-top: 2.96rem;
	}
	#top_vision .txt_block{
		font-size: 1.41rem;
	}
}
@media screen and (min-width: 1400px){
	#top_vision .c-title1{
		margin-bottom: 6.99rem;
	}
	.tv_right{
		margin-top: 8.5rem;
	}
	.vision_txtArea{
		width: calc(100% - (7.9% + 5.81%));
		margin-left: 7.9%;
	}
	#top_vision .vm{
		margin-top: 3.02rem;
	}
	.vision_imgArea{
		margin-top: 7.64rem;
	}
	.vision_img3{
		margin-top: 5.58rem;
	}
}

/********************
/* 事業概要
********************/
#top_business{
	position: relative;
	padding-bottom: 7.5rem;
	margin-top: 5.62rem;
}
#top_business::before{
	position: absolute;
	content: "";
	width: 100%;
	height: calc(100% - 32px);
	bottom: 0;
	left: 0;
	background-color: #f3f6fa;
	border-radius: 30px;
	z-index: -1;
}
.tb_inner{
	width: 87.17%;
	margin-right: auto;
	margin-left: auto;
}
.tb_inner .c-title1{
	display: inline-block;
	position: relative;
	margin-bottom: 3.8rem;
}
.tb_inner .c-title1 .f-eng span{
	display: block;
}
.tb_inner .c-title1 .f-eng span:nth-of-type(2){
	margin-left: 102px;
}
.tb_inner .c-title1 .f-eng span:nth-of-type(3){
	margin-left: 70px;
}
.tb_inner .c-title1 .f-jp{
	position: absolute;
	top: calc(50% + 4px);
	right: 0;
	transform: translateY(-50%);
}
.tb_movie{
	position: relative;
	margin-bottom: 4.37rem;
}
.tb_movie .full_btn{
	position: absolute;
	content: "";
	width: 94px;
	height: 94px;
	top: -47px;
	right: 20px;
	background-color: #1d2087;
	color: #fff;
	border-radius: 50%;
	font-size: 0.68rem;
	line-height: 1.09;
	letter-spacing: 0;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	transition: .3s
}
.tb_movie .full_btn .arrow{
	width: 8px;
	height: 7px;
	display: block;
	background-image: url("../images/movie_arrow.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 7px;
}
.tb_movie .full_btn:hover{
	text-decoration: none;
	opacity: 0.8;
}
.tb_con{
	margin-bottom: 0;
}
.tb_con li{
	list-style: none;
	position: relative;
	padding: 5rem 0;
}
.tb_con li:first-child::before,
.tb_con li::after{
	position: absolute;
	content: "";
	width: 100%;
	height: 1px;
	background-color: rgba(100,100,100,0.25);
	left: 0;
}
.tb_con li:first-child::before{
	top: 0;
}
.tb_con li::after{
	bottom: 0;
}
.tb_flex{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 2.725rem;
}
.tb_img{
	width: 120px;
}
.tb_txtArea{
	width: calc(100% - 150px);
}
.tb_tit{
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	font-weight: 500;
	margin-bottom: 0;
}
.tb_tit .f-eng{
	display: block;
	font-size: 1.56rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
	margin-bottom: -0.05rem;
}
.tb_tit .f-eng span{
	display: block;
	margin-top: -0.05rem;
	margin-left: 46px;
}
.tb_con .txt_block{
	color: #505050;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1.75;
	text-align: justify;
}
.tb_con .vm{
	background-color: #fff;
	margin-top: 2.72rem;
}
.tb_con .vm:hover{
	background-color: #1d2087;
}
@media screen and (min-width: 768px){
	#top_business::before{
		width: 87.17%;
		height: calc(100% - 41px);
		left: 50%;
		transform: translateX(-50%);
	}
	.tb_inner{
		width: 72.22%;
	}
	.tb_inner .c-title1{
		margin-bottom: 4.52rem;
	}
	.tb_inner .c-title1 .f-eng span:nth-of-type(2){
		margin-left: 150px;
	}
	.tb_inner .c-title1 .f-eng span:nth-of-type(3){
		margin-left: 70px;
	}
	.tb_inner .c-title1 .f-jp{
		top: calc(50% + 17px);
	}
	.tb_movie .full_btn{
		width: 132px;
		height: 132px;
		top: -66px;
		right: 12.3%;
		font-size: 0.84rem;
		line-height: 1.2;
	}
	.tb_movie .full_btn .arrow{
		width: 11px;
		height: 9.5px;
		margin-top: 10px;
	}
	.tb_con li{
		padding: 3.52rem 0;
	}
	.tb_flex{
		margin-bottom: 0;
	}
	.tb_img{
		width: 23.07%;
	}
	.tb_txtArea{
		width: 69.38%;
	}
	.tb_tit{
		font-size: 0.88rem;
		margin-bottom: 1.55rem;
	}
	.tb_tit .f-eng{
		font-size: 2.11rem;
		margin-bottom: 0.17rem;
	}
}
@media screen and (min-width: 992px){
	#top_business{
		padding-bottom: 9.26rem;
	}
	.tb_movie{
		margin-bottom: 6.89rem;
	}
}
@media screen and (min-width: 1200px){
	#top_business::before{
		height: calc(100% - 45px);
	}
	.tb_inner .c-title1 .f-eng span:nth-of-type(2){
		margin-left: 158px;
	}
	.tb_inner .c-title1 .f-eng span:nth-of-type(3){
		margin-left: 75px;
	}
}
@media screen and (min-width: 1400px){
	#top_business{
		padding-bottom: 12.9rem;
	}
	#top_business::before{
		height: calc(100% - 57px);
	}
	.tb_inner .c-title1{
		margin-bottom: 5.25rem;
	}
	.tb_inner .c-title1 .f-eng span:nth-of-type(2){
		margin-left: 202px;
	}
	.tb_inner .c-title1 .f-eng span:nth-of-type(3){
		margin-left: 90px;
	}
	.tb_movie{
		margin-bottom: 9.41rem;
	}
	.tb_movie .full_btn{
		width: 170px;
		height: 170px;
		top: -85px;
		font-size: 0.94rem;
	}
	.tb_movie .full_btn .arrow{
		width: 14px;
		height: 12px;
		margin-top: 14px;
	}
}



/********************
/* slider
********************/
#splide03{
	margin-top: 7.5rem;
}
#splide03 .splide__track {
  overflow: hidden;
}
#splide03 .splide__list {
	display: flex;
	align-items: center;
	will-change: transform;
	transition: none !important;
}
/* アニメーション定義 */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
#splide03 .splide__slide.slide1{
	width: 320px !important;
}
#splide03 .splide__slide.slide2{
	width: 165px !important;
}
#splide03 .splide__slide.slide3{
	width: 200px !important;
}
@media screen and (min-width: 768px){
	#splide03 .splide__slide.slide1{
		width: 473px !important;
	}
	#splide03 .splide__slide.slide2{
		width: 240px !important;
	}
	#splide03 .splide__slide.slide3{
		width: 296px !important;
	}
}
@media screen and (min-width: 992px){
	#splide03{
		margin-top: 10.2rem;
	}
	#splide03 .splide__slide.slide1{
		width: 626px !important;
	}
	#splide03 .splide__slide.slide2{
		width: 315px !important;
	}
	#splide03 .splide__slide.slide3{
		width: 392px !important;
	}
}
@media screen and (min-width: 1400px){
	#splide03{
		margin-top: 12.9rem;
	}
	#splide03 .splide__slide.slide1{
		width: 780px !important;
	}
	#splide03 .splide__slide.slide2{
		width: 390px !important;
	}
	#splide03 .splide__slide.slide3{
		width: 490px !important;
	}
}

/********************
/* LINE UP
********************/
#top_lineup{
	overflow: hidden;
	margin-top: 6.9rem;
}
.top_lineup {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.top_lineup.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10;
}
.top_lineup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}
.top_lineup-content .c-title1{
	position: absolute;
	top: 0;
	left: 7.225%;
	color: #000;
}
.top_lineup-content .content-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 85.55%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden; /* これが重要！ */
	pointer-events: none;
	z-index: 1;
}
.content-item.active {
  pointer-events: auto;
  z-index: 10; /* 他のアイテムより確実に上に持ってくる */
}
/* 画像エリア（画像＋プログレス） */
.content-item .image-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 51.94%;
	position: relative;
	overflow: hidden;
}
.top_lineup-content .content-item .text{
	color: #000;
	opacity: 0;
	transition: opacity .2s ease-in-out;
	width: 31.01%;
	max-width: 420px;
	position: relative;
  z-index: 11;
}
.top_lineup-content .content-item.active .text{
	opacity: 1;
}
.group_logo{
	display: inline-block;
	width: 297px;
	margin-bottom: 2rem;
}
.group_logo img{
	display: block;
}
.sp_lineup_block li:first-child .group_logo, .content-item1 .group_logo{
	width: 160px;
}
.sp_lineup_block li:nth-child(2) .group_logo, .content-item2 .group_logo{
	width: 120px;
}
.sp_lineup_block li:nth-child(3) .group_logo, .sp_lineup_block li:nth-child(4) .group_logo, .content-item3 .group_logo, .content-item4 .group_logo{
	width: 140px;
}
.top_lineup-content .content-item .text p{
	font-weight: 400;
	font-size: 1rem;
	letter-spacing: 0.04em;
	line-height: 1.75;
	text-align: justify;
	color: #505050;
	margin-bottom: 0;
}
.top_lineup-content .vm {
	margin-top: 3.14rem;
}
@media screen and (min-width: 992px){
	#top_lineup{
		margin-top: 9.74rem;
	}
	.group_logo{
		margin-bottom: 2.57rem;
	}
	.content-item1 .group_logo{
		width: 228px;
	}
	.content-item2 .group_logo{
		width: 171px;
	}
	.content-item3 .group_logo, .content-item4 .group_logo{
		width: 200px;
	}
}
@media screen and (min-width: 1400px){
	#top_lineup{
		margin-top: 12.58rem;
	}
	.group_logo{
		width: 297px;
		margin-bottom: 3.147rem;
	}
	.content-item1 .group_logo{
		width: 298px;
	}
	.content-item2 .group_logo{
		width: 223px;
	}
	.content-item3 .group_logo, .content-item4 .group_logo{
		width: 260px;
	}
}
/* ★ 画像のマスクアニメーション対応 */
.top_lineup-content .content-item .image {
	opacity: 1;
	width: 85%;
	border-radius: 10px;
	overflow: hidden;
	clip-path: inset(100% 0% 0% 0%); /* 初期状態は非表示 */
	will-change: clip-path;
	/* transition: clip-path 0.7s ease-in-out; */
}

/* 以下、古い opacity / transform スタイルは削除またはコメントアウト */
/*
.top_lineup-content .content-item.active .image {
	opacity: 1;
}
.top_lineup-content .content-item .image {
	opacity: 0;
	transition: opacity .3s ease-in-out;
}
.image-area .image {
	transform: translateY(0%);
	transition: transform 0.3s ease;
}
*/
@media screen and (min-height: 700px) and (max-height: 799px){
	.top_lineup-content .content-item .text{
		width: 41.01%;
	}
}
@media screen and (min-height: 700px) and (max-height: 799px){
	.top_lineup-content .content-item .image{
		height: 650px;
	}
	.top_lineup-content .content-item .image img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
@media screen and (min-width: 768px) and (min-height: 1080px){
	.top_lineup-content .content-item .image{
		height: 550px;
	}
	.top_lineup-content .content-item .image img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
@media screen and (min-width: 992px) and (min-height: 800px){
	.top_lineup-content .content-item .image{
		height: 760px;
	}
	.top_lineup-content .content-item .image img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
@media screen and (min-width: 1400px){
	.top_lineup-content .content-item .image{
		height: auto;
	}
}
@media screen and (max-width: 767px){
	#top_lineup{
		margin-right: auto;
		margin-left: auto;
		width: 87.17%;
		overflow: unset;
	}
	.sp_lineup_flex {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	.sp_lineup_progress {
		width: 1px;
		background: #e6e6e6;
		height: 100vh;
		position: sticky;
		top: 0;
	}	
	.progress_inner {
		width: 100%;
		height: 0;
		background: #1d2087;
		transition: height 0.3s ease;
	}
	.sp_lineup_block{
		width: 88.23%;
		margin-bottom: 0;
	}
	.sp_lineup_block li{
		list-style: none;
	}
	.sp_lineup_block li + li{
		margin-top: 4.37rem;
	}
	.sp_lineup_img{
		margin-bottom: 40px;
	}
	.sp_lineup_block .txt_block{
		color: #505050;
		font-size: 1rem;
		line-height: 1.75;
		letter-spacing: 0.04em;
	}
	.group_logo{
		margin-bottom: 1.5rem;
	}
	.sp_lineup_block .vm{
		margin-top: 2.72rem;
	}
}

/* lu-progress */
.lu_progress-wrapper.vertical {
	display: flex;
	flex-direction: column; 
	align-items: center;
	height: 100%;
	justify-content: space-between;
	font-size: 0.88rem;
	font-weight: 400;
	letter-spacing: 0;
	position: relative;
}

.lu_progress-bar {
	width: 1px;
	height: 340px; /* お好みの高さに調整 */
	background: #e6e6e6;
	position: relative;
	overflow: hidden;
	margin: 1.01rem 0;
}

.lu_bar-fill {
  position: absolute;
  top: 0;
  width: 100%;
  height: 0%;
  background: #1d2087;
  transition: height 0.3s ease;
}

/********************
/* NEWS
********************/
/* slider */
#splide04{
	margin-top: 8.75rem;
}
#splide04 .splide__track {
  overflow: hidden;
  height: fit-content;
}
#splide04 .splide__list {
  display: flex;
  align-items: center;
  height: fit-content;
  will-change: transform;
  transition: none !important;
}
#splide04 .splide__slide {
  margin: 0;
  padding: 0;
}
/* アニメーション定義 */
#splide04 .splide__slide.slide1 span{
	font-size: 3.437rem;
	font-weight: 400;
	letter-spacing: -0.002;
	line-height: 1;
}
#splide04 .splide__slide.slide2{
	width: 130px !important;
}
#splide04 .splide__slide.slide1 .slider--img{
	border-radius: 0;
}
#splide04 .slider--img img{
	vertical-align: bottom;
}
@media screen and (min-width: 768px){
	#splide04 .splide__slide.slide1 span{
		font-size: 4.644rem;
	}
	#splide04 .splide__slide.slide2{
		width: 187px !important;
	}
}
@media screen and (min-width: 992px){
	#splide04{
		margin-top: 8.845rem;
	}
	#splide04 .splide__slide.slide1 span{
		font-size: 5.851rem;
	}
	#splide04 .splide__slide.slide2{
		width: 243px !important;
	}
}
@media screen and (min-width: 1400px){
	#splide04{
		margin-top: 8.94rem;
	}
	#splide04 .splide__slide.slide2{
		width: 300px !important;
	}
	#splide04 .splide__slide.slide1 span{
		font-size: 7.058rem;
		line-height: 1;
	}
}
/* news */
.top_news_container{
	width: 87.17%;
	margin-top: 5rem;
	margin-right: auto;
	margin-left: auto;
}
.top_news_container .vm{
	margin-top: 3.125rem;
}
@media screen and (min-width: 768px){
	.top_news_container{
		width: 72.22%;
		max-width: 1300px;
	}
}
@media screen and (min-width: 992px){
	.top_news_container{
		margin-top: 7.05rem;
	}
}
@media screen and (min-width: 1400px){
	.top_news_container{
		margin-top: 9.11rem;
	}
	.top_news_container .vm{
		margin-top: 3.129rem;
	}
}

/********************
/* Join Hamaya
********************/
#top_join{
	position: relative;
	color: #fff;
	padding: 6.87rem 0 8.75rem;
	margin-top: 8.75rem;
}
#top_join::before{
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	border-radius: 30px;
	background-color: #1d2087;
	z-index: -1;
}
.tj_inner{
	width: 87.17%;
	margin-right: auto;
	margin-left: auto;
}
.tj_copy{
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.05em;
	margin-bottom: 1.7rem;
}
.tj_copy .f-eng{
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.01em;
	margin-top: 0.55rem;
}
.tj_txtArea .txt_block{
	width: 100%;
	max-width: 460px;
	text-align: justify;
}
.tj_txtArea .vm{
	margin-top: 2.725rem;
	border: 1px solid rgba(255,255,255,0.25);
}
.tj_img{
	margin-top: 3.75rem;
}
.tj_img div{
	width: 50%;
}
@media screen and (min-width: 768px){
	.tj_inner{
		width: 85.55%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		flex-direction: row-reverse;
	}
	.tj_img{
		width: 51.94%;
		margin-top: 0;
	}
	.tj_txtArea{
		width: 37.66%;
		align-self: center;
	}
}
@media screen and (min-width: 992px){
	#top_join{
		padding: 9.9rem 0 10.84rem;
	}
	.tj_copy{
		margin-bottom: 2.015rem;
	}
	.tj_txtArea .vm{
		margin-top: 2.975rem;
	}
}
@media screen and (min-width: 1400px){
	#top_join{
		padding: 12.94rem 0;
	}
	.tj_copy{
		font-size: 1.41rem;
		margin-bottom: 2.33rem;
	}
	.tj_copy .f-eng{
		font-size: 0.82rem;
		margin-top: 0.41rem;
	}
	.tj_txtArea .vm{
		margin-top: 3.22rem;
	}
}
@media screen and (min-width: 1600px){
	.tj_img{
		height: 900px;
	}
	.tj_img img{
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}