/* Scss Document */

$breakpoint-sm: 374px;
$breakpoint: 768px;
$breakpoint-md: 1000px;
$breakpoint-lg: 1500px;
$txtcolor: #000000;
$gold: #C0966E;
$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: $min;
	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;
}
.cinzel{
	font-family: 'Cinzel', serif;
	font-weight: 400;
	font-style: normal;
}
.gara{
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	font-style: normal;
}

//フェードイン
@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: 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;
	}
}

//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;
			padding-bottom: 120px;
			@include mq{
				background: url("../img/top/bg_intro_sp.jpg") center no-repeat;
				background-size: cover;
				padding-bottom: 100px;
			}
		}
		.allitem_head{
			text-align: center;
			padding: 90px 0 80px;
			@include mq{
				padding: 90px 0 40px;
			}
			h1{
				width: 473px;
				margin: 0 auto 90px;
				@include mq{
					width: 78%;
					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;
					}
				}
			}
		}
		h2.all_txt{
			width: 276px;
			margin: 0 auto 40px;
			@include mq{
				width: 30%;
				max-width: 276px;
			}
		}
		.allitem_list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 0 auto 40px;
			width: 90%;
			max-width: 860px;
			@include mq{
				justify-content: center;
			}
			li{
				width: 33%;
				text-align: center;
				background: #fff;
				padding: 30px;
				margin-bottom: 1%;
				@include mq{
					width: 48%;
					margin: 1%;
					padding: 20px 10px 10px;
				}
				@include ml{
					&:nth-child(4){
						width: 49.5%;
						img{
							width: 68%;
							height: auto;
						}
					}
					&:nth-child(5){
						width: 49.5%;
						img{
							width: 80%;
							height: auto;
						}
					}
				}
				p{
					font-size: 2rem;
					line-height: 1;
					@include mq{
						font-size: 1.3rem;
					}
					span{
						position: relative;
						&::before{
							position: absolute;
							content: url("../img/top/ico_sukuna_leftb.svg");
							width: 16px;
							top: 0;
							left: -30px;
							@include mq{
								width: 11px;
								left: -20px;
							}
						}
						&::after{
							position: absolute;
							content: url("../img/top/ico_sukuna_rightb.svg");
							width: 16px;
							top: 0;
							right: -30px;
							@include mq{
								width: 11px;
								right: -20px;
							}
						}
					}
				}
				img{
					margin-top: 15px;
					@include mq{
						margin-top: 15px;
					}
				}
				h2{
					font-size: 1.8rem;
					margin-top: 30px;
					line-height: 1.25;
					@include mq{
						font-size: 1.2rem;
						margin-top: 20px;
					}
				}
			}
		}
		.see_all{
			max-width: 265px;
			width: 70%;
			display: block;
			padding: 20px 0;
			white-space: nowrap;
		}
		#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{
	margin: 0 auto;
	background: #fff;
	font-size: 3.2rem;
	padding: 20px 45px;
	line-height: 1;
	color: #000;
	display: inline-block;
	letter-spacing: 1rem;
	text-align: center;
	@include mq{
		padding: 20px 10px;
		font-size: 2.2rem;
		width: 70%;
		max-width: 300px;
		letter-spacing: .5rem;
	}
	span{
		position: relative;
		left: .5rem;
		@include mq{
			left: .25rem;
		}
	}
}

#main{
	div{
		position: relative;
		p{
			text-align: right;
			font-size: 1.1rem;
			line-height: 1;
			position: absolute;
			bottom: -25px;
			right: 5%;
			width: 40%;
			z-index: 3;
			color: #fff;
			@include mq{
				right: 50%;
				transform: translateX(50%);
				font-size: 1rem;
				width: 95%;
				text-align: center;
				line-height: 1.25;
				bottom: -30px;
			}
		}
	}
}

#intro{
	background: url("../img/top/bg_intro_pc.jpg") center no-repeat;
	background-size: cover;
	@include mq{
		background: url("../img/top/bg_intro_sp.jpg") bottom center no-repeat;
		background-size: cover;
	}
	.content{
		color: #fff;
		padding: 110px 0 40px;
		@include md{
			padding: 110px 0 50px;
		}
		h1{
			max-width: 820px;
			width: 60%;
			margin: 0 auto 40px;
			@include mq{
				width: 80%;
				max-width: 295px;
			}
		}
		p{
			margin: 0 auto;
			line-height: 2.2;
			text-align: center;
			margin-bottom: 30px;
			width: 90%;
			max-width: 1280px;
			@include md{
				margin-bottom: 30px;
			}
			&.intro_end{
				padding-bottom: 75px;
				border-bottom: 1px dashed  #fff;
				margin-bottom: 60px;
				@include  mq{
					padding-bottom: 115px;
					margin-bottom: -15%;
				}
			}
		}
		h2{
			max-width: 1140px;
			width: 75%;
			margin: 0 auto;
		}
	}
}

