@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//メインカラー指定
$red:#E03535;
$red-lignt: #FFE5DE;


//header------------------------------------------------------------------ここから
header{
	position: sticky; /* headerを追従にする */
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: $red;
	z-index: 999;
	@include sm {
		background-color: inherit;
	}
	& > div{
		margin-left: 3rem;
		@include md {
			margin-left: 2rem;
		}
		@include sm {
			margin-left: 0;
		}
		h1{
			margin: 0;
		}
	}
	.header-pc {
		nav {
			display: flex;
			align-items: center;
			justify-content: space-between;
			&>div {
				@include md {
					width: 180px;
				}
				h1 {
					width: 250px;
					@include lg {
						width: 200px;
					}
					@include md {
						width: 170px;
					}
				}
			}
			ul{
				margin: 0;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				li{
					a{
						font-family: "Josefin Sans", sans-serif;
						font-size: 28px;
						font-size: 2.8rem;
						padding: 0 2.5rem;
						display: block;
						color: white;
						text-align: left;
						line-height: 1;
						transition: 0.3s;
						display: flex;
						align-content: center;
						flex-wrap: wrap;
						height: 115px;
						@include xl {
							font-size: 25px;
							font-size: 2.5rem;
							padding: 0 2rem;
						}
						@include lg {
							font-size: 20px;
							font-size: 2rem;
							padding: 0 1.5rem;
						}
						@include md {
							font-size: 18px;
							font-size: 1.8rem;
							padding: 0 1.3rem;
							height: 100px;
						}
						span {
							display: block;
							font-family: 'Noto Sans JP', sans-serif;
							font-size: 14px;
							font-size: 1.4rem;
							margin-top: 0.5rem;
							@include md {
								font-size: 12px;
								font-size: 1.2rem;
							}
						}
						&:hover{
							background: #fff;
							color: $red;
						}
					}
				}
			}
		}
	}
}

///*------ スマホ用ヘッダー ------*/
.header {
	position: sticky!important; /* headerを追従にする */
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background-color: $red;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	z-index: 999;
	.header__inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80px;
		padding: 0 2rem;
	}
	.logo {
		display: flex;
		a{
			display: block;
			img {
				width: 75%;
				@include xs {
					width: 70%;
				}
			}
		}
	}
}
.drawer__button {
  position: relative;
  width: 4rem;
  height: 4rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  z-index: 999; 
	& > span{
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 4rem;
		height: 2px;
		background-color: white;
		transform: translateX(-50%);
	}
	& > span:first-child{
		transform: translate(-50%, calc(-50% - 1rem));
		transition: transform 0.3s ease;
	}
	& > span:nth-child(2){
		transform: translate(-50%, -50%);
		transition: opacity 0.3s ease;
	}
	& > span:last-child{
		transform: translate(-50%, calc(-50% + 1rem));
		transition: transform 0.3s ease;
	}
}
.drawer__button.active{
	& > span:first-child{
		transform: translate(-50%, -50%) rotate(-45deg);
	}
	& > span:nth-child(2){
		opacity: 0;
	}
	& > span:last-child{
		 transform: translate(-50%, -50%) rotate(45deg);
	}
}
.drawer__nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	transition: opacity 0.3s ease;
	opacity: 0;
	visibility: hidden;
	.drawer__nav__inner {
		position: relative;
		width: 60%;
		height: 100%;
		background-color: $red;
		padding: 0;
		margin: 0 0 0 auto;
		overflow: scroll;
		transform: translateX(100%);
		transition: transform 0.3s ease;
		.drawer__nav__menu {
			list-style: none;
			padding-left: 0;
			padding-top: 7.5rem;
			.drawer__nav__link {
				font-family: "Josefin Sans", sans-serif;
				font-size: 20px;
				font-size: 2rem;
				display: block;
				color: white;
				text-decoration: none;
				padding: 2rem;
				border-bottom: solid 1px lightgray;
				transition: 0.3s;
				line-height: 1;
				span {
					display: block;
					font-family: 'Noto Sans JP', sans-serif;
					font-size: 14px;
					font-size: 1.4rem;
					margin-top: 1rem;
					@include xs {
						margin-top: 0.5rem;
					}
					
				}
				&:hover{
					background-color: #fff;
					color: $red;
				}
			}
			li:last-child{
				border-bottom: none;
			}
		}
	}
}
.drawer__nav.active {
	opacity: 1;
	visibility: visible;
	.drawer__nav__inner {
		transform: translateX(0);
	}
}

///*---------- footer ----------*/
footer{
	background: $red;
	color: #fff;
	padding: 5rem;
	@include md {
		padding: 5rem 3rem;
	}
	@include sm {
		padding: 5rem 2rem 1rem;
	}
	@include sm {
		padding: 5rem 1rem 1rem;
	}
	.row{
		&>div {
			&:first-child {
				position: relative;
			}
		}
	}
	.logo{
		margin-bottom: 2rem;
		@include sm {
			text-align: center;
		}
		img {
			@include md {
				width: 80%;
			}
			@include sm {
				width: auto;
			}
			@include xs {
				width: 70%;
			}
		}
	}
	.shopinfo{
    	line-height: 1.8;
		@include sm {
			text-align: center;
		}
		
	}
	.insta-logo {
		@include sm {
			text-align: center;
			margin-bottom: 2rem;
		}
	}
	iframe {
		width: 100%;
		height: 390px;
		@include lg {
			height: 350px;
		}
		@include md {
			height: 300px;
		}
		@include xs {
			height: 250px;
		}
	}
	.copyright{
		position: absolute;
		bottom: 0px;
		@include sm {
			position: inherit;
			text-align: center;
		}
	}
}