@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600&family=Open+Sans:wght@400;600&display=swap');
html,body {
    padding: 0;
    margin: 0;
    line-height: 2.0;
	font-size: 12px;
	font-weight: 600;
    color: #333;
    letter-spacing: 0.5px;
	overflow-x:hidden;
	background: #ddd;
	font-family: 'Open Sans', 'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}

a {
	text-decoration: none;
	color: #333;
}
h1,h2 {
	line-height: 0;
	margin: 0;
	padding: 0;
}
img,video {
    width: 100%;
    vertical-align: bottom;
    line-height: 0;
	z-index: 0;
	filter: drop-shadow(0px 0px rgba(0,0,0,0));
	outline: none;
	border: none;
}
ul,li {
	list-style: none;
	padding: 0;
	margin: 0;
}
.img {
	line-height: 0;
}
.img img {
}
.bg {
	background-position: center center;
	background-size: cover;
	position: absolute;
	top: 0px;
	left:0px;
	bottom: 0px;
	right: 0px;
}
.video video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	max-width: 100%;
	width: auto;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
}
#bl .copy {
      position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100%;
	z-index: 1000;
	line-height: 0;
	opacity: 1;
	transition: 1s all 0.2s ease;
	overflow: hidden;
}
#bl .copy li {
	padding: 0 25px;

}
#bl .copy .slide_copy img {
	opacity: 0!important;
	transition: 1s all 0.2s ease;
}
#bl .copy.ac {
	opacity: 1;
}
#bl .copy img {
	transform: translate(0,100%);
	transition: 0.6s all 0s ease;
}
#bl .copy.ac img {
	transform: translate(0);
}
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
.scroll-infinity__item {
	width: 400px;
}

@media only screen and (max-width: 768px)  {
	#bl .copy li {
		padding: 0 15px;

	}
	.scroll-infinity__item {
	  width: calc(100vw / 1.5);
	}
}

#main_visual {
	width: 100%;
	height: 100vh;
	position: relative;
	margin-bottom: 15%;
}
#main_visual .inner {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#main_visual .visual {
	position: absolute;
	line-height: 0;
	z-index: 0;
	-webkit-animation: in 12.5s infinite 0s linear;
	animation: in 12.5s infinite 0s linear;
	opacity: 0;
}
#main_visual .visual.img1 {
	top: 5%;
	left: 35%;
	width: 30%;
	z-index: 10;
	animation-delay: 2s;
}
#main_visual .visual.img2 {
	top: 10%;
	left:10%;
	width: 20%;
	z-index: 100;
	animation-delay: 3.5s;
}
#main_visual .visual.img3 {
	bottom: 5%;
	left: 60%;
	width: 20%;
	z-index: 101;
	animation-delay: 5s;
}
#main_visual .visual.img4 {
	bottom: 5%;
	left: 30%;
	width: 15%;
	z-index: 101;
	animation-delay: 6.5s;
}
#main_visual .visual.img5 {
	top: 5%;
	left:45%;
	width: 23%;
	z-index: 101;
	animation-delay: 8s;
}
#main_visual .visual.img6 {
	bottom: 10%;
	left: 10%;
	width: 22%;
	z-index: 100;
	animation-delay: 9.5s;
}
#main_visual .visual.img7 {
	top: 25%;
	right:10%;
	width: 25%;
	z-index: 101;
	animation-delay: 11s;
}
#main_visual .visual.img8 {
	bottom: 0%;
	left: 40%;
	width: 15%;
	z-index: 100;
	animation-delay: 12.5s;
}
#main_visual h1 {
	position: absolute;
	width: 20%;
	max-width: 100px;
	top: 2%;
	left: 2%;
	opacity: 0;
	-webkit-animation: fade 2s forwards 2s ease;
	animation: fade 2s forwards 2s ease;
}
.scrolldown2{
	position:absolute;
	bottom:5%;
	right:5%;
	opacity: 0;
	-webkit-animation: fade 2s forwards 2s ease;
	animation: fade 2s forwards 2s ease;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
	position: absolute;
	left:10px;
	bottom:10px;
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
	/*縦書き設定*/
	-ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-2px;
    /*丸の形状*/
	width:5px;
	height:5px;
	border-radius: 50%;
	background:#fff;
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}
@keyframes circlemove{
      0%{bottom:45px;}
     100%{bottom:-5px;}
 }

