#viewer1{

		transition: all 0.5s;
	position: relative;
	 overflow   : hidden;
					   /* 画像のサイズに合わせて変更ください */
	 width      :52vw;
aspect-ratio: 0.52 / 0.648;
		  /* サンプルは中央寄せの背景：白 */
	padding: 0px;

	margin-left: 0;


	}

	#viewer1 img {

		position   : absolute;
							/* 画像のサイズを表示エリアに合せる */
							width      : 100%;

		right: 0;
		left: 0;
		margin: auto;
		opacity: 0;
		transition: 0s;

	   }

	   #viewer1 img.show {
		   opacity: 1;
		  }


		  #viewer2{

			transition: all 0.5s;
		position: relative;
		 overflow   : hidden;
						   /* 画像のサイズに合わせて変更ください */
		 width      :100vw;
	aspect-ratio: 1 / 0.41;
			  /* サンプルは中央寄せの背景：白 */
		padding: 0px;

		margin-left: 0;
margin-top: -6vw;

		}

		#viewer2 img {

			position   : absolute;
								/* 画像のサイズを表示エリアに合せる */
								width      : 100%;

			right: 0;
			left: 0;
			margin: auto;
			opacity: 0;
			transition: 0s;

		   }

		   #viewer2 img.show {
			   opacity: 1;
			  }



		  #viewer3{

			transition: all 0.5s;
		position: relative;
		 overflow   : hidden;
						   /* 画像のサイズに合わせて変更ください */
		 width      :100%;
	aspect-ratio: 0.594 / 0.395;
			  /* サンプルは中央寄せの背景：白 */
		padding: 0px;



		}

		#viewer3 img {

			position   : absolute;
								/* 画像のサイズを表示エリアに合せる */
								width      : 100%;

			right: 0;
			left: 0;
			margin: auto;
			opacity: 0;
			transition: 0s;

		   }

		   #viewer3 img.show {
			   opacity: 1;
			  }


		  #viewer4{

			transition: all 0.5s;
		position: relative;
		 overflow   : hidden;
						   /* 画像のサイズに合わせて変更ください */
		 width      :21vw;
	aspect-ratio: 0.21/ 0.27;
			  /* サンプルは中央寄せの背景：白 */
		padding: 0px;
margin-left: 30.8vw;
margin-top: -22vw;

		}

		#viewer4 img {

			position   : absolute;
								/* 画像のサイズを表示エリアに合せる */
								width      : 100%;

			right: 0;
			left: 0;
			margin: auto;
			opacity: 0;
			transition: 0s;

		   }

		   #viewer4 img.show {
			   opacity: 1;
			  }


		  #viewer5{

			transition: all 0.5s;
		position: relative;
		 overflow   : hidden;
						   /* 画像のサイズに合わせて変更ください */
		 width      :54.9vw;
	aspect-ratio: 0.549/ 0.685;
			  /* サンプルは中央寄せの背景：白 */
		padding: 0px;


		}

		#viewer5 img {

			position   : absolute;
								/* 画像のサイズを表示エリアに合せる */
								width      : 100%;

			right: 0;
			left: 0;
			margin: auto;
			opacity: 0;
			transition: 0s;

		   }

		   #viewer5 img.show {
			   opacity: 1;
			  }


		  #viewer6{

			transition: all 0.5s;
		position: relative;
		 overflow   : hidden;
						   /* 画像のサイズに合わせて変更ください */
		 width      :47vw;
	aspect-ratio: 0.47 / 0.459;
			  /* サンプルは中央寄せの背景：白 */
		padding: 0px;


		}

		#viewer6 img {

			position   : absolute;
								/* 画像のサイズを表示エリアに合せる */
								width      : 100%;

			right: 0;
			left: 0;
			margin: auto;
			opacity: 0;
			transition: 0s;

		   }

		   #viewer6 img.show {
			   opacity: 1;
			  }


		  #viewer7{

			transition: all 0.5s;
		position: relative;
		 overflow   : hidden;
						   /* 画像のサイズに合わせて変更ください */
		 width      :100vw;
	aspect-ratio: 1 / 0.655;
			  /* サンプルは中央寄せの背景：白 */
		padding: 0px;


		}

		#viewer7 img {

			position   : absolute;
								/* 画像のサイズを表示エリアに合せる */
								width      : 100%;

			right: 0;
			left: 0;
			margin: auto;
			opacity: 0;
			transition: 2s;

		   }

		   #viewer7 img.show {
			   opacity: 1;
			  }


		  #viewer8{

			transition: all 0.5s;
		position: relative;
		 overflow   : hidden;
						   /* 画像のサイズに合わせて変更ください */
		 width      :100%;
	height: 100%;
			  /* サンプルは中央寄せの背景：白 */
		padding: 0px;


		}

		#viewer8 img {

			position   : absolute;
								/* 画像のサイズを表示エリアに合せる */
								width      : 100%;

			right: 0;
			left: 0;
			margin: auto;
			opacity: 0;
			transition: 2s;
			object-fit: cover;
			height: 100%;

		   }

		   #viewer8 img.show {
			   opacity: 1;
			  }


			  #viewer9{

				transition: all 0.5s;
			position: relative;
			 overflow   : hidden;
							   /* 画像のサイズに合わせて変更ください */
			 width      :100%;
	aspect-ratio: 1 / 0.631;
				  /* サンプルは中央寄せの背景：白 */
			padding: 0px;
