@charset "UTF-8";
/*
Theme Name: 有限会社ミサト通商
Theme URI: https://misato-tsusho.com/
Description: 有限会社ミサト通商（群馬県高崎市・一般貨物自動車運送事業）のコーポレートサイト。テンプレ①をベースに新規制作。
Author: PEEES OSAKA
Version: 1.0.0
Text Domain: misato
*/
/* ============================================================
   有限会社ミサト通商 style.scss

   ・style.css は dart-sass が生成する。**直接編集しないこと。**
       sass --no-source-map --style=expanded style.scss style.css
   ・上のテーマヘッダーはコンパイル後もそのまま先頭に残る。
   ・モバイルファースト。SP の指定を素で書き、min-width の mixin で広げる。
   ・全ブロック中央構成。左寄せレイアウトは使わない（実装指示書の指定）。
   ============================================================ */
/* ---- ブレークポイント ---------------------------------- */
/* ---- カラー -------------------------------------------- */
/* ---- グラデーション ------------------------------------
   面で使うのがこのデザインの肝。多用する組み合わせをここにまとめる。
   -------------------------------------------------------- */
/* ---- フォント ------------------------------------------ */
/* ---- イージング ---------------------------------------- */
/* ---- mixin ---------------------------------------------
   モバイルファーストなので tab / pc / monitor は min-width。
   sp だけは「SPのときにだけ打ち消したい」場面のための max-width。
   -------------------------------------------------------- */
/* ---- パーシャル ---------------------------------------- */
/* ============================================================
   _common.scss
   全ページで使う土台。リセット / タイポ / 見出し / ボタン /
   ヘッダー・ドロワー / 下層ヒーロー / パンくず / セクション枠 /
   共通の表 / 共通CTA / フッター / SP追従バー / ユーティリティ。
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: #12384f;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 14.5px;
  line-height: 2.1;
  letter-spacing: 0.04em;
  overflow-x: hidden;
  font-feature-settings: "palt";
  /*
   * 和文を文節の切れ目で折り返す。これが無いと「まだ完／成していない」
   * のように語の途中で改行されてしまう。
   * 対応していないブラウザはこの宣言を丸ごと無視するだけなので害はない。
   */
  word-break: auto-phrase;
}
@media screen and (min-width: 769px) {
  body {
    font-size: 15.5px;
  }
}

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

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

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

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

/* ---- レイアウトの箱 ------------------------------------ */
.wrap {
  width: min(100% - 40px, 1120px);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .wrap {
    width: min(100% - 64px, 1120px);
  }
}
@media screen and (min-width: 1441px) {
  .wrap {
    width: min(100% - 96px, 1200px);
  }
}

/* 本文の折り返し幅。モックの <br> の位置をそのまま活かすための箱。 */
.narrow {
  width: min(100%, 34em);
  margin-inline: auto;
}
@media screen and (min-width: 769px) {
  .narrow {
    width: min(100%, 36em);
  }
}
.narrow {
  /*
   * 段落どうしの間隔。misato_paragraphs() が空行ごとに <p> を吐くので、
   * 2つ目以降にだけ空けてモックの見え方に合わせる。
   */
}
.narrow p + p {
  margin-top: 1.4em;
}

/* ---- SPの改行 -------------------------------------------
   モックの <br> は PC 幅で読んだときの改行位置。SP でそのまま効かせると、
   折れた行がさらに折り返されて「前の橋。」のような1行数文字の余りが出る。
   長い本文だけ SP では <br> を無効にして、自然な折り返しに任せる。

   見出し・表・ポイント欄の <br> は意図した2行組みなので残す。
   -------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .narrow p br,
  .cg__tx br,
  .hl .lead br {
    display: none;
  }
}
/* 行末に1〜2文字だけ残るのを避ける（対応ブラウザのみ効く） */
.narrow p,
.cg__tx,
.hl .lead {
  text-wrap: pretty;
}

/* ---- 写真ユニット --------------------------------------
   青のカラーグレーディングはこのデザインの要。
   mix-blend-mode: multiply を外すと全体のトーンが崩れるので、
   値を変えないこと（実装指示書の指定）。
   -------------------------------------------------------- */
.pic {
  position: relative;
  overflow: hidden;
  background: #0a2f47;
  /* SP 用の写真を <picture> で出し分けている箇所がある。
     picture は既定でインラインなので、img の height:100% が効くように面にする。 */
}
.pic picture {
  display: block;
  width: 100%;
  height: 100%;
}
.pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pic.pic--tint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 60, 95, 0.55) 0%, rgba(4, 38, 60, 0.74) 100%);
  mix-blend-mode: multiply;
}
.pic.pic--soft::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 110, 170, 0.28) 0%, rgba(4, 38, 60, 0.4) 100%);
  mix-blend-mode: multiply;
}

