@charset "UTF-8";
/*
Theme Name: 株式会社linse
Theme URI: https://linse.jp/
Author: PEEES OSAKA
Description: 株式会社linse（岐阜県山県市／縫製業）専用テーマ。AIテンプレ④ベース、4LINK'Sテーマから派生。
Version: 1.0.0
Text Domain: linse
*/
/* =========================================================
   linse / 変数・mixin
   モチーフ: 2分割（重なり = 感覚の共有）
   制作方針: モバイルファースト（SPを基準に min-width で拡張）
========================================================= */
/* ---------- カラー ---------- */
/* ---------- フォント ---------- */
/* ---------- その他 ---------- */
/* =========================================================
   mixin
   モバイルファーストのため tab / pc / monitor は min-width。
   sp は「SPだけ打ち消したいとき」用の max-width。
========================================================= */
/* =========================================================
   リセット
========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #ffffff;
  color: #111111;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.06em;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  padding-top: 60px;
  padding-bottom: 56px;
}
@media screen and (min-width: 769px) {
  body {
    font-size: 15px;
    padding-top: 76px;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 1025px) {
  body {
    padding-top: 86px;
  }
}
body {
  /* ドロワーを開いているあいだは背面を固定する。
     ドロワーはPC未満（〜1024px）で出るので、その範囲すべてで効かせる。
     position:fixed は iOS でも確実に止まる。ずれるスクロール位置はJSで戻す */
}
@media screen and (max-width: 1024px) {
  body.is-open {
    position: fixed;
    left: 0;
    width: 100%;
    overflow: hidden;
  }
}

