/* Scss Document */

$breakpoint-sm: 374px;
$breakpoint:  900px;
$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;
	}
}

//フォント
.jost{
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-style: italic;
}
.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_menu.jpg") center no-repeat;
			background-size: cover;
			padding-bottom: 120px;
			@include mq{
				padding-bottom: 100px;
			}
		}
		.allitem_head{
			text-align: center;
			padding: 90px 0 80px;
			@include mq{
				padding: 90px 0 40px;
			}
			h1{
				width: 726px;
				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;
					}
				}
			}
		}
		#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{
	background: url("../img/top/bg_seeall.png") center no-repeat;
	background-size: cover;
	height: 108px;
	width: 720px;
	margin: 40px auto 0;
	@include mq{
		margin: 20px auto 0;
		max-width: 290px;
		height: 45px;
		width: 90%;
	}
	a{
		display: block;
	}
	h3{
		font-size: 3.2rem;
		color: #ede400;
		text-align: center;
		line-height: 108px;
		letter-spacing: .3rem;
		@include mq{
			font-size: 1.8rem;
			line-height: 45px;
		}
	}
}

.allitem{
	.allin{
		width: 100%;
	}
	h2{
		width: 90%;
		background: url("../img/top/bg_collabo.svg") center no-repeat;
		background-size: contain;
		line-height: 1;
		font-size: 4.4rem;
		letter-spacing: .4rem;
		color: #fff;
		margin: 0 auto 40px;
		text-align: center;
		@include mq{
			font-size: 2.6rem;
			margin: 0 auto 30px;
		}
	}
	ul{
		display: flex;
		flex-wrap: wrap;
		width: calc(90% + 10px);
		margin: 0 auto;
		justify-content: center;
		li{
			width: calc(20% - 10px);
			margin: 0 5px 40px;
			color: #fff;
			text-align: center;
			@include mq{
				width: calc(33.33333% - 10px);
				margin: 0 5px 20px;
			}
			figure{
				border: 4px solid #000;
				@include mq{
					border: 2px solid #000;
				}
			}
			.num{
				margin-bottom: 13px;
				line-height: 1;
				font-size: 2rem;
				@include mq{
					font-size: 1.2rem;
					margin-bottom: 6px;
				}
			}
			.name{
				margin-top: 13px;
				line-height: 1;
				font-size: 2rem;
				@include mq{
					font-size: 1.2rem;
					margin-top: 6px;
				}
			}
			a{
				display: block;
				cursor: pointer;
			}
		}
	}
}

#main{
	position: relative;
	z-index: 2;
}

#intro{
	margin-top: -13%;
	background: url("../img/top/bg_ink_right.svg") top 0% right 0% no-repeat, url("../img/top/bg_ink_left.svg") top 5% left 0% no-repeat, url("../img/top/bg_intro.jpg") top center;
	background-size: 25.5%, 14.6%, cover;
	position: relative;
	z-index: 1;
	padding-bottom: 110px;
	@include mq{
		background: url("../img/top/bg_ink_right.svg") top 0% right 0% no-repeat, url("../img/top/bg_ink_left.svg") top 5% left 0% no-repeat, url("../img/top/bg_intro.jpg") top center;
		background-size: 25.5%, 14.6%, cover;
		padding-bottom: 40px;
	}
	&::before{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 225px;
		height: 557px;
		background: url("../img/top/bg_intro_left.jpg");
		mix-blend-mode: multiply;
		content: "";
		background-size: cover;
		@include mq{
			content: none;
		}
	}
	&::after{
		position: absolute;
		bottom: 0;
		right: 0;
		width: 289px;
		height: 544px;
		background: url("../img/top/bg_intro_right.jpg");
		mix-blend-mode: multiply;
		content: "";
		background-size: cover;
		@include mq{
			content: none;
		}
	}
	.content{
		position: relative;
		z-index: 3;
		.intro_txt{
			padding: 250px 0 130px;
			text-align: center;
			width: 92%;
			margin: 0 auto;
			color: #fff;
			@include mq{
				padding: 120px 0 60px;
			}
			h1{
				width: 530px;
				margin: 0 auto 50px;
				line-height: 1;
				@include mq{
					width: 84%;
					max-width: 300px;
					margin: 0 auto 30px;
				}
			}
			p{
				line-height: 2.2;
				font-size: 1.8rem;
				@include mq{
					font-size: 1.5rem;
				}
			}
		}	
	}
}

