@charset 'utf-8';

/*---------------------------------------------------------------------- */
/* Products Styles
------------------------------------------------------------------------ */

/* Utillities
---------------------------------------------------------- */

/* Magnific Popup --------------------------------- */

.mfp-bg {
	background: #fff;
}

.mfp-content {
	padding: 0;
}

/* Overlay --------------------------------- */

.overlay {
	margin: 0 auto;
	width: 580px;
}

.overlay .title {
	margin-bottom: 25px;
	height: 34px;
	line-height: 34px;
	background: #fcf068;
	font-size: 1.6rem;
	text-align: center;
	letter-spacing: .1em;
}

.overlay .slides {
	margin-bottom: 35px;
	overflow: hidden;
	border-radius: 20px;
}

.overlay .thumbs {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.overlay .thumbs li {
	display: block;
	width: 100px;
	overflow: hidden;
	border-radius: 6px;
	box-sizing: border-box;
	opacity: .7;
}

.overlay .thumbs li.active {
	opacity: 1;
}

.overlay .txt {
	font-size: 1.2rem;
	text-align: center;
	letter-spacing: .05em;
}

/* Slick --------------------------------- */

.slick-prev,
.slick-next {
	display: block;
	position: absolute;
	top: 50%;
	z-index: 100;
	width: 10px;
	height: 21px;
	line-height: 0;
	color: transparent;
	cursor: pointer;
	transform: translate(0, -50%);
	transition: opacity 200ms linear; 
}

.slick-prev {
	left: 2.5%;
	background: url(../img/btn-prev.svg) no-repeat left top;
}

.slick-next {
	right: 2.5%;
	background: url(../img/btn-next.svg) no-repeat left top;
}

/* Article --------------------------------- */

.article-header > .title {
	width: 289px;
}

.article-content {
	padding-top: 80px;
}


/* Layout
---------------------------------------------------------- */

.section--header > .title {
	font-size: 2.2rem;
}

.section-header > .img {
	margin-bottom: 40px;
}

.section-header > .txt {
	margin-bottom: 60px;
	font-size: 1.4rem;
	letter-spacing: .1em;
}

.section-content ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

#section-paper .section-header > .title {
	width: 462px;
	background-image: url(../img/line01.png);
}

#section-paper .section-content {
	margin-bottom: 85px;
}

#section-paper .section-content > ul > li {
	margin-bottom: 40px;
	width: 336px;
}

#section-paper .section-content > ul > li > .img {
	margin-bottom: 10px;
}

#section-paper .section-content > ul > li > .txt {
	font-size: 1.5rem;
	text-align: center;
	letter-spacing: .05em;
}

#section-coffee .section-header > .title {
	width: 542px;
	background-image: url(../img/line02.png);
}

#section-coffee .section-content .img {
	text-align: center;
}

#section-coffee .section-content .img a {
	font-size: 1.4rem;
}

#section-coffee .section-content > .img {
	margin-bottom: 40px;
}

#section-coffee .section-content > .txt {
	margin-bottom: 60px;
	font-size: 1.4rem;
	letter-spacing: .1em;
}

#section-coffee .section-content > .txt.align-center {
	text-align: center;
}

/*---------------------------------------------------------------------- */
/* 767px SmartPhone Styles
------------------------------------------------------------------------ */

@media screen and (max-width: 767px) {

/* Utillities
---------------------------------------------------------- */

/* Overlay --------------------------------- */

.overlay {
	width: 280px;
}

.overlay .title {
	margin-bottom: 15px;
	height: 23px;
	line-height: 23px;
	font-size: 1.2rem;
}

.overlay .slides {
	margin-bottom: 15px;
	border-radius: 10px;
}

.overlay .thumbs {
	margin-bottom: 15px;
}

.overlay .thumbs li {
	width: 48px;
	border-radius: 3px;
}

.overlay .txt {
	font-size: 1rem;
}

/* Article --------------------------------- */

.article-header > .title {
	width: 165px;
}

.article-content {
	padding-top: 40px;
}


/* Layout
---------------------------------------------------------- */

.section-header > .title {
	margin-bottom: 25px;
	font-size: 1.4rem;
}

.section-header > .img {
	margin-bottom: 20px;
}

.section-header > .txt {
	line-height: 1.9;
	margin-bottom: 25px;
	font-size: 1.2rem;
}

#section-paper .section-header > .title {
	width: 100%;
	background-image: url(../img/line01-sp.png);
}

#section-paper .section-content {
	margin-bottom: 25px;
}

#section-paper .section-content > ul > li {
	margin-bottom: 22px;
	width: calc(50% - 10px);
}

#section-paper .section-content > ul > li > .img {
	margin-bottom: 5px;
}

#section-paper .section-content > ul > li > .txt {
	font-size: 1rem;
	letter-spacing: .1em;
}

#section-coffee .section-header > .title {
	width: 100%;
	background-image: url(../img/line02-sp.png);
}

#section-coffee .section-content .img a {
	font-size: 1.2rem;
}

#section-coffee .section-content > .txt {
	margin-bottom: 40px;
	font-size: 1.2rem;
}

#section-coffee .section-content > .img {
	margin-bottom: 20px;
}

}