img {
  max-width: 100%;
  display: block;
  border: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
p,
dl,
dt,
dd,
figure,
table {
  margin: 0;
}

button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* =========================================================
   ユーティリティ
   ※ 管理画面の「装飾クラス」フィールドから使える
========================================================= */
.u-c-ink {
  color: #111111;
}

.u-c-gray {
  color: #767676;
}

.u-c-white {
  color: #ffffff;
}

.u-c-red {
  color: #aa3333;
}

.u-c-blue {
  color: #33557a;
}

.u-bold {
  font-weight: 700;
}

.u-thin {
  font-weight: 300;
}

.u-serif {
  font-family: "Noto Serif JP", serif;
}

.u-sans {
  font-family: "Noto Sans JP", sans-serif;
}

.u-lg {
  font-size: 1.25em;
}

.u-sm {
  font-size: 0.85em;
}

.u-ls {
  letter-spacing: 0.24em;
}

/* 改行の出し分け */
.br_pc {
  display: none;
}
@media screen and (min-width: 769px) {
  .br_pc {
    display: inline;
  }
}

.br_sp {
  display: inline;
}
@media screen and (min-width: 769px) {
  .br_sp {
    display: none;
  }
}

.pc {
  display: none;
}
@media screen and (min-width: 769px) {
  .pc {
    display: block;
  }
}

.sp {
  display: block;
}
@media screen and (min-width: 769px) {
  .sp {
    display: none;
  }
}

/* =========================================================
   パーシャル
========================================================= */
/* =========================================================
   共通パーツ
   レイアウト / 見出し / ボタン / ヘッダー / フッター /
   下層ページヘッダー / 2分割ブロック / 定義表
========================================================= */
/* ---------------------------------------------------------
   レイアウト
--------------------------------------------------------- */
.wrap {
  width: 88%;
  max-width: 1160px;
  margin-inline: auto;
}
@media screen and (min-width: 1441px) {
  .wrap {
    max-width: 1240px;
  }
}

.wrap-n {
  width: 88%;
  max-width: 880px;
  margin-inline: auto;
}

.sec {
  padding: 64px 0;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .sec {
    padding: 92px 0;
  }
}
@media screen and (min-width: 1025px) {
  .sec {
    padding: 120px 0;
  }
}
.sec.gray {
  background: #f7f6f4;
}
.sec.black {
  background: #111111;
  color: #fff;
}
.sec.black .sec-ttl {
  color: #fff;
}
.sec.black .sec-lead,
.sec.black .txt {
  color: rgba(255, 255, 255, 0.72);
}
.sec.black .en-label {
  color: rgba(255, 255, 255, 0.55);
}
.sec.black .rule {
  background: rgba(255, 255, 255, 0.35);
}

.sec-head {
  margin-bottom: 34px;
}
@media screen and (min-width: 769px) {
  .sec-head {
    margin-bottom: 44px;
  }
}

/* ---------------------------------------------------------
   日本語の折り返し
   SPで「ます。」「る。」など1〜2文字だけ次の行に落ちるのを防ぐ。
   auto-phrase は文節の切れ目で折り返し、balance は行の長さをそろえる。
   未対応のブラウザは無視するだけなので、見た目が壊れることはない。
--------------------------------------------------------- */
.sec-ttl,
.sec-lead,
.mv-ttl,
.mv-lead,
.lead-ttl,
.lead-sub,
.ph-head-jp,
.split-jp,
.split-note,
.st-ttl,
.dg-ttl,
.pillar-ttl,
.code-lead,
.code-name,
.flow-ttl,
.term-ttl,
.privacy-ttl,
.form-label,
.two-jp,
.equip-name,
.code-foot-ttl,
.note-ttl,
.code-ttl,
.form-privacy {
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 長い本文は balance が効かないので、行末の孤立を抑える pretty を使う */
.txt,
.note,
.msg-txt,
.note-txt,
.term-txt,
.flow-txt,
.pillar-txt,
.code-line,
.privacy-txt,
.st-txt,
.two-txt,
.dg-txt,
.equip-txt,
.code-txt,
.code-foot-txt,
.map-note,
.tbl dd {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ---------------------------------------------------------
   見出し
--------------------------------------------------------- */
.rule {
  display: block;
  width: 1px;
  height: 44px;
  background: #d6d6d6;
  margin: 0 auto 22px;
}

.en-label {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: #767676;
  margin-bottom: 14px;
}

.sec-ttl {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.85;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 769px) {
  .sec-ttl {
    font-size: 27px;
  }
}
@media screen and (min-width: 1025px) {
  .sec-ttl {
    font-size: 31px;
  }
}

.sec-lead {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 300;
  line-height: 2.3;
  color: #333333;
}
@media screen and (min-width: 769px) {
  .sec-lead {
    margin-top: 20px;
    font-size: 14px;
  }
}

.txt {
  font-size: 13px;
  font-weight: 300;
  line-height: 2.3;
  color: #333333;
}
.txt + .txt {
  margin-top: 1.5em;
}

.note {
  margin-top: 22px;
  font-size: 12px;
  font-weight: 300;
  line-height: 2.1;
  color: #767676;
}
.note a {
  text-decoration: underline;
}

/* ---------------------------------------------------------
   ボタン・矢印
--------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.9em;
  min-width: 230px;
  padding: 15px 26px;
  border: 1px solid #111111;
  background: #fff;
  color: #111111;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  cursor: pointer;
  transition: background 0.4s cubic-bezier(0.22, 0.8, 0.3, 1), color 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.btn:hover {
  background: #111111;
  color: #fff;
}
.btn.fill {
  background: #111111;
  color: #fff;
}
.btn.fill:hover {
  background: #fff;
  color: #111111;
}
.btn.wh {
  border-color: rgba(255, 255, 255, 0.7);
  background: transparent;
  color: #fff;
}
.btn.wh:hover {
  background: #fff;
  color: #111111;
}
.btn.ghost {
  border-color: #d6d6d6;
  color: #767676;
  min-width: 150px;
}
.btn.ghost:hover {
  background: #f7f6f4;
  color: #111111;
}

.ar {
  position: relative;
  width: 20px;
  height: 1px;
  background: currentColor;
  flex: 0 0 auto;
}
.ar::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ---------------------------------------------------------
   スクロール発火
--------------------------------------------------------- */
.fade {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1s cubic-bezier(0.22, 0.8, 0.3, 1), transform 1s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.fade.on {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------
   ヘッダー
--------------------------------------------------------- */
.hd {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 60;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid #ececec;
  backdrop-filter: saturate(180%) blur(8px);
}
@media screen and (min-width: 769px) {
  .hd {
    height: 76px;
  }
}
@media screen and (min-width: 1025px) {
  .hd {
    height: 86px;
  }
}
.hd .hd-in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
@media screen and (min-width: 769px) {
  .hd .hd-in {
    padding: 0 28px;
  }
}
@media screen and (min-width: 1025px) {
  .hd .hd-in {
    padding: 0 40px;
  }
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
}
.logo .nm {
  font-family: "Noto Serif JP", serif;
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1;
}
@media screen and (min-width: 769px) {
  .logo .nm {
    font-size: 23px;
  }
}
.logo img {
  max-height: 32px;
  width: auto;
}
@media screen and (min-width: 769px) {
  .logo img {
    max-height: 40px;
  }
}

.hd-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
@media screen and (min-width: 1025px) {
  .hd-right {
    gap: 26px;
  }
}

/* ヘッダーの電話番号。SPはドロワー内の .gnav-tel が受け持つ */
.hd-tel {
  display: none;
}
@media screen and (min-width: 1025px) {
  .hd-tel {
    display: block;
    text-align: right;
    line-height: 1.3;
  }
}
.hd-tel .num {
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: opacity 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.hd-tel .num:hover {
  opacity: 0.6;
}
.hd-tel .time {
  margin-top: 4px;
  font-size: 9.5px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: #767676;
}

.burger {
  width: 26px;
  height: 16px;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* ドロワーより前面に置き、開いたままでも押せるようにする */
  z-index: 70;
}
@media screen and (min-width: 1025px) {
  .burger {
    display: none;
  }
}
.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: #111111;
  transform-origin: center;
  /* 開くときの逆再生。上下が先に水平へ戻り、最後に真ん中が出る */
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.16s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.burger span:nth-child(1) {
  top: 0;
}
.burger span:nth-child(2) {
  top: 50%;
  /* 閉じるとき：上下が水平に戻ってから、真ん中が伸びて出てくる */
  transition-delay: 0.24s;
}
.burger span:nth-child(3) {
  bottom: 0;
}
.burger.open span {
  /* 開くとき：真ん中が消えてから、上下が回ってXになる */
  transition: transform 0.38s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.2s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.burger.open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
  transition-delay: 0.14s;
}
.burger.open span:nth-child(2) {
  transform: scaleX(0);
  opacity: 0;
  transition-delay: 0s;
}
.burger.open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
  transition-delay: 0.14s;
}
@media (prefers-reduced-motion: reduce) {
  .burger span {
    transition: none;
    transition-delay: 0s;
  }
}

.gnav {
  position: fixed;
  left: 0;
  top: 60px;
  width: 100%;
  height: calc(100svh - 60px);
  background: #fff;
  padding: 36px 8%;
  z-index: 55;
  /* opacity は使わない。transition に入れないまま 0↔1 を切り替えていたため、
     閉じた瞬間に透明になってアニメーションが一切見えていなかった。
     隠すのは visibility と clip-path だけに任せる */
  visibility: hidden;
  /* 白い面が上から下りてくる。閉じるときは同じ道を戻る。
     ここに書いた値が「閉じるとき」の速さになる（開くときは .open 側で上書き）。
     開くときは 面 → 項目1〜6 → 電話番号 の順。閉じるときはこれを丸ごと逆から流す。
     面は最後。順番は逆再生のまま、閉じるほうだけ詰める（開く 1.04s ／ 閉じる 0.78s） */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.39s cubic-bezier(0.22, 0.8, 0.3, 1) 0.39s, visibility 0.78s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media screen and (min-width: 769px) {
  .gnav {
    top: 76px;
    height: calc(100svh - 76px);
  }
}
@media screen and (min-width: 1025px) {
  .gnav {
    position: static;
    width: auto;
    height: auto;
    background: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    clip-path: none;
    transition: none;
    overflow: visible;
  }
}
.gnav.open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  /* 開くときは、下りる時間をゆっくりめに取る */
  transition: clip-path 0.52s cubic-bezier(0.22, 0.8, 0.3, 1), visibility 0.52s;
}
@media screen and (min-width: 1025px) {
  .gnav ul {
    display: flex;
    align-items: center;
    gap: 26px;
  }
}
.gnav {
  /* 面が下りきるのに合わせて、項目が順に立ち上がる。
     閉じるときも同じ動きで引く。面が上がりはじめるのは項目が引いたあとなので、
     以前のように向きがぶつかって濁ることはない */
}
.gnav li,
.gnav .gnav-tel {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.35s cubic-bezier(0.22, 0.8, 0.3, 1), transform 0.35s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.gnav li:nth-child(1) {
  transition-delay: 0.27s;
}
.gnav li:nth-child(2) {
  transition-delay: 0.23s;
}
.gnav li:nth-child(3) {
  transition-delay: 0.19s;
}
.gnav li:nth-child(4) {
  transition-delay: 0.15s;
}
.gnav li:nth-child(5) {
  transition-delay: 0.11s;
}
.gnav li:nth-child(6) {
  transition-delay: 0.07s;
}
.gnav .gnav-tel {
  transition-delay: 0s;
}
@media screen and (min-width: 1025px) {
  .gnav li,
  .gnav .gnav-tel {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.gnav.open li,
.gnav.open .gnav-tel {
  opacity: 1;
  transform: none;
  transition: opacity 0.46s cubic-bezier(0.22, 0.8, 0.3, 1), transform 0.46s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.gnav.open li:nth-child(1) {
  transition-delay: 0.215s;
}
.gnav.open li:nth-child(2) {
  transition-delay: 0.27s;
}
.gnav.open li:nth-child(3) {
  transition-delay: 0.325s;
}
.gnav.open li:nth-child(4) {
  transition-delay: 0.38s;
}
.gnav.open li:nth-child(5) {
  transition-delay: 0.435s;
}
.gnav.open li:nth-child(6) {
  transition-delay: 0.49s;
}
.gnav.open .gnav-tel {
  transition-delay: 0.58s;
}
@media (prefers-reduced-motion: reduce) {
  .gnav {
    transition: none;
  }
  .gnav li,
  .gnav .gnav-tel {
    transition: none;
    transition-delay: 0s;
  }
}
.gnav li {
  border-bottom: 1px solid #ececec;
}
@media screen and (min-width: 1025px) {
  .gnav li {
    border: 0;
  }
}
.gnav li a {
  display: block;
  padding: 20px 4px;
  text-align: left;
}
@media screen and (min-width: 1025px) {
  .gnav li a {
    padding: 0;
    text-align: center;
  }
}
.gnav li a .jp {
  font-size: 15px;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 1025px) {
  .gnav li a .jp {
    font-size: 12px;
    letter-spacing: 0.14em;
  }
}
.gnav li a small {
  display: block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.34em;
  color: #767676;
  line-height: 1.6;
}
@media screen and (min-width: 1025px) {
  .gnav li a small {
    font-size: 8px;
    letter-spacing: 0.3em;
    margin-top: 2px;
  }
}

.gnav-tel {
  margin-top: 32px;
  text-align: center;
}
@media screen and (min-width: 1025px) {
  .gnav-tel {
    display: none;
  }
}
.gnav-tel .cap {
  display: block;
  font-size: 9px;
  letter-spacing: 0.34em;
  color: #767676;
}
.gnav-tel .num {
  font-family: "Noto Serif JP", serif;
  font-size: 26px;
  letter-spacing: 0.06em;
  line-height: 1.5;
}
.gnav-tel .time {
  font-size: 11px;
  font-weight: 300;
  color: #767676;
}

/* ---------------------------------------------------------
   SP固定CTA
--------------------------------------------------------- */
.sp-cta {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 45;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #ececec;
}
@media screen and (min-width: 769px) {
  .sp-cta {
    display: none;
  }
}
.sp-cta a {
  padding: 15px 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  background: #fff;
}
.sp-cta a + a {
  background: #111111;
  color: #fff;
}

/* ---------------------------------------------------------
   下層ページヘッダー（写真1枚を白線で2分割）
--------------------------------------------------------- */
.ph-head {
  position: relative;
  border-bottom: 1px solid #ececec;
  background: #f7f6f4;
}
.ph-head .ph-head-visual {
  position: relative;
  height: 230px;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .ph-head .ph-head-visual {
    height: 270px;
  }
}
@media screen and (min-width: 1025px) {
  .ph-head .ph-head-visual {
    height: 300px;
  }
}
.ph-head .ph-head-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ph-head .ph-head-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  transform: translateX(-1px);
  z-index: 3;
}
.ph-head .ph-head-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  background: #fff;
  width: 80%;
  max-width: 520px;
  padding: 24px 14px 26px;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .ph-head .ph-head-copy {
    padding: 34px 24px 36px;
  }
}
@media screen and (min-width: 1025px) {
  .ph-head .ph-head-copy {
    max-width: 620px;
    padding: 42px 30px 44px;
  }
}
.ph-head .ph-head-en {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: #767676;
}
.ph-head .ph-head-jp {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.16em;
  margin-top: 8px;
}
@media screen and (min-width: 769px) {
  .ph-head .ph-head-jp {
    font-size: 26px;
  }
}
@media screen and (min-width: 1025px) {
  .ph-head .ph-head-jp {
    font-size: 30px;
  }
}

.crumb {
  padding: 12px 0;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: #767676;
  text-align: center;
}
.crumb span::before {
  content: "／";
  margin: 0 0.6em;
  color: #d6d6d6;
}

/* ---------------------------------------------------------
   2分割ブロック（社名の由来）
   TOPのCONCEPTと会社概要で使い回す
--------------------------------------------------------- */
.split {
  position: relative;
  margin-top: 40px;
  border-top: 1px solid #d6d6d6;
  border-left: 1px solid #d6d6d6;
}
@media screen and (min-width: 769px) {
  .split {
    margin-top: 52px;
  }
}
.split .split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.split .split-grid > li {
  border-right: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
  padding: 38px 10px 46px;
  background: #fff;
}
@media screen and (min-width: 769px) {
  .split .split-grid > li {
    padding: 60px 24px 68px;
  }
}
@media screen and (min-width: 1025px) {
  .split .split-grid > li {
    padding: 80px 40px 90px;
  }
}
.split .split-no {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: #767676;
}
.split .split-jp {
  display: block;
  margin-top: 12px;
  font-family: "Noto Serif JP", serif;
  font-size: 18px;
  letter-spacing: 0.18em;
  line-height: 1.6;
}
@media screen and (min-width: 769px) {
  .split .split-jp {
    font-size: 22px;
  }
}
@media screen and (min-width: 1025px) {
  .split .split-jp {
    font-size: 26px;
  }
}
.split .split-en {
  display: block;
  margin-top: 8px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: #767676;
}
.split {
  /* 写真を敷いたとき。1枚なら全体に、2枚ならマスごとに割れる */
}
.split .split-bg,
.split .split-ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  /* 文字を読ませるための膜 */
}
.split .split-bg img,
.split .split-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split .split-bg::after,
.split .split-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, 0.42);
}
.split.has-img {
  border-color: rgba(255, 255, 255, 0.8);
}
.split.has-img .split-grid > li {
  position: relative;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.8);
}
.split.has-img .split-no,
.split.has-img .split-en {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.78);
}
.split.has-img .split-jp {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.35);
}
.split {
  /* 中央の重なり＝社名 */
}
.split .split-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: #fff;
  border: 1px solid #d6d6d6;
  /* 360px幅の端末で左右のマスの文字に白箱がかぶるため、SPだけ控えめにする */
  padding: 10px 14px;
  display: flex;
  align-items: baseline;
  gap: 0.1em;
}
@media screen and (min-width: 769px) {
  .split .split-logo {
    padding: 16px 30px;
  }
}
.split .split-logo .nm {
  font-family: "Noto Serif JP", serif;
  font-size: 19px;
  letter-spacing: 0.16em;
  line-height: 1;
}
@media screen and (min-width: 769px) {
  .split .split-logo .nm {
    font-size: 26px;
  }
}
@media screen and (min-width: 1025px) {
  .split .split-logo .nm {
    font-size: 30px;
  }
}

