// Scss Document
/*--------------------
共通設定
----------------------*/
$eng:"bunyan-pro", sans-serif;
$gray:#bbbeb8;
$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:"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #555555;
	list-style: none;
	text-align: center;
	min-width: 0;
	min-height: 0;
}
img {
	max-width: 100%;
	height: auto;
}
a {
	text-decoration: none;
	&.disabled {
		pointer-events: none;
	}
}
.fadein {
	opacity: 0;
	transform: translateY(0);
	transition: all .8s;
}
.footer_copy {
	& p {
		text-align: center;
		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: 10000;
    & 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: 0 auto 20%;
		@include max-screen($breakpoint-mobile) {
			margin-bottom: 60%;
		}
		& .credit {
			& img {
				max-width: 25px;
			}
			& a {
				display: block;
				text-decoration: underline;
				line-height: 2.0;
				font-size: 0.9em;
				font-family: $eng;
			}
		}
	}
}
#style01 {
	& .max {
		max-width: 800px;
	}
	& .style_01 {
		position: relative;
		margin: 10% auto 3%;
		@include max-screen($breakpoint-mobile) {
			margin: 20% auto 0;
		}
		& .slide {
			max-width: 560px;
			@include max-screen($breakpoint-mobile) {
				width: 75%;
				padding-top: 220px;
			}
		}
		& .credit {
			position: absolute;
			top: 50%;
			right: 10%;
			transform: translateY(-50%);
			text-align: left;
			@include max-screen($breakpoint-mobile) {
				top: 0;
				transform: none;
			}
		}
	}
	& .style_02 {
		margin: 0 auto;
		text-align: right;
		@include max-screen($breakpoint-mobile) {
			text-align: center;
			width: 75%;
		}
	}
}
#style02 {
	& .credit {
		display: block;
		max-width: 120px;
		margin: 5% auto 10%;
		text-align: left;
		& a {
			text-align: left;
		}
	}
	& .style_01 {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		max-width: 1000px;
		margin: 0 auto;
		@include max-screen($breakpoint-mobile) {
			margin-top: 50%;
			width: 96%;
		}
		& label {
			width: 48%;
			margin: 1%;
			line-height: 0;
		}
	}
}
#style03 {
	max-width: 1000px;
	& .style_01 {
		position: relative;
		margin: 10% auto 3%;
		& .slide {
			max-width: 801px;
		}
		& .credit {
			position: absolute;
			top: 50%;
			right: 5%;
			text-align: left;
			transform: translateY(-50%);
			@include max-screen($breakpoint-tablet) {
				position: static;
				transform: none;
				max-width: 175px;
				margin: 15% 0 15% auto;
			}
			& a {
				text-align: left;
			}
		}
	}
	& .style_02 {
		margin: 10% auto;
		display: flex;
		justify-content: center;
		align-items: center;
		@include max-screen($breakpoint-mobile) {
			display: block;
		}
		& label {
			display: block;
			& img {
				@include max-screen($breakpoint-mobile) {
					width: 65%;
				}
			}
			&:first-child {
				margin-right: 0.5%;
				@include max-screen($breakpoint-mobile) {
					text-align: left;
				}
			}
			&:last-child {
				margin-left: 0.5%;
				@include max-screen($breakpoint-mobile) {
					text-align: right;
				}
			}
		}
	}
}
#style04 {
	max-width: 1000px;
	& .style_01 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 800px;
		margin: 10% auto;
		@include max-screen($breakpoint-mobile) {
			display: block;
		}
		& div {
			width: 50%;
			@include max-screen($breakpoint-mobile) {
				width: 100%;
			}
			&:first-child {
				@include max-screen($breakpoint-mobile) {
					width: 70%;
				}
			}
			& .credit {
				margin: 0 auto;
				text-align: left;
				@include max-screen($breakpoint-mobile) {
					margin: 15% auto;
					width: 100%;
					max-width: 120px;
				}
				& a {
					text-align: left;
				}
			}
		}
	}
	& .style_02 {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		max-width: 600px;
		margin:  0 0 0 auto;
		@include max-screen($breakpoint-mobile) {
			width: 90%;
			margin-bottom: 25%;
		}
		& div {
			width: 50%;
			&:first-child {
				margin-right: 0.5%;
			}
			&:last-child {
				margin-left: 0.5%;
				margin-top: 15%;
			}
		}
	}
	& .style_03 {
		margin: 10% auto;
		@include max-screen($breakpoint-mobile) {
			max-width: 94%;
		}
	}
}

