/* Scss Document */

$breakpoint-sm: 374px;
$breakpoint: 768px;
$breakpoint-md: 1000px;
$breakpoint-lg: 1500px;
$txtcolor: #000000;
$gold: #A9806E;
$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 ml {
  @media screen and (min-width: $breakpoint) {
    @content;
  }
}

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

@mixin lg {
  @media screen and (min-width: $breakpoint-lg) {
    @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%;
}

html,body{
	font-family: $goth;
	font-size: 62.5%; 
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
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;
	@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;
	}
}

//フォント
.oswald {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-style: normal;
}
.gara{
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	font-style: normal;
}
.opensansi{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-style: italic;
}


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

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

.fadein {
    opacity : 0.5;
    transform : translate(0, 40px);
    transition : all 500ms;
	@include mq{
		transform : translate(0, 30px);
	}
}

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

//震える
@keyframes hurueru {
    0% {transform: none}
	25% {transform: scale(1.1)}
    50% {transform: none}
	75% {transform: scale(1.15)}
    100% {transform: none}
}
.fwari{
	display: block;
	&:hover{
		animation: hurueru .9s  infinite;
	}
}

//header
header{
	position: fixed;
    height: 80px;
    padding: 0;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;
	transition: .7s;
	color: #fff;
	@include mq{
		height: 50px;
	}
	#gnav_btn{
		position: absolute;
		width: 80px;
		height: 80px;
		top: 0;
		left: 0;
		z-index: 99999;
		cursor: pointer;
		@include mq{
			width: 50px;
			height: 50px;
		}
		&:hover{
			transition: 0.5s;
		}
		&.open span{
			animation: nav_anim1 .5s forwards;
			&::after{
				animation: nav_anim2 .5s forwards;
			}
			&::before{
				animation: nav_anim3 .5s forwards;
			}
		}
	}
	nav{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		overflow-y: scroll;
		color: #000000;
		height: 100%;
		@include mq{
			bottom: 0;
		}
		.allitem_header{
			background: url("../img/top/bg_intro_pc.jpg") center no-repeat;
			background-size: cover;
			@include mq{
				background-size: cover;
			}
		}
		.allitem_head{
			text-align: center;
			padding: 90px 0 80px;
			@include mq{
				padding: 90px 0 40px;
			}
			h1{
				width: 728px;
				margin: 0 auto 90px;
				@include mq{
					width: 80%;
					max-width: 400px;
					margin: 0 auto;
				}
			}
			ul{
				display: flex;
				justify-content: space-between;
				color: #fff;
				padding-top: 50px;
				max-width: 1150px;
				margin: 0 auto;
				@include mq{
					width: 100%;
					display: block;
					padding-top: 40px;
				}
				li{
					font-size: 3rem;
					padding-bottom: 10px;
					line-height: 1;
					@include mq{
						font-size: 2rem;
						margin-bottom: 30px;
					}
					&:last-child{
						@include mq{
							margin-bottom: 0;
						}
					}
					a{
						border-bottom: 1px solid #fff;
						display: inline;
						padding: 0 5px;
					}
				}
			}
		}
		.allitem{
			ul{
				li{
					margin: .5%;
					background: #fff;
					color: #000;
					&::before,&::after{
						content: none;
					}
				}
			}
			.see_all{
				padding: 70px 0;
			}
		}
		#nav_back{
			background: #000;
			color: #fff;
			text-align: center;
			padding: 35px 0 60px;
			a{
				margin-bottom: 25px;
				display: block;
				img{
					width: 158px;
				}
			}
			.outside{
				padding: 10px 50px;
				border: 1px solid #fff;
				margin: 0 auto;
				display: block;
				width: 20%;
				font-size: 1.4rem;
				@include mq{
					width: 60%;
				}
			}
		}
	}
}

.see_all{
	width: 306px;
	margin: 0 auto;
	a{
		display: block;
	}
}

#main{
	background: #000;
	@media screen and (max-width: 1000px){
		padding-top: 50px;
	}
}

