/* 非会員向け「安心・安全のお約束」トップ（/guide/safe）。
 * コンポーネント見た目は各 guest/*.css。ここではページ構成とレスポンシブだけ持つ。
 * ブレークポイントは Figma に合わせ 1080px。 */
.safe-guest,
.safe-guest * {
  box-sizing: border-box;
}

body.safe-guest-page {
  margin: 0;
  padding: 0;
  color: var(--guest-color-text-default);
  background: var(--guest-color-background-default);
  font-family: var(--guest-font-family);
}

/* change_to_lite.css が 960px 以上で body を 820px に縛る。このページは全幅。 */
@media (min-width: 960px) {
  body.safe-guest-page {
    max-width: none;
  }
}

body.safe-guest-page .guest-nonmember-header__spacer {
  display: none;
}

body.safe-guest-page main {
  padding-top: 0;
}

.safe-guest {
  container-name: safe-page;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--guest-color-text-default);
  background: var(--guest-color-background-white);
  font-family: var(--guest-font-family);
}

.safe-guest__lead,
.safe-guest__section {
  /* guest/common.css の section{max-width:1280px} を打ち消し、背景を横幅いっぱいにする */
  width: 100%;
  max-width: none;
}

.safe-guest__lead {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-4); /* 16px: 文言とリード画像の間隔 */
  align-self: stretch;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: var(--spacing-21) 0 0;
  background-color: var(--color-orange-100);
}

.safe-guest__lead-image {
  display: block;
  width: 250px;
  height: 125px;
  object-fit: contain;
}

.safe-guest__lead .guest-h1-hgroup {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  min-width: 0;
  align-items: center;
  text-align: center;
}

.safe-guest__lead .guest-h1-hgroup__title,
.safe-guest__lead .guest-h1-hgroup__desc {
  max-width: 100%;
  min-width: 0;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}

/* h1_hgroup 本体は 768px 切替。このページは Figma どおり 1080px で SP/PC を分ける。 */
.safe-guest__lead .guest-h1-hgroup__title {
  font-size: var(--guest-font-size-2xl);
}

.safe-guest__lead .guest-h1-hgroup__desc {
  font-size: var(--guest-font-size-xs);
}

.safe-guest__lead .guest-h1-hgroup__desc--sp {
  display: block;
}

.safe-guest__lead .guest-h1-hgroup__desc--pc {
  display: none;
}

.safe-guest__section {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--spacing-12) var(--spacing-4) var(--spacing-20);
}

.safe-guest__section--policy,
.safe-guest__section--knowledge {
  background: var(--guest-color-background-default);
}

/* 固定ヘッダー分ずらして #knowledge へ着地させる */
#knowledge {
  scroll-margin-top: 80px;
}

/* #knowledge ハッシュ遷移時、先頭チラつき防止（着地まで非表示） */
html.js-hash-scroll-pending,
html.js-hash-scroll-pending body {
  visibility: hidden;
}

.safe-guest__section--rules {
  background: var(--guest-color-background-pale-orange);
}

.safe-guest__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  align-items: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.safe-guest__policy-list,
.safe-guest__knowledge-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-4);
  width: 100%;
}

.safe-guest .guest-accordion-policy,
.safe-guest .guest-knowledge-card {
  max-width: 600px;
}

.safe-guest__rules-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.safe-guest__rule-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-6);
  width: 100%;
}

.safe-guest__rule-list .guest-rule-card.is-inactive {
  display: none;
}

.safe-guest .guest-rule-card-tab {
  width: 100%;
  max-width: 373px;
  margin-bottom: var(--spacing-4);
}

@media (min-width: 600px) and (max-width: 1079px) {
  .safe-guest__lead .guest-h1-hgroup__desc--sp {
    display: none;
  }

  .safe-guest__lead .guest-h1-hgroup__desc--pc {
    display: block;
  }
}

@media (min-width: 1080px) {
  #knowledge {
    scroll-margin-top: 120px;
  }

  .safe-guest__lead {
    padding: var(--spacing-35) var(--spacing-16) 0;
  }

  .safe-guest__lead-image {
    width: 350px;
    height: 175px;
  }

  .safe-guest__lead .guest-h1-hgroup__title {
    font-size: var(--guest-font-size-3xl);
  }

  .safe-guest__lead .guest-h1-hgroup__desc {
    font-size: var(--guest-font-size-sm);
  }

  .safe-guest__lead .guest-h1-hgroup__desc--sp {
    display: none;
  }

  .safe-guest__lead .guest-h1-hgroup__desc--pc {
    display: block;
  }

  .safe-guest__section {
    padding: var(--spacing-25) var(--spacing-16) var(--spacing-30);
  }

  .safe-guest__inner {
    max-width: 680px;
  }

  .safe-guest .guest-accordion-policy,
  .safe-guest .guest-knowledge-card {
    max-width: 680px;
  }

  .safe-guest .guest-rule-card-tab {
    display: none;
  }

  .safe-guest__rule-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-8);
    align-items: start;
  }

  .safe-guest__section--rules .guest-rule-card {
    max-width: none;
  }

  .safe-guest__section--rules .guest-rule-card.is-inactive {
    display: flex;
  }
}