/* =========================================================
   RESET
========================================================= */
* {
  margin: 0;
  padding: 0;
}

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

a,
a:visited {
  color: inherit;
  text-decoration: none;
}

body {
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* WordPress標準の .post, .page (margin: 0 0 1.5em) がbodyに付与され
   フッター下に余白が生まれるのを打ち消す */
body.page,
body.post {
  margin: 0;
}

/* =========================================================
   COMMON - 全ページ共通
========================================================= */

/* スクロールバーの表示/非表示で幅が変わりガタつくのを防ぐ（TOPページのOP解除時など） */
html {
  scrollbar-gutter: stable;
}

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

@media (max-width: 767px) {
  .only-pc {
    display: none !important;
  }
}
/* 改行 */
.br_span{
display: inline-block;
}

/* =========================================================
   Header
========================================================= */
.site-header {
  background: #fff;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 60px;
}

/* ロゴ（既存画像を縮小運用） */
.site-branding img,
.site-branding .custom-logo-link img {
  width: 108px;
  height: 57px;
  object-fit: contain;
  display: block;
}

.header-nav-group {
  display: flex;
  align-items: stretch;
  height: 64px; /* SP時の高さ。PCは下記メディアクエリで75pxに */
}

@media (min-width: 768px) {
  .header-nav-group {
    height: 75px;
  }
}

/* ---------- ナビ（PC） ---------- */
.main-navigation {
  display: flex;
  align-items: center;
  height: 100%;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 0 32px;
}

.main-navigation ul.primary-menu {
  display: flex;
  align-items: center;
  gap: 60px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation ul.primary-menu li a {
  display: flex;
  align-items: center;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  padding-bottom: 4px;
}

/* PC：日本語＋英語ラベルは縦積み */
.menu-item__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* ナビ項目ホバー：下線アニメーション（PC用） */
.main-navigation ul.primary-menu li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #e88100;
  transition: width 0.3s ease, left 0.3s ease;
}

/* ホバー可能な入力機器（マウス等）のときだけ適用。タッチ操作だとタップ時に:hoverが一瞬発火し、
   下線アニメーションが中途半端な状態で見えてしまうため、SPでは無効化する */
@media (hover: hover) and (pointer: fine) {
  .main-navigation ul.primary-menu li a:hover::after {
    width: 100%;
    left: 0;
  }
}

.menu-item__jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.menu-item__en {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
  color: #e88100;
}

/* ---------- CONTACTボタン（PC） ---------- */
.header-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 8px;
  padding: 0 32px;
  background: linear-gradient(270deg, #EFC62A 2.5%, #DD670B 61.667%);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transition: filter 0.3s ease;
}

.header-cta:hover {
  filter: brightness(1.1);
}

.header-cta::before,
.header-cta::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 0;
  background: #FFC072;
  transition: width 0.4s ease;
}

.header-cta::before {
  top: 0;
  right: 0;
}

.header-cta::after {
  bottom: 0;
  left: 0;
}

.header-cta:hover::before,
.header-cta:hover::after {
  width: 100%;
}

.header-cta__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #fff;
}

.header-cta__arrow {
  width: 23px;
  height: 19px;
  flex-shrink: 0;
  color: #fff;
  transition: transform 0.3s ease;
}

.header-cta__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.header-cta:hover .header-cta__arrow {
  transform: translate(3px, -3px);
}

/* ---------- ハンバーガーボタン（PC非表示） ---------- */
.menu-toggle {
  display: none;
}

/* ---------- モバイル用CONTACTボタン（PC非表示） ---------- */
.mobile-menu-cta {
  display: none;
}


/* =========================================================
   Header - タブレット
========================================================= */
@media (max-width: 1024px) {
  .main-navigation ul.primary-menu {
    gap: 24px;
  }

  .menu-item__jp {
    font-size: 14px;
  }

  .menu-item__en {
    font-size: 12px;
  }

  .main-navigation {
    padding: 16px 20px;
  }

  .header-cta {
    padding: 17px 16px;
  }

  .header-cta__text {
    font-size: 18px;
  }
}

/* =========================================================
   Header - スマホ表示
========================================================= */
@media (max-width: 768px) {
  .site-header__inner {
    position: relative;
    padding-left: 20px;
  }

  .site-branding img {
    width: 80px;
    height: auto;
  }

  .header-cta {
    display: none;
  }

  /* ---------- ハンバーガーボタン ---------- */
  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: 12px;
    position: relative;
    z-index: 1000;
  }

  .menu-toggle__bar {
    display: block;
    width: 30px;
    height: 3px;
    background: #e88100;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .main-navigation.toggled .menu-toggle__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .main-navigation.toggled .menu-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .main-navigation.toggled .menu-toggle__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  .main-navigation {
    padding: 10px 16px;
  }

  /* ---------- 全画面メニュー ---------- */
  .main-navigation ul.primary-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    padding: 100px 20px 40px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    z-index: 999;
    list-style: none;

    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease, opacity 0.3s ease, visibility 0.4s;
  }

  .main-navigation.toggled ul.primary-menu {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .main-navigation ul.primary-menu li {
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
  }

  .main-navigation ul.primary-menu li:last-child {
    border-bottom: none;
  }

  .main-navigation ul.primary-menu li a {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 20px 24px;
    text-align: left;
  }

  .main-navigation ul.primary-menu li a::before {
    content: '';
    order: 2;
    width: 8px;
    height: 8px;
    border-top: 2px solid #e88100;
    border-right: 2px solid #e88100;
    transform: rotate(45deg);
    flex-shrink: 0;
  }

  /* スマホ：日本語＋英語ラベルは横並び */
  .menu-item__label {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .menu-item__jp,
  .menu-item__en {
    text-align: left;
  }

  .menu-item__jp {
    font-size: 18px;
  }

  .menu-item__en {
    font-size: 13px;
  }

  /* ---------- モバイル用CONTACTボタン ---------- */
  .mobile-menu-cta {
    display: flex;
    /* 常にflexにしておく */
    position: fixed;
    bottom: 40px;
    left: 20px;
    right: 20px;
    z-index: 1001;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 24px;
    background: linear-gradient(270deg, #EFC62A 2.5%, #DD670B 61.667%);
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);

    /* 閉じているときは見えない位置に */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
    pointer-events: none;
    /* 閉じている間はクリックできないように */
  }

  .main-navigation.toggled .mobile-menu-cta {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s, visibility 0s linear 0s;
    pointer-events: auto;
  }

  .mobile-menu-cta__text {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
  }
}

/* =========================================================
   Footer
========================================================= */
.site-footer {
  background: #fff;
  border-top: 5px solid transparent;
  border-image: linear-gradient(90deg, #E88100 35%, #1E693F 65%) 1;
  padding-top: 40px;
}

.site-footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 20px;
  padding-bottom: 40px;
}

/* 会社情報ブロック */
.footer-company {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  width: 743px;
}

.footer-company__logo img {
  width: 123px;
  height: 73px;
  object-fit: contain;
  display: block;
}

.footer-company__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.footer-company__name,
.footer-company__address,
.footer-company__tel {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
  margin: 0;
  line-height: 1.2;
}


.footer-company__tel {
  display: flex;
  gap: 16px;
}

.footer-company__tel p {
  margin: 0;
}

/* フッターナビ */
.footer-nav {
  border-left: 1px solid #d9d9d9;
  padding: 0 39px;
  width: 220px;
}

.footer-nav__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  padding: 0;
}

.footer-nav__list a {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-nav__list a:hover {
  color: #e88100;
}

/* コピーライト帯 */
.site-footer__copyright {
  background: #352e25;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
}

.site-footer__copyright p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin: 0;
}

/* =========================================================
   Footer - タブレット・スマホ
========================================================= */
@media (max-width: 1024px) {
  .site-footer {
    padding-top: 60px;
  }
  .site-footer__inner {
    flex-direction: column;
    align-items: center;
    padding: 0 20px 16px;
  }

  .footer-company {
    width: 100%;
    max-width: 500px;
  }

  .footer-nav {
    border-left: none;
    border-top: 1px solid #d9d9d9;
    padding: 16px 0 0;
    margin-top: 16px;
    width: 100%;
    max-width: 500px;
  }
  .footer-nav__list{
    flex-direction: row;
    justify-content: space-around;

  }
}

@media (max-width: 767px) {
  .site-footer {
    padding-top: 40px;
    /* 80px → 40px */
  }

  .site-footer__inner {
    padding: 0 20px 24px;
    /* 下部の余白も詰める */
    gap: 12px;
  }

  .footer-company {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    /* 24px → 12px */
  }

  .footer-company__logo img {
    width: 90px;
    /* 123px → 90px */
    height: auto;
  }

  .footer-company__info {
    align-items: center;
    gap: 8px;
    /* 16px → 8px */
  }

  .footer-company__name,
  .footer-company__address,
  .footer-company__tel {
    font-size: 13px;
    /* 16px → 13px */
  }

  .footer-company__tel {
    flex-direction: row;
    /* 縦積みをやめて横並びに戻す（省スペース） */
    gap: 12px;
    justify-content: center;
  }

  .footer-nav {
    border-left: none;
    border-top: 1px solid #d9d9d9;
    padding: 16px 0 0;
    /* 24px → 16px */
    margin-top: 12px;
    /* 24px → 12px */
    width: 100%;
    max-width: 500px;
  }

  .footer-nav__list {
    flex-direction: row;
    /* 縦積みをやめて横並びに */
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 20px;
    /* 縦横で余白量を変える */
  }

  .footer-nav__list a {
    font-size: 13px;
  }

  .site-footer__copyright {
    padding: 4px 0;
    /* 5px → 4px、微調整 */
  }

  .site-footer__copyright p {
    font-size: 11px;
    /* 16px → 11px */
  }
}

/* =========================================================
 Skip to content
========================================================= */
.screen-reader-text:focus {
  background-color: #333;
  color: #fff;
  padding: 10px 16px;
  top: 10px;
  left: 10px;
  border-radius: 4px;
  font-size: 13px;
  z-index: 100000;
}

/* =========================================================
   共通：サブページ用コンポーネント（about / company / service / contact で使用）
========================================================= */
.l-page {
  padding-top: 75px;
  /* 固定ヘッダー分の余白 */
}
/* =========================================================
   ヘッダー固定分の余白 - SP調整
   （各ページ本体の padding-top: 75px より後ろに置いて上書きする）
========================================================= */
@media (max-width: 767px) {
  .l-page {
    padding-top: 64px;
  }
}


/* ---------- ページヘッダー ---------- */
.page-header {
  background: #fff;
  padding: 40px 0;
  position: relative;
  overflow: hidden;
}

.page-header__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.page-header__bg img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
}

.page-header__inner {
  position: relative;
  z-index: 1;
  /* 背景画像より前面に */
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
  display: flex;
  justify-content: flex-start;
}

.page-header__label-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 10px; */
}

.page-header__vline {
  display: block;
  width: 1px;
  height: 43px;
  background: #e88100;
  transform-origin: top;
}

/* ENとJPを縦に並べるスタックボックス */
.page-header__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 8px; */
}

.page-header__en {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 120px;
  margin: 0;
  line-height: 1;
  /* 黒 → グレーへ左から右にワイプさせるための背景クリップ */
  background-image: linear-gradient(to right, #DFDFDF 50%, #352E25 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.page-header__jp {
  margin: 0;
  white-space: nowrap;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #e88100;
}

/* ---------- 共通：セクションラベル（COMPANY概要・ACCESSで使用） ---------- */
.section-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 10px; */
}

.section-label--center {
  align-items: center;
  text-align: center;
}

.section-label__vline {
  display: block;
  width: 1px;
  height: 30px;
  background: #e88100;
  transform-origin: top;
}

/* ENとJPを縦に並べるスタックボックス */
.section-label__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 8px; */
}

