body {
	margin: 0;
	padding: 0;
}


h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
	  #viewer1{

		transition: all 0.5s;
	position: relative;
	 overflow   : hidden;
					   /* 画像のサイズに合わせて変更ください */

					   width: 56.3vw;
					   aspect-ratio: 0.563 / 0.441;
		  /* サンプルは中央寄せの背景：白 */
	padding: 0px;



	}


	   #viewer1 img.show {
		   opacity: 1;
		  }

		  .adl1{width: 100%;
			line-height: 0;
}

.other{font-size: 11px;
color: #505B70;
margin-top: 20px;
text-decoration-line: underline;
text-decoration-color: #505B70;
text-decoration-thickness: 1px;
text-underline-offset: 5px;
margin-bottom: 18px;
}

#viewer1 {
    position: relative;
    overflow: hidden;
    width: 56.3vw;
    aspect-ratio: 0.563 / 0.344;
}

.adl2{width: 31.6vw;
position: absolute;
right: 4.2vw;
top: 4.5vw;}

.adl30{width: 29.7vw;
margin-top: 7.4vw;
margin-left: 7.5vw;}




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

	@keyframes sitani {      0%{   mask-image: none;
		  mask-size: 0% 0%;
		  overflow: clip;
		  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;

		  }}


.yokoni{animation: yokoni 1 1s 3s;
	animation-fill-mode: forwards;
	mask-image: none;
	  mask-size: 0% 0%;
	  overflow: clip;
	  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: clip;
	  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;


	}

  }

  .adl1 img{animation: zoomout 2s 0.5s 1;
	transform: scale(1.1);
filter: blur(10px);
animation-fill-mode: forwards;
opacity: 0;
}

@keyframes zoomout{
  0%{transform: scale(1.1);
	filter: blur(10px);
	opacity: 0;
}


  100%{transform: scale(1);
	filter: blur(0px);
	opacity: 1;
}
}




.fadeinni{animation: fadeinni 1 2s;
	animation-delay: 3s;
	animation-fill-mode: forwards;
	opacity: 0
	}

	@keyframes fadeinni{

	  0%{opacity: 0;}
	  100%{opacity: 1;}

	}

  .anidelay0xxx{animation-delay: 0s!important;}
  .anidelay0xx{animation-delay: 0.5s!important;}
  .anidelay0x{animation-delay: 0.8s!important;}
  .anidelay0{animation-delay: 2.1s!important;}
  .anidelay1{animation-delay: 2.2s!important;}
  .anidelay2{animation-delay: 2.4s!important;}
  .anidelay3{animation-delay: 2.6s!important;}
  .anidelay4{animation-delay: 2.8s!important;}
  .anidelay5{animation-delay: 3s!important;}
  .anidelay6{animation-delay: 3.2s!important;}
  .anidelay7{animation-delay: 3.4s!important;}
  .anidelay8{animation-delay: 3.6s!important;}
  .anidelay9{animation-delay: 3.8s!important;}
  .anidelay10{animation-delay: 4.8s!important;}
  .anidelay11{animation-delay: 5s!important;}
  .anidelay12{animation-delay: 5.2s!important;}
  .anidelay13{animation-delay: 5.4s!important;}
  .anidelay14{animation-delay: 9.5s!important;}
  .anidelay15{animation-delay: 9.7s!important;}
  .anidelay16{animation-delay: 6s!important;}

.adl3{display: flex;
justify-content: end;
}

.adl4{color: white;
margin-top: auto;
margin-bottom: 0;
font-size: 14px;
line-height: 22px;
width: 16.8vw;
position: absolute;
left: 4.5vw;
bottom: 4.5vw;
text-align: justify;
}

.adl31{display: flex;
margin-top: 7.6vw;}

.adl32{width: 73.5vw;
margin-left: 11.1vw;
}

.adl33{width: 4.6vw;
margin-top: auto;
margin-bottom: 0;
margin-left: 4.4vw;}

.adl34{margin-left: 11.1vw;}


.adl35{width:33.7vw;
margin-left:45.6vw;
margin-top: -2vw;
}