/* ---- 見出し -------------------------------------------- */
.hl {
  margin-bottom: 32px;
}
.hl .bar {
  display: block;
  width: 44px;
  height: 3px;
  margin: 0 auto 20px;
  background: linear-gradient(90deg, #00a4e0, #5cc8f5);
}
.hl .en {
  display: block;
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: clamp(27px, 7.8vw, 34px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #073b5c;
}
@media screen and (min-width: 769px) {
  .hl .en {
    font-size: clamp(34px, 4.2vw, 42px);
  }
}
.hl .ja {
  display: block;
  margin-top: 14px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: #04263c;
}
@media screen and (min-width: 769px) {
  .hl .ja {
    font-size: 22px;
  }
}
.hl .lead {
  display: block;
  margin-top: 16px;
  font-size: 13.5px;
  color: #6f909f;
  line-height: 2.15;
}
.hl.hl--wh .en,
.hl.hl--wh .ja {
  color: #fff;
}
.hl.hl--wh .lead {
  color: rgba(255, 255, 255, 0.82);
}
.hl.hl--wh .bar {
  background: #fff;
}

/* ---- ボタン（ホバーで塗りが左から満ちる） --------------- */
.bt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  padding: 17px 30px;
  overflow: hidden;
  background: #073b5c;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 999px;
  transition: color 0.4s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.bt span {
  position: relative;
  z-index: 2;
}
.bt::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #00a4e0;
  transform: translateX(-101%);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.bt:hover::before {
  transform: none;
}
.bt.bt--wh {
  background: #fff;
  color: #073b5c;
}
.bt.bt--wh::before {
  background: #04263c;
}
.bt.bt--wh:hover {
  color: #fff;
}
.bt {
  /* 送信先が未確定のあいだの仮フォーム用。押せないことを見た目でも示す。 */
}
.bt.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.bt.is-disabled::before {
  display: none;
}

/* ---- ローディング ---------------------------------------
   本（初回）と簡易（2ページ目以降）の2種類。どちらを出すかは
   header.php のインラインスクリプトが <html data-load> に入れる。

   出し入れは**全部 CSS のアニメーション**でやっている。JS で消すと、
   途中で JS が転んだときに面が貼りついたままになるため。
   属性が付かない環境（JS 無効）では、そもそも面を出さない。
   -------------------------------------------------------- */
.ldg {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  place-items: center;
  background: linear-gradient(165deg, #00a4e0 0%, #073b5c 55%, #04263c 100%);
}
.ldg .ldg__in {
  text-align: center;
  color: #fff;
}
.ldg b {
  display: block;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.ldg small {
  display: block;
  margin-top: 6px;
  font-family: "Playfair Display", serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.7);
}
.ldg .ldg__bar {
  display: block;
  width: 120px;
  height: 2px;
  margin: 22px auto 0;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
  position: relative;
}
.ldg .ldg__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #5cc8f5;
  transform: scaleX(0);
  transform-origin: left center;
}

/* JS が data-load を付けたときだけ面を出す */
html[data-load] .ldg {
  display: grid;
}

/* アニメーションを控える設定のときは出さない */
html[data-load=none] .ldg {
  display: none;
}

/* 本ローディング：社名がふわっと出て、バーが伸びきったら面が上へ抜ける */
html[data-load=full] .ldg {
  animation: ldg-out 0.7s cubic-bezier(0.2, 0.7, 0.28, 1) 1.15s forwards;
}
html[data-load=full] .ldg__in {
  animation: ldg-in 0.7s cubic-bezier(0.2, 0.7, 0.28, 1) both;
}
html[data-load=full] .ldg__bar::after {
  animation: ldg-bar 1.1s cubic-bezier(0.2, 0.7, 0.28, 1) 0.15s forwards;
}

/* 簡易ローディング：社名だけを一瞬見せて抜ける。全体で 0.85 秒。
   面が光るだけだと何が起きたのか分からないので、社名は出す。
   英字とバーは本ローディングとの差にするため出さない。 */
html[data-load=quick] .ldg {
  animation: ldg-out 0.45s cubic-bezier(0.2, 0.7, 0.28, 1) 0.4s forwards;
}
html[data-load=quick] .ldg__in {
  animation: ldg-in 0.35s cubic-bezier(0.2, 0.7, 0.28, 1) both;
}
html[data-load=quick] .ldg__in small,
html[data-load=quick] .ldg__bar {
  display: none;
}

@keyframes ldg-out {
  to {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
  }
}
@keyframes ldg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ldg-bar {
  to {
    transform: scaleX(1);
  }
}
/* ---- ヘッダー ------------------------------------------
   TOP はヒーローに重ねるので背景を透かし、70px スクロールしたら
   白帯に切り替える（body.is-top のときだけ）。下層は常時白帯。
   -------------------------------------------------------- */
.hd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 14px 0;
  transition: 0.4s cubic-bezier(0.2, 0.7, 0.28, 1);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 1px 0 rgba(7, 59, 92, 0.1);
}
.hd .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.is-top .hd {
  background: transparent;
  box-shadow: none;
}
body.is-top .hd.on {
  background: rgba(255, 255, 255, 0.96);
  padding: 9px 0;
  box-shadow: 0 1px 0 rgba(7, 59, 92, 0.1);
}
body.is-top .hd:not(.on) .lg b {
  color: #fff;
}
body.is-top .hd:not(.on) .lg small {
  color: rgba(255, 255, 255, 0.75);
}
body.is-top .hd:not(.on) .gn a {
  color: #fff;
}
body.is-top .hd:not(.on) .hd__tel b {
  color: #fff;
}
body.is-top .hd:not(.on) .hd__tel span {
  color: rgba(255, 255, 255, 0.8);
}

/* 下層はヘッダーぶんの高さを空ける（TOPはヒーローに重ねるので不要） */
body.is-lower {
  padding-top: 70px;
}
@media screen and (min-width: 1025px) {
  body.is-lower {
    padding-top: 76px;
  }
}

.lg {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
}
.lg em {
  width: 5px;
  height: 28px;
  flex: none;
  font-style: normal;
  transform: skewX(-12deg);
  background: linear-gradient(180deg, #5cc8f5, #00a4e0);
}
.lg b {
  display: block;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #04263c;
  line-height: 1.3;
  transition: color 0.4s cubic-bezier(0.2, 0.7, 0.28, 1);
}
@media screen and (min-width: 1025px) {
  .lg b {
    font-size: 17px;
  }
}
.lg small {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #6f909f;
  transition: color 0.4s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.lg img {
  max-height: 42px;
  width: auto;
}
.lg {
  /*
   * ヘッダー用。ロゴマークを使わず社名だけで見せる形。
   * 縦バーも英字も出ないので、その分だけ字を大きくして頭でっかちにしない。
   */
}
.lg.lg--text {
  gap: 0;
}
.lg.lg--text b {
  font-size: 17px;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1025px) {
  .lg.lg--text b {
    font-size: 19px;
  }
}

.gn {
  display: none;
}
@media screen and (min-width: 1025px) {
  .gn {
    display: flex;
    align-items: center;
    gap: 26px;
  }
  .gn a {
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #04263c;
    position: relative;
    padding-bottom: 4px;
    transition: color 0.4s cubic-bezier(0.2, 0.7, 0.28, 1);
  }
  .gn a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #00a4e0;
    transition: width 0.4s cubic-bezier(0.2, 0.7, 0.28, 1);
  }
  .gn a:hover::after {
    width: 100%;
  }
  .gn a.cta-btn {
    background: #00a4e0;
    color: #fff;
    padding: 11px 22px;
    border-radius: 999px;
  }
  .gn a.cta-btn::after {
    display: none;
  }
}

/* ---- ヘッダーの電話番号 ----------------------------------
   法人からの電話が主な窓口なので、常に見えるところに置く。
   1200px 未満はナビと競って窮屈になるので出さない。
   SP は下部の追従バーに電話があるので、こちらは不要。
   -------------------------------------------------------- */
.hd__tel {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
}
@media screen and (min-width: 1200px) {
  .hd__tel {
    display: flex;
  }
}
.hd__tel {
  /* .gn a のホバー下線と余白はここでは要らない */
}
.hd__tel a {
  padding-bottom: 0;
}
.hd__tel a::after {
  display: none;
}
.hd__tel b {
  font-family: "Playfair Display", serif;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #04263c;
  transition: color 0.4s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.hd__tel span {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #6f909f;
  transition: color 0.4s cubic-bezier(0.2, 0.7, 0.28, 1);
}

/* ---- ハンバーガー --------------------------------------- */
.mb {
  width: 42px;
  height: 42px;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  background: #00a4e0;
  transition: 0.35s cubic-bezier(0.2, 0.7, 0.28, 1);
}
@media screen and (min-width: 1025px) {
  .mb {
    display: none;
  }
}
.mb i {
  position: absolute;
  left: 12px;
  width: 18px;
  height: 2px;
  background: #fff;
  transition: 0.35s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.mb i:nth-child(1) {
  top: 15px;
}
.mb i:nth-child(2) {
  top: 21px;
}
.mb i:nth-child(3) {
  top: 27px;
  width: 11px;
}
.mb.on {
  background: #fff;
}
.mb.on i {
  background: #04263c;
}
.mb.on i:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}
.mb.on i:nth-child(2) {
  opacity: 0;
}
.mb.on i:nth-child(3) {
  top: 21px;
  width: 18px;
  transform: rotate(-45deg);
}

/* ---- ドロワー ------------------------------------------- */
.dw {
  position: fixed;
  inset: 0;
  z-index: 99;
  padding: 104px 24px 44px;
  background: linear-gradient(165deg, #00a4e0 0%, #073b5c 55%, #04263c 100%);
  opacity: 0;
  visibility: hidden;
  transition: 0.45s cubic-bezier(0.2, 0.7, 0.28, 1);
  overflow-y: auto;
}
@media screen and (min-width: 1025px) {
  .dw {
    display: none;
  }
}
.dw.on {
  opacity: 1;
  visibility: visible;
}
.dw a {
  display: block;
  padding: 17px 0;
  color: #fff;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.1em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.dw a i {
  display: block;
  font-style: normal;
  font-family: "Playfair Display", serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 3px;
}
.dw a.tel {
  border: none;
  margin-top: 28px;
  font-family: "Playfair Display", serif;
  font-size: 30px;
  font-weight: 500;
}
.dw a.tel .cap {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  letter-spacing: 0.05em;
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* ---- 下層ヒーロー --------------------------------------- */
.ph {
  position: relative;
  height: 44svh;
  min-height: 280px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .ph {
    height: 46svh;
    min-height: 340px;
  }
}
/* 写真が未登録のとき。白文字が白地に乗らないよう、色面を敷いて代わりにする。 */
.ph.is-plain {
  background: linear-gradient(165deg, #0aa0dc 0%, #0b6ea0 52%, #073b5c 100%);
}
.ph .pic {
  position: absolute;
  inset: 0;
  /*
   * 白のページ名と水色の和文を拾わせるための薄い膜。
   * 空など明るい写真だと、text-shadow だけでは文字が飛んでしまう。
   * .pic--tint（multiply の青グレーディング）ほど濃くすると写真が沈むので、
   * 通常合成で下にいくほど少し濃くなるだけの弱いものにしてある。
   * 濃さを変えたいときは下の2つの alpha だけ触ればよい。
   */
}
.ph .pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 38, 60, 0.22) 0%, rgba(4, 38, 60, 0.48) 100%);
}
.ph .ph__in {
  position: relative;
  z-index: 2;
  padding: 0 20px;
}
.ph .ph__en {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  color: #fff;
  font-size: clamp(38px, 11vw, 52px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-shadow: 0 3px 26px rgba(0, 20, 36, 0.4);
}
.ph .ph__ja {
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #5cc8f5;
  text-shadow: 0 2px 16px rgba(0, 20, 36, 0.55);
}

/* ---- パンくず ------------------------------------------- */
.bc {
  padding: 14px 20px;
  font-size: 11.5px;
  color: #6f909f;
  letter-spacing: 0.06em;
  background: #e4f4fc;
}
.bc a {
  color: #073b5c;
}
.bc a:hover {
  text-decoration: underline;
}
.bc .sep {
  margin: 0 0.5em;
}

/* ---- セクションの枠 ------------------------------------- */
.sec {
  padding: 66px 0 72px;
}
@media screen and (min-width: 769px) {
  .sec {
    padding: 100px 0 108px;
  }
}
.sec {
  /* 直前のセクションと地続きに見せたいとき（背景色が続く箇所） */
}
.sec.sec--tight {
  padding-top: 0;
}
.sec.sec--pale {
  background: linear-gradient(180deg, #fff 0%, #e4f4fc 100%);
}
.sec.sec--blue {
  color: #fff;
  background: linear-gradient(165deg, #0aa0dc 0%, #0b6ea0 52%, #073b5c 100%);
}
.sec .sec__ft {
  margin-top: 36px;
}
@media screen and (min-width: 769px) {
  .sec .sec__ft {
    margin-top: 46px;
  }
}

/* ---- 共通の表（会社概要・募集要項・お取引について） ------ */
/*
 * 文字は中央ぞろえのまま、1行を1枚のカードにして枠で区切る。
 * 中央ぞろえだけの表は行の切れ目が読めず追いにくいので、
 * 枠のほうに「どこからどこまでが1行か」を持たせている。
 * 見た目は事業内容ページの小テーブル（.sub-tb）とそろえてあるので、
 * 左寄せを持ち込まずに中央構成のまま読ませられる。
 */
.tb {
  margin-top: 6px;
  display: grid;
  gap: 1px;
  background: rgba(7, 59, 92, 0.14);
  border: 1px solid rgba(7, 59, 92, 0.14);
  border-radius: 6px;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .tb {
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    margin-inline: auto;
  }
}
.tb .tb__r {
  background: #fff;
  padding: 18px 14px;
}
@media screen and (min-width: 769px) {
  .tb .tb__r {
    padding: 22px 18px;
  }
}
.tb .tb__r {
  /*
   * 行数が奇数のときは最後の1枚が半分だけ空いて穴になるので、
   * 2列ぶち抜きにして埋める。
   */
}
@media screen and (min-width: 769px) {
  .tb .tb__r:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
}
.tb .tb__r dt {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #00a4e0;
  margin-bottom: 6px;
}
.tb .tb__r dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.95;
}
.tb {
  /*
   * 行数の多い表（会社情報・募集要項）は縦一列にする。
   * 2列だと視線が左右にジグザグするので、「勤務時間は？」のように
   * 目的の項目を上から探す表では追いにくい。
   * 3行程度で収まるお取引については2列のまま。
   */
}
@media screen and (min-width: 769px) {
  .tb.tb--list {
    grid-template-columns: 1fr;
    max-width: 620px;
  }
}
.tb {
  /* グラデーション面に載せるとき。カードは面を透かす。 */
}
.tb.tb--wh {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}
.tb.tb--wh .tb__r {
  background: transparent;
}
.tb.tb--wh .tb__r dt {
  color: #5cc8f5;
}

/* ---- 補足の注記 ----------------------------------------- */
.note {
  margin-top: 22px;
  font-size: 12.5px;
  color: #6f909f;
  line-height: 1.9;
}

/* ---- 要確認マーカー -------------------------------------
   **本番公開版では未使用。** 値の中に【要確認：…】と書くと
   PHP 側（misato_todo）がこのクラスの破線囲みに変える、という仕掛け。
   確認待ちの項目を一時的に目立たせたいときのために残してある。
   -------------------------------------------------------- */
.todo {
  display: inline-block;
  /*
   * 前に文言があるときだけ間を空ける。「※ 未定」のように
   * バッジだけの行では、この余白があると中央からずれてしまう。
   */
}
.todo:not(:first-child) {
  margin-left: 8px;
}
.todo {
  padding: 2px 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: #c85a00;
  background: #fff2e2;
  border: 1px dashed rgba(200, 90, 0, 0.5);
  border-radius: 999px;
  vertical-align: middle;
}

/* ---- お問い合わせ帯の背景写真 ----------------------------
   TOPの .ct と下層共通CTAの .cta で同じ見せ方をする。写真の上に
   青のグラデーションを重ねて、帯のトーンと白文字の可読性を保つ。
   .pic--tint（multiply）ではなく通常合成にしてあるのは、写真の明暗で
   結果が振られないようにするため。写真が未登録なら .ct / .cta 自身の
   background（グラデーションだけの面）がそのまま出る。

   .pic と同じ詳細度なので、position を上書きするために .pic より後ろに置くこと。
   -------------------------------------------------------- */
.ct__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ct__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #073b5c 0%, #0b6ea0 60%, #00a4e0 100%);
  opacity: 0.86;
}

/* ---- 共通CTA -------------------------------------------- */
.cta {
  position: relative;
  padding: 66px 0 72px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, #073b5c 0%, #0b6ea0 60%, #00a4e0 100%);
}
@media screen and (min-width: 769px) {
  .cta {
    padding: 100px 0 108px;
  }
}
.cta::before {
  content: "";
  position: absolute;
  left: -110px;
  bottom: -140px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  border: 54px solid rgba(255, 255, 255, 0.07);
  z-index: 1;
}
.cta .wrap {
  position: relative;
  z-index: 2;
}
.cta .cta__tel {
  display: block;
  margin-top: 26px;
  font-family: "Playfair Display", serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #fff;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  .cta .cta__tel {
    font-size: 48px;
  }
}
.cta .cta__cap {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.08em;
}
.cta .bt {
  margin-top: 24px;
}

/* ---- フッター ------------------------------------------- */
.ft {
  background: #04263c;
  color: #fff;
  padding: 52px 0 84px;
}
@media screen and (min-width: 769px) {
  .ft {
    padding: 70px 0 32px;
  }
}
.ft .ft__lg {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-align: left;
}
.ft .ft__lg em {
  width: 5px;
  height: 30px;
  font-style: normal;
  transform: skewX(-12deg);
  background: linear-gradient(180deg, #5cc8f5, #00a4e0);
}
.ft .ft__lg b {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.ft .ft__lg small {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: #5cc8f5;
}
.ft .ft__lg img {
  max-height: 46px;
  width: auto;
}
.ft .ft__lg {
  /* ヘッダーと同じく、ロゴマークを使わず社名だけで見せる形。 */
}
.ft .ft__lg.ft__lg--text {
  gap: 0;
}
.ft .ft__lg.ft__lg--text b {
  font-size: 18px;
  letter-spacing: 0.12em;
}
.ft .ft__ad {
  margin-top: 20px;
  font-size: 12.5px;
  line-height: 2.05;
  color: rgba(255, 255, 255, 0.72);
}
.ft .ft__nv {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 769px) {
  .ft .ft__nv {
    grid-template-columns: repeat(3, 1fr);
    max-width: 760px;
    margin-inline: auto;
  }
}
.ft .ft__nv a {
  padding: 9px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.84);
  transition: color 0.3s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.ft .ft__nv a:hover {
  color: #5cc8f5;
}
.ft .ft__cp {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-family: "Playfair Display", serif;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}

/* ---- SP追従バー -----------------------------------------
   520px スクロールしてから下部に出す。PC では出さない。
   -------------------------------------------------------- */
.sb {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.28, 1);
}
@media screen and (min-width: 769px) {
  .sb {
    display: none;
  }
}
.sb.on {
  transform: none;
}
.sb a {
  padding: 14px 6px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.sb a.a {
  background: #04263c;
  color: #fff;
}
.sb a.b {
  background: #00a4e0;
  color: #fff;
}

/* ---- ページトップへ戻る ----------------------------------
   SP追従バーと同じ 520px で右下に出す。SP はその追従バーと
   場所が競るので、バーの高さぶん上へ逃がしている。
   -------------------------------------------------------- */
.pt {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 80;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(165deg, #0aa0dc 0%, #0b6ea0 52%, #073b5c 100%);
  box-shadow: 0 8px 24px rgba(4, 38, 60, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.4s cubic-bezier(0.2, 0.7, 0.28, 1), transform 0.4s cubic-bezier(0.2, 0.7, 0.28, 1), visibility 0.4s;
  /* 矢印は文字を置かず、正方形の2辺だけ残して45度回して作る */
}
@media screen and (max-width: 768px) {
  .pt {
    right: 14px;
    bottom: 62px;
    width: 46px;
    height: 46px;
  }
}
.pt.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.pt i {
  display: block;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
}
.pt:hover {
  background: #073b5c;
}
@media screen and (min-width: 769px) {
  .pt:hover {
    transform: translateY(-4px);
  }
}


/* ---- スクロール発火 -------------------------------------- */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: 0.9s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.rv.in {
  opacity: 1;
  transform: none;
}

/*
 * 並んだ項目を1つずつ出す（.stg = stagger）。
 * 3つの強み・積荷・仕事の流れ・各種の表など、粒が並ぶブロックに付ける。
 * 面ごとふっと出るより、順に出たほうが「何個あるか」を目が拾いやすい。
 *
 * 親には .rv も一緒に付ける。観測して .in を付けるのは既存の JS のままで、
 * ここは .in を合図に子を遅らせて出しているだけなので JS の変更は要らない。
 * 遅延は 8個目まで。それ以上並ぶ表は、待たされる感じが出る前に出しきる。
 */
.stg.rv > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.28, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.28, 1);
}

.stg.rv.in > * {
  opacity: 1;
  transform: none;
}

.stg.rv.in > *:nth-child(2) {
  transition-delay: 0.08s;
}

.stg.rv.in > *:nth-child(3) {
  transition-delay: 0.16s;
}

.stg.rv.in > *:nth-child(4) {
  transition-delay: 0.24s;
}

.stg.rv.in > *:nth-child(5) {
  transition-delay: 0.32s;
}

.stg.rv.in > *:nth-child(6) {
  transition-delay: 0.4s;
}

.stg.rv.in > *:nth-child(7) {
  transition-delay: 0.48s;
}

.stg.rv.in > *:nth-child(8) {
  transition-delay: 0.56s;
}

/* ---- 投稿本文（index.php の汎用表示） -------------------- */
.editor {
  text-align: left;
}
.editor p + p {
  margin-top: 1.35em;
}
.editor a {
  color: #00a4e0;
  text-decoration: underline;
}

/* ---- 文字色ユーティリティ -------------------------------
   ACF の「クラス指定」フィールドから管理画面で付けられる。
   -------------------------------------------------------- */
.u-c-sky {
  color: #00a4e0;
}

.u-c-navy {
  color: #04263c;
}

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

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

/*
 * 目には出さないが、読み上げと検索エンジンには渡したいテキスト。
 * TOPの h1 が「First Mile」だけだと何の会社か分からないので、
 * 社名と業種をここに添えている。display:none だと読み上げからも
 * 消えてしまうので、1px に潰して画面外へ出す書き方にする。
 */
.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ---- アニメーションを止める設定 --------------------------
   実装指示書の指定。モックの挙動をそのまま移植している。
   -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
  /* 1つずつ出す指定も殺す。ここを書き忘れると子が透明のまま残る。 */
  .stg.rv > * {
    opacity: 1;
    transform: none;
  }
}
/* ============================================================
   _top.scss
   TOPページ（front-page.php）専用。
   並びは #top_main → #recruit → #carry → #contents_divide
   → #about → #contact。求人がヒーローの直後に来るのは
   クライアントの要望なので、この順序は変えない。
   ============================================================ */
/* ---- #top_main（ヒーロー） -------------------------------
   写真は常時スローズーム。英字キャッチを1行ずつ下からスライドイン
   → 縦線が伸びる → 和文キャッチがフェードイン、の順で見せる。
   ローディングの面が抜けてから動きだす（body.ld）。
   -------------------------------------------------------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* 写真が1枚も無いとき。白文字が白地に乗らないよう、色面を敷いて代わりにする。 */
}
.hero.is-plain {
  background: linear-gradient(165deg, #0aa0dc 0%, #0b6ea0 52%, #073b5c 100%);
}
.hero .hero__slides {
  position: absolute;
  inset: 0;
}
.hero .hero__slide {
  position: absolute;
  inset: 0;
}
.hero .hero__slide img {
  animation: misato-zoom 24s cubic-bezier(0.2, 0.7, 0.28, 1) infinite alternate;
}
.hero {
  /* 写真が2枚以上のときだけクロスフェードで回す（JS が .on を付け替える） */
}
.hero .hero__slides.is-multi .hero__slide {
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.hero .hero__slides.is-multi .hero__slide.on {
  opacity: 1;
}
.hero .hero__in {
  position: relative;
  z-index: 2;
  padding: 0 24px;
}
.hero .hero__ttl {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  color: #fff;
  font-size: clamp(52px, 15vw, 68px);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-shadow: 0 4px 34px rgba(0, 20, 36, 0.4);
}
@media screen and (min-width: 769px) {
  .hero .hero__ttl {
    font-size: clamp(80px, 9.6vw, 124px);
  }
}
.hero .hero__ttl {
  /* 読み上げ用の社名（.u-sr）は数に入れたくないので、行にはクラスを付ける */
}
.hero .hero__ttl .hero__ln {
  display: block;
  overflow: hidden;
}
.hero .hero__ttl .hero__ln i {
  display: block;
  font-style: normal;
  transform: translateY(105%);
}
.hero .hero__rule {
  display: block;
  width: 1px;
  height: 0;
  margin: 26px auto;
  background: linear-gradient(180deg, #5cc8f5, rgba(255, 255, 255, 0.2));
}
.hero .hero__ja {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 2;
  opacity: 0;
  text-shadow: 0 2px 18px rgba(0, 20, 36, 0.45);
}
@media screen and (min-width: 769px) {
  .hero .hero__ja {
    font-size: 16px;
  }
}
.hero .hero__loc {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 2;
  font-family: "Playfair Display", serif;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.62);
}

/* body に .ld が付いた時点で動きだす */
body.ld .hero .hero__ttl .hero__ln i {
  transform: none;
  transition: transform 1.05s cubic-bezier(0.2, 0.7, 0.28, 1);
}
body.ld .hero .hero__ttl .hero__ln + .hero__ln i {
  transition-delay: 0.1s;
}
body.ld .hero .hero__rule {
  height: 44px;
  transition: height 0.9s cubic-bezier(0.2, 0.7, 0.28, 1) 0.55s;
}
body.ld .hero .hero__ja {
  opacity: 1;
  transition: opacity 1s cubic-bezier(0.2, 0.7, 0.28, 1) 0.8s;
}

@keyframes misato-zoom {
  from {
    transform: scale(1.02);
  }
  to {
    transform: scale(1.16);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero__ttl .hero__ln i {
    transform: none;
  }
  .hero .hero__ja {
    opacity: 1;
  }
  .hero .hero__rule {
    height: 44px;
  }
  .hero .hero__slides.is-multi .hero__slide {
    opacity: 1;
  }
}
/* ---- #recruit（推しセクション） --------------------------
   グラデーション面に白文字。右上に大きな円をはみ出させる。
   -------------------------------------------------------- */
.rc {
  position: relative;
  padding: 74px 0 84px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(165deg, #0aa0dc 0%, #0b6ea0 52%, #073b5c 100%);
}
@media screen and (min-width: 769px) {
  .rc {
    padding: 104px 0 112px;
  }
}
.rc::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 56px solid rgba(255, 255, 255, 0.08);
}
.rc .wrap {
  position: relative;
  z-index: 2;
}
.rc .rc__pic {
  margin-top: 32px;
  aspect-ratio: 16/10;
  border-radius: 6px;
}
@media screen and (min-width: 769px) {
  .rc .rc__pic {
    margin-top: 44px;
    aspect-ratio: 21/9;
  }
}
.rc .rc__pt {
  margin-top: 34px;
}
@media screen and (min-width: 769px) {
  .rc .rc__pt {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 34px;
    margin-top: 46px;
  }
}
.rc .rc__pt li {
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
}
@media screen and (min-width: 769px) {
  .rc .rc__pt li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.26);
  }
}
.rc .rc__pt li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
}
.rc .rc__pt b {
  display: block;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.rc .rc__pt span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.95;
}
.rc .bt {
  margin-top: 32px;
}

/* ---- #carry（積荷） --------------------------------------
   **写真は使わない**（実装指示書の指定）。実際の積荷と違う写真を
   置かないため、品目名とキャッチだけで見せる。
   -------------------------------------------------------- */
.cg {
  padding: 78px 0 84px;
  background: linear-gradient(180deg, #fff 0%, #e4f4fc 100%);
}
@media screen and (min-width: 769px) {
  .cg {
    padding: 110px 0 116px;
  }
}
.cg .cg__list {
  margin-top: 6px;
  display: grid;
  gap: 0;
}
@media screen and (min-width: 769px) {
  .cg .cg__list {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 14px;
  }
}
.cg .cg__it {
  padding: 30px 16px;
  border-top: 1px solid rgba(7, 59, 92, 0.14);
  transition: 0.45s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.cg .cg__it:last-child {
  border-bottom: 1px solid rgba(7, 59, 92, 0.14);
}
.cg .cg__it:hover {
  background: rgba(255, 255, 255, 0.7);
}
@media screen and (min-width: 769px) {
  .cg .cg__it {
    padding: 38px 20px;
    border-top: 1px solid rgba(7, 59, 92, 0.14);
    border-bottom: 1px solid rgba(7, 59, 92, 0.14);
  }
  .cg .cg__it + .cg__it {
    border-left: 1px solid rgba(7, 59, 92, 0.14);
  }
}
.cg .cg__nm {
  font-size: clamp(24px, 7vw, 29px);
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #04263c;
  line-height: 1.5;
}
.cg .cg__cp {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, #00a4e0, #0b6ea0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cg .cg__ft {
  margin-top: 40px;
}
@media screen and (min-width: 769px) {
  .cg .cg__ft {
    margin-top: 46px;
  }
}

/* ---- #contents_divide（帯） ------------------------------ */
.dv {
  position: relative;
  height: 56svh;
  min-height: 330px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .dv {
    height: 52svh;
  }
}
.dv .pic {
  position: absolute;
  inset: 0;
}
.dv .dv__in {
  position: relative;
  z-index: 2;
  padding: 0 24px;
}
.dv .dv__in p {
  color: #fff;
  font-size: clamp(22px, 6.8vw, 29px);
  font-weight: 900;
  line-height: 1.8;
  letter-spacing: 0.07em;
  text-shadow: 0 3px 24px rgba(0, 14, 24, 0.45);
}
.dv .dv__in small {
  display: block;
  margin-top: 18px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 2.05;
  letter-spacing: 0.05em;
}

/* ---- #about（想い） -------------------------------------- */
.ab {
  padding: 80px 0 86px;
  background: #e4f4fc;
}
@media screen and (min-width: 769px) {
  .ab {
    padding: 110px 0 116px;
  }
}
.ab .bt {
  margin-top: 34px;
}

/* ---- #contact -------------------------------------------- */
.ct {
  position: relative;
  padding: 76px 0 82px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(160deg, #073b5c 0%, #0b6ea0 60%, #00a4e0 100%);
  /* 背景写真（.ct__bg）は下層の .cta と共通。_common.scss 側に置いてある。 */
}
@media screen and (min-width: 769px) {
  .ct {
    padding: 110px 0 116px;
  }
}
.ct::before {
  content: "";
  position: absolute;
  left: -110px;
  bottom: -140px;
  width: 330px;
  height: 330px;
  border-radius: 50%;
  border: 54px solid rgba(255, 255, 255, 0.07);
  z-index: 1;
}
.ct .wrap {
  position: relative;
  z-index: 2;
}
.ct .ct__tel {
  display: block;
  margin-top: 28px;
  font-family: "Playfair Display", serif;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #fff;
  line-height: 1.2;
}
@media screen and (min-width: 769px) {
  .ct .ct__tel {
    font-size: 52px;
  }
}
.ct .ct__cap {
  display: block;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0.08em;
}
.ct .bt {
  margin-top: 26px;
}
.ct .ct__info {
  margin-top: 22px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 2;
}

/* ============================================================
   _service.scss
   事業内容（page-service.php）専用。
   3品目ブロック（縦積み・写真なし）と、小テーブル、フロー。
   ============================================================ */
/* ---- 3品目ブロック ---------------------------------------
   TOP の #carry と同じ品目名・キャッチを使うが、こちらは
   説明文と小テーブルが付くので縦積み1カラムのまま広げる。
   写真を使わないのは TOP と同じ理由（実装指示書の指定）。
   -------------------------------------------------------- */
.sv .cg__list {
  margin-top: 6px;
  display: grid;
}
@media screen and (min-width: 769px) {
  .sv .cg__list {
    margin-top: 14px;
  }
}
.sv .cg__it {
  padding: 34px 8px 38px;
  border-top: 1px solid rgba(7, 59, 92, 0.14);
}
@media screen and (min-width: 769px) {
  .sv .cg__it {
    padding: 48px 20px 52px;
  }
}
.sv .cg__it:last-child {
  border-bottom: 1px solid rgba(7, 59, 92, 0.14);
}
.sv {
  /*
   * 品目の写真。荷物そのものを見せる情報写真なので、
   * ヒーローのような青のグレーディングは掛けない。
   * 幅は小テーブルとそろえて 760px で止め、中央に置く。
   */
}
.sv .cg__pic {
  margin: 0 auto 26px;
  max-width: 760px;
  aspect-ratio: 16/10;
  border-radius: 6px;
  overflow: hidden;
  background: #e4f4fc;
}
@media screen and (min-width: 769px) {
  .sv .cg__pic {
    aspect-ratio: 21/9;
    margin-bottom: 32px;
  }
}
.sv .cg__pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sv .cg__nm {
  font-size: clamp(23px, 6.6vw, 28px);
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #04263c;
  line-height: 1.5;
}
.sv .cg__cp {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: linear-gradient(90deg, #00a4e0, #0b6ea0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sv .cg__tx {
  margin-top: 16px;
  font-size: 13.5px;
  color: #40606f;
  line-height: 2.1;
}

/* ---- 品目ごとの小テーブル -------------------------------- */
.sub-tb {
  margin-top: 22px;
  display: grid;
  gap: 1px;
  background: rgba(7, 59, 92, 0.14);
  border: 1px solid rgba(7, 59, 92, 0.14);
  border-radius: 6px;
  overflow: hidden;
}
@media screen and (min-width: 769px) {
  .sub-tb {
    grid-template-columns: repeat(3, 1fr);
    max-width: 760px;
    margin-inline: auto;
  }
}
.sub-tb .sub-tb__r {
  background: #fff;
  padding: 13px 14px;
}
.sub-tb .sub-tb__r dt {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #00a4e0;
  margin-bottom: 4px;
}
.sub-tb .sub-tb__r dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.8;
}

/* ---- ご依頼から到着までのフロー --------------------------
   SP は縦積み、PC は5カラム。
   -------------------------------------------------------- */
.flow {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
}
@media screen and (min-width: 769px) {
  .flow {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
}
.flow li {
  position: relative;
  background: #e4f4fc;
  padding: 24px 18px;
  border-radius: 6px;
}
@media screen and (min-width: 769px) {
  .flow li {
    padding: 26px 14px;
  }
}
.flow .flow__n {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 20px;
  color: #00a4e0;
  letter-spacing: 0.06em;
  line-height: 1;
}
.flow .flow__t {
  display: block;
  margin-top: 8px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #04263c;
}
.flow .flow__x {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: #40606f;
  line-height: 1.95;
}

/* ============================================================
   _company.scss
   会社概要（page-company.php）専用。
   代表挨拶の段落まわりと、署名、Google Map の枠。
   ※ 役員の行は入れない（クライアント指示）。
   ============================================================ */
/* ---- 代表挨拶 -------------------------------------------- */
.msg p + p {
  margin-top: 1.35em;
}
.msg .msg__sign {
  margin-top: 28px;
}
.msg .msg__sign i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: #6f909f;
  letter-spacing: 0.14em;
}
.msg .msg__sign b {
  display: block;
  margin-top: 4px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #04263c;
}

/* ---- Google Map -----------------------------------------
   埋め込みコードが未入力のあいだは、同じ比率の枠に
   「Google Map 埋め込み」とだけ出してレイアウトを保つ。
   -------------------------------------------------------- */
.map {
  margin-top: 26px;
  aspect-ratio: 16/11;
  background: #e4f4fc;
  border: 1px solid rgba(7, 59, 92, 0.14);
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
@media screen and (min-width: 769px) {
  .map {
    aspect-ratio: 21/9;
  }
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map .map__ph {
  color: #6f909f;
  font-size: 11.5px;
  letter-spacing: 0.1em;
}

/* ============================================================
   _recruit.scss
   求人情報（page-recruit.php）専用。
   Room for You の3ポイント（グラデーション面に載る罫線区切り）。
   ============================================================ */
.pt3 {
  margin-top: 34px;
}
@media screen and (min-width: 769px) {
  .pt3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 34px;
    margin-top: 46px;
  }
}
.pt3 li {
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.26);
}
@media screen and (min-width: 769px) {
  .pt3 li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.26);
  }
}
.pt3 li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.26);
}
.pt3 b {
  display: block;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.pt3 span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.95;
}

/* ============================================================
   _contact.scss
   お問い合わせ（page-contact.php）専用。
   電話番号ブロックとフォーム。
   フォームは Contact Form 7 のショートコードに差し替わっても
   同じ見た目になるよう、.fm の中の input / textarea を直接拾う。
   ============================================================ */
/* ---- 電話番号ブロック ------------------------------------ */
.tel-box {
  margin-top: 30px;
}
.tel-box .num {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #04263c;
  line-height: 1.25;
}
@media screen and (min-width: 769px) {
  .tel-box .num {
    font-size: 48px;
  }
}
.tel-box .cap {
  display: block;
  font-size: 12.5px;
  color: #6f909f;
  letter-spacing: 0.06em;
}

/* ---- フォーム -------------------------------------------- */
.fm {
  margin-top: 8px;
  text-align: left;
}
.fm .fm__r {
  padding: 16px 0;
  border-bottom: 1px solid rgba(7, 59, 92, 0.14);
}
.fm .fm__r:first-child {
  border-top: 1px solid rgba(7, 59, 92, 0.14);
}
@media screen and (min-width: 769px) {
  .fm .fm__r {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 20px;
    align-items: start;
    padding: 20px 10px;
  }
}
.fm .fm__lb {
  display: block;
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #073b5c;
  margin-bottom: 8px;
}
@media screen and (min-width: 769px) {
  .fm .fm__lb {
    margin-bottom: 0;
    padding-top: 12px;
  }
}
.fm .fm__req {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: #00a4e0;
  border-radius: 3px;
  letter-spacing: 0.06em;
  vertical-align: middle;
}
.fm input[type=text],
.fm input[type=email],
.fm input[type=tel],
.fm textarea,
.fm select {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: #12384f;
  border: 1px solid rgba(7, 59, 92, 0.14);
  border-radius: 5px;
  padding: 13px 14px;
  background: #fff;
  transition: border-color 0.3s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.fm input[type=text]:focus,
.fm input[type=email]:focus,
.fm input[type=tel]:focus,
.fm textarea:focus,
.fm select:focus {
  outline: none;
  border-color: #00a4e0;
}
.fm input[type=text]:disabled,
.fm input[type=email]:disabled,
.fm input[type=tel]:disabled,
.fm textarea:disabled,
.fm select:disabled {
  background: #fbfdfe;
  color: #6f909f;
}
.fm textarea {
  min-height: 150px;
  line-height: 1.9;
  resize: vertical;
}
.fm .fm__radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.fm .fm__radio label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  border: 1px solid rgba(7, 59, 92, 0.14);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  background: #fff;
}

/* ============================================================
   Contact Form 7（+ Multi-Step Module）を入れたときの見た目。
   ------------------------------------------------------------
   実フォームのマークアップは
     <label> 氏名<span class="red">必須</span> [text* ...] </label>
   という形で、上の .fm__r / .fm__lb とは構造が違う。
   管理画面側のマークアップには手を入れずに、同じ見た目へ寄せる。
   1行ラベル + その下に入力欄、という並びは PC でも変えない
   （CF7 が吐く匿名テキストノードをグリッドに載せると崩れるため）。
   ============================================================ */
.fm--live {
  max-width: 760px;
  margin-inline: auto;
  text-align: left;
  /* CF7 が行ごとに吐く <p> の余白を殺す */
}
.fm--live p {
  margin: 0;
}
.fm--live form.wpcf7-form > p {
  margin: 0;
}
.fm--live label {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid rgba(7, 59, 92, 0.14);
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #073b5c;
  line-height: 1.9;
}
@media screen and (min-width: 769px) {
  .fm--live label {
    padding: 20px 10px;
  }
}
.fm--live {
  /*
   * チェックボックスの use_label_element が入れ子の <label> を作る。
   * 行の罫線と余白が二重にかからないよう、内側は素に戻す。
   */
}
.fm--live .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  cursor: pointer;
}
.fm--live {
  /* 必須・任意のバッジ。管理画面のマークアップに合わせて .red / .blue */
}
.fm--live .red,
.fm--live .blue {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  border-radius: 3px;
  letter-spacing: 0.06em;
  vertical-align: middle;
}
.fm--live .red {
  background: #00a4e0;
}
.fm--live .blue {
  background: #6f909f;
}
.fm--live {
  /* 入力欄はラベルの下。CF7 は control を span で包んで返す。 */
}
.fm--live .wpcf7-form-control-wrap {
  display: block;
  margin-top: 8px;
}
.fm--live .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-previous):not(.wpcf7-checkbox) {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  color: #12384f;
  border: 1px solid rgba(7, 59, 92, 0.14);
  border-radius: 5px;
  padding: 13px 14px;
  background: #fff;
  transition: border-color 0.3s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.fm--live .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-previous):not(.wpcf7-checkbox):focus {
  outline: none;
  border-color: #00a4e0;
}
.fm--live textarea.wpcf7-form-control {
  min-height: 150px;
  line-height: 1.9;
  resize: vertical;
}
.fm--live {
  /* プライバシーポリシー同意のチェックボックス */
}
.fm--live label.policy {
  border: none;
  margin-top: 26px;
  text-align: center;
}
.fm--live label.policy .wpcf7-form-control-wrap {
  margin-top: 0;
}
.fm--live label.policy .wpcf7-list-item {
  margin: 0;
}
.fm--live label.policy .wpcf7-list-item-label {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #12384f;
  margin-left: 7px;
}
.fm--live {
  /* 送信・確認・戻る。.bt と同じ形にそろえる。 */
}
.fm--live .wpcf7-submit,
.fm--live .wpcf7-previous {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  padding: 17px 30px;
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 0.4s cubic-bezier(0.2, 0.7, 0.28, 1), color 0.4s cubic-bezier(0.2, 0.7, 0.28, 1);
}
.fm--live .wpcf7-submit {
  background: #073b5c;
  color: #fff;
}
.fm--live .wpcf7-submit:hover {
  background: #00a4e0;
}
.fm--live .wpcf7-previous {
  background: #fff;
  color: #073b5c;
  border: 1px solid rgba(7, 59, 92, 0.14);
}
.fm--live .wpcf7-previous:hover {
  background: #e4f4fc;
}
.fm--live {
  /* ボタンを中央に並べる。確認画面は「戻る」と「送信」の2つ。 */
}
.fm--live .wpcf7-submit,
.fm--live .wpcf7-previous {
  margin: 12px 6px 0;
}
.fm--live form.wpcf7-form > p:last-of-type {
  margin-top: 26px;
  text-align: center;
}
.fm--live {
  /* エラー表示 */
}
.fm--live .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #c0392b;
}
.fm--live {
  /*
   * 送信結果の枠。枠線の色は CF7 が状態ごとに変える（成功=緑 / 失敗=赤）
   * ので、こちらは字とそろえ位置だけにして色には触らない。
   */
}
.fm--live .wpcf7-response-output {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-align: center;
  color: #12384f;
}
.fm--live .wpcf7-spinner {
  display: block;
  margin: 12px auto 0;
}

