@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600&family=Noto+Sans+JP:wght@400;600&display=swap');/*font-family: 'Hanken Grotesk', sans-serif;font-family: 'Noto Sans JP', sans-serif;*/

html,body {
	padding: 0;margin: 0;width: 100%;line-height: 2.2;background: #ebe6de;font-family:'Noto Sans JP', "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";}

a {
	text-decoration: none;color: #000;}

img {width: 100%;border: none;}

ul,li {list-style: none;padding: 0;margin: 0;}.spview {display: none;}.pcview {display: block;}

#cl {width: 100%;max-width: 1250px;margin: 0 auto;box-sizing: border-box;padding: 50px 25px 100px;opacity: 1;transition: 1s all 0s ease;}

.img-wrap {
  overflow: hidden;
  position: relative;
}

.img-wrap::before {
  animation: img-wrap 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #ebe6de;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-wrap {
  100% {
    transform: translateX(100%);
  }
}


.img-animation {
  animation: img-opacity 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  overflow: hidden;
  position: relative;
}

.img-animation::before {
  animation: img-animation 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: #ebe6de;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

@keyframes img-opacity {
  100% {
    opacity: 1;
  }
}

@keyframes img-animation {
  100% {
    transform: translateX(100%);
  }
}


@media only screen and (max-width: 768px)  {
	
.pcview {display: none;}

.spview {display: block;}

#cl {width: 100%;max-width: 1200px;margin: 0 auto;padding: 5px 0 15px;}}
#head {
	width: 100%;
	position: relative;	
	font-family: "Forum", serif;
	font-weight: 400;
	font-style: normal;letter-spacing: 1px;padding: 50px 0;}
#head::before,
#head::after {content: "";position: absolute;left: 0;width: 100%;height: 0px;background: #111;}
#head::before {top: 0;}
#head::after {bottom: 0;}
#head .title {font-size: 100px;line-height: 1;transition: 1.5s all 0s ease; text-align: center;}
#head .read {font-size:30px;line-height: 1;margin: 0 0 15px;transition: 1.5s all 0s ease; text-align: center;}

@media only screen and (max-width: 768px)  {
	
#head {box-sizing: border-box;padding: 80px 15px 30px;}
#head 
	.title {font-size: 70px;line-height: 0.9em;}
#head 
	.read {font-size:20px;}}

#contents {position: relative;}
#contents 
.section {position: relative;margin: 50px auto;}
#contents 
.section::after{content: "";position: absolute;top: 0;right: 0;width: 1px;height: 100%;background: #ebe6de;z-index: 100}#contents 
.section .time {
	font-size: 32px;
	letter-spacing: 1px;
	font-family: "Forum", serif;
	font-weight: 400;
	font-style: normal;
	padding-bottom:40px;
	position: relative;
	text-align: center;}
#contents 
.section .time span {font-size: 12px;display: block;text-align: right;}#contents .section .time::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;}
#contents 
.section .grid {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;position: relative; border-right: 1px solid #000; border-left: 1px solid #000;}
.section .grid2 {display: grid;grid-template-columns: 1fr 1fr;position: relative; border-right: 0px solid #000; border-left: 1px solid #000; width: 50%; margin-left: 25%;}
#contents 
.section .grid::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background: #111;}
.section .grid2::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background: #111;}
#contents 
.section li {position: relative;box-sizing: border-box;padding: 20px;}#contents 
.section li::before {content: "";position: absolute;top: 0;right: 0;width: 1px;height: 100%;background: #111;}#contents 
.section li::after {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background: #111;}#contents .section li a {display: block;width: 100%;margin: 0 auto;box-sizing: border-box;}#contents .section li .name {
	font-size: 12px;
	text-align: center;
	margin-top: 3%;
	line-height: 1.2;
}
#contents 
.section li .price {
	font-size: 10px;
	text-align: center;
}
#contents 
.section li .btn {
	display: inline-block;
	width: 100%;
	padding: 5px 0;
	margin: 3% 0 0;
	font-size: 12px;
	line-height: 1.6;
	border: 0px solid #111;
	font-family: 'Hanken Grotesk', sans-serif;font-weight: 600;
	text-align: center;
}

@media only screen and (max-width: 768px)  {
#contents 
.section::after{display: none;}
	#contents 
	.section .time {font-size: 26px; padding: 0 15px 10px;position: relative;}
	#contents 
	.section .grid {display: grid;grid-template-columns: 1fr 1fr;position: relative; border-right: 0px solid #ebe6de; border-left: 0px solid #ebe6de;}
.section .grid2 {display: grid;grid-template-columns: 1fr 1fr;position: relative; border-right: 0px solid #000; border-left: 1px solid #000; width: 100%; margin-left: 0%;}
	#contents 
	.section li {padding: 10px 10px 10px;}
	#contents 
	.section li:nth-of-type(even)::before {display: none;}
	#contents 
	.section li .name {font-size: 10px;	line-height: 1.6;}
	#contents 
	.section li .price {font-size: 11px;}#contents 
	.section li .btn {
		font-size: 12px;
		padding: 10px 0;
	}
}
#contents 
.section .special_img {width: 100%;box-sizing: border-box;position: relative;}

#contents 
.section .special_img::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;background: #111;z-index: 10}
#contents 
.section .special_img a {display: block;}
#contents 
.section .special_img .img {width: 50%;line-height: 0;position: relative;box-sizing: border-box;padding: 40px;}
#contents 
.section .special_img::after {content: "";position: absolute;top: 0;left: 50%;width: 1px;height: 100%;background: #111;z-index: 10;transform: translate(-50%,0);}
#contents 
.section .special_img .data {width: 50%;position: absolute;top: 50%;right: 0%;text-align: center;transform: translate(0,-50%)}
#contents 
.section .special_img .release {font-size: 24px;margin-bottom: 15px;letter-spacing: 1px;font-family: 'Hanken Grotesk', sans-serif;font-weight: 600;}
#contents 
.section .special_img .txt {font-size: 12px;padding: 10px;max-width: 350px;margin: 0 auto 15px;text-align: left;}
#contents 
.section .special_img .name {font-size: 14px;}
#contents 
.section .special_img .price {font-size: 12px;}
#contents 
.section .special_img .btn {display: inline-block;padding: 5px 0;margin: 10px 0 0;font-size: 12px;line-height: 1;border-bottom: 2px solid #000;letter-spacing: 1px;font-family: 'Hanken Grotesk', sans-serif;font-weight: 600;}
#contents 
.section .special_img:nth-of-type(odd) .img {margin-left: 50%;}
#contents 
.section .special_img:nth-of-type(odd) .data {right: auto;left: 0%;}

@media only screen and (max-width: 768px)  {
	#contents 
	.section .special_img {width: 100%;padding:20px 20px 40px;}
	#contents 
	.section .special_img .img,
	#contents 
	.section .special_img:nth-of-type(odd) .img {width: 100%;margin: 0;padding: 0;}
	#contents 
	.section .special_img::after{display: none;}
	#contents 
	.section .special_img .txt {margin: 15px auto 15px;max-width: 100%;padding: 0;}
	#contents 
	.section .special_img .data,
	#contents .section .special_img:nth-of-type(odd) .data {width: 100%;position:relative;top: auto;right: auto;left: auto;margin-top: 15px;transform: translate(0);text-align: left;}
}

#howto {width: 100%;position: relative;font-family: 'Hanken Grotesk', sans-serif;font-weight: 600;letter-spacing: 1px;padding: 75px 0;margin: 75px auto 25px;}
#howto::before,
#howto::after {content: "";position: absolute;left: 0;width: 100%;height: 1px;background: #111;}
#howto::before {top: 0;}
#howto::after {bottom: 0;}
#howto .title {font-size: 27px;line-height: 1;text-align: center;}
#howto .txt {font-size:14px;text-align: center;margin: 25px auto;}
#howto .img {max-width: 750px;width: 90%;margin: 0 auto;position: relative;box-sizing: border-box;border: 2px solid #000;line-height: 0;border-radius: 20px;overflow: hidden;padding: 15px;}
#howto .img span {display: block;position: absolute;top: 60%;right: 38%;width: 50px;height: 50px;border: 3px solid #000;border-radius: 50%;overflow: hidden;background: #000;animation: flash 2s linear infinite;opacity: 0;}#howto .img span::before {content: "TAP!";position: absolute;top: 50%;left: 50%;text-align: center;transform: translate(-50%,-50%);color: #FFF;}

@media only screen and (max-width: 768px)  {
	#howto {width: 100%;position: relative;font-family: 'Hanken Grotesk', sans-serif;font-weight: 600;letter-spacing: 1px;padding: 75px 15px;box-sizing: border-box;margin: 75px auto 25px;}
	#howto .img {border-radius: 30px;overflow: hidden;padding: 25px;}
	#howto .img span {display: block;position: absolute;top: 80%;right: auto;left: 5%;;}}
#link {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: auto;position: relative;padding-bottom: 25px;}
#link::before {content: "";position: absolute;left: 0;bottom: 0;width: 100%;height: 1px;background: #111;}
#link a {font-family: 'Hanken Grotesk', sans-serif;font-weight: 600;letter-spacing: 1px;display: block;text-align: center;font-size: 22px;position: relative;}
#link a:nth-of-type(1)::before {content: "";position: absolute;top: 0;right: 0;width: 1px;height: 100%;margin-left: -1px;background: #111;}
#link a span {opacity: 1;transition: 1.5s all 0s ease;}

@media only screen and (max-width: 768px)  {
	#link a {font-size: 18px;position: relative;}
}
@keyframes flash {0% {opacity: 0;}30% {opacity: 1;}60% {opacity: 1;}90% {opacity: 0;}
}