/* Hero Section */
.hero-section {
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 557px;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-image-pc {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-image-sp {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgb(255 255 255 / 70%);
}

.hero-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1280px;
  padding: 0 24px 32px;
  margin: 0 auto;
}

.hero-content-inner {
  max-width: 768px;
}

.hero-content-space {
  display: flex;
  flex-direction: column;
}

.hero-content-space > *:not(:first-child, .hero-lead) {
  margin-top: 16px;
}

.hero-tags {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.hero-tag-badge {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 12px;
  color: #8b7b6f;
  white-space: nowrap;
  background-color: rgb(255 255 255 / 90%);
  border-radius: 9999px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  backdrop-filter: blur(8px);
}

.hero-tag-text {
  font-weight: bold;
}

.hero-tag-separator {
  margin: 0 2px;
  color: #d4c9c1;
}

.hero-tag-note {
  margin-left: 4px;
  font-size: 10px;
}

.hero-title {
  font-size: 32px;
  line-height: 1.6;
  color: #333;
}

.hero-title-img {
  width: 100%;
  height: auto;
}

.hero-title-sp {
  display: block;
}

.hero-title-pc {
  display: none;
}

.hero-highlight {
  display: inline-block;
  padding: 8px 16px;
  margin-top: 12px;
  color: white;
  background: linear-gradient(to right, #8fc4d6, #f28ca0);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%);
}

.hero-highlight-line2 {
  margin-top: 10px;
}

.hero-lead {
  font-size: 16px;
  line-height: 2;
  color: #333;
}

.hero-cta-wrapper {
  padding-top: 0;
}

.hero-cta-button {
  width: 100%;
  max-width: 480px;
  padding: 20px 48px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  background: linear-gradient(to right, #d4808f, #e09099);
  border: none;
  border-radius: 9999px;
  box-shadow:
    0 20px 25px -5px rgb(224 144 153 / 40%),
    0 8px 10px -6px rgb(224 144 153 / 40%);
  transition: all 0.3s;
}

.hero-cta-button:hover {
  background: linear-gradient(to right, #c96f7d, #d4808f);
}

/* Tablet and Desktop */
@media (min-width: 768px) {
  .hero-section {
    align-items: center;
    height: 620px;
  }

  .hero-image-pc {
    display: block;
  }

  .hero-image-sp {
    display: none;
  }

  .hero-overlay {
    background-color: transparent;
    background-image: linear-gradient(
      to right,
      rgb(255 255 255 / 60%) 0%,
      rgb(255 255 255 / 40%) 50%,
      rgb(255 255 255 / 15%) 100%
    );
  }

  .hero-tags {
    font-size: 14px;
  }

  .hero-tag-badge {
    gap: 8px;
    padding: 12px 20px;
  }

  .hero-tag-separator {
    margin: 0 4px;
  }

  .hero-tag-note {
    margin-left: 8px;
    font-size: 12px;
  }

  .hero-title {
    margin-bottom: 0;
    font-size: 44px;
  }

  .hero-title-sp {
    display: none;
  }

  .hero-title-pc {
    display: inline;
  }

  .hero-cta-button {
    padding: 24px 48px;
    font-size: 20px;
  }

  .hero-highlight {
    padding: 8px 24px;
  }

  .hero-cta-wrapper {
    padding-top: 16px;
  }

  .hero-content {
    padding: 0 24px;
    margin-left: 50%;
  }

  .hero-content-space > *:not(:first-child, .hero-lead) {
    margin-top: 24px;
  }
}

/* PC Scaling (768px - 1390px) - Scale proportionally */
@media (min-width: 768px) and (max-width: 1390px) {
  .hero-section {
    height: calc(620 / 1390 * 100vw);
  }

  .hero-content {
    max-width: calc(1280 / 1390 * 100vw);
    padding: 0 calc(24 / 1390 * 100vw);
    margin-left: 50%;
  }

  .hero-content-inner {
    max-width: calc(768 / 1390 * 100vw);
  }

  .hero-title {
    font-size: calc(44 / 1390 * 100vw);
  }

  .hero-title-img {
    width: calc(600 / 1390 * 100vw);
  }

  .hero-cta-button {
    padding: calc(24 / 1390 * 100vw) calc(48 / 1390 * 100vw);
    font-size: calc(20 / 1390 * 100vw);
  }

  .hero-cta-wrapper {
    padding-top: calc(16 / 1390 * 100vw);
  }
}

/* PC Fixed (1390px+) */
@media (min-width: 1390px) {
  .hero-section {
    height: 620px;
  }

  .hero-title-img {
    width: 600px;
  }
}

/* Authority Section */
.authority-section {
  position: relative;
  background: linear-gradient(to bottom right, #fce9e7, #fafaf8, #f7f3ef);
}

.authority-container {
  max-width: 1280px;
  padding: 32px 19px 40px;
  margin: 0 auto;
}

.authority-heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
  text-align: center;
}

.authority-title {
  font-size: 24px;
  line-height: 1.7;
  color: #333;
}

.authority-title-accent {
  color: #d4808f;
}

.authority-subtitle {
  max-width: 768px;
  margin: 0 auto;
  font-size: 18px;
  color: #6b5d52;
}

.authority-main-card {
  padding: 30px 20px;
  background: white;
  border-radius: 24px;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%);
}

.authority-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.authority-stats {
  display: flex;
  flex-direction: column;
  gap: 24px;
  order: 1;
}

.authority-stats-title {
  margin-bottom: 20px;
  font-size: 22px;
  color: #333;
  text-align: center;
}

.authority-stats-grid {
  display: grid;
  gap: 16px;
}

.authority-stat-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 15px;
  background: #faf8f5;
  border-radius: 12px;
}

.authority-stat-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: linear-gradient(to bottom right, #fce9e7, #f5cdc7);
  border-radius: 50%;
}

.authority-stat-icon svg {
  width: 25px;
  height: 25px;
  color: #d4808f;
}

.authority-stat-value {
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: bold;
  color: #d4808f;
}

.authority-stat-label {
  font-size: 14px;
  color: #8b7b6f;
}

.authority-image-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  order: 2;
}

.authority-image-inner {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

.authority-image {
  width: 93%;
  max-width: 448px;
  height: auto;
}

.authority-image-wrapper p {
  margin-top: 12px;
  font-size: 15px;
  color: #d4808f;
  text-align: center;
}

.authority-image-wrapper p span {
  display: block;
  font-size: 11px;
}

.authority-awards {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.authority-awards-title {
  font-size: 24px;
  color: #333;
  text-align: center;
}

.authority-awards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.authority-award-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: 16px 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%);
}

@media (min-width: 768px) {
  .authority-award-card {
    height: 160px;
    padding: 20px 40px;
  }
}

.authority-award-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 80px;
  height: 34px;
}

@media (min-width: 768px) {
  .authority-award-badge {
    width: 93px;
    height: 40px;
  }
}

.authority-award-badge-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.authority-award-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.authority-award-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
  .authority-award-logo {
    transform: scale(1.5);
  }
}

