@charset "utf-8";


/**************************************************50
 * point
 **************************************************/
#point{
	color: #301A00;
	text-align: center;
}
#point h2{
}
#point ul{
}
#point ul > li{
	display: inline-block;
	vertical-align: top;
}
#point ul > li picture{
	position: relative;
	z-index: 2;
}
#point ul > li picture img{
}
#point ul > li div{
	position: relative;
	z-index: 1;
}
#point ul > li div:before{
	background-color: #FFAF38;
	content: "";
	border-radius: 100%;
	display: block;
	padding-top: 100%;
}
#point ul > li div h3{
	line-height: 1.5;
	position: absolute;
	top: -webkit-calc(25% + 1.5em);
	top: calc(25% + 1.5em);
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	z-index: 3;
}
#point ul > li div p{
	line-height: 1.6;
	position: absolute;
	top: -webkit-calc(48% + 4.285714285714286em);
	top: calc(48% + 4.285714285714286em);
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	z-index: 3;
}
@media screen and (max-width:319px){
	#point ul > li div p{
		font-size: 50%;
	}
}
@media screen and (min-width:320px) and (max-width:359px){
	#point ul > li div p{
		font-size: 60%;
	}
}
@media screen and (min-width:360px) and (max-width:413px){
	#point ul > li div p{
		font-size: 65%;
	}
}
@media screen and (min-width:414px){
	#point ul > li div p{
		font-size: 70%;
	}
}
@media screen and (max-width:639px){
	#point ul > li{
		width: 93.75%;
	}
	#point ul > li picture{
		text-align: left;
	}
	#point ul > li picture img{
		width: 75%;
	}
	#point ul > li div{
		margin-top: -17.5%;
		margin-left: auto;
		width: 75%;
	}
}
@media screen and (min-width:640px){
	#point ul > li{
		width: 300px;
	}
	#point ul > li div{
		margin-top: -25%;
	}
	#point ul > li picture img{
		width: 100%;
	}
}
@media screen and (max-width:767px){
	#point{
		padding-top: 6.25%;
		padding-bottom: 6.25%;
	}
	#point h2{
	}
	#point ul{
	}
	#point ul > li{
		margin: 3.125% 1.5625% 0;
	}
	#point ul > li div{
		font-size: 112.5%;
	}
	#point ul > li div h3{
	}
	#point ul > li div p{
	}
}
@media screen and (min-width:768px){
	#point{
		padding-top: 100px;
		padding-bottom: 100px;
	}
	#point h2{
	}
	#point ul{
	}
	#point ul > li{
		margin-top: 50px;
	}
	#point ul > li:not(:nth-child(3n+1)){
		margin-left: 30px;
	}
	#point ul > li div{
		font-size: 125%;
	}
	#point ul > li div h3{
	}
	#point ul > li div p{
	}
}
@media screen and (min-width:768px) and (max-width:1279px){
	#point ul > li{
		width: 290px;
	}
}
@media screen and (min-width:1280px){
	#point ul > li{
		width: 320px;
	}
}


/**************************************************50
 * order
 **************************************************/
#orders{
	background-color: #FFDA82;
	color: #301A00;
}
@media screen and (max-width:767px){
	#orders{
	}
}
@media screen and (min-width:768px){
	#orders{
	}
}


/**************************************************50
 * party
 **************************************************/
#party{
	text-align: center;
}
#party h2{
}
#party ul{
}
#party ul > li{
	display: inline-block;
	position: relative;
}
#party ul > li#party_boys{
	background-color: #719CAD;
}
#party ul > li#party_girls{
	background-color: #E59CAD;
}
#party ul > li:before{
	content: "";
	display: block;
	padding-top: 70%;
}
#party ul > li h3{
	color: #FFFFFF;
	position: absolute;
	top: 50%;
	left: 5%;
	-ms-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
