/* Scss Document */

$breakpoint-sm: 400px;
$breakpoint: 880px;
$breakpoint-md: 1100px;
$txtcolor: #fff;
$red: #D93323;
$min: "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
$goth: "Hiragino Sans","ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo,"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Noto Sans", sans-serif;


@mixin sm {
  @media screen and (max-width: $breakpoint-sm) {
    @content;
  }
}

@mixin mq {
  @media screen and (max-width: $breakpoint) {
    @content;
  }
}

@mixin lg {
  @media screen and (min-width: $breakpoint) {
    @content;
  }
}

@mixin mq-md {
  @media screen and (max-width: $breakpoint-md) {
    @content;
  }
}

//共通css
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a{
	color: inherit;
	&:hover{
		opacity: 0.7 !important;
		transition: 0.5s;
	}
}

img{
	max-width: 100%;
	width: 100%;
	vertical-align: top;
}

html,body{
	font-family: $goth;
	font-size: 62.5%; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #000;
}
body{
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.75;
	color: $txtcolor;
	font-feature-settings : "palt";
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: #000;
	@include mq{
		font-size: 1.4rem;
	}
	&.add_overray{
		overflow: hidden;
	}
}

svg{fill: currentColor;}

.sp{
	display: none;
	@include mq{
		display: block !important;
	}
}

.tb{
	display: none;
	@include mq-md{
		display: block !important;
	}
}

.pc{
	display: block;
	@include mq{
		display: none !important;
	}
}

//フォント
.bodoni{
	font-family: bodoni-urw, serif;
	font-weight: 500;
	font-style: normal;
}
.bodoniBold{
	font-family: bodoni-urw, serif;
	font-weight: 700;
	font-style: normal;
}
.calson{
	font-family: big-caslon-fb, serif;
	font-weight: 400;
	font-style: normal;
}
.bebas{
	font-family: 'Bebas Neue', cursive;
}
.market{
	font-family: ff-market-web,sans-serif;
	font-weight: 400;
	font-style: normal;
}

//ローディング
@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0.7) }
  100% {
    -webkit-transform: scale(0.6);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  } 100% {
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 0;
  }
}

//フェードイン
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.fadein {
    opacity : 0.2;
    transform : translate(0, 100px);
    transition : all 500ms;
	@include mq{
		transform : translate(0, 50px);
	}
}

.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

@keyframes fadeIn2 {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn2 {
    0% {opacity: 0}
    100% {opacity: 1}
}

.fadein2 {
    opacity : 0;
    transform : translate(0, 0);
    transition : all 2s;
	transition-delay: 1000ms;
}

.fadein2.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}

//震える
@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(5px, 5px) rotateZ(1deg)}
    50% {transform: translate(0px, 5px) rotateZ(0deg)}
    75% {transform: translate(5px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}
.fwari{
	display: block;
	&:hover{
		animation: hurueru .12s  infinite;
	}
}

#glamb{
	font-family: $min;
	.glamb_inner{
		width: 88%;
		max-width: 900px;
		margin: 0 auto 0;
		position: relative;
		z-index: 3;
		@include mq{
			margin: 0 auto 0;
		}
		.glamb_detail{
			padding: 50px 0;
			border-top: 1px solid #000;
			border-bottom: 1px solid #000;
			display: flex;
			align-items: center;
			font-size: 1.2rem;
			margin-bottom: 40px;
			line-height: 2;
			letter-spacing: 1px;
			@include mq{
				padding: 30px 0;
				display: block;
				margin-bottom: 70px;
			}
			img{
				padding: 0 40px;
				width: 220px;
				@include mq{
					padding: 0 0 25px;
					width: 110px;
					display: block;
					margin: 0 auto;
				}
			}
		}
	}
	.glamb_ext{
		width: 100%;
		margin: 0 auto;
		position: relative;
		z-index: 3;
		@include mq{
			width: 100%;
		}
	}
}

