@charset "UTF-8";
/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

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

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

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

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Fix appearance for Firefox
 */
[type=number] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  word-break: break-all;
  font-size: 10px;
  overflow-x: hidden;
}
@media (min-width: 768px) {
  html {
    font-size: 0.6944444444vw;
  }
}
@media (max-width: 767px) {
  html {
    font-size: min(2.6666666667vw, 20.4533333333px);
  }
}

body {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  position: relative;
  overflow-x: clip;
  color: #333;
}

.u-sp {
  display: none;
}
@media (max-width: 767px) {
  .u-sp {
    display: inline;
  }
}

.u-pc {
  display: inline;
}
@media (max-width: 767px) {
  .u-pc {
    display: none;
  }
}

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

.main {
  position: relative;
}

h1,
h2,
h3,
a,
p {
  line-height: 1;
}

a {
  transition: 0.5s;
  cursor: pointer;
}
a:hover {
  opacity: 0.6;
}

.inner128 {
  max-width: 132rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

.page-fv {
  position: relative;
}

.fv.page-fv {
  padding-bottom: 0;
}

.fv.page-fv .fv-nav {
  position: static;
}

.page-fv .fv-reserve__web {
  position: relative;
}
.page-fv .fv-reserve__web::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  width: 1.6rem;
  height: 1.6rem;
  background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.page-fv__visual {
  position: relative;
  width: 100%;
  height: 50rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .page-fv__visual {
    height: 32rem;
  }
}
.page-fv__visual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 57.3rem;
  height: 100%;
  z-index: 1;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.9) 32%, rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 767px) {
  .page-fv__visual::before {
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 100%);
  }
}

.page-fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.page-fv__logo {
  position: absolute;
  top: 0.7rem;
  left: 1.3rem;
  width: 25.6rem;
  z-index: 3;
}
@media (max-width: 767px) {
  .page-fv__logo {
    display: none;
  }
}
.page-fv__logo img {
  width: 100%;
  height: auto;
  display: block;
}

.page-fv__title {
  position: absolute;
  top: 50%;
  left: 8.3rem;
  transform: translateY(-50%);
  z-index: 2;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .page-fv__title {
    left: 50%;
    width: fit-content;
    max-width: 100%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
}

.page-fv__title-ja {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: #333;
}
@media (max-width: 767px) {
  .page-fv__title-ja {
    font-size: 2.2rem;
  }
}

.page-fv__title-line {
  display: block;
  width: auto;
  min-width: 27.6rem;
  height: 1px;
  background: #AE8D47;
  margin: 1.6rem 0 1.2rem;
}
@media (max-width: 767px) {
  .page-fv__title-line {
    width: auto;
    min-width: 20rem;
    margin: 1.2rem auto;
  }
}

.page-fv__title-en {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 0.06em;
  color: #AE8D47;
}
@media (max-width: 767px) {
  .page-fv__title-en {
    font-size: 2.2rem;
  }
}

.page-head {
  width: 100%;
  height: 24rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #fff;
  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3);
}
@media (max-width: 767px) {
  .page-head {
    height: auto;
    padding: 2rem;
  }
}

.logo {
  width: 5.8rem;
  height: 6.2rem;
  object-fit: contain;
}

.page-head__title {
  font-size: 4.8rem;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .page-head__title {
    font-size: 3.2rem;
  }
}

.border-line {
  width: 12rem;
  height: 0.5rem;
}
@media (max-width: 767px) {
  .border-line {
    width: 8rem;
  }
}

.contents-table {
  margin-top: 4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
  .contents-table {
    margin-top: 3rem;
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
@media (max-width: 767px) {
  .comparison-table {
    min-width: 60rem;
    table-layout: auto;
  }
}
.comparison-table th,
.comparison-table td {
  padding: 1.4rem 1rem;
  vertical-align: middle;
  text-align: center;
  font-size: 2rem;
  line-height: 1.8;
  border: 1px solid #D1CAB9;
}
@media (max-width: 767px) {
  .comparison-table th,
  .comparison-table td {
    padding: 0.7rem 0.5rem;
    font-size: 1.4rem;
    line-height: 1.5;
  }
}
.comparison-table thead td {
  font-size: 2rem;
}
@media (max-width: 767px) {
  .comparison-table thead td {
    font-size: 1.5rem;
    font-weight: bold;
  }
}
.comparison-table .comparison-table__header {
  width: 24rem;
  background: #AE8D47;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  vertical-align: middle;
  border-color: #D1CAB9;
}
@media (max-width: 767px) {
  .comparison-table .comparison-table__header {
    width: 12rem;
    font-size: 1.4rem;
    white-space: normal;
  }
}
.comparison-table .comparison-table__image {
  width: 21rem;
  height: 11rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .comparison-table .comparison-table__image {
    width: 12rem;
    height: 8rem;
  }
}
.comparison-table .comparison-table__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.comparison-table tbody td {
  text-align: left;
  font-size: 2rem;
}
@media (max-width: 767px) {
  .comparison-table tbody td {
    font-size: 1.4rem;
  }
}
.comparison-table tbody tr:last-child td {
  text-align: center;
  font-size: 2rem;
}
@media (max-width: 767px) {
  .comparison-table tbody tr:last-child td {
    font-size: 1.4rem;
  }
}

.comparison-table__c03 .col-left {
  background: #F5EEE0;
}
.comparison-table__c03 .col-center {
  background: #EBE2D0;
}
.comparison-table__c03 .col-right {
  background: #F5EEE0;
}

.comparison-table__c02 .col-left {
  background: #F5EEE0;
}
.comparison-table__c02 .col-right {
  background: #EBE2D0;
}

.comparison-table__c01 {
  table-layout: auto;
}
.comparison-table__c01 .comparison-table__header {
  width: 40%;
}
.comparison-table__c01 .col-single {
  background: #F5EEE0;
}
.comparison-table__c01 tbody td {
  text-align: center;
}

.table-note {
  font-size: 2rem;
  line-height: 2;
  inline-size: fit-content;
  margin-inline: auto;
  margin-top: 2.4rem;
}
@media (max-width: 767px) {
  .table-note {
    font-size: 1.4rem;
    margin-top: 1.5rem;
    width: 100%;
    text-align: left;
  }
}

.c-contents-titlearea {
  position: relative;
  margin: 10rem 0 4rem;
}
@media (max-width: 767px) {
  .c-contents-titlearea {
    margin: 4rem 0;
  }
}

.contents-title {
  background: #9EA5B0;
  display: flex;
  width: 100%;
  padding: 3rem 1rem;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  margin: 8rem 0 4rem;
}
@media (max-width: 767px) {
  .contents-title {
    margin: 4rem 0 2rem;
    font-size: 2.4rem;
    padding: 2rem 1rem;
  }
}
.contents-title::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  width: 100%;
  height: 2px;
  background: #FFF;
}
.contents-title::after {
  content: "";
  position: absolute;
  bottom: 1rem;
  left: 0;
  width: 100%;
  height: 2px;
  background: #FFF;
}

.basic-flex {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}
@media (max-width: 767px) {
  .basic-flex {
    flex-direction: column;
    gap: 2rem;
  }
}
.basic-flex {
  /* ======== .u-reverse（画像が右）の設定 ========
   HTMLの並び順はそのままで、見た目だけ左右反転させます
  */
}
.basic-flex.u-reverse {
  flex-direction: row-reverse;
}
@media (max-width: 767px) {
  .basic-flex.u-reverse {
    flex-direction: column !important;
  }
}
.basic-flex.u-reverse .basic-flex__image::before {
  left: auto;
  right: -2rem;
}
@media (max-width: 767px) {
  .basic-flex.u-reverse .basic-flex__image::before {
    right: -1rem;
  }
}
.basic-flex .basic-flex__image {
  width: 60rem;
  height: 40rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .basic-flex .basic-flex__image {
    width: 100%;
    height: 100%;
    margin-bottom: 2rem;
  }
}
.basic-flex .basic-flex__image::before {
  content: "";
  position: absolute;
  bottom: -2rem;
  left: -2rem;
  width: 100%;
  height: 100%;
  background: #AE8D47;
  z-index: -1;
}
@media (max-width: 767px) {
  .basic-flex .basic-flex__image::before {
    bottom: -1rem;
    left: -1rem;
  }
}
.basic-flex .basic-flex__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.basic-flex__textarea {
  flex: 1;
}
@media (max-width: 767px) {
  .basic-flex__textarea {
    width: 100%;
    flex: auto;
  }
}

.basic-flex__title {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.6;
  padding-bottom: 2rem;
  border-bottom: 1px solid #565656;
}
@media (max-width: 767px) {
  .basic-flex__title {
    font-size: 2.4rem;
    padding-bottom: 1rem;
  }
}
.basic-flex__title span {
  color: #AE8D47;
}

.basic-flex__text {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (max-width: 767px) {
  .basic-flex__text {
    margin-top: 2rem;
    gap: 1rem;
  }
}

.paragraph {
  font-size: 2rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .paragraph {
    font-size: 1.6rem;
    line-height: 1.8;
  }
}

/* SEO用の隠し見出し（スクリーンリーダー・検索エンジンには読まれ、視覚上は非表示）
   指示書のH1はテンプレ側で <h1 class="u-sr-only"> として設置し、
   見た目のページ名見出しは p / h2 に格下げして重複を避ける */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* main〜footer の継ぎ目にbody背景が1px見える事故の対策（サブピクセル丸め）。
   サイトの基調色（フッターと同系色）に案件ごとに変更する */
#container {
  background: #fff;
}

/* ============================================================
   ページトップへ戻るボタン（全ページ共通・template-parts/to-top.php）
   どの背景上でも視認できる配色＋影。色はテーマカラーに合わせて変更
   ============================================================ */
.to-top {
  position: fixed;
  right: 0.7rem;
  bottom: 4.5rem;
  z-index: 9980;
  width: 7.5rem;
  height: 7.5rem;
  padding: 0;
  border: none;
  background: #deff00;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
@media (max-width: 767px) {
  .to-top {
    display: none;
  }
}

.to-top.is-show {
  opacity: 1;
  visibility: visible;
}

.to-top::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.469rem;
  height: 2.661rem;
  background: url("../img/common/icon-arrow.svg") no-repeat center/contain;
  transform: translate(-50%, -50%);
  filter: brightness(0);
}

/* ============================================================
   reCAPTCHA v3 のバッジ（右下に固定される Google 提供の要素）
   既定の bottom:14px だと、ページトップボタン（PC）や
   下部固定バー（SP）に重なるので、その上へ逃がす。

   ★バッジ自体は消さない。reCAPTCHAの利用規約で、バッジを隠す場合は
     「このサイトはreCAPTCHAによって保護されています」等の文言を
     フォーム付近に明示する義務があるため。位置だけ動かす。
   ★Google がインラインスタイルで bottom を当てるので !important が必要。
   ============================================================ */
.grecaptcha-badge {
  bottom: 13rem !important;
}
@media (max-width: 767px) {
  .grecaptcha-badge {
    bottom: 7rem !important;
  }
}

/* ============================================================
   ヘッダー（Figma: Component 4 / node 66:1753・1440×90）
   PC: 上部固定・白背景。左ロゴ／中央グロナビ／右にボタン3つ
   SP: 高さ61px。左ロゴ／右ハンバーガー（Figma: TOP_sp・sp_menu）
   ============================================================ */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 9rem;
  z-index: 9900;
  background: #fff;
}
@media (max-width: 767px) {
  .l-header {
    height: 6.1rem;
  }
}

.l-header__wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 9.1rem 0 9rem;
}
@media (max-width: 767px) {
  .l-header__wrap {
    padding: 0 1.8rem 0 1.7rem;
  }
}

.l-header__logo {
  width: 25.4rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .l-header__logo {
    width: 18.4rem;
  }
}
.l-header__logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── グローバルナビ（PCのみ） ───────────────── */
.l-nav {
  margin-left: 6rem;
}
@media (max-width: 767px) {
  .l-nav {
    display: none;
  }
}

.l-nav__list {
  display: flex;
  align-items: center;
  gap: 2.9rem;
  list-style: none;
}

.l-nav__link {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
}

/* ── ヘッダー右のボタン3つ（PCのみ） ──────────── */
.l-header__btns {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
@media (max-width: 767px) {
  .l-header__btns {
    display: none;
  }
}

.l-header__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 5.1rem;
  padding: 0 1.5rem;
  background: #fff;
  border: 0.375rem solid #000;
  text-decoration: none;
}

.l-header__btn--tel {
  width: 17.3rem;
}

.l-header__btn--line {
  width: 10.5rem;
}

.l-header__btn--contact {
  width: 18rem;
}

.l-header__btn-text {
  font-family: "Anton", sans-serif;
  font-size: 1.8rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #e50113;
  text-align: center;
  white-space: nowrap;
}

.l-header__btn--contact .l-header__btn-text {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
}

.l-header__btn-icon {
  flex-shrink: 0;
  display: block;
}
.l-header__btn-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.l-header__btn--tel .l-header__btn-icon {
  width: 1.5rem;
  height: 1.91667rem;
}

.l-header__btn--contact .l-header__btn-icon {
  width: 2.5645rem;
  height: 1.875rem;
}

.l-header__btn-line-icon {
  position: relative;
  flex-shrink: 0;
  width: 3.375rem;
  height: 2.7rem;
}
.l-header__btn-line-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.l-header__btn-line-label {
  position: absolute;
  top: 0.5rem;
  left: 0.813rem;
  font-family: "Anton", sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}

/* ── ハンバーガー（SPのみ・Figma node 9:966 = 52×44） ─── */
.hamburger {
  display: none;
  padding: 0;
  background: #fff;
  border: 0.3488rem solid #000;
  cursor: pointer;
}
@media (max-width: 767px) {
  .hamburger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.364rem;
    position: fixed;
    top: 0.9rem;
    right: 1.8rem;
    z-index: 9999;
    width: 5.2rem;
    height: 4.4rem;
  }
}

.hamburger span {
  display: block;
  width: 3.1rem;
  height: 0.436rem;
  background: #000;
  transition: 0.3s;
}

.hamburger.open span {
  position: absolute;
  top: 50%;
  left: 50%;
}

.hamburger.open {
  background: #000;
  border-color: #fff;
}

