/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Root Variables */
:root {
  /* Colors */
  --background: #fff;
  --primary: #12a73b;
  --secondary: #4f0006;
  --warning: #fffd1a;
  --warning-m: #ffe854;
  --error: #db0011;
  --light: #fff;

  --large-width: 1600px;
  --normal-width: 940px;
  --small-width: 750px;

  /* Typography */
  --font-size-xs-auto: 0.5rem;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;

  /* Font Families */
  --font-reddit: "Reddit Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --font-noto: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
  --font-serif: "Noto Serif JP", Georgia, "Times New Roman", serif;
  --font-oswald: "Oswald", sans-serif;

  /* Font Weights */
  --font-heavy: 900;

  /* Background Images */
  --twinkle-bg: url(../assets/bg/twinkle.webp);
  --cloud-bg: url(../assets/bg/cloud.webp);

  --border-radius: 20px;
  --screen-padding: 0;
}

/* Base Elements */
html {
  font-size: var(--font-size-base);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-noto);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--secondary);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  max-width: var(--large-width);
  margin: auto;
  overflow-x: hidden;
}
body.no-scroll {
  overflow: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
  height: auto;
}

button {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input,
textarea {
  font-family: inherit;
  border: 1px solid #ccc;
  padding: 0.5em;
  outline: none;
}

h3 {
  font-weight: var(--font-heavy);
}

br.sp {
  display: none;
}

br.pc {
  display: block;
}

.container {
  max-width: var(--normal-width);
  margin: 0 auto;
  padding: 0 var(--screen-padding);
}

.mb-20 {
  margin-bottom: 1.25rem;
}

.mb-40 {
  margin-bottom: 2.5rem;
}

.mb-60 {
  margin-bottom: 3.75rem;
}

.mb-80 {
  margin-bottom: 5rem;
}

/* Full-width Background */
.expand-bg {
  --top-height: calc(var(--badge-height) / 2);
  position: relative;
}

.expand-bg::before {
  content: "";
  position: absolute;
  margin-top: var(--top-height, 0);
  inset: 0;
  z-index: -1;
  /* width: var(--large-width);
    transform: translateX(calc((var(--normal-width) - var(--large-width))/2)); */
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}

.expand-bg.twinkle-bg::before {
  background: var(--twinkle-bg);
  background-size: cover;
}

.expand-bg.cloud-bg::before {
  background: var(--cloud-bg);
}

/* Price */
.price {
  font-family: var(--font-reddit);
  color: var(--error);
}

.price::after {
  content: "円";
  display: inline-block;
  font-size: 0.6em;
}

/* End Price */

.red-highlight {
  color: var(--error);
}

.yellow-highlight {
  color: var(--warning);
}

.number-font {
  font-family: var(--font-reddit);
}

/* Slash Title */
.slash-title {
  --slash-margin-x: 1.25rem;
  font-size: 3.12rem;
  text-align: center;
  font-weight: var(--font-heavy);
}

.slash-title::before {
  content: "\\";
  display: inline-block;
  margin-right: var(--slash-margin-x);
}

.slash-title::after {
  content: "/";
  display: inline-block;
  margin-left: var(--slash-margin-x);
}

.slash-title .underbar {
  position: relative;
  display: inline-block;
}

.slash-title .underbar::after {
  content: "";
  position: absolute;
  left: calc(var(--slash-margin-x) * -2);
  bottom: 3px;
  width: calc(100% + var(--slash-margin-x) * 4);
  height: 1.25rem;
  background: var(--warning);
  z-index: -1;
}

/* End Slash Title */

/* Red Note */
.red-note {
  position: relative;
  height: 15rem;
  color: var(--light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.red-note.expand-bg::before {
  background: linear-gradient(
    90deg,
    #490005 0%,
    #94000b 25%,
    #490005 75%,
    #94000b 100%
  );
  box-sizing: border-box;
}

.red-note.expand-bg::after {
  content: "";
  position: absolute;
  width: 100vw;
  inset: 0;
  margin: 5px 0;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%);
  border-top: 2px solid #dba020;
  border-bottom: 2px solid #dba020;
}

.red-note h3 {
  font-size: 3.75rem;
  line-height: 6rem;
  white-space: nowrap;
}

.red-note .highline {
  color: var(--warning);
  font-size: 4.5rem;
}

.ribbon {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--secondary);
  margin-right: 1.25rem;
  align-content: center;
}

.ribbon {
  --r: 10px;
  padding: 2px 28px;
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - var(--r)) 50%,
    100% 100%,
    0 100%,
    var(--r) 50%
  );
  background: var(--background);
  width: fit-content;
}

/* End Red Note */

/* Button Group */
.button-group-area {
  --btn-header-height: 11.25rem;
  --avatar-female-height: 14.6875rem;
  --self-border-width: 5px;
  --self-border-radius: 5px;
}

.button-group-area.btn-group-sm {
  --btn-header-height: 8.75rem;
  --avatar-female-height: 11.25rem;
}

.button-group-area::before {
  content: "";
  display: block;
  height: calc(var(--avatar-female-height) - var(--btn-header-height));
}

.button-group-area .btn-inside {
  width: 100%;
  border: var(--self-border-width) solid var(--primary);
  border-radius: var(--border-radius);
}

.btn-header {
  position: relative;
  width: 100%;
  height: var(--btn-header-height);
  background-color: var(--primary);
  border-radius: 8px 8px 0 0;
}

.btn-header h3 {
  position: absolute;
  left: 50%;
  bottom: 5%;
  font-size: 3.75rem;
  letter-spacing: 2px;
  color: var(--light);
  text-align: center;
  transform: translateX(-50%);
  text-wrap: nowrap;
  z-index: 1;
}

.btn-header .yellow-highlight {
  font-size: 4.5rem;
}

.btn-header .btn-note span {
  color: var(--error);
}

.btn-header .btn-note {
  --bg-color: var(--light);
  position: absolute;
  width: 520px;
  height: 70px;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--background);
  border-radius: 35px;
  border: 5px solid var(--primary);
  font-size: 2.25rem;
  font-weight: 700;
  text-align: center;
  align-content: center;
}

.btn-header .same-day-tag {
  position: absolute;
  width: 7.5rem;
  height: 7.5rem;
  top: -25%;
  left: 2%;
}

.btn-header .right-female {
  position: absolute;
  width: auto;
  height: var(--avatar-female-height);
  right: 2%;
  bottom: 0;
}

.button-group-area .btn-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px 20px;
  padding: 35px;
}

.btn {
  position: relative;
  display: flex;
  width: 420px;
  height: 120px;
  color: var(--light);
  font-size: 2rem;
  font-weight: 700;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--border-radius);
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  line-height: 1.2;
}

.btn::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  background-size: contain;
  background-repeat: no-repeat;
  width: 3.125rem;
  height: 3.125rem;
}