#party ul > li picture{
	position: absolute;
	top: 0;
}
#party ul > li picture:before{
	content: "";
	display: block;
	padding-top: 70%;
}
#party ul > li picture img{
	position: absolute;
	z-index: 2;
}
#party ul > li picture img[src*="boys_010"]{
	top: -20%;
	left: 0;
	width: 55%;
}
#party ul > li picture img[src*="boys_020"]{
	top: 50%;
	right: 0;
	-ms-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	width: 62.5%;
}
#party ul > li picture img[src*="boys_030"]{
	bottom: -20%;
	left: 0;
	width: 55%;
}
#party ul > li picture img[src*="girls_010"]{
	top: -22%;
	left: 0;
	width: 56.67%;
}
#party ul > li picture img[src*="girls_020"]{
	top: 48%;
	right: 0;
	-ms-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	width: 60%;
}
#party ul > li picture img[src*="girls_030"]{
	bottom: -18%;
	left: 0;
	width: 45.45%;
}
#party ul > li > div{
	color: #FFFFFF;
	position: absolute;
	right: -1.5%;
	bottom: -25%;
	width: 41.67%;
}
#party ul > li > div:before{
	background-position: center, center;
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	display: block;
	padding-top: 43.9%;
}
.lazyloaded #party ul > li > div:before{
	background-image: url("https://goji-goji.net/images/user/party/back.svg");
}
#party ul > li > div p{
	display: inline-block;
	line-height: 1.2;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: left;
	z-index: 1;
}
#party ul > li > div p span{
	display: block;
}
#party ul > li > div p strong{
	margin-right: 0.2em;
}
#party ul > li > div p b{
}
@media screen and (max-width:767px){
	#party{
		margin-bottom: 6.25%;
	}
	#party h2{
	}
	#party ul{
		padding-top: 15.625%;
	}
	#party ul > li{
		border-radius: 20px;
		margin-bottom: 34.375%;
		margin-left: 1.5625%;
		margin-right: 1.5625%;
		width: 93.75%;
	}
	#party ul > li:last-child{
		margin-bottom: 12.5%;
	}
	#party ul > li h3{
		font-size: 125%;
	}
	#party ul > li picture{
		left: 50%;
		-ms-transform: translate(-50%, 0);
		-webkit-transform: translate(-50%, 0);
		transform: translate(-50%, 0);
		width: 104%;
	}
	#party ul > li picture img{
	}
	#party ul > li > div{
		line-height: 1;
	}
	#party ul > li > div p{
		margin-left: 5%;
		width: 5.5em;
	}
	#party ul > li > div p span{
		font-size: 62.5%;
		margin-bottom: -0.125em;
	}
	#party ul > li > div p strong{
		font-size: 137.5%;
	}
	#party ul > li > div p b{
		font-size: 112.5%;
	}
}
@media screen and (min-width:768px){
	#party{
		margin-bottom: 100px;
	}
	#party h2{
	}
	#party ul{
	}
	#party ul > li{
		margin-top: -webkit-calc(50px + 6%);
		margin-top: calc(50px + 6%);
		margin-bottom: 8.25%;
		width: 47%;
	}
	#party ul > li:nth-child(odd){
		border-radius: 0 40px 40px 0;
	}
	#party ul > li:nth-child(even){
		border-radius: 40px 0 0 40px;
		margin-left: 6%;
	}
	#party ul > li h3{
		font-size: 150%;
	}
	#party ul > li picture{
		width: 100%;
	}
	#party ul > li#party_boys picture{
		right: -6%;
	}
	#party ul > li#party_girls picture{
		left: -6%;
	}
	#party ul > li picture img{
	}
	#party ul > li > div{
		line-height: 1.2;
	}
	#party ul > li > div p{
	}
	#party ul > li > div p span{
		font-size: 75%;
	}
	#party ul > li > div p strong{
		font-size: 200%;
	}
	#party ul > li > div p b{
		font-size: 150%;
	}
}


/**************************************************50
 * recommended
 **************************************************/