.adl40{width: 18.8vw;
margin: auto;
margin-top: 7.4vw;
}
.adl39{width: 17.8vw;
	margin-top: 1.8vw;
margin-left: auto;
margin-right: 0;}

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

	.adl37{width: 28.8vw;
	margin-top: 3vw;
	}

	.adl38{width: 47.6vw;
	margin-top: 8.6vw;}

	#sec6 {
		width: 78.2vw;
		margin: auto;
		margin-top: 6.3vw;
		position: relative;
	}

	.adl41 {
		line-height: 0;
	}


	.adl44 {
		width: 38.9vw;
	}

	.adl45 {
		width: 27.9vw;
		margin-top:6vw;
	}
	.adl42 {
	position: relative;



	}
	.adl43 {
		padding-top: 6vw;
		width: 33.1vw;
		line-height: 0;

		position: sticky;
		top: 0;
		height: fit-content;

	}

	.gum{background-color: white;
	width:100vw;
	height: calc(100vh - 62.5vw);
position: absolute;
top:62.5vw;}

.gum2{background-color: white;
	width:100vw;
height: 6vw;
position: absolute;
top:0;}


	.adl46 {
		width: 33.1vw;
		color: #505B70;
		font-size: 14px;
		line-height: 22px;
	margin-left: 38.9vw;
	margin-top: -56.5vw;
		height: auto;
		overflow-y: auto;
		text-align: justify;
	}

	.adl46 span{font-weight: bold;}

	.adl47 {
		position: absolute;
		left: 77.8vw;
		top: 6vw;
		width: 2px;
		height: 59.8vw;
		background: #d9dce1;
	}


    #fixed-bg{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;

		background-size: cover;
		background-position: center;

		opacity: 0;
		transition: opacity 1s ease;
		pointer-events: none;

	  }

	  /* 表示中 */
	  #fixed-bg.is-active{
		opacity: 1;
		transition:
		opacity 1s ease;
	  }




.one{width: 378px;}

.one2{margin-right: calc(39vw - 378px);}

#sec6x{display: flex;
justify-content: space-between;
width: 78.2vw;
margin: auto;
position: relative;
z-index: 2;
margin-top: 4.5vw;
}

	.adl48 {
		position: absolute;
		top: 0;
		left: 0;
		width: 2px;
		height: 90px;
		background: #505B70;
	}

	.photo-wrap {
		position: relative;
		height: 200vh;
	  }

	  .back {
		position: sticky;
		top: 0;
		width: 100%;
		height: 100vh;
		object-fit: cover;
	  }

	  .switch-photo {
		position: sticky;
		top: 0;
		height: 100vh;
		margin-top: -100vh;
		overflow: hidden;
		animation: change-photo linear both;
		animation-timeline: scroll();
	  }

	  .switch-photo img {
		position: absolute;
		width: 100%;
		height: 100%;
		object-fit: cover;
	  }

	  .switch-photo img:first-child {
		z-index: 2;
	  }

	  .switch-photo img:last-child {
		z-index: 1;
	  }

	  @keyframes change-photo {
		0% {
		  opacity: 1;
		}

		45% {
		  opacity: 1;
		}

		55% {
		  opacity: 0;
		}

		100% {
		  opacity: 0;
		}
	  }

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

	}

	#sec7 {
		margin-top: 6.7vw;
		position: relative;
		width: 100vw;
		height: 200vh;
	}

	/* 背景 */
	#sec7 .back {
		position: sticky;
		top: 0;
		display: block;
		width: 100vw;
		height: 100vh;
		object-fit: cover;
		z-index: 0;
	}

	/* 前面 */
	.crez {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		width:26.5vw;
		max-width: 400px;
		min-width: 262px;
		z-index: 2;
	}

	.all{width: 18.3vw;
	margin: auto;
margin-top: 5vw;}

	/* cre */
	.cre {
		position: relative;
		width: 100%;
		height: 100vh;
		display: grid;
		place-items: center;
	}

	/* ad84〜88を縦に並べる */
	.cre img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* cre2 */
	.cre2 {
	height: 100vh;
	display: grid;
	place-content: center;
	}

	.cre2 img {
		display: block;
		width: 100%;
		height: auto;
	}

