$eng:'Lato', sans-serif;
$ja:'Noto Sans JP', sans-serif;
$breakpoint-notepad: 1500px; 
$breakpoint-tablet: 900px; 
$breakpoint-mobile: 600px;
$brown:#a59374;
$bg_color:#f3f3e9;
$gray:#f3f3f3;

@mixin max-screen($break-point) { 
  @media screen and (max-width: $break-point) {
    @content;
  }
}
@mixin min-screen($break-point) { 
  @media screen and (min-width: $break-point) {
    @content;
  }
}
@mixin screen($break-point-min, $break-point-max) { 
  @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
    @content;
  }
}

* {
	margin: 0;
	padding: 0;
	letter-spacing: 0.1em;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-weight: 400;
	color: #333333;
	font-size: 16px;
	text-align: center;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
a {
	text-decoration: none;
	transition: .4s;
	&.disabled {
		pointer-events: none;
		text-decoration: none;
	}
}
ol,ul {
	list-style: none;
}
.pc {
  display: block;
  @include max-screen($breakpoint-tablet) {
    display: none;
  }
}
.sp {
  display: none;
  @include max-screen($breakpoint-tablet) {
    display: block;
  }
}
.InnerContents {
	margin: 0 auto;
}
/*--------------------------------------------*/
body {
	
}
.lp_wrapper {
	@include max-screen($breakpoint-tablet) {
		width: 100%;
	}
}

.mainBox {
	width: 100%;
	background: $bg_color;
	& #box-content {
		position: relative;
		margin: 0 auto;
		overflow: auto;
		-ms-overflow-style: none;
		z-index: 1000;
		& #drawer {
			padding: 0 0 10%;
			position: relative;
			max-width: 600px;
			margin: 0 auto;
			top: 0;
			background: #fff;
			@include max-screen($breakpoint-notepad) {
				max-width: 400px;
			}
			@include max-screen($breakpoint-tablet) {
				max-width: 600px;
			}
			@include max-screen($breakpoint-mobile) {
				padding: 0;
				max-width: none;
			}
			
		}
		& .mv {
			padding: 0 0.2em;
			@include max-screen($breakpoint-tablet) {
				padding-top: 40px;
				margin-bottom: 20%;
			}
			@include max-screen($breakpoint-mobile) {
				padding: 40px 0 0;
			}
		}
		& .logo {
			position: fixed;
			left: 15px;
			top: 15px;
			z-index: 100;
			@include max-screen($breakpoint-tablet) {
				background:rgba(165,147,116,.5);
				height: 40px;
				width: 100%;
				left: 0;
				top: 0;
			}
			& img {
				max-width: 160px;
				filter: brightness(0) invert(0);
				@include max-screen($breakpoint-tablet) {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%,-50%);
					filter: brightness(1) invert(0);
				}
				@include max-screen($breakpoint-mobile) {
					max-width: 100px;
				}
			}
		}
		& nav {
			position: fixed;
			right: 5rem;
			bottom: 70px;
			@include max-screen($breakpoint-notepad) {
				right: 0;
			}
			@include max-screen($breakpoint-tablet) {
				position: relative;
				width: max-content;
				margin: 10% auto;
				border: 1px solid #000;
				display: inline-block;
			}
			& ol {
				@include max-screen($breakpoint-tablet) {
					padding: 3.0em 2.0em;
				}				
				& li {
					position: relative;
					& a {
						text-align: left;
						padding: 0.7em;
						display: block;
						font-family: $eng;
						font-weight: 300;
						font-size: .9em;
						@include max-screen($breakpoint-tablet) {
							color: #000;
						}
						& span {
							font-size: 40%;
							display: block;
							text-align: left;
							@include max-screen($breakpoint-tablet) {
								font-size: 70%;
								color: #000;
							}
							&.small {
								display: inline;
							}
						}
					}
				}
			}
		}
        
        & .buyBtn {
			position: fixed;
			right: 15px;
			top: 15px;
			z-index: 100;
			@include max-screen($breakpoint-tablet) {
				bottom: 20px;
				top: auto;
			}
			& a {
				font-size: 0.9em;
				color: #fff;
				background: #a59374;
				border: 1px solid #a59374;
				padding: 0.6em 1.0em 0.5em 1.5em;
				border-radius: 50vh;
				text-decoration-line: underline;
				& span {
					font-size: 120%;
					color: #fff;
					padding-left: .5em;
				}
			}
		}
        
	}
}
section {
	margin: 20% auto 15%;
	padding-top: 50px;
	@include max-screen($breakpoint-notepad) {
		margin-top: 0;
		margin-bottom: 25%;
	}
}
.ttl {
	margin-bottom: 1.0em;
	& p {
		font-size: 0.7em;
		font-family: $eng;
		font-weight: 300;
		margin-bottom: .2em;
	}
	& h2 {
		font-size: 1.2em;
		& span {
			color: $brown;
			font-size: 100%;
		}
	}
}
.intro {
	& p {
		font-size: 0.8em;
		line-height: 2.0;
		margin: 1.0em auto;
		width: 90%;
		text-align: center;
		@include max-screen($breakpoint-notepad) {
			font-size: 0.7em;
			text-align: left;
			margin: 2.0em auto;
			width: 80%;
			& br {
				display: none;
			}
		}
	}
	& .ttl {
		& p {
			text-align: center;
			margin: 0 auto;
		}
	}
}
.anchorBtn {
	& ul {
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		width: 80%;
		margin: 0 auto;
		@include max-screen($breakpoint-notepad) {
			width: 90%;
		}
//		@include max-screen($breakpoint-mobile) {
//			width: 100%;
//		}
		& li {
			padding: 0.5em;
			& a {
				& p {
					margin-top: 1.0em;
					font-size: .8em;
					@include max-screen($breakpoint-notepad) {
						font-size: 0.6em;
					}
				}
			}
		}
	}
}
.ttlBox {
	position: relative;
	& .item_name {
		position: absolute;
		left: 2.0em;
		@include max-screen($breakpoint-mobile) {
			left: 1.0em;
		}
		& p {
			font-size: 0.8em;
			text-align: left;
			font-family: $eng;
			font-weight: 300;
			margin-bottom: 2.0em;
			@include max-screen($breakpoint-notepad) {
				font-size: 0.6em;
			}
			@include max-screen($breakpoint-tablet) {
				font-size: 0.8em;
			}
			@include max-screen($breakpoint-mobile) {
				font-size: 0.6em;
			}
		}
		& h3 {
			font-size: 1.2em;
			text-align: left;
			line-height: 2.3;
			@include max-screen($breakpoint-notepad) {
				font-size: .8em;
			}
			@include max-screen($breakpoint-tablet) {
				font-size: 1.2em;
			}
			@include max-screen($breakpoint-mobile) {
				font-size: .8em;
			}
			& span {
				background: #fff;
				border-bottom: 2px solid $brown;
				border-right: 2px solid $brown;
				font-size: 100%;
				padding: 0.3em .8em 0.3em 0;
			}
		}
	}
	& .flexBox {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		& div {
			&:first-child {
				width: 40%;
				padding: 2.0em;
				@include max-screen($breakpoint-notepad) {
					width: 50%;
				}
				@include max-screen($breakpoint-tablet) {
					width: 40%;
				}
				@include max-screen($breakpoint-mobile) {
					padding: 2.0em 1.0em;
				}
			}
		}
		& p {
			font-size: 1.0em;
			line-height: 2.0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			@include max-screen($breakpoint-notepad) {
				font-size: 0.8em;
			}
			@include max-screen($breakpoint-tablet) {
				font-size: 1.0em;
			}
			@include max-screen($breakpoint-mobile) {
				font-size: .8em;
			}
			& span {
				font-size: 100%;
				font-weight: 300;
				font-family: $eng;
				&:first-child {
					margin-right: 1.0em;
				}
			}
		}
		& a {
			display: block;
			margin-top: 3.0em;
			&.moreBtn {
				max-width: 100px;
				font-size: 1.0em;
				color: #fff;
				background: $brown;
				border: 1px solid $brown;
				padding: 0.3em 1.0em;
				@include max-screen($breakpoint-notepad) {
					font-size: 0.8em;
				}
				@include max-screen($breakpoint-tablet) {
					font-size: 1.0em;
				}
				@include max-screen($breakpoint-mobile) {
					font-size: 0.8em;
				}
			}
		}
	}
}
.anchor-ttl {
	margin-bottom: 2.0em;
	@include max-screen($breakpoint-notepad) {
		margin-bottom: 1.5em;
	}
	@include max-screen($breakpoint-tablet) {
		margin-bottom: 2.0em;
	}
	@include max-screen($breakpoint-mobile) {
		margin-bottom: 1.5em;
	}
	& img {
		margin-bottom: 0.5em;
		max-width: 40px;
		@include max-screen($breakpoint-notepad) {
			max-width: 25px;
		}
		@include max-screen($breakpoint-tablet) {
			max-width: 40px;
		}
		@include max-screen($breakpoint-mobile) {
			max-width: 25px;
		}
	}
	& h3 {
		font-size: 1.5em;
		font-family: $ja;
		@include max-screen($breakpoint-notepad) {
			font-size: 1.0em;
		}
		@include max-screen($breakpoint-tablet) {
			font-size: 1.5em;
		}
		@include max-screen($breakpoint-mobile) {
			font-size: 1.0em;
		}
		& span {
			font-size: 120%;
			display: block;
			color: $brown;
			font-family: $ja;
		}
	}
	& p {
		font-size: 0.8em;
		font-family: $eng;
		font-weight: 300;
		margin-bottom: .5em;
	}
}
.anchor-box {
	& .img_size {
		width: 90%;
		margin: 0 auto 3%;
	}
	& .back {
        background: $gray;
		padding: 10% 5%;
		position: relative;
		display: inline-block;
		margin: 5% auto 10%;
        &::after {
			position: absolute;
            content: "";
			border: 25px solid transparent;
			border-top: 25px solid $gray;
			margin-left: -25px;
			top: 100%;
  			left: 50%;
        }
		&::before {
			position: absolute;
            content: "";
			border: 25px solid transparent;
			border-top: 25px solid #fff;
			margin-left: -25px;
			top: 0;
  			left: 50%;
		}
    }
	& p {
		font-size: 1.0em;
		@include max-screen($breakpoint-notepad) {
			font-size: 0.7em;
		}
		@include max-screen($breakpoint-tablet) {
			font-size: 1.0em;
		}
		@include max-screen($breakpoint-mobile) {
			font-size: .7em;
		}
		& span {
			font-size: 120%;
			color: $brown;
		}
	}
	& .flextxt {
		width: 90%;
		margin: 1.0em auto;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		& div {
			width: 50%;
			padding: 0.5em;
			& h4 {
				font-size: 0.9em;
				margin-bottom: 1.0em;
				@include max-screen($breakpoint-notepad) {
					font-size: 0.7em;
				}
				@include max-screen($breakpoint-tablet) {
					font-size: 0.8em;
				}
				@include max-screen($breakpoint-mobile) {
					font-size: .7em;
				}
			}
			& p {
				font-size: .7em;
				text-align: left;
				@include max-screen($breakpoint-notepad) {
					font-size: .6em;
				}
				@include max-screen($breakpoint-tablet) {
					font-size: .7em;
				}
				@include max-screen($breakpoint-mobile) {
					font-size: .6em;
				}
			}
		}
	}
	& .styleBtn {
		position: relative;
		color: #fff;
		background: $brown;
		display: block;
		max-width: 200px;
		padding: 0.8em 2.0em 0.8em 1.0em;
		font-size: .8em;
		margin: 1.5em auto 3.0em;
		@include max-screen($breakpoint-mobile) {
			font-size: .7em;
		}
		&::after,&::before {
			content: "";
			position: absolute;
			background: #fff;
			height: .5px;
			right: 1.5em;
			top: 50%;
			transform: translateY(-50%);
		}
		&::after {
			width: 20px;
		}
		&::before {
			width: 10px;
			top: 44%;
			transform: rotate(20deg);
		}
	}
}
.styling {
	& .item_ttl {
		border-left: 2px solid #000;
		padding-left: 0.5em;
		margin-left: 5%;
		margin-bottom: 5%;
		& h4 {
			text-align: left;
			font-size: 2.2em;
			font-family: $eng;
			font-weight: 300;
			@include max-screen($breakpoint-notepad) {
				font-size: 1.5em;
			}
			@include max-screen($breakpoint-tablet) {
				font-size: 2.2em;
			}
			@include max-screen($breakpoint-mobile) {
				font-size: 1.5em;
			}
			& span {
				font-size: 80%;
				font-weight: 300;
				font-family: $eng;
			}
		}
		& p {
			text-align: left;
			font-size: 0.8em;
			@include max-screen($breakpoint-notepad) {
				font-size: 0.6em;
			}
			@include max-screen($breakpoint-tablet) {
				font-size: 0.8em;
			}
			@include max-screen($breakpoint-mobile) {
				font-size: .6em;
			}
		}
	}
}