margin-top: -9vw;

			}

			#viewer9 img {

				position   : absolute;
									/* 画像のサイズを表示エリアに合せる */
									width      : 100%;

				right: 0;
				left: 0;
				margin: auto;
				opacity: 0;
				transition: 0s;
				object-fit: cover;
				height: 100%;

			   }

			   #viewer9 img.show {
				   opacity: 1;
				  }



.exwrap{width: 100%;
	overflow: clip;
	font-family: YakuHanJP,"Zen Kaku Gothic New", sans-serif;
	position: relative;

}




.exwrap img{width: 100%;
margin: 0;}


#viewer1,
#viewer2,
#viewer3,
#viewer4,
#viewer5,
#viewer6,
#viewer7,
#viewer8,
#viewer9,
#viewer10,
#viewer11,
#viewer12,
#viewer13{line-height: 0;}

@keyframes fadein {

0%{opacity: 0;}


100%{opacity: 1;}

}


@keyframes infinity-scroll-left {
	from {
	  transform: translateX(0);
	  will-change: transform;
	}
	  to {
	  transform: translateX(-100%);
	  will-change: transform;
	}
	}
	.scroll-infinity__wrap {
	  display: flex;
	  overflow: hidden;
	  height: 134vw;
	}
	.scroll-infinity__list {
	  display: flex;
	  list-style: none;
	  padding: 0;
	  margin-top: 0;
	}
	.scroll-infinity__list--left {
	  animation: infinity-scroll-left 24s infinite linear 0.5s both;
	}
	.scroll-infinity__item {
	height: 143vw;
	aspect-ratio: 1/1.43;
	}
	.scroll-infinity__item>img {
	  width: 100%;
	}


.lz{line-height: 0;}


.migi{   mask-image: none;
	mask-size: 0% 0%;
	overflow: hidden;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 0% 0% 100%);

	mask-position: right center;}

  .migix {
	clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
	mask-size: 110% 110%;
	transition-duration: 1s ;
	transition-timing-function:ease-in-out;
  }

.sitani{mask-image: none;
	mask-size: 0% 0%;
	overflow: hidden;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 0% 100% 0%);
	mask-position: right center;
animation:  sitani 1 1s;
animation-fill-mode: forwards;
}

@keyframes sitani {

0%{mask-image: none;
	mask-size: 0% 0%;
	overflow: hidden;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 0% 100% 0%);
	mask-position: right center;}

	100%{
		clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
		mask-size: 110% 110%;
		transition-duration: 1s ;
		transition-timing-function:ease-in-out;
	transition-delay: 0.5s;

	}

}

  .sita{   mask-image: none;
	mask-size: 0% 0%;
	overflow: hidden;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 0% 100% 0%);
	mask-position: right center;

}

  .sitax {
	clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
	mask-size: 110% 110%;
	transition-duration: 1s ;
	transition-timing-function:ease-in-out;
transition-delay: 0.5s;

  }

  .ue{   mask-image: none;
	mask-size: 0% 0%;
	overflow: hidden;
	line-height: 0;
  line-height: 0;
	clip-path: inset(100% 0% 0% 0%);
	mask-position: right center;

}

  .uex {
	clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
	mask-size: 110% 110%;
	transition-duration: 1s ;
	transition-timing-function:ease-in-out;
transition-delay: 0.5s;

  }

  .en{font-family: "acumin-pro", sans-serif;
	font-weight: 400;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
}

.en2{font-family: "acumin-pro", sans-serif;
	font-weight: 600;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
}



