@charset "UTF-8";
/*========================================================
colors
========================================================*/
/*========================================================
fonts
========================================================*/
/*========================================================
layout
========================================================*/
/*========================================================
breakpoint
========================================================*/
/*========================================================
mixin
========================================================*/
/*========================================================
可変レスポンシブ（SP境界768px〜PC1680px）
- この範囲の外（768px以下・1680px以上）には一切出力しないため、SP/PCの見た目は変わらない
- pc()：1680px時の値を基準に、ビューポート幅に比例して縮小する（＝PCレイアウトの縮小版）
- cq()：カード内の文字など、ビューポートではなく親カード幅に比例させたい値に使う
  （カラム数の切り替わりでカード幅が大きく変わる箇所でも、カードに対する比率を保てる）
========================================================*/
/*========================================================
CSS変数（ローカル変数）の共通構文
- 各コンポーネント／セクションの数値は、Sassマップ（ローカル変数）にまとめて書き、
  fluid-vars / cq-vars でCSS変数（--_xxx）として一括出力する。値の書き方は全箇所共通：
    px          … 1680px時の値。比例縮小する（下限0）
    (px, 最小)  … 1680px時の値と、縮小の下限
    それ以外    … そのまま出力（倍率・calc等）
- fluid-vars：ビューポート幅に比例（vw）／ cq-vars：コンテナ（カード自身）の幅に比例（cqi）
- 変数名の先頭「_」はそのコンポーネント内だけで使うローカル変数の目印
- どちらも mq-fluid の中でだけ使う（PC・SPには出力しない）
========================================================*/
/*========================================================
base / global
========================================================*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #4A4947;
  background: #E8E8E8;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

a:hover {
  opacity: 0.75;
}

ul,
ol {
  list-style: none;
}

/* SP専用の改行（<br class="u-sp-br">）：PC/タブレットでは非表示、SPのみ改行として表示 */
.u-sp-br {
  display: none;
}
@media screen and (max-width: 768px) {
  .u-sp-br {
    display: inline;
  }
}

/* PC/タブレット専用の改行（<br class="u-pc-br">）：SPでは非表示（u-sp-brの逆） */
.u-pc-br {
  display: inline;
}
@media screen and (max-width: 768px) {
  .u-pc-br {
    display: none;
  }
}

/* PC専用テキスト（<span class="u-pc-only">）：SPでは非表示 */
@media screen and (max-width: 768px) {
  .u-pc-only {
    display: none;
  }
}

/* WP標準のライトボックス（画像拡大）：背景を白ベタ表示ではなく透過に上書き
   ※WPコアがJSで\3c style>を動的挿入して背景色を指定してくるため !important で上書き */
.wp-lightbox-overlay .scrim {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

/* 画像プレースホルダー（実画像差し替えまでの暫定表示） */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #d9d9d9, #d9d9d9 12px, #e6e6e6 12px, #e6e6e6 24px);
  color: #7a7a7a;
  font-size: 16px;
  letter-spacing: 0.05em;
  text-align: center;
}

/*========================================================
デザイントークン（CSS変数）
- カラー：_variables.scssのSass変数をそのままCSS変数として出力する（値の二重管理をしない）
- 可変値：複数のセクションで共通の値だけをここに置く。各セクション固有の値は
  それぞれのファイルでローカル変数（--_xxx）として持つ
- 可変値は mq-fluid（769〜1679px）の中でだけ定義・使用する（PC・SPには影響しない）
========================================================*/
:root {
  --color-main: #0068B6;
  --color-accent: #B10000;
  --color-text: #4A4947;
  --color-text-sub: #545454;
  --color-text-black: #000000;
  --color-gray: #707070;
  --color-gray-dark: #383838;
  --color-gray-light: #E1E1E1;
  --color-gray-line: #D1D1D1;
  --color-bg: #F2F2F2;
  --color-bg-light: #E8E8E8;
  --color-white: #FFFFFF;
  --color-err: #dc3545;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  :root {
    --fs-lead: clamp(13px, 0.9523809524vw, 16px);
    --space-section: clamp(0px, 11.9047619048vw, 200px);
    --space-block: clamp(0px, 5.9523809524vw, 100px);
    --gap-stack: clamp(0px, 1.6666666667vw, 28px);
    --content-gutter: clamp(0px, 3.4821428571vw, 58.5px);
    --container-limit: calc(100vw - var(--content-gutter) * 2);
  }
}

/*======== button ========*/
.c-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  padding: 16px 28px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border: 1px solid #fff;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.c-btn::after {
  content: "";
  width: 50%;
  height: 10px;
  background: url(../../assets/images/common/link_arrow.png) no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  bottom: 14px;
  right: -40px;
  transition: right 0.3s ease;
}
.c-btn {
  /* 共通ホバー：背景は白の左→右グラデーション（左30%・右70%透過）＋矢印を右へスライド */
}
.c-btn:hover {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.5) 100%);
  opacity: 1;
}
.c-btn:hover::after {
  right: -50px;
}
@media screen and (max-width: 768px) {
  .c-btn {
    width: 140px;
    height: 45px;
    min-width: 0;
    font-size: 12px;
  }
  .c-btn::after {
    width: 50px;
    height: 7px;
    bottom: 10px;
    right: -10px;
  }
  .c-btn:hover::after {
    right: -10px;
  }
}
.c-btn--mv {
  color: #FFFFFF;
  width: 230px;
  height: 76px;
}
.c-btn--line {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.2);
  min-width: 180px;
  height: 60px;
  padding: 12px 24px;
}
.c-btn--line::after {
  bottom: 8px;
  right: -24px;
}
@media screen and (max-width: 768px) {
  .c-btn--line {
    min-width: 0;
    height: 45px;
    padding: 10px 0;
  }
  .c-btn--line::after {
    width: 50px;
    height: 7px;
    bottom: 6px;
    right: -10px;
  }
  .c-btn--line:hover::after {
    right: -10px;
  }
}
.c-btn--gray {
  color: #707070;
  background: transparent;
  border-color: #707070;
  min-width: 160px;
  height: 60px;
  padding: 12px 22px;
}
.c-btn--gray::after {
  background-image: url(../../assets/images/common/link_arrow_gray.png);
  bottom: 8px;
  right: -24px;
}
@media screen and (max-width: 768px) {
  .c-btn--gray {
    min-width: 0;
    height: 45px;
    padding: 12px 10px;
  }
  .c-btn--gray::after {
    width: 50px;
    height: 7px;
    bottom: 6px;
    right: -10px;
  }
  .c-btn--gray:hover::after {
    right: -10px;
  }
}

/*========================================================
可変（769〜1679px）：全ページ共通
- サイズはすべてローカル変数（--_btn-*）で持ち、modifierは変数の値だけを差し替える
- 1680px時にPCと同じ値になるため、PC（1680px以上）との境目で段差は出ない
========================================================*/
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-btn {
    --_btn-min-w: clamp(120px, 10.7142857143vw, 180px);
    --_btn-pad-y: clamp(8px, 0.9523809524vw, 16px);
    --_btn-pad-x: clamp(14px, 1.6666666667vw, 28px);
    --_btn-fs: clamp(13px, 1.1904761905vw, 20px);
    --_btn-arrow-h: clamp(7px, 0.5952380952vw, 10px);
    --_btn-arrow-b: clamp(8px, 0.8333333333vw, 14px);
    --_btn-arrow-r: clamp(20px, 2.380952381vw, 40px);
    --_btn-arrow-r-hover: clamp(25px, 2.9761904762vw, 50px);
    min-width: var(--_btn-min-w);
    padding: var(--_btn-pad-y) var(--_btn-pad-x);
    font-size: var(--_btn-fs);
    white-space: nowrap;
  }
  .c-btn::after {
    height: var(--_btn-arrow-h);
    bottom: var(--_btn-arrow-b);
    right: calc(-1 * var(--_btn-arrow-r));
  }
  .c-btn:hover::after {
    right: calc(-1 * var(--_btn-arrow-r-hover));
  }
  .c-btn--mv {
    width: clamp(150px, 13.6904761905vw, 230px);
    height: clamp(50px, 4.5238095238vw, 76px);
  }
  .c-btn--line {
    --_btn-min-w: clamp(120px, 10.7142857143vw, 180px);
    --_btn-h: clamp(40px, 3.5714285714vw, 60px);
    --_btn-pad-y: clamp(8px, 0.7142857143vw, 12px);
    --_btn-pad-x: clamp(12px, 1.4285714286vw, 24px);
    --_btn-arrow-b: clamp(6px, 0.4761904762vw, 8px);
    --_btn-arrow-r: clamp(12px, 1.4285714286vw, 24px);
  }
  .c-btn--gray {
    --_btn-min-w: clamp(110px, 9.5238095238vw, 160px);
    --_btn-h: clamp(40px, 3.5714285714vw, 60px);
    --_btn-pad-y: clamp(8px, 0.7142857143vw, 12px);
    --_btn-pad-x: clamp(11px, 1.3095238095vw, 22px);
    --_btn-arrow-b: clamp(6px, 0.4761904762vw, 8px);
    --_btn-arrow-r: clamp(12px, 1.4285714286vw, 24px);
  }
  .c-btn--line, .c-btn--gray {
    height: var(--_btn-h);
  }
}

/*======== service card（ソリューション/製品一覧/2次加工）幅953px×高さ610px ========*/
.c-card a {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  color: #FFFFFF;
}
.c-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
a:hover .c-card__img {
  transform: scale(1.05);
}
.c-card a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.6) 100%);
}
.c-card__txt {
  position: absolute;
  left: 122px;
  bottom: 95px;
  color: #fff;
  z-index: 1;
}
.c-card__en {
  z-index: 1;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 20px;
  letter-spacing: 0.06em;
  opacity: 0.9;
  display: block;
  margin-bottom: 10px;
}
.c-card__ja {
  z-index: 1;
  font-size: 45px;
  font-weight: 500;
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
}
@media screen and (max-width: 1440px) {
  .c-card__txt {
    left: 40px;
    bottom: 40px;
  }
  .c-card__ja {
    font-size: 32px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-card {
    container-type: inline-size;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-card {
    --_card-x: clamp(20px, 14.6546546547cqi, 122px);
    --_card-y: clamp(20px, 11.4114114114cqi, 95px);
    --_card-en-fs: clamp(11px, 2.4024024024cqi, 20px);
    --_card-en-mb: clamp(0px, 1.2012012012cqi, 10px);
    --_card-ja-fs: clamp(20px, 5.4054054054cqi, 45px);
    --_card-ja-pb: clamp(0px, 1.2012012012cqi, 10px);
  }
  .c-card__txt {
    left: var(--_card-x);
    bottom: var(--_card-y);
  }
  .c-card__en {
    font-size: var(--_card-en-fs);
    margin-bottom: var(--_card-en-mb);
  }
  .c-card__ja {
    font-size: var(--_card-ja-fs);
    padding-bottom: var(--_card-ja-pb);
  }
}
@media screen and (min-width: 768.02px) and (max-width: 992px) {
  .c-card {
    --_card-x: clamp(20px, 7.2619047619vw, 122px);
    --_card-y: clamp(20px, 5.6547619048vw, 95px);
    --_card-en-fs: clamp(11px, 1.1904761905vw, 20px);
    --_card-en-mb: clamp(0px, 0.5952380952vw, 10px);
    --_card-ja-fs: clamp(20px, 2.6785714286vw, 45px);
    --_card-ja-pb: clamp(0px, 0.5952380952vw, 10px);
  }
  .c-card a {
    height: 360px;
  }
}
@media screen and (max-width: 1000px) {
  .c-card__en {
    bottom: 60px;
    left: 28px;
  }
  .c-card__ja {
    bottom: 26px;
    left: 28px;
    font-size: 24px;
  }
}
@media screen and (max-width: 768px) {
  .c-card a {
    aspect-ratio: auto;
    height: 180px;
  }
  .c-card__txt {
    left: 30px;
    bottom: 20px;
  }
  .c-card__en {
    font-size: 12px;
  }
  .c-card__ja {
    font-size: 23px;
    padding-bottom: 0;
    border-bottom: none;
  }
}

/*======== work card（納入実績） ========*/
.c-case a {
  display: block;
  overflow: hidden;
  border-radius: 10px;
}
.c-case a:hover {
  opacity: 1;
}
a:hover .c-case__img {
  transform: scale(1.05);
}
.c-case__img {
  display: block;
  width: 100%;
  aspect-ratio: 580/380;
  -o-object-fit: cover;
     object-fit: cover;
  margin-bottom: 16px;
  border-radius: 10px;
  transition: transform 0.6s ease;
}
.c-case__cat {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 4px;
  padding-bottom: 3px;
  border-bottom: 1px solid #fff;
  display: inline-block;
  min-height: 50.4px;
}
.c-case__title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  line-height: 1.6;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-case {
    container-type: inline-size;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-case {
    --_case-img-mb: clamp(0px, 3.1733439111cqi, 16px);
    --_case-fs: clamp(12px, 3.5700119cqi, 18px);
    --_case-cat-mb: clamp(0px, 0.7933359778cqi, 4px);
  }
  .c-case__img {
    margin-bottom: var(--_case-img-mb);
  }
  .c-case__cat {
    font-size: var(--_case-fs);
    margin-bottom: var(--_case-cat-mb);
    min-height: calc(var(--_case-fs) * 1.4 * 2);
  }
  .c-case__title {
    font-size: var(--_case-fs);
  }
}
@media screen and (max-width: 768px) {
  .c-case__img {
    aspect-ratio: auto;
    height: 220px;
  }
  .c-case__cat {
    font-size: 15px;
    line-height: 1.5;
  }
  .c-case__title {
    font-size: 15px;
  }
}

/*======== banner card（会社情報グリッド）高さ477px・画像下部に白いテキストボックス ========*/
.c-bnr a {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 340/470;
  border-radius: 10px;
  overflow: hidden;
  color: #4A4947;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.c-bnr a:hover {
  opacity: 1;
}
.c-bnr__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
a:hover .c-bnr__img {
  transform: scale(1.05);
}
.c-bnr__box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  border-radius: 0px 0px 10px 10px;
}
.c-bnr__title {
  font-size: 22px;
  font-weight: 500;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.c-bnr__text {
  font-size: 16px;
  line-height: 1.5;
  color: #FFFFFF;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-bnr {
    container-type: inline-size;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-bnr {
    --_bnr-gap: clamp(0px, 3.3978933062cqi, 10px);
    --_bnr-pad: clamp(10px, 6.7957866123cqi, 20px);
    --_bnr-title-fs: clamp(13px, 7.4753652735cqi, 22px);
    --_bnr-title-mb: clamp(0px, 3.3978933062cqi, 10px);
    --_bnr-text-fs: clamp(11px, 5.4366292898cqi, 16px);
  }
  .c-bnr__box {
    gap: var(--_bnr-gap);
    padding: var(--_bnr-pad);
  }
  .c-bnr__title {
    font-size: var(--_bnr-title-fs);
    margin-bottom: var(--_bnr-title-mb);
  }
  .c-bnr__text {
    font-size: var(--_bnr-text-fs);
  }
}
@media screen and (max-width: 768px) {
  .c-bnr a {
    aspect-ratio: auto;
    height: 275px;
  }
  .c-bnr__box {
    padding: 16px;
  }
  .c-bnr__title {
    font-size: 14px;
  }
  .c-bnr__text {
    font-size: 12px;
  }
  .c-bnr__text br {
    display: none;
  }
}

/*======== セクション見出し（英字＋日本語見出し＋説明文） ========*/
.p-section-head {
  text-align: center;
  margin-bottom: 34px;
}
.p-section-head__en {
  display: block;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 25px;
  letter-spacing: 0.1em;
  color: #707070;
  margin-bottom: 8px;
}
.p-section-head__ja {
  font-size: 45px;
  font-weight: 500;
  color: #4A4947;
  letter-spacing: 0.06em;
}
.p-section-head__desc {
  font-size: 18px;
  line-height: 2;
  color: #545454;
  margin-bottom: 40px;
}
.p-section-head--left {
  text-align: left;
  padding-bottom: 18px;
  border-bottom: 1px solid #D1D1D1;
}
.p-section-head--left .p-section-head__desc {
  margin: 16px 0 0;
  max-width: none;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-section-head {
    --_head-mb: clamp(0px, 2.0238095238vw, 34px);
    --_head-en-fs: clamp(13px, 1.4880952381vw, 25px);
    --_head-en-mb: clamp(0px, 0.4761904762vw, 8px);
    --_head-ja-fs: clamp(22px, 2.6785714286vw, 45px);
    --_head-line-pb: clamp(10px, 1.0714285714vw, 18px);
    margin-bottom: var(--_head-mb);
  }
  .p-section-head__en {
    font-size: var(--_head-en-fs);
    margin-bottom: var(--_head-en-mb);
  }
  .p-section-head__ja {
    font-size: var(--_head-ja-fs);
  }
  .p-section-head__desc {
    --_desc-fs: clamp(13px, 1.0714285714vw, 18px);
    --_desc-mb: clamp(0px, 2.380952381vw, 40px);
    --_desc-mt: clamp(0px, 0.9523809524vw, 16px);
    font-size: var(--_desc-fs);
    margin-bottom: var(--_desc-mb);
  }
  .p-section-head--left {
    padding-bottom: var(--_head-line-pb);
  }
  .p-section-head--left .p-section-head__desc {
    margin-top: var(--_desc-mt);
  }
}
@media screen and (max-width: 992px) {
  .p-section-head {
    margin-bottom: 20px;
  }
  .p-section-head__en {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .p-section-head__ja {
    font-size: 23px;
  }
  .p-section-head__desc {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 24px;
  }
}

/*========================================================
modal
========================================================*/
/*========================================================
ライトボックス（事例ページ p-prod__grid 画像の拡大表示）
========================================================*/
.c-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.c-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.c-lightbox__stage {
  max-width: 90vw;
  max-height: 85vh;
}
.c-lightbox__img {
  display: block;
  max-width: 90vw;
  max-height: 85vh;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.c-lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #FFFFFF;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.c-lightbox__close:hover {
  opacity: 0.7;
}
.c-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.c-lightbox__arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}
.c-lightbox__arrow::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
}
.c-lightbox__arrow--prev {
  left: 24px;
}
.c-lightbox__arrow--prev::before {
  transform: rotate(135deg);
  margin-left: 6px;
}
.c-lightbox__arrow--next {
  right: 24px;
}
.c-lightbox__arrow--next::before {
  transform: rotate(-45deg);
  margin-right: 6px;
}
.c-lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #FFFFFF;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 992px) {
  .c-lightbox__close {
    top: 12px;
    right: 16px;
  }
  .c-lightbox__arrow {
    width: 44px;
    height: 44px;
  }
  .c-lightbox__arrow--prev {
    left: 8px;
  }
  .c-lightbox__arrow--next {
    right: 8px;
  }
}

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

/*========================================================
フォーム共通（お問い合わせ / 採用エントリー）
========================================================*/
.c-form {
  width: 100%;
  max-width: min(1128px, var(--container-limit, 1128px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .c-form {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.c-form__lead {
  margin-bottom: 80px;
  font-size: 16px;
  line-height: 2;
  color: #545454;
}
.c-form {
  /* リード冒頭の一文のみ20px */
}
.c-form__lead-main {
  font-size: 20px;
}
.c-form {
  /* エントリー：リードのみ幅1548px（フォーム枠より広く） */
}
.c-form__lead--wide {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .c-form__lead--wide {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.c-form__row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid #D1D1D1;
}
.c-form__row:first-of-type {
  border-top: 1px solid #D1D1D1;
}
.c-form__label {
  padding-top: 10px;
  font-size: 18px;
  font-weight: 500;
  color: #4A4947;
}
.c-form__req, .c-form__opt {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 400;
  color: #FFFFFF;
  border-radius: 3px;
  vertical-align: 2px;
}
.c-form__req {
  background: #B10000;
}
.c-form__opt {
  background: #707070;
}
.c-form__field input[type=text],
.c-form__field input[type=email],
.c-form__field input[type=tel],
.c-form__field input[type=date],
.c-form__field input[type=number],
.c-form__field input[type=file],
.c-form__field select,
.c-form__field textarea {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #FFFFFF;
}
.c-form__field textarea {
  min-height: 140px;
  resize: vertical;
}
.c-form__field {
  /* 採用エントリー：希望勤務地など、タブから引き継いだ固定値の読み取り専用表示 */
}
.c-form__field input[readonly] {
  background: #D9D9D9;
  color: #4A4947;
  cursor: default;
}
.c-form__note {
  margin-top: 8px;
  font-size: 13px;
  color: #707070;
}
.c-form__note--top {
  margin-top: 0;
  margin-bottom: 12px;
}
.c-form {
  /* 郵便番号＋住所検索ボタン */
}
.c-form__zip {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.c-form__zip-input {
  flex: 0 1 240px;
}
.c-form__zip-btn {
  flex: 0 0 auto;
  padding: 0 22px;
  border: none;
  border-radius: 4px;
  background: #383838;
  color: #FFFFFF;
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.c-form__zip-btn:hover {
  opacity: 0.85;
}
.c-form {
  /* 住所（2段） */
}
.c-form__addr + .c-form__addr {
  margin-top: 12px;
}
.c-form {
  /* 年齢 */
}
.c-form__age {
  display: flex;
  align-items: center;
  gap: 8px;
}
.c-form__age-input {
  width: 120px;
}
.c-form__age-unit {
  font-size: 15px;
  color: #4A4947;
}
.c-form {
  /* 添付ファイル（ドロップエリア） */
}
.c-form__drop {
  position: relative;
}
.c-form__drop input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.c-form__drop-label {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 64px;
  padding: 12px 60px 12px 20px;
  border-radius: 4px;
  background: #707070;
  color: #FFFFFF;
  font-size: 15px;
  text-align: center;
}
.c-form__drop-count {
  position: absolute;
  right: 16px;
  bottom: 8px;
  font-size: 13px;
}
.c-form {
  /* 添付ファイル（複数）：Drag and Drop Multiple File Upload プラグインの出力をデザインに合わせる
     グレーのボックス全体がドロップ先・クリックでファイル選択。右下に添付数（0/10）
     並び順：ボックス → 注記（function.jsでボックスの後ろに移動）→ 添付したファイルの一覧
     （一覧はプラグインがボックスの直後に差し込むため、orderで注記を一覧より前に出す） */
}
.c-form .codedropz-upload-wrapper {
  display: flex;
  flex-direction: column;
}
.c-form .codedropz-upload-handler {
  order: -2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 144px;
  margin-bottom: 0;
  border: none;
  border-radius: 10px;
  background: #707070;
  color: #FFFFFF;
  transition: opacity 0.2s ease;
}
.c-form .codedropz-dragover {
  opacity: 0.8;
}
.c-form .codedropz-upload-container {
  padding: 20px 100px;
}
.c-form .codedropz-upload-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  -moz-column-gap: 1em;
       column-gap: 1em;
  font-weight: 500;
  color: #FFFFFF;
}
.c-form .codedropz-upload-inner h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #FFFFFF;
}
.c-form .codedropz-upload-inner > span {
  font-size: 15px;
}
.c-form .codedropz-upload-inner .codedropz-btn-wrap a.cd-upload-btn {
  font-size: 18px;
  line-height: 1.5;
  color: #FFFFFF;
}
.c-form .dnd-upload-counter {
  right: 51px;
  bottom: 19px;
  font-size: 15px;
  line-height: 1;
  color: #FFFFFF;
}
.c-form .dnd-upload-status {
  padding: 10px 0 0;
}
.c-form .dnd-upload-status .dnd-upload-details .name {
  color: #4A4947;
  font-size: 14px;
}
.c-form__file-note {
  order: -1;
  margin-top: 4px;
  font-size: 14px;
  color: #707070;
}
.c-form {
  /* カタログを選ぶ */
}
.c-form__catalogs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 32px;
}
.c-form__catalog {
  display: grid;
  grid-template-columns: 30px 150px 1fr;
  align-items: center;
}
.c-form__catalog input[type=checkbox] {
  width: 22px;
  height: 22px;
  margin: 0;
}
.c-form__catalog-img img {
  width: 100%;
  height: auto;
  display: block;
}
.c-form__catalog-body {
  display: flex;
  flex-direction: column;
  margin-bottom: auto;
  margin-top: 20px;
}
.c-form__catalog-ttl {
  font-size: 14px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: dashed 2px #707070;
}
.c-form__catalog-txt {
  font-size: 16px;
  line-height: 1.7;
  color: #545454;
}
.c-form {
  /* 個人情報の取り扱いリンク */
}
.c-form__privacy {
  font-size: 14px;
  color: #545454;
  text-align: center;
}
.c-form__privacy a {
  color: #0068B6;
  text-decoration: underline;
}
.c-form__radios {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  padding-top: 10px;
}
.c-form__radios label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: #4A4947;
}
.c-form__checks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.c-form__checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  background: #FFFFFF;
  font-size: 16px;
}
@media screen and (max-width: 992px) {
  .c-form__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px 0;
  }
  .c-form__label {
    padding-top: 0;
  }
  .c-form__checks {
    grid-template-columns: 1fr;
  }
  .c-form__catalogs {
    grid-template-columns: 1fr;
  }
  .c-form__zip {
    flex-wrap: wrap;
  }
  .c-form__zip-input {
    flex: 1 1 auto;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-form .codedropz-upload-handler {
    min-height: clamp(110px, 8.5714285714vw, 144px);
  }
  .c-form .codedropz-upload-container {
    padding: 20px clamp(40px, 5.9523809524vw, 100px);
  }
  .c-form .dnd-upload-counter {
    right: clamp(20px, 3.0357142857vw, 51px);
    bottom: clamp(12px, 1.130952381vw, 19px);
  }
}
@media screen and (max-width: 768px) {
  .c-form .codedropz-upload-handler {
    min-height: 100px;
    border-radius: 6px;
  }
  .c-form .codedropz-upload-container {
    padding: 16px 20px 28px;
  }
  .c-form .codedropz-upload-inner h3,
  .c-form .codedropz-upload-inner .codedropz-btn-wrap a.cd-upload-btn {
    font-size: 14px;
  }
  .c-form .codedropz-upload-inner > span {
    font-size: 12px;
  }
  .c-form .dnd-upload-counter {
    right: 12px;
    bottom: 10px;
    font-size: 12px;
  }
  .c-form .dnd-upload-status .dnd-upload-details .name {
    font-size: 12px;
  }
  .c-form__file-note {
    font-size: 11px;
  }
}
@media screen and (max-width: 768px) {
  .c-form__lead {
    margin-bottom: 32px;
    font-size: 12px;
  }
  .c-form__lead-main {
    font-size: 14px;
  }
  .c-form__row {
    padding: 14px 0;
  }
  .c-form__label {
    font-size: 12px;
  }
  .c-form__req, .c-form__opt {
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 9px;
  }
  .c-form__field input[type=text],
  .c-form__field input[type=email],
  .c-form__field input[type=tel],
  .c-form__field input[type=date],
  .c-form__field input[type=number],
  .c-form__field input[type=file],
  .c-form__field select,
  .c-form__field textarea {
    padding: 9px 12px;
    border-radius: 3px;
    font-size: 12px;
  }
  .c-form__field textarea {
    min-height: 106px;
  }
  .c-form__note {
    font-size: 11px;
  }
  .c-form {
    /* 郵便番号入力＋住所検索ボタンは折り返さず横並びのまま */
  }
  .c-form__zip {
    flex-wrap: nowrap;
  }
  .c-form__zip-input {
    flex: 1 1 auto;
    min-width: 0;
  }
  .c-form__zip-btn {
    padding: 0 12px;
    font-size: 11px;
    white-space: nowrap;
  }
  .c-form__age-unit {
    font-size: 12px;
  }
  .c-form__drop-label {
    min-height: auto;
    padding: 14px 50px 14px 14px;
    font-size: 12px;
  }
  .c-form__drop-count {
    font-size: 11px;
  }
  .c-form__catalogs {
    gap: 20px;
  }
  .c-form__catalog {
    grid-template-columns: 24px 90px 1fr;
    gap: 0 12px;
  }
  .c-form__catalog input[type=checkbox] {
    width: 18px;
    height: 18px;
  }
  .c-form__catalog-body {
    margin-top: 0;
  }
  .c-form__catalog-ttl {
    margin-bottom: 8px;
    padding-bottom: 8px;
    font-size: 12px;
  }
  .c-form__catalog-txt {
    font-size: 11px;
    line-height: 1.6;
  }
  .c-form__privacy {
    font-size: 12px;
  }
  .c-form__radios {
    gap: 10px 20px;
  }
  .c-form__radios label {
    font-size: 12px;
  }
  .c-form__checks label {
    font-size: 13px;
    padding: 10px;
  }
}

/*========================================================
お問い合わせ専用レイアウト（左右2カラム）
========================================================*/
.c-form--contact {
  /* コンテンツ幅は .l-cont と同じ（container 1500px） */
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .c-form--contact {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.c-form--contact {
  /* 左：お問い合わせの種類／右：その他項目 */
}
.c-form--contact .c-form__cols {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 56px;
  align-items: start;
}
.c-form--contact {
  /* 行：ラベル上・フィールド下の縦並び。罫線なし */
}
.c-form--contact .c-form__row {
  display: block;
  padding: 0 0 32px;
  border: none;
}
.c-form--contact .c-form__row:first-of-type {
  border-top: none;
}
.c-form--contact .c-form__label {
  padding-top: 0;
  margin-bottom: 12px;
}
.c-form--contact {
  /* input 高さ55px */
}
.c-form--contact .c-form__field input[type=text],
.c-form--contact .c-form__field input[type=email],
.c-form--contact .c-form__field input[type=tel],
.c-form--contact .c-form__field input[type=date] {
  height: 55px;
  padding: 0 16px;
}
.c-form--contact {
  /* 幅50%（お名前・電話番号・メールアドレス・郵便番号） */
}
.c-form--contact .c-form__field input.c-form__input--half {
  width: 50%;
}
.c-form--contact .c-form__zip-input {
  flex: 0 0 50%;
}
.c-form--contact {
  /* お問い合わせの種類：縦並び＋丸ラジオ */
}
.c-form--contact .c-form__radios {
  flex-direction: column;
  gap: 28px;
  padding-top: 0;
  margin-top: 30px;
}
.c-form--contact .c-form__radios label {
  gap: 16px;
  font-size: 16px;
  color: #4A4947;
}
.c-form--contact .c-form__radios input[type=radio] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid #b5b5b5;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-form--contact .c-form__radios {
  /* 選択中：青枠＋青ドット（白リング） */
}
.c-form--contact .c-form__radios input[type=radio]:checked {
  background: #313131;
  box-shadow: inset 0 0 0 5px #FFFFFF;
}
.c-form--contact {
  /* カタログを選ぶ：アコーディオン見出し
     閉：背景#707070・文字/アイコン白　開：背景白・文字/アイコン#707070　角丸10pxは常時 */
}
.c-form--contact .c-form__catalog-head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  background: #707070;
  transition: background-color 0.2s ease;
}
.c-form--contact .c-form__catalog-head-ttl {
  font-size: 15px;
  font-weight: 500;
  color: #FFFFFF;
  transition: color 0.2s ease;
}
.c-form--contact .c-form__catalog-head-note {
  font-size: 13px;
  color: #FFFFFF;
  transition: color 0.2s ease;
}
.c-form--contact .c-form__catalog-head-icon {
  position: relative;
  flex: 0 0 auto;
  margin-left: auto;
  width: 22px;
  height: 22px;
  transition: transform 0.2s ease;
}
.c-form--contact .c-form__catalog-head-icon::before, .c-form--contact .c-form__catalog-head-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease;
}
.c-form--contact .c-form__catalog-head-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.c-form--contact {
  /* 開いている時：背景白・文字/アイコン#707070、＋ を45度回転して × に */
}
.c-form--contact .c-form__catalog-head[aria-expanded=true] {
  background: #FFFFFF;
  border-radius: 10px 10px 0 0;
}
.c-form--contact .c-form__catalog-head[aria-expanded=true] .c-form__catalog-head-ttl,
.c-form--contact .c-form__catalog-head[aria-expanded=true] .c-form__catalog-head-note {
  color: #707070;
}
.c-form--contact .c-form__catalog-head[aria-expanded=true] .c-form__catalog-head-icon {
  transform: rotate(45deg);
}
.c-form--contact .c-form__catalog-head[aria-expanded=true] .c-form__catalog-head-icon::before, .c-form--contact .c-form__catalog-head[aria-expanded=true] .c-form__catalog-head-icon::after {
  background: #707070;
}
.c-form--contact {
  /* カタログ選択エリア（既定は非表示・クリックで表示／背景白） */
}
.c-form--contact .c-form__catalogs {
  display: none;
  background: #FFFFFF;
  border-radius: 0 0 10px 10px;
}
.c-form--contact .c-form__catalogwrap.is-open .c-form__catalogs {
  display: grid;
  padding: 32px;
}
@media screen and (max-width: 992px) {
  .c-form--contact .c-form__cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .c-form--contact .c-form__field input.c-form__input--half {
    width: 100%;
  }
  .c-form--contact .c-form__zip-input {
    flex: 1 1 auto;
  }
}
@media screen and (max-width: 768px) {
  .c-form--contact .c-form__row {
    padding: 0 0 20px;
  }
  .c-form--contact .c-form__label {
    margin-bottom: 8px;
  }
  .c-form--contact .c-form__field input[type=text],
  .c-form--contact .c-form__field input[type=email],
  .c-form--contact .c-form__field input[type=tel],
  .c-form--contact .c-form__field input[type=date] {
    height: 34px;
    padding: 0 12px;
  }
  .c-form--contact .c-form__zip-input {
    flex: 1 1 auto;
  }
  .c-form--contact .c-form__radios {
    gap: 16px;
    margin-top: 14px;
  }
  .c-form--contact .c-form__radios label {
    gap: 10px;
    font-size: 12px;
  }
  .c-form--contact .c-form__radios input[type=radio] {
    width: 19px;
    height: 19px;
  }
  .c-form--contact .c-form__radios input[type=radio]:checked {
    box-shadow: inset 0 0 0 3px #FFFFFF;
  }
  .c-form--contact {
    /* タイトル＋開閉アイコンを1行目、注記を2行目に折り返す */
  }
  .c-form--contact .c-form__catalog-head {
    flex-wrap: wrap;
    padding: 14px;
    gap: 6px 10px;
  }
  .c-form--contact .c-form__catalog-head-ttl {
    order: 1;
    font-size: 12px;
  }
  .c-form--contact .c-form__catalog-head-note {
    order: 3;
    flex-basis: 100%;
    font-size: 10px;
  }
  .c-form--contact .c-form__catalog-head-icon {
    order: 2;
    width: 16px;
    height: 16px;
  }
  .c-form--contact .c-form__catalogwrap.is-open .c-form__catalogs {
    padding: 16px;
  }
}

/*========================================================
採用エントリー専用（入力欄・ラジオ・送信ボタンを お問い合わせと統一）
========================================================*/
.c-form--entry {
  /* フォーム枠：幅1320px・白の透過ボックス */
  max-width: 1320px;
  padding: 30px 60px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  margin-bottom: 50px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-form--entry {
    max-width: clamp(0px, 78.5714285714vw, 1320px);
    padding: 30px clamp(24px, 3.5714285714vw, 60px);
  }
}
.c-form--entry {
  /* 行：ラベル上・フィールド下（縦並び・罫線なし） */
}
.c-form--entry .c-form__row {
  display: block;
  padding: 0 0 32px;
  border: none;
}
.c-form--entry .c-form__row:first-of-type {
  border-top: none;
}
.c-form--entry .c-form__label {
  padding-top: 0;
  margin-bottom: 12px;
}
.c-form--entry {
  /* input・select 高さ55px（お問い合わせと統一） */
}
.c-form--entry .c-form__field input[type=text],
.c-form--entry .c-form__field input[type=email],
.c-form--entry .c-form__field input[type=tel],
.c-form--entry .c-form__field input[type=number],
.c-form--entry .c-form__field input[type=date],
.c-form--entry .c-form__field select {
  height: 55px;
  padding: 0 16px;
}
.c-form--entry .c-form__field {
  /* select：デフォルトの矢印を消し、右に下向き三角（約15px） */
}
.c-form--entry .c-form__field select {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10'%3E%3Cpath d='M0 0 L15 0 L7.5 10 Z' fill='%23333333'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 15px 10px;
}
.c-form--entry {
  /* 年齢入力：枠線なし＋小さめ幅（width:100%指定に勝つよう詳細度を上げる） */
}
.c-form--entry .c-form__age,
.c-form--entry .c-form__field input.c-form__age-input {
  border: none;
}
.c-form--entry .c-form__field input.c-form__age-input {
  width: 120px;
}
.c-form--entry {
  /* 幅50%（希望職種〜メールアドレス） */
}
.c-form--entry .c-form__field input.c-form__input--half,
.c-form--entry .c-form__field select.c-form__input--half {
  width: 50%;
}
.c-form--entry {
  /* 添付ファイル：ドロップエリアの高さ140px */
}
.c-form--entry .c-form__drop-label {
  min-height: 140px;
}
.c-form--entry {
  /* ラジオ：丸デザイン（お問い合わせと統一）・横並び */
}
.c-form--entry .c-form__radios {
  gap: 16px 40px;
  padding-top: 4px;
}
.c-form--entry .c-form__radios label {
  gap: 12px;
  font-size: 16px;
  color: #4A4947;
}
.c-form--entry .c-form__radios input[type=radio] {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: 0;
  border: 1px solid #b5b5b5;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.c-form--entry .c-form__radios input[type=radio]:checked {
  background: #313131;
  box-shadow: inset 0 0 0 5px #FFFFFF;
}
@media screen and (max-width: 992px) {
  .c-form--entry {
    padding: 24px;
  }
  .c-form--entry .c-form__field input.c-form__input--half,
  .c-form--entry .c-form__field select.c-form__input--half {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .c-form--entry {
    /* 白透過ボックスはSPで解除し、左右15pxのみ残す */
    padding: 0 15px;
    background: none;
    border-radius: 0;
  }
  .c-form--entry .c-form__row {
    padding: 0 0 16px;
  }
  .c-form--entry .c-form__field input[type=text],
  .c-form--entry .c-form__field input[type=email],
  .c-form--entry .c-form__field input[type=tel],
  .c-form--entry .c-form__field input[type=number],
  .c-form--entry .c-form__field input[type=date],
  .c-form--entry .c-form__field select {
    height: 34px;
    padding: 0 12px;
  }
  .c-form--entry .c-form__field select {
    padding-right: 32px;
    background-position: right 12px center;
    background-size: 10px 7px;
  }
  .c-form--entry .c-form__field input.c-form__age-input {
    width: 90px;
  }
  .c-form--entry .c-form__drop-label {
    min-height: 100px;
  }
  .c-form--entry .c-form__radios {
    gap: 10px 20px;
  }
  .c-form--entry .c-form__radios label {
    gap: 10px;
    font-size: 12px;
  }
  .c-form--entry .c-form__radios input[type=radio] {
    width: 19px;
    height: 19px;
  }
  .c-form--entry .c-form__radios input[type=radio]:checked {
    box-shadow: inset 0 0 0 3px #FFFFFF;
  }
}

/* フォーム用ボタン群（確認・送信・戻る 共通） */
.c-formbtns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 48px;
}

/* お問い合わせ・エントリー 入力・確認・完了画面：ボタン高さ90px・角丸10px・文字22px */
.c-form--contact .c-formbtn,
.c-formbtns--entry .c-formbtn,
.c-formbtns--confirm .c-formbtn,
.c-complete__btn .c-formbtn {
  height: 90px;
  border-radius: 10px;
  font-size: 22px;
}

/* 送信ボタンのみ文字サイズ18px */
.c-form--contact .c-formbtn--submit,
.c-formbtns--entry .c-formbtn--submit,
.c-formbtns--confirm .c-formbtn--submit,
.c-complete__btn .c-formbtn--submit {
  font-size: 18px;
}

.c-formbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  min-width: 320px;
  height: 64px;
  border: none;
  border-radius: 5px;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.c-formbtn--submit {
  background: #B10000;
  color: #FFFFFF;
}
.c-formbtn--back {
  width: 320px;
  min-width: 320px;
  height: 56px;
  font-size: 15px;
  background: #707070;
  color: #FFFFFF;
}
.c-formbtn:hover {
  opacity: 0.85;
}

@media screen and (max-width: 768px) {
  .c-formbtns {
    gap: 12px;
    margin-top: 32px;
  }
  .c-form--contact .c-formbtn,
  .c-formbtns--entry .c-formbtn,
  .c-formbtns--confirm .c-formbtn,
  .c-complete__btn .c-formbtn {
    height: 56px;
    border-radius: 6px;
    font-size: 15px;
  }
  .c-formbtn {
    width: 100%;
    min-width: 0;
    height: 48px;
    font-size: 15px;
  }
  .c-formbtn--back {
    min-width: 0;
    height: 44px;
    font-size: 13px;
  }
  /* エントリー：送信ボタンは全幅ではなく中央寄せの小さめボタン＋下に大きめの余白 */
  .c-formbtns--entry {
    margin-bottom: 96px;
  }
  .c-formbtns--entry .c-formbtn {
    width: auto;
    min-width: 230px;
  }
}
/*========================================================
お問い合わせ確認（ラベル＋グレーボックス）
========================================================*/
.c-confirm__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 16px;
}
.c-confirm__label {
  padding-top: 20px;
  font-size: 16px;
  color: #4A4947;
}
.c-confirm__value {
  min-height: 64px;
  padding: 20px 24px;
  background: #D9D9D9;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.9;
  color: #4A4947;
}
@media screen and (max-width: 992px) {
  .c-confirm__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .c-confirm__label {
    padding-top: 0;
    font-weight: 500;
  }
}
@media screen and (max-width: 768px) {
  .c-confirm__row {
    margin-bottom: 10px;
  }
  .c-confirm__label {
    font-size: 12px;
  }
  .c-confirm__value {
    min-height: 34px;
    padding: 8px 13px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.7;
  }
}

/*========================================================
Contact Form 7 出力の正規化
（wpcf7-form-control-wrap 等のラッパーspanを透過させ、
既存デザインのDOM構造・レイアウトに影響が出ないようにする）
========================================================*/
.c-form {
  /* テキスト系フィールドのラッパーspanを透過 */
}
.c-form__field .wpcf7-form-control-wrap {
  display: block;
}
.c-form {
  /* 郵便番号：ラッパーspanをdisplay:contentsにし、
     .c-form__zip-input の flex:0 0 50% が実際のinputに対して機能するようにする
     （電話番号・メールアドレスと同じ幅になる） */
}
.c-form__zip .wpcf7-form-control-wrap {
  display: contents;
}
.c-form {
  /* 住所：1行目(addr1)と2行目(addr2)の間を10px空ける
     （CF7のラッパーspanで直接の隣接兄弟でなくなるため、data-name属性で指定） */
}
.c-form__field [data-name=addr2] {
  display: block;
  margin-top: 10px;
}
.c-form {
  /* ラジオ・チェックボックスのラッパーは display:contents で完全に透過し、
     input/labelがそのまま元のflex/gridコンテナの直接の子として扱われるようにする */
}
.c-form__radios .wpcf7-form-control-wrap,
.c-form__radios .wpcf7-form-control,
.c-form__radios .wpcf7-list-item, .c-form__catalog .wpcf7-form-control-wrap,
.c-form__catalog .wpcf7-form-control,
.c-form__catalog .wpcf7-list-item {
  display: contents;
}
.c-form {
  /* カタログ選択：list-item-label は空テキストなので非表示（grid列がずれないように） */
}
.c-form__catalog .wpcf7-list-item-label {
  display: none;
}
.c-form {
  /* ラジオのラベルテキストはそのまま表示（既存の label 内テキストと同じ見た目） */
}
.c-form__radios .wpcf7-list-item-label {
  display: inline;
}
.c-form {
  /* CF7バリデーションエラー文言 */
}
.c-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #B10000;
}

/* 送信後のエラー・成功メッセージ（.c-form--entry の幅に依存しないよう .c-form の外に配置。
   CF7本体のスタイル（黄枠等）を確実に上書きするため !important を使用） */
.wpcf7-response-output {
  margin: 24px 0 0;
  padding: 16px 20px;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
}

/* 採用エントリー（Step1/Step2）：フォーム枠（.c-form--entry）と同じ幅・中央寄せに揃える。
   html_class:c-form--msg-1320 を付与したCF7フォームのみに限定（お問い合わせ等には影響しない） */
form.c-form--msg-1320 .wpcf7-response-output {
  max-width: 1320px !important;
  margin: 24px auto 0 !important;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  form.c-form--msg-1320 .wpcf7-response-output {
    max-width: clamp(0px, 78.5714285714vw, 1320px) !important;
  }
}

form.invalid .wpcf7-response-output,
form.unaccepted .wpcf7-response-output,
form.payment-required .wpcf7-response-output,
form.failed .wpcf7-response-output,
form.aborted .wpcf7-response-output,
form.spam .wpcf7-response-output {
  border: 1px solid #B10000 !important;
  color: #B10000 !important;
  background: rgba(255, 0, 0, 0.05);
  padding: 20px;
}

form.sent .wpcf7-response-output {
  border: 1px solid #2e7d32 !important;
  color: #2e7d32 !important;
  background: rgba(46, 125, 50, 0.05);
}

/* お問い合わせの種類・性別・勤務状況ラジオ：CF7出力後も丸ラジオデザインを維持 */
.c-form--contact .c-form__radios .wpcf7-list-item,
.c-form--entry .c-form__radios .wpcf7-list-item {
  display: contents;
}

/* 確認画面：送信・戻るボタンの送信中スピナーは非表示のまま扱う（レイアウトへの影響防止） */
.c-formbtns .wpcf7-spinner {
  display: none;
}

/* 送信完了 */
.c-complete {
  width: 100%;
  max-width: min(948px, var(--container-limit, 948px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .c-complete {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.c-complete {
  padding: 40px 0 20px;
  text-align: center;
}
.c-complete__msg {
  font-size: 18px;
  line-height: 2.2;
  color: #4A4947;
}
.c-complete__sub {
  font-size: 14px;
  color: #545454;
}
.c-complete__btn {
  margin-top: 48px;
}
@media screen and (max-width: 768px) {
  .c-complete {
    /* container mixinのpadding-inline:15pxが、後続の非レスポンシブpadding:40px 0 20pxに
       打ち消されてしまうため、xs側で左右パディングを明示的に再指定 */
    padding: 24px 15px 12px;
  }
  .c-complete__msg {
    font-size: 13px;
    line-height: 1.9;
  }
  .c-complete__sub {
    font-size: 12px;
  }
  .c-complete__btn {
    margin-top: 32px;
  }
}

/*========================================================
会社情報セクション 共通カードナビ（青背景・EN/JA 6枚）
markup: company-cardnav.php
========================================================*/
.c-infonav {
  /* 全ページ共通：max-width 1548px（1500 + 左右pad24）内で幅100% */
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .c-infonav {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.c-infonav {
  margin-top: 120px;
  margin-bottom: 80px;
  /* 背景：青いソーラーパネル写真＋ブルーオーバーレイ */
  background: linear-gradient(rgba(10, 58, 102, 0.55), rgba(10, 58, 102, 0.55)), url(../images/company/infonav-bg.png) center/cover no-repeat;
  padding: 20px;
}
.c-infonav__inner {
  width: 100%;
}
.c-infonav__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding: 80px 150px;
  border: 1px solid #fff;
  border-radius: 10px;
}
.c-infonav__card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  height: 150px;
  padding: 0 28px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(2px);
  color: #FFFFFF;
  transition: background-color 0.2s ease;
}
.c-infonav__card:hover {
  background: rgba(255, 255, 255, 0.26);
}
.c-infonav__card.--current {
  background: rgba(255, 255, 255, 0.28);
  cursor: default;
}
.c-infonav__en {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  opacity: 0.8;
}
.c-infonav__ja {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 1440px) {
  .c-infonav__grid {
    padding: 48px 40px;
  }
  .c-infonav__ja {
    font-size: 24px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-infonav {
    --_infonav-mt: clamp(0px, 7.1428571429vw, 120px);
    --_infonav-gap: clamp(0px, 1.3095238095vw, 22px);
    --_infonav-py: clamp(32px, 4.7619047619vw, 80px);
    --_infonav-px: clamp(32px, 8.9285714286vw, 150px);
    --_infonav-card-h: clamp(96px, 8.9285714286vw, 150px);
    --_infonav-card-px: clamp(18px, 1.6666666667vw, 28px);
    --_infonav-ja-fs: clamp(20px, 1.7857142857vw, 30px);
    margin-top: var(--_infonav-mt);
  }
  .c-infonav__grid {
    gap: var(--_infonav-gap);
    padding: var(--_infonav-py) var(--_infonav-px);
  }
  .c-infonav__card {
    height: var(--_infonav-card-h);
    padding: 0 var(--_infonav-card-px);
  }
  .c-infonav__ja {
    font-size: var(--_infonav-ja-fs);
  }
}
@media screen and (max-width: 992px) {
  .c-infonav {
    margin-top: 80px;
  }
  .c-infonav__inner {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .c-infonav__grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .c-infonav__card {
    height: 84px;
    padding: 0 18px;
  }
  .c-infonav__ja {
    font-size: 16px;
    padding-bottom: 8px;
  }
}
@media screen and (max-width: 768px) {
  .c-infonav {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 40px;
    margin-bottom: 0px;
    padding: 20px 15px;
    /* .l-cont(container mixin)の末尾 padding-bottom:40px を打ち消し、フッター直前のl-fnavに隙間なく接続 */
  }
  .l-cont:has(> .c-infonav) {
    padding-bottom: 0;
  }
  .c-infonav {
    background: linear-gradient(rgba(10, 58, 102, 0.55), rgba(10, 58, 102, 0.55)), url(../images/company/infonav-bg_sp.png) center/cover no-repeat;
  }
  .c-infonav__grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px 10px;
    padding: 12px;
    border-radius: 10px;
  }
  .c-infonav__card {
    height: 150px;
    padding: 0 15px;
    border-radius: 10px;
    text-align: center;
    line-height: 1.5;
  }
  .c-infonav__en {
    font-size: 10px;
  }
  .c-infonav__ja {
    font-size: 20px;
    height: 70px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

body.is-spnav-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/*========================================================
header
========================================================*/
.l-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  pointer-events: none;
  height: 120px;
  background: #F2F2F2;
  transition: height 0.3s ease, background-color 0.3s ease;
  z-index: 11111;
}
.l-header a,
.l-header button {
  pointer-events: auto;
}
.l-header__logo {
  flex-shrink: 0;
  width: 250px;
  height: 200px;
  background: #FFFFFF;
  border-radius: 0px 0px 15px 0px;
  box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.16);
  transition: width 0.3s ease, height 0.3s ease;
}
.l-header__logo a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.l-header__logo-img {
  display: block;
  width: 166px;
  height: auto;
  /* 追従時はheader_fixed_logo.pngに切り替え */
}
.l-header__logo-img--fixed {
  display: none;
}
.l-header__body {
  position: relative;
  flex: 1;
  background: #F2F2F2;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.l-header {
  /* 検索フィールド：検索アイコン直下に表示（left は JS が検索ボタン位置に合わせて設定。追従時も自動追従） */
}
.l-header__searchbox {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 150;
  margin-top: 10px;
  pointer-events: auto;
  display: flex;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.l-header__searchbox.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.l-header__searchfield {
  width: 300px;
  height: 35px;
  padding: 0 14px;
  border: 1px solid #D1D1D1;
  border-right: none;
  border-radius: 4px 0 0 4px;
  background: #FFFFFF;
  font-size: 14px;
  color: #4A4947;
}
.l-header__searchfield:focus {
  outline: none;
}
.l-header {
  /* 検索実行ボタン（右矢印） */
}
.l-header__searchsubmit {
  flex-shrink: 0;
  width: 40px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0 4px 4px 0;
  background: #0068B6;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.l-header__searchsubmit:hover {
  opacity: 0.88;
}
.l-header__searchsubmit svg {
  display: block;
}
.l-header__top {
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  row-gap: 5px;
  -moz-column-gap: 5px;
       column-gap: 5px;
  border-bottom: 2px solid #fff;
  padding-right: 5px;
}
.l-header__action {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 50px;
  font-size: 20px;
  color: #FFFFFF;
  width: 260px;
  justify-content: center;
}
.l-header__action--shop {
  background: #0068B6;
}
.l-header__action--catalog {
  background: #383838;
}
.l-header__action--contact {
  background: #FFFFFF;
  color: #4A4947;
  font-weight: 500;
}
.l-header__action picture {
  display: contents;
}
.l-header__action-icon {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
     object-fit: contain;
}
.l-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 60px;
  padding: 0 28px;
}
.l-header__search, .l-header__menu {
  background: none;
  border: none;
  cursor: pointer;
  color: #4A4947;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 30px;
  border-left: 1px solid #4A4947;
}
.l-header__menu-bars {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 16px;
}
.l-header__menu-bars span {
  display: block;
  height: 2px;
  background: #4A4947;
}
.l-header__menu-txt {
  font-size: 18px;
}
.l-header__menu-txt--short {
  display: none;
}
.l-header__search {
  font-size: 18px;
  padding: 0 0 0 30px;
  border-left: 1px solid #4A4947;
}
.l-header__search img {
  width: 18px;
  height: 18px;
  -o-object-fit: contain;
     object-fit: contain;
}
.l-header {
  /* スクロール時：追従＋デザイン変更（白・1行・コンパクト） */
}
.l-header.is-scrolled {
  position: fixed;
  height: 88px;
  background: #F2F2F2;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.l-header.is-scrolled .l-header__logo {
  width: 160px;
  height: 108px;
}
.l-header.is-scrolled .l-header__logo-img--default {
  display: none;
}
.l-header.is-scrolled .l-header__logo-img--fixed {
  display: block;
  width: 116px;
}
.l-header.is-scrolled {
  /* 上段・下段を1行に統合 */
}
.l-header.is-scrolled .l-header__body {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 88px;
  background: #F2F2F2;
  padding-right: 24px;
}
.l-header.is-scrolled .l-header__nav {
  display: contents;
}
.l-header.is-scrolled {
  /* 並び順：ナビ → 検索 → ボタン → ハンバーガー */
}
.l-header.is-scrolled .l-gnav {
  order: 1;
}
.l-header.is-scrolled .l-gnav a {
  padding: 0 18px;
  font-size: 16px;
}
.l-header.is-scrolled .l-gnav {
  /* 追従時は「会社情報」を非表示 */
}
.l-header.is-scrolled .l-gnav__company {
  display: none;
}
.l-header.is-scrolled {
  /* 追従時：l-gnav__dropdown もすべてのメニューと同じ縦位置に再調整 */
}
.l-header.is-scrolled .l-gnav__dropdown {
  top: 15px;
  padding-top: 60px;
}
.l-header.is-scrolled .l-gnav .l-gnav__dropdown-sub {
  padding: 0;
}
.l-header.is-scrolled .l-header__search {
  order: 2;
  height: 24px;
  padding: 0 18px;
}
.l-header.is-scrolled .l-header__top {
  order: 3;
  height: auto;
  border-bottom: none;
  padding: 0;
  margin: 0 18px;
  gap: 8px;
}
.l-header.is-scrolled .l-header__menu {
  order: 4;
  padding: 0 0 0 18px;
}
.l-header.is-scrolled .l-header__menu .l-header__menu-txt {
  display: none;
}
.l-header.is-scrolled {
  /* アクションボタンをコンパクトに */
}
.l-header.is-scrolled .l-header__action {
  width: auto;
  height: 46px;
  padding: 0 22px;
  font-size: 15px;
  border-radius: 4px;
}

.l-gnav {
  display: flex;
  align-items: center;
}
.l-gnav a {
  font-size: 18px;
  color: #4A4947;
  padding: 0 30px;
  border-left: 1px solid #4A4947;
}

/*========================================================
すべてのメニュー（メガメニュー）
========================================================*/
.l-megamenu {
  position: absolute;
  top: 120%;
  right: 40px;
  left: auto;
  width: 1300px;
  max-width: calc(100vw - 80px);
  padding: 48px 56px;
  background: #FFFFFF;
  border: 1px solid #D1D1D1;
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14);
  pointer-events: auto;
  z-index: 2000;
  /* 既定は非表示。l-header__menu ホバーで表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.l-megamenu__inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
.l-megamenu__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.l-megamenu__col--end {
  align-self: center;
  margin-top: auto;
  padding: 20px;
  background: #f0f0f0;
  border-radius: 10px;
}
.l-megamenu__head {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 500;
  color: #4A4947;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.l-megamenu__head:hover {
  color: #0068B6;
}
.l-megamenu__sub {
  display: block;
  margin: 6px 0 10px;
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
}
.l-megamenu a.l-megamenu__sub:hover {
  color: #0068B6;
  text-decoration: underline;
}
.l-megamenu__list li {
  margin-bottom: 12px;
}
.l-megamenu__list li:last-child {
  margin-bottom: 0;
}
.l-megamenu__list a {
  font-size: 14px;
  line-height: 1.6;
  color: #545454;
}
.l-megamenu__list a:hover {
  color: #0068B6;
  text-decoration: underline;
}

/* ホバー時に表示（JSで #header に is-megaopen を付与） */
#header.is-megaopen .l-megamenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/*========================================================
グローバルナビ：個別ホバーメニュー（すべてのメニューのグルーピングを参考に、
ホバーしたナビ項目の真下に下層ページを表示）
========================================================*/
.l-gnav__item {
  position: relative;
}

.l-gnav__dropdown {
  position: absolute;
  /* すべてのメニュー（l-megamenu）と同じ縦位置に揃える固定値
     （li の高さが小さく top:% ではヘッダー全体基準の位置に揃わないため） */
  top: 25px;
  left: 50%;
  padding-top: 40px;
  min-width: 240px;
  pointer-events: auto;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
}
.l-gnav__dropdown-inner {
  padding: 28px 32px;
  background: #FFFFFF;
  border: 1px solid #D1D1D1;
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14);
}
.l-gnav__dropdown {
  /* サービス一覧：製品一覧／二次加工一覧を1つのカード内で2カラム＋縦線区切りにする
     （カード自体は&-inner1つを共有。--colsはグリッドをそのinnerに適用するだけ） */
}
.l-gnav__dropdown--cols .l-gnav__dropdown-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.l-gnav__dropdown--cols .l-gnav__dropdown-inner .l-gnav__dropdown-group:first-child {
  padding-right: 32px;
}
.l-gnav__dropdown--cols .l-gnav__dropdown-inner .l-gnav__dropdown-group + .l-gnav__dropdown-group {
  padding-left: 32px;
  border-left: 1px solid #D1D1D1;
}

.l-gnav__item:hover .l-gnav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.l-gnav__dropdown-group + .l-gnav__dropdown-group {
  margin-top: 20px;
}

.l-gnav__dropdown--cols .l-gnav__dropdown-group + .l-gnav__dropdown-group {
  margin-top: 0;
}

.l-header .l-gnav .l-gnav__dropdown-sub {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  border-left: none;
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
  white-space: nowrap;
}
.l-header .l-gnav .l-gnav__dropdown-sub:hover {
  color: #0068B6;
  text-decoration: underline;
}

.l-gnav__dropdown-list li {
  margin-bottom: 12px;
}
.l-gnav__dropdown-list li:last-child {
  margin-bottom: 0;
}

.l-header .l-gnav .l-gnav__dropdown-list a {
  display: block;
  padding: 0;
  border-left: none;
  font-size: 14px;
  line-height: 1.6;
  color: #545454;
  white-space: nowrap;
}
.l-header .l-gnav .l-gnav__dropdown-list a:hover {
  color: #0068B6;
  text-decoration: underline;
}

/* 1024px〜1920pxのレスポンシブ対応：PC用ヘッダー（グロナビ＋アクションボタン3種）が
   幅不足でナビ文言が折り返してしまうのを防ぐため、$breakpoint-l 以下で余白・文字サイズを
   段階的に縮小する（$breakpoint-s 以下は既存のSP/タブレット用ハンバーガーメニューに切り替わる）。 */
@media screen and (max-width: 1440px) {
  .l-header__nav {
    padding: 0 8px;
  }
  .l-header__action {
    width: auto;
    padding: 0 16px;
    font-size: 13px;
    gap: 4px;
  }
  .l-header__search, .l-header__menu {
    padding: 0 14px;
  }
  .l-header__menu-txt {
    font-size: 13px;
  }
  .l-gnav a {
    padding: 0 14px;
    font-size: 13px;
  }
  /* スクロール追従時（.is-scrolled）は1行にナビ・検索・ボタン・ハンバーガーを
     すべて詰め込む構成のため、上記の縮小だけでは足りずさらに折り返してしまう。
     この幅帯ではより強めに縮小する。 */
  .l-header.is-scrolled .l-gnav a {
    padding: 0 10px;
    font-size: 12px;
  }
  .l-header.is-scrolled .l-header__search {
    padding: 0 10px;
  }
  .l-header.is-scrolled .l-header__top {
    margin: 0 10px;
    gap: 8px;
  }
  .l-header.is-scrolled .l-header__action {
    padding: 0 12px;
    font-size: 12px;
  }
  .l-header.is-scrolled .l-header__menu {
    padding: 0 0 0 10px;
  }
}
@media screen and (max-width: 1440px) and (max-width: 1080px) {
  .l-header.is-scrolled .l-gnav a {
    padding: 0 7px;
  }
  .l-header.is-scrolled .l-header__search {
    padding: 0 7px;
  }
  .l-header.is-scrolled .l-header__top {
    margin: 0 7px;
    gap: 5px;
  }
  .l-header.is-scrolled .l-header__action {
    padding: 0 9px;
  }
  .l-header.is-scrolled .l-header__menu {
    padding: 0 0 0 7px;
  }
}
@media screen and (max-width: 992px) {
  .l-header {
    height: 100px;
    background: #FFFFFF;
  }
  .l-header__body {
    position: static;
    background: #FFFFFF;
    box-shadow: none;
  }
  .l-header .l-gnav {
    display: none;
  }
  .l-header__logo {
    width: auto;
    height: 64px;
    padding: 12px 18px;
    box-shadow: none;
    border-radius: 0;
  }
  .l-header__logo-img {
    width: 84px;
    height: 40px;
  }
  .l-header__nav {
    height: 64px;
    padding: 0;
  }
  .l-header__search {
    display: none;
  }
  .l-header__menu {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 100px;
    height: 30px;
    justify-content: center;
    gap: 8px;
    padding: 0;
    border-left: none;
    border-radius: 3px;
    background: #383838;
  }
  .l-header__menu-bars {
    width: 10px;
    height: 7px;
  }
  .l-header__menu-bars span {
    height: 1px;
    background: #FFFFFF;
  }
  .l-header__menu-txt {
    color: #FFFFFF;
  }
  .l-header__menu-txt--full {
    display: none;
  }
  .l-header__menu-txt--short {
    display: inline;
    font-size: 12px;
    font-weight: 700;
  }
  .l-header__top {
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    height: 36px;
    display: flex;
    justify-content: center;
    background: #FFFFFF;
    border-top: 1px solid #D1D1D1;
    box-shadow: none;
  }
  .l-header__action {
    flex: none;
    width: auto;
    height: auto;
    padding: 0 10px;
    background: none;
    color: #4A4947;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    border-left: 1px solid #D1D1D1;
  }
  .l-header__action:first-child {
    border-left: none;
  }
  .l-header__action-icon {
    order: 1;
    width: 16px;
    height: 16px;
  }
  .l-header.is-scrolled {
    height: 100px;
    background: #FFFFFF;
  }
  .l-header.is-scrolled .l-header__logo {
    width: auto;
    height: 64px;
  }
  .l-header.is-scrolled .l-header__logo-img--default {
    display: block;
  }
  .l-header.is-scrolled .l-header__logo-img--fixed {
    display: none;
  }
  .l-header.is-scrolled .l-header__body {
    display: block;
    height: 64px;
    background: #FFFFFF;
    padding-right: 0;
  }
  .l-header.is-scrolled .l-header__nav {
    display: block;
  }
  .l-header.is-scrolled .l-header__top {
    order: 0;
    height: 36px;
    margin: 0;
    padding: 0 5px 0 0;
  }
  .l-header.is-scrolled .l-header__action {
    width: auto;
    height: auto;
    padding: 0 10px;
    font-size: 11px;
    border-radius: 0;
  }
  .l-header.is-scrolled .l-header__menu {
    padding: 0;
  }
  .l-header.is-scrolled .l-header__menu .l-header__menu-txt--short {
    display: inline;
  }
  /* SP/タブレット幅では「すべてのメニュー」の代わりにSPメニュー（l-spnav）を使う */
  .l-megamenu {
    display: none;
  }
  #header.is-megaopen .l-spnav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}
@media screen and (max-width: 768px) {
  .l-header__logo-img--default {
    display: none;
  }
  .l-header__logo-img--fixed {
    display: block;
    width: 84px !important;
  }
  .l-header.is-scrolled .l-header__logo-img--default {
    display: none;
  }
  .l-header.is-scrolled .l-header__logo-img--fixed {
    display: block;
  }
}
/*========================================================
SPメニュー（ハンバーガーで開く全画面オーバーレイ）
========================================================*/
.l-spnav {
  position: fixed;
  inset: 0;
  z-index: 20000;
  overflow-y: auto;
  background: #383838;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  -webkit-overflow-scrolling: touch;
}
.l-spnav__inner {
  padding: 20px;
}
.l-spnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
}
.l-spnav__logo img {
  display: block;
  width: 75px;
  height: auto;
}
.l-spnav__close {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  background: none;
  color: #FFFFFF;
  font-size: 13px;
  cursor: pointer;
}
.l-spnav__close-icon {
  font-size: 18px;
  line-height: 1;
}
.l-spnav__search {
  position: relative;
  margin-bottom: 20px;
}
.l-spnav__searchfield {
  width: 100%;
  height: 46px;
  padding: 0 54px 0 20px;
  border: none;
  border-radius: 23px;
  background: #FFFFFF;
  color: #4A4947;
  font-size: 12px;
}
.l-spnav__searchfield:focus {
  outline: none;
}
.l-spnav__searchsubmit {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #383838;
  cursor: pointer;
}
.l-spnav__list {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  margin-bottom: 28px;
}
.l-spnav__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.l-spnav__item > a {
  display: flex;
  align-items: center;
  height: 55px;
  padding: 0 4px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
}
.l-spnav__acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 55px;
  padding: 0 4px;
  border: none;
  background: none;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.l-spnav__acc-icon {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 6px;
}
.l-spnav__acc-icon::before, .l-spnav__acc-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #FFFFFF;
  transform: translate(-50%, -50%);
}
.l-spnav__acc-icon::before {
  width: 12px;
  height: 2px;
}
.l-spnav__acc-icon::after {
  width: 2px;
  height: 12px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.l-spnav__item.is-open .l-spnav__acc-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.l-spnav__sub {
  max-height: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  transition: max-height 0.3s ease;
}
.l-spnav__sub li {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.l-spnav__sub li:first-child {
  border-top: none;
}
.l-spnav__sub a {
  display: block;
  padding: 14px 16px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}
.l-spnav__item.is-open .l-spnav__sub {
  max-height: 600px;
  margin-bottom: 8px;
}
.l-spnav__banners {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.l-spnav__banner a {
  position: relative;
  display: block;
  aspect-ratio: 16/7;
  overflow: hidden;
  border-radius: 10px;
  color: #FFFFFF;
}
.l-spnav__banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.l-spnav__banner a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0.65) 100%);
}
.l-spnav__banner-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
}
.l-spnav__banner-ttl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  font-weight: 500;
}
.l-spnav__banner-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
}
.l-spnav__banner-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.l-spnav__banner-desc {
  font-size: 12px;
  line-height: 1.6;
}
.l-spnav__policy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: normal;
  justify-items: start;
  gap: 16px 20px;
  padding: 20px 24px;
  margin: 0 -20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
}
.l-spnav__policy::before {
  content: "";
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: -2px;
  left: 0;
}
.l-spnav__policy a {
  font-size: 12px;
  color: #FFFFFF;
}
.l-spnav__company {
  padding: 16px 24px;
  margin: 0 -20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
}
.l-spnav__company::before {
  content: "";
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: -2px;
  left: 0;
}
.l-spnav__company-head {
  margin-bottom: 10px;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
}
.l-spnav__address {
  color: rgba(255, 255, 255, 0.8);
  font-size: 10px;
  line-height: 1.8;
  font-style: normal;
}
.l-spnav__copy {
  padding: 16px 24px 0;
  margin: 0 -20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.l-spnav__copy::before {
  content: "";
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: -2px;
  left: 0;
}

/*========================================================
footer
========================================================*/
.l-footer {
  background-color: #F2F2F2;
  background-image: url(../images/common/footer_bg.png);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  /* --- サイトマップ（下地のパンチング柄を見せる） --- */
}
.l-footer__map {
  background: transparent;
  padding: 80px 0 64px;
}
.l-footer__map-inner {
  width: 100%;
  max-width: min(1448px, var(--container-limit, 1448px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .l-footer__map-inner {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.l-footer__map-inner {
  width: min(76.0105%, 1448px);
}
.l-footer__cols {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1.3fr 1fr 1fr 220px;
  gap: 45px 18px;
}
.l-footer__col--btns {
  grid-column: 6;
  grid-row: 1/span 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}
.l-footer__head {
  margin-bottom: 18px;
  font-size: 16px;
  font-weight: 500;
  color: #4A4947;
}
.l-footer__head a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
@media screen and (max-width: 768px) {
  .l-footer__head a {
    text-decoration: none;
  }
}
.l-footer__head a:hover {
  color: #0068B6;
}
.l-footer__acc-toggle {
  display: none;
}
.l-footer__col ul li {
  margin-bottom: 12px;
}
.l-footer__col ul li a {
  font-size: 16px;
  color: #545454;
}
.l-footer__col ul li a:hover {
  color: #0068B6;
}
.l-footer {
  /* フッターボタン（角丸＋影） */
}
.l-footer__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s ease;
}
.l-footer__btn--contact {
  background: #FFFFFF;
  color: #4A4947;
}
.l-footer__btn--catalog {
  background: #383838;
  color: #FFFFFF;
}
.l-footer__btn--shop {
  background: #0068B6;
  color: #FFFFFF;
}
.l-footer__btn:hover {
  opacity: 0.85;
}
.l-footer {
  /* --- ポリシー横並び（白帯・全幅・中央寄せ） --- */
}
.l-footer__policy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px clamp(40px, 5vw, 80px);
  padding: 20px 24px;
  border-top: 1px solid #D1D1D1;
  border-bottom: 1px solid #D1D1D1;
}
.l-footer__policy a {
  font-size: 16px;
  color: #545454;
}
.l-footer__policy a:hover {
  color: #0068B6;
}
.l-footer {
  /* --- 会社情報・ロゴ（下地のパンチング柄を見せる） --- */
}
.l-footer__company {
  background: transparent;
  padding: 48px 0;
}
.l-footer__company-inner {
  width: 100%;
  max-width: min(1448px, var(--container-limit, 1448px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .l-footer__company-inner {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.l-footer__company-inner {
  width: min(76.0105%, 1448px);
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.l-footer__logo img {
  width: 180px;
  height: auto;
}
.l-footer__info {
  flex: 1;
  min-width: 280px;
}
.l-footer__name {
  margin-bottom: 12px;
}
.l-footer__name img {
  display: block;
  width: auto;
  max-width: 260px;
  height: auto;
}
.l-footer__address {
  font-size: 16px;
  line-height: 1.9;
  color: #545454;
  font-style: normal;
}
.l-footer {
  /* 認証バッジ（縦積み・右寄せ） */
}
.l-footer__cert {
  margin-left: auto;
}
.l-footer__cert-tdb {
  width: 230px;
  height: auto;
}
.l-footer__cert-tdb__img {
  background: #fff;
  display: block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.l-footer__cert-tdb span {
  display: block;
  font-size: 13px;
  margin-top: 8px;
}
.l-footer {
  /* コピーライト */
}
.l-footer__copy {
  text-align: center;
  padding: 16px;
  font-size: 12px;
  color: #545454;
  letter-spacing: 0.06em;
  border-top: 1px solid #D1D1D1;
}
.l-footer {
  /* 1440px以下：ボタン列(--btns)は右端の横並びを維持したまま、
     列幅・余白・文字サイズを縮小して収める。 */
}
@media screen and (max-width: 1440px) {
  .l-footer__cols {
    grid-template-columns: 1fr 1.2fr 1.2fr 1fr 1fr 170px;
    gap: 32px 14px;
  }
  .l-footer__col--btns {
    gap: 10px;
  }
  .l-footer__head {
    margin-bottom: 14px;
    font-size: 15px;
  }
  .l-footer__col ul li {
    margin-bottom: 9px;
  }
  .l-footer__col ul li a {
    font-size: 14px;
  }
  .l-footer__btn {
    height: 42px;
    font-size: 13px;
  }
}
@media screen and (max-width: 992px) {
  .l-footer__cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .l-footer__cert {
    margin-left: 0;
    align-items: flex-start;
  }
}
@media screen and (max-width: 768px) {
  .l-footer {
    background-image: url(../images/common/footer_bg_sp.png);
    background-size: contain;
    /* 上の$breakpoint-l（1440px以下）でノートPC幅向けに縮めた文字・余白がSPまで漏れて小さくなっていたため、
       SPは従来どおりの値に戻す（この後のSP専用の指定が優先） */
  }
  .l-footer__head {
    font-size: 16px;
  }
  .l-footer__col ul li {
    margin-bottom: 12px;
  }
  .l-footer__col ul li a {
    font-size: 16px;
  }
  .l-footer__btn {
    height: 48px;
    font-size: 15px;
  }
  .l-footer__map {
    padding: 8px 0 0;
  }
  .l-footer__map-inner {
    width: 100%;
  }
  .l-footer__cols {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .l-footer__col {
    padding: 16px 24px;
    border-bottom: 1px solid #D1D1D1;
  }
  .l-footer__col--btns {
    order: 99;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    padding: 20px 24px;
    border-bottom: none;
  }
  .l-footer__col[aria-hidden=true] {
    display: none;
  }
  .l-footer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
  }
  .l-footer__col--acc .l-footer__head a {
    font-size: 15px;
  }
  .l-footer__col--acc ul {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .l-footer__col:not(.l-footer__col--acc) ul {
    display: none;
  }
  .l-footer__col--acc.is-open ul {
    max-height: 400px;
    margin-top: 14px;
  }
  .l-footer__acc-toggle {
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid #D1D1D1;
    border-radius: 6px;
    background: none;
    cursor: pointer;
  }
  .l-footer__acc-toggle::before, .l-footer__acc-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: #4A4947;
    transform: translate(-50%, -50%);
  }
  .l-footer__acc-toggle::before {
    width: 12px;
    height: 2px;
  }
  .l-footer__acc-toggle::after {
    width: 2px;
    height: 12px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .l-footer__col--acc.is-open .l-footer__acc-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
  }
  .l-footer__btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }
  .l-footer__btn--shop {
    flex: 1 1 100%;
  }
  .l-footer__policy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: normal;
    justify-items: start;
    gap: 16px 20px;
    padding: 20px 24px;
  }
  .l-footer__policy a {
    font-size: 12px;
  }
  .l-footer__company-inner {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    -moz-column-gap: 20px;
         column-gap: 20px;
    row-gap: 12px;
    align-items: stretch;
  }
  .l-footer__logo {
    grid-column: 1;
    grid-row: 1;
  }
  .l-footer__logo img {
    width: 127px;
  }
  .l-footer__info {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
  }
  .l-footer__name {
    display: none;
  }
  .l-footer__address {
    font-size: 10px;
  }
  .l-footer__cert {
    grid-column: 2;
    grid-row: 1/span 2;
    padding-left: 20px;
    border-left: 1px solid #D1D1D1;
  }
  .l-footer__cert-tdb {
    width: 100%;
  }
  .l-footer__copy {
    font-size: 10px;
  }
}

/*========================================================
ページリンク（共通・フッター上）
========================================================*/
.l-fnav {
  margin-top: 140px;
}
.p-top + .l-fnav {
  margin-top: 0;
}
.l-main:not(.--page) + .l-fnav {
  margin-top: 0;
}
.l-main.--sol-design + .l-fnav, .l-main.--sol-func + .l-fnav {
  margin-top: 0;
}
.l-main.--recruit + .l-fnav {
  margin-top: 0;
}
.l-main.--stock + .l-fnav {
  margin-top: 0;
}
.l-fnav__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 20px;
  background: #707070;
}
.l-fnav__item a {
  position: relative;
  display: block;
  aspect-ratio: 62/33;
  overflow: hidden;
  border-radius: 12px;
  color: #FFFFFF;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
}
.l-fnav__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
.l-fnav__item a:hover .l-fnav__img {
  transform: scale(1.05);
}
.l-fnav__item a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.l-fnav__body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 0 8%;
}
@media screen and (max-width: 768px) {
  .l-fnav__body {
    gap: 8px;
  }
}
.l-fnav__ttl {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: -moz-fit-content;
  width: fit-content;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.85);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@media screen and (max-width: 768px) {
  .l-fnav__ttl {
    gap: 10px;
  }
}
.l-fnav__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
@media screen and (max-width: 768px) {
  .l-fnav__icon {
    width: 25px;
    height: 25px;
  }
}
.l-fnav__icon svg,
.l-fnav__icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.l-fnav__desc {
  font-size: 15px;
  line-height: 1.7;
  max-width: 90%;
}
@media screen and (max-width: 768px) {
  .l-fnav__desc {
    font-size: 12px;
  }
}
@media screen and (max-width: 992px) {
  .l-fnav__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .l-fnav__item a {
    aspect-ratio: 16/7;
  }
  .l-fnav__ttl {
    font-size: 23px;
  }
}
@media screen and (max-width: 768px) {
  .l-fnav {
    margin-top: 0px;
  }
  .l-fnav__ttl {
    font-size: 19px;
  }
}

/*======== メインビジュアル ========*/
.p-mv {
  position: relative;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
}
.p-mv__slider, .p-mv__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.p-mv__slide {
  opacity: 0;
  z-index: 0;
  transition: opacity 2s ease;
}
.p-mv__slide.is-active {
  opacity: 1;
  z-index: 1;
}
.p-mv__slide.is-active .p-mv__img {
  animation: mv-img-zoom 5s linear forwards;
}
.p-mv__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
  transform-origin: center;
  transform: scale(1.08);
}
.p-mv__video {
  transform: none;
  background: #000;
}
.p-mv__slide.is-active .p-mv__video {
  animation: none;
}
.p-mv__blur-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 117px;
  z-index: 1;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}
.p-mv__copy {
  position: absolute;
  left: 7%;
  bottom: 18%;
  z-index: 2;
  color: #FFFFFF;
}
.p-mv__title {
  font-size: 50px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.04em;
  margin-bottom: 36px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}
@media screen and (max-width: 1440px) {
  .p-mv__title {
    font-size: 38px;
  }
}
.p-mv .c-btn--mv {
  position: absolute;
  right: 7%;
  bottom: calc(18% + 8px);
  z-index: 11;
}
.p-mv__thumbs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 50px;
  color: #FFFFFF;
  z-index: 111;
  border-top: 1px solid #FFFFFF;
}
.p-mv__thumbs-label {
  width: 230px;
  flex-shrink: 0;
  font-size: 20px;
  height: 117px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-mv__thumbs-ttl {
  height: 117px;
  display: flex;
  align-items: center;
  margin-left: 40px;
  padding-left: 40px;
  border-left: 1px solid #FFFFFF;
  font-weight: 500;
  font-size: 25px;
}
.p-mv__thumbs-arrow {
  display: none;
  flex-shrink: 0;
  background: none;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  padding: 8px;
}
.p-mv__thumbs-arrow svg {
  display: block;
}
.p-mv__thumbs-count {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  letter-spacing: 0.04em;
}
.p-mv__thumbs-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.6);
}
.p-mv__thumbs-badge {
  display: none;
  margin-left: 24px;
  height: 75px;
  width: auto;
}
.p-mv__thumbs-badge.is-visible {
  display: inline-block;
}
.p-mv__nums {
  display: flex;
  gap: 70px;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 15px;
  letter-spacing: 0.05em;
  margin-left: auto;
  margin-right: 50px;
  z-index: 111;
  position: relative;
}
.p-mv__nums li {
  opacity: 0.55;
  cursor: pointer;
  color: #fff;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  position: relative;
}
.p-mv__nums li.is-current {
  opacity: 1;
}
.p-mv__nums li.is-current::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(#fff var(--mv-progress, 0deg), transparent 0deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: mv-ring-progress 5s linear forwards;
}
.p-mv {
  /* 1024px〜1920pxのレスポンシブ対応：帯の幅が狭くなるとタイトル文言（例：
     「松陽産業　製品一覧」「高速道路防音壁」）が折り返して番号リングと重なるため、
     ラベル幅・余白を縮小したうえで1行省略表示にする。
     $breakpoint-xs（768px）以下は既存のSP専用スタイルで別途1行省略済みのため対象外。 */
}
@media screen and (max-width: 1440px) {
  .p-mv__thumbs {
    padding: 0 24px;
  }
  .p-mv__thumbs-label {
    width: 190px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .p-mv__thumbs-ttl {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 24px;
    padding-left: 24px;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .p-mv__nums {
    gap: 24px;
    margin-right: 24px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-mv {
    --_mv-title-fs: clamp(20px, 2.9761904762vw, 50px);
    --_mv-title-mb: clamp(0px, 2.1428571429vw, 36px);
    --_mv-band-h: clamp(60px, 6.9642857143vw, 117px);
    --_mv-band-px: clamp(0px, 2.9761904762vw, 50px);
    --_mv-label-w: clamp(0px, 13.6904761905vw, 230px);
    --_mv-label-fs: clamp(12px, 1.1904761905vw, 20px);
    --_mv-ttl-space: clamp(0px, 2.380952381vw, 40px);
    --_mv-ttl-fs: clamp(13px, 1.4880952381vw, 25px);
    --_mv-badge-h: clamp(0px, 4.4642857143vw, 75px);
    --_mv-badge-ml: clamp(0px, 1.4285714286vw, 24px);
    --_mv-nums-gap: clamp(0px, 4.1666666667vw, 70px);
    --_mv-nums-mr: clamp(0px, 2.9761904762vw, 50px);
    --_mv-num-size: clamp(30px, 2.7380952381vw, 46px);
    --_mv-num-fs: clamp(13px, 1.4880952381vw, 25px);
  }
  .p-mv__title {
    font-size: var(--_mv-title-fs);
    margin-bottom: var(--_mv-title-mb);
  }
  .p-mv__blur-overlay {
    height: var(--_mv-band-h);
  }
  .p-mv__thumbs {
    padding: 0 var(--_mv-band-px);
  }
  .p-mv__thumbs-label {
    width: var(--_mv-label-w);
    height: var(--_mv-band-h);
    font-size: var(--_mv-label-fs);
  }
  .p-mv__thumbs-ttl {
    height: var(--_mv-band-h);
    margin-left: var(--_mv-ttl-space);
    padding-left: var(--_mv-ttl-space);
    font-size: var(--_mv-ttl-fs);
  }
  .p-mv__thumbs-badge {
    height: var(--_mv-badge-h);
    margin-left: var(--_mv-badge-ml);
  }
  .p-mv__nums {
    gap: var(--_mv-nums-gap);
    margin-right: var(--_mv-nums-mr);
  }
  .p-mv__nums li {
    width: var(--_mv-num-size);
    height: var(--_mv-num-size);
    font-size: var(--_mv-num-fs);
  }
}
@media screen and (max-width: 992px) {
  .p-mv {
    min-height: 520px;
  }
  .p-mv__title {
    font-size: 30px;
  }
  .p-mv .c-btn--mv {
    position: static;
    margin-top: 8px;
  }
  .p-mv__copy {
    bottom: 22%;
  }
}
@media screen and (max-width: 768px) {
  .p-mv__thumbs-label span {
    display: block;
    margin-bottom: 4px;
  }
  .p-mv__nums {
    gap: 14px;
  }
  .p-mv__title {
    font-size: 20px;
    margin-bottom: 0;
  }
  .p-mv__copy {
    left: 20px;
    right: auto;
    bottom: 95px;
    max-width: calc(100% - 20px - 44px - 20px - 15px);
  }
  .p-mv .c-btn--mv {
    position: absolute;
    left: auto;
    right: 20px;
    bottom: 95px;
    width: 44px;
    height: 44px;
    min-width: 0;
    margin-top: 0;
    padding: 0;
    font-size: 0;
    border: none;
    background-color: transparent;
    background-image: url(../../assets/images/common/FV_arrow.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .p-mv .c-btn--mv::after {
    display: none;
  }
  .p-mv .c-btn--mv:hover {
    background-image: url(../../assets/images/common/FV_arrow.png);
  }
  .p-mv__thumbs {
    height: 75px;
    padding: 0 20px;
  }
  .p-mv__blur-overlay {
    height: 75px;
  }
  .p-mv__thumbs-label, .p-mv__thumbs-badge, .p-mv__nums {
    display: none;
  }
  .p-mv__thumbs-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .p-mv__thumbs-arrow svg {
    width: 30px;
    height: 30px;
  }
  .p-mv__thumbs-arrow--next {
    margin-left: auto;
  }
  .p-mv__thumbs-count {
    display: flex;
    margin-left: 12px;
    font-size: 18px;
  }
  .p-mv__thumbs-ttl {
    flex: 1;
    min-width: 0;
    height: auto;
    margin-left: 16px;
    padding-left: 16px;
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@property --mv-progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes mv-ring-progress {
  from {
    --mv-progress: 0deg;
  }
  to {
    --mv-progress: 360deg;
  }
}
@keyframes mv-img-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}
/*======== 紹介＋3サービス（高さ610px×3） ========*/
.p-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.p-intro__lead {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 40px;
  padding: 80px 6%;
  background: url(../../assets/images/top/bg_01.png) no-repeat;
  background-size: contain;
  background-position: left center;
}
.p-intro__vertical {
  writing-mode: vertical-rl;
  align-self: center;
  font-size: 40px;
  line-height: 1.25;
  letter-spacing: 0.12em;
  font-weight: bold;
  margin-bottom: 200px;
}
.p-intro__vertical span {
  position: relative;
  font-size: 60px;
  line-height: 1;
  color: #0068B6;
  margin: 20px 0;
  letter-spacing: 20px;
  /* 「機能」「未来」の右に添える読み仮名（きのう／あす）を疑似要素で表示 */
}
.p-intro__vertical span::after {
  content: attr(data-ruby);
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: inherit;
  letter-spacing: 10px;
  white-space: nowrap;
}
.p-intro__vertical strong {
  font-size: 57px;
  color: #0068B6;
  margin-top: 300px;
}
.p-intro__text {
  max-width: 460px;
  margin: 0 auto;
}
.p-intro__text p:not(.p-intro__catch) {
  font-size: 24px;
  line-height: 2.1;
  color: #545454;
}
.p-intro__cards {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-intro {
    --_intro-lead-gap: clamp(0px, 2.380952381vw, 40px);
    --_intro-lead-py: clamp(0px, 4.7619047619vw, 80px);
    --_intro-v-fs: clamp(20px, 2.380952381vw, 40px);
    --_intro-v-mb: clamp(0px, 11.9047619048vw, 200px);
    --_intro-em-fs: clamp(26px, 3.5714285714vw, 60px);
    --_intro-em-my: clamp(0px, 1.1904761905vw, 20px);
    --_intro-em-ls: clamp(0px, 1.1904761905vw, 20px);
    --_intro-ruby-fs: clamp(10px, 1.1904761905vw, 20px);
    --_intro-ruby-ls: clamp(0px, 0.5952380952vw, 10px);
    --_intro-strong-fs: clamp(24px, 3.3928571429vw, 57px);
    --_intro-strong-mt: clamp(0px, 17.8571428571vw, 300px);
    --_intro-text-w: clamp(0px, 27.380952381vw, 460px);
    --_intro-text-fs: clamp(13px, 1.4285714286vw, 24px);
  }
  .p-intro__lead {
    gap: var(--_intro-lead-gap);
    padding: var(--_intro-lead-py) 6%;
  }
  .p-intro__vertical {
    font-size: var(--_intro-v-fs);
    margin-bottom: var(--_intro-v-mb);
  }
  .p-intro__vertical span {
    font-size: var(--_intro-em-fs);
    margin: var(--_intro-em-my) 0;
    letter-spacing: var(--_intro-em-ls);
  }
  .p-intro__vertical span::after {
    font-size: var(--_intro-ruby-fs);
    letter-spacing: var(--_intro-ruby-ls);
  }
  .p-intro__vertical strong {
    font-size: var(--_intro-strong-fs);
    margin-top: var(--_intro-strong-mt);
  }
  .p-intro__text {
    max-width: var(--_intro-text-w);
  }
  .p-intro__text p:not(.p-intro__catch) {
    font-size: var(--_intro-text-fs);
  }
}
@media screen and (max-width: 992px) {
  .p-intro {
    grid-template-columns: 1fr;
  }
  .p-intro__lead {
    padding: 56px 24px;
  }
  .p-intro__vertical {
    writing-mode: horizontal-tb;
    font-size: 30px;
    text-align: center;
  }
  .p-intro__cards {
    grid-template-rows: none;
  }
}
@media screen and (max-width: 768px) {
  .p-intro__lead {
    flex-direction: row;
    align-items: center;
    padding: 48px 24px;
  }
  .p-intro__vertical {
    writing-mode: vertical-rl;
    flex: 0 0 auto;
    align-self: auto;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.8;
    text-align: left;
    color: #000;
    margin-bottom: 0;
    letter-spacing: 5px;
  }
  .p-intro__vertical span {
    font-size: 20px;
    font-weight: 700;
    color: #0068B6;
    letter-spacing: 5px;
    margin: 5px 0;
  }
  .p-intro__vertical span:after {
    font-size: 12px;
    letter-spacing: 5px;
  }
  .p-intro__vertical strong {
    font-size: 30px;
    font-weight: 700;
    margin-top: 196px;
    color: #0068B6;
  }
  .p-intro__text {
    min-width: 0;
    max-width: none;
    margin: 0;
    font-size: 12px;
    width: 70%;
  }
  .p-intro__text p:not(.p-intro__catch) {
    font-size: 12px;
    line-height: 1.85;
  }
}

/*======== 共通：1720px幅で右寄せ（納入実績・カタログ） ========*/
.p-recruit__inner, .p-company__inner, .p-catalog__inner, .p-case__inner {
  width: min(90.2887%, 1720px);
  margin-left: auto;
  margin-right: 0;
  padding-bottom: 60px;
  padding-left: clamp(24px, 5.2083vw, 100px);
  position: relative;
}
.p-recruit__inner:before, .p-company__inner:before, .p-catalog__inner:before, .p-case__inner:before {
  content: "";
  width: 100%;
  height: clamp(200px, 9.0402vw + 291.428px, 465px);
  background: transparent linear-gradient(103deg, #D1D1D1 0%, #383838 100%) 0% 0% no-repeat padding-box;
  box-shadow: 5px 3px 10px #707070;
  border-radius: 15px 0 0 15px;
  opacity: 0.7;
  position: absolute;
  bottom: 0;
  left: 0;
}
@media screen and (min-width: 992.02px) and (max-width: 1679.98px) {
  .p-recruit__inner, .p-company__inner, .p-catalog__inner, .p-case__inner {
    --_panel-pb: clamp(0px, 3.5714285714vw, 60px);
    --_panel-h: clamp(0px, 26.3869047619vw, 443.3px);
    padding-bottom: var(--_panel-pb);
  }
  .p-recruit__inner:before, .p-company__inner:before, .p-catalog__inner:before, .p-case__inner:before {
    height: var(--_panel-h);
  }
}
@media screen and (max-width: 768px) {
  .p-recruit__inner, .p-company__inner, .p-catalog__inner, .p-case__inner {
    width: 100%;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
  }
  .p-recruit__inner:before, .p-company__inner:before, .p-catalog__inner:before, .p-case__inner:before {
    height: 200px;
    left: 15px;
  }
}

/*========================================================
背景ドット（事例紹介〜会社情報の範囲だけ表示・パララックス）
- 画面固定の装飾レイヤー。表示ON/OFFと --dot-scroll は function.js が制御。
- z-index:0 でセクション背景より前・positionedコンテンツより背面。
========================================================*/
.p-topdots {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.p-topdots.is-active {
  opacity: 1;
}
.p-topdots::before, .p-topdots::after {
  content: "";
  position: absolute;
  width: 1600px;
  height: 1600px;
  background: url(../images/common/dot_01.png) no-repeat center/contain;
  will-change: transform;
}
.p-topdots::before {
  top: -360px;
  left: -1000px;
  transform: translateY(calc(var(--dot-scroll, 0) * 0.06px));
}
.p-topdots::after {
  bottom: -360px;
  right: -1000px;
  transform: translateY(calc(var(--dot-scroll, 0) * -0.06px));
}
@media (prefers-reduced-motion: reduce) {
  .p-topdots::before, .p-topdots::after {
    transform: none;
  }
}
@media screen and (max-width: 992px) {
  .p-topdots::before, .p-topdots::after {
    width: 900px;
    height: 900px;
  }
  .p-topdots::before {
    top: -250px;
    left: -550px;
  }
  .p-topdots::after {
    bottom: -250px;
    right: -550px;
  }
}

/*======== 事例紹介＋カタログ一覧 共通セクション（あとで背景を入れる） ========*/
.p-casecat {
  background: #F2F2F2;
}

/*======== 事例紹介 ========*/
.p-case {
  padding: 200px 0;
  background: transparent;
}
.p-case__more {
  display: none;
}
.p-case__slider {
  position: relative;
}
.p-case__viewport {
  overflow: hidden;
}
.p-case {
  /* 表示枚数2.7枚（3枚目が一部見える形でスライド可能を示す） */
}
.p-case__list {
  display: flex;
  gap: 32px;
  transition: transform 0.4s ease;
}
.p-case__list > .c-case {
  flex: 0 0 calc((100% - 32px * (2.7 - 1)) / 2.7);
  min-width: 0;
}
.p-case__arrows {
  display: flex;
  gap: 8px;
  margin-top: 28px;
}
.p-case__arrow {
  width: 52px;
  height: 52px;
  border: 2px solid #898989;
  color: #4A4947;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  background: none;
  transition: 0.3s;
}
.p-case__arrow:before {
  content: "";
  width: 15px;
  height: 15px;
  border: solid #898989;
  border-width: 2px 2px 0 0;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: 0.3s;
}
.p-case__arrow:hover {
  border: 2px solid #fff;
  color: #fff;
}
.p-case__arrow:hover:before {
  border: solid #fff;
  border-width: 2px 2px 0 0;
}
.p-case__arrow.--next:before {
  left: 30%;
  transform: rotate(45deg);
}
.p-case__arrow.--prev:before {
  right: 30%;
  transform: rotate(-135deg);
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-case {
    --_case-gap: clamp(0px, 1.9047619048vw, 32px);
    --_case-arrows-gap: clamp(0px, 0.4761904762vw, 8px);
    --_case-arrow: clamp(36px, 3.0952380952vw, 52px);
    --_case-chevron: clamp(10px, 0.8928571429vw, 15px);
    --_case-per: 2.7;
    padding: var(--space-section) 0;
  }
  .p-case__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - var(--_case-gap) * (var(--_case-per) - 1)) / var(--_case-per));
    gap: var(--_case-gap);
  }
  .p-case__arrows {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    gap: var(--_case-arrows-gap);
    margin-top: var(--gap-stack);
  }
  .p-case__arrow {
    width: var(--_case-arrow);
    height: var(--_case-arrow);
  }
  .p-case__arrow:before {
    width: var(--_case-chevron);
    height: var(--_case-chevron);
  }
}
@media screen and (max-width: 992px) {
  .p-case {
    padding: 56px 0;
  }
  .p-case__list {
    gap: 24px;
  }
  .p-case__list > .c-case {
    flex-basis: calc((100% - 16.8px) / 1.7);
  }
}
@media screen and (min-width: 768.02px) and (max-width: 992px) {
  .p-case {
    --_case-per: 1.7;
    --_case-gap: 24px;
  }
}
@media screen and (max-width: 768px) {
  .p-case__inner {
    padding-left: 30px;
    padding-right: 0;
  }
  .p-case__list > .c-case {
    flex-basis: calc((100% - 3.6px) / 1.15);
  }
  .p-case__more {
    display: inline-flex;
    order: 3;
    margin-left: auto;
  }
  .p-case__arrows {
    justify-content: flex-start;
    align-items: center;
    margin-right: 15px;
  }
  .p-case__arrow {
    order: 1;
    width: 30px;
    height: 30px;
    border-color: #FFFFFF;
    color: #FFFFFF;
  }
  .p-case__arrow:before {
    width: 9px;
    height: 9px;
    border-color: #FFFFFF;
  }
  .p-case__arrow.--next {
    order: 2;
  }
}

/*======== カタログ一覧 ========*/
.p-catalog {
  padding: 0 0 200px;
  background: transparent;
}
.p-catalog__banner {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: stretch;
  overflow: hidden;
}
.p-catalog__img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
  position: relative;
}
.p-catalog__img img {
  border-radius: 10px;
}
.p-catalog__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 28px;
  padding: 0 64px 0 90px;
}
.p-catalog__en {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 60px;
  line-height: 1.3;
  letter-spacing: 0.06em;
  color: #fff;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-catalog {
    --_cat-img-h: clamp(0px, 25vw, 420px);
    --_cat-body-pr: clamp(0px, 3.8095238095vw, 64px);
    --_cat-body-pl: clamp(0px, 5.3571428571vw, 90px);
    --_cat-en-fs: clamp(24px, 3.5714285714vw, 60px);
    padding-bottom: var(--space-section);
  }
  .p-catalog__img {
    min-height: var(--_cat-img-h);
  }
  .p-catalog__body {
    display: grid;
    align-content: end;
    justify-items: start;
    gap: var(--gap-stack);
    padding: 0 var(--_cat-body-pr) 0 var(--_cat-body-pl);
  }
  .p-catalog__en {
    font-size: var(--_cat-en-fs);
  }
}
@media screen and (max-width: 768px) {
  .p-catalog {
    padding: 56px 0;
  }
  .p-catalog__inner {
    display: flex;
    flex-direction: column;
  }
  .p-catalog .p-section-head {
    order: 1;
  }
  .p-catalog .p-section-head__desc {
    order: 3;
    position: relative;
    z-index: 1;
    margin-top: 16px;
    font-size: 12px;
    color: #FFFFFF;
    padding: 0 15px;
  }
  .p-catalog__banner {
    display: contents;
  }
  .p-catalog__img {
    order: 2;
    min-height: 220px;
    padding-left: 15px;
  }
  .p-catalog__body {
    display: contents;
  }
  .p-catalog__more {
    order: 4;
    position: relative;
    z-index: 1;
    align-self: flex-end;
    margin-right: 0;
  }
  .p-catalog__en {
    order: 4;
    display: none;
  }
}

/*======== スローガンバナー（高さ750px・背景画像1枚） ========*/
.p-slogan {
  position: relative;
  height: 750px;
  overflow: hidden;
  /* 背景：wao.png を右から左へ常時ゆっくり流す（2枚並べてループ） */
}
.p-slogan__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.p-slogan__bg-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  height: 100%;
  animation: slogan-flow 60s linear infinite;
}
.p-slogan__bg-track img {
  display: block;
  width: auto;
  height: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .p-slogan__bg-track {
    animation: none;
  }
}
.p-slogan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.p-slogan {
  /* 中央のテキスト画像（孔あけで わおっ！ のときめきを。） */
}
.p-slogan__txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(880px, 80%);
  height: auto;
}
@media screen and (max-width: 768px) {
  .p-slogan__txt {
    transform: translate(-50%, -65%);
  }
}
.p-slogan {
  /* お問い合わせはこちら ボタン位置（あしらいは c-btn--line） */
}
.p-slogan__btn {
  position: absolute;
  right: 5%;
  bottom: 10%;
  z-index: 2;
}
.p-slogan__btn::after {
  right: -40px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-slogan {
    --_slogan-h: clamp(300px, 44.6428571429vw, 750px);
    --_slogan-txt-w: clamp(0px, 52.380952381vw, 880px);
    height: var(--_slogan-h);
  }
  .p-slogan__txt {
    width: min(var(--_slogan-txt-w), 71.43vw - 192px);
  }
  .p-slogan__btn {
    --_btn-arrow-r: clamp(20px, 2.380952381vw, 40px);
  }
  .p-slogan__btn::after {
    right: calc(-1 * var(--_btn-arrow-r));
  }
}
@media screen and (max-width: 768px) {
  .p-slogan {
    height: 270px;
  }
  .p-slogan__btn {
    bottom: 12px;
  }
  .p-slogan__btn::after, .p-slogan__btn:hover::after {
    right: -10px;
  }
}

/*======== 会社情報＋採用情報 共通セクション（あとで背景を入れる） ========*/
.p-comprec {
  background: #F2F2F2;
}
@media screen and (max-width: 768px) {
  .p-comprec {
    padding-top: 50px;
  }
}

/*======== 会社情報（子要素 高さ477px） ========*/
.p-company {
  position: relative;
  overflow: hidden;
  padding: 150px 0 100px;
  background: transparent;
}
.p-company__inner {
  position: relative;
  z-index: 1;
}
.p-company .p-section-head--left {
  position: relative;
  z-index: 1;
}
.p-company__lead {
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 2;
  color: #545454;
  margin: 0 0 100px;
}
.p-company__grid {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  width: 89.5062%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.p-company__action {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  margin-top: 36px;
  padding-right: 4%;
}
.p-company {
  /* 背景の装飾文字（Work for Our Wonderful Life）横に無限ループ */
}
.p-company__deco {
  position: relative;
  z-index: 0;
  margin-top: 100px;
  overflow: hidden;
  pointer-events: none;
}
.p-company__deco-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  animation: deco-marquee 60s linear infinite;
}
.p-company__deco-track img {
  display: block;
  height: 228px;
  width: auto;
}
@media screen and (max-width: 1280px) {
  .p-company {
    padding-top: clamp(0px, 29.297vw - 225.586px, 150px);
    padding-bottom: 140px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-company {
    --_company-grid-mt: clamp(0px, 2.380952381vw, 40px);
    --_company-grid-gap: clamp(12px, 1.7857142857vw, 30px);
    --_company-action-mt: clamp(0px, 2.1428571429vw, 36px);
    --_company-deco-h: clamp(0px, 13.5714285714vw, 228px);
  }
  .p-company__lead {
    font-size: var(--fs-lead);
    margin-bottom: var(--space-block);
  }
  .p-company__grid {
    margin-top: var(--_company-grid-mt);
    gap: var(--_company-grid-gap);
  }
  .p-company__action {
    margin-top: var(--_company-action-mt);
  }
  .p-company__deco {
    margin-top: var(--space-block);
  }
  .p-company__deco-track img {
    height: var(--_company-deco-h);
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-company__inner {
    container: company/inline-size;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  @container company (width <= 837.5px) {
    .p-company__grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  @container company (width > 837.5px) {
    .p-company .c-bnr__text br {
      display: none;
    }
  }
}
@media screen and (max-width: 768px) {
  .p-company {
    padding-top: 0;
    padding-bottom: 0;
  }
  .p-company__lead {
    margin-bottom: 16px;
    font-size: 12px;
  }
  .p-company__grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding-left: 15px;
  }
  .p-company__action {
    padding-right: 0;
    margin-right: 0;
  }
  .p-company__deco {
    margin-top: 50px;
  }
  .p-company__deco-track {
    height: 50px;
  }
  .p-company__deco-track img {
    height: auto;
  }
}

@keyframes deco-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/* スローガン背景：右から左へ流す（2枚目が1枚目を引き継ぎシームレスにループ） */
@keyframes slogan-flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
/*======== 採用情報 ========*/
.p-recruit {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  background-color: transparent;
  /* 左側の装飾画像（bg_02：パンチング＋金網） */
}
.p-recruit::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  aspect-ratio: 3840/5426;
  background: url(../images/common/bg_02.png) left bottom/contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
.p-recruit .p-section-head--left {
  position: relative;
  z-index: 1;
}
.p-recruit__lead {
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 2;
  color: #545454;
  margin: 0 0 56px;
}
.p-recruit__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 90px;
}
.p-recruit {
  /* 写真（左・パネルの上にはみ出す） */
}
.p-recruit__img {
  position: relative;
  width: 56%;
  flex-shrink: 0;
  aspect-ratio: 67/35;
  z-index: 2;
}
.p-recruit__img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  border-radius: 10px;
}
.p-recruit {
  /* LET'S JOIN ＋ ボタン（右側・パネル上） */
}
.p-recruit__box-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.p-recruit__en {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 52px;
  line-height: 1.15;
  letter-spacing: 0.06em;
  color: #FFFFFF;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-recruit {
    --_recruit-py: clamp(0px, 5.7142857143vw, 96px);
    --_recruit-lead-mb: clamp(0px, 3.3333333333vw, 56px);
    --_recruit-body-gap: clamp(0px, 5.3571428571vw, 90px);
    --_recruit-en-fs: clamp(26px, 3.0952380952vw, 52px);
    padding: var(--_recruit-py) 0;
  }
  .p-recruit__lead {
    font-size: var(--fs-lead);
    margin-bottom: var(--_recruit-lead-mb);
  }
  .p-recruit__body {
    display: grid;
    grid-template-columns: 56% 1fr;
    align-items: end;
    gap: var(--_recruit-body-gap);
  }
  .p-recruit__img {
    width: 100%;
  }
  .p-recruit__box-inner {
    gap: var(--gap-stack);
  }
  .p-recruit__en {
    font-size: var(--_recruit-en-fs);
  }
}
@media screen and (max-width: 992px) {
  .p-recruit {
    padding: 64px 0;
  }
  .p-recruit__body {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .p-recruit__img {
    width: 100%;
  }
  .p-recruit__box-inner {
    align-items: center;
    padding-bottom: 32px;
  }
  .p-recruit__en {
    text-align: center;
    font-size: 40px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 992px) {
  .p-recruit__body {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768px) {
  .p-recruit__lead {
    margin-bottom: 16px;
    font-size: 12px;
  }
  .p-recruit__body {
    padding-left: 15px;
  }
  .p-recruit__box-inner {
    align-items: flex-start;
    padding-bottom: 0;
  }
  .p-recruit__en {
    text-align: left;
    font-size: 35px;
    color: #E1E1E1;
    white-space: nowrap;
  }
  .p-recruit__en br {
    display: none;
  }
  .p-recruit .c-btn {
    margin-right: 0;
    align-self: flex-end;
  }
}

/*======== お知らせ ========*/
.p-news {
  position: relative;
  padding: 150px 0;
  overflow: hidden;
}
.p-news__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: -1;
}
.p-news__inner {
  width: 100%;
  max-width: min(1528px, var(--container-limit, 1528px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-news__inner {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-news__inner {
  width: min(80.21%, 1528px);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 48px;
  align-items: stretch;
}
.p-news__head {
  align-self: flex-end;
  color: #fff;
}
.p-news__head .p-news__en {
  display: block;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 16px;
  letter-spacing: 0.1em;
}
.p-news__head .p-news__ja {
  font-size: 40px;
  font-weight: 500;
  margin: 6px 0 28px;
  letter-spacing: 0.06em;
}
.p-news__panel {
  background: rgba(0, 0, 0, 0.2);
  padding: 70px;
  backdrop-filter: blur(2px);
  border-radius: 15px;
}
.p-news__list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}
.p-news__list li:last-child {
  border-bottom: none;
}
.p-news__list li a {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 4px;
  color: #FFFFFF;
}
.p-news__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p-news__ttl {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
}
.p-news__date {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.p-news__new {
  flex-shrink: 0;
  background: #000000;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 14px;
  letter-spacing: 0.05em;
}
.p-news__arrow {
  flex-shrink: 0;
  font-size: 18px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-news {
    --_news-py: clamp(0px, 8.9285714286vw, 150px);
    --_news-gap: clamp(0px, 2.8571428571vw, 48px);
    --_news-en-fs: clamp(12px, 0.9523809524vw, 16px);
    --_news-ja-fs: clamp(22px, 2.380952381vw, 40px);
    --_news-ja-mt: clamp(0px, 0.3571428571vw, 6px);
    --_news-ja-mb: clamp(0px, 1.6666666667vw, 28px);
    --_news-panel-p: clamp(0px, 4.1666666667vw, 70px);
    --_news-item-gap: clamp(0px, 1.1904761905vw, 20px);
    --_news-item-py: clamp(0px, 1.4285714286vw, 24px);
    --_news-item-px: clamp(0px, 0.2380952381vw, 4px);
    --_news-body-gap: clamp(0px, 0.4761904762vw, 8px);
    --_news-ttl-fs: clamp(13px, 1.0119047619vw, 17px);
    --_news-date-fs: clamp(11px, 0.7738095238vw, 13px);
    --_news-new-fs: clamp(10px, 0.7142857143vw, 12px);
    --_news-new-py: clamp(0px, 0.2380952381vw, 4px);
    --_news-new-px: clamp(0px, 0.8333333333vw, 14px);
    --_news-arrow-fs: clamp(13px, 1.0714285714vw, 18px);
    padding: var(--_news-py) 0;
  }
  .p-news__inner {
    gap: var(--_news-gap);
  }
  .p-news__head .p-news__en {
    font-size: var(--_news-en-fs);
  }
  .p-news__head .p-news__ja {
    font-size: var(--_news-ja-fs);
    margin: var(--_news-ja-mt) 0 var(--_news-ja-mb);
  }
  .p-news__panel {
    padding: var(--_news-panel-p);
  }
  .p-news__list li a {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    gap: var(--_news-item-gap);
    padding: var(--_news-item-py) var(--_news-item-px);
  }
  .p-news__body {
    gap: var(--_news-body-gap);
  }
  .p-news__ttl {
    font-size: var(--_news-ttl-fs);
  }
  .p-news__date {
    font-size: var(--_news-date-fs);
  }
  .p-news__new {
    font-size: var(--_news-new-fs);
    padding: var(--_news-new-py) var(--_news-new-px);
  }
  .p-news__arrow {
    font-size: var(--_news-arrow-fs);
  }
}
@media screen and (max-width: 992px) {
  .p-news__inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .p-news__head .p-news__ja {
    font-size: 30px;
  }
}
@media screen and (max-width: 768px) {
  .p-news {
    padding: 48px 0;
    background: #FFFFFF;
  }
  .p-news__bg {
    display: none;
  }
  .p-news__inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .p-news__head {
    display: contents;
    color: #4A4947;
  }
  .p-news__head .p-news__en, .p-news__head .p-news__ja {
    order: 1;
  }
  .p-news__head .p-news__ja {
    font-size: 23px;
    margin: 6px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #000;
  }
  .p-news__head .c-btn {
    order: 3;
    align-self: flex-end;
    margin-top: 24px;
    background: none !important;
    border-color: #565658 !important;
    color: #565658 !important;
  }
  .p-news__head .c-btn::after {
    background-image: url(../../assets/images/common/link_arrow_gray.png);
  }
  .p-news__head .c-btn:hover {
    background: none !important;
    opacity: 0.7;
  }
  .p-news__head .c-btn:hover::after {
    background-image: url(../../assets/images/common/link_arrow_gray.png);
  }
  .p-news__panel {
    order: 2;
    padding: 0;
    background: none;
    backdrop-filter: none;
    border-radius: 0;
  }
  .p-news__list li {
    border-bottom: 1px solid #D1D1D1;
  }
  .p-news__list li:last-child {
    border-bottom: 1px solid #D1D1D1;
  }
  .p-news__list li a {
    color: #4A4947;
    padding: 15px 5px;
  }
  .p-news__date {
    color: #707070;
    order: 1;
  }
  .p-news__ttl {
    order: 2;
    font-size: 15px;
  }
  .p-news__arrow {
    color: #4A4947;
  }
}

/* アンカーリンク（#products 等）でジャンプした際、固定ヘッダーに隠れないよう余白を確保 */
:target {
  scroll-margin-top: 150px;
}
@media screen and (max-width: 992px) {
  :target {
    scroll-margin-top: 90px;
  }
}

/*========================================================
下層ページ共通
========================================================*/
.l-main {
  isolation: isolate;
}
.l-main.--page {
  background-color: #E8E8E8;
}
.l-main {
  /* 下層ページ共通の背景装飾ドット（dot_01）
     左上＝上寄り／右下＝下寄りに配置し、スクロール量(--dot-scroll)で僅かに上下ドリフト（パララックス） */
}
.l-main::before, .l-main::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 1600px;
  height: 1600px;
  background: url(../images/common/dot_01.png) no-repeat center/contain;
  pointer-events: none;
  will-change: transform;
}
.l-main::before {
  top: -360px;
  left: -1000px;
  transform: translateY(calc(var(--dot-scroll, 0) * 0.06px));
}
.l-main::after {
  top: auto;
  bottom: -360px;
  right: -1000px;
  transform: translateY(calc(var(--dot-scroll, 0) * -0.06px));
}
@media (prefers-reduced-motion: reduce) {
  .l-main::before, .l-main::after {
    transform: none;
  }
}
@media screen and (max-width: 992px) {
  .l-main::before, .l-main::after {
    width: 900px;
    height: 900px;
  }
  .l-main::before {
    top: -250px;
    left: -550px;
  }
  .l-main::after {
    bottom: -250px;
    right: -550px;
  }
}
@media screen and (max-width: 768px) {
  .l-main {
    margin-top: 100px;
  }
}
.l-main {
  /* ソリューション詳細ページ：背景は共通で#F5F5F5、下端に両端いっぱいまでソリューション系のアクセント画像を配置
     （デザインソリューション系＝solution_bg01／機能ソリューション系＝solution_bg02） */
}
.l-main.--sol-design, .l-main.--sol-func {
  background-color: #F5F5F5;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% auto;
}
.l-main.--sol-design {
  background-image: url(../images/solution/solution_bg01.png);
}
.l-main.--sol-func {
  background-image: url(../images/solution/solution_bg02.png);
}
.l-main {
  /* デザイン/機能ソリューション一覧ページ：背景装飾ドット（::before/::after）は非表示
     （.p-sold__bodyに専用の背景画像を敷くため） */
}
.l-main.--sold-top::before, .l-main.--sold-top::after {
  display: none;
}

/* ページ見出し（KV） */
.l-page-head {
  padding: 350px 0 0;
  margin-bottom: 100px;
}
.l-page-head__inner {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .l-page-head__inner {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.l-page-head__inner {
  position: relative;
  padding-bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
}
.l-page-head {
  /* タイトル下のライン（幅100%・高さ2px に line.svg） */
}
.l-page-head__inner::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: url(../../assets/images/common/line.svg) no-repeat left center/100% 2px;
}
.l-page-head__en {
  display: block;
  margin-bottom: 10px;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: #707070;
  width: 100%;
}
.l-page-head__ja {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #4A4947;
}
.l-page-head {
  /* パンくず（タイトル右・下線の上に配置） */
}
.l-page-head__crumb {
  font-size: 13px;
  color: #545454;
}
.l-page-head__crumb a {
  color: #545454;
}
.l-page-head__crumb a:hover {
  color: #0068B6;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .l-page-head {
    --_phead-space: clamp(0px, 8.9285714286vw, 150px);
    --_phead-mb: clamp(0px, 5.9523809524vw, 100px);
    --_phead-ja-fs: clamp(24px, 2.1428571429vw, 36px);
    padding-top: calc(200px + var(--_phead-space));
    margin-bottom: var(--_phead-mb);
  }
  .l-page-head__ja {
    font-size: var(--_phead-ja-fs);
  }
}
@media screen and (max-width: 992px) {
  .l-page-head {
    padding: 130px 0 0;
  }
  .l-page-head__ja {
    font-size: 28px;
  }
  .l-page-head__crumb {
    position: static;
    right: auto;
    margin-top: 10px;
  }
}
@media screen and (max-width: 768px) {
  .l-page-head {
    padding: 40px 0 0;
    margin-bottom: 32px;
    padding-inline: 15px;
  }
  .l-page-head__inner {
    padding-inline: 0;
  }
  .l-page-head__en {
    margin-bottom: 6px;
    font-size: 12px;
    color: #4A4947;
  }
  .l-page-head__ja {
    font-size: 20px;
  }
  .l-page-head__crumb {
    display: none;
  }
}

/* 下層コンテンツ枠 */
.p-lower {
  padding: 72px 0 300px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-lower {
    padding: clamp(0px, 4.2857142857vw, 72px) 0 clamp(0px, 17.8571428571vw, 300px);
  }
}
@media screen and (max-width: 992px) {
  .p-lower {
    padding: 48px 0 72px;
  }
}
@media screen and (max-width: 768px) {
  .p-lower {
    padding: 40px 0 48px;
  }
}

/* 画像＋テキストの横並び（メッセージ等） */
.c-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}
.c-media__img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-media {
    gap: clamp(24px, 2.8571428571vw, 48px);
  }
}
@media screen and (max-width: 992px) {
  .c-media {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* 定義テーブル（会社概要・募集要項など） */
.c-deftable {
  width: 100%;
  border-top: 1px solid #D1D1D1;
}
.c-deftable th,
.c-deftable td {
  padding: 22px 24px;
  border-bottom: 1px solid #D1D1D1;
  text-align: left;
  font-size: 15px;
  line-height: 1.9;
  vertical-align: top;
}
.c-deftable th {
  width: 26%;
  font-weight: 500;
  color: #4A4947;
  background: #F2F2F2;
}
.c-deftable td {
  color: #545454;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-deftable th,
  .c-deftable td {
    padding: clamp(14px, 1.3095238095vw, 22px) clamp(16px, 1.4285714286vw, 24px);
  }
}
@media screen and (max-width: 992px) {
  .c-deftable th,
  .c-deftable td {
    display: block;
    width: 100%;
    padding: 14px 16px;
  }
  .c-deftable th {
    border-bottom: none;
  }
}
@media screen and (max-width: 768px) {
  .c-deftable th,
  .c-deftable td {
    padding: 14px 16px;
    font-size: 12px;
  }
  .c-deftable th {
    font-weight: 700;
  }
}

/* お知らせ一覧 */
.c-newslist {
  border-top: 1px solid #D1D1D1;
}
.c-newslist__item {
  border-bottom: 1px solid #D1D1D1;
}
.c-newslist__link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 8px;
  transition: background-color 0.2s ease;
}
.c-newslist__link:hover {
  background: #F2F2F2;
}
.c-newslist {
  /* 1行目：日付＋カテゴリ（横並び） */
}
.c-newslist__meta {
  display: flex;
  align-items: center;
  gap: 20px;
}
.c-newslist__date {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 16px;
  color: #707070;
}
.c-newslist {
  /* カテゴリ：白背景・グレー線のピル */
}
.c-newslist__cat {
  padding: 4px 20px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #4A4947;
  background: #FFFFFF;
  border: 1px solid #D1D1D1;
  border-radius: 999px;
}
.c-newslist {
  /* 2行目：タイトル＋New（横並び） */
}
.c-newslist__title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  line-height: 1.6;
  color: #4A4947;
}
.c-newslist__link:hover .c-newslist__title {
  color: #0068B6;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-newslist__link {
    padding: clamp(18px, 1.6666666667vw, 28px) 8px;
  }
}
@media screen and (max-width: 768px) {
  .c-newslist__link {
    gap: 8px;
    padding: 18px 4px;
  }
  .c-newslist__meta {
    gap: 12px;
  }
  .c-newslist__date {
    font-size: 12px;
  }
  .c-newslist__cat {
    padding: 3px 14px;
    font-size: 12px;
    font-weight: 700;
  }
  .c-newslist__title {
    font-size: 15px;
  }
}

/* ページ送り（枠なし・現在ページのみ円枠） */
.c-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 48px;
  margin-bottom: 140px;
}
.c-pager a,
.c-pager span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 18px;
  color: #707070;
  background: none;
  border: none;
  transition: color 0.2s ease;
}
.c-pager__num {
  width: 48px;
  height: 48px;
}
.c-pager {
  /* 現在ページ：細い円枠＋濃色 */
}
.c-pager__num.is-current {
  border: 1px solid #707070;
  border-radius: 50%;
  color: #4A4947;
}
.c-pager {
  /* prev/next・最初へ/最後へ：SVG画像で表示 */
}
.c-pager__arrow img {
  height: 20px;
  width: auto;
}
.c-pager__edge img {
  height: 18px;
  width: auto;
}
.c-pager {
  /* next・最後へは左右反転（SVGは左向き） */
}
.c-pager__arrow--next img, .c-pager__edge--last img {
  transform: scaleX(-1);
}
.c-pager a:hover {
  color: #0068B6;
}
.c-pager a:hover img {
  opacity: 0.6;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-pager {
    gap: clamp(16px, 1.9047619048vw, 32px);
    margin-top: clamp(0px, 2.8571428571vw, 48px);
    margin-bottom: clamp(0px, 8.3333333333vw, 140px);
  }
  .c-pager__num {
    width: clamp(36px, 2.8571428571vw, 48px);
    height: clamp(36px, 2.8571428571vw, 48px);
  }
}
@media screen and (max-width: 768px) {
  .c-pager {
    gap: 12px;
    margin-top: 32px;
    margin-bottom: 48px;
  }
  .c-pager a,
  .c-pager span {
    font-size: 14px;
  }
  .c-pager__num {
    width: 28px;
    height: 28px;
  }
  .c-pager__arrow img {
    height: 16px;
  }
  .c-pager__edge img {
    height: 14px;
  }
}

/* 下層共通 1500px コンテナ */
.l-cont {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .l-cont {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}

/* バナーカード4列グリッド（お役立ち情報・会社情報メニュー等） */
.c-bnr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-bnr-grid {
    gap: clamp(16px, 1.7857142857vw, 30px);
  }
}
@media screen and (max-width: 1440px) {
  .c-bnr-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (max-width: 992px) {
  .c-bnr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .c-bnr-grid {
    grid-template-columns: 1fr;
  }
}
.c-bnr-grid {
  /* お役立ち情報：文章の高さ＋ボックス高さをそろえて下部ボックスの位置を統一 */
}
.c-bnr-grid--info .c-bnr__text {
  min-height: 6em;
}
@media screen and (max-width: 768px) {
  .c-bnr-grid--info .c-bnr__text {
    min-height: 0;
  }
}

/* フィルタタブ（実績一覧・製品一覧等） */
.c-tab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 1px solid #707070;
}
.c-tab__btn {
  min-width: 110px;
  padding: 9px 26px;
  border-radius: 999px;
  border: 1px solid #D1D1D1;
  background: #FFFFFF;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #4A4947;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  text-align: center;
}
.c-tab__btn.is-active, .c-tab__btn:hover {
  background: #383838;
  color: #FFFFFF;
  border-color: #383838;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-tab {
    margin-bottom: clamp(0px, 2.8571428571vw, 48px);
  }
  .c-tab__btn {
    min-width: clamp(90px, 6.5476190476vw, 110px);
    padding: clamp(6px, 0.5357142857vw, 9px) clamp(16px, 1.5476190476vw, 26px);
    font-size: clamp(15px, 1.1904761905vw, 20px);
  }
}
@media screen and (max-width: 768px) {
  .c-tab {
    gap: 12px 20px;
    margin-bottom: 24px;
    padding-bottom: 16px;
  }
  .c-tab__btn {
    min-width: 0;
    width: 156px;
    padding: 10px 0;
    font-size: 13px;
  }
  .c-tab::before {
    content: "";
    flex-basis: 100%;
    order: 1;
  }
  .c-tab__btn:not(:first-child) {
    order: 2;
  }
}

/* その他事例紹介スライダー（事例詳細ページ下部）：4カラム表示 */
.c-case-slider__viewport {
  overflow: hidden;
}
.c-case-slider__track {
  display: flex;
  gap: 24px;
  transition: transform 0.4s ease;
}
.c-case-slider__item {
  flex: 0 0 calc((100% - 24px * (4 - 1)) / 4);
  min-width: 0;
}
.c-case-slider__item a {
  display: block;
}
.c-case-slider__thumb {
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
}
.c-case-slider__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 295/175;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
.c-case-slider__item a:hover .c-case-slider__thumb img {
  transform: scale(1.05);
}
.c-case-slider__cap {
  font-size: 14px;
  line-height: 1.7;
  color: #545454;
}
.c-case-slider {
  /* TOP（p-case__arrows）と同デザイン・左寄せ */
}
.c-case-slider__nav {
  display: flex;
  gap: 8px;
  margin-top: 28px;
}
.c-case-slider__arrow {
  width: 52px;
  height: 52px;
  border: 2px solid #898989;
  color: #4A4947;
  font-size: 20px;
  cursor: pointer;
  position: relative;
  background: none;
  transition: 0.3s;
}
.c-case-slider__arrow:before {
  content: "";
  width: 15px;
  height: 15px;
  border: solid #898989;
  border-width: 2px 2px 0 0;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  transition: 0.3s;
}
.c-case-slider__arrow:hover {
  border: 2px solid #383838;
}
.c-case-slider__arrow:hover:before {
  border-color: #383838;
}
.c-case-slider__arrow.--next:before {
  left: 30%;
  transform: rotate(45deg);
}
.c-case-slider__arrow.--prev:before {
  right: 30%;
  transform: rotate(-135deg);
}
.c-case-slider__arrow:disabled {
  opacity: 0.3;
  pointer-events: none;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-case-slider__nav {
    margin-top: clamp(0px, 1.6666666667vw, 28px);
  }
  .c-case-slider__arrow {
    width: clamp(36px, 3.0952380952vw, 52px);
    height: clamp(36px, 3.0952380952vw, 52px);
  }
  .c-case-slider__arrow:before {
    width: clamp(10px, 0.8928571429vw, 15px);
    height: clamp(10px, 0.8928571429vw, 15px);
  }
}
@media screen and (max-width: 992px) {
  .c-case-slider__item {
    flex-basis: calc((100% - 24px) / 2);
  }
}
@media screen and (max-width: 768px) {
  .c-case-slider__viewport {
    padding-right: 50px;
  }
  .c-case-slider__item {
    flex-basis: 100%;
  }
  .c-case-slider__arrow {
    width: 30px;
    height: 30px;
  }
  .c-case-slider__arrow:before {
    width: 9px;
    height: 9px;
  }
}

/* 画像ギャラリー（実績サムネイル等） */
.c-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.c-gallery__item a {
  position: relative;
  display: block;
  aspect-ratio: 495/300;
  border-radius: 6px;
  overflow: hidden;
  color: #FFFFFF;
}
.c-gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
.c-gallery__item a:hover img {
  transform: scale(1.05);
}
.c-gallery {
  /* タイトル・キャッチコピーのオーバーレイ（c-soldcard__bodyと同様の見た目） */
}
.c-gallery__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
.c-gallery__ttl {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.c-gallery__txt {
  font-size: 13px;
  letter-spacing: 0.02em;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-gallery {
    gap: clamp(16px, 1.4285714286vw, 24px);
  }
}
@media screen and (max-width: 992px) {
  .c-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .c-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .c-gallery__body {
    padding: 5px;
    font-size: 9px;
    line-height: 1.5;
  }
  .c-gallery__ttl, .c-gallery__txt {
    font-size: inherit;
  }
}

/*========================================================
会社情報ページ（下層）
コンテンツ幅 1500px
========================================================*/
.p-comp__inner {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-comp__inner {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-comp__sec {
  padding: 100px 0;
}
.p-comp__sec--tight {
  padding: 60px 0;
}
.p-comp {
  /* コーポレートスローガンセクション：背景に slogan 装飾 */
}
.p-comp__sec--slogan {
  background: url(../images/company/slogan-bg.png) no-repeat 50% 20%/70%;
}
.p-comp {
  /* セクション見出し（左寄せ小見出し p-comp__lhead と同スタイル・英字非表示） */
}
.p-comp__head {
  margin-bottom: 100px;
  padding-bottom: 14px;
  border-bottom: 1px solid #D1D1D1;
}
.p-comp__head .en {
  display: none;
}
.p-comp__head .ja {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #4A4947;
}
.p-comp__head img {
  margin-bottom: 15px;
}
.p-comp {
  /* 中央寄せ・下線なし（品質と環境の両立） */
}
.p-comp__head--center {
  text-align: center;
  padding-bottom: 0;
  border-bottom: none;
}
.p-comp {
  /* 左寄せ小見出し */
}
.p-comp__lhead {
  margin-bottom: 100px;
  padding-bottom: 14px;
  border-bottom: 1px solid #D1D1D1;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #4A4947;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-comp__head, .p-comp__lhead {
    --_comp-head-mb: clamp(0px, 5.9523809524vw, 100px);
    --_comp-head-fs: clamp(20px, 1.7857142857vw, 30px);
    margin-bottom: var(--_comp-head-mb);
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-comp__lhead, .p-comp__head .ja {
    font-size: var(--_comp-head-fs);
  }
}
.p-comp {
  /* 会社概要テーブル（このページのみ：幅1160px・th 背景なし） */
}
.p-comp .c-deftable {
  max-width: 1160px;
  margin-inline: auto;
}
.p-comp .c-deftable th {
  background: none;
}
.p-comp {
  /* ヒーロー画像帯 */
}
.p-comp__hero img {
  display: block;
  width: 100%;
  height: 550px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
}
.p-comp {
  /* トップメッセージ */
}
.p-comp__message {
  display: grid;
  width: 100%;
  max-width: 1350px;
  margin-inline: auto;
  grid-template-columns: 1fr 690px;
  gap: 64px;
  align-items: start;
}
.p-comp__message > :nth-child(2) {
  margin-top: 220px;
}
.p-comp__message-side {
  position: relative;
}
.p-comp__message-photo {
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
  margin-left: 100px;
  border-radius: 6px;
}
.p-comp__message-cap-ttl {
  font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.7;
  color: #4A4947;
  margin-bottom: 14px;
  margin-top: 20px;
}
.p-comp__message-cap {
  font-size: 14px;
  line-height: 1.95;
  color: #545454;
}
.p-comp__message-ttl {
  margin-bottom: 28px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.6;
  color: #4A4947;
}
.p-comp__message-body p {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 2;
  color: #545454;
}
.p-comp__message-sign {
  margin-top: 32px !important;
  text-align: right;
  font-weight: 500;
  color: #4A4947;
}
.p-comp {
  /* 沿革（散開レイアウト＋全幅バブル背景） */
}
.p-comp__history {
  position: relative;
  box-sizing: border-box;
  /* 背景画像比率(2880:2124)に高さを合わせると、全幅(100vw)でも上下が切れず全体表示できる。
     縦書きリード＋ボタンが収まるよう下限も確保 */
  min-height: max(1080px, 73.75vw);
  padding: 80px 0;
}
.p-comp {
  /* 背景は画面両端まで全幅・画像全体を表示（高さを画像比率に合わせ cover） */
}
.p-comp__history::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: url(../../assets/images/company/history-bg.png) center center/cover no-repeat;
  z-index: 0;
}
.p-comp {
  /* era--1/2/3 を内包する親（背景円の中心付近に配置）。
     margin-left:40%と合計しても100%を超えないよう、max-widthを60%にして
     幅が狭まっても右にはみ出さないようにする（1920px以上では920px固定のまま）。 */
}
.p-comp__eras {
  position: relative;
  width: 920px;
  max-width: 60%;
  height: 1050px;
  margin: 0 0 0 40%;
}
.p-comp {
  /* 左の縦書きリード（参照：沿革文字.png） */
}
.p-comp__history-lead {
  position: absolute;
  z-index: 1;
  top: 140px;
  left: 0;
  display: flex;
  flex-direction: row-reverse;
  gap: 24px;
}
.p-comp__history-lead span {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.08em;
}
.p-comp__history-lead span:first-child {
  font-size: 35px;
  color: #4A4947;
}
.p-comp__history-lead span:last-child {
  font-size: 40px;
  color: #0068B6;
}
.p-comp {
  /* 年代ブロック（背景円の上：グラスモーフィズム・参照：沿革間隔.png） */
}
.p-comp__era {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  padding: 50px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 10px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.07);
  /* 初期は非表示。スクロールで is-visible 付与時に下からフェードイン */
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.p-comp__era ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}
.p-comp__era li {
  position: relative;
  padding-left: 1.1em;
  font-size: 16px;
  line-height: 1.7;
  color: #4A4947;
}
.p-comp__era li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #0068B6;
}
.p-comp__era-term {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: #0068B6;
  margin-bottom: 4px;
}
.p-comp__era-ttl {
  font-size: 26px;
  font-weight: 500;
  color: #4A4947;
}
.p-comp {
  /* 背景円の中心付近に3枚を配置（コンテンツに合わせて自動サイズ・カード同士が重ならないよう間隔を確保） */
}
.p-comp__era--1 {
  top: 180px;
  left: -40px;
}
.p-comp__era--2 {
  top: 335px;
  left: 391px;
}
.p-comp__era--3 {
  top: 564px;
  left: 26px;
}
.p-comp {
  /* 表示アニメーション（1→2→3 の順に下からフェードイン） */
}
.p-comp__era.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.p-comp__era--2.is-visible {
  transition-delay: 0.4s;
}
.p-comp__era--3.is-visible {
  transition-delay: 0.8s;
}
.p-comp {
  /* 沿革をみるボタン（Google Maps ボタンと同スタイル）。縦書きリードの下に配置して被りを回避 */
}
.p-comp__history-btn {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 990px;
}
.p-comp__hbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  height: 52px;
  margin-top: 150px;
  padding: 10px 24px;
  border: 1px solid #707070;
  border-radius: 5px;
  background: transparent;
  font-size: 20px;
  letter-spacing: 0.08em;
  color: #707070;
  transition: opacity 0.3s ease;
}
.p-comp__hbtn::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: 5px;
  width: 66px;
  height: 10px;
  background: url(../../assets/images/common/link_arrow_gray.png) no-repeat center center;
  background-size: contain;
}
.p-comp__hbtn:hover {
  opacity: 0.6;
}
.p-comp {
  /* 企業理念 */
}
.p-comp__philosophy {
  text-align: left;
  padding: 0;
  background: none;
}
.p-comp__philosophy p {
  font-size: 35px;
  line-height: 1.7;
  font-weight: 500;
  color: #4A4947;
}
.p-comp__philosophy strong {
  color: #4A4947;
}
.p-comp {
  /* 中期経営計画（ピラミッド図のみ・幅1000px中央） */
}
.p-comp__plan {
  display: flex;
  justify-content: center;
}
.p-comp__pyramid {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.p-comp__pyramid img {
  display: block;
  width: 100%;
  height: auto;
}
.p-comp {
  /* Vision（幅1160px・p-prod__treat-box と同じ装飾） */
}
.p-comp__vision {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding: 50px 80px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}
.p-comp__vision-ttl {
  text-align: center;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 500;
  color: #0068B6;
  margin-bottom: 48px;
}
.p-comp__vision-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.p-comp__vision-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.p-comp__vision-head .no {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 30px;
  font-weight: 500;
  color: #0068B6;
}
.p-comp__vision-head h4 {
  font-size: 22px;
  font-weight: 500;
  color: #0068B6;
  margin-bottom: 2px;
}
.p-comp__vision-item > p {
  font-size: 16px;
  line-height: 1.9;
  color: #545454;
}
.p-comp {
  /* 品質と環境の両立 */
}
.p-comp__qe {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 100px;
}
.p-comp__qe-box {
  padding: 80px;
  border-radius: 16px;
}
.p-comp__qe-box h4 {
  text-align: center;
  font-size: 22px;
  font-weight: 500;
}
.p-comp__qe-box .p-comp__qe-decl {
  margin-top: 30px;
  margin-bottom: 50px;
  font-size: 16px;
  line-height: 1.8;
  color: #545454;
}
.p-comp__qe-box ul {
  display: flex;
  flex-direction: column;
}
.p-comp__qe-box li {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.2);
  font-size: 15px;
  line-height: 1.7;
  color: #545454;
}
.p-comp__qe-box li:last-child {
  border-bottom: none;
}
.p-comp__qe-icon {
  width: 46px;
  height: 46px;
  -o-object-fit: contain;
     object-fit: contain;
}
.p-comp__qe-box--quality {
  background: #EFF5FA;
}
.p-comp__qe-box--quality h4 {
  color: #0068B6;
}
.p-comp__qe-box--env {
  background: #EDF5EE;
}
.p-comp__qe-box--env h4 {
  color: #2d8c62;
}
.p-comp {
  /* コーポレートスローガン */
}
.p-comp__slogan-ttl {
  width: 100%;
  margin: 0 0 60px;
  font-size: 35px;
  font-weight: 500;
  line-height: 1.5;
  color: #4A4947;
}
.p-comp {
  /* 3つのスローガン：白の透過角丸ボックス＋左にラベル */
}
.p-comp__slogan3 {
  display: flex;
  align-items: center;
  gap: 56px;
  width: 100%;
  max-width: 1548px;
  margin: 0 auto 100px;
  padding: 56px 64px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.07);
}
.p-comp__slogan3-label {
  flex-shrink: 0;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  line-height: 1.5;
  color: #0068B6;
}
.p-comp__slogan-list {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.p-comp__slogan-item {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 20px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid #D1D1D1;
}
.p-comp__slogan-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.p-comp__slogan-item:first-child {
  padding-top: 0;
}
.p-comp__slogan-item p {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.9;
  color: #545454;
}
.p-comp__slogan-no {
  display: flex;
  flex-direction: column;
  align-self: center;
  line-height: 1.1;
  text-align: center;
}
.p-comp__slogan-no .lb {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.08em;
  color: #0068B6;
}
.p-comp__slogan-no .no {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-style: italic;
  font-size: 50px;
  font-weight: bold;
  color: #707070;
}
.p-comp {
  /* 松陽産業 ビジネスキューブ */
}
.p-comp__cubebox {
  width: 100%;
  max-width: 1548px;
  margin-inline: auto;
}
.p-comp__cube img {
  display: block;
  width: 100%;
  height: auto;
}
.p-comp {
  /* レスポンシブ */
}
@media screen and (max-width: 1440px) {
  .p-comp__hero img {
    height: 280px;
  }
}
.p-comp {
  /* 1024px〜1920px対応：1281px〜1440pxの間は&__messageの2カラムを維持したまま、
     固定690px列と写真サイズを縮小してテキスト列を圧迫しないようにする。 */
}
@media screen and (max-width: 1440px) {
  .p-comp__message {
    grid-template-columns: 1fr 420px;
    gap: 40px;
  }
  .p-comp__message-photo {
    width: 260px;
    margin-left: 40px;
  }
  .p-comp__message-ttl {
    font-size: 24px;
  }
}
.p-comp {
  /* 可変（769〜1679px）：1680px時のレイアウトを画面幅に比例して縮小（上の$breakpoint-lの段階的な値を置き換え）。
     本文（14〜22px）は固定、見出し・幅・高さ・余白・画像を可変にする */
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-comp {
    --_comp-sec-py: clamp(0px, 5.9523809524vw, 100px);
    --_comp-sec-tight-py: clamp(0px, 3.5714285714vw, 60px);
    --_comp-msg-max: clamp(0px, 80.3571428571vw, 1350px);
    --_comp-msg-col: clamp(360px, 41.0714285714vw, 690px);
    --_comp-msg-gap: clamp(0px, 3.8095238095vw, 64px);
    --_comp-msg-offset: clamp(0px, 13.0952380952vw, 220px);
    --_comp-msg-photo-w: clamp(0px, 23.8095238095vw, 400px);
    --_comp-msg-photo-ml: clamp(0px, 5.9523809524vw, 100px);
    --_comp-msg-ttl-fs: clamp(20px, 1.6666666667vw, 28px);
    --_comp-hist-py: clamp(0px, 4.7619047619vw, 80px);
    --_comp-hist-min-h: clamp(0px, 64.2857142857vw, 1080px);
    --_comp-lead-top: clamp(0px, 8.3333333333vw, 140px);
    --_comp-lead-gap: clamp(0px, 1.4285714286vw, 24px);
    --_comp-lead-fs: clamp(22px, 2.0833333333vw, 35px);
    --_comp-lead-year-fs: clamp(26px, 2.380952381vw, 40px);
    --_comp-eras-w: clamp(0px, 54.7619047619vw, 920px);
    --_comp-eras-h: clamp(0px, 62.5vw, 1050px);
    --_comp-era-p: clamp(24px, 2.9761904762vw, 50px);
    --_comp-era-term-fs: clamp(18px, 1.4285714286vw, 24px);
    --_comp-era-ttl-fs: clamp(20px, 1.5476190476vw, 26px);
    --_comp-era1-top: clamp(0px, 10.7142857143vw, 180px);
    --_comp-era1-left: clamp(0px, 2.380952381vw, 40px);
    --_comp-era2-top: clamp(0px, 19.9404761905vw, 335px);
    --_comp-era2-left: clamp(0px, 23.2738095238vw, 391px);
    --_comp-era3-top: clamp(0px, 33.5714285714vw, 564px);
    --_comp-era3-left: clamp(0px, 1.5476190476vw, 26px);
    --_comp-hbtn-top: clamp(0px, 58.9285714286vw, 990px);
    --_comp-hbtn-mt: clamp(0px, 8.9285714286vw, 150px);
    --_comp-philosophy-fs: clamp(22px, 2.0833333333vw, 35px);
    --_comp-pyramid-w: clamp(0px, 59.5238095238vw, 1000px);
    --_comp-vision-w: clamp(0px, 69.0476190476vw, 1160px);
    --_comp-vision-py: clamp(0px, 2.9761904762vw, 50px);
    --_comp-vision-px: clamp(32px, 4.7619047619vw, 80px);
    --_comp-vision-ttl-fs: clamp(26px, 2.380952381vw, 40px);
    --_comp-vision-ttl-mb: clamp(0px, 2.8571428571vw, 48px);
    --_comp-vision-gap: clamp(0px, 2.380952381vw, 40px);
    --_comp-vision-no-fs: clamp(22px, 1.7857142857vw, 30px);
    --_comp-qe-gap: clamp(0px, 5.9523809524vw, 100px);
    --_comp-qe-p: clamp(32px, 4.7619047619vw, 80px);
    --_comp-slogan-ttl-fs: clamp(22px, 2.0833333333vw, 35px);
    --_comp-slogan-ttl-mb: clamp(0px, 3.5714285714vw, 60px);
    --_comp-slogan3-gap: clamp(0px, 3.3333333333vw, 56px);
    --_comp-slogan3-py: clamp(0px, 3.3333333333vw, 56px);
    --_comp-slogan3-px: clamp(28px, 3.8095238095vw, 64px);
    --_comp-slogan3-mb: clamp(0px, 5.9523809524vw, 100px);
    --_comp-slogan3-label-fs: clamp(18px, 1.4880952381vw, 25px);
    --_comp-slogan-no-w: clamp(60px, 5vw, 84px);
    --_comp-slogan-no-fs: clamp(32px, 2.9761904762vw, 50px);
  }
  .p-comp__sec {
    padding: var(--_comp-sec-py) 0;
  }
  .p-comp__sec--tight {
    padding: var(--_comp-sec-tight-py) 0;
  }
  .p-comp__hero img {
    height: auto;
    aspect-ratio: 1548/550;
  }
  .p-comp__message {
    max-width: var(--_comp-msg-max);
    grid-template-columns: 1fr var(--_comp-msg-col);
    gap: var(--_comp-msg-gap);
  }
  .p-comp__message > :nth-child(2) {
    margin-top: var(--_comp-msg-offset);
  }
  .p-comp__message-photo {
    width: var(--_comp-msg-photo-w);
    margin-left: var(--_comp-msg-photo-ml);
  }
  .p-comp__message-ttl {
    font-size: var(--_comp-msg-ttl-fs);
  }
  .p-comp__history {
    min-height: max(var(--_comp-hist-min-h), 73.75vw);
    padding: var(--_comp-hist-py) 0;
  }
  .p-comp__history-lead {
    top: var(--_comp-lead-top);
    gap: var(--_comp-lead-gap);
  }
  .p-comp__history-lead span:first-child {
    font-size: var(--_comp-lead-fs);
  }
  .p-comp__history-lead span:last-child {
    font-size: var(--_comp-lead-year-fs);
  }
  .p-comp__eras {
    width: var(--_comp-eras-w);
    height: var(--_comp-eras-h);
  }
  .p-comp__era {
    padding: var(--_comp-era-p);
  }
  .p-comp__era-term {
    font-size: var(--_comp-era-term-fs);
  }
  .p-comp__era-ttl {
    font-size: var(--_comp-era-ttl-fs);
  }
  .p-comp__era--1 {
    top: var(--_comp-era1-top);
    left: calc(-1 * var(--_comp-era1-left));
  }
  .p-comp__era--2 {
    top: var(--_comp-era2-top);
    left: var(--_comp-era2-left);
  }
  .p-comp__era--3 {
    top: var(--_comp-era3-top);
    left: var(--_comp-era3-left);
  }
  .p-comp__history-btn {
    top: var(--_comp-hbtn-top);
  }
  .p-comp__hbtn {
    margin-top: var(--_comp-hbtn-mt);
  }
  .p-comp__philosophy p {
    font-size: var(--_comp-philosophy-fs);
  }
  .p-comp__pyramid {
    max-width: var(--_comp-pyramid-w);
  }
  .p-comp__vision {
    max-width: var(--_comp-vision-w);
    padding: var(--_comp-vision-py) var(--_comp-vision-px);
  }
  .p-comp__vision-ttl {
    font-size: var(--_comp-vision-ttl-fs);
    margin-bottom: var(--_comp-vision-ttl-mb);
  }
  .p-comp__vision-list {
    gap: var(--_comp-vision-gap);
  }
  .p-comp__vision-head .no {
    font-size: var(--_comp-vision-no-fs);
  }
  .p-comp__qe {
    gap: var(--_comp-qe-gap);
  }
  .p-comp__qe-box {
    padding: var(--_comp-qe-p);
  }
  .p-comp__slogan-ttl {
    font-size: var(--_comp-slogan-ttl-fs);
    margin-bottom: var(--_comp-slogan-ttl-mb);
  }
  .p-comp__slogan3 {
    gap: var(--_comp-slogan3-gap);
    padding: var(--_comp-slogan3-py) var(--_comp-slogan3-px);
    margin-bottom: var(--_comp-slogan3-mb);
  }
  .p-comp__slogan3-label {
    font-size: var(--_comp-slogan3-label-fs);
  }
  .p-comp__slogan-item {
    grid-template-columns: var(--_comp-slogan-no-w) 1fr;
  }
  .p-comp__slogan-no .no {
    font-size: var(--_comp-slogan-no-fs);
  }
}
.p-comp {
  /* 沿革（769〜1200px）：本文は固定サイズのため、カードの位置だけ縮めると1200px以下でカード同士が重なる
     （1024pxでは2枚目が幅181pxまで押しつぶされる）。この範囲は年代カードを縦に積む配置に切り替える */
}
@media screen and (min-width: 768.02px) and (max-width: 1200px) {
  .p-comp__eras {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 1.7857142857vw, 30px);
    height: auto;
    padding-top: var(--_comp-era1-top);
  }
  .p-comp__era--1, .p-comp__era--2, .p-comp__era--3 {
    position: relative;
    top: auto;
    left: auto;
  }
}
.p-comp {
  /* 以下、SP専用調整 */
}
@media screen and (max-width: 768px) {
  .p-comp {
    /* SPの土台：以前は$breakpoint-l（1440px以下）のブロックにあり、SPにも引き継がれていた指定。
       1440px以下のブロックがPCレイアウト維持用（2カラム・沿革の散開配置）に変わり、
       PCの値がSPまで漏れて崩れていたため、SP側に明示する（この後のSP専用の指定が優先） */
  }
  .p-comp__history {
    min-height: 0;
    padding: 24px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .p-comp__history-lead {
    position: static;
    gap: 5px;
  }
  .p-comp__eras {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
  }
  .p-comp__era {
    width: 100%;
  }
  .p-comp__era--1, .p-comp__era--2, .p-comp__era--3 {
    top: auto;
    left: auto;
    right: auto;
  }
  .p-comp__history-btn {
    position: static;
  }
  .p-comp__message {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .p-comp__pyramid {
    max-width: 100%;
  }
  .p-comp__vision-list {
    gap: 28px;
  }
  .p-comp__qe {
    grid-template-columns: 1fr;
  }
  .p-comp__slogan3 {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .p-comp__cubebox-body {
    grid-template-columns: 1fr;
  }
  .p-comp__sec {
    padding: 48px 0;
  }
  .p-comp__sec--tight {
    padding: 32px 0;
  }
  .p-comp__inner {
    padding-bottom: 0;
  }
  .p-comp__head {
    margin-bottom: 24px;
    padding-bottom: 10px;
  }
  .p-comp__head .ja {
    font-size: 18px;
  }
  .p-comp__head--center .ja {
    font-weight: 700;
  }
  .p-comp__lhead {
    margin-bottom: 24px;
    padding-bottom: 10px;
    font-size: 18px;
  }
  .p-comp__hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .p-comp__hero img {
    height: 260px;
    border-radius: 0;
  }
  .p-comp .c-deftable th {
    font-size: 15px;
    padding-top: 20px;
    padding-bottom: 5px;
  }
  .p-comp .c-deftable td {
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 20px;
  }
  .p-comp {
    /* トップメッセージ：写真→ロゴ→キャッチ→本文の順だったDOMを、ロゴ→キャッチ→本文→写真の表示順に */
  }
  .p-comp__message > :nth-child(2) {
    margin-top: 0;
  }
  .p-comp__message-side {
    display: flex;
    flex-direction: column;
  }
  .p-comp__message-photo {
    order: 4;
    width: 100%;
    margin-left: 0;
  }
  .p-comp__message-cap-ttl {
    order: 2;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 17px;
    font-weight: 700;
  }
  .p-comp__message-cap {
    order: 3;
    font-size: 12px;
    margin-bottom: 50px;
  }
  .p-comp__message-ttl {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
  }
  .p-comp__message-body p {
    font-size: 12px;
  }
  .p-comp {
    /* 沿革：タイムライン形式（縦のドット付きライン）。縦書きリードは全高分ぶん左に配置 */
  }
  .p-comp__history {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    -moz-column-gap: 20px;
         column-gap: 20px;
    background: none;
  }
  .p-comp__history::before {
    background-image: url(../../assets/images/company/history-bg_sp.png);
  }
  .p-comp__history-lead {
    grid-column: 1;
    grid-row: 1/span 2;
    flex-direction: row-reverse;
  }
  .p-comp__history-lead span {
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  .p-comp__history-lead span:first-child {
    font-size: 18px;
    font-weight: bold;
  }
  .p-comp__history-lead span:last-child {
    font-size: 16px;
    font-weight: bold;
  }
  .p-comp__eras {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 34px;
  }
  .p-comp__eras::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 205px;
    left: 13px;
    width: 2px;
    background: #0D6EB8;
  }
  .p-comp__era {
    position: relative;
    padding: 15px 10px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 10px;
    box-shadow: none;
  }
  .p-comp__era::before {
    content: "";
    position: absolute;
    top: 23px;
    left: -27px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0D6EB8;
    z-index: 1;
  }
  .p-comp__era-term {
    font-size: 20px;
    color: #0D6EB8;
  }
  .p-comp__era-ttl {
    font-size: 15px;
    font-weight: 700;
  }
  .p-comp__era li {
    font-size: 12px;
  }
  .p-comp__history-btn {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    margin-top: 12px;
  }
  .p-comp__hbtn {
    min-width: 0;
    height: 36px;
    margin-top: 0;
    padding: 8px 16px;
    font-size: 13px;
  }
  .p-comp__hbtn::after {
    right: -14px;
    bottom: 8px;
    width: 46px;
    height: 8px;
  }
  .p-comp__philosophy p {
    font-size: 20px;
    font-weight: 700;
  }
  .p-comp__vision {
    padding: 24px;
  }
  .p-comp__vision-ttl {
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: bold;
  }
  .p-comp__vision-head .no {
    font-size: 20px;
    font-weight: bold;
  }
  .p-comp__vision-head h4 {
    font-size: 18px;
  }
  .p-comp__vision-item > p {
    font-size: 12px;
  }
  .p-comp__qe {
    gap: 24px;
  }
  .p-comp__qe-box {
    padding: 24px;
  }
  .p-comp__qe-box h4 {
    font-size: 18px;
    font-weight: 700;
  }
  .p-comp__qe-box .p-comp__qe-decl {
    margin-top: 16px;
    margin-bottom: 24px;
    font-size: 13px;
  }
  .p-comp__qe-box li {
    grid-template-columns: 40px 1fr;
    padding: 14px 4px;
    font-size: 12px;
  }
  .p-comp__qe-icon {
    width: 36px;
    height: 36px;
  }
  .p-comp__slogan-ttl {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 24px;
  }
  .p-comp {
    /* 3つのスローガン：SPでは背景ボックス・左見出しラベルを外し、シンプルな行揃えリストに */
  }
  .p-comp__slogan3 {
    background: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
  }
  .p-comp__slogan3-label {
    display: none;
  }
  .p-comp__slogan-item {
    grid-template-columns: 60px 1fr;
    gap: 16px;
    padding: 24px 0;
  }
  .p-comp__slogan-item p {
    font-size: 15px;
  }
  .p-comp__slogan-no {
    align-self: start;
    text-align: left;
  }
  .p-comp__slogan-no .lb {
    font-size: 11px;
  }
  .p-comp__slogan-no .no {
    font-size: 32px;
  }
  .p-comp {
    /* SPモックアップでは ビジネスキューブ → 3つのスローガン の順に表示され、
       事業領域の補足ボックス（cube-note-main）は非表示になる */
  }
  .p-comp__sec--slogan .p-comp__inner {
    display: flex;
    flex-direction: column;
  }
  .p-comp__slogan3 {
    order: 2;
    margin-top: 50px;
  }
  .p-comp__cubebox {
    order: 1;
  }
}

/*========================================================
ソリューション（①A）
========================================================*/
.p-sol {
  /* ===== ヒーロー（背景画像＋HTMLテキスト） ===== */
}
.p-sol__hero {
  position: relative;
  z-index: 1;
  height: 1800px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-sol__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.p-sol {
  /* hero-inner と benefit をまとめる枠（背景の上に配置） */
}
.p-sol__hero-content {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  z-index: 1;
  padding: 0 24px;
  text-align: center;
  color: #FFFFFF;
}
.p-sol__hero-icon {
  display: block;
  width: 140px;
  height: auto;
  margin: 0 auto 18px;
}
.p-sol__hero-en {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: clamp(36px, 4vw, 70px);
  font-weight: 400;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}
.p-sol__hero-lead {
  font-size: 20px;
  line-height: 2;
  letter-spacing: 0.04em;
}
.p-sol {
  /* ===== benefit（パンチングメタルがもたらす環境性能） ===== */
  /* hero-inner の下・背景の上に配置。スクロールで下からフェードイン */
}
.p-sol__benefit {
  margin-top: 300px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.p-sol__benefit.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.p-sol__benefit-ttl {
  margin-bottom: 44px;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.p-sol__benefit-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
}
.p-sol__benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 150px;
}
.p-sol__benefit-icon {
  width: 150px;
  height: 150px;
}
.p-sol__benefit-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.p-sol__benefit-label {
  font-size: 24px;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
@media screen and (max-width: 992px) {
  .p-sol__benefit {
    top: 46%;
  }
  .p-sol__benefit-ttl {
    font-size: 20px;
    margin-bottom: 28px;
  }
  .p-sol__benefit-list {
    gap: 24px 28px;
  }
  .p-sol__benefit-icon {
    width: 56px;
    height: 56px;
  }
}
.p-sol {
  /* ===== 機能紹介（ダーク・交互・フル幅） ===== */
}
.p-sol__features {
  position: relative;
  background: #071017;
  margin-top: -140px;
  padding-top: 140px;
  z-index: 2;
}
.p-sol__feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.p-sol__feature--rev .p-sol__feature-body {
  order: 2;
}
.p-sol__feature--rev {
  padding: 150px 0;
}
.p-sol__feature-body {
  align-self: center;
  padding: 64px clamp(32px, 6vw, 110px);
}
.p-sol__feature-en {
  display: inline-block;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 1.1;
  color: #FFFFFF;
  letter-spacing: 0.02em;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.p-sol__feature-ja {
  font-size: 30px;
  color: rgba(255, 255, 255, 0.9);
  margin: 16px 0 50px;
  letter-spacing: 0.08em;
}
.p-sol__feature-body p:not([class]) {
  font-size: 20px;
  line-height: 2;
  color: rgba(255, 255, 255, 0.85);
}
.p-sol__feature-body p:not([class]) + p:not([class]) {
  margin-top: 1.6em;
}
.p-sol__feature-img img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-sol {
  /* ===== カテゴリバナー（デザイン／機能） ===== */
}
.p-sol__cat {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.p-sol__cat-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 500px;
  padding: 40px 56px;
  overflow: hidden;
  color: #FFFFFF;
}
.p-sol__cat-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
  z-index: 0;
}
.p-sol__cat-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.p-sol__cat-item:hover .p-sol__cat-bg {
  transform: scale(1.05);
}
.p-sol__cat-labels, .p-sol__cat-ttl {
  position: relative;
  z-index: 2;
}
.p-sol__cat-labels {
  font-size: 16px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 10px;
}
.p-sol__cat-ttl {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0.06em;
  display: inline;
  width: -moz-fit-content;
  width: fit-content;
  border-bottom: 1px solid #fff;
  padding-bottom: 5px;
}
@media screen and (max-width: 1440px) {
  .p-sol__cat-item {
    padding: 32px 32px;
  }
  .p-sol__cat-ttl {
    font-size: 28px;
  }
}
.p-sol {
  /* ===== 松陽産業の特長（フロー） ===== */
}
.p-sol__feat {
  padding: 90px 0 60px;
  background: #F2F2F2;
}
.p-sol__head {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-sol__head {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-sol__head {
  position: relative;
  margin-bottom: 56px;
  padding-bottom: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  /* タイトル下のライン（幅100%・高さ2px に line.svg） */
}
.p-sol__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: url(../../assets/images/common/line.svg) no-repeat left center/100% 2px;
}
.p-sol__head .en {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: #707070;
}
.p-sol__head .ja {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #4A4947;
}
.p-sol {
  /* フロー図は1枚画像で表示 */
}
.p-sol__flow-full {
  width: 1000px;
  max-width: 100%;
  margin-inline: auto;
  display: block;
  height: auto;
}
.p-sol__feat-tagline {
  width: 100%;
  max-width: min(1148px, var(--container-limit, 1148px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-sol__feat-tagline {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-sol__feat-tagline {
  margin-top: 48px;
  font-size: clamp(16px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.9;
  color: #0068B6;
}
.p-sol__feat-tagline.--center {
  font-size: 35px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .p-sol__feat-tagline.--center {
    font-size: 18px;
    text-align: left;
    margin: 70px 0;
    padding-bottom: 0;
  }
}
.p-sol__feat-tagline.--left {
  text-align: left;
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  .p-sol__feat-tagline.--left {
    font-size: 15px;
    text-align: center;
    padding-bottom: 0;
    margin-bottom: 28px;
  }
}
.p-sol {
  /* ===== ソリューション事例 ===== */
}
.p-sol__cases {
  padding: 80px 0;
}
.p-sol__case {
  display: flex;
  padding: 32px 0;
}
.p-sol__case img {
  width: 447px;
  height: 290px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.p-sol__case h4 {
  font-size: 25px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #D1D1D1;
  padding-left: 20px;
}
.p-sol__case p {
  font-size: 16px;
  line-height: 1.9;
  color: #545454;
  padding-right: 20%;
  padding-left: 20px;
}
@media screen and (max-width: 1440px) {
  .p-sol__case img {
    width: 300px;
    height: 200px;
  }
  .p-sol__case p {
    padding-right: 5%;
  }
}
.p-sol__case-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}
.p-sol__case-btn {
  position: absolute;
  bottom: 0;
  right: 0;
}
.p-sol {
  /* ===== 弊社対応事例（Q&A） ===== */
}
.p-sol__qa {
  padding: 20px 0 80px;
}
.p-sol__qa-lead {
  margin-bottom: 48px;
  font-size: 15px;
  line-height: 2;
  color: #545454;
}
.p-sol__qa-list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 80%;
  margin: 0 auto;
}
.p-sol__qa-item {
  background: #fff;
  padding: 50px;
}
.p-sol {
  /* 質問行（白背景ボックス） */
}
.p-sol__qa-q {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: start;
  padding: 22px 28px;
  margin-bottom: 12px;
  background: #FFFFFF;
  border-radius: 8px;
}
.p-sol {
  /* 回答行（水色角丸ボックス） */
}
.p-sol__qa-a {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: center;
  padding: 22px 28px;
  border-radius: 8px;
  background: rgba(0, 104, 182, 0.1);
}
.p-sol__qa-label {
  font-size: 18px;
  font-weight: 500;
  color: #4A4947;
  line-height: 1.5;
}
.p-sol__qa-label--a {
  color: #0068B6;
}
.p-sol__qa-txt {
  font-size: 16px;
  line-height: 1.85;
  color: #4A4947;
}
.p-sol__qa-a .p-sol__qa-txt {
  color: #545454;
}
.p-sol {
  /* ===== CTA ===== */
}
.p-sol__cta-btns {
  padding: 80px 0 100px;
  text-align: center;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
.p-sol__cta-btns h2 {
  width: 100%;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 40px;
  text-align: center;
}
.p-sol__cta-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 300px;
  padding: 20px 32px;
  border-radius: 6px;
  background: #3d85c6;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  transition: opacity 0.3s ease;
}
.p-sol__cta-btn small {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
}
.p-sol__cta-btn:hover {
  opacity: 0.85;
}
.p-sol {
  /* ===== レスポンシブ ===== */
}
@media screen and (max-width: 1440px) {
  .p-sol__hero {
    height: 1450px;
  }
  .p-sol__hero-content {
    top: 12vw;
  }
}
.p-sol {
  /* 可変（769〜1679px）：1680px時のレイアウトを画面幅に比例して縮小（上の$breakpoint-lの段階的な値を置き換え）。
     本文（12〜20px）は読みやすさのため固定、見出し・幅・高さ・余白を可変にする。
     992px以下はこの後の$breakpoint-sのタブレット用の固定値が優先 */
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-sol {
    --_sol-hero-h: clamp(0px, 107.1428571429vw, 1800px);
    --_sol-features-overlap: clamp(0px, 8.3333333333vw, 140px);
    --_sol-feature-py: clamp(0px, 8.9285714286vw, 150px);
    --_sol-feature-en-fs: clamp(36px, 4.1666666667vw, 70px);
    --_sol-feature-ja-fs: clamp(18px, 1.7857142857vw, 30px);
    --_sol-feature-ja-mt: clamp(0px, 0.9523809524vw, 16px);
    --_sol-feature-ja-mb: clamp(0px, 2.9761904762vw, 50px);
    --_sol-feature-img-h: clamp(0px, 22.619047619vw, 380px);
    --_sol-cat-h: clamp(0px, 29.7619047619vw, 500px);
    --_sol-cat-py: clamp(0px, 2.380952381vw, 40px);
    --_sol-cat-px: clamp(0px, 3.3333333333vw, 56px);
    --_sol-cat-ttl-fs: clamp(20px, 2.380952381vw, 40px);
    --_sol-feat-pt: clamp(0px, 5.3571428571vw, 90px);
    --_sol-feat-pb: clamp(0px, 3.5714285714vw, 60px);
    --_sol-head-mb: clamp(0px, 3.3333333333vw, 56px);
    --_sol-head-ja-fs: clamp(22px, 2.1428571429vw, 36px);
    --_sol-flow-w: clamp(0px, 59.5238095238vw, 1000px);
    --_sol-tagline-mt: clamp(0px, 2.8571428571vw, 48px);
    --_sol-tagline-fs: clamp(20px, 2.0833333333vw, 35px);
    --_sol-cases-py: clamp(0px, 4.7619047619vw, 80px);
    --_sol-qa-gap: clamp(0px, 2.380952381vw, 40px);
    --_sol-qa-item-p: clamp(24px, 2.9761904762vw, 50px);
    --_sol-qa-label-w: clamp(80px, 7.7380952381vw, 130px);
    --_sol-qa-py: clamp(0px, 1.3095238095vw, 22px);
    --_sol-qa-px: clamp(0px, 1.6666666667vw, 28px);
    --_sol-cta-pt: clamp(0px, 4.7619047619vw, 80px);
    --_sol-cta-pb: clamp(0px, 5.9523809524vw, 100px);
    --_sol-cta-btn-w: clamp(220px, 17.8571428571vw, 300px);
  }
  .p-sol__hero {
    height: var(--_sol-hero-h);
  }
  .p-sol__hero-content {
    top: 20%;
  }
  .p-sol__features {
    margin-top: calc(-1 * var(--_sol-features-overlap));
    padding-top: var(--_sol-features-overlap);
  }
  .p-sol__feature--rev {
    padding: var(--_sol-feature-py) 0;
  }
  .p-sol__feature-en {
    font-size: var(--_sol-feature-en-fs);
  }
  .p-sol__feature-ja {
    font-size: var(--_sol-feature-ja-fs);
    margin: var(--_sol-feature-ja-mt) 0 var(--_sol-feature-ja-mb);
  }
  .p-sol__feature-img img {
    min-height: var(--_sol-feature-img-h);
  }
  .p-sol__cat-item {
    min-height: var(--_sol-cat-h);
    padding: var(--_sol-cat-py) var(--_sol-cat-px);
  }
  .p-sol__cat-ttl {
    font-size: var(--_sol-cat-ttl-fs);
  }
  .p-sol__feat {
    padding: var(--_sol-feat-pt) 0 var(--_sol-feat-pb);
  }
  .p-sol__head {
    margin-bottom: var(--_sol-head-mb);
  }
  .p-sol__head .ja {
    font-size: var(--_sol-head-ja-fs);
  }
  .p-sol__flow-full {
    width: var(--_sol-flow-w);
  }
  .p-sol__feat-tagline {
    margin-top: var(--_sol-tagline-mt);
  }
  .p-sol__feat-tagline.--center {
    font-size: var(--_sol-tagline-fs);
  }
  .p-sol__cases {
    padding: var(--_sol-cases-py) 0;
  }
  .p-sol__case-btn {
    align-self: flex-end;
  }
  .p-sol__case .p-sol__case-btn {
    position: static;
    margin-top: auto;
    padding-top: 12px;
  }
  .p-sol__case {
    --_sol-case-py: clamp(0px, 1.9047619048vw, 32px);
    --_sol-case-ttl-fs: clamp(18px, 1.4880952381vw, 25px);
    padding: var(--_sol-case-py) 0;
  }
  .p-sol__case h4 {
    font-size: var(--_sol-case-ttl-fs);
  }
  .p-sol__qa-list {
    gap: var(--_sol-qa-gap);
  }
  .p-sol__qa-item {
    padding: var(--_sol-qa-item-p);
  }
  .p-sol__qa-q, .p-sol__qa-a {
    grid-template-columns: var(--_sol-qa-label-w) 1fr;
    padding: var(--_sol-qa-py) var(--_sol-qa-px);
  }
  .p-sol__cta-btns {
    padding: var(--_sol-cta-pt) 0 var(--_sol-cta-pb);
  }
  .p-sol__cta-btn {
    min-width: var(--_sol-cta-btn-w);
  }
}
@media screen and (min-width: 992.02px) and (max-width: 1679.98px) {
  .p-sol {
    --_sol-hero-icon-w: clamp(70px, 8.3333333333vw, 140px);
    --_sol-hero-icon-mb: clamp(0px, 1.0714285714vw, 18px);
    --_sol-benefit-mt: clamp(0px, 17.8571428571vw, 300px);
    --_sol-benefit-ttl-fs: clamp(20px, 2.380952381vw, 40px);
    --_sol-benefit-ttl-mb: clamp(0px, 2.619047619vw, 44px);
    --_sol-benefit-gap: clamp(0px, 2.8571428571vw, 48px);
    --_sol-benefit-item-gap: clamp(0px, 0.9523809524vw, 16px);
    --_sol-benefit-icon: clamp(56px, 8.9285714286vw, 150px);
    --_sol-benefit-label-fs: clamp(14px, 1.4285714286vw, 24px);
  }
  .p-sol__hero-icon {
    width: var(--_sol-hero-icon-w);
    margin-bottom: var(--_sol-hero-icon-mb);
  }
  .p-sol__benefit {
    margin-top: var(--_sol-benefit-mt);
  }
  .p-sol__benefit-ttl {
    font-size: var(--_sol-benefit-ttl-fs);
    margin-bottom: var(--_sol-benefit-ttl-mb);
  }
  .p-sol__benefit-list {
    gap: var(--_sol-benefit-gap);
  }
  .p-sol__benefit-item {
    width: var(--_sol-benefit-icon);
    gap: var(--_sol-benefit-item-gap);
  }
  .p-sol__benefit-icon {
    width: var(--_sol-benefit-icon);
    height: var(--_sol-benefit-icon);
  }
  .p-sol__benefit-label {
    font-size: var(--_sol-benefit-label-fs);
  }
  .p-sol__case img {
    flex-shrink: 0;
    align-self: flex-start;
    width: clamp(0px, 26.6071428571vw, 447px);
    height: auto;
    aspect-ratio: 447/290;
  }
}
@media screen and (max-width: 992px) {
  .p-sol__hero {
    height: 820px;
  }
  .p-sol__hero-content {
    top: 64px;
  }
  .p-sol__benefit {
    margin-top: 120px;
  }
  .p-sol__feature {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .p-sol__feature--rev .p-sol__feature-body {
    order: 0;
  }
  .p-sol__feature-en {
    font-size: 44px;
  }
  .p-sol__feature-ja {
    font-size: 22px;
  }
  .p-sol__cat {
    grid-template-columns: 1fr;
  }
  .p-sol__case {
    flex-direction: column;
  }
  .p-sol__case img {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  .p-sol__case-btn {
    align-self: flex-start;
  }
  .p-sol__qa-q, .p-sol__qa-a {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-left: 18px;
    padding-right: 18px;
  }
}
.p-sol {
  /* SP調整 */
}
@media screen and (max-width: 768px) {
  .p-sol__hero {
    height: 800px;
  }
  .p-sol__hero-icon {
    width: 70px;
    margin-bottom: 12px;
  }
  .p-sol__hero-en {
    font-size: 24px;
    margin-bottom: 8px;
  }
  .p-sol__hero-lead {
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
  }
  .p-sol__hero-lead br {
    display: none;
  }
  .p-sol__benefit {
    margin-top: 40px;
  }
  .p-sol__benefit-ttl {
    font-size: 14px;
    margin-bottom: 26px;
  }
  .p-sol__benefit-list {
    gap: 20px 36px;
  }
  .p-sol__benefit-item {
    width: 78px;
  }
  .p-sol__benefit-icon {
    width: 70px;
    height: 70px;
  }
  .p-sol__benefit-label {
    font-size: 12px;
  }
  .p-sol__features {
    padding-top: 0;
  }
  .p-sol__feature {
    gap: 0;
  }
  .p-sol__feature-img {
    order: 1;
    padding: 0 15px;
  }
  .p-sol__feature-body {
    order: 2;
    padding: 40px 20px;
  }
  .p-sol__feature--rev .p-sol__feature-body {
    order: 2;
  }
  .p-sol__feature--rev {
    padding-top: 100px;
  }
  .p-sol__feature-en {
    font-size: 30px;
    padding-bottom: 8px;
  }
  .p-sol__feature-ja {
    font-size: 13px;
    margin: 10px 0 40px;
  }
  .p-sol__feature-body p:not([class]) {
    font-size: 16px;
    line-height: 1.6;
  }
  .p-sol__feature-img img {
    min-height: 220px;
  }
  .p-sol__cat-item {
    min-height: 220px;
    padding: 20px;
  }
  .p-sol__cat-labels {
    font-size: 10px;
  }
  .p-sol__cat-ttl {
    font-size: 15px;
  }
  .p-sol__feat {
    padding: 48px 0 32px;
    background: none;
  }
  .p-sol__flow-full {
    max-width: calc(100% - 80px);
  }
  .p-sol__head {
    margin-bottom: 24px;
    padding-bottom: 10px;
  }
  .p-sol__head .en {
    font-size: 12px;
  }
  .p-sol__head .ja {
    font-size: 20px;
  }
  .p-sol__feat-tagline {
    margin-top: 24px;
    margin-bottom: 100px;
    font-size: 15px;
  }
  .p-sol__cases {
    padding: 40px 0;
  }
  .p-sol__case {
    padding: 0;
  }
  .p-sol__case img {
    order: 2;
    width: 100%;
    height: auto;
    aspect-ratio: 335/131;
  }
  .p-sol__case-body {
    display: contents;
  }
  .p-sol__case h4 {
    order: 1;
    padding-left: 0;
    font-size: 12px;
    line-height: 1.5;
    padding: 0;
    border-bottom: none;
  }
  .p-sol__case p {
    order: 3;
    padding-left: 0;
    padding-right: 0;
    font-size: 12px;
    margin-bottom: 20px;
  }
  .p-sol__case-btn {
    order: 4;
    position: static;
    align-self: flex-end;
    margin-bottom: 50px;
    text-align: right;
  }
  .p-sol__case-btn a {
    font-size: 14px;
  }
  .p-sol__qa {
    padding: 12px 0 40px;
  }
  .p-sol__qa-lead {
    margin-bottom: 24px;
    font-size: 13px;
  }
  .p-sol__qa-list {
    width: 100%;
    gap: 20px;
    padding: 20px;
    text-align: center;
  }
  .p-sol__qa-q {
    background: none;
  }
  .p-sol__qa-q, .p-sol__qa-a {
    padding: 16px;
  }
  .p-sol__qa-label {
    font-size: 14px;
  }
  .p-sol__qa-txt {
    font-size: 12px;
    text-align: left;
  }
  .p-sol__qa-txt br {
    display: none;
  }
  .p-sol__cta-btns {
    padding: 40px 0 56px;
    gap: 14px;
    line-height: 1.5;
  }
  .p-sol__cta-btns h2 {
    margin-bottom: 20px;
    font-size: 18px;
  }
  .p-sol__cta-btn {
    min-width: 0;
    width: 245px;
    padding: 14px 20px;
    font-size: 13px;
  }
}

/*========================================================
デザインソリューション一覧（②A）
========================================================*/
.p-sold {
  /* ===== ヒーロー（高さ950px） ===== */
}
.p-sold__hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.p-sold__hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
}
.p-sold {
  /* テキスト帯：幅100%・高さ440px・背景 hero_bg.png */
}
.p-sold__hero-inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 550px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5%;
  color: #fff;
  background: url(../images/design_solution/hero_bg.png) center bottom/cover no-repeat;
}
.p-sold__hero-sub {
  font-size: 25px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  margin-top: 150px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.p-sold__hero-en {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: clamp(34px, 4vw, 80px);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.p-sold {
  /* SP専用：ヒーロー画像の下（グレー背景エリア）に表示するコピー。PC/タブレットでは非表示 */
}
.p-sold__hero-sub-sp {
  display: none;
}
.p-sold {
  /* ===== 見出し ===== */
}
.p-sold__head {
  text-align: center;
  padding: 150px 0 0;
}
.p-sold__head-icon {
  display: block;
  width: 140px;
  height: 140px;
  margin: 0 auto 50px;
}
.p-sold__head-ttl {
  font-size: 50px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: #4A4947;
  margin-bottom: 150px;
}
.p-sold {
  /* ===== 4カード（コンテンツ幅1320px・間隔80px） ===== */
}
.p-sold__grid {
  width: 100%;
  max-width: min(1368px, var(--container-limit, 1368px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-sold__grid {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-sold__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding-bottom: 110px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-sold {
    --_sold-band-h: clamp(320px, 32.7380952381vw, 550px);
    --_sold-sub-fs: clamp(18px, 1.4880952381vw, 25px);
    --_sold-sub-mt: clamp(0px, 8.9285714286vw, 150px);
    --_sold-head-pt: clamp(0px, 8.9285714286vw, 150px);
    --_sold-icon: clamp(100px, 8.3333333333vw, 140px);
    --_sold-icon-mb: clamp(0px, 2.9761904762vw, 50px);
    --_sold-ttl-fs: clamp(30px, 2.9761904762vw, 50px);
    --_sold-ttl-mb: clamp(0px, 8.9285714286vw, 150px);
    --_sold-grid-gap: clamp(0px, 4.7619047619vw, 80px);
    --_sold-grid-pb: clamp(0px, 6.5476190476vw, 110px);
    --_sold-body-pb: clamp(0px, 8.3333333333vw, 140px);
  }
  .p-sold__hero-inner {
    height: var(--_sold-band-h);
  }
  .p-sold__hero-sub {
    margin-top: var(--_sold-sub-mt);
    font-size: var(--_sold-sub-fs);
  }
  .p-sold__head {
    padding-top: var(--_sold-head-pt);
  }
  .p-sold__head-icon {
    width: var(--_sold-icon);
    height: var(--_sold-icon);
    margin-bottom: var(--_sold-icon-mb);
  }
  .p-sold__head-ttl {
    font-size: var(--_sold-ttl-fs);
    margin-bottom: var(--_sold-ttl-mb);
  }
  .p-sold__grid {
    gap: var(--_sold-grid-gap);
    padding-bottom: var(--_sold-grid-pb);
  }
  .p-sold__body {
    padding-bottom: var(--_sold-body-pb);
  }
}
@media screen and (max-width: 992px) {
  .p-sold__hero {
    height: 600px;
  }
  .p-sold__hero-inner {
    height: 320px;
  }
  .p-sold__head-icon {
    width: 100px;
    height: 100px;
  }
  .p-sold__head-ttl {
    font-size: 34px;
    margin-bottom: 80px;
  }
  .p-sold__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.p-sold {
  /* SP専用調整 */
}
@media screen and (max-width: 768px) {
  .p-sold__hero {
    height: 219px;
  }
  .p-sold__hero-inner {
    height: 100px;
    padding: 20px 24px 0;
  }
  .p-sold__hero-sub {
    display: none;
  }
  .p-sold__hero-en {
    font-size: 24px;
    line-height: 1.1;
    margin-bottom: 0;
  }
  .p-sold__hero-sub-sp {
    display: block;
    padding: 50px 24px 0;
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
    color: #4A4947;
  }
  .p-sold__head {
    padding: 52px 0 0;
    margin-bottom: 50px;
  }
  .p-sold__head-icon {
    width: 53px;
    height: 53px;
    margin-bottom: 20px;
  }
  .p-sold__head-ttl {
    font-size: 16px;
    margin-bottom: 32px;
  }
  .p-sold__grid {
    gap: 20px;
    padding-bottom: 48px;
    padding-inline: 20px;
  }
  .p-sold__body {
    padding-bottom: 64px;
  }
}
.p-sold {
  /* 機能ソリューション：見出しを青に */
}
.p-sold--func .p-sold__head-ttl {
  color: #0068B6;
}
.p-sold--func .p-sold__hero-sub-sp {
  color: #0068B6;
}
.p-sold {
  /* ===== 見出し＋カードを包む背景エリア ===== */
  /* 背景は専用画像（design_solution_bg.jpg）を敷く。下端はl-fnav分の余白を背景込みで確保 */
}
.p-sold__body {
  position: relative;
  padding-bottom: 140px;
  background-color: #F5F5F5;
  background-image: url(../images/solution/design_solution_bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.p-sold {
  /* 機能ソリューション：背景画像のみ切替（背景色は共通#F5F5F5） */
}
.p-sold--func .p-sold__body {
  background-image: url(../images/solution/function_solution_bg.jpg);
}

/* デザインソリューションのカテゴリカード（624×511の横長） */
.c-soldcard a {
  position: relative;
  display: block;
  aspect-ratio: 624/511;
  border-radius: 6px;
  overflow: hidden;
  color: #FFFFFF;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 6px 18px;
}
.c-soldcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
a:hover .c-soldcard__img {
  transform: scale(1.05);
}
.c-soldcard {
  /* 文字背景：黒透過・高さ130px */
}
.c-soldcard__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 26px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
.c-soldcard__ttl {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.c-soldcard__txt {
  font-size: 22px;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-soldcard {
    container-type: inline-size;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-soldcard {
    --_soldcard-band-h: clamp(80px, 20.1863354037cqi, 130px);
    --_soldcard-px: clamp(16px, 4.0372670807cqi, 26px);
    --_soldcard-ttl-fs: clamp(16px, 4.0372670807cqi, 26px);
    --_soldcard-ttl-mb: clamp(6px, 3.1055900621cqi, 20px);
    --_soldcard-txt-fs: clamp(14px, 3.4161490683cqi, 22px);
  }
  .c-soldcard__body {
    height: var(--_soldcard-band-h);
    padding: 0 var(--_soldcard-px);
  }
  .c-soldcard__ttl {
    font-size: var(--_soldcard-ttl-fs);
    margin-bottom: var(--_soldcard-ttl-mb);
  }
  .c-soldcard__txt {
    font-size: var(--_soldcard-txt-fs);
  }
}
@media screen and (max-width: 768px) {
  .c-soldcard__body {
    height: auto;
    padding: 14px 16px;
  }
  .c-soldcard__ttl {
    margin-bottom: 4px;
    font-size: 14px;
  }
  .c-soldcard__txt {
    font-size: 12px;
  }
}

/*========================================================
サービス一覧（①B）
========================================================*/
.p-service {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.p-service__inner {
  width: 100%;
  max-width: min(1368px, var(--container-limit, 1368px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-service__inner {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-service__inner {
  position: relative;
  z-index: 1;
}
.p-service__sec {
  position: relative;
  z-index: 1;
  padding: 80px 0;
}
.p-service__sec:last-child {
  padding-bottom: 120px;
}
.p-service {
  /* 左寄せ小見出し（製品一覧／二次加工一覧） */
}
.p-service__subhead {
  margin-bottom: 36px;
  padding-bottom: 16px;
  border-bottom: 1px solid #D1D1D1;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #4A4947;
}
.p-service__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-service__sec {
    padding: clamp(48px, 4.7619047619vw, 80px) 0;
  }
  .p-service__sec:last-child {
    padding-bottom: clamp(64px, 7.1428571429vw, 120px);
  }
  .p-service__grid {
    gap: clamp(16px, 1.7857142857vw, 30px);
  }
}
@media screen and (max-width: 992px) {
  .p-service__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .p-service__sec {
    padding: 48px 0;
  }
  .p-service__sec:last-child {
    padding-bottom: 64px;
  }
  .p-service__subhead {
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-size: 18px;
  }
  .p-service__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #products .p-service__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 14px;
  }
}

/* 製品カード（画像＋下部ラベル） */
.c-prod a {
  position: relative;
  display: block;
  border-radius: 6px;
  overflow: hidden;
  color: #FFFFFF;
}
.c-prod__img {
  display: block;
  width: 100%;
  aspect-ratio: 300/252;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
a:hover .c-prod__img {
  transform: scale(1.05);
}
.c-prod__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-prod {
    container-type: inline-size;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-prod {
    --_cprod-label-h: clamp(56px, 22.9357798165cqi, 100px);
    --_cprod-label-px: clamp(14px, 5.0458715596cqi, 22px);
  }
  .c-prod__label {
    height: var(--_cprod-label-h);
    padding: 0 var(--_cprod-label-px);
  }
}
@media screen and (max-width: 768px) {
  .c-prod__img {
    aspect-ratio: 145/150;
  }
  .c-prod__label {
    height: 40px;
    padding: 0 12px;
    font-size: 12px;
  }
}

/* 二次加工カード（画像＋グラデ＋見出し＋箇条書き） */
.c-niji a {
  position: relative;
  display: block;
  aspect-ratio: 1/1;
  border-radius: 6px;
  overflow: hidden;
  color: #FFFFFF;
}
.c-niji__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
a:hover .c-niji__img {
  transform: scale(1.05);
}
.c-niji__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 144px;
  padding: 20px 24px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
.c-niji__ttl {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}
.c-niji__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 18px;
}
.c-niji__list li {
  font-size: 13px;
  line-height: 1.7;
}
.c-niji__list li::before {
  content: "・";
}
@media screen and (max-width: 768px) {
  .c-niji a {
    aspect-ratio: 16/9;
  }
  .c-niji__body {
    height: auto;
    padding: 14px 16px;
  }
  .c-niji__ttl {
    margin-bottom: 10px;
    font-size: 14px;
  }
  .c-niji__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
  }
  .c-niji__list li {
    font-size: 11px;
  }
}

/* 全ページ共通の小見出し（左に縦バー）：ソリューション詳細（.wp-block-heading）と同じborder-left実装 */
.p-prod__btitle {
  margin-bottom: 24px;
  padding-left: 14px;
  border-left: 4px solid #545454;
  font-size: 24px;
  font-weight: 500;
  color: #4A4947;
}
@media screen and (max-width: 768px) {
  .p-prod__btitle {
    margin-bottom: 16px;
    padding-left: 10px;
    border-left-width: 3px;
    font-size: 14px;
    color: #545454;
    line-height: 1.5;
  }
}

/* SP専用：ソリューション／製品・二次加工詳細ページのヘッダー直下クイックタブ（横スクロールで同種ページを選択）
   ソリューション詳細ページ：<nav class="p-prod__quicktab"><ul>...</ul></nav>
   製品・二次加工詳細ページ：製品一覧／二次加工一覧を分けるため <nav class="p-prod__quicktab"><div class="p-prod__quicktab-group"><ul>...</ul></div>...</nav> */
.p-prod__quicktab {
  display: none;
}
@media screen and (max-width: 768px) {
  .p-prod__quicktab {
    display: flex;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    background: #2A2A2A;
    scrollbar-width: none;
  }
  .p-prod__quicktab::-webkit-scrollbar {
    display: none;
  }
  .p-prod__quicktab .p-prod__quicktab-group {
    flex-shrink: 0;
  }
  .p-prod__quicktab .p-prod__quicktab-group + .p-prod__quicktab-group {
    border-left: 1px solid rgba(255, 255, 255, 0.3);
  }
  .p-prod__quicktab ul {
    display: flex;
    flex-shrink: 0;
    gap: 10px;
    width: -moz-max-content;
    width: max-content;
    padding: 12px 16px;
  }
  .p-prod__quicktab li {
    flex-shrink: 0;
  }
  .p-prod__quicktab a {
    display: block;
    padding: 2px 8px;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    background: #989796;
    color: #FFFFFF;
    font-size: 12px;
    white-space: nowrap;
  }
  .p-prod__quicktab a.is-current {
    background: #0068B6;
    border-color: #0068B6;
  }
}

/*========================================================
製品詳細（パンチングメタル ②C-1 等）
========================================================*/
.p-prod {
  position: relative;
  isolation: isolate;
  padding: 0 0 120px;
}
.p-prod__layout {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-prod__layout {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-prod__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 350px;
  -moz-column-gap: 0;
       column-gap: 0;
  align-items: start;
}
.p-prod {
  /* ===== メイン ===== */
}
.p-prod__main {
  min-width: 0;
  padding-right: 70px;
  border-right: 1px solid #707070;
}
.p-prod__hero {
  display: block;
  width: 100%;
  border-radius: 6px;
  margin-bottom: 60px;
}
.p-prod__sec {
  margin-bottom: 80px;
}
.p-prod {
  /* ② ラインナップ以下：幅100%のフル幅バンド（白背景・⑦各セクション間140px） */
}
.p-prod__band {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #FFFFFF;
  margin-top: 140px;
  padding: 100px 0;
}
.p-prod__band-in {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-prod__band-in {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-prod {
  /* ⑤ 見出し（左バー 4px #545454） */
  /* 見出し（英字＋和文） */
}
.p-prod__head {
  margin-bottom: 70px;
  padding-bottom: 14px;
  border-bottom: 1px solid #D1D1D1;
}
.p-prod__head .en {
  display: block;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 25px;
  letter-spacing: 0.12em;
  color: #707070;
  margin-bottom: 10px;
}
.p-prod__head .ja {
  font-size: 45px;
  font-weight: 500;
  color: #4A4947;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.p-prod {
  /* ⑥ 本文18px */
}
.p-prod__text {
  font-size: 18px;
  line-height: 2;
  color: #545454;
}
.p-prod__text + .p-prod__text {
  margin-top: 1.4em;
}
.p-prod__text a {
  color: #0068B6;
  text-decoration: underline;
}
.p-prod__text a:hover {
  text-decoration: none;
}
.p-prod {
  /* ⑦ 規格品サイズ：白透過0.7のボックス */
}
.p-prod__sizes {
  margin-top: 28px;
  padding: 50px 80px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.p-prod__size-mat {
  font-size: 24px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 20px;
}
.p-prod__size-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 24px;
}
.p-prod {
  /* ⑧ size-item：padding/borderなし */
}
.p-prod__size-item {
  text-align: center;
}
.p-prod__size-item p {
  font-size: 13px;
  font-weight: 500;
  color: #545454;
  margin-bottom: 15px;
  text-align: left;
  display: block;
}
.p-prod__size-item img {
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-prod {
  /* ラインナップ */
}
.p-prod__lineup {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 40px;
}
.p-prod {
  /* ⑩ 構成：画像キャプション → 画像 → 説明文 に統一 */
}
.p-prod__lineup-item h4 {
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 12px;
}
.p-prod__lineup-item {
  /* No. ＋ 開孔率（左にNo.太字、右に開孔率を縦線区切り） */
}
.p-prod__lineup-item .p-prod__lineup-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.p-prod__lineup-item .p-prod__lineup-head .no {
  font-size: 12px;
  font-weight: 500;
  color: #4A4947;
}
.p-prod__lineup-item .p-prod__lineup-head .ratio {
  flex-shrink: 0;
  padding-left: 10px;
  border-left: 1px solid #D1D1D1;
  font-size: 10px;
  color: #545454;
}
.p-prod__lineup-item a {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  font-size: 12px;
}
.p-prod__lineup-item img {
  display: block;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  transition: transform 0.6s ease;
}
.p-prod__lineup-item a:hover img {
  transform: scale(1.05);
}
.p-prod__lineup-item p {
  font-size: 12px;
  line-height: 1.7;
  color: #545454;
  margin-top: 12px;
}
.p-prod__case-box {
  flex: 1 0 auto;
  padding: 18px 16px 20px;
  background: #EFEFEF;
}
.p-prod__case-box h4 {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #b5b5b5;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #545454;
}
.p-prod__case-box .p-prod__case-use {
  margin: 0 0 14px;
  font-size: 12px;
  color: #545454;
}
.p-prod__case-box .p-prod__case-spec div {
  display: flex;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.6;
  color: #545454;
}
.p-prod__case-box .p-prod__case-spec dt {
  flex: 0 0 6em;
  padding-right: 12px;
  border-right: 1px solid #b5b5b5;
  white-space: nowrap;
}
.p-prod__case-box .p-prod__case-spec dd {
  padding-left: 12px;
}
.p-prod {
  /* 樹脂パンチング加工事例：c-case-sliderの拡張（6件表示・矢印で7件目までスライド）
     ※gap(24px)はc-case-slider本体（_lower.scss）の$gapに合わせる */
}
.p-prod__case-slider .c-case-slider__item {
  flex: 0 0 calc((100% - 120px) / 6);
  display: flex;
  flex-direction: column;
}
.p-prod__case-slider .c-case-slider__thumb {
  margin-bottom: 0;
  border-radius: 0;
}
.p-prod__case-slider .c-case-slider__thumb img {
  aspect-ratio: 4/3;
  border-radius: 0;
}
@media screen and (max-width: 1200px) {
  .p-prod__case-slider .c-case-slider__item {
    flex-basis: calc((100% - 48px) / 3);
  }
}
@media screen and (max-width: 992px) {
  .p-prod__case-slider .c-case-slider__item {
    flex-basis: calc((100% - 24px) / 2);
  }
}
@media screen and (max-width: 768px) {
  .p-prod__case-slider .c-case-slider__viewport {
    padding: 0 74px;
  }
  .p-prod__case-slider .c-case-slider__item {
    flex-basis: 100%;
  }
}
.p-prod__note {
  margin-top: 50px;
  font-size: 18px;
  line-height: 1.8;
  color: #545454;
}
@media screen and (max-width: 768px) {
  .p-prod__note {
    font-size: 10px;
  }
}
@media screen and (max-width: 768px) {
  .p-prod__note-ttl {
    font-size: 12px;
  }
}
.p-prod__note a {
  text-decoration: underline;
}
.p-prod__note a:hover {
  text-decoration: none;
}
.p-prod {
  /* note 冒頭の見出し（●の行）を太字見出しに */
}
.p-prod__note-ttl {
  display: block;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 6px;
}
.p-prod {
  /* お問い合わせ〜納品の流れ（6ステップ） */
}
.p-prod__flow {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 85px;
}
.p-prod__flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr;
  /* p-prod__flow-head の下に下向き▼（最後のステップは不要） */
}
.p-prod__flow-step:not(:last-child)::after {
  content: "▼";
  position: absolute;
  left: 100px;
  top: 100%;
  margin-top: 20px;
  transform: translateX(-50%);
  color: #0068B6;
  font-size: 45px;
  line-height: 1;
}
.p-prod__flow-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  background: #0068B6;
  color: #FFFFFF;
  text-align: center;
}
.p-prod__flow-no {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
.p-prod__flow-ttl {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .p-prod__flow-ttl {
    font-size: 15px;
  }
}
@media screen and (max-width: 768px) {
  .p-prod__flow-ttl br {
    display: none;
  }
}
.p-prod__flow-body {
  padding: 0 16px;
  border-radius: 0 6px 6px 0;
}
@media screen and (max-width: 768px) {
  .p-prod__flow-body {
    padding: 10px 0 0;
  }
}
.p-prod__flow-body p {
  font-size: 18px;
  line-height: 1.9;
  color: #545454;
}
@media screen and (max-width: 768px) {
  .p-prod__flow-body p {
    font-size: 12px;
  }
}
.p-prod__flow-body p a {
  color: #0068B6;
  text-decoration: underline;
}
.p-prod__flow-body p a:hover {
  text-decoration: none;
}
.p-prod__flow-fig {
  margin: 18px 0 0;
  display: block;
}
.p-prod__flow-fig img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.p-prod__flow-note {
  margin-top: 14px;
  font-size: 14px;
  color: #4A4947;
}
.p-prod {
  /* 成形・切削加工：セクション内の説明図（見出し→図→本文・1カラムは幅100%） */
}
.p-prod__figure {
  margin: 8px 0 24px;
}
.p-prod__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.p-prod__figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  color: #545454;
}
.p-prod {
  /* 画像グリッド（事例の詳細写真など 3列） */
}
.p-prod__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.p-prod__grid img {
  display: block;
  width: 100%;
  aspect-ratio: 295/175;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.p-prod__grid img:hover {
  opacity: 0.85;
}
@media screen and (max-width: 992px) {
  .p-prod__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.p-prod {
  /* ===== アコーディオン（成形・切削加工：○○一覧／製作事例） ===== */
}
.p-prod__acc {
  margin-top: 28px;
  border: 1px solid #D1D1D1;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.7);
}
.p-prod__acc + .p-prod__acc {
  margin-top: 20px;
}
.p-prod__acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 22px 32px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 20px;
  font-weight: 500;
  color: #4A4947;
  text-align: left;
  cursor: pointer;
}
.p-prod__acc-head::after {
  content: "＋";
  flex: none;
  color: #0068B6;
  font-size: 26px;
  line-height: 1;
}
.p-prod__acc.is-open .p-prod__acc-head::after {
  content: "×";
}
.p-prod__acc-body {
  display: none;
  padding: 0 32px 28px;
}
.p-prod__acc.is-open .p-prod__acc-body {
  display: block;
}
.p-prod {
  /* アコーディオン内：画像左＋（見出し＋本文）右の定義リスト */
}
.p-prod__deflist-item {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 28px 0;
  border-top: 1px solid #D1D1D1;
}
.p-prod__deflist-item:first-child {
  padding-top: 8px;
  border-top: none;
}
.p-prod__deflist-item img {
  width: 32%;
  flex: none;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.p-prod__deflist-item > div {
  flex: 1;
  min-width: 0;
}
.p-prod__deflist-item h4 {
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 12px;
}
.p-prod__deflist-item p {
  font-size: 12px;
  line-height: 1.85;
  color: #545454;
}
.p-prod {
  /* ===== エキスパンドメタル等：個別セクション ===== */
  /* 小見出し */
}
.p-prod__subttl {
  margin: 0 0 22px;
  font-size: 18px;
  font-weight: 500;
  color: #4A4947;
}
.p-prod__link {
  margin: 10px 0 24px;
  font-size: 16px;
}
.p-prod__link a {
  color: #0068B6;
  text-decoration: underline;
  word-break: break-all;
}
.p-prod {
  /* 内外装用アルミ：製品コード画像（5枚横並び） */
}
.p-prod__codes {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.p-prod__codes figure {
  margin: 0;
}
.p-prod__codes img {
  width: 100%;
  aspect-ratio: 2/1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.p-prod__codes figcaption {
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  color: #545454;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
}
.p-prod {
  /* ① 追加工・表面処理：枠内の画像左コンパクト行 */
}
.p-prod__treat-box {
  margin-top: 28px;
  padding: 50px 80px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}
.p-prod__treat {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  padding: 28px 0;
}
.p-prod__treat + .p-prod__treat {
  border-top: 1px solid #D1D1D1;
}
.p-prod__treat h4 {
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 20px;
  width: 100%;
}
.p-prod__treat img {
  width: 30%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.p-prod__treat p {
  width: 70%;
  font-size: 12px;
  line-height: 1.85;
  color: #545454;
  padding-left: 30px;
}
.p-prod {
  /* テキスト左＋画像右の横並び行（treat-box 内で使用） */
}
.p-prod__treat-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 28px 0;
}
.p-prod__treat-row + .p-prod__treat-row {
  border-top: 1px solid #D1D1D1;
}
.p-prod__treat-row > div {
  flex: 1;
}
.p-prod__treat-row h4 {
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 16px;
}
.p-prod__treat-row p {
  font-size: 12px;
  line-height: 1.85;
  color: #545454;
}
.p-prod__treat-row p + p {
  margin-top: 14px;
}
.p-prod__treat-row img {
  width: 30%;
  flex-shrink: 0;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.p-prod {
  /* treat-box 内：見出し＋リード文 */
}
.p-prod__treat-lead h4 {
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 16px;
}
.p-prod__treat-lead p {
  font-size: 12px;
  line-height: 1.85;
  color: #545454;
}
.p-prod {
  /* treat-box 内：規格品グリッド（2カラム） */
}
.p-prod__treat-grid2 {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  align-items: start;
}
.p-prod__treat-grid2 figure {
  margin: 0;
}
.p-prod__treat-grid2 {
  /* 見出しは1カラム（全幅）、画像は2カラム */
}
.p-prod__treat-grid2 h4,
.p-prod__treat-grid2 h5 {
  grid-column: 1/-1;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 0;
}
.p-prod__treat-grid2 h4 {
  font-size: 15px;
}
.p-prod__treat-grid2 h5 {
  font-size: 18px;
}
.p-prod__treat-grid2 img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}
.p-prod__treat-grid2 figcaption,
.p-prod__treat-grid2 p {
  line-height: 1.7;
  color: #545454;
}
.p-prod__treat-grid2 figcaption {
  font-size: 18px;
}
.p-prod__treat-grid2 p {
  font-size: 12px;
}
.p-prod {
  /* Peak型サブタイプの画像ギャラリー（パネル写真＋断面図＋設置写真） */
}
.p-prod__peak-imgs {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}
.p-prod__peak-imgs figure {
  margin: 0;
}
.p-prod__peak-imgs img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.p-prod {
  /* 音響性能と強度：4カラム・縦長（212:275） */
}
.p-prod__peak-imgs--4 {
  grid-template-columns: repeat(4, 1fr);
}
.p-prod__peak-imgs--4 img {
  aspect-ratio: 212/275;
}
.p-prod {
  /* 1つの treat-box 内に複数サブタイプを並べる際の区切り */
}
.p-prod__peak-block + .p-prod__peak-block {
  margin-top: 80px;
}
.p-prod {
  /* ② 基礎知識：枠内ボックス */
}
.p-prod__spec-box {
  margin-top: 28px;
  padding: 50px 80px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}
.p-prod {
  /* 各部の名称と目方向（2図） */
}
.p-prod__spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.p-prod__spec-item h5 {
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 14px;
}
.p-prod__spec-item img {
  width: 100%;
  height: auto;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
}
.p-prod__spec-list {
  margin-top: 14px;
}
.p-prod__spec-list li {
  font-size: 13px;
  line-height: 1.9;
  color: #545454;
}
.p-prod__spec-list {
  /* ラベル付き定義リスト（金網 各部の名称） */
}
.p-prod__spec-list span {
  display: inline-block;
  width: 5em;
  font-weight: 500;
  color: #4A4947;
}
.p-prod__namefig .p-prod__spec-list {
  margin-top: 0;
}
.p-prod__namefig .p-prod__spec-list li {
  font-size: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #D1D1D1;
}
.p-prod__namefig .p-prod__spec-list li:last-child {
  border-bottom: none;
}
.p-prod {
  /* JIS規格タイプ（2カラム：見出し→画像→本文） */
}
.p-prod__jis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.p-prod__jis h4 {
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 12px;
}
.p-prod__jis img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  margin-bottom: 14px;
}
.p-prod__jis p {
  font-size: 12px;
  line-height: 1.9;
  color: #545454;
}
.p-prod {
  /* 金網のオーダー製作：リード文＋右側に画像（横並び） */
}
.p-prod__order-intro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 8px;
}
.p-prod__order-fig {
  margin: 0;
}
.p-prod__order-fig img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.p-prod {
  /* 金網のオーダー製作：白透過ボックス内に項目を縦並び */
}
.p-prod__order-box {
  margin-top: 28px;
  padding: 24px 80px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}
.p-prod__order {
  padding: 28px 0;
}
.p-prod__order + .p-prod__order {
  border-top: 1px solid #D1D1D1;
}
.p-prod__order h4 {
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 14px;
}
.p-prod__order p {
  font-size: 12px;
  line-height: 1.9;
  color: #545454;
}
.p-prod {
  /* 切断加工：見出しは全幅、本文左・画像右で横並び */
}
.p-prod__order-row {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.p-prod__order-row p {
  min-width: 0;
}
.p-prod__order-row img {
  flex: none;
  width: 40%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.p-prod {
  /* 各部の名称：図（左）＋定義リスト（右）。上端をそろえる */
}
.p-prod__namefig {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}
.p-prod__namefig figure {
  margin: 0;
}
.p-prod__namefig img {
  width: 100%;
  height: auto;
}
.p-prod__namefig-body .p-prod__text {
  margin-bottom: 16px;
}
.p-prod {
  /* JIS規格テーブル */
}
.p-prod__jis-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 30px;
}
.p-prod__jis-table th,
.p-prod__jis-table td {
  padding: 14px 20px;
  border: 1px solid #D1D1D1;
  font-size: 18px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.5;
}
.p-prod__jis-table th {
  width: 180px;
  background: #8F8F8F;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
}
.p-prod__jis-table td {
  background: #FFFFFF;
  color: #545454;
}
.p-prod {
  /* ===== WordPressブロックエディタの出力（事例詳細などthe_content()の本文）を既存デザインに合わせる =====
     （見出し=.p-prod__btitle／本文=.p-prod__text／表=.p-prod__jis-table／画像グリッド=.p-prod__grid 相当） */
}
.p-prod__sec .wp-block-heading {
  margin-top: 130px;
  margin-bottom: 24px;
  padding-left: 14px;
  border-left: 4px solid #545454;
  font-size: 24px;
  font-weight: 500;
  color: #4A4947;
}
.p-prod__sec .wp-block-heading:first-child {
  margin-top: 0;
}
.p-prod__sec .wp-block-paragraph {
  font-size: 18px;
  line-height: 2;
  color: #545454;
}
.p-prod__sec .wp-block-paragraph + .p-prod__sec .wp-block-paragraph {
  margin-top: 1.4em;
}
.p-prod__sec .wp-block-paragraph a {
  color: #0068B6;
  text-decoration: underline;
}
.p-prod__sec .wp-block-paragraph a:hover {
  text-decoration: none;
}
.p-prod__sec .wp-block-paragraph.has-small-font-size {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.8;
}
.p-prod__sec .wp-block-columns,
.p-prod__sec .wp-block-table {
  margin: 30px 0 0;
}
.p-prod__sec figure.wp-block-image {
  flex-grow: 0 !important;
}
.p-prod__sec table {
  width: 100%;
  border-collapse: collapse;
}
.p-prod__sec table th,
.p-prod__sec table td {
  padding: 14px 20px;
  border: 1px solid #D1D1D1;
  font-size: 18px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.5;
  background: #FFFFFF;
  color: #545454;
}
.p-prod__sec table th,
.p-prod__sec table td:first-child {
  width: 180px;
  background: #8F8F8F;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
}
.p-prod__sec .wp-block-gallery {
  margin-top: 20px;
}
.p-prod__sec .wp-block-gallery .wp-block-image {
  margin: 0;
}
.p-prod__sec .wp-block-gallery img {
  display: block;
  width: 100%;
  padding: 5px;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.p-prod__sec .wp-block-gallery img:hover {
  opacity: 0.85;
}
@media screen and (max-width: 992px) {
  .p-prod__sec .wp-block-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
.p-prod__sec .wp-block-buttons {
  margin-top: 20px;
}
.p-prod__sec .wp-block-paragraph {
  margin-top: 20px;
}
.p-prod__sec .wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  height: 60px;
  padding: 12px 22px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #707070;
  background: transparent;
  border: 1px solid #707070;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.p-prod__sec .wp-block-button__link::after {
  content: "";
  width: 50%;
  height: 10px;
  background: url(../../assets/images/common/link_arrow_gray.png) no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  bottom: 8px;
  right: -24px;
  transition: right 0.3s ease;
}
.p-prod__sec .wp-block-button__link:hover {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.5) 100%);
  opacity: 1;
}
.p-prod__sec .wp-block-button__link:hover::after {
  right: -50px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-prod__sec .wp-block-button__link {
    min-width: clamp(120px, 9.5238095238vw, 160px);
    height: clamp(44px, 3.5714285714vw, 60px);
    padding: clamp(8px, 0.7142857143vw, 12px) clamp(14px, 1.3095238095vw, 22px);
    font-size: clamp(13px, 1.1904761905vw, 20px);
    white-space: nowrap;
  }
  .p-prod__sec .wp-block-column:has(> .wp-block-buttons:only-child) {
    flex: 0 0 max-content;
  }
}
@media screen and (max-width: 768px) {
  .p-prod__sec .wp-block-columns,
  .p-prod__sec .wp-block-gallery {
    grid-template-columns: 1fr;
  }
}
.p-prod {
  /* ラインナップ4カラム */
}
.p-prod__lineup--4 {
  grid-template-columns: repeat(4, 1fr);
}
.p-prod {
  /* ラインナップ画像高さ180px固定 */
}
.p-prod__lineup--h180 .p-prod__lineup-item img {
  aspect-ratio: auto;
  height: 90px;
}
.p-prod__lineup--h180 .p-prod__lineup-item.--free img {
  aspect-ratio: auto;
  height: 180px;
}
.p-prod {
  /* ラインナップ画像を正方形に */
}
.p-prod__lineup--square .p-prod__lineup-item img {
  aspect-ratio: 1/1;
}
.p-prod {
  /* ラインナップ2カラム（項目を2列で並べ、各項目内に板厚違いの画像を2枚表示） */
}
.p-prod__lineup--2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 100px;
}
.p-prod__lineup--2 .p-prod__lineup-item img {
  aspect-ratio: 342/180;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-prod {
  /* エンボス ラインナップ：板厚違い（1.5mm／2.0mm）を2枚並べてリンク付きで表示 */
}
.p-prod__lineup-imgs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}
.p-prod__lineup-imgs a {
  display: block;
  overflow: hidden;
  border-radius: 4px;
}
.p-prod__lineup-imgs img {
  transition: transform 0.6s ease;
}
.p-prod__lineup-imgs a:hover img {
  transform: scale(1.05);
}
.p-prod__lineup-imgs span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #545454;
}
@media screen and (max-width: 768px) {
  .p-prod__lineup-imgs span {
    font-size: 10px;
  }
}
.p-prod {
  /* 素材（p-sol__case-bodyと同様の形：画像左＋タイトル区切り線＋本文） */
}
.p-prod__mat {
  display: flex;
  padding: 24px 0;
}
.p-prod__mat:first-of-type {
  padding-top: 0;
}
.p-prod__mat img {
  width: 200px;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  flex: none;
}
.p-prod__mat > div {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}
.p-prod__mat h4 {
  font-size: 25px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 40px;
  border-bottom: 1px solid #D1D1D1;
}
.p-prod__mat p {
  font-size: 16px;
  line-height: 1.9;
  color: #545454;
  padding-left: 40px;
}
.p-prod__mat-btn {
  margin-top: 28px;
  text-align: right;
}
.p-prod {
  /* カタログ */
}
.p-prod__catalog {
  position: relative;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  align-items: start;
  padding-bottom: 80px;
}
.p-prod__catalog-cover {
  width: 240px;
  height: auto;
}
@media screen and (max-width: 768px) {
  .p-prod__catalog-cover {
    width: 200px;
    margin: 0 auto;
  }
}
.p-prod__catalog-body {
  display: flex;
  flex-direction: column;
}
.p-prod__catalog-label {
  font-size: 16px;
  color: #545454;
  margin-bottom: 6px;
}
.p-prod__catalog-name {
  font-size: 22px;
  font-weight: 500;
  color: #4A4947;
  text-decoration: underline;
  text-underline-offset: 6px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid #D1D1D1;
}
.p-prod__catalog-text {
  font-size: 16px;
  line-height: 1.9;
  color: #545454;
  margin-bottom: 28px;
}
.p-prod__catalog-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.p-prod__catalog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 50px;
  padding: 0 24px;
  font-size: 16px;
  color: #FFFFFF;
  border-radius: 2px;
}
.p-prod__catalog-btn:hover {
  opacity: 0.88;
}
.p-prod__catalog-btn--dark {
  background: #383838;
}
.p-prod__catalog-btn--gray {
  background: #707070;
}
.p-prod {
  /* お困りごとCTA（③ 背景なし） */
}
.p-prod__trouble {
  padding: 140px 0 70px;
  background: none;
  text-align: center;
}
.p-prod__trouble-ttl {
  font-size: 36px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 40px;
}
.p-prod__trouble-list {
  max-width: 1000px;
  margin: 0 auto 44px;
  border-top: 1px solid #D1D1D1;
}
.p-prod__trouble-list li {
  padding: 26px 0;
  border-bottom: 1px solid #D1D1D1;
  font-size: 20px;
  color: #545454;
}
.p-prod__trouble-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 36px;
  font-weight: 500;
  color: #0068B6;
  margin-bottom: 70px;
}
.p-prod__trouble-lead::before {
  content: "✓";
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0068B6;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.p-prod {
  /* ⑫ 課題解決カード（画像＋未バッジ＋番号・見出し・説明） */
}
.p-prod__feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 36px;
  padding: 70px 100px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}
.p-prod__feat {
  background: none;
  /* ③ 背景なし */
  border-radius: 6px;
  overflow: hidden;
  text-align: left;
}
.p-prod__feat-img img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-prod__feat-body {
  padding: 18px 4px 0;
}
.p-prod__feat-body h5 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 500;
  color: #0068B6;
  margin-bottom: 12px;
}
.p-prod__feat-body .no {
  flex: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #0068B6;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 500;
}
.p-prod__feat-body p {
  font-size: 20px;
  line-height: 1.9;
  color: #545454;
}
.p-prod__trouble-cta {
  background: #0068B6;
  color: #FFFFFF;
  padding: 40px 24px 24px;
  border-radius: 6px;
}
.p-prod__trouble-cta p {
  font-size: 28px;
  margin-bottom: 25px;
}
.p-prod__trouble-cta a {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 20px;
  text-decoration: underline;
}
.p-prod__trouble-cta a:hover {
  text-decoration: none;
}
.p-prod {
  /* ===== サイドバー（②スクロール追従・③デザイン） =====
     ヘッダー(.is-scrolled時 高さ88px)の下に余白を持たせてstickyで追従させ、
     .p-prod__layout（2カラム部分）の下端＝ラインナップ・事例紹介など
     フル幅パーツの手前で自然に止まる。 */
}
.p-prod__side {
  display: flex;
  flex-direction: column;
  padding-left: 50px;
  position: sticky;
  top: 108px;
  align-self: start;
}
.p-prod__side-label {
  font-size: 13px;
  color: #545454;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  margin-top: 30px;
}
.p-prod__side-label:first-child {
  margin-top: 0;
}
.p-prod {
  /* 現在ページ（p-prod__nav / p-prod__related とは別枠のリンク表示） */
}
.p-prod__current {
  margin-bottom: 20px;
}
.p-prod__current a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #b5b5b5;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 5px;
}
.p-prod__current a::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.p-prod__current {
  /* ソリューションサイドバーのみ：リンクではなく見出しとして表示（矢印なし） */
}
.p-prod__current--label {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  background: #b5b5b5;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  border-radius: 5px;
}
.p-prod {
  /* 関連情報ナビ（背景・枠線なし） */
}
.p-prod__nav {
  background: none;
}
.p-prod__nav li {
  border-bottom: 1px solid #D1D1D1;
}
.p-prod__nav li:last-child {
  border-bottom: none;
}
.p-prod__nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  font-size: 16px;
  color: #4A4947;
  line-height: 1.5;
}
.p-prod__nav a::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border: solid #707070;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.p-prod__nav a:hover {
  background: #F2F2F2;
  color: #0068B6;
}
.p-prod {
  /* 関連カテゴリ（グレーブロック・白文字）／事例サイドバーの関連情報ナビ（p-prod__nav--boxed）と共通デザイン */
}
.p-prod__related, .p-prod__nav--boxed {
  border-radius: 4px;
  background: #b5b5b5;
}
.p-prod__related li, .p-prod__nav--boxed li {
  border-bottom: none;
}
.p-prod__related a, .p-prod__nav--boxed a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
}
.p-prod__related a::after, .p-prod__nav--boxed a::after {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border: solid #FFFFFF;
  border-width: 2px 2px 0 0;
  transform: rotate(45deg);
}
.p-prod__related a:hover, .p-prod__nav--boxed a:hover {
  background: rgba(0, 0, 0, 0.08);
}
.p-prod {
  /* CTAボタン */
}
.p-prod__side-cta {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-prod__side-note {
  margin: 0 0 4px;
  padding-left: 12px;
  border-left: 3px solid #383838;
  font-size: 13px;
  line-height: 1.4;
  color: #4A4947;
}
.p-prod__side-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 16px;
  background: #4094D4;
  color: #FFFFFF;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.p-prod__side-btn small {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.88;
}
.p-prod__side-btn:hover {
  opacity: 0.88;
}
.p-prod__side-btn {
  /* パンチングメタルご相談ボタン（関連カテゴリ下） */
}
.p-prod__side-btn--mt {
  margin-top: 28px;
}
.p-prod__side-btn {
  /* お見積依頼（濃いブルー） */
}
.p-prod__side-btn--dark {
  background: #0068B6;
}
.p-prod {
  /* ===== レスポンシブ ===== */
}
@media screen and (max-width: 1440px) {
  .p-prod__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .p-prod {
    /* 縦積み時は区切り罫線・インデントを解除 */
  }
  .p-prod__main {
    padding-right: 0;
    border-right: none;
  }
  .p-prod__side {
    padding-left: 0;
    position: static;
  }
}
.p-prod {
  /* 可変（769〜1679px）：1680px時のレイアウトを画面幅に比例して縮小。本文（13〜20px）は固定、
     見出し・幅・余白・画像サイズを可変にする。992px以下はこの後の$breakpoint-sのタブレット用の値が優先 */
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-prod, [class*=p-prod__] {
    --_prod-hero-mb: clamp(0px, 3.5714285714vw, 60px);
    --_prod-sec-mb: clamp(0px, 4.7619047619vw, 80px);
    --_prod-band-mt: clamp(0px, 8.3333333333vw, 140px);
    --_prod-band-py: clamp(0px, 5.9523809524vw, 100px);
    --_prod-head-mb: clamp(0px, 4.1666666667vw, 70px);
    --_prod-head-en-fs: clamp(16px, 1.4880952381vw, 25px);
    --_prod-head-ja-fs: clamp(26px, 2.6785714286vw, 45px);
    --_prod-sizes-py: clamp(0px, 2.9761904762vw, 50px);
    --_prod-sizes-px: clamp(0px, 4.7619047619vw, 80px);
    --_prod-sizes-gap: clamp(0px, 2.380952381vw, 40px);
    --_prod-size-mat-fs: clamp(18px, 1.4285714286vw, 24px);
    --_prod-lineup-gap-y: clamp(0px, 1.1904761905vw, 20px);
    --_prod-lineup-gap-x: clamp(0px, 2.380952381vw, 40px);
    --_prod-lineup2-gap-x: clamp(0px, 5.9523809524vw, 100px);
    --_prod-flow-gap: clamp(0px, 5.0595238095vw, 85px);
    --_prod-flow-head-w: clamp(0px, 11.9047619048vw, 200px);
    --_prod-flow-arrow-fs: clamp(28px, 2.6785714286vw, 45px);
    --_prod-acc-px: clamp(0px, 1.9047619048vw, 32px);
    --_prod-acc-icon-fs: clamp(20px, 1.5476190476vw, 26px);
    --_prod-btitle-mt: clamp(0px, 7.7380952381vw, 130px);
    --_prod-btitle-fs: clamp(18px, 1.4285714286vw, 24px);
    --_prod-mat-ttl-fs: clamp(18px, 1.4880952381vw, 25px);
    --_prod-mat-indent: clamp(0px, 2.380952381vw, 40px);
    --_prod-catalog-w: clamp(160px, 14.2857142857vw, 240px);
    --_prod-trouble-pt: clamp(0px, 8.3333333333vw, 140px);
    --_prod-trouble-pb: clamp(0px, 4.1666666667vw, 70px);
    --_prod-trouble-ttl-fs: clamp(24px, 2.1428571429vw, 36px);
    --_prod-trouble-ttl-mb: clamp(0px, 2.380952381vw, 40px);
    --_prod-trouble-list-w: clamp(0px, 59.5238095238vw, 1000px);
    --_prod-trouble-item-py: clamp(0px, 1.5476190476vw, 26px);
    --_prod-trouble-lead-fs: clamp(24px, 2.1428571429vw, 36px);
    --_prod-trouble-lead-mb: clamp(0px, 4.1666666667vw, 70px);
    --_prod-trouble-check: clamp(28px, 2.380952381vw, 40px);
    --_prod-feats-py: clamp(0px, 4.1666666667vw, 70px);
    --_prod-feats-px: clamp(0px, 5.9523809524vw, 100px);
    --_prod-feats-gap: clamp(0px, 1.4285714286vw, 24px);
    --_prod-feat-ttl-fs: clamp(18px, 1.4285714286vw, 24px);
    --_prod-cta-fs: clamp(20px, 1.6666666667vw, 28px);
  }
  .p-prod__hero {
    margin-bottom: var(--_prod-hero-mb);
  }
  .p-prod__sec {
    margin-bottom: var(--_prod-sec-mb);
  }
  .p-prod__sec .wp-block-heading {
    margin-top: var(--_prod-btitle-mt);
    font-size: var(--_prod-btitle-fs);
  }
  .p-prod__sec .wp-block-heading:first-child {
    margin-top: 0;
  }
  .p-prod__band {
    margin-top: var(--_prod-band-mt);
    padding: var(--_prod-band-py) 0;
  }
  .p-prod__head {
    margin-bottom: var(--_prod-head-mb);
  }
  .p-prod__head .en {
    font-size: var(--_prod-head-en-fs);
  }
  .p-prod__head .ja {
    font-size: var(--_prod-head-ja-fs);
  }
  .p-prod__sizes {
    padding: var(--_prod-sizes-py) var(--_prod-sizes-px);
    gap: var(--_prod-sizes-gap);
  }
  .p-prod__size-mat {
    font-size: var(--_prod-size-mat-fs);
  }
  .p-prod__lineup {
    gap: var(--_prod-lineup-gap-y) var(--_prod-lineup-gap-x);
  }
  .p-prod__lineup--2 {
    gap: var(--_prod-lineup-gap-y) var(--_prod-lineup2-gap-x);
  }
  .p-prod__flow {
    gap: var(--_prod-flow-gap);
  }
  .p-prod__flow-step {
    grid-template-columns: var(--_prod-flow-head-w) 1fr;
  }
  .p-prod__flow-step:not(:last-child)::after {
    left: calc(var(--_prod-flow-head-w) / 2);
    font-size: var(--_prod-flow-arrow-fs);
  }
  .p-prod__acc-head {
    padding-left: var(--_prod-acc-px);
    padding-right: var(--_prod-acc-px);
  }
  .p-prod__acc-head::after {
    font-size: var(--_prod-acc-icon-fs);
  }
  .p-prod__acc-body {
    padding-left: var(--_prod-acc-px);
    padding-right: var(--_prod-acc-px);
  }
  .p-prod__mat h4 {
    font-size: var(--_prod-mat-ttl-fs);
    padding-left: var(--_prod-mat-indent);
  }
  .p-prod__mat p {
    padding-left: var(--_prod-mat-indent);
  }
  .p-prod__catalog {
    grid-template-columns: var(--_prod-catalog-w) 1fr;
  }
  .p-prod__trouble {
    padding: var(--_prod-trouble-pt) 0 var(--_prod-trouble-pb);
  }
  .p-prod__trouble-ttl {
    font-size: var(--_prod-trouble-ttl-fs);
    margin-bottom: var(--_prod-trouble-ttl-mb);
  }
  .p-prod__trouble-list {
    max-width: var(--_prod-trouble-list-w);
  }
  .p-prod__trouble-list li {
    padding: var(--_prod-trouble-item-py) 0;
  }
  .p-prod__trouble-lead {
    font-size: var(--_prod-trouble-lead-fs);
    margin-bottom: var(--_prod-trouble-lead-mb);
  }
  .p-prod__trouble-lead::before {
    width: var(--_prod-trouble-check);
    height: var(--_prod-trouble-check);
  }
  .p-prod__feats {
    gap: var(--_prod-feats-gap);
    padding: var(--_prod-feats-py) var(--_prod-feats-px);
  }
  .p-prod__feat-body h5 {
    font-size: var(--_prod-feat-ttl-fs);
  }
  .p-prod__trouble-cta p {
    font-size: var(--_prod-cta-fs);
  }
  .p-prod__side-btn, .p-prod__side-note, .p-prod__related a {
    line-height: 1.5;
  }
}
.p-prod {
  /* 993〜1679px：メイン＋サイドバーの2カラムを保ったまま比例縮小する
     （上の$breakpoint-lの1440px以下の1カラム化を置き換え。サイドバーのスクロール追従も維持）。
     画像のサイズ指定もここで可変にする（タブレット幅は縦積みで別の大きさになるため対象外） */
}
@media screen and (min-width: 992.02px) and (max-width: 1679.98px) {
  .p-prod, [class*=p-prod__] {
    --_prod-side-w: clamp(240px, 20.8333333333vw, 350px);
    --_prod-main-pr: clamp(0px, 4.1666666667vw, 70px);
    --_prod-side-pl: clamp(0px, 2.9761904762vw, 50px);
    --_prod-mat-img: clamp(120px, 11.9047619048vw, 200px);
  }
  .p-prod__layout {
    grid-template-columns: 1fr var(--_prod-side-w);
    gap: 0;
  }
  .p-prod__main {
    padding-right: var(--_prod-main-pr);
    border-right: 1px solid #707070;
  }
  .p-prod__side {
    padding-left: var(--_prod-side-pl);
    position: sticky;
  }
  .p-prod__mat img {
    width: var(--_prod-mat-img);
    height: var(--_prod-mat-img);
  }
  .p-prod__catalog-cover {
    width: var(--_prod-catalog-w);
  }
  .p-prod__side-btn {
    font-size: min(16px, (var(--_prod-side-w) - var(--_prod-side-pl) - 32px) / 13.8);
  }
  .p-prod__side-note {
    font-size: min(13px, (var(--_prod-side-w) - var(--_prod-side-pl) - 26px) / 17.2);
  }
  .p-prod__flow-ttl {
    font-size: min(20px, (var(--_prod-flow-head-w) - 32px) / 7.4);
  }
}
@media screen and (max-width: 992px) {
  .p-prod__sizes {
    padding: 28px 24px;
  }
  .p-prod__band {
    margin-top: 80px;
    padding: 56px 0;
  }
  .p-prod__size-grid {
    grid-template-columns: 1fr;
  }
  .p-prod__lineup {
    grid-template-columns: 1fr;
  }
  .p-prod__lineup-imgs {
    grid-template-columns: 1fr;
  }
  .p-prod__feats {
    grid-template-columns: 1fr;
  }
  .p-prod__mat {
    flex-direction: column;
    gap: 16px;
  }
  .p-prod__mat h4 {
    padding-left: 0;
  }
  .p-prod__mat p {
    padding-left: 0;
    padding-right: 0;
  }
  .p-prod__catalog {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }
  .p-prod__spec {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-prod__jis {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .p-prod__lineup--4 {
    grid-template-columns: 1fr 1fr;
  }
  .p-prod__codes {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-prod__treat {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .p-prod__treat img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/10;
  }
  .p-prod__treat-box {
    padding: 0 20px;
  }
  .p-prod__treat-row {
    flex-direction: column;
    gap: 16px;
  }
  .p-prod__treat-row img {
    width: 100%;
  }
  .p-prod__peak-imgs {
    grid-template-columns: 1fr 1fr;
  }
  .p-prod__treat-grid2 {
    grid-template-columns: 1fr;
  }
  .p-prod__spec-box {
    padding: 24px 20px;
  }
  .p-prod__order-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .p-prod__order-box {
    padding: 0 20px;
  }
  .p-prod__order-row {
    flex-direction: column;
    gap: 16px;
  }
  .p-prod__order-row img {
    width: 100%;
  }
  .p-prod__deflist-item {
    flex-direction: column;
    gap: 14px;
  }
  .p-prod__deflist-item img {
    width: 100%;
    aspect-ratio: 16/10;
  }
  .p-prod__acc-head {
    padding: 18px 20px;
    font-size: 17px;
  }
  .p-prod__acc-body {
    padding: 0 20px 24px;
  }
  .p-prod__flow-step {
    grid-template-columns: 1fr;
    border: none;
  }
  .p-prod__flow-step:not(:last-child)::after {
    left: 50%;
  }
  .p-prod__flow-head {
    flex-direction: row;
    gap: 16px;
    padding: 16px;
  }
  .p-prod__flow-body {
    padding: 24px 0;
  }
  .p-prod__namefig {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-prod__jis-table th,
  .p-prod__jis-table td {
    padding: 10px 12px;
    font-size: 14px;
  }
  .p-prod__jis-table th {
    width: 130px;
  }
}
.p-prod {
  /* SP調整（見出し18-20px・本文12-13px） */
}
@media screen and (max-width: 768px) {
  .p-prod {
    padding-bottom: 64px;
  }
  .p-prod__layout {
    padding-inline: 15px;
  }
  .p-prod__hero {
    margin-bottom: 32px;
  }
  .p-prod__sec {
    margin-bottom: 40px;
  }
  .p-prod__sec .wp-block-heading {
    margin-top: 32px;
    margin-bottom: 16px;
    border-left-width: 3px;
    font-size: 14px;
    line-height: 1.5;
    color: #545454;
  }
  .p-prod__sec .wp-block-paragraph {
    font-size: 12px;
    line-height: 1.9;
    color: #4A4947;
  }
  .p-prod__sec table th,
  .p-prod__sec table td {
    padding: 10px 12px;
    font-size: 12px;
  }
  .p-prod__sec table th,
  .p-prod__sec table td:first-child {
    width: 100px;
  }
  .p-prod__sec .wp-block-button__link {
    width: 140px;
    height: 45px;
    min-width: 0;
    padding: 16px 0px;
    font-size: 17px;
    color: #707070;
    background: transparent;
    background-image: none;
    border: 1px solid #707070;
  }
  .p-prod__sec .wp-block-button__link::after {
    width: 50px;
    height: 7px;
    background-image: url(../../assets/images/common/link_arrow_gray.png);
    bottom: 10px;
    right: -10px;
  }
  .p-prod__sec .wp-block-button__link:hover {
    background-image: none;
  }
  .p-prod__sec .wp-block-button__link:hover::after {
    right: -10px;
  }
  .p-prod__band {
    margin-top: 64px;
    padding: 48px 0 0 0;
  }
  .p-prod__head {
    margin-bottom: 24px;
    padding-bottom: 10px;
  }
  .p-prod__head .en {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .p-prod__head .ja {
    font-size: 20px;
  }
  .p-prod__text {
    font-size: 12px;
    line-height: 1.9;
  }
  .p-prod__grid {
    gap: 8px;
  }
  .p-prod__jis-table th,
  .p-prod__jis-table td {
    padding: 8px 10px;
    font-size: 10px;
  }
  .p-prod__treat-box {
    margin-top: 20px;
    padding: 20px;
  }
  .p-prod__treat {
    padding: 20px 0;
  }
  .p-prod__treat h4 {
    font-size: 15px;
    margin-bottom: 12px;
  }
  .p-prod__treat p {
    font-size: 12px;
    line-height: 1.8;
    padding-left: 0;
    margin-top: 12px;
    width: 100%;
  }
  .p-prod__sizes {
    padding: 24px;
    gap: 20px;
  }
  .p-prod__size-mat {
    font-size: 15px;
    margin-bottom: 12px;
    text-align: center;
  }
  .p-prod__lineup-item h4 {
    font-size: 15px;
    color: #545454;
    margin-bottom: 8px;
  }
  .p-prod__lineup-item a {
    font-size: 12px;
  }
  .p-prod__lineup-item img {
    height: 90px;
  }
  .p-prod__lineup-item p {
    font-size: 12px;
    line-height: 1.4;
    margin-top: 8px;
  }
  .p-prod__lineup--square .p-prod__lineup-item img {
    height: auto;
  }
  .p-prod__lineup--4 {
    grid-template-columns: 1fr;
  }
  .p-prod__lineup--2 .p-prod__lineup-item img {
    aspect-ratio: auto;
    height: 90px;
  }
  .p-prod__spec-box {
    padding: 24px;
  }
  .p-prod__subttl {
    margin-bottom: 12px;
    font-size: 14px;
    line-height: 1.5;
  }
  .p-prod__spec {
    gap: 20px;
    margin-bottom: 20px;
  }
  .p-prod__spec-item h5 {
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
  }
  .p-prod__spec-list {
    margin-top: 8px;
  }
  .p-prod__spec-list li {
    font-size: 12px;
    line-height: 1.5;
  }
  .p-prod__namefig .p-prod__spec-list li {
    font-size: 12px;
    line-height: 1.5;
    padding: 8px 0;
  }
  .p-prod__link {
    margin: 8px 0 16px;
    font-size: 12px;
    line-height: 1.5;
  }
  .p-prod__jis h4 {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.5;
  }
  .p-prod__jis img {
    margin-bottom: 10px;
  }
  .p-prod__jis p {
    font-size: 12px;
    line-height: 1.5;
  }
  .p-prod__mat {
    flex-direction: row;
    gap: 14px;
    padding: 20px 0;
  }
  .p-prod__mat img {
    width: 100px;
    height: 100px;
  }
  .p-prod__mat h4 {
    margin-bottom: 8px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 16px;
  }
  .p-prod__mat p {
    font-size: 13px;
    line-height: 1.8;
  }
  .p-prod__mat .p-prod__mat-more {
    display: none;
  }
  .p-prod__mat-btn {
    margin-top: 8px;
  }
  .p-prod__catalog-label {
    display: none;
  }
  .p-prod__catalog-name {
    padding-bottom: 14px;
    margin-bottom: 14px;
    font-size: 16px;
  }
  .p-prod__catalog-text {
    margin-bottom: 20px;
    font-size: 13px;
  }
  .p-prod__catalog-btns {
    gap: 12px;
  }
  .p-prod__catalog-btn {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    font-size: 13px;
  }
  .p-prod__catalog-btn--dark {
    background: none;
    border: 1px solid #B10000;
    color: #B10000;
  }
  .p-prod__trouble {
    padding: 64px 0 40px;
  }
  .p-prod__trouble-ttl {
    margin-bottom: 24px;
    font-size: 20px;
  }
  .p-prod__trouble-list li {
    padding: 16px 0;
    font-size: 13px;
  }
  .p-prod__trouble-lead {
    gap: 10px;
    margin-bottom: 32px;
    font-size: 14px;
  }
  .p-prod__trouble-lead::before {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
  .p-prod__feats {
    gap: 16px;
    padding: 24px 20px;
  }
  .p-prod__feat-body {
    padding: 12px 4px 0;
  }
  .p-prod__feat-body h5 {
    gap: 6px;
    margin-bottom: 8px;
    font-size: 15px;
  }
  .p-prod__feat-body .no {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .p-prod__feat-body p {
    font-size: 13px;
  }
  .p-prod__trouble-cta {
    padding: 24px 16px 16px;
  }
  .p-prod__trouble-cta p {
    margin-bottom: 7px;
    font-size: 11px;
    line-height: 1.5;
  }
  .p-prod__trouble-cta a {
    font-size: 10px;
  }
  .p-prod__side-label {
    margin-top: 20px;
    font-size: 11px;
  }
  .p-prod__current a, .p-prod__current--label {
    padding: 12px 14px;
    font-size: 13px;
  }
}

/* 自由なデザインのパンチングメタル ページ固有の調整
   （SP幅は既存の共通調整をそのまま使うため、PC/タブレット幅のみ上書き） */
@media (min-width: 769px) {
  .p-prod.p-prod--free {
    padding-bottom: 50px;
  }
  .p-prod.p-prod--free .p-prod__hero {
    margin-bottom: 50px;
  }
  .p-prod.p-prod--free .p-prod__sec:first-of-type {
    margin-bottom: 100px;
  }
  .p-prod.p-prod--free .p-prod__sec:last-of-type {
    margin-bottom: 0;
  }
  .p-prod.p-prod--free .p-prod__band:first-of-type {
    margin-top: 100px;
  }
  .p-prod.p-prod--free .p-prod__band:last-of-type {
    padding-bottom: 0;
  }
}

@media screen and (max-width: 768px) {
  .p-prod__side {
    display: none;
  }
}
/*========================================================
会社情報 サブページ（業績 / アクセス / 営業日カレンダー）
========================================================*/
/* 事業所・アクセス */
.p-access {
  padding-top: 8px;
  padding-bottom: 24px;
}
.p-access__item {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding: 0;
  border-bottom: 1px solid #D1D1D1;
}
.p-access__item:first-child {
  border-top: 1px solid #D1D1D1;
}
.p-access {
  /* 事業所名の帯（背景グレー #DBDBDB） */
}
.p-access__head {
  padding: 70px 20px 0;
  background: #DBDBDB;
  border-radius: 4px;
}
.p-access__name {
  margin: 0;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.6;
  color: #4A4947;
}
.p-access__body {
  padding: 50px;
}
.p-access {
  /* 住所ブロック */
}
.p-access__addr {
  margin-bottom: 22px;
  font-size: 18px;
  line-height: 1.9;
  color: #545454;
}
.p-access__zip {
  color: #707070;
}
.p-access__street {
  color: #4A4947;
}
.p-access__center {
  margin-top: 10px;
  font-weight: 500;
  color: #4A4947;
}
.p-access__tel {
  color: #4A4947;
}
.p-access {
  /* 写真＋経路 */
}
.p-access__media {
  display: grid;
  /* 右の経路テキスト（最長 約379px）が折り返さない幅を確保。
     写真は残り≒66%。75%だと右テキストが折り返すため調整 */
  grid-template-columns: 1fr 400px;
  gap: 24px;
  align-items: stretch;
}
.p-access {
  /* 外観写真（各事業所の合成ストリップ画像1枚） */
}
.p-access__photos {
  display: block;
}
.p-access__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.p-access__route {
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.8;
  color: #545454;
}
.p-access__route-label {
  margin-bottom: 8px;
  font-weight: 500;
  color: #4A4947;
}
.p-access__route-line {
  margin: 0;
}
.p-access {
  /* Google Maps ボタン：見た目は共通 .c-btn.c-btn--gray に統一。ここでは配置のみ指定 */
}
.p-access__gmap {
  align-self: flex-end;
  margin-top: auto;
}
.p-access {
  /* 1024px〜1920px対応：1281px〜1440pxの間は2カラムを維持したまま固定列とpaddingを
     縮小し、写真・ボタンがカード外へはみ出さないようにする。 */
}
@media screen and (max-width: 1440px) {
  .p-access__item {
    grid-template-columns: 200px 1fr;
    gap: 20px;
  }
  .p-access__head {
    padding: 32px 16px 0;
  }
  .p-access__body {
    padding: 28px;
  }
  .p-access__media {
    grid-template-columns: 1fr 240px;
    gap: 16px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-access {
    --_access-head-w: clamp(180px, 16.6666666667vw, 280px);
    --_access-gap: clamp(0px, 1.9047619048vw, 32px);
    --_access-head-pt: clamp(0px, 4.1666666667vw, 70px);
    --_access-head-px: clamp(14px, 1.1904761905vw, 20px);
    --_access-body-p: clamp(24px, 2.9761904762vw, 50px);
    --_access-route-w: clamp(220px, 23.8095238095vw, 400px);
    --_access-media-gap: clamp(0px, 1.4285714286vw, 24px);
  }
  .p-access__item {
    grid-template-columns: var(--_access-head-w) 1fr;
    gap: var(--_access-gap);
  }
  .p-access__head {
    padding: var(--_access-head-pt) var(--_access-head-px) 0;
  }
  .p-access__body {
    padding: var(--_access-body-p);
  }
  .p-access__media {
    grid-template-columns: 1fr var(--_access-route-w);
    gap: var(--_access-media-gap);
  }
}
@media screen and (max-width: 992px) {
  .p-access__item {
    grid-template-columns: 1fr;
    gap: 0px;
    padding: 28px 0;
  }
  .p-access__media {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .p-access__gmap {
    align-self: flex-start;
    margin-top: 4px;
  }
}
@media screen and (max-width: 768px) {
  .p-access__item:first-child {
    padding-top: 0;
    border-top: none;
  }
  .p-access__head {
    padding: 10px 16px;
    background: rgba(112, 112, 112, 0.1);
    border-radius: 0;
  }
  .p-access__name {
    font-size: 15px;
  }
  .p-access {
    /* 写真 → 住所 → 経路/ボタン の順で表示（DOM順は住所→写真+経路のため display:contents で入れ替え） */
  }
  .p-access__body {
    padding: 0px;
    display: flex;
    flex-direction: column;
  }
  .p-access__media {
    display: contents;
  }
  .p-access__photos {
    order: 1;
    width: 100%;
    margin-bottom: 20px;
  }
  .p-access__photo {
    border-radius: 0;
  }
  .p-access__addr {
    order: 2;
    margin-bottom: 14px;
    margin-top: 14px;
    font-size: 12px;
  }
  .p-access__route {
    order: 3;
    font-size: 12px;
  }
  .p-access__gmap {
    align-self: flex-end;
    margin-top: 20px;
  }
}

/* 業績 */
.p-results {
  padding-top: 8px;
  padding-bottom: 24px;
  /* 見出しは共通の .p-prod__btitle を使用（_product.scss） */
}
.p-results__text {
  margin-bottom: 56px;
}
.p-results__text p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 2;
  color: #545454;
}
.p-results__text p:last-child {
  margin-bottom: 0;
}
.p-results__chart {
  padding: 40px;
  background: #FFFFFF;
  border: 1px solid #D1D1D1;
  border-radius: 6px;
}
.p-results__chart-img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-results__text {
    margin-bottom: clamp(0px, 3.3333333333vw, 56px);
  }
  .p-results__chart {
    padding: clamp(20px, 2.380952381vw, 40px);
  }
}
@media screen and (max-width: 992px) {
  .p-results__chart {
    padding: 20px;
  }
}
@media screen and (max-width: 768px) {
  .p-results__text {
    margin-bottom: 32px;
  }
  .p-results__text p {
    font-size: 13px;
  }
  .p-results__chart {
    padding: 12px;
  }
}

/* 営業日カレンダー */
.p-cal {
  width: 100%;
  max-width: min(1248px, var(--container-limit, 1248px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-cal {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-cal {
  /* 休みの種類（凡例）：カレンダー左上に2列レイアウト */
}
.p-cal__legend {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 16px 56px;
  margin-bottom: 28px;
  font-size: 15px;
  color: #4A4947;
}
.p-cal__legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.p-cal__sw {
  flex-shrink: 0;
  width: 60px;
  height: 28px;
  border: 1px solid #D1D1D1;
  border-radius: 3px;
}
.p-cal__sw--open {
  background: #FFFFFF;
}
.p-cal__sw--honsha {
  background: #FBF7C4;
}
.p-cal__sw--all {
  background: #FAC9C9;
}
.p-cal__sw--factory {
  background: #CDEBCF;
}
.p-cal {
  /* $CALENDAR_MONTHS に当月以降の月が1つもない場合の案内文 */
}
.p-cal__empty {
  padding: 60px 0;
  text-align: center;
  font-size: 16px;
  color: #545454;
}
.p-cal {
  /* カレンダー本体（コード生成：月カードを3列で並べる） */
}
.p-cal__months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.p-cal__month {
  background: #EDEDED;
  border-radius: 6px;
  padding: 16px;
  box-shadow: 3px 3px 5px rgba(112, 112, 112, 0.1);
}
.p-cal__month-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.p-cal__month-num {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 62px;
  line-height: 1;
  color: #707070;
}
.p-cal__month-sub {
  display: flex;
  flex-direction: column;
}
.p-cal__month-year {
  font-size: 13px;
  color: #707070;
  margin-bottom: 5px;
}
.p-cal__month-en {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 21px;
  color: #4A4947;
  letter-spacing: 3px;
}
.p-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.p-cal__dow {
  text-align: center;
  font-size: 12px;
  padding-bottom: 6px;
  color: #4A4947;
}
.p-cal__dow--sun {
  color: #B10000;
}
.p-cal__dow--sat {
  color: #0063D5;
}
.p-cal__day {
  position: relative;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  font-size: 20px;
  color: #4A4947;
}
.p-cal__day--blank {
  background: transparent;
}
.p-cal__day--sun .p-cal__daynum {
  color: #B10000;
}
.p-cal__day--sat .p-cal__daynum {
  color: #0063D5;
}
.p-cal__day--all {
  background: #FAC9C9;
}
.p-cal__day--honsha {
  background: #FBF7C4;
}
.p-cal__day--factory {
  background: #CDEBCF;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-cal__legend {
    gap: clamp(0px, 0.9523809524vw, 16px) clamp(24px, 3.3333333333vw, 56px);
  }
  .p-cal__months {
    gap: clamp(16px, 1.4285714286vw, 24px);
  }
  .p-cal__month-num {
    font-size: clamp(36px, 3.6904761905vw, 62px);
  }
}
@media screen and (max-width: 992px) {
  .p-cal__legend {
    grid-template-columns: 1fr;
    gap: 10px 0;
  }
  .p-cal__sw {
    width: 48px;
    height: 24px;
  }
  .p-cal__months {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .p-cal__legend {
    font-size: 12px;
  }
  .p-cal__months {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-cal__month-num {
    font-size: 40px;
  }
  .p-cal__day {
    font-size: 10px;
    padding: 3px 4px;
  }
  .p-cal__dow {
    font-size: 10px;
  }
}

/*========================================================
開孔率・重量 自動計算ツール
========================================================*/
.p-calc {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-calc {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-calc {
  padding-bottom: 120px;
  /* ===== ファーストビュー（プレビュー＋ページ遷移メニュー） ===== */
}
.p-calc__kv {
  position: relative;
  overflow: hidden;
  width: min(1790px, 100vw);
  margin-left: calc(50% - min(895px, 50vw));
  height: 850px;
  border: 10px solid #545454;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-calc__kv {
    width: min(1790px, 100vw - 16px);
    margin-left: calc(50% - min(895px, 50vw - 8px));
  }
}
.p-calc__kv-img {
  position: absolute;
  inset: 0;
}
.p-calc__kv-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-calc {
  /* MV上のテキスト（英語 + 区切り線 + 日本語） */
}
.p-calc__kv-text {
  position: absolute;
  left: 100px;
  right: 60px;
  bottom: 150px;
  z-index: 1;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.p-calc__kv-spec {
  display: block;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 25px;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.p-calc {
  /* Speck の下：40px × 1px の区切り線 */
}
.p-calc__kv-spec::after {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 16px 0 24px;
  background: #FFFFFF;
}
.p-calc__kv-cap {
  display: block;
  font-size: 27px;
  letter-spacing: 0.04em;
}
.p-calc {
  /* 右側プレビュー（画像切替パネル：3タブ＋品番リスト） */
}
.p-calc__preview {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 450px;
  height: 100%;
  padding: 30px 0 0;
  background: transparent;
  backdrop-filter: blur(8px);
  color: #FFFFFF;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.p-calc__preview:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.32);
}
.p-calc {
  /* パターン3タブ */
}
.p-calc__preview-tabs {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4px;
  margin: 0 24px 18px;
}
.p-calc__preview-tab {
  flex: 1;
  padding: 12px 4px;
  border: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
  font-size: 16px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.p-calc__preview-tab:hover {
  background: rgba(255, 255, 255, 0.4);
}
.p-calc__preview-tab.is-active {
  background: #FFFFFF;
  color: #4A4947;
  font-weight: 500;
}
.p-calc {
  /* 品番リスト（タブで表示切替）。アクティブ時は残り高さを埋める縦flex */
}
.p-calc__preview-list {
  position: relative;
  z-index: 1;
  display: none;
  list-style: none;
}
.p-calc__preview-list.is-active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.p-calc__preview-list li {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.p-calc__preview-list li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.p-calc__preview-list li:has(.p-calc__pitem--all) {
  flex: 0 0 auto;
}
.p-calc__preview-list li:not(:has(.p-calc__pitem--all)) {
  flex: 1 1 0;
  min-height: 0;
}
.p-calc {
  /* 品番アイテム（左：タイトル＋スペック／右：サムネ） */
}
.p-calc__pitem {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 16px 24px;
  border: none;
  background: transparent;
  color: #FFFFFF;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.2s ease;
}
.p-calc__pitem:hover, .p-calc__pitem.is-active {
  background: rgba(255, 255, 255, 0.2);
}
.p-calc {
  /* ALL（5種比較画像にもどす）ボタン：1行・サムネなし */
}
.p-calc__pitem--all {
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.p-calc__pall-txt {
  flex: 1;
  min-width: 0;
}
.p-calc__pall-all {
  font-size: 18px;
}
.p-calc__pitem-info {
  flex: 1;
  min-width: 0;
}
.p-calc__pitem-ttl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.p-calc__pitem-no {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Noto Sans JP;
}
.p-calc__pitem-specs {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}
.p-calc__pitem-specs span {
  display: flex;
}
.p-calc__pitem-specs i {
  flex-shrink: 0;
  width: 4.5em;
  font-style: normal;
}
.p-calc__pitem-specs em {
  flex-shrink: 0;
  font-style: normal;
  margin-right: 6px;
}
.p-calc__pitem-specs b {
  min-width: 0;
  font-weight: 400;
}
.p-calc__pitem-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-calc {
  /* タイトル末尾の矢印（インライン） */
}
.p-calc__preview-arrow {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border: solid #FFFFFF;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
}
.p-calc {
  /* ===== リード文 ===== */
}
.p-calc__lead {
  margin: 56px 0 80px;
  font-size: 16px;
  line-height: 2;
  color: #545454;
}
.p-calc {
  /* ===== セクション ===== */
}
.p-calc__sec {
  margin-bottom: 90px;
}
.p-calc__sec-ttl {
  margin-bottom: 28px;
  padding-left: 16px;
  border-left: 4px solid #545454;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #4A4947;
}
.p-calc__note {
  margin-bottom: 28px;
  font-size: 15px;
  line-height: 1.9;
  color: #545454;
}
.p-calc {
  /* ===== タブ・フォームを包む白枠ボックス（.p-prod__order-box と統一） ===== */
}
.p-calc__box {
  padding: 40px 60px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}
.p-calc {
  /* ===== タブ（10種：5列×2行） ===== */
}
.p-calc__tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 40px;
  padding: 14px;
  background: #E8E8E8;
  border-radius: 7px;
}
.p-calc__tab {
  padding: 12px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: #545454;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.p-calc__tab:hover, .p-calc__tab.is-active {
  background: #F6F6F6;
  color: #4A4947;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.p-calc {
  /* ===== 計算パネル（フォーム＋イラスト＝合計1100px・中央に区切り線） ===== */
}
.p-calc__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}
.p-calc__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 56px;
}
.p-calc__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.p-calc__rate-msg {
  margin-top: 10px;
  font-size: 14px;
  color: #B10000;
}
.p-calc__rate-msg:empty {
  display: none;
}
.p-calc__fig {
  padding-left: 56px;
  border-left: 1px solid #D1D1D1;
  box-shadow: inset 1px 0 0 #fff;
}
.p-calc__field {
  display: flex;
  align-items: center;
  gap: 14px;
}
.p-calc__field label {
  width: 110px;
  flex-shrink: 0;
  font-size: 15px;
  color: #4A4947;
  text-align: right;
}
.p-calc__field input,
.p-calc__field select {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 14px;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  font-size: 15px;
  background: #FFFFFF;
}
.p-calc__unit {
  flex-shrink: 0;
  width: 44px;
  font-size: 14px;
  color: #545454;
}
.p-calc__field--out output {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 14px;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #0068B6;
  background: #F2F2F2;
}
.p-calc {
  /* 計算・クリアボタン下の白＋グレーの区切り線 */
}
.p-calc__hr {
  height: 2px;
  margin: 22px 0 26px;
  background: linear-gradient(to bottom, #D1D1D1 0 1px, #ffffff 1px 2px);
}
.p-calc__btns {
  display: flex;
  gap: 14px;
  margin: 6px 0 6px 124px;
}
.p-calc__btn {
  min-width: 110px;
  padding: 11px 28px;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.p-calc__btn:hover {
  opacity: 0.85;
}
.p-calc__btn--calc {
  background: #B10000;
  color: #FFFFFF;
}
.p-calc__btn--clear {
  background: #707070;
  color: #FFFFFF;
}
.p-calc__links {
  list-style: none;
  margin-top: 18px;
  margin-left: 124px;
}
.p-calc__links li {
  margin-bottom: 8px;
}
.p-calc__links a {
  position: relative;
  display: inline-block;
  padding-left: 18px;
  font-size: 15px;
  color: #0068B6;
  text-decoration: underline;
}
.p-calc__links a:hover {
  text-decoration: none;
}
.p-calc__links a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 6px;
  height: 6px;
  margin-top: -4px;
  border: solid #0068B6;
  border-width: 1.5px 1.5px 0 0;
  transform: rotate(45deg);
}
.p-calc {
  /* ===== 右側イラスト・比重表 ===== */
}
.p-calc__fig img {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  margin: 0 auto 24px;
}
.p-calc__fig-cap {
  margin-bottom: 30px;
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
  text-align: center;
}
.p-calc__dtable {
  width: 100%;
  margin-bottom: 32px;
  border-collapse: collapse;
  font-size: 15px;
}
.p-calc__dtable th,
.p-calc__dtable td {
  padding: 10px 16px;
  border: 1px solid #D1D1D1;
  text-align: center;
}
.p-calc__dtable th {
  color: #FFFFFF;
  background: #707070;
  font-weight: 500;
}
.p-calc__dtable td {
  color: #545454;
  background: #FFFFFF;
}
.p-calc__dtable td:first-child {
  text-align: left;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-calc {
    --_calc-kv-left: clamp(0px, 5.9523809524vw, 100px);
    --_calc-kv-right: clamp(0px, 3.5714285714vw, 60px);
    --_calc-kv-bottom: clamp(0px, 8.9285714286vw, 150px);
    --_calc-kv-spec-fs: clamp(16px, 1.4880952381vw, 25px);
    --_calc-kv-cap-fs: clamp(18px, 1.6071428571vw, 27px);
    --_calc-preview-w: clamp(340px, 26.7857142857vw, 450px);
    --_calc-lead-mt: clamp(0px, 3.3333333333vw, 56px);
    --_calc-lead-mb: clamp(0px, 4.7619047619vw, 80px);
    --_calc-sec-mb: clamp(0px, 5.3571428571vw, 90px);
    --_calc-sec-ttl-fs: clamp(18px, 1.4285714286vw, 24px);
    --_calc-box-py: clamp(24px, 2.380952381vw, 40px);
    --_calc-box-px: clamp(24px, 3.5714285714vw, 60px);
    --_calc-tabs-mb: clamp(0px, 2.380952381vw, 40px);
    --_calc-tab-fs: clamp(14px, 1.1904761905vw, 20px);
    --_calc-form-pr: clamp(0px, 3.3333333333vw, 56px);
    --_calc-fig-w: clamp(0px, 27.380952381vw, 460px);
  }
  .p-calc__kv-text {
    left: var(--_calc-kv-left);
    right: var(--_calc-kv-right);
    bottom: var(--_calc-kv-bottom);
  }
  .p-calc__kv-spec {
    font-size: var(--_calc-kv-spec-fs);
  }
  .p-calc__kv-cap {
    font-size: var(--_calc-kv-cap-fs);
  }
  .p-calc__preview {
    width: var(--_calc-preview-w);
  }
  .p-calc__lead {
    margin: var(--_calc-lead-mt) 0 var(--_calc-lead-mb);
  }
  .p-calc__sec {
    margin-bottom: var(--_calc-sec-mb);
  }
  .p-calc__sec-ttl {
    font-size: var(--_calc-sec-ttl-fs);
  }
  .p-calc__box {
    padding: var(--_calc-box-py) var(--_calc-box-px);
  }
  .p-calc__tabs {
    margin-bottom: var(--_calc-tabs-mb);
  }
  .p-calc__tab {
    font-size: var(--_calc-tab-fs);
  }
  .p-calc__form {
    padding-right: var(--_calc-form-pr);
  }
  .p-calc__fig img {
    max-width: var(--_calc-fig-w);
  }
}
@media screen and (max-width: 768px) {
  .p-calc {
    /* SPの土台：以前は$breakpoint-l（1440px以下）のブロックにあり、SPにも引き継がれていた指定。
       1440px以下のブロックが無くなり、PCの値（計算パネル2カラム等）がSPまで漏れて崩れていたため、
       SP側に明示する（この後のSP専用の指定が優先） */
    padding-bottom: 80px;
  }
  .p-calc__kv {
    width: auto;
    margin-left: 0;
    height: auto;
    border-width: 5px;
  }
  .p-calc__kv-img {
    position: static;
  }
  .p-calc__kv-img img {
    height: 280px;
  }
  .p-calc__kv-text {
    left: 24px;
    right: 24px;
    top: 60px;
    bottom: auto;
    transform: none;
  }
  .p-calc__kv-spec {
    font-size: 20px;
  }
  .p-calc__kv-cap {
    font-size: 18px;
  }
  .p-calc__preview {
    position: static;
    width: 100%;
    height: auto;
    padding: 16px 0;
    background: rgba(35, 35, 35, 0.85);
    backdrop-filter: none;
    display: block;
    overflow: visible;
  }
  .p-calc__preview-tabs {
    margin: 0 16px 14px;
  }
  .p-calc__preview-list.is-active {
    display: block;
  }
  .p-calc__preview-list li, .p-calc__preview-list li:has(.p-calc__pitem--all), .p-calc__preview-list li:not(:has(.p-calc__pitem--all)) {
    flex: none;
  }
  .p-calc__pitem {
    height: auto;
    padding: 14px 16px;
  }
  .p-calc__pitem-thumb {
    width: 72px;
    height: 72px;
  }
  .p-calc__lead {
    margin: 36px 0 56px;
  }
  .p-calc__sec {
    margin-bottom: 64px;
  }
  .p-calc__box {
    padding: 24px 20px;
  }
  .p-calc__tabs {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-calc__panel {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-calc__form {
    padding-right: 0;
  }
  .p-calc__fig {
    padding-left: 0;
    border-left: none;
    box-shadow: none;
  }
  .p-calc__btns, .p-calc__links {
    margin-left: 0;
  }
  .p-calc__field label {
    width: 96px;
  }
  .p-calc__kv {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border: none;
  }
  .p-calc__kv-img img {
    height: 550px;
  }
  .p-calc__preview {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    height: 550px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    display: block;
    overflow: hidden;
  }
  .p-calc__preview::before {
    display: none;
  }
  .p-calc__preview-tabs {
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    z-index: 1;
    margin: 0;
    gap: 0;
  }
  .p-calc__preview-tab {
    flex: none;
    display: block;
    padding: 12px 10px;
    border-radius: 0;
    background: #FFFFFF;
    color: #4A4947;
    font-size: 11px;
  }
  .p-calc__preview-tab.is-active {
    background: #4A4947;
    color: #FFFFFF;
  }
  .p-calc__kv-text {
    left: 20px;
    right: 20px;
    top: 376px;
    bottom: auto;
  }
  .p-calc__kv-spec {
    font-size: 12px;
  }
  .p-calc__kv-spec::after {
    margin: 8px 0;
  }
  .p-calc__kv-cap {
    font-size: 12px;
  }
  .p-calc__preview-list.is-active {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background: rgba(0, 0, 0, 0.25);
  }
  .p-calc__preview-list li:not(:has(.p-calc__pitem--all)) {
    flex: 1 1 0;
    min-width: 0;
    border: none;
  }
  .p-calc__preview-list li:has(.p-calc__pitem--all) {
    display: none;
  }
  .p-calc__pitem {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
    padding: 5px 2px;
    gap: 6px;
    text-align: center;
    color: #FFFFFF;
  }
  .p-calc__pitem-info {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .p-calc__pitem-ttl {
    flex-direction: column;
    gap: 0;
    margin-bottom: 4px;
    font-size: 10px;
    white-space: normal;
  }
  .p-calc__pitem-no {
    overflow: visible;
    white-space: normal;
    text-align: center;
  }
  .p-calc__pitem-specs {
    display: none;
  }
  .p-calc__preview-arrow {
    display: none;
  }
  .p-calc__pitem-thumb {
    width: 48px;
    height: 48px;
  }
  .p-calc .p-calc__tab {
    font-size: 14px;
  }
  .p-calc__lead {
    font-size: 12px;
    line-height: 1.9;
  }
  .p-calc__sec-ttl {
    font-size: 15px;
    padding-left: 13px;
  }
  .p-calc__panel .p-calc__fig {
    order: 1;
  }
  .p-calc__panel .p-calc__form {
    order: 2;
  }
  .p-calc__field input,
  .p-calc__field select {
    height: 38px;
    font-size: 13px;
  }
  .p-calc__field--out output {
    font-size: 14px;
  }
  .p-calc__btn {
    min-width: 0;
    width: 98px;
    height: 38px;
    padding: 0;
    font-size: 11px;
  }
  .p-calc__btns {
    justify-content: center;
  }
  .p-calc__dtable {
    font-size: 12px;
  }
  .p-calc__dtable th,
  .p-calc__dtable td {
    padding: 8px 10px;
  }
}

/*========================================================
パンチングメタルとは？
========================================================*/
/* ヒーロー画像の右ブリードによる横はみ出し抑止はbody側(overflow-x:hidden)で対応。
   .l-main.--page に持たせると製品詳細ページ等のサイドバーposition:stickyが効かなくなるため削除。 */
.p-about {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-about {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-about {
  padding-top: 100px;
  padding-bottom: 140px;
  /* 画像未提供スロットのプレースホルダー */
}
.p-about__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4/3;
  background: repeating-linear-gradient(-45deg, #eaeaea 0 10px, #e0e0e0 10px 20px);
  color: #707070;
  font-size: 13px;
  letter-spacing: 0.06em;
  border-radius: 6px;
}
.p-about__ph--wide {
  aspect-ratio: 295/175;
}
.p-about {
  /* ===== イントロ（ヒーロー画像を画面右端までブリード・全体表示） ===== */
}
.p-about__intro {
  display: flex;
  align-items: flex-start;
  margin-bottom: 150px;
}
.p-about__intro-body {
  flex: 0 0 50%;
}
.p-about__catch {
  margin-bottom: 28px;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #4A4947;
}
.p-about__lead {
  font-size: 18px;
  line-height: 2;
  color: #545454;
}
.p-about__lead + .p-about__lead {
  margin-top: 22px;
}
.p-about {
  /* 強調テキスト（要点となるキーワード・フレーズ） */
}
.p-about__accent {
  font-size: 22px;
  color: #0068B6;
}
.p-about__intro-img {
  position: absolute;
  right: 0;
  width: 600px;
  top: 40%;
}
.p-about__intro-img img {
  display: block;
  width: 100%;
  height: auto;
}
.p-about {
  /* ===== 6つの Benefit ===== */
}
.p-about__benefit-sec {
  margin-bottom: 110px;
  padding: 60px 56px 64px;
  background: #D6E1EA;
  border-radius: 16px;
}
.p-about__benefit-head {
  margin-bottom: 44px;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  color: #0068B6;
  letter-spacing: 0.06em;
}
.p-about__benefit-head span {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
}
.p-about__benefits {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  list-style: none;
}
.p-about__benefit {
  text-align: center;
}
.p-about__benefit-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  width: 137px;
  height: 137px;
}
.p-about__benefit-ic img {
  width: 137px;
  height: 137px;
  border-radius: 50%;
  width: 100%;
  height: auto;
}
.p-about__benefit-ttl {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #005DAB;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p-about__benefit-no {
  width: 25px;
  height: 25px;
  background: #005DAB;
  color: #fff;
  display: inline-block;
  margin-right: 6px;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.p-about__benefit-txt {
  font-size: 16px;
  line-height: 1.7;
  color: #545454;
}
.p-about__benefit-use {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 104, 182, 0.25);
  font-size: 12px;
  color: #707070;
}
.p-about {
  /* ===== セクション ===== */
}
.p-about__sec {
  margin-bottom: 110px;
}
.p-about__sec:last-of-type {
  margin-bottom: 0;
}
.p-about__sec-ttl {
  margin-bottom: 48px;
  padding-bottom: 18px;
  border-bottom: 2px solid #383838;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #4A4947;
}
.p-about__sec-ttl--gap100 {
  margin-bottom: 100px;
}
.p-about__sec-ttl--gap140 {
  margin-bottom: 140px;
}
.p-about {
  /* ===== 共通：ブロック ===== */
}
.p-about__block {
  margin-bottom: 72px;
}
.p-about__block:last-child {
  margin-bottom: 0;
}
.p-about__block-ttl {
  margin-bottom: 26px;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  color: #0068B6;
  /* 中央見出し＋下に全幅の区切り線 */
}
.p-about__block-ttl--line {
  margin-bottom: 60px;
  padding-bottom: 22px;
  border-bottom: 1px solid #D1D1D1;
}
.p-about__txt {
  font-size: 16px;
  line-height: 2;
  color: #545454;
}
.p-about__txt + .p-about__txt {
  margin-top: 18px;
}
.p-about__txt a {
  color: #0068B6;
  text-decoration: underline;
}
.p-about__note {
  margin-top: 50px;
  font-size: 18px;
  line-height: 1.9;
  color: #707070;
}
.p-about__note a {
  color: #0068B6;
  text-decoration: underline;
}
.p-about {
  /* 金型の仕様：金型/金型ペア画像直下の文言の間隔調整 */
}
.p-about__note--kata {
  margin-top: 16px;
  font-size: 12px;
}
.p-about {
  /* リンク（枠付き「詳しく見る」系） */
}
.p-about__more-wrap {
  margin-top: 22px;
}
.p-about__more-wrap--right {
  text-align: right;
}
.p-about {
  /* 「詳しくみる」等は TOP と共通の .c-btn--gray を使用（_button.scss） */
  /* ===== 孔の形状・孔配列 ===== */
  /* 基本仕様：全コンテンツを包括する白パネル（box_01） */
}
.p-about__spec-box {
  max-width: 1160px;
  margin-inline: auto;
  padding: 56px 64px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  /* 定尺サイズ下のパネルは全幅のまま */
}
.p-about__spec-box--full {
  max-width: none;
}
.p-about {
  /* 孔の形状・孔配列：PC/SPで画像（about_pat_pc.svg / about_pat_sp.svg）を切り替えて表示 */
}
.p-about__pat-grid {
  display: block;
  width: 100%;
  height: auto;
}
.p-about {
  /* ===== 金型の仕様 ===== */
}
.p-about__kata-wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}
.p-about__kata-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
}
.p-about__kata {
  display: flex;
  flex-direction: column;
}
.p-about__kata img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.p-about__kata-cap {
  order: -1;
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  text-align: center;
  color: #4A4947;
}
.p-about__kata-egrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  list-style: none;
}
.p-about__kata-egrid li {
  text-align: center;
}
.p-about__kata-egrid img {
  display: block;
  width: 100%;
  aspect-ratio: 316/246;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
}
.p-about__kata-elabel {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #545454;
}
.p-about {
  /* ===== メディア（画像＋本文） ===== */
}
.p-about__media {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 48px;
}
.p-about__media-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.p-about {
  /* ===== サンプルセット ===== */
}
.p-about__sample {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
}
.p-about__sample-box {
  padding: 36px 40px;
  background: #EAF1F8;
  border-radius: 8px;
}
.p-about__sample-ttl {
  margin-bottom: 18px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: #4A4947;
}
.p-about__sample-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.p-about__deflist dt {
  margin-bottom: 6px;
  padding-left: 14px;
  border-left: 3px solid #0068B6;
  font-size: 17px;
  font-weight: 500;
  color: #4A4947;
}
.p-about__deflist dd {
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.9;
  color: #545454;
}
.p-about__deflist dd:last-child {
  margin-bottom: 0;
}
.p-about {
  /* ===== 代表的な材料 ===== */
}
.p-about__mat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 28px;
  list-style: none;
}
.p-about__mat {
  display: flex;
  flex-direction: column;
}
.p-about__mat img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-about__mat-cap {
  order: -1;
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  text-align: center;
  color: #4A4947;
}
.p-about {
  /* ===== 定尺サイズ（規格） ===== */
}
.p-about__size-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 100px;
  list-style: none;
}
.p-about__size-mat {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #D1D1D1;
  font-size: 19px;
  font-weight: 500;
  color: #4A4947;
}
.p-about__size-img {
  display: block;
  width: 100%;
  height: auto;
}
.p-about {
  /* ===== 事例紹介 ===== */
  /* ===== 事例紹介（建築写真2カラム） ===== */
}
.p-about__case-feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  max-width: 1300px;
  margin-inline: auto;
}
.p-about__case-col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.p-about__case-col img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.p-about__case-col img + img {
  width: 70%;
  margin-left: auto;
}
.p-about__case-col--right {
  padding-top: 80px;
}
.p-about__case-col--right .p-about__txt {
  margin-bottom: 4px;
}
.p-about__case-col--right .p-about__more-wrap {
  margin-top: 110px;
  text-align: left;
}
.p-about {
  /* ===== 二次加工事例（スライダー：c-case-slider 拡張） ===== */
}
.p-about__slider {
  margin-top: 36px;
}
.p-about__slider .c-case-slider__item {
  flex: 0 0 calc((100% - 96px) / 5);
  background: #EFEFEF;
  border-radius: 4px;
  overflow: hidden;
}
.p-about__slider .c-case-slider__thumb {
  margin-bottom: 0;
  border-radius: 0;
  background: #EFEFEF;
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.p-about__slider .c-case-slider__thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-about__slider .c-case-slider__cap {
  padding: 0 16px 18px;
  font-size: 16px;
  line-height: 1.7;
  color: #545454;
}
.p-about__slider .p-about__ph--wide {
  aspect-ratio: 4/3;
  border-radius: 0;
}
.p-about__slider-ttl {
  margin: 16px 16px 10px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #707070;
  font-size: 18px;
  font-weight: 500;
  color: #4A4947;
}
.p-about {
  /* ===== 孔の配列 / 孔の向き ===== */
}
.p-about__arr-grid, .p-about__dir-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 28px;
  list-style: none;
}
.p-about__dir-grid {
  grid-template-columns: repeat(2, 1fr);
}
.p-about__arr {
  display: flex;
  flex-direction: column;
}
.p-about__arr img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: contain;
     object-fit: contain;
}
.p-about__dir img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: contain;
     object-fit: contain;
  padding: 16px;
  border-radius: 8px;
}
.p-about__arr-cap {
  order: -1;
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  color: #4A4947;
}
.p-about {
  /* ===== パンチング加工の図 ===== */
}
.p-about__punch-fig {
  margin: 28px 0 8px;
  text-align: center;
}
.p-about__punch-fig img {
  max-width: 620px;
  width: 100%;
  height: auto;
}
.p-about {
  /* ===== CTA（通販サイト：button_.png） ===== */
}
.p-about__cta {
  margin: 30px auto 0;
  padding: 52px 60px;
  background: #E3EEF8;
  border-radius: 12px;
  text-align: center;
  max-width: 1160px;
}
.p-about__cta-ttl {
  display: inline-block;
  margin-bottom: 22px;
  padding-bottom: 8px;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #0068B6;
  border-bottom: 2px solid currentColor;
}
.p-about__cta-ttl:hover {
  border-bottom-color: transparent;
}
.p-about__cta-ext {
  margin-left: 8px;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
}
.p-about__cta-txt {
  max-width: 1000px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 2;
  text-align: left;
  color: #545454;
}
.p-about {
  /* 可変（769〜1679px）：1680px時のレイアウトを画面幅に比例して縮小。本文（12〜22px）は固定。
     1200px以下・992px以下はこの後の$breakpoint-m／$breakpoint-sの値が優先 */
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-about {
    --_about-pt: clamp(0px, 5.9523809524vw, 100px);
    --_about-pb: clamp(0px, 8.3333333333vw, 140px);
    --_about-intro-mb: clamp(0px, 8.9285714286vw, 150px);
    --_about-catch-fs: clamp(22px, 1.7857142857vw, 30px);
    --_about-intro-img-w: clamp(0px, 35.7142857143vw, 600px);
    --_about-benefit-mb: clamp(0px, 6.5476190476vw, 110px);
    --_about-benefit-pt: clamp(0px, 3.5714285714vw, 60px);
    --_about-benefit-px: clamp(0px, 3.3333333333vw, 56px);
    --_about-benefit-pb: clamp(0px, 3.8095238095vw, 64px);
    --_about-benefit-head-fs: clamp(20px, 1.6666666667vw, 28px);
    --_about-benefit-head-mb: clamp(0px, 2.619047619vw, 44px);
    --_about-benefit-ic: clamp(90px, 8.1547619048vw, 137px);
    --_about-sec-mb: clamp(0px, 6.5476190476vw, 110px);
    --_about-sec-ttl-fs: clamp(20px, 1.6666666667vw, 28px);
    --_about-sec-ttl-mb: clamp(0px, 2.8571428571vw, 48px);
    --_about-sec-ttl-mb100: clamp(0px, 5.9523809524vw, 100px);
    --_about-sec-ttl-mb140: clamp(0px, 8.3333333333vw, 140px);
    --_about-block-mb: clamp(0px, 4.2857142857vw, 72px);
    --_about-block-ttl-fs: clamp(22px, 1.7857142857vw, 30px);
    --_about-block-line-mb: clamp(0px, 3.5714285714vw, 60px);
    --_about-spec-w: clamp(0px, 69.0476190476vw, 1160px);
    --_about-spec-py: clamp(0px, 3.3333333333vw, 56px);
    --_about-spec-px: clamp(28px, 3.8095238095vw, 64px);
    --_about-case-w: clamp(0px, 77.380952381vw, 1300px);
    --_about-case-gap: clamp(0px, 2.380952381vw, 40px);
    --_about-case-right-pt: clamp(0px, 4.7619047619vw, 80px);
    --_about-case-more-mt: clamp(0px, 6.5476190476vw, 110px);
    --_about-punch-w: clamp(0px, 36.9047619048vw, 620px);
    --_about-cta-w: clamp(0px, 69.0476190476vw, 1160px);
    --_about-cta-py: clamp(0px, 3.0952380952vw, 52px);
    --_about-cta-px: clamp(28px, 3.5714285714vw, 60px);
    --_about-cta-ttl-fs: clamp(20px, 1.5476190476vw, 26px);
    --_about-cta-txt-w: clamp(0px, 59.5238095238vw, 1000px);
    padding-top: var(--_about-pt);
    padding-bottom: var(--_about-pb);
  }
  .p-about__intro {
    margin-bottom: var(--_about-intro-mb);
  }
  .p-about__catch {
    font-size: var(--_about-catch-fs);
  }
  .p-about__intro-img {
    width: var(--_about-intro-img-w);
  }
  .p-about__benefit-sec {
    margin-bottom: var(--_about-benefit-mb);
    padding: var(--_about-benefit-pt) var(--_about-benefit-px) var(--_about-benefit-pb);
  }
  .p-about__benefit-head {
    margin-bottom: var(--_about-benefit-head-mb);
    font-size: var(--_about-benefit-head-fs);
  }
  .p-about__benefit-ic {
    width: var(--_about-benefit-ic);
    height: var(--_about-benefit-ic);
  }
  .p-about__benefit {
    container-type: inline-size;
  }
  .p-about__benefit-txt {
    font-size: min(16px, 8.547008547cqi);
    line-height: 1.5;
  }
  .p-about__benefit-use {
    line-height: 1.5;
  }
  .p-about__sec {
    margin-bottom: var(--_about-sec-mb);
  }
  .p-about__sec:last-of-type {
    margin-bottom: 0;
  }
  .p-about__sec-ttl {
    margin-bottom: var(--_about-sec-ttl-mb);
    font-size: var(--_about-sec-ttl-fs);
  }
  .p-about__sec-ttl--gap100 {
    margin-bottom: var(--_about-sec-ttl-mb100);
  }
  .p-about__sec-ttl--gap140 {
    margin-bottom: var(--_about-sec-ttl-mb140);
  }
  .p-about__block {
    margin-bottom: var(--_about-block-mb);
  }
  .p-about__block:last-child {
    margin-bottom: 0;
  }
  .p-about__block-ttl {
    font-size: var(--_about-block-ttl-fs);
  }
  .p-about__block-ttl--line {
    margin-bottom: var(--_about-block-line-mb);
  }
  .p-about__spec-box {
    max-width: var(--_about-spec-w);
    padding: var(--_about-spec-py) var(--_about-spec-px);
  }
  .p-about__spec-box--full {
    max-width: none;
  }
  .p-about__case-feat {
    max-width: var(--_about-case-w);
    gap: var(--_about-case-gap);
  }
  .p-about__case-col--right {
    padding-top: var(--_about-case-right-pt);
  }
  .p-about__case-col--right .p-about__more-wrap {
    margin-top: var(--_about-case-more-mt);
  }
  .p-about__punch-fig img {
    max-width: var(--_about-punch-w);
  }
  .p-about__cta {
    max-width: var(--_about-cta-w);
    padding: var(--_about-cta-py) var(--_about-cta-px);
  }
  .p-about__cta-ttl {
    font-size: var(--_about-cta-ttl-fs);
  }
  .p-about__cta-txt {
    max-width: var(--_about-cta-txt-w);
  }
}
.p-about {
  /* ===== レスポンシブ ===== */
}
@media screen and (max-width: 1200px) {
  .p-about__benefits {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 24px;
  }
  .p-about__spec-box {
    padding: 40px 32px;
  }
  .p-about__mat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .p-about__kata-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media screen and (max-width: 992px) {
  .p-about {
    padding-bottom: 90px;
  }
  .p-about__intro {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 72px;
  }
  .p-about__intro-body {
    flex: none;
    width: 100%;
    padding-right: 0;
  }
  .p-about__intro-img {
    order: -1;
    width: 100%;
    margin-right: 0;
    margin-bottom: 28px;
  }
  .p-about__catch {
    font-size: 24px;
  }
  .p-about__benefit-sec {
    margin-bottom: 72px;
    padding: 40px 24px 44px;
  }
  .p-about__benefits {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-about__sec {
    margin-bottom: 72px;
  }
  .p-about__sec-ttl {
    font-size: 30px;
    margin-bottom: 50px;
  }
  .p-about__block {
    margin-bottom: 52px;
  }
  .p-about__media {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-about__media-img {
    order: -1;
  }
  .p-about__sample {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-about__size-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-about__case-feat {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-about__case-col {
    gap: 24px;
  }
  .p-about__arr-grid {
    grid-template-columns: 1fr;
  }
  .p-about__cta {
    padding: 36px 24px;
  }
  .p-about__cta-ttl {
    font-size: 19px;
  }
}
@media screen and (max-width: 768px) {
  .p-about__slider .c-case-slider__viewport {
    padding: 0;
  }
  .p-about__slider .c-case-slider__item {
    flex-basis: 100%;
  }
  .p-about__slider .c-case-slider__track {
    padding-right: 100px;
  }
  .p-about__mat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .p-about__intro {
    position: relative;
    margin-bottom: 40px;
  }
  .p-about__intro-body {
    position: relative;
    z-index: 1;
    display: block;
  }
  .p-about__catch {
    writing-mode: vertical-rl;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.06em;
    margin-bottom: 0;
    min-height: 340px;
    height: auto;
  }
  .p-about__lead {
    clear: both;
    width: 100%;
    margin-top: 50px;
    font-size: 12px;
    line-height: 1.83;
  }
  .p-about__lead + .p-about__lead {
    margin-top: 0;
  }
  .p-about__accent {
    font-size: 14px;
  }
  .p-about__intro-img {
    position: absolute;
    top: -80px;
    right: -15px;
    z-index: -1;
    width: 90%;
    margin-bottom: 0;
  }
  .p-about__intro-img img {
    width: 100%;
    height: auto;
  }
  .p-about__benefit-sec {
    padding: 24px 16px;
    border-radius: 10px;
  }
  .p-about__benefit-head {
    margin-bottom: 24px;
    font-size: 20px;
    line-height: 1.5;
  }
  .p-about__benefit-head span {
    font-weight: 700;
    font-size: 26px;
  }
  .p-about__benefits {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
  .p-about__benefit-ic {
    width: 109px;
    height: 109px;
    margin-bottom: 10px;
  }
  .p-about__benefit-ttl {
    font-size: 13px;
    line-height: 1.5;
  }
  .p-about__benefit-txt {
    font-size: 12px;
    line-height: 1.6;
  }
  .p-about__benefit-use {
    margin-top: 10px;
    padding-top: 8px;
    font-size: 9px;
    line-height: 1.5;
  }
  .p-about__sec-ttl {
    margin-bottom: 24px;
    padding-bottom: 10px;
    font-size: 15px;
    line-height: 1.5;
  }
  .p-about__sec-ttl--gap100 {
    margin-bottom: 48px;
  }
  .p-about__sec-ttl--gap140 {
    margin-bottom: 64px;
  }
  .p-about__block {
    margin-bottom: 40px;
  }
  .p-about__block-ttl {
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
  }
  .p-about__block-ttl--line {
    margin-bottom: 28px;
    padding-bottom: 14px;
  }
  .p-about__txt {
    font-size: 12px;
    line-height: 1.8;
  }
  .p-about__note {
    margin-top: 24px;
    font-size: 12px;
    line-height: 1.7;
  }
  .p-about__note--kata {
    font-size: 11px;
  }
  .p-about__more-wrap {
    width: 100%;
    margin-top: 0;
    font-size: 12px;
    text-align: right;
  }
  .p-about__btn--wide {
    width: auto;
    min-width: 0;
    padding: 0 20px;
    font-size: 12px;
    white-space: nowrap;
  }
  .p-about__spec-box {
    padding: 24px 16px;
  }
  .p-about__kata-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .p-about__kata-cap {
    font-size: 12px;
    line-height: 1.5;
  }
  .p-about__kata-elabel {
    font-size: 11px;
    line-height: 1.5;
  }
  .p-about__sample-right {
    display: contents;
  }
  .p-about__sample-img {
    order: 1;
  }
  .p-about__sample-box {
    order: 2;
    padding: 20px 16px;
  }
  .p-about__sample-ttl {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  .p-about__sample .p-about__more-wrap {
    order: 3;
  }
  .p-about__mat-cap {
    font-size: 12px;
    line-height: 1.5;
  }
  .p-about__size-mat {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
    padding-bottom: 8px;
  }
  .p-about__slider-ttl {
    margin: 12px 12px 6px;
    font-size: 13px;
    line-height: 1.5;
  }
  .p-about__slider .c-case-slider__cap {
    padding: 0 12px 14px;
    font-size: 12px;
  }
  .p-about__arr-cap {
    font-size: 13px;
    line-height: 1.5;
  }
  .p-about__dir-grid {
    grid-template-columns: 1fr;
  }
  .p-about__deflist dt {
    font-size: 14px;
    line-height: 1.5;
  }
  .p-about__deflist dd {
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 16px;
  }
  .p-about__case-feat {
    display: flex;
    flex-direction: column;
  }
  .p-about__case-col {
    display: contents;
  }
  .p-about__case-col:first-child img {
    width: 100%;
    margin-left: 0;
  }
  .p-about__case-col:first-child img:nth-of-type(1) {
    order: 1;
  }
  .p-about__case-col:first-child img:nth-of-type(2) {
    order: 2;
  }
  .p-about__case-col--right img {
    order: 3;
    width: 100%;
    margin-left: 0;
  }
  .p-about__case-col--right .p-about__txt {
    order: 4;
  }
  .p-about__case-col--right .p-about__more-wrap {
    order: 5;
    margin-top: 0;
    text-align: right;
  }
  .p-about__cta {
    margin-top: 20px;
    padding: 24px 16px;
  }
  .p-about__cta-ttl {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 14px;
  }
  .p-about__cta-txt {
    font-size: 12px;
    line-height: 1.8;
  }
}

/* =========================================
   用語集ページ（page-glossary.php）
   ========================================= */
.p-glossary {
  padding-top: 100px;
  padding-bottom: 140px;
}
.p-glossary__layout {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-glossary__layout {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-glossary__layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
}
.p-glossary {
  /* ===== メイン ===== */
}
.p-glossary__main {
  min-width: 0;
}
.p-glossary {
  /* セクション見出し（p-about__catch と共通） */
}
.p-glossary__cat-ttl {
  margin-bottom: 28px;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #4A4947;
}
.p-glossary {
  /* パンチングメタルとは？ ボックス */
}
.p-glossary__intro {
  margin-bottom: 64px;
  padding: 36px 40px 40px;
  background: #F2F2F2;
  border-radius: 6px;
}
.p-glossary__intro-ttl {
  display: inline-block;
  margin-bottom: 24px;
  padding: 14px 22px;
  background: #FFFFFF;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 500;
  color: #545454;
}
.p-glossary__intro-txt {
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 1.9;
  color: #4A4947;
}
.p-glossary__intro-fig {
  text-align: center;
}
.p-glossary__intro-fig img {
  max-width: 440px;
  width: 100%;
  height: auto;
}
.p-glossary__intro-fig {
  /* 幅100%表示 */
}
.p-glossary__intro-fig--full img {
  max-width: none;
}
.p-glossary {
  /* カテゴリーセクション */
}
.p-glossary__cat-sec + .p-glossary__cat-sec {
  margin-top: 80px;
  padding-top: 72px;
}
.p-glossary {
  /* サブ区分見出し（材質系・曲げ成形 など）：下線 #707070 */
}
.p-glossary__subhead-wrap {
  margin: 56px 0 30px;
}
.p-glossary__subhead-wrap:first-child {
  margin-top: 0;
}
.p-glossary__subhead {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #707070;
  font-size: 24px;
  font-weight: 500;
  color: #4A4947;
}
.p-glossary__subhead-desc {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: #545454;
}
.p-glossary {
  /* 用語ボックス（パンチングメタルとは？ と同じあしらい）の用語版 */
}
.p-glossary__intro--term {
  margin-bottom: 50px;
  scroll-margin-top: 120px;
}
.p-glossary {
  /* 用語定義リスト */
}
.p-glossary__list {
  margin: 0;
}
.p-glossary__item {
  margin-bottom: 50px;
  scroll-margin-top: 120px;
}
.p-glossary__item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
.p-glossary {
  /* 用語名は p-prod__btitle（全ページ共通の小見出し）を併用 */
}
.p-glossary__def {
  margin: 0;
}
.p-glossary__def-txt {
  font-size: 16px;
  line-height: 1.9;
  color: #4A4947;
}
.p-glossary {
  /* 左：画像／右：テキスト（エキスパンドメタル各部の名称・目方向 等） */
}
.p-glossary__def--lr {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 1100px;
}
.p-glossary__def--lr .p-glossary__def-txt {
  order: 2;
  flex: 1;
}
.p-glossary__def--lr .p-glossary__fig {
  order: 1;
  flex: 0 0 auto;
  width: 100%;
  max-width: 600px;
  margin-top: 0;
}
.p-glossary__def--lr .p-glossary__fig img {
  max-width: 100%;
  width: 100%;
}
@media screen and (max-width: 1440px) {
  .p-glossary__def--lr .p-glossary__fig {
    max-width: 360px;
  }
}
@media screen and (max-width: 992px) {
  .p-glossary__def--lr {
    flex-direction: column;
    gap: 14px;
  }
  .p-glossary__def--lr .p-glossary__fig {
    max-width: 100%;
  }
}
.p-glossary {
  /* 図版 */
}
.p-glossary__fig {
  margin-top: 20px;
}
.p-glossary__fig img {
  max-width: 420px;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.p-glossary__fig {
  /* 幅100%表示 */
}
.p-glossary__fig--full img {
  max-width: none;
}
.p-glossary {
  /* 金型サンプル（正型・1本飛び型・2本飛び型 等） */
}
.p-glossary__swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 22px;
}
.p-glossary__swatches li {
  width: 160px;
  text-align: center;
}
.p-glossary__swatches img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: contain;
     object-fit: contain;
  background: #F2F2F2;
  border-radius: 4px;
}
.p-glossary__swatches span {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  color: #545454;
}
.p-glossary__swatches {
  /* 2カラム・height240px・間隔100px（エキスパンドメタルJIS規格） */
}
.p-glossary__swatches--cols2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 100px;
  width: 100%;
}
.p-glossary__swatches--cols2 li {
  width: auto;
}
.p-glossary__swatches--cols2 img {
  aspect-ratio: auto;
  width: 100%;
  height: 240px;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 1440px) {
  .p-glossary__swatches--cols2 {
    gap: 40px;
  }
  .p-glossary__swatches--cols2 img {
    height: 180px;
  }
}
.p-glossary {
  /* お知らせ */
}
.p-glossary__notice {
  margin-top: 72px;
  padding: 32px 36px;
  background: #F2F2F2;
  border-radius: 6px;
}
.p-glossary__notice-ttl {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 500;
  color: #4A4947;
}
.p-glossary__notice-txt {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #545454;
}
.p-glossary__notice-txt a {
  color: #0068B6;
  text-decoration: underline;
}
.p-glossary__notice-txt a:hover {
  text-decoration: none;
}
.p-glossary__notice-note {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: #545454;
}
.p-glossary {
  /* ===== サイドバー ===== */
}
.p-glossary__side {
  display: flex;
  flex-direction: column;
}
.p-glossary__side-label {
  margin-bottom: 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #545454;
}
.p-glossary {
  /* アコーディオン */
}
.p-glossary__acc {
  border: 1px solid #D1D1D1;
  border-bottom: none;
}
.p-glossary__cat {
  border-bottom: 1px solid #D1D1D1;
}
.p-glossary__cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  background: #F2F2F2;
  font-size: 15px;
  font-weight: 500;
  color: #4A4947;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.p-glossary__cat-head::-webkit-details-marker {
  display: none;
}
.p-glossary__cat-head::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 12px;
  border-right: 2px solid #707070;
  border-bottom: 2px solid #707070;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.p-glossary__cat[open] > .p-glossary__cat-head {
  background: #0068B6;
  color: #FFFFFF;
}
.p-glossary__cat[open] > .p-glossary__cat-head::after {
  border-color: #FFFFFF;
  transform: rotate(-135deg);
}
.p-glossary__cat-list {
  background: #FFFFFF;
}
.p-glossary__cat-list li {
  border-top: 1px solid #D1D1D1;
}
.p-glossary__cat-list a {
  display: block;
  padding: 13px 18px;
  font-size: 15px;
  color: #4A4947;
  transition: color 0.2s ease, background 0.2s ease;
}
.p-glossary__cat-list a:hover {
  background: #F2F2F2;
  color: #0068B6;
}
.p-glossary__cat-list .--static {
  color: #545454;
  cursor: default;
}
.p-glossary {
  /* サイドバー内のサブ区分ラベル */
}
.p-glossary__cat-group {
  padding: 11px 18px 5px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #0068B6;
  background: #F2F2F2;
}
.p-glossary {
  /* メインCTA（青・無料お見積） */
}
.p-glossary__side-main-btn {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
  background: #0068B6;
  color: #FFFFFF;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}
.p-glossary__side-main-btn:hover {
  opacity: 0.88;
}
.p-glossary {
  /* オーダー制作 CTA */
}
.p-glossary__side-cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-glossary__side-note {
  margin: 0 0 4px;
  padding-left: 12px;
  border-left: 3px solid #383838;
  font-size: 13px;
  line-height: 1.4;
  color: #4A4947;
}
.p-glossary__side-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 16px;
  background: #0068B6;
  color: #FFFFFF;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.p-glossary__side-btn small {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.88;
}
.p-glossary__side-btn:hover {
  opacity: 0.88;
}
.p-glossary__side-btn.--dark {
  background: #004C93;
}
.p-glossary {
  /* ===== レスポンシブ ===== */
}
@media screen and (max-width: 1440px) {
  .p-glossary__layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
.p-glossary {
  /* 可変（769〜1679px）：本文（13〜18px）は固定、見出し・幅・余白・画像サイズを比例縮小 */
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-glossary {
    --_gl-pt: clamp(0px, 5.9523809524vw, 100px);
    --_gl-pb: clamp(0px, 8.3333333333vw, 140px);
    --_gl-cat-ttl-fs: clamp(26px, 2.380952381vw, 40px);
    --_gl-intro-mb: clamp(0px, 3.8095238095vw, 64px);
    --_gl-intro-pt: clamp(0px, 2.1428571429vw, 36px);
    --_gl-intro-px: clamp(24px, 2.380952381vw, 40px);
    --_gl-intro-fig-w: clamp(0px, 26.1904761905vw, 440px);
    --_gl-cat-gap: clamp(0px, 4.7619047619vw, 80px);
    --_gl-cat-pt: clamp(0px, 4.2857142857vw, 72px);
    --_gl-subhead-fs: clamp(18px, 1.4285714286vw, 24px);
    --_gl-lr-w: clamp(0px, 65.4761904762vw, 1100px);
    --_gl-fig-w: clamp(0px, 25vw, 420px);
    --_gl-swatch-w: clamp(110px, 9.5238095238vw, 160px);
    --_gl-cols2-gap: clamp(30px, 5.9523809524vw, 100px);
    --_gl-cols2-img-h: clamp(150px, 14.2857142857vw, 240px);
    padding-top: var(--_gl-pt);
    padding-bottom: var(--_gl-pb);
  }
  .p-glossary__cat-ttl {
    font-size: var(--_gl-cat-ttl-fs);
  }
  .p-glossary__intro {
    margin-bottom: var(--_gl-intro-mb);
    padding: var(--_gl-intro-pt) var(--_gl-intro-px) var(--_gl-intro-px);
  }
  .p-glossary__intro--term {
    margin-bottom: 50px;
  }
  .p-glossary__intro-fig img {
    max-width: var(--_gl-intro-fig-w);
  }
  .p-glossary__intro-fig--full img {
    max-width: none;
  }
  .p-glossary__cat-sec + .p-glossary__cat-sec {
    margin-top: var(--_gl-cat-gap);
    padding-top: var(--_gl-cat-pt);
  }
  .p-glossary__subhead {
    font-size: var(--_gl-subhead-fs);
  }
  .p-glossary__def--lr {
    max-width: var(--_gl-lr-w);
  }
  .p-glossary__fig img {
    max-width: var(--_gl-fig-w);
  }
  .p-glossary__fig--full img {
    max-width: none;
  }
  .p-glossary__swatches li {
    width: var(--_gl-swatch-w);
  }
  .p-glossary__swatches--cols2 li {
    width: auto;
  }
  .p-glossary__swatches--cols2 {
    gap: var(--_gl-cols2-gap);
  }
  .p-glossary__swatches--cols2 img {
    height: var(--_gl-cols2-img-h);
  }
}
.p-glossary {
  /* 993〜1679px：本文＋サイドバー（300px）の2カラムを保ったまま比例縮小する
     （上の$breakpoint-lの1440px以下の1カラム化を置き換え）。左右並びの図版の幅もここで可変にする */
}
@media screen and (min-width: 992.02px) and (max-width: 1679.98px) {
  .p-glossary {
    --_gl-side-w: clamp(220px, 17.8571428571vw, 300px);
    --_gl-layout-gap: clamp(0px, 3.8095238095vw, 64px);
    --_gl-lr-fig-w: clamp(300px, 35.7142857143vw, 600px);
  }
  .p-glossary__layout {
    grid-template-columns: 1fr var(--_gl-side-w);
    gap: var(--_gl-layout-gap);
  }
  .p-glossary__def--lr .p-glossary__fig {
    max-width: var(--_gl-lr-fig-w);
  }
}
@media screen and (max-width: 768px) {
  .p-glossary {
    padding-top: 60px;
    padding-bottom: 90px;
  }
  .p-glossary__layout {
    gap: 40px;
  }
  .p-glossary__side {
    display: none;
  }
  .p-glossary__cat-ttl {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .p-glossary__intro {
    padding: 22px 20px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #fff;
    border-radius: 10px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.29);
  }
  .p-glossary__intro-ttl {
    display: block;
    margin-bottom: 12px;
    padding: 0;
    background: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #0068B6;
    text-align: center;
  }
  .p-glossary__intro-txt {
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.83;
  }
  .p-glossary__intro-fig img {
    max-width: 100%;
  }
  .p-glossary__cat-sec + .p-glossary__cat-sec {
    margin-top: 48px;
    padding-top: 40px;
  }
  .p-glossary__subhead-wrap {
    margin: 32px 0 20px;
  }
  .p-glossary__subhead {
    padding-bottom: 10px;
    font-size: 15px;
    line-height: 1.5;
  }
  .p-glossary__subhead-desc {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.8;
  }
  .p-glossary__intro--term {
    margin-bottom: 32px;
    scroll-margin-top: 90px;
  }
  .p-glossary__item {
    margin-bottom: 32px;
    scroll-margin-top: 90px;
  }
  .p-glossary__term.p-prod__btitle {
    font-size: 15px;
  }
  .p-glossary__def-txt {
    font-size: 12px;
    line-height: 1.83;
  }
  .p-glossary__def--lr {
    flex-direction: column;
    gap: 14px;
  }
  .p-glossary__def--lr .p-glossary__def-txt {
    order: 1;
  }
  .p-glossary__def--lr .p-glossary__fig {
    order: 2;
    max-width: 100%;
  }
  .p-glossary__def--lr .p-glossary__fig img {
    max-width: 100%;
    width: 100%;
  }
  .p-glossary__fig {
    margin-top: 14px;
  }
  .p-glossary__fig img {
    max-width: 100%;
  }
  .p-glossary__swatches {
    gap: 16px;
  }
  .p-glossary__swatches li {
    width: calc((100% - 16px) / 2);
  }
  .p-glossary__swatches span {
    font-size: 11px;
  }
  .p-glossary__swatches--cols2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-glossary__swatches--cols2 img {
    height: auto;
    aspect-ratio: 5/3;
  }
  .p-glossary__notice {
    margin-top: 48px;
    padding: 22px 20px;
  }
  .p-glossary__notice-ttl {
    font-size: 14px;
  }
  .p-glossary__notice-txt {
    font-size: 12px;
    line-height: 1.83;
  }
  .p-glossary__notice-note {
    font-size: 11px;
    line-height: 1.7;
  }
  .p-glossary__side-label {
    font-size: 12px;
  }
  .p-glossary__cat-head {
    padding: 13px 16px;
    font-size: 14px;
  }
  .p-glossary__cat-list a {
    padding: 11px 16px;
    font-size: 13px;
  }
  .p-glossary__cat-group {
    font-size: 11px;
  }
  .p-glossary__side-main-btn {
    font-size: 13px;
    padding: 16px;
  }
  .p-glossary__side-note {
    font-size: 12px;
  }
  .p-glossary__side-btn {
    font-size: 14px;
  }
  .p-glossary__side-btn small {
    font-size: 10px;
  }
}

/*========================================================
材料について（page-material.php）
  ※レイアウト/サイドバー/ラインナップは p-prod__* を共用
========================================================*/
.p-material {
  padding-bottom: 0;
}
.p-material__item + .p-material__item {
  margin-top: 64px;
}
.p-material {
  /* サムネイル＋見出し＋概要 */
}
.p-material__lead {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.p-material__thumb {
  flex: 0 0 200px;
}
.p-material__thumb img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
.p-material__body {
  flex: 1 1 auto;
  min-width: 0;
}
.p-material__sum {
  font-size: 16px;
  line-height: 1.9;
  color: #545454;
}
.p-material {
  /* 詳細説明アコーディオン */
}
.p-material__detail {
  border: 1px solid #D1D1D1;
  background: #FFFFFF;
}
.p-material__detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: #F2F2F2;
  font-size: 16px;
  font-weight: 500;
  color: #4A4947;
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.p-material__detail-head::-webkit-details-marker {
  display: none;
}
.p-material__detail-head::after {
  content: "＋";
  margin-left: 16px;
  font-size: 18px;
  font-weight: 400;
  color: #707070;
  line-height: 1;
}
.p-material__detail[open] > .p-material__detail-head::after {
  content: "×";
}
.p-material__detail-body {
  padding: 30px 32px 34px;
}
.p-material__grade + .p-material__grade {
  margin-top: 24px;
}
.p-material__grade-name {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 500;
  color: #4A4947;
}
.p-material__grade-txt {
  font-size: 15px;
  line-height: 1.85;
  color: #545454;
}
.p-material__detail-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed #D1D1D1;
  font-size: 15px;
  line-height: 1.85;
  color: #545454;
}
.p-material__detail-empty {
  font-size: 15px;
  line-height: 1.85;
  color: #545454;
}
.p-material {
  /* ステンレス：表面仕上げ（画像＋テキスト） */
}
.p-material__finish-ttl {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed #D1D1D1;
  font-size: 16px;
  font-weight: 500;
  color: #4A4947;
}
.p-material__finish-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 18px;
}
.p-material__finish {
  display: flex;
  gap: 24px;
}
.p-material__finish-img {
  display: block;
  flex: 0 0 317px;
  width: 317px;
  height: auto;
  border-radius: 4px;
}
.p-material__finish-body {
  flex: 1;
  min-width: 0;
}
.p-material__finish-name {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 500;
  color: #4A4947;
}
.p-material__finish-txt {
  font-size: 15px;
  line-height: 1.85;
  color: #545454;
}
.p-material {
  /* その他材料：樹脂・プラスチック（大見出し＋種類別に画像＋テキスト＋リスト） */
}
.p-material__resin {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed #D1D1D1;
}
.p-material__resin-ttl {
  font-size: 20px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 14px;
}
.p-material__resin-lead {
  font-size: 15px;
  line-height: 1.85;
  color: #545454;
  margin-bottom: 30px;
}
.p-material__resin-type + .p-material__resin-type {
  margin-top: 30px;
}
.p-material__resin-type-ttl {
  font-size: 16px;
  font-weight: 500;
  color: #4A4947;
  margin-bottom: 14px;
}
.p-material__resin-type-body {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.p-material__resin-type-img {
  display: block;
  flex: 0 0 260px;
  width: 260px;
  height: auto;
  border-radius: 4px;
}
.p-material__resin-type-txt {
  flex: 1;
  min-width: 0;
}
.p-material__resin-type-txt p {
  font-size: 15px;
  line-height: 1.85;
  color: #545454;
}
.p-material__resin-type-list {
  margin-top: 12px;
}
.p-material__resin-type-list li {
  position: relative;
  padding-left: 1.2em;
  font-size: 15px;
  line-height: 1.85;
  color: #545454;
}
.p-material__resin-type-list li::before {
  content: "・";
  position: absolute;
  left: 0;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-material {
    --_mat-item-gap: clamp(0px, 3.8095238095vw, 64px);
    --_mat-thumb-w: clamp(140px, 11.9047619048vw, 200px);
    --_mat-finish-w: clamp(200px, 18.869047619vw, 317px);
    --_mat-resin-w: clamp(180px, 15.4761904762vw, 260px);
  }
  .p-material__item + .p-material__item {
    margin-top: var(--_mat-item-gap);
  }
  .p-material__thumb {
    flex-basis: var(--_mat-thumb-w);
  }
  .p-material__finish-img {
    flex-basis: var(--_mat-finish-w);
    width: var(--_mat-finish-w);
  }
  .p-material__resin-type-img {
    flex-basis: var(--_mat-resin-w);
    width: var(--_mat-resin-w);
  }
}
.p-material {
  /* ===== レスポンシブ ===== */
}
@media screen and (max-width: 768px) {
  .p-material__lead {
    flex-direction: column;
    gap: 16px;
  }
  .p-material__thumb {
    flex: 0 0 auto;
    width: 100%;
  }
  .p-material__thumb img {
    height: 190px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .p-material__sum {
    font-size: 12px;
    line-height: 1.9;
  }
  .p-material__detail-head {
    padding: 16px 20px;
    font-size: 15px;
  }
  .p-material__detail-body {
    padding: 24px 20px 26px;
  }
  .p-material__grade-name {
    font-size: 14px;
  }
  .p-material__grade-txt {
    font-size: 12px;
  }
  .p-material__detail-note {
    font-size: 12px;
  }
  .p-material__detail-empty {
    font-size: 12px;
  }
  .p-material__finish-ttl {
    font-size: 15px;
  }
  .p-material__finish {
    flex-direction: column;
    align-items: stretch;
  }
  .p-material__finish-img {
    flex: 0 0 auto;
    width: 100%;
  }
  .p-material__finish-name {
    font-size: 14px;
  }
  .p-material__finish-txt {
    font-size: 12px;
  }
  .p-material__resin-ttl {
    font-size: 15px;
  }
  .p-material__resin-lead {
    font-size: 12px;
  }
  .p-material__resin-type-ttl {
    font-size: 14px;
  }
  .p-material__resin-type-body {
    flex-direction: column;
    align-items: stretch;
  }
  .p-material__resin-type-img {
    flex: 0 0 auto;
    width: 100%;
  }
  .p-material__resin-type-txt p {
    font-size: 12px;
  }
  .p-material__resin-type-list li {
    font-size: 12px;
  }
}

/*========================================================
沿革（page-history.php）
========================================================*/
.p-history {
  width: 100%;
  max-width: min(1148px, var(--container-limit, 1148px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-history {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-history {
  padding-top: 8px;
}
.p-history__lead {
  margin-bottom: 56px;
  font-size: 16px;
  line-height: 2;
  color: #545454;
}
.p-history__timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  /* 縦ライン（先頭ドットの中心から開始＝上に突き抜けない） */
}
.p-history__timeline::before {
  content: "";
  position: absolute;
  top: 32px;
  bottom: 30px;
  left: 15px;
  width: 1px;
  background: #D1D1D1;
}
.p-history__row {
  position: relative;
  display: grid;
  /* ドット → 日付 → 本文。日付列は固定幅（320px＝最長の日付文字列＋200pxの余白を確保できる幅）にして
     行ごとに独立したグリッドでも本文の開始位置（行頭）がそろうようにする。
     auto指定だと各liが個別のグリッドコンテキストになり、日付の文字数（1月/11月等）で列幅が変わり本文の行頭がずれていた。 */
  grid-template-columns: 32px 320px 1fr;
  align-items: baseline;
  padding: 22px 0;
}
.p-history__dot {
  position: relative;
  grid-column: 1;
  justify-self: center;
  width: 11px;
  height: 11px;
  margin-top: 6px;
  border-radius: 50%;
  background: #0068B6;
  /* 節目の年表のみリングを付ける */
}
.p-history__dot--strong {
  box-shadow: 0 0 0 4px #A5C3DA;
}
.p-history__date {
  grid-column: 2;
  padding-right: 200px;
  white-space: nowrap;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.85;
  color: #0068B6;
}
.p-history__body {
  grid-column: 3;
  font-size: 16px;
  line-height: 1.85;
  color: #4A4947;
}
.p-history {
  /* 「もっと見る」クリックまでは11件目以降を非表示 */
}
.p-history__row:nth-child(n+11) {
  display: none;
}
.p-history__timeline.is-expanded .p-history__row {
  display: grid;
}
.p-history__more {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.p-history__more.is-hidden {
  display: none;
}
.p-history {
  /* もっと見るボタン：共通c-btnの矢印画像をやめ、::beforeの15px四角(border-L字)で下向き矢印に */
}
.p-history__more-btn::after {
  content: none;
}
.p-history__more-btn::before {
  content: "";
  position: static;
  order: 1;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  background: none;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-history {
    --_hist-date-w: clamp(180px, 19.0476190476vw, 320px);
    --_hist-date-pr: clamp(40px, 11.9047619048vw, 200px);
    --_hist-lead-mb: clamp(0px, 3.3333333333vw, 56px);
  }
  .p-history__lead {
    margin-bottom: var(--_hist-lead-mb);
  }
  .p-history__row {
    grid-template-columns: 32px var(--_hist-date-w) 1fr;
  }
  .p-history__date {
    padding-right: var(--_hist-date-pr);
  }
}
@media screen and (max-width: 992px) {
  .p-history {
    padding-bottom: 80px;
  }
  .p-history__timeline::before {
    left: 6px;
  }
  .p-history__row {
    grid-template-columns: 24px 1fr;
    gap: 4px 14px;
    padding: 12px 0;
  }
  .p-history__date {
    grid-column: 2;
    margin-bottom: 4px;
    padding-right: 0;
  }
  .p-history__dot {
    grid-row: 1/3;
    grid-column: 1;
    margin-top: 8px;
  }
  .p-history__body {
    grid-column: 2;
  }
}
@media screen and (max-width: 768px) {
  .p-history__lead {
    margin-bottom: 20px;
    font-size: 15px;
  }
  .p-history {
    /* 日付と本文を同じ行に並べる（タブレットの縦積みを打ち消す） */
  }
  .p-history__timeline::before {
    top: 27px;
    left: 12px;
    bottom: 30px;
    background: #0068B6;
  }
  .p-history__row {
    grid-template-columns: 24px 74px 1fr;
    -moz-column-gap: 9px;
         column-gap: 9px;
    align-items: start;
    padding: 14px 0;
  }
  .p-history__dot {
    grid-row: 1;
    grid-column: 1;
    width: 7px;
    height: 7px;
    margin-top: 5px;
  }
  .p-history__dot--strong {
    box-shadow: 0 0 0 3px #A5C3DA;
  }
  .p-history__date {
    grid-row: 1;
    grid-column: 2;
    margin-bottom: 0;
    padding-right: 0;
    font-size: 12px;
    font-weight: bold;
  }
  .p-history__body {
    grid-row: 1;
    grid-column: 3;
    font-size: 10px;
  }
}

/*========================================================
社内制度・取り組み（page-system.php）
========================================================*/
.p-system {
  /* 全幅ブロック（hero/subhead/ttl/lead）は l-cont(1500px) に追従。
     クレド・ムービー・プログラムは個別に 1160px へ絞る */
  padding-top: 8px;
  padding-bottom: 0;
}
.p-system__sec + .p-system__sec {
  margin-top: 96px;
}
.p-system {
  /* クレドバナー（全幅） */
}
.p-system__hero {
  margin-bottom: 48px;
}
.p-system__hero-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.p-system {
  /* セクション見出し（用語集 p-glossary__subhead-wrap と同スタイル） */
}
.p-system__subhead-wrap {
  margin: 56px 0 30px;
}
.p-system__subhead-wrap:first-child {
  margin-top: 0;
}
.p-system__subhead {
  margin: 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #707070;
  font-size: 24px;
  font-weight: 500;
  color: #4A4947;
}
.p-system__ttl {
  margin-top: 100px;
  margin-bottom: 16px;
  font-size: 35px;
  font-weight: 500;
  line-height: 1.5;
  color: #4A4947;
}
.p-system__lead {
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 2;
  color: #545454;
}
.p-system {
  /* ===== 七色クレド ===== */
}
.p-system__credos {
  width: 100%;
  max-width: min(1208px, var(--container-limit, 1208px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-system__credos {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-system__credos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 100px;
  margin-bottom: 56px;
  padding: 0;
  list-style: none;
}
.p-system__credo {
  --c: #707070;
  padding: 40px 60px;
  border-radius: 20px;
}
.p-system {
  /* 七色（赤・金・橙・水色・緑・紫・青） */
}
.p-system__credo--red {
  --c: #E80000;
  background: #f2ecec;
}
.p-system__credo--gold {
  --c: #E8D800;
  background: #f2f2ec;
}
.p-system__credo--orange {
  --c: #E86C00;
  background: #f2efec;
}
.p-system__credo--lblue {
  --c: #44AEFF;
  background: #ecf1f2;
}
.p-system__credo--green {
  --c: #0CB800;
  background: #ecf2ee;
}
.p-system__credo--purple {
  --c: #9600C4;
  background: #f1ecf2;
}
.p-system__credo--blue {
  --c: #0D6EB8;
  background: #e4ecf2;
}
.p-system__credo-ttl {
  margin-bottom: 14px;
  font-size: 26px;
  font-weight: 500;
  color: var(--c);
  line-height: 1.5;
}
.p-system__credo-lead {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(112, 112, 112, 0.25);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--c);
}
.p-system__credo-desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: #545454;
}
.p-system__movie {
  width: 100%;
  max-width: min(1208px, var(--container-limit, 1208px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-system__movie {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-system__movie {
  margin-top: 100px;
  margin-bottom: 140px;
}
.p-system__movie-frame {
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
}
.p-system__movie-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}
.p-system {
  /* ===== 組織改革・人材育成プログラム ===== */
}
.p-system__program {
  width: 100%;
  max-width: min(1208px, var(--container-limit, 1208px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-system__program {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-system__program {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 100px;
  margin-bottom: 140px;
}
.p-system {
  /* アイコン｜縦罫｜本文 */
}
.p-system__pbox {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: center;
  padding: 36px 56px;
  background: #F2F2F2;
  border-radius: 6px;
}
.p-system__picon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 48px;
}
.p-system__picon img {
  width: auto;
  height: 140px;
}
.p-system__pbody {
  padding: 20px 0 20px 80px;
  border-left: 1px solid #D1D1D1;
}
.p-system__pttl {
  margin-bottom: 18px;
  font-size: 30px;
  font-weight: 500;
  color: #0068B6;
}
.p-system__plist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-system__plist li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 12px;
  font-size: 25px;
  line-height: 1.8;
  color: #4A4947;
}
.p-system__plist li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #0068B6;
}
.p-system__plist li:last-child {
  margin-bottom: 0;
}
.p-system__plist--star li::before {
  content: "＊";
}
.p-system {
  /* 可変（769〜1679px）：本文（14〜16px）は固定、見出し・幅・余白・アイコンを比例縮小。
     992px以下はこの後の$breakpoint-sの値が優先 */
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-system {
    --_sys-sec-gap: clamp(0px, 5.7142857143vw, 96px);
    --_sys-hero-mb: clamp(0px, 2.8571428571vw, 48px);
    --_sys-subhead-fs: clamp(18px, 1.4285714286vw, 24px);
    --_sys-ttl-mt: clamp(0px, 5.9523809524vw, 100px);
    --_sys-ttl-fs: clamp(22px, 2.0833333333vw, 35px);
    --_sys-block-mt: clamp(0px, 5.9523809524vw, 100px);
    --_sys-block-mb: clamp(0px, 8.3333333333vw, 140px);
    --_sys-credo-py: clamp(0px, 2.380952381vw, 40px);
    --_sys-credo-px: clamp(28px, 3.5714285714vw, 60px);
    --_sys-credo-ttl-fs: clamp(20px, 1.5476190476vw, 26px);
    --_sys-pbox-icon-w: clamp(160px, 14.2857142857vw, 240px);
    --_sys-pbox-py: clamp(0px, 2.1428571429vw, 36px);
    --_sys-pbox-px: clamp(28px, 3.3333333333vw, 56px);
    --_sys-picon-pr: clamp(0px, 2.8571428571vw, 48px);
    --_sys-picon-h: clamp(90px, 8.3333333333vw, 140px);
    --_sys-pbody-pl: clamp(0px, 4.7619047619vw, 80px);
    --_sys-pttl-fs: clamp(22px, 1.7857142857vw, 30px);
    --_sys-plist-fs: clamp(18px, 1.4880952381vw, 25px);
  }
  .p-system__sec + .p-system__sec {
    margin-top: var(--_sys-sec-gap);
  }
  .p-system__hero {
    margin-bottom: var(--_sys-hero-mb);
  }
  .p-system__subhead {
    font-size: var(--_sys-subhead-fs);
  }
  .p-system__ttl {
    margin-top: var(--_sys-ttl-mt);
    font-size: var(--_sys-ttl-fs);
  }
  .p-system__credos {
    margin-top: var(--_sys-block-mt);
  }
  .p-system__credo {
    padding: var(--_sys-credo-py) var(--_sys-credo-px);
  }
  .p-system__credo-ttl {
    font-size: var(--_sys-credo-ttl-fs);
  }
  .p-system__movie, .p-system__program {
    margin-top: var(--_sys-block-mt);
    margin-bottom: var(--_sys-block-mb);
  }
  .p-system__pbox {
    grid-template-columns: var(--_sys-pbox-icon-w) 1fr;
    padding: var(--_sys-pbox-py) var(--_sys-pbox-px);
  }
  .p-system__picon {
    padding-right: var(--_sys-picon-pr);
  }
  .p-system__picon img {
    height: var(--_sys-picon-h);
  }
  .p-system__pbody {
    padding-left: var(--_sys-pbody-pl);
  }
  .p-system__pttl {
    font-size: var(--_sys-pttl-fs);
  }
  .p-system__plist li {
    font-size: var(--_sys-plist-fs);
  }
}
@media screen and (max-width: 992px) {
  .p-system__sec + .p-system__sec {
    margin-top: 64px;
  }
  .p-system__subhead {
    font-size: 20px;
  }
  .p-system__ttl {
    font-size: 18px;
  }
  .p-system__credos {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .p-system__pbox {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 24px;
  }
  .p-system__picon {
    padding-right: 0;
    padding-bottom: 20px;
    border-right: none;
    border-bottom: 1px solid #D1D1D1;
  }
  .p-system__picon img {
    height: 88px;
  }
  .p-system__pbody {
    padding-left: 0;
  }
}
@media screen and (max-width: 768px) {
  .p-system__sec + .p-system__sec {
    margin-top: 40px;
  }
  .p-system {
    /* クレドバナー：画面幅いっぱいに全幅表示・角丸なし */
  }
  .p-system__hero {
    margin-bottom: 32px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .p-system__hero-img {
    border-radius: 0;
  }
  .p-system__subhead-wrap {
    margin: 32px 0 20px;
  }
  .p-system__subhead {
    font-size: 18px;
  }
  .p-system__ttl {
    margin-top: 48px;
    font-size: 18px;
    font-weight: 700;
  }
  .p-system__lead {
    margin-bottom: 24px;
    font-size: 12px;
  }
  .p-system__credos {
    margin-top: 48px;
    margin-bottom: 32px;
  }
  .p-system {
    /* イントロカード（7色の前に入る導入文）はSPモックアップに存在しないため非表示 */
  }
  .p-system__credo--intro {
    display: none;
  }
  .p-system__credo {
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  .p-system__credo-ttl {
    font-size: 20px;
  }
  .p-system__credo-lead {
    font-size: 15px;
  }
  .p-system__credo-desc {
    font-size: 12px;
  }
  .p-system {
    /* コンセプトムービー：画面幅いっぱいに全幅表示 */
  }
  .p-system__movie {
    margin-top: 48px;
    margin-bottom: 64px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-inline: 0;
    padding-bottom: 0;
    border-radius: 0;
  }
  .p-system__movie-frame {
    border-radius: 0;
  }
  .p-system__pbox {
    gap: 0;
    padding: 20px 15px;
  }
  .p-system__program {
    margin-top: 48px;
    margin-bottom: 64px;
    padding: 0 0 40px;
  }
  .p-system__picon img {
    height: 75px;
  }
  .p-system__pbody {
    border-left: none;
  }
  .p-system__pttl {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
  }
  .p-system__plist li {
    font-size: 14px;
    font-weight: 700;
  }
}

/*========================================================
方針・規約 文書ページ共通
（サイトポリシー / 個人情報保護方針 / セキュリティ基本方針 / 事業継続方針）
========================================================*/
.c-doc {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .c-doc {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.c-doc {
  /* 重要ガイダンス（冒頭の注意書き） */
}
.c-doc__notice {
  margin-bottom: 100px;
  padding: 24px 28px;
  background: #f5f7fa;
  border: 1px solid #e0e4ea;
}
.c-doc {
  /* .c-doc__notice p より詳細度を上げる（見出しのみ20px） */
}
.c-doc__notice .c-doc__notice-ttl {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
  color: #4A4947;
}
.c-doc__notice p {
  font-size: 18px;
  line-height: 1.9;
  color: #545454;
}
.c-doc__notice p + p {
  margin-top: 4px;
}
.c-doc {
  /* 規約タイトル（〇〇利用規約 等） */
}
.c-doc__title {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #0068B6;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.6;
  color: #4A4947;
}
.c-doc__lead {
  margin-bottom: 100px;
  font-size: 18px;
  line-height: 2;
  color: #545454;
}
.c-doc a {
  color: #0068B6;
  text-decoration: underline;
}
.c-doc a:hover {
  text-decoration: none;
}
.c-doc__sec {
  margin-bottom: 40px;
}
.c-doc__sec:last-child {
  margin-bottom: 0;
}
.c-doc__h {
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: 500;
  color: #4A4947;
}
.c-doc__sec p {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 2;
  color: #545454;
}
.c-doc__sec p:last-child {
  margin-bottom: 0;
}
.c-doc__list {
  margin: 12px 0 0;
  padding-left: 1.4em;
}
.c-doc__list li {
  margin-bottom: 6px;
  font-size: 18px;
  line-height: 1.9;
  color: #545454;
  list-style: disc;
}
.c-doc {
  /* 番号付きリスト（1）（2）… */
}
.c-doc__list--paren {
  margin: 12px 0 0;
  padding-left: 0;
  list-style: none;
  counter-reset: paren;
}
.c-doc__list--paren li {
  position: relative;
  margin-bottom: 10px;
  padding-left: 2.6em;
  font-size: 18px;
  line-height: 1.9;
  list-style: none;
  counter-increment: paren;
}
.c-doc__list--paren li::before {
  content: "（" counter(paren) "）";
  position: absolute;
  left: 0;
  color: #545454;
}
.c-doc {
  /* 定義リスト（適用範囲・問い合わせ窓口 等） */
}
.c-doc__box {
  margin-top: 20px;
  padding: 24px 28px;
  background: #f5f7fa;
  border: 1px solid #e0e4ea;
}
.c-doc__box-ttl {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 500;
  color: #4A4947;
}
.c-doc__deflist {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 8px 16px;
  font-size: 18px;
  line-height: 1.9;
  color: #545454;
}
.c-doc__deflist dt {
  font-weight: 500;
  color: #4A4947;
}
.c-doc__deflist dd {
  margin: 0;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-doc__notice {
    margin-bottom: clamp(40px, 5.9523809524vw, 100px);
  }
  .c-doc__title {
    font-size: clamp(20px, 1.5476190476vw, 26px);
  }
  .c-doc__lead {
    margin-bottom: clamp(40px, 5.9523809524vw, 100px);
  }
}
@media screen and (max-width: 768px) {
  .c-doc__notice {
    margin-bottom: 40px;
    padding: 16px 20px;
  }
  .c-doc__notice .c-doc__notice-ttl {
    font-size: 14px;
  }
  .c-doc__notice p {
    font-size: 12px;
  }
  .c-doc__title {
    margin-bottom: 12px;
    padding-bottom: 10px;
    font-size: 15px;
  }
  .c-doc__lead {
    margin-bottom: 32px;
    font-size: 12px;
  }
  .c-doc__sec {
    margin-bottom: 24px;
  }
  .c-doc__h {
    margin-bottom: 10px;
    font-size: 15px;
  }
  .c-doc__sec p {
    padding-left: 1em;
    font-size: 12px;
  }
  .c-doc__list li {
    font-size: 12px;
  }
  .c-doc__list--paren li {
    font-size: 12px;
  }
  .c-doc__box {
    padding: 16px 20px;
  }
  .c-doc__box-ttl {
    font-size: 12px;
  }
  .c-doc__deflist {
    grid-template-columns: 1fr;
    gap: 2px;
    font-size: 12px;
  }
  .c-doc__deflist dd {
    margin-bottom: 10px;
  }
  .c-doc__deflist dd:last-child {
    margin-bottom: 0;
  }
}
.c-doc__history {
  margin-top: 56px;
}
.c-doc__history p {
  font-size: 18px;
  line-height: 1.9;
  color: #707070;
}
.c-doc {
  /* 制定日・署名：個人情報保護方針（__history）と同じく左寄せ・18px */
}
.c-doc__sign-block {
  margin-top: 56px;
}
.c-doc__date {
  text-align: left;
  font-size: 18px;
  line-height: 1.9;
  color: #707070;
}
.c-doc__sign {
  margin-top: 4px;
  text-align: left;
  font-size: 18px;
  line-height: 1.9;
  color: #4A4947;
}
@media screen and (max-width: 768px) {
  .c-doc__history {
    margin-top: 28px;
  }
  .c-doc__history p {
    font-size: 12px;
  }
  .c-doc__sign-block {
    margin-top: 28px;
  }
  .c-doc__date {
    font-size: 12px;
  }
  .c-doc__sign {
    font-size: 12px;
  }
}

/* 方針・規約4ページのみ、タイトル線の下の間隔を100px→50pxに */
.l-main.--doc .l-page-head {
  margin-bottom: 50px;
}

/*========================================================
サイトマップ
========================================================*/
.p-sitemap {
  width: 100%;
  max-width: min(1448px, var(--container-limit, 1448px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-sitemap {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-sitemap {
  /* 白の透過ボックス */
  padding: 30px 60px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px;
}
.p-sitemap__top {
  margin-bottom: 36px;
}
.p-sitemap__top a {
  font-size: 16px;
  font-weight: 500;
  color: #4A4947;
  border-bottom: 1px solid #4A4947;
  padding-bottom: 4px;
}
.p-sitemap__top a:hover {
  color: #0068B6;
}
.p-sitemap {
  /* 全体2カラム（左：製品/ソリューション、右：お役立ち/会社情報） */
}
.p-sitemap__layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 60px;
}
.p-sitemap__main, .p-sitemap__side {
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.p-sitemap {
  /* 大分類バンド（グレー帯＋下線） */
}
.p-sitemap__gttl {
  margin-bottom: 30px;
  padding-bottom: 12px;
  border-bottom: 1px solid #D1D1D1;
}
.p-sitemap__gttl span {
  display: inline-block;
  padding: 8px 24px;
  background: #a9a9a9;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
}
.p-sitemap {
  /* バンド内2カラム（製品・サービス／ソリューション） */
}
.p-sitemap__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.p-sitemap {
  /* 見出し（サービス一覧・カタログ一覧 等）＝下線付き */
}
.p-sitemap h3 {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #D1D1D1;
  font-size: 16px;
  font-weight: 500;
  color: #4A4947;
}
.p-sitemap h3 a:hover {
  color: #0068B6;
}
.p-sitemap h3:not(:first-child) {
  margin-top: 28px;
}
.p-sitemap {
  /* 中分類ラベル（製品一覧／機能別事例一覧 等。リンクの場合あり） */
}
.p-sitemap__cat {
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: #545454;
}
.p-sitemap__cat a {
  color: inherit;
}
.p-sitemap__cat a:hover {
  color: #0068B6;
}
.p-sitemap ul {
  margin-bottom: 8px;
}
.p-sitemap li a {
  display: block;
  position: relative;
  padding: 10px 0 10px 15px;
  font-size: 14px;
  color: #545454;
}
.p-sitemap li a::before {
  content: "-";
  position: absolute;
  left: 0;
  color: #707070;
}
.p-sitemap li a:hover {
  color: #0068B6;
}
.p-sitemap {
  /* お問い合わせボックス（右下・角丸枠） */
}
.p-sitemap__contactbox {
  margin-top: 8px;
  padding: 28px 32px;
  border: 1px solid #D1D1D1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
}
.p-sitemap__contactbox h3:not(:first-child) {
  margin-top: 18px;
}
.p-sitemap__contactbox {
  /* ダッシュなしのリンク列 */
}
.p-sitemap__contactbox .p-sitemap__plain {
  margin-top: 16px;
}
.p-sitemap__contactbox .p-sitemap__plain li a {
  padding-left: 0;
}
.p-sitemap__contactbox .p-sitemap__plain li a::before {
  content: none;
}
@media screen and (max-width: 992px) {
  .p-sitemap {
    padding: 24px;
  }
  .p-sitemap__layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .p-sitemap__cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
@media screen and (max-width: 768px) {
  .p-sitemap {
    padding: 20px 24px;
    border-radius: 8px;
  }
  .p-sitemap__top {
    margin-bottom: 24px;
  }
  .p-sitemap__top a {
    font-size: 13px;
  }
  .p-sitemap__main, .p-sitemap__side {
    gap: 32px;
  }
  .p-sitemap__gttl {
    margin-bottom: 16px;
  }
  .p-sitemap__gttl span {
    padding: 4px 24px;
    font-size: 14px;
  }
  .p-sitemap__cols {
    gap: 24px;
  }
  .p-sitemap h3 {
    font-size: 17px;
  }
  .p-sitemap__cat {
    font-size: 12px;
  }
  .p-sitemap li a {
    padding: 8px 0 8px 10px;
    font-size: 12px;
  }
  .p-sitemap__contactbox {
    padding: 20px;
  }
}

/* SP専用：主要ページへのクイックリンク（4分類へのアンカージャンプ） */
.p-sitemap-quicknav {
  display: none;
}
@media screen and (max-width: 768px) {
  .p-sitemap-quicknav {
    width: 100%;
    max-width: min(1448px, var(--container-limit, 1448px));
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
  }
}
@media screen and (max-width: 768px) and (max-width: 768px) {
  .p-sitemap-quicknav {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
@media screen and (max-width: 768px) {
  .p-sitemap-quicknav a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    height: 20px;
    padding: 0 10px;
    background: #FFFFFF;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #4A4947;
    text-align: center;
  }
}

/*========================================================
検索結果
========================================================*/
.p-search {
  width: 100%;
  max-width: min(1128px, var(--container-limit, 1128px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-search {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-search__count {
  margin-bottom: 32px;
  font-size: 16px;
  color: #545454;
}
.p-search__count strong {
  color: #0068B6;
  font-weight: 500;
}
.p-search__empty {
  margin-top: -16px;
  font-size: 14px;
  color: #707070;
}
@media screen and (max-width: 768px) {
  .p-search__count {
    margin-bottom: 20px;
    font-size: 13px;
  }
}

.c-searchlist {
  border-top: 1px solid #D1D1D1;
}
.c-searchlist__item {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 32px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid #D1D1D1;
}
.c-searchlist {
  /* サムネイルなしの行は本文を全幅に */
}
.c-searchlist__item--noimg {
  grid-template-columns: 1fr;
}
.c-searchlist__body {
  min-width: 0;
}
.c-searchlist {
  /* タイトル：1行省略。キーワード（strong）のみ青字 */
}
.c-searchlist__title {
  margin-bottom: 6px;
  font-size: 18px;
  font-weight: 500;
  color: #4A4947;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-searchlist__title strong {
  color: #0068B6;
}
.c-searchlist__title a:hover {
  text-decoration: underline;
}
.c-searchlist {
  /* パンくず：小さめグレー・1行省略 */
}
.c-searchlist__url {
  margin-bottom: 10px;
  font-size: 12px;
  color: #707070;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-searchlist {
  /* 抜粋：2行で省略。1行のみ／写真なしの場合も高さは2行分で固定 */
}
.c-searchlist__desc {
  min-height: 3.6em;
  font-size: 15px;
  line-height: 1.8;
  color: #545454;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-searchlist__thumb {
  display: block;
}
.c-searchlist__thumb img {
  width: 100%;
  aspect-ratio: 16/10;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}
.c-searchlist__thumb:hover img {
  opacity: 0.85;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-searchlist__item {
    grid-template-columns: 1fr clamp(140px, 11.9047619048vw, 200px);
    gap: clamp(20px, 1.9047619048vw, 32px);
    padding: clamp(18px, 1.6666666667vw, 28px) 0;
  }
  .c-searchlist__item--noimg {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 992px) {
  .c-searchlist__item {
    grid-template-columns: 1fr;
  }
  .c-searchlist__thumb {
    order: -1;
    max-width: 240px;
  }
}
@media screen and (max-width: 768px) {
  .c-searchlist__item {
    display: grid;
    grid-template-columns: 1fr 117px;
    -moz-column-gap: 12px;
         column-gap: 12px;
    row-gap: 4px;
    padding: 18px 0;
  }
  .c-searchlist__item--noimg {
    grid-template-columns: 1fr;
  }
  .c-searchlist__body {
    display: contents;
  }
  .c-searchlist__title {
    grid-column: 1/-1;
    margin-bottom: 0;
    font-size: 15px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
  }
  .c-searchlist__url {
    grid-column: 1;
    margin-bottom: 0;
    font-size: 8px;
  }
  .c-searchlist__desc {
    grid-column: 1;
    min-height: 0;
    font-size: 10px;
    line-height: 1.8;
    -webkit-line-clamp: 4;
  }
  .c-searchlist__thumb {
    grid-row: 2/4;
    grid-column: 2;
    order: 0;
    max-width: none;
  }
  .c-searchlist__thumb img {
    aspect-ratio: 16/9;
  }
}

/*========================================================
お知らせ一覧（本文＋サイドフィルタ）
========================================================*/
.p-newsidx {
  width: 100%;
  max-width: min(1348px, var(--container-limit, 1348px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-newsidx {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-newsidx__layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 48px;
  align-items: start;
}
@media screen and (max-width: 1200px) {
  .p-newsidx__layout {
    grid-template-columns: 1fr;
  }
}
@media screen and (min-width: 992.02px) and (max-width: 1679.98px) {
  .p-newsidx__layout {
    grid-template-columns: 1fr clamp(220px, 16.6666666667vw, 280px);
    gap: clamp(32px, 2.8571428571vw, 48px);
  }
}
@media screen and (max-width: 768px) {
  .p-newsidx__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .p-newsidx__main {
    order: 2;
    width: 100%;
  }
}

/* お知らせ一覧の New バッジ（黒塗り・角丸なし。c-newslist 本体は _lower.scss） */
.c-newslist__new {
  flex-shrink: 0;
  display: inline-block;
  padding: 4px 14px;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #FFFFFF;
  background: #000000;
  border-radius: 0;
}
@media screen and (max-width: 768px) {
  .c-newslist__new {
    padding: 3px 8px;
    font-size: 10px;
  }
}

.c-sidefilter__group {
  margin-bottom: 40px;
}
.c-sidefilter {
  /* 見出し（カテゴリ／年別アーカイブ）：細いグレーラベル */
}
.c-sidefilter__title {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 400;
  color: #707070;
}
.c-sidefilter {
  /* カテゴリ：丸はデザインのみ（input なし）。選択行は青背景ボックス */
}
.c-sidefilter__cats li + li {
  margin-top: 8px;
}
.c-sidefilter__cat {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 96px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: 16px;
  color: #545454;
  background: #fff;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.c-sidefilter__cat:hover {
  color: #0068B6;
}
.c-sidefilter__circle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #D1D1D1;
  background: #FFFFFF;
}
.c-sidefilter {
  /* 選択中：行を青背景・白文字、丸は白リング＋青中心 */
}
.c-sidefilter__cat.is-current {
  background: #0068B6;
  color: #FFFFFF;
}
.c-sidefilter__cat.is-current:hover {
  color: #FFFFFF;
}
.c-sidefilter__cat.is-current .c-sidefilter__circle {
  border: 4px solid #FFFFFF;
  background: transparent;
}
.c-sidefilter {
  /* 年代を選択：下線のみ＋シェブロン */
}
.c-sidefilter__select {
  width: 100%;
  height: 96px;
  padding: 0 28px 0 8px;
  border: none;
  border-bottom: 1px solid #D1D1D1;
  border-radius: 0;
  background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23707070' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center/16px 10px;
  font-size: 18px;
  color: #4A4947;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .c-sidefilter__group {
    margin-bottom: 24px;
  }
  .c-sidefilter__title {
    margin-bottom: 10px;
    font-size: 12px;
  }
  .c-sidefilter__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .c-sidefilter__cats li + li {
    margin-top: 0;
  }
  .c-sidefilter__cat {
    height: 21px;
    padding: 0 8px;
    gap: 4px;
    font-size: 12px;
  }
  .c-sidefilter__circle {
    width: 7px;
    height: 7px;
  }
  .c-sidefilter__cat.is-current .c-sidefilter__circle {
    border-width: 2px;
  }
  .c-sidefilter__select {
    height: 32px;
    font-size: 12px;
    width: 105px;
  }
}

/*========================================================
カタログ一覧
========================================================*/
.p-catalog2 {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-catalog2 {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-catalog2__lead {
  margin-bottom: 40px;
  font-size: 15px;
  line-height: 2;
  color: #545454;
}
.p-catalog2__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.p-catalog2 {
  /* ラインナップ：幅100%の白バンド（p-prod__band と同じ） */
}
.p-catalog2__band {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #FFFFFF;
  margin-top: 140px;
  padding: 100px 0;
}
.p-catalog2__band-in {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-catalog2__band-in {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-catalog2__lineuphead {
  position: relative;
}
.p-catalog2 {
  /* 見出し（p-prod__head と同じ） */
}
.p-catalog2__sub {
  margin-bottom: 70px;
  padding-bottom: 14px;
  border-bottom: 1px solid #D1D1D1;
}
.p-catalog2__sub .en {
  display: block;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 25px;
  letter-spacing: 0.12em;
  color: #707070;
  margin-bottom: 10px;
  font-weight: 400;
}
.p-catalog2__sub .ja {
  display: block;
  font-size: 45px;
  font-weight: 400;
  color: #4A4947;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.p-catalog2__note {
  position: absolute;
  bottom: 10px;
  right: 0;
  font-size: 13px;
  color: #545454;
}
.p-catalog2__lineup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-catalog2, [class*=p-catalog2__] {
    --_cat2-grid-gap: clamp(0px, 1.7857142857vw, 30px);
    --_cat2-band-mt: clamp(0px, 8.3333333333vw, 140px);
    --_cat2-band-py: clamp(0px, 5.9523809524vw, 100px);
    --_cat2-sub-mb: clamp(0px, 4.1666666667vw, 70px);
    --_cat2-sub-en-fs: clamp(16px, 1.4880952381vw, 25px);
    --_cat2-sub-ja-fs: clamp(26px, 2.6785714286vw, 45px);
    --_cat2-lineup-gap: clamp(0px, 4.7619047619vw, 80px);
  }
  .p-catalog2__grid {
    gap: var(--_cat2-grid-gap);
  }
  .p-catalog2__band {
    margin-top: var(--_cat2-band-mt);
    padding: var(--_cat2-band-py) 0;
  }
  .p-catalog2__sub {
    margin-bottom: var(--_cat2-sub-mb);
  }
  .p-catalog2__sub .en {
    font-size: var(--_cat2-sub-en-fs);
  }
  .p-catalog2__sub .ja {
    font-size: var(--_cat2-sub-ja-fs);
  }
  .p-catalog2__lineup {
    gap: var(--_cat2-lineup-gap);
  }
}
@media screen and (max-width: 992px) {
  .p-catalog2__grid, .p-catalog2__lineup {
    grid-template-columns: 1fr;
  }
  .p-catalog2__band {
    margin-top: 80px;
    padding: 60px 0;
  }
  .p-catalog2__sub .ja {
    font-size: 32px;
  }
}
@media screen and (max-width: 768px) {
  .p-catalog2__lead {
    margin-bottom: 24px;
    font-size: 12px;
  }
  .p-catalog2__band {
    margin-top: 48px;
    padding: 48px 0;
  }
  .p-catalog2__lineup {
    gap: 40px;
  }
  .p-catalog2__sub {
    margin-bottom: 16px;
    padding-bottom: 14px;
  }
  .p-catalog2__sub .en {
    font-size: 13px;
    margin-bottom: 8px;
  }
  .p-catalog2__sub .ja {
    font-size: 28px;
  }
  .p-catalog2__note {
    position: static;
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 12px;
  }
}

.c-catalog {
  display: grid;
  grid-template-columns: 215px 1fr;
  gap: 0;
  background: #FFFFFF;
  border-radius: 6px;
  overflow: hidden;
  padding: 50px 40px;
  /* サムネイルは本文と高さをそろえる（カード全高にフィット） */
}
.c-catalog__thumb {
  height: 100%;
}
.c-catalog__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}
.c-catalog__body {
  display: flex;
  flex-direction: column;
  padding: 0 32px;
}
.c-catalog {
  /* タイトル下にボーダー */
}
.c-catalog__ttl {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #D1D1D1;
  font-size: 20px;
  font-weight: 500;
  color: #4A4947;
}
.c-catalog__ttl a {
  color: inherit;
  text-decoration: none;
}
.c-catalog__ttl a:hover {
  text-decoration: underline;
}
.c-catalog__txt {
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.8;
  color: #545454;
}
.c-catalog {
  /* ボタンは本文の左下に縦並び・上下間隔20px */
}
.c-catalog__btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-top: auto;
}
.c-catalog__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 155px;
  height: 54px;
  border-radius: 4px;
  font-size: 16px;
  text-align: center;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.c-catalog {
  /* カタログ請求：グレー背景・白文字 */
}
.c-catalog__btn--gray {
  background: #707070;
  color: #FFFFFF;
  border: 1px solid #707070;
}
.c-catalog__btn--gray:hover {
  opacity: 0.8;
}
.c-catalog {
  /* PDFダウンロード：幅200px・赤線・赤文字・背景なし */
}
.c-catalog__btn--fill {
  width: 200px;
  background: none;
  color: #B10000;
  border: 5px solid #B10000;
  font-weight: bold;
}
.c-catalog__btn--fill:hover {
  background: #B10000;
  color: #FFFFFF;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-catalog {
    --_catalog-thumb-w: clamp(120px, 12.7976190476vw, 215px);
    --_catalog-py: clamp(24px, 2.9761904762vw, 50px);
    --_catalog-px: clamp(20px, 2.380952381vw, 40px);
    --_catalog-body-px: clamp(16px, 1.9047619048vw, 32px);
    --_catalog-btn-w: clamp(120px, 9.2261904762vw, 155px);
    --_catalog-btn-wide: clamp(150px, 11.9047619048vw, 200px);
    --_catalog-btn-h: clamp(44px, 3.2142857143vw, 54px);
    grid-template-columns: var(--_catalog-thumb-w) 1fr;
    padding: var(--_catalog-py) var(--_catalog-px);
  }
  .c-catalog__body {
    padding: 0 var(--_catalog-body-px);
  }
  .c-catalog__btn {
    width: var(--_catalog-btn-w);
    height: var(--_catalog-btn-h);
  }
  .c-catalog__btn--fill {
    width: var(--_catalog-btn-wide);
  }
}
@media screen and (max-width: 992px) {
  .c-catalog {
    grid-template-columns: 1fr;
  }
  .c-catalog__thumb img {
    height: auto;
  }
}
@media screen and (max-width: 768px) {
  .c-catalog {
    /* タブレットの縦積みではなく「サムネイル(左)＋タイトル/本文(右)」の2列を維持し、
       ボタン行だけ2列分の全幅で下に配置される構成のため、display:contentsで__body内の
       要素を親グリッドへ引き上げてrow/columnを個別指定する */
    display: grid;
    grid-template-columns: 103px 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
    align-items: stretch;
    padding: 15px;
    border-radius: 10px;
  }
  .c-catalog__thumb {
    grid-column: 1;
    grid-row: 1/3;
    height: auto;
  }
  .c-catalog__thumb img {
    width: 100%;
    height: 100%;
  }
  .c-catalog__body {
    display: contents;
  }
  .c-catalog__ttl {
    grid-column: 2;
    grid-row: 1;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    font-size: 12px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #707070;
  }
  .c-catalog__txt {
    grid-column: 2;
    grid-row: 2;
    margin-bottom: 0;
    font-size: 10px;
    padding-top: 10px;
  }
  .c-catalog__btns {
    grid-column: 1/-1;
    grid-row: 3;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }
  .c-catalog__btn {
    width: 137px;
    flex: none;
    height: 37px;
    border-radius: 3px;
    font-size: 12px;
  }
  .c-catalog__btn--fill {
    width: 137px;
    border-width: 2px;
  }
}

.c-media {
  display: block;
}
.c-media__img {
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 4px;
}
.c-media__img img {
  width: 100%;
  display: block;
  transition: transform 0.6s ease;
}
.c-media__img a:hover img {
  transform: scale(1.05);
}
.c-media__ttl {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 500;
  color: #4A4947;
}
.c-media__txt {
  font-size: 18px;
  line-height: 1.9;
  color: #545454;
}
@media screen and (max-width: 768px) {
  .c-media__ttl {
    margin-bottom: 16px;
    font-size: 16px;
  }
  .c-media__img {
    margin-bottom: 16px;
  }
  .c-media__txt {
    font-size: 14px;
    line-height: 1.9;
  }
}

/*========================================================
在庫表一覧（カードインデックス）
========================================================*/
.p-stock {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-stock {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-stock {
  margin-bottom: 140px;
}
.p-stock__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-stock {
    --_stock-gap: clamp(0px, 1.7857142857vw, 30px);
    --_stock-mb: clamp(0px, 8.3333333333vw, 140px);
    margin-bottom: var(--_stock-mb);
  }
  .p-stock__cards {
    gap: var(--_stock-gap);
  }
}
@media screen and (max-width: 992px) {
  .p-stock__cards {
    grid-template-columns: 1fr;
  }
}

.c-stockcard {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.c-stockcard img {
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
.c-stockcard:hover img {
  transform: scale(1.05);
}
.c-stockcard span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 20px;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  border-radius: 0 0 16px 16px;
  color: #FFFFFF;
  font-size: 24px;
  font-weight: 500;
  height: 100px;
  display: flex;
  align-items: center;
  letter-spacing: 0.04em;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-stockcard {
    --_stockcard-fs: clamp(18px, 1.4285714286vw, 24px);
    --_stockcard-h: clamp(64px, 5.9523809524vw, 100px);
    --_stockcard-p: clamp(14px, 1.1904761905vw, 20px);
  }
  .c-stockcard span {
    font-size: var(--_stockcard-fs);
    height: var(--_stockcard-h);
    padding: var(--_stockcard-p);
  }
}

/*========================================================
在庫表（スペック表）共通
========================================================*/
.p-stocktable {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-stocktable {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-stocktable {
  margin-top: 200px;
}
.p-stocktable__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 70px;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid #D1D1D1;
}
.p-stocktable__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 48px;
  border: 1px solid #D1D1D1;
  border-radius: 999px;
  font-size: 20px;
  color: #707070;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.p-stocktable__tab.is-active, .p-stocktable__tab:hover {
  background: #707070;
  color: #FFFFFF;
  border-color: #707070;
}
.p-stocktable__sec {
  margin-bottom: 60px;
}
.p-stocktable__sec[data-panel] {
  display: none;
}
.p-stocktable__sec[data-panel].is-active {
  display: block;
}
.p-stocktable__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 500;
  color: #4A4947;
}
.p-stocktable__head::before {
  content: "";
  width: 4px;
  height: 26px;
  background: #545454;
}
.p-stocktable__notes {
  margin-bottom: 100px;
  padding: 0;
  list-style: none;
}
.p-stocktable__notes li {
  position: relative;
  font-size: 18px;
  line-height: 1.9;
  color: #545454;
}
.p-stocktable__subhead {
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 500;
  color: #4A4947;
}
.p-stocktable__lead {
  font-size: 16px;
  line-height: 1.8;
  color: #545454;
}
.p-stocktable__scroll {
  margin-bottom: 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.p-stocktable__inner {
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
.p-stocktable__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  margin-bottom: 100px;
}
.p-stocktable__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #545454;
}
.p-stocktable__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.p-stocktable__dot--fill {
  background: #0068B6;
}
.p-stocktable__dot--outline {
  background: #FFFFFF;
  border: 1px solid #707070;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-stocktable {
    --_stocktable-mt: clamp(0px, 11.9047619048vw, 200px);
    --_stocktable-tabs-gap: clamp(24px, 4.1666666667vw, 70px);
    --_stocktable-tab-w: clamp(140px, 11.9047619048vw, 200px);
    --_stocktable-head-fs: clamp(18px, 1.4285714286vw, 24px);
    --_stocktable-block-mb: clamp(0px, 5.9523809524vw, 100px);
    margin-top: var(--_stocktable-mt);
  }
  .p-stocktable__tabs {
    gap: var(--_stocktable-tabs-gap);
  }
  .p-stocktable__tab {
    min-width: var(--_stocktable-tab-w);
  }
  .p-stocktable__head {
    font-size: var(--_stocktable-head-fs);
  }
  .p-stocktable__notes, .p-stocktable__legend {
    margin-bottom: var(--_stocktable-block-mb);
  }
  .p-stocktable__inner {
    width: 100%;
  }
  .p-stocktable__subhead, .p-stocktable__lead {
    margin-inline: auto;
  }
}
@media screen and (max-width: 768px) {
  .p-stocktable {
    margin-top: 24px;
  }
  .p-stocktable__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
    margin-bottom: 20px;
    padding-bottom: 14px;
  }
  .p-stocktable__tab {
    min-width: 0;
    width: 100%;
    height: 38px;
    font-size: 13px;
  }
  .p-stocktable__sec {
    margin-bottom: 32px;
  }
  .p-stocktable__head {
    gap: 10px;
    margin-bottom: 14px;
    font-size: 15px;
  }
  .p-stocktable__head::before {
    height: 18px;
  }
  .p-stocktable__notes {
    margin-bottom: 32px;
  }
  .p-stocktable__notes li {
    font-size: 12px;
    line-height: 2;
  }
  .p-stocktable__subhead {
    font-size: 14px;
  }
  .p-stocktable__lead {
    font-size: 12px;
  }
  .p-stocktable__scroll {
    margin-bottom: 16px;
  }
  .p-stocktable__inner {
    width: 100%;
  }
  .p-stocktable__legend {
    gap: 6px 20px;
    margin-bottom: 40px;
    justify-content: flex-start;
  }
  .p-stocktable__legend-item {
    font-size: 12px;
  }
  .p-stocktable__dot {
    width: 12px;
    height: 12px;
  }
}

/*========================================================
スペック表本体
========================================================*/
.c-stocktable {
  width: 1200px;
  min-width: 1200px;
  border-collapse: collapse;
  font-size: 14px;
  margin: 15px auto 0;
}
.c-stocktable th, .c-stocktable td {
  padding: 8px 10px;
  border: 1px solid #D1D1D1;
  text-align: center;
  white-space: nowrap;
}
.c-stocktable thead th {
  background: #0068B6;
  color: #FFFFFF;
  font-weight: 400;
  line-height: 1.4;
}
.c-stocktable tbody th {
  background: #FFFFFF;
  color: #4A4947;
  font-weight: 500;
}
.c-stocktable td {
  background: #FFFFFF;
}
.c-stocktable .o {
  color: #0068B6;
  font-weight: 500;
}
.c-stocktable .om {
  color: #707070;
  font-weight: 500;
}
.c-stocktable .g {
  color: #b9b9b9;
  font-weight: 500;
}
.c-stocktable a .o {
  text-decoration: underline;
}
.c-stocktable--punching td, .c-stocktable--punching th, .c-stocktable--expand td, .c-stocktable--expand th {
  padding: 7px 8px;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .c-stocktable {
    width: min(1200px, 100%);
    min-width: 0;
  }
  .c-stocktable th, .c-stocktable td {
    padding: clamp(5px, 0.4761904762vw, 8px) clamp(5px, 0.5952380952vw, 10px);
  }
  .c-stocktable--punching td, .c-stocktable--punching th, .c-stocktable--expand td, .c-stocktable--expand th {
    padding: clamp(4px, 0.4166666667vw, 7px) clamp(4px, 0.4761904762vw, 8px);
  }
}
@media screen and (max-width: 768px) {
  .c-stocktable {
    width: 100%;
    min-width: 0;
    font-size: 9px;
    margin-top: 10px;
  }
  .c-stocktable th, .c-stocktable td {
    padding: 6px 6px;
  }
  .c-stocktable--punching td, .c-stocktable--punching th, .c-stocktable--expand td, .c-stocktable--expand th {
    padding: 5px 5px;
  }
}

/* 採用情報 アクセント（ティール） */
/*========================================================
採用情報トップ（セクション1〜5）
========================================================*/
.p-rec {
  /* ===== セクション1：ヒーロー（上下100px・コンテンツ幅） ===== */
}
.p-rec__hero {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-rec__hero {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-rec__hero {
  margin-bottom: 100px;
}
.p-rec__hero img {
  display: block;
  width: 100%;
  height: auto;
}
.p-rec {
  /* 内側コンテナ（メッセージ〜先輩社員） */
}
.p-rec__inner {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-rec__inner {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-rec {
  /* ===== セクション1：メッセージ ===== */
}
.p-rec__msg {
  margin-bottom: 140px;
}
.p-rec__msg-en {
  display: block;
  margin-bottom: 18px;
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: #707070;
}
.p-rec__msg-ttl {
  position: relative;
  margin-bottom: 36px;
  padding-bottom: 30px;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: #4A4947;
}
.p-rec__msg-ttl::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  background: #707070;
}
.p-rec__msg-body p {
  font-size: 16px;
  line-height: 2.1;
  color: #545454;
}
.p-rec {
  /* ===== 共通：セクション ===== */
}
.p-rec__sec {
  margin-bottom: 140px;
}
.p-rec {
  /* 見出し（_about の p-about__sec-ttl と統一）。h2見出し下は100px空ける */
}
.p-rec__sec-ttl {
  margin-bottom: 100px;
  padding-bottom: 18px;
  border-bottom: 2px solid #383838;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #4A4947;
}
.p-rec {
  /* ===== セクション5：白背景バンド（募集要項） ===== */
}
.p-rec__band {
  position: relative;
  width: 100%;
  margin-bottom: 0;
  padding: 100px 0 120px;
  background: #FFFFFF;
}
.p-rec__band-in {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-rec__band-in {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-rec {
    --_rec-hero-mb: clamp(0px, 5.9523809524vw, 100px);
    --_rec-msg-mb: clamp(0px, 8.3333333333vw, 140px);
    --_rec-msg-ttl-fs: clamp(24px, 2.1428571429vw, 36px);
    --_rec-msg-ttl-mb: clamp(0px, 2.1428571429vw, 36px);
    --_rec-msg-ttl-pb: clamp(0px, 1.7857142857vw, 30px);
    --_rec-sec-mb: clamp(0px, 8.3333333333vw, 140px);
    --_rec-sec-ttl-mb: clamp(0px, 5.9523809524vw, 100px);
    --_rec-sec-ttl-fs: clamp(20px, 1.6666666667vw, 28px);
    --_rec-band-pt: clamp(0px, 5.9523809524vw, 100px);
    --_rec-band-pb: clamp(0px, 7.1428571429vw, 120px);
  }
  .p-rec__hero {
    margin-bottom: var(--_rec-hero-mb);
  }
  .p-rec__msg {
    margin-bottom: var(--_rec-msg-mb);
  }
  .p-rec__msg-ttl {
    margin-bottom: var(--_rec-msg-ttl-mb);
    padding-bottom: var(--_rec-msg-ttl-pb);
    font-size: var(--_rec-msg-ttl-fs);
  }
  .p-rec__sec {
    margin-bottom: var(--_rec-sec-mb);
  }
  .p-rec__sec-ttl {
    margin-bottom: var(--_rec-sec-ttl-mb);
    font-size: var(--_rec-sec-ttl-fs);
  }
  .p-rec__band {
    padding: var(--_rec-band-pt) 0 var(--_rec-band-pb);
  }
}
@media screen and (max-width: 992px) {
  .p-rec__hero {
    margin-bottom: 60px;
  }
  .p-rec__msg {
    margin-bottom: 80px;
  }
  .p-rec__msg-ttl {
    font-size: 26px;
  }
  .p-rec__sec {
    margin-bottom: 80px;
  }
  .p-rec__band {
    padding: 60px 0 72px;
  }
}
.p-rec {
  /* SP専用調整 */
}
@media screen and (max-width: 768px) {
  .p-rec__hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-bottom: 0;
  }
  .p-rec__msg-en {
    margin-bottom: 8px;
    font-size: 12px;
  }
  .p-rec__msg-ttl {
    margin-bottom: 16px;
    padding-bottom: 16px;
    font-size: 18px;
    font-weight: 700;
  }
  .p-rec__msg-body p {
    font-size: 14px;
  }
  .p-rec__sec-ttl {
    margin-bottom: 24px;
    padding-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
  }
  .p-rec__sec {
    margin-bottom: 0px;
  }
}

/*========================================================
拠点紹介スライダー（サムネイル付き：セクション2）
========================================================*/
.p-loc__stage {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: flex-start;
}
.p-loc__img {
  overflow: hidden;
}
.p-loc__img img {
  display: block;
  width: 100%;
  aspect-ratio: 625/470;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-loc {
  /* SP専用スライダー（p-loc__track）。PC/タブレットでは非表示 */
}
.p-loc__track {
  display: none;
}
.p-loc__body {
  padding-top: 8px;
}
.p-loc__name {
  margin-bottom: 30px;
  font-size: 26px;
  font-weight: 500;
  color: #4A4947;
}
.p-loc__txt {
  margin-bottom: 56px;
  font-size: 16px;
  line-height: 2;
  color: #545454;
}
.p-loc__ctrl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.p-loc__arrows {
  display: flex;
  gap: 14px;
}
.p-loc__arrow {
  position: relative;
  width: 56px;
  height: 56px;
  border: 1px solid #D1D1D1;
  background: #FFFFFF;
  cursor: pointer;
  transition: 0.3s;
}
.p-loc__arrow::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  border: solid #707070;
  border-width: 2px 2px 0 0;
}
.p-loc__arrow.--prev::before {
  right: 28%;
  transform: rotate(-135deg);
}
.p-loc__arrow.--next::before {
  left: 28%;
  transform: rotate(45deg);
}
.p-loc__arrow:hover {
  border-color: #383838;
}
.p-loc__arrow:hover::before {
  border-color: #383838;
}
.p-loc {
  /* 事業所・アクセス ボタン（TOP「詳しくみる」= c-btn c-btn--gray を使用。
     矢印が右下に出るぶん右側に余白を確保） */
}
.p-loc__ctrl .c-btn {
  margin-right: 40px;
}
.p-loc {
  /* サムネイル列（5枚） */
}
.p-loc__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.p-loc__thumb {
  padding: 0;
  border: none;
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.3s;
}
.p-loc__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-loc__thumb.is-active, .p-loc__thumb:hover {
  opacity: 1;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-loc {
    --_loc-max: clamp(0px, 78.5714285714vw, 1320px);
    --_loc-stage-mb: clamp(0px, 2.380952381vw, 40px);
    --_loc-stage-gap: clamp(0px, 3.8095238095vw, 64px);
    --_loc-name-fs: clamp(20px, 1.5476190476vw, 26px);
    --_loc-name-mb: clamp(0px, 1.7857142857vw, 30px);
    --_loc-txt-mb: clamp(0px, 3.3333333333vw, 56px);
    --_loc-arrow: clamp(40px, 3.3333333333vw, 56px);
    --_loc-thumbs-gap: clamp(0px, 1.1904761905vw, 20px);
  }
  .p-loc__stage {
    max-width: var(--_loc-max);
    margin-bottom: var(--_loc-stage-mb);
    gap: var(--_loc-stage-gap);
  }
  .p-loc__name {
    margin-bottom: var(--_loc-name-mb);
    font-size: var(--_loc-name-fs);
  }
  .p-loc__txt {
    margin-bottom: var(--_loc-txt-mb);
  }
  .p-loc__arrow {
    width: var(--_loc-arrow);
    height: var(--_loc-arrow);
  }
  .p-loc__thumbs {
    gap: var(--_loc-thumbs-gap);
  }
}
@media screen and (max-width: 992px) {
  .p-loc__stage {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .p-loc__name {
    font-size: 22px;
  }
  .p-loc__txt {
    margin-bottom: 32px;
  }
  .p-loc__thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .p-loc {
    /* 並び順を 画像 → テキスト → thumbs → access の順に変更するため
       stage/body を display:contents で解いて .p-loc の直接の子として order 指定する */
    display: flex;
    flex-direction: column;
  }
  .p-loc__stage {
    display: contents;
  }
  .p-loc__body {
    display: contents;
  }
  .p-loc {
    /* 画像：画面幅いっぱい＋スワイプ可能なスライダー（p-loc__track）に切り替え。
       通常表示用の p-loc__img-el は隠し、前後に50px幅の複製スライドを置くことで
       初期表示（先頭スライド）でも左右どちらもチラ見せできるようにする */
  }
  .p-loc__img {
    order: 1;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }
  .p-loc__img .p-loc__img-el {
    display: none;
  }
  .p-loc__track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    scrollbar-width: none;
  }
  .p-loc__track::-webkit-scrollbar {
    display: none;
  }
  .p-loc__slide {
    flex: 0 0 calc(100% - 100px);
    scroll-snap-align: center;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 15px;
  }
  .p-loc__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 625/470;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .p-loc__slide {
    /* 左右チラ見せ用の複製スライド：スワイプ・スナップ・クリック対象外の飾り */
  }
  .p-loc__slide--clone {
    scroll-snap-align: none;
    pointer-events: none;
  }
  .p-loc__name {
    order: 2;
    margin-bottom: 12px;
    font-size: 15px;
  }
  .p-loc__txt {
    order: 3;
    margin-bottom: 24px;
    font-size: 14px;
  }
  .p-loc {
    /* 矢印ボタンなし・サムネイルは丸ドットのページネーションに簡略化 */
  }
  .p-loc__arrows {
    display: none;
  }
  .p-loc__ctrl {
    order: 5;
    justify-content: flex-end;
  }
  .p-loc__ctrl .c-btn {
    margin-right: 0;
  }
  .p-loc__thumbs {
    order: 4;
    grid-template-columns: repeat(5, auto);
    justify-content: center;
    gap: 6px;
    margin-bottom: 24px;
  }
  .p-loc__thumb {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0.5px solid #707070;
    opacity: 1;
  }
  .p-loc__thumb img {
    display: none;
  }
  .p-loc__thumb.is-active {
    background: #545454;
    border-color: #545454;
  }
}

/*========================================================
福利厚生（セクション3）
========================================================*/
.p-welfare__grid {
  width: 100%;
  max-width: min(1038px, var(--container-limit, 1038px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-welfare__grid {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-welfare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.p-welfare__text {
  text-align: center;
  font-size: 25px;
  line-height: 1.7;
  color: #4A4947;
  margin-bottom: 50px;
}
.p-welfare__img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-welfare__grid {
    gap: clamp(0px, 1.4285714286vw, 24px);
  }
  .p-welfare__text {
    font-size: clamp(18px, 1.4880952381vw, 25px);
  }
}
@media screen and (max-width: 992px) {
  .p-welfare__grid {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 768px) {
  .p-welfare__grid {
    padding-left: 0;
    padding-right: 0;
  }
  .p-welfare__text {
    font-size: 15px;
  }
}

/*========================================================
先輩社員の一言（セクション4）
========================================================*/
.p-voice {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px 30px;
}
.p-voice__card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #D5E3EF;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.p-voice__card:hover {
  transform: translateY(-4px);
}
.p-voice__photo {
  aspect-ratio: 1/1;
}
.p-voice__photo img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
.p-voice__card:hover .p-voice__photo img {
  transform: scale(1.05);
}
.p-voice__cap {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 18px 20px 20px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
}
.p-voice__txt {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #0068B6;
}
.p-voice__name {
  font-size: 14px;
  color: #0068B6;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-voice {
    max-width: clamp(0px, 78.5714285714vw, 1320px);
    gap: clamp(0px, 2.9761904762vw, 50px) clamp(0px, 1.7857142857vw, 30px);
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1500px) {
  .p-voice {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1100px) {
  .p-voice {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 992px) {
  .p-voice {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .p-voice {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .p-voice__cap {
    padding: 10px;
  }
  .p-voice__txt {
    margin-bottom: 4px;
    font-size: 9px;
  }
  .p-voice__name {
    font-size: 9px;
  }
}

/*========================================================
募集要項（セクション5：タブ切替）
========================================================*/
.p-job {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
}
.p-job__cat {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 500;
  color: #4A4947;
}
.p-job__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 50px;
}
.p-job__tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 16px;
  border: none;
  background: #C9C9C9;
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}
.p-job__tab::after {
  content: "";
  width: 11px;
  height: 11px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: translateY(-3px) rotate(45deg);
}
.p-job__tab.is-active {
  background: #27A39E;
}
.p-job__tab.is-active::after {
  transform: translateY(2px) rotate(-135deg);
}
.p-job__panel {
  display: none;
}
.p-job__panel.is-active {
  display: block;
}
.p-job__row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  padding: 32px 10px;
  border-bottom: 1px solid #D1D1D1;
}
.p-job__row:first-child {
  border-top: 1px solid #D1D1D1;
}
.p-job__label {
  font-size: 20px;
  font-weight: 500;
  color: #4A4947;
  padding-left: 70px;
  margin-top: 10px;
}
.p-job__val {
  font-size: 18px;
  line-height: 1.9;
  color: #545454;
}
.p-job__entry {
  margin-top: 64px;
  text-align: center;
}
.p-job__entry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  height: 70px;
  background: #27A39E;
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border-radius: 2px;
  transition: opacity 0.2s ease;
}
.p-job__entry-btn:hover {
  opacity: 0.85;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-job {
    --_job-max: clamp(0px, 78.5714285714vw, 1320px);
    --_job-tabs-mb: clamp(0px, 2.9761904762vw, 50px);
    --_job-label-w: clamp(160px, 14.2857142857vw, 240px);
    --_job-row-gap: clamp(0px, 2.380952381vw, 40px);
    --_job-row-py: clamp(0px, 1.9047619048vw, 32px);
    --_job-label-pl: clamp(0px, 4.1666666667vw, 70px);
    --_job-entry-mt: clamp(0px, 3.8095238095vw, 64px);
    --_job-entry-w: clamp(220px, 17.8571428571vw, 300px);
    --_job-entry-h: clamp(54px, 4.1666666667vw, 70px);
    max-width: var(--_job-max);
  }
  .p-job__tabs {
    margin-bottom: var(--_job-tabs-mb);
  }
  .p-job__row {
    grid-template-columns: var(--_job-label-w) 1fr;
    gap: var(--_job-row-gap);
    padding: var(--_job-row-py) 10px;
  }
  .p-job__label {
    padding-left: var(--_job-label-pl);
  }
  .p-job__entry {
    margin-top: var(--_job-entry-mt);
  }
  .p-job__entry-btn {
    min-width: var(--_job-entry-w);
    height: var(--_job-entry-h);
  }
}
@media screen and (max-width: 992px) {
  .p-job__tabs {
    grid-template-columns: 1fr 1fr;
  }
  .p-job__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .p-job__label {
    text-align: left;
  }
}
@media screen and (max-width: 768px) {
  .p-job__cat {
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
  }
  .p-job__tabs {
    gap: 10px;
    margin-bottom: 24px;
  }
  .p-job__tab {
    gap: 8px;
    padding: 10px 8px;
    font-size: 12px;
  }
  .p-job__tab::after {
    width: 8px;
    height: 8px;
  }
  .p-job__row {
    padding: 15px;
  }
  .p-job__label {
    padding-left: 0;
    margin-top: 0;
    font-size: 15px;
    font-weight: 700;
  }
  .p-job__val {
    font-size: 12px;
  }
  .p-job__entry {
    margin-top: 32px;
  }
  .p-job__entry-btn {
    min-width: 0;
    width: 142px;
    height: 41px;
    font-size: 12px;
    border-radius: 3px;
  }
}

/*========================================================
先輩社員インタビュー
========================================================*/
.p-interview {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-interview {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-interview {
  /* ===== プロフィール＋あいさつ ===== */
}
.p-interview__intro {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  margin-bottom: 90px;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 64px;
  align-items: start;
}
.p-interview__photo {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 4px;
  overflow: hidden;
  background: #ededed;
}
.p-interview__photo img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.p-interview__name {
  margin-top: 18px;
  padding: 16px;
  border-radius: 2px;
  background: #c9dcea;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #0068B6;
}
.p-interview__msg {
  position: relative;
  padding: 44px 48px;
  background: #FFFFFF;
  border-radius: 8px;
  /* 左向きの吹き出し三角（アバター側を指す） */
}
.p-interview__msg::before {
  content: "";
  position: absolute;
  top: 56px;
  left: -22px;
  border-style: solid;
  border-width: 16px 22px 16px 0;
  border-color: transparent #FFFFFF transparent transparent;
}
.p-interview__quote {
  margin-bottom: 48px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #0068B6;
}
.p-interview {
  /* 2行目を字下げ */
}
.p-interview__quote-sub {
  display: inline-block;
  padding-left: 2em;
}
.p-interview__lead {
  font-size: 18px;
  line-height: 2.1;
  color: #545454;
}
.p-interview {
  /* ===== 下部：ブルーグレーの大ボックス ===== */
}
.p-interview__box {
  padding: 70px;
  border-radius: 24px;
  background: rgba(214, 225, 234, 0.5);
}
.p-interview__block + .p-interview__block {
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid #d3dbe3;
}
.p-interview__q {
  margin-bottom: 22px;
  font-size: 22px;
  font-weight: 500;
  color: #0068B6;
}
.p-interview__a {
  font-size: 18px;
  line-height: 2.1;
  color: #545454;
}
.p-interview {
  /* 仕事のやりがい（画像左＋テキスト右） */
}
.p-interview__block--media {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 56px;
  align-items: center;
}
.p-interview__img, .p-interview__sche-img {
  border-radius: 4px;
  overflow: hidden;
  background: #d7dde4;
  aspect-ratio: 4/3;
}
.p-interview__img img, .p-interview__sche-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.p-interview__block-body .p-interview__q {
  margin-top: 0;
}
.p-interview {
  /* 1日のスケジュール（タイムライン左／画像右） */
}
.p-interview__sche-wrap {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 56px;
  align-items: start;
}
.p-interview__sche {
  position: relative;
}
.p-interview__sche::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: #c4ccd5;
}
.p-interview__sche-item {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 20px;
  align-items: center;
  padding: 11px 0 11px 32px;
}
.p-interview__sche-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #8893a0;
}
.p-interview__sche-item time {
  font-family: "Century Gothic", "Futura", "Noto Sans JP", sans-serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: #0068B6;
}
.p-interview__sche-item p {
  font-size: 18px;
  line-height: 1.7;
  color: #545454;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-interview {
    --_iv-intro-max: clamp(0px, 78.5714285714vw, 1320px);
    --_iv-intro-mb: clamp(0px, 5.3571428571vw, 90px);
    --_iv-photo-w: clamp(240px, 23.8095238095vw, 400px);
    --_iv-intro-gap: clamp(0px, 3.8095238095vw, 64px);
    --_iv-msg-py: clamp(0px, 2.619047619vw, 44px);
    --_iv-msg-px: clamp(0px, 2.8571428571vw, 48px);
    --_iv-quote-fs: clamp(22px, 1.9047619048vw, 32px);
    --_iv-quote-mb: clamp(0px, 2.8571428571vw, 48px);
    --_iv-box-p: clamp(32px, 4.1666666667vw, 70px);
    --_iv-block-gap: clamp(0px, 3.3333333333vw, 56px);
  }
  .p-interview__intro {
    max-width: var(--_iv-intro-max);
    margin-bottom: var(--_iv-intro-mb);
    grid-template-columns: var(--_iv-photo-w) 1fr;
    gap: var(--_iv-intro-gap);
  }
  .p-interview__msg {
    padding: var(--_iv-msg-py) var(--_iv-msg-px);
  }
  .p-interview__quote {
    margin-bottom: var(--_iv-quote-mb);
    font-size: var(--_iv-quote-fs);
  }
  .p-interview__box {
    padding: var(--_iv-box-p);
  }
  .p-interview__block + .p-interview__block {
    margin-top: var(--_iv-block-gap);
    padding-top: var(--_iv-block-gap);
  }
  .p-interview__block--media, .p-interview__sche-wrap {
    gap: var(--_iv-block-gap);
  }
}
@media screen and (max-width: 992px) {
  .p-interview__intro {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .p-interview__profile {
    max-width: 320px;
    margin: 0 auto;
  }
  .p-interview__quote {
    font-size: 24px;
  }
  .p-interview__quote-sub {
    padding-left: 0;
  }
  .p-interview {
    /* SP：吹き出し三角は上向き（アバターが上に来るため） */
  }
  .p-interview__msg::before {
    top: -22px;
    left: 50px;
    border-width: 0 16px 22px 16px;
    border-color: transparent transparent #FFFFFF transparent;
  }
  .p-interview__box {
    padding: 32px 24px;
  }
  .p-interview__block--media {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .p-interview__sche-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media screen and (max-width: 768px) {
  .p-interview__intro {
    margin-bottom: 32px;
  }
  .p-interview__name {
    margin-top: 8px;
    padding: 10px 16px;
  }
  .p-interview__msg {
    padding: 24px 14px;
  }
  .p-interview__msg::before {
    left: 50%;
    transform: translateX(-50%);
  }
  .p-interview__quote {
    margin-bottom: 16px;
    font-size: 18px;
    line-height: 1.4;
  }
  .p-interview__lead {
    font-size: 12px;
    line-height: 1.85;
  }
  .p-interview__box {
    padding: 24px 13px;
    border-radius: 10px;
  }
  .p-interview__block + .p-interview__block {
    margin-top: 32px;
    padding-top: 32px;
  }
  .p-interview__q {
    margin-bottom: 12px;
    font-size: 15px;
  }
  .p-interview__a {
    font-size: 12px;
    line-height: 1.85;
  }
  .p-interview__img, .p-interview__sche-img {
    aspect-ratio: 3/2;
  }
  .p-interview__sche-item {
    grid-template-columns: 50px 1fr;
    gap: 8px;
    padding: 8px 0 8px 24px;
  }
  .p-interview__sche-item::before {
    width: 12px;
    height: 12px;
    background: #707070;
  }
  .p-interview__sche-item time {
    font-size: 12px;
  }
  .p-interview__sche-item p {
    font-size: 12px;
    line-height: 1.6;
  }
  .p-interview {
    /* 「1日のスケジュール」：画像 → 見出し → タイムライン の順に並べるため、
       blockをflex化してsche-wrapをdisplay:contentsで解除し、orderで並び替え */
  }
  .p-interview__block:has(> .p-interview__sche-wrap) {
    display: flex;
    flex-direction: column;
  }
  .p-interview__block:has(> .p-interview__sche-wrap) > .p-interview__q {
    order: 2;
  }
  .p-interview__sche-wrap {
    display: contents;
  }
  .p-interview__sche {
    order: 3;
  }
  .p-interview__sche-img {
    order: 1;
    margin-bottom: 20px;
  }
}

/*========================================================
外装デザイン（事例リスト＋用途別セクション）
========================================================*/
.p-facade {
  margin-top: 150px;
  /* ── 施工事例リスト ── */
}
.p-facade__case {
  padding: 40px;
  background: #F8F8F8;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 50px;
}
.p-facade__case:first-of-type {
  border-top: 1px solid #D1D1D1;
}
.p-facade__case-ttl {
  margin-bottom: 25px;
  font-size: 24px;
  font-weight: 500;
  color: #4A4947;
}
.p-facade__case-row {
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  gap: 20px;
  align-items: flex-end;
}
.p-facade__case-row > img {
  width: 100%;
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.p-facade__case-btn {
  text-align: center;
}
.p-facade {
  /* ── 用途別セクション（見出しありセクションは150px間隔） ── */
}
.p-facade__use {
  margin-top: 150px;
}
.p-facade__use-text {
  margin-bottom: 28px;
  font-size: 18px;
  line-height: 2;
  color: #545454;
}
.p-facade__use-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.p-facade__use-imgs img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 4px;
}
.p-facade {
  /* 3カラム（階段／マンション・フェンス） */
}
.p-facade__use-imgs--col3 {
  grid-template-columns: repeat(3, 1fr);
}
.p-facade {
  /* 1枚 354×212 比率（マンション・フェンス） */
}
.p-facade__use-imgs--ratio img {
  aspect-ratio: 354/212;
}
.p-facade {
  /* 1024px〜1920px対応：固定200px列（ボタン）に押されて事例画像2枚が
     徐々に細くなり不均衡に見えるため、$breakpoint-s より前倒しで2カラム化する */
}
@media screen and (max-width: 1440px) {
  .p-facade__case-row {
    grid-template-columns: 1fr 1fr;
  }
  .p-facade__case-btn {
    grid-column: 1/-1;
  }
  .p-facade__use-imgs--col3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-facade {
    margin-top: clamp(0px, 8.9285714286vw, 150px);
  }
  .p-facade__case {
    padding: clamp(24px, 2.380952381vw, 40px);
    margin-bottom: clamp(0px, 2.9761904762vw, 50px);
  }
  .p-facade__case-ttl {
    font-size: clamp(18px, 1.4285714286vw, 24px);
  }
  .p-facade__use {
    margin-top: clamp(0px, 8.9285714286vw, 150px);
  }
}
@media screen and (min-width: 992.02px) and (max-width: 1679.98px) {
  .p-facade__case-row {
    grid-template-columns: 1fr 1fr minmax(clamp(140px, 11.9047619048vw, 200px), max-content);
  }
  .p-facade__case-btn {
    grid-column: auto;
  }
  .p-facade__use-imgs--col3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 992px) {
  .p-facade__case-row {
    grid-template-columns: 1fr 1fr;
  }
  .p-facade__case-btn {
    grid-column: 1/-1;
  }
  .p-facade__use-imgs--col3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 768px) {
  .p-facade__use-imgs, .p-facade__use-imgs--col3 {
    grid-template-columns: 1fr;
  }
}

/*========================================================
お知らせ詳細（single.php）
========================================================*/
.p-newsdetail {
  width: 100%;
  max-width: min(1548px, var(--container-limit, 1548px));
  margin-inline: auto;
}
@media screen and (max-width: 768px) {
  .p-newsdetail {
    padding-inline: 15px;
    padding-bottom: 40px;
  }
}
.p-newsdetail__title {
  margin-bottom: 24px;
  font-size: 45px;
  font-weight: 500;
  line-height: 1.6;
  color: #0068B6;
}
.p-newsdetail__date {
  margin-bottom: 24px;
  text-align: right;
  font-size: 14px;
  color: #707070;
}
.p-newsdetail__body {
  padding: 48px 56px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
}
.p-newsdetail__body p {
  font-size: 16px;
  line-height: 1.9;
  color: #545454;
}
.p-newsdetail__body p + p {
  margin-top: 1.4em;
}
.p-newsdetail__body .wp-block-heading {
  margin: 1.4em 0 0.6em;
  font-size: 16px;
  font-weight: 500;
  color: #4A4947;
}
.p-newsdetail__back {
  margin-top: 40px;
}
.p-newsdetail__back-btn {
  display: block;
  padding: 20px;
  text-align: center;
  font-size: 24px;
  color: #FFFFFF;
  background: #707070;
  border-radius: 4px;
  transition: opacity 0.3s ease;
}
.p-newsdetail__back-btn::before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: middle;
  border: solid #FFFFFF;
  border-width: 2px 2px 0 0;
  transform: rotate(-135deg);
}
.p-newsdetail__back-btn:hover {
  opacity: 0.85;
}
@media screen and (min-width: 768.02px) and (max-width: 1679.98px) {
  .p-newsdetail__title {
    font-size: clamp(26px, 2.6785714286vw, 45px);
  }
  .p-newsdetail__body {
    padding: clamp(28px, 2.8571428571vw, 48px) clamp(24px, 3.3333333333vw, 56px);
  }
  .p-newsdetail__back {
    margin-top: clamp(0px, 2.380952381vw, 40px);
  }
  .p-newsdetail__back-btn {
    font-size: clamp(18px, 1.4285714286vw, 24px);
  }
}
@media screen and (max-width: 992px) {
  .p-newsdetail__body {
    padding: 32px 24px;
  }
}
@media screen and (max-width: 768px) {
  .p-newsdetail__title {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
  }
  .p-newsdetail__date {
    margin-bottom: 16px;
    font-size: 10px;
  }
  .p-newsdetail__body {
    padding: 34px 14px 40px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 5px;
  }
  .p-newsdetail__body p {
    font-size: 12px;
  }
  .p-newsdetail__body .wp-block-heading {
    font-size: 12px;
  }
  .p-newsdetail__back {
    margin-top: 24px;
  }
  .p-newsdetail__back-btn {
    padding: 14px 20px;
    font-size: 12px;
    border-radius: 5px;
  }
  .p-newsdetail__back-btn::before {
    width: 10px;
    height: 10px;
  }
}
/*# sourceMappingURL=style.css.map */