/* =========================================
   ZEN Holdings — styles
   ========================================= */

:root {
  --color-text: #404040;
  --color-bg: #ffffff;
  --color-fv-bg: #d1cbc8;
  --color-recruit: #d65b42;
  --color-dark: #404040;
  --color-accent: #0a3d62;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-serif: "Zen Old Mincho", "Hiragino Mincho ProN", serif;
  --container-width: 1080px;
  --hero-width: 1240px;
  --header-height: 84px;
  --space-section: clamp(5rem, 4rem + 6vw, 10rem);
  /* fv-back.svg (6436x1213) の1タイル描画幅。ループ境界はこの値と一致させる */
  --fv-tile: 3860px;
  /* FV画像・テキスト切り替えのクロスフェード時間（main.js の切替間隔より短くすること） */
  --fv-switch-fade: 2.5s;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-sans);
  line-height: 1.8;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
.section-title,
.page-title {
  font-family: var(--font-serif);
  font-weight: 500;
}

.container {
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* -----------------------------------------
   固定ヘッダー
   ----------------------------------------- */

.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--color-fv-bg);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--header-height);
  padding-inline: 2rem;
}

.site-header__logo {
  margin: 0;
  line-height: 0;
}

.site-header__logo img {
  width: auto;
  height: 52px;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 500;
}

.site-nav__list a {
  text-decoration: none;
  color: var(--color-dark);
}

.site-nav__btn {
  display: inline-block;
  padding: 0.3em 3em;
  color: #fff !important;
  border-radius: 0;
  transition: opacity 0.2s;
}

.site-nav__btn:hover {
  opacity: 0.85;
}

.site-nav__btn--recruit {
  background: var(--color-recruit);
}

.site-nav__btn--contact {
  background: var(--color-dark);
}

/* スクロールで浮上する白ヘッダー */
.site-header--float {
  position: fixed;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}

.site-header--float.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .site-header--float {
    transition: none;
  }
}

/* 下層ページ：ヘッダーは白背景・下影・追従（fixed） */
body:not(.home) {
  padding-top: var(--header-height);
}

body:not(.home) .site-header {
  position: fixed;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

body:not(.home) .site-header--float {
  display: none;
}

/* -----------------------------------------
   下層ページ共通
   ----------------------------------------- */

.page-container {
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ページ見出しセクション */
.page-fv {
  display: grid;
  place-items: center;
  height: 315px;
  background: url("../img/page-fv-back.jpg") center / cover no-repeat;
}

.page-fv__title {
  margin: 0;
  color: #fff;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
}

/* パンくずリスト（コンテナに入れず画面左端基準で配置） */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 1.5rem;
  padding-inline: 5rem;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-dark);
}

.breadcrumb__link {
  color: var(--color-dark);
  text-decoration: none;
}

.breadcrumb__current {
  color: #a2a2a2;
}

/* TOPに戻る */
.page-back {
  margin: 4.5rem 0 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 16px;
}

.page-back a {
  color: var(--color-dark);
  text-decoration: none;
}

.page-back a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* 下層ページ共通の見出し（30px明朝＋3px下線） */
.page-heading {
  margin: 0 0 3.5rem;
  padding-bottom: 1rem;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  border-bottom: 3px solid var(--color-recruit);
}

/* -----------------------------------------
   会社概要ページ：会社概要テーブル
   ----------------------------------------- */

/* 会社概要・会社沿革では見出しと中身の間を詰める（このページ限定） */
.overview .page-heading,
.history .page-heading {
  margin-bottom: 0;
}

.section.overview {
  padding-block: calc(var(--space-section) * 0.6) 0;
}

.overview__list {
  margin: 0;
}

.overview__row {
  display: flex;
  align-items: center;
  padding-block: 1rem;
  border-bottom: 3px solid #c2c7cd;
}

.overview__label {
  flex: 0 0 220px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.4;
}

.overview__value {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 2em;
}

.overview__map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-left: 1em;
  font-size: 12px;
  color: #999999;
  text-decoration: none;
}

.overview__map-link img {
  width: 13px;
  height: 13px;
}

/* -----------------------------------------
   会社概要ページ：会社沿革
   ----------------------------------------- */

.section.history {
  padding-block: calc(var(--space-section) * 0.6);
}

.history__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 1rem;
  border-bottom: 3px solid #c2c7cd;
}

/* 月のドットを縦に繋ぐ線 */
.history__item::before {
  content: "";
  position: absolute;
  left: calc(110px + 2rem + 5px);
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--color-dark);
}

.history__item:first-child::before {
  top: 50%;
}

.history__item:last-child::before {
  bottom: 50%;
}

.history__year {
  flex: 0 0 110px;
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 1;
  color: #6f6f6f;
}

.history__dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-dark);
}

.history__month {
  flex: 0 0 60px;
  font-family: var(--font-serif);
  font-size: 16px;
}

.history__text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 16px;
}

/* -----------------------------------------
   代表挨拶（会社概要ページ）
   ----------------------------------------- */

/* 上下余白は共通セクションの6割 */
.section.message {
  padding-block: calc(var(--space-section) * 0.6);
}

.message__title {
  margin: 0 0 3.5rem;
  padding-bottom: 1rem;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  border-bottom: 3px solid var(--color-recruit);
}

.message__catch {
  margin: 0 0 3rem;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.5;
  font-feature-settings: "palt";
  letter-spacing:0.1em;
}

.message__intro {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.8;
}

.message__name {
  margin: 0 0 1.5rem;
}

.message__statement {
  margin: 0;
}

.message__body {
  margin-top: 2.5rem;
  font-family: var(--font-sans);
  font-size: 16px;
}

.message__body p {
  margin: 0 0 2em;
  line-height: 2.2em;
}

.message__body p:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------
   1. ファーストビュー
   ----------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-fv-bg);
  padding-top: var(--header-height);
  color: var(--color-dark);
}

/* 2. 背景ループアニメーション（fv-back.svg） */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__bg::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + var(--fv-tile));
  background: url("../img/fv-back.svg") repeat-x center / var(--fv-tile) auto;
  animation: fv-scroll 110s linear infinite;
  will-change: transform;
}