.section-label__en {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 80px;
  margin: 0;
  line-height: 1;
  /* 黒 → グレーへ左から右にワイプさせるための背景クリップ */
  background-image: linear-gradient(to right, #DFDFDF 50%, #352E25 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ABOUTセクションのみ：背景の波画像が色柄付きで、グラデ前半が半透明だと視認性が
   不安定になるため、その部分だけ不透明な色に置き換える（ワイプ演出はそのまま） */
.top-about .section-label__en {
  background-image: linear-gradient(to right, #DFDFDF 50%, #352E25 50%);
}

.section-label__jp {
  margin: 0;
  white-space: nowrap;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #e88100;
  /* text-shadow:
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
     0 4px 4px rgba(0, 0, 0, 0.2); */
}

/* ---------- 共通：画像の帯ワイプ演出（社長写真・TOPサービス/companyセクション等） ---------- */
.c-photo-reveal {
  position: relative;
  display: block;
  overflow: hidden;
}

.c-photo-reveal__band {
 position: absolute;
    inset: 0;
    z-index: 1;
    background: #e88100;
    max-width: 370px;
    margin: 0 auto;
  transform-origin: left;
}

.c-photo-reveal__img {
  position: relative;
  z-index: 2;
  display: block;
}

/* ---------- 共通：波状の帯ワイプ演出（画面内に入ったら左から右にクリップ解除） ---------- */
.c-wave-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s ease-out;
}

.c-wave-reveal.is-revealed {
  clip-path: inset(0 0 0 0);
}

/* ---------- 共通：矢印付きボタン（VIEW MORE・お問い合わせ等） ---------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 10px 23px;
  background: linear-gradient(270deg, #EFC62A 2.5%, #DD670B 61.667%);
  text-decoration: none;
  max-width: 250px;
  transition: filter 0.3s ease;
}

.c-btn:hover {
  filter: brightness(1.1);
}

.c-btn__label {
  padding: 10px 20px 10px 0;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}

.c-btn__arrow {
  width: 23px;
  height: 19px;
  flex-shrink: 0;
  color: #fff;
  transition: transform 0.3s ease;
}

.c-btn__arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.c-btn:hover .c-btn__arrow {
  transform: translate(3px, -3px);
}

@media (max-width: 767px) {
  .c-btn {
    gap: 14px;
    padding: 8px 16px;
  }

  .c-btn__label {
    padding: 8px 14px 8px 0;
    font-size: 16px;
  }

  .c-btn__arrow {
    width: 18px;
    height: 15px;
  }
}

/* =========================================================
   Header - OP再生中は非表示
========================================================= */
.site-header.is-op-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* =========================================================
   TOP PAGE（フロントページ）
========================================================= */
.front-page {
  background: #fff;
}

/* ---------- OP（オープニング演出） ---------- */
/* 画面に固定表示するオーバーレイとして重ね、終了時にフェードアウトして
   下にあるMVをそのまま見せる（スクロールでの境目・戻り時の静止画表示を防ぐ） */
.top-op {
  position: fixed;
  inset: 0;
  z-index: 999;
  width: 100%;
  height: 100vh; /* フォールバック（dvh未対応ブラウザ用） */
  height: 100dvh; /* Safari等のツールバー分を除いた実表示高さに追従させ、下部の要素が隠れたり中央がズレたりするのを防ぐ */
  overflow: hidden;
  background: #fff;
  transition: opacity 0.8s ease;
}

.top-op.is-done {
  opacity: 0;
  pointer-events: none;
}

/* OP表示中は本体のスクロールをロック */
body.top-op-lock {
  overflow: hidden;
}

.top-op__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 0;
}

.top-op__slide.is-active {
  opacity: 1;
}

/* OP1：ロゴ */
.top-op__slide-logo {
  background: #fff;
}

.top-op__logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* ロゴのフェードインはGSAPではなくCSSで行う。JSの読み込みを待たずに初回描画から
   表示が始まるため、FCP/LCPが早まる（遅延を入れるとその分LCPが遅れるので0にしている） */
.top-op__logo-img {
  width: 200px;
  height: auto;
  opacity: 0;
  animation: topOpLogoFade 2s cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

@keyframes topOpLogoFade {
  to {
    opacity: 1;
  }
}

.top-op__logo-caption {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  letter-spacing: 2px;
  color: #999;
  opacity: 0;
}

/* OP2：Architecture × Well-being */
.top-op__slide-concept {
  background: #FFFAF4;
}

.top-op__concept-hero {
  position: relative;
}

.top-op__concept-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  transform: translate(-50%, -57%);
  z-index: -1;
  display: none; /* 一旦非表示（再表示する場合はこの行を削除） */
}

.top-op__concept-blob svg {
  width: 100%;
  height: 100%;
}

.top-op__concept-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.top-op__concept-text {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 43px;
}

.top-op__concept-svg {
  display: block;
  height: auto;
}

.top-op__concept-svg-arch {
  width: 446px;
}

.top-op__concept-svg-well {
  width: 388px;
}

.top-op__concept-char {
  opacity: 0;
  transform: translateX(-8px);
  transform-box: fill-box;
}

.top-op__concept-tagline {
  margin: 43px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: #292929;
  opacity: 0;
}

.top-op__concept-colors {
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21px;
  opacity: 0;
}

.top-op__concept-colors__title {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 33px;
  line-height: 1;
}

.top-op__concept-colors__orange {
  color: #dd650b;
}

.top-op__concept-colors__cross {
  font-weight: 400;
  font-size: 27px;
  color: #292929;
}

.top-op__concept-colors__green {
  color: #1e693f;
}

.top-op__concept-colors__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.top-op__concept-colors__item {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: #292929;
  text-align: left;
}

/* OP：スクロールを促すヒント（全スライド共通で最前面に表示） */
.top-op__scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 40px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.top-op__scroll-hint-text {
  margin: 0;
  writing-mode: vertical-rl;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: #e88100;
  mix-blend-mode: difference;
}

.top-op__scroll-hint-line {
  position: relative;
  width: 1px;
  height: 60px;
  overflow: hidden;
}

.top-op__scroll-hint-line::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #e88100;
  mix-blend-mode: difference;
  animation: topOpScrollHint 2s infinite;
}

@keyframes topOpScrollHint {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

/* ---------- MV（メインビジュアル） ---------- */
.top-mv {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh; /* フォールバック（dvh未対応ブラウザ用） */
  height: 100dvh; /* OPと同じフルスクリーンで迫力を出す（ヘッダーは上に重ねて表示）。Safariのツールバー分の高さズレも防ぐ */
}

.top-mv__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.top-mv__slide.is-active {
  opacity: 1;
}

.top-mv__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.top-mv__copy {
  position: absolute;
  right: 0;
  bottom: 8%;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
  width: fit-content;
  max-width: 1200px;
  margin: 0px 1.2em 0 auto;
  padding: 0;
}

.top-mv__catch-group {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin: 0;
}

/* タイピング風：1文字ずつ即表示し、各文字に敷いた背景で枠が文字を追いかけて伸びる */
.top-mv__catch {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4vw, 64px);
  line-height: 1.2;
  color: #1E693F;
}

.top-mv__catch-char,
.top-mv__tagline-char {
  position: relative;
  display: inline-block;
  padding: 0.05em 0;
  white-space: pre;
  visibility: hidden; /* opacityだと文字ごとに重なりの層ができ、背景が前の文字に被るためvisibilityで出す */
}

/* 背景：全文字分を文字より奥の層に敷く（ぼかしなしの半透明白。重なると濃くなるため隣の文字と重ねない） */
.top-mv__catch-char::before,
.top-mv__tagline-char::before {
  content: "";
  position: absolute;
  inset: calc(-2px + 0.06em) 0 calc(-2px - 0.06em);
  z-index: -1;
  background: rgba(255, 255, 255, 0.75);
}

/* 行末の句読点は半角にしても字面の右に空きが残るため、その分を左に足して字面から背景端までの距離を左右で揃える（実測値） */
.top-mv__catch-char:first-child {
  padding-left: 0.32em;
}

.top-mv__tagline-char:first-child {
  padding-left: 0.27em;
}

/* 行末は必ず句読点（。、）で字面が左半分にしかないため、halt で半角幅にして左右の余白を対称にする */
.top-mv__catch-char:last-child,
.top-mv__tagline-char:last-child {
  padding-right: 0.2em;
  font-feature-settings: "halt";
}

/* カーソル：打たれた直後の文字の右端に表示 */
.top-mv__catch-char::after,
.top-mv__tagline-char::after {
  content: "";
  position: absolute;
  top: 0.2em;
  right: 0;
  bottom: 0.2em;
  width: 0.06em;
  min-width: 2px;
  background: #1E693F;
  opacity: 0;
}

.top-mv.is-visible .top-mv__catch-char {
  animation: topMvCharType 0.01s linear calc(0.3s + var(--i) * 0.12s) forwards;
}

.top-mv.is-visible .top-mv__catch-char::after {
  animation: topMvCaret 0.12s linear calc(0.3s + var(--i) * 0.12s);
}

.top-mv__tagline {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(17px, calc(2vw + 1px), 33px);
  line-height: 1.2;
  color: #1E693F;
}

.top-mv.is-visible .top-mv__tagline-char {
  animation: topMvCharType 0.01s linear calc(2.1s + var(--i) * 0.1s) forwards;
}

.top-mv.is-visible .top-mv__tagline-char::after {
  animation: topMvCaret 0.1s linear calc(2.1s + var(--i) * 0.1s);
}

/* 末尾のカーソルだけ打ち終わり後も点滅し続ける */
.top-mv.is-visible .top-mv__tagline-char:last-child::after {
  animation: topMvCaretBlink 1s steps(1, end) calc(2.1s + var(--i) * 0.1s) infinite;
}

@keyframes topMvCharType {
  to {
    visibility: visible;
  }
}

@keyframes topMvCaret {
  0%,
  100% {
    opacity: 1;
  }
}

@keyframes topMvCaretBlink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* ---------- ABOUT ---------- */
.top-about {
  position: relative;
  background: #fff;
  padding: 80px 0;
  /* 横方向だけクリップし、縦方向（MVへの食い込み）はvisibleのまま許可する。
     overflow-x:hidden はページ全体の横スクロール幅計算にも影響してしまうが、
     overflow-x:clip はスクロールコンテナを作らず見た目だけクリップするため、
     overflow-y:visible と組み合わせても横のはみ出しがページ全体の幅に影響しない */
  overflow-x: clip;
  overflow-y: visible;
}

.top-about__bg-text {
  position: absolute;
  right: 0;
  bottom: -40px;
  left: 0;
  z-index: 0;
  overflow: hidden;
  padding: 20px 0;
  pointer-events: none;
}

.top-about__bg-text-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  /* スクロール連動ではなく常に一定速度で流れ続けるだけなので、
     GSAPを使わずCSSの@keyframesだけで実現する */
  animation: topAboutMarquee 20s linear infinite;
}

/* テキストを4つ並べているうち、ちょうど半分（-50%）動いた時点で
   複製した後半分がまた同じ位置に来るため、継ぎ目なくループする */
@keyframes topAboutMarquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.top-about__bg-text-item {
  padding-right: 60px;
  font-family: 'Crimson Text', serif;
  font-weight: 700;
  font-size: 128px;
  letter-spacing: 0.2em;
  color: rgba(219, 180, 151, 0.17);
}