.hamburger.open span {
  background: #fff;
}

.hamburger.open span:nth-child(1) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
}

.hamburger.open span:nth-child(3) {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

body.fixed {
  height: 100%;
  overflow: hidden;
}

/* ── SPメニュー（Figma: sp_menu / node 1:8876） ───────
   右から幅270pxの黒パネルがスライドイン
   ------------------------------------------------------ */
.hamburger-menu {
  display: none;
}
@media (max-width: 767px) {
  .hamburger-menu {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 27rem;
    height: 100vh;
    background: #000;
    z-index: 9990;
    transform: translateX(100%);
    transition: transform 600ms cubic-bezier(0.75, 0, 0.25, 1);
  }
}

.hamburger-menu.active {
  transform: translateX(0);
}

.hamburger-menu__inner {
  padding: 14rem 0 0;
}

.hamburger-menu__logo {
  display: block;
  width: 18.4rem;
  margin: 0 0 3.4rem 4.2rem;
}
.hamburger-menu__logo img {
  width: 100%;
  height: auto;
  display: block;
}

.hamburger-menu__list {
  list-style: none;
}

.hamburger-menu__listItem + .hamburger-menu__listItem {
  margin-top: 1.5rem;
}

.hamburger-menu__listLink {
  display: block;
  position: relative;
  padding: 1rem 4rem 1rem 6.1rem;
  font-size: 1.7442rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.hamburger-menu__listLink::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3.9rem;
  width: 0.886rem;
  height: 1.4878rem;
  background: url("../img/common/icon-arrow.svg") no-repeat center/contain;
  transform: translateY(-50%) rotate(90deg);
}

/* ── SP下部固定バー（Figma: sp_menu の y706・高さ52px） ───
   電話／LINE／メール／ページトップの4ボタン横並び
   ------------------------------------------------------ */
.sp-fix-area {
  display: none;
}
@media (max-width: 767px) {
  .sp-fix-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    position: fixed;
    left: 0;
    bottom: 0.9rem;
    width: 100%;
    z-index: 9980;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
}

.sp-fix-area.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sp-fix-area__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5.2rem;
  padding: 0;
  background: #fff;
  border: 0.3488rem solid #000;
  cursor: pointer;
}
.sp-fix-area__btn img {
  width: 100%;
  height: 100%;
  display: block;
}

.sp-fix-area__btn--tel {
  width: 6.1rem;
}
.sp-fix-area__btn--tel img {
  width: 1.7442rem;
  height: 2.2286rem;
}

.sp-fix-area__btn--line {
  width: 7.4rem;
}

.sp-fix-area__btn--mail {
  width: 6.5rem;
}
.sp-fix-area__btn--mail img {
  width: 2.9819rem;
  height: 2.1802rem;
}

.sp-fix-area__line-icon {
  position: relative;
  display: block;
  width: 3.9244rem;
  height: 2.6163rem;
}
.sp-fix-area__line-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.sp-fix-area__line-label {
  position: absolute;
  top: 0.392rem;
  left: 0.956rem;
  font-family: "Anton", sans-serif;
  font-size: 1.2209rem;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}

.sp-fix-area__btn--top {
  width: 5.2rem;
  height: 5.2rem;
  background: #deff00;
  border: none;
  position: relative;
}
.sp-fix-area__btn--top::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.0984rem;
  height: 1.8452rem;
  background: url("../img/common/icon-arrow.svg") no-repeat center/contain;
  transform: translate(-50%, -50%);
  filter: brightness(0);
}

/* ============================================================
   フッター（Figma: Component 3 下段 / node I66:1776;66:816・1440×710）
   赤背景に Googleマップ → 白ロゴ → ナビ → コピーライト
   右下に黄色のページトップボタン
   ============================================================ */
.l-footer {
  position: relative;
  padding: 6rem 0 2.3rem;
  background: #e50113;
}
@media (max-width: 767px) {
  .l-footer {
    padding: 3.5rem 0 2.6rem;
  }
}

/* ── Googleマップ ─────────────────────────── */
.l-footer__map {
  width: 126rem;
  height: 36rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .l-footer__map {
    width: 34rem;
    height: 41.9rem;
  }
}
.l-footer__map iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── ロゴ ────────────────────────────────── */
.l-footer__logo {
  display: block;
  width: 25.4rem;
  margin: 6rem auto 0;
}
@media (max-width: 767px) {
  .l-footer__logo {
    width: 18.4rem;
    margin-top: 5.1rem;
  }
}
.l-footer__logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── ナビ ────────────────────────────────── */
.l-footer__nav {
  margin-top: 4.4rem;
}
@media (max-width: 767px) {
  .l-footer__nav {
    display: none;
  }
}

.l-footer__nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  list-style: none;
}
@media (max-width: 767px) {
  .l-footer__nav-list {
    flex-wrap: wrap;
    gap: 1.2rem 2rem;
    padding: 0 2rem;
  }
}

.l-footer__nav-link {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .l-footer__nav-link {
    font-size: 1.5rem;
  }
}

/* ── コピーライト（ページの最末端。下に余計な余白を付けない） ── */
.l-copyright {
  margin-top: 6rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  text-align: center;
}
@media (max-width: 767px) {
  .l-copyright {
    margin-top: 7rem;
    font-size: 1rem;
  }
}

@media (max-width: 767px) {
  .u-pc {
    display: none !important;
  }
}

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

.u-reverse {
  flex-direction: row-reverse !important;
}

.u-bg-none {
  background: transparent !important;
  box-shadow: none !important;
}

.u-mt10 {
  margin-top: 1rem !important;
}
@media (max-width: 767px) {
  .u-mt10 {
    margin-top: 0.5rem !important;
  }
}

.u-mt20 {
  margin-top: 2rem !important;
}
@media (max-width: 767px) {
  .u-mt20 {
    margin-top: 1rem !important;
  }
}

.u-mt30 {
  margin-top: 3rem !important;
}
@media (max-width: 767px) {
  .u-mt30 {
    margin-top: 1.5rem !important;
  }
}

.u-mt40 {
  margin-top: 4rem !important;
}
@media (max-width: 767px) {
  .u-mt40 {
    margin-top: 2rem !important;
  }
}

.u-mt50 {
  margin-top: 5rem !important;
}
@media (max-width: 767px) {
  .u-mt50 {
    margin-top: 2.5rem !important;
  }
}

.u-mt60 {
  margin-top: 6rem !important;
}
@media (max-width: 767px) {
  .u-mt60 {
    margin-top: 2rem !important;
  }
}

.u-mt70 {
  margin-top: 7rem !important;
}
@media (max-width: 767px) {
  .u-mt70 {
    margin-top: 3.5rem !important;
  }
}

.u-mt80 {
  margin-top: 8rem !important;
}
@media (max-width: 767px) {
  .u-mt80 {
    margin-top: 4rem !important;
  }
}

.u-mt90 {
  margin-top: 9rem !important;
}
@media (max-width: 767px) {
  .u-mt90 {
    margin-top: 4.5rem !important;
  }
}

.u-mt100 {
  margin-top: 10rem !important;
}
@media (max-width: 767px) {
  .u-mt100 {
    margin-top: 5rem !important;
  }
}

.u-mb0 {
  margin-bottom: 0 !important;
}

.u-mb10 {
  margin-bottom: 1rem !important;
}
@media (max-width: 767px) {
  .u-mb10 {
    margin-bottom: 0.5rem !important;
  }
}

.u-mb20 {
  margin-bottom: 2rem !important;
}
@media (max-width: 767px) {
  .u-mb20 {
    margin-bottom: 1rem !important;
  }
}

.u-mb30 {
  margin-bottom: 3rem !important;
}
@media (max-width: 767px) {
  .u-mb30 {
    margin-bottom: 1.5rem !important;
  }
}

.u-mb40 {
  margin-bottom: 4rem !important;
}
@media (max-width: 767px) {
  .u-mb40 {
    margin-bottom: 2rem !important;
  }
}

.u-mb50 {
  margin-bottom: 5rem !important;
}
@media (max-width: 767px) {
  .u-mb50 {
    margin-bottom: 2.5rem !important;
  }
}

.u-mb60 {
  margin-bottom: 6rem !important;
}
@media (max-width: 767px) {
  .u-mb60 {
    margin-bottom: 3rem !important;
  }
}

.u-mb70 {
  margin-bottom: 7rem !important;
}
@media (max-width: 767px) {
  .u-mb70 {
    margin-bottom: 3.5rem !important;
  }
}

.u-mb80 {
  margin-bottom: 8rem !important;
}
@media (max-width: 767px) {
  .u-mb80 {
    margin-bottom: 4rem !important;
  }
}

.u-mb90 {
  margin-bottom: 9rem !important;
}
@media (max-width: 767px) {
  .u-mb90 {
    margin-bottom: 4.5rem !important;
  }
}

.u-mb100 {
  margin-bottom: 10rem !important;
}
@media (max-width: 767px) {
  .u-mb100 {
    margin-bottom: 5rem !important;
  }
}

.u-flex-start {
  align-items: flex-start !important;
}
@media (max-width: 767px) {
  .u-flex-start {
    align-items: center !important;
  }
}

.u-blue {
  color: #3E6EB4;
}

.u-fz70 {
  font-size: 7rem;
}
@media (max-width: 767px) {
  .u-fz70 {
    font-size: 4.5rem;
  }
}

.u-fz80 {
  font-size: 8rem;
}
@media (max-width: 767px) {
  .u-fz80 {
    font-size: 3.2rem;
  }
}

.u-fz220 {
  font-size: 22rem;
}
@media (max-width: 767px) {
  .u-fz220 {
    font-size: 9.6rem;
  }
}

/* ============================================================
   スクロールアクション（アメコミ風）
   フェードアップの代わりに「叩きつける・飛び込む・弾ける」動きで見せる。
   挙動は js/animation.js（GSAP + ScrollTrigger）。

   【重要】初期状態（opacity:0）は `html.js-anim` の配下でだけ効かせる。
   このクラスは animation.js が「GSAPが使える」と確認できたときだけ付けるので、
   JSが失敗しても要素は普通に表示される。
   （旧 .fade-up は opacity:0 をCSSに直接持たせていたため、JSが止まると
     セクションが丸ごと見えなくなる事故が実際に起きた）
   ============================================================ */
html.js-anim .js-stamp,
html.js-anim .js-zoom,
html.js-anim .js-burst-l,
html.js-anim .js-burst-r,
html.js-anim .js-pop {
  opacity: 0;
}
html.js-anim .js-stagger > * {
  opacity: 0;
}

/* ── スタンプ着地の衝撃（セクションタイトル） ─────────────
   GSAPが着地時に .is-impact を付けたら、白いリングが外へ弾けて消える。
   中心側は透明なので文字・帯は隠れない。
   ------------------------------------------------------ */
.js-stamp {
  position: relative;
}

.js-stamp.is-impact::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.85) 58%, rgba(255, 255, 255, 0) 64%);
  animation: comic-impact 0.5s ease-out forwards;
}

@keyframes comic-impact {
  0% {
    transform: translate(-50%, -50%) scale(0.55);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
}
/* ── MVの写真をゆっくり拡大縮小し続ける（画面に動きを残す） ──
   キャッチコピーの飛び込みが主役なので、写真側はゆるく。
   ------------------------------------------------------ */
.index-mv__image {
  animation: comic-kenburns 14s ease-in-out infinite alternate;
}

@keyframes comic-kenburns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.08);
  }
}
@media (prefers-reduced-motion: reduce) {
  .index-mv__image {
    animation-duration: 24s;
  }
  @keyframes comic-kenburns {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.03);
    }
  }
  .js-stamp.is-impact::after {
    animation: none;
    opacity: 0;
  }
}
/* ============================================================
   SNS（Instagram / TikTok フィード）— 全ページ共通
   Figma: Component 3 上段（1440×923）／黒背景に白パネル
   ============================================================ */
.sns {
  padding: 6rem 0 6rem;
  background: #000;
}
@media (max-width: 767px) {
  .sns {
    padding: 3.5rem 0 5.3rem;
  }
}

.sns__title {
  position: relative;
  z-index: 1;
  margin-left: 10.1673rem;
}
@media (max-width: 767px) {
  .sns__title {
    margin-left: 5.6686rem;
  }
}
.sns__title .sec-title__text::after {
  background: linear-gradient(180deg, #ff5900 20.673%, #eddf99 90.385%);
  -webkit-background-clip: text;
  background-clip: text;
}

.sns__panel {
  width: 108rem;
  margin: -6.87rem auto 0;
  padding: 9rem 11.9rem 4.5rem;
  background: #fff;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .sns__panel {
    width: 30.5rem;
    margin-top: -5.26rem;
    padding: 8.8rem 0 5.2rem;
    flex-direction: column;
    gap: 3.5rem;
  }
}

/* ── 準備中表示（SNSアカウント開設までの暫定） ─────────── */
.sns__panel--preparing {
  display: block;
  padding: 12rem 11.9rem;
}
@media (max-width: 767px) {
  .sns__panel--preparing {
    padding: 10rem 2rem 6rem;
  }
}

.sns__preparing {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
  text-align: center;
}
@media (max-width: 767px) {
  .sns__preparing {
    font-size: 1.8rem;
  }
}

.sns__col {
  width: 31.5rem;
}
@media (max-width: 767px) {
  .sns__col {
    width: 27.1rem;
    margin: 0 auto;
    text-align: center;
  }
}

.sns__label {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 9rem 0.75rem 3rem;
  background: #deff00;
  font-family: "Anton", sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .sns__label {
    padding: 0.7rem 6rem 0.7rem 2rem;
    font-size: 2.2rem;
  }
}

.sns__feed {
  display: grid;
  grid-template-columns: repeat(2, 15rem);
  margin-top: 1.5rem;
}
@media (max-width: 767px) {
  .sns__feed {
    grid-template-columns: repeat(2, 12.85rem);
    justify-content: center;
    margin-top: 1.7rem;
  }
}

.sns__feed--insta {
  gap: 1.5rem;
}
@media (max-width: 767px) {
  .sns__feed--insta {
    gap: 1.4rem;
  }
}

.sns__feed--tiktok {
  column-gap: 1.5rem;
  row-gap: 3rem;
}
@media (max-width: 767px) {
  .sns__feed--tiktok {
    column-gap: 1.4rem;
    row-gap: 2.7rem;
  }
}