#gallery{
	background: url("../img/top/bg_gallery.jpg") top center;
	background-size: cover;
	.tit{
		width: 563px;
		height: 234px;
		line-height: 250px;
		font-size: 4rem;
		text-align: center;
		background: url("../img/top/bg_txtgallery.svg") no-repeat;
		background-size: cover;
		margin: 0 auto;
		letter-spacing: .3rem;
		@include mq{
			width: 281px;
			height: 117px;
			font-size: 2rem;
			line-height: 130px;
		}
	}
	.gallery_flex{
		display: flex;
		width: 73%;
		max-width: 1200px;
		justify-content: space-between;
		margin: 0 auto;
		padding-bottom: 70px;
		position: relative;
		@include mq{
			padding-bottom: 40px;
			width: 80%;
		}
		&::after{
			position: absolute;
			background: url("../img/top/img_pochita.png") no-repeat;
			content: "";
			width: 206px;
			height: 206px;
			bottom: 54px;
			left: 50%;
			transform: translateX(-50%);
			background-size: cover;
			@include mq{
				width: 103px;
				height: 103px;
				bottom: 24px;
			}
		}
		figure{
			width: calc(50% - 50px);
			@include mq{
				width: calc(50% - 10px);
			}
			&:nth-child(1){
				position: relative;
				&::after{
					position: absolute;
					background: url("../img/top/txt_gallery.png");
					content: "";
					width: 257px;
					height: 130px;
					top: 50px;
					left: -128px;
					background-size: cover;
					@include mq{
						width: 128px;
						height: 65px;
						left: 50%;
						transform: translateX(-50%);
						top: 25px;
					}
				}
			}
		}
	}
}