/* Tablet and Desktop */
@media (min-width: 768px) {
  .authority-container {
    padding: 80px 24px;
  }

  .authority-heading {
    margin-bottom: 40px;
  }

  .authority-title {
    font-size: 36px;
  }

  .authority-stats-title {
    margin-bottom: 20px;
    font-size: 28px;
    text-align: center;
  }

  .authority-stat-value {
    font-size: 24px;
  }

  .authority-stat-icon {
    width: 56px;
    height: 56px;
  }

  .authority-stat-icon svg {
    width: 28px;
    height: 28px;
  }

  .authority-stat-item {
    gap: 16px;
    padding: 20px;
  }

  .authority-main-card {
    padding: 40px 60px;
  }

  .authority-card-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .authority-awards-title {
    font-size: 30px;
  }

  .authority-awards-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .authority-image-wrapper p span {
    display: inline;
  }

  .authority-award-logo {
    transform: scale(1);
  }
}

/* Problems Section */
.problems-section {
  position: relative;
  padding: 32px 0 40px;
  overflow: hidden;
  background: linear-gradient(to bottom right, white, rgb(252 233 231 / 20%), #fafaf8);
}

.problems-decoration-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 384px;
  height: 384px;
  pointer-events: none;
  background: linear-gradient(to bottom right, #fce9e7, transparent);
  opacity: 0.3;
  filter: blur(48px);
}

.problems-decoration-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 384px;
  height: 384px;
  pointer-events: none;
  background: linear-gradient(to top right, #f9dbd7, rgb(252 233 231 / 50%), transparent);
  opacity: 0.3;
  filter: blur(48px);
}

.problems-container {
  position: relative;
  z-index: 10;
  max-width: 1232px;
  padding: 0 19px;
  margin: 0 auto;
}

.problems-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
  text-align: center;
}

