// Scss Document
/*--------------------
共通設定
----------------------*/
$eng:"minion-pro", serif;
$min:'Noto Serif JP', serif;
$pink:#eeacb4;
$btn:#eeacb4;
$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;
  }
}
html {
	scroll-behavior: smooth;	
}
* {
	margin: 0;
	padding: 0;
	letter-spacing: 0.1em;
	font-family: "kozuka-gothic-pr6n", sans-serif;
	font-weight: 400;
	color: #555555;
	font-size: 16px;
	text-align: center;
}
img {
	width: 100%;
}
a {
	text-decoration: none;
	&.disabled {
		pointer-events: none;
		text-decoration: 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 {
	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);
		}
	}
}
.footer_copy {
	text-align: center;
	margin-bottom: 10px;
	& p {
		font-size: 0.7em;
	}
}
#global-nav {
	width: 100%;
	text-align: center;
	height: 50px;
	background: rgba(255,255,255,0.8);
	position:fixed;
	z-index: 1000;
    & 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;
			}
		}
    }

}
/*----------------------------------------------------------*/
.lp_wrapper {
	margin: 0 auto;
	padding-top: 50px;
}
.mv {
	margin: 0 auto;
	max-width: 990px;
}
.mainTxt {
	margin: 10% auto;
	display: block;
	@include max-screen($breakpoint-notepad) {
		margin: 15% auto;
	}
	@include max-screen($breakpoint-tablet) {
		margin-bottom: 10%;
	}
	& h2 {
		font-family: $min;
		font-size: 1.3em;
		color: $pink;
		margin-bottom: 1.5%;
		@include max-screen($breakpoint-tablet) {
			font-size: 1.0em;
		}
		& span {
			font-family: $min;
			font-size: 70%;
			color: $pink;
		}
	}
	& h1 {
		font-size: 1.5em;
		letter-spacing: 0.2em;
		font-family: $min;
		line-height: 1.3;
		margin-bottom: 3%;
		@include max-screen($breakpoint-tablet) {
			font-size: 1.3em;
			margin-bottom: 5%;
		}
		@include max-screen($breakpoint-mobile) {
			font-size: 1.1em;
		}
	}
	& p {
		text-align: left;
		font-size: 0.9em;
		line-height: 2.0;
		display: inline-block;
		@include max-screen($breakpoint-notepad) {
			font-size: 0.7em;
		}
		@include max-screen($breakpoint-tablet) {
			width: 80%;
			text-align: justify;
		}
		& span.pink {
			color: $pink;
			font-size: 100%;
		}
	}
}
.menu {
	margin: 0 auto 10%;
	padding-top: 50px;
	@include max-screen($breakpoint-notepad) {
		margin-bottom: 15%;
	}
	& .p_Meenu {
		max-width: 500px;
		margin: 0 auto;
		border-top: 1px solid $pink;
		& a {
			border-bottom: 1px solid $pink;
			display: block;
			line-height: 0;
			& img {
				padding: 5%;
				@include max-screen($breakpoint-tablet) {
					width: 80%;
					padding: 5% 0;
				}
			}
		}
	}
}
section {
	margin: 10% auto;
	padding-top: 70px;
	@include max-screen($breakpoint-notepad) {
		margin-bottom: 25%;
	}
	& h2 {
		display: inline-block;
		font-size: 1.2em;
		font-family: $min;
		text-align: left;
		margin-bottom: 1.5%;
		@include max-screen($breakpoint-notepad) {
			font-size: 1.0em;
		}
		@include max-screen($breakpoint-tablet) {
			margin-bottom: 5%;
		}
		@include max-screen($breakpoint-mobile) {
			font-size: 0.9em;
		}
		& span {
			font-family: $min;
			font-size: 130%;
			@include max-screen($breakpoint-mobile) {
				font-size: 120%;
			}
			&.pink {
				color: $pink;
			}
		}
	}
	& p {
		font-size: 0.9em;
		text-align: left;
		display: inline-block;
		@include max-screen($breakpoint-notepad) {
			font-size: 0.7em;
		}
		&.pc {
			display: inline-block;
			@include max-screen($breakpoint-tablet) {
				display: none;
			}
		}
		&.sp {
			display: none;
			@include max-screen($breakpoint-tablet) {
				display: inline-block;
			}
		}
	}
	& .code {
		max-width: 1000px;
		margin: 5% auto;
		@include max-screen($breakpoint-notepad) {
			width: 70%;
			margin: 10% auto;
		}
		@include max-screen($breakpoint-tablet) {
			width: 80%;
		}
		& .first {
			position: relative;
			z-index: 2;
			text-align: left;
		}
		& .second {
			position: relative;
			z-index: 1;
			margin-top: -20%;
			text-align: right;
		}
		& .third {
			position: relative;
			z-index: 3;
			text-align: center;
			margin-top: -7%;
		}
		& .max_536 {
			max-width: 536px;
			@include max-screen($breakpoint-notepad) {
				width: 55%;
			}
		}
		& .max_643 {
			max-width: 643px;
			@include max-screen($breakpoint-notepad) {
				width: 55%;
			}
		}
	}
	& .btn {
		max-width: 612px;
		margin: 1% auto 2%;
		transform: scale(1.0);
		transition: .4s;
		-erbkit-transition: .4s;
		@include max-screen($breakpoint-notepad) {
			max-width: 430px;
		}
		@include max-screen($breakpoint-mobile) {
			width: 90%;
			margin: 0 auto 6%;
		}
		&:hover {
			transform: scale(1.1);
			@include max-screen($breakpoint-mobile) {
				transform: scale(1.0);
			}
		}
		& a {
			line-height: 0;
			display: block;
		}
	}
	& .img-hide,& .img--hide{
		display: none;
		max-width: 640px;
		margin: 0 auto 5%;
		width: 90%;
	}
	& button {
		width: 100%;
		margin: 0 auto;
        @include max-screen($breakpoint-mobile) {
            width: 90%;
        }
		&.more {
			&::before {
				background: url("https://shopping.geocities.jp/pierrot-webshop/feature/2023/e1509-0222199_lp/image/stopan_button01.jpg");
				content: "";
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;
				max-width: 612px;
				width: 100%;
				height: 90px;
				margin: 0 auto;
				@include max-screen($breakpoint-notepad) {
					max-width: 430px;
					height: 60px;
				}
			}
			&.on-click::before {
				content: "";
				background: url("https://shopping.geocities.jp/pierrot-webshop/feature/2023/e1509-0222199_lp/image/stopan_button01-01.jpg");
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;
				max-width: 612px;
				width: 100%;
				height: 90px;
				margin: 0 auto;
				@include max-screen($breakpoint-notepad) {
					max-width: 430px;
					height: 60px;
				}
			}
		}
		&.more2 {
			&::before {
				background: url("https://shopping.geocities.jp/pierrot-webshop/feature/2023/e1509-0222199_lp/image/stopan_button03.jpg");
				content: "";
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;
				max-width: 612px;
				width: 100%;
				height: 90px;
				margin: 0 auto;
				@include max-screen($breakpoint-notepad) {
					max-width: 430px;
					height: 60px;
				}
			}
			&.on-click::before {
				content: "";
				background: url("https://shopping.geocities.jp/pierrot-webshop/feature/2023/e1509-0222199_lp/image/stopan_button03-01.jpg");
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;
				max-width: 612px;
				width: 100%;
				height: 90px;
				margin: 0 auto;
				@include max-screen($breakpoint-notepad) {
					max-width: 430px;
					height: 60px;
				}
			}
		}
	}
	& .pointTxt {
        @include max-screen($breakpoint-mobile) {
            width: 80%;
			margin: 0 auto;
        }
    }
	& .size {
		max-width: 800px;
		margin: 5% auto;
		@include max-screen($breakpoint-mobile) {
			width: 90%;
		}
		& p {
			display: inline-block;
			font-size: 1.0em;
			font-family: $min;
			text-align: left;
			margin-bottom: 1.5%;
			& span {
				font-family: $min;
				font-size: 80%;
				&.pink {
					font-size: 130%;
					color: $pink;
				}
			}
		}
	}
	& .style_menu {
		margin: 5% auto;
		@include max-screen($breakpoint-notepad) {
			margin: 10% auto;
		}
		@include max-screen($breakpoint-mobile) {
			margin: 15% auto;
		}
		& h3 {
			font-size: .9em;
			margin-bottom: 1%;
			@include max-screen($breakpoint-mobile) {
				font-size: 0.8em;
				margin-bottom: 3%;
			}
		}
		& ul {
			display: flex;
			justify-content: space-around;
			align-items: center;
			max-width: 600px;
			width: 95%;
			margin: 0 auto;
			@include max-screen($breakpoint-mobile) {
				width: 100%;
			}
			& li {
				border-right:1px solid #555555;
				width: 33.3%;
				list-style: none;
				line-height: 1;
				&:last-child {
					border: none;
				}
				& a {
					font-size: 0.8em;
					display: block;
					@include max-screen($breakpoint-mobile) {
						font-size: 0.5em;
					}
					&:hover {
						opacity: 0.5;
						transition: .4s;
						-erbkit-trasition:.4s;
					}
				}
			}
		}
	}
}

