@charset "UTF-8";
/*
=================================================
	方眼(グリッド)背景 … 複数ページ共通
	もとはトップページの#h-o（How to use〜OEM）専用としてtop.scssに
	直接書いていたが、Contactページなど他ページでも同じ背景を使うことに
	なったため、色とパターンの定義をここ（全scssが@importする_default）へ
	切り出した。実際の共通クラス(.bg-grid / .bg-grid-zigzag)はbase.scssで
	出力している。#h-o側もこのmixinを@includeする形に置き換えたので、
	見た目・色・マス目のサイズはすべて従来と完全に同一。

	・動き（スクロールに遅れてぬるっとついてくる）はCSSではなく
	  common/js/script.js側でbackground-positionを毎フレーム更新して実装。
	  対象は「#h-o」と「.js-bg-grid」を付けた要素。
	・background-attachment:fixedにより「柄は画面に対して固定」＋
	  「見える範囲はその要素の箱の中だけ」が保証される
=================================================
*/
/*
Roc Grotesk Wide Thin
無：800&900

Zen Kaku Gothic New
無：200&600
*/
/*
=================================================
	ヘッダー上部の横長画像（ページごとに差し替わるためcontact.scssに記述）
	contact_back.jpg は 1920×1280 の3:2画像。デザイン上は横長に
	トリミングして使うため、高さを固定して object-fit: cover で切り抜く。
	ヘッダー(.l-header)は position:fixed なので、この画像の上に重なる。

	画像はトップページの #safety / #oem（.ho-flush-img img）と同じ
	簡易パララックスで動かす。仕組みも同じで、common/js/script.js が
	.js-ho-parallax の付いた画像へ --ho-parallax-y をpxで書き込み、
	こちら側はそれをtransformで反映するだけ。画像を縦130%で敷き、
	上へ15%ずらした位置を基準にしているため、パララックスで上下に
	動いても余白（隙間）が出ない
=================================================
*/
.contact-hero {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background-color: #dcdddd;
  border-bottom: 4px solid #2263af;
}
@media screen and (max-width: 768px) {
  .contact-hero {
    height: 320px;
  }
}
@media screen and (max-width: 480px) {
  .contact-hero {
    height: 240px;
  }
}
.contact-hero img {
  position: absolute;
  top: -15%;
  left: 0;
  display: block;
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center center;
  --ho-parallax-y: 0px;
  transform: translateY(var(--ho-parallax-y));
  will-change: transform;
}

/*
=================================================
	ページ本体（方眼の動く背景の上に乗る部分）
	背景そのものは base.scss の .bg-grid が担当。ここでは余白だけを持たせる。
	padding-bottom に $footer_insta_h を足しているのはトップページの#h-oと
	同じ理由で、footer側が同じだけ負のmargin-topで上に重なってくるため。
	この追加分がそのまま「フッターのInstagramセクションの背後に見える
	方眼背景」になる
=================================================
*/
.contact-body {
  padding: 90px 60px 300px;
  color: #001122;
}
@media screen and (max-width: 768px) {
  .contact-body {
    padding: 60px 25px 270px;
  }
}
@media screen and (max-width: 480px) {
  .contact-body {
    padding-bottom: 210px;
  }
}

.contact-inner {
  max-width: 1000px;
  margin: 0 auto;
}

/*
=================================================
	h2 タイトル画像（ページごとに画像が変わるためcontact.scssに記述）
	title_contact.png はサブテキスト「/ お問い合せ」まで1枚に含まれており、
	他のタイトル画像と同じく元画像の縦幅は300px。
	#howtouse / #safety / #oem / #qanda と同じ height: 70px で揃える
=================================================
*/
.contact-title {
  margin-bottom: 70px;
}
@media screen and (max-width: 768px) {
  .contact-title {
    margin-bottom: 45px;
  }
}
.contact-title img {
  display: block;
  height: 70px;
  width: auto;
}
@media screen and (max-width: 480px) {
  .contact-title img {
    height: 52px;
  }
}

/*
=================================================
	PHP側のチェックで弾かれたときの総括メッセージ
	（フォームの先頭に出る「入力内容に誤りがあります」）
=================================================
*/
.contact-alert {
  margin-bottom: 30px;
  padding: 14px 18px;
  background-color: rgb(239.53, 244.08, 249.4);
  border: 1px solid #2263af;
  border-radius: 3px;
  color: #2263af;
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
  .contact-alert {
    font-size: 0.75rem;
    margin-bottom: 22px;
  }
}

