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


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

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

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

/*------------------------------
贈答用商品設定
------------------------------*/

/*贈答用商品全体*/
#giftItem{
	padding: 85px 0 0;
	width: 100%;
}

/*贈答用商品 見出し*/
#giftItem h2{
	color: #4D4D4D;
	font-size: 3rem;
	font-weight: 600;
	font-family: 'Noto Serif JP', serif;
}

.selectBtn{
	margin: 130px auto 0;
	width: 574px;
	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;
}

.selectBtn li{
	width: 254px;
	height: 50px;
	text-align: center;
}

.selectBtn li a{
	display: block;
	width: 100%;
	height: 100%;
	color: #4D4D4D;
	font-size: 1.4rem;
	line-height: 50px;
	border: 1px solid #4D4D4D;
	transition: 0.15s;
}

.selectBtn li a.active{
	color: #FFF;
	background: #4D4D4D;
	transition: 0.3s;
}

/*------------------------------
メインアイテム設定
------------------------------*/

/*メインアイテム全体*/
#mainItemWrap{
	width: 100%;
}

/*メインアイテム中身*/
.mainItem{
	margin: 0 auto;
	padding: 126px 0 140px;
	width: 850px;
}

/*メインアイテム リスト*/
.mainItem li{
	margin: 0 0 86px 0;
	width: 100%;
	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;
}

/*メインアイテム リスト 偶数*/
.mainItem li:nth-child(even){
	flex-direction: row-reverse;
}

/*メインアイテム リスト 最後*/
.mainItem li:last-child{
	margin: 0;
}

/*メインアイテム 写真枠*/
.mainItem li .photo{
	width: 360px;
}

/*メインアイテム 文字枠*/
.mainItem li .txtBox{
	width: 436px;
}

/*メインアイテム 文字枠 リスト*/
.mainItem li dl{
	width: 100%;
}

/*メインアイテム 文字枠 商品名*/
.mainItem li dl dt{
	color: #4D4D4D;
	font-size: 2.2rem;
	line-height: 36px;
	font-weight: 600;
	position: relative;
}

/*メインアイテム 文字枠 ルビ用*/
.mainItem li dl dt span{
	display: inline-block;
	margin: 12px 0 0 0;
	position: relative;
}

/*メインアイテム 文字枠 ルビ*/
.mainItem li dl dt span::before{
	font-size: 1rem;
	letter-spacing: 2.5px;
	white-space: nowrap;
	position: absolute;
	top: -12px;
}

/*メインアイテム 文字枠 説明*/
.mainItem li dl dd{
	margin: 20px 0 0 0;
	color: #4D4D4D;
	font-size: 1.4rem;
	line-height: 30px;
	text-align: justify;
}

/*メインアイテム 文字枠 説明 強調*/
.mainItem li dl dd em{
	font-size: 1.6rem;
	font-weight: 600;
	font-style: normal;
}

/*------------------------------
サブアイテム設定
------------------------------*/

/*サブアイテム全体*/
#subItemWrap{
	padding: 140px 0 140px;
	width: 100%;
	background: #FFF;
}

/*サブアイテム中身*/
.subItem{
	margin: 0 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;
}

/*サブアイテム リスト*/
.subItem li{
	margin: 80px 0 0 0;
	width: 270px;
}

/*サブアイテム 写真枠*/
.subItem li .photo{
	width: 100%;
}

/*サブアイテム 写真*/
.subItem li .photo img{
	border-radius: 15px;
}

/*サブアイテム 文字枠*/
.subItem li dl{
	margin: 20px 0 0 0;
}

/*サブアイテム 文字枠 商品名*/
.subItem li dt{
	color: #4D4D4D;
	font-size: 2.2rem;
	line-height: 36px;
	font-weight: 600;
}

/*サブアイテム 文字枠 説明*/
.subItem li dd{
	margin: 15px 0 0 0;
	color: #4D4D4D;
	font-size: 1.4rem;
	line-height: 30px;
	text-align: justify;
}

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

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

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

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


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

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

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

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

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

	/*------------------------------
	贈答用商品設定
	------------------------------*/

	/*贈答用商品全体*/
	#giftItem{
		padding: 60px 0 0 0;
	}

	/*贈答用商品 見出し*/
	#giftItem h2{
		font-size: 2.6rem;
	}

	.selectBtn{
		margin: 100px auto 0;
		width: calc(100% - 80px);
	}

	.selectBtn li{
		width: calc(50% - 20px);
	}

	/*------------------------------
	メインアイテム設定
	------------------------------*/

	/*メインアイテム中身*/
	.mainItem{
		margin: 0 auto;
		padding: 100px 0 100px;
		width: calc(100% - 80px);
	}

	/*メインアイテム リスト*/
	.mainItem li{
		margin: 0 0 60px 0;
	}

	/*メインアイテム 写真枠*/
	.mainItem li .photo{
		width: 40%;
	}

	/*メインアイテム 文字枠*/
	.mainItem li .txtBox{
		width: calc(100% - 40% - 30px);
	}

	/*メインアイテム 文字枠 商品名*/
	.mainItem li dl dt{
		font-size: 2rem;
	}

	/*メインアイテム 文字枠 説明*/
	.mainItem li dl dd{
		margin: 15px 0 0 0;
	}

	/*------------------------------
	サブアイテム設定
	------------------------------*/

	/*サブアイテム全体*/
	#subItemWrap{
		padding: 40px 0 100px;
	}

	/*サブアイテム中身*/
	.subItem{
		width: calc(100% - 80px);
	}

	/*サブアイテム リスト*/
	.subItem li{
		margin: 80px 0 0 0;
		width: 270px;
	}

	/*サブアイテム 文字枠 商品名*/
	.subItem li dt{
		font-size: 2rem;
	}

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

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


}

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

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

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

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

	/*------------------------------
	贈答用商品設定
	------------------------------*/

	/*贈答用商品全体*/
	#giftItem{
		padding: 40px 0 0 0;
	}

	/*贈答用商品 見出し*/
	#giftItem h2{
		font-size: 2rem;
	}

	.selectBtn{
		margin: 60px auto 40px;
		width: calc(100% - 40px);
	}

	.selectBtn li{
		width: calc(50% - 5px);
	}

	/*------------------------------
	メインアイテム設定
	------------------------------*/

	/*メインアイテム中身*/
	.mainItem{
		padding: 30px 0 80px;
		width: calc(100% - 40px);
	}

	/*メインアイテム リスト*/
	.mainItem li{
		margin: 0 0 60px 0;
		width: 100%;
		flex-direction: column;
	}

	/*メインアイテム リスト 偶数*/
	.mainItem li:nth-child(even){
		flex-direction: column;
	}

	/*メインアイテム 写真枠*/
	.mainItem li .photo{
		width: 100%;
	}

	/*メインアイテム 文字枠*/
	.mainItem li .txtBox{
		margin: 20px 0 0 0;
		width: 100%;
	}

	/*メインアイテム 文字枠 商品名*/
	.mainItem li dl dt{
		font-size: 2rem;
	}

	/*メインアイテム 文字枠 説明*/
	.mainItem li dl dd{
		margin: 15px 0 0 0;
	}

	/*------------------------------
	サブアイテム設定
	------------------------------*/

	/*サブアイテム全体*/
	#subItemWrap{
		padding: 40px 0 60px;
	}

	/*サブアイテム中身*/
	.subItem{
		margin: 0 auto;
		width: calc(100% - 40px);
	}

	/*サブアイテム リスト*/
	.subItem li{
		margin: 60px 0 0 0;
		width: 100%;
	}

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

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


}