.sns__item {
  background: #d9d9d9;
}

.sns__feed--insta .sns__item {
  height: 15rem;
}
@media (max-width: 767px) {
  .sns__feed--insta .sns__item {
    height: 12.85rem;
  }
}

.sns__feed--tiktok .sns__item {
  height: 21.8rem;
}
@media (max-width: 767px) {
  .sns__feed--tiktok .sns__item {
    height: 18.6rem;
  }
}

/* ============================================================
   CONTACT（電話・LINE・メール）— 全ページ共通
   Figma: Component 3 中段（1440×485）／背景は集中線（contact-lines.svg）
   ============================================================ */
.cta {
  position: relative;
  overflow: hidden;
  padding: 6rem 0 8.9rem;
  background: url("../img/common/contact-lines.svg") no-repeat center center/cover;
}
@media (max-width: 767px) {
  .cta {
    padding: 8.7rem 0 17.4rem;
    background-image: url("../img/common/contact-lines-sp.svg");
    background-position: -2.4rem 0;
    background-size: 43.4rem 57.6rem;
  }
}

@media (max-width: 767px) {
  .cta__title .sec-title__text {
    font-size: 4.186rem;
    -webkit-text-stroke: 0.6744rem #000;
  }
}
.cta__title .sec-title__text::after {
  background: linear-gradient(180deg, #e50113 33.093%, #8b000b 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.cta__tel {
  margin-top: 1.8rem;
  text-align: center;
}
@media (max-width: 767px) {
  .cta__tel {
    margin-top: 0;
  }
}

.cta__tel-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  font-family: "Anton", sans-serif;
  font-size: 3.6rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #e50113;
  text-decoration: none;
}
@media (max-width: 767px) {
  .cta__tel-link {
    gap: 0.8721rem;
    padding: 0.8721rem 1.7442rem;
    font-size: 2.7907rem;
  }
}

.cta__tel-icon {
  flex-shrink: 0;
  width: 2.3707rem;
  height: 3.0292rem;
}
@media (max-width: 767px) {
  .cta__tel-icon {
    width: 2.0741rem;
    height: 2.6502rem;
  }
}
.cta__tel-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── LINE／メールのボタン（黒枠＋右下にずれた黒い影） ───── */
.cta__btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  margin-top: 2.7rem;
}
@media (max-width: 767px) {
  .cta__btns {
    flex-direction: column;
    gap: 1.7rem;
    margin-top: 0.9rem;
  }
}

.cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 7.4rem;
  padding: 0 4.5rem;
  border: 0.6rem solid #000;
  box-shadow: 0.6rem 0.6rem 0 0 #000;
  text-decoration: none;
}
@media (max-width: 767px) {
  .cta__btn {
    gap: 0.8721rem;
    padding: 0 2.6163rem;
    border-width: 0.436rem;
    box-shadow: 0.5233rem 0.5233rem 0 0 #000;
  }
}

.cta__btn--line {
  width: 31.8rem;
  background: #08d0d0;
}
@media (max-width: 767px) {
  .cta__btn--line {
    width: 24.5rem;
    height: 6.1rem;
  }
}

.cta__btn--mail {
  width: 32rem;
  background: #deff00;
}
@media (max-width: 767px) {
  .cta__btn--mail {
    width: 24.5rem;
    height: 5.7rem;
  }
}

.cta__btn-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .cta__btn-text {
    font-size: 1.3953rem;
  }
}

.cta__btn-icon {
  flex-shrink: 0;
  width: 2.5645rem;
  height: 1.875rem;
}
@media (max-width: 767px) {
  .cta__btn-icon {
    width: 2.3856rem;
    height: 1.7443rem;
  }
}
.cta__btn-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.cta__btn-line-icon {
  position: relative;
  flex-shrink: 0;
  width: 3.375rem;
  height: 2.7rem;
}
@media (max-width: 767px) {
  .cta__btn-line-icon {
    width: 3.9244rem;
    height: 2.6163rem;
  }
}
.cta__btn-line-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.cta__btn-line-label {
  position: absolute;
  top: 0.45rem;
  left: 0.8rem;
  font-family: "Anton", sans-serif;
  font-size: 1.2rem;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .cta__btn-line-label {
    top: 0.456rem;
    left: 1.184rem;
    font-size: 1.1337rem;
  }
}

/* ── 右の作業員イラスト（右端を少しはみ出す） ───────── */
.cta__worker {
  position: absolute;
  top: 16.7rem;
  right: -2.7rem;
  width: 34.6rem;
  height: 33.4rem;
}
@media (max-width: 767px) {
  .cta__worker {
    top: 32.6rem;
    right: -0.2rem;
    width: 22.8rem;
    height: 21.9rem;
  }
}
.cta__worker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   トップページの土台
   Figma: TOPフレーム（1:4408）の node 1:8965 が y0〜3890 の赤背景。
   ヘッダー直下（MV）から GALLERY までが赤地で、その下の SNS は黒地。
   ============================================================ */
.index-main {
  background: #e50113;
}

.index-mv {
  background: #e50113;
  padding: 12rem 0 4.2rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .index-mv {
    padding: 7.8rem 0 7rem;
  }
}

.index-mv__inner {
  position: relative;
  width: 128rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .index-mv__inner {
    width: auto;
    margin: 0 1.7rem;
  }
}

.index-mv__slider {
  position: relative;
  z-index: 1;
  height: 54rem;
}
@media (max-width: 767px) {
  .index-mv__slider {
    height: 61.9rem;
  }
}

.index-mv__slider-wrap {
  height: 100%;
}

.index-mv__slide {
  height: 100%;
  overflow: hidden;
}

.index-mv__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.index-mv__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.index-mv__copy {
  position: absolute;
  z-index: 2;
  top: 30rem;
  left: -8rem;
  width: 92.5rem;
  padding: 2.25rem 0 2.25rem 10.525rem;
  background: #000;
  font-family: "Dela Gothic One", cursive;
  font-size: 6rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #deff00;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .index-mv__copy {
    top: 0;
    left: 0;
    width: auto;
    padding: 0.4rem 1.4rem 1.4rem;
    writing-mode: vertical-rl;
    font-feature-settings: "vert" 1;
    font-size: 3.4884rem;
    letter-spacing: 0.1em;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .index-mv__copy-comma {
    letter-spacing: 0.7em;
  }
}

/* ============================================================
   トップ ABOUT セクション
   Figma PC : TOP 1:4408 内 y720〜1394（1440基準）
   Figma SP : TOP_sp 1:3 内 y819.77〜1276（375基準）

   背景の赤は TOPフレーム全体に敷かれた node 1:8965（$c_red）。
   セクション自身に background は付けず、親（.main / .index-main）に赤が敷かれる前提。
   赤地を前提にした余白（padding）だけをここで持つ。

   レイヤー順:
     写真（乗算・背景）→ タイトル帯 → 黒帯 → 黄色い帯4本
   写真は絶対配置で右から回り込むので、テキスト系は position:relative で写真より前に置く。
   タイトル帯だけは z-index:1 を明示している
   （Figmaのレイヤー順は帯が写真の下だが、帯の右下が写真に隠れて読みにくかったため
     ユーザー指示で前面に変更した）。
   ============================================================ */
.about {
  position: relative;
  padding: 5.56rem 0 0;
}
@media (max-width: 767px) {
  .about {
    padding: 6.177rem 0 6.97rem;
  }
}

.about__inner {
  position: relative;
}

/* ------------------------------------------------------------
   セクションタイトル（共通 .sec-title の位置とグラデ色だけ上書き）
   ------------------------------------------------------------ */
