// Scss Document
/*--------------------
共通設定
----------------------*/
$bg-color:#ffffff;
$eng:baskerville-display-pt, serif;
$font-size:16px;
$small:75%;
$breakpoint-notepadbig: 1950px; 
$breakpoint-notepad: 1500px; 
$breakpoint-tablet: 1000px; 
$breakpoint-mobile: 800px;
@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: 1px;
	font-family: a-otf-ryumin-pr6n, serif;
	font-weight: 400;
	color: #000000;
}
img {
	width: 100%;
}
a {
	text-decoration: none;
	&.disabled {
	pointer-events: none;
	}
}
.pc {
  display: block;
  @include max-screen($breakpoint-mobile) {
    display: none;
  }
}
.sp {
  display: none;
  @include max-screen($breakpoint-mobile) {
    display: block;
  }
}
.fadein {
	opacity: 0;
	transform: translateY(0px);
	transition: all 0.8s;
}

body {
	background: $bg-color;
	overflow-x: hidden;
}

#pagetop {
	width: 50px;
	height: 50px;
	position: fixed;
	right: 11px;
	bottom: 30px;
	background: #FFF;
	opacity: 0.6;
	border-radius: 5px;
	border: 0.5px solid #666;
	z-index: 50;
	& 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);
		}
	}
}

/*--------------------------------------------*/
#global-nav {
	width: 100%;
	  margin-left: 10px;
	opacity: 0;
    & a {
        max-width: 300px;
		& img {
			max-width: 180px;
			@include max-screen($breakpoint-mobile) {
				max-width: 120px;
			}
		}
    }
	&.m_fixed {
		opacity: 1;
	  position: fixed;
	  top: 7px;
	  z-index: 9999;
		transition: all .5s;
	}
}


