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

/*==============================
共通設定
==============================*/

section h2{
	font-size: 3rem;
	font-weight: 600;
	font-family: 'Noto Serif JP', serif;
}

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

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

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

/*------------------------------
三輪の神糸設定
------------------------------*/

/*三輪の神糸全体*/
#kamiito{
	padding: 140px 0 300px;
	width: 100%;
	background: url(../images/miwa/homeitem/kamiito/bg_illust02.svg) no-repeat top 30px left -50px / 406px 380px,
				url(../images/miwa/homeitem/kamiito/bg_illust03.svg) no-repeat bottom 400px left 50px / 252px 234px,
				url(../images/miwa/homeitem/kamiito/bg_illust04.svg) no-repeat bottom 200px right -130px / 406px 524px;
	position: relative;
}

/*三輪の神糸全体 装飾*/
#kamiito::before{
	content: "";
	display: block;
	width: 510px;
	height: 504px;
	background: url(../images/miwa/homeitem/kamiito/bg_illust01.svg) no-repeat center center / cover;
	position: absolute;
	top: -120px;
	right: 10px;
	z-index: -1;
}

/*三輪の神糸 見出し*/
#kamiito h2{
	margin: 0px auto 0;
	width: 122px;
}

/*三輪の神糸 写真*/
#kamiito .photo{
	width: 250px;
	position: absolute;
	left: 50px;
	bottom: -200px;
	z-index: 2;
}

/*三輪の神糸 説明*/
#kamiito .desc{
	margin: 80px auto 0;
	color: #4D4D4D;
	font-size: 1.4rem;
	line-height: 36px;
	text-align: center;
	position: relative;
	z-index: 3;
}

/*------------------------------
製法設定
------------------------------*/

/*製法全体*/
#recipe{
	padding: 0 0 300px;
	width: 100%;
	background: #20304F;
	position: relative;
	z-index: 1;
}

/*製法全体 装飾*/
#recipe::before{
	content: "";
	display: block;
	width: 100%;
	height: 400px;
	transform: skewY(-10deg);
	background: #20304F;
	position: absolute;
	top: -120px;
	z-index: -1;
}

/*製法 見出し*/
#recipe h2{
	color: #FFF;
}

/*製法 説明*/
#recipe .desc{
	margin: 30px auto 0;
	width: 640px;
	color: #FFF;
	font-size: 1.4rem;
	line-height: 36px;
	text-align: center;
}

/*イラスト*/
.illust{
	margin: 150px auto 0;
	width: 680px;
	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;
}

/*イラスト 1つ目*/
.illust li:first-child{
	width: 196px;
}

/*イラスト 2つ目*/
.illust li:nth-child(2){
	width: 400px;
}

/*------------------------------
ラインナップ設定
------------------------------*/

/*ラインナップ全体*/
#lineup{
	padding: 0 0 150px;
	width: 100%;
	background: #FFF;
	position: relative;
	z-index: 1;
}

/*ラインナップ全体 装飾*/
#lineup::before{
	content: "";
	display: block;
	width: 100%;
	height: 400px;
	transform: skewY(-10deg);
	background: #FFF;
	position: absolute;
	top: -120px;
	z-index: -1;
}

/*ラインナップ 見出し*/
#lineup h2{
	color: #4D4D4D;
}

/*ラインナップ中身*/
.lineupList{
	margin: 80px auto;
	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;
}

/*ラインナップ リスト*/
.lineupList li{
	width: 270px;
}

/*ラインナップ 重さ*/
.lineupList li p{
	margin: 15px 0 0 0;
	color: #4D4D4D;
	font-size: 2.2rem;
	font-weight: 600;
}

/*ラインナップ 写真*/
.lineupList li img{
	border-radius: 15px;
}

/*オンラインションボタン*/
.shopBtn{
	margin: 80px auto 0;
	width: 254px;
	height: 50px;
	text-align: center;
}

/*オンラインションボタン リンク*/
.shopBtn a{
	display: block;
	width: 100%;
	height: 100%;
	color: #4D4D4D;
	font-size: 1.4rem;
	line-height: 50px;
	border: 1px solid #4D4D4D;
	transition: 0.15s;
}

/*オンラインションボタン リンク ホバー*/
.shopBtn a.active{
	color: #FFF;
	background: #4D4D4D;
	transition: 0.3s;
}

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

