@charset "UTF-8";
/* CSS Document */

body{

/*background: url( "img/bg_komono50.png");background-position: top;
background-size: 100%; background-repeat: repeat;*/
color: #330066; margin: 0; padding: 0;

font-family: 'Zen Maru Gothic', sans-serif;
 font-weight: 700;
user-select:none;
-webkit-user-select:none;
-ms-user-select: none;
-moz-user-select:none;
-khtml-user-select:none;
-webkit-user-drag:none;
-khtml-user-drag:none;

  background:#fdf4e5;
}


.clear{ clear: both;}


#ichiran{margin: 0 auto;width: 100%; max-width: 1280px;
 /*background:
 url("img/goods_bg2.jpg") center top no-repeat,
	#fdf3e7; 
	
	background-size:
		1280px 771px;*/}

@media screen and (max-width:767px){
#ichiran{
 /*background:
 url("img/goods_bg2_sp.jpg") left top no-repeat,
	#fdf3e7; 
	
	background-size:
		100% auto;*/}
}


/*strong{/* color: cadetblue; color: cornflowerblue; color: darkcyan;color: lightseagreen; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"}*/

/*ul.goods li:nth-of-type(6n){ clear: left;}*/

.goods-midashi{width: 95%; max-width: 1100px; margin: 0 auto;
	position:relative;
	text-align:center;
	padding:20px 0 40px;
}

.goods-midashi h1 {width: 700px;}
.goods-midashi h1 img.main_title{width: 100%;}
.goods-midashi h1 img.main_title_sp{display: none;}
.goods-midashi p{text-align: center;}

.goods-chara{
	position:absolute!important;
	margin-left: -435px;
	top:50px;
	width:100px;
	height:auto;
	z-index:10;
	animation:yurayura 4s ease-in-out infinite;
}
.goods-fire{
	position:absolute;
	margin-left: 270px;
	top:170px;
	width:50px;
	height:auto;
	z-index:9;
	animation:fuwafuwa 3s ease-in-out infinite;
}
.goods-anime2{display: none;
	position:absolute;
	top:5px;
	margin-left: 150px;
	width:200px;
	height:auto;
	z-index:10;
	transform-origin:center bottom;
	animation:anime_yurayura 6s ease-in-out infinite;
}

@keyframes anime_yurayura{

	0%{
		transform:
			translateX(0px)
			rotate(-1.5deg);
	}

	25%{
		transform:
			translateX(4px)
			rotate(-0.5deg);
	}

	50%{
		transform:
			translateX(8px)
			rotate(1.5deg);
	}

	75%{
		transform:
			translateX(4px)
			rotate(0.5deg);
	}

	100%{
		transform:
			translateX(0px)
			rotate(-1.5deg);
	}
}
@keyframes anime_yurayura_sp{

	0%{
		transform: translateX(0) rotate(4deg);
	}

	50%{
		transform: translateX(6px) rotate(6deg);
	}

	100%{
		transform: translateX(0) rotate(4deg);
	}

}

@media screen and (max-width:900px){
.goods-midashi h1 {width: 650px;}
.goods-chara{margin-left: -370px;}

}

@media screen and (max-width:767px){
.goods-midashi h1 {width: 80%;}

.goods-midashi h1 img.main_title{display: none;}
.goods-midashi h1 img.main_title_sp{display:inline-block; width: 450px;}

.goods-chara{top:45px;margin-left: -260px;width:100px;}
.goods-fire{top:220px;width:70px;margin-left: 120px;}
.goods-anime2{top:10px;margin-left: 70px;}
}

@media screen and (max-width:600px){
.goods-chara{top:45px;margin-left: inherit; left: 2%;}
.goods-fire{top:20%;width:60px;margin-left:inherit;left:80%}
.goods-anime2{top:1%;margin-left:inherit;left: 50%;}

}

@media screen and (max-width:500px){
.goods-midashi h1 {width: 85%;}
.goods-chara{width:70px; top:85px;left: 0.5%;}
.goods-fire{top:20%;width:50px;left:75%}
.goods-anime2{width:170px;animation: anime_yurayura_sp 6s ease-in-out infinite;}


}

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