.split-note {
  margin-top: 28px;
  font-size: 13px;
  font-weight: 300;
  line-height: 2.4;
  color: #333333;
}
@media screen and (min-width: 769px) {
  .split-note {
    margin-top: 38px;
    font-size: 14px;
  }
}
.split-note em {
  font-style: normal;
  font-family: "Noto Serif JP", serif;
  letter-spacing: 0.08em;
}

/* ---------------------------------------------------------
   定義表（会社概要 / ご依頼について）
--------------------------------------------------------- */
.tbl {
  width: 100%;
  border-top: 1px solid #d6d6d6;
  text-align: left;
}
.tbl dl {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  border-bottom: 1px solid #d6d6d6;
}
@media screen and (min-width: 769px) {
  .tbl dl {
    grid-template-columns: 8.5em 1fr;
  }
}
.tbl dt {
  padding: 16px 8px 16px 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #767676;
  line-height: 2.1;
}
@media screen and (min-width: 769px) {
  .tbl dt {
    padding: 20px 12px 20px 0;
    font-size: 12px;
  }
}
.tbl dd {
  padding: 16px 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 2.1;
  color: #333333;
}
@media screen and (min-width: 769px) {
  .tbl dd {
    padding: 20px 0;
  }
}

/* ---------------------------------------------------------
   フッター
--------------------------------------------------------- */
.ft {
  padding: 56px 0 30px;
  text-align: center;
  border-top: 1px solid #ececec;
}
@media screen and (min-width: 769px) {
  .ft {
    padding: 72px 0 36px;
  }
}
.ft .ft-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
}
.ft .ft-logo .nm {
  font-family: "Noto Serif JP", serif;
  font-size: 22px;
  letter-spacing: 0.16em;
  line-height: 1;
}
.ft .ft-logo img {
  max-height: 40px;
  width: auto;
}
.ft .ft-info {
  margin-top: 20px;
  font-size: 12px;
  font-weight: 300;
  line-height: 2.1;
  color: #333333;
}
.ft .ft-nav {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
}
@media screen and (min-width: 769px) {
  .ft .ft-nav {
    gap: 14px 28px;
  }
}
.ft .ft-nav a {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #333333;
}
.ft .ft-link {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid #ececec;
}
.ft .ft-link .cap {
  display: block;
  font-size: 9px;
  letter-spacing: 0.34em;
  color: #767676;
  margin-bottom: 12px;
}
.ft .ft-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  border: 1px solid #d6d6d6;
  padding: 12px 22px;
  font-size: 12px;
  letter-spacing: 0.14em;
  transition: border-color 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.ft .ft-link a:hover {
  border-color: #111111;
}
.ft .copy {
  margin-top: 30px;
  font-size: 9px;
  letter-spacing: 0.24em;
  color: #767676;
}

