@charset "UTF-8";
/* CSS Document */


/*==============================
メイン設定
==============================*/

/*------------------------------
メインフォト設定
------------------------------*/

/*メインフォト*/
.mainPhoto{
	width: 100%;
	height: 300px;
	background: url(../images/miwa/bg_main@2x.jpg) no-repeat center center / cover;
}

/*------------------------------
三輪そうめんについて設定
------------------------------*/

/*三輪そうめんについて全体*/
#miwa{
	padding: 85px 0 170px;
	width: 100%;
}

/*三輪そうめんについて 見出し*/
#miwa h2{
	color: #4D4D4D;
	font-size: 3rem;
	font-weight: 600;
	font-family: 'Noto Serif JP', serif;
}

/*三輪そうめんについて 説明*/
#miwa .desc{
	margin: 30px auto 0;
	color: #4D4D4D;
	font-size: 1.4rem;
	line-height: 36px;
	text-align: center;
}

/*------------------------------
ヒストリー設定
------------------------------*/

/*ヒストリー全体*/
#history{
	width: 100%;
}

/*ヒストリー 見出し*/
#history h2{
	padding: 230px 0 300px;
	width: 100%;
	background: url(../images/miwa/bg_history@2x.jpg) top center / cover;
}

/*ヒストリー 見出し日本語*/
#history h2::after{
	content: "- 歴史 -";
}

/*ヒストリー 説明全体*/
.descWrap{
	background: #1F2F50;
	position: relative;
	z-index: 1;
}

/*ヒストリー 説明全体 装飾*/
.descWrap::before{
	content: "";
	display: block;
	width: 100%;
	height: 400px;
	transform: skewY(-10deg);
	background: #1F2F50;
	position: absolute;
	top: -150px;
	z-index: -1;
}

/*ヒストリー 説明*/
.descWrap .desc{
	margin: 0 auto 0;
	padding: 0 0 200px;
	width: 620px;
	color: #FFF;
	font-size: 1.4rem;
	line-height: 36px;
	text-align: center;
}

/*------------------------------
おいしさの秘密設定
------------------------------*/

/*おいしさの秘密全体*/
#brand{
	width: 100%;
}

/*おいしさの秘密 タイトル全体*/
#brand .titleWrap{
	padding: 180px 0 300px;
	width: 100%;
	background: url(../images/miwa/bg_brand@2x.jpg) top center / cover;
	position: relative;
}

/*おいしさの秘密 タイトル全体 装飾*/
#brand .titleWrap::after{
	content: "";
	display: block;
	width: 100%;
	height: 400px;
	transform: skewY(5deg);
	background: #FFF;
	position: absolute;
	bottom: -300px;
}

/*おいしさの秘密 見出し*/
#brand h2{
	width: 100%;
	color: #FFF;
}

/*おいしさの秘密 見出し日本語*/
#brand h2::after{
	content: "- おいしさの秘密 -";
	color: #FFF;
}

/*素材全体*/
.foodstuffWrap{
	padding: 60px 0 0;
	width: 100%;
	background: #FFF;
	position: relative;
	z-index: 1;
}

/*素材*/
.foodstuff {
	margin: 0 auto 0;
	padding: 0 0 100px;
	width: 100%;
}

/*素材 リスト*/
.foodstuff li {
	margin: 0 0 250px 0;
	width: 100%;
	position: relative;
}

/*素材名*/
.foodstuff h3 {
	color: #4D4D4D;
	font-size: 5rem;
	font-weight: 700;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	position: absolute;
	z-index: 2;
}

/*素材名 小麦粉*/
.foodstuff li:first-child h3 {
	top: -60px;
	right: 500px;
}

/*素材名 油*/
.foodstuff li:nth-child(2) h3 {
	left: 470px;
	top: 30px;
}

/*素材名 塩*/
.foodstuff li:nth-child(3) h3 {
	top: 0;
	right: 500px;
}

/*素材名 英語*/
.foodstuff h3::after {
	font-size: 2.6rem;
	font-weight: 300;
	display: block;
	position: absolute;
	right: -40px;
}

/*素材名 英語 小麦粉*/
.foodstuff li:first-child h3::after {
	content: "Flour";
}

/*素材名 英語 油*/
.foodstuff li:nth-child(2) h3::after {
	content: "Oil";
}

/*素材名 英語 塩*/
.foodstuff li:nth-child(3) h3::after {
	content: "Salt";
}

/*素材写真*/
.foodstuff .photo {
	width: 52%;
	height: 364px;
	position: relative;
	z-index: 1;
}

/*素材写真 小麦粉*/
.foodstuff li:first-child .photo {
	background: url(../images/miwa/bg_flour@2x.jpg) center center / cover;
}

