/*--------------------
共通設定
----------------------*/
$breakpoint-notepad: 1600px; 
$breakpoint-tablet: 769px; 
$breakpoint-mobile: 500px;
@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;
  }
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
a {
	text-decoration: none;
	color: #000;
	&.disabled {
		pointer-events: none;
		text-decoration: none;
	}
}
ul,ol {
	list-style: none;
}
.pc {
  display: block;
  @include max-screen($breakpoint-tablet) {
    display: none;
  }
}
.sp {
  display: none;
  @include max-screen($breakpoint-tablet) {
    display: block;
  }
}
body {
	overflow-x: hidden;
}
.wrapper {
	margin: 0 auto!important;
}
main {
	max-width: 100%;
}
/*--------------------------------------------*/
.lp_wrapper {
	background: #fff;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0;
	letter-spacing: 0.1em;
	color: #000;
	font-size: 16px;
	text-align: center;
	font-weight: 400;
	font-style: normal;
	max-width: 1000px;
	width: 98%;
	font-family: "yu-gothic-pr6n", sans-serif;
	& h1 {
		font-size: 1.2em;
		font-weight: normal;
		margin: 5% auto;
		& span {
			font-size: 70%;
		}
	}
	& .menu {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 650px;
		margin: 0 auto;
		@include max-screen($breakpoint-tablet) {
			width: 95%;
			display: block;
		}
		& div {
			width: calc(100%/2 - 4%);
			@include max-screen($breakpoint-tablet) {
				width: 70%;
				margin: 0 auto;
			}
			& a {
				border: 1px solid #999;
				display: block;
				padding: 0.8em 1.0em;
				margin: 2%;
				color: #fff;
				background: #222222;
				font-size: .9em;
				@include max-screen($breakpoint-tablet) {
					font-size: 0.7em!important;
				}
				&:hover {
					opacity: .8;
					transition: .4s;
				}
			}
		}
	}
	& .holiday {
		margin: 10% auto;
		& h2 {
			font-size: 1.1em;
			margin-bottom: 1.0em;
		}
		& .flex {
			display: flex;
			align-items: flex-start;
			justify-content: center;
			width: 100%;
			max-width: 800px;
			margin: 0 auto;
			@include max-screen($breakpoint-tablet) {
				flex-direction: column;
			}
			& .box {
				width: calc(100%/2 - 4%);
				margin: 2% auto;
				border: 1px solid #999;
				padding: 1.0em 0.5em;
				@include max-screen($breakpoint-tablet) {
					width: 80%;
				}
				& h3 {
					font-size: .9em;
					margin-bottom: 1.0em;
					@include max-screen($breakpoint-mobile) {
						font-size: 3.0vw;
					}
				}
				& ul {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex-direction: column;
					& li {
						width: 80%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 0.5em;
						& p {
							font-size: 0.9em;
							text-align: left;
							margin: 0;
							@include max-screen($breakpoint-mobile) {
								font-size: 3.0vw;
							}
							& span {
								font-size: 70%;
							}
						}
					}
				}
			}
		}
	}
	& section {
		margin: 10% auto 20%;
		padding: 60px;
		background: #f2f2f2;
		@include max-screen($breakpoint-tablet) {
			width: 95%;
			padding: 2.0em 1.0em;
		}
		& h2 {
			font-size: 1.2em!important;
			text-align: left;
			padding: 0.3em 0.5em;
			border-left: 5px solid #000!important;
			margin-bottom: 1.0em!important;
			@include max-screen($breakpoint-tablet) {
				font-size: 1.0em!important;
			}	
		}
		& .shop-txt {
			margin: 5% auto;
			@include max-screen($breakpoint-tablet) {
				width: 95%;
			}
			& p {
				font-size: .9em!important;
				text-align: left;
				line-height: 1.8;
				@include max-screen($breakpoint-mobile) {
					font-size: 0.7em!important;
				}
			}
		}
		& .swiper-container {
			max-width: 1000px;
			@include max-screen($breakpoint-tablet) {
				width: 90%;
				margin: 0 auto;
			}
		}
		& .shop_sns {
			text-align: left;
		}
		& .detail {
			margin: 3% auto;
			& ul.d-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				@include max-screen($breakpoint-tablet) {
					width:90%;
					margin: 3% auto;
				}
				& li {
					width: 15%;
					font-size: 0.9em!important;
					text-align: left;
					margin-bottom: .5em;
					@include max-screen($breakpoint-mobile) {
						font-size: 2.8vw!important;
						width: 20%
					}
					&:nth-child(2n) {
						width: 85%;
						position: relative;
						&::before {
							content: ":";
							position: absolute;
							font-size: 100%;
							left: -10px;
						}
						@include max-screen($breakpoint-mobile) {
							width: 80%;
						}
					}
				}
			}
			
		}
        & .pay,& .brand {
            margin: 5% auto;
			@include max-screen($breakpoint-mobile) {
				margin: 10% auto;
			}
            & p {
                font-size: 1.1em!important;
                font-weight: 600;
                & span {
                    font-size: 70%;
                }
				@include max-screen($breakpoint-tablet) {
					font-size: 0.9em!important;
					margin-bottom: 1.0em;
				}
            }
            & .pay_list {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                flex-wrap: wrap;
                max-width: 800px;
                margin: 0 auto;
                & li {
                    margin: 1%;
					@include max-screen($breakpoint-tablet) {
						width: calc(100%/5 - 2%);
					}
					@include max-screen($breakpoint-mobile) {
						width: calc(100%/6 - 2%);
					}
                }
            }
			& .b_list {
				display: flex;
				align-items: stretch;
				justify-content: center;
				max-width: 550px;
				margin: 0 auto;
				@include max-screen($breakpoint-mobile) {
					width: 80%;
				}
				& li {
					width: calc(100%/3 - 2%);
					margin: 1%;
					border: 1px solid #666;
					padding: 1.0em;
				}
			}
        }
	}
	& .recruit {
		width: 90%;
		margin: 10% auto;
		@include max-screen($breakpoint-mobile) {
			margin-top: 20%;
		}
		& p {
            font-size: 1.1em!important;
			line-height: 1.5;
			margin-bottom: 1.0em;
			font-weight: 600;
            & span {
                font-size: 70%;
				font-weight: normal;
            }
            @include max-screen($breakpoint-tablet) {
                font-size: 0.9em!important;
                margin-bottom: 1.0em;
            }
		}
		& a {
			display: block;
		}
	}
}