#style05 {
	max-width: 800px;
	& .style_01 {
		text-align: left;
		& label {
			margin: 0 auto 0 0;
			& img {
				@include max-screen($breakpoint-mobile) {
					width: 70%;
				}
			}
		}
	}
	& .style_02 {
		margin-top: 2%;
		text-align: right;
		& label {
			margin: 0 0 0 auto;
			& img {
				@include max-screen($breakpoint-mobile) {
					width: 70%;
				}
			}
		}
	}
	& .credit {
		display: block;
		max-width: 120px;
		margin: 10% auto;
		text-align: left;
		@include max-screen($breakpoint-mobile) {
			margin: 25% auto;
		}
		& a {
			text-align: left;
		}
	}
	& .slide.style_03 {
		max-width: 600px;
		margin: 0 auto;
		@include max-screen($breakpoint-mobile) {
			width: 80%;
		}
	}
}
#style06 {
	max-width: 800px;
	& .flex {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		z-index: 10;
		@include max-screen($breakpoint-mobile) {
			display: block;
		}
		& div {
			&.credit {
				text-align: left;
				@include max-screen($breakpoint-mobile) {
					max-width: 120px;
					margin: 15% auto;
				}
				& a {
					text-align: left;
				}
			}
			&:last-child {
				@include max-screen($breakpoint-mobile) {
					width: 55%;
					margin: 0 0 0 auto;
				}
			}
		}
	}
	& .style_02 {
		position: relative;
		z-index: 1;
		margin-top: -30%;
		max-width: 401px;
		@include max-screen($breakpoint-mobile) {
			width: 55%;
			margin-top: -35%;
		}
	}
}
#footer {
	width: 90%;
	@include max-screen($breakpoint-mobile) {
		width: 100%;
	}
	& div.backnumber {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20% auto 0;
		width: 90%;
		flex-wrap: wrap;
		& a {
			width: 50%;
			padding: 0.5%;
			@include max-screen($breakpoint-mobile) {
				width: 85%;
				padding: 2%;
			}
		}
	}
}
/*---------------------------
スライダー
-----------------------------*/
.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 {
		overscroll-behavior-y: contain;
	  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:auto;
		max-width: 900px;
        padding: 30px;
        box-sizing: border-box;
        background: #fff;
        line-height: 1.4em;
        transition: 0.5s;
		  top: 0;
		  @include max-screen($breakpoint-mobile) {
			  width: 100vw;
			  padding: 50px 15px 30px;
			  align-self:flex-start;
		  }
		& p {
            font-size: 0.7em;
			text-align: center;
        }  
        & .close_btn {
			background: $gray;
			color: #fff;
            font-size: 0.8em;
            cursor: pointer;
			font-family: $eng;
			padding: 0.3em 1.0em;
			border: 1px solid $gray;
			border-radius: 50vh;
			display: block;
			width: 50vh;
			max-width: 300px;
			margin: 0 auto 10px;
		}
		& .itemlist {
			display: flex;
			flex-wrap: wrap;
			width: 90%;
			margin: 0 auto;
			justify-content: flex-start;
			align-items: flex-start;
			@include max-screen($breakpoint-mobile) {
				width: 100%;
			}
			& div {
				padding: 0;
				width: 33.3%;
				margin-bottom: 2%;
				@include max-screen($breakpoint-mobile) {
					width: 50%;
					padding: 0.5%;
				}
				& img {
					max-width: 150px;
					width: 100%;
				}
				& dl {
					font-size: 0.7em;
					@include max-screen($breakpoint-tablet) {
						margin-bottom: 5%;
					}
					& dd{
						font-size: 100%;
						font-family: $eng;
						& span {
							font-size: 80%;
							color: $gray;
						}
					}
					& dt {
						font-size: 100%;
						& 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%;
}