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

	style.css

	初期化・リンク関係は、
	reset.cssに記述

==============================*/
@charset "utf-8";


/*
Theme Name: farmweb
Description:テーマの説明
Theme URI: テーマの URL
Author: 作った人の名前
Author URI: 作った人の URL
Version: バージョン
License: ライセンス
License URI: ライセンスの URL
*/

/*
	共通設定

	[備考]
	横幅 header, featured img:1260px
		 content, header:1030px
==============================*/
@media screen and (min-width: 641px) {
	/*pc用スタイル記述Start*/

	/*********************************
	*
	* COMMON STYLES
	*
	*********************************/
	html {
		overflow: auto;
	}

	body {
		margin: 0;
		padding: 0;
		background:#fff;
		color:#333;
		font-size:12px;
		font-family:'小塚明朝 Pro', 'Kozuka Mincho Pro','Noto Serif JP';
		line-height:1.5;
		/* font-family:Arial, Universe, "ヒラギノ角ゴ Pro W3", "メイリオ", Osaka, "ＭＳ Ｐゴシック", sans-serif; */
		position: relative;
		width: auto;
	}

		
	h2 {
		font-size: 24px; /* 指定 */
		line-height: 38px; /* 指定 */
		font-weight: bold;
	}

	h3 {
		font-size: 21px; /* 指定 */
		font-weight: bold;
	}

	p {
		font-size: 18px; /* 指定 */
		line-height: 38px; /* 指定 */
	}


	a {
		color:#000;
		text-decoration:none;
	}
	
	a:hover {
		color:#eb9864;
	}

	a:hover img {
		filter:alpha(opacity=70);
		-moz-opacity:0.7;
		opacity:0.7;
	}
	
	/* float style */
	.left {
		float:left;
	}
	.right {
		float:right;
	}
	.clear {
		clear:both;
	}
	.text-center {
		text-align:center !important;
	}
	.text-right {
		text-align:right !important;
	}
	.text-left {
		text-align:left !important;
	}
	
	/* text color & style */

	img{width: 100%;}
	
	/*********************************
	*
	* WRAPPER
	*
	*********************************/
	
	#wrapper {
		min-width: 1260px;
		min-height: 500px;
		width:100%;
		background-color:#fff;
		height: 100%;
	}
	

	/*********************************
	*
	* BREAD
	*
	*********************************/
	#bread {
		margin-top: 40px; /*指定*/
		font-size: 14px; /*指定*/
	}

	
	#bread.no_featured_img {
		/*ヘッダーのメニューバーから40px下 */
		margin-top: calc((10px + 12px + 10px) + 40px);
	}

	div#bread ul {
		width: 1030px;
		text-align: left;
		margin: 0 auto;
		color: #333;
	}

	div#bread ul li {
		float: left;
		margin-right: 0.25em;
	}

	div#bread ul li.black {
		color: #000;
	}

	/*********************************
	*
	* MAIN
	*
	*********************************/
	#main {
		overflow: hidden;
	}
	/*********************************
	*
	* CONTENTS
	*
	*********************************/

	div.contents {
		width: 1030px;
		margin-left: auto;
		margin-right: auto;
	}

	/*********************************
	*
	* FORM
	*
	*********************************/
	.notice{
		color: red;
		font-size: 11px !important;
		margin-bottom: 5px;
	}


	/*********************************
	*
	* アイキャッチ画像
	* FEATURED IMAGE
	*
	*********************************/ 
	div#featured_img {
		width: 1260px;
		margin: 0 auto;
		position: relative;
	}
	div#featured_img .background {
		width: 100%;
		margin: 0 auto;
	}
	#no_featured_img {
		margin-bottom: 75px;
	}

	/*********************************
	*
	* 背景色
	*
	*********************************/ 
	
	div.white_back_color {
		background-color: #fff;
		overflow: hidden;
	}

	div.background-color {
		background-color: #f4ece4;
		/*親要素を無視してブラウザ幅100%で表示*/
		width: 100vw;
		min-width: 1260px;
		left: 50%;
    	transform: translateX(-50%);
		position: relative;
	}
	
	div.content {
		width: 1030px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 80px;
		padding-bottom: 85px;
	}
	
	/*********************************
	*
	* タイトル(線上) 画像
	* TITLE LINE IMAGE
	*
	*********************************/ 
	div.center_title_line_img {
		position: relative;
		margin-bottom: 50px;
	}
	div.center_title_line_img .line_img{
		width: 100%;
	}
	div.center_title_line_img h2{
		position: absolute;
		top: 50%;
		left: 54.5%;
		transform: translate(-50%,-50%);
		text-align:center;
		font-weight: bold;
		white-space: nowrap;
	}
	img.icon_img {
		height: 50px;
		width: auto;
		vertical-align: middle;
		margin-left: 8px;
		margin-bottom: 15px;
	}

	/** デフォルト */
	div.main-title {
		margin-top: calc(120px - (40px + 14px)); /* 指定 */
		margin-bottom: 120px; /* 指定 */
	}

	/** キャッチ画像なし デフォルト */
	div.main-title.no_featured_img {
		margin-top: 120px; /* 指定 */
		margin-bottom: 70px; /* 指定 */
	}

	div.main-title img{
		margin-top: 10px;
	}
	
	/*********************************
	*
	* タイトル(点線)
	* DOTTED LINE 
	*
	*********************************/ 
	div.line_dotted {
		height: 3px;
		background-image: radial-gradient(circle closest-side, #333 0.5px, transparent 100%); 
		background-size: 12px 3px;
		background-repeat: repeat-x;
		margin-top: 15px;
	}
	
	div.left_title_line {
		width: 100%;
		margin-bottom: 20px;
	}
	
	div.left_title_line > * {
		display: inline-block;
		vertical-align: middle;
	}
	
	/*********************************
	*
	* HEADER
	*
	*********************************/
	#header {
		background-color: #fff;
		/*
		width: calc(1260px - 75px);
		*/
		width: 1260px;
		margin: 0 auto;
		padding-top: 25px;
		padding-left: 75px;
	}
	
	#header div.ncxx_farm_logo {
		width: 150px;
	}
	
	#header img.logo{
		width: 100%;
	}

	div.pc_logo_snsicon {
		margin-top: 17.5px;
		display: block;
	}

	#header img.pc_logo_snsicon {
		width: 20px;
		margin-right: 4px;
	}

	/*
		グローバルナビ
	==============================*/
	#gnavi {
		margin-top: -25px;
		margin-left: 110px;
		min-width: 940px;
		position: relative;
	}

	/* メインメニュー */
	#gnavi > ul.megamenu > li  {
		display: inline-block;
	}

	#gnavi > ul.megamenu > li > a {
		display: block;
		font-size: 14px;
		text-align: center;
		padding: 7.5px 10px 15px;
		color:#333;
	}

	#gnavi > ul.megamenu > li > a:hover {
		background:#eae1d8;
	}

	#gnavi > ul.megamenu > li:hover > ul.ddMenu {
		display: inline-block;
	}

	/* サブメニュー */
	.ddMenu {
		display: none;
		position: absolute;
		width: 1095px;
		left: 0;
		z-index: 10;
		background:#eae1d8;
	}

	.ddMenu > li{
		display:table-cell;
		vertical-align:middle;
		text-align:center;
	}

	ul.ddMenu > li > a {
		display: block;
		font-size: 14px;
		text-align: center;
		padding: 10px 20px;
		color:#333;
	}

	ul.ddMenu > li:hover > a {
		background:#fff;
	}

	/*********************************
	*
	* FOOTER
	*
	*********************************/
	div#footer {
		width:100%;
		background: #fff;
		margin-top: 120px; /* 指定 */
		height: 150px;
	}

	div#footer div.f_link {
		overflow: hidden;
		position: relative;
	}

	div.footer_line {
		width: 1030px;
		margin: 0 auto;
	}

	div.footer_line img{
		width: 100%;
	}

	div#footer ul.f_link {
		margin: 20px auto;
		text-align: center;
	}

	div#footer ul.f_link li {
		display: inline-block;
		margin: 0px 14px;
		color: #fff;
		font-size: 14px;
	}

	.copyright p {
		margin: 20px 0px;
		font-size: 14px;
		text-align: center;
	}


	/*********************************
	*
	* ボタン
	*
	*********************************/
	div.more_btn {
		margin-top: 30px;
	}
	
	button {
		display: block;
		margin: 0 auto;
		padding: 15px 100px;
		font-family: '小塚明朝 Pro', 'Kozuka Mincho Pro', 'Noto Serif JP';
		font-size: 18px;
		color: #333;
		background-color: transparent;
		border: 1px solid #333;
	}

	div.online_shop_border-box {
		margin-top: 120px; /* 指定 */
		position: relative;
		border: 1px solid #333;
		padding: 30px 75px;
	}
	div.online_shop_btn  {
		position: relative;
	}
	div.online_shop_btn button {
		position: absolute;
		top: -43px;
		left: 700px;
		padding: 12.5px 20px;
		color: #fff;
		background-color: orange;
		border-style: none;
		border-radius: 3px;
		font-weight: bold;
		width: 210px;
	}

	/*********************************
	*
	* すべて見る
	*
	*********************************/

	div.see_all input {
		display: none;
	}
	label.see_all {
		display: none;
	}
	/*********************************
	*
	* PC版 設定
	*
	*********************************/

	.sp_display {
		display: none;
	}

	.pc_padding_bottom_none {
		padding-bottom: 0px !important;
	}

	.content_width {
		width: 1030px;
		margin-left: auto;
		margin-right: auto;
	}

