@charset "UTF-8";
/**
  foundations
  サイト全体のスタイル
**/
/**
  size breakpoint
**/
/* size pxをremが基準になったサイズに変換 */
/* size pxをemが基準になったサイズに変換 */
/* clampの出力 size pxをremが基準になったサイズに変換する $minusをtrueとする事でマイナスの値を指定します */
/**
  breakpoint
**/
/* pcのみ */
/* pc以外（tbサイズ含む） */
/* tbのみ */
/* sp以外（tbサイズ含む） */
/* spのみ */
/* 三点リーダー */
/* アニメーション */
@-webkit-keyframes mv-slide-in-car {
  0% {
    -webkit-transform: translateX(15%);
            transform: translateX(15%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes mv-slide-in-car {
  0% {
    -webkit-transform: translateX(15%);
            transform: translateX(15%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes mv-slide-in-truck {
  0% {
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes mv-slide-in-truck {
  0% {
    -webkit-transform: translateX(20%);
            transform: translateX(20%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes mv-text-rise {
  0% {
    -webkit-transform: translateY(24px);
            transform: translateY(24px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes mv-text-rise {
  0% {
    -webkit-transform: translateY(24px);
            transform: translateY(24px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
/*
 * 背景の透かし文字（Company・Work）用の点滅アニメーション
 * 0% → 30% → 10% → 60% → 30% → 100%（不透明度）を1秒で切り替える早いリズム
 * ベースの色が明るい（白背景で薄いグレー文字）用と、暗い（黒背景で白文字）用の2種類を用意
 */
@-webkit-keyframes bg-text-blink-light {
  0% {
    opacity: 0;
    color: #000;
  }
  20% {
    opacity: 0.3;
    color: #F2DF28;
  }
  40% {
    opacity: 0.1;
    color: #000;
  }
  60% {
    opacity: 0.6;
    color: #F2DF28;
  }
  80% {
    opacity: 0.3;
    color: #939393;
  }
  100% {
    opacity: 1;
    color: #F1F3F5;
  }
}
@keyframes bg-text-blink-light {
  0% {
    opacity: 0;
    color: #000;
  }
  20% {
    opacity: 0.3;
    color: #F2DF28;
  }
  40% {
    opacity: 0.1;
    color: #000;
  }
  60% {
    opacity: 0.6;
    color: #F2DF28;
  }
  80% {
    opacity: 0.3;
    color: #939393;
  }
  100% {
    opacity: 1;
    color: #F1F3F5;
  }
}
@-webkit-keyframes bg-text-blink-dark {
  0% {
    opacity: 0;
    color: #000;
  }
  20% {
    opacity: 0.3;
    color: #939393;
  }
  40% {
    opacity: 0.1;
    color: #000;
  }
  60% {
    opacity: 0.6;
    color: #939393;
  }
  80% {
    opacity: 0.3;
    color: #939393;
  }
  100% {
    opacity: 1;
    color: #fff;
  }
}
@keyframes bg-text-blink-dark {
  0% {
    opacity: 0;
    color: #000;
  }
  20% {
    opacity: 0.3;
    color: #939393;
  }
  40% {
    opacity: 0.1;
    color: #000;
  }
  60% {
    opacity: 0.6;
    color: #939393;
  }
  80% {
    opacity: 0.3;
    color: #939393;
  }
  100% {
    opacity: 1;
    color: #fff;
  }
}
/*
 * 背景の透かし文字：グレー背景（.bg-text--black）用。白背景用(-light)・黒背景用(-dark)の反対に、最終的に暗い文字色に落ち着く。
 * 100%の到達色は$black（#000）。カード背景（.is-brack：#191919）とは完全に同色ではないため、うっすら視認できる。
 */
@-webkit-keyframes bg-text-blink-black {
  0% {
    opacity: 0;
    color: #fff;
  }
  20% {
    opacity: 0.3;
    color: #F2DF28;
  }
  40% {
    opacity: 0.1;
    color: #fff;
  }
  60% {
    opacity: 0.6;
    color: #F2DF28;
  }
  80% {
    opacity: 0.3;
    color: #939393;
  }
  100% {
    opacity: 1;
    color: #000;
  }
}
@keyframes bg-text-blink-black {
  0% {
    opacity: 0;
    color: #fff;
  }
  20% {
    opacity: 0.3;
    color: #F2DF28;
  }
  40% {
    opacity: 0.1;
    color: #fff;
  }
  60% {
    opacity: 0.6;
    color: #F2DF28;
  }
  80% {
    opacity: 0.3;
    color: #939393;
  }
  100% {
    opacity: 1;
    color: #000;
  }
}
@-webkit-keyframes bg-text-blink-black-2 {
  0% {
    opacity: 0;
    color: #fff;
  }
  20% {
    opacity: 0.3;
    color: #F2DF28;
  }
  40% {
    opacity: 0.1;
    color: #fff;
  }
  60% {
    opacity: 0.6;
    color: #F2DF28;
  }
  80% {
    opacity: 0.3;
    color: #939393;
  }
  100% {
    opacity: 1;
    color: #191919;
  }
}
@keyframes bg-text-blink-black-2 {
  0% {
    opacity: 0;
    color: #fff;
  }
  20% {
    opacity: 0.3;
    color: #F2DF28;
  }
  40% {
    opacity: 0.1;
    color: #fff;
  }
  60% {
    opacity: 0.6;
    color: #F2DF28;
  }
  80% {
    opacity: 0.3;
    color: #939393;
  }
  100% {
    opacity: 1;
    color: #191919;
  }
}
@-webkit-keyframes service-img-slide-in-top {
  0% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes service-img-slide-in-top {
  0% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes service-img-slide-in-bottom {
  0% {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes service-img-slide-in-bottom {
  0% {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
:root {
  /* width */
  --header-h: 140px;
}
@media screen and (max-width: 910px) {
  :root {
    --top-header: 169px;
  }
}
:root {
  --font-size: 16px;
  --f-medium: 500;
  --f-regular: 400;
  --f-bold: 700;
  --f-black: 900;
  --lineHeight: 1.6;
  --border-radius: 10px;
  scroll-padding-top: calc(var(--header-h));
}

.inner, .inner--m, .inner--s {
  width: min(80rem, 100% - clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem));
  margin-inline: auto;
}
.inner--s {
  width: min(62.5rem, 100% - clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem));
  margin-inline: auto;
}
.inner--m {
  width: min(69.5625rem, 100% - clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem));
  margin-inline: auto;
}
.inner.is-left, .is-left.inner--s, .is-left.inner--m {
  margin-inline: 0 auto;
}
.inner.is-right, .is-right.inner--s, .is-right.inner--m {
  margin-inline: auto 0;
}
.inner--footer {
  padding-inline: clamp(0.9375rem, 0.7142857143rem + 0.5952380952vw, 1.25rem);
}
.inner--left-space {
  width: min(62.5rem + (100dvw - 62.5rem) / 2, 100% - clamp(0.9375rem, 0.2678571429rem + 1.7857142857vw, 1.875rem));
  -webkit-margin-start: auto;
          margin-inline-start: auto;
  overflow: hidden;
}
.inner--left-space .title-wrap {
  padding-right: clamp(0.9375rem, 0.2678571429rem + 1.7857142857vw, 1.875rem);
}
@media screen and (max-width: 767.9px) {
  .inner--left-space .title-wrap {
    width: calc(100svw - 15px);
  }
}
.inner--right-space {
  width: min(1200px + (100dvw - 1200px) / 2, 100% - clamp(0.9375rem, 0.2678571429rem + 1.7857142857vw, 1.875rem));
  -webkit-margin-end: auto;
          margin-inline-end: auto;
  overflow: hidden;
}
@media screen and (max-width: 999.9px) {
  .inner--right-space {
    width: 100%;
  }
}
.inner--right-space .title-wrap {
  padding-right: clamp(0.9375rem, 0.2678571429rem + 1.7857142857vw, 1.875rem);
}
@media screen and (max-width: 767.9px) {
  .inner--right-space .title-wrap {
    width: calc(100svw - 15px);
  }
}

.section-bg--top {
  padding-block: clamp(3.75rem, 3.75rem + 0vw, 3.75rem) clamp(3.125rem, 2.6785714286rem + 1.1904761905vw, 3.75rem);
}
.section-bg--top-news {
  padding-block: clamp(1.625rem, 1.625rem + 0vw, 1.625rem);
}
.section-bg--top-event {
  padding-block: clamp(3.75rem, 2.8571428571rem + 2.380952381vw, 5rem) clamp(4.375rem, 3.0357142857rem + 3.5714285714vw, 6.25rem);
  z-index: 0;
  position: relative;
  overflow: hidden;
}
.body-tokyo_climax .section-bg--top-event {
  border-bottom: 1px solid #fff;
}

.section-bg--top-event::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: url("../img/bg/top_event.jpg") no-repeat center/cover;
}
.body-tokyo_climax .section-bg--top-event::after {
  background: url("../img/special/special_event.jpg") no-repeat center/cover;
}

.section-bg--top-service {
  padding-block: clamp(0.9375rem, 0.9375rem + 0vw, 0.9375rem);
  position: relative;
  background-color: #000;
}
.section-bg--top-service .section-bg--inner-radius {
  padding-block: clamp(2.5rem, 2.0535714286rem + 1.1904761905vw, 3.125rem) clamp(2.5rem, -0.1785714286rem + 7.1428571429vw, 6.25rem);
  position: relative;
}
.section-bg--top-instagram {
  padding-block: clamp(2.5rem, 1.6071428571rem + 2.380952381vw, 3.75rem) clamp(2.5rem, 1.1607142857rem + 3.5714285714vw, 4.375rem);
  position: relative;
  background-color: #000;
}
.section-bg--inner-radius {
  width: calc(100% - clamp(1.875rem, 1.875rem + 0vw, 1.875rem));
  background-color: #fff;
  margin-inline: auto;
  border-radius: 5px;
  position: relative;
}
.section-bg--inner-radius.is-brack {
  background-color: #191919;
}
.section-bg--inner-radius--works {
  position: relative;
}
.section-bg--inner-radius--works::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 5px;
  z-index: -1;
  width: calc(100% - clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem));
  background-color: #F1F3F5;
  margin-inline: auto;
}
.section-bg--inner-radius .inner, .section-bg--inner-radius .inner--s, .section-bg--inner-radius .inner--m {
  z-index: 1;
  position: relative;
}
.section-bg--page {
  padding-block: clamp(2.5rem, 2.5rem + 0vw, 2.5rem) clamp(2.5rem, 1.1607142857rem + 3.5714285714vw, 4.375rem);
}
.section-bg--top-compnay {
  padding-block: 0 clamp(1.875rem, 1.875rem + 0vw, 1.875rem);
  position: relative;
}
.section-bg--top-compnay .section-bg--inner-radius {
  position: relative;
  padding-block: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem) clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem);
  /* ボタンの下の余白が広く見えていたため、SPのみ下側を詰める */
}
@media screen and (max-width: 767.9px) {
  .section-bg--top-compnay .section-bg--inner-radius {
    padding-bottom: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
  }
}
.section-bg--static {
  padding-block: clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem) clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem);
  overflow: hidden;
}
.section-bg--service {
  padding-block: 0;
}
.section-bg--recruit {
  padding-block: clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem) clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem);
}
.section-bg--info {
  padding-block: clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem) clamp(1.875rem, 1.875rem + 0vw, 1.875rem);
  overflow: hidden;
}
.section-bg--top--works {
  padding-block: clamp(1.875rem, 1.875rem + 0vw, 1.875rem);
}
.section-bg--recruit-contact {
  padding-block: clamp(2.5rem, 2.5rem + 0vw, 2.5rem);
}
.section-bg--contact {
  padding-block: clamp(2.5rem, 0.7142857143rem + 4.7619047619vw, 5rem) clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem);
  padding-inline: clamp(0.9375rem, -1.0714285714rem + 5.3571428571vw, 3.75rem);
  background-color: rgba(255, 255, 255, 0.07);
  position: relative;
}
.section-bg--contact::before, .section-bg--contact::after {
  content: "";
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.section-bg--contact::before {
  width: clamp(3.125rem, 2.6785714286rem + 1.1904761905vw, 3.75rem);
  aspect-ratio: 60/102;
  background-image: url("../img/texture/dot_only.svg");
  left: 0;
  top: 60%;
  translate: -95% 0;
  z-index: -1;
}
.section-bg--contact::after {
  width: clamp(10.625rem, 4.6875rem + 15.8333333333vw, 18.9375rem);
  aspect-ratio: 303/43;
  background-image: url("../img/texture/border_only.svg");
  right: 0;
  bottom: 10%;
  translate: 80% -50%;
}
@media screen and (max-width: 767.9px) {
  .section-bg--contact::after {
    translate: 101% -50%;
  }
}
.section-bg--contact::after {
  z-index: -1;
}
.section-bg--contact-bg {
  padding-block: clamp(3.75rem, -1.1607142857rem + 13.0952380952vw, 10.625rem) clamp(6.25rem, 1.7857142857rem + 11.9047619048vw, 12.5rem);
  position: relative;
  overflow: hidden;
}
.section-bg--archive {
  padding-block: clamp(2.5rem, 2.0535714286rem + 1.1904761905vw, 3.125rem) clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem);
}
.section-bg--single {
  padding-block: clamp(3.75rem, 3.75rem + 0vw, 3.75rem) clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem);
}
.section-bg.is-gray, .is-gray.section-bg--top, .is-gray.section-bg--top-news, .is-gray.section-bg--top-event, .is-gray.section-bg--top-service, .is-gray.section-bg--top-instagram, .is-gray.section-bg--inner-radius, .is-gray.section-bg--page, .is-gray.section-bg--top-compnay, .is-gray.section-bg--static, .is-gray.section-bg--service, .is-gray.section-bg--recruit, .is-gray.section-bg--info, .is-gray.section-bg--top--works, .is-gray.section-bg--recruit-contact, .is-gray.section-bg--contact, .is-gray.section-bg--contact-bg, .is-gray.section-bg--archive, .is-gray.section-bg--single {
  background-color: #F1F3F5;
}
.section-bg.is-white, .is-white.section-bg--top, .is-white.section-bg--top-news, .is-white.section-bg--top-event, .is-white.section-bg--top-service, .is-white.section-bg--top-instagram, .is-white.section-bg--inner-radius, .is-white.section-bg--page, .is-white.section-bg--top-compnay, .is-white.section-bg--static, .is-white.section-bg--service, .is-white.section-bg--recruit, .is-white.section-bg--info, .is-white.section-bg--top--works, .is-white.section-bg--recruit-contact, .is-white.section-bg--contact, .is-white.section-bg--contact-bg, .is-white.section-bg--archive, .is-white.section-bg--single {
  background-color: #fff;
}

.contents-inner {
  display: -ms-grid;
  display: grid;
  gap: clamp(2.5rem, 2.5rem + 0vw, 2.5rem);
}

/*
  acab/reset.css v.0.5.3(2022/10/24)
  https://github.com/mayank99/reset.css/blob/main/package/index.css
**/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

:where([hidden]:not([hidden=until-found])) {
  display: none !important;
  /* hiddenは非表示を意味します */
}

:where(html) {
  -webkit-text-size-adjust: none;
  /* iOSのランドスケープでテキストが調整されないようにする */
  /* ユーザーがダークテーマを好む場合、自動的にダークテーマになる */
}

@supports not (min-block-size: 100dvb) {
  :where(html) {
    block-size: 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth;
    /* 何かにフォーカスがある場合のみスムーズスクロール */
  }
}
:where(body) {
  block-size: 100%;
  /* サファリ以外のブラウザのフォールバック */
  block-size: 100dvb;
  /* 1dvbは動的ビューポートの長さの1%、100dvbで高さいっぱいに */
  /* アクセシブルな行の高さ */
  /* timeの代わりにシステムフォントを使用 */
  -webkit-font-smoothing: antialiased;
  /* テキストのレンダリングを改善 */
}

:where(input, button, textarea, select) {
  font: inherit;
  /* フォーム コントロールは親フォントを継承 */
  color: inherit;
  /* カラーも継承 */
}

:where(textarea) {
  resize: vertical;
  /* テキストエリアの水平リサイズを無効に */
  resize: block;
  white-space: revert;
}

:where(button, label, select, summary, [role=button], [role=option]) {
  cursor: pointer;
  /* インタラクティブなものにカーソルを合わせる */
}

:where(:disabled) {
  cursor: not-allowed;
  /* フォームコントロール無効時のカーソルを許可しない */
}

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed;
  /* ラベルにもカーソルを許可しない */
}

:where(button) {
  border-style: solid;
  /* ボタンのボーダーのスタイルを設定しやすくする */
}

:where(a) {
  text-underline-offset: 0.2em;
  /* 下線の上にスペースを追加する */
  color: inherit;
  text-decoration: none;
}

:where(a, button) {
  cursor: pointer;
}

:where(ul, ol) {
  list-style: none;
  /* ビュレットを削除、必要に応じて手動で追加する */
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
  /* 置換された要素をより予測可能にする */
}

:where(img, picture, svg) {
  max-inline-size: 100%;
  /* images should never overflow past the available space */
  block-size: auto;
  /* アスペクト比を保持 */
  max-width: 100%;
  vertical-align: bottom;
}

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word;
  font-weight: normal;
  /* 長い単語は改行 */
}

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
  /* 見出しの行の高さを減らす */
}

:where(hr) {
  /* より一貫性のある、スタイリッシュなhr */
  border: none;
  -webkit-border-before: 1px solid;
          border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible;
}

:where(:focus-visible) {
  /* より一貫性のある、カスタマイズ可能なフォーカスのアウトライン */
  outline: 2px solid var(--focus-color, Highlight);
  outline-offset: 2px;
}

/* .visually-hiddenは後のカスケードレイヤーを上書きするために!importantを使用 */
:where(.visually-hidden:not(:focus, :active, :focus-within, .not-visually-hidden)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
}

:where(caption),
:where(th) {
  text-align: left;
}

:where(dl, figure, h1, h2, h3, h4, h5, h6, ol, p, ul) {
  margin: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
  line-height: 1.3;
}

:where(a)[href=""] {
  pointer-events: none;
  text-decoration: none;
}

:where(dd) {
  margin-left: 0;
}

:where(table) {
  border-collapse: collapse;
  border-spacing: 0;
}

.splide__slide {
  position: relative;
  height: auto;
}

:where(*, *::before, *::after) {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  font-family: inherit;
  line-height: 1.5;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

:where(figure) {
  display: -ms-grid;
  display: grid;
  vertical-align: middle;
}

::-moz-selection {
  background-color: rgba(82, 97, 105, 0.3);
}

::selection {
  background-color: rgba(82, 97, 105, 0.3);
}

html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  font-size: clamp(1rem, 0.7857142857rem + 0.2857142857vw, 1.25rem);
  /*
   * メニュー開閉でoverflowがauto⇔hiddenに切り替わる際、スクロールバーの有無で
   * 表示幅が変わり要素がガタつくため、スクロールバー分の余白を常に確保して固定する
   */
  scrollbar-gutter: stable;
}
html.is-menu-open {
  overflow: hidden;
}

:where(a) {
  text-decoration: none;
}

:where([class*=__text]), p {
  line-height: 1.8;
}

body {
  --footer-h: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: relative;
  font-family: "Noto Sans JP", "Noto Sans", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif, sans-serif;
  font-weight: var(--f-regular);
  font-style: normal;
  font-size: clamp(1rem, 1rem + 0vw, 1rem);
  color: #000;
  line-height: var(--lineHeight);
  letter-spacing: 0.1em;
  word-break: break-word;
  overflow-wrap: break-word;
}
body:has(.section-bg--contact-bg) .body-bgtexture::before {
  content: "";
  aspect-ratio: 1440/2521;
  background-image: url(../img/bg/bg_contact.jpg);
  background-repeat: repeat-y;
  z-index: -1;
  height: 100%;
}
body:has(.section-bg--contact-bg) .body-bgtexture::after {
  width: clamp(8.75rem, 3.1696428571rem + 14.880952381vw, 16.5625rem);
  aspect-ratio: 265/227;
  right: 0;
  left: auto;
  top: var(--header-h);
  bottom: auto;
  z-index: 0;
  background-size: contain;
  background-image: url(../img/texture/line_2.svg);
}
body:has(.section-bg--static) .body-bgtexture::before {
  content: "";
  aspect-ratio: 1440/13954;
  background-image: url(../img/bg/bg_info_top.jpg);
  background-repeat: repeat-y;
  z-index: -1;
}
body:has(.section-bg--static) .body-bgtexture::after {
  aspect-ratio: 2160/2249;
  background-image: url("../img/bg/bg_texture1_bottom.jpg");
  z-index: -2;
}
body:has(.section-bg--info) .body-bgtexture::before {
  content: "";
  aspect-ratio: 1440/13954;
  background-image: url(../img/bg/bg_info_top.jpg);
  background-repeat: repeat-y;
  z-index: -1;
}
body:has(.section-bg--info) .body-bgtexture::after {
  aspect-ratio: 2160/2249;
  background-image: url("../img/bg/bg_texture1_bottom.jpg");
  z-index: -2;
}
body:has(.section-bg--single) .body-bgtexture::before {
  content: "";
  aspect-ratio: 1440/467;
  background-image: url("../img/bg/bg_texture1_top.jpg");
  z-index: -1;
}
body:has(.section-bg--single) .body-bgtexture::after {
  aspect-ratio: 2160/2249;
  background-image: url("../img/bg/bg_texture1_bottom.jpg");
  z-index: -2;
}
body:has(.section-bg--recruit) .body-bgtexture::before {
  content: "";
  aspect-ratio: 1440/3551;
  background-image: url("../img/bg/bg_recruit.jpg");
}
body:has(.section-bg--recruit) .body-bgtexture::after {
  content: none;
}
body:has(.section-bg--archive) .body-bgtexture::before {
  content: "";
  aspect-ratio: 1440/467;
  background-image: url("../img/bg/bg_texture1_top.jpg");
  z-index: 0;
}
body:has(.section-bg--archive) .body-bgtexture::after {
  aspect-ratio: 2160/2249;
  background-image: url("../img/bg/bg_texture1_bottom.jpg");
  z-index: -1;
}

.body-bgtexture {
  overflow: hidden;
  z-index: 0;
  position: relative;
  position: absolute;
  inset: 0 0 0 0;
  z-index: -1;
  pointer-events: none;
}
.body-bgtexture::before, .body-bgtexture::after {
  content: "";
  position: absolute;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (min-width: 909.9px) {
  .body-bgtexture::before {
    top: var(--header-h);
  }
}
@media screen and (max-width: 910px) {
  .body-bgtexture::before {
    top: 0;
  }
}
.body-bgtexture::before {
  left: 0;
  z-index: -1;
}
.body-bgtexture::after {
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
}

main {
  position: relative;
}

.main-wrap {
  position: relative;
}

/* パーツのスタイル */
/*
 * 共通パーツ：投稿本文（the_content()）のWYSIWYG装飾。
 * 管理画面でh2/h3/テーブルを使うだけで、サイトの既存デザイン（見出し・スペック表）と揃った見た目になるようにする。
 * マークアップ：<div class="article">（the_content()をそのまま出力する）
 *
 * - h2：トップページ「企業情報」セクションの見出しと同じ大きさ・ウェイト
 * - h3：ドット付きの小見出し（.titleコンポーネントの.title__mainと同じ考え方）
 * - table：会社概要・募集要項で使っているスペック表（.spec-table--panel）と同じ配色（1列目＝黄色ラベル、2列目＝グレー値）
 *
 * 以前は:where()でセレクタを組んでいたが、他のCSS（wp-block-library等）に上書きされて
 * h3のドット等が反映されないことがあったため、通常の詳細度を持つセレクタに変更している。
 */
.article {
  display: -ms-grid;
  display: grid;
  gap: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
}
.article > * {
  min-width: 0;
}
.article h1 {
  margin: 0;
  color: #000;
  font-size: clamp(1.5rem, 0.875rem + 1.6666666667vw, 2.375rem);
  font-weight: var(--f-bold);
  line-height: 1.3;
}
.article {
  /* トップページ「企業情報」の見出し（.company__heading）と揃える */
}
.article h2 {
  margin: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem) 0 0;
  color: #000;
  font-size: clamp(1.5rem, 0.6964285714rem + 2.1428571429vw, 2.625rem);
  font-weight: var(--f-black);
  line-height: 1.69;
  letter-spacing: 0.1em;
}
.article h2:first-child {
  margin-top: 0;
}
.article {
  /* 黄色いドット付きの小見出し（.title__mainと同じ考え方） */
}
.article h3 {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: clamp(1.5rem, 1.2321428571rem + 0.7142857143vw, 1.875rem) 0 0;
  padding-left: 0.8em;
  color: #000;
  font-size: clamp(1rem, 0.9107142857rem + 0.2380952381vw, 1.125rem);
  font-weight: var(--f-bold);
  letter-spacing: 0.05em;
}
.article h3::before {
  content: "";
  position: absolute;
  width: 9px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #F2DF28;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
.article h3:first-child {
  margin-top: 0;
}
.article h4 {
  position: relative;
  margin: clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem) 0 0;
  padding-left: 1em;
  color: #000;
  font-weight: var(--f-medium);
}
.article h4::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  width: 5px;
  height: 1em;
  background-color: #F2DF28;
}
.article p {
  margin: 0;
  color: #000;
  line-height: 1.9;
}
.article a {
  color: #F2DF28;
}
@media (hover: hover) {
  .article a:hover {
    text-decoration: underline;
  }
}
.article strong {
  font-weight: var(--f-bold);
}
.article ul {
  display: -ms-grid;
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article ul li {
  position: relative;
  padding-left: 1.2em;
  color: #000;
  line-height: 1.8;
}
.article ul li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 6px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #000;
}
.article ol {
  display: -ms-grid;
  display: grid;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: article-ol;
}
.article ol li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.4em;
  color: #000;
  line-height: 1.8;
  counter-increment: article-ol;
}
.article ol li::before {
  content: counter(article-ol) ".";
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-weight: var(--f-bold);
}
.article img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
}
.article blockquote {
  margin: 0;
  padding-left: 1em;
  border-left: 3px solid #F2DF28;
  color: #939393;
}
.article {
  /*
   * .spec-table--panelと同じ配色（1列目＝黄色ラベル、2列目＝グレー値）。
   * tr/tdのdisplayをgridに置き換えて2カラムのグリッドとして扱う。
   */
}
.article table {
  width: 100%;
  margin: clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem) 0 0;
  border-collapse: collapse;
  border-radius: 0.25rem;
  overflow: hidden;
}
.article table tr {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 11.25rem 1fr;
  grid-template-columns: 11.25rem 1fr;
  border-bottom: 1px solid #fff;
}
@media screen and (max-width: 767.9px) {
  .article table tr {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.article table tr:last-child {
  border-bottom: none;
}
.article table td {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 60px;
  padding: clamp(0.75rem, 0.5714285714rem + 0.4761904762vw, 1rem) clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  font-weight: var(--f-regular);
  line-height: 1.7;
  border: none;
}
.article table td:first-child {
  background-color: #F2DF28;
  font-weight: var(--f-bold);
}
.article table td:nth-child(2) {
  background-color: #F1F3F5;
}

.wp-block-button__link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: #fff;
  background-color: #000;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .wp-block-button__link:hover {
    opacity: 0.8;
  }
}

.breadcrumbs {
  --gap: 2.125rem;
  margin-block: 0.625rem;
}
.breadcrumbs-wrap {
  position: absolute;
  top: 0;
  z-index: 1;
  padding-inline: clamp(0.9375rem, 0.2678571429rem + 1.7857142857vw, 1.875rem);
  width: 100%;
}
@media screen and (max-width: 767.9px) {
  .breadcrumbs-wrap {
    overflow-x: scroll;
  }
}
.breadcrumbs-wrap::-webkit-scrollbar {
  display: none;
}
.breadcrumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--gap);
}
@media screen and (max-width: 767.9px) {
  .breadcrumbs {
    white-space: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}
.breadcrumbs__li {
  line-height: 1;
}
.breadcrumbs__li:not(:last-child) {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
.breadcrumbs__li:not(:nth-child(1)) {
  position: relative;
  line-height: 0.6;
}
.breadcrumbs__li:not(:nth-child(1))::before {
  content: ">";
  position: absolute;
  top: 52%;
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
  color: #fff;
  left: 0;
  translate: calc((var(--gap) / 2 + 50%) * -1) -50%;
}
.breadcrumbs__current {
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
  line-height: 1.6;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  top: 2px;
}
.breadcrumbs__link {
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  -webkit-transition: color 1s ease;
  transition: color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .breadcrumbs__link:hover {
    color: #526169;
  }
}

.button {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.button.is-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
.button.is-block .button__item {
  width: 100%;
}
.button {
  /*
   * テキストのみセンターに寄せるバージョン（既定は左寄せ：テキストが左端、アイコンが右端に離れる）。
   * アイコンは右端に固定したいため、テキストのみを見た目上センタリングし、アイコンはabsoluteで右端に据え置く。
   */
}
.button.is-center .button__item {
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-inline: clamp(1.5rem, 1.3214285714rem + 0.4761904762vw, 1.75rem);
}
.button.is-center .button__icon {
  position: absolute;
  right: clamp(1.5rem, 1.3214285714rem + 0.4761904762vw, 1.75rem);
  top: 50%;
  translate: 0 -50%;
}
.button {
  /*
   * 大きいサイズのCTAボタン（募集要項の「エントリーする」等）。テキストは中央寄せ、アイコンは.is-centerと同じくabsoluteで右端固定。
   * 幅525px・高さ80pxが最大サイズ。文字量が少ない時は幅は縮んでよいのでmax-widthで指定し、
   * テキストにはアイコン分の余白を確保して衝突を防ぐ。
   */
}
.button.is-large .button__item {
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: min(32.8125rem, 525px);
  max-width: 100%;
  min-height: min(5rem, 80px);
  padding-inline: clamp(2.5rem, 1.6071428571rem + 2.380952381vw, 3.75rem);
  font-size: 20px;
  font-weight: var(--f-bold);
}
.button.is-large .button__text {
  padding-inline: 3.75rem;
}
.button.is-large {
  /* svg-circle-arrow-right()をそのまま拡大すると矢印が太く崩れて見えるため、大きいボタン専用の線画アイコン（svg-circle-arrow-right-lg）に差し替える */
}
.button.is-large .button__icon {
  position: absolute;
  right: 0.9375rem;
  top: 50%;
  translate: 0 -50%;
  width: 3.125rem;
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="25" fill="%23fff"/><path d="M18 25H32" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M25 18L32 25L25 32" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.button.is-large {
  /* hover時も丸背景+黒矢印の反転（.button__item:hoverと同じ配色）のまま、線画アイコンの形は保つ */
}
@media (hover: hover) {
  .button.is-large .button__item:hover .button__icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="25" fill="%23000"/><path d="M18 25H32" stroke="%23F2DF28" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M25 18L32 25L25 32" stroke="%23F2DF28" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  }
}
.button.is-large {
  /* min-width:525px固定のままだとSPで画面からはみ出るため、幅いっぱいに収まるようにする */
}
@media screen and (max-width: 767.9px) {
  .button.is-large {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }
  .button.is-large .button__item {
    width: 100%;
    min-width: 0;
    min-height: 4rem;
    padding-inline: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
    font-size: 16px;
  }
  .button.is-large .button__text {
    padding-inline: 0;
  }
  .button.is-large .button__icon {
    right: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
    width: 2.25rem;
  }
}
.button__item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: clamp(0.375rem, 0.375rem + 0vw, 0.375rem) clamp(0.875rem, 0.875rem + 0vw, 0.875rem) clamp(0.375rem, 0.375rem + 0vw, 0.375rem) clamp(1.5rem, 1.3214285714rem + 0.4761904762vw, 1.75rem);
  border-radius: 9999px;
  background-color: #000;
  color: #fff;
  min-width: 170px;
  min-height: 45px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  font-weight: var(--f-bold);
  font-size: 14px;
  -webkit-transition: background-color, color 1s ease;
  transition: background-color, color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .button__item:hover {
    background-color: #F2DF28;
    color: #000;
  }
  .button__item:hover .button__icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="%23000"/><path d="M5.6665 9.5C5.39036 9.5 5.1665 9.72386 5.1665 10C5.1665 10.2761 5.39036 10.5 5.6665 10.5L5.6665 10L5.6665 9.5ZM14.0201 10.3536C14.2153 10.1583 14.2153 9.84171 14.0201 9.64645L10.8381 6.46447C10.6428 6.2692 10.3262 6.2692 10.131 6.46447C9.93571 6.65973 9.93571 6.97631 10.131 7.17157L12.9594 10L10.131 12.8284C9.93571 13.0237 9.93571 13.3403 10.131 13.5355C10.3262 13.7308 10.6428 13.7308 10.8381 13.5355L14.0201 10.3536ZM5.6665 10L5.6665 10.5L13.6665 10.5L13.6665 10L13.6665 9.5L5.6665 9.5L5.6665 10Z" fill="%23F2DF28"/></svg>');
  }
}
.button {
  /* 円背景付きの1枚絵アイコン（svg.scss：svg-circle-arrow-right）。ボタン内のアイコンは20px固定 */
}
.button__icon {
  width: 1.25rem;
  aspect-ratio: 1/1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background: url('data:image/svg+xml;charset=utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="%23fff"/><path d="M5.6665 9.5C5.39036 9.5 5.1665 9.72386 5.1665 10C5.1665 10.2761 5.39036 10.5 5.6665 10.5L5.6665 10L5.6665 9.5ZM14.0201 10.3536C14.2153 10.1583 14.2153 9.84171 14.0201 9.64645L10.8381 6.46447C10.6428 6.2692 10.3262 6.2692 10.131 6.46447C9.93571 6.65973 9.93571 6.97631 10.131 7.17157L12.9594 10L10.131 12.8284C9.93571 13.0237 9.93571 13.3403 10.131 13.5355C10.3262 13.7308 10.6428 13.7308 10.8381 13.5355L14.0201 10.3536ZM5.6665 10L5.6665 10.5L13.6665 10.5L13.6665 10L13.6665 9.5L5.6665 9.5L5.6665 10Z" fill="%23000"/></svg>') no-repeat center/contain;
}
.button {
  /*
   * 一覧・前のページに戻るボタン：矢印を左向きにし、アイコンは左端に固定（.is-centerと同じ考え方でabsolute配置）。
   * テキストはアイコンの領域を無視して、ボタン全体の中央に配置する。
   */
}
.button.is-prev .button__item {
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-inline: clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem);
}
.button.is-prev .button__icon {
  position: absolute;
  left: clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem);
  top: 50%;
  translate: 0 -50%;
  scale: -1 1;
}
.button {
  /* 外部サービス（Instagram等）へのリンク用アイコン。通常の矢印から外部リンクアイコンに差し替える */
}
.button.is-external .button__icon {
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="%23fff"/><path d="M6.48116 12.4765C6.2859 12.6718 6.2859 12.9884 6.48116 13.1836C6.67643 13.3789 6.99301 13.3789 7.18827 13.1836L6.83472 12.8301L6.48116 12.4765ZM12.9916 7.17322C12.9916 6.89708 12.7677 6.67322 12.4916 6.67322L7.99157 6.67322C7.71543 6.67322 7.49157 6.89708 7.49157 7.17322C7.49157 7.44937 7.71543 7.67322 7.99157 7.67322L11.9916 7.67322L11.9916 11.6732C11.9916 11.9494 12.2154 12.1732 12.4916 12.1732C12.7677 12.1732 12.9916 11.9494 12.9916 11.6732L12.9916 7.17322ZM6.83472 12.8301L7.18827 13.1836L12.8451 7.52678L12.4916 7.17322L12.138 6.81967L6.48116 12.4765L6.83472 12.8301Z" fill="%23000"/></svg>');
}
.button.is-external .button__item:hover .button__icon {
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="%23000"/><path d="M6.48116 12.4765C6.2859 12.6718 6.2859 12.9884 6.48116 13.1836C6.67643 13.3789 6.99301 13.3789 7.18827 13.1836L6.83472 12.8301L6.48116 12.4765ZM12.9916 7.17322C12.9916 6.89708 12.7677 6.67322 12.4916 6.67322L7.99157 6.67322C7.71543 6.67322 7.49157 6.89708 7.49157 7.17322C7.49157 7.44937 7.71543 7.67322 7.99157 7.67322L11.9916 7.67322L11.9916 11.6732C11.9916 11.9494 12.2154 12.1732 12.4916 12.1732C12.7677 12.1732 12.9916 11.9494 12.9916 11.6732L12.9916 7.17322ZM6.83472 12.8301L7.18827 13.1836L12.8451 7.52678L12.4916 7.17322L12.138 6.81967L6.48116 12.4765L6.83472 12.8301Z" fill="%23F2DF28"/></svg>');
}