/*アイテム用バナー*/
.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;
}

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

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


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

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

	/*三輪の神糸 写真*/
	#kamiito .photo{
		width: 150px;
		left: 30px;
		bottom: -50px;
	}

}

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

	/*三輪の神糸 写真*/
	#kamiito .photo{
		width: 120px;
		bottom: -30px;
	}

}

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

	/*==============================
	共通設定
	==============================*/

	section h2{
		font-size: 2.6rem;
	}

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

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

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

	/*------------------------------
	三輪の神糸設定
	------------------------------*/

	/*三輪の神糸全体*/
	#kamiito{
		padding: 60px 0 250px;
		width: 100%;
		background: url(../images/miwa/homeitem/kamiito/bg_illust02.svg) no-repeat top 30px left -50px / 300px,
					url(../images/miwa/homeitem/kamiito/bg_illust03.svg) no-repeat bottom 400px left 50px / 150px,
					url(../images/miwa/homeitem/kamiito/bg_illust04.svg) no-repeat bottom 200px right -130px / 300px;
		position: relative;
	}

	/*三輪の神糸全体 装飾*/
	#kamiito::before{
		width: 350px;
		height: 346px;
	}

	/*三輪の神糸 見出し*/
	#kamiito div{
		margin: 0px auto 0;
		width: 380px;
		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;
	}

	/*三輪の神糸 見出し*/
	#kamiito h2{
		margin: 50px 0 0 0;
		width: 100px;
	}

	/*三輪の神糸 写真*/
	#kamiito .photo{
		width: 200px;
		position: static;
	}

	/*三輪の神糸 説明*/
	#kamiito .desc{
		margin: 40px auto 0;
	}

	/*------------------------------
	製法設定
	------------------------------*/

	/*製法全体*/
	#recipe{
		padding: 0 0 200px;
	}

	/*製法 説明*/
	#recipe .desc{
		width: calc(100% - 80px);
	}

	/*イラスト*/
	.illust{
		margin: 50px auto 0;
		width: calc(100% - 200px);
	}

	/*イラスト 1つ目*/
	.illust li:first-child{
		width: 30%;
	}

	/*イラスト 2つ目*/
	.illust li:nth-child(2){
		width: 60%;
	}

	/*------------------------------
	ラインナップ設定
	------------------------------*/

	/*ラインナップ全体*/
	#lineup{
		padding: 0 0 100px;
	}

	/*ラインナップ全体 装飾*/
	#lineup::before{
		height: 200px;
		top: -80px;
	}

	/*ラインナップ中身*/
	.lineupList{
		width: calc(100% - 80px);
	}

	/*ラインナップ リスト*/
	.lineupList li{
		width: calc(100% / 3 - 20px);
	}

	/*ラインナップ 重さ*/
	.lineupList li p{
		margin: 10px 0 0 0;
		font-size: 2rem;
	}

	/*オンラインションボタン*/
	.shopBtn{
		margin: 60px auto 0;
	}


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

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

	/*アイテム用バナー リスト*/
	.itemBnr li{
		padding: 15px;
		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: 20px 0;
		text-align: center;
	}


}

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

	/*==============================
	共通設定
	==============================*/

	section h2{
		font-size: 2.2rem;
	}

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

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

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

	/*------------------------------
	三輪の神糸設定
	------------------------------*/

	/*三輪の神糸全体*/
	#kamiito{
		padding: 60px 0 180px;
		width: 100%;
		background: url(../images/miwa/homeitem/kamiito/bg_illust02.svg) no-repeat top 30px left -50px / 250px,
					url(../images/miwa/homeitem/kamiito/bg_illust03.svg) no-repeat top 400px left -50px / 200px,
					url(../images/miwa/homeitem/kamiito/bg_illust04.svg) no-repeat top 200px right -50px / 200px;
		position: relative;
	}

	/*三輪の神糸全体 装飾*/
	#kamiito::before{
		width: 240px;
		height: 238px;
		right: -50px;
	}

	/*三輪の神糸 見出し*/
	#kamiito div{
		width: 300px;
	}

	/*三輪の神糸 見出し*/
	#kamiito h2{
		margin: 0;
		width: 85px;
	}

	/*三輪の神糸 写真*/
	#kamiito .photo{
		width: 160px;
	}

	/*三輪の神糸 説明*/
	#kamiito .desc{
		width: calc(100% - 40px);
		line-height: 30px;
		text-align: justify;
	}

	/*------------------------------
	製法設定
	------------------------------*/

	/*製法全体*/
	#recipe{
		padding: 0 0 180px;
	}

	/*製法全体 装飾*/
	#recipe::before{
		height: 200px;
		top: -100px;
	}

	/*製法 説明*/
	#recipe .desc{
		margin: 20px auto 0;
		width: calc(100% - 40px);
		line-height: 30px;
		text-align: justify;
	}

	/*イラスト*/
	.illust{
		margin: 50px auto 0;
		width: calc(100% - 40px);
	}

	/*------------------------------
	ラインナップ設定
	------------------------------*/

	/*ラインナップ全体*/
	#lineup{
		padding: 0 0 60px;
	}

	/*ラインナップ中身*/
	.lineupList{
		margin: 20px auto 0;
		width: calc(100% - 40px);
	}

	/*ラインナップ リスト*/
	.lineupList li{
		width: calc(100% / 3 - 10px);
	}

	/*ラインナップ 写真*/
	.lineupList li img{
		border-radius: 10px;
	}

	/*ラインナップ 重さ*/
	.lineupList li p{
		font-size: 1.6rem;
	}

	/*オンラインションボタン*/
	.shopBtn{
		margin: 40px auto 0;
		width: calc(100% - 40px);
	}

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

	/*アイテム用バナー*/
	.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;
	}


}