#footer{
	background: #000;
	color: #fff;
	padding-bottom: 50px;
	font-family: $min;
	.footer_inner{
		width: 88%;
		max-width: 900px;
		margin: -240px auto 0;
		padding-top: 240px;
		@include mq{
			margin: 0 auto;
			padding-top: 30px;
		}
		.glamb_detail{
			padding: 100px 0 30px;
			margin-bottom: 100px;
			border-bottom: 1px solid #fff;
			@include mq{
				border: none;
				margin: 0;
				padding: 25px 0 80px;
			}
		}
		.shop{
			ul{
				display: flex;
				flex-wrap: nowrap;
				padding: 30px 0 40px;
				@include mq{
					display: block;
					padding: 0;
				}
				li{
					width: 41%;
					border-left: 1px solid #fff;
					padding: 5px 20px;
					font-size: 1.2rem;
					@include mq{
						margin-bottom: 20px;
						width: 100%;
					}
					&:first-child{
						border-left: none;
						padding-right: 0;
					}
					&.flag{
						width: 18%;
						font-size: 1.4rem;
						padding-left: 0;
						letter-spacing: 1px;
						@include mq{
							width: 100%;
							margin-bottom: 30px;
						}
					}
					h3{
						font-size: 2rem;
						margin-bottom: 20px;
						letter-spacing: 2px;
					}
					a{
						padding: 5px 5px 5px 6px;
						border: 1px solid #fff;
						margin-left: 10px;
						color: #fff;
					}
				}
			}
			.shop_tel{
				width: 58%;
				margin: 0 auto;
				display: flex;
				font-size: 1.4rem;
				text-align: center;
				justify-content: space-between;
				@include mq{
					width: 100%;
					display: block;
				}
				a{
					width: 48%;
					padding: 10px;
					line-height: 1.2;
					background: #333;
					@include mq{
						width: 100%;
						margin-bottom: 10px;
						display: block;
					}
					img{
						width: 18px;
						margin-right: 5px;
					}
				}
			}
		}
		.footer_content{
			width: 100%;
			border: 1px solid #fff;
			padding: 3%;
			display: flex;
			font-size: 1.4rem;
			margin: 60px auto 35px;
			h4{
				width: 14%;
				border-right: 1px solid #fff;
				@include mq{
					width: 40%;
				}
			}
			ul{
				padding: 0 6%;
				display: flex;
				flex-wrap: wrap;
				width: 86%;
				@include mq{
					width: 60%;
					display: block;
				}
				li{
					width: 25%;
					@include mq{
						width: 100%;
					}
				}
			}
		}
		.link_app{
			text-align: center;
			font-size: 1.2rem;
			margin-bottom: 40px;
		}
		.link_icos{
			display: flex;
			justify-content: space-between;
			width: 40%;
			flex-wrap: wrap;
			margin: 0 auto;
			@include mq{
				width: 100%;
			}
			li{
				a{
					display: block;
				}
			}
		}
		.footer_logo{
			text-align: center;
			margin: 60px auto 25px;
			width: 116px;
		}
		.footer_copy{
			text-align: center;
			font-size: 1.4rem;
			
		}
	}
}

#main{
	width: 100%;
	height: 100vh;
	position: relative;
	transition: 3s;
	background: #000;
	overflow: hidden;
	figure{
		position: absolute;
		width: 100%;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		@include mq{
			width: 95%;
			max-width: 500px;
		}
	}
}

.tit{
	font-size: 7.2rem;
	position: relative;
	line-height: .6;
	padding-top: 120px;
	@include mq{
		font-size: 5rem;
		padding-top: 65px;
	}
	&::before{
		position: absolute;
		background: url("../img/top/img_pick.png") center;
		background-size: cover;
		content: "";
		width: 157px;
		height: 175px;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		@include mq{
			width: 79px;
			height: 87px;
			bottom: 2rem;
		}
	}
	h2{
		position: relative;
		z-index: 2;
		span{
			font-size: 40%;
		}
	}
}

