/* ========================================
   FAQページ：メインコンテンツ上下の余白を削除
======================================== */

[data-vertical-spacing*="top"] {
  padding-top: 0 !important;
}

[data-vertical-spacing*="bottom"] {
  padding-bottom: 0 !important;
}

/* ========================================
   FAQ
   Section 1：Hero
======================================== */

.ark-faq-hero {
  --faq-green: #304b3b;
  --faq-green-soft: #687a6d;
  --faq-bg: #f3f3ed;

  position: relative;
  width: 100vw;
  max-width: none !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 132px 24px 118px;

  background: var(--faq-bg);
  overflow: hidden;
}


/* 内側 */

.ark-faq-hero-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}


/* 英字ラベル */

.ark-faq-hero-eyebrow {
  margin: 0 0 24px;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.18em;

  color: var(--faq-green-soft);
}


/* タイトル */

.ark-faq-hero-title {
  margin: 0;

  font-size: clamp(42px, 5vw, 68px);
  font-weight: 500;
  line-height: 1.35;

  letter-spacing: 0.03em;

  color: var(--faq-green);
}


/* リード */

.ark-faq-hero-lead {
  margin: 44px 0 0;

  font-size: 19px;
  font-weight: 500;
  line-height: 2;

  letter-spacing: 0.035em;

  color: var(--faq-green);
}


/* 説明 */

.ark-faq-hero-text {
  margin: 18px 0 0;

  font-size: 16px;
  font-weight: 400;
  line-height: 2;

  letter-spacing: 0.025em;

  color: #586159;
}


/* ========================================
   Tablet
======================================== */

@media (max-width: 1024px) {

  .ark-faq-hero {
    padding: 110px 32px 96px;
  }

}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

  .ark-faq-hero {
    padding: 82px 24px 76px;
  }

  .ark-faq-hero-eyebrow {
    margin-bottom: 18px;

    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .ark-faq-hero-title {
    font-size: 38px;
    line-height: 1.42;

    letter-spacing: 0.02em;
  }

  .ark-faq-hero-lead {
    margin-top: 34px;

    font-size: 16px;
    line-height: 1.9;
  }

  .ark-faq-hero-text {
    margin-top: 16px;

    font-size: 14px;
    line-height: 1.9;
  }

  .ark-faq-pc {
    display: none;
  }

}

/* ========================================
   FAQ
   Section 2：Category Navigation
======================================== */

.ark-faq-nav-section {
  --faq-green: #304b3b;
  --faq-green-soft: #687a6d;
  --faq-bg: #ffffff;
  --faq-line: rgba(48, 75, 59, 0.16);

  width: 100vw;
  max-width: none !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 72px 24px 82px;

  background: var(--faq-bg);
}


/* 内側 */

.ark-faq-nav-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}


/* CATEGORY */

.ark-faq-nav-label {
  margin: 0 0 24px;

  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.18em;

  color: var(--faq-green-soft);
}


/* ナビゲーション */

.ark-faq-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  border-top: 1px solid var(--faq-line);
}


/* 各項目 */

.ark-faq-nav-item {
  position: relative;

  display: flex;
  align-items: center;

  min-height: 76px;

  padding: 20px 48px 20px 0;

  border-bottom: 1px solid var(--faq-line);

  color: var(--faq-green);
  text-decoration: none;

  transition:
    opacity 0.2s ease,
    padding-left 0.2s ease;
}


/* 左右列 */

.ark-faq-nav-item:nth-child(odd) {
  padding-right: 56px;
}

.ark-faq-nav-item:nth-child(even) {
  padding-left: 40px;

  border-left: 1px solid var(--faq-line);
}


/* 番号 */

.ark-faq-nav-number {
  flex: 0 0 auto;

  width: 42px;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;

  color: var(--faq-green-soft);
}


/* テキスト */

.ark-faq-nav-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;

  letter-spacing: 0.025em;
}


/* 矢印 */

.ark-faq-nav-item::after {
  content: "↓";

  position: absolute;
  right: 18px;
  top: 50%;

  transform: translateY(-50%);

  font-size: 15px;

  color: var(--faq-green-soft);

  transition: transform 0.2s ease;
}


.ark-faq-nav-item:nth-child(even)::after {
  right: 18px;
}


/* hover */

@media (hover: hover) {

  .ark-faq-nav-item:hover {
    padding-left: 8px;
  }

  .ark-faq-nav-item:nth-child(even):hover {
    padding-left: 48px;
  }

  .ark-faq-nav-item:hover::after {
    transform: translateY(-35%);
  }

}


