/**
 * メインスタイルシート - Hero Section のみ
 */

/* ===== ベーススタイル ===== */
body {
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--font-weight-light);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* ===== ユーティリティクラス ===== */
.pc-only {
  display: none !important;
}

.sp-only {
  display: inline;
}

img.sp-only {
  display: block;
}

/* SP版で改行、PC版で改行なし */
.br-sp {
  display: inline;
}

/* セクション間の共通スペーシング */
.section-spacing {
  padding: 48px 0 0 0;
}

@media (min-width: 768px) {
  .pc-only {
    display: inline !important;
  }

  img.pc-only {
    display: block !important;
  }

  .sp-only {
    display: none !important;
  }

  .br-sp {
    display: none;
  }

  .section-spacing {
    padding: 96px 0 0 0;
  }
}

/* ===== Hero Section ===== */
.hero {
  background-color: var(--color-white);
}

/* Hero Catch Copy */
.hero__catch {
  padding: 32px 0;
  text-align: center;
  background-color: var(--color-white);
}

@media (min-width: 768px) {
  .hero__catch {
    max-width: var(--max-width-full);
    margin: 0 auto;
    padding-left: var(--padding-container-pc);
    padding-right: var(--padding-container-pc);
  }
}

.hero__catch-text {
  line-height: 1.5;
}

.hero__catch-text--primary {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-primary);
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .hero__catch-text--primary {
    font-size: 32px;
    margin-bottom: 0;
  }
}

.hero__catch-text--accent {
  font-size: 40px;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .hero__catch-text--accent {
    font-size: 48px;
    margin-top: 32px;
  }
}

/* Hero Visual */
.hero__visual {
  position: relative;
  width: 100%;
  height: auto;
  background-image: none;
}