.problems-title {
  font-size: 22px;
  line-height: 1.7;
  color: #333;
}

.problems-subtitle {
  max-width: 768px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.625;
  color: #6b5d52;
}

.problems-section-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 32px;
}

.problems-section-line-left {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #d4c4b8);
}

.problems-section-title {
  font-size: 16px;
  font-weight: bold;
  color: #8b7b6f;
  letter-spacing: 0.1em;
}

.problems-section-line-right {
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, transparent, #d4c4b8);
}

.problems-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.problems-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 22px;
  background: white;
  border: 1px solid #e8e3df;
  border-radius: 16px;
  box-shadow:
    0 1px 2px 0 rgb(0 0 0 / 5%),
    0 1px 3px 0 rgb(0 0 0 / 10%);
  transition: all 0.3s;
}

.problems-card-content {
  flex: 1;
}

.problems-card-title {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.625;
  color: #d4808f;
}

.problems-card-text {
  font-size: 16px;
  line-height: 1.625;
  color: #333;
}

.problems-card-footer {
  margin-top: 16px;
}

.problems-card-tag {
  display: inline-block;
  padding: 6px 16px;
  font-size: 14px;
  color: #8b7b6f;
  background: #fafaf8;
  border: 1px solid #e8e3df;
  border-radius: 9999px;
}

.problems-cta {
  text-align: center;
}

.problems-cta-button {
  /* padding: 12px 40px; */
  width: 100%;
  height: 64px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  background: linear-gradient(to right, #d4808f, #e09099);
  border: none;
  border-radius: 9999px;
  box-shadow: 0 10px 15px -3px rgb(224 144 153 / 30%);
  transition: all 0.3s;
}

.problems-cta-button:hover {
  background: linear-gradient(to right, #c96f7d, #d4808f);
}

/* Tablet and Desktop */
@media (min-width: 768px) {
  .problems-section {
    padding: 80px 0;
  }

  .problems-container {
    padding: 0 24px;
  }

  .problems-heading {
    margin-bottom: 40px;
  }

  .problems-title {
    font-size: 36px;
  }

  .problems-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .problems-grid--industry {
    grid-template-columns: repeat(2, 1fr);
  }

  .problems-card-title {
    font-size: 24px;
  }

  .problems-card {
    padding: 32px;
  }

  .problems-cta-button {
    /* padding: 20px 40px; */
    width: 450px;
    height: 84px;
    font-size: 24px;
  }
}

/* ServiceContent Section */
.service-content-section {
  padding: 32px 0 40px;
  background: white;
}

.service-content-container {
  max-width: 1280px;
  padding: 0 19px;
  margin: 0 auto;
}

.service-content-heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
  text-align: center;
}

.service-content-title {
  font-size: 22px;
  line-height: 1.7;
  color: #333;
}

.service-content-subtitle {
  font-size: 18px;
  color: #6b5d52;
}

.service-content-steps {
  margin-bottom: 56px;
}

.service-content-steps-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

.service-content-step {
  flex: 1;
  width: 100%;
}

.service-content-step-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 20px 19px 30px;
  text-align: center;
  background: linear-gradient(to bottom right, #fce9e7, #fafaf8, #f5f0ed);
  border: 1px solid rgb(252 233 231 / 50%);
  border-radius: 16px;
}

.service-content-step-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.service-content-step-body {
  text-align: center;
}

.service-content-step-number {
  font-size: 32px;
  font-weight: bold;
  color: #d4808f;
}

.service-content-step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  background: white;
  border-radius: 50%;
}

.service-content-step-icon svg {
  width: 28px;
  height: 28px;
  color: #d4808f;
}

.service-content-step-title {
  margin-bottom: 8px;
  font-size: 20px;
  color: #333;
}

.service-content-step-description {
  font-size: 14px;
  line-height: 1.625;
  color: #6b5d52;
}

.service-content-arrow {
  display: none;
}

@media (max-width: 767px) {
  .service-content-steps-container {
    gap: 12px;
    align-items: stretch;
  }

  .service-content-step-card {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    padding: 21px;
    text-align: left;
  }

  .service-content-step-header {
    flex-shrink: 0;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    width: 92px;
  }

  .service-content-step-number {
    margin-bottom: 0;
    font-size: 28px;
    line-height: 1;
  }

  .service-content-step-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 0;
  }

  .service-content-step-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-width: 0;
    text-align: left;
  }

  .service-content-step-title {
    margin-bottom: 0;
    font-size: 18px;
    line-height: 1.56;
  }

  .service-content-step-description {
    font-size: 14px;
    line-height: 1.625;
  }

  .service-content-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: #d4c4b8;
    transform: rotate(90deg);
  }
}