@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
	100%{opacity:0;}
 }

.scrolldown2:after{
	content:"";
	position: absolute;
	bottom:0;
	left:0;
	width:1px;
	height: 50px;
	background:#fff;
}

@media only screen and (max-width: 768px)  {
	#main_visual {
		margin-bottom: 25%;
	}
	#main_visual .inner {
		position: absolute;
		width: 100%;
		height:100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	#main_visual .visual.img1 {
		top: 30%;
		left: 25%;
		width: 70%;
		z-index: 10;
		animation-delay: 2s;
	}
	#main_visual .visual.img2 {
		top: 5%;
		left:5%;
		width: 40%;
		z-index: 100;
		animation-delay: 3.5s;
	}
	#main_visual .visual.img3 {
		bottom: 5%;
		left: 60%;
		width: 30%;
		z-index: 101;
		animation-delay: 5s;
	}
	#main_visual .visual.img4 {
		bottom: 0;
		left: 0;
		width: 35%;
		z-index: 101;
		animation-delay: 6.5s;
	}
	#main_visual .visual.img5 {
		top: 35%;
		left:auto;
		right: 5%;
		width: 50%;
		z-index: 101;
		animation-delay: 8s;
	}
	#main_visual .visual.img6 {
		top: 15%;
		left: 5%;
		width: 45%;
		z-index: 100;
		animation-delay: 9.5s;
	}
	#main_visual .visual.img7 {
		top: 0%;
		right:5%;
		width: 35%;
		z-index: 101;
		animation-delay: 11s;
	}
	#main_visual .visual.img8 {
		bottom: 5%;
		left: 0%;
		width:35%;
		z-index: 100;
		animation-delay: 12.5s;
	}
	#main_visual h1 {
		position: absolute;
		width: 20%;
		max-width: 150px;
		top: 15px;
		left: 15px;
		opacity: 0;
		-webkit-animation: fade 2s forwards 2s ease;
		animation: fade 2s forwards 2s ease;
	}
}



#main_contents {
	position: relative;
	z-index: 1000;
}

#main_contents #thema {
	/*margin: 15vh auto;*/
	height: 30vh;
	position: relative;
}
#main_contents #thema h2 {
	line-height: 2.4;
	text-align: center;
	font-size: 16px;
	padding: 0 25%;
	box-sizing: border-box;
	letter-spacing: 4px;
}
#main_contents .grid {
	width: 100%;
	margin: 0 auto;
/*	border-top: 1px solid #222;
	border-bottom: 1px solid #222;*/
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows:auto;
	/*column-gap:10px;
	grid-row-gap: 10px;*/
	box-sizing: border-box;
	padding: 0 20px;
	/*background: #eee;*/
	background:rgba(221,221,221,1)
}

#main_contents .grid li {
	position: relative;
	overflow: hidden;
	line-height: 0;
	opacity: 0;
	margin: 0;
	box-sizing: border-box;
	/*border: 0.5px solid #333;*/
	transition: 0.6s all 0s ease;
}

#main_contents .grid li.ac {
	-webkit-animation: fade 1.8s forwards ease;
	animation: fade 1.8s forwards ease;
}
#main_contents .grid li a {
	cursor: pointer;
	position: relative;
	display: block;
}
#main_contents .grid li a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border: 10px solid #ddd;
	z-index: 100
}
#main_contents .grid li img {
	object-fit: cover;
}
@media (hover: hover) {
	#main_contents .grid li:hover {
		filter: grayscale(1);
	}
	#main_contents .grid li .img:active {
		/*margin: 8px;*/
	}
}
@media (hover: none) {
	#main_contents .grid li:active {
		filter: grayscale(1);
	}
}
#main_contents li .switch {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-animation: switch 6s infinite ease;
	animation: switch 6s infinite ease;
	z-index: 1;
}
#main_contents li .gray {
	-webkit-animation: gray 6s infinite ease;
	animation: gray 6s infinite ease;
}
#main_contents .grid li:nth-of-type(odd).ac {
	-webkit-animation: fade 1.8s forwards 0.2s ease;
	animation: fade 1.8s forwards 0.2s ease;
}
#main_contents #look1 li:nth-of-type(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}