.link-arrow-wrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  /* 暗い背景で使う場合：テキスト・下線・アイコンをまとめて白にする（custom_link()の第3引数に' is-white'を渡す） */
}
.link-arrow-wrap.is-white .link-arrow {
  color: #fff;
}
.link-arrow-wrap.is-white .link-arrow .link-arrow__icon {
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="17" height="8" viewBox="0 0 17 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.3536 4.0352C16.5488 3.83993 16.5488 3.52335 16.3536 3.32809L13.1716 0.146108C12.9763 -0.0491543 12.6597 -0.0491544 12.4645 0.146108C12.2692 0.34137 12.2692 0.657952 12.4645 0.853215L15.2929 3.68164L12.4645 6.51007C12.2692 6.70533 12.2692 7.02191 12.4645 7.21718C12.6597 7.41244 12.9763 7.41244 13.1716 7.21718L16.3536 4.0352ZM0 3.68164L-4.37114e-08 4.18164L16 4.18164L16 3.68164L16 3.18164L4.37114e-08 3.18164L0 3.68164Z" fill="%23fff"/></svg>');
}
.link-arrow-wrap {
  /* 前のページに戻るリンク：アイコンをテキストの左に置き、矢印も左向きにする（custom_link()の第3引数に' is-prev'を渡す） */
}
.link-arrow-wrap.is-prev .link-arrow {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.link-arrow-wrap.is-prev .link-arrow .link-arrow__icon {
  scale: -1 1;
}
@media (hover: hover) {
  .link-arrow-wrap.is-prev .link-arrow:hover .link-arrow__icon {
    translate: -0.25rem 0;
  }
}

/*
 * 共通パーツ：テキスト＋長い矢印アイコンの「もっと見る」系リンク。
 * hoverでテキスト下の線が透明になり、アイコンが少し右へ動く（Instagramの「投稿をもっと見る」がこの標準形）。
 * custom_link()が出力する.link-arrow-wrap > .link-arrowのほか、
 * service-cards等でマークアップに直接.link-arrowクラスを付けて使う場合も同じ見た目になる。
 * マークアップ：<a class="link-arrow"><span class="link-arrow__text">…</span><span class="link-arrow__icon"></span></a>
 */
.link-arrow {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.375rem, 0.375rem + 0vw, 0.375rem);
  color: #000;
  font-size: 1rem;
  font-weight: var(--f-regular);
  line-height: normal;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}
@media (hover: hover) {
  .link-arrow:hover .link-arrow__text::after {
    opacity: 0;
  }
  .link-arrow:hover .link-arrow__icon {
    translate: 0.25rem 0;
  }
}
.link-arrow {
  /* テキスト下の線。currentColorで文字色（既定は黒、.is-white/カード反転時は白）に追従する */
}
.link-arrow__text {
  position: relative;
}
.link-arrow__text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.link-arrow {
  /* 長い矢印アイコン（線+矢じるし）。svg.scssの関数はcurrentColorに追従しないため、色を変える場合はbackground-imageごと差し替える */
}
.link-arrow__icon {
  width: 1.0625rem;
  aspect-ratio: 17/8;
  background: url('data:image/svg+xml;charset=utf8,<svg width="17" height="8" viewBox="0 0 17 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.3536 4.0352C16.5488 3.83993 16.5488 3.52335 16.3536 3.32809L13.1716 0.146108C12.9763 -0.0491543 12.6597 -0.0491544 12.4645 0.146108C12.2692 0.34137 12.2692 0.657952 12.4645 0.853215L15.2929 3.68164L12.4645 6.51007C12.2692 6.70533 12.2692 7.02191 12.4645 7.21718C12.6597 7.41244 12.9763 7.41244 13.1716 7.21718L16.3536 4.0352ZM0 3.68164L-4.37114e-08 4.18164L16 4.18164L16 3.68164L16 3.18164L4.37114e-08 3.18164L0 3.68164Z" fill="%23000"/></svg>') no-repeat center/contain;
  -webkit-transition: translate 0.3s;
  transition: translate 0.3s;
}
.link-arrow {
  /* 外部サイトへのリンク：丸背景付きの外部リンクアイコンに差し替える（下線フェード・アイコンシフトは行わない） */
}
.link-arrow.is-external .link-arrow__icon {
  width: 2.5rem;
  aspect-ratio: 1/1;
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="%23fff"/><path d="M6.48116 12.4765C6.2859 12.6718 6.2859 12.9884 6.48116 13.1836C6.67643 13.3789 6.99301 13.3789 7.18827 13.1836L6.83472 12.8301L6.48116 12.4765ZM12.9916 7.17322C12.9916 6.89708 12.7677 6.67322 12.4916 6.67322L7.99157 6.67322C7.71543 6.67322 7.49157 6.89708 7.49157 7.17322C7.49157 7.44937 7.71543 7.67322 7.99157 7.67322L11.9916 7.67322L11.9916 11.6732C11.9916 11.9494 12.2154 12.1732 12.4916 12.1732C12.7677 12.1732 12.9916 11.9494 12.9916 11.6732L12.9916 7.17322ZM6.83472 12.8301L7.18827 13.1836L12.8451 7.52678L12.4916 7.17322L12.138 6.81967L6.48116 12.4765L6.83472 12.8301Z" fill="%23000"/></svg>');
}
.link-arrow.is-external:hover .link-arrow__icon {
  translate: 0;
}

/*
 * 共通パーツ：テキスト＋丸フチ矢印アイコンの「View More」「ALL」系リンク（.link-arrowとは別デザイン：下線なし・アイコンは円のふち＋矢じるし）。
 * 白背景に置く場合は既定（黒文字・黒アイコン）、黒背景に置く場合は.is-whiteを付けて白文字・白アイコンにする。
 * 外部リンクは.is-externalを付けると、アイコンが横矢印から斜め矢印（外部リンク用）に差し替わる（.is-whiteとの組み合わせも可）。
 * マークアップ：<a class="circle-more"><span class="circle-more__text">…</span><span class="circle-more__icon"></span></a>
 */
.circle-more {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.625rem, 0.5357142857rem + 0.2380952381vw, 0.75rem);
  color: #000;
  -webkit-transition: color 1s ease;
  transition: color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.circle-more__text {
  font-size: clamp(0.8125rem, 0.6785714286rem + 0.3571428571vw, 1rem);
  font-weight: var(--f-regular);
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}
.circle-more {
  /*
   * 円のふちだけ（塗りなし）+ 矢じるしの1枚絵アイコン。svg.scssの関数はcurrentColorに追従しないため、色を変える場合はbackground-imageごと差し替える。
   * remだと画面幅によって端数が生じ、円の輪郭が欠けて見えることがあるため固定pxにする
   */
}
.circle-more__icon {
  width: 40px;
  aspect-ratio: 1/1;
  background: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23000"/><path d="M27.6869 20.3536C27.8822 20.1583 27.8822 19.8417 27.6869 19.6464L24.5049 16.4645C24.3097 16.2692 23.9931 16.2692 23.7978 16.4645C23.6026 16.6597 23.6026 16.9763 23.7978 17.1716L26.6263 20L23.7978 22.8284C23.6026 23.0237 23.6026 23.3403 23.7978 23.5355C23.9931 23.7308 24.3097 23.7308 24.5049 23.5355L27.6869 20.3536ZM11.3334 20L11.3334 20.5L27.3334 20.5L27.3334 20L27.3334 19.5L11.3334 19.5L11.3334 20Z" fill="%23000"/></svg>') no-repeat center/contain;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.circle-more {
  /* 黒背景に置く場合：文字・アイコンをまとめて白にする */
}
.circle-more.is-white {
  color: #fff;
}
.circle-more.is-white .circle-more__icon {
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23fff"/><path d="M27.6869 20.3536C27.8822 20.1583 27.8822 19.8417 27.6869 19.6464L24.5049 16.4645C24.3097 16.2692 23.9931 16.2692 23.7978 16.4645C23.6026 16.6597 23.6026 16.9763 23.7978 17.1716L26.6263 20L23.7978 22.8284C23.6026 23.0237 23.6026 23.3403 23.7978 23.5355C23.9931 23.7308 24.3097 23.7308 24.5049 23.5355L27.6869 20.3536ZM11.3334 20L11.3334 20.5L27.3334 20.5L27.3334 20L27.3334 19.5L11.3334 19.5L11.3334 20Z" fill="%23fff"/></svg>');
}
.circle-more {
  /* 外部サイトへのリンク：アイコンを斜め矢印（円のふちは維持）に差し替える */
}
.circle-more.is-external .circle-more__icon {
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23000"/><path d="M25.4868 14.3445C25.4868 14.0684 25.2629 13.8445 24.9868 13.8445L20.4868 13.8445C20.2107 13.8445 19.9868 14.0684 19.9868 14.3445C19.9868 14.6206 20.2107 14.8445 20.4868 14.8445L24.4868 14.8445L24.4868 18.8445C24.4868 19.1206 24.7107 19.3445 24.9868 19.3445C25.2629 19.3445 25.4868 19.1206 25.4868 18.8445L25.4868 14.3445ZM13.6731 25.6582L14.0266 26.0118L25.3404 14.698L24.9868 14.3445L24.6333 13.9909L13.3195 25.3046L13.6731 25.6582Z" fill="%23000"/></svg>');
}
.circle-more.is-external.is-white .circle-more__icon {
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23fff"/><path d="M25.4868 14.3445C25.4868 14.0684 25.2629 13.8445 24.9868 13.8445L20.4868 13.8445C20.2107 13.8445 19.9868 14.0684 19.9868 14.3445C19.9868 14.6206 20.2107 14.8445 20.4868 14.8445L24.4868 14.8445L24.4868 18.8445C24.4868 19.1206 24.7107 19.3445 24.9868 19.3445C25.2629 19.3445 25.4868 19.1206 25.4868 18.8445L25.4868 14.3445ZM13.6731 25.6582L14.0266 26.0118L25.3404 14.698L24.9868 14.3445L24.6333 13.9909L13.3195 25.3046L13.6731 25.6582Z" fill="%23fff"/></svg>');
}
@media (hover: hover) {
  .circle-more:hover {
    color: #F2DF28;
  }
  .circle-more:hover .circle-more__icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23F2DF28"/><path d="M27.6869 20.3536C27.8822 20.1583 27.8822 19.8417 27.6869 19.6464L24.5049 16.4645C24.3097 16.2692 23.9931 16.2692 23.7978 16.4645C23.6026 16.6597 23.6026 16.9763 23.7978 17.1716L26.6263 20L23.7978 22.8284C23.6026 23.0237 23.6026 23.3403 23.7978 23.5355C23.9931 23.7308 24.3097 23.7308 24.5049 23.5355L27.6869 20.3536ZM11.3334 20L11.3334 20.5L27.3334 20.5L27.3334 20L27.3334 19.5L11.3334 19.5L11.3334 20Z" fill="%23F2DF28"/></svg>');
  }
}
.circle-more {
  /* 外部リンク（.is-external）はhoverしても矢印の形を斜め矢印のまま保ち、色だけメインカラーに変える */
}
@media (hover: hover) {
  .circle-more.is-external:hover .circle-more__icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23F2DF28"/><path d="M25.4868 14.3445C25.4868 14.0684 25.2629 13.8445 24.9868 13.8445L20.4868 13.8445C20.2107 13.8445 19.9868 14.0684 19.9868 14.3445C19.9868 14.6206 20.2107 14.8445 20.4868 14.8445L24.4868 14.8445L24.4868 18.8445C24.4868 19.1206 24.7107 19.3445 24.9868 19.3445C25.2629 19.3445 25.4868 19.1206 25.4868 18.8445L25.4868 14.3445ZM13.6731 25.6582L14.0266 26.0118L25.3404 14.698L24.9868 14.3445L24.6333 13.9909L13.3195 25.3046L13.6731 25.6582Z" fill="%23F2DF28"/></svg>');
  }
}

/* 共通パーツ：お問い合わせバナー（template_parts/component/contact-banner.php） */
.contact-banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /*
   * flex-wrap:wrapのままだと、見出し(.head)＋本文(.body)の必要幅がコンテナ幅ぎりぎりの時に
   * .headと.bodyが段落ちしてしまう。ここはnowrapで固定し、幅が足りない分は.bodyを縮め、
   * それでも収まらなければ.__row側（電話番号とボタン）が内部でwrapする形に逃がす。
   */
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: clamp(1.5rem, 0.7857142857rem + 1.9047619048vw, 2.5rem);
  width: 100%;
  max-width: 80rem;
  min-height: 13.875rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem) clamp(1.875rem, 0.9821428571rem + 2.380952381vw, 3.125rem);
  border-radius: 0.3125rem;
  background-color: #fff;
  -webkit-box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.06);
          box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.06);
}
@media screen and (max-width: 910px) {
  .contact-banner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    min-height: 0;
    padding: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem) clamp(1.25rem, 0.8035714286rem + 1.1904761905vw, 1.875rem);
  }
}
.contact-banner__head {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* タイトルの開始位置を右へ20pxずらす（区切り線も一体で右へ移動する） */
  margin-left: 1.25rem;
  /* Figmaデザインの固定の間隔：タイトルから区切り線まで80px */
  padding-right: 5rem;
  /* Figmaデザインの固定サイズの区切り線（可変要素ではないためf-clampを使わない） */
}
.contact-banner__head::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 2px;
  height: 9.5rem;
  background-color: #000;
  translate: 0 -50%;
}
.contact-banner__head {
  /* 「お問い合わせ」見出しのスタイル調整（共通の.title自体は変更しない） */
}
.contact-banner__head .title__main {
  font-size: 1rem;
  font-weight: var(--f-medium);
  letter-spacing: 0.1em;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
}
.contact-banner__head .title__sub {
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 910px) {
  .contact-banner__head {
    margin-left: 0;
    padding-right: 0;
    padding-bottom: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  }
  .contact-banner__head::after {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    translate: none;
  }
}
.contact-banner__body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(0.375rem, 0.1964285714rem + 0.4761904762vw, 0.625rem);
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 0;
  /* 区切り線からコンテンツまでの間隔。タイトル側を20px右へずらした分、区切り線が電話番号群に近づくよう40→20pxに詰める */
  padding-left: 1.25rem;
  /* SPは見出しと縦積みになり左の区切り線が無くなるため、このpadding-leftは不要。リード文と電話番号の間も少し広げる */
}
@media screen and (max-width: 910px) {
  .contact-banner__body {
    padding-left: 0;
    gap: 20px;
  }
}
.contact-banner__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(1rem, 0.6428571429rem + 0.9523809524vw, 1.5rem);
  min-width: 0;
}
@media screen and (max-width: 910px) {
  .contact-banner__row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}
.contact-banner__lead {
  color: #000;
  font-size: 1.25rem;
  font-weight: var(--f-black);
  letter-spacing: 0.1em;
}
@media screen and (max-width: 910px) {
  .contact-banner__lead {
    font-size: 1rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    display: -ms-grid;
    display: grid;
  }
}
.contact-banner__tel {
  min-width: 0;
}
@media screen and (max-width: 910px) {
  .contact-banner__tel {
    text-align: center;
  }
}
.contact-banner {
  /* アイコンは電話番号自体の行の中に置き、番号の1行目と確実に高さが揃うようにする */
}
.contact-banner__tel-number {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.5rem, 0.4107142857rem + 0.2380952381vw, 0.625rem);
  color: #000;
  font-size: 2.4375rem;
  font-weight: var(--f-medium);
  line-height: 1;
  letter-spacing: 0.1em;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  /* 39pxのままだと画面幅によっては折り返してしまうため、SPは折り返さないサイズまで縮める */
}
@media screen and (max-width: 910px) {
  .contact-banner__tel-number {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    font-size: 1.875rem;
    white-space: nowrap;
  }
}
.contact-banner__tel-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.5rem;
  aspect-ratio: 1/1;
  background: url('data:image/svg+xml;charset=utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 16.9201V19.9201C22.0011 20.1986 21.9441 20.4743 21.8325 20.7294C21.7209 20.9846 21.5573 21.2137 21.3521 21.402C21.1468 21.5902 20.9046 21.7336 20.6407 21.8228C20.3769 21.912 20.0974 21.9452 19.82 21.9201C16.7428 21.5857 13.787 20.5342 11.19 18.8501C8.77382 17.3148 6.72533 15.2663 5.18999 12.8501C3.49997 10.2413 2.44824 7.27109 2.11999 4.1801C2.095 3.90356 2.12787 3.62486 2.21649 3.36172C2.30512 3.09859 2.44756 2.85679 2.63476 2.65172C2.82196 2.44665 3.0498 2.28281 3.30379 2.17062C3.55777 2.05843 3.83233 2.00036 4.10999 2.0001H7.10999C7.5953 1.99532 8.06579 2.16718 8.43376 2.48363C8.80173 2.80008 9.04207 3.23954 9.10999 3.7201C9.23662 4.68016 9.47144 5.62282 9.80999 6.5301C9.94454 6.88802 9.97366 7.27701 9.8939 7.65098C9.81415 8.02494 9.62886 8.36821 9.35999 8.6401L8.08999 9.9101C9.51355 12.4136 11.5864 14.4865 14.09 15.9101L15.36 14.6401C15.6319 14.3712 15.9751 14.1859 16.3491 14.1062C16.7231 14.0264 17.1121 14.0556 17.47 14.1901C18.3773 14.5286 19.3199 14.7635 20.28 14.8901C20.7658 14.9586 21.2094 15.2033 21.5265 15.5776C21.8437 15.9519 22.0122 16.4297 22 16.9201Z" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}
.contact-banner {
  /* 受付時間のテキストは、電話番号の「083」の開始位置（アイコン幅＋アイコンとの余白ぶん）に合わせて字下げする。SPは電話番号を中央寄せにするため字下げをやめる */
}
.contact-banner__tel-note {
  font-size: 0.9375rem;
  padding-left: calc(1.5rem + clamp(0.5rem, 0.4107142857rem + 0.2380952381vw, 0.625rem));
}
@media screen and (max-width: 910px) {
  .contact-banner__tel-note {
    padding-left: 0;
  }
}
.contact-banner__tel-time {
  font-size: 1.125rem;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-medium);
}
.contact-banner {
  /* ボタンは常に525px固定（Figmaデザイン）。幅が足りない場合は.headと.bodyを段落ちさせず、代わりに.__row内でボタンが電話番号の下に回り込む */
}
.contact-banner__button {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 1199.9px) {
  .contact-banner__button {
    width: 100%;
  }
}
@media screen and (max-width: 1199.9px) {
  .contact-banner__button .button {
    width: 100%;
  }
}
.contact-banner__button {
  /* Figmaデザインの固定サイズ（可変要素ではないためf-clampを使わない） */
}
.contact-banner__button .button__item {
  width: 32.8125rem;
  height: 3.125rem;
  border-radius: 3.125rem;
  font-size: 1rem;
  /*
   * is-centerはアイコンをposition:absoluteで右端に固定表示し、テキストはボタン全幅で中央寄せにする。
   * ボタン幅いっぱいでテキストが長いと、中央寄せのテキストがアイコンと重なってしまうため、
   * テキスト側にアイコン+余白ぶんのパディングを確保して衝突を防ぐ。左右対称にして、テキストの見た目の中心がずれないようにする。
   */
}
@media screen and (max-width: 1199.9px) {
  .contact-banner__button .button__item {
    width: 100%;
  }
}
@media screen and (max-width: 910px) {
  .contact-banner__button .button__item {
    width: 100%;
  }
}

.footer {
  display: -ms-grid;
  display: grid;
  gap: clamp(1.75rem, 1.3928571429rem + 0.9523809524vw, 2.25rem);
}
.footer__main {
  padding-block: clamp(1.875rem, 1.875rem + 0vw, 1.875rem) 0;
  background-color: #fff;
}
@media screen and (max-width: 767.9px) {
  .body-top .footer__main {
    padding-top: 0;
  }
}