@media (min-width: 768px) {
  .hero__visual {
    height: 964px;
    max-width: var(--max-width-full);
    margin: 0 auto;
    background-image: url('/images/hero/hero.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 64px;
  }
}

/* Hero Visual Image (SP版のみ) */
.hero__visual-image {
  display: block;
  position: relative;
  width: 100%;
  height: 390px;
  background-image: url('/images/hero/hero.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

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

/* Hero Title Wrapper (白い半透明背景) */
.hero__title-wrapper {
  background-color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* SP版のTitle Wrapper */
.hero__title-wrapper--sp {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 16px 24px;
  flex-direction: column;
}

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

/* PC版のTitle Wrapper */
.hero__title-wrapper--pc {
  display: none;
}

@media (min-width: 768px) {
  .hero__title-wrapper--pc {
    display: flex;
    position: relative;
    padding: 64px 112px;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 1440px;
  }
}

/* Hero Logo */
.hero__logo {
  max-width: 342px;
  width: 100%;
}

@media (min-width: 768px) {
  .hero__logo {
    max-width: 596px;
  }
}

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

/* Hero CTA (PC版) */
.hero__cta {
  display: none;
}

@media (min-width: 768px) {
  .hero__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 12px solid var(--color-primary);
    padding: 16px;
    max-width: 596px;
    width: 100%;
  }

  .hero__cta-text {
    font-size: clamp(24px, 6vw, 96px);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.5;
    text-align: center;
  }
}

/* Hero CTA SP版 (茶色背景) */
.hero__cta-sp {
  display: block;
  width: 100%;
  background-color: var(--color-primary);
  padding: 24px;
  text-align: center;
}

.hero__cta-sp-text {
  font-size: 48px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

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

/* ===== What is CAFE PASSPORT Section ===== */
.what-is {
  background-color: var(--color-white);
}

.what-is__container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--padding-container-sp);
}

@media (min-width: 768px) {
  .what-is__container {
    padding: 0 var(--padding-container-pc);
    text-align: center;
  }
}

.what-is__title {
  font-size: 40px;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1.5;
  margin-bottom: 24px;
  text-align: center;
}

@media (min-width: 768px) {
  .what-is__title {
    font-size: 48px;
    margin-bottom: 32px;
  }
}

.what-is__description {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  margin: 0;
}

@media (min-width: 768px) {
  .what-is__description {
    font-size: 32px;
  }
}

/* ===== Instructions Section ===== */
.instructions {
  background-color: var(--color-white);
}

.instructions__container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--padding-container-sp);
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media (min-width: 768px) {
  .instructions__container {
    padding: 0 var(--padding-container-pc);
    flex-direction: column;
    gap: 48px;
  }
}

/* Individual Instruction */
.instruction {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

@media (min-width: 768px) {
  .instruction {
    gap: 24px;
    align-items: center;
  }
}

.instruction__title {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1.5;
  text-align: left;
  margin: 0;
}

@media (min-width: 768px) {
  .instruction__title {
    font-size: 32px;
    text-align: center;
  }
}

.instruction__card {
  width: 100%;
  border: 1px solid var(--color-primary);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

@media (min-width: 768px) {
  .instruction__card {
    padding: 32px;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
  }
}

/* Step 1: 横並び (画像左、テキスト右) */
.instruction__card--horizontal {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/* Step 2, 3: 縦並び (テキスト上、画像下) */
.instruction__card--vertical {
  flex-direction: column;
}

.instruction__image {
  width: 100%;
  max-width: 250px;
}

/* Step 1: 画像サイズ */
.instruction:nth-child(1) .instruction__image {
  max-width: 200px;
}

/* Step 3: 画像を少し小さく */
.instruction:nth-child(3) .instruction__image {
  max-width: 200px;
}

@media (min-width: 768px) {
  .instruction__image {
    max-width: 300px;
  }

  .instruction:nth-child(1) .instruction__image {
    max-width: 200px;
  }

  .instruction:nth-child(3) .instruction__image {
    max-width: 300px;
  }
}

.instruction__img {
  width: 100%;
  height: auto;
  display: block;
}

.instruction__description {
  font-size: 18px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

/* Step 1: 説明を左揃え */
.instruction__card--horizontal .instruction__description {
  text-align: left;
}

@media (min-width: 768px) {
  .instruction__description {
    font-size: 20px;
    text-align: center;
  }
}

/* ===== System Section ===== */
.system {
  background-color: var(--color-white);
}

.system__container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--padding-container-sp);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .system__container {
    padding: 0 var(--padding-container-pc);
  }
}

/* System Description */
.system__description {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: left;
  margin: 0;
}

@media (min-width: 768px) {
  .system__description {
    font-size: 32px;
    text-align: center;
  }
}

/* System Card - SP: 縦積み, PC: 横並び */
.system__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

@media (min-width: 768px) {
  .system__card {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
}

/* Price Board */
.system__price-board {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 420px;
  width: 100%;
}

.system__price-board-upper {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.system__price-board-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 204px;
}

.system__logo {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 278.31 / 98.55;
  object-fit: contain;
}

.system__plan {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.system__plan-badge {
  display: inline-block;
  background-color: #81C9C5;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 24px;
  text-align: center;
  letter-spacing: 1.6px;
  width: fit-content;
}

.system__price {
  font-size: 0;
  line-height: 1;
  color: var(--color-accent);
  margin: 0;
  white-space: nowrap;
}

.system__price-value {
  font-size: 56px;
  font-weight: 600;
}

.system__price-unit {
  font-size: 32px;
  font-weight: 700;
}

.system__price-tax {
  font-size: 24px;
  font-weight: 300;
}

.system__price-board-right {
  flex: 1;
  display: flex;
  align-items: flex-end;
  max-width: 174.74px;
  max-height: 170px;
}

.system__human-ok {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 188.77 / 183.65;
  object-fit: contain;
}

.system__price-note {
  font-size: 12px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  margin: 0;
  display: flex;
  align-items: flex-start;
}

.system__price-note::before {
  content: '※';
  flex-shrink: 0;
}

/* Flow Section (Center) */
.system__flow {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
}

@media (min-width: 768px) {
  .system__flow {
    flex-direction: column;
  }
}

.system__flow-text {
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  writing-mode: vertical-rl;
}

@media (min-width: 768px) {
  .system__flow-text {
    writing-mode: horizontal-tb;
  }
}

.system__flow-text--start {
  font-size: 24px;
  color: var(--color-accent);
  white-space: nowrap;
}

@media (min-width: 768px) {
  .system__flow-text--start {
    font-size: 32px;
  }
}

.system__flow-text--main {
  font-size: 24px;
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .system__flow-text--main {
    font-size: 32px;
  }
}

.system__flow-text--sub {
  font-size: 12px;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .system__flow-text--sub {
    font-size: 20px;
  }
}

.system__flow-provide {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

@media (min-width: 768px) {
  .system__flow-provide {
    flex-direction: column-reverse;
    align-items: center;
  }
}

/* Arrow Wrapper */
.system__arrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48.88px;
  height: 216.54px;
}

.system__arrow {
  width: 100%;
  height: 100%;
  display: block;
}

/* SP: 縦方向の矢印 */
.system__arrow--up {
  transform: rotate(180deg);
}

.system__arrow--reverse {
  transform: scaleX(-1);
}

/* PC: 横方向の矢印 */
@media (min-width: 768px) {
  .system__arrow-wrapper {
    width: 216.54px;
    height: 48.88px;
  }
}

/* Restaurant */
.system__restaurant {
  display: flex;
  align-items: center;
  justify-content: center;
}

.system__restaurant-img {
  width: 175px;
  height: auto;
  display: block;
  aspect-ratio: 175 / 176.47;
  object-fit: contain;
}

/* ===== Conversion Button (共通コンポーネント) ===== */
.conversion-button {
  background-color: var(--color-white);
}

/* Merit Sectionの後のConversion Button（Footer Infoの前）はpadding-bottomを追加 */
.merit + .conversion-button {
  padding: 48px 0;
}

@media (min-width: 768px) {
  .merit + .conversion-button {
    padding: 96px 0;
  }
}

.conversion-button__container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 var(--padding-container-sp);
  width: 100%;
}

@media (min-width: 768px) {
  .conversion-button__container {
    padding: 0 var(--padding-container-pc);
  }
}

.conversion-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 1000px;
  background-color: #39B54A;
  border-radius: 48px;
  padding: 16px;
  text-decoration: none;
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              background-color var(--transition-base);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.conversion-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  background-color: #42C454;
}

.conversion-button__icon {
  width: 38px;
  height: 38px;
  display: block;
  flex-shrink: 0;
}

.conversion-button__text {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
  white-space: nowrap;
}

/* ===== Two Types of Customer Section ===== */
.two-types {
  background-color: var(--color-white);
}

.two-types__container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--padding-container-sp);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .two-types__container {
    padding: 0 var(--padding-container-pc);
  }
}

/* Catch Copy */
.two-types__catch {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.two-types__catch-text {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .two-types__catch-text {
    font-size: 32px;
  }
}

.two-types__catch-text--accent {
  font-size: 40px;
  color: var(--color-accent);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .two-types__catch-text--accent {
    font-size: 48px;
  }
}

/* Cards */
.two-types__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

@media (min-width: 768px) {
  .two-types__cards {
    flex-direction: row;
    gap: 48px;
    justify-content: center;
    align-items: stretch;
  }
}

.two-types__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 32px;
  border: 1px solid var(--color-primary);
  border-radius: 24px;
  width: 100%;
  max-width: 800px;
}

@media (min-width: 768px) {
  .two-types__card {
    flex: 1;
    min-width: 0;
  }
}

.two-types__card-title {
  font-size: 16px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: center;
  margin: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .two-types__card-title {
    font-size: 20px;
  }
}

.two-types__card-img {
  width: 100%;
  max-width: 340.68px;
  max-height: 150px;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Specific aspect ratios for each illustration */
.two-types__card:first-child .two-types__card-img {
  aspect-ratio: 329.76 / 145.19;
}

.two-types__card:last-child .two-types__card-img {
  aspect-ratio: 322.2 / 122.24;
}

/* Description */
.two-types__description {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: left;
  margin: 0;
}

@media (min-width: 768px) {
  .two-types__description {
    font-size: 32px;
    text-align: center;
  }
}

/* Note */
.two-types__note {
  font-size: 16px;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1.5;
  text-align: left;
  margin: 0;
}

@media (min-width: 768px) {
  .two-types__note {
    font-size: 20px;
    text-align: center;
  }
}

/* ===== Welcome Section ===== */
.welcome {
  background-color: var(--color-white);
}

/* Title Wrapper with Background */
.welcome__title-wrapper {
  background-color: #C7B299;
  padding: 48px 0;
}

.welcome__title-container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--padding-container-sp);
}