.about__title {
  position: relative;
  z-index: 1;
  margin-left: 8.4423rem;
  margin-bottom: 2.567rem;
}
@media (max-width: 767px) {
  .about__title {
    margin-left: 1.7442rem;
    margin-bottom: 3.458rem;
  }
}
.about__title .sec-title__text::after {
  background: linear-gradient(180deg, #8a9a22 0%, #deff00 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ------------------------------------------------------------
   写真（Figma node 4:27 / SP 9:444）
   白地・黒線の線画を乗算で重ね、白地を赤に抜く
   ------------------------------------------------------------ */
.about__photo {
  position: absolute;
  top: 11.44rem;
  left: 43.7rem;
  right: 0;
  height: 56.4rem;
  overflow: hidden;
  background-color: #e50113;
  isolation: isolate;
}
@media (max-width: 767px) {
  .about__photo {
    top: 12.2233rem;
    left: 0;
    height: 33.4rem;
  }
}

.about__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
}

/* ------------------------------------------------------------
   黒帯の見出し（Figma node 4:26 / SP 9:445）
   ------------------------------------------------------------ */
.about__lead {
  position: relative;
  width: fit-content;
  margin-left: 9rem;
  margin-bottom: 3rem;
  padding: 2.25rem 1.02rem 2.25rem 1.5rem;
  background-color: #000;
  color: #deff00;
  font-family: "Dela Gothic One", cursive;
  font-size: 4.8rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .about__lead {
    margin-left: 0;
    margin-bottom: 1.8rem;
    padding: 0.8721rem 1.5349rem 0.8721rem 1.7442rem;
    font-size: 2.093rem;
  }
}

/* ------------------------------------------------------------
   黄色い帯4本（Figma node 4:21〜4:24 / SP 9:455・9:453・9:451・9:449）
   行ごとに背景が付くので span を行にして、p は1つにまとめている
   ------------------------------------------------------------ */
.about__text {
  position: relative;
  margin-left: 9.2rem;
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
  letter-spacing: 0.18rem;
}
@media (max-width: 767px) {
  .about__text {
    margin-left: 0;
    letter-spacing: 0.13953rem;
  }
}

.about__text-row {
  display: block;
  width: fit-content;
  padding: 1.5rem 6.75rem 1.5rem 3rem;
  background-color: #deff00;
  font-size: 2.25rem;
  line-height: 1.6;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .about__text-row {
    padding: 0.8721rem 1.7442rem 0.8721rem 2.6163rem;
    font-size: 1.3953rem;
  }
}

.about__text-row + .about__text-row {
  margin-top: 2.233rem;
}
@media (max-width: 767px) {
  .about__text-row + .about__text-row {
    margin-top: 0.923rem;
  }
}

.about__text-row--bold {
  letter-spacing: 0.225rem;
}
@media (max-width: 767px) {
  .about__text-row--bold {
    letter-spacing: 0.13953rem;
  }
}

.about__text-strong {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .about__text-strong {
    font-size: 1.3953rem;
  }
}

.about__text-normal {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .about__text-normal {
    font-size: 1.2209rem;
  }
}

/* ============================================================
   TOP - BUSINESS セクション
   Figma: PC = TOP 1:4408（1440基準・y1484〜2268） / SP = TOP_sp 1:3（375基準・y1328〜2256）

   ■ 実測の要点（すべて node 単位で取得した一次情報）
   ・青い斜線パネル 1:8962 / 9:363
       画像fillのタイル（PC 129.9px角 / SP 151.047px角・bg-top-left）。
       タイル原画 433×433px を実測 → 明るい青 #307db6 と濃い青 #0e6cb2 が
       ちょうど 50%:50%、境界は x-y=0 と x-y=216.5 の 45度線＝斜線は「＼」向き。
       → img/top/business-stripe.svg にタイルとして書き出して repeat させている。
   ・パネルは PC も SP も右端が画面端ぴったり（PC x90〜1440 / SP x17〜375）。
       そのため width は指定せず margin-left だけで右端まで伸ばしている
       （スクロールバーの有無で 100vw がズレる事故を避けるため）。
   ・パネルの高さは Figma と一致するよう padding とマージンの積み上げで出す。
       PC: 75 + 57.6(lead) + 60 + 300(card) + 28 + 83(MORE) + 45 = 649 ＝ Figma h649
       SP: 92 + 30.7 + 52.3 + 218 + 52 + 218 + 26 + 68 + 71 = 828 ＝ Figma h828
       （height 固定はしない＝文言が伸びても崩れない）
   ・MORE ボタンに矢印は無い（Figma 4:34 / 9:435 は黄色地＋黒フチ＋黒のズレ影のみ）。
   ============================================================ */
.business {
  position: relative;
  padding: 8.5854rem 0 9rem;
}
@media (max-width: 767px) {
  .business {
    padding: 12.0762rem 0 5.15rem;
  }
}

.business__inner {
  position: relative;
}

/* ------------------------------------------------------------
   セクションタイトル（共通コンポーネント .sec-title の位置＋グラデ色だけ上書き）
   ------------------------------------------------------------ */
.business__title {
  position: relative;
  z-index: 1;
  margin-left: 80.4423rem;
}
@media (max-width: 767px) {
  .business__title {
    margin-left: 7.849rem;
  }
}
.business__title .sec-title__text::after {
  background: linear-gradient(180deg, #ff5900 20.673%, #eddf99 90.385%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ------------------------------------------------------------
   青い斜線パネル（装飾。中にリード・カード・MORE を収める）
   ------------------------------------------------------------ */
.business__panel {
  position: relative;
  margin-top: -4.958rem;
  margin-left: 9rem;
  padding: 7.5rem 0 4.5rem 15rem;
  background: url("../img/top/business-stripe.svg") repeat top left;
  background-size: 12.99rem 12.99rem;
}
@media (max-width: 767px) {
  .business__panel {
    margin-top: -4.9412rem;
    margin-left: 1.7rem;
    padding: 9.2rem 0 7.1rem 2.6rem;
    background-size: 15.1047rem 15.1047rem;
  }
}

/* リード（Figma 1:8981 / 9:434） */
.business__lead {
  font-family: "Dela Gothic One", cursive;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #fff;
}
@media (max-width: 767px) {
  .business__lead {
    font-size: 1.9186rem;
  }
}

/* ------------------------------------------------------------
   注力事業カード（TOPは2つだけ）
   ------------------------------------------------------------ */
.business__cards {
  display: flex;
  gap: 9rem;
  margin-top: 6rem;
  margin-left: 3rem;
}
@media (max-width: 767px) {
  .business__cards {
    flex-direction: column;
    gap: 5.2rem;
    margin-top: 5.2rem;
    margin-left: 0.9rem;
  }
}

.business__card {
  position: relative;
  width: 42rem;
}
@media (max-width: 767px) {
  .business__card {
    width: 30.5rem;
  }
}

/* 事業名（h3）。カード画像の左上に 30px ずらして重ねる（Figma 4:30 / 4:31） */
.business__card-title {
  position: absolute;
  top: -3rem;
  left: -3rem;
  z-index: 1;
  padding: 0.75rem;
  background: #deff00;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 3rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .business__card-title {
    top: -2.6rem;
    left: -1.7rem;
    padding: 0.8721rem;
    font-size: 2.093rem;
  }
}

/* 写真（Figma 4:28 / 4:29 = 420×300・黒フチ7.5px・object-fit:cover 中央） */
.business__card-image {
  width: 42rem;
  height: 30rem;
  border: 0.75rem solid #000;
}
@media (max-width: 767px) {
  .business__card-image {
    width: 30.5rem;
    height: 21.8rem;
    border-width: 0.6105rem;
  }
}

.business__card-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------
   MORE ボタン（事業案内ページへ）
   Figma 4:34: 黄色地・黒フチ7.5px・黒のズレ影7.5px・Anton 24px。矢印は無い
   ------------------------------------------------------------ */
.business__more {
  width: 93rem;
  margin-top: 2.8rem;
  margin-left: 3rem;
  text-align: right;
}
@media (max-width: 767px) {
  .business__more {
    width: 30.5rem;
    margin-top: 2.6rem;
    margin-left: 0.9rem;
  }
}

.business__more-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20.9rem;
  height: 8.3rem;
  border: 0.75rem solid #000;
  background: #deff00;
  box-shadow: 0.75rem 0.75rem 0 0 #000;
  color: #000;
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
@media (max-width: 767px) {
  .business__more-link {
    width: 19.1rem;
    height: 6.8rem;
    border-width: 0.6105rem;
    box-shadow: 0.6105rem 0.6105rem 0 0 #000;
    font-size: 2.093rem;
  }
}

/* ------------------------------------------------------------
   走る作業員イラスト（装飾）
   Figma 4:1715: x30 y2032 307×487 → パネル(x90 y1619)基準で 左-60・上413。
   パネル下端(y2268)より下へ 251px はみ出すので、親側で overflow を切らないこと。
   z-index はカード写真より前面（Figmaのレイヤー順もカード群より上）。
   ------------------------------------------------------------ */
.business__illust {
  position: absolute;
  top: 41.3rem;
  left: -6rem;
  z-index: 2;
  width: 30.7rem;
  height: 48.7rem;
  pointer-events: none;
}
@media (max-width: 767px) {
  .business__illust {
    top: 60.4rem;
    left: -3rem;
    width: 17.1rem;
    height: 27.1rem;
  }
}

/* ============================================================
   TOP - COMPANY セクション
   Figma: PC = TOP 1:4408（1440基準・y2358〜3135） / SP = TOP_sp 1:3（375基準・y2260.47〜3026）

   背景の赤は TOPフレーム全体に敷かれた node 1:8965（$c_red）。
   セクション自身に background は付けず、親（.index-main）に赤が敷かれる前提。

   ■ 実測の要点（すべて node 単位で取得した一次情報）
   ・左パネル 4:94 / 9:401 … 黒フチ 15.75px（SP 6.105px）＋ 30px角（SP 16.957px角）の
       水玉タイル。書き出したタイル原画（800×800 JPEG）を実測して
       「地 #FFD53B・水玉 #FFE37F・直径 タイルの22.5%・中心 31.25%/68.75%」と判明。
       → img/top/company-dots.svg にタイルとして書き出して repeat させている
       （business-stripe.svg と同じ方式。色をアセット側に持たせられるので直値が要らない）。
   ・右パネル 4:110 / 9:377 … 地は $c_cyan。上に載る横帯は #0E6CB2 の 50% 透過を
       8本、太さバラバラ（15〜60px）でわずかに右上がり（約1.5度）。規則的でないので
       img/top/company-stripes.svg に書き出して 1枚で配置（PC/SP 同一SVGを縮尺だけ変える）。
   ・吹き出し 4:1300 / 9:390 … 白い雲＋#111111 の弧が8本。装飾なので背景SVG、
       リードは実テキストで重ねる（画像に焼き込まない）。
   ・作業員 4:1881 / 9:569 … 元画像は「2人並んだ」pixtaイラスト（2000×2000・透過PNG）で、
       Figma側は image fill の crop で左の1人だけを見せている。
       ★ノード export（224×335 PNG）は透過が白で焼き込まれて返ってきたため使えない。
         raw image から crop（884×1317+100+319）→ 448×670 に縮小して webp 化した。
         左右反転・回転はなし（export と重ねて差分がエッジのみであることを確認済み）。
   ・会社情報は <table> ＋ <th scope="row">。行の区切りは黒の破線
       （PC 太さ3px・破線 5.25/5.25 ／ SP 太さ1.696px・破線 2.97/2.97 ＝ Figma 4:1882・9:570）。
       行間は「セルの透明ボーダー＋background-clip:padding-box」で作っている。
       こうすると th の黒地は padding-box までで止まり、透明ボーダー部分が余白になるので
       tr の背景（破線）がちょうど行間の境目に出る。row1 は td が2行なので
       行の高さが伸び、黒地も自動で 48px に育つ（Figma 4:1892 の h48 と一致）。
   ============================================================ */
.company {
  position: relative;
  padding: 0;
}

.company__inner {
  position: relative;
}

/* ------------------------------------------------------------
   セクションタイトル（共通コンポーネント .sec-title の位置＋グラデ色だけ上書き）
   ------------------------------------------------------------ */
.company__title {
  margin-left: 81rem;
  margin-top: -0.4396rem;
}
@media (max-width: 767px) {
  .company__title {
    margin-left: 1.744rem;
    margin-top: 0;
  }
}
.company__title .sec-title__text::after {
  background: linear-gradient(180deg, #0e6cb2 12.5%, #08d0d0 77.885%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ------------------------------------------------------------
   2枚のパネル（左=会社情報／右=吹き出し＋作業員）
   PC: 左 x120〜660・右 x752〜1292（間 92）
   SP: 縦積み（左 y2383 → 右 y2718）
   ------------------------------------------------------------ */
.company__body {
  display: flex;
  gap: 9.2rem;
  padding-left: 12rem;
  margin-top: 5.267rem;
}
@media (max-width: 767px) {
  .company__body {
    display: block;
    padding-left: 0;
    margin-top: 1.788rem;
  }
}

/* ------------------------------------------------------------
   左：会社情報パネル（Figma 4:94 / 9:401）
   高さは固定せず padding とマージンの積み上げで Figma の 540px（SP 305px）にする
     PC: 15.75 + 22.25 + 72(見出し) + 12.375 + 374.75(表・実測) + 23.125 + 15.75 = 540
     SP: 6.105 + 2.895 + 40.7(見出し) + 4.5 + 236.9(表・実測) + 7.8 + 6.105 = 305
   ------------------------------------------------------------ */
.company__panel {
  flex-shrink: 0;
  width: 54rem;
  padding: 2.225rem 0 2.3125rem;
  border: 1.575rem solid #000;
  background: url("../img/top/company-dots.svg") repeat top left;
  background-size: 3rem 3rem;
  background-origin: border-box;
}
@media (max-width: 767px) {
  .company__panel {
    width: 30.5rem;
    margin-inline: auto;
    padding: 0.2895rem 0 0.78rem;
    border-width: 0.6105rem;
    background-size: 1.69574rem 1.69574rem;
  }
}

.company__name {
  font-family: "Dela Gothic One", cursive;
  font-size: 4.5rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  color: #000;
}
@media (max-width: 767px) {
  .company__name {
    font-size: 2.5436rem;
  }
}

/* ------------------------------------------------------------
   会社情報の表（Figma 4:1887〜4:1898 / 9:410〜9:433）
   PC: 表幅 435（x173〜608）・項目セル 180・値の左余白 30
   SP: 表幅 246（x63〜309）・項目セル 102・値の左余白 16
   ------------------------------------------------------------ */
.company__table {
  width: 43.5rem;
  margin: 1.2375rem auto 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
@media (max-width: 767px) {
  .company__table {
    width: 24.6rem;
    margin-top: 0.45rem;
  }
}

.company__row {
  background-image: repeating-linear-gradient(to right, #000 0 0.525rem, transparent 0.525rem 1.05rem);
  background-repeat: repeat-x;
  background-size: 1.05rem 0.3rem;
  background-position: left bottom;
}
@media (max-width: 767px) {
  .company__row {
    background-image: repeating-linear-gradient(to right, #000 0 0.297rem, transparent 0.297rem 0.594rem);
    background-size: 0.594rem 0.169574rem;
  }
}
.company__row:last-child {
  background-image: none;
}

.company__term {
  width: 18rem;
  padding: 0.75rem;
  border-top: 1.13125rem solid transparent;
  border-bottom: 1.13125rem solid transparent;
  background-color: #000;
  background-clip: padding-box;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  color: #fff;
}
@media (max-width: 767px) {
  .company__term {
    width: 10.2rem;
    padding: 0.4239rem;
    border-top-width: 0.4rem;
    border-bottom-width: 0.4rem;
    font-size: 1.2209rem;
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .company__term--license {
    line-height: 1.2;
  }
}

.company__desc {
  padding: 0 0 0 3rem;
  border-top: 1.13125rem solid transparent;
  border-bottom: 1.13125rem solid transparent;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  vertical-align: middle;
  white-space: nowrap;
  color: #000;
}
@media (max-width: 767px) {
  .company__desc {
    padding-left: 1.2rem;
    border-top-width: 0.4rem;
    border-bottom-width: 0.4rem;
    font-size: 1.2209rem;
    white-space: normal;
  }
}

/* ------------------------------------------------------------
   SPで表を縦積み（TH/TDを上下に）したい場合の切り替え用。
   Figma の SP デザインは 375px 幅でも項目/値が横並びで収まっている（横スクロールなし）ため
   デザイン通り横並びで実装している。縦積み指定に変える場合はこのブロックを有効化する。
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   右：シアンの斜線パネル＋吹き出し＋作業員（Figma 4:1713 / 9:376）
   吹き出しは左上へ、作業員は右下へパネルの外にはみ出す（overflow は切らない）
   重なり順は DOM 順＝ パネル → 吹き出し → 作業員（Figmaで作業員が雲より前）
   ------------------------------------------------------------ */
.company__visual {
  position: relative;
  flex-shrink: 0;
  width: 54rem;
  height: 54rem;
}
@media (max-width: 767px) {
  .company__visual {
    width: 30.8rem;
    height: 30.8rem;
    margin-inline: auto;
    margin-top: 3rem;
  }
}

.company__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1.575rem solid #000;
  background-color: #08d0d0;
}
@media (max-width: 767px) {
  .company__stage {
    border-width: 0.6105rem;
  }
}
.company__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/top/company-stripes.svg") no-repeat -9.634rem 2.202rem;
  background-size: 66.4352rem 51.1223rem;
}
@media (max-width: 767px) {
  .company__stage::before {
    background-position: -5.301rem 1.5445rem;
    background-size: 37.8779rem 29.0436rem;
  }
}

.company__balloon {
  position: absolute;
  top: -2.336rem;
  left: -2.825rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47.6113rem;
  height: 37.6485rem;
  background: url("../img/top/company-bubble.svg") no-repeat center center;
  background-size: 100% 100%;
}
@media (max-width: 767px) {
  .company__balloon {
    top: -1.274rem;
    left: -1.656rem;
    width: 27.159rem;
    height: 21.477rem;
  }
}

.company__lead {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.24rem;
  text-align: center;
  color: #000;
}
@media (max-width: 767px) {
  .company__lead {
    font-size: 1.7442rem;
    letter-spacing: 0.17442rem;
    margin-top: -1.13rem;
  }
}

.company__lead-sub {
  font-size: 2.4rem;
  font-weight: 500;
}
@media (max-width: 767px) {
  .company__lead-sub {
    font-size: 1.3953rem;
  }
}

.company__worker {
  position: absolute;
  top: 19.2rem;
  left: 34.4rem;
  width: 22.4rem;
  height: auto;
}
@media (max-width: 767px) {
  .company__worker {
    top: 11rem;
    left: 19.6rem;
    width: 12.8rem;
  }
}

/* ============================================================
   トップ GALLERY セクション（無限ループスライダー）
   Figma PC : TOP 1:4408 内 y3255〜3890（1440基準）
   Figma SP : TOP_sp 1:3 内 y3079〜3456（375基準）

   ■ 実測の要点（すべて node 単位で取得した一次情報）
   ・背景写真 4:1857 / 9:368
       同じ素材（pixta_119866328_M・1184×664）だが Figma 側で彩度 -100 が
       かかっており、書き出し実測でも完全なグレースケール（saturation mean = 0）。
       クロップも PC（1437×635・拡大めのトリミング）と SP（375×377）で別物なので、
       ノードの書き出しをそのまま 2枚の webp にして <picture> で出し分けている
       （raw 素材＋object-fit:cover では PC のクロップが再現できなかった）。
       赤地に mix-blend-mode: multiply で重ねる。
   ・タイトル帯 4:1938 は幾何 x91.5 y3270 w540 h180。
       帯SVGは path の外側に stroke 分の余白（左 1.03% = 5.562px／上 2.44% = 4.392px）を
       持ち、.sec-title の外形は 551.09×188.73px。
       → 要素の左端 = 91.5 − 5.562 = 85.938 → margin-left: 8.5938rem
       → 要素の上端 = 3270 − 4.392 = 3265.608（＝このセクションの上端）
       SP（Group 281 9:859）は外形寸法そのままなので補正不要（x0.872 → 0.0872rem）。
   ・スライダー画像は PC 349×252・間隔15px（x0 / 364 / 728 / 1091 ＝ 画面幅ぴったり4枚）、
       SP 182×131・間隔7px（x-92 / 97 / 286 / 476 ＝ 左右にはみ出した「流れている途中」の状態）。
       → PC perPage:4 / gap 1.5rem、SP perPage:2 / gap 0.7rem。画像比は PC/SP とも 1.385 で共通。
       ※ SP の4枚目（9:548）だけ y3353 にあるが x476 で画面外＝Figma上の置き忘れと判断し、
          スライダーの行は y3272 で統一している。
   ・縦の積み上げ（PC）: 帯 188.726 + 余白 123.666 + 画像 252 + 下余白 60 = 624.392
       ＝ 3890 − 3265.608。背景写真は上に 10.608px はみ出す（top: -1.0608rem）。
     縦の積み上げ（SP）: 帯 104.651 + 余白 53.105 + 画像 131 + 下余白 53 = 341.756
       ＝ 3456 − 3114.244。背景写真は上に 35.244px はみ出す（top: -3.5244rem）。
   ・上の余白（前セクション COMPANY の下端 → この帯の上端）は BUSINESS と同じ規約で
     前セクション側が持つ。このセクションの padding-top は 0。
   ============================================================ */
.gallery {
  position: relative;
  padding: 13.0608rem 0 6rem;
}
@media (max-width: 767px) {
  .gallery {
    padding: 8.8244rem 0 5.3rem;
  }
}

/* ------------------------------------------------------------
   背景写真（Figma 4:1857 / 9:368）＝セクション全面・乗算
   ------------------------------------------------------------ */
.gallery__bg {
  position: absolute;
  top: 12rem;
  left: 0;
  right: 0;
  height: 63.5rem;
  z-index: 0;
  pointer-events: none;
  background-color: #e50113;
  isolation: isolate;
}
@media (max-width: 767px) {
  .gallery__bg {
    top: 5.3rem;
    height: 37.7rem;
  }
}

.gallery__bg-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery__bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
}

/* ------------------------------------------------------------
   コンテンツ（背景写真より上のレイヤー）
   ------------------------------------------------------------ */
.gallery__inner {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------------------------
   セクションタイトル（共通 .sec-title の位置とグラデ色だけ上書き）
   ------------------------------------------------------------ */
.gallery__title {
  margin-left: 8.5938rem;
  margin-bottom: 12.3666rem;
}
@media (max-width: 767px) {
  .gallery__title {
    margin-left: 0.0872rem;
    margin-bottom: 5.3105rem;
  }
}
.gallery__title .sec-title__text::after {
  background: linear-gradient(180deg, #8a9a22 0%, #deff00 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ------------------------------------------------------------
   無限ループスライダー（Splide。初期化は js/gallery-modal.js）
   Figma は画面幅いっぱい（x0〜1440）なので左右の余白なし
   ------------------------------------------------------------ */
.gallery__slider {
  width: 100%;
}

.gallery__slide {
  height: 25.2rem;
}
@media (max-width: 767px) {
  .gallery__slide {
    height: 13.1rem;
  }
}

.gallery__btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
}

.gallery__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ============================================================
   写真の拡大モーダル（ライトボックス）
   HTML は _build/gallery.php 末尾／挙動は js/gallery-modal.js
   矢印・× は文字グリフを使わず CSS 描画（gallery-cpt スキルの指定）
   ============================================================ */
.gallery-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.gallery-modal.is-open {
  display: flex;
}

body.is-modal-open {
  overflow: hidden;
}

.gallery-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.85);
}

.gallery-modal__inner {
  position: relative;
  z-index: 1;
  max-width: 88vw;
}

.gallery-modal__image {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
}

/* 閉じるボタン（2本線の ×） */
.gallery-modal__close {
  position: absolute;
  top: -5.6rem;
  right: 0;
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
@media (max-width: 767px) {
  .gallery-modal__close {
    top: -4.4rem;
    width: 3.6rem;
    height: 3.6rem;
  }
}
.gallery-modal__close::before, .gallery-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.4rem;
  height: 0.3rem;
  background-color: #fff;
}
@media (max-width: 767px) {
  .gallery-modal__close::before, .gallery-modal__close::after {
    width: 2.8rem;
    height: 0.25rem;
  }
}
.gallery-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.gallery-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* 前後送り（border を回した山形シェブロン） */
.gallery-modal__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 6.4rem;
  height: 6.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
@media (max-width: 767px) {
  .gallery-modal__nav {
    width: 4.8rem;
    height: 4.8rem;
  }
}
.gallery-modal__nav::before {
  content: "";
  display: block;
  width: 1.8rem;
  height: 1.8rem;
  border-top: 0.3rem solid #fff;
  border-right: 0.3rem solid #fff;
}
@media (max-width: 767px) {
  .gallery-modal__nav::before {
    width: 1.4rem;
    height: 1.4rem;
    border-top-width: 0.25rem;
    border-right-width: 0.25rem;
  }
}

.gallery-modal__nav--prev {
  left: 1.6rem;
}

.gallery-modal__nav--prev::before {
  transform: rotate(-135deg) translate(-0.2rem, -0.2rem);
}

.gallery-modal__nav--next {
  right: 1.6rem;
}

.gallery-modal__nav--next::before {
  transform: rotate(45deg) translate(-0.2rem, -0.2rem);
}

/* ============================================================
   事業案内（page-business.php / slug: business）
   Figma: 事業案内フレーム node 66:2208（1440×4657）

   ■ 縦の実測（すべて Figma の y 座標。ページフレーム基準）
     0〜90       ヘッダー（node 66:2312）→ header.php
     120〜480    FV写真（node 66:2247 / 1280×360・x80）
       303〜420  黒帯タイトル（node 66:2280 / 400.5×117・x0＝画面左端まで抜ける）
     531〜960    リードテキスト（node 66:2260 / 765×429・x595＝右端1360で揃う）
     591〜1040   街イラスト（node 66:3282 / 1200×449・x0）※テキストの背面・乗算
     1120〜2421  事業カード（node 70:3318 / 1281×1301・x80／3列 gap40）
     2541〜4657  SNS・CONTACT・フッター（node 66:2311）→ footer.php
   → 赤地（node 66:2214 = #e50113 = $c_red）は .page-business の背景で再現し、
     上下の余白は「120（ヘッダー下30＋ヘッダー90）」「120（カード下端→共通パーツ）」で出す。

   ■ SPデザインはFigmaに存在しない（docs/sp-implementation.md の標準スケールで実装）
   ■ クラス名は business- プレフィックス。トップページ側が .business / .business__* を
     使うため、素クラス .business・.business__ は使わないこと。
   ============================================================ */
.page-business {
  background: #e50113;
  padding: 12rem 0;
}
@media (max-width: 767px) {
  .page-business {
    padding: 8.1rem 0 7.2rem;
  }
}

/* ------------------------------------------------------------
   FV（写真＋黒帯のページ名見出し）
   ------------------------------------------------------------ */
.business-fv {
  position: relative;
}

.business-fv__image {
  height: 36rem;
}
@media (max-width: 767px) {
  .business-fv__image {
    height: 18rem;
  }
}
.business-fv__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-fv__title {
  position: absolute;
  top: 18.3rem;
  left: 0;
  display: inline-block;
  padding: 2.25rem calc(3.75rem - 0.1em) 2.25rem 10.5rem;
  background: #000;
  color: #deff00;
  font-family: "Dela Gothic One", cursive;
  font-weight: 400;
  font-size: 6rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .business-fv__title {
    top: 9.1rem;
    padding: 1.2rem calc(1.8rem - 0.1em) 1.2rem 4rem;
    font-size: 3rem;
  }
}

/* ------------------------------------------------------------
   リード（黒帯のキャッチ＋黄色帯5行／背面に街のイラスト）
   ------------------------------------------------------------ */
.business-lead {
  position: relative;
  isolation: isolate;
  background: #e50113;
  padding: 5.1rem 0 16rem;
}
@media (max-width: 767px) {
  .business-lead {
    padding: 3rem 0 9.6rem;
  }
}

.business-lead__city {
  position: absolute;
  top: 11.1rem;
  left: 0;
  z-index: 0;
  width: 120rem;
  height: 44.9rem;
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (max-width: 767px) {
  .business-lead__city {
    top: auto;
    bottom: 4.8rem;
    width: 100%;
    height: 14rem;
  }
}
.business-lead__city img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-lead__body {
  position: relative;
  z-index: 1;
  width: 76.5rem;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3rem;
}
@media (max-width: 767px) {
  .business-lead__body {
    width: 100%;
    gap: 1.8rem;
  }
}

.business-lead__catch {
  display: inline-block;
  padding: 2.25rem calc(1.5rem - 0.1em) 2.25rem 1.5rem;
  background: #000;
  color: #deff00;
  font-family: "Dela Gothic One", cursive;
  font-weight: 400;
  font-size: 4.8rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .business-lead__catch {
    padding: 1.4rem 1.2rem;
    font-size: 2.4rem;
    line-height: 1.4;
    white-space: normal;
  }
}

.business-lead__text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.9rem;
}
@media (max-width: 767px) {
  .business-lead__text {
    gap: 1.1rem;
  }
}

.business-lead__line {
  padding: 1rem 2rem;
  background: #deff00;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .business-lead__line {
    padding: 0.8rem 1.2rem;
    font-size: 1.5rem;
    line-height: 1.5;
  }
}

/* ------------------------------------------------------------
   事業一覧（写真＋黒ボックス／3列カード）
   ------------------------------------------------------------ */
.business-service {
  position: relative;
}

.business-service__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
}
@media (max-width: 767px) {
  .business-service__list {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }
}

.business-service__item {
  display: flex;
  flex-direction: column;
}

.business-service__image {
  flex-shrink: 0;
  height: 26rem;
}
@media (max-width: 767px) {
  .business-service__image {
    height: 21.8rem;
  }
}
.business-service__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.business-service__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1rem 2rem;
  background: #000;
}
@media (max-width: 767px) {
  .business-service__body {
    gap: 0.8rem;
    padding: 1.2rem 1.6rem 2rem;
  }
}

.business-service__title {
  color: #deff00;
  font-family: "Dela Gothic One", cursive;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .business-service__title {
    font-size: 1.8rem;
    line-height: 1.4;
    white-space: normal;
  }
}

.business-service__desc {
  width: 36rem;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
@media (max-width: 767px) {
  .business-service__desc {
    width: 100%;
    font-size: 1.4rem;
  }
}

/* ============================================================
   会社概要ページ（slug: company）
   Figma: 会社概要フレーム 66:2463（1440×4317）
     ・ヘッダー 66:2474（1440×90・固定） … header.php
     ・赤地 66:2469（$c_red・y0〜3890）  … .page-company の背景で再現
     ・y2201 以降（Component 3 = SNS・CONTACT・フッター） … footer.php

   ■ 縦の積み上げ（Figma の y 実測値。すべて padding の合計で出し height は固定しない）
     FV       : 上 120（固定ヘッダー90 + 赤の余白30）＋ 写真360        → 下端 y480
     代表挨拶  : 上 60 → タイトル帯 y540（103）＋ 30 ＋ 本文 553        → 下端 y1226
     会社情報  : 上 180 → タイトル帯 y1406（103）＋ 30 ＋ 表 462        → 下端 y2001
                下 200 → 共通パーツ（Component 3）上端 y2201
   ■ 重なり順（Figma のレイヤー順に一致）
     赤地 → 青い斜線パネル → 職人の写真（乗算） → FV写真 → FVタイトル → 各セクションの中身
     ＝ 装飾（写真・斜線パネル）は絶対配置で背面、中身は position:relative + z-index:1 で前面。
   ■ SPデザインは Figma に存在しないため docs/sp-implementation.md の標準スケールで組む
     （本文 20px→15px・見出し・余白は PC の約60%）。
   ============================================================ */
.page-company {
  background: #e50113;
}

/* ------------------------------------------------------------
   FV（バナー写真＋画面左端まで抜ける黒帯のページタイトル）
   Figma: 写真 66:2470（x80 y120 1280×360）／ 黒帯 66:2471（x0 y303 400.5×117）
   ------------------------------------------------------------ */
.company-fv {
  position: relative;
  padding-top: 12rem;
}
@media (max-width: 767px) {
  .company-fv {
    padding-top: 7.8rem;
  }
}

.company-fv__photo {
  height: 36rem;
}
@media (max-width: 767px) {
  .company-fv__photo {
    height: 18rem;
  }
}

.company-fv__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-fv__title {
  position: absolute;
  top: 30.3rem;
  left: 0;
  padding: 2.25rem 3.15rem 2.25rem 10.5rem;
  background: #000;
  color: #deff00;
  font-family: "Dela Gothic One", cursive;
  font-weight: 400;
  font-size: 6rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .company-fv__title {
    top: 15.8rem;
    padding: 1.35rem 0.7rem 1.35rem 3rem;
    font-size: 3.6rem;
  }
}

/* ------------------------------------------------------------
   セクションタイトル（黒帯＋黄色の Dela Gothic One）
   Figma: 代表挨拶 70:3205 ／ 会社情報 70:3254（ともに 237×103・同一仕様）
   ※共通コンポーネント .sec-title（白い平行四辺形の帯＋Anton）とは別物なので
     このページ内で共用する専用クラスにしている。
   ------------------------------------------------------------ */
.company-sec-title {
  display: block;
  width: fit-content;
  margin-bottom: 3rem;
  padding: 2.25rem 1.02rem 2.25rem 1.5rem;
  background: #000;
  color: #deff00;
  font-family: "Dela Gothic One", cursive;
  font-weight: 400;
  font-size: 4.8rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .company-sec-title {
    margin-bottom: 1.8rem;
    padding: 1.35rem 0.61rem 1.35rem 0.9rem;
    font-size: 2.9rem;
  }
}

/* ------------------------------------------------------------
   代表挨拶（Figma 70:3207 = x80 y540 877×686）
   ------------------------------------------------------------ */
.company-greeting {
  position: relative;
  padding-top: 6rem;
}
@media (max-width: 767px) {
  .company-greeting {
    padding-top: 4rem;
  }
}

.company-greeting__photo {
  position: absolute;
  top: 0;
  left: 71.6rem;
  width: 72.4rem;
  height: 78.6rem;
  background-color: #e50113;
  isolation: isolate;
  pointer-events: none;
}
@media (max-width: 767px) {
  .company-greeting__photo {
    left: auto;
    right: -3rem;
    width: 24rem;
    height: 26.1rem;
  }
}

.company-greeting__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

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

.company-greeting__text {
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
}

.company-greeting__row {
  display: block;
  width: fit-content;
  padding: 1rem 2rem;
  background-color: #deff00;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .company-greeting__row {
    width: auto;
    padding: 0.8rem 1.2rem;
    font-size: 1.5rem;
    line-height: 1.7;
    white-space: normal;
  }
}

.company-greeting__row + .company-greeting__row {
  margin-top: 1.9rem;
}
@media (max-width: 767px) {
  .company-greeting__row + .company-greeting__row {
    margin-top: 1rem;
  }
}

.company-greeting__row-strong {
  font-size: 2.4rem;
  line-height: 1.2;
}
@media (max-width: 767px) {
  .company-greeting__row-strong {
    font-size: 1.7rem;
    line-height: inherit;
  }
}

/* ------------------------------------------------------------
   会社情報（Figma 70:3256 = x80 y1406 1280×595）
   ------------------------------------------------------------ */
.company-info {
  position: relative;
  padding: 18rem 0 20rem;
}
@media (max-width: 767px) {
  .company-info {
    padding: 8rem 0 8rem;
  }
}
.company-info::before {
  content: "";
  position: absolute;
  top: 12rem;
  bottom: 12rem;
  left: 0;
  width: 112rem;
  background: url("../img/company/company-stripe.svg") repeat top left;
  background-size: 12.99rem 12.99rem;
}
@media (max-width: 767px) {
  .company-info::before {
    top: 4rem;
    bottom: 4rem;
    width: 30rem;
  }
}

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

/* 会社情報の表（Figma 70:3209 = 1280×462／7行 × 66px・項目セル 320・値セル 960）
   「項目×値」は <table>＋<th scope="row">（docs/seo-meta.md）。SPは横スクロールさせず縦積み。 */
.company-info__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}
@media (max-width: 767px) {
  .company-info__table {
    display: block;
    table-layout: auto;
  }
}

@media (max-width: 767px) {
  .company-info__tbody {
    display: block;
  }
}

@media (max-width: 767px) {
  .company-info__row {
    display: block;
  }
}

@media (max-width: 767px) {
  .company-info__row + .company-info__row {
    margin-top: 1rem;
  }
}

.company-info__term {
  width: 32rem;
  padding: 2rem 1rem 1.84rem;
  border-bottom: 0.2rem solid #fff;
  background-color: #000;
  color: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;
}
@media (max-width: 767px) {
  .company-info__term {
    display: block;
    width: auto;
    padding: 0.8rem 1.2rem;
    border-bottom: none;
    font-size: 1.4rem;
  }
}

.company-info__desc {
  padding: 2rem 4rem 1.84rem;
  border-bottom: 0.2rem solid #000;
  background-color: #fff;
  color: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  vertical-align: middle;
}
@media (max-width: 767px) {
  .company-info__desc {
    display: block;
    padding: 1rem 1.2rem;
    font-size: 1.4rem;
  }
}

.company-info__tel {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   求人ページ（固定ページ slug: recruit）
   Figma: 求人フレーム node 66:2625（1440×3890）

   ページ全面が赤（node 66:2631）。ヘッダー（fixed 9rem）の下に
   y120 から FV写真（1280×360）が入るので、.page-recruit に 12rem の
   padding-top を持たせてヘッダー分を逃がしている。

   SPデザインはFigmaに存在しないため、SPは docs/sp-implementation.md の
   標準スケール（本文16→14px・見出し系は約60%・横並びはcolumn化）で実装。
   ============================================================ */
.page-recruit {
  background: #e50113;
  padding-top: 12rem;
}
@media (max-width: 767px) {
  .page-recruit {
    padding-top: 8.1rem;
  }
}

/* ------------------------------------------------------------
   FV（写真＋左端に食い込む黒帯のページ名）
   Figma: 写真 node 66:2632（x80 y120 / 1280×360）
          黒帯 node 66:2633（x0 y303 / 268.5×117 ＝写真下端から60px上）
   ------------------------------------------------------------ */
.recruit-fv {
  position: relative;
}

.recruit-fv__photo {
  max-width: 128rem;
  height: 36rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .recruit-fv__photo {
    max-width: none;
    height: 21rem;
    margin: 0 2rem;
  }
}

.recruit-fv__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recruit-fv__title {
  position: absolute;
  left: 0;
  bottom: 6rem;
  padding: 2.25rem 3.75rem 2.25rem 10.5rem;
  background: #000;
  font-family: "Dela Gothic One", cursive;
  font-size: 6rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #deff00;
}
@media (max-width: 767px) {
  .recruit-fv__title {
    bottom: 3rem;
    padding: 1.5rem 2rem 1.5rem 4rem;
    font-size: 3.6rem;
  }
}

/* ------------------------------------------------------------
   募集要項セクション
   Figma: リード y540〜716 / テーブル y756〜1494 / ボタン y1554〜1628
          共通パーツ（SNS）開始が y1748 なので下余白は120px
   ------------------------------------------------------------ */
.recruit-detail {
  padding: 6rem 0 12rem;
}
@media (max-width: 767px) {
  .recruit-detail {
    padding: 4rem 0 7rem;
  }
}

.recruit-detail__inner {
  max-width: 116rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* リード（黄色帯2本）Figma node 66:3010 */
.recruit-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
@media (max-width: 767px) {
  .recruit-lead {
    gap: 1.2rem;
  }
}

.recruit-lead__main {
  padding: 1.5rem 6.75rem 1.5rem 3rem;
  background: #deff00;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 3.6rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
}
@media (max-width: 767px) {
  .recruit-lead__main {
    padding: 1.2rem 2rem 1.2rem 1.5rem;
    font-size: 2rem;
  }
}

.recruit-lead__sub {
  padding: 1.5rem 6.75rem 1.5rem 3rem;
  background: #deff00;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
}
@media (max-width: 767px) {
  .recruit-lead__sub {
    padding: 1.2rem 2rem 1.2rem 1.5rem;
    font-size: 1.7rem;
  }
}

/* 募集要項テーブル Figma node 66:2949
   罫線は「黒セル（th）の下＝白 2px」「白セル（td）の下＝黒 2px」の2色使い。
   SPは横スクロールさせず th/td を縦積みに組み替える（CLAUDE.md 必須仕様）。 */
.recruit-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .recruit-table {
    display: block;
    margin-top: 3rem;
  }
}

/* 列幅（Figma: 項目240 ＋ 内容880 ＝ 1120）。
   th 側の width では効かない（.u-sr-only の caption が position:absolute のため
   table-layout:fixed の1行目基準の列幅計算が無効化され、等分になる）ので col で指定する。 */
.recruit-table__col-term {
  width: 24rem;
}

@media (max-width: 767px) {
  .recruit-table__body {
    display: block;
  }
}

@media (max-width: 767px) {
  .recruit-table__row {
    display: block;
  }
}

.recruit-table__term {
  padding: 2rem 1rem;
  background: #000;
  border-bottom: 0.2rem solid #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  color: #fff;
  text-align: center;
  vertical-align: middle;
}
@media (max-width: 767px) {
  .recruit-table__term {
    display: block;
    padding: 1rem 1.5rem;
    border-bottom: 0;
    font-size: 1.4rem;
    text-align: left;
  }
}

.recruit-table__desc {
  padding: 2rem 4rem;
  background: #fff;
  border-bottom: 0.2rem solid #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.6;
  color: #000;
  vertical-align: top;
}
@media (max-width: 767px) {
  .recruit-table__desc {
    display: block;
    padding: 1.2rem 1.5rem;
    font-size: 1.4rem;
  }
}

/* お問い合わせボタン Figma node 66:2999（共通CTAの .cta__btn--mail と同寸法・同配色） */
.recruit-detail__btn-area {
  display: flex;
  justify-content: center;
  margin-top: 6rem;
}
@media (max-width: 767px) {
  .recruit-detail__btn-area {
    margin-top: 4rem;
  }
}

.recruit-detail__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 32rem;
  min-height: 7.4rem;
  padding: 1rem 2rem;
  background: #deff00;
  border: 0.6rem solid #000;
  box-shadow: 0.6rem 0.6rem 0 0 #000;
  text-decoration: none;
}
@media (max-width: 767px) {
  .recruit-detail__btn {
    width: 100%;
    max-width: 28rem;
    min-height: 6rem;
    gap: 0.6rem;
    border-width: 0.4rem;
    box-shadow: 0.4rem 0.4rem 0 0 #000;
  }
}

.recruit-detail__btn-icon {
  flex-shrink: 0;
  width: 2.5645rem;
  height: 1.875rem;
}
@media (max-width: 767px) {
  .recruit-detail__btn-icon {
    width: 2.0516rem;
    height: 1.5rem;
  }
}
.recruit-detail__btn-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.recruit-detail__btn-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
  text-align: center;
}
@media (max-width: 767px) {
  .recruit-detail__btn-text {
    font-size: 1.5rem;
  }
}