/* MVの写真からABOUTの白背景へなじませる帯（MV下端に少しかぶせる） */
.top-about__bg-fade {
  position: absolute;
  top: -30px;
  right: 0;
  left: 0;
  z-index: 0;
  height: 31px;
  background: linear-gradient(to bottom, transparent 0%, #fff 100%);
  pointer-events: none;
}

/* 波画像（左側） */
.top-about__bg-wave {
  position: absolute;
  top: -74px;
  left: -4px;
  z-index: 0;
  width: 90%;
  max-width: 1200px;
  pointer-events: none;
  /* クリップ境界(74px)から透明→不透明のフェードが始まるように開始位置を揃える */
  -webkit-mask-image: linear-gradient(to bottom, transparent 40px, #000 254px);
  mask-image: linear-gradient(to bottom, transparent 40px, #000 254px);
  clip-path: inset(40px 0 0 0);
  /* transform: rotate(-343deg); */
}

.top-about__bg-wave img {
  display: block;
  width: 100%;
  height: auto;
}

/* 線画（右側） */
.top-about__bg-deco {
  position: absolute;
  top: -60px; /* 帯の透明部分と同じ量だけMV側に食い込ませる */
  right: -40px;
  z-index: 0;
  width: 32%;
  max-width: 647px;
  pointer-events: none;
  /* クリップ境界(30px)から透明→不透明のフェードが始まるように開始位置を揃える */
  -webkit-mask-image: linear-gradient(to bottom, transparent 30px, #000 190px);
  mask-image: linear-gradient(to bottom, transparent 30px, #000 190px);
  /* 帯(.top-about__bg-fade)がカバーする範囲(-30px)より上にはみ出す分を切り落とす */
  clip-path: inset(30px 0 0 0);
}

.top-about__bg-deco img {
  display: block;
  width: 100%;
  height: auto;
}

.top-about__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 180px; /* Figma実測（ラベルとテキストの間隔） */
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 60px 50px;
}

/* ABOUTのラベルはFigma上で左右80pxのパディングを持つ箱の中に中央配置されている */
.top-about .section-label {
  padding: 0 80px;
}

.top-about__body {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 40px;
  max-width: 513px;
}

.top-about__lead-title {
  margin: 0 0 16px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 24px;
  color: #352e25;
}

.top-about__lead-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #292929;
}

.top-about__lead-text p {
  margin: 0;
}

.top-about__lead-text p + p {
  margin-top: 1em;
}

/* ---------- SERVICE ---------- */
/* CSS Gridの「ブレイクアウトグリッド」パターン。
   中央カラム(min(1200px, 100%-100px))はサイト共通コンテナ（content 1200px + padding 50px）と
   同じ1200px基準で頭打ちになる。左右カラムもminmax(50px, calc((100% - 1200px) / 2))にすることで、
   共通コンテナのmargin:auto＋padding:50pxの余白計算式（1440px画面で120pxになる式）と一致させている。
   写真は3列目まで跨いで画面端に届く。
   vwのcalcで手計算していた前回までの方式はこの上限がなく、ズレの原因になっていた。 */
.top-service {
  position: relative;
  z-index: 1; /* .top-service-company__bg-wave（z-index:0）より確実に前面にする */
  overflow-x: clip;
  padding: 80px 0;
}

.top-service__row {
  display: grid;
  grid-template-columns: minmax(50px, calc((100% - 1200px) / 2)) min(1200px, calc(100% - 100px)) minmax(50px, calc((100% - 1200px) / 2));
  align-items: center;
}

/* 中央カラム〜画面右端までをflexの土台にする。この中は幅が頭打ちされているので、
   固定pxのオーバーラップ（カードの右端だけ写真の左端に重ねる）を安全に使える */
.top-service__content {
  grid-column: 2 / 4;
  grid-row: 1;
  display: flex;
  align-items: center;
}

.top-service__col {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.top-service__card {
  position: relative;
  max-width: 673px;
  margin-right: -100px; /* 右の写真に少し重ねる */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
  padding: 0 60px 40px 80px; /* 右は罫線20px分を引いて合計80pxに揃える */
  min-height: 371px; /* SERVICE/COMPANYで高さを揃える（Figma準拠） */
  background: #fff;
  border-right: 20px solid #e49012;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

/* ラベルをカードのフローに含め、上パディングを0にすることでvlineをカード上端に密着させる */
.top-service__label {
  display: flex;
  justify-content: center;
}

/* 写真の上に重なるため、ABOUTと同様に単色の不透明テキストにする */
.top-service__label .section-label__en {
  background-image: linear-gradient(to right, #DFDFDF 50%, #352E25 50%);
}

.top-service__text {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.top-service__media {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden; /* パララックスで動く分の余白（scaleで拡大した分）を隠す */
}

.top-service__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10; /* 画面幅が変わっても自身の幅に比例した高さを保つ */
  max-height: 550px; /* 幅広の画面で縦に伸びすぎないよう上限を付ける */
  object-fit: cover;
  transform: scale(1.1); /* パララックス(data-speed:25px)で動かす分の余白を確保 */
}

/* SERVICE＋COMPANYをまとめて囲むラッパー。波画像はこの中で絶対配置にして
   両セクションの「下」に敷く。SERVICE/COMPANY自体は背景を透明にしてあるので、
   カード・写真などの中身がない部分は波画像がそのまま透けて見える */
.top-service-company {
  position: relative;
}

.top-service-company__bg-wave {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: 100%;
  transform: translateY(-50%);
  pointer-events: none;
}

.top-service-company__bg-wave img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- COMPANY ---------- */
.top-company {
  position: relative;
  z-index: 1; /* .top-service-company__bg-wave（z-index:0）より確実に前面にする */
  overflow-x: clip;
  padding: 80px 0;
}

.top-company__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(50px, calc((100% - 1200px) / 2)) min(1200px, calc(100% - 100px)) minmax(50px, calc((100% - 1200px) / 2));
  align-items: center;
}

/* 画面左端〜中央カラムまでをflexの土台にする（SERVICEと同じ考え方） */
.top-company__content {
  grid-column: 1 / 3;
  grid-row: 1;
  display: flex;
  align-items: center;
}

.top-company__media {
  position: relative;
  z-index: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden; /* パララックスで動く分の余白（scaleで拡大した分）を隠す */
}

.top-company__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10; /* 画面幅が変わっても自身の幅に比例した高さを保つ */
  max-height: 550px; /* 幅広の画面で縦に伸びすぎないよう上限を付ける */
  object-fit: cover;
  transform: scale(1.1); /* パララックス(data-speed:25px)で動かす分の余白を確保 */
}

.top-company__col {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.top-company__card {
  position: relative;
  max-width: 673px;
  margin-left: -100px; /* 左の写真に少し重ねる */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 32px;
  padding: 0 80px 40px 60px; /* 左は罫線20px分を引いて合計80pxに揃える */
  min-height: 371px; /* SERVICE/COMPANYで高さを揃える（Figma準拠） */
  background: #fff;
  border-left: 20px solid #e49012;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}

/* ラベルをカードのフローに含め、上パディングを0にすることでvlineをカード上端に密着させる */
.top-company__label {
  display: flex;
  justify-content: center;
}

/* 写真の上に重なるため、ABOUTと同様に単色の不透明テキストにする */
.top-company__label .section-label__en {
  background-image: linear-gradient(to right, #DFDFDF 50%, #352E25 50%);
}

.top-company__text {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* ---------- NEWS ---------- */
.top-news {
  position: relative;
  overflow-x: clip;
  background-color: #FFFFF9;
  background-image:
    linear-gradient(#ebebeb 1px, transparent 1px),
    linear-gradient(90deg, #ebebeb 1px, transparent 1px);
  background-size: 40px 40px;
  padding: 40px 0;
}

.top-news__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.top-news__filter-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.top-news__filter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 35px;
  padding: 8px 16px;
  border: 2px solid #352e25;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #352e25;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.top-news__filter-link:hover {
  background: rgba(53, 46, 37, 0.08);
}

.top-news__filter-link.is-active {
  background: #352e25;
  border-color: #352e25;
  color: #fff;
}

.top-news__list {
  width: 100%;
  max-width: 700px;

}

/* .top-news__item + .top-news__item {
  border-top: 1px solid #d9d9d9;
} */

.top-news__link {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 20px 16px;
}

.top-news__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100px;
  height: 35px;
  padding: 8px 16px;
  border: 3px solid #678e30;
  border-radius: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #678e30;
  text-align: center;
  white-space: nowrap;
}

.top-news__title {
  flex: 1 1 auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 20px;
  color: #333;
}

.top-news__arrow {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e88100;
  color: #fff;
  transition: transform 0.3s ease;
}

.top-news__arrow svg {
  display: block;
  width: 20px;
  height: 17px;
}

.top-news__link:hover .top-news__arrow {
  transform: translate(4px, -4px);
}

/* ---------- CONTACT ---------- */
.top-contact {
  position: relative;
  overflow: hidden;
  padding: 80px 40px;
}

.top-contact__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

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

.top-contact__label {
  display: flex;
  justify-content: center;
}

.top-contact__label .section-label__en {
  background-image: linear-gradient(to right, #C5BBAE 50%, #352E25 50%);
}

.top-contact__label .section-label__jp {
  color: #e88100;
}

.top-contact__panel {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 60px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  background: rgba(255, 233, 204, 0.92);
}

.top-contact__lead {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  text-align: center;
}

/* 営業時間はTELボタンの下にぶら下げるため、ボタン同士は上端揃え */
.top-contact__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 44px;
}

.top-contact__tel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #333;
}

/* TELボタンとフォームボタンは同じ幅・高さに固定して左右の大きさを揃える */
.top-contact__tel-btn,
.top-contact__btn {
  box-sizing: border-box;
  width: 355px;
  height: 69px;
  justify-content: center;
}

.top-contact__tel-btn {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 20px;
  background: #fff;
  border: 2px solid #EFC62A;
  color: #000;
}

/* 電話リンクはSPのみ有効にする */
@media (min-width: 768px) {
  .top-contact__tel-btn {
    pointer-events: none;
  }
}

.top-contact__tel-number {
  padding: 10px 15px 10px 0;
  border-right: 1px solid #EAAB22;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  white-space: nowrap;
}

.top-contact__tel-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.top-contact__tel-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.top-contact__tel-note {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

/* .c-btn の土台をそのまま使い、背景だけCONTACTボタン用のグラデーションに差し替える */
.top-contact__btn {
  background: linear-gradient(270deg, #EFC62A 2.5%, #DD670B 61.667%);
  max-width: none;
}

/* =========================================================
   TOP PAGE - タブレット・スマホ
========================================================= */
@media (max-width: 1024px) {
  .top-about {
    padding: 60px 0;
  }

  .top-about__inner {
    gap: 60px;
    padding: 60px 40px;
  }
  .top-service__card,
  .top-company__card {
    min-height: 340px;
    max-width: 500px;
  }
.top-service__card{
  padding: 0 22px 24px 32px; /* 右は罫線10px分を引いて合計32pxに揃える */
  border-right: 10px solid #e49012
}
.top-company__card{
  padding: 0 32px 24px 22px; /* 左は罫線10px分を引いて合計32pxに揃える */
  border-left: 10px solid #e49012
}
  .top-service__media img,
  .top-company__media img {
    min-height: 380px; /* SERVICE/COMPANYでカード幅が違い写真の高さがバラつくため固定 */
  }
  .top-news__inner {
    padding: 0 40px;
  }

  .top-contact__panel {
    padding: 0 40px 32px;
  }
}

@media (max-width: 767px) {
  .top-op__scroll-hint {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .top-op__scroll-hint-line {
    height: 30px;
  }

  .top-op__logo-img {
    width: 140px;
  }

  .top-op__concept-inner {
    padding: 0 20px;
  }

  .top-op__concept-blob {
    width: 275px;
    height: 275px;
  }
.top-op__concept-text{
  gap: 20px;
}
  .top-op__concept-svg-arch {
    width: 230px;
  }

  .top-op__concept-svg-well {
    width: 200px;
  }

  .top-op__concept-tagline {
    margin: 20px 0 0;
    font-size: 16px;
    line-height: 1.6;
  }

  .top-op__concept-colors {
    margin-top: 32px;
    gap: 14px;
  }

  /* PC時のタグライン:見出し:本文の比率（26:33:18）に合わせてSPも縮小 */
  .top-op__concept-colors__title {
    font-size: 20px;
  }

  .top-op__concept-colors__cross {
    font-size: 17px;
  }

  .top-op__concept-colors__list {
    gap: 6px;
    align-items: center;
  }

  .top-op__concept-colors__item {
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
  }

  .top-op__movie-icon {
    font-size: 60px;
  }

  .top-op__movie-label {
    font-size: 30px;
  }

  .top-mv__copy {
    bottom: 10%;
            margin: 0px 0 0 auto;
    padding: 0 20px;
  }

  /* セクション見出し（28px）より明確に大きくする。最長行「技術をつなぐ。」が320pxでも1行に収まる範囲で流動 */
  .top-mv__catch {
    font-size: clamp(34px, 10.5vw, 44px);
  }

  /* 最長17文字が320pxで収まる範囲で流動 */
  .top-mv__tagline {
    font-size: clamp(16px, 5vw, 20px);
  }

  /* 文字が小さく固定値-2pxの比重が増えるため、字面の上下余白が均等になるよう背景をさらに下げる（実測値） */
  .top-mv__tagline-char::before {
    inset: calc(-2px + 0.09em) 0 calc(-2px - 0.09em);
  }

  .top-about {
    padding: 60px 0;
  }

  .top-about__inner {
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0 20px;
  }

  .top-about__body {
    align-items: flex-start;
    max-width: 100%;
  }

  .top-about__lead-title {
    font-size: 19px;
  }

  .top-about__body .c-btn {
    align-self: center;
  }

  .top-about__bg-text-item {
    font-size: 60px;
  }

  .top-about__bg-deco {
            width: 50%;
        max-width: 400px;
        top: -30px;
        right: -30px;
        clip-path: none; /* 帯(-30px)と食い込み量が一致するのではみ出しなし */
  }

  .top-about__bg-wave {
            width: 130%;
        max-width: none;
        top: -30px;
        left: -30px;
        clip-path: none;
        -webkit-mask-image: linear-gradient(to bottom, transparent 15px, #000 90px);
        mask-image: linear-gradient(to bottom, transparent 15px, #000 90px);
  }

  .top-service {
    padding: 60px 0;
  }
  
  /* SPではグリッドのブレイクアウトをやめ、画像（上）→カード（下）の縦積みにする。
     カードは画像の下端に少し重なる位置（負のmargin-top）に置く */
  .top-service__row,
  .top-company__row {
    display: block;
    padding: 0 20px;
  }

  .top-service__content,
  .top-company__content {
    display: flex;
    flex-direction: column;
  }

  .top-service__media {
    order: -1; /* SERVICEはcolが先にあるDOM順だが、SPでは画像を上に見せる */
  }

  .top-service__media,
  .top-company__media {
    width: 100%;
    margin: 0;
  }

  .top-service__media img,
  .top-company__media img {
    aspect-ratio: 3 / 2;
    min-height: 0;
  }

  .top-service__col,
  .top-company__col {
    width: 100%;
  }

  .top-service__card,
  .top-company__card {
    max-width: 90%;
    margin: -48px auto 0; /* 画像の下端に少し重ねる */
    padding: 0 24px 20px;
    gap: 20px;
  }

  .top-service__card .c-btn,
  .top-company__card .c-btn {
    align-self: center;
  }

  .top-company {
    padding: 60px 0;
  }
.section-label {
  margin-bottom: 0;
}
  .top-service-company__bg-wave {
    opacity: 0.6;
  }

  .top-news {
    padding: 40px 0;
  }

  .top-news__inner {
    padding: 0 20px;
  }

  .top-news__filter-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .top-news__filter-link {
    height: 38px;
    padding: 0 18px;
    font-size: 13px;
  }

  .top-news__link {
    gap: 16px;
    padding: 16px 8px;
  }

  .top-news__title {
    font-size: 16px;
  }

  .top-news__arrow {
    width: 36px;
    height: 36px;
  }

  .top-news__arrow svg {
    width: 15px;
    height: 13px;
  }

  .top-contact {
    padding: 60px 20px;
  }

  .top-contact__panel {
    padding: 0 24px 32px;
    gap: 32px;
  }

  .top-contact__row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  /* SPでも左右（上下）のボタンを同じ大きさに揃える */
  .top-contact__tel,
  .top-contact__tel-btn,
  .top-contact__btn {
    width: 100%;
    max-width: 355px;
  }

  .top-contact__tel-btn,
  .top-contact__btn {
    height: 56px;
  }

  .top-contact__tel-btn {
    gap: 12px;
    padding: 8px 16px;
  }

  .top-contact__tel-number {
    padding: 8px 12px 8px 0;
    font-size: 22px;
  }

  .top-contact__tel-icon {
    width: 24px;
    height: 24px;
  }

  .top-contact__tel-note {
    font-size: 14px;
  }
}


/* =========================================================
   ABOUT PAGE（私たちについて）
========================================================= */

.highlight {
  padding: 0.1rem 0.3rem;
  background-image: linear-gradient(0deg, #fff187d9 0.5em, transparent 0.5em);
  background-repeat: no-repeat;
  background-position: left bottom;
}

/* 緑色のマーカー線バリエーション（PHILOSOPHYセクションの一部で使用） */
.highlight-green {
  background-image: linear-gradient(0deg, #D4F2B9 0.5em, transparent 0.5em);
}

/* JS実行後は静的な下線を非表示にし、スクロール連動の描画演出に切り替える */
.has-highlight-anim .highlight {
  background-image: none;
}

/* スクロールに応じて左から伸びるマーカー線（highlight__strokeはJSで挿入） */
.highlight__stroke {
  position: absolute;
  width: 0;
  background-color: #fff187d9;
  pointer-events: none;
  z-index: -1;
}

.highlight__stroke.highlight-green {
  background-color: #D4F2B9;
}

/* 線を描くペン先アイコン（highlight__penはJSで挿入） */
/* 文字と重ならないよう、線の下側（次の行との余白）に配置する */
.highlight__pen {
  position: absolute;
  width: 28px;
  height: 28px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transform: rotate(-18deg);
  transform-origin: center;
}

.highlight__pen svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .highlight__pen {
    display: none;
  }
}

/* ---------- PHILOSOPHY セクション ---------- */
.about-philosophy {
  background: #fff;
  padding: 80px 0;
}

.about-philosophy__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.about-philosophy .section-label {
  margin-bottom: 40px;
}

.about-philosophy__lead {
  padding: 0 80px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 2.5;
  color: #333;
  text-align: center;
}

.about-philosophy__lead strong {
  font-weight: 700;
}

.about-philosophy__lead-accent {
  color: #1e693f;
}

.about-philosophy__lead-accent-orange {
  color: #e88100;
}

/* ---------- POLICY セクション ---------- */
.about-policy {
  background: #fffaf4;
  padding: 80px 0;
}

.about-policy__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.about-policy .section-label {
  margin-bottom: 40px;
}

.about-policy__quote {
  padding: 0 80px;
  margin-bottom: 40px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  text-align: center;
}

.about-policy__quote-accent {
  font-weight: 700;
  font-size: 28px;
  color: #dd650b;
}

.about-policy__quote-body {
  display: block;
  margin-top: 20px;
}

.about-policy__cards {
  display: flex;
  justify-content: center;
  gap: 41px;
}

.about-policy__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 205px;
  padding: 20px;
  background: #fffde2;
  border: 3px solid #e88102;
  box-sizing: border-box;
}

.about-policy__card-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

.about-policy__card-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.about-policy__card-icon img:last-child {
  left: 2px;
}
.about-policy__card-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  text-align: center;
  margin: 0;
}

.about-policy__card-text-accent {
  font-weight: 700;
  font-size: 24px;
  color: #e88102;
}

/* ---------- ACTION セクション ---------- */
.about-action {
  background: #fff;
  padding: 80px 0;
}

.about-action__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.about-action .section-label {
  margin-bottom: 40px;
}

.about-action__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 0 80px;
}

.about-action__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 40px;
  background: #fffde2;
  border: 3px solid #e88102;
  box-sizing: border-box;
}

.about-action__item-icon {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 25px;
  height: 25px;
}

.about-action__item-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-action__item-icon img:last-child {
  left: 2px;
}

.about-action__item-text {
  flex: 1;
  min-width: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

/* ---------- ORGANIZATION セクション ---------- */
.about-organization {
  background: #fffaf4;
  padding: 80px 0;
}

.about-organization__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.about-organization .section-label {
  margin-bottom: 40px;
}

/* 組織図 */
.org-chart {
  max-width: 1001px;
  margin: 0 auto 80px;
}

.org-chart__board {
  /* .org-chart__dept-bar と同じ幅になるよう、4カラム・gap27pxの1カラム分を算出 */
  width: calc((100% - 81px) / 4);
  margin: 0 auto;
  background: #e88100;
  color: #fff;
  text-align: center;
  padding: 20px 10px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  box-sizing: border-box;
}

.org-chart__board-line {
  display: block;
  width: 1px;
  height: 41px;
  background: #333;
  margin: 0 auto -1px;
}

.org-chart__depts {
  position: relative;
  display: flex;
  gap: 27px;
  padding-top: 0;
}

.org-chart__depts::before {
  content: '';
  position: absolute;
  top: 0;
  /* 4カラム・gap27px×3の中央同士を結ぶ位置（コンテナ幅が1001px未満に縮んでも追従） */
  left: calc((100% - 81px) / 8);
  right: calc((100% - 81px) / 8);
  height: 1px;
  background: #333;
}

.org-chart__dept {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.org-chart__dept-line {
  display: block;
  width: 1px;
  height: 41px;
  margin-top: 0;
  background: #333;
}

.org-chart__dept-box {
  width: 100%;
  box-sizing: border-box;
}

.org-chart__dept-bar {
  display: block;
  width: 100%;
  text-align: center;
  padding: 20px 10px;
  background: #1e693f;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  border: 0;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  cursor: default;
  position: relative;
}

.org-chart__dept-toggle {
  display: none;
}

.org-chart__dept-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
  margin: 0;
  padding: 16px 8px;
  background: #eaf2de;
  list-style: none;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #333;
  text-align: center;
  box-sizing: border-box;
}

/* 部署ミッション */
.org-mission {
  /* .org-chart と横幅を揃える */
  max-width: 1001px;
  margin: 0 auto;
}

.org-mission__group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 80px;
}

.org-mission__group+.org-mission__group {
  margin-top: 80px;
}

.org-mission__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #333;
  text-align: center;
  margin: 0;
}

.org-mission__arrow {
  display: block;
  width: 0;
  height: 0;
  margin: 0 auto;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 19px solid #4d9636;
}

.org-mission__items {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.org-mission__item {
  display: flex;
  align-items: stretch;
  background: #eaf2de;
  box-sizing: border-box;
}

.org-mission__badge {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 230px;
  text-align: center;
  padding: 20px 10px;
  background: #4d9636;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  box-sizing: border-box;
}

.org-mission__text {
  display: flex;
  align-items: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 10px 20px 10px 80px;
}

/* =========================================================
   ABOUT PAGE - タブレット・スマホ
========================================================= */
@media (max-width: 1024px) {

  .about-philosophy__inner,
  .about-policy__inner,
  .about-action__inner,
  .about-organization__inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .about-philosophy__lead,
  .about-policy__quote,
  .about-action__list {
    padding-left: 0;
    padding-right: 0;
  }

  .org-mission__badge {
    width: 190px;
  }

  /* タブレット幅ではPC用の強制改行(only-pc)を無効化し、自動折り返しに任せる */
  .org-mission__text br.only-pc,
  .about-philosophy__lead br.only-pc {
    display: none;
  }
}

@media (max-width: 767px) {
  .about-philosophy__lead {
    font-size: 20px;
    line-height: 2.2;
  }

  .about-policy__cards {
    flex-direction: column;
    align-items: center;
  }

  .about-action__item {
    width: 100%;
    min-height: 112px;
    padding: 16px;
  }

  /* 組織図 → 取締役会を左、部署をアコーディオンで右に並べる横型ツリー */
  .org-chart {
    display: flex;
    align-items: flex-start;
  }

  .org-chart__board {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 110px;
    height: 54px;
    white-space: nowrap;
  }

  .org-chart__board-line {
    display: block;
    flex-shrink: 0;
    width: 20px;
    height: 1px;
    margin: 27px 0 0;
  }

  .org-chart__depts {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    padding-top: 0;
  }

  .org-chart__depts::before {
    display: none;
  }

  .org-chart__dept-line {
    display: none;
  }

  .org-chart__dept {
    margin-left: 20px;
  }

  /* トランク：各カード自身の高さ分だけ伸びる縦線を数珠つなぎにする（最後のカードの開閉に影響されない） */
  .org-chart__dept:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 27px;
    left: -20px;
    bottom: -35px;
    width: 1px;
    background: #333;
  }

  .org-chart__dept:last-child::before {
   display: none;
  }

  .org-chart__dept-bar {
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 54px;
    text-align: left;
    padding: 0 48px 0 20px;
    border: 0;
  }

  .org-chart__dept-bar::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -20px;
    width: 20px;
    height: 1px;
    background: #333;
  }

  .org-chart__dept-list {
    text-align: left;
    padding-left: 20px;
  }

  .org-chart__dept-toggle {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
  }

  .org-chart__dept-toggle::before,
  .org-chart__dept-toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
  }

  .org-chart__dept-toggle::before {
    width: 100%;
    height: 2px;
  }

  .org-chart__dept-toggle::after {
    width: 2px;
    height: 100%;
    transition: transform 0.2s ease;
  }

  .org-chart__dept.is-open .org-chart__dept-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
  }

  .org-chart__dept-list {
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }

  .org-chart__dept.is-open .org-chart__dept-list {
    max-height: 300px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .org-mission__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .org-mission__badge {
    width: 100%;
  }

  .org-mission__text {
    padding: 0 16px 16px;
  }

  .about-philosophy,
  .about-policy,
  .about-action,
  .about-organization {
    padding: 40px 0;
  }

  .about-philosophy__inner,
  .about-policy__inner,
  .about-action__inner,
  .about-organization__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .about-policy__quote {
    font-size: 16px;
  }

  /* PCではlead(28px)と同格の28pxなので、SPも.about-philosophy__leadと同じ20pxに揃える */
  .about-policy__quote-accent {
    font-size: 20px;
  }

  .about-policy__card {
    width: 100%;
    padding: 16px;
  }

  .about-policy__card-text {
    font-size: 16px;
  }

  .about-policy__card-text-accent {
    font-size: 18px;
  }

  .about-action__item-text {
    font-size: 16px;
  }

  .org-chart__board,
  .org-chart__dept-bar {
    font-size: 16px;
  }

  .org-chart__dept-list {
    font-size: 14px;
  }

  .org-mission__title {
    font-size: 18px;
  }

  .org-mission__text {
    font-size: 14px;
  }

  /* PCでは.org-chart__board等と同じ役割・同じ20pxなので、SPも同じ比率(16px)に揃える */
  .org-mission__badge {
    font-size: 16px;
  }

  .org-mission__group {
    padding-top: 40px;
  }

  .org-mission__group+.org-mission__group {
    margin-top: 40px;
  }
}
/* =========================================================
   SERVICE PAGE（事業内容）
========================================================= */

/* ---------- 生産設計とは？ セクションタイトル ---------- */
.service-intro {
  background: #fff;
  padding: 80px 0 0;
}

.service-intro__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.service-intro--flow {
  background: #fffaf4;
}

/* ---------- 役割セクション ---------- */
.service-roles {
  background: #fff;
  padding: 40px 0 80px;
}

.service-roles__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.service-role + .service-role {
  margin-top: 60px;
}

.service-role__heading {
  display: flex;
  width: fit-content;
  margin: 0 0 40px;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  text-align: center;
}

.service-role__heading-num {
  padding: 10px 10px 10px 20px;
  background: #352e25;
}

.service-role__heading-text {
  padding: 10px 20px 10px 10px;
  background: #4c412f;
}

.service-role__row {
  display: grid;
  grid-template-columns: 214.59fr 104px 340.5fr 104px 225.5fr;
  align-items: center;
  gap: 40px;
  min-height: 250px; /* Figma準拠で役割①〜⑤の行高さを揃える（中身が多い場合ははみ出さず伸びるようmin-heightで指定） */
}

.service-role__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
  min-width: 0; /* fr列がボタン等の中身の最小幅で広がり、他の行と矢印位置がズレるのを防ぐ */
}

/* Figma実測でgapが40pxと異なる項目の個別調整（8/16の型に丸め） */
.service-role__item--gap-0 {
  gap: 0;
}

.service-role__item--gap-8 {
  gap: 8px;
}

.service-role__item--gap-16 {
  gap: 16px;
}

.service-role__illustration,
.service-role__photo {
  display: block;
  margin: 0 auto;
  height: auto;
}

.service-role__arrow {
  justify-self: center;
  width: 104px;
  height: auto;
}

/* 役割④の街並み画像：Figma準拠で列幅(226px)から左右に約37pxずつはみ出させて横長に見せる。
   列幅＋75pxで指定し、画面を縮めても矢印側へのはみ出し量が一定になるようにする（最大はFigmaの300px）。
   共通の margin: 0 auto のままだと、はみ出した要素はautoが0扱いになり右にしかはみ出さないため、左右に負のmarginを付けて両側へ均等に出す */
.service-role__illustration--wide {
  width: calc(100% + 75px);
  max-width: 300px;
  margin: 0 -37.5px;
}

.service-role__illustration-wrap {
  position: relative;
  display: inline-block;
  width: 175px;
  height: 204px;
  padding: 0;
}

.service-role__illustration-wrap .service-role__illustration {
  width: 175px;
  height: 204px;
}

.service-role__info-btn {
  position: absolute;
  /* %指定で画像自体のスケールに追従させる（pxだと画像縮小時にズレる） */
  top: 34%;
  left: 68%;
  transform: translate(-50%, -50%);
  line-height: 0;
  pointer-events: none;
}

.service-role__info-btn img {
  display: block;
}

.service-role__tags {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.service-role__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 180px;
  padding: 10px;
  background: #e88100;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  text-align: center;
  box-sizing: border-box;
}

.service-role__tag.flow-info-btn {
  background: #e88100;
}

.service-role__caption {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

.service-role__caption-sm {
  font-size: 20px;
}

.service-role__caption-lg {
  font-size: 24px;
}

/* 役割③の2行キャプションはFigmaが行間normal（24px→29px/行）。1.6のままだと行が約270pxに伸びて250pxを超えるため詰める */
.service-role__caption--tight {
  line-height: 1.2;
}

/* ---------- 役割3-1：アイコン＋テキストの一覧 ---------- */
.service-role__icon-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.service-role__icon-row {
  display: flex;
  align-items: center;
  gap: 0;
}

/* 役割5（建物の安全性／サステナビリティ）はFigma実測でアイコンとテキストの間が24px */
.service-role__icon-row--gap-24 {
  gap: 24px;
}

.service-role__icon-row img {
  flex-shrink: 0;
}

.service-role__icon-row span {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #333;
}

/* ---------- 役割4：1・2つ目を背景色でグループ化 ---------- */
/* 役割1〜3と同じ5列グリッドを使い、矢印の位置を縦に揃える */
.service-role__row--split {
  display: grid;
  grid-template-columns: 214.59fr 104px 340.5fr 104px 225.5fr;
  align-items: center;
  gap: 40px;
}

.service-role__group {
  grid-column: 1 / span 3;
  align-self: stretch;
  display: grid;
  grid-template-columns: 214.59fr 104px 340.5fr;
  align-items: center;
  gap: 40px;
  padding: 0 48px; /* 上下は行のmin-height(250px)にstretchさせて背景の高さをFigmaの250pxに合わせる */
  border-radius: 16px;
  container-type: inline-size; /* 下記の画像サイズ計算(cqi)の基準にする */
}

/* 左列は右列より狭く、画面を縮めると左の画像だけ先に縮んで大きさが揃わなくなるため、
   左列の幅（＝(グループ内幅 - 矢印104px - gap40px×2) × 214.59/555.09）を基準に両方の画像サイズを揃える */
.service-role__group .service-role__illustration {
  width: min(157px, calc((100cqi - 184px) * 0.3866));
}

.service-role__group--highlight {
  background: #fbeddb;
}

/* ---------- 役割5：アイコンリスト＋写真を横並び ---------- */
/* 矢印は役割1〜3の1本目と同じ列（2列目）に揃え、2つ目のitemは3〜5列目に収める */
.service-role__item--split {
  grid-column: 3 / -1;
  justify-self: start;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

/* =========================================================
   SERVICE PAGE - タブレット・スマホ
========================================================= */
@media (max-width: 1024px) {
  .service-intro,
  .service-roles__inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* 矢印を固定104pxのままにするとコンテンツ列が圧迫されて文字が縦積みになるため縮小 */
  .service-role__row,
  .service-role__row--split {
    grid-template-columns: 214.59fr 50px 340.5fr 50px 225.5fr;
  }

  .service-role__group {
    grid-template-columns: 214.59fr 50px 340.5fr;
  }

  .service-role__group .service-role__illustration {
    width: min(157px, calc((100cqi - 130px) * 0.3866)); /* 矢印列が50pxになる分を差し替え */
  }

  .service-role__arrow {
    width: 50px;
  }
}

@media (max-width: 767px) {
  .service-intro,
  .service-roles__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .service-intro {
    padding-top: 32px;
  }

  .service-roles {
    padding-top: 24px;
    padding-bottom: 32px;
  }

  .service-role + .service-role {
    margin-top: 32px;
  }

  .service-role__heading {
    width: auto;
    margin: 0 auto 20px;
    text-align: left;
    justify-self: center;
  }
.service-role__heading-num {
text-align: center;
}
  .service-role__row {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 16px;
    min-height: 0;
  }

  .service-role__item {
    gap: 16px;
  }

  .service-role__tags {
    gap: 16px;
  }

  .service-role__arrow {
    width: 40px;
    transform: rotate(90deg);
  }

  .service-role__row--split {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .service-role__group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 24px;
  }

  .service-role__group .service-role__illustration {
    width: 157px; /* 縦並びでは列幅の計算が不要なのでFigmaのサイズに戻す（autoだと高解像度化した画像の実寸で表示されてしまう） */
  }

  /* 役割③の--sp-smと高さを揃える（175×204の縦横比を維持） */
  .service-role__illustration-wrap,
  .service-role__illustration-wrap .service-role__illustration {
    width: 120px;
    height: 140px;
  }

  .service-role__illustration--sp-sm {
    width: auto;
    max-width: 100%;
    max-height: 140px; /* SPで大きく見えるため高さ基準で縮小（縦横比は維持） */
  }

  .service-role__illustration--wide {
    width: 300px;
    max-width: 100%; /* 縦並びでははみ出させる必要がないので画面幅に収める */
    margin: 0 auto;
  }

  .service-role__item--split {
    justify-self: unset;
    flex-direction: column;
    gap: 16px;
  }

  .service-role__heading {
    font-size: 18px;
  }

  .service-role__tag {
    font-size: 20px;
  }

  .service-role__caption {
    font-size: 16px;
  }

  .service-role__caption-lg {
    font-size: 18px;
  }

  .service-role__icon-row span {
    font-size: 18px;
  }
}

/* =========================================================
   SERVICE PAGE - 生産設計の流れ
========================================================= */

.service-flow {
  background: #fffaf4;
  padding: 80px 0;
}

.service-flow__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

/* ---------- 生産設計の流れ - 3レーン図 ---------- */
.flow-diagram {
  display: grid;
  grid-template-columns: 230px 25px 1fr;
  grid-template-rows: auto;
  max-width: 1116px;
  margin: 0 auto;
}

.flow-actor {
  position: relative;
  grid-column: 1;
  grid-row: 1;
}

.flow-actor-designer {
  align-self: start;
  /* 生産設計ヘッダー分（border4px + head40px + margin16px）だけ下げて①読み解くと上端を揃える */
  margin-top: 60px;
}

.flow-actor-builder {
  align-self: end;
  /* 生産設計の枠内余白分（padding16px + border4px）だけ上げて⑤つなぐと下端を揃える */
  margin-bottom: 20px;
}

.flow-actor__avatar {
  position: absolute;
  top: -24px;
  left: -10px;
  z-index: 2;
  border-radius: 50%;
}

.flow-actor__head {
  background: #e88100;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  padding: 8px;
  margin: 0;
  border-radius: 8px 8px 0 0;
}

.flow-actor__body {
  height: 200px;
  box-sizing: border-box;
  border: 4px solid #e88100;
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 5px;
  background-color: #fff;
}

.flow-actor__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.flow-actor__text-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0;
}

/* 矢印（共通・1つの三角シェイプをmask-image + currentColorで塗り分けて使い回す） */
.flow-arrow {
  display: block;
  /* SVGの比率（21:34）に合わせた右向き▶のサイズ。下向き・左向きは回転で使い回す */
  width: 27px;
  height: 43px;
  justify-self: center;
  align-self: center;
  background-color: currentColor;
  -webkit-mask-image: url('../images/icon_service-flow-arrow.svg');
  mask-image: url('../images/icon_service-flow-arrow.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.flow-arrow-left {
  transform: rotate(180deg);
}

.flow-arrow-down {
  transform: rotate(90deg);
}

/* 矢印の色（指す先のステップ/枠の色に合わせる） */
.flow-arrow-to-read       { color: #e88100; }
.flow-arrow-to-think      { color: #61a246; }
.flow-arrow-to-summarize  { color: #569845; }
.flow-arrow-to-draw       { color: #4b8f44; }
.flow-arrow-to-connect    { color: #3f8642; }
.flow-arrow-to-builder    { color: #347c41; }

/* 設計者・施工者 ⇔ 生産設計の矢印。左枠線を消した部分へ先端を差し込むため右へはみ出させ、
   後続の.flow-production（position:relative）より前面に出す */
.flow-arrow-d2p,
.flow-arrow-p2b {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin-right: -10px;
}

/* 設計者の枠本体（上60px + head40px + body200pxの中央）に▶の中心を合わせる。
   ▶は底辺側に重心があり設計者寄りに見えるため、◀（施工者側）と左右対称になるよう右へ寄せる */
.flow-arrow-d2p {
  align-self: start;
  margin-top: 179px;
  margin-right: -21px;
}

/* 施工者の枠本体（下20px + body200pxの中央）に◀の中心を合わせる */
.flow-arrow-p2b {
  align-self: end;
  margin-bottom: 99px;
}

/* ---------- 生産設計 外枠 ---------- */
.flow-production {
  position: relative;
  grid-column: 3;
  grid-row: 1;
  border: 4px solid #1e693f;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 16px 25px;
  background-color: #fff;
}

/* 左枠線の中央部分だけを背景色の帯で覆って消す（上下の角まわりは残す）。
   top/bottomは設計者の見出し下〜施工者の枠下寄りに合わせた固定値 */
.flow-production::before {
  content: '';
  position: absolute;
  top: 99px;
  bottom: 63px;
  left: -4px;
  width: 4px;
  background-color: #fffaf4; /* .service-flowの背景色と揃える */
}

/* アイコン＋文字をひとまとまりで中央揃え */
.flow-production__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1e693f;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  padding: 8px;
  margin: -16px -25px 16px;
}

/* 67pxのアイコンが見出し高さを押し広げないよう上下をネガティブマージンで相殺
   （上に27pxはみ出し、下端は見出しの下端に揃う） */
.flow-production__avatar {
  position: relative;
  margin: -35px 0 -8px;
  border-radius: 50%;
  z-index: 2;
  flex-shrink: 0;
}

.flow-production__body {
  display: grid;
  grid-template-columns: 1fr 50px 1fr 50px 1fr;
  grid-template-rows: auto 36px auto;
}

.flow-production__body > .flow-arrow:nth-of-type(1) { grid-column: 2; grid-row: 1; }
.flow-production__body > .flow-arrow:nth-of-type(2) { grid-column: 4; grid-row: 1; }
.flow-production__body > .flow-arrow:nth-of-type(3) { grid-column: 5; grid-row: 2; }
.flow-production__body > .flow-arrow:nth-of-type(4) { grid-column: 2; grid-row: 3; }

/* 横向きの矢印はカード全体ではなく本体（.flow-card__body）の高さの中央に合わせる。
   見出し40px分を上マージンで除外して残りの中央に置く（SPでは.flow-arrowのmarginで上書き） */
.flow-arrow-to-think,
.flow-arrow-to-summarize,
.flow-arrow-to-connect {
  margin-top: 40px;
}

.flow-card {
  display: flex;
  flex-direction: column;
}

.flow-card-read      { grid-column: 1;     grid-row: 1; }
.flow-card-think     { grid-column: 3;     grid-row: 1; }
.flow-card-summarize { grid-column: 5;     grid-row: 1; }
.flow-card-connect   { grid-column: 1;     grid-row: 3; }
.flow-card-draw      { grid-column: 3 / 6; grid-row: 3; }

.flow-card__head {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  color: #fff;
  text-align: center;
  padding: 8px;
  margin: 0;
  border-radius: 8px 8px 0 0;
}

.flow-card-read .flow-card__head      { background: #61a246; }
.flow-card-think .flow-card__head     { background: #569845; }
.flow-card-summarize .flow-card__head { background: #4b8f44; }
.flow-card-draw .flow-card__head      { background: #3f8642; }
.flow-card-connect .flow-card__head   { background: #347c41; }

.flow-card__body {
  height: 197px;
  box-sizing: border-box;
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 20px 8px;
  background-color: #eaf2de;
}

.flow-card__pic {
  display: block;
}

.flow-card__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.flow-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 151px;
  background: #f5c68d;
  color: #333;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 17px;
  text-align: center;
  line-height: 1.4;
  padding: 12px 14px;
  box-sizing: border-box;
}

/* 生産設計内のバッジは白背景＋カード色の枠（.flow-info-btnのborder:0より詳細度が高いのでここで上書き） */
.flow-card-think .flow-card__badge,
.flow-card-summarize .flow-card__badge,
.flow-card-draw .flow-card__badge {
  background: #fff;
  border: 3px solid;
  color: #1e693f;
}

.flow-card-think .flow-card__badge     { border-color: #569845; }
.flow-card-summarize .flow-card__badge { border-color: #4b8f44; }
.flow-card-draw .flow-card__badge      { border-color: #3f8642; }

.flow-info-btn {
  margin: 0;
  border: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  border-radius: 0;
  background: #FFF
}

.flow-info-btn:hover {
  opacity: 0.75;
}

.flow-info-btn img {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.flow-card__body-split {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: 16px;
}

.flow-card__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 146px;
}

.flow-card__divider {
  width: 1px;
  align-self: stretch;
  background: rgba(51, 51, 51, 0.2);
}

/* ---------- 情報モーダル ---------- */
.c-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  box-sizing: border-box;
  padding: 20px;
  overflow: auto; /* ブラウザ拡大で枠が画面からはみ出した場合も上下左右にスクロールして見られるようにする */
}

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

.c-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.c-modal__panel {
  position: relative;
  flex-shrink: 0;
  margin: auto; /* 中央寄せ（はみ出した時は左上起点になり、スクロールで端まで届く） */
  background: #fff;
  max-width: 1100px;
  width: 100%; /* 開いた時点の画面に収まる幅をJSで上書きする */
  box-sizing: border-box;
  padding: 40px;
}

.c-modal__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  color: #333;
  cursor: pointer;
}

.c-modal__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 297 / 210; /* 図面（A4横）の比率 */
  object-fit: contain;
}

.c-modal__img-wrap {
  position: relative;
}

/* PCは図面クリックでも拡大表示する */
@media (min-width: 768px) {
  .c-modal__img {
    cursor: zoom-in;
  }
}

.c-modal__zoom-btn {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(53, 46, 37, 0.8);
  color: #fff;
  cursor: pointer;
}

/* 拡大表示：図面を原寸で表示し、上下左右にスクロールして見る */
.c-modal__zoom {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: none;
  overflow: auto;
  background: #fff;
}

.c-modal__zoom.is-open {
  display: block;
}

.c-modal__zoom-img {
  display: block;
  width: 2000px;
  max-width: none;
  height: auto;
  margin: 0 auto;
  cursor: zoom-out;
}

.c-modal__zoom-close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(53, 46, 37, 0.8);
  font-size: 28px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

/* タイトル（左）とページャー（左右中央）を同じ上下中央に並べる */
.c-modal__meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 16px 0 0;
}

.c-modal__title {
  justify-self: start;
  margin: 0; /* テーマのp用マージンを打ち消す */
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start; /* JSで最小高さを揃えた時に、短いタイトルが縦中央へずれないよう上に寄せる */
  align-items: center;
  gap: 4px 12px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: #333;
}

.c-modal__title-label {
  padding: 6px 12px;
  background: #352E25;
  color: #fff;
  border-radius: 3px;
}

.c-modal__title-sub:empty {
  display: none;
}

.c-modal__pager {
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.c-modal__text {
  margin: 16px 0 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: #333;
  white-space: pre-line; /* 原稿（MODAL_DATA）の \n で改行する */
}

.c-modal__pager-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #352E25;
  border-radius: 50%;
  background: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  line-height: 1;
  color: #333;
  cursor: pointer;
}

.c-modal__pager-btn.is-active {
  background: #352E25;
  color: #fff;
}

/* =========================================================
   SERVICE PAGE - 生産設計の流れ - タブレット・スマホ
========================================================= */
@media (max-width: 1240px) {
  .flow-diagram {
    grid-template-columns: 180px 25px 1fr;
  }

  /* 折り返しで縦にあふれても枠内に収まるよう最小高さ方式に変更 */
  .flow-card__body,
  .flow-actor__body {
    height: auto;
    min-height: 190px;
    gap: 8px;
  }
.flow-actor__avatar {
      left: -22px;
}
  .flow-card__badge {
    width: auto;
    font-size: 14px;
    padding: 8px 10px;
  }

  .flow-card__text,
  .flow-actor__text {
    font-size: 14px;
  }

  .flow-card__col {
    width: 130px;
  }

  /* 矢印カラムを縮小 */
  .flow-production__body {
    grid-template-columns: 1fr 36px 1fr 36px 1fr;
  }

  .flow-arrow {
    width: 20px;
    height: 32px;
  }
}

/* 左右paddingは他セクション（.service-roles__inner）と同じ段階で揃える */
@media (max-width: 1024px) {
  .service-flow__inner {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (max-width: 850px) {
  .flow-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 450px;
  }

  .flow-diagram > * {
    align-self: center;
  }

  .flow-arrow-d2p,
  .flow-arrow-p2b {
    margin-top: 0;
    margin-bottom: 0;
  }

  .flow-actor-designer {
    margin-top: 0;
  }

  .flow-actor-builder {
    margin-bottom: 0;
  }

  .flow-actor,
  .flow-production {
    width: 100%;
  }

  /* 縦積みでは左右の矢印がないため左枠線は通常どおり表示する */
  .flow-production {
    padding: 16px;
  }

  .flow-production::before {
    display: none;
  }

  .flow-production__head {
    margin: -16px -16px 24px;
  }

  /* 生産設計と同じく、アイコン＋文字をひとまとまりで中央揃え（PCは左上の絶対配置のまま） */
  .flow-actor__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .flow-actor__avatar {
    position: relative;
    top: auto;
    left: auto;
    margin: -35px 0 -8px;
    flex-shrink: 0;
  }

  /* aboutの▼（幅22×高さ19）とサイズを揃える。90deg回転で▼にしているため
     width＝見た目の高さ、height＝見た目の幅になる。
     ▼と上下の枠の間隔はこのmarginで調整 */
  .flow-arrow {
    width: 19px;
    height: 22px;
    margin: 16px 0;
  }

  .flow-actor__body,
  .flow-card__body {
    height: auto;
    min-height: 200px;
    justify-content: center;
  }

  .flow-production__body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .flow-card {
    width: 100%;
  }

  .flow-arrow-right,
  .flow-arrow-left,
  .flow-arrow-down {
    transform: rotate(90deg);
  }

  .flow-card__text {
    font-size: 14px;
  }

  .flow-card__body-split {
    gap: 8px;
    flex-direction: row-reverse; /* 縦積みでは左：施工図／右：製作図にする */
  }

  .flow-card__col {
    width: auto;
    flex: 1;
  }

  /* 縦積みでは❸→❹描く→❺つなぐの順にする（PCのグリッド配置はそのまま） */
  .flow-arrow-to-connect {
    order: 1;
  }

  .flow-card-connect {
    order: 2;
  }

  .c-modal__panel {
    padding: 24px;
  }
}

@media (max-width: 767px) {
  .service-flow {
    padding: 40px 0;
  }

  .service-flow__inner {
    padding: 0 20px;
  }

  /* スマホは指で拡大できるので虫眼鏡は出さない */
  .c-modal__zoom-btn {
    display: none;
  }

  /* 図面上の横スワイプは切り替えに使う（縦スクロール・ピンチ拡大はそのまま効かせる） */
  .c-modal__img {
    touch-action: pan-y pinch-zoom;
  }

  /* ×ボタン（上8px＋高さ32px）が図面に重ならないよう、図面を×の下まで下げる */
  .c-modal__panel {
    padding-top: 48px;
  }

  /* 横並びだとタイトルが折り返すため、ページャー（上・中央）→タイトル（下・左）の縦並びにする */
  .c-modal__meta {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .c-modal__pager {
    grid-column: auto;
    grid-row: 1;
  }
}


/* =========================================================
   COMPANY PAGE（会社情報）
========================================================= */

/* ---------- MESSAGE セクション ---------- */
.company-message {
  background: #fff;
  padding: 0 0 80px;
}

.company-message__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.company-message__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.company-message__photo img {
  width: 370px;
  height: 225px;
  object-fit: cover;
  display: block;
}

.company-message__body {
  padding: 0 80px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.company-message__body p {
  margin: 0 0 1.6rem;
}

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

.company-message__heading {
  font-weight: 700;
  font-size: 20px;
}

.company-message__sign {
  padding: 0 80px;
  text-align: right;
}

.company-message__sign-img {
  height: 19px;
  width: auto;
}

.company-message__sign p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #333;
  margin: 24px 0 0;
}

/* ---------- COMPANY（会社概要）セクション ---------- */
.company-overview {
  background: #fffaf4;
  padding: 80px 0;
}

.company-overview__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.company-overview .section-label {
  margin-bottom: 40px;
}

.company-table {
  display: flex;
  flex-direction: column;
  gap: 13px;
  border-radius: 4px;
  overflow: hidden;
}

.company-table__row {
  display: flex;
  align-items: stretch;
  min-height: 70px;
  background: #fff;
  border: 1px solid #e5e5e0;
}

.company-table__label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 240px;
  padding: 16px 16px 16px 32px;
  background: #eaf2de;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
}

.company-table__value {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 16px 32px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}

.company-table__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #1e693f;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.company-table__link-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 14px;
  height: 12px;
  color: #1e693f;
}

.company-table__link-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- SDGs セクション ---------- */
.company-sdgs {
  background: #fff;
  padding: 80px 0 64px;
}

.company-sdgs__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.company-sdgs .section-label {
  margin-bottom: 64px;
}

.company-sdgs__intro {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

.company-sdgs__txt {
  flex: 1;
  min-width: 0;
}

.company-sdgs__head {
  margin-bottom: 32px;
}

.company-sdgs__brand {
  width: 499px;
  max-width: 100%;
  margin: 0 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #1e693f;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  color: #1e693f;
}

.company-sdgs__brand-x {
  margin: 0 16px;
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0;
}

.company-sdgs__brand-en {
  font-family: 'Roboto', sans-serif;
}

.company-sdgs__catch {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: #1e693f;
}

.company-sdgs__lead {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.company-sdgs__lead p {
  margin: 0 0 16px;
}

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

.company-sdgs__wheel {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 360px;
  height: 360px;
}

.company-sdgs__wheel img {
  display: block;
  width: 327px;
  height: auto;
}

.company-sdgs__icons {
  display: grid;
  grid-template-columns: repeat(17, 1fr);
  gap: 6px;
  margin: 64px 0;
  padding: 24px;
}

.company-sdgs__icon img {
  display: block;
  width: 100%;
  height: auto;
}

.company-sdgs__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.company-sdgs__card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.13), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.company-sdgs__card-img {
  display: block;
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}

.company-sdgs__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-family: 'Noto Sans JP', sans-serif;
  color: #333;
}

.company-sdgs__card-goal {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  color: #e88100;
}

.company-sdgs__card-title {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
}

/* 目標17（最後のカード）の見出しはPCで1行に収めるため字間を詰める */
.company-sdgs__card:last-child .company-sdgs__card-title {
  letter-spacing: -0.07em;
}

.company-sdgs__card-txt {
  margin: 4px 0 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- ACCESS セクション ---------- */
.company-access {
  background: #fffaf4;
  padding: 80px 0;
}

.company-access__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.company-access .section-label {
  margin-bottom: 40px;
}

.company-access__map {
  width: 100%;
  position: relative;
}

.company-access__map iframe {
  width: 100%;
  height: 328px;
  display: block;
  border: 0;
}


/* =========================================================
   COMPANY PAGE - タブレット・スマホ
========================================================= */
@media (max-width: 1024px) {

  .page-header__inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .company-message__inner,
  .company-overview__inner,
  .company-sdgs__inner,
  .company-access__inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .company-message__body,
  .company-message__sign {
    padding-left: 0;
    padding-right: 0;
  }

  .company-sdgs__intro {
    gap: 40px;
  }

  .company-sdgs__wheel {
    width: 280px;
    height: 280px;
  }

  .company-sdgs__wheel img {
    width: 254px;
  }

  .company-sdgs__icons {
    padding: 24px 0;
  }

  .company-sdgs__card {
    gap: 16px;
  }

  .company-sdgs__card-img {
    width: 90px;
    height: 90px;
  }

  .page-header__en {
    font-size: 80px;
  }

  .section-label__en {
    font-size: 70px;
  }
}

@media (max-width: 767px) {
  .page-header {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .page-header__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .page-header__vline {
    height: 28px;
  }

  .page-header__en {
    font-size: 60px;
  }

  .page-header__jp {
    font-size: 30px;
  }

  .company-message__inner,
  .company-overview__inner,
  .company-sdgs__inner,
  .company-access__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .company-overview,
  .company-sdgs,
  .company-access {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .company-sdgs .section-label {
    margin-bottom: 40px;
  }

  /* SPは「見出し → ホイール → リード文」の順に並べるため、txtの箱を解除して直接並べ替える */
  .company-sdgs__intro {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .company-sdgs__txt {
    display: contents;
  }

  .company-sdgs__head {
    order: 1;
    margin-bottom: 0;
  }

  .company-sdgs__wheel {
    order: 2;
    width: 100%;
    height: auto;
  }

  .company-sdgs__wheel img {
    width: 200px;
  }

  .company-sdgs__lead {
    order: 3;
    font-size: 14px;
  }

  .company-sdgs__lead p {
    margin-bottom: 12px;
  }

  .company-sdgs__brand {
    font-size: 16px;
  }

  .company-sdgs__brand-x {
    margin: 0 12px;
    font-size: 14px;
  }

  .company-sdgs__catch {
    font-size: 20px;
  }

  .company-sdgs__icons {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    margin: 40px 0;
    padding: 0;
  }

  .company-sdgs__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* SPはアイコンと目標・見出しを横並びにし、本文はカード幅いっぱいに流す */
  .company-sdgs__card {
    display: grid;
    grid-template-columns: 80px 1fr;
    column-gap: 16px;
    align-items: center;
    padding: 24px 20px;
  }

  .company-sdgs__card-img {
    grid-row: 1 / 3;
    width: 80px;
    height: 80px;
  }

  .company-sdgs__card-body {
    display: contents;
  }

  .company-sdgs__card-goal {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 12px;
  }

  .company-sdgs__card-title {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: 6px;
    font-size: 18px;
  }

  .company-sdgs__card:last-child .company-sdgs__card-title {
    letter-spacing: 0;
  }

  .company-sdgs__card-txt {
    grid-column: 1 / -1;
    margin-top: 16px;
    font-size: 14px;
  }

  .section-label__en {
    /* 375pxで50px、320pxでも収まるよう流動的に縮小（ORGANIZATION等の長い単語対策） */
    font-size: clamp(30px, calc(-86.36px + 36.36vw), 44px);
  }

  .section-label__jp {
    font-size: 22px;
  }

  .section-label__vline {
    height: 20px;
  }

  .company-message__body p,
  .company-message__sign p {
    font-size: 14px;
  }

  .company-message__body p.company-message__heading {
    font-size: 18px;
  }

  .company-access__map iframe {
    height: 220px;
  }

  .company-message__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .company-message__photo {
    width: 100%;
  }

  .company-message__photo img {
    width: 100%;
    height: auto;
    max-width: 370px;
    margin: 0 auto;
  }

  .company-table__row {
    flex-direction: column;
    min-height: 0;
  }

  .company-table__label {
    width: 100%;
    padding: 12px 16px;
  }

  .company-table__value {
    padding: 16px;
  }
}

/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-section {
  background: #fff;
  padding: 0 0 80px;
}

.contact-section__inner {
  max-width: calc(1200px + 100px); /* content 1200px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
}

.contact-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
  text-align: center;
}

.contact-heading__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.contact-heading__dots {
  display: block;
}

/* ---------- Contact Form 7 出力部分 ---------- */
.contact-section .wpcf7-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.contact-section .wpcf7-response-output {
  width: 720px;
  max-width: 100%;
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
}

/* 送信結果メッセージ：CF7標準の色付き枠線を消し、背景色のブロックとして見せる
   （CF7側の .wpcf7 form.sent .wpcf7-response-output より詳細度を上げている） */
.contact-section .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 20px 24px;
  border: none;
  border-radius: 6px;
  background: #f4f4f2;
  font-weight: 500;
  line-height: 1.6;
  color: #333;
  text-align: center;
  animation: contactResponseIn 0.4s ease-out;
}

.contact-section .wpcf7 form.sent .wpcf7-response-output {
  background: #eef6e6;
  color: #3f7a17;
}

.contact-section .wpcf7 form.sent .wpcf7-response-output::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%236ab031'/%3E%3Cpath d='M5.5 10.5L8.5 13.5L14.5 7' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.contact-section .wpcf7 form.invalid .wpcf7-response-output,
.contact-section .wpcf7 form.unaccepted .wpcf7-response-output,
.contact-section .wpcf7 form.payment-required .wpcf7-response-output {
  background: #fdf3e6;
  color: #c86f00;
}

.contact-section .wpcf7 form.failed .wpcf7-response-output,
.contact-section .wpcf7 form.aborted .wpcf7-response-output,
.contact-section .wpcf7 form.spam .wpcf7-response-output {
  background: #fdeeee;
  color: #d0312d;
}

@keyframes contactResponseIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-section .wpcf7 form .wpcf7-response-output {
    animation: none;
  }
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 720px;
  max-width: 100%;
}

/* 学校名欄：お問い合わせ種別に応じてJSでhidden属性を付け外しする（display:flexで上書きされないよう明示） */
.contact-form__field[hidden] {
  display: none;
}

.contact-form__label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
}

.contact-form__badge {
  font-weight: 700;
}

.contact-form__badge--required {
  color: #ff0000;
}

.contact-form__badge--optional {
  color: #595757;
}

.contact-form__field .wpcf7-form-control {
  width: 100%;
  height: 52px;
  background: #ececea;
  border: none;
  border-radius: 6px;
  padding: 0 18px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #333;
}

.contact-form__field textarea.wpcf7-form-control {
  height: 160px;
  padding: 16px 18px;
  resize: vertical;
}

.contact-form__field .wpcf7-form-control::placeholder {
  color: #9e9e99;
}

.contact-form__field select.wpcf7-form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23595757' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 8px;
}

.contact-form__field select.wpcf7-form-control:invalid {
  color: #9e9e99;
}

.contact-form__note {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #9e9e99;
}

.contact-form__field .wpcf7-not-valid-tip {
  display: block;
  font-size: 12px;
  margin-top: 4px;
}

.contact-privacy {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 720px;
  max-width: 100%;
}

.contact-privacy__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
}

.contact-privacy__box {
  background: #fff;
  border: 1px solid #ccccc7;
  border-radius: 6px;
  height: 180px;
  overflow-y: auto;
  padding: 16px 8px 16px 16px;
}

.contact-privacy__box p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.6;
  color: #595959;
  margin: 0 0 1em;
}

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

.contact-privacy__agree .wpcf7-acceptance {
  display: flex;
  align-items: center;
}

.contact-privacy__agree .wpcf7-list-item {
  margin: 0;
}

.contact-privacy__agree .wpcf7-list-item label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-privacy__agree input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid #6ab031;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  position: relative;
}

.contact-privacy__agree input[type="checkbox"]:checked {
  background: #6ab031;
}

.contact-privacy__agree input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.contact-privacy__agree .wpcf7-list-item-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.contact-form__submit {
  display: flex;
  justify-content: center;
}

.contact-form__submit .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 48px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(270deg, #EFC62A 2.5%, #DD670B 61.667%);
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 20px;
  cursor: pointer;
  transition: filter 0.3s ease;
}

.contact-form__submit .wpcf7-submit:hover {
  filter: brightness(1.1);
}

.contact-form__submit .wpcf7-spinner {
  margin-left: 8px;
}

/* =========================================================
   CONTACT PAGE - タブレット・スマホ
========================================================= */
@media (max-width: 1024px) {
  .contact-section__inner {
    padding-left: 40px;
    padding-right: 40px;
  }

  .contact-form__field,
  .contact-privacy,
  .contact-section .wpcf7-response-output {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .contact-section {
    padding-bottom: 40px;
  }

  .contact-section__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .contact-heading__text {
    font-size: 16px;
    text-align: left;
    line-height: 1.6rem;
  }

  .contact-section .wpcf7-form {
    gap: 15px;
  }

  .contact-section .wpcf7 form .wpcf7-response-output {
    padding: 16px 20px;
    text-align: left;
  }

  .contact-form__field .wpcf7-form-control {
    font-size: 16px;

  }

  .contact-form__submit .wpcf7-submit {
    width: 100%;
    padding: 18px 24px;
    font-size: 16px;
  }
}

/* =========================================================
   NEWS PAGE（一覧）
========================================================= */
.news-archive {
  background: #fffaf4;
  padding: 80px 0;
}

.news-archive__inner {
  max-width: 840px;
  margin: 0 auto;
  padding: 0 50px;
}

.news-archive__filter {
  margin-bottom: 40px;
}

.news-archive__filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.news-archive__filter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  padding: 0 24px;
  border: 2px solid #352e25;
  border-radius: 999px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #352e25;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.news-archive__filter-link:hover {
  background: rgba(53, 46, 37, 0.08);
}

.news-archive__filter-link.is-active {
  background: #352e25;
  border-color: #352e25;
  color: #fff;
}

.news-archive__list {
  width: 100%;
}

.news-archive__item + .news-archive__item {
  border-top: 1px solid #d9d9d9;
}

.news-archive__link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 16px;
}

.news-archive__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.news-archive__date {
  flex-shrink: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #999;
}

.news-archive__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100px;
  height: 35px;
  padding: 8px 16px;
  border: 3px solid #678e30;
  border-radius: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #678e30;
  text-align: center;
  white-space: nowrap;
}

.news-archive__title-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1 1 auto;
  min-width: 0;
}

.news-archive__title {
  flex: 1 1 auto;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #333;
}

.news-archive__arrow {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e88100;
  color: #fff;
  transition: transform 0.3s ease;
}

.news-archive__arrow svg {
  display: block;
  width: 18px;
  height: 15px;
}

.news-archive__link:hover .news-archive__arrow {
  transform: translate(4px, -4px);
}

.news-archive__empty {
  padding: 40px 0;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  color: #999;
  text-align: center;
}

.news-archive__pagination {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.news-archive__pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid #d9d9d9;
  border-radius: 50%;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #333;
}

.news-archive__pagination .page-numbers.prev,
.news-archive__pagination .page-numbers.next {
  width: auto;
  min-width: 64px;
  border-radius: 20px;
  padding: 0 16px;
}

.news-archive__pagination .page-numbers.current {
  background: #e88100;
  border-color: #e88100;
  color: #fff;
}

.news-archive__pagination .page-numbers.dots {
  border: none;
}

.news-archive__pagination a.page-numbers:hover {
  border-color: #e88100;
  color: #e88100;
}

@media (max-width: 1024px) {
  .news-archive__inner {
    padding: 0 40px;
  }
}

@media (max-width: 767px) {
  .news-archive {
    padding: 40px 0;
  }

  .news-archive__inner {
    padding: 0 20px;
  }

  .news-archive__filter {
    margin-bottom: 24px;
  }

  .news-archive__filter-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  .news-archive__filter-link {
    height: 38px;
    padding: 0 18px;
    font-size: 13px;
  }

  .news-archive__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 8px;
  }

  .news-archive__title-row {
    width: 100%;
    gap: 16px;
  }

  .news-archive__badge {
    width: 76px;
    height: auto;
    padding: 4px 10px;
    font-size: 12px;
  }

  .news-archive__title {
    font-size: 15px;
  }

  .news-archive__arrow {
    width: 36px;
    height: 36px;
  }

  .news-archive__arrow svg {
    width: 15px;
    height: 13px;
  }
}

/* =========================================================
   NEWS PAGE（投稿詳細）
========================================================= */
.single-news {
  background: #fff;
  padding: 80px 0;
}

.single-news__inner {
  max-width: calc(1100px + 100px); /* content 1100px + 左右padding 50px分 */
  margin: 0 auto;
  padding: 0 50px;
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.single-news__main {
  flex: 1 1 0%;
  min-width: 0;
}

.single-news__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.single-news__date {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #999;
}

.single-news__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 35px;
  padding: 8px 16px;
  border: 3px solid #678e30;
  border-radius: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #678e30;
  text-align: center;
  white-space: nowrap;
}

.single-news__title {
  margin-bottom: 32px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.5;
  color: #333;
}

.single-news__content {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  color: #333;
}

.single-news__content p {
  margin-bottom: 1.6em;
}

.single-news__content h2 {
  margin: 2.4em 0 1em;
  padding-bottom: 12px;
  border-bottom: 2px solid #e88100;
  font-size: 22px;
  font-weight: 700;
}

.single-news__content h3 {
  margin: 2em 0 1em;
  font-size: 19px;
  font-weight: 700;
}

.single-news__content a {
  color: #e88100;
  text-decoration: underline;
}

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

.single-news__content ul,
.single-news__content ol {
  margin-bottom: 1.6em;
  padding-left: 1.4em;
}

.single-news__content ul {
  list-style: disc;
}

.single-news__content ol {
  list-style: decimal;
}

/* ---------- サイドバー ---------- */
.single-news__sidebar {
  flex: 0 0 280px;
  width: 280px;
}

.single-news__sidebar-block + .single-news__sidebar-block {
  margin-top: 48px;
}

.single-news__sidebar-heading {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e88100;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #333;
}

.single-news__sidebar-cat-item + .single-news__sidebar-cat-item,
.single-news__sidebar-recent-item + .single-news__sidebar-recent-item {
  border-top: 1px solid #d9d9d9;
}

.single-news__sidebar-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 4px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  transition: color 0.3s ease;
}

.single-news__sidebar-cat-link:hover {
  color: #e88100;
}

.single-news__sidebar-cat-count {
  flex-shrink: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #999;
}

.single-news__sidebar-recent-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 4px;
}

.single-news__sidebar-recent-date {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #999;
}

.single-news__sidebar-recent-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.3s ease;
}

.single-news__sidebar-recent-link:hover .single-news__sidebar-recent-title {
  color: #e88100;
}

.single-news__sidebar-empty {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 14px;
  color: #999;
}

.single-news-nav {
  border-top: 1px solid #d9d9d9;
  background: #fff;
}

.single-news-nav__inner {
  display: flex;
  max-width: 840px;
  margin: 0 auto;
}

.single-news-nav__item {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 24px 50px;
  min-height: 90px;
}

.single-news-nav__item--prev {
  border-right: 1px solid #d9d9d9;
}

.single-news-nav__item a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}

.single-news-nav__item.is-disabled {
  color: #ccc;
}

.single-news-nav__item--next {
  align-items: flex-end;
  text-align: right;
}

.single-news-nav__item--next a {
  align-items: flex-end;
}

.single-news-nav__label {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: #e88100;
}

.single-news-nav__item.is-disabled .single-news-nav__label {
  color: #ccc;
}

.single-news-nav__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-news-nav__item.is-disabled .single-news-nav__title {
  color: #ccc;
}

/* =========================================================
   NEWS PAGE - タブレット・スマホ
========================================================= */
@media (max-width: 1024px) {
  .single-news__inner {
    padding: 0 40px;
    gap: 40px;
  }

  .single-news__sidebar {
    flex: 0 0 240px;
    width: 240px;
  }

  .single-news-nav__item {
    padding: 24px 40px;
  }
}

@media (max-width: 767px) {
  .single-news {
    padding: 40px 0;
  }

  .single-news__inner {
    flex-direction: column;
    padding: 0 20px;
    gap: 48px;
  }

  .single-news__sidebar {
    flex: 0 0 auto;
    width: 100%;
  }

  .single-news__title {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .single-news__content {
    font-size: 15px;
  }

  .single-news-nav__inner {
    flex-direction: column;
  }

  .single-news-nav__item {
    padding: 20px;
    min-height: 0;
  }

  .single-news-nav__item--prev {
    border-right: none;
    border-bottom: 1px solid #d9d9d9;
  }

  .single-news-nav__item--next {
    align-items: flex-start;
    text-align: left;
  }

  .single-news-nav__item--next a {
    align-items: flex-start;
  }
}

/* =========================================================
   404 PAGE
========================================================= */
.notfound {
  padding: 80px 0;
}

.notfound__inner {
  max-width: calc(1200px + 100px);
  margin: 0 auto;
  padding: 0 50px;
  text-align: center;
}

.notfound__txt {
  margin-bottom: 40px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

/* =========================================================
   404 PAGE - スマホ
========================================================= */
@media (max-width: 767px) {
  /* 見出しが11文字と長く、共通の30pxだと幅360px以下ではみ出すため縮める */
  .notfound__title {
    font-size: 24px;
  }

  .notfound {
    padding: 40px 0;
  }

  .notfound__inner {
    padding: 0 20px;
  }

  .notfound__txt {
    margin-bottom: 32px;
    font-size: 15px;
    text-align: left;
  }
}