/* ========================================
   Tablet
======================================== */

@media (max-width: 1024px) {

  .ark-faq-nav-section {
    padding: 64px 32px 72px;
  }

}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

  .ark-faq-nav-section {
    padding: 54px 0 62px;
    overflow: hidden;
  }

  .ark-faq-nav-inner {
    width: 100%;
  }

  .ark-faq-nav-label {
    margin: 0 24px 20px;

    font-size: 11px;
  }


  /* 横スクロール */

  .ark-faq-nav {
    display: flex;

    gap: 10px;

    padding: 0 24px 8px;

    border-top: 0;

    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;

    scrollbar-width: none;
  }

  .ark-faq-nav::-webkit-scrollbar {
    display: none;
  }


  /* チップ */

  .ark-faq-nav-item {
    flex: 0 0 auto;

    min-height: 54px;

    padding: 13px 42px 13px 16px !important;

    border: 1px solid rgba(48, 75, 59, 0.18) !important;
    border-radius: 4px;

    background: #fff;

    scroll-snap-align: start;
  }

  .ark-faq-nav-number {
    width: auto;
    margin-right: 10px;

    font-size: 10px;
  }

  .ark-faq-nav-text {
    white-space: nowrap;

    font-size: 13px;
  }

  .ark-faq-nav-item::after {
    right: 14px;

    font-size: 12px;
  }

}

/* ========================================
   FAQ
   Section 3：FAQ Group
======================================== */

.ark-faq-group {
  --faq-green: #304b3b;
  --faq-green-soft: #687a6d;
  --faq-line: rgba(48, 75, 59, 0.16);
  --faq-answer-bg: rgba(255, 255, 255, 0.52);
  --faq-text: #535d56;

  position: relative;

  width: 100vw;
  max-width: none !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  padding: 110px 24px 120px;

  background: #f3f3ed;
}


.ark-faq-group-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}


/* ========================================
   Header
======================================== */

.ark-faq-group-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 48px;

  margin-bottom: 56px;
}


.ark-faq-group-heading {
  display: flex;
  align-items: flex-start;

  gap: 24px;
}


.ark-faq-group-number {
  margin-top: 4px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1;

  letter-spacing: 0.08em;

  color: var(--faq-green-soft);
}


.ark-faq-group-eyebrow {
  margin: 0 0 9px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.18em;

  color: var(--faq-green-soft);
}


.ark-faq-group-title {
  margin: 0;

  font-size: clamp(30px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.4;

  letter-spacing: 0.035em;

  color: var(--faq-green);
}


.ark-faq-group-description {
  margin: 0 0 3px;

  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;

  letter-spacing: 0.025em;

  color: var(--faq-text);
}


/* ========================================
   FAQ List
======================================== */

.ark-faq-list {
  border-top: 1px solid var(--faq-line);
}


.ark-faq-item {
  margin: 0;

  border-bottom: 1px solid var(--faq-line);
}


/* details標準アイコンを非表示 */

.ark-faq-question {
  list-style: none;
}

.ark-faq-question::-webkit-details-marker {
  display: none;
}


/* ========================================
   Question
======================================== */

.ark-faq-question {
  position: relative;

  display: flex;
  align-items: center;

  gap: 24px;

  min-height: 92px;

  padding: 26px 70px 26px 4px;

  cursor: pointer;

  color: var(--faq-green);

  transition: opacity 0.2s ease;
}


.ark-faq-q {
  flex: 0 0 auto;

  width: 28px;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 18px;
  font-weight: 400;

  color: var(--faq-green-soft);
}


.ark-faq-question-text {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;

  letter-spacing: 0.025em;
}


/* ========================================
   Plus icon
======================================== */

.ark-faq-toggle {
  position: absolute;

  right: 12px;
  top: 50%;

  width: 22px;
  height: 22px;

  transform: translateY(-50%);
}


.ark-faq-toggle::before,
.ark-faq-toggle::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 16px;
  height: 1px;

  background: var(--faq-green);

  transform: translate(-50%, -50%);

  transition: transform 0.25s ease;
}


.ark-faq-toggle::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


/* 開いている時は＋ → − */

.ark-faq-item[open] .ark-faq-toggle::after {
  transform:
    translate(-50%, -50%)
    rotate(0);
}


/* ========================================
   Answer
======================================== */

