@charset "UTF-8";
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  min-width: 0;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

main {
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

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

dt {
  font-weight: normal;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

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

abbr[title] {
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.3em;
}

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable]:focus {
  outline: auto;
}

table {
  border-color: inherit;
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* 汎用 */
/* プリセット（★@contentを必ず中継） */
/* hover可能デバイス */
@media print {
  .u-pc {
    display: block;
  }
  .u-tab,
  .u-sp {
    display: none;
  }
}
a[href^="tel:"] {
  text-decoration: none;
}

.c-bg-sky {
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #eef8fc 100%);
}

.c-bg-grad {
  position: relative;
  isolation: isolate;
  background: radial-gradient(55% 70% at 88% 0%, rgba(120, 205, 250, 0.45) 0%, rgba(120, 205, 250, 0) 70%), radial-gradient(45% 60% at 0% 100%, rgba(110, 214, 196, 0.3) 0%, rgba(110, 214, 196, 0) 70%), linear-gradient(135deg, #f1f8fd 0%, #e3f1fb 48%, #e7f6f5 100%);
}
.c-bg-grad::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(../images/common/bg.webp) repeat left top/20% auto;
  opacity: 0.04;
  pointer-events: none;
}

.c-bg-slant {
  clip-path: polygon(0 clamp(24px, 5vw, 80px), 100% 0, 100% 100%, 0 100%);
  padding-top: clamp(24px, 5vw, 80px);
}

.contents-bg {
  overflow: hidden;
  position: relative;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(ellipse at 80% 20%, #c1e6fa 0%, rgba(193, 230, 250, 0) 50%), radial-gradient(ellipse at bottom left, #8dcc9e 0%, rgba(141, 204, 158, 0) 60%), linear-gradient(135deg, rgba(20, 50, 80, 0) 0%, rgba(20, 50, 80, 0) 65%, #99c3da 100%), linear-gradient(45deg, #87ce9a 0%, #a4dad0 40%, #b2e2eb 75%, #c1e6fa 100%);
  background-blend-mode: overlay, screen, color-dodge, multiply, normal;
  z-index: 0;
}
.contents-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  background-position: left top;
  background-size: 20% auto;
  background-image: url(../images/common/bg.webp);
  z-index: -1;
  opacity: 0.03;
}

[data-skew] {
  will-change: transform;
  transform-origin: center;
}

.text-en {
  font-family: "Syncopate", sans-serif;
}

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

:root {
  --header-h: 80px;
}

html {
  min-width: 320px;
}
@media (width < 350px) {
  html {
    font-size: calc(4.5714285714px * 1vw);
  }
}

body {
  color: #333333;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", "Roboto", "YuGothic", "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", "Hiragino Sans", "Meiryo", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Sans Emoji";
  overscroll-behavior-y: none;
  max-width: 100% !important;
}

main {
  overflow: clip;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s linear;
  z-index: 1;
  max-width: 100%;
}

html.is-main-visible main {
  opacity: 1;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  border: none;
  display: block;
}

html {
  -ms-overflow-style: none;
  /* IE, Edge(Legacy) */
  scrollbar-width: none;
  /* Firefox */
}

body::-webkit-scrollbar {
  display: none;
  /* Chrome, Edge, Safari, Opera */
}

html {
  scroll-padding-top: clamp(80px, 10vw - 18px, 120px);
}
@media (width < 768px) {
  html {
    scroll-padding-top: clamp(50px, 7vw + 24px, 80px);
  }
}

/* ======================================
Header
====================================== */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 9999;
  padding: 24px clamp(20px, 5vw - 29px, 40px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

.l-header.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 2000px;
  margin-inline: auto;
  margin-top: 20px;
}

.l-header__logo svg {
  width: clamp(180px, 2.3vw, 356px);
}

/* =====================
PC:nav
===================== */
.l-header__nav-list {
  display: flex;
  align-items: center;
  gap: clamp(13px, 5vw - 37px, 50px);
  padding: 8px 20px;
  background: #EFFDFF;
  border-radius: 999px;
  list-style: none;
}

.l-header__nav-link {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 100%;
  color: #003547;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  perspective: 600px;
  text-transform: uppercase;
  font-size: clamp(14px, 2.9vw, 16px);
}
.l-header__nav-link:hover {
  opacity: 1;
}

.l-header__nav-en,
.l-header__nav-ja {
  grid-area: 1/1;
  display: block;
  transition: transform 0.5s ease, opacity 0.5s ease;
  backface-visibility: hidden;
  white-space: nowrap;
}

/* 英語：通常表示 */
.l-header__nav-en {
  transform: rotateX(0deg);
  opacity: 1;
}

/* 日本語：通常は隠す */
.l-header__nav-ja {
  font-family: sans-serif;
  font-size: 13px;
  transform: rotateX(-90deg);
  transform-origin: center bottom;
  opacity: 0;
}
@media (width < 1100px) {
  .l-header__nav-ja {
    transform: none;
    opacity: 1;
  }
}

/* ======================
Hover
====================== */
.l-header__nav-link:hover .l-header__nav-en {
  transform: rotateX(90deg);
  transform-origin: center top;
  opacity: 0;
}
@media (width < 1100px) {
  .l-header__nav-link:hover .l-header__nav-en {
    transform: translate(0px);
    opacity: 1;
  }
}
.l-header__nav-link:hover .l-header__nav-ja {
  transform: rotateX(0deg);
  opacity: 1;
}
@media (width < 1100px) {
  .l-header__nav-link:hover .l-header__nav-ja {
    transform: translate(0px);
    opacity: 1;
  }
}

.l-header__nav-en {
  color: #003547;
  font-family: "Syncopate", sans-serif;
  text-decoration: none;
  font-size: clamp(14px, 0vw + 9px, 16px);
  font-weight: 700;
  text-transform: uppercase;
}
@media (width < 1100px) {
  .l-header__nav-en {
    font-size: 20px;
  }
}

.l-header__nav-item--contact .l-header__nav-link {
  padding: 6px 20px;
  background: #003547;
  color: #fff;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.l-header__nav-flex--mobile-row {
  display: flex;
  gap: clamp(20px, 14vw - 128px, 80px);
}
@media (width < 1100px) {
  .l-header__nav-flex--mobile-row {
    margin-top: 80px;
  }
}
@media (width < 480px) {
  .l-header__nav-flex--mobile-row {
    margin-top: 50px;
    gap: 15px;
  }
}

/* =====================
Hamburger
===================== */
.l-header__hamburger {
  display: none;
  position: relative;
  width: 50px;
  height: 50px;
  border: 0;
  cursor: pointer;
  z-index: 10001;
  background: #EFFDFF;
  border-radius: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.l-header__hamburger span {
  position: absolute;
  left: 50%;
  width: 28px;
  height: 2px;
  background: #003547;
  transition: 0.4s ease;
}

.l-header__hamburger span:nth-child(1) {
  top: 16px;
  transform: translateX(-50%);
}

.l-header__hamburger span:nth-child(2) {
  top: 24px;
  transform: translateX(-50%);
}

.l-header__hamburger span:nth-child(3) {
  top: 32px;
  transform: translateX(-50%);
}

/* =====================
Open
===================== */
.l-header.is-open .l-header__hamburger span:nth-child(1) {
  top: 24px;
  transform: translateX(-50%) rotate(45deg);
}

.l-header.is-open .l-header__hamburger span:nth-child(2) {
  opacity: 0;
}

.l-header.is-open .l-header__hamburger span:nth-child(3) {
  top: 24px;
  transform: translateX(-50%) rotate(-45deg);
}

/* ヘッダー：ドット */
.bubble {
  position: absolute;
  bottom: 10px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  filter: blur(0.2px);
  animation: floatBubble 3s infinite ease-in-out;
}

/* サイズ・色*/
.bubble1 {
  width: 6px;
  height: 6px;
  left: 25%;
  bottom: -8%;
  background: #67c7ff;
  animation-delay: 0s;
}

.bubble2 {
  width: 4px;
  height: 4px;
  left: 50%;
  bottom: -8%;
  background: #ffd66b;
  animation-delay: 0.6s;
}

.bubble3 {
  width: 7px;
  height: 7px;
  left: 70%;
  bottom: -8%;
  background: #a8e6ff;
  animation-delay: 1.2s;
}

@keyframes floatBubble {
  0% {
    transform: translateY(0) scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  60% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(-30px) scale(1.2);
    opacity: 0;
  }
}
.l-header__nav-link:hover + .bubble,
.l-header__nav-item:hover .bubble {
  animation-duration: 2s;
  filter: blur(0px);
}

/* =====================
Tab
===================== */
@media (width < 1100px) {
  .l-header {
    padding: 10px 20px;
  }
  /* ======================
  Hamburger
  ====================== */
  .l-header__hamburger {
    display: block;
  }
  .l-header__hamburger span {
    background: #000;
  }
  .l-header.is-open .l-header__hamburger span {
    background: #003547;
  }
  /* ======================
  Menu
  ====================== */
  .l-header__nav {
    position: fixed;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: block;
    background: #EFFDFF;
    border: 8px solid #003547;
    border-radius: 8px;
    padding: clamp(50px, 14vw - 98px, 110px) clamp(20px, 2vw + 13px, 28px) clamp(28px, 13vw - 100px, 80px);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.98);
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
  }
  .l-header.is-open .l-header__nav {
    opacity: 1;
    visibility: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 780px;
    transform: translateY(0) scale(1);
    height: 98vh;
    min-height: 0;
    justify-content: flex-start;
  }
  /* ======================
  List
  ====================== */
  .l-header__nav-list {
    display: block;
    background: transparent;
    padding: 0;
    margin: 0;
  }
  .l-header__nav-item {
    border-bottom: 1px solid #9fcfd5;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .l-header__nav-item:last-child {
    border-bottom: none;
  }
  .l-header.is-open .l-header__nav-item {
    opacity: 1;
    transform: translateY(0);
  }
  .l-header.is-open .l-header__nav-item--recruit {
    border-bottom: none;
  }
  .l-header.is-open .l-header__nav-item:nth-child(1) {
    transition-delay: 0.05s;
  }
  .l-header.is-open .l-header__nav-item:nth-child(2) {
    transition-delay: 0.1s;
  }
  .l-header.is-open .l-header__nav-item:nth-child(3) {
    transition-delay: 0.15s;
  }
  .l-header.is-open .l-header__nav-item:nth-child(4) {
    transition-delay: 0.2s;
  }
  .l-header.is-open .l-header__nav-item:nth-child(5) {
    transition-delay: 0.25s;
  }
  .l-header.is-open .l-header__nav-item:nth-child(6) {
    transition-delay: 0.3s;
  }
  .l-header.is-open .l-header__hamburger {
    border: 1px solid #003547;
  }
  .l-header__nav-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(18px, 1vw + 13px, 24px) 20px 5px;
    color: #003547;
    text-decoration: none;
    font-family: "Syncopate", sans-serif;
    font-size: clamp(23px, 1vw + 19px, 28px);
    font-weight: 700;
    line-height: 1.2;
  }
  .l-header__nav-ja {
    font-size: 13px;
    padding-bottom: 24px;
    font-weight: 450;
  }
  /* =========================================================
      ヘッダー: contact / recruit
  ========================================================= */
  .l-header__nav-item--contact .l-header__nav-link,
  .l-header__nav-item--recruit .l-header__nav-link {
    position: relative;
    isolation: isolate;
    display: flex;
    justify-content: center;
    align-items: center;
    height: clamp(55px, 5vw + 36px, 77px);
    padding: clamp(16px, 2vw + 9px, 24px) clamp(22px, 2vw, 32px);
    overflow: hidden;
    border: 1px solid #003547;
    border-radius: 999px;
    background: #fff;
    color: #003547;
    font-size: 18px;
    transition: color 0.4s ease;
  }
  .l-header__nav-item--contact .l-header__nav-link::before,
  .l-header__nav-item--recruit .l-header__nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: #2A62A3;
    transform-origin: bottom;
    scale: 1 0;
    transition: scale 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  }
}
@media (width < 1100px) and (hover: hover) {
  .l-header__nav-item--contact .l-header__nav-link:hover,
  .l-header__nav-item--recruit .l-header__nav-link:hover {
    color: #fff;
  }
  .l-header__nav-item--contact .l-header__nav-link:hover::before,
  .l-header__nav-item--recruit .l-header__nav-link:hover::before {
    scale: 1 1;
  }
  .l-header__nav-item--contact .l-header__nav-link:hover .bubble,
  .l-header__nav-item--recruit .l-header__nav-link:hover .bubble {
    animation-duration: 2s;
  }
  .l-header__nav-item--contact .l-header__nav-link:hover .bubble1,
  .l-header__nav-item--contact .l-header__nav-link:hover .bubble3,
  .l-header__nav-item--recruit .l-header__nav-link:hover .bubble1,
  .l-header__nav-item--recruit .l-header__nav-link:hover .bubble3 {
    background: #fff;
  }
  .l-header__nav-item--contact .l-header__nav-link:hover .bubble2,
  .l-header__nav-item--recruit .l-header__nav-link:hover .bubble2 {
    border-color: #fff;
  }
}
@media (width < 1100px) {
  .l-header__nav-item--contact .l-header__nav-link:focus-visible,
  .l-header__nav-item--recruit .l-header__nav-link:focus-visible {
    outline: 2px solid #0081ad;
    outline-offset: 3px;
  }
}
.l-header__nav-link .bubble {
  position: absolute;
  bottom: -10px;
  z-index: -1;
  display: block;
  border: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: background-color 0.4s ease, border-color 0.4s ease;
  animation: l-header-bubble 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.l-header__nav-link .bubble.bubble1 {
  left: 24%;
  width: 6px;
  height: 6px;
  background: #0081ad;
  animation-delay: 0s;
}

.l-header__nav-link .bubble.bubble2 {
  left: 52%;
  width: 8px;
  height: 8px;
  border: 1px solid #2A62A3;
  background: transparent;
  animation-delay: 1.2s;
}

.l-header__nav-link .bubble.bubble3 {
  left: 74%;
  width: 4px;
  height: 4px;
  background: #8fd0ef;
  animation-delay: 2.4s;
}

@keyframes l-header-bubble {
  0% {
    opacity: 0;
    translate: 0 0;
    scale: 0.6;
  }
  15% {
    opacity: 1;
  }
  75% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    translate: 0 -64px;
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .l-header__nav-link .bubble {
    display: none;
  }
}
/* =========================================================
    フッター（footer.php）
    -----------------------------------------------------
    テーマ: レトロだけどいまっぽく（紺 + 生成りの2色。グラデーションは控えめ。紙のようなざらつき）
    - 全体: 紺の面に、うっすら細かいざらつき
    - RECRUIT（.l-footer__join）: 採用情報ページの Entry と同じ形
        左に写真を固定したパララックス（右のふちを斜めに切る）、右に明るいグラデーションの面
        ※ 採用情報ページとトップでは出ない（footer.php の条件）ので、Entry と並ぶことはない
    - CONTACT: 紺の地にそのまま置くフラットな形。下に細い線で区切る
        左に見出し（ラベル・「CONTACT」・文）。「CONTACT」はスクロールで1文字ずつ下から出る（対応ブラウザだけ）
        右にタイル2枚（上に絵、下に名前と矢印）。メールは水色 + 封筒、電話は生成り + 黒電話
        絵はダンプ・ショベルカーと同じ描き方。いつもほのかに動き、ホバーで少し大きく動く（タイルはフラットのまま）
    - LOWER: 「EST. 1975」のスタンプ + 会社名・住所 / 番号つきのメニュー / SNS → 二重線 → コピーライト
    - いちばん下: 「OOTAHARA KOGYO.」の大きな文字（背景より少し明るい紺。main.js が1文字ずつに分けて動かす）
    - 角は立てる（面・カード・アイコンは四角）
    ※ Sass の変数は使わず値を直接書いています。レスポンシブは @include（to-tab = 767px 以下 / to-sp = 479px 以下 / down(○px) = ○px 以下）
    ※ 1行目の @use のパスは、今の _l-footer.scss の1行目に合わせてください
    ※ ページ切り替えの .page-transition はこのファイルに入れていません（今の _l-footer.scss にあれば、その部分は残してください）
========================================================= */
.l-footer {
  position: relative;
  overflow: hidden;
  background: #003547;
  color: #f6f4ef;
}
.l-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  pointer-events: none;
}

.l-footer__inner {
  position: relative;
  z-index: 1;
}

/* =========================================================
    RECRUIT（採用情報ページの Entry と同じ形）
========================================================= */
.l-footer__join {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(480px, 42vw, 660px);
  color: #003547;
}
@media (width < 900px) {
  .l-footer__join {
    grid-template-columns: minmax(0, 1fr);
  }
}