#recommended{
	text-align: center;
}
#recommended h2{
}
#recommends{
}
#recommends:not(.slick-slider){
}
#recommends .recommended_list{
	background-color: #FFFFFF;
	display: inline-block;
	line-height: 1.5;
	overflow: hidden;
	padding-bottom: 0.5em;
	position: relative;
	vertical-align: top;
}
#recommends:not(.slick-slider) > li:not(.slick-slide){
}
#recommends.slick-slider li.slick-slide{
	margin: 0 0.5em;
}
#recommends .recommended_list picture{
	margin-bottom: 0.5em;
}
#recommends .recommended_list picture img{
	width: 100%
}
#recommends .recommended_list h3{
	color: #603813;
	padding: 0 0.5em;
}
#recommends .recommended_list [class^="shop_label_"]{
	margin: 0 0.25em 0.25em;
}
#recommends .recommended_list p{
	padding: 0 0.5em;
}
#recommends .recommended_list p:not(.recommended_price){
}
#recommends .recommended_list .recommended_price{
	margin-top: 0.125em;
}
#recommends .slick-prev:before,
#recommends .slick-next:before{
	color: #B3272D;
}
#recommends .slick-prev{
	left: 0;
	-ms-transform: translate(-100%,-50%);
	-webkit-transform: translate(-100%,-50%);
	transform: translate(-100%,-50%);
}
#recommends .slick-next{
	right: 0;
	-ms-transform: translate(100%,-50%);
	-webkit-transform: translate(100%,-50%);
	transform: translate(100%,-50%);
}
#recommends .slick-dots{
	position: static;
}
#recommends .slick-dots li.slick-active button:before{
	background-color: #B3272D;
}
@media screen and (max-width:479px){
	#recommends:not(.slick-slider) > li:not(.slick-slide){
		width: 87.5%;
	}
}
@media screen and (min-width:480px) and (max-width:767px){
	#recommends:not(.slick-slider) > li:not(.slick-slide){
		margin-left: 1.5625%;
		margin-right: 1.5625%;
		width: -webkit-calc((100%  - (3.125% * 3)) / 2);
		width: calc((100%  - (3.125% * 3)) / 2);
	}
}
@media screen and (max-width:767px){
	#recommended{
	}
	#recommended h2{
		margin-bottom: 3.125%;
	}
	#recommends{
	}
	#recommends:not(.slick-slider){
	}
	#recommends.slick-slider{
		margin-bottom: 3.125%;
	}
	#recommends .recommended_list{
		border-radius: 10px;
	}
	#recommends:not(.slick-slider) > li:not(.slick-slide){
		margin-bottom: 3.125%;
	}
	#recommends .recommended_list picture{
	}
	#recommends .recommended_list picture img{
	}
	#recommends .recommended_list h3{
	}
	#recommends .recommended_list [class^="shop_label_"]{
		font-size: 62.5%;
	}
	#recommends .recommended_list p{
	}
	#recommends .recommended_list p:not(.recommended_price){
		font-size: 62.5%;
	}
	#recommends .recommended_list .recommended_price{
		font-size: 112.5%;
	}
	#recommends .slick-prev,
	#recommends .slick-next{
		height: 32px;
		width: 32px;
	}
	#recommends .slick-prev:before,
	#recommends .slick-next:before{
		font-size: 32px;
	}
}
@media screen and (min-width:768px){
	#recommended{
	}
	#recommended h2{
		margin-bottom: 50px;
	}
	#recommends{
	}
	#recommends:not(.slick-slider){
		margin-left: auto;
		margin-right: auto;
	}
	#recommends.slick-slider{
		margin-bottom: 50px;
	}
	#recommends .recommended_list{
		border-radius: 25px;
	}
	#recommends:not(.slick-slider) > li:not(.slick-slide){
		margin-bottom: 50px;
	}
	#recommends .recommended_list picture{
	}
	#recommends .recommended_list picture img{
	}
	#recommends .recommended_list h3{
	}
	#recommends .recommended_list [class^="shop_label_"]{
		font-size: 75%;
	}
	#recommends .recommended_list p{
	}
	#recommends .recommended_list p:not(.recommended_price){
		font-size: 75%;
	}
	#recommends .recommended_list .recommended_price{
		font-size: 125%;
	}
	#recommends .slick-prev,
	#recommends .slick-next{
		height: 48px;
		width: 48px;
	}
	#recommends .slick-prev:before,
	#recommends .slick-next:before{
		font-size: 48px;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#recommends:not(.slick-slider){
		width: 728px;
	}
	#recommends:not(.slick-slider) > li:not(.slick-slide){
		width: 232px;
	}
	#recommends:not(.slick-slider) > li:not(.slick-slide):not(:nth-child(3n+1)){
		margin-left: 16px;
	}
}
@media screen and (min-width:940px) and (max-width:1023px){
	#recommends:not(.slick-slider){
		width: 890px;
	}
	#recommends:not(.slick-slider) > li:not(.slick-slide){
		width: 276px;
	}
	#recommends:not(.slick-slider) > li:not(.slick-slide):not(:nth-child(3n+1)){
		margin-left: 31px;
	}
}
@media screen and (min-width:1024px) and (max-width:1199px){
	#recommends:not(.slick-slider){
		width: 964px;
	}
	#recommends:not(.slick-slider) > li:not(.slick-slide){
		width: 300px;
	}
	#recommends:not(.slick-slider) > li:not(.slick-slide):not(:nth-child(3n+1)){
		margin-left: 32px;
	}
}
@media screen and (min-width:1200px) and (max-width:1279px){
	#recommends:not(.slick-slider){
		width: 1150px;
	}
	#recommends:not(.slick-slider) > li:not(.slick-slide){
		width: 268px;
	}
	#recommends:not(.slick-slider) > li:not(.slick-slide):not(:nth-child(4n+1)){
		margin-left: 26px;
	}
}
@media screen and (min-width:1280px){
	#recommends:not(.slick-slider) > li:not(.slick-slide){
		margin-left: 16px;
		width: 268px;
	}
	#recommends:not(.slick-slider) > li:not(.slick-slide):not(:nth-child(4n+1)){
		margin-left: 32px;
	}
}


