// Scss Document
/*--------------------
共通設定
----------------------*/
$line:#e5e1d6;
$eng:'Red Hat Display', sans-serif;
$number:'Nanum Myeongjo', serif;
$black:#111110;
$breakpoint-notepad: 1500px; 
$breakpoint-tablet: 800px; 
$breakpoint-mobile: 600px;
@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: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: $black;
	list-style: none;
}
img {
	width: 100%;
}
a {
	text-decoration: none;
	&.disabled {
		pointer-events: none;
	}
}
.pc {
  display: block;
  @include max-screen($breakpoint-tablet) {
    display: none;
  }
}
.sp {
  display: none;
  @include max-screen($breakpoint-tablet) {
    display: block;
  }
}
.fadein {
	opacity: 0;
	transform: translateY(0px);
	transition: all 1.5s;
}
body {
	background: #f5f3ed;
	overflow-x: hidden;
}

/*------------------------------------------------*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	height: 85px;
    z-index: 9999;
	background: #f5f3ed;
	border-bottom: 1px solid $line;
	& #logo {
		width: 100%;
		text-align: center;
		border-bottom: 1px solid $black;
		padding: 0.7em 0;
		& a {
			& img {
				width: 100%;
				max-width: 70px;
			}
		}
		
	}
	& nav {
		display: flex;
		justify-content: center;
		align-items: center;
		& div {
			padding: 5px 45px;
			@include max-screen($breakpoint-tablet) {
				padding: 5px 30px;
			}
			& a {
				font-size: 0.9em;
				position: relative;
				font-family: $eng;
				@include max-screen($breakpoint-tablet) {
					font-size: 0.7em;
				}
				&::before {
					content: "";
					display: block;
					position: absolute;
					left: -15px;
					top: 30%;
					width: 5px;
					height: 5px;
					border-right: 1px solid $black;
					border-bottom: 1px solid $black;
					-webkit-transform: rotate(45deg);
					transform: rotate(45deg)translateY(-50%);
				}
			}
		}
	}
}
/*--------------------------------------------------*/
.mv {
	margin: 85px auto 0;
}

.anchor {
	margin: 15% auto;
	text-align: center;
	max-width: 800px;
	padding-top: 7%;
	@include max-screen($breakpoint-tablet) {
		margin: 35% auto;
	}
	@include max-screen($breakpoint-mobile) {
		margin: 50% auto;
	}
	& h2 {
		font-family: $eng;
		font-size: 2.0em;
		line-height: 0.8;
		margin-bottom: 5%;
		@include max-screen($breakpoint-mobile) {
			font-size: 1.5em;
			margin-bottom: 10%;
		}
		& span {
			font-size: 40%;
		}
	}
	& p {
		font-size: 0.7em;
		line-height: 2.8;
		@include max-screen($breakpoint-tablet) {
			text-align: left;
			width: 90%;
			margin: 0 auto;
			line-height: 2.2;
		}
	}
	& .footer_copy {
		& p {
			font-size: 0.7em;
			text-align: center;
		}
	}
	& h3 {
		font-size: 0.9em;
		text-align: left;
		padding: 0 0.5em;
		border-left: 4px solid $black;
		margin-left: 5%;
	}
	& ul {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		width: 100%;
		padding-left: 5%;
		margin: 2% auto 10%;
		& li {
			width: 25%;
			text-align: left;
			padding: 0.5em 0;
			@include max-screen($breakpoint-tablet) {
				width: 33.3%;
				padding: 0.3em 0;
			}
			& a {
				font-size: 0.8em;
				padding: 0.5em;
				@include max-screen($breakpoint-tablet) {
					font-size: 0.6em;
				}
			}
		}
	}
	&#brand {
		max-width: 1000px;
	}
}
.slider {
	margin: 5% 10%;
	@include max-screen($breakpoint-mobile) {
		margin: 5% 0 5% 2%;
	}
	& .slick-list {
		@include max-screen($breakpoint-tablet) {
			padding-left: 10px;
		}
	}
	& div {
		margin: 0 10px;
		position: relative;
		@include max-screen($breakpoint-mobile) {
			margin: 0;
			padding: 0 10px;
		}
        & p {
            font-size: 100%;
            margin-top: 10%;
            font-family: $eng;
            letter-spacing: 0;
            line-height: 1.3;
            font-size: 0.7em;
			text-align: center;
        }
		& img {
			max-width: 136px;
			margin: 0 auto;
		}
        &.new {
            ::after {
                content: "NEW";
                position: absolute;
                top: 0;
                left: 0;
                background: $black;
                border: 1px solid $black;
                padding: 0.2em 0.7em 0.3em 0.9em;
                font-size: 0.6em;
                color: #fff;
            }
        }
	}
	& .slide-arrow {
		position: absolute;
		z-index: 10;
		top: 28%;
		transform: translateY(-50%);
		border-top: solid 1px $black;
		width: 40px;
		height: 40px;
		&.prev-arrow {
			border-left: solid 1px $black;
			transform: rotate(-45deg);
			left: -5%;
		}
		&.next-arrow {
			border-right: solid 1px $black;
			transform: rotate(45deg);
			right: -5%;
		}
	}
	& button {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;
		padding: 0;
	}
}

