@charset "UTF-8";
@media (max-width: 375px) {
  html {
    font-size: 4.2666666667vw;
  }
}
html {
  font-size: 100%;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 1.2403100775vw;
  }
}
@media (min-width: 1290px) {
  html {
    font-size: 100%;
  }
}

body {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #1A1A1A;
}

@media (any-hover: hover) {
  a,
  button {
    transition: opacity 0.2s ease-out;
  }
  a:hover,
  button:hover {
    opacity: 0.7;
    cursor: pointer;
  }
}
/*****************************
* A Modern CSS Reset (https://github.com/hankchizljaw/modern-css-reset)
* 上記に、ul要素,ol要素,a要素への記述追加
*****************************/
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
li {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
  padding: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

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

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

button {
  border: none;
  padding: 0;
  background-color: transparent;
  background-color: initial;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ========================================
  Footer
======================================== */
.l-footer {
  padding-block: 1.875rem;
  background-color: #1A1A1A;
}
@media screen and (min-width: 768px) {
  .l-footer {
    padding-block: 1.5625rem 3.125rem;
  }
}

.l-footer__nav-list {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  justify-content: center;
  justify-items: center;
  grid-column-gap: 4.6875rem;
  -moz-column-gap: 4.6875rem;
       column-gap: 4.6875rem;
  grid-row-gap: 1.25rem;
  row-gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .l-footer__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }
}

.l-footer__nav-link {
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #fff;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 768px) {
  .l-footer__nav-link {
    font-size: 0.875rem;
    line-height: 1.4285714286;
  }
}

.l-footer__nav-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (any-hover: hover) {
  .l-footer__nav-link:hover {
    opacity: 0.6;
  }
}
.l-footer__copyright {
  margin-top: 1.875rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .l-footer__copyright {
    margin-top: 0.9375rem;
  }
}

.l-footer__copyright small {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4285714286;
  font-family: "Barlow Semi Condensed", sans-serif;
  color: #fff;
  letter-spacing: 0.03em;
}

/* ========================================
  Header
======================================== */
.l-header {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 100;
  transition: box-shadow 0.3s ease-out;
}

.l-header.is-scrolled {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.l-header__inner {
  position: relative;
  z-index: 300;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
}
@media screen and (min-width: 768px) {
  .l-header__inner {
    align-items: flex-end;
    padding-inline-start: 1.375rem;
    padding-inline-end: 3.9375rem;
    padding-block: 0.625rem;
  }
}

.l-header__logo {
  display: block;
  width: 14.375rem;
}
@media screen and (min-width: 768px) {
  .l-header__logo {
    width: 17.5rem;
    align-self: center;
    padding-block: 1.0625rem;
  }
}

.l-header__logo img {
  width: 100%;
  height: auto;
}

/* PC Nav */
.l-header__nav {
  display: none;
}
@media screen and (min-width: 768px) {
  .l-header__nav {
    display: block;
  }
}

.l-header__nav-list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.l-header__nav-link {
  position: relative;
  font-size: 0.875rem;
  line-height: 2.1428571429;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #1A1A1A;
  letter-spacing: 0.05em;
}

.l-header__nav-link::after {
  content: "";
  position: absolute;
  bottom: -0.1875rem;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #1A1A1A;
  transition: width 0.25s ease-out;
}

.l-header__nav-link.is-active::after {
  width: 100%;
}

.l-header__nav-link:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

@media (any-hover: hover) {
  .l-header__nav-link:hover::after {
    width: 100%;
  }
}
/* Hamburger */
.l-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1.5rem;
  height: 1.125rem;
  cursor: pointer;
  position: relative;
  z-index: 300; /* メニュー展開時も×ボタンとして最前面に残す */
}
@media screen and (min-width: 768px) {
  .l-header__hamburger {
    display: none;
  }
}

.l-header__hamburger span {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #1A1A1A;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.l-header__hamburger[aria-expanded=true] span:nth-child(1) {
  transform: translateY(0.53125rem) rotate(45deg);
}

.l-header__hamburger[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}

.l-header__hamburger[aria-expanded=true] span:nth-child(3) {
  transform: translateY(-0.53125rem) rotate(-45deg);
}

.l-header__hamburger:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 4px;
}

/* Drawer (SP) — フルスクリーンメニュー */
.l-header__drawer {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 7.5625rem;
  padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #fff;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease-out, visibility 0.3s ease-out;
  z-index: 200;
}
@media screen and (min-width: 768px) {
  .l-header__drawer {
    display: none;
  }
}

.l-header__drawer[aria-hidden=false] {
  transform: translateX(0);
  visibility: visible;
}

.l-header__drawer-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  width: 12.5rem;
}

.l-header__drawer-item {
  width: 100%;
}

.l-header__drawer-link,
.l-header__drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.5rem;
  height: 3.125rem;
  padding-inline: 1.5625rem;
  background-color: #E7E4E3;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.03em;
  line-height: 1.4285714286;
  text-align: center;
}

.l-header__drawer-link:focus-visible,
.l-header__drawer-toggle:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

/* 企業情報行: 行全体がアコーディオントリガー（配下に企業情報TOP/SDGs/強みの3リンク） */
.l-header__drawer-toggle {
  gap: 1.875rem;
  border: none;
  cursor: pointer;
}

.l-header__drawer-toggle-text-wrap {
  padding-right: 2.8125rem;
}

.l-header__drawer-toggle-icon {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 0.9375rem;
  height: 0.9375rem;
}

.l-header__drawer-toggle-icon::before,
.l-header__drawer-toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #1A1A1A;
  transform: translate(-50%, -50%);
}

.l-header__drawer-toggle-icon::before {
  width: 0.9375rem;
  height: 1px;
}

.l-header__drawer-toggle-icon::after {
  width: 1px;
  height: 0.9375rem;
  transition: transform 0.3s ease-out;
}

.l-header__drawer-toggle[aria-expanded=true] .l-header__drawer-toggle-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.l-header__drawer-panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows 0.3s ease-out;
}

.l-header__drawer-panel.is-open {
  grid-template-rows: 1fr;
}

.l-header__drawer-panel-inner {
  overflow: hidden;
  min-height: 0;
}

.l-header__drawer-sublink {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.5rem;
  height: 3.125rem;
  margin-top: 0.625rem;
  background-color: #F9F8F7;
  font-size: 0.75rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.03em;
  line-height: 1.5;
  text-align: center;
}

.l-header__drawer-sublink:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

/* Overlay */
.l-header__overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
  z-index: 190;
}
@media screen and (min-width: 768px) {
  .l-header__overlay {
    display: none;
  }
}

.l-header__overlay[aria-hidden=false] {
  opacity: 1;
  pointer-events: auto;
}

.l-inner {
  width: 100%;
  padding-right: 1.5625rem;
  padding-left: 1.5625rem;
  margin-right: auto;
  margin-left: auto;
}
@media screen and (min-width: 768px) {
  .l-inner {
    max-width: 1290px;
    padding-right: 1.5625rem;
    padding-left: 1.5625rem;
  }
}

@media screen and (min-width: 768px) {
  .l-inner--narrow {
    max-width: 1050px;
  }
}

/* ========================================
  Button
======================================== */
.c-btn {
  display: inline-block;
  padding: 0.75rem 2.5rem;
  font-size: 0.8125rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #1A1A1A;
  letter-spacing: 0.1em;
  border: 1px solid #1A1A1A;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}

.c-btn:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

@media (any-hover: hover) {
  .c-btn:hover {
    background-color: #1A1A1A;
    color: #fff;
    opacity: 1;
  }
}
.c-btn--dark {
  background-color: #1A1A1A;
  color: #fff;
  padding: 0.1875rem 1.5rem;
  border: 1px solid #1A1A1A;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  transition: background-color 0.2s ease-out, color 0.2s ease-out;
}
@media screen and (min-width: 768px) {
  .c-btn--dark {
    font-size: 0.875rem;
    line-height: 1.4285714286;
  }
}

@media (any-hover: hover) {
  .c-btn--dark:hover {
    background-color: #E7E4E3;
    color: #1A1A1A;
    opacity: 1;
  }
}
/* ========================================
  Section Heading (共通見出しスタイル)
======================================== */
.c-section-head {
  text-align: center;
}

.c-section-head__sub {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9375rem;
  font-size: 1.75rem;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.0714285714;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 768px) {
  .c-section-head__sub {
    font-size: 2.25rem;
    line-height: 1.1111111111;
  }
}

.c-section-head__title {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #1A1A1A;
  line-height: 2.5;
  letter-spacing: 0.16em;
}

/* 本文カラムの中に置く左揃えの見出し（トップの About us / Overseas Factory /
   Recruit Information）。中央揃えのセクション見出しとの違いは「左揃え」だけ。
   矢印は共通どおり英字のベースライン揃え */
.c-section-head--left {
  text-align: left;
}

/* SPは英字が2行に折り返す場合がある（Recruit Information）。inline-flex のままだと
   テキスト全体が1つのフレックスアイテムになり、矢印が1行目の右に離れてしまうため、
   SPは block にして矢印を通常のインラインフローに乗せ、文末＝2行目の右に置く。
   PCは1行なので従来どおり inline-flex ＋ gap（p-overseas-svlk__title と同じ考え方）*/
.c-section-head--left .c-section-head__sub {
  display: block;
}
@media screen and (min-width: 768px) {
  .c-section-head--left .c-section-head__sub {
    display: inline-flex;
  }
}

/* SPは block レイアウトで gap が効かないため、矢印の間隔は margin で取る。
   上下位置は inline-block の既定（ベースライン揃え）に任せる */
.c-section-head--left .js-title-icon {
  margin-left: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .c-section-head--left .js-title-icon {
    margin-left: 0;
  }
}

/* SP で英字見出しが2行になる場合（u-mobile で改行）、矢印アイコンを2行目の文末に置く
   （デザイナー指示 2026-08-05。以前は2行の上下中央だった）。
   inline-flex のままだとテキスト全体が1つのフレックスアイテムになり、
   矢印が2行ぶんの右外に置かれてしまうため、SPは inline-block にして
   矢印を通常のインラインフローに乗せる（--sp-block と同じ考え方）。
   inline-block なので親の text-align: center がそのまま効き、左右中央は変わらない。
   PCは1行なので従来どおり inline-flex ＋ baseline（基本値のまま） */
.c-section-head--multiline .c-section-head__sub {
  display: inline-block;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .c-section-head--multiline .c-section-head__sub {
    display: inline-flex;
  }
}

/* SPは inline-block レイアウトで gap が効かないため、矢印の間隔は margin で取る。
   上下位置は inline-block の既定（ベースライン揃え）に任せる（--left と同じ） */
.c-section-head--multiline .js-title-icon {
  margin-left: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .c-section-head--multiline .js-title-icon {
    margin-left: 0;
  }
}

/* SP で英字見出しを u-mobile で改行し、矢印を2行目の文末に置くパターン（左揃え）。
   inline-flex のままだとテキスト全体が1つのフレックスアイテムになり、
   矢印が2行分の右端に離れてしまうため、SPでは block にして
   矢印を通常のインラインフローに乗せる（p-overseas-svlk__title と同じ考え方）。
   PCは1行なので従来どおり inline-flex ＋ 中央揃え。
   文字組は左揃えだが、見出しブロック自体は fit-content ＋ margin auto で
   左右中央に置く（英字と日本語の左端が揃ったまま中央配置になる） */
.c-section-head--sp-block {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .c-section-head--sp-block {
    width: auto;
    text-align: center;
  }
}

.c-section-head--sp-block .c-section-head__sub {
  display: block;
}
@media screen and (min-width: 768px) {
  .c-section-head--sp-block .c-section-head__sub {
    display: inline-flex;
  }
}

/* SPは block レイアウトなので gap が効かない。矢印はインラインで文末に置く */
.c-section-head--sp-block .js-title-icon {
  margin-left: 0.9375rem;
  vertical-align: middle;
}
@media screen and (min-width: 768px) {
  .c-section-head--sp-block .js-title-icon {
    margin-left: 0;
  }
}

/* ========================================
  404 Page Not Found
======================================== */
.p-404 {
  margin-top: 1.1875rem;
  padding-block: 6.25rem;
}
@media screen and (min-width: 768px) {
  .p-404 {
    margin-top: 5rem;
    padding-block: 12.5rem;
  }
}

.p-404__container {
  text-align: center;
}

/* ----- Title ----- */
.p-404__title-wrap {
  display: inline-block;
}

.p-404__title {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9375rem;
  font-size: 1.75rem;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  color: #1A1A1A;
  letter-spacing: 0.03em;
  line-height: 1.0714285714;
}
@media screen and (min-width: 768px) {
  .p-404__title {
    font-size: 2.9375rem;
    line-height: 0.8510638298;
    letter-spacing: 0.06em;
  }
}

/* 和文サブタイトルは共通の c-section-head__title を使う（宣言が完全に同一だったため統一） */
/* ----- Lead text ----- */
.p-404__lead {
  margin-top: 1.875rem;
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 2.1875;
}
@media screen and (min-width: 768px) {
  .p-404__lead {
    margin-top: 3.125rem;
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    line-height: 2;
  }
}

/* ----- Step blocks ----- */
.p-404__step {
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-404__step {
    margin-top: 3.125rem;
  }
}

/* 手順は箇条書きなので ul で組む。
   「・」は本文中の文字ではなく行頭記号なので ::before で描画する
   （表示は従来の「・」直書きと同一） */
.p-404__step-list {
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-404__step-list {
    font-size: 1.125rem;
    line-height: 1.9444444444;
  }
}

.p-404__step-item::before {
  content: "・";
}

.p-404__step .c-btn {
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-404__step .c-btn {
    margin-top: 1.0625rem;
  }
}

/* ----- Closing text ----- */
.p-404__closing {
  margin-top: 1.875rem;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-404__closing {
    margin-top: 3.125rem;
    font-size: 1.125rem;
    line-height: 1.9444444444;
  }
}

/* ========================================
  About Us / Overseas Factory
======================================== */
@media screen and (min-width: 768px) {
  .p-about-section {
    padding-block: 6.25rem;
  }
}

.p-about-section__item {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .p-about-section__item {
    flex-direction: row;
    max-height: 43.75rem;
  }
}

.p-about-section__item--photo-left {
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .p-about-section__item--photo-left {
    flex-direction: row-reverse;
  }
}

/* 写真エリア */
.p-about-section__photo {
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .p-about-section__photo {
    flex: 0 0 50%;
  }
}

.p-about-section__photo-img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 390/250;
  object-fit: cover;
  /* PCは写真列が本文列の高さまで引き伸ばされるため、画像も高さいっぱいに
  追従させる。追従させないと画像の下に地の色の帯が残り、
  上下の写真が突き合わせにならない */
}
@media screen and (min-width: 768px) {
  .p-about-section__photo-img {
    aspect-ratio: 720/590;
    height: 100%;
  }
}

