@charset "UTF-8"; /**/
/* BASE */
.pB1 {
  padding-bottom: 1%;
}
.pB3 {
  padding-bottom: 3%;
}
.pB5 {
  padding-bottom: 5%;
}
.pB7 {
  padding-bottom: 7%;
}
.w85 {
  width: 85%;
}
#caloriepon .attention p {
  text-align: right;
  padding: 3%;
  color: #515151;
  font-size: 1.3rem;
}

/****** Top Page ******/
#caloriepon {
  text-align: center;
  background-color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  padding-bottom: 3%;
  overflow: hidden;
}

#caloriepon .main01_02bg {
  background-image: url("../images/bg.png");
  background-position: center;
}

#caloriepon a img {
  transition: 0.2s;
}
#caloriepon a:hover {
  cursor: pointer;
}

/****** position 全体の位置調整 ******/
#caloriepon div[class^="main0"] {
  position: relative;
}

#caloriepon .item_70034,
#caloriepon .main04_01 {
  position: absolute;
}

/****** main_01　ファーストビュー ******/

#caloriepon .item_70034 {
  right: 3%;
  bottom: 10%;
  width: 43%;
  box-shadow: 10px 10px 10px rgb(238 177 89 / 50%);
}

/****** main_02　単品カート ******/

#caloriepon .spec_teiki {
  position: relative;
}
#caloriepon .spec_teiki .btns {
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 62%;
}
/****** main_04　成分説明 ******/
#caloriepon .main04_01 {
  top: -15%;
  left: 0;
}

#caloriepon .main04_position {
  padding-top: 80%;
  padding-bottom: 8%;
}
#caloriepon .main04_position .item_70034 {
  right: 6%;
  bottom: -3%;
  width: 46%;
  transform: rotate(15deg);
  box-shadow: 10px 10px 10px rgb(238 177 89 / 50%);
}
#caloriepon .main04_06bg {
  background-image: url(../images/bg.png);
  background-position: 0px 490px;
}
/****** main_05　機能性表示食品 ******/
#caloriepon .main05 {
  background-color: #fff;
  margin: 3%;
  padding: 3%;
  box-shadow: 10px 10px 10px rgb(238 177 89 / 50%);
}

#caloriepon h3 {
  background-color: #ff8f04;
  color: #fff;
  display: block;
  font-size: 2em;
  font-weight: bold;
  padding: 2%;
}

#caloriepon .main05 p {
  font-size: 16.8px;
  line-height: 1.8em;
  width: 650px;
  margin-bottom: 20px;
}

.badge.badge-red.c-label-discount {
  width: 55px;
  font-size: 13px;
}

/*価格 修正線*/
.c-price-delete {
  background: linear-gradient(
    transparent 0px,
    rgb(0, 0, 0) 0px,
    rgb(0, 0, 0) 0px,
    transparent 0px
  ) !important;
}

.c-price-delete .d-inline-block {
  text-decoration: line-through;
  text-decoration-color: #333;
  text-decoration-thickness: 1px;
}

.c-price-delete-yen {
  display: inline-block;
  position: relative;
  z-index: 1;
  /*background: white;*/
  /* 線を隠す背景 */
  padding: 0 2px;
}

@media screen and (max-width: 768px) {
  #caloriepon .main05 p {
    font-size: 12.9px !important;
  }
}

#caloriepon .main05 li {
  font-size: 14px;
  line-height: 1.5em;
  width: 650px;
}

@media screen and (max-width: 768px) {
  #caloriepon .main05 li {
    font-size: 11.2875px !important;
  }
}

#caloriepon p,
#caloriepon li {
  text-align: left;
  width: 380px;
}

@media screen and (max-width: 768px) {
  #caloriepon p,
  #caloriepon li {
    width: auto;
    max-width: 100%;
  }
}

.c-panel__discount {
  --price-space: 0px;
}

/****** main_06　比較表・2SPEC周り ******/
.main06 {
  background-color: rgba(240, 225, 54, 0.6);
}

/****** main_02　商品インクルード ******/
#caloriepon .goods_set {
  display: flex;
  margin: 1% 1%;
}
#caloriepon .goods_set {
  padding: 2% 4% 2% 7%;
}
#caloriepon .name {
  font-weight: bold;
  font-size: 1.1em;
}
#caloriepon .name_box {
  margin-bottom: 0.5em;
}
#caloriepon .txt_box {
  font-size: 1.1em;
  flex: 2;
  text-align: left;
}

/********** 商品インクルード **********/
/* 画像位置調整 */
#caloriepon .c-panel__link {
  display: inline-flex;
}

.c-panel__desc {
  display: none;
}

