@charset "utf-8";
/* 全体 */
.l-main {
    padding-bottom: 0 !important;
}
.pd_features{
	max-width: 720px;
	margin: 0 auto;
	background: #fff47a;
  padding-bottom: 1px;
}
.pd_features h2{
	margin-bottom: 0;
}
/*透過png配置 */
.pd_features .image_03Area,
.pd_features .image_04Area,
.pd_features .image_05Area,
.pd_features .image_06Area,
.pd_features .image_07Area {
  position: relative;
}

.pd_features .image_03on,
.pd_features .image_04on,
.pd_features .image_04on_ad,
.pd_features .image_05on,
.pd_features .image_06on,
.pd_features .image_07on {
  position: absolute;
  display: block;
}

/* mainArea */
.pd_features .image_03on {
  width: 720px;
  height: 180px;
  top: 20.97%;
  left: %;
}

.pd_features .image_04on_ad {
  width: 720px;
  height: 180px;
  top: 46.9%;
  left: %;
}

.pd_features .image_04on {
  width: 720px;
  height: 180px;
  top: 24.2%;
  left: %;
}

.pd_features .image_05on {
  width: 720px;
  height: 180px;
  top: -7em;
  left: %;
}

.pd_features .image_06on {
  width: 720px;
  height: 180px;
  top: 19.47%;
  left: %;
}

.pd_features .image_07on {
  width: 720px;
  height: 180px;
  top: 20.77%;
  left: %;
}

/*===============================
wrapper（横幅調整）
===============================*/
.pd_features,
.pd_features .wrapper_big,
.pd_features .wrapper_middle,
.pd_features .wrapper_small{
   margin-inline:auto;
}
.pd_features .wrapper_big{
	width: 662px;
	/*このLP用*/
	background: #ffffff;
	border: 4px solid #fa0200;
	border-radius: 1.3em;
	padding: 3% 0;
}
.pd_features .wrapper_middle{
	width: 620px;
}
.pd_features .wrapper_small{
	width: 540px;
}
}

/*===============================
リンク設定
===============================*/
.pd_features .link_wrap{
	position: relative;
	display: inline-block;
}
.pd_features .link{
	position: absolute;
	display: block;
	z-index: 3;
/*background: rgba(255,0,0,0.2);*/
}

/*.pd_features .link_wrap1{
	inset: 0;
}*/
.pd_features .link_wrap1 {
    height: 40%;
    width: 37%;
    left: 10%;
    bottom: 28%;
    z-index: 4;
}
.pd_features .link_teiki{
	height: 4.5%;
	width: 94%;
	left: 3%;
	bottom: 2.7%;
}
/*===============================
各セクション調整
===============================*/
.pd_features section:not(:last-of-type){
	/*margin-bottom: 10%;*/
}
.pd_features #fv{
	margin-bottom: 7%;
}
.pd_features .last_copy{
	margin: 5% 0 0;
}

/*===============================
インクルード
===============================*/
/*SPEC背景色変更 */
.pd_features .lp_include {
    /*background: linear-gradient(135deg, #ffdeb3, #ffefbd);*/
    padding: 6% 0;
}
.pd_features .include_inner{
	/*background-color: #fff;*/
}
/*一商品余白調整 */
.pd_features .c-panel {
	/*margin-bottom: 2rem;
	background-color: #fff;*/
	position: relative;
	padding: /*5%*/2% 7%;
}

.pd_features .c-panel:not(:has(~ .c-panel)) {
	margin-bottom: 0;
}

/*テキストエリア*/	
.pd_features .c-panel__body {
	margin-top: 0px;
	max-width: 70%;
	margin-left: 20px;
}
/*商品画像の位置*/
.pd_features .c-panel__header {
	box-sizing: border-box;
	/*width: 145px;*/
	width: 180px;
}
/*商品画像の大きさ*/
.pd_features .c-panel__header__image {
	width: 100%;
	border: 5px solid #FFF;
	background-color: #fff;
	
}
	