/**************************************************50
 * news
 **************************************************/
#news{
	text-align: center;
}
@media screen and (max-width:767px){
	#news{
		margin-bottom: 6.25%;
	}
}
@media screen and (min-width:768px){
	#news{
		margin-bottom: 100px;
	}
}


/**************************************************50
 * shop
 **************************************************/
#shop{
	text-align: center;
}
.shop_list > li h2,
.shop_list > li h3{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	cursor: pointer;
	position: relative;
	transition: opacity 0.2s ease-out 0s;
}
.shop_list > li h2:hover,
.shop_list > li h3:hover{
	opacity: 0.7;
}
.shop_list > li h2:after,
.shop_list > li h3:after{
	font-family: "Material Design Icons";
	font-size: 150%;
	line-height: 1;
	position: absolute;
	top: 50%;
	right: 0;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.shop_list > li h2:not(.active):after,
.shop_list > li h3:not(.active):after{
	content: "\F0417";
}
.shop_list > li h2.active:after,
.shop_list > li h3.active:after{
	content: "\F0376";
}
.shop_list > li figure{
	display: none;
}
@media screen and (max-width:767px){
	#shop{
		margin-bottom: 6.25%;
	}
	.shop_list > li h2:not(.active),
	.shop_list > li h3:not(.active){
		border-radius: 7px;
	}
	.shop_list > li h2.active,
	.shop_list > li h3.active{
		border-radius: 7px 7px 0 0;
	}
}
@media screen and (min-width:768px){
	#shop{
		margin-bottom: 100px;
	}
	.shop_list > li h2:not(.active),
	.shop_list > li h3:not(.active){
		border-radius: 15px;
	}
	.shop_list > li h2.active,
	.shop_list > li h3.active{
		border-radius: 15px 15px 0 0;
	}
}