@charset "UTF-8";

/* ========================================
共通部品
======================================== */

/* h2見出し：赤色下線、中央揃え */
h2.ttl_h2{
  display: inline;
  margin-top: 50px;
  padding-bottom: 8px;
  width: auto;
  border-bottom: 5px solid #d71718;
  font-size: 35px;
}

/* ========================================
健康食品一覧ページ
======================================== */

/* ------------------------------
メインビジュアル
------------------------------ */

/* 画像 */
img.mainimage{
  padding-top: 100px;
  max-width: 45%;
}

/* メインメッセージ */
.main_message{
  text-align: center;
  font-size: 34px;
}
.main_message span{
  font-size: 42px;
}

/* ------------------------------
商品特長
------------------------------ */

/* 商品名（見出し） */
h2.sapli_list_title{
  padding: 35px 10px 5px 10px;
  border-bottom: 2px solid #172a88;
  text-align: center;
  font-size: 24px;
  line-height: 1.4;
}
@media (max-width: 768px){
  h2.sapli_list_title{
    padding-top: 30px;
    font-size: 20px;
  }
}

/* 商品説明文 */
.sapli_list_text{
  padding: 40px 32px 0px 32px;
  font-size: 20px;
  line-height: 1.4;
}
.sapli_list_text.gold{
  padding-bottom: 28px;
}
@media (max-width: 768px){
  .sapli_list_text{
    padding: 5px 10px;
    font-size: 18px;
    text-align: center;
  }
}

/* ========================================
各商品ページ
======================================== */

/* ------------------------------
商品特長
------------------------------ */
/* 商品説明 */
.sapri_concept_flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 50px;
}
.sapri_concept_flex-item {
  width: calc(50% - 5px);
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .sapri_concept_flex {
    margin-top: 0;
  }
  .sapri_concept_flex-item {
      width: 100%;
  }
}
.sapri_concept_flex img {
  width: 100%;
}
/* 商品パッケージ */
.sapri_concept_flex img.item_image{
  padding-top: 10px;
  width: 80%;
}

/* 説明文 */
.sapri_concept_text{
  padding: 10px 5px;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 768px) {
  .sapri_concept_text{
    padding: 5px;
    font-size: 13px;
  }
}

/* ------------------------------
商品概要
------------------------------ */

/* h2下のロゴ画像 */
.ttl_h2_content{
  display: block;
  margin: auto;
  padding-top: 60px;
  text-align: center;
}
img.sapri_melsmon_logo{
  display: block;
  margin: auto;
  margin-top: 15px;
  max-width: 360px;
}

/* 商品画像 */
img.sapri_item_img{
  padding-top: 100px;
}

/* 商品コンテナ */
.sapri_item_content{
  margin: auto;
  max-width: 90%;
  padding-top: 20px;
}

/* 商品名 */
.sapri_item_title{
  font-weight: bold;
  font-size: 32px;
}
.sapri_item_title > span{ /* 商品日本語名 */
  padding-left: 5px;
  font-weight: normal;
  font-size: 18px;
}
.sapri_item_title .sub_title{ /* サブタイトル */
  font-size: 18px;
}

/* 商品カテゴリ */
.sapri_cat{
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 6px 0;
  border: 1px solid #000;
  font-size: 16px;
}

/* 商品価格 */
.sapri_item_price{
  padding: 0 0 5px 0;
  font-size: 18px;
}
.sapri_item_price > span{ /* 価格 */
  padding-left: 5px;
  font-weight: bold;
  font-size: 26px;
}

/* 商品説明文 */
.sapri_imte_text{
  padding-top: 5px;
  font-size: 17px;
}

/* 商品注意書き */
.item_notes{
  margin-top: 20px;
  padding: 20px 10px 0;
  max-width: 85%;
  border: 1px solid #000;
  font-size: 18px;
}
.item_notes > span{ /* 注意書き見出し */
  font-size: 24px;
  font-weight: bold;
}
.item_notes_arrow{
  margin: auto;
  max-width: 450px;
}

/* ------------------------------
商品ラストメッセージ
------------------------------ */

/* 商品コンテナ */
.sapri_last_content{
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
  padding: 0;
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
}

/* 画像（テキスト背景） */
.sapri_last_content > img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* クロージングメッセージ */
.sapri_last_text{
  position: absolute;
  bottom: 40px;
  right: 0;
  background: rgba(255, 255, 255, 0.6);
  color: #000;
  padding: 30px 20px 30px 30px;
  border-radius: 25px 0 0 25px;
  width: 450px;
  font-size: 24px;
  line-height: 1.8;
}