#caloriepon .c-panel__header {
  padding-right: 3%;
  margin-top: 8px;
  margin-bottom: auto;
}

/* 商品名、受取方法、価格 */
#caloriepon .c-panel__body {
  justify-content: center;
  flex: 2;
  margin-top: 0;
}

/* 価格色調整 */
#caloriepon .c-panel__price-wrapper {
  color: #f30;
}

/********** 商品インクルード **********/

#caloriepon .btn {
  width: 40%;
  margin-left: auto;
}

#caloriepon .copy {
  display: none;
}
#caloriepon .btn {
  /* width: 70%; */
  background-image: url(../images/spec_btn_before.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: auto;
  /* margin-top: 1em; */
  transition: 0.2s;
  border-radius: 0px;
}

#caloriepon .btn {
  border: none;
  color: transparent;
  background-color: transparent;
  height: 48px;
}

#caloriepon .btn a {
  display: block;
  padding-top: 6%; /*ボタンの画像サイズによって調整*/
}
#caloriepon .btn:hover {
  opacity: 0.7;
}
#caloriepon .btn p {
  opacity: 0;
}
.btn a {
  text-decoration: none;
}

p {
  margin-bottom: 10px;
}
/*
カートの数量が見切れる為コメント
a {
    overflow: hidden;
}
*/

/* テンプレート ------------------- */
img {
  max-width: 100%;
  object-fit: contain /*縦横比保持*/;
}

/* 画像が左寄せになっていたので中央に修正*/
.l-main {
  text-align: center;
}

/* テンプレート ------------------- */
@media print, screen and (min-width: 768px) {
  #caloriepon {
    width: 720px;
    margin: 0 auto;
  }
  #caloriepon .c-price {
    font-size: 3rem;
  }
  /* ボタンを無理やり上にあげる */
  #caloriepon .c-panel__action {
    margin-top: -40px;
    margin-right: 30px;
    position: relative;
    z-index: 1;
    width: 115%;
  }
}

/*   スマホ　　*/
@media print, screen and (max-width: 768px) {
  .l-main {
    /* margin: 0 15px 0 0;*/
  }
  /* SP表示 */
  .pB1 {
    padding-bottom: 3%;
  }
  .pB3 {
    padding-bottom: 5%;
  }
  .pB7 {
    padding-bottom: 5%;
  }
  .w60 {
    width: 60%;
  }
  .w90 {
    width: 90%;
  }
  #caloriepon .attention p {
    font-size: 0.7rem;
  }
  #caloriepon .img_box {
    flex: 1.3;
    padding-right: 0%;
  }
  #caloriepon .txt_box {
    margin-left: 3%;
    font-size: 0.8em;
  }

  #caloriepon .main05 li {
    font-size: 0.7em;
  }
  #caloriepon .main05 p {
    font-size: 0.8em;
  }
  #caloriepon h3 {
    font-size: 1em;
  }
  #caloriepon .main05 {
    margin: 3% 3% 13%;
    padding: 3% 3% 5%;
  }
  #caloriepon .main04_01 {
    width: 60%;
  }
  #caloriepon .item_70034 {
    bottom: 16%;
  }
  #caloriepon .main01_02bg {
    background-position: 0px 240px;
    background-size: 150%;
  }
  #caloriepon .btn {
    margin-left: 65%;
    height: 25px;
  }

  #caloriepon .c-panel__action {
    margin-top: -10px;
    margin-right: -150px;
    position: relative;
    z-index: 1;
  }
  #caloriepon .c-panel__badge .badge {
    font-size: 0.8rem;
  }
  #caloriepon .c-panel__name {
    font-size: 1.5rem;
    margin-bottom: 0px;
  }
  #caloriepon .c-price {
    font-size: 1.1rem;
  }
}

.c-price-delete {
  color: #666;
}

.c-panel\_\_discount-period {
  font-size: 11.5px;
  color: #333;
}

@media screen and (max-width: 768px) {
  .c-panel\_\_discount-period {
    font-size: 9.675px;
    color: #333;
  }
}

#caloriepon .c-price-delete {
  line-height: 1.2; /* もしくは font-size と同値 */
}

@media screen and (max-width: 768px) {
  #caloriepon .c-price-delete {
    line-height: 1.5; /* もしくは font-size と同値 */
  }
}

#caloriepon .c-price {
  font-size: 17.4px;
}

@media screen and (max-width: 768px) {
  #caloriepon .c-price {
    font-size: 15.4px;
  }
}

#caloriepon .c-price-delete {
  font-size: 13.1px;
}

@media screen and (max-width: 768px) {
  #caloriepon .c-price-delete {
    font-size: 11.6px;
  }
}

