@charset "UTF-8";

/* ===================================================================

　default　リセット

=================================================================== */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }

/* remember to define visible focus styles! 
:focus {
	outline: ?????;
} */

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
strong{ font-weight:bold;}

/* ===================================================================

　フロート　クリア

=================================================================== */
.left { float: left; }
.right { float: right; }

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/*================================================

　全体

=================================================*/
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*::before,
*::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html { font-size: 62.5%; height: 100%; }
body {
	position: relative;
	height: 100%;
	color: #000;
	text-align: left;
	font-family: 'Noto Serif JP', serif;
    font-feature-settings: "palt" 1;
	letter-spacing: 0.1em;
	line-height: 2;
	background-color: #FBFAF8;
	-webkit-font-smoothing: antialiased;
}
a, a:link, a:visited { color: #000; text-decoration: none; }
a:hover { color: #E60012; }
img {max-width: 100%; height: auto; vertical-align: bottom; }


/*================================================

　レイアウト

=================================================*/

.hidden-xs { display: block!important; }
.visible-xs { display: none!important; }

#content {
	min-width: 960px;
	margin: 0 auto;
	padding: 0;
}
@media screen and (max-width: 1024px) {
	#content {
		min-width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	.visible-xs { display: block!important; }
	.hidden-xs { display: none!important; }
}
@media screen and (max-width: 599px) {
}


/*================================================

　スライドショー

=================================================*/
#topCatch {
	position: relative;
	margin: 0;
	padding: 0;
}
#topCatch .slideWrap {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 40% 0 0;
}
#topCatch .slideWrap p {
	position: absolute;
	left: 9.375%;
	bottom: 25%;
	margin: 0;
	color: #FFF;
	font-size: 4.4rem;
	font-weight: 500;
	line-height: 1.6;
	letter-spacing: 0.25em;
	z-index: 10;
}
#topCatch .topSlide li {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1024px) {
	#topCatch .slideWrap p {
		left: 9%;
		bottom: 18%;
		font-size: 3.2rem;
	}
}
@media screen and (max-width: 768px) {
	#topCatch .slideWrap {
		padding: 80% 0 0;
	}
	#topCatch .slideWrap p {
		bottom: 12%;
		font-size: 2.4rem;
	}
}

/*================================================================================================

　メイン画像　共通設定

================================================================================================*/
#topCatch.lower {
	position: relative;
	width: 100%;
	padding: 28.04% 0 0;
}
.topCatch_title {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.topCatch_title h1 {
	text-align: center;
	color: #FFF;
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.15em;
}
.topCatch_title h1 span {
	display: block;
	color: #BBA272;
	font-size: 1.6rem;
}

@media screen and (max-width: 1024px) {
	.topCatch_title h1 {
		font-size: 2.4rem;
	}
	.topCatch_title h1 span {
		font-size: 1.4rem;
	}
}

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

	#topCatch.lower {
		padding: 58.04% 0 0;
	}
	.topCatch_title h1 {
		font-size: 2rem;
	}
	.topCatch_title h1 span {
		font-size: 1.2rem;
	}
}


/*================================================

　コンセプト

=================================================*/
.concept {
	position: relative;
	max-width: 1280px;
	margin: 0 auto;
	padding: 70px 50px 60px;
	text-align: left;
}
.concept-container {
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	align-items: center;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
}
.concept-container-text {
	width: 43.644%;
	font-size: 1.8rem;
	line-height: 1.8;
}
.concept-container p:last-child {
	margin: 40px 0 00;
}
.concept-container figure {
	width: 42.372%;
}
@media screen and (max-width: 1024px) {
	.concept {
		padding: 70px 60px 60px;
	}
	.concept-container-text {
		width: 48.644%;
		font-size: 1.5rem;
	}
	.concept-container figure {
		width: 40.372%;	
	}
}

@media screen and (max-width: 768px) {
	.concept {
		padding: 50px 30px 60px;
		text-align: center;
	}
	.concept-container-text {
		width: 100%;
	}
	.concept-container figure {
		width: 90%;
		margin: 40px auto 0;
	}
}


/*================================================

　ボックスナビ

=================================================*/
.box-navi ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
  	flex-wrap: wrap;
	width: 100%;
}
.box-navi ul li {
	position: relative;
	overflow: hidden;
	width: calc(100% / 4);
	height: 440px;
	color: #FFF;
}
.top-page .box-navi ul li {
	width: calc(100% / 5);
}
.box-navi ul li a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
.box-navi ul li::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
	background: url("../images/common/box_navi01.jpg") center center / auto auto no-repeat; background-size: cover;
    transition: all 0.3s ease-out;
	z-index: -1;
}
.box-navi ul li.quality::after { background-image: url("../images/common/box_navi02.jpg"); }
.box-navi ul li.snack::after { background-image: url("../images/common/box_navi03.jpg"); }
.box-navi ul li.recipe::after { background-image: url("../images/common/box_navi04.jpg"); }
.box-navi ul li.dressing::after { background-image: url("../images/common/box_navi05.jpg"); }