@keyframes kieru{
	0%{opacity: 1;}

	100%{opacity: 0;
	z-index: -1;}
}

@keyframes cover{

	0%{opacity: 1;}

	100%{opacity: 0;;}
}

.douiu div{position: absolute;
animation: kieru 1 0.5s;
animation-fill-mode: forwards;
}

.ad1{animation-delay: 0.1s!important;}
.ad2{animation-delay: 0.2s!important;}
.ad3{animation-delay: 0.3s!important;}
.ad4{animation-delay: 0.4s!important;}
.ad5{animation-delay: 0.5s!important;}
.ad6{animation-delay: 0.6s!important;}
.ad7{animation-delay: 0.7s!important;}
.ad8{animation-delay: 0.8s!important;}
.ad9{animation-delay: 0.9s!important;}
.ad10{animation-delay: 1s!important;}
.ad11{animation-delay: 1.1s!important;}
.ad12{animation-delay: 1.2s!important;}
.ad13{animation-delay: 1.3s!important;}
.ad14{animation-delay: 1.4s!important;}
.ad15{animation-delay: 1.5s!important;}

.douiu div:nth-child(5){animation-delay: 0.6s;}

.douiu div:nth-child(4){animation-delay: 1.2s;}

.douiu div:nth-child(3){animation-delay: 1.8s;}


.douiu div:nth-child(2){animation-delay: 2.4s;}

.douiu div:nth-child(1){animation-delay: 6s;}

.cover div{background-color: ;}

.cover img{mix-blend-mode: multiply;}

@keyframes tai{

	0%{   mask-image: none;
		mask-size: 0% 0%;
		overflow: hidden;
		line-height: 0;
	  line-height: 0;
		clip-path: inset(0% 100% 0% 0%);
		mask-position: right center;

	}

	100%{
		clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
		mask-size: 110% 110%;
		transition-duration: 1s ;
		transition-timing-function:ease-in-out;


	  }
}

.hidari{   mask-image: none;
	mask-size: 0% 0%;
	overflow: hidden;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 100% 0% 0%);
	mask-position: right center;

}
  .hidarix {
	clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
	mask-size: 110% 110%;
	transition-duration: 1s ;
	transition-timing-function:ease-in-out;


  }

  .con1{   mask-image: none;
	mask-size: 0% 0%;
	overflow: hidden;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 100% 0% 0%);
	mask-position: right center;
	height: 100%;

}
  .con1.active {
	clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
	mask-size: 110% 110%;
	transition-duration: 1s ;
	transition-timing-function:ease-in-out;


  }

  .con2{   mask-image: none;
	mask-size: 0% 0%;
	overflow: hidden;
	line-height: 0;
  line-height: 0;
	clip-path: inset(0% 100% 0% 0%);
	mask-position: right center;
	transition-delay: 0.3s;

}
  .con2.active {
	clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
	mask-size: 110% 110%;
	transition-duration: 1s ;
	transition-timing-function:ease-in-out;


  }



  .circle{

	mask-image: none;
	mask-size: 0% 0%;
	overflow: hidden;
	clip-path: circle(0%);
	line-height: 0;
}

.circlex{
	mask-size: 110% 110%;
	transition: all 1.5s;

	clip-path: circle(100%);
}


.flip{

	rotate: y 180deg;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	}

	.flipx{    transition: .7s ease .7s;
		rotate: y 0deg;}



.delay1{transition-delay: 0.2s!important;}
.delay2{transition-delay: 0.4s!important;}
.delay3{transition-delay: 0.6s!important;}
.delay4{transition-delay: 0.8s!important;}
.delay5{transition-delay: 1s!important;}
.delay6{transition-delay: 1.2s!important;}
.delay7{transition-delay: 1.4s!important;}
.delay8{transition-delay: 1.6s!important;}
.delay9{transition-delay: 1.8s!important;}
.delay10{transition-delay: 2s!important;}
.delay11{transition-delay: 2.2s!important;}

.exwrap{position: relative;}



@keyframes horizontal-animation {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}


.exwrap{background-color: ;


	  }

.ab{position: absolute;
	left: 0;
	top: 0;}

	.rela{position: relative;
		width: 100%;}

.yura1{animation: yura1 infinite 3s;}

@keyframes yura1{
0%{rotate: 0deg;}

50%{rotate: 6deg;}

100%{rotate: 0deg;}

}

.jump1{animation: jump infinite 3s;}

.jump2{animation: jump infinite 4s;}

@keyframes jump{
	0%{transform: translateY(0px);}

50%{transform: translateY(-10px);}

100%{transform: translateY(0px);}

	}