/*素材写真 油*/
.foodstuff li:nth-child(2) .photo {
	margin: 0 0 0 auto;
	background: url(../images/miwa/bg_oil@2x.jpg) center center / cover;
}

/*素材写真 塩*/
.foodstuff li:nth-child(3) .photo {
	background: url(../images/miwa/bg_solt@2x.jpg) center center / cover;
}

/*素材テキスト*/
.foodstuff .txt {
	padding: 50px 70px 50px 95px;
	width: 45%;
	color: #FFF;
	font-size: 1.4rem;
	line-height: 36px;
	text-align: justify;
	background: #1F2F50;
	position: absolute;
	bottom: -120px;
	right: 95px;
}

/*素材テキスト 油*/
.foodstuff li:nth-child(2) .txt {
	padding: 50px 95px 50px 70px;
	bottom: -120px;
	left: 95px;
	right: auto;
}

/*素材テキスト 塩*/
.foodstuff li:nth-child(3) .txt {
	bottom: -100px;
}


/*------------------------------
バナー設定
------------------------------*/

/*アイテム用バナー*/
.itemBnr{
	margin: 200px auto 0;
	width: 960px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/*アイテム用バナー リスト*/
.itemBnr li{
	padding: 15px;
	width: 464px;
	border: 1px solid #1F2F50;
	border-radius: 15px;
	background: #FFF;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/*アイテム用バナー 写真*/
.itemBnr li .photo{
	width: 198px;
	height: 198px;
}

/*アイテム用バナー 文字枠*/
.itemBnr li .txtBox{
	width: 198px;
	height: 198px;
}

/*アイテム用バナー　文字*/
.itemBnr li .txtBox .txt{
	margin: 60px 0 0 0;
	color: #4D4D4D;
	font-size: 2.8rem;
}

.itemBnr li .txtBox .more{
	margin: 20px 0 0 0;
	text-align: left;
}

/*アイテム用バナー　READ MORE リンク*/
.itemBnr li .txtBox .more a{
	left: 0;
}

/*オンラインショップ用バナー*/
.bnrShop{
	margin: 100px auto 0;
}


/*==============================
レスポンシブ設定
==============================*/

/*768px以下の場合*/
@media screen and (max-width:768px){

	/*==============================
	メイン設定
	==============================*/

	/*------------------------------
	メインフォト設定
	------------------------------*/

	/*メインフォト*/
	.mainPhoto{
		height: 250px;
	}

	/*------------------------------
	三輪そうめんについて設定
	------------------------------*/

	/*三輪そうめんについて全体*/
	#miwa{
		padding: 60px 0 100px;
	}

	/*三輪そうめんについて 見出し*/
	#miwa h2{
		font-size: 2.6rem;
	}

	/*------------------------------
	ヒストリー設定
	------------------------------*/

	/*ヒストリー 見出し*/
	#history h2{
		padding: 120px 0 250px;
	}

	/*ヒストリー 説明*/
	.descWrap .desc{
		padding: 0 0 100px;
		width: 540px;
	}

	/*------------------------------
	おいしさの秘密設定
	------------------------------*/

	/*おいしさの秘密 タイトル全体*/
	#brand .titleWrap{
		padding: 100px 0 200px;
	}

	/*おいしさの秘密 タイトル全体 装飾*/
	#brand .titleWrap::after{
		bottom: -280px;
	}

	/*素材全体*/
	.foodstuffWrap{
		padding: 0;
	}

	/*素材*/
	.foodstuff {
		padding: 0 0 100px;
		width: calc(100% - 80px);
	}

	/*素材 リスト*/
	.foodstuff li {
		margin: 0 0 60px 0;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: justify;
		-webkit-justify-content: space-between;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	/*素材 リスト 奇数*/
	.foodstuff li:nth-child(even) {
		flex-direction: row-reverse;
	}

	/*素材名*/
	.foodstuff h3 {
		color: #FFF;
		font-size: 4rem;
		writing-mode: horizontal-tb;
		position: static;
	}

	/*素材名 英語*/
	.foodstuff h3::after {
		display: inline-block;
		margin: 0 0 0 5px;
		font-size: 2rem;
		position: static;
	}

	/*素材写真*/
	.foodstuff .photo {
		width: 45%;
		height: auto;
	}

	/*素材写真 油*/
	.foodstuff li:nth-child(2) .photo {
		margin: 0;
	}

	/*素材テキスト*/
	.foodstuff div {
		padding: 30px;
		width: 55%;
		background: #1F2F50;
	}

	/*素材テキスト*/
	.foodstuff .txt {
		margin: 20px 0 0 0;
		padding: 0;
		width: 100%;
		position: static;
	}

	/*素材テキスト 油*/
	.foodstuff li:nth-child(2) .txt {
		padding: 0;
	}

	/*------------------------------
	バナー設定
	------------------------------*/

	/*アイテム用バナー*/
	.itemBnr{
		margin: 140px auto 0;
		width: calc(100% - 80px);
	}

	/*アイテム用バナー リスト*/
	.itemBnr li{
		padding: 15px 15px 30px;
		width: calc(50% - 20px);
		flex-direction: column;
	}

	/*アイテム用バナー 写真*/
	.itemBnr li .photo{
		width: 100%;
		height: auto;
	}

	/*アイテム用バナー 文字枠*/
	.itemBnr li .txtBox{
		width: 100%;
		height: auto;
	}

	/*アイテム用バナー　文字*/
	.itemBnr li .txtBox .txt{
		margin: 20px 0 0 0;
		font-size: 2.4rem;
		text-align: center;
	}

	/*アイテム用バナー　READ MORE*/
	.itemBnr li .txtBox .more{
		margin: 10px 0 0 -45px;
		text-align: center;
	}

}