/* テキストエリア
   列そのものは画面の半分だが、本文はインナー幅の内側に収める。
   テキストブロックの幅をインナー幅の半分（$innerWidth / 2）で頭打ちにし、
   余った分は auto マージンで画面外側に逃がすことで、
   左端（--photo-left は右端）が l-inner と同じ位置に揃う。
   これで1440pxを超えても行長が伸び続けず間延びしない。写真は列いっぱいのまま
   画面端まではみ出す */
.p-about-section__content {
  padding-block: 3.125rem;
  padding-inline: 1.5625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .p-about-section__content {
    flex: 0 0 50%;
    padding-block: 5rem;
    padding-inline: 6.25rem 5rem;
  }
}
.p-about-section__content {
  /* インナーが上限（$innerWidth）に達する1440px以上でのみ幅を頭打ちにする。
     それ未満はインナーも画面幅に追従するので従来の padding のままでよい。
     1440pxちょうどで620px（カンプ実測値）と一致するよう43vwを基準にし、
     それ以降は画面幅に応じて緩やかに広がる（900pxで頭打ち。写真側は高さ固定・
     横方向のみ伸びる既存の挙動のまま） */
}
@media screen and (min-width: 1440px) {
  .p-about-section__content {
    max-width: clamp(620px, 43vw, 56.25rem);
    margin-left: auto;
    padding-inline: 0 5rem;
  }
}

/* 写真が左に来る側。
   カンプ（1440px）実測では本文の左端が列頭から100px、行長が約590pxで1行35文字折り返し。
   上限を620px（インナー幅の半分）のままにすると行長520px＝31文字で折り返してしまい
   カンプより1行増えるため、この側だけ上限を700px（左パディング100＋本文600）にする。
   本文の右端はインナー右端より外に出るが、この帯は写真が画面端まで抜ける全幅セクションで
   グリッドに揃える相手がいないためカンプどおりでよい。
   1440pxを超えても行長は600pxで頭打ちになり、余った分は右側の余白になる */
@media screen and (min-width: 1440px) {
  .p-about-section__item--photo-left .p-about-section__content {
    /* 1440pxちょうどで700px（カンプ実測値）と一致するよう48.6vwを基準にし、
       それ以降は緩やかに広がる（1000pxで頭打ち） */
    max-width: clamp(43.75rem, 48.6vw, 62.5rem);
    margin-left: 0;
    margin-right: auto;
    padding-inline: 6.25rem 0;
  }
}

/* 見出しは共通の c-section-head（--left バリアント）に統一。
   矢印もタイトルアニメーションも共通側で面倒を見る */
/* 本文 */
.p-about-section__body {
  margin-top: 1.875rem;
  /* 長音符（ー）が行頭に来ないようにする。既定の line-break だと
     「…世界のニ／ーズに…」のように長音符が行頭に落ちてカンプと折り返しがずれる */
  line-break: strict;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-about-section__body {
    font-size: 1rem;
    line-height: 2.1875;
  }
}

/* ボタン */
.p-about-section__content .c-btn {
  margin-top: 1.875rem;
  align-self: flex-start;
}
@media screen and (min-width: 768px) {
  .p-about-section__content .c-btn {
    margin-top: 3.125rem;
  }
}

/* ========================================
  Access
======================================== */
.p-access {
  padding-block: 3.125rem;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .p-access {
    padding-block: 6.25rem;
  }
}

.p-access__list {
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-access__list {
    margin-top: 6.25rem;
  }
}

.p-access__item {
  display: flex;
  flex-direction: column-reverse; /* SP: 情報が先、写真が後に来るため reverse */
  gap: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-access__item {
    flex-direction: row;
    align-items: flex-start;
    gap: 5rem;
  }
}
@media screen and (min-width: 1440px) {
  .p-access__item {
    gap: 9rem;
  }
}

.p-access__item + .p-access__item {
  margin-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-access__item + .p-access__item {
    margin-top: 6.25rem;
  }
}

.p-access__map {
  aspect-ratio: 1/1;
  margin-inline: -1.5625rem; /* SPはカンプ通り左右全幅 */
}
@media screen and (min-width: 768px) {
  .p-access__map {
    margin-inline: 0;
    width: 37.5rem;
    flex-shrink: 0;
  }
}

.p-access__map img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.p-access__map iframe {
  width: 100%;
  height: 100%;
  display: block;
}

@media screen and (min-width: 768px) {
  .p-access__info {
    flex: 1;
  }
}

.p-access__name {
  font-size: 1.125rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9444444444;
  padding-bottom: 0.9375rem;
  border-bottom: 1px solid #1A1A1A;
}
@media screen and (min-width: 768px) {
  .p-access__name {
    font-size: 1.625rem;
    line-height: 1.9230769231;
    letter-spacing: 0.1em;
    border-bottom: 2px solid #1A1A1A;
  }
}

.p-access__address {
  margin-top: 1.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-access__address {
    font-size: 1rem;
    line-height: 2.1875;
  }
}

.p-access__routes {
  margin-top: 1.6875rem;
}
@media screen and (min-width: 768px) {
  .p-access__routes {
    margin-top: 2.1875rem;
  }
}

.p-access__route {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-access__route {
    font-size: 1rem;
    line-height: 2.1875;
  }
}

.p-access__info .c-btn {
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-access__info .c-btn {
    margin-top: 3rem;
  }
}

/* ========================================
  Brand Statement
======================================== */
/* セクション高は本文量で決まり画面幅に追従しないため、背景を全幅のまま
   object-fit: cover にすると幅が広がるほど画像だけが拡大され、
   （1）下端固定の椅子が上へ伸びて本文にかぶる（約1800px以上で発生）
   （2）2倍書き出し（2880px）の解像度を食い潰して荒れる
   の2つが起きる。背景の最大幅を頭打ちにして拡大を止め、
   はみ出した左右は画像の端の色で埋める。
   上限はカンプの設計幅（1440px）。椅子の上端はセクション下端から
   「描画高 × 0.296」の位置に来るため、上限を上げると署名にぶつかる
   （実測: 1440pxで余裕51px / 1600pxで15px / 1800pxで-30px＝重なる）。
   1440pxなら2倍書き出し（2880px）を等倍以上に拡大することもない */
/* 画像左右端の平均色（幅上限時に見えている範囲 y=440〜2200 から採取）。
   壁の写真自体が左→右にわずかな階調を持つため、左右で別の色を当てる。
   中央のハードストップは画像の裏に隠れるので継ぎ目にはならない */
.p-brand {
  position: relative;
  /* 遅延読み込み中に背景が白く抜けないための下地（カンプの壁の色） */
  background-color: #F9F8F7;
}
@media (min-width: 1440px) {
  .p-brand {
    background-image: linear-gradient(to right, #EEF1F4 0 50%, #C4CBD1 50% 100%);
  }
}

.p-brand__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  max-width: 90rem;
  margin-inline: auto;
}

/* PC/SPで別カットを出し分けるため picture が1階層挟まる。
   picture は置換要素ではないので object-fit / aspect-ratio は効かない。
   高さの受け渡し役に徹し、実際のトリミングは img 側で行う */
.p-brand__bg picture {
  width: 100%;
  height: 100%;
}

/* PC・SPとも画像の比率＝セクションの比率なので cover でもほぼ切れない。
   セクション高が本文量で前後した分は上（無地の壁）側で吸収させ、
   下端の椅子は必ず残るように object-position を bottom にしている */
.p-brand__bg-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center bottom;
     object-position: center bottom;
}

.p-brand__contents {
  position: relative;
  z-index: 1;
  max-width: 54.375rem;
  margin-inline: auto;
  padding-block: 3.125rem 8.75rem;
  padding-inline: 0.9375rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-brand__contents {
    padding-block: 7.5rem 23.5rem;
    padding-inline: 6.25rem;
    gap: 2.5rem;
  }
}

.p-brand__catch {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.875;
}
@media screen and (min-width: 768px) {
  .p-brand__catch {
    font-size: 1.25rem;
    line-height: 2;
    letter-spacing: 0.15em;
  }
}

.p-brand__body p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-brand__body p {
    font-size: 1.125rem;
    line-height: 1.9444444444;
    letter-spacing: 0.08em;
  }
}

.p-brand__body p + p {
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .p-brand__body p + p {
    margin-top: 2.1875rem;
  }
}

.p-brand__tagline {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 2;
}

.p-brand__name {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.875;
  color: #1A1A1A;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .p-brand__name {
    font-size: 1.125rem;
  }
}

/* ========================================
  What We Do
======================================== */
.p-business-what {
  padding-top: 3.125rem;
}

.p-business-what__photo {
  position: relative;
  width: 100%;
  margin-top: 3.125rem;
}

.p-business-what__photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
}

.p-business-what__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.p-business-what__photo > .l-inner {
  position: relative;
  z-index: 20;
}

/* カード1枚を「本文行 + ラベル行」の2行で構成し、カードは subgrid で親の行を継承する。
   これで同じ行のカード同士は、アイコン・タイトル・コピーの開始位置と
   ラベル（黒帯）の高さ・上下位置が完全に揃う（カンプ準拠）。
   row-gap を使うとカード内部（本文↔ラベル間）にも隙間が入ってしまうため、
   row-gap は 0 にして、カード行の間隔は専用のスペーサー行で確保する。 */
.p-business-what__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* SP: 2列＝3カード行 → 本文/ラベル × 3 ＋ 行間スペーサー × 2 */
  grid-template-rows: auto auto 1.25rem auto auto 1.25rem auto auto;
  grid-column-gap: 1.25rem;
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
  grid-row-gap: 0;
  row-gap: 0;
  width: 100%;
  padding-block: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-business-what__grid {
    grid-template-columns: repeat(3, 1fr);
    /* PC: 3列＝2カード行 */
    grid-template-rows: auto auto 4.375rem auto auto;
    -moz-column-gap: 6.875rem;
         column-gap: 6.875rem;
    padding-block: 9.375rem;
  }
}

/* ========================================
  Business Card
======================================== */
/* 親の「本文行 + ラベル行」を subgrid で継承する。
   ラベル行の高さは行内で最も高いカード（英字が2行になるもの）に揃うため、
   同じ行のカードは黒帯の上端・下端がぴたりと一致する */
.p-business-card {
  display: grid;
  grid-template-rows: subgrid;
  background-color: #F9F8F7;
}

/* カード全体が下の詳細セクションへのページ内リンク。
   li が親グリッドから2行（本文行・ラベル行）を継承しているので、
   間に挟まる a も同じ2行を引き継がないと黒帯の高さ揃えが崩れる */
.p-business-card__link {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease-in-out;
}

/* アイコンが動くぶん、カード全体の薄れは控えめにして情報量を上げすぎない */
@media (any-hover: hover) {
  .p-business-card__link:hover {
    opacity: 0.85;
  }
}
.p-business-card__link:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

/* スペーサー行を避けるため行を明示する。あわせて列も明示すること。
   行だけ指定して列を自動配置に任せると、暗黙の列（4列目）が作られて崩れる */
.p-business-card:nth-child(-n+2) {
  grid-row: 1/span 2;
}

/* 擬似クラスは1つに揃えること。2つ重ねると詳細度が上がり、
   下の @include mq(md) の指定を上書きしてカードが重なって消える */
.p-business-card:nth-child(n+3) {
  grid-row: 4/span 2;
}

.p-business-card:nth-child(n+5) {
  grid-row: 7/span 2;
}

/* SP: 2列 */
.p-business-card:nth-child(odd) {
  grid-column: 1;
}

