@charset "UTF-8";
/* =====================================================
   商品 LP 共通（水素入浴剤 / 水素サプリ）＋ よくあるご質問 / お問い合わせページ
   Figma: 水素入浴剤 (227:3154) / 水素サプリ (227:3646) / よくある質問 (227:5052) / お問い合わせ (227:4883) / 1280 幅基準
   同じ作りの部品だけを置き、ページ固有は bath.css / supplement.css / faq.css / contact.css。
   組み方はフレスカページ（fresca.css）に揃えている
   ===================================================== */

/* デザインの見出しは FOT-DNP 秀英角ゴ銀 L（細ゴシック）。
   フレスカページと同じく Noto Sans JP 300 で置き換える。
   ※ margin はここで指定しないこと（各見出しクラスの margin を打ち消してしまう）。 */
.lp h2,
.lp h3 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 300;
}

/* ----- コンテンツ幅 -----
   デザインは 1120〜1200px を使うため、フレスカページと同じく
   ページ内だけ 1200px まで広げる（1280px 時に 93.75% = 1200px）。 */
.lp .l-container {
  width: 93.75%;
  max-width: 1200px;
}

/* ----- ※ 注記 ----- */
.lp-note {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 1px;
}
.lp-note__mark { flex-shrink: 0; }

/* ----- 購入ボタン（ヒーローと締め） -----
   白 60% の 280 × 60 の帯。外部リンクアイコンは右端から 12px。 */
.lp-cta__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  max-width: 100%;
  min-height: 60px;
  background: rgba(255, 255, 255, 0.6);
  color: #3c3c3c;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2.7px;
  line-height: 1.5;
}
.lp-cta__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 11px;
  height: 11px;
  transform: translateY(-50%);
}
.lp-cta .lp-note {
  max-width: 365px;
  margin-top: 12px;
}

/* =====================================================
   ヒーロー
   ===================================================== */
/* デザインでは写真がヘッダーの下まで回り込んでいる（フレーム上端 y=0）。
   common.css の body { padding-top: 129px } を打ち消して最上部から敷く。
   コピーの書体（__eyebrow / __title）はページごとに違うので各ページの CSS で指定する。 */
.lp-hero {
  display: grid;
  min-height: 680px;
  margin-top: -129px;
  overflow: hidden;
}
.lp-hero > * { grid-area: 1 / 1; }
.lp-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 右へいくほど濃くなる褐色のベール。デザインは x=151 から右端まで。 */
.lp-hero__veil {
  margin-left: 11.8%;
  background: linear-gradient(270deg, #5d4d3d 0%, rgba(93, 77, 61, 0) 100%);
}
/* コピー群は x=691 始まり（1280 幅の 54%）の左揃えカラム。 */
.lp-hero__copy {
  position: relative;
  justify-self: start;
  align-self: start;
  margin: 210px 0 60px 54%;
  color: #fff;
}
.lp-hero__badges {
  display: flex;
  gap: 20px;
  margin-top: 32px;
}
/* 白 20% 塗り＋白 1px 枠の円（フレスカページの .fresca-badge と同じ見た目）。 */
.lp-badge {
  width: 100px;
  height: 100px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lp-badge__sm {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 1.5;
}
/* 6 文字以上ある見出し（「溶存水素濃度」など）は 100px の円に収まるよう詰める。 */
.lp-badge__sm.is-tight {
  font-size: 13px;
  letter-spacing: 1.17px;
}
.lp-badge__sm.is-stack { line-height: 1.3; }
.lp-badge__num {
  font-family: 'Forum', serif;
  font-size: 30px;
  line-height: 1.1;
}
.lp-badge__unit { font-size: 20px; }
.lp-hero .lp-cta { margin: 59px 0 0 5px; }

@media (max-width: 1023px) {
  .lp-hero__copy { margin-left: 8%; }
}
@media (max-width: 767px) {
  .lp-hero__copy { margin: 170px 16px 40px; }
}

/* =====================================================
   2 カラム（左に見出し、右にカード列）
   入浴剤の「お客さまの声」と、両ページの「よくある質問」で使う
   ===================================================== */
/* 見出し幅 326px ＋ 余白 63px でカードが 733px。
   デザインは x=80〜1200（1120px 幅）なので、コンテナから左右 40px 内側に寄せる。
   （フレスカページの「5 つの理由」と同じ寸法） */
.lp-split {
  display: flex;
  gap: 63px;
  padding: 180px 40px 0;
  color: #fff;
}
.lp-split__side,
.lp-split > .lp-split__title {
  flex-shrink: 0;
  width: 326px;
}
.lp-split__title {
  font-size: 36px;
  letter-spacing: 5.4px;
  line-height: 1.8;
}
.lp-split__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 27px;
  min-width: 0;
}
@media (max-width: 1023px) {
  .lp-split {
    flex-direction: column;
    gap: 40px;
    padding-left: 0;
    padding-right: 0;
  }
}

/* =====================================================
   よくある質問
   ===================================================== */
.lp-faq { padding-bottom: 180px; }
/* 見出しはカード列より 9px 上から始まる。 */
.lp-faq .lp-split__list { margin-top: 9px; }
.lp-faq__item {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid #fff;
}
/* 質問の右端に＋アイコン（右から 30px、縦中央）。 */
.lp-faq__q {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 23px 29px 25px 39px;
  cursor: pointer;
  list-style: none;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 1.6;
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q > span { flex: 1; }
.lp-faq__toggle {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.lp-faq__a {
  margin-top: -5px;
  padding: 0 40px 33px;
  font-family: 'Noto Sans', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 2.1px;
  line-height: 1.6;
}
/* 回答の下の ※ 注記は 9px 空ける。 */
.lp-faq__a .lp-note {
  margin-top: 9px;
  font-family: 'Noto Sans JP', sans-serif;
}

/* =====================================================
   締め（写真の上にコピーと購入ボタン）
   ===================================================== */
/* 高さは min-height なので文言が増えても潰れない。
   写真のトリミング位置とコピーの位置はページごとに指定する。 */
.lp-closing {
  display: grid;
  min-height: 600px;
  overflow: hidden;
  color: #fff;
}
.lp-closing > * { grid-area: 1 / 1; }
.lp-closing__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp-closing__copy {
  position: relative;
  padding-bottom: 60px;
}
.lp-closing__message {

  display: flex;
  flex-direction: column;
  gap: 15px;
  font-weight: 300;
  font-size: 20px;
  letter-spacing: 3px;
  line-height: 1.8;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.lp-closing__name {
  margin-top: 20px;
  font-weight: 300;
  font-size: 32px;
  letter-spacing: 4.8px;
  line-height: 1.6;
  font-family: "Zen Kaku Gothic New", sans-serif;
}
.lp-closing .lp-cta { margin-top: 42px; }

/* =====================================================
   ヘッダーの見え方（lp.css を読み込むページ）
   ===================================================== */
/* ヒーロー / 見出しの写真の上にヘッダーが重なるため、フレスカページと同じく地色を透明にする。
   スクロール後は共通の .is-scrolled（すりガラス）に切り替わる。 */
.page-products-bath .site-header,
.page-products-supplement .site-header,
.page-faq .site-header,
.page-contact .site-header,
.page-movie .site-header { background-color: transparent; }