.yura2{animation: yura2 infinite 6s;}

@keyframes yura2{
0%{rotate: 0deg;}
45%{rotate: 0deg;}
50%{rotate: 3deg;}
55%{rotate: 0deg;}
100%{rotate: 0deg;}

}

.yura3{animation: yura3 infinite 8s;}

@keyframes yura3{
0%{rotate: 0deg;}
45%{rotate: 0deg;}
50%{rotate: -3deg;}
55%{rotate: 0deg;}
100%{rotate: 0deg;}

}

html {
	scroll-behavior: smooth;
  }

.yura4{animation: yura2 infinite 10s;}

.yura5{animation: yura3 infinite 12s;}

.yura6{animation: yura2 infinite 14s;}

.yura7{animation: yura3 infinite 16s;}



.wrap {
	display: flex;
	align-items: center;

  height: auto;
  overflow: hidden;
  width: 52.2vw;
  margin-top: 6.2vw;

  }
  .slideshow {
	display: flex;
	padding: 0;
	margin: 0;
  }
  .content {

	list-style: none;

	width:23.5vw ;

  }

  .slideshow {
	display: flex;
	animation: loop-slide 18s infinite linear 1s both;
	mix-blend-mode: multiply;
  }

  @keyframes loop-slide {
	from {
	  transform: translateX(0);
	}
	to {
	  transform: translateX(-100%);
	}
  }

  .slide-paused:hover .slideshow {
	animation-play-state: paused;
  }


  .vin{width: 100vw;
overflow: hidden;
margin: auto;
}



.tp1{display: flex;}

.tp1 div{width: 50%;
height: 100%;}

.tp1 div{object-fit: cover;}

.tp1{height: 100%;
width: 100vw;}

.toptop{position: relative;
width: 100vw;
aspect-ratio: 1 / 0.655;}

.obi{position: absolute;
right: 0;
top: 0;
width: 12.7%;}

.tessaiga{position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 37.6vw;
}


.yokoni{animation: yokoni 1 2s;
	animation-fill-mode: forwards;
	mask-image: none;
	mask-size: 0% 0%;
	overflow: hidden;
	line-height: 0;
	line-height: 0;
	clip-path: inset(0% 100% 0% 0%);
	mask-position: right center;

	}

	@keyframes yokoni {

	0%{ mask-image: none;
		mask-size: 0% 0%;
		overflow: hidden;
		line-height: 0;
	  line-height: 0;
		clip-path: inset(0% 100% 0% 0%);
		mask-position: right center;
	}

	100%{clip-path: inset(0% 0% 0% 0%);  /* 右側から全体に広がる */
		mask-size: 110% 110%;
		transition-duration: 1s ;
		transition-timing-function:ease-in-out;
	}

	}


	.tpb{width:642px ;
	margin: auto;
font-size: 13px;
line-height: 21px;
letter-spacing: 2px;
margin-top: 35px;
text-align: center;
color: #6A6A6A;
}

.ind1{width: 18.5vw;
margin: auto;
margin-top: 3.6vw;
}


.ind2{display: flex;
width:57.5vw ;
margin: auto;
margin-top: 1.6vw;
}

.ind2p{width: 25%;}


.viewer {
	width: 100vw;
	display: flex;
	margin: auto;
	margin-top: 50px;
  }



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


  .viewer img {
	width: calc(100vw / 18);
	opacity: 0;
	animation: show 9s infinite; /* ← 18秒 → 9秒に変更 */
  }

  /* 0.5秒ずつずらす */
  .viewer img:nth-child(1)  { animation-delay: 0s; }
  .viewer img:nth-child(2)  { animation-delay: 0.5s; }
  .viewer img:nth-child(3)  { animation-delay: 1s; }
  .viewer img:nth-child(4)  { animation-delay: 1.5s; }
  .viewer img:nth-child(5)  { animation-delay: 2s; }
  .viewer img:nth-child(6)  { animation-delay: 2.5s; }
  .viewer img:nth-child(7)  { animation-delay: 3s; }
  .viewer img:nth-child(8)  { animation-delay: 3.5s; }
  .viewer img:nth-child(9)  { animation-delay: 4s; }
  .viewer img:nth-child(10) { animation-delay: 4.5s; }
  .viewer img:nth-child(11) { animation-delay: 5s; }
  .viewer img:nth-child(12) { animation-delay: 5.5s; }
  .viewer img:nth-child(13) { animation-delay: 6s; }
  .viewer img:nth-child(14) { animation-delay: 6.5s; }
  .viewer img:nth-child(15) { animation-delay: 7s; }
  .viewer img:nth-child(16) { animation-delay: 7.5s; }
  .viewer img:nth-child(17) { animation-delay: 8s; }
  .viewer img:nth-child(18) { animation-delay: 8.5s; }