/*
 * 確認画面は [multiform] が入力値を書き出すだけなので、
 * 入力欄ではなく「読むもの」として見せる。
 * 値は misato_multiform_wrap() が <span class="v"> で包んでいる。
 */
.fm--confirm label {
  color: #00a4e0;
  font-size: 12px;
  letter-spacing: 0.12em;
}
.fm--confirm .v {
  display: block;
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #12384f;
  line-height: 1.95;
}

.fm__agree {
  margin-top: 26px;
  text-align: center;
  font-size: 13px;
  color: #6f909f;
}
.fm__agree a {
  color: #073b5c;
  text-decoration: underline;
}

.fm__ft {
  margin-top: 26px;
  text-align: center;
}

/* ============================================================
   _privacy.scss
   プライバシーポリシー（page-privacy.php）専用。
   条文は読ませる箇所なので、ここだけ本文を左寄せにする。
   見出しと箱そのものは中央構成のまま。
   ============================================================ */
.pv__lead {
  font-size: 13.5px;
  color: #40606f;
  line-height: 2.1;
}

.pv {
  margin-top: 42px;
  text-align: left;
}
@media screen and (min-width: 769px) {
  .pv {
    margin-top: 56px;
  }
}
.pv .pv__sec {
  padding: 26px 0;
  border-top: 1px solid rgba(7, 59, 92, 0.14);
}
.pv .pv__sec:last-child {
  border-bottom: 1px solid rgba(7, 59, 92, 0.14);
}
@media screen and (min-width: 769px) {
  .pv .pv__sec {
    padding: 32px 0;
  }
}
.pv .pv__ttl {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #04263c;
  line-height: 1.7;
}
@media screen and (min-width: 769px) {
  .pv .pv__ttl {
    font-size: 17px;
  }
}
.pv .pv__n {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #00a4e0;
  margin-bottom: 4px;
}
.pv .pv__tx {
  margin-top: 10px;
  font-size: 13.5px;
  color: #40606f;
  line-height: 2.1;
}