#caloriepon .c-panel__badge .badge {
  position: relative;
  top: 3px; /* 2〜4px で微調整 */
}

@media screen and (max-width: 768px) {
  #caloriepon .c-panel__price-wrapper {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* 価格行をflex化（PC/SP共通の土台） */
#caloriepon .c-panel__price-wrapper {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: nowrap; /* PCは基本1行 */
}

/* float指定が残っているとflexが効かないので強制解除 */
#caloriepon .c-price-delete,
#caloriepon .c-price--sale,
#caloriepon .c-panel__badge,
#caloriepon .c-panel__discount-period {
  float: none !important;
  width: auto !important;
  /* margin: 0 !important; */
}

/* 割引表示は途中で割れないようにする（"2 / 月4日..." 対策） */
#caloriepon .c-panel__badge .badge,
#caloriepon .c-panel__discount-period {
  white-space: nowrap;
  margin-left: 5px;
}

/* スマホ：折り返しは許可。ただし割引＋期限は同じ行で固める */
@media screen and (max-width: 768px) {
  #caloriepon .c-panel__price-wrapper {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* 旧価格と新価格は1行目に並べる */
  #caloriepon .c-price-delete,
  #caloriepon .c-price--sale {
    flex: 0 0 auto;
  }

  /* 割引(10%off)＋期限はまとめて右側に来やすくする */
  #caloriepon .c-panel__badge,
  #caloriepon .c-panel__discount-period {
    flex: 0 0 auto;
  }
}

/* 価格ブロックだけを安全に整列（SPもPCも崩れにくい） */
#caloriepon .c-panel__price-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0px 15px; /* 縦 横 */
  --space: 0;
}

/* 旧価格+新価格を1行目に固定 */
#caloriepon .c-price-delete,
#caloriepon .c-price--sale {
  flex: 0 0 auto;
}

/* 割引と期限は2行目にまとめて並べる（幅100%で行を分ける） */
#caloriepon .c-panel__badge {
  flex: 0 0 auto;
}

.c-panel__discount-period {
  flex: 0 0 auto;
  white-space: nowrap; /* 「2 / 月…」みたいな割れ防止 */
}

/* 2行目を強制的に次の行から始める“折り返しブレーカー” */
#caloriepon .c-panel__badge {
  margin-left: 0;
}
#caloriepon .c-panel__badge::before {
  content: "";
  flex-basis: 100%;
  width: 0;
  height: 0;
}

@media print, screen and (max-width: 768px) {
  #caloriepon .btn {
    position: relative;
  }

  /* 価格ブロックだけを安全に整列（SPもPCも崩れにくい） */
  #caloriepon .c-panel__price-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0px 15px; /* 縦 横 */
    margin-top: 5px;
  }

  .badge.badge-red.c-label-discount {
    width: 47px;
    font-size: 11px;
  }
}

/* SP：旧CSSのボタンサイズ感（width:80%）に寄せる */
@media screen and (max-width: 768px) {
  /* ボタンの置き場を右寄せ（margin-left%は卒業） */
  #caloriepon .c-panel__action {
    display: flex;
    justify-content: flex-end;
  }

  /* ボタン本体を旧と同等に */
  #caloriepon .c-panel__action .btn {
    width: 80% !important; /* 旧CSS：body_sph #caloriepon .btn { width:80%; } */
    height: auto !important; /* 25px固定を解除 */
    margin-left: 0px;
    margin-top: 12px;
    background-size: contain; /* 旧CSSと同じ */
    background-repeat: no-repeat;
  }

  /* クリック領域も旧CSSの方式に合わせる */
  #caloriepon .c-panel__action .btn a {
    display: block;
    padding-top: 6% !important; /* 旧CSSと同じ */
  }
}

@media screen and (max-width: 768px) {
  /* カートボタンの置き場をさらに右へ */
  #caloriepon .c-panel__action {
    justify-content: flex-end;
    margin-left: 100px; /* ← ここで右寄せ量を調整 */
  }
}

/* 70034 / 74692 共通：商品画像サイズ調整 */
#caloriepon .c-panel__header img {
  width: 167.63px;
  max-width: none;
  height: auto; /* 縦横比維持 */
}

@media screen and (max-width: 768px) {
  #caloriepon .c-panel__header img {
    width: 123.42px;
    max-width: none;
    height: auto; /* 縦横比維持 */
  }

  #caloriepon p.c-panel__discount {
    margin-top: -5px;
  }
}

#caloriepon p.c-panel__discount {
  width: 200px;
}

#caloriepon .attention p {
  width: 710px;
  text-align: right;
  font-size: 12.2px;
  padding-left: 30px;
  text-indent: -9px;
}