@charset "shift_jis";

/* -----------------------------------------------------------
 共通タグ
----------------------------------------------------------- */
*{ margin:0; padding:0;}
.page__inner{
		width:100vw;
	}
a{outline: none; text-decoration: none;}
a:focus{outline:none;}
/*html{ background-color:#4E4A41;}*/
img{
	vertical-align:bottom;
	border: none;
	}

#pro_wrapper{
	width:100%;
	font-size:12px;
-webkit-text-size-adjust: 100%;	
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}
/* =========================================================
   レムペット LP  /  すべてのスタイルは .rmp-lp 配下にスコープ
   ========================================================= */

.rmp-lp {
  /* ---- カラートークン ---- */
  --rmp-navy: #1f3358;
  --rmp-navy-deep: #142240;
  --rmp-gold: #e0a83e;
  --rmp-gold-deep: #c98f26;
  --rmp-orange: #f2801c;
  --rmp-orange-deep: #d96c0c;
  --rmp-pink: #e8637f;
  --rmp-red: #d6503c;
  --rmp-cream: #fdf8ee;
  --rmp-cream-border: #e6d6a8;
  --rmp-text: #333333;
  --rmp-text-soft: #6b6b6b;
  --rmp-white: #ffffff;

  /* ---- タイポグラフィ（PC） ---- */
  --rmp-h2: 30px;
  --rmp-h3: 24px;
  --rmp-text-size: 16px;

  /* ---- レイアウト幅 ---- */
  --rmp-pc-width: 980px;
  --rmp-sp-width: 90%;

  /* body 相当の指定はここに集約 */
  display: block;
  background: var(--rmp-white);
  color: var(--rmp-text);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  font-size: var(--rmp-text-size);
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
  text-align: left!important;
}

.rmp-lp *,
.rmp-lp *::before,
.rmp-lp *::after {
  box-sizing: border-box;
}

.rmp-lp img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.rmp-lp a {
  text-decoration: none!important;
  color: inherit;
}

.rmp-lp ul {
  list-style: none;
  margin: 36px 0 0 0;
  padding: 0;
}

.rmp-lp h2,
.rmp-lp h3,
.rmp-lp p {
  margin: 0;
}
@media screen and (max-width: 767px) {
  .rmp-lp .rmp-h2 {
    font-size: 20px; /* SPサイズに上書き */
  }
}
/* ---- 共通コンテナ ---- */
.rmp-inner {
  width: var(--rmp-sp-width);
  max-width: var(--rmp-pc-width);
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .rmp-inner {
    width: var(--rmp-pc-width);
  }
 .rmp-lp img {
  display: block;
  width: auto;
  height: auto;
  margin: 0 auto;
}
}

/* ---- 見出し共通 ---- */
.rmp-h2 {
  font-size: var(--rmp-h2);
  font-weight: 700;
  color: var(--rmp-navy);
  text-align: center;
  line-height: 1.5;
}

.rmp-lp .rmp-h2 {
  margin-bottom: 24px;
}

@media screen and (min-width: 768px) {
  .rmp-lp .rmp-h2 {
    margin-bottom: 32px;
  }
}

.rmp-h3 {
  font-size: var(--rmp-h3);
  font-weight: 700;
  color: var(--rmp-navy);
  text-align: center;
  line-height: 1.5;
}

.rmp-lp .rmp-brand-logo {
  display: inline-block;
  width: auto;
  height: 0.85em;
  vertical-align: -0.1em;
  margin-right: 0.5rem;
}

/* =========================================================
   MV（メインビジュアル）画像 : PC / SP で1枚ずつ差し替え
   ========================================================= */
.rmp-mv {
  width: 100%;
  line-height: 0;
}

@media screen and (min-width: 768px) {
  .rmp-mv {
    margin-top: 20px;
  }
}

.rmp-mv__note {
  padding: 10px 0 0;
  font-size: 12px;
  color: var(--rmp-red);
}

@media screen and (min-width: 768px) {
  .rmp-mv__note {
    padding: 12px 0 0;
    font-size: 13px;
  }
}

/* =========================================================
   商品紹介 + 特長（MV直下）
   ========================================================= */
.rmp-intro {
  padding: 28px 0 0;
}

.rmp-intro__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 28px;
}

@media screen and (min-width: 768px) {
  .rmp-intro__top {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
    padding-bottom: 40px;
  }
}

.rmp-intro__image {
  flex: 0 0 auto;
}

.rmp-lp .rmp-intro__image img {
  width: 80%;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .rmp-intro__image {
    width: 42%;
  }

  .rmp-lp .rmp-intro__image img {
    width: auto;
    max-width: 340px;
    margin: 20px auto 0;
  }
}

.rmp-intro__text {
  flex: 1;
}

.rmp-lp .rmp-intro__title {
  font-size: var(--rmp-h2);
  font-weight: 700;
  color: var(--rmp-navy);
  text-align: left;
  margin-bottom: 16px;
}

.rmp-intro__badge {
  display: block;
  background: #57b4e2;
  color: var(--rmp-white);
  font-weight: 700;
  font-size: 16px;
  padding: 8px 18px;
  margin-bottom: 16px;
}

.rmp-intro__features li {
  padding: 6px 0;
  font-size: var(--rmp-text-size);
  line-height: 1.8;
  color: var(--rmp-text);
}

/* 訴求バー（クリーム背景・複数箇所で再利用） */
.rmp-promo {
  background: var(--rmp-cream);
  padding: 32px 0;
  text-align: center;
}

.rmp-promo-title {
  color: var(--rmp-red);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 12px;
  line-height: 1.5;
}

@media screen and (min-width: 768px) {
  .rmp-promo-title {
    font-size: 26px;
  }
}

