@charset "utf-8"; /**/
/* 全体 */
.l-main{
  /*padding-bottom: 0 !important;*/
}
.supplement_selection{
	margin: 0 auto;
	max-width: 720px;
}
.supplement_selection h2{margin-bottom: 5%;}
.supplement_selection .attention{
	font-size: 80%;
	padding: 0 3%;
	text-align: left
}
.supplement_selection .box_recs .attention{
	padding: 3% 0 0 0;
}
.supplement_selection .box_recs{
	padding: 2px; 
	margin-top: 2%;
}
.supplement_selection .box_recs_in{
	padding: 5%;
	text-align: center;
}
.box_recs_other{
	margin-top: 8%;
	padding: 3% 0;
}
.box_recs_other .item_spec{
	background-color: #ffffff;
	margin: 3%;
	padding: 5%;
}
.txt01{
	text-align: left;
}
.txt02{
	margin: 6% auto 1% auto;
	letter-spacing: 3px;
	font-size: 22.4px;
	text-align: center;
	color: #574842;
}
.txt02:nth-child(1){
	margin: 2% auto 1% auto;
}
.txt03{
	margin: 0 auto 3% auto;
	padding: 1% 0;
	color: #ffffff;
	font-size: 28px;
	font-weight: bold;
	text-align: center;
	line-height: 1.15;
}
.txt03_small{
	font-size: 60%;
	font-weight: normal
}
.marker {
  background: #feff6e;
}
.mt{
	margin-top: 2em;
}


/* backno */
.backno_t{
  margin: 5% auto 2% auto;
  padding: 0 0 2% 0;
  text-align: center;
  border-bottom: dashed 2px #d0d0d0;
}
.backno_t img{
  width: 40%;
}


/*===============================
wrapper（横幅調整）
===============================*/
.supplement_selection, .supplement_selection .wrapper_big, .supplement_selection .wrapper_middle, .supplement_selection .wrapper_small{
  margin-inline: auto;
}
.supplement_selection .wrapper_big{
	width: 720px/*662px*/;
	/*border: 14px solid #f4efea;*/
}
.supplement_selection .wrapper_middle{
  width: 620px;
}
.supplement_selection .wrapper_small{
  width: 540px;
}
/*===============================
各セクション調整
===============================*/
/*fv---------------------*/
.supplement_selection #fv{
  margin-bottom: 10%;
}
.supplement_selection .fv_img{
  margin-bottom: 5%;
}
/*メイン-----------------*/
.supplement_selection .group:not(:last-of-type){
  margin-bottom: 15%;
}

/*===============================
インクルード横
===============================*/
/*一商品余白調整 */
.supplement_selection .c-panel{
  /* margin-bottom: 2rem;*/
  background-color: #ffffff;
  position: relative;
  padding: 3%;
}
.supplement_selection .c-panel:not(:has(~ .c-panel)){
  margin-bottom: 0;
}
/*テキストエリア*/
.supplement_selection .c-panel__body{
  margin-top: 0px;
  max-width: 70%;
  margin-left: 20px;
}
/*商品画像の位置*/
.supplement_selection .c-panel__header{
  box-sizing: border-box;
  /*width: 145px;*/
  width: 150px;
}
/*商品画像の大きさ*/
.supplement_selection .c-panel__header__image{
  width: 100%;
  border: 5px solid #ffffff;
  background-color: #ffffff;
}
/*価格の大きさ*/
.supplement_selection .c-price{
  font-size: 2.5rem;
}
/*価格（余白確保してボタンに被るのを回避、並び方調整など）*/
.supplement_selection .c-panel__price-wrapper{
  margin-bottom: 5rem;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 1rem;
  --space: 3px;
}
.supplement_selection .c-panel__desc{
  margin-bottom: 4.9rem;
  display: none;
}
/*割引率*/
.supplement_selection .c-panel__discount .badge.badge-red.c-label-discount{
  /* font-size: 1.4rem; */
  font-size: 2.5rem;
}
/*色変更----------------------------------------*/
/*割引率
.supplement_selection .badge-red{
    background-color: #00afdd;
}*/
/*割引後価格
.supplement_selection .c-price--sale{
    color: #00afdd;
}*/
/*送料無料回り
.supplement_selection .border-red{
    border-color: #00afdd !important;
}
.supplement_selection .text-red{
    color: #00afdd !important;
}
.supplement_selection .border-red{
    border-color: #00afdd !important;
}*/
/*ボタン
.supplement_selection .btn-primary{
    background-color: #0058aa;
    background: linear-gradient(90deg, #ff6f9b, #ff7743);
    border-color: #ffffff00;
}*/
/*.supplement_selection .btn-primary{
    background-color: #0058aa;
    border-color: #ffffff00;
}*/
/*色変更----------------------------------------*/
/*ボタン位置*/
.supplement_selection .c-panel__action{
  position: absolute;
  bottom: 0;
  right: 0;
}
/*商品とテキストを横並びに*/
.supplement_selection .c-panel__link{
  display: flex;
}
/*取り消し線を真ん中に*/
.supplement_selection .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));
}

