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

.clear {clear: both;}

.btn_code a{
	width: 40%;
	text-decoration: none;
	display: block;
	color:#fff;
	background-color: #000;
	margin: 10% auto 3%;
	padding:0 0 0;
	border: solid 2px #000;
	text-align: center;
	font-family: "Forum", serif;
	font-weight: 500;
	font-style: normal;
	font-size: 26px;
}	

.item_list {width: 60%;margin: auto;}

.list_title {
	width: 50%;
	margin: 10% auto 3%;
	padding: 0.2% 2% 0%;
	border: solid 1px #000;
	font-family: "Forum", serif;
	font-weight: 400;
	font-style: normal;
	font-size: 28px;
	text-align: center;
}

.float2 {
	float: left;
	width: 50%;
	margin: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
	text-align: center;
}

.float2 p {
	width: 84%;
	margin: 2% auto;
	font-size: 11px;
	font-weight: 500;
}

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

.float4 {
	float: left;
	width: 25%;
	margin: 0;
}

.float4 img {
	width: 80%;
	margin: 0 10% 10%;
}

.navi {
	width: 60%;
	margin: 5% auto 0;
	font-size: 13px;
	letter-spacing: 1px;
	font-family: "Forum", serif;
	font-weight: 400;
	font-style: normal;
	padding-bottom:0;
	margin-bottom: 2%;
	position: relative;
	text-align: center;
}

.navi p {
	font-size: 28px;
	margin-bottom: 0%;
}

.navi_copy {
	width: 50%;
	font-size: 12px;
	margin: 3% auto;
	padding: 3%;
	background-color: #ded9d0;
	text-align: center;
	border-radius: 20px;
	line-height: 1.8em;
}

.staff_box {
	width: 15%;
	margin: 10% auto 4%;
	text-align: center;
	font-size: 18px;
	line-height: 1.6em;
	font-family:'Noto Sans JP', "Hiragino Sans";
	font-weight: 500;
	font-style: normal;
}

.staff_box img {
	width: 100%;
	margin-bottom: 3%;
}

.staff_box a {
	color: #000;
	font-size: 80%;
	text-decoration: underline;
}

.staff_box a:hover {
	text-decoration: none;
}



/* カルーセル外枠 */
    .carousel-container {
      width: 100%;
		max-width: 600px;
      margin: 0% auto 5%;
      padding: 0;
      border: #ebe6de;
      background-color: #ebe6de;
    }

    /* 画像カルーセルラッパー */
    .carousel-wrapper {
      position: relative;
      width: 100%;
      height: auto;
      overflow: hidden;
      padding: 0 0;
      border: none;
      background-color: #ebe6de;
    }

    /* スライドリストの基盤 */
    .image-carousel {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      width: auto;
      list-style: none;
      padding: 0;
      margin: 0;
      overflow: visible;
      border: none;
    }

    /* 各スライド(li)の設定 */
    .image-carousel li {
      flex-shrink: 0;
      flex-basis: 65%;
      box-sizing: border-box;
      position: relative;
      display: flex;
      flex-direction: column;
		background-color: #ebe6de;
		width: 100%;
		background: #ebe6de;
    }

    .image-carousel li img {
      width: 90%;
		margin: 0 5%;
      height: auto;
      display: block;
      border: none;
    }

    /* ナビゲーション矢印 */
    .prev-button {
      position: absolute;
      top: 48%;
		left: 11%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.6);
      color: #fff;
      border: none;
      font-size: 1.5rem;
      padding: 0.2rem 0.5rem 0.1rem 0.4rem;
      cursor: pointer;
      z-index: 10;
border-radius: 20px;
    }
    .next-button {
      position: absolute;
      top: 48%;
		right: 11%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.6);
      color: #fff;
      border: none;
      font-size: 1.5rem;
      padding: 0.2rem 0.4rem 0.1rem 0.5rem;
      cursor: pointer;
      z-index: 10;
border-radius: 20px;
    }


.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;}
	
.item_list {width: 100%;margin: auto;}

#cl {width: 100%;max-width: 1200px;margin: 0 auto;padding: 5px 0 15px;}

.staff_box {
	width: 25%;
	font-size: 14px;
	font-family:'Noto Sans JP', "Hiragino Sans";
	font-weight: 500;
	font-style: normal;
}
	
.btn_code a{
	width: 80%;
	margin: 10% auto 8%;
}	
	
.list_title {
	width: 65%;
	font-size: 25px;
}

}
#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;}
.navi {
	width: 100%;
}
.navi_copy {
	width: 80%;
}
}

#contents {position: relative;}
#contents 
.section {position: relative;margin: 0px auto;}
#contents 
.section::after{content: "";position: absolute;top: 0;right: 0;width: 1px;height: 100%;background: #ebe6de;z-index: 100}
#contents 
.section .time {
	width: 80%;
	margin: auto;
	font-size: 32px;
	letter-spacing: 1px;
	font-family: "Forum", serif;
	font-weight: 400;
	font-style: normal;
	padding-bottom:20px;
	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 {width: 70%; display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;position: relative; margin: auto; border: solid 1px #000;}
.section .grid2 {display: grid;grid-template-columns: 1fr 1fr;position: relative; width: 50%; margin-left: 25%;}
#contents 
.section .grid::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;}
.section .grid2::before {content: "";position: absolute;bottom: 0;left: 0;width: 100%;}
#contents 
.section .grid li {position: relative;box-sizing: border-box;padding: 1px 1px 20px;border: solid 1px #000;}#contents 
.section .grid li::before {content: "";position: absolute;top: 0;right: 0;width: 1px;height: 100%;}#contents 
.section .grid li::after {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 1px;}#contents .section li a {display: block;width: 100%;margin: 0 auto;box-sizing: border-box;}
#contents .section li .name {
	font-size: 13px;
	text-align: center;
	margin-top: 3%;
	line-height: 1.2;
	font-family: "Forum", serif,"vdl-v7mincho", sans-serif;
	font-weight: 500;
	font-style: normal;
}

#contents .section li .name span {
	font-size: 16px;
	font-family:'Noto Sans JP', "Hiragino Sans"
}

#contents 
.section li .data {
	width: 100%;
}

#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;
	font-family: 'Hanken Grotesk', sans-serif;font-weight: 600;
	text-align: center;
}

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

.section .time {
	width: 100%;
	font-size: 28px;
	}
	
#contents .section .grid {width: 100%;}
	
	#contents 
	.section li {padding: 1px 1px 5px;}
	#contents 
	.section li .name {font-size: 9px;	line-height: 1.6;}
	#contents 
	.section li .price {font-size: 5px;}#contents 
	.section li .btn {
		font-size: 5px;
		padding: 10px 0;
	}
}

#contents .section li .name span {
	font-size: 13px;
	font-family:'Noto Sans JP', "Hiragino Sans"
}

#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;width: 100%;}
#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;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;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-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;}
}