.p-business-card:nth-child(even) {
  grid-column: 2;
}

@media screen and (min-width: 768px) {
  .p-business-card:nth-child(-n+3) {
    grid-row: 1/span 2;
  }
  .p-business-card:nth-child(n+4) {
    grid-row: 4/span 2;
  }
  /* PC: 3列 */
  .p-business-card:nth-child(3n+1) {
    grid-column: 1;
  }
  .p-business-card:nth-child(3n+2) {
    grid-column: 2;
  }
  .p-business-card:nth-child(3n) {
    grid-column: 3;
  }
}
.p-business-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: 0.625rem;
  padding-inline: 0.625rem;
}
@media screen and (min-width: 768px) {
  .p-business-card__body {
    padding-block: 1.8125rem 0.9375rem;
  }
}

/* アイコンはSVGごとに縦横比が異なるため、高さを固定すると大きさがバラつく。
   高さは全カード共通の「枠」として残し、object-fit: contain で枠内に実寸のまま
   中央配置する（アイコンの大小に関わらずタイトルの開始位置が揃う）。
   幅はカンプ実測値を modifier で個別指定する。値は (アイコン名, SP幅, PC幅) */
.p-business-card__icon {
  width: auto;
  height: 2.25rem;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (min-width: 768px) {
  .p-business-card__icon {
    height: 5.625rem;
  }
}

.p-business-card__icon--interior {
  width: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-business-card__icon--interior {
    width: 4.6875rem;
  }
}

.p-business-card__icon--space {
  width: 2.25rem;
}
@media screen and (min-width: 768px) {
  .p-business-card__icon--space {
    width: 5.625rem;
  }
}

.p-business-card__icon--contract {
  width: 2.875rem;
}
@media screen and (min-width: 768px) {
  .p-business-card__icon--contract {
    width: 7.3125rem;
  }
}

.p-business-card__icon--product {
  width: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-business-card__icon--product {
    width: 5.625rem;
  }
}

.p-business-card__icon--manufacturing {
  width: 2.5rem;
}
@media screen and (min-width: 768px) {
  .p-business-card__icon--manufacturing {
    width: 6.875rem;
  }
}

.p-business-card__icon--rental {
  width: 2.5rem;
}
@media screen and (min-width: 768px) {
  .p-business-card__icon--rental {
    width: 7.1875rem;
  }
}

/* ホバー時のアイコンの動き。絵柄に合わせてカードごとに変える。
   値は (アイコン名, transform)。
   interior だけはアイコン全体ではなく「光の線」だけを動かすため、ここには含めない
   （インラインSVG化して .p-business-card__icon-part を個別に動かす。下記参照）*/
.p-business-card__icon {
  transition: transform 0.3s ease-out;
}

@media (any-hover: hover) {
  .p-business-card__link:hover .p-business-card__icon--space {
    transform: scale(1.08);
  }
  .p-business-card__link:hover .p-business-card__icon--contract {
    transform: rotate(-4deg);
  }
  .p-business-card__link:hover .p-business-card__icon--product {
    transform: rotate(-8deg);
  }
  .p-business-card__link:hover .p-business-card__icon--manufacturing {
    transform: translateY(-3px);
  }
  .p-business-card__link:hover .p-business-card__icon--rental {
    transform: translateX(6px);
  }
}
/* 「想いを描く」だけはアイコン全体ではなく電球の光の線だけを動かす。
   そのためこのカードのアイコンのみインラインSVGで出力し（page-business.php）、
   光の線8本を .p-business-card__icon-part として抜き出している。
   変形の基準はパス単体の矩形ではなくSVG全体（view-box）にして、
   電球の中心（viewBox 75×85 のうち 37, 37 付近）から放射状に広がるようにする */
.p-business-card__icon-part {
  transform-box: view-box;
  transform-origin: 37px 37px;
  transition: transform 0.3s ease-out;
}

@media (any-hover: hover) {
  .p-business-card__link:hover .p-business-card__icon-part {
    transform: scale(1.16);
  }
}
/* 動きを控えたい設定の環境では位置を動かさない
   （_reset.scss 側で transition も 0.01ms に潰れる） */
@media (prefers-reduced-motion: reduce) {
  .p-business-card__link:hover .p-business-card__icon,
  .p-business-card__link:hover .p-business-card__icon-part {
    transform: none;
  }
}
.p-business-card__text {
  margin-top: 0.5rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-business-card__text {
    margin-top: 1rem;
  }
}

.p-business-card__title {
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 2.1428571429;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .p-business-card__title {
    font-size: 1.5625rem;
    line-height: 1.6;
  }
}

.p-business-card__copy {
  margin-top: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #1A1A1A;
  letter-spacing: 0.03em;
  line-height: 1.4166666667;
}
@media screen and (min-width: 768px) {
  .p-business-card__copy {
    margin-top: 0.625rem;
    font-size: 1rem;
    line-height: 1.5625;
  }
}

/* ラベル行いっぱいに広がり（＝行内で帯の高さが揃う）、
   英字が1行のカードでも内容が帯の上下中央にくるようにする */
.p-business-card__label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #1A1A1A;
  color: #fff;
  text-align: center;
  padding-block: 0.5rem;
}
@media screen and (min-width: 768px) {
  .p-business-card__label {
    padding-block: 0.625rem;
    /* PC は上下2行とも帯の高さを揃えるため、英字が2行になるカードに合わせて
       高さを確保する（subgrid は行内しか揃わないため）。
       内訳: 英字2行(25px×2) + 日本語1行(30px) + 上下padding(10px×2)。
       余white は帯側で確保するので、英字と日本語の間隔は詰まったまま、
       justify-content: center で上下の余白が均等になる */
    min-height: calc(1.5625rem * 2 + 1.875rem + 0.625rem * 2);
  }
}

.p-business-card__label-en {
  font-size: 0.9375rem;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 768px) {
  .p-business-card__label-en {
    font-size: 1.4375rem;
    line-height: 1.0869565217;
  }
}

.p-business-card__label-ja {
  margin-top: 0.4375rem;
  font-size: 0.625rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 768px) {
  .p-business-card__label-ja {
    margin-top: 0;
    font-size: 0.875rem;
    line-height: 2.1428571429;
    letter-spacing: 0.05em;
  }
}

/* ========================================
  Business Detail（各サービス詳細セクション共通）
======================================== */
/* 私たちのできることの各カードからのアンカー先。
   スクロール位置は script.js のスムーススクロールがヘッダー高さを差し引いて
   計算するが、JSが動かない環境で見出しが固定ヘッダーに潜らないよう保険を置く */
.p-business-detail {
  margin-top: 3.125rem;
  scroll-margin-top: 4.375rem;
}
@media screen and (min-width: 768px) {
  .p-business-detail {
    margin-top: 6.25rem;
  }
}

.p-business-detail__box {
  background-color: #F9F8F7;
}
@media screen and (min-width: 768px) {
  .p-business-detail__box {
    max-width: 1240px;
    margin-inline: auto;
  }
}

.p-business-detail__title {
  background-color: #1A1A1A;
  color: #fff;
  text-align: center;
  padding-block: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .p-business-detail__title {
    padding-block: 1.5625rem;
  }
}

.p-business-detail__title-en {
  font-size: 1.5625rem;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 768px) {
  .p-business-detail__title-en {
    font-size: 2.25rem;
    line-height: 1.1111111111;
  }
}

.p-business-detail__title-ja {
  margin-top: 0.3125rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  line-height: 1.5625;
  letter-spacing: 0.03em;
}

.p-business-detail__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem;
  padding-block: 1.875rem 3.125rem;
  padding-inline: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-business-detail__container {
    gap: 5rem;
    padding-block: 3.75rem 6.25rem;
    padding-inline: 3.125rem;
  }
}

.p-business-detail__container > .p-business-detail__intro,
.p-business-detail__container > .p-business-detail__images {
  width: 100%;
}

.p-business-detail__intro {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-inline: 1.5625rem;
}

.p-business-detail__icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .p-business-detail__icon-wrap {
    gap: 0.9375rem;
  }
}

/* カード同様、アイコンごとに縦横比が違うためカンプ実測の「幅」だけを modifier で指定し、
   高さは height: auto で比率どおりに自動決定させる。値は (アイコン名, SP幅, PC幅) */
.p-business-detail__icon {
  width: auto;
  height: auto;
  max-width: 100%;
}

.p-business-detail__icon--interior {
  width: 3.75rem;
}
@media screen and (min-width: 768px) {
  .p-business-detail__icon--interior {
    width: 5.25rem;
  }
}

.p-business-detail__icon--space {
  width: 3.75rem;
}
@media screen and (min-width: 768px) {
  .p-business-detail__icon--space {
    width: 5.625rem;
  }
}

.p-business-detail__icon--contract {
  width: 4.375rem;
}
@media screen and (min-width: 768px) {
  .p-business-detail__icon--contract {
    width: 7.3125rem;
  }
}

.p-business-detail__icon--product {
  width: 3.75rem;
}
@media screen and (min-width: 768px) {
  .p-business-detail__icon--product {
    width: 5.625rem;
  }
}

.p-business-detail__icon--manufacturing {
  width: 4.375rem;
}
@media screen and (min-width: 768px) {
  .p-business-detail__icon--manufacturing {
    width: 6.875rem;
  }
}

.p-business-detail__icon--rental {
  width: 5rem;
}
@media screen and (min-width: 768px) {
  .p-business-detail__icon--rental {
    width: 7.1875rem;
  }
}

.p-business-detail__heading {
  font-size: 1.25rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  line-height: 2;
  color: #1A1A1A;
  letter-spacing: 0.15em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-business-detail__heading {
    font-size: 1.875rem;
    line-height: 2.3333333333;
    letter-spacing: 0.03em;
  }
}

.p-business-detail__copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-business-detail__copy {
    gap: 1.25rem;
  }
}

.p-business-detail__lead {
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.875;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-business-detail__lead {
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    line-height: 2;
  }
}

.p-business-detail__text {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
  -moz-text-align-last: center;
       text-align-last: center;
}
@media screen and (min-width: 768px) {
  .p-business-detail__text {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.875;
  }
}

.p-business-detail__images {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
@media screen and (min-width: 768px) {
  .p-business-detail__images {
    flex-direction: row;
    gap: 3.125rem;
  }
}

@media screen and (min-width: 768px) {
  .p-business-detail__images--single {
    justify-content: center;
  }
}

.p-business-detail__image {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  .p-business-detail__image {
    width: 50%;
  }
}

@media screen and (min-width: 768px) {
  .p-business-detail__images--single .p-business-detail__image {
    width: 47.8%; /* 545 / 1140 */
  }
}

.p-business-detail__download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-business-detail__download {
    gap: 1.875rem;
  }
}

.p-business-detail__download-note {
  font-size: 0.75rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-business-detail__download-note {
    font-size: 0.875rem;
    letter-spacing: 0.03em;
    line-height: 1.4285714286;
  }
}

/* ========================================
  Contact CTA（本ページのみの余白調整）
======================================== */
.p-business-what ~ .p-contact-cta--no-line {
  padding-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-business-what ~ .p-contact-cta--no-line {
    padding-top: 6.25rem;
  }
}

/* ========================================
  Gallery
======================================== */
.p-clients-gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .p-clients-gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.p-clients-gallery__item {
  aspect-ratio: 8/5;
}

/* SPのみ2段目（3枚目・4枚目）の左右を入れ替える（デザイナー指示 2026-08-06）。
   PCは3列×2行で並びが変わってしまうため、DOM順は触らず order で入れ替え、
   md で order を戻す。order は全アイテムを通した並べ替えなので、
   入れ替えない項目にも明示的な順序が要る */
.p-clients-gallery__item:nth-child(1) {
  order: 1;
}
@media screen and (min-width: 768px) {
  .p-clients-gallery__item:nth-child(1) {
    order: 0;
  }
}

.p-clients-gallery__item:nth-child(2) {
  order: 2;
}
@media screen and (min-width: 768px) {
  .p-clients-gallery__item:nth-child(2) {
    order: 0;
  }
}

.p-clients-gallery__item:nth-child(3) {
  order: 4;
}
@media screen and (min-width: 768px) {
  .p-clients-gallery__item:nth-child(3) {
    order: 0;
  }
}

.p-clients-gallery__item:nth-child(4) {
  order: 3;
}
@media screen and (min-width: 768px) {
  .p-clients-gallery__item:nth-child(4) {
    order: 0;
  }
}

.p-clients-gallery__item:nth-child(5) {
  order: 5;
}
@media screen and (min-width: 768px) {
  .p-clients-gallery__item:nth-child(5) {
    order: 0;
  }
}

.p-clients-gallery__item:nth-child(6) {
  order: 6;
}
@media screen and (min-width: 768px) {
  .p-clients-gallery__item:nth-child(6) {
    order: 0;
  }
}

.p-clients-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ========================================
  Our Quality
======================================== */
/* カード間の隙間から見える色なので、セクション背景は白。
   PCの下余白は0（カンプ通り、CTA側の --no-line が持つ100pxで受ける）。
   SPは --no-line が上余白を持たないため、こちら側に50px残す */
