@charset "utf-8";

/* =========================================================
   合同会社LINO  Corporate Site
   style.css
   ---------------------------------------------------------
   1. Tokens        変数（色・書体・余白）
   2. Base          リセット / 基本タイポグラフィ
   3. Layout        コンテナ / セクション
   4. Header        ヘッダー・ナビゲーション
   5. Loader        オープニングのロゴアニメーション
   6. Components    見出し・ボタン・画像・カード等
   7. Pages         各ページ固有
   8. Footer
   9. Motion        スクロール表示アニメーション
   ========================================================= */


/* =========================================================
   1. Tokens
   ========================================================= */
:root{
  /* --- Color ------------------------------------------- */
  --ground:      #F7FAFA;   /* 背景（寒色寄りの白） */
  --surface:     #FFFFFF;   /* カード・パネル */
  --surface-2:   #EDF4F4;   /* 一段沈めた面 */
  --ink:         #0C2A2F;   /* 基本文字色 */
  --ink-2:       #4C6A6E;   /* 副次テキスト */
  --ink-3:       #8AA3A6;   /* キャプション・補助 */
  --line:        #DDE9E9;   /* 罫線 */
  --line-2:      #B9D2D2;   /* 強めの罫線 */

  --cyan:        #00CCCC;   /* ブランドカラー（面・罫線・図版・大きい文字） */
  --cyan-deep:   #007A7A;   /* 小さい文字・リンク用（コントラスト確保） */
  --cyan-soft:   #E5F8F8;   /* 薄い面 */
  --coral:       #EB624A;   /* ロゴカラー。ここぞという一点にのみ */

  /* --- Type -------------------------------------------- */
  --f-mincho: "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --f-gothic: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --f-latin:  "Marcellus", "Times New Roman", serif;

  /* --- Layout ------------------------------------------ */
  --w-max: 1200px;
  --pad:   clamp(20px, 5vw, 48px);
  --head-h: 78px;

  /* --- Motion ------------------------------------------ */
  --ease: cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   2. Base
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-gothic);
  font-size: 16px;
  line-height: 2;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* 日本語を単語の途中で折り返さない（対応ブラウザのみ有効） */
  word-break: auto-phrase;
  line-break: strict;
}
body.is-locked{ overflow: hidden; }

img, svg{ max-width: 100%; height: auto; display: block; }

a{ color: var(--cyan-deep); text-decoration: none; transition: color .3s var(--ease); }
a:hover{ color: var(--ink); }

h1, h2, h3, h4{ margin: 0; line-height: 1.6; font-weight: 600; text-wrap: balance; }
p{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }

