/* ==========================================================================
   トラリコ サンクスページ（thanks.html 専用・自己完結）
   デザイン基準: Figma「確定版」 PC 328:2912 (1440×1557) / SP 297:6606 (375×1279)
   単位系: 1rem = デザイン10px（PC: 100vw/144, SP: 100vw/37.5）で vw 比例
   ========================================================================== */

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

html {
  /* 1rem = 10px @ 1440px viewport */
  font-size: 0.6944444vw;
}

body {
  margin: 0;
  background: #fff;
  color: #3b3b3b;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   ヘッダー（白地 96px + 右側の緑斜めカット）
   -------------------------------------------------------------------------- */

.header {
  position: relative;
  height: 9.6rem;
  background: #fff;
}

.header__cut {
  position: absolute;
  top: 0;
  right: 0;
  width: 111.4rem; /* x:326〜1440 */
  height: 100%;
  background: #036533;
  /* Figma: M77 0 H1114 V96 H0 L77 0 Z （左辺が斜めカット） */
  clip-path: polygon(6.9121% 0, 100% 0, 100% 100%, 0 100%);
}

.header__logo {
  position: absolute;
  left: 5.3rem;
  top: 1.3rem;
  display: block;
  line-height: 0;
}

.header__logo img {
  display: block;
  width: 25.4rem;
  height: 6rem;
}

/* --------------------------------------------------------------------------
   メイン
   -------------------------------------------------------------------------- */

.thanks-main {
  text-align: center;
}

.br-sp {
  display: none;
}

.u-green {
  color: #036533;
}

/* THANK YOU（左右に横線） */
.thanks-main__eyebrow {
  display: flex;
  align-items: center;
  width: 58.6rem; /* x:427〜1013 */
  margin: 23.1rem auto 0; /* y=327（ヘッダー96 + 231） */
  color: #036533;
  font-family: "Hiragino Maru Gothic Pro", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 2.4rem;
  letter-spacing: 0.384rem;
}

.thanks-main__eyebrow span {
  flex: 1;
}

.thanks-main__eyebrow::before,
.thanks-main__eyebrow::after {
  content: "";
  flex: 0 0 18.9rem; /* 各セグメント189px */
  height: 1px;
  margin-top: 0.4rem; /* Figma の線 y=341（テキストボックス中心 339 + 2px） */
  background: rgba(3, 101, 51, 0.55); /* #036533 0.5px 線の見え方を1pxで近似 */
}

/* 見出し */
.thanks-main__title {
  margin: 5.8rem 0 0; /* y=409 */
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 4.8rem;
  letter-spacing: 0.256rem;
  color: #3b3b3b;
}

/* 本文 */
.thanks-main__lead {
  margin-top: 3.1rem; /* y=488 */
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.4rem;
  letter-spacing: 0.128rem;
}

/* --------------------------------------------------------------------------
   電話カード
   -------------------------------------------------------------------------- */

.phone-card {
  position: relative;
  width: 58.9rem;
  height: 17.6rem;
  margin: 4.6rem auto 0; /* y=582 */
  background: #fff9ed;
  border: 0.123rem solid #f5aa17;
  border-radius: 0.7rem;
}

.phone-card__note {
  position: absolute;
  left: 0;
  right: 0;
  top: 2.48rem; /* y=608（外形基準26px − 枠線） */
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.4rem;
  letter-spacing: 0.128rem;
  color: rgba(3, 101, 51, 0.74);
}

.phone-card__tel {
  position: absolute;
  left: 0;
  right: 0;
  top: 6.75rem; /* 数字グリフ上端が外形基準 68.7px になるよう調整 */
  font-family: "Hind Guntur", "Inter", sans-serif;
  font-weight: 700;
  font-size: 6.45rem;
  line-height: 1;
  letter-spacing: 0.05rem;
  color: #036533;
  text-decoration: none;
}

.phone-card__hours {
  position: absolute;
  left: 0;
  right: 0;
  top: 13.42rem; /* y=716 */
  transform: translateX(-0.5rem); /* Figma のインク中心 x=713.5 に合わせる */
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.128rem;
  color: #06743c;
}

/* --------------------------------------------------------------------------
   TOPページへ戻るボタン
   -------------------------------------------------------------------------- */

.thanks-main__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39.1rem;
  height: 9.3rem;
  margin: 4.9rem auto 0; /* y=807 */
  background: linear-gradient(to bottom, #008a43, #036533);
  border-radius: 0.4rem;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 600;
  letter-spacing: 0.24rem;
  text-decoration: none;
}

/* 注記 */
.thanks-main__caution {
  margin-top: 5.8rem; /* y=958 */
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 2.4rem;
  letter-spacing: 0.128rem;
  color: #999;
}

/* --------------------------------------------------------------------------
   フッター（y:1277〜1557 / 高さ280px / #0F2A22）
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  height: 28rem;
  margin-top: 27.1rem;
  background: #0f2a22;
  color: #c9d0c5;
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-weight: 400;
}

.footer__logo {
  position: absolute;
  left: 12.1rem;
  top: 3.6rem;
  width: 25.4rem;
  height: 6rem;
}

.footer__address {
  position: absolute;
  left: 12.1rem;
  top: 11.5rem;
  font-size: 1.25rem;
  line-height: 2;
  white-space: nowrap;
}

.footer__tel {
  position: absolute;
  left: 12.1rem;
  top: 17.05rem;
  font-size: 1.25rem;
  line-height: 1.5rem;
  white-space: nowrap;
}

.footer__nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 21.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-1rem); /* デザインの行中心は x=710 */
  font-size: 1.3rem;
  white-space: nowrap;
}