/* ============================================================
   お問い合わせ（page-contact.php / slug: contact）
   Figma: フレーム「お問い合わせ」node 66:2787（1440×4812）
   実測（1px = 0.1rem）:
     FV写真     x80  y120  1280×360   （node 66:2794）
     ページ名帯 x0   y303  532.5×117  （node 66:2795 / テキスト x105・Dela 60px）
     リード帯   x80  y560  1202.5×75 ＋ y655 699.5×68（node 66:3013 / 66:3015）
     フォーム   x80  y763  1280×1813 （node 66:3017・白地＋黒20px枠）
       見出し   FORM Anton 64px（node 66:3085）＋ お問い合わせフォーム 24px（66:3021）
       行       1080幅／ラベル300＋間隔130＋入力650（node 66:3039 ほか）
       送信     240×74（node 66:3087）
   ※SPデザインはFigmaに無いので docs/sp-implementation.md の標準スケールで組む。
   ============================================================ */
/* ★変数追加要望（_variable.scss は触らないルールのため、暫定でこのファイル内のローカル変数）
     - $c_gray_border : 入力欄の枠線・行の区切り線・ラジオの円の色（Figma実値 #b6b6b6）
     - $c_blue_deep   : FORM見出しのグラデ上端（Figma実値 #0e6cb2。下端は既存の $c_cyan）
   親側で _variable.scss に追加したら、この2行を削除して共通変数に置換する。 */