@keyframes yurayura{

	0%{
		transform:
		translateY(0px)
		rotate(-2deg);
	}

	50%{
		transform:
		translateY(-12px)
		rotate(2deg);
	}

	100%{
		transform:
		translateY(0px)
		rotate(-2deg);
	}
}


@keyframes fuwafuwa{

	0%{
		transform:
		translateY(0px)
		scale(1);
	}

	50%{
		transform:
		translateY(-8px)
		scale(1.05);
	}

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

.goods-info{

	max-width:600px;
	margin:50px auto;
	padding:25px 45px 40px;

	display:grid;
	grid-template-columns:46% 54%;
	column-gap:30px;
	align-items:start;

	background:rgba(255,255,255,.35);
	backdrop-filter:blur(2px);

	border-radius:28px;color: #330066;
	
	box-shadow:
		0 10px 30px rgba(51,0,102,.08);
	border:1px solid rgba(255,255,255,.45);
}

.goods-info h2{
	font-size:24px;
	font-weight:700;
	text-align:center;
	margin-bottom:24px; margin-left: -20px;}
	
.goods-info h2 img{ width: 50px; margin-bottom: -7px; margin-right: 5px;}

.shop,
.limit{
	width:100%;
}

.shop-info h2{margin-left: -50px; letter-spacing: -0.05em;}
.shop-list{
	list-style:none;
	padding:0;
	margin:0;
}

.shop-list li{

	display:flex;
	align-items:center;
	gap:20px;
	margin-bottom:10px;
	font-size:18px;
	font-weight:700;}

.shop-list img{

	width:35px;
	flex-shrink:0;
}

.goods-limit{
padding-left:10px;
	text-align:center;
	border-left:4px dotted #330066;
}

.limit-main{

	font-size:20px;
	font-weight:700;
	line-height:1.8;
}

.limit-main strong{

	font-size:22px;color: #330066;
	font-weight:700; 
}

.goods-limit hr{

	width:70%;
	margin:28px auto;

	border:none;
	border-top:2px solid rgba(120,80,180,.25);
}

.limit-sub{

	font-size:16px;
	line-height:1.5;
}

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


.goods-info{
max-width:inherit; width: 350px;
	grid-template-columns:1fr;
	gap:35px;

	padding:10px 25px 30px;
}

.goods-limit{

	border-left:none;
	border-top:3px dotted #e6b8d8;

	padding-left:0;
	padding-top:35px;
}

.goods-info h2{

	font-size:26px;
}

.shop-list li{font-size:20px;gap:15px;margin-left: 35px;}
.shop-list img{	width:34px;}
.limit-main{font-size:24px;}

.limit-main strong{font-size:26px;}
.limit-sub{font-size:16px;}

}

@media screen and (max-width:600px){
.goods-info{width: 290px; }

.goods-info h2{font-size:22px;}
.shop-list li{margin-left: 12px;font-size:18px;}
.shop-list img{	width:30px;}

.goods-limit{padding-top:0px;}

.limit-main{font-size:19px;
	line-height:1.6;}
.limit-main strong{	font-size:19px;}

}


#goods_obake,
#goods_anime,
#goods_others{
  max-width:1100px; position: relative;
  margin:0 auto;
}


#goods_obake{ color: #571884;}
#goods_anime{ color: #970a46}
#goods_others{ color: #08554e}

.obake-chara{
	position:absolute;
	width:100px;

	animation:obake_yurayura 5s ease-in-out infinite;
	transform-origin:center bottom;
}

.midashi{width: 600px;}
.midashi_pc{width: 600px;}
.midashi_sp{display: none;}

.obake-chara:nth-child(1){animation-delay:0s; margin-left: 170px;margin-top: -30px;}
.obake-chara:nth-child(2){animation-delay:1.2s;margin-left: 230px;margin-top: 30px;}
.obake-chara:nth-child(3){animation-delay:2.4s;margin-left: 72%; width: 92.5px;}

@media screen and (max-width:1150px){
.obake-chara:nth-child(1){margin-left: 150px;}
.obake-chara:nth-child(2){margin-left: 190px;}
.obake-chara:nth-child(3){margin-left: 75%;}
}