#products{
	.item_detail{
		padding: 70px 10% 120px;
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin: 0 auto;
		@include mq{
			display: block;
			padding: 40px 0 60px;
			width: 100%;
		}
		.item_img{
			width: 45%;
			@include mq{
				width: 72%;
				margin: 0 auto 30px;
			}
			figure{
				border: 4px solid #000;
				@include mq{
					border: 3px solid #000;
				}
			}
			.item_link{
				width: 265px;
				height: 70px;
				background: #000;
				position: relative;
				z-index: 2;
				margin: -35px 0 0 auto;
				line-height: 75px;
				font-size: 3.2rem;
				text-align: center;
				color: #fff;
				@include mq{
					width: 50%;
					height: 40px;
					margin: -20px 0 0 auto;
					font-size: 2rem;
					line-height: 40px;
				}
				a{
					display: block;
				}
			}
		}
		.item_txt{
			width: 48%;
			@include mq{
				width: 84%;
				margin: 0 auto;
			}
			.tit{
				margin-bottom: 20px;
				.num{
					font-size: 2.4rem;
					line-height: 1;
					margin-bottom: 5px;
					@include mq{
						font-size: 1.4rem;
					}
				}
				h2{
					font-size: 6rem;
					line-height: 1;
					margin-bottom: 15px;
					@include mq{
						font-size: 3rem;
					}
				}
				.name{
					line-height: 1;
					font-size: 2rem;
					font-weight: 600;
					transform: scale(.6,1);
					transform-origin: top left;
					letter-spacing: .1rem;
					font-family: $goth;
					@include mq{
						font-size: 1.3rem;
					}
				}
			}
			.spec{
				position: relative;
				padding: 20px 0 16px;
				font-size: 1.9rem;
				@include mq{
					font-size: 1.3rem;
					padding: 13px 0 10px;
				}
				&::before{
					position: absolute;
					content: url("../img/top/ico_lines.svg");
					width: 100%;
					top: -20px;
					left: 0;
					@include mq{
						top: -13px;
					}
				}
				&::after{
					position: absolute;
					content: url("../img/top/ico_lines.svg");
					width: 100%;
					bottom: -10px;
					left: 0;
					@include mq{
						border: -8px;
					}
				}
			}
			.txt{
				margin-top: 30px;
				font-size: 1.4rem;
				line-height: 2.2;
				@include mq{
					font-size: 1.2rem;
					margin-top: 20px;
				}
			}
		}
	}
	#item01{
		background: #ede400;
		padding: 100px 0 0;
		@include mq{
			padding: 30px 0 0;
		}
		.item_main{
			width: 80%;
			margin: 0 auto;
			@include mq{
				width: 100%;
			}
		}
	}
	#item02{
		.item_detail{
			flex-direction: row-reverse;
		}
	}
	#item03{
		.item_detail{
			color: #fff;
			background: url("../img/top/item_03_bg.jpg") top center;
			background-size: cover;
			.spec{
				position: relative;
				&::before{
					position: absolute;
					content: url("../img/top/ico_lines_w.svg");
					width: 100%;
					top: -20px;
					left: 0;
					@include mq{
						top: -13px;
					}
				}
				&::after{
					position: absolute;
					content: url("../img/top/ico_lines_w.svg");
					width: 100%;
					bottom: -10px;
					left: 0;
					@include mq{
						border: -8px;
					}
				}
			}
		}
	}
	#item04{
		.item_detail{
			flex-direction: row-reverse;
		}
	}
	#item06{
		.item_detail{
			color: #fff;
			background: url("../img/top/item_06_bg.jpg") top center;
			background-size: cover;
			flex-direction: row-reverse;
			.spec{
				position: relative;
				&::before{
					position: absolute;
					content: url("../img/top/ico_lines_w.svg");
					width: 100%;
					top: -20px;
					left: 0;
					@include mq{
						top: -13px;
					}
				}
				&::after{
					position: absolute;
					content: url("../img/top/ico_lines_w.svg");
					width: 100%;
					bottom: -10px;
					left: 0;
					@include mq{
						border: -8px;
					}
				}
			}
		}
	}
	#item07{
		.item_detail{
			color: #fff;
			background: #38accd;
			.spec{
				position: relative;
				&::before{
					position: absolute;
					content: url("../img/top/ico_lines_w.svg");
					width: 100%;
					top: -20px;
					left: 0;
					@include mq{
						top: -13px;
					}
				}
				&::after{
					position: absolute;
					content: url("../img/top/ico_lines_w.svg");
					width: 100%;
					bottom: -10px;
					left: 0;
					@include mq{
						border: -8px;
					}
				}
			}
		}
	}
	#item08{
		.item_detail{
			flex-direction: row-reverse;
		}
	}
	#item10{
		.item_detail{
			color: #fff;
			background: url("../img/top/item_10_bg.jpg") top center;
			background-size: cover;
			flex-direction: row-reverse;
			.spec{
				position: relative;
				&::before{
					position: absolute;
					content: url("../img/top/ico_lines_w.svg");
					width: 100%;
					top: -20px;
					left: 0;
					@include mq{
						top: -13px;
					}
				}
				&::after{
					position: absolute;
					content: url("../img/top/ico_lines_w.svg");
					width: 100%;
					bottom: -10px;
					left: 0;
					@include mq{
						border: -8px;
					}
				}
			}
		}
	}
	#item12{
		.item_detail{
			background: url("../img/top/item_12_bg1.png") top left no-repeat,url("../img/top/item_12_bg2.png") top right no-repeat,#c6cbe1;
			background-size: contain;
			flex-direction: row-reverse;
			@include mq{
				background:#c6cbe1;
			}
		}
	}
	#item13{
		.item_detail{
			background: url("../img/top/item_13_bg.jpg") top center;
			background-size: cover;
			@include mq{
				background: url("../img/top/item_13_bg.jpg") top right;
				background-size: cover;
			}
		}
	}
	#item14{
		.item_detail{
			color: #fff;
			background: url("../img/top/item_14_bg.jpg") top center;
			background-size: cover;
			flex-direction: row-reverse;
			.spec{
				position: relative;
				&::before{
					position: absolute;
					content: url("../img/top/ico_lines_w.svg");
					width: 100%;
					top: -20px;
					left: 0;
					@include mq{
						top: -13px;
					}
				}
				&::after{
					position: absolute;
					content: url("../img/top/ico_lines_w.svg");
					width: 100%;
					bottom: -10px;
					left: 0;
					@include mq{
						border: -8px;
					}
				}
			}
		}
	}
}

#style{
	background: #d61d26;
	h2{
		width: 563px;
		height: 234px;
		line-height: 250px;
		font-size: 4rem;
		text-align: center;
		background: url("../img/top/bg_txtstyle.svg") no-repeat;
		background-size: cover;
		margin: 0 auto;
		letter-spacing: .3rem;
		@include mq{
			width: 281px;
			height: 117px;
			font-size: 2rem;
			line-height: 130px;
		}
	}
}

#seeun{
	padding: 100px 0 115px;
	background: url("../img/top/bg_under.jpg") top center;
	background-size: cover;
	@include mq{
		padding: 60px 0;
	}
}

#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;
		}
	}
}