/*===============================
インクルードたて
===============================*/
.supplement_selection .tate .c-panel{
  position: relative;
  padding: 3% 7%;
}
.supplement_selection .tate .c-panel__price-wrapper{
	justify-content: center;
}

/*商品とテキストを縦並びに*/
.supplement_selection .tate .c-panel__link{
  display: flex;
	flex-direction: column;
	align-items: center;
}
/*商品画像のサイズ*/
.supplement_selection .tate .c-panel__header{
  width: 60%;
}
/*テキストエリア*/
.supplement_selection .tate .c-panel__body{
	text-align: center;
	margin-top: 2%;
	max-width: 100%;
	margin-left: 0;
}
.supplement_selection .tate .c-panel__badge{
	justify-content: center;
}
/*ボタン位置*/
.supplement_selection .tate .c-panel__action{
	left: 50%;
	transform: translateX(-50%);	
}
/*ボタン幅*/
.supplement_selection .tate .btn-primary{
	width: 100% !important;
}

/* 以下、各Volの個別設定 */
/*Vol01*/
.selection_vol01 .box_recs{border: 3px solid #c7da9a;}
.selection_vol01 .box_recs_in{border: 2px solid #d9e7bc;}
.selection_vol01 .txt03{background-color: #c0c700;}
.selection_vol01 .box_recs_other{background-color: #d9e7bc;}
.selection_vol01 .btn-primary, .selection_vol01 .btn-primary:hover{background-color: #5a8d3a; border-color: #5a8d3a;}

/*Vol02*/
.selection_vol02 .box_recs{border: 3px solid #c7da9a;}
.selection_vol02 .box_recs_in{border: 2px solid #d9e7bc;}
.selection_vol02 .txt03{background-color: #8fc35b;}
.selection_vol02 .box_recs_other{background-color: #d9e7bc;}
.selection_vol02 .btn-primary, .selection_vol02 .btn-primary:hover{background-color: #ff7900; border-color: #ff7900;}

/*Vol03*/
.selection_vol03 .box_recs{border: 3px solid #89dae2;}
.selection_vol03 .box_recs_in{border: 2px solid #ade5e7;}
.selection_vol03 .txt03{background-color: #83ccd3;}
.selection_vol03 .box_recs_other{background-color: #e0f6f7;}
.selection_vol03 .btn-primary, .selection_vol03 .btn-primary:hover{background-color: #0094a2; border-color: #0094a2;}

/*Vol04*/
.selection_vol04 .box_recs{border: 3px solid #f4a8b0;}
.selection_vol04 .box_recs_in{border: 2px solid #f7c5cb;}
.selection_vol04 .txt03{background-color: #f4a8b0;}
.selection_vol04 .box_recs_other{background-color: #fceae0;}
.selection_vol04 .btn-primary, .selection_vol04 .btn-primary:hover{background-color: #c1b506; border-color: #c1b506;}

/*Vol05*/
.selection_vol05 .box_recs{border: 3px solid #f7c5da;}
.selection_vol05 .box_recs_in{border: 2px solid #f9d8e7;}
.selection_vol05 .txt03{background-color: #bba1ab;}
.selection_vol05 .box_recs_other{background-color: #ffe4ef;}
.selection_vol05 .btn-primary, .selection_vol05 .btn-primary:hover{background-color: #e170a1; border-color: #e170a1;}

/*Vol06*/
.selection_vol06 .box_recs{border: 3px solid #ffb79b;}
.selection_vol06 .box_recs_in{border: 2px solid #ffd2c0;}
.selection_vol06 .box_recs_in ul{
	display: flex;
	flex-direction: row;
	gap: 10px !important;
}
.selection_vol06 .box_recs_in li{
	width: calc((100% - 10px) / 2);
	box-sizing: border-box;}
.selection_vol06 .box_recs_in .display_focus{width: 106%;}
.selection_vol06 .txt03{background-color: #fcab8d;}

.selection_vol06 .box_recs_other{background-color: #ffeddb;}
.selection_vol06 .ninsin{border-bottom: #e15093 2px dotted;border-top: #e15093 2px dotted;color: #e15093;padding: 2%;font-size: 120%;}
.selection_vol06 .jyunyu{border-bottom: #ffb79c 2px dotted; border-top: #ffb79c 2px dotted; color: #ff8757; padding: 2%; font-size: 120%;}
.selection_vol06 .btn-primary, .selection_vol06 .btn-primary:hover{background-color: #ed766a; border-color: #ed766a;}

/*Vol07*/
.selection_vol07 .box_recs{border: 3px solid #e3c4f1;}
.selection_vol07 .box_recs_in{border: 2px solid #ecd7f6;}
.selection_vol07 .txt03{background-color: #debbef;}
.selection_vol07 .box_recs_other{background-color: #fcf6ff;}
.selection_vol07 .btn-primary, .selection_vol07 .btn-primary:hover{background-color: #ec607e; border-color: #ec607e;}

/*Vol08*/
.selection_vol08 .box_recs{border: 3px solid #f8d066;}
.selection_vol08 .box_recs_in{border: 2px solid #fbdf99;}
.selection_vol08 .txt03{background-color: #f8d066;}
.selection_vol08 .box_recs_other{background-color: #f8eed7;}
.selection_vol08 .btn-primary, .selection_vol08 .btn-primary:hover{background-color: #ec7423; border-color: #ec7423;}

/*Vol09*/
.selection_vol09 .box_recs{border: 3px solid #87c2e4;}
.selection_vol09 .box_recs_in{border: 2px solid #bddcee;}
.selection_vol09 .txt03{background-color: #4f9ebf;}
.selection_vol09 .box_recs_other{background-color: #ebf3f9;}
.selection_vol09 .btn-primary, .selection_vol09 .btn-primary:hover{background-color: #3c3d3f; border-color: #3c3d3f;}

/*Vol10*/
.selection_vol10 .box_recs{border: 3px solid #9cd8ce;}
.selection_vol10 .box_recs_in{border: 2px solid #bde5de;}
.selection_vol10 .txt03{background-color: #69b9ab;}
.selection_vol10 .box_recs_other{background-color: #def5f1;}
.selection_vol10 .btn-primary, .selection_vol10 .btn-primary:hover{background-color: #e564a2; border-color: #e564a2;}

/*Vol11*/
.selection_vol11 .box_recs{border: 3px solid #ff9566;}
.selection_vol11 .box_recs_in{border: 2px solid #ffb899;}
.selection_vol11 .txt03{background-color: #f9a47e;}
.selection_vol11 .box_recs_other{background-color: #ffeae1;}
.selection_vol11 .btn-primary, .selection_vol11 .btn-primary:hover{background-color: #ed6946; border-color: #ed6946;}

/*Vol12*/
.selection_vol12 .box_recs{border: 3px solid #9ea9df;}
.selection_vol12 .box_recs_in{border: 2px solid #bfc5ea;}
.selection_vol12 .txt03{background-color: #7a85c5;}
.selection_vol12 .box_recs_other{background-color: #dde0f5;}
.selection_vol12 .btn-primary, .selection_vol12 .btn-primary:hover{background-color: #ea496b; border-color: #ea496b;}

/* box_border Vol05 */
.box_border{border: 2px #CECECE solid; padding: 3%; text-align: left;}
.box_border img{float: right;}

/* #column_2 Vol06用2列 */
#column_2 .c-panel{margin-top: 1rem;}
#column_2 .c-panel__link {
  display: block;
  margin-bottom: -15px;
}
#column_2 .c-panel__header {
  width: 100%;
  margin-left: 0%;
margin-bottom: 5px;
}
#column_2 .c-panel__body {
    margin-top: 0px;
    max-width: 100%;
}
#column_2 .c-panel__badge {display: block;}
/*#column_2 .c-panel__name {
  font-size: 2.2rem;
  text-align: center;
}*/
#column_2 .c-panel__price-wrapper{
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 3rem;
}
#column_2 .c-panel__action {
	position: static;
}
/*#column_2 .c-price {
  font-size: 3rem;
  text-align: center;
}
#column_2 .c-panel__action {margin-top: 15px;}
#column_2 .c-panel__action .btn {
  width: 220px;
  margin-left: 15%;
  margin-right: 15%;
  padding: 5px;
}*/

/*バックナンバー*/
.box_backno{
    }
.box_backno ul{
	display: flex;
	flex-wrap: wrap;
	gap: 10px !important;
	padding: 1rem 0;
	list-style: none;
	}
.box_backno li{
	width: calc((100% - 30px) / 4);
	box-sizing: border-box;
}
.box_backno li img{
	border-radius: 16px;
}

/* sp表示------------------------------ */
@media screen and (max-width: 768px){
  /* 全体 */
  .supplement_selection{
    max-width: 100%;
    width: 100%;
  }
	.supplement_selection .box_recs{
		margin: 2%;
	}
	.txt02{
		letter-spacing: 0px;
		font-size: 120%;
    }
	.txt03{
		font-size: 120%;
		letter-spacing: 0px;
	}
	.mt{
	margin-top: 1.25em;
	}
  .supplement_selection .wrapper_big{
    width: 92%;
  }
  .supplement_selection .wrapper_middle{
    width: 86%;
  }
  .supplement_selection .wrapper_small{
    width: 80%;
  }
  /*===============================
	インクルード
	===============================*/
  /*商品のまとめ（余白確保）*/
  .supplement_selection .item_wrapper{
    width: 92vw;
    margin: 0 auto;
    margin-top: 8%;
  }
  /*一商品*/
  .supplement_selection .c-panel{
    padding: 2%;
  }
  /*商品画像*/
  .supplement_selection .c-panel__header{
    width: 110px;
  }
  /*タイトル余白調整*/
  .supplement_selection .group_title{
    margin-bottom: 3%;
  }
  /*テキスト領域*/
  .supplement_selection .c-panel__body{
    max-width: 63%;
    margin-left: 1.2rem;
  }
  /*商品名*/
  .supplement_selection .c-panel__name{
    font-size: 1.4rem;
  }
  /*ボタン*/
  .supplement_selection .btn-sm, .supplement_selection .more_btn .btn.btn-sm.btn-outline-primary{
    font-size: 1.4rem;
  }
  /*価格下に余白確保（ボタンに被るのを回避）*/
  .supplement_selection .c-panel__price-wrapper{
    margin-bottom: 3.9rem;
  }
  /*商品解説SPHは非表示に*/
  .supplement_selection .c-panel__desc{
    display: none;
  }
  /*割引率+期日のdiv*/
  .supplement_selection .c-panel__discount{
    flex-basis: 100%; /*（回り込み回避）*/
    --price-space: 2px;
  }
  /*価格の大きさ*/
  .supplement_selection .c-price{
    font-size: 1.8rem;
  }
  /*割引率*/
  .supplement_selection .c-panel__discount .badge.badge-red.c-label-discount{
    padding: 3px 5px;
    font-size: 1.8rem;
  }
	.box_recs_other .item_spec{
	margin: 3%;
	padding: 5%;
}

	/**たて**/
	.supplement_selection .tate .c-panel__action {
    left: 0;
    transform:none;
}
	/* #column_2 */
#column_2 .c-panel__name {font-size: 1.4rem!important;}
#column_2 .c-panel__price-wrapper{margin-bottom: 1rem;}

/*バックナンバー*/
	.box_backno ul{
		padding: 3%;
		justify-content: space-evenly;
	}
	.box_backno li{
		width: calc((100% - 20px) / 2);
		box-sizing: border-box;
}
	.box_backno li img{
	border-radius: 12px;
}
	
}
/* pc表示------------------------------ */
@media screen and (min-width: 768px){
  .c-panel__header__image{
    width: 220px;
  }
		.btn-sm{
		padding: 10px 50px !important;
	}
}