@charset "utf-8";

body{
	font-family: "Noto Sans JP", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	-webkit-text-size-adjust: 100%;
}

/* PC用 */
@media screen and (min-width:768px){
	#wrap{
		position: relative;
		z-index: 1;
		width: 100%;
		background: url("../img/bgi_2.gif") center center no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
	}
	
	#wrap::before{
		content: "";
		display: block;
		background: url("../img/main_top_2.png") center center no-repeat;
		background-size: contain;
		aspect-ratio:2039 / 189;
		width: 80%;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -40%;
		z-index: 2;
	}
	
	#wrap::after{
		content: "";
		display: block;
		background: url("../img/main_bottom_2.png") center center no-repeat;
		background-size: contain;
		aspect-ratio: 2299 / 665;
		width: 60%;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -30%;
		z-index: 2;
	}
	
	.mainTtl{
		text-align: center;
		display: block;
		padding: 100px 0;
	}
	.mainTtl img{
		width: 100%;
		max-width: 412px;
	}

	.info_txt {
		font-size: 30px;
		text-align: center;
		font-weight: bold;
		margin: 100px 0px;
	}

	.anim-box.popup.is-animated{
		display: block;
		animation: popup 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: .5s;
		opacity: 0;
	}

	.line1{
		font-size: 42px;
		animation: fly ease-in 1s 1s both;
		word-break: keep-all;
		text-shadow: 0 0 10px #000000;
	}
	.line2{
		font-size: 62px;
		animation: fly ease-in 1s 1.1s both;
		word-break: keep-all;
		text-shadow: 0 0 10px #000000;
	}
	.line2 small{
		display: inline-block;
		font-size: 0.5em;
		margin-right: 0.2em;
	}
	.overview{
		font-size: 18px;
		font-weight: 500;
		text-align: center;
		color: #fff;
		line-height: 2;
		margin-top: 60px;
		animation: show 1s 1s both;
		text-shadow: 0 0 10px #000000;
	}
	.overview br.sp{
		display: none;
	}

	address{
		background: #e5e5e5;
		padding: 60px 0;
	}
	address h2{
		font-size: 18px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 0.5em;
	}
	address p{
		font-size: 15px;
		text-align: center;
	}
	address ul{
		display: flex;
		justify-content: center;
		margin-top: 50px;
	}
	address li{
		width: 36px;
		margin: 0 10px;
	}
	address img{
		width: 100%;
		height: 100%;
	}
	.shoplink{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000;
		color: #ffffff;
		border-radius: 100vmax;
		height: 52px;
		width: 280px;
		font-size: 15px;
		transition: ease 200ms;
		text-decoration: none;
	}
	.shoplink i{
		margin-left: 5px;
	}
	.shoplink:hover{
		opacity: 0.6;
	}

	address .shoplink{
		margin: 50px auto 0;
	}

	/* セール・キャンペーン
	-------------------------------------------------- */
	#sale,#campaign{
		margin-top: 100px;
	}
	
	.secInner{
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}
	
	.secInner h2{
		font-size: 32px;
		text-align: center;
		font-weight: 600;
	}
	
	.date{
		font-size: 26px;
		font-weight: 600;
		text-align: center;
		margin: 40px 0 0;
	}
	
	.border{
		padding-bottom: 100px;
		border-bottom: 1px dotted #cccccc;
	}
	
	.border2{
		border-top: 1px dotted #cccccc;
		padding-top: 100px;
	}
	
	#sale .secInner{
		border-top: 1px dotted #cccccc;
		padding-top: 100px;
	}
	
	#sale ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 50px;
	}
	#sale li{
		width: 48%;
		margin-top: 50px;
	}
	#sale li a{
		display: block;
	}
	#sale li img{
		width: 100%;
	}
	#sale li a:nth-child(2){
		background: #000000;
		color: #ffffff;
		border-radius: 100vmax;
		line-height: 50px;
		text-align: center;
		width: 280px;
		font-size: 15px;
		transition: ease 200ms;
		margin: 20px auto 0;
		text-decoration: none;
	}
	#sale li a:hover{
		opacity: 0.6;
	}
	#campaign ul{
		margin-top: 100px;
	}
	#campaign li{
		display: flex;
		justify-content: space-between;
		margin-top: 60px;
	}
	#campaign .cpImg,
	#campaign .detail{
		width: 100%;
		max-width: 580px;
	}
	#campaign .cpImg img{
		width: 100%;
	}
	#campaign .detail h3{
		font-weight: 600;
		font-size: 22px;
		line-height: 1.6;
		margin-bottom: 0.5em;
	}
	#campaign .detail .date{
		margin-bottom: 40px;
		font-weight: 400;
	}
	#campaign .detail .desc{
		line-height: 1.8;
		margin-bottom: 40px;
		font-weight: 400;
		font-size: 15px;
	}

	/* 店舗情報
	-------------------------------------------------- */
	#shop{
		background: #f3f3f3;
		margin-top: 100px;
		padding: 100px 0;
	}
	.shopinfo{
		width: 100%;
		max-width: 800px;
		margin: 100px auto 0;
	}
	.shopinfo dl{
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #cccccc;
	}
	.shopinfo dl:last-child{
		border-bottom: none;
	}
	.shopinfo dt{
		width: 180px;
		padding: 15px 0;
		text-align: center;
		font-weight: 600;
		font-size: 16px;
	}
	.shopinfo dd{
		width: calc(100% - 200px);
		padding: 15px 0;
		font-size: 16px;
		font-weight: normal;
		line-height: 1.8em;
	}
	#shop .shoplink{
		margin: 100px auto 0;
	}
}