.allitem_top{
	width: 90%;
	margin: 0 auto;
	text-align: center;
	color: #fff;
	padding-bottom: 50px;
	@include mq{
		padding-bottom: 60px;
	}
	ul{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		position: relative;
		left: 1.7%;
		@include mq{
			justify-content: center;
			position: static;
		}
		li{
			width: 19.4%;
			@include mq{
				width: 50%;
				margin-bottom: 30px;
			}
			&:last-child{
				width: 22.4%;
				@include mq{
					width: 55%;
				}
			}
			p{
				font-size: 2rem;
				position: relative;
				line-height: 1;
				display: inline;
				@include mq{
					font-size: 1.3rem;
				}
				&::before{
					position: absolute;
					content: url("../img/top/ico_sukuna_leftw.svg");
					width: 16px;
					top: 0;
					left: -30px;
					@include mq{
						width: 11px;
						left: -20px;
					}
				}
				&::after{
					position: absolute;
					content: url("../img/top/ico_sukuna_rightw.svg");
					width: 16px;
					top: 0;
					right: -30px;
					@include mq{
						width: 11px;
						right: -20px;
					}
				}
			}
			img{
				margin-top: 30px;
				@include mq{
					margin-top: 20px;
				}
			}
			h2{
				font-size: 1.8rem;
				margin-top: 30px;
				line-height: 1.25;
				@include mq{
					font-size: 1.2rem;
					margin-top: 20px;
				}
			}
		}
	}
	.see_all{
		margin-top: 20px;
		@include mq{
			margin-top: 30px;
		}
	}
}

#gallery{
	background: url("../img/top/bg_gallery.png") center,#000;
	padding-top: 100px;
	margin-bottom: 30px;
	@include mq{
		background-size: 30%;
		padding-top: 40px;
		margin-bottom: 45px;
	}
	h2{
		width: 40%;
		max-width: 248px;
		margin: 0 auto;
	}
	figure{
		&:nth-child(2){
			width: 76.86%;
			margin: 50px auto 80px;
			@include mq{
				width: 84.5%;
				margin: 35px auto;
			}
		}
		&:nth-child(3){
			width: 44.6%;
			margin: 0 auto 115px;
			@include mq{
				width: 58.6%;
				margin-bottom: 40px;
			}
		}
	}
}

#products{
	.content{
		article{
			.product_box{
				padding: 65px 0 230px;
				width: 62%;
				min-width: 600px;
				margin: 0 auto;
				position: relative;
				@include mq{
					min-width: inherit;
					width: 90%;
					padding: 30px 0 100px;
				}
				&::after{
					position: absolute;
					content: url("../img/top/ico_sukuna.svg");
					width: 86px;
					bottom: 85px;
					left: 50%;
					transform: translateX(-50%);
					@include mq{
						bottom: 35px;
						width: 43px;
					}
				}
				.product_name{
					text-align: center;
					line-height: 1;
					p{
						font-size: 2.4rem;
						position: relative;
						display: inline-block;
						margin: 0 auto 15px;
						@include mq{
							font-size: 1rem;
						}
						&::before{
							content: url("../img/top/ico_sukuna_leftb.svg");
							position: absolute;
							top: 0;
							left: -30px;
							width: 17px;
							@include mq{
								width: 8px;
								left: -15px;
							}
						}
						&::after{
							content: url("../img/top/ico_sukuna_rightb.svg");
							position: absolute;
							top: 0;
							right: -30px;
							width: 17px;
							@include mq{
								width: 8px;
								right: -15px;
							}
						}
					}
					span{
						font-size: 7.5rem;
						margin-bottom: 15px;
						letter-spacing: 0.1rem;
						display: block;
						@include mq{
							font-size: 3.2rem;
							margin-bottom: 10px;
						}
					}
					strong{
						font-size: 2rem;
						margin-bottom: 25px;
						letter-spacing: 0.6rem;
						display: block;
						@include mq{
							font-size: 1rem;
						}
					}
				}
				.product_img_box{
					position: relative;
					@include mq{
						padding-bottom: 60px;
					}
					.product_img{
						width: 100%;
						margin: 0 auto;
						display: flex;
						justify-content: center;
						figure{
							width: 50%;
						}
					}
					.product_link{
						position: absolute;
						bottom: 0;
						right: 0;
						transform: translateX(50%);
						width: 115px;
						@include mq{
							width: 60px;
							right: 50%;
							bottom: -15px;
						}
					}
				}
				.product_price{
					margin-top: 30px;
					padding: 40px 0 30px;
					text-align: center;
					position: relative;
					font-size: 2rem;
					@include mq{
						font-size: 1.6rem;
						padding: 20px 0 15px;
					}
					&::before{
						position: absolute;
						content: "";
						width: 75px;
						height: 2px;
						top: 0;
						left: 50%;
						transform: translateX(-50%);
						background: #000;
						@include mq{
							width: 20px;
						}
					}
				}
				.product_txt{
					font-size: 1.4rem;
					line-height: 2;
					@include mq{
						font-size: 1.2rem;
						width: 85%;
						margin: 0 auto;
					}
				}
			}
			&:nth-child(2n){
				background: #262626;
				color: #fff;
				.product_box{
					&::after{
						position: absolute;
						content: url("../img/top/ico_sukunaw.svg");
						width: 86px;
						bottom: 85px;
						left: 50%;
						transform: translateX(-50%);
						@include mq{
							bottom: 35px;
							width: 43px;
						}
					}
					.product_name{
						p{
							&::before{
								content: url("../img/top/ico_sukuna_left.svg");
								position: absolute;
								top: 0;
								left: -30px;
								width: 17px;
								@include mq{
									width: 8px;
									left: -15px;
								}
							}
							&::after{
								content: url("../img/top/ico_sukuna_right.svg");
								position: absolute;
								top: 0;
								right: -30px;
								width: 17px;
								@include mq{
									width: 8px;
									right: -15px;
								}
							}
						}
					}
					.product_price{
						&::before{
							position: absolute;
							content: "";
							width: 20px;
							height: 2px;
							top: 0;
							left: 50%;
							transform: translateX(-50%);
							background: #fff;
						}
					}
				}
			}
			&:nth-child(2){
				.product_bg{
					background: url("../img/top/item_02_left.png") top left no-repeat,url("../img/top/item_02_right.png") top right no-repeat,#262626;
					background-size: 20%;
					@include mq{
						background-size: 35%;
					}
				}
				.product_box{
					padding-top: 150px;
					@include mq{
						padding-top: 50px;
					}
				}
			}
			&:nth-child(3){
				.product_box{
					padding-top: 90px;
					@include mq{
						padding-top: 50px;
					}
				}
			}
			&:nth-child(4){
				.product_bg{
					background: url("../img/top/item_04_left.png") center left no-repeat,url("../img/top/item_04_right.png") center right no-repeat,#262626;
					background-size: 12%;
					@include mq{
						background-size: 20%;
					}
				}
				.product_box{
					padding-top: 130px;
					@include mq{
						padding-top: 50px;
					}
				}
			}
			&:nth-child(5){
				.product_bg{
					background: url("../img/top/item_05_bg.jpg") bottom center no-repeat;
					background-size: contain;
					padding-bottom: 150px;
					@include mq{
						padding-bottom: 35px;
					}
				}
				.product_link{
					right: 17% !important;
					@include mq{
						right: 50% !important;
					}
				}
			}
		}
	}
}