.adl29{display: flex;
justify-content: space-between;
margin-top: 4.4vw;
}

.bellx{width: 24.9vw;}

.bell1 {
	height: 34.4vw;
	position: relative;
	overflow: hidden;
  }

  .bell1-slideshow {
	position: absolute;
	top: 53%;
	left: 0;
	display: flex;
	width: 300%;
	flex-shrink: 0;
	transform: translateY(-50%);
	animation: bell1-slide 4s infinite steps(2);
  }

  .bell1-slideshow img {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: 33.3333%!important;
	height: auto;
	flex-shrink: 0;
  }

  @keyframes bell1-slide {
	from {
	  transform: translateY(-50%) translateX(0);
	}

	to {
	  transform: translateY(-50%) translateX(-66.6667%);
	}
  }

  .bell1x {
	height: 34.4vw;
	position: relative;
	overflow: hidden;
  }

  .bell1x-slideshow {
	position: absolute;
	top: 46%;
	left: 0;
	display: flex;
	width: 300%;
	transform: translateY(-50%);
	animation: bell1x-slide 4s infinite steps(2);
  }

  .bell1x-slideshow img {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
	width: 33.3333%!important;
	height: auto;
	flex-shrink: 0;
  }

  @keyframes bell1x-slide {
	from {
	  transform: translateY(-50%) translateX(0);
	}

	to {
	  transform: translateY(-50%) translateX(-66.6667%);
	}
  }


.adl5{position: relative;
	flex-shrink: 0;
width: 5.3vw;
aspect-ratio: 0.06 / 0.21;}

.bel1{padding-top: 10.1vw;
box-sizing: border-box;}

.adl18{width: 25.8vw;
height: 50.1vw;
overflow: hidden;}

.adl20{width: 4.6vw;
margin-top: auto;
margin-bottom: 0;
margin-left: 5.8vw;
}

.adl22{width: 31vw;
margin-left: 7.3vw;}

.adl24{width: 33.3vw;
	margin-left: auto;
	margin-right: 12.7vw;
	margin-top: -33.1vw;
	padding-bottom: 29vw;
}

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

.adl21{display: flex;
justify-content: end;
margin-top: -98px;
}

.adl25{display: flex;
margin-top: -21vw;}

.adl26{width: 48.6vw;
text-align: right;}

.tex1{color: #505B70;
	font-size:13px;
text-align: justify;
line-height:21px;
font-family: YakuHanJP, "Zen Kaku Gothic Antique", sans-serif;

}

.tex2{color: #505B70;
	font-size: 13px;
	text-align: center;
	line-height: 21px;
	font-family: YakuHanJP, "Zen Kaku Gothic Antique", sans-serif;
	margin-bottom: 3vw;
	font-weight: 500;

	}

	.tex3{color: #505B70;
		font-size: 14px;
		text-align: justify;
		line-height: 22px;
		font-family: YakuHanJP, "Zen Kaku Gothic Antique", sans-serif;

		}


.bell{display: flex;}

.adl23{width: 205px;}
.nedanr{    width: 200px!important;
    margin-left: auto;}
.nedanr .ned{justify-content: start;}
.nedanr .other{justify-content: start;
display: flex;}

.adl27{width: 4.6vw;
margin-top: auto;
margin-bottom: 187px;
margin-left: 4vw;
flex-shrink: 0;
}

.adl28{width: 17.8vw;
margin-left: 12vw;
margin-top: auto;
margin-bottom: 187px;
flex-shrink: 0;
}

.adl28 img{margin-bottom: 5vw!important;}

.adl19{display: flex;
margin-top: -14vw;}

.adl6{width: 64.1vw;
margin: auto;
padding-top: 3.2vw;}

.adl7{color: #505B70;
	font-family: YakuHanJP, "Zen Kaku Gothic Antique", sans-serif;;
font-size: 1.3vw;
margin-top: auto;
margin-bottom: auto;
line-height: 2vw;}