.footer__grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr clamp(1.875rem, 1.875rem + 0vw, 1.875rem) auto clamp(1.875rem, 1.875rem + 0vw, 1.875rem) auto clamp(1.875rem, 1.875rem + 0vw, 1.875rem) auto;
  grid-template-columns: 1fr auto auto auto;
  gap: clamp(1.875rem, 1.875rem + 0vw, 1.875rem);
}
@media screen and (max-width: 910px) {
  .footer__grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
  }
}
.footer__nav-group {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem) auto;
  grid-template-columns: repeat(2, auto);
  gap: clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem);
}
@media screen and (max-width: 910px) {
  .footer__nav-group {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
  }
}
.footer__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(0.75rem, 0.5714285714rem + 0.4761904762vw, 1rem);
  /* リンク範囲を画像の実幅までに収める（親.footer__brandが1frで広がっていてもここは伸ばさない） */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #000;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media screen and (max-width: 910px) {
  .footer__logo {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-inline: auto;
  }
}
@media (hover: hover) {
  .footer__logo:hover {
    opacity: 0.8;
  }
}
.footer__logo-img {
  width: 18.5625rem;
  max-width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.footer__logo-text {
  display: -ms-grid;
  display: grid;
  gap: 0.25rem;
}
.footer__logo-name {
  font-size: clamp(0.9375rem, 0.8928571429rem + 0.119047619vw, 1rem);
  font-weight: var(--f-bold);
  line-height: 1.4;
}
.footer__logo-name-en {
  display: block;
  color: #939393;
  font-size: clamp(0.625rem, 0.5803571429rem + 0.119047619vw, 0.6875rem);
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}
.footer {
  /*
   * ナビゲーション
   * PC：1列で縦並び
   * SP：2列のグリッド（マークアップは共通、CSSのみで見た目を切り替える）
   */
  /*
   * SPは外枠の左右borderは持たせず、横幅いっぱいの行区切り線（上下border、色は#000）とカラム間の縦線だけにする。
   * .innerの内側では画面端まで届かないため、.footer__tel-groupと同じフルブリード手法で幅いっぱいに広げる。
   */
}
.footer__nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(0.875rem, 0.6964285714rem + 0.4761904762vw, 1.125rem);
}
@media screen and (max-width: 910px) {
  .footer__nav-list {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 0 1fr;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    /* 100vwはモバイルブラウザのアドレスバー等の影響で実際のビューポート幅よりわずかに大きくなり、
       横スクロールが出ることがあるため、実際の可視ビューポート幅に追従する100dvwを使う */
    width: calc(100% + 30px);
    margin-left: -15px;
    border-top: 1px solid #000;
  }
}
@media screen and (max-width: 910px) {
  .footer__nav-item {
    border-bottom: 1px solid #000;
  }
  .footer__nav-item:nth-child(odd) {
    border-right: 1px solid #000;
  }
}
.footer__nav-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  font-weight: var(--f-bold);
  background-position: 0 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(currentcolor), to(currentcolor)) 100% 100%/0 1px no-repeat;
  background: linear-gradient(currentcolor, currentcolor) 100% 100%/0 1px no-repeat;
  -webkit-transition: background-size 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  transition: background-size 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  will-change: background-size;
}
@media (hover: hover) {
  .footer__nav-link:hover {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}
@media screen and (max-width: 910px) {
  .footer__nav-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    min-height: 65px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    padding-inline: 20px;
    /* SPはタップでhoverの下線アニメーションが誤動作しやすいため無効化する */
    background: none;
  }
}
@media screen and (max-width: 910px) and (hover: hover) {
  .footer__nav-link:hover {
    background-size: 0 1px;
  }
}
.footer__service-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: 8px;
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  font-weight: var(--f-bold);
  background-position: 0 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(currentcolor), to(currentcolor)) 100% 100%/0 1px no-repeat;
  background: linear-gradient(currentcolor, currentcolor) 100% 100%/0 1px no-repeat;
  -webkit-transition: background-size 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  transition: background-size 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  will-change: background-size;
}
@media (hover: hover) {
  .footer__service-title:hover {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}
.footer__service-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 8px;
}
.footer__service-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: #000;
  font-size: 14px;
  line-height: 1.6;
}
.footer__service-link::before {
  content: "―";
  margin-right: clamp(0.375rem, 0.2857142857rem + 0.2380952381vw, 0.5rem);
  color: #000;
}
.footer {
  /* 下線は「―」の後ろのテキスト部分にだけ表示する（.footer__service-link全体をhoverしたら発火）。非hover時は右起点(100% 100%)にしておき、hover時に左起点(0 100%)へ切り替える。他のリンク（m-line-hover()）と同様、左から右に伸び、hover解除時は右へ消える動きになる */
}
.footer__service-link-text {
  background: -webkit-gradient(linear, left top, left bottom, from(currentcolor), to(currentcolor)) 100% 100%/0 1px no-repeat;
  background: linear-gradient(currentcolor, currentcolor) 100% 100%/0 1px no-repeat;
  -webkit-transition: background-size 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  transition: background-size 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
}
@media (hover: hover) {
  .footer__service-link:hover .footer__service-link-text {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}
.footer__contact {
  display: -ms-grid;
  display: grid;
  gap: clamp(0.5rem, 0.5rem + 0vw, 0.5rem);
  -ms-flex-line-pack: start;
      align-content: start;
  padding-left: clamp(1.5rem, -0.1071428571rem + 4.2857142857vw, 3.75rem);
  border-left: 1px solid #4D555B;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  -ms-flex-line-pack: center;
      align-content: center;
}
@media screen and (max-width: 910px) {
  .footer__contact {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    padding-left: 0;
    border-left: none;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-items: center;
    gap: 12px;
  }
}
.footer {
  /*
   * SPは電話番号の上に区切り線を引く。.innerの左右余白の内側では画面端まで届かないため、
   * width:100vw + margin-left:calc(50% - 50vw)でビューポート幅いっぱいまで伸ばす
   * （中の電話番号・受付時間はjustify-items:centerで元の見た目のまま中央に残る）
   */
}
.footer__tel-group {
  display: -ms-grid;
  display: grid;
  gap: 0.3125rem;
}
@media screen and (max-width: 910px) {
  .footer__tel-group {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    justify-items: center;
    padding-top: 24px;
    border-top: 1px solid #000;
  }
}
.footer__tel {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.5rem, 0.4107142857rem + 0.2380952381vw, 0.625rem);
  color: #000;
  font-size: clamp(1.375rem, 1.2410714286rem + 0.3571428571vw, 1.5625rem);
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-medium);
  line-height: 1;
}
@media screen and (max-width: 910px) {
  .footer__tel {
    width: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.footer__tel-icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 1.125rem;
  aspect-ratio: 1/1;
  background: url('data:image/svg+xml;charset=utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 16.9201V19.9201C22.0011 20.1986 21.9441 20.4743 21.8325 20.7294C21.7209 20.9846 21.5573 21.2137 21.3521 21.402C21.1468 21.5902 20.9046 21.7336 20.6407 21.8228C20.3769 21.912 20.0974 21.9452 19.82 21.9201C16.7428 21.5857 13.787 20.5342 11.19 18.8501C8.77382 17.3148 6.72533 15.2663 5.18999 12.8501C3.49997 10.2413 2.44824 7.27109 2.11999 4.1801C2.095 3.90356 2.12787 3.62486 2.21649 3.36172C2.30512 3.09859 2.44756 2.85679 2.63476 2.65172C2.82196 2.44665 3.0498 2.28281 3.30379 2.17062C3.55777 2.05843 3.83233 2.00036 4.10999 2.0001H7.10999C7.5953 1.99532 8.06579 2.16718 8.43376 2.48363C8.80173 2.80008 9.04207 3.23954 9.10999 3.7201C9.23662 4.68016 9.47144 5.62282 9.80999 6.5301C9.94454 6.88802 9.97366 7.27701 9.8939 7.65098C9.81415 8.02494 9.62886 8.36821 9.35999 8.6401L8.08999 9.9101C9.51355 12.4136 11.5864 14.4865 14.09 15.9101L15.36 14.6401C15.6319 14.3712 15.9751 14.1859 16.3491 14.1062C16.7231 14.0264 17.1121 14.0556 17.47 14.1901C18.3773 14.5286 19.3199 14.7635 20.28 14.8901C20.7658 14.9586 21.2094 15.2033 21.5265 15.5776C21.8437 15.9519 22.0122 16.4297 22 16.9201Z" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}
.footer__tel-note {
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
  font-weight: var(--f-medium);
  padding-left: calc(clamp(0.5rem, 0.4107142857rem + 0.2380952381vw, 0.625rem) + clamp(1.125rem, 1.125rem + 0vw, 1.125rem));
}
@media screen and (max-width: 910px) {
  .footer__tel-note {
    padding-left: 0;
    text-align: center;
  }
}
.footer__cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
  border-radius: 10px;
  background-color: #000;
  color: #fff;
  width: 239px;
  max-width: 500px;
  height: 107px;
  display: -ms-grid;
  display: grid;
  place-content: center;
  -webkit-transition: background-color, color 1s ease;
  transition: background-color, color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  padding-inline: 0.2em;
}
@media screen and (max-width: 479.9px) {
  .footer__cta {
    width: 100%;
    max-width: none;
    height: 108px;
  }
}
@media (hover: hover) {
  .footer__cta:hover {
    background-color: #F2DF28;
    color: #000;
  }
  .footer__cta:hover .footer__cta-label {
    color: #000;
  }
  .footer__cta:hover .footer__cta-dot {
    background-color: #000;
  }
}
.footer__cta-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  color: #fff;
  font-weight: 14px;
  letter-spacing: 0.05em;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-medium);
  -webkit-transition: color 1s ease;
  transition: color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.footer__cta-dot {
  width: 9px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #F2DF28;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.footer__cta-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 5px;
}
.footer__cta-text {
  font-size: 18px;
  font-weight: var(--f-bold);
}
.footer {
  /* 円背景付きの1枚絵アイコンに変更（このボタンは小さいボタンのため20px固定） */
}
.footer__cta-icon {
  width: 1.25rem;
  aspect-ratio: 1/1;
  background: url('data:image/svg+xml;charset=utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="%23fff"/><path d="M5.6665 9.5C5.39036 9.5 5.1665 9.72386 5.1665 10C5.1665 10.2761 5.39036 10.5 5.6665 10.5L5.6665 10L5.6665 9.5ZM14.0201 10.3536C14.2153 10.1583 14.2153 9.84171 14.0201 9.64645L10.8381 6.46447C10.6428 6.2692 10.3262 6.2692 10.131 6.46447C9.93571 6.65973 9.93571 6.97631 10.131 7.17157L12.9594 10L10.131 12.8284C9.93571 13.0237 9.93571 13.3403 10.131 13.5355C10.3262 13.7308 10.6428 13.7308 10.8381 13.5355L14.0201 10.3536ZM5.6665 10L5.6665 10.5L13.6665 10.5L13.6665 10L13.6665 9.5L5.6665 9.5L5.6665 10Z" fill="%23000"/></svg>') no-repeat center/contain;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .footer__cta:hover .footer__cta-icon {
    background: url('data:image/svg+xml;charset=utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="%23000"/><path d="M5.6665 9.5C5.39036 9.5 5.1665 9.72386 5.1665 10C5.1665 10.2761 5.39036 10.5 5.6665 10.5L5.6665 10L5.6665 9.5ZM14.0201 10.3536C14.2153 10.1583 14.2153 9.84171 14.0201 9.64645L10.8381 6.46447C10.6428 6.2692 10.3262 6.2692 10.131 6.46447C9.93571 6.65973 9.93571 6.97631 10.131 7.17157L12.9594 10L10.131 12.8284C9.93571 13.0237 9.93571 13.3403 10.131 13.5355C10.3262 13.7308 10.6428 13.7308 10.8381 13.5355L14.0201 10.3536ZM5.6665 10L5.6665 10.5L13.6665 10.5L13.6665 10L13.6665 9.5L5.6665 9.5L5.6665 10Z" fill="%23fff"/></svg>') no-repeat center/contain;
  }
}

.footer__bottom {
  padding-block: clamp(0.6875rem, 0.6875rem + 0vw, 0.6875rem);
  background-color: #000;
  /* .footer__copyrightのline-height:44pxで縦のスペースが確保されるようになったため、SPはpadding-blockを無くす */
}
@media screen and (max-width: 910px) {
  .footer__bottom {
    padding-block: 0;
  }
}
.footer__bottom-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(1rem, 0.6428571429rem + 0.9523809524vw, 1.5rem);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.footer__privacy {
  color: #fff;
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
  background-position: 0 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(currentcolor), to(currentcolor)) 100% 100%/0 1px no-repeat;
  background: linear-gradient(currentcolor, currentcolor) 100% 100%/0 1px no-repeat;
  -webkit-transition: background-size 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  transition: background-size 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  will-change: background-size;
}
@media (hover: hover) {
  .footer__privacy:hover {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}
.footer__copyright {
  color: #fff;
  font-size: clamp(0.6875rem, 0.6428571429rem + 0.119047619vw, 0.75rem);
  line-height: 44px;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}

.header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0;
  border-radius: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
  -webkit-transition: margin, border-radius, background-color 1s ease, -webkit-box-shadow;
  transition: margin, border-radius, background-color 1s ease, -webkit-box-shadow;
  transition: margin, border-radius, box-shadow, background-color 1s ease;
  transition: margin, border-radius, box-shadow, background-color 1s ease, -webkit-box-shadow;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.body-top .header {
  position: fixed;
}

.body-top .header {
  margin: clamp(0.625rem, 0.625rem + 0vw, 0.625rem);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.64);
  -webkit-box-shadow: 0 0 5px 0 rgba(173, 173, 173, 0.28);
          box-shadow: 0 0 5px 0 rgba(173, 173, 173, 0.28);
}
.body-top .header.is-bg-color {
  margin: 0;
  border-radius: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
}
html.is-menu-open .body-top .header {
  margin: 0;
  border-radius: 0;
  background-color: #fff;
  -webkit-box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
}
.header__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(1rem, 0.6428571429rem + 0.9523809524vw, 1.5rem);
  /* 他ページの.innerと同じ基準（1280px＋左右の余白）に揃える */
  width: min(80rem, 100% - clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem));
  margin-inline: auto;
}
@media screen and (min-width: 909.9px) {
  .header__inner {
    height: min(5rem, 80px);
  }
}
@media screen and (max-width: 910px) {
  .header__inner {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 15px auto 15px auto;
    grid-template-columns: 1fr auto auto;
    /* 1行目（ロゴ・メール・ハンバーガー）の高さを固定する。auto任せだと、メニューを開いた時に
       2行目(.header__nav)の高さが変わることで1行目の見た目の位置までズレて見えることがあるため、
       1行目の高さを開閉状態に依存しない固定値にして完全に切り離す */
    -ms-grid-rows: 51px 0 auto;
    grid-template-rows: 51px auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 15px;
       -moz-column-gap: 15px;
            column-gap: 15px;
    row-gap: 0;
    min-height: 51px;
    padding-block: 0;
  }
  .header__inner > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .header__inner > *:nth-child(2) {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .header__inner > *:nth-child(3) {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  .header__inner > *:nth-child(4) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .header__inner > *:nth-child(5) {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
  .header__inner > *:nth-child(6) {
    -ms-grid-row: 3;
    -ms-grid-column: 5;
  }
}
@media screen and (max-width: 910px) {
  .header__logo {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .header__mail-button {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .header__mobile-button {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .header__nav {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    grid-column: 1/-1;
  }
}
.header__logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.5rem, 0.4107142857rem + 0.2380952381vw, 0.625rem);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: #000;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .header__logo:hover {
    opacity: 0.8;
  }
}
.header__logo-img {
  /* タブレット幅（ハンバーガーに切り替わる$bp-header手前）でロゴが縮まずナビを圧迫していたため、実際に縮小する範囲に変更 */
  width: min(clamp(10rem, 0.0446428571rem + 26.5476190476vw, 23.9375rem), 383px);
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 767.9px) {
  .header__logo-img {
    width: 215px;
  }
}
.header__logo-text {
  display: -ms-grid;
  display: grid;
  gap: 0.125rem;
}
.header__logo-name {
  font-size: clamp(0.8125rem, 0.6785714286rem + 0.3571428571vw, 1rem);
  font-weight: var(--f-bold);
  line-height: 1.4;
}
.header__logo-name-en {
  display: block;
  color: #939393;
  font-size: clamp(0.5625rem, 0.4732142857rem + 0.2380952381vw, 0.6875rem);
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}
.header__mail-button {
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  width: 37px;
  aspect-ratio: 1/1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 910px) {
  .header__mail-button {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}
.header__mail-icon {
  width: 100%;
  aspect-ratio: 1/1;
  background: url('data:image/svg+xml;charset=utf8,<svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="37" height="37" rx="18.5" fill="%23000"/><mask id="mask0_6652_1143" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="7" width="24" height="24"><rect x="7" y="7" width="24" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_6652_1143)"><path d="M10.9 26C10.3775 26 9.93021 25.8164 9.55813 25.4492C9.18604 25.082 9 24.6406 9 24.125V12.875C9 12.3594 9.18604 11.918 9.55813 11.5508C9.93021 11.1836 10.3775 11 10.9 11H26.1C26.6225 11 27.0698 11.1836 27.4419 11.5508C27.814 11.918 28 12.3594 28 12.875V24.125C28 24.6406 27.814 25.082 27.4419 25.4492C27.0698 25.8164 26.6225 26 26.1 26H10.9ZM18.5 19.4375L10.9 14.75V24.125H26.1V14.75L18.5 19.4375ZM18.5 17.5625L26.1 12.875H10.9L18.5 17.5625ZM10.9 14.75V12.875V24.125V14.75Z" fill="%23fff"/></g></svg>') no-repeat center/contain;
}
.header__mobile-button {
  display: none;
  position: relative;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  width: clamp(2rem, 1.8214285714rem + 0.4761904762vw, 2.25rem);
  aspect-ratio: 1/1;
  border: none;
  background: none;
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 910px) {
  .header__mobile-button {
    display: block;
  }
}
.header__mobile-button-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60%;
  height: 2px;
  background-color: #000;
  -webkit-transition: translate, rotate, opacity 1s ease;
  transition: translate, rotate, opacity 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.header__mobile-button-line:nth-child(1) {
  translate: -50% calc(-50% - 6px);
}
.header__mobile-button-line:nth-child(2) {
  translate: -50% -50%;
}
.header__mobile-button-line:nth-child(3) {
  translate: -50% calc(-50% + 6px);
}
.header__mobile-button.is-active .header__mobile-button-line:nth-child(1) {
  translate: -50% -50%;
  rotate: 45deg;
}
.header__mobile-button.is-active .header__mobile-button-line:nth-child(2) {
  opacity: 0;
}
.header__mobile-button.is-active .header__mobile-button-line:nth-child(3) {
  translate: -50% -50%;
  rotate: -45deg;
}
.header__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
  /* .header__innerの高さ(80px)いっぱいまで広げる。事業案内のメガメニューをhoverでつなげるため */
}
@media screen and (min-width: 909.9px) {
  .header__nav {
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
  }
}
@media screen and (max-width: 910px) {
  .header__nav {
    display: none;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.4s ease;
    transition: max-height 0.4s ease;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
  }
}
.header__nav-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: min(clamp(0.75rem, -1.4821428571rem + 5.9523809524vw, 3.875rem), 62px);
  /* .header__navと同じ理由でheader__innerの高さいっぱいまで広げる */
}
@media screen and (min-width: 909.9px) {
  .header__nav-list {
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
  }
}
@media screen and (max-width: 910px) {
  .header__nav-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0;
    width: 100%;
  }
}
@media screen and (max-width: 910px) {
  .header__nav-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
@media screen and (min-width: 909.9px) {
  .header__nav-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
  }
}
.header__nav-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: #000;
  font-size: 0.875rem;
  font-weight: var(--f-medium);
  letter-spacing: 0.7px;
  white-space: nowrap;
  /*
   * PCはリンク自体をヘッダーの高さ(80px)いっぱいまで伸ばし、下線(border-bottom)がテキストの真下ではなく
   * header領域の一番下にくっつくようにする。事業案内はメニュー（.header__mega）を開いている間も
   * 「今アクティブ」だとわかるよう、リンク自身ではなくli（.header__nav-item）のhoverを基準にして、
   * メニューを開いている間は下線が消えないようにする
   */
}
@media screen and (min-width: 909.9px) {
  .header__nav-link {
    -ms-flex-item-align: stretch;
        -ms-grid-row-align: stretch;
        align-self: stretch;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    border-bottom: 2px solid transparent;
    -webkit-transition: color, border-color 1s ease;
    transition: color, border-color 1s ease;
    -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
  }
}
@media screen and (max-width: 910px) {
  .header__nav-link {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0.125rem;
    padding-block: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
    white-space: normal;
  }
}
@media screen and (hover: hover) and (min-width: 909.9px) {
  .header__nav-item:hover .header__nav-link {
    color: rgba(0, 0, 0, 0.5);
    border-color: #F2DF28;
  }
}
@media screen and (min-width: 909.9px) {
  .header__nav-item.is-current .header__nav-link {
    color: rgba(0, 0, 0, 0.5);
    border-color: #F2DF28;
  }
}
@media screen and (max-width: 910px) {
  .header__nav-item.is-current .header__nav-link-ja {
    color: rgba(0, 0, 0, 0.5);
  }
}
.header__nav-link-en {
  display: none;
}
@media screen and (max-width: 910px) {
  .header__nav-link-en {
    display: block;
    color: #F2DF28;
    font-size: 0.6875rem;
    font-weight: var(--f-bold);
    letter-spacing: 0.05em;
  }
}
@media screen and (max-width: 910px) {
  .header__nav-link-ja {
    color: #000;
    font-size: clamp(1.125rem, 1.0357142857rem + 0.2380952381vw, 1.25rem);
    font-weight: var(--f-medium);
    letter-spacing: 0.05em;
  }
}
.header__nav-sublist {
  display: none;
}
@media screen and (max-width: 910px) {
  .header__nav-sublist {
    display: -ms-grid;
    display: grid;
    justify-items: center;
    gap: 0.625rem;
    padding-bottom: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  }
}
.header__nav-sublink {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: #000;
  font-size: 0.8125rem;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}
.header__nav-sublink::before {
  content: "―";
  margin-right: 0.375rem;
}
.header__mega {
  display: none;
}
@media screen and (min-width: 909.9px) {
  .header__mega {
    display: -ms-grid;
    display: grid;
    /* 「マーキング・ラッピング・プリント」等の長いリンク文字が省略されないよう、
       910〜1400pxの間は左の画像カラムを最大380pxまで狭める（1400px以上で通常の440pxに戻る） */
    -ms-grid-columns: clamp(16.25rem, -11.6071428571rem + 48.9795918367vw, 31.25rem) 1fr;
    grid-template-columns: clamp(16.25rem, -11.6071428571rem + 48.9795918367vw, 31.25rem) 1fr;
    position: absolute;
    top: 100%;
    /*
     * width:100vw(100dvw含む)は縦スクロールバーの分だけ実際の表示幅より広くなることがあり、
     * 縦スクロールが出るページ（事業詳細ページ等）だけ横スクロールが出る原因になっていた。
     * .header自体は通常のブロック要素として正しい幅（スクロールバー除く）で描画されるため、
     * vw単位を使わずleft:0/right:0で.headerの実際の幅に合わせる
     */
    left: 0;
    right: 0;
    min-height: 23.0625rem;
    background-color: #fff;
    -webkit-box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
            box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    translate: 0 0.5rem;
    -webkit-transition: opacity 0.25s ease, translate 0.25s ease, visibility 0.25s;
    transition: opacity 0.25s ease, translate 0.25s ease, visibility 0.25s;
    z-index: 10;
  }
}
@media screen and (hover: hover) and (min-width: 909.9px) {
  .header__nav-item:hover .header__mega {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }
}
.header__mega-visual {
  position: relative;
  overflow: hidden;
  background: url("../img/common/header_nav_bg.jpg") no-repeat center/cover;
}
.header__mega-caption {
  position: absolute;
  left: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
  right: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
  top: clamp(1.25rem, 0.8928571429rem + 0.9523809524vw, 1.75rem);
  bottom: clamp(1.25rem, 0.8928571429rem + 0.9523809524vw, 1.75rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #fff;
}
.header__mega-title-group {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0.25rem;
}
.header__mega-eyebrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--f-medium);
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}
.header__mega-dot {
  width: 0.5rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #F2DF28;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.header__mega-title {
  margin: 0;
  font-size: 1.625rem;
  font-weight: var(--f-black);
  letter-spacing: 0.05em;
}
.header__mega-more {
  -ms-flex-item-align: end;
      align-self: flex-end;
  color: #fff;
}
.header__mega-more .circle-more__icon {
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23fff"/><path d="M27.6869 20.3536C27.8822 20.1583 27.8822 19.8417 27.6869 19.6464L24.5049 16.4645C24.3097 16.2692 23.9931 16.2692 23.7978 16.4645C23.6026 16.6597 23.6026 16.9763 23.7978 17.1716L26.6263 20L23.7978 22.8284C23.6026 23.0237 23.6026 23.3403 23.7978 23.5355C23.9931 23.7308 24.3097 23.7308 24.5049 23.5355L27.6869 20.3536ZM11.3334 20L11.3334 20.5L27.3334 20.5L27.3334 20L27.3334 19.5L11.3334 19.5L11.3334 20Z" fill="%23fff"/></svg>');
}
@media (hover: hover) {
  .header__mega-more:hover {
    color: #F2DF28;
  }
  .header__mega-more:hover .circle-more__icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23F2DF28"/><path d="M27.6869 20.3536C27.8822 20.1583 27.8822 19.8417 27.6869 19.6464L24.5049 16.4645C24.3097 16.2692 23.9931 16.2692 23.7978 16.4645C23.6026 16.6597 23.6026 16.9763 23.7978 17.1716L26.6263 20L23.7978 22.8284C23.6026 23.0237 23.6026 23.3403 23.7978 23.5355C23.9931 23.7308 24.3097 23.7308 24.5049 23.5355L27.6869 20.3536ZM11.3334 20L11.3334 20.5L27.3334 20.5L27.3334 20L27.3334 19.5L11.3334 19.5L11.3334 20Z" fill="%23F2DF28"/></svg>');
  }
}
.header__mega-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr clamp(1.25rem, 0.7142857143rem + 1.4285714286vw, 2rem) 1fr;
  grid-template-columns: repeat(2, 1fr);
  -ms-flex-line-pack: center;
      align-content: center;
  /* グリッドの列幅（.header__megaのgrid-template-columns）は変えず、余白側を詰めてテキストの幅を確保する */
  gap: 0 clamp(1.25rem, 0.7142857143rem + 1.4285714286vw, 2rem);
  padding-inline: clamp(1.25rem, 0.8928571429rem + 0.9523809524vw, 1.75rem);
  background-color: #F1F3F5;
}
.header__mega-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0.625rem;
  /* 親li（.header__mega-item）はグリッドの行の高さに揃って伸びるが、リンク自体は中身の高さのまま
     だったため、下線(border-bottom)の位置が行ごとにバラついていた。高さいっぱいまで伸ばして揃える */
  height: 100%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 上下均等ではなく上を多めにして、1行の場合の高さが111px前後になるようにする */
  padding: 3rem 0 1.125rem;
  border-bottom: 1px solid #000;
  color: #000;
  /* html直下のf-clamp(16,20,1200,2600)でrem基準が16pxを超える広幅画面では、pxToRem単体だと実測が18pxを超えてしまうため、min()で絶対値18pxを上限にする */
  font-size: min(1.125rem, 18px);
  font-weight: var(--f-bold);
  -webkit-transition: color, border-color 1s ease;
  transition: color, border-color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.header__mega-link .header__mega-link-icon {
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23000"/><path d="M27.6869 20.3536C27.8822 20.1583 27.8822 19.8417 27.6869 19.6464L24.5049 16.4645C24.3097 16.2692 23.9931 16.2692 23.7978 16.4645C23.6026 16.6597 23.6026 16.9763 23.7978 17.1716L26.6263 20L23.7978 22.8284C23.6026 23.0237 23.6026 23.3403 23.7978 23.5355C23.9931 23.7308 24.3097 23.7308 24.5049 23.5355L27.6869 20.3536ZM11.3334 20L11.3334 20.5L27.3334 20.5L27.3334 20L27.3334 19.5L11.3334 19.5L11.3334 20Z" fill="%23000"/></svg>');
}
.header__mega-link.is-external .header__mega-link-icon {
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23000"/><path d="M25.4868 14.3445C25.4868 14.0684 25.2629 13.8445 24.9868 13.8445L20.4868 13.8445C20.2107 13.8445 19.9868 14.0684 19.9868 14.3445C19.9868 14.6206 20.2107 14.8445 20.4868 14.8445L24.4868 14.8445L24.4868 18.8445C24.4868 19.1206 24.7107 19.3445 24.9868 19.3445C25.2629 19.3445 25.4868 19.1206 25.4868 18.8445L25.4868 14.3445ZM13.6731 25.6582L14.0266 26.0118L25.3404 14.698L24.9868 14.3445L24.6333 13.9909L13.3195 25.3046L13.6731 25.6582Z" fill="%23000"/></svg>');
}
@media (hover: hover) {
  .header__mega-link:hover {
    color: #F2DF28;
    border-color: #F2DF28;
  }
  .header__mega-link:hover .header__mega-link-icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23F2DF28"/><path d="M27.6869 20.3536C27.8822 20.1583 27.8822 19.8417 27.6869 19.6464L24.5049 16.4645C24.3097 16.2692 23.9931 16.2692 23.7978 16.4645C23.6026 16.6597 23.6026 16.9763 23.7978 17.1716L26.6263 20L23.7978 22.8284C23.6026 23.0237 23.6026 23.3403 23.7978 23.5355C23.9931 23.7308 24.3097 23.7308 24.5049 23.5355L27.6869 20.3536ZM11.3334 20L11.3334 20.5L27.3334 20.5L27.3334 20L27.3334 19.5L11.3334 19.5L11.3334 20Z" fill="%23F2DF28"/></svg>');
  }
  .header__mega-link:hover.is-external .header__mega-link-icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23F2DF28"/><path d="M25.4868 14.3445C25.4868 14.0684 25.2629 13.8445 24.9868 13.8445L20.4868 13.8445C20.2107 13.8445 19.9868 14.0684 19.9868 14.3445C19.9868 14.6206 20.2107 14.8445 20.4868 14.8445L24.4868 14.8445L24.4868 18.8445C24.4868 19.1206 24.7107 19.3445 24.9868 19.3445C25.2629 19.3445 25.4868 19.1206 25.4868 18.8445L25.4868 14.3445ZM13.6731 25.6582L14.0266 26.0118L25.3404 14.698L24.9868 14.3445L24.6333 13.9909L13.3195 25.3046L13.6731 25.6582Z" fill="%23F2DF28"/></svg>');
  }
}
.header__mega-item:nth-child(-n+2) .header__mega-link {
  padding-top: 0;
}
.header__mega-link-text {
  /* 省略(…)にはせず、入りきらない分は2行目に折り返す */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}
.header__mega-link-icon {
  width: min(2.5rem, 40px);
  height: min(2.5rem, 40px);
  aspect-ratio: 1/1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.header__contact {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 910px) {
  .header__contact {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-block: clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem);
  }
}
.header__overlay {
  display: none;
  position: fixed;
  top: 51px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background-color: rgba(0, 0, 0, 0.4);
}
@media screen and (min-width: 909.9px) {
  .header__overlay {
    top: 80px;
  }
}

@media screen and (max-width: 910px) {
  html.is-menu-open .header__overlay {
    display: block;
  }
}

/*
 * トップページの先頭（スクロール前）はheaderがmargin:10pxの浮いたカード状態のため、
 * ヘッダーの実際の下端がoverlayの既定位置(51px/80px)より10px下にずれる。その分を足して揃える
 */
@media screen and (max-width: 910px) {
  .body-top .header:not(.is-bg-color) ~ .header__overlay {
    top: 61px;
  }
}
@media screen and (min-width: 909.9px) {
  .body-top .header:not(.is-bg-color) ~ .header__overlay {
    top: 90px;
  }
}

/*
 * PCの事業案内メガメニューを開いている間も、パネルの下（画面の残り部分）をオーバーレイで覆う。
 * カーソルがオーバーレイに乗った時点で.header__nav-item--megaのhoverが外れてメガメニュー自体も閉じるため、
 * クリック操作を待たずに閉じる（クリックしても同じ結果になる）。
 * タッチ操作可能な端末では:hoverが解除されずに残ることがあり（タップ後にmouseleave相当のイベントが
 * 発火しないブラウザの既知の挙動）、画面全体を覆う黒幕だけが開いたまま固まってクリックできなくなる
 * 不具合につながっていたため、メガメニュー本体（&__nav-item:hover &__mega）と同じく
 * @media(hover:hover)でマウス操作可能な端末だけに限定する
 */
@media screen and (hover: hover) and (min-width: 909.9px) {
  body:has(.header__nav-item--mega:hover) .header__overlay {
    display: block;
  }
}

/* ハンバーガー操作でhtmlに付与されるis-menu-open（main.js側で制御） */
html.is-menu-open {
  overflow: hidden;
}
@media screen and (max-width: 910px) {
  html.is-menu-open .header__nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* 1行目（ロゴ・メール・ハンバーガー、51px固定）を除いた残り全部の高さを使い、収まらない分だけ内部スクロールする */
    max-height: calc(100dvh - 51px);
    overflow-y: auto;
  }
}