/*
=================================================
	ハニーポット（スパム対策）
	人には見えないダミーの入力欄。ここに値が入っていたら
	機械的な投稿とみなしてPHP側で弾く。
	display:none だと入力欄そのものを認識しないボットがいるため、
	画面外へ飛ばして「存在はするが見えない」状態にしている
=================================================
*/
.contact-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/*
=================================================
	フォーム本体
	背景の塗りは持たせず、方眼の上に項目がそのまま並ぶ。
	一番上と一番下にも罫線を引いて、フォームの範囲が視覚的に
	分かるようにしている
=================================================
*/
.contact-form {
  border-top: 1px solid rgba(0, 17, 34, 0.16);
}

.contact-lead {
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.875rem;
  line-height: 2;
  letter-spacing: 0.02em;
  margin-bottom: 44px;
}
@media screen and (max-width: 768px) {
  .contact-lead {
    font-size: 0.8125rem;
    margin-bottom: 30px;
  }
}

/*
-------------------------------------------------
	入力項目1行ぶん
	PCはラベル左・入力欄右の2カラム、768px以下は縦積みに切り替える
-------------------------------------------------
*/
.contact-field {
  display: flex;
  align-items: flex-start;
  column-gap: 40px;
  padding: 30px 0;
  border-bottom: 1px solid rgba(0, 17, 34, 0.16);
}
@media screen and (max-width: 768px) {
  .contact-field {
    display: block;
    padding: 22px 0;
  }
}

.contact-field-label {
  flex: 0 0 260px;
  display: flex;
  align-items: center;
  column-gap: 10px;
  padding-top: 14px;
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .contact-field-label {
    flex: none;
    padding-top: 0;
    margin-bottom: 10px;
    font-size: 0.875rem;
  }
}

.contact-required {
  flex: 0 0 auto;
  display: inline-block;
  background-color: #2263af;
  color: #ffffff;
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 5px 7px 4px 8px;
  border-radius: 2px;
}

.contact-field-body {
  flex: 1 1 auto;
  min-width: 0;
}

/*
-------------------------------------------------
	入力欄
	方眼の背景の上でも「ここに書く場所」だと分かるよう、
	中は白で塗り、細い枠線を回す
-------------------------------------------------
*/
.contact-input {
  display: block;
  width: 100%;
  background-color: #ffffff;
  color: #001122;
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  border-radius: 3px;
  border: 1px solid rgba(0, 17, 34, 0.16);
  box-shadow: 0 0 0 0 rgba(0, 17, 34, 0);
  padding: 13px 16px;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-appearance: none;
  appearance: none;
}
@media screen and (max-width: 480px) {
  .contact-input {
    font-size: 1rem;
    padding: 12px 14px;
  }
}
.contact-input::placeholder {
  color: #c9caca;
}
.contact-input:focus {
  outline: none;
  border-color: #2263af;
  box-shadow: 0 0 0 1px #2263af;
}
.contact-input--textarea {
  min-height: 220px;
  resize: vertical;
}
@media screen and (max-width: 768px) {
  .contact-input--textarea {
    min-height: 170px;
  }
}

.contact-note {
  margin-top: 8px;
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(0, 17, 34, 0.6);
}

/*
-------------------------------------------------
	入力エラー時のデザイン
	・.contact-field に .is-error が付くと、入力欄の枠が青（$color_main）に
	  なり、中がごく薄い青に変わって、下に青いエラーメッセージが出る
	・現状は common/js/script.js の簡易バリデーションが .is-error を付け外し
	  している。PHP化の際は、サーバー側の判定結果に応じてHTML出力時に
	  class="contact-field is-error" を付ければ同じ見た目になる
-------------------------------------------------
*/
.contact-error {
  display: none;
  margin-top: 9px;
  color: #2263af;
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.contact-field.is-error .contact-input {
  background-color: rgb(239.53, 244.08, 249.4);
  border-color: #2263af;
  box-shadow: 0 0 0 1px #2263af;
}
.contact-field.is-error .contact-error {
  display: block;
}

/*
-------------------------------------------------
	PRIVACY POLICY（個人情報保護方針）＋ 同意チェック
	送信（確認画面へ）ボタンのすぐ上に置く
-------------------------------------------------
*/
.contact-privacy {
  margin-top: 55px;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 17, 34, 0.16);
  border-radius: 3px;
  padding: 30px 34px;
}
@media screen and (max-width: 768px) {
  .contact-privacy {
    margin-top: 38px;
    padding: 22px 20px;
  }
}
.contact-privacy-ttl {
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.contact-privacy-txt {
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: justify;
  color: rgba(0, 17, 34, 0.8);
}

.contact-agree {
  margin-top: 28px;
  text-align: center;
}
.contact-agree-label {
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
  cursor: pointer;
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 480px) {
  .contact-agree-label {
    font-size: 0.8125rem;
  }
}
.contact-agree-box {
  flex: 0 0 auto;
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 17, 34, 0.16);
  border-radius: 2px;
  transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-agree-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border-right: 2px solid #2263af;
  border-bottom: 2px solid #2263af;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.contact-agree input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact-agree input:checked + .contact-agree-box {
  border-color: #2263af;
}
.contact-agree input:checked + .contact-agree-box::after {
  transform: rotate(45deg) scale(1);
}
.contact-agree input:focus-visible + .contact-agree-box {
  border-color: #2263af;
  box-shadow: 0 0 0 1px #2263af;
}
.contact-agree.is-error .contact-agree-box {
  border-color: #2263af;
  box-shadow: 0 0 0 1px #2263af;
}
.contact-agree.is-error .contact-error {
  display: block;
}

