@charset "UTF-8";

/* ==========================================================================
   Reset & Base Styles
   Bootstrap削除に伴う、最低限必要なモダンリセット
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* 要素の幅・高さをpaddingとborderを含めて計算（超重要） */
}

html {
  font-size: 62.5%;
  /* 1rem = 10px の計算基準 */
  -webkit-text-size-adjust: 100%;
  /* スマホ回転時の文字サイズ拡大を防止 */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", Meiryo, sans-serif;
  font-size: 1.6rem;
  /* 基本サイズ16px */
  line-height: 1.6;
  color: var(--color-text, #333);
  /* 変数がない場合のフォールバック付き */
  background-color: #fff;
  overflow-x: hidden;
  /* 横揺れ防止 */
}

main {
  margin: 0;
}

/* リンクのリセット */
a {
  color: inherit;
  text-decoration: none;
}

a:link {
  color: inherit;
  text-decoration: inherit;
}

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

a:hover {
  text-decoration: none;
}

/* リストのリセット（c-xxx などのクラスがついていないデフォルトのulへの対策） */
ul,
ol {
  margin-top: 0;
  margin-bottom: 1rem;
}

li {
  line-height: inherit;
}

/* 画像のリセット（親要素から飛び出さないようにする） */
img,
picture,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* ボタンやフォーム要素のリセット */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  appearance: none;
}

/* ==========================================================================
   固定ヘッダー用の余白調整
   ========================================================================== */
body {
  padding-top: 100px;
}

html {
  scroll-padding-top: 120px;
}


/* --- スマホ用の高さ調整（@media (max-width: 992px) のブロック内に追記） --- */
@media (max-width: 992px) {
  body {
    padding-top: 60px;
  }

  html {
    scroll-padding-top: 80px;
  }
}

/* ==========================================================================
   Global Variables (共通変数)
   サイト全体で共有する色やレイアウトの設定
   ========================================================================== */
:root {
  /* --- Colors (共通カラー) --- */
  --color-primary: #0056b3;
  /* ブランドカラー */
  --color-text: #333333;
  /* 基本テキスト色 */
  --color-border: #dddddd;
  /* ボーダー色 */
  --color-icon: #888888;
  /* アイコン色 */
  --color-bg-gray: #f9f9f9;
  /* 薄いグレー背景 */

  /* --- Layout Container (l-section用) --- */
  --l-bg-default: #ffffff;
  --l-bg-gray: var(--color-bg-gray);
  --l-bg-primary-light: #e6f0fa;
  --l-max-width: 1000px;
  --l-max-width-narrow: 800px;
  --l-max-width-wide: 1200px;

  /* --- Link List (c-link-list用) --- */
  --ll-thumb-size: 90px;
}


/* ==========================================================================
   Layout: Section (Prefix: l-)
   ページ全体の余白・背景・コンテンツ幅を制御する汎用コンテナ
   ========================================================================== */
.l-section {
  padding: 40px 16px;
  background-color: var(--l-bg-default);
}

.l-section--sm {
  padding: 24px 16px;
}

/* PC用レイアウト (768px以上) */
@media (min-width: 768px) {
  .l-section {
    padding: 80px 16px;
  }

  .l-section--sm {
    padding: 40px 16px;
  }
}

/* Modifiers: 背景色 */
.l-section--bg-gray {
  background-color: var(--l-bg-gray);
}

.l-section--bg-primary {
  background-color: var(--l-bg-primary-light);
}

/* Modifiers: 余白調整 */
.l-section--pt-0 {
  padding-top: 0 !important;
}

.l-section--pb-0 {
  padding-bottom: 0 !important;
}

/* Inner Wrapper */
.l-section__inner {
  max-width: var(--l-max-width);
  margin: 0 auto;
  width: 100%;
}

.l-section__inner--narrow {
  max-width: var(--l-max-width-narrow);
}

.l-section__inner--wide {
  max-width: var(--l-max-width-wide);
}


/* ==========================================================================
   Page Header Component (Prefix: c-)
   ページ上部のタイトルエリア
   ========================================================================== */
.c-page-header {
  position: relative;
  padding: 60px 16px;
  background-color: var(--color-bg-gray);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  margin: 0;
  border: none;
}

.c-page-header__inner {
  position: relative;
  z-index: 1;
  max-width: var(--l-max-width);
  margin: 0 auto;
}

.c-page-header__title {
  margin: 0;
  font-size: 3.6rem;
  font-weight: bold;
  color: var(--color-text);
  line-height: 1.4;
}

.c-page-header__subtitle {
  display: block;
  margin-top: 8px;
  font-size: 2.4rem;
  color: #666666;
  font-family: Arial, sans-serif;
  letter-spacing: 0.05em;
}

/* Modifier: 画像背景用（白文字＋暗幕） */
.c-page-header--inverse {
  color: #ffffff;
}

.c-page-header--inverse .c-page-header__title,
.c-page-header--inverse .c-page-header__subtitle {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.c-page-header--inverse::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 0;
}


/* ==========================================================================
   Link List Component (Prefix: c-)
   汎用リンクパネル（画像＋テキスト）
   ========================================================================== */
.c-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

/* PC用カラムレイアウト */
@media (min-width: 768px) {
  .c-link-list--col2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .c-link-list--col3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.c-link-list__item {
  margin: 0;
}

.c-link-list__link {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  height: 100%;
}

.c-link-list__thumb {
  width: var(--ll-thumb-size);
  height: var(--ll-thumb-size);
  margin: 0 16px 0 0;
  padding: 0;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

.c-link-list__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.c-link-list__text {
  font-size: 1.5rem;
  line-height: 1.4;
  flex-grow: 1;
}

.c-link-list__link--external .c-link-list__text {
  padding-right: 8px;
}

/* Icons */
.c-link-list__icon {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-icon);
  border-right: 2px solid var(--color-icon);
  transform: rotate(45deg);
  transition: all 0.2s ease;
  margin-left: 16px;
  flex-shrink: 0;
}

.c-link-list__icon-external {
  display: block;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  flex-shrink: 0;
  background-color: var(--color-icon);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.2s ease;
}

/* Hover UX */
@media (hover: hover) {
  .c-link-list__link:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 8px rgba(0, 86, 179, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
  }

  .c-link-list__link:hover .c-link-list__icon {
    border-color: var(--color-primary);
    transform: translateX(4px) rotate(45deg);
  }

  .c-link-list__link:hover .c-link-list__icon-external {
    background-color: var(--color-primary);
  }
}


/* ==========================================================================
   旧 Service Lineup Component
   ※ c-link-list への移行が完了した場合は削除可能ですが、既存ページ用残置
   ========================================================================== */
.service-lineup {
  padding: 60px 16px;
  background-color: var(--color-bg-gray);
}

.service-lineup__inner {
  max-width: var(--l-max-width);
  margin: 0 auto;
}

.service-lineup__header {
  margin-bottom: 40px;
  text-align: left;
}

.service-lineup__title-en {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: var(--color-primary);
  line-height: 1.2;
}

.service-lineup__title-ja {
  display: block;
  font-size: 0.9rem;
  color: #666;
  margin-top: 4px;
}

.service-lineup__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.service-lineup__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.service-lineup__text {
  font-size: 1.6rem;
  line-height: 1.4;
}

.service-lineup__link--external .service-lineup__text {
  padding-right: 8px;
}

/* Icons */
.service-lineup__icon {
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-icon);
  border-right: 2px solid var(--color-icon);
  transform: rotate(45deg);
  transition: all 0.2s ease;
  margin-left: 12px;
  flex-shrink: 0;
}

.service-lineup__icon-external {
  display: block;
  width: 16px;
  height: 16px;
  margin-left: auto;
  flex-shrink: 0;
  background-color: var(--color-icon);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.2s ease;
}

/* Hover UX */
@media (hover: hover) {
  .service-lineup__link:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 8px rgba(0, 86, 179, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
  }

  .service-lineup__link:hover .service-lineup__icon {
    border-color: var(--color-primary);
    transform: translateX(4px) rotate(45deg);
  }

  .service-lineup__link:hover .service-lineup__icon-external {
    background-color: var(--color-primary);
  }
}

/* ==========================================================================
   Hover Button Nav (既存の意匠をそのまま保持)
   ========================================================================== */
.hvr-underline-from-center {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  position: relative;
  overflow: hidden;
}

.hvr-underline-from-center:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0px;
  background: var(--color-primary);
  height: 3px;
  transition-property: left, right;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

.hvr-underline-from-center:hover:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:active:before {
  left: 0%;
  right: 0%;
}

/* ==========================================================================
   Header Component (Prefix: c-)
   ========================================================================== */
.c-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
}

.c-header a {
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.c-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding-top: 16px;
  /* 既存の site-width 相当のコンテナ設定があればここに記載（例: max-width: 1200px; margin: 0 auto; padding: 0 16px; など） */
  padding-left: 24px;
  padding-right: 24px;

  max-width: 1408px;
  margin: 0 auto;
  width: 100%;
}

/* ----------------- Logo ----------------- */
.c-header__logo {
  margin: 0;
  width: clamp(256px, 10.4375rem + 23.733vw, 448px);
}

.c-header__logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ----------------- Nav Wrapper ----------------- */
.c-header__nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

/* ----------------- Sub Nav (Top links) ----------------- */
.c-header__sub-nav {
  display: flex;
  list-style: none;
  margin: 0 0 8px 0;
  /* 下に少し余白 */
  padding: 0;
  gap: 24px;
}

.c-header__sub-nav a {
  font-size: 1.2rem;
  color: #555555;
}

/* ▼ ホバーアクションを新規追加 ▼ */
@media (hover: hover) {
  .c-header__sub-nav a:hover {
    color: var(--color-primary);
    /* メインメニューと同じブルーに */
    text-decoration: underline;
    /* シンプルな下線 */
    text-underline-offset: 3px;
    /* 文字と線の間に少し余白を開けて綺麗に見せる */
  }
}

/* ----------------- Global Nav (Main links) ----------------- */
.c-global-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 48px;
}

.c-global-nav__item {
  position: relative;
}

.c-global-nav__link-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.c-global-nav__link {
  font-size: 1.6rem;
  line-height: 3.2;
  color: #000;
  font-weight: bold;
  transition: color 0.3s ease;
}

.c-global-nav__icon-external {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: middle;
  background-color: currentColor;
  /* テキスト色に自動で追従（黒） */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  position: relative;
  top: -2px;
  /* 視覚的にテキストの中央にくるよう微調整 */
}

.c-global-nav__icon-dropdown {
  display: inline-block;
  width: 12px;
  /* SVGが綺麗に表示されるサイズ */
  height: 12px;
  margin-left: 6px;
  vertical-align: middle;
  background-color: currentColor;
  /* テキスト色に自動で追従 */
  /* 歪まないSVGマスク方式に変更 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  position: relative;
  top: -1px;
  /* 縦の微調整 */
  transition: transform 0.3s ease;
}

/* SP用トグルボタン（PCでは非表示） */
.c-global-nav__toggle {
  display: none;
}

/* ----------------- Dropdown Base ----------------- */
.c-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 15px);
  visibility: hidden;
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out, visibility 0.4s;
  z-index: 100;
  min-width: 400px;
  box-sizing: border-box;

  /* ▼ 修正: 太い枠線をやめ、上品な影と上部アクセントラインに変更 ▼ */
  background-color: #fff;
  border: none;
  border-top: 3px solid var(--color-primary);
  /* ブランドカラーのライン */
  border-radius: 0 0 8px 8px;
  /* 下部だけ丸みを持たせる */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  /* 柔らかい影 */
  padding: 32px 48px;
  /* 余白を調整してゆとりを持たせる */
}

