@charset "UTF-8";
/* r-eos LP 本体CSS  2026-09-09 にページ内<style>から外部ファイル化 */
/* ============================================================================
   共通の土台
   ============================================================================ */
.rlp{
  /* --- カラー（仕様シートより） --- */
  --rlp-main:#07519B;          /* メインカラー（濃紺）ボタン・帯・罫線 */
  --rlp-navy:#002F8F;          /* 青い文字（見出し・強調）の色 */
  --rlp-sub:#19568D;           /* サブカラー ロゴ・アクセント */
  --rlp-accent:#0746D9;        /* アクセント 強調文字・下線 */
  --rlp-text:#000000;          /* 本文 */
  --rlp-bg:#F2F6FD;            /* 背景（薄い水色） */
  --rlp-line:#1D54A3;          /* 罫線・区切り線 */
  --rlp-line-green:#0B882A;    /* LINE */
  --rlp-gold:#F2D77E;          /* 濃紺背景の上の強調文字（カンプから採色・要確認） */

  /* --- 画像のベースパス。CMSの実パスに合わせてください --- */
  --rlp-img:"/img/usr/freepage/reos/lp";

  /* --- スケール単位 ---
     デザイン幅1280pxを基準に、1デザインpx = var(--rlp-s)。
     1281px以上はデザイン等倍、1280px以下は画面幅に比例して縮小。 */
  --rlp-s:1px;

  /* コンテンツ幅の半分。全幅ブロックの中で「コンテンツ右端／左端」に
     要素を合わせたいときに使う（画面が広くても外側に白が残る） */
  --rlp-half:calc(1231 * var(--rlp-s) / 2);

  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  color:var(--rlp-text);
  font-weight:500;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.rlp *{box-sizing:border-box}
.rlp img{max-width:100%;height:auto;display:block;border:0}
/* 段落の初期余白を消すだけのリセット。
   :where() で囲むと詳細度が 0 になるため、あとから
   .rlp-s02__cap{margin:...} のようにクラス名だけで上書きできる
   （p.rlp-s02__cap のように p を付ける必要がありません） */
:where(.rlp p){margin:0}

/* 改行の出し分け
   <br class="rlp-br--pc"> ... PCだけで改行する
   <br class="rlp-br--sp"> ... スマホだけで改行する */
.rlp-br--sp{display:none}

/* 一部の文字だけ黄色にしたいときに使う
   例）約<span class="rlp-yellow">0.0001</span>&#181;m */
.rlp-yellow{color:#DED47F}

@media screen and (max-width:1280px){ .rlp{--rlp-s:calc(100vw / 1280)} }
/* スマホはデザイン幅360pxを基準にする */
@media screen and (max-width:767px){
  .rlp{--rlp-s:calc(100vw / 360)}
  .rlp-br--pc{display:none}
  .rlp-br--sp{display:inline}
}

/* --- セクションの土台 --- */
.rlp-sec{position:relative;width:100%}
.rlp-inner{
  position:relative;z-index:2;
  width:100%;max-width:calc(1231 * var(--rlp-s));
  margin:0 auto;padding-left:calc(15 * var(--rlp-s));padding-right:calc(15 * var(--rlp-s));
}
@media screen and (max-width:767px){
  .rlp-inner{max-width:100%;padding-left:calc(20 * var(--rlp-s));padding-right:calc(20 * var(--rlp-s))}
}

/* --- セクション背景（全幅） --- */
.rlp-sec__bg{
  position:absolute;inset:0;z-index:1;
  background-position:center top;background-repeat:no-repeat;background-size:cover;
  pointer-events:none;
}

/* --- スクロールでふわっと表示（うるさくならない控えめな設定） --- */
.rlp-fade{
  opacity:0;transform:translateY(calc(24 * var(--rlp-s)));
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);
}
.rlp-fade.is-in{opacity:1;transform:none}
.rlp-fade[data-d="1"]{transition-delay:.10s}
.rlp-fade[data-d="2"]{transition-delay:.20s}
.rlp-fade[data-d="3"]{transition-delay:.30s}
.rlp-fade[data-d="4"]{transition-delay:.40s}

/* --- ルビ（PFAS -> ピーファス、RO -> アールオー、孔 -> あな など） ---
   親の文字サイズの45%を基本にしつつ、下限9px・上限18pxで頭打ちにする。
   こうしないと、145pxの「PFAS」ではルビが巨大になり、
   13pxの小さな本文ではルビが5px程度になって読めなくなります。 */
.rlp rt{
  font-size:clamp(calc(9 * var(--rlp-s)),.45em,calc(18 * var(--rlp-s)));
  font-weight:500;letter-spacing:.02em;transform:translateY(.3em);
}
.rlp ruby{ruby-position:over}

/* --- 傍点（・を文字の上に打つ） --- */
.rlp-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.rlp-dot{
  -webkit-text-emphasis:filled dot;text-emphasis:filled dot;
  -webkit-text-emphasis-color:var(--rlp-sub);text-emphasis-color:var(--rlp-sub);
  -webkit-text-emphasis-position:over right;text-emphasis-position:over right;
}

/* ============================================================================
   追従のお問合せボタン
   PC＝右下に常時／SP＝画面下に常時
   ============================================================================ */
/* このボタンは .rlp の外側に置くため、スケール変数を個別に持たせる
   （持たせないと calc() が無効になり、位置指定ごと効かなくなる） */
.rlp-float{--rlp-s:1px}
@media screen and (max-width:1280px){ .rlp-float{--rlp-s:calc(100vw / 1280)} }
@media screen and (max-width:767px){ .rlp-float{--rlp-s:calc(100vw / 360)} }

/* FVの「お問合せはこちら」と同じ見た目（濃紺の角ばったボタン）を、
   ページを開いた瞬間から常に右下に置く */
.rlp-float{
  position:fixed;z-index:9999;
  right:calc(24 * var(--rlp-s));bottom:calc(24 * var(--rlp-s));
  display:inline-flex;align-items:center;justify-content:center;
  background:#123a63;color:#fff;text-decoration:none;
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
  font-weight:500;
  /* FVの「お問合せはこちら」と同じ文字サイズ・同じ余白の比率 */
  font-size:calc(21 * var(--rlp-s));letter-spacing:.09em;line-height:1.5;
  padding:.85em 3.2em;
  box-shadow:0 calc(6 * var(--rlp-s)) calc(18 * var(--rlp-s)) rgba(18,58,99,.25);
  transition:background .25s,box-shadow .25s,opacity .4s ease,transform .4s cubic-bezier(.22,.61,.36,1),visibility .4s;
  /* FVが見えている間は隠しておき、FVを通り過ぎたら出す */
  opacity:0;visibility:hidden;transform:translateY(calc(16 * var(--rlp-s)));
}
.rlp-float.is-show{opacity:1;visibility:visible;transform:none}
.rlp-float:hover,.rlp-float:focus{
  background:#0d2d4e;color:#fff;text-decoration:none;
  box-shadow:0 calc(10 * var(--rlp-s)) calc(26 * var(--rlp-s)) rgba(18,58,99,.38);
}
@media screen and (max-width:767px){
  .rlp-float{
    right:calc(12 * var(--rlp-s));left:calc(12 * var(--rlp-s));bottom:calc(10 * var(--rlp-s));
    font-size:calc(15 * var(--rlp-s));
    padding:.9em 2em;
  }
}

/* ============================================================================
   s02　こんなお悩みございませんか？
   ============================================================================ */
.rlp-s02{padding:calc(90 * var(--rlp-s)) 0 calc(60 * var(--rlp-s))}
.rlp-s02 .rlp-sec__bg{
  background-image:url("/img/usr/freepage/reos/lp/s02_mizu_bg.jpg");
  background-size:cover;background-position:center;
}

/* --- 見出し --- */
.rlp-s02__head{position:relative;text-align:center;margin-bottom:calc(70 * var(--rlp-s))}
.rlp-s02__ttl{
  font-family:"Noto Serif JP",serif;font-weight:500;
  font-size:calc(56 * var(--rlp-s));line-height:1.5;letter-spacing:.1em;
  color:var(--rlp-sub);margin:0;
}
.rlp-s02__ttl b{font-weight:700;color:var(--rlp-navy)}
/* 見出し左右の斜線 */
.rlp-s02__slash{
  position:absolute;top:50%;transform:translateY(-50%);
  width:calc(57 * var(--rlp-s));height:auto;
}
.rlp-s02__slash--l{left:calc(150 * var(--rlp-s))}
.rlp-s02__slash--r{right:calc(150 * var(--rlp-s))}

/* --- カード --- */
.rlp-s02__list{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:calc(46 * var(--rlp-s)) calc(45 * var(--rlp-s));
}
.rlp-s02__item{
  position:relative;
  width:calc(345 * var(--rlp-s));
  background:#fff;border-radius:calc(18 * var(--rlp-s));
  padding:calc(14 * var(--rlp-s)) calc(14 * var(--rlp-s)) calc(30 * var(--rlp-s));
  box-shadow:0 calc(6 * var(--rlp-s)) calc(20 * var(--rlp-s)) rgba(30,80,130,.10);
}
/* 04・05は横長 */
.rlp-s02__item--wide{width:calc(563 * var(--rlp-s))}

.rlp-s02__num{
  position:absolute;top:calc(-35 * var(--rlp-s));left:50%;transform:translateX(-50%);
  width:calc(70 * var(--rlp-s));height:auto;z-index:3;
}
.rlp-s02__photo{
  width:100%;border-radius:calc(12 * var(--rlp-s));overflow:hidden;
  margin-bottom:calc(24 * var(--rlp-s));
}
.rlp-s02__photo img{width:100%}
.rlp-s02__photo .rlp-s02__sp{display:none}

.rlp-s02__cap{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(30 * var(--rlp-s));line-height:1.45;letter-spacing:.04em;
  color:var(--rlp-navy);text-align:center;margin:0 0 calc(16 * var(--rlp-s));
}
.rlp-s02__line{
  width:calc(100% - (40 * var(--rlp-s)));height:1px;margin:0 auto calc(16 * var(--rlp-s));
  background:rgba(29,84,163,.45);border:0;
}
.rlp-s02__txt{
  font-size:calc(20 * var(--rlp-s));line-height:1.75;letter-spacing:.02em;
  text-align:center;font-weight:500;
}

/* --- 下向きの矢印 --- */
.rlp-s02__arrow{
  width:calc(84 * var(--rlp-s));height:calc(44 * var(--rlp-s));
  margin:calc(60 * var(--rlp-s)) auto 0;
  background:var(--rlp-main);
  clip-path:polygon(0 0,100% 0,50% 100%);
}

/* --- s02 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s02{padding:calc(40 * var(--rlp-s)) 0 calc(30 * var(--rlp-s))}
  .rlp-s02__head{margin-bottom:calc(30 * var(--rlp-s))}
  .rlp-s02__ttl{font-size:calc(23 * var(--rlp-s));line-height:1.55}
  .rlp-s02__slash{width:calc(22 * var(--rlp-s))}
  .rlp-s02__slash--l{left:calc(18 * var(--rlp-s))}
  .rlp-s02__slash--r{right:calc(18 * var(--rlp-s))}

  .rlp-s02__list{gap:calc(16 * var(--rlp-s)) 0}
  .rlp-s02__item,
  .rlp-s02__item--wide{
    width:100%;
    display:flex;align-items:flex-start;gap:calc(14 * var(--rlp-s));
    padding:calc(14 * var(--rlp-s));
    border-radius:calc(12 * var(--rlp-s));
  }
  .rlp-s02__num{
    top:calc(6 * var(--rlp-s));left:calc(6 * var(--rlp-s));transform:none;
    width:calc(30 * var(--rlp-s));
  }
  .rlp-s02__photo{
    flex:none;width:calc(116 * var(--rlp-s));margin-bottom:0;
    border-radius:calc(8 * var(--rlp-s));
  }
  .rlp-s02__photo .rlp-s02__pc{display:none}
  .rlp-s02__photo .rlp-s02__sp{display:block}
  .rlp-s02__body{flex:1;min-width:0;padding-top:calc(2 * var(--rlp-s))}
  .rlp-s02__cap{
    font-size:calc(17 * var(--rlp-s));text-align:left;
    margin-bottom:calc(8 * var(--rlp-s));line-height:1.4;
  }
  .rlp-s02__line{width:100%;margin-bottom:calc(8 * var(--rlp-s))}
  .rlp-s02__txt{font-size:calc(13 * var(--rlp-s));text-align:left;line-height:1.7}
  .rlp-s02__arrow{width:calc(40 * var(--rlp-s));height:calc(22 * var(--rlp-s));margin-top:calc(26 * var(--rlp-s))}
}

/* ============================================================================
   s03　そのお悩み、逆浸透膜（RO）浄水器ならまとめて解決できます！
   ============================================================================ */
.rlp-s03{background:#fff;padding:calc(70 * var(--rlp-s)) 0 calc(80 * var(--rlp-s))}
.rlp-s03__wrap{position:relative;text-align:center}

.rlp-s03__lead{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(40 * var(--rlp-s));line-height:1.6;letter-spacing:.08em;
  color:var(--rlp-sub);margin:0;
}
.rlp-s03__main{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(73 * var(--rlp-s));line-height:1.4;letter-spacing:.04em;
  color:var(--rlp-navy);margin:calc(4 * var(--rlp-s)) 0 0;
}
.rlp-s03__main small{font-size:calc(40 * var(--rlp-s));color:var(--rlp-sub);letter-spacing:.08em}
.rlp-s03__sub{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(40 * var(--rlp-s));line-height:1.6;letter-spacing:.1em;
  color:var(--rlp-sub);margin:calc(10 * var(--rlp-s)) 0 0;
}
.rlp-s03__hr{
  width:calc(660 * var(--rlp-s));height:1px;border:0;
  background:rgba(29,84,163,.5);
  margin:calc(46 * var(--rlp-s)) auto calc(34 * var(--rlp-s));
}
.rlp-s03__drop{width:calc(31 * var(--rlp-s));height:auto;margin:0 auto calc(30 * var(--rlp-s))}
.rlp-s03__msg{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(40 * var(--rlp-s));line-height:1.7;letter-spacing:.1em;
  color:var(--rlp-navy);margin:0;
}
/* ロロ君 */
.rlp-s03__roro{position:absolute;z-index:2}
.rlp-s03__roro--tr{top:calc(-30 * var(--rlp-s));right:calc(10 * var(--rlp-s));width:calc(160 * var(--rlp-s))}
.rlp-s03__roro--bl{bottom:calc(-40 * var(--rlp-s));left:calc(20 * var(--rlp-s));width:calc(185 * var(--rlp-s))}

@media screen and (max-width:767px){
  .rlp-s03{padding:calc(34 * var(--rlp-s)) 0 calc(40 * var(--rlp-s))}
  .rlp-s03__lead{font-size:calc(17 * var(--rlp-s))}
  .rlp-s03__main{font-size:calc(28 * var(--rlp-s))}
  .rlp-s03__main small{font-size:calc(17 * var(--rlp-s))}
  .rlp-s03__sub{font-size:calc(17 * var(--rlp-s))}
  .rlp-s03__hr{width:calc(280 * var(--rlp-s));margin:calc(24 * var(--rlp-s)) auto calc(18 * var(--rlp-s))}
  .rlp-s03__drop{width:calc(16 * var(--rlp-s));margin-bottom:calc(16 * var(--rlp-s))}
  .rlp-s03__msg{font-size:calc(18 * var(--rlp-s))}
  .rlp-s03__roro--tr{top:calc(-14 * var(--rlp-s));right:calc(-6 * var(--rlp-s));width:calc(62 * var(--rlp-s))}
  .rlp-s03__roro--bl{bottom:calc(-18 * var(--rlp-s));left:calc(-6 * var(--rlp-s));width:calc(70 * var(--rlp-s))}
}

/* ============================================================================
   s04　PFASとは？
   ============================================================================ */
/* --- 上段：蛇口の写真 ＋ 左テキスト --- */
.rlp-s04__hero{position:relative;background:#fff;overflow:hidden;padding:calc(90 * var(--rlp-s)) 0 calc(80 * var(--rlp-s))}
.rlp-s04__heroImg{
  /* 写真の右端はコンテンツ幅の右端で止める（画面が広いと右側に白が残る） */
  position:absolute;top:0;bottom:0;z-index:1;
  right:calc(50% - var(--rlp-half));
  width:calc(620 * var(--rlp-s));
  background:url("/img/usr/freepage/reos/lp/s04_suido.jpg") center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 14%,#000 30%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.65) 14%,#000 30%);
}
/* 背景画像の左端から少し内側にテキストを置く */
.rlp-s04__heroTxt{
  position:relative;z-index:2;
  margin-left:calc(56 * var(--rlp-s));
  max-width:calc(600 * var(--rlp-s));
}

.rlp-s04__logo{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(145 * var(--rlp-s));line-height:1;letter-spacing:.02em;
  color:var(--rlp-navy);margin:0;
}
.rlp-s04__toha{
  font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(80 * var(--rlp-s));line-height:1.2;letter-spacing:.04em;
  color:var(--rlp-sub);margin:calc(6 * var(--rlp-s)) 0 0;
}
.rlp-s04__bar{
  width:calc(84 * var(--rlp-s));height:2px;border:0;background:var(--rlp-line);
  margin:calc(26 * var(--rlp-s)) 0 calc(22 * var(--rlp-s));
}
.rlp-s04__note{font-size:calc(18 * var(--rlp-s));line-height:1.7;font-weight:400;letter-spacing:.02em}
.rlp-s04__mid{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(40 * var(--rlp-s));line-height:1.55;letter-spacing:.05em;
  color:var(--rlp-navy);margin:calc(34 * var(--rlp-s)) 0 calc(34 * var(--rlp-s));
}
.rlp-s04__body{font-size:calc(22 * var(--rlp-s));line-height:2;letter-spacing:.02em}

/* --- 下段：世界地図の背景 ＋ テキスト ＋ ボタン --- */
.rlp-s04__world{
  position:relative;overflow:hidden;background:#fff;
  padding:calc(90 * var(--rlp-s)) 0 calc(100 * var(--rlp-s));
}
/* 背景もコンテンツ幅で止める（画面が広いと左右に白が残る） */
.rlp-s04__world::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:calc(1231 * var(--rlp-s));max-width:100%;z-index:0;
  background:url("/img/usr/freepage/reos/lp/s04_bg.jpg") center/cover no-repeat;
}
.rlp-s04__worldTxt{margin-left:calc(56 * var(--rlp-s));max-width:calc(640 * var(--rlp-s))}
.rlp-s04__worldTtl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(40 * var(--rlp-s));line-height:1.6;letter-spacing:.05em;
  color:var(--rlp-navy);margin:0 0 calc(34 * var(--rlp-s));
}

/* --- 共通ボタン（白地・ピル型） --- */
.rlp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:calc(18 * var(--rlp-s));
  background:#fff;color:var(--rlp-navy);text-decoration:none;
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(20 * var(--rlp-s));letter-spacing:.1em;line-height:1.5;
  min-width:calc(500 * var(--rlp-s));
  padding:calc(20 * var(--rlp-s)) calc(40 * var(--rlp-s));
  border:1px solid var(--rlp-main);border-radius:calc(60 * var(--rlp-s));
  transition:background .25s,color .25s,box-shadow .25s;
}
.rlp-btn:hover,.rlp-btn:focus{
  background:var(--rlp-main);color:#fff;text-decoration:none;
  box-shadow:0 calc(6 * var(--rlp-s)) calc(18 * var(--rlp-s)) rgba(7,81,155,.28);
}
.rlp-btn__arw{width:calc(9 * var(--rlp-s));height:calc(15 * var(--rlp-s));flex:none}
.rlp-s04__btnWrap{margin-top:calc(110 * var(--rlp-s))}