/* 共通パーツ：下層ページ用のページバナー（黒背景＋見出し） */
.page-banner {
  position: relative;
  overflow: hidden;
  background-color: #000;
  height: 213px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.page-banner {
  /* SPは高さと透かし英字のサイズを少し抑える。見出しの縦中央揃えは維持し、横位置は左寄せのまま（下層ページ共通のバナーのため全ページに反映される） */
}
@media screen and (max-width: 767.9px) {
  .page-banner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 160px;
  }
}
.page-banner .title-wrap {
  position: relative;
  z-index: 1;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.page-banner {
  /* このバナー内でだけ「Service」等のラベルをAfacad・18px・regularにする（共通の.title__main自体は変更しない） */
}
.page-banner .title__main {
  font-size: 1.125rem;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}
.page-banner {
  /* このバナー内でだけ見出しを32px・letter-spacing付きにする（共通の.title__sub自体は変更しない） */
}
.page-banner .title__sub {
  font-size: 2rem;
  letter-spacing: 0.05em;
}
.page-banner {
  /* 固定184px（remは可だがclampは使わない）。y等のディセンダー分の余白を隠し下端を揃える */
}
.page-banner .bg-text {
  line-height: 0.9;
  font-size: min(clamp(5.375rem, -5.5138888889rem + 22.6851851852vw, 11.5rem), 184px);
}
@media screen and (max-width: 767.9px) {
  .page-banner .bg-text {
    font-size: 86px;
  }
}
@media screen and (max-width: 479.9px) {
  .page-banner .bg-text {
    font-size: 66px;
  }
}

/* 共通パーツ：パンくず用の帯（page-bannerの黒枠の外側・白背景で使う） */
.breadcrumb-bar {
  background-color: #fff;
}
.breadcrumb-bar .breadcrumbs-wrap {
  position: static;
  padding-inline: 0;
}
.breadcrumb-bar .breadcrumbs {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
@media screen and (max-width: 767.9px) {
  .breadcrumb-bar .breadcrumbs {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
.breadcrumb-bar {
  /* .breadcrumbs__currentにだけvertical-align:bottomが付いていて、リンクとの開始位置がずれていたため揃える */
}
.breadcrumb-bar .breadcrumbs__link {
  display: inline-block;
  color: #000;
  font-size: 14px;
  vertical-align: bottom;
  line-height: 21px;
}
@media (hover: hover) {
  .breadcrumb-bar .breadcrumbs__link:hover {
    color: #F2DF28;
  }
}
.breadcrumb-bar {
  /* ">"の文字ではなく、黄色のborderの線に差し替える */
}
.breadcrumb-bar .breadcrumbs__li:not(:nth-child(1))::before {
  content: "";
  width: 20px;
  height: 0;
  border-top: 1px solid #F2DF28;
}
.breadcrumb-bar {
  /* 現在ページ名など長い文字列が入った場合も省略せず、はみ出した分は.breadcrumbs-wrap側の横スクロールで見られるようにする */
}
.breadcrumb-bar .breadcrumbs__current {
  display: inline-block;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  color: #939393;
  font-size: 14px;
  white-space: nowrap;
  vertical-align: bottom;
}

/**
 * 共通パーツ：スペック表（会社概要・料金表など、ラベル+値の行を並べる用途で使い回す）
 * マークアップ例：
 * <dl class="spec-table">
 *   <div class="spec-table__row">
 *     <dt class="spec-table__label">会社名</dt>
 *     <dd class="spec-table__value">〇〇株式会社</dd>
 *   </div>
 * </dl>
 */
.spec-table {
  display: -ms-grid;
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid #939393;
}
.spec-table__row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 8.75rem clamp(1rem, 0.6428571429rem + 0.9523809524vw, 1.5rem) 1fr;
  grid-template-columns: 8.75rem 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: clamp(1rem, 0.6428571429rem + 0.9523809524vw, 1.5rem);
  padding-block: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  border-bottom: 1px solid #939393;
}
@media screen and (max-width: 767.9px) {
  .spec-table__row {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: clamp(0.375rem, 0.2857142857rem + 0.2380952381vw, 0.5rem);
  }
}
.spec-table {
  /* dt/ddはブラウザ標準のmarginが入っているため、グリッドの開始位置が揃うように明示的に打ち消す */
}
.spec-table__label {
  margin: 0;
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  font-weight: var(--f-bold);
}
.spec-table__value {
  margin: 0;
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  line-height: 1.9;
}

/*
 * モディファイア：横幅いっぱい・左カラム（ラベル）に色を敷いた大きめのスペック表（募集要項・会社概要の会社概要表などで使用）。
 * マークアップ：<dl class="spec-table spec-table--panel">（.spec-table__row/__label/__valueは共通のまま）
 */
.spec-table--panel {
  border-top: none;
}
.spec-table--panel .spec-table__row {
  -ms-grid-columns: 15rem 0 1fr;
  grid-template-columns: 15rem 1fr;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  min-height: 80px;
  gap: 0;
  padding-block: 0;
  border-bottom: 1px solid #fff;
}
@media screen and (max-width: 767.9px) {
  .spec-table--panel .spec-table__row {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    min-height: 0;
  }
}
.spec-table--panel .spec-table__row:last-child {
  border-bottom: none;
}
.spec-table--panel {
  /*
   * SPは項目名（ラベル）の高さを詰め、文字サイズも16pxにする。
   * 行はalign-items:stretchで常にラベル/値の背景が高さいっぱい伸びるようにし（崩れ防止）、
   * 値が箇条書き等で長くなる行だけ、ラベルの文字位置を上揃えにする（他の行は縦中央寄せのまま）。
   */
}
.spec-table--panel .spec-table__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem) clamp(1.25rem, 0.8035714286rem + 1.1904761905vw, 1.875rem);
  background-color: #F2DF28;
  font-size: 18px;
  font-weight: var(--f-bold);
}
@media screen and (max-width: 767.9px) {
  .spec-table--panel .spec-table__label {
    padding-block: 10px;
    font-size: 16px;
  }
}
.spec-table--panel .spec-table__row:has(.spec-table__list) .spec-table__label {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.spec-table--panel {
  /* テキストの後にGoogle mapリンク等を続けて置くケースもあるため、折り返しと要素間の余白を確保しておく */
}
.spec-table--panel .spec-table__value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px 16px;
  padding: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem) clamp(1.25rem, 0.8035714286rem + 1.1904761905vw, 1.875rem);
  background-color: #F1F3F5;
  font-size: 18px;
  font-weight: var(--f-regular);
  line-height: 1.6;
}
@media screen and (max-width: 767.9px) {
  .spec-table--panel .spec-table__value {
    font-size: 16px;
  }
}
.spec-table--panel .spec-table__value {
  /* Google mapリンク等の丸アイコンリンクは40px固定。折り返しても縮まないようにする */
}
.spec-table--panel .spec-table__value .circle-more {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* カラムが1カラムになるタイミングでリンクだけ右寄せにする（住所テキスト側は左寄せのまま） */
}
@media screen and (max-width: 767.9px) {
  .spec-table--panel .spec-table__value .circle-more {
    margin-left: auto;
  }
}
.spec-table--panel .spec-table__value .circle-more__text {
  font-size: 16px;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}
.spec-table--panel {
  /* 値が箇条書きになるケース（会社概要の事業内容など）用の小さい黒丸リスト */
}
.spec-table--panel .spec-table__list {
  display: -ms-grid;
  display: grid;
  gap: clamp(0.25rem, 0.1607142857rem + 0.2380952381vw, 0.375rem);
}
.spec-table--panel .spec-table__list li {
  position: relative;
  padding-left: 1.2em;
}
.spec-table--panel .spec-table__list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 9px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #000;
}

.title-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
}
.title-wrap.is-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.title-wrap.is-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.title {
  display: -ms-grid;
  display: grid;
}
.title__main {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 0.8em;
  color: #000;
  font-size: 16px;
  letter-spacing: 0.05em;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-medium);
}
.title__main::before {
  content: "";
  position: absolute;
  width: 9px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #F2DF28;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
.title__category {
  margin-left: 0.5em;
  font-size: 16px;
  font-weight: var(--f-bold);
  position: relative;
  top: 3px;
}
.title__sub {
  display: block;
  color: #000;
  font-size: clamp(1.875rem, 1.7857142857rem + 0.2380952381vw, 2rem);
  font-weight: var(--f-bold);
  line-height: 1.4;
}
@media screen and (max-width: 767.9px) {
  .title__sub {
    line-height: 1.3;
  }
}
.title.is-white .title__main {
  color: #fff;
}
.title.is-white .title__sub {
  color: #fff;
}
.title.is-center {
  justify-items: center;
}
.title.is-s .title__sub {
  font-size: clamp(1.125rem, 1.0357142857rem + 0.2380952381vw, 1.25rem);
}

#sb_instagram .sb_instagram_header .sbi_header_text,
.sb_instagram_header .sbi_header_text,
#sb_instagram .sb_instagram_header, .sb_instagram_header,
#sb_instagram #sbi_load {
  display: none;
}

#sb_instagram.sbi_col_3 #sbi_images {
  padding: 0;
}

#sb_instagram #sbi_images .sbi_item {
  overflow: hidden;
  display: block;
  border-radius: 0.3125rem;
}

#sb_instagram #sbi_images .sbi_item img {
  width: 100%;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  #sb_instagram #sbi_images .sbi_item img:hover {
    scale: 1.06;
  }
}

/* 各ページのスタイル */
.is-mc {
  color: #F2DF28;
}

.is-sc {
  color: #526169;
}

.is-lb {
  color: #526169;
}

/*
 * front-page: ローディング画面。
 * .mvと同じ高さ・同じ.inner配置ルールにすることで、内側の見出し（.mv__title、クラスをそのまま流用）が
 * 実際のMVの見出しと同じ画面位置に重なるようにしている。
 * 背景・見出しをまとめて.loading-screen__clipで囲み、見出しの中心を基点にしたclip-path circle()を
 * かけることで、背景も文字も一緒に外側から見出しに向かって欠けながら消えていく演出にする。
 * JS（main.js：loadingScreenEvent）が表示→1行目→2行目の順にフェードイン→保持→背景ごと縮小→削除、の流れを制御する
 */
.loading-screen {
  /*
   * 初期値は非表示。表示するかどうかは読み込み直後のインラインscript（front-page.php）が
   * 同期的に判定し、表示する場合のみ.is-activeを付与する。ここをdisplay:blockのままにしておくと
   * JS判定が終わるまでの一瞬、背景色（黄色）がちらついて見えてしまうため
   */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  min-height: clamp(33.125rem, 28.4821428571rem + 12.380952381vw, 39.625rem);
}
.loading-screen.is-active {
  display: block;
}
@media screen and (max-width: 767.9px) {
  .loading-screen {
    min-height: clamp(43.75rem, 43.75rem + 0vw, 43.75rem);
  }
}
@media screen and (max-width: 479.9px) {
  .loading-screen {
    min-height: 660px;
  }
}
.loading-screen.is-hidden {
  pointer-events: none;
}
.loading-screen {
  /*
   * clip-path自体にはbox-shadowが効かない（円の外側は切り取られてしまう）ため、
   * filter: drop-shadow()を親（このラッパー）にかけることで、切り取り後の円の縁に沿って影を出す
   */
}
.loading-screen__bg-shadow {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-filter: drop-shadow(0 0 clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem) rgba(0, 0, 0, 0.35));
          filter: drop-shadow(0 0 clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem) rgba(0, 0, 0, 0.35));
}
.loading-screen {
  /* 背景と見出しをまとめて切り取るラッパー。ここにclip-path circle()をかける */
}
.loading-screen__clip {
  position: absolute;
  inset: 0;
  clip-path: circle(150% at 50% 55%);
  -webkit-transition: clip-path 0.8s ease;
  transition: clip-path 0.8s ease;
}
@media screen and (max-width: 767.9px) {
  .loading-screen__clip {
    clip-path: circle(150% at 50% 90%);
  }
}
.loading-screen.is-hidden .loading-screen__clip {
  clip-path: circle(0% at 50% 55%);
}
@media screen and (max-width: 767.9px) {
  .loading-screen.is-hidden .loading-screen__clip {
    clip-path: circle(0% at 50% 90%);
  }
}
.loading-screen__bg {
  position: absolute;
  inset: 0;
  background-color: #F2DF28;
}
.loading-screen .inner {
  position: absolute;
  z-index: 1;
  width: min(80rem, 100% - clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem));
  margin-inline: auto;
  left: 50%;
  translate: -50% -50%;
  top: 55%;
}
@media screen and (max-width: 767.9px) {
  .loading-screen .inner {
    top: auto;
    bottom: 30px;
    translate: -50% 0;
  }
}
.loading-screen {
  /* MVの見出しと同じ見た目（.mv__title-line自体のスタイルをそのまま使う）で、1行目→2行目の順にふわっと表示する */
}
.loading-screen .mv__title-line {
  opacity: 0;
  -webkit-transition: opacity 0.8s ease;
  transition: opacity 0.8s ease;
}
.loading-screen .mv__title-line:nth-child(2) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.loading-screen.is-visible .mv__title-line {
  opacity: 1;
}

.mv {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.75rem, 1.9642857143rem + 4.7619047619vw, 6.25rem);
  /* 文字群を中央よりも下寄りに配置するため、下端からの距離を可変ではなく固定100pxにする */
  background: url("../img/top/background_mv.jpg") no-repeat center/cover;
  min-height: clamp(33.125rem, 28.4821428571rem + 12.380952381vw, 39.625rem);
}
@media screen and (max-width: 767.9px) {
  .mv {
    background-image: url("../img/top/background_mv_sp.jpg");
    padding-top: 0;
    min-height: clamp(43.75rem, 43.75rem + 0vw, 43.75rem);
  }
}
@media screen and (max-width: 479.9px) {
  .mv {
    min-height: 660px;
  }
}
.mv__visual {
  position: absolute;
  top: 0;
  right: -7%;
  bottom: 0;
  z-index: 0;
  width: clamp(31.25rem, 15.8928571429rem + 40.9523809524vw, 52.75rem);
}
@media screen and (max-width: 767.9px) {
  .mv__visual {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    margin-top: clamp(1.5rem, 1.5rem + 0vw, 1.5rem);
  }
}
.mv {
  /* トラック：車より少し遅れて右から定位置へ移動してくる */
}
.mv__truck {
  position: absolute;
  z-index: 1;
  left: 0;
  top: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
  width: 844px;
  aspect-ratio: 844/460;
  -o-object-fit: contain;
     object-fit: contain;
  /* 背景画像の切り替えと同じタイミングでSP専用画像に差し替える */
}
@media screen and (max-width: 767.9px) {
  .mv__truck {
    content: url("../img/top/track_sp.png");
    top: clamp(1.875rem, 1.875rem + 0vw, 1.875rem);
    width: 562px;
    max-width: none;
    aspect-ratio: 562/307;
    left: auto;
    right: -61px;
  }
}
@media screen and (max-width: 479.9px) {
  .mv__truck {
    left: auto;
    right: -138px;
  }
}
.mv {
  /* 車：先に右から定位置へ移動してくる */
}
.mv__car {
  position: absolute;
  z-index: 2;
  left: 150px;
  bottom: 50px;
  width: 536px;
  aspect-ratio: 536/292;
  -o-object-fit: contain;
     object-fit: contain;
  /* 背景画像の切り替えと同じタイミングでSP専用画像に差し替え、見出しと被らないよう上に配置する */
}
@media screen and (max-width: 1199.9px) {
  .mv__car {
    top: 200px;
  }
}
@media screen and (max-width: 767.9px) {
  .mv__car {
    top: clamp(19.4375rem, 19.4375rem + 0vw, 19.4375rem);
    bottom: auto;
    left: auto;
    right: 0;
    top: 225px;
    content: url("../img/top/car_sp.png");
    width: 357px;
    max-width: none;
    aspect-ratio: 357/195;
  }
}
@media screen and (max-width: 479.9px) {
  .mv__car {
    right: -53px;
  }
}
.mv__text {
  z-index: 2;
  display: -ms-grid;
  display: grid;
  gap: 0.3125rem;
}
.mv__title {
  color: #000;
  /* html直下のf-clamp(16,20,1200,2600)によりrem基準が16pxを超える広幅画面では、f-clamp単体だと実測が77pxを超えてしまうため、min()で絶対値77pxを上限にする */
  font-size: min(clamp(2rem, -0.0089285714rem + 5.3571428571vw, 4.8125rem), 77px);
  font-weight: var(--f-black);
  line-height: 1.377;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767.9px) {
  .mv__title {
    font-size: 46px;
  }
}
@media screen and (max-width: 479.9px) {
  .mv__title {
    font-size: 28px;
  }
}
.mv .inner {
  position: absolute;
  width: min(80rem, 100% - clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem));
  margin-inline: auto;
  left: 50%;
  translate: -50% -50%;
  top: 55%;
  /* SPは領域の下端から30pxの位置に配置する */
}
@media screen and (max-width: 767.9px) {
  .mv .inner {
    top: auto;
    bottom: 30px;
    translate: -50% 0;
  }
}
.mv {
  /* 車・トラックの移動アニメーションが終わった後、行ごとに時間差で下からなめらかに表示 */
}
.mv__title-line {
  display: block;
  line-height: 1.35;
}
.mv__title-line:nth-child(2) {
  -webkit-animation-delay: 1.45s;
          animation-delay: 1.45s;
}
.mv__lead {
  color: #000;
  font-size: min(clamp(1.125rem, 0.5rem + 1.6666666667vw, 2rem), 32px);
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
  letter-spacing: 0;
}
@media screen and (max-width: 767.9px) {
  .mv__lead {
    font-size: 20px;
  }
}
@media screen and (max-width: 479.9px) {
  .mv__lead {
    font-size: 16px;
  }
}
.mv__description {
  color: #000;
  font-size: min(clamp(0.875rem, 0.6071428571rem + 0.7142857143vw, 1.25rem), 20px);
  font-weight: var(--f-medium);
  line-height: 2;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767.9px) {
  .mv__description {
    font-size: 20px;
  }
}
@media screen and (max-width: 479.9px) {
  .mv__description {
    font-size: 16px;
  }
}

/*
 * 内側の白い背景（カード）はこのパネルの中だけ。外側のセクションはグレーにする。
 * パネル自体は幅いっぱいに広がり、コンテンツ（.inner）は1280px幅で読みやすく収める。
 */
.news-top__panel {
  position: relative;
  padding-block: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
}

.news-top {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto clamp(1.25rem, -0.9821428571rem + 5.9523809524vw, 4.375rem) 1fr clamp(1.25rem, -0.9821428571rem + 5.9523809524vw, 4.375rem) auto;
  grid-template-columns: auto 1fr auto;
      grid-template-areas: "title list link";
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(1.25rem, -0.9821428571rem + 5.9523809524vw, 4.375rem);
}
@media screen and (max-width: 767.9px) {
  .news-top {
    -ms-grid-columns: 1fr auto;
    grid-template-columns: 1fr auto;
    -ms-grid-rows: auto clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem) auto clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem) auto;
        grid-template-areas: "title title" "list list" ". link";
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    row-gap: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  }
}
.news-top > .title {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: title;
  -ms-grid-row-align: start;
      align-self: start;
}
.news-top > .news-list {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: list;
  min-width: 0;
}
.news-top > .circle-more {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
  grid-area: link;
}

.news-list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 7px auto 7px 1fr;
  grid-template-columns: repeat(2, auto) 1fr;
  row-gap: 12px;
  -webkit-column-gap: 7px;
     -moz-column-gap: 7px;
          column-gap: 7px;
}
.news-list__item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: subgrid;
  grid-template-columns: subgrid;
  -ms-grid-column-span: 3;
  grid-column: span 3;
}
.news-list__link {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: subgrid;
  grid-template-columns: subgrid;
  -ms-grid-column-span: 3;
  grid-column: span 3;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: clamp(0.75rem, 0.6160714286rem + 0.3571428571vw, 0.9375rem);
  color: #000;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 767.9px) {
  .news-list__link {
    -ms-grid-columns: auto 1fr;
    grid-template-columns: auto 1fr;
    -ms-grid-rows: auto 0.25rem auto;
        grid-template-areas: "date category" "title title";
    row-gap: 0.25rem;
  }
  .news-list__link > .title {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
}
.news-list__date {
  color: #000;
  font-size: 1.125rem;
  font-weight: var(--f-regular);
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
  line-height: 1;
}
@media screen and (max-width: 767.9px) {
  .news-list__date {
    grid-area: date;
  }
}
.news-list__categories {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: clamp(0.375rem, 0.2857142857rem + 0.2380952381vw, 0.5rem) clamp(0.625rem, 0.5357142857rem + 0.2380952381vw, 0.75rem);
}
@media screen and (max-width: 767.9px) {
  .news-list__categories {
    grid-area: category;
  }
}
.news-list {
  /* 幅は固定せずテキスト量に応じて可変。複数並んだ時は.news-list__categoriesのgapでくっつかないようにする */
}
.news-list__category {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 1.25rem;
  padding-inline: 0.875rem;
  background-color: #F1F3F5;
  color: #50565E;
  font-size: 0.75rem;
  font-weight: var(--f-regular);
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}
.news-list__title {
  position: relative;
  /* サブグリッドの1frカラムだとテキスト幅を超えて箱が伸び、下線(background)も文字のない部分まで伸びてしまうため、文字幅に合わせる */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  color: #000;
  font-size: 1rem;
  font-weight: var(--f-regular);
  line-height: normal;
  /* 右端起点(100% 100%)で幅0にしておき、hoverで左端起点に切り替えて左から伸ばす。
     hoverを外すと起点が右に戻るため、線は右へ流れるように消える */
  background: -webkit-gradient(linear, left top, left bottom, from(currentcolor), to(currentcolor)) 100% 100%/0 1px no-repeat;
  background: linear-gradient(currentcolor, currentcolor) 100% 100%/0 1px no-repeat;
  -webkit-transition: background-size 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  transition: background-size 1s cubic-bezier(0.33, 1, 0.68, 1) 0s;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  word-break: break-all;
}
@media screen and (max-width: 767.9px) {
  .news-list__title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: title;
  }
}
@media (hover: hover) {
  .news-list__link:hover .news-list__title {
    background-position: 0 100%;
    background-size: 100% 1px;
  }
}

/*
 * お知らせ一覧（archive-news / taxonomy-news_type）専用の調整。トップページのお知らせ（news-list.php）には影響させない。
 * ・タイトルを2行まで表示
 * ・行間を広げ、行の間にborderを追加（gapではなく各行のpadding+borderで表現する）
 * ・各行の右端に丸背景の矢印アイコンを追加
 */
.section-bg--archive .news-list {
  row-gap: 0;
}
.section-bg--archive .news-list .news-list__item {
  position: relative;
  border-bottom: 1px solid #939393;
  padding-block: clamp(1.25rem, 0.8035714286rem + 1.1904761905vw, 1.875rem);
  /* 一覧の先頭・最後にも枠として線を出す（間の区切り線はborder-bottomのまま）。paddingは他の項目と揃え、線と文字の間隔も統一する */
}
.section-bg--archive .news-list .news-list__item:first-child {
  border-top: 1px solid #939393;
}
.section-bg--archive .news-list .news-list__item {
  /*
   * hoverで行の塗りつぶしを表示する。上下を5pxあけたいので、item自体の背景ではなく
   * inset分だけ小さい疑似要素を敷く（::beforeはDOM上先頭に生成されるため、上に重ねるz-index指定は不要）
   */
}
.section-bg--archive .news-list .news-list__item::before {
  content: "";
  position: absolute;
  inset: 5px 0;
  background-color: rgba(242, 223, 40, 0.6);
  opacity: 0;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .section-bg--archive .news-list .news-list__item:hover::before {
    opacity: 1;
  }
}
.section-bg--archive .news-list .news-list__link {
  position: relative;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: 10px clamp(1.25rem, 0.8035714286rem + 1.1904761905vw, 1.875rem);
  padding-right: clamp(2.5rem, 2.0535714286rem + 1.1904761905vw, 3.125rem);
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  padding-inline: 10px;
}
.section-bg--archive .news-list .news-list__link::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  translate: 0 -50%;
  width: 30px;
  aspect-ratio: 40/40;
  background: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23000"/><path d="M27.6869 20.3536C27.8822 20.1583 27.8822 19.8417 27.6869 19.6464L24.5049 16.4645C24.3097 16.2692 23.9931 16.2692 23.7978 16.4645C23.6026 16.6597 23.6026 16.9763 23.7978 17.1716L26.6263 20L23.7978 22.8284C23.6026 23.0237 23.6026 23.3403 23.7978 23.5355C23.9931 23.7308 24.3097 23.7308 24.5049 23.5355L27.6869 20.3536ZM11.3334 20L11.3334 20.5L27.3334 20.5L27.3334 20L27.3334 19.5L11.3334 19.5L11.3334 20Z" fill="%23000"/></svg>') no-repeat center/contain;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.section-bg--archive .news-list .news-list__title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
  /*
   * subgridの列幅は親（.news-list）基準のままで、.news-list__linkのpadding-rightぶんは
   * 差し引かれないため、タイトル自身にも同じだけpadding-rightを持たせてアイコンとの
   * 衝突を防ぐ（max-width:100%はこのpadding込みのボックスに対して効くのでこれで足りる）
   */
  padding-right: clamp(2.5rem, 2.0535714286rem + 1.1904761905vw, 3.125rem);
}
.section-bg--archive .news-list {
  /* SPはバッジが大きく、1つずつ改行されて縦一列に見えていたため、2周りほど小さくして横に並びやすくする */
}
@media screen and (max-width: 767.9px) {
  .section-bg--archive .news-list .news-list__category {
    height: 1rem;
    padding-inline: 0.5rem;
    font-size: 0.625rem;
  }
}
.section-bg--archive .news-list {
  /* テキストの下線が流れるアニメーションは停止する（.news-list__link:hoverの共通ルールを打ち消す） */
}
@media (hover: hover) {
  .section-bg--archive .news-list .news-list__link:hover .news-list__title {
    background-size: 0 1px;
  }
}

/*
 * 共通パーツ：セクション背景の透かし文字（Company/Work/Service等の大きな英字）
 * 汎用クラス.bg-textに背景色ごとの配色モディファイアを組み合わせて使う。マークアップ例：
 * <p class="bg-text bg-text--gray js-watch" aria-hidden="true">Company</p>
 * y/pなど下にはみ出るディセンダー部分を隠し、文字の下端をベースラインで揃える
 */
.bg-text {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  height: 0.79em;
  margin: 0;
  font-size: 184px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  /* 点滅アニメーションは廃止。各モディファイアの色は元のアニメーションの最終到達色を固定で適用する */
  opacity: 1;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}
.works__panel .bg-text {
  right: 26px;
}
@media screen and (max-width: 767.9px) {
  .works__panel .bg-text {
    left: 15px !important;
  }
}

.bg-text {
  /* 白背景のセクション用：ごく薄いグレーの文字（旧.company__bg-text） */
}
.bg-text--gray {
  color: #F1F3F5;
}
.bg-text {
  /* 黒背景のセクション用：.service白文字（旧.works__bg-text） */
}
.bg-text--white {
  color: #fff;
}
.bg-text {
  /* グレー背景のセクション用（新規）：黒文字 */
}
.bg-text--black {
  color: #000;
}
.bg-text--black-2 {
  color: #191919;
}

.company {
  position: relative;
  z-index: 1;
  display: -ms-grid;
  display: grid;
  -webkit-column-gap: clamp(2rem, 0.75rem + 3.3333333333vw, 3.75rem);
     -moz-column-gap: clamp(2rem, 0.75rem + 3.3333333333vw, 3.75rem);
          column-gap: clamp(2rem, 0.75rem + 3.3333333333vw, 3.75rem);
  row-gap: clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem);
  -ms-grid-columns: 1fr clamp(2rem, 0.75rem + 3.3333333333vw, 3.75rem) clamp(25.3125rem, 25.3125rem + 0vw, 25.3125rem);
  grid-template-columns: 1fr clamp(25.3125rem, 25.3125rem + 0vw, 25.3125rem);
  -ms-grid-rows: auto clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem) auto;
      grid-template-areas: "body visual" "button visual";
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}
@media screen and (max-width: 767.9px) {
  .company {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto clamp(2rem, 0.75rem + 3.3333333333vw, 3.75rem) auto clamp(2rem, 0.75rem + 3.3333333333vw, 3.75rem) auto;
        grid-template-areas: "body" "visual" "button";
    row-gap: clamp(2rem, 0.75rem + 3.3333333333vw, 3.75rem);
  }
}
.company__body {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: body;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 26.25rem;
          flex: 1 1 26.25rem;
  min-width: 20rem;
  display: -ms-grid;
  display: grid;
  gap: clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem);
}
.company {
  /* PCは.company__body（文章）の下、SPは.company__visual（画像）の後、一番下に配置する（サイズはPC/SPで変更しない） */
}
.company__button {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  grid-area: button;
  -ms-grid-column-align: start;
      justify-self: start;
}
@media screen and (max-width: 767.9px) {
  .company__button {
    -ms-grid-column-align: center;
        justify-self: center;
    /* 画像カードとの間が詰まっていたため少し離す */
    margin-top: 20px;
  }
}
.company__heading {
  color: #000;
  font-size: clamp(1.5rem, 0.6964285714rem + 2.1428571429vw, 2.625rem);
  font-weight: var(--f-black);
  line-height: 1.69;
  letter-spacing: 0.1em;
}
.company__text {
  color: #000;
  font-size: 1rem;
  font-weight: var(--f-regular);
  line-height: 1.76;
  /* 見出し（&__heading）との間だけ、SPで.company__bodyのgap分より少し詰める */
}
@media screen and (max-width: 767.9px) {
  .company__text {
    margin-top: -10px;
  }
}
.company__visual {
  -ms-grid-row: 1;
  -ms-grid-row-span: 3;
  -ms-grid-column: 3;
  grid-area: visual;
  position: relative;
  width: clamp(22.3125rem, 22.3125rem + 0vw, 22.3125rem);
  aspect-ratio: 357/480;
  border-radius: 15px;
  /* SPは80%サイズにし、最大幅500pxで頭打ちにする */
}
@media screen and (max-width: 767.9px) {
  .company__visual {
    width: 80%;
    max-width: 500px;
    margin-inline: auto;
  }
}
.company {
  /*
   * 3枚（青・黄・写真）は初期状態は画面上方にずれた位置に重なっており、
   * セクションが画面に入ったら（.js-watch→.is-inviewで判定）3枚目（青）→2枚目（黄）→1枚目（写真）の順に0.15sずつ遅れて垂直に落下する（ease-outでしっかり減速して着地）。
   * 各レイヤーは着地が完全に終わってから0.05s空けて（fallの所要時間＋0.05sぶん遅らせたrotateのtransition-delay）扇状に開き始める。
   * 落下中に回転し始めると"落ちながら開く"ように見えてしまうため、着地と展開の間に必ず間を作っている
   */
}
.company__visual::before, .company__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 15px;
  rotate: 0deg;
  translate: 0 -80px;
  /* 画面に入るまでは完全に非表示にし、アニメーション開始と同時に見えるようにする */
  opacity: 0;
}
.company {
  /* 色はJS（main.js：companyCardColorEvent）が--card-color-1/-2を書き換えて数色でループさせる。CSS変数未対応時や初期表示用にfallbackとして既定色を指定 */
}
.company__visual::before {
  background-color: var(--card-color-1, #0086C8);
  /* 3枚目（一番奥）：最初に落下する。着地（0.5s後）でしっかり止まってから、少し間（0.05s）を置いて扇状展開が始まる */
  -webkit-transition: rotate 0.6s cubic-bezier(0.22, 1.6, 0.36, 1) 0.55s, background-color 0.6s ease, translate 0.5s ease-out, opacity 0.1s ease-out;
  transition: rotate 0.6s cubic-bezier(0.22, 1.6, 0.36, 1) 0.55s, background-color 0.6s ease, translate 0.5s ease-out, opacity 0.1s ease-out;
}
.company__visual::after {
  z-index: 1;
  background-color: var(--card-color-2, #F2DF28);
  /* 2枚目：3枚目より0.15s遅れて落下開始。着地（0.65s後）でしっかり止まってから、少し間（0.05s）を置いて扇状展開が始まる */
  -webkit-transition: rotate 0.6s cubic-bezier(0.22, 1.6, 0.36, 1) 0.7s, background-color 0.6s ease, translate 0.5s ease-out 0.15s, opacity 0.1s ease-out 0.15s;
  transition: rotate 0.6s cubic-bezier(0.22, 1.6, 0.36, 1) 0.7s, background-color 0.6s ease, translate 0.5s ease-out 0.15s, opacity 0.1s ease-out 0.15s;
}
.company__visual.is-inview::before, .company__visual.is-inview::after {
  translate: 0 0;
  opacity: 1;
}
.company__visual.is-inview::before {
  rotate: -6deg;
}
.company__visual.is-inview::after {
  rotate: 0deg;
}
.company {
  /* position:relativeだと実画像の縦横比によって高さが崩れることがあるため、absolute+insetで確実に枠内へ収める */
}
.company__img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.25rem;
  rotate: 0deg;
  border-radius: 15px;
  translate: 0 -80px;
  opacity: 0;
  /* 1枚目（写真）：2枚目より0.15s遅れて（合計0.3s遅れて）落下開始。着地（0.8s後）でしっかり止まってから、少し間（0.05s）を置いて扇状展開が始まる */
  -webkit-transition: rotate 0.6s cubic-bezier(0.22, 1.6, 0.36, 1) 0.85s, opacity 0.8s ease, translate 0.5s ease-out 0.3s;
  transition: rotate 0.6s cubic-bezier(0.22, 1.6, 0.36, 1) 0.85s, opacity 0.8s ease, translate 0.5s ease-out 0.3s;
  /*
   * 先頭の画像はスライドショーにしている（Splideは使わずjs-company-sliderの単純なクラス切り替えのみ）。
   * .company__imgを複数並べて重ね、.is-activeが付いているものだけopacity:1で表示する。
   * 画面に入る（.is-inview）前は初期表示のis-active画像も含めて非表示にし、アニメーション開始と同時に見えるようにする
   */
}
.company__visual.is-inview .company__img.is-active {
  opacity: 1;
}
.company__visual.is-inview .company__img {
  rotate: 6deg;
  translate: 0 0;
}

/*
 * front-page 企業情報セクションの背景透かし文字（#company > .section-bg--inner-radius > .bg-text）。
 * SPのみ右下の横書きから左上の縦書きに変更する（他セクションのbg-text（Work/Service等）には影響させない）。
 */
@media screen and (max-width: 767.9px) {
  #company .bg-text {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 0.79em;
    height: auto;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    font-size: 108px;
  }
  #company {
    /* .companyブロック自体がposition:relative; z-index:1; を持つため、.bg-text（z-index:0）より常に手前に表示される（.works側と違いtitle-wrap個別の調整は不要） */
  }
}