.p-clients-quality {
  padding-block: 3.125rem;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .p-clients-quality {
    padding-block: 6.25rem 0;
  }
}

/* 一覧はカンプ通り画面幅いっぱい（1440pxで 710 + gap20 + 710）に敷くため、
   PHP 側で l-inner の外に出している。左右カラムは行が対になる。
   ただし上限が無いとカード幅だけが伸び続け、高さ95px・文字16pxは固定のため
   中身がスカスカになる（実測: 3440pxでカード1710px幅・余白率70%）。
   カンプの設計幅1440pxで頭打ちにして中央寄せする。
   1440px以下はカンプと同一、それ以上でのみ左右に余白が出る */
.p-clients-quality__columns {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-clients-quality__columns {
    flex-direction: row;
    gap: 1.25rem;
    margin-top: 3.125rem;
    max-width: 90rem;
    margin-inline: auto;
  }
}

.p-clients-quality__list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1 0 0;
  min-width: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .p-clients-quality__list {
    gap: 1.25rem;
  }
}

.p-clients-quality__list li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4375rem;
  padding-block: 0.5rem;
  padding-inline: 0.9375rem;
  background-color: #E7E4E3;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-clients-quality__list li {
    min-height: 5.9375rem;
    padding-block: 1.09375rem;
    padding-inline: 0.3125rem;
    font-size: 1rem;
    line-height: 1.875;
  }
}

/* 縞: 奇数行 $gray / 偶数行 $light-gray。
   左右カラムは同じ行同士が対になるので、両カラムとも同じ位相にする */
.p-clients-quality__list li:nth-child(even) {
  background-color: #F9F8F7;
}

/* SP は2カラムが縦に積まれるため、左カラムが奇数件で終わるとカラムの継ぎ目で
   同じ色が2行続いてしまう。その場合だけ2列目の位相を反転させる。
   反転が必要かどうかは件数によって変わるので、判定は PHP 側で行い
   --flip クラスの有無で切り替える（件数を変更しても自動で追従する）。
   左右が並ぶ PC では位相を戻す */
.p-clients-quality__list--flip li:nth-child(odd) {
  background-color: #F9F8F7;
}

.p-clients-quality__list--flip li:nth-child(even) {
  background-color: #E7E4E3;
}

@media screen and (min-width: 768px) {
  .p-clients-quality__list--flip li:nth-child(odd) {
    background-color: #E7E4E3;
  }
  .p-clients-quality__list--flip li:nth-child(even) {
    background-color: #F9F8F7;
  }
}
/* 各企業へのリンクは設定しない方針で確定（2026-07-31）。
   一覧は素のテキストのみを出力する */
/* ========================================
  Company Profile
======================================== */
.p-company-profile {
  padding-block: 3.125rem;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .p-company-profile {
    padding-block: 6.25rem;
  }
}

.p-company-profile__table {
  margin-top: 1.875rem;
  margin-inline: -1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-company-profile__table {
    margin-top: 3.125rem;
    margin-inline: 0;
  }
}

.p-company-profile__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.875rem;
  padding: 1.25rem 0.625rem 1.25rem 1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-company-profile__row {
    gap: 0;
    padding: 1.25rem;
  }
}

.p-company-profile__row:nth-child(odd) {
  background-color: #E7E4E3;
}

.p-company-profile__label {
  width: 4.375rem;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 1.4285714286;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .p-company-profile__label {
    width: 12.5rem;
    font-size: 1rem;
    line-height: 1.5625;
  }
}

.p-company-profile__value {
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-company-profile__value {
    font-size: 1.125rem;
    line-height: 1.9444444444;
  }
}

/* ========================================
  Contact CTA（共通）
======================================== */
.p-contact-cta {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-contact-cta {
    padding-bottom: 6.25rem;
  }
}

.p-contact-cta::before {
  content: "";
  display: none; /* SPではどのページも罫線なし */
  max-width: 1240px;
  height: 2px;
  background-color: #1A1A1A;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-contact-cta::before {
    display: block;
    margin-bottom: 6.25rem;
  }
}

/* 罫線なしバリアント（お問い合わせページ用）
   SPは直前セクションとの間に余白なし。PCのみ罫線の代わりに余白を確保する */
@media screen and (min-width: 768px) {
  .p-contact-cta--no-line {
    padding-top: 6.25rem;
  }
}

.p-contact-cta--no-line::before {
  display: none;
}

.p-contact-cta__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875rem;
  padding-block: 3.125rem;
  background-color: #E7E4E3;
}
@media screen and (min-width: 768px) {
  .p-contact-cta__box {
    max-width: 1240px;
    margin-inline: auto;
    padding-block: 6.25rem;
    gap: 3.5625rem;
  }
}

.p-contact-cta__name {
  font-size: 1.125rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  line-height: 1.9444444444;
  color: #1A1A1A;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .p-contact-cta__name {
    font-size: 1.625rem;
    line-height: 1.0769230769;
    letter-spacing: 0.1em;
  }
}

.p-contact-cta__address {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-style: normal;
  color: #1A1A1A;
  letter-spacing: 0.03em;
  line-height: 1.5625;
}
@media screen and (min-width: 768px) {
  .p-contact-cta__address {
    font-size: 1rem;
    line-height: 2.1875;
    letter-spacing: 0.05em;
  }
}

.p-contact-cta__hours-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.3125rem;
}
@media screen and (min-width: 768px) {
  .p-contact-cta__hours-wrap {
    flex-direction: row;
    justify-content: center;
    gap: 1.25rem;
  }
}

.p-contact-cta__telfax {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 2.1875;
}

.p-contact-cta__tel,
.p-contact-cta__fax {
  color: inherit;
}

@media screen and (min-width: 768px) {
  .p-contact-cta__tel {
    pointer-events: none; /* PCでは発信リンクを無効化（SPのみタップで発信） */
  }
}

.p-contact-cta__hours {
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

.p-contact-cta .c-btn {
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-contact-cta .c-btn {
    margin-top: 3.125rem;
  }
}

/* ========================================
  Contact Form (メールでのお問い合せ)
======================================== */
.p-contact-form {
  padding-block: 3.125rem;
  background-color: #F9F8F7;
}
@media screen and (min-width: 768px) {
  .p-contact-form {
    padding-block: 6.25rem;
  }
}

.p-contact-form__lead {
  margin-top: 1.875rem;
  padding-inline: 1.5625rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.9285714286;
  letter-spacing: 0.05em;
  color: #1A1A1A;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-contact-form__lead {
    font-size: 1.125rem;
    line-height: 1.9444444444;
  }
}

.p-contact-form__form {
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-contact-form__form {
    margin-top: 6.25rem;
  }
}

.p-contact-form__fields {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 67.1875rem;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-contact-form__fields {
    gap: 1.875rem;
  }
}

@media screen and (min-width: 768px) {
  .p-contact-form__row {
    display: flex;
    align-items: flex-start;
  }
}

.p-contact-form__label {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.875;
  letter-spacing: 0.05em;
  color: #1A1A1A;
}
@media screen and (min-width: 768px) {
  .p-contact-form__label {
    flex-shrink: 0;
    width: 17.8125rem;
    padding-top: 0.3125rem;
    font-size: 1.25rem;
    line-height: 2;
  }
}

.p-contact-form__required {
  margin-left: 0.625rem;
  padding-inline: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 2.5;
  letter-spacing: 0.16em;
  color: #1A1A1A;
  background-color: #F3C6B9;
}
@media screen and (min-width: 768px) {
  .p-contact-form__required {
    font-size: 1rem;
    line-height: 1.5625;
    letter-spacing: 0.03em;
  }
}

.p-contact-form__input {
  /* ラベル→入力欄の間隔は .wpcf7-form-control-wrap の margin-top で制御する
     （input はCF7ラッパー内にあり、ここでの margin-top は下部ルールで 0 に統一される） */
  padding: 0.75rem 1.0625rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5625;
  letter-spacing: 0.03em;
  color: #1A1A1A;
  background-color: #fff;
  border: 1px solid #6a6766;
}
@media screen and (min-width: 768px) {
  .p-contact-form__input {
    flex: 1;
    width: auto;
    margin-top: 0;
    padding: 0.75rem 1.5625rem;
    border: 2px solid #6a6766;
  }
}

.p-contact-form__input:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

.p-contact-form__select {
  padding: 0.75rem 1.0625rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5625;
  letter-spacing: 0.03em;
  color: #1A1A1A;
  background-color: #fff;
  border: 1px solid #6a6766;
  border-radius: 0;
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; /* デザインに矢印アイコンがないため、ネイティブの下矢印を非表示 */
}
@media screen and (min-width: 768px) {
  .p-contact-form__select {
    flex: 1;
    width: auto;
    padding: 0.75rem 1.5625rem;
    border: 2px solid #6a6766;
  }
}

/* 未選択（先頭の空value選択中）はプレースホルダと同じグレーで表示 */
.p-contact-form__select:invalid {
  color: rgba(26, 26, 26, 0.4);
}

.p-contact-form__select option {
  color: #1A1A1A;
}

.p-contact-form__select:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

.p-contact-form__textarea {
  display: block;
  height: 12.5rem;
  padding: 0.75rem 1.0625rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5625;
  letter-spacing: 0.03em;
  color: #1A1A1A;
  background-color: #fff;
  border: 1px solid #6a6766;
  resize: vertical;
}
@media screen and (min-width: 768px) {
  .p-contact-form__textarea {
    flex: 1;
    width: auto;
    padding: 0.75rem 1.5625rem;
    border: 2px solid #6a6766;
  }
}

.p-contact-form__textarea:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

.p-contact-form__input::-moz-placeholder, .p-contact-form__textarea::-moz-placeholder {
  color: #1A1A1A;
  opacity: 0.4;
}

.p-contact-form__input::placeholder,
.p-contact-form__textarea::placeholder {
  color: #1A1A1A;
  opacity: 0.4;
}

.p-contact-form__agree {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-contact-form__agree {
    margin-top: 3.125rem;
  }
}

.p-contact-form__checkbox {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background-color: #fff;
  border: 1px solid #6a6766;
  border-radius: 0;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .p-contact-form__checkbox {
    border: 2px solid #6a6766;
  }
}

.p-contact-form__checkbox:checked::after {
  content: "";
  position: absolute;
  z-index: 10;
  top: 45%;
  left: 50%;
  width: 0.3125rem;
  height: 0.625rem;
  border-right: 2px solid #1A1A1A;
  border-bottom: 2px solid #1A1A1A;
  transform: translate(-50%, -50%) rotate(45deg);
}

.p-contact-form__checkbox:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

.p-contact-form__agree-text {
  margin-left: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.875;
  letter-spacing: 0.05em;
  color: #1A1A1A;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .p-contact-form__agree-text {
    font-size: 1.25rem;
    line-height: 2;
    margin-left: 1.25rem;
  }
}

.p-contact-form__agree-link {
  color: #1A1A1A;
  transition: opacity 0.2s ease-out;
}

@media (any-hover: hover) {
  .p-contact-form__agree-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    opacity: 0.6;
  }
}
.p-contact-form__agree-link:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

.p-contact-form__submit {
  position: relative;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-contact-form__submit {
    margin-top: 3.125rem;
  }
}

/* wpcf7-spinnerはボタンの右外側に絶対配置してフローから外す。
   親を fit-content にして基準ボックスをボタン幅と一致させないと、
   left:100% が行全体の右端を指してしまいSPで横スクロールの原因になる */
.p-contact-form__submit .wpcf7-spinner {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 0.5rem;
  transform: translateY(-50%);
}

/* ----- Contact Form 7 対応 ----- */
/* CF7 は各コントロールを span.wpcf7-form-control-wrap でラップするため、
   ラッパー側を input と同じフレックス子として振る舞わせる */
.p-contact-form__row .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  margin-top: 0.625rem; /* SP: ラベル→入力欄の間隔はここで制御（input個別のmargin-topは下で0に統一） */
}
@media screen and (min-width: 768px) {
  .p-contact-form__row .wpcf7-form-control-wrap {
    flex: 1;
    width: auto;
    margin-top: 0;
  }
}

.p-contact-form__row .wpcf7-form-control-wrap .p-contact-form__input,
.p-contact-form__row .wpcf7-form-control-wrap .p-contact-form__select,
.p-contact-form__row .wpcf7-form-control-wrap .p-contact-form__textarea {
  width: 100%;
  margin-top: 0;
}

/* CF7 の select には required 属性が付かず :invalid が効かないため、
   :has で「未選択時はプレースホルダと同じグレー」を再現 */
.p-contact-form__select:has(option:checked[value=""]) {
  color: rgba(26, 26, 26, 0.4);
}

/* CF7 acceptance のネスト構造（span.wpcf7-list-item > label > input + span）を
   旧マークアップ（checkbox + label 横並び）と同じ見た目に整える */
.p-contact-form__agree .wpcf7-list-item {
  margin: 0;
}

.p-contact-form__agree .wpcf7-list-item label {
  display: flex;
  align-items: center;
}

/* reCAPTCHA v3 のバッジ（右下固定）を非表示にする。
   送信ボタン等に重なるため。Googleの規約上、非表示にする場合は
   下の注記テキスト（プライバシーポリシー・利用規約へのリンク）の表示が必須 */