/*
-------------------------------------------------
	ボタン
	色・角丸はトップページの.how-item-btn（#001122 / border-radius:3px）に
	合わせ、サイト全体のトーンから外れないようにする
-------------------------------------------------
*/
.contact-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 20px;
  margin-top: 50px;
}
@media screen and (max-width: 480px) {
  .contact-btns {
    flex-direction: column;
    row-gap: 14px;
    column-gap: 0;
    margin-top: 38px;
  }
}

.contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  min-height: 62px;
  background-color: #001122;
  color: #ffffff;
  border-radius: 3px;
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.5em;
  padding: 10px 20px 10px calc(20px + 0.5em);
  border: 1px solid #001122;
  cursor: pointer;
  transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@media screen and (max-width: 480px) {
  .contact-btn {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    font-size: 0.9375rem;
    letter-spacing: 0.35em;
    padding-left: calc(20px + 0.35em);
  }
}
.contact-btn:hover {
  background-color: #2263af;
  border-color: #2263af;
}
.contact-btn--ghost {
  background-color: transparent;
  color: #001122;
  border-color: rgba(0, 17, 34, 0.35);
}
.contact-btn--ghost:hover {
  background-color: #001122;
  border-color: #001122;
  color: #ffffff;
}

/*
=================================================
	確認ページ（confirm.html）
	入力ページと同じ罫線のトーンで、入力内容を読み取り専用で並べる
=================================================
*/
.contact-confirm-lead {
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.875rem;
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .contact-confirm-lead {
    font-size: 0.8125rem;
    margin-bottom: 32px;
    text-align: left;
  }
}

.contact-confirm-list {
  border-top: 1px solid rgba(0, 17, 34, 0.16);
}
.contact-confirm-list div {
  display: flex;
  align-items: flex-start;
  column-gap: 40px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(0, 17, 34, 0.16);
}
@media screen and (max-width: 768px) {
  .contact-confirm-list div {
    display: block;
    padding: 20px 0;
  }
}
.contact-confirm-list dt,
.contact-confirm-list dd {
  font-family: source-han-sans-cjk-ja, sans-serif;
  letter-spacing: 0.04em;
}
.contact-confirm-list dt {
  flex: 0 0 260px;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(0, 17, 34, 0.6);
}
@media screen and (max-width: 768px) {
  .contact-confirm-list dt {
    flex: none;
    font-size: 0.8125rem;
    margin-bottom: 6px;
  }
}
.contact-confirm-list dd {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}
@media screen and (max-width: 480px) {
  .contact-confirm-list dd {
    font-size: 0.9375rem;
  }
}
.contact-confirm-list .is-empty {
  color: rgba(0, 17, 34, 0.35);
  font-weight: 400;
}

/*
=================================================
	完了ページ（thanks.html）
=================================================
*/
.contact-thanks {
  text-align: center;
  padding: 40px 0 10px;
  border-top: 1px solid rgba(0, 17, 34, 0.16);
}
@media screen and (max-width: 768px) {
  .contact-thanks {
    padding: 30px 0 0;
  }
}
.contact-thanks-ttl {
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: #2263af;
}
@media screen and (max-width: 768px) {
  .contact-thanks-ttl {
    font-size: 1.25rem;
  }
}
.contact-thanks-txt {
  margin-top: 30px;
  font-family: source-han-sans-cjk-ja, sans-serif;
  font-size: 0.875rem;
  line-height: 2.1;
  letter-spacing: 0.02em;
  color: rgba(0, 17, 34, 0.8);
}
@media screen and (max-width: 768px) {
  .contact-thanks-txt {
    font-size: 0.8125rem;
    text-align: justify;
  }
}