/*
 * #service .bg-text（「Service」の透かし文字）はデフォルトのまま（横書き・右下・font-size:184px・white-space:nowrap）だと
 * 幅が画面より大きくなり、祖先に横方向のoverflow:hiddenが無いためページが横スクロールしてしまっていた。
 * #company/#worksと同様にSPは左上・縦書きに変更し、幅を0.79emに収めて解消する。
 */
@media screen and (max-width: 767.9px) {
  #service .bg-text {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 0.79em;
    height: auto;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    font-size: 108px;
  }
  #service {
    /* .bg-textより見出しを常に手前にする（#worksと同じ理由） */
  }
  #service .title-wrap {
    position: relative;
    z-index: 1;
  }
}

.service {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: min(clamp(25rem, 19.4642857143rem + 14.7619047619vw, 32.75rem), 45%) clamp(2.5rem, -1.9642857143rem + 11.9047619048vw, 8.75rem) 1fr;
  grid-template-columns: min(clamp(25rem, 19.4642857143rem + 14.7619047619vw, 32.75rem), 45%) 1fr;
  gap: clamp(2.5rem, -1.9642857143rem + 11.9047619048vw, 8.75rem);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: clamp(2.5rem, 0.7142857143rem + 4.7619047619vw, 5rem);
}
@media screen and (max-width: 1199.9px) {
  .service {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.service {
  /* SPは左のホバー切り替え画像エリアを非表示にし、リストのみ表示する */
}
.service__visual {
  position: relative;
  top: -150px;
}
@media screen and (max-width: 1199.9px) {
  .service__visual {
    display: none;
  }
}
.service__img {
  position: absolute;
  border-radius: 0.25rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.service__img--1 {
  top: 0;
  left: 0;
  z-index: 0;
  width: min(clamp(16.75rem, 16.75rem + 0vw, 16.75rem), 45%);
}
.service__img--2 {
  top: 30%;
  right: 0;
  z-index: 1;
  width: min(clamp(20.875rem, 20.875rem + 0vw, 20.875rem), 65%);
}
.service__img {
  /*
   * 事業案内リストのホバーで画像を切り替えた時、左は上から下へ・右は下から上へ移動しながら同時に表示する（クラスの付け外しはmain.js側で行う）。
   * イージングは開始が速く終わりに向けて減速するcubic-bezier（.mv内の演出と共通）にして、動きの速さを緩やかに感じさせる。
   */
}
.service__img--1.is-slide-in-top {
  -webkit-animation-name: service-img-slide-in-top;
          animation-name: service-img-slide-in-top;
  -webkit-animation-duration: 0.65s;
          animation-duration: 0.65s;
  -webkit-animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
          animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.service__img--2.is-slide-in-bottom {
  -webkit-animation-name: service-img-slide-in-bottom;
          animation-name: service-img-slide-in-bottom;
  -webkit-animation-duration: 0.65s;
          animation-duration: 0.65s;
  -webkit-animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
          animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.service__body {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 30rem;
          flex: 1 1 30rem;
  min-width: 20rem;
  display: -ms-grid;
  display: grid;
  gap: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
}
.service__more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.service-list {
  display: -ms-grid;
  display: grid;
}
.service-list__item {
  border-bottom: 1px solid #fff;
  -webkit-transition: border-color 1s ease;
  transition: border-color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.service-list__item:first-child {
  border-top: 1px solid #fff;
}
.service-list__item {
  /* 直前の項目のborder-bottom（見た目上は次項目の上辺）も、次項目がhoverされたタイミングで一緒にメインカラーへ切り替える */
}
@media (hover: hover) {
  .service-list__item:has(+ .service-list__item:hover) {
    border-bottom: 1px solid #F2DF28;
  }
}
@media (hover: hover) {
  .service-list__item:hover {
    border-color: #F2DF28;
  }
  .service-list__item:hover .service-list__link {
    color: #F2DF28;
  }
  .service-list__item:hover .circle-more {
    color: #F2DF28;
  }
  .service-list__item:hover .circle-more .circle-more__icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23F2DF28"/><path d="M27.6869 20.3536C27.8822 20.1583 27.8822 19.8417 27.6869 19.6464L24.5049 16.4645C24.3097 16.2692 23.9931 16.2692 23.7978 16.4645C23.6026 16.6597 23.6026 16.9763 23.7978 17.1716L26.6263 20L23.7978 22.8284C23.6026 23.0237 23.6026 23.3403 23.7978 23.5355C23.9931 23.7308 24.3097 23.7308 24.5049 23.5355L27.6869 20.3536ZM11.3334 20L11.3334 20.5L27.3334 20.5L27.3334 20L27.3334 19.5L11.3334 19.5L11.3334 20Z" fill="%23F2DF28"/></svg>');
  }
  .service-list__item:hover .circle-more.is-external .circle-more__icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23F2DF28"/><path d="M25.4868 14.3445C25.4868 14.0684 25.2629 13.8445 24.9868 13.8445L20.4868 13.8445C20.2107 13.8445 19.9868 14.0684 19.9868 14.3445C19.9868 14.6206 20.2107 14.8445 20.4868 14.8445L24.4868 14.8445L24.4868 18.8445C24.4868 19.1206 24.7107 19.3445 24.9868 19.3445C25.2629 19.3445 25.4868 19.1206 25.4868 18.8445L25.4868 14.3445ZM13.6731 25.6582L14.0266 26.0118L25.3404 14.698L24.9868 14.3445L24.6333 13.9909L13.3195 25.3046L13.6731 25.6582Z" fill="%23F2DF28"/></svg>');
  }
}
.service-list__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: clamp(1rem, 0.6428571429rem + 0.9523809524vw, 1.5rem);
  padding-block: clamp(1rem, 0.6428571429rem + 0.9523809524vw, 1.5rem);
  color: #fff;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  /* 「View More」は共通パーツ化した.circle-more（component/_button.scss）が標準で持つため、ここでは配置のみ指定する。暗い背景のため.is-white版を使う */
}
.service-list__link > .circle-more {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: color 1s ease;
  transition: color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.service-list__title {
  font-size: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  font-weight: var(--f-bold);
  letter-spacing: 0.05em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 767.9px) {
  .service-list .circle-more__text {
    display: none;
  }
}

#works {
  position: relative;
  /* SPは背景の透かし文字「Work」も#companyと同様に左上・縦書きにする */
}
@media screen and (max-width: 767.9px) {
  #works .bg-text {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 0.79em;
    height: auto;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    font-size: 108px;
  }
  #works {
    /* .bg-textはposition:absolute+z-index:0のため、静的配置の.title-wrapより手前に描画されてしまう。見出しを常に手前にする */
  }
  #works .title-wrap {
    position: relative;
    z-index: 1;
  }
}

/*
 * 内側の背景（グレー）はこのパネルの中だけ。外側のセクションは白のまま。
 * パネル自体は幅いっぱいに広がり、上下に約50pxの余白を取る。
 * タイトル・リード文・ボタンはパネル内の.innerで読みやすい幅に収め、
 * スライドショーだけは.innerの外＝パネル幅いっぱいに配置してはみ出させる。
 */
.works__panel {
  padding-block: 3.125rem 3.125rem;
  position: relative;
}
@media screen and (max-width: 767.9px) {
  .works__panel {
    padding-block: 1.875rem;
  }
}
.works__panel {
  /*
   * .innerの左右の余白がグレー背景（.section-bg--inner-radius--works::before）の余白と
   * 同じf-clamp(30,60)で計算されるため、値が一致してテキストが背景の端にくっついて見えていた。
   * テキスト側にさらに余白を追加する（スライドショー（.works）は.innerの外なので影響しない）。
   */
}
.works__panel > .inner {
  padding-inline: clamp(0.9375rem, 0.2678571429rem + 1.7857142857vw, 1.875rem);
}

/*
 * 事業詳細ページ：関連施工事例セクションの直後に続くお問い合わせセクション（.section-bg--page）は、
 * 上の余白（.section-bg--top-newsの下padding）と自分自身の上padding（.section-bg--pageの上padding）が
 * 両方乗るため間隔が広く見えていた。他ページの.section-bg--pageには影響させず、この並びの時だけSPで詰める。
 */
@media screen and (max-width: 767.9px) {
  section:has(> .section-bg--top-news .works__panel) + section > .section-bg--page {
    padding-top: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
  }
}

/*
 * 「グレー背景＋白カード」のパネル（.section-bg--top-news.is-gray > .section-bg--inner-radius）が2つ連続すると、
 * 1つ目の下paddingと2つ目の上paddingが両方乗って間隔が広く見える。2つ目以降が続く時だけ上paddingを無くす。
 */
section:has(> .section-bg--top-news.is-gray) + section > .section-bg--top-news.is-gray {
  padding-top: 0;
}

/*
 * 採用情報ページ：メッセージ（.section-bg--top-news）の直後に続く募集要項（.section-bg--page）は、
 * 上の余白（.section-bg--top-newsの下padding）と自分自身の上padding（.section-bg--pageの上padding）が
 * 両方乗ってSPで間隔が広く見えていた。他ページの.section-bg--pageには影響させず、この並びの時だけSPで上paddingを無くす。
 */
@media screen and (max-width: 767.9px) {
  section:has(> .section-bg--top-news.is-gray) + section > .section-bg--page.is-gray {
    padding-top: 0;
  }
}

/*
 * 事業詳細ページの関連施工事例セクション（.section-bg--inner-radius > .bg-text + .inner.works__panel）は
 * #worksのようなID/固定の入れ子構造を持たないため専用に指定する。トップページの#worksと同じくSPは左上・縦書きにする。
 */
@media screen and (max-width: 767.9px) {
  .section-bg--inner-radius:has(> .works__panel) > .bg-text {
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 0.79em;
    height: auto;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    font-size: 108px;
  }
  .section-bg--inner-radius:has(> .works__panel) .title-wrap {
    position: relative;
    z-index: 1;
  }
}

.works__lead {
  position: relative;
  z-index: 1;
  margin-top: clamp(0.75rem, 0.5714285714rem + 0.4761904762vw, 1rem);
  color: #000;
  font-size: clamp(0.875rem, 0.7857142857rem + 0.2380952381vw, 1rem);
  font-weight: var(--f-regular);
  line-height: 1.76;
}

.works {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
  /*
   * カードは白背景・黒文字が基本。hoverしたら黒背景・白文字に反転する。
   * サムネイルは幅いっぱい・上マージンなしで敷き、テキスト部分だけに内側の余白を持たせる。
   * .works__item / .works__linkともに高さ100%にして、Splideの各スライドの高さ（一番高いカードに揃う）に合わせる
   */
}
.works__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  min-height: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: #fff;
  color: #000;
  -webkit-transition: background-color, color 0.3s ease;
  transition: background-color, color 0.3s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .works__link:hover {
    background-color: #F2DF28;
    color: #000;
  }
}
.works__thumb {
  display: block;
  overflow: hidden;
  width: 100%;
  height: min(12.25rem, 196px);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.works__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  scale: 1;
  -webkit-transition: scale 0.4s ease;
  transition: scale 0.4s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .works__link:hover .works__img {
    scale: 1.08;
  }
}
.works__body {
  display: -ms-grid;
  display: grid;
  gap: clamp(0.375rem, 0.375rem + 0vw, 0.375rem);
  padding: clamp(0.75rem, 0.6607142857rem + 0.2380952381vw, 0.875rem);
  -ms-grid-rows: auto clamp(0.375rem, 0.375rem + 0vw, 0.375rem) 1fr clamp(0.375rem, 0.375rem + 0vw, 0.375rem) auto;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}
.works {
  /* colorは.works__linkから継承させ、hover時に自動で白へ切り替わるようにする */
}
.works__date {
  font-size: min(clamp(1rem, 0.9107142857rem + 0.2380952381vw, 1.125rem), 18px);
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}
.works__title {
  font-size: min(clamp(1rem, 1rem + 0vw, 1rem), 16px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}
.works__category {
  margin-top: clamp(0.3125rem, -0.1785714286rem + 1.3095238095vw, 1rem);
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
  border-radius: 45px;
  background-color: #F1F3F5;
  color: #696F77;
  max-inline-size: -webkit-max-content;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  padding-inline: 5px;
}
.works__panel .inner, .works__panel .works, .works__panel .button {
  z-index: 1;
}
.works__panel .bg-text {
  z-index: 0;
}

/*
 * 事業詳細ページの関連施工事例グリッド（.works__panel .works-grid）だけhoverの挙動を変える。
 * 施工事例一覧（/works/）は同じ.works-gridクラスを使うが.works__panel配下ではないため対象外になり、
 * 他のカード型と同じ.works__link既定のhover（背景黄色に反転）のままになる
 */
@media (hover: hover) {
  .works__panel .works-grid .works__link:hover {
    background-color: #fff;
    color: #000;
    -webkit-box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.15);
            box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.15);
  }
}

.works__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: min(3.125rem, 50px);
  aspect-ratio: 1/1;
  border: none;
  background: url('data:image/svg+xml;charset=utf8,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="25" fill="%23000"/><path d="M22 31L28 25L22 19" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
  cursor: pointer;
  translate: 0 -50%;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .works__arrow:hover {
    opacity: 0.8;
  }
}
.works__arrow--prev {
  scale: -1 1;
  left: 10px;
  /* SPは中央寄せ表示（focus:'center'）に合わせて、ボタンも少し内側へ寄せる */
}
.works__arrow--next {
  right: 10px;
}

.works__more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
}

.instagram {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr clamp(0.9375rem, 0.9375rem + 0vw, 0.9375rem) 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.9375rem, 0.9375rem + 0vw, 0.9375rem);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin-top: clamp(1.875rem, 1.1607142857rem + 1.9047619048vw, 2.875rem);
}
@media screen and (max-width: 767.9px) {
  .instagram {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.instagram {
  /* SPは投稿一覧（フィード）を先に、黄色いフォローカードを後ろに表示する（PCではDOM順どおり黄色カードが先） */
}
.instagram__static {
  display: -ms-grid;
  display: grid;
  -ms-flex-line-pack: center;
      align-content: center;
  justify-items: center;
  padding: clamp(1.875rem, 1.875rem + 0vw, 1.875rem) clamp(1.5rem, 1.2321428571rem + 0.7142857143vw, 1.875rem) clamp(2.5rem, 2.0535714286rem + 1.1904761905vw, 3.125rem);
  border-radius: 0.3125rem;
  background-color: #F2DF28;
  text-align: center;
}
@media screen and (max-width: 767.9px) {
  .instagram__static {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}
.instagram__static {
  /* 背景が黄色のため、デフォルトのhover色（黄色）だと同化してしまう。ここだけ白背景+黒文字に変える */
}
@media (hover: hover) {
  .instagram__static .button__item:hover {
    background-color: #fff;
    color: #000;
  }
  .instagram__static .button__item:hover .button__icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="%23000"/><path d="M6.48116 12.4765C6.2859 12.6718 6.2859 12.9884 6.48116 13.1836C6.67643 13.3789 6.99301 13.3789 7.18827 13.1836L6.83472 12.8301L6.48116 12.4765ZM12.9916 7.17322C12.9916 6.89708 12.7677 6.67322 12.4916 6.67322L7.99157 6.67322C7.71543 6.67322 7.49157 6.89708 7.49157 7.17322C7.49157 7.44937 7.71543 7.67322 7.99157 7.67322L11.9916 7.67322L11.9916 11.6732C11.9916 11.9494 12.2154 12.1732 12.4916 12.1732C12.7677 12.1732 12.9916 11.9494 12.9916 11.6732L12.9916 7.17322ZM6.83472 12.8301L7.18827 13.1836L12.8451 7.52678L12.4916 7.17322L12.138 6.81967L6.48116 12.4765L6.83472 12.8301Z" fill="%23fff"/></svg>');
  }
}
.instagram__logo {
  width: clamp(9.125rem, 9.125rem + 0vw, 9.125rem);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #fff;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 767.9px) {
  .instagram__logo {
    width: 80px;
  }
}
.instagram__company {
  margin-top: clamp(0.625rem, 0.625rem + 0vw, 0.625rem);
  color: #000;
  font-size: 1rem;
  font-weight: var(--f-black);
  line-height: 1.406;
  letter-spacing: 0.1em;
  display: -ms-grid;
  display: grid;
}
.instagram__company-en {
  color: #000;
  font-size: 0.75rem;
  font-weight: var(--f-medium);
  font-style: normal;
  line-height: normal;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
}
.instagram__lead-group {
  display: -ms-grid;
  display: grid;
  gap: 5px;
  margin-block: clamp(1.25rem, 1.0267857143rem + 0.5952380952vw, 1.5625rem) clamp(0.625rem, 0.625rem + 0vw, 0.625rem);
}
.instagram__lead {
  color: #000;
  font-size: 1rem;
  font-weight: var(--f-bold);
  line-height: normal;
}
.instagram {
  /* 「フォローはコチラから！」とQRコードの間の区切り装飾 */
}
.instagram__arrow-down {
  width: 0.875rem;
  aspect-ratio: 14/7;
  background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="7" viewBox="0 0 14 7" fill="none"><path d="M6.92819 6.75L13.8564 0H0L6.92819 6.75Z" fill="%23000"/></svg>') no-repeat center/contain;
  margin-inline: auto;
}
.instagram__qr {
  display: -ms-grid;
  display: grid;
  place-items: center;
  width: clamp(13.875rem, 13.875rem + 0vw, 13.875rem);
  border-radius: 5px;
  margin-bottom: clamp(0.625rem, 0.625rem + 0vw, 0.625rem);
}
@media screen and (max-width: 767.9px) {
  .instagram__qr {
    width: 136px;
  }
}
.instagram__qr-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 0.125rem;
  background-color: #939393;
}
.instagram__feed {
  -webkit-box-flex: 2;
      -ms-flex: 2 1 30rem;
          flex: 2 1 30rem;
  min-width: 20rem;
  display: -ms-grid;
  display: grid;
  gap: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  -ms-flex-line-pack: start;
      align-content: start;
}
@media screen and (max-width: 767.9px) {
  .instagram__feed {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    min-width: auto;
    width: 100%;
  }
}
.instagram {
  /* 「投稿をもっと見る」の見た目・ホバー演出は共通パーツ化した.link-arrow（component/_button.scss）が標準で持つため、ここでは配置のみ指定する */
}
.instagram__more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.info-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr clamp(1.5rem, -0.5535714286rem + 5.4761904762vw, 4.375rem) 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, -0.5535714286rem + 5.4761904762vw, 4.375rem);
}
@media screen and (max-width: 767.9px) {
  .info-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.info-card {
  position: relative;
  padding: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
  border-radius: 0.5rem;
  background-color: #F1F3F5;
  overflow: hidden;
  /* 見出しのサイズだけ調整する（共通の.title自体は変更しない） */
}
.info-card .title__sub {
  font-size: 1.5rem;
}
.info-card {
  /* 「お電話」ラベルと電話番号の間の縦線区切り。縦積みになる1300px以下は非表示にする */
}
.info-card__tel-body {
  position: relative;
}
.info-card__tel-body::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--gap) / 2 * -1);
  width: 1px;
  height: 100%;
  background-color: #939393;
}
@media screen and (max-width: 1300px) {
  .info-card__tel-body::after {
    display: none;
  }
}
@media screen and (max-width: 1300px) {
  .info-card__tel-body {
    margin-top: 40px;
    gap: 10px;
    display: -ms-grid;
    display: grid;
  }
}
@media screen and (max-width: 767.9px) {
  .info-card__tel-body {
    margin-top: 0;
    gap: 0;
  }
}
.info-card__text {
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  line-height: 1.8;
}
@media screen and (max-width: 1300px) {
  .info-card__text-br {
    display: none;
  }
}
.info-card__inner {
  display: -ms-grid;
  display: grid;
  gap: clamp(0.875rem, 0.7857142857rem + 0.2380952381vw, 1rem);
  height: 100%;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -ms-grid-rows: auto clamp(0.875rem, 0.7857142857rem + 0.2380952381vw, 1rem) 1fr clamp(0.875rem, 0.7857142857rem + 0.2380952381vw, 1rem) auto;
  grid-template-rows: auto 1fr auto;
  /* 画像付き（採用情報）はテキストと画像を横並びにするが、1300px以下は見出し→画像→ボタンの縦積みにする */
}
.info-card__inner:has(.info-card__img) {
  -ms-grid-columns: 1fr auto;
  grid-template-columns: 1fr auto;
  -ms-grid-rows: 1fr auto;
  grid-template-rows: 1fr auto;
}
.info-card__inner:has(.info-card__img) > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}
.info-card__inner:has(.info-card__img) > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
.info-card__inner:has(.info-card__img) > *:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
}
.info-card__inner:has(.info-card__img) > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}
.info-card__inner:has(.info-card__img) .info-card__button {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1/3;
}
@media screen and (max-width: 1300px) {
  .info-card__inner:has(.info-card__img) {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto auto auto;
    grid-template-rows: auto auto auto;
  }
  .info-card__inner:has(.info-card__img) > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .info-card__inner:has(.info-card__img) > *:nth-child(2) {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
  }
  .info-card__inner:has(.info-card__img) > *:nth-child(3) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .info-card__inner:has(.info-card__img) .info-card__button {
    -ms-grid-column: 1;
    grid-column: 1;
  }
}
.info-card__title-group {
  display: -ms-grid;
  display: grid;
  gap: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  -ms-flex-line-pack: start;
      align-content: flex-start;
}
.info-card__img {
  width: 230px;
  -o-object-fit: cover;
     object-fit: cover;
  /* 見出し→画像→ボタンの縦積みになる1300px以下は画像を中央寄せにする */
}
@media screen and (max-width: 1300px) {
  .info-card__img {
    margin-inline: auto;
  }
}
@media screen and (max-width: 1300px) {
  .info-card__img {
    width: 100%;
    content: url("../img/top/recruit_img_sp.png");
    max-width: 300px;
  }
}
.info-card {
  /* PCは「お電話」ラベルと電話番号を横並びにするが、1300px以下は縦積み・中央寄せにする */
}
.info-card__tel {
  --gap: clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto var(--gap) auto var(--gap) 1fr;
  grid-template-columns: auto auto 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: var(--gap);
  align-self: flex-start;
  margin-top: 15px;
}
@media screen and (max-width: 1300px) {
  .info-card__tel {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 15px;
  }
}
.info-card__tel-label {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: #000;
  font-size: 15px;
  font-weight: var(--f-bold);
  /*
   * 縦積みになる1300px以下は、横並び時の縦の区切り線の代わりにラベル下に下線を入れる。
   * ラベル自体は左寄せ、下線はコンテンツ幅いっぱいまで広げる（親.info-card__telのjustify-items:centerを上書き）
   */
}
@media screen and (max-width: 1300px) {
  .info-card__tel-label {
    -ms-grid-column-align: start;
        justify-self: start;
    width: 100%;
    text-align: left;
    padding-bottom: 8px;
    border-bottom: 1px solid #939393;
  }
}
.info-card__tel-number {
  gap: clamp(0.375rem, 0.2857142857rem + 0.2380952381vw, 0.5rem);
  font-size: 39px;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-medium);
  line-height: 1;
  letter-spacing: 0.08em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.info-card__tel-number::before {
  content: "";
  width: 1.5rem;
  aspect-ratio: 1/1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background: url('data:image/svg+xml;charset=utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 16.9201V19.9201C22.0011 20.1986 21.9441 20.4743 21.8325 20.7294C21.7209 20.9846 21.5573 21.2137 21.3521 21.402C21.1468 21.5902 20.9046 21.7336 20.6407 21.8228C20.3769 21.912 20.0974 21.9452 19.82 21.9201C16.7428 21.5857 13.787 20.5342 11.19 18.8501C8.77382 17.3148 6.72533 15.2663 5.18999 12.8501C3.49997 10.2413 2.44824 7.27109 2.11999 4.1801C2.095 3.90356 2.12787 3.62486 2.21649 3.36172C2.30512 3.09859 2.44756 2.85679 2.63476 2.65172C2.82196 2.44665 3.0498 2.28281 3.30379 2.17062C3.55777 2.05843 3.83233 2.00036 4.10999 2.0001H7.10999C7.5953 1.99532 8.06579 2.16718 8.43376 2.48363C8.80173 2.80008 9.04207 3.23954 9.10999 3.7201C9.23662 4.68016 9.47144 5.62282 9.80999 6.5301C9.94454 6.88802 9.97366 7.27701 9.8939 7.65098C9.81415 8.02494 9.62886 8.36821 9.35999 8.6401L8.08999 9.9101C9.51355 12.4136 11.5864 14.4865 14.09 15.9101L15.36 14.6401C15.6319 14.3712 15.9751 14.1859 16.3491 14.1062C16.7231 14.0264 17.1121 14.0556 17.47 14.1901C18.3773 14.5286 19.3199 14.7635 20.28 14.8901C20.7658 14.9586 21.2094 15.2033 21.5265 15.5776C21.8437 15.9519 22.0122 16.4297 22 16.9201Z" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}
@media screen and (max-width: 1300px) {
  .info-card__tel-number {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}
.info-card__tel-note {
  font-size: 15px;
  text-align: center;
}
.info-card__tel-note span {
  color: #000;
  font-size: 18px;
  font-weight: var(--f-medium);
}
.info-card__button {
  margin-top: auto;
  -ms-flex-item-align: end;
      -ms-grid-row-align: end;
      align-self: end;
  /* テキストだけ中央寄せにし、アイコンは.button__itemのjustify-content:space-betweenのまま右端に固定する */
}
.info-card__button .button__text {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  text-align: center;
}

/*
 * お問い合わせページ専用。電話・メールの2セクション間の余白を約30pxに詰める
 * （.section-bg--pageの標準paddingは他ページ共通のため、ここでは専用クラスだけを上書きし他ページに影響させない）
 */
.contact-section--tel {
  padding-bottom: 0;
}

.contact-section--mail {
  padding-top: 30px;
}

/*
 * お問い合わせページ：電話でのお問い合わせカード。
 * .info-card__tel-number/.info-card__tel-note（採用情報・お問い合わせの2カラムカード）と見た目は同じだが、
 * あちらは2カード横並びレイアウト専用のため、単独ページで使うための独立したパーツとして別クラスで用意する
 */
.contact-tel {
  padding: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
  border-radius: 0.5rem;
  background-color: #fff;
}
@media screen and (max-width: 767.9px) {
  .contact-tel {
    padding: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem) clamp(1rem, 1rem + 0vw, 1rem);
  }
}
.contact-tel {
  /* 見出しのサイズだけ調整する（共通の.title自体は変更しない） */
}
.contact-tel .title__sub {
  font-size: 1.5rem;
}

.contact-tel__panel {
  display: -ms-grid;
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin-top: clamp(1.25rem, 1.25rem + 0vw, 1.25rem);
  padding: clamp(1.5rem, 0.7857142857rem + 1.9047619048vw, 2.5rem);
  border-radius: 4px;
  background-color: #F1F3F5;
}

.contact-tel__number {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.375rem, 0.2857142857rem + 0.2380952381vw, 0.5rem);
  color: #000;
  font-size: min(clamp(2.875rem, 2.4285714286rem + 1.1904761905vw, 3.5rem), 56px);
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-medium);
  line-height: 1;
  letter-spacing: 0.08em;
}
.contact-tel__number::before {
  content: "";
  width: clamp(1.75rem, 1.4821428571rem + 0.7142857143vw, 2.125rem);
  aspect-ratio: 1/1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background: url('data:image/svg+xml;charset=utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 16.9201V19.9201C22.0011 20.1986 21.9441 20.4743 21.8325 20.7294C21.7209 20.9846 21.5573 21.2137 21.3521 21.402C21.1468 21.5902 20.9046 21.7336 20.6407 21.8228C20.3769 21.912 20.0974 21.9452 19.82 21.9201C16.7428 21.5857 13.787 20.5342 11.19 18.8501C8.77382 17.3148 6.72533 15.2663 5.18999 12.8501C3.49997 10.2413 2.44824 7.27109 2.11999 4.1801C2.095 3.90356 2.12787 3.62486 2.21649 3.36172C2.30512 3.09859 2.44756 2.85679 2.63476 2.65172C2.82196 2.44665 3.0498 2.28281 3.30379 2.17062C3.55777 2.05843 3.83233 2.00036 4.10999 2.0001H7.10999C7.5953 1.99532 8.06579 2.16718 8.43376 2.48363C8.80173 2.80008 9.04207 3.23954 9.10999 3.7201C9.23662 4.68016 9.47144 5.62282 9.80999 6.5301C9.94454 6.88802 9.97366 7.27701 9.8939 7.65098C9.81415 8.02494 9.62886 8.36821 9.35999 8.6401L8.08999 9.9101C9.51355 12.4136 11.5864 14.4865 14.09 15.9101L15.36 14.6401C15.6319 14.3712 15.9751 14.1859 16.3491 14.1062C16.7231 14.0264 17.1121 14.0556 17.47 14.1901C18.3773 14.5286 19.3199 14.7635 20.28 14.8901C20.7658 14.9586 21.2094 15.2033 21.5265 15.5776C21.8437 15.9519 22.0122 16.4297 22 16.9201Z" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}

.contact-tel__note {
  color: #000;
  font-size: 21px;
  text-align: center;
}
@media screen and (max-width: 767.9px) {
  .contact-tel__note {
    font-size: 18px;
  }
}
.contact-tel__note span {
  font-size: 25px;
  font-weight: var(--f-medium);
}
@media screen and (max-width: 767.9px) {
  .contact-tel__note span {
    font-size: 18px;
  }
}

/*
 * お問い合わせページ：メールフォーム（Contact Form 7 + cf7-confirm-validateプラグイン）。
 * ラベル＋必須バッジ＋入力欄を1カラムで縦に並べる構成。CF7が自動出力する
 * .wpcf7-form-control-wrap / .wpcf7-form-control 等のクラスに直接スタイルを当てている
 */
.contact-form {
  padding: clamp(1.875rem, 1.1607142857rem + 1.9047619048vw, 2.875rem);
  border-radius: 0.5rem;
  background-color: #fff;
}
@media screen and (max-width: 767.9px) {
  .contact-form {
    padding: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem) clamp(1rem, 1rem + 0vw, 1rem);
  }
}
.contact-form .title__sub {
  font-size: 1.5rem;
}
.contact-form {
  /* 完了画面表示中（front.jsが.is-completeを付与）だけ、タイトルを中央寄せにする */
}
.contact-form.is-complete .title {
  justify-items: center;
}
.contact-form {
  /* 確認モーダルの横幅（cf7-confirm-validateプラグインのCSSカスタムプロパティを上書き） */
  --cf7cv-modal-max-width: 47.5rem;
}

/*
 * 確認モーダルの入力内容一覧（.cf7cv-modal__fields）。
 * プラグインの実装上、ここにはフォームの中身（.contact-form__row等）だけがクローンされ、
 * 外側の.wpcf7-form（gapを指定している要素）自体は含まれないため、ここで改めて行間を指定する
 */
.contact-form .cf7cv-modal__fields {
  display: -ms-grid;
  display: grid;
  gap: 0.9375rem;
}

/*
 * .contact-form__submit（確認ボタンの行）は、確認モーダルへのクローン時に中身の
 * .cf7cv-confirm-btnだけが取り除かれ、空のdivだけがgridの1項目として残ってしまい、
 * 余計な余白ができていた。確認画面（.cf7cv-modal__fields内）では非表示にする
 */
.contact-form .cf7cv-modal__fields .contact-form__submit {
  display: none;
}

/*
 * 確認モーダルの入力値表示（.cf7cv-field-value）。
 * プラグイン側は値をtext()で流し込むだけで改行はそのまま残っているが、divの初期状態（white-space:normal）だと
 * 改行が無視されて1行に詰まってしまうため、テキストエリアの改行を見た目にも反映させる
 */
.contact-form .cf7cv-field-value {
  white-space: pre-wrap;
}

.contact-form__lead {
  margin: clamp(1.25rem, 0.8035714286rem + 1.1904761905vw, 1.875rem) 0 0;
  padding-bottom: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
  border-bottom: 1px solid #000;
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  line-height: 1.9;
}

.contact-form__body {
  display: -ms-grid;
  display: grid;
  gap: 1.875rem;
  max-width: 62.5rem;
  width: 100%;
  margin-inline: auto;
  margin-top: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
}

/* CF7の.wpcf7-formはただの<form>タグなので、直接gridで1カラム縦積みにする */
.contact-form .wpcf7-form {
  display: -ms-grid;
  display: grid;
  gap: clamp(1.25rem, 0.9821428571rem + 0.7142857143vw, 1.625rem);
}

/* 入力画面（フォーム内）本来のスピナーは使わず、モーダル側の.cf7cv-modal__spinnerだけを表示する */
.contact-form .wpcf7-form .wpcf7-spinner {
  display: none;
}

/*
 * Gutenbergが[cf7cv_back]・[submit]を<p class="wp-block-paragraph">で自動的に囲むことがある。
 * 中身（隠しているsubmitボタン・戻るボタン）は見えないが、この<p>自体はグリッドの子要素として
 * 残り続けるため、gapぶんの余白だけが無駄に入ってしまう。position:absoluteで通常のグリッドの
 * 流れから外し、余白の計算に含まれないようにする
 */
.contact-form .wpcf7-form p.wp-block-paragraph:has(> [type=submit]),
.contact-form .wpcf7-form p.wp-block-paragraph:has(> .cf7cv-back-btn) {
  position: absolute;
}

/* 各項目（ラベル+入力欄）を1つのdivで囲む想定のクラス。フォームタブ側で使う */
.contact-form__row {
  display: -ms-grid;
  display: grid;
  gap: 0.625rem;
}

/* 文字数カウンターを持つ項目（textarea等）だけ、エラー文言をカウンターと同じ行に重ねて表示する */
.contact-form__row:has(.contact-form__char-count) {
  position: relative;
}

.contact-form__label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.3125rem 0.625rem;
  margin: 0;
  color: #000;
  font-size: 18px;
  font-weight: var(--f-bold);
}
@media screen and (max-width: 767.9px) {
  .contact-form__label {
    font-size: 16px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

.contact-form__badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50px;
  height: 18px;
  border-radius: 2px;
  background-color: #F2DF28;
  color: #000;
  font-size: 12px;
  font-weight: var(--f-bold);
  position: relative;
  top: 2px;
}
@media screen and (max-width: 767.9px) {
  .contact-form__badge {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    top: 0;
  }
}

.contact-form .wpcf7-form-control-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-column-gap: 0.625rem;
     -moz-column-gap: 0.625rem;
          column-gap: 0.625rem;
  row-gap: 0.375rem;
}