/* ---------------------------------------------------------
   汎用ページ・404
--------------------------------------------------------- */
.page-default .entry {
  text-align: left;
  font-size: 13px;
  font-weight: 300;
  line-height: 2.3;
  color: #333333;
}
.page-default .entry p + p {
  margin-top: 1.5em;
}
.page-default .entry a {
  text-decoration: underline;
}

/* =========================================================
   TOPページ
   MV / LEAD / CONCEPT / STRENGTH / DIGEST / MESSAGE / CONTACT
========================================================= */
/* ---------------------------------------------------------
   MV : 1枚の写真を白線で「2分割」／左に暗幕＋コピー
--------------------------------------------------------- */
.mv {
  position: relative;
}
.mv .mv-visual {
  --mv-x: 52%;
  position: relative;
  height: calc(100svh - 60px);
  min-height: 460px;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .mv .mv-visual {
    --mv-x: 50%;
    height: calc(100svh - 76px);
  }
}
@media screen and (min-width: 1025px) {
  .mv .mv-visual {
    --mv-x: 48%;
    height: calc(100svh - 86px);
    min-height: 560px;
  }
}
@media screen and (min-width: 1441px) {
  .mv .mv-visual {
    min-height: 640px;
  }
}
.mv {
  /* 3枚を重ねて置き、JSが .is-on を付け替えて入れ替える */
}
.mv .mv-slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.mv .mv-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.22, 0.8, 0.3, 1);
  /* ゆっくり寄っていく。切り替わった枚だけ動かす */
}
.mv .mv-slide.is-on {
  opacity: 1;
}
.mv .mv-slide.is-on .mv-img {
  animation: mv-zoom 8s linear both;
}
.mv .mv-slide picture {
  display: block;
  position: absolute;
  inset: 0;
}
.mv .mv-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mv .mv-copy {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--mv-x);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 14px 0 18px;
  color: #fff;
  background: linear-gradient(to top right, rgba(17, 17, 17, 0.76), rgba(17, 17, 17, 0.3));
}
@media screen and (min-width: 769px) {
  .mv .mv-copy {
    padding: 0 24px 0 34px;
  }
}
@media screen and (min-width: 1025px) {
  .mv .mv-copy {
    padding: 0 28px 0 clamp(40px, 4.2vw, 72px);
  }
}
.mv .mv-en {
  font-size: 9px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 14px;
}
@media screen and (min-width: 769px) {
  .mv .mv-en {
    margin-bottom: 18px;
    font-size: 10px;
  }
}
@media screen and (min-width: 1025px) {
  .mv .mv-en {
    margin-bottom: 20px;
    font-size: 11px;
  }
}
.mv .mv-ttl {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(17px, 5.2vw, 23px);
  line-height: 1.95;
  letter-spacing: 0.12em;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.3);
}
@media screen and (min-width: 769px) {
  .mv .mv-ttl {
    font-size: 28px;
  }
}
@media screen and (min-width: 1025px) {
  .mv .mv-ttl {
    font-size: 50px;
    line-height: 1.7;
    letter-spacing: 0.14em;
  }
}
@media screen and (min-width: 1441px) {
  .mv .mv-ttl {
    font-size: 58px;
  }
}
.mv .mv-ttl span {
  display: block;
}
.mv {
  /* キャッチとサブコピーのあいだの短い罫 */
}
.mv .mv-rule {
  display: block;
  width: 34px;
  height: 1px;
  background: rgba(255, 255, 255, 0.55);
  margin-top: 18px;
}
@media screen and (min-width: 769px) {
  .mv .mv-rule {
    width: 44px;
    margin-top: 24px;
  }
}
@media screen and (min-width: 1025px) {
  .mv .mv-rule {
    width: 64px;
    margin-top: 26px;
  }
}
.mv .mv-lead {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.3);
}
@media screen and (min-width: 769px) {
  .mv .mv-lead {
    margin-top: 18px;
    font-size: 13px;
    line-height: 2.2;
  }
}
@media screen and (min-width: 1025px) {
  .mv .mv-lead {
    margin-top: 16px;
    font-size: 16px;
    line-height: 2.1;
  }
}
@media screen and (min-width: 1441px) {
  .mv .mv-lead {
    font-size: 17px;
  }
}
.mv {
  /* 得意な領域を short caps で並べる */
}
.mv .mv-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}
@media screen and (min-width: 769px) {
  .mv .mv-tags {
    gap: 8px 10px;
    margin-top: 24px;
  }
}
@media screen and (min-width: 1025px) {
  .mv .mv-tags {
    margin-top: 28px;
  }
}
.mv .mv-tags li {
  border: 1px solid rgba(255, 255, 255, 0.38);
  padding: 4px 8px;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: rgba(255, 255, 255, 0.76);
}
@media screen and (min-width: 769px) {
  .mv .mv-tags li {
    padding: 5px 12px;
    font-size: 9.5px;
  }
}
@media screen and (min-width: 1025px) {
  .mv .mv-tags li {
    padding: 6px 14px;
    font-size: 11px;
  }
}
.mv {
  /* 分割の白線（縦1本） */
}
.mv .mv-line {
  position: absolute;
  left: var(--mv-x);
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
  transform: translateX(-1px);
  z-index: 4;
}
.mv {
  /* 読み込み時に2区画が左右へ開いて1枚になる */
}
.mv .mv-half {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: 5;
}
.mv .mv-half.l {
  left: 0;
  width: var(--mv-x);
}
.mv .mv-half.r {
  right: 0;
  width: calc(100% - var(--mv-x));
}
.mv .mv-scroll {
  position: absolute;
  right: 14px;
  bottom: 20px;
  z-index: 6;
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media screen and (min-width: 769px) {
  .mv .mv-scroll {
    right: 22px;
    bottom: 26px;
  }
}
.mv .mv-scroll .bar {
  display: block;
  width: 1px;
  height: 46px;
  background: rgba(255, 255, 255, 0.7);
}
.mv {
  /* JSが .is-ready を付けてから動かす。JS無効時は白い2枚を出さない */
}
.mv .mv-visual.is-ready .mv-half.l {
  animation: mv-open-l 1.15s cubic-bezier(0.22, 0.8, 0.3, 1) 0.15s both;
}
.mv .mv-visual.is-ready .mv-half.r {
  animation: mv-open-r 1.15s cubic-bezier(0.22, 0.8, 0.3, 1) 0.15s both;
}
.mv .mv-visual.is-ready .mv-en {
  animation: mv-in 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) 0.95s both;
}
.mv .mv-visual.is-ready .mv-ttl {
  animation: mv-in 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) 1.1s both;
}
.mv .mv-visual.is-ready .mv-rule {
  animation: mv-in 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) 1.25s both;
}
.mv .mv-visual.is-ready .mv-lead {
  animation: mv-in 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) 1.35s both;
}
.mv .mv-visual.is-ready .mv-tags {
  animation: mv-in 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) 1.5s both;
}
.mv .mv-visual:not(.is-ready) .mv-half {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .mv .mv-visual.is-ready .mv-half {
    display: none;
  }
  .mv .mv-visual.is-ready .mv-en,
  .mv .mv-visual.is-ready .mv-ttl,
  .mv .mv-visual.is-ready .mv-rule,
  .mv .mv-visual.is-ready .mv-lead,
  .mv .mv-visual.is-ready .mv-tags {
    animation: none;
  }
  .mv .mv-visual .mv-slide {
    transition: none;
  }
  .mv .mv-visual .mv-slide.is-on .mv-img {
    animation: none;
  }
}