.btn.btn-email {
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(0deg, #c8000f 0%, #e50011 100%);
}

.btn .btn-icon-text {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.btn .btn-icon-text img {
  width: 3.5rem;
  height: auto;
  margin-right: 15px;
}

.btn.btn-email::after {
  background-image: url(../assets/icons/mail_circle_arrow.png);
}

.btn.btn-line {
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(0deg, #00b900 0%, #1dc91d 100%);
}

.btn.btn-line .bigger {
  font-size: 3rem;
}

.btn.btn-line::after {
  background-image: url(../assets/icons/line_circle_arrow.png);
}

.btn.btn-call {
  font-family: var(--font-reddit);
  width: 860px;
  height: 11.25rem;
  color: var(--secondary);
  filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(0deg, #e7e7e7 0%, #ffffff 100%);
  border: 1px solid #cecece;
}

.btn.btn-call::after {
  background-image: url(../assets/icons/phone_circle_arrow.png);
}

.btn.btn-call .text {
  font-size: 3rem;
  line-height: 1;
}

.btn.btn-call .text span {
  font-size: 2.25rem;
}

.btn.btn-call .number {
  font-size: 4.06rem;
  text-wrap: nowrap;
}

.btn.btn-call .number::before {
  content: "";
  background: url(../assets/icons/freedaiya.png) no-repeat;
  background-size: cover;
  display: inline-block;
  width: 4.375rem;
  height: 2.5rem;
}

.btn.btn-call .time {
  padding-left: 4.6rem;
}

.btn-logo {
  place-self: center;
  height: 2.25rem;
}

/* End Button Group */

.content-area * {
  font-size: 1.5rem;
}
.content-area h1 {
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
}
.content-area h2 {
  font-size: 2rem;
  margin-top: 1rem;
}
.content-area ul,
.content-area ol {
  list-style: unset;
  padding-left: 2.5rem;
}
.content-area table {
  width: 100%;
  border-collapse: collapse;
}
.content-area th,
.content-area td {
  border: 1px solid #444;
  padding: 10px;
  vertical-align: top;
}
.content-area th {
  text-align: left;
  width: 25%;
}
/* Dialog */
dialog::backdrop {
  background-color: rgba(50, 50, 50, 90%);
}
dialog {
  background: #fff;
  box-sizing: border-box;
  color: #333;
  font-size: 1.6rem;
  font-weight: 400;
  margin: auto;
  padding: 3rem;
  text-align: left;
  width: 60rem;
  overflow: visible;
}
dialog .close-btn {
  position: absolute;
  top: -2rem;
  right: -2rem;
  width: 4rem;
  height: 4rem;
  align-items: center;
  background: #000;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  justify-content: center;
}
dialog .input-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 0.4rem;
}
dialog .input-wrap label {
  width: 35%;
}
dialog form input {
  background: #e6e8df;
  border: 0.1rem solid #e6e8df;
  border-radius: 0.6rem;
  box-sizing: border-box;
  font-size: 1.6rem;
  padding: 1.5%;
  width: 75%;
}
dialog form button[type="submit"] {
  background: linear-gradient(to right, #ec5609, #f4aa4d);
  border: none;
  border-radius: 1rem;
  color: #fff;
  cursor: pointer;
  display: block;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.16));
  font-size: 2.2rem;
  font-weight: 700;
  height: 7rem;
  margin: 1em auto 0;
  transition: 0.4s;
  width: 34rem;
}
#mailFormModal #result h3 {
  text-align: center;
  font-size: 3rem;
}
/* Top Badge */
.top-badge {
  --size: 15px;
  --bg-color: var(--light);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 2.1875rem;
  width: var(--badge-width, 180px);
  height: var(--badge-height, 90px);
  font-size: 2rem;
  letter-spacing: 1px;
  line-height: 4.06rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  align-content: center;
  border-radius: 35px;
  color: var(--light);
  background: var(--bg-color);
}

.bottom-arrow-badge::after,
.top-badge.bottom-arrow-badge::after {
  --size: 15px;
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--size));
  left: 50%;
  transform: translateX(-50%);
  border-width: var(--size) var(--size) 0px var(--size);
  border-style: solid;
  border-color: var(--bg-color) transparent transparent transparent;
  display: block;
  width: 0;
}

/* End Top Badge */

.image-center {
  justify-self: center;
}

/* Header Area */
.header-area {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
}

.header-area .logo {
  width: 15rem;
  margin-right: 1.25rem;
}

.header-area p {
  font-size: 1.5rem;
  font-weight: 700;
  white-space: nowrap;
}

/* End Header Area */

/* 01_MV */
.top-visual-area {
  height: 1600px;
  justify-items: center;
  padding-top: 3.25rem;
}

.top-visual-area::after {
  content: "";
  background-position: center;
  position: absolute;
  inset: 0;
}

.top-visual-area::before {
  background: linear-gradient(
    180deg,
    var(--error) 0%,
    var(--error) 95%,
    rgb(255 0 0 / 28%) 98%,
    transparent 100%
  );
  z-index: -10;
}

.top-visual-area::after {
  background: url(../assets/bg/pickle.png) no-repeat;
  background-size: contain;
  top: 6%;
  aspect-ratio: 990/1100;
  pointer-events: none;
}

.top-visual-area .red-note {
  flex-direction: row;
  height: 200px;
  text-align: start;
}

.top-visual-area .red-note img {
  width: 8.4rem;
}

.top-visual-area .bg-fabric {
  background: linear-gradient(
      90deg,
      transparent 0%,
      transparent 95%,
      var(--error) 100%
    ),
    linear-gradient(270deg, transparent 0%, transparent 95%, var(--error) 100%),
    url(../assets/bg/fabric.png) no-repeat;
  background-size: contain;
  position: absolute;
  height: 90%;
  inset: 0;
  z-index: -1;
}

.top-visual-area .red-note h3 {
  font-size: 3.125rem;
  line-height: 3.75rem;
  filter: drop-shadow(2.121px 2.121px 0px rgba(57, 0, 5, 0.5));
}

.top-visual-area .red-note .bigger {
  font-size: 4.5rem;
  color: var(--warning);
}

.main-title {
  display: flex;
  font-size: 13.125rem;
  line-height: 1.1;
  letter-spacing: -5px;
  color: var(--light);
  font-weight: 900;
  white-space: nowrap;
  filter: drop-shadow(3.536px 3.536px 5px rgba(57, 0, 5, 0.8));
  margin-bottom: 30px;
  justify-content: center;
}