@media screen and (max-width:1050px){
.obake-chara:nth-child(1){margin-left: 100px;}
.obake-chara:nth-child(2){margin-left: 120px;}
.obake-chara:nth-child(3){margin-left: 80%;}
}

@media screen and (max-width:900px){
.obake-chara:nth-child(1){margin-left: 30px;}
.obake-chara:nth-child(2){margin-left: 60px;}
.obake-chara:nth-child(3){margin-left: 80%;}
}

@media screen and (max-width:767px){
.midashi_pc{display: none;}
.midashi_sp{display: inline-block;width: 350px;}
.obake-chara:nth-child(1){left: 9%;margin-top: -20px;}
.obake-chara:nth-child(2){margin-left: 16%; margin-top: 140px;}
.obake-chara:nth-child(3){margin-left: 75%;}
}

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

}

@media screen and (max-width:600px){
.midashi_sp{width: 300px; }
.obake-chara:nth-child(1){left: 0.5%;}
.obake-chara:nth-child(2){margin-left:10%;margin-top: 120px;}
.obake-chara:nth-child(3){margin-left: 70%;}
}
@media screen and (max-width:500px){
.midashi_sp{width: 250px;}
.obake-chara:nth-child(1){left: inherit;margin-left: -5px;}
.obake-chara:nth-child(2){margin-left: 1%;margin-top: 100px;}
.obake-chara:nth-child(3){margin-left: 73%;}
}



@keyframes obake_yurayura{

	0%{
		transform:
			translateY(0)
			rotate(-2deg);
	}

	25%{
		transform:
			translateY(-8px)
			rotate(1deg);
	}

	50%{
		transform:
			translateY(-15px)
			rotate(2deg);
	}

	75%{
		transform:
			translateY(-8px)
			rotate(-1deg);
	}

	100%{
		transform:
			translateY(0)
			rotate(-2deg);
	}
}

.anime-chara{
	position:absolute;
	width:150px; margin-left: 150px; margin-top: -30px;
	transform-origin:center bottom;
	animation:anime_pyon 2.8s ease-in-out infinite;
}

@media screen and (max-width:1150px){
.anime-chara{margin-left: 100px;}
}

@media screen and (max-width:1000px){
.anime-chara{margin-left: 70px;}
}

@media screen and (max-width:900px){
.anime-chara{margin-left: 30px;}
}

@media screen and (max-width:767px){
.anime-chara{margin-left:10%;}
}

@media screen and (max-width:700px){
.anime-chara{margin-left:7%;}
}

@media screen and (max-width:600px){
.anime-chara{margin-left:7%;width:140px;margin-top: -10px;}
}

@media screen and (max-width:500px){
#goods_anime .midashi_sp{margin-left: 20px;}
.anime-chara{margin-left:0%;width:120px;}

}


@keyframes anime_pyon{

	0%,100%{
		transform:
			translateY(0)
			rotate(-1deg);
	}

	20%{
		transform:
			translateY(-10px)
			rotate(1deg);
	}

	40%{
		transform:
			translateY(0)
			rotate(-1deg);
	}

	60%{
		transform:
			translateY(-6px)
			rotate(1deg);
	}

	80%{
		transform:
			translateY(0)
			rotate(-1deg);
	}
}