.warp{width: 100%;}



.warpx{width: 100%;
display: flex;
height: 100%;
}

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

.adl8{width: 18.1vw;
flex-shrink: 0;}

.adl9{width: 57.6vw;
margin: auto;
display: flex;
justify-content: space-between;
margin-top: 5.5vw;}

.adl10{position: relative;
width: 35.3vw;
flex-shrink: 0;
aspect-ratio: 0.353 / 0.571;
z-index: 2;}

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

.adl11{position: relative;
	margin-top: 4.1vw;
	width: 36.8vw;
	aspect-ratio: 0.368 / 0.705;
	margin-left: -3.6vw;
flex-shrink: 0;}

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

	.adl12{width: 35.5vw;
		position: relative;
		margin-top: -22vw;
		margin-left: 21%;
		transform: translateX(-30%);
	z-index: 2;}

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



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

.adl13{width: 8.4vw;
margin: auto;
margin-top: 15vw;
}

.adl14{display: flex;
justify-content: space-between;
margin: auto;
margin-top: 2.7vw;
width: 30.4vw;}

.adl15{width: 7.4vw;}

.adl16{width:33.1vw;
margin: auto;
margin-top: 6vw;}

.adl17{width: 68.4vw;
margin-left: auto;
margin-right: 0;}

#sec1{padding-bottom: 5.1vw;}

#sec2{background-color: white;}

.ned{display: flex;
	font-size: 15px;
	line-height: 25px;
color: #505B70;}

.nedan{margin-top:24px;
	font-family: "DM Sans", sans-serif;
letter-spacing: 1px;}

.ei{	font-family: "DM Sans", sans-serif;}

.ned2{margin-top: 13px;}

.ned p{margin: 0;}

.buy{width: 41px;
	margin-left: 10px;
line-height: 0;
}

html {
	scroll-behavior: smooth;
  }



.back-top {
	position: fixed;
	right: 30px;
	bottom: 30px;
	z-index: 1000;

	display: none;
	width: 3.5vw;
	height: 3.5vw;
	border-radius: 50%;

	align-items: center;
	justify-content: center;
}

.side {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1000;
width: 35px;
	display: none;
}







.exwrap{width: 100%;
	overflow: clip;
	font-family: "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;
  }

  .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;

  }

  .coordinate-slider {
	position: relative;
	width:34.4vw;
	margin: 0 auto;
	box-sizing: border-box;
  }

  .slide-content {
	text-align: center;
  }

  .slide-image {
	width: 100%;
	height: 42.9vw;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
  }

  .slide-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
  }

  .slide-counter {
	margin-top:1vw ;
	font-size: 1.6vw;
	letter-spacing: 2px;
	color: #4d5a75;
	font-family: "DM Sans", sans-serif;
  }

  .slide-info {
	margin-top: 2.5vw;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	font-size: 1.4vw;
	letter-spacing: 1px;
	color: #4d5a75;
  }

  .buy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.7vw;
	height: 1.9vw;
	border: 1.2px solid #4d5a75;
	border-radius: 50%;
	color: #4d5a75;
	text-decoration: none;
	font-size: 1vw;
  }

  .slider-arrow {
	width: 3.5vw;
	position: absolute;
	top: 39%;
	padding: 0;
	transform: translateY(-50%);
	border: none;
	background: none;
	cursor: pointer;

  }

  .slider-arrow.prev {
	left: 10px;
	z-index: 2;
  }

  .slider-arrow.next {
	right: 10px;
  }

  .slider-arrow:hover {
	opacity: 0.5;
  }

  .slide-content {
	position: relative;
}



.credit-button {
	position: relative;
	z-index: 20;

	width: 2.93vw;
	height: 2.93vw;

	border: none;
	background: none;

	font-size: 32px;
	line-height: 2.93vw;

	cursor: pointer;
    top: 38vw;
    left: 17vw;
}


.carousel-wrap .slide .credit-button {
    opacity: 0;
    pointer-events: none;
}