.page-contact {
  background: #e50113;
}

/* ============================================================
   FV（写真＋画面左端まで伸びる黒帯のページ名）
   トップMV（_index-mv.scss）と同じ組み方：
   内側 128rem のコンテナに写真、帯だけ left:-8rem で画面左端まで出す。
   ============================================================ */
.contact-fv {
  padding: 12rem 0 0;
  overflow: hidden;
}
@media (max-width: 767px) {
  .contact-fv {
    padding: 7.8rem 0 0;
  }
}

.contact-fv__inner {
  position: relative;
  width: 128rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .contact-fv__inner {
    width: auto;
    margin: 0 2rem;
  }
}

.contact-fv__image {
  width: 100%;
  height: 36rem;
}
@media (max-width: 767px) {
  .contact-fv__image {
    height: 18rem;
  }
}
.contact-fv__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contact-fv__title {
  position: absolute;
  z-index: 2;
  top: 18.3rem;
  left: -8rem;
  padding: 2.25rem 3.75rem 2.25rem 10.5rem;
  background: #000;
  font-family: "Dela Gothic One", cursive;
  font-size: 6rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #deff00;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .contact-fv__title {
    top: 10rem;
    left: -2rem;
    padding: 1.2rem 2rem 1.2rem 4rem;
    font-size: 3.2rem;
  }
}

/* ============================================================
   リード（黄色帯2本）
   1行目 28px / 2行目 24px でサイズが違うので p を2つに分ける
   ============================================================ */
.contact-lead {
  margin-top: 8rem;
}
@media (max-width: 767px) {
  .contact-lead {
    margin-top: 4rem;
  }
}

.contact-lead__inner {
  width: 128rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}
@media (max-width: 767px) {
  .contact-lead__inner {
    width: auto;
    margin: 0 2rem;
    align-items: stretch;
    gap: 1.2rem;
  }
}

.contact-lead__text {
  padding: 1.5rem 6.75rem 1.5rem 3rem;
  background: #deff00;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .contact-lead__text {
    padding: 1rem 1.5rem;
    font-size: 1.7rem;
    white-space: normal;
  }
}

.contact-lead__text-sub {
  padding: 1.5rem 6.75rem 1.5rem 3rem;
  background: #deff00;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .contact-lead__text-sub {
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    white-space: normal;
  }
}

/* ============================================================
   フォームパネル（白地＋黒20px枠）
   Figma: パネル 1280×1813／枠内側の左右余白80・上20・下40（実測）
   ============================================================ */
.contact-form-sec {
  padding: 4rem 0 12rem;
}
@media (max-width: 767px) {
  .contact-form-sec {
    padding: 2.5rem 0 7rem;
  }
}

.contact-panel {
  width: 128rem;
  margin: 0 auto;
  padding: 2rem 8rem 4rem;
  border: 2rem solid #000;
  background: #fff;
}
@media (max-width: 767px) {
  .contact-panel {
    width: auto;
    margin: 0 2rem;
    padding: 1.5rem 1.5rem 2.5rem;
    border-width: 0.8rem;
  }
}

.contact-panel__en .sec-title__text {
  font-size: 6.4rem;
  -webkit-text-stroke: 1.4rem #000;
}
@media (max-width: 767px) {
  .contact-panel__en .sec-title__text {
    font-size: 3.84rem;
    -webkit-text-stroke: 0.84rem #000;
  }
}
.contact-panel__en .sec-title__text::after {
  background: linear-gradient(180deg, #0e6cb2 12.5%, #08d0d0 77.885%);
  -webkit-background-clip: text;
  background-clip: text;
}

.contact-panel__title {
  margin-top: 1rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  color: #000;
  text-align: center;
}
@media (max-width: 767px) {
  .contact-panel__title {
    font-size: 1.6rem;
  }
}

/* ── CF7 本体（.contact-form 以下は create-contact-form スキルの標準クラス） ── */
.contact-form {
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .contact-form {
    margin-top: 2.5rem;
  }
}

.contact-form--static {
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .contact-form--static {
    margin-top: 2.5rem;
  }
}

.contact-form__box {
  width: 100%;
}

.contact-form__row {
  display: flex;
  align-items: center;
  gap: 13rem;
  padding-bottom: 2.5rem;
  border-bottom: 0.1rem solid #b6b6b6;
}
@media (max-width: 767px) {
  .contact-form__row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1.5rem;
  }
}