.main-title span {
  writing-mode: vertical-lr;
  font-size: 6.875rem;
  text-align: center;
  filter: drop-shadow(2.828px 2.828px 0px rgba(57, 0, 5, 0.5));
  background: linear-gradient(0deg, #e0a62c, #fdfdd6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.main-badge {
  --arrow-size: 1.875rem;
  --arrow-color: var(--light);
  display: flex;
  justify-content: center;
  position: relative;
  width: 52.5rem;
  height: 6.25rem;
  border-radius: 50px;
  background: var(--light);
  font-size: 3.75rem;
  font-weight: 900;
  align-items: center;
  white-space: nowrap;
  border: 4px solid var(--error);
}

.main-badge::before,
.main-badge::after {
  content: "";
  position: absolute;
  left: 57%;
  bottom: calc(var(--arrow-size) * -1);
  width: 0;
  height: 0;
  border-top: var(--arrow-size) solid var(--arrow-color);
  border-right: var(--arrow-size) solid transparent;
}

.main-badge::before {
  --arrow-color: var(--error);
  --red-arrow-size: calc(var(--arrow-size) + 8px);
  left: calc(57% - 2px);
  bottom: calc(var(--red-arrow-size) * -1);
  border-top: var(--red-arrow-size) solid var(--arrow-color);
  border-right: var(--red-arrow-size) solid transparent;
}

.main-badge img {
  width: 6rem;
  transform: translateY(-15%);
}

.treasure-area {
  position: relative;
  aspect-ratio: 960/630;
}

.treasure-area .product {
  position: absolute;
}

.treasure-area .product img {
  width: 100%;
  filter: drop-shadow(0px 5px 15px rgba(57, 0, 5, 0.75));
}

.treasure-area .product span {
  display: flex;
  align-items: baseline;
  position: absolute;
  letter-spacing: -2px;
  line-height: 6rem;
  color: var(--error);
  font-weight: 600;
  font-family: var(--font-oswald);
  text-shadow: -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white,
    2px 2px 0 white, -2px 0 0 white, 2px 0 0 white, 0 -2px 0 white,
    0 2px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white,
    1px 1px 0 white;
}

.treasure-area .product span::after {
  content: "円";
  font-size: 0.5em;
  margin-left: 0.1em;
}

.treasure-area .product.p1 {
  width: 46.9%;
  top: -2%;
  left: 0;
}

.treasure-area .product.p1 span {
  font-size: 4.5rem;
  bottom: 10%;
  left: 12%;
}

.treasure-area .product.p2 {
  width: 12.7%;
  left: 48%;
}

.treasure-area .product.p2 span {
  font-size: 3rem;
  bottom: 40%;
  left: -15%;
}

.treasure-area .product.p3 {
  width: 38.4%;
  top: -5%;
  right: 0;
}

.treasure-area .product.p3 span {
  font-size: 4.5rem;
  bottom: -8%;
  right: 8%;
}

.treasure-area .product.p4 {
  width: 17%;
  top: 45%;
  left: 14%;
}

.treasure-area .product.p4 span {
  font-size: 3rem;
  top: 18%;
  right: 60%;
}

.treasure-area .product.p5 {
  width: 14.8%;
  top: 29%;
  left: 37%;
}

.treasure-area .product.p5 span {
  font-size: 3.75rem;
  bottom: -28%;
  left: -30%;
}

.treasure-area .product.p6 {
  width: 31.9%;
  bottom: 15%;
  right: 5%;
}

.treasure-area .product.p6 span {
  font-size: 4.5rem;
  top: 70%;
  right: 0;
}

.treasure-area .product.p7 {
  width: 19.8%;
  bottom: 10%;
  left: 3%;
}

.treasure-area .product.p7 span {
  font-size: 3rem;
  bottom: -60%;
  right: 0;
}

.treasure-area .product.p8 {
  width: 22.8%;
  top: 60%;
  right: 40%;
  z-index: -1;
}

.treasure-area .product.p8 span {
  font-size: 3.5rem;
  bottom: -25%;
  right: 15%;
}

.main-bottom {
  position: relative;
}

.main-bottom .memo {
  font-size: 1.125rem;
  color: var(--light);
  font-weight: 500;
}

/* 02_金相場高騰中！！  */
.price-rising {
  position: relative;
  aspect-ratio: 940/580;
}

.price-rising .gold-price-surging,
.price-rising .chart {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.price-rising .gold-price-surging {
  left: 0;
  width: 55%;
}

.price-rising .chart {
  right: 0;
  width: 60%;
  z-index: -1;
}

/* 04_おたらや あんしんの理由 */
.peace-reason-area {
  position: relative;
  text-align: center;
  padding: 10rem 0 5rem;
  margin-top: 8rem;
}

.peace-reason-area .heading {
  display: flex;
  align-items: center;
  position: absolute;
  top: -12%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3.75rem;
  color: var(--secondary);
  padding: 0 10px;
  white-space: nowrap;
}

.peace-reason-area .heading::before,
.peace-reason-area .heading::after {
  content: "|";
  font-size: 7rem;
}

.peace-reason-area .heading::before {
  transform: rotateZ(-15deg);
}

.peace-reason-area .heading::after {
  transform: rotateZ(15deg);
}

.peace-reason-area .heading .red-highlight {
  margin-right: 10px;
}

.peace-reason-list {
  display: flex;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.peace-reason-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--light);
  border-radius: 10px;
  padding: 1.875rem;
  width: 33%;
  height: 20rem;
  filter: drop-shadow(0px 4px 5.5px rgba(116, 82, 2, 0.1));
}

.peace-reason-item img {
  height: 180px;
  object-fit: contain;
  margin-bottom: 20px;
}

.peace-reason-item p {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.38rem;
}

/* 05_日本最大級全国1500店舗以上! */
#nationwide1300Stores .red-note {
  height: auto;
  padding: 1rem 0;
}
#nationwide1300Stores .highline {
  position: relative;
}
#nationwide1300Stores .highline .time {
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  font-size: 1rem;
  font-weight: normal;
  color: var(--light);
}
.five-reason-area .header {
  display: flex;
  align-items: center;
}
.five-reason-area .header img {
  width: 14.25rem;
}

.five-reason-area .header h3 {
  font-size: 3.12rem;
  line-height: 4rem;
  margin-left: 1.25rem;
  text-align: center;
}

.five-reason-area .header h3 .number-font {
  font-size: 5rem;
}

.highlight-underbar {
  position: relative;
  font-weight: 900;
  display: inline-block;
}

.highlight-underbar::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  /* adjust based on font size */
  width: 100%;
  height: 0.6em;
  background-color: var(--warning);
  z-index: -1;
}

/* Hand Number List */
.hand-number-list {
  display: flex;
  justify-content: space-around;
  gap: 40px;
  flex-wrap: wrap;
}

.hand-number-item {
  position: relative;
  width: 450px;
  background: #eee;
  border-radius: var(--border-radius);
}

.hand-number {
  position: absolute;
  top: -5%;
  left: -5%;
}

.hand-number .number::before {
  position: absolute;
  content: "";
  background: url(../assets/icons/hand.png) no-repeat;
  width: 3.75rem;
  aspect-ratio: 125/162;
  display: block;
  background-size: contain;
  left: -15%;
  bottom: -15%;
}

.hand-number .number {
  position: relative;
  display: block;
  width: 6.84rem;
  height: 6.84rem;
  background: var(--error);
  border-radius: 100%;
  font-size: 3rem;
  font-weight: bold;
  font-family: var(--font-reddit);
  color: var(--light);
  text-align: center;
  align-content: center;
}

.hand-number-item img {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  object-fit: cover;
  aspect-ratio: 45/28;
}

.hand-number-item .item-title {
  text-align: center;
  font-size: 2rem;
  line-height: 2.81rem;
  font-weight: 700;
  padding: 20px;
}

.hand-number-item .item-desc {
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.88rem;
  font-weight: 500;
  margin-bottom: 32px;
}

