@charset "UTF-8";

/* ============================================================
   base / variables
   ============================================================ */
:root {
  --main-color: #0077c8;
  --main-color-light: #e6f1fa;
  --main-color-lighter: #66adde;
  --accent-color: #ffe127;
  --base-color: #fff;

  --link-opacity: 0.7;
  --transition-base: 0.16s 0s ease-in;
}

/*
 * フルード・スケーリング
 * SP最小375px(--fs=16px) 〜 PC最大900px(--fs=38.4px)の間で
 * ビューポート幅に応じてなめらかに拡大する。
 * 以降のサイズは全て calc(N * var(--fs)) で指定し、
 * 子要素のfont-size変更による意図しない掛け算(em複利)を避けている。
 * letter-spacingのみ、その要素自身のfont-sizeに比例させたいのでem指定のまま。
 */
.l-container {
  width: 100%;
  min-width: 375px;
  max-width: 900px;
  margin: auto;
  overflow: hidden;
  --fs: clamp(16px, 4.267vw, 38.4px);
  font-size: var(--fs);
  font-family: "Noto Sans JP", sans-serif;
}

/*
 * 埋め込み先ページのグローバルCSS(li への margin/padding 付与など)の
 * 影響を受けないよう、使用するリスト要素を明示的にリセットする。
 * ul/ol自体のpaddingは各コンポーネント側で指定するのでここでは触らない。
 */
.p-teiki ul,
.p-teiki ol {
  list-style: none !important;
}
.p-teiki li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ============================================================
   p-teiki 定期便訴求バナー
   ============================================================ */
.p-teiki__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(0.5 * var(--fs));
  margin-top: calc(0.5 * var(--fs));
  height: calc(3.75 * var(--fs));
  border-radius: 999px;
  background-color: var(--accent-color);
  color: var(--main-color) !important;
  font-weight: 900;
  font-size: calc(1.25 * var(--fs));
  position: relative;
  transition: opacity var(--transition-base);
  text-decoration: none !important;
}
.p-teiki__cta::after {
  content: "";
  width: calc(0.5625 * var(--fs));
  height: calc(0.5625 * var(--fs));
  border-top: calc(0.125 * var(--fs)) solid var(--main-color);
  border-right: calc(0.125 * var(--fs)) solid var(--main-color);
  transform: rotate(45deg);
}
.p-teiki__cta:hover,
.p-teiki__cta:focus {
  opacity: var(--link-opacity);
}

.p-teiki__note {
  display: flex;
  align-items: center;
  justify-content: center;
  /* gap: calc(0.0625 * var(--fs)); */
  font-weight: 700;
  /* font-size: calc(1.25 * var(--fs)); */
  color: var(--base-color);
}
.p-teiki__note-line {
  display: inline-block;
  width: calc(1.1875 * var(--fs));
  height: calc(0.125 * var(--fs));
  border-radius: 1px;
  background-color: currentColor;
  flex-shrink: 0;
}
.p-teiki__note-line.-before {
  transform: rotate(45deg);
}
.p-teiki__note-line.-after {
  transform: rotate(-45deg);
}

