@charset "UTF-8";
/* ==============================================================
   Cellpass サイト共通スタイルシート
   index.html／contact.html／privacy.html の3ページで共有する
   単一のCSSファイル。

   ※ 重要：ファイル冒頭（リキッドレイアウト対応・CSSリセット）を除き、
   　 以降のルールの並び順はHTMLのページ構成順（上から下）とは
   　 一致していない（過去の編集・機能追加を重ねる中で並びが
   　 前後している）。目的のクラスを探す際は、スクロールで追うより
   　 クラス名でファイル内検索する方が確実。
   　 目安として各セクションの主なクラス名は次のとおり：
   　　ヘッダー／ドロワー：blk-header- / blk-nav-drawer-
   　　ヒーロー：blk-hero-
   　　tech／values／safety：blk-tech- / blk-values- / blk-safety-
   　　products／evidence／greeting／contact：blk-products- 等
   　　flow／faq：blk-flow- / blk-faq-
   　　footer／下部固定CTA：blk-footer- / blk-sticky-cta-
   　　お問い合わせフォーム（contact.html用）：blk-form-
   　　プライバシーポリシー（privacy.html用）：blk-policy-

   クラス命名規則：
   　sec-  : ページを構成する大セクション（<section>相当）
   　blk-  : セクション内のUIブロック
   　ui-   : 複数箇所で再利用する汎用パーツ（ボタン・見出し等）
   　util- : 単機能のユーティリティ（表示切替・余白調整等）
   　hook- : JavaScript側から参照するためだけのクラス／id
   　state-: JavaScriptによって付け外しされる状態クラス
   　ブロックの要素は「blk-block-elementName」（camelCase）、
   　修飾子は「blk-block-ModifierName」（先頭大文字＝Pascal）で表す。
   ============================================================== */

/* リキッドレイアウト対応（下記html要素のfont-size可変設定と対）
   bodyの基本文字色・フォントファミリー */
body {
  color: #6b6d6e;
  font-family: "Noto Sans JP", sans-serif;
}

/* PC幅（768px以上）でのみ表示する要素に付与するユーティリティクラス */
.util-desktop {
  display: block;
}
@media screen and (max-width: 767px) {
  .util-desktop {
    display: none;
  }
}

/* スマホ幅（767px以下）でのみ表示する要素に付与するユーティリティクラス
   （.util-desktop とは逆の挙動。<br>タグの出し分け等によく使う） */
.util-mobile {
  display: none;
}
@media screen and (max-width: 767px) {
  .util-mobile {
    display: block;
  }
}

/* リキッドレイアウト（可変フォントサイズ）対応
   html要素のfont-sizeをブレークポイントごとに変え、rem指定された
   全ての値をビューポート幅に応じて滑らかに拡大縮小させる仕組み。
   ・768〜1408px：1408px基準のvw値で線形にスケーリング
   　（1.1363636364vw ×1408px÷100 ＝ 16px となるよう逆算した値）
   ・767px以下（スマホ）：一旦16px固定に戻し、
   ・375px以下（小型スマホ）：さらに375px基準のvw値でスケーリング
   　（4.2666666667vw ×375px÷100 ＝ 16px となるよう逆算した値） */
html {
  font-size: 16px;
}
@media (max-width: 1408px) {
  html {
    font-size: 1.1363636364vw;
  }
}
@media screen and (max-width: 767px) {
  html {
    font-size: 16px;
  }
}
@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}

/* pcの電話番号発信対応 */
@media screen and (max-width: 767px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}

