.sns-icon {
    top: 35vh;
}
.top__image {
	height: 308px;
	background-image: url("..//images/about/about-top-img.jpg");
	background-position: center;
	background-size: auto 100%;
	background-repeat: no-repeat;
	position: relative;
	background-size: cover;
}

.image-filter {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	height: 100%;
	width: 100%;
	background-color: rgba(51, 38, 25, 0.6);
}

.top-ttlbox {
	text-align: center;
	line-height: normal;
	margin-bottom: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: #FFF;
}

.top-ttlbox p {
	margin-bottom: 10px;
	font-size: 2.0em;
	font-family: 'Cantarell', sans-serif;
	font-weight: 700;
}

.top-ttlbox h2 {
	font-size: 1.2em;
}

@media(min-width: 768px) {
	.top__image {
		height: 440px;
	}
}

.about-garland-img {
	width: 260px;
	margin: 0 0 0 auto;
}

.about-garland-img img {
	width: 100%;
}

.section-about h2 {
	text-align: center;
	font-size: 1.5rem;
	font-weight: 500;
	margin: 40px 0 70px;
}

.concept-2 {
	font-size: 1.3rem;
	padding: 0 10px;
}

.yakitate {
	color: #A21F46;
}

.petit-description-1 {
	padding: 0 24px;
	max-width: 551px;
	margin: 0 auto 100px;
}

.petit-description-2 {
	padding: 100px 24px 0;
	max-width: 551px;
	margin: 0 auto 40px;
}

.about-butter-pan-img {
	width: 100px;
	margin: 0px 60px 55px auto;

}

.about-butter-pan-img img {
	width: 100%;
}

.red-message {
	color: #A21F46;
	font-family: braisetto, script;
	text-align: center;
	font-size: 2.5rem;
	font-weight: 700;
	line-height: normal;
	margin-bottom: 80px;
}

.petit-description-3 {
	padding: 0 24px;
	max-width: 560px;
	margin: 0 auto 80px;
}

.about-coppepan-img {
	width: 114px;
	margin: 0 0 auto 45px;
	padding-bottom: 95px;
}

.about-coppepan-img img {
	width: 100%;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider {
	/*横幅94%で左右に余白を持たせて中央寄せ*/
	width: 100%;
	margin: 0 auto;
	pointer-events: none;
}

.slider img {
	width: 60vw;
	/*スライダー内の画像を60vwにしてレスポンシブ化*/
	height: auto;
}

.slider .slick-slide {
	transform: scale(0.8);
	/*左右の画像のサイズを80%に*/
	transition: all .5s;
	/*拡大や透過のアニメーションを0.5秒で行う*/
	opacity: 0.5;
	/*透過50%*/
}

.slider .slick-slide.slick-center {
	transform: scale(1);
	/*中央の画像のサイズだけ等倍に*/
	opacity: 1;
	/*透過なし*/
}



/*ドットナビゲーションの設定*/

.slick-dots {
	text-align: center;
	margin: 20px 0 0 0;
}

.slick-dots li {
	display: inline-block;
	margin: 0 5px;
}

.slick-dots button {
	color: transparent;
	outline: none;
	width: 9px;
	/*ドットボタンのサイズ*/
	height: 9px;
	/*ドットボタンのサイズ*/
	display: block;
	border-radius: 50%;
	border: solid 0.5px #332619;
	/*ドットボタンの色*/
}

.slick-dots .slick-active button {
	background: #A21F46;
	/*ドットボタンの現在地表示の色*/
}

.max-width{
	max-width: 800px;
    margin: 0 auto;
}
@media (min-width: 768px) {
	.slider img {
		width: 45vw;
		height: auto;
	}
}
@media (min-width: 1160px) {
	.top-ttlbox p {
		margin-bottom: 10px;
		font-size: 3.2rem;
	}

	.top-ttlbox h2 {
		font-size: 1.4em;
	}

	.about-garland-img {
		width: 497px;
		margin: 0 0 0 auto;
	}

	.section-about h2 {
		text-align: center;
		font-size: 2.0rem;
		font-weight: 500;
		margin: 0 0 120px;
	}

	.petit-description-1 {
		font-size: 1.5rem;
	}

	.petit-description-2 {
		font-size: 1.5rem;
	}

	.petit-description-3 {
		font-size: 1.5rem;
	}

	.red-message {
		color: #A21F46;
		font-family: braisetto, script;
		text-align: center;
		font-size: 4.8rem;
		font-weight: 700;
		line-height: normal;
		margin-bottom: 163px;
	}

	.about-butter-pan-img {
		width: 145px;
		margin: 0px 245px 55px auto;
	}

	.about-coppepan-img {
		width: 162px;
		margin: 0 0 auto 245px;
		padding-bottom: 95px;
	}

	.max-width {
		max-width: 1400px;
		margin: 0 auto;
	}
	.slick-list{
		margin: 0 60px;
	}
	
	.slider img {
		width: 40vw;
		height: auto;
	}
	.slick-dots button {
		color: transparent;
		outline: none;
		width: 12px;
		/*ドットボタンのサイズ*/
		height: 12px;
		/*ドットボタンのサイズ*/
		display: block;
		border-radius: 50%;
		border: solid 0.5px #332619;
		/*ドットボタンの色*/
	}
	.slick-dots {
		text-align: center;
		margin: 45px 0 0 0;
	}
}
@media (min-width: 1800px) {
	.slider img {
		width: 30vw;
		height: auto;
	}
}