@keyframes mv-open-l {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-101%);
  }
}
@keyframes mv-open-r {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(101%);
  }
}
@keyframes mv-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes mv-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}
/* ---------------------------------------------------------
   LEAD
--------------------------------------------------------- */
.lead {
  padding: 64px 0 10px;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .lead {
    padding: 88px 0 10px;
  }
}
@media screen and (min-width: 1025px) {
  .lead {
    padding: 120px 0 10px;
  }
}
.lead .lead-en {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: #767676;
}
.lead .lead-ttl {
  margin-top: 18px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.95;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 769px) {
  .lead .lead-ttl {
    font-size: 30px;
  }
}
@media screen and (min-width: 1025px) {
  .lead .lead-ttl {
    font-size: 38px;
  }
}
.lead .lead-ttl span {
  display: block;
}
.lead .lead-sub {
  margin-top: 22px;
  font-size: 13px;
  font-weight: 300;
  line-height: 2.4;
  color: #333333;
}
@media screen and (min-width: 769px) {
  .lead .lead-sub {
    margin-top: 26px;
    font-size: 14px;
  }
}

/* ---------------------------------------------------------
   CONCEPT
   2分割ブロック本体は _common.scss の .split
--------------------------------------------------------- */
@media screen and (min-width: 769px) {
  #concept .split {
    margin-top: 56px;
  }
}

/* ---------------------------------------------------------
   STRENGTH
--------------------------------------------------------- */
.st {
  display: grid;
  gap: 0;
  border-top: 1px solid #d6d6d6;
}
@media screen and (min-width: 769px) {
  .st {
    grid-template-columns: repeat(3, 1fr);
    border-left: 1px solid #d6d6d6;
  }
}
.st .st-item {
  padding: 38px 6px;
  border-bottom: 1px solid #d6d6d6;
}
@media screen and (min-width: 769px) {
  .st .st-item {
    padding: 48px 26px;
    border-right: 1px solid #d6d6d6;
  }
}
@media screen and (min-width: 1025px) {
  .st .st-item {
    padding: 58px 34px;
  }
}
.st .st-no {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: #767676;
}
.st .st-key {
  display: block;
  margin-top: 10px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: #767676;
}
.st .st-ttl {
  margin-top: 14px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.85;
  letter-spacing: 0.08em;
}
@media screen and (min-width: 769px) {
  .st .st-ttl {
    font-size: 18px;
  }
}
.st .st-txt {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 300;
  line-height: 2.3;
  color: #333333;
}

/* ---------------------------------------------------------
   DIGEST : 下層への導線
--------------------------------------------------------- */
.dg {
  display: grid;
  gap: 34px;
}
@media screen and (min-width: 769px) {
  .dg {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}
@media screen and (min-width: 1025px) {
  .dg {
    gap: 36px;
  }
}
.dg .dg-item {
  text-align: left;
}
.dg .dg-item:hover .dg-more .ar {
  width: 30px;
}
.dg .dg-item:hover .dg-img img {
  transform: scale(1.05);
}
.dg .dg-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #f7f6f4;
}
.dg .dg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.dg .dg-body {
  padding: 18px 2px 0;
}
.dg .dg-en {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: #767676;
}
.dg .dg-ttl {
  margin-top: 8px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.12em;
}
.dg .dg-txt {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2.2;
  color: #333333;
}
.dg .dg-more {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
}
.dg .dg-more .ar {
  transition: width 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}

/* ---------------------------------------------------------
   MESSAGE
--------------------------------------------------------- */
.msg-inner {
  margin-top: 8px;
}
@media screen and (min-width: 769px) {
  .msg-inner {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 40px;
    align-items: center;
    text-align: left;
  }
}
@media screen and (min-width: 1025px) {
  .msg-inner {
    gap: 60px;
  }
}
.msg-inner .msg-img {
  aspect-ratio: 3/2;
  overflow: hidden;
  background: #f7f6f4;
}
.msg-inner .msg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.msg-inner .msg-body {
  padding-top: 26px;
}
@media screen and (min-width: 769px) {
  .msg-inner .msg-body {
    padding-top: 0;
  }
}
.msg-inner .msg-txt {
  font-size: 13px;
  font-weight: 300;
  line-height: 2.4;
  color: #333333;
}
.msg-inner .msg-txt + .msg-txt {
  margin-top: 1.5em;
}
.msg-inner .msg-name {
  margin-top: 26px;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #767676;
}
.msg-inner .msg-name strong {
  display: block;
  margin-top: 6px;
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #111111;
}

