// Scss Document
/*--------------------
共通設定
----------------------*/
$white:#ffffff;
$eng:adobe-garamond-pro, serif;
$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: a-otf-ryumin-pr6n, serif;
	font-weight: 400;
	color: #333333;
	font-size: 16px;
}
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 {
	background: #f8f8f8;
	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%;
	  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;
	}
}

/*--------------------------------------------*/
.mv {
	margin: 0 auto 10%;
}
.main-txt {
	margin: 10% auto;
	& p {
		text-align: center;
		font-size: 0.9em;
		letter-spacing: 0.2em;
		line-height: 2.5;
		@include max-screen($breakpoint-tablet) {
			font-size: 0.8em;
			letter-spacing: 0.1em;
		}
		@include max-screen($breakpoint-mobile) {
			font-size: 0.7em;
		}
		&.preOrder {
			margin: 5% auto 0;
			background: #fff;
			padding: 5% 2%;
			max-width: 800px;
			@include max-screen($breakpoint-mobile) {
				margin-top: 7%;
				width: 90%;
				padding: 8% 0;
			}
			& span {
				border-bottom: 1px solid #666;
				font-size: 100%;
			}
		    & a {
				font-size: 0.9em;
				background: #f5f5f5;
				border: 1px solid #f5f5f5;
				border-radius: 5px;
				padding: 0.5em 1em 0.7em;
			}
		}
	}


}
section {
	margin: 15% auto;
	max-width: 900px;
	& .coordinate {
		position: relative;
		text-align: right;
		& .style-txt {
			max-width: 400px;
			background: $white;
			padding: 7%;
			position: absolute;
			z-index: 10;
			@include max-screen($breakpoint-tablet) {
				position: relative;
				max-width: none;
				padding: 15%;
			}
			&::before,&::after {
			content: "";
			width: 50px;
			height: 50px;
			position: absolute;
				@include max-screen($breakpoint-tablet) {
					width: 60px;
					height: 60px;
				}
			}
			&::before {
				border-top: 1px solid #333;
				border-left: 1px solid #333;
				top: 30px;
				left: 30px;
				@include max-screen($breakpoint-tablet) {
					top: 12%;
					left: 12%;
				}
				@include max-screen($breakpoint-mobile) {
					top: 10%;
					left: 8%;
				}
			}
			&::after {
				border-bottom: 1px solid #333;
				border-right: 1px solid #333;
				bottom: 30px;
				right: 30px;
				@include max-screen($breakpoint-tablet) {
					bottom: 12%;
					right: 12%;
				}
				@include max-screen($breakpoint-mobile) {
					bottom: 10%;
					right: 8%;
				}
			}
			& h3 {
				font-size: 1.2em;
				font-family: $eng;
				font-weight: 400;
				text-align: center;
				margin-bottom: 3%;
				& span {
					font-size: 85%;
					font-family: $eng;
					font-style: italic;
				}
			}
			& h2 {
				font-size: 3.0em;
				font-weight: 300;
				font-family: $eng;
				text-align: center;
				margin-bottom: 7%;
				@include max-screen($breakpoint-mobile) {
					font-size: 2.5em;
				}
				&.type-3 {
					font-size: 2.0em;
				}
				&.type-2 {
					position: relative;
					&::before,&::after {
						content: "";
						position: absolute;
						background: #333;
						top: 57%;
						left: 52%;
						width: 30px;
						height: 0.5px;
					}
					&::before {
						transform: translate(-50%,-50%) rotate(45deg);
					}
					&::after {
						transform: translate(-50%,-50%) rotate(-45deg);
					}
					& span {
						font-size: 55%;
						&:first-child {
							padding-right: 40px;
						}
					}
				}
			}
			& p {
				text-align: left;
				font-size: 0.9em;
				line-height: 2.0;
				@include max-screen($breakpoint-tablet) {
					max-width: 400px;
					margin: 0 auto;
					font-size: 0.8em;
					line-height: 2.2;
				}
				@include max-screen($breakpoint-mobile) {
					font-size: 0.7em;
				}
			}
		}
		& .max660 {
			max-width: 660px;
			position: relative;
			margin: 5% 0 0 auto;
			z-index: 5;
			@include max-screen($breakpoint-tablet) {
				width: 70%;
				margin: 10% 5% 0 auto;
			}
		}
		&.center .max660 {
			@include max-screen($breakpoint-tablet) {
				width: 80%;
				margin: 10% 10% 0;
			}
		}
		& .style02 {
			position: relative;
			z-index: 10;
			text-align: left;
			margin-top: -450px;
			@include max-screen($breakpoint-tablet) {
				margin-top: -40%;
				margin-left: 5%;
			}
			@include max-screen($breakpoint-mobile) {
				margin-top: -25%;
			}
			& .max330 {
				max-width: 330px;
				@include max-screen($breakpoint-tablet) {
					width: 35%;
				}
				@include max-screen($breakpoint-mobile) {
					width: 45%;
				}
			}
		}
		& .credit {
			position: relative;
			margin-top: 2%;
			@include max-screen($breakpoint-tablet) {
				margin-left: 5%;
			}
			@include max-screen($breakpoint-mobile) {
				margin-top: 15%;
			}
			&.absolute {
				position: absolute;
				top: 45%;
				@include max-screen($breakpoint-tablet) {
					position: static;
					margin-left: 10%;
				}
			}
			& p {
				text-align: left;
				margin-bottom: 1%;
				padding-bottom: 1%;
				font-size: 0.7em;
				line-height: 2.2;
				font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.6em;
				}
				& span {
					font-size: 100%;
					&.eng {
						font-family: $eng;
						margin: 0;
					}
				}
				& a {
					display: block;
					font-size: 100%;
					text-decoration: underline;
					& span {
						font-size: 90%;
						margin: 0 7px;
						&.pre-icon {
							display: inline-block;
							background: #999;
							color: #fff;
							font-size: 80%;
							padding: 0 5px;
							line-height: 1.7;
						}
					}
				}
			}
		}
	}
}
#category {
	& h2 {
		font-size: 2.0em;
		text-align: center;
		font-family: $eng;
		margin-bottom: 3%;
	}
}
.container { 
	width: 100%;
	display: grid;
  	grid-template-columns: 1fr 1fr 1fr;
  	grid-template-rows: .25fr .5fr .25fr .5fr .25fr .5fr;
  	grid-auto-rows: 1fr;
  	gap: 1% 1%;
  	grid-auto-flow: row;
  	grid-template-areas:
    "tops Bottoms jacket"
    "tops Bottoms jacket"
    "Accessory Bottoms onepiece"
    "Accessory setup onepiece"
    "shoes setup onepiece"
    "shoes setup onepiece";
	@include max-screen($breakpoint-tablet) {
		width: 90%;
		margin: 0 auto;
	}
	@include max-screen($breakpoint-mobile) {
		width: 97%;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: .4fr .3fr 0.4fr .3fr .4fr .3fr .4fr .2fr .4fr .2fr;
		gap: .5% 1%;
		grid-template-areas: 
		"tops Bottoms"
		"tops Bottoms"
		"Accessory Bottoms"
		"Accessory setup"
		"shoes setup"
		"shoes setup"
		"onepiece setup"
		"onepiece jacket"
		"onepiece jacket"
		"onepiece jacket"; 
	}
	& div {
		position: relative;
		overflow: hidden;
		& a.link-img {
            filter: brightness(0.7);			
			text-align: center;
			& img {
				width: 100%;
				height: 100%;
				vertical-align: top;
				object-fit: cover;
			}
			&:hover {
				transition: .4s;
				filter: none;
				filter: brightness(0.95);
			}
		}
		& a {
			font-size: 1.8em;
			@include max-screen($breakpoint-tablet) {
				font-size: 1.2em;
			}
			& span {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				color: #fff;
				font-size: 100%;
				font-family: $eng;
			}
		}		
	}
}
.tops { grid-area: tops;}
.Bottoms { grid-area: Bottoms; }
.jacket { grid-area: jacket; }
.Accessory { grid-area: Accessory; }
.onepiece { grid-area: onepiece; }
.setup { grid-area: setup; }
.shoes { grid-area: shoes; }

.flex {
	position: relative;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 1%;
	z-index: 11;
	@include max-screen($breakpoint-tablet) {
		margin: 5% auto;
	}
	& img {
		max-width: 87px;
	}
	& p {
		margin-left: 2%;
		@include max-screen($breakpoint-mobile) {
			margin-left: 4%;
		}
	}
}