@keyframes show {
	0%   { opacity: 0; }
	0.01%{ opacity: 1; }
	5%   { opacity: 1; }
	5.01%{ opacity: 0; }
	100% { opacity: 0; }
  }

  .sc1 {
	height: 350vh; /* 適当 */
	background-color: transparent;
	transition: background-color 0.4s ease;
	transition-delay: 0.2s;
	position: relative;
	width: 100vw;
	z-index: 1;
  }

  .sc1.active {
	background-color: #C3D0E0;
  }

  .sc1a {
	height: 350vh; /* 適当 */
	background-color: transparent;
	transition: background-color 0.4s ease;
	transition-delay: 0.5s;
	position: relative;
	width: 100vw;
	z-index: 1;
  }

  .sc1a.active {
	background-color: #9A4B49;
  }

  .sc1b {
	height: 350vh; /* 適当 */
	background-color: transparent;
	transition: background-color 0.4s ease;
	transition-delay: 0.5s;
	position: relative;
	width: 100vw;
	z-index: 1;
  }

  .sc1b.active {
	background-color: #C8E09B;
  }

  .sc1box{position: sticky;
top: 0;
width: 100%;
height: 100vh;}
  .sc1_1{position: absolute;
width: 42.5vw;
aspect-ratio:  0.425 / 0.447;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

.sc1_1 img{position: absolute;
left: 0;
top: 0;}
.sc2_1{line-height: 0;}
.sc2{width:100%;
height: auto;
position: sticky;
top: 0;
background-color: white;
z-index: 2;
margin-top: -100vh;
}

#sec1{position: relative;}

.naka{width: 100%;
margin: auto;}

.sc2_1{display: flex;}

.sc2_1_2{width: 47.5vw;
aspect-ratio: 1 / 0.655;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.tex1{
font-size: 13px;
line-height: 21px;
text-align: justify;
}

.tx1{width: 23.6vw;
color: #4FA8D0;
margin-left: 2.6vw;
}

#top{background-color: #F0F0F0;}

.sc3{width: 23.5vw;
margin: auto;
margin-right: 21.5vw;
margin-top: -11.3vw;
position: relative;
z-index: 2;
}

.sc4{width: 24.4vw;
margin-left: auto;
margin-right: 12.4vw;
margin-top: -15vw;
}

.sc5{width: 13vw;
    margin-left: 55vw;
    margin-top: -10vw;
    position: relative;
    z-index: 2;
}

#sec1 .viewer{margin-top: 150px;}

.sc6{width: 55vw;
margin: auto;
margin-top: 0;
margin-right: 3.6vw;

}

#sec2 .dx{    letter-spacing: -0.5px;}

.sc7{    width: 20vw;
    margin-left: 30vw;
    margin-top: -15vw;
position: relative;
z-index: 1;
}

.dave{display: flex;
margin-top: 3vw;}

.sc8{display: flex;
flex-shrink: 0;
flex-direction: column;
}

.dx{font-size: 13px;
	font-weight: 600;
margin-bottom: 14px!important;}

.sc9{width: 37.7vw;}

.sc10{width: 20.5vw;
margin-left: 2.1vw;
display: flex;
flex-direction: column;
justify-content: flex-end;

}

#sec1 .sc10{margin-left: auto;
margin-right: 0;
margin-bottom: 5.5vw;}


#sec1 .tex1{color: #4FA8D0;}

.tx2{margin-bottom: 3.1vw;}

.sc11{width:12.5vw ;
margin: auto;
margin-top: 4vw;
}

#sec2 .sc1_1{width:44.5vw ;
aspect-ratio: 0.445 / 0.421;}