.hand-note {
  height: 148px;
  background: var(--warning-m);
  font-size: 1.75rem;
  line-height: 2.62rem;
  border-radius: var(--border-radius);
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hand-note img {
  width: 7.8125rem;
  transform: translateY(-10%);
  margin-right: 1.25rem;
}

/* End Hand Number List */

.contract-area {
  padding: 3.125rem 0;
}

.contract-area.expand-bg::before {
  background: url(../assets/bg/contract.png);
  background-position-x: right;
}
.contract-area.expand-bg::after,
.best-time-area.expand-bg::after,
.immediate-support-area.expand-bg::after {
  content: "";
  position: absolute;
  background: #fbf2dd;
  width: 100vw;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
  margin-top: var(--top-height, 0);
}
.contract-area.expand-bg::after {
  background: #f2f5f5;
}

.contract-area h3 {
  font-family: var(--font-serif);
  font-size: 3.12rem;
  line-height: 4.06rem;
  margin-bottom: 3rem;
}

.contract-area p {
  font-size: 1.5rem;
  line-height: 2.69rem;
  font-weight: 500;
}

/* 07_アクセサリー・金の圧倒的な高額買取実績！ */
.result-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.result-item {
  height: fit-content;
  border-radius: var(--border-radius);
  filter: drop-shadow(0px 5px 7.5px rgba(0, 0, 0, 0.1));
  background: var(--background);
}

.result-item img {
  width: 300px;
  height: 300px;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.result-item .info {
  padding: 20px 20px 30px;
  font-weight: 800;
}

.result-item .info p:not(:last-child) {
  border-bottom: 1px solid black;
  padding-bottom: 10px;
  margin-bottom: 10px;
  line-height: 1.2;
}
.type-area {
  padding: 5rem 0 3rem;
  margin-bottom: 5rem;
}
.type-area .slash-title {
  margin-bottom: 3.125rem;
}

.type-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px 20px;
  margin-bottom: 3.125rem;
}

.type-item {
  width: 220px;
  height: 236px;
  border-radius: var(--border-radius);
  filter: drop-shadow(0px 5px 7.5px rgba(116, 82, 2, 0.1));
  background-color: var(--light);
}
.type-item img {
  width: 100%;
}
.type-item p {
  margin-top: 19px;
  padding: 0 5px;
  font-size: 1rem;
  line-height: 1.38rem;
  font-weight: 700;
  text-align: center;
}

.price-table {
  background: var(--light);
  border-radius: 20px;
  overflow: hidden;
  padding: 40px;
}

.price-table .item {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  border-bottom: 1px dotted black;
}

.price-table .item img {
  width: 20%;
}

.price-table .item .item-description {
  width: 35%;
  padding: 20px;
}

.price-table .item .price {
  font-size: 3.12rem;
  font-weight: bold;
  width: 45%;
  padding: 20px;
}

.table-container {
  border-radius: var(--border-radius);
  overflow: hidden;
  margin-bottom: 3.75rem;
}

.comparison-area .note {
  font-size: 1.75rem;
  line-height: 2.62rem;
  text-align: center;
  font-weight: 700;
  margin: 1.875rem 0 3.125rem;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: 1px solid #ccc;
}

.comparison-table th {
  width: 25%;
  background-color: #d5d8d9;
  height: 70px;
  font-size: 1.12rem;
  line-height: 1.5rem;
  text-align: center;
  justify-items: center;
  font-weight: 800;
  border-right: 1px solid var(--light);
}

.comparison-table th:last-child {
  border-right: none;
  background: var(--error);
}
.comparison-table th:last-child img {
  width: 8.45rem;
  margin: auto;
}

.comparison-table td {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 800;
  padding: 25px;
  text-align: center;
  border-right: 1px solid #ccc;
  border-bottom: 1px dotted #ccc;
  vertical-align: middle;
}

.comparison-table td:nth-last-child(2) .price {
  color: var(--secondary);
}

.comparison-table td:last-child {
  border-right: none;
}

.comparison-table td:has(.price) {
  text-align: end;
}

.comparison-table .price {
  font-size: 2.25rem;
  line-height: 1.5rem;
  font-weight: 800;
  white-space: nowrap;
}

.ring-image {
  width: 180px;
  display: block;
  margin: 0 auto;
}

.bottom-banner {
  background-color: var(--error);
  color: white;
  text-align: center;
  align-content: center;
  font-size: 2.5rem;
  font-weight: 800;
  height: 6.25rem;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.bottom-banner .price {
  font-size: 3.5rem;
}

.total-row {
  background-color: #fff2b2;
}

.total-row td:first-child {
  color: var(--error);
  font-size: 1.5rem;
}

.favorite-area {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  background: #fff;
  padding: 60px 40px 10px;
  position: relative;
  border-radius: var(--border-radius);
  filter: drop-shadow(0px 5px 7.5px rgba(116, 82, 2, 0.1));
  border: 5px solid #fff;
  box-shadow: inset 0px 0px 0px 2px #ede069;
  margin-bottom: 30px;
}

.favorite-area table {
  border-collapse: collapse;
  width: 100%;
}

.favorite-area .ribbon {
  position: absolute;
  top: -4.5%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--error);
  color: var(--light);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 6rem;
}

.favorite-item-row {
  align-items: center;
  border-bottom: 1.5px dashed #ddd;
  padding: 14px 40px 10px 40px;
}

.favorite-item-row:last-child {
  border-bottom: none;
}

.favorite-item-image {
  margin-right: 20px;
  padding-left: 20px;
}

.favorite-item-info {
  font-size: 1.5rem;
  line-height: 2.25rem;
  font-weight: 700;
}

.favorite-item-price {
  color: var(--error);
  margin-left: 10px;
  font-size: 3.12rem;
  font-family: var(--font-reddit);
  font-weight: 800;
  line-height: 2.5rem;
}

.favorite-item-price::after {
  margin-left: -1rem;
}

.favorite-item-price-label {
  text-align: start;
  font-size: 1.12rem;
  line-height: 1.5rem;
  color: var(--secondary);
  font-weight: 700;
}

.favorite-items {
  padding-bottom: 5rem;
}

.favorite-items .note {
  font-size: 1.12rem;
  line-height: 2.62rem;
  font-weight: 500;
}

/* 09_たった4ステップ 最短即日で現金化 */
.step-item {
  display: flex;
  align-items: center;
  position: relative;
  background: #eee;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}

.step-item:not(:last-child) {
  margin-bottom: 2.5rem;
}

.step-item img {
  width: 400px;
  height: 300px;
}

.step-content {
  padding: 0 50px 0 40px;
}

.step-title {
  font-size: 2rem;
  line-height: 2.81rem;
  font-weight: 700;
  margin-bottom: 28px;
}

.step-title .red-highlight {
  font-size: 2.5rem;
  border-bottom: 5px solid;
}

.step-desc {
  font-size: 1.25rem;
  line-height: 2.25rem;
  font-weight: 500;
}

.step-item.bottom-arrow-badge::after {
  --size: 1.875rem;
  --bg-color: var(--error);
}

.step-item.bottom-arrow-badge:last-child::after {
  content: none;
}

/* 11_Googleクチコミ */
.review-area {
  position: relative;
  padding-bottom: 18.75rem;
}
.review-area .top-rate-box {
  position: relative;
}
.review-area .top-rate-box p {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -38%);
  font-size: 5.625rem;
  font-family: var(--font-serif);
  color: var(--error);
  font-weight: 900;
  line-height: 1.2;
}
.review-area .top-rate-box .rate {
  font-size: 7.5rem;
}
.review-area .top-image {
  transform: translateY(-8%);
  margin-bottom: -8%;
}

.review-area .bottom-image {
  position: absolute;
  background: url(../assets/bg/treasure.png) no-repeat bottom;
  background-size: contain;
  width: 100vw;
  height: 16.875rem;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.review-area .slash-title {
  font-size: 2.62rem;
}

.review-area .slash-title::before,
.review-area .slash-title::after {
  content: none;
}

.review-area .slash-title .underbar::after {
  left: 0;
  width: 100%;
}

.review-area .slash-title .red-highlight {
  font-size: 3.75rem;
  line-height: 3.75rem;
}

.review-voice {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
}

.review-voice::before,
.review-voice::after {
  font-size: 6.88rem;
  color: var(--error);
}

.review-voice::before {
  content: "\\";
}

.review-voice::after {
  content: "/";
}

.review-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.review-item {
  background: var(--background);
  box-shadow: 0 1px 8px rgba(180, 150, 60, 0.07);
  padding: 25px 30px;
  min-height: 237px;
  border-radius: 20px;
  filter: drop-shadow(0px 5px 7.5px rgba(116, 82, 2, 0.1));
}

.review-user-area {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.12rem;
  line-height: 2.12rem;
  font-weight: 700;
}

.review-user-date {
  margin-right: 15px;
}

.review-desc {
  font-size: 1.12rem;
  line-height: 2rem;
  font-weight: 500;
  margin-top: 20px;
}

.youtube-video {
  width: 100%;
  aspect-ratio: 94/53;
}

/* 12_金銀プラチナ、アクセサリー以外も */
.other-items-area.expand-bg::before {
  background: #eee;
}

.other-items-area {
  padding: 45px 0 15px;
}

.other-items-list {
  margin-bottom: 60px;
  .items-title {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 2.5rem;
    border-left: 8px solid var(--error);
    padding-left: 20px;
    margin-bottom: 20px;
  }

  .item-grid {
    display: flex;
    gap: 20px;
  }

  .item-card {
    background: #fafbfc;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.08);
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: start;
    position: relative;
    border-radius: 20px;
    filter: drop-shadow(0px 5px 7.5px rgba(0, 0, 0, 0.1));
  }

  .item-card img {
    width: 100%;
    aspect-ratio: 25/28;
    object-fit: contain;
  }

  .item-card .price {
    width: 100%;
    font-size: 2.625rem;
    line-height: 1.5rem;
    font-weight: 800;
    margin: 10px 30px 20px 30px;
  }

  .item-card .label {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 700;
    margin-left: 30px;
  }

  & {
    position: relative;

    .badge {
      --color: #ffe854;
      position: absolute;
      top: -5%;
      left: 60%;
      font-size: 1.5rem;
      line-height: 2.25rem;
      padding: 1.875rem;
      font-weight: 700;
      box-shadow: 0 2px 6px rgba(180, 180, 50, 0.15);
      display: flex;
      align-items: center;
      height: 7.5rem;
      border-radius: 20px;
      background-color: var(--color);
      z-index: 1;

      &::before {
        content: "";
        background: url(../assets/icons/hand.png) no-repeat;
        background-size: contain;
        height: 65px;
        width: 50px;
        margin-right: 0.9rem;
      }

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -20px;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 20px solid transparent;
        border-top: 20px solid var(--color);
      }

      &.right::after {
        border-right: 20px solid transparent;
        border-left: unset;
      }
    }
  }

  .desc {
    font-size: 1.25rem;
    line-height: 2.25rem;
    font-weight: 500;
  }

  .item-grid .slick-slide {
    margin: 0 10px;
  }
}

.slick-list {
  overflow: visible !important;
  width: 100%;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 999;
  background: url(../assets/icons/next_arrow.png);
  background-size: cover;
  width: 60px;
  height: 60px;
  border-radius: 100%;
}

.slick-arrow.slick-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.slick-arrow.prev-btn {
  left: -4%;
  transform: translateY(-50%) scale(-1);
}

.slick-arrow.next-btn {
  right: -4%;
  transform: translateY(-50%);
}

/* 14_おたからや7つの安心ポイント */
.seven-point-area {
  border-radius: 16px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  padding: 0 30px 20px;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  filter: drop-shadow(0px 5px 7.5px rgba(116, 82, 2, 0.1));
  background-color: var(--background);
  border: 5px solid var(--error);
}

.point-banner {
  height: 20rem;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.point-banner::before {
  content: "";
  background: url(../assets/bg/red_flag.png);
  background-size: cover;
  position: absolute;
  width: 100rem;
  height: 25rem;
  top: -5rem;
  left: 50%;
  transform: translateX(-50%);
  clip-path: ellipse(50% 50% at 50% 50%);
  z-index: 0;
}

.banner-title {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3.75rem;
  /* 60px */
  font-weight: 900;
  line-height: 5.25rem;
  /* 84px */
  color: #fff;
  white-space: nowrap;
}

.banner-title .highlight {
  font-size: 4.5rem;
  /* 72px */
}

.banner-yellow {
  color: #ffe800;
  font-size: 2.5rem;
  font-weight: 900;
  text-shadow: 2px 2px 0 #b1001a, 0 1px 3px rgba(0, 0, 0, 0.17);
  margin-top: 0.25em;
}

.points {
  margin: 15px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.point-row {
  display: flex;
  align-items: flex-start;
  align-items: center;
  gap: 0.875rem;
  border-bottom: 3px dotted #e2e2e2;
  padding: 15px 30px;
  position: relative;
}

.point-row:last-child {
  border-bottom: none;
}

.point-row .hand-number {
  position: unset;
}

.point-row .hand-number .number {
  background: #ffee71;
  color: var(--secondary);
}
.point-row .checkbox {
  width: 3.5625rem;
}

.point-content .main-text {
  font-size: 2.25rem;
  /* 36px */
  font-weight: 700;
  line-height: 3.125rem;
  /* 50px */
}

.point-content .sub-text {
  font-size: 1.125rem;
  /* 18px */
  line-height: 2.625rem;
  /* 42px */
  font-weight: 500;
}

/* 15_関東全域対応 あなたの近くにもおたからや */
.kanto-support-area {
  padding-bottom: 5rem;
}

.kanto-support-area .slash-title {
  white-space: nowrap;
  margin-top: 4.875rem;
  margin-bottom: 5.9375rem;
}

.choose-methods {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.method-box {
  --color: #fff;
  --badge-height: 85px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 460px;
  height: 380px;
  padding-bottom: 50px;
  border-radius: var(--border-radius);
  filter: drop-shadow(0px 5px 7.5px rgba(116, 82, 2, 0.1));
  background-color: #ffffff;
}

.method-box.green {
  --color: var(--primary);
  --badge-width: 200px;
}

.method-box.red {
  --color: var(--error);
  --badge-width: 300px;
}

.method-box .top-badge {
  --bg-color: var(--color);
  top: calc(var(--badge-height) / -2);
}

.method-box img {
  margin: 0 auto 2.875rem;
}

.method-title {
  font-size: 4.5rem;
  /* 72px */
  font-weight: 700;
  line-height: 1.2;
  color: var(--color);
  text-align: center;
}

/* MAP AREA */
.map-box {
  position: relative;
  height: auto;
  border-radius: 20px;
}

.map-img {
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}

.map-places {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map-dot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 17%;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--light);
  padding-right: 0.9rem;
  box-shadow: 0 3px 10px rgba(120, 25, 30, 0.1);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
}

.map-dot .number {
  display: block;
  color: var(--warning);
  font-size: 3.25rem;
  /* 52px */
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-reddit);
}

.map-dot .number::after {
  content: "店";
  font-size: 0.6em;
}

/* MAP PLACES — Adjust coordinates for best fit */
.dot-gunma {
  left: 21.7%;
  top: 17%;
}

.dot-tochigi {
  left: 49.1%;
  top: 12%;
}

.dot-ibaraki {
  left: 64%;
  top: 29.3%;
}

.dot-saitama {
  left: 30.4%;
  top: 35.5%;
}

.dot-tokyo {
  left: 39.5%;
  top: 54%;
}

.dot-kanagawa {
  font-size: 1.625rem;
  /* 26px */
  left: 26.2%;
  top: 71%;
}

.dot-chiba {
  left: 62.3%;
  top: 62.2%;
}

/* EXTRAS */
.extras-row {
  display: flex;
  justify-content: center;
  gap: 21px;
}

.extra-box {
  width: 300px;
  height: 310px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 14px rgba(120, 90, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 1.875rem 0;
  font-size: 2rem;
  /* 32px */
  line-height: 2.375rem;
  /* 38px */
  font-weight: 700;
  text-align: center;
}

/* 17_なぜおたからやの査定は 高額なの？ */
.why-high-area {
  --badge-width: 12.5rem;
  --badge-height: 6.25rem;
  position: relative;
  padding-bottom: 5rem;
}

.why-high-area.expand-bg::before {
  background: url(../assets/bg/why.png) center center / cover no-repeat;
}

.why-headline {
  padding-top: 105px;
  font-size: 5.625rem;
  line-height: 7.875rem;
  color: var(--light);
  font-weight: 900;
  font-family: var(--font-serif);
  text-align: center;
}

.why-headline .yellow-highlight {
  font-size: 7.5rem;
}

.why-high-area .top-badge {
  --bg-color: var(--error);
  top: 0;
  font-family: var(--font-serif);
  font-size: 3.75rem;
  letter-spacing: 6px;
  font-weight: 900;
  border-radius: 50px;
}

.why-high-area .hand-number-item:last-child .item-title {
  font-size: 1.75rem;
}

/* 18_急なお悩みありませんか!?/ */
.urgent-trouble-area {
  padding: 3.75rem 0;
}

.trouble-bubbles {
  position: relative;
  font-size: 2.25rem;
  line-height: 3.125rem;
  font-weight: 700;
  text-align: center;
}

.trouble-bubbles img {
  width: 100%;
}

.trouble-bubbles .bubble {
  position: absolute;
}

.trouble-bubbles .bubble1 {
  top: 32%;
  left: 6%;
}

.trouble-bubbles .bubble2 {
  top: 15%;
  right: 20%;
}

.trouble-bubbles .bubble3 {
  top: 52%;
  right: 5%;
}

/* 19_今すぐ対応可能です! */
.immediate-support-area {
  --badge-width: 30rem;
  --badge-height: 6.25rem;
  height: 30rem;
}

.immediate-support-area.expand-bg::before {
  background: url(../assets/bg/immediate_support.png) no-repeat center;
  background-size: cover;
}

.immediate-support-area .top-badge {
  --bg-color: var(--error);
  font-size: 3.125rem;
  line-height: 4.0625rem;
  font-weight: 700;
  border-radius: 50px;
  padding: 0;
}

.catch-text {
  position: absolute;
  top: 30%;
  left: 30%;
  font-size: 7.5rem;
  line-height: 7.875rem;
  font-weight: 900;
  font-family: var(--font-serif);
  white-space: nowrap;
}

.catch-text span.small {
  font-size: 4.5rem;
  margin-left: -1.875rem;
}

.consult-now.red-note {
  height: 45rem;
  padding: 3.75rem 0 5rem;
}

.consult-now.red-note h3 {
  font-size: 6.25rem;
  margin-bottom: 30px;
}

.consult-now .ribbon {
  display: inline-block;
  background: var(--warning);
  color: var(--error);
  width: 30rem;
  height: 5rem;
  font-size: 3rem;
  margin: auto;
  margin-bottom: 40px;
}

.btn.btn-chat {
  position: relative;
  height: 7.5rem;
  justify-content: center;
}
.btn.btn-chat img {
  width: 3.75rem;
  margin-right: 1rem;
}

.btn.btn-chat::before {
  content: none;
}

/* 21_お客様からよくいただくご質問 */
.faq-area {
}

.faq-title {
  margin: auto;
  font-size: 3.125rem;
  font-weight: 700;
  margin-bottom: 5rem;
  border-bottom: 5px solid var(--secondary);
  width: fit-content;
}

.faq-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.faq-item {
  border-bottom: 2px solid #e1e1e1;
  cursor: pointer;
  transition: background 0.13s;
}

.faq-question {
  align-items: center;
  gap: 14px;
  padding: 1.875rem 0;
}
.faq-question summary::after {
  content: "＋";
  position: absolute;
  color: var(--error);
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.faq-question summary::before {
  content: "Q";
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  font-family: var(--font-reddit);
  background: var(--error);
  color: #fff;
  font-weight: 700;
  font-size: 2.25rem;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin-right: 14px;
}

.faq-question summary {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.8125rem;
  list-style: none;
}

.faq-question p {
  font-size: 1.25rem;
  /* 20px */
  line-height: 2.25rem;
  /* 36px */
  font-weight: 500;
  margin-top: 2.5rem;
  margin-bottom: 1.875rem;
}

.best-time-area {
  aspect-ratio: 940/790;
  max-height: 790px;
}

.best-time-area.expand-bg::before {
  background: url(../assets/bg/best_time.jpg) no-repeat;
  background-size: cover;
  background-position: center;
}

/* 24_心を込めた査定で、納得いただけるお取引を */
.heart-felt-area {
  padding: 5rem 0;
}

.heart-felt-area .headline-title {
  text-align: center;
  font-size: 3.75rem;
  /* 60px */
  font-family: var(--font-serif);
  line-height: 5.25rem;
  /* 84px */
  font-weight: 900;
  margin-bottom: 7.5rem;
}

.heart-felt-area .headline-title .fs-90 {
  font-size: 5.625rem;
}

footer {
  text-align: center;
  font-size: 0.75rem;
  margin-top: 2.5rem;
  border-top: 1px solid #ccc;
  padding-top: 10px;
}

.footer-links {
  margin-bottom: 1.875rem;
  font-size: 0.875rem;
  line-height: 2rem;
  color: #9a9a9a;
  font-weight: 500;
}

.footer-links a {
  font-size: 1.125rem;
  line-height: 2rem;
  font-weight: 500;
  margin: 0 0.625rem;
  text-decoration: none;
  color: var(--secondary);
}

.address-area {
  margin-bottom: 120px;
}

.address-area .end-logo {
  justify-self: center;
  text-align: center;
  margin-bottom: 45px;
}

.address-area .store-info {
  display: flex;
  align-items: flex-start;
}

.address-area .store-info img {
  object-fit: contain;
  width: 45%;
  margin-right: 2rem;
}

.address-area .store-info p {
  font-size: 1.125rem;
  line-height: 2rem;
  font-weight: 500;
}

.address-area .store-info strong {
  font-size: 2rem;
  /* 32px */
  line-height: 2.8125rem;
  /* 45px */
  font-weight: 700;
  margin-bottom: 30px;
}

.address-area .store-title {
  font-size: 1.75rem;
  /* 28px */
  line-height: 2.8125rem;
  /* 45px */
  font-weight: 700;
  border-bottom: 2px solid;
  margin-bottom: 29px;
}

.address-area .store-title span {
  position: relative;
}

.address-area .store-title span::after {
  content: "";
  position: absolute;
  border-bottom: 5px solid var(--error);
  inset: 0;
  bottom: -5px;
}

.address-area .store-desc {
  font-size: 1.125rem;
  /* 18px */
  line-height: 2rem;
  /* 32px */
  font-weight: 500;
}

.footer-btns {
  padding: 20px 0;
}

.footer-btns.expand-bg::before {
  opacity: 0.8;
  background-color: #000000;
}

.last-title {
  display: flex;
  font-size: 2rem;
  /* 32px */
  line-height: 2.8125rem;
  /* 45px */
  color: #ffffff;
  font-weight: 700;
  margin: auto;
  margin-bottom: 20px;
  white-space: nowrap;
  align-items: center;
  gap: 20px;
}

.last-title::before,
.last-title::after {
  content: "";
  display: inline-block;
  background: #ffffff;
  width: 100%;
  height: 2px;
}

.footer-btns .btn-group {
  display: flex;
  gap: 5px;
}

.your-way-area.red-note {
  height: 784px;
  padding: 80px;
  justify-content: flex-start;
}

.your-way-area.red-note h3 {
  font-size: 3.75rem;
  margin-bottom: 42px;
}

.your-way-area .ribbon {
  display: inline-block;
  background: var(--warning);
  color: var(--error);
  width: 480px;
  height: 80px;
  font-size: 3rem;
  margin: auto;
  margin-bottom: 40px;
}

.your-way-area .btn-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.your-way-area .btn-email,
.your-way-area .btn-line {
  width: 100%;
  justify-content: center;
}

.your-way-area .btn-email {
  font-size: 3rem;
}

.your-way-area .btn-line {
  height: 180px;
  font-size: 2.625rem;
}

.your-way-area .btn-line .bigger {
  font-size: 3.75rem;
}

.your-way-area .btn-line .qr-code {
  width: 8.125rem;
  height: 8.125rem;
  margin-left: 15px;
}

.btn.btn-chat::before {
  content: none;
}

/* button group styles */
.price-0-container {
  position: relative;
  display: inline-block;
  width: 85px;
}

.price-0-container .red-highlight {
  position: absolute;
  left: 0;
  bottom: -5px;
  font-size: 4.5rem;
  line-height: 3.12rem;
  font-weight: 900;
  text-shadow: -5px -5px 0 white, 5px -5px 0 white, -5px 5px 0 white,
    5px 5px 0 white, -5px 0px 0 white, 5px 0px 0 white, 0px -5px 0 white,
    0px 5px 0 white;
}

#receiveAppraisalVisit2 .btn-header h3 {
  left: 60%;
  bottom: unset;
}

#receiveAppraisalVisit2 .btn-header .btn-note {
  width: 17.5rem;
  height: 8.75rem;
  top: -30%;
  left: 3%;
  transform: none;
}

#receiveAppraisalVisit2 .btn-header .btn-note .number-font {
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 3.12rem;
}

#receiveAppraisalVisit2 .btn-header .btn-note::after {
  left: unset;
  right: -30px;
  bottom: 20%;
  border-left: unset;
  border-top: unset;
  border-right: 20px solid transparent;
  border-bottom: 20px solid #fff;
}

