/*共通のCSS*/
.alice-regular {
  font-family: "Alice", serif;
  font-weight: 400;
  font-style: normal;
	color:brown;
}
.zen-antique-regular {
  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-style: normal;
}

.noto-serif kr-medium {
  font-family: "Noto Serif KR", serif;
  font-weight: 500;
  font-style: normal;
}
.fjalla-one-regular {
  font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

@media(min-width: 1020px){
  a[href^="tel:"]{
    pointer-events: none;
  }
}
html{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%; /*ルートサイズ10px=1rem算出をしやすくするために*/
	touch-action: manipulation; /*スマフォのダブルタップによるズームを防ぐ*/
	color:var(--main_font_color);
	background-color: var(--bg_color);
}
body,html {
  margin: 0;  /* 解決するため */
  padding:0; /* 入れておくと無難 */
	background-color: var(--bg_color);
	/*width: 100%;*/
	min-height: 100vh;
}
.btn{
	font-size:12px;
}
textarea.form-control{
	font-size:12px;
}
.common_header,.navbar{
	background-color: var(--header_bg_color);
	/*height: auto;
	display: flex;*/
}
.nav-link{
	font-size:14px;
}
.navbar{
	--bs-navbar-hover-color: rgba(165, 42, 42, 0.8);
	--bs-navbar-active-color: rgba(165, 42, 42, 1);
}
.active{
	font-weight: 800;
}
header > a> h1{
	text-decoration: none;
	color:rgb(165, 42, 42);
}
.common_main{
	background-color: var(--main_bg_color);
	width: 100%;
	min-height: 100vh;
	padding-top: 80px;
	padding-bottom: 100px;
	position: relative;

  font-family: "Zen Antique", serif;
  font-weight: 400;
  font-style: normal;
	font-size:12px;
}

.common_footer{
	background-color: var(--footer_bg_color);
	/*position:fixed;
	bottom: 0;
	left:0;*/
	width:100%;
	/*height: 50px;*/
}
p {
  white-space: pre-wrap;
	margin-bottom: 3px;
}
.original-gradient {
  /*height: 200px;
  width: 90%;*/
  background-image: linear-gradient(90deg, rgba(226, 207, 255, 1), rgba(251, 253, 191, 1));
}
.box8 {
	padding: 0.5em 1em;
	/*margin: 2em 0;*/
	color: #232323;
	background: #fff8e8;
	border-left: solid 10px #ffc06e;
}
.box8 p {
	margin: 0; 
	padding: 0;
}

.icon-btn{
	padding:0px;
	font-size:8px;
	font-family: "Fjalla One", sans-serif;
  font-weight: 400;
  font-style: normal;

}

.img-item {
	width: 100%;
	height: 150px;
	object-fit: cover; /* width, heightといっしょに使います */
	border: 1px solid #111;
}
.img-item-sm {
	width: 100%;
	
	object-fit: cover; /* width, heightといっしょに使います */
	border: 1px solid #111;
}
.img-item-xl {
	/*max-width: 800px;
	max-height: 600px;*/
	width: 100%;
	height: 100%;
	object-fit: cover;  /*width, heightといっしょに使います */
	border: 1px solid #111;
	opacity: 1;
}
.img-wrap {
	position: fixed;
	top:0%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color:rgba(248, 226, 226, 0.7) ;
	opacity: 1;
	z-index: 1000
}

.img-div{
	display: flex;
  justify-content: center;
  align-items: center;
	
}
.kakaku{
	font-size:1.4rem;
	color:#FF0080;
	font-weight: 900;
}
.zei{
	font-size:1.1rem;
	color:#FF0080;
}

.order{
	color:blue;
	font-size:1.3rem;
}

.cart{
	position: fixed;
	top:30px;
	right:2px;
	border:#40E0D0 0.5px;
	height: 50px;
	width: 50px;
	background-color: rgb(238, 193, 193);
	border-radius: 30px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
	height: 55px;
	width: 50px;
	/*outline: black;*/
	background-color: rgba(0, 0, 0, 0.3);
	background-size: 100%, 100%;
	border-radius: 20%;
	border: 1px solid white;
}

@media screen and (min-width: 600px) {
	.cart{
		top:30px;
		right:50px;
	}	
}


/*vue-transtion*/
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.img_icon {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
	border: solid 2px var(--header_bg_color);
}

/*点滅クラス*/
.blink {
	animation: blinking 0.8s ease-in-out infinite alternate;
}
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.line-green{
		color:#1dcd00;
}
.facebook-blue{
		color:#3B5998;
}
.twitter-black{
	color:#0F1419;
}
.instagram-orange{
	color:#F26939;
}

.rainbow-color,
.rainbow-color:before{
		/*文字レインボーカラー*/
		color: #FF8C00;
		background: -webkit-linear-gradient(0deg, #40E0D0, #FF8C00, #FF0080);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
}



/*ローディングアニメーション*/
.loader-wrap {
	position: fixed;
	top:0%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0.7;
	z-index: 1000
}
.loader {
		color: #5d53ea;
		font-size: 90px;
		text-indent: -9999em;
		overflow: hidden;
		width: 1em;
		height: 1em;
		border-radius: 50%;
		margin: 72px auto;
		position: relative;
		-webkit-transform: translateZ(0);
		-ms-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
		animation: load6 1.7s infinite ease, round 1.7s infinite ease;
		opacity: 1;
	}
	@-webkit-keyframes load6 {
		0% {
			box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
		5%,
		95% {
			box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
		10%,
		59% {
			box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
		}
		20% {
			box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
		}
		38% {
			box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
		}
		100% {
			box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
	}
	@keyframes load6 {
		0% {
			box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
		5%,
		95% {
			box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
		10%,
		59% {
			box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
		}
		20% {
			box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
		}
		38% {
			box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
		}
		100% {
			box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
		}
	}
	@-webkit-keyframes round {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	@keyframes round {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg);
		}
		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}
	

/*レインボーテキスト*/
.rainbow-text {
	background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
	-webkit-background-clip: text;
	color: transparent;
	background-size: 200% 100%;
	animation: rainbow-animation 5s linear infinite;
	font-weight: bold;
}
@keyframes rainbow-animation {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/*borderを点滅させるクラス*/
.blink-border {
	border: 3px solid #ff0080;
	animation: blink-border-animation 1.0s ease-in-out infinite alternate;
	/*配下にあるimgタグの画像も点滅*/
	img {
		animation: blink-border-animation 1.0s ease-in-out infinite alternate;
	}
	
}
@keyframes blink-border-animation {
	0% { border-color: rgba(255, 0, 128, 0); opacity: 1}
	100% { border-color: rgba(255, 0, 128, 1); opacity: 0.4}
}