// Scss Document
/*--------------------
共通設定
----------------------*/
$ttl_bg:#f1eee9;
$ttl:#191a27;
$s_font:#7da8bb;
$a_bg:#c1ae96;
$a_font:#ffffff;
$breakpoint-notepad: 1600px; 
$breakpoint-tablet: 800px; 
$breakpoint-mobile: 769px;
@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: "a-otf-ryumin-pr6n", serif;
	font-weight: 400;
	color: #414141;
	font-size: 16px;
	text-align: center;
}
img {
	max-width: 100%;
	height: auto;
}
a {
	text-decoration: none;
	&.disabled {
		pointer-events: none;
		text-decoration: none;
	}
}
ul,ol {
	list-style: 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 .8s;
}
body {
	overflow-x: hidden;
}
.footer_copy {
	text-align: center;
	margin-bottom: 50px;
	& p {
		font-size: 0.7em;
	}
}
#global-nav {
	width: 100%;
	opacity: 0;
	text-align: center;
	height: 50px;
	background: rgba(255,255,255,0.8);
	position: absolute;
    & a {
        max-width: 300px;
		& img {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			max-width: 180px;
			@include max-screen($breakpoint-mobile) {
				max-width: 120px;
			}
		}
    }
	&.m_fixed {
		opacity: 1;
	  	position: fixed;
	  	top: 0;
	  	z-index: 9999;
		transition: all .5s;
	}
}
.lp_wrapper {
	overflow-x: hidden;
}
/*--------------------------------------------*/
.mv {
	margin: 0 auto;
}
.main-txt {
	max-width: 600px;
	margin: 10% auto;
	@include max-screen($breakpoint-tablet) {
		width: 80%;
	}
	& p {
		font-size: 0.9em;
		line-height: 2.0;
		@include max-screen($breakpoint-mobile) {
			font-size: .8em;
		}
		@include max-screen($breakpoint-mobile) {
			text-align: left;
		}
		& br {
			@include max-screen($breakpoint-mobile) {
				display: none;
			}
		}
	}
}
.menu {
	margin: 10% auto;
	& .ttl {
		margin-bottom: 3%;
		@include max-screen($breakpoint-mobile) {
			width: 60%;
			margin: 0 auto 3%;
		}
	}
	& ul {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		& li {
			padding: 1%;
			@include max-screen($breakpoint-mobile) {
				width: 30%;
			}
			& a {
				display: block;
				&:hover {
					opacity: 0.7;
				}
			}
		}
	}
}
section {
	margin: 20% auto;
}
.switch-item {
	background: $ttl_bg;
	padding: 4.0em 0 2.0em;
	@include max-screen($breakpoint-mobile) {
		padding: 4.0em 0;
	}
	& .box {
		display: flex;
		justify-content: center;
		align-items: center;
		max-width: 1000px;
		margin: 0 auto;
		flex-wrap: wrap;
		& div {
			text-align: left;
			&:first-child {
				width: 45%;
				text-align: center;
				@include max-screen($breakpoint-mobile) {
					width: 70%;
				}
			}
			&:last-child {
				width: 55%;
				@include max-screen($breakpoint-mobile) {
					width: 100%;
				}
			}
			& .ttl {
				max-width: 300px;
				@include max-screen($breakpoint-mobile) {
					max-width: 250px;
				}
			}
			& h2 {
				font-size: 1.5em;
				text-align: left;
				color: $ttl;
				@include max-screen($breakpoint-mobile) {
					text-align: center;
					font-size: 1.0em;
				}
			}
			& p {
				font-size: 1.0em;
				line-height: 2.0;
				text-align: left;
				color: $ttl;
				@include max-screen($breakpoint-mobile) {
					text-align: center;
					font-size: .7em;
				}
				&.price {
					font-size: 120%;
					@include max-screen($breakpoint-mobile) {
						font-size: 100%;
					}
					& a {
						border: 1px solid;
						padding: 0.1em 0.7em;
						margin-left: 2.0em;
						font-size: 70%;
						color: $ttl;
						transition: .4s;
						&:hover {
							background: $ttl;
							color: $ttl_bg;
						}
					}
				}
				&.detail {
					font-size: 80%;
					margin-top: 2.0em;
					@include max-screen($breakpoint-mobile) {
						width: 80%;
						text-align: left;
						margin: 2.0em auto 0;
						font-size: 60%;
					}
				}
			}
		}
	}
}
.coodeBox {
	padding: 4.0em 0 0;
	&.autumn {
		background: $a_bg;
		padding-bottom: 4.0em;
	}
	& h3 {
		text-align: left;
		font-size: .9em;
		line-height: 2.5;
		@include max-screen($breakpoint-mobile) {
			text-align: center;
			line-height: 1.4;
			margin-bottom: 1.0em;
			font-size: 0.7em;
		}
		& span {
			font-size: 200%;
			margin-right: 1.0em;
			@include max-screen($breakpoint-mobile) {
				margin-right: 0;
				font-size: 250%;
				display: block;
			}
		}
		&.summer-ttl {
			& span {
				color: $s_font;
			}
		}
		&.autumn-ttl {
			color: $a_font;
			& span {
				color: $a_font;
			}
		}
	}
	& .box {
		max-width: 1000px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		flex-wrap: wrap;
		& div {
			width: 50%;
			@include max-screen($breakpoint-mobile) {
				width: 100%;
				padding: 0 15%;
			}
			&:last-child {
				padding-left: 2.0em;
				@include max-screen($breakpoint-mobile) {
					padding: 0 10%;
				}
			}
			& .detail {
				font-size: 0.8em;
				line-height: 2.0;
				text-align: left;
				margin : 3.0em auto;
				@include max-screen($breakpoint-mobile) {
					font-size: .7em;
				}
			}
		}
		& .credit {
			& li {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px dashed;
				margin-bottom: 1.0em;
				line-height: 1.0;
				padding: 0.5em 1.0em 0.6em;
				font-size: 0.9em;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.7em;
				}
				& p {
					font-size: 100%;
					display: flex;
					justify-content: space-between;
					width: 50%;
					& span {
						font-size: 100%;
					}
				}
				& a {
					font-size: 80%;
					border: 1px solid;
					padding: 0.5em 1.0em;
					transition: .4s;
					&.disabled {
						border: none;
					}
					&:hover {
						background: #333;
						color: #fff;
					}
				}
			}
		}
	}
	&.autumn {
		& h3 {
			max-width: 1000px;
			width: 100%;
			margin: 0 auto;
			@include max-screen($breakpoint-mobile) {
				margin-bottom: 1.0em;
			}
		}
		& .box {
			align-items: flex-start;
			& div {
				&:first-child {
					width: 60%;
					@include max-screen($breakpoint-mobile) {
						width: 90%;
						padding: 0;
					}
				}
				&:last-child {
					width: 40%;
					@include max-screen($breakpoint-mobile) {
						width: 90%;
						padding: 0;
						text-align: right;
					}
					& img  {
						@include max-screen($breakpoint-mobile) {
							width: 90%;
							margin-top: 5%;
						}
					}
				}
				& .detail {
					color: $a_font;
				}
				& .credit {
					& li {
						border-color: $a_font;
						& p {
							color: $a_font;
							& span {
								color: $a_font;
							}
						}
						& a {
							color: $a_font;
							border-color: $a_font;
							&:hover {
								background: $a_font;
								color: $a_bg;
							}
						}
					}
				}
			}
		}
	}
}
.line{
    position:relative;
    height:200px;
	margin: 2% auto;
	@include max-screen($breakpoint-mobile) {
		height: 100px;
	}
	&::after{
        content: "";
        position: absolute;
        top: 0;
		left: 50%;
		transform: translateX(-50%);
        width: 1px;
        height: 100px;
        background: #414141;
        animation: pathmove 2s ease-in infinite;
		opacity: 0;
		@include max-screen($breakpoint-mobile) {
			height: 50px;
			width: 0.5px;
		}
	}
	& img {
		position: absolute;
		top: 45%;
		left: 57%;
		transform: translate(-50%,-50%);
		@include max-screen($breakpoint-mobile) {
			left: 65%;
			max-width: 70px;
		}
	}
}
@keyframes pathmove{
 0% {
        height: 0;
	 	opacity: 0.5;
    }
    100% {
		opacity: 1;
        height: 100%;
    }
}