/* モディファイア: メガメニュー用（会社案内など幅広） */
.c-dropdown--mega {
  min-width: 720px;
}

.c-dropdown__inner {
  display: flex;
  gap: 64px;
  width: 100%;
}

.c-dropdown__col {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* ----------------- Dropdown Contents (Hierarchy) ----------------- */
.c-dropdown__title {
  font-weight: bold;
  font-size: 1.3rem;
  /* 少し小さくして見出し感を出す */
  color: #888888;
  /* グレーにしてリストとの強弱をつける */
  padding-bottom: 6px;
  border-bottom: 1px solid #eeeeee;
  /* 薄い線 */
  margin-bottom: 16px;
  margin-top: 32px;
  letter-spacing: 0.05em;
}

.c-dropdown__col li:first-child.c-dropdown__title {
  margin-top: 0;
}

/* 見出し自体がリンクになっている場合（会社案内など） */
.c-dropdown__title a {
  color: inherit;
  transition: color 0.3s ease;
  display: inline-block;
}

.c-dropdown__title a:hover {
  color: var(--color-primary);
}

.c-dropdown__col li {
  margin-bottom: 12px;
  /* 行間をline-heightではなくmarginで確保してクリック範囲を明確に */
}

.c-dropdown__col li:last-child {
  margin-bottom: 0;
}

/* ----------------- Dropdown Links ----------------- */
.c-dropdown__link {
  display: inline-flex;
  align-items: center;
  font-size: 1.5rem;
  color: var(--color-text);
  transition: color 0.3s ease-out, transform 0.3s ease-out;
  font-weight: normal;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* 左アロー（CSSで自動描画） */
.c-dropdown__link::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--color-icon);
  border-right: 1.5px solid var(--color-icon);
  transform: rotate(45deg);
  margin-right: 12px;
  /* テキストとの間隔 */
  transition: border-color 0.3s ease;
  flex-shrink: 0;
}

/* モディファイア: 採用情報のような少し小さい文字用 */
.c-dropdown__col--small .c-dropdown__link {
  font-size: 1.4rem;
}

/* リンクとリンクの間の広めの余白用 */
.c-dropdown__spacer {
  margin-bottom: 24px !important;
}

/* ▼ ホバーアクション ▼ */
@media (hover: hover) {
  .c-dropdown__link:hover {
    color: var(--color-primary);
    transform: translate3d(4px, 0, 0);
    /* 右にスッと動く */
  }

  .c-dropdown__link:hover::before {
    border-color: var(--color-primary);
    /* アローも青に */
  }

  .c-dropdown__link:hover .c-dropdown__icon-external {
    background-color: var(--color-primary);
    /* 外部アイコンも青に */
  }
}

/* ----------------- Dropdown External Icon ----------------- */
.c-dropdown__icon-external {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  flex-shrink: 0;
  background-color: var(--color-icon);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.3s ease;
}

/* PC Hover Action */
@media (hover: hover) and (min-width: 993px) {
  .c-global-nav__item:hover {
    z-index: 100;
  }

  .c-global-nav__item:hover .c-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
  }

  .c-global-nav__item:hover .c-global-nav__icon-dropdown {
    transform: rotate(180deg);
  }

  .c-global-nav__item:hover .c-global-nav__link {
    color: var(--color-primary);
  }
}

/* ----------------- Hamburger Button ----------------- */
.c-hamburger {
  display: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}


/* ==========================================================================
   Responsive (1280px以下)
   ========================================================================== */
@media (max-width: 1280px) {
  .c-global-nav {
    gap: 32px;
  }

  .c-global-nav__link {
    font-size: 1.5rem;
  }
}


/* ==========================================================================
   Responsive SP (992px以下) - SP Menu
   ========================================================================== */
@media (max-width: 992px) {
  .c-header__inner {
    padding-bottom: 16px;
    align-items: center;
  }

  /* ハンバーガーボタン表示 */
  .c-hamburger {
    display: block;
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    z-index: 100;
    width: 48px;
    height: 48px;
  }

  .c-hamburger__bar {
    display: block;
    position: absolute;
    left: 12px;
    width: 24px;
    height: 2px;
    background-color: #000;
    transition: all 0.3s ease;
  }

  .c-hamburger__bar:nth-child(1) {
    top: 12px;
  }

  .c-hamburger__bar:nth-child(2) {
    top: 18px;
  }

  .c-hamburger__bar:nth-child(3) {
    top: 24px;
  }

  .c-hamburger__text {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.0rem;
    line-height: 1;
    font-family: "Viga", sans-serif;
    color: #787878;
    transition: all 0.3s ease;
  }

  /* ハンバーガー Active 時 */
  .c-hamburger.is-active .c-hamburger__bar:nth-child(1) {
    top: 18px;
    transform: rotate(45deg);
  }

  .c-hamburger.is-active .c-hamburger__bar:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
  }

  .c-hamburger.is-active .c-hamburger__bar:nth-child(3) {
    top: 18px;
    transform: rotate(-45deg);
  }

  .c-hamburger.is-active .c-hamburger__text {
    opacity: 1;
    color: #000;
  }

  /* ナビゲーション全体（SPでは画面全体を覆うメニューになる） */
  .c-header__nav {
    position: fixed;
    top: 66px;
    left: 0;
    width: 100%;
    height: calc(100vh - 66px);
    background: #fff;
    z-index: 90;
    padding: 24px;
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s ease;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .c-header__nav.is-open {
    visibility: visible;
    opacity: 1;
  }

  /* Sub Nav SP調整 */
  .c-header__sub-nav {
    width: 100%;
    order: 2;
    /* 順番を下にする */
    margin-top: 40px;
    /* メインメニューとの間に余白を作る */
    margin-bottom: 32px;
    flex-direction: column;
    gap: 16px;
  }

  .c-header__sub-nav a {
    font-size: 1.4rem;
  }

  /* Global Nav SP調整 */
  .c-global-nav {
    width: 100%;
    order: 1;
    flex-direction: column;
    gap: 0;
  }

  .c-global-nav__item {
    border-bottom: 1px solid #eee;
  }

  .c-global-nav__link {
    width: calc(100% - 50px);
    padding: 15px 0;
    line-height: 1.4;
  }

  .c-global-nav__link::before {
    display: none !important;
  }

  /* 下線ホバー無効 */

  /* ▼ 修正: リンクのレイアウト調整（アローを右端に寄せる） ▼ */
  .c-global-nav__link {
    display: flex;
    justify-content: space-between;
    /* テキストとアローを左右両端に離す */
    align-items: center;
    width: 100%;
    padding: 16px 0;
    /* 上下にゆったりとした余白を持たせる */
    line-height: 1.4;
  }

  .c-global-nav__link::before {
    display: none !important;
  }

  /* ▼ 追記: SP用のアロー微調整（少し大きくして視認性を上げる） ▼ */
  .c-global-nav__icon-dropdown {
    width: 16px;
    height: 16px;
    margin-left: 0;
  }

  /* ▼ 修正: SP用トグル（透明にして「会社案内」の行全体を覆う） ▼ */
  .c-global-nav__toggle {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 親要素(li)全体を覆い尽くす */
    background: transparent;
    /* 透明 */
    border: none;
    cursor: pointer;
    z-index: 2;
    /* リンク(aタグ)よりも前面に被せる */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    /* スマホでタップした時の青い四角を消す */
  }

  /* ドロップダウン SP調整 (アコーディオン) */
  .c-dropdown {
    display: block !important;
    position: static !important;
    transform: none !important;
    min-width: 100% !important;

    /* ▼ 修正1: PC用の影や丸みを完全に打ち消し、フラットでシャープな領域にする ▼ */
    background-color: #f4f6f9;
    /* ボヤけない、清潔感のあるほんのりクールなグレー */
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    overflow: hidden;
    max-height: 0;
    padding: 0 16px !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
  }

  /* SP アコーディオン開閉時 (JSで .is-active を付与) */
  .c-global-nav__item.is-active .c-global-nav__icon-dropdown {
    transform: rotate(180deg);
  }

  .c-global-nav__item.is-active .c-dropdown {
    visibility: visible !important;
    opacity: 1 !important;
    /* メガメニュー用に高さを多めに確保 */
    max-height: 2000px !important;
    /* ▼ 修正2: 展開時の上下余白をゆったり取って窮屈さをなくす ▼ */
    padding: 24px 16px 32px !important;
  }

  /* --- ドロップダウン内のレイアウトと余白 --- */
  .c-dropdown__inner {
    flex-direction: column;
    gap: 0;
  }

  .c-dropdown__col {
    margin-bottom: 32px;
    /* グループとグループの間に明確な「空き」を作る */
  }

  .c-dropdown__col:last-child {
    margin-bottom: 0;
  }

  /* ▼ 修正3: グルーピングの「目どまり」を良くする見出しデザイン ▼ */
  .c-dropdown__title {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-primary);
    /* ブランドカラーで視線を止める */
    padding-bottom: 8px;
    margin-top: 0;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--color-primary);
    /* 強い下線でグループの境界を明示 */
  }

  /* --- リンク項目 --- */
  .c-dropdown__col li {
    /* PCのmarginを打ち消し、階層の区切り線を引く */
    margin-bottom: 0;
    border-bottom: 1px solid #e4e4e4;
  }

  .c-dropdown__col li:last-child {
    border-bottom: none;
  }

  /* ▼ 修正4: テキストサイズとタップ範囲の最適化 ▼ */
  .c-dropdown__link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 0 14px 8px;
    /* 上下にタップしやすい余白 ＋ 少し右にインデント */
    font-size: 1.4rem;
    /* 親メニュー(1.6rem)より少し小さくして階層を表現 */
    line-height: 1.4;
  }

  /* 左アローの微調整（テキストの中心に揃える） */
  .c-dropdown__link::before {
    margin-top: 2px;
  }
}

@media (max-width: 767px) {
  .c-header__nav {
    top: 59px;
    height: calc(100vh - 59px);
  }
}

/* SP展開時の背面固定 */
@media (max-width: 992px) {

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

/* ==========================================================================
   Breadcrumb Component (Prefix: c-)
   パンくずリスト
   ========================================================================== */
.c-breadcrumb {
  width: 100%;
  /* ▼ 修正: 白続きを避けるため、ほんのり青みがかった上品なグレーに変更 ▼ */
  background-color: #f4f6f9;
  border-bottom: 1px solid #e4e4e4;
}

/* ▼ 追記: パンくずリスト専用のコンテナ（ヘッダーと幅・余白を合わせる） ▼ */
.c-breadcrumb__inner {
  max-width: 1408px;
  /* ヘッダーの幅と統一 */
  margin: 0 auto;
  width: 100%;
  padding: 12px 24px;
  /* ヘッダーの左右の余白（padding-left/right: 24px）とラインを揃える */
}

/* リスト本体 */
.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  /* 階層が長くなってスマホで画面端に到達した際に改行させる */
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各リスト項目 */
.c-breadcrumb__item {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  /* 少し小さめに設定（12px相当） */
  color: #787878;
  /* 基本はグレー */
  line-height: 1.4;
}

/* 区切り文字（＞）をCSSで自動付与 */
.c-breadcrumb__item:not(:last-child)::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-top: 1px solid #aaaaaa;
  border-right: 1px solid #aaaaaa;
  transform: rotate(45deg);
  margin: 0 12px;
  /* アローの左右の余白 */
}