.sliderFlex {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin: 5% auto 20%;
	& .slider {
		max-width: 389px;
		margin: 0;
		& .swiper-pagination {
			bottom: 0;
		}
		& .swiper-pagination-bullet{
			background-color: rgba(255,255,255,0);
			opacity: 1.0;
			width: 6px;
			height: 6px;
			border: 1px solid #fff;
		}
		& .swiper-pagination-bullet-active {
			background: rgba(255,255,255,1.00);
		}
	}
	& .styling_txt {
		padding:0 2.0em;
		@include max-screen($breakpoint-notepad) {
			padding:0 1.0em;
		}
		@include max-screen($breakpoint-tablet) {
			padding:0 2.0em;
		}
		@include max-screen($breakpoint-mobile) {
			padding: 0 1.0em;
		}
		& p {
			white-space: nowrap;
			text-align: left;
			font-family: $eng;
			font-size: 1.0em;
			line-height: 2.0;
			@include max-screen($breakpoint-notepad) {
				font-size: .7em;
			}
			@include max-screen($breakpoint-tablet) {
				font-size: 1.0em;
			}
			@include max-screen($breakpoint-mobile) {
				font-size: .7em;
			}
		}
		&.left {
			& p {
				text-align: right;
			}
		}
	}
}




.tabBox {
	width: 97%;
	margin: 10% auto;
	& .tab-group{
        display: flex;
        justify-content: center;
		& .tab{
            flex-grow: 1;
            padding: 0.3em 1.5em;
            border: 1px solid #000;
            cursor:pointer;
			margin: 1.0em 0.2em;
			border-radius: 50vh;
			font-size: 0.8em;
			& span {
				font-size: 60%;
				display: block;
				color: #000;
			}
			&.is-active{
				background:#a59374;
				color:#fff;
				transition: all 0.2s ease-out;
				border-color: #fff;
				& span {
					color: #fff;
				}
			}
		}
	}
	& .panel-group{
		& ul {
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			flex-wrap: wrap;
			& li {
				width: 50%;
				padding: 0 0.2em;
				& div {
					padding: 0.3em;
					font-size: .8em;
					& p {
						text-align: left;
						font-size: 80%;
						display: flex;
						align-items: center;
						& span {
							font-family: $eng;
							font-size: 120%;
							min-width: 60px;
							text-align: left;
						}
						&.txt {
							margin: 1.0em auto;
							line-height: 2.0;
						}
					}
				}
			}
		}
		& .panel{
		  	display:none;
			&.is-show{
				display:block;
			}
		}
	}
}
h5 {
	font-size: 1.5em;
	color: $brown;
	font-family: $eng;
	display: inline-block;
	border-bottom: 1px solid $brown;
	font-weight: 300;
	margin-bottom: 1.0em;
}
.reviewBox {
	width: 90%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	& div {
		width: 100%;
		border-bottom: 2px solid $gray;
		padding: 5% 0;
		& p {
			text-align: left;
			font-size: 0.7em;
			&.star {
				font-size: 100%;
				& span {
					font-size: 100%;
					opacity: .2;
				}
			}
			&.ttl {
				font-size: .8em;
				font-weight: 600;
				opacity: .7;
				margin-bottom: 0;
			}
		}
	}
}
.insta {
	padding-bottom: 20%;
}