.sc2_1{display: flex;}
.sc2_2{width: 40.6vw;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sc2_3{width: 59.4vw;}

#sec2 .tex1{color: #9A4B49;}

.tx3{width: 19vw;
margin-left: 5.4vw;}

.sc2_4{width: 20.5vw;
margin: auto;
margin-right: 0;
margin-top: -8.1vw;
}

.sc2_5{width: 39.5vw;
}

.sc2_6{margin-left: 27.5vw;
	margin-top: -4.4vw;
display: flex;
}

#sec2 .sc10{margin-left: 4.4vw;}

.sc2_7{width: 14.7vw;
margin: auto;
margin-top: 6.9vw;}

#sec1, #sec2, #sec3{padding-bottom: 2.1vw;}

.sc3_1{display: flex;}

.sc3_2{width: 45vw;}

.sc3_3{display: flex;
margin-top: -14.3vw;
}

.sc3_4{width: 41.6vw;}

#sec3 .tex1{color: #8D9F6E;}

.tx4{width: 23.6vw;
margin-left: 3.6vw;

display: flex;
flex-direction: column;
justify-content: flex-end;}

.sc3_5{width: 24.6vw;
margin: auto;
margin-right: 0;
margin-top: -11.3vw;
}

.fu{position: absolute;
	width: 8.5vw;
left: 2vw;
top: 2vw;}

.sc3_6{width: 17.7vw;
    margin-left: 78vw;
    margin-top: -30vw;}

	#sec4 .dx{color: #485395;}

.sc3_7{width: 18.4vw;
	margin-left: 55vw;
    margin-top: -30vw;}

	.dave2{display: flex;
	margin-top: 2vw;
	}

	.sc3_8{width:25.5vw ;
	    margin-left: 35vw;
    margin-top: -26vw;}

		.sc3_9{width: 51.1vw;
		margin-left:8.7vw;
	position: relative;
flex-shrink: 0;
}

.all{margin-top: 10vw;}

.click{width: 21vw;
margin: auto;
margin-bottom: 3.3vw;
}

		.sc3_10{display: flex;
		margin-top: -10vw;
		}

		.sc3_11{width: 25.8vw;}

		#sec3 .sc10{margin-left: 4vw;
		margin-bottom: 2vw;}


		.sc4_1{display: flex;
		justify-content: space-between;}

		.sc4_1a{width: 22.5vw;
		display: grid;
	place-items: center;}

	.sc4_1b{width: 10.3vw;
	margin-top: 8vw;
	}

		.sc4_1c{width: 64.1vw;
			display: grid;
			place-items: center;
		}

		.sen{height: 1px;
		width: 100%;
	background-color: #485395;}

	#sec3{padding-bottom: 7vw;}

	.sc4_2{width: 13.3vw;
	margin-left: 22.5vw;}

	.sc4_3{display: flex;
	margin: auto;
	margin-right: 0;
	width: 76.1vw;
	margin-top: -23.1vw;
	}

	.tx5{width: 24.4vw;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: #485395;
	margin-right: 4.5vw;
	}

	.sc4_4{	 width      :47vw;
		aspect-ratio: 0.47 / 0.459;
	position: relative;}

	.sc4_5{position: absolute;
		z-index: 2;
		width: 16.5vw;
	color: white;
bottom: 20px;
font-size: 11px;
line-height: 18px;
left: 20px;}

.ins{bottom: 9.5%;
top: unset!important;}

.nano{width: 272px;
margin-bottom: 20px;}

.nana{display: flex;
flex-direction: column;
justify-content: flex-end;}

.jojo{width: 266px;}

#sec5{background-color: #F0F0F0;}

.meka{width: 24.6vw;
margin: auto;}

#sec4{padding-bottom: 8.7vw;}

.sc5_3{text-align: center;
	font-size: 13px;
	line-height: 21px;
color: #6A6A6A;}

.sc5_3 a{color: #6A6A6A;
text-decoration: none;
}

.sen2{height: 1px;
width: 100vw;
background-color: #CECECE;
margin-top: 3.7vw;}

.mekas{display: flex;
width: 50.3vw;
margin: auto;}

.mekas1{position: relative;
width: 20.5vw;
aspect-ratio:0.205 / 0.222 ;
flex-shrink: 0;
}

.mekas2{font-size: 12px;
line-height: 17px;
width: 17.5vw;
margin-top: 4.5vw;
margin-left: 1.4vw;
min-width: 266px;
text-align: justify;
}



.mekas1 img{position: absolute;}

.me1 .mekas2{color: #4FA8D0;
}

.me2 .mekas2{color: #9A4B49;
	margin-top: 4.7vw;
}

.me3 .mekas2{color: #8D9F6E;
	margin-top: 4.9vw;
}

#sec5{padding-bottom: 7.5vw;}

.sc6_1{width: 24.9vw;
aspect-ratio: 0.249 / 0.312;
position: relative;
margin: auto;
}

.sc6_1 img{position: absolute;
left: 0;
top: 0;}

.sc6_2{width: 24.9vw;
margin: auto;
font-size: 13px;
line-height: 21px;
text-align: justify;
color: #6A6A6A;}

#sec6{padding-bottom: 5.7vw;}

#sec7{position: relative;
width: 100vw;
aspect-ratio: 1 / 0.655;}

#sec7 img{position: absolute;
left: 0;
top: 0;}

.fade{opacity: 0;
transition: all 1s;}

.fadex{opacity: 1;}

#sp{display: none;}

.out{position: absolute;
bottom: 7.6vw;
left: 0;
right: 0;
margin: auto;
width: 18.9vw;
aspect-ratio: 0.189 / 0.141;
overflow: hidden;
}

.jojo{font-weight: 600;
margin-bottom: 20px;
}

.outx img{animation: out infinite linear 10s;
	transform: translateY(100%);}

@keyframes out {

0%{transform: translateY(100%);}


100%{transform: translateY(-100%);}

}

#sec4 .vm{width: 20.5vw;
    margin-left: 23.5vw;
    margin-top: 3.1vw;
}