/* リンクテキスト */
.c-breadcrumb__link {
  color: var(--color-text);
  /* リンク可能な親階層は黒など少し濃い色 */
  text-decoration: none;
  transition: color 0.3s ease;
}

/* ホバーアクション */
@media (hover: hover) {
  .c-breadcrumb__link:hover {
    color: var(--color-primary);
    /* ブランドカラーに */
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* 現在いるページ（最後の項目）のテキスト */
.c-breadcrumb__item[aria-current="page"] {
  color: #333333;
  font-weight: bold;
  /* 現在地を明確にするため少し太らせる */
}

/* ==========================================================================
   Page Top Button
   ========================================================================== */
#page-top-footer {
  position: fixed;
  right: 24px;
  bottom: 32px;
  /* フッターやスマホUIに被らないよう微調整 */
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#page-top-footer.is-show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  #page-top-footer {
    bottom: 80px;
    right: 16px;
  }
}

/* ==========================================================================
   Footer Component (Prefix: c-)
   ========================================================================== */
.c-footer {
  background-color: #f2f2f2;
  color: var(--color-text);
}

.c-footer a {
  text-decoration: none;
  transition: color 0.3s ease, opacity 0.3s ease;
}

/* 共通インナー（幅1408pxと左右余白24pxを担保） */
.c-footer__inner {
  max-width: 1408px;
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ----------------- Main Footer (Upper) ----------------- */
.c-footer__main {
  padding: 80px 0 64px;
}

.c-footer-nav {
  display: grid;
  /* 左（会社案内等）を広め、右（サービス紹介）を狭めの 1.5 : 1 の比率に */
  grid-template-columns: 1.5fr 1fr;
  gap: 64px;
  margin-bottom: 48px;
}

.c-footer-nav__title {
  font-size: 1.8rem;
  font-weight: bold;
  padding-bottom: 12px;
  border-bottom: 1px solid #bbbbbb;
  margin-top: 0;
  margin-bottom: 24px;
  color: #000;
}

.c-footer-nav__grid {
  display: grid;
  gap: 32px;
  align-items: start;
}

/* 左側：3カラム */
.c-footer-nav__block--company .c-footer-nav__grid {
  grid-template-columns: repeat(3, 1fr);
}

/* 右側：2カラム */
.c-footer-nav__block--service .c-footer-nav__grid {
  grid-template-columns: repeat(2, 1fr);
}

.c-footer-nav__subtitle {
  font-size: 1.4rem;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 12px;
  margin-left: 0;
  color: #000;
}

.c-footer-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-footer-nav__list li {
  margin-bottom: 8px;
}

.c-footer-nav__list a {
  display: inline-flex;
  align-items: center;
  font-size: 1.3rem;
  /* 1.2remから少しだけ上げて可読性UP */
  line-height: 1.6;
  color: #555555;
}

@media (hover: hover) {
  .c-footer-nav__list a:hover {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* 外部リンク用アイコン（ヘッダーと共通のSVGマスク方式） */
.c-footer__icon-external {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  flex-shrink: 0;
  background-color: currentColor;
  /* テキストの青色に自動追従 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ----------------- Certifications (認証マーク) ----------------- */
.c-footer-certs {
  background-color: #ffffff;
  padding: 32px;
  border-radius: 4px;
}

.c-footer-certs__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-footer-certs img {
  max-height: 72px;
  width: auto;
  display: block;
}

@media (hover: hover) {
  .c-footer-certs a:hover {
    opacity: 0.6;
  }
}

/* ----------------- Bottom Footer (Lower) ----------------- */
.c-footer__bottom {
  background-color: #323232;
  color: #a0a0a0;
  padding: 24px 0;
}

.c-footer__inner--bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.c-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-footer-links a {
  font-size: 1.2rem;
  color: #ccc;
}

@media (hover: hover) {
  .c-footer-links a:hover {
    color: #ffffff;
  }
}

.c-footer__copy {
  font-size: 1.1rem;
  margin: 0;
  color: #fff;
}


/* ==========================================================================
   Responsive (フッターのレスポンシブ)
   ========================================================================== */
@media (max-width: 992px) {

  /* PC〜タブレット：2カラム構成を縦積みに変更 */
  .c-footer-nav {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .c-footer__inner--bottom {
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .c-footer__main {
    padding: 48px 0 32px;
  }

  /* スマホ：すべてのグリッドを縦積み（1カラム）または2カラムに整理 */
  .c-footer-nav__block--company .c-footer-nav__grid {
    grid-template-columns: repeat(2, 1fr);
    /* 会社案内系は2列に */
  }

  .c-footer-nav__block--service .c-footer-nav__grid {
    grid-template-columns: 1fr;
    /* サービス紹介は1列に */
  }

  .c-footer-certs {
    padding: 24px 16px;
  }

  .c-footer-certs__list {
    gap: 24px;
  }

  .c-footer-certs img {
    max-height: 48px;
  }

  .c-footer-links {
    justify-content: center;
    gap: 16px 24px;
  }
}

/* ==========================================================================
   2 Columns Layout & Side Navigation
   - Container (Prefix: l-)
   - Sub Navigation Component (Prefix: c-sub-nav)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout Container
   -------------------------------------------------------------------------- */
.l-container {
  /* ヘッダー・パンくず・フッターと左右のライン（1408px / 24px）を統一 */
  max-width: 1160px;
  margin: 0 auto;
  padding: 48px 24px 80px;
  width: 100%;

  /* CSS Gridによる2カラム構築 */
  display: grid;
  grid-template-columns: 280px 1fr;
  /* メイン:可変 / サイド:280px固定 */
  gap: 64px;
  align-items: start;
  /* サイドバーの高さが不必要に伸びるのを防ぐ */
}

/* メインカラム */
.l-main {
  min-width: 0;
  /* テキスト・画像のはみ出し崩れ防止 */
}

/* ページタイトル例 */
.c-page-title {
  font-size: 2.8rem;
  font-weight: bold;
  color: var(--color-text, #333333);
  margin-top: 0;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--color-primary);
  line-height: 1.3;
}

/* サイドカラム */
.l-side {
  width: 100%;
}

.l-side__banner {
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   2. Sub Navigation Component (Side Menu)
   -------------------------------------------------------------------------- */
.c-sub-nav {
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* 親カテゴリー大見出し */
.c-sub-nav__title {
  margin: 0;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.03em;
}

.c-sub-nav__title-link {
  display: block;
  padding: 16px 20px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

@media (hover: hover) {
  .c-sub-nav__title-link:hover {
    background-color: rgba(0, 0, 0, 0.12);
  }
}

.c-sub-nav__subtitle {
  margin: 0;
  padding: 12px 20px;
  background-color: #f4f6f9;
  /* リンクエリアと区別する、上品な薄いグレー背景 */
  font-size: 1.3rem;
  /* リンク文字(1.4rem)より少し小さくして階層感を出す */
  font-weight: bold;
  color: #555555;
  border-top: 1px solid #eeeeee;
  /* 上のリストとの区切り線 */
  border-bottom: 1px solid #eeeeee;
  /* 下のリストとの区切り線 */
}

/* 一番上（大見出し h2 の直下）に小見出しが来た場合は、線の二重化を防ぐために上線を消す */
.c-sub-nav__title+.c-sub-nav__subtitle {
  border-top: none;
}

/* メニューリスト */
.c-sub-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-sub-nav__item {
  border-bottom: 1px solid #eeeeee;
}

.c-sub-nav__item:last-child {
  border-bottom: none;
}

/* リンクテキスト */
.c-sub-nav__link {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  font-size: 1.4rem;
  color: #333333;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease-out, background-color 0.3s ease-out, transform 0.3s ease-out;

  /* GPUアクセラレーションによるアニメーション時のチラつき防止 */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* リンク左側のアロー（CSS自動描画） */
.c-sub-nav__link::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid #888888;
  border-right: 1.5px solid #888888;
  transform: rotate(45deg);
  margin-right: 12px;
  flex-shrink: 0;
  transition: border-color 0.3s ease;
}

/* ----------------- Sub Nav Hover & Current State ----------------- */

/* ホバーアクション（右方向へスムーズにスライド） */
@media (hover: hover) {
  .c-sub-nav__link:not(.is-current):hover {
    color: var(--color-primary);
    background-color: #f8fafc;
    transform: translate3d(4px, 0, 0);
  }

  .c-sub-nav__link:not(.is-current):hover::before {
    border-color: var(--color-primary);
  }
}

/* 現在地（.is-current / aria-current="page"） */
.c-sub-nav__link.is-current {
  color: var(--color-primary);
  font-weight: bold;
  background-color: #f0f7ff;
  cursor: default;
}

/* 現在地を示す左端の太いアクセントライン */
.c-sub-nav__link.is-current::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background-color: var(--color-primary);
}

/* 現在地のアローカラー */
.c-sub-nav__link.is-current::before {
  border-color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   3. Responsive (Layout Container)
   -------------------------------------------------------------------------- */

/* タブレット（992px以下） */
@media (max-width: 992px) {
  .l-container {
    grid-template-columns: 1fr 240px;
    gap: 32px;
    padding-top: 32px;
    padding-bottom: 64px;
  }
}

/* スマホ（767px以下） */
@media (max-width: 767px) {
  .l-container {
    grid-template-columns: 1fr;
    /* 1カラム表示 */
    gap: 48px;
    padding-left: 24px;
    padding-right: 24px;
    padding-top: 24px;
    padding-bottom: 48px;
  }

  /* ▼ 追記: スマホ時の表示順を入れ替える ▼ */
  .l-main {
    order: 1;
    /* メインコンテンツを上（先）に表示 */
  }

  .l-side {
    order: 2;
    /* サイドナビゲーションを下（後）に表示 */
  }
}

/* ==========================================================================
   Page Specific & Components: About Us (p-aboutus)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shared Headings & Section
   -------------------------------------------------------------------------- */
.p-aboutus__section {
  margin-bottom: 64px;
}

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

/* 共通セクション見出し (H2) */
.c-heading-lvl2 {
  font-size: 2.2rem;
  font-weight: bold;
  color: var(--color-text, #333333);
  padding-left: 16px;
  border-left: 4px solid var(--color-primary);
  margin-top: 0;
  margin-bottom: 24px;
  line-height: 1.4;
}

.p-aboutus__section-lead {
  font-size: 1.5rem;
  line-height: 1.8;
  color: #555555;
  margin-top: 0;
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   2. Modern Tables (c-table)
   -------------------------------------------------------------------------- */
.c-table-wrapper {
  width: 100%;
  margin-bottom: 32px;
  overflow-x: auto;
  /* 画面が非常に狭い場合のはみ出しガード */
}

.c-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  font-size: 1.5rem;
  line-height: 1.6;
}

.c-table th,
.c-table td {
  padding: 18px 20px;
  border-bottom: 1px solid #e4e4e4;
  vertical-align: top;
}

/* 見出し列（TH）の背景と基本スタイル */
.c-table th {
  width: 220px;
  background-color: #f8fafc;
  color: #333333;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
}

.c-table td {
  color: #444444;
}

/* 沿革用テーブルの特有調整 */
.c-table--history th {
  width: 140px;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   3. Business List & Offices
   -------------------------------------------------------------------------- */
/* 事業内容リスト */
.p-aboutus__business-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-aboutus__business-list li {
  margin-bottom: 20px;
}

.p-aboutus__business-list li:last-child {
  margin-bottom: 0;
}

.p-aboutus__business-title {
  display: block;
  font-size: 1.5rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.p-aboutus__business-list p {
  margin: 0;
  font-size: 1.4rem;
  color: #555555;
  padding-left: 8px;
}

/* 事業所アイテム */
.p-aboutus__offices {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p-aboutus__office-item {
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px dashed #e0e0e0;
}

.p-aboutus__office-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.p-aboutus__office-item dt {
  font-weight: bold;
  font-size: 1.5rem;
  color: #333333;
  margin-bottom: 4px;
}

.p-aboutus__office-item dd {
  margin: 0;
  font-size: 1.4rem;
  color: #666666;
  line-height: 1.6;
}

.p-aboutus__lead {
  margin: 0;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   4. Group Companies (Card List)
   -------------------------------------------------------------------------- */
.p-aboutus__group-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.p-aboutus__group-card {
  background-color: #f8fafc;
  border: 1px solid #e8ecef;
  border-left: 2px solid var(--color-primary);
  padding: 20px 24px;
  border-radius: 0 6px 6px 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
  .p-aboutus__group-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }
}

.p-aboutus__group-name {
  font-size: 1.6rem;
  font-weight: bold;
  color: #222222;
  margin: 0 0 8px 0;
}

.p-aboutus__group-desc {
  font-size: 1.4rem;
  color: #555555;
  margin: 0;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   5. Figure (Image & Caption)
   -------------------------------------------------------------------------- */
.p-aboutus__figure {
  margin: 32px 0 0;
  text-align: center;
}

.p-aboutus__figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.p-aboutus__figure figcaption {
  margin-top: 12px;
  font-size: 1.3rem;
  color: #777777;
}

/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {
  .p-aboutus__section {
    margin-bottom: 48px;
  }

  .c-heading-lvl2 {
    font-size: 1.9rem;
    margin-bottom: 16px;
  }

  /* スマホ時はテーブルを見出しと値を縦積みに変更して読みやすく */
  .c-table,
  .c-table tbody,
  .c-table tr,
  .c-table th,
  .c-table td {
    display: block;
    width: 100% !important;
  }

  .c-table th {
    padding: 12px 16px 6px;
    background-color: transparent;
    color: var(--color-primary);
    border-bottom: none;
    font-size: 1.4rem;
  }

  .c-table td {
    padding: 0 16px 16px;
    font-size: 1.4rem;
  }

  .c-table tr {
    border-bottom: 1px solid #e4e4e4;
    background-color: #ffffff;
  }

  .c-table--history th {
    padding-bottom: 2px;
    font-size: 1.4rem;
  }

  .p-aboutus__group-card {
    padding: 16px 18px;
  }

  .p-aboutus__group-name {
    font-size: 1.5rem;
  }

  .p-aboutus__group-desc {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   Side Contact Banner (Prefix: c-side-contact)
   ========================================================================== */
.c-side-contact {
  background-color: #f8fafc;
  /* サイドナビのホバー時と同じ、上品な極薄グレー */
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.c-side-contact__title {
  font-size: 1.4rem;
  font-weight: bold;
  color: #333333;
  margin-top: 0;
  margin-bottom: 16px;
}

/* ==========================================================================
   Button Component (Prefix: c-button)
   ※サイト全体で使い回せる汎用ボタン設定
   ========================================================================== */
.c-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* 親要素の幅に合わせて広がる */
  padding: 14px 16px;
  background-color: var(--color-primary);
  color: #ffffff !important;
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
}

/* ホバーアクション（少し浮き上がり、影と色味が濃くなる） */
@media (hover: hover) {
  .c-button:hover {
    color: #ffffff;
    /* ▼ もし「var(--color-primary)」より暗い色（例:#014ba0）があればそちらに変更しても綺麗です ▼ */
    transform: translateY(-2px);
    /* 上に2pxフワッと浮く */
    box-shadow: 0 6px 16px rgba(1, 91, 213, 0.25);
    /* ブランドカラーの影を落とす */
    text-decoration: none;
  }
}

/* 外部リンク用アイコン（ヘッダーと共通のSVGマスクを使用） */
.c-button__icon-external {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  flex-shrink: 0;
  background-color: currentColor;
  /* テキストの「白色」に自動追従します */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ==========================================================================
   Page Specific: Top Message (p-message)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Catchphrase (キャッチコピー)
   -------------------------------------------------------------------------- */
.p-message__catch {
  /* ブランドカラーの青色（変数が効かない環境用のフォールバックも記載） */
  color: var(--color-primary, #015bd5);

  /* 美しい明朝体の指定（Noto Serif / 游明朝 / ヒラギノ明朝 等） */
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-weight: bold;

  /* テキストサイズと余白 */
  font-size: 2.8rem;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 48px;
  letter-spacing: 0.05em;
  /* 明朝体を美しく見せるための字間調整 */
}

/* --------------------------------------------------------------------------
   2. PC Layout (12分割グリッド)
   -------------------------------------------------------------------------- */
.p-message__body {
  /* 12分割のグリッドレイアウトを設定 */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 48px;
  /* テキストと画像の間隔 */
  align-items: start;
}

/* テキストブロック（9/12） */
.p-message__text {
  grid-column: span 9;
  /* 12分割中、9マス分を使用 */
}

.p-message__text p {
  font-size: 1.5rem;
  line-height: 1.8;
  color: #333333;
  margin-top: 0;
  margin-bottom: 24px;
  text-align: justify;
  /* 両端揃えで新聞のように美しい文章ブロックに */
}

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

/* 画像ブロック（3/12） */
.p-message__image {
  grid-column: span 3;
  /* 12分割中、3マス分を使用 */
}

.p-message__image img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================================
   3. Responsive (SP時: 767px以下)
   ========================================================================== */
@media (max-width: 767px) {

  /* キャッチコピーの文字サイズ調整 */
  .p-message__catch {
    font-size: 2.2rem;
    margin-bottom: 32px;
  }

  /* 縦積みの1カラムレイアウトに切り替え */
  .p-message__body {
    grid-template-columns: 1fr;
    /* 12分割を解除し、1列にする */
    gap: 32px;
  }

  .p-message__text,
  .p-message__image {
    grid-column: span 1;
    /* 100%幅を使用 */
  }

  /* SP時は画像を中央配置にする */
  .p-message__image {
    display: flex;
    justify-content: center;
    margin-top: 16px;
  }
}

/* ==========================================================================
   Shared Component: H3 Heading
   ========================================================================== */
/* H3見出し（企業方針・品質への取り組み等で使用） */
.c-heading-lvl3 {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--color-primary);
  padding-bottom: 12px;
  border-bottom: 2px solid #eeeeee;
  margin-top: 0;
  margin-bottom: 24px;
}

/* ==========================================================================
   Page Specific: Philosophy (p-philosophy)
   ========================================================================== */
.p-philosophy__section {
  margin-bottom: 64px;
}

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

/* 画像のレスポンシブ対応（スマホ幅で自動縮小） */
.p-philosophy__img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* キャッチフレーズ（社是など画像の背景エリア） */
.p-philosophy__catch {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  background-color: #f8fafc;
  /* 上品な薄いグレー背景 */
  border-radius: 6px;
}

.p-philosophy__catch--small {
  padding: 0;
  background-color: transparent;
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Principles (経営理念 3カラムカード)
   -------------------------------------------------------------------------- */
.p-philosophy__principles {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 32px;
  margin-bottom: 64px;
}

.p-philosophy__principle {
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 32px 24px;
  margin: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.p-philosophy__principle dt {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 16px;
  line-height: 1.4;
}

.p-philosophy__principle dd {
  font-size: 1.4rem;
  color: #555555;
  line-height: 1.8;
  margin: 0;
  text-align: justify;
}

/* --------------------------------------------------------------------------
   Statement & Quality (企業方針・品質への取り組み)
   -------------------------------------------------------------------------- */
.p-philosophy__statement {
  margin-bottom: 48px;
}

.p-philosophy__quality-body {
  background-color: #f8fafc;
  padding: 40px;
  border-radius: 6px;
  font-size: 1.4rem;
  color: #333333;
}

.p-philosophy__quality-body p {
  margin-top: 0;
  margin-bottom: 24px;
  line-height: 1.6;
}

.p-philosophy__quality-list {
  list-style: none;
  /* デフォルトの数字を消す（テキストに直書きされているため） */
  margin: 0 0 32px 0;
  padding: 0;
}

.p-philosophy__quality-list li {
  margin-bottom: 8px;
  line-height: 1.6;
  color: #444444;
}

/* 署名エリア */
.p-philosophy__quality-sign {
  text-align: right;
  margin-top: 32px;
}

.p-philosophy__quality-sign p {
  margin-bottom: 4px;
  color: #555555;
}

.p-philosophy__quality-name {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333333 !important;
}

/* リンクボタンの配置 */
.p-philosophy__quality-action {
  margin-top: 40px;
  text-align: center;
}

.p-philosophy__quality-action .c-button {
  max-width: 320px;
  /* ボタンが間延びしないように制限 */
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Basic (基本方針)
   -------------------------------------------------------------------------- */
.p-philosophy__basic {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}


/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {
  .p-philosophy__section {
    margin-bottom: 48px;
  }

  .p-philosophy__catch {
    padding: 32px 16px;
  }

  /* 経営理念：スマホ時は1カラムに縦積み */
  .p-philosophy__principles {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 48px;
  }

  .p-philosophy__principle {
    padding: 24px 20px;
  }

  .p-philosophy__quality-body {
    padding: 24px 16px;
  }
}

/* ==========================================================================
   Page Specific: News Release (p-news)
   ========================================================================== */
.p-news {
  background-color: #ffffff;
}

/* ニュースリストのコンテナ */
.p-news__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 各ニュース項目 */
.p-news__item {
  border-bottom: 1px solid #eeeeee;
}

/* （一部の特定ページで非表示にするための制御クラス） */
.p-news__item.hide {
  /* ※ニュース一覧ページでは表示させたままにするため、あえて display:none を定義していません */
}

/* --------------------------------------------------------------------------
   リンクがある行とない行の共通レイアウト
   -------------------------------------------------------------------------- */
.p-news__link,
.p-news__inner {
  display: flex;
  align-items: flex-start;
  /* ▼ 修正: リンク行は右側にアイコン用の余白(48px)を確保 ▼ */
  padding: 24px 48px 24px 16px;
  position: relative;
  /* アイコンを絶対配置するための基準 */
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s ease;
}

/* リンクがない行（.p-news__inner）は右余白を通常に戻す */
.p-news__inner {
  padding-right: 16px;
}


/* --------------------------------------------------------------------------
   【自動判定】アイコンの付与（HTML変更不要）
   -------------------------------------------------------------------------- */
/* ① 通常リンク（内部リンク）用：右アロー */
.p-news__link::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-top: 2px solid #aaaaaa;
  border-right: 2px solid #aaaaaa;
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -3px;
  /* 高さの半分を引いて真ん中に配置 */
  transition: border-color 0.3s ease;
}

/* ② 外部リンク用：別窓アイコン（HTMLの target="_blank" を自動検知） */
.p-news__link[target="_blank"]::after {
  width: 14px;
  height: 14px;
  border: none;
  /* アローの線を消す */
  transform: none;
  /* 回転を解除 */
  background-color: #aaaaaa;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  margin-top: -7px;
  transition: background-color 0.3s ease;
}

/* ホバーアクション */
@media (hover: hover) {
  .p-news__link:hover {
    background-color: #f8fafc;
  }

  /* ホバー時にアイコンをブランドカラーに変化させる */
  .p-news__link:hover::after {
    border-color: var(--color-primary);
  }

  .p-news__link[target="_blank"]:hover::after {
    background-color: var(--color-primary);
  }
}

/* --- 日付・テキスト・アイコン画像のCSS（※変更なし そのまま残す） --- */
.p-news__date {
  width: 140px;
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-right: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  line-height: 1.4;
}

.p-news__date strong {
  color: #d32f2f;
  font-size: 1.3rem;
  display: block;
  width: 100%;
}

.p-news__icon {
  display: block;
  width: 78px;
  height: 14px;
}

.p-news__text {
  flex-grow: 1;
  font-size: 1.4rem;
  line-height: 1.7;
  color: #333333;
  word-wrap: anywhere;
}

.p-news__text a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.3s ease;
}

@media (hover: hover) {
  .p-news__text a:hover {
    text-decoration: none;
    color: #004bb5;
  }
}

/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {

  /* スマホ時はFlexboxの方向を縦(column)に変更 */
  .p-news__link,
  .p-news__inner {
    flex-direction: column;
    /* ▼ 修正: スマホ時もアイコンが被らないように右余白を確保 ▼ */
    padding: 20px 40px 20px 16px;
  }

  .p-news__inner {
    padding-right: 16px;
  }

  /* 日付とテキストが縦に積まれる */
  .p-news__date {
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }
}

/* ==========================================================================
   Page Specific: Quality (p-quality)
   ========================================================================== */

.p-quality__section {
  background-color: #ffffff;
}

.p-quality__content {
  font-size: 1.5rem;
  line-height: 1.8;
  /* 長い文章が読みやすい、ゆったりとした行間設定 */
  color: #333333;
  text-align: justify;
  /* 両端揃え（右端の文字のガタつきを無くして美しく見せる） */
}

/* 各段落（pタグ）の間の余白 */
.p-quality__content p {
  margin-top: 0;
  margin-bottom: 32px;
  /* <br><br>の代わりに、CSSで正確な余白を確保します */
}

/* 最後の段落の下には余白を作らない */
.p-quality__content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {

  /* スマホ時は画面が狭いため、文字サイズと段落間の余白を微調整 */
  .p-quality__content {
    font-size: 1.4rem;
    line-height: 1.7;
    text-align: left;
    /* スマホ幅のjustifyは単語間に不自然な隙間が空きやすいため、左揃えに戻す */
  }

  .p-quality__content p {
    margin-bottom: 24px;
  }
}

/* ==========================================================================
   Page Specific: Eco (p-eco)
   ========================================================================== */

/* --------------------------------------------------------------------------
   General Settings
   -------------------------------------------------------------------------- */
.p-eco {
  color: #333333;
}

.p-eco__section {
  margin-bottom: 80px;
}

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

/* 共通：pタグのスタイル */
.p-eco p {
  font-size: 1.5rem;
  line-height: 1.8;
  margin-top: 0;
  margin-bottom: 24px;
  text-align: justify;
}

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

/* 上付き文字（CO2など）の調整 */
.superscript {
  vertical-align: super;
  font-size: 0.8em;
}

/* --------------------------------------------------------------------------
   Hero Section (導入部分)
   -------------------------------------------------------------------------- */
.p-eco__hero-inner {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  background-color: #f6f9f6;
  /* ecoらしい、ほんのり薄いグリーン背景 */
  padding: 40px;
  border-radius: 6px;
}

.p-eco__hero-img {
  flex-shrink: 0;
}

.p-eco__hero-img img {
  border-radius: 4px;
  display: block;
}

.p-eco__catch {
  margin-top: 0;
  margin-bottom: 24px;
}

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

/* --------------------------------------------------------------------------
   Article Blocks (各取り組みブロック)
   -------------------------------------------------------------------------- */
.p-eco__block {
  margin-bottom: 56px;
}

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

/* H4見出し */
.p-eco__heading-lvl4 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #444444;
  margin-top: 0;
  margin-bottom: 16px;
  line-height: 1.6;
}

/* 画像とテキストの横並びレイアウト */
.p-eco__media {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

/* 画像を右側にしたい場合（リバース） */
.p-eco__media--reverse {
  flex-direction: row-reverse;
}

.p-eco__media-fig {
  margin: 0;
  flex-shrink: 0;
}

.p-eco__media-fig img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Elements (ボタン、リスト、DLなど)
   -------------------------------------------------------------------------- */
/* リンクボタンの配置 */
.p-eco__action {
  margin-top: 32px;
}

.p-eco__action .c-button {
  max-width: 480px;
}

/* DLリスト (インキや3Rの説明) */
.p-eco__dl {
  margin: 0;
}

.p-eco__dl dt {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.p-eco__dl dd {
  margin: 0 0 16px 0;
  font-size: 1.5rem;
  line-height: 1.8;
  color: #333333;
}

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

/* 3R政策のノート（囲み枠） */
.p-eco__note {
  background-color: #f8fafc;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  padding: 24px;
  margin-top: 24px;
}

/* その他の取り組み リスト */
.p-eco__list {
  list-style: none;
  margin: 0 0 32px 0;
  padding: 0;
}

.p-eco__list li {
  font-size: 1.5rem;
  line-height: 1.8;
  margin-bottom: 8px;
  padding-left: 20px;
  position: relative;
}

/* カスタム中黒（・） */
.p-eco__list li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--color-primary);
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 10px;
}

.p-eco__summary {
  font-weight: bold;
  background-color: #f6f9f6;
  padding: 24px;
  border-radius: 4px;
}

/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {
  .p-eco__section {
    margin-bottom: 56px;
  }

  .p-eco p {
    font-size: 1.4rem;
    text-align: left;
    /* スマホ時は左揃え */
  }

  .p-eco__dl dt,
  .p-eco__dl dd,
  .p-eco__list li {
    font-size: 1.4rem;
  }

  /* Heroセクションの縦積み */
  .p-eco__hero-inner {
    flex-direction: column;
    padding: 24px 16px;
    gap: 24px;
  }

  .p-eco__hero-img {
    width: 100%;
    text-align: center;
  }

  .p-eco__hero-img img {
    margin: 0 auto;
  }

  /* Mediaセクションの縦積み */
  .p-eco__media,
  .p-eco__media--reverse {
    flex-direction: column;
    gap: 24px;
  }

  .p-eco__media-fig {
    width: 100%;
    text-align: center;
  }

  .p-eco__media-fig img {
    margin: 0 auto;
  }
}

/* ==========================================================================
   Page Specific: Location (p-location)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page Navigation (アンカーリンク)
   -------------------------------------------------------------------------- */
.p-location__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  /* 上下16px、左右32pxのゆったりとした余白 */
  margin: 0 0 48px 0;
  padding: 0;
  list-style: none;
}

/* スッキリしたテキストリンク型のデザイン */
.p-location__nav-link {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  /* ホバー時の下線用（透明にしておく） */
  transition: all 0.3s ease;
}

/* ページ内移動（下方向）を示す下向きアローアイコン */
.p-location__nav-link::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  /* 文字色に自動追従 */
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: 10px;
  margin-top: -4px;
  /* アローの縦位置を微調整 */
}

/* ホバー時のアクション（色を少し濃くし、下線を表示） */
@media (hover: hover) {
  .p-location__nav-link:hover {
    color: #004bb5;
    /* var(--color-primary)より少し濃い青を指定すると綺麗です */
    border-bottom-color: currentColor;
  }
}

/* --------------------------------------------------------------------------
   Sections & Headings
   -------------------------------------------------------------------------- */
.p-location__section {
  margin-bottom: 64px;
}

/* 詳細マップ画像ボタンの調整 */
.p-location__map-btn {
  vertical-align: middle;
  margin-left: 8px;
  margin-bottom: 2px;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  a:hover .p-location__map-btn {
    opacity: 0.7;
  }
}

/* --------------------------------------------------------------------------
   Cards: 営業窓口
   -------------------------------------------------------------------------- */
.p-location__cards {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  /* PC: 2カラム */
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-location__card {
  display: flex;
  /* 写真とテキストを横並びに */
  gap: 24px;
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.p-location__card-thumb {
  margin: 0;
  flex-shrink: 0;
  width: 180px;
  /* 画像の幅を固定 */
}

.p-location__card-thumb img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}

.p-location__card-info {
  margin: 0;
  flex-grow: 1;
}

.p-location__card-name {
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: 12px;
}

.p-location__card-name a {
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.p-location__card-name a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  margin-top: -2px;
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .p-location__card-name a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .p-location__card-name a:hover::after {
    transform: rotate(45deg) translate(2px, -2px);
  }

}

.p-location__card-address,
.p-location__card-tel {
  margin: 0 0 8px 0;
  font-size: 1.4rem;
  color: #333333;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   営業窓口：ネット印刷の注記エリア（p-location__cardsの下）
   -------------------------------------------------------------------------- */
.p-location__note {
  margin: 32px 0 0 0;
  padding: 16px 24px;
  background-color: #fff4f4;
  /* 注意を促す薄い赤背景 */
  border: 1px solid #ffcdd2;
  /* うっすらとした赤枠 */
  border-radius: 4px;
}

.p-location__note p {
  margin: 0;
  font-size: 1.4rem;
  color: #d32f2f;
  line-height: 1.6;
}

.p-location__note a {
  color: #d32f2f;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .p-location__note a:hover {
    opacity: 0.7;
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
   Factories: 工場
   -------------------------------------------------------------------------- */
.p-location__factories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* PC: 2カラム */
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-location__factory {
  background-color: #f8fafc;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  padding: 20px 24px;
}

.p-location__factory-info {
  margin: 0;
}

.p-location__factory-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.p-location__factory-name a {
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.p-location__factory-name a::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
  margin-top: -2px;
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .p-location__factory-name a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .p-location__factory-name a:hover::after {
    transform: rotate(45deg) translate(2px, -2px);
  }
}

.p-location__factory-address,
.p-location__factory-tel {
  margin: 0 0 4px 0;
  font-size: 1.4rem;
  color: #555555;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Figure: 下部画像
   -------------------------------------------------------------------------- */
.p-location__figure {
  margin: 0;
  text-align: center;
}

.p-location__figure img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {

  .p-location__section {
    margin-bottom: 48px;
    scroll-margin-top: 90px;
    /* スマホ用ヘッダー高さのオフセット */
  }

  /* グリッドを1カラムに（縦積み） */
  .p-location__cards,
  .p-location__factories {
    grid-template-columns: 1fr;
  }

  /* 営業窓口カード：画像とテキストを縦並びに */
  .p-location__card {
    flex-direction: column;
    gap: 16px;
    padding: 20px;
  }

  .p-location__card-thumb {
    width: 100%;
    text-align: center;
  }

  .p-location__card-thumb img {
    max-width: 240px;
    /* スマホでも画像が大きくなりすぎないように制限 */
    margin: 0 auto;
  }
}

/* ==========================================================================
   Page Specific: Base Location Information (p-base)
   ※拠点共通のレイアウトクラス
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero & Headings
   -------------------------------------------------------------------------- */
.p-base__hero {
  margin-bottom: 48px;
}

.p-base__title {
  margin-bottom: 24px;
}

.p-base__title-sub {
  font-size: 1.8rem;
  font-weight: normal;
  color: #555555;
  display: inline-block;
  margin-left: 8px;
}

.p-base__hero-img {
  margin: 0;
  text-align: center;
}

.p-base__hero-img img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

.p-base__section {
  margin-bottom: 80px;
}

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

.p-base__block {
  margin-bottom: 48px;
}

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

/* --------------------------------------------------------------------------
   Information Card (住所・連絡先など)
   -------------------------------------------------------------------------- */
.p-base__info-card {
  background-color: #f8fafc;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  padding: 32px;
}

.p-base__dl {
  margin: 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  /* 左見出し(固定) 右内容(可変)の表組み */
  gap: 12px 24px;
}

.p-base__dl dt {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
}

.p-base__dl dd {
  margin: 0;
  font-size: 1.5rem;
  color: #333333;
  line-height: 1.6;
}

.p-base__attention {
  color: #d32f2f;
  font-weight: bold;
}

.p-base__note {
  margin: 16px 0 0 0;
  padding-top: 16px;
  border-top: 1px dashed #cccccc;
  font-size: 1.4rem;
  color: #555555;
}

.p-base__note a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover: hover) {
  .p-base__note a:hover {
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
   Factory List (画像とリストの横並び)
   -------------------------------------------------------------------------- */
.p-base__media {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.p-base__media-fig {
  margin: 0;
  flex-shrink: 0;
  width: 300px;
}

.p-base__media-fig img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.p-base__media-body {
  flex-grow: 1;
}

/* 工場一覧のリスト */
.p-base__factory-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2カラムで表示 */
  gap: 24px;
}

.p-base__factory-item {
  margin: 0;
}

.p-base__factory-item dt {
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.p-base__factory-item dd {
  margin: 0 0 4px 0;
  font-size: 1.4rem;
  color: #333333;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Access & Map
   -------------------------------------------------------------------------- */
.p-base__map-wrap {
  margin-bottom: 40px;
}

.p-base__map-link {
  text-align: right;
  margin-bottom: 8px;
}

.p-base__map-link a {
  font-size: 1.3rem;
  color: var(--color-primary);
  text-decoration: underline;
}

/* iframeをレスポンシブ対応させる（16:9） */
.p-base__map-iframe {
  position: relative;
  width: 100%;
  padding-top: 52.18%;
  /* 346 ÷ 663 の比率 */
  background-color: #eeeeee;
  border-radius: 4px;
  overflow: hidden;
}

.p-base__map-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.p-base__access-item {
  margin: 0 0 24px 0;
  padding-bottom: 24px;
  border-bottom: 1px solid #e4e4e4;
}

.p-base__access-item:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.p-base__access-item dt {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 12px;
}

.p-base__access-item dd {
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  color: #333333;
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}

/* リスト風の中黒 */
.p-base__access-item dd::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #aaaaaa;
}

.p-base__access-fig {
  margin: 24px 0 0 0;
}

.p-base__access-fig img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {

  .p-base__title-sub {
    display: block;
    margin-left: 0;
    margin-top: 8px;
    font-size: 1.6rem;
  }

  /* 住所カードを縦並びに */
  .p-base__info-card {
    padding: 24px 20px;
  }

  .p-base__dl {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .p-base__dl dt {
    margin-top: 12px;
  }

  .p-base__dl dt:first-child {
    margin-top: 0;
  }

  /* 工場エリアの縦積み */
  .p-base__media {
    flex-direction: column;
    gap: 24px;
  }

  .p-base__media-fig {
    width: 100%;
    text-align: center;
  }

  .p-base__media-fig img {
    max-width: 300px;
    margin: 0 auto;
  }

  .p-base__factory-list {
    grid-template-columns: 1fr;
    /* スマホ時は1カラム */
  }

}

/* ==========================================================================
   Page Specific: Facility Introduction (p-facility)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero Section (トップの導入部分)
   -------------------------------------------------------------------------- */
.p-facility__hero {
  margin-bottom: 64px;
}

.p-facility__title {
  margin-bottom: 24px;
}

.p-facility__hero-img {
  margin: 0 0 24px 0;
  text-align: center;
}

.p-facility__hero-img img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

.p-facility__hero-desc {
  background-color: #f8fafc;
  padding: 24px 32px;
  border-radius: 4px;
  border-left: 4px solid var(--color-primary);
}

.p-facility__hero-desc p {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.8;
  color: #333333;
  text-align: justify;
}

/* --------------------------------------------------------------------------
   Facility List (施設紹介一覧)
   -------------------------------------------------------------------------- */
.p-facility__item {
  margin-bottom: 64px;
}

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

/* 画像とテキストを横に並べるカードレイアウト */
.p-facility__card {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* 画像エリアの比率固定（PC時はカード幅の約55%を使用） */
.p-facility__card-fig {
  margin: 0;
  flex: 0 0 55%;
}

.p-facility__card-fig img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  /* 写真に薄く影を落として高級感を出す */
}

/* テキストエリア */
.p-facility__card-body {
  flex: 1;
  /* 残りのスペースをすべて使う */
}

.p-facility__card-body p {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.8;
  color: #444444;
  text-align: justify;
}

/* 画像のみで全幅を使う場合（駐車場・駐輪場など） */
.p-facility__card--full .p-facility__card-fig {
  flex: 0 0 100%;
}


/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {

  .p-facility__hero {
    margin-bottom: 48px;
  }

  .p-facility__hero-desc {
    padding: 20px 16px;
  }

  .p-facility__hero-desc p,
  .p-facility__card-body p {
    font-size: 1.4rem;
    text-align: left;
    /* スマホ時は左揃え */
  }

  .p-facility__item {
    margin-bottom: 48px;
  }

  /* カードを縦積みに変更 */
  .p-facility__card {
    flex-direction: column;
    gap: 16px;
  }

  .p-facility__card-fig {
    flex: none;
    width: 100%;
  }

}

/* ==========================================================================
   Page Specific: Equipment Introduction (p-equipment)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.p-equipment__hero {
  margin-bottom: 64px;
}

.p-equipment__title {
  margin-bottom: 24px;
}

.p-equipment__hero-img {
  margin: 0 0 24px 0;
  text-align: center;
}

.p-equipment__hero-img img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  margin: 0 auto;
}

.p-equipment__hero-desc {
  background-color: #f8fafc;
  padding: 24px 32px;
  border-radius: 4px;
}

.p-equipment__hero-desc p {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.8;
  color: #333333;
  text-align: justify;
}

/* --------------------------------------------------------------------------
   Sections & Headings
   -------------------------------------------------------------------------- */
.p-equipment__section {
  margin-bottom: 80px;
}

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

/* H2見出しの中にある長い補足説明（製版 〇〇／〇〇...） */
.p-equipment__section-sub {
  display: block;
  margin-top: 8px;
  font-size: 1.4rem;
  font-weight: normal;
  color: #555555;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Machine Block (各設備のレイアウト)
   -------------------------------------------------------------------------- */
.p-equipment__list {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.p-equipment__machine {
  margin: 0;
}

/* 各設備のタイトルとバッジ画像 */
.p-equipment__machine-title {
  display: flex;
  flex-wrap: wrap;
  /* 長い場合やスマホで落ちるように */
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.p-equipment__badge {
  max-width: 180px;
  /* バッジ画像が大きくなりすぎないように制限 */
  height: auto;
  display: block;
  margin-left: auto;
}

/* 画像とテキストのコンテナ（標準は横並び） */
.p-equipment__machine-body {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

.p-equipment__machine-fig {
  margin: 0;
  flex: 0 0 50%;
  /* PC時は半分の幅を使用 */
}

.p-equipment__machine-fig img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

.p-equipment__machine-txt {
  flex: 1;
}

.p-equipment__machine-txt p {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.5rem;
  line-height: 1.8;
  color: #444444;
  text-align: justify;
}

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

/* --------------------------------------------------------------------------
   Modifier: Wide Image (大判プリンターなど、幅広画像の設備)
   -------------------------------------------------------------------------- */
/* 画像を大きく見せたい（元type2）場合は縦積みにする */
.p-equipment__machine--wide .p-equipment__machine-body {
  flex-direction: column;
  gap: 20px;
}

.p-equipment__machine--wide .p-equipment__machine-fig {
  flex: none;
  width: 100%;
}


/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {

  .p-equipment__hero {
    margin-bottom: 48px;
  }

  .p-equipment__hero-desc {
    padding: 20px 16px;
  }

  .p-equipment__hero-desc p,
  .p-equipment__machine-txt p {
    font-size: 1.4rem;
    text-align: left;
    /* スマホ時は左揃え */
  }

  .p-equipment__section {
    margin-bottom: 56px;
  }

  .p-equipment__list {
    gap: 48px;
  }

  /* 見出しのバッジ配置調整 */
  .p-equipment__machine-title {
    align-items: flex-start;
    flex-direction: column;
    /* スマホ時はバッジをタイトルの下に配置 */
    gap: 8px;
  }

  /* すべての設備を縦積みに変更 */
  .p-equipment__machine-body {
    flex-direction: column;
    gap: 16px;
  }

  .p-equipment__machine-fig {
    flex: none;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   工場ページ用の追加スタイル (p-base の拡張)
   -------------------------------------------------------------------------- */

/* 拠点が1つだけの場合は1カラム表示にする */
.p-base__factory-list--single {
  grid-template-columns: 1fr;
}

/* ==========================================================================
   Component: Button (c-button)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base Style (基本サイズ)
   -------------------------------------------------------------------------- */
.c-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: var(--color-primary, #015bd5);
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: bold;
  text-decoration: none;
  /* 画像の意匠に合わせてシャープな長方形（角丸を極力小さく）に設定 */
  border-radius: 2px;
  padding: 16px 48px;
  width: auto;
  max-width: 100%;
  transition: background-color 0.3s ease;
}

/* ホバー時のアクション（色を少し濃くする） */
@media (hover: hover) {
  .c-button:hover {
    background-color: #004bb5;
    color: #ffffff;
    text-decoration: none;
  }
}

/* --------------------------------------------------------------------------
   Icon (アイコンの自動付与)
   -------------------------------------------------------------------------- */
/* ① 内部リンクデフォルト：右アロー */
.c-button::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.3s ease;
}

/* ホバー時、アローが右へスッと動くマイクロインタラクション */
@media (hover: hover) {
  .c-button:not([target="_blank"]):hover::after {
    right: 16px;
  }
}

/* ② 外部リンク：別窓アイコン（ target="_blank" を自動検知 ） */
.c-button[target="_blank"]::after {
  width: 16px;
  height: 16px;
  border: none;
  transform: translateY(-50%);
  background-color: #ffffff;
  /* SVGマスクを用いて白単色の別窓アイコンを描画 */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}


/* --------------------------------------------------------------------------
   Modifiers (サイズのバリエーション)
   -------------------------------------------------------------------------- */
/* 【CTA用ラージ】画像のように文字が大きく、幅広（最大600px）の目立つボタン */
.c-button--lg {
  padding: 24px 64px;
  font-size: 2.2rem;
  width: 100%;
  max-width: 600px;
  letter-spacing: 0.05em;
  /* 文字間を少し開けて視認性向上 */
}

.c-button--lg::after {
  width: 12px;
  height: 12px;
  right: 32px;
}

@media (hover: hover) {
  .c-button--lg:not([target="_blank"]):hover::after {
    right: 24px;
  }
}

.c-button--lg[target="_blank"]::after {
  width: 20px;
  height: 20px;
}

/* 【スモール】サイドナビや、さりげないリンク用 */
.c-button--sm {
  padding: 10px 32px;
  font-size: 1.4rem;
}

.c-button--sm::after {
  width: 6px;
  height: 6px;
  right: 16px;
}

@media (hover: hover) {
  .c-button--sm:not([target="_blank"]):hover::after {
    right: 12px;
  }
}

.c-button--sm[target="_blank"]::after {
  width: 14px;
  height: 14px;
}


/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {

  /* スマホ時は画面幅いっぱいに広がりやすくする */
  .c-button {
    width: 100%;
    padding-left: 24px;
    padding-right: 48px;
  }

  .c-button--lg {
    font-size: 1.8rem;
    /* スマホ画面で文字が大きすぎないように調整 */
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* ==========================================================================
   Component: Page Top Button (c-page-top)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper (外枠：配置と表示制御を担う)
   -------------------------------------------------------------------------- */
.c-page-top {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* --------------------------------------------------------------------------
   Link Button (ボタン本体：見た目とホバーアクションを担う)
   -------------------------------------------------------------------------- */
.c-page-top__link {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  background-color: var(--color-primary, #015bd5);
  border-radius: 50%;
  /* 完全な円形にする */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  /* ふんわりとした影 */
  text-decoration: none;
  transition: all 0.3s ease;
}

/* 上向きのアロー（矢印） */
.c-page-top__link::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  transform: rotate(45deg);
  margin-top: 4px;
  /* 中央に見えるように微調整 */
}

/* ホバー時のアクション */
@media (hover: hover) {
  .c-page-top__link:hover {
    background-color: #004bb5;
    /* 少し濃い青色に */
    transform: translateY(-4px);
    /* 上にフワッと少し浮く */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* 浮いた分、影を少し広げる */
  }
}

/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {

  /* スマホ時は邪魔にならないよう、少し小さくして画面端に寄せる */
  .c-page-top {
    right: 16px;
    bottom: 16px;
  }

  .c-page-top__link {
    width: 48px;
    height: 48px;
  }

  .c-page-top__link::before {
    width: 8px;
    height: 8px;
    border-width: 2px;
    margin-top: 2px;
  }
}

/* ==========================================================================
   Project: Hero Section (p-hero)
   ========================================================================== */
.p-hero {
  position: relative;
  height: 90vh;
  min-height: 500px;
  /* 画面が低すぎる場合の担保 */
  width: 100%;
  overflow: hidden;
  background-color: #000;
  /* 読み込み時のチラつき防止 */
}

/* --------------------------------------------------------------------------
   Background Image & Overlay
   -------------------------------------------------------------------------- */
.p-hero__bg,
.p-hero__figure,
.p-hero__img {
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
   Background Image & Overlay
   -------------------------------------------------------------------------- */
.p-hero__img {
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;

  /* ▼ 10秒かけてゆっくりズームアウトさせる ▼ */
  animation: slowZoomOut 10s ease-out forwards;
}

/* ゆっくりズームアウトするアニメーション */
@keyframes slowZoomOut {
  0% {
    transform: scale(1.05);
    /* ほんの少し（5%）拡大した状態からスタート */
  }

  100% {
    transform: scale(1);
    /* 10秒後に等倍に落ち着く */
  }
}

/* モダンなオーバーレイ（画像の下半分を少し暗くして文字を読ませる） */
.p-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 上は透明、下に行くほど黒くなるグラデーション */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.6) 100%);
  z-index: 1;
}

/* ▼ 修正：0%〜60%までは完全に透明にし、画像中央をくっきり見せる。60%以降から徐々に白くする ▼ */
.p-hero__bg.u-p2::after {
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 60%,
      /* ここまで透明をキープ */
      rgba(255, 255, 255, 0.8) 100%);
}

/* --------------------------------------------------------------------------
   Content (Title & Lead)
   -------------------------------------------------------------------------- */
.p-hero__content {
  position: absolute;
  bottom: 10%;

  /* ▼ 画面の左端ではなく、中央を基準に配置する ▼ */
  left: 50%;
  transform: translateX(-50%);

  /* ▼ サイト共通の最大幅を指定（ヘッダー等と同じ数値にしてください） ▼ */
  width: 100%;
  max-width: calc(1408px + 8% - 48px);
  /* ★ここをサイトのコンテンツ幅に合わせる */
  padding: 0 4%;
  /* 画面が狭い時の最低限の左右余白 */

  z-index: 2;
  color: #ffffff;
  /* アニメーションに transform を使うため、ここでは一旦外すか、統合します */
  animation: fadeInUpHero 1s ease-out forwards;
}

/* アニメーションも少し修正（translateX(-50%)を維持したまま動かす） */
@keyframes fadeInUpHero {
  0% {
    opacity: 0;
    transform: translate(-50%, 20px);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.p-hero__title {
  font-family: "M PLUS 1p", sans-serif;
  font-size: clamp(36px, 2rem + 3vw, 72px);
  /* 少し大きくしてインパクト増 */
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin-bottom: 24px;
  /* 強い白フチではなく、自然なドロップシャドウで質感を高める */
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.p-hero__title.u-p2 {
  color: #0064dc;
  /* ▼ 修正：弱いシャドウではなく、複数の強い白を重ねて文字の周りを光らせる（白フチ効果） ▼ */
  text-shadow:
    0 0 12px rgba(255, 255, 255, 1),
    0 0 24px rgba(255, 255, 255, 0.9);
}

.p-hero__lead {
  font-size: clamp(14px, 0.875rem + 0.5vw, 18px);
  line-height: 1.8;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.p-hero__lead.u-p2 {
  color: #333;
  /* ▼ 修正：リード文も同様に強い白の光彩で文字を浮かび上がらせる ▼ */
  text-shadow:
    0 0 10px rgba(255, 255, 255, 1),
    0 0 20px rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Responsive (767px以下)
   ========================================================================== */
@media (max-width: 767px) {
  .p-hero {
    height: 80vh;
  }

  .p-hero__bg::after {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%);
  }

  /* ▼ 修正：スマホは文字エリアが少し上まで来るため、50%あたりから白くし始める ▼ */
  .p-hero__bg.u-p2::after {
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 50%,
        /* ここまで透明をキープ */
        rgba(255, 255, 255, 0.9) 100%);
  }

  /* ▼ ここを修正（leftやrightの指定を消し、PCの中央寄せをそのまま活かす） ▼ */
  .p-hero__content {
    bottom: 48px;
    padding: 0 24px;
  }

  .p-hero__title {
    margin-bottom: 16px;
  }

  /* スマホでの改行コントロール */
  .p-hero__title br,
  .p-hero__lead br {
    display: block;
  }
}

/* ==========================================================================
   Project: Service Section (p-service)
   ========================================================================== */
.p-service {
  background-color: #fafafa;
  padding: 80px 0;
  /* 上下の余白をしっかりとる */
}

/* サイト共通幅のコンテナ */
.p-service__inner {
  width: 100%;
  max-width: 1200px;
  /* サイト幅に合わせて調整してください */
  margin: 0 auto;
  padding: 0 4%;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.p-service__header {
  text-align: center;
  margin-bottom: 56px;
}

.p-service__en-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary, #015bd5);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.p-service__jp-title {
  font-size: 3.2rem;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  margin-bottom: 24px;
}

.p-service__lead {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #333;
}

/* --------------------------------------------------------------------------
   List & Cards
   -------------------------------------------------------------------------- */
.p-service__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 40px;
  /* 縦の余白48px、横の余白40px */
}

.p-service__card {
  display: flex;
}

.p-service__card-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

/* サムネイル画像（青枠を廃止し、角丸とモダンな比率固定を導入） */
.p-service__card-thumb {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 16px;
  aspect-ratio: 16 / 9;
  /* すべての画像を同じ比率に美しく揃える */
  background-color: #eee;
}

.p-service__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-service__card-en {
  font-size: 1.2rem;
  color: #888;
  margin-bottom: 4px;
  font-weight: 600;
}

/* タイトルとアロー（矢印） */
.p-service__card-title {
  font-size: 2.2rem;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  color: var(--color-primary, #015bd5);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.p-service__card-title::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
  margin-top: -2px;
  transition: transform 0.3s ease;
}

/* ▼ 外部リンク（target="_blank"）用：自動で別窓アイコンに差し替え ▼ */
.p-service__card-link[target="_blank"] .p-service__card-title::after {
  width: 14px;
  height: 14px;
  border: none;
  transform: none;
  margin-top: 0;
  /* 文字色（currentColor）をそのまま引き継ぐためのSVGマスク手法 */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zm-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zm-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.p-service__card-text {
  font-size: 1.5rem;
  line-height: 1.7;
  color: #5a5a5a;
}

/* --------------------------------------------------------------------------
   Hover Effects
   -------------------------------------------------------------------------- */
@media (hover: hover) {
  .p-service__card-link:hover .p-service__card-thumb img {
    transform: scale(1.05);
    /* 画像が上品にズーム */
  }

  .p-service__card-link:hover .p-service__card-title {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .p-service__card-link:hover .p-service__card-title::after {
    transform: rotate(45deg) translate(2px, -2px);
    /* 矢印が右へ動く */
  }
  /* 外部リンクホバー時（別窓アイコンが右上にフワッと浮く） */
  .p-service__card-link[target="_blank"]:hover .p-service__card-title::after {
    transform: translate(2px, -2px);
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
  .p-service__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 32px;
  }
}

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

  .p-service__jp-title {
    font-size: 2.6rem;
  }

  /* スマホ時は画面端までリストを広げるため padding をリセット */
  .p-service__inner {
    padding: 0;
  }

  /* ヘッダー部分は左右に余白を持たせる */
  .p-service__header {
    padding: 0 16px;
    margin-bottom: 32px;
  }

  /* スマホの横スクロール（カルーセル風UI） */
  .p-service__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 16px 24px 16px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .p-service__list::-webkit-scrollbar {
    display: none;
  }

  .p-service__card {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }

  .p-service__card-title {
    font-size: 1.8rem;
  }

  .p-service__card-text {
    font-size: 1.4rem;
  }

  /* 最後のカードをスクロールした際に右端に余白を作る */
  .p-service__list::after {
    content: "";
    display: block;
    flex: 0 0 1px;
  }
}

/* ==========================================================================
   Project: Point Section (p-point) - High Impact Version
   ========================================================================== */
.p-point {
  padding: 80px 0;
}

.p-point__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 4%;
}

/* 背景を敷くメインボックス */
.p-point__box {
  background-color: var(--color-primary, #001e82);
  border-radius: 16px;
  padding: 64px;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   Top: Header (テキスト＆ボタン)
   -------------------------------------------------------------------------- */
.p-point__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  /* ボタンを下揃えにする */
  margin-bottom: 48px;
}

.p-point__text {
  max-width: 680px;
  /* テキストが横に広がりすぎないように制御 */
}

.p-point__title {
  font-size: 3.2rem;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: 0.05em;
}

.p-point__catch {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 24px;
  color: #40c4ff;
  letter-spacing: 0.05em;
}

.p-point__lead {
  font-size: 1.6rem;
  line-height: 1.8;
  margin-bottom: 0;
  /* 下に余白は不要（親のflexで制御） */
}

/* リンクボタン */
.p-point__btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background-color: #ffffff;
  /* ▼ 共通の a タグ設定に負けないよう !important でネイビーを強制 ▼ */
  color: #001e82 !important;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 40px;
  text-decoration: none;
  min-width: 240px;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-point__arrow {
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 16px;
  transition: transform 0.3s ease;
}

@media (hover: hover) {
  .p-point__btn:hover {
    background-color: #f0f4ff;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* ▼ ホバー時も白文字化するのを防ぐ ▼ */
    color: #001e82 !important;
  }

  .p-point__btn:hover .p-point__arrow {
    transform: rotate(45deg) translate(2px, -2px);
  }
}

/* --------------------------------------------------------------------------
   Bottom: Images (画像エリアを最大化)
   -------------------------------------------------------------------------- */
.p-point__images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2枚の画像を均等に大きく配置 */
  gap: 32px;
}

.p-point__img-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  /* 重厚感のある影 */
}

.p-point__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  /* 少し横長のダイナミックな比率 */
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* マウスホバーで機械がフワッと迫ってくる演出 */
@media (hover: hover) {
  .p-point__img-wrap:hover .p-point__img {
    transform: scale(1.05);
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
  .p-point__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .p-point {
    padding: 56px 0;
  }

  .p-point__inner {
    padding: 0 16px;
  }

  .p-point__box {
    padding: 40px 24px;
    border-radius: 12px;
  }

  .p-point__title {
    font-size: 2.6rem;
  }

  .p-point__catch {
    font-size: 1.6rem;
    margin-bottom: 16px;
  }

  .p-point__lead {
    font-size: 1.4rem;
  }

  .p-point__btn {
    width: 100%;
  }

  .p-point__images {
    grid-template-columns: 1fr;
    /* スマホでは1枚ずつ特大で縦に並べる */
    gap: 24px;
  }
}

/* ==========================================================================
   Project: Other Services Section (p-other-services)
   ========================================================================== */
.p-other-services {
  background-color: #fafafa;
  padding: 64px 0;
  /* どのページに置いても馴染む適度な余白 */
}

.p-other-services__inner {
  width: 100%;
  max-width: 1040px;
  /* 少しコンパクトにして控えめに */
  margin: 0 auto;
  padding: 0 4%;
}

.p-other-services__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* --------------------------------------------------------------------------
   Card Style (邪魔にならない白基調の上品なデザイン)
   -------------------------------------------------------------------------- */
.p-other-services__card {
  display: flex;
  align-items: center;
  gap: 24px;
  background-color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  border: 1px solid #eaeaea;
  /* 非常に薄いグレーの枠線で引き締める */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  /* ほんのりとした影 */
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-other-services__thumb {
  width: 40%;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.p-other-services__thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.p-other-services__body {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.p-other-services__text {
  font-size: 1.4rem;
  line-height: 1.6;
  font-weight: 500;
  color: #333333;
  margin-bottom: 16px;
}

/* テキストタイプのボタン */
.p-other-services__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background-color: #f5f5f5;
  /* 控えめなグレー */
  color: #001e82;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 30px;
  transition: background-color 0.3s ease;
  width: fit-content;
}

.p-other-services__arrow {
  width: 5px;
  height: 5px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
  transition: transform 0.3s ease;
}

/* 画像タイプのボタン */
.p-other-services__img-btn {
  max-width: 160px;
  height: auto;
  display: block;
}

/* ホバーエフェクト（フワッと浮き上がる） */
@media (hover: hover) {
  .p-other-services__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    border-color: #d0d0d0;
  }

  .p-other-services__card:hover .p-other-services__text {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .p-other-services__card:hover .p-other-services__btn {
    background-color: #001e82;
    /* ホバー時だけブランドカラーに */
    color: #ffffff;
  }

  .p-other-services__card:hover .p-other-services__arrow {
    transform: rotate(45deg) translate(2px, -2px);
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
  .p-other-services__list {
    grid-template-columns: 1fr;
    /* タブレット以下は1カラム */
  }
}

@media (max-width: 767px) {
  .p-other-services {
    padding: 40px 0;
  }

  .p-other-services__inner {
    padding: 0;
    /* カルーセルのためにコンテナの余白を消す */
  }

  /* スマホの横スクロール（カルーセル風UI） */
  .p-other-services__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 0 16px 24px 16px;
    /* スクロールエリア用の余白 */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .p-other-services__list::-webkit-scrollbar {
    display: none;
  }

  .p-other-services__card {
    flex: 0 0 85%;
    /* 画面幅の85%にして次のカードをチラ見せする */
    scroll-snap-align: center;
    flex-direction: column;
    /* スマホでは縦並び */
    gap: 16px;
    padding: 20px;
  }

  .p-other-services__thumb,
  .p-other-services__body {
    width: 100%;
  }

  .p-other-services__text {
    font-size: 1.4rem;
  }

  /* 最後のカードの後ろの余白 */
  .p-other-services__list::after {
    content: "";
    display: block;
    flex: 0 0 1px;
  }
}

/* ==========================================================================
   Project: News Section (p-news)
   ========================================================================== */
#top-news.p-news {
  padding: 80px 0;
  background-color: #ffffff;
}

#top-news .p-news__link {
  width: 100%;
}

#top-news .p-news__inner {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 4%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 64px;
}

#top-news .p-news__nolink {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: 24px 48px 24px 16px;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s ease;
}

/* --------------------------------------------------------------------------
   Left: Header
   -------------------------------------------------------------------------- */
#top-news .p-news__header {
  width: 35%;
  flex-shrink: 0;
}

#top-news .p-news__en-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary, #015bd5);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

#top-news .p-news__jp-title {
  font-size: 3.2rem;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  margin-bottom: 24px;
}

#top-news .p-news__lead {
  font-size: 1.6rem;
  line-height: 1.8;
  color: #5a5a5a;
  margin-bottom: 40px;
  /* ボタンとの余白 */
}

/* 一覧を見るボタン（控えめなゴーストボタン） */
#top-news .p-news__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  background-color: transparent;
  color: #001e82;
  font-size: 1.4rem;
  font-weight: 700;
  border: 1px solid #001e82;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
}

#top-news .p-news__arrow {
  width: 5px;
  height: 5px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 12px;
  transition: transform 0.3s ease;
}

/* --------------------------------------------------------------------------
   Right: List
   -------------------------------------------------------------------------- */
#top-news .p-news__list {
  width: 65%;
  border-top: 1px solid #eaeaea;
  /* リストの上端に実線を引く */
}

#top-news .p-news__item {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid #eaeaea;
  text-decoration: none;
  color: inherit;
  transition: background-color 0.3s ease;
}

#top-news .p-news__date {
  width: 120px;
  flex-shrink: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #888888;
  font-family: Arial, sans-serif;
  /* 数字を美しく見せる */
  letter-spacing: 0.05em;
  margin-top: 2px;
  /* テキストとのわずかなズレを補正 */
}

#top-news .p-news__text {
  font-size: 1.4rem;
  line-height: 1.7;
  color: #333333;
  font-weight: 400;
  transition: color 0.3s ease;
}

/* ホバーエフェクト */
@media (hover: hover) {
  #top-news .p-news__btn:hover {
    background-color: #001e82;
    color: #ffffff;
  }

  #top-news .p-news__btn:hover .p-news__arrow {
    transform: rotate(45deg) translate(2px, -2px);
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
  #top-news .p-news__inner {
    flex-direction: column;
    gap: 40px;
  }
  #top-news .p-news__nolink {
    flex-direction: column;
    padding: 20px 40px 20px 16px;
  }

  #top-news .p-news__header,
  #top-news .p-news__list {
    width: 100%;
  }

  #top-news .p-news__lead {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  #top-news .p-news {
    padding: 56px 0;
  }

  #top-news .p-news__jp-title {
    font-size: 2.6rem;
  }

  #top-news .p-news__lead {
    font-size: 1.4rem;
  }

  #top-news .p-news__item {
    flex-direction: column;
    /* スマホでは日付とテキストを縦並びに */
    gap: 8px;
    padding: 20px 0;
  }

  #top-news .p-news__date {
    width: auto;
    font-size: 1.3rem;
    margin-top: 0;
  }

  #top-news .p-news__text {
    font-size: 1.5rem;
  }

  /* スマホ用ボタンのスタイル調整 */
  #top-news .p-news__btn-wrap.u-hidden-pc {
    margin: 0 auto;
    text-align: center;
  }

  #top-news .p-news__btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ==========================================================================
   Project: Related Information Section (p-related)
   ========================================================================== */
.p-related {
  /* 背景をほんのりグレーにして、コンテンツエリアと切り離す（広告エリアであることを暗に伝える） */
  background-color: #f5f7fa;
  padding: 64px 0;
}

.p-related__inner {
  width: 100%;
  max-width: 1040px;
  /* バナーが広がりすぎないよう少し絞る */
  margin: 0 auto;
  padding: 0 4%;
}

/* --------------------------------------------------------------------------
   Titles
   -------------------------------------------------------------------------- */
.p-related__main-title {
  font-size: 2rem;
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 700;
  color: #333333;
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: 0.05em;
}

.p-related__group {
  margin-bottom: 48px;
}

.p-related__group:last-of-type {
  margin-bottom: 0;
}

/* `⚫︎` の代わりに、左側に上品なグレーのライン（アクセント）を添える */
.p-related__sub-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #555555;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.p-related__sub-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.2em;
  background-color: #cccccc;
  margin-right: 12px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Grid & Banners
   -------------------------------------------------------------------------- */
.p-related__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* PC時は綺麗に4列 */
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-related__link {
  display: block;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  /* ▼ ここが最大のポイント：通常時は85%の透明度でくすませて、主張を抑える ▼ */
  opacity: 0.85;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.p-related__img {
  width: 100%;
  height: auto;
  display: block;
}

/* ホバー時に本来の明るさに戻り、少し浮き上がる */
@media (hover: hover) {
  .p-related__link:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #cccccc;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 992px) {
  .p-related__list {
    grid-template-columns: repeat(3, 1fr);
    /* タブレットは3列 */
  }
}

@media (max-width: 767px) {
  .p-related {
    padding: 48px 0;
  }

  .p-related__main-title {
    font-size: 1.8rem;
    margin-bottom: 32px;
  }

  .p-related__list {
    grid-template-columns: repeat(2, 1fr);
    /* スマホは2列で整然と並べる */
    gap: 16px;
  }
}

/* ==========================================================================
   Utility Classes (表示・非表示の切り替え)
   ========================================================================== */

/* PC（768px以上）で非表示にする */
@media (min-width: 768px) {
  .u-hidden-pc {
    display: none !important;
  }
}

/* スマホ（767px以下）で非表示にする */
@media (max-width: 767px) {
  .u-hidden-sp {
    display: none !important;
  }
}

/*-------------------------------------------------------------------------
	#recruit-privacy 　※index.html／disclosure_procedure.html／privacy_protocol.html共通
/*-----------------------------------------------------------------------*/
#recruit-privacy {
  border-top: 0;
}

#recruit-privacy ol,
#recruit-privacy h2,
#recruit-privacy table {
  font-weight: inherit;
}

#recruit-privacy a:link,
#recruit-privacy a:visited {
  color: var(--color-primary);
  text-decoration: underline;
}

#recruit-privacy a:hover {
  text-decoration: none;
}

#toriatsukai .fw100,
#toriatsukai .section_box .fw100 {
  font-weight: inherit;
}

/*-------------------------------------------------------------------------
	#declare 　※declareディレクトリ共通
/*-----------------------------------------------------------------------*/
#declare {
  border-top: 0;
}