#receiveAppraisalVisit .btn-header .btn-note {
  width: 38.75rem;
  font-size: 2rem;
}

#receiveAppraisalVisit .btn-header h3 {
  left: 41%;
}

#bookAppraisalVisit .btn-header h3 {
  bottom: unset;
}

#bookAppraisalVisit .btn-header .same-day-tag {
  top: -25px;
  left: 10px;
}

@media only screen and (min-width: 1280px) {
  .expand-bg.w-lg::before {
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
  }
  .your-way-area .btn-email::after,
  .your-way-area .btn-line::after,
  .consult-now .btn-chat::after {
    position: absolute;
    right: 30px;
  }
}

@media only screen and (max-width: 1280px) {
  .other-items-list {
    margin-bottom: 25px;

    .items-title {
      margin-bottom: -5px;
    }

    .item-grid-container {
      overflow-x: scroll;
      padding: var(--screen-padding);
      margin: 0 calc(var(--screen-padding) * -1);
    }

    .item-grid {
      gap: 15px;
      width: fit-content;
    }

    .item-card {
      border-radius: 15px;

      .label,
      .price {
        margin-left: 20px;
      }
    }

    .desc {
      font-size: 1.42rem;
    }
  }
}

@media only screen and (max-width: 1024px) {
  :root {
    --screen-padding: 20px;
  }
  html {
    font-size: var(--font-size-sm);
  }

  .hand-number-item {
    width: 47%;
  }

  .type-list {
    gap: 20px 15px;

    .type-item {
      aspect-ratio: 220/236;
      width: unset;
      height: unset;
    }
  }

  .top-visual-area {
    height: auto;
    padding-bottom: 5rem;
  }

  .top-visual-area::after {
    top: 7%;
  }

  .main-badge {
    padding: 0 2rem;
    margin: auto;
  }

  .your-way-area {
    &.red-note {
      padding: 80px 20px;
    }

    .btn-group {
      width: 100%;
    }
  }
}

