// Scss Document
/*--------------------
共通設定
----------------------*/
$eng:"adobe-garamond-pro", serif;
$breakpoint-notepad: 1500px; 
$breakpoint-tablet: 1000px; 
$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:'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #000000;
	list-style: none;
	text-align: center;
}
img {
	width: 100%;
}
a {
	text-decoration: none;
	&.disabled {
		pointer-events: 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(30px);
	transition: all 1.0s;
}
.fadein_s {
	opacity: 0;
	transform: translateY(0px);
	transition: all 2.0s;
}
.footer_copy {
	text-align: center;
	& p {
		font-size: 0.7em;
		padding-bottom: 20px;
		font-family: $eng;
		@include max-screen($breakpoint-tablet) {
			padding-bottom: 25%;
		}
	}
}
#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;
			}
		}
    }

}
body {
	overflow-x: hidden;
}
/*------------------------------------------------*/
.lp_warapper {
	max-width: 1920px;
	margin: 0 auto;
	padding-top: 50px;
	& .mv {
		margin-bottom: 30%;
		& img {
			width: 100%;
		}
	}
}
section {
	margin: 30% auto;
	&#style_01 {
		margin: 45% auto;
		max-width: 1000px;
		
		& .style_01-01 {
			margin: 0 auto 15%;
			@include max-screen($breakpoint-tablet) {
				width: 95%;
			}
			& img {
				max-width: 800px;
			}
		}
		& .layout_01 {
			margin: 30% auto;
			text-align: left;
			& .left {
				max-width: 650px;
				@include max-screen($breakpoint-tablet) {
					width: 80%;
				}
			}
			& .slide {
				max-width: 500px;
				margin: 10% 0 0 auto;
				@include max-screen($breakpoint-tablet) {
					width: 70%;
					margin-right: 2.5%;
					margin-top: 30%;
				}
			}
		}
	}
	& .credit {
        & ul {
            & li {
                margin-bottom: 5%;
                & a {
                    font-family: $eng;
                    font-size: 0.8em;
                    line-height: 1.5;
                    display: inline-block;
                    & span {
                        font-family: $eng;
                        font-size: 90%;
						&.buy {
							border: 1px solid #000000;
	                        letter-spacing: 0.2em;
	                        padding: 0.2em 1.6em 0;
						}
						&.coming {
							border:none;
							font-style: italic;
						}
                    }
                }
            }
        }
    }
	&#style_02 {
		& .full {
			position: relative;
			& .credit {
				position: absolute;
				top: 50%;
				left: 20%;
				transform: translateY(-50%);
				@include max-screen($breakpoint-tablet) {
					left: 5%;
				}
				& ul {
					& li {
						margin-bottom: 10%;
						& a {
							& span {
								font-size: 80%;
							}
						}
					}
				}
			}
		}
		& .absolute {
			text-align: left;
			max-width: 1000px;
			margin: 15% auto;
			@include max-screen($breakpoint-tablet) {
				margin-top: 45%;
			}
			& .back {
				max-width: 700px;
				@include max-screen($breakpoint-tablet) {
					width: 85%;
				}
			}
			& .slide {
				margin: -30% 0 0 auto;
				max-width: 560px;
				z-index: 2;
				@include max-screen($breakpoint-tablet) {
					width: 70%;
					margin-top: -44%;
					margin-right: 2.5%;
				}
			}
			& .style_02-02 {
				position: relative;
				z-index: 1;
				margin-top: -15%;
				max-width: 480px;
				margin-left: 8%;
				@include max-screen($breakpoint-tablet) {
					margin-left: 2.5%;
					width: 60%;
				}
			}
		}
	}
	&#style_03 {
		max-width: 1000px;
		margin: 30% auto;
		@include max-screen($breakpoint-tablet) {
			margin-top: 45%;
		}
		@include max-screen($breakpoint-mobile) {
			margin-bottom: 60%;
		}
		& .absolute {
			max-width: 755px;
			position: relative;
			margin: 0 auto;
			@include max-screen($breakpoint-tablet) {
				width: 95%;
				margin-top: 70%;
			}
			& img {
				margin-top: 13%;
				@include max-screen($breakpoint-tablet) {
					margin-top: 33%;
				}
			}
			& .credit {
				position: absolute;
				top: -5%;
				left: 50%;
				transform: translateX(-50%);
				@include max-screen($breakpoint-tablet) {
					top: -30%;
				}
			}
		}
		& .style_03-02 {
			max-width: 696px;
			margin: 20% auto 15%;
			@include max-screen($breakpoint-tablet) {
				width: 80%;
				margin: 30% auto 20%;
			}
		}
		& .style_03-03 {
			max-width: 650px;
			@include max-screen($breakpoint-tablet) {
				width: 80%;
			}
		}
	}
	&#style_04 {
		max-width: 800px;
		margin: 30% auto;
		@include max-screen($breakpoint-tablet) {
			margin-top: 45%;
		}
		& .absolute {
			position: relative;
			& .credit {
				position: absolute;
				bottom: 5%;
				right: 3%;
				@include max-screen($breakpoint-tablet) {
					bottom: -4%;
				}
				& ul li {
					margin-bottom: 10%;
				}
			}
		}
		& .coteainer {
			margin: 15% auto;
			padding: 20%;
			text-align: center;
			background: url("../image/2023ss_look_bgimg02.jpg");
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			@include max-screen($breakpoint-tablet) {
				margin-top: 55%;
			}
			& .slider {
				max-width:450px;
				margin: 0 auto;
			}
		}
	}
	&#style_05 {
		margin-top: 55%;
		& .full {
			position: relative;
			margin-bottom: 30%;
			& .credit {
				position: absolute;
				top: 50%;
				right: 15%;
				transform: translateY(-50%);
				@include max-screen($breakpoint-tablet) {
					top: 15%;
					right: 7%;
				}
				& ul li {
					margin-bottom: 10%;
				}
			}
		}
		& .style_05-02 {
			& div {
				margin: 0 auto 5%;
				max-width: 700px;
				@include max-screen($breakpoint-tablet) {
					width: 80%;
					margin-bottom: 10%;
				}
			}
		}
	}
	&#style_06 {
		@include max-screen($breakpoint-tablet) {
			margin: 70%  auto;
		}
		& .style_06-01 {
			max-width: 750px;
			margin: 0 auto 40%;
			@include max-screen($breakpoint-tablet) {
				width: 95%;
				margin-bottom: 30%;
			}
		}
		& .credit {
			& ul li {
				margin-bottom: 3%;
			}
		}
		& .absolute {
			max-width: 1000px;
			margin: 15% auto 30%;
			text-align: left;
			@include max-screen($breakpoint-tablet) {
				margin: 30% auto 45%;
			}
			& .max_570 {
				max-width: 570px;
				@include max-screen($breakpoint-tablet) {
					width: 75%;
				}
			}
			& div {
				max-width: 610px;
				margin: -10% 0 0 auto;
				@include max-screen($breakpoint-tablet) {
					margin-top: -20%;
					width: 75%;
				}
			}
		}
	}
	&#last {
		margin-bottom: 10%;
		text-align: center;
		@include max-screen($breakpoint-tablet) {
			margin-bottom: 30%;
		}
		& .back {
			background: url("../image/2023ss_look_bgimg03.jpg");
			background-repeat: no-repeat;
			background-size: contain;
			height: 90vh;
			margin: 0 auto;
			background-position: center;
			position: sticky;
			position: -webkit-sticky;
			top: 5vh;
			max-width: 800px;
		}
		& .txt {
			position: relative;
			z-index: 50;
			padding-bottom: 10%;
			@include max-screen($breakpoint-tablet) {
				padding-bottom: 55%;
			}
			& .logo {
				max-width: 200px;
				width: 50%;
				margin: 0 auto 3%;
			}
			& p {
				color: #fff;
				font-family: $eng;
				margin: 2% auto 15%;
				line-height: 1.5;
				font-weight: 300;
				font-size: 0.8em;
				@include max-screen($breakpoint-tablet) {
					margin-bottom: 20%;
				}
			}
			& a {
				& img {
					max-width: 360px;
					@include max-screen($breakpoint-notepad) {
						max-width: 200px;
					}
					width: 80%;
					@include max-screen($breakpoint-mobile) {
						max-width: 360px;
					}
				}
			}
		}
	}
	
}