/*560px以下の場合*/
@media screen and (max-width:560px){

	/*------------------------------
	おいしさの秘密設定
	------------------------------*/

	/*素材全体*/
	.foodstuffWrap{
		padding: 0;
	}

	/*素材*/
	.foodstuff {
		padding: 0 0 60px;
		width: calc(100% - 40px);
	}

	/*素材 リスト*/
	.foodstuff li {
		margin: 0 0 60px 0;
		flex-direction: column;
	}

	/*素材 リスト 奇数*/
	.foodstuff li:nth-child(even) {
		flex-direction: column;
	}

	/*素材名*/
	.foodstuff h3 {
		font-size: 3rem;
	}

	/*素材名 英語*/
	.foodstuff h3::after {
		margin: 0 0 0 10px;
		font-size: 1.6rem;
	}

	/*素材写真*/
	.foodstuff .photo {
		width: 100%;
		height: 250px;
	}

	/*素材テキスト*/
	.foodstuff div {
		padding: 30px;
		width: 100%;
	}

	/*素材テキスト*/
	.foodstuff .txt {
		margin: 10px 0 0 0;
		line-height: 30px;
	}
}

/*480px以下の場合*/
@media screen and (max-width:480px){

	/*==============================
	メイン設定
	==============================*/

	/*------------------------------
	メインフォト設定
	------------------------------*/

	/*メインフォト*/
	.mainPhoto{
		height: 150px;
	}

	/*------------------------------
	三輪そうめんについて設定
	------------------------------*/

	/*三輪そうめんについて全体*/
	#miwa{
		padding: 40px 0;
	}

	/*三輪そうめんについて 見出し*/
	#miwa h2{
		font-size: 2rem;
	}

	/*三輪そうめんについて 説明*/
	#miwa .desc{
		margin: 30px auto 0;
		width: calc(100% - 40px);
		line-height: 30px;
		text-align: justify;
	}

	/*------------------------------
	ヒストリー設定
	------------------------------*/

	/*ヒストリー 見出し*/
	#history h2{
		padding: 60px 0 100px;
	}

	/*ヒストリー 説明全体 装飾*/
	.descWrap::before{
		height: 200px;
		top: -60px;
	}

	/*ヒストリー 説明*/
	.descWrap .desc{
		padding: 0 0 60px;
		width: calc(100% - 40px);
		line-height: 30px;
		text-align: justify;
	}

	/*------------------------------
	おいしさの秘密設定
	------------------------------*/

	/*おいしさの秘密 タイトル全体*/
	#brand .titleWrap{
		padding: 60px 0 100px;
	}

	/*おいしさの秘密 タイトル全体 装飾*/
	#brand .titleWrap::after{
		height: 200px;
		bottom: -150px;
	}

	/*------------------------------
	バナー設定
	------------------------------*/

	/*アイテム用バナー*/
	.itemBnr{
		margin: 60px auto 0;
		width: calc(100% - 40px);
		flex-direction: column;
	}

	/*アイテム用バナー リスト*/
	.itemBnr li{
		padding: 15px;
		width: 100%;
		flex-direction: row;
	}

	/*アイテム用バナー リスト*/
	.itemBnr li:first-child{
		margin: 0 0 30px 0;
	}

	/*アイテム用バナー 写真*/
	.itemBnr li .photo{
		width: 40%;
		height: auto;
	}

	/*アイテム用バナー 文字枠*/
	.itemBnr li .txtBox{
		width: calc(60% - 20px);
	}

	/*アイテム用バナー　文字*/
	.itemBnr li .txtBox .txt{
		margin: 40px 0 0 0;
		font-size: 2.2rem;
		text-align: left;
	}

	/*アイテム用バナー　READ MORE*/
	.itemBnr li .txtBox .more{
		margin: 20px 0;
		text-align: left;
	}


}