/* ---------- ① Hero ---------- */
.p-teiki__hero {
  position: relative;
  padding: calc(3 * var(--fs)) calc(1.25 * var(--fs)) calc(2.5 * var(--fs));
  overflow: hidden;
  text-align: center;
  color: var(--base-color);
  background-image: linear-gradient(144deg, #0077c8 17.4%, #66adde 50.7%, #0077c8 118.8%);
}
.p-teiki__hero-hex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.p-teiki__hero-inner {
  position: relative;
  z-index: 1;
}

.p-teiki__lead {
  font-weight: 700;
  font-size: calc(1.125 * var(--fs));
  letter-spacing: 0.04em;
  font-feature-settings: "palt" 1;
}
.p-teiki__cycle {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: calc(0.25 * var(--fs));
  line-height: 1.1;
  font-weight: 900;
}
.p-teiki__cycle-prefix {
  font-size: calc(2.25 * var(--fs));
  color: var(--accent-color);
}
.p-teiki__cycle-num {
  font-size: calc(6.25 * var(--fs));
  letter-spacing: -0.04em;
  color: var(--accent-color);
}
.p-teiki__cycle-unit {
  font-size: calc(3 * var(--fs));
  color: var(--accent-color);
}
.p-teiki__cycle-suffix {
  font-size: calc(2 * var(--fs));
  color: var(--base-color);
}
.p-teiki__headline {
  margin-top: calc(0.25 * var(--fs));
  font-weight: 900;
  font-size: calc(2 * var(--fs));
}

.p-teiki__badges {
  display: flex;
  justify-content: space-between;
  margin-top: calc(1.75 * var(--fs));
}
.p-teiki__badge {
  flex-shrink: 0;
  width: calc(6.5 * var(--fs));
  height: calc(6.5 * var(--fs));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background-color: var(--main-color);
  border: calc(0.125 * var(--fs)) solid var(--main-color-light);
  font-weight: 900;
  line-height: 1.15;
}
.p-teiki__badge-tag {
  font-size: var(--fs);
  font-weight: 700;
}
.p-teiki__badge-num {
  font-size: calc(2.25 * var(--fs));
}
.p-teiki__badge-num small {
  font-size: calc(1.25 * var(--fs));
  font-weight: 700;
  color: var(--base-color);
}
.p-teiki__badge-label {
  font-size: var(--fs);
  letter-spacing: 0.08em;
}
.p-teiki__badge-ok {
  font-size: calc(1.25 * var(--fs));
  letter-spacing: 0.08em;
}

.p-teiki__hero .p-teiki__note {
  margin-top: calc(1.75 * var(--fs));
}

/* ---------- ② 選ばれる理由 ---------- */
.p-teiki__reason {
  padding: calc(2.5 * var(--fs)) calc(1.25 * var(--fs));
  text-align: center;
  background-color: var(--base-color);
}
.p-teiki__reason-title {
  font-size: calc(1.5 * var(--fs));
  font-weight: 900;
  line-height: 1.2;
  color: var(--main-color);
}
.p-teiki__reason-list {
  margin-top: calc(2.5 * var(--fs));
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: calc(0.25 * var(--fs));
}
.p-teiki__reason-item {
  display: flex;
  align-items: center;
  gap: calc(1.25 * var(--fs));
  height: calc(4 * var(--fs));
}
.p-teiki__reason-num {
  flex-shrink: 0;
  width: calc(3.5625 * var(--fs));
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Inter", sans-serif;
  color: var(--main-color);
  line-height: 1;
}
.p-teiki__reason-num small {
  margin-bottom: 2px;
  font-size: calc(0.75 * var(--fs));
  font-weight: 500;
  color: var(--main-color-lighter);
}
.p-teiki__reason-num strong {
  font-size: calc(3 * var(--fs));
  font-weight: 600;
}
.p-teiki__reason-text {
  font-size: calc(1.375 * var(--fs));
  font-weight: 700;
  line-height: 1.2;
  color: var(--main-color);
  font-feature-settings: "palt" 1;
}

/* ---------- ③ お届けまでの流れ ---------- */
.p-teiki__flow {
  padding: calc(2.5 * var(--fs)) calc(1.25 * var(--fs));
  text-align: center;
  background-color: rgb(230 241 250 / 0.5);
}
.p-teiki__flow-title {
  font-size: calc(1.5 * var(--fs));
  font-weight: 900;
  line-height: 1.2;
  color: var(--main-color);
}
.p-teiki__flow-list {
  position: relative;
  margin-top: calc(2.5 * var(--fs));
  padding-left: calc(0.5 * var(--fs)) !important;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--fs));
}
.p-teiki__flow-list::before {
  content: "";
  position: absolute;
  top: calc(1.25 * var(--fs));
  bottom: calc(1.25 * var(--fs));
  /* padding-left(0.5) + flow-num幅(2.5)の半分 - 線幅(0.125)の半分 = 円の中心 */
  left: calc(1.6875 * var(--fs));
  width: calc(0.125 * var(--fs));
  background-color: var(--main-color-lighter);
  opacity: 0.5;
}
.p-teiki__flow-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(0.875 * var(--fs));
}
.p-teiki__flow-num {
  position: relative;
  flex-shrink: 0;
  width: calc(2.5 * var(--fs));
  height: calc(2.5 * var(--fs));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  color: var(--accent-color);
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: calc(1.5 * var(--fs));
}
.p-teiki__flow-text {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: calc(1.125 * var(--fs));
  line-height: 1.3;
  color: var(--main-color);
}

.p-teiki__flow .p-teiki__note {
  margin-top: calc(3.5 * var(--fs));
  color: var(--main-color);
}