/* ========================================
SPページ共通
======================================== */

/* ------------------------------
about：概要
------------------------------ */

.sapri_sp_about_title{
  padding: 100px 0 50px;
  max-width: 60%;
}

/* タイトル・キャッチコピー */
.sapri_sp_title{
  z-index: 2;
  margin: auto;
  font-size: 55px;
  line-height: 1.2;
}
.sapri_sp_title > span{
  font-size: 40px;
}
img.sapri_sp_item_image{
  max-width: 65%;
  margin-top: -90px;
}

/* 概要文 */
.sapri_sp_about_content{
  display: flex;
}
.sapri_sp_about_content .sapri_sp_about_content_item{
  width: 610px;
  content: '';
  background-repeat: no-repeat;
  background-position: center center;
}
.sapri_sp_about_content .sapri_sp_about_content_item.sp_left{
  background-image: url('../assets/ImageFile/GOLD_sp/GOLD/gold-liquid-sp_02.webp');
  background-size: contain;
  background-position: center top;
}
.sapri_sp_about_content .sapri_sp_about_content_item.sp_right{
  background-image: url('../assets/ImageFile/GOLD_sp/GOLD/gold-liquid-sp_06.webp');
  background-size: 65%;
  background-position: center bottom;
}

/* 概要：左半分 */
.sapri_sp_about_content .sapri_sp_about_content_item .component{
  padding-top: 190px;
  padding-left: 190px;
  padding-right: 20px;
}
.sapri_sp_about_content .sapri_sp_about_content_item .component > .title{
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 38px;
}
.sapri_sp_about_content .sapri_sp_about_content_item .component > .title > span{
  font-size: 24px;
}

.sapri_sp_about_content .sapri_sp_about_content_item .component > table td{
  text-align: left;
}
.sapri_sp_about_content .sapri_sp_about_content_item .component > table td img{
  display: block;
  margin: 0 auto;
  width: 120px;
}

/* 概要：右半分 */
.sapri_sp_about_content .sapri_sp_about_content_item.sp_right .title{
  font-size: 26px;
  text-align: center;
}
.sapri_sp_about_content .sapri_sp_about_content_item.sp_right img.arrow{
  width: 70px;
  margin: 20px auto;
}
.sapri_sp_about_content .sapri_sp_about_content_item.sp_right .sub_title{
  font-size: 26px;
}
.sapri_sp_about_content .sapri_sp_about_content_item.sp_right .sub_title span.marker{
  position: relative;
  display: inline-block;
  margin-bottom: 30px;
}
.sapri_sp_about_content .sapri_sp_about_content_item.sp_right .sub_title span.marker::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 3px;
  background-color: green;
  z-index: 0;
}
.sapri_sp_about_content .sapri_sp_about_content_item.sp_right .text{
  margin: auto;
  padding-top: 10px;
  width: 420px;
  font-size: 18px;
  text-align: center;
}

/* ------------------------------
about2：概要2
------------------------------ */

/* 概要文 */
.sapri_sp_about2_content{
  display: flex;
}
.sapri_sp_about2_content .sapri_sp_about2_content_item{
  width: 610px;
  content: '';
  background-repeat: no-repeat;
  background-position: center center;
}
.sapri_sp_about2_content .sapri_sp_about2_content_item img{
  max-width: 65%;
}
.sapri_sp_about2_content .sapri_sp_about2_content_item img.platinum{
  max-width: 73%;
}
.sapri_sp_about2_content .sapri_sp_about2_content_item img.capsule{
  max-width: 70%;
}
.sapri_sp_about2_content .sapri_sp_about2_content_item .text{
  margin: auto;
  padding-top: 20px;
  max-width: 85%;
  text-align: left;
  font-size: 18px;
  line-height: 1.4;
}
.sapri_sp_about2_content .sapri_sp_about2_content_item .title{
  display: block;
  margin: auto;
  margin-top: 40px;
  padding-bottom: 4px;
  width: auto;
  border-bottom: 2px solid #d71718;
  font-size: 20px;
}

/* ------------------------------
special：特長
------------------------------ */