.contact-form .wpcf7-form-control {
  width: 100%;
  min-height: 80px;
  padding: 0.875rem 1rem;
  border: 1px solid #E2E2E2;
  border-radius: 5px;
  background-color: #F1F3F5;
  color: #000;
  font-size: clamp(0.9375rem, 0.8928571429rem + 0.119047619vw, 1rem);
  -webkit-transition: border-color 1s ease;
  transition: border-color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media screen and (max-width: 767.9px) {
  .contact-form .wpcf7-form-control {
    min-height: 60px;
  }
}
.contact-form .wpcf7-form-control::-webkit-input-placeholder {
  color: #B9B9B9;
}
.contact-form .wpcf7-form-control::-moz-placeholder {
  color: #B9B9B9;
}
.contact-form .wpcf7-form-control:-ms-input-placeholder {
  color: #B9B9B9;
}
.contact-form .wpcf7-form-control::-ms-input-placeholder {
  color: #B9B9B9;
}
.contact-form .wpcf7-form-control::placeholder {
  color: #B9B9B9;
}
.contact-form .wpcf7-form-control:focus {
  border-color: #F2DF28;
  outline: none;
}

.contact-form textarea.wpcf7-form-control {
  height: 228px;
  resize: vertical;
}

/*
 * 日付欄（flatpickr）：ネイティブのtype="date"をやめてテキスト欄にしたため、代わりにカレンダーアイコンを右側に置く。
 * 幅いっぱい(width:100%)は他の入力欄と揃えたまま、max-widthで上限だけ半分に制限する
 * （width:50%にすると画面が狭い時に窮屈になるため、幅自体は可変のままにする）
 */
.contact-form input.js-datepicker.wpcf7-form-control {
  max-width: 50%;
  padding-right: 3rem;
  background-image: url("../img/icon/icon_calendar.svg");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  cursor: pointer;
  /* SPは半分だと狭すぎるため、他の入力欄と同じ幅いっぱいにする */
}
@media screen and (max-width: 767.9px) {
  .contact-form input.js-datepicker.wpcf7-form-control {
    max-width: 100%;
  }
}

/* セレクト（業種など）：ネイティブの矢印を消して、他アイコンと同じ三角アイコンに差し替える */
.contact-form select.wpcf7-form-control {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: clamp(2.5rem, 2.1428571429rem + 0.9523809524vw, 3rem);
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="7" viewBox="0 0 14 7" fill="none"><path d="M6.92819 6.75L13.8564 0H0L6.92819 6.75Z" fill="%23000"/></svg>');
  background-repeat: no-repeat;
  background-position: right clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem) center;
  background-size: 12px 6px;
  cursor: pointer;
}

/* 残り文字数カウンター（1000文字以内のテキストエリア等、main.jsのcharCountEventが自動で挿入する） */
.contact-form__char-count {
  color: #939393;
  font-size: 0.8125rem;
  text-align: right;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin-left: auto;
}
.contact-form__char-count.is-over {
  color: #d63638;
}

.contact-form__note {
  margin: 0;
  color: #939393;
  font-weight: 500;
  font-size: 0.8125rem;
}
@media screen and (max-width: 767.9px) {
  .contact-form__note {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}

/* フォーム内の区切り見出し（応募フォームの「◇基本情報」等、項目が多いフォームで使う）。.article h3と同じドット付き見出しデザイン */
.contact-form__section-title {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #000;
  font-size: clamp(1.125rem, 1.0357142857rem + 0.2380952381vw, 1.25rem);
  font-weight: var(--f-bold);
  letter-spacing: 0.05em;
  border-bottom: 3px solid #F2DF28;
  margin-top: clamp(1.875rem, 1.875rem + 0vw, 1.875rem);
}
.contact-form__section-title ~ .contact-form__section-title {
  margin-top: clamp(2.5rem, 1.6071428571rem + 2.380952381vw, 3.75rem);
}

/* 確認画面では入力欄同士のgapが既にあるぶん間隔が広く見えるため、見出しの上マージンを半分くらいに詰める */
.contact-form .cf7cv-modal__fields .contact-form__section-title {
  margin-top: clamp(0.9375rem, 0.9375rem + 0vw, 0.9375rem);
}
.contact-form .cf7cv-modal__fields .contact-form__section-title ~ .contact-form .cf7cv-modal__fields .contact-form__section-title {
  margin-top: clamp(1.25rem, 0.8035714286rem + 1.1904761905vw, 1.875rem);
}

/*
 * プライバシーポリシー同意チェックボックス。
 * デフォルトのinput[type=checkbox]は視覚的には隠すが、フォーカス・クリック自体は機能させたいため
 * display:noneではなくCSSで見た目だけを消す（アクセシビリティのための定番手法）。
 * チェック状態は「input:checked ~ .wpcf7-list-item-label」の一般兄弟セレクタで判定し、
 * .wpcf7-list-item-label側に自前のチェックボックス（::before＝枠、::after＝チェックマーク）を描画する
 */
/* 同意チェックボックスの行だけ、薄いグレーの角丸カードで囲む */
.contact-form .contact-form__row:has(.wpcf7-acceptance) {
  padding: clamp(0.75rem, 0.5714285714rem + 0.4761904762vw, 1rem) clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  border-radius: 0.5rem;
  background-color: #F1F3F5;
}

.contact-form .wpcf7-acceptance {
  /*
   * .wpcf7-acceptanceも.wpcf7-form-controlクラスを持つため、テキスト入力欄用の
   * min-height/padding/border/background-color（上の.wpcf7-form-controlルール）を
   * そのまま受けてしまい、下に大きな余白ができていた。チェックボックスなので打ち消して高さを可変にする
   */
  display: block;
  width: auto;
  min-height: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}

.contact-form .wpcf7-list-item {
  margin: 0;
}
.contact-form .wpcf7-list-item label {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  cursor: pointer;
}
.contact-form .wpcf7-list-item {
  /* ラジオボタン（性別など）もチェックボックスと同じ「ネイティブは視覚的にだけ隠す」方式にする */
}
.contact-form .wpcf7-list-item input[type=checkbox], .contact-form .wpcf7-list-item input[type=radio] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form .wpcf7-list-item-label {
  position: relative;
  padding-left: 1.875rem;
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  line-height: 1.6;
  /*
   * 枠。rem単位（フォントサイズ基準の可変値）だとブラウザの端数丸めで幅と高さが
   * 微妙にズレて正円にならないことがあるため、width/heightは固定pxで指定する
   */
}
.contact-form .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.16em;
  width: 20px;
  height: 20px;
  border: 1px solid #939393;
  border-radius: 0.25rem;
  background-color: #fff;
  -webkit-transition: background-color, border-color 1s ease;
  transition: background-color, border-color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.contact-form .wpcf7-list-item-label {
  /* チェックマーク */
}
.contact-form .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: calc(0.15em + 6px);
  width: 0.6875rem;
  height: 0.375rem;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  rotate: -45deg;
  opacity: 0;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.contact-form .wpcf7-list-item-label {
  /* 「個人情報保護方針について同意する」の「個人情報保護方針」部分をリンクにする場合 */
}
.contact-form .wpcf7-list-item-label a {
  color: #000;
  font-weight: var(--f-bold);
  text-decoration: underline;
  -webkit-transition: color 1s ease;
  transition: color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .contact-form .wpcf7-list-item-label a:hover {
    color: #F2DF28;
  }
}

.contact-form input[type=checkbox]:checked ~ .wpcf7-list-item-label::before {
  background-color: #F2DF28;
  border-color: #F2DF28;
}

.contact-form input[type=checkbox]:checked ~ .wpcf7-list-item-label::after {
  opacity: 1;
}

/*
 * ラジオボタン（性別など）：.wpcf7-list-item-labelの共通の枠・チェックマークに対して、
 * .wpcf7-radio配下だけ「四角＋チェックマーク」を「丸＋中ポチ」に差し替える
 */
.contact-form .wpcf7-radio {
  /* .wpcf7-form-controlも兼ねるため、テキスト入力欄用のスタイルを打ち消す */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  /* SPでも縮まないよう固定値にする（PCと同じ見た目にする）。折り返した時の行間だけ狭くする */
  row-gap: 10px;
  -webkit-column-gap: 24px;
     -moz-column-gap: 24px;
          column-gap: 24px;
  width: auto;
  min-height: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}
.contact-form .wpcf7-radio .wpcf7-list-item-label {
  /* 文字サイズもSPで縮まないよう固定値にする */
  font-size: 16px;
  font-weight: var(--f-medium);
}
.contact-form .wpcf7-radio .wpcf7-list-item-label::before {
  border-radius: 50%;
  top: 4px;
}
.contact-form .wpcf7-radio .wpcf7-list-item-label {
  /* 選択時の中ポチ。remだと幅と高さが端数で微妙にズレて正円にならないことがあるため固定pxにする */
}
.contact-form .wpcf7-radio .wpcf7-list-item-label::after {
  left: 6px;
  top: 55%;
  translate: 0 -50%;
  width: 8px;
  height: 8px;
  border: none;
  border-radius: 50%;
  background-color: #000;
  rotate: 0deg;
}

.contact-form input[type=radio]:checked ~ .wpcf7-list-item-label::before {
  background-color: #F2DF28;
  border-color: #F2DF28;
}

.contact-form input[type=radio]:checked ~ .wpcf7-list-item-label::after {
  opacity: 1;
}

.contact-form input[type=radio]:focus-visible ~ .wpcf7-list-item-label::before {
  outline: 2px solid #F2DF28;
  outline-offset: 2px;
}

.contact-form input[type=checkbox]:focus-visible ~ .wpcf7-list-item-label::before {
  outline: 2px solid #F2DF28;
  outline-offset: 2px;
}

/* 完了画面（cf7-confirm-validateプラグインが送信成功時にフォームと差し替えて表示するコンテンツ） */
.contact-form .cf7cv-complete {
  display: none;
  padding-top: clamp(0.5rem, 0.3214285714rem + 0.4761904762vw, 0.75rem);
  padding-bottom: clamp(1.5rem, 0.7857142857rem + 1.9047619048vw, 2.5rem);
  text-align: center;
}
.contact-form .cf7cv-complete p {
  margin: 0;
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  line-height: 1.9;
}
.contact-form .cf7cv-complete p + p {
  margin-top: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
}
.contact-form .cf7cv-complete {
  /* 「トップへ戻る」などの戻りリンク */
}
.contact-form .cf7cv-complete .link-arrow-wrap {
  margin-top: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
}

/* エラーメッセージ（CF7標準・cf7-confirm-validate両方に対応） */
.contact-form .wpcf7-not-valid-tip,
.contact-form .cf7cv-not-valid-tip {
  display: block;
  color: #d63638;
  font-size: 0.8125rem;
}

/*
 * cf7cv側のエラー文言は.wpcf7-form-control-wrapの「次の兄弟要素」として
 * .contact-form__row直下に挿入される（中には入らない）ため、文字数カウンター
 * （wrap内部）と同じ行に見せるには入れ子を揃えるのではなく絶対配置で重ねる。
 * .contact-form__rowの左下＝wrapの左下（＝カウンターの行）と一致するため、
 * テキストエリアの高さが変わっても常にカウンターと同じ行に揃う。
 * カウンターが無い項目（テキスト欄・日付・ラジオ等）は通常の行として下に表示したいため、
 * :has()でカウンターがある行だけに限定する
 */
.contact-form__row:has(.contact-form__char-count) > .wpcf7-not-valid-tip,
.contact-form__row:has(.contact-form__char-count) > .cf7cv-not-valid-tip {
  position: absolute;
  left: 0;
  bottom: 0;
}

/* 「入力内容を確認する」ボタン。既存の.button__itemと同じ配色・アイコンで揃える */
.contact-form__submit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(3.75rem, 2.8571428571rem + 2.380952381vw, 5rem);
}