/* ---------------------------------------------------------
   CONTACT（黒地）
--------------------------------------------------------- */
.contact {
  background: #111111;
  color: #fff;
  padding: 70px 0;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .contact {
    padding: 100px 0;
  }
}
.contact .rule {
  background: rgba(255, 255, 255, 0.35);
}
.contact .en-label {
  color: rgba(255, 255, 255, 0.55);
}
.contact .sec-ttl {
  color: #fff;
}
.contact .sec-lead {
  color: rgba(255, 255, 255, 0.72);
}
.contact .ct-tel {
  margin-top: 34px;
}
.contact .ct-tel .cap {
  display: block;
  font-size: 9px;
  letter-spacing: 0.34em;
  color: rgba(255, 255, 255, 0.55);
}
.contact .ct-tel .num {
  display: block;
  margin-top: 6px;
  font-family: "Noto Serif JP", serif;
  font-size: 30px;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
@media screen and (min-width: 769px) {
  .contact .ct-tel .num {
    font-size: 36px;
  }
}
@media screen and (min-width: 1025px) {
  .contact .ct-tel .num {
    font-size: 40px;
  }
}
.contact .ct-tel .time {
  font-size: 11px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
}
.contact .ct-btn {
  margin-top: 30px;
}

/* =========================================================
   会社概要
   想い / 社名の由来（.split は _common.scss）/ 概要表 / アクセス
========================================================= */
.page-company .company-msg .sec-ttl {
  margin-bottom: 0;
}
.page-company .company-msg .company-msg-body {
  margin-top: 26px;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .page-company .company-msg .company-msg-body {
    text-align: center;
  }
}
.page-company .company-origin .split-note em {
  font-family: "Noto Serif JP", serif;
  font-style: normal;
  letter-spacing: 0.08em;
}
.page-company .company-access .map {
  margin-top: 30px;
  aspect-ratio: 16/10;
  background: #f7f6f4;
}
.page-company .company-access .map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.page-company .company-access .map .map-empty {
  width: 100%;
  height: 100%;
  border: 1px solid #d6d6d6;
  background: repeating-linear-gradient(-45deg, #eeecea 0 8px, #e6e3df 8px 16px);
}
.page-company .company-access .map-note {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 300;
  color: #767676;
}

/* =========================================================
   営業内容
   リード / TWO SIDES（2分割・黒地）/ 対応アイテム / 保有設備 / ご依頼について
========================================================= */
.page-business .business-lead .business-lead-body {
  margin-top: 26px;
}
.page-business .business-btn {
  margin-top: 26px;
}

/* ---------------------------------------------------------
   汎用2列グリッド（受け取る／縫う）
   4分割の .grid4 を置き換えたもの。全幅で2列固定。
--------------------------------------------------------- */
.two {
  display: grid;
  /* SPは1列。2列にすると本文が1行11字ほどになって読めない */
  grid-template-columns: 1fr;
  border-top: 1px solid #d6d6d6;
  border-left: 1px solid #d6d6d6;
  margin-top: 34px;
}
@media screen and (min-width: 769px) {
  .two {
    grid-template-columns: 1fr 1fr;
  }
}
.two > li {
  border-right: 1px solid #d6d6d6;
  border-bottom: 1px solid #d6d6d6;
  padding: 30px 14px 34px;
}
@media screen and (min-width: 769px) {
  .two > li {
    padding: 44px 26px 48px;
  }
}
@media screen and (min-width: 1025px) {
  .two > li {
    padding: 56px 36px 60px;
  }
}
.two .two-no {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: #767676;
}
.two .two-jp {
  display: block;
  margin-top: 10px;
  font-family: "Noto Serif JP", serif;
  font-size: 17px;
  letter-spacing: 0.14em;
  line-height: 1.7;
}
@media screen and (min-width: 769px) {
  .two .two-jp {
    font-size: 19px;
  }
}
.two .two-txt {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2.1;
  color: #333333;
}

.sec.black .two {
  border-color: rgba(255, 255, 255, 0.22);
}
.sec.black .two > li {
  border-color: rgba(255, 255, 255, 0.22);
}
.sec.black .two .two-no,
.sec.black .two .two-txt {
  color: rgba(255, 255, 255, 0.65);
}
.sec.black .two .two-jp {
  color: #fff;
}

/* ---------------------------------------------------------
   対応アイテム
--------------------------------------------------------- */
.item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #d6d6d6;
  border: 1px solid #d6d6d6;
  margin-top: 30px;
}
@media screen and (min-width: 769px) {
  .item {
    grid-template-columns: repeat(4, 1fr);
  }
}
.item > li {
  background: #fff;
  padding: 24px 8px;
}
@media screen and (min-width: 769px) {
  .item > li {
    padding: 30px 10px;
  }
}
.item .jp {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  letter-spacing: 0.14em;
}
.item .en {
  display: block;
  margin-top: 6px;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #767676;
}

/* ---------------------------------------------------------
   保有設備
--------------------------------------------------------- */
.equip {
  margin-top: 30px;
  border-top: 1px solid #d6d6d6;
  text-align: left;
}
.equip .equip-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 18px 2px;
  border-bottom: 1px solid #d6d6d6;
}
@media screen and (min-width: 769px) {
  .equip .equip-row {
    grid-template-columns: 1fr 2fr;
    gap: 0 26px;
    align-items: start;
    padding: 24px 4px;
  }
}
.equip .equip-name {
  font-family: "Noto Serif JP", serif;
  font-size: 15px;
  letter-spacing: 0.1em;
}
.equip .equip-meta {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: #767676;
}
@media screen and (min-width: 769px) {
  .equip .equip-meta {
    grid-column: 1;
  }
}
.equip .equip-txt {
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2;
  color: #333333;
}
@media screen and (min-width: 769px) {
  .equip .equip-txt {
    grid-row: 1/span 2;
    grid-column: 2;
  }
}

/* 差し替え待ちの案内枠。内容が確定したらACFの欄を空にすると枠ごと消える */
/* =========================================================
   納品の流れ
   ステップのカードを縦に並べ、短い縦線でつなぐ ＋ 期間の補足ボックス
========================================================= */
.page-flow .flow {
  margin-top: 34px;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .page-flow .flow {
    margin-top: 44px;
  }
}
.page-flow .flow-item {
  position: relative;
  border: 1px solid #d6d6d6;
  padding: 26px 20px;
  background: #fff;
  /* カードとカードのあいだを1本の縦線でつなぐ */
}
@media screen and (min-width: 769px) {
  .page-flow .flow-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    padding: 32px 34px;
  }
}
@media screen and (min-width: 1025px) {
  .page-flow .flow-item {
    padding: 38px 44px;
  }
}
.page-flow .flow-item + .flow-item {
  margin-top: 34px;
}
.page-flow .flow-item + .flow-item::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -24px;
  width: 1px;
  height: 24px;
  background: #111111;
}
@media screen and (min-width: 769px) {
  .page-flow .flow-head {
    /* 「（裁断・縫製・仕上げ）」が折り返しても収まる幅を確保する */
    width: 250px;
    flex-shrink: 0;
  }
}
@media screen and (min-width: 1025px) {
  .page-flow .flow-head {
    width: 260px;
  }
}
@media screen and (min-width: 769px) {
  .page-flow .flow-body {
    flex: 1;
  }
}
.page-flow .flow-no {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: #767676;
  text-align: center;
}
.page-flow .flow-ttl {
  margin-top: 8px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.12em;
  line-height: 1.8;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .page-flow .flow-ttl {
    font-size: 19px;
  }
}
.page-flow .flow-txt {
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2.15;
  color: #333333;
}
@media screen and (min-width: 769px) {
  .page-flow .flow-txt {
    margin-top: 0;
  }
}
.page-flow .flow-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #ececec;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #767676;
}
.page-flow {
  /* ---------- 期間の補足 ---------- */
}
.page-flow .term {
  margin-top: 44px;
  border: 1px solid #d6d6d6;
  padding: 28px 18px;
}
@media screen and (min-width: 769px) {
  .page-flow .term {
    margin-top: 58px;
    padding: 38px 40px;
  }
}
.page-flow .term .term-ttl {
  font-family: "Noto Serif JP", serif;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-align: center;
}
@media screen and (min-width: 769px) {
  .page-flow .term .term-ttl {
    font-size: 18px;
  }
}
.page-flow .term .term-txt {
  margin-top: 14px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2.2;
  color: #333333;
}
@media screen and (min-width: 769px) {
  .page-flow .term .term-txt {
    margin-top: 20px;
  }
}
.page-flow .term .term-txt + .term-txt {
  margin-top: 1.4em;
}