/* 概要文 */
.sapri_sp_special_content{
  display: flex;
}
.sapri_sp_special_content .sapri_sp_special_content_item{
  width: 610px;
  content: '';
  background-repeat: no-repeat;
  background-position: center center;
}
.sapri_sp_special_content .sapri_sp_special_content_item img{
  max-width: 100%;
}
.sapri_sp_special_content .sapri_sp_special_content_item .list_text{
  margin: auto;
  padding: 10px 0;
  max-width: 80%;
  font-size: 30px;
}
.sapri_sp_special_content .sapri_sp_special_content_item .list_text::before{
  content: "";
  display: inline-block;
  margin-right: 15px;
  width: 65px;
  height: 62px;
  background-image: url('../assets/ImageFile/GOLD_sp/GOLD/gold-liquid-sp_09.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: bottom;
}

/* ------------------------------
ラストメッセージ
------------------------------ */
.sapli_sp_last_message{
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "MS P明朝", "MS PMincho", serif;
  font-size: 44px;
  font-weight: bold;
  line-height: 1.8;
  color: #000;
  
  text-shadow: 0 0 4px rgba(0, 0, 64, 0.2),
               0 0 8px rgba(0, 0, 64, 0.15),
               0 0 12px rgba(0, 0, 64, 0.1);
}

/* ------------------------------
商品概要
------------------------------ */

/* 商品コンテナ */
.sapri_sp_item_content{
  margin: auto;
  max-width: 55%;
  padding-top: 20px;
}
.sapri_sp_item_content > img{
  display: block;
  margin: auto;
  width: 100%;
}

/* ------------------------------
プラセンタシリーズ
------------------------------ */
.sapri_sp_series_content{
  margin: auto;
}
.sapri_sp_series_content > .title{
  margin: auto;
  text-align: center;
  font-size: 40px;
  font-weight: normal;
}
.sapri_sp_series_content > .title > span{
  font-size: 50px;
  font-weight: bold;
}
.sapri_sp_series_content > img{
  display: block;
  margin: auto;
  padding-top: 45px;
  padding-bottom: 5px;
  max-width: 25%;
}

/* 商品タイトル */
.sapri_sp_series_title{
  font-size: 18px;
  text-align: center;
}

/* ------------------------------
最後に
------------------------------ */
.sapli_sp_last_message2{
  text-align: center;
  font-size: 28px;
  line-height: 2;
}


/* ========================================
スマホ閲覧時
======================================== */
@media (max-width: 768px){

  /* ========================================
  共通部品
  ======================================== */

  /* h2見出し：赤色下線、中央揃え */
  h2.ttl_h2{
    display: block;
    font-size: 6vw;
    border-bottom: 4px solid #d71718;
  }

  /* ========================================
  健康食品一覧ページ
  ======================================== */

  /* ------------------------------
  メインビジュアル
  ------------------------------ */

  /* 画像 */
  img.mainimage{
    padding-top: 80px;
    max-width: 85%;
  }

  /* メインメッセージ */
  .main_message{
    font-size: 7vw;
  }
  .main_message span{
    font-size: 10vw;
  }

  /* ------------------------------
  商品特長
  ------------------------------ */

  /* 商品名（見出し） */
  h2.sapli_list_title{
    padding-top: 30px;
    font-size: 20px;
  }

  /* 縦並び */
  .col-lg-3-block {
    width: 80%;
    margin-bottom: 20px;
  }

  /* 商品説明文 */
  .sapli_list_text{
    padding: 5px 10px;
    font-size: 18px;
    text-align: center;
  }
  .sapli_list_text.gold{
    padding-bottom: 5px;
  }

  /* ------------------------------
  商品概要
  ------------------------------ */

  /* h2下のロゴ画像 */
  img.sapri_melsmon_logo{
    width: 80%;
  }

  /* 商品名 */
  .sapri_item_title{
    padding-bottom: 15px;
    line-height: 1.2;
  }
  .sapri_item_title > span{ /* 商品日本語名 */
    display: block;
    padding-left: 0;
    font-size: 4.5vw;
  }
  .sapri_item_title .sub_title{ /* サブタイトル */
    font-size: 3.5vw;
  }

  /* 商品説明文 */
  .sapri_imte_text{
    font-size: 14px;
  }
  .sapri_imte_text ul{
    padding-top: 5px;
    padding-left: 0;
    list-style: none;
  }

  /* 商品注意書き */
  .item_notes{
    margin-top: 15px;
    padding: 15px 5px 0;
    max-width: 90%;
    font-size: 14px;
  }
  .item_notes > span{ /* 注意書き見出し */
    display: block;
    padding: 0 10px 5px;
    font-size: 14px;
    font-weight: bold;
  }

  /* ------------------------------
  商品ラストメッセージ
  ------------------------------ */

  /* 画像（テキスト背景） */
  .sapri_last_content > img {
    width: 95%;
    max-width: 95%;
    margin: 0 auto;
  }

  /* クロージングメッセージ */
  .sapri_last_text{
    position: relative;
    display: block;
    bottom: 0;
    padding: 10px 15px;
    width: 100%;
    font-size: 16px;
  }

  /* ========================================
  SPページ共通
  ======================================== */

  /* ------------------------------
  about：概要
  ------------------------------ */

  .sapri_sp_about_title{
    padding: 20px 0 0;
    max-width: 100%;
  }

  /* タイトル・キャッチコピー */
  .sapri_sp_title{
    margin-top: 30px;
    font-size: 8vw;
  }
  .sapri_sp_title > span{
    font-size: 4vw;
  }
  img.sapri_sp_item_image{
    max-width: 100%;
    margin-top: -30px;
  }

  /* 概要文 */
  .sapri_sp_about_content{
    flex-direction: column;
  }
  .sapri_sp_about_content .sapri_sp_about_content_item{
    width: 100%;
  }

  /* 概要：左半分 */
  .sapri_sp_about_content .sapri_sp_about_content_item .component{
    padding: 0;
    margin-top: 80%;
  }
  .sapri_sp_about_content .sapri_sp_about_content_item .component > .title{
    font-size: 8vw;
  }
  .sapri_sp_about_content .sapri_sp_about_content_item .component > .title > span{
    display: block;
    font-size: 4vw;
  }
  .sapri_sp_about_content .sapri_sp_about_content_item .component > table td{
    padding: 0 5px;
    font-size: 15px;
  }

  /* 概要：右半分 */
  .sapri_sp_about_content .sapri_sp_about_content_item.sp_right .title{
    padding-top: 40px;
    font-size: 6vw;
  }
  .sapri_sp_about_content .sapri_sp_about_content_item.sp_right img.arrow{
    width: 15%;
    margin: 15px auto;
  }
  .sapri_sp_about_content .sapri_sp_about_content_item.sp_right .sub_title{
    font-size: 18px;
  }
  .sapri_sp_about_content .sapri_sp_about_content_item.sp_right .sub_title span.marker{
    margin-bottom: 15px;
  }
  .sapri_sp_about_content .sapri_sp_about_content_item.sp_right .text{
    width: 100%;
    font-size: 16px;
    text-align: left;
  }

  /* ------------------------------
  about2：概要2
  ------------------------------ */

  /* 概要文 */
  .sapri_sp_about2_content{
    flex-direction: column;
  }
  .sapri_sp_about2_content .sapri_sp_about2_content_item{
    width: 100%;
  }
  .sapri_sp_about2_content .sapri_sp_about2_content_item img{
    max-width: 100%;
  }
  .sapri_sp_about2_content .sapri_sp_about2_content_item img.platinum{
    max-width: 100%;
  }
  .sapri_sp_about2_content .sapri_sp_about2_content_item img.capsule{
    max-width: 100%;
  }
  .sapri_sp_about2_content .sapri_sp_about2_content_item .text{
    padding-top: 10px;
    padding-bottom: 20px;
    max-width: 100%;
    font-size: 16px;
  }
  .sapri_sp_about2_content .sapri_sp_about2_content_item .title{
    text-align: center;
  }

  /* ------------------------------
  special：特長
  ------------------------------ */

  /* 概要文 */
  .sapri_sp_special_content{
    flex-direction: column;
  }
  .sapri_sp_special_content .sapri_sp_special_content_item{
    width: 100%;
  }
  .sapri_sp_special_content .sapri_sp_special_content_item .list_text{
    padding: 10px 0;
    max-width: 100%;
    font-size: 18px;
  }
  .sapri_sp_special_content .sapri_sp_special_content_item .list_text::before{
    margin-right: 10px;
    width: 35px;
    height: 32px;
  }

  /* ------------------------------
  ラストメッセージ
  ------------------------------ */
  .sapli_sp_last_message{
    font-size: 18px;
  }

  /* ------------------------------
  商品概要
  ------------------------------ */

  /* 商品コンテナ */
  .sapri_sp_item_content{
    max-width: 100%;
  }

  /* 商品注意書き */
  .item_notes{
    max-width: 95%;
  }

  /* ------------------------------
  プラセンタシリーズ
  ------------------------------ */
  .sapri_sp_series_content > .title{
    padding-top: 10px;
    font-size: 5vw;
  }
  .sapri_sp_series_content > .title > span{
    display: block;
    font-size: 9vw;
  }
  .sapri_sp_series_content > img{
    padding-top: 25px;
    max-width: 50%;
  }

  /* 商品タイトル */
  .sapri_sp_series_title{
    font-size: 18px;
    text-align: center;
  }

  /* ------------------------------
  最後に
  ------------------------------ */
  .sapli_sp_last_message2{
    font-size: 20px;
  }

}