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



/* デザイン */
.sp_set { background: #fff176; text-align: center; }
.grocery { background: #dae475; text-align: center; }
.daily_use { background: #a8ded7; text-align: center; }
.daily_use { margin-top: 7em; }

.otoku { margin-top: -4.5em; }

.fuki01, .fuki02 { margin: -4em 0 -5em 0; }


.item_tit { border-bottom: 1px solid #333333; font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro" , "Hiragino Maru Gothic Pro" , "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HG丸ゴシックM-PRO", "HGMaruGothicMPRO" }
.item_tit { font-size: 2.5em; letter-spacing: 0.05em; margin-bottom: 0.75em; padding-bottom: 0.3em; }


.item_txt { font-size: 1.5em; margin-bottom: 1.2em; }


/*透過png配置 */
.rs_02Area, .rs_07Area, .rs_15Area { position: relative; }
.menu01, .menu02, .menu03, .rs_07img, .shikamo, .water, .teiki { position: absolute; display: block; }

/* Area */
.menu01, .menu02, .menu03 { width: 500px; height: 83px; }
.menu01 { top: 12.22%; left: 15.27%; }
.menu02 { top: 40.88%; left: 15.27%; }
.menu03 { top: 69.33%; left: 15.27%; }



.rs_07img { width: 580px; height: 650px; top: 1.34%; left: 9.72%; }

.shikamo { top: 4.23%; left: 20.41%; }
.water { width: 630px; height: 280px; top: 17.56%; left: 6.25%; }
.teiki { width: 420px; height: 70px; top: 89.62%; left: 38.19%; }


/* 商品セット（よこ） */
.display_exact { padding: 2.5em 2.5em 1em 2.5em; }

#rolling_stock .display_exact .img_box { width: 180px; }

#rolling_stock .display_exact .r_img { border: 0.5em solid #fff; background: #fff; border-radius: 0.5em; }
#rolling_stock .display_exact .txt_box { margin-left: 220px; font-feature-settings: "palt" 1; letter-spacing: 0.03em; }

.display_exact .icon_box { margin-bottom: 0.5em; }

.display_exact .name { font-size: 1.25em; margin-bottom: 1em; }

.display_exact .price_box { font-size: 1.35em; }

/* 商品セット（たて） */
.grocery .display_matrix .goods_set { border: 2px solid #c9d45a; }
.daily_use .display_matrix .goods_set { border: 2px solid #79ccc1; }

#rolling_stock .display_hybrid { padding: 5%; }

div .display_hybrid .display_matrix li { width: 33.3%; }

/*div .display_hybrid .display_matrix li:nth-last-child(-n+2) { border-bottom: none; }*/
.display_matrix { margin-bottom: 2em; }

.display_matrix .goods_set { margin-bottom: 1em; padding: 1.5em; border-radius: 1.25em; background: #ffffff; }

/*金子追加--------------------------------------------*/
#rolling_stock{
	max-width: 720px;
	margin: 0 auto;
}
	/*一商品余白調整 */
	#rolling_stock .c-panel{
		margin-bottom: 1rem;
		background-color: #fff;/*背景色変更*/
		padding: 5%;/*余白調整*/
		position: relative;
		padding: 3%;
		text-align: left;
	}	

		/*商品のまとめ（余白確保）*/
		#rolling_stock .item_wrapper{
			margin-bottom: 15%;
		}
		#rolling_stock .item_wrapper.item_wrapper_last{
			margin-bottom: 5%;

		}
	#rolling_stock .c-panel:not(:has(~ .c-panel)) {
		margin-bottom: 0;
	}
	/*テキストエリア*/	
	#rolling_stock .c-panel__body {
		margin-top: 0px;
		max-width: 70%;
		margin-left: 20px;
	}
/*商品説明をなしに*/
		#rolling_stock .c-panel__desc {
    display: none;
}


	/*商品画像の位置*/
	#rolling_stock .c-panel__header {
		box-sizing: border-box;
		width: 145px;
	}
	/*商品画像の大きさ*/
	#rolling_stock .c-panel__header__image {
		width: 100%;
		border: 5px solid #FFF;
		background-color: #fff;
	}
	/*価格（余白確保してボタンに被るのを回避、並び方調整など）*/
	#rolling_stock .c-panel__price-wrapper {
		margin-bottom: 4rem;
		display: flex;
		align-items: baseline;
		flex-wrap: wrap;
		column-gap:1rem;
    --space: 3px;
	}
	

	#rolling_stock .c-panel__desc{
		margin-bottom: 4.9rem;
	}
	/*割引率*/
	#rolling_stock .c-panel__discount .badge.badge-red.c-label-discount{
		font-size: 1.4rem;
	}
	/*ボタン位置*/	
	#rolling_stock .c-panel__action {
		position: absolute;
		bottom: 0;
		right: 0;
	}
	/*商品とテキストを横並びに*/
	#rolling_stock .c-panel__link{
		display: flex;
	}

/*金子追加--------------------------------------------*/