.ark-faq-answer {
  padding: 0 0 30px 52px;
}


.ark-faq-answer-inner {
  display: flex;
  align-items: flex-start;

  gap: 24px;

  padding: 30px 38px;

  background: var(--faq-answer-bg);
}


.ark-faq-a {
  flex: 0 0 auto;

  width: 28px;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 18px;
  line-height: 1.8;

  color: var(--faq-green);
}


.ark-faq-answer-text {
  max-width: 820px;

  font-size: 15px;
  line-height: 2;

  letter-spacing: 0.025em;

  color: var(--faq-text);
}


.ark-faq-answer-text p {
  margin: 0;
}


.ark-faq-answer-text p + p {
  margin-top: 18px;
}


.ark-faq-answer-text strong {
  font-weight: 600;

  color: var(--faq-green);
}


/* 箇条書き */

.ark-faq-answer-text ul {
  margin: 18px 0;
  padding-left: 1.3em;
}


.ark-faq-answer-text li {
  margin: 5px 0;
}


/* hover */

@media (hover: hover) {

  .ark-faq-question:hover {
    opacity: 0.68;
  }

}


/* ========================================
   Tablet
======================================== */

@media (max-width: 1024px) {

  .ark-faq-group {
    padding: 90px 32px 100px;
  }

  .ark-faq-group-header {
    gap: 36px;
  }

}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

  .ark-faq-group {
    padding: 76px 24px 86px;

    scroll-margin-top: 60px;
  }


  /* Header */

  .ark-faq-group-header {
    display: block;

    margin-bottom: 38px;
  }

  .ark-faq-group-heading {
    gap: 15px;
  }

  .ark-faq-group-number {
    margin-top: 4px;

    font-size: 11px;
  }

  .ark-faq-group-eyebrow {
    margin-bottom: 6px;

    font-size: 10px;
  }

  .ark-faq-group-title {
    font-size: 29px;
  }

  .ark-faq-group-description {
    margin-top: 24px;

    font-size: 13px;
    line-height: 1.8;
  }


  /* Question */

  .ark-faq-question {
    gap: 13px;

    min-height: 80px;

    padding:
      22px
      42px
      22px
      0;
  }

  .ark-faq-q {
    width: 22px;

    font-size: 16px;
  }

  .ark-faq-question-text {
    font-size: 15px;
    line-height: 1.65;
  }

  .ark-faq-toggle {
    right: 2px;

    width: 20px;
    height: 20px;
  }

  .ark-faq-toggle::before,
  .ark-faq-toggle::after {
    width: 14px;
  }


  /* Answer */

  .ark-faq-answer {
    padding:
      0
      0
      22px
      0;
  }

  .ark-faq-answer-inner {
    gap: 13px;

    padding: 24px 20px;
  }

  .ark-faq-a {
    width: 22px;

    font-size: 16px;
  }

  .ark-faq-answer-text {
    font-size: 14px;
    line-height: 1.9;
  }

  .ark-faq-answer-text p + p {
    margin-top: 15px;
  }

}

/* ========================================
   FAQ
   Section 4：Payment
======================================== */

.ark-faq-group--payment {
  --faq-bg: #ffffff;
  --faq-answer-bg: #f3f3ed;

  background: var(--faq-bg);
}

/* ========================================
   FAQ
   Section 5：Renewal
======================================== */

.ark-faq-group--renewal {
  --faq-bg: #f3f3ed;
  --faq-answer-bg: rgba(255, 255, 255, 0.48);

  background: var(--faq-bg);
}

/* ========================================
   FAQ
   Section 6：Delivery
======================================== */

.ark-faq-group--delivery {
  --faq-bg: #ffffff;
  --faq-answer-bg: #f3f3ed;

  background: var(--faq-bg);
}

/* ========================================
   FAQ
   Section 7：Supporters
======================================== */

.ark-faq-group--supporters {
  --faq-bg: #f3f3ed;
  --faq-answer-bg: rgba(255, 255, 255, 0.48);

  background: var(--faq-bg);
}

/* ========================================
   FAQ
   Section 8：Products
======================================== */

.ark-faq-group--products {
  --faq-bg: #ffffff;
  --faq-answer-bg: #f3f3ed;

  background: var(--faq-bg);
}

/* ========================================
   FAQ
   Section 9：Activity
======================================== */

.ark-faq-group--activity {
  --faq-bg: #f3f3ed;
  --faq-answer-bg: rgba(255, 255, 255, 0.48);

  background: var(--faq-bg);
}