@keyframes fv-scroll {
  to {
    transform: translateX(calc(-1 * var(--fv-tile)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__bg::before {
    animation: none;
  }
}

/* 3. 2カラム（左テキスト / 右画像2枚） */
.hero__inner {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--hero-width);
  margin-inline: auto;
  padding: 1rem 1.25rem 0;
}

.hero__text {
  display: grid;
  align-items: end;
  padding-top: 6rem;
  padding-bottom: 1.5rem;
  font-family: var(--font-serif);
}

/* テキスト2セットを同セルに重ねてクロスフェード切り替え */
.hero__text-set {
  grid-area: 1 / 1;
  transition: opacity var(--fv-switch-fade) ease-in-out;
}

.hero__text-set--2 {
  opacity: 0;
}

.hero.is-alt .hero__text-set--1 {
  opacity: 0;
}

.hero.is-alt .hero__text-set--2 {
  opacity: 1;
}

.hero__title-en {
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.hero__title-ja {
  margin: 1.5rem 0 0;
  font-family: var(--font-serif);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}

.hero__images {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-shrink: 0;
}

.hero__img-wrap {
  position: relative;
  flex-shrink: 0;
}

.hero__img-wrap--01 {
  width: 260px;
}

.hero__img-wrap--02 {
  width: 310px;
}

.hero__img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity var(--fv-switch-fade) ease-in-out;
}

/* 切り替え先（03/04）は同位置に重ねて非表示から開始 */
.hero__img--03,
.hero__img--04 {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.hero.is-alt .hero__img--01,
.hero.is-alt .hero__img--02 {
  opacity: 0;
}

.hero.is-alt .hero__img--03,
.hero.is-alt .hero__img--04 {
  opacity: 1;
}

/* 4. ニュースバー + 5. スクロールダウン */
.hero__bottom {
  position: relative;
  max-width: var(--hero-width);
  margin: 3rem auto 0;
  padding: 0 1.25rem 2.5rem;
}

.hero__news {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: min(900px, 100%);
  height: 80px;
  margin-inline: auto;
  padding-inline: 5rem;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  color: var(--color-dark);
  text-decoration: none;
}

.hero__news-label {
  font-family: var(--font-serif);
  font-size: 23px;
  flex-shrink: 0;
}

.hero__news-date {
  font-size: 16px;
  flex-shrink: 0;
}

.hero__news-title {
  font-size: 16px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero__scroll {
  position: absolute;
  right: -1.5rem;
  bottom: 3.5rem;
  width: 16px;
  height: 108px;
  animation: scroll-float 2.6s ease-in-out infinite;
}

@keyframes scroll-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll {
    animation: none;
  }
}

/* -----------------------------------------
   2. About Us
   ----------------------------------------- */

.about {
  position: relative;
  background: #fff;
  overflow: hidden;
}

.about__bg {
  position: absolute;
  pointer-events: none;
}

.about__bg--01 {
  top: 0;
  left: 0;
  width: min(420px, 30vw);
}

.about__bg--02 {
  right: 0;
  bottom: 0;
  width: min(530px, 37vw);
}

.about__container {
  position: relative;
  max-width: var(--hero-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.about__title {
  margin: 0 0 5rem;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.about__cols {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-bottom:30px;
}

.about__illust {
  flex: 0 0 620px;
  margin: 0;
}

.about__body {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
}

.about__catch {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5em;
  font-feature-settings: "palt";
  letter-spacing: 0.1em;
}

.about__text {
  margin: 2rem 0 0;
  font-size: 16px;
  line-height: 2.2em;
}

/* -----------------------------------------
   3. Business
   ----------------------------------------- */

.business {
  position: relative;
  display: flex;
  align-items: center;
  background: url("../img/business-back.jpg") center / cover no-repeat;
  color: #fff;
}

/* 上下余白は共通セクションの85%（後方の .section 定義に勝つよう詳細度を上げる） */
.section.business {
  padding-block: calc(var(--space-section) * 0.85);
}

.business__container {
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.business__title {
  margin: 0 0 2rem;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.business__lead {
  margin: 0 0 4rem;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  text-align: center;
  padding-top:50px;
}

.business__slider {
  display: flex;
  align-items: stretch;
  gap: 4.5rem;
}

.business__slides {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* 縦切り替え式スライド：非表示スライドは枠外（下）に待機し、overflowで隠す */
.business__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
  transform: translateY(110%);
  transition: transform 0.65s cubic-bezier(0.65, 0, 0.35, 1);
}

.business__slide.is-active {
  transform: translateY(0);
}

.business__slide.is-above {
  transform: translateY(-110%);
}

.business__slide.no-anim {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .business__slide {
    transition: none;
  }
}

.business__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 38px;
  line-height: 1;
}

.business__num::after {
  content: "";
  width: 1px;
  height: 220px;
  background: #fff;
}

.business__illust {
  flex: 0 0 230px;
  margin: 0;
  display: flex;
  justify-content: center;
}

.business__illust img {
  width: 200px;
}

.business__text {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
}

.business__name {
  margin: 0 0 1.5rem;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
}

.business__desc {
  margin: 0;
  font-size: 16px;
  line-height: 2em;
}

.business__dots {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  flex-shrink: 0;
}

.business__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s;
}

.business__dot.is-active {
  background: #fff;
}

/* -----------------------------------------
   4. Our Strengths
   ----------------------------------------- */

.strengths {
  /* z-index:0 でスタッキングコンテキスト化。
     背景飾り（.strengths__deco の z-index:-1）を
     セクション背景の上・コンテンツの下に敷くために必要 */
  position: relative;
  z-index: 0;
  background: #fff;
  overflow: hidden;
}

.strengths__title {
  margin: 0 0 3rem;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

/* ブロックは中央寄せ・テキストは左揃え */
.strengths__lead {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 1.25rem;
  font-family: var(--font-sans);
  text-align: left;
}

.strengths__catch {
  margin: 0 0 1.5rem;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5em;
  letter-spacing: 0.1em;
  font-feature-settings: "palt";
  padding-top:50px;
}

.strengths__intro {
  margin: 0;
  font-size: 18px;
  line-height: 2em;
}

/* 2カラム行（画像は画面端にぴったり） */
.strengths__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 4.5rem);
  margin-top: 8rem;
  font-family: var(--font-sans);
  padding-right: max(1.25rem, calc((100% - 1024px) / 2));
}

.strengths__row--reverse {
  flex-direction: row-reverse;
  padding-right: 0;
  padding-left: max(1.25rem, calc((100% - 1024px) / 2));
}

.strengths__img {
  flex: 0 0 46%;
  margin: 0;
}

.strengths__img img {
  display: block;
  width: 100%;
  height: auto;
}

.strengths__content {
  flex: 1;
  min-width: 0;
  margin-top: 40px;
}

.strengths__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 0.5rem;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.5;
}

/* 背面の大きな Point.N（行基準で配置：上端は常に画像の上端と一致） */
.strengths__point {
  position: absolute;
  top: 0;
  /* 画像幅 = (行幅 - 右padding) * 46%。その右端の少し左（画像に軽く被る位置）にPを置く */
  left: calc((100% - max(1.25rem, (100% - 1024px) / 2)) * 0.46 - 6px);
  z-index: 0;
  font-family: var(--font-serif);
  font-size: 90px;
  font-weight: 500;
  line-height: 1;
  color: rgba(214, 91, 66, 0.3);
  pointer-events: none;
  white-space: nowrap;
}

/* 反転行（Point.2）はテキストブロックの左端に合わせる */
.strengths__row--reverse .strengths__point {
  left: calc(max(1.25rem, (100% - 1024px) / 2) - 28px);
  margin-top: -14px;
}

.strengths__heading-line,
.strengths__heading-em {
  position: relative;
  z-index: 1;
}

/* 背景色ブロック＋その下に2pxの線 */
.strengths__heading-em {
  display: inline-block;
  padding: 0.1em 0.1em;
  background: #f2f2f2;
  border-bottom: 2px solid var(--color-recruit);
}

.strengths__desc {
  margin: 0;
  font-size: 16px;
  line-height: 2em;
}

/* -----------------------------------------
   4-2. Our Strengths 背景飾り（三角ライン）
   01/04: セクション基準、02/03: Point.2 の行基準で絶対配置
   ----------------------------------------- */

.strengths__deco {
  position: absolute;
  z-index: -1;
  height: auto;
  pointer-events: none;
}

/* 左上に隙間なしぴったり。コーナーを固定したままゆっくり伸縮 */
.strengths__deco--01 {
  top: 0;
  left: 0;
  width: clamp(240px, 28vw, 440px);
  transform-origin: top left;
  animation: strengths-deco-breathe 9s ease-in-out infinite;
}

/* Point.2 の画像の少し上 */
.strengths__deco--02 {
  top: clamp(-330px, -22vw, -190px);
  right: clamp(2rem, 8vw, 9rem);
  width: clamp(160px, 18vw, 260px);
  animation: strengths-deco-drift 7s ease-in-out 0.4s infinite;
}

/* Point.2 の少し左 */
.strengths__deco--03 {
  top: clamp(-90px, calc(-2vw - 30px), -40px);
  left: clamp(40px, 6vw, 100px);
  width: clamp(140px, 15vw, 240px);
  animation: strengths-deco-drift 8.5s ease-in-out 1.2s infinite;
}

/* 右下（ぴったりではなく余白あり） */
.strengths__deco--04 {
  right: clamp(1.5rem, 6vw, 6rem);
  bottom: clamp(1.5rem, 5vw, 5rem);
  width: clamp(220px, 26vw, 410px);
  animation: strengths-deco-drift 10s ease-in-out 0.8s infinite;
}

/* ゆっくり上下に漂う */
@keyframes strengths-deco-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -16px, 0);
  }
}

/* 左上コーナーを固定したままわずかに伸縮（back01 用。
   移動させると左上に隙間ができるため scale で動きを付ける） */
@keyframes strengths-deco-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .strengths__deco {
    animation: none;
  }
}