#intro{
	background: #0F0F0F;
	padding: 85px 0 0;
	position: relative;
	@include mq{
		padding: 0;
		height: 100vh;
		background: url(../img/top/bg_intro_sp.png) center no-repeat;
		background-size: cover;
	}
	@include sm{
		padding: 0;
		height: 100vh;
		background: url(../img/top/bg_intro_sp.png) center no-repeat;
		background-size: contain;
	}
	.content{
		width: 90%;
		margin: 0 auto;
		@include mq{
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		.tit{
			margin-bottom: 40px;
			text-align: center;
			text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
			@include mq{
				margin-bottom: 30px;
			}
		}
		.intro{
			font-size: 1.8rem;
			line-height: 2.2;
			letter-spacing: .1rem;
			font-weight: 600;
			text-align: center;
			text-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
			@include mq{
				font-size: 1.4rem;
				text-shadow:1px 1px 0 #000, -1px -1px 0 #000,
				-1px 1px 0 #000, 1px -1px 0 #000,
				0px 1px 0 #000,  0-1px 0 #000,
				-1px 0 0 #000, 1px 0 0 #000;
			}
		}
	}
	figure{
		padding-top: 50px;
	}
}

.product{
	position: relative;
	background: #0F0F0F;
	padding-bottom: 70px;
	&:nth-child(2n){
		background: #000;
	}
	.content{
		padding-top: 105px;
		margin-bottom: 70px;
		padding-bottom: 40px;
		position: relative;
		text-align: center;
		@include mq{
			padding-top: 60px;
			padding-bottom: 30px;
			width: 90%;
			margin: 0 auto 40px;
		}
		&::after{
			position: absolute;
			content: "";
			width: 116px;
			height: 2px;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			background: #fff;
			@include mq{
				height: 1px;
				width: 60px;
			}
		}
		.tit{
			margin-bottom: 40px;
			&::before{
				bottom: 6rem;
				@include mq{
					bottom: 4rem;
				}
			}
		}
		figure{
			width: 70%;
			max-width: 350px;
			margin: 0 auto 20px;
		}
		p{
			font-size: 1.8rem;
			line-height: 2.2;
			letter-spacing: .1rem;
			font-weight: 600;
			@include mq{
				font-size: 1.3rem;
			}
		}
	}
	.item_box{
		margin-bottom: 120px;
		.item_flex{
			display: flex;
			@include mq{
				display: block;
			}
			.item_img{
				width: 56.7%;
				margin-left: -6.6%;
				margin-right: 6.6%;
				padding-top: 20px;
				@include mq{
					width: 120%;
					margin: -20% -10% 0;
				}
			}
			&.item_right{
				flex-direction: row-reverse;
				.item_img{
					width: 56.7%;
					margin-right: -6.6%;
					margin-left: 6.6%;
					@include mq{
						width: 140%;
						margin: -15% -20% 0
					}
				}
			}
			.txt{
				width: 33.3%;
				@include mq{
					width: 80%;
					margin: 30px auto 0;
				}
				.num{
					font-size: 3.8rem;
					line-height: 1;
					position: relative;
					padding-bottom: 10px;
					display: inline;
					color: $red;
					@include mq{
						font-size: 2rem;
						padding-bottom: 5px;
					}
					&::after{
						position: absolute;
						height: 3px;
						width: 100%;
						bottom: 0;
						left: 0;
						background: $red;
						content: "";
						@include mq{
							height: 2px;
						}
					}
					span{
						font-size: 10rem;
						@include mq{
							font-size: 4rem;
						}
					}
				}
				h2{
					font-size: 6rem;
					margin-bottom: -10px;
					line-height: 1.3;
					margin-bottom: 20px;
					@include mq{
						font-size: 4rem;
						margin-bottom: 2px;
						text-align: center;
					}
				}
				h3{
					font-size: 3rem;
					margin-top: 20px;
					line-height: 1;
					@include mq{
						font-size: 1.6rem;
						margin-top: 10px;
						text-align: center;
					}
				}
				h4{
					margin-top: 30px;
					font-family: $min;
					text-align: center;
					padding-bottom: 10px;
					border-bottom: 1px solid #fff;
					line-height: 1;
				}
				ul{
					padding: 15px 0;
					display: flex;
					border-top: 1px solid #fff;
					border-bottom: 1px solid #fff;
					flex-wrap: wrap;
					margin-bottom: 30px;
					@include mq{
						padding: 0;
						margin: 0 auto;
						width: 70%;
						border: none;
					}
					li{
						width: 50%;
						font-size: 1.8rem;
						@include mq{
							width: 50%;
							font-size: 1.4rem;
						}
					}
				}
				.intro{
					font-size: 1.4rem;
					margin-top: 30px;
					margin-bottom: 30px;
					padding-bottom: 25px;
					border-bottom: 1px solid #fff;
					line-height: 2.2;
					@include mq{
						font-size: 1.3rem;
						margin: 20px auto;
						padding-bottom: 15px;
						line-height: 1.8;
					}
				}
				dl{
					position: relative;
					&::before{
						content: url("../img/top/ico_com01.svg");
						width: 28px;
						top: 0;
						left: 0;
						position: absolute;
						@include mq{
							width: 20px;
						}
					}
					&::after{
						content: url("../img/top/ico_com02.svg");
						width: 28px;
						bottom: 0;
						right: 0;
						position: absolute;
						@include mq{
							width: 20px;
						}
					}
					dt{
						padding-left: 50px;
						font-size: 3rem;
						color: #CCCCCC;
						line-height: 1;
						margin-bottom: 20px;
						@include mq{
							padding-left: 0;
							margin-bottom: 15px;
							font-size: 2rem;
							text-align: center;
						}
					}
					.com{
						font-size: 1.4rem;
						font-family: $min;
						margin-bottom: 15px;
						line-height: 2.2;
						@include mq{
							font-size: 1.3rem;
							line-height: 1.8;
						}
					}
					.pr{
						padding-left: 80px;
						position: relative;
						font-size: 1.4rem;
						font-family: $min;
						@include mq{
							font-size: 1.3rem;
							padding-left: 50px;
						}
						&::after{
							position: absolute;
							width: 50px;
							height: 1px;
							top: 50%;
							left: 0;
							content: "";
							background: #fff;
							@include mq{
								width: 30px;
							}
						}
					}
				}
				.light{
					display: flex;
					margin-top: 30px;
					align-items: flex-end;
					justify-content: center;
					@include mq{
						margin-top: 20px;
					}
					a{
						position: relative;
						&::after{
							position: absolute;
							content: url("../img/top/ico_detail.svg");
							bottom: 0;
							left: 0;
							width: 20px;
						}
						&:nth-child(1){
							width: 40%;
						}
						&:nth-child(2){
							width: 40%;
						}
						&:nth-child(3){
							width: 20%;
						}
					}
				}
			}
		}
		.link_btn{
			width: 500px;
			margin: 60px auto 120px;
			border: 3px solid #fff;
			padding: 4px;
			position: relative;
			@include mq{
				width: 80%;
				max-width: 400px;
				margin: 40px auto 60px;
			}
			&::after{
				position: absolute;
				content: url("../img/top/ico_rs.svg");
				width: 85px;
				right: -10px;
				top: 50%;
				transform: translateY(-50%);
				@include mq{
					width: 60px;
				}
			}
			a{
				line-height: 1;
				width: 100%;
				display: block;
				border: 1px solid #fff;
				text-align: center;
				background: #000;
				transition: .5s;
				&:hover{
					background: $red;
				}
				p{
					padding: 20px 10px;
					font-size: 4rem;
					@include mq{
						padding: 15px 10px;
						font-size: 2.4rem;
					}
					span{
						font-size: 2rem;
						font-family: din-condensed,sans-serif;
						font-weight: 300;
						font-style: normal;
						vertical-align: middle;
						@include mq{
							font-size: 1.4rem;
						}
					}
				}
			}
		}
		.link_btn_not{
			width: 500px;
			margin: 60px auto 120px;
			border: 3px solid #fff;
			padding: 4px;
			position: relative;
			@include mq{
				width: 80%;
				max-width: 400px;
				margin: 40px auto 60px;
			}
			&::after{
				position: absolute;
				content: url("../img/top/ico_rs.svg");
				width: 85px;
				right: -10px;
				top: 50%;
				transform: translateY(-50%);
				@include mq{
					width: 60px;
				}
			}
			p{
				line-height: 1;
				width: 100%;
				display: block;
				border: 1px solid #fff;
				text-align: center;
				background: #333;
				opacity: .7;
				padding: 20px 10px;
				font-size: 2.5rem;
				font-weight: 600;
				@include mq{
					padding: 15px 10px;
					font-size: 1.6rem;
				}
			}
		}
	}
	.detail{
		width: 80%;
		margin: 0 auto;
		padding-bottom: 150px;
		max-width: 930px;
		@include mq{
			padding-bottom: 100px;
		}
		h3{
			font-size: 5.4rem;
			line-height: 1;
			margin-bottom: 30px;
			text-align: center;
			@include mq{
				font-size: 3rem;
				margin-bottom: 25px;
			}
			span{
				position: relative;
				padding-bottom: 8px;
				&::after{
					position: absolute;
					width: 100%;
					height: 3px;
					background: #fff;
					content: "";
					bottom: 0;
					left: 0;
					@include mq{
						height: 1px;
					}
				}
			}
		}
		p{
			font-size: 1.8rem;
			line-height: 2.2;
			letter-spacing: .1rem;
			font-weight: 600;
			margin-bottom: 40px;
			text-align: center;
			@include mq{
				font-size: 1.4rem;
				margin-bottom: 30px;
			}
		}
		ul{
			display: flex;
			flex-wrap: wrap;
			border-left: 1px solid #fff;
			border-right: 1px solid #fff;
			position: relative;
			&::before{
				position: absolute;
				top: 0;
				left: -4px;
				height: 100%;
				width: 1px;
				background: #fff;
				content: "";
			}
			&::after{
				position: absolute;
				top: 0;
				right: -4px;
				height: 100%;
				width: 1px;
				background: #fff;
				content: "";
			}
			li{
				width: 50%;
				padding: 0 60px;
				@include mq{
					width: 100%;
					padding: 0 5%;
				}
				&:nth-child(1){
					border-right: 1px solid #fff;
					@include mq{
						border-right: none;
						border-bottom: 1px solid #fff;
						padding-bottom: 30px;
						margin-bottom: 30px;
					}
				}
				h4{
					font-size: 3.2rem;
					margin-bottom: 25px;
					text-align: center;
					@include mq{
						font-size: 2.4rem;
						margin-bottom: 20px;
					}
				}
				h5{
					margin-top: 30px;
					font-size: 2rem;
					margin-bottom: 10px;
					font-weight: 600;
					text-align: center;
					@include mq{
						margin-bottom: 10px;
						font-size: 1.8rem;
						margin-top: 20px;
					}
				}
				p{
					font-size: 1.4rem;
					line-height: 2.2;
					margin-bottom: 0;
					@include mq{
						font-size: 1.3rem;
					}
				}
			}
		}
	}
}