.contact-form__row + .contact-form__row {
  padding-top: 2.4rem;
}
@media (max-width: 767px) {
  .contact-form__row + .contact-form__row {
    padding-top: 1.5rem;
  }
}

.contact-form__row--textarea {
  align-items: flex-start;
}

.contact-form__label {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 30rem;
  min-height: 6rem;
  padding: 0 3rem;
}
@media (max-width: 767px) {
  .contact-form__label {
    width: 100%;
    min-height: 0;
    padding: 0;
    gap: 1.2rem;
  }
}

.contact-form__req {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #e50113;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .contact-form__req {
    padding: 0.6rem 0.8rem;
    font-size: 1.3rem;
  }
}

.contact-form__opt {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .contact-form__opt {
    padding: 0.6rem 0.8rem;
    font-size: 1.3rem;
  }
}

.contact-form__label-text {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.6;
  color: #000;
}
@media (max-width: 767px) {
  .contact-form__label-text {
    font-size: 1.5rem;
  }
}

.contact-form__field {
  flex-shrink: 0;
  width: 65rem;
}
@media (max-width: 767px) {
  .contact-form__field {
    width: 100%;
  }
}
.contact-form__field input[type=text],
.contact-form__field input[type=tel],
.contact-form__field input[type=email] {
  width: 100%;
  height: 5rem;
  padding: 0 1.5rem;
  border: 0.2rem solid #b6b6b6;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #000;
}
@media (max-width: 767px) {
  .contact-form__field input[type=text],
  .contact-form__field input[type=tel],
  .contact-form__field input[type=email] {
    height: 4.4rem;
    padding: 0 1rem;
    font-size: 1.4rem;
  }
}
.contact-form__field textarea {
  display: block;
  width: 100%;
  height: 30.9rem;
  padding: 1.5rem;
  border: 0.2rem solid #b6b6b6;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
  color: #000;
  resize: vertical;
}
@media (max-width: 767px) {
  .contact-form__field textarea {
    height: 18rem;
    padding: 1rem;
    font-size: 1.4rem;
  }
}
.contact-form__field .wpcf7-form-control-wrap {
  display: block;
}
.contact-form__field .wpcf7-not-valid-tip {
  margin-top: 0.6rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  color: #e50113;
}

/* ── 性別・普通運転免許（単一選択）──────────────────
   reset が input 全体に appearance:none を当てているのでネイティブの丸は出ない。
   Figma（node 66:3100）の 25×25・白丸・#b6b6b6 の3px枠を自前で描く。
   ★[radio] は CF7 6.1.7 が * 無しでも必須にするため（modules/checkbox.php）、
     「任意」項目は [checkbox ... exclusive] で出している。セレクタは checkbox 側。 */
.contact-form__radios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}
.contact-form__radios .wpcf7-checkbox {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}
.contact-form__radios .wpcf7-list-item {
  margin: 0;
}
.contact-form__radios .wpcf7-list-item label {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}
.contact-form__radios .wpcf7-list-item-label {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.2;
  color: #000;
}
@media (max-width: 767px) {
  .contact-form__radios .wpcf7-list-item-label {
    font-size: 1.5rem;
  }
}
.contact-form__radios input[type=checkbox],
.contact-form__radios input[type=radio] {
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 2.5rem;
  height: 2.5rem;
  border: 0.3rem solid #b6b6b6;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}
@media (max-width: 767px) {
  .contact-form__radios input[type=checkbox],
  .contact-form__radios input[type=radio] {
    width: 2.2rem;
    height: 2.2rem;
    border-width: 0.25rem;
  }
}
.contact-form__radios input[type=checkbox]:checked,
.contact-form__radios input[type=radio]:checked {
  border-color: #e50113;
  background: radial-gradient(#e50113 0 42%, #fff 46% 100%);
}

/* ── 「採用申し込みの方は…」の注記（node 66:3146） ── */
.contact-form__note {
  margin: 4rem 0;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.2;
  color: #000;
  text-align: center;
}
@media (max-width: 767px) {
  .contact-form__note {
    margin: 2.5rem 0;
    font-size: 1.5rem;
    line-height: 1.6;
  }
}

/* ── 送信ボタン（node 66:3087 / 240×74・黄色＋黒6px枠＋6px影） ── */
.contact-form__submit-area {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 5rem;
}
@media (max-width: 767px) {
  .contact-form__submit-area {
    margin-top: 3rem;
  }
}
.contact-form__submit-area button,
.contact-form__submit-area input[type=submit] {
  width: 24rem;
  height: 7.4rem;
  border: 0.6rem solid #000;
  box-shadow: 0.6rem 0.6rem 0 0 #000;
  background-color: #deff00;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
}
@media (max-width: 767px) {
  .contact-form__submit-area button,
  .contact-form__submit-area input[type=submit] {
    width: 22rem;
    height: 6rem;
    border-width: 0.4rem;
    box-shadow: 0.4rem 0.4rem 0 0 #000;
    font-size: 1.6rem;
  }
}
.contact-form__submit-area button:hover,
.contact-form__submit-area input[type=submit]:hover {
  opacity: 0.7;
}
.contact-form__submit-area .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 2rem;
  margin: 0;
  transform: translateY(-50%);
}

/* ── CF7 の共通出力（送信結果メッセージ） ── */
.contact-form .wpcf7-response-output {
  margin: 2rem 0 0;
  padding: 1.2rem 1.6rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.6;
  color: #000;
}
@media (max-width: 767px) {
  .contact-form .wpcf7-response-output {
    font-size: 1.3rem;
  }
}

/* ============================================================
   お知らせ一覧（白背景）
   ============================================================ */
.page-news {
  background: #fff;
}

.news-archive {
  max-width: 132rem;
  margin: 0 auto;
  padding: 6rem 2rem 8rem;
}
@media (max-width: 767px) {
  .news-archive {
    padding: 4rem 2rem 5rem;
  }
}

/* 絞り込み */
.news-archive__filter {
  display: flex;
  justify-content: center;
  gap: 8rem;
}
@media (max-width: 767px) {
  .news-archive__filter {
    flex-direction: column;
    gap: 2rem;
  }
}

.news-archive__filter-group {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.news-archive__filter-label {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 2.8rem;
  color: #000;
}
@media (max-width: 767px) {
  .news-archive__filter-label {
    font-size: 2rem;
    width: 10rem;
  }
}

.news-archive__select {
  position: relative;
  width: 24rem;
}
@media (max-width: 767px) {
  .news-archive__select {
    flex: 1;
    width: auto;
  }
}

.news-archive__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.2rem;
  width: 0;
  height: 0;
  border-left: 0.45rem solid transparent;
  border-right: 0.45rem solid transparent;
  border-top: 0.7rem solid #fff;
  transform: translateY(-50%);
  pointer-events: none;
}

.news-archive__select select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: #363432;
  color: #fff;
  border: none;
  border-bottom: 1px solid #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 2rem;
  padding: 1rem 3rem 1.2rem 1rem;
  cursor: pointer;
}
@media (max-width: 767px) {
  .news-archive__select select {
    font-size: 1.6rem;
  }
}

/* グリッド */
.news-archive__grid {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4rem 2.6rem;
}
@media (max-width: 767px) {
  .news-archive__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.5rem;
    margin-top: 3rem;
  }
}

.news-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-decoration: none;
}
@media (max-width: 767px) {
  .news-card {
    gap: 1.2rem;
  }
}

.news-card__thumb {
  width: 100%;
  aspect-ratio: 5/4;
  overflow: hidden;
  background: #000;
}
.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.news-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.news-card__cat {
  background: #000;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  padding: 0.5rem 2rem;
}

.news-card__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.5;
  color: #000;
}

.news-card__date {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: #000;
}

.news-archive__empty {
  grid-column: 1/-1;
  text-align: center;
  font-size: 1.6rem;
  color: #333;
  padding: 4rem 0;
}

/* ページネーション */
.news-archive__pager {
  margin-top: 5rem;
}

.news-archive__pager .page-numbers {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
}

.news-archive__pager .page-numbers li a,
.news-archive__pager .page-numbers li span {
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  font-size: 2rem;
  color: #000;
  text-decoration: none;
}

.news-archive__pager .page-numbers li .current {
  color: #AE8D47;
}

/* ============================================================
   投稿詳細（single）
   ============================================================ */
.page-single {
  background: #fff;
}

.single-post {
  max-width: 84rem;
  margin: 0 auto;
  padding: 6rem 2rem 8rem;
}
@media (max-width: 767px) {
  .single-post {
    padding: 4rem 2rem 5rem;
  }
}

.single-post__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
}

.single-post__cat + .single-post__cat {
  margin-left: -1rem;
}

.single-post__date {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #000;
}

.single-post__cat {
  background: #000;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 1.3rem;
  padding: 0.5rem 2rem;
}

.single-post__title {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.5;
  color: #000;
  margin-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid #ddd;
}
@media (max-width: 767px) {
  .single-post__title {
    font-size: 2.4rem;
  }
}

.single-post__thumb {
  margin-top: 3rem;
}
.single-post__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.single-post__body {
  margin-top: 3rem;
  font-size: 1.6rem;
  line-height: 2;
  color: #333;
}
.single-post__body p {
  margin-bottom: 2rem;
}
.single-post__body img {
  max-width: 100%;
  height: auto;
}
.single-post__body a {
  color: #3E6EB4;
  text-decoration: underline;
}

.single-post__back {
  margin-top: 5rem;
  text-align: center;
}

.single-post__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30rem;
  background: #000;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 1.6rem;
  padding: 1.6rem 3rem;
  text-decoration: none;
}
@media (max-width: 767px) {
  .single-post__back-btn {
    min-width: 24rem;
  }
}

/* ============================================================
   制作事例（CPT works）動画グリッド＋モーダル
   一覧ループの書き方は docs/works.md を参照。
   モーダルHTML: template-parts/works-modal.php ／ 挙動: js/works-modal.js
   ============================================================ */
.works-grid {
  max-width: 128rem;
  margin: 4rem auto 0;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 767px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

.works-item {
  aspect-ratio: 400/280;
  background: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* サムネ付き（クリックでモーダル再生） */
.works-item--video {
  position: relative;
  padding: 0;
  border: none;
  overflow: hidden;
  cursor: pointer;
}

.works-item__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.works-item__playmark {
  position: relative;
  z-index: 1;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #fff;
}
@media (max-width: 767px) {
  .works-item__playmark {
    width: 4.4rem;
    height: 4.4rem;
  }
}

.works-item__playmark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1.6rem solid #fff;
}
@media (max-width: 767px) {
  .works-item__playmark::before {
    border-top-width: 0.7rem;
    border-bottom-width: 0.7rem;
    border-left-width: 1.1rem;
  }
}

.works-item__ph {
  font-family: "Noto Serif JP", serif;
  font-size: 1.8rem;
  color: #000;
}
@media (max-width: 767px) {
  .works-item__ph {
    font-size: 1.2rem;
  }
}

/* ===== 動画モーダル ===== */
.works-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.works-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.works-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.works-modal__body {
  position: relative;
  width: min(96rem, 90vw);
}

.works-modal__close {
  position: absolute;
  top: -4.8rem;
  right: 0;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.works-modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 2px;
  background: #fff;
}

.works-modal__close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.works-modal__close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.works-modal__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.works-modal__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.works-modal__playbtn {
  position: relative;
  z-index: 1;
  width: 9rem;
  height: 9rem;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
@media (max-width: 767px) {
  .works-modal__playbtn {
    width: 6rem;
    height: 6rem;
  }
}

.works-modal__playbtn:hover {
  background: rgba(174, 141, 71, 0.85);
  border-color: #AE8D47;
}

.works-modal__playbtn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 1.5rem solid transparent;
  border-bottom: 1.5rem solid transparent;
  border-left: 2.4rem solid #fff;
}
@media (max-width: 767px) {
  .works-modal__playbtn::before {
    border-top-width: 1rem;
    border-bottom-width: 1rem;
    border-left-width: 1.6rem;
  }
}

.works-modal__player {
  position: absolute;
  inset: 0;
  display: none;
}

.works-modal__player.is-active {
  display: block;
}

.works-modal__player iframe,
.works-modal__player video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   404ページ
   下層ページ（求人・会社概要）と同じトンマナ：
   赤地／FVは写真＋画面左端まで伸びる黒帯（Dela Gothic One の蛍光イエロー）／
   本文は黄色帯、ボタンは共通CTAと同じ「黄色地＋黒枠＋右下のずれ影」
   ============================================================ */
.page-404 {
  background: #e50113;
  padding: 12rem 0;
}
@media (max-width: 767px) {
  .page-404 {
    padding: 8.1rem 0 6rem;
  }
}

/* ── FV ───────────────────────────────── */
.page404-fv {
  position: relative;
}

.page404-fv__photo {
  max-width: 128rem;
  height: 36rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .page404-fv__photo {
    max-width: none;
    height: 18rem;
    margin: 0 2rem;
  }
}

.page404-fv__photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.page404-fv__title {
  position: absolute;
  left: 0;
  bottom: 6rem;
  padding: 2.25rem 3.75rem 2.25rem 10.5rem;
  background: #000;
  font-family: "Dela Gothic One", cursive;
  font-size: 6rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.1em;
  color: #deff00;
}
@media (max-width: 767px) {
  .page404-fv__title {
    bottom: 3rem;
    padding: 1.5rem 2rem 1.5rem 4rem;
    font-size: 3.6rem;
  }
}

/* ── 本文 ─────────────────────────────── */
.page404-body {
  margin-top: 8rem;
}
@media (max-width: 767px) {
  .page404-body {
    margin-top: 4rem;
  }
}

.page404-body__inner {
  max-width: 112rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.page404-body__lead {
  width: fit-content;
  padding: 1.5rem 3rem;
  background: #deff00;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
}
@media (max-width: 767px) {
  .page404-body__lead {
    padding: 1rem 1.6rem;
    font-size: 1.6rem;
  }
}

.page404-body__text {
  margin-top: 3rem;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #fff;
}
@media (max-width: 767px) {
  .page404-body__text {
    margin-top: 2rem;
    font-size: 1.4rem;
  }
}

.page404-body__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32rem;
  height: 7.4rem;
  margin: 5rem 0 0;
  background: #deff00;
  border: 0.6rem solid #000;
  box-shadow: 0.6rem 0.6rem 0 0 #000;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #000;
  text-decoration: none;
}
@media (max-width: 767px) {
  .page404-body__btn {
    width: 100%;
    max-width: 28rem;
    height: 6rem;
    margin-top: 3.2rem;
    border-width: 0.4rem;
    box-shadow: 0.4rem 0.4rem 0 0 #000;
    font-size: 1.5rem;
  }
}

/* ============================================================
   セクションタイトル（全セクション共通）
   Figma: 白い平行四辺形の帯（Vector 19〜23）＋ Anton 90px の装飾文字

   文字は「黒の太い縁取り（外側7.25px）＋上に色のグラデーション塗り」の2層。
   -webkit-text-stroke と background-clip:text は併用すると縁取りがグラデで
   埋まってしまうため、本体を黒フチ＋黒塗りにし、::after にグラデ塗りの
   同じ文字（data-text）を重ねる方式にしている。
   グラデの色はセクションごとに違うので、各セクションのSCSSで上書きする。
   ============================================================ */
.sec-title {
  width: 55.1092rem;
  height: 18.8726rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../img/common/title-band.svg") no-repeat center/100% 100%;
}
@media (max-width: 767px) {
  .sec-title {
    width: 27.907rem;
    height: 10.465rem;
  }
}

.sec-title__text {
  position: relative;
  display: inline-block;
  font-family: "Anton", sans-serif;
  font-size: 9rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-align: center;
  white-space: nowrap;
  color: #000;
  -webkit-text-stroke: 1.45rem #000;
  paint-order: stroke fill;
  margin-right: -0.1em;
}
@media (max-width: 767px) {
  .sec-title__text {
    font-size: 4.5581rem;
    -webkit-text-stroke: 0.7343rem #000;
  }
}
.sec-title__text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-text-stroke: 0;
  background: linear-gradient(180deg, #deff00 0%, #deff00 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sec-title--plain {
  width: auto;
  height: auto;
  background: none;
}

.c-breadcrumbs__area {
  width: 100%;
  margin: 3.5rem auto 0;
  font-size: 2rem;
}
@media (max-width: 767px) {
  .c-breadcrumbs__area {
    margin-top: 2rem;
  }
}

.c-breadcrumbs {
  font-size: 2rem;
  display: flex;
  column-gap: 0.5rem;
  align-items: center;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.05em;
  flex-wrap: wrap;
  white-space: wrap;
}
@media (max-width: 767px) {
  .c-breadcrumbs {
    font-size: 1.6rem;
    column-gap: 0.3rem;
  }
}

.to-top-area {
  position: fixed;
  bottom: 4rem;
  right: 4rem;
  z-index: 1000;
}
@media (max-width: 767px) {
  .to-top-area {
    display: none;
  }
}

.to-top-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}

