@charset "UTF-8";
/* ============================================================
   SOKUYAKU × 楽天ポイント キャンペーンLP  /point/rakuten/
   Figma「楽天LP」(node 1:2) 準拠
   ・750px幅デザイン（実機375pxの2倍）。1rem = 16px（750px時）
   ・design px ÷ 16 = rem で指定
   ============================================================ */

:root {
  --navy:  #082D59;   /* 基本文字色 */
  --red:   #BF0000;   /* 楽天レッド */
  --cyan:  #06B4D7;   /* SOKUYAKUシアン */
  --gray:  #768294;   /* サブ文字 */
  --gray2: #525252;   /* flow 説明文 */
  --line:  #DFE5EA;   /* 罫線 */
  --bg-point: #FFF1F1;
  --bg-flow:  #DFF5FE;
  --bg-line:  #DFF5FF;
  --bg-faq:   #F2F2F2;
  --step:  #54ABC8;
  --band:  #9BD2E0;
  --thead: #939DAA;
  --green: #06C755;
}

/* 750px幅のデザインを最大650pxで表示する。
   650 / 750 * 16px = 13.8667px。650px以下はビューポート幅に追従 */
html { font-size: 13.8667px; color: var(--navy); }
@media (max-width: 650px) { html { font-size: 2.1333333333vw; } }

body {
  background: #f2f4f7;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.6;
}
img { max-width: 100%; vertical-align: bottom; }
a { text-decoration: none; color: inherit; }
a:hover { opacity: .85; }

.wrapper {
  max-width: 650px;
  width: 100%;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 5px 15px rgba(0,0,0,.05);
  overflow: hidden;
}
.inner { width: 40.625rem; margin: 0 auto; }   /* 650px */

/* ------------------------------------------------------------
   ヘッダー
   ------------------------------------------------------------ */
.site-header { height: 5.9375rem; display: flex; align-items: center; justify-content: center; background: #fff; }
.site-header img { width: 100%; height: auto; }

/* ------------------------------------------------------------
   FV
   ------------------------------------------------------------ */
.fv { margin: 0; }
.fv img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------
   セクション共通
   ------------------------------------------------------------ */
.sec { padding: 6.25rem 0; }              /* 上下100px */
.sec--point { background: var(--bg-point); }
.sec--flow  { background: var(--bg-flow); }


.sec-head { text-align: center; margin-bottom: 3.75rem; }   /* 見出し下 60px */
.sec-head__icon { height: 5rem; display: block; margin: 0 auto 1.25rem; width: auto; }
.sec-head h2 {
  font-size: 3.375rem;                     /* 54px */
  line-height: 1.4444;                     /* 78px */
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--navy);
}
.sec-head__dots { display: block; margin: 1.25rem auto 0; height: 2.5rem; width: auto; }

/* ------------------------------------------------------------
   intro（CTA＋サービス説明）
   ------------------------------------------------------------ */
.intro { padding: 5.25rem 0 5.25rem; text-align: center; }
.intro__lead {
  font-size: 2.4rem;                     /* 42px */
  line-height: 1.38;
  font-weight: 700;
  color: var(--navy);
}
.intro__lead .rd { color: var(--red); }

.store-btns { display: flex; justify-content: center; gap: 1.5rem; margin-top: 3rem; }
.store-btns a { display: block; }
.store-btns img { height: 5.9375rem; width: auto; display: block; }   /* 95px */

.intro__body {
  margin-top: 3.5rem;
  text-align: left;
  font-size: 1.75rem;                      /* 28px */
  line-height: 1.6785;                     /* 47px */
  font-weight: 500;
  color: var(--navy);
}
.intro__body p + p { margin-top: 2.875rem; }   /* 46px＝1行分 */
.intro__note {
  margin-top: 3.5rem;
  text-align: left;
  font-size: 1.3125rem;                    /* 21px */
  line-height: 1.381;                      /* 29px */
  color: var(--navy);
}

/* ------------------------------------------------------------
   もらえる楽天ポイント
   ------------------------------------------------------------ */