/*価格の大きさ*/	
.pd_features .c-price {
        font-size: 2.5rem;
    }	
	
/*価格（余白確保してボタンに被るのを回避、並び方調整など）*/
.pd_features .c-panel__price-wrapper {
	/*margin-bottom: 4rem;*/
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap:1rem;
--space: 3px;
}
.pd_features .c-panel__desc{
	margin-bottom: 4.9rem;
}
/*割引率*/
.pd_features .c-panel__discount .badge.badge-red.c-label-discount {
    /* font-size: 1.4rem; */
    font-size: 2.5rem;
}
/*色変更----------------------------------------*/
/*割引率*/
.pd_features .badge-red {
    background-color: #ff276e;
}
/*割引後価格*/
.pd_features .c-price--sale {
    color: #ff3400;
}
/*送料無料回り*/	
.pd_features .border-red {
    border-color: #ff276e !important;
}
.pd_features .text-red {
    color: #ff276e !important;
}
.pd_features .border-red {
    border-color: #ff276e !important;
}
/*ボタン*/
.pd_features .btn-primary {
    background-color: #fa0200;
    /*background: linear-gradient(90deg, #ff2778, #ff276e, #ff6000);*/
    border-color: #ffffff;
}
	/*.pd_features .btn-primary {
    background-color: #0058aa;
    border-color: #ffffff00;
}*/
	
/*色変更----------------------------------------*/
/*ボタン位置*/	
.pd_features .c-panel__action {
	position: absolute;
	bottom: 0;
	right: 0;
}
/*商品とテキストを横並びに*/
.pd_features .c-panel__link{
	display: flex;
}

	
	
/*取り消し線を真ん中に*/
.pd_features .c-price-delete {
background: linear-gradient(
  to bottom,
  transparent calc(50% - 0.5px),
  #333 calc(50% - 0.5px),
  #333 calc(50% + 0.5px),
  transparent calc(50% + 0.5px)
);
}
.pd_features .more_btn{
	text-align: center;
	margin-top: 5%;
}

/*========================================
インクルード(画像なし)
========================================*/
/*全体の調整*/
.pd_features .cp_list_noimage{
	position: absolute;
	bottom: 8.5%;
	width: 100%;
}	
.pd_features .cp_list_noimage .c-panel{
background-color: #ffffff00;
text-align: center;
}
	
/*非表示*/	
.pd_features .cp_list_noimage .c-panel__header,
.pd_features .cp_list_noimage .c-panel__badge,
.pd_features .cp_list_noimage .c-panel__desc {
    display: none;
}
/*最大幅と余白調整*/		
.pd_features .cp_list_noimage .c-panel__body {
    max-width: 100%;
	margin-left: 0;
}
	
/*位置を真ん中に*/	
.pd_features .cp_list_noimage .c-panel__link {
    justify-content: center;
}
.pd_features .cp_list_noimage .c-panel__price-wrapper {
    justify-content: center;
}
	
/*ボタン位置-----------------------------------------------------------*/	
.pd_features .cp_list_noimage .c-panel__action button {
    flex: 1;
    position: relative;
}
.pd_features .cp_list_noimage .c-panel__action {
    position: static;
}

/*余白調整-----------------------------------------------------------*/	
.pd_features .cp_list_noimage .c-panel {
    padding: 0% 10%;
}
.pd_features .cp_list_noimage .c-panel__action {
    margin-top: 3%;
}

/*大きさ調整-----------------------------------------------------------*/
/*商品名*/
.pd_features .cp_list_noimage .c-panel__name {
    font-size: 3rem;
    font-weight: 500;
    color: #62544e;
}
/*価格*/	
.pd_features .cp_list_noimage .c-price {
        font-size: 4rem;
    }	