/* SP用 */
@media screen and (max-width:767px){
	#wrap{
		position: relative;
		z-index: 1;
		width: 100%;
		background: url("../img/bgi_2.gif") center center no-repeat;
		background-size: cover;
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
	}
	
	#wrap::before{
		content: "";
		display: block;
		background: url("../img/main_top_2.png") center center no-repeat;
		background-size: contain;
		aspect-ratio: 2039 / 280;
		width: 100%;
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -50%;
		z-index: 2;
	}
	
	#wrap::after{
		content: "";
		display: block;
		background: url("../img/main_bottom_2.png") center center no-repeat;
		background-size: contain;
		aspect-ratio: 2299 / 665;
		width: 90%;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -45%;
		z-index: 2;
	}

	.mainTtl{
		display: block;
		padding: 40px 0;
		text-align: center;
	}
	.mainTtl img{
		width: 60%;
		max-width: 500px;
	}
	
	.info_txt {
		font-size: 24px;
		text-align: center;
		font-weight: bold;
		margin: 100px 0px;
	}

	.anim-box.popup.is-animated{
		display: block;
		animation: popup 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: .5s;
		opacity: 0;
	}
	
	.line1{
		font-size: 5vw;
		animation: fly ease-in 1s 1s both;
		word-break: keep-all;
		text-shadow: 0 0 10px #000000;
	}
	.line2{
		font-size: 7vw;
		animation: fly ease-in 1s 1.1s both;
		word-break: keep-all;
		text-shadow: 0 0 10px #000000;
	}
	.line2 small{
		display: inline-block;
		font-size: 0.5em;
		margin-right: 0.2em;
	}
	.overview{
		margin-top: 5vw;
		font-size: 14px;
		font-weight: 500;
		padding-bottom: 15vw;
		text-align: center;
		color: #ffffff;
		line-height: 2;
		animation: show 1s 1s both;
		text-shadow: 0 0 10px #000000;
		word-break: keep-all;
	}
	.overview br.sp{
		display: none;
	}

	address{
		background: #e5e5e5;
		padding: 60px 0;
	}
	address h2{
		font-size: 18px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 0.5em;
	}
	address p{
		font-size: 15px;
		text-align: center;
	}
	address ul{
		display: flex;
		justify-content: center;
		margin-top: 5vw;
	}
	address li{
		width: 36px;
		margin: 0 10px;
	}
	address img{
		width: 100%;
		height: 100%;
	}
	.shoplink{
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #000;
		color: #ffffff;
		border-radius: 100vmax;
		height: 52px;
		width: 280px;
		font-size: 15px;
		transition: ease 200ms;
		text-decoration: none;
		margin: 5vw auto 0;
	}
	.shoplink i{
		margin-left: 5px;
	}
	.shoplink:hover{
		opacity: 0.6;
	}

	/* セール・キャンペーン
	-------------------------------------------------- */
	#sale{
		margin-top: 60px;
	}
	
	#campaign{
		margin-top: 60px;
	}
	
	.secInner{
		width: 90%;
		max-width: 1200px;
		margin: 0 auto;
	}
	
	#sale .secInner{
		border-top: 1px dotted #cccccc;
		padding-top: 60px;
	}
	
	.secInner h2{
		font-size: 24px;
		text-align: center;
		font-weight: 600;
	}
	.date{
		display: block;
		width: 90%;
		font-size: 5vw;
		font-weight: 600;
		text-align: center;
		margin: 40px auto 0;
	}
	.border{
		padding-bottom: 40px;
		border-bottom: 1px dotted #cccccc;
	}
	
	.border2{
		border-top: 1px dotted #cccccc;
		padding-top: 55px;
	}
	
	#sale ul{
		margin-top: 10vw;
	}
	#sale li{
		width: 90%;
		margin: 40px auto 0;
	}
	#sale li a{
		display: block;
	}
	#sale li img{
		width: 100%;
	}
	#sale li a:nth-child(2){
		background: #000000;
		color: #ffffff;
		border-radius: 100vmax;
		line-height: 50px;
		text-align: center;
		width: 280px;
		font-size: 14px;
		transition: ease 200ms;
		margin: 20px auto 0;
		text-decoration: none;
	}
	#sale li a:hover{
		opacity: 0.6;
	}
	#campaign ul{
		margin-top: 10vw;
	}
	#campaign li{
		width: 100%;
		margin: 5vw auto 10vw;
	}
	#campaign .cpImg,
	#campaign .detail{
		width: 100%;
	}
	#campaign .cpImg img{
		width: 100%;
	}
	#campaign .detail h3{
		font-weight: 600;
		font-size: 16px;
		line-height: 1.6;
		margin: 5vw 0;
	}
	#campaign .detail .date{
		margin-bottom: 5vw;
		font-weight: 400;
		font-size: 14px;
	}
	#campaign .detail .desc{
		line-height: 2;
		font-weight: 400;
		font-size: 14px;
	}

	/* 店舗情報
	-------------------------------------------------- */
	#shop{
		background: #f3f3f3;
		margin-top: 10vw;
		padding: 10vw 0;
	}
	.shopinfo{
		width: 100%;
		max-width: 800px;
		margin: 10vw auto 0;
	}
	.shopinfo dl{
		display: block;
		border-bottom: 1px solid #cccccc;
		margin-bottom: 3vw
	}
	.shopinfo dt{
		box-sizing: border-box;
		width: 100%;
		padding: 0 3vw;
		font-weight: 600;
		font-size: 14px;
	}
	.shopinfo dd{
		display: block;
		padding: 1.5vw 3vw 3vw;
		font-size: 14px;
		font-weight: normal;
		line-height: 1.8em;
	}
	#shop .shoplink{
		margin: 10vw auto 0;
	}
}