.coupon {
	& p.schedule {
		font-family: $eng;
		font-size: 0.8em;
		font-weight: 300;
		& span {
			font-size: 90%;
			font-family: $eng;
			font-weight: 300;
			margin: 0 .5em;
		}
	}
	& .anchor-ttl {
		& h3 {
			font-size: 1.0em;
			& span {
				font-size: 95%;
			}
		}
	}
}

@keyframes fade-tooltip {
    to { opacity: 0; }
}

.copybtn {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 2.0em 2.5em;
	border: 1px solid #000;
	margin: 1.5em auto;
	position: relative;
	@include max-screen($breakpoint-mobile) {
		padding: 2.0em 1.5em;
	}
	& p {
		font-size: 0.8em;
		& input {
			font-size: 110%;
			font-family: $eng;
			font-weight: 300;
			text-align: left;
            width: 30%;
			&#copyText {
				border: none;
				width: 4.5em;
    			max-width: 100%;
				&:focus {
					outline: none;
				}
			}
		}
	}
	& div {
//		margin-left: 1.0em;
		& p {
			font-size: 0.6em;
		}
		& img {
			opacity: 0.5;
		}
	}
	&.js-copied {
			cursor: pointer;
			&::before{
				content:'コピーしました';
				white-space: nowrap;
				display: inline-block;
				position: absolute;
				bottom: 5px;
				left: 50%;
				transform: translateX(-50%);
				font-size: 0.7em;
				padding: 0.5em;
				animation-name: fade-tooltip;
				animation-duration: .5s;
				animation-delay: 1s;
				animation-fill-mode: forwards;
				border-radius: 0.2em;
				background: $brown;
				color: #fff;
			}
		}
}