.allitem{
	h2{
		text-align: center;
		width: 456px;
		margin: 0 auto 25px;
		@include mq{
			max-width: 320px;
			width: 90%;
		}
	}
	ul{
		display: flex;
		justify-content: center;
		text-align: center;
		flex-wrap: wrap;
		li{
			width: 18%;
			padding: 15px 1%;
			position: relative;
			color: #fff;
			&:nth-child(6),&:nth-child(8){
				padding: 15px 0;
			}
			@include mq{
				width: 48%;
				padding: 15px 2.5%;
				&:nth-child(6),&:nth-child(8){
					padding: 15px 0;
				}
			}
			a{
				display: block;
				&:hover{
					opacity: 1 !important;
				}
			}
			h3{
				margin-top: 15px;
				@include mq{
					font-size: 1.2rem;
					margin-top: 5px;
				}
			}
			p{
				@include mq{
					margin-bottom: 7px;
				}				
				margin: 0 auto 15px;
			}
			.allitem{
				margin-top: 20px;
				@include mq{
					margin-top: 50px;
				}
			}
			&:nth-child(1){
				p{width: 52px;
					@include mq{
						width: 36px;
					}
				}
			}
			&:nth-child(2){
				p{width: 48px;
					@include mq{
						width: 34px;
					} 
				}
			}
			&:nth-child(3){
				p{width: 51px;
					@include mq{
						width: 36px;
					}
				}
			}
			&:nth-child(4){
				p{width: 58px;
					@include mq{
						width: 41px;
					}
				}
			}
			&:nth-child(5){
				p{width: 48px;
					@include mq{
						width: 34px;
					}
				}
			}
			&:nth-child(6){
				p{width: 52px;
					@include mq{
						width: 36px;
					}
				}
			}
			&:nth-child(7){
				p{width: 48px;
					@include mq{
						width: 34px;
					}
				}
			}
			&:nth-child(8){
				p{width: 50px;
					@include mq{
						width: 35px;
					}
				}
			}
			&:nth-child(9){
				p{width: 60px;
					@include mq{
						width: 42px;
					}
				}
			}
			&:nth-child(10){
				p{width: 52px;
					@include mq{
						width: 36px;
					}
				}
			}
			&:nth-child(11){
				p{width: 60px;
					@include mq{
						width: 42px;
					}
				}
				@include ml{
					&::before,&::after{
						content: none;
					}
				}
			}
			&:nth-child(12){
				p{width: 50px;
					@include mq{
						width: 35px;
					}
				}
				@include ml{
					&::before,&::after{
						content: none;
					}
				}
			}
			&:nth-child(13){
				p{
					width: 55px;
					@include mq{
						width: 38px;
						margin-top: 10px;
					}
				}
				@include ml{
					&::before,&::after{
						content: none;
					}
				}
				@include mq{
					padding: 25px 1% 15px;
					&::before,&::after{
						content: none;
					}
				}
			}
			&::before{
				position: absolute;
				right: 0;
				bottom: 0;
				height: 1px;
				width: 26px;
				transform: translateX(50%);
				content: "";
				background: #fff;
			}
			&::after{
				position: absolute;
				right: 0;
				bottom: 0;
				height: 26px;
				width: 1px;
				transform: translateY(50%);
				content: "";
				background: #fff;
			}
			&:nth-child(5n){
				@include ml{
					&::before,&::after{
						content: none;
					}
				}
			}
			&:nth-child(2n){
				@include mq{
					&::before,&::after{
						content: none;
					}
				}
			}
		}
	}
}

.intro{
	padding: 90px 0 45px;
	background: url("../img/top/bg_intro_pc.jpg") center no-repeat;
	background-size: cover;
	&.introsec{
		padding-bottom: 160px;
	}
	.content{
		width: 98%;
		margin: 0 auto;
		.intro_txt{
			text-align: center;
			color: #fff;
			h2{
				font-size: 3rem;
				margin-bottom: 35px;
				font-weight: bold;
				@include mq{
					font-size: 2rem;
					margin-bottom: 30px;
				}
			}
			p{
				margin-bottom: 100px;
				position: relative;
				line-height: 2.5;
				&::after{
					content: "";
					position: absolute;
					bottom: -50px;
					left: 50%;
					transform: translateX(-50%);
					height: 1px;
					width: 80px;
					background: #fff;
				}
			}
		}
	}
}