.carousel-wrap .slide.is-active .credit-button {
    opacity: 1;
    pointer-events: auto;
}


.carousel-wrap .slide {
    position: relative;
}

.carousel-wrap .credit-overlay {
    z-index: 10;
}

.carousel-wrap .credit-button {
    z-index: 1000;
}
.credit-overlay {
	position: absolute;
	top: 0;
	left: 0;

	width: 120%;
	height: 100%;

	background: rgba(255,255,255,0.8);

	z-index: 10;

	display: none;
}

.credit-overlay.active {
	display: flex;
	align-items: center;
	justify-content: center;
}

.coordinate-slider {
	display: flex;
	align-items: center;
	width: 100%;
	position: relative;
}


/* 矢印 */

.coordinate-slider .slider-arrow {
	border: none;
	background: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	z-index: 20;
}

.coordinate-slider .slider-arrow img {
	display: block;
	width: 100%;
	height: auto;
}


/* スライド本体 */

.coordinate-slider .slide-content {
	position: relative;
	width: 100%;
	overflow: hidden;
}


/* ここが「窓」 */

.coordinate-slider .slide-image {
	position: relative;
	width: 100%;
	overflow: hidden;

	/* 縦スクロールはページに任せる */
	touch-action: pan-y;

	/* 選択禁止 */
	user-select: none;
	-webkit-user-select: none;
}


/* 実際に横へ動く部分 */

.coordinate-slider .slide-track {
	display: flex;
	width: 100%;
	overflow-x: auto;

	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	-webkit-overflow-scrolling: touch;

	scrollbar-width: none;

	cursor: grab;
}

.coordinate-slider .slide-track::-webkit-scrollbar {
	display: none;
}


/* ドラッグ中 */

.coordinate-slider .slide-track.dragging {
	scroll-behavior: auto;
	cursor: grabbing;
}


/* 1枚 */

.coordinate-slider .slide {
	flex: 0 0 100%;
	width: 100%;

	scroll-snap-align: start;
	scroll-snap-stop: always;

	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
}


/* 画像 */

.coordinate-slider .slide img {
	display: block;
	width: 100%;
	height: auto;

	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;

	pointer-events: none;
}


/* カウンター */

.coordinate-slider .slide-counter {
	position: absolute;
	z-index: 10;
}


/* クレジット */

.coordinate-slider .credit-button {
	z-index: 30;
}


/* クレジット表示 */

.coordinate-slider .credit-overlay {
	z-index: 25;
}

.carousel-wrap {
	position: relative;
	width: 70%;
	margin: auto;
	padding-bottom: 6vw;
}

.track {
	display: flex;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;

	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;

	touch-action: pan-x;
	cursor: grab;
}

.track::-webkit-scrollbar {
	display: none;
}

.track.dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}

.slide {
	position: relative;

	flex: 0 0 80%;
	width: 80%;

	scroll-snap-align: center;
	scroll-snap-stop: always;

	box-sizing: border-box;
}

#sec5 .nedan{width: auto;}

.track {
	display: flex;
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;

	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;

	touch-action: pan-x;
	cursor: grab;

	padding-left: 10%;
	padding-right: 10%;
	box-sizing: border-box;
}

.track {
	display: flex;
	width: 100%;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;

	touch-action: pan-x;
	cursor: grab;

	box-sizing: border-box;
}

.track::-webkit-scrollbar {
	display: none;
}

.track.dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}


/* 1枚の幅 */
.slide {
	position: relative;

	flex: 0 0 80%;
	width: 80%;

	scroll-snap-align: center;
	scroll-snap-stop: always;

	box-sizing: border-box;
}


/* 画像 */
.slide img {
	display: block;
	width: 100%;
	height: auto;

	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;

	pointer-events: none;
}

.slide img.slide-main {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}


/* 矢印 */

.arrow {
	position: absolute;
	top: 50%;
	z-index: 20;

	transform: translateY(-50%);

	border: 0;
	padding: 0;
	margin: 0;

	background: none;
	cursor: pointer;
}