.rmp-promo-sub {
  font-size: 13px;
  color: var(--rmp-text);
  margin-bottom: 24px;
  line-height: 1.8;
}

@media screen and (min-width: 768px) {
  .rmp-promo-sub {
    font-size: 15px;
  }
}

.rmp-promo-highlight {
  color: var(--rmp-pink);
  font-weight: 700;
}

/* =========================================================
   健康ベネフィット（水色背景・2枚の白カード）
   ========================================================= */
.rmp-benefits {
  background: #57b4e2;
  padding: 32px 0 0;
}

@media screen and (min-width: 768px) {
  .rmp-benefits {
    padding: 48px 0 0;
  }
}

.rmp-benefits .rmp-promo {
  margin-top: 32px;
}

@media screen and (min-width: 768px) {
  .rmp-benefits .rmp-promo {
    margin-top: 48px;
  }
}

.rmp-benefits__card {
  background: var(--rmp-white);
  border-radius: 16px;
  padding: 28px 18px;
}

.rmp-benefits__card + .rmp-benefits__card {
  margin-top: 24px;
}

@media screen and (min-width: 768px) {
  .rmp-benefits__card {
    padding: 40px 44px;
  }

  .rmp-benefits__card + .rmp-benefits__card {
    margin-top: 32px;
  }
}

.rmp-ingredients {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 24px;
}

@media screen and (min-width: 768px) {
  .rmp-ingredients {
    flex-direction: row;
    gap: 36px;
    margin-top: 32px;
  }
}

.rmp-ingredient__photo {
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 14px;
  height: 100px;
}

.rmp-lp .rmp-ingredient__photo img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .rmp-lp .rmp-ingredient__photo img {
    height: 150px;
  }
}

.rmp-ingredient__photo-label {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rmp-navy);
  font-weight: 700;
  font-size: 20px;
  padding: 6px 14px;
  border-radius: 6px;
}
@media screen and (max-width: 767px) {
  .rmp-ingredient__photo-label {
  left: 20%;
  font-size: 18px;
}
}
/* =========================================================
   メインコンテンツ（添付1枚目）
   ========================================================= */
/* ---- CTAボタン（＞はCSSで表現） ---- */
.rmp-cta-wrap {
  text-align: center;
}

.rmp-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--rmp-orange);
  font-weight: 700;
  font-size: 20px;
  padding: 14px 40px 14px 32px;
  border-radius: 999px;
  transition: background-color .15s ease;
}

.rmp-lp .rmp-cta {
  color: var(--rmp-white);
}

@media screen and (min-width: 768px) {
  .rmp-cta {
    width: 480px;
    max-width: 100%;
    font-size: 20px;
    padding: 16px 46px 16px 36px;
  }
}

.rmp-cta:hover {
  background: color-mix(in srgb, var(--rmp-orange) 75%, white);
}

.rmp-cta::after {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--rmp-white);
  border-right: 2px solid var(--rmp-white);
  transform: rotate(45deg);
}

/* ---- おすすめリスト（チェックアイコン付き・横4列） ---- */
.rmp-recommend {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 14px;
}

@media screen and (min-width: 768px) {
  .rmp-recommend {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

.rmp-recommend li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  background: var(--rmp-white);
  /*border: 1px solid var(--rmp-cream-border);*/
  border-radius: 12px;
  padding: 0 14px;
  text-align: left;
  font-size: var(--rmp-text-size);
  line-height: 1.6;
}

.rmp-recommend__check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.3em;
  height: 1.3em;
  margin-top: 0.15em;
  border-radius: 50%;
  background: #57b4e2;
}

.rmp-recommend__check::after {
  content: "";
  width: 0.3em;
  height: 0.6em;
  border-right: 2px solid var(--rmp-white);
  border-bottom: 2px solid var(--rmp-white);
  transform: rotate(45deg) translate(-1px, -1px);
}

/* ---- 成分説明ボックス（LEM / EPA） ---- */
.rmp-ingredient {
  flex: 1;
}

.rmp-ingredient + .rmp-ingredient {
  margin-top: 20px;
}

@media screen and (min-width: 768px) {
  .rmp-ingredient + .rmp-ingredient {
    margin-top: 0;
  }
}

.rmp-ingredient__label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  color: var(--rmp-navy);
  font-weight: 800;
  font-size: 18px;
  padding-left: 12px;
  border-left: 4px solid #57b4e2;
  line-height: 1.4;
  margin-bottom: 10px;
}

.rmp-ingredient__text {
  font-size: 14px;
  color: var(--rmp-text-soft);
  line-height: 1.9;
}

@media screen and (min-width: 768px) {
  .rmp-ingredient__text {
    font-size: 15px;
  }
}

.rmp-ingredient__text strong {
  color: var(--rmp-text);
}

/* =========================================================
   SP タイポグラフィ調整（PC比率に準じて縮小）
   h2: 36→24px / h3: 30→20px / text: 16→14px
   ========================================================= */
@media screen and (max-width: 767px) {
  .rmp-lp {
    --rmp-h2: 24px;
    --rmp-h3: 20px;
    --rmp-text-size: 14px;
  }
}
.pc {
  display: block;
}
.sp{
    display: none;
}
@media (max-width: 768px) {
 .pc {
    display: none;
  }
  .sp {
    display: block;
  }
}
/* -----------------------------------------------------------
 ↑↑↑↑↑ CSSの追記はここまで ↑↑↑↑↑
----------------------------------------------------------- */



/* for IE7 only */

*:first-child+html div,
*:first-child+html ul,
*:first-child+html ol,
*:first-child+html dl,
*:first-child+html .clearfix{
height:1%;
}