@charset "UTF-8"; 
#info_contents {
  margin-bottom: 0 !important;
}
.body_sph .contents_main {
  margin: 0;
}
#bsup {
  color: #264666;
  font-feature-settings: "palt" 1;
}

/*===============================
wrapper
===============================*/
#beauty_supplement {
  padding-bottom: 5%;
}

.wrapper-big,
.wrapper-middle,
.wrapper-small {
  margin-inline: auto;
}

.wrapper-big {
  width: 662px;
}
.wrapper-middle {
  width: 595px;
}
.wrapper-small {
  width: 380px;
}

/*左右上下中央ぞろえ*/
.center-center {
  display: grid;
  place-content: center; /*要素の中央揃え*/
  place-items: center; /*要素同士の中央揃え*/
}

#beauty_supplement section {
  margin-top: 15%;
}
#beauty_supplement section:first-of-type {
  margin-top: 10%;
}

/*===============================
余白調整
===============================*/
#beauty_supplement .problem {
  margin-bottom: 10%;
}
#beauty_supplement #teiki > * {
  margin-bottom: 5%;
}

/*===============================
リンク設定
===============================*/
#beauty_supplement .link-wrap {
  position: relative;
  display: inline-block;
}
#beauty_supplement .link {
  position: absolute;
  display: block;
  z-index: 3;

  /*background: rgba(255,0,0,0.2);*/
}
#beauty_supplement .link-total,
#beauty_supplement .link-age,
#beauty_supplement .link-vitamin,
#beauty_supplement .link-other {
  height: 22%;
  width: 40%;
}

#beauty_supplement .link-total,
#beauty_supplement .link-vitamin {
  left: 8%;
}
#beauty_supplement .link-age,
#beauty_supplement .link-other {
  left: 52%;
}
#beauty_supplement .link-total,
#beauty_supplement .link-age {
  bottom: 33%;
}
#beauty_supplement .link-vitamin,
#beauty_supplement .link-other {
  bottom: 9%;
}

#beauty_supplement .link-teiki {
  height: 4.5%;
  width: 94%;
  left: 3%;
  bottom: 2.7%;
}
/*===============================
インクルード
===============================*/

.spec {
  padding: 5% 0 5%;
}
#age .spec {
  padding: 5% 0 0;
}
.item-title {
  margin-bottom: 6%;
}
#total .spec {
  background: linear-gradient(45deg, #ffe2ea, #ffeee9);
}
#age .spec {
  background: linear-gradient(45deg, #d5efff, #eaeeff);
}
#vitamin .spec {
  background: linear-gradient(45deg, #ffe8dc, #fff4d3);
}
#other .spec {
  background: linear-gradient(45deg, #d1ffe3, #e6ffdc);
}
.spec-title {
  text-align: center;
}
.spec-title.spec-title1 {
  margin: 0 0 6% 0;
}
.spec-title.spec-title2 {
  margin: 0 0 -2% 0;
}

/*全体の余白調整*/
.include {
  background-color: #ffffff;
  padding: 4% 0;
  /*    margin-top: 5%;*/
  /*    margin-bottom: 8%;*/
  /*    border-radius: 10px;*/
}
.include:not(:last-of-type) {
  margin-bottom: 5%;
}
.include.include-big {
  padding: 5% 0;
}
.include.include-fv {
  margin-bottom: 12%;
}
.include .goods_set {
  display: flex;
  /*    gap: 3%;
    margin: 0 0 2% 0;*/
}
.include.include-big .goods_set {
  gap: 0%;
  margin: 0 0 3% 0;
  padding: 0 4%;
}
.include.include-big .gap-plus .goods_set {
  gap: 4%;
}

/*左----------------------*/
.include .img_box {
  flex: 0.8; /*画像の大きさ*/
}
.include.include-big .img_box {
  flex: 1.4; /*画像の大きさ*/
}

/*右----------------------*/
/*長さ*/
.include .txt_box {
  flex: 2; /*長さ*/
}
/*割引後価格*/
.include .price2 {
  font-size: 2.5em;
  color: #f32626;
}
.include .price2 .tax {
  font-size: 0.5em;
  margin-left: -0.3em;
}
/*割引率*/
.include .cp_box {
  display: block;
}
.include.include-big .cp_box {
  display: flex;
  align-items: end;
}
.include .cp_discount {
  font-size: 2.3em;
  background-color: #f32626;
}
.include.include-big .cp_discount {
  font-size: 2.3em;
  padding: 0.1em 0.3em 0.08em 0.3em;
  margin: 0.1em 0 0 0;
}
.include.include-big .cp_discount strong {
  font-size: 1.4em;
}