.l-footer__join-photo.c-parallax {
  height: auto;
  clip-path: polygon(0 0, 100% 0, calc(100% - clamp(80px, 9vw, 160px)) 100%, 0 100%);
}
@media (width < 900px) {
  .l-footer__join-photo.c-parallax {
    height: clamp(220px, 56vw, 400px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
  }
}

.l-footer__join-panel {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: calc(clamp(80px, 9vw, 160px) * -1);
  padding: clamp(56px, 6vw, 100px) clamp(24px, 5vw, 96px) clamp(140px, 14vw, 220px) calc(clamp(80px, 9vw, 160px) + clamp(24px, 3vw, 56px));
  overflow: hidden;
  clip-path: polygon(clamp(80px, 9vw, 160px) 0, 100% 0, 100% 100%, 0 100%);
}
.l-footer__join-panel .c-dots {
  --size: clamp(180px, 20vw, 300px);
}
@media (width < 900px) {
  .l-footer__join-panel {
    margin: -40px 0 0;
    padding: 72px 22px 150px;
    clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
  }
}

.l-footer__join-body {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.l-footer__join-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(10px, 1.2vw, 16px);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #0081ad;
}
.l-footer__join-label::before {
  content: "";
  flex: none;
  width: 32px;
  height: 1px;
  background: #0081ad;
}

.l-footer__join-word {
  margin: 0;
  padding-right: 0.06em;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(44px, 6vw, 104px);
  font-style: italic;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-transform: uppercase;
  background: linear-gradient(100deg, #2A62A3 0%, #0081ad 60%, #1aa6b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.l-footer__join-title {
  margin: clamp(18px, 2vw, 28px) 0 0;
  font-size: clamp(22px, 0.9rem + 1.3vw, 38px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #003547;
}

.l-footer__join-text {
  margin: 18px 0 0;
  font-size: clamp(13px, 0.8rem + 0.2vw, 15px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #22414e;
}

.l-footer__join-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(24px, 3vw, 40px);
}

.l-footer__join-machine {
  position: absolute;
  right: clamp(16px, 4vw, 72px);
  bottom: clamp(18px, 2.4vw, 40px);
  z-index: 0;
  display: block;
  width: clamp(150px, 15vw, 250px);
}
.l-footer__join-machine svg {
  display: block;
  width: 100%;
  height: auto;
}

.l-footer__join-text,
.l-footer__join-buttons {
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .l-footer__join-text:not(.is-in),
.is-motion .l-footer__join-buttons:not(.is-in) {
  opacity: 0;
  translate: 0 20px;
}

/* =========================================================
    CONTACT（紺の地にそのまま置く。フラット）
    PC: 左に見出し（ラベル・CONTACT・文）、右にメールと電話のタイル2枚
    タイル: 上に絵（封筒 / 黒電話。ダンプ・ショベルカーと同じ描き方: 平らな形 + 青のグラデーション + ざらつき）、下に名前と矢印
            メールは水色、電話は生成り
    いつも: 封筒がゆっくり上下して手紙が少しのぞく / ダイヤルがゆっくり回る（どちらもほのかに）
    ホバー: タイルはフラットのまま。手紙が上に出る / 受話器が持ち上がる。矢印の四角は明るい青に
    スマホ: タイルは横長（左に絵、右に名前と矢印）
========================================================= */
.l-footer__contact {
  padding-top: clamp(88px, 9vw, 140px);
}

.l-footer__contact-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: end;
  gap: clamp(36px, 6vw, 96px);
  padding-bottom: clamp(64px, 7vw, 110px);
  border-bottom: 1px solid rgba(246, 244, 239, 0.16);
  color: #f6f4ef;
}
@media (width < 900px) {
  .l-footer__contact-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

.l-footer__contact-orbit,
.l-footer__contact-dots {
  display: none;
}

.l-footer__contact-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #f6f4ef;
}
.l-footer__contact-label::before {
  content: "";
  flex: none;
  width: 32px;
  height: 1px;
  background: #9fe0ff;
}
.l-footer__contact-label .text-en {
  font-family: "Syncopate", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #9fe0ff;
}

.l-footer__contact-title {
  display: flex;
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(38px, 5.2vw, 80px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #f6f4ef;
}

.l-footer__contact-char {
  display: inline-block;
}

@supports (animation-timeline: view()) {
  .l-footer__contact-char {
    animation: l-footer-char linear both;
    animation-timeline: view();
    animation-range: entry calc(var(--i, 0) * 7%) cover calc(22% + var(--i, 0) * 2%);
  }
}
.l-footer__contact-text {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-size: clamp(13px, 0.8rem + 0.2vw, 15px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  color: rgba(246, 244, 239, 0.72);
}
.l-footer__contact-text span {
  display: inline-block;
}

.l-footer__contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}
@media (width < 480px) {
  .l-footer__contact-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.l-footer__contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "ill ill" "label arrow";
  align-items: end;
  column-gap: 14px;
  padding: clamp(16px, 2vw, 26px);
  background: #f6f4ef;
  color: #003547;
  text-decoration: none;
}
.l-footer__contact-card:focus-visible {
  outline: 2px solid #9fe0ff;
  outline-offset: 4px;
}
@media (width < 480px) {
  .l-footer__contact-card {
    grid-template-columns: 96px minmax(0, 1fr) auto;
    grid-template-areas: "ill label arrow";
    align-items: center;
    padding: 12px 14px 12px 10px;
  }
}

.l-footer__contact-card--mail {
  background: #c9ecfb;
}

.l-footer__contact-icon {
  grid-area: ill;
  display: block;
  margin-bottom: clamp(10px, 1.4vw, 18px);
}
@media (width < 480px) {
  .l-footer__contact-icon {
    margin-bottom: 0;
  }
}

.l-footer__ill {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}
.l-footer__ill g {
  transform-box: fill-box;
}

.l-footer__ill-env {
  animation: l-footer-bob 5s ease-in-out infinite alternate;
}

.l-footer__ill-letter {
  transition: translate 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.l-footer__ill-letter-in {
  animation: l-footer-peek 5s ease-in-out -2s infinite alternate;
}

.l-footer__ill-dial {
  transform-origin: 50% 50%;
  animation: l-footer-dial 9s linear infinite;
}

.l-footer__ill-handset {
  transform-origin: 50% 100%;
  transition: translate 0.6s cubic-bezier(0.19, 1, 0.22, 1), rotate 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.l-footer__contact-label-wrap {
  grid-area: label;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.l-footer__contact-en {
  font-family: "Syncopate", sans-serif;
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-transform: uppercase;
}

.l-footer__contact-ja {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #22414e;
}
@media (width < 480px) {
  .l-footer__contact-ja {
    font-size: 11px;
  }
}

.l-footer__contact-arrow {
  grid-area: arrow;
  display: grid;
  place-items: center;
  width: clamp(38px, 3.2vw, 46px);
  aspect-ratio: 1;
  overflow: hidden;
  background: #003547;
  color: #f6f4ef;
  transition: background-color 0.4s ease;
}
.l-footer__contact-arrow svg {
  display: block;
  width: 42%;
  height: 42%;
}

@media (hover: hover) {
  .l-footer__contact-card:hover .l-footer__contact-arrow {
    background-color: #2A62A3;
  }
  .l-footer__contact-card:hover .l-footer__contact-arrow svg {
    animation: l-footer-arrow 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .l-footer__contact-card:hover .l-footer__ill-letter {
    translate: 0 -16px;
  }
  .l-footer__contact-card:hover .l-footer__ill-handset {
    translate: 0 -12px;
    rotate: -6deg;
  }
}
/* =========================================================
    LOWER（会社名・メニュー・SNS・コピーライト）
========================================================= */
.l-footer__lower {
  padding: clamp(56px, 6vw, 96px) 0 clamp(24px, 3vw, 36px);
}

.l-footer__lower .l-footer__lower-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "company nav sns";
  align-items: start;
  column-gap: clamp(40px, 6vw, 110px);
}
@media (width < 1000px) {
  .l-footer__lower .l-footer__lower-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "company sns" "nav nav";
    row-gap: 48px;
  }
}
@media (width < 480px) {
  .l-footer__lower .l-footer__lower-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "company" "nav" "sns";
    row-gap: 44px;
  }
}

.l-footer__company {
  grid-area: company;
}
.l-footer__company::before {
  content: "EST. 1975";
  display: inline-block;
  margin-bottom: 20px;
  padding: 7px 10px 6px 12px;
  border: 1px solid rgba(246, 244, 239, 0.35);
  font-family: "Syncopate", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #9fe0ff;
}

.l-footer__company-name {
  margin: 0;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #f6f4ef;
}

.l-footer__company-addr {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: rgba(246, 244, 239, 0.68);
}

.l-footer__nav {
  grid-area: nav;
  display: flex;
  gap: clamp(32px, 4vw, 64px);
  counter-reset: l-footer-nav;
}
@media (width < 480px) {
  .l-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 16px;
  }
}

.l-footer__nav-list {
  display: grid;
  align-content: start;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (width < 480px) {
  .l-footer__nav-list {
    display: contents;
  }
}

.l-footer__nav-item {
  display: grid;
  grid-template-columns: 28px auto;
  align-items: start;
}
.l-footer__nav-item::before {
  content: "";
  padding-top: 3px;
  font-family: "Syncopate", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9fe0ff;
}
@media (width < 1000px) {
  .l-footer__nav-item {
    grid-template-columns: auto;
  }
}

.l-footer__nav-link {
  display: inline-grid;
  justify-items: start;
  gap: 6px;
  color: #f6f4ef;
  text-decoration: none;
}
.l-footer__nav-link .nav-en {
  display: block;
  padding-bottom: 3px;
  font-family: "Syncopate", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat;
  transition: background-size 0.45s cubic-bezier(0.19, 1, 0.22, 1), color 0.4s ease;
}
.l-footer__nav-link .nav-ja {
  display: block;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(246, 244, 239, 0.55);
}
.l-footer__nav-link:focus-visible {
  outline: 2px solid #9fe0ff;
  outline-offset: 4px;
}
@media (hover: hover) {
  .l-footer__nav-link:hover .nav-en {
    color: #9fe0ff;
    background-size: 100% 1px;
  }
}

.l-footer__sns {
  grid-area: sns;
}

.l-footer__sns-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (width < 480px) {
  .l-footer__sns-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
  }
}

.l-footer__sns-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #f6f4ef;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
}
.l-footer__sns-link svg {
  flex: none;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid rgba(246, 244, 239, 0.3);
  fill: currentColor;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.l-footer__sns-link span {
  transition: color 0.4s ease;
}
.l-footer__sns-link:focus-visible {
  outline: 2px solid #9fe0ff;
  outline-offset: 4px;
}
@media (hover: hover) {
  .l-footer__sns-link:hover svg {
    border-color: #f6f4ef;
    background-color: #f6f4ef;
    color: #003547;
  }
  .l-footer__sns-link:hover span {
    color: #9fe0ff;
  }
}

.l-footer__lower .l-footer__copyright {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  margin-top: clamp(56px, 6vw, 88px);
  padding-top: 22px;
  border-top: 1px solid rgba(246, 244, 239, 0.24);
}
@media (width < 508px) {
  .l-footer__lower .l-footer__copyright {
    flex-direction: column;
    align-items: flex-start;
  }
}

.l-footer__policy {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(246, 244, 239, 0.7);
  text-decoration: none;
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .l-footer__policy:hover {
    color: #f6f4ef;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

.l-footer__copyright-text {
  font-family: "Syncopate", sans-serif;
  font-size: 10px;
  line-height: 1.8;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.5);
}

/* =========================================================
    いちばん下の大きな文字
========================================================= */
.l-footer__bg-logo {
  position: relative;
  z-index: 1;
  margin: clamp(20px, 3vw, 44px) 0 -0.2em;
  font-family: "Syncopate", sans-serif;
  font-size: 7.6vw;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
  color: #0c4a60;
  pointer-events: none;
  user-select: none;
}
.l-footer__bg-logo span {
  display: inline-block;
}

/* =========================================================
    動き
========================================================= */
@keyframes l-footer-orbit {
  to {
    rotate: 360deg;
  }
}
@keyframes l-footer-char {
  from {
    opacity: 0;
    translate: 0 70%;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes l-footer-bob {
  from {
    translate: 0 -3px;
  }
  to {
    translate: 0 4px;
  }
}
@keyframes l-footer-peek {
  from {
    translate: 0 4px;
  }
  to {
    translate: 0 -3px;
  }
}
@keyframes l-footer-dial {
  to {
    rotate: 360deg;
  }
}
@keyframes l-footer-arrow {
  0% {
    translate: 0 0;
  }
  45% {
    translate: 180% 0;
  }
  46% {
    translate: -180% 0;
  }
  100% {
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .l-footer__contact-char,
  .l-footer__contact-arrow svg,
  .l-footer__ill * {
    animation: none !important;
  }
  .l-footer__ill-letter,
  .l-footer__ill-handset,
  .l-footer__nav-link .nav-en {
    transition: none;
  }
}
.l-inner {
  margin-inline: auto;
}

.l-inner-w1400 {
  max-width: 1400px;
  width: 93.3333333333%;
  margin: 0 auto;
}

.l-inner-w1300 {
  max-width: 1300px;
  width: 90.2777777778%;
  margin: 0 auto;
}

.l-inner-w1120 {
  max-width: 1120px;
  width: 77.7777777778%;
}
@media (width < 768px) {
  .l-inner-w1120 {
    width: 84.7222222222%;
  }
}
@media (width < 480px) {
  .l-inner-w1120 {
    width: 90.2777777778%;
  }
}

@media (width < 768px) {
  .l-inner-tab {
    padding-inline: clamp(15px, 6vw - 9px, 40px);
  }
}

/* =========================================================
    ボタン（サイト共通）
========================================================= */
/* 矢印だけの丸（単体で使うとき） */
.c-button__icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(28px, 2vw + 12px, 42px);
  height: clamp(28px, 2vw + 12px, 42px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background-color: transparent;
  color: #ffffff;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.c-button__icon-arrow {
  width: clamp(12px, 0vw + 9px, 18px);
  height: clamp(12px, 0vw + 9px, 18px);
  stroke-width: 2;
}

.c-button__icon-blue {
  border: 1px solid rgba(0, 53, 71, 0.4);
  color: #003547;
}

a:hover > .c-button__icon,
a:hover .c-button__icon-blue {
  border-color: #2A62A3;
  background-color: #2A62A3;
  color: #fff;
}

/* 左向きの矢印（丸） */
.c-button--prev {
  display: flex;
  justify-content: center;
  align-items: center;
  width: clamp(28px, 2vw + 12px, 42px);
  height: clamp(28px, 2vw + 12px, 42px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background-color: transparent;
  color: #ffffff;
  transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.c-button--prev svg {
  transform: scaleX(-1);
}

/* テキスト + 右の白い丸の矢印 */
.c-button {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  min-width: 260px;
  height: 64px;
  margin-block: 5px;
  padding: 0 10px 0 32px;
  overflow: hidden;
  border-radius: 999px;
  background: linear-gradient(110deg, #2A62A3 0%, #0081ad 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.c-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(110deg, #003547 0%, #1f4f8f 100%);
  translate: -101% 0;
  transition: translate 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.c-button .c-button__text {
  position: relative;
  z-index: 1;
  flex: 1;
}
.c-button .c-button__icon {
  position: relative;
  z-index: 1;
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #2A62A3;
  transition: background-color 0.45s ease, color 0.45s ease;
}
.c-button .c-button__icon::before, .c-button .c-button__icon::after {
  content: none;
}
.c-button .c-button__icon-arrow {
  position: relative;
  z-index: 2;
  width: 13px;
  height: 18px;
}
@media (hover: hover) {
  .c-button:hover::before {
    translate: 0 0;
  }
  .c-button:hover .c-button__icon {
    background: #fff;
    color: #2A62A3;
  }
  .c-button:hover .c-button__icon-arrow {
    animation: c-button-arrow 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
}
.c-button:focus-visible {
  outline: 2px solid #0081ad;
  outline-offset: 4px;
}
@media (width < 480px) {
  .c-button {
    min-width: 0;
    height: 58px;
    padding-left: 24px;
  }
  .c-button .c-button__icon {
    width: 40px;
    height: 40px;
  }
}

.c-button--light {
  background: #fff;
  color: #003547;
}
.c-button--light::before {
  background: linear-gradient(110deg, #dff0fa 0%, #c9ecfb 100%);
}
.c-button--light .c-button__icon {
  background: #003547;
  color: #fff;
}
@media (hover: hover) {
  .c-button--light:hover {
    color: #003547;
  }
  .c-button--light:hover .c-button__icon {
    background: #2A62A3;
    color: #fff;
  }
}

/* 泡（使わない） */
.c-button__icon-bubble {
  display: none;
}

.c-button__text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

@keyframes c-button-arrow {
  0% {
    translate: 0 0;
  }
  45% {
    translate: 180% 0;
  }
  46% {
    translate: -180% 0;
  }
  100% {
    translate: 0 0;
  }
}
/* =========================================================
    カテゴリー絞り込みボタン（共通: 施工実績・募集要項・お知らせ）
========================================================= */
.c-category-button__card.hide {
  display: none;
}

.c-category-button-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0 0 clamp(36px, 4.4vw, 64px);
  padding: 0;
  gap: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 53, 71, 0.18);
  background: none;
}
@media (width < 480px) {
  .c-category-button-wrap {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin-bottom: 30px;
  }
}

.c-category-indicator {
  position: absolute;
  bottom: -1px;
  left: 0;
  z-index: 2;
  top: auto !important;
  height: 3px !important;
  background: #2A62A3;
  pointer-events: none;
  transition: left 0.55s cubic-bezier(0.65, 0, 0.35, 1), width 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.c-category-button {
  position: relative;
  z-index: 1;
  display: grid;
  flex: none;
  align-content: end;
  justify-items: start;
  gap: 8px;
  padding: 0 clamp(17px, 2.28vw, 44px) clamp(16px, 1.6vw, 22px);
  border: 0;
  border-radius: 0;
  background: none;
  color: #9db2bc;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(16px, 0.9rem + 0.55vw, 22px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.4s ease;
}
.c-category-button + .c-category-button::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: clamp(16px, 1.6vw, 22px);
  left: 0;
  width: 1px;
  background: rgba(0, 53, 71, 0.22);
  transform: skewX(-18deg);
}
.c-category-button:focus-visible {
  outline: 2px solid #0081ad;
  outline-offset: 2px;
}
@media (hover: hover) {
  .c-category-button:hover {
    color: #003547;
  }
}
@media (width < 480px) {
  .c-category-button {
    justify-items: center;
    padding: 0 6px 14px;
    font-size: 13px;
    letter-spacing: 0;
    text-align: center;
  }
  .c-category-button:first-of-type {
    padding-left: 4px;
  }
}

.c-category-button.is-active {
  color: #003547;
}

.c-category-button__en,
.c-category-button__ja {
  pointer-events: none;
}

.c-category-button__en {
  position: relative;
  display: inline-block;
  font-family: "Syncopate", sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9db2bc;
  transition: color 0.4s ease;
}
.c-category-button__en::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0081ad;
  translate: 0 -50%;
  scale: 0;
  transition: scale 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (width < 480px) {
  .c-category-button__en {
    display: none;
  }
}

@media (hover: hover) {
  .c-category-button:hover .c-category-button__en {
    color: #5b7480;
  }
}
.c-category-button.is-active .c-category-button__en {
  color: #0081ad;
}
.c-category-button.is-active .c-category-button__en::after {
  scale: 1;
}

.c-category-button__card.is-more-hide {
  display: none;
}

.is-more-hide {
  display: none;
}

.hide {
  display: none;
}

/* もっと見るボタン（白 + 紺の線。右に紺の丸の中の ↓） */
.c-button-more {
  position: relative;
  z-index: 7;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 260px;
  height: 64px;
  margin: clamp(20px, 2vw + 12px, 42px) auto 0;
  padding: 0 10px 0 28px;
  overflow: hidden;
  border: 1px solid #003547;
  border-radius: 999px;
  background: #fff;
  color: #003547;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 0.5s ease, color 0.5s ease;
}
.c-button-more::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0, 53, 71, 0.15);
  border-top-color: #003547;
  border-radius: 50%;
  animation: loadingRotate 1.2s linear infinite;
  transition: border-color 0.5s ease;
}
.c-button-more::after {
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 50%;
  background: #003547 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M12 5v13M6 12l6 6 6-6'/%3E%3C/svg%3E") no-repeat center/16px 16px;
  transition: background-color 0.5s ease, translate 0.5s ease;
}
.c-button-more:hover {
  background: #2A62A3;
  color: #fff;
}
.c-button-more:hover::before {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
}
.c-button-more:hover::after {
  background-color: #0081ad;
  translate: 0 2px;
}

@keyframes loadingRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* スライダーの矢印（白い丸 + 紺の線） */
.swiper-button-prev,
.swiper-button-next {
  width: 48px !important;
  height: 48px !important;
  padding: 10px;
  border: 1px solid #003547;
  border-radius: 50%;
  background: #fff !important;
  color: #003547 !important;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 13px;
  font-weight: bold;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: #2A62A3 !important;
  color: #fff !important;
}

.swiper-button-prev {
  left: 8.5%;
}
@media (width < 768px) {
  .swiper-button-prev {
    left: 8px;
  }
}

.swiper-button-next {
  right: 8.5%;
}
@media (width < 768px) {
  .swiper-button-next {
    right: 8px;
  }
}

/* ページネーション */
.swiper-pagination {
  bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .c-button::before {
    transition: none;
  }
  .c-button__icon-arrow {
    animation: none !important;
  }
}
.c-heading__sub-fv {
  display: flex;
  flex-direction: column;
  margin-block: clamp(50px, 7vw - 24px, 80px);
  padding-top: 120px;
  margin-bottom: 10px;
}
@media (width < 768px) {
  .c-heading__sub-fv {
    padding-top: 80px;
    margin-bottom: 8px;
  }
}

/* =====================
タイトル：真ん中
===================== */
.c-heading__center {
  text-align: center;
  padding-inline: 20px;
}

/* =========================================================
    c-title ─ 見出し（サイト共通）
========================================================= */
.c-title {
  margin-right: 40px;
}
@media (width < 768px) {
  .c-title {
    margin-right: 20px;
  }
}

.c-title-center {
  text-align: center;
}

.c-title.c-title-center {
  margin: 0;
  padding-inline: 40px;
}
@media (width < 768px) {
  .c-title.c-title-center {
    padding-inline: 20px;
  }
}

.c-title__heading-en {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.24em;
  color: #0081ad;
}
.c-title__heading-en::before {
  content: "";
  flex: none;
  width: 28px;
  height: 2px;
  background: currentColor;
}
@media (width < 768px) {
  .c-title__heading-en {
    font-size: 11px;
    gap: 10px;
  }
}

.c-title__no {
  order: -1;
  color: #003547;
  letter-spacing: 0.08em;
}
.c-title__white .c-title__no {
  color: #33a6d6;
}

.c-title__heading {
  margin-block: 18px 40px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(34px, 1rem + 3vw, 64px);
  font-weight: 900;
  line-height: 1.22;
  letter-spacing: 0.02em;
  color: #003547;
}
@media (width < 768px) {
  .c-title__heading {
    margin-block: 12px 28px;
  }
}

.c-title__text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(18px, 0.9rem + 0.6vw, 24px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: #003547;
}

.c-title__white {
  color: #fff !important;
}

.c-title__blue {
  color: #003547 !important;
}

/* =========================================================
    下層ページの FV（タイトル・パンくず）
========================================================= */
.p-fv.js-sub-fv {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: calc(var(--header-h, 100px) + clamp(28px, 4vw, 64px)) 0 clamp(52px, 6vw, 92px);
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f3fafd 100%);
  color: #003547;
  text-align: left;
}
.p-fv.js-sub-fv > img,
.p-fv.js-sub-fv > picture {
  display: none !important;
}
.p-fv.js-sub-fv::before {
  content: "";
  position: absolute;
  top: 0;
  right: -6%;
  bottom: 0;
  left: auto;
  z-index: -1;
  display: block;
  width: 38%;
  height: auto;
  background: radial-gradient(ellipse at 80% 20%, #c1e6fa 0%, rgba(193, 230, 250, 0) 50%), radial-gradient(ellipse at bottom left, rgba(141, 204, 158, 0.55) 0%, rgba(141, 204, 158, 0) 60%), linear-gradient(45deg, #87ce9a 0%, #a4dad0 40%, #b2e2eb 75%, #c1e6fa 100%);
  background-blend-mode: screen, normal, normal;
  opacity: 0.62;
  filter: none;
  transform: skewX(-23deg);
  transform-origin: 0 100%;
  pointer-events: none;
  animation: c-sub-fv-panel 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.05s both;
}
.p-fv.js-sub-fv::after {
  content: "";
  position: absolute;
  top: 0;
  right: calc(32% + clamp(20px, 2.4vw, 36px));
  bottom: 0;
  left: auto;
  z-index: -1;
  display: block;
  width: 36px;
  height: auto;
  background: linear-gradient(90deg, #87ce9a 0 6px, transparent 6px 20px, #a4dad0 20px 36px);
  opacity: 0.5;
  filter: none;
  transform: skewX(-23deg);
  transform-origin: 0 100%;
  pointer-events: none;
  animation: c-sub-fv-panel 1s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both;
}
@media (width < 768px) {
  .p-fv.js-sub-fv::before {
    right: -26%;
    width: 56%;
    opacity: 0.42;
  }
  .p-fv.js-sub-fv::after {
    right: calc(30% + 14px);
    width: 24px;
    background: linear-gradient(90deg, #87ce9a 0 4px, transparent 4px 13px, #a4dad0 13px 24px);
    opacity: 0.4;
  }
}

/* ---------- 中身の並び（縦に: パンくず → 日本語 → コピー） ---------- */
.p-fv.js-sub-fv .c-heading__sub-fv {
  position: relative;
  inset: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  height: auto;
  margin-block: 0;
  padding-block: 0;
  transform: none;
  text-align: left;
}
.p-fv.js-sub-fv .c-heading__sub-fv::before, .p-fv.js-sub-fv .c-heading__sub-fv::after {
  content: none;
}

.p-fv.js-sub-fv .c-heading__sub-fv > .p-sub-fv__title--ja {
  order: -1;
}

.p-fv.js-sub-fv .c-heading__sub-fv > .p-sub-fv__body {
  order: 1;
}

.p-fv.js-sub-fv .p-sub-fv__title--en {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- パンくず（1つずつ縦に積む。‹ + 文字） ---------- */
.p-fv.js-sub-fv .c-sub-fv-pankuzu {
  order: -3;
  position: relative;
  inset: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Syncopate", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #5b7480;
  transform: none;
  transition: color 0.3s ease;
  animation: c-sub-fv-fade 0.8s ease 0.1s both;
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu + .c-sub-fv-pankuzu {
  animation-delay: 0.22s;
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button--prev,
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button__icon {
  position: static;
  display: block;
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #0081ad;
  transform: none;
  rotate: none;
  transition: translate 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button--prev::before, .p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button--prev::after,
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button__icon::before,
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button__icon::after {
  content: none;
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button--prev svg,
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
  stroke-width: 3;
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-sub-fv-pankuzu-link {
  position: relative;
  padding-block: 3px;
  color: inherit;
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-sub-fv-pankuzu-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  scale: 0 1;
  transition: scale 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu:focus-visible {
  outline: 2px solid #0081ad;
  outline-offset: 4px;
}
@media (hover: hover) {
  .p-fv.js-sub-fv .c-sub-fv-pankuzu:hover {
    color: #0081ad;
  }
  .p-fv.js-sub-fv .c-sub-fv-pankuzu:hover .c-button__icon {
    translate: -3px 0;
  }
  .p-fv.js-sub-fv .c-sub-fv-pankuzu:hover .c-sub-fv-pankuzu-link::after {
    scale: 1 1;
  }
}

/* ---------- 日本語のタイトル（枠なし。下に斜めのグラデーションの線） ---------- */
.p-fv.js-sub-fv .p-sub-fv__title--ja {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  margin: clamp(18px, 2.4vw, 34px) 0 0;
  padding: 0 0 clamp(14px, 1.6vw, 22px);
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(40px, 1.2rem + 4.2vw, 96px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #003547;
  transform: none;
}
.p-fv.js-sub-fv .p-sub-fv__title--ja::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0.08em;
  z-index: -1;
  width: calc(100% + 0.3em);
  max-width: calc(100vw - 40px);
  height: clamp(5px, 0.6vw, 9px);
  border: 0;
  background: linear-gradient(90deg, #0081ad 0%, #87ce9a 48%, #b2e2eb 78%, #c1e6fa 100%);
  transform: skewX(-23deg);
  transform-origin: 0 50%;
  animation: c-sub-fv-bar 1s cubic-bezier(0.65, 0, 0.35, 1) 0.8s both;
}
.p-fv.js-sub-fv .p-sub-fv__title--ja::after {
  content: none;
}
.p-fv.js-sub-fv .p-sub-fv__title--ja .u-ch > span {
  animation: c-sub-fv-ch 1s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: calc(0.25s + var(--i, 0) * 60ms);
}
@media (width < 768px) {
  .p-fv.js-sub-fv .p-sub-fv__title--ja {
    margin-top: 14px;
    font-size: clamp(32px, 10vw, 56px);
  }
}

/* ---------- キーフレーム（読み込み時だけ） ---------- */
@keyframes c-sub-fv-panel {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes c-sub-fv-bar {
  from {
    scale: 0 1;
  }
  to {
    scale: 1 1;
  }
}
@keyframes c-sub-fv-fade {
  from {
    opacity: 0;
  }
}
@keyframes c-sub-fv-up {
  from {
    opacity: 0;
    translate: 0 20px;
  }
}
@keyframes c-sub-fv-ch {
  from {
    translate: 0 110%;
  }
  to {
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-fv.js-sub-fv::before,
  .p-fv.js-sub-fv::after,
  .p-fv.js-sub-fv .c-sub-fv-pankuzu,
  .p-fv.js-sub-fv .p-sub-fv__title--ja::before,
  .p-fv.js-sub-fv .p-sub-fv__title--ja .u-ch > span,
  .p-fv.js-sub-fv .p-sub-fv__body {
    animation: none !important;
  }
}
/* 
   右から出現
 */
@keyframes cloudAppearRight {
  from {
    opacity: 0;
    transform: translateX(120px);
  }
  to {
    opacity: 0.9;
    transform: translateX(0);
  }
}
/* 
   左から出現
 */
@keyframes cloudAppearLeft {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }
  to {
    opacity: 0.9;
    transform: translateX(0);
  }
}
/*
   プカプカ
 */
@keyframes cloudFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}
.c-animation-cloud__wrap {
  position: relative;
  padding: 120px 0;
  display: flow-root;
}
@media (width < 768px) {
  .c-animation-cloud__wrap {
    padding: 80px 0;
  }
}

.c-bg-cloud {
  position: absolute;
  top: 100px;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: min(95%, 1300px);
  z-index: 0;
  border-radius: 16px;
}
@media (width < 768px) {
  .c-bg-cloud {
    top: 50px;
  }
}

.c-bg-cloud__inner {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  width: min(90%, 1200px);
  background: #fff;
  border-radius: 24px;
  padding: clamp(40px, 16vw - 80px, 80px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}
@media (width < 768px) {
  .c-bg-cloud__inner {
    width: min(85%, 1200px);
    padding: clamp(35px, 9vw + 4px, 70px);
  }
}
@media (width < 480px) {
  .c-bg-cloud__inner {
    padding: 35px 19px;
  }
}

/* ================================
   フェードアニメーション(js)
================================ */
.c-fade-up,
.c-fade-left,
.c-fade-right {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.c-fade-up.is-active,
.c-fade-left.is-active,
.c-fade-right.is-active {
  opacity: 1;
  transform: translate(0, 0);
}

.c-fade-up {
  transform: translateY(60px);
}

.c-fade-left {
  transform: translateX(-60px);
}

.c-fade-right {
  transform: translateX(60px);
}

.c-delay-1 {
  transition-delay: 0.2s;
}

.c-delay-2 {
  transition-delay: 0.4s;
}

.c-delay-3 {
  transition-delay: 0.6s;
}

/* ================================
   ページ遷移アニメーション(js)
================================ */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
}

/* 共通レイヤー */
.layer {
  position: absolute;
  inset: 0;
}

/* 現ページ（退場） */
.layer-current {
  background: transparent;
  z-index: 1;
}

/* 次ページ（見せる側） */
.layer-next {
  background: linear-gradient(90deg, #0081ad, #003547);
  z-index: 2;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}

/* マスク演出（円） */
.mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  pointer-events: none;
}

/* アクティブ時 */
.page-transition.is-active .layer-next {
  clip-path: circle(150% at 50% 50%);
}

/* =========================================================
    共通: イラスト（biz-drawings.php の SVG）
========================================================= */
/* ---------- 風景 ---------- */
.c-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1600/850;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 91%, transparent 100%);
}

.c-scene__defs,
.c-band__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.c-scene__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translate3d(0, calc(var(--pp, 0) * var(--s, 0px)), 0);
}

.c-scene__layer--far,
.c-scene__layer--mid,
.c-scene__layer--near {
  will-change: transform;
}

.c-scene__car {
  animation: c-scene-car var(--dur, 20s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.c-scene__car.is-rev {
  animation-direction: reverse;
}

.c-scene__arm {
  animation: c-scene-arm 6s ease-in-out infinite;
}

.c-scene__stick {
  animation: c-scene-stick 6s ease-in-out infinite;
}

.c-scene__flow {
  animation: c-art-flow 1.4s linear infinite;
}

.c-scene__water {
  animation: c-art-water 7s ease-in-out infinite;
}

.c-scene__leader {
  fill: none;
  stroke: #003547;
  stroke-width: 1.5;
}

.c-scene__pt {
  fill: #ffffff;
  stroke: #003547;
  stroke-width: 2;
}

.c-scene__tag {
  fill: #003547;
}

.c-scene__text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: #ffffff;
}

.c-scene__marker {
  cursor: pointer;
  outline: none;
}

.c-scene__box {
  fill: #003547;
  transition: fill 0.3s ease;
}

.c-scene__pulse {
  fill: none;
  stroke: #0081ad;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: c-scene-pulse 2.6s ease-out infinite;
  animation-delay: calc(var(--i, 0) * 0.32s);
}

.c-scene__no {
  font-family: "Syncopate", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  fill: #ffffff;
}

.c-scene__marker:hover .c-scene__box,
.c-scene__marker:focus-visible .c-scene__box,
.c-scene__marker.is-hot .c-scene__box {
  fill: #0081ad;
}

@media (width < 768px) {
  .c-scene__tg {
    scale: 1.7;
  }
  .c-scene__mk {
    scale: 1.6;
  }
  .c-scene__leader {
    stroke-width: 3;
  }
}
.is-motion .c-scene .c-scene__layer {
  transition: opacity 1s ease, translate 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-motion .c-scene .c-scene__layer--mid {
  transition-delay: 0.12s;
}
.is-motion .c-scene .c-scene__layer--base {
  transition-delay: 0.24s;
}
.is-motion .c-scene .c-scene__layer--cars,
.is-motion .c-scene .c-scene__layer--main {
  transition-delay: 0.36s;
}
.is-motion .c-scene .c-scene__layer--anim {
  transition-delay: 0.5s;
}
.is-motion .c-scene .c-scene__layer--near {
  transition-delay: 0.2s;
}
.is-motion .c-scene .c-scene__layer--marks {
  transition-delay: 0.9s;
}

.is-motion .c-scene:not(.is-in) .c-scene__layer {
  opacity: 0;
  translate: 0 60px;
}

/* ---------- 横長の遠景 ---------- */
.c-band {
  position: relative;
  width: 100%;
  aspect-ratio: 1600/360;
  pointer-events: none;
}

.c-band__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translate3d(0, calc(var(--pp, 0) * var(--s, 0px)), 0);
  will-change: transform;
}

.c-band__layer--far {
  --s: -60px;
}

.c-band__layer--city {
  --s: -36px;
}

.c-band__layer--mid {
  --s: -12px;
}

/* ---------- 重機 ---------- */
.c-machine {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.c-machine__arm {
  animation: c-machine-arm 5s ease-in-out infinite;
}

.c-machine__stick {
  animation: c-machine-stick 5s ease-in-out infinite;
}

/* ---------- 雲 ---------- */
.c-cloud {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ---------- 事業ごとの断面図 ---------- */
.c-draw {
  display: block;
  width: 100%;
  height: auto;
}

.c-draw__arrow {
  animation: c-draw-push 2.4s ease-in-out infinite;
}

.c-draw__water {
  animation: c-art-water 6s ease-in-out infinite;
}

.c-draw__rain {
  animation: c-draw-rain 1.3s linear infinite;
}

.c-draw__flow,
.c-draw__drip {
  animation: c-art-flow 1.2s linear infinite;
}

.c-draw__arm {
  animation: c-draw-arm 3.2s ease-in-out infinite;
}

.c-draw__roller {
  animation: c-draw-roller 7s ease-in-out infinite;
}

.c-draw__dump {
  animation: c-draw-dump 6s ease-in-out infinite;
}

.is-motion .c-draw .c-draw__body {
  transition: opacity 0.9s ease, translate 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-motion .c-draw .c-draw__anim {
  transition: opacity 0.8s ease 0.5s;
}

.is-motion [data-reveal]:not(.is-in) .c-draw .c-draw__body {
  opacity: 0;
  translate: 0 18px;
}
.is-motion [data-reveal]:not(.is-in) .c-draw .c-draw__anim {
  opacity: 0;
}

/* ---------- 飾り（雲・重機）を置く箱 ----------
   --s: スクロールでずれる量（data-pp と一緒に使う）
   .c-deco--drift: ゆっくり横に流れる（雲） / .c-deco--bob: ゆっくり上下（重機） */
.c-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  transform: translate3d(0, calc(var(--pp, 0) * var(--s, 80px) * -1), 0);
}
.c-deco > svg {
  display: block;
  width: 100%;
  height: auto;
}
.c-deco--drift > svg {
  animation: c-deco-drift 16s ease-in-out infinite alternate;
}
.c-deco--bob > svg {
  animation: c-deco-bob 5s ease-in-out infinite alternate;
}

/* ---------- キーフレーム ---------- */
@keyframes c-scene-car {
  from {
    translate: 0 0;
  }
  to {
    translate: 1760px 0;
  }
}
@keyframes c-scene-arm {
  0%, 100% {
    rotate: 0deg;
  }
  50% {
    rotate: 7deg;
  }
}
@keyframes c-scene-stick {
  0%, 100% {
    rotate: 0deg;
  }
  50% {
    rotate: -12deg;
  }
}
@keyframes c-scene-pulse {
  0% {
    scale: 1;
    opacity: 0.9;
  }
  100% {
    scale: 1.7;
    opacity: 0;
  }
}
@keyframes c-art-flow {
  to {
    stroke-dashoffset: -26;
  }
}
@keyframes c-art-water {
  0%, 100% {
    scale: 1 0.55;
  }
  50% {
    scale: 1 1;
  }
}
@keyframes c-machine-arm {
  0%, 100% {
    rotate: 0deg;
  }
  50% {
    rotate: -5deg;
  }
}
@keyframes c-machine-stick {
  0%, 100% {
    rotate: 0deg;
  }
  50% {
    rotate: 9deg;
  }
}
@keyframes c-machine-wheel {
  to {
    rotate: 360deg;
  }
}
@keyframes c-draw-push {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 14px 0;
  }
}
@keyframes c-draw-rain {
  0% {
    translate: 4px -14px;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    translate: -4px 16px;
    opacity: 0;
  }
}
@keyframes c-draw-arm {
  0%, 100% {
    rotate: 0deg;
  }
  50% {
    rotate: 7deg;
  }
}
@keyframes c-draw-roller {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 130px 0;
  }
}
@keyframes c-draw-dump {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -2px;
  }
}
@keyframes c-deco-drift {
  from {
    translate: -4% 0;
  }
  to {
    translate: 6% 0;
  }
}
@keyframes c-deco-bob {
  from {
    translate: 0 -4px;
  }
  to {
    translate: 0 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .c-scene__car,
  .c-scene__arm,
  .c-scene__stick,
  .c-scene__flow,
  .c-scene__water,
  .c-scene__pulse,
  .c-machine__arm,
  .c-machine__stick,
  .c-machine__wheel,
  .c-draw__arrow,
  .c-draw__water,
  .c-draw__rain,
  .c-draw__flow,
  .c-draw__drip,
  .c-draw__arm,
  .c-draw__roller,
  .c-draw__dump,
  .c-deco > svg {
    animation: none !important;
  }
}
/* ---------- 1文字ずつせり上がる文字 ---------- */
.u-ch {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.u-ch > span {
  display: inline-block;
  transition: translate 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--i) * 28ms + 0.05s);
}

.is-motion [data-reveal]:not(.is-in) .u-ch > span {
  translate: 0 108%;
}

/* =========================================================
    共通: 細かいドットの飾り（写真や見出しのそばに置く）
========================================================= */
.c-dots {
  position: absolute;
  z-index: 0;
  width: var(--size, 180px);
  aspect-ratio: 1;
  color: #0081ad;
  background: radial-gradient(circle, currentColor 1.4px, transparent 1.9px) 0 0/var(--gap, 9px) var(--gap, 9px);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 1.2s ease 0.3s;
}
.c-dots--white {
  color: #fff;
  opacity: 0.8;
}
.c-dots--tl {
  top: calc(var(--size, 180px) * -0.18);
  left: calc(var(--size, 180px) * -0.18);
  -webkit-mask-image: radial-gradient(circle at 0 0, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 0 0, #000 0%, transparent 72%);
}
.c-dots--tr {
  top: calc(var(--size, 180px) * -0.18);
  right: calc(var(--size, 180px) * -0.18);
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 100% 0, #000 0%, transparent 72%);
}
.c-dots--bl {
  bottom: calc(var(--size, 180px) * -0.18);
  left: calc(var(--size, 180px) * -0.18);
  -webkit-mask-image: radial-gradient(circle at 0 100%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 0 100%, #000 0%, transparent 72%);
}
.c-dots--br {
  right: calc(var(--size, 180px) * -0.18);
  bottom: calc(var(--size, 180px) * -0.18);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 100% 100%, #000 0%, transparent 72%);
}
@media (width < 768px) {
  .c-dots {
    --size: 110px;
    --gap: 7px;
  }
}

.is-motion [data-reveal]:not(.is-in) .c-dots,
.is-motion .c-dots[data-reveal]:not(.is-in) {
  opacity: 0;
}

/* =========================================================
    共通: 写真を固定したパララックス（窓から写真をのぞく）
========================================================= */
.c-parallax {
  position: relative;
  isolation: isolate;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  height: clamp(300px, 44vw, 660px);
  overflow: hidden;
  clip-path: inset(0);
  background: #dceef7;
}
.c-parallax--short {
  height: clamp(220px, 30vw, 440px);
}
.c-parallax--tall {
  height: clamp(420px, 62vw, 860px);
}
.c-parallax--open {
  --c-side: max(clamp(16px, 4vw, 40px), calc((100% - 1300px) / 2));
  --c-k: clamp(0, var(--pp, 0) * var(--pp, 0) * 1.3 - 0.1, 1);
  clip-path: inset(0 calc(var(--c-side) * var(--c-k)));
}
.c-parallax--slant {
  --c-slant: clamp(32px, 5vw, 80px);
  z-index: 6;
  margin-block: calc(var(--c-slant) * -1);
  clip-path: polygon(0 var(--c-slant), 100% 0, 100% calc(100% - var(--c-slant)), 0 100%);
}
@media (width < 768px) {
  .c-parallax {
    height: clamp(240px, 70vw, 420px);
  }
  .c-parallax--short {
    height: clamp(180px, 50vw, 300px);
  }
  .c-parallax--tall {
    height: clamp(360px, 110vw, 560px);
  }
}

.c-parallax__img {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}

.c-parallax--text {
  color: #fff;
}
.c-parallax--text::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 53, 71, 0.72) 0%, rgba(0, 53, 71, 0.28) 55%, rgba(0, 53, 71, 0) 100%), linear-gradient(0deg, rgba(0, 53, 71, 0.5) 0%, rgba(0, 53, 71, 0) 50%);
}

.c-parallax__body {
  position: relative;
  padding-block: clamp(36px, 5vw, 80px);
}

.c-parallax--slant .c-parallax__body {
  padding-bottom: calc(clamp(36px, 5vw, 80px) + var(--c-slant) * 0.5);
}

.c-parallax__en {
  margin: 0 0 14px;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(11px, 0.9vw, 13px);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9fe0ff;
}

.c-parallax__copy {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(26px, 1rem + 2.6vw, 60px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.c-parallax__copy.c-parallax__copy--sp {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(26px, 1rem + 2.6vw, 60px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.04em;
}
@media (width < 480px) {
  .c-parallax__copy.c-parallax__copy--sp {
    font-size: 20px;
  }
}

.c-parallax__text {
  max-width: 36em;
  margin: 18px 0 0;
  font-size: clamp(13px, 0.78rem + 0.2vw, 15px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .c-parallax__img {
    position: absolute;
    height: 100%;
  }
  .c-parallax--open {
    clip-path: inset(0);
  }
}
/* =========================================================
    共通: 写真（画面に入ると下から開き、写真の中がスクロールでゆっくり動く）
========================================================= */
.c-photo {
  position: relative;
  display: block;
  aspect-ratio: var(--r, 3/2);
  margin: 0;
  overflow: hidden;
  background: #dceef7;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.3s cubic-bezier(0.77, 0, 0.18, 1);
  transition-delay: calc(var(--d, 0) * 120ms);
}
.c-photo--slant-r {
  clip-path: polygon(0 0, 100% 0, 100% 78%, 91% 100%, 0 100%);
}
.c-photo--slant-l {
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%, 0 22%);
}

.c-photo__img {
  display: block;
  width: 100%;
  height: 118%;
  max-width: none;
  margin-top: -9%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--pp, 0) * -7%), 0);
  will-change: transform;
}

.is-motion .c-photo:not(.is-in) {
  clip-path: inset(100% 0 0 0);
}

.is-motion .c-photo--slant-r:not(.is-in),
.is-motion .c-photo--slant-l:not(.is-in) {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 100% 100%, 0 100%);
}

@media (prefers-reduced-motion: reduce) {
  .c-photo {
    transition: none;
  }
  .c-photo__img {
    transform: none;
  }
}
/* =========================================================
    共通: 流れ（お問い合わせの 入力 → 確認 → 完了 など）
========================================================= */
.c-steps {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 0 0 clamp(32px, 4vw, 56px);
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.c-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #9db2bc;
}
.c-steps__item + .c-steps__item::before {
  content: "";
  position: absolute;
  top: 26px;
  right: calc(50% + 34px);
  left: calc(-50% + 34px);
  height: 1px;
  background: rgba(0, 53, 71, 0.2);
}
.c-steps__item.is-done + .c-steps__item::before, .c-steps__item.is-done.is-current::before, .c-steps__item.is-current::before {
  background: #2A62A3;
}
@media (width < 480px) {
  .c-steps__item + .c-steps__item::before {
    top: 22px;
    right: calc(50% + 28px);
    left: calc(-50% + 28px);
  }
}

.c-steps__no {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(0, 53, 71, 0.25);
  border-radius: 50%;
  background: #fff;
  font-family: "Syncopate", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9db2bc;
}
.is-done .c-steps__no {
  border-color: #2A62A3;
  color: #2A62A3;
}
.is-current .c-steps__no {
  border-color: transparent;
  background: linear-gradient(135deg, #2A62A3 0%, #0081ad 100%);
  color: #fff;
}
@media (width < 480px) {
  .c-steps__no {
    width: 44px;
    height: 44px;
    font-size: 11px;
  }
}

.c-steps__label {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.is-done .c-steps__label, .is-current .c-steps__label {
  color: #003547;
}

/* =========================================================
    下層ページの FV（タイトル・パンくず）
========================================================= */
@property --c-sub-fv-dot {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.p-fv.js-sub-fv {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: calc(var(--header-h, 100px) + clamp(28px, 4vw, 60px)) 0 clamp(40px, 5vw, 72px);
  overflow: hidden;
  background: transparent;
  color: #003547;
  text-align: left;
}
.p-fv.js-sub-fv > img,
.p-fv.js-sub-fv > picture {
  display: none !important;
}
.p-fv.js-sub-fv::before, .p-fv.js-sub-fv::after {
  content: none !important;
}

/* ---------- 横幅: FV の中の l-inner は下のセクション（l-inner-w1300）と左端をそろえる ---------- */
.p-fv.js-sub-fv > .l-inner {
  align-self: stretch;
  width: 90.2777777778%;
  max-width: 1340px;
  margin-inline: auto;
}

/* ---------- 中身の並び（縦に: パンくず → 日本語 → コピー） ---------- */
.p-fv.js-sub-fv .c-heading__sub-fv {
  position: relative;
  inset: auto;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}
.p-fv.js-sub-fv .c-heading__sub-fv::before, .p-fv.js-sub-fv .c-heading__sub-fv::after {
  content: none;
}

.p-fv.js-sub-fv .p-sub-fv__title {
  order: -1;
  position: static;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 100%;
  margin: 0;
  padding: 0;
  transform: none;
}

.p-fv.js-sub-fv .c-heading__sub-fv .p-sub-fv__title--en {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- パンくず（1つずつ縦に積む。‹ + 文字） ---------- */
.p-fv.js-sub-fv .c-sub-fv-pankuzu {
  order: -3;
  position: relative;
  inset: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: auto;
  height: auto;
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: "Syncopate", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #5b7480;
  transform: none;
  transition: color 0.3s ease;
  animation: c-sub-fv-fade 0.8s ease 0.1s both;
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu + .c-sub-fv-pankuzu {
  animation-delay: 0.22s;
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button--prev,
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button__icon {
  position: static;
  display: block;
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #0081ad;
  transform: none;
  rotate: none;
  transition: translate 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button--prev::before, .p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button--prev::after,
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button__icon::before,
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button__icon::after {
  content: none;
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button--prev svg,
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-button__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
  stroke-width: 3;
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-sub-fv-pankuzu-link {
  position: relative;
  padding-block: 3px;
  color: inherit;
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu .c-sub-fv-pankuzu-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  scale: 0 1;
  transition: scale 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-fv.js-sub-fv .c-sub-fv-pankuzu:focus-visible {
  outline: 2px solid #0081ad;
  outline-offset: 4px;
}
@media (hover: hover) {
  .p-fv.js-sub-fv .c-sub-fv-pankuzu:hover {
    color: #0081ad;
  }
  .p-fv.js-sub-fv .c-sub-fv-pankuzu:hover .c-button__icon {
    translate: -3px 0;
  }
  .p-fv.js-sub-fv .c-sub-fv-pankuzu:hover .c-sub-fv-pankuzu-link::after {
    scale: 1 1;
  }
}

/* ---------- 日本語のタイトル（ドットがはけると文字が現れる） ---------- */
.p-fv.js-sub-fv .p-sub-fv__title--ja {
  position: relative;
  z-index: 0;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
  margin: clamp(18px, 2.4vw, 32px) 0 0;
  padding: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(40px, 1.2rem + 4.4vw, 100px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.04em;
  color: #003547;
  transform: none;
  animation: c-sub-fv-text 1.25s linear 0.2s both;
}
.p-fv.js-sub-fv .p-sub-fv__title--ja::before {
  content: none;
}
.p-fv.js-sub-fv .p-sub-fv__title--ja::after {
  content: "";
  position: absolute;
  inset: 0.1em -0.02em 0.06em;
  z-index: 1;
  background: linear-gradient(135deg, #2A62A3 0%, #0081ad 45%, #87ce9a 100%);
  -webkit-mask: radial-gradient(circle at center, #000 calc(var(--c-sub-fv-dot) - 0.6px), transparent var(--c-sub-fv-dot)) 0 0/5px 5px repeat;
  mask: radial-gradient(circle at center, #000 calc(var(--c-sub-fv-dot) - 0.6px), transparent var(--c-sub-fv-dot)) 0 0/5px 5px repeat;
  pointer-events: none;
  animation: c-sub-fv-dots 1.25s cubic-bezier(0.55, 0, 0.45, 1) 0.2s both;
}
.p-fv.js-sub-fv .p-sub-fv__title--ja .u-ch,
.p-fv.js-sub-fv .p-sub-fv__title--ja .u-ch > span {
  opacity: 1 !important;
  translate: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}
.p-fv.js-sub-fv .p-sub-fv__title--ja .u-ch::after {
  content: none;
}
@media (width < 768px) {
  .p-fv.js-sub-fv .p-sub-fv__title--ja {
    margin-top: 14px;
    font-size: clamp(34px, 10.4vw, 58px);
  }
  .p-fv.js-sub-fv .p-sub-fv__title--ja::after {
    -webkit-mask-size: 4px 4px;
    mask-size: 4px 4px;
  }
}

/* ---------- コピー・説明 ---------- */
.p-fv.js-sub-fv .p-sub-fv__body {
  position: relative;
  z-index: 1;
  margin-top: clamp(23px, 2.8vw, 36px);
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  text-align: left;
  transform: none;
  animation: c-sub-fv-up 0.9s cubic-bezier(0.19, 1, 0.22, 1) 1s both;
}

.p-fv.js-sub-fv .p-sub-fv__copy-text {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(17px, 0.85rem + 0.55vw, 24px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: #003547;
  text-align: left;
}

.p-fv.js-sub-fv .p-sub-fv__copy--lead {
  max-width: 48em;
  margin: 12px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(13px, 0.78rem + 0.15vw, 15px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #22414e;
  text-align: left;
}

/* ---------- 真ん中揃えのページも、FV の中は左揃え ---------- */
.p-fv.js-sub-fv .c-title-center,
.p-fv.js-sub-fv .c-title-center .p-sub-fv__title {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

.p-fv.js-sub-fv .c-title-center .p-sub-fv__title,
.p-fv.js-sub-fv .p-sub-fv__copy-text.c-title-center,
.p-fv.js-sub-fv .p-sub-fv__copy--lead.c-title-center {
  margin-inline: 0;
}

/* ---------- キーフレーム（読み込み時だけ） ---------- */
@keyframes c-sub-fv-dots {
  0% {
    --c-sub-fv-dot: 0px;
  }
  40%, 52% {
    --c-sub-fv-dot: 3.3px;
  }
  100% {
    --c-sub-fv-dot: 0px;
  }
}
@keyframes c-sub-fv-text {
  0%, 45% {
    color: transparent;
  }
  46%, 100% {
    color: #003547;
  }
}
@keyframes c-sub-fv-fade {
  from {
    opacity: 0;
  }
}
@keyframes c-sub-fv-up {
  from {
    opacity: 0;
    translate: 0 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-fv.js-sub-fv .c-sub-fv-pankuzu,
  .p-fv.js-sub-fv .p-sub-fv__title--ja,
  .p-fv.js-sub-fv .p-sub-fv__body {
    animation: none !important;
  }
  .p-fv.js-sub-fv .p-sub-fv__title--ja::after {
    content: none;
  }
}
/* =========================================================
    トップ FV（地球 → 空 → 街）
    ・スクロールの演出（GSAP）は、FV のスクロール区間（.p-home-fv__wrap の高さ - 100vh）にちょうど収まる
    ・次のギャラリーが画面を覆ったら .is-covered で FV を描かない
    ※ GSAP で動かす opacity / transform には CSS の transition をつけないこと（scrub と取り合ってカクつく）
========================================================= */
.gsap-marker-start,
.gsap-marker-end,
.gsap-marker-scroller-end,
.gsap-marker-scroller-start {
  display: none;
}

.p-home-fv {
  overflow-x: clip;
  position: sticky;
  top: 0;
  z-index: 1;
}
.p-home-fv.is-covered .p-home-fv__inner {
  visibility: hidden;
}
.p-home-fv.is-covered .star,
.p-home-fv.is-covered .men-fixed {
  animation-play-state: paused;
}
.p-home-fv .p-home-fv__wrap {
  position: relative;
  height: 350vh;
}
@media (width < 768px) {
  .p-home-fv .p-home-fv__wrap {
    height: 400vh;
  }
}
.p-home-fv .p-home-fv__inner {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #fff;
}
.p-home-fv {
  /* =====================
  背景
  ===================== */
}
.p-home-fv .bg-space,
.p-home-fv .bg-sky {
  position: absolute;
  inset: 0;
}
.p-home-fv .bg-space {
  z-index: 1;
  background: linear-gradient(180deg, #07111f 0%, #15395c 100%);
  opacity: 1;
}
.p-home-fv .bg-sky {
  z-index: 2;
  background: linear-gradient(180deg, #8dd9ff 0%, #eafcff 100%);
  opacity: 0;
}
.p-home-fv {
  /* =====================
  星空
  ===================== */
}
.p-home-fv .stars {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.p-home-fv .star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px #fff, 0 0 10px #fff;
  animation: twinkle 2.4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.6);
  }
}
.p-home-fv {
  /* =====================
  地球
  ===================== */
}
.p-home-fv .earth {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  transform: translateX(-50%);
  transform-origin: center bottom;
  will-change: transform, opacity;
}
@media (width < 768px) {
  .p-home-fv .earth {
    width: 130%;
  }
}
.p-home-fv .earth--01 {
  opacity: 1;
  z-index: 10;
}
.p-home-fv .earth--02 {
  opacity: 0;
  z-index: 11;
}
.p-home-fv .earth--03 {
  opacity: 0;
  z-index: 12;
}
.p-home-fv {
  /* =====================
  月
  ===================== */
}
.p-home-fv .moon {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 120px;
  z-index: 20;
}
.p-home-fv {
  /* =====================
  ロゴ
  ===================== */
}
.p-home-fv .logo {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
  z-index: 30;
  width: clamp(440px, 70vw, 1080px);
}
@media (width < 768px) {
  .p-home-fv .logo {
    width: clamp(330px, 90vw, 570px);
  }
}
.p-home-fv .logo svg {
  width: 100%;
  height: auto;
  display: block;
}
.p-home-fv .logo svg path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.p-home-fv {
  /* =====================
  コピー
  ===================== */
}
.p-home-fv .copy {
  position: absolute;
  top: 22%;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
  color: #0f4b86;
  font-size: clamp(44px, 2vw + 35px, 70px);
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0;
  z-index: 50;
  white-space: nowrap;
}
@media (width < 768px) {
  .p-home-fv .copy {
    font-size: clamp(13px, 8.5vw, 44px);
  }
}
.p-home-fv {
  /* =====================
  地表背景
  ===================== */
}
.p-home-fv .top-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 5;
}
.p-home-fv {
  /* =====================
  街
  ===================== */
}
.p-home-fv .top-city {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  transform: translateX(-50%);
  transform-origin: center bottom;
  opacity: 0;
  z-index: 80;
}
@media (width < 768px) {
  .p-home-fv .top-city {
    width: 130%;
  }
}
.p-home-fv {
  /* =====================
  人物（ふわふわは CSS。GSAP では触らない）
  ===================== */
}
.p-home-fv .men-fixed {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 46%;
  max-width: 489px;
  transform: translate(-50%, -50%) scale(0.7);
  transform-origin: center center;
  z-index: 90;
  pointer-events: none;
  animation: floating 4s ease-in-out infinite;
}
@media (width < 768px) {
  .p-home-fv .men-fixed {
    width: 88%;
  }
}

@keyframes floating {
  0%, 100% {
    transform: translate(-50%, -50%) scale(0.7);
  }
  50% {
    transform: translate(-50%, calc(-50% - 15px)) scale(0.7);
  }
}
/* =====================
  スクロール（丸ボタン）
  ===================== */
.scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  z-index: 100;
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 1px solid #2A62A3;
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 0.4s ease;
}

/* 矢印 */
.scroll span {
  position: absolute;
  top: 33%;
  left: 0;
  right: 0;
  width: 10px;
  height: 10px;
  margin: auto;
  border-bottom: 1px solid #2A62A3;
  border-left: 1px solid #2A62A3;
  transform: rotate(-45deg);
}

/* 波紋 */
.scroll::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 50px;
  height: 50px;
  margin: auto;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(28, 180, 211, 0.5);
  opacity: 0;
  animation: scroll 2s infinite;
}

@keyframes scroll {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 20px rgba(28, 180, 211, 0.5);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.scroll.is-hidden {
  opacity: 0;
  pointer-events: none;
}
.scroll.is-hidden::before {
  animation: none;
}

/* =========================================================
    トップページ（FV より下）
========================================================= */
.p-home-title__anchor {
  position: absolute;
  top: calc(-100vh + clamp(80px, 10vw - 18px, 120px));
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
@media (width < 768px) {
  .p-home-title__anchor {
    top: calc(-100vh + clamp(50px, 7vw + 24px, 80px));
  }
}

.p-home-title {
  position: relative;
  z-index: 2;
}

.p-home-title__bg {
  display: block;
  width: 100%;
}

.p-home-title__wrap {
  position: relative;
  margin-top: -58%;
  text-align: center;
  color: #2A62A3;
}
@media (width < 768px) {
  .p-home-title__wrap {
    margin-top: -100%;
  }
}

.p-home-title__heading {
  margin: 0;
  font-size: clamp(38px, 2vw + 30px, 62px);
  font-weight: 900;
  letter-spacing: 0.06em;
}

.p-home-title__heading-en {
  margin-top: 12px;
  font-size: clamp(16px, 2vw + 3px, 27px);
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* =========================================================
    ギャラリー（since 1980）
========================================================= */
.p-top-gallery {
  position: relative;
  z-index: 2;
  height: 340vh;
  background: linear-gradient(180deg, #ffffff 0%, #f0f8fd 50%, #ffffff 100%);
}
@media (width < 768px) {
  .p-top-gallery {
    height: 280vh;
  }
}

.p-top-gallery__sticky {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  overflow: hidden;
}

.p-top-gallery__photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.p-top-gallery__fly {
  --t: clamp(0, calc((var(--pin, 0) - var(--d, 0)) / 0.42), 1);
  --tt: calc(var(--t) * var(--t));
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--w);
  margin: 0;
  translate: -50% -50%;
  transform: translate3d(calc(var(--dx) * (1 + var(--tt) * 0.75) * 38vw), calc(var(--dy) * (1 + var(--tt) * 0.75) * 37vh), 0) scale(calc(0.3 + var(--tt) * 1.5));
  opacity: min(var(--t) * 7, (1 - var(--t)) * 5, 1);
  will-change: transform, opacity;
}
@media (width < 768px) {
  .p-top-gallery__fly {
    width: calc(var(--w) * 1.8);
  }
}

.p-top-gallery__fly {
  z-index: 2;
  aspect-ratio: var(--r);
  overflow: hidden;
  background: #e9eef1;
}
.p-top-gallery__fly img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12) skewY(calc(var(--v, 0) * 5deg));
}

.p-top-gallery__copy {
  position: relative;
  z-index: 3;
  padding: 40px 24px;
  text-align: center;
  scale: calc(1 - var(--pin, 0) * 0.08);
  transition: opacity 1s ease, translate 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .p-top-gallery__copy:not(.is-in) {
  opacity: 0;
  translate: 0 40px;
}

.p-top-gallery__since {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #0081ad;
}
.p-top-gallery__since span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #003547;
}
.p-top-gallery__since span:last-child::before {
  content: "";
  width: 40px;
  height: 2px;
  background: #0081ad;
}

.p-top-gallery__title {
  margin: 24px 0 0;
  font-size: clamp(40px, 0.5rem + 5.6vw, 110px);
  font-weight: 900;
  line-height: 1.18;
  letter-spacing: 0.02em;
  color: #003547;
  transform: skewY(calc(var(--v, 0) * -2deg));
}

.p-top-gallery__text {
  margin: 28px 0 0;
  font-size: clamp(14px, 0.85rem + 0.2vw, 16px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.06em;
  color: #22414e;
}

.p-top-gallery__bar {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 160px;
  height: 2px;
  translate: -50% 0;
  background: rgba(0, 53, 71, 0.12);
}
.p-top-gallery__bar i {
  display: block;
  height: 100%;
  background: #0081ad;
  transform-origin: left;
  scale: var(--pin, 0) 1;
}

/* =========================================================
    事例紹介
========================================================= */
.p-top-works {
  position: relative;
  z-index: 3;
  padding-block: clamp(100px, 11vw, 170px) clamp(120px, 14vw, 220px);
  overflow: hidden;
  overflow: clip;
  background: linear-gradient(180deg, #ffffff 0%, #eef8fd 100%);
  color: #003547;
}

.p-top-works__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 16px clamp(32px, 5vw, 80px);
  margin-bottom: clamp(48px, 6vw, 96px);
}
.p-top-works__head .c-title {
  margin: 0;
}
.p-top-works__head .c-title__heading {
  margin-bottom: 0;
}
@media (width < 900px) {
  .p-top-works__head {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-top-works__text {
  margin: 0 0 20px;
  font-size: clamp(13.5px, 0.8rem + 0.2vw, 15.5px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #22414e;
}
@media (width < 768px) {
  .p-top-works__text {
    margin-bottom: 14px;
    font-size: 13px;
  }
}

.is-motion .p-top-works__side {
  transition: opacity 1s ease, translate 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-motion .p-top-works__side:not(.is-in) {
  opacity: 0;
  translate: 0 40px;
}

.p-top-works__gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(14px, 2vw, 32px);
}
@media (width < 768px) {
  .p-top-works__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-bottom: 28px;
  }
}

.p-top-works__col {
  display: grid;
  gap: clamp(14px, 2vw, 32px);
  transform: translate3d(0, calc(var(--pp, 0) * var(--s, 0px)), 0);
}
.p-top-works__col--1 {
  --s: 60px;
}
.p-top-works__col--2 {
  --s: -150px;
  margin-top: clamp(80px, 12vw, 200px);
}
.p-top-works__col--3 {
  --s: 110px;
  margin-top: clamp(30px, 5vw, 80px);
}
@media (width < 768px) {
  .p-top-works__col {
    display: contents;
  }
}

.p-top-works__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #dfeef6;
  clip-path: inset(0);
  transition: clip-path 1.4s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--d, 0) * 0.12s);
}
.p-top-works__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--pp, 0) * -6%), 0) scale(1.16) skewY(calc(var(--v, 0) * 2deg));
}
.p-top-works__photo--a {
  aspect-ratio: 3/2;
}
.p-top-works__photo--b {
  aspect-ratio: 7/5;
}
.p-top-works__photo--c {
  aspect-ratio: 1/1;
}
@media (width < 768px) {
  .p-top-works__photo {
    aspect-ratio: 1/1;
  }
  .p-top-works__photo.is-sp-right {
    translate: 0 28px;
  }
}

.is-motion .p-top-works__photo:not(.is-in) {
  clip-path: inset(100% 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .p-top-works__col {
    transform: none;
  }
  .p-top-works__photo {
    clip-path: none !important;
  }
}
/* =========================================================
    事業内容
========================================================= */
.p-top-service {
  position: relative;
  padding-block: clamp(110px, 12vw, 180px) clamp(80px, 8vw, 130px);
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 30%, #eef8fd 62%, #e6f4fb 100%);
}

.p-top-service__cloud1 {
  top: 6%;
  right: 4%;
  width: clamp(160px, 18vw, 280px);
}

.p-top-service .l-inner {
  position: relative;
  z-index: 2;
}

.p-top-service__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 48px;
}
.p-top-service__head .c-title {
  margin: 0;
}
.p-top-service__head .c-title__heading {
  margin-bottom: 0;
}

.p-top-service__lead {
  margin: 0;
  font-size: clamp(16px, 0.9rem + 0.5vw, 22px);
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: #003547;
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .p-top-service__lead:not(.is-in) {
  opacity: 0;
  translate: 0 30px;
}

.p-top-service__scene {
  position: relative;
  z-index: 1;
  max-width: 1680px;
  margin: clamp(8px, 1vw, 20px) auto 0;
}

.p-top-service__hint {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 20px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 53, 71, 0.16);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5b7480;
}
.p-top-service__hint span:first-child {
  font-family: "Syncopate", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #003547;
}

.p-top-service__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 64px);
  margin: clamp(48px, 5vw, 80px) 0 0;
  padding: 0;
  border-top: 1px solid #003547;
  list-style: none;
  counter-reset: none;
}
@media (width < 900px) {
  .p-top-service__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-top-service__item {
  min-width: 0;
  border-bottom: 1px solid rgba(0, 53, 71, 0.16);
  transition: opacity 0.9s ease, translate 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}

.is-motion .p-top-service__item:not(.is-in) {
  opacity: 0;
  translate: 0 30px;
}

.p-top-service__link {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: clamp(56px, 5vw, 80px) minmax(0, 1fr) 52px;
  align-items: center;
  gap: 0 clamp(14px, 1.6vw, 24px);
  padding: clamp(18px, 1.8vw, 26px) clamp(10px, 1vw, 16px) clamp(18px, 1.8vw, 26px) 4px;
  overflow: hidden;
  color: #003547;
  text-decoration: none;
}
.p-top-service__link::before {
  content: "";
  position: absolute;
  inset: 0 -60px 0 -30px;
  z-index: -1;
  background: linear-gradient(90deg, #dff0fa, #eef8fd);
  transform: skewX(-23deg);
  transform-origin: 0 50%;
  scale: 0 1;
  transition: scale 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-top-service__link:hover::before, .p-top-service__link:focus-visible::before {
  scale: 1 1;
}
.p-top-service__link:hover .p-top-service__text, .p-top-service__link:focus-visible .p-top-service__text {
  color: #2A62A3;
}
.p-top-service__link:hover .p-top-service__arrow, .p-top-service__link:focus-visible .p-top-service__arrow {
  color: #0081ad;
  translate: 8px 0;
}
.p-top-service__link:focus-visible {
  outline: 2px solid #0081ad;
  outline-offset: -2px;
}

.p-top-service__no {
  font-family: "Syncopate", sans-serif;
  font-size: clamp(24px, 2.4vw, 38px);
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  color: #0081ad;
}

.p-top-service__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.p-top-service__en {
  font-family: "Syncopate", sans-serif;
  font-size: 9px;
  font-style: italic;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5b7480;
}

.p-top-service__text {
  font-size: clamp(18px, 0.9rem + 0.6vw, 24px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.04em;
  transition: color 0.4s ease;
}
.p-top-service__text small {
  font-size: 11px;
  font-weight: 700;
}

.p-top-service__items {
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: #5b7480;
}

.p-top-service__arrow {
  display: block;
  width: 52px;
  color: #003547;
  transition: translate 0.5s cubic-bezier(0.65, 0, 0.35, 1), color 0.4s ease;
}
.p-top-service__arrow svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
@media (width < 480px) {
  .p-top-service__arrow {
    width: 36px;
  }
}

@media (width < 480px) {
  .p-top-service__link {
    grid-template-columns: 44px minmax(0, 1fr) 36px;
  }
}
.p-top-service:has(.p-top-service__item--1:hover) .c-scene__marker--1 .c-scene__box,
.p-top-service:has(.p-top-service__item--2:hover) .c-scene__marker--2 .c-scene__box,
.p-top-service:has(.p-top-service__item--3:hover) .c-scene__marker--3 .c-scene__box,
.p-top-service:has(.p-top-service__item--4:hover) .c-scene__marker--4 .c-scene__box,
.p-top-service:has(.p-top-service__item--5:hover) .c-scene__marker--5 .c-scene__box,
.p-top-service:has(.p-top-service__item--6:hover) .c-scene__marker--6 .c-scene__box,
.p-top-service:has(.p-top-service__item--7:hover) .c-scene__marker--7 .c-scene__box,
.p-top-service:has(.p-top-service__item--8:hover) .c-scene__marker--8 .c-scene__box {
  fill: #0081ad;
}

.p-top-service:has(.c-scene__marker--1:hover) .p-top-service__item--1 .p-top-service__link::before,
.p-top-service:has(.c-scene__marker--2:hover) .p-top-service__item--2 .p-top-service__link::before,
.p-top-service:has(.c-scene__marker--3:hover) .p-top-service__item--3 .p-top-service__link::before,
.p-top-service:has(.c-scene__marker--4:hover) .p-top-service__item--4 .p-top-service__link::before,
.p-top-service:has(.c-scene__marker--5:hover) .p-top-service__item--5 .p-top-service__link::before,
.p-top-service:has(.c-scene__marker--6:hover) .p-top-service__item--6 .p-top-service__link::before,
.p-top-service:has(.c-scene__marker--7:hover) .p-top-service__item--7 .p-top-service__link::before,
.p-top-service:has(.c-scene__marker--8:hover) .p-top-service__item--8 .p-top-service__link::before {
  scale: 1 1;
}

.p-top-service__footer {
  margin-top: clamp(40px, 4vw, 64px);
  text-align: center;
}

/* =========================================================
    保有重機
========================================================= */
.p-top-equip {
  position: relative;
  z-index: 2;
  height: 260vh;
  background: linear-gradient(180deg, #e6f4fb 0%, #f6fbfe 60%, #ffffff 100%);
}
@media (width < 768px) {
  .p-top-equip {
    height: 220vh;
  }
}

.p-top-equip__sticky {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  padding-top: clamp(90px, 14vh, 160px);
  overflow: hidden;
}

.p-top-equip__head {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: end;
  gap: 20px clamp(32px, 5vw, 80px);
}
@media (width < 900px) {
  .p-top-equip__head {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-top-equip__en {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #0081ad;
}
.p-top-equip__en::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.p-top-equip__title {
  margin: 18px 0 0;
  white-space: nowrap;
  font-size: clamp(32px, 0.8rem + 3.4vw, 72px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #003547;
}

.p-top-equip__text {
  margin: 0 0 22px;
  font-size: clamp(14px, 0.85rem + 0.2vw, 16px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #22414e;
}

.is-motion .p-top-equip__copy,
.is-motion .p-top-equip__side {
  transition: opacity 1s ease, translate 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-motion .p-top-equip__copy:not(.is-in),
.is-motion .p-top-equip__side:not(.is-in) {
  opacity: 0;
  translate: 0 40px;
}

.p-top-equip__land {
  position: relative;
  z-index: 1;
  height: clamp(220px, 36vh, 400px);
}

.p-top-equip__band {
  position: absolute;
  inset: 0 0 26px;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
}
.p-top-equip__band .c-band__layer {
  width: 124%;
  transform: translate3d(calc(var(--pin, 0) * var(--sx, 0%)), 0, 0);
}
.p-top-equip__band .c-band__layer--far {
  --sx: -5%;
}
.p-top-equip__band .c-band__layer--city {
  --sx: -10%;
}
.p-top-equip__band .c-band__layer--mid {
  --sx: -18%;
}
@media (width < 768px) {
  .p-top-equip__band .c-band__layer > g {
    filter: none;
  }
}

.p-top-equip__road {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 26px;
  background: repeating-linear-gradient(90deg, #ffffff 0 36px, transparent 36px 64px) no-repeat center/100% 2px, linear-gradient(180deg, #d2e5f0 0%, #bfd8e8 100%);
}

.p-top-equip__convoy {
  position: absolute;
  bottom: 4px;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(28px, 4vw, 72px);
  width: max-content;
  transform: translate3d(calc(-70% + var(--pin, 0) * (70% + 100vw)), 0, 0);
  will-change: transform;
}

.p-top-equip__item {
  display: block;
  flex: none;
  width: clamp(130px, 15vw, 250px);
}
.p-top-equip__item svg {
  transform-origin: 50% 100%;
  transform: skewX(calc(var(--v, 0) * 10deg));
}
.p-top-equip__item .c-machine__wheel {
  rotate: calc(var(--pin, 0) * 1440deg);
}
@media (width < 768px) {
  .p-top-equip__item .c-machine > g {
    filter: none;
  }
}

/* =========================================================
    お知らせ
========================================================= */
.p-top-blog {
  position: relative;
  z-index: 2;
  padding-block: clamp(100px, 10vw, 160px);
  background: #f1f8fc;
}

.p-top-blog__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(36px, 4vw, 56px);
}
.p-top-blog__head .c-title {
  margin: 0;
}
.p-top-blog__head .c-title__heading {
  margin-bottom: 0;
}

.p-top-blog__list {
  margin: 0;
  padding: 0;
  border-top: 2px solid #003547;
  list-style: none;
}

.p-top-blog__item {
  border-bottom: 1px solid rgba(0, 53, 71, 0.14);
  transition: opacity 0.9s ease, translate 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .p-top-blog__item:not(.is-in) {
  opacity: 0;
  translate: 0 24px;
}

.p-top-blog__link {
  display: grid;
  grid-template-columns: clamp(140px, 20vw, 240px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding-block: 24px;
  color: #003547;
  text-decoration: none;
}
@media (width < 600px) {
  .p-top-blog__link {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 14px;
    padding-block: 18px;
  }
}

.p-top-blog__image-wrap {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #e9eef1;
}

.p-top-blog__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.p-top-blog__wrap {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px 16px;
}
.p-top-blog__wrap .p-blog-date {
  font-family: "Syncopate", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #003547;
}
.p-top-blog__wrap .p-blog-tag {
  justify-self: start;
  padding: 2px 10px;
  border: 1px solid rgba(0, 53, 71, 0.35);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #003547;
}

.p-top-blog__text-wrap {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.p-top-blog__text-wrap .p-top-blog__text {
  margin: 0;
  font-size: clamp(15px, 0.85rem + 0.35vw, 19px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.04em;
  transition: color 0.4s ease;
}
.p-top-blog__text-wrap .c-button__icon-blue {
  flex: none;
  width: 46px;
  height: 46px;
}
@media (width < 768px) {
  .p-top-blog__text-wrap .c-button__icon-blue {
    width: 34px;
    height: 34px;
  }
}

@media (hover: hover) {
  .p-top-blog__link:hover .p-top-blog__text {
    color: #0081ad;
  }
}
/* =========================================================
    採用情報
========================================================= */
.p-top-recruit {
  --slant: clamp(32px, 5vw, 80px);
  position: relative;
  z-index: 3;
  margin-top: calc(var(--slant) * -1);
  overflow: hidden;
  clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(160deg, #00384c 0%, #002433 100%);
  color: #fff;
}
.p-top-recruit .c-title {
  margin-bottom: clamp(28px, 3vw, 48px);
}
.p-top-recruit .c-title__heading-en,
.p-top-recruit .c-title__no {
  color: #9fe0ff;
}
.p-top-recruit .c-title__heading {
  color: #fff;
}

.p-top-recruit__photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 40%;
  margin: 0;
  overflow: hidden;
  background: #0b4157;
  clip-path: inset(0);
  transition: clip-path 1.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.p-top-recruit__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  transform: translate3d(0, calc(var(--pp, 0) * -5%), 0) scale(1.16) skewY(calc(var(--v, 0) * 2deg));
}
.p-top-recruit__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 36, 51, 0.6) 0%, rgba(0, 36, 51, 0) 35%);
  pointer-events: none;
}
@media (width < 900px) {
  .p-top-recruit__photo {
    display: none;
  }
}

.is-motion .p-top-recruit__photo:not(.is-in) {
  clip-path: inset(0 0 0 100%);
}

.p-top-recruit__inner {
  position: relative;
  z-index: 2;
}

.p-top-recruit__body {
  width: calc(50% - clamp(40px, 6vw, 110px));
  padding-block: calc(clamp(110px, 12vw, 190px) + var(--slant) * 0.5) clamp(110px, 12vw, 190px);
}
@media (width < 900px) {
  .p-top-recruit__body {
    width: 100%;
    padding-block: 56px 96px;
  }
}

.p-top-recruit__copy {
  margin: 0;
  font-size: clamp(26px, 1rem + 2vw, 52px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #fff;
}

.p-top-recruit__text {
  max-width: 30em;
  margin: clamp(24px, 2.4vw, 36px) 0 0;
  font-size: clamp(13px, 0.78rem + 0.2vw, 15px);
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
}
.p-top-recruit__text::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin-bottom: clamp(20px, 2vw, 28px);
  background: #9fe0ff;
}

.p-top-recruit__button {
  margin-top: clamp(32px, 3.4vw, 52px);
}

.p-top-recruit__link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  width: min(100%, 360px);
  padding: 22px 26px 22px 30px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.4s ease;
}
.p-top-recruit__link::before {
  content: "";
  position: absolute;
  inset: -3px -40px -3px -20px;
  z-index: -1;
  background: #0081ad;
  transform: skewX(-23deg);
  transform-origin: 0 50%;
  scale: 0 1;
  transition: scale 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-top-recruit__link:hover, .p-top-recruit__link:focus-visible {
  border-color: #0081ad;
}
.p-top-recruit__link:hover::before, .p-top-recruit__link:focus-visible::before {
  scale: 1 1;
}
.p-top-recruit__link:hover .p-top-recruit__arrow, .p-top-recruit__link:focus-visible .p-top-recruit__arrow {
  translate: 8px 0;
}
.p-top-recruit__link:focus-visible {
  outline: 2px solid #9fe0ff;
  outline-offset: 3px;
}

.p-top-recruit__arrow {
  display: block;
  width: 44px;
  transition: translate 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-top-recruit__arrow svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.p-top-recruit__copy,
.p-top-recruit__text,
.p-top-recruit__button {
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .p-top-recruit__copy:not(.is-in),
.is-motion .p-top-recruit__text:not(.is-in),
.is-motion .p-top-recruit__button:not(.is-in) {
  opacity: 0;
  translate: 0 30px;
}

@media (prefers-reduced-motion: reduce) {
  .p-top-recruit__bg-text {
    transform: none;
  }
  .p-top-recruit__photo {
    clip-path: none !important;
  }
}
/* =========================================================
    お問い合わせ（page-contact.php / page-contact-confirm.php）
========================================================= */
.p-contact {
  padding-block: calc(clamp(24px, 5vw, 80px) + clamp(56px, 6vw, 96px)) clamp(80px, 9vw, 140px);
  color: #003547;
}

.p-contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 4vw, 56px);
  max-width: 1000px;
}

/* ----------  説明 ---------- */
.p-contact__intro {
  position: relative;
}

.p-contact__heading--title {
  margin: 0;
  font-size: clamp(24px, 1rem + 1.4vw, 36px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #003547;
}

.p-contact__heading--text {
  margin: 20px 0 0;
  font-size: clamp(13px, 0.8rem + 0.15vw, 15px);
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #22414e;
}

.p-contact__heading--list {
  display: grid;
  gap: 8px;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(0, 53, 71, 0.16);
  list-style: none;
}
.p-contact__heading--list li {
  position: relative;
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: #5b7480;
}
.p-contact__heading--list li::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0081ad;
}

.p-contact__tel {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 12px 32px 12px 12px;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: #fff;
  color: #003547;
  text-decoration: none;
  transition: background-color 0.4s ease;
}
.p-contact__tel:hover {
  background: #f4fafd;
}
.p-contact__tel:hover .p-contact__tel-icon {
  background: #2A62A3;
  color: #fff;
}

.p-contact__tel-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid #2A62A3;
  border-radius: 50%;
  color: #2A62A3;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.p-contact__tel-icon svg {
  width: 20px;
  height: 20px;
}

.p-contact__tel-body {
  display: grid;
  gap: 2px;
}

.p-contact__tel-label,
.p-contact__tel-time {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #5b7480;
}

.p-contact__tel-num {
  font-family: "Syncopate", sans-serif;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ---------- フォーム ---------- */
.p-contact__form {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 4vw, 60px);
  background: #fff;
}
@media (width < 480px) {
  .p-contact__form {
    padding: 28px 18px;
  }
}
.p-contact--confirm .p-contact__form {
  max-width: 880px;
  margin-inline: auto;
  width: 100%;
}

.p-contact__form .contact-form__step {
  display: none;
}

/* ---------- Contact Form 7 のフォーム ---------- */
.p-contact__form .wpcf7,
.p-contact__form .wpcf7-form {
  margin: 0;
}
.p-contact__form .contact-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(0, 53, 71, 0.12);
}
.p-contact__form .contact-form__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #003547;
}
.p-contact__form .contact-form__required {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  background: linear-gradient(110deg, #2A62A3 0%, #0081ad 100%);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: #fff;
}
.p-contact__form .contact-form__body {
  min-width: 0;
  font-size: 0;
  line-height: 1.8;
  color: #22414e;
}
.p-contact__form .contact-form__body .wpcf7-form-control-wrap,
.p-contact__form .contact-form__body .contact-form__privacy,
.p-contact__form .contact-form__body .contact-form__checkbox,
.p-contact__form .contact-form__body .wpcf7-not-valid-tip {
  font-size: 15px;
}
.p-contact__form .contact-form__body .wpcf7-form-control-wrap {
  display: block;
}
.p-contact--confirm .p-contact__form .contact-form__body {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #003547;
}
.p-contact__form input[type=text],
.p-contact__form input[type=email],
.p-contact__form input[type=tel],
.p-contact__form input[type=url],
.p-contact__form input[type=number],
.p-contact__form input[type=date],
.p-contact__form select,
.p-contact__form textarea {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(0, 53, 71, 0.25);
  border-radius: 0;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #003547;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
}
.p-contact__form input[type=text]::placeholder,
.p-contact__form input[type=email]::placeholder,
.p-contact__form input[type=tel]::placeholder,
.p-contact__form input[type=url]::placeholder,
.p-contact__form input[type=number]::placeholder,
.p-contact__form input[type=date]::placeholder,
.p-contact__form select::placeholder,
.p-contact__form textarea::placeholder {
  color: #9db2bc;
}
.p-contact__form input[type=text]:focus,
.p-contact__form input[type=email]:focus,
.p-contact__form input[type=tel]:focus,
.p-contact__form input[type=url]:focus,
.p-contact__form input[type=number]:focus,
.p-contact__form input[type=date]:focus,
.p-contact__form select:focus,
.p-contact__form textarea:focus {
  border-color: #2A62A3;
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 129, 173, 0.14);
}
.p-contact__form textarea {
  min-height: 200px;
  resize: vertical;
}
.p-contact__form .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.p-contact__form .wpcf7-radio .wpcf7-list-item {
  margin: 0;
}
.p-contact__form .wpcf7-radio .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px 11px 14px;
  border: 1px solid rgba(0, 53, 71, 0.25);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  color: #003547;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.p-contact__form .wpcf7-radio .wpcf7-list-item label:has(input:checked) {
  border-color: #2A62A3;
  background: #eef7fd;
}
.p-contact__form input[type=radio],
.p-contact__form input[type=checkbox] {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid rgba(0, 53, 71, 0.35);
  background: #fff;
  cursor: pointer;
  appearance: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.p-contact__form input[type=radio]:focus-visible,
.p-contact__form input[type=checkbox]:focus-visible {
  outline: 2px solid #0081ad;
  outline-offset: 2px;
}
.p-contact__form input[type=radio] {
  border-radius: 50%;
}
.p-contact__form input[type=radio]:checked {
  border-color: #2A62A3;
  background: radial-gradient(circle, #2A62A3 0 5px, #fff 5.5px);
}
.p-contact__form input[type=checkbox] {
  border-radius: 4px;
}
.p-contact__form input[type=checkbox]:checked {
  border-color: #2A62A3;
  background: #2A62A3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") no-repeat center/14px 14px;
}
.p-contact__form .contact-form__privacy {
  margin: 0 0 14px;
  line-height: 1.9;
  color: #22414e;
}
.p-contact__form .contact-form__privacy a {
  color: #0081ad;
  font-weight: 700;
  text-underline-offset: 3px;
}
.p-contact__form .contact-form__checkbox {
  display: inline-flex;
  cursor: pointer;
}
.p-contact__form .contact-form__checkbox .wpcf7-list-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 700;
  color: #003547;
}
.p-contact__form .contact-form__submit,
.p-contact__form .contact-form__confirm {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 48px);
  font-size: 0;
}
.p-contact__form .contact-form__prev,
.p-contact__form .contact-form__send {
  position: relative;
  font-size: 0;
}
.p-contact__form .contact-form__button,
.p-contact__form input[type=submit] {
  display: block;
  min-width: 280px;
  height: 64px;
  margin: 0;
  padding: 0 76px 0 34px;
  border: 0;
  border-radius: 999px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill='%23fff'/%3E%3Cpath d='M15 22h13M23 16l6 6-6 6' fill='none' stroke='%232A62A3' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center/44px 44px, linear-gradient(110deg, #2A62A3 0%, #0081ad 100%);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: left;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.3s ease;
  appearance: none;
}
.p-contact__form .contact-form__button:hover,
.p-contact__form input[type=submit]:hover {
  opacity: 0.88;
}
.p-contact__form .contact-form__button:disabled,
.p-contact__form input[type=submit]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.p-contact__form .wpcf7-previous,
.p-contact__form input[type=button] {
  display: block;
  min-width: 200px;
  height: 64px;
  margin: 0;
  padding: 0 30px 0 70px;
  border: 1px solid #003547;
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill='%23003547'/%3E%3Cpath d='M29 22H16M21 16l-6 6 6 6' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat left 10px center/44px 44px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #003547;
  cursor: pointer;
  transition: background-color 0.3s ease;
  appearance: none;
}
.p-contact__form .wpcf7-previous:hover,
.p-contact__form input[type=button]:hover {
  background-color: #eef7fd;
}
.p-contact__form .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: calc(100% + 12px);
  margin: 0;
  translate: 0 -50%;
}
.p-contact__form .contact-form__submit .wpcf7-spinner {
  left: calc(50% + 152px);
}
.p-contact__form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #c0392b;
}
.p-contact__form .wpcf7-response-output {
  margin: 24px 0 0 !important;
  padding: 14px 18px !important;
  border: 1px solid #2A62A3 !important;
  font-size: 13px;
  color: #003547;
}
@media (width < 480px) {
  .p-contact__form .contact-form__button,
  .p-contact__form input[type=submit],
  .p-contact__form .wpcf7-previous,
  .p-contact__form input[type=button] {
    width: 100%;
    min-width: 0;
  }
  .p-contact__form .contact-form__prev,
  .p-contact__form .contact-form__send {
    width: 100%;
  }
  .p-contact__form .contact-form__submit .wpcf7-spinner {
    left: auto;
    right: 0;
    top: calc(100% + 16px);
  }
}

.p-form {
  width: 81.25%;
  max-width: 1040px;
  min-width: 600px;
  margin: 0 auto;
  font-size: clamp(0.9375rem, 0.1517857143rem + 1.6369047619vw, 1.625rem);
}
@media (width < 768px) {
  .p-form {
    min-width: 270px;
    font-size: clamp(0.75rem, 0.5714285714rem + 0.8928571429vw, 1rem);
  }
}

.p-form__attention {
  text-align: center;
  color: #a21f2d;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.846em;
  margin-top: 3.5em;
}

.p-form__legend {
  grid-area: 1/1;
  font-size: max(0.923em, 14px);
  padding-right: 1.5em;
  line-height: 1.3;
}

.p-form__radio-box {
  display: grid;
  grid-template-columns: 40.95% 59.05%;
  margin-top: max(6.9%, 40px);
}
@media (width < 768px) {
  .p-form__radio-box {
    display: flex;
    flex-direction: column;
  }
}

.p-form__radio-body {
  grid-area: 1/2;
  display: flex;
  flex-direction: column;
  margin-top: -1.05em;
  gap: 1.54em;
}
@media (width < 768px) {
  .p-form__radio-body {
    margin-top: 15px;
    gap: 15px;
  }
}

.p-form__radio-label {
  display: flex;
  align-items: center;
  width: fit-content;
  font-size: 1em;
}

.p-form__radio-input {
  width: 1.7em;
  height: auto;
  aspect-ratio: 1/1;
  cursor: pointer;
  background-image: url(../../assets/images/contact/contact-radio-off.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-right: 1em;
  line-height: 1.3;
}

.p-form__radio-input:checked {
  background-image: url(../../assets/images/contact/contact-radio-on.svg);
}

.p-form__item-box {
  margin-top: max(3.4%, 40px);
}

.p-form__item {
  display: grid;
  grid-template-columns: 40.95% 59.05%;
}
@media (width < 768px) {
  .p-form__item {
    display: flex;
    flex-direction: column;
  }
}

.p-form__item:nth-child(n+2) {
  margin-top: 1.3em;
}

.p-form__item-input-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
  height: fit-content;
  margin-top: 0.25em;
}

.p-form__item-input-wrapper::before,
.p-form__item-input-wrapper::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #fff;
}

.p-form__item-input-wrapper::before {
  top: 0;
  right: 12.2%;
}

.p-form__item-input-wrapper::after {
  bottom: 0;
  left: 13.8%;
}

.p-form__item-input {
  border: solid 4px #008ca5;
  border-radius: 10px;
  background-color: #fff;
  width: 100%;
  min-height: 3.62em;
  padding-inline: 1.2em;
}
@media (width < 768px) {
  .p-form__item-input {
    border: solid 3px #008ca5;
  }
}
@media (width < 480px) {
  .p-form__item-input {
    border: solid 2px #008ca5;
  }
}

.p-form__item-input:focus-visible {
  outline: none;
}

.p-form__item-input::placeholder {
  color: #b2b6b6;
}

.p-form__item-input:focus-visible::placeholder {
  color: transparent;
}

.p-form__schedule {
  display: grid;
  grid-template-columns: 40.95% 59.05%;
}
@media (width < 768px) {
  .p-form__schedule {
    display: flex;
    flex-direction: column;
  }
}
.p-form__schedule .p-form__item-input-wrapper:has(#date-1),
.p-form__schedule .p-form__item-input-wrapper:has(#date-2) {
  margin-top: 0;
  width: 49.5%;
  margin-right: max(3%, 10px);
}
.p-form__schedule .p-form__item-input-wrapper:has(#date-1)::before,
.p-form__schedule .p-form__item-input-wrapper:has(#date-2)::before {
  right: 19.8%;
}
.p-form__schedule .p-form__item-input-wrapper:has(#date-1)::after,
.p-form__schedule .p-form__item-input-wrapper:has(#date-2)::after {
  left: 12.8%;
}
.p-form__schedule .p-form__item-input-wrapper:has(#time-1),
.p-form__schedule .p-form__item-input-wrapper:has(#time-2) {
  margin-top: 0;
  width: 47%;
}
.p-form__schedule .p-form__item-input-wrapper:has(#time-1)::before,
.p-form__schedule .p-form__item-input-wrapper:has(#time-2)::before {
  right: 13.7%;
}
.p-form__schedule .p-form__item-input-wrapper:has(#time-1)::after,
.p-form__schedule .p-form__item-input-wrapper:has(#time-2)::after {
  left: 12.5%;
}

.p-form__schedule:has(#date-1) {
  margin-top: max(7.2%, 40px);
}

.p-form__schedule:has(#date-2) {
  margin-top: max(3.6%, 15px);
}

.p-form__schedule-box {
  display: flex;
  grid-area: 1/2;
  margin-top: -1em;
}
@media (width < 768px) {
  .p-form__schedule-box {
    margin-top: 5px;
  }
}

.p-form__schedule-select {
  width: 100%;
  border: solid 4px #008ca5;
  border-radius: 10px;
  background-color: #fff;
  min-height: 3.62em;
  background-size: 1.95em;
  background-repeat: no-repeat;
  background-position: 1.1em center;
}
@media (width < 768px) {
  .p-form__schedule-select {
    border: solid 3px #008ca5;
  }
}
@media (width < 480px) {
  .p-form__schedule-select {
    border: solid 2px #008ca5;
  }
}

#date-1,
#date-2 {
  padding-left: 4.1em;
  background-image: url(../../assets/images/contact/contact-schedule-date.svg);
}

#time-1,
#time-2 {
  padding-left: 4.2em;
  background-image: url(../../assets/images/contact/contact-schedule-time.svg);
}

.p-form__schedule-select:focus-visible {
  outline: none;
}

.p-form__schedule-select:invalid {
  color: #b2b6b6;
}

.p-form__checkbox-box {
  display: grid;
  grid-template-columns: 40.95% 59.05%;
  margin-top: max(7.2%, 40px);
}
@media (width < 768px) {
  .p-form__checkbox-box {
    display: flex;
    flex-direction: column;
  }
}

.p-form__checkbox-box:has([name*=skills]),
.p-form__checkbox-box:has([name*=conditions]) {
  margin-top: max(5.3%, 40px);
}

.p-form__checkbox-wrapper {
  grid-area: 1/2;
  display: flex;
  flex-direction: column;
  margin-top: -0.95em;
  gap: 1.54em;
}
@media (width < 768px) {
  .p-form__checkbox-wrapper {
    gap: 15px;
    margin-top: 15px;
  }
}

.p-form__checkbox-label {
  display: flex;
  align-items: center;
  width: fit-content;
}

.p-form__checkbox-input {
  width: 1.7em;
  height: auto;
  aspect-ratio: 1/1;
  cursor: pointer;
  background-image: url(../../assets/images/contact/contact-checkbox-off.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  margin-right: 1em;
  flex-shrink: 0;
  line-height: 1.3;
}

.p-form__checkbox-input:checked {
  background-image: url(../../assets/images/contact/contact-checkbox-on.svg);
}

.p-form__textarea-box {
  display: grid;
  grid-template-columns: 40.95% 59.05%;
  margin-top: max(7.2%, 40px);
}
@media (width < 768px) {
  .p-form__textarea-box {
    display: flex;
    flex-direction: column;
  }
}

.p-form__textarea {
  grid-area: 1/2;
  border: solid 4px #008ca5;
  border-radius: 10px;
  background-color: #fff;
  width: 100%;
  padding: 0.99em;
  margin-top: -0.99em;
  aspect-ratio: 614/484;
  line-height: 1.3;
}
@media (width < 768px) {
  .p-form__textarea {
    margin-top: 10px;
    border: solid 3px #008ca5;
  }
}
@media (width < 480px) {
  .p-form__textarea {
    border: solid 2px #008ca5;
  }
}

.p-form__textarea::placeholder {
  color: #b2b6b6;
}

.p-form__textarea:focus {
  outline: none;
}

.p-form__textarea:focus::placeholder {
  color: transparent;
}

.p-form__checkbox-label:has([name=consent]) {
  margin: 1.75em auto 0;
  font-weight: 800;
  font-size: 1em;
}

.p-form__cloudflare {
  margin: max(7.8%, 25px) auto 0;
  width: fit-content;
}

.p-form__submit-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: max(7.5%, 30px);
}

.p-form__error-message {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a21f2d;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.846em;
  text-align: center;
  will-change: color;
  animation: errorMessageColorPulse 4s ease-in-out infinite;
}

@keyframes errorMessageColorPulse {
  0%, 100% {
    color: rgb(162, 31, 45);
  }
  50% {
    color: rgba(162, 31, 45, 0);
  }
}
.p-form__error-message::before {
  content: "";
  display: inline-block;
  width: 1.22em;
  height: 1.136em;
  aspect-ratio: 1/1;
  background-image: url(../../assets/images/contact/contact-error-message.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.45em;
}

.p-form__submit-confirmation-button {
  margin-top: 1.3em;
}

/* ============================================================
  confirm 送信前の確認画面のスタイル
============================================================ */
.p-form--confirm {
  font-size: clamp(0.75rem, 0.5rem + 1.25vw, 1.625rem);
  margin: max(5.4%, 60px) auto 0;
  max-width: 1046px;
}

.p-form__confirm-item {
  display: flex;
  width: 100%;
}
@media (width < 768px) {
  .p-form__confirm-item {
    flex-direction: column;
  }
}

.p-form__confirm-item:nth-child(n+2) {
  margin-top: max(1.84em, 30px);
}

.p-form__confirm-title {
  line-height: 1.5;
  width: 40.5%;
  font-size: max(0.923em, 14px);
  flex-shrink: 0;
  padding-right: 1.5em;
}
@media (width < 768px) {
  .p-form__confirm-title {
    width: 100%;
    padding-right: 0;
  }
}

.p-form__confirm-detail {
  line-height: 1.38;
  width: 59.5%;
  font-size: 1em;
  font-weight: 500;
}
@media (width < 768px) {
  .p-form__confirm-detail {
    width: 100%;
    margin-top: 5px;
  }
}

.p-form__confirm-detail-time {
  margin-left: 2.6em;
}
@media (width < 768px) {
  .p-form__confirm-detail-time {
    margin-left: 1.5em;
  }
}

.p-form__confirm-detail--checkbox {
  display: flex;
  flex-direction: column;
  gap: 1.89em;
}
@media (width < 768px) {
  .p-form__confirm-detail--checkbox {
    gap: 8px;
  }
}

.p-form__confirm-attention {
  color: #008ca5;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 0.846em;
  text-align: center;
  margin-top: 3.2em;
}

.p-form__submit {
  display: flex;
  justify-content: center;
  margin-top: max(11.3%, 40px);
  gap: 9%;
}
@media (width < 768px) {
  .p-form__submit {
    gap: 5%;
  }
}

/* =========================================================
    マーキー（共通パーツ）
========================================================= */
.c-marquee,
.c-marquee-photo {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  overflow: clip;
  background: #fff;
}

.c-marquee {
  padding-top: clamp(48px, 6vw, 96px);
}

.c-marquee__row {
  display: flex;
  border-top: 1px solid rgba(0, 53, 71, 0.16);
  border-bottom: 1px solid rgba(0, 53, 71, 0.16);
}

.c-marquee__track,
.c-marquee-photo__track {
  display: flex;
  flex: none;
  width: max-content;
  will-change: transform;
}

.c-marquee__set {
  display: flex;
  flex: none;
  align-items: center;
  gap: clamp(28px, 3.4vw, 64px);
  padding: clamp(18px, 2vw, 30px) clamp(28px, 3.4vw, 64px) clamp(18px, 2vw, 30px) 0;
  white-space: nowrap;
}

.c-marquee__item {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  transform: skewX(calc(var(--v, 0) * -10deg));
}

.c-marquee__en {
  font-family: "Syncopate", sans-serif;
  font-size: clamp(9px, 0.6vw + 4px, 12px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0081ad;
}

.c-marquee__ja {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(32px, 2.4vw + 18px, 72px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.04em;
  color: #003547;
}

.c-marquee__mark {
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: clamp(14px, 1vw, 20px);
  border-radius: 50%;
  background: #0081ad;
}
@media (width < 768px) {
  .c-marquee__mark {
    width: 7px;
    height: 7px;
  }
}

.c-marquee-photo {
  padding-block: clamp(28px, 3.4vw, 48px) clamp(72px, 8vw, 120px);
}

.c-marquee-photo__set {
  display: flex;
  flex: none;
  gap: clamp(12px, 1.4vw, 20px);
  padding-right: clamp(12px, 1.4vw, 20px);
}

.c-marquee-photo__item {
  flex: none;
  width: clamp(240px, 26vw + 60px, 460px);
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: #e9eef1;
  transform: skewX(var(--mk, 0deg));
}

/* =========================================================
    サブフッター（組織と人 / 保有重機）
    -----------------------------------------------------
    - PC は左に見出し（画面に止まる）、右に中身。スマホは縦に並べる
    - 組織と人・保有重機: 「英字 / 名前 / イラスト / 矢印」の行を並べた一覧（2つとも同じ形。上に紺の線、行ごとに細い線）
      マウスを乗せると: 淡い水色がロゴの枠と同じ角度の斜めの形で左から満ちる / 名前が青に /
                        イラストが hover 用に切り替わる / 矢印が右へ伸びる
    - 行は画面に入ると順に出る（data-reveal → .is-in）
    （寄る・飛び出す・浮く動きはなし。四角い矢印の箱も使わない）
    ※ Sass の変数は使わず値を直接書いています。レスポンシブは @include（to-tab = 767px 以下 / to-sp = 479px 以下 / down(○px) = ○px 以下）
========================================================= */
.sub-footer {
  position: relative;
  z-index: 2;
  display: block;
  background: #fff;
  color: #003547;
}

.sub-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 2fr);
  align-items: start;
  gap: 24px clamp(1.375rem, -1.304rem + 13.39vw, 5.125rem);
  padding-block: 0 clamp(88px, 10vw - 10px, 150px);
}
@media (width < 1270px) {
  .sub-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.sub-footer__head {
  position: sticky;
  top: calc(var(--header-h, 100px) + 24px);
  margin: 0;
}
.sub-footer__head .c-title__heading {
  margin-bottom: 0;
}
@media (width < 900px) {
  .sub-footer__head {
    position: static;
  }
}

.sub-footer__arrow {
  display: block;
  flex: none;
  width: 52px;
  color: #003547;
  transition: translate 0.5s cubic-bezier(0.65, 0, 0.35, 1), color 0.4s ease;
}
.sub-footer__arrow svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.sub-footer-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.35s ease;
}
.sub-footer-card-img--hover {
  opacity: 0;
}

/* =========================================================
    行の一覧（組織と人・保有重機）
========================================================= */
.sub-footer__list {
  margin: 0;
  padding: 0;
  border-top: 1px solid #003547;
  list-style: none;
}

.sub-footer__row {
  border-bottom: 1px solid rgba(0, 53, 71, 0.18);
  transition: opacity 0.9s ease, translate 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--d, 0) * 90ms);
}

.is-motion .sub-footer__row:not(.is-in) {
  opacity: 0;
  translate: 0 28px;
}

.sub-footer__row-link {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) clamp(140px, 15vw, 190px) 52px;
  align-items: center;
  gap: 0 clamp(16px, 2.4vw, 32px);
  padding: 16px 20px 16px 16px;
  overflow: hidden;
  color: #003547;
  text-decoration: none;
}
.sub-footer__row-link::before {
  content: "";
  position: absolute;
  inset: 0 -60px 0 -30px;
  z-index: -1;
  background: linear-gradient(90deg, #dff0fa 0%, #eef8fd 100%);
  transform: skewX(-23deg);
  transform-origin: 0 50%;
  scale: 0 1;
  transition: scale 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.sub-footer__row-link:focus-visible {
  outline: 2px solid #0081ad;
  outline-offset: -2px;
}
@media (width < 768px) {
  .sub-footer__row-link {
    grid-template-columns: minmax(0, 1fr) 116px;
    grid-template-areas: "en image" "title image";
    gap: 6px 16px;
    padding: 14px 0;
  }
}

.sub-footer__row-en {
  font-family: "Syncopate", sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0081ad;
  transition: color 0.4s ease;
}
@media (width < 768px) {
  .sub-footer__row-en {
    grid-area: en;
    align-self: end;
  }
}

.sub-footer__row-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(19px, 0.9rem + 0.9vw, 30px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.04em;
  word-break: keep-all;
  transition: color 0.4s ease;
}
@media (width < 768px) {
  .sub-footer__row-title {
    grid-area: title;
    align-self: start;
  }
}

.sub-footer__row-image {
  position: relative;
  display: block;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid rgba(0, 53, 71, 0.2);
  background: #eaf5fb;
  transition: border-color 0.4s ease;
}
@media (width < 768px) {
  .sub-footer__row-image {
    grid-area: image;
  }
}

@media (width < 768px) {
  .sub-footer__row-link .sub-footer__arrow {
    display: none;
  }
}

@media (hover: hover) {
  .sub-footer__row-link:hover::before {
    scale: 1 1;
  }
  .sub-footer__row-link:hover .sub-footer__row-title {
    color: #2A62A3;
  }
  .sub-footer__row-link:hover .sub-footer__row-image {
    border-color: #2A62A3;
  }
  .sub-footer__row-link:hover .sub-footer-card-img--default {
    opacity: 0;
  }
  .sub-footer__row-link:hover .sub-footer-card-img--hover {
    opacity: 1;
  }
  .sub-footer__row-link:hover .sub-footer__arrow {
    color: #0081ad;
    translate: 10px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sub-footer-card-img,
  .sub-footer__row-link::before,
  .sub-footer__arrow {
    transition: none;
  }
}
/* =========================================================
    お知らせ（トップの一覧の部品 / アーカイブ / 記事ページ）
========================================================= */
/* =====================
    共通の部品（トップの一覧・アーカイブ・記事ページ）
===================== */
.p-blog-tag {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid rgba(0, 53, 71, 0.35);
  border-radius: 0;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #003547;
}

.p-blog-date {
  font-family: "Syncopate", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #003547;
}

.p-blog__text {
  font-size: 16px;
  line-height: 1.5;
}

/* =====================
    アーカイブ
===================== */
.p-blog-archive {
  position: relative;
  padding-block: clamp(60px, 7vw, 110px) clamp(100px, 10vw, 160px);
  background: linear-gradient(180deg, #ffffff 0%, #f1f9fd 50%, #ffffff 100%);
  color: #003547;
}

.p-blog__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(32px, 4vw, 64px);
}
@media (width < 768px) {
  .p-blog__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

.p-blog.c-category-button-wrap {
  margin-bottom: clamp(32px, 4vw, 52px);
}
@media (width < 768px) {
  .p-blog.c-category-button-wrap {
    margin-block: 24px 32px;
  }
}

.p-blog.c-category-button {
  padding-top: 12px;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(11px, 0.6rem + 0.35vw, 14px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (width < 480px) {
  .p-blog.c-category-button {
    font-size: 11px;
    letter-spacing: 0.06em;
  }
}

.p-blog-archive.is-loading .p-blog__grid {
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

a.c-category-button {
  display: inline-block;
  text-decoration: none;
}

.p-blog__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 28px);
}
@media (width < 1100px) {
  .p-blog__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (width < 480px) {
  .p-blog__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}
.p-blog__grid .c-category-button__card {
  min-width: 0;
  animation: p-blog-card-in 0.9s cubic-bezier(0.19, 1, 0.22, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms + 0.1s);
}
.p-blog__grid .c-category-button__card.hide {
  display: none;
}
.p-blog__grid .p-blog.p-top-blog__link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  color: #003547;
  text-decoration: none;
}
.p-blog__grid .p-top-blog__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  border: 1px solid #003547;
  background: #e4f2fa;
}
.p-blog__grid .p-top-blog__image-wrap::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: #0081ad;
  transform-origin: left;
  scale: 0 1;
  transition: scale 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-blog__grid .p-top-blog__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: none;
  transition: none;
}
.p-blog__grid .p-top-blog__wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  border-bottom: 0;
}
.p-blog__grid .p-top-blog__text-wrap {
  display: block;
  flex-basis: 100%;
  padding: 0;
}
.p-blog__grid .p-top-blog__text-wrap .p-top-blog__text {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: clamp(14px, 0.8rem + 0.3vw, 17px);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.03em;
  color: #003547;
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .p-blog__grid .p-top-blog__link:hover .p-top-blog__image {
    scale: none;
  }
  .p-blog__grid .p-top-blog__link:hover .p-top-blog__image-wrap::after {
    scale: 1 1;
  }
  .p-blog__grid .p-top-blog__link:hover .p-top-blog__text {
    color: #0081ad;
  }
}

@keyframes p-blog-card-in {
  from {
    opacity: 0;
    translate: 0 32px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.p-blog__empty {
  grid-column: 1/-1;
  margin: 0;
  padding-block: 60px;
  border-top: 1px solid rgba(0, 53, 71, 0.2);
  border-bottom: 1px solid rgba(0, 53, 71, 0.2);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #5b7480;
}

/* ---------- 年（PC: 右に縦並び / タブレット以下: カテゴリーの上で開閉） ---------- */
.p-blog__years {
  position: sticky;
  top: 120px;
  min-width: 120px;
}
@media (width < 768px) {
  .p-blog__years {
    position: static;
    order: -1;
    min-width: 0;
  }
}

.p-blog__years-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-top: 18px;
  font-family: "Syncopate", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0081ad;
}
.p-blog__years-title::before {
  content: "";
  width: 20px;
  height: 2px;
  background: currentColor;
}
@media (width < 768px) {
  .p-blog__years-title {
    display: none;
  }
}

.p-blog__years-toggle {
  display: none;
}
@media (width < 768px) {
  .p-blog__years-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 180px;
    padding: 13px 20px;
    border: 1px solid #003547;
    border-radius: 999px;
    background: #fff;
    font-family: "Syncopate", "Noto Sans JP", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    color: #003547;
    cursor: pointer;
  }
  .p-blog__years-toggle svg {
    flex: none;
    width: 16px;
    height: 16px;
    transition: rotate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.p-blog__years.is-open .p-blog__years-toggle svg {
  rotate: 180deg;
}

.p-blog__years-list {
  display: grid;
  justify-items: stretch;
  gap: 0;
  border-left: 1px solid rgba(0, 53, 71, 0.2);
}
@media (width < 768px) {
  .p-blog__years-list {
    width: 180px;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    border: 1px solid transparent;
    border-radius: 0;
    background: #fff;
    transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease;
  }
}

@media (width < 768px) {
  .p-blog__years.is-open .p-blog__years-list {
    max-height: 400px;
    margin-top: 6px;
    border-color: #003547;
  }
}

.p-blog__year {
  position: relative;
  padding: 8px 0 8px 16px;
  font-family: "Syncopate", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  color: #5b7480;
  transition: color 0.3s ease;
}
.p-blog__year::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: #0081ad;
  transform-origin: top;
  scale: 1 0;
  transition: scale 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-blog__year:hover, .p-blog__year:focus-visible {
  color: #003547;
}
.p-blog__year.is-active {
  color: #003547;
  pointer-events: none;
}
.p-blog__year.is-active::before {
  scale: 1 1;
}
@media (width < 768px) {
  .p-blog__year {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 53, 71, 0.12);
  }
  .p-blog__year::before {
    content: none;
  }
  .p-blog__year:last-child {
    border-bottom: 0;
  }
  .p-blog__year.is-active {
    background: #2A62A3;
    color: #fff;
  }
}

/* ---------- ページ送り（丸） ---------- */
.p-blog__pagination {
  margin: 0;
  padding: 0;
}
.p-blog__pagination:has(.page-numbers) {
  margin-top: clamp(48px, 6vw, 80px);
}
.p-blog__pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-blog__pagination .page-numbers li {
  margin: 0;
}
.p-blog__pagination a.page-numbers,
.p-blog__pagination span.page-numbers {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 6px;
  border: 1px solid rgba(0, 53, 71, 0.3);
  border-radius: 999px;
  background: #fff;
  font-family: "Syncopate", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  color: #003547;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
@media (width < 480px) {
  .p-blog__pagination a.page-numbers,
  .p-blog__pagination span.page-numbers {
    min-width: 38px;
    height: 38px;
    font-size: 12px;
  }
}
.p-blog__pagination a.page-numbers:hover,
.p-blog__pagination a.page-numbers:focus-visible {
  border-color: #003547;
  background: #eaf5fb;
}
.p-blog__pagination span.page-numbers.current {
  border-color: #2A62A3;
  background: #2A62A3;
  color: #fff;
}
.p-blog__pagination span.page-numbers.dots {
  border: 0;
  background: transparent;
}
.p-blog__pagination .prev.page-numbers svg,
.p-blog__pagination .next.page-numbers svg {
  width: 16px;
  height: 16px;
}

/* =====================
    記事ページ
===================== */
.p-blog__inner {
  padding: 60px;
  border: 1px solid #003547;
  border-top-width: 4px;
  border-radius: 0;
  background: #fff;
}
@media (width < 768px) {
  .p-blog__inner {
    padding: 30px 20px;
  }
}

.p-blog__date {
  width: 65%;
  margin-block: 10px;
  padding-block: 25px;
}
@media (width < 480px) {
  .p-blog__date {
    width: 100%;
  }
}

.p-top-blog__text {
  font-size: clamp(24px, 2vw + 4px, 32px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: #003547;
}
@media (width < 480px) {
  .p-top-blog__text {
    font-size: 20px;
  }
}

.p-blog__main-swiper {
  position: relative;
  overflow: hidden;
  border: 1px solid #003547;
}

.p-blog__main-swiper img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.p-blog__thumbs-swiper {
  margin-top: 12px;
  overflow: hidden;
}

.p-blog__thumbs-swiper .swiper-slide {
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}

.p-blog__thumbs-swiper .swiper-slide-thumb-active {
  opacity: 1;
}
.p-blog__thumbs-swiper .swiper-slide-thumb-active img {
  outline: 2px solid #003547;
  outline-offset: -2px;
}

.p-blog__thumbs-swiper img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.p-blog__body {
  margin-top: 40px;
}
.p-blog__body p {
  margin: 0 0 2em;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 17px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #22414e;
}
.p-blog__body p:last-child {
  margin-bottom: 0;
}
@media (width < 768px) {
  .p-blog__body p {
    font-size: 15px;
  }
}

.p-blog__body-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 17px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #22414e;
}
@media (width < 768px) {
  .p-blog__body-text {
    font-size: 15px;
  }
}

.p-blog__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(30px, 12vw - 93px, 80px);
  padding-bottom: clamp(50px, 12vw - 93px, 80px);
}
@media (width < 768px) {
  .p-blog__nav {
    flex-wrap: wrap;
    gap: 20px;
  }
}
@media (width < 480px) {
  .p-blog__nav {
    gap: 5%;
  }
}

.p-blog__nav-link {
  font-family: "Syncopate", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #003547;
  transition: color 0.3s ease;
}
.p-blog__nav-link:hover {
  color: #0081ad;
}
@media (width < 480px) {
  .p-blog__nav-link {
    font-size: 13px;
  }
}

.p-blog__nav-link--list {
  display: flex;
  align-items: center;
  gap: 8px;
}
.p-blog__nav-link--list svg {
  fill: currentColor;
}

.p-blog__prev::after,
.p-blog__next::after {
  font-size: 14px;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .p-blog__grid .c-category-button__card {
    animation: none;
  }
}
/* ============================================================
    事業内容（page-business.php）
============================================================ */
.p-business__layout {
  display: grid;
  grid-template-columns: clamp(170px, 16vw, 230px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(32px, 5vw, 90px);
  padding-top: clamp(90px, 10vw, 150px);
  padding-bottom: clamp(80px, 10vw, 150px);
}
@media (width < 900px) {
  .p-business__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: clamp(48px, 10vw, 80px);
  }
}

/* ---- 左: 番号つきのナビ ---- */
.p-business__pagination {
  position: sticky;
  top: calc(var(--header-h, 80px) + 24px);
  display: grid;
  border-top: 2px solid #003547;
}
@media (width < 900px) {
  .p-business__pagination {
    top: 0;
    z-index: 10;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-inline: -20px;
    margin-bottom: clamp(32px, 6vw, 48px);
    padding: 72px 12px 0;
    border-top: 0;
    border-bottom: 1px solid rgba(0, 53, 71, 0.14);
    background: #fff;
  }
}

.p-business__nav-title {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 53, 71, 0.14);
  font-family: "Syncopate", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #0081ad;
}
@media (width < 900px) {
  .p-business__nav-title {
    display: none;
  }
}

.p-business__pagination-link {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(0, 53, 71, 0.14);
  color: #8aa0aa;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(13px, 0.3vw + 10px, 15px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.p-business__pagination-link i {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0081ad;
  transform-origin: left;
  scale: var(--prog, 0) 1;
}
.p-business__pagination-link:hover, .p-business__pagination-link:focus-visible {
  color: #003547;
}
.p-business__pagination-link.active {
  color: #003547;
}
.p-business__pagination-link.active .p-business__nav-no {
  color: #0081ad;
}
@media (width < 900px) {
  .p-business__pagination-link {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 8px 4px 10px;
    border-bottom: 0;
    font-size: 11.5px;
    letter-spacing: 0.02em;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.p-business__nav-no {
  font-family: "Syncopate", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition: color 0.3s ease;
}
@media (width < 900px) {
  .p-business__nav-no {
    font-size: 8px;
  }
}

.p-business__nav-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 右: 事業 ---- */
.p-business__sections {
  display: grid;
  min-width: 0;
}

.p-business__intro {
  position: relative;
  padding-bottom: clamp(60px, 7vw, 110px);
}
.p-business__intro > *:not(.c-deco) {
  position: relative;
  z-index: 1;
}
.p-business__intro .c-title {
  margin: 0;
}
.p-business__intro .c-title__heading {
  margin-bottom: 0;
}
@media (width < 480px) {
  .p-business__intro .c-title__heading {
    font-size: 29px;
  }
}

.p-business__cloud {
  top: -10%;
  right: 0;
  width: clamp(160px, 18vw, 260px);
}

.p-business__mach {
  right: 4%;
  bottom: 18%;
  width: clamp(120px, 13vw, 200px);
}
@media (width < 900px) {
  .p-business__mach {
    display: none;
  }
}

.p-business__intro-text {
  max-width: 44em;
  margin: 28px 0 0;
  font-size: clamp(14px, 0.85rem + 0.25vw, 16.5px);
  font-weight: 700;
  line-height: 2.05;
  letter-spacing: 0.05em;
  color: #22414e;
}

.p-business__section {
  padding-block: clamp(60px, 7vw, 100px);
  border-top: 2px solid #003547;
  scroll-margin-top: 18px;
}
@media (width < 900px) {
  .p-business__section {
    scroll-margin-top: calc(var(--header-h, 40px) + 130px);
  }
}

.p-business__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.p-business__title {
  margin: 0;
  font-size: clamp(32px, 1rem + 3vw, 60px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: #003547;
}
.p-business__title small {
  font-size: 0.4em;
  font-weight: 700;
  display: inline-flex;
  flex-direction: row;
}

.p-business__en {
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0081ad;
}

.p-business__contents {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(32px, 4vw, 56px);
}
@media (width < 1100px) {
  .p-business__contents {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-business__figure {
  position: sticky;
  top: calc(var(--header-h, 80px) + 32px);
  margin: 0;
  padding: 44px clamp(18px, 2vw, 30px) 18px;
  border: 1px solid rgba(0, 53, 71, 0.1);
  background: linear-gradient(180deg, #e6f4fb 0%, #ffffff 100%);
  color: #1d4556;
}
.p-business__figure .c-draw {
  --draw-accent: #0081ad;
}
@media (width < 1100px) {
  .p-business__figure {
    position: static;
    max-width: 560px;
  }
}

.p-business__fig-label {
  position: absolute;
  top: 16px;
  left: clamp(18px, 2vw, 30px);
  font-family: "Syncopate", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #0081ad;
}

.p-business__fig-cap {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 53, 71, 0.14);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #5b7480;
}

.p-business__body {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(0, 53, 71, 0.14);
  list-style: none;
}

.p-business__list--item {
  padding-block: clamp(24px, 2.6vw, 34px);
  border-bottom: 1px solid rgba(0, 53, 71, 0.14);
  transition: opacity 0.9s ease, translate 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .p-business__list--item:not(.is-in),
.is-motion .p-business__intro-text:not(.is-in) {
  opacity: 0;
  translate: 0 28px;
}

.p-business__intro-text {
  transition: opacity 0.9s ease, translate 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.p-business__item-no {
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #0081ad;
}

.p-business__list--title {
  margin: 10px 0 0;
  font-size: clamp(19px, 0.9rem + 0.7vw, 26px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #003547;
}

.p-business__list--text {
  margin: 14px 0 0;
  font-size: clamp(14px, 0.85rem + 0.15vw, 15.5px);
  line-height: 2.05;
  letter-spacing: 0.03em;
  color: #22414e;
}

/* =========================================================
    保有重機（page-equipment.php）
========================================================= */
.p-equipment {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(80px, 16vw - 40px, 120px);
  margin-bottom: clamp(80px, 16vw - 40px, 120px);
  padding-top: clamp(30px, 12vw - 93px, 80px);
}

/* ---------- 一覧 ---------- */
.p-equip-list {
  position: relative;
  padding-block: clamp(40px, 5vw, 80px) clamp(100px, 10vw, 160px);
  background: linear-gradient(180deg, #ffffff 0%, #f1f9fd 50%, #ffffff 100%);
  color: #003547;
}

.p-equip {
  scroll-margin-top: calc(var(--header-h, 80px) + 20px);
}
.p-equip + .p-equip {
  margin-top: clamp(100px, 11vw, 170px);
}

.p-equip__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px 40px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.p-equip__head .c-title {
  margin: 0;
}
.p-equip__head .c-title__heading {
  margin-bottom: 0;
}

.p-equip__side {
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 2.4vw, 36px);
}

.p-equip__machine {
  display: block;
  width: clamp(110px, 12vw, 190px);
}
@media (width < 480px) {
  .p-equip__machine {
    width: 96px;
  }
}

.p-equip__total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding-bottom: 6px;
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .p-equip__total:not(.is-in) {
  opacity: 0;
  translate: 0 24px;
}

.p-equip__total-label {
  margin-right: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #5b7480;
}

.p-equip__total-num {
  font-family: "Syncopate", sans-serif;
  font-size: clamp(30px, 1.4rem + 1.4vw, 48px);
  font-weight: 700;
  line-height: 1;
  color: #003547;
}

.p-equip__total-unit {
  font-size: 15px;
  font-weight: 900;
  color: #0081ad;
}

.p-equip__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1300/475;
  background: #e4f2fa;
  clip-path: inset(0);
  transition: clip-path 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.p-equip__photo.c-parallax {
  height: auto;
}
@media (width < 768px) {
  .p-equip__photo {
    aspect-ratio: 16/10;
  }
}

.is-motion .p-equip__photo:not(.is-in) {
  clip-path: inset(100% 0 0 0);
}

.p-equip__spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0 clamp(32px, 5vw, 80px);
  margin-top: clamp(32px, 4vw, 56px);
}
@media (width < 768px) {
  .p-equip__spec {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-equip__col {
  margin: 0;
  padding: 0;
  border-top: 2px solid #003547;
  list-style: none;
}
@media (width < 768px) {
  .p-equip__col + .p-equip__col {
    border-top: 0;
  }
}

.p-equip__row {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px solid rgba(0, 53, 71, 0.14);
  transition: opacity 0.8s ease, translate 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--d, 0) * 50ms);
}

.is-motion .p-equip__col:not(.is-in) .p-equip__row {
  opacity: 0;
  translate: 0 20px;
}

.p-equip__name {
  font-size: clamp(15px, 0.85rem + 0.4vw, 19px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.03em;
}
.p-equip__name sup {
  font-size: 0.6em;
}

.p-equip__count {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  color: #5b7480;
}
.p-equip__count b {
  margin-right: 4px;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(18px, 0.9rem + 0.5vw, 24px);
  font-weight: 700;
  color: #003547;
}

/* =========================================================
    代表挨拶（page-message.php）
========================================================= */
.p-message {
  position: relative;
  padding-block: clamp(80px, 9vw, 150px);
  overflow-x: clip;
  color: #003547;
  margin-bottom: clamp(40px, 5vw, 80px);
}

.p-message__soon,
.p-message__visual {
  position: relative;
}

.p-message__soon-img,
.p-message__photo {
  position: relative;
  z-index: 1;
}

/* ---------- 公開前 ---------- */
.p-message__soon-img {
  margin: 0;
  overflow: hidden;
  border: 1px solid #003547;
  clip-path: inset(0);
  transition: clip-path 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.p-message__soon-img img {
  display: block;
  width: 100%;
  height: auto;
}

.is-motion .p-message__soon-img:not(.is-in) {
  clip-path: inset(100% 0 0 0);
}

/* ---------- 本文 ---------- */
.p-message__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(40px, 6vw, 110px);
}
@media (width < 900px) {
  .p-message__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-message__visual {
  position: sticky;
  top: calc(var(--header-h, 80px) + 6vh);
}
@media (width < 900px) {
  .p-message__visual {
    position: static;
  }
}

.p-message__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4/5;
  border: 1px solid #003547;
  background: #e4f2fa;
  clip-path: inset(0);
  transition: clip-path 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.p-message__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--pp, 0) * -6%), 0) scale(1.14) skewY(calc(var(--v, 0) * 2deg));
}
@media (width < 900px) {
  .p-message__photo {
    aspect-ratio: 4/3;
  }
}

.is-motion .p-message__photo:not(.is-in) {
  clip-path: inset(100% 0 0 0);
}

.p-message__caption {
  display: flex;
  justify-content: space-between;
  margin: 14px 0 0;
  font-family: "Syncopate", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5b7480;
}

.p-message__body .c-title {
  margin: 0;
}

.p-message__lead {
  margin: clamp(18px, 2vw, 28px) 0 0;
  font-size: clamp(28px, 1rem + 2.6vw, 54px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #003547;
}

.p-message__text {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 2px solid #003547;
}
.p-message__text p {
  margin: 0;
  font-size: clamp(15px, 0.85rem + 0.25vw, 17px);
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: #22414e;
  transition: opacity 0.9s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.p-message__text p + p {
  margin-top: 1.2em;
}
@media (width < 480px) {
  .p-message__text p {
    font-size: 14px;
  }
}

.is-motion .p-message__text p:not(.is-in) {
  opacity: 0;
  translate: 0 24px;
}

.p-message__footer {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 18px;
  margin-top: clamp(40px, 5vw, 72px);
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (width < 768px) {
  .p-message__footer {
    justify-content: flex-start;
  }
}

.is-motion .p-message__footer:not(.is-in) {
  opacity: 0;
  translate: 0 24px;
}

.p-message__position {
  margin: 0;
  font-size: clamp(13px, 0.8rem + 0.2vw, 15px);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #5b7480;
}

.p-message__name {
  margin: 0;
  font-size: clamp(26px, 1rem + 1.6vw, 40px);
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #003547;
}

@media (prefers-reduced-motion: reduce) {
  .p-message__photo,
  .p-message__soon-img {
    clip-path: none !important;
  }
}
/* =========================================================
    会社概要（page-about.php）
========================================================= */
.p-about {
  --ink: #04202c;
  --navy: #003547;
  --blue: #2A62A3;
  --cyan: #33a6d6;
  --cyan-d: #0081ad;
  --steel: #7d97a3;
  --paper: #eef7fc;
  --text: #22414e;
  --sub: #5b7480;
  --line: rgba(0, 53, 71, 0.14);
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  overflow: clip;
  color: var(--navy);
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
}

.p-about-head {
  margin: 0 0 clamp(40px, 4.4vw, 64px);
}
.p-about-head .c-title__heading {
  margin-bottom: 0;
}

.p-about-mark {
  position: absolute;
  z-index: 3;
  width: 16px;
  height: 16px;
  color: #fff;
  background: radial-gradient(circle, currentColor 1.3px, transparent 1.8px) 0 0/5.3333333333px 5.3333333333px;
  pointer-events: none;
}
.p-about-mark::before, .p-about-mark::after {
  content: none;
}
.p-about-mark--tl {
  top: 14px;
  left: 14px;
  -webkit-mask-image: linear-gradient(135deg, #000 20%, rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(135deg, #000 20%, rgba(0, 0, 0, 0.2) 100%);
}
.p-about-mark--tr {
  top: 14px;
  right: 14px;
  -webkit-mask-image: linear-gradient(225deg, #000 20%, rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(225deg, #000 20%, rgba(0, 0, 0, 0.2) 100%);
}
.p-about-mark--bl {
  bottom: 14px;
  left: 14px;
  -webkit-mask-image: linear-gradient(45deg, #000 20%, rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(45deg, #000 20%, rgba(0, 0, 0, 0.2) 100%);
}
.p-about-mark--br {
  right: 14px;
  bottom: 14px;
  -webkit-mask-image: linear-gradient(315deg, #000 20%, rgba(0, 0, 0, 0.2) 100%);
  mask-image: linear-gradient(315deg, #000 20%, rgba(0, 0, 0, 0.2) 100%);
}

.p-about-intro__lead,
.p-about-efforts__lead,
.p-about-bases__lead,
.p-history__lead,
.p-about-ground__en,
.p-about-ground__lead,
.p-about-business__count,
.p-about-business__more,
.p-about-bases__btn,
.p-company__sheet,
.p-about-odo__item,
.p-about-effort__body,
.p-about-bases__item,
.p-history__row {
  transition: opacity 1s ease, translate 1.1s var(--ease);
  transition-delay: calc(var(--d, 0) * 100ms);
}

.is-motion .p-about-intro__lead:not(.is-in),
.is-motion .p-about-efforts__lead:not(.is-in),
.is-motion .p-about-bases__lead:not(.is-in),
.is-motion .p-history__lead:not(.is-in),
.is-motion .p-about-ground__en:not(.is-in),
.is-motion .p-about-ground__lead:not(.is-in),
.is-motion .p-about-business__count:not(.is-in),
.is-motion .p-about-business__more:not(.is-in),
.is-motion .p-about-bases__btn:not(.is-in),
.is-motion .p-company__sheet:not(.is-in),
.is-motion .p-about-odo__item:not(.is-in),
.is-motion .p-about-effort__body:not(.is-in),
.is-motion .p-about-bases__item:not(.is-in),
.is-motion .p-history__row:not(.is-in) {
  opacity: 0;
  translate: 0 40px;
}

/* =========================================================
    右端の目次
========================================================= */
.p-about-index {
  position: fixed;
  top: 50%;
  right: clamp(14px, 1.6vw, 28px);
  z-index: 20;
  translate: 0 -50%;
  color: var(--navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.p-about-index.is-visible {
  opacity: 1;
  pointer-events: auto;
}
.p-about-index ol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-about-index a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.p-about-index a span {
  position: absolute;
  right: calc(100% + 10px);
  white-space: nowrap;
  font-family: "Syncopate", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  translate: 6px 0;
  transition: opacity 0.3s ease, translate 0.4s var(--ease);
}
.p-about-index a i {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Syncopate", sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.p-about-index a i::after {
  content: "";
  width: 14px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease);
}
.p-about-index a:hover span, .p-about-index a:focus-visible span {
  opacity: 1;
  translate: 0 0;
}
.p-about-index a.is-current i {
  opacity: 1;
}
.p-about-index a.is-current i::after {
  width: 34px;
}
.p-about-index a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}
@media (width < 1279px) {
  .p-about-index {
    display: none;
  }
}

/* =========================================================
    01 はじめに
========================================================= */
.p-about-intro {
  position: relative;
  padding-top: clamp(100px, 11vw, 170px);
}

.p-about-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: clamp(56px, 6vw, 110px);
}
@media (width < 900px) {
  .p-about-intro__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-about-intro__copy {
  position: relative;
  z-index: 2;
  margin-bottom: 50px;
}
.p-about-intro__copy .p-about-head {
  margin-bottom: clamp(28px, 3vw, 44px);
}
.p-about-intro__copy .c-title__heading {
  font-size: clamp(18px, 0.9rem + 0.6vw, 24px);
  letter-spacing: 0.08em;
}

.p-about-intro__title {
  margin: 0;
  font-size: clamp(3.063rem, 2.372rem + 3.45vw, 6.688rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--navy);
}
@media (width < 768px) {
  .p-about-intro__title {
    font-size: clamp(2.5rem, 0.804rem + 8.48vw, 4.875rem);
  }
}

.p-about-intro__lead {
  max-width: 34em;
  margin: clamp(32px, 3.4vw, 52px) 0 0;
  font-size: clamp(15px, 0.85rem + 0.2vw, 16.5px);
  line-height: 2.15;
  letter-spacing: 0.04em;
  color: var(--text);
}
.p-about-intro__lead + .p-about-intro__lead {
  margin-top: 16px;
}

.p-about-intro__visual {
  position: relative;
  padding-bottom: 14%;
  color: var(--navy);
}
@media (width < 900px) {
  .p-about-intro__visual {
    width: min(100%, 560px);
    margin-inline: auto;
  }
}

.p-about-intro__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  transition: clip-path 1.6s var(--ease);
  clip-path: inset(0 0 0 0);
}
.p-about-intro__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--pp, 0) * -7%), 0) scale(1.16) skewY(calc(var(--v, 0) * 3deg));
}
.p-about-intro__photo--main {
  width: 84%;
  margin-left: auto;
  aspect-ratio: 4/5;
}
.p-about-intro__photo--sub {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 46%;
  aspect-ratio: 1;
  border: 10px solid #fff;
  transform: translate3d(0, calc(var(--pp, 0) * -70px), 0);
  transition-delay: 0.25s;
}

.is-motion .p-about-intro__photo:not(.is-in) {
  clip-path: inset(100% 0 0 0);
}

.p-about-intro__coord {
  position: absolute;
  top: 0;
  left: 6%;
  display: flex;
  gap: 14px;
  margin: 0;
  writing-mode: vertical-rl;
  font-family: "Syncopate", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sub);
}
@media (width < 900px) {
  .p-about-intro__coord {
    left: 0;
  }
}

.p-about-intro__words {
  display: flex;
  gap: 0.5em;
  width: max-content;
  margin-top: clamp(60px, 7vw, 120px);
  padding-left: 4vw;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(72px, 12.5vw, 220px);
  font-weight: 700;
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 53, 71, 0.22);
  transform: translate3d(calc(var(--pp, 0) * 14vw - 6vw), 0, 0);
  pointer-events: none;
}
.p-about-intro__words span:last-child {
  color: rgba(0, 53, 71, 0.06);
  -webkit-text-stroke: 0;
}

/* =========================================================
    数字（濃紺の帯）
========================================================= */
.p-about-flowband {
  padding: 100px 0;
  color: #1b2a3a;
}
@media (width < 480px) {
  .p-about-flowband {
    padding: 64px 0;
  }
}

.p-about-flowband__eyebrow {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #2f6fae;
  text-align: center;
}

.p-about-flowband__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
}
@media (width < 768px) {
  .p-about-flowband__steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 48px;
  }
}
@media (width < 480px) {
  .p-about-flowband__steps {
    grid-template-columns: 1fr;
    row-gap: 32px;
    margin-top: 32px;
  }
}

.p-about-flowband__step {
  padding: 0 28px;
  text-align: center;
}
.p-about-flowband__step:not(:first-child) {
  border-left: 1px solid rgba(31, 95, 158, 0.2);
}
@media (width < 768px) {
  .p-about-flowband__step:nth-child(odd) {
    border-left: none;
  }
}
@media (width < 480px) {
  .p-about-flowband__step {
    padding: 0;
  }
  .p-about-flowband__step:not(:first-child) {
    padding-top: 32px;
    border-left: none;
    border-top: 1px solid rgba(31, 95, 158, 0.2);
  }
}

.p-about-flowband__no {
  display: block;
  overflow: hidden;
  padding: 0.1em 0;
  perspective: 600px;
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #2f6fae;
}
@media (width < 480px) {
  .p-about-flowband__no {
    font-size: 44px;
  }
}

.p-about-flowband__no-inner {
  display: inline-block;
  opacity: 0;
  transform: rotateX(-90deg);
  transform-origin: 50% 50% -0.4em;
  backface-visibility: hidden;
}

.p-about-flowband__step.is-revealed .p-about-flowband__no-inner {
  animation: flowband-flip 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 0.15s + 0.25s);
}

@keyframes flowband-flip {
  0% {
    opacity: 0;
    transform: rotateX(-450deg);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotateX(0);
  }
}
.p-about-flowband__name {
  display: block;
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
}
@media (width < 480px) {
  .p-about-flowband__name {
    margin-top: 12px;
    font-size: 16px;
  }
}

.p-about-flowband__desc {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
@media (width < 480px) {
  .p-about-flowband__desc {
    margin-top: 8px;
    font-size: 13px;
  }
}

.p-about-flowband__caption {
  margin-top: 64px;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-align: center;
}
@media (width < 480px) {
  .p-about-flowband__caption {
    margin-top: 40px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-about-flowband__step.is-revealed .p-about-flowband__no-inner {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* =========================================================
    地面の下
========================================================= */
.p-about-ground {
  position: relative;
  padding: clamp(40px, 5vw, 80px) 0 clamp(90px, 10vw, 150px);
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 35%, #eef8fd 100%);
  color: var(--navy);
}

.p-about-ground__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 16px 64px;
  padding-top: clamp(40px, 5vw, 80px);
}
@media (width < 900px) {
  .p-about-ground__head {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-about-ground__en {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cyan-d);
}
.p-about-ground__en::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
}

.p-about-ground__title {
  margin: 0;
  font-size: clamp(36px, 1rem + 4vw, 80px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.p-about-ground__lead {
  margin: 0;
  font-size: clamp(14px, 0.85rem + 0.2vw, 16px);
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: var(--text);
}

.p-about-ground__figure {
  position: relative;
  max-width: 1680px;
  margin: clamp(16px, 2vw, 40px) auto 0;
}

.p-about-ground__cap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 53, 71, 0.14);
  font-family: "Syncopate", "Noto Sans JP", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sub);
}

/* =========================================================
    02 弊社の取り組み
========================================================= */
.p-about-efforts {
  position: relative;
  padding-block: clamp(110px, 12vw, 190px);
}

.p-about-efforts__head,
.p-about-bases__head,
.p-history__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 48px;
  margin-bottom: clamp(56px, 6vw, 96px);
}
.p-about-efforts__head .p-about-head,
.p-about-bases__head .p-about-head,
.p-history__head .p-about-head {
  margin-bottom: 0;
}

.p-about-efforts__lead,
.p-about-bases__lead,
.p-history__lead {
  margin: 0;
  font-size: clamp(14px, 0.85rem + 0.25vw, 17px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--text);
}

.p-about-efforts__list {
  display: grid;
  gap: clamp(90px, 10vw, 170px);
}

.p-about-effort {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(32px, 5vw, 90px);
}
.p-about-effort--rev {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.p-about-effort--rev .p-about-effort__photo {
  order: 2;
}
@media (width < 900px) {
  .p-about-effort, .p-about-effort--rev {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .p-about-effort--rev .p-about-effort__photo {
    order: 0;
  }
}

.p-about-effort__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 3/2;
  overflow: hidden;
  background: var(--paper);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.5s var(--ease);
}
.p-about-effort__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--pp, 0) * -8%), 0) scale(1.2) skewY(calc(var(--v, 0) * 3deg));
}

.is-motion .p-about-effort__photo:not(.is-in) {
  clip-path: inset(0 100% 0 0);
}

.is-motion .p-about-effort--rev .p-about-effort__photo:not(.is-in) {
  clip-path: inset(0 0 0 100%);
}

.p-about-effort__body {
  position: relative;
}

.p-about-effort__tag {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan-d);
}
.p-about-effort__tag span {
  padding: 5px 12px;
  background: var(--blue);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: #fff;
}

.p-about-effort__title {
  margin: 18px 0 0;
  font-size: clamp(24px, 1rem + 1.4vw, 38px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: var(--navy);
}

.p-about-effort__text {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 2.05;
  letter-spacing: 0.03em;
  color: var(--text);
}

/* =========================================================
    03 事業内容
========================================================= */
.p-about-business {
  position: relative;
  padding-block: clamp(110px, 12vw, 190px);
  overflow: hidden;
  background: linear-gradient(180deg, #f2f9fd 0%, #e4f2fa 100%);
  color: var(--navy);
}

.p-about-business__words {
  position: absolute;
  top: clamp(20px, 3vw, 50px);
  left: 0;
  width: max-content;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(90px, 17vw, 300px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 53, 71, 0.1);
  transform: translate3d(calc(var(--pp, 0) * -12vw), 0, 0);
  pointer-events: none;
}

.p-about-business .l-inner {
  position: relative;
  z-index: 2;
}

.p-about-business__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
  margin-bottom: clamp(48px, 5vw, 80px);
}
.p-about-business__head .p-about-head {
  margin-bottom: 0;
}

.p-about-business__count {
  display: flex;
  align-items: center;
  gap: 22px;
}

.p-about-business__count-text {
  margin: 0;
  font-size: clamp(14px, 0.85rem + 0.25vw, 17px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--text);
}
.p-about-business__count-text span {
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(40px, 10vw, 80px);
  font-weight: 700;
  line-height: 0.8;
  color: var(--cyan-d);
}

.p-about-business__list {
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--navy);
  list-style: none;
}

.p-about-business__item {
  border-bottom: 1px solid rgba(0, 53, 71, 0.16);
  transition: opacity 0.9s ease, translate 1s var(--ease);
}

.is-motion .p-about-business__item:not(.is-in) {
  opacity: 0;
  translate: 0 24px;
}

.p-about-business__row {
  position: relative;
  display: grid;
  grid-template-columns: 56px clamp(150px, 15vw, 200px) minmax(0, 1fr) minmax(0, 1.2fr) 48px;
  align-items: center;
  gap: clamp(16px, 2.4vw, 40px);
  padding: 22px clamp(8px, 1.4vw, 20px);
  color: var(--navy);
  text-decoration: none;
  transition: background-color 0.4s ease;
}
.p-about-business__row::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--cyan-d);
  transform-origin: top;
  scale: 1 0;
  transition: scale 0.5s var(--ease);
}
@media (hover: hover) {
  .p-about-business__row:hover {
    background: #fff;
  }
  .p-about-business__row:hover::before {
    scale: 1 1;
  }
  .p-about-business__row:hover .p-about-business__arrow {
    background: var(--cyan-d);
    border-color: var(--cyan-d);
    color: #fff;
  }
  .p-about-business__row:hover .p-about-business__arrow svg {
    translate: 3px 0;
  }
  .p-about-business__row:hover .p-about-business__draw {
    color: var(--navy);
  }
}
.p-about-business__row:focus-visible {
  outline: 1px solid var(--cyan-d);
  outline-offset: -1px;
}
@media (width < 900px) {
  .p-about-business__row {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    grid-template-areas: "no name arrow" "draw draw draw" "items items items";
    row-gap: 14px;
  }
  .p-about-business__row .p-about-business__no {
    grid-area: no;
  }
  .p-about-business__row .p-about-business__draw {
    grid-area: draw;
    max-width: 360px;
  }
  .p-about-business__row .p-about-business__name {
    grid-area: name;
  }
  .p-about-business__row .p-about-business__items {
    grid-area: items;
  }
  .p-about-business__row .p-about-business__arrow {
    grid-area: arrow;
  }
}

.p-about-business__no {
  font-family: "Syncopate", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cyan-d);
}

.p-about-business__draw {
  --draw-accent: #0081ad;
  display: block;
  color: #4d6d7b;
  transition: color 0.4s ease;
}

.p-about-business__name {
  display: grid;
  gap: 6px;
}

.p-about-business__ja {
  font-size: clamp(20px, 0.9rem + 0.9vw, 28px);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0.04em;
}
.p-about-business__ja small {
  font-size: 12px;
  font-weight: 700;
}

.p-about-business__en {
  font-family: "Syncopate", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sub);
}

.p-about-business__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
.p-about-business__items span {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--text);
}
.p-about-business__items span::before {
  content: "";
  position: absolute;
  top: 0.85em;
  left: 0;
  width: 7px;
  height: 1px;
  background: var(--cyan-d);
}

.p-about-business__arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(0, 53, 71, 0.35);
  border-radius: 50%;
  color: var(--navy);
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.p-about-business__arrow svg {
  width: 18px;
  height: 18px;
  transition: translate 0.4s var(--ease);
}
@media (width < 900px) {
  .p-about-business__arrow {
    width: 40px;
    height: 40px;
  }
}

.p-about-business__more {
  margin-top: clamp(48px, 5vw, 72px);
}

/* =========================================================
    04 会社概要
========================================================= */
.p-company {
  position: relative;
  padding-block: clamp(110px, 12vw, 190px);
  background: var(--paper);
}

.p-company__body {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  align-items: start;
  gap: clamp(44px, 5.4vw, 100px);
}
@media (width < 900px) {
  .p-company__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-company__aside {
  position: sticky;
  top: calc(var(--header-h, 80px) + 48px);
  color: var(--navy);
}
@media (width < 900px) {
  .p-company__aside {
    position: static;
    width: min(100%, 440px);
  }
}

.p-company__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #dfe6ea;
  clip-path: inset(0);
  transition: clip-path 1.5s var(--ease);
}
.p-company__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--pp, 0) * -6%), 0) scale(1.14) skewY(calc(var(--v, 0) * 3deg));
}

.is-motion .p-company__photo:not(.is-in) {
  clip-path: inset(100% 0 0 0);
}

.p-company__caption {
  display: flex;
  justify-content: space-between;
  margin: 22px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: "Syncopate", sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sub);
}

.p-company__sheet {
  border-top: 2px solid var(--navy);
}

.p-company__table {
  margin: 0;
}

.p-company__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding-block: 24px;
  border-bottom: 1px solid var(--line);
}
.p-company__row dt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.85;
  letter-spacing: 0.08em;
  color: var(--navy);
}
.p-company__row dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.03em;
  color: var(--text);
}
@media (width < 600px) {
  .p-company__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding-block: 18px;
  }
}

.p-company__chips,
.p-company__list,
.p-company__staff,
.p-company__inline {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-company__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.p-company__chips li {
  padding: 3px 12px;
  border: 1px solid rgba(0, 53, 71, 0.3);
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

.p-company__list li {
  position: relative;
  padding-left: 18px;
}
.p-company__list li::before {
  content: "";
  position: absolute;
  top: 0.9em;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--cyan-d);
}

.p-company__staff {
  display: grid;
  max-width: 460px;
}
.p-company__staff li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 5px;
}
.p-company__staff li + li {
  border-top: 1px dashed rgba(0, 53, 71, 0.18);
}
.p-company__staff b {
  font-family: "Syncopate", "Noto Sans JP", sans-serif;
  font-weight: 700;
  color: var(--navy);
}

.p-company__inline {
  display: flex;
  flex-wrap: wrap;
}
.p-company__inline li:not(:last-child)::after {
  content: "／";
  margin-inline: 4px;
  color: rgba(0, 53, 71, 0.35);
}

.p-company__group-name {
  margin: 0;
  font-weight: 700;
  color: var(--navy);
}

.p-company__group-line {
  margin: 0;
}

/* =========================================================
    05 拠点
========================================================= */
.p-about-bases {
  position: relative;
  padding-block: clamp(110px, 12vw, 190px);
}

.p-about-bases__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: start;
  gap: clamp(32px, 4.4vw, 72px);
}
@media (width < 900px) {
  .p-about-bases__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-about-bases__map {
  position: relative;
  margin: 0;
  padding: 0 0 38px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 53, 71, 0.1);
}
.p-about-bases__map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.p-about-bases__route {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.5;
  stroke-dasharray: 1 2;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.3s;
}

.is-motion .p-about-bases__map:not(.is-in) .p-about-bases__route {
  stroke-dashoffset: 1.05;
}

.p-about-bases__pin {
  transition: opacity 0.7s ease, translate 0.9s var(--ease);
  transition-delay: calc(var(--i) * 0.14s + 0.6s);
}

.is-motion .p-about-bases__map:not(.is-in) .p-about-bases__pin {
  opacity: 0;
  translate: 0 12px;
}

.p-about-bases__cross {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1;
}

.p-about-bases__pulse {
  fill: none;
  stroke: var(--cyan-d);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: p-about-pulse 2.6s ease-out infinite;
}

.p-about-bases__dot {
  fill: var(--cyan-d);
}
.p-about-bases__pin--hq .p-about-bases__dot {
  fill: var(--navy);
}

.p-about-bases__tag {
  fill: #fff;
  stroke: var(--navy);
  stroke-width: 1.2;
}
.p-about-bases__pin--hq .p-about-bases__tag {
  fill: var(--navy);
}

.p-about-bases__label {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
  fill: var(--navy);
}
.p-about-bases__pin--hq .p-about-bases__label {
  fill: #fff;
}

.p-about-bases__n {
  font-family: "Syncopate", sans-serif;
  font-size: 11px;
  font-weight: 700;
  fill: var(--navy);
}

.p-about-bases__note {
  position: absolute;
  right: 18px;
  bottom: 12px;
  margin: 0;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--sub);
}

.p-about-bases__list {
  border-top: 2px solid var(--navy);
}

.p-about-bases__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
}

.p-about-bases__tagline {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sub);
}

.p-about-bases__name {
  margin: 6px 0 0;
  font-size: clamp(17px, 0.9rem + 0.35vw, 20px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: var(--navy);
}

.p-about-bases__addr {
  margin: 4px 0 0;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--text);
}

.p-about-bases__btn {
  margin-top: 28px;
}

/* =========================================================
    06 沿革
========================================================= */
.p-history {
  --p: 1;
  position: relative;
  padding-block: clamp(110px, 12vw, 190px);
  background: var(--paper);
}

.p-history__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(40px, 2rem + 4vw, 112px);
}
@media (width < 900px) {
  .p-history__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

.p-history__aside {
  position: sticky;
  top: calc(var(--header-h, 80px) + 9vh);
  transition: opacity 1.2s ease, translate 1.2s var(--ease);
}
@media (width < 900px) {
  .p-history__aside {
    top: var(--header-h, 0px);
    z-index: 5;
  }
}

.is-motion .p-history__aside:not(.is-in) {
  opacity: 0;
  translate: 0 32px;
}

.p-history__plate {
  position: relative;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid rgba(0, 53, 71, 0.12);
  background: linear-gradient(180deg, #e3f3fb 0%, #ffffff 70%);
  color: var(--cyan-d);
}
.p-history__plate .p-about-mark {
  color: var(--navy);
}
.p-history__plate > svg,
.p-history__plate > .p-history__meter {
  position: relative;
  z-index: 2;
}
@media (width < 900px) {
  .p-history__plate {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 12px;
  }
  .p-history__plate .p-about-mark {
    display: none;
  }
}

.p-history__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.p-history__svg * {
  transform-box: view-box;
}

.p-history__strata .is-1 {
  fill: url(#hist-s1);
}
.p-history__strata .is-2 {
  fill: url(#hist-s2);
}
.p-history__strata .is-3 {
  fill: url(#hist-s3);
}
.p-history__strata .is-4 {
  fill: url(#hist-s4);
}

.p-history__lines path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.5;
}

.p-history__ground {
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.6;
}

.p-history__hole {
  fill: url(#hist-pit);
  transform-origin: 162px 150px;
  scale: 1 calc(0.12 + 0.88 * var(--p));
}

.p-history__dim {
  fill: none;
  stroke: var(--cyan-d);
  stroke-width: 1.2;
  transform-origin: 88px 150px;
  scale: 1 calc(0.12 + 0.88 * var(--p));
}

.p-history__pile {
  fill: url(#hist-soil);
  transform-origin: 44px 150px;
  scale: calc(0.4 + 0.6 * var(--p)) calc(0.15 + 0.85 * var(--p));
}

.p-exc {
  overflow: visible;
}
.p-exc * {
  transform-box: view-box;
}

.p-exc__track {
  fill: url(#hist-dark);
}

.p-exc__scoop {
  fill: url(#hist-navy);
}

.p-exc__tread,
.p-exc__teeth {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.4;
}

.p-exc__teeth {
  stroke: #003547;
  stroke-width: 2;
}

.p-exc__weight {
  fill: url(#hist-navy);
}

.p-exc__house,
.p-exc__cab {
  fill: url(#hist-body);
}

.p-exc__arm {
  fill: url(#hist-arm);
}

.p-exc__window {
  fill: url(#hist-glass);
}

.p-exc__boom {
  transform-origin: 120px 106px;
  animation: p-exc-boom 6s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

.p-exc__stick {
  transform-origin: 56px 40px;
  animation: p-exc-stick 6s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

.p-exc__bucket {
  transform-origin: 40px 128px;
  animation: p-exc-bucket 6s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}

.p-history__lines path,
.p-history__ground {
  stroke-dasharray: 1 2;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.p-history__exc {
  transition: opacity 0.8s ease 0.8s, translate 1.2s var(--ease) 0.8s;
}

.is-motion .p-history__aside:not(.is-in) .p-history__lines path,
.is-motion .p-history__aside:not(.is-in) .p-history__ground {
  stroke-dashoffset: 1.05;
}
.is-motion .p-history__aside:not(.is-in) .p-history__exc {
  opacity: 0;
  translate: 40px 0;
}

.p-history__meter {
  margin-top: clamp(16px, 2vw, 26px);
}
@media (width < 900px) {
  .p-history__meter {
    margin-top: 0;
  }
}

.p-history__counter {
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(54px, 2.2rem + 3.6vw, 108px);
  font-weight: 700;
  line-height: 1;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
@media (width < 900px) {
  .p-history__counter {
    font-size: clamp(30px, 8.5vw, 46px);
  }
}

.p-history__span {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 0;
  font-family: "Syncopate", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--sub);
}
.p-history__span i {
  position: relative;
  flex: 1;
  height: 3px;
  background: rgba(0, 53, 71, 0.12);
}
.p-history__span i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cyan-d);
  transform-origin: left;
  scale: var(--p) 1;
}
@media (width < 900px) {
  .p-history__span {
    margin-top: 8px;
    font-size: 8px;
  }
}

.p-history__main {
  position: relative;
  padding-left: clamp(28px, 3vw, 44px);
}

.p-history__track {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 6px;
  width: 2px;
  background: rgba(0, 53, 71, 0.12);
}
.p-history__track i {
  position: absolute;
  inset: 0;
  background: var(--navy);
  transform-origin: top;
  scale: 1 var(--p);
}
.p-history__track::after {
  content: "";
  position: absolute;
  top: calc(var(--p) * 100%);
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan-d);
  translate: -50% -50%;
}

.p-history__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-history__row {
  display: grid;
  grid-template-columns: minmax(6.4em, 0.42fr) minmax(0, 1fr);
  column-gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(24px, 2.8vw, 36px);
}
.p-history__row + .p-history__row {
  border-top: 1px solid var(--line);
}
@media (width < 600px) {
  .p-history__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
    padding-block: 20px;
  }
}

.p-history__year {
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(1.375rem, 1.054rem + 1.61vw, 3.063rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 53, 71, 0.4);
  background: linear-gradient(#003547, #003547) no-repeat 0 0/0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size 1.2s var(--ease);
}
@media (width < 900px) {
  .p-history__year {
    font-size: 30px;
  }
}

.p-history__row.is-ink .p-history__year,
html:not(.is-motion) .p-history__year {
  background-size: 100% 100%;
}

.p-history__era {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan-d);
}

.p-history__text {
  margin: 10px 0 0;
  font-size: clamp(14px, 0.85rem + 0.15vw, 15.5px);
  line-height: 2;
  letter-spacing: 0.03em;
  color: var(--text);
}

/* =========================================================
    ページの終わり
========================================================= */
.p-about-flow {
  position: relative;
  padding-block: clamp(80px, 9vw, 140px);
  overflow: hidden;
  pointer-events: none;
}

.p-about-flow__line {
  width: max-content;
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(56px, 9vw, 160px);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--navy);
  transform: translate3d(calc(var(--pp, 0) * 18vw - 10vw), 0, 0);
}
.p-about-flow__line--rev {
  color: transparent;
  -webkit-text-stroke: 1px rgba(0, 53, 71, 0.4);
  transform: translate3d(calc(var(--pp, 0) * -18vw - 30vw), 0, 0);
}

/* =========================================================
    飾り（雲・重機）の位置
========================================================= */
.p-about-intro__cloud {
  top: -6%;
  right: -4%;
  width: clamp(160px, 18vw, 260px);
}

.p-about-intro__mach {
  right: 4%;
  bottom: -10%;
  z-index: 3;
  width: clamp(120px, 12vw, 190px);
}

.p-about-efforts__cloud1 {
  top: 4%;
  right: -2%;
  width: clamp(180px, 22vw, 320px);
}

.p-about-efforts__cloud2 {
  top: 52%;
  left: -3%;
  width: clamp(140px, 16vw, 230px);
}

.p-about-business__mach {
  top: clamp(60px, 7vw, 110px);
  right: 6%;
  z-index: 1;
  width: clamp(120px, 13vw, 200px);
}
@media (width < 900px) {
  .p-about-business__mach {
    display: none;
  }
}

.p-about-bases__cloud {
  top: 6%;
  right: 3%;
  width: clamp(160px, 18vw, 260px);
}

.p-about-efforts,
.p-about-bases {
  overflow: hidden;
}
.p-about-efforts > .l-inner,
.p-about-bases > .l-inner {
  position: relative;
  z-index: 1;
}

/* =========================================================
    動き（keyframes）
========================================================= */
@keyframes p-about-pulse {
  from {
    scale: 0.6;
    opacity: 1;
  }
  to {
    scale: 1.9;
    opacity: 0;
  }
}
@keyframes p-exc-boom {
  0%, 100% {
    rotate: 0deg;
  }
  30%, 50% {
    rotate: -8deg;
  }
  75% {
    rotate: 6deg;
  }
}
@keyframes p-exc-stick {
  0%, 100% {
    rotate: 0deg;
  }
  30% {
    rotate: -6deg;
  }
  50% {
    rotate: 10deg;
  }
  75% {
    rotate: 6deg;
  }
}
@keyframes p-exc-bucket {
  0%, 100% {
    rotate: 0deg;
  }
  30% {
    rotate: -10deg;
  }
  50%, 75% {
    rotate: 30deg;
  }
}
/* =========================================================
    動きを減らす設定
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .p-about-bases__pulse,
  .p-exc__boom,
  .p-exc__stick,
  .p-exc__bucket {
    animation: none !important;
  }
  .p-about *,
  .p-about *::before,
  .p-about *::after {
    transition-duration: 0.01s !important;
    transition-delay: 0s !important;
  }
}
/* =========================================================
    写真を固定したパララックス（c-parallax）の前後の余白
========================================================= */
.p-about-window {
  margin-block: 0;
}

/* =========================================================
    施工実績（一覧）
========================================================= */
.p-works {
  position: relative;
  z-index: 5;
  padding-block: clamp(80px, 8vw, 130px) clamp(100px, 10vw, 160px);
  background: linear-gradient(180deg, #ffffff 0%, #f1f9fd 50%, #ffffff 100%);
  color: #003547;
}

/* ---------- 見出し ---------- */
.p-works__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 40px;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.p-works__head .c-title {
  margin: 0;
}
.p-works__head .c-title__heading {
  margin-bottom: 0;
}

/* ---------- 絞り込み ---------- */
.p-works__filter {
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .p-works__filter:not(.is-in) {
  opacity: 0;
  translate: 0 20px;
}

/* ---------- カード ---------- */
.p-works__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 28px);
}
@media (width < 1100px) {
  .p-works__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (width < 768px) {
  .p-works__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
  }
}
.p-works__grid .c-category-button__card {
  min-width: 0;
}
.p-works__grid .c-category-button__card.hide,
.p-works__grid .c-category-button__card.is-more-hide {
  display: none;
}

.p-works__link {
  display: block;
  color: #003547;
  cursor: pointer;
  transition: opacity 0.9s ease, translate 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--d, 0) * 80ms);
}

.is-motion .c-category-button__card:not(.is-in) .p-works__link {
  opacity: 0;
  translate: 0 32px;
}

.p-works__image {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #e4f2fa;
  clip-path: inset(0);
  transition: clip-path 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.p-works__image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(0, calc(var(--pp, 0) * -8%), 0) scale(1.16) skewY(calc(var(--v, 0) * 1.5deg));
}

.is-motion .c-category-button__card:not(.is-in) .p-works__image {
  clip-path: inset(100% 0 0 0);
}

.p-works__body {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 16px 0 16px;
  border-bottom: 1px solid rgba(0, 53, 71, 0.16);
}
.p-works__body::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #2A62A3 0%, #0081ad 100%);
  transform-origin: left;
  scale: 0 1;
  transition: scale 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.p-works__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.p-works__arrow {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(0, 53, 71, 0.3);
  border-radius: 50%;
  background: #fff;
  color: #2A62A3;
  transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}
.p-works__arrow svg {
  width: 15px;
  height: 15px;
}
@media (width < 480px) {
  .p-works__arrow {
    width: 32px;
    height: 32px;
  }
  .p-works__arrow svg {
    width: 12px;
    height: 12px;
  }
}

.p-works__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.p-works__tags:empty {
  display: none;
}

.p-works__category-tag {
  display: inline-block;
  padding: 3px 10px;
  background: #e3f1fa;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: #1f5a96;
}
@media (width < 480px) {
  .p-works__category-tag {
    padding: 2px 7px;
    font-size: 10px;
  }
}

.p-works__title {
  display: block;
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(14px, 0.8rem + 0.25vw, 16px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
  transition: color 0.4s ease;
}
@media (width < 480px) {
  .p-works__title {
    font-size: 13px;
  }
}

@media (hover: hover) {
  .p-works__link:hover .p-works__body::after {
    scale: 1 1;
  }
  .p-works__link:hover .p-works__arrow {
    border-color: transparent;
    background: linear-gradient(135deg, #2A62A3 0%, #0081ad 100%);
    color: #fff;
  }
  .p-works__link:hover .p-works__arrow svg {
    animation: p-works-arrow 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .p-works__link:hover .p-works__title {
    color: #0081ad;
  }
}
.p-works__link:focus-visible,
.p-works-modal__input:focus-visible + .p-works__link {
  outline: 2px solid #0081ad;
  outline-offset: 4px;
}

/* ---------- もっと見る ---------- */
.p-works__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(48px, 5vw, 80px);
}

.p-works .c-button-more {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-width: 300px;
  height: 64px;
  margin: 0;
  padding: 0 8px 0 36px;
  overflow: hidden;
  border: 1px solid #003547;
  border-radius: 999px;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #003547;
  cursor: pointer;
  transition: color 0.4s ease;
}
.p-works .c-button-more::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  border: 0;
  border-radius: inherit;
  background: #2A62A3;
  transform: none;
  translate: -101% 0;
  animation: none;
  transition: translate 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-works .c-button-more::after {
  content: "";
  flex: none;
  width: 46px;
  height: 46px;
  margin-left: 32px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(#fff, #fff) no-repeat center/14px 2px, linear-gradient(#fff, #fff) no-repeat center/2px 14px, #003547;
  font-size: 0;
  translate: none;
  transition: rotate 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-works .c-button-more:active {
  transform: none;
}
.p-works .c-button-more:focus-visible {
  outline: 2px solid #0081ad;
  outline-offset: 4px;
}
@media (hover: hover) {
  .p-works .c-button-more:hover {
    background: #fff;
    color: #fff;
  }
  .p-works .c-button-more:hover::before {
    border: 0;
    translate: 0 0;
  }
  .p-works .c-button-more:hover::after {
    translate: none;
    rotate: 90deg;
    background: linear-gradient(#003547, #003547) no-repeat center/14px 2px, linear-gradient(#003547, #003547) no-repeat center/2px 14px, #fff;
  }
}
@media (width < 480px) {
  .p-works .c-button-more {
    min-width: 0;
    width: 100%;
    height: 56px;
  }
  .p-works .c-button-more::after {
    width: 40px;
    height: 40px;
  }
}

/* =========================================================
    モーダル（チェックボックスで開く）
========================================================= */
.p-works-modal__input {
  display: none;
}

.p-works-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.p-works-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(226, 241, 250, 0.94);
  cursor: pointer;
}

.p-works-modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 8888;
  width: min(1000px, 92vw);
  max-height: 90vh;
  max-height: 90svh;
  padding: 48px 0 44px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid rgba(0, 53, 71, 0.18);
  border-top: 4px solid #0081ad;
  background: #fff;
  color: #003547;
  font-family: "Noto Sans JP", sans-serif;
  transform: translate(-50%, -46%);
  clip-path: inset(0 0 100% 0);
  transition: transform 0.7s cubic-bezier(0.19, 1, 0.22, 1), clip-path 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (width < 768px) {
  .p-works-modal__content {
    padding: 44px 0 28px;
  }
}

.p-works-modal__input:checked ~ .p-works-modal {
  opacity: 1;
  visibility: visible;
}

.p-works-modal__input:checked ~ .p-works-modal .p-works-modal__content {
  transform: translate(-50%, -50%);
  clip-path: inset(0);
}

@media screen and (max-height: 790px) {
  .p-works-modal__input:checked ~ .p-works-modal .p-works-modal__content {
    transform: translate(-50%, 100px);
  }
  .p-works-modal__content {
    top: 0;
    height: 623px;
  }
}
.p-works-modal__close {
  position: sticky;
  top: -36px;
  z-index: 3;
  display: block;
  width: 52px;
  height: 52px;
  margin: -36px 12px -16px auto;
  border-radius: 50%;
  background: #2A62A3;
  font-size: 0;
  color: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.p-works-modal__close::before, .p-works-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: #fff;
  translate: -50% -50%;
  rotate: 45deg;
}
.p-works-modal__close::after {
  rotate: -45deg;
}
.p-works-modal__close:hover {
  background: #0081ad;
}
@media (width < 768px) {
  .p-works-modal__close {
    top: -34px;
    width: 44px;
    height: 44px;
    margin: -34px 10px -10px auto;
  }
}

.p-works-modal__swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 30px;
}
.p-works-modal__swiper .swiper-wrapper {
  align-items: center;
}
.p-works-modal__swiper .swiper-slide {
  width: clamp(600px, 280px + 41.67vw, 780px);
  opacity: 0.35;
  transition: opacity 0.4s ease;
}
@media (width < 768px) {
  .p-works-modal__swiper .swiper-slide {
    width: 77vw;
    height: auto;
  }
}
.p-works-modal__swiper .swiper-slide-prev,
.p-works-modal__swiper .swiper-slide-next {
  opacity: 0.55;
}
.p-works-modal__swiper .swiper-slide-active {
  opacity: 1;
}
.p-works-modal__swiper img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}
@media (width < 768px) {
  .p-works-modal__swiper img {
    aspect-ratio: 3/2;
  }
}
.p-works-modal__swiper .swiper-button-prev,
.p-works-modal__swiper .swiper-button-next {
  width: 48px !important;
  height: 48px !important;
  margin-top: -39px;
  padding: 0;
  border: 1px solid #003547;
  border-radius: 50% !important;
  background: #fff;
  color: #003547 !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.p-works-modal__swiper .swiper-button-prev svg,
.p-works-modal__swiper .swiper-button-next svg {
  height: 25px;
}
.p-works-modal__swiper .swiper-button-prev::after,
.p-works-modal__swiper .swiper-button-next::after {
  font-size: 14px;
  font-weight: 700;
}
.p-works-modal__swiper .swiper-button-prev:hover,
.p-works-modal__swiper .swiper-button-next:hover {
  background: #2A62A3;
  color: #fff !important;
}
@media (width < 768px) {
  .p-works-modal__swiper .swiper-button-prev,
  .p-works-modal__swiper .swiper-button-next {
    width: 36px !important;
    height: 36px !important;
    margin-top: -33px;
  }
}
.p-works-modal__swiper .swiper-button-prev {
  left: 8.5%;
}
@media (width < 768px) {
  .p-works-modal__swiper .swiper-button-prev {
    left: 8px;
  }
}
.p-works-modal__swiper .swiper-button-next {
  right: 8.5%;
}
@media (width < 768px) {
  .p-works-modal__swiper .swiper-button-next {
    right: 8px;
  }
}
.p-works-modal__swiper .swiper-pagination {
  bottom: 0;
  line-height: 0;
}
.p-works-modal__swiper .swiper-pagination-bullet {
  width: 16px;
  height: 4px;
  margin: 0 3px !important;
  border-radius: 999px;
  background: rgba(0, 53, 71, 0.2);
  opacity: 1;
  transition: width 0.4s ease, background-color 0.4s ease;
}
.p-works-modal__swiper .swiper-pagination-bullet-active {
  width: 32px;
  background: #2A62A3;
}

.p-works-modal__info {
  padding: 0 48px;
}
@media (width < 768px) {
  .p-works-modal__info {
    padding: 0 20px;
  }
}

.p-works-modal__en {
  margin: 28px 0 0;
  font-family: "Syncopate", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #0081ad;
}

.p-works-modal__title {
  margin: 10px 0 0;
  padding-bottom: 16px;
  border-bottom: 2px solid #003547;
  font-size: clamp(19px, 1rem + 0.7vw, 28px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.03em;
  color: #003547;
}

.p-works-modal__table {
  width: 100%;
  border-collapse: collapse;
}
.p-works-modal__table tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}
@media (width < 560px) {
  .p-works-modal__table tbody {
    grid-template-columns: minmax(0, 1fr);
  }
}
.p-works-modal__table tr {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: baseline;
  border-bottom: 1px solid rgba(0, 53, 71, 0.14);
}
.p-works-modal__table th,
.p-works-modal__table td {
  padding: 15px 0;
  background: none;
  text-align: left;
}
.p-works-modal__table th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5b7480;
}
.p-works-modal__table td {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
  color: #003547;
}
@media (width < 480px) {
  .p-works-modal__table td {
    font-size: 14px;
  }
}

.p-works-modal__text {
  margin-top: 24px;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #22414e;
}
.p-works-modal__text:empty {
  display: none;
}
.p-works-modal__text p {
  margin: 0;
}
.p-works-modal__text p + p {
  margin-top: 1em;
}
@media (width < 480px) {
  .p-works-modal__text {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-works__image,
  .p-works-modal__content {
    clip-path: none !important;
  }
  .p-works__link,
  .p-works__arrow,
  .p-works__body::after,
  .p-works-modal__content {
    transition: none;
  }
  .p-works__arrow svg {
    animation: none !important;
  }
}
@keyframes p-works-arrow {
  0% {
    translate: 0 0;
  }
  45% {
    translate: 180% 0;
  }
  46% {
    translate: -180% 0;
  }
  100% {
    translate: 0 0;
  }
}
.p-thanks__inner {
  position: relative;
  z-index: 2;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
  justify-content: center;
  min-height: 580px;
  text-align: center;
}

.p-thanks__text {
  color: #333;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: clamp(15px, 1vw + 3px, 20px);
  line-height: 1.65;
  margin-block: 5%;
}

.p-thanks__img {
  position: absolute;
  top: 65%;
  left: 80%;
  z-index: -1;
  transform: translate(-50%, -50%);
  width: clamp(230px, 69vw - 472px, 515px);
}
@media (width < 768px) {
  .p-thanks__img {
    bottom: 0;
    top: auto;
  }
}

/* =========================================================
    採用情報（page-recruit.php）
========================================================= */
.p-recruit__person {
  padding-bottom: 87px;
}
@media (width < 768px) {
  .p-recruit__person {
    padding-bottom: 50px;
  }
}

/* =========================================================
    求める人物像
========================================================= */
.p-recruit-person {
  position: relative;
  padding-block: clamp(90px, 9vw, 150px);
  background: linear-gradient(180deg, #ffffff 0%, #eef8fd 100%);
  color: #003547;
}

.p-recruit-person__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 48px;
}
.p-recruit-person__head .c-title {
  margin: 0;
}
.p-recruit-person__head .c-title__heading {
  margin-bottom: 0;
}

.p-recruit-person__copy {
  max-width: 560px;
  margin: 0;
  padding-bottom: 6px;
  font-size: clamp(14px, 0.85rem + 0.2vw, 16px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #22414e;
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .p-recruit-person__copy:not(.is-in) {
  opacity: 0;
  translate: 0 20px;
}

.p-recruit-window {
  margin-top: 0;
}

/* ---------------------------------------------------------
    求める人物像の並び（1行ずつの横並び）
    PC: 左に大きな番号と英字 / まん中に言葉 / 右に小さめのイラスト
    タブレット以下: 左に番号と言葉、右にイラスト
    - イラストは引き伸ばすと荒れるので、横 280px までにおさえる（拡大・パララックスもなし）
    - .p-recruit-person__body は display: contents にして、番号と言葉をそれぞれの列に置く（PHP はそのまま）
--------------------------------------------------------- */
.p-recruit-person__list {
  margin: clamp(48px, 5vw, 80px) 0 0;
  padding: 0;
  border-top: 2px solid #003547;
  list-style: none;
}

.p-recruit-person__item {
  position: relative;
  display: grid;
  grid-template-columns: clamp(120px, 13vw, 190px) minmax(0, 1fr) clamp(200px, 22vw, 280px);
  grid-template-areas: "no heading figure";
  align-items: center;
  column-gap: clamp(20px, 3vw, 56px);
  padding-block: clamp(24px, 2.8vw, 40px);
  transition: opacity 1s ease, translate 1.2s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--d, 0) * 140ms);
}
.p-recruit-person__item::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(0, 53, 71, 0.18);
  transform-origin: left center;
  transition: scale 1.2s cubic-bezier(0.77, 0, 0.18, 1);
  transition-delay: calc(0.15s + var(--d, 0) * 140ms);
}
@media (width < 768px) {
  .p-recruit-person__item {
    grid-template-columns: minmax(0, 1fr) clamp(100px, 30vw, 200px);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". figure" "no figure" "heading figure" ". figure";
    align-items: start;
    column-gap: 16px;
    padding-block: 22px;
  }
}

.is-motion .p-recruit-person__item:not(.is-in) {
  opacity: 0;
  translate: 0 32px;
}
.is-motion .p-recruit-person__item:not(.is-in)::after {
  scale: 0 1;
}

.p-recruit-person__body {
  display: contents;
}

.p-recruit-person__no {
  grid-area: no;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0081ad;
}
.p-recruit-person__no span {
  padding-right: 0.08em;
  font-size: clamp(48px, 5.4vw, 88px);
  font-style: italic;
  line-height: 0.9;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, #2A62A3 0%, #0081ad 60%, #1aa6b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (width < 768px) {
  .p-recruit-person__no {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
  .p-recruit-person__no span {
    font-size: clamp(34px, 9vw, 52px);
  }
}

.p-recruit-person__heading {
  grid-area: heading;
  margin: 0;
  font-weight: 900;
  letter-spacing: 0.03em;
  color: #003547;
}
@media (width < 768px) {
  .p-recruit-person__heading {
    margin-top: 10px;
  }
}

.p-recruit-person__lead {
  display: block;
  font-size: clamp(13px, 0.8rem + 0.25vw, 16px);
  line-height: 1.6;
  color: #5b7480;
}

.p-recruit-person__key {
  display: block;
  margin-top: 6px;
  font-size: clamp(20px, 0.9rem + 1.3vw, 38px);
  line-height: 1.4;
  text-wrap: balance;
}
@media (width < 480px) {
  .p-recruit-person__key {
    font-size: 17px;
  }
}

.p-recruit-person__figure {
  grid-area: figure;
  position: relative;
  z-index: 1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4/3;
  border: 1px solid rgba(0, 53, 71, 0.15);
  background: #f4fafd;
  clip-path: inset(0);
  transition: clip-path 1.3s cubic-bezier(0.77, 0, 0.18, 1);
  transition-delay: calc(0.2s + var(--d, 0) * 140ms);
}
@media (width < 768px) {
  .p-recruit-person__figure {
    align-self: center;
  }
}

.p-recruit-person__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.is-motion .p-recruit-person__item:not(.is-in) .p-recruit-person__figure {
  clip-path: inset(0 100% 0 0);
}

.p-recruit-person__item .c-dots {
  --size: clamp(100px, 10vw, 150px);
  z-index: 0;
}

.p-recruit-person__item .c-dots--tl {
  top: clamp(8px, 1.2vw, 18px);
  right: -16px;
  bottom: auto;
  left: auto;
}
@media (width < 768px) {
  .p-recruit-person__item .c-dots--tl {
    right: -8px;
  }
}

.p-recruit-person__item .c-dots--br {
  top: auto;
  right: -16px;
  bottom: clamp(8px, 1.2vw, 18px);
  left: auto;
}
@media (width < 768px) {
  .p-recruit-person__item .c-dots--br {
    right: -8px;
  }
}

/* =========================================================
    資格取得サポート
========================================================= */
.p-recruit-support {
  position: relative;
  overflow: hidden;
  padding-top: clamp(110px, 11vw, 180px);
  padding-bottom: clamp(60px, 7vw, 110px);
  color: #003547;
}

.p-recruit-support__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(40px, 6vw, 100px);
}
@media (width < 900px) {
  .p-recruit-support__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-recruit-support__content .c-title {
  margin: 0;
}

.p-recruit-support__heading {
  margin: 18px 0 0;
  font-size: clamp(32px, 1rem + 3vw, 60px);
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #003547;
}

.p-recruit-support__text {
  max-width: 460px;
  margin: clamp(20px, 2.4vw, 32px) 0 0;
  font-size: clamp(14px, 0.85rem + 0.2vw, 16px);
  font-weight: 500;
  line-height: 2.1;
  letter-spacing: 0.05em;
  color: #22414e;
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .p-recruit-support__text:not(.is-in) {
  opacity: 0;
  translate: 0 20px;
}

.p-recruit-support__list {
  padding: clamp(20px, 3vw, 40px) clamp(20px, 3vw, 44px);
  background: #fff;
}

.p-recruit-support__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (width < 480px) {
  .p-recruit-support__items {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-recruit-support__item {
  position: relative;
  padding: 13px 0 13px 20px;
  border-bottom: 1px solid rgba(0, 53, 71, 0.12);
  font-size: clamp(13px, 0.8rem + 0.15vw, 15px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: #003547;
  transition: opacity 0.7s ease, translate 0.8s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(var(--d, 0) * 40ms);
}
.p-recruit-support__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0081ad;
  translate: 0 -50%;
}
@media (width < 480px) {
  .p-recruit-support__item {
    padding: 10px 0 10px 18px;
  }
}

.is-motion .p-recruit-support__list:not(.is-in) .p-recruit-support__item {
  opacity: 0;
  translate: -14px 0;
}

.p-recruit-support__etc {
  margin: 14px 0 0;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: #5b7480;
}

.p-recruit-support__img-wrap {
  position: relative;
  height: clamp(280px, 34vw, 480px);
  margin-top: clamp(56px, 7vw, 110px);
}
@media (width < 768px) {
  .p-recruit-support__img-wrap {
    height: 82vw;
  }
}

.p-recruit-support__photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid #003547;
  background: #e4f2fa;
  transform: translate3d(0, calc(var(--pp, 0) * var(--s, 0px)), 0);
  clip-path: inset(0);
  transition: clip-path 1.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.p-recruit-support__photo--01 {
  --s: 40px;
  top: 8%;
  left: 20px;
  width: 30%;
  aspect-ratio: 262/252;
}
.p-recruit-support__photo--02 {
  --s: 140px;
  top: 40%;
  left: 38%;
  width: 18%;
  aspect-ratio: 156/187;
  transition-delay: 0.15s;
}
.p-recruit-support__photo--03 {
  --s: 80px;
  top: 0;
  right: 20px;
  width: 36%;
  aspect-ratio: 285/190;
  transition-delay: 0.3s;
}
@media (width < 768px) {
  .p-recruit-support__photo--01 {
    --s: 16px;
    top: 0;
    width: 48%;
  }
  .p-recruit-support__photo--02 {
    --s: 48px;
    top: 58%;
    left: 32%;
    width: 42%;
  }
  .p-recruit-support__photo--03 {
    --s: 28px;
    top: 16%;
    width: 40%;
  }
}

.is-motion .p-recruit-support__photo:not(.is-in) {
  clip-path: inset(100% 0 0 0);
}

.p-recruit-support__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08) skewY(calc(var(--v, 0) * 2deg));
}

/* ---------- エントリーボタン（中ほど / 最後） ---------- */
.p-recruit-job__footer {
  margin-block: clamp(64px, 7vw, 110px);
  text-align: center;
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .p-recruit-job__footer:not(.is-in) {
  opacity: 0;
  translate: 0 20px;
}

/* =========================================================
    働く環境（開閉カード）
========================================================= */
.p-recruit-welfare {
  position: relative;
  z-index: 1;
  padding-block: clamp(90px, 9vw, 150px);
  background: linear-gradient(180deg, #eef8fd 0%, #ffffff 100%);
  color: #003547;
}

.p-recruit-welfare__head {
  margin-bottom: clamp(32px, 4vw, 56px);
}
.p-recruit-welfare__head .c-title {
  margin: 0;
}
.p-recruit-welfare__head .c-title__heading {
  margin-bottom: 0;
}

.p-recruit-welfare__contents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(10px, 1.6vw, 20px);
}
@media (width < 768px) {
  .p-recruit-welfare__contents {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-recruit-welfare__card {
  display: block;
  min-width: 0;
  border: 1px solid #003547;
  background: #fff;
  transition: opacity 0.9s ease, translate 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.p-recruit-welfare__card:nth-child(even) {
  transition-delay: 0.1s;
}

.is-motion .p-recruit-welfare__card:not(.is-in) {
  opacity: 0;
  translate: 0 32px;
}

.p-recruit-welfare__card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 1.8vw, 20px) clamp(14px, 2vw, 22px);
  background: #fff;
  transition: background-color 0.4s ease;
}

.p-recruit-welfare__card-title-wrap {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 18px);
  min-width: 0;
}

.p-recruit-welfare__card-icon {
  display: block;
  flex: none;
  width: 40px;
  height: 40px;
  color: #003547;
  transition: color 0.4s ease;
}
.p-recruit-welfare__card-icon .c-ricon {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.p-recruit-welfare__card-icon path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0.25s;
}
.p-recruit-welfare__card-icon .c-ricon__bar,
.p-recruit-welfare__card-icon .c-ricon__check,
.p-recruit-welfare__card-icon .c-ricon__plus,
.p-recruit-welfare__card-icon .c-ricon__flag {
  transition-delay: 0.7s;
}
@media (width < 480px) {
  .p-recruit-welfare__card-icon {
    width: 34px;
    height: 34px;
  }
}

.is-motion .p-recruit-welfare__card:not(.is-in) .p-recruit-welfare__card-icon path {
  stroke-dashoffset: 1;
}

.p-recruit-welfare__card-title {
  margin: 0;
  font-size: clamp(16px, 0.85rem + 0.6vw, 22px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.03em;
  color: #003547;
  transition: color 0.4s ease;
}

.p-recruit-welfare__toggle {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.p-recruit-welfare__toggle span {
  position: absolute;
  inset: 0;
  width: 20px;
  height: 2px;
  margin: auto;
  background: #003547;
  transition: background-color 0.3s ease;
}
.p-recruit-welfare__toggle span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 20px;
  background: inherit;
  translate: -50% -50%;
  transition: scale 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-recruit-welfare__toggle:focus-visible {
  outline: 2px solid #0081ad;
  outline-offset: 3px;
}
@media (hover: hover) {
  .p-recruit-welfare__toggle:hover span {
    background: #0081ad;
  }
}
@media (width < 480px) {
  .p-recruit-welfare__toggle {
    width: 40px;
    height: 40px;
  }
}

.p-recruit-welfare__card.is-open .p-recruit-welfare__card-head {
  background: #003547;
}
.p-recruit-welfare__card.is-open .p-recruit-welfare__card-title {
  color: #fff;
}
.p-recruit-welfare__card.is-open .p-recruit-welfare__card-icon {
  color: #fff;
}
.p-recruit-welfare__card.is-open .p-recruit-welfare__toggle span {
  background: #fff;
}
.p-recruit-welfare__card.is-open .p-recruit-welfare__toggle span::after {
  scale: 1 0;
}

.p-recruit-welfare__card-body {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  transition: max-height 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.p-recruit-welfare__card-bg {
  padding: clamp(20px, 2.6vw, 32px);
  border-top: 1px solid #003547;
  background: #fff;
}

.p-recruit-welfare__data {
  margin: 0;
}

.p-recruit-welfare__data-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 53, 71, 0.12);
}
.p-recruit-welfare__data-row:first-child {
  padding-top: 0;
}
.p-recruit-welfare__data-row dt {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #22414e;
}
@media (width < 480px) {
  .p-recruit-welfare__data-row dt {
    font-size: 14px;
  }
}
.p-recruit-welfare__data-row dd {
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(24px, 1.1rem + 1.1vw, 38px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  color: #003547;
}
.p-recruit-welfare__data-row dd b {
  font-weight: inherit;
}
.p-recruit-welfare__data-row dd span {
  margin-left: 4px;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #0081ad;
}
@media (width < 480px) {
  .p-recruit-welfare__data-row dd span {
    font-size: 12px;
  }
}

.p-recruit-welfare__graph {
  margin-top: 32px;
}

.p-recruit-welfare__graph-title {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5b7480;
}

.p-recruit-welfare__bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(6px, 1vw, 12px);
  height: 180px;
  margin: 0;
  padding: 0 4px;
  border-bottom: 2px solid #003547;
  list-style: none;
}

.p-recruit-welfare__bar-item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

.p-recruit-welfare__bar-value {
  margin-bottom: 6px;
  font-family: "Syncopate", sans-serif;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  color: #003547;
}
.p-recruit-welfare__bar-value span {
  font-size: 0.75em;
}
@media (width < 480px) {
  .p-recruit-welfare__bar-value {
    font-size: 9px;
  }
}

.p-recruit-welfare__bar {
  width: 100%;
  height: 0;
  background: #b9dcef;
  transition: height 0.9s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(0.2s + var(--d, 0) * 70ms);
}

.p-recruit-welfare__bar-item.is-active .p-recruit-welfare__bar {
  background: #003547;
}

.p-recruit-welfare__card.is-open .p-recruit-welfare__bar {
  height: calc(var(--rate) / 34 * 100%);
}

.is-motion .p-recruit-welfare__card:not(.is-in) .p-recruit-welfare__bar {
  height: 0;
}

.p-recruit-welfare__bar-label {
  position: absolute;
  bottom: -1.9em;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  color: #22414e;
}
@media (width < 480px) {
  .p-recruit-welfare__bar-label {
    font-size: 11px;
  }
}

.p-recruit-welfare__bar-label--small {
  padding-left: 1px;
  font-size: 0.8em;
}
@media (width < 480px) {
  .p-recruit-welfare__bar-label--small {
    font-size: 0.7em;
  }
}

.p-recruit-welfare__graph-note {
  margin: 2.8em 0 0;
  text-align: right;
  font-size: 11px;
  color: #5b7480;
}

.p-recruit-welfare__drawing {
  margin: 0 0 4px;
  border: 1px solid rgba(0, 53, 71, 0.15);
  background: #f4fafd;
}
.p-recruit-welfare__drawing .c-rdraw {
  display: block;
  width: 100%;
  height: auto;
}

.p-recruit-welfare__gallery {
  display: grid;
  gap: 8px;
}

.p-recruit-welfare__flex {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.p-recruit-welfare__image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid rgba(0, 53, 71, 0.15);
}

.p-recruit-welfare__image.p-recruit-welfare__image-dormitory {
  aspect-ratio: 432/276;
  object-fit: cover;
  object-position: center;
}

.p-recruit-welfare__text {
  margin: 18px 0 0;
  font-size: clamp(14px, 0.85rem + 0.15vw, 16px);
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: #22414e;
}

.p-recruit-welfare__card-btn {
  margin-top: 24px;
}

.p-recruit-welfare__event-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (width < 480px) {
  .p-recruit-welfare__event-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.p-recruit-welfare__event {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.p-recruit-welfare__event-fig {
  margin: 0;
  border: 1px solid rgba(0, 53, 71, 0.15);
  background: #f4fafd;
}
.p-recruit-welfare__event-fig .c-rdraw {
  display: block;
  width: 100%;
  height: auto;
}

.p-recruit-welfare__event-name {
  position: relative;
  padding-left: 16px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #003547;
}
.p-recruit-welfare__event-name::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0081ad;
  translate: 0 -50%;
}

.p-recruit-welfare__benefit-contents {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 28px;
}
@media (width < 480px) {
  .p-recruit-welfare__benefit-contents {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

.p-recruit-welfare__benefit-title {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 2px solid #003547;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #5b7480;
}

.p-recruit-welfare__benefit-list {
  display: grid;
  column-gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-recruit-welfare__benefit-list li {
  position: relative;
  padding: 10px 0 10px 16px;
  border-bottom: 1px solid rgba(0, 53, 71, 0.12);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #003547;
}
.p-recruit-welfare__benefit-list li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0081ad;
  translate: 0 -50%;
}
@media (width < 480px) {
  .p-recruit-welfare__benefit-list li {
    font-size: 13px;
  }
}

.p-recruit-welfare__benefit-group:first-child .p-recruit-welfare__benefit-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.p-recruit-welfare__card-catch {
  margin: 0 0 24px;
  padding: 18px 4px;
  border-top: 2px solid #003547;
  border-bottom: 2px solid #003547;
  text-align: center;
  font-size: clamp(17px, 0.9rem + 0.8vw, 26px);
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #003547;
}

.p-recruit-welfare__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (width < 480px) {
  .p-recruit-welfare__cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-recruit-welfare__mini {
  padding: 16px 18px;
  border: 1px solid rgba(0, 53, 71, 0.2);
  border-left: 3px solid #0081ad;
  background: #f6fbfe;
}

.p-recruit-welfare__mini-title {
  margin: 0 0 8px;
  font-size: clamp(14px, 0.8rem + 0.2vw, 16px);
  font-weight: 900;
  line-height: 1.5;
  color: #003547;
}

.p-recruit-welfare__mini-target {
  margin: 0;
  font-size: 13px;
  line-height: 1.8;
  color: #22414e;
}

/* =========================================================
    募集要項
    - タブは共通の絞り込みボタン（c-button.scss）
    - 表: 左に項目（紺の太字 + 水色の ●）、右に内容。上に紺の太い線、行ごとに細い線
    - 「現在募集しておりません」は表の幅いっぱいの面
    - タブを切り替えると、表が下からふわっと出る
========================================================= */
.p-recruit-job {
  position: relative;
  z-index: 1;
  padding-block: clamp(90px, 9vw, 150px) clamp(20px, 3vw, 40px);
  background: #fff;
  color: #003547;
}

.p-recruit-job__head {
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.p-recruit-job__head .c-title {
  margin: 0;
}
.p-recruit-job__head .c-title__heading {
  margin-bottom: 0;
}

.p-recruit-job__card {
  display: block;
  animation: p-recruit-job-in 0.7s cubic-bezier(0.19, 1, 0.22, 1) both;
}
.p-recruit-job__card.hide {
  display: none;
}
.p-recruit-job__card .p-company__table {
  margin: 0;
}
.p-recruit-job__card dl {
  display: grid;
  grid-template-columns: clamp(110px, 14vw, 200px) minmax(0, 1fr);
  margin: 0;
}
@media (width < 480px) {
  .p-recruit-job__card dl {
    grid-template-columns: minmax(0, 1fr);
  }
}
.p-recruit-job__card dt,
.p-recruit-job__card dd {
  margin: 0;
  padding: clamp(16px, 1.8vw, 24px) 0;
  border-bottom: 1px solid rgba(0, 53, 71, 0.14);
  line-height: 1.85;
}
.p-recruit-job__card dt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-right: 16px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #003547;
}
.p-recruit-job__card dt::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0081ad;
  translate: 0 -2px;
}
@media (width < 480px) {
  .p-recruit-job__card dt {
    padding-bottom: 4px;
    border-bottom: 0;
    font-size: 14px;
  }
}
.p-recruit-job__card dd {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #22414e;
}
@media (width < 480px) {
  .p-recruit-job__card dd {
    padding-top: 0;
    font-size: 14px;
  }
}
.p-recruit-job__card dt:only-child {
  grid-column: 1/-1;
  justify-content: center;
  padding: clamp(48px, 6vw, 80px) 20px;
  background: #f4fafd;
  font-size: clamp(15px, 0.85rem + 0.4vw, 19px);
  color: #5b7480;
}
.p-recruit-job__card dt:only-child::before {
  background: #9db2bc;
}
@media (width < 480px) {
  .p-recruit-job__card dt:only-child {
    border-bottom: 1px solid rgba(0, 53, 71, 0.14);
  }
}

@keyframes p-recruit-job-in {
  from {
    opacity: 0;
    translate: 0 18px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/* =========================================================
    エントリー
    左: 写真を固定したパララックス（c-parallax。右のふちを斜めに切る）
    右: 明るいグラデーションの面（c-bg-grad）に、大きな英字・言葉・ボタン・電話
        下にショベルカーのイラスト（ゆっくり上下・アームが動く）。右上に細かいドット
========================================================= */
.p-recruit-entry {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: clamp(520px, 46vw, 720px);
  margin-top: clamp(60px, 7vw, 110px);
  color: #003547;
}
@media (width < 900px) {
  .p-recruit-entry {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-recruit-entry__photo.c-parallax {
  height: auto;
  clip-path: polygon(0 0, 100% 0, calc(100% - clamp(80px, 9vw, 160px)) 100%, 0 100%);
}
@media (width < 900px) {
  .p-recruit-entry__photo.c-parallax {
    height: clamp(240px, 60vw, 420px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
  }
}

.p-recruit-entry__panel {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: calc(clamp(80px, 9vw, 160px) * -1);
  padding: clamp(56px, 6vw, 100px) clamp(24px, 5vw, 96px) clamp(140px, 14vw, 220px) calc(clamp(80px, 9vw, 160px) + clamp(24px, 3vw, 56px));
  overflow: hidden;
  clip-path: polygon(clamp(80px, 9vw, 160px) 0, 100% 0, 100% 100%, 0 100%);
}
@media (width < 900px) {
  .p-recruit-entry__panel {
    margin: -40px 0 0;
    padding: 72px 22px 150px;
    clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%);
  }
}

.p-recruit-entry__body {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.p-recruit-entry__word {
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-size: clamp(56px, 8vw, 140px);
  font-style: italic;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  background: linear-gradient(100deg, #2A62A3 0%, #0081ad 60%, #1aa6b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.p-recruit-entry__title {
  margin: clamp(18px, 2vw, 28px) 0 0;
  font-size: clamp(22px, 0.9rem + 1.3vw, 38px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #003547;
}

.p-recruit-entry__text {
  margin: 18px 0 0;
  font-size: clamp(13px, 0.8rem + 0.2vw, 15px);
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #22414e;
}

.p-recruit-entry__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(24px, 3vw, 40px);
}

.p-recruit-entry__tel {
  position: relative;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 12px;
  align-items: center;
  padding-left: 56px;
  color: #003547;
  text-decoration: none;
}
.p-recruit-entry__tel::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(0, 53, 71, 0.35);
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003547' stroke-width='1.8'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2'/%3E%3C/svg%3E") no-repeat center/18px 18px;
  translate: 0 -50%;
  transition: background-color 0.4s ease, border-color 0.4s ease;
}
.p-recruit-entry__tel:hover::before {
  border-color: #2A62A3;
  background-color: #fff;
}

.p-recruit-entry__tel-label {
  grid-column: 1/-1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #5b7480;
}

.p-recruit-entry__tel-num {
  font-family: "Syncopate", sans-serif;
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.p-recruit-entry__tel-time {
  grid-column: 1/-1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5b7480;
}

.p-recruit-entry__machine {
  position: absolute;
  right: clamp(16px, 4vw, 72px);
  bottom: clamp(18px, 2.4vw, 40px);
  z-index: 0;
  display: block;
  width: clamp(150px, 15vw, 250px);
}
.p-recruit-entry__machine svg {
  display: block;
  width: 100%;
  height: auto;
}

.p-recruit-entry__panel .c-dots {
  --size: clamp(180px, 20vw, 300px);
}

.p-recruit-entry__text,
.p-recruit-entry__buttons {
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}

.is-motion .p-recruit-entry__text:not(.is-in),
.is-motion .p-recruit-entry__buttons:not(.is-in) {
  opacity: 0;
  translate: 0 20px;
}

/* =========================================================
    画像の切り替え・ドット（ほかのページで使っている場合のため残しています。色を青系に）
========================================================= */
@keyframes recruitDefault {
  0%, 40%, 100% {
    opacity: 1;
  }
  50%, 90% {
    opacity: 0;
  }
}
@keyframes recruitJump {
  0%, 40%, 100% {
    opacity: 0;
  }
  50%, 90% {
    opacity: 1;
  }
}
.p-recruit-message__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  border-radius: 50%;
  background: #2a62a3;
  opacity: 0;
}

.p-recruit-message__dot--1 {
  width: 12px;
  height: 12px;
  background: #0081ad;
  animation: dot1 4s infinite;
}

.p-recruit-message__dot--2 {
  width: 7px;
  height: 7px;
  background: #8fd0ef;
  animation: dot2 4s infinite;
}

.p-recruit-message__dot--3 {
  width: 14px;
  height: 14px;
  background: #003547;
  animation: dot3 4s infinite;
}

.p-recruit-message__dot--4 {
  width: 8px;
  height: 8px;
  background: #2a62a3;
  animation: dot4 4s infinite;
}

.p-recruit-message__dot--5 {
  width: 10px;
  height: 10px;
  background: #0081ad;
  animation: dot5 4s infinite;
}

.p-recruit-message__dot--6 {
  width: 6px;
  height: 6px;
  background: #003547;
  animation: dot6 4s infinite;
}

.p-recruit-message__dot--7 {
  width: 11px;
  height: 11px;
  background: #8fd0ef;
  animation: dot7 4s infinite;
}

.p-recruit-message__dot--8 {
  width: 7px;
  height: 7px;
  background: #2a62a3;
  animation: dot8 4s infinite;
}

@keyframes dot1 {
  0%, 40%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(-110px, -50px) scale(1);
  }
  70% {
    opacity: 0;
    transform: translate(-140px, -80px) scale(0);
  }
}
@keyframes dot2 {
  0%, 40%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(-140px, 10px) scale(1);
  }
  70% {
    opacity: 0;
    transform: translate(-180px, 20px) scale(0);
  }
}
@keyframes dot3 {
  0%, 40%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(-80px, 70px) scale(1);
  }
  70% {
    opacity: 0;
    transform: translate(-110px, 100px) scale(0);
  }
}
@keyframes dot4 {
  0%, 40%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(90px, -60px) scale(1);
  }
  70% {
    opacity: 0;
    transform: translate(130px, -90px) scale(0);
  }
}
@keyframes dot5 {
  0%, 40%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(140px, -10px) scale(1);
  }
  70% {
    opacity: 0;
    transform: translate(180px, -20px) scale(0);
  }
}
@keyframes dot6 {
  0%, 40%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(110px, 60px) scale(1);
  }
  70% {
    opacity: 0;
    transform: translate(150px, 90px) scale(0);
  }
}
@keyframes dot7 {
  0%, 40%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(40px, 90px) scale(1);
  }
  70% {
    opacity: 0;
    transform: translate(60px, 130px) scale(0);
  }
}
@keyframes dot8 {
  0%, 40%, 100% {
    opacity: 0;
    transform: translate(0, 0) scale(0);
  }
  55% {
    opacity: 1;
    transform: translate(-60px, -90px) scale(1);
  }
  70% {
    opacity: 0;
    transform: translate(-90px, -130px) scale(0);
  }
}
/* =========================================================
    社内クラブ・年間行事のイラストの動き（recruit-drawings.php の .c-rdraw__○○）
    社内クラブ: 波（左右にゆれる）・釣り糸とウキ（ゆれる）・波紋 / 年間行事: 安全旗（ゆれる）・煙
========================================================= */
.c-rdraw {
  overflow: visible;
}

.c-rdraw__wave {
  animation: c-rdraw-wave 3.2s ease-in-out infinite alternate;
  animation-delay: calc(var(--d, 0) * -0.7s);
}

.c-rdraw__float {
  transform-box: view-box;
  transform-origin: 470px 148px;
  animation: c-rdraw-float 2.8s ease-in-out infinite alternate;
}

.c-rdraw__bob {
  animation: c-rdraw-bob 1.4s ease-in-out infinite alternate;
}

.c-rdraw__ripple {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: c-rdraw-ripple 2.8s ease-out infinite;
}

.c-rdraw__smoke {
  animation: c-rdraw-smoke 2.4s ease-out infinite;
  animation-delay: calc(var(--d, 0) * 0.8s);
}

.c-rdraw__banner {
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: c-rdraw-banner 2.6s ease-in-out infinite alternate;
}

@keyframes c-rdraw-wave {
  from {
    transform: translateX(-6px);
  }
  to {
    transform: translateX(6px);
  }
}
@keyframes c-rdraw-float {
  from {
    transform: rotate(-1.2deg);
  }
  to {
    transform: rotate(1.2deg);
  }
}
@keyframes c-rdraw-bob {
  from {
    transform: translateY(-1px);
  }
  to {
    transform: translateY(1.5px);
  }
}
@keyframes c-rdraw-ripple {
  0% {
    opacity: 0.9;
    transform: scale(0.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
@keyframes c-rdraw-smoke {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-22px);
  }
}
@keyframes c-rdraw-banner {
  from {
    transform: skewY(-4deg) scaleX(0.94);
  }
  to {
    transform: skewY(4deg) scaleX(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-recruit-person__item,
  .p-recruit-support__photo {
    transform: none;
  }
  .p-recruit-support__photo {
    clip-path: none !important;
  }
  .p-recruit-welfare__bar,
  .p-recruit-welfare__card-body {
    transition: none;
  }
  .p-recruit-job__card {
    animation: none;
  }
  .c-rdraw__anim *,
  .c-machine__arm,
  .c-machine__stick {
    animation: none !important;
  }
  .p-recruit-welfare__card-icon path {
    stroke-dashoffset: 0 !important;
  }
}
/* =========================================================
    404（page-404.php）・お問い合わせ完了（page-contact-thanks.php）
========================================================= */
.p-404,
.p-thanks {
  display: flex;
  align-items: center;
  min-height: 80vh;
  padding: calc(var(--header-h, 80px) + clamp(48px, 6vw, 96px)) 0 clamp(72px, 8vw, 120px);
  color: #003547;
}

.p-404__inner,
.p-thanks__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  width: 100%;
}
@media (width < 900px) {
  .p-404__inner,
  .p-thanks__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

.p-404__body,
.p-thanks__body {
  position: relative;
}

.p-404__en,
.p-thanks__en {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: "Syncopate", sans-serif;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  background: linear-gradient(100deg, #2A62A3 0%, #0081ad 60%, #1aa6b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: p-404-in 1s cubic-bezier(0.19, 1, 0.22, 1) 0.1s both;
}

.p-404__en {
  font-size: clamp(96px, 16vw, 240px);
}

.p-thanks__en {
  font-size: clamp(48px, 7vw, 112px);
}

.p-404__title,
.p-thanks__title {
  position: relative;
  z-index: 1;
  margin: clamp(18px, 2vw, 28px) 0 0;
  font-size: clamp(20px, 0.9rem + 1vw, 30px);
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #003547;
  animation: p-404-in 1s cubic-bezier(0.19, 1, 0.22, 1) 0.3s both;
}

.p-thanks__text {
  margin: 20px 0 0;
  font-size: clamp(13px, 0.8rem + 0.2vw, 15px);
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: #22414e;
  animation: p-404-in 1s cubic-bezier(0.19, 1, 0.22, 1) 0.45s both;
}

.p-404__button,
.p-thanks__button {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: clamp(28px, 3vw, 44px);
  animation: p-404-in 1s cubic-bezier(0.19, 1, 0.22, 1) 0.6s both;
}

.p-thanks__tel {
  display: grid;
  gap: 2px;
  color: #003547;
  text-decoration: none;
}
.p-thanks__tel .text-en {
  font-family: "Syncopate", sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.p-thanks__tel small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5b7480;
}

.p-thanks .c-steps {
  max-width: 420px;
  margin-bottom: clamp(28px, 3vw, 44px);
}

.p-404__figure,
.p-thanks__figure {
  position: relative;
  margin: 0;
}
.p-404__figure img,
.p-thanks__figure img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  animation: p-404-float 6s ease-in-out infinite;
}

@keyframes p-404-in {
  from {
    opacity: 0;
    translate: 0 24px;
  }
}
@keyframes p-404-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .p-404__en,
  .p-thanks__en,
  .p-404__title,
  .p-thanks__title,
  .p-thanks__text,
  .p-404__button,
  .p-thanks__button,
  .p-404__figure img,
  .p-thanks__figure img {
    animation: none;
  }
}
/* =========================================================
    プライバシーポリシー（page-privacy.php）
========================================================= */
.p-privacy {
  padding-block: calc(clamp(24px, 5vw, 80px) + clamp(56px, 6vw, 96px)) clamp(80px, 9vw, 140px);
  color: #003547;
}

.p-privacy__inner {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 5vw, 80px) !important;
  background: #fff;
}

.p-privacy__title {
  margin: 0;
  font-size: clamp(24px, 1rem + 1.4vw, 36px);
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.p-privacy__lead {
  margin: 24px 0 0;
  padding-bottom: clamp(28px, 3vw, 40px);
  border-bottom: 1px solid rgba(0, 53, 71, 0.16);
  font-size: clamp(14px, 0.85rem + 0.2vw, 16px);
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: #22414e;
}

.p-privacy__heading {
  position: relative;
  margin: clamp(36px, 4vw, 56px) 0 14px;
  padding-left: 20px;
  font-size: clamp(17px, 1.3vw, 21px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #003547;
}
.p-privacy__heading::before {
  content: "";
  position: absolute;
  top: 0.2em;
  bottom: 0.2em;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, #2A62A3 0%, #0081ad 100%);
}

.p-privacy__text {
  margin: 0;
  font-size: clamp(14px, 0.85rem + 0.15vw, 15.5px);
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: #22414e;
}

.p-privacy__list {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 18px 22px;
  background: #f4fafd;
  list-style: none;
}

.p-privacy__list-item {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: #22414e;
}
.p-privacy__list-item::before {
  content: "";
  position: absolute;
  top: 0.75em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0081ad;
}

.p-privacy__table {
  width: 100%;
  margin-top: 18px;
  border-top: 1px solid #003547;
  border-collapse: collapse;
}

.p-privacy__table-row {
  border-bottom: 1px solid rgba(0, 53, 71, 0.16);
}

.p-privacy__table-header,
.p-privacy__table-data {
  padding: 16px 0;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  text-align: left;
  vertical-align: top;
}

.p-privacy__table-header {
  width: 10em;
  padding-right: 20px;
  font-weight: 900;
  color: #003547;
}

.p-privacy__table-data {
  color: #22414e;
}

@media (width < 480px) {
  .p-privacy__table-row {
    display: grid;
    padding: 12px 0;
  }
  .p-privacy__table-header,
  .p-privacy__table-data {
    width: auto;
    padding: 2px 0;
  }
}
.p-privacy__date {
  margin: clamp(32px, 4vw, 48px) 0 0;
  font-size: 13px;
  text-align: right;
  color: #5b7480;
}

/* =========================================================
    LINK（関連リンクのバナー）※ サブフッターの前に置く
========================================================= */
.p-link {
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(88px, 9vw, 140px);
  background: linear-gradient(160deg, #00384c 0%, #002433 100%);
  color: #f6f4ef;
}
.p-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  pointer-events: none;
}
@media (width < 480px) {
  .p-link {
    padding-block: 64px 72px;
  }
}

/* ---------- 見出し ---------- */
.p-link__head {
  margin-bottom: clamp(36px, 4vw, 60px);
  transition: opacity 1s ease, translate 1.1s cubic-bezier(0.19, 1, 0.22, 1);
}
.p-link__head .c-title {
  margin: 0;
}
.p-link__head .c-title__heading-en {
  color: #9fe0ff;
}
.p-link__head .c-title__heading {
  margin: clamp(12px, 1.4vw, 18px) 0 0;
  font-size: clamp(26px, 1rem + 2vw, 44px);
  color: #f6f4ef;
}
@media (width < 480px) {
  .p-link__head {
    margin-bottom: 32px;
  }
}

.is-motion .p-link__head:not(.is-in) {
  opacity: 0;
  translate: 0 30px;
}

/* ---------- マス目 ---------- */
.p-link__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(246, 244, 239, 0.18);
  border-left: 1px solid rgba(246, 244, 239, 0.18);
  list-style: none;
  clip-path: inset(0);
  transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.18, 1);
}
@media (width < 1100px) {
  .p-link__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (width < 768px) {
  .p-link__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.is-motion .p-link__list:not(.is-in) {
  clip-path: inset(0 100% 0 0);
}

/* ---------- マス1つ ---------- */
.p-link__item {
  display: flex;
  min-width: 0;
  border-right: 1px solid rgba(246, 244, 239, 0.18);
  border-bottom: 1px solid rgba(246, 244, 239, 0.18);
  transition: opacity 0.9s ease, translate 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition-delay: calc(0.3s + var(--d, 0) * 90ms);
}
@media (width < 1100px) {
  .p-link__item:last-child:nth-child(3n+1) {
    grid-column: span 3;
  }
  .p-link__item:last-child:nth-child(3n+2) {
    grid-column: span 2;
  }
}
@media (width < 768px) {
  .p-link__item:last-child:nth-child(3n+1), .p-link__item:last-child:nth-child(3n+2) {
    grid-column: auto;
  }
  .p-link__item:last-child:nth-child(odd) {
    grid-column: span 2;
  }
}

.is-motion .p-link__item:not(.is-in) {
  opacity: 0;
  translate: 0 28px;
}

.p-link__banner {
  position: relative;
  isolation: isolate;
  display: grid;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "no arrow" "media media" "type type";
  align-items: center;
  gap: clamp(12px, 1.4vw, 18px) 8px;
  padding: clamp(14px, 1.4vw, 20px);
  overflow: hidden;
  color: #f6f4ef;
  text-decoration: none;
}
.p-link__banner::before {
  content: "";
  position: absolute;
  inset: 0 -120px 0 -24px;
  z-index: -1;
  background: linear-gradient(90deg, rgba(42, 98, 163, 0.55) 0%, rgba(0, 129, 173, 0.35) 100%);
  transform: skewX(-23deg);
  transform-origin: 0 0;
  scale: 0 1;
  transition: scale 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.p-link__banner:focus-visible {
  outline: 2px solid #9fe0ff;
  outline-offset: -2px;
}
.p-link__banner:focus-visible::before {
  scale: 1 1;
}
@media (width < 480px) {
  .p-link__banner {
    gap: 10px 6px;
    padding: 12px;
  }
}

.p-link__no {
  grid-area: no;
  font-family: "Syncopate", sans-serif;
  font-size: 10px;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  color: #9fe0ff;
  transition: color 0.4s ease;
}

.p-link__arrow {
  grid-area: arrow;
  display: block;
  width: 12px;
  height: 12px;
  overflow: hidden;
  color: #f6f4ef;
}
.p-link__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.p-link__media {
  grid-area: media;
  display: block;
  justify-self: center;
  width: 100%;
  max-width: 280px;
  overflow: hidden;
  background: #0b4157;
}

.p-link__banner-img {
  display: block;
  width: 100%;
  height: auto;
  transition: scale 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.p-link__type {
  grid-area: type;
  font-family: "Syncopate", sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.2em;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.55);
  transition: color 0.4s ease;
}

@media (hover: hover) {
  .p-link__banner:hover::before {
    scale: 1 1;
  }
  .p-link__banner:hover .p-link__no {
    color: #fff;
  }
  .p-link__banner:hover .p-link__type {
    color: #9fe0ff;
  }
  .p-link__banner:hover .p-link__banner-img {
    scale: 1.04;
  }
  .p-link__banner:hover .p-link__arrow svg {
    animation: p-link-arrow 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
}
/* ---------- すぐ後のサブフッター ----------*/
.p-link + .sub-footer .sub-footer__inner {
  padding-top: clamp(88px, 10vw - 10px, 150px);
}
@media (width < 768px) {
  .p-link + .sub-footer .sub-footer__inner {
    padding-top: 62px;
  }
}

/* ---------- キーフレーム ---------- */
@keyframes p-link-arrow {
  0% {
    translate: 0 0;
  }
  45% {
    translate: 150% -150%;
  }
  46% {
    translate: -150% 150%;
  }
  100% {
    translate: 0 0;
  }
}
/* ---------- 動きを減らす設定のとき ---------- */
@media (prefers-reduced-motion: reduce) {
  .p-link__head,
  .p-link__list,
  .p-link__item,
  .p-link__banner::before,
  .p-link__banner-img {
    transition: none;
  }
  .is-motion .p-link__head:not(.is-in),
  .is-motion .p-link__item:not(.is-in) {
    opacity: 1;
    translate: none;
  }
  .is-motion .p-link__list:not(.is-in) {
    clip-path: inset(0);
  }
  .p-link__arrow svg {
    animation: none !important;
  }
}
/* =========================================================
    ブログの記事ページ（single-blog.php）
========================================================= */
.p-single {
  padding-block: calc(var(--header-h, 80px) + clamp(32px, 4vw, 64px)) clamp(80px, 9vw, 140px);
  overflow-x: clip;
  color: #003547;
}

.p-single__inner {
  position: relative;
}

.p-single__back {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(18px, 2vw, 28px);
  color: #003547;
  text-decoration: none;
}
@media (hover: hover) {
  .p-single__back:hover .p-single__back-arrow {
    border-color: #2A62A3;
    background: #2A62A3;
    color: #fff;
  }
  .p-single__back:hover .p-single__back-arrow svg {
    animation: p-single-arrow-back 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
}

.p-single__back-arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid rgba(0, 53, 71, 0.35);
  border-radius: 50%;
  background: #fff;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.p-single__back-arrow svg {
  width: 15px;
  height: 15px;
  transform: scaleX(-1);
}

.p-single__back-en {
  font-family: "Syncopate", sans-serif;
  font-size: 12px;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0081ad;
}

.p-single__back-ja {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.p-single__sheet {
  position: relative;
  z-index: 1;
  padding: clamp(28px, 5vw, 72px);
  background: #fff;
}
@media (width < 480px) {
  .p-single__sheet {
    padding: 28px 20px;
  }
}

.p-single__head {
  margin-bottom: clamp(28px, 3.4vw, 48px);
}

.p-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 18px;
}

.p-single__title {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(24px, 1rem + 1.6vw, 40px);
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: #003547;
}

.p-single .p-blog__main-swiper {
  position: relative;
  overflow: hidden;
  border: 0;
  background: #e4f2fa;
}
.p-single .p-blog__main-swiper img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.p-single .p-blog__main-swiper .swiper-button-prev {
  left: 16px;
}
.p-single .p-blog__main-swiper .swiper-button-next {
  right: 16px;
}

.p-single .p-blog__thumbs-swiper {
  margin-top: 10px;
  overflow: hidden;
}
.p-single .p-blog__thumbs-swiper .swiper-slide {
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.3s ease;
}
.p-single .p-blog__thumbs-swiper .swiper-slide-thumb-active {
  opacity: 1;
}
.p-single .p-blog__thumbs-swiper .swiper-slide-thumb-active img {
  outline: 2px solid #2A62A3;
  outline-offset: -2px;
}
.p-single .p-blog__thumbs-swiper img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}

.p-single__body {
  margin-top: clamp(32px, 4vw, 56px);
}
.p-single__body p {
  margin: 0 0 2em;
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(15px, 0.85rem + 0.25vw, 17px);
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: #22414e;
}
.p-single__body p:last-child {
  margin-bottom: 0;
}
.p-single__body h2,
.p-single__body h3 {
  margin: 2.2em 0 1em;
  padding-left: 18px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #003547;
  border-left: 4px solid #0081ad;
}
.p-single__body h2 {
  font-size: clamp(20px, 1.6vw, 24px);
}
.p-single__body h3 {
  font-size: clamp(17px, 1.3vw, 20px);
}
.p-single__body ul,
.p-single__body ol {
  margin: 0 0 2em;
  padding-left: 1.4em;
  line-height: 2;
  color: #22414e;
}
.p-single__body img {
  max-width: 100%;
  height: auto;
}
.p-single__body a {
  color: #0081ad;
  text-underline-offset: 3px;
}

.p-single__nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin-top: clamp(36px, 4vw, 56px);
}

.p-single__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  color: #003547;
  text-decoration: none;
}
.p-single__nav-link .text-en {
  font-family: "Syncopate", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.p-single__nav-link--next {
  justify-self: end;
}
.p-single__nav-link.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}
@media (hover: hover) {
  .p-single__nav-link:hover .p-single__nav-arrow {
    border-color: #2A62A3;
    background: #2A62A3;
    color: #fff;
  }
  .p-single__nav-link:hover .p-single__nav-arrow svg {
    animation: p-single-arrow 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .p-single__nav-link--prev:hover .p-single__nav-arrow svg {
    animation-name: p-single-arrow-back;
  }
}

.p-single__nav-arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid rgba(0, 53, 71, 0.35);
  border-radius: 50%;
  background: #fff;
  color: #003547;
  transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}
.p-single__nav-arrow svg {
  width: 18px;
  height: 18px;
}
.p-single__nav-link--prev .p-single__nav-arrow svg {
  transform: scaleX(-1);
}

.p-single__nav-list {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border: 1px solid #003547;
  border-radius: 999px;
  background: #fff;
  color: #003547;
  text-decoration: none;
  transition: background-color 0.4s ease, color 0.4s ease;
}
.p-single__nav-list .text-en {
  font-family: "Syncopate", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.p-single__nav-list:hover {
  background: #003547;
  color: #fff;
}
@media (width < 480px) {
  .p-single__nav-list {
    padding: 12px 14px;
  }
  .p-single__nav-list .text-en {
    display: none;
  }
}

.p-single__nav-dots {
  display: grid;
  grid-template-columns: repeat(2, 5px);
  gap: 4px;
}
.p-single__nav-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.p-single-related {
  padding-top: clamp(80px, 9vw, 140px);
}

@keyframes p-single-arrow {
  0% {
    translate: 0 0;
  }
  45% {
    translate: 180% 0;
  }
  46% {
    translate: -180% 0;
  }
  100% {
    translate: 0 0;
  }
}
@keyframes p-single-arrow-back {
  0% {
    translate: 0 0;
  }
  45% {
    translate: -180% 0;
  }
  46% {
    translate: 180% 0;
  }
  100% {
    translate: 0 0;
  }
}
.u-font__size--18 {
  font-size: 18px;
}

.u-font__size--20 {
  font-size: 20px;
}

.u-fz-21 {
  font-size: clamp(1rem, -0.116rem + 1.786vw, 1.313rem); /* min: 16px, max: 21px */
  font-weight: bold;
}

.u-fz-26 {
  font-size: clamp(1.1rem, -1.252rem + 4.216vw, 2.25rem);
  font-weight: bold;
}

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

.u-font__weight--medium {
  font-weight: 500;
}

.u-uppercase {
  text-transform: uppercase;
}

.u-capitalize {
  text-transform: capitalize;
}

.u-display-none {
  display: none;
}

.u-pc {
  display: block;
}

.u-tab,
.u-sp,
.u-block-tab {
  display: none;
}

@media (480px <= width) and (width < 768px) {
  .u-pc {
    display: none;
  }
  .u-tab {
    display: block;
  }
}
@media (width < 768px) {
  .u-block-tab {
    display: block;
  }
}
@media (width < 480px) {
  .u-pc,
  .u-tab {
    display: none;
  }
  .u-sp {
    display: block;
  }
}
.u-none-sp {
  display: block;
}
@media (width < 480px) {
  .u-none-sp {
    display: none;
  }
}

.u-none-1100 {
  display: block;
}
@media (width < 1100px) {
  .u-none-1100 {
    display: none;
  }
}

.u-only-570 {
  display: block;
}
@media (width < 570px) {
  .u-only-570 {
    display: none;
  }
}

.u-only-1059 {
  display: none;
}
@media (width < 1059px) {
  .u-only-1059 {
    display: block;
  }
}
@media (width < 1059px) and (width < 768px) {
  .u-only-1059 {
    display: none;
  }
}

.u-only-1120 {
  display: block;
}
@media (width < 1120px) {
  .u-only-1120 {
    display: none;
  }
}

.u-only-1140 {
  display: block;
}
@media (width < 1140px) {
  .u-only-1140 {
    display: none;
  }
}

.u-block-1100 {
  display: none;
}
@media (width < 1100px) {
  .u-block-1100 {
    display: block;
  }
}

.u-block-985 {
  display: none;
}
@media (width < 985px) {
  .u-block-985 {
    display: block;
  }
}

.u-block-904 {
  display: none;
}
@media (width < 904px) {
  .u-block-904 {
    display: block;
  }
}

.u-block-835 {
  display: none;
}
@media (width < 835px) {
  .u-block-835 {
    display: block;
  }
}

.u-block-673 {
  display: none;
}
@media (width < 673px) {
  .u-block-673 {
    display: block;
  }
}

.u-block-575 {
  display: none;
}
@media (width < 575px) {
  .u-block-575 {
    display: block;
  }
}

.u-block-490 {
  display: none;
}
@media (width < 490px) {
  .u-block-490 {
    display: block;
  }
}

.u-block-400 {
  display: none;
}
@media (width < 400px) {
  .u-block-400 {
    display: block;
  }
}

.u-block-350 {
  display: none;
}
@media (width < 400px) {
  .u-block-350 {
    display: block;
  }
}

/* ============================================================
    余白調整
============================================================ */
.u-marquees-margin {
  margin-top: min(15%, 217px);
}
@media (width < 768px) {
  .u-marquees-margin {
    margin-top: max(15%, 80px);
  }
}

/*# sourceMappingURL=style.css.map */