:focus-visible{
  outline: 2px solid var(--cyan-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link{
  position: absolute; top: -60px; left: 16px; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 4px 4px;
  font-size: 13px;
}
.skip-link:focus{ top: 0; color: #fff; }


/* =========================================================
   3. Layout
   ========================================================= */
.container{
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.container--narrow{ max-width: 880px; }

.section{ padding-block: clamp(72px, 11vw, 140px); }
.section--tight{ padding-block: clamp(56px, 8vw, 96px); }
.section--surface{ background: var(--surface); }
.section--soft{ background: var(--surface-2); }
.section--cyan{ background: var(--cyan-soft); }
/* セクションの切り替わりに、ブランドカラーの短い線を置く */
.section--surface, .section--cyan{ position: relative; }
.section--surface::before, .section--cyan::before{
  content: ""; position: absolute; left: 0; top: 0;
  width: clamp(96px, 14vw, 190px); height: 2px; background: var(--cyan);
}

.hr{ height: 1px; background: var(--line); border: 0; margin: 0; }


/* =========================================================
   4. Header
   ========================================================= */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--head-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background .45s var(--ease), box-shadow .45s var(--ease), height .45s var(--ease);
}
.site-header.is-stuck{
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  box-shadow: 0 1px 0 var(--line);
  height: 66px;
}
.progress{
  position: absolute; inset: auto 0 0 0; height: 2px;
  background: transparent; pointer-events: none;
}
.progress i{
  display: block; height: 100%; width: 0; background: var(--cyan);
  transform-origin: left;
}
.site-header:not(.is-stuck) .progress{ opacity: 0; }
.progress{ transition: opacity .4s var(--ease); }

.site-header__inner{
  width: 100%; max-width: var(--w-max); margin-inline: auto;
  padding-inline: var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

/* --- ロゴ（ヘッダー内） --- */
.brand{ display: flex; align-items: center; gap: 11px; color: var(--coral); }
.brand__mark{ width: 17px; flex: none; }
.brand__mark svg{ width: 100%; display: block; }
.brand__name{
  font-family: var(--f-mincho);
  font-size: 15px; letter-spacing: .12em; color: var(--ink);
  white-space: nowrap; line-height: 1;
}

/* --- ナビゲーション --- */
.nav{ display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.nav__foot{ display: none; }   /* スマホのドロワーでのみ表示する */
.nav__list{ display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); }
.nav__link{
  position: relative;
  font-size: 13.5px; letter-spacing: .06em; color: var(--ink); font-weight: 500;
  padding-block: 6px;
}
.nav__link::after{
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--cyan);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after{ transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"]{ color: var(--cyan-deep); }

/* --- ハンバーガー --- */
.nav-toggle{
  display: none;
  width: 44px; height: 44px; padding: 0; margin-right: -8px;
  background: none; border: 0; cursor: pointer;
  position: relative; z-index: 120;
}
.nav-toggle span{
  position: absolute; left: 11px; width: 22px; height: 1.5px;
  background: var(--ink); transition: transform .5s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(1){ top: 17px; }
.nav-toggle span:nth-child(2){ top: 23px; }
.nav-toggle span:nth-child(3){ top: 29px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }


/* =========================================================
   5. Loader（トップページのオープニング）
   ========================================================= */
.loader{
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--ground);
  transition: opacity .9s var(--ease), visibility .9s;
}
.loader.is-done{ opacity: 0; visibility: hidden; }

.loader__logo{ display: grid; justify-items: center; gap: 26px; }
.loader__mark{ width: 46px; color: var(--coral); }
.loader__mark svg{ width: 100%; overflow: visible; }
.loader__name{
  font-family: var(--f-mincho);
  font-size: 17px; letter-spacing: .3em; text-indent: .3em; color: var(--ink);
  opacity: 0;
}
.loader__rule{
  width: 0; height: 1px; background: var(--cyan);
  justify-self: center;
}

/* パーツごとの初期状態
   transform-box を明示しておくことで、古いブラウザでも基準点がずれない */
.loader .lg-bar,
.loader .lg-tri,
.loader .lg-dot{ transform-box: view-box; }
.loader .lg-bar{ transform: scaleY(0); transform-origin: 0 200px; }   /* 下から立ち上がる */
.loader .lg-tri{ opacity: 0; transform: translateX(16px); }           /* 右から滑り込む */
.loader .lg-dot{ opacity: 0; transform: translateY(-16px) scale(.5); transform-origin: 81px 23px; } /* 上から着地 */

/* 再生 */
.loader.is-playing .lg-bar{ animation: lgBar .85s var(--ease) forwards; }
.loader.is-playing .lg-tri{ animation: lgTri .8s var(--ease) .42s forwards; }
.loader.is-playing .lg-dot{ animation: lgDot .85s cubic-bezier(.34,1.4,.5,1) .66s forwards; }
.loader.is-playing .loader__name{ animation: lgName 1s var(--ease) .95s forwards; }
.loader.is-playing .loader__rule{ animation: lgRule 1.1s var(--ease) 1.15s forwards; }

@keyframes lgBar{ to{ transform: scaleY(1); } }
@keyframes lgTri{ to{ opacity: 1; transform: none; } }
@keyframes lgDot{ to{ opacity: 1; transform: none; } }
@keyframes lgName{ from{ opacity:0; transform: translateY(10px);} to{ opacity: 1; transform:none; } }
@keyframes lgRule{ to{ width: 108px; } }


/* =========================================================
   6. Components
   ========================================================= */

/* --- セクション見出し ------------------------------------ */
.sec-head{ margin-bottom: clamp(36px, 5vw, 64px); }
.sec-label{
  display: flex; align-items: center; gap: 14px;
  font-family: var(--f-latin);
  font-size: 12px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--cyan-deep);
  margin-bottom: 18px;
}
.sec-label::before{
  content: ""; width: 30px; height: 2px; background: var(--cyan); flex: none;
}
.sec-title{
  font-family: var(--f-mincho);
  font-size: clamp(25px, 4.2vw, 42px);
  line-height: 1.65; letter-spacing: .02em; font-weight: 600;
}
/* 見出しの中の一語だけをブランドカラーにする */
.em{ color: var(--cyan-deep); }
/* 暗い背景の上では、明るい方のブランドカラーを使う */
.cta__title .em, .page-head__title .em, .hero__title .em{ color: var(--cyan); }
.sec-lead{
  margin-top: 22px; color: var(--ink-2); font-size: 15.5px; line-height: 2.15;
  max-width: 36em;
}

/* --- 本文ブロック ---------------------------------------- */
.prose p{ color: var(--ink-2); font-size: 15.5px; line-height: 2.3; }
.prose p + p{ margin-top: 1.7em; }
.prose .lead{
  color: var(--ink); font-family: var(--f-mincho);
  font-size: clamp(18px, 2.3vw, 24px); line-height: 2; letter-spacing: .03em;
  margin-block: 1.8em;
  padding: 4px 0 4px clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--cyan);
}

/* --- ボタン ---------------------------------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: space-between; gap: 26px;
  min-width: 250px; padding: 19px 26px;
  font-size: 14.5px; font-weight: 500; letter-spacing: .08em;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  font-family: inherit;
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease), transform .4s var(--ease);
}
.btn__arrow{ width: 26px; height: 1px; background: currentColor; position: relative; flex: none; }
.btn__arrow::after{
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .btn__arrow{ animation: arrowGo .6s var(--ease); }
@keyframes arrowGo{
  40%{ transform: translateX(7px); opacity: 0; }
  41%{ transform: translateX(-7px); opacity: 0; }
  100%{ transform: none; opacity: 1; }
}

/* 主CTA：#00CCCC は文字色に使うとコントラスト不足のため、必ず「面」に使い濃色文字を載せる */
.btn--primary{ background: var(--cyan); color: var(--ink); }
.btn--primary:hover{ background: var(--ink); color: #fff; }

.btn--outline{ background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--outline:hover{ background: var(--ink); color: #fff; border-color: var(--ink); }

.btn--ghost{ min-width: 0; padding: 12px 0; gap: 18px; color: var(--ink); }
.btn--ghost:hover{ color: var(--cyan-deep); }

.btn--sm{ min-width: 0; padding: 13px 22px; gap: 18px; font-size: 13px; }

.btn-row{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; }

/* --- 画像 ------------------------------------------------ */
.imgbox{ position: relative; overflow: hidden; background: var(--surface-2); }
.imgbox img{ width: 100%; height: 100%; object-fit: cover; }
/* 地図などの埋め込みを枠いっぱいに広げる */
.imgbox iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.imgbox--wide{ aspect-ratio: 16 / 9; }
.imgbox--4x3{ aspect-ratio: 4 / 3; }
.imgbox--sq{  aspect-ratio: 1 / 1; }
.imgbox--tall{ aspect-ratio: 3 / 4; }

/* 画像脇に置く小さなキャプション */
.img-cap{
  margin-top: 12px; font-size: 11.5px; letter-spacing: .1em;
  color: var(--ink-3); font-family: var(--f-latin);
}

/* --- 交互配置ブロック ------------------------------------ */
/* 2カラム内の見出しは、カラム幅に合わせて一段小さくする */
.alt .sec-title, .creed .creed__title{ font-size: clamp(23px, 3.1vw, 34px); }

.alt{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 90px); align-items: center;
}
/* --rev はHTML上ですでに画像が先に置かれているため、
   order を足さずそのまま左に配置する（左右交互になる） */

/* --- カード --------------------------------------------- */
.cards{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
}
.card{
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.card:hover{
  border-color: var(--cyan);
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(12,42,47,.07);
}
.card__media{ aspect-ratio: 4 / 3; overflow: hidden; }
.card__media img{ width:100%; height:100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card__media img{ transform: scale(1.05); }
.card__body{ padding: 28px 26px 32px; display: flex; flex-direction: column; flex: 1; }
.card__num{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-latin); font-size: 13px; letter-spacing: .22em;
  color: var(--cyan-deep); margin-bottom: 12px;
}
.card__num::after{
  content: ""; width: 22px; height: 2px; background: var(--cyan);
  transition: width .45s var(--ease);
}
.card:hover .card__num::after{ width: 40px; }
.card__title{
  font-family: var(--f-mincho); font-size: 19px; line-height: 1.7; margin-bottom: 14px;
  transition: color .4s var(--ease);
}
.card:hover .card__title{ color: var(--cyan-deep); }
.card__text{ color: var(--ink-2); font-size: 14px; line-height: 2.05; flex: 1; }
.card__more{
  margin-top: 22px; font-size: 13px; letter-spacing: .06em; color: var(--cyan-deep);
  display: inline-flex; align-items: center; gap: 12px;
}
.card__more::after{
  content: ""; width: 20px; height: 1px; background: currentColor;
  transition: width .4s var(--ease);
}
.card:hover .card__more::after{ width: 32px; }

/* --- VALUE 一覧 ------------------------------------------ */
.values{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); }
.value{ background: var(--ground); padding: clamp(30px, 4vw, 48px); }
.value__head{
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.value__head::after{
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 46px; height: 2px; background: var(--cyan);
}
.value__ja{ font-family: var(--f-mincho); font-size: clamp(21px, 2.6vw, 27px); letter-spacing: .08em; }
.value__en{
  font-family: var(--f-latin); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cyan-deep);
}
.value__sub{ font-size: 14.5px; font-weight: 700; margin-bottom: 10px; }
.value__text{ color: var(--ink-2); font-size: 14.5px; line-height: 2.1; }

/* --- 理念の3枚（VISION / MISSION） ----------------------- */
.creed{ display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 56px); }
.creed__item{
  background: var(--surface); border-top: 2px solid var(--cyan);
  padding: clamp(32px, 4vw, 52px);
}
.creed__label{
  font-family: var(--f-latin); font-size: 11.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 8px;
}
.creed__ja{ font-size: 12.5px; color: var(--ink-3); letter-spacing: .1em; margin-bottom: 22px; }
.creed__title{
  font-family: var(--f-mincho); font-size: clamp(20px, 2.6vw, 27px);
  line-height: 1.8; margin-bottom: 20px;
}
.creed__text{ color: var(--ink-2); font-size: 14.5px; line-height: 2.15; }

/* --- 定義リスト（会社概要表） ---------------------------- */
.deflist{ border-top: 2px solid var(--cyan); }
.deflist__row{
  display: grid; grid-template-columns: 220px 1fr;
  gap: 24px; padding: 24px 4px; border-bottom: 1px solid var(--line);
}
.deflist__key{
  font-size: 13.5px; font-weight: 700; letter-spacing: .08em; color: var(--ink);
  display: flex; align-items: baseline; gap: 12px;
}
.deflist__key::before{
  content: ""; width: 12px; height: 2px; background: var(--cyan); flex: none;
  transform: translateY(-5px);
}
.deflist__val{ font-size: 15px; color: var(--ink-2); line-height: 1.95; }
.deflist__note{ display: block; font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }

/* --- ステップ（ご相談の流れ） ---------------------------- */
.steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.step{
  background: var(--surface); padding: 34px 26px 38px; position: relative;
  border-top: 2px solid var(--cyan);
}
.step__n{
  font-family: var(--f-latin); font-size: 28px; color: var(--cyan);
  line-height: 1; margin-bottom: 18px;
}
.step__t{ font-family: var(--f-mincho); font-size: 17px; margin-bottom: 12px; }
.step__d{ font-size: 13.5px; color: var(--ink-2); line-height: 2; }

/* --- CTA 帯 ---------------------------------------------- */
.cta{ background: var(--ink); color: #fff; padding-block: clamp(64px, 9vw, 116px); }
.cta__label{
  font-family: var(--f-latin); font-size: 12px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--cyan); margin-bottom: 20px;
  display: flex; align-items: center; gap: 14px;
}
.cta__label::before{ content:""; width: 34px; height: 1px; background: var(--cyan); flex: none; }
.cta__title{
  font-family: var(--f-mincho); font-size: clamp(24px, 3.6vw, 38px);
  line-height: 1.7; color: #fff; margin-bottom: 22px;
}
.cta__text{ color: rgba(255,255,255,.72); font-size: 15px; line-height: 2.15; max-width: 34em; }
.cta .btn--outline{ color: #fff; border-color: rgba(255,255,255,.3); }
.cta .btn--outline:hover{ background: #fff; color: var(--ink); border-color: #fff; }


/* =========================================================
   7. Pages
   ========================================================= */

/* --- トップ：ヒーロー（画像に重ねる） ------------------- */
.hero{
  position: relative;
  min-height: 580px;
  height: min(94vh, 880px);
  display: flex; align-items: flex-end;
  padding-bottom: clamp(52px, 7.5vw, 108px);
  overflow: hidden;
  background: var(--ink);          /* 画像読み込み前の下地 */
}
.hero__media{ position: absolute; inset: 0; }
/* <picture> は既定だと inline なので、入れ物いっぱいに広げる */
.hero__media picture, .page-head__media picture{ display: block; width: 100%; height: 100%; }
.hero__media img{
  width: 100%; height: 100%; object-fit: cover;
  /* 見せたい被写体が中央からずれている場合は下を変更（例: center 30%） */
  object-position: var(--hero-pos, center);
  transform: scale(1.12);
}
.is-ready .hero__media img{ animation: heroZoom 2.8s var(--ease) forwards; }
@keyframes heroZoom{ to{ transform: scale(1); } }

/* 文字を必ず読めるようにするための覆い。左が濃く、右へ抜ける */
.hero__veil{
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(100deg,
      rgba(7,30,34,.88)  0%,
      rgba(7,30,34,.70) 34%,
      rgba(7,30,34,.30) 66%,
      rgba(7,30,34,.16) 100%),
    linear-gradient(180deg, rgba(7,30,34,.46) 0%, rgba(7,30,34,0) 34%);
}
/* 覆いの上を、ブランドカラーのごく淡い膜でひと撫でする */
.hero__veil::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(0,204,204,.20) 0%, rgba(0,204,204,0) 52%);
  mix-blend-mode: screen;
}

.hero__inner{ position: relative; z-index: 2; width: 100%; }
/* 写真の明るい部分に重なっても読めるよう、ごく弱い影を敷く */
.hero__label, .hero__title, .hero__sub, .hero__en{
  text-shadow: 0 1px 14px rgba(7,30,34,.55);
}

.hero__label{
  display: flex; align-items: center; gap: 16px;
  font-family: var(--f-latin); font-size: 12.5px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--cyan);
  margin-bottom: 26px;
}
.hero__label::before{
  content: ""; width: 0; height: 2px; background: var(--cyan); flex: none;
}
.is-ready .hero__label::before{ animation: heroRule 1.1s var(--ease) .2s forwards; }
@keyframes heroRule{ to{ width: 46px; } }

.hero__title{
  font-family: var(--f-mincho); font-weight: 600; color: #fff;
  font-size: clamp(31px, 6.4vw, 72px);
  line-height: 1.5; letter-spacing: .03em;
}
/* 1行ずつ、下からせり上がって現れる */
.hero__title .ln{
  display: block; overflow: hidden;
  padding-block: .08em; margin-block: -.08em;
}
.hero__title .ln > span{ display: block; transform: translateY(115%); }
.is-ready .hero__title .ln > span{ animation: heroLine 1.25s var(--ease) forwards; }
.is-ready .hero__title .ln:nth-child(1) > span{ animation-delay: .34s; }
.is-ready .hero__title .ln:nth-child(2) > span{ animation-delay: .48s; }
@keyframes heroLine{ to{ transform: none; } }

.hero__sub{
  margin-top: 30px; color: rgba(255,255,255,.86);
  font-size: clamp(14px, 1.7vw, 16px); line-height: 2.2; max-width: 38em;
}
.hero__en{
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.22);
  display: inline-block;
  font-family: var(--f-latin); font-size: 12.5px;
  letter-spacing: .2em; color: rgba(255,255,255,.62);
}

.hero__scroll{
  position: absolute; right: var(--pad); bottom: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--f-latin); font-size: 10.5px;
  color: rgba(255,255,255,.7);
}
.hero__scroll span{ writing-mode: vertical-rl; letter-spacing: .24em; }
.hero__scroll i{
  display: block; width: 1px; height: 76px;
  background: rgba(255,255,255,.28); position: relative; overflow: hidden;
}
.hero__scroll i::after{
  content: ""; position: absolute; inset: 0; background: var(--cyan);
  animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{
  0%{ transform: translateY(-100%); }
  50%{ transform: translateY(0); }
  100%{ transform: translateY(100%); }
}

/* --- ヒーローに重なっている間のヘッダー ------------------ */
.site-header--overlay:not(.is-stuck) .brand__name,
.site-header--overlay:not(.is-stuck) .nav:not(.is-open) .nav__link{ color: #fff; }
.site-header--overlay:not(.is-stuck) .nav:not(.is-open) .nav__link[aria-current="page"]{ color: var(--cyan); }
.site-header--overlay:not(.is-stuck) .nav-toggle[aria-expanded="false"] span{ background: #fff; }

/* --- 下層：ページヘッダー -------------------------------- */
.page-head{ position: relative; padding-top: var(--head-h); background: var(--surface-2); }
.page-head__media{ position: relative; height: clamp(260px, 34vw, 380px); overflow: hidden; }
.page-head__media img{ width: 100%; height: 100%; object-fit: cover; }
.page-head__media::after{
  content: ""; position: absolute; inset: 0;
  /* 縦方向の覆いに加えて、文字が乗る左側を横方向にも落とす。
     明るい写真でも白文字が確実に読めるようにするため */
  background:
    linear-gradient(90deg,  rgba(7,30,34,.58) 0%, rgba(7,30,34,.28) 46%, rgba(7,30,34,.04) 100%),
    linear-gradient(180deg, rgba(7,30,34,.42) 0%, rgba(7,30,34,.24) 42%, rgba(7,30,34,.52) 100%);
}
.page-head__copy{
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding-bottom: clamp(30px, 4.5vw, 54px);
}
.page-head__label{
  font-family: var(--f-latin); font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: #fff; margin-bottom: 12px;
  display: flex; align-items: center; gap: 14px;
  text-shadow: 0 1px 12px rgba(7,30,34,.55);
}
.page-head__label::before{ content:""; width: 34px; height:1px; background: var(--cyan); flex: none; }
.page-head__title{
  font-family: var(--f-mincho); color: #fff;
  text-shadow: 0 1px 16px rgba(7,30,34,.5);
  font-size: clamp(26px, 4.4vw, 44px); line-height: 1.5; letter-spacing: .04em;
}

/* --- パンくず -------------------------------------------- */
.crumbs{ padding-block: 18px; border-bottom: 1px solid var(--line); }
.crumbs ol{ display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--ink-3); }
.crumbs li + li::before{ content: "／"; margin-right: 10px; color: var(--line-2); }
.crumbs li:last-child{ color: var(--cyan-deep); }
.crumbs a{ color: var(--ink-2); }
.crumbs a:hover{ color: var(--cyan-deep); }

/* --- サービス詳細ブロック -------------------------------- */
.svc{ padding-block: clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--line); }
.svc:last-of-type{ border-bottom: 0; }
.svc__grid{
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 6vw, 82px); align-items: start;
}
/* 同上。画像が左、本文が右になる */
.svc__n{
  font-family: var(--f-latin); font-size: clamp(44px, 7vw, 76px); line-height: 1;
  color: var(--cyan); margin-bottom: 22px;
}
.svc__cat{
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 13px; letter-spacing: .14em; font-weight: 500;
  color: var(--cyan-deep); margin-bottom: 14px;
}
.svc__cat::before{ content: ""; width: 7px; height: 7px; background: var(--cyan); flex: none; }
.svc__title{
  font-family: var(--f-mincho); font-size: clamp(22px, 3vw, 32px);
  line-height: 1.7; margin-bottom: 28px;
}
.svc__points{
  margin-top: 34px; padding: 26px 28px; background: var(--cyan-soft); border-radius: 3px;
}
.svc__points h4{
  font-size: 12.5px; letter-spacing: .14em; color: var(--cyan-deep); margin-bottom: 14px;
  font-weight: 700;
}
.svc__points li{
  position: relative; padding-left: 22px; font-size: 14.5px; color: var(--ink);
  line-height: 2.05;
}
.svc__points li::before{
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 9px; height: 1px; background: var(--cyan-deep);
}

/* --- フォーム -------------------------------------------- */
.form{ display: grid; gap: 28px; }
/* ハニーポット：見た目にも読み上げにも出さずに隠す（display:none だと一部のボットが見抜くため） */
.hp-field{
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}
.field{ display: grid; gap: 10px; }
.field__label{
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em;
}
.badge{
  font-size: 10.5px; letter-spacing: .1em; padding: 3px 8px; border-radius: 2px;
  font-weight: 500;
}
.badge--req{ background: var(--coral); color: #fff; }
.badge--opt{ background: var(--surface-2); color: var(--ink-3); }

.input, .textarea, .select{
  width: 100%; padding: 15px 16px;
  font-family: inherit; font-size: 15.5px; line-height: 1.7; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 2px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.textarea{ min-height: 190px; resize: vertical; }
.select{
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
                    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px;
}
.input:focus, .textarea:focus, .select:focus{
  outline: none; border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,204,204,.16);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"]{
  border-color: var(--coral);
}
.field__error{
  font-size: 12.5px; color: var(--coral); min-height: 0; line-height: 1.7;
}
.field__hint{ font-size: 12.5px; color: var(--ink-3); line-height: 1.8; }

.check{
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font-size: 14.5px; line-height: 1.9;
}
.check input{
  width: 19px; height: 19px; margin: 5px 0 0; flex: none; accent-color: var(--cyan-deep);
  cursor: pointer;
}
.form__foot{ margin-top: 8px; display: grid; gap: 20px; justify-items: start; }

.form-note{
  background: var(--surface-2); border-left: 2px solid var(--cyan);
  padding: 20px 24px; font-size: 13.5px; color: var(--ink-2); line-height: 2;
}
.form-status{ font-size: 14.5px; line-height: 2; padding: 18px 22px; border-radius: 2px; display: none; }
.form-status.is-shown{ display: block; }
.form-status--ok{ background: var(--cyan-soft); color: var(--ink); border-left: 2px solid var(--cyan); }
.form-status--ng{ background: #FDEDEA; color: #8A2E1B; border-left: 2px solid var(--coral); }

/* --- 法務文書ページ -------------------------------------- */
.legal h2{
  font-family: var(--f-mincho); font-size: clamp(18px, 2.3vw, 23px);
  margin: 56px 0 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.legal h2::after{
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 52px; height: 2px; background: var(--cyan);
}
.legal h2:first-child{ margin-top: 0; }
.legal p{ color: var(--ink-2); font-size: 15px; line-height: 2.25; }
.legal p + p{ margin-top: 1.3em; }
.legal ol.num{ counter-reset: ln; margin-top: 1.1em; display: grid; gap: 10px; }
.legal ol.num li{
  counter-increment: ln; position: relative; padding-left: 32px;
  color: var(--ink-2); font-size: 15px; line-height: 2.15;
}
.legal ol.num li::before{
  content: "(" counter(ln) ")"; position: absolute; left: 0; top: 0;
  color: var(--cyan-deep); font-size: 13.5px;
}
.legal__meta{
  margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--ink-3); line-height: 2;
}


/* =========================================================
   8. Footer
   ========================================================= */
.site-footer{ background: var(--surface); border-top: 1px solid var(--line); position: relative; }
.site-footer::before{
  content: ""; position: absolute; left: 0; top: -1px;
  width: clamp(96px, 14vw, 190px); height: 2px; background: var(--cyan);
}
.site-footer__main{
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(32px, 5vw, 70px);
  padding-block: clamp(52px, 7vw, 84px);
}
.site-footer .brand{ margin-bottom: 22px; }
.site-footer__addr{ font-size: 13.5px; color: var(--ink-2); line-height: 2.1; font-style: normal; }
.site-footer__col h3{
  font-family: var(--f-latin); font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cyan-deep); margin-bottom: 18px; font-weight: 400;
}
.site-footer__col li + li{ margin-top: 12px; }
.site-footer__col a{ font-size: 13.5px; color: var(--ink-2); }
.site-footer__col a:hover{ color: var(--cyan-deep); }
.site-footer__base{
  border-top: 1px solid var(--line);
  padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between;
}
.copyright{ font-family: var(--f-latin); font-size: 11.5px; letter-spacing: .12em; color: var(--ink-3); }


/* =========================================================
   9. Motion（スクロールでふわっと表示）
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.15s var(--ease) var(--d, 0s),
    transform 1.15s var(--ease) var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.is-in{ opacity: 1; transform: none; }

/* 画像は少し大きい状態からゆっくり戻す */
.reveal-img .imgbox img,
.reveal-img.imgbox img{
  transform: scale(1.07);
  transition: transform 2s var(--ease) var(--d, 0s);
}
.reveal-img.is-in .imgbox img,
.reveal-img.is-in.imgbox img{ transform: none; }

/* 罫線が伸びる */
.reveal-line{
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s var(--ease) var(--d, 0s);
}
.reveal-line.is-in{ transform: none; }

/* ページ読み込み直後（ヒーローなど）に自動再生 */
.enter{ opacity: 0; transform: translateY(24px); }
.is-ready .enter{
  animation: enterUp 1.2s var(--ease) var(--d, 0s) forwards;
}
@keyframes enterUp{ to{ opacity: 1; transform: none; } }


/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1000px){
  .site-footer__main{ grid-template-columns: 1fr 1fr; }
  .steps{ grid-template-columns: repeat(2, 1fr); }
}

/* --- ここから下はハンバーガーメニュー（タブレット・スマホ） --- */
@media (max-width: 1024px){

  /* すりガラス効果は position:fixed の基準を作ってしまい、
     メニューがヘッダーの高さに閉じ込められる。スマホでは無効にする */
  .site-header.is-stuck{
    background: rgba(255,255,255,.97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-toggle{ display: block; }

  /* --- ドロワー本体 --- */
  .nav{
    position: fixed; inset: 0; z-index: 110;
    height: 100vh;
    height: 100dvh;              /* アドレスバーの伸縮に追従 */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--head-h) + 26px) var(--pad) calc(var(--pad) + 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    /* 白地にブランドカラーをうっすら重ねて、背面と明確に切り分ける */
    background-color: var(--surface);
    background-image:
      linear-gradient(180deg, rgba(0,204,204,.10) 0%, rgba(0,204,204,0) 38%),
      linear-gradient(0deg,   rgba(0,204,204,.06) 0%, rgba(0,204,204,0) 22%);

    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .4s var(--ease), visibility .4s, transform .4s var(--ease);
  }
  .nav.is-open{ opacity: 1; visibility: visible; transform: none; }

  /* 上辺にブランドカラーの帯 */
  .nav::before{
    content: ""; position: fixed; inset: 0 0 auto 0; height: 3px;
    background: var(--cyan); z-index: 1;
  }

  /* メニューを開いてもロゴは見えるようにする */
  .site-header .brand{ position: relative; z-index: 120; }

  /* --- 項目 --- */
  .nav__list{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    border-top: 1px solid var(--line);
  }
  .nav__list li{ border-bottom: 1px solid var(--line); }

  .nav__link{
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 21px 2px;
    font-family: var(--f-mincho);
    font-size: 18px; letter-spacing: .1em;
    color: var(--ink);
  }
  /* PC用の下線は、スマホでは矢印に置き換える */
  .nav__link::after{
    content: ""; position: static; transform: none;
    background: none;              /* PC用の下線スタイルを打ち消す */
    width: 7px; height: 7px; flex: none;
    border-top: 1.5px solid var(--line-2);
    border-right: 1.5px solid var(--line-2);
    rotate: 45deg;
    transition: border-color .3s var(--ease);
  }
  .nav__link[aria-current="page"]{ color: var(--cyan-deep); }
  .nav__link[aria-current="page"]::after{ border-color: var(--cyan); }

  /* 現在地には左側にブランドカラーの印をつける */
  .nav__list li:has(.nav__link[aria-current="page"]){
    box-shadow: inset 3px 0 0 var(--cyan);
    padding-left: 14px;
  }

  /* --- CTA --- */
  .nav .btn{
    width: 100%; min-width: 0; margin-top: 30px;
    justify-content: space-between; padding: 20px 22px;
    font-size: 15px;
  }

  /* --- 下部の連絡先 --- */
  .nav__foot{
    display: block;
    margin-top: auto; padding-top: 34px;
    font-size: 12.5px; line-height: 1.95; color: var(--ink-3); font-style: normal;
  }
  .nav__foot a{ color: var(--ink-2); }

  /* 開いている間は文字色を戻す */
  .nav.is-open .nav__link{ color: var(--ink); }
  .nav.is-open .nav__link[aria-current="page"]{ color: var(--cyan-deep); }
  .nav-toggle[aria-expanded="true"] span{ background: var(--ink); }
  .site-header--overlay.is-nav-open:not(.is-stuck) .brand__name,
  .site-header--overlay:not(.is-stuck):has(.nav.is-open) .brand__name{ color: var(--ink); }
}

@media (max-width: 860px){
  :root{ --head-h: 64px; }


  .alt, .creed, .svc__grid{ grid-template-columns: 1fr; }

  /* スマホでは、事業紹介の画像を必ず見出しより先（上）に置く
     （PC の左右交互レイアウトはそのまま） */
  .svc__media, .svc--rev .svc__media{ order: -1; }
  .cards{ grid-template-columns: 1fr; }
  .values{ grid-template-columns: 1fr; }
  /* スマホは文字が下に寄るので、覆いを「上下が濃い」形に切り替える */
  .hero__veil{
    background:
      linear-gradient(180deg,
        rgba(7,30,34,.54)  0%,
        rgba(7,30,34,.20) 28%,
        rgba(7,30,34,.30) 50%,
        rgba(7,30,34,.86) 100%);
  }

  /* スマホでは高さを抑えめにして、続きがあることを見せる */
  .hero{
    height: min(86vh, 720px); min-height: 500px;
    padding-bottom: clamp(40px, 9vw, 64px);
  }
  .hero__scroll{ display: none; }
  .hero__sub{ margin-top: 24px; }
  .deflist__row{ grid-template-columns: 1fr; gap: 8px; }
  .site-footer__main{ grid-template-columns: 1fr; }
  .btn{ min-width: 100%; }
  .btn--ghost, .btn--sm{ min-width: 0; }
  .btn-row .btn{ min-width: 100%; }
}

/* アドレスバーの伸縮で高さが跳ねないようにする（対応ブラウザのみ） */
@supports (height: 1svh){
  @media (max-width: 860px){
    .hero{ height: min(86svh, 720px); }
  }
}

@media (max-width: 520px){
  .steps{ grid-template-columns: 1fr; }
  body{ font-size: 15.5px; }
}


/* =========================================================
   アニメーションを減らす設定の環境に配慮
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .enter{ opacity: 1 !important; transform: none !important; }
  .reveal-img .imgbox img{ transform: none !important; }
  .reveal-line{ transform: none !important; }
}


/* =========================================================
   印刷
   ========================================================= */
@media print{
  .site-header, .hero__scroll, .cta, .nav-toggle{ display: none !important; }
  body{ background: #fff; }
  .reveal, .enter{ opacity: 1 !important; transform: none !important; }
}