/*日付*/
.include.include-big .cp_discount + .cp_limit {
  font-size: 1.5em;
}

/*商品名*/
.include .name {
  font-size: 1.2em;
}

/*ボタン*/
.cta-btn a {
  position: relative;
  display: block;
  width: 100%;
  background-color: #f32626;
  color: #fff;
  text-decoration: none;
  text-align: center;
  padding: 2% 0;
  border-radius: 10em;
}
.include.include-big .cta-btn a {
  padding: 3% 0;
}

.cta-btn:hover {
  opacity: 0.8;
  transition: 0.3s;
}

.include .cta-btn a {
  font-size: 22.16px;
  font-weight: bold;
}

.single {
  font-size: 2em;
  text-align: center;
  margin: -4% 0 10% 0;
  color: #fff;
}

.single a {
  font-feature-settings: "palt";
  text-underline-offset: 0.18em;
}
.single a:visited {
  color: #fff;
}
.single a:hover {
  opacity: 0.6;
  cursor: pointer;
}
.single a span {
  font-size: 0.7em;
}

.single a:link {
  color: #fff;
}

.plus-text:not(:last-of-type) {
  /*    margin-bottom: 10%;*/
}

.spec-text {
  text-align: center;
  margin-bottom: 5%;
}
.spec-text p {
  display: inline;
  font-size: 2em;
  font-weight: bold;
  color: #004cc8;
  padding-bottom: 1%;
}
.spec-text span {
  background: linear-gradient(transparent 70%, #eaefff 70%);
}

/*通常定期ボタン隠し*/
.goods_set .btn img {
  display: none;
}

/*注釈*/
.note {
  margin-top: 5%;
}
.note p {
  margin: 0;
  font-size: 12.6px;
  color: #6d6d6d;
}
#total .note p{
  margin-left: 25px;
}
#age .note p{
  margin-left: 25px;
}
#goods40532.goods_set .note p{
  margin-left: -10px;
}

.note p:not(:last-of-type) {
  /*    margin-bottom: 2%;*/
}

/*医薬*/
.medical {
  background: linear-gradient(45deg, #237ebc, #214693);
  padding: 10% 0;
  text-align: center;
}
.medical .medical-title {
  margin-bottom: 10%;
  text-align: center;
}
.medical .item-title {
  margin: 4% 0 10%;
}
.medical .item-title img {
  width: 90%;
}

.medical .include {
  text-align: left;
}

/*2列*/
#beauty_supplement .include .double .goods_set {
  display: block;
}
#beauty_supplement .double {
  display: flex;
  justify-content: center;
  gap: 4%;
  font-size: 0.8em;
  /*    position: relative;*/
}

#beauty_supplement .double .flex-item {
  width: 49%;
}

#beauty_supplement .double .spec-text {
  margin-bottom: 7%;
}

#beauty_supplement .double img.r_img {
  height: 160px;
}
#beauty_supplement .double .txt_box {
  height: 98px;
}
#beauty_supplement .double .cp_box {
  display: inline;
}
#beauty_supplement .double .cp_discount + .cp_limit {
  margin-left: 0em;
}

/* 商品列：左右對齊 + 垂直置中 */
.include .goods_set {
  display: flex;
  align-items: center;
  gap: 4%;
}

/* 左：圖片置中 */
.include .img_box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.include .img_box img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 右：文字區塊整理 */
.include .txt_box {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

/* 商品名 */
.include .name {
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.4;
}

/* 原價 */
.include .price1 {
  font-size: 0.9em;
  color: #666;
}

/* 折後價 */
.include .price2 {
  font-size: 1.8em;
  font-weight: bold;
  color: #f32626;
  line-height: 1.2;
}

.include .price2 .tax {
  font-size: 0.6em;
  margin-left: 0.2em;
}

/* 折扣區：橫向，不要撐滿 */
.include .cp_box {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

/* 8%OFF 標籤修正 */
.include .cp_discount {
  display: inline-block;
  background-color: #f32626;
  color: #fff;
  font-size: 1em;
  font-weight: bold;
  padding: 0.25em 0.6em;
  line-height: 1;
  border-radius: 4px;
}

/* CTA 與上方拉開 */
.include .cta-btn {
  margin-top: 30px;
}

/* ===============================
   2列商品排版修正（PC/SP共通）
================================ */

/* 2列容器 */
#beauty_supplement .double {
  align-items: stretch;
}

#beauty_supplement .double .gap-plus {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 262.75px;
}


/* 單一商品卡片 */
#beauty_supplement .double .flex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

#beauty_supplement .double .gap-plus .cta-btn {
  margin-top: auto;
  width: 100%;
}