.footer__nav a {
  color: #c9d0c5;
  text-decoration: none;
}

.footer__nav-divider {
  width: 0.05rem;
  min-width: 0.5px;
  height: 2.05rem;
  margin: 0 3rem 0 2.4rem;
  background: #c9d0c5;
}

.footer__copyright {
  position: absolute;
  left: 0;
  right: 0;
  top: 24.7rem;
  text-align: center;
  font-size: 1.2rem;
  color: #8a9389;
}

/* ==========================================================================
   SP（デザイン 375×1279 / 1rem = 10px @ 375px viewport）
   ========================================================================== */

@media (max-width: 767px), (max-device-width: 767px) {
  html {
    font-size: 2.6666667vw;
  }

  .br-sp {
    display: inline;
  }

  /* ヘッダー（白地53px + 緑カットは右284px） */
  .header {
    height: 5.3rem;
  }

  .header__cut {
    width: 28.4rem; /* x:91.5〜375 */
    /* Figma: M22.5 0 H284 V53 H0 L22.5 0 Z */
    clip-path: polygon(7.9225% 0, 100% 0, 100% 100%, 0 100%);
  }

  .header__logo {
    left: 1.1rem;
    top: 1.7rem;
  }

  .header__logo img {
    width: 8rem;
    height: 1.9rem;
  }

  .thanks-main__eyebrow {
    width: 33rem; /* x:23〜353 */
    margin-top: 5.4rem; /* y=107 */
    font-size: 1.3rem;
    line-height: 2rem;
    letter-spacing: 0.312rem;
  }

  .thanks-main__eyebrow::before,
  .thanks-main__eyebrow::after {
    flex-basis: 9.7rem; /* 各セグメント97px */
    margin-top: 0;
  }

  .thanks-main__title {
    margin-top: 3.3rem; /* y=160 */
    font-size: 2.4rem;
    line-height: 3.6rem;
    letter-spacing: 0.192rem;
  }

  .thanks-main__lead {
    margin-top: 2.4rem; /* y=256 */
    font-size: 1.5rem;
    line-height: 2.3rem;
    letter-spacing: 0.12rem;
  }

  .phone-card {
    width: 34.6rem;
    height: 16.2rem;
    margin-top: 2.4rem; /* y=418 */
  }

  .phone-card__note {
    top: 2.18rem; /* y=441 */
    font-size: 1.4rem;
    line-height: 2.1rem;
    letter-spacing: 0.112rem;
  }

  .phone-card__tel {
    top: 7.42rem; /* 数字グリフ上端 y=493 */
    font-size: 4.55rem;
    letter-spacing: 0.07rem;
  }

  .phone-card__hours {
    top: 12.08rem; /* y=538 */
    transform: translateX(-0.7rem);
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: 0.112rem;
  }

  .thanks-main__btn {
    width: 27rem;
    height: 6.42rem;
    margin-top: 3.3rem; /* y=613 */
    font-size: 1.7rem;
    letter-spacing: 0.2rem;
  }

  .thanks-main__caution {
    margin-top: 3.28rem; /* y=710 */
    font-size: 1.4rem;
    line-height: 2.1rem;
    letter-spacing: 0.112rem;
  }

  /* フッター（y:883〜1279 / 高さ396px） */
  .footer {
    height: 39.6rem;
    margin-top: 6.8rem;
  }

  .footer__logo {
    left: 4.5rem;
    top: 3.7rem;
    width: 25.4rem;
    height: 6rem;
  }

  .footer__address {
    left: 4.2rem;
    top: 12.4rem;
    width: 29.1rem;
    white-space: normal;
  }

  .footer__tel {
    left: 4.2rem;
    top: 22.9rem;
  }

  .footer__nav {
    top: 30.15rem;
    transform: translateX(-0.25rem);
  }

  .footer__copyright {
    top: 33.25rem;
  }
}