.main_styling {
	max-width: 950px;
	margin: 0 auto;
	padding-top: 50px;
	@include max-screen($breakpoint-notepad) {
		max-width: 800px;
	}
	& a {
		margin-top: 7%;
		display: block;
		&:nth-child(1) {
			text-align: right;
		}
		&:nth-child(2) {
			text-align: left;
		}
		& img {
			@include max-screen($breakpoint-mobile) {
				width: 95%;
			}
		}
	}
	& .btn {
		margin: 10% auto;
		@include max-screen($breakpoint-mobile) {
			width: 80%;
		}
		& a {
			margin: 0;
			text-align: center;
		}
	}
}
#code02 {
	& .main_styling {
		& a {
			&:nth-child(1) {
				text-align: left;
			}
			&:nth-child(2) {
				text-align: right;
			}
		}
	}
}
.coordinate {
	margin: 10% auto;
	@include max-screen($breakpoint-mobile) {
		margin-bottom: 30%;
	}
	& .flex {
		max-width: 1000px;
		margin: 0 auto;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: end;
		margin-bottom: 10%;
		@include max-screen($breakpoint-notepad) {
			margin-bottom: 15%;
		}
		
		& div {
			width: 44%;
			@include max-screen($breakpoint-mobile) {
				width: 42%;
			}
		}
		& .txt {
			width: 12%;
			padding: 1%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			@include max-screen($breakpoint-mobile) {
				width: 16%;
				padding-bottom: 2%;
			}
			& p {
				font-family: $eng;
				font-size: 0.8em;
				line-height: 1.5;
				text-align: center;
				margin: 0 auto;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.5em;
					line-height: 1.3;
				}
				& span {
					font-size: 150%;
					font-family: $eng;
					@include max-screen($breakpoint-mobile) {
						font-size: 140%;
						letter-spacing: 0;
					}
				}
			}
			& .vertical {
				position: absolute;
				writing-mode: vertical-rl;
				top: 4%;
				text-align: left;
				left: 50%;
				transform: translateX(-50%);
				-webkit-transform: translateX(-50%);
				-moz-transform : translateX(-50%);
				@include max-screen($breakpoint-mobile) {
					top: 8%;
				}
			}
		}
	}
}