.grecaptcha-badge {
  visibility: hidden;
}

/* reCAPTCHA v3 のバッジ非表示に伴う注記（Googleの利用規約上、非表示にする場合は表示が必須） */
.p-contact-form__recaptcha-note {
  margin-top: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.6666666667;
  text-align: center;
  color: rgba(26, 26, 26, 0.5);
}
@media screen and (min-width: 768px) {
  .p-contact-form__recaptcha-note {
    margin-top: 1.875rem;
    font-size: 0.8125rem;
  }
}

.p-contact-form__recaptcha-note a {
  color: rgba(26, 26, 26, 0.5);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (any-hover: hover) {
  .p-contact-form__recaptcha-note a:hover {
    opacity: 0.6;
  }
}
/* ========================================
  Contact Tel (お電話でのお問い合せ)
======================================== */
.p-contact-tel {
  padding-block: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-contact-tel {
    padding-block: 6.25rem;
  }
}

.p-contact-tel__box {
  max-width: 50rem;
  margin-top: 1.875rem;
  margin-inline: auto;
  padding: 1.875rem 1rem;
  background-color: #E7E4E3;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-contact-tel__box {
    margin-top: 3.125rem;
    padding-block: 3.125rem;
  }
}

.p-contact-tel__number {
  display: inline-block;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.0714285714;
  letter-spacing: 0.03em;
  color: #1A1A1A;
}
@media screen and (min-width: 768px) {
  .p-contact-tel__number {
    font-size: 2.25rem;
    line-height: 1.1111111111;
    pointer-events: none; /* PCでは発信リンクを無効化（SPのみタップで発信） */
  }
}

.p-contact-tel__number:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

.p-contact-tel__note {
  margin-top: 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.875;
  letter-spacing: 0.05em;
  color: #1A1A1A;
}
@media screen and (min-width: 768px) {
  .p-contact-tel__note {
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    line-height: 2;
  }
}

/* ========================================
  Sustainability & Responsibility (SDGsへの取り組み)
======================================== */
.p-corporation-sdgs {
  padding-block: 3.125rem;
  background-color: #F9F8F7;
}
@media screen and (min-width: 768px) {
  .p-corporation-sdgs {
    padding-block: 6.25rem;
  }
}

.p-corporation-sdgs__images {
  display: flex;
  flex-direction: column;
  margin-top: 1.875rem;
  padding-inline: 0;
}
@media screen and (min-width: 768px) {
  .p-corporation-sdgs__images {
    flex-direction: row;
    justify-content: center;
    margin-top: 3.125rem;
  }
}

.p-corporation-sdgs__image {
  width: 100%;
}
@media screen and (min-width: 768px) {
  .p-corporation-sdgs__image {
    width: 37.875rem;
    flex-shrink: 0;
  }
}

.p-corporation-sdgs__img {
  aspect-ratio: 390/243;
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  .p-corporation-sdgs__img {
    aspect-ratio: 606/450;
  }
}

.p-corporation-sdgs__body {
  margin-top: 3.125rem;
  text-align: center;
}

.p-corporation-sdgs__text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 2.1875;
}
@media screen and (min-width: 768px) {
  .p-corporation-sdgs__text {
    font-size: 1.125rem;
    line-height: 1.9444444444;
  }
}

.p-corporation-sdgs__btn {
  display: inline-block;
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-corporation-sdgs__btn {
    margin-top: 3.125rem;
  }
}

/* ========================================
  Hero（ファーストビュー）
======================================== */
.p-fv {
  background-color: #fff;
  margin-top: 1.1875rem;
}
@media screen and (min-width: 768px) {
  .p-fv {
    margin-top: 5rem;
  }
}

/* スライダーコンテナ */
.p-fv__slides {
  position: relative;
  aspect-ratio: 390/430;
}
@media screen and (min-width: 768px) {
  .p-fv__slides {
    aspect-ratio: auto;
    height: 32.5rem;
  }
}

/* オープニングアニメーション（桜マーク＋ロゴ） */
.p-fv__intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2.1875rem;
  background-color: #fff;
  padding-top: 7.875rem;
}
@media screen and (min-width: 768px) {
  .p-fv__intro {
    padding-top: 10.3125rem;
    gap: 3.9375rem;
  }
}

.p-fv__intro-mark {
  width: 9.5245rem;
  height: auto;
}
@media screen and (min-width: 768px) {
  .p-fv__intro-mark {
    width: 15.625rem;
  }
}

.p-fv__intro-petal {
  opacity: 0;
}

.p-fv__intro-brand {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 0.9863;
  color: #1A1A1A;
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .p-fv__intro-brand {
    font-size: 2.6875rem;
    line-height: 0.9302325581;
    letter-spacing: 0.04em;
  }
}

/* スライドグループ（フェード切り替え） */
.p-fv__slide-group {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transition: opacity 2500ms ease;
}
@media screen and (min-width: 768px) {
  .p-fv__slide-group {
    flex-direction: row;
  }
}

.p-fv__slide-group.is-active {
  opacity: 1;
}

/* 各スライド */
/* 各スライド。高さは .p-fv__slides の aspect-ratio 側で決まるので指定しない
   （SPは縦積みで flex: 1 が、PCは横並びで align-items の stretch が高さを配る。
   height を入れるとPCで stretch を打ち消してコンテナ比率が効かなくなる） */
.p-fv__slide {
  position: relative;
  overflow: hidden;
  flex: 1;
}

/* PC/SPで別カットを出し分けるため picture が1階層挟まる。
   picture は置換要素ではないので、img の height: 100% が参照できるよう
   高さの受け渡し役として伸ばす（p-brand と同じ対応） */
.p-fv__slide picture {
  width: 100%;
  height: 100%;
}

.p-fv__slide-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* テキストラベル（全スライド共通・固定表示） */
.p-fv__labels {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1000ms ease;
}
@media screen and (min-width: 768px) {
  .p-fv__labels {
    inset: auto;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(calc(-50% - 0.875rem));
    flex-direction: row;
  }
}

.p-fv__labels.is-visible {
  opacity: 1;
}

.p-fv__label {
  flex: 1;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 2.1875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.1428571429;
}
@media screen and (min-width: 768px) {
  .p-fv__label {
    font-size: 2.9375rem;
    line-height: 0.8510638298;
  }
}

.p-fv__label--furniture {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1A1A1A;
  text-shadow: 0 0 15px #fff;
}
@media screen and (min-width: 768px) {
  .p-fv__label--furniture {
    justify-content: flex-end;
    padding-right: 1.5rem;
    text-shadow: 0 4px 30px #fff;
  }
}

.p-fv__label--space {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  transform: translateY(-0.8125rem);
}
@media screen and (min-width: 768px) {
  .p-fv__label--space {
    transform: none;
    justify-content: flex-start;
    padding-left: 1.5rem;
  }
}

/* コピーテキスト */
.p-fv__copy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 2.8125rem;
  padding-inline: 2.625rem;
}
@media screen and (min-width: 768px) {
  .p-fv__copy {
    padding-block: 6.25rem 8.125rem;
    padding-inline: 0;
  }
}

.p-fv__copy-text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.6666666667;
  color: #1A1A1A;
  letter-spacing: 0.12em;
}
@media screen and (min-width: 768px) {
  .p-fv__copy-text {
    font-size: 1.8125rem;
    line-height: 2.4137931034;
    letter-spacing: 0.08em;
  }
}

/* コピーテキスト分割パーツ（GSAPアニメーション用） */
.p-fv__copy-part {
  display: inline-block;
}

/* カンプは読点を詰めて組まれており、その分だけ手前の字送りが広い。
   通常なら palt や text-spacing-trim で再現するところだが、
   タイプライター表示のため1文字ずつ inline-block の span に分割しており
   文字間の組版機能が働かない（Zen Kaku Gothic New 自体にも palt テーブルが無い）。
   そのため該当箇所だけ数値で合わせる。前半2フレーズの字送りを広げ、
   増えた分を読点の詰めで打ち消すので行全体の幅は変わらない。
   カンプとの実測ズレ: 無調整で最大14px → 調整後は最大3px（平均1.2px）。
   SPはカンプが2行組みで条件が異なるため、PCのみに適用する。

   ※数え方は末尾（nth-last-child）基準。JS が読み上げ用の .u-visually-hidden を
   先頭に差し込むため、先頭からの nth-child では番号が1つずれる
   （実際にずれて、読点の詰めが「家具と」の「と」に掛かっていた）。
   末尾は「…フレーズ3・アイコン」で固定なので、JSの実行前後どちらでも同じ要素に当たる */
@media screen and (min-width: 768px) {
  .p-fv__copy-part:nth-last-child(n+3) {
    letter-spacing: 0.11em;
  }
}

/* 読点＝2番目のフレーズの末尾文字（末尾から3番目の子＝フレーズ2） */
@media screen and (min-width: 768px) {
  .p-fv__copy-part:nth-last-child(3) .p-fv__copy-char:last-child {
    margin-right: -0.38em;
  }
}

/* 1文字ずつ出現させるための文字単位スパン（JSで生成） */
.p-fv__copy-char {
  display: inline-block;
  opacity: 0;
}

/* 桜アイコンは常に文末に置いてスペースを確保（レイアウト固定）。
   opacity:0 で待機し、JS が transform でカーソルのように移動させる。
   文字位置を一切ずらさないため display は最初から inline-block を維持する。 */
.p-fv__copy-icon {
  display: inline-block;
  opacity: 0;
  flex-shrink: 0;
  width: 1.375rem;
  height: 0.75rem;
  background-image: url("../images/arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 0.3125rem;
}
@media screen and (min-width: 768px) {
  .p-fv__copy-icon {
    /* 移動中のアイコンは JS が「文字の上下中央」を基準に座標を出しているため、
       着地点（＝CSS上のホーム位置）もベースラインではなく上下中央に合わせる。
       SPは折り返しがあり行ごとにベースラインで揃えたいので継承のまま */
    align-self: center;
    width: 2.025rem;
    height: 1.125rem;
    margin-left: 0.75rem;
  }
}

/* ========================================
  Gallery of manufacturing processes
======================================== */
.p-overseas-gallery {
  background-color: #F9F8F7;
  padding-block: 3.125rem 0;
}
@media screen and (min-width: 768px) {
  .p-overseas-gallery {
    padding-block: 6.25rem 8rem;
  }
}

.p-overseas-gallery__inner {
  padding-inline: 0;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-overseas-gallery__inner {
    padding-inline: 1.5625rem;
  }
}

/* SP: 6列グリッドでモザイク配置（1枚 → 2枚 → 2枚 → 3枚 → 2枚の行構成）
   PC: 3列グリッドに切り替え、--wide/--tall のスパン指定を使う
   SPは縦横とも10pxの隙間（デザイナー指示 2026-08-05。以前は横のみ10pxで
   行同士は隙間なしとしていた）。PCカンプは縦横とも20px */
.p-overseas-gallery__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 0.625rem;
  gap: 0.625rem;
  list-style: none;
  margin-top: 1.875rem;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .p-overseas-gallery__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 5rem;
  }
}

.p-overseas-gallery__item {
  min-width: 0;
  aspect-ratio: 1/1;
  grid-column: span 3;
}
@media screen and (min-width: 768px) {
  .p-overseas-gallery__item {
    grid-column: span 1;
  }
}

.p-overseas-gallery__item:nth-child(6),
.p-overseas-gallery__item:nth-child(7),
.p-overseas-gallery__item:nth-child(8) {
  grid-column: span 2;
}
@media screen and (min-width: 768px) {
  .p-overseas-gallery__item:nth-child(6),
  .p-overseas-gallery__item:nth-child(7),
  .p-overseas-gallery__item:nth-child(8) {
    grid-column: span 1;
  }
}

/* PC/SP で画像を出し分けるタイル（--wide）は picture が1階層挟まるため、
   img の height: 100% がタイルの高さを参照できるよう picture もブロック化して伸ばす */
.p-overseas-gallery__item picture {
  width: 100%;
  height: 100%;
}

.p-overseas-gallery__item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* PC のみの大小レイアウト */
@media screen and (min-width: 768px) {
  .p-overseas-gallery__item--wide {
    grid-column: span 2;
    aspect-ratio: 2/1;
  }
}

.p-overseas-gallery__item--tall {
  grid-column: span 6; /* SP: 1枚目は全幅 */
}
@media screen and (min-width: 768px) {
  .p-overseas-gallery__item--tall {
    grid-row: span 2;
    grid-column: span 2;
    aspect-ratio: 1/1;
  }
}

/* PC: --wide（2:1）と同じ行に並ぶ正方形アイテム（4枚目・10枚目）は、
   aspect-ratio:1/1のままだと --wide より10px（gapの半分）低くなり、
   行の下のgapだけ20pxより広がってしまう。aspect-ratioを解除してgridのstretchに
   委ね、--wideと同じ行の高さ（410px）まで伸ばして下端を揃える */
@media screen and (min-width: 768px) {
  .p-overseas-gallery__item:nth-child(4),
  .p-overseas-gallery__item:nth-child(10) {
    aspect-ratio: auto;
  }
}