/* ホバー */
a {
  -webkit-text-decoration: none;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s;
}
@media screen and (max-width: 767px) {
  a:hover {
    opacity: 0.8;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Set core root defaults */
html {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  line-height: 1.5;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
  list-style: none;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img {
  display: block;
  max-width: 100%;
  width: 100%;
}

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}

/* フォームリセット */
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  font: inherit;
  outline: none;
}

textarea {
  resize: vertical;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

input[type=submit],
input[type=button],
label,
button,
select {
  cursor: pointer;
}

select::-ms-expand {
  display: none;
}

/* ここから各セクションの土台となる .sec- 系クラスの基本レイアウト定義
   （ページ内の並び順とは無関係にまとまっている） */

/* ページ下部固定CTA（index.htmlのみ設置）。
   「お問い合わせ」「製品資料ダウンロード」を常に画面から離さないという
   クライアント要望により、PC・スマホともにposition:fixedで画面下部に
   常時表示する（スクロール量に関わらず、読み込み直後から表示）。
   画面幅いっぱいに伸びるバーではなく、左右に均等な余白を持たせた
   コンパクトなカードを画面下中央に浮かせて配置する。
   外枠（.sec-sticky-cta）はpointer-events:noneにし、実際に見える
   カード（.blk-sticky-cta-inner側）だけをクリック可能にすることで、
   カードの左右の透明な余白部分が下の要素のクリックを妨げないようにしている。 */
.sec-sticky-cta {
  bottom: 20px;
  bottom: 1.25rem;
  display: flex;
  justify-content: center;
  left: 0;
  padding: 0 16px;
  padding: 0 1rem;
  pointer-events: none;
  position: fixed;
  right: 0;
  z-index: 900;
}
@media screen and (max-width: 767px) {
  .sec-sticky-cta {
    bottom: 12px;
    bottom: 0.75rem;
  }
}

.blk-sticky-cta {
  width: 100%;
}

.sec-contact .blk-contact {
  padding-bottom: 106px;
  padding-bottom: 6.625rem;
}
@media screen and (max-width: 767px) {
  .sec-contact .blk-contact {
    padding-bottom: 2.125rem;
  }
}

.sec-footer {
  margin-top: 108px;
  margin-top: 6.75rem;
}
@media screen and (max-width: 767px) {
  .sec-footer {
    margin-top: 2.375rem;
  }
}

/* ヘッダーは常に画面上部に固定表示 */
.sec-header {
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
}

/* 全セクション共通の中央寄せコンテナ。左右パディングで最大幅を制御する。
   PC：最大1628px＋左右110pxパディング／スマホ：左右33pxパディング */
.sec-container {
  height: inherit;
  margin: 0 auto;
  max-width: 1628px;
  padding-left: 110px;
  padding-right: 110px;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .sec-container {
    max-width: 33.75rem;
    padding-left: 33px;
    padding-right: 33px;
  }
}

/* ヒーローセクションは画面の高さいっぱい（100vh、最低500px）を占める。
   100vhはモバイルブラウザのアドレスバー分の高さ変動を考慮しないため、
   実際に見えている画面より高く計算され、次のセクションとの境目が
   ズレて見える（スマホでのみ発生する「かかって見える」不具合の原因）。
   dvh（動的ビューポート高さ）に対応するブラウザでは100dvhを優先させ、
   非対応ブラウザ向けに100vhをフォールバックとして残している。 */
.sec-hero {
  height: 100vh;
  height: 100dvh;
  min-height: 500px;
  min-height: 31.25rem;
  width: 100%;
}

/* ここから ui- 系（複数箇所で使い回す汎用ボタン・見出し等）の定義 */
.ui-btn {
  align-items: center;
  background-color: #3cb9d2;
  border: 1px solid #3cb9d2;
  color: #fff;
  display: inline-flex;
  font-size: max(20px, 10px);
  font-size: max(1.25rem, 10px);
  font-weight: 500;
  justify-content: space-between;
  letter-spacing: 0.1em;
  line-height: 2.7;
  max-width: 528px;
  max-width: 33rem;
  padding: 24px 34px 24px 48px;
  padding: 1.5rem 2.125rem 1.5rem 3rem;
  transition: all 0.3s ease-in-out;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .ui-btn {
    font-size: max(0.75rem, 10px);
    padding: 0.8125rem 1.5rem;
  }
}

.ui-btn-ContactPink {
  background-color: #ff8c92;
  border-color: #ff8c92;
}

/* ボタン右側のアイコン（封筒／ダウンロード）。
   mask-image（同下のルールでicon_mail.svg／icon_download.svgを指定）に
   単色SVGを使い、background-colorで色を付けるテクニック。
   通常の<img>やbackground-imageと違い、mask-imageは「形だけ」を
   借りて任意の色で塗れるため、ボタンの配色（白／ピンク等）に応じて
   アイコン色をCSS側だけで自由に変更できる。 */
.ui-btn-ContactPink::after,
.ui-btn-Download::after {
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  background-color: #fff;
  content: "";
  display: inline-block;
  height: auto;
          mask-position: center;
          mask-repeat: no-repeat;
          mask-size: contain;
  transition: all 0.3s ease-in-out;
  width: 53px;
  width: 3.3125rem;
}
@media screen and (max-width: 767px) {
  
  .ui-btn-ContactPink::after,
  .ui-btn-Download::after {
    width: 2.125rem;
  }
}

.ui-btn-ContactPink::after {
  -webkit-mask-image: url(../images/icon_mail.svg);
  aspect-ratio: 31/21;
          mask-image: url(../images/icon_mail.svg);
}

.ui-btn-Download::after {
  -webkit-mask-image: url(../images/icon_download.svg);
  aspect-ratio: 53/35;
          mask-image: url(../images/icon_download.svg);
}

/* hover指定できるPCを想定したスタイル */
@media (hover: hover) {
  .ui-btn:hover {
    background-color: #fff;
    border-color: #3cb9d2;
    color: #3cb9d2;
  }
  .ui-btn-ContactPink:hover {
    border-color: #ff8c92;
    color: #ff8c92;
  }
  
  .ui-btn-Download:hover::after {
    background-color: #3cb9d2;
  }
  .ui-btn-ContactPink:hover::after {
    background-color: #ff8c92;
  }
}
/* hoverが使えないタッチ端末を想定した装飾 */
@media (hover: none) {
  .ui-btn:active {
    background-color: #fff;
    border-color: #3cb9d2;
    color: #3cb9d2;
  }
  
  .ui-btn-Download:active::after {
    background-color: #3cb9d2;
  }
}

/* ここから ui-menu-toggle（ハンバーガーメニューボタン）の定義 */
.ui-menu-toggle {
  display: inline-block;
  padding: 0 10px;
  padding: 0 0.625rem;
  position: relative;
}

.ui-menu-toggle span {
  background-color: #14227f;
  border-radius: 100vw;
  display: block;
  height: 2px;
  position: absolute;
  transition: all 0.3s ease-in-out;
  width: 26px;
  width: 1.625rem;
}

.ui-menu-toggle::before,
.ui-menu-toggle::after {
  background-color: #14227f;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  transition: all 0.3s ease-out;
  width: 26px;
  width: 1.625rem;
}

/* 3本線のうち上下の線（::before/::after）は中央の.span要素を挟んで
   上下に配置。開いた状態（script.jsがaria-expanded="true"にする）では
   opacity:0で非表示にし、中央の1本線だけが残る「×風」の簡易演出にしている
   （実際に斜めに回転させて×にするのではなく、単純化した表現） */
.ui-menu-toggle::before {
  content: "";
  transform: translateY(-0.5rem);
}

.ui-menu-toggle::after {
  transform: translateY(0.5rem);
}

.ui-menu-toggle[aria-expanded=true]::before {
  opacity: 0;
}

.ui-menu-toggle[aria-expanded=true]::after {
  opacity: 0;
}

/* 大見出し（h2相当）の基本スタイル（下線付き）。
   セクションによっては修飾子 .ui-heading-Small を併用し、
   （class="ui-heading ui-heading-Small"）フォントサイズを一段階
   小さくして使うこともある */
.ui-heading {
  border-bottom: 1px solid #c7cbcd;
  color: #7c7f80;
  font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
  font-size: max(32px, 10px);
  font-size: max(2rem, 10px);
  font-weight: 300;
  letter-spacing: 0.095em;
  line-height: 1.40625;
  padding-bottom: 10px;
  padding-bottom: 0.625rem;
}
@media screen and (max-width: 767px) {
  .ui-heading {
    font-size: max(1.25rem, 10px);
    text-align: center;
  }
}

.ui-heading-Small {
  color: #6b6d6e;
  font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
  font-size: max(28px, 10px);
  font-size: max(1.75rem, 10px);
  letter-spacing: 0.02em;
  line-height: 1.0357142857;
}
@media screen and (max-width: 767px) {
  .ui-heading-Small {
    font-size: max(1.25rem, 10px);
  }
}

/* 本文用の共通テキストスタイル。text-align:justify（両端揃え）で
   日本語の段落の右端を揃えている */
.ui-copy {
  font-size: max(17px, 10px);
  font-size: max(1.0625rem, 10px);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.6470588235;
  text-align: justify;
}
@media screen and (max-width: 767px) {
  .ui-copy {
    font-size: max(0.75rem, 10px);
  }
}

/* 下部固定CTAの中身。ボタン2つを画面幅いっぱいではなく、
   コンパクトな1枚のカード（最大480px）に収め、margin:0 autoで
   画面中央に配置することで、左右のバランスの取れた余白を作る。
   display:flexの後にdisplay:gridを書いて上書きしているのは、
   古いブラウザ向けのflexフォールバックを残しつつgridを優先させる
   意図と思われる（CSSは後勝ちのため、対応ブラウザではgridが有効） */
.blk-sticky-cta-inner {
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  display: flex;
  display: grid;
  gap: 24px;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 auto;
  max-width: 680px;
  padding: 12px;
  padding: 0.75rem;
  pointer-events: auto;
}
@media screen and (max-width: 767px) {
  .blk-sticky-cta-inner {
    border-radius: 0.875rem;
    gap: 0.75rem;
    max-width: 420px;
    padding: 0.5rem;
  }
}

/* container-type:inline-sizeを指定すると、子要素はcqw単位（コンテナ幅の1%）
   を使ってサイズ指定できるようになる。ボタンの実際の横幅を基準に
   フォントサイズが自動で伸縮するため、文言の長さが違う「お問い合わせ」
   「製品資料ダウンロード」でも、それぞれのボタン幅に収まりやすくなり、
   スマホ幅で折り返してレイアウトが崩れるのを防げる */
.blk-sticky-cta-button {
  container-type: inline-size;
}

.blk-sticky-cta-button a {
  border-radius: 12px;
  font-size: max(18px, 10px);
  font-size: max(1.125rem, 10px);
  padding: 20px 24px;
  padding: 1.25rem 1.5rem;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .blk-sticky-cta-button a {
    font-size: clamp(10px, 8cqw, 13px);
    letter-spacing: 0.02em;
    padding: 0.875rem 0.75rem;
  }
}

.blk-sticky-cta-button a::after {
  width: 28px;
  width: 1.75rem;
}
@media screen and (max-width: 767px) {
  .blk-sticky-cta-button a::after {
    width: 1rem;
  }
}

/* ここから「製品への5つのこだわり」セクション（values）の定義 */
.blk-values {
  padding: 0 0 120px;
  padding: 0 0 7.5rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .blk-values {
    padding: 0 0 2.5rem;
  }
}

/* 強み1（.ui-heading）と下線・文字寄せを揃えている。
   PCは左揃え、スマホは中央揃えに統一 */
.blk-values-heading {
  border-bottom: 1px solid #c7cbcd;
  color: #16323d;
  font-size: max(31px, 10px);
  font-size: max(1.9375rem, 10px);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.8064516129;
  padding-bottom: 10px;
  padding-bottom: 0.625rem;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .blk-values-heading {
    font-size: max(1.25rem, 10px);
    text-align: center;
  }
}

/* tech（工学・獣医学・医学） / values（5つのこだわり） / safety（安全性）
   3セクション共通のスタイル。
   ※ 元々はtechとsafetyのみが同一セクションだったが、後にtech/values/safety
   　 の3セクションへ分割した経緯があり、コメント名は当時のまま残っている
   　 箇所がある点に注意（対象セレクタ自体は現状の3セクションに対応済み）。
   overflow:hiddenは、内部のvideo要素がセクション外へはみ出さないための保険 */
.sec-tech,
.sec-safety,
.sec-values {
  overflow: hidden;
  position: relative;
}

/* 背景動画・背景画像を一時OFFにした代替の背景色。
   強み1〜5を1つのsectionにまとめたことで、valuesだけ濃紺背景が
   浮いて見えるとの指摘を受け、tech・safetyと同じ明るい背景色に統一した
   （それに伴い、values側の文字色も白から濃紺系に変更している）。
   動画を再度有効化する際は、この背景色を削除するかoverlayとして
   残すか検討すること。 */
.sec-values,
.sec-tech,
.sec-safety {
  background-color: #f4f9f9;
}

/* tech・safety共通のセクション内側パディング。
   強み1〜5（greeting／values／tech／safety内2ブロック）の間隔を統一するため、
   「上パディングは0、下パディングだけで次の強みとの間隔を作る」方式に
   揃えている（＝隣接する2つのブロックが互いに上下パディングを持つと、
   間隔が二重に加算されてブロックごとにバラバラになってしまうため）。
   safetyの下パディングだけは、次の「製品一覧」セクションとの間隔を
   兼ねるため、他と同じ値のまま維持している。 */
.blk-tech,
.blk-safety {
  padding: 0 0 120px;
  padding: 0 0 7.5rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .blk-tech,
  .blk-safety {
    padding: 0 0 40px;
    padding: 0 0 2.5rem;
  }
}

/* 各セクション専用の背景動画。position:absoluteで親要素いっぱいに広げ、
   object-fit:coverでアスペクト比を保ったまま全面をカバーする。
   z-index:-1で本文要素より奥に配置（親要素にposition:relativeが
   必要なため、.blk-tech-values-bg / .blk-safety側にrelativeを設定） */
.blk-safety-video,
.blk-tech-values-bg-video {
  height: 100%;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* tech・valuesセクションの動画背景ラッパー（video要素自体は
   直下に1つだけ配置し、tech/valuesの2セクションで共有する） */
.blk-tech-values-bg {
  overflow: hidden;
  position: relative;
}

.blk-tech-inner,
.blk-safety-inner {
  align-items: center;
  display: flex;
  gap: 80px;
  gap: 5rem;
}
@media screen and (max-width: 767px) {
  .blk-tech-inner,
  .blk-safety-inner {
    flex-direction: column;
    gap: 2rem;
    padding: 0 3.125rem;
  }
}

.blk-tech-content,
.blk-safety-content {
  flex: 1;
}

/* 強み1（.ui-heading）と下線・文字寄せを揃えている。
   PCは左揃え、スマホは中央揃えに統一 */
.blk-tech-heading,
.blk-safety-heading {
  border-bottom: 1px solid #c7cbcd;
  font-size: max(31px, 10px);
  font-size: max(1.9375rem, 10px);
  font-weight: 300;
  letter-spacing: 0.08em;
  line-height: 1.4838709677;
  padding-bottom: 10px;
  padding-bottom: 0.625rem;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .blk-tech-heading,
  .blk-safety-heading {
    font-size: max(1.25rem, 10px);
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
  }
}

/* tech・safetyセクションの背景動画は明るめ・半透明加工がされているため、
   valuesセクション（暗い動画＋白文字+黒シャドウ）とは逆に、
   濃紺の文字色（#16323d）＋白い光彩状のtext-shadowを重ねることで
   コントラストを確保し、読みやすくしている。以降のsafety内の各要素
   （mediumHeading等）でも同じ配色・シャドウの組み合わせを繰り返し使用 */
.blk-tech-heading,
.blk-safety-heading {
  color: #16323d;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

.blk-tech-description {
  color: #16323d;
  font-weight: 400;
  margin-top: 29px;
  margin-top: 1.8125rem;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}
@media screen and (max-width: 767px) {
  .blk-tech-description {
    margin-top: 0.75rem;
  }
}

.blk-safety-items {
  display: flex;
  flex-direction: column;
  gap: 31px;
  gap: 1.9375rem;
  margin-top: 24px;
  margin-top: 1.5rem;
}

.blk-safety-item {
  align-items: center;
  display: flex;
  gap: 10px;
  gap: 0.625rem;
  position: relative;
}


.blk-safety-step {
  align-content: center;
  background-color: #81a0b5;
  border-radius: 0.25rem;
  color: #fff;
  display: grid;
  flex-shrink: 0;
  font-size: max(16px, 10px);
  font-size: max(1rem, 10px);
  height: 24px;
  height: 1.5rem;
  justify-content: center;
  line-height: 1;
  place-content: center;
  width: 70px;
  width: 4.375rem;
}
@media screen and (max-width: 767px) {
  .blk-safety-step {
    font-size: max(0.625rem, 10px);
    height: 1.25rem;
    width: 2.875rem;
  }
}

.blk-safety-itemDescription {
  color: #16323d;
  flex: 1;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}
@media screen and (max-width: 767px) {
  .blk-safety-itemDescription {
    letter-spacing: 0;
  }
}

.blk-safety-medium {
  margin-top: 48px;
  margin-top: 3rem;
}

.blk-safety-mediumHeading {
  color: #16323d;
  font-size: max(22px, 10px);
  font-size: max(1.375rem, 10px);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

.blk-safety-mediumDescription {
  color: #16323d;
  margin-top: 16px;
  margin-top: 1rem;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

/* 培地の安全性補足4項目を2列グリッドで配置（スマホでは1列に切替） */
.blk-safety-mediumList {
  display: grid;
  gap: 16px;
  gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 24px;
  margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .blk-safety-mediumList {
    grid-template-columns: 1fr;
  }
}

.blk-safety-mediumItem {
  border-left: 3px solid #16323d;
  padding-left: 16px;
  padding-left: 1rem;
}

.blk-safety-mediumItemHeading {
  color: #16323d;
  font-weight: 500;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

.blk-safety-mediumItemDescription {
  color: #16323d;
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  margin-top: 4px;
  margin-top: 0.25rem;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

.blk-values-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
  gap: 0.875rem;
  margin-top: 29px;
  margin-top: 1.8125rem;
}
@media screen and (max-width: 767px) {
  .blk-values-items {
    margin-top: 0.625rem;
  }
}

.blk-values-item {
  align-items: center;
  background-color: #fff;
  border-radius: 1.125rem;
  display: flex;
  gap: 45px;
  gap: 2.8125rem;
  padding: 32px 54px;
  padding: 2rem 3.375rem;
}
@media screen and (max-width: 767px) {
  .blk-values-item {
    border-radius: 0.625rem;
    gap: 0.9375rem;
    padding: 0.875rem;
  }
}

/* 5項目それぞれのアイコン画像を疑似要素の背景画像として、
   :nth-child で項目ごとに個別のSVGを割り当てている
   （icon_commitment1〜5.svg。いずれもオリジナルの単純な線画アイコン） */
.blk-values-item::before {
  aspect-ratio: 1/1;
  background: no-repeat center/contain;
  content: "";
  display: inline-block;
  flex-shrink: 0;
  height: auto;
  width: 83px;
  width: 5.1875rem;
}
@media screen and (max-width: 767px) {
  .blk-values-item::before {
    width: 2rem;
  }
}

.blk-values-item:nth-child(1)::before {
  background-image: url(../images/icon_commitment1.svg);
}

.blk-values-item:nth-child(2)::before {
  background-image: url(../images/icon_commitment2.svg);
}

.blk-values-item:nth-child(3)::before {
  background-image: url(../images/icon_commitment3.svg);
}

.blk-values-item:nth-child(4)::before {
  background-image: url(../images/icon_commitment4.svg);
}

.blk-values-item:nth-child(5)::before {
  background-image: url(../images/icon_commitment5.svg);
}

.blk-values-itemInner {
  flex: 1;
}

.blk-values-itemHeading {
  font-size: max(24px, 10px);
  font-size: max(1.5rem, 10px);
  font-weight: 300;
  letter-spacing: 0.095em;
  line-height: 1.875;
}
@media screen and (max-width: 767px) {
  .blk-values-itemHeading {
    font-size: max(0.75rem, 10px);
  }
}

.blk-values-itemDescription {
  font-size: max(17px, 10px);
  font-size: max(1.0625rem, 10px);
  font-weight: 300;
  letter-spacing: 0.03em;
  line-height: 1.4117647059;
  margin-top: 4px;
  margin-top: 0.25rem;
}
@media screen and (max-width: 767px) {
  .blk-values-itemDescription {
    font-size: max(0.75rem, 10px);
    margin-top: 0.5625rem;
  }
}

/* ここからページ中盤のCTAセクション（contact）の定義 */
.blk-contact {
  background-color: #fff;
  padding-top: 106px;
  padding-top: 6.625rem;
}
@media screen and (max-width: 767px) {
  .blk-contact {
    padding-top: 2.125rem;
  }
}

.blk-contact-inner.sec-container {
  max-width: 1383px;
  max-width: 86.4375rem;
}
@media screen and (max-width: 767px) {
  .blk-contact-inner.sec-container {
    display: flex;
    flex-direction: column;
    max-width: 33.75rem;
  }
}

.blk-contact-wrapper {
  grid-gap: 80px;
  display: grid;
  gap: 80px;
  gap: 5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 767px) {
  /* display:contents で.blk-contact-wrapper自体を「無かったこと」にし、
     子要素（content/buttonItems）を親の.blk-contact-innerに対して
     直接のフレックス/フローの子として扱わせることで、
     .blk-contact-buttonItems側のorder:1（下記参照）による
     表示順の入れ替えを可能にしている */
  .blk-contact-wrapper {
    display: contents;
    grid-template-columns: repeat(1, 1fr);
  }
}

.blk-contact-heading {
  font-size: max(24px, 10px);
  font-size: max(1.5rem, 10px);
  font-weight: 300;
  letter-spacing: 0.095em;
  line-height: 2;
}
@media screen and (max-width: 767px) {
  .blk-contact-heading {
    font-size: max(1.25rem, 10px);
    line-height: 1.5;
    text-align: center;
  }
}

.blk-contact-descriptionItems {
  margin-top: 26px;
  margin-top: 1.625rem;
}
@media screen and (max-width: 767px) {
  .blk-contact-descriptionItems {
    margin-top: 1.0625rem;
  }
}

.blk-contact-descriptionItem {
  font-size: max(16px, 10px);
  font-size: max(1rem, 10px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2.5;
}
@media screen and (max-width: 767px) {
  .blk-contact-descriptionItem {
    font-size: max(0.6875rem, 10px);
    line-height: 1.75;
  }
}

.blk-contact-description {
  font-size: max(16px, 10px);
  font-size: max(1rem, 10px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2.5;
}
@media screen and (max-width: 767px) {
  .blk-contact-description {
    font-size: max(0.6875rem, 10px);
    line-height: 1.75;
  }
}

.blk-contact-buttonItems {
  grid-gap: 30px;
  display: grid;
  gap: 30px;
  gap: 1.875rem;
  grid-template-columns: repeat(1, 1fr);
  margin-top: 20px;
  margin-top: 1.25rem;
}
@media screen and (max-width: 767px) {
  .blk-contact-buttonItems {
    margin-top: 2.5625rem;
    order: 1;
  }
}

.blk-contact-note {
  font-size: max(16px, 10px);
  font-size: max(1rem, 10px);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 2.5;
  margin-top: 30px;
  margin-top: 1.875rem;
}
@media screen and (max-width: 767px) {
  .blk-contact-note {
    font-size: max(0.6875rem, 10px);
    line-height: 1.75;
  }
}

/* ここからスマホ用ドロワーメニュー（blk-nav-drawer）の定義 */
/* ドロワー要素は class="blk-header-drawer blk-nav-drawer" と
   2つのクラスを併せ持つ。全画面のオーバーレイ（マスク・開閉演出）は
   .blk-header-drawer 側で担当し、.blk-nav-drawer 側はメニュー内の
   文字色など見た目のみを担当する */
.blk-nav-drawer {
  color: #14227f;
}

/* 画面中央に浮かぶメニューカード本体。角丸・白背景・影を持つ
   独立したパネルとして表示する。position:relativeは、右上に配置する
   閉じるボタン（.blk-nav-drawer-close）の基準位置を作るため */
.blk-nav-drawer-inner {
  background-color: #fff;
  border-radius: 16px;
  max-height: 80vh;
  max-width: 400px;
  overflow: auto;
  padding: 48px 32px;
  position: relative;
  width: 100%;
}

/* メニューカード右上の閉じる（✕）ボタン */
.blk-nav-drawer-close {
  align-items: center;
  background: transparent;
  border: none;
  color: #14227f;
  cursor: pointer;
  display: flex;
  font-size: 24px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 16px;
  top: 16px;
  width: 32px;
}

.blk-nav-drawer-navItem {
  position: relative;
}

/* メニューカードの左右幅いっぱいに区切り線を表示する
   （カード自体が画面中央の独立パネルになったため、
   　以前のようなビューポート全幅までのフルブリード表示は行わない） */
.blk-nav-drawer-navItem::before {
  background-color: #dee2e2;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.blk-nav-drawer-navItem:last-child::after {
  background-color: #dee2e2;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%;
}

.blk-nav-drawer-navItem a {
  display: inline-block;
  padding: 12px 0;
  padding: 0.75rem 0;
}

.blk-nav-drawer-buttons {
  display: flex;
  flex-direction: column;
  gap: 20px;
  gap: 1.25rem;
  margin-top: 20px;
  margin-top: 1.25rem;
}

/* ここから「導入までの流れ」セクション（flow）の定義。
   背景は util-accent-bg のごく薄い水色でコントラスト上は必須ではないが、
   tech/values/safetyセクションとの見た目の統一感を持たせるため、
   見出し・本文に同じ白グロー系text-shadowを付けている */
.blk-flow {
  padding-top: 152px;
  padding-top: 9.5rem;
}
@media screen and (max-width: 767px) {
  .blk-flow {
    padding-top: 2.375rem;
  }
}

.blk-flow-inner.sec-container {
  max-width: 1480px;
  max-width: 92.5rem;
}
@media screen and (max-width: 767px) {
  .blk-flow-inner.sec-container {
    max-width: 33.75rem;
  }
}

.blk-flow-heading .ui-heading {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

.blk-flow-description {
  margin-top: 55px;
  margin-top: 3.4375rem;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}
@media screen and (max-width: 767px) {
  .blk-flow-description {
    font-size: max(0.75rem, 10px);
    margin-top: 0.25rem;
    text-align: center;
  }
}

.blk-flow-items {
  grid-gap: 38px;
  display: grid;
  gap: 38px;
  gap: 2.375rem;
  gap: 3.0158730159%;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 45px;
  margin-top: 2.8125rem;
}
@media screen and (max-width: 767px) {
  .blk-flow-items {
    gap: 0.4375rem;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 1.625rem;
  }
}

.blk-flow-item {
  background-color: #fff;
  border-radius: 1.25rem;
  padding: 25px 12px;
  padding: 1.5625rem 0.75rem;
}
@media screen and (max-width: 767px) {
  .blk-flow-item {
    border-radius: 0.625rem;
    min-height: max(12.625rem, 202px);
    padding: 0.6875rem 0.375rem;
  }
}

/* 4ステップそれぞれのアイコン画像を疑似要素の背景画像として、
   :nth-child でステップごとに個別のSVGを割り当てている
   （introduction_illust1〜4.svg。オリジナルの単純な線画アイコン） */
.blk-flow-item::before {
  aspect-ratio: 1/1;
  background: no-repeat center/contain;
  content: "";
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
  width: 7.5rem;
}
@media screen and (max-width: 767px) {
  .blk-flow-item::before {
    width: 3.75rem;
  }
}

.blk-flow-item:nth-child(1)::before {
  background-image: url(../images/introduction_illust1.svg);
}

.blk-flow-item:nth-child(2)::before {
  background-image: url(../images/introduction_illust2.svg);
}

.blk-flow-item:nth-child(3)::before {
  background-image: url(../images/introduction_illust3.svg);
}

.blk-flow-item:nth-child(4)::before {
  background-image: url(../images/introduction_illust4.svg);
}

.blk-flow-itemHeading {
  color: #ff8c9d;
  font-size: max(24px, 10px);
  font-size: max(1.5rem, 10px);
  font-weight: 300;
  letter-spacing: 0.095em;
  line-height: 1.875;
  margin-top: 30px;
  margin-top: 1.875rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .blk-flow-itemHeading {
    font-size: max(0.9375rem, 10px);
    margin-top: 0.75rem;
    text-align: center;
  }
}

.blk-flow-itemDescription {
  color: #81a0b5;
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 400;
  letter-spacing: 0.0442857143em;
  line-height: 1.6428571429;
  margin-top: 10px;
  margin-top: 0.625rem;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}
@media screen and (max-width: 767px) {
  .blk-flow-itemDescription {
    font-size: max(0.75rem, 10px);
    line-height: 1.3333333333;
    margin-top: -0.125rem;
  }
}

/* ここからフッター（footer）の定義。
   PC：ロゴ側260px＋情報テーブル側1frの2カラムグリッド／
   スマホ：1カラムに切り替え（.blk-footer-grid参照） */
.blk-footer {
  background-color: #f4f9f9;
  padding: 96px 0 48px;
  padding: 6rem 0 3rem;
}
@media screen and (max-width: 767px) {
  .blk-footer {
    padding: 3.5rem 0 2rem;
  }
}

.blk-footer-inner.sec-container {
  max-width: 1200px;
  max-width: 75rem;
}

.blk-footer-grid {
  display: grid;
  gap: 56px;
  gap: 3.5rem;
  grid-template-columns: 260px 1fr;
}
@media screen and (max-width: 767px) {
  .blk-footer-grid {
    gap: 2.5rem;
    grid-template-columns: 1fr;
  }
}

.blk-footer-logoLink {
  display: inline-block;
}

.blk-footer-logo {
  width: 180px;
  width: 11.25rem;
}
@media screen and (max-width: 767px) {
  .blk-footer-logo {
    width: 9.375rem;
  }
}

.blk-footer-logoLink img {
  -o-object-fit: contain;
  aspect-ratio: 1100/370;
  height: auto;
     object-fit: contain;
  width: 100%;
}

.blk-footer-copy {
  color: #14227f;
  font-size: max(15px, 10px);
  font-size: max(0.9375rem, 10px);
  font-weight: 300;
  letter-spacing: 0.035em;
  line-height: 1.7;
  margin-top: 24px;
  margin-top: 1.5rem;
}
@media screen and (max-width: 767px) {
  .blk-footer-copy {
    font-size: max(0.8125rem, 10px);
  }
}

.blk-footer-dl {
  border-top: 1px solid #d5e0e0;
  display: grid;
  gap: 28px 40px;
  gap: 1.75rem 2.5rem;
  grid-template-columns: repeat(2, 1fr);
  padding-top: 36px;
  padding-top: 2.25rem;
}
@media screen and (max-width: 767px) {
  .blk-footer-dl {
    gap: 1.25rem;
    grid-template-columns: 1fr;
    padding-top: 1.75rem;
  }
}

/* 「製造元」項目だけは情報量が多いため、2カラムグリッドの両方の列を
   使って横幅いっぱいに広げる修飾子（grid-column: 1 / -1 は
   「1列目から最終列まで」を意味する） */
.blk-footer-dlItem-Wide {
  grid-column: 1 / -1;
}

.blk-footer-dt {
  color: #3cb9d2;
  display: block;
  font-size: max(13px, 10px);
  font-size: max(0.8125rem, 10px);
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  margin-bottom: 0.375rem;
}

.blk-footer-dd {
  color: #14227f;
  font-size: max(15px, 10px);
  font-size: max(0.9375rem, 10px);
  line-height: 1.7;
}

.blk-footer-dd a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.blk-footer-maker {
  margin: 0;
}

.blk-footer-ddItems {
  margin-top: 8px;
  margin-top: 0.5rem;
}

.blk-footer-ddItem {
  padding-left: 1.1em;
  position: relative;
}

/* リストマーカーの代わりに「・」を疑似要素で手動配置
   （list-style自体はCSSリセットで消してあるため） */
.blk-footer-ddItem::before {
  content: "・";
  left: 0;
  position: absolute;
}

.blk-footer-copyright {
  border-top: 1px solid #d5e0e0;
  color: #8a9a9d;
  font-size: max(12px, 10px);
  font-size: max(0.75rem, 10px);
  font-weight: 300;
  letter-spacing: 0.095em;
  line-height: 2.25;
  margin-top: 48px;
  margin-top: 3rem;
  padding-top: 24px;
  padding-top: 1.5rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .blk-footer-copyright {
    margin-top: 2rem;
    padding-top: 1rem;
  }
}

/* ここからヘッダー（header）の定義。半透明の白背景（rgba 0.8） */
.blk-header {
  background-color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0;
}

.blk-header-inner {
  display: flex;
  padding: 10px 50px 10px 32px;
  padding: 10px 3.125rem 10px 2rem;
}
@media screen and (max-width: 767px) {
  .blk-header-inner {
    padding: 10px 1.375rem 10px 2rem;
  }
}

.blk-header-logo {
  flex-shrink: 0;
  transition: opacity 0.3s ease-in-out;
  width: 200px;
  width: 12.5rem;
}
@media screen and (max-width: 767px) {
  .blk-header-logo {
    width: 7.5rem;
  }
}

.blk-header-logo img {
  -o-object-fit: contain;
  aspect-ratio: 1100/370;
  height: auto;
     object-fit: contain;
  width: 100%;
}

.blk-header-logoLink {
  display: block;
}

.blk-header-menuToggle {
  display: none;
}
@media screen and (max-width: 767px) {
  .blk-header-menuToggle {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: auto;
    position: relative;
    width: 2.875rem;
    z-index: 1;
  }
}

/* ドロワーメニューの背景マスク（画面全体を覆うグレーの半透明オーバーレイ）。
   flexで中央寄せにすることで、実際に見えるメニューカード
   （.blk-nav-drawer-inner）を画面中央に配置する。
   閉じている間は opacity:0 + visibility:hidden で非表示にし、
   開いた状態（下記 [aria-hidden=false] ルール）でフェードインさせる。
   ※ かつては transform: translateY(-100%) で画面上からスライドインする
   　 演出だったが、画面中央にフワッとフェードインする演出に変更した。 */
.blk-header-drawer {
  align-items: center;
  background-color: rgba(20, 34, 44, 0.6);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  visibility: hidden;
  z-index: 1001;
}

.blk-header-nav {
  margin-left: auto;
}
@media screen and (max-width: 767px) {
  .blk-header-nav {
    display: none;
  }
}

.blk-header-navItems {
  display: flex;
  height: 100%;
}

.blk-header-navItem {
  height: 100%;
}

.blk-header-navItem a {
  align-items: center;
  color: #14227f;
  display: flex;
  font-size: max(17px, 10px);
  font-size: max(1.0625rem, 10px);
  font-weight: 300;
  height: 100%;
  justify-content: center;
  padding: 0 23px;
  padding: 0 1.4375rem;
  transition: opacity 0.3s ease-in-out;
}

/* ドロワーメニューが開いた状態（script.jsがaria-hiddenを"false"に
   切り替える）のスタイル。フェードインで表示する。
   ※ 対象はクラスではなく aria-hidden 属性値のセレクタである点に注意 */
.blk-header-drawer[aria-hidden=false] {
  opacity: 1;
  visibility: visible;
}

/* hover指定できるPCを想定したスタイル */
@media (hover: hover) {
  .blk-header-logoLink:hover,
  .blk-header-navItem a:hover {
    opacity: 0.7;
  }
}
/* hoverが使えないタッチ端末を想定した装飾 */
@media (hover: none) {
  .blk-header-logoLink:active,
  .blk-header-navItem a:active {
    opacity: 0.7;
  }
}
/* ここから「製品一覧」セクション（products）の定義。
   4製品を2列グリッドで配置（スマホでは1列、.blk-products-items参照） */
.blk-products {
  padding: 120px 0 238px;
  padding: 7.5rem 0 14.875rem;
}
@media screen and (max-width: 767px) {
  .blk-products {
    padding: 2.5rem 0 4.75rem;
  }
}

.blk-products-inner.sec-container {
  display: block;
  position: relative;
}
@media screen and (max-width: 767px) {
  .blk-products-inner.sec-container {
    padding: 0 3.75rem;
  }
}

.blk-products-head {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .blk-products-heading {
    text-align: center;
  }
}

.blk-products-heading .ui-heading {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

.blk-products-description {
  margin-top: 66px;
  margin-top: 4.125rem;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}
@media screen and (max-width: 767px) {
  .blk-products-description {
    margin-top: 0.3125rem;
  }
}

.blk-products-items {
  display: grid;
  gap: 56px 40px;
  gap: 3.5rem 2.5rem;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 56px;
  margin-top: 3.5rem;
}
@media screen and (max-width: 767px) {
  .blk-products-items {
    gap: 2rem;
    grid-template-columns: 1fr;
    margin-top: 3.125rem;
  }
}

.blk-products-item {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  gap: 1.5rem;
}
@media screen and (max-width: 767px) {
  .blk-products-item {
    gap: 0.9375rem;
    padding: 0 0.5rem;
  }
}

.blk-products-itemMedia {
  position: relative;
  width: 100%;
}

.blk-products-itemHeading {
  color: #ff8c9d;
  font-size: max(23px, 10px);
  font-size: max(1.4375rem, 10px);
  font-weight: 400;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .blk-products-itemHeading {
    font-feature-settings: "palt";
    font-size: max(0.75rem, 10px);
  }
}
.blk-products-itemHeading span {
    color: #ff8c9d;
    background-color: #fff;
    text-align: center;
    font-weight: bold;
    padding: 0 5px;
    margin-right: 10px;
    font-size: max(14px, 10px);
    vertical-align: middle;
}
@media screen and (max-width: 767px) {
    .blk-products-itemHeading span {
        font-size: max(0.75rem, 10px);
        margin-right: 5px;
    }
}

.blk-products-itemDescription {
  font-feature-settings: "palt";
  margin-top: 30px;
  margin-top: 1.875rem;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}
@media screen and (max-width: 767px) {
  .blk-products-itemDescription {
    margin-top: 0.375rem;
  }
}

/* ここからヒーローセクション（hero）の定義 */
.blk-hero {
  height: 100%;
  position: relative;
  width: 100%;
}

.blk-hero-inner.sec-container {
  max-width: 1626px;
  max-width: 101.625rem;
  position: relative;
}
@media screen and (max-width: 767px) {
  .blk-hero-inner.sec-container {
    max-width: 33.75rem;
  }
}

/* キャッチコピーの表示エリア。position:absolute + top:50% +
   translateY(-50%) で縦方向中央に配置。サイト全体が白ベースの配色
   のため背景に暗いスクリムは敷かず、白文字の縁取り（4方向の
   text-shadowでフチをつくるフェイクストローク。ブランドカラーの
   ダークネイビー#16323dを使用）で、背景動画が明るい場面でも
   暗い場面でも視認できるようにしている */
.blk-hero-copy {
  border-radius: 12px;
  color: #fff;
  display: grid;
  padding: 32px 44px;
  position: absolute;
  text-shadow:
    -0.75px -0.75px 0 #16323d,
    0.75px -0.75px 0 #16323d,
    -0.75px 0.75px 0 #16323d,
    0.75px 0.75px 0 #16323d,
    0 2px 10px rgba(22, 50, 61, 0.5);
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .blk-hero-copy {
    padding: 1.25rem 1.5rem;
    top: 40%;
  }
}

/* 3枚のスライドをすべて同じグリッド位置（1行1列目）に重ねて配置し、
   opacityの切り替えだけでクロスフェードさせるテクニック
   （script.jsが4秒ごとにstate-activeクラスを次のスライドへ移す） */
.blk-hero-copySlide {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease-in-out;
}

.blk-hero-copySlide.state-active {
  opacity: 1;
  pointer-events: auto;
}

.blk-hero-subCopy {
  font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
  font-size: max(36px, 10px);
  font-size: max(2.25rem, 10px);
  font-weight: 500;
  letter-spacing: 0.09em;
}
@media screen and (max-width: 767px) {
  .blk-hero-subCopy {
    font-size: max(1.25rem, 10px);
  }
}

/* ピンク色の強調文字（em）は、暗い背景シャドウを重ねると濁って
   見づらくなるため、text-shadow:none で親から継承したシャドウを
   打ち消している */
.blk-hero-subCopy em {
  color: #ff8c92;
  font-style: normal;
  text-shadow: none;
}
@media screen and (max-width: 767px) {
  .blk-hero-subCopy em {
    font-size: max(1.1875rem, 10px);
  }
}

.blk-hero-mainCopy {
  font-size: max(67px, 10px);
  font-size: max(4.1875rem, 10px);
  font-weight: 200;
  letter-spacing: 0.09em;
  line-height: 1.4925373134;
}
@media screen and (max-width: 767px) {
  .blk-hero-mainCopy {
    font-size: max(2.1875rem, 10px);
  }
}

.blk-hero-mainCopy em {
  color: #ff8c92;
  font-style: normal;
  text-shadow: none;
}
@media screen and (max-width: 767px) {
  .blk-hero-mainCopy em {
    font-size: max(2.1875rem, 10px);
  }
}

/* 右下固定の「無料で資料請求する」バッジ付きボタン。
   バッジ（.blk-hero-requestBadge）はボタン本体の上端中央に
   position:absolute + left:50%/translateX(-50%)ではみ出す形で
   重ねて配置している */
.blk-hero-request {
  bottom: 89px;
  bottom: 5.5625rem;
  position: absolute;
  right: 172px;
  right: 10.75rem;
}
@media screen and (max-width: 767px) {
  .blk-hero-request {
    bottom: auto;
    right: 2rem;
    top: 50%;
    top: calc(50% + 6.25rem);
  }
}

.blk-hero-requestBadge {
  background-color: #fff;
  border: 1.5px solid #1aa876;
  border-radius: 999px;
  color: #1aa876;
  font-size: max(13px, 10px);
  font-size: max(0.8125rem, 10px);
  font-weight: 700;
  left: 50%;
  letter-spacing: 0.05em;
  padding: 6px 18px;
  padding: 0.375rem 1.125rem;
  position: absolute;
  top: -18px;
  top: -1.125rem;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .blk-hero-requestBadge {
    font-size: max(0.625rem, 10px);
    padding: 0.25rem 0.75rem;
    top: -0.75rem;
  }
}

.blk-hero-requestButton {
  align-items: center;
  background-color: #1aa876;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  gap: 16px;
  gap: 1rem;
  justify-content: center;
  margin-top: 10px;
  margin-top: 0.625rem;
  padding: 20px 32px;
  padding: 1.25rem 2rem;
  transition: all 0.3s ease-in-out;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .blk-hero-requestButton {
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding: 0.75rem 1.25rem;
  }
}

.blk-hero-requestButtonLabel {
  font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
  font-size: max(22px, 10px);
  font-size: max(1.375rem, 10px);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .blk-hero-requestButtonLabel {
    font-size: max(1rem, 10px);
  }
}

/* hover指定できるPCを想定したスタイル */
@media (hover: hover) {
  .blk-hero-requestButton:hover {
    opacity: 0.7;
  }
}
/* hoverが使えないタッチ端末を想定した装飾 */
@media (hover: none) {
  .blk-hero-requestButton:active {
    opacity: 0.7;
  }
}
/* ここから「Q&A」セクション（faq）の定義。アコーディオン開閉の
   仕組みは .blk-faq-dd と .blk-faq-arrow span を参照 */
.blk-faq {
  padding-top: 90px;
  padding-top: 5.625rem;
}
@media screen and (max-width: 767px) {
  .blk-faq {
    padding-top: 2.875rem;
  }
}

.blk-faq-inner.sec-container {
  max-width: 1480px;
  max-width: 92.5rem;
}
@media screen and (max-width: 767px) {
  .blk-faq-inner.sec-container {
    max-width: 33.75rem;
  }
}

.blk-faq-items {
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  margin: 67px auto 0;
  margin: 4.1875rem auto 0;
  max-width: 920px;
  padding: 8px 32px;
  padding: 0.5rem 2rem;
}
@media screen and (max-width: 767px) {
  .blk-faq-items {
    border-radius: 0.9375rem;
    margin-top: 1.75rem;
    padding: 0.25rem 1.25rem;
  }
}

.blk-faq-item {
  border-bottom: 1px solid #dcdfe0;
}
.blk-faq-item:first-child {
  border-top: 1px solid #dcdfe0;
}

.blk-faq-button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  align-items: center;
  background-color: transparent;
  color: #6b6d6e;
  cursor: pointer;
  display: flex;
  gap: 24px;
  gap: 1.5rem;
  padding: 28px 8px;
  padding: 1.75rem 0.5rem;
  width: 100%;
}
@media screen and (max-width: 767px) {
  .blk-faq-button {
    gap: 0.75rem;
    padding: 1.125rem 0.25rem;
  }
}

.blk-faq-dl {
  flex: 1;
  min-width: 0;
}

.blk-faq-dt {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  gap: 1rem;
  text-align: left;
}

.blk-faq-no {
  color: #3cb9d2;
  flex-shrink: 0;
  width: 32px;
  width: 2rem;
  font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
  font-size: max(20px, 10px);
  font-size: max(1.25rem, 10px);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.6666666667;
}
@media screen and (max-width: 767px) {
  .blk-faq-no {
    font-size: max(1.125rem, 10px);
  }
}

.blk-faq-question {
  color: #6b6d6e;
  font-size: max(18px, 10px);
  font-size: max(1.125rem, 10px);
  font-weight: 300;
  letter-spacing: 0.06em;
  line-height: 1.6666666667;
  margin: 0;
  min-height: auto;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .blk-faq-question {
    font-size: max(0.875rem, 10px);
    line-height: 1.4285714286;
  }
}

/* アコーディオンの回答パネル。閉じた状態は height:0 + overflow:hidden で
   高さを潰して隠し、開いた状態（script.jsがトグルするstate-active）で
   height:auto に戻す。
   ※ height:0 → autoの変化自体はCSSのtransitionでは滑らかにアニメーション
   　 できない（autoは可変値のため）。transition: all が付いているのは
   　 opacityやpadding-topなど他のプロパティのフェード分を滑らかにする
   　 ためで、高さの変化自体は瞬時に切り替わる。 */
.blk-faq-dd {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  gap: 1rem;
  height: 0;
  line-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  transition: all 0.3s ease-out;
}

.blk-faq-dd.state-active {
  height: auto;
  line-height: 1.6666666667;
  opacity: 1;
  padding-top: 16px;
  padding-top: 1rem;
}
@media screen and (max-width: 767px) {
  .blk-faq-dd.state-active {
    padding-top: 0.5rem;
  }
}

.blk-faq-a {
  color: #ff8c9d;
  flex-shrink: 0;
  width: 32px;
  width: 2rem;
  font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
  font-size: max(18px, 10px);
  font-size: max(1.125rem, 10px);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-align: left;
}

.blk-faq-answer {
  color: #7c7f80;
  flex: 1;
  min-width: 0;
  font-size: max(16px, 10px);
  font-size: max(1rem, 10px);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.6666666667;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .blk-faq-answer {
    font-size: max(0.875rem, 10px);
    line-height: 1.4285714286;
  }
}

.blk-faq-arrow {
  flex-shrink: 0;
}

/* caret.svgは下向き矢印の画像。閉じている状態ではCSSで180度回転させて
   「上向き」に見せ、開いた状態（state-active）で回転を解除して
   本来の「下向き」に戻す（開くと下向き矢印になる、という一般的な
   アコーディオンUIの矢印挙動をこの回転の組み合わせで実現している） */
.blk-faq-arrow span {
  aspect-ratio: 38/19;
  background: url(../images/caret.svg) no-repeat center/cover;
  display: block;
  height: auto;
  transform: rotate(180deg);
  transition: transform 0.3s ease-out;
  width: 24px;
  width: 1.5rem;
}
@media screen and (max-width: 767px) {
  .blk-faq-arrow span {
    width: 1.125rem;
  }
}

.blk-faq-button.state-active .blk-faq-arrow span {
  transform: rotate(0deg);
}

.util-accent-bg {
  background-color: rgba(213, 241, 241, 0.1);
  padding-bottom: 125px;
  padding-bottom: 7.8125rem;
}
@media screen and (max-width: 767px) {
  .util-accent-bg {
    padding-bottom: 4.4375rem;
  }
}

/* index.htmlの<main>直下（hero〜faqまでの全セクション）を包む
   .util-fixed-bg 用のスタイル。position:relativeは、子の
   .util-fixed-bg-layer（position:absolute）の基準位置を作るため */
.util-fixed-bg {
  position: relative;
}

/* もともとはposition:fixed + clip-pathを組み合わせた視差（パララックス）
   背景演出に使っていた名残。現在はclip-pathの指定が
   polygon(0 0, 100% 0, 100% 100%, 0% 100%)＝要素の四隅そのものを
   結んだ「切り抜きなし」の指定になっており、実質的に何もクリップ
   していない（見た目への影響はない）。以前の演出を簡略化した際の
   消し忘れの可能性があるため、削除しても支障がないか要確認。

   heightは100%ではなく、ヒーローと同じ100dvh（フォールバック100vh）を
   明示的に指定している。以前はposition:fixedの子要素（下記::beforeや
   .util-fixed-bg-video）がheight:100%をそもそも無視して画面全体に
   固定表示されていたが、実機のモバイルブラウザではこのfixedレイヤーの
   重なり順が崩れ、スクロール後も後続セクションの背景色より下に
   描画されず、ヒーロー画像（水を張ったガラス皿の写真）の丸い縁が
   「Cellpassが選ばれる理由」セクションに透けて見えてしまう不具合が
   あった。position:fixedをやめてabsoluteにし、高さをヒーローぴったりに
   固定することで、画像がヒーローの範囲外に描画されることが構造的に
   なくなるようにしている（ヒーローは100dvh＝画面1枚分の高さしかなく、
   スクロール中に視差効果を体感する余地もほぼないため、fixedによる
   演出上のメリットもない）。 */
.util-fixed-bg-layer {
  background: transparent;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  height: 100vh;
  height: 100dvh;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* video要素が読み込まれるまでの間、代わりに表示される静止画背景
   （PC/スマホでそれぞれ別画像を使用） */
.util-fixed-bg-layer::before {
  background: url(../images/bg1_fixed.jpg) no-repeat center/cover;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .util-fixed-bg-layer::before {
    background-image: url(../images/bg1_fixed_sp.jpg);
  }
}

/* ヒーローの背景画像（bg1.jpg）。.util-fixed-bg-layerの範囲
   （ヒーローとぴったり同じ高さ）いっぱいに表示する */
.util-fixed-bg-video {
  height: 100%;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}

/* テキストの任意の単位を改行させないための区切り用ユーティリティ。
   使用箇所はHTML側（主にFAQセクション）のコメントを参照 */
.util-text-line {
  display: inline-block;
}

/* 「Cellpassが選ばれる理由」見出しセクション。配下に強み1〜5
   （greeting／values／tech／safety各セクション）が続く、束ねの見出し。
   強み2〜5（values/tech/safety）と背景色を揃えるため#f4f9f9にしている。
   下パディングは、直後に続く強み1（sec-greeting）との間隔を作る役割も
   兼ねており、強み1〜5間の他の間隔と同じ値に揃えている。

   背景色・paddingは全幅の.blk-strengths-heading側に持たせ、
   横幅の上限（sec-container、最大540px@スマホ）は内側のdivだけに
   適用する構成にしている。以前は.blk-strengths-heading自体に
   sec-containerを併用していたため、画面幅が540px超〜767px以下
   （ウィンドウを狭めたPCブラウザ等）になると背景ごと540px幅に
   収まってしまい、左右に隙間ができて下線・背景が途切れて見える
   不具合があった。 */
.blk-strengths-heading {
  background-color: #f4f9f9;
  padding: 120px 0;
  padding: 7.5rem 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .blk-strengths-heading {
    padding: 2.5rem 0;
  }
}
/* 強み1〜5の各見出し上に添える小さなラベル（「強み1」等）。
   tech/safetyは元・動画背景だった名残の白の光彩を残しているが、
   valuesは背景を明るい色に統一したため、光彩なしの通常表示にしている */
.ui-strengthLabel {
  color: #1aa876;
  display: block;
  font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 600;
  letter-spacing: 0.16em;
  margin-bottom: 10px;
  margin-bottom: 0.625rem;
}

.blk-tech-content .ui-strengthLabel,
.blk-safety-content .ui-strengthLabel {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

/* safetyセクション内、強み4（培地設計）と強み5（品質管理）の
   2ブロックの間に空ける余白（もとの.blk-safety-mediumが担っていた
   margin-topと同じ値を、ブロック順序の入れ替えに対応できる形で
   ラベル側に持たせている） */
.blk-strength-spacer {
  margin-top: 120px;
  margin-top: 7.5rem;
}
@media screen and (max-width: 767px) {
  .blk-strength-spacer {
    margin-top: 40px;
    margin-top: 2.5rem;
  }
}

/* ここから「代表挨拶」セクション（greeting）の定義 */

/* 上パディングは0にし、下パディングだけで次の強み2（values）との
   間隔を作っている（強み1〜5の間隔統一のため。詳細は.blk-tech,
   .blk-safetyのコメントを参照） */
.blk-greeting {
  background-color: #f4f9f9;
  padding: 0 0 120px;
  padding: 0 0 7.5rem;
}
@media screen and (max-width: 767px) {
  .blk-greeting {
    padding: 0 0 40px;
    padding: 0 0 2.5rem;
  }
}

.blk-greeting-content {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  gap: 2.5rem;
  margin-top: 32px;
  margin-top: 2rem;
}

.blk-greeting-media {
  flex: 1 1 280px;
  margin: 0;
  max-width: 320px;
}
@media screen and (max-width: 767px) {
  .blk-greeting-media {
    margin: 0 auto;
  }
}

.blk-greeting-media img {
  border-radius: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}

.blk-greeting-text {
  flex: 2 1 400px;
}

.blk-greeting-text .ui-copy {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

.blk-greeting-text .ui-copy + .ui-copy {
  margin-top: 20px;
  margin-top: 1.25rem;
}

.blk-greeting-name {
  font-weight: 500;
  margin-top: 24px;
  margin-top: 1.5rem;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

.blk-greeting-name span {
  color: #6b6d6e;
  display: block;
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  font-weight: 400;
  margin-top: 4px;
  margin-top: 0.25rem;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

.blk-greeting-heading .ui-heading {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.7);
}

/* ここから「確かなエビデンス」セクション（evidence）の定義。
   4項目はflexのwrap折り返しで配置（グリッドではない） */
.blk-evidence {
  background-color: #f8fbfb;
  padding: 120px 0;
  padding: 7.5rem 0;
}
@media screen and (max-width: 767px) {
  .blk-evidence {
    padding: 40px 0;
    padding: 2.5rem 0;
  }
}

.blk-evidence-description {
  margin-top: 24px;
  margin-top: 1.5rem;
}

.blk-evidence-items {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  gap: 1.5rem;
  list-style: none;
  margin-top: 48px;
  margin-top: 3rem;
  padding: 0;
}
@media screen and (max-width: 767px) {
  .blk-evidence-items {
    gap: 1rem;
    margin-top: 2rem;
  }
}

.blk-evidence-item {
  background-color: #fff;
  border-radius: 12px;
  flex: 1 1 220px;
  padding: 32px 24px;
  padding: 2rem 1.5rem;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .blk-evidence-item {
    flex: 1 1 45%;
    padding: 1.25rem 1rem;
  }
}

.blk-evidence-itemNumber {
  color: #3cb9d2;
  font-family: "Plus Jakarta Sans", "Noto Sans JP", sans-serif;
  font-size: max(40px, 10px);
  font-size: max(2.5rem, 10px);
  font-weight: 600;
  line-height: 1;
}
@media screen and (max-width: 767px) {
  .blk-evidence-itemNumber {
    font-size: max(1.75rem, 10px);
  }
}

.blk-evidence-itemNumber span {
  font-size: max(18px, 10px);
  font-size: max(1.125rem, 10px);
  font-weight: 500;
  margin-left: 0.25rem;
}
@media screen and (max-width: 767px) {
  .blk-evidence-itemNumber span {
    font-size: max(0.875rem, 10px);
  }
}

.blk-evidence-itemLabel {
  color: #6b6d6e;
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  line-height: 1.6;
  margin-top: 12px;
  margin-top: 0.75rem;
}

.blk-evidence-note {
  margin-top: 32px;
  margin-top: 2rem;
}

/* 薬機法上の注記・製造元クレジットを、他の実績訴求文より
   控えめな小さいフォントサイズで表示するための注記専用スタイル */
.blk-evidence-disclaimer {
  color: #9a9c9d;
  font-size: max(11px, 9px);
  font-size: max(0.6875rem, 9px);
  line-height: 1.6363636364;
  margin-top: 16px;
  margin-top: 1rem;
}

/* お問い合わせフォーム（contact.html）とプライバシーポリシー
   （privacy.html）共通のページ上部見出しエリア。
   両ページで見た目を揃えるため、同じルールを併記している */
.sec-form-hero,
.sec-policy-hero {
  background-color: #f4f9f9;
  padding: 168px 0 64px;
  padding: 10.5rem 0 4rem;
}
@media screen and (max-width: 767px) {
  .sec-form-hero,
  .sec-policy-hero {
    padding: 6.5rem 0 2.5rem;
  }
}

.blk-form-hero-inner.sec-container,
.blk-policy-hero-inner.sec-container {
  max-width: 760px;
  text-align: center;
}

.blk-form-hero-heading,
.blk-policy-hero-heading {
  color: #14227f;
  font-size: max(32px, 10px);
  font-size: max(2rem, 10px);
  font-weight: 300;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .blk-form-hero-heading,
  .blk-policy-hero-heading {
    font-size: max(1.5rem, 10px);
  }
}

.blk-form-hero-lead,
.blk-policy-hero-lead {
  color: #6b6d6e;
  line-height: 1.8;
  margin-top: 20px;
  margin-top: 1.25rem;
}
@media screen and (max-width: 767px) {
  .blk-form-hero-lead,
  .blk-policy-hero-lead {
    font-size: max(0.875rem, 10px);
    text-align: left;
  }
}

/* ここからプライバシーポリシー本文（privacy.html）専用の定義 */
.sec-policy {
  padding: 64px 0 160px;
  padding: 4rem 0 10rem;
}
@media screen and (max-width: 767px) {
  .sec-policy {
    padding: 2.5rem 0 5rem;
  }
}

.blk-policy-inner.sec-container {
  max-width: 900px;
  max-width: 56.25rem;
}

.blk-policy-updated {
  color: #6b6d6e;
  font-size: max(14px, 10px);
  font-size: max(0.875rem, 10px);
  text-align: right;
}

.blk-policy-section {
  margin-top: 48px;
  margin-top: 3rem;
}
.blk-policy-section:first-of-type {
  margin-top: 32px;
  margin-top: 2rem;
}

/* 各節（1〜9）の見出し。番号は自動採番ではなくHTML側のテキストに
   直接書かれている（privacy.htmlのコメントを参照） */
.blk-policy-heading {
  color: #14227f;
  font-size: max(20px, 10px);
  font-size: max(1.25rem, 10px);
  font-weight: 500;
  padding-bottom: 12px;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #d5e0e0;
}

.blk-policy-text {
  color: #6b6d6e;
  line-height: 1.8;
  margin-top: 16px;
  margin-top: 1rem;
}

.blk-policy-list {
  margin-top: 16px;
  margin-top: 1rem;
  padding-left: 24px;
  padding-left: 1.5rem;
}

.blk-policy-listItem {
  color: #6b6d6e;
  line-height: 1.8;
  list-style: disc;
}
.blk-policy-listItem + .blk-policy-listItem {
  margin-top: 4px;
  margin-top: 0.25rem;
}

/* ここからお問い合わせフォーム本体（contact.html）専用の定義 */
.sec-form {
  padding: 64px 0 160px;
  padding: 4rem 0 10rem;
}
@media screen and (max-width: 767px) {
  .sec-form {
    padding: 2.5rem 0 5rem;
  }
}

.blk-form-inner.sec-container {
  max-width: 760px;
}

.blk-form-group {
  margin-top: 32px;
  margin-top: 2rem;
}
.blk-form-group:first-child {
  margin-top: 0;
}

.blk-form-row {
  display: flex;
  gap: 24px;
  gap: 1.5rem;
  margin-top: 32px;
  margin-top: 2rem;
}
.blk-form-row .blk-form-group {
  flex: 1;
  margin-top: 0;
}
@media screen and (max-width: 767px) {
  .blk-form-row {
    flex-direction: column;
    gap: 2rem;
  }
}

.blk-form-label {
  color: #14227f;
  display: block;
  font-weight: 500;
  margin-bottom: 8px;
  margin-bottom: 0.5rem;
}

.blk-form-required,
.blk-form-optional {
  border-radius: 4px;
  font-size: max(11px, 10px);
  font-size: max(0.6875rem, 10px);
  font-weight: 500;
  margin-left: 8px;
  margin-left: 0.5rem;
  padding: 2px 8px;
  padding: 0.125rem 0.5rem;
}

.blk-form-required {
  background-color: #ff8c92;
  color: #fff;
}

.blk-form-optional {
  background-color: #dcdfe0;
  color: #6b6d6e;
}

.blk-form-input,
.blk-form-textarea {
  background-color: #fff;
  border: 1px solid #d5e0e0;
  border-radius: 8px;
  color: #14227f;
  display: block;
  font-family: inherit;
  font-size: max(16px, 10px);
  font-size: max(1rem, 10px);
  padding: 14px 16px;
  padding: 0.875rem 1rem;
  transition: border-color 0.2s ease-in-out;
  width: 100%;
}

.blk-form-input:focus,
.blk-form-textarea:focus {
  border-color: #3cb9d2;
}

.blk-form-input.state-invalid,
.blk-form-textarea.state-invalid {
  border-color: #e2495a;
}

.blk-form-textarea {
  resize: vertical;
}

.blk-form-error {
  color: #e2495a;
  display: none;
  font-size: 13px;
  font-size: 0.8125rem;
  margin-top: 6px;
  margin-top: 0.375rem;
}

.blk-form-error.state-show {
  display: block;
}

.blk-form-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  gap: 1rem 2rem;
  margin-top: 12px;
  margin-top: 0.75rem;
}

.blk-form-radio {
  align-items: center;
  color: #6b6d6e;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  gap: 0.5rem;
}

/* ファイル冒頭のCSSリセットで input,button,select,textarea に
   appearance:none が、さらに input[type=checkbox]/[type=radio] には
   display:none が指定されているため、そのままではラジオボタンが
   一切表示されない。ここで display:inline-block と
   appearance:auto（＋accent-colorで色付け）を明示的に指定し直すことで
   ブラウザ標準の見た目を復活させている
   （accent-colorだけではappearance:noneのままでは効果が出ないため、
   　appearanceの上書きが必須である点に注意） */
.blk-form-radio input[type="radio"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  accent-color: #3cb9d2;
  display: inline-block;
  height: 18px;
  height: 1.125rem;
  width: 18px;
  width: 1.125rem;
}

.blk-form-consent {
  margin-top: 48px;
  margin-top: 3rem;
  text-align: center;
}

.blk-form-checkbox {
  align-items: center;
  color: #6b6d6e;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  gap: 0.5rem;
}

.blk-form-checkbox a {
  color: #3cb9d2;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.blk-form-checkbox input[type="checkbox"] {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  accent-color: #3cb9d2;
  display: inline-block;
  height: 18px;
  height: 1.125rem;
  width: 18px;
  width: 1.125rem;
}

.blk-form-status {
  border-radius: 8px;
  display: none;
  font-size: 14px;
  font-size: 0.875rem;
  margin-top: 24px;
  margin-top: 1.5rem;
  padding: 12px 16px;
  padding: 0.75rem 1rem;
  text-align: center;
}

.blk-form-status:empty {
  display: none;
}

.blk-form-status.state-ok,
.blk-form-status.state-ng {
  display: block;
}

.blk-form-status.state-ok {
  background: #eaf6ee;
  color: #2f8f4e;
}

.blk-form-status.state-ng {
  background: #fcecee;
  color: #e2495a;
}

.blk-form-submit {
  margin-top: 40px;
  margin-top: 2.5rem;
  text-align: center;
}

.blk-form-submit .ui-btn {
  cursor: pointer;
  max-width: 320px;
  max-width: 20rem;
}
/*# sourceMappingURL=style.css.map */