/*割引率*/
.pd_features .cp_list_noimage .c-panel__discount .badge.badge-red.c-label-discount {
    /* font-size: 1.4rem; */
    font-size: 4rem;
}
/*ボタン*/
.pd_features .cp_list_noimage .btn-sm {
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 1.6;
}	

/*========================================
スマホ対応
========================================*/
@media /*print,*/ screen and (max-width: 768px) {
	/* 全体 */
	.pd_features{
		max-width: 100%;
		width: 100%;
	}
	.pd_features .wrapper_big{
		width: 92vw;
		/*このLP用*/
		border: 3px solid #fa0200;
    border-radius: 1em;
		padding: 3% 0;
	}
	.pd_features .wrapper_middle{
		width: 86vw;
	}
   .pd_features .wrapper_small{
		width: 80vw;
	}

  .pd_features .image_03on,
  .pd_features .image_04on,
  .pd_features .image_05on,
  .pd_features .image_06on,
  .pd_features .image_07on {
    width: 100%;
    height: auto;
  }

  .pd_features .image_05on {
    top: -1.5em;
  }

	
	/*===============================
	インクルード
	===============================*/
	/*商品のまとめ（余白確保）*/
	.pd_features .item_wrapper{
		width: 92vw;
		margin: 0 auto;
		margin-top: 8%;
	}
	/*一商品*/		
	.pd_features .c-panel {
		/*padding: 4% 3%;*/
		padding: /*6%*/2% 4%;
	}
	/*商品画像*/
	.pd_features .c-panel__header {
		width: 110px;
	}
	/*タイトル余白調整*/
	.pd_features .item_title {
		margin-bottom: 3%;
	}

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

	/*価格下に余白確保（ボタンに被るのを回避）*/		
	.pd_features .c-panel__price-wrapper {
		margin-bottom: 3.9rem;
	}
	/*商品解説SPHは非表示に*/		
	.pd_features .c-panel__desc {
	display: none;
}

	/*割引率+期日のdiv*/
	.pd_features .c-panel__discount {
		flex-basis: 100%;/*（回り込み回避）*/
		--price-space: 2px;
	}
	/*価格の大きさ*/	
	.pd_features .c-price {
			font-size: 1.8rem;
    }	
	
	/*割引率*/
	.pd_features .c-panel__discount .badge.badge-red.c-label-discount {
		padding: 3px 5px;
		font-size: 1.8rem;
	}

	/*===============================
	インクルード(画像なし)
	===============================*/
	.pd_features .cp_list_noimage .c-panel__price-wrapper {
		line-height: 1;
	}

	.pd_features .cp_list_noimage {
		bottom: 5.5%;
	}
	/*商品名*/
	.pd_features .cp_list_noimage .c-panel__name {
		font-size: 1.6rem;
	}
	/*価格の大きさ*/	
	.pd_features .cp_list_noimage .c-price {
			font-size: 1.8rem;
		}	
	/*割引率*/
	.pd_features .cp_list_noimage .c-panel__discount .badge.badge-red.c-label-discount {
		/* font-size: 1.4rem; */
		font-size: 1.8rem;
	}
	.pd_features .cp_list_noimage .c-panel__price-wrapper {
			margin-bottom:0rem;
		}
	/*ボタン*/
	.pd_features .cp_list_noimage .btn-sm {
		font-size: 1.6rem;
		line-height: 1.2;
	}
	/* 単品たてinclude部分 */
  .pd_features .display_matrix {
    padding: 0 15%;
  }
}

/* PC表示 */
@media print, screen and (min-width: 768px) {
	/* 単品たてinclude部分 */
  .pd_features .display_matrix {
    padding: 0 20% 3% 20%;
  }
}

/* ふわっとアニメ */
/* 動作を適用する箇所 */
.fuwatAnime {
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  /* アニメ時間 */
  -ms-animation-duration: 1s;
  animation-duration: 1s;
  -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;
}
/* 動作内容 */
@-webkit-keyframes fuwatAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@keyframes fuwatAnime {
  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);
  }
}