.arrow img {
	display: block;
	width: 100%;
	height: auto;
}

.arrow.prev {
	left: 0;
}

.arrow.next {
	right: 0;
}


/* カウンター */

.slide-counter {
	position: absolute;
	z-index: 20;
}


/* クレジットボタン */

.credit-button {
	position: absolute;
	z-index: 30;

	border: 0;
	padding: 0;
	margin: 0;

	background: none;
	cursor: pointer;
}

.credit-button img {
	display: block;
	width: 100%;
	height: auto;
}


/* クレジット */

.credit-overlay {
	position: absolute;
	z-index: 25;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity .25s ease;
}

.credit-overlay.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.nedan {
	width: 100%;
}

.ned p {
	margin: 0;
}

.buy img {
	display: block;
}


/* =========================
   カルーセル
========================= */

.carousel-wrap {
	position: relative;
	width: 70%;
	overflow: hidden;
	margin: auto;
}

.carousel-wrap .slide {
	opacity: 0.3;
	transition: opacity 0.3s ease;
}

.carousel-wrap .slide.is-active {
	opacity: 1;
}

.carousel-wrap .slide {
    position: relative;
}

.carousel-wrap .credit-overlay {
    z-index: 10;
}

.carousel-wrap .credit-button {
    z-index: 20;
}


/* =========================
   スライドを横に並べる部分
========================= */

.carousel-wrap .track {
	display: flex;
	width: 100%;

	overflow-x: auto;
	overflow-y: hidden;

	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;

	touch-action: pan-x;
	cursor: grab;

	box-sizing: border-box;
}

.carousel-wrap .track::-webkit-scrollbar {
	display: none;
}

.carousel-wrap .track.dragging {
	cursor: grabbing;
	scroll-behavior: auto;
	scroll-snap-type: none;
}



.carousel-wrap .slide {
	position: relative;

	flex: 0 0 30%;
	width: 30%;

	scroll-snap-align: center;
	scroll-snap-stop: always;

	box-sizing: border-box;
	margin-left: 3vw;
}



.carousel-wrap .slide-image {
	width: 100%;
	position: relative;
}

.carousel-wrap .slide-image img {
	display: block;

	width: 100%;
	height: auto;

	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}



.carousel-wrap .arrow {
	position: absolute;

	top: 45%;
	z-index: 50;

	transform: translateY(-50%);

	border: none;
	padding: 0;
	margin: 0;

	background: none;
	cursor: pointer;

	width: 3.5vw;
}

.carousel-wrap .arrow img {
	display: block;
	width: 100%;
	height: auto;
}

.carousel-wrap .arrow.prev {
	left: 1vw;
}

.carousel-wrap .arrow.next {
	right: 1vw;
}

.carousel-wrap .arrow:hover {
	opacity: .5;
}



.carousel-wrap > .slide-counter {
	position: absolute;

	z-index: 50;

	left: 50%;
	bottom: 0vw;

	transform: translateX(-50%);

	margin: 0;

	font-size: 1.6vw;
	letter-spacing: 2px;
	color: #4d5a75;
	font-family: "DM Sans", sans-serif;
}


/* =========================
   クレジット
========================= */

.carousel-wrap .credit-button {
	position: absolute;
	z-index: 30;

	border: none;
	padding: 0;
	margin: 0;

	background: none;
	cursor: pointer;
}

.carousel-wrap .credit-button img {
	display: block;
	width: 100%;
	height: auto;
}


/* =========================
   クレジット表示
========================= */

.carousel-wrap .credit-overlay {
	position: absolute;
	z-index: 25;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity .25s ease;
}

.carousel-wrap .credit-overlay.active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}


/* =========================
   スマホ
========================= */

@media screen and (max-width: 767px) {

	.carousel-wrap .track {
		width: 100%;
	}

	.carousel-wrap .slide {
		flex: 0 0 100%;
		width: 100%;
	}

	.carousel-wrap .arrow {
		width: 8vw;
		top: 65vw;
	}

	.carousel-wrap .arrow.prev {
		left: 2vw;
	}

	.carousel-wrap .arrow.next {
		right: 2vw;
	}

	.carousel-wrap > .slide-counter {
		font-size: 4vw;
		bottom: 3vw;
	}

}