/*pc用スタイル記述End*/
}

@media screen and (max-width: 640px) {
	/*sp用スタイル記述Start*/

	/*********************************
	*
	* COMMON STYLES
	*
	*********************************/

	html {
		overflow: auto;
	}

	body {
		margin: 0;
		padding: 0;
		background:#a0a0a0;
		color:#333;
		font-size:12px;
		font-family: '小塚明朝 Pro', 'Kozuka Mincho Pro', 'Noto Serif JP';
		line-height:1.5;
		/* font-family:Arial, Universe, "ヒラギノ角ゴ Pro W3", "メイリオ", Osaka, "ＭＳ Ｐゴシック", sans-serif; */
		position: relative;
		width: auto;
	}

	h2 {
		/* font-size: 54px; /* 指定 */
		/* line-height: 66px; /* 指定 */
		font-size: 20.7px; /* 指定 (54px * (414px / 1080px)) */
		line-height: 25.3px; /* 指定 (66px * (414px / 1080px)) */
		font-weight: bold;
	}

	h3 {
		/* font-size: 48px; /* 指定 */
		/* line-height: 58px; /* 指定 */
		font-size: 18.4px; /* (40px * (414px / 1080px)) 指定 */
		line-height: 22.23px; /* (58px * (414px / 1080px)); 指定 */
		font-weight: bold;
	}

	p {
		/* font-size: 44px; /* 指定 */
		/* line-height: 74px; /* 指定 */
		font-size: 16.67px; /* (44px * (414 / 1080)) 指定 */
		line-height: 28.37px; /* (74px * (414 / 1080)) 指定 */
		text-align: justify;
	}

	a {
		color:#000;
		 text-decoration:none;
	}
	
	a:hover {
		color:#eb9864;
	}

	a:hover img {
		filter:alpha(opacity=70);
		-moz-opacity:0.7;
		opacity:0.7;
	}
	
	
	/* float style */
	.left {
		float:left;
	}
	.right {
		float:right;
	}
	.clear {
		clear:both;
	}

	.text-center {
		text-align:center !important;
	}
	.text-right {
		text-align:right !important;
	}
	.text-left {
		text-align:left !important;
	}
	
	
	/* text color & style */

	img{width: 100%;}
	
	/*********************************
	*
	* WRAPPER
	*
	*********************************/
	
	#wrapper {
		width:100%;
		background-color:#fff;
		height: 100%;
	}
	

	/*********************************
	*
	* MAIN
	*
	*********************************/
	#main {
		overflow: hidden;
	}
	
	/*********************************
	*
	* CONTENTS
	*
	*********************************/
	div.contents {
		width: auto;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	/*********************************
	*
	* FORM
	*
	*********************************/
	.notice{
		color: red;
		font-size: 11px !important;
		margin-bottom: 5px;
	}

	
	/*********************************
	*
	* アイキャッチ画像
	* FEATURED IMAGE
	*
	*********************************/ 
	div#featured_img {
		width: 100%;
		margin: 0 auto;
		position: relative;
	}
	div#featured_img .background {
		width: 100%;
		margin: 0 auto;
	}
	#no_featured_img {
		margin-bottom: 75px;
	}
	
	/*********************************
	*
	* 背景色
	*
	*********************************/ 
	
	div.white_back_color {
		background-color: #fff;

	}
	
	div.background-color {
		background-color: #f4ece4;
		/*親要素を無視してブラウザ幅100%で表示*/
		width: 100vw;
		left: 50%;
    	transform: translateX(-50%);
		position: relative;
	}

	div.back_color {
		background-image: url("img/sp_home/sp_home_information_background.png");
		background-size: 100%;
	}
	
	div.content {
		margin-left: auto;
		margin-right: auto;
		padding: 70px 15px 85px;
	}

	/*********************************
	*
	* タイトル(線上) 画像
	* TITLE LINE IMAGE
	*
	*********************************/ 
	div.center_title_line_img {
		position: relative;
		margin-bottom: 50px;
	}
	div.center_title_line_img .line_img{
		width: 100%;
	}
	div.center_title_line_img h2{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		font-weight: bold;
		white-space: nowrap;
	}
	img.icon_img {
		height: 55px;
		width: auto;
		vertical-align: middle;
		margin-left: 8px;
		margin-bottom: 10px;
	}
	
	div.main-title {
		margin-top: 50px; 
		/* margin-bottom: 120px; */
	}

	/** キャッチ画像なし デフォルト */
	div.main-title.no_featured_img {
		margin-top: 70px;
		margin-bottom: 50px;
	}

	div.main-title img{
		margin-top: 5px;
	}

	/*********************************
	*
	* タイトル(点線)
	* DOTTED LINE 
	*
	*********************************/ 

	div.line_dotted {
		height: 3px;
		background-size: 12px 3px;
		background-image: radial-gradient(circle closest-side, #333 0.5px, transparent 100%);
		background-repeat: repeat-x;
		margin-top: 15px;
	}
	
	/*********************************
	*
	* HEADER
	*
	*********************************/
	#header {
		background-color: #fff;
		margin: 0 auto;
		padding: 15px 25px;
		position: relative;
	}
	
	#header div.ncxx_farm_logo {
		width: 130px;
	}
	
	div.sp_logo_snsicon {
		position: absolute;
		top: 20px;
		right: 50px;
	}

	#header img.sp_logo_snsicon {
		width: 30px;
		margin-right: 3px;
	}



	/*
		グローバルナビ (SP版)
	==============================*/

	nav#header_nav {
		display: block;
		position: fixed;
		top: 0;
		right: -250px;
		bottom: 0;
		width: 250px;
		height: 380px;
		padding-top: 40px;
		background: #f4ece4;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: all .5s;
		z-index: 3;
		opacity: 0;
		box-shadow: -5px 5px 5px #999;
	}
	
	.open nav#header_nav {
		right: 0;
		opacity: 1;
	}

	nav#header_nav .inner ul {
		list-style: none;
		margin: 0;
		padding: 0;

	}

	nav#header_nav .inner ul li {
		position: relative;
	}

	#header_nav li.menu-item {
		display: block;
		margin: 15px 0px;
	}

	#header_nav li.sub-menu-item {
		display: block;
		margin: 5px 0px;
	}

	nav#header_nav .inner ul li a {
		display: block;
		color: #333;
		font-size: 16px;
		padding-left: 1em;
		text-decoration: none;
		transition-duration: 0.2s;
	}

	nav#header_nav .inner ul li a:hover {
		background-color: #fff;
		border-top: 1px solid #000;
		border-bottom: 1px solid #000;
	}

	/* サブメニュー */
	#header_nav .ddMenu {
		display: none;
		border-top: 1px solid #000;
		border-bottom: 1px solid #000;
	}


	nav#header_nav ul li.menu-item:hover > ul.ddMenu {
		display: block;
	}

	#header_nav ul.ddMenu > li > a {
		display: block;
	}

	/*********************************
	*
	* ハンバーガーメニューボタン
	*
	*********************************/
	.toggle_btn {
		display: block;
		position: fixed;
		top: 19px;
		right: 15px;
		width: 32px;
		height: 30px;
		transition: all .5s;
		cursor: pointer;
		z-index: 999;
	}

	.toggle_btn span {
		display: block;
		position: absolute;
		left: 0;
		width: 30px;
		height: 2px;
		background-color: #333;
		border-radius: 4px;
		transition: all .5s;
	}

	/** メニュー 押したときだけ表示 */
	.toggle_btn span {
		display: none;
	}

	.toggle_btn span:nth-child(1) {
		top: 4px;
	}

	.toggle_btn span:nth-child(2) {
		top: 14px;
	}

	.toggle_btn span:nth-child(3) {
		bottom: 4px;
	}

	.toggle_btn img {
		z-index: 1;
	}

	.open .toggle_btn img {
		display: none;
	}

	.open .toggle_btn span {
		display: block;
		background-color: #333;
	}

	.open .toggle_btn span:nth-child(1) {
		-webkit-transform: translateY(10px) rotate(-315deg);
		transform: translateY(10px) rotate(-315deg);
	}

	.open .toggle_btn span:nth-child(2) {
		opacity: 0;
	}
	.open .toggle_btn span:nth-child(3) {
		-webkit-transform: translateY(-10px) rotate(315deg);
		transform: translateY(-10px) rotate(315deg);
	}

	#mask {
		display: none;
		transition: all .5s;
	}

	.open #mask {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: .8;
		z-index: 2;
		cursor: pointer;
	}

	/*********************************
	*
	* FOOTER
	*
	*********************************/
	div#footer {
		background: #fff;
	}

	div#footer div.f_link {
		/* overflow: hidden; */
		position: relative;
		padding: 60px 15px 20px;
	}

	div#footer ul.f_link {
		font-size: 16.87px; /* (44px * (414 / 1080)) 指定 */
		line-height: 24.53px; /* (64px * (414px / 1080px)); 指定 */
		font-weight: bold;
	}

	.copyright {
		background-color: #793327;
	}

	.copyright p {
		color: #fff;
		font-size: 11.5px; /* (30px * (414 / 1080)) 指定 */
		text-align: center;
		padding: 10px 0px;
	}

	/*********************************
	*
	* ボタン
	*
	*********************************/
	
	input[type="submit"] {
		-webkit-appearance: none;
	}

	button {
		display: block;
		margin: 0 auto;
		padding: 15px 100px;
		font-family: '小塚明朝 Pro', 'Kozuka Mincho Pro', 'Noto Serif JP';
		font-size: 16px;
		color: #333;
		background-color: transparent;
		border: 1px solid #333;
	}

	div.more_btn button {
		font-size: 13.42px; /* (35px * (414 / 1080)) 指定 */
	}

	div.online_shop_border-box {
		position: relative;
		border: 1px solid #333;
		padding: 20px 5px;
		text-align: center;
		margin-top: 120px;
	}

	div.online_shop_border-box h3 {
		font-size: 16.87px; /* (44px * (414 / 1080)) 指定 */
		letter-spacing: -0.1em;
	}

	div.online_shop_btn button {
		margin-top: 10px;
	}

	div.online_shop_btn button {
		padding: 10px;
		color: #fff;
		background-color: orange;
		border-style: none;
		border-radius: 3px;
		font-size: 16.87px; /* (44px * (414 / 1080)) 指定 */
		font-weight: bold;
	}

	/*********************************
	*
	* すべて見る
	*
	*********************************/
	div.see_all {
		position: relative;
	}
	div.hidden_content {
		position: relative;
		overflow: hidden;
	}
	div.hidden_content::before {/*グラデーション部分*/
		content: "";
		position: absolute;
		display: block;
		width: 100%;
		height: 75px; /*グラデーションで隠す高さ*/
		left: 0;
		bottom: 0;
		background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
		pointer-events: none;
		transition: 1s;
	}
	div.see_all input {/*input要素は隠しておく*/
		display: none;
	}
	label.see_all {/*ボタン部分のスタイル*/
		position: absolute;
		/* bottom: -.8em; */
		left: 0;
		right: 0;
		bottom: -20px;
		/* top: 610px; */
		display: block;
		margin: auto;
		font-size: 15.33px; /*(40px * (414 / 1080)) 指定 */
		font-family: '小塚明朝 Pro', 'Kozuka Mincho Pro', 'Noto Serif JP';
		font-weight: bold;
		padding: 15px 30px;
		width: 120px;
		text-align: center;
		background: orange;
		box-shadow:-5px 0 white;
		color: white;
		z-index: 1;
		cursor: pointer;
		text-transform: uppercase;
	}
	div.see_all label:before {/*閉じている際のボタンのテキスト*/
		/* \f13a fontawesom chevron-circle-downアイコンを使用 */
		/* \00a0 Unicodeのスペース */
		content: "\f13a\00a0\00a0全て見る";
		font-family: "Font Awesome 5 Free", '小塚明朝 Pro', 'Kozuka Mincho Pro', 'Noto Serif JP';
	}
	div.see_all input:checked + label:before {/*開いているときは:checked状態なので、その際はボタンテキストを変える*/
		/* \f139 fontawesom chevron-circle-upアイコンを使用 */
		content: "\f139\00a0\00a0閉じる";
		font-family: "Font Awesome 5 Free", '小塚明朝 Pro', 'Kozuka Mincho Pro', 'Noto Serif JP';
	}
	div.see_all  input[type=checkbox]:checked ~ .hidden_content {
		height: auto; /*チェックされていたら、高さを戻す*/
	}

	div.see_all  input[type=checkbox]:checked ~ label.see_all {
		bottom: -40px;
	}

	div.see_all  input[type=checkbox]:checked ~ .hidden_content:before {
		display: none; /*チェックされていたら、see_allのbefore(グラデーション)を非表示にする*/
	}


	/*********************************
	*
	* SP版 設定
	*
	*********************************/

	.pc_display {
		display: none;
	}

	.sp_padding_bottom_none {
		padding-bottom: 0px !important;
	}

/*sp用スタイル記述End*/
}

@media screen and (max-width: 320px) {
	/*iPhone SE 用スタイル記述Start*/
	h2 {
		font-size: 18px;
		line-height: 20px;
		font-weight: bold;
	}

	h3 {
		font-size: 16px;
		line-height: 18px;
		font-weight: bold;
	}

	p {
		font-size: 14px;
		line-height: 26px;
		text-align: justify;
	}
	/*iPhone SE 用スタイル記述End*/
}