@charset "UTF-8";
/*
$c_main: #DB0000;
$c_sub: #E9A87D;
$c_accent: #E64D4D;
$c_btn: #FF7043;
$c_btn_hover: #F4511E;
$c_sns_line: #06C755;
*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap&family=Oswald&display=swap");
/* ============================================================
   review.scss
   - 口コミ投稿（固定ページ）
   - BEM / モバイルファースト（min-width）
   - ボタンは common.scss の .c-common-btn を利用（色は原則上書きしない）
============================================================ */
/* ------------------------------------------------------------
  Theme tokens（review：色の起点）
------------------------------------------------------------ */
/* ------------------------------------------------------------
  Page Title（共通仕様：色の上書きだけ）
------------------------------------------------------------ */
.page-title--review {
  --page-title-bg: #e3f5ff;
  --page-title-color: #00aaf0;
  background-image: radial-gradient(circle, #ffffff 1px, transparent 1px);
  background-size: 5px 5px;
}

/* ============================================================
  Page（review 共通）
============================================================ */
.review-page__section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.review-page__inner {
  /* c-inner 使用前提 */
}
@media (min-width: 768px) {
  .review-page__section {
    padding-top: 4.8rem;
    padding-bottom: 4.8rem;
  }
}

/* ============================================================
  Section: Hero
============================================================ */
.review-page__section--hero {
  background-color: #ffffff;
}

.review-hero {
  padding-top: 2.4rem;
  padding-right: 1.6rem;
  padding-bottom: 2.4rem;
  padding-left: 1.6rem;
}
.review-hero__catch {
  font-size: clamp(2.2rem, 1.982rem + 0.68vw, 2.8rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: #2c2727;
}
.review-hero__title {
  margin: 0;
  font-size: clamp(2.2rem, 1.982rem + 0.68vw, 2.8rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: left;
  color: #2c2727;
}
.review-hero__divider {
  width: 100%;
  height: 4px;
  margin-top: 1.8rem;
  margin-right: auto;
  margin-bottom: 1.8rem;
  margin-left: auto;
  background-color: #00aaf0;
  border-radius: 999px;
}
.review-hero__lead {
  margin: 0;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  line-height: 1.9;
  text-align: left;
  color: #555555;
}
.review-hero__gift {
  margin-top: 2rem;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  width: 100%;
  max-width: 280px;
}
.review-hero__gift-img {
  width: 100%;
  height: auto;
}
.review-hero__cta {
  margin-top: 2.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.review-hero__cta-btn {
  width: 100%;
  max-width: 320px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
@media (min-width: 768px) {
  .review-hero {
    padding-top: 3.2rem;
    padding-right: 2.4rem;
    padding-bottom: 3.2rem;
    padding-left: 2.4rem;
  }
  .review-hero__gift {
    max-width: 320px;
  }
  .review-hero__cta-btn {
    max-width: 360px;
  }
  .review-hero__title {
    text-align: center;
  }
  .review-hero__lead {
    text-align: center;
  }
}

/* ============================================================
  Section: Steps（画像レイアウト）
============================================================ */
.review-page__section--steps {
  background-color: #e3f5ff;
}

.review-steps {
  max-width: 800px;
  margin: auto;
  /* 左上のオレンジ角（番号） */
  /* 左の丸アイコン */
}
.review-steps__bar {
  margin: 0 0 2rem;
  padding-top: 1rem;
  padding-right: 1.6rem;
  padding-bottom: 1rem;
  padding-left: 1.6rem;
  background-color: #00aaf0;
  color: #ffffff;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  border-radius: 0;
}
.review-steps__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 2.4rem;
}
.review-steps__item {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 96px 1.6rem 1fr;
  grid-template-columns: 96px 1fr;
  gap: 1.6rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ffffff;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  padding-top: 1.8rem;
  padding-right: 1.8rem;
  padding-bottom: 1.8rem;
  padding-left: 1.8rem;
  /* 画像みたいにカード間へ下向き矢印 */
}
.review-steps__item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ff8a3d;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.review-steps__item:last-child::after {
  display: none;
}
.review-steps__badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 44px solid #ff8a3d;
  border-right: 44px solid transparent;
}
.review-steps__badge-num {
  position: absolute;
  top: -38px;
  left: 10px;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
.review-steps__icon {
  width: 92px;
  height: 92px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.review-steps__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.6rem;
}
.review-steps__title {
  margin: 0;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  font-weight: 700;
  line-height: 1.6;
  color: #2c2727;
}
.review-steps__text {
  margin: 0;
  font-size: clamp(1.2rem, 1.126rem + 0.23vw, 1.4rem);
  line-height: 1.9;
  color: #555555;
}
@media (min-width: 768px) {
  .review-steps__bar {
    margin-bottom: 2.4rem;
    font-size: clamp(1.6rem, 1.526rem + 0.23vw, 1.8rem);
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
  }
  .review-steps__item {
    -ms-grid-columns: 152px 1fr;
    grid-template-columns: 152px 1fr;
    padding-top: 2.2rem;
    padding-right: 2.2rem;
    padding-bottom: 2.2rem;
    padding-left: 2.2rem;
  }
  .review-steps__item::after {
    bottom: -16px;
    border-left-width: 11px;
    border-right-width: 11px;
    border-top-width: 11px;
  }
  .review-steps__icon {
    width: 140px;
    height: 140px;
  }
  .review-steps__badge {
    border-top-width: 48px;
    border-right-width: 48px;
  }
  .review-steps__badge-num {
    top: -42px;
    left: 12px;
    font-size: 1.5rem;
  }
  .review-steps__title {
    font-size: clamp(1.6rem, 1.526rem + 0.23vw, 1.8rem);
  }
  .review-steps__text {
    font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  }
}

/* ============================================================
  Section: FAQ
============================================================ */
.review-page__section--faq {
  background-color: #ffffff;
}

.review-faq {
  max-width: 800px;
  margin: auto;
}
.review-faq__bar {
  margin: 0 0 2rem;
  padding-top: 1rem;
  padding-right: 1.6rem;
  padding-bottom: 1rem;
  padding-left: 1.6rem;
  background-color: #4dc4ff;
  color: #ffffff;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  font-weight: 700;
  line-height: 1.6;
  border-radius: 6px;
  text-align: center;
}
.review-faq__list {
  margin: 0;
  padding: 0;
  /* dl の中に div が入る構造対策（崩れ防止） */
}
.review-faq__list .review-faq__item {
  display: block;
}
.review-faq__item {
  margin: 0 0 1.6rem;
  background-color: #ffffff;
  border-radius: 8px;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.review-faq__q, .review-faq__a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1rem;
  margin: 0;
  padding-top: 1.4rem;
  padding-right: 1.6rem;
  padding-bottom: 1.4rem;
  padding-left: 1.6rem;
}
.review-faq__q {
  background-color: rgba(77, 196, 255, 0.18);
}
.review-faq__a {
  background-color: #ffffff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.review-faq__q-badge, .review-faq__a-badge {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}
.review-faq__q-badge {
  background-color: #00aaf0;
  color: #ffffff;
}
.review-faq__a-badge {
  background-color: #ffffff;
  color: #ff8a3d;
  border: 2px solid #ff8a3d;
}
.review-faq__q-text {
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  font-weight: 700;
  line-height: 1.8;
  color: #2c2727;
}
.review-faq__a-text {
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  line-height: 1.9;
  color: #555555;
}
@media (min-width: 768px) {
  .review-faq__bar {
    margin-bottom: 2.4rem;
    font-size: clamp(1.6rem, 1.526rem + 0.23vw, 1.8rem);
  }
  .review-faq__item {
    margin-bottom: 2rem;
  }
  .review-faq__q, .review-faq__a {
    padding-top: 1.8rem;
    padding-right: 2rem;
    padding-bottom: 1.8rem;
    padding-left: 2rem;
  }
}

/* ============================================================
  Section: Types
============================================================ */
.review-page__section--types {
  background-color: #e3f5ff;
}

.review-types__hero {
  margin: 0 0 2rem;
  border-radius: 8px;
  overflow: hidden;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  background-color: #ffffff;
}
.review-types__hero-img {
  display: block;
  width: 100%;
  height: auto;
}
.review-types__copy {
  margin-bottom: 2rem;
}
.review-types__headline {
  margin: 0 0 0.8rem;
  font-size: clamp(2.2rem, 1.982rem + 0.68vw, 2.8rem);
  font-weight: 700;
  line-height: 1.8;
  color: #2c2727;
  text-align: left;
}
.review-types__lead {
  margin: 0;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  line-height: 1.9;
  color: #555555;
  text-align: left;
}
.review-types__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
.review-types__card {
  background-color: #ffffff;
  border-radius: 8px;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 1.6rem;
  padding-right: 1.6rem;
  padding-bottom: 1.6rem;
  padding-left: 1.6rem;
}
.review-types__card-title {
  margin: 0 0 1.2rem;
  font-size: clamp(2.2rem, 1.982rem + 0.68vw, 2.8rem);
  font-weight: 700;
  line-height: 1.6;
  color: #2c2727;
  border-bottom: 1px solid #2c2727;
}
.review-types__card-benefit {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 1.526rem + 0.23vw, 1.8rem);
  font-weight: 700;
  line-height: 1.7;
  color: #00aaf0;
}
.review-types__card-text {
  margin: 0 0 1.6rem;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  line-height: 1.9;
  color: #555555;
}
.review-types__card-btn {
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: auto;
}
@media (min-width: 768px) {
  .review-types__copy {
    padding-top: 2rem;
    padding-right: 2.4rem;
    padding-bottom: 2rem;
    padding-left: 2.4rem;
  }
  .review-types__headline, .review-types__lead {
    text-align: center;
  }
  .review-types__grid {
    -ms-grid-columns: minmax(0, 1fr) 2rem minmax(0, 1fr);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  .review-types__card {
    padding-top: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
  }
  .review-types__card-btn {
    width: auto;
    -ms-flex-item-align: start;
        align-self: flex-start;
  }
}

/* ============================================================
  Section: Notes（注意事項）
============================================================ */
.review-page__section--notes {
  background-color: #ffffff;
}

.review-notes {
  max-width: 800px;
  margin: auto;
  background-color: #ffffff;
  border-radius: 8px;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  padding-top: 2rem;
  padding-right: 1.6rem;
  padding-bottom: 2rem;
  padding-left: 1.6rem;
  /* common の .c-common-btn を使う（幅だけ調整） */
}
.review-notes__bar {
  margin: 0 0 1.6rem;
  padding-top: 1rem;
  padding-right: 1.6rem;
  padding-bottom: 1rem;
  padding-left: 1.6rem;
  background-color: #4dc4ff;
  color: #ffffff;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  font-weight: 700;
  line-height: 1.6;
  border-radius: 6px;
  text-align: center;
}
.review-notes__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -ms-grid;
  display: grid;
  gap: 0.8rem;
}
.review-notes__item {
  position: relative;
  margin: 0;
  padding-left: 1.6rem;
  font-size: clamp(1.2rem, 1.126rem + 0.23vw, 1.4rem);
  line-height: 1.9;
  color: #555555;
}
.review-notes__item::before {
  content: "";
  position: absolute;
  top: 0.95em;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00aaf0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.review-notes__actions {
  margin-top: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.review-notes__contact {
  width: 100%;
  max-width: 360px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.review-notes__policy {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: clamp(1.4rem, 1.326rem + 0.23vw, 1.6rem);
  font-weight: 700;
  line-height: 1.6;
  color: #00aaf0;
  text-decoration: none;
  padding-top: 0.6rem;
  padding-right: 1.2rem;
  padding-bottom: 0.6rem;
  padding-left: 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 170, 240, 0.35);
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-transition: background-color 0.2s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.2s ease;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, -webkit-transform 0.15s ease, -webkit-box-shadow 0.2s ease;
}
.review-notes__policy:hover {
  background-color: rgba(0, 170, 240, 0.08);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  opacity: 1;
}
.review-notes__policy:focus-visible {
  outline: 0;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 170, 240, 0.25);
          box-shadow: 0 0 0 3px rgba(0, 170, 240, 0.25);
}
@media (min-width: 768px) {
  .review-notes {
    padding-top: 2.4rem;
    padding-right: 2.4rem;
    padding-bottom: 2.4rem;
    padding-left: 2.4rem;
  }
  .review-notes__bar {
    font-size: clamp(1.6rem, 1.526rem + 0.23vw, 1.8rem);
  }
  .review-notes__actions {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .review-notes__contact {
    max-width: 420px;
  }
  .review-notes__policy {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}