/* --- 締めのメッセージ --- */
.rlp-s04__closing{
  background:#fff;text-align:center;
  padding:calc(70 * var(--rlp-s)) 0 calc(60 * var(--rlp-s));
}
.rlp-s04__closing p{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(40 * var(--rlp-s));line-height:1.7;letter-spacing:.08em;
  color:var(--rlp-navy);margin:0;
}

/* --- s04 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s04__hero{padding:calc(30 * var(--rlp-s)) 0 calc(26 * var(--rlp-s))}
  .rlp-s04__heroImg{
    right:0;
    width:calc(173 * var(--rlp-s));top:calc(120 * var(--rlp-s));bottom:auto;height:calc(283 * var(--rlp-s));
    background-image:url("/img/usr/freepage/reos/lp/s04_suido_sp.jpg");
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 16%,#000 34%);
            mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 16%,#000 34%);
  }
  .rlp-s04__heroTxt{margin-left:0;max-width:100%}
  /* PFAS とは？ を横並び中央に */
  .rlp-s04__headSp{display:flex;align-items:baseline;justify-content:center;gap:calc(8 * var(--rlp-s))}
  .rlp-s04__logo{font-size:calc(40 * var(--rlp-s))}
  .rlp-s04__toha{font-size:calc(24 * var(--rlp-s));margin:0}
  .rlp-s04__bar{width:calc(60 * var(--rlp-s));margin:calc(12 * var(--rlp-s)) auto calc(14 * var(--rlp-s))}
  .rlp-s04__note{font-size:calc(12 * var(--rlp-s));text-align:center}
  .rlp-s04__mid{font-size:calc(17 * var(--rlp-s));margin:calc(20 * var(--rlp-s)) 0 calc(16 * var(--rlp-s));line-height:1.6}
  .rlp-s04__body{font-size:calc(13 * var(--rlp-s));line-height:1.9;max-width:calc(196 * var(--rlp-s))}

  .rlp-s04__world{
    padding:calc(30 * var(--rlp-s)) 0 calc(34 * var(--rlp-s));
  }
  /* スマホは画面いっぱいに敷く */
  .rlp-s04__world::before{
    width:100%;
    background-image:url("/img/usr/freepage/reos/lp/s04_bg_sp.jpg");
  }
  .rlp-s04__worldTxt{margin-left:0;max-width:100%}
  .rlp-s04__worldTtl{font-size:calc(17 * var(--rlp-s));margin-bottom:calc(16 * var(--rlp-s))}
  .rlp-s04__btnWrap{margin-top:calc(44 * var(--rlp-s))}
  .rlp-btn{
    min-width:0;width:calc(190 * var(--rlp-s));
    font-size:calc(13 * var(--rlp-s));gap:calc(10 * var(--rlp-s));
    padding:calc(12 * var(--rlp-s)) calc(16 * var(--rlp-s));
  }
  .rlp-btn__arw{width:calc(7 * var(--rlp-s));height:calc(11 * var(--rlp-s))}
  .rlp-s04__closing{padding:calc(26 * var(--rlp-s)) 0 calc(24 * var(--rlp-s))}
  .rlp-s04__closing p{font-size:calc(15 * var(--rlp-s))}
}

/* ============================================================================
   s05　逆浸透膜（RO膜）とは？
   ============================================================================ */
.rlp-s05__deep{
  position:relative;overflow:hidden;color:#fff;
  padding:calc(70 * var(--rlp-s)) 0 calc(70 * var(--rlp-s));
  background:#0a1f45 url("/img/usr/freepage/reos/lp/s05_bg_uchu.jpg") center top/cover no-repeat;
}
.rlp-s05__deep .rlp-inner{text-align:center}

.rlp-s05__ttl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(49 * var(--rlp-s));line-height:1.4;letter-spacing:.06em;
  color:#fff;margin:0 0 calc(18 * var(--rlp-s));
}
.rlp-s05__lead{font-size:calc(20 * var(--rlp-s));line-height:1.7;letter-spacing:.03em}

/* --- 0.0001um --- */
.rlp-s05__figure{
  display:flex;align-items:center;justify-content:center;
  gap:calc(16 * var(--rlp-s));margin:calc(24 * var(--rlp-s)) 0 calc(10 * var(--rlp-s));
}
.rlp-s05__figLabel{
  font-family:"Noto Serif JP",serif;font-weight:600;text-align:right;line-height:1.35;
}
.rlp-s05__figLabel span{display:block}
.rlp-s05__figLabel .l1{font-size:calc(30 * var(--rlp-s))}
.rlp-s05__figLabel .l2{font-size:calc(18 * var(--rlp-s))}
.rlp-s05__figNum{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(157 * var(--rlp-s));line-height:1;letter-spacing:0;
}
.rlp-s05__figUnit{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(62 * var(--rlp-s));line-height:1;align-self:flex-end;
  padding-bottom:calc(14 * var(--rlp-s));
}
.rlp-s05__figUnit sup{font-size:calc(16 * var(--rlp-s));vertical-align:super;font-weight:500}

.rlp-s05__ratio{
  font-family:"Noto Serif JP",serif;font-weight:600;
  font-size:calc(24 * var(--rlp-s));letter-spacing:.04em;margin:0 0 calc(46 * var(--rlp-s));
}
.rlp-s05__ratio em{font-style:normal;font-size:calc(36 * var(--rlp-s));font-weight:700}

/* --- 見出し付きの区切り線 --- */
.rlp-s05__divide{
  display:flex;align-items:center;gap:calc(24 * var(--rlp-s));
  font-size:calc(20 * var(--rlp-s));font-weight:400;letter-spacing:.06em;
  margin:0 0 calc(34 * var(--rlp-s));
}
.rlp-s05__divide::before,.rlp-s05__divide::after{
  content:"";flex:1;height:1px;background:rgba(255,255,255,.55);
}