.carousel-wrap .credit-button {
    position: absolute;
    z-index: 1000;


}

/* =========================
   PCだけ左右を見せる
   ========================= */

@media (min-width: 768px) {

	.track {
		padding-left: 5%;
		padding-right: 5%;
		box-sizing: border-box;
	}

	.slide {
		flex: 0 0 90%;
		width: 90%;
	}

}


@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;
}

.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: #DBD7D1;}

.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;


  }

  .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;}
.exwrap{position: relative;}

.toptop img{height: 100%;
	width: auto!important;

}

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

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


.exwrap{background-color: ;

		font-family: "yu-gothic-pr6n","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
		font-weight: ;

	  }

.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%{margin-top: 0;}

	50%{margin-top: -5px;}

	100%{margin-top: 0;}

	}

.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;}

}


.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;

  }

  .content {

	list-style: none;
	line-height: 0;

  }

  .contentx {

	list-style: none;
	line-height: 0;
	width: 22.9vw;

  }

  .slideshow {

	animation: loop-slide 18s infinite linear 1s both;
	mix-blend-mode: multiply;
  }

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

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


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

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

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



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

#sp{display: none;}


.slide {
    position: relative;
    z-index: 1;
}

.slide-image {
    pointer-events: none;
}

#creditOverlay {
    pointer-events: none;
    z-index: 10;
}

#creditOverlay.active {
    pointer-events: auto;
}

#creditButton {
    position: absolute !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
}


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

	#sp{display: block;}

	#pc{display: none;}

	#top{height: 100vh;}
	.adl1{height: 100%;}

	.peko{object-fit: cover;
	height: 100%;}

	.adl2{left: 50%;
	top: 50%;
transform: translate(-50%,-50%);
width: 81.3vw;}

.adl4{color: #505B70;
font-size: 14px;
line-height: 22px;
width:46vw;
margin-left: 9.6vw;
margin-top:auto;
margin-bottom: 0;
position: relative;
left: unset;
bottom: unset;
font-family: YakuHanJP, "Zen Kaku Gothic Antique", sans-serif;

}

.adl6{flex-direction: column;
width: 100%;}

.adl8{order: 1;
width: 46.5vw;
margin: auto;
margin-top: 10vw;
}

.adl7{order: 2;
	margin-top: 6vw;
font-size: 14px;
line-height: 22px;
text-align: center;}

.adl5{width: 15.9vw;
aspect-ratio: 0.159 / 0.53;
margin: auto;
margin-top: 13.8vw;
margin-right: 8.6vw;}

.adl9{width: 100vw;
flex-direction: column;
place-items: center;
margin-bottom: 10vw;
}

.adl16{width: 85vw;
margin-top: 14.5vw;}

.adl10{width: 88.8vw;
margin-top: -52vw;}

.adl11{width: 96vw;
margin-left: auto;
margin-right: 0;
margin-top: -10vw;}

.adl14{width: 72vw;}

.adl15{width: 18.9vw;}

.adl13{width: 21.5vw;}

#sec1{padding-bottom: 23.1vw;}

.adl17{width: 175.7vw;
margin-left: -16vw;
margin-right: auto;}

.adl21{margin-top: 5vw;}

.adl19{margin-top: 14vw;}

.adl24{
	margin: auto;
	margin-top: 10vw;
	padding-bottom: 0;
width: 73vw;}

.ned{font-size: 15px;
line-height: 25px;}

.nedan{    margin-top: 5vw;
    margin-left: 22vw;}

	.buy{width: 10vw;
		margin-top: 1vw;
	margin-left: 3vw;}

	.adl18{width: 66.4vw;
	height: 131.1vw;}

	.adl20{width: 11.8vw;
	margin-left: 14.5vw;}

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

	.adl23{width: 45.8vw;
	margin-left: 21vw;}

	.adl21{flex-direction: column;}

	.bell{display: flex;}

	.one2{margin-right: auto;}


	.adl22{width: 68.5vw;
	margin-left: auto;
margin-right: 0;
margin-top: 7.2vw;}