/* サイズは.is-large（募集要項の「エントリーする」等）と揃える。確認モーダル側の「送信する」はそのまま変更しない */
.contact-form .cf7cv-confirm-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 32.8125rem;
  max-width: 100%;
  min-height: 5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-inline: clamp(2.5rem, 1.6071428571rem + 2.380952381vw, 3.75rem);
  border: none;
  border-radius: 9999px;
  background-color: #000;
  color: #fff;
  font-size: 20px;
  font-weight: var(--f-bold);
  cursor: pointer;
  -webkit-transition: background-color, color 1s ease;
  transition: background-color, color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.contact-form .cf7cv-confirm-btn::after {
  content: "";
  width: 3.125rem;
  aspect-ratio: 1/1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: absolute;
  right: 0.9375rem;
  top: 50%;
  translate: 0 -50%;
  /* 既定は他の大きいボタンと同じ白丸+黒矢印（線画）。hoverで黒丸+メインカラー矢印に切り替える */
  background: url('data:image/svg+xml;charset=utf8,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="25" fill="%23fff"/><path d="M18 25H32" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M25 18L32 25L25 32" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
}
@media (hover: hover) {
  .contact-form .cf7cv-confirm-btn:hover {
    background-color: #F2DF28;
    color: #000;
  }
  .contact-form .cf7cv-confirm-btn:hover::after {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="25" fill="%23000"/><path d="M18 25H32" stroke="%23F2DF28" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M25 18L32 25L25 32" stroke="%23F2DF28" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  }
}
.contact-form .cf7cv-confirm-btn {
  /* 個人情報保護方針に同意するまでは押せない状態にする（main.js：contactFormAcceptanceEvent） */
}
.contact-form .cf7cv-confirm-btn:disabled {
  background-color: #939393;
  color: #fff;
  cursor: not-allowed;
}
.contact-form .cf7cv-confirm-btn:disabled::after {
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="25" fill="%23fff"/><path d="M18 25H32" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M25 18L32 25L25 32" stroke="%23000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
@media screen and (max-width: 767.9px) {
  .contact-form .cf7cv-confirm-btn {
    width: 100%;
    min-height: 4rem;
    padding-inline: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
    font-size: 16px;
  }
  .contact-form .cf7cv-confirm-btn::after {
    right: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
    width: 2.25rem;
  }
}

/*
 * 確認モーダル内の「送信する」「戻る」。
 * DOM順は戻る→送信するだが、見た目は送信する（ボタン）を上、戻る（リンク）を下にしたいのでorderで入れ替える
 */
.contact-form .cf7cv-modal__actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
}

.contact-form .cf7cv-modal__submit {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  max-width: 20rem;
  padding: 1.125rem 3.125rem;
  border: none;
  border-radius: 9999px;
  background-color: #000;
  color: #fff;
  font-size: 1.125rem;
  font-weight: var(--f-bold);
  cursor: pointer;
  -webkit-transition: background-color, color 1s ease;
  transition: background-color, color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  /* アイコンはテキストの隣ではなく、ボタン右端に固定する */
}
.contact-form .cf7cv-modal__submit::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  translate: 0 -50%;
  width: 1.5rem;
  aspect-ratio: 1/1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background: url('data:image/svg+xml;charset=utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="%23fff"/><path d="M5.6665 9.5C5.39036 9.5 5.1665 9.72386 5.1665 10C5.1665 10.2761 5.39036 10.5 5.6665 10.5L5.6665 10L5.6665 9.5ZM14.0201 10.3536C14.2153 10.1583 14.2153 9.84171 14.0201 9.64645L10.8381 6.46447C10.6428 6.2692 10.3262 6.2692 10.131 6.46447C9.93571 6.65973 9.93571 6.97631 10.131 7.17157L12.9594 10L10.131 12.8284C9.93571 13.0237 9.93571 13.3403 10.131 13.5355C10.3262 13.7308 10.6428 13.7308 10.8381 13.5355L14.0201 10.3536ZM5.6665 10L5.6665 10.5L13.6665 10.5L13.6665 10L13.6665 9.5L5.6665 9.5L5.6665 10Z" fill="%23000"/></svg>') no-repeat center/contain;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .contact-form .cf7cv-modal__submit:hover {
    background-color: #F2DF28;
    color: #000;
  }
  .contact-form .cf7cv-modal__submit:hover::after {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="10" fill="%23000"/><path d="M5.6665 9.5C5.39036 9.5 5.1665 9.72386 5.1665 10C5.1665 10.2761 5.39036 10.5 5.6665 10.5L5.6665 10L5.6665 9.5ZM14.0201 10.3536C14.2153 10.1583 14.2153 9.84171 14.0201 9.64645L10.8381 6.46447C10.6428 6.2692 10.3262 6.2692 10.131 6.46447C9.93571 6.65973 9.93571 6.97631 10.131 7.17157L12.9594 10L10.131 12.8284C9.93571 13.0237 9.93571 13.3403 10.131 13.5355C10.3262 13.7308 10.6428 13.7308 10.8381 13.5355L14.0201 10.3536ZM5.6665 10L5.6665 10.5L13.6665 10.5L13.6665 10L13.6665 9.5L5.6665 9.5L5.6665 10Z" fill="%23F2DF28"/></svg>');
  }
}
.contact-form .cf7cv-modal__submit {
  /*
   * 送信中に表示するスピナー。CF7本体は<form>に付くsubmittingクラスを見て
   * 「form.submitting .wpcf7-spinner」で表示するが、このスピナーはフォームの中ではなく
   * モーダル側（フォームと兄弟要素）にあるため、隣接兄弟セレクタで同じ判定をする。
   * ボタン右から20pxの位置に置き、送信中は矢印アイコンを隠して入れ替える
   */
}
.contact-form .cf7cv-modal__submit .cf7cv-modal__spinner {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  translate: 0 -50%;
  margin: 0;
  background-color: rgba(255, 255, 255, 0.75);
}
.contact-form .cf7cv-modal__submit .cf7cv-modal__spinner::before {
  background-color: #000;
}

.contact-form .wpcf7-form.submitting ~ .cf7cv-overlay .cf7cv-modal__spinner {
  visibility: visible;
}

.contact-form .wpcf7-form.submitting ~ .cf7cv-overlay .cf7cv-modal__submit::after {
  opacity: 0;
}

/* ボタンではなくリンクの見た目にし、左に戻る矢印を付ける */
.contact-form .cf7cv-back-btn {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
  padding: 0;
  border: none;
  background: none;
  color: #000;
  font-size: 0.875rem;
  text-decoration: underline;
  cursor: pointer;
  -webkit-transition: color 1s ease;
  transition: color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.contact-form .cf7cv-back-btn::before {
  content: "";
  width: 0.875rem;
  aspect-ratio: 1/1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  scale: -1 1;
  background: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5.66663 9.5C5.39048 9.5 5.16663 9.72386 5.16663 10C5.16663 10.2761 5.39048 10.5 5.66663 10.5L5.66663 10L5.66663 9.5ZM14.0202 10.3536C14.2154 10.1583 14.2154 9.84171 14.0202 9.64645L10.8382 6.46447C10.6429 6.2692 10.3264 6.2692 10.1311 6.46447C9.93583 6.65973 9.93583 6.97631 10.1311 7.17157L12.9595 10L10.1311 12.8284C9.93583 13.0237 9.93583 13.3403 10.1311 13.5355C10.3264 13.7308 10.6429 13.7308 10.8382 13.5355L14.0202 10.3536ZM5.66663 10L5.66663 10.5L13.6666 10.5L13.6666 10L13.6666 9.5L5.66663 9.5L5.66663 10Z" fill="%23000"/></svg>') no-repeat center/contain;
  -webkit-transition: background-image 1s ease;
  transition: background-image 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  .contact-form .cf7cv-back-btn:hover {
    color: #F2DF28;
  }
  .contact-form .cf7cv-back-btn:hover::before {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M5.66663 9.5C5.39048 9.5 5.16663 9.72386 5.16663 10C5.16663 10.2761 5.39048 10.5 5.66663 10.5L5.66663 10L5.66663 9.5ZM14.0202 10.3536C14.2154 10.1583 14.2154 9.84171 14.0202 9.64645L10.8382 6.46447C10.6429 6.2692 10.3264 6.2692 10.1311 6.46447C9.93583 6.65973 9.93583 6.97631 10.1311 7.17157L12.9595 10L10.1311 12.8284C9.93583 13.0237 9.93583 13.3403 10.1311 13.5355C10.3264 13.7308 10.6429 13.7308 10.8382 13.5355L14.0202 10.3536ZM5.66663 10L5.66663 10.5L13.6666 10.5L13.6666 10L13.6666 9.5L5.66663 9.5L5.66663 10Z" fill="%23F2DF28"/></svg>');
  }
}

/*
 * ページャー。角丸の四角ボタンを横一列に並べる形（prev/nextも両端に絶対配置せず通常のflexアイテムにする）。
 * 配色はサイトのトンマナに合わせる：現在ページ＝メインカラー背景＋黒文字、他の数字＝薄いグレー背景、
 * prev/next＝黒背景＋白矢印アイコン
 */
ul.page-numbers {
  margin-top: clamp(3.125rem, 1.7857142857rem + 3.5714285714vw, 5rem);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-inline: auto;
  gap: 0.5rem;
}
ul.page-numbers .page-numbers {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: clamp(2.25rem, 1.8928571429rem + 0.9523809524vw, 2.75rem);
  aspect-ratio: 1/1;
  border-radius: 0.5rem;
  background-color: #F1F3F5;
  color: #939393;
  font-size: clamp(0.8125rem, 0.7678571429rem + 0.119047619vw, 0.875rem);
  font-weight: var(--f-medium);
  text-decoration: none;
  text-align: center;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
  -webkit-transition: background-color, color 1s ease;
  transition: background-color, color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
ul.page-numbers .page-numbers.dots {
  background-color: transparent;
}
@media (hover: hover) {
  ul.page-numbers .page-numbers:hover:not(.dots):not(.current):not(.next):not(.prev) {
    background-color: #F2DF28;
    font-weight: var(--f-bold);
    color: #000;
  }
}
ul.page-numbers .page-numbers {
  /* サイト共通のfocus-visibleはHighlight（ブラウザ依存色）任せだと角丸バッジ上で悪目立ちするため、明示的に上書きする */
}
ul.page-numbers .page-numbers:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}
ul.page-numbers .page-numbers.current {
  background-color: #F2DF28;
  color: #000;
  font-weight: var(--f-bold);
}
ul.page-numbers .page-numbers {
  /* 他ページ（works-gallery等）と同じ、円背景込みの矢印アイコンに揃える */
}
ul.page-numbers .page-numbers.prev, ul.page-numbers .page-numbers.next {
  background-color: transparent;
  background-image: url('data:image/svg+xml;charset=utf8,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="25" fill="%23000"/><path d="M22 31L28 25L22 19" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (hover: hover) {
  ul.page-numbers .page-numbers.prev:hover, ul.page-numbers .page-numbers.next:hover {
    opacity: 0.8;
  }
}
ul.page-numbers .page-numbers {
  /* 数字部分と近すぎるため、内側にだけ余白を追加する */
}
ul.page-numbers .page-numbers.prev {
  scale: -1 1;
  margin-right: 0.9375rem;
}
ul.page-numbers .page-numbers.next {
  margin-left: 0.9375rem;
}
ul.page-numbers .page-numbers {
  /* 1ページ目・最終ページで矢印が無い時に挿入するダミー要素。幅は保持したまま見た目だけ消して、数字部分の中央配置を保つ */
}
ul.page-numbers .page-numbers.is-disabled {
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 350px) {
  ul.page-numbers li:has(.dots) {
    display: none;
  }
}

.page-intro__title {
  color: #000;
  font-size: clamp(1.5rem, 0.6964285714rem + 2.1428571429vw, 2.625rem);
  font-weight: var(--f-black);
  line-height: 1.69;
  letter-spacing: 0.1em;
}
.page-intro__title.is-center {
  text-align: center;
}
.page-intro__lead {
  margin-top: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  color: #000;
  font-size: clamp(0.875rem, 0.7857142857rem + 0.2380952381vw, 1rem);
  font-weight: var(--f-regular);
  line-height: 1.76;
}

.service-cards {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr clamp(1rem, 0.4642857143rem + 1.4285714286vw, 1.75rem) 1fr clamp(1rem, 0.4642857143rem + 1.4285714286vw, 1.75rem) 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 0.4642857143rem + 1.4285714286vw, 1.75rem);
  margin-top: clamp(2.5rem, 1.6071428571rem + 2.380952381vw, 3.75rem);
}
@media screen and (max-width: 910px) {
  .service-cards {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 767.9px) {
  .service-cards {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.service-cards {
  /* リンクエリアはカード全体（.service-cards__link-area）にしている。hoverの挙動はトップ施工事例スライドショーの.works__linkと同じ（背景色をメインカラーに反転、文字・アイコンは黒のまま） */
}
.service-cards__item {
  border-radius: 0.5rem;
  background-color: #fff;
  color: #000;
  -webkit-transition: background-color, color 0.3s ease;
  transition: background-color, color 0.3s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  /*
   * .circle-moreはaria-hidden付きの装飾span（実際のリンクは.service-cards__link-area）のため、
   * 自身の:hoverではなくこのカード全体の:hoverから見た目を切り替える。
   * 文字色・.circle-more（黒文字・黒アイコン）はカード既定と同じ黒のままなので、背景色以外は変更不要
   */
}
@media (hover: hover) {
  .service-cards__item:hover {
    background-color: #F2DF28;
  }
  .service-cards__item:hover .service-cards__img {
    scale: 1.08;
  }
}
.service-cards__item {
  /*
   * リンクは.service-cards__link-area（カード全体）なので、装飾のcircle-moreに直接カーソルが乗っても
   * 単体では何も反応しないようにする（_button.scssの.circle-more:hoverのメインカラー化を打ち消す）
   */
}
@media (hover: hover) {
  .service-cards__item .circle-more:hover {
    color: #000;
  }
  .service-cards__item .circle-more:hover .circle-more__icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23000"/><path d="M27.6869 20.3536C27.8822 20.1583 27.8822 19.8417 27.6869 19.6464L24.5049 16.4645C24.3097 16.2692 23.9931 16.2692 23.7978 16.4645C23.6026 16.6597 23.6026 16.9763 23.7978 17.1716L26.6263 20L23.7978 22.8284C23.6026 23.0237 23.6026 23.3403 23.7978 23.5355C23.9931 23.7308 24.3097 23.7308 24.5049 23.5355L27.6869 20.3536ZM11.3334 20L11.3334 20.5L27.3334 20.5L27.3334 20L27.3334 19.5L11.3334 19.5L11.3334 20Z" fill="%23000"/></svg>');
  }
  .service-cards__item .circle-more:hover.is-external .circle-more__icon {
    background-image: url('data:image/svg+xml;charset=utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="20" cy="20" r="19.5" stroke="%23000"/><path d="M25.4868 14.3445C25.4868 14.0684 25.2629 13.8445 24.9868 13.8445L20.4868 13.8445C20.2107 13.8445 19.9868 14.0684 19.9868 14.3445C19.9868 14.6206 20.2107 14.8445 20.4868 14.8445L24.4868 14.8445L24.4868 18.8445C24.4868 19.1206 24.7107 19.3445 24.9868 19.3445C25.2629 19.3445 25.4868 19.1206 25.4868 18.8445L25.4868 14.3445ZM13.6731 25.6582L14.0266 26.0118L25.3404 14.698L24.9868 14.3445L24.6333 13.9909L13.3195 25.3046L13.6731 25.6582Z" fill="%23000"/></svg>');
  }
}
.service-cards__link-area {
  display: -ms-grid;
  display: grid;
  height: 100%;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -ms-grid-rows: auto 1fr;
  grid-template-rows: auto 1fr;
}
.service-cards__thumb {
  width: 100%;
  aspect-ratio: 408/192;
  border-radius: 0.3125rem 0.3125rem 0 0;
  overflow: hidden;
}
.service-cards__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: scale 0.3s ease;
  transition: scale 0.3s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.service-cards__img--placeholder {
  display: -ms-grid;
  display: grid;
  place-items: center;
  margin: 0;
  background-color: #F1F3F5;
  color: #939393;
  font-size: clamp(0.8125rem, 0.7678571429rem + 0.119047619vw, 0.875rem);
}
.service-cards__body {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 0.3125rem 1fr 0.3125rem auto;
  grid-template-rows: auto 1fr auto;
  gap: 0.3125rem;
  padding: clamp(1.125rem, 1.125rem + 0vw, 1.125rem);
}
.service-cards__title {
  color: inherit;
  font-size: clamp(1rem, 0.9107142857rem + 0.2380952381vw, 1.125rem);
  font-weight: var(--f-bold);
  line-height: 1.76;
  line-height: 1.3;
}
.service-cards__desc {
  color: inherit;
  font-size: clamp(0.8125rem, 0.8125rem + 0vw, 0.8125rem);
  line-height: 1.76;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;
}
.service-cards {
  /*
   * 「View More」はカード全体リンクの中の装飾テキスト（実体の<a>はカード側にあるためspanで再現）。
   * 文字サイズ・外部リンク時のアイコン差し替えは共通の.circle-more（component/_button.scss）が標準で持つため、ここでは配置のみ指定する
   */
}
.service-cards__link {
  -ms-flex-item-align: end;
      align-self: flex-end;
  -ms-grid-column-align: end;
      justify-self: end;
}
@media screen and (max-width: 767.9px) {
  .service-cards .circle-more__icon {
    width: 34px;
  }
}

.page-contact {
  margin-top: clamp(2.5rem, 1.6071428571rem + 2.380952381vw, 3.75rem);
}

/*
 * 共通パーツ：斜めの枠＋写真を重ねるビジュアル（事業詳細ページ・採用情報メッセージ等、使い回す想定）。
 * 枠は右寄せ・写真は左寄せで固定（内側の配置は常に同じ）。左右どちらのカラムに置くかは、
 * 呼び出し側で.diagonal-visualをテキストより前/後どちらに書くか（親グリッドの並び順）だけで決める。
 * マークアップ：
 * <div class="diagonal-visual">
 *   <span class="diagonal-visual__frame" aria-hidden="true"></span>
 *   <img class="diagonal-visual__img"> または <p class="diagonal-visual__img diagonal-visual__img--placeholder">未設定</p>
 * </div>
 */
.diagonal-visual {
  position: relative;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* コンテナの縦横比は実際の画像（520:424）に合わせる。4/3等の別比率だと、下のmin()で画像が縮んだ時に余白ができてしまう */
  aspect-ratio: 520/424;
}
@media screen and (max-width: 1199.9px) {
  .diagonal-visual {
    width: min(500px, 100%);
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    grid-row: 2/3;
    margin-inline: auto;
  }
}
.diagonal-visual {
  /*
   * 全ページ共通の固定ビジュアル（assets/img/service/detail/img_bg.webp）。事業詳細ページ・採用情報メッセージともにこの画像を使う。
   * 幅はwidth:520px固定ではなくmin(520px, 100%)にして、コンテナ（カラム幅）が520pxより狭いタブレット幅等でも
   * はみ出したりテキストと重なったりしないよう、常にコンテナ幅に収まる形にする。
   */
}
.diagonal-visual__frame {
  width: min(520px, 83%);
  aspect-ratio: 520/424;
  background: url("../img/service/detail/img_bg.webp") no-repeat right center/contain;
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
}
.diagonal-visual__img {
  position: absolute;
  left: 0;
  z-index: 1;
  width: min(512px, 83%);
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  aspect-ratio: 512/459;
  top: 55%;
  translate: 0 -50%;
}
.diagonal-visual__img--placeholder {
  display: -ms-grid;
  display: grid;
  place-items: center;
  background-color: #F1F3F5;
  color: #939393;
  font-size: clamp(0.8125rem, 0.7678571429rem + 0.119047619vw, 0.875rem);
}

.service-detail {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem) 1fr;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(1.25rem, 1.25rem + 0vw, 1.25rem) clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem);
  padding-block: clamp(2.5rem, 2.5rem + 0vw, 2.5rem) clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
}
@media screen and (max-width: 1199.9px) {
  .service-detail {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.service-detail__heading {
  color: #000;
  font-size: min(clamp(2.375rem, 2.1964285714rem + 0.4761904762vw, 2.625rem), 42px);
  font-weight: 900;
  line-height: 1.5;
  /* 42px固定に近い大きさだとSPで中途半端な位置で改行されるため縮める。改行自体はさせず1行に収める */
}
@media screen and (max-width: 910px) {
  .service-detail__heading {
    font-size: clamp(1.5rem, 1.3214285714rem + 0.4761904762vw, 1.75rem);
  }
}
@media (max-width: 1200px) {
  .service-detail__heading br {
    display: none;
  }
}
.service-detail__text {
  margin-top: clamp(1.625rem, 1.4464285714rem + 0.4761904762vw, 1.875rem);
  color: #000;
  line-height: 1.9;
  /* 見出し（_service_heading）が未入力の場合はこの要素が先頭になるため、その時だけ上マージンを付けない */
}
.service-detail__text:first-child {
  margin-top: 0;
}
.service-detail__text p {
  margin-top: clamp(0.75rem, 0.6607142857rem + 0.2380952381vw, 0.875rem);
  color: #000;
}
.service-detail__text p:first-child {
  margin-top: 0;
}
.service-detail__back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
}

/*
 * 会社概要（page-company）：Message。事業詳細・採用情報と同じ.diagonal-visual（画像は右カラム・反転なし）を使う。
 * 見出しは代表挨拶の引用文そのものを大見出しとして扱う（.title__subのサイズを他ページの見出しと揃える）。
 */
.company-greeting {
  /* スマホは.recruit-message（採用情報）の見出し内gapに揃える */
}
@media screen and (max-width: 767.9px) {
  .company-greeting .title {
    gap: 10px;
  }
}
.company-greeting__body {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem) 1fr;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem);
  margin-top: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
}
@media screen and (max-width: 910px) {
  .company-greeting__body {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    margin-top: 0;
  }
}
.company-greeting__text {
  color: #000;
}
@media screen and (max-width: 910px) {
  .company-greeting__text {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
.company-greeting__text .title__sub {
  font-size: min(clamp(2.375rem, 2.1964285714rem + 0.4761904762vw, 2.625rem), 42px);
  font-weight: var(--f-bold);
  line-height: 1.5;
  /* SPは大きすぎるため2周りほど縮める */
}
@media screen and (max-width: 767.9px) {
  .company-greeting__text .title__sub {
    font-size: clamp(1.625rem, 1.5357142857rem + 0.2380952381vw, 1.75rem);
  }
}
.company-greeting__text .title__sub {
  /* PC（$bp-l以上）だけ改行を残し、タブレット・スマホでは無視する */
}
@media screen and (max-width: 1199.9px) {
  .company-greeting__text .title__sub .company-greeting__br {
    display: none;
  }
}
.company-greeting__lead {
  margin-top: clamp(1.625rem, 1.4464285714rem + 0.4761904762vw, 1.875rem);
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  line-height: 2;
}
.company-greeting {
  /* 枠（.diagonal-visual）は使わず写真をそのまま表示する。テキスト列が長くなる想定のため、行の下端に揃える */
}
.company-greeting__visual-wrap {
  -ms-flex-item-align: end;
      -ms-grid-row-align: end;
      align-self: end;
}
@media screen and (max-width: 910px) {
  .company-greeting__visual-wrap {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -ms-flex-item-align: auto;
        -ms-grid-row-align: auto;
        align-self: auto;
  }
}
.company-greeting__img {
  display: block;
  width: 100%;
  max-width: 38rem;
  height: auto;
  margin-left: auto;
  border-radius: 0.25rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.company-greeting__img--placeholder {
  display: -ms-grid;
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  background-color: #F1F3F5;
  color: #939393;
  font-size: clamp(0.8125rem, 0.7678571429rem + 0.119047619vw, 0.875rem);
}

/*
 * ▼試験的なレイアウト（PC未満：1199px以下、SP・タブレット両方）▼
 * タイトル（.title-wrap）と画像を横並びにし、リード文（.company-greeting__lead）は横幅いっぱいにする。
 * さらに800px以下（SP含む）は下のネストしたクエリで、タイトル→画像（右寄せ70%）→テキストの縦積みに切り替える。
 * .company-greeting__textはdisplay:contentsで解除し、中の.title-wrap/.company-greeting__leadを
 * 親グリッド（.company-greeting__body）に直接参加させてgrid-areaで個別配置している。
 * 元々あった.company-greeting__body等の@include media-max-header（旧SP用の1カラム化）は、
 * 同じ幅で重なるがソース順でこのブロックの方が後にあるため、実質こちらの指定が優先される。
 * PC（1200px以上）の見た目には影響しない。
 * 元に戻したい場合はこのブロックをまるごと削除するだけでよい
 */
@media screen and (max-width: 1199.9px) {
  .company-greeting__body {
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    -ms-grid-rows: auto clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem) auto;
        grid-template-areas: "title  visual" "lead   lead";
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    row-gap: clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem);
  }
  .company-greeting__text {
    display: contents;
  }
  .company-greeting__text .title-wrap {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: title;
    -ms-grid-row-align: center;
        align-self: center;
  }
  .company-greeting__lead {
    grid-area: lead;
    margin-top: clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem);
  }
  .company-greeting__body > .company__visual {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
}
@media screen and (max-width: 1199.9px) and (max-width: 767.9px) {
  .company-greeting__lead {
    margin-top: 0;
  }
}
@media screen and (max-width: 1199.9px) {
  .company-greeting__visual-wrap {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 3;
    grid-area: visual;
    -ms-grid-row-align: start;
        align-self: start;
  }
}
@media screen and (max-width: 1199.9px) {
  /* さらに狭い800px以下は横並びが窮屈なため、3つとも1frの縦積みにし、上から タイトル→テキスト→画像（右寄せ）の順にする */
}
@media screen and (max-width: 1199.9px) and (max-width: 800px) {
  .company-greeting__body {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
        grid-template-areas: "title" "lead" "visual";
  }
  .company-greeting__visual-wrap {
    -ms-grid-column-align: end;
        justify-self: end;
  }
  .company-greeting__img {
    max-width: 90%;
  }
  .company-greeting__body > .company__visual {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .company-greeting__body > .company-greeting__lead {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .company-greeting__body > .company-greeting__visual-wrap {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
}
/* ▲試験的なレイアウトここまで▲ */
/*
 * 共通パーツ：外側グレー・内側白カードのパネル（トップページの.news-top__panelと同じ考え方）。
 * マークアップ：<div class="section-bg--top-news is-gray"><div class="section-bg--inner-radius page-panel"><div class="inner">…
 */
.page-panel {
  padding-block: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
}

.company-overview .spec-table {
  margin-top: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
}

/* 会社概要（page-company）：アクセス */
.company-access__map {
  position: relative;
  width: 100%;
  aspect-ratio: 21/8;
  margin-top: clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem);
  border-radius: 0.5rem;
  overflow: hidden;
}
@media screen and (max-width: 767.9px) {
  .company-access__map {
    aspect-ratio: 4/3;
  }
}
.company-access__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.company-access__address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.75rem, 0.3928571429rem + 0.9523809524vw, 1.25rem);
  margin-top: clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  line-height: 1.9;
}

/*
 * 採用情報（page-recruit）：メッセージ。共通パーツ化した.diagonal-visualを使い、
 * 事業詳細ページとは画像とテキストの左右を逆にする（本文が左、画像が右）。画像はページのアイキャッチから取得する。
 * 見出し（.title-wrap）は本文（.recruit-message__text）の中、リード文の上に置く。
 */
.recruit-message {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem) 1fr;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem);
  /*
   * .diagonal-visual自体がmedia-non-pc（$bp-l=1200px基準）で1カラム用のwidth/centering処理をするため、
   * ここもmedia-max-header（910px基準）ではなくmedia-non-pcに揃える。基準がズレていると、
   * 910〜1199pxの間だけ親は2カラムのまま・画像だけ1カラム用の見た目になり、崩れて見えていた
   */
}
@media screen and (max-width: 1199.9px) {
  .recruit-message {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.recruit-message .title {
  gap: 20px;
}
@media screen and (max-width: 767.9px) {
  .recruit-message .title {
    gap: 10px;
  }
}
.recruit-message__text {
  color: #000;
  /* 親のalign-items:centerで上下中央になっていたが、テキスト側は先頭（上）揃えにする */
  -ms-flex-item-align: start;
      -ms-grid-row-align: start;
      align-self: start;
  padding-top: 60px;
}
@media screen and (max-width: 1199.9px) {
  .recruit-message__text {
    padding-top: 30px;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
@media screen and (max-width: 767.9px) {
  .recruit-message__text {
    padding-top: 0;
  }
}
.recruit-message__text {
  /* 見出しの文字サイズは.bg-text事業詳細ページの.service-detail__headingと揃える */
}
.recruit-message__text .title__sub {
  font-size: min(clamp(2.375rem, 2.1964285714rem + 0.4761904762vw, 2.625rem), 42px);
  font-weight: var(--f-bold);
  line-height: 1.5;
  /* スマホは.company-greeting（企業情報）の見出しサイズに揃える */
}
@media screen and (max-width: 767.9px) {
  .recruit-message__text .title__sub {
    font-size: clamp(1.625rem, 1.5357142857rem + 0.2380952381vw, 1.75rem);
  }
}
.recruit-message__text .title__sub {
  /* PC（$bp-l以上）だけ改行を残し、タブレット・スマホでは無視する（画面幅ごとに改行位置を最適化できないため）。見出し文中の<br>には.recruit-message__brクラスを付けている */
}
@media screen and (max-width: 1199.9px) {
  .recruit-message__text .title__sub .recruit-message__br {
    display: none;
  }
}
.recruit-message__text p {
  margin-top: clamp(1.625rem, 1.4464285714rem + 0.4761904762vw, 1.875rem);
  font-size: clamp(0.875rem, 0.7857142857rem + 0.2380952381vw, 1rem);
  line-height: 1.9;
}
@media screen and (max-width: 767.9px) {
  .recruit-message__text p {
    margin-top: 20px;
  }
}
.recruit-message {
  /* SPは画像を下に配置する */
}
@media screen and (max-width: 1199.9px) {
  .recruit-message .diagonal-visual {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

.recruit {
  padding-block: clamp(2.5rem, 2.5rem + 0vw, 2.5rem);
  /* 黄色い枠で囲んだ2カラムのチェックリスト */
}
.recruit__points {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem) 1fr;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px clamp(1.875rem, 0.5357142857rem + 3.5714285714vw, 3.75rem);
  margin: clamp(1.625rem, 1.625rem + 0vw, 1.625rem) auto 0;
  padding: clamp(1.5rem, 1.4107142857rem + 0.2380952381vw, 1.625rem);
  border: 2px solid #F2DF28;
  border-radius: 5px;
}
@media screen and (max-width: 767.9px) {
  .recruit__points {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.recruit__points li {
  position: relative;
  padding-left: 1.2em;
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  font-weight: var(--f-medium);
  line-height: 1.8;
}
.recruit__points li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 6px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #000;
}
.recruit {
  /* テーブルの見た目は共通パーツ化した.spec-table--panel（component/_table.scss）を使う */
}
.recruit__table-wrap {
  margin-top: clamp(2.5rem, 1.6071428571rem + 2.380952381vw, 3.75rem);
}
.recruit__entry {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem);
  padding: clamp(2rem, 1.6428571429rem + 0.9523809524vw, 2.5rem) clamp(1.5rem, 1.2321428571rem + 0.7142857143vw, 1.875rem);
}

/* 採用情報ページの見出しラベル（●Message／●Requirements）は太く見えていたためregularにする（共通の.title__mainは変更しない） */
.body-recruit .title__main {
  font-weight: var(--f-regular);
}

.works-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem) 1fr clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem) 1fr clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem) 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 1.0714285714rem + 0.4761904762vw, 1.5rem);
  margin-top: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
  /* タブレット幅は読みやすさに応じて3カラム→2カラムと段階的に切り替え、480px未満（$bp-xs）で1カラムにする */
}
@media screen and (max-width: 1199.9px) {
  .works-grid {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 910px) {
  .works-grid {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 479.9px) {
  .works-grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.works-detail__head {
  display: -ms-grid;
  display: grid;
}
.works-detail__meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.5rem, 0.4107142857rem + 0.2380952381vw, 0.625rem) clamp(1rem, 0.8214285714rem + 0.4761904762vw, 1.25rem);
  /* .works__categoryは施工事例カード（縦積み）向けにmargin-topが付いているため、ここ（日付と横並び）だけ打ち消す */
}
.works-detail__meta .works__category {
  margin-top: 0;
}
.works-detail__title {
  color: #000;
  font-size: min(clamp(1.5rem, 1.1428571429rem + 0.9523809524vw, 2rem), 32px);
  font-weight: var(--f-bold);
  line-height: 1.5;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.works-detail__body {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: max(50%, 500px) clamp(1.25rem, -11.25rem + 16.6666666667vw, 3.75rem) 1fr;
  grid-template-columns: max(50%, 500px) 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: clamp(1.25rem, -11.25rem + 16.6666666667vw, 3.75rem);
  margin-top: clamp(1.625rem, 1.4464285714rem + 0.4761904762vw, 1.875rem);
}
@media (max-width: 1100px) {
  .works-detail__body {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.works-detail__text {
  color: #000;
}
.works-detail {
  /* タイポグラフィは共通パーツ.article（component/_article.scss）に任せる */
}
.works-detail__content {
  font-size: clamp(0.875rem, 0.7857142857rem + 0.2380952381vw, 1rem);
  gap: 10px;
  margin-top: 10px;
}
.works-detail__back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
}

/*
 * 施工事例詳細のギャラリー：大きいメイン画像＋サムネイル一覧（最大10枚、_works_gallery_images）。
 * SplideではなくシンプルなJS（main.js：worksGalleryEvent）でメイン画像のsrcを差し替える形にしている。
 * サムネイルは横に並べ、収まりきらない分は横スクロールできるようにする（無理に折り返さない）。
 */
.works-gallery {
  max-width: 800px;
  width: 100%;
  margin-inline: auto;
}
.works-gallery__main {
  position: relative;
  aspect-ratio: 720/445;
  overflow: hidden;
  background-color: #F1F3F5;
}
.works-gallery {
  /*
   * 切り替え時にフェードさせる。JS（main.js：worksGalleryEvent）がis-fadingの付け外しを行う。
   * .works-detail__body article配下のため、.article img（height:auto等）に上書きされないよう
   * .works-galleryを付けて詳細度を上げている
   */
}
.works-gallery .works-gallery__main-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 1;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}
.works-gallery .works-gallery__main-img.is-fading {
  opacity: 0;
}
.works-gallery {
  /* ナビゲーション行：矢印－サムネイル－矢印を横並びにする。サムネイルが増えて複数行になっても矢印は上固定にする */
}
.works-gallery__nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  margin-top: clamp(0.5rem, 0.5rem + 0vw, 0.5rem);
}
.works-gallery__arrow {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 40px;
  aspect-ratio: 1/1;
  border: none;
  background: url('data:image/svg+xml;charset=utf8,<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="25" cy="25" r="25" fill="%23000"/><path d="M22 31L28 25L22 19" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
  cursor: pointer;
  -webkit-transition: opacity 1s ease;
  transition: opacity 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  margin-top: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
}
@media (hover: hover) {
  .works-gallery__arrow:hover {
    opacity: 0.8;
  }
}
.works-gallery__arrow--prev {
  scale: -1 1;
}
.works-gallery__thumbs {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 3px 1fr 3px 1fr 3px 1fr 3px 1fr;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px !important;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media screen and (max-width: 767.9px) {
  .works-gallery__thumbs {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}
.works-gallery {
  /*
   * .works-detail__body article配下のため、.article ul li（黒丸::before・padding-left）が
   * 効いてしまう。.works-galleryを付けて詳細度を上げ、打ち消す
   */
}
.works-gallery .works-gallery__thumb-item {
  padding-left: 0;
}
.works-gallery .works-gallery__thumb-item img {
  border-radius: 0;
}
.works-gallery .works-gallery__thumb-item::before {
  content: none;
}
.works-gallery__thumb {
  display: block;
  width: 100%;
  height: min(clamp(4.4375rem, 4.4375rem + 0vw, 4.4375rem), 71px);
  padding: 0;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: none;
  -webkit-transition: border-color 1s ease;
  transition: border-color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.works-gallery__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.works-gallery__thumb.is-active {
  border-color: #F2DF28;
}
.works-gallery__thumb.is-active img {
  opacity: 0.5;
}
@media (hover: hover) {
  .works-gallery__thumb:hover {
    border-color: #F2DF28;
  }
}

/* 英字「Privacy Policy」が他ページの見出し（Company/Recruit等）より長く、既定の184pxだと大きすぎるためこのページだけ縮小する */
.body-privacypolicy .page-banner__bg-text {
  font-size: 6.875rem;
}

/* 「各種看板・サイン制作・グラフィックデザイン」はタイトルが長くSPで2行になるため、このページだけ見出しを縮小する */
@media screen and (max-width: 767.9px) {
  .body-signage .page-banner .title__sub {
    font-size: 1.5rem;
  }
}

.policy {
  display: -ms-grid;
  display: grid;
  gap: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
}
.policy__lead {
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  line-height: 1.9;
}
.policy__section {
  display: -ms-grid;
  display: grid;
  gap: clamp(0.75rem, 0.6607142857rem + 0.2380952381vw, 0.875rem);
}
.policy__heading {
  color: #000;
  font-size: clamp(1.125rem, 1.0357142857rem + 0.2380952381vw, 1.25rem);
  font-weight: var(--f-bold);
}
.policy__text {
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  line-height: 1.9;
}
.policy__list {
  display: -ms-grid;
  display: grid;
  gap: clamp(0.375rem, 0.2857142857rem + 0.2380952381vw, 0.5rem);
  margin: 0;
  padding-left: clamp(1.125rem, 1.0357142857rem + 0.2380952381vw, 1.25rem);
  list-style: none;
}
.policy__list-item {
  position: relative;
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  line-height: 1.9;
}
.policy__list-item::before {
  content: "・";
  position: absolute;
  left: clamp(-1.125rem, -1.0357142857rem - 0.2380952381vw, -1.25rem);
}
.policy__contact {
  margin-top: clamp(0.25rem, 0.1607142857rem + 0.2380952381vw, 0.375rem);
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  line-height: 1.9;
}

/*
 * お知らせ一覧：左にカテゴリ（縦積みのボタン一覧）、右に一覧本体を並べる2カラムレイアウト。
 * サイドバーの幅は固定、一覧側は残り幅いっぱいに広がる
 */
.news-archive__layout {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto clamp(3.75rem, -0.7142857143rem + 11.9047619048vw, 10rem) 1fr;
  grid-template-columns: auto 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: clamp(1.875rem, 1.875rem + 0vw, 1.875rem) clamp(3.75rem, -0.7142857143rem + 11.9047619048vw, 10rem);
}
@media screen and (max-width: 767.9px) {
  .news-archive__layout {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}

.news-archive__filter-bar {
  display: -ms-grid;
  display: grid;
  gap: clamp(0.75rem, 0.5714285714rem + 0.4761904762vw, 1rem);
  /* スクロールしても追従させる（スティッキーヘッダーの高さ分は空ける） */
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  /* SPは折り返さず、はみ出した分を横スクロールで見られるようにする */
}
@media screen and (max-width: 767.9px) {
  .news-archive__filter-bar {
    position: static;
    overflow-x: auto;
  }
  .news-archive__filter-bar::-webkit-scrollbar {
    display: none;
  }
}

/* カテゴリボタンを縦に積む（SPは横一列＋横スクロール） */
.news-archive__filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(0.625rem, 0.5357142857rem + 0.2380952381vw, 0.75rem);
}
@media screen and (max-width: 767.9px) {
  .news-archive__filter {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}

.news-archive__filter-link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.5rem, 0.4107142857rem + 0.2380952381vw, 0.625rem);
  width: 10rem;
  height: clamp(2.25rem, 2.0714285714rem + 0.4761904762vw, 2.5rem);
  padding-inline: clamp(0.875rem, 0.7857142857rem + 0.2380952381vw, 1rem);
  border: 1px solid transparent;
  border-radius: 9999px;
  background-color: transparent;
  color: #000;
  font-size: clamp(0.75rem, 0.7053571429rem + 0.119047619vw, 0.8125rem);
  font-weight: var(--f-bold);
  white-space: nowrap;
  -webkit-transition: background-color, border-color 1s ease;
  transition: background-color, border-color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media screen and (max-width: 767.9px) {
  .news-archive__filter-link {
    width: auto;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
.news-archive__filter-link {
  /* 各項目のドット（既定はグレー、hover・選択中は黒に変わる） */
}
.news-archive__filter-link::before {
  content: "";
  width: 6px;
  aspect-ratio: 1/1;
  border-radius: 55%;
  background-color: #F2DF28;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background-color 1s ease;
  transition: background-color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.news-archive__filter-link {
  /* 選択中は常に、それ以外はhover時だけ、周りの背景を黄色・ドットを黒にする（枠線は選択中のみ） */
}
.news-archive__filter-link.is-current {
  border-color: #F2DF28;
  background-color: #F2DF28;
}
.news-archive__filter-link.is-current::before {
  background-color: #000;
}
@media (hover: hover) {
  .news-archive__filter-link:not(.is-current):hover {
    background-color: #F2DF28;
    color: #000;
  }
  .news-archive__filter-link:not(.is-current):hover::before {
    background-color: #000;
  }
}

.news-archive__empty {
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  text-align: center;
  padding-block: clamp(2.5rem, 1.6071428571rem + 2.380952381vw, 3.75rem);
}

/*
 * ▼試験的なレイアウト（お知らせ一覧と揃えて2カラム＋左サイドバーに変更）▼
 * カテゴリ数が増えて横並び1行に収まらなくなったため、お知らせ一覧（.news-archive__layout）と
 * 同じ構成（左：カテゴリを縦に並べたサイドバー／右：一覧）に変更している。
 * 元に戻したい場合は、このブロックを丸ごと元の横並びバー版に戻すか、削除して調整すればよい
 */
.works-archive__layout {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem) 1fr;
  grid-template-columns: auto 1fr;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  gap: clamp(1.875rem, 1.875rem + 0vw, 1.875rem) clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
  margin-top: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
}
@media (max-width: 945px) {
  .works-archive__layout {
    margin-top: 0;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
  }
}
.works-archive__layout {
  /*
   * .works-gridは自身にもmargin-topを持つが、grid内のアイテムとしては親（このレイアウト）と
   * マージンが相殺されずそのまま積み重なり、左のカテゴリ一覧より下に沈んで見えてしまう。
   * この2カラムレイアウト内では不要なため打ち消す
   */
}
.works-archive__layout .works-grid {
  margin-top: 0;
  /*
   * 施工事例一覧（このレイアウト内）だけ、事業詳細ページの関連施工事例（.works-grid単体・
   * サイドバー無し、4→3→2→1カラム）とは異なる独自の段階（3→2→1カラム）にする。
   * 左のカテゴリサイドバーの分グリッドに使える幅が狭いため、3カラムを維持できるのは1250px程度までとし、
   * それ以外の.works-gridには影響させないよう.works-archive__layout配下・かつ範囲を区切って指定する。
   * $bp-xs未満は元のmedia-max-xs（1カラム）にそのまま譲る
   */
}
@media (min-width: 480px) and (max-width: 1250px) {
  .works-archive__layout .works-grid {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1250.1px) {
  .works-archive__layout .works-grid {
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
  }
}

.works-archive__filter-bar {
  display: -ms-grid;
  display: grid;
  gap: clamp(0.75rem, 0.5714285714rem + 0.4761904762vw, 1rem);
  /* スクロールしても追従させる（スティッキーヘッダーの高さ分は空ける） */
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  /* 折り返さず、はみ出した分を横スクロールで見られるようにする */
}
@media (max-width: 945px) {
  .works-archive__filter-bar {
    position: static;
    overflow-x: auto;
  }
  .works-archive__filter-bar::-webkit-scrollbar {
    display: none;
  }
}

/* カテゴリボタンを縦に積む（SPは横一列＋横スクロール） */
.works-archive__filter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: clamp(0.625rem, 0.5357142857rem + 0.2380952381vw, 0.75rem);
}
@media (max-width: 945px) {
  .works-archive__filter {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
}

.works-archive__filter-link {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.5rem, 0.4107142857rem + 0.2380952381vw, 0.625rem);
  height: clamp(2.25rem, 2.0714285714rem + 0.4761904762vw, 2.5rem);
  padding-inline: clamp(0.875rem, 0.7857142857rem + 0.2380952381vw, 1rem);
  border: 1px solid transparent;
  border-radius: 9999px;
  background-color: transparent;
  color: #000;
  font-size: clamp(0.75rem, 0.7053571429rem + 0.119047619vw, 0.8125rem);
  font-weight: var(--f-bold);
  white-space: nowrap;
  -webkit-transition: background-color, border-color 1s ease;
  transition: background-color, border-color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
@media (max-width: 945px) {
  .works-archive__filter-link {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
}
.works-archive__filter-link {
  /* 各項目のドット（既定はグレー、hover・選択中は黒に変わる） */
}
.works-archive__filter-link::before {
  content: "";
  width: 6px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #F2DF28;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-transition: background-color 1s ease;
  transition: background-color 1s ease;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.works-archive__filter-link {
  /* 選択中は常に、それ以外はhover時だけ、周りの背景を黄色・ドットを黒にする（枠線は選択中のみ） */
}
.works-archive__filter-link.is-current {
  border-color: #F2DF28;
  background-color: #F2DF28;
}
.works-archive__filter-link.is-current::before {
  background-color: #000;
}
@media (hover: hover) {
  .works-archive__filter-link:not(.is-current):not(:disabled):hover {
    background-color: #F2DF28;
    color: #000;
  }
  .works-archive__filter-link:not(.is-current):not(:disabled):hover::before {
    background-color: #000;
  }
}
.works-archive__filter-link {
  /* コンテンツが0件のカテゴリ：非表示にはせず、押せないことが分かる見た目にする（hoverでも変化させず、カーソルは既定のまま） */
}
.works-archive__filter-link:disabled {
  color: #939393;
  cursor: default;
}
.works-archive__filter-link:disabled::before {
  background-color: #939393;
}

/* ▲試験的なレイアウトここまで▲ */
.works-archive__empty {
  color: #000;
  font-size: clamp(0.875rem, 0.8303571429rem + 0.119047619vw, 0.9375rem);
  text-align: center;
  padding-block: clamp(2.5rem, 1.6071428571rem + 2.380952381vw, 3.75rem);
}

/* お知らせ詳細だけ、白カード（.page-panel）の下側の余白を広げる（page-companyでは変更しない） */
.section-bg--single .page-panel {
  padding-bottom: clamp(2.5rem, 1.7857142857rem + 1.9047619048vw, 3.5rem);
}

.news-single {
  padding-top: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
}
.news-single__header {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto clamp(0.625rem, 0.5357142857rem + 0.2380952381vw, 0.75rem) 1fr;
  grid-template-columns: auto 1fr;
  -ms-grid-rows: auto clamp(0.625rem, 0.5357142857rem + 0.2380952381vw, 0.75rem) auto;
      grid-template-areas: "date category" "title title";
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: clamp(0.625rem, 0.5357142857rem + 0.2380952381vw, 0.75rem);
  padding-bottom: clamp(0.875rem, 0.6964285714rem + 0.4761904762vw, 1.125rem);
  border-bottom: 1px solid #F2DF28;
}
.news-single__header .news-list__categories {
  grid-area: category;
}
.news-single__date {
  grid-area: date;
  color: #000;
  font-size: 1.125rem;
  font-weight: var(--f-regular);
  line-height: 1;
  font-family: "Afacad", "Noto Sans", "Urbanist", "Arial", "Helvetica", sans-serif;
  font-weight: var(--f-regular);
}
.news-single__title {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: title;
  color: #000;
  font-size: clamp(1.625rem, 1.0892857143rem + 1.4285714286vw, 2.375rem);
  font-weight: var(--f-bold);
  line-height: 1.5;
}
@media screen and (max-width: 767.9px){
  .news-top > .title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .news-top > .news-list {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .news-top > .circle-more {
    -ms-grid-row: 5;
    -ms-grid-column: 2;
  }
  .news-list__date {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .news-list__categories {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .news-list__title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .news-list__link > .news-list__title {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .company__body {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .company__button {
    -ms-grid-row: 5;
    -ms-grid-column: 1;
  }
  .company__visual {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .company-greeting__text .title-wrap {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .news-list__link > .title-wrap {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .company-greeting__visual-wrap {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }
  .news-single__header .news-list__categories {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  .news-single__date {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .news-single__title {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .news-list__link > .news-single__title {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
}
@media screen and (max-width: 1199.9px){
  .company-greeting__lead {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .company-greeting__body > .company-greeting__visual-wrap {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
  }
}
.news-single__thumb {
  margin-top: clamp(1.25rem, 0.8928571429rem + 0.9523809524vw, 1.75rem);
}
.news-single__thumb-img {
  width: 100%;
  border-radius: 0.25rem;
  -o-object-fit: cover;
     object-fit: cover;
}
.news-single {
  /*
   * the_content()の本文タイポグラフィ本体は共通コンポーネント.article（_article.scss）が担当する
   * （works-detail__body / works-detail__contentと同じ仕組み。h2/h3/h4のドット装飾やtableのスペック表デザインもここで揃う）。
   * ここではnews-single固有の余白と、お知らせ詳細だけ変えたいリンクの見た目だけを上書きする。
   */
}
.news-single__body {
  margin-top: clamp(1.25rem, 0.8928571429rem + 0.9523809524vw, 1.75rem);
  /*
   * .articleの既定だと記事タイトル(.news-single__title：f-clamp(22,32))よりフォントサイズが大きく、
   * 上マージン(f-clamp(30,40))も広いため、どちらも少し詰める
   */
}
.news-single__body h2 {
  margin-top: clamp(1.25rem, 0.9821428571rem + 0.7142857143vw, 1.625rem);
  font-size: clamp(1.25rem, 0.8928571429rem + 0.9523809524vw, 1.75rem);
}
.news-single__body {
  /* .articleの既定（メインカラー文字・hoverで下線）に対して、お知らせ詳細だけ黒文字・下線ありに変える */
}
.news-single__body a {
  color: #000;
  font-weight: var(--f-medium);
  text-decoration: underline;
}
@media (hover: hover) {
  .news-single__body a:hover {
    text-decoration: none;
  }
}
.news-single__body {
  /*
   * 上のリンク上書き（黒文字・下線）はボタンブロックには適用しない。
   * 適用されると.wp-block-button__link（黒背景・白文字）の文字色まで黒になり、
   * ボタンの文字が背景と同化して見えなくなるため、ボタンとしての見た目に戻す
   */
}
.news-single__body .wp-block-button__link {
  color: #fff;
  text-decoration: none;
}
.news-single__back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 白カードの外（グレー背景側）に配置したため、カードのpage-panel下paddingとは別に間隔をとる */
  margin-top: clamp(1.875rem, 1.4285714286rem + 1.1904761905vw, 2.5rem);
  /*
   * 他ページの.buttonより大きくする。高さ・文字サイズは控えめにして、横幅だけ広げる。
   * アイコンはabsolute配置・テキストはボタン中央寄せなので、横幅を広げてもテキスト位置は中央のまま動かない。
   */
}
.news-single__back .button.is-prev .button__item {
  min-width: 320px;
  min-height: 52px;
  padding-inline: clamp(2rem, 1.8214285714rem + 0.4761904762vw, 2.25rem);
  font-size: 15px;
}
.news-single__back {
  /* もう少し左寄せにする */
}
.news-single__back .button__icon {
  left: clamp(1.5rem, 1.3214285714rem + 0.4761904762vw, 1.75rem);
  width: 1.375rem;
}

/**
  utility
  汎用クラス
**/
.is-overflow {
  overflow: hidden;
  position: relative;
}

@media screen and (max-width: 1199.9px) {
  .is-pc {
    display: none !important;
  }
}

@media screen and (max-width: 999.9px) {
  .is-m {
    display: none !important;
  }
}

@media screen and (min-width: 1000px) {
  .is-none-m {
    display: none !important;
  }
}

@media screen and (min-width: 480px) {
  .is-xs {
    display: none !important;
  }
}

@media screen and (max-width: 479.9px) {
  .is-none-xs {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .is-sp {
    display: none !important;
  }
}

.is-tb {
  display: none !important;
}
@media screen and (min-width: 1200px) and (max-width: 767.9px) {
  .is-tb {
    display: block !important;
  }
}

@media screen and (min-width: 1200px) {
  .is-tbsp {
    display: none !important;
  }
}

@media screen and (max-width: 767.9px) {
  .is-pctb {
    display: none !important;
  }
}

.is-em {
  font-weight: var(--f-bold);
}

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

@media screen and (min-width: 768px) {
  .mt0 {
    margin-top: 0px !important;
  }
  .mb0 {
    margin-bottom: 0px !important;
  }
  .pt0 {
    padding-top: 0px !important;
  }
  .pb0 {
    padding-bottom: 0px !important;
  }
  .mt5 {
    margin-top: 5px !important;
  }
  .mb5 {
    margin-bottom: 5px !important;
  }
  .pt5 {
    padding-top: 5px !important;
  }
  .pb5 {
    padding-bottom: 5px !important;
  }
  .mt10 {
    margin-top: 10px !important;
  }
  .mb10 {
    margin-bottom: 10px !important;
  }
  .pt10 {
    padding-top: 10px !important;
  }
  .pb10 {
    padding-bottom: 10px !important;
  }
  .mt15 {
    margin-top: 15px !important;
  }
  .mb15 {
    margin-bottom: 15px !important;
  }
  .pt15 {
    padding-top: 15px !important;
  }
  .pb15 {
    padding-bottom: 15px !important;
  }
  .mt20 {
    margin-top: 20px !important;
  }
  .mb20 {
    margin-bottom: 20px !important;
  }
  .pt20 {
    padding-top: 20px !important;
  }
  .pb20 {
    padding-bottom: 20px !important;
  }
  .mt25 {
    margin-top: 25px !important;
  }
  .mb25 {
    margin-bottom: 25px !important;
  }
  .pt25 {
    padding-top: 25px !important;
  }
  .pb25 {
    padding-bottom: 25px !important;
  }
  .mt30 {
    margin-top: 30px !important;
  }
  .mb30 {
    margin-bottom: 30px !important;
  }
  .pt30 {
    padding-top: 30px !important;
  }
  .pb30 {
    padding-bottom: 30px !important;
  }
  .mt35 {
    margin-top: 35px !important;
  }
  .mb35 {
    margin-bottom: 35px !important;
  }
  .pt35 {
    padding-top: 35px !important;
  }
  .pb35 {
    padding-bottom: 35px !important;
  }
  .mt40 {
    margin-top: 40px !important;
  }
  .mb40 {
    margin-bottom: 40px !important;
  }
  .pt40 {
    padding-top: 40px !important;
  }
  .pb40 {
    padding-bottom: 40px !important;
  }
  .mt45 {
    margin-top: 45px !important;
  }
  .mb45 {
    margin-bottom: 45px !important;
  }
  .pt45 {
    padding-top: 45px !important;
  }
  .pb45 {
    padding-bottom: 45px !important;
  }
  .mt50 {
    margin-top: 50px !important;
  }
  .mb50 {
    margin-bottom: 50px !important;
  }
  .pt50 {
    padding-top: 50px !important;
  }
  .pb50 {
    padding-bottom: 50px !important;
  }
  .mt55 {
    margin-top: 55px !important;
  }
  .mb55 {
    margin-bottom: 55px !important;
  }
  .pt55 {
    padding-top: 55px !important;
  }
  .pb55 {
    padding-bottom: 55px !important;
  }
  .mt60 {
    margin-top: 60px !important;
  }
  .mb60 {
    margin-bottom: 60px !important;
  }
  .pt60 {
    padding-top: 60px !important;
  }
  .pb60 {
    padding-bottom: 60px !important;
  }
  .mt65 {
    margin-top: 65px !important;
  }
  .mb65 {
    margin-bottom: 65px !important;
  }
  .pt65 {
    padding-top: 65px !important;
  }
  .pb65 {
    padding-bottom: 65px !important;
  }
  .mt70 {
    margin-top: 70px !important;
  }
  .mb70 {
    margin-bottom: 70px !important;
  }
  .pt70 {
    padding-top: 70px !important;
  }
  .pb70 {
    padding-bottom: 70px !important;
  }
  .mt75 {
    margin-top: 75px !important;
  }
  .mb75 {
    margin-bottom: 75px !important;
  }
  .pt75 {
    padding-top: 75px !important;
  }
  .pb75 {
    padding-bottom: 75px !important;
  }
  .mt80 {
    margin-top: 80px !important;
  }
  .mb80 {
    margin-bottom: 80px !important;
  }
  .pt80 {
    padding-top: 80px !important;
  }
  .pb80 {
    padding-bottom: 80px !important;
  }
  .mt85 {
    margin-top: 85px !important;
  }
  .mb85 {
    margin-bottom: 85px !important;
  }
  .pt85 {
    padding-top: 85px !important;
  }
  .pb85 {
    padding-bottom: 85px !important;
  }
  .mt90 {
    margin-top: 90px !important;
  }
  .mb90 {
    margin-bottom: 90px !important;
  }
  .pt90 {
    padding-top: 90px !important;
  }
  .pb90 {
    padding-bottom: 90px !important;
  }
  .mt95 {
    margin-top: 95px !important;
  }
  .mb95 {
    margin-bottom: 95px !important;
  }
  .pt95 {
    padding-top: 95px !important;
  }
  .pb95 {
    padding-bottom: 95px !important;
  }
  .mt100 {
    margin-top: 100px !important;
  }
  .mb100 {
    margin-bottom: 100px !important;
  }
  .pt100 {
    padding-top: 100px !important;
  }
  .pb100 {
    padding-bottom: 100px !important;
  }
  .mt105 {
    margin-top: 105px !important;
  }
  .mb105 {
    margin-bottom: 105px !important;
  }
  .pt105 {
    padding-top: 105px !important;
  }
  .pb105 {
    padding-bottom: 105px !important;
  }
  .mt110 {
    margin-top: 110px !important;
  }
  .mb110 {
    margin-bottom: 110px !important;
  }
  .pt110 {
    padding-top: 110px !important;
  }
  .pb110 {
    padding-bottom: 110px !important;
  }
  .mt115 {
    margin-top: 115px !important;
  }
  .mb115 {
    margin-bottom: 115px !important;
  }
  .pt115 {
    padding-top: 115px !important;
  }
  .pb115 {
    padding-bottom: 115px !important;
  }
  .mt120 {
    margin-top: 120px !important;
  }
  .mb120 {
    margin-bottom: 120px !important;
  }
  .pt120 {
    padding-top: 120px !important;
  }
  .pb120 {
    padding-bottom: 120px !important;
  }
  .mt125 {
    margin-top: 125px !important;
  }
  .mb125 {
    margin-bottom: 125px !important;
  }
  .pt125 {
    padding-top: 125px !important;
  }
  .pb125 {
    padding-bottom: 125px !important;
  }
  .mt130 {
    margin-top: 130px !important;
  }
  .mb130 {
    margin-bottom: 130px !important;
  }
  .pt130 {
    padding-top: 130px !important;
  }
  .pb130 {
    padding-bottom: 130px !important;
  }
  .mt135 {
    margin-top: 135px !important;
  }
  .mb135 {
    margin-bottom: 135px !important;
  }
  .pt135 {
    padding-top: 135px !important;
  }
  .pb135 {
    padding-bottom: 135px !important;
  }
  .mt140 {
    margin-top: 140px !important;
  }
  .mb140 {
    margin-bottom: 140px !important;
  }
  .pt140 {
    padding-top: 140px !important;
  }
  .pb140 {
    padding-bottom: 140px !important;
  }
  .mt145 {
    margin-top: 145px !important;
  }
  .mb145 {
    margin-bottom: 145px !important;
  }
  .pt145 {
    padding-top: 145px !important;
  }
  .pb145 {
    padding-bottom: 145px !important;
  }
  .mt150 {
    margin-top: 150px !important;
  }
  .mb150 {
    margin-bottom: 150px !important;
  }
  .pt150 {
    padding-top: 150px !important;
  }
  .pb150 {
    padding-bottom: 150px !important;
  }
  .mt155 {
    margin-top: 155px !important;
  }
  .mb155 {
    margin-bottom: 155px !important;
  }
  .pt155 {
    padding-top: 155px !important;
  }
  .pb155 {
    padding-bottom: 155px !important;
  }
  .mt160 {
    margin-top: 160px !important;
  }
  .mb160 {
    margin-bottom: 160px !important;
  }
  .pt160 {
    padding-top: 160px !important;
  }
  .pb160 {
    padding-bottom: 160px !important;
  }
  .mt165 {
    margin-top: 165px !important;
  }
  .mb165 {
    margin-bottom: 165px !important;
  }
  .pt165 {
    padding-top: 165px !important;
  }
  .pb165 {
    padding-bottom: 165px !important;
  }
  .mt170 {
    margin-top: 170px !important;
  }
  .mb170 {
    margin-bottom: 170px !important;
  }
  .pt170 {
    padding-top: 170px !important;
  }
  .pb170 {
    padding-bottom: 170px !important;
  }
  .mt175 {
    margin-top: 175px !important;
  }
  .mb175 {
    margin-bottom: 175px !important;
  }
  .pt175 {
    padding-top: 175px !important;
  }
  .pb175 {
    padding-bottom: 175px !important;
  }
  .mt180 {
    margin-top: 180px !important;
  }
  .mb180 {
    margin-bottom: 180px !important;
  }
  .pt180 {
    padding-top: 180px !important;
  }
  .pb180 {
    padding-bottom: 180px !important;
  }
  .mt185 {
    margin-top: 185px !important;
  }
  .mb185 {
    margin-bottom: 185px !important;
  }
  .pt185 {
    padding-top: 185px !important;
  }
  .pb185 {
    padding-bottom: 185px !important;
  }
  .mt190 {
    margin-top: 190px !important;
  }
  .mb190 {
    margin-bottom: 190px !important;
  }
  .pt190 {
    padding-top: 190px !important;
  }
  .pb190 {
    padding-bottom: 190px !important;
  }
  .mt195 {
    margin-top: 195px !important;
  }
  .mb195 {
    margin-bottom: 195px !important;
  }
  .pt195 {
    padding-top: 195px !important;
  }
  .pb195 {
    padding-bottom: 195px !important;
  }
  .mt200 {
    margin-top: 200px !important;
  }
  .mb200 {
    margin-bottom: 200px !important;
  }
  .pt200 {
    padding-top: 200px !important;
  }
  .pb200 {
    padding-bottom: 200px !important;
  }
}
@media screen and (max-width: 767.9px) {
  .mt-sp0 {
    margin-top: 0px !important;
  }
  .mb-sp0 {
    margin-bottom: 0px !important;
  }
  .pt-sp0 {
    padding-top: 0px !important;
  }
  .pb-sp0 {
    padding-bottom: 0px !important;
  }
  .mt-sp5 {
    margin-top: 5px !important;
  }
  .mb-sp5 {
    margin-bottom: 5px !important;
  }
  .pt-sp5 {
    padding-top: 5px !important;
  }
  .pb-sp5 {
    padding-bottom: 5px !important;
  }
  .mt-sp10 {
    margin-top: 10px !important;
  }
  .mb-sp10 {
    margin-bottom: 10px !important;
  }
  .pt-sp10 {
    padding-top: 10px !important;
  }
  .pb-sp10 {
    padding-bottom: 10px !important;
  }
  .mt-sp15 {
    margin-top: 15px !important;
  }
  .mb-sp15 {
    margin-bottom: 15px !important;
  }
  .pt-sp15 {
    padding-top: 15px !important;
  }
  .pb-sp15 {
    padding-bottom: 15px !important;
  }
  .mt-sp20 {
    margin-top: 20px !important;
  }
  .mb-sp20 {
    margin-bottom: 20px !important;
  }
  .pt-sp20 {
    padding-top: 20px !important;
  }
  .pb-sp20 {
    padding-bottom: 20px !important;
  }
  .mt-sp25 {
    margin-top: 25px !important;
  }
  .mb-sp25 {
    margin-bottom: 25px !important;
  }
  .pt-sp25 {
    padding-top: 25px !important;
  }
  .pb-sp25 {
    padding-bottom: 25px !important;
  }
  .mt-sp30 {
    margin-top: 30px !important;
  }
  .mb-sp30 {
    margin-bottom: 30px !important;
  }
  .pt-sp30 {
    padding-top: 30px !important;
  }
  .pb-sp30 {
    padding-bottom: 30px !important;
  }
  .mt-sp35 {
    margin-top: 35px !important;
  }
  .mb-sp35 {
    margin-bottom: 35px !important;
  }
  .pt-sp35 {
    padding-top: 35px !important;
  }
  .pb-sp35 {
    padding-bottom: 35px !important;
  }
  .mt-sp40 {
    margin-top: 40px !important;
  }
  .mb-sp40 {
    margin-bottom: 40px !important;
  }
  .pt-sp40 {
    padding-top: 40px !important;
  }
  .pb-sp40 {
    padding-bottom: 40px !important;
  }
  .mt-sp45 {
    margin-top: 45px !important;
  }
  .mb-sp45 {
    margin-bottom: 45px !important;
  }
  .pt-sp45 {
    padding-top: 45px !important;
  }
  .pb-sp45 {
    padding-bottom: 45px !important;
  }
  .mt-sp50 {
    margin-top: 50px !important;
  }
  .mb-sp50 {
    margin-bottom: 50px !important;
  }
  .pt-sp50 {
    padding-top: 50px !important;
  }
  .pb-sp50 {
    padding-bottom: 50px !important;
  }
  .mt-sp55 {
    margin-top: 55px !important;
  }
  .mb-sp55 {
    margin-bottom: 55px !important;
  }
  .pt-sp55 {
    padding-top: 55px !important;
  }
  .pb-sp55 {
    padding-bottom: 55px !important;
  }
  .mt-sp60 {
    margin-top: 60px !important;
  }
  .mb-sp60 {
    margin-bottom: 60px !important;
  }
  .pt-sp60 {
    padding-top: 60px !important;
  }
  .pb-sp60 {
    padding-bottom: 60px !important;
  }
  .mt-sp65 {
    margin-top: 65px !important;
  }
  .mb-sp65 {
    margin-bottom: 65px !important;
  }
  .pt-sp65 {
    padding-top: 65px !important;
  }
  .pb-sp65 {
    padding-bottom: 65px !important;
  }
  .mt-sp70 {
    margin-top: 70px !important;
  }
  .mb-sp70 {
    margin-bottom: 70px !important;
  }
  .pt-sp70 {
    padding-top: 70px !important;
  }
  .pb-sp70 {
    padding-bottom: 70px !important;
  }
  .mt-sp75 {
    margin-top: 75px !important;
  }
  .mb-sp75 {
    margin-bottom: 75px !important;
  }
  .pt-sp75 {
    padding-top: 75px !important;
  }
  .pb-sp75 {
    padding-bottom: 75px !important;
  }
  .mt-sp80 {
    margin-top: 80px !important;
  }
  .mb-sp80 {
    margin-bottom: 80px !important;
  }
  .pt-sp80 {
    padding-top: 80px !important;
  }
  .pb-sp80 {
    padding-bottom: 80px !important;
  }
  .mt-sp85 {
    margin-top: 85px !important;
  }
  .mb-sp85 {
    margin-bottom: 85px !important;
  }
  .pt-sp85 {
    padding-top: 85px !important;
  }
  .pb-sp85 {
    padding-bottom: 85px !important;
  }
  .mt-sp90 {
    margin-top: 90px !important;
  }
  .mb-sp90 {
    margin-bottom: 90px !important;
  }
  .pt-sp90 {
    padding-top: 90px !important;
  }
  .pb-sp90 {
    padding-bottom: 90px !important;
  }
  .mt-sp95 {
    margin-top: 95px !important;
  }
  .mb-sp95 {
    margin-bottom: 95px !important;
  }
  .pt-sp95 {
    padding-top: 95px !important;
  }
  .pb-sp95 {
    padding-bottom: 95px !important;
  }
  .mt-sp100 {
    margin-top: 100px !important;
  }
  .mb-sp100 {
    margin-bottom: 100px !important;
  }
  .pt-sp100 {
    padding-top: 100px !important;
  }
  .pb-sp100 {
    padding-bottom: 100px !important;
  }
  .mt-sp105 {
    margin-top: 105px !important;
  }
  .mb-sp105 {
    margin-bottom: 105px !important;
  }
  .pt-sp105 {
    padding-top: 105px !important;
  }
  .pb-sp105 {
    padding-bottom: 105px !important;
  }
  .mt-sp110 {
    margin-top: 110px !important;
  }
  .mb-sp110 {
    margin-bottom: 110px !important;
  }
  .pt-sp110 {
    padding-top: 110px !important;
  }
  .pb-sp110 {
    padding-bottom: 110px !important;
  }
  .mt-sp115 {
    margin-top: 115px !important;
  }
  .mb-sp115 {
    margin-bottom: 115px !important;
  }
  .pt-sp115 {
    padding-top: 115px !important;
  }
  .pb-sp115 {
    padding-bottom: 115px !important;
  }
  .mt-sp120 {
    margin-top: 120px !important;
  }
  .mb-sp120 {
    margin-bottom: 120px !important;
  }
  .pt-sp120 {
    padding-top: 120px !important;
  }
  .pb-sp120 {
    padding-bottom: 120px !important;
  }
  .mt-sp125 {
    margin-top: 125px !important;
  }
  .mb-sp125 {
    margin-bottom: 125px !important;
  }
  .pt-sp125 {
    padding-top: 125px !important;
  }
  .pb-sp125 {
    padding-bottom: 125px !important;
  }
  .mt-sp130 {
    margin-top: 130px !important;
  }
  .mb-sp130 {
    margin-bottom: 130px !important;
  }
  .pt-sp130 {
    padding-top: 130px !important;
  }
  .pb-sp130 {
    padding-bottom: 130px !important;
  }
  .mt-sp135 {
    margin-top: 135px !important;
  }
  .mb-sp135 {
    margin-bottom: 135px !important;
  }
  .pt-sp135 {
    padding-top: 135px !important;
  }
  .pb-sp135 {
    padding-bottom: 135px !important;
  }
  .mt-sp140 {
    margin-top: 140px !important;
  }
  .mb-sp140 {
    margin-bottom: 140px !important;
  }
  .pt-sp140 {
    padding-top: 140px !important;
  }
  .pb-sp140 {
    padding-bottom: 140px !important;
  }
  .mt-sp145 {
    margin-top: 145px !important;
  }
  .mb-sp145 {
    margin-bottom: 145px !important;
  }
  .pt-sp145 {
    padding-top: 145px !important;
  }
  .pb-sp145 {
    padding-bottom: 145px !important;
  }
  .mt-sp150 {
    margin-top: 150px !important;
  }
  .mb-sp150 {
    margin-bottom: 150px !important;
  }
  .pt-sp150 {
    padding-top: 150px !important;
  }
  .pb-sp150 {
    padding-bottom: 150px !important;
  }
  .mt-sp155 {
    margin-top: 155px !important;
  }
  .mb-sp155 {
    margin-bottom: 155px !important;
  }
  .pt-sp155 {
    padding-top: 155px !important;
  }
  .pb-sp155 {
    padding-bottom: 155px !important;
  }
  .mt-sp160 {
    margin-top: 160px !important;
  }
  .mb-sp160 {
    margin-bottom: 160px !important;
  }
  .pt-sp160 {
    padding-top: 160px !important;
  }
  .pb-sp160 {
    padding-bottom: 160px !important;
  }
  .mt-sp165 {
    margin-top: 165px !important;
  }
  .mb-sp165 {
    margin-bottom: 165px !important;
  }
  .pt-sp165 {
    padding-top: 165px !important;
  }
  .pb-sp165 {
    padding-bottom: 165px !important;
  }
  .mt-sp170 {
    margin-top: 170px !important;
  }
  .mb-sp170 {
    margin-bottom: 170px !important;
  }
  .pt-sp170 {
    padding-top: 170px !important;
  }
  .pb-sp170 {
    padding-bottom: 170px !important;
  }
  .mt-sp175 {
    margin-top: 175px !important;
  }
  .mb-sp175 {
    margin-bottom: 175px !important;
  }
  .pt-sp175 {
    padding-top: 175px !important;
  }
  .pb-sp175 {
    padding-bottom: 175px !important;
  }
  .mt-sp180 {
    margin-top: 180px !important;
  }
  .mb-sp180 {
    margin-bottom: 180px !important;
  }
  .pt-sp180 {
    padding-top: 180px !important;
  }
  .pb-sp180 {
    padding-bottom: 180px !important;
  }
  .mt-sp185 {
    margin-top: 185px !important;
  }
  .mb-sp185 {
    margin-bottom: 185px !important;
  }
  .pt-sp185 {
    padding-top: 185px !important;
  }
  .pb-sp185 {
    padding-bottom: 185px !important;
  }
  .mt-sp190 {
    margin-top: 190px !important;
  }
  .mb-sp190 {
    margin-bottom: 190px !important;
  }
  .pt-sp190 {
    padding-top: 190px !important;
  }
  .pb-sp190 {
    padding-bottom: 190px !important;
  }
  .mt-sp195 {
    margin-top: 195px !important;
  }
  .mb-sp195 {
    margin-bottom: 195px !important;
  }
  .pt-sp195 {
    padding-top: 195px !important;
  }
  .pb-sp195 {
    padding-bottom: 195px !important;
  }
  .mt-sp200 {
    margin-top: 200px !important;
  }
  .mb-sp200 {
    margin-bottom: 200px !important;
  }
  .pt-sp200 {
    padding-top: 200px !important;
  }
  .pb-sp200 {
    padding-bottom: 200px !important;
  }
}
[class*=__link] {
  text-decoration: none;
}