@charset "utf-8";
/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * -- 値の粒度不足を埋める utility（共通の刻みに無い実数値） --
 * .ys-fz-{11,15,17,19,21,23,26,30,38,44,52}   - デザイン実数値のフォントサイズ
 * .ys-mb-{4,6,8,12,14,16,18,22,24,26,32,34,36,44,46,48,56} - 同 margin-bottom
 * .ys-pt-{20,56,70,72,76,80,88,96,110} / .ys-pb-{70,96,100,110,130,230} - 同セクション余白
 * .ys-gap-{1,2,12,14,16,18,22,24,26,28,32,48,56,64,70,80}  - 同 gap
 * .ys-bg-section / .ys-bg-white / .ys-bd-top / .ys-bd-bottom - 背景・罫線
 * .ys-hr / .ys-line / .ys-line-white                      - 区切り線・アクセントライン
 * .ys-img + .ys-img-{140〜360}                            - 写真の高さ（object-fit:cover）
 * .ys-txt / .ys-lead / .ys-note / .ys-sentence            - 本文テキスト3段階
 * .ys-fade                                                - スクロールフェードイン
 *
 * -- 共通コンポーネントのサイト差分（modifier 的に併用） --
 * .ys-header / .ys-header__inner / .ys-header__nav / .ys-header__nav-item
 * .ys-header__right / .ys-header__tel* / .ys-logo*         - ヘッダー
 * .ys-btn / --header / --md / --lg / --arrow / --submit    - グラデーションボタン
 * .ys-heading (.heading と併用)                            - [ 日本語ラベル ] + グラデ英字見出し
 * .ys-hero / .ys-crumb (.page-hero--solid / .breadcrumb と併用) - 下層ページヒーロー・パンくず
 * .ys-news (.blog-list と併用)                             - お知らせ一覧
 * .ys-cta*                                                 - お問い合わせCTA帯
 * .ys-footer*                                              - フッター（円弧の上境界含む）
 *
 * -- 構造不足を埋めるサイト固有コンポーネント --
 * .ys-mv*            - TOP メインビュー（全幅1枚写真クロスフェード + 波形SVG + コピー）
 * .ys-cards / .ys-card*      - 1px ヘアライン区切りの3列カードナビ
 * .ys-photo-stack*   - ごあいさつの写真スタック
 * .ys-recruit*       - TOP 採用セクション（写真グリッド + マスクフェード）
 * .ys-news-sec / .ys-greeting - TOP お知らせ・ごあいさつのカラム比率
 * .ys-dl / .ys-dl__key / .ys-dl__val - dl 型の情報テーブル（会社概要・沿革・募集要項）
 * .ys-photo-col      - 写真の縦並び（gap 14px）
 * .ys-company-products / .ys-products* - 製造種目（写真 + 2列リスト・角スクエアマーカー）
 * .ys-strength*      - 当社の強み（連番 + 説明 + 写真列）
 * .ys-svc / .ys-svc__row(--reverse) - 業務内容の左右交互ブロック
 * .ys-works / .ys-works__grid / __cap - 加工事例グリッド（幅1200px）
 * .ys-svc-note*      - 個人のお客様向け案内ボックス（幅1200px）
 * .ys-fac* / .ys-others* - 設備紹介カード / その他設備セル
 * .ys-rec-intro* / .ys-benefits / .ys-benefit* - 採用の導入・待遇カード
 * .ys-flow2*         - 採用の流れ + 採用問い合わせ（白 / グラデの2枚）
 * .ys-contact       - お問い合わせの1カラム（TEL / フォーム / FAX）
 * .ys-cmsform      - CMSメールフォームの見た目上書き（mail-form.css 対策）
 * .ys-info*          - お問い合わせの連絡先ボックス（TEL / FAX）
 * .ys-privacy*       - プライバシーポリシー本文（contact.php#privacy）
 *
 * ======================================
 * 共通SCSSに不足していたもの（5分類）
 * ======================================
 *
 * ・値の粒度不足 : fz / mb / pt / pb / gap の刻み（11,15,17,19,21,23,26,30,38,44,52px 等）
 *                  → デザインが 1px 単位の実数値設計のため、既存の 5px 刻みでは一致しない
 * ・構造不足     : 「[ 日本語ラベル ] + 大型グラデーション英字」の見出し型が heading に無い
 *                  1px ヘアラインで区切るカードグリッド（gap:1px + 背景色で罫線を作る型）が無い
 *                  dl（dt 固定幅 + dd）型の情報テーブルが table 系にしか無い
 *                  フッター上端の円弧（border-radius 50%/100% の張り出し）が無い
 * ・装飾パターン不足 : グラデーション文字（背景クリップ）の単体 utility が無い
 *                      写真の上下をマスクでフェードさせる型（mask-image）が無い
 * ・指定方向不足 : ヘッダーCTAを「ナビの内側・区切り線付き」で配置する型が無い
 * ・状態不足     : なし（hover は共通の hover utility ＋本CSSで対応）
 *
 * ======================================
 * 実装メモ（claude-design-output との差分判断）
 * ======================================
 *
 * ・claude-design-output には css/style.css が同梱されていないため、
 *   line-height 未指定箇所は body 継承（1.9）として実装した。
 *   共通コンポーネント側が別の値を持つ箇所（.heading__ja=1.4 等）は 1.9 で明示上書き。
 * ・Outfit は 500/600 のみ読み込むため、weight 未指定の英字は 500 を明示指定した
 *   （未指定=400 でも同じ 500 のフェイスで描画されるため見た目は一致）。
 * ・viewport は claude-design-output と同じ width=1360 固定（ベーシックプラン）。
 *   共通CSSのメディアクエリ（1320px以下）は発火しない。
 *
 */

