@charset "UTF-8";

/* ========================================
   1. Google Fonts, Modern Reset & Variables
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@400;700&display=swap');

:root {
  /* Colors */
  --color-main: #00a040;
  --color-black: #000000;
  --color-text: #111111;
  --color-white: #ffffff;
  --color-bg-gray: #f5f5f5;
  --header-height: 80px;

  /* ▼ Fluid Typography (文字サイズ自動伸縮スケール) ▼ */
  --fz-4xl:  clamp(32px, 5vw, 60px); /* ヒーロー、特大見出し */
  --fz-3xl:  clamp(30px, 4.4vw, 50px); /* ヒーロー、特大見出し */
  --fz-2xl:  clamp(26px, 4vw, 40px); /* セクション大見出し */
  --fz-xl:   clamp(22px, 3vw, 32px); /* 中見出し、ニュースH1 */
  --fz-lg:   clamp(18px, 2vw, 24px); /* 小見出し、強調 */
  --fz-md:   clamp(16px, 1.5vw, 18px); /* リード文、大きめテキスト */
  --fz-base: clamp(15px, 1.5vw, 16px); /* 標準本文 */
  --fz-sm:   14px; /* サブテキスト、テーブル内（固定） */
  --fz-xs:   12px; /* 注釈、極小ラベル（固定） */
}

/* Modern CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  color: var(--color-text);
  font-family: 'Roboto', 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: var(--fz-base);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { color: inherit; font: inherit; }

/* ========================================
   2. Utility Classes
   ======================================== */
/* Typography Utilities */
.u-fz-3xl  { font-size: var(--fz-3xl) !important; }
.u-fz-2xl  { font-size: var(--fz-2xl) !important; }
.u-fz-xl   { font-size: var(--fz-xl) !important; }
.u-fz-lg   { font-size: var(--fz-lg) !important; }
.u-fz-md   { font-size: var(--fz-md) !important; }
.u-fz-base { font-size: var(--fz-base) !important; }
.u-fz-sm   { font-size: var(--fz-sm) !important; }
.u-fz-xs   { font-size: var(--fz-xs) !important; }