.problems-arrow {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

.problems-arrow-img {
  width: 45px;
  height: auto;
}

@media (min-width: 768px) {
  .problems-arrow {
    padding: 30px 0;
  }

  .problems-arrow-img {
    width: auto;
  }
}

.problems-benefits {
  margin-bottom: 56px;
}

.problems-benefits-card {
  padding: 32px;
  color: #d4808f;

  /* background: linear-gradient(to bottom right, #e09099, #d4808f, #c96f7d); */
  background: linear-gradient(147deg, #ffefed 17.51%, #f5cdc7 91.47%);
  border-radius: 24px;

  /* box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%); */
}

.problems-benefits-title {
  margin-bottom: 32px;
  font-size: 24px;
  text-align: center;
}

.problems-benefits-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.problems-benefit-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;

  /* background: rgb(255 255 255 / 20%); */
  background: rgb(255 255 255 / 60%);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

.problems-benefit-text {
  font-weight: bold;
  line-height: 1.625;
}

@media (max-width: 767px) {
  .problems-benefits {
    margin-bottom: 32px;
  }

  .problems-benefits-card {
    padding: 32px 24px;
  }

  .problems-benefit-item {
    padding: 16px 10px;
  }
}

.service-content-report-heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
  text-align: center;
}

.service-content-report-heading-title {
  font-size: 24px;
  line-height: 1.7;
  color: #333;
}

.service-content-report {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  max-width: 1035px;
  margin: 0 auto;
}

.service-content-report-image-wrapper {
  position: relative;
  isolation: isolate;
}

.service-content-report-image-inner {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
}

.service-content-report-image {
  display: block;
  width: 100%;
  height: auto;
}

.service-content-report-caption {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  font-size: 12px;
  color: #8b7b6f;
  text-align: center;
}

.service-content-report-decoration-1 {
  position: absolute;
  top: -16px;
  left: -16px;
  z-index: 1;
  width: 96px;
  height: 96px;
  background: #f5cdc7;
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(32px);
}

.service-content-report-decoration-2 {
  position: absolute;
  right: -16px;
  bottom: -16px;
  z-index: 1;
  width: 128px;
  height: 128px;
  background: #d4808f;
  border-radius: 50%;
  opacity: 0.3;
  filter: blur(32px);
}

.service-content-report-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-content-report-title {
  font-size: 24px;
  color: #333;
}

.service-content-report-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-content-report-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 12px;
  background: #fafaf8;
  border: 1px solid #e8e3df;
  border-radius: 12px;
}

.service-content-report-item svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  color: #d4808f;
}

.service-content-report-item-text {
  color: #333;
}

.service-content-report-note {
  padding-top: 0;
  font-size: 14px;
  color: #8b7b6f;
}