/* 上方說明文字（高度固定） */
#beauty_supplement .double .spec-text {
  min-height: 4.5em; /* ★關鍵：統一高度 */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 商品圖片區 */
#beauty_supplement .double .img_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5em 0;
}

/* 圖片大小穩定 */
#beauty_supplement .double .img_box img {
  max-height: 160px;
  width: auto;
}

/* 商品名 */
#beauty_supplement .double .name {
  text-align: center;
  min-height: 2.6em; /* 防止左右名稱不齊 */
}

/* 價格區塊往下推 */
#beauty_supplement .double .price_box {
  margin-top: auto;
  text-align: center;
}

/* CTA 按鈕統一寬度 */
#beauty_supplement .double .cta-btn {
  width: 100%;
  margin-top: 40px;
}
#beauty_supplement .spec-text p {
  /* word-break: auto-phrase; */
}

/* =========================================
   double商品：文字與價格整理（不影響其他）
========================================= */

/* 商品卡片內文字全部置中 */
#beauty_supplement .include.double .txt_box {
  text-align: center;
}

/* 商品名：只顯示一次，統一樣式 */
#beauty_supplement .include.double .name {
  display: block;
  font-size: 1.1em;
  line-height: 1.4;
  margin: 0.4em 0 0.2em;
}

/* 若 include 內有重複商品名，第二個隱藏 */
#beauty_supplement .include.double .name + .name {
  display: none;
}

/* 舊價格（有折扣才出現） */
#beauty_supplement .include.double .price1 {
  display: inline-block;
  font-size: 0.9em;
  color: #888;
  text-decoration: line-through;
  margin-right: 0.4em;
}

/* 新價格 */
#beauty_supplement .include.double .price2 {
  display: inline-block;
  font-size: 1.4em;
  font-weight: bold;
  color: #f32626;
}

/* 價格整行置中 */
#beauty_supplement .include.double .price_box {
  margin: 0.4em 0;
}

/* 折扣不存在時，不留空白 */
#beauty_supplement .include.double .cp_box:empty {
  display: none;
}

/* age_item3：2 上 1 下 */
#beauty_supplement #age .double {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* 共通：前兩個維持原樣 */
#beauty_supplement #age .double .flex-item {
  width: auto;
}

/* 第三個：橫跨兩欄 */
#beauty_supplement #age .double .flex-item:nth-child(3) {
  grid-column: 1 / -1;
  margin-top: 32px;

  /* 🔴 關鍵修正 */
  display: flex;
  justify-content: center;
}

/* 第三個裡面的商品，限制寬度並置中 */
#beauty_supplement #age .double .flex-item:nth-child(3) .gap-plus {
  width: 100%;
  max-width: 360px; /* 接近 DHC 原站比例 */
  margin: 0 auto;
}
@media print, screen and (min-width: 768px) {
  #beauty_supplement {
    width: 720px;
    margin: 0 auto;
  }
}

/* 画像位置調整 */
.c-panel__link {
  display: inline-flex;
}

/* 商品名、受取方法、価格 */
.c-panel__body {
  place-items: start;
  flex: 2.5;
  margin-top: 0px;
}

/* 価格色調整 */
.c-panel__price-wrapper {
  color: #f25173;
  margin-top: 0px !important;
}

/* ボタン調整 */
.c-panel__action .btn {
  width: 60%;
  padding: auto;
}

.c-panel__header {
  /* flex: 2; */
  margin-top: auto;
  margin-bottom: auto;
  /* margin-right: 5%; */
}

.clear_contents .sample_view .c-panel__action {
  display: none;
}
.clear_contents .sample_view .c-panel__badge {
  display: none;
  margin-bottom: 5px;
}

.c-price {
  font-size: 39.55px;
  color: #f32626;
}
.c-panel__name {
  font-size: 16.8px;
  font-weight: 100;
}
.c-panel__body > * + * {
  margin-top: var(--space, 0px);
}

.c-panel__desc {
  display: none;
}

/* ２個並び */
/* inculude使用時のボタン、画像、商品名調整 */
.revival_header .sample_view .c-panel__header img {
  max-width: 100%;
  max-height: 100%;
  margin-bottom: auto;
  width: 160px;
}
.revival_header .sample_view .c-panel__name {
  font-size: 13.44px;
  height: 10px;
  margin-top: 5px;
}

.revival_header .sample_view .btn-primary {
  color: #333;
}
.revival_header .c-panel__action {
  margin-top: -5px;
}
/* パネル削除 */
.revival_header .clear_badge .sample_view .c-panel__badge {
  display: none;
  margin: 5px 0 5px 0;
}
/* 位置調整 */
.revival_header .clear_header .sample_view .c-panel__body {
  display: flex;
  flex-direction: column;
}