hr{  border: none; border-bottom: 5px dotted; margin: 40px 20px 50px;}
hr.obake{ border-color: #571884 ;}
hr.anime{ border-color: #502112 ;}
hr.others{ border-color: #08554e ;}

h1, h2{text-align: center; margin: 30px auto; }




.g-list{
  display:grid;
  grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

  gap:40px 20px;

  margin:0;
  padding:0;
  list-style:none;
}

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

	.g-list{
		grid-template-columns:
			repeat(2,1fr);
	}

}

#goods_obake .g-list{margin-top: 80px;}
#goods_anime .g-list{margin-top: 60px;}

.g-list img{
  width:100%;
  height:auto;
}


.g-list li{text-align: center;}
#goods_obake .g-list li{padding-top: 35px;}

.g-list li p:nth-of-type(1){line-height: 1.3; margin: 10px auto 4px;}
.g-list li p:nth-of-type(1) span{display: inline-block; margin-top:3px; font-size: 12px;}
.g-list li p:nth-of-type(2){ font-size: 17px; margin: 4px auto 0; letter-spacing: 0.05em;}


.four-tenpo,
.three-tenpo,
.two-tenpo{
  background-repeat: no-repeat; background-size: 150px 34px;
  background-position: left top;}
  
.four-tenpo{background-image:url(img/4ten.png);}
.three-tenpo{background-image:url(img/3ten.png);}
.two-tenpo{background-image:url(img/2ten.png);}

.break-row{
	grid-column:1;
}

/* フッター */

/*
.footer{text-align: center; margin: 100px auto 0px; 
  background:url("img/goods_footer_bg.jpg") center bottom no-repeat;
  background-size:1280px 313px; height:293px; padding-top: 130px;
  }

.footer img{width: 250px; margin: 30px auto;}
.footer p{ text-align: center; color: #454545; font-weight: bold;}

@media screen and (max-width: 768px){
.footer{background:url("img/goods_footer_bg_sp.jpg") center bottom no-repeat;
  background-size:120% auto; }
}*/

/* フッター */
.footer{
    background:
        url("img/goods_footer_bg.jpg") center top no-repeat,
        url("../img26/gray.png") left bottom repeat-x;

    background-size:
        1280px 313px,
        auto 26px;

    height:313px;
}

.footer p{ text-align: center; padding-top:140px; color: #454545; font-weight: bold!important;}

@media screen and (max-width: 768px){
.footer{background:url("img/goods_footer_bg_sp.jpg") center bottom no-repeat;
  background-size:100% auto; height: 313px; }
}
@media screen and (max-width: 600px){
.footer{  background-size:100% auto; height: 313px; }
.footer p{padding-top:185px;}

}


.undertext{text-align: center; color: #000; margin: 50px auto 0;}

.home-link{

	text-align:center;
	margin-top:20px;

}

.gohome{

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

	margin:60px auto 0px;
	padding:14px 32px;

	background:#7054d8;
	background:linear-gradient(
		180deg,
		#8b74e8 0%,
		#7054d8 100%
	);

	color:#fff;
	font-size:18px;
	font-weight:700;
	letter-spacing:.05em;
	text-decoration:none;

	border-radius:999px;

	box-shadow:
		0 8px 20px rgba(51,0,102,.15);

	transition:
		transform .25s ease,
		box-shadow .25s ease,
		background .25s ease;
}

.gohome:hover{

	transform:translateY(-4px);

	box-shadow:
		0 14px 30px rgba(51,0,102,.22);

	background:linear-gradient(
		180deg,
		#9683ed 0%,
		#7a60e0 100%
	);
transform:
		translateY(-4px)
		scale(1.03);
}


@media screen and (max-width: 1150px) {
#goods_obake,
#goods_anime,
#goods_others{
  max-width:95%;}
  }

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

}

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



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


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

}

/* animate delay*/
.animate__delay-01s {animation-delay: calc(var(--animate-delay) * 0.1);}
.animate__delay-02s {animation-delay: calc(var(--animate-delay) * 0.2);}
.animate__delay-03s {animation-delay: calc(var(--animate-delay) * 0.3);}
.animate__delay-04s {animation-delay: calc(var(--animate-delay) * 0.4);}
.animate__delay-05s {animation-delay: calc(var(--animate-delay) * 0.5);}
.animate__delay-06s {animation-delay: calc(var(--animate-delay) * 0.6);}
.animate__delay-07s {animation-delay: calc(var(--animate-delay) * 0.7);}
.animate__delay-08s {animation-delay: calc(var(--animate-delay) * 0.8);}
.animate__delay-09s {animation-delay: calc(var(--animate-delay) * 0.9);}
.animate__delay-10s {animation-delay: calc(var(--animate-delay) * 1.0);}
.animate__delay-15s {animation-delay: calc(var(--animate-delay) * 1.5);}