/* =========================================================
   コンプライアンス
   私たちの姿勢（柱・受け入れについて）/ 行動規範 / 人権方針
========================================================= */
.page-compliance {
  /* アンカーで飛んだときに固定ヘッダーへ潜り込ませない */
}
.page-compliance .sec[id] {
  scroll-margin-top: 60px;
}
@media screen and (min-width: 769px) {
  .page-compliance .sec[id] {
    scroll-margin-top: 76px;
  }
}
@media screen and (min-width: 1025px) {
  .page-compliance .sec[id] {
    scroll-margin-top: 86px;
  }
}
.page-compliance {
  /* ---------- 私たちの姿勢 ---------- */
}
.page-compliance .pillar {
  margin-top: 34px;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .page-compliance .pillar {
    margin-top: 44px;
  }
}
.page-compliance .pillar-item {
  border-top: 1px solid #d6d6d6;
  padding: 32px 4px;
}
@media screen and (min-width: 769px) {
  .page-compliance .pillar-item {
    padding: 44px 8px;
  }
}
.page-compliance .pillar-item:last-child {
  border-bottom: 1px solid #d6d6d6;
}
.page-compliance .pillar-no {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: #767676;
}
.page-compliance .pillar-ttl {
  margin-top: 8px;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.1em;
  line-height: 1.85;
}
@media screen and (min-width: 769px) {
  .page-compliance .pillar-ttl {
    font-size: 21px;
  }
}
.page-compliance .pillar-txt {
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2.2;
  color: #333333;
}
.page-compliance .pillar-list {
  margin-top: 16px;
}
.page-compliance .pillar-list li {
  position: relative;
  padding-left: 1.2em;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2.1;
  color: #333333;
}
.page-compliance .pillar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 8px;
  height: 1px;
  background: #111111;
}
.page-compliance {
  /* ---------- 行動規範 / 人権方針 ---------- */
}
.page-compliance .code-lead {
  text-align: left;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2.3;
  color: #333333;
}
@media screen and (min-width: 769px) {
  .page-compliance .code-lead {
    font-size: 13px;
  }
}
.page-compliance .code-list {
  margin-top: 30px;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .page-compliance .code-list {
    margin-top: 40px;
  }
}
.page-compliance .code-item + .code-item {
  margin-top: 34px;
}
@media screen and (min-width: 769px) {
  .page-compliance .code-item + .code-item {
    margin-top: 46px;
  }
}
.page-compliance .code-ttl {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding-bottom: 13px;
  border-bottom: 1px solid #d6d6d6;
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.12em;
  line-height: 1.75;
  /* 見出し下の短いアクセント罫 */
}
@media screen and (min-width: 769px) {
  .page-compliance .code-ttl {
    gap: 14px;
    font-size: 18px;
  }
}
.page-compliance .code-ttl::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 52px;
  height: 1px;
  background: #111111;
}
@media screen and (min-width: 769px) {
  .page-compliance .code-ttl::after {
    width: 64px;
  }
}
.page-compliance .code-no {
  flex: none;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: #767676;
}
.page-compliance .code-txt {
  margin-top: 15px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2.2;
  color: #333333;
  /* 一文ずつが独立しているので、行の間を空ける */
  /* 人権方針・プライバシーポリシーへの送り */
}
@media screen and (min-width: 769px) {
  .page-compliance .code-txt {
    margin-top: 18px;
  }
}
.page-compliance .code-txt .code-line + .code-line {
  margin-top: 0.85em;
}
.page-compliance .code-txt a {
  color: #111111;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: opacity 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.page-compliance .code-txt a:hover {
  opacity: 0.55;
}
.page-compliance {
  /* ---------- 規範を実行するために ---------- */
}
.page-compliance .code-foot {
  margin-top: 44px;
  border-top: 1px solid #111111;
  padding-top: 26px;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .page-compliance .code-foot {
    margin-top: 58px;
    padding-top: 32px;
  }
}
.page-compliance .code-foot-ttl {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.12em;
  line-height: 1.75;
}
@media screen and (min-width: 769px) {
  .page-compliance .code-foot-ttl {
    font-size: 18px;
  }
}
.page-compliance .code-foot-txt {
  margin-top: 15px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2.2;
  color: #333333;
}
@media screen and (min-width: 769px) {
  .page-compliance .code-foot-txt {
    margin-top: 18px;
  }
}
.page-compliance .code-foot-txt .code-line + .code-line {
  margin-top: 0.85em;
}