/* ==========================================================================
   0. base（デザインの前提値）
   claude-design-output: viewport width=1360 固定 / ラッパー min-width:1360px
   ========================================================================== */
/* レスポンシブ非対応（ベーシックプラン）。
   1360px 固定レイアウトなので、ウィンドウが 1360px より狭いデスクトップでは
   横スクロールで右端まで見られる必要がある。
   共通CSSの body { overflow-x: hidden } はビューポートに伝播して
   「はみ出し分を切り捨てて横スクロール不可」にしてしまうため visible に戻す。
   （position: sticky のヘッダーを壊さないよう html 側には overflow を付けない） */
body {
  min-width: 1360px;
  overflow-x: visible;
}

/* ==========================================================================
   1. utility（値の粒度不足を埋める。共通の刻みに無い実数値のみ追加）
   ========================================================================== */
.ys-fz-11 { font-size: 11px; }
.ys-fz-12 { font-size: 12px; }
.ys-fz-13 { font-size: 13px; }
.ys-fz-14 { font-size: 14px; }
.ys-fz-15 { font-size: 15px; }
.ys-fz-16 { font-size: 16px; }
.ys-fz-17 { font-size: 17px; }
.ys-fz-19 { font-size: 19px; }
.ys-fz-21 { font-size: 21px; }
.ys-fz-23 { font-size: 23px; }
.ys-fz-26 { font-size: 26px; }
.ys-fz-30 { font-size: 30px; }
.ys-fz-38 { font-size: 38px; }
.ys-fz-44 { font-size: 44px; }
.ys-fz-52 { font-size: 52px; }

.ys-mb-0  { margin-bottom: 0; }
.ys-mb-4  { margin-bottom: 4px; }
.ys-mb-6  { margin-bottom: 6px; }
.ys-mb-8  { margin-bottom: 8px; }
.ys-mb-10 { margin-bottom: 10px; }
.ys-mb-12 { margin-bottom: 12px; }
.ys-mb-14 { margin-bottom: 14px; }
.ys-mb-16 { margin-bottom: 16px; }
.ys-mb-18 { margin-bottom: 18px; }
.ys-mb-20 { margin-bottom: 20px; }
.ys-mb-22 { margin-bottom: 22px; }
.ys-mb-24 { margin-bottom: 24px; }
.ys-mb-26 { margin-bottom: 26px; }
.ys-mb-32 { margin-bottom: 32px; }
.ys-mb-34 { margin-bottom: 34px; }
.ys-mb-36 { margin-bottom: 36px; }
.ys-mb-40 { margin-bottom: 40px; }
.ys-mb-44 { margin-bottom: 44px; }
.ys-mb-46 { margin-bottom: 46px; }
.ys-mb-48 { margin-bottom: 48px; }
.ys-mb-56 { margin-bottom: 56px; }

.ys-pt-0   { padding-top: 0; }
.ys-pt-20  { padding-top: 20px; }
.ys-pt-56  { padding-top: 56px; }
.ys-pt-70  { padding-top: 70px; }
.ys-pt-72  { padding-top: 72px; }
.ys-pt-76  { padding-top: 76px; }
.ys-pt-80  { padding-top: 80px; }
.ys-pt-88  { padding-top: 88px; }
.ys-pt-90  { padding-top: 90px; }
.ys-pt-96  { padding-top: 96px; }
.ys-pt-110 { padding-top: 110px; }

.ys-pb-0   { padding-bottom: 0; }
.ys-pb-70  { padding-bottom: 70px; }
.ys-pb-96  { padding-bottom: 96px; }
.ys-pb-100 { padding-bottom: 100px; }
.ys-pb-110 { padding-bottom: 110px; }
.ys-pb-130 { padding-bottom: 130px; }
.ys-pb-230 { padding-bottom: 230px; }

.ys-gap-1  { gap: 1px; }
.ys-gap-2  { gap: 2px; }
.ys-gap-12 { gap: 12px; }
.ys-gap-14 { gap: 14px; }
.ys-gap-16 { gap: 16px; }
.ys-gap-18 { gap: 18px; }
.ys-gap-22 { gap: 22px; }
.ys-gap-24 { gap: 24px; }
.ys-gap-26 { gap: 26px; }
.ys-gap-28 { gap: 28px; }
.ys-gap-32 { gap: 32px; }
.ys-gap-48 { gap: 48px; }
.ys-gap-56 { gap: 56px; }
.ys-gap-64 { gap: 64px; }
.ys-gap-70 { gap: 70px; }
.ys-gap-80 { gap: 80px; }