#gallery{
	background: #141414;
	padding-top: 55px;
	@include mq{
		padding-top: 50px;
	}
	.content{
		h2{
			width: 284px;
			z-index: 3;
			position: relative;
			margin: 0 auto;
			@include mq{
				width: 154px;
			}
		}
		figure{
			&.gallery_1{
				margin-top: -25px;
				@include mq{
					margin-top: -10px;
				}
			}
			&.ren{
				background: url("../img/top/bg_gallery_pc.jpg") no-repeat;
				background-size: contain;
				@media screen and (max-width: 1500px){
					background-size: cover;
				}
				@include mq{
					background: url("../img/top/bg_gallery_sp.jpg") no-repeat;
					background-size: cover;
				}
				.box{
					width: 56%;
					margin: 0 auto;
					padding: 155px 0 185px;
					position: relative;
					@include mq{
						padding: 40px 0 35px;
					}
					&::before{
						position: absolute;
						background: url("../img/top/add_gallery_01.png");
						width: 516px;
						height: 387px;
						content: "";
						top: 0;
						right: 0;
						transform: translate(75%,-20%);
						background-size: cover;
						z-index: 2;
						@include mq{
							width: 130px;
							height: 97px;
						}
					}
					&::after{
						position: absolute;
						background: url("../img/top/add_gallery_02.png");
						width: 452px;
						height: 273px;
						content: "";
						bottom: 0;
						left: 0;
						transform: translate(-65%,30%);
						background-size: cover;
						z-index: 2;
						@include mq{
							width: 113px;
							height: 68px;
							transform: translate(-65%,85%);
						}
					}
				}
				.colum{
					background: #141414;
					display: flex;
					justify-content: space-between;
					@include mq{
						background: none;
						display: block;
						text-align: center;
					}
					figure{
						width: 47.5%;
						height: auto;
						@include mq{
							width: 62%;
							margin: 0 auto 15px;
							&:last-child{
								margin-bottom: 0;
							}
						}
					}
				}
			}
		}
	}
}