/* Tablet and Desktop */
@media (min-width: 768px) {
  .service-content-section {
    padding: 80px 0;
  }

  .service-content-container {
    padding: 0 24px;
  }

  .service-content-heading {
    margin-bottom: 40px;
  }

  .service-content-title {
    font-size: 36px;
  }

  .problems-benefits-card {
    padding: 48px;
  }

  .problems-benefits-title {
    font-size: 30px;
  }

  .service-content-steps {
    margin-bottom: 80px;
  }

  .service-content-report-heading {
    margin-bottom: 40px;
  }

  .service-content-report-heading-title {
    font-size: 36px;
  }

  .service-content-report {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-content-report-title {
    font-size: 30px;
  }

  .service-content-report-item {
    gap: 16px;
    padding: 16px;
  }

  .service-content-report-note {
    padding-top: 16px;
  }
}

@media (min-width: 1024px) {
  .service-content-steps-container {
    flex-direction: row;
    align-items: stretch;
  }

  .service-content-step {
    display: flex;
    flex: 1;
  }

  .service-content-step-card {
    width: 100%;
  }

  .service-content-arrow {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    margin: 0 -16px;
    font-size: 24px;
    color: #d4c4b8;
    transform: none;
  }

  .problems-benefits-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ContactForm Section */
.contact-form-section {
  position: relative;
  padding: 32px 0 40px;
  overflow: hidden;
  background: linear-gradient(to bottom right, #fce9e7, #fafaf8, white);
}

.contact-form-decoration-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 384px;
  height: 384px;
  pointer-events: none;
  background: linear-gradient(to bottom right, rgb(252 233 231 / 60%), rgb(252 233 231 / 30%), transparent);
  opacity: 0.4;
  filter: blur(48px);
}

.contact-form-decoration-bottom {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 384px;
  height: 384px;
  pointer-events: none;
  background: linear-gradient(to top left, rgb(249 219 215 / 60%), rgb(252 233 231 / 30%), transparent);
  opacity: 0.4;
  filter: blur(48px);
}

.contact-form-container {
  position: relative;
  z-index: 10;
  max-width: 896px;
  padding: 0 19px;
  margin: 0 auto;
}

.contact-form-heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
  text-align: center;
}

.contact-form-title {
  font-size: 22px;
  line-height: 1.7;
  color: #333;
}

.contact-form-subtitle {
  max-width: 768px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.625;
  color: #6b5d52;
}

.contact-form-card {
  padding: 32px;
  background: white;
  border: 1px solid #fce9e7;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
}

@media (max-width: 767px) {
  .contact-form-card {
    padding: 32px 24px;
  }
}

.contact-form-card-title {
  margin-bottom: 8px;
  font-size: 20px;
  color: #333;
  text-align: center;
}

.contact-form-card-subtitle {
  margin-bottom: 40px;
  font-size: 14px;
  color: #8b7b6f;
  text-align: center;
}

.contact-form-card-subtitle--left {
  margin-bottom: 24px;
  text-align: left;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.contact-form-group label:not(.contact-form-checkbox-wrapper) {
  display: block;
  margin-bottom: 8px;
  color: #333;
}

.contact-form-required {
  color: #d4808f;
}

.contact-form-input,
.contact-form-textarea {
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  background: #fafaf8;
  border: 1px solid #e8e3df;
  border-radius: 12px;
  transition: all 0.3s;
}

.contact-form-input::placeholder,
.contact-form-textarea::placeholder {
  color: rgb(10 10 10 / 50%);
  opacity: 1;
}

.contact-form-input::input-placeholder,
.contact-form-textarea::input-placeholder {
  color: rgb(10 10 10 / 50%);
  opacity: 1;
}

.contact-form-input:focus,
.contact-form-textarea:focus {
  outline: none;
  border-color: #d4808f;
  box-shadow: 0 0 0 3px rgb(212 128 143 / 20%);
}

.contact-form-input.error,
.contact-form-textarea.error {
  border-color: rgb(248 113 113);
}

.contact-form-textarea {
  line-height: 1.5;
  resize: none;
}

.contact-form-error {
  margin-top: 8px;
  font-size: 14px;
  color: rgb(239 68 68);
}

.contact-form-privacy-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-form-privacy-label {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}

.contact-form-privacy-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-form-privacy-description-container {
  width: 100%;
  height: 240px;
  padding: 16px;
  overflow-y: auto;
  border: 1px solid #e8e3df;
  border-radius: 12px;
}

.contact-form-privacy-description-title {
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
}

.contact-form-privacy-description-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;

  ul {
    list-style: none;
  }
}

.contact-form-privacy-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-form-privacy-link {
  color: #d4808f;
  text-decoration: underline;
}

.contact-form-privacy-link:hover {
  text-decoration: none;
}

.contact-form-checkbox-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
  cursor: pointer;
}

.contact-form-checkbox-wrapper:hover .contact-form-checkbox-label {
  color: #d4808f;
}

.contact-form-checkbox {
  display: grid;
  flex-shrink: 0;
  place-content: center;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  appearance: none;
  cursor: pointer;
  background: white;
  border: 2px solid #e8e3df;
  border-radius: 4px;
}

.contact-form-checkbox:checked {
  background: #d4808f;
  border-color: #d4808f;
}