/* 画像調整 */
.revival_header .sample_view .c-panel__link {
  display: block !important;
  justify-content: center;
}
.revival_header .c-panel__action .btn {
  display: none;
}

.revival_header .c-price {
  font-size: 3.2rem;
}
#goods40532 {
  display: block;
}

#goods40532 .c-panel__header__image {
  width: 216px;
  margin-right: 30px;
}

.spec .c-panel__header__image {
  width: 225px;
}

.double .c-label-discount {
  font-size: 19.32px !important;
}

.c-label-discount {
  font-size: 24.15px;
}

.c-panel__discount{
  margin: 0;
}

/*===============================
レスポンシブ
===============================*/

@media screen and (max-width: 768px) {
  /*wrapper*/
  .wrapper-big {
    width: 92vw;
  }
  .wrapper-middle {
    width: 83vw;
  }
  .wrapper-small {
    width: 70vw;
  }

  .single {
    font-size: 1.2em;
  }
  .medical .medical-title {
    width: 70%;
  }

  .note p {
    font-size: 9.67px;
  }
  #total .note p{
    margin-left: 15px;
  }
  #age .note p{
    margin-left: 15px;
  }
  #goods40532.goods_set .note p{
    margin-left: 0px;
  }
  
  /*インクルード====================================*/
  .spec-text p {
    font-size: 15.7px;
    width: 142px;
    text-align: center;
  }

  /*左----------------------*/
  /*画像の大きさ*/
  .include .img_box {
    flex: 0.55;
  }
  /*右----------------------*/
  .include .txt_box {
    font-size: 0.85em;
    flex: 1;
  }
  .include .price2 {
    font-size: 1.6em;
  }
  .include .cp_discount {
    font-size: 2em;
  }
  /*商品名*/
  .include .name {
    font-size: 1em;
    /*    margin-bottom: 0.9em;*/
  }
  .include .cta-btn a {
    font-size: 16.125px;
  }
  .double .cta-btn a {
    font-size: 12.1px ;
  }
  
  .include.include-big .goods_set {
    padding: 0%;
  }

  .include.include-big .cp_box {
    display: block;
  }
  .include.include-big .cp_discount {
    font-size: 2em;
    margin: 0.1em 0 0.2em 0;
  }
  .include.include-big .txt_box {
    font-size: 0.8em;
    flex: 1.6;
  }

  .include .goods_set {
    margin: 0 0 4% 0;
  }
  /*.include.include-big .goods_set {
    margin: 0 0 4.5% 0;
}*/

  /*日付*/
  .include.include-big .cp_discount + .cp_limit {
    font-size: 1.2em;
  }

  #beauty_supplement .double {
    font-size: 0.75em;
  }
  #beauty_supplement .double img.r_img {
    height: 140px;
  }

  #beauty_supplement .double .spec-text {
    width: 149px;
    display: block;
    margin-bottom: 30px;
  }
  #beauty_supplement .double .txt_box {
    height: 60px;
  }

  #beauty_supplement .double .price1,
  #beauty_supplement .double .cp_limit {
    display: none !important;
  }

  #beauty_supplement .double .cp_box .price2 {
    margin-right: 0;
  }
  #beauty_supplement .inlude .double .name {
    font-size: 1.2em;
  }

  .c-panel__name {
    font-size: 13px;
    width: 155px;
  }
  .c-price {
    font-size: 24.77px;
  }
  .revival_header .c-price {
    font-size: 18.5px;
  }
  .revival_header .sample_view .c-panel__name {
    font-size: 9.675px;
    height: 25px;
    text-align: left;
    width: 142.75px;
  }
  #beauty_supplement .double .cta-btn {
    margin-top: 20px;
  }

  .spec .c-panel__header__image {
    width: 145.25px;
  }

  #beauty_supplement .double .gap-plus {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 150px;
  }

  .revival_header .sample_view .c-panel__header img {
    width: 140px;
  }
  .revival_header .sample_view .c-price-delete {
      display: none;
  }

  .double .c-label-discount {
    font-size: 14.5px !important;
    padding: 4px 4px;
  }

  .double .c-panel__discount-period{
    display:none;
  }
  
  .c-label-discount {
    font-size: 19.35px !important;
    padding: 5px;
  }

  .c-panel__discount-period {
    font-size: 11.61px;
  }

  .double .c-panel__price-wrapper {
    gap: 0 20px;
    align-items: anchor-center;
  }

  #goods40532 .c-panel__header__image {
    width: 140px;
    margin-right: 20px;
  }
}

/*◎取り消し線*/
.c-price-delete{
  background: linear-gradient(transparent 0px, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 0px, transparent 0px) !important;
  font-size: 12px;
}

.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;
}