.box-navi ul li:hover:after {
    opacity: 0.8;
    transform: scale(1.1);
}
.box-navi ul li p {
	position: relative;
	text-align: center;
	color: #FFF;
	font-size: 2.8rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.15em;
	z-index: 1;
}
.box-navi ul li p span {
	display: block;
	color: #BBA272;
	font-size: 1.6rem;
	letter-spacing: 0.15em;
}

@media screen and (max-width: 1080px) {
	
	.box-navi ul {
	}
	.box-navi ul li {
		height: 320px;
	}
	.box-navi ul li p {
		font-size: 2rem;
		line-height: 1.4;
	}
	.box-navi ul li p span {
		font-size: 1.3rem;
	}

}

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

	.box-navi ul li {
		width: 50%;
	}
	.top-page .box-navi ul li {
		width: 50%;
	}
	.box-navi ul li {
		height: 220px;
	}
	.box-navi ul li p {
		font-size: 1.3rem;
	}
	.box-navi ul li p span {
		font-size: 1rem;
	}
	.top-page .box-navi ul li:nth-of-type(1) { width: 34%; order: 1; }
	.top-page .box-navi ul li:nth-of-type(2) { width: 33%; order: 2; }
	.top-page .box-navi ul li:nth-of-type(3) { order: 4; }
	.top-page .box-navi ul li:nth-of-type(4) { order: 5; }
	.top-page .box-navi ul li:nth-of-type(5) { width: 33%; order: 3; }

}

/*================================================

　Online Shop リンクバナー

=================================================*/
.banner-block {
	padding: 120px 0;
	text-align: center;
	color: #FFF;
}
.banner-block-container {
	position: relative;
	max-width: 680px;
	margin: 0 auto;
	padding: 20px;
	font-size: 3.2rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.2em;
}
.banner-block-container:before {	
	position:absolute;
	top: 0;
	left: 0;
	content:"";
	width:100%;
	height:100%;
	background: linear-gradient(90deg, rgba(0,159,217,1) 42%, rgba(0,166,197,1) 49%, rgba(0,173,178,1) 100%);
	transition: all 0.5s;
	z-index:-1;
}
.banner-block-container::after {
	position:absolute;
	top: 0;
	left: 0;
	content:"";
	width:100%;
	height:100%;
	background: linear-gradient(270deg, rgba(0,159,217,1) 42%, rgba(0,166,197,1) 49%, rgba(0,173,178,1) 100%);
	transition: all 0.5s;
	z-index:-2;
}
.banner-block-container:hover::before { opacity: 0; }
.banner-block-container:hover::after { opacity: 0.5; }

.banner-block-container p {
	position: relative;
	margin: 0 auto;
	padding: 40px 100px 40px 40px ;
	background: url("../images/common/cart_icon.svg") right 150px center / 47px 44px no-repeat;
	border: 1px solid #FFF;
}
.banner-block-container p::before {
	position: absolute;
	content: "";
	top: 50%;
	left: -70px;
	width: 100px;
	height: 1px;
	background-color: #CCC;
}
.banner-block-container p::after {
	position: absolute;
	content: "";
	top: 14px;
	right: 14px;
	width: 19px;
	height: 16px;
    background: url("../images/common/window_icon.svg") center center / 19px 16px no-repeat;
}
.banner-block-container a {
	color: #FFF;
}
.banner-block-container a:hover {
	color: #FFF;
}

@media screen and (max-width: 1024px) {
	.banner-block {
		padding: 80px 0;
	}
	.banner-block-container {
		max-width: 540px;
		padding: 20px;
		font-size: 2.6rem;
	}
	.banner-block-container p {
		padding: 30px 80px 30px 30px ;
		background: url("../images/common/cart_icon.svg") right 120px center / 37px 35px no-repeat;
	}
	.banner-block-container p::before {
		left: -60px;
		width: 80px;
	}
	.banner-block-container p::after {
		top: 11px;
		right: 11px;
		width: 15px;
		height: 13px;
	    background: url("../images/common/window_icon.svg") center center / 15px 13px no-repeat;
	}
}

@media screen and (max-width: 768px) {
	.banner-block {
		padding: 60px 0;
	}
	.banner-block-container {
		max-width: 80%;
		padding: 14px;
		font-size: 2rem;
	}
	.banner-block-container p {
		padding: 24px 16% 24px 24px;
		background: url("../images/common/cart_icon.svg") right 17% center / 28px 26px no-repeat;
	}
	.banner-block-container p::before {
		left: -40px;
		width: 50px;
	}
	.banner-block-container p::after {
		top: 11px;
		right: 11px;
		width: 15px;
		height: 13px;
	    background: url("../images/common/window_icon.svg") center center / 15px 13px no-repeat;
	}
}

