@charset "utf-8";/**/
/* 全体 */
.dietsupple{
	max-width: 720px;
	margin: 0 auto;
}
.dietsupple .attention{
	font-size: 1em;
	margin-bottom: 2em;
	text-align: center;
	color: #ea3323;
}
.dietsupple .wrap{
  padding: 5% 7% 10% 7%;
}
/* result_page */
.dietsupple .result{
  color: #4b2c1c;
}
.dietsupple .reslut_in{
  padding-top: 0;
	font-size: 2em;
}
.dietsupple .reslut_in .whitebox{
  padding: 7%;
  font-size: 80%;
}
.dietsupple .reslut_in .whitebox p{
  margin-bottom: 0;
}
.dietsupple .whitebox{
  background-color: #fff;
  padding: 5%;
  border-radius: 10px;
  text-align: center;
  line-height: 1.6;
}
.dietsupple .mainreco_ttl{
  text-align: center;
  margin-top: -3em;
  margin-bottom: 0.25em;
}
.dietsupple .mainreco .whitebox{
  margin-bottom: 1em;
}
.dietsupple .prottl{
  font-size: 2.25em;
  font-weight: bold;
  line-height: 1.3;
}
.dietsupple .prottl span{
  display: block;
  font-size: 0.8em;
}
.dietsupple .proimg .name{
  font-weight: bold;
}
.dietsupple .proimg_sub{
  text-align: left;
}
/*.dietsupple .proimg_sub p{
	font-size: 1.3em;
}*/
.dietsupple .spport_in{
  border-bottom: 0.2em solid #fff;
}
.dietsupple .spport_in_ttl{
  text-align: center;
  line-height: 1.3;
	font-size: 2em;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.dietsupple .spport_in_ttl span{
  font-size: 1.2em;
}
.dietsupple .spport_in .whitebox{
  margin-bottom: 1em;
}
.dietsupple .spport_item{
  color: #fff;
  border-radius: 3em;
  padding: 0.2em;
  text-align: center;
	font-size: 2em;
  font-weight: bold;
  margin-bottom: 0.65em;
}

/* 結果タイプ別 */
/* ===== 01 ===== */
.diet01 .mainbg, .diet01 .mainreco{background-color: #ffd802;}
.diet01 .line{background: linear-gradient(transparent 50%, #ffd80280 50%); display: inline;}
.diet01 .spport_in{background-color: #ffd80230;}
.diet01 .prottl, .diet01 .spport_in_ttl{color: #ecb202; /*margin-bottom: 0.5em;*/}
.diet01 .spport_in .whitebox{border: 3px solid #ffd802;}
.diet01 .spport_item{background: #ecb202;}
/* ===== 02 ===== */
.diet02 .mainbg, .diet02 .mainreco{background-color: #93de91;}
.diet02 .line{background: linear-gradient(transparent 50%, #93de9180 50%); display: inline;}
.diet02 .spport_in{background-color: #93de9130;}
.diet02 .prottl, .diet02 .spport_in_ttl{color: #55c152; /*margin-bottom: 0.5em;*/}
.diet02 .spport_in .whitebox{border: 3px solid #93de91;}
.diet02 .spport_item{background: #55c152;}
/* ===== 03 ===== */
.diet03 .mainbg, .diet03 .mainreco{background-color: #91debc;}
.diet03 .line{background: linear-gradient(transparent 50%, #91debc80 50%); display: inline;}
.diet03 .spport_in{background-color: #91debc30;}
.diet03 .prottl, .diet03 .spport_in_ttl{color: #52c18b; /*margin-bottom: 0.5em;*/}
.diet03 .spport_in .whitebox{border: 3px solid #91debc;}
.diet03 .spport_item{background: #52c18b;}
/* ===== 04 ===== */
.diet04 .mainbg, .diet04 .mainreco{background-color: #b996c2;}
.diet04 .line{background: linear-gradient(transparent 50%, #b996c270 50%); display: inline;}
.diet04 .spport_in{background-color: #b996c230;}
.diet04 .prottl, .diet04 .spport_in_ttl{color: #865894; /*margin-bottom: 0.5em;*/}
.diet04 .spport_in .whitebox{border: 3px solid #b996c2;}
.diet04 .spport_item{background: #865894;}
/* ===== 05 ===== */
.diet05 .mainbg, .diet05 .mainreco{background-color: #fbb461;}
.diet05 .line{background: linear-gradient(transparent 50%, #fbb46180 50%); display: inline;}
.diet05 .spport_in{background-color: #fbb46130;}
.diet05 .prottl, .diet05 .spport_in_ttl{color: #f77f25; /*margin-bottom: 0.5em;*/}
.diet05 .spport_in .whitebox{border: 3px solid #fbb461;}
.diet05 .spport_item{background: #f77f25;}
/* ===== 06 ===== */
.diet06 .mainbg, .diet06 .mainreco{background-color: #f9a0bb;}
.diet06 .line{background: linear-gradient(transparent 50%, #f9a0bb80 50%); display: inline;}
.diet06 .spport_in{background-color: #f9a0bb30;}
.diet06 .prottl, .diet06 .spport_in_ttl{color: #f36489; /*margin-bottom: 0.5em;*/}
.diet06 .spport_in .whitebox{border: 3px solid #f9a0bb;}
.diet06 .spport_item{background: #f36489;}
/* ===== 07 ===== */
.diet07 .mainbg, .diet07 .mainreco{background-color: #ffb38e;}
.diet07 .line{background: linear-gradient(transparent 50%, #ffb38e80 50%); display: inline;}
.diet07 .spport_in{background-color: #ffb38e30;}
.diet07 .prottl, .diet07 .spport_in_ttl{color: #ff7e4f; /*margin-bottom: 0.5em;*/}
.diet07 .spport_in .whitebox{border: 3px solid #ffb38e;}
.diet07 .spport_item{background: #ff7e4f;}
/* ===== 08 ===== */
.diet08 .mainbg, .diet08 .mainreco{background-color: #f59797;}
.diet08 .line{background: linear-gradient(transparent 50%, #f5979780 50%); display: inline;}
.diet08 .spport_in{background-color: #f5979730;}
.diet08 .prottl, .diet08 .spport_in_ttl{color: #eb5959; /*margin-bottom: 0.5em;*/}
.diet08 .spport_in .whitebox{border: 3px solid #f59797;}
.diet08 .spport_item{background: #eb5959;}


/* もう一度診断ボタン */
.dietsupple .againbtn {
  text-align: center;
  transition: 0.3s all;
  width: 60%;
  margin: 1.5em auto 2em auto;
}
.dietsupple .againbtn:hover {
  opacity: 0.7;
}
/* 結果タイプ一覧 */
.dietsupple .dietsupple_type {
	display: flex!important;
	gap: 5px;
	padding: 0 10px;
	flex-direction: row;
	justify-content: center;
}

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

/*ボタン位置*/
.dietsupple .c-panel__action{
  position: absolute;
  bottom: 0;
  right: 0;
	width: 40%;
}
/*商品とテキストを横並びに*/
.dietsupple .c-panel__link{
  display: flex;
}
/*取り消し線を真ん中に*/
.dietsupple .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));
}

/*商品SPEC たて------------------------------ */
.dietsupple .tate .c-panel{
  position: relative;
  /*padding: 3% 7%;*/
}
.dietsupple .tate .c-panel__price-wrapper{
	justify-content: center;
}

/*商品とテキストを縦並びに*/
.dietsupple .tate .c-panel__link{
  display: flex;
	flex-direction: column;
	align-items: center;
}
/*商品画像のサイズ*/
.dietsupple .tate .c-panel__header{
  width: 60%;
}
/*テキストエリア*/
.dietsupple .tate .c-panel__body{
	text-align: center;
	margin-top: 2%;
	max-width: 100%;
	margin-left: 0;
	margin-bottom: 1em;
}
.dietsupple .tate .c-panel__badge{
	justify-content: center;
}
.dietsupple .tate .c-panel__name{
	font-size: 1.4rem;
}

/*ボタン位置*/
.dietsupple .tate .c-panel__action{
	left: 50%;
	transform: translateX(-50%);/**/
	width: 100%;
}
/*ボタン幅*/
.dietsupple .tate .btn-primary{
	/*width: 100%!important;*/
}

/* sp表示------------------------------ */
@media screen and (max-width: 768px) {
	/* 全体 */
	.dietsupple{
		max-width: 100%;
		width: 100%;
	}
	.dietsupple .result {
  font-size: 1.2em;
	}
	.dietsupple .reslut_in {
		font-size: 0.9em;
		padding-bottom: 3.5em;
	}
	.dietsupple .againbtn {
  width: 80%;
  margin: 1em auto 2em auto;
	}
	.dietsupple .attention{
		font-size: 80%;
	}
	.dietsupple .proimg_sub{
    font-size: 1em;
    text-align: left;
		padding: 0.2em 0;
  }
/*.dietsupple .proimg_sub p{
    font-size: 1em;
  }*/
  .dietsupple .reslut_in .whitebox{
    text-align: left;
    font-size: 100%;
  }
	.dietsupple .spport_item, .dietsupple .prottl{
		font-size: 1.5em;
  }
	.dietsupple .spport_in_ttl{
		font-size: 1.35em;
  }
	
/*商品SPEC よこ------------------------------ */
  /*商品のまとめ（余白確保）*/
  .dietsupple .item_wrapper{
    width: 92vw;
    margin: 0 auto;
    margin-top: 8%;
  }
  /*一商品*/
  .dietsupple .c-panel{
    padding: 2%;
  }
  /*商品画像*/
  .dietsupple .c-panel__header{
    width: 37%;
  }
  /*タイトル余白調整*/
  .dietsupple .group_title{
    margin-bottom: 3%;
  }
  /*テキスト領域*/
  .dietsupple .c-panel__body{
    width: 63%;
    margin-left: 1.2rem;
  }
  /*商品名*/
  .dietsupple .c-panel__name{
    font-size: 1.4rem;
  }
  .dietsupple .proimg_sub .c-panel__name{
    font-size: 85%;/**/
    line-height: 1.25;
  }
  /*ボタン*/
  .dietsupple .btn-sm, .dietsupple .more_btn .btn.btn-sm.btn-outline-primary{
    font-size: 1.4rem;
  }
	/*ボタン位置*/
.dietsupple .c-panel__action{
	width: 50%;
}
  /*価格下に余白確保（ボタンに被るのを回避）*/
  .dietsupple .c-panel__price-wrapper{
    margin-bottom: 3.9rem;
  }
  /*商品解説SPHは非表示に*/
  .dietsupple .c-panel__desc{
    display: none;
  }
  /*割引率+期日のdiv*/
  .dietsupple .c-panel__discount{
    flex-basis: 100%; /*（回り込み回避）*/
    --price-space: 2px;
  }
  /*価格の大きさ*/
  .dietsupple .c-price{
    font-size: 2.5rem;
  }
  /*割引率*/
  .dietsupple .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%;
}
	
/*商品SPEC たて------------------------------ */
	.dietsupple .tate .c-panel__action {
    left: 0;
    transform:none;
}
	/*テキストエリア*/
.dietsupple .tate .c-panel__body{
	margin-bottom: 0.5em;
	width: 100%;
}

}
/* pc表示------------------------------ */
@media screen and (min-width: 768px){
	.triangle_ttl{
		font-size: 130%;
	}
}