#ex{
	background: #0F0F0F;
	padding: 85px 0 120px;
	position: relative;
	@include mq{
		padding: 60px 0 100px;
	}
	&::after{
		position: absolute;
		height: 4px;
		bottom: 0;
		left: 0;
		width: 100%;
		content: "";
		background: $red;
	}
	.content{
		.tit{
			margin-bottom: 40px;
			text-align: center;
			@include mq{
				margin-bottom: 30px;
			}
		}
		.intro{
			margin-bottom: 50px;
			font-size: 1.8rem;
			line-height: 2.2;
			letter-spacing: .1rem;
			font-weight: 600;
			text-align: center;
			@include mq{
				font-size: 1.4rem;
				margin-bottom: 40px;
			}
		}
		ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			li{
				&:nth-child(1){
					width: 50%;
					@include mq{
						width: 60%;
						margin: 0 auto 30px;
					}
				}
				&:nth-child(2){
					width: 50%;
					padding: 0 10% 0 4%;
					@include mq{
						width: 80%;
						margin: 0 auto;
						padding: 0;
					}
					h2{
						padding-left: 20px;
						position: relative;
						line-height: 1;
						margin-bottom: 20px;
						font-size: 2rem;
						&::after{
							position: absolute;
							background: $red;
							width: 2px;
							height: 100%;
							content: "";
							top: 0;
							left: 0;
						}
					}
					h3{
						font-size: 4rem;
						line-height: 1.1;
						margin-bottom: 20px;
						@include mq{
							font-size: 2.6rem;
							margin-bottom: 15px;
						}
					}
					p{
						font-size: 1.7rem;
						line-height: 2.2;
						@include mq{
							font-size: 1.5rem;
						}
					}
				}
			}
		}
		.special{
			width: 80%;
			margin: 60px auto 0;
			display: flex;
			justify-content: space-between;
			@include mq{
				display: block;
				margin: 40px auto 0;
			}
			.guest{
				width: 100%;
				@include mq{
					width: 100%;
					margin-top: 40px;
				}
			}
			h2{
				padding-left: 20px;
				position: relative;
				line-height: 1;
				margin-bottom: 20px;
				font-size: 2rem;
				&::after{
					position: absolute;
					background: $red;
					width: 2px;
					height: 100%;
					content: "";
					top: 0;
					left: 0;
				}
			}
			h4{
				font-size: 2.8rem;
				margin-bottom: 25px;
				line-height: 1;
				font-weight: 600;
				@include mq{
					font-size: 2rem;
					margin-bottom: 15px;
				}
			}
			p{
				font-size: 1.4rem;
				line-height: 2.2;
				@include mq{
					font-size: 1.3rem;
				}
				b{
					font-size: 1.6rem;
					font-weight: 600;
					display: block;
					margin-bottom: 10px;
					@include mq{
						font-size: 1.4rem;
					}
				}
			}
		}
		.place{
			width: 80%;
			margin: 60px auto 120px;
			@include mq{
				margin: 40px auto 60px;
			}
			h2{
				padding-left: 20px;
				position: relative;
				line-height: 1;
				margin-bottom: 20px;
				font-size: 2rem;
				&::after{
					position: absolute;
					background: $red;
					width: 2px;
					height: 100%;
					content: "";
					top: 0;
					left: 0;
				}
			}
			h4{
				font-size: 4rem;
				margin-bottom: 25px;
				line-height: 1;
				@include mq{
					font-size: 2.4rem;
					margin-bottom: 15px;
				}
				span{
					font-weight: 600;
					font-family: $goth;
					font-size: 3rem;
					vertical-align: middle;
					@include mq{
						font-size: 2rem;
					}
				}
			}
			.iframe{
				height: 0;
				overflow: hidden;
				padding-bottom: 25%;
				position: relative;
				@include mq{
					padding-bottom: 50%;
				}
				iframe {
					position: absolute;
					left: 0;
					top: 0;
					height: 100%;
					width: 100%;
					&.mono{
						-webkit-filter: grayscale(1);
						filter: grayscale(1);
					}
				}
			}
		}
		.link_btn{
			width: 500px;
			margin: 60px auto 0px;
			border: 3px solid #fff;
			padding: 4px;
			position: relative;
			@include mq{
				width: 80%;
				max-width: 400px;
				margin: 40px auto 0;
			}
			&::after{
				position: absolute;
				content: url("../img/top/ico_rs.svg");
				width: 85px;
				right: -10px;
				top: 50%;
				transform: translateY(-50%);
				@include mq{
					width: 60px;
				}
			}
			a{
				line-height: 1;
				width: 100%;
				display: block;
				border: 1px solid #fff;
				text-align: center;
				background: #000;
				transition: .5s;
				&:hover{
					background: $red;
				}
				p{
					padding: 20px 10px;
					font-size: 3rem;
					@include mq{
						padding: 15px 10px;
						font-size: 1.8rem;
					}
					span{
						position: relative;
						left: -15px;
						font-weight: 600;
					}
				}
			}
		}
	}
}

#list{
	background: url("../img/top/bg_lip.png") center,#111;
	background-size: cover;
	padding: 100px 0;
	@include mq{
		padding: 60px 0;
	}
	.content{
		display: flex;
		justify-content: center;
		width: 86%;
		margin: 0 auto;
		max-width: 1100px;
		align-items: center;
		@include mq{
			justify-content: space-between;
		}
	}
	.txt{
		width: 35%;
		margin-left: 30px;
		@include mq{
			width: 60%;
			margin-left: 0;
		}
		h2{
			font-size: 2.8rem;
			line-height: 1.5;
			margin-bottom: 30px;
			font-weight: 600;
			white-space: nowrap;
			@include mq{
				font-size: 1.5rem;
				margin-bottom: 15px;
			}
		}
		p{
			@include mq{
				font-size: 1.3rem;
			}
		}
	}
	figure{
		width: 35%;
	}
	.copy{
		display: block;
		width: 90%;
		margin: 20px auto 0;
		text-align: center;
		font-size: 1rem;
	}
}