#products{
	@include mq{
		margin-top: 35px;
	}
	.content{
		ul{
			li{
				margin-bottom: 70px;
				@include mq{
					margin-bottom: 90px;
				}
				.product_box{
					margin-bottom: 70px;
					@include mq{
						margin-bottom: 30px;
					}
					.product_main{
						margin-bottom: 15px;
					}
					.product_detail{
						display: flex;
						justify-content: center;
						align-items: center;
						@include mq{
							display: block;
							width: 80%;
							margin: 0 auto;
						}
						.product_img{
							width: 34%;
							margin-right: 3%;
							@include mq{
								width: 80%;
								margin: 0 auto 30px;
							}
						}
						.product_txt{
							width: 45.2%;
							padding: 30px;
							background: url("../img/top/ico_lt.svg") no-repeat top 0 left 0 ,url("../img/top/ico_lb.svg") no-repeat bottom 0 left 0,url("../img/top/ico_rt.svg") no-repeat top 0 right 0 ,url("../img/top/ico_rb.svg") no-repeat bottom  0 right 0;
							background-size: 31px;
							@include mq{
								width: 100%;
								background: none;
								padding: 0;
							}
							dl{
								font-size: 1.8rem;
								line-height: 1;
								margin-bottom: 40px;
								@include mq{
									text-align: center;
									padding: 15px;
									font-size: 1.3rem;
									margin-bottom: 30px;
									background: url("../img/top/ico_lt.svg") no-repeat top 0 left 0 ,url("../img/top/ico_lb.svg") no-repeat bottom 0 left 0,url("../img/top/ico_rt.svg") no-repeat top 0 right 0 ,url("../img/top/ico_rb.svg") no-repeat bottom  0 right 0;
									background-size: 8px;
								}
								dt{
									margin-bottom: 10px;
								}
							}
							p{
								font-size: 1.4rem;
								line-height: 2;
								@include mq{
									line-height: 1.6;
								}
							}
						}
					}
				}
				&:nth-child(2){
					margin-bottom: -30px;
					@include mq{
						margin-bottom: 70px;
					}
					.product_box{
						margin-bottom: 50px;
						@include mq{
							margin-bottom: 30px;
						}
						.product_main{
							margin-bottom: 100px;
							@include mq{
								margin-bottom: 30px;
							}
						}
						.product_detail{
							flex-direction: row-reverse;
							.product_img{
								width: 42%;
								margin-left: 3%;
								margin-right: 0;
								@include mq{
									width: 100%;
									margin: 0 auto 30px;
								}
							}
							.product_txt{
								width: 35%;
								@include mq{
									width: 100%;
								}
							}
						}
					}
				}
				&:nth-child(3){
					margin-bottom: 70px;
					@include mq{
						margin-bottom: 90px;
					}
					.product_box{
						margin-bottom: 70px;
						@include mq{
							margin-bottom: 30px;
						}
						.product_main{
							margin-bottom: 75px;
							@include mq{
								margin-bottom: 30px;
							}
						}
						.product_detail{
							.product_img{
								width: 32%;
								margin-right: 3%;
								@include mq{
									width: 80%;
									margin: 0 auto 30px;
								}
							}
							.product_txt{
								width: 35%;
								@include mq{
									width: 100%;
								}
							}
						}
					}
				}
				&:nth-child(4){
					margin-bottom: -55px;
					@include mq{
						margin-bottom: 70px;
					}
					.product_box{
						margin-bottom: 50px;
						@include mq{
							margin-bottom: 30px;
						}
						.product_main{
							margin-bottom: 70px;
							@include mq{
								margin-bottom: 30px;
							}
						}
						.product_detail{
							flex-direction: row-reverse;
							.product_img{
								width: 42%;
								margin-left: 3%;
								margin-right: 0;
								@include mq{
									width: 100%;
									margin: 0 auto 30px;
								}
							}
							.product_txt{
								width: 35%;
								@include mq{
									width: 100%;
								}
							}
						}
					}
				}
				&:nth-child(5),&:nth-child(7){
					margin-bottom: 70px;
					@include mq{
						margin-bottom: 90px;
					}
					.product_box{
						margin-bottom: 70px;
						@include mq{
							margin-bottom: 30px;
						}
						.product_main{
							margin-bottom: 75px;
							@include mq{
								margin-bottom: 30px;
							}
						}
						.product_detail{
							.product_img{
								width: 32%;
								margin-right: 3%;
								@include mq{
									width: 80%;
									margin: 0 auto 30px;
								}
							}
							.product_txt{
								width: 35%;
								@include mq{
									width: 100%;
								}
							}
						}
					}
				}
				&:nth-child(6){
					margin-bottom: -75px;
					@include mq{
						margin-bottom: 60px;
					}
					.product_box{
						margin-bottom: 50px;
						@include mq{
							margin-bottom: 30px;
						}
						.product_main{
							margin-bottom: 70px;
							@include mq{
								margin-bottom: 30px;
							}
						}
						.product_detail{
							flex-direction: row-reverse;
							.product_img{
								width: 32%;
								margin-left: 3%;
								margin-right: 0;
								@include mq{
									width: 80%;
									margin: 0 auto 30px;
								}
							}
							.product_txt{
								width: 35%;
								@include mq{
									width: 100%;
								}
							}
						}
					}
				}
				&:nth-child(8){
					margin-bottom: 70px;
					@include mq{
						margin-bottom: 90px;
					}
					.product_box{
						margin-bottom: 50px;
						@include mq{
							margin-bottom: 30px;
						}
						.product_main{
							margin-bottom: 70px;
							@include mq{
								margin-bottom: 30px;
							}
						}
						.product_detail{
							flex-direction: row-reverse;
							.product_img{
								width: 44%;
								margin-left: 3%;
								margin-right: 0;
								@include mq{
									width: 100%;
									margin: 0 auto 30px;
								}
							}
							.product_txt{
								width: 35%;
								@include mq{
									width: 100%;
								}
							}
						}
					}
				}
				&:nth-child(9){
					margin-bottom: 70px;
					@include mq{
						margin-bottom: 90px;
					}
					.product_box{
						margin-bottom: 70px;
						@include mq{
							margin-bottom: 30px;
						}
						.product_main{
							margin-bottom: 0;
							@include mq{
								margin-bottom: 10px;
							}
						}
						.product_detail{
							.product_img{
								width: 32%;
								margin-right: 3%;
								@include mq{
									width: 80%;
									margin: 0 auto 30px;
								}
							}
							.product_txt{
								width: 35%;
								@include mq{
									width: 100%;
								}
							}
						}
					}
				}
				&:nth-child(10){
					margin-bottom: 70px;
					@include mq{
						margin-bottom: 90px;
					}
					.product_box{
						margin-bottom: 50px;
						@include mq{
							margin-bottom: 30px;
						}
						.product_main{
							margin-bottom: 70px;
							@include mq{
								margin-bottom: 30px;
							}
						}
						.product_detail{
							flex-direction: row-reverse;
							.product_img{
								width: 32%;
								margin-left: 3%;
								margin-right: 0;
								@include mq{
									width: 80%;
									margin: 0 auto 30px;
								}
							}
							.product_txt{
								width: 35%;
								@include mq{
									width: 100%;
								}
							}
						}
					}
				}
				&:nth-child(11){
					margin-bottom: 70px;
					@include mq{
						margin-bottom: 90px;
					}
					.product_box{
						margin-bottom: 70px;
						@include mq{
							margin-bottom: 30px;
						}
						.product_main{
							margin-bottom: 0;
							@include mq{
								margin-bottom: 10px;
							}
						}
						.product_detail{
							.product_img{
								width: 43%;
								margin-right: 3%;
								@include mq{
									width: 90%;
									margin: 0 auto 30px;
								}
							}
							.product_txt{
								width: 35%;
								@include mq{
									width: 100%;
								}
							}
						}
					}
				}
				&:nth-child(12){
					margin-bottom: -110px;
					@include mq{
						margin-bottom: 60px;
					}
					.product_box{
						margin-bottom: 50px;
						@include mq{
							margin-bottom: 30px;
						}
						.product_main{
							margin-bottom: 70px;
							@include mq{
								margin-bottom: 30px;
							}
						}
						.product_detail{
							flex-direction: row-reverse;
							.product_img{
								width: 43%;
								margin-left: 3%;
								margin-right: 0;
								@include mq{
									width: 90%;
									margin: 0 auto 30px;
								}
							}
							.product_txt{
								width: 35%;
								@include mq{
									width: 100%;
								}
							}
						}
					}
				}
				&:nth-child(13){
					margin-bottom: 70px;
					@include mq{
						margin-bottom: 90px;
					}
					.product_box{
						margin-bottom: 70px;
						@include mq{
							margin-bottom: 30px;
						}
						.product_main{
							margin-bottom: 0;
							@include mq{
								margin-bottom: 10px;
							}
						}
						.product_detail{
							.product_img{
								width: 44%;
								margin-right: 3%;
								@include mq{
									width: 90%;
									margin: 0 auto 30px;
								}
							}
							.product_txt{
								width: 35%;
								@include mq{
									width: 100%;
								}
							}
						}
					}
				}
			}
			.detail_bnr{
				width: 242px;
				margin: 0 auto;
				position: relative;
				z-index: 5;
				@include mq{
					width: 137px;
				}
			}
		}
	}
}