.contact-form-checkbox:checked::after {
  width: 5px;
  height: 10px;
  margin-top: -2px;
  content: '';
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.contact-form-checkbox.error {
  outline: 1px solid rgb(239 68 68);
}

.contact-form-checkbox:focus {
  box-shadow: 0 0 0 3px rgb(212 128 143 / 20%);
}

.contact-form-checkbox-label {
  font-size: 14px;
  line-height: 1.625;
  color: #333;
  transition: color 0.3s;
}

.contact-form-group.error .contact-form-checkbox-label {
  color: rgb(239 68 68);
}

.contact-form-submit {
  display: block;
  width: 100%;
  max-width: 480px;
  padding: 12px 40px;
  margin: 0 auto;
  font-size: 14px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  background: linear-gradient(to right, #d4808f, #e09099);
  border: none;
  border-radius: 9999px;
  box-shadow: 0 10px 15px -3px rgb(224 144 153 / 30%);
  transition: all 0.3s;
}

.contact-form-submit:hover {
  background: linear-gradient(to right, #c96f7d, #d4808f);
}

.contact-form-submit:disabled,
.contact-form-submit.is-submitting {
  cursor: wait;
  opacity: 0.7;
}

.contact-form-note {
  font-size: 14px;
  line-height: 1.625;
  color: #8b7b6f;
  text-align: center;
}

/* Tablet and Desktop */
@media (min-width: 768px) {
  .contact-form-section {
    padding: 80px 0;
  }

  .contact-form-container {
    padding: 0 24px;
  }

  .contact-form-heading {
    margin-bottom: 40px;
  }

  .contact-form-title {
    font-size: 36px;
  }

  .contact-form-card {
    padding: 48px;
  }

  .contact-form-card-title {
    font-size: 24px;
  }

  .contact-form-submit {
    padding: 20px 40px;
    font-size: 16px;
  }

  .contact-form-privacy-label {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .contact-form-privacy-description {
    font-size: 16px;
  }

  .contact-form-privacy-description-title {
    font-size: 18px;
  }

  .contact-form-checkbox-label {
    font-size: 16px;
  }
}

/* ThankYou Section */
.thank-you-section {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 80px 24px;
  overflow: hidden;
  background: linear-gradient(to bottom right, #fce9e7, #fce9e7, white);
}

.thank-you-decoration-top {
  position: absolute;
  top: 0;
  right: 0;
  width: 384px;
  height: 384px;
  pointer-events: none;
  background: linear-gradient(to bottom left, rgb(249 219 215 / 60%), rgb(252 233 231 / 30%), transparent);
  opacity: 0.4;
  filter: blur(48px);
}

.thank-you-decoration-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 384px;
  height: 384px;
  pointer-events: none;
  background: linear-gradient(to top right, rgb(245 205 199 / 60%), rgb(252 233 231 / 30%), transparent);
  opacity: 0.4;
  filter: blur(48px);
}

.thank-you-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 768px;
}

.thank-you-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  text-align: center;
  background: rgb(255 255 255 / 80%);
  border: 1px solid #fce9e7;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
  backdrop-filter: blur(8px);
}

.thank-you-icon-wrapper {
  display: flex;
  justify-content: center;
}

.thank-you-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(to bottom right, #e09099, #d4808f, #c96f7d);
  border-radius: 50%;
  box-shadow: 0 10px 15px -3px rgb(212 128 143 / 30%);
}

.thank-you-icon svg {
  width: 48px;
  height: 48px;
  color: white;
}

.thank-you-title {
  font-size: 28px;
  color: #333;
}

.thank-you-message {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.thank-you-text {
  font-size: 18px;
  line-height: 1.625;
  color: #6b5d52;
}

.thank-you-divider-wrapper {
  position: relative;
  padding-top: 32px;
}

.thank-you-divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 256px;
  height: 1px;
  background: linear-gradient(to right, transparent, #d4c4b8, transparent);
  transform: translateX(-50%);
}

/* Tablet and Desktop */
@media (min-width: 768px) {
  .thank-you-card {
    padding: 64px;
  }

  .thank-you-title {
    font-size: 36px;
  }
}

@media (min-width: 1024px) {
  .thank-you-title {
    font-size: 40px;
  }
}

/* Footer Section */
.footer {
  padding: 64px 0;
  color: white;
  background: #413939;
}

.footer-container {
  max-width: 1280px;
  padding: 0 24px;
  margin: 0 auto;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-company-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-company-title {
  font-size: 24px;
}

.footer-company-name {
  color: #fff;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 14px;
}

.footer-link {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-link:hover {
  color: white;
}

.footer-link svg {
  width: 16px;
  height: 16px;
}

.footer-copyright-wrapper {
  padding-top: 32px;
  background: rgb(255 255 255 / 0%);
  border-top: 1px solid #4a3f38;
}

.footer-copyright {
  font-size: 14px;
  color: #b5a79d;
}

/* App Layout */
.app-container {
  min-height: 100vh;
  background: white;
}

:root {
  --font-size: 16px;
  --background: #fff;
  --foreground: oklch(14.5% 0 0deg);
  --card: #fff;
  --card-foreground: oklch(14.5% 0 0deg);
  --popover: oklch(100% 0 0deg);
  --popover-foreground: oklch(14.5% 0 0deg);
  --primary: #030213;
  --primary-foreground: oklch(100% 0 0deg);
  --secondary: oklch(95% 0.0058 264.53deg);
  --secondary-foreground: #030213;
  --muted: #ececf0;
  --muted-foreground: #717182;
  --accent: #e9ebef;
  --accent-foreground: #030213;
  --destructive: #d4183d;
  --destructive-foreground: #fff;
  --border: rgb(0 0 0 / 10%);
  --input: transparent;
  --input-background: #f3f3f5;
  --switch-background: #cbced4;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: oklch(70.8% 0 0deg);
  --chart-1: oklch(64.6% 0.222 41.116deg);
  --chart-2: oklch(60% 0.118 184.704deg);
  --chart-3: oklch(39.8% 0.07 227.392deg);
  --chart-4: oklch(82.8% 0.189 84.429deg);
  --chart-5: oklch(76.9% 0.188 70.08deg);
  --radius: 0.625rem;
  --sidebar: oklch(98.5% 0 0deg);
  --sidebar-foreground: oklch(14.5% 0 0deg);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(98.5% 0 0deg);
  --sidebar-accent: oklch(97% 0 0deg);
  --sidebar-accent-foreground: oklch(20.5% 0 0deg);
  --sidebar-border: oklch(92.2% 0 0deg);
  --sidebar-ring: oklch(70.8% 0 0deg);
}

.dark {
  --background: oklch(14.5% 0 0deg);
  --foreground: oklch(98.5% 0 0deg);
  --card: oklch(14.5% 0 0deg);
  --card-foreground: oklch(98.5% 0 0deg);
  --popover: oklch(14.5% 0 0deg);
  --popover-foreground: oklch(98.5% 0 0deg);
  --primary: oklch(98.5% 0 0deg);
  --primary-foreground: oklch(20.5% 0 0deg);
  --secondary: oklch(26.9% 0 0deg);
  --secondary-foreground: oklch(98.5% 0 0deg);
  --muted: oklch(26.9% 0 0deg);
  --muted-foreground: oklch(70.8% 0 0deg);
  --accent: oklch(26.9% 0 0deg);
  --accent-foreground: oklch(98.5% 0 0deg);
  --destructive: oklch(39.6% 0.141 25.723deg);
  --destructive-foreground: oklch(63.7% 0.237 25.331deg);
  --border: oklch(26.9% 0 0deg);
  --input: oklch(26.9% 0 0deg);
  --ring: oklch(43.9% 0 0deg);
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --chart-1: oklch(48.8% 0.243 264.376deg);
  --chart-2: oklch(69.6% 0.17 162.48deg);
  --chart-3: oklch(76.9% 0.188 70.08deg);
  --chart-4: oklch(62.7% 0.265 303.9deg);
  --chart-5: oklch(64.5% 0.246 16.439deg);
  --sidebar: oklch(20.5% 0 0deg);
  --sidebar-foreground: oklch(98.5% 0 0deg);
  --sidebar-primary: oklch(48.8% 0.243 264.376deg);
  --sidebar-primary-foreground: oklch(98.5% 0 0deg);
  --sidebar-accent: oklch(26.9% 0 0deg);
  --sidebar-accent-foreground: oklch(98.5% 0 0deg);
  --sidebar-border: oklch(26.9% 0 0deg);
  --sidebar-ring: oklch(43.9% 0 0deg);
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family:
    '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo,
    sans-serif;
  color: oklch(14.5% 0 0deg);
  background: #fff;
}

html {
  font-size: 16px;
}

h1,
h2,
h3,
h4 {
  font-family:
    '游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo,
    sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 2rem;
  line-height: 1.5;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.5;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.5;
}

h4 {
  font-size: 1rem;
  line-height: 1.5;
}

label {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

button {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
}

input {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

/* SP Only Helper */
.sp-only {
  display: block;
}

@media (min-width: 768px) {
  .sp-only {
    display: none;
  }
}