.to-top-button__image {
  width: 7rem;
  height: 7rem;
}
@media (max-width: 767px) {
  .to-top-button__image {
    width: 3rem;
    height: 3rem;
  }
}

.c-link-btn {
  background: #445D84;
  width: fit-content;
  min-width: 24rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  padding: 2rem 3rem;
  text-decoration: none;
}
@media (max-width: 767px) {
  .c-link-btn {
    order: 6;
    grid-column: 1/-1;
    margin: 5rem auto 0;
    position: relative;
    z-index: 1;
    padding: 1rem 2rem;
  }
}

.c-link-btn__text {
  font-size: 2.4rem;
}
@media (max-width: 767px) {
  .c-link-btn__text {
    font-size: 2rem;
    line-height: 1.2;
    text-align: center;
  }
}

.c-link-btn__icon {
  width: 2.8rem;
  height: 2.8rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-link-btn__icon {
    width: 2rem;
    height: 2rem;
  }
}
.c-link-btn__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.c-utilization-link-area {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
}
@media (max-width: 767px) {
  .c-utilization-link-area {
    margin-top: 0;
  }
}

.c-check-item {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 2rem;
  border-bottom: 1px dotted #565656;
}
@media (max-width: 767px) {
  .c-check-item {
    padding-bottom: 1rem;
  }
}

.c-check-item__icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-check-item__icon {
    width: 2rem;
    height: 2rem;
  }
}

.c-check-item__text {
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .c-check-item__text {
    font-size: 1.6rem;
  }
}

.c-outline-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
@media (max-width: 767px) {
  .c-outline-flex {
    flex-direction: column-reverse;
    gap: 1rem;
  }
}

.c-outline-bottom {
  margin-top: 2rem;
}

.c-dot-line {
  width: 10rem;
  margin: 0 auto;
}

.c-contents__text {
  font-size: 2.2rem;
  line-height: 1.5;
  margin: 6rem auto;
  inline-size: fit-content;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .c-contents__text {
    font-size: 1.6rem;
    margin: 4rem auto;
  }
}

.c-outline-flex__textarea {
  width: 50%;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (max-width: 767px) {
  .c-outline-flex__textarea {
    width: 100%;
    padding-top: 1rem;
  }
}

.c-outline-flex__image {
  width: 45%;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-outline-flex__image {
    width: 100%;
  }
}
.c-outline-flex__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
}

.c-list-contents .c-list-contents-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-list-contents .c-list-contents-item {
  font-size: 2.2rem;
  line-height: 1.5;
  font-weight: 700;
  position: relative;
  padding-left: 1.2em;
}
@media (max-width: 767px) {
  .c-list-contents .c-list-contents-item {
    font-size: 1.6rem;
  }
}
.c-list-contents .c-list-contents-item::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0.1em;
}
.c-list-contents .c-list-contents-item + .c-list-contents .c-list-contents-item {
  margin-top: 1rem;
}

.c-link__button--area {
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-link__button--denture {
  color: #fff;
  padding: 3rem 10rem;
  border-radius: 5rem;
  text-decoration: none;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  display: inline-block;
  margin-top: 4rem;
  letter-spacing: 0.1em;
}
@media (max-width: 767px) {
  .c-link__button--denture {
    padding: 2rem 5rem;
    font-size: 1.6rem;
    margin-top: 2rem;
  }
}

.c-contents-sub-title {
  font-size: 3.2rem;
  font-weight: 700;
  padding-bottom: 2rem;
  position: relative;
}
@media (max-width: 767px) {
  .c-contents-sub-title {
    font-size: 2rem;
    padding-bottom: 1rem;
  }
}
.c-contents-sub-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 10%;
}

/* ==========================================================================
   Component: Fee Table (Vertical Label Type)
   ========================================================================== */
.c-fee-table {
  width: 100%;
  border-collapse: collapse;
  border: 0.1rem solid #d9c5a0;
  margin-bottom: 2rem;
  table-layout: fixed;
}
.c-fee-table:last-child {
  margin-bottom: 0;
}
.c-fee-table th,
.c-fee-table td {
  padding: 1.5rem 2rem;
  font-size: 1.4rem;
  line-height: 1.5;
  border-bottom: 0.1rem solid #d9c5a0;
  vertical-align: middle;
}
.c-fee-table tr:last-child th,
.c-fee-table tr:last-child td {
  border-bottom: none;
}
.c-fee-table__label {
  width: 20rem;
  background-color: #d9c5a0;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-bottom: none !important;
}
.c-fee-table__item-name {
  width: 45%;
  background-color: #F5EEE0;
  text-align: center;
  font-weight: normal;
}
.c-fee-table__price {
  width: auto;
  background-color: #F5EEE0;
  text-align: center;
  font-weight: 500;
}
.c-fee-table {
  /* -----------------------------------------------------------
      Responsive: Mobile
    ----------------------------------------------------------- */
}
@media (max-width: 768px) {
  .c-fee-table {
    display: block;
  }
  .c-fee-table tbody,
  .c-fee-table tr,
  .c-fee-table th,
  .c-fee-table td {
    display: block;
    width: 100%;
  }
  .c-fee-table__label {
    padding: 1rem;
    border-bottom: 0.1rem solid #fff !important;
  }
  .c-fee-table__item-name {
    background-color: #fdfaf5;
    padding: 1rem;
    border-bottom: none;
  }
  .c-fee-table__price {
    text-align: left;
    padding: 1rem;
    padding-top: 0;
    border-bottom: 0.1rem solid #eee;
  }
}

/* ==========================================================================
   Component: Fee Table V2 (Vertical Label & Grid Type)
   ========================================================================== */
.c-fee-table-v2 {
  width: 100%;
  border-collapse: collapse;
  border: 0.1rem solid #d9c5a0;
  margin-bottom: 2.5rem;
  table-layout: fixed;
}
.c-fee-table-v2 th,
.c-fee-table-v2 td {
  padding: 1.5rem 2rem;
  font-size: 1.4rem;
  line-height: 1.6;
  border-bottom: 0.1rem solid #d9c5a0;
  vertical-align: middle;
}
.c-fee-table-v2__label {
  width: 20rem;
  background-color: #d9c5a0;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-bottom: 0.1rem solid #fff;
}
.c-fee-table-v2__label--single {
  border-bottom: 0.1rem solid #d9c5a0;
}
.c-fee-table-v2__label-img {
  margin-top: 1rem;
  width: 100%;
}
.c-fee-table-v2__label-img img {
  max-width: 13rem;
  height: auto;
  border: 0.2rem solid #fff;
  display: block;
  margin: 0 auto;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
.c-fee-table-v2__item-name {
  width: 28rem;
  background-color: #F5EEE0;
  text-align: center;
  font-weight: normal;
}
.c-fee-table-v2__price {
  width: auto;
  background-color: #F5EEE0;
  text-align: center;
}
.c-fee-table-v2 {
  /* -----------------------------------------------------------
    Responsive: Mobile (768px以下)
  ----------------------------------------------------------- */
}
@media (max-width: 768px) {
  .c-fee-table-v2 {
    display: block;
  }
  .c-fee-table-v2 tbody,
  .c-fee-table-v2 tr,
  .c-fee-table-v2 th,
  .c-fee-table-v2 td {
    display: block;
    width: 100% !important;
    text-align: center;
  }
  .c-fee-table-v2__label {
    padding: 1.5rem;
    border-bottom: 0.1rem solid #fff !important;
  }
  .c-fee-table-v2__label--single {
    border-bottom: 0.1rem solid #d9c5a0 !important;
  }
  .c-fee-table-v2__item-name {
    padding: 0.8rem;
    background-color: #fdfaf5;
    font-weight: bold;
    border-bottom: none;
  }
  .c-fee-table-v2__price {
    padding: 1rem 2rem 2rem;
    border-bottom: 0.1rem solid #d9c5a0;
  }
}

.c-media-block {
  background: #fff;
  padding: 2rem 1rem;
}

.c-media-block__title-area {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #565656;
}

.c-media-block__title--number {
  background: linear-gradient(135deg, #BBA676 50%, #CDB98B 50%);
  width: 6rem;
  height: 6rem;
  font-size: 4.2rem;
  line-height: 1;
  color: #fff;
  padding-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-media-block__title--number {
    width: 4rem;
    height: 4rem;
    font-size: 2.4rem;
    padding-top: 0.3rem;
  }
}

.c-media-block__title--text {
  font-size: 3.2rem;
}
@media (max-width: 767px) {
  .c-media-block__title--text {
    font-size: 2.4rem;
  }
}

.c-media-block__content-area {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .c-media-block__content-area {
    margin-top: 2rem;
    flex-direction: column;
    gap: 1rem;
  }
}

.c-media-block__content--image {
  width: 30rem;
  height: 20rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-media-block__content--image {
    width: 100%;
    height: auto;
  }
}

.c-media-block__content--text p {
  font-size: 2rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .c-media-block__content--text p {
    font-size: 1.6rem;
  }
}
.c-media-block__content--text {
  font-size: 2rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .c-media-block__content--text {
    font-size: 1.6rem;
  }
}

.c-media-block__content--images {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 767px) {
  .c-media-block__content--images {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }
}

.c-contents-block__items {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.c-contents-block__media {
  background: #F5EEE0;
  box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.2);
  padding: 4rem 8rem;
}
@media (max-width: 767px) {
  .c-contents-block__media {
    padding: 2rem;
  }
}

.c-contents-block__media--flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
@media (max-width: 767px) {
  .c-contents-block__media--flex {
    flex-direction: column;
    gap: 1rem;
  }
}

.c-contents-block__media--image {
  width: 30rem;
  height: 20rem;
  flex-shrink: 0;
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .c-contents-block__media--image {
    width: 100%;
    height: auto;
    margin-top: 2rem;
  }
}

.c-contents-block-area {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
@media (max-width: 767px) {
  .c-contents-block-area {
    gap: 2rem;
  }
}

.c-contents-block {
  background: #F5EEE0;
  box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.2);
  padding: 4rem 8rem;
}
@media (max-width: 767px) {
  .c-contents-block {
    padding: 2rem;
  }
}

.c-contents-block__title {
  font-size: 3.2rem;
  line-height: 1.56;
  position: relative;
  padding-left: 8rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #565656;
}
@media (max-width: 767px) {
  .c-contents-block__title {
    font-size: 2.4rem;
    padding-left: 4rem;
    padding-bottom: 1rem;
    line-height: 1.25;
  }
}
.c-contents-block__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 5rem;
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, #455E84 50%, #7E8DA4 50%);
}
@media (max-width: 767px) {
  .c-contents-block__title::before {
    width: 3rem;
    height: 3rem;
  }
}
@media (max-width: 767px) {
  .c-contents-block__title {
    padding-left: 4rem;
    padding-bottom: 1rem;
  }
}

.c-contents-block__text {
  margin-top: 4rem;
  font-size: 2rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .c-contents-block__text {
    margin-top: 2rem;
    font-size: 1.6rem;
    line-height: 1.8;
  }
}

.c-flow-contents {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  background: #fff;
  padding: 4rem 8rem;
  border: 1rem solid #9ea5b0;
  margin-top: 6rem;
}
@media (max-width: 767px) {
  .c-flow-contents {
    padding: 2rem;
    border: none;
    border: 0.2rem solid #9ea5b0;
    gap: 2rem;
    margin-top: 2rem;
  }
}

/*# sourceMappingURL=style.css.map */