/* --- 物質の比較 --- */
.rlp-s05__subs{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:calc(12 * var(--rlp-s));
}
.rlp-s05__sub{position:relative;width:calc(140 * var(--rlp-s));text-align:center}
/* 丸い窓。ここで切り抜くので、中の画像は自由に拡大・移動できます */
.rlp-s05__subImg{
  position:relative;width:calc(123 * var(--rlp-s));height:calc(123 * var(--rlp-s));
  margin:0 auto calc(14 * var(--rlp-s));
  border-radius:50%;overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
/* 元画像は「白い正方形の中に円が描かれ、その中に写真」という作りで、
   白フチの量も、写真の写り位置も1枚ずつ違います。そこで
     --rlp-zoom ... 拡大率（白フチを窓の外へ追い出す）
     --rlp-dx/dy ... 位置の微調整（被写体を窓の中心へ寄せる）
   を画像ごとに指定しています。数値だけで調整できます。 */
.rlp-s05__subImg img{
  position:absolute;left:50%;top:50%;
  width:calc(100% * var(--rlp-zoom,1));height:calc(100% * var(--rlp-zoom,1));
  max-width:none;object-fit:cover;
  transform:translate(-50%,-50%) translate(var(--rlp-dx,0px),var(--rlp-dy,0px));}
.rlp-s05__sub:nth-of-type(3) .rlp-s05__subImg img { top: 47.4%; left: 50.5%;}
.rlp-s05__sub:nth-of-type(4) .rlp-s05__subImg img { top: 45%; left: 52%;}
.rlp-s05__sub:nth-of-type(1){--rlp-zoom:1.18;--rlp-dx:0px;                    --rlp-dy:0px}                    /* 髪の毛 */
.rlp-s05__sub:nth-of-type(2){--rlp-zoom:1.36;--rlp-dx:calc(-2 * var(--rlp-s));--rlp-dy:calc(-1 * var(--rlp-s))} /* スギ花粉 */
.rlp-s05__sub:nth-of-type(3){--rlp-zoom:1.14;--rlp-dx:calc(1 * var(--rlp-s)); --rlp-dy:calc(-2 * var(--rlp-s))} /* 大腸菌 */
.rlp-s05__sub:nth-of-type(4){--rlp-zoom:1.30;--rlp-dx:0px;                    --rlp-dy:calc(6 * var(--rlp-s))}  /* ノロウイルス */
.rlp-s05__sub:nth-of-type(5){--rlp-zoom:1.20;--rlp-dx:0px;                    --rlp-dy:calc(1 * var(--rlp-s))}  /* PFAS */
.rlp-s05__sub:nth-of-type(6){--rlp-zoom:1.15;--rlp-dx:0px;                    --rlp-dy:0px}                    /* 逆浸透膜（RO膜） */
/* 逆浸透膜だけ黄色い枠。切り抜きで消えないよう、枠（窓）の側に付けます */
.rlp-s05__sub--ro .rlp-s05__subImg{box-shadow:0 0 0 calc(2 * var(--rlp-s)) var(--rlp-gold)}
/* チェックマーク。丸い窓は overflow:hidden なので、窓の外（.rlp-s05__sub）に置きます */
.rlp-s05__check{
  position:absolute;top:calc(-4 * var(--rlp-s));right:calc(50% - 67.5 * var(--rlp-s));
  width:calc(42 * var(--rlp-s));height:calc(42 * var(--rlp-s));
  background:var(--rlp-gold);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.rlp-s05__check svg{width:56%;height:56%;color:#fff}
.rlp-s05__subName{
  font-size:calc(20 * var(--rlp-s));font-weight:500;line-height:1.4;
  margin:0 0 calc(20 * var(--rlp-s));white-space:nowrap;
}
.rlp-s05__subSize{font-size:calc(20 * var(--rlp-s));font-weight:500;white-space:nowrap}
.rlp-s05__sub--ro .rlp-s05__subName{color:var(--rlp-gold)}

/* PCのみ：カーソルを合わせると拡大。
   画像側は切り抜きの倍率と連動しているので、枠ごと拡大します */
@media screen and (min-width:768px) and (hover:hover){
  .rlp-s05__subImg:hover{transform:scale(1.16)}
}

.rlp-s05__note1{
  font-size:calc(15 * var(--rlp-s));font-weight:400;letter-spacing:.02em;
  margin:calc(30 * var(--rlp-s)) 0 0;
}

/* --- 枠内メッセージ ---
   背景の光の筋に文字が埋もれないよう、濃紺のすりガラスを浮かせている */
.rlp-s05__box{
  position:relative;
  background:rgba(6,20,50,.62);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.35);border-radius:calc(20 * var(--rlp-s));
  box-shadow:0 calc(16 * var(--rlp-s)) calc(44 * var(--rlp-s)) rgba(0,8,30,.5);
  padding:calc(34 * var(--rlp-s)) calc(30 * var(--rlp-s)) calc(38 * var(--rlp-s));
  margin:calc(120 * var(--rlp-s)) auto 0;max-width:calc(790 * var(--rlp-s));
  color:#fff;
  font-size:calc(20 * var(--rlp-s));font-weight:500;line-height:1.9;
}
.rlp-s05__box b{color:var(--rlp-gold);font-weight:700;font-size:calc(26 * var(--rlp-s));font-family:"Noto Serif JP",serif}

/* --- ROページへの導線（2行のボタン） --- */
.rlp-s05__linkWrap{margin-top:calc(84 * var(--rlp-s))}
.rlp-btn--2line{
  min-width:calc(350 * var(--rlp-s));text-align:left;
  gap:calc(12 * var(--rlp-s));padding:calc(11 * var(--rlp-s)) calc(24 * var(--rlp-s));
}
.rlp-btn--2line .t{display:block;font-size:calc(14 * var(--rlp-s));line-height:1.4}
.rlp-btn--2line .s{
  display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-weight:500;
  font-size:calc(10 * var(--rlp-s));letter-spacing:.04em;margin-top:calc(3 * var(--rlp-s));
}
.rlp-btn--2line .rlp-btn__arw{width:calc(6 * var(--rlp-s));height:calc(10 * var(--rlp-s))}

/* --- 下段：ご家庭のキッチンへ --- */
.rlp-s05__home{
  position:relative;overflow:hidden;
  padding:calc(80 * var(--rlp-s)) 0 calc(90 * var(--rlp-s));
  background:#fff url("/img/usr/freepage/reos/lp/s05_bg_mizu.jpg") center bottom/cover no-repeat;
}
/* タイトル・本文・動画をグリッドで置く。
   こうしておくと、スマホでは並び順（order）だけで
   「タイトル -> 動画 -> 本文 -> ボタン」に組み替えられる */
.rlp-s05__homeGrid{
  display:grid;
  grid-template-columns:calc(470 * var(--rlp-s)) 1fr;
  column-gap:calc(50 * var(--rlp-s));
  align-items:start;
}
.rlp-s05__homeTtl{grid-column:1;grid-row:1}
.rlp-s05__homeTxt{grid-column:1;grid-row:2}
.rlp-s05__movieCol{grid-column:2;grid-row:1 / 3}
.rlp-s05__homeTtl,.rlp-s05__homeTxt{padding-left:calc(56 * var(--rlp-s))}
.rlp-s05__homeTtl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(40 * var(--rlp-s));line-height:1.5;letter-spacing:.06em;
  color:var(--rlp-navy);margin:0 0 calc(30 * var(--rlp-s));
}
.rlp-s05__homeBody{font-size:calc(22 * var(--rlp-s));line-height:2;margin-bottom:calc(84 * var(--rlp-s))}

/* 動画を視聴する（グレーのボタン） */
.rlp-btn--movie{
  display:inline-flex;align-items:center;justify-content:center;gap:calc(11 * var(--rlp-s));
  background:#dfe3e6;color:var(--rlp-text);text-decoration:none;
  font-family:"Noto Serif JP",serif;font-weight:900;
  font-size:calc(17 * var(--rlp-s));letter-spacing:.06em;
  padding:calc(9 * var(--rlp-s)) calc(24 * var(--rlp-s));
  border-radius:calc(4 * var(--rlp-s));
  transition:background .25s,color .25s;
}
.rlp-btn--movie:hover,.rlp-btn--movie:focus{background:var(--rlp-main);color:#fff;text-decoration:none}
.rlp-btn--movie svg{width:calc(23 * var(--rlp-s));height:calc(23 * var(--rlp-s));flex:none}

/* お問合せ（紺のボタン） */
.rlp-btn--contact{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--rlp-main);color:#fff;text-decoration:none;
  font-family:"Noto Serif JP",serif;font-weight:900;
  font-size:calc(35 * var(--rlp-s));letter-spacing:.08em;
  padding:calc(20 * var(--rlp-s)) calc(60 * var(--rlp-s));
  transition:background .25s,box-shadow .25s;
}
.rlp-btn--contact:hover,.rlp-btn--contact:focus{
  background:#0a6ac9;color:#fff;text-decoration:none;
  box-shadow:0 calc(6 * var(--rlp-s)) calc(18 * var(--rlp-s)) rgba(7,81,155,.3);
}

/* 動画（クリックで読み込むYouTube） */
.rlp-s05__movieCol{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-end}
.rlp-yt{
  position:relative;width:100%;aspect-ratio:16/9;cursor:pointer;
  background:#0a1f45 center/cover no-repeat;border:0;padding:0;display:block;overflow:hidden;
}
.rlp-yt__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(74 * var(--rlp-s));height:calc(74 * var(--rlp-s));
  background:rgba(10,31,69,.85);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s,transform .25s;
}
.rlp-yt:hover .rlp-yt__play{background:var(--rlp-main);transform:translate(-50%,-50%) scale(1.08)}
.rlp-yt__play svg{width:38%;height:38%;color:#fff;margin-left:8%}
.rlp-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* --- s05 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s05__deep{
    padding:calc(30 * var(--rlp-s)) 0 calc(26 * var(--rlp-s));
    background-image:url("/img/usr/freepage/reos/lp/s05_bg_uchu_sp.jpg");
  }
  .rlp-s05__ttl{font-size:calc(19 * var(--rlp-s));margin-bottom:calc(10 * var(--rlp-s))}
  .rlp-s05__lead{font-size:calc(13 * var(--rlp-s))}
  .rlp-s05__figure{gap:calc(6 * var(--rlp-s));margin:calc(12 * var(--rlp-s)) 0 calc(6 * var(--rlp-s))}
  .rlp-s05__figLabel .l1{font-size:calc(13 * var(--rlp-s))}
  .rlp-s05__figLabel .l2{font-size:calc(10 * var(--rlp-s))}
  .rlp-s05__figNum{font-size:calc(46 * var(--rlp-s))}
  .rlp-s05__figUnit{font-size:calc(18 * var(--rlp-s));padding-bottom:calc(4 * var(--rlp-s))}
  .rlp-s05__figUnit sup{font-size:calc(8 * var(--rlp-s))}
  .rlp-s05__ratio{font-size:calc(13 * var(--rlp-s));margin-bottom:calc(24 * var(--rlp-s));line-height:1.7}
  .rlp-s05__ratio em{font-size:calc(19 * var(--rlp-s))}
  .rlp-s05__divide{font-size:calc(12 * var(--rlp-s));gap:calc(10 * var(--rlp-s));margin-bottom:calc(20 * var(--rlp-s))}

  /* 3列2段 */
  .rlp-s05__subs{flex-wrap:wrap;justify-content:center;gap:calc(20 * var(--rlp-s)) calc(6 * var(--rlp-s))}
  .rlp-s05__sub{width:calc(33.333% - (4 * var(--rlp-s)))}
  .rlp-s05__subImg{width:calc(74 * var(--rlp-s));height:calc(74 * var(--rlp-s));margin-bottom:calc(8 * var(--rlp-s))}
  .rlp-s05__check{width:calc(24 * var(--rlp-s));height:calc(24 * var(--rlp-s));top:calc(-2 * var(--rlp-s));right:calc(50% - 35 * var(--rlp-s))}
  .rlp-s05__subName{font-size:calc(12 * var(--rlp-s));margin-bottom:calc(4 * var(--rlp-s))}
  .rlp-s05__subSize{font-size:calc(12 * var(--rlp-s))}

  .rlp-s05__box{
    margin-top:calc(26 * var(--rlp-s));padding:calc(16 * var(--rlp-s)) calc(14 * var(--rlp-s));
    font-size:calc(12 * var(--rlp-s));line-height:1.8;border-radius:calc(10 * var(--rlp-s));
    box-shadow:0 calc(8 * var(--rlp-s)) calc(22 * var(--rlp-s)) rgba(0,8,30,.45),0 0 0 calc(3 * var(--rlp-s)) rgba(255,255,255,.14);
  }
  .rlp-s05__box b{font-size:calc(14 * var(--rlp-s))}
  .rlp-s05__linkWrap{margin-top:calc(34 * var(--rlp-s))}
  .rlp-btn--2line{min-width:0;width:100%;justify-content:space-between;padding:calc(11 * var(--rlp-s)) calc(18 * var(--rlp-s))}
  .rlp-btn--2line .t{font-size:calc(14 * var(--rlp-s))}
  .rlp-btn--2line .s{font-size:calc(11 * var(--rlp-s));line-height:1.5}
  .rlp-s05__note1{font-size:calc(10 * var(--rlp-s));margin-top:calc(14 * var(--rlp-s));text-align:left}

  .rlp-s05__home{
    padding:calc(30 * var(--rlp-s)) 0 calc(40 * var(--rlp-s));
    background-image:url("/img/usr/freepage/reos/lp/s05_bg_mizu_sp.jpg");
  }
  /* 縦1列にして「タイトル -> 動画 -> 本文 -> ボタン」の順に並べ替える */
  .rlp-s05__homeGrid{display:flex;flex-direction:column;gap:calc(14 * var(--rlp-s))}
  .rlp-s05__homeTtl{order:1;font-size:calc(19 * var(--rlp-s));text-align:center;margin-bottom:0;padding-left:0}
  .rlp-s05__movieCol{order:2;width:100%;align-items:stretch}
  .rlp-s05__homeTxt{order:3;width:100%;padding-left:0}
  .rlp-s05__homeBody{font-size:calc(13 * var(--rlp-s));line-height:1.8;margin-bottom:calc(34 * var(--rlp-s))}
  .rlp-s05__btnCol{width:100%;display:flex;flex-direction:column;align-items:center;gap:calc(12 * var(--rlp-s))}
  .rlp-btn--movie{
    font-size:calc(15 * var(--rlp-s));gap:calc(10 * var(--rlp-s));
    padding:calc(9 * var(--rlp-s)) calc(30 * var(--rlp-s));border-radius:calc(4 * var(--rlp-s));
  }
  .rlp-btn--movie svg{width:calc(20 * var(--rlp-s));height:calc(20 * var(--rlp-s))}
  .rlp-btn--contact{
    font-size:calc(16 * var(--rlp-s));width:100%;
    padding:calc(11 * var(--rlp-s)) calc(20 * var(--rlp-s));
    border:calc(2 * var(--rlp-s)) solid #fff;
  }
  .rlp-yt__play{width:calc(44 * var(--rlp-s));height:calc(44 * var(--rlp-s))}
}

/* ============================================================================
   s06　浄水器は、何を基準に選びますか？
   ============================================================================ */