@media screen and (max-width: 768px) {
/*金子追加--------------------------------------------*/
#rolling_stock{
	max-width: 100%;
}
	
		/*商品のまとめ（余白確保）*/
		#rolling_stock .item_wrapper {
			width: 92vw;
			margin: 5% auto 20%;
			/* margin-top: 8%; */
		}
		/*一商品*/		
		#rolling_stock .c-panel {
			padding: 4% 3%;
		}
		/*商品画像*/
		#rolling_stock .c-panel__header {
			width: 110px;
		}
		/*タイトル余白調整*/
		#rolling_stock .item_title {
			margin-bottom: 3%;
		}

		/*テキスト領域*/
		#rolling_stock .c-panel__body {
			max-width: 63%;
			margin-left: 1.2rem;
		}
		/*商品名*/	
		#rolling_stock .c-panel__name {
			font-size: 1.4rem;
		}	
		/*ボタン*/
		#rolling_stock .btn-sm,
		#rolling_stock .more_btn .btn.btn-sm.btn-outline-primary{
			font-size: 1.4rem;
		}

		/*価格下に余白確保（ボタンに被るのを回避）*/		
		#rolling_stock .c-panel__price-wrapper {
			margin-bottom: 3.9rem;
		}	


		/*割引率+期日のdiv*/
		#rolling_stock .c-panel__discount {
			flex-basis: 100%;/*（回り込み回避）*/
			--price-space: 2px;
		}
		/*割引率*/
		#rolling_stock .c-panel__discount .badge.badge-red.c-label-discount {
			padding: 3px 5px;
		}
/*金子追加--------------------------------------------*/
	
	
	
	
	.contents_main { margin: 0; }
.daily_use { margin-top: 4em; }
.otoku { margin: -2.2em 0 -1.5em 0; }
.fuki01, .fuki02 { margin: -1.85em 0 -2.5em 0; }
.item_tit { font-size: 1.5em; letter-spacing: 0.15em; margin-bottom: 0.75em; padding-bottom: 0.3em; }
.item_txt { font-size: 1.15em; margin-bottom: 1.2em; }
.menu01, .menu02, .menu03 { width: 83.33%; height: 22.22%; }
.menu01 { top: 12.22%; left: 8.33%; }
.menu02 { top: 38.88%; left: 8.33%; }
.menu03 { top: 65.55%; left: 8.33%; }
.shikamo { width: 59.16%; height: 10.15%; }
.water { width: 87.5%; height: 29.62%; }
.teiki { width: 58.33%; height: 7.407%; }
.display_exact { padding: 2em 1em 0.5em 1em; }
.display_exact .goods_set { margin: 1em 0 1.2em 0; }
#rolling_stock .display_exact .img_box { width: 45%; }
#rolling_stock .display_exact .txt_box { margin-left: 48%; font-feature-settings: "palt" 1; letter-spacing: 0.02em; }
.display_exact .icon_box { font-size: 0.75em; margin-bottom: 0.5em; }
.display_exact .name { font-weight: normal; font-size: 0.8em; margin-bottom: 1em; }
#rolling_stock .display_hybrid { padding: 2em 1em 0.5em 1em; }
div .display_hybrid .display_matrix li { width: 50%; }
.display_matrix { margin-bottom: 1.5em; }
.display_matrix .goods_set { margin: 0 0.3em 0.75em 0.3em; border-radius: 0.75em; background: #ffffff; }
.display_matrix .txt_box { padding: 0.65em; }
.display_matrix .name { font-weight: normal; font-size: 0.8em; }
.rs_07img { width: 80.55%; height: 97.01%; }
	
}


/* スペース調整 */

/* 動き */
/*translateX(-50px)  X軸（左横に）方向に50px */
/*translateY(50px)  Y軸（上縦に）方向に50px */
/*translateY(-50px)  Y軸（下縦に）方向に50px */

/* ふわっとアニメ */
/* 動作を適用する箇所 */
.fuwatAnime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:2s; /* アニメ時間 */
-ms-animation-duration:2s; 
animation-duration:2s; 
-webkit-transition-delay: 0.5s;/* 開始時間 */
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
-webkit-animation-name: fuwatAnime; /* アニメ名 */
-ms-animation-name: fuwatAnime; 
animation-name: fuwatAnime; visibility: visible !important; }

.fuwatAnime2 { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:2.5s; /* アニメ時間 */
-ms-animation-duration:2.5s; 
animation-duration:2.5s; 
-webkit-transition-delay: 1.5s;/* 開始時間 */
-ms-transition-delay: 1.5s;
transition-delay: 1.5s;
-webkit-animation-name: fuwatAnime2; /* アニメ名 */
-ms-animation-name: fuwatAnime2; 
animation-name: fuwatAnime2; visibility: visible !important; }