.wrapper {
	width: 100%;
	background: #fff;
	margin: 0 auto;
	overflow-x: hidden;
	& .mv {
		max-width: 1920px;
		margin-bottom: 15%;
	}
	& .codeList {
		display: flex;
		justify-content: center;
		width: 100%;
		margin: 25% auto;
		align-items: center;
		flex-wrap: wrap;
		max-width: 1400px;
		list-style: none;
		@include max-screen($breakpoint-notepad) {
			max-width: 1000px;
			width: 90%;
		}
		@include max-screen($breakpoint-mobile) {
			width: 97%;
		}
		& li {
			padding: 0.1% 0.3%;
			width: 20%;
			@include max-screen($breakpoint-mobile) {
				padding: 0 0.6%;
			}
			& a {
				display: block;
				& img {
					object-fit: cover;
				}
				&:hover {
					opacity:0.5;
					transition: .4s;
				}
			}
		}
	}
	& section {
		margin: 15% auto 20%;
		@include max-screen($breakpoint-mobile) {
			margin-top: 40%;
		}
	&#code01 {
		max-width: 1400px;
		@include max-screen($breakpoint-notepad) {
			max-width: 1000px;
		}
		@include max-screen($breakpoint-mobile) {
			margin-top: 20%;
		}
		& div {
			& .flex {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				max-width: 900px;
				margin: 0 auto;
				@include max-screen($breakpoint-mobile) {
					display: block;
				}
				& .left {
					max-width: 550px;
					margin: 0;
					@include max-screen($breakpoint-tablet) {
						width: 80%;
					}
					@include max-screen($breakpoint-mobile) {
						width: 100%;
						max-width:none;
					}
					& img {
						max-width: 100%;
						height: auto;
						object-fit: cover;
						display: block;
						@include max-screen($breakpoint-mobile) {
							max-width: 60px;
						}
					}
				}
				& .right {
					max-width: 350px;
					margin: 0 auto;
					@include max-screen($breakpoint-tablet) {
						width: 20%;
					}
					@include max-screen($breakpoint-mobile) {
						width: 80%;
						margin-top: 40px;
						max-width:none;
					}
				}
				&.pc {
					@include max-screen($breakpoint-mobile) {
						display: none;
					}
				}
				&.sp {
					display: none;
					@include max-screen($breakpoint-mobile) {
						display: block;
					}
				}
			}
			& .center {
				align-items: center;
				@include max-screen($breakpoint-mobile) {
					width: 80%;
				}
				& .right {
					margin: 0;
					width: 40%;
					@include max-screen($breakpoint-mobile) {
						width: 100%;
						text-align: right;
					}
					& img {
						@include max-screen($breakpoint-mobile) {
							width: 60%;
						}
					}
				}
				& .credit {
					padding-left: 1%;
					@include max-screen($breakpoint-mobile) {
						padding: 0;
						margin: 20% auto;
					}
				}
			}
			&.one {
				max-width: 1000px;
				margin-top: 5%;
				@include max-screen($breakpoint-notepad) {
					max-width: 800px;
				}
				@include max-screen($breakpoint-mobile) {
					margin-top: 20%;
				}
			}
		}
	}
	& .credit {
		& a {
			display: block;
			line-height: 2.2;
			font-size: 0.8em;
			@include max-screen($breakpoint-mobile) {
				font-size: 0.7em;
				line-height: 1.8;
			}
			& span {
				margin-left: 10px;
				font-size: 90%;
				@include max-screen($breakpoint-mobile) {
					margin-left: 5px;
					font-size: 85%;
				}
			}
		}
	}
	& .ttl {
		text-align: center;
		& .number {
			max-width: 125px;
			margin: 40px auto;
			@include max-screen($breakpoint-tablet) {
				max-width: 90px;
				margin: 20px auto;
			}
			@include max-screen($breakpoint-mobile) {
				max-width: 60px;
			}
		}
		& p {
			font-size: 0.8em;
			line-height: 2.5;
			@include max-screen($breakpoint-tablet) {
				font-size: 0.7em;
			}
			@include max-screen($breakpoint-mobile) {
				font-size: 0.6em;
				line-height: 1.8;
			}
		}
	}
	
	&#code02 {
		max-width: 1400px;
		@include max-screen($breakpoint-notepad) {
			max-width: 1000px;
		}
		& .code {
			margin: 8% auto 0;
			text-align: center;
			& .image1 {
				max-width: 809px;
			}
			& .image2 {
				max-width: 952px;
				margin-top: 10%;
			}
			& .credit {
				margin: 1% auto;
				max-width: 850px;
				text-align: left;
				width: 89%;
			}
		}
	}
		&#code03 {
		max-width: 1400px;
			@include max-screen($breakpoint-notepad) {
				max-width: 1000px;
			}
			& div {
				&.code {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					@include max-screen($breakpoint-mobile) {
						display: block;
					}
					& .left {
						max-width: 400px;
						margin: 0 auto;
						@include max-screen($breakpoint-notepad) {
							width: 25%;
							padding: 0 5% 0 0;
						}
						@include max-screen($breakpoint-mobile) {
							width: 100%;
							padding: 0;
							margin-bottom: 60px;
						}
					}
					& .right {
						position: relative;
						max-width: 1000px;
						@include max-screen($breakpoint-notepad) {
							width: 70%;
						}
						@include max-screen($breakpoint-mobile) {
							width: 90%;
							margin: 0 0 35% auto;
						}
					}
				}
			}
			& .circle {
				max-width: 200px;
				position: absolute;
				top: -10%;
				left: -7%;
				animation:12s linear infinite rotation;
				@include max-screen($breakpoint-notepad) {
					width: 20%;
				}
				@include max-screen($breakpoint-mobile) {
					width: 30%;
					top: -18%;
					left: -8%;
				}
			}
			& .code-credit {
				display: flex;
				justify-content: space-between;
				align-items: center;
				max-width: 900px;
				margin: 5% auto;
				@include max-screen($breakpoint-tablet) {
					justify-content: flex-start;
				}
				@include max-screen($breakpoint-mobile) {
					display: block;
				}
				& .left {
					max-width: 550px;
					@include max-screen($breakpoint-tablet) {
						width: 70%;
					}
				}
				& .right {
					max-width: 350px;
					@include max-screen($breakpoint-tablet) {
						width: 30%;
						margin: 0 auto;
					}
					@include max-screen($breakpoint-mobile) {
						width: 100%;
						max-width: 210px;
						margin: 10% auto;
					}
				}
			}
		}
		& .slider {
			max-width: 550px;
			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: 3%;
			  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;
				  }
				}
			  }
			}
		&#code04 {
			max-width: 1400px;
			@include max-screen($breakpoint-notepad) {
				max-width: 1000px;
			}
			& .code-ttl {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				@include max-screen($breakpoint-mobile) {
					width: 85%;
					margin: 0 auto;
				}
				& div {
					padding: 0.5%;
					& .ttl {
						margin:60px auto 100px;
						@include max-screen($breakpoint-mobile) {
							margin: 20px auto 50px;
						}
					}
				}
			}
			& .code-credit {
				max-width: 800px;
				margin: 20% auto;
				@include max-screen($breakpoint-mobile) {
					width: 90%;
				}
			}
		}
		&#code05 {
			max-width: 1400px;
			text-align: center;
			@include max-screen($breakpoint-notepad) {
				max-width: 1000px;
			}
			& .max_900 {
				max-width: 900px;
				margin: 10% auto;
				@include max-screen($breakpoint-mobile) {
					width: 90%;
				}
			}
			& .code-credit {
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: left;
				@include max-screen($breakpoint-mobile) {
					display: block;
				}
				& .credit {
					@include max-screen($breakpoint-notepad) {
						max-width: 30%;
					}
					@include max-screen($breakpoint-tablet) {
						margin: 0 auto;
					}
					@include max-screen($breakpoint-mobile) {
						max-width: 90%;
					}
				}
				& .right {
					@include max-screen($breakpoint-notepad) {
						max-width: 70%;
					}
					@include max-screen($breakpoint-mobile) {
						max-width: 85%;
						margin: 20% auto;
					}
				}
			}
		}	
		&#code06 {
			& .code-ttl {
				position: relative;
				max-width: 1400px;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				align-items: flex-start;
				z-index: 2;
				@include max-screen($breakpoint-notepad) {
					max-width: 1400px;
					width: 100%;
				}
				@include max-screen($breakpoint-notepad) {
					max-width: 1000px;
					width: 100%;
				}
				@include max-screen($breakpoint-mobile) {
					display: block;	
				}
				& .right {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					@include max-screen($breakpoint-notepad) {
						width: 100%;
						justify-content: flex-end;
					}
					@include max-screen($breakpoint-mobile) {
						margin-top: 60px;
						justify-content: center;
					}
					
					& img {
						padding: 1%;
						@include max-screen($breakpoint-notepad) {
							width: 45%;
							padding: 0.5%;
						}
					}
				}
				& .left {
						@include max-screen($breakpoint-notepad) {
							width: 40%;
						}
					@include max-screen($breakpoint-mobile) {
						width: 100%;
					}
					}
			}
			& .code-credit {
				position: relative;
				max-width: 1600px;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: -7%;
				z-index: 1;
				@include max-screen($breakpoint-mobile) {
					display: block;
					margin-top: 20%;
				}
				& .left {
					max-width: 1300px;
					@include max-screen($breakpoint-notepadbig) {
						width: 55%;
					}
					@include max-screen($breakpoint-notepad) {
						width: 80%;
					}
					@include max-screen($breakpoint-tablet) {
						width: 65%;
					}
					@include max-screen($breakpoint-mobile) {
						width: 100%;
					}
				}
				& .credit {
					margin: 0 auto;
					@include max-screen($breakpoint-notepad) {
						width: 20%;
						padding-left: 1%;
					}
					@include max-screen($breakpoint-tablet) {
						width: 35%;
					}
					@include max-screen($breakpoint-mobile) {
						width: 100%;
						padding: 0;
						max-width: 200px;
						margin: 5% 1% 5% auto;
					}
				}
			}
		}
		&#code07 {
			& .max_900 {
				max-width: 900px;
				margin: 5% auto;
				@include max-screen($breakpoint-tablet) {
					width: 80%;
				}
				@include max-screen($breakpoint-mobile) {
					width: 100%;
				}
				& img {
					margin-bottom: 1%;
				}
				& .code-credit {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 5%;
					@include max-screen($breakpoint-mobile) {
						display: block;
						width: 65%;
						margin: 30% 0 0 auto;
					}
					& .right {
						max-width: 550px;
						@include max-screen($breakpoint-tablet) {
							width: 50%;
						}
						@include max-screen($breakpoint-mobile) {
							width: 100%;
							margin-top: 15%;
						}
					}
				}
			}
		}
		&#code08 {
			& .code-credit {
				max-width: 900px;
				margin: 5% auto;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				@include max-screen($breakpoint-tablet) {
					width: 80%;
				}
				@include max-screen($breakpoint-mobile) {
					width: 96%;
				}
				& div {
					width: 50%;
					padding: 0.3% 0.5%;
					@include max-screen($breakpoint-mobile) {
						padding: 0.1% 0.7%;
					}
				}
			}
			& .code-image {
				max-width: 1100px;
				margin: 0 auto;
				@include max-screen($breakpoint-notepad) {
					width: 80%;
				}
				@include max-screen($breakpoint-mobile) {
					width: 100%;
					margin: 20% auto 30%;
				}
			}
		}
		&#code09 {
			max-width: 900px;
			margin: 15% auto 20%;
			@include max-screen($breakpoint-tablet) {
				width: 80%;
			}
			@include max-screen($breakpoint-mobile) {
				width: 90%;
			}
			& .code-slide {
				position: relative;
				width: 100%;
				margin: 10% auto 5%;
				& .slider {
					max-width: 900px;
				}
				& .circle {
					max-width: 180px;
					position: absolute;
					top: -90px;
					left: -90px;
					animation:12s linear infinite rotation;
					z-index: 10;
					@include max-screen($breakpoint-tablet) {
						width: 20%;
						top: -14%;
						left: -10%;
					}
					@include max-screen($breakpoint-mobile) {
						width: 23%;
						left: -4%;
						top: -20%;
					}
				}
			}
			& .credit {
				text-align: left;
				@include max-screen($breakpoint-mobile) {
					margin: 10% auto 15%;
				}
			}
			& .code-slide2 {
				margin: 10% auto;
				@include max-screen($breakpoint-mobile) {
					width: 70%;
				}
				& .slider {
					max-width: 500px;
				}
			}
		}
		&#code10 {
			& .code-ttl {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				@include max-screen($breakpoint-notepad) {
					max-width: 1000px;
					margin: 0 auto;
				}
				& .left {
					max-width: 1200px;
					@include max-screen($breakpoint-notepad) {
						width: 70%;
					}
					@include max-screen($breakpoint-mobile) {
						width: 90%;
					}
				}
				& .ttl {
					margin: 0 auto;
					@include max-screen($breakpoint-notepad) {
						width: 30%;
					}
					@include max-screen($breakpoint-mobile) {
						width: 100%;
						margin-bottom: 10%;
					}
				}
				&.pc {
					display: flex;
					@include max-screen($breakpoint-mobile) {
						display: none;
					}
				}
				&.sp {
					display: none;
					@include max-screen($breakpoint-mobile) {
						display: block;
					}
				}
			}
			& .code-credit {
				display: flex;
				justify-content: space-between;
				align-items: center;
				max-width: 1400px;
				margin: 10% auto;
				@include max-screen($breakpoint-notepad) {
					max-width: 1000px;
				}
				@include max-screen($breakpoint-tablet) {
					justify-content: flex-end;				
				}
				@include max-screen($breakpoint-mobile) {
					display: block;
					margin: 3% auto;
				}
				& .credit {
					margin: 0 auto;
					@include max-screen($breakpoint-notepad) {
						width: 35%;
					}
					@include max-screen($breakpoint-tablet) {
						padding-left: 1%;
					}
					@include max-screen($breakpoint-mobile) {
						width: 100%;
						padding-left: 5%;
					}
				}
				& .right {
					max-width: 900px;
					margin: 0 auto;
					@include max-screen($breakpoint-tablet) {
						width: 65%;
					}
					@include max-screen($breakpoint-mobile) {
						width: 70%;
						margin: 10% 0 20% auto;
					}
				}
			}
			& .code-image {
				max-width: 900px;
				margin: 10% auto;
				@include max-screen($breakpoint-mobile) {
					width: 90%;
				}
			}
		}
		&#answer {
			background: #d5d5d5;
			text-align: center;
			padding: 5%;
			margin-bottom: 10%;
			@include max-screen($breakpoint-mobile) {
				padding: 10% 5%;
			}
			& h3 {
				font-size: 1.2em;
				margin-bottom: 2%;
				font-weight: 600;
				@include max-screen($breakpoint-tablet) {
					font-size: 1.0em;
				}
				@include max-screen($breakpoint-mobile) {
					font-size: 0.8em;
				}
			}
			& p {
				font-size: 0.8em;
				line-height: 2.0;
				margin-bottom: 5%;
				@include max-screen($breakpoint-tablet) {
					font-size: 0.7em;
				}
				@include max-screen($breakpoint-mobile) {
					margin: 3% auto 10%;
					line-height: 1.9;
				}
				& span {
					font-size: 120%;
					text-decoration: underline;
				}
			}
			& a {
				padding: 15px 70px 15px 45px;
				border: 1px solid #666;
				font-size: 1.0em;
				position: relative;
				@include max-screen($breakpoint-tablet) {
					font-size: 0.8em;
				}
				&::after {
					content: ">";
					position: absolute;
					color: #fff;
					font-size: 12px;
					width: 20px;
					height: 20px;
					border-radius: 50%;
					background: #000;
					top: 0;
					bottom: 0;
					margin: auto;
					margin-left: 10px;
					@include max-screen($breakpoint-tablet) {
						width: 16px;
						height: 16px;
						font-size: 10px;
						margin-left: 5px;
						padding-left: 2px;
					}
				}
				&:hover {
					background: #000;
					color: #fff;
					transition: .7s;
					&::after {
						color: #000;
						background: #fff;
						transition: .7s;
					}
				}
			}
		}
		&#foot {
			text-align: center;
			& .image {
				max-width: 376px;
				margin: 0 auto 4%;
				@include max-screen($breakpoint-mobile) {
					width: 50%;
				}
			}
			& p {
				margin-bottom: 2%;
				line-height: 2.2;
				font-size: 0.7em;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.6em;
					text-align: left;
					width: 75%;
					margin: 2% auto 7%;
				}
			}
			& .logo {
				max-width: 350px;
				@include max-screen($breakpoint-mobile) {
					width: 50%;
				}
			}
		}
	}
	& .copywriting {
		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;
			}
		}
	}

}
#back {
    & .backNumber {
        max-width: 800px;
        margin: 0 auto;
        display: flex;
        width: 80%;
        @include max-screen($breakpoint-mobile) {
            display: block;
        }
        & div {
            padding: 1%;
        }
    }

}
@keyframes rotation{
  0%{ transform:rotate(0);}
  100%{ transform:rotate(360deg); }
}	

.popup-wrap {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: 0.5s;
	&.active {
	  visibility: visible;
		opacity: 1;
	}
	& .popup-content {
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translateX(-50%) translateY(-50%);
	  background-color: #fff;
	  padding: 50px 10px 10px;
	  text-align: center;
		@include max-screen($breakpoint-mobile) {
			left: 30%;
			transform: translateX(-20%) translateY(-50%);
		}
	}
	& .onetime_popup_title_close {
		position: absolute;
		top: 6px;
		right: 32px;
		cursor: pointer;
		&::before {
			position: absolute;
		   font-size: 25px;
			content: "×";
			color: #666;
		}	
	}
	& .image_popup {
		max-width: 350px;
	}
}