/* ------------ PC ---------------*/
@media (max-width: 1024px) {


	.exwrap{font-weight: 500;}


	#sec4 .vm{width: 52.6vw;
margin: auto;
margin-top: 6vw;
	}

	#pc{display: none;}

	#sp{display: block;}

	.toptop{width: 100vw;
	height: 100vh;}

	.tessaiga{width: 100%;
	transform: unset;
	top: 0;
	left: 0;
	}

	.en{font-weight: 400!important;}

	.tpb{width: 100%;}

	.ind1{width: 60%;
	margin-top: 15%;}
	.ind2{  flex-wrap: wrap;
		gap: 10px;
	width: 65vw;}

	.ind2p{  width: calc(50% - 5px);
	margin-bottom: 9.1vw;}

	.viewer{width: 1100px;
padding-bottom: 2vw;
	}

	.viewer img{width: calc(1100px/18);}

	.viewer img {
		animation: show 3.5s infinite; /* 0.5 × 7 */
	  }

	  .viewer img:nth-child(1)  { animation-delay: 0s; }
	  .viewer img:nth-child(2)  { animation-delay: 0.5s; }
	  .viewer img:nth-child(3)  { animation-delay: 1s; }
	  .viewer img:nth-child(4)  { animation-delay: 1.5s; }
	  .viewer img:nth-child(5)  { animation-delay: 2s; }
	  .viewer img:nth-child(6)  { animation-delay: 2.5s; }
	  .viewer img:nth-child(7)  { animation-delay: 3s; }


	  .sc1_1{width: 100%;
	aspect-ratio: 1 / 1.269;
	}

	.fu{width: 22vw;
	left: 5vw;
	top: 5vw;
	}

	.sc2_1{flex-direction: column;}

	#viewer1{width: 100%;}

	.sc2_1_2{width: 100%;
	display: flex;
flex-direction: row;
justify-content: space-between;
order: 3;
}

.yako{width: 31.5vw!important;
margin-left: 11.7vw!important;}

.tx1{margin-left: 0;width: 43.9vw;
margin-top: 24.5vw;
margin-right: 11vw;
flex-shrink: 0;
}

.sc3{width: 51.2vw;
order: 3;
margin: auto;
margin-right: 0;
margin-top: -45vw;
}


.sc5{width: 29.9vw;
margin: 0;
order: 2;
margin-left: 23vw;
margin-top: -20vw;
}

.sc4{width: 62.6vw;
margin: 0;
margin-left: auto;
margin-right: -3vw;
order: 2;
margin-top: -80vw;
}
#sec1 .viewer{order: 1;
margin-top: 4vw;
flex-wrap: nowrap!important;
}
.hiro{display: flex;
flex-direction: column;}

#viewer2{width: 1100px;}

.sc6{width: 100vw;
	order: 1;
}

.sc7{width: 39.3vw;
margin: 0;
margin: auto;
order: 2;
margin-top: 7vw;
}

.sc8{flex-direction: column;
order:3;
}

.dave2{flex-direction: column;}

.dx{text-align: center;}

#sec1 .sc10{margin: auto;}

.sc9{width: 60.7vw;
	margin: auto;
margin-bottom: 5vw;}

.sc10{width: 85vw;
margin: auto;}

.dave{flex-direction: column;}

.vm{width: 52.6vw;
margin: auto;
}

.sc11{width: 34vw;
margin-top: 10vw;}

#sec2 .sc1_1{width: 100%;
aspect-ratio: 1 / 1.292;}