@media (min-width: 768px) {
  .welcome__title-container {
    padding: 0 var(--padding-container-pc);
  }
}

.welcome__title {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .welcome__title {
    font-size: 32px;
  }
}

/* Main Container */
.welcome__container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 32px var(--padding-container-sp) 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
}

@media (min-width: 768px) {
  .welcome__container {
    padding: 32px var(--padding-container-pc) 0;
  }
}

/* Card */
.welcome__card {
  border: 1px solid var(--color-primary);
  border-radius: 24px;
  padding: 32px;
  width: 100%;
  max-width: 800px;
}

.welcome__card-text {
  font-size: 16px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: left;
  margin: 0;
}

@media (min-width: 768px) {
  .welcome__card-text {
    font-size: 20px;
  }
}

/* Description */
.welcome__description {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: left;
  margin: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .welcome__description {
    font-size: 32px;
    text-align: center;
  }
}

/* Note */
.welcome__note {
  font-size: 12px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: center;
  margin: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .welcome__note {
    font-size: 16px;
  }
}

/* ===== Merit Section ===== */
.merit {
  background-color: var(--color-white);
}

.merit__container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0 var(--padding-container-sp);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .merit__container {
    padding: 0 var(--padding-container-pc);
  }
}

/* Title */
.merit__title {
  font-size: 40px;
  font-weight: 300;
  color: var(--color-accent);
  line-height: 1.2;
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .merit__title {
    font-size: 48px;
  }
}

/* Cards */
.merit__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

@media (min-width: 768px) {
  .merit__cards {
    flex-direction: row;
    gap: 48px;
    justify-content: center;
    align-items: stretch;
  }
}