.ys-bg-section { background: #f7f8f9; }
.ys-bg-white   { background: #fff; }
.ys-bd-top     { border-top: 1px solid #e6e5e6; }
.ys-bd-bottom  { border-bottom: 1px solid #e6e5e6; }

/* 1px の水平区切り線（見出し下の罫） */
.ys-hr {
  display: block;
  width: 100%;
  height: 1px;
  background: #e6e5e6;
}
/* 48x2px のグラデーションアクセントライン */
.ys-line {
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(151deg, #0585c1 0%, #00316B 100%);
}
/* 64x2px の白ライン（MV） */
.ys-line-white {
  display: block;
  width: 64px;
  height: 2px;
  background: #fff;
  transform-origin: left;
}

/* 本文テキスト3段階（claude-design-output の実数値） */
.ys-lead {
  font-size: 17px;
  line-height: 2.1;
  color: #3d454f;
  text-wrap: pretty;
}
/* リード文を一段大きく見せたいとき（導入の一文など） */
.ys-lead--lg {
  font-size: 20px;
  line-height: 2;
}
.ys-txt {
  font-size: 15px;
  line-height: 2.1;
  color: #3d454f;
  text-wrap: pretty;
}
.ys-note {
  font-size: 14px;
  line-height: 1.9;
  color: #5b636e;
}
.ys-sentence > p + p { margin-top: 20px; }

/* スクロールフェードイン（JS が html に .js-anim を付与したときのみ有効）
   付与ルール: section 直下のコンテンツブロック1つに対して1つだけ。
   入れ子で付けない（親のフェード中に子が非表示のまま残るため）。
   1画面を超える長いブロックは、繰り返し単位（.ys-svc__row 等）に付ける。 */
.js-anim .ys-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js-anim .ys-fade.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   2. 見出し（[ 日本語ラベル ] ＋ 大型グラデーション英字）
   実数値: ラベル 15px/700/ls .08em/#00316B/mb 12px
           英字 Outfit 52px/600/lh 1/ls .02em/グラデ文字/width fit-content
   ========================================================================== */
.ys-heading { text-align: left; }
.ys-heading .heading__ja {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.08em;
  color: #00316B;
}
.ys-heading .heading__en {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  background: linear-gradient(151deg, #0585c1 0%, #00316B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 日本語を主役にした見出し（業務内容の各項目）。
   「何をやっているか」を一目で伝えるため、通常は英字に当てている
   大型グラデーションを日本語ラベル側に当てる。 */
.ys-heading--swap .heading__ja {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.02em;
  background: linear-gradient(151deg, #0585c1 0%, #00316B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ==========================================================================
   3. ボタン（グラデーション・角丸なし）
   ========================================================================== */
.ys-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  font-family: inherit;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(151deg, #0585c1 0%, #00316B 100%);
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ys-btn:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  color: #fff;
}
.ys-btn--header { padding: 15px 26px; font-size: 14px; }
.ys-btn--md     { padding: 18px 34px; font-size: 15px; }
.ys-btn--lg     { padding: 20px 40px; font-size: 15px; }
.ys-btn--submit { padding: 19px 60px; font-size: 16px; align-self: flex-start; }
.ys-btn--arrow {
  gap: 16px;
  padding: 18px 30px 18px 34px;
  font-size: 15px;
  letter-spacing: 0.06em;
}
.ys-btn__arrow {
  font-family: "Outfit", sans-serif;
  font-size: 15px;
}

/* ==========================================================================
   4. ヘッダー
   実数値: sticky / 高さ88px / inner 95% / border-bottom 1px #e6e5e6
           ロゴ 23px/700/ls .06em/#00316B ＋ 英字 Outfit 11px/ls .18em/#0585c1
           ナビ EN Outfit 11px/600/ls .14em/#0585c1 ＋ JA 14px/700/#1b1f24（EN上・2段） / gap 30px
           右: 区切り線1px + TEL(Outfit 10px ls .16em) + 番号(Outfit 21px/600/lh1)
   ========================================================================== */
.ys-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #e6e5e6;
}
.ys-header__inner {
  max-width: 100%;
  width: 95%;
  height: 88px;
  padding: 0;
}
.ys-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* シンボルマーク（高さは共通CSSの .header__logo img = PC 40px / SP 30px に従う） */
.ys-logo__mark {
  flex-shrink: 0;
}
/* 社名は日本語（上）＋ 英字（下）の2段組み */
.ys-logo__text {
  display: flex;
  flex-direction: column;
}
.ys-logo__name {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #00316B;
  line-height: 1.3;
}
.ys-logo__en {
  margin-top: 3px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #0585c1;
  line-height: 1.3;
}
.ys-header__nav {
  gap: 30px;
  margin-right: 0;
}
.ys-header__nav-item a {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 英字を上、JA を下の2段組み */
.ys-header__nav-item .header__nav-en {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  color: #0585c1;
}
.ys-header__nav-item .header__nav-ja {
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  color: #1b1f24;
}
.ys-header__nav-item a::after { bottom: -4px; }
.ys-header__right {
  gap: 18px;
  height: auto;
  padding-left: 18px;
  border-left: 1px solid #e6e5e6;
}
.ys-header__tel {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ys-header__tel-label {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #7a8290;
  line-height: 1.9;
}
.ys-header__tel-num {
  font-family: "Outfit", sans-serif;
  font-size: 21px;
  font-weight: 600;
  line-height: 1;
  color: #00316B;
}
/* SPナビ内の電話番号（共通 header__tel の色だけサイト値に合わせる） */
.ys-spnav__tel { color: #fff; }
.ys-spnav__tel::before { color: #fff; }

/* ==========================================================================
   5. 下層ページヒーロー ＋ パンくず
   実数値: 高さ230px / 背景写真 + 紺グラデ暗幕151deg / センター揃え
           英字 Outfit 12px/600/ls .24em/#a8d8f2/mb 8px
           日本語 38px/700/ls .06em/#fff
           パンくず 12px/#7a8290 / padding 16px 0 / border-bottom 1px #e6e5e6
   ========================================================================== */
.ys-hero {
  height: 230px;
  padding: 0;
  display: flex;
  align-items: center;
  text-align: center;
  background: #00316B;
}
/* 背景写真（ファイル名は各ページの $page_hero_img で切替） */
.ys-hero__bg {
  object-position: center;
}
/* 写真の上に紺のグラデを重ねて白文字の可読性を確保 */
.ys-hero__overlay {
  background: linear-gradient(151deg, rgba(5, 133, 193, 0.72) 0%, rgba(0, 49, 107, 0.88) 100%);
}
.ys-hero__content {
  width: 100%;
  height: 100%;
  justify-content: center;
}
/* flex アイテムの container は margin:0 auto のため縮む。実数値 1280px に戻す */
.ys-hero__content > .container { width: 100%; }
.ys-hero .heading__en {
  display: block;
  margin-bottom: 8px;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  line-height: 1.9;
  color: #a8d8f2;
}
.ys-hero .heading__ja {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.9;
  color: #fff;
}
.ys-crumb {
  padding: 16px 0;
  font-size: 12px;
  color: #7a8290;
  border-bottom: 1px solid #e6e5e6;
}
.ys-crumb .breadcrumb__link,
.ys-crumb .breadcrumb__current { color: #7a8290; }
.ys-crumb .breadcrumb__item:not(:last-child)::after {
  content: "／";
  margin: 0 0.25em;
  color: #7a8290;
}

/* ==========================================================================
   6. お問い合わせCTA帯
   実数値: padding 76px 0 230px / bg #f7f8f9 / border-top 1px #e6e5e6
           英字 52px グラデ mb4 / 見出し 26px/700/ls .03em/#00316B mb8 / 補足 14px/#5b636e
           右: TEL Outfit 11px ls .16em #7a8290 ＋ 番号 Outfit 30px/600/lh1.2/#00316B
   ========================================================================== */
.ys-cta {
  padding: 76px 0 230px;
  background: #f7f8f9;
  border-top: 1px solid #e6e5e6;
}
.ys-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ys-cta__en {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 0 4px;
  font-family: "Outfit", sans-serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  background: linear-gradient(151deg, #0585c1 0%, #00316B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ys-cta__ttl {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.9;
  color: #00316B;
}
.ys-cta__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: #5b636e;
}
.ys-cta__action {
  display: flex;
  align-items: center;
  gap: 20px;
}
.ys-cta__tel { text-align: right; }
.ys-cta__tel-label {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.9;
  color: #7a8290;
}
.ys-cta__tel-num {
  font-family: "Outfit", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: #00316B;
}

/* ==========================================================================
   7. フッター
   実数値: bg #00316B / 上端の円弧 = left/right -25%, top -130px, height 190px,
           border-radius 50% 50% 0 0 / 100% 100% 0 0
           inner grid 1fr 1fr / gap 60px / padding-bottom 32px
           社名 21px/700/ls .06em / 英字 Outfit 11px/ls .18em/#a8d8f2
           住所・連絡先 14px/lh1.9/rgba(255,255,255,.82)
           ナビ 14px/rgba(255,255,255,.86) / gap 14px / 列間 64px
           下段 border-top 1px rgba(255,255,255,.18) / padding 22px 0 30px
   ========================================================================== */
.ys-footer {
  position: relative;
  background: #00316B;
  color: #fff;
}
/* 上端の円弧。
   元データは「左右-25%に広げた要素 + border-radius 50%/100%」で描いているが、
   それだと画面外に340pxはみ出して横スクロール量が増え、固定幅サイトで
   右端が切れる原因になる。同じ楕円（rx = 幅の75% / ry = 190px）を clip-path で
   描き、はみ出しゼロで見た目を一致させる。 */
.ys-footer::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: -130px;
  height: 190px;
  background: #00316B;
  -webkit-clip-path: ellipse(75% 100% at 50% 100%);
  clip-path: ellipse(75% 100% at 50% 100%);
  pointer-events: none;
}
.ys-footer__body {
  position: relative;
  z-index: 1;
  padding: 0;
}
.ys-footer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 0 0 32px;
}
/* シンボルマーク + 社名（日本語 上 / 英字 下）。ヘッダーの .ys-logo と同じ構成 */
.ys-footer__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
/* 紺背景なので白抜き（共通CSSの .footer-body--dark と同じ手法） */
.ys-footer__mark {
  flex-shrink: 0;
  width: auto;
  height: 44px;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}
.ys-footer__logo-text {
  display: flex;
  flex-direction: column;
}
.ys-footer__name {
  margin: 0 0 3px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.3;
}
.ys-footer__en {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.3;
  color: #a8d8f2;
}
.ys-footer__addr {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
}
.ys-footer__contact {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
}
.ys-footer__navs {
  display: flex;
  justify-content: flex-end;
  gap: 64px;
}
.ys-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ys-footer__nav a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
  transition: color 0.3s ease, opacity 0.3s ease;
}
.ys-footer__nav a:hover {
  color: #fff;
  opacity: 1;
}
.ys-footer__bottom {
  position: relative;
  z-index: 1;
  padding: 0;
  text-align: left;
}
.ys-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.ys-footer__privacy {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease, opacity 0.3s ease;
}
.ys-footer__privacy:hover {
  color: #fff;
  opacity: 1;
}
.ys-footer__copy {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   8. 画像サイズヘルパー（デザインの実数値。共通の h-* に無い刻み）
   ========================================================================== */
.ys-img { width: 100%; object-fit: cover; display: block; }
.ys-img-140 { height: 140px; }
.ys-img-180 { height: 180px; }
.ys-img-200 { height: 200px; }
.ys-img-210 { height: 210px; }
.ys-img-229 { height: 229px; }
.ys-img-230 { height: 230px; }
.ys-img-240 { height: 240px; }
.ys-img-250 { height: 250px; }
.ys-img-290 { height: 290px; }
.ys-img-300 { height: 300px; }
.ys-img-330 { height: 330px; }
.ys-img-360 { height: 360px; }

/* ==========================================================================
   9. TOP：メインビュー
   実数値: 高さ660px / 背景 #00316B / 写真1枚構成（全幅・3枚クロスフェード 15s）
           overlay linear-gradient(90deg, rgba(0,49,107,.93) 0%, rgba(0,49,107,.72) 42%,
                   rgba(5,133,193,.14) 78%, rgba(5,133,193,.05) 100%)
           波形SVG 高さ190px（上の波 opacity .35 / 下の波 不透過）
           キャッチ 56px/700/lh1.42/ls .02em/#fff
   ========================================================================== */
.ys-mv {
  position: relative;
  height: 660px;
  background: #00316B;
  overflow: hidden;
}
.ys-mv__media {
  position: absolute;
  inset: 0;
  height: 660px;
  /* 乗算の影響を写真レイヤー内に閉じ込める（波形SVGとキャッチコピーには掛けない） */
  isolation: isolate;
}
/* 写真に紺の乗算を薄く重ねてキャッチコピー（白文字）の可読性を確保。
   空など写真の明るい部分に白文字がかぶって読みにくい、という指摘への対応。
   色は下層ページの .ys-hero__overlay と同じ紺グラデに合わせる。 */
.ys-mv__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(151deg, #0585c1 0%, #00316B 100%);
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}
.ys-mv__slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.ys-mv__slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 1枚目を土台に、2枚目→3枚目が順にクロスフェード（15s / 1枚あたり5s） */
.ys-mv__slide img:nth-child(2) { animation: ys-mvfade-2 15s ease-in-out infinite; }
.ys-mv__slide img:nth-child(3) { animation: ys-mvfade-3 15s ease-in-out infinite; }

.ys-mv__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 190px;
  display: block;
}
.ys-mv__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
/* flex アイテムになった container は縮むため幅を戻す（実数値 1280px） */
.ys-mv__content > .container { width: 100%; text-align: center; }
.ys-mv__en {
  margin: 0 0 26px;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.32em;
  line-height: 1.9;
  color: #a8d8f2;
  animation: ys-rise 0.9s ease both;
}
.ys-mv__catch {
  margin: 0;
  /* 狭い画面でも1行に収まるよう可変（上限 56px） */
  font-size: clamp(22px, 5.2vw, 56px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: 0.02em;
  color: #fff;
  animation: ys-rise 1s ease 0.1s both;
}
.ys-mv__line {
  margin: 36px 0 26px;
  animation: ys-line-in 0.8s ease 0.5s both;
}
.ys-mv__sub {
  margin: 0;
  font-size: 17px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
  animation: ys-rise 1s ease 0.3s both;
}

@keyframes ys-mvfade-2 {
  0%     { opacity: 0; }
  30%    { opacity: 0; }
  33.3%  { opacity: 1; }
  63.3%  { opacity: 1; }
  70%    { opacity: 0; }
  100%   { opacity: 0; }
}
@keyframes ys-mvfade-3 {
  0%     { opacity: 0; }
  63.3%  { opacity: 0; }
  66.6%  { opacity: 1; }
  96.6%  { opacity: 1; }
  100%   { opacity: 0; }
}
@keyframes ys-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ys-line-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ==========================================================================
   10. TOP：お知らせ
   実数値: 左300px + 右1fr / gap 60px / align-items:start
           行 grid 120px 1fr / gap 24px / padding 22px 4px / 罫線 1px #e6e5e6
           日付 Outfit 14px/#7a8290 / タイトル 15px/400/lh1.7
   ========================================================================== */
.ys-news-sec {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 60px;
  align-items: start;
}
.ys-news .blog-list__link {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: center;
  padding: 22px 4px;
  color: #1b1f24;
}
.ys-news .blog-list__date {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.9;
  color: #7a8290;
}
.ys-news .blog-list__title {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.7;
}

/* ==========================================================================
   11. TOP：ごあいさつ
   実数値: 左1fr + 右460px / gap 80px / align-items:center
           リード 17px/700/lh1.9/#00316B mb22 / 写真 290px + 140px×2 / gap 16px
   ========================================================================== */
.ys-greeting {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 80px;
  align-items: center;
}
.ys-greeting__lead {
  margin: 0 0 22px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
  color: #00316B;
}
.ys-photo-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ys-photo-stack__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ==========================================================================
   12. TOP：各ページのご案内（1pxヘアライン区切りの3列カード）
   実数値: grid 3列 / gap 1px / 背景 #e6e5e6 / border 1px #e6e5e6
           画像 210px / 本文 padding 34px 34px 40px
           英字 Outfit 12px/600/ls .2em/#0585c1 mb6 / 見出し 21px/700 mb14
           説明 14px/lh1.9/#5b636e mb26 / MORE Outfit 12px/ls .16em/#00316B
   ========================================================================== */
.ys-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #e6e5e6;
  border: 1px solid #e6e5e6;
}
.ys-card {
  display: block;
  background: #fff;
  color: #1b1f24;
}
.ys-card:hover { opacity: 1; }
.ys-card__img { overflow: hidden; }
.ys-card__img img { transition: transform 0.6s ease; }
.ys-card:hover .ys-card__img img { transform: scale(1.06); }
/* 写真を左90度回転して枠を埋める（回転前に縦横を入れ替えた寸法を与える） */
.ys-card__img--rot-l {
  position: relative;
  height: 210px;
  container-type: size;
}
.ys-card__img--rot-l img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 210px;  /* container query 非対応時のフォールバック（枠の高さ） */
  height: 426px; /* 同上（1280px 時のカード幅） */
  width: 100cqh;
  height: 100cqw;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.ys-card:hover .ys-card__img--rot-l img { transform: translate(-50%, -50%) rotate(-90deg) scale(1.06); }
.ys-card__body { padding: 34px 34px 40px; }
.ys-card__en {
  margin: 0 0 6px;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.9;
  color: #0585c1;
}
.ys-card__ttl {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.9;
  transition: color 0.3s ease;
}
.ys-card:hover .ys-card__ttl { color: #0585c1; }
.ys-card__desc {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.9;
  color: #5b636e;
}
.ys-card__more {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.9;
  color: #00316B;
}

/* ==========================================================================
   13. TOP：採用情報
   実数値: 左600px + 右1fr / gap 70px / align-items:start
           写真2列 gap 24px（右列 margin-top 80px）
           上下100pxのマスクフェード（mask-image）
           本文 padding-top 90px
           小見出し 16px/700/ls .04em/#5b636e mb26
           キャッチ 40px/700/lh1.5/ls .02em mb40
   ========================================================================== */
.ys-recruit-sec { overflow: hidden; }
.ys-recruit {
  display: grid;
  grid-template-columns: 600px 1fr;
  gap: 70px;
  align-items: start;
}
.ys-recruit__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 100px, #000 calc(100% - 100px), transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.ys-recruit__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ys-recruit__col--offset { margin-top: 80px; }
.ys-recruit__body { padding-top: 90px; }
.ys-recruit__sub {
  margin: 0 0 26px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: #5b636e;
}
.ys-recruit__catch {
  margin: 0 0 40px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #1b1f24;
}

/* ==========================================================================
   14. 下層共通：dl型の情報テーブル（会社概要 / 沿革 / 募集要項）
   実数値: grid 230px 1fr / border-top 1px #e6e5e6
           dt padding 22px 24px / 15px/700 / bg #f7f8f9 / border-bottom 1px
           dd padding 22px 24px / 15px / lh1.9 / border-bottom 1px
   ========================================================================== */
.ys-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 230px 1fr;
  border-top: 1px solid #e6e5e6;
}
.ys-dl__key {
  padding: 22px 24px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
  background: #f7f8f9;
  border-bottom: 1px solid #e6e5e6;
}
.ys-dl__val {
  margin: 0;
  padding: 22px 24px;
  font-size: 15px;
  line-height: 1.9;
  border-bottom: 1px solid #e6e5e6;
}

/* 写真の縦並び（gap 14px） */
.ys-photo-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ==========================================================================
   15. 当社について：製造種目 / 当社の強み
   実数値: 製造種目 grid 440px 1fr / gap 48px
           リスト 2列 / column-gap 40px / 罫線 1px #d8d7d8 / padding 15px 4px
           マーカー 6x6px #0585c1 / 項目 15px/700
           強み grid 400px 1fr / gap 56px（左：写真列／右：テキスト）
           項目 gap 32px で縦積み
           見出し 濃紺帯 #00316B / padding 14px 24px / 白 18px/700
                  連番 Outfit 18px/600/#a8d8f2 + 右罫で区切り
           説明 15px/lh2/#3d454f
   ========================================================================== */
.ys-company-products {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 48px;
  align-items: start;
}
.ys-products {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  border-top: 1px solid #d8d7d8;
}
.ys-products__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 4px;
  border-bottom: 1px solid #d8d7d8;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
  color: #1b1f24;
}
.ys-products__mark {
  width: 6px;
  height: 6px;
  flex: none;
  background: #0585c1;
}
/* 左：写真列 / 右：テキスト */
.ys-strength {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 56px;
  align-items: start;
}
.ys-strength__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* 見出しは「連番 ｜ 項目名」を濃紺の帯に白抜きで載せる */
.ys-strength__ttl {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
  padding: 14px 24px;
  background: #00316B;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: #fff;
}
.ys-strength__num {
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  color: #a8d8f2;
}
.ys-strength__txt {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  color: #3d454f;
  text-wrap: pretty;
}

/* ==========================================================================
   16. 業務内容
   実数値: 各業務 grid 460px 1fr（偶数行は 1fr 460px）/ gap 56px / align-items:center
           padding 56px 0 / 区切り 1px #e6e5e6（gap:1px + 背景色）
           写真 290px / アクセントライン 48x2px（mb24）
           加工事例・案内ボックスは幅 1200px（コンテナ1280とは別幅）
           事例グリッド 4列 / gap 32px 24px / 写真 200px / キャプション 14px mt14
           案内ボックス padding 40px 44px / bg #f7f8f9 / border 1px #e6e5e6
           見出し 19px/700/#00316B mb6
   ========================================================================== */
.ys-svc {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #e6e5e6;
  border-top: 1px solid #e6e5e6;
  border-bottom: 1px solid #e6e5e6;
}
.ys-svc__row {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 56px;
  align-items: center;
  padding: 56px 0;
  background: #fff;
}
.ys-svc__row--reverse { grid-template-columns: 1fr 460px; }

.ys-works {
  width: 1200px;
  margin: 80px auto 0;
}
.ys-works__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}
.ys-works__cap {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: #3d454f;
}
.ys-svc-note {
  width: 1200px;
  margin: 64px auto 0;
  padding: 40px 44px;
  background: #f7f8f9;
  border: 1px solid #e6e5e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ys-svc-note__ttl {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.9;
  color: #00316B;
}
.ys-svc-note__btn { flex: none; }

/* ==========================================================================
   17. 設備紹介
   実数値: 主要設備 grid 3列 / gap 40px 32px / 写真 210px
           設備名 19px/700/#00316B / margin 20px 0 12px
           説明 padding-top 12px / border-top 1px #e6e5e6 / 14px/lh1.9/#5b636e
           その他設備 grid 3列 / gap 1px / bg・border #e0dfe0 / セル padding 22px 24px
   ========================================================================== */
.ys-fac {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
}
.ys-fac__ttl {
  margin: 20px 0 12px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.9;
  color: #00316B;
}
/* 設備名の（80t・145t・135t）等。カッコの途中では折り返さず、
   入りきらないときだけカッコの前で改行させる。 */
.ys-fac__ttl .ys-nowrap {
  display: inline-block;
  white-space: nowrap;
}
.ys-fac__txt {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid #e6e5e6;
  font-size: 14px;
  line-height: 1.9;
  color: #5b636e;
}
.ys-others {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #e0dfe0;
  border: 1px solid #e0dfe0;
}
.ys-others__item {
  padding: 22px 24px;
  background: #fff;
  font-size: 15px;
  line-height: 1.9;
}

/* ==========================================================================
   18. 採用情報
   実数値: 導入 grid 1fr 420px / gap 64px / 写真 300px
           見出し 30px/700/lh1.6/ls .03em/#00316B mb24
           待遇 grid 2列 / gap 28px / カード padding 34px 36px / bg #fff
           カード見出し 18px/700/ls .06em/#0068a8 / 中央揃え
             margin 0 0 14px / padding-bottom 14px / border-bottom 1px #bcdcf0
           カード本文 grid 110px 1fr / gap 26px / アイコン 110x78px（stroke #0585c1）
           本文 14px/lh2/#3d454f
           下段 grid 1fr 1fr / gap 1px / border 1px #e6e5e6 / カード padding 48px 46px
           英字 Outfit 12px/600/ls .2em / 見出し 22px/700 mb18
           電話 Outfit 38px/600/lh1.2/#fff
   ========================================================================== */
.ys-rec-intro {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 64px;
  align-items: start;
}
.ys-rec-intro__ttl {
  margin: 0 0 24px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #00316B;
}
.ys-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.ys-benefit {
  padding: 34px 36px;
  background: #fff;
}
.ys-benefit__ttl {
  margin: 0 0 14px;
  padding-bottom: 14px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: #0068a8;
  border-bottom: 1px solid #bcdcf0;
}
.ys-benefit__body {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 26px;
  align-items: center;
}
.ys-benefit__icon {
  width: 110px;
  height: 78px;
}
.ys-benefit__txt {
  margin: 0;
  font-size: 14px;
  line-height: 2;
  color: #3d454f;
}
.ys-flow2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #e6e5e6;
  border: 1px solid #e6e5e6;
}
.ys-flow2__card {
  padding: 48px 46px;
  background: #fff;
}
.ys-flow2__card--grad {
  background: linear-gradient(151deg, #0585c1 0%, #00316B 100%);
  color: #fff;
}
.ys-flow2__en {
  margin: 0 0 6px;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.2em;
  color: #0585c1;
}
.ys-flow2__en--light { color: #a8d8f2; }
.ys-flow2__ttl {
  margin: 0 0 18px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.9;
}
.ys-flow2__note {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
}
.ys-flow2__tel {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.ys-flow2__hours {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================================
   19. お問い合わせ
   構成: TEL ボックス → フォーム → FAX ボックス の1カラム（最大860px・中央寄せ）
   実数値: リード 16px/lh2.1/#3d454f mb44
           フォーム flex column / gap 28px / 各項目 gap 10px / 2列は gap 24px
           ラベル 14px/700 / 必須 11px/#c0392b（margin-left 8px）
           入力 padding 15px 16px / 15px / border 1px #cfd4da / 角丸なし / bg #fff
           テキストエリア lh1.9 / resize vertical
           連絡先ボックス padding 34px 32px / border 1px #e6e5e6（TEL は bg #f7f8f9）
           英字 Outfit 12px/600/ls .2em/#0585c1 mb6
           電話 Outfit 32px/600/lh1.2/#00316B / FAX Outfit 22px/600
   ========================================================================== */
/* TEL → フォーム → FAX の1カラム。
   フォームの入力欄が間延びしないよう、旧2カラム時の本文幅（836px）を引き継ぐ。 */
.ys-contact {
  max-width: 860px;
  margin: 0 auto;
}
.ys-contact__lead {
  margin: 0 0 44px;
  font-size: 16px;
  line-height: 2.1;
  color: #3d454f;
  text-wrap: pretty;
}
/* --------------------------------------------------------------------------
   CMSメールフォームの見た目上書き（.ys-cmsform）
   CMS は実行時に mail-form.css を後から読み込むため、詳細度で勝てるよう
   .ys-cmsform + 要素セレクタを重ねている（!important は使わない）。
   合わせる先はデザインのフォーム実数値:
     ラベル 14px/700 ＋ 必須 11px/#c0392b（バッジではなく文字）
     入力   padding 15px 16px / 15px / border 1px #cfd4da / 角丸なし / bg #fff
     項目間 28px（ラベル→入力は 10px）
     送信   グラデーション / padding 19px 60px / 16px/700 / 角丸なし / 左寄せ
   -------------------------------------------------------------------------- */
.ys-cmsform .form-contents {
  padding: 0;
  margin: 0;
  background: transparent;
}
.ys-cmsform .form-contents form dl {
  margin-bottom: 28px;
}
/* dt/dd の 280px 段組みを解除して「ラベル上・入力下」の1カラムにする */
.ys-cmsform .form-contents form dl dt:not(.pattern-exclusion) {
  float: none;
  width: auto;
  margin-right: 0;
  padding-top: 0;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
  color: #1b1f24;
}
.ys-cmsform .form-contents form dl dd:not(.pattern-exclusion) {
  padding: 0 0 28px;
  margin-left: 0;
  border-bottom: 0;
  line-height: 1.9;
}
.ys-cmsform .form-contents form dl dd:not(.pattern-exclusion):last-of-type {
  padding-bottom: 0;
}
/* 必須マーク：赤バッジ → デザインの赤文字表記に */
.ys-cmsform .form-contents form dl dt:not(.pattern-exclusion) span.required::before {
  content: "必須";
  padding: 0;
  margin: 0 0 0 8px;
  background: transparent;
  border-radius: 0;
  color: #c0392b;
  font-size: 11px;
  font-weight: 700;
  top: 0;
}
.ys-cmsform .form-contents form dl dt:not(.pattern-exclusion) span.required {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: baseline;
}
/* 入力欄 */
.ys-cmsform .form-contents form dl dd:not(.pattern-exclusion) .textarea,
.ys-cmsform .form-contents form dl dd:not(.pattern-exclusion) .textarea-serect {
  width: 100%;
  padding: 15px 16px;
  font-family: inherit;
  font-size: 15px;
  color: #1b1f24;
  background: #fff;
  border: 1px solid #cfd4da;
  border-radius: 0;
}
.ys-cmsform .form-contents form dl dd:not(.pattern-exclusion) input.textarea {
  height: auto;
}
.ys-cmsform .form-contents form dl dd:not(.pattern-exclusion) select.textarea-serect {
  height: auto;
}
.ys-cmsform .form-contents form dl dd:not(.pattern-exclusion) textarea.textarea {
  line-height: 1.9;
  resize: vertical;
}
.ys-cmsform .form-contents form dl dd:not(.pattern-exclusion) .textarea:focus,
.ys-cmsform .form-contents form dl dd:not(.pattern-exclusion) .textarea-serect:focus {
  border-color: #0585c1;
  outline: none;
}
/* 送信ボタン：デザインのグラデーションボタンに置き換え（封筒アイコンは非表示） */
.ys-cmsform .form-contents form button.submit-btn {
  width: auto;
  margin: 0;
  padding: 19px 60px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(151deg, #0585c1 0%, #00316B 100%);
  border: 0;
  border-radius: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ys-cmsform .form-contents form button.submit-btn:hover {
  background: linear-gradient(151deg, #0585c1 0%, #00316B 100%);
  opacity: 0.88;
  transform: translateY(-2px);
}
.ys-cmsform .form-contents form button.submit-btn::before {
  display: none;
}
/* エラー / 送信完了メッセージ */
.ys-cmsform .form-contents .form-err-msg {
  margin: 0 0 28px;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.9;
  color: #c0392b;
  background: #fdf1f0;
  border: 1px solid #c0392b;
}
.ys-cmsform .form-contents .form-thanks-msg {
  padding: 40px 44px;
  background: #f7f8f9;
  border: 1px solid #e6e5e6;
}
.ys-cmsform .form-contents .form-thanks-msg p {
  font-size: 15px;
  line-height: 2.1;
  color: #3d454f;
}
.ys-cmsform .form-contents .form-thanks-msg .back-home-btn {
  width: auto;
  margin: 28px 0 0;
}
.ys-cmsform .form-contents .form-thanks-msg .back-home-btn a {
  display: inline-block;
  width: auto;
  padding: 18px 34px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  background: linear-gradient(151deg, #0585c1 0%, #00316B 100%);
  border: 0;
  border-radius: 0;
}
.ys-cmsform .form-contents .form-thanks-msg .back-home-btn a:hover {
  background: linear-gradient(151deg, #0585c1 0%, #00316B 100%);
  opacity: 0.88;
}
/* TEL と FAX をフォームの上に横並び。高さは行内で揃える。 */
.ys-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
/* TEL / FAX の2枚は同じ体裁（余白・地色・罫）で揃える */
.ys-info__box {
  padding: 34px 32px;
  background: #f7f8f9;
  border: 1px solid #e6e5e6;
}
.ys-info__en {
  margin: 0 0 6px;
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0.2em;
  color: #0585c1;
}
.ys-info__ttl {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
}
/* 番号は TEL / FAX とも同じ級数・色（TEL のみ a 要素で発信リンク） */
.ys-info__tel,
.ys-info__fax {
  display: block;
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
  color: #00316B;
}
.ys-info__note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.9;
  color: #5b636e;
}

/* ==========================================================================
   20. プライバシーポリシー（お問い合わせページ下部 / #privacy）
   デザインの見出し・本文の語彙をそのまま流用
     小見出し 19px/700/#00316B + 下罫 1px #e6e5e6（設備紹介カードと同じ体裁）
     本文 15px/lh2.1/#3d454f / 幅は container（最大1280px）いっぱいに広げる
   ========================================================================== */
.ys-privacy {
  max-width: none;
}
.ys-privacy__ttl {
  margin: 44px 0 16px;
  padding-bottom: 12px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.9;
  color: #00316B;
  border-bottom: 1px solid #e6e5e6;
}
.ys-privacy__list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}
.ys-privacy__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 2.1;
  color: #3d454f;
}
.ys-privacy__list li::before {
  content: "";
  position: absolute;
  top: 0.85em;
  left: 4px;
  width: 6px;
  height: 6px;
  background: #0585c1;
}
.ys-privacy__date {
  margin: 40px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: #7a8290;
}