/* このページのみ CONTACT CTA の上に余白を確保する（SP50 / PC100） */
.p-overseas-gallery ~ .p-contact-cta {
  padding-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-overseas-gallery ~ .p-contact-cta {
    padding-top: 6.25rem;
  }
}

/* ========================================
  Overseas Factory - World Map
======================================== */
/* SPは東アジア周辺をズームした専用画像（overseas_map_world-sp.webp）を
   picture で出し分けるため、拡大＋ネガティブマージンでのトリミングは不要 */
.p-overseas-map img {
  width: 100%;
  height: auto;
}

/* ========================================
  Factory overview
======================================== */
.p-overseas-overview {
  background-color: #E7E4E3;
  padding-block: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-overseas-overview {
    padding-block: 6.25rem;
  }
}

.p-overseas-overview__inner {
  padding-inline: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .p-overseas-overview__inner {
    padding-inline: 1.5625rem;
  }
}

.p-overseas-overview__text {
  margin-top: 1.875rem;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  -moz-text-align-last: center;
       text-align-last: center;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-overseas-overview__text {
    font-size: 1rem;
    margin-top: 3.125rem;
    line-height: 2.1875;
  }
}

.p-overseas-overview__box {
  display: flex;
  flex-direction: column-reverse; /* SP: 画像が先、情報が後に来るため reverse */
  margin-top: 1.875rem;
  background-color: #F9F8F7;
}
@media screen and (min-width: 768px) {
  .p-overseas-overview__box {
    flex-direction: row;
    align-items: stretch;
    margin-top: 6.25rem;
  }
}

.p-overseas-overview__address {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-overseas-overview__address {
    width: 50%;
    flex: 1;
    padding-inline: 3.75rem;
  }
}

.p-overseas-overview__address-text {
  font-size: 0.875rem;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-overseas-overview__address-text {
    font-size: 1.125rem;
    line-height: 1.9444444444;
  }
}

@media screen and (min-width: 768px) {
  .p-overseas-overview__image {
    width: 50%;
  }
}

.p-overseas-overview__image img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 360/250;
}
@media screen and (min-width: 768px) {
  .p-overseas-overview__image img {
    aspect-ratio: 620/500;
  }
}

/* ========================================
  Overseas Factory - Role
======================================== */
.p-overseas-role {
  background-color: #E7E4E3;
  padding-block: 3.125rem 0;
}
@media screen and (min-width: 768px) {
  .p-overseas-role {
    padding-block: 6.25rem;
  }
}

.p-overseas-role__heading {
  font-size: 1.375rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  margin-inline: auto;
  /* SPは下線をテキスト幅基準で引くため fit-content。PCはインナー幅いっぱい */
  width: -moz-fit-content;
  width: fit-content;
  letter-spacing: 0.05em;
  line-height: 1.5909090909;
}
@media screen and (min-width: 768px) {
  .p-overseas-role__heading {
    width: 100%;
    font-size: 1.875rem;
    line-height: 2.3333333333;
    text-align: center;
  }
}

/* 下線はSPのみテキスト幅より10px短くし、左右中央に配置する。
   border-bottom だと長さを変えられないため擬似要素で引く */
.p-overseas-role__heading::after {
  content: "";
  display: block;
  width: calc(100% - 0.625rem);
  height: 2px;
  margin-top: 1.25rem;
  margin-inline: auto;
  background-color: #1A1A1A;
}
@media screen and (min-width: 768px) {
  .p-overseas-role__heading::after {
    width: 100%;
  }
}

.p-overseas-role__text {
  margin-top: 1.875rem;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-overseas-role__text {
    text-align: center;
    font-size: 1.125rem;
    margin-top: 5rem;
    line-height: 1.9444444444;
  }
}

