/****************************************************************** */
/*  Style - NK2 FARM Fukkurinko LandingPage -
    Build : Millecom inc. 2021.01.14 // https://www.millecom.co.jp
*/
/****************************************************************** */

/* Bootstrap BoxSizing Crear
------------------------------------------------------------------- */
.selector-for-some-widget { box-sizing: content-box; }
html, body { margin: 0; padding: 0; }
a:focus, *:focus { outline:none; }
body { background: url("../img/background.png") }
body { line-height: 1.5; }
@media only screen and (min-width: 768px) {
	body { line-height: 1.7; }
}

/* Header Mainvisual Style
------------------------------------------------------------------- */
.header {
	position: relative;
	width: 100%;
	height: 100vh;
}
.header-logo {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 1;
}
.header-logo img {
	width: 50%;
	height: auto;
}
.mainvisual-area {
	width: 100%;
	height: 100%;
	background: url("../img/mainvisual.jpg") no-repeat 50% top;
}
.mainvisual-img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}
.mainvisual-img img {
	width: 100%;
	height: auto;
}
@media only screen and (min-width: 768px) {
	.header {
		position: relative;
		width: 100%;
		height: 100vh;
	}
	.header-logo {
		position: absolute;
		top: 2rem;
		left: 2rem;
		z-index: 1;
	}
	.header-logo img {
		width: 100%;
		height: auto;
	}
	.mainvisual-area {
		width: 100%;
		height: 100%;
		position: relative;
		background: url("../img/mainvisual.jpg") no-repeat 0 0;
	}
	.mainvisual-img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
	}
	.mainvisual-img img {
		width: 100%;
		height: auto;
	}
}


/* Footer Footer-Area Style
------------------------------------------------------------------- */
.footer-area {
}
@media only screen and (min-width: 768px) {
	.footer-area {

	}
}


/* Main-Area Style
------------------------------------------------------------------- */
.main-area {
	padding: 1.5rem 0;
}
.content-box {
	padding: 3.5rem 0rem 2rem;
}
.content-tit {
	padding: 1rem 0 1rem;
	margin: 0 0 2rem;
	font-size: 1.2rem;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	text-align: center;
	line-height: 1.5;
	background: url("../img/content-tit-bg.png") no-repeat center 0;
	background-size: contain;
}
@media only screen and (min-width: 768px) {
	.main-area {
		padding: 3rem 0;
	}
	.content-box {
		padding: 4rem 0 6rem;
	}
	.content-tit {
		margin: 0 0 4rem;
		font-size: 2rem;
	}
}

/* About-Area Style
------------------------------------------------------------------- */
.about-map {
	height: 285px;
}
.about-map img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 100%;
	height: auto;
}
.about-com p {
	text-align: justify;
	text-justify: inter-ideograph;
}
@media only screen and (min-width: 768px) {
	.about-map {
		height: auto;
	}
}

/* Daily-Area Style
------------------------------------------------------------------- */
.daily {
	background-color: #fff;
}
.daily-images {
	margin: 0 0 1.5rem;
}
.daily-img img {
	width: 100%;
	height: auto;
}
.daily-com p {
	text-align: justify;
	text-justify: inter-ideograph;
}
@media only screen and (min-width: 768px) {
	.daily-images {
		margin: 0 0 4rem;
	}

}


/* Keep-Area Style
------------------------------------------------------------------- */
.keep-images {
	margin: 0 0 1.5rem;
	height: 300px;
}
.keep-images img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	width: 85%;
	height: auto;
}
.keep-com-images img {
	width: 100%;
	height: auto;
}
.keep-com p {
	text-align: justify;
	text-justify: inter-ideograph;
}
@media only screen and (min-width: 768px) {
	.keep-images {
		margin: 0;
		height: auto;
	}
	.keep-images img {
		width: 100%;
	}
}


/* Hazakake-Area Style
------------------------------------------------------------------- */
.hazakake {
	background-color: #fff;
}
.hazakake-images {
	width: 100%;
	margin: 0 0 1.5rem;
}
.hazakake-img img {
	width: 100%;
}
.hazakake-com p {
	text-align: justify;
	text-justify: inter-ideograph;
}
@media only screen and (min-width: 768px) {
	.hazakake-images {
		width: 50%;
		margin: 0 auto 2rem;
	}
	.hazakake-img img {
		width: 100%;
	}

}


/* Shopping-Area Style
------------------------------------------------------------------- */
.shopping-box {
	margin: 0 0 1.5rem;
	padding: .5rem;
	text-align: center;
}
.shopping-box-tit {
	padding: .5rem 0;
	font-size: 1.5rem;
	text-align: center;
}
.shopping-yahoo { background-color: #f00; color: #fff; }
.shopping-nk2farm { background-color: #8CC63F; color: #fff; }
.shopping-delivery { background-color: #FBB03B; color: #fff; }
@media only screen and (min-width: 768px) {
	.shopping-box {
		margin: 0;
	}
}


/* PageTop Style
------------------------------------------------------------------- */
.topBtn {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 50;
	padding-top: 50px;
	width: 50px;
	height: 0;
	overflow: hidden;
	display: block;
	cursor: pointer;
	background: url(../img/pagetop.png) 0 0 no-repeat;
	-moz-background-size: 100% auto;
	-o-background-size: 100% auto;
	-webkit-background-size: 100% auto;
	background-size: 100% auto;
}
@media only screen and (min-width: 768px) {
	.topBtn {
		bottom: 20px;
		right: 20px;
		padding-top: 60px;
		width: 60px;
	}
}


/* PC or SP DisplaySet
------------------------------------------------------------------- */
.only_sp {
  display: block;
}
@media only screen and (min-width: 768px) {
  .only_sp {
    display: none;
  }
}

.only_pc {
  display: none;
}
@media only screen and (min-width: 768px) {
  .only_pc {
    display: block;
  }
}

br.only_sp {
  display: inline;
}
@media only screen and (min-width: 768px) {
  br.only_sp {
    display: none;
  }
}

br.only_pc {
  display: none;
}
@media only screen and (min-width: 768px) {
  br.only_pc {
    display: inline;
  }
}

span.only_sp {
  display: inline;
}
@media only screen and (min-width: 768px) {
  span.only_sp {
    display: none;
  }
}

span.only_pc {
  display: none;
}
@media only screen and (min-width: 768px) {
  span.only_pc {
    display: inline;
  }
}