#main_contents #look2 li:nth-of-type(1) {
	grid-column: 3 / 5;
	grid-row: 1 / 3;
}
#main_contents #look2 li:nth-of-type(4) {
	grid-column: 1 / 3;

}
#main_contents #look4 li:nth-of-type(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 3;
}
#main_contents #look4 li:nth-of-type(2) {
	grid-column: 3 / 4;
}
#main_contents #look4 li:nth-of-type(4) {
	grid-column: 3 / 5;
}

@media only screen and (max-width: 768px)  {
	#main_contents #thema {
		/*margin: 15vh auto;*/
		height: 20vh;
	}
	#main_contents .grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		padding: 0 2px;
	}
	#main_contents .grid li {
		margin: 2px;
	}	
	#main_contents #look1 li:nth-of-type(1) {
		grid-column: 1 /3;
		grid-row: 1 / 3;
	}

	#main_contents #look2 li:nth-of-type(1) {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}
	#main_contents #look4 li:nth-of-type(1) {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}
	#main_contents #look4 li:nth-of-type(2) {
		grid-column: 1 / 2;
	}
	#main_contents #look4 li:nth-of-type(4) {
		grid-column: 1 / 3;
	}
	#main_contents .grid li a::before {
		border: 2px solid #ddd;
	}
	#main_contents #look4 li:nth-of-type(4) {
		grid-column: 1 / 3;
	}
}

#footer {
	margin: 5% auto 0;
	position: relative;
	display: grid;
	grid-template-columns:1fr;
	padding: 2.5% 5%;
	box-sizing: border-box;
	z-index: 1000;
	background: #ddd;
	text-align: center;
}
#footer .staff {
	font-size: 11px;
	letter-spacing: 1px;
	text-align: center;
}
#footer .logo {
	width: 100%;
}
#footer .logo img {
	width: 30%;
	max-width: 250px;
	margin: 50px auto;
	filter: invert(1)

}
#footer .logo .copyright {
	text-align: center;
	margin: 25px auto;
	font-size: 10px;
}
#footer .sns {
	margin: 5% 0;
	text-align: center;

}

#footer .sns li {
	text-align: center;
	font-size: 14px;
	display: inline-block;
}
#footer .sns li a {
	display: inline-block;
	border-left: 1px solid #333;
	padding: 2px 10px;
	line-height: 1;
}
#footer .sns li:nth-of-type(1) a {
	border: none;
}

@media only screen and (max-width: 768px)  {
	#footer {
		grid-template-columns: 1fr;
		padding: 15% 5%;
		
	}
	#footer .staff {
		font-size: 10px;
	}
	#footer .logo {
		margin: 15% 0 5%;
		width: 100%;
	}
	#footer .logo img {
		width: 70%;
		margin: 50px auto;
	}
	#footer .logo .copyright {
		margin: 20px auto;
		font-size: 10px;
	}
	#footer .sns li {
		font-size: 12px;

	}
}




.box {
	width: 100%;
	position: relative;
	box-sizing: border-box;
	background: #ddd;
	margin: 25px auto;
	border: 1px solid #000;
	padding: 25px;
	
}