/* ---------------------------------------------------------
   ページ内リンク
--------------------------------------------------------- */
.anchor {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
@media screen and (min-width: 769px) {
  .anchor {
    gap: 14px;
    margin-top: 34px;
  }
}
.anchor a {
  border: 1px solid #d6d6d6;
  padding: 9px 16px;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  line-height: 1.9;
  transition: border-color 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}
@media screen and (min-width: 769px) {
  .anchor a {
    padding: 10px 24px;
    font-size: 11.5px;
  }
}
.anchor a:hover {
  border-color: #111111;
}

/* ---------------------------------------------------------
   囲みボックス（外国人技能実習生の受け入れについて）
--------------------------------------------------------- */
.note-box {
  margin-top: 40px;
  border: 1px solid #d6d6d6;
  padding: 26px 18px;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .note-box {
    margin-top: 52px;
    padding: 32px 30px;
  }
}
.note-box .note-ttl {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.8;
}
@media screen and (min-width: 769px) {
  .note-box .note-ttl {
    font-size: 17px;
  }
}
.note-box .note-txt {
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2.2;
  color: #333333;
}
.note-box .note-txt + .note-txt {
  margin-top: 1.2em;
}

/* =========================================================
   お問い合わせ（入力 / 確認 / 完了）
   フォーム本体は Contact Form 7。
   CF7側も .form-row / .form-label / .form-field で組んでいるので、
   見本と実フォームで同じスタイルが当たる（cf7-contact-form.txt 参照）。
========================================================= */
/* ---------------------------------------------------------
   ステップインジケーター
--------------------------------------------------------- */
.step {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 34px;
}
.step li {
  flex: 1;
  max-width: 150px;
  padding: 10px 4px;
  border-top: 2px solid #ececec;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #767676;
}
.step li.on {
  border-top-color: #111111;
  color: #111111;
  font-weight: 500;
}

/* ---------------------------------------------------------
   フォーム
--------------------------------------------------------- */
.form {
  margin-top: 10px;
  text-align: left;
}
.form .form-row {
  border-bottom: 1px solid #ececec;
  padding: 20px 0;
}
@media screen and (min-width: 769px) {
  .form .form-row {
    display: grid;
    grid-template-columns: 11em 1fr;
    gap: 0 24px;
    align-items: start;
    padding: 24px 0;
  }
}
.form .form-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
@media screen and (min-width: 769px) {
  .form .form-label {
    margin-bottom: 0;
    padding-top: 12px;
  }
}
.form input[type=text],
.form input[type=email],
.form input[type=tel],
.form textarea,
.form select {
  width: 100%;
  border: 1px solid #d6d6d6;
  background: #fff;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.9;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.form select {
  background-image: linear-gradient(45deg, transparent 50%, #111111 50%), linear-gradient(135deg, #111111 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.form textarea {
  min-height: 150px;
  resize: vertical;
}
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: 1px solid #111111;
  border-color: #111111;
}

/* ---------- 必須・任意のバッジ ---------- */
.form-label .red {
  background: #aa3333;
  color: #fff;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  line-height: 1.6;
  flex: 0 0 auto;
}
.form-label .blue {
  border: 1px solid #d6d6d6;
  color: #767676;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 1px 7px;
  line-height: 1.6;
  flex: 0 0 auto;
}

/* ---------- プライバシーポリシーへの同意 ---------- */
.form-privacy {
  margin-top: 26px;
  border: 1px solid #ececec;
  background: #f7f6f4;
  padding: 18px 14px;
  font-size: 12px;
  font-weight: 300;
  line-height: 2.1;
  color: #333333;
  text-align: center;
}
.form-privacy a {
  text-decoration: underline;
}

.form-check {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12.5px;
  /* CF7 のチェックボックスは span.wpcf7-list-item で包まれる */
}
.form-check label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.form-check .wpcf7-list-item {
  margin: 0;
}

/* ---------- 送信ボタン ---------- */
.form-submit {
  margin-top: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* 確認画面は「修正する」と「送信する」が並ぶ。SPでは送信を上に置く */
}
@media screen and (min-width: 769px) {
  .form-submit {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
}
.form-submit.form-submit-confirm {
  flex-direction: column-reverse;
}
@media screen and (min-width: 769px) {
  .form-submit.form-submit-confirm {
    flex-direction: row;
  }
}

/* ---------------------------------------------------------
   確認画面
--------------------------------------------------------- */
.conf .form-row {
  padding: 18px 0;
}
@media screen and (min-width: 769px) {
  .conf .form-row {
    padding: 22px 0;
  }
}
.conf .form-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #767676;
  margin-bottom: 0;
}
@media screen and (min-width: 769px) {
  .conf .form-label {
    padding-top: 2px;
  }
}
.conf .form-value {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 300;
  line-height: 2.1;
  /* 改行を含む問い合わせ内容をそのまま見せる */
  white-space: pre-wrap;
}
@media screen and (min-width: 769px) {
  .conf .form-value {
    margin-top: 0;
  }
}

/* ---------------------------------------------------------
   完了画面
--------------------------------------------------------- */
.done {
  text-align: center;
  padding: 10px 0 0;
}
.done .done-mark {
  width: 54px;
  height: 54px;
  border: 1px solid #111111;
  border-radius: 50%;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.done .done-mark span {
  display: block;
  width: 16px;
  height: 8px;
  border-left: 1px solid #111111;
  border-bottom: 1px solid #111111;
  transform: rotate(-45deg) translateY(-2px);
}
.done .txt {
  margin-top: 26px;
}
.done .done-btn {
  margin-top: 34px;
}

/* ---------------------------------------------------------
   Contact Form 7 の出力調整
   ※ wpcf7_autop は functions.php で無効化済み
--------------------------------------------------------- */
.form--live {
  /* 送信ボタン */
  /* 「入力内容を修正する」（前のステップへ戻る） */
}
.form--live .wpcf7-form-control-wrap {
  display: block;
}
.form--live input[type=submit],
.form--live button[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 230px;
  padding: 15px 26px;
  border: 1px solid #111111;
  background: #111111;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background 0.4s cubic-bezier(0.22, 0.8, 0.3, 1), color 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.form--live input[type=submit]:hover,
.form--live button[type=submit]:hover {
  background: #fff;
  color: #111111;
}
.form--live input[type=button],
.form--live .wpcf7-previous {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 15px 26px;
  border: 1px solid #d6d6d6;
  background: #fff;
  color: #767676;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background 0.4s cubic-bezier(0.22, 0.8, 0.3, 1), color 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.form--live input[type=button]:hover,
.form--live .wpcf7-previous:hover {
  background: #f7f6f4;
  color: #111111;
}
.form--live .wpcf7-spinner {
  margin: 0 0 0 10px;
}
.form--live .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.9;
  color: #aa3333;
}
.form--live .wpcf7-response-output {
  margin: 24px 0 0;
  padding: 14px 16px;
  border: 1px solid #d6d6d6;
  font-size: 12px;
  font-weight: 300;
  line-height: 2;
  text-align: center;
}
.form--live form.invalid .wpcf7-response-output,
.form--live form.unaccepted .wpcf7-response-output,
.form--live form.payment-required .wpcf7-response-output {
  border-color: #aa3333;
  color: #aa3333;
}

/* =========================================================
   プライバシーポリシー
========================================================= */
.page-privacy .privacy-lead {
  text-align: left;
}
.page-privacy .privacy-list {
  margin-top: 34px;
  text-align: left;
  border-top: 1px solid #d6d6d6;
}
.page-privacy .privacy-item {
  padding: 26px 2px;
  border-bottom: 1px solid #d6d6d6;
}
@media screen and (min-width: 769px) {
  .page-privacy .privacy-item {
    padding: 32px 4px;
  }
}
.page-privacy .privacy-ttl {
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.1em;
  line-height: 1.8;
}
@media screen and (min-width: 769px) {
  .page-privacy .privacy-ttl {
    font-size: 17px;
  }
}
.page-privacy .privacy-txt {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 2.2;
  color: #333333;
}
.page-privacy .privacy-txt a {
  text-decoration: underline;
}
.page-privacy .privacy-contact {
  margin-top: 40px;
  border: 1px solid #d6d6d6;
  padding: 26px 18px;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .page-privacy .privacy-contact {
    padding: 32px 30px;
  }
}
.page-privacy .privacy-contact .privacy-ttl + .privacy-txt {
  margin-top: 12px;
}