@media only screen and (max-width: 768px) {
  .mb-sm-20 {
    margin-bottom: 1.67rem;
  }

  .mb-sm-40 {
    margin-bottom: 3.33rem;
  }

  .mb-sm-45 {
    margin-bottom: 3.75rem;
  }

  .mb-sm-60 {
    margin-bottom: 5rem;
  }

  .mb-sm-80 {
    margin-bottom: 6.67rem;
  }

  br.sp {
    display: block;
  }

  br.pc {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  :root {
    --border-radius: 15px;
  }

  html {
    font-size: var(--font-size-xs);
  }

  .red-note {
    h3 {
      line-height: 5rem;
    }

    .ribbon {
      --r: 8px;
      padding: 2px 23px;
    }
  }

  .hand-number-list {
    gap: 30px;
  }

  .hand-number-item {
    width: calc(50% - 15px);
  }

  .hand-note {
    height: 111px;
    padding: 0 20px;
  }

  .header-area {
    height: 60px;
  }

  .top-visual-area .red-note {
    height: 150px;
  }

  .top-visual-area .red-note::before,
  .top-visual-area .red-note::after {
    width: 100vw;
  }

  /* 04_おたらや あんしんの理由 */
  .peace-reason-area .heading {
    top: -8%;
  }

  /* 05_日本最大級全国1300店舗以上! */
  .contract-area.expand-bg::before {
    background-position: 80% 0;
    background-size: cover;
  }

  #receiveAppraisalVisit2 .btn-header {
    .btn-note {
      &::after {
        right: -20px;
        bottom: 30%;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #fff;
      }
    }
  }

  .result-list-scroll {
    overflow-x: scroll;
    padding: 0 var(--screen-padding);
    margin: 0 calc(var(--screen-padding) * -1);
  }

  .result-list {
    width: var(--normal-width);
    padding-bottom: 20px;
    padding-right: var(--screen-padding);
  }
  .result-item .info {
    font-size: 1.75rem;
  }
  .table-container {
    th {
      height: 52.5px;
    }
  }

  .type-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 14px;
    margin-bottom: 30px;
  }

  .favorite-area {
    padding-left: 30px;
    padding-right: 30px;

    .ribbon {
      top: -30px;
      height: 60px;
      line-height: 4.5rem;
      padding: 2px 36px;
    }

    .favorite-item-image img {
      width: 105px;
      height: 75px;
    }
  }

  .favorite-items {
    .note {
      font-size: 1.42rem;
    }
  }

  .step-area {
    .step-item {
      img {
        width: 42%;
        height: auto;
      }

      .step-title {
        margin-bottom: 20px;
      }

      .step-content {
        padding: 0 30px;
      }
    }
  }

  .other-items-list {
    .item-card {
      width: 225px;
      height: 259px;
    }
  }

  .review-area {
    .review-voice {
      margin-bottom: 40px;
    }

    .review-list {
      grid-template-columns: repeat(4, 90%);
      gap: 30px 20px;
      margin: 0 -20px;
      padding: 0 20px 20px;
      overflow-x: scroll;
    }

    .review-item {
      .review-user-area {
        gap: 18px;

        & > img {
          width: 91px;
          height: 91px;
        }
      }

      .review-user-details,
      .review-desc {
        font-size: 2rem;
        line-height: 3.58rem;
      }
    }

    .bottom-image {
      width: calc(100% + 50px);
      background-size: cover;
    }
  }

  .seven-point-area {
    border-width: 4px;
  }

  .kanto-support-area {
    .choose-methods {
      gap: 15px;

      .method-box {
        --badge-height: 52px;
        height: 285px;
        padding: 50px 0 40px;

        .top-badge {
          border-radius: 26px;
          padding: 0;
        }

        &.green {
          --badge-width: 150px;
        }

        &.red {
          --badge-width: 225px;
        }

        img {
          width: 70%;
        }
      }
    }

    .extras-row {
      gap: 15px;

      .extra-box {
        width: 100%;
        height: auto;
        aspect-ratio: 225/232;

        .extra-icon {
          width: 50%;
        }
      }
    }
  }

  .immediate-support-area {
    &.expand-bg::before {
      background-size: cover;
    }

    .catch-text {
      top: 30%;
      left: 30%;
    }
  }

  .consult-now.red-note {
    height: auto;
  }

  .why-high-area {
    --badge-width: 15rem;
    --badge-height: 7.5rem;
  }

  .faq-area {
    .faq-item {
      &:first-child {
        .faq-question {
          padding-top: 0;
        }
      }

      .faq-question {
        summary::before {
          width: 45px;
          height: 45px;
        }
      }
    }
  }
  .address-area {
    margin-bottom: 40px;

    .end-logo {
      width: 500px;
      margin: auto;
      margin-bottom: 35px;
    }

    .store-title {
      font-size: 2rem;

      span::after {
        bottom: -4px;
      }
    }

    .store-desc {
      font-size: 1.5rem;
    }

    .store-info {
      display: flex;
      flex-direction: column;
      text-align: center;
      align-items: center;

      img {
        width: 100%;
        margin: auto;
      }

      strong {
        font-size: 2.25rem;
      }

      strong br {
        display: none;
      }

      p {
        font-size: 1.5rem;
        margin: 2rem auto;
        line-height: 1.5;
      }
    }
  }

  .your-way-area {
    &.red-note {
      height: auto;
      padding: 30px 20px;
    }

    .btn-group {
      width: 100%;

      .btn-email {
        font-size: 3.167rem;
      }

      .btn-line {
        font-size: 3.5rem;
        height: 135px;
      }
    }
  }
  footer {
    .footer-links a,
    .copy-right {
      font-size: 1.42rem;
    }
  }
  .footer-btns {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
  }
}