.p-overseas-role__feature {
  margin-top: 3.125rem;
  /* SPカンプはイントロ部のみグレー帯。feature以降は白背景（全幅で上書き） */
  margin-inline: -1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-overseas-role__feature {
    background-color: transparent;
    margin-inline: 0;
    padding: 0;
    margin-top: 5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
}

/* 地図（SP: 単体で全幅表示 / PC: ボックスと横並び） */
@media screen and (min-width: 768px) {
  .p-overseas-role__map {
    order: 1;
    width: 50%;
    flex-shrink: 0;
  }
}

.p-overseas-role__map img {
  width: 100%;
  height: auto;
  aspect-ratio: 390/340;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  .p-overseas-role__map img {
    aspect-ratio: 620/500;
  }
}

.p-overseas-role__box {
  background-color: #F9F8F7;
  padding: 3.125rem 1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-overseas-role__box {
    order: 2;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 4.375rem;
  }
}

/* c-section-head は中央寄せが既定だが、このネスト箇所は左寄せデザインのため上書き */
.p-overseas-role__box-head {
  text-align: left;
}

.p-overseas-role__box-text {
  margin-top: 1.875rem;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-overseas-role__box-text {
    font-size: 1rem;
    line-height: 2.1875;
  }
}

/* 工場外観写真2枚（SP・PCとも横並び） */
.p-overseas-role__photos {
  display: flex;
  flex-direction: row;
}
@media screen and (min-width: 768px) {
  .p-overseas-role__photos {
    order: 3;
    width: 100%;
  }
}

.p-overseas-role__photos img {
  width: 50%;
  height: auto;
  aspect-ratio: 195/178;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  .p-overseas-role__photos img {
    aspect-ratio: 620/500;
  }
}

/* ========================================
  SVLK（インドネシア政府認証）
======================================== */
.p-overseas-svlk {
  padding-block: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-overseas-svlk {
    padding-block: 6.25rem;
  }
}

.p-overseas-svlk__inner {
  padding-inline: 0.9375rem;
}
@media screen and (min-width: 768px) {
  .p-overseas-svlk__inner {
    padding-inline: 1.5625rem;
  }
}

.p-overseas-svlk__head {
  text-align: center;
}

/* SPは「認証」で改行し、矢印を「取得」の直後に置く。
   inline-flex のままだとテキスト全体が1つのフレックスアイテムになり、
   矢印が2行分の中央（右端）に離れてしまうため、SPでは block にして
   矢印を通常のインラインフローに乗せる */
.p-overseas-svlk__title {
  display: block;
  font-size: 1.25rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0.1em;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .p-overseas-svlk__title {
    display: inline-flex;
    align-items: center;
    gap: 0.9375rem;
    font-size: 1.875rem;
    line-height: 2.3333333333;
    letter-spacing: 0.03em;
  }
}

/* 矢印は他のタイトルと同じく JS が .js-title-icon として差し込む（サイズ・画像は
   u-animation 側で定義）。SPは block レイアウトなのでインラインで文末に置き、
   PCは flex アイテムになるため間隔は gap に任せる */
.p-overseas-svlk__title .js-title-icon {
  margin-left: 0.5rem;
  vertical-align: middle;
}
@media screen and (min-width: 768px) {
  .p-overseas-svlk__title .js-title-icon {
    margin-left: 0;
  }
}

.p-overseas-svlk__caption {
  margin-top: 0.3125rem;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.7857142857;
}
@media screen and (min-width: 768px) {
  .p-overseas-svlk__caption {
    margin-top: 0.125rem;
    line-height: 1.4285714286;
    letter-spacing: 0.03em;
  }
}

.p-overseas-svlk__box {
  display: flex;
  flex-direction: column;
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-overseas-svlk__box {
    flex-direction: row;
    align-items: stretch;
    margin-top: 5rem;
  }
}

@media screen and (min-width: 768px) {
  .p-overseas-svlk__image {
    width: 50%;
  }
}

.p-overseas-svlk__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 360/250;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  .p-overseas-svlk__image img {
    aspect-ratio: 620/500;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

.p-overseas-svlk__content {
  padding: 1.5625rem;
  background-color: #F9F8F7;
}
@media screen and (min-width: 768px) {
  .p-overseas-svlk__content {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-inline: 3.125rem 3.6875rem;
    padding-block: 3.125rem;
  }
}

.p-overseas-svlk__lead {
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.875;
}
@media screen and (min-width: 768px) {
  .p-overseas-svlk__lead {
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
  }
}

.p-overseas-svlk__text {
  margin-top: 0.9375rem;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-overseas-svlk__text {
    font-size: 1rem;
    margin-top: 1.875rem;
    line-height: 2.1875;
  }
}

/* ========================================
  Introduction Video
======================================== */
.p-overseas-video {
  background-color: #fff;
  padding-block: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-overseas-video {
    padding-block: 6.25rem;
  }
}

.p-overseas-video__frame {
  margin-top: 1.875rem;
  max-width: 50rem;
  aspect-ratio: 390/219;
  margin-inline: auto;
}
@media screen and (min-width: 768px) {
  .p-overseas-video__frame {
    margin-top: 3.125rem;
    aspect-ratio: 800/450;
  }
}

.p-overseas-video__frame iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* ========================================
  Page Content（固定ページの汎用テンプレート用）

  page.php でのみ使用。クライアントが管理画面から追加した固定ページの本文
  （ブロックエディタの出力）をそのまま流すため、専用ページのような細かい
  レイアウトは持たせず、読み物として成立する最低限の体裁だけ整える。
======================================== */
.p-page-content {
  padding-block: 3.125rem;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .p-page-content {
    padding-block: 6.25rem;
  }
}

.p-page-content h2 {
  margin-top: 2.5rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.6666666667;
}
@media screen and (min-width: 768px) {
  .p-page-content h2 {
    margin-top: 3.75rem;
    font-size: 1.5rem;
    line-height: 1.6666666667;
  }
}

.p-page-content h3 {
  margin-top: 1.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.75;
}
@media screen and (min-width: 768px) {
  .p-page-content h3 {
    margin-top: 2.5rem;
    font-size: 1.25rem;
  }
}

.p-page-content p,
.p-page-content li {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-page-content p,
  .p-page-content li {
    font-size: 1rem;
    line-height: 2;
  }
}

.p-page-content p + p,
.p-page-content ul,
.p-page-content ol {
  margin-top: 1.25rem;
}

.p-page-content ul,
.p-page-content ol {
  padding-left: 1.5em;
}

.p-page-content ul {
  list-style: disc;
}

.p-page-content ol {
  list-style: decimal;
}

.p-page-content li + li {
  margin-top: 0.5rem;
}

/* 本文中のリンクは下線で示す（周囲の本文と区別がつくように） */
.p-page-content a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (any-hover: hover) {
  .p-page-content a:hover {
    opacity: 0.6;
  }
}
.p-page-content img {
  max-width: 100%;
  height: auto;
}

/* ========================================
  Page Hero（各ページ共通タイトルエリア）
======================================== */
.p-page-hero {
  text-align: center;
  background-color: #fff;
}

.p-page-hero__sub {
  display: inline-flex;
  align-items: baseline;
  gap: 0.9375rem;
  font-size: 1.75rem;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.0714285714;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 768px) {
  .p-page-hero__sub {
    font-size: 2.9375rem;
    line-height: 0.8510638298;
    letter-spacing: 0.06em;
  }
}

.p-page-hero__title {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #1A1A1A;
  line-height: 2.5;
  letter-spacing: 0.16em;
}

/* ----- 帯型バリアント（グレー背景・アイコン左）
   template-parts/page-hero.php で使用 ----- */
.p-page-hero--band {
  margin-top: 1.1875rem;
  background-color: #E7E4E3;
  padding-block: 2.0625rem 1.8125rem;
}
@media screen and (min-width: 768px) {
  .p-page-hero--band {
    margin-top: 5rem;
    padding-block: 2.0625rem;
  }
}

/* SP: アイコン＋英字を1ユニットとして中央揃えし、日本語は英字幅に合わせて中央揃えする。
   絶対配置＋固定オフセットで幅を無視して中央寄せしていたため、英字が長いページでは
   SPでアイコンが画面外に見切れていた。grid化してテキストの実幅に応じてアイコンごと
   中央に収める（アイコンと英字の間隔: SP=10px）。
   PCは従来通りの見た目（テキストのみ中央揃え・アイコンはそこから23px左に固定配置）を
   変更しないため、mq(md)でgrid指定を打ち消しinline-block＋絶対配置に戻している。 */
.p-page-hero--band .p-page-hero__icon-group {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  grid-column-gap: 0.625rem;
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}
@media screen and (min-width: 768px) {
  .p-page-hero--band .p-page-hero__icon-group {
    display: inline-block;
    position: relative;
  }
}

.p-page-hero--band .p-page-hero__icon {
  grid-column: 1;
  grid-row: 1/3;
  align-self: start;
}

/* SPの英字列には最低幅を持たせる。
   英字が極端に短いページ（CONTACT・実測109.7px）だと、アイコン＋英字のまとまりを
   中央寄せした結果まとまり自体が右に寄り、画面中央に置いた和文がアイコンに8px掛かる。
   150px はカンプの英字左端151pxと一致する値（390 - 2×(151-62) - 62 = 150）。
   他ページの英字は151px以上あるため影響しない。
   PCは親が inline-block でグリッドが効かず、英字も150pxを大きく超えるため打ち消す */
.p-page-hero--band .p-page-hero__sub {
  text-align: left;
  grid-column: 2;
  grid-row: 1;
  min-width: 9.375rem;
}
@media screen and (min-width: 768px) {
  .p-page-hero--band .p-page-hero__sub {
    min-width: 0;
    vertical-align: bottom;
  }
}

/* SPの和文は画面の左右中央に置く（デザイナー指示 2026-08-05）。
   2列目（英字の幅）の中で中央にしていたため、アイコン52px＋余白10pxの半分だけ
   画面中央から右にずれていた。1/-1 で両列にまたがらせると、
   トラック全体が justify-content: center で中央にあるぶん、その中央＝画面中央になる。
   和文は英字より必ず短いのでトラック幅（max-content）には影響しない。
   PCは md で親を inline-block に戻していてグリッドが効かないため、この指定は無関係 */
.p-page-hero--band .p-page-hero__title {
  grid-column: 1/-1;
  grid-row: 2;
  margin-top: 0.1875rem;
}
@media screen and (min-width: 768px) {
  .p-page-hero--band .p-page-hero__title {
    margin-top: 0.625rem;
    font-size: 1rem;
    line-height: 2.1875;
    letter-spacing: 0.05em;
  }
}

/* corporationページのみ、SPで英字の字間を2%に詰める（modifier="sub-tight"）。
   大文字化で「CORPORATE INFORMATION」が長くなったため（デザイナー指示 2026-08-06）。
   PCは共通の0.06emのまま変更しない */
.p-page-hero--sub-tight .p-page-hero__sub {
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768px) {
  .p-page-hero--sub-tight .p-page-hero__sub {
    letter-spacing: 0.06em;
  }
}

/* sustainability-responsibilityページのみSPで和文を左揃えにしていたが、
   帯ヒーローの和文は全ページ中央揃えに統一（デザイナー指示 2026-08-05）のため解除。
   modifier="title-left" は下の上下余白の指定で引き続き使う */
/* sustainability-responsibilityページのみ、SPの上下余白を14pxに詰める
   （PCは --band の 33px のまま。同詳細度のため md で 33px を明示して維持） */
.p-page-hero--title-left {
  padding-block: 0.875rem;
}
@media screen and (min-width: 768px) {
  .p-page-hero--title-left {
    padding-block: 2.0625rem;
  }
}

/* 桜マークの下端を和文の下端（ベースライン）に合わせて下げる（デザイナー指示 2026-08-05）。
   サイズは変えず位置だけ動かす。ずらし量は実測値で、
   SP: +1.5px／PC: +2.5px（いずれも作画の下端が和文の下端に一致する量） */
.p-page-hero--band .p-page-hero__mark {
  display: block;
  width: 3.25rem;
  height: 3.3125rem;
  margin-top: 0.28125rem;
}
@media screen and (min-width: 768px) {
  .p-page-hero--band .p-page-hero__mark {
    position: absolute;
    top: 0;
    left: -6.25rem;
    width: 4.8125rem;
    height: auto;
    margin-top: 0.15625rem;
  }
}

/* 花びらは「花の中心から開く」動きにしたいので、変形の基準点を
   各パスの矩形ではなくSVG全体の中心に置く（transform-box: view-box）。
   初期値はJS側で入れるが、JSが動かない環境でも消えたままにならないよう
   CSSでは何も隠さない */
.p-page-hero__petal {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

/* ========================================
  Privacy Policy
======================================== */
.p-privacy-policy {
  margin-top: 1.1875rem;
  padding-block: 6.25rem;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .p-privacy-policy {
    margin-top: 5rem;
  }
}

.p-privacy-policy__lead {
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 2.1875;
  letter-spacing: 0.05em;
  text-align: center;
  padding-block: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-privacy-policy__lead {
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    line-height: 2;
  }
}

.p-privacy-policy__body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-privacy-policy__body {
    gap: 1.875rem;
  }
}

.p-privacy-policy__item {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-privacy-policy__item {
    gap: 1.875rem;
  }
}

.p-privacy-policy__item-title {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E7E4E3;
  padding-block: 0.15625rem;
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 2.1875;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-privacy-policy__item-title {
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    line-height: 1.9444444444;
  }
}

.p-privacy-policy__item-text {
  padding-inline: 0.625rem;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 1.9285714286;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-privacy-policy__item-text {
    font-size: 1rem;
    letter-spacing: 0.03em;
    line-height: 1.5625;
  }
}

.p-privacy-policy__sub-list {
  display: flex;
  flex-direction: column;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 1.875rem;
  padding-block: 1.25rem;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  line-height: 1.9285714286;
  letter-spacing: 0.05em;
  text-align: left;
}
@media screen and (min-width: 768px) {
  .p-privacy-policy__sub-list {
    font-size: 1.125rem;
    line-height: 1.9444444444;
  }
}

.p-privacy-policy__sub-item {
  display: flex;
  gap: 0.5rem;
}

/* ①②③ の折り返し行を本文にぶら下げ揃え */
.p-privacy-policy__sub-num {
  flex-shrink: 0;
}

/* ========================================
  Recruit Job Category（募集職種）
======================================== */
.p-recruit-job {
  padding-block: 3.125rem 0;
}
@media screen and (min-width: 768px) {
  .p-recruit-job {
    padding-block: 6.25rem;
  }
}

/* ----- Job List ----- */
.p-recruit-job__list {
  margin-top: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-recruit-job__list {
    margin-top: 3.125rem;
    gap: 3.125rem;
  }
}

.p-recruit-job__card {
  background-color: #F9F8F7;
}

.p-recruit-job__card-title {
  background-color: #E7E4E3;
  padding-block: 1.25rem;
  text-align: center;
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.03em;
  line-height: 1.5625;
}
@media screen and (min-width: 768px) {
  .p-recruit-job__card-title {
    padding-block: 1.40625rem;
    font-size: 1.8125rem;
    line-height: 2.4137931034;
    letter-spacing: 0.1em;
  }
}

.p-recruit-job__card-text {
  padding-block: 1.25rem;
  padding-inline: 0.625rem;
  text-align: center;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-recruit-job__card-text {
    padding-block: 2.5rem;
    padding-inline: 6.25rem;
    font-size: 1rem;
    line-height: 1.875;
  }
}

/* ----- Contact box ----- */
.p-recruit-job__contact {
  margin-top: 3.125rem;
  background-color: #E7E4E3;
  padding-block: 3.125rem;
  padding-inline: 1.5625rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (min-width: 768px) {
  .p-recruit-job__contact {
    max-width: 1000px;
    margin-inline: auto;
    padding-block: 6.25rem;
    padding-inline: 5.625rem;
  }
}

.p-recruit-job__contact-text {
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-recruit-job__contact-text {
    font-size: 1.25rem;
    letter-spacing: 0.16em;
    line-height: 1.5;
  }
}

.p-recruit-job__contact .c-btn {
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-recruit-job__contact .c-btn {
    margin-top: 3.125rem;
  }
}

/* ========================================
  Recruit Message（採用メッセージ）
======================================== */
.p-recruit-message {
  padding-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-recruit-message {
    padding-top: 6.25rem;
  }
}

/* ----- Band (wrapper) ----- */
.p-recruit-message__band {
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-recruit-message__band {
    margin-top: 3.125rem;
  }
}

/* ----- Inner (light gray background：写真幅に収め、写真上端から) ----- */
.p-recruit-message__inner {
  background-color: #F9F8F7;
  padding-bottom: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-recruit-message__inner {
    max-width: 1000px;
    margin-inline: auto;
    padding-bottom: 6.25rem;
  }
}

/* ----- Photo ----- */
.p-recruit-message__photo img {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 390/250;
}
@media screen and (min-width: 768px) {
  .p-recruit-message__photo img {
    aspect-ratio: 1000/550;
  }
}

/* ----- Copy ----- */
.p-recruit-message__copy {
  margin-top: 3.125rem;
  padding-inline: 1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-recruit-message__copy {
    margin-top: 4.375rem;
    padding-inline: 2.5rem;
  }
}

.p-recruit-message__title {
  font-size: 1.25rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  text-align: center;
  letter-spacing: 0.15em;
  line-height: 2;
}
@media screen and (min-width: 768px) {
  .p-recruit-message__title {
    font-size: 1.625rem;
    line-height: 1.9230769231;
    letter-spacing: 0.1em;
  }
}

.p-recruit-message__text {
  margin-top: 1.875rem;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-recruit-message__text {
    margin-top: 2.25rem;
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    line-height: 2;
  }
}

/* ========================================
  Recruit Information
======================================== */
.p-recruit {
  background-color: #fff;
  padding-block: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-recruit {
    padding-block: 6.25rem;
  }
}

.p-recruit__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .p-recruit__inner {
    flex-direction: row;
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: 6.25rem;
  }
}

/* テキストエリア */
.p-recruit__content {
  padding-block: 0 3.125rem;
  padding-inline: 1.5625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .p-recruit__content {
    padding-block: 0;
    flex: 0 0 32.1875rem;
  }
}
@media screen and (min-width: 1440px) {
  .p-recruit__content {
    padding-block: 6.25rem;
    padding-inline: 0;
  }
}

/* 本文 */
.p-recruit__body {
  margin-top: 1.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-recruit__body {
    font-size: 1rem;
    line-height: 2.1875;
  }
}

/* ボタン */
.p-recruit__content .c-btn {
  margin-top: 1.875rem;
  align-self: flex-start;
}
@media screen and (min-width: 768px) {
  .p-recruit__content .c-btn {
    margin-top: 3.125rem;
  }
}

/* 写真エリア */
@media screen and (min-width: 768px) {
  .p-recruit__photo {
    flex: 1;
  }
}

.p-recruit__photo-img {
  width: 100%;
  height: auto;
  aspect-ratio: 390/250;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  .p-recruit__photo-img {
    aspect-ratio: 725/553;
  }
}

/* ========================================
  Our Strength（当社の強み）
======================================== */
/* Page Hero 帯型バリアントは _p-page-hero.scss（p-page-hero--band）に共通化 */
/* ----- Strength Hero (background image) ----- */
.p-strength__hero {
  position: relative;
  overflow: hidden;
  padding-block: 6.875rem;
  padding-inline: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-strength__hero {
    padding-block: 14.375rem;
    padding-inline: 18.75rem;
  }
}

/* 背景をパララックス用に分離（js-parallax が transform で動かす要素）。
   高さは指定せず、上下 -150px の inset で親より150pxずつ大きくし、
   ±150px 動いても端が見えないようにする */
.p-strength__hero-bg {
  position: absolute;
  top: -9.375rem;
  right: 0;
  bottom: -9.375rem;
  left: 0;
  z-index: 0;
  background-image: url("../images/strength_hero_01.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
}

.p-strength__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.p-strength__hero-text {
  position: relative;
  font-size: 1.25rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #fff;
  text-align: center;
  letter-spacing: 0.15em;
  line-height: 2;
  z-index: 20;
}
@media screen and (min-width: 768px) {
  .p-strength__hero-text {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.3333333333;
    letter-spacing: 0.03em;
  }
}

/* ----- Strength Cards ----- */
.p-strength {
  padding-bottom: 3rem;
}
@media screen and (min-width: 768px) {
  .p-strength {
    padding-bottom: 6.25rem;
  }
}

.p-strength__list {
  padding-top: 3.125rem;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-strength__list {
    padding-top: 6.25rem;
    gap: 6.25rem;
  }
}

.p-strength__card {
  border: 2px solid #1A1A1A;
}

.p-strength__card-head {
  background-color: #1A1A1A;
  padding-block: 1.875rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-strength__card-head {
    padding-block: 1.125rem;
  }
}

.p-strength__card-sub {
  font-size: 1.75rem;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.03em;
  line-height: 1.0714285714;
}
@media screen and (min-width: 768px) {
  .p-strength__card-sub {
    font-size: 2.25rem;
    line-height: 1.1111111111;
  }
}

.p-strength__card-title {
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  line-height: 1.875;
}
@media screen and (min-width: 768px) {
  .p-strength__card-title {
    font-size: 1.25rem;
    line-height: 2;
  }
}

.p-strength__card-body {
  padding-block: 1.875rem;
  padding-inline: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-strength__card-body {
    padding-block: 3.125rem;
  }
}

.p-strength__card-text {
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  text-align: center;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-strength__card-text {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.875;
  }
}

/* Brand Statement（ページヒーロー）は _p-page-hero.scss の p-page-hero--band に共通化 */
/* ========================================
  Our Commitment to a Sustainable Future
======================================== */
.p-sustainability-commitment {
  padding-top: 2.125rem;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .p-sustainability-commitment {
    padding-top: 6.25rem;
  }
}

.p-sustainability-commitment__panel {
  position: relative;
  background-image: url("../images/sustainability_bg.webp");
  background-size: cover;
  background-position: center;
  z-index: 0;
  margin-top: 1.5625rem;
  padding-inline: 1.5625rem;
  padding-block: 6.25rem;
}
@media screen and (min-width: 768px) {
  .p-sustainability-commitment__panel {
    margin-top: 5rem;
    padding-block: 10.625rem;
  }
}

.p-sustainability-commitment__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.p-sustainability-commitment__panel-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.125rem;
  background-color: #fff;
  margin-inline: 0;
  padding: 3.125rem 1.5625rem;
}
@media screen and (min-width: 768px) {
  .p-sustainability-commitment__panel-body {
    max-width: 65rem;
    margin-inline: auto;
    padding: 6.25rem 9.375rem;
    gap: 4.375rem;
  }
}

.p-sustainability-commitment__text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-sustainability-commitment__text {
    font-size: 1.25rem;
    line-height: 2;
    letter-spacing: 0.15em;
  }
}

/* 改行はHTML側で u-desktop / u-mobile を使って明示制御する（一律の br 非表示ルールは廃止） */
.p-sustainability-commitment__sdgs {
  width: 100%;
}

.p-sustainability-commitment__sdgs img {
  display: block;
  width: 100%;
  max-width: 31.25rem;
  height: auto;
  margin-inline: auto;
}

/* ========================================
  SDGs Cards
======================================== */
.p-sustainability-sdgs {
  padding-block: 3.125rem;
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .p-sustainability-sdgs {
    padding-block: 6.25rem;
  }
}

.p-sustainability-sdgs__inner {
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 768px) {
  .p-sustainability-sdgs__inner {
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}

.p-sustainability-sdgs__group {
  display: flex;
  flex-direction: column;
}

.p-sustainability-sdgs__group + .p-sustainability-sdgs__group {
  margin-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-sustainability-sdgs__group + .p-sustainability-sdgs__group {
    margin-top: 6.25rem;
  }
}

.p-sustainability-sdgs__list {
  margin-top: 1.875rem;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .p-sustainability-sdgs__list {
    margin-top: 3.125rem;
  }
}

.p-sustainability-sdgs__label {
  width: 100%;
  background-color: #E7E4E3;
  padding-block: 1.25rem;
  padding-inline: 1.25rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.875;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-sustainability-sdgs__label {
    padding-block: 0.78125rem;
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    line-height: 2;
  }
}

.p-sustainability-sdgs__text {
  padding-block: 1.25rem;
  padding-inline: 1.5625rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-sustainability-sdgs__text {
    padding-block: 1.25rem 1.5625rem;
    line-height: 1.4285714286;
    letter-spacing: 0.03em;
  }
}

/* ========================================
  Thanks（送信完了ページ）
======================================== */
.p-thanks {
  position: relative;
  margin-top: 1.1875rem;
  padding-block: 6.25rem 6.0625rem;
  text-align: center;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .p-thanks {
    margin-top: 5rem;
    padding-block: 12.4375rem 12.375rem;
  }
}

/* サクラロゴ装飾（左上・タイトルの左横） */
.p-thanks::before {
  content: "";
  position: absolute;
  top: 6.125rem;
  left: 0.875rem;
  width: 7.5rem;
  height: 7.125rem;
  background-image: url("../images/sakuralogo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .p-thanks::before {
    width: 11.125rem;
    height: 10.5625rem;
    top: 6.375rem;
    left: calc(50% - 25rem);
  }
}

/* サクラロゴ装飾（右下・トップに戻るボタンの右横。上下反転） */
.p-thanks::after {
  content: "";
  position: absolute;
  bottom: 2.4375rem;
  right: 2.25rem;
  width: 7.1875rem;
  height: 6.8125rem;
  background-image: url("../images/sakuralogo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  transform: scaleY(-1);
  pointer-events: none;
  z-index: 0;
}
@media screen and (min-width: 768px) {
  .p-thanks::after {
    width: 18.25rem;
    height: 17.375rem;
    bottom: 1.125rem;
    right: calc(50% - 34.6875rem);
  }
}

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

.p-thanks__title {
  display: inline-flex;
  align-items: center;
  gap: 0.9375rem;
  font-size: 1.75rem;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 600;
  color: #1A1A1A;
  line-height: 1.0714285714;
  letter-spacing: 0.03em;
}
@media screen and (min-width: 768px) {
  .p-thanks__title {
    font-size: 2.9375rem;
    gap: 0.9375rem;
    line-height: 0.8510638298;
  }
}

/* 和文サブタイトルは共通の c-section-head__title を使う（差分は margin-top 2px のみで、
   カンプもその値だったため統一） */
.p-thanks__body {
  position: relative;
  z-index: 1;
  margin-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-thanks__body {
    margin-top: 3.75rem;
  }
}

.p-thanks__text {
  font-size: 1rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 2.1875;
}
@media screen and (min-width: 768px) {
  .p-thanks__text {
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    line-height: 2;
  }
}

.p-thanks__note {
  margin-top: 3.125rem;
  font-size: 0.875rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-thanks__note {
    font-size: 1rem;
    letter-spacing: 0.03em;
    line-height: 1.5625;
    max-width: 50rem;
    margin-inline: auto;
  }
}

.p-thanks__note + .p-thanks__note {
  margin-top: 1.6875rem;
}
@media screen and (min-width: 768px) {
  .p-thanks__note + .p-thanks__note {
    margin-top: 1.5625rem;
  }
}

.p-thanks__btn-wrap {
  position: relative;
  z-index: 1;
  margin-top: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-thanks__btn-wrap {
    margin-top: 3.125rem;
  }
}

/* ========================================
  Our Strengths（トップページ）
======================================== */
.p-top-strength {
  padding-block: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-top-strength {
    padding-block: 6.25rem;
  }
}

/* カードリスト
   PCは「写真 / 見出し / 箇条書き」の3行をカード3枚で共有する（subgrid）。
   カードをそれぞれ独立した flex にすると、見出しの行数が違ったときに
   黒い罫線と箇条書きの開始位置が枚ごとにずれるため、
   親の行をそのまま引き継がせて構造的に揃える。
   行間は0（カード内部は各要素の padding で間隔を作る）なので row-gap は明示的に0にする */
.p-top-strength__list {
  margin-top: 1.875rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-top-strength__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    grid-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
    grid-row-gap: 0;
    row-gap: 0;
    margin-top: 3.125rem;
  }
}

.p-top-strength__item {
  flex: 1;
  background-color: #F9F8F7;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .p-top-strength__item {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

/* 写真エリア */
.p-top-strength__photo {
  position: relative;
}

.p-top-strength__photo-img {
  width: 100%;
  height: auto;
  aspect-ratio: 340/250;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (min-width: 768px) {
  .p-top-strength__photo-img {
    aspect-ratio: 1/1;
  }
}

.p-top-strength__photo-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.p-top-strength__photo-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
  text-align: center;
  color: #fff;
}

.p-top-strength__photo-title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.4285714286;
}
@media screen and (min-width: 768px) {
  .p-top-strength__photo-title {
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    line-height: 2;
  }
}

.p-top-strength__photo-sub {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.0714285714;
}
@media screen and (min-width: 768px) {
  .p-top-strength__photo-sub {
    font-size: 2.25rem;
    line-height: 1.1111111111;
  }
}

/* コンテンツエリア
   カード側の subgrid から「見出し」「箇条書き」の2行をさらに引き継ぐ */
.p-top-strength__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 768px) {
  .p-top-strength__body {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
  }
}

.p-top-strength__heading {
  border-bottom: 1px solid #1A1A1A;
  padding-block: 1.25rem;
  padding-inline: 0.3125rem; /* SP: 見出し19文字がカンプ通り2行に収まる幅を確保 */
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-top-strength__heading {
    padding-inline: 1.25rem;
    border-bottom: 2px solid #1A1A1A;
  }
}

.p-top-strength__heading p {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.875;
}

/* 箇条書き */
.p-top-strength__points {
  list-style: none;
  margin: 0;
  padding: 0.9375rem 0.9375rem 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-top-strength__points {
    padding-top: 0.9375rem;
    padding-inline: 2.8125rem;
    padding-bottom: 5rem;
  }
}

.p-top-strength__points li {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.05em;
  line-height: 1.9285714286;
}
@media screen and (min-width: 768px) {
  .p-top-strength__points li {
    line-height: 1.4285714286;
    letter-spacing: 0.03em;
  }
}

/* ボタン */
.p-top-strength__btn-wrap {
  margin-top: 1.875rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-top-strength__btn-wrap {
    margin-top: 3.125rem;
  }
}

/* ========================================
  Our Works
======================================== */
.p-works {
  padding-block: 3.125rem;
}
@media screen and (min-width: 768px) {
  .p-works {
    padding-block: 6.25rem;
  }
}

/* スライダーラッパー */
.p-works__slider-outer {
  position: relative;
  overflow: hidden;
  margin-top: 1.875rem;
}
@media screen and (min-width: 768px) {
  .p-works__slider-outer {
    margin-top: 3.125rem;
  }
}

/* トラック（JS で transform 制御） */
.p-works__track {
  display: flex;
}
@media screen and (min-width: 768px) {
  .p-works__track {
    gap: 1.25rem;
    overflow: visible;
  }
}

/* スライド */
.p-works__slide {
  flex-shrink: 0;
  overflow: hidden;
  cursor: pointer;
  /* SP: 幅は JS で設定 */
  height: 17.8125rem;
}
@media screen and (min-width: 768px) {
  .p-works__slide {
    width: 32.5rem;
    height: 23.75rem;
  }
}

.p-works__slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.3s ease-in-out;
}