/*-------------------------------------------------*/
#contents {
  	margin:0 auto;
	& .sticky {
		background: #f5f3ed;
		position: -webkit-sticky;
		position:sticky;
		top: 85px;
		z-index: 100;
	}
	&.brand .inner {
		counter-increment: number;
		& .rightBox {
			position: relative;
			&::before {
				content: counter(number, decimal-leading-zero);
				color: $line;
				font-size: 6.5em;
				font-family: $number;
				position: absolute;
				top: 0.1em;
				left: 0.5em;
				@include max-screen($breakpoint-tablet) {
					display: none;
				}
			}
		}
		& .leftBox {
			position: relative;
			&::before {
				display: none;
				@include max-screen($breakpoint-tablet) {
					content: counter(number, decimal-leading-zero);
					color: $line;
					font-size: 6.5em;
					font-family: $number;
					position: absolute;
					top: -0.7em;
					left: 5%;
					display: block;
				}
			}
			@include max-screen($breakpoint-tablet) {
				margin-bottom: 15%;
			}
		}
	}
    & .flexbox {
        display: flex;
        justify-content: space-between;
		width: 100%;
		max-width: 1500px;
		margin: 0 auto 20%;
		padding-top: 7%;
		@include max-screen($breakpoint-mobile) {
			margin-bottom: 30%;
		}
        & .rightBox,
		& .leftBox {
            box-pack: justify;
            width: 50%;
			& h2 {
				position: relative;
				margin-top: 1.0em;
				font-family: $eng;
				font-size: 2.0em;
				line-height: 1.2;
				z-index: 10;
				& span {
					font-size: 40%;
				}
				@include max-screen($breakpoint-tablet) {
					width: 90%;
					margin: 0 auto;
				}
			}
			& p {
				font-size: 0.8em;
				line-height: 2.2;
				margin: 5% auto;
				@include max-screen($breakpoint-tablet) {
					width: 90%;
					font-size: 0.7em;
					margin-bottom: 15%;
				}
			}
			@include max-screen($breakpoint-tablet) {
				width: 100%;
			}
        }
        @include max-screen($breakpoint-tablet) {
            display: block;
        }
		& .rightBox {
			padding: 3%;
			& h3 {
				font-size: 2.0em;
				padding: 0.7em 0;
				line-height: 0.7;
				border-top: 5px solid $line;
				border-bottom: 2px solid $line;
				margin-bottom: 3%;
				& span {
					font-size: 40%;
				}
				@include max-screen($breakpoint-mobile) {
					font-size: 1.7em;
					width: 97%;
					margin: 3% auto 5%;
				}
			}
			& ul {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: flex-start;
				width: 100%;
				& li {
					width: 50%;
					padding: 1%;
					margin-bottom: 7%;
					& dl {
						margin: 1%;
						font-size: 0.7em;
						@include max-screen($breakpoint-mobile) {
							font-size: 0.6em;
						}
						& dt,& dd {
							font-size: 100%;
						}
						& .variation {
							margin-top: 7%;
						}
					}
				}
			}

		}
	}
}
.more {
    max-width: 300px;
    width: 80%;
    margin: 5% auto;
    text-align: center;
	@include max-screen($breakpoint-mobile) {
		width: 70%;
	}
    & a {
        border: 1px solid $black;
        color: $black;
        padding: 1.5em;
        font-size: 0.9em;
        font-family: $eng;
        display: block;
        position: relative;
        transition: .4s;
		@include max-screen($breakpoint-mobile) {
			padding: 1.4em;
			font-size: 0.8em;
		}
        &::after {
            content: "";
            position: absolute;
            transform: rotate(-45deg) translateY(-50%);
            border-bottom: 1px solid $black;
            border-right: 1px solid $black;
            width: 13px;
            height: 13px;
            top: 50%;
            right: 8%;
			@include max-screen($breakpoint-mobile) {
				width: 10px;
				height: 10px;
			}
        }
        &:hover {
            background: $black;
            color: #f5f3ed;
            &::after {
                border-bottom: 1px solid #f5f3ed;
                border-right: 1px solid #f5f3ed;
            }
        }
    }
}
#gift {
	width: 100%;
	max-width: none;
	background: url("../image/11.jpg");
	padding-top: 7%;
	margin: 0;
	@include max-screen($breakpoint-tablet) {
		padding: 15% 10% 5%;
	}
	@include max-screen($breakpoint-mobile) {
		padding: 30% 10% 5%;
	}
	& h2 {
		margin-bottom: 3%;
		@include max-screen($breakpoint-tablet) {
			margin-bottom: 10%;
		}
	}
	& .boxLink {
		margin-bottom: 7%;
		& a {
			position: relative;
			&::before {
				content: "ORIGINAL";
				position: absolute;
				font-size: 7.2em;
				font-family: $number;
				color: $line;
				bottom: -0.7em;
				left: 50%;
				transform: translateX(-50%);
				z-index: 1;
				@include max-screen($breakpoint-mobile) {
					font-size: 5.0em;
				}
			}
		} 
		& img {
			max-width: 500px;
			margin: 0 auto;
			position: relative;
			z-index: 2;
			@include max-screen($breakpoint-mobile) {
				width: 80%;
			}
		}
	}
	& .more {
		margin: 7% auto;
		@include max-screen($breakpoint-tablet) {
			margin: 15% auto;
		}
		@include max-screen($breakpoint-mobile) {
			margin: 30% auto;
		}
	}
}
#pagetop {
	width: 50px;
	height: 50px;
	position: fixed;
	right: 11px;
	bottom: 30px;
	background: #FFF;
	opacity: 0.6;
	border-radius: 5px;
	border: 0.5px solid #666;
	& a {
		position: relative;
		display: block;
		width: 50px;
		height: 50px;
		text-decoration: none;
		text-align: center;
		&::before {
			content: '';
			display: block;
			position: absolute;
			top: 39%;
			left: 36%;
			width: 14px;
			height: 14px;
			border-right: 2px solid #666;
			border-bottom: 2px solid #666;
			-webkit-transform: rotate(-135deg);
			transform: rotate(-135deg);
		} 
	}
}