/* Color & Layout Utilities */
.u-color-main { color: var(--color-main) !important; }
.u-color-white { color: var(--color-white) !important; }
.u-color-red { color: #f00; }
.u-mb-20 { margin-bottom: 20px !important;}
.u-text-center { text-align: center !important; }
.u-font-bold { font-weight: bold !important; }
.u-flex-center { display: flex; justify-content: center; gap: 20px; }


.u-br-sp { display: none; }
.u-br-pc { display: inline; }



/* ========================================
   3. Layout & Common Components
   ======================================== */
.l-section { position: relative; padding: 60px 0; }
@media screen and (max-width: 768px) {
  .l-section { padding: 60px 0; }
}

/* ▼ 内枠（横幅と左右の余白） ▼ */
.l-inner { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.l-inner--narrow { max-width: 1000px; }
.u-bg-gray { background-color: #444444; color: var(--color-white); }
.u-bg-dark { background-color: #333333; color: var(--color-white); }
.u-bg-black { background-color: #222222; color: var(--color-white); }

/* 背景画像＋黒オーバーレイ用の共通クラス */
.u-bg-overlay { color: var(--color-white); background-size: cover; background-position: center; }
.u-bg-overlay::before { position: absolute; inset: 0; z-index: 1; background-color: rgba(0, 0, 0, 0.4); content: ""; }
.u-bg-overlay.p-support::before { position: absolute; inset: 0; z-index: 1; background-color: rgba(0, 0, 0, 0.7); content: ""; }

/* 画像を呼び出すだけのクラス */
.bg-in-rack { background: url(../img/bg_in-rack.webp) no-repeat center center / cover; }
.bg-in-row { background: url(../img/bg_in-row.webp) no-repeat center center / cover;  }
.bg-cold-plate { background: url(../img/bg_cold-plate.webp) no-repeat center center / cover;  }
.bg-quick-disconnect { background: url(../img/bg_quick-disconnect.webp) no-repeat center center / cover; }

/* ▼ 共通セクションタイトル ▼ */
.c-product-lineup__title { margin-bottom: 60px; padding: 10px; color: var(--color-white); font-size: var(--fz-xl); font-weight: bold; text-align: center; background-color: var(--color-main); }
.c-tag { display: inline-block; margin-bottom: 10px; padding: 2px 8px; border-radius: 2px; color: var(--color-white); font-size: var(--fz-xs); background-color: var(--color-main); }
.c-sec-title { margin-bottom: 40px; font-size: var(--fz-2xl); font-weight: bold; line-height: 1.5; text-align: center; letter-spacing: 0.01em; color: var(--color-white); text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.c-sec-title--bg-green { padding: 10px; color: var(--color-white); background-color: var(--color-main); text-shadow: none; }

/* ========================================
   Buttons
   ======================================== */
/* 1. Base (基本形状) */
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 10px 25px; border: 2px solid transparent; border-radius: 4px; font-size: var(--fz-md); font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn:hover { opacity: 0.8; }

/* 2. Color Modifiers (色展開)  */
.btn--outline { color: var(--color-main); border-color: var(--color-main); background-color: transparent; }
.btn--white   { color: var(--color-main); border-color: var(--color-main); background-color: var(--color-white); }
.btn--fill    { color: var(--color-white); border-color: var(--color-main); background-color: var(--color-main); }
.btn--black   { color: var(--color-white); border-color: var(--color-text); background-color: var(--color-text); }
.btn--black:hover { border-color: #333; background-color: #333; opacity: 1; }

/* 3. Size Modifiers (サイズ・用途展開) */
.btn--large { min-width: 200px; padding: 15px 40px; font-size: var(--fz-base); }
.btn--cv    { position: relative; min-width: 280px; height: 60px; padding-right: 50px; }

/* 4. Elements (内部パーツ) */
.btn-icon { width: 18px; height: auto; }

/* 矢印 */
.btn-arrow { position: absolute; top: 50%; right: 20px; width: 20px; height: 2px; background-color: currentColor; transition: transform 0.3s ease; transform: translateY(-50%); }
.btn-arrow::after { position: absolute; top: -4px; right: 0; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; content: ""; transform: rotate(45deg); }
.btn--cv:hover .btn-arrow { transform: translateY(-50%) translateX(5px); }

/* Pagination */
.c-pagination { display: flex; justify-content: center; margin: 40px 0; }
.c-pagination__list { display: flex; align-items: center; gap: 8px; }
.c-pagination__item a { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border: 1px solid #e0e0e0; font-size: var(--fz-base); font-weight: bold; transition: 0.3s; }
.c-pagination__item.is-active a { background-color: #e0e0e0; cursor: default; }
.c-pagination__item.is-next a { color: var(--color-main); }

/* Page Top */
.c-pagetop { position: fixed; right: 0; bottom: 0; z-index: 90; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border: none; background-color: var(--color-main); opacity: 0; visibility: hidden; cursor: pointer; transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease; }
.c-pagetop.is-show { opacity: 1; visibility: visible; }
.c-pagetop:hover { background-color: #008535; }
.c-pagetop::before { width: 14px; height: 14px; border-top: 2px solid var(--color-white); border-left: 2px solid var(--color-white); content: ""; transform: translateY(3px) rotate(45deg); }

/* ========================================
   4. Header & Footer
   ======================================== */
.l-header { position: sticky; top: 0; z-index: 100; height: var(--header-height); background-color: var(--color-black); box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.l-header__inner { display: flex; justify-content: space-between; align-items: center; max-width: 100%; height: 100%; padding: 0 0 0 20px; }
.l-header__logo { width: 160px; margin: 0; line-height: 0; }
.l-header__right { display: flex; align-items: center; height: 100%; }

.l-header__nav-list { position: relative; display: flex; gap: 40px; margin-right: 40px; font-size: var(--fz-md); font-weight: bold; }
.l-header__nav-list li { position: relative; display: flex; align-items: center; height: var(--header-height); }
.l-header__nav-list li a { color: var(--color-white); text-align: center; transition: opacity 0.3s; }
.l-header__nav-list li a:hover { opacity: 0.7; }
.l-header__nav-list li.is-active a { color: var(--color-main); }

.l-header__btns--sp { display: none; }
.l-header__btns--pc { display: flex; height: 100%; }
.l-header__btns--pc .btn { height: 100%; padding: 0 30px; border: none; border-radius: 0; font-size: var(--fz-sm); }

/* ========================================
   Header Responsive Adjustments
   ======================================== */
@media screen and (max-width: 1400px) {
  .l-header__nav-list { gap: 25px; margin-right: 25px; }
}
@media screen and (max-width: 1280px) {
  .l-header__inner { padding: 0 0 0 15px; }
  .l-header__logo { width: 140px; }
  .l-header__nav-list { gap: 20px; margin-right: 15px; font-size: 14px; }
  .l-header__btns--pc .btn { padding: 0 15px; font-size: 13px; gap: 5px; }
  .l-header__btns--pc .btn-icon { width: 14px; }
}
@media screen and (max-width: 1150px) {
  .l-header__logo { width: 120px; }
  .l-header__nav-list { gap: 10px; margin-right: 10px; font-size: 13px; }
  .l-header__btns--pc .btn { padding: 0 10px; }
}

/* マジックライン (PC) */
.c-nav-line { display: none; }
@media screen and (min-width: 769px) {
  .c-nav-line { position: absolute; bottom: 0; left: 0; display: block; width: 0; height: 4px; background-color: var(--color-main); pointer-events: none; }
  .c-nav-line.is-animated { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
}

/* ハンバーガーボタン */
.c-hamburger { position: relative; z-index: 110; display: none; width: 30px; height: 24px; margin-right: 20px; padding: 0; border: none; background: transparent; cursor: pointer; }
.c-hamburger span { position: absolute; display: block; width: 100%; height: 2px; border-radius: 2px; background-color: var(--color-white); transition: all 0.3s ease-in-out; }
.c-hamburger span:nth-child(1) { top: 0; }
.c-hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.c-hamburger span:nth-child(3) { bottom: 0; }

.l-footer { padding: 20px; color: #fff; text-align: center; background: #111; }
.l-footer__copy small { font-size: var(--fz-xs); }

/* ========================================
   5. Animations
   ======================================== */
.js-fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.js-fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* ========================================
   6. [Top Page] Components
   ======================================== */
/* Hero */
.p-hero { position: relative; margin: 0; color: var(--color-white); background-color: #222; background-position: center; background-size: 100% auto; }
.p-hero .p-hero__content { position: absolute; margin: 11.5vw 0 0 6vw; z-index: 10; }
.p-hero__slider { position: relative; width: 100%; overflow: hidden; z-index: 1; }
.p-hero__slider-inner { display: flex; width: 300%; animation: slideImage 12s cubic-bezier(0.25, 0.8, 0.25, 1) infinite; }
.p-hero__slide { width: 33.3333%; }
.p-hero__slide img { width: 100% !important; display: block;}
@keyframes slideImage {
  0%, 42%   { transform: translateX(0%); } 
  50%, 92%  { transform: translateX(-33.3333%); }
  100%      { transform: translateX(-66.6666%); }
}
.p-hero__sub { margin-bottom: 5px; font-size: clamp(14px, 1.2vw, 18px); font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }
.p-hero__title { margin-bottom: 15px; font-size: clamp(32px, 4vw, 70px); font-weight: bold; line-height: 1.2; text-shadow: 3px 3px 6px rgba(0,0,0,0.8); }
.p-hero__lead { margin-bottom: 0; color: #86e7b4; font-size: clamp(16px, 1.5vw, 24px); font-weight: bold; line-height: 1.6; text-shadow: 3px 3px 6px rgba(0,0,0,0.8); }
.p-hero picture { width: 100%; }
.p-hero picture img { width: 100%!important; }

/* ▼ 共通セクションヘッダー（サブタイトル付き・緑） ▼ */
.c-section-header { margin-bottom: 20px; text-align: center; }
.c-section-header__sub { display: block; margin-bottom: 8px; color: var(--color-main); font-size: var(--fz-sm); font-weight: bold; letter-spacing: 0.01em; }
.c-section-header__main { margin: 0; color: var(--color-main); font-size: var(--fz-2xl); font-weight: bold; line-height: 1.2; letter-spacing: 0.01em; }

/* Features */
.p-features__grid { display: flex; gap: 60px; padding-top: 40px; border-top: 1px solid var(--color-black); }
.p-features__item { display: flex; flex: 1; flex-direction: column; align-items: center; }
.p-features__icon { display: flex; justify-content: center; align-items: center; width: 90px; margin-bottom: 15px; opacity: .8; }
.p-features__icon img { width: auto; max-height: 100%; }
.p-features__item-title { margin: 0; font-size: var(--fz-lg); font-weight: bold; line-height: 1.2; letter-spacing: 0.01em; text-align: center; }
.p-features__item-en { margin: 0 0 25px 0; color: #999999; font-size: var(--fz-sm); text-align: center; }
.p-features__list { width: 100%; text-align: left; }
.p-features__list li { position: relative; margin-bottom: 10px; padding-left: 0.5em; font-size: var(--fz-base); }
.p-features__list li::before { position: absolute; top: 0; left: 0; content: "-"; }

.p-features__list li {
  position: relative;
  margin-bottom: 8px;
  padding-left: 0.8em;
  font-size: var(--fz-md);
  font-weight: bold;
  text-decoration: underline;
  text-decoration-color: rgba(0, 160, 64, 0.3);
  text-decoration-thickness: 0.4em;
  text-underline-offset: -0.1em; /* 線を上に移動させて文字に食い込ませる！ */
  text-decoration-skip-ink: none; /* 英語の「g」や「y」の下で線を途切れさせない */
}
.p-features__list li::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "-";
  text-decoration: none; /* 疑似要素のハイライトを消す */
}
/* Lineup */
.p-lineup__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding-top: 30px; border-top: 1px solid var(--color-black); }
.p-lineup__item { display: block; color: var(--color-text); text-decoration: none; cursor: pointer; }
.p-lineup__img-box { display: flex; justify-content: center; align-items: center; padding: 20px; border: 2px solid var(--color-main); background-color: var(--color-bg-gray); overflow: hidden; aspect-ratio: 1 / 1; transition: box-shadow 0.4s ease; }
.p-lineup__img-box img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.p-lineup__text { margin-top: 20px; font-size: var(--fz-base); font-weight: bold; line-height: 1.5; text-align: center; transition: color 0.3s ease; }
@media screen and (min-width: 769px) {
  .p-lineup__item:hover .p-lineup__img-box { box-shadow: 0 10px 20px rgba(0, 160, 64, 0.2); }
  .p-lineup__item:hover .p-lineup__img-box img { transform: scale(1.08); }
  .p-lineup__item:hover .p-lineup__text { color: var(--color-main); }
}

/* Support */
.p-support { position: relative; padding: 60px 0 80px; color: var(--color-white); background: url(../img/bg_suppot.webp) no-repeat center center / cover; }
@media screen and (min-width: 769px) {
  .p-support.p-support--boxed { width: 1140px; margin: 40px auto 80px auto; padding-left: 40px; padding-right: }
}
.p-support__header { margin-bottom: 50px; text-align: center; }
.p-support__title { margin: 0 0 20px 0; font-size: var(--fz-2xl); font-weight: bold; letter-spacing: 0.01em; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.p-support__desc { margin: 0; font-size: var(--fz-lg); font-weight: bold; line-height: 1.8; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.p-support__grid { display: flex; justify-content: space-between; gap: 40px; }
.p-support__item { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; padding: 30px 20px; border: 1px solid var(--color-white); background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(2px); text-align: center; transition: background-color 0.3s ease; }
.p-support__icon { display: flex; justify-content: center; align-items: center; height: 130px; margin-bottom: 25px; }
.p-support__icon img { width: auto; max-height: 100%; }
.p-support__text { margin: 0; font-size: var(--fz-lg); font-weight: bold; letter-spacing: 0.01em; }

/* Company */
.p-company { padding: 100px 0; }
.p-company__logo { margin-bottom: 40px; text-align: center; }
.p-company__logo img { width: 300px; height: auto; margin: 0 auto; }
.p-company__text { margin-bottom: 60px; font-size: var(--fz-md); font-weight: bold; line-height: 2; text-align: left; letter-spacing: 0.08em; }
.p-company__stats { display: flex; justify-content: space-between; gap: 30px; }
.p-company__stat-item { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; padding: 20px; border-radius: 50%; background-color: #f9f9f9; text-align: center; aspect-ratio: 1 / 1; }
.p-company__stat-icon { display: flex; justify-content: center; align-items: center; height: 110px; margin-bottom: 10px; }
.p-company__stat-icon img { width: auto; max-height: 100%; }
.p-company__stat-title { color: var(--color-main); font-size: var(--fz-md); font-weight: bold; }
.p-company__stat-number { margin: 0 0 5px 0; color: var(--color-main); font-size: var(--fz-xl); font-weight: bold; line-height: 1; }
.p-company__stat-number span { font-size: var(--fz-lg); }
.p-company__stat-number .js-count-up { font-size: var(--fz-3xl); }
.p-company__stat-suffix { margin: 0; color: var(--color-main); font-size: var(--fz-lg); font-weight: bold; }

/* News (Top Page version) */
.p-news { background-color: var(--color-bg-gray); }
.p-news__header { margin-bottom: 40px; text-align: center; }
.p-news__sub-title { display: block; margin-bottom: 8px; color: var(--color-text); font-size: var(--fz-sm); font-weight: bold; letter-spacing: 0.01em; }
.p-news__main-title { margin: 0; color: var(--color-text); font-size: var(--fz-xl); font-weight: bold; letter-spacing: 0.01em; }
.p-news__list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.p-news__item { display: flex; align-items: center; padding: 25px 30px; border: 1px solid #e0e0e0; color: var(--color-text); background-color: var(--color-white); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.p-news__date { min-width: 120px; font-size: var(--fz-base); font-weight: bold; }
.p-news__title { margin: 0; font-size: var(--fz-base); line-height: 1.5; transition: color 0.3s ease; }
@media screen and (min-width: 769px) {
  .p-news__item:hover { border-color: var(--color-main); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05); transform: translateY(-3px); }
  .p-news__item:hover .p-news__title { color: var(--color-main); }
}
.p-news__btn-area { display: flex; justify-content: flex-end; }

/* ========================================
   7. [Lower Page] Common Components
   ======================================== */
/* Hero (Sub) */
.p-page-header { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 265px; padding: 80px 20px; color: var(--color-white); background-position: center; background-size: cover; }
.p-page-header.in-rack { background-image: url(../img/heder_in-rack.webp); }
.p-page-header.in-row { background-image: url(../img/heder_in-rack.webp); }
.p-page-header.quick-disconnect { background-image: url(../img/heder_quick-disconnect.webp); }
.p-page-header.cold-plate { background-image: url(../img/heder_in-rack.webp); }
.p-page-header.faq,
.p-page-header.news { background-image: url(../img/heder_news.webp); }
.p-page-header::before { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); content: ""; }
.p-page-header .p-hero__content { position: relative; z-index: 2; text-align: center; }
.p-page-header p { margin: 0; font-size: var(--fz-md); font-weight: bold; }
.p-page-header h2 { margin: 0; font-size: var(--fz-4xl); letter-spacing: 0.01em; }

/* Conversion Buttons Area */
.p-cv { padding: 80px 0 40px; background-color: var(--color-white); }
.p-cv__inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.p-cv__btns { display: flex; justify-content: center; gap: 40px; }

/* ========================================
   8. [Lower Page] Product Sections
   ======================================== */
/* Product Lineup (In-Rack) */
.p-product-lineup { padding: 80px 0; }
.p-product-lineup__inner { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.p-product-lineup__items { display: flex; flex-direction: column; gap: 50px; }
.p-product-lineup__item { display: flex; justify-content: space-between; align-items: center; gap: 60px; }
@media screen and (min-width: 769px) {
  .p-product-lineup__item { width: 880px; margin: 0 auto; }
  .p-product-lineup__item--reverse { flex-direction: row-reverse; }
}
.p-product-lineup__img { flex: 1; text-align: center; }
.p-product-lineup__text { flex: 1; width: 100%; }
.p-product-lineup__name { margin: 0 0 20px 0; color: var(--color-main); font-size: var(--fz-2xl); font-weight: bold; line-height: 1.2; }
.p-product-lineup__list { width: 100%; }
.p-product-lineup__list li { position: relative; margin-bottom: 6px; padding-left: 1em; font-size: var(--fz-base); }
.p-product-lineup__list li::before { position: absolute; top: 0; left: 0; content: "-"; }

/* Role & Features (CDUの役割と特長) */
.p-role__box { display: flex; flex-direction: column; padding: 20px; color: var(--color-text); background-color: rgba(255, 255, 255, 0.85);  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
.p-role__box-header { margin: 0; padding: 10px 15px; color: var(--color-white); font-size: var(--fz-lg); font-weight: bold; text-align: center; background-color: var(--color-main); }
.p-role__box-content { flex: 1; padding: 15px 0; }
.p-role__grid-top { display: flex; gap: 20px; margin-bottom: 20px; }
@media screen and (min-width: 769px) {
  .p-role__grid-top .p-role__box { width: 50%; }
}
.p-role__desc { margin: 0 0 10px 0; font-size: var(--fz-base); font-weight: bold; line-height: 1.6; }
.p-role__figure { text-align: center; }
.p-role__figure img { margin-bottom: 10px; }
.p-role__figure-labels { display: flex; justify-content: space-between; padding: 0 10px; font-size: var(--fz-sm); font-weight: bold; }
.p-role__figure-labels .is-green { color: var(--color-main); font-size: var(--fz-base); }
.p-role__note { margin: 5px 0 0 0; color: #666; font-size: var(--fz-xs); text-align: right; }
.p-role__grid-bottom { width: 100%; }
.p-role__redundancy { display: flex; align-items: flex-start; gap: 30px; }
.p-role__redundancy-text { flex: 1; font-size: var(--fz-base); font-weight: bold; line-height: 1.6; }
.p-role__redundancy-items { display: flex; flex: 3; gap: 0; }
.p-role__redundancy-item { flex: 1; font-size: var(--fz-sm); font-weight: bold; text-align: center; }
.p-role__redundancy-item img { height: 140px; margin-bottom: 10px; }

/* Pump Technology */
.p-pump__flex { display: flex; justify-content: space-between; align-items: flex-start; }
.p-pump__item { flex: 1; }
.p-pump__visual { margin-bottom: 30px; }
.p-pump__text { font-size: var(--fz-base); line-height: 1.6; text-align: center; }
.p-pump__text .is-highlight { margin-top: 10px; font-size: var(--fz-md); color: var(--color-main); font-weight: bold; }
.p-pump__arrow { width: 180px; padding: 90px 20px 0 20px; }

/* Zero Downtime */
.p-zero-downtime__flex { display: flex; justify-content: space-around; align-items: flex-start; gap: 50px; }
.p-zero-downtime__item { flex: 1; }
.p-zero-downtime__visual { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.85); overflow: hidden; aspect-ratio: 1 / 1; }
.p-zero-downtime__visual dt { margin-bottom: 10px; color: var(--color-main); font-size: var(--fz-lg); font-weight: bold; }
.p-zero-downtime__visual dd { text-align: center; }
.p-zero-downtime__visual img { width: 85%; margin: 0 auto; }
.p-zero-downtime__text { font-size: var(--fz-lg); font-weight: bold; line-height: 1.4; }

/* Temperature Control */
.p-temp-control__steps { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; }
.p-temp-control__step-item { flex: 1; }
.p-temp-control__step-circle { display: flex; justify-content: center; align-items: center; width: 100%; padding: 20px; border-radius: 50%; font-size: var(--fz-md); font-weight: bold; line-height: 1.5; aspect-ratio: 1 / 1; text-align: center; }
.p-temp-control__step-circle.is-white { color: #333; background-color: var(--color-white); }
.p-temp-control__step-circle.is-green { color: var(--color-white); background-color: var(--color-main); }
.p-temp-control__arrow { width: 60px; padding: 0 0 0 20px; text-align: center; }
.p-temp-control__grid { display: flex; gap: 20px; }
.p-temp-control__box { display: flex; flex: 1; justify-content: center; align-items: center; padding: 20px; background-color: var(--color-white); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }

/* Thermal Facility */
.p-thermal-facility__list { margin-bottom: 30px; padding-left: 10px; color: #fff; }
.p-thermal-facility__list li { position: relative; margin-bottom: 10px; padding-left: 0.8em; font-size: var(--fz-base); font-weight: bold; }
.p-thermal-facility__list li::before { position: absolute; left: 0; content: "-"; }
.p-thermal-facility__grid { display: flex; align-items: stretch; gap: 20px; }
.p-thermal-facility__main-visual { display: flex; flex: 2; flex-direction: column; padding: 20px; background-color: var(--color-white); }
.p-thermal-facility__label { margin-bottom: 15px; padding: 8px; color: var(--color-white); font-size: var(--fz-md); font-weight: bold; text-align: center; background-color: var(--color-main); }
.p-thermal-facility__main-visual img { margin-top: auto; margin-bottom: auto; }
.p-thermal-facility__sub-visuals { display: flex; flex: 1; flex-direction: column; gap: 20px; }
.p-thermal-facility__photo { flex: 1; overflow: hidden; }
.p-thermal-facility__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Multitask Cold Plate */
.p-multitask-cp__lead { margin-bottom: 20px; font-size: var(--fz-base); font-weight: bold; }
.p-multitask-cp__grid { display: flex; align-items: flex-start; gap: 20px; }
.p-multitask-cp__main-visual { flex: 1.2; }
.p-multitask-cp__figure { position: relative; text-align: center; }
.p-multitask-cp__label { display: inline-block; margin-top: 15px; padding: 5px 15px; border: 2px solid var(--color-main); border-radius: 4px; color: var(--color-main); font-size: var(--fz-base); font-weight: bold; background-color: var(--color-white); }
.p-multitask-cp__detail-card { flex: 0.8; padding: 20px; color: var(--color-text); background-color: rgba(255, 255, 255, 0.85); box-shadow: 0 10px 20px rgba(0,0,0,0.3); width: 100%; }
.p-multitask-cp__card-header { margin: 0; padding: 10px; color: var(--color-white); font-size: var(--fz-md); font-weight: bold; text-align: center; background-color: var(--color-main); }
.p-multitask-cp__card-body { padding-top: 20px; text-align: center; }
.p-multitask-cp__card-img img { margin: 15px auto 0 auto; }

/* Quick Disconnect Features */
.p-qd-features__visual-area { position: relative; margin-bottom: 40px; }
.p-qd-features__main-img { position: relative; display: inline-block; }
.p-qd-features__points { display: flex; justify-content: space-between; gap: 40px; margin-bottom: 40px; text-align: center; }
.p-qd-features__point-item { flex: 1; }
.p-qd-features__circle { display: flex; justify-content: center; align-items: center; z-index: 1; width: 100%; padding: 40px; border-radius: 50%; color: var(--color-text); line-height: 1.5; background-color: rgba(255, 255, 255, 0.85); box-shadow: 0 0 20px rgba(0, 160, 64, 0.2); aspect-ratio: 1 / 1; }
.p-qd-features__circle dl dt { margin-bottom: 0; font-weight: bold; line-height: 1.8; }
.p-qd-features__circle dl dd { margin-top: 15px; margin-left: 0; font-weight: bold; }
.p-qd-features__message { padding: 15px; text-align: center; font-size: var(--fz-lg); font-weight: bold; background-color: rgba(0, 145, 58, 0.8); }

/* Vertical Integration */
.p-vertical-integration__process-grid { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; }
.p-vertical-integration__process-image { width: 70% }
.p-vertical-integration__text-list { text-align: left; }
.p-vertical-integration__text-list li { position: relative; margin-bottom: 10px; padding-left: 0.8em; font-size: var(--fz-base); font-weight: bold; }
.p-vertical-integration__text-list li::before { position: absolute; left: 0; content: "-"; }
.p-vertical-integration__diagram-area { padding: 20px; background-color: var(--color-white); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
.p-vertical-integration__diagram-label { position: absolute; top: 50%; left: 50%; margin: 0; color: var(--color-main); font-size: var(--fz-lg); font-weight: bold; transform: translate(-50%, -50%); }


/* ========================================
   9. Matrices (Tables with Sticky)
   ======================================== */
/* Scrollbar settings common for matrices */
.c-scroll-hint { display: none; }
.p-product-matrix__scroll-container, .p-qd-matrix__scroll-container { margin-bottom: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0, 160, 64, 0.4) #1a1a1a; }
.p-product-matrix__scroll-container::-webkit-scrollbar, .p-qd-matrix__scroll-container::-webkit-scrollbar { height: 6px; }
.p-product-matrix__scroll-container::-webkit-scrollbar-track, .p-qd-matrix__scroll-container::-webkit-scrollbar-track { border-radius: 10px; background: #1a1a1a; }
.p-product-matrix__scroll-container::-webkit-scrollbar-thumb, .p-qd-matrix__scroll-container::-webkit-scrollbar-thumb { border-radius: 10px; background: rgba(0, 160, 64, 0.4); transition: background 0.3s; }
.p-product-matrix__scroll-container::-webkit-scrollbar-thumb:hover, .p-qd-matrix__scroll-container::-webkit-scrollbar-thumb:hover { background: rgba(0, 160, 64, 0.8); }

/* Cold Plate Matrix */
.p-product-matrix__scroll-container { border-top: 2px solid var(--color-main); }
.p-product-matrix { overflow: hidden; }
.p-product-matrix__lead { margin-bottom: 40px; color: #fff; text-align: center; }
.p-product-matrix__table { width: 100%; border-collapse: collapse; table-layout: fixed; border-bottom: 2px solid var(--color-main); }
.p-product-matrix__th { position: sticky; left: 0; z-index: 10; width: 160px; padding: 20px; border-right: 2px solid var(--color-main); border-bottom: 2px solid var(--color-main); font-size: var(--fz-lg); font-weight: bold; text-align: center; vertical-align: middle; background-color: #1a1a1a; }
.p-product-matrix__th span { font-size: var(--fz-xs); }
.p-product-matrix__table td { width: 200px; padding: 20px; border-right: 1px solid #333; border-bottom: 2px solid var(--color-main); vertical-align: top; background-color: rgba(255, 255, 255, 0.02); }
.p-product-matrix__table tr:last-child th, .p-product-matrix__table tr:last-child td { border-bottom: none; }
.p-product-matrix__cell { display: flex; flex-direction: column; align-items: center; text-align: center; }
.p-product-matrix__name { display: flex; justify-content: center; align-items: center; height: 3em; margin-bottom: 10px; font-size: var(--fz-sm); font-weight: bold; }
.p-product-matrix__img { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 10px; border: 1px solid #444; background: #000; aspect-ratio: 4 / 3; }
.p-product-matrix__img.is-empty { color: #666; font-size: var(--fz-xs); }
.c-status-label { display: inline-block; padding: 2px 6px; border: 1px solid currentColor; font-size: var(--fz-xs); white-space: nowrap; }
.c-status-label.is-sample { color: #ccff00; }
.c-status-label.is-dev { color: #fff; opacity: 0.6; }

/* Quick Disconnect Matrix */
.p-qd-matrix__scroll-container { border-top: 2px solid var(--color-main); }
.p-qd-matrix__table { width: 100%; min-width: 1000px; border-collapse: collapse; }
.p-qd-matrix__table thead th { position: sticky; top: 0; z-index: 20; padding: 12px; color: var(--color-white); font-weight: bold; background-color: var(--color-main); }
.p-qd-matrix__table .is-qd-sticky-1 { position: sticky; left: 0; z-index: 15; width: 200px; color: #fff; }
/*.p-qd-matrix__table .is-qd-sticky-2 { position: sticky; left: 200px; z-index: 15; width: 300px; color: #fff; background: #1a1a1a; }*/
.p-qd-matrix__table thead th.is-qd-sticky-1,
.p-qd-matrix__table thead th.is-qd-sticky-2 { z-index: 30; }
.p-qd-matrix__table th,
.p-qd-matrix__table td { padding: 20px; border-bottom: 2px solid var(--color-main); border-right: 2px solid var(--color-main); color: #fff; vertical-align: middle; background: #1a1a1a; }
.p-qd-matrix__table td:last-child { border-right: none; }
.p-qd-matrix__table th.u-border-right { border-right: 2px solid #333; }
.p-qd-matrix-series { width: 20%; text-align: center; background: #f9f9f9; }
.p-qd-matrix-photo { width: 30%; text-align: center; }
.p-qd-matrix-photo img { width: 100%; max-height: 200px; height: auto; object-fit: contain; }
.p-qd-matrix-rotate{ width: 20%; text-align: center; }
.p-qd-matrix-spec { width: 30%; text-align: left; }
.p-qd-matrix__footer-figs { display: flex; gap: 20px; margin-top: 20px; }
.p-qd-matrix__fig-item { display: flex; flex: 1; flex-direction: column; padding: 15px; border: 1px solid #ccc; background: #fff; }
.p-qd-matrix__fig-item.is-wide { flex: 2; }
.p-qd-matrix-fig-img { display: flex; flex: 1; justify-content: center; align-items: center; padding-top: 10px; }
.p-qd-matrix-fig-sub-wrap { display: flex;  gap: 20px; }
.p-qd-matrix-fig-sub { flex: 1; margin: 0; padding: 0; text-align: center; }
.p-qd-matrix-fig-sub img { margin: 15px auto 0 auto; }
.p-qd-matrix-fig-sub span { display: inline-block; width: 100%; background: #888; }


/* ========================================
   10. News & FAQ Components
   ======================================== */
/* News Archive / List */
.p-news__year { margin-bottom: 20px; padding-bottom: 5px; font-size: var(--fz-2xl); font-weight: bold; color: var(--color-main); border-bottom: 1px solid var(--color-black); }
.p-news-list { display: flex; flex-direction: column; gap: 15px; }
.p-news-item { display: flex; align-items: center; padding: 20px 30px; border: 1px solid #e0e0e0; color: var(--color-text); background-color: var(--color-white); text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.p-news-item .p-news__date { min-width: 120px; font-size: var(--fz-base); font-weight: bold; }
.p-news-item .p-news__title { margin: 0; font-size: var(--fz-base); transition: color 0.3s ease; }
@media screen and (min-width: 769px) {
  .p-news-item:hover { border-color: var(--color-main); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transform: translateY(-2px); }
  .p-news-item:hover .p-news__title { color: var(--color-main); }
}

/* News Detail */
.p-news-detail__header { margin-bottom: 20px; border-bottom: 1px solid #333333; }
.p-news-detail__title-group { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 10px; }
.p-news-detail__title { margin: 0; padding-bottom: 0px; color: var(--color-main); font-size: var(--fz-xl); line-height: 1.2; }
.p-news-detail__date { color: var(--color-main); font-size: var(--fz-base); font-weight: bold; white-space: nowrap; }
.p-news-detail__info { margin-bottom: 30px; }
.p-news-detail__info dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 15px; margin: 0; }
.p-news-detail__content { font-size: var(--fz-base); line-height: 1.8; }
.p-news-detail__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 30px 0; }
.p-news-detail__gallery figure { margin: 0; }
.p-news-detail__gallery img { width: 100%; height: auto; }
.p-news-detail__btn-area { margin-top: 40px; padding-top: 40px; border-top: 1px solid #333333; text-align: center; }

/* FAQ */
.p-faq__list { display: flex; flex-direction: column; gap: 20px; }
.p-faq__item { border: 1px solid #ccc; }
.p-faq__question { position: relative; display: flex; align-items: flex-start; width: 100%; padding: 25px 60px 25px 30px; border: none; background: none; text-align: left; cursor: pointer; transition: background-color 0.3s; }
.p-faq__question:hover { background-color: #f9f9f9; }
.p-faq__q-icon { flex-shrink: 0; margin-right: 15px; color: var(--color-main); font-family: 'Roboto', sans-serif; font-size: var(--fz-2xl); font-weight: bold; line-height: 1; }
.p-faq__q-text { flex: 1; padding-top: 5px; padding-right: 40px; font-size: var(--fz-md); font-weight: bold; line-height: 1.5; }
.p-faq__toggle-icon { position: absolute; top: 50%; right: 30px; width: 20px; height: 20px; transform: translateY(-50%); }
.p-faq__toggle-icon::before, .p-faq__toggle-icon::after { position: absolute; top: 50%; left: 50%; background-color: var(--color-main); content: ""; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.p-faq__toggle-icon::before { width: 100%; height: 2px; margin-top: -1px; margin-left: -50%; }
.p-faq__toggle-icon::after { width: 2px; height: 100%; margin-top: -50%; margin-left: -1px; }
.p-faq__item.is-open .p-faq__toggle-icon::after { transform: rotate(90deg); }
.p-faq__answer { height: 0; background-color: #fcfcfc; overflow: hidden; transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.p-faq__answer-inner { display: flex; align-items: flex-start; padding: 30px; border-top: 1px solid #eee; line-height: 1.8; }
.p-faq__a-icon { flex-shrink: 0; margin-right: 15px; color: #333; font-family: 'Roboto', sans-serif; font-size: var(--fz-2xl); font-weight: bold; line-height: 1; }
.p-faq__answer-inner p { margin: 0; padding-top: 5px; font-size: var(--fz-base); }


/* ========================================
   11. Media Query (Mobile Settings)
   ======================================== */
@media screen and (max-width: 768px) {
  /* Header & Menu */
  .l-header__btns--pc { display: none; }
  .c-hamburger { display: block; }
  .l-header__nav { position: fixed; top: 0; right: -100%; z-index: 105; width: 85%; height: 100vh; padding: 80px 20px 40px; background-color: var(--color-black); box-shadow: -2px 0 10px rgba(0,0,0,0.5); overflow-y: auto; transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
  .l-header__nav.is-open { right: 0; }
  .l-header__nav-list { flex-direction: column; gap: 0; margin-right: 0; }
  .l-header__nav-list li { height: auto; border-bottom: 1px solid #333; }
  .l-header__nav-list li a { display: block; width: 100%; padding: 20px 0; }
  .l-header__nav-list li.is-active a { color: var(--color-main); }
  .l-header__btns--sp { display: flex; flex-direction: column; gap: 15px; margin-top: 40px; }
  .l-header__btns--sp .btn { width: 100%; padding: 15px; }
  
  /* Hamburger Animation */
  .c-hamburger.is-open span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
  .c-hamburger.is-open span:nth-child(2) { opacity: 0; }
  .c-hamburger.is-open span:nth-child(3) { bottom: 50%; transform: translateY(50%) rotate(-45deg); }

  /* Utility  */
  .u-br-sp { display: inline; }
  .u-br-pc { display: none; }

  /* component */
  .c-tag-label { position: static; display: block; width: fit-content; margin: 10px auto; }
  .c-product-lineup__title { margin-bottom: 30px; }

  /* Utility Buttons in Mobile */
  .btn--cv { min-width: auto; width: 100%; }
  .btn--black { width: 100%; padding: 15px; }
  .p-cv { padding-top: 40px; }
  .p-cv__btns { flex-direction: column; align-items: center; gap: 15px; }

  /* Top Page adjustments */
  .p-hero .p-hero__content { position: absolute; margin: 9.8vw 0 0 6vw; }
  .p-hero .p-hero__content .p-hero__sub { margin-bottom: 10px; font-size: 4.3vw; text-shadow: 3px 1px 0px #000; }
  .p-hero .p-hero__content .p-hero__title { margin-bottom: 10px; font-size: 10vw; text-shadow: 4px 1px 0px #000; }
  .p-hero .p-hero__content .p-hero__lead { margin-bottom: 0; color: #86e7b4; font-size: 5vw; font-weight: bold; text-shadow: 2px 1px 0px #000; line-height: 1.6; } 

  .p-features { padding:40px 0; }
  .p-features__grid { flex-direction: column; gap: 20px; padding-top: 20px; }
  .p-features__item { display: flex; flex-direction: row; align-items: center; gap: 25px; border-bottom: 1px solid var(--color-black); padding-bottom: 20px; }
  .p-features__icon { flex-shrink: 0; width: 80px; margin-left: 20px; }
  .p-features__item-body { flex: 1; }
  .p-features__item-title { margin-bottom: 5px; text-align: left; }
  .p-features__item-en { margin-bottom: 5px; text-align: left; }
  .p-features__list li { margin-bottom: 0; }

  .p-lineup { padding: 30px 0; }
  .p-lineup__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 15px; padding-top: 20px; }
  .p-lineup__text { margin-top: 15px; }
  .p-lineup__img-box { padding: 10px; }

  .p-support__header { margin-bottom: 30px; }
  .p-support { padding: 60px 0; }
  .p-support__desc { text-align: left; }
  .p-support__desc br { display: none; }
  .p-support__grid { display: flex; flex-direction: column; gap: 12px; }
  .p-support__item { flex-direction: row; justify-content: flex-start; align-items: center; text-align: left; padding: 15px 20px; gap: 20px; min-height: auto; }
  .p-support__icon { flex-shrink: 0; width: 60px; height: 60px; margin-bottom: 0; }
  .p-support__text { flex: 1; font-size: var(--fz-xl); line-height: 1.4; }
  .p-support__text br { display: none; }

  .p-company { padding: 60px 0; }
  .p-company__logo { margin-bottom: 30px; }
  .p-company__logo img { width: 50vw!important; }
  .p-company__text { margin-bottom: 30px; text-align: left; line-height: 1.7;font-size: var(--fz-base); letter-spacing: 0.1em; }
  .p-company__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; justify-items: center; }

  .p-company__stat-item { aspect-ratio: 1 / 1; width: 100%; /*max-width: 170px;*/ padding: 15px 5px; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .p-company__stat-item:nth-child(3) { grid-column: 1 / 3; width: 50%; margin: 0 auto; }
  .p-company__stat-icon { height: 50%; margin-bottom: 10px; }
  .p-company__stat-title { font-size: 11px; line-height: 1.1; margin-bottom: 8px; max-width: 90%; }
  .p-company__stat-number { font-size: 12px; margin-bottom: 0; }
  .p-company__stat-number span { font-size: var(--fz-lg); }
  .p-company__stat-number .js-count-up { font-size: 30px; }
  .p-company__stat-suffix { margin-top: 5px; font-size: 12px; line-height: 1; }

  .p-news { padding: 60px 0; }
  .p-news__header { margin-bottom: 20px; text-align: center; }
  .p-news__item { flex-direction: column; align-items: flex-start; padding: 20px; gap: 8px; }
  .p-news__date { min-width: auto; font-size: var(--fz-sm); color: #888; }
  .p-news__title { font-size: var(--fz-base); line-height: 1.4; word-break: break-word; }
  .p-news__btn-area { justify-content: center; }

  /* Lower Page Adjustments */
  .p-page-header { height: 150px; padding: 0; }
  .p-product-lineup { padding: 40px 0; }
  .p-product-lineup__item { flex-direction: column; gap: 30px; }
  .p-product-lineup__img { width: 80%; margin: 0 auto; }

  /* Product Sections Adjustments */
  .p-role__grid-top { flex-direction: column; gap: 30px; }
  .p-role__redundancy { flex-direction: column; align-items: flex-start; gap: 20px; }
  .p-role__redundancy-text { padding-right: 0; }
  .p-role__redundancy-items { flex-direction: row; gap: 10px; width: 100%; }

  .p-pump__flex { flex-direction: column; gap: 20px 0; }
  .p-pump__arrow { width: 40vw; padding: 0; margin: 0 auto; }

  .p-zero-downtime__flex { flex-direction: column; align-items: center; gap: 40px; }
  .p-zero-downtime__item { width: 85%; }
  .p-zero-downtime__visual dt { padding-top: 20px; margin-bottom: 10px; color: var(--color-main); font-size: var(--fz-lg); font-weight: bold; }
  .p-zero-downtime__visual dd { text-align: center; }
  .p-zero-downtime__visual img { width: 80%; margin: 0 auto; }
  .p-zero-downtime__text { font-size: var(--fz-lg); font-weight: bold; line-height: 1.4; }

  .p-temp-control__steps { flex-direction: column; gap: 10px; }
  .p-temp-control__step-circle { width: 100%; height: auto; aspect-ratio: auto; border-radius: 0; padding: 20px; text-align: left; }
  .p-temp-control__step-circle p { font-size: var(--fz-lg); }
  .p-temp-control__step-item { width: 100%; }
  .p-temp-control__arrow { margin: 0; width: 60px; transform: rotate(90deg); }
  .p-temp-control__grid { flex-direction: column; gap: 0; }

  .p-thermal-facility__grid { flex-direction: column; gap: 10px;}
  .p-thermal-facility__sub-visuals { display: flex; flex-direction: row; gap: 10px; }
  .p-thermal-facility__photo { flex: 1; }
  .p-thermal-facility__photo img {width: 100%;height: 100%;object-fit: cover; }

  .p-multitask-cp__lead { text-align: left; text-indent: -0.5em; padding-left: 0.5em;  }
  .p-multitask-cp__grid { flex-direction: column; gap: 40px; }
  .p-multitask-cp__label { padding: 3px 10px; }

  .p-qd-features__points { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; justify-items: center; align-items: start; margin-bottom: 20px; }
  .p-qd-features__point-item { width: 100%; }
  .p-qd-features__point-item:nth-child(3) { grid-column: 1 / 3; width: calc(50% - 5px); }
  .p-qd-features__circle { aspect-ratio: 1 / 1; width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15px 10px; }
  .p-qd-features__circle dl dt { font-size: 12px; line-height: 1.6; margin-bottom: 5px; }
  .p-qd-features__circle dl dd { font-size: 13px; line-height: 1.3; margin-top: 0; }
  .p-qd-features__circle dl dd span { font-size: 10px; display: block;}

  .p-vertical-integration__process-grid { flex-direction: column; gap: 15x;  margin-bottom: 20px; }
  .p-vertical-integration__process-image { width: 100% }
  .p-vertical-integration__text-list { width: 100%; }
  .p-vertical-integration__diagram-area { padding: 15px; }

  /* Matrix Tables Adjustments */
  .p-product-matrix__lead { margin-bottom: 20px; text-align: left; text-indent: -0.5em; padding-left: 0.5em; }
  .p-product-matrix__table { margin-bottom: 30px; }
  .p-product-matrix__th { width: 120px; padding: 10px; }
  .p-product-matrix__table td { width: 250px; padding: 15px 10px; }

  .p-qd-matrix__table { margin-bottom: 30px; }
  .p-qd-matrix-series { width: 10%!important; text-align: center; }
  .p-qd-matrix-photo { width: 30%!important; text-align: center; }
  .p-qd-matrix-rotate{ width: 25%!important; text-align: center; }
  .p-qd-matrix-spec { width: 35%!important; text-align: left; }
  .p-qd-matrix__footer-figs { flex-direction: column; }

  /* News & FAQ Adjustments */
  .p-news-item { flex-direction: column; align-items: flex-start; padding: 15px 20px; }
  .p-news-item .p-news__date { margin-bottom: 5px; }
  .c-pagination__item a { width: 35px; height: 35px; }
  .p-news-detail__title-group { flex-direction: column; align-items: flex-start; }
  .p-news-detail__gallery { grid-template-columns: 1fr; }

/* FAQ Adjustments */
  .p-faq__question { padding: 20px 20px 20px 20px; }
  .p-faq__toggle-icon { right: 20px; }
  .p-faq__answer-inner { padding: 20px; }


/* ▼ スクロールヒント（スマホ時のみ表示） ▼ */
  .c-table-scroll-wrapper { position: relative; }
  .c-scroll-hint { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 25; padding: 12px 24px; background-color: rgba(0, 160, 64, 0.75); color: var(--color-white); font-size: var(--fz-xs); font-weight: bold; border-radius: 30px; pointer-events: none;  transition: opacity 0.4s ease, visibility 0.4s ease; animation: hintBounce 1.5s infinite; }
  .c-scroll-hint::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
  .c-scroll-hint.is-hidden { opacity: 0 !important; visibility: hidden !important;
  }
  @keyframes hintBounce {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-45%, -50%); }
  }
}


/* ========================================
   Spec Accordion & Table
   ======================================== */
.p-product-lineup__item-wrap { display: flex; flex-direction: column; width: 100%; max-width: 880px; margin: 0 auto; }

/* ▼ トグルボタン（スペック表を見る） ▼ */
.p-spec-accordion__toggle { display: inline-flex; align-items: center; justify-content: space-between; margin-top: 25px; padding: 12px 20px; width: 100%; font-size: var(--fz-base); font-weight: bold; color: var(--color-main); background-color: var(--color-white); border: 2px solid var(--color-main); border-radius: 4px; cursor: pointer; transition: all 0.3s ease; }
.p-spec-accordion__toggle:hover { background-color: rgba(0, 160, 64, 0.05); }
.p-spec-accordion__toggle.is-open { color: var(--color-white); background-color: var(--color-main); }

/* ▼ ＋－アイコンのアニメーション ▼ */
.p-spec-accordion__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.p-spec-accordion__icon::before, .p-spec-accordion__icon::after { position: absolute; top: 50%; left: 50%; background-color: var(--color-main); content: ""; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease; }
.p-spec-accordion__icon::before { width: 100%; height: 2px; margin-top: -1px; margin-left: -50%; }
.p-spec-accordion__icon::after { width: 2px; height: 100%; margin-top: -50%; margin-left: -1px; }
/* 開いた時の「－」への変化 */
.p-spec-accordion__toggle.is-open .p-spec-accordion__icon::before, .p-spec-accordion__toggle.is-open .p-spec-accordion__icon::after { background-color: var(--color-white); }
.p-spec-accordion__toggle.is-open .p-spec-accordion__icon::after { transform: rotate(90deg); }

/* ▼ アコーディオン本体の開閉ギミック ▼ */
.p-spec-accordion__content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.p-spec-accordion__content.is-open { grid-template-rows: 1fr; }
.p-spec-accordion__inner { overflow: hidden; }

/* ▼ スペック表のデザイン ▼ */
.p-product-spec { padding-top: 30px; width: 100%; }
.p-product-spec__title { margin-bottom: 15px; font-size: var(--fz-lg); font-weight: bold; text-align: center; color: var(--color-text); }
.p-product-spec__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(0, 160, 64, 0.4) #f5f5f5; }
.p-product-spec__table { width: 100%; min-width: 600px; border-collapse: collapse; background-color: var(--color-white); }
.p-product-spec__table th, .p-product-spec__table td { padding: 12px 15px; border: 1px solid #ccc; font-size: var(--fz-sm); text-align: center; vertical-align: middle; }
.p-product-spec__table thead th { background-color: #222; color: var(--color-white); font-weight: bold; }
.p-product-spec__table tbody th { width: 30%; text-align: left; background-color: #f5f5f5; color: var(--color-text); font-weight: bold; }
.p-product-spec__table tbody th span { font-size: var(--fz-xs); font-weight: normal; }
.p-product-spec__table td { width: 35%; }
/*.p-product-spec__table td:nth-child(2) { font-weight: bold; color: var(--color-main); background-color: rgba(0, 160, 64, 0.05); }*/

/* スマホ用ボタン幅調整 */
@media screen and (max-width: 768px) {
  .p-spec-accordion__toggle { max-width: 100%; }
}

html[lang="en"] body { line-height: 1.4!important; letter-spacing: 0; }
html[lang="en"] .l-header__btns--pc .btn { font-size: var(--fz-md); }
html[lang="en"] .p-hero__title { font-size: clamp(32px, 4vw, 70px); line-height: 1.1; letter-spacing: 0; }
html[lang="en"] .p-hero__lead { font-size: clamp(18px, 1.7vw, 26px); font-weight: bold; line-height: 1.6; text-shadow: 3px 3px 6px rgba(0,0,0,0.8); }
html[lang="en"] .p-features__item-title { margin: 0 0 5px; }
html[lang="en"] .p-features__icon { width: 65px; opacity: .8; }
html[lang="en"] .p-features__icon img { width: auto; max-height: 100%; }
html[lang="en"] .p-company__text { line-height: 1.8; letter-spacing: 0; }
html[lang="en"] .p-support__text { font-size: var(--fz-base); }
html[lang="en"] .p-qd-features__points dt span { color: var(--color-main); font-size: 20px; line-height: 1.2; }
html[lang="en"] .p-qd-features__points dd { margin: -5px; }
html[lang="zh-CN"] .p-hero__title { line-height: 1.38; }
@media screen and (max-width: 768px) {
  html[lang="zh-CN"] .p-hero__title { font-size: 8.5vw!important; }
}