.merit__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  border: 1px solid var(--color-primary);
  border-radius: 24px;
  width: 100%;
  max-width: 800px;
}

@media (min-width: 768px) {
  .merit__card {
    flex: 1;
    min-width: 0;
  }
}

/* Card Title */
.merit__card-title {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.merit__card-number {
  width: 33.42px;
  height: 46.03px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.merit__card-heading {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  margin: 0;
  flex: 1;
}

@media (min-width: 768px) {
  .merit__card-heading {
    font-size: 32px;
  }
}

/* Card Body */
.merit__card-body {
  font-size: 16px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: left;
  margin: 0;
}

@media (min-width: 768px) {
  .merit__card-body {
    font-size: 20px;
  }
}

/* ===== Footer Info Section ===== */
.footer-info {
  background-color: #FEEFE7;
  padding: 48px 0 48px 0;
}

@media (min-width: 768px) {
  .footer-info {
    padding: 48px 0 48px 0;
  }
}

.footer-info__container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media (min-width: 768px) {
  .footer-info__container {
    gap: 48px;
  }
}

/* How to Join */
.footer-info__how-to-join {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-info__title-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--padding-container-sp);
}

@media (min-width: 768px) {
  .footer-info__title-group {
    padding: 0 var(--padding-container-pc);
    align-items: center;
  }
}

.footer-info__title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

@media (min-width: 768px) {
  .footer-info__title-wrapper {
    flex-direction: row;
    gap: 0;
  }
}

.footer-info__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

.footer-info__title {
  font-size: 40px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.2;
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .footer-info__title {
    font-size: 48px;
  }
}

.footer-info__description {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: center;
  margin: 0;
  padding: 0 var(--padding-container-sp);
}

@media (min-width: 768px) {
  .footer-info__description {
    font-size: 32px;
    padding: 0 var(--padding-container-pc);
  }
}

.footer-info__card-wrapper {
  display: flex;
  justify-content: center;
  padding: 0 var(--padding-container-sp);
}

@media (min-width: 768px) {
  .footer-info__card-wrapper {
    padding: 0 var(--padding-container-pc);
  }
}

.footer-info__card {
  background-color: var(--color-white);
  border: 1px solid var(--color-primary);
  border-radius: 24px;
  padding: 32px;
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-info__card-title {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .footer-info__card-title {
    font-size: 32px;
  }
}

.footer-info__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-info__list-item {
  font-size: 16px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-align: left;
  margin: 0;
  display: flex;
  gap: 0;
}

@media (min-width: 768px) {
  .footer-info__list-item {
    font-size: 20px;
  }
}

.footer-info__list-item::before {
  content: '・';
  flex-shrink: 0;
}

/* FAQ */
.footer-info__faq {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-info__faq-title-wrapper {
  background-color: #C7B299;
  padding: 48px 0;
}

.footer-info__faq-title {
  font-size: 40px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.2;
  text-align: center;
  margin: 0;
  padding: 0 var(--padding-container-sp);
}

@media (min-width: 768px) {
  .footer-info__faq-title {
    font-size: 48px;
    padding: 0 var(--padding-container-pc);
  }
}

.footer-info__faq-item {
  width: 100%;
}

.footer-info__question {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  margin: 0;
  padding: 0 var(--padding-container-sp);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .footer-info__question {
    font-size: 32px;
    padding: 0 var(--padding-container-pc);
  }
}

.footer-info__q-label {
  flex-shrink: 0;
  white-space: nowrap;
}

.footer-info__answer {
  font-size: 24px;
  font-weight: 300;
  color: var(--color-white);
  line-height: 1.5;
  margin: 0;
  padding: 24px;
  background-color: var(--color-primary);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .footer-info__answer {
    font-size: 32px;
    padding: 24px var(--padding-container-pc);
  }
}

.footer-info__a-label {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Footer */
.footer-info__footer {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 0 var(--padding-container-sp);
}

@media (min-width: 768px) {
  .footer-info__footer {
    padding: 0 var(--padding-container-pc);
  }
}

.footer-info__company {
  height: 78px;
  position: relative;
  width: 100%;
}

.footer-info__company-label {
  font-size: 16px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  margin: 0;
  position: absolute;
  left: 0;
  top: 26.94px;
}

@media (min-width: 768px) {
  .footer-info__company-label {
    font-size: 20px;
    right: 50%;
    margin-right: calc(80px + 16px);
    top: 50%;
    transform: translateY(-50%);
    left: auto;
  }
}

.footer-info__company-logo {
  width: 160px;
  height: 78px;
  display: block;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.footer-info__links {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .footer-info__links {
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
  }
}

.footer-info__link {
  font-size: 12px;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1.5;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .footer-info__link {
    font-size: 16px;
  }
}