@media (any-hover: hover) {
  .p-works__slide:hover img {
    transform: scale(1.04);
  }
}
/* 矢印ボタン（SP + PC 共通で表示） */
.p-works__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background-color: rgba(217, 217, 217, 0.3);
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s ease-out;
}

.p-works__arrow--prev {
  left: 0.9375rem;
}

.p-works__arrow--next {
  right: 0.9375rem;
}

.p-works__arrow span {
  display: block;
  width: 1.0625rem;
  height: 1.5625rem;
  background-image: url("../images/arrow-slide.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.p-works__arrow--prev span {
  transform: scaleX(-1);
}

.p-works__arrow:focus-visible {
  outline: 2px solid #1A1A1A;
  outline-offset: 2px;
}

@media (any-hover: hover) {
  .p-works__arrow:hover {
    background-color: rgba(217, 217, 217, 0.6);
  }
}
/* ドットインジケーター（SPのみ表示） */
.p-works__dots {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  margin-top: 1.25rem;
}
@media screen and (min-width: 768px) {
  .p-works__dots {
    display: none;
  }
}

.p-works__dot {
  width: 0.333125rem;
  height: 0.333125rem;
  border-radius: 50%;
  background-color: #E7E4E3;
}

.p-works__dot.is-active {
  background-color: #6A6766;
}

/* ボタン */
.p-works__btn-wrap {
  margin-top: 1.875rem;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .p-works__btn-wrap {
    margin-top: 3.125rem;
  }
}

/* ========================================
  ライトボックス
======================================== */
.p-works-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.92);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}

.p-works-lightbox.is-open {
  display: flex;
}

.p-works-lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
}

.p-works-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.p-works-lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-works-lightbox__close::before,
.p-works-lightbox__close::after {
  content: "";
  position: absolute;
  width: 1.125rem;
  height: 0.125rem;
  background-color: #fff;
}

.p-works-lightbox__close::before {
  transform: rotate(45deg);
}

.p-works-lightbox__close::after {
  transform: rotate(-45deg);
}

@media (any-hover: hover) {
  .p-works-lightbox__close:hover {
    border-color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
  }
}
.p-works-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
@media screen and (min-width: 768px) {
  .p-works-lightbox__nav {
    width: 3.25rem;
    height: 3.25rem;
  }
}

.p-works-lightbox__nav--prev {
  left: 0.625rem;
}
@media screen and (min-width: 768px) {
  .p-works-lightbox__nav--prev {
    left: 1.875rem;
  }
}

.p-works-lightbox__nav--next {
  right: 0.625rem;
}
@media screen and (min-width: 768px) {
  .p-works-lightbox__nav--next {
    right: 1.875rem;
  }
}

.p-works-lightbox__nav span {
  display: block;
  width: 1.125rem;
  height: 1.625rem;
  background-image: url("../images/arrow-slide.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.p-works-lightbox__nav--prev span {
  transform: scaleX(-1);
}

@media (any-hover: hover) {
  .p-works-lightbox__nav:hover {
    background-color: rgba(255, 255, 255, 0.4);
  }
}
.p-works-lightbox__counter {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.8125rem;
  font-family: "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ========================================
  タイトルアニメーション
======================================== */
.js-title-icon {
  display: inline-block;
  flex-shrink: 0;
  width: 1.375rem;
  height: 0.8125rem;
  background-image: url("../images/arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.js-title-char {
  display: inline-block;
}

/* PC専用表示（SP・タブレットでは非表示）
   改行 <br> に付ける用途が主。PCカンプ基準の折り返し位置のため、
   コンテナが狭いタブレット帯(768〜1023px)では効かせず自然折り返しに任せる */
.u-desktop {
  display: none;
}
@media screen and (min-width: 1024px) {
  .u-desktop {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .u-mobile {
    display: none;
  }
}

/* ========================================
  視覚的非表示（読み上げ用）
======================================== */
/* 画面には出さず、スクリーンリーダーには読ませたいテキスト用。
   タイプライター表示のように1文字ずつ <span> に分割する箇所では、
   分割済みの見た目側を aria-hidden で隠し、こちらに元の文を置く。

   display: none や visibility: hidden は読み上げからも消えるため使えない。
   aria-label で代替する方法もあるが、p などロールによっては仕様上
   命名が想定されておらず支援技術に無視されうるので、実テキストを置く */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/*# sourceMappingURL=styles.css.map */