/*---------------------------
スライダー
-----------------------------*/
.slide-dots{
	position: absolute;
	bottom: 0;
	right: 10px;
  li{
    display: inline-block;
    margin: 0 10px;
    button{
      position: relative;
      text-indent: -9999px;
      &:before{
          content: '';
		  width: 7px;
		  height: 7px;
		  border-radius: 50%;
		  border: 1px solid #fff;
          font-size: 0.6em;
          text-indent: 0px;
          position: absolute;
          top: 0;
          left: 0;
      }
    }
    &.slick-active{
      button:before{
          content: '';
		  background: #fff;
      }
    }
  }
}





/*----------------------
ポップアップここから
------------------------*/
.open_btn {
  cursor: pointer;
}
.popup_wrap {
	& input {
	  display: none;
	}
	& .popup_overlay {
	  display: flex;
	  justify-content: center;
	  overflow: auto;
	  position: fixed;
	  top: 0;
	  left: 0;
	  z-index: 9999;
	  width: 0;
	  height: 0;
	  background: rgba(0, 0, 0, 0.7);
	  opacity: 0;
	  transition: opacity 0.5s, transform 0s 0.5s;
	  transform: scale(0);
      & .popup_trigger {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      & .popup_content {
        position: relative;
        align-self: center;
		width:80vw; 
		  max-width: 1000px;
		  max-height: 95vh;
        padding: 30px;
        box-sizing: border-box;
        background: #fff;
        line-height: 1.4em;
        transition: 0.5s;
		  @include max-screen($breakpoint-mobile) {
			  width: 95vw;
			  padding: 30px 15px;
		  }
        & .close_btn {
            position: absolute;
            top: 14px;
            right: 16px;
            font-size: 30px;
            cursor: pointer;
        }
		& .itemlist {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			justify-content: flex-start;
			align-items: flex-start;
			& div {
				padding: 0 1%;
				width: 20%;
				@include max-screen($breakpoint-tablet) {
					width: 33.3%;
				}
				@include max-screen($breakpoint-mobile) {
					width: 50%;
				}
				& img {
					max-width: 150px;
				}
				& dl {
					font-size: 0.9em;
					@include max-screen($breakpoint-tablet) {
						margin-bottom: 5%;
					}
					& dd{
						font-size: 100%;
						font-family: $eng;
					}
					& dt {
						font-size: 80%;
						& span {
							font-size: 80%;
							margin-left: 1%;
						}
					}
				}
			}
		}
      }
	}
	
}
.popup_wrap input:checked ~ .popup_overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
	width: 100%;
  height: 100%;
}