.rlp-s06{background:#fff;padding:calc(80 * var(--rlp-s)) 0 calc(90 * var(--rlp-s))}
.rlp-s06__ttl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(50 * var(--rlp-s));line-height:1.4;letter-spacing:.06em;
  color:var(--rlp-navy);text-align:center;margin:0 0 calc(22 * var(--rlp-s));
}
.rlp-s06__lead{
  font-size:calc(25 * var(--rlp-s));font-weight:700;line-height:1.6;letter-spacing:.03em;
  text-align:center;margin:0 0 calc(34 * var(--rlp-s));
}
/* 黄色いマーカー */
.rlp-mark{background:linear-gradient(transparent 62%,#FBEE7C 62%);padding:0 .1em}

.rlp-s06__box{
  border:calc(2 * var(--rlp-s)) solid var(--rlp-main);border-radius:calc(14 * var(--rlp-s));
  text-align:center;padding:calc(24 * var(--rlp-s)) calc(20 * var(--rlp-s)) calc(28 * var(--rlp-s));
  margin:0 0 calc(50 * var(--rlp-s));
}
.rlp-s06__boxSub{font-size:calc(25 * var(--rlp-s));font-weight:700;color:var(--rlp-navy);line-height:1.6}
.rlp-s06__boxMain{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(40 * var(--rlp-s));line-height:1.5;letter-spacing:.04em;
  color:var(--rlp-navy);margin-top:calc(6 * var(--rlp-s));
}

/* --- 2カラムの比較 --- */
.rlp-s06__cols{display:flex;gap:calc(24 * var(--rlp-s));align-items:flex-start}
.rlp-s06__col{
  flex:1;min-width:0;background:#fff;
  border:1px solid #dcdfe3;border-radius:calc(12 * var(--rlp-s));overflow:hidden;
}
.rlp-s06__head{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(28 * var(--rlp-s));line-height:1.5;letter-spacing:.04em;
  color:#fff;text-align:center;padding:calc(12 * var(--rlp-s)) calc(10 * var(--rlp-s));
}
.rlp-s06__col--ro   .rlp-s06__head{background:var(--rlp-main)}
.rlp-s06__col--std  .rlp-s06__head{background:#8c8c8c}

.rlp-s06__body{padding:calc(26 * var(--rlp-s)) calc(24 * var(--rlp-s)) calc(28 * var(--rlp-s))}
.rlp-s06__sub{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(26 * var(--rlp-s));line-height:1.5;letter-spacing:.02em;
  text-align:center;margin:0 0 calc(20 * var(--rlp-s));
}
.rlp-s06__col--ro  .rlp-s06__sub{color:var(--rlp-navy)}
.rlp-s06__col--std .rlp-s06__sub{color:#7a7a7a}
.rlp-s06__txt{
  font-size:calc(20 * var(--rlp-s));line-height:1.75;text-align:center;
  margin:0 0 calc(24 * var(--rlp-s));
}
.rlp-s06__fig{margin:0 0 calc(10 * var(--rlp-s))}
.rlp-s06__fig img{width:100%}
.rlp-s06__figCap{
  font-size:calc(18 * var(--rlp-s));font-weight:700;line-height:1.5;
  text-align:center;margin:0 0 calc(26 * var(--rlp-s));
}
.rlp-s06__band{
  font-size:calc(20 * var(--rlp-s));font-weight:700;letter-spacing:.04em;
  color:#fff;text-align:center;border-radius:calc(60 * var(--rlp-s));
  padding:calc(8 * var(--rlp-s)) calc(16 * var(--rlp-s));
  margin:0 auto calc(22 * var(--rlp-s));max-width:calc(430 * var(--rlp-s));
}
.rlp-s06__col--ro  .rlp-s06__band{background:var(--rlp-main)}
.rlp-s06__col--std .rlp-s06__band{background:#8c8c8c}
.rlp-s06__graph{margin:0 0 calc(24 * var(--rlp-s))}
.rlp-s06__graph img{width:100%}

/* チェック項目 */
.rlp-s06__checks{
  border-radius:calc(10 * var(--rlp-s));
  padding:calc(18 * var(--rlp-s)) calc(18 * var(--rlp-s)) calc(16 * var(--rlp-s));
}
.rlp-s06__col--ro  .rlp-s06__checks{background:#EAF2FB}
.rlp-s06__col--std .rlp-s06__checks{background:#F3F3F3}
.rlp-s06__checks li{
  list-style:none;display:flex;gap:calc(10 * var(--rlp-s));align-items:flex-start;
  font-size:calc(16 * var(--rlp-s));font-weight:700;line-height:1.6;
  margin-bottom:calc(10 * var(--rlp-s));
}
.rlp-s06__checks li:last-child{margin-bottom:0}
.rlp-s06__checks ul{margin:0;padding:0}
.rlp-s06__col--ro  .rlp-s06__checks li{color:var(--rlp-navy)}
.rlp-s06__col--std .rlp-s06__checks li{color:#6f6f6f}
.rlp-s06__chk{
  flex:none;width:calc(20 * var(--rlp-s));height:calc(20 * var(--rlp-s));
  margin-top:calc(3 * var(--rlp-s));border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.rlp-s06__col--ro  .rlp-s06__chk{background:var(--rlp-main);color:#fff}
.rlp-s06__col--std .rlp-s06__chk{background:transparent;color:#9a9a9a;box-shadow:inset 0 0 0 1px #b5b5b5}
.rlp-s06__chk svg{width:62%;height:62%}
.rlp-s06__note{
  font-size:calc(12 * var(--rlp-s));font-weight:400;text-align:right;
  margin-top:calc(12 * var(--rlp-s));color:#666;
}

/* 開閉ボタン（スマホのみ表示） */
.rlp-s06__toggle{display:none}

/* --- s06 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s06{padding:calc(34 * var(--rlp-s)) 0 calc(30 * var(--rlp-s))}
  .rlp-s06__ttl{font-size:calc(20 * var(--rlp-s));margin-bottom:calc(14 * var(--rlp-s))}
  .rlp-s06__lead{font-size:calc(14 * var(--rlp-s));margin-bottom:calc(18 * var(--rlp-s))}
  .rlp-s06__box{
    border-width:calc(1.5 * var(--rlp-s));border-radius:calc(8 * var(--rlp-s));
    padding:calc(14 * var(--rlp-s)) calc(12 * var(--rlp-s));margin-bottom:calc(26 * var(--rlp-s));
  }
  .rlp-s06__boxSub{font-size:calc(13 * var(--rlp-s))}
  .rlp-s06__boxMain{font-size:calc(18 * var(--rlp-s));margin-top:calc(8 * var(--rlp-s))}

  /* スマホは「一般的な浄水器」を先に出す */
  .rlp-s06__cols{flex-direction:column;gap:calc(20 * var(--rlp-s))}
  .rlp-s06__col--std{order:1}
  .rlp-s06__col--ro{order:2}

  .rlp-s06__head{font-size:calc(15 * var(--rlp-s));padding:calc(8 * var(--rlp-s))}
  .rlp-s06__body{padding:calc(16 * var(--rlp-s)) calc(14 * var(--rlp-s)) calc(6 * var(--rlp-s))}
  .rlp-s06__sub{font-size:calc(13 * var(--rlp-s));margin-bottom:calc(12 * var(--rlp-s))}
  .rlp-s06__txt{font-size:calc(12 * var(--rlp-s));margin-bottom:calc(14 * var(--rlp-s))}
  .rlp-s06__figCap{font-size:calc(12 * var(--rlp-s));margin-bottom:calc(6 * var(--rlp-s))}
  .rlp-s06__band{font-size:calc(13 * var(--rlp-s));max-width:100%}
  .rlp-s06__checks li{font-size:calc(11 * var(--rlp-s))}
  .rlp-s06__chk{width:calc(14 * var(--rlp-s));height:calc(14 * var(--rlp-s))}
  .rlp-s06__note{font-size:calc(9 * var(--rlp-s))}

  /* 初期は閉じている。タップでグラフ以降が開く */
  .rlp-s06__more{
    max-height:0;overflow:hidden;
    transition:max-height .5s cubic-bezier(.4,0,.2,1);
  }
  .rlp-s06__col.is-open .rlp-s06__more{max-height:calc(1400 * var(--rlp-s))}
  .rlp-s06__toggle{
    display:flex;align-items:center;justify-content:center;
    width:100%;background:none;border:0;cursor:pointer;
    padding:calc(10 * var(--rlp-s)) 0 calc(12 * var(--rlp-s));
  }
  .rlp-s06__toggle svg{
    width:calc(26 * var(--rlp-s));height:calc(15 * var(--rlp-s));
    transition:transform .4s cubic-bezier(.4,0,.2,1);
  }
  .rlp-s06__col--ro  .rlp-s06__toggle svg{color:var(--rlp-navy)}
  .rlp-s06__col--std .rlp-s06__toggle svg{color:#9a9a9a}
  .rlp-s06__col.is-open .rlp-s06__toggle svg{transform:rotate(180deg)}
}

/* ============================================================================
   動きを減らす設定の端末では、アニメーションを無効にする
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  .rlp-fade{opacity:1;transform:none;transition:none}
  .rlp-float{transition:none}
}

/* ============================================================================
   s07　PFASの除去も、継続力が違う。
   ============================================================================ */
.rlp-s07{background:#fff;padding:calc(20 * var(--rlp-s)) 0 0}

/* --- 上：薄水色の枠 --- */
.rlp-s07__top{
  background:#EFF5FC;border-radius:calc(16 * var(--rlp-s));
  padding:calc(40 * var(--rlp-s)) calc(50 * var(--rlp-s)) calc(50 * var(--rlp-s));
}
.rlp-s07__ttlRow{display:flex;align-items:flex-start;gap:calc(20 * var(--rlp-s));margin-bottom:calc(16 * var(--rlp-s))}
.rlp-s07__drop{width:calc(48 * var(--rlp-s));flex:none;margin-top:calc(4 * var(--rlp-s))}
.rlp-s07__ttl{
  font-family:"Noto Serif JP",serif;font-weight:900;
  font-size:calc(32 * var(--rlp-s));line-height:1.5;letter-spacing:.04em;
  color:var(--rlp-navy);margin:0;
}
.rlp-s07__lead{font-size:calc(20 * var(--rlp-s));line-height:1.8;margin:0 0 calc(30 * var(--rlp-s));padding-left:calc(68 * var(--rlp-s))}

.rlp-s07__cards{display:flex;gap:calc(30 * var(--rlp-s));padding:0 calc(28 * var(--rlp-s))}
.rlp-s07__card{
  flex:1;min-width:0;background:#fff;
  border-radius:calc(12 * var(--rlp-s));overflow:hidden;
  box-shadow:0 calc(3 * var(--rlp-s)) calc(10 * var(--rlp-s)) rgba(30,80,130,.08);
}
.rlp-s07__cardHead{
  font-size:calc(25 * var(--rlp-s));font-weight:700;letter-spacing:.04em;
  color:#fff;text-align:center;padding:calc(10 * var(--rlp-s));
}
.rlp-s07__card--ro  .rlp-s07__cardHead{background:var(--rlp-main)}
.rlp-s07__card--std .rlp-s07__cardHead{background:#767676}
.rlp-s07__cardTxt{
  font-size:calc(23 * var(--rlp-s));font-weight:700;text-align:center;
  padding:calc(20 * var(--rlp-s)) calc(12 * var(--rlp-s)) calc(10 * var(--rlp-s));
}
.rlp-s07__card--ro  .rlp-s07__cardTxt{color:var(--rlp-navy)}
.rlp-s07__card--std .rlp-s07__cardTxt{color:#333}
.rlp-s07__cardFig{padding:0 calc(16 * var(--rlp-s)) calc(18 * var(--rlp-s))}
.rlp-s07__cardFig img{width:100%}

/* --- 区切りの三角 --- */
.rlp-s07__arrow{
  width:calc(84 * var(--rlp-s));height:calc(44 * var(--rlp-s));
  margin:0 auto;
  background:var(--rlp-main);clip-path:polygon(0 0,100% 0,50% 100%);
  position:relative;z-index:3;
}

/* --- 下：だから、選ぶなら --- */
.rlp-s07__bottom{
  position:relative;overflow:hidden;background:#F1F7FD;
  padding:calc(46 * var(--rlp-s)) 0 calc(56 * var(--rlp-s));
}
.rlp-s07__reos{
  position:absolute;bottom:calc(20 * var(--rlp-s));z-index:1;
  right:calc(50% - var(--rlp-half));
  width:calc(300 * var(--rlp-s));
}
.rlp-s07__because{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(25 * var(--rlp-s));letter-spacing:.06em;
  color:#7f9ec2;margin:0 0 calc(2 * var(--rlp-s));padding-left:calc(30 * var(--rlp-s));
}
.rlp-s07__catch{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(50 * var(--rlp-s));line-height:1.4;letter-spacing:.02em;
  color:var(--rlp-navy);margin:0 0 calc(26 * var(--rlp-s));
}
.rlp-s07__catch small{font-size:calc(38 * var(--rlp-s))}
.rlp-s07__body{
  font-size:calc(20 * var(--rlp-s));line-height:1.95;
  margin:0 0 calc(34 * var(--rlp-s));padding-left:calc(30 * var(--rlp-s));
}

.rlp-s07__points{display:flex;gap:calc(22 * var(--rlp-s));position:relative;z-index:2}
.rlp-s07__point{
  width:calc(340 * var(--rlp-s));background:#fff;border-radius:calc(10 * var(--rlp-s));
  display:flex;align-items:center;gap:calc(16 * var(--rlp-s));
  padding:calc(16 * var(--rlp-s)) calc(18 * var(--rlp-s));
  box-shadow:0 calc(3 * var(--rlp-s)) calc(10 * var(--rlp-s)) rgba(30,80,130,.07);
}
.rlp-s07__point img{width:calc(54 * var(--rlp-s));flex:none}
.rlp-s07__point p{
  font-size:calc(19 * var(--rlp-s));font-weight:700;line-height:1.5;
  color:var(--rlp-navy);
}

/* --- s07 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s07{padding-top:calc(10 * var(--rlp-s))}
  .rlp-s07__top{padding:calc(18 * var(--rlp-s)) calc(14 * var(--rlp-s)) calc(20 * var(--rlp-s));border-radius:calc(10 * var(--rlp-s))}
  .rlp-s07__ttlRow{gap:calc(8 * var(--rlp-s));align-items:center;justify-content:center;margin-bottom:calc(10 * var(--rlp-s))}
  .rlp-s07__drop{width:calc(20 * var(--rlp-s));margin-top:0}
  .rlp-s07__ttl{font-size:calc(15 * var(--rlp-s))}
  .rlp-s07__lead{font-size:calc(12 * var(--rlp-s));padding-left:0;margin-bottom:calc(18 * var(--rlp-s));line-height:1.9}
  .rlp-s07__cards{flex-direction:column;gap:calc(16 * var(--rlp-s));padding:0}
  .rlp-s07__cardHead{font-size:calc(14 * var(--rlp-s));padding:calc(7 * var(--rlp-s))}
  .rlp-s07__cardTxt{font-size:calc(13 * var(--rlp-s));padding:calc(12 * var(--rlp-s)) calc(10 * var(--rlp-s)) calc(4 * var(--rlp-s))}
  .rlp-s07__cardFig{padding:0 calc(20 * var(--rlp-s)) calc(14 * var(--rlp-s))}
  .rlp-s07__arrow{width:calc(38 * var(--rlp-s));height:calc(20 * var(--rlp-s))}

  .rlp-s07__bottom{padding:calc(24 * var(--rlp-s)) 0 calc(28 * var(--rlp-s))}
  .rlp-s07__because{font-size:calc(13 * var(--rlp-s));padding-left:calc(10 * var(--rlp-s))}
  .rlp-s07__catch{font-size:calc(21 * var(--rlp-s));margin-bottom:calc(14 * var(--rlp-s))}
  .rlp-s07__catch small{font-size:calc(16 * var(--rlp-s))}
  .rlp-s07__body{font-size:calc(12 * var(--rlp-s));padding-left:calc(10 * var(--rlp-s));margin-bottom:calc(18 * var(--rlp-s));line-height:1.9}
  .rlp-s07__reos{right:calc(-10 * var(--rlp-s));bottom:calc(10 * var(--rlp-s));width:calc(120 * var(--rlp-s))}
  .rlp-s07__points{flex-direction:column;gap:calc(12 * var(--rlp-s))}
  .rlp-s07__point{width:calc(230 * var(--rlp-s));gap:calc(10 * var(--rlp-s));padding:calc(10 * var(--rlp-s)) calc(12 * var(--rlp-s))}
  .rlp-s07__point img{width:calc(30 * var(--rlp-s))}
  .rlp-s07__point p{font-size:calc(11 * var(--rlp-s))}
}

/* ============================================================================
   s08　除去可能物質一覧 ／ 他方式との除去性能比較データ
   ============================================================================ */
.rlp-s08{
  position:relative;background:#fff;
  padding:calc(80 * var(--rlp-s)) 0 calc(80 * var(--rlp-s));
}
.rlp-s08 .rlp-sec__bg{background-image:url("/img/usr/freepage/reos/lp/s08_bg.jpg")}

.rlp-s08__ttl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(45 * var(--rlp-s));line-height:1.4;letter-spacing:.06em;
  color:var(--rlp-navy);text-align:center;margin:0 0 calc(20 * var(--rlp-s));
}
.rlp-s08__lead{
  font-size:calc(22 * var(--rlp-s));line-height:1.7;text-align:center;
  margin:0 0 calc(40 * var(--rlp-s));
}

/* --- 除去可能物質のカード --- */
.rlp-s08__grid{display:flex;flex-wrap:wrap;gap:calc(14 * var(--rlp-s));justify-content:center}
.rlp-s08__cell{
  width:calc((100% - (70 * var(--rlp-s))) / 6);
  background:rgba(255,255,255,.9);border:1px solid #cddff0;
  border-radius:calc(10 * var(--rlp-s));
  padding:calc(20 * var(--rlp-s)) calc(8 * var(--rlp-s)) calc(18 * var(--rlp-s));
  text-align:center;display:flex;flex-direction:column;
}
.rlp-s08__ico{height:calc(120 * var(--rlp-s));display:flex;align-items:center;justify-content:center;margin-bottom:calc(14 * var(--rlp-s))}
.rlp-s08__ico img{max-height:100%;width:auto}
.rlp-s08__name{
  font-size:calc(27 * var(--rlp-s));font-weight:700;line-height:1.3;
  color:var(--rlp-navy);margin:0 0 calc(14 * var(--rlp-s));
}
.rlp-s08__desc{
  font-size:calc(18 * var(--rlp-s));font-weight:700;line-height:1.5;
  color:var(--rlp-navy);margin-top:auto;
}
.rlp-s08__note{
  font-size:calc(18 * var(--rlp-s));font-weight:500;text-align:center;
  margin:calc(24 * var(--rlp-s)) 0 0;
}

/* --- 比較表（HTMLの表。PCは横組み、スマホは縦組みに組み替えます） --- */
.rlp-s08__tableSec{margin-top:calc(90 * var(--rlp-s))}
.rlp-s08__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rlp-s08__table{
  width:100%;border-collapse:collapse;background:#fff;
  border:1px solid #b9cfe4;border-radius:calc(10 * var(--rlp-s));overflow:hidden;
  font-size:calc(15 * var(--rlp-s));
}
.rlp-s08__table th,.rlp-s08__table td{border:1px solid #cddff0;text-align:center;vertical-align:middle}
/* 見出し行（不純物名は縦書き） */
.rlp-s08__table thead th{
  background:#F4F8FC;color:#123a63;font-weight:700;
  padding:calc(10 * var(--rlp-s)) calc(4 * var(--rlp-s));
  height:calc(180 * var(--rlp-s));
}
.rlp-s08__vt{
  writing-mode:vertical-rl;text-orientation:upright;
  margin:0 auto;line-height:1.35;letter-spacing:.04em;
  white-space:nowrap;
}
/* 左上の角。斜線で「不純物」と「フィルタの種類」を分ける */
.rlp-s08__corner{
  position:relative;min-width:calc(150 * var(--rlp-s));text-align:left;
  background:
    linear-gradient(to bottom right,
      transparent calc(50% - 0.5px),#cddff0 50%,transparent calc(50% + 0.5px)),
    #F4F8FC;
}
.rlp-s08__corner span{display:block;font-size:calc(15 * var(--rlp-s))}
.rlp-s08__corner .u{text-align:right;padding-right:calc(12 * var(--rlp-s))}
.rlp-s08__corner .d{text-align:left;padding-left:calc(6 * var(--rlp-s));margin-top:calc(58 * var(--rlp-s))}
/* 行見出し */
.rlp-s08__table tbody th{
  background:#fff;color:#123a63;font-weight:700;
  font-size:calc(18 * var(--rlp-s));line-height:1.4;
  padding:calc(12 * var(--rlp-s)) calc(10 * var(--rlp-s));white-space:nowrap;
}
.rlp-s08__table tbody td{padding:calc(12 * var(--rlp-s)) calc(4 * var(--rlp-s));font-size:calc(22 * var(--rlp-s));color:var(--rlp-navy)}
/* RO行は紺 */
.rlp-s08__table tr.is-ro th,.rlp-s08__table tr.is-ro td{background:var(--rlp-main);color:#fff;border-color:#2a6cb0}
.rlp-s08__legend{
  font-size:calc(20 * var(--rlp-s));font-weight:500;margin-top:calc(20 * var(--rlp-s));
}
.rlp-s08__tnote{font-size:calc(18 * var(--rlp-s));font-weight:500;text-align:right;margin-top:calc(14 * var(--rlp-s))}

/* --- s08 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s08{padding:calc(30 * var(--rlp-s)) 0 calc(30 * var(--rlp-s))}
  .rlp-s08 .rlp-sec__bg{background-image:url("/img/usr/freepage/reos/lp/s08_bg_top_sp.jpg")}
  .rlp-s08__ttl{font-size:calc(20 * var(--rlp-s));margin-bottom:calc(10 * var(--rlp-s))}
  .rlp-s08__lead{font-size:calc(12 * var(--rlp-s));margin-bottom:calc(18 * var(--rlp-s))}

  /* 3列4段 */
  .rlp-s08__grid{gap:calc(8 * var(--rlp-s))}
  .rlp-s08__cell{
    width:calc((100% - (16 * var(--rlp-s))) / 3);
    padding:calc(10 * var(--rlp-s)) calc(4 * var(--rlp-s)) calc(10 * var(--rlp-s));
    border-radius:calc(6 * var(--rlp-s));
  }
  .rlp-s08__ico{height:calc(52 * var(--rlp-s));margin-bottom:calc(6 * var(--rlp-s))}
  .rlp-s08__name{font-size:calc(13 * var(--rlp-s));margin-bottom:calc(6 * var(--rlp-s))}
  .rlp-s08__desc{font-size:calc(9 * var(--rlp-s))}
  .rlp-s08__note{font-size:calc(10 * var(--rlp-s));margin-top:calc(14 * var(--rlp-s));text-align:left}

  .rlp-s08__tableSec{margin-top:calc(40 * var(--rlp-s))}

  /* ------------------------------------------------------------------
     比較表：スマホは「縦組み」に組み替える
       PC   ... 上の見出し＝不純物14種／左の見出し＝フィルタの種類4種
       スマホ... 上の見出し＝フィルタの種類4種／左の見出し＝不純物14種

     tr を display:contents にして56+19個のセルを全部グリッドに流し込み、
     grid-auto-flow:column で「列方向」に並べると、ちょうど行と列が入れ替わります。
     （HTMLは1つのまま。表を2つ書く必要はありません）
     ------------------------------------------------------------------ */
  .rlp-s08__scroll{overflow:visible}
  .rlp-s08__table{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(15,auto);
    grid-template-columns:calc(100 * var(--rlp-s)) repeat(4,1fr);
    /* 罫線は gap（すき間）で表現する。グリッドでは border-collapse が効かないため */
    gap:1px;padding:1px;background:#cddff0;
    border:1px solid #b9cfe4;border-radius:calc(8 * var(--rlp-s));
  }
  .rlp-s08__table thead,
  .rlp-s08__table tbody,
  .rlp-s08__table tr{display:contents}
  .rlp-s08__table th,
  .rlp-s08__table td{
    border:0;display:flex;align-items:center;justify-content:center;
    padding:calc(6 * var(--rlp-s)) calc(3 * var(--rlp-s));
  }
  /* 左の列＝不純物名。縦書きをやめて横書きに戻す */
  .rlp-s08__table thead th{
    height:auto;background:#fff;font-size:calc(10 * var(--rlp-s));
    padding:calc(8 * var(--rlp-s)) calc(4 * var(--rlp-s));
  }
  .rlp-s08__vt{
    writing-mode:horizontal-tb;text-orientation:mixed;
    white-space:normal;letter-spacing:0;line-height:1.3;
  }
  /* 上の行＝フィルタの種類 */
  .rlp-s08__table tbody th{
    background:#F4F8FC;font-size:calc(11 * var(--rlp-s));
    padding:calc(10 * var(--rlp-s)) calc(3 * var(--rlp-s));white-space:normal;
  }
  .rlp-s08__table tbody td{background:#fff;font-size:calc(15 * var(--rlp-s));padding:calc(9 * var(--rlp-s)) 0}
  /* RO列：見出しだけ紺、中身はうすい青で列を目立たせる */
  .rlp-s08__table tr.is-ro th{background:var(--rlp-main);color:#fff}
  .rlp-s08__table tr.is-ro td{background:#EDF4FC;color:var(--rlp-navy)}
  /* 左上の角：スマホでは「フィルタの種類」が上、「不純物」が下 */
  .rlp-s08__corner{
    min-width:0;flex-direction:column;justify-content:center;
    padding:calc(8 * var(--rlp-s)) calc(6 * var(--rlp-s));
  }
  .rlp-s08__corner span{font-size:calc(9 * var(--rlp-s));line-height:1.4;width:100%}
  .rlp-s08__corner .u{order:2;text-align:left;padding-right:0}
  .rlp-s08__corner .d{order:1;text-align:right;padding-left:0;margin-top:0}

  .rlp-s08__legend{font-size:calc(11 * var(--rlp-s));margin-top:calc(12 * var(--rlp-s))}
  .rlp-s08__tnote{font-size:calc(9 * var(--rlp-s));text-align:left}
}

/* ============================================================================
   s09　第三者試験でも、
   ============================================================================ */
.rlp-s09{position:relative;background:#fff;padding:calc(70 * var(--rlp-s)) 0 calc(80 * var(--rlp-s))}
.rlp-s09 .rlp-sec__bg{background-image:url("/img/usr/freepage/reos/lp/s09_bg.jpg")}
.rlp-s09__ttl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(45 * var(--rlp-s));line-height:1.4;letter-spacing:.05em;
  color:var(--rlp-navy);text-align:center;margin:0 0 calc(20 * var(--rlp-s));
}
.rlp-s09__lead{font-size:calc(22 * var(--rlp-s));line-height:1.7;text-align:center;margin:0 0 calc(36 * var(--rlp-s))}

/* --- 数値の比較カード --- */
.rlp-s09__panel{
  position:relative;background:#fff;border-radius:calc(10 * var(--rlp-s));
  box-shadow:0 calc(4 * var(--rlp-s)) calc(16 * var(--rlp-s)) rgba(30,80,130,.10);
  padding:calc(34 * var(--rlp-s)) calc(40 * var(--rlp-s)) calc(40 * var(--rlp-s));
  display:flex;align-items:center;gap:calc(20 * var(--rlp-s));
}
.rlp-s09__side{flex:1;min-width:0;text-align:center}
.rlp-s09__pill{
  display:inline-block;color:#fff;font-weight:700;
  font-size:calc(24 * var(--rlp-s));letter-spacing:.06em;
  padding:calc(6 * var(--rlp-s)) calc(40 * var(--rlp-s));
  border-radius:calc(60 * var(--rlp-s));margin-bottom:calc(14 * var(--rlp-s));
}
.rlp-s09__side--before .rlp-s09__pill{background:#7d7d7d}
.rlp-s09__side--after  .rlp-s09__pill{background:var(--rlp-main)}
.rlp-s09__num{font-size:calc(88 * var(--rlp-s));font-weight:700;line-height:1.1;letter-spacing:-.01em}
.rlp-s09__num small{font-size:calc(30 * var(--rlp-s));font-weight:700;margin-left:calc(4 * var(--rlp-s))}
.rlp-s09__cap{font-size:calc(22 * var(--rlp-s));margin-top:calc(6 * var(--rlp-s))}
.rlp-s09__side--after .rlp-s09__num,
.rlp-s09__side--after .rlp-s09__big{color:var(--rlp-navy)}
.rlp-s09__big{font-size:calc(60 * var(--rlp-s));font-weight:700;line-height:1.2}
.rlp-s09__sub{font-size:calc(38 * var(--rlp-s));font-weight:700;color:var(--rlp-navy);line-height:1.3}
.rlp-s09__sub small{font-size:calc(24 * var(--rlp-s))}
/* 矢印 */
.rlp-s09__arw{
  flex:none;width:calc(70 * var(--rlp-s));height:calc(46 * var(--rlp-s));
  background:linear-gradient(90deg,#cfe4f5,#4b93d4);
  clip-path:polygon(0 26%,58% 26%,58% 0,100% 50%,58% 100%,58% 74%,0 74%);
}
/* 「検出限界の1/10以下を実現」のバッジ画像（s09_icon.png） */
.rlp-s09__badge{
  position:absolute;right:calc(-10 * var(--rlp-s));top:50%;transform:translateY(-50%);
  width:calc(152 * var(--rlp-s));
}

/* --- BEFORE / AFTER --- */
.rlp-s09__ba{display:flex;gap:calc(60 * var(--rlp-s));margin-top:calc(56 * var(--rlp-s))}
.rlp-s09__baCol{flex:1;min-width:0}
.rlp-s09__baTtl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(30 * var(--rlp-s));letter-spacing:.14em;color:var(--rlp-navy);
  text-align:center;padding-bottom:calc(14 * var(--rlp-s));
  border-bottom:1px solid #9dbcd8;margin:0 0 calc(26 * var(--rlp-s));
}
.rlp-s09__doc{
  position:relative;display:block;width:100%;padding:0;cursor:zoom-in;
  border:calc(3 * var(--rlp-s)) solid var(--rlp-main);background:#fff;
  transition:box-shadow .25s,transform .25s;
}
.rlp-s09__doc:hover{box-shadow:0 calc(8 * var(--rlp-s)) calc(24 * var(--rlp-s)) rgba(7,81,155,.25);transform:translateY(calc(-3 * var(--rlp-s)))}
.rlp-s09__doc img{width:100%}
/* 拡大の虫眼鏡（画像ではなくSVG）。左上に置き、カーソルを重ねると消える */
.rlp-s09__zoom{
  position:absolute;left:calc(16 * var(--rlp-s));top:calc(16 * var(--rlp-s));
  width:calc(58 * var(--rlp-s));height:calc(58 * var(--rlp-s));
  border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 calc(2 * var(--rlp-s)) calc(8 * var(--rlp-s)) rgba(10,40,80,.25);
  display:flex;align-items:center;justify-content:center;
  color:var(--rlp-navy);transition:opacity .25s,transform .25s;
}
.rlp-s09__zoom svg{width:58%;height:58%}
.rlp-s09__doc:hover .rlp-s09__zoom{opacity:0;transform:scale(.85)}
.rlp-s09__baNote{
  font-size:calc(22 * var(--rlp-s));text-align:center;margin-top:calc(26 * var(--rlp-s));
}
.rlp-s09__baNote span{display:inline-block;margin:0 calc(18 * var(--rlp-s))}

/* タブ（スマホのみ） */
.rlp-s09__tabs{display:none}

/* --- 拡大表示（ライトボックス） --- */
.rlp-lb{
  position:fixed;inset:0;z-index:10000;background:rgba(8,22,44,.88);
  display:flex;align-items:center;justify-content:center;padding:3vmin;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.rlp-lb.is-open{opacity:1;visibility:visible}
.rlp-lb img{max-width:100%;max-height:94vh;width:auto;box-shadow:0 10px 50px rgba(0,0,0,.5)}
.rlp-lb__close{
  position:absolute;right:3vmin;top:3vmin;width:44px;height:44px;
  background:none;border:0;color:#fff;cursor:pointer;
}
.rlp-lb__close svg{width:100%;height:100%}

/* --- s09 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s09{padding:calc(30 * var(--rlp-s)) 0 calc(30 * var(--rlp-s))}
  .rlp-s09 .rlp-sec__bg{background-image:url("/img/usr/freepage/reos/lp/s09_bg_sp.jpg")}
  .rlp-s09__ttl{font-size:calc(18 * var(--rlp-s));margin-bottom:calc(10 * var(--rlp-s))}
  .rlp-s09__lead{font-size:calc(12 * var(--rlp-s));margin-bottom:calc(18 * var(--rlp-s))}

  .rlp-s09__panel{
    flex-direction:column;gap:calc(10 * var(--rlp-s));
    padding:calc(18 * var(--rlp-s)) calc(14 * var(--rlp-s)) calc(22 * var(--rlp-s));
  }
  .rlp-s09__pill{font-size:calc(13 * var(--rlp-s));padding:calc(4 * var(--rlp-s)) calc(24 * var(--rlp-s));margin-bottom:calc(8 * var(--rlp-s))}
  .rlp-s09__num{font-size:calc(40 * var(--rlp-s))}
  .rlp-s09__num small{font-size:calc(15 * var(--rlp-s))}
  .rlp-s09__cap{font-size:calc(11 * var(--rlp-s))}
  .rlp-s09__big{font-size:calc(28 * var(--rlp-s))}
  .rlp-s09__sub{font-size:calc(19 * var(--rlp-s))}
  .rlp-s09__sub small{font-size:calc(12 * var(--rlp-s))}
  .rlp-s09__arw{width:calc(30 * var(--rlp-s));height:calc(24 * var(--rlp-s));transform:rotate(90deg)}
  .rlp-s09__badge{
    position:static;transform:none;width:calc(92 * var(--rlp-s));
    margin:calc(10 * var(--rlp-s)) auto 0;
  }
  .rlp-s09__badge .t{font-size:calc(11 * var(--rlp-s))}
  .rlp-s09__badge .n{font-size:calc(28 * var(--rlp-s))}
  .rlp-s09__badge .n em{font-size:calc(16 * var(--rlp-s))}
  .rlp-s09__badge .b{font-size:calc(10 * var(--rlp-s))}

  /* BEFORE / AFTER をタブで切り替える */
  .rlp-s09__tabs{
    display:flex;gap:calc(8 * var(--rlp-s));margin:calc(26 * var(--rlp-s)) 0 calc(16 * var(--rlp-s));
  }
  .rlp-s09__tab{
    flex:1;font:inherit;font-family:"Noto Serif JP",serif;font-weight:700;
    font-size:calc(14 * var(--rlp-s));letter-spacing:.12em;
    padding:calc(8 * var(--rlp-s)) 0;cursor:pointer;
    background:#fff;color:var(--rlp-navy);
    border:1px solid var(--rlp-main);border-radius:calc(4 * var(--rlp-s));
  }
  .rlp-s09__tab.is-active{background:var(--rlp-main);color:#fff}
  .rlp-s09__ba{display:block;margin-top:0}
  .rlp-s09__baCol{display:none}
  .rlp-s09__baCol.is-active{display:block}
  /* BEFORE／AFTERはタブで切り替わるので、ふわっと表示は使わない。
     隠れている側は画面に入らずフェードが働かないため、
     タブを押した瞬間に遅れて浮かび上がって見えてしまいます */
  .rlp-s09__ba .rlp-s09__baCol{opacity:1;transform:none;transition:none}
  .rlp-s09__baTtl{display:none}
  .rlp-s09__zoom{width:calc(26 * var(--rlp-s));left:calc(8 * var(--rlp-s));top:calc(8 * var(--rlp-s))}
  .rlp-s09__baNote{font-size:calc(11 * var(--rlp-s));margin-top:calc(14 * var(--rlp-s))}
  .rlp-s09__baNote span{display:block;margin:calc(2 * var(--rlp-s)) 0}
}

/* ============================================================================
   s10　世界中の重要な現場で選ばれています
   ============================================================================ */
.rlp-s10{position:relative;background:#fff;padding:calc(70 * var(--rlp-s)) 0 calc(60 * var(--rlp-s))}
/* 背景はコンテンツ幅で止める（画面が広いと左右に白が残る） */
.rlp-s10 .rlp-sec__bg{
  background-image:url("/img/usr/freepage/reos/lp/s10_bg.jpg");
  left:50%;right:auto;transform:translateX(-50%);
  width:calc(1231 * var(--rlp-s));max-width:100%;
}
.rlp-s10__ttl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(50 * var(--rlp-s));line-height:1.4;letter-spacing:.05em;
  color:var(--rlp-navy);text-align:center;margin:0 0 calc(20 * var(--rlp-s));
}
.rlp-s10__ttl small{font-size:calc(40 * var(--rlp-s))}
.rlp-s10__lead{font-size:calc(22 * var(--rlp-s));line-height:1.7;text-align:center;margin:0 0 calc(40 * var(--rlp-s))}

/* --- 5枚のカード --- */
.rlp-s10__cards{display:flex;gap:calc(14 * var(--rlp-s));align-items:stretch}
.rlp-s10__card{
  flex:1;min-width:0;background:#fff;border-radius:calc(10 * var(--rlp-s));
  overflow:hidden;box-shadow:0 calc(3 * var(--rlp-s)) calc(12 * var(--rlp-s)) rgba(30,80,130,.10);
  display:flex;flex-direction:column;
}
.rlp-s10__pic{position:relative}
.rlp-s10__pic img{width:100%}
.rlp-s10__pic .sp{display:none}
.rlp-s10__ico{
  position:absolute;left:50%;bottom:calc(-33 * var(--rlp-s));transform:translateX(-50%);
  width:calc(66 * var(--rlp-s));height:calc(66 * var(--rlp-s));border-radius:50%;
  background:#fff;box-shadow:0 calc(2 * var(--rlp-s)) calc(8 * var(--rlp-s)) rgba(30,80,130,.16);
  display:flex;align-items:center;justify-content:center;
}
.rlp-s10__ico img{width:64%;height:auto}
.rlp-s10__body{padding:calc(46 * var(--rlp-s)) calc(14 * var(--rlp-s)) calc(22 * var(--rlp-s));text-align:center}
.rlp-s10__name{
  font-size:calc(21 * var(--rlp-s));font-weight:700;line-height:1.4;
  color:var(--rlp-navy);margin:0 0 calc(12 * var(--rlp-s));
}
.rlp-s10__txt{font-size:calc(15 * var(--rlp-s));font-weight:500;line-height:1.75;text-align:left}

/* --- 豆知識 --- */
.rlp-s10__tips{
  display:flex;align-items:center;gap:calc(30 * var(--rlp-s));
  background:#fff;border:1px solid var(--rlp-main);border-radius:calc(10 * var(--rlp-s));
  padding:calc(26 * var(--rlp-s)) calc(34 * var(--rlp-s));margin-top:calc(56 * var(--rlp-s));
}
.rlp-s10__tipsBadge{
  flex:none;display:flex;align-items:center;gap:calc(12 * var(--rlp-s));
}
.rlp-s10__tipsBadge img{width:calc(58 * var(--rlp-s))}
.rlp-s10__tipsBadge span{
  font-size:calc(21 * var(--rlp-s));font-weight:700;color:var(--rlp-navy);
  border:1px solid var(--rlp-main);border-radius:calc(6 * var(--rlp-s));
  padding:calc(4 * var(--rlp-s)) calc(16 * var(--rlp-s));
}
.rlp-s10__tipsTxt{font-size:calc(23 * var(--rlp-s));font-weight:700;line-height:1.7;color:var(--rlp-navy)}
.rlp-s10__tipsTxt em{font-style:normal;font-size:calc(40 * var(--rlp-s))}
.rlp-s10__tipsTxt i{font-style:normal;font-size:calc(30 * var(--rlp-s))}
.rlp-s10__tipsTxt b{font-weight:700;color:var(--rlp-text)}

/* --- 締め --- */
.rlp-s10__closing{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(35 * var(--rlp-s));line-height:1.6;letter-spacing:.08em;
  color:var(--rlp-navy);text-align:center;margin:calc(70 * var(--rlp-s)) 0 0;
}

/* --- s10 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s10{padding:calc(30 * var(--rlp-s)) 0 calc(26 * var(--rlp-s))}
  /* スマホは画面いっぱいに敷く */
  .rlp-s10 .rlp-sec__bg{width:100%;background-image:url("/img/usr/freepage/reos/lp/s10_bg_sp.jpg")}
  .rlp-s10__ttl{font-size:calc(19 * var(--rlp-s));margin-bottom:calc(12 * var(--rlp-s))}
  .rlp-s10__ttl small{font-size:calc(16 * var(--rlp-s))}
  .rlp-s10__lead{font-size:calc(12 * var(--rlp-s));margin-bottom:calc(18 * var(--rlp-s))}

  /* 画像を左、テキストを右に */
  .rlp-s10__cards{flex-direction:column;gap:calc(12 * var(--rlp-s))}
  .rlp-s10__card{flex-direction:row;align-items:stretch;border-radius:calc(8 * var(--rlp-s))}
  .rlp-s10__pic{flex:none;width:calc(134 * var(--rlp-s));position:relative}
  .rlp-s10__pic img{height:100%;object-fit:cover}
  .rlp-s10__pic .pc{display:none}
  .rlp-s10__pic .sp{display:block}
  .rlp-s10__ico{
    left:auto;right:calc(-22 * var(--rlp-s));bottom:auto;top:50%;
    transform:translateY(-50%);
    width:calc(44 * var(--rlp-s));height:calc(44 * var(--rlp-s));
  }
  .rlp-s10__body{
    flex:1;min-width:0;text-align:left;
    padding:calc(10 * var(--rlp-s)) calc(12 * var(--rlp-s)) calc(10 * var(--rlp-s)) calc(30 * var(--rlp-s));
  }
  .rlp-s10__name{font-size:calc(13 * var(--rlp-s));text-align:center;margin-bottom:calc(4 * var(--rlp-s))}
  .rlp-s10__txt{font-size:calc(11 * var(--rlp-s));line-height:1.7}

  .rlp-s10__tips{
    flex-direction:column;gap:calc(12 * var(--rlp-s));text-align:center;
    padding:calc(16 * var(--rlp-s)) calc(14 * var(--rlp-s));margin-top:calc(24 * var(--rlp-s));
    border-radius:calc(8 * var(--rlp-s));
  }
  .rlp-s10__tipsBadge img{width:calc(30 * var(--rlp-s))}
  .rlp-s10__tipsBadge span{font-size:calc(13 * var(--rlp-s));padding:calc(3 * var(--rlp-s)) calc(14 * var(--rlp-s))}
  .rlp-s10__tipsTxt{font-size:calc(13 * var(--rlp-s));text-align:center}
  .rlp-s10__tipsTxt em{font-size:calc(20 * var(--rlp-s))}
  .rlp-s10__tipsTxt i{font-size:calc(15 * var(--rlp-s))}
  .rlp-s10__closing{font-size:calc(17 * var(--rlp-s));margin-top:calc(28 * var(--rlp-s))}
}

/* ============================================================================
   s11　r-eos（アールイオス）卓上浄水器とは？
   ============================================================================ */
.rlp-s11{
  position:relative;overflow:hidden;background:#fff;
  padding:calc(50 * var(--rlp-s)) 0 calc(70 * var(--rlp-s));
}
/* 製品写真の背景はコンテンツ幅で止める（画面が広いと左右に白が残る） */
.rlp-s11::before{
  content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:calc(1231 * var(--rlp-s));max-width:100%;z-index:0;
  background:url("/img/usr/freepage/reos/lp/s11_bg.jpg") center top/100% auto no-repeat;
}
.rlp-s11__ttl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(50 * var(--rlp-s));line-height:1.4;letter-spacing:.05em;
  color:var(--rlp-navy);text-align:center;margin:0 0 calc(16 * var(--rlp-s));
}
.rlp-s11__lead{font-size:calc(22 * var(--rlp-s));line-height:1.7;text-align:center;margin:0}

/* --- 特長カード --- */
.rlp-s11__list{
  width:calc(510 * var(--rlp-s));margin:calc(88 * var(--rlp-s)) 0 0 auto;
  display:flex;flex-direction:column;gap:calc(18 * var(--rlp-s));
}
.rlp-s11__item{
  background:#fff;border:1px solid #7fb3e0;border-radius:calc(10 * var(--rlp-s));
  display:flex;align-items:center;gap:calc(20 * var(--rlp-s));
  padding:calc(14 * var(--rlp-s)) calc(24 * var(--rlp-s));
}
/* アイコンは元画像のタテヨコ比がバラバラなので、
   同じ大きさの四角い枠にはめて（object-fit:contain）大きさを揃える */
.rlp-s11__item > img{
  width:calc(64 * var(--rlp-s));height:calc(64 * var(--rlp-s));
  object-fit:contain;flex:none;
}
.rlp-s11__bar{width:1px;align-self:stretch;background:#9cc3e6;flex:none}
.rlp-s11__item p{flex:1;min-width:0}
.rlp-s11__item .b{
  display:block;color:var(--rlp-navy);
  font-size:calc(25 * var(--rlp-s));font-weight:700;line-height:1.4;
}
.rlp-s11__item .k{
  display:block;font-size:calc(28 * var(--rlp-s));font-weight:700;line-height:1.4;
}

/* --- s11 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s11{padding:calc(24 * var(--rlp-s)) 0 calc(30 * var(--rlp-s))}
  /* スマホは画面いっぱいに敷く */
  .rlp-s11::before{
    width:100%;
    background-image:url("/img/usr/freepage/reos/lp/s11_bg_sp.jpg");
  }
  .rlp-s11__ttl{font-size:calc(19 * var(--rlp-s));margin-bottom:calc(40 * var(--rlp-s))}
  .rlp-s11__lead{
    font-size:calc(13 * var(--rlp-s));line-height:1.9;text-align:left;
    max-width:calc(170 * var(--rlp-s));
  }
  .rlp-s11__list{
    width:100%;margin:calc(60 * var(--rlp-s)) 0 0;gap:calc(10 * var(--rlp-s));
  }
  .rlp-s11__item{
    gap:calc(12 * var(--rlp-s));padding:calc(9 * var(--rlp-s)) calc(14 * var(--rlp-s));
    border-radius:calc(6 * var(--rlp-s));
  }
  .rlp-s11__item > img{width:calc(36 * var(--rlp-s));height:calc(36 * var(--rlp-s))}
  .rlp-s11__item .b{font-size:calc(13 * var(--rlp-s))}
  .rlp-s11__item .k{font-size:calc(14 * var(--rlp-s))}
}

/* ============================================================================
   s12　マンガでわかる！ウォーターサーバーとの違い
   * ふきだしは画像側が空になっているため、文字をHTMLで重ねています。
      位置は画像に対する％指定なので、画面幅が変わってもズレません。
   ============================================================================ */
.rlp-s12{
  position:relative;background:#fff;overflow:hidden;
  padding:calc(60 * var(--rlp-s)) 0 calc(70 * var(--rlp-s));
}
.rlp-s12 .rlp-sec__bg{
  background-image:url("/img/usr/freepage/reos/lp/s12_bg_01.jpg");
  background-size:100% auto;
}

/* --- 見出し --- */
.rlp-s12__head{
  position:relative;text-align:center;
  padding:calc(34 * var(--rlp-s)) 0 calc(24 * var(--rlp-s));
  margin-bottom:calc(36 * var(--rlp-s));
}
.rlp-s12__ttl1{
  font-size:calc(50 * var(--rlp-s));font-weight:700;letter-spacing:.04em;
  color:var(--rlp-navy);line-height:1.3;
}
.rlp-s12__ttl1::before,.rlp-s12__ttl1::after{
  content:"";display:inline-block;width:calc(3 * var(--rlp-s));height:calc(44 * var(--rlp-s));
  background:var(--rlp-main);vertical-align:middle;margin:0 calc(22 * var(--rlp-s));
}
.rlp-s12__ttl1::before{transform:rotate(-22deg)}
.rlp-s12__ttl1::after{transform:rotate(22deg)}
.rlp-s12__ttl2{
  display:inline-block;
  font-size:calc(55 * var(--rlp-s));font-weight:700;letter-spacing:.04em;
  color:var(--rlp-navy);line-height:1.4;
  border-bottom:calc(5 * var(--rlp-s)) solid #FBEE7C;
  margin-bottom:calc(20 * var(--rlp-s));
}
.rlp-s12__lead{font-size:calc(22 * var(--rlp-s));line-height:1.7}
/* ロロ君（ふきだし込みの画像）。PCは縦長、スマホは横長の別カット */
.rlp-s12__roro{
  position:absolute;right:calc(-34 * var(--rlp-s));bottom:calc(-6 * var(--rlp-s));
  width:calc(250 * var(--rlp-s));z-index:2;
}
.rlp-s12__roro.sp{display:none}

/* --- 2つのヘッダー帯 --- */
.rlp-s12__heads{display:flex;gap:calc(24 * var(--rlp-s));margin-bottom:calc(8 * var(--rlp-s))}
.rlp-s12__heads span{
  flex:1;text-align:center;color:#fff;font-weight:700;
  font-size:calc(25 * var(--rlp-s));letter-spacing:.04em;
  padding:calc(8 * var(--rlp-s));
}
.rlp-s12__heads .std{background:#5a5a5a}
.rlp-s12__heads .ro{background:var(--rlp-main)}

/* --- マンガ --- */
.rlp-s12__manga{position:relative}
.rlp-s12__manga > img{width:100%}
/* スマホ用（2コマずつの別カット）はPCでは出さない */
.rlp-s12__mangaSp{display:none}
.rlp-s12__manga p{
  position:absolute;transform:translate(-50%,-50%);
  text-align:center;font-weight:700;line-height:1.45;
  font-size:calc(24 * var(--rlp-s));width:calc(230 * var(--rlp-s));
}
.rlp-s12__manga .b1{left:13.5%;top:15.5%}
.rlp-s12__manga .b2{left:37.3%;top:15.5%}
.rlp-s12__manga .b3{left:63%;  top:16.5%}
.rlp-s12__manga .b4{left:88.8%;top:16%}

/* --- コスト比較 --- */
.rlp-s12__cost{position:relative;margin-top:calc(26 * var(--rlp-s))}
/* 背景の1枚絵を幅いっぱいにする */
.rlp-s12__cost > img{width:100%}
/* 下絵のPC／スマホ切り替え */
.rlp-s12__cost > img.sp{display:none}
.rlp-s12__think{
  position:absolute;transform:translate(-50%,-50%);
  text-align:center;font-weight:700;line-height:1.45;
  font-size:calc(20 * var(--rlp-s));width:calc(160 * var(--rlp-s));
}
.rlp-s12__think--l{left:8%;top:25%}
.rlp-s12__think--r{left:92.8%;top:24%}
/* 「毎月のコストがこんなに違う！」の楕円（画像ではなくCSSで描いています）
   * 中の文字は必ず <span> でひとまとめにすること。
      直接テキストを置くと1行ごとに別々の要素として扱われ、レイアウトが崩れます */
.rlp-s12__circle{
  position:absolute;left:49.3%;top:40.5%;transform:translate(-50%,-50%);z-index:3;
  width:calc(128 * var(--rlp-s));height:calc(162 * var(--rlp-s));
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:calc(2 * var(--rlp-s)) solid #2456A5;border-radius:50%;
  text-align:center;
}
.rlp-s12__circle span{
  font-size:calc(16 * var(--rlp-s));font-weight:700;line-height:1.5;
  letter-spacing:.02em;color:#000;white-space:nowrap;
}
.rlp-s12__panel{position:absolute;top:6%;height:88%;display:flex;flex-direction:column}
.rlp-s12__panel--l{left:16.1%;width:27.2%}
.rlp-s12__panel--r{left:55.5%;width:27%}
.rlp-s12__panelHead{
  color:#fff;text-align:center;font-weight:700;
  font-size:calc(18 * var(--rlp-s));padding:calc(6 * var(--rlp-s));
  border-radius:calc(6 * var(--rlp-s)) calc(6 * var(--rlp-s)) 0 0;
}
.rlp-s12__panel--l .rlp-s12__panelHead{background:#5a5a5a}
.rlp-s12__panel--r .rlp-s12__panelHead{background:var(--rlp-main)}
.rlp-s12__rows{flex:1;padding:calc(14 * var(--rlp-s)) calc(12 * var(--rlp-s)) 0}
.rlp-s12__rows dl{
  display:flex;justify-content:space-between;gap:calc(6 * var(--rlp-s));margin:0 0 calc(10 * var(--rlp-s));
  font-size:calc(24 * var(--rlp-s));font-weight:700;line-height:1.5;
}
.rlp-s12__rows dt,.rlp-s12__rows dd{white-space:nowrap;margin:0}
.rlp-s12__total{
  display:flex;justify-content:space-between;gap:calc(8 * var(--rlp-s));
  border-top:1px solid #c9d5e0;margin:calc(6 * var(--rlp-s)) calc(12 * var(--rlp-s)) 0;
  padding-top:calc(10 * var(--rlp-s));font-weight:700;
}
.rlp-s12__total .t{font-size:calc(28 * var(--rlp-s))}
.rlp-s12__total .v{font-size:calc(34 * var(--rlp-s))}
.rlp-s12__panel--r .rlp-s12__total{color:var(--rlp-navy)}
.rlp-s12__panelNote{
  font-size:calc(13 * var(--rlp-s));font-weight:500;line-height:1.5;
  padding:calc(8 * var(--rlp-s)) calc(12 * var(--rlp-s)) calc(10 * var(--rlp-s));
}

/* --- いろんなシーンで大活躍！ --- */
.rlp-s12__scene{margin-top:calc(70 * var(--rlp-s))}
.rlp-s12__sceneTtl{
  font-size:calc(36 * var(--rlp-s));font-weight:700;letter-spacing:.04em;
  color:var(--rlp-navy);text-align:center;margin:0 0 calc(20 * var(--rlp-s));
}
.rlp-s12__sceneList{
  display:flex;gap:calc(16 * var(--rlp-s));
  border-top:calc(2 * var(--rlp-s)) solid var(--rlp-main);padding-top:calc(24 * var(--rlp-s));
}
.rlp-s12__sceneItem{flex:1;min-width:0;text-align:center}
.rlp-s12__sceneItem img{width:100%;border-radius:calc(6 * var(--rlp-s));margin-bottom:calc(12 * var(--rlp-s))}
.rlp-s12__sceneItem .sp{display:none}
.rlp-s12__sceneItem p{font-size:calc(19 * var(--rlp-s));font-weight:700;line-height:1.5}

/* --- s12 スマホ --- */
@media screen and (max-width:767px){
  /* ここは _調整用.css（PC用に書かれた指定）に負けないよう、
     .rlp-s12 を前に付けて詳細度を1つ上げています */
  .rlp-sec.rlp-s12{padding:calc(26 * var(--rlp-s)) 0 calc(30 * var(--rlp-s))}
  .rlp-s12 .rlp-sec__bg{background-image:url("/img/usr/freepage/reos/lp/s12_bg_top_sp.jpg")}
  /* 見出しは縦1列。ロロ君をリード文より前に出す（PCと順番が逆） */
  .rlp-s12 .rlp-s12__head{
    display:flex;flex-direction:column;align-items:center;
    padding:calc(10 * var(--rlp-s)) 0 0;margin-bottom:calc(18 * var(--rlp-s));
  }
  .rlp-s12__ttl1{order:1;font-size:calc(20 * var(--rlp-s))}
  .rlp-s12__ttl1::before,.rlp-s12__ttl1::after{height:calc(20 * var(--rlp-s));margin:0 calc(10 * var(--rlp-s))}
  .rlp-s12 .rlp-s12__ttl2{order:2;font-size:calc(22 * var(--rlp-s));border-bottom-width:calc(3 * var(--rlp-s));margin-bottom:calc(12 * var(--rlp-s))}
  /* ロロ君はスマホ用の横長カットに差し替える */
  .rlp-s12 .rlp-s12__roro.pc{display:none}
  .rlp-s12 .rlp-s12__roro.sp{
    display:block;order:3;position:static;
    width:calc(320 * var(--rlp-s));max-width:100%;
    margin:calc(4 * var(--rlp-s)) auto calc(10 * var(--rlp-s));
  }
  .rlp-s12__lead{order:4;font-size:calc(12 * var(--rlp-s))}

  /* --- マンガ：PC用の1枚絵を隠し、2コマずつの別カットに差し替える --- */
  .rlp-s12__heads{display:none}
  .rlp-s12__manga{display:none}
  .rlp-s12__mangaSp{display:block}
  .rlp-s12__spHead{
    display:block;text-align:center;color:#fff;font-weight:700;
    font-size:calc(13 * var(--rlp-s));letter-spacing:.04em;
    padding:calc(6 * var(--rlp-s)) calc(3 * var(--rlp-s));
    margin-bottom:calc(6 * var(--rlp-s));
  }
  .rlp-s12__spHead.std{background:#5a5a5a}
  .rlp-s12__spHead.ro{background:var(--rlp-main);margin-top:0}
  /* 2つの帯のあいだに置く下向きの三角（s02・s07と同じ形） */
  .rlp-s12__spArrow{
    width:calc(40 * var(--rlp-s));height:calc(22 * var(--rlp-s));
    margin:calc(14 * var(--rlp-s)) auto;
    background:var(--rlp-main);clip-path:polygon(0 0,100% 0,50% 100%);
  }
  .rlp-s12__mangaSpPic{position:relative}
  .rlp-s12__mangaSpPic > img{width:100%}
  /* ふきだしの文字。位置は画像内のふきだし中心に合わせた％指定 */
  .rlp-s12__mangaSpPic p{
    position:absolute;transform:translate(-50%,-50%);
    text-align:center;font-weight:700;line-height:1.45;
    font-size:calc(12 * var(--rlp-s));width:36%;
  }
  .rlp-s12__mangaSpPic .b1{left:26.4%;top:19%}
  .rlp-s12__mangaSpPic .b2{left:74.6%;top:18.4%}
  .rlp-s12__mangaSpPic .b3{left:26.6%;top:16.7%}
  .rlp-s12__mangaSpPic .b4{left:74.3%;top:16.2%}

  /* --- コスト比較：下絵をスマホ用（縦積み）に差し替える --- */
  .rlp-s12__cost > img.pc{display:none}
  .rlp-s12__cost > img.sp{display:block}
  .rlp-s12__circle{display:none}          /* 円の見出しはスマホ用画像に含まれている */
  .rlp-s12 .rlp-s12__think{font-size:calc(11 * var(--rlp-s));width:24%;line-height:1.35;text-align:center}
  .rlp-s12 .rlp-s12__think--l{left:18.8%;top:12.3%}
  .rlp-s12 .rlp-s12__think--r{left:19%;  top:61.3%}
  .rlp-s12 .rlp-s12__panel--l{left:34.7%;width:61%;top:5.2%; height:39.2%}
  .rlp-s12 .rlp-s12__panel--r{left:34.7%;width:61%;top:53.8%;height:39.3%}
  .rlp-s12__panelHead{font-size:calc(12 * var(--rlp-s));padding:calc(4 * var(--rlp-s))}
  .rlp-s12__rows{padding:calc(8 * var(--rlp-s)) calc(8 * var(--rlp-s)) 0}
  .rlp-s12__rows dl{font-size:calc(13 * var(--rlp-s));margin-bottom:calc(6 * var(--rlp-s))}
  .rlp-s12__total{margin:calc(4 * var(--rlp-s)) calc(8 * var(--rlp-s)) 0;padding-top:calc(6 * var(--rlp-s))}
  .rlp-s12__total .t{font-size:calc(14 * var(--rlp-s))}
  .rlp-s12__total .v{font-size:calc(17 * var(--rlp-s))}
  .rlp-s12 .rlp-s12__panelNote{font-size:calc(8 * var(--rlp-s));padding:calc(5 * var(--rlp-s)) calc(8 * var(--rlp-s));text-align:left}
  /* PC用に付けている白フチの装飾は、スマホでは枠からはみ出すので戻す */
  .rlp-s12 .rlp-s12__panel--r .rlp-s12__panelNote{background:none;border:0;border-radius:0;margin:0}

  .rlp-s12__scene{margin-top:calc(30 * var(--rlp-s))}
  .rlp-s12__sceneTtl{font-size:calc(17 * var(--rlp-s));margin-bottom:calc(12 * var(--rlp-s))}
  .rlp-s12__sceneList{
    flex-wrap:wrap;gap:calc(10 * var(--rlp-s));justify-content:center;
    border-top-width:calc(1.5 * var(--rlp-s));padding-top:calc(14 * var(--rlp-s));
  }
  .rlp-s12__sceneItem{width:calc((100% - (20 * var(--rlp-s))) / 3);flex:none}
  .rlp-s12__sceneItem .pc{display:none}
  .rlp-s12__sceneItem .sp{display:block}
  .rlp-s12__sceneItem p{font-size:calc(10 * var(--rlp-s))}
}

/* ============================================================================
   s13　User Voice ／ 選ばれるには、理由があります
   ============================================================================ */
.rlp-s13{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#E7F2F7 0%,#EFF7FA 55%,#F7FBFD 100%);
  padding:calc(30 * var(--rlp-s)) 0 calc(80 * var(--rlp-s));
}
.rlp-s13__head{position:relative;text-align:center;padding:calc(30 * var(--rlp-s)) 0 calc(40 * var(--rlp-s))}
/* ロロ君（ふきだし込みの画像）。PCとスマホで別カット */
.rlp-s13__roro{
  position:absolute;left:calc(20 * var(--rlp-s));bottom:calc(10 * var(--rlp-s));
  width:calc(430 * var(--rlp-s));z-index:2;
}
.rlp-s13__roro.sp{display:none}

.rlp-s13__en{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(20 * var(--rlp-s));letter-spacing:.2em;color:#8b98a5;
  margin:0 0 calc(8 * var(--rlp-s));
}
.rlp-s13__ttl{
  display:inline-block;
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(45 * var(--rlp-s));line-height:1.4;letter-spacing:.06em;
  color:var(--rlp-navy);margin:0;
  border-bottom:calc(4 * var(--rlp-s)) solid #F0DE7E;padding-bottom:calc(8 * var(--rlp-s));
}

/* --- レビューカード --- */
.rlp-s13__list{display:flex;gap:calc(20 * var(--rlp-s));align-items:flex-start}
.rlp-s13__item{flex:1;min-width:0}
.rlp-s13__tab{
  display:inline-block;color:#fff;font-weight:700;
  font-size:calc(22 * var(--rlp-s));letter-spacing:.02em;
  padding:calc(8 * var(--rlp-s)) calc(24 * var(--rlp-s));
  border-radius:calc(8 * var(--rlp-s)) calc(8 * var(--rlp-s)) 0 0;
}
.rlp-s13__item:nth-child(1) .rlp-s13__tab{background:#E4608E}
.rlp-s13__item:nth-child(2) .rlp-s13__tab{background:#2E9E6B}
.rlp-s13__item:nth-child(3) .rlp-s13__tab{background:#F0A05C}
.rlp-s13__card{
  background:#fff;border-radius:0 calc(10 * var(--rlp-s)) calc(10 * var(--rlp-s)) calc(10 * var(--rlp-s));
  padding:calc(24 * var(--rlp-s)) calc(22 * var(--rlp-s)) calc(30 * var(--rlp-s));
  box-shadow:0 calc(3 * var(--rlp-s)) calc(12 * var(--rlp-s)) rgba(30,80,130,.08);
}
.rlp-s13__pic{margin-bottom:calc(22 * var(--rlp-s))}
.rlp-s13__pic img{width:100%;border-radius:calc(4 * var(--rlp-s))}
.rlp-s13__vTtl{
  font-size:calc(25 * var(--rlp-s));font-weight:700;line-height:1.5;
  color:var(--rlp-navy);margin:0 0 calc(18 * var(--rlp-s));
}
.rlp-s13__vTxt{font-size:calc(22 * var(--rlp-s));font-weight:500;line-height:1.85}
/* スライダーのoooはスマホだけ（PCは3枚並びなので不要） */
.rlp-s13__dots{display:none}

/* --- s13 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s13{padding:calc(16 * var(--rlp-s)) 0 calc(34 * var(--rlp-s))}
  /* 見出しは縦1列。ロロ君を見出しより後ろに回す（PCと順番が逆） */
  .rlp-s13__head{
    display:flex;flex-direction:column;align-items:center;
    padding:calc(16 * var(--rlp-s)) 0 calc(20 * var(--rlp-s));
  }
  .rlp-s13__en{order:1;font-size:calc(12 * var(--rlp-s))}
  .rlp-s13__ttl{order:2;font-size:calc(20 * var(--rlp-s));border-bottom-width:calc(3 * var(--rlp-s))}
  /* ロロ君はスマホ用の横長カットに差し替える */
  .rlp-s13__roro.pc{display:none}
  .rlp-s13__roro.sp{
    display:block;order:3;position:static;
    width:calc(320 * var(--rlp-s));max-width:100%;
    margin:calc(10 * var(--rlp-s)) auto 0;
  }

  /* --- レビューは横スワイプのスライダーにする --- */
  .rlp-s13__list{
    display:flex;flex-direction:row;gap:calc(12 * var(--rlp-s));
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scroll-padding-left:calc(20 * var(--rlp-s));
    /* 画面いっぱいまでスワイプできるよう、いったん左右の余白を打ち消す */
    margin:0 calc(-20 * var(--rlp-s));padding:0 calc(20 * var(--rlp-s)) calc(6 * var(--rlp-s));
    scrollbar-width:none;
  }
  .rlp-s13__list::-webkit-scrollbar{display:none}
  .rlp-s13__item{
    flex:0 0 calc(280 * var(--rlp-s));min-width:0;
    scroll-snap-align:start;
    /* スライダーなので、ふわっと表示は使わない。
       画面の外にあるカードがスワイプのたびに遅れて浮かび上がってしまうため */
    opacity:1;transform:none;transition:none;
  }
  .rlp-s13__tab{font-size:calc(13 * var(--rlp-s));padding:calc(6 * var(--rlp-s)) calc(16 * var(--rlp-s))}
  .rlp-s13__card{padding:calc(14 * var(--rlp-s)) calc(14 * var(--rlp-s)) calc(18 * var(--rlp-s));height:100%}
  .rlp-s13__pic{margin-bottom:calc(12 * var(--rlp-s))}
  .rlp-s13__vTtl{font-size:calc(15 * var(--rlp-s));margin-bottom:calc(10 * var(--rlp-s))}
  .rlp-s13__vTxt{font-size:calc(13 * var(--rlp-s));line-height:1.85}

  /* ooo のインジケーター */
  .rlp-s13__dots{
    display:flex;justify-content:center;gap:calc(8 * var(--rlp-s));
    margin-top:calc(14 * var(--rlp-s));
  }
  .rlp-s13__dots button{
    width:calc(8 * var(--rlp-s));height:calc(8 * var(--rlp-s));
    padding:0;border:0;border-radius:50%;background:#b9cfdd;
    cursor:pointer;transition:background .2s,transform .2s;
  }
  .rlp-s13__dots button.is-on{background:var(--rlp-main);transform:scale(1.25)}
}

/* ============================================================================
   s14　よくあるご質問（アコーディオン）
   ============================================================================ */
.rlp-s14{
  position:relative;background:#fff;
  padding:calc(70 * var(--rlp-s)) 0 calc(80 * var(--rlp-s));
}
.rlp-s14 .rlp-sec__bg{
  background-image:url("/img/usr/freepage/reos/lp/s14_bg.jpg");
  background-size:100% 100%;
}
.rlp-s14__en{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(20 * var(--rlp-s));letter-spacing:.2em;color:#8b98a5;
  text-align:center;margin:0 0 calc(10 * var(--rlp-s));
}
.rlp-s14__ttl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(45 * var(--rlp-s));line-height:1.4;letter-spacing:.12em;
  color:var(--rlp-navy);text-align:center;margin:0 0 calc(46 * var(--rlp-s));
}

/* --- アコーディオン --- */
.rlp-s14__list{max-width:calc(1040 * var(--rlp-s));margin:0 auto}
.rlp-s14__item{
  background:#fff;border:1px solid #9cbde0;
  margin-bottom:calc(20 * var(--rlp-s));
}
.rlp-s14__q{
  display:flex;align-items:center;gap:calc(22 * var(--rlp-s));
  width:100%;background:none;border:0;cursor:pointer;text-align:left;
  padding:calc(22 * var(--rlp-s)) calc(30 * var(--rlp-s));
  font:inherit;color:var(--rlp-navy);
}
.rlp-s14__mark{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(35 * var(--rlp-s));line-height:1;flex:none;color:#5b83b5;
}
.rlp-s14__qTxt{
  flex:1;min-width:0;
  font-size:calc(25 * var(--rlp-s));font-weight:700;line-height:1.5;letter-spacing:.04em;
}
/* プラス／マイナスのアイコン（CSSで描画） */
.rlp-s14__ico{
  position:relative;flex:none;
  width:calc(26 * var(--rlp-s));height:calc(26 * var(--rlp-s));
}
.rlp-s14__ico::before,.rlp-s14__ico::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--rlp-main);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.rlp-s14__ico::before{
  width:100%;height:calc(2 * var(--rlp-s));transform:translate(-50%,-50%);
}
.rlp-s14__ico::after{
  width:calc(2 * var(--rlp-s));height:100%;transform:translate(-50%,-50%);
}
.rlp-s14__item.is-open .rlp-s14__ico::after{transform:translate(-50%,-50%) rotate(90deg)}

.rlp-s14__a{
  overflow:hidden;max-height:0;
  transition:max-height .45s cubic-bezier(.4,0,.2,1);
}
.rlp-s14__item.is-open .rlp-s14__a{max-height:calc(600 * var(--rlp-s))}
.rlp-s14__aInner{
  display:flex;gap:calc(22 * var(--rlp-s));
  padding:0 calc(30 * var(--rlp-s)) calc(26 * var(--rlp-s));
}
.rlp-s14__aInner .rlp-s14__mark{color:#a8bcd4}
.rlp-s14__aTxt{
  flex:1;min-width:0;
  font-size:calc(17 * var(--rlp-s));font-weight:700;line-height:1.9;color:var(--rlp-text);
}

/* --- もっと見るボタン --- */
.rlp-s14__more{text-align:center;margin-top:calc(40 * var(--rlp-s))}
.rlp-btn--faq{
  display:inline-flex;align-items:center;justify-content:center;gap:calc(90 * var(--rlp-s));
  width:calc(1040 * var(--rlp-s));max-width:100%;
  background:#fff;color:var(--rlp-navy);text-decoration:none;
  font-size:calc(28 * var(--rlp-s));font-weight:700;letter-spacing:.06em;
  padding:calc(24 * var(--rlp-s)) calc(30 * var(--rlp-s));
  border:1px solid var(--rlp-main);border-radius:calc(60 * var(--rlp-s));
  transition:background .25s,color .25s;
}
.rlp-btn--faq:hover,.rlp-btn--faq:focus{background:var(--rlp-main);color:#fff;text-decoration:none}
.rlp-btn--faq svg{width:calc(11 * var(--rlp-s));height:calc(18 * var(--rlp-s));flex:none}

/* --- s14 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s14{padding:calc(30 * var(--rlp-s)) 0 calc(34 * var(--rlp-s))}
  .rlp-s14 .rlp-sec__bg{background-image:url("/img/usr/freepage/reos/lp/s14_bg_sp.jpg")}
  .rlp-s14__en{font-size:calc(12 * var(--rlp-s))}
  .rlp-s14__ttl{font-size:calc(20 * var(--rlp-s));margin-bottom:calc(22 * var(--rlp-s))}
  .rlp-s14__list{max-width:100%}
  .rlp-s14__item{margin-bottom:calc(10 * var(--rlp-s))}
  .rlp-s14__q{gap:calc(10 * var(--rlp-s));padding:calc(12 * var(--rlp-s)) calc(14 * var(--rlp-s))}
  .rlp-s14__mark{font-size:calc(18 * var(--rlp-s))}
  .rlp-s14__qTxt{font-size:calc(13 * var(--rlp-s))}
  .rlp-s14__ico{width:calc(16 * var(--rlp-s));height:calc(16 * var(--rlp-s))}
  .rlp-s14__aInner{gap:calc(10 * var(--rlp-s));padding:0 calc(14 * var(--rlp-s)) calc(14 * var(--rlp-s))}
  .rlp-s14__aTxt{font-size:calc(11 * var(--rlp-s));line-height:1.9}
  .rlp-s14__more{margin-top:calc(20 * var(--rlp-s))}
  .rlp-btn--faq{
    width:100%;gap:calc(20 * var(--rlp-s));
    font-size:calc(14 * var(--rlp-s));padding:calc(13 * var(--rlp-s)) calc(20 * var(--rlp-s));
  }
  .rlp-btn--faq svg{width:calc(8 * var(--rlp-s));height:calc(13 * var(--rlp-s))}
}

/* ============================================================================
   s15　もっと知る、水のこと。
   ============================================================================ */
.rlp-s15{background:#F2F6FD;padding:calc(60 * var(--rlp-s)) 0 calc(70 * var(--rlp-s))}
.rlp-s15__en{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(20 * var(--rlp-s));letter-spacing:.2em;color:#8b98a5;
  text-align:center;margin:0 0 calc(10 * var(--rlp-s));
}
.rlp-s15__ttl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(45 * var(--rlp-s));line-height:1.4;letter-spacing:.08em;
  color:var(--rlp-navy);text-align:center;margin:0 0 calc(14 * var(--rlp-s));
}
.rlp-s15__lead{
  font-size:calc(22 * var(--rlp-s));line-height:1.7;color:var(--rlp-navy);
  text-align:center;margin:0 0 calc(46 * var(--rlp-s));
}

.rlp-s15__cards{display:flex;gap:calc(24 * var(--rlp-s));align-items:stretch}
.rlp-s15__card{
  flex:1;min-width:0;display:flex;flex-direction:column;
  background:#fff;border:1px solid #cfe0f2;border-radius:calc(16 * var(--rlp-s));
  padding:calc(34 * var(--rlp-s)) calc(46 * var(--rlp-s)) calc(40 * var(--rlp-s));
}
.rlp-s15__cardHead{display:flex;align-items:center;gap:calc(22 * var(--rlp-s));margin-bottom:calc(20 * var(--rlp-s))}
.rlp-s15__cardHead img{width:calc(70 * var(--rlp-s));flex:none}
.rlp-s15__cardTtl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(30 * var(--rlp-s));letter-spacing:.08em;color:var(--rlp-navy);
}
.rlp-s15__dash{
  border:0;border-top:calc(2 * var(--rlp-s)) dashed #b9cee4;
  margin:0 0 calc(30 * var(--rlp-s));
}
.rlp-s15__txt{font-size:calc(18 * var(--rlp-s));font-weight:500;line-height:1.9;margin:0 0 calc(28 * var(--rlp-s))}
.rlp-s15__fig{margin:0 0 calc(30 * var(--rlp-s));text-align:center}
.rlp-s15__fig img{width:100%;border-radius:calc(4 * var(--rlp-s))}
/* 動画のサムネは縦長なので幅を抑える */
.rlp-s15__fig--movie{margin-bottom:calc(30 * var(--rlp-s))}
.rlp-s15__fig--movie a{display:inline-block;transition:opacity .25s}
.rlp-s15__fig--movie a:hover{opacity:.85}
.rlp-s15__fig--movie img{width:calc(118 * var(--rlp-s))}

.rlp-btn--column{
  display:flex;align-items:center;justify-content:center;gap:calc(26 * var(--rlp-s));
  margin-top:auto;
  background:#fff;color:var(--rlp-navy);text-decoration:none;
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(20 * var(--rlp-s));letter-spacing:.1em;
  padding:calc(18 * var(--rlp-s)) calc(24 * var(--rlp-s));
  border:1px solid var(--rlp-main);border-radius:calc(6 * var(--rlp-s));
  transition:background .25s,color .25s;
}
.rlp-btn--column:hover,.rlp-btn--column:focus{background:var(--rlp-main);color:#fff;text-decoration:none}
.rlp-btn--column svg{width:calc(9 * var(--rlp-s));height:calc(15 * var(--rlp-s));flex:none}

/* --- s15 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s15{padding:calc(28 * var(--rlp-s)) 0 calc(30 * var(--rlp-s))}
  .rlp-s15__en{font-size:calc(12 * var(--rlp-s))}
  .rlp-s15__ttl{font-size:calc(20 * var(--rlp-s));margin-bottom:calc(10 * var(--rlp-s))}
  .rlp-s15__lead{font-size:calc(12 * var(--rlp-s));margin-bottom:calc(22 * var(--rlp-s))}
  .rlp-s15__cards{flex-direction:column;gap:calc(16 * var(--rlp-s))}
  .rlp-s15__card{padding:calc(18 * var(--rlp-s)) calc(16 * var(--rlp-s)) calc(20 * var(--rlp-s));border-radius:calc(10 * var(--rlp-s))}
  .rlp-s15__cardHead{gap:calc(12 * var(--rlp-s));margin-bottom:calc(12 * var(--rlp-s))}
  .rlp-s15__cardHead img{width:calc(38 * var(--rlp-s))}
  .rlp-s15__cardTtl{font-size:calc(17 * var(--rlp-s))}
  .rlp-s15__dash{margin-bottom:calc(16 * var(--rlp-s))}
  .rlp-s15__txt{font-size:calc(12 * var(--rlp-s));margin-bottom:calc(16 * var(--rlp-s))}
  .rlp-s15__fig{margin-bottom:calc(16 * var(--rlp-s))}
  .rlp-s15__fig--movie img{width:calc(100 * var(--rlp-s))}
  .rlp-btn--column{font-size:calc(13 * var(--rlp-s));padding:calc(11 * var(--rlp-s)) calc(16 * var(--rlp-s));gap:calc(16 * var(--rlp-s))}
}

/* ============================================================================
   s16　お問合せ
   ============================================================================ */
.rlp-s16{
  position:relative;background:#fff;
  padding:calc(50 * var(--rlp-s)) 0 calc(80 * var(--rlp-s));
}
.rlp-s16 .rlp-sec__bg{
  background-image:url("/img/usr/freepage/reos/lp/s16_bg.jpg");
  background-size:100% auto;
}
.rlp-s16__en{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(20 * var(--rlp-s));letter-spacing:.2em;color:#8b98a5;
  text-align:center;margin:0 0 calc(10 * var(--rlp-s));
}
.rlp-s16__ttl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(45 * var(--rlp-s));line-height:1.4;letter-spacing:.14em;
  color:var(--rlp-navy);text-align:center;margin:0 0 calc(12 * var(--rlp-s));
}
.rlp-s16__lead{
  font-size:calc(22 * var(--rlp-s));line-height:1.7;color:var(--rlp-navy);
  text-align:center;margin:0 0 calc(40 * var(--rlp-s));
}

/* --- 共通のカード --- */
.rlp-s16__card{
  position:relative;overflow:hidden;background:#fff;
  border:1px solid #9cc3e6;border-radius:calc(16 * var(--rlp-s));
  padding:calc(34 * var(--rlp-s)) calc(40 * var(--rlp-s)) calc(40 * var(--rlp-s));
  margin-bottom:calc(24 * var(--rlp-s));
}
.rlp-s16__card--repair{border-color:#9ecfae}
/* 写真は2枚とも同じ大きさ・同じ位置（カード右上から少し内側） */
.rlp-s16__photo{
  position:absolute;z-index:1;
  right:calc(92 * var(--rlp-s));top:calc(34 * var(--rlp-s));
  width:calc(445 * var(--rlp-s));
}
/* 写真だけは絶対配置のままにしたいので、この指定から除外する */
.rlp-s16__card > *:not(.rlp-s16__photo){position:relative;z-index:2}

.rlp-s16__cardHead{display:flex;align-items:center;gap:calc(24 * var(--rlp-s));margin-bottom:calc(18 * var(--rlp-s))}
.rlp-s16__cardHead img{width:calc(64 * var(--rlp-s));flex:none}
.rlp-s16__cardTtl{
  font-family:"Noto Serif JP",serif;font-weight:700;
  font-size:calc(32 * var(--rlp-s));line-height:1.5;letter-spacing:.06em;color:var(--rlp-navy);
}
.rlp-s16__dash{
  border:0;border-top:calc(2 * var(--rlp-s)) dashed #b9cee4;
  margin:0 calc(500 * var(--rlp-s)) calc(30 * var(--rlp-s)) 0;
}
.rlp-s16__card--repair .rlp-s16__dash{border-top-color:#b6d9c2}

.rlp-s16__body{display:flex;align-items:center;gap:calc(40 * var(--rlp-s))}
.rlp-s16__info{
  flex:none;width:calc(460 * var(--rlp-s));
  font-size:calc(25 * var(--rlp-s));font-weight:500;line-height:2.1;
}
.rlp-s16__contacts{display:flex;flex-direction:column;gap:calc(14 * var(--rlp-s))}
.rlp-s16__row{display:flex;align-items:center;gap:calc(16 * var(--rlp-s))}
.rlp-s16__row img{width:calc(48 * var(--rlp-s));flex:none}
.rlp-s16__label{font-size:calc(20 * var(--rlp-s));font-weight:500;line-height:1.4;display:block}
.rlp-s16__val{
  font-family:"Noto Serif JP",serif;font-weight:900;
  font-size:calc(32 * var(--rlp-s));line-height:1.3;letter-spacing:.02em;
  color:var(--rlp-navy);text-decoration:none;display:block;
}
a.rlp-s16__val:hover{text-decoration:underline}

/* --- LINEの案内 --- */
.rlp-s16__line{
  display:flex;align-items:center;justify-content:center;gap:calc(50 * var(--rlp-s));
  background:#F3FAF5;border:1px solid #9ecfae;border-radius:calc(12 * var(--rlp-s));
  padding:calc(22 * var(--rlp-s)) calc(30 * var(--rlp-s));margin-top:calc(30 * var(--rlp-s));
}
.rlp-s16__lineTxt{
  font-size:calc(25 * var(--rlp-s));font-weight:500;line-height:1.8;
  color:var(--rlp-line-green);text-align:center;
}
.rlp-s16__line img{width:calc(116 * var(--rlp-s));flex:none}
.rlp-s16__lineQr{flex:none}
/* 「LINEで相談する」ボタン。PCではQRを出すので隠しておく */
.rlp-s16__lineBtn{display:none}

/* --- s16 スマホ --- */
@media screen and (max-width:767px){
  .rlp-s16{padding:calc(24 * var(--rlp-s)) 0 calc(40 * var(--rlp-s))}
  .rlp-s16 .rlp-sec__bg{background-image:url("/img/usr/freepage/reos/lp/s16_bg_sp.jpg")}
  .rlp-s16__en{font-size:calc(12 * var(--rlp-s))}
  .rlp-s16__ttl{font-size:calc(20 * var(--rlp-s));margin-bottom:calc(8 * var(--rlp-s))}
  .rlp-s16__lead{font-size:calc(12 * var(--rlp-s));margin-bottom:calc(20 * var(--rlp-s))}

  .rlp-s16__card{
    padding:calc(16 * var(--rlp-s)) calc(14 * var(--rlp-s)) calc(20 * var(--rlp-s));
    border-radius:calc(10 * var(--rlp-s));margin-bottom:calc(14 * var(--rlp-s));
  }
  .rlp-s16__card--buy .rlp-s16__photo,
  .rlp-s16__card--repair .rlp-s16__photo{
    position:static;right:auto;top:auto;bottom:auto;
    width:100%;height:auto;margin:0 0 calc(14 * var(--rlp-s));
    border-radius:calc(6 * var(--rlp-s));
  }
  .rlp-s16__cardHead{gap:calc(10 * var(--rlp-s));margin-bottom:calc(10 * var(--rlp-s))}
  .rlp-s16__cardHead img{width:calc(34 * var(--rlp-s))}
  .rlp-s16__cardTtl{font-size:calc(16 * var(--rlp-s))}
  .rlp-s16__dash{margin:0 0 calc(14 * var(--rlp-s))}
  .rlp-s16__body{flex-direction:column;align-items:stretch;gap:calc(14 * var(--rlp-s))}
  .rlp-s16__info{width:100%;font-size:calc(13 * var(--rlp-s));line-height:1.9}
  .rlp-s16__row{gap:calc(10 * var(--rlp-s))}
  .rlp-s16__row img{width:calc(32 * var(--rlp-s))}
  .rlp-s16__label{font-size:calc(11 * var(--rlp-s))}
  .rlp-s16__val{font-size:calc(19 * var(--rlp-s));word-break:break-all}
  .rlp-s16__line{
    flex-direction:column;gap:calc(12 * var(--rlp-s));
    padding:calc(14 * var(--rlp-s));margin-top:calc(16 * var(--rlp-s));
  }
  .rlp-s16__lineTxt{font-size:calc(12 * var(--rlp-s))}
  /* QRコードは自分の画面を読み取れないので、タップできるボタンに差し替える */
  .rlp-s16__lineQr{display:none}
  .rlp-s16__lineBtn{
    display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--rlp-s));
    width:100%;background:#06C755;color:#fff;text-decoration:none;
    font-size:calc(15 * var(--rlp-s));font-weight:700;letter-spacing:.04em;
    padding:calc(12 * var(--rlp-s)) calc(16 * var(--rlp-s));
    border-radius:calc(8 * var(--rlp-s));
    box-shadow:0 calc(3 * var(--rlp-s)) calc(10 * var(--rlp-s)) rgba(6,199,85,.28);
  }
  .rlp-s16__lineBtn:hover,.rlp-s16__lineBtn:focus{background:#05b34c;color:#fff;text-decoration:none}
  .rlp-s16__lineBtn svg{width:calc(22 * var(--rlp-s));height:calc(22 * var(--rlp-s));flex:none}
}