/*================================================

　取り扱い店舗　会社概要

=================================================*/
.company-info {
	margin: 0 auto;
	padding: 90px 0 120px;
	text-align: center;
	background: url("../images/top/top_img01.jpg") center bottom -40px / auto auto no-repeat; background-size: cover;
}
.top-page .company-info {
	padding: 80px 0 120px;
	background: url("../images/top/top_img01.jpg") center center / auto auto no-repeat; background-size: cover;
}
.company-info h1 {
	position: relative;
	margin: 0 auto 40px;
	color: #FFF;
	font-size: 2.4rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.2em;
}
.company-info h1::after {
	position: absolute;
	display: block;
	content: "";
	left: 0;
	bottom: -20px;
	right: 0;
	width: 60px;
	height: 2px;
	margin: 0 auto;
	background: linear-gradient(90deg, rgba(0,159,217,1) 42%, rgba(0,166,197,1) 49%, rgba(0,173,178,1) 100%);
}
.company-info h1 span {
	display: block;
	color: #999;
	font-size: 1.4rem;
	letter-spacing: 0.1em;
}
.handling-store,
.company-profile {
	max-width: 1180px;
	margin: 0 auto;
	padding: 60px 80px 40px;
	background-color: rgba(0,0,0,0.5);
	border: 1px solid rgba(77,77,77,0.5);
}
.handling-store-container dl,
.company-profile-container {
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
  	-ms-flex-wrap: wrap;
  	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	color: #FFF;
	text-align: left;
	line-height: 1;
}
.handling-store-container dl dd ul {
	display: flex;
  	flex-wrap: wrap;
	width: 915px;
}
.handling-store-container dl dd ul li {
	width: 300px;
	margin: 0;
	padding: 0 0 20px;
	text-align: left;
	font-size: 1.4rem;
}
.company-profile {
	margin: 120px auto;
}
.company-profile-container dl {
	width: 47%;
	padding: 30px 10px;
	text-align: left;
	font-size: 1.4rem;
	border-bottom: 1px solid #FFF;
}

.company-profile-container dl dt {
	float: left;
	width: 7em;
}
.company-profile-container dl dd {
	padding: 0 0 0 7em;
}

.company-profile-container dl:last-child,
.company-profile-container dl:nth-last-of-type(2) {
	border-bottom: none;
}
.company-profile-container dl:last-child dd {
	margin: -5px 0 0;
	line-height: 1.6;
}

@media screen and (max-width: 1024px) {
	.company-info {
		padding: 70px 0 80px;
	}
	.top-page .company-info {
		padding: 60px 40px 90px;
	}
	.company-info h1 {
		margin: 0 auto 40px;
		font-size: 2rem;
	}
	.company-info h1::after {
		bottom: -16px;
		width: 48px;
	}
	.company-info h1 span {
		font-size: 1.2rem;
	}
	.company-profile {
		max-width: 100%;
		margin: 50px auto 70px;
		padding: 50px 40px 30px;
	}
	.company-profile-container dl {
		width: 47%;
		padding: 22px 5px;
		text-align: left;
		font-size: 1.2rem;
	}
	.company-profile-container dl dt {
		width: 6.5em;
	}
}

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

	.top-page .company-info {
		padding: 60px 30px 90px;
	}
	.company-profile {
		margin: 0 auto 70px;
		padding: 40px 30px 30px;
	}
	.company-profile-container dl {
		width: 100%;
	}
	.company-profile-container dl dt {
		width: 5em;
	}
	.company-profile-container dl dd {
		padding: 0 0 0 5.5em;
	}
	.company-profile-container dl:nth-last-of-type(2) {
		border-bottom: 1px solid #FFF;
	}
}


/*================================================

　フッター

=================================================*/
footer {
	position: relative;
	height: 60px;
	margin: 0;
	padding: 18px 0 0;
	color: #FFF;
	text-align: center;
	font-size: 1.2rem;
	background-color: #333;
}
.twitter-link a,
.insta-link a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	right: 120px;
	width: 60px;
	height: 60px;
	background: linear-gradient(180deg, rgba(0,159,217,1) 42%, rgba(0,166,197,1) 49%, rgba(0,173,178,1) 100%);
	transition: all 0.5s ease;
	opacity: 1;
}
.insta-link a {
	right: 180px;
}
.twitter-link a:hover ,
.insta-link a:hover {
	opacity: 0.4;
}
.pagetop-arrow {
	position: absolute;
	top: 0;
	right: 60px;
	width: 60px;
	height: 60px;
}
.pagetop-arrow a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}
.pagetop-arrow a span {
	display: block;
	position: relative;
	width: 1px;
	height: 30px;
	background-color: #FFF;
}
.pagetop-arrow a span::after {
	position: absolute;
	display: block;
	content: "";
	top: 0;
	left: 4px;
	width: 1px;
	height: 12px;
	background-color: #FFF;
	transform: rotate(-35deg);
}
.copy {
	margin: 0;
	letter-spacing: 0.05em;
}

@media screen and (max-width: 1024px) {
	footer {
		height: 48px;
		padding: 11px 0 0;
		font-size: 1.2rem;
	}
	.twitter-link a,
	.insta-link a {
		right: 48px;
		width: 48px;
		height: 48px;
	}
	.insta-link a {
		right: 96px;
	}
	.pagetop-arrow {
		right: 0;
		width: 48px;
		height: 48px;
	}
	.copy {
		text-align: left;
		padding: 0 0 0 40px;
	}
}