.adl25{margin-top: 9.8vw;
flex-direction: column;}

.adl26{width: 100vw;}

.nedanr .ned{justify-content: start;}
.nedanr .other{justify-content: start;
display: flex;}

.nedanr{margin-left: 7vw;}

#sec5 .nedan{margin: auto;
flex-shrink: 0;
width:auto ;}

.carousel-wrap{width: 95%;}

.adl28{width: 45.8vw;}

.adl27{width: 11.8vw;
margin-top: 0;
margin-bottom: auto;
margin-left: 15.2vw;}

.katy{display: flex;
flex-direction: column;
}

.adl30{width: 76.4vw;
	margin-left: 7vw;
margin: auto;
margin-top: 20.1vw;
margin-bottom: 20.1vw;
}

.adl28 img{margin-bottom: 11vw!important;}

#viewer1{width: 144.6vw;
flex-shrink: 0;
}

.adl32{width: 188vw;
flex-shrink: 0;
margin-left: -36vw;
}

.den{display: flex;
order: 4;
}

.adl38{order: 1;}

.adl34{order: 2;
margin-left: 10vw;}

.adl35{order: 3;}

.adl36{flex-direction: column;}

.adl38{order: 1;}

.adl37{order: 1;
width: 64.3vw;
margin-top: 0;
}

.adl38{width: 90.7vw;
margin-left: auto;
margin-right: 0;
}

.slide-image{height:130vw ;}

.adl33{width: 11.8vw;
margin-top: 0;
margin-bottom: auto;
margin-left: 7vw;}

.adl39{width: 45.8vw;
margin-top: 7.9vw;}

.adl35{width: 86.7vw;
margin: auto;
margin-left: 9.3vw;
margin-top: 15.2vw;
margin-bottom: 15.2vw;}

.adl33{order: 2;}

.adl40{width: 47.9vw;
margin-top: 18vw;
}

.tex2{font-size: 13px;
line-height: 21px;}

.adl47{display: none;}

.gum{display: none;}

.gum2{display: none;}

.contentx{width:58.9vw ;}

.slider-arrow{width: 8vw;}

.adl28{margin-bottom: 13vw;}

.adl46{width: 85vw;
margin: auto;
font-size: 14px;
line-height: 22px;
}

.adl43{width: 85vw;
margin: auto;
padding-top: 8.9vw;
position: unset;
margin-bottom: 18vw;
}

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


.bellx{width: 60vw;
margin: auto;}


.bellx1{margin-bottom: 10vw;}


.bell1{height: 60vw;}

.bell1x{height: 60vw;}

.bel2{height: 85vw;}

.credit-button{width: 7vw;
height: 7vw;
box-sizing: border-box;
padding: 0;
top: 99vw;
    left: 52vw;
	left: 60vw;
	bottom: 6vw;
	top: unset;
}

.all{width: 47vw;
margin-top: 10vw;
margin-bottom: 10vw;}

.coordinate-slider{width: 90vw;}

.slide-counter{font-size: 18px;
margin-top: 6vw;
margin-bottom: 6vw;}

.slide-info{font-size: 15px;}

.buy-button{font-size: 13px;
height: 20px;
width: 40px;}

#sec6{width: 100%;}

.adl41{width: 120vw;
margin-left: -8vw;}

.syasin{margin-top: 6.8vw;
margin-bottom: 6.8vw;}

.adl31{margin-top: 20vw;}

.one{width: 100%;}

.one1{margin-bottom: 15vw;}

#sec6x{flex-direction: column;
width: 82vw;}




.side{width: 8.2vw;
right: -1.6vw;}

.back-top{width: 8.9vw;}

.crez{width: 70vw;}

.slider-arrow {width: 9vw;
padding: 0;}

.carousel-wrap{padding-bottom: 12vw;}

}