.box .inner {
	position: relative;
}
.box .main {
	width:55%;
/*	padding: 20px;
	box-sizing: border-box;*/
	position: relative;
}
.box .main .base {
	z-index: -1
}
.box .main .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.box .item {
	position: absolute;
	top: 0;
	right: 0;
	width: 45%;
	height: 100%;
}
.box .item ul {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 64%;
	transform: translate(-50%,-50%);
	text-align: left;
}
.box .item ul li .no {
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
}
.box .item ul li .info{
    font-size: 10px;
}
.box .item ul li a,.box .item ul li span {
	display: block;
	text-align: left;
	font-size: 12px;
	position: relative;
	padding: 15px 5px 10px;
	border-bottom: 1px solid #222;
	line-height: 1.6;
	overflow: hidden;
	transition: 0.6s all 0s ease;
	margin: 0;
}
.box .item ul li a::after {
	content: "";
	position: absolute;
	top: 0;
	left: -99%;
	width: 100%;
	opacity: 0;
	height: 100%;
	background: rgba(255,255,255,0.6);
	z-index: -1;
	transition: 0.6s all 0s ease;
}
.box .item ul li a:hover::after{
	top: 0;
	left: 0;
	opacity: 1;
}
.box .item ul li .price {
	font-size: 10px;
	display: block;
}
.box .item ul li a::before {
	content: "\03e";
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(0,-50%);
}
.box .nav {
	position: absolute;
	top: 25px;
	right: 25px;
	width: 20px;
	height: 20px;
	box-sizing: border-box;
	z-index: 100
	
}
.box .nav .prev {
	width: 20%;
	max-width: 10px;
	line-height: 0;
	display: none;
}
.box .nav .next {
	position: absolute;
	top: 50%;
	right: 50px;
	width: 20%;
	max-width: 10px;
	transform: translate(0,-50%);
	line-height: 0;
	display: none;
}
.box .nav .remodal-close {
  position: absolute;
  top: 50%;
  left: 50%;
	transform: translate(-50%,-50%);
  display: block;
  width: 100%;
	height: 100%;
  cursor: pointer;
  border: 0;
  outline: 0;
  background: transparent;
	padding: 0;
	line-height: 0;
}
.box .nav .remodal-close img {
	width: 100%;
}
@media only screen and (max-width: 768px)  {
	.box {
		position: relative;
		margin: 25px auto;
		padding: 0 0 50px

	}
	.box .main {
		width: 100%;
	}
	.box .item {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: auto;
	}
	.box .item ul {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;
		transform: translate(0);
	}
	.box .item ul li .no {
		margin: 10px auto;
		font-size: 14px;
		padding: 5% 5% 0;
	}
	.box .item ul li a,.box .item ul li span {
		display: block;
		text-align: left;
		font-size: 12px;
		position: relative;
		margin: 0 auto;
		width: 90%;
	}
	.box .item ul li .info{
		padding: 0 5%;
	}
	.box .item ul li a::before {
		right: 5%;
	}
	.box .nav {
		width: 20px;

	}
}
.slick-dotted.slick-slider {
	margin: 0;
}
.slick-prev, .slick-next {
	width: 10px;
	height: auto;
}
.slick-prev:before,.slick-next:before {
	content: "";
}
.slick-prev {
	left: 10px;
	z-index: 100;
}
.slick-next {
	right: 10px;
	z-index: 100;
}
.slick-dots {
	bottom: 10px;
}
.slick-slider{
	height: 100%;
	position: relative;
}
@keyframes in {
  0% {
	  transform: translate(-25px,0);
	  opacity: 0;
  }
  5% {
	  opacity: 1;
	}
	45% {
		opacity: 1; 
	}
	50%{
		opacity: 0;
		transform: translate(0);
	}
	100% {
		opacity: 0;
	}
}
@keyframes fade {
  0% {
	  opacity: 0;
  }
	100% {
		opacity: 1;
	}
}
@keyframes switch {
  0% {
	  opacity: 0;
	}
	15% {
		opacity: 1;
	}
	50% {
		opacity: 1;
	}
	65% {
		opacity: 0;
	}
  100% {
	  opacity: 0;
	}
}
@keyframes gray {
  0% {
	  filter: grayscale(0)
	}
	15% {
		filter: grayscale(100)
	}
	50% {
		filter: grayscale(100)
	}
	65% {
		filter: grayscale(0)
	}
  100% {
	  filter: grayscale(0)
	}
}