/* -----------------------------------------
   Privacy Policyページ
   ----------------------------------------- */

.section.privacy {
  padding-block: calc(var(--space-section) * 0.6);
}

/* 本文はすべて18pxゴシック */
.privacy__body {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 2.2em;
}

.privacy__heading {
  margin: 3rem 0 0.75rem;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.privacy__text {
  margin: 0 0 1rem;
}

.privacy__items {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

/* 連絡先（名称・代表者・住所・電話） */
.privacy__contact {
  margin: 1.5rem 0 0;
}

.privacy__contact-row {
  display: flex;
  gap: 2rem;
}

.privacy__contact-label {
  flex: 0 0 5em;
}

.privacy__contact-value {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* -----------------------------------------
   Contactページ（すべてゴシック体）
   ----------------------------------------- */

.section.contact {
  padding-block: calc(var(--space-section) * 0.6);
  font-family: var(--font-sans);
}

.contact__title {
  margin: 0 0 2rem;
  font-family: var(--font-sans);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.contact__lead {
  margin: 0 0 1.25rem;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

.contact__note {
  margin: 0;
  font-size: 16px;
  text-align: center;
}

/* お電話でのお問い合わせ（フリーダイヤル） */
.contact__tel {
  margin-top: 2rem;
  text-align: center;
}

.contact__tel-heading {
  margin: 0 0 0.25rem;
  font-size: 16px;
  font-weight: 500;
}

.contact__tel-number {
  font-size: 32px;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

/* 送信結果メッセージ */
.contact-form__result {
  max-width: 700px;
  margin: 2rem auto 0;
  padding: 0.9rem 1.25rem;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
  border: 1px solid;
}

.contact-form__result--success {
  color: #1f5c33;
  background: #eef7f0;
  border-color: #bcdcc5;
}

.contact-form__result--error {
  color: #8a2323;
  background: #fbeeee;
  border-color: #e4bcbc;
}

/* ハニーポット（スパム対策・画面外へ） */
.contact-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* フォーム本体（700px・左揃え） */
.contact-form {
  max-width: 700px;
  margin: 3.5rem auto 0;
  font-size: 16px;
  text-align: left;
}

.contact-form__required-note {
  margin: 0 0 1.75rem;
  color: var(--color-recruit);
  font-size: 16px;
}

.contact-form__group {
  margin: 0 0 2rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.contact-form__label {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
}

.contact-form__req {
  color: var(--color-recruit);
}

/* ラジオボタン（選択中のみD65B42） */
.contact-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
}

.contact-form__radio {
  display: flex;
  align-items: center;
  gap: 0.45em;
  cursor: pointer;
}

.contact-form__radio input[type="radio"],
.contact-form__agree input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-recruit);
  flex-shrink: 0;
}

/* 入力欄共通 */
.contact-form__input,
.contact-form__textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 0.6em 0.8em;
  border: 1px solid #c9c9c9;
  border-radius: 3px;
  background: #fff;
  color: var(--color-text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: #b0b0b0;
}

.contact-form__textarea {
  min-height: 180px;
  resize: vertical;
}

/* 2カラム行（お名前/フリガナ・メール/電話） */
.contact-form__row {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
}

.contact-form__field {
  flex: 1;
  min-width: 0;
}

/* 郵便番号 */
.contact-form__zip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.contact-form__input--zip1 {
  width: 4em;
}

.contact-form__input--zip2 {
  width: 5em;
}

/* マンション名（住所の下・任意） */
.contact-form__input--building {
  margin-top: 0.75rem;
}

/* 個人情報同意 */
.contact-form__agree {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 14px;
  cursor: pointer;
}

.contact-form__privacy-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 送信ボタン（404040・ピル型・白太字） */
.contact-form__submit {
  display: block;
  margin: 2.75rem auto 0;
  padding: 0.65em 4em;
  background: var(--color-dark);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.contact-form__submit:hover {
  opacity: 0.85;
}

/* -----------------------------------------
   5. Access
   ----------------------------------------- */

.access {
  background: url("../img/access-back.jpg") center / cover no-repeat;
  color: #fff;
}

.access__container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.access__title {
  margin: 0 0 3rem;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.access__cols {
  display: flex;
  justify-content: center;
  gap: 4rem;
  padding-top:20px;
}

.access__col {
  width: 500px;
  max-width: 100%;
  font-family: var(--font-sans);
}

.access__map {
  display: block;
  width: 100%;
  height: 300px;
  border: 0;
}

.access__line {
  width: 100%;
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid #fff;
}

/* 「本社/支店」を2行住所の縦中央に配置
   ラベル列を固定幅にして、〒とTEL番号の左端を揃える */
.access__place {
  display: flex;
  align-items: center;
  margin-left:10px;
}

.access__place-name {
  flex-shrink: 0;
  width: 88px;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1;
}

.access__address {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
}

.access__tel {
  display: flex;
  gap: 2.5rem;
  margin-top: 1.25rem;
  font-size: 16px;
    margin-left:10px;
}

.access__tel-label {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 20px;
  margin-right: 0.75em;
}

.access__tel-item:first-child .access__tel-label {
  width: 88px;
  margin-right: 0;
}

/* -----------------------------------------
   セクション共通
   ----------------------------------------- */

.section {
  padding-block: var(--space-section);
}

.section-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-block: 0 2.5rem;
}

.section-title__en {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1.2;
}

.section-title__ja {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-accent);
}

/* -----------------------------------------
   お知らせ一覧ページ
   ----------------------------------------- */

/* 見出し（ゴシック・中央揃え） */
.news-archive__heading {
  margin: 0 0 3.5rem;
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* カード一覧（横2×縦2） */
.news-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-card {
  border: 1px solid #d1cbc8;
  background: #fff;
}

.news-card__link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

.news-card__link:hover {
  opacity: 0.8;
}

.news-card__thumb {
  aspect-ratio: 16 / 9;
  background: #eeecea;
}

.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-card__body {
  padding: 1rem 1.25rem 1.5rem;
}

.news-card__date {
  display: block;
  font-family: var(--font-serif);
  font-size: 16px;
  color: #5b5b5b;
}

.news-card__title {
  margin: 0.5rem 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.news-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0.5rem 0 0;
  font-size: 16px;
}

@media (max-width: 767px) {
  .news-cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ページネーション */
.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 3.5rem;
  font-size: 16px;
}

.pagination .page-numbers {
  color: var(--color-dark);
  text-decoration: none;
}

.pagination a.page-numbers:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pagination .page-numbers.current {
  color: var(--color-recruit);
}

/* -----------------------------------------
   お知らせ詳細ページ
   ----------------------------------------- */

.news-article {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.news-article__thumb {
  margin-bottom: 1.5rem;
}

.news-article__thumb img {
  width: 100%;
  height: auto;
}

.news-article__date {
  display: block;
  font-family: var(--font-serif);
  font-size: 16px;
  color: #5b5b5b;
}

.news-article__title {
  margin: 0.5rem 0 1.5rem;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.news-article__body {
  font-size: 16px;
}

.news-article__body p {
  margin: 0 0 1em;
}

.news-article__body > *:last-child {
  margin-bottom: 0;
}

/* -----------------------------------------
   フッター
   ----------------------------------------- */

.site-footer {
  background: #f2f2f2;
  font-family: var(--font-sans);
  color: var(--color-dark);
}

.site-footer__inner {
  max-width: var(--hero-width);
  margin-inline: auto;
  padding: 4rem 1.25rem 3rem;
}

/* 上段：ロゴ（左端）＋ページトップ（右端・ロゴに下揃え） */
.site-footer__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.8rem;
}

.site-footer__logo {
  margin: 0;
  line-height: 0;
}

.site-footer__logo img {
  width: auto;
  height: 84px;
}

.site-footer__pagetop {
  border: 0;
  padding: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}

.site-footer__pagetop img {
  width: 56px;
  height: 56px;
}

/* 下段：ナビ（左揃え） */
.footer-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
}

.footer-nav__link {
  color: var(--color-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-nav__btn {
  display: inline-block;
  padding: 0.3em 3em;
  color: #fff;
  text-decoration: none;
}

.footer-nav__btn--contact {
  background: var(--color-dark);
}

.footer-nav__btn--recruit {
  background: var(--color-recruit);
}

/* コピーライト */
.site-footer__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin: 0;
  background: var(--color-dark);
  color: #fff;
  font-size: 14px;
}

/* =========================================
   SP（〜767px）
   PC表示に影響しないよう、SP専用スタイルは
   すべてこのブロック内に閉じる
   ========================================= */

/* ハンバーガーとSP専用テキストはPCでは常に非表示 */
.site-header__menu {
  display: none;
}

.u-sp-only {
  display: none;
}

@media (max-width: 767px) {
  :root {
    --header-height: 64px;
  }

  .u-sp-only {
    display: inline;
  }

  /* PC専用改行はSPでは無効化 */
  .u-pc-only {
    display: none;
  }

  /* -----------------------------------------
     SP: ヘッダー（ハンバーガー折りたたみ）
     ----------------------------------------- */

  .site-header__inner {
    padding-inline: 1rem;
  }

  .site-header__logo img {
    height: 40px;
  }

  /* 3本線ボタン（D65B42） */
  .site-header__menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    background: var(--color-recruit);
    cursor: pointer;
  }

  .site-header__menu-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: transform 0.3s, opacity 0.3s;
  }

  .is-menu-open .site-header__menu-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .is-menu-open .site-header__menu-bar:nth-child(2) {
    opacity: 0;
  }

  .is-menu-open .site-header__menu-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ナビはヘッダー直下に重ねる白背景ドロップダウン
     （absoluteのためヘッダー高さ＝ロゴ位置は変わらない） */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 10px 16px rgba(0, 0, 0, 0.12);
  }

  .is-menu-open .site-nav {
    display: block;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0 1.25rem;
    font-size: 15px;
    text-align: center;
  }

  .site-nav__list a {
    display: block;
    padding: 0.8em 1.25rem;
  }

  .site-nav__btn {
    margin: 0.5rem 1.5rem 0;
    padding: 0.5em 1em;
  }

  /* -----------------------------------------
     SP: ファーストビュー（画像上・テキスト下）
     ----------------------------------------- */

  .hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem 1.25rem 0;
  }

  /* 上端揃え・右画像は少し大きく画面右端にぴったり付ける */
  .hero__images {
    order: -1;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 4vw;
    /* 親のpadding-rightを打ち消して画面右端まで伸ばす */
    margin-right: -1.25rem;
  }

  .hero__img-wrap--01 {
    width: 42%;
  }

  .hero__img-wrap--02 {
    width: 47%;
  }

  .hero__text {
    padding-top: 2rem;
    padding-bottom: 0;
  }

  .hero__title-en {
    font-size: clamp(1.125rem, 5.6vw, 1.625rem);
  }

  .hero__title-ja {
    margin-top: 0.75rem;
    font-size: clamp(1.25rem, 6.4vw, 1.875rem);
  }

  /* ニュース: Newsが左、日付＋タイトルが右に2行 */
  .hero__bottom {
    margin-top: 2rem;
    padding-bottom: 2.5rem;
  }

  .hero__news {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0.1rem;
    height: auto;
    padding: 0.9rem 1.25rem;
  }

  .hero__news-label {
    grid-row: 1 / 3;
    font-size: clamp(1.125rem, 5.3vw, 1.25rem);
  }

  .hero__news-date {
    font-size: 0.8125rem;
  }

  .hero__news-title {
    font-size: 0.875rem;
  }

  /* スクロールダウンは画面外にはみ出すためSPでは非表示 */
  .hero__scroll {
    display: none;
  }

  /* -----------------------------------------
     SP: About Us（画像上・キャッチ中・本文下）
     ----------------------------------------- */

  .about__title {
    margin-bottom: 2.5rem;
    font-size: clamp(1.75rem, 8.5vw, 2rem);
  }

  .about__cols {
    flex-direction: column;
    gap: 1.75rem;
    padding-bottom: 0;
  }

  .about__illust {
    flex: none;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
  }

  .about__catch {
    font-size: clamp(1.1875rem, 5.3vw, 1.4375rem);
  }

  .about__text {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
  }

  .about__bg--01 {
    width: 50vw;
  }

  .about__bg--02 {
    width: 60vw;
  }

  /* -----------------------------------------
     SP: Business（背景SP画像・縦積みスライド）
     ----------------------------------------- */

  .business {
    background-image: url("../img/business-back-sp.jpg");
  }

  .section.business {
    padding-block: calc(var(--space-section) * 0.7);
  }

  .business__title {
    font-size: clamp(1.75rem, 8.5vw, 2rem);
  }

  .business__lead {
    margin-bottom: 2.5rem;
    padding-top: 24px;
    font-size: clamp(1.1875rem, 5.3vw, 1.4375rem);
    text-align: left;
  }

  .business__slider {
    gap: 1rem;
  }

  /* 左: #01＋縦線 / 中: イラスト→文字の縦積み / 右: ドット */
  .business__slide {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    row-gap: 1.25rem;
    align-items: start;
    /* 低いスライドがtranslateY(110%)でも枠内に残らないよう枠高に揃える */
    box-sizing: border-box;
    min-height: 100%;
  }

  .business__num {
    grid-row: 1 / 3;
    height: 100%;
    font-size: clamp(2rem, 9.6vw, 2.375rem);
    gap: 0.75rem;
  }

  .business__num::after {
    flex: 1;
    height: auto;
  }

  /* イラスト: 白背景角丸・SVGは#404040に。高さは3枚とも統一 */
  .business__illust {
    grid-column: 2;
    flex: none;
    box-sizing: border-box;
    width: 100%;
    height: clamp(200px, 56vw, 240px);
    align-items: center;
    padding: 1rem;
    background: #fff;
    border-radius: 12px;
  }

  .business__illust img {
    width: auto;
    height: min(150px, 40vw);
    /* 白塗りSVGを#404040相当へ */
    filter: brightness(0.25);
  }

  .business__text {
    grid-column: 2;
  }

  .business__name {
    margin-bottom: 0.75rem;
    font-size: clamp(1.25rem, 5.9vw, 1.5rem);
  }

  .business__desc {
    font-size: 0.875rem;
    line-height: 1.9;
  }

  .business__dots {
    gap: 1rem;
  }

  /* -----------------------------------------
     SP: Our Strengths（SP画像・縦積み）
     ----------------------------------------- */

  .strengths__title {
    font-size: clamp(1.75rem, 8.5vw, 2rem);
  }

  .strengths__catch {
    padding-top: 0px;
    font-size: clamp(1.1875rem, 5.3vw, 1.4375rem);
  }

  .strengths__intro {
    font-size: 0.9375rem;
  }

  .strengths__row,
  .strengths__row--reverse {
    flex-direction: column;
    gap: 0rem;
    margin-top: 4rem;
    padding-left: 0;
    padding-right: 0;
  }

  .strengths__img {
    flex: none;
    width: 85%;
  }

  /* Point.2（反転行）の画像は画面右端にぴったり */
  .strengths__row--reverse .strengths__img {
    align-self: flex-end;
  }

  .strengths__content {
    margin-top: 0;
    padding-inline: 1.25rem;
  }

  /* Point.N: 通常フローのまま負マージンで画像の上に少し乗せる。
     Point.1/3 は「1」が画面右端、Point.2 は「P」が画面左端に付く */
  .strengths__point,
  .strengths__row--reverse .strengths__point {
    position: static;
    display: block;
    /* 親flex（.strengths__heading）内で全幅に広げ、text-alignを効かせる */
    align-self: stretch;
    /* 下マージンを負にして見出しをPointの上に重ねる（画像<Point<文字） */
    margin: -0.3em -1.25rem -0.45em;
    font-size: clamp(3.5rem, 16vw, 4rem);
    line-height: 1;
    text-align: right;
    z-index: 0;
  }

  .strengths__row--reverse .strengths__point {
    text-align: left;
  }

  /* Point.2の見出し（理想の未来から逆算する〜）は右揃え */
  .strengths__row--reverse .strengths__heading {
    align-items: flex-end;
    text-align: right;
  }

  .strengths__heading {
    font-size: clamp(1.25rem, 5.9vw, 1.5rem);
  }

  .strengths__desc {
    margin-top: 0.75rem;
    font-size: 1rem;
  }

  /* SP: 背景飾りは非表示 */
  .strengths__deco {
    display: none;
  }

  /* -----------------------------------------
     SP: Access（背景SP画像・縦1カラム）
     ----------------------------------------- */

  .access {
    background-image: url("../img/access-back-sp.jpg");
  }

  .access__title {
    font-size: clamp(1.75rem, 8.5vw, 2rem);
  }

  .access__cols {
    flex-direction: column;
    gap: 3rem;
    padding-top: 10px;
  }

  .access__col {
    width: 100%;
  }

  .access__map {
    height: 240px;
  }

  .access__address {
    font-size: 0.875rem;
  }

  /* TEL/FAXを縦積みにし、ラベル幅88pxで「本社」「TEL」と番号の開始位置を揃える */
  .access__tel {
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9375rem;
  }

  .access__tel-label,
  .access__tel-item:first-child .access__tel-label {
    width: 88px;
    margin-right: 0;
  }

  /* -----------------------------------------
     SP: フッター（ナビ縦並び）
     ----------------------------------------- */

  .site-footer__inner {
    padding: 3rem 1.25rem 2.5rem;
  }

  .site-footer__logo img {
    height: 64px;
  }

  .site-footer__pagetop img {
    width: 48px;
    height: 48px;
  }

  .footer-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 1.1rem;
    font-size: 0.9375rem;
  }

  /* 採用情報→お問い合わせの順に（ボタンを先頭へ） */
  .footer-nav__list > li {
    order: 2;
  }

  .footer-nav__list > li:nth-child(2) {
    order: 0;
  }

  .footer-nav__list > li:nth-child(1) {
    order: 1;
  }

  /* 幅指定はli側に持たせる（aに固定幅を与えるとli内に
     line-height分の幽霊余白が発生しボタン間が広がるため） */
  .footer-nav__list > li:nth-child(-n + 2) {
    display: flex;
    flex-direction: column;
    width: min(260px, 80%);
    margin-inline: auto;
  }

  .footer-nav__btn {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0.65em 1em;
    font-size: 1.0625rem;
    line-height: 1.6;
    text-align: center;
  }

  /* テキストリンクは中央揃え・下線なし */
  .footer-nav__link {
    display: block;
    text-align: center;
    text-decoration: none;
  }

  .site-footer__copyright {
    height: auto;
    padding: 1em 1.25rem;
    font-size: 0.75rem;
    text-align: center;
  }

  /* -----------------------------------------
     SP: 下層ページ共通（page-fv・パンくず・見出し）
     ----------------------------------------- */

  .page-fv {
    height: 180px;
  }

  .page-fv__title {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  /* パンくずは画面幅に収め、長いタイトルは折り返す */
  .breadcrumb {
    flex-wrap: wrap;
    gap: 0.2em 0.5em;
    margin-top: 1rem;
    padding-inline: 1.25rem;
    font-size: 0.75rem;
  }

  .page-heading {
    margin-bottom: 2rem;
    padding-bottom: 0.6rem;
    font-size: clamp(1.375rem, 6vw, 1.625rem);
  }

  .page-back {
    margin-top: 3rem;
    font-size: 0.9375rem;
  }

  /* -----------------------------------------
     SP: 会社概要（ラベルを上に縦積み）
     ----------------------------------------- */

  .overview__row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding-block: 0.9rem;
    border-bottom-width: 2px;
  }

  .overview__label {
    flex: none;
    font-size: 1.125rem;
    color: #6f6f6f;
  }

  .overview__value {
    font-size: 0.9375rem;
    line-height: 1.9;
  }

  .overview__map-link {
    margin-left: 0.5em;
  }

  /* -----------------------------------------
     SP: 会社沿革（年幅を詰めて縦線位置を再計算）
     ----------------------------------------- */

  .history__item {
    gap: 1rem;
    padding-block: 0.9rem;
    border-bottom-width: 2px;
  }

  /* 年60px + gap1rem + (ドット中心6px - 線幅の半分1px) */
  .history__item::before {
    left: calc(60px + 1rem + 5px);
  }

  .history__year {
    flex-basis: 60px;
    font-size: 1.375rem;
  }

  .history__month {
    flex-basis: 40px;
    font-size: 0.875rem;
  }

  .history__text {
    font-size: 0.875rem;
    line-height: 1.7;
  }

  /* -----------------------------------------
     SP: 代表挨拶
     ----------------------------------------- */

  .message__title {
    margin-bottom: 2rem;
    padding-bottom: 0.6rem;
    font-size: clamp(1.375rem, 6vw, 1.625rem);
  }

  .message__catch {
    margin-bottom: 2rem;
    font-size: clamp(1.375rem, 6.4vw, 1.625rem);
    letter-spacing: 0.05em;
    /* 文節単位で自然に折り返す（対応ブラウザのみ・非対応時は通常折り返し） */
    word-break: auto-phrase;
  }

  .message__intro {
    font-size: 1.0625rem;
  }

  .message__body {
    margin-top: 2rem;
    font-size: 0.9375rem;
  }

  .message__body p {
    line-height: 2;
  }

  /* -----------------------------------------
     SP: プライバシーポリシー
     ----------------------------------------- */

  .privacy__body {
    font-size: 0.9375rem;
    line-height: 2;
  }

  .privacy__heading {
    margin-top: 2.25rem;
    font-size: 1rem;
  }

  .privacy__contact-row {
    gap: 1rem;
  }

  .privacy__contact-label {
    flex-basis: 4em;
  }

  /* -----------------------------------------
     SP: お問い合わせフォーム（2カラム→縦積み）
     ----------------------------------------- */

  .contact__title {
    margin-bottom: 1.5rem;
    font-size: clamp(1.5rem, 7vw, 1.75rem);
  }

  .contact__lead {
    margin-bottom: 1rem;
    font-size: 1.0625rem;
  }

  .contact__note {
    font-size: 0.8125rem;
    text-align: left;
  }

  .contact__tel {
    margin-top: 1.5rem;
  }

  .contact__tel-heading {
    font-size: 0.875rem;
  }

  .contact__tel-number {
    font-size: 1.5rem;
  }

  .contact-form {
    margin-top: 2.5rem;
  }

  .contact-form__row {
    flex-direction: column;
    gap: 2rem;
  }

  .contact-form__radios {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .contact-form__textarea {
    min-height: 150px;
  }

  .contact-form__submit {
    width: 100%;
    max-width: 320px;
    padding-block: 0.8em;
  }

  /* -----------------------------------------
     SP: お知らせ一覧・詳細
     ----------------------------------------- */

  .news-archive__heading {
    margin-bottom: 2rem;
    font-size: clamp(1.375rem, 6.5vw, 1.625rem);
  }

  .news-card__date {
    font-size: 0.875rem;
  }

  .news-card__title {
    font-size: 1.0625rem;
  }

  .news-card__excerpt {
    font-size: 0.875rem;
  }

  .pagination .nav-links {
    margin-top: 2.5rem;
    gap: 1.25rem;
    font-size: 0.9375rem;
  }

  .news-article__title {
    font-size: 1.125rem;
  }

  .news-article__body {
    font-size: 0.9375rem;
    line-height: 2;
  }
}

/* -----------------------------------------
   Recruitページ：求める人物像・募集要項
   ----------------------------------------- */

.section.recruit-persona {
  padding-block: calc(var(--space-section) * 0.6) 0;
}

/* 2カラム（左: イラスト50% / 右: リード文） */
.recruit-persona__intro {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.recruit-persona__figure {
  flex: 0 0 45%;
  margin: 0;
}

.recruit-persona__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.recruit-persona__lead {
  flex: 1;
  min-width: 0;
  font-family: var(--font-sans);
}

.recruit-persona__catch {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}

.recruit-persona__lead-text {
  margin: 1.75rem 0 0;
  font-size: 18px;
  line-height: 2;
}

/* 本文 */
.recruit-persona__body {
  margin-top: 3rem;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 2;
}

.recruit-persona__body p {
  margin: 0 0 1.5rem;
}

.recruit-persona__body p:last-child {
  margin-bottom: 0;
}

/* 募集要項 */
.section.recruit-jobs {
  padding-block: calc(var(--space-section) * 0.6);
}

.recruit-jobs__lead {
  margin: 0 0 3rem;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 2;
}

/* 募集要項カード（横長×縦3つ） */
.recruit-jobs__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.job-card {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem;
  background: #f1eeee;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}

.job-card:hover {
  opacity: 0.8;
}

.job-card__main {
  flex: 1;
  min-width: 0;
}

/* 右カラム: ロゴ画像（カード幅の約25%） */
.job-card__figure {
  flex: 0 0 25%;
  margin: 0;
}

.job-card__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* 職種名（明朝30px・左にD65B42の縦バー） */
.job-card__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
}

.job-card__title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.1em;
  background: var(--color-recruit);
}

.job-card__meta {
  margin: 0.75rem 0 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

.job-card__desc {
  margin: 0.75rem 0 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
}

/* エントリーするボタン（D65B42・角丸なし・白ゴシック20px） */
.recruit-entry {
  margin: 3.5rem 0 0;
  text-align: center;
}

.recruit-entry__btn {
  display: inline-block;
  padding: 0.4em 1.7em;
  background: var(--color-recruit);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0;
  transition: opacity 0.2s;
}

.recruit-entry__btn:hover {
  opacity: 0.85;
}

/* -----------------------------------------
   SP: Recruitページ
   ----------------------------------------- */

@media (max-width: 767px) {
  .recruit-persona__intro {
    flex-direction: column;
    gap: 1.75rem;
  }

  .recruit-persona__figure {
    flex: none;
    width: 100%;
  }

  .recruit-persona__catch {
    font-size: 1.125rem;
  }

  .recruit-persona__lead-text {
    margin-top: 1rem;
    font-size: 0.9375rem;
  }

  .recruit-persona__body {
    margin-top: 2rem;
    font-size: 0.9375rem;
  }

  .recruit-jobs__lead {
    margin-bottom: 2rem;
    font-size: 0.9375rem;
  }

  .job-card {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    padding: 1.5rem 1.25rem;
  }

  .job-card__figure {
    flex: none;
    width: 60%;
    margin-inline: auto;
  }

  .job-card__title {
    font-size: 1.375rem;
  }

  .job-card__meta {
    font-size: 0.875rem;
  }

  .job-card__desc {
    font-size: 0.875rem;
  }

  .recruit-entry {
    margin-top: 2.5rem;
  }

  .recruit-entry__btn {
    width: 100%;
    max-width: 320px;
    padding-block: 0.8em;
    box-sizing: border-box;
  }
}

/* -----------------------------------------
   Recruit詳細ページ（営業職・賃貸管理職・事務職 共通）
   ----------------------------------------- */

.section.job-detail {
  padding-block: calc(var(--space-section) * 0.6);
}

/* ロゴマーク（中央揃え・横幅600px） */
.job-detail__logo {
  margin: 0 0 4rem;
  text-align: center;
}

.job-detail__logo img {
  width: 600px;
  max-width: 100%;
  height: auto;
}

/* 職種見出し（明朝30px・左にD65B42の縦バー） */
.job-detail__title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
}

.job-detail__title::before {
  content: "";
  flex: none;
  width: 6px;
  height: 1.1em;
  background: var(--color-recruit);
}

/* リード文（ゴシック18px） */
.job-detail__lead {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 2;
}

.job-detail__lead p {
  margin: 0 0 2rem;
}

.job-detail__lead p:last-child {
  margin-bottom: 0;
}

/* 見出し付き各ブロックの間隔 */
.job-detail__section {
  margin-top: 2rem;
}

/* ■具体的な業務内容（テキスト下に1px線・少し離す） */
.job-detail__subheading {
  display: inline-block;
  margin: 3rem 0 2rem;
  padding-bottom: 0.4em;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: 2;
  border-bottom: 1px solid currentColor;
}

/* 項目名（太字18px）＋説明（16px）のリスト */
.job-detail__items {
  margin: 0;
  font-family: var(--font-sans);
}

.job-detail__items dt {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 2;
}

.job-detail__items dd {
  margin: 0;
  font-size: 16px;
  line-height: 2;
}

/* 応募要項・企業情報テーブル（999999の1px線） */
.recruit-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}

.recruit-table th,
.recruit-table td {
  border: 1px solid #999999;
}

.recruit-table th {
  width: 25%;
  padding: 1rem;
  background: #f7f7f7;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}

.recruit-table td {
  padding: 1.5rem 2rem;
  background: #fff;
  font-size: 16px;
  line-height: 2;
}

.recruit-table td p {
  margin: 0 0 1.5em;
}

.recruit-table td p:last-child {
  margin-bottom: 0;
}

.recruit-table__block-title {
  margin-bottom: 0 !important;
}

/* セル内2カラム（インセンティブ・勤務地） */
.recruit-table__cols {
  display: flex;
  gap: 2.5rem;
}

.recruit-table__col {
  flex: 1;
  min-width: 0;
}

/* インセンティブのみ: 自社案件（左）は内容が短いので狭め、
   他社販売案件（右）を左に寄せて広く取る */
.recruit-table__cols--incentive .recruit-table__col:first-child {
  flex: 0 0 30%;
}

.recruit-table__note {
  margin-top: 1em;
}

/* -----------------------------------------
   SP: Recruit詳細ページ
   ----------------------------------------- */

@media (max-width: 767px) {
  .job-detail__logo {
    margin-bottom: 2.5rem;
  }

  .job-detail__title {
    margin-bottom: 1.75rem;
    font-size: 1.375rem;
  }

  .job-detail__lead {
    font-size: 0.9375rem;
  }

  .job-detail__lead p {
    margin-bottom: 1.5rem;
  }

  .job-detail__section {
    margin-top: 3.5rem;
  }

  .job-detail__subheading {
    margin: 2rem 0 1rem;
    font-size: 1rem;
  }

  .job-detail__items dt {
    font-size: 0.875rem;
  }

  .job-detail__items dd {
    font-size: 0.875rem;
  }

  /* テーブルは見出し・内容を縦積みに */
  .recruit-table {
    display: block;
  }

  .recruit-table tbody,
  .recruit-table tr,
  .recruit-table th,
  .recruit-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .recruit-table th,
  .recruit-table td {
    margin-top: -1px;
  }

  .recruit-table th {
    padding: 0.6rem 1rem;
    font-size: 1rem;
  }

  .recruit-table td {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
  }

  .recruit-table__cols {
    flex-direction: column;
    gap: 1.25rem;
  }

  /* 縦積み時はPC用の幅30%指定（インセンティブ左列）を解除 */
  .recruit-table__cols--incentive .recruit-table__col:first-child {
    flex: none;
  }
}

/* -----------------------------------------
   スクロール出現アニメーション（.js-reveal）
   main.js が <html> に js-anim を付けたときだけ初期非表示にする
   （JS無効環境でコンテンツが隠れたままにならないためのガード）
   ----------------------------------------- */

.js-anim .js-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.js-anim .js-reveal--left {
  transform: translateX(-40px);
}

.js-anim .js-reveal--right {
  transform: translateX(40px);
}

/* 時間差表示（同時に見える要素の階段状スタガー用） */
.js-anim .js-reveal--d1 {
  transition-delay: 0.15s;
}

.js-anim .js-reveal--d2 {
  transition-delay: 0.3s;
}

.js-anim .js-reveal.is-inview {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-anim .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 移動なしのフェードのみ（transform が絶対配置の基準を変えて
   position:absolute な子要素がズレるケース用。例: strengths の Point.N） */
.js-anim .js-reveal--fade {
  transform: none;
}

/* -----------------------------------------
   FV登場シーケンス（読み込み時アニメーション）
   タイムライン: メニュー(0.2s〜) → 画像01/02(0.15s/0.3s) →
                 EN1行目(0.55s) → EN2行目(0.7s) → 日本語(0.95s) → ニュース(1.25s)
   すべて transform / opacity のみ。reduced-motion 時は即時表示
   ----------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  /* 見出し: 行ごとのマスクからせり上がる（行ラッパーがマスク） */
  .hero__line {
    display: block;
    overflow: hidden;
  }

  .hero__line-inner {
    display: block;
    animation: hero-line-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  .hero__line-inner--1 {
    animation-delay: calc(var(--fv-start) + 0.55s);
  }

  .hero__line-inner--2 {
    animation-delay: calc(var(--fv-start) + 0.7s);
  }

  .hero__line-inner--3 {
    animation-delay: calc(var(--fv-start) + 0.95s);
    animation-duration: 1s;
  }

  @keyframes hero-line-up {
    from {
      transform: translateY(110%);
    }

    to {
      transform: translateY(0);
    }
  }

  /* 人物画像: 01は上から・02は下から「ニュッ」と登場（少し行き過ぎて戻る） */
  .hero__img--01 {
    animation: hero-img-from-top 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--fv-start) + 0.15s) both;
  }

  .hero__img--02 {
    animation: hero-img-from-bottom 1.1s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--fv-start) + 0.3s) both;
  }

  @keyframes hero-img-from-top {
    0% {
      transform: translateY(-105%);
    }

    75% {
      transform: translateY(1.5%);
    }

    100% {
      transform: translateY(0);
    }
  }

  @keyframes hero-img-from-bottom {
    0% {
      transform: translateY(105%);
    }

    75% {
      transform: translateY(-1.5%);
    }

    100% {
      transform: translateY(0);
    }
  }

  /* 背景ループ: 文字・画像・ニュースの表示が終わってからふわっと現れる */
  .hero__bg {
    animation: hero-bg-fade 1.4s ease-out calc(var(--fv-start) + 2s) both;
  }

  @keyframes hero-bg-fade {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* ニュースバー・スクロールダウン: 最後にふわっと */
  .hero__news {
    animation: hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--fv-start) + 1.25s) both;
  }

  .hero__scroll {
    /* 既存の浮遊ループの前にフェードインを1回挟む */
    animation:
      hero-fade-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--fv-start) + 1.4s) both,
      scroll-float 2.6s ease-in-out calc(var(--fv-start) + 2.1s) infinite;
  }

  @keyframes hero-fade-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* グローバルメニュー: TOPのみ、上から順にフェードダウン（浮上ヘッダーは対象外） */
  body.home .site-header:not(.site-header--float) .site-nav__list > li {
    animation: hero-nav-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  body.home .site-header:not(.site-header--float) .site-nav__list > li:nth-child(1) { animation-delay: calc(var(--fv-start) + 0.2s); }
  body.home .site-header:not(.site-header--float) .site-nav__list > li:nth-child(2) { animation-delay: calc(var(--fv-start) + 0.28s); }
  body.home .site-header:not(.site-header--float) .site-nav__list > li:nth-child(3) { animation-delay: calc(var(--fv-start) + 0.36s); }
  body.home .site-header:not(.site-header--float) .site-nav__list > li:nth-child(4) { animation-delay: calc(var(--fv-start) + 0.44s); }
  body.home .site-header:not(.site-header--float) .site-nav__list > li:nth-child(5) { animation-delay: calc(var(--fv-start) + 0.52s); }
  body.home .site-header:not(.site-header--float) .site-nav__list > li:nth-child(6) { animation-delay: calc(var(--fv-start) + 0.6s); }

  @keyframes hero-nav-in {
    from {
      opacity: 0;
      transform: translateY(-12px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* -----------------------------------------
   ローディング画面（TOPのみ・front-page.php が出力）
   ロゴがマスクからせり上がり→オレンジのラインが伸び→
   カーテンが上に開いてFVシーケンス（--fv-start 起点）へつながる
   ----------------------------------------- */

/* FVシーケンスの開始時刻 = ローディングのカーテンが開き始めるタイミング */
body.home {
  --fv-start: 1.9s;
}

@media (prefers-reduced-motion: no-preference) {
  .loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: var(--color-fv-bg);
    animation: loader-hide 0.75s cubic-bezier(0.65, 0, 0.35, 1) 1.7s both;
  }

  .loader__logo-mask {
    display: block;
    overflow: hidden;
  }

  .loader__logo {
    display: block;
    width: 200px;
    height: auto;
    animation: hero-line-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
  }

  .loader__bar {
    display: block;
    width: 200px;
    height: 2px;
    margin: 1.25rem auto 0;
    background: var(--color-recruit);
    transform-origin: left center;
    animation: loader-bar 1.15s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both;
  }

  @keyframes loader-bar {
    from {
      transform: scaleX(0);
    }

    to {
      transform: scaleX(1);
    }
  }

  @keyframes loader-hide {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-101%);
      visibility: hidden;
    }
  }
}

/* 動きを減らす設定・非対応環境ではローディング画面ごと出さない */
@media (prefers-reduced-motion: reduce) {
  .loader {
    display: none;
  }
}