.point__lead {
  text-align: center;
  font-size: 2.25rem;                      /* 36px */
  line-height: 1.44;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 3.75rem;
}
.point__lead .rd { color: var(--red); }

.pcards { width: 40.625rem; margin: 0 auto; display: grid; gap: 2rem; }  /* 650px / gap 32px */
.pcard {
  background: #fff;
  border: .375rem solid var(--red);   /* 6px */
  border-radius: 1.25rem;
  overflow: hidden;
}
.pcard__head {
  background: var(--red);
  color: #fff;
  font-size: 2rem;                         /* 32px */
  line-height: 1.34;                       /* 43px */
  font-weight: 700;
  text-align: center;
  padding: 1.125rem 1rem;                  /* 18px */
}
.pcard__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.75rem 1rem .75rem;
}
.pcard__from { text-align: center; color: var(--gray); font-weight: 700; line-height: 1.25; }
.pcard__from .lbl { display: block; font-size: 1.5rem; }        /* 24px */
.pcard__from .val { font-size: 2.4375rem; }                      /* 39px */
.pcard__from .val small { font-size: 1.5rem; }
.pcard__arrow { width: 0; height: 0; border: .75rem solid transparent; border-left: 1.125rem solid var(--gray); }
.pcard__to { display: flex; align-items: baseline; color: var(--red); font-weight: 700; }
.pcard__to .val { font-size: 6rem; line-height: 1.1; letter-spacing: -.01em; }   /* 96px */
.pcard__to .unit { font-size: 1.75rem; margin-left: .1em; }                      /* 28px */
.pcard__note {
  text-align: center;
  font-size: 1.375rem;                     /* 22px */
  color: var(--navy);
  padding: 0 1rem 1.5rem;
}
.pcard--simple .pcard__body { padding-bottom: 2rem; }

.point__max { width: 40.625rem; margin: 5.125rem auto 0; }   /* 82px */
.point__max img { width: 100%; height: auto; display: block; }

/* ------------------------------------------------------------
   付与時期
   ------------------------------------------------------------ */
.sec--timing { padding-bottom: 3.75rem; }
.timing__txt {
  text-align: center;
  font-size: 2.25rem;                      /* 36px */
  line-height: 1.7;
  font-weight: 700;
  color: var(--navy);
}
.timing__txt .rd { color: var(--red); }

/* ------------------------------------------------------------
   ご利用方法
   ------------------------------------------------------------ */
.steps { display: grid; gap: 3.75rem; }
.step { text-align: center; }
.step__num {
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  background: var(--step);
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  line-height: 3.25rem;
  display: block;
  margin: 0 auto 1.25rem;
}
.step__ttl {
  font-size: 2.25rem;                      /* 36px */
  line-height: 1.6;
  font-weight: 700;
  color: var(--navy);
}
.step__img { width: 28.75rem; margin: 1.875rem auto 0; }   /* 460px */
.step__img img { width: 100%; height: auto; display: block; }
.step__txt {
  margin-top: 1.875rem;
  font-size: 1.625rem;                     /* 26px */
  line-height: 1.62;
  color: var(--gray2);
}

/* ------------------------------------------------------------
   診療について
   ------------------------------------------------------------ */
.info__block { padding-bottom: 2.5rem; border-bottom: 2px solid var(--line); margin-bottom: 2.5rem; }
.info__block:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.info h3 {
  font-size: 2.5rem;                       /* 40px */
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;                        /* 48px */
  padding-left: .75rem;
  border-left: .3125rem solid var(--navy);
  margin-bottom: 1.5rem;                   /* 24px */
}
.info__txt { font-size: 2.125rem; line-height: 1.3235; font-weight: 400; }   /* 34px / 45px */
.info__txt .cy { color: var(--cyan); font-weight: 700; }
.info__note { font-size: 1.5rem; line-height: 1.45; color: var(--navy); margin-top: 1.125rem; font-feature-settings: "palt"; }