@keyframes fly{
	0%{
		transform: scale(5);
		opacity: 0;
	}
	60% {
		transform: scale(1);
		opacity: 1;
	}
	65% {
		transform: translate(0px, 0px) rotateZ(0deg);
		opacity: 1;
	}
	75% {
		transform: translate(2px, 2px) rotateZ(1deg);
		opacity: 1;
	}
	85% {
		transform: translate(0px, 2px) rotateZ(0deg);
		opacity: 1;
	}
	95% {
		transform: translate(2px, 0px) rotateZ(-1deg);
		opacity: 1;
	}
	100% {
		transform: translate(0px, 0px) rotateZ(0deg);
		opacity: 1;
	}
}

@keyframes show{
	from{
		opacity: 0;
		transform: scale(1.1);
	}
	to{
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes popup{
	0% {transform: translateY(40px) scale(0.8);	opacity: 0;}
	100% {transform: translateY(0) scale(1.0);}
	80%, 100% {opacity: 1;}
}

.anim-box.poyopoyo {
	animation: poyopoyo 2s ease-out infinite;
	opacity: 1;
	animation-delay: 1.5s;
}

@keyframes poyopoyo {
	0%, 40%, 60%, 80% {	transform: scale(1.0);}
	50%, 70% {transform: scale(0.95);}
}