/* ========================================
   FAQ
   Section 10：Participation / Contact
======================================== */

.ark-faq-footer-section {
  --faq-green: #304b3b;
  --faq-green-soft: #687a6d;
  --faq-text: #4f5851;
  --faq-line: rgba(48, 75, 59, 0.18);
  --faq-bg:  #f3f3ed;
  --faq-dark-bg: #304b3b;

  width: 100vw;
  max-width: none !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  background: var(--faq-bg);
}


/* ========================================
   Inner
======================================== */

.ark-faq-footer-inner {
  width: 100%;
}


/* ========================================
   Participation
======================================== */

.ark-faq-participation {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;

  padding: 108px 0 118px;
}


.ark-faq-footer-eyebrow {
  margin: 0 0 16px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.18em;

  color: var(--faq-green-soft);
}


.ark-faq-footer-title {
  margin: 0 0 50px;

  font-size: clamp(30px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.45;

  letter-spacing: 0.035em;

  color: var(--faq-green);
}


.ark-faq-footer-faq {
  border-top: 1px solid var(--faq-line);
}


/* ========================================
   Contact CTA
======================================== */

.ark-faq-contact {
  padding: 104px 24px 110px;

  text-align: center;

  background: var(--faq-dark-bg);
}


.ark-faq-contact-eyebrow {
  margin: 0 0 18px;

  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;

  letter-spacing: 0.2em;

  color: rgba(255, 255, 255, 0.62);
}


.ark-faq-contact-title {
  margin: 0;

  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.45;

  letter-spacing: 0.035em;

  color: #ffffff;
}


.ark-faq-contact-text {
  margin: 26px 0 0;

  font-size: 15px;
  line-height: 2;

  letter-spacing: 0.025em;

  color: rgba(255, 255, 255, 0.76);
}


/* ========================================
   Buttons
======================================== */

.ark-faq-contact-buttons {
  display: flex;
  justify-content: center;
  align-items: center;

  gap: 16px;

  margin-top: 42px;
}


.ark-faq-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  width: 260px;
  min-height: 58px;

  padding: 15px 22px;

  border: 1px solid rgba(255, 255, 255, 0.6);

  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;

  letter-spacing: 0.035em;

  text-decoration: none;

  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}


.ark-faq-button--primary {
  background: #ffffff;
  color: var(--faq-green);
}


.ark-faq-button--secondary {
  background: transparent;
  color: #ffffff;
}


.ark-faq-button-arrow {
  margin-left: 18px;

  font-size: 16px;

  transition: transform 0.2s ease;
}


@media (hover: hover) {

  .ark-faq-button--primary:hover {
    background: transparent;
    color: #ffffff;
  }

  .ark-faq-button--secondary:hover {
    background: #ffffff;
    color: var(--faq-green);
  }

  .ark-faq-button:hover .ark-faq-button-arrow {
    transform: translateX(4px);
  }

}


/* ========================================
   Tablet
======================================== */

@media (max-width: 1024px) {

  .ark-faq-participation {
    width: min(100% - 64px, 1120px);

    padding: 90px 0 100px;
  }

  .ark-faq-contact {
    padding: 90px 32px 96px;
  }

}


/* ========================================
   Mobile
======================================== */

@media (max-width: 767px) {

  .ark-faq-participation {
    width: calc(100% - 48px);

    padding: 76px 0 86px;
  }

  .ark-faq-footer-eyebrow {
    margin-bottom: 10px;

    font-size: 10px;
  }

  .ark-faq-footer-title {
    margin-bottom: 36px;

    font-size: 29px;
  }


  /* Contact */

  .ark-faq-contact {
    padding: 76px 24px 82px;
  }

  .ark-faq-contact-eyebrow {
    margin-bottom: 14px;

    font-size: 10px;
  }

  .ark-faq-contact-title {
    font-size: 30px;
  }

  .ark-faq-contact-text {
    margin-top: 20px;

    font-size: 14px;
    line-height: 1.9;
  }


  /* Buttons */

  .ark-faq-contact-buttons {
    display: grid;

    gap: 12px;

    margin-top: 34px;
  }

  .ark-faq-button {
    width: 100%;
    max-width: 360px;

    margin: 0 auto;

    min-height: 56px;
  }

}

/* ========================================
   FAQ Group Background Variations
======================================== */

.ark-faq-group--white {
  background: #ffffff;
}