.sc2_3{order: 1;
width: 100%;
}

.sc2_2{order: 2;
flex-direction: row;
width: 100%;
flex-shrink: 0;
align-items: flex-start;
justify-content: flex-start;
}

.kri{width: 41.6vw!important;
	height: auto!important;
flex-shrink: 0;
margin-left: 7.2vw!important;}

.tx3{width: 48.8vw;
margin-left: 0;
margin-top: 75vw;
}

#viewer4{width: 65vw;
margin-top: -138vw;
margin-bottom: 68vw;
}

.content{width: 38vw;}

.wrap{width: 86vw;}

.sc2_4{width: 52.6vw;
margin-top: 7.2vw;}

.sc2_6{flex-direction: column;
width: 100%;
margin: auto;}

.sc2_5{width: 100%;
margin-top: 7.2vw;}

#sec2 .sc10{margin: auto;
margin-top: 7vw;}

.sc2_7{width: 34vw;}

.sc3_1{flex-direction: column;}

.sc3_2{order:2;
margin-left: auto;
margin-right: 0;}
#viewer5{order: 1;
width: 100%;
aspect-ratio: 1/ 1.227;
}

.paka{width: 38.1vw!important;
}

.sc3_3{flex-direction: column;
margin-top: -70vw;
}

.sc3_4{width: 56.1vw;
margin: auto;
margin-left: 0;}

.tx4{width:46.3vw ;
margin: auto;
margin-top: 11vw;
margin-right: 7.7vw;
}

.sc3_5{width: 38.1vw;
margin: auto;
margin-left: 0;
margin-top: -64vw;
}

.sc4_2{width: 144px;
margin: auto;}

.sc4_2 img{ transform: translateX(-3%);}

.sc3_6{        width: 41vw;
	margin: 0;
	margin-left: 55vw;
	margin-top: -15vw;}

	.hasisi{display: flex;
	flex-shrink: 0;}

	#viewer6{width: 100%;}

	.sc3_7{order: 1;
	margin: 0;
	width: 48vw;
	position: relative;
	z-index: 2;
	flex-shrink: 0;
	margin-top: -11vw;
	margin-left: 2vw;
	}

	.sc3_8{order: 2;
	margin: 0;
	width: 55.4vw;
	margin-top: -35vw;
	margin-left: -20vw;
	flex-shrink: 0;
	}

	.nana{order: 2;}

	.sc4_4{order: 1;
	width: 84.6vw;
margin: auto;}

	.sc4_3{flex-direction: column;
	margin: auto;
width: auto;}

	.sc4_1b{width: 29.4vw;}

	.sc4_1a{width: 32.5vw;}

	.sc4_1c{width: 32.5vw;}

	.tx2{margin-bottom: 6vw;}

	#sec3 .sc10{margin: auto;}

	.sc3_11{order: 1;
	width: 48.8vw;
margin: auto;
margin-right: 0;
margin-top: -110vw;
margin-bottom: 57vw;
}

	.sc10{order: 2;}

	.sc3_10{flex-direction: column;
	margin: auto;}

	.sc3_9{width: 90vw;
	margin-left: -5vw;
position: relative;
z-index: 2;
margin-top: 5vw;
margin: auto;
margin-bottom: 8vw;
}

.sc4_5{width: 60vw;}

.nana{width: 84.6vw;
margin: auto;
margin-top: 10vw;
}

.click{width: 52.6vw;
margin-bottom: 10vw;}



.nano{margin-top: 7.2vw;}

.tx5{width: 100%;
margin: auto;}

#sec4 .dx{text-align: left!important;}

.sc4_3{margin-top: 5vw;}

.meka{width: 65vw;}

.sen2{margin-top: 6vw;}

.mekas{flex-direction: column;
width: 62.9vw;
margin: auto;
margin-bottom: 11.2vw;
}

.jojo{line-height: 0;}

.mekas1{width: 48vw;
margin: auto;}

.mekas2{margin: 0;
min-width: unset;
width: 100%;}

.me1 .mekas1{margin-left: 2vw;}

.me3 .mekas1{margin-left: 2vw;}

#sec5{padding-bottom: 2vw;}

.sc6_1{width: 80%;}

.sc6_2{width: 80%;}

#sec6{padding-bottom: 15vw;}

#sec7{aspect-ratio: 1 / 1.682;}

.out{width: 48.6vw;
bottom: 14vw;}

.jojo{width: 100%;}

}

@media (min-width: 1280px) {


}