@media only screen and (max-width: 1024px) {
  .btn-group a,
  .btn-group .btn {
    width: 100%;
  }

  .button-group-area {
    .btn-group {
      padding: 25px 20px;

      .btn-logo {
        width: 153px;
        height: auto;
      }
    }
  }

  .btn-header {
    h3 {
      letter-spacing: 1px;
    }

    .right-female {
      right: 15px;
    }

    .btn-note {
      width: 390px;
      height: 53px;
      border-width: 4px;
    }
  }

  .btn {
    padding: 0 22.5px;

    .btn-icon-text {
      width: 100%;
      white-space: nowrap;
      justify-content: center;

      img {
        width: 42px;
        margin-right: 20px;
      }
    }

    &::after {
      width: 37.5px;
      height: 37.5px;
    }

    &.btn-email {
      font-size: 3.5rem;
    }

    &.btn-line,
    &.btn-line .bigger {
      font-size: 4rem;
    }

    &.btn-call:not(.btn-chat) {
      .btn-icon-text {
        width: auto;

        img {
          margin-right: 6px;
        }
      }
    }
    &.btn-chat {
      height: 10rem;
    }
  }

  .peace-reason-list {
    gap: 15px;

    .peace-reason-item {
      border-radius: 15px;

      img {
        height: 54%;
      }
    }
  }
}