#style{
	background: #262626;
	padding-top: 50px;
	text-align: center;
	h2.txt_style{
		display: inline-block;
		text-align: center;
		margin: 0 auto 40px;
		font-size: 4rem;
		position: relative;
		letter-spacing: 1rem;
		left: 1rem;
		color: #fff;
		@include mq{
			font-size: 2.9rem;
		}
		&::before{
			position: absolute;
			content: url("../img/top/ico_sukuna_leftw.svg");
			width: 35px;
			top: 0;
			left: -70px;
			@include  mq{
				width: 25px;
			}
		}
		&::after{
			position: absolute;
			content: url("../img/top/ico_sukuna_rightw.svg");
			width: 35px;
			top: 0;
			right: -70px;
			@include  mq{
				width: 25px;
			}
		}
	}
	.slick-prev{
		width: 70px;
		height: 70px;
		left: 1.5%;
		@include mq{
			width: 45px;
			height: 45px;
		}
		&::after{
			position: absolute;
			width: 70px;
			height: 70px;
			content: "";
			background: url("../img/top/ico_left.png");
			top: 0;
			left: 0;
			background-size: cover;
			@include mq{
				width: 45px;
				height: 45px;
			}
		}
	}
	.slick-next{
		width: 70px;
		height: 70px;
		right: 1.5%;
		@include mq{
			width: 45px;
			height: 45px;
		}
		&::after{
			position: absolute;
			width: 70px;
			height: 70px;
			content: "";
			background: url("../img/top/ico_right.png");
			top: 0;
			right: 0;
			background-size: cover;
			@include mq{
				width: 45px;
				height: 45px;
			}
		}
	}
	.allitem_top{
		background: url("../img/top/bg_intro_pc.jpg") center no-repeat;
		background-size: cover;
		width: 100%;
		margin: 0 auto;
		text-align: center;
		color: #fff;
		padding: 0 5% 50px;
		@include mq{
			background: url("../img/top/bg_intro_sp.jpg") bottom center no-repeat;
			background-size: cover;
			padding-bottom: 60px;
		}
		h4{
			max-width: 1140px;
			width: 75%;
			margin: 0 auto 40px;
			padding-top: 70px;
			@include mq{
				padding-top: 90px;
				margin-bottom: 50px;
			}
		}
	}
}

#map{
	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;
	@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;
		}
	}
}

#pan{
	background: #000;
	margin-bottom: 120px;
	@include mq{
		margin-bottom: 105px;
	}
	ul{
		width: 95%;
		font-size: 1.4rem;
		display: flex;
		color: #fff;
		margin: 0 auto;
		@include mq{
			font-size: 1.2rem;
		}
		li{
			margin: 10px 5px;
			line-height: 1;
		}
	}
}