#map{
	margin-top: -140px;
	h3{
		position: relative;
		width: 277px;
		margin: 0 auto;
		z-index: 3;
		@include mq{
			width: 110px;
		}
	}
	.iframe{
		width: 100%;
    	margin: -138px auto -10px;
		@include mq{
			height: 500px;
			margin: -55px auto -10px;
		}
		.mono{
			-webkit-filter: grayscale(1);
    		filter: grayscale(1);
		}
	}
}

#footer{
	background: #000;
	background-size: cover;
	color: #fff;
	padding-bottom: 50px;
	font-family: $min;
	@include mq{
		background-size: contain;
	}
	.footer_inner{
		margin: 0 auto 0;
		padding-top: 50px;
		@include mq{
			margin: 0 auto;
			padding-top: 40px;
		}
		.shop{
			width: 88%;
			max-width: 900px;
			margin: 0 auto;
			ul{
				display: flex;
				flex-wrap: nowrap;
				padding: 30px 0 40px;
				justify-content: center;
				@include mq{
					display: block;
					padding: 0;
				}
				li{
					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;
					}
					p{
						margin-bottom: 10px;
						&:last-child{
							margin-bottom: 0;
						}
					}
					a{
						padding: 5px 5px 5px 6px;
						border: 1px solid #fff;
						margin-left: 10px;
						color: #fff;
						font-size: 1.2rem;
					}
				}
			}
			.shop_tel{
				width: 90%;
				margin: 0 auto;
				display: flex;
				font-size: 2.2rem;
				text-align: center;
				justify-content: space-between;
				color: #fff;
				@include mq{
					width: 100%;
					display: block;
					font-size: 1.4rem;
				}
				a{
					width: 48%;
					padding: 20px 10px;
					line-height: 1.2;
					background: #333;
					@include mq{
						width: 100%;
						margin-bottom: 10px;
						display: block;
						padding: 10px;
					}
					img{
						width: 20px;
						margin-right: 8px;
						margin-top: 1px;
						@include mq{
							width: 13px;
							margin-right: 6px;
							margin-top: 0;
						}
					}
					&:nth-child(2){
						img{
							width: 24px;
							margin-right: 8px;
							margin-top: 3px;
							@include mq{
								width: 15px;
								margin-top: 1px;
							}
						}
					}
				}
			}
		}
		.footer_2box{
			margin: 80px auto 70px;
			@include mq{
				margin: 95px auto 60px;
			}
			ul{
				display: flex;
				@include mq{
					display: block;
				}
				li{
					width: 50%;
					background: #333;
					@include mq{
						width: 93.333%;
						margin: 0 auto 10px;
						&:last-child{
							margin-bottom: 0;
						}
					}
					figure{
						position: relative;
					}
					h3{
						position: absolute;
						top: 50%;
						left: 100%;
						transform: translate(-50%,-50%);
						background: #fff;
						padding: 10px 20px 5px 25px;
						font-size: 3rem;
						line-height: 1;
						color: #000;
						letter-spacing: 1rem;
						@include mq{
							top: 0;
							left: 50%;
							font-size: 1.8rem;
							letter-spacing: 0.5rem;
							padding: 8px 12px 6px 15px;
						}
					}
					@include ml{
						&:first-child{
							border-right: 1px solid #fff;
						}
					}
					p{
						width: 83%;
						margin: 0 auto;
						padding: 45px 0 70px;
						@include mq{
							font-size: 1.2rem;
							padding: 25px 0;
						}
					}
				}
			}
		}
		.sns{
			border: 1px solid $gold;
			text-align: center;
			position: relative;
			width: 88%;
			max-width: 900px;
			margin: 0 auto;
			article{
				border: 1px solid $gold;
				margin: 0.25% auto;
				width: 99.5%;
				padding: 60px;
				@include mq{
					padding: 25px 25px 15px;
				}
			}
			h3{
				font-size: 5.2rem;
				line-height: 1;
				background: #000;
				padding: 0 20px;
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%,-50%);
				color: $gold;
				@include mq{
					font-size: 2.8rem;
				}
			}
			p{
				@include mq{
					font-size: 1.2rem;
				}
			}
			.link_app{
				text-align: center;
				font-size: 1.2rem;
				margin-bottom: 40px;
				color: $gold;
				position: relative;
				margin-top: 60px;
				@include mq{
					margin-top: 40px;
					font-size: 1.4rem;
					margin-bottom: 30px;
				}
				&::after{
					position: absolute;
					top: -30px;
					left: 50%;
					transform: translateX(-50%);
					content: "";
					background: #fff;
					width: 50px;
					height: 1px;
					@include mq{
						top: -20px;
					}
				}
			}
			.link_icos{
				display: flex;
				justify-content: space-between;
				width: 80%;
				flex-wrap: wrap;
				margin: 0 auto;
				align-items: center;
				@include  mq{
					width: 70%;
				}
				li{
					a{
						display: block;
					}
					&:nth-child(1),&:nth-child(2),&:nth-child(4),&:nth-child(6){
						img{
							width: 48px;
						}
					}
					&:nth-child(3),&:nth-child(5){
						img{
							width: 40px;
						}
					}
					@include mq{
						margin-bottom: 20px;
						width: 33.333%;
					}
				}
			}
		}
		.footer_content{
			width: 88%;
			max-width: 900px;
			padding: 3%;
			display: flex;
			font-size: 1.4rem;
			margin: 35px auto 35px;
			border: 1px solid #fff;
			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%;
					}
				}
			}
		}
		.footer_logo{
			text-align: center;
			margin: 60px auto 25px;
			width: 116px;
		}
		.footer_copy{
			text-align: center;
			font-size: 1.4rem;
		}
	}
}