.fadeIn_r_Anime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1.5s; /* アニメ時間 */
-ms-animation-duration:1.5s; 
animation-duration:1.5s; 
-webkit-transition-delay: 0.25s;/* 開始時間 */
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-webkit-animation-name: fadeIn_r_Anime; /* アニメ名 */
-ms-animation-name: fadeIn_r_Anime; 
animation-name: fadeIn_r_Anime; visibility: visible !important; }

.fadeIn_l_Anime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1.5s; /* アニメ時間 */
-ms-animation-duration:1.5s; 
animation-duration:1.5s; 
-webkit-transition-delay: 0.0s;/* 開始時間 */
-ms-transition-delay: 0.0s;
transition-delay: 0.0s;
-webkit-animation-name: fadeIn_l_Anime; /* アニメ名 */
-ms-animation-name: fadeIn_l_Anime; 
animation-name: fadeIn_l_Anime; visibility: visible !important; }

.fadeIn_ru_Anime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1.5s; /* アニメ時間 */
-ms-animation-duration:1.5s; 
animation-duration:1.5s; 
-webkit-transition-delay: -0.5s;/* 開始時間 */
-ms-transition-delay: -0.5s;
transition-delay: -0.5s;
-webkit-animation-name: fadeIn_ru_Anime; /* アニメ名 */
-ms-animation-name: fadeIn_ru_Anime; 
animation-name: fadeIn_ru_Anime; visibility: visible !important; }

.fadeIn_lu_Anime { 
-webkit-animation-fill-mode:both; 
-ms-animation-fill-mode:both; 
animation-fill-mode:both; 
-webkit-animation-duration:1.5s; /* アニメ時間 */
-ms-animation-duration:1.5s; 
animation-duration:1.5s; 
-webkit-transition-delay: -0.5s;/* 開始時間 */
-ms-transition-delay: -0.5s;
transition-delay: -0.5s;
-webkit-animation-name: fadeIn_lu_Anime; /* アニメ名 */
-ms-animation-name: fadeIn_lu_Anime; 
animation-name: fadeIn_lu_Anime; visibility: visible !important; }

/* 動作内容 */
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-150px);  }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-webkit-keyframes fuwatAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(-200px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
/*大から実寸にフェードイン@-webkit-keyframes fuwatAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(0) scale(0.5); }
 70% { opacity: 1; -webkit-transform: translateY(0) scale(1.2); }
 100% { opacity: 1; -webkit-transform: translateY(0) scale(1.0); }
}*/
@-webkit-keyframes fadeIn_r_Anime {
 0% { opacity: 0; -webkit-transform: translateX(300px); }
 100% { opacity: 1; -webkit-transform: translateX(0); width:720px; }
}
@-webkit-keyframes fadeIn_l_Anime {
 0% { opacity: 0; -webkit-transform: translateX(-300px); }
 100% { opacity: 1; -webkit-transform: translateX(0); width:720px; }
}
@-webkit-keyframes fadeIn_ru_Anime {
 0% { opacity: 0; -webkit-transform: translateX(300px) translateY(200px); }
 100% { opacity: 1; -webkit-transform: translateX(0); width:720px; }

}
@-webkit-keyframes fadeIn_lu_Anime {
 0% { opacity: 0; -webkit-transform: translateX(-300px) translateY(200px); }
 100% { opacity: 1; -webkit-transform: translateX(0); width:720px; }
}


@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-150px); -ms-transform: translateY(-150px); transform: translateY(-150px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
@keyframes fuwatAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/*大から実寸にフェードイン@keyframes fuwatAnime2 {
 0% { opacity: 0; -webkit-transform: translateY(0) scale(0.5); -ms-transform: translateY(0) scale(0.5); transform: translateY(0) scale(0.5); }
 70% { opacity: 1; -webkit-transform: translateY(0) scale(1.2); -ms-transform: translateY(0) scale(1.2); transform: translateY(0) scale(1.2); }
 100% { opacity: 1; -webkit-transform: translateY(0) scale(1.0); -ms-transform: translateY(0) scale(1.0); transform: translateY(0) scale(1.0); }
}*/
@keyframes fadeIn_r_Anime {
 0% { opacity: 0.5;/* 透明 */ -webkit-transform: translateX(300px) ; -ms-transform: translateX(300px); transform: translateX(300px);/*X軸（右横に）方向に300px */}
100% { opacity: 1;/* 不透明 */ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); width: ; }
}
@keyframes fadeIn_l_Anime{
 0% { opacity: 0.5; -webkit-transform: translateX(-300px); -ms-transform: translateX(-300px); transform: translateX(-300px);}
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); width: ; }
}
@keyframes fadeIn_ru_Anime {
 0% { opacity: 0.5; -webkit-transform: translateX(300px) translateY(200px); -ms-transform: translateX(300px) translateY(200px); transform: translateX(300px) translateY(200px);}
100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); width: ; }
}
@keyframes fadeIn_lu_Anime{
 0% { opacity: 0.5; -webkit-transform: translateX(-300px) translateY(200px); -ms-transform: translateX(-300px) translateY(200px); transform: translateX(-300px) translateY(200px);}
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); width: ; }
}