@charset "UTF-8";

/* フォーム（.p-form）と同様、セクション開始は main の padding-top で取る
 * PC（768+）: 1920 基準 min(設計px, vw)／SP: artboard 750 vw（従来どおり） */

.p-policy {
  --policy-pc-w: var(--pc-artboard-w);
}

/* 左右 padding は .p-policy 側で取るため、container gutter は外す */
.p-policy .l-container {
  width: 100%;
}

.p-policy .c-section__heading {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: lowercase;
}

.p-policy__content {
  margin-left: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  line-height: 1.667;
  letter-spacing: 0.015em;
}

/* footer 先頭に出力。main の padding-bottom が本文〜パンくず間の余白になる */
.p-policy__breadcrumb {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  background-color: var(--color-bg);
  color: #000;
  font-weight: 300;
  letter-spacing: 0.015em;
  line-height: 1;
  text-align: left;
}

.p-policy__breadcrumb-link {
  color: #727171;
  font-family: var(--font-inter);
  font-weight: 300;
  text-decoration: none;
}

.p-policy__breadcrumb-sep {
  color: #000;
  font-family: var(--font-inter);
  font-weight: 300;
}

.p-policy__breadcrumb-current {
  color: #000;
  font-family: var(--font-inter);
  font-weight: 300;
}

.p-policy__content h2 {
  font-family: var(--font-sans-demi);
  font-weight: normal;
  line-height: 1.667;
  letter-spacing: 0.015em;
}

.p-policy__content h2 + p {
  margin-top: 0;
}

.p-policy__content h3 {
  margin: 0;
  font-family: var(--font-sans-demi);
  font-weight: normal;
  line-height: 1.667;
  letter-spacing: 0.015em;
}

.p-policy__content h3 + p,
.p-policy__content h3 + ul,
.p-policy__content > p + ul {
  margin-top: 0;
}

.p-policy--site .p-policy__content > p + p {
  margin-top: 0;
}

.p-policy__content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-policy__content li {
  position: relative;
  padding-left: 1em;
}

.p-policy__content li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.p-policy__content p {
  margin: 0;
}

.p-policy__content a {
  position: relative;
  display: inline-block;
  line-height: 1.4;
  text-decoration: none;
  vertical-align: baseline;
}

.p-policy__content a::before,
.p-policy__content a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}

.p-policy__content a::before {
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.4s ease;
}

.p-policy__content a::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.p-policy__content a:hover::before {
  transform: scaleX(0);
}

.p-policy__content a:hover::after {
  transform: scaleX(1);
}

@media (min-width: 768px) {
  .p-policy {
    padding: min(256px, calc(256 / var(--policy-pc-w) * 100vw))
      min(130px, calc(130 / var(--policy-pc-w) * 100vw))
      min(190px, calc(190 / var(--policy-pc-w) * 100vw));
  }

  /* .c-section の clamp padding を打ち消し（見出し中心の余白にしない） */
  .p-policy .p-page-heading {
    padding: 0 0 min(80px, calc(80 / var(--policy-pc-w) * 100vw));
  }

  .p-policy .c-section__heading {
    font-size: min(55px, calc(55 / var(--policy-pc-w) * 100vw));
  }

  .p-policy__content {
    max-width: min(1200px, calc(1200 / var(--policy-pc-w) * 100vw));
    font-size: min(18px, calc(18 / var(--policy-pc-w) * 100vw));
  }

  .p-policy__breadcrumb {
    /* footer 先頭に出るため .p-policy 配下の CSS 変数は使えない → --pc-artboard-w を直接参照 */
    padding: 0 min(50px, calc(50 / var(--pc-artboard-w) * 100vw))
      min(50px, calc(50 / var(--pc-artboard-w) * 100vw));
    font-size: min(15px, calc(15 / var(--pc-artboard-w) * 100vw));
  }

  .p-policy__content > * + * {
    margin-top: min(28px, calc(28 / var(--policy-pc-w) * 100vw));
  }

  .p-policy__content h2 {
    margin: 0 0 min(16px, calc(16 / var(--policy-pc-w) * 100vw));
    font-size: min(18px, calc(18 / var(--policy-pc-w) * 100vw));
  }

  .p-policy__content > h2 {
    margin-top: min(72px, calc(72 / var(--policy-pc-w) * 100vw));
  }

  .p-policy__content h3 {
    font-size: min(18px, calc(18 / var(--policy-pc-w) * 100vw));
  }

  .p-policy__content > p + h3,
  .p-policy__content > ul + h3 {
    margin-top: min(30px, calc(30 / var(--policy-pc-w) * 100vw));
  }

  /* 連続段落の間隔: プライバシーは 30px、サイトポリシーは指定なし */
  .p-policy--privacy .p-policy__content > p + p {
    margin-top: min(30px, calc(30 / var(--policy-pc-w) * 100vw));
  }

  /* p+p（--privacy/--site）より詳細度を上げて、末尾署名の 72px を勝たせる */
  .p-policy .p-policy__content > p:last-child {
    margin-top: min(72px, calc(72 / var(--policy-pc-w) * 100vw));
  }
}

@media (max-width: 767px) {
  .p-policy {
    padding: calc(250 / var(--sp-artboard-w) * 100vw)
      calc(50 / var(--sp-artboard-w) * 100vw)
      calc(195 / var(--sp-artboard-w) * 100vw);
  }

  .p-policy .p-page-heading {
    padding: 0 0 calc(90 / var(--sp-artboard-w) * 100vw);
  }

  .p-policy .c-section__heading {
    font-size: calc(63 / var(--sp-artboard-w) * 100vw);
  }

  .p-policy__content {
    max-width: none;
    font-family: var(--font-sans);
    font-size: calc(26 / var(--sp-artboard-w) * 100vw);
    letter-spacing: 0.015em; /* AV15 */
  }

  .p-policy__content > * + * {
    margin-top: calc(28 / var(--sp-artboard-w) * 100vw);
  }

  .p-policy__content h2 {
    margin: 0 0 calc(16 / var(--sp-artboard-w) * 100vw);
    font-family: var(--font-sans-demi);
    font-size: calc(26 / var(--sp-artboard-w) * 100vw);
    letter-spacing: 0.015em; /* AV15 */
  }

  .p-policy__content > h2 {
    margin-top: calc(80 / var(--sp-artboard-w) * 100vw);
  }

  .p-policy__content h3 {
    font-family: var(--font-sans-demi);
    font-size: calc(26 / var(--sp-artboard-w) * 100vw);
    letter-spacing: 0.015em; /* AV15 */
  }

  .p-policy__content > p + h3,
  .p-policy__content > ul + h3 {
    margin-top: calc(30 / var(--sp-artboard-w) * 100vw);
  }

  .p-policy--privacy .p-policy__content > p + p {
    margin-top: calc(30 / var(--sp-artboard-w) * 100vw);
  }

  .p-policy__breadcrumb {
    padding: 0 calc(50 / var(--sp-artboard-w) * 100vw)
      calc(50 / var(--sp-artboard-w) * 100vw);
    font-size: calc(25 / var(--sp-artboard-w) * 100vw);
  }

  .p-policy .p-policy__content > p:last-child {
    margin-top: calc(80 / var(--sp-artboard-w) * 100vw);
  }
}