@media only screen and (max-width: 680px) {
  html {
    font-size: var(--font-size-xs-auto);
  }

  .header-area p {
    font-size: 2.25rem;
  }

  .kanto-support-area {
    .map-places {
      .map-dot {
        .number {
          font-size: 5vw;
        }
      }
    }
  }

  .trouble-bubbles {
    font-size: 3.5vw;
    line-height: 5vw;
  }
}

@media only screen and (max-width: 576px) {
  :root {
    --screen-padding: 15px;
    --border-radius: 10px;
  }
  html {
    font-size: 0.4rem;
  }
  br.sp-hidden {
    display: none;
  }
  .container {
    overflow-x: hidden;
  }
  .header-area p {
    font-size: 2rem;
  }
  .top-visual-area .red-note,
  .red-note {
    height: auto;
    padding: 20px 0;
  }
  .btn {
    height: 80px;
    padding: 0 15px;
    .btn-icon-text {
      img {
        width: 25px;
        margin-right: 10px;
      }
    }
    &.btn-call {
      height: 80px;
      .time {
        padding-left: 30px;
      }
    }
    &::after {
      width: 30px;
      height: 30px;
    }
  }
  .button-group-area {
    .btn-inside {
      border-width: 2px;
    }
    .btn-group {
      padding: 15px;
      gap: 15px;
    }
    .btn-header {
      .btn-note {
        width: 240px;
        height: 40px;
        top: -35%;
        border-width: 2px;
      }
      .price-0-container {
        width: 35px;
      }
      .bottom-arrow-badge::after {
        --size: 10px;
      }
    }
  }
  .red-note h3 {
    letter-spacing: -0.5px;
  }
  .red-note .ribbon {
    --r: 5px;
    padding: 2px 10px;
  }
  .hand-number-list {
    gap: 20px;
  }
  .hand-number-item .item-title {
    padding: 12px;
  }
  .why-high-area .hand-number-item .item-title {
    font-size: 2.5rem !important;
    line-height: 1.2;
  }
  .why-high-area .hand-number-item .item-desc {
    font-size: 2rem;
    line-height: 1.2;
    padding: 0 3rem;
    margin-bottom: 2rem;
  }
  .hand-note {
    height: auto;
  }
  .treasure-area .product span::after {
    margin-left: 0.3em;
  }
  .peace-reason-item {
    padding: 15px 0 0;
  }
  .peace-reason-item img {
    margin-bottom: 10px;
  }
  .step-area {
    .step-item {
      .step-content {
        padding: 0 15px;
      }
    }
  }
  .step-desc {
    font-size: 1.6rem;
  }
  .your-way-area.red-note {
    padding-left: 0;
    padding-right: 0;
  }
  .your-way-area .btn-group .btn-line {
    height: 90px;
    .qr-code {
      width: 60px;
      height: 60px;
    }
  }
  .slash-title {
    --slash-margin-x: -1px;
  }
  .kanto-support-area .choose-methods .method-box {
    padding: 20px 0;
    height: auto;
    &.red,
    &.green {
      --badge-width: auto !important;
      --badge-height: 30px;
      .top-badge {
        padding: 0 15px;
        &::after {
          --size: 10px;
        }
      }
      img {
        margin-bottom: 10px;
      }
    }
  }
  .comparison-table td {
    padding: 10px;
    font-size: 1.2rem;
  }
  .comparison-table th {
    font-size: 1.7rem;
  }
  .favorite-area {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 40px;
  }
  .favorite-item-info {
    font-size: 1.9rem;
  }
  .favorite-item-image {
    padding-left: 0;
  }
  .seven-point-area {
    padding: 0 15px 10px;
    border-width: 2px;
  }
  .seven-point-area .point-row {
    padding: 0;
    padding-bottom: 10px;
  }
  .type-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .type-list .type-item {
    aspect-ratio: unset;
    padding-bottom: 2rem;
  }
  .type-list .type-item p {
    font-size: 2.25rem;
    line-height: 1.5;
  }
  .other-items-list .badge::before {
    width: 30px;
    height: 43px;
  }
  .other-items-list .item-card .label {
    font-size: 2.25rem;
    line-height: 1;
  }
  .faq-question summary {
    font-size: 3rem;
    line-height: 4rem;
    padding-right: 10%;
  }
  .faq-question p {
    font-size: 2.5rem;
    line-height: 4rem;
  }
}

@media only screen and (max-width: 410px) {
  .btn.btn-call .text {
    font-size: 2.5rem;
  }
  .btn.btn-call .number {
    font-size: 3.5rem;
  }
  .hand-note img {
    width: 5rem;
  }
}