/* 診療時間 */
.hours { width: 100%; border: 1px solid var(--thead); border-collapse: collapse; table-layout: fixed; }
.hours th {
  background: var(--thead);
  color: #fff;
  font-size: 1.75rem;                      /* 28px */
  font-weight: 400;
  padding: .625rem .25rem;
  text-align: center;
  white-space: nowrap;
  letter-spacing: .12em;
  text-indent: .12em;
}
/* 1列目は「7:00~23:30」が入る幅を確保（曜日列と重ならないように） */
.hours th:first-child { width: 31%; }
/* 「日祝」は2文字なので列幅を広めに取り、1行に収める */
.hours th:last-child { width: 12%; letter-spacing: 0; text-indent: 0; }
.hours td { padding: 1.125rem .25rem; text-align: center; font-size: 2rem; font-weight: 400; }
.hours td:first-child { font-size: 1.875rem; letter-spacing: .02em; white-space: nowrap; }
.hours .dot { display: inline-block; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--cyan); }

/* 診察料 */
.tag-insurance {
  display: inline-block;
  background: var(--navy);
  color: #fff;
  font-size: 1.875rem;                     /* 30px */
  font-weight: 700;
  border-radius: .375rem;
  padding: .375rem 1.125rem;
  margin-bottom: 1.125rem;
}
.price-box { border: 1px solid var(--thead); padding: 1.5rem 2.25rem 1.75rem; margin-top: 1.5rem; }
.price-box__ttl { text-align: center; color: var(--gray); font-size: 1.75rem; letter-spacing: .35em; margin-bottom: 1.25rem; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; padding: .625rem 0; border-bottom: 1px solid var(--line); }
.price-row:last-child { border-bottom: 0; }
.price-row dt { font-size: 2rem; font-weight: 700; }
.price-row dd { color: var(--cyan); font-weight: 700; }
.price-row dd .yen { font-size: 1.75rem; }
.price-row dd .num { font-size: 2.5rem; }
.price-row dd .tax { font-size: 1.5rem; color: var(--navy); font-weight: 500; }

/* 21,000件バンド */
.clinic-band { margin-top: 6.25rem; }
.clinic-band img { width: 100%; height: auto; display: block; }

/* 医師スライダー */
.doctors { margin-top: 0; padding: 3.125rem 0; position: relative; }
.doctors .slick-slide { padding: 0 .625rem; }
.doctor {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 .125rem .625rem rgba(8,45,89,.12);
  overflow: hidden;
  margin: .625rem;
}
.doctor img { width: 100%; height: auto; display: block; }
.doctor__name { text-align: center; font-size: 2rem; font-weight: 700; padding: 1.5rem 1rem .25rem; }
.doctor__clinic { text-align: center; font-size: 1.75rem; padding: 0 1rem 1.75rem; font-weight: 500; }

