// Scss Document
/*--------------------
共通設定
----------------------*/
$base-color:#fff;
$eng:baskerville-poster-pt, serif;
$ja: a-otf-ryumin-pr6n, serif;
$pink:#fff5f9;
$aqua:#c4ecf4;

$breakpoint-notepad: 1500px; 
$breakpoint-tablet: 1024px; 
$breakpoint-mobile: 640px;
@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: .1em;
	font-family: $ja;
	font-weight: 400;
	color: #000;
	font-size: 16px;
}
img {
	width: 100%;
}
a {
	text-decoration: none;
	&.disabled {
	  pointer-events: none;
	}
}
ul,ol,li {
	list-style: none;
}
.pc {
  display: block;
  @include max-screen($breakpoint-mobile) {
    display: none;
  }
}
.sp {
  display: none;
  @include max-screen($breakpoint-mobile) {
    display: block;
  }
}
body {
	width: 100%;
	margin: 0 auto;
	overflow-x: hidden;
}
/*--------------------------------------------*/
.fadein {
	opacity: 0;
	transform: translateY(0px);
	transition: all 1s;
}
.header {
    position: fixed;
	padding: 15px 0;
    left: 15px;
	z-index: 10;
    & a {
        max-width: 300px;
		& img {
			max-width: 180px;
			@include max-screen($breakpoint-mobile) {
				max-width: 120px;
			}
		}
    }
}
.wrapper {
	width: 100%;
	margin: 0 auto;
	& .mv {
		margin-bottom: 15%;
		& .pc {
			max-width: 1978px
		}
		& .sp {
			max-width: 800px;
		}
	}
	& .main_txt {
		text-align: center;
		& h1 {
			font-size: 1.4em;
			line-height: 1.5;
			@include max-screen($breakpoint-tablet) {
				font-size: 1.2em;
			}
			@include max-screen($breakpoint-mobile) {
				font-size: 1.1em;
			}
		}
		& h2 {
			margin: 1% auto;
			@include max-screen($breakpoint-mobile) {
				margin:2% auto 4%;
			}
			& span {
				font-size: 1.2em;
				@include max-screen($breakpoint-tablet) {
					font-size: 1.0em;
				}
				@include max-screen($breakpoint-mobile) {
					font-size: 0.9em;
				}
			&.c-marker {
				background: -webkit-linear-gradient(left, #fbe7ff 50%, transparent 50%);
				background: -moz-linear-gradient(left, #fbe7ff 50%, transparent 50%);
				background: linear-gradient(left, #fbe7ff 50%, transparent 50%);
			    background-repeat: no-repeat;
			    background-size: 200% .8em; 
				background-position: 100% .8em;
				transition: 1.0s;
			}
			&.c-marker.is-active{
				background-position: 0% .8em;
			}
			}
		}
		& p {
			font-size: 1.1em;
			font-family: $eng;
			@include max-screen($breakpoint-tablet) {
				font-size: 0.8em;
			}
			@include max-screen($breakpoint-mobile) {
					font-size: 0.7em;
			}
			& span {
				font-size: 70%;
				margin: 0 7px;
				font-family: $eng;
			}
		}
		& div {
			margin: 7% auto;
			@include max-screen($breakpoint-mobile) {
				margin: 10% auto 20%;
			}
			& p {
				font-size: 0.9em;
				line-height: 2.0;
				@include max-screen($breakpoint-tablet) {
					font-size: 0.8em;
				}
				@include max-screen($breakpoint-mobile) {
					font-size: 0.6em;
				}
			}
		}
	}
	& .code-menu {
		max-width: 700px;
		margin: 0 auto 20%;
		@include max-screen($breakpoint-notepad) {
			max-width: 580px;
		}
		@include max-screen($breakpoint-mobile) {
			width: 97%;
		}
		ol {
			display: flex;
			justify-content: center;
			align-items: center;
			& li {
				& a {
					display: block;
					& img {
						max-height: 627px;
					}
				}
			}
		}
	}
	& section {
		margin: 15% auto;
		text-align: center;
		@include max-screen($breakpoint-mobile) {
			margin: 25% auto;
		}
		& .ttl {
			display: inline-block;
			margin: 0 auto;
			text-align: left;
			@include max-screen($breakpoint-tablet) {
				margin-bottom: 7%;
			}
			@include max-screen($breakpoint-mobile) {
				display: block;
				margin-left: 5%;
				margin-bottom: 5%;
			}
			& h2 {
				font-size: 2.4em;
				font-family: $eng;
				line-height: 1.0;
				@include max-screen($breakpoint-mobile) {
					font-size: 1.5em;
				}
				& span {
					font-size: 100%;
					font-family: $eng;
					font-style: italic;
				}
			}
			& h3 {
				margin-top: 1%;
				font-size: 1.1em;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.7em;
				}
			}
		}
		& .hira {
			max-width: 450px;
			margin: 5% auto 0;
			display: block;
			position: relative;
			z-index: 3;
			@include max-screen($breakpoint-tablet) {
				width: 55%;
				margin-top: -3%;
			}
			@include max-screen($breakpoint-mobile) {
				width: 50%;
				margin-top: -1%;
			}
		}
		& .coordinate-txt {
			background: $pink;
			padding: 5% 5% 3%;
			width: 100%;
			margin-top: -2%;
			text-align: left;
			@include max-screen($breakpoint-mobile) {
				padding: 10% 5% 8%;
				margin-top: -4%;
			}
			& p {
				max-width: 550px;
				margin: 0 auto;
				font-size: 0.9em;
				line-height: 2.0;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.6em;
					line-height: 1.8;
				}
			}
		}
		& .coordinate-image {
			margin: 10% auto;
			max-width: 550px;
			@include max-screen($breakpoint-notepad) {
				max-width: 500px;
			}
			@include max-screen($breakpoint-mobile) {
				width: 90%;
			}
			& .winterLook {
				max-width: 300px;
				margin-bottom: 1%;
				@include max-screen($breakpoint-notepad) {
					max-width: 220px;
				}
				@include max-screen($breakpoint-mobile) {
					width: 55%;
					margin-bottom: 7%;
				}
			}
			& .slider {
				margin: 0 auto;
				& img {
					widows: 100%;
				}
			}
			.slick-slider {
				line-height: 0;
			}
			button{
			  margin: 0;
			  padding: 0;
			  background: none;
			  border: none;
			  border-radius: 0;
			  outline: none;
			  -webkit-appearance: none;
			  -moz-appearance: none;
			  appearance: none;
			}
			.slide-dots{
			  text-align: center;
				margin-top: 5%;
			  li{
				display: inline-block;
				margin: 0 10px;
				button{
				  position: relative;
				  text-indent: -9999px;
				  &:before{
					content: '';
					width: 5px;
					  height: 5px;
					  border-radius: 50%;
					  font-size: 10px;
					  background: #ccc;
					position: absolute;
					top: 0;
					left: 0;
				  }
				}
				&.slick-active{
				  button:before{
					content: '';
					  background-color: #565656;
				  }
				}
			  }
			}
			& .styling-txt {
				margin: 5% auto;
				& p {
					font-size: 0.7em;
					text-align: left;
					line-height: 1.8;
				}
			}
			& .styling-item {
				margin: 10% auto;
				text-align: left;
				& h4 {
					& span {
						font-family: $eng;
						font-weight: 600;
						font-size: 1.0em;
						margin-bottom: 2%;
						&.aqua {
							background:linear-gradient(transparent 60%, $aqua 60%);
						}
						&.pink {
							background:linear-gradient(transparent 60%, #fbe7ff 60%);
						}
					}
				}
				& ol {
					margin: 2% auto 5%;
					& li {
						margin-bottom: 2%;
						@include max-screen($breakpoint-mobile) {
							margin-bottom: 1%;
						}
						& span {
							font-size: 0.7em;
							margin-left: 10px;
							letter-spacing: 0;
						}
						& a {
							font-size: 0.7em;
							& span {
								font-size: 1.0em;
								letter-spacing: .1em;
								margin: 0;
								@include max-screen($breakpoint-mobile) {
									font-size: 0.9em;
								}
								&.line {
									text-decoration: underline;
								}
							&.icon {
								font-size: .7em;
								background: #666;
								color: #fff;
								border: 1px solid transparent;
								margin-left: 10px;
								padding: 1px 3px;
							}
							&.icon_2 {
								font-size: .7em;
								background: #fff;
								border: 1px solid #666;
								color: #666;
								margin-left: 10px;
								padding: 1px 3px;
							}
							}	
						}
						
					}
				}
			}

		}
			
	}
	& .footer {
		position: relative;
		text-align: center;
		& .bg {
			background: repeating-linear-gradient(-45deg, #fff, #fff 3px, $pink 3px, $pink 6px);
			position: absolute;
			width: 100%;
			height: 200px;
			top: 0;
			bottom: 0;
			margin: auto;
			@include max-screen($breakpoint-mobile) {
				height: 180px;
			}
		}
		& img {
			position: relative;
			max-width: 200px;
			z-index: 3;
			@include max-screen($breakpoint-mobile) {
				width: 35%;
			}
		}
	}	
	& .credit {
		margin-top: 5%;
		text-align: center;
		@include max-screen($breakpoint-mobile) {
			margin-top: 15%;
		}
		& p {
			font-size: 0.7em;
			padding-bottom: 15px;
			font-family: $eng;
			@include max-screen($breakpoint-mobile) {
				font-size: 0.6em;
			}
		}
	}
	
}