.red{
	font-size: 0.4em;
	color: red;
}

//1011 追記

.modal-wrapper {
	z-index: 999;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
	&:not(:target) {
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s, visibility .3s;
	}
	&:target {
		opacity: 1;
		visibility: visible;
		transition: opacity .4s, visibility .4s;
	}
	&::after {
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		content: "";
		margin-left: -.05em;
	}
	& .modal-window {
		box-sizing: border-box;
		display: inline-block;
		z-index: 20;
		position: relative;
		background: #fff;
		@include max-screen($breakpoint-mobile) {
			width: 100%;
		}
		& .modal-content {
			overflow-y: auto;
			text-align: left;
			height: 100vh;
			overflow-y: scroll;
			padding: 20px 0 25px;
			max-width: 600px;
			scrollbar-width: thin;
   			scrollbar-color: #000 #ccc;
			@include max-screen($breakpoint-notepad) {
				max-width: 400px;
			}
			@include max-screen($breakpoint-tablet) {
				max-width: 600px;
			}
			@include max-screen($breakpoint-mobile) {
				max-width: none;
				width: auto;
			}
			&::-webkit-scrollbar{
				width: 5px;
			}
			&::-webkit-scrollbar-track{
				background-color: rgba(0,0,0,.1);
			}
			&::-webkit-scrollbar-thumb{
				background-color: #000;
				border-radius: 50vh;
			}
			& .itemBox {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				width: 85%;
				margin: 0 auto 10%;
				padding: 2.0em 1.5em;
				&::after {
					position: absolute;
					top: 0;
					left: 0;
					content: "";
					border-top: 5px solid $brown;
					border-bottom: 1px solid $brown;
					height: 10px;
					width: 100%;
				}
				& div {
					&:first-child {
						width: 65%;
						text-align: left;
					}
					&:last-child {
						width: 35%;
					}
					& h3 {
						font-size: 1.0em;
						font-family: $eng;
						line-height: 1.5;
						text-align: left;
						& span {
							font-size: 90%;
							font-family: $ja;
						}
					}
					& .price {
						font-family: $eng;
						font-size: 1.0em;
						margin: .5em 0 1.0em;
						text-align: left;
					}
					& .btn {
						color: #fff;
						font-size: 0.6em;
						background: $brown;
						line-height: 1.0;
						border-radius: 50vh;
						padding: .7em 1.5em;
						& span {
							font-size: 120%;
							color: #fff;
						}
					}
				}
			}
			& .anchorBox {
				& .box {
					margin: 20% auto;
					& img {
						@include max-screen($breakpoint-notepad) {
							max-width: 90%;
						}
					}
					&.small {
						width: 90%;
					}
					& .variation {
						& img {
							max-width: 90%;
							margin-bottom: 1.0em;
						}
					}
				}
                & h2 {
                    font-size: 1.2em;
					line-height: 1.2;
                    & span {
                        font-size: 80%;
						display: block;
						margin-bottom: 0.5em;
						&.small {
							display: inline;
						}
                    }
                }
				& p {
					font-size: .7em;
					text-align: left;
					width: 85%;
					line-height: 2.0;
					margin: 1.5em auto 0;
				}
            }
		}
	}
	& .modal-overlay {
		z-index: 10;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, .9);
	}
	& .modal-close {
		z-index: 20;
		position: absolute;
		top: 1px;
		right: 6px;
		padding: 0.3em;
		line-height: 1.0;
		font-size: 1.7em;
		background: rgba(255,255,255,0.3);
	}
}

.colorMenu {
	margin: 10% auto;
	@include max-screen($breakpoint-notepad) {
		margin: 20% auto;
	}
	& ul {
		display: flex;
		justify-content: center;
		align-items: center;
		& li {
			& a {
				padding: 0 1.0em;
				display: block;
				font-size: 0.8em;
				font-family: $ja;
				line-height: 1.0;
				border-right: 1px solid #000;
				
			}
			&:last-child a {
				border-right: none;
			}
		}
	}
}

.item_link a{
    font-size: 120%;
    min-width: 60px;
    text-align: left;
    color: #a59374;
    margin-bottom: 30px;
    text-decoration: underline;
}