/* 提携ロゴ帯 */
.partners { margin-top: 3.125rem; padding-bottom: 3.125rem; overflow: hidden; }
.partners__row { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.partners__row:last-child { animation-duration: 52s; animation-direction: reverse; margin-top: 1.75rem; }
.partners__row img { height: 3rem; width: auto; margin-right: 2rem; object-fit: contain; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .partners__row { animation: none; } }

/* ------------------------------------------------------------
   よくあるご質問
   ------------------------------------------------------------ */
.faq__q {
  background: var(--bg-faq);
  border-radius: .625rem;
  padding: 1.84375rem 3.75rem 1.84375rem 1.4375rem;   /* 29.5px / 右60px / 左23px */
  display: flex;
  align-items: center;
  gap: 1.8125rem;                          /* 29px */
  cursor: pointer;
  position: relative;
}
.faq__q img { width: 2.8125rem; height: auto; flex-shrink: 0; }   /* 45px */
.faq__q p {
  font-size: 1.875rem;                     /* 30px */
  line-height: 1.5;                        /* 45px */
  font-weight: 700;
  color: var(--navy);
  font-feature-settings: "palt";           /* デザインは文字詰めあり */
  min-height: 4.875rem;                    /* 78px＝1行時のバー高さ137pxに合わせる */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.faq__q::after {
  content: "";
  position: absolute;
  right: 2rem; top: 50%;
  width: 1.375rem; height: 1.375rem;
  border-left: .1875rem solid var(--cyan);
  border-bottom: .1875rem solid var(--cyan);
  transform: translateY(-70%) rotate(-45deg);
  transition: transform .25s;
}
.faq__list dl.is-open .faq__q::after { transform: translateY(-20%) rotate(135deg); }
.faq__a { display: none; padding: 2rem 2rem 2rem 1.25rem; }
.faq__a > div { display: flex; gap: 1.5625rem; align-items: flex-start; }   /* 25px */
.faq__a img { width: 3.0625rem; height: auto; flex-shrink: 0; }   /* 49px */
.faq__a p {
  font-size: 1.75rem;                      /* 28px */
  line-height: 1.714;                      /* 48px */
  font-weight: 500;
  color: var(--navy);
  font-feature-settings: "palt";
}
.faq__a .note { display: block; margin-top: 1em; }

/* ------------------------------------------------------------
   LINE相談
   ------------------------------------------------------------ */
.sec--line { padding: 6.25rem 0; background: #fff; }
.line-box { width: 40.625rem; margin: 0 auto; background: var(--bg-line); padding: 3.125rem 0; }
.line-box__visual { display: block; width: 33.75rem; margin: 0 auto; }
.line-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 33.75rem;
  margin: 0 auto;
  background: var(--green);
  border-radius: 3.125rem;
  box-shadow: 0 .375rem 0 #04A445;
  color: #fff;
  text-align: center;
  padding: 1.25rem 1rem;
}
.line-btn__ttl { font-size: 2.25rem; font-weight: 700; line-height: 1.3; }
.line-btn__sub { font-size: 1.5rem; font-weight: 700; }
.line-btn::after {
  content: "";
  position: absolute; right: 2.5rem; top: 50%;
  width: 0; height: 0;
  border: .5rem solid transparent;
  border-left: .75rem solid #fff;
  transform: translateY(-50%);
}

/* ------------------------------------------------------------
   追従バナー
   ------------------------------------------------------------ */
.follow-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 100;
  max-width: 650px;
  margin: 0 auto;
  background: rgba(255,255,255,.97);
  box-shadow: 0 -.125rem .625rem rgba(0,0,0,.12);
  padding: .75rem 1rem;
  text-align: center;
  transform: translateY(120%);
  transition: transform .3s ease;
}
.follow-banner.is-visible { transform: translateY(0); }
.follow-banner__ttl {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .625rem;
  position: relative;
  display: inline-block;
  padding: 0 2.5rem;
}
.follow-banner__ttl .rd { color: var(--red); }
.follow-banner__ttl::before,
.follow-banner__ttl::after {
  content: "";
  position: absolute; top: 50%;
  width: .1875rem; height: 1.875rem;
  background: var(--navy);
  transform: translateY(-50%) rotate(-20deg);
}
.follow-banner__ttl::before { left: .5rem; transform: translateY(-50%) rotate(-20deg); }
.follow-banner__ttl::after  { right: .5rem; transform: translateY(-50%) rotate(20deg); }
.follow-banner .store-btns { margin-top: 0; gap: 1.25rem; }
.follow-banner .store-btns img { height: 5rem; }
/* 追従バナーにフッターが隠れないように */
footer { padding-bottom: 6.8125rem !important; }

/* ------------------------------------------------------------
   医師スライダーの矢印（slick）
   ------------------------------------------------------------ */
.doctors .slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}
.doctors .slick-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.5rem;
  height: 1.5rem;
  border-top: .375rem solid var(--cyan);
  border-right: .375rem solid var(--cyan);
  border-radius: .125rem;
}
.doctors .slick-prev { left: .25rem; }
.doctors .slick-next { right: .25rem; }
.doctors .slick-prev::before { transform: translate(-30%, -50%) rotate(-135deg); }
.doctors .slick-next::before { transform: translate(-70%, -50%) rotate(45deg); }
.doctors .slick-arrow.slick-disabled { opacity: .35; }