@charset "UTF-8";

/* ============================================
   Reset
============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

.pc-only {
  display: block;
}
.sp-only {
  display: none;
}

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

@media print, screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }

  img {
    width: 100%;
  }
}

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.hover-fade {
  position: relative;
  display: inline-block;
}

.hover-fade .img-color {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ホバー時にカラー版の透明度を1にする */
.hover-fade:hover .img-color {
  opacity: 1;
}

@media print, screen and (max-width: 768px) {
  .hover-fade .img-gray {
    opacity: 0;
  }
  .hover-fade .img-color {
    opacity: 1;
  }
}


/* ============================================
   Variables
============================================ */
:root {
  --color-base: #252a2e;
  --color-white: #ffffff;
  --color-nav-gray: #aaa7a7;
  --color-header-bg: rgba(37, 42, 46, 0.6);

  --font-en: "Advent Pro", "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  --header-height-pc: 5.1vw;

  --container-max: 1920px;
  --side-padding-pc: 8.3%;
  --side-padding-sp: 8vw; /* 30/375 */
}

/* ============================================
   Base typography
============================================ */
body {
  font-family: var(--font-jp);
  font-size: 1.6rem;
  line-height: 1.75;
  color: var(--color-base);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Display utilities
============================================ */
.pc {
  display: block;
}

.sp {
  display: none;
}

@media print, screen and (max-width: 768px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

/* ============================================
   Accessibility
============================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Header
============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height-pc); /* 高さを確定させ、メニューの吊り下げ基準にする */
  z-index: 1000;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); /* なめらかに移動 */
}
.header.is-hidden {
  transform: translateY(-100%);
}

.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--side-padding-pc);
  justify-content: space-between;
}

.header__logo {
  flex-shrink: 0;
  width: min(235px, 12.2vw);
  margin: 0;
  line-height: 1;
}

.header__logo a {
  display: block;
}

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

/* ----- PC Navigation ----- */
.header__nav {
  width: 64.68%;
  height: 100%;
  margin: 0 1.93% 0 auto;
}

.header__nav-list {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
}

/* 各項目をヘッダー全高に広げ、リンクを縦中央に。
   これにより子メニューの top:100% がヘッダー下端に一致する */
.header__nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.header__nav-link {
  display: inline-block;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2.2rem, 1.15vw);
  letter-spacing: 0.05em;
  color: var(--color-nav-gray);
  line-height: 1;
  white-space: nowrap;
  padding: 8px 0;
}

.header__nav-link:hover {
  color: var(--color-white);
  opacity: 1;
}

/* ----- Megamenu (SERVICE) ----- */
.header__megamenu {
  position: absolute;
  top: 100%; /* ヘッダー下端にぴったり吊り下げる（帯に重ならない） */
  left: -1em;
  min-width: 6em;
  padding: 0 1.2em 1.2em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}

.header__nav-item--has-child:hover .header__megamenu,
.header__nav-item--has-child:focus-within .header__megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.header__megamenu-list {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.header__megamenu-list a {
  display: flex;
  font-family: var(--font-jp);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-nav-gray);
  letter-spacing: 0.05em;
  white-space: nowrap;
  line-height: 1.2;
}
.header__megamenu-list a:hover {
  color: var(--color-white);
  opacity: 1;
}

.header__megamenu-list a::before {
  content: "- ";
}

/* ----- Header actions (STEN FLAME / drawer) ----- */
.header__actions {
  display: flex;
  align-items: center;
  gap: min(2.08vw, 40px);
  flex-shrink: 0;
}

.header__brand-btn {
  display: inline-block;
  width: min(85px, 4.4vw);
  line-height: 0;
}

.header__brand-btn img {
  width: 100%;
  height: auto;
}

.header__drawer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(53px, 2.8vw);
  height: min(33px, 1.78vw);
}

.header__drawer-btn img {
  width: 100%;
  height: auto;
}

/* ============================================
   Drawer Menu (全画面オーバーレイ / PC・SP共通)
   - 開閉でHTML構造は変更しない
============================================ */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.drawer.is-active {
  opacity: 1;
  visibility: visible;
}

/* ----- 背景（グラデーション） ----- */

.drawer__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to bottom, rgba(85, 85, 85, 0.35), rgba(37, 42, 46, 0) 26%),
    rgba(37, 42, 46, 0.9);
}

.drawer__wrapper {
  display: flex;
  flex-direction: column;
  padding: min(30px, 2.6vw) min(39px, 3.3vw) min(34px, 2.9vw);
  overflow-y: auto;
  height: 100%;
}

/* ----- ヘッダー（ロゴ／閉じるボタン） ----- */
.drawer__header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.drawer__logo {
  width: min(235px, 16vw);
  line-height: 0;
}

.drawer__logo a {
  display: block;
}

.drawer__logo img {
  width: 100%;
}

.drawer__close {
  position: relative;
  width: min(38px, 3vw);
  height: min(38px, 3vw);
  flex-shrink: 0;
}

.drawer__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(53px, 4.2vw);
  height: 1.5px;
  background-color: var(--color-white);
}

.drawer__close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.drawer__close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ----- メインナビ（グリッド＋CONTACT） ----- */
.drawer__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

.drawer__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 1fr 1fr;
  grid-template-rows: 1fr max-content;
  row-gap: min(45px, 2.34vw);
  width: min(958px, 72vw);
  margin-inline: auto;
}

.drawer__item {
  align-self: start;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  padding-left: min(16px, 1.4vw);
}

.drawer__item > a {
  display: flex;
  flex-direction: column;
  gap: min(20px, 1.6vw);
}

.drawer__en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2.9rem, 1.9vw);
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-white);
}

.drawer__ja {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(1.6rem, 0.95vw);
  letter-spacing: 0.2em;
  line-height: 1;
  color: var(--color-nav-gray);
  transition: color 0.3s ease;
}

/* 各日本語はホバーで真っ白に */
.drawer__item > a:hover .drawer__ja {
  color: var(--color-white);
}

/* SERVICE のサブメニュー */
.drawer__item--service > a {
  gap: min(14px, 1.2vw);
}

.drawer__sub {
  display: flex;
  flex-direction: column;
  margin-top: min(14px, 1.2vw);
}

.drawer__sub a {
  display: block;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(1.6rem, 0.95vw);
  letter-spacing: 0.2em;
  line-height: 1.625; /* 26/16 */
  color: var(--color-nav-gray);
  padding-left: 0.8em;
}

.drawer__sub a::before {
  content: "-";
  margin-right: 0.2em;
  display: block;
  float: left;
  margin-left: -1em;
  width: 1em;
  text-align: center;
}

.drawer__sub a:hover {
  color: var(--color-white);
}

/* STEN FLAME（自社商品事業） */
.drawer__item--brand > a {
  gap: min(16px, 1.3vw);
  position: relative;
  margin-top: -0.37vw;
  gap: min(12px, 0.625vw);
}

.drawer__brand-logo {
  display: block;
  width: min(85px, 5.9vw);
  line-height: 0;
}

.drawer__brand-logo img {
  width: 100%;
}

/* ----- グリッド下の区切り罫 ----- */
.drawer__hr {
  width: min(958px, 72vw);
  margin: min(40px, 3.4vw) auto 0;
  line-height: 0;
}

.drawer__hr img {
  width: 100%;
}

/* ----- CONTACT ----- */
.drawer__contact {
  text-align: center;
  width: min(958px, 72vw);
  margin: 4.08vw auto 1.87vw;
}

.drawer__contact-en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2.9rem, 1.9vw);
  letter-spacing: 0.1em;
  color: var(--color-white);
}

.drawer__contact-ja {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(1.7rem, 1vw);
  letter-spacing: 0.2em;
  color: var(--color-nav-gray);
}

.drawer__contact .btn-line {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  height: 100%;
  aspect-ratio: 959 / 46;
  background-image: url(../images/drawer__contact-line.svg);
}
.drawer__contact .btn-line:before {
  font-size: min(2.9rem, 1.9vw);
}

.drawer__contact .btn-line .btn-line__label {
  display: flex;
  align-items: center;
  gap: 16px;
}
.drawer__contact .btn-line .pc-only {
  display: inline-block;
}

/* ----- フッター（SNS／コピーライト） ----- */
.drawer__footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  width: min(958px, 72vw);
  margin: 0 auto;
}

.drawer__sns {
  display: flex;
  gap: min(20px, 1.6vw);
}

.drawer__sns img {
  width: min(28px, 2vw);
}

.drawer__copyright {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(1.1rem, 0.9vw, 1.4rem);
  letter-spacing: 0.1em;
  color: var(--color-white);
}

/* ============================================
   Main
============================================ */
.main {
  /* MVが画面いっぱいの背景なのでpaddingなし */
}

/* ============================================
   Button (View Details)
   - グラデーション下線スタイル
============================================ */
.btn-line {
  position: relative;
  width: min(250px, 13.3333vw);
  height: min(56px, 3.1111vw);
  background-image: url("../images/btn-line.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  overflow: hidden;
}

.btn-line__label {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: max-content;
  height: max-content;
  margin: auto;
  z-index: 1;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.2em;
  color: var(--color-white);
  text-transform: uppercase;
  line-height: 1;
  transition: all .3s ease-in-out;
}

.btn-line:before {
  content: attr(data-hover);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: max-content;
  height: max-content;
  margin: auto;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.2em;
  color: var(--color-white);
  text-transform: uppercase;
  opacity: 0;
  transform: translate(-100%, 0);
  transition: all .3s ease-in-out;
}
.btn-line:hover:before {
  opacity: 1;
  transform: translate(0, 0);
}
.btn-line:hover .btn-line__label {
  opacity: 0;
  transform: translate(100%, 0);
}
/* ----- Button dark variant (明るい背景用) ----- */
.btn-line--dark {
  background-image: url("../images/btn-frame.svg"); /* 左右に切れ目のある枠（黒） */
}

.btn-line--dark .btn-line__label,
.btn-line--dark:before {
  color: #000;
}

/* ============================================
   Page Hero（下層ページ共通の全画面ビジュアル + タイトル）
============================================ */
.page-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 1080px;
  overflow: hidden;
  background-color: #000;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-hero__bg img {
  position: absolute;
  place-self: center;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Figma: 上から rgba(85,85,85,0.5) → 透明(26%)、乗算 */
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(85, 85, 85, 0.5), rgba(255, 255, 255, 0) 26%);
  mix-blend-mode: multiply;
}

/* パンくず（左上） */
.page-hero__breadcrumb {
  position: absolute;
  z-index: 10;
  top: clamp(90px, 6.6vw, 128px);
  left: var(--side-padding-pc);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}

.page-hero__breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
}

.page-hero__crumb-sep {
  font-size: 1.1rem;
  margin: 0 0.4em;
}

.page-hero__crumb-current {
  color: var(--color-white);
}

/* 中央タイトル */
.page-hero__title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 下層ページ共通：小さなEN（白50%）＋大きなJA（白）。ABOUT は about.css で上書き */
.page-hero__en {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.3em;
  color: #ffffff80;
  line-height: 1;
  text-transform: uppercase;
}

.page-hero__ja {
  margin-top: 0.65em;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: min(4.3rem, 2.24vw);
  letter-spacing: 0.3em;
  color: var(--color-white);
  line-height: 1;
}

/* ----- Hero compact（高さ580pxの帯） / グレー乗算オーバーレイ ----- */
.page-hero--compact {
  height: clamp(360px, 30.2vw, 580px);
  min-height: 360px;
}

.page-hero__overlay--gray {
  /* background: #bfbfbf; */
  mix-blend-mode: multiply;
}

/* ============================================
   Section container（下層ページ共通コンテナ）
============================================ */
.svc-inner {
  max-width: 1610px;
  margin: 0 auto;
  padding: 0 var(--side-padding-pc);
}

/* ============================================
   Feature（特長 ×N・左右交互の50/50）
============================================ */
.feature {
  display: flex;
  align-items: stretch;
  flex-direction: row-reverse; /* 既定：画像=右 / テキスト=左 */
  min-height: clamp(420px, 38.4vw, 737px);
  color: var(--color-white);
}

.feature--reverse {
  flex-direction: row; /* 画像=左 / テキスト=右 */
}

/* 背景バリエーション */
.feature--light {
  background-color: #f8f8f8;
  color: #000;
}

.feature--slate {
  background-color: rgba(37, 42, 46, 0.69);
}

.feature--dark {
  background-color: var(--color-base);
}

.feature__media {
  flex: none;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 960 / 737;
  /* 画像はパネル全高を埋めず、上下100pxずつインセット（背景色を見せる） */
  padding-block: min(5.21vw, 100px);
}

.feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature__body {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* 上120px(6.25vw) / 下80px(4.17vw) ※SP最小値は仮 */
  padding-block: min(6.25vw, 120px) min(4.17vw, 80px);
  /* 外側160px(8.33vw) / 内側133px(6.93vw) */
  padding-inline: min(8.33vw, 160px) min(6.93vw, 133px);
}

.feature--reverse .feature__body {
  padding-inline: min(6.93vw, 133px) min(8.33vw, 160px);
}

.feature__head {
  display: flex;
  align-items: center;
  gap: 0; /* 要素間は個別marginで管理 */
  margin-bottom: min(1.6vw, 31px);
}

/* feature__head 内の要素間隔（PC基準1920px / SP最小値は仮） */
.feature__head > .feature__label {
  margin-left: min(9.48vw, 182px); /* bar(左)↔label 182px */
}

.feature__head > .feature__no {
  margin-left: min(3.18vw, 61px); /* label↔no 61px */
}

.feature__head > .feature__bar:last-child {
  margin-left: min(5.83vw, 112px); /* no↔bar(右) 112px */
}

.feature__bar {
  flex: none;
  width: clamp(8px, 0.57vw, 11px);
  height: clamp(32px, 2.4vw, 46px);
  background-color: #bfcfd1;
}


/* 各セクションの色を定義 */
.feature-01 {
  --feature-color: #BFCFD1;
}
.feature-02 {
  --feature-color: #D1F1F5;
}
.feature-03 {
  --feature-color: #D1DFF5;
}

.feature__label {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--feature-color, #BFCFD1);
  line-height: 1;
}

.feature__no {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(6rem, 3.13vw);
  letter-spacing: 0.3em;
  color: var(--feature-color, #BFCFD1);
  line-height: 1;
}

.feature__title {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(3.2rem, 1.66vw);
  /* letter-spacing: 0.2em; */
  letter-spacing: 0.15em;
  line-height: 1.667;
  color: inherit;
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph;/* 両端揃えの種類 */
}

.feature__text {
  margin: min(1.6vw, 31px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(1.8rem, 0.94vw);
  letter-spacing: 0.2em;
  line-height: 2.375;
  color: inherit;
  text-align: justify; /* 両端揃え */
  text-justify: inter-ideograph;/* 両端揃えの種類 */
}

/* ============================================
   Case Studies（加工事例カードグリッド）
============================================ */
.case-studies {
  background-color: #f8f8f8;
  padding: min(8vw, 150px) 0;
}

.case-studies__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: min(2.8vw, 54px);
  row-gap: min(5.2vw, 100px);
  margin-top: min(4.7vw, 90px);
}

.case-studies__empty {
  grid-column: 1 / -1; /* グリッドの端から端まで突き抜ける */
  text-align: center;  /* 中央揃え（お好みで） */
  padding: 40px 0;     /* 上下の余白（お好みで） */
}

.case-card {
  display: block;
  color: #000;
}

.case-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 362 / 272;
  overflow: hidden;
  background-color: #1a1a1a;
}

.case-card__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.case-card:hover .case-card__img img {
  transform: scale(1.05);
}

.case-card__title {
  margin: min(1.05vw, 20px) 0 min(0.6vw, 12px);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2.2rem, 1.15vw);
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: #000;
}

.case-card__tag {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid #9ea0ad;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(1.5rem, 0.78vw);
  letter-spacing: 0.2em;
  color: #9ea0ad;
  text-transform: uppercase;
  line-height: 1;
}

/* ============================================
   Banner Full（全幅バナー）
============================================ */
.banner-full {
  width: 100%;
  transition: opacity 0.3s ease;
}
.banner-full:hover {
  opacity: 0.5;
}

.banner-full__link {
  display: block;
  width: 100%;
  height: clamp(180px, 17.2vw, 330px);
  transition: opacity 0.3s ease;
}

.banner-full__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
}

.banner-full__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(5.3rem, 2.76vw);
  letter-spacing: 0.3em;
  line-height: 1;
}

.banner-full__ja {
  margin: min(1.6vw, 30px) 0 0;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.2em;
  color: #b4b4b4;
  line-height: 1;
}

.banner-full--qa {
  background-color: #f8f8f8;
}

.banner-full--qa .banner-full__en {
  color: #000;
}

.banner-full--contact {
  background-color: #545a69;
}

.banner-full--contact .banner-full__en {
  color: var(--color-white);
}

/* ============================================
   BLOG カルーセル（共通：ホーム / SERVICE / BLOG）
============================================ */
section.blog {
  background-color: #545a69;
  padding: min(6.3vw, 121px) 0 min(7vw, 135px);
  color: var(--color-white);
  overflow: hidden;
  --blog-side: min(8.4vw, 163px);
  --blog-side-sp: 14.4vw;
  --blog-gap: min(0.8vw, 16px);
  --blog-gap-sp: 6.61vw;
  /* PC: 4.5枚弱が見えるように1枚の幅を算出（右端は見切れる） */
  --blog-card-w: calc((100vw - var(--blog-side) - var(--blog-gap) * 4) / 4.5);
  --blog-card-w-sp: 71.4vw;
}

.blog__inner {
  position: relative;
}

.blog__carousel {
  position: relative;
  margin-top: min(5.7vw, 110px);
}

.blog__list {
  display: flex;
  gap: var(--blog-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--blog-side); /* スナップ位置を左余白に合わせる */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  user-select: none; /* ドラッグ中のテキスト選択を抑制 */
  cursor: grab;
}

.blog__list::-webkit-scrollbar {
  display: none;
}

/* 先頭カードの左に余白を作る（padding-left だと scroll-snap と相性が悪いため） */
.blog__list::before {
  content: "";
  flex: 0 0 var(--blog-side);
}

.blog-card {
  flex: 0 0 var(--blog-card-w);
  scroll-snap-align: start;
}

/* マウスドラッグ中の挙動：アニメーション無効化＋カーソル変更 */
.blog__list.is-dragging {
  scroll-behavior: auto;
  scroll-snap-type: none;
  cursor: grabbing;
}

.blog__list.is-dragging a {
  pointer-events: none; /* ドラッグ直後の意図しないクリック遷移を防止 */
}

.blog-card a {
  display: block;
  color: var(--color-white);
}

.blog-card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 362 / 272;
  overflow: hidden;
  background-color: #1a1a1a;
}

.blog-card__img img.number-bg,
.blog-card__img img.set-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition-duration: .7s;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
  -webkit-user-drag: none; /* 画像のドラッグゴーストを抑止 */
  user-select: none;
  pointer-events: none; /* クリックは親の<a>が受ける */
}


.blog-card__img-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6.8%;
  color: #B3B3B3;
  transition-duration: .7s;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-timing-function: cubic-bezier(.19, 1, .22, 1);
}
.blog-card__img-inner img:not(.number-bg) {
  position: relative;
  width: 19%;
  height: auto;
  object-fit: cover;
}
.blog-card__img-title {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(5.3rem, 2.76vw);
  letter-spacing: 0.21em;
  line-height: 1;
}
.blog-card__img-number {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(4.2rem, 2.17vw);
  letter-spacing: 0.11em;
  line-height: 1;
  margin-top: 0.47em;
}

.blog-card a:hover .blog-card__img img.number-bg,
.blog-card a:hover .blog-card__img img.set-bg,
.blog-card a:hover .blog-card__img-inner {
  transform: scale(1.05);
}

.blog-card__title {
  margin: min(1.05vw, 20px) 0 min(0.5vw, 10px);
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.08em;
  line-height: 1.5;
  min-height: 3em;
}

.blog-card__date {
  display: block;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: min(1.6rem, 0.83vw);
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1;
}

/* ----- Blog arrows ----- */
.blog__arrow {
  position: absolute;
  top: min(84px, 4.3vw);
  width: min(34px, 1.77vw);
  height: min(114px, 5.94vw);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.blog__arrow:hover {
  opacity: 0.6;
}

.blog__arrow img {
  width: 100%;
  height: 100%;
}

.blog__arrow--prev {
  left: min(75px, 3.9vw);
  transform: scaleX(-1);
}

.blog__arrow--next {
  right: min(75px, 3.9vw);
}

/* ----- Blog bottom button area with progress bar ----- */
.blog__btn {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: min(5.2vw, 100px);
  padding-top: min(5.2vw, 100px);
  --progress: 0;
  --progress-thumb: 18%;
}

/* プログレスバー本体（トラック）。ドラッグ操作可能 */
.blog__bar {
  position: absolute;
  top: 0;
  left: var(--blog-side, min(5.7vw, 109px));
  right: var(--blog-side, min(5.7vw, 109px));
  height: 2px;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  touch-action: none; /* 縦スクロールに奪われず横ドラッグを拾う */
  user-select: none;  /* ドラッグ中のテキスト選択カーソルを抑止 */
}

/* 見た目は2pxのまま、掴みやすいよう当たり判定を上下に拡張 */
.blog__bar::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: 0;
  right: 0;
}

.blog__bar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(100% * var(--progress-thumb));
  background-color: #fff;
  transform: translateX(calc((100% / var(--progress-thumb) - 100%) * var(--progress)));
  transition: transform 0.25s ease;
  pointer-events: none; /* 当たり判定はトラックに集約 */
}

/* バーのドラッグ中は追従を即時反映 */
.blog__bar.is-dragging .blog__bar-thumb {
  transition: none;
}

/* ==============================
   Pager
============================== */
/* ----- ページネーション ----- */
.pager,
.pager .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: min(1.4vw, 22px);
  margin-top: min(5vw, 96px);
}

.pager h2 {
  display: none;
}

.pager__num,
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 2.9vw, 56px);
  height: clamp(44px, 2.9vw, 56px);
  /* border: 1px solid #9ea0ad; */
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2rem, 1.04vw);
  color: #000;
  line-height: 1;
  background-image: url(../images/blog/pager-bg.svg);
  background-size: cover;
}

.pager__num.is-active,
.page-numbers.current {
  background-color: var(--color-base);
  border-color: var(--color-base);
  color: var(--color-white);
}

.pager__arrow,
.page-numbers.prev,
.page-numbers.next {
  border: none;
  padding: 0 min(1vw, 18px);
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.1em;
  color: #000;
  background:none;
}
.page-numbers.dots {
  background:none;
}

@media print, screen and (max-width: 768px) {

  .pager {
    gap: 10px;
    margin-top: 50px;
  }

  .pager__num,
  .page-numbers {
    width: 11vw;
    height: 11vw;
    font-size: 4vw;
  }

  .pager__arrow,
  .page-numbers.prev,
  .page-numbers.next {
    padding: 0 8px;
    font-size: 3.7vw;
  }
}

/* ============================================
   Footer
============================================ */
.footer {
  background-color: var(--color-base);
  color: var(--color-white);
  padding: 80px 0 30px;
}

.footer__inner {
  position: relative;
  max-width: 1740px;
  margin: 0 auto;
  padding: 0 min(10vw, 192px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
}

/* ----- Footer company info ----- */
.footer__company {
  display: flex;
  flex-direction: column;
}

.footer__logo {
  width: 235px;
  margin-bottom: 32px;
  line-height: 0;
}

.footer__logo img {
  width: 100%;
  height: auto;
}

.footer__address {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: min(1.8rem, 0.93vw);
  letter-spacing: 0.15em;
  line-height: 2;
  margin-bottom: 32px;
}

.footer__copyright {
  margin-top: auto;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: min(1.6rem, 0.83vw);
  letter-spacing: 0.1em;
  line-height: 1;
}

/* ----- Footer nav ----- */
.footer__nav {
  padding-top: 14px;
}

.footer__nav-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(max-content, 1fr));
  row-gap: 46px;
  column-gap: clamp(12px, 1.2vw, 20px);
}

.footer__nav-item a {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  align-items: flex-start;
  width: max-content;
  transition: opacity 0.3s ease;
}
.footer__nav-item a:hover {
  opacity: 0.5;
}

.footer__nav-en {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2rem, 10.4vw);
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
}

.footer__nav-ja {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: min(1.2rem, 0.62vw);
  letter-spacing: 0.2em;
  line-height: 1.5;
  white-space: nowrap;
}

/* ----- Footer SNS ----- */
.footer__sns {
  position: absolute;
  right: clamp(30px, 10vw, 192px);
  bottom: 0;
  display: flex;
  gap: 12px;
}

.footer__sns a {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 0;
  transition: opacity 0.3s ease;
}
.footer__sns a:hover {
  opacity: 0.5;
}

.footer__sns img {
  width: 100%;
  height: 100%;
}

/* ============================================
   Responsive (SP: ~768px)
============================================ */
@media print, screen and (max-width: 768px) {

  /* ----- Header ----- */
  .header {
    height: auto; /* SPは内容に応じた高さに戻す */
    padding: 14.4vw 0 0; /* 54/375 */
  }

  .header__inner {
    padding: 0 5.06vw 0 5.6vw; /* 19 / 21 */
  }

  .header__logo {
    width: 34.4vw; /* 129/375 */
  }

  .header__actions {
    margin-left: auto;
  }

  .header__drawer-btn {
    width: 9.86vw; /* 37/375 */
    height: auto;
  }

  /* SP: STEN FLAME ボタン非表示 */
  .header__brand-btn.pc {
    display: none;
  }

  /* ----- Drawer Menu (SP: 縦一列に組み替え) ----- */
  .drawer {
    padding: 0;
    overflow: hidden;
  }

  .drawer__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* グラデーションなどの記述はそのまま */
  }
  .drawer__wrapper {
    position: relative;
    z-index: 1; /* 背景より手前に出す */
    height: 100%; /* 親（画面）の高さいっぱいに広げる */
    overflow-y: auto; /* ここでスクロールさせる！ */
    padding: 14.4vw 7.73vw 13.33vw 5.6vw;
  }

  .drawer__logo {
    width:34.4vw; /* 129/375 */
  }

  .drawer__close {
    width: 7.73vw; /* 29 */
    height: 7.73vw;
  }

  .drawer__inner {
    margin-top: 8vw;
    margin-bottom: 8vw;
  }

  /* グリッド → 1カラムの縦積みリスト */
  .drawer__grid {
    grid-template-columns: 115fr 106fr;
    grid-template-rows: 1fr;
    width: 100%;
  }

  .drawer__item {
    border-left: 0;
    padding-left: 0;
  }

  .drawer__item > a {
    align-items: baseline;
    gap: 2.6vw; /* 10 */
    padding: 4.8vw 1.0667vw; /* 18 / 4 */
  }

  .drawer__en {
    font-size: 6.4vw; /* 24 */
  }

  .drawer__ja {
    font-size: 3.7vw; /* 14 */
  }

  /* SERVICE：見出し＋サブメニューを縦に */
  .drawer__item--service > a {
    flex-direction: row;
    padding-bottom: 2.6vw; /* 10 */
  }

  .drawer__sub {
    margin-top: 0;
    padding: 0;
  }

  .drawer__sub a {
    font-size: 3.7vw; /* 14 */
    line-height: 1.85;
    padding-left: 1.2em;
  }
  .drawer__sub a::before {
    margin-left: -1.2em;
  }

  /* SP: Drawer Menu グリッドレイアウト */
  .drawer__item--about {
    grid-area: 1 / 1 / 2 / 2;
  }
  .drawer__item--service {
    grid-area: 1 / 2 / 3 / 3;
  }
  .drawer__item--works {
    grid-area: 2 / 1 / 3 / 2;
  }
  .drawer__item--machinery {
    grid-area: 3 / 1 / 4 / 2;
  }
  .drawer__item--blog {
    grid-area: 3 / 2 / 4 / 3;
  }
  .drawer__item--recruit {
    grid-area: 4 / 1 / 5 / 2;
  }
  .drawer__item--company {
    grid-area: 4 / 2 / 5 / 3;
  }
  .drawer__item--news {
    grid-area: 5 / 1 / 6 / 2;
  }
  .drawer__item--faq {
    grid-area: 5 / 2 / 6 / 3;
  }

  /* STEN FLAME */
  .drawer__item--brand {
    display: none;
  }

  .drawer__contact {
    margin-top: 9.6vw; /* 36 */
  }

  .drawer__contact .btn-line {
    aspect-ratio: 273 / 56;
    background-image: url(../sp-images/drawer__contact-line.svg);
  }
  .drawer__contact .btn-line .btn-line__label {
    gap: 2vw;
  }
  .drawer__contact .btn-line .pc-only {
    display: none;
  }

  .drawer__contact-en {
    font-size: 6.4vw; /* 24 */
  }

  .drawer__contact-ja {
    font-size: 3.7vw; /* 14 */
  }

  .drawer__footer {
    margin-top: 16.66vw; /* 63 */
    flex-direction: column;
    gap: 7.4667vw; /* 28 */
    width: 100%;
  }

  .drawer__sns {
    gap: 7.46vw; /* 28 */
  }

  .drawer__sns img {
    width: 7.4667vw; /* 28 */
  }

  .drawer__copyright {
    font-size: 3.2vw; /* 12 */
  }

  /* ----- Button (View Details) ----- */
  .btn-line {
    width: 64vw; /* 240 */
    height: 13.8667vw; /* 52 */
  }

  .btn-line__label {
    font-size: 4.2667vw; /* 16 */
  }

  /* ----- Page Hero ----- */
  .page-hero {
    height: 100svh;
    min-height: 480px;
  }

  .page-hero__breadcrumb {
    display: none;
    top: clamp(80px, 22vw, 92px);
    left: var(--side-padding-sp);
    font-size: 3.2vw;
  }

  .page-hero__crumb-sep {
    font-size: 2.6vw;
  }

  .page-hero__en {
    font-size: 4vw; /* 15 */
  }
  .page-hero__ja {
    margin-top: 4.2vw; /* 16 */
    font-size: 5.3vw; /* 20 */
  }

  /* ----- Hero compact ----- */
  .page-hero--compact {
    height: 67.4svh;
    min-height: 450px;
  }

  /* ----- Feature ----- */
  .feature,
  .feature--reverse {
    flex-direction: column;
    min-height: 0;
  }

  .feature__media {
    width: 100%;
    padding-block: 0;
  }

  .feature__media img {
    aspect-ratio: 16 / 9;
  }

  .feature__body,
  .feature--reverse .feature__body {
    width: 100%;
    padding-block: 60px 40px;
    padding-inline: var(--side-padding-sp);
  }

  .feature__head {
    gap: 5vw;
    margin-bottom: 24px;
  }

  /* SPは均等gapに戻す（PCの個別marginを打ち消し） */
  .feature__head > .feature__label,
  .feature__head > .feature__no,
  .feature__head > .feature__bar:last-child {
    margin-left: 0;
  }

  .feature__bar {
    width: 2px;
    height: 9vw;
  }

  .feature__label {
    font-size: 3.7vw;
  }

  .feature__no {
    font-size: 11vw;
  }

  .feature__title {
    font-size: 5vw;
    line-height: 1.6;
  }

  .feature__text {
    margin-top: 2.5em;
    font-size: 3.4667vw;
    line-height: 2.1;
  }

  /* ----- Section container ----- */
  .svc-inner {
    padding: 0 var(--side-padding-sp);
  }

  /* ----- Case Studies ----- */
  .case-studies {
    padding: 80px 0;
  }
  .case-studies__list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 16px;
    row-gap: 40px;
    margin-top: 40px;
  }

  .case-card__title {
    margin: 14px 0 8px;
    font-size: 3.7vw;
  }

  .case-card__tag {
    font-size: 2.6667vw;
    padding: 0.53vw 1.6vw;
    letter-spacing: 0.1em;
  }

  /* ----- Banner Full ----- */
  .banner-full__link {
    height: 44vw; /* 165 */
  }

  .banner-full__en {
    font-size: 8vw; /* 30 */
    letter-spacing: 0.3em;
  }

  .banner-full__ja {
    font-size: 3.7vw; /* 14*/
    margin-top: 2.6vw;
  }

  /* ----- BLOG カルーセル ----- */
  section.blog {
    padding: 16vw 0;
    --blog-side: 14.33vw;
    --blog-gap: 5.93vw;
    --blog-card-w: 72vw; /* 270/375 */
  }

  .blog__carousel {
    margin-top: 12.8vw;
  }

  .blog__list {
    gap: var(--blog-gap-sp);
    scroll-padding-left: var(--blog-side-sp);
  }

  .blog-card {
    flex: 0 0 var(--blog-card-w-sp);
  }

  .blog-card__img-inner img:not(.number-bg) {
    width: 13.6vw;
  }
  .blog-card__img-title {
    font-size: 10.4vw;
  }
  .blog-card__img-number {
    font-size: 8vw;
  }

  .blog-card__title {
    font-size: 3.7vw; /* 16 */
    min-height: 0;
    margin: 4vw 0 0;
  }

  .blog-card__date {
    font-size: 2.6667vw; /* 10 */
    padding: 0.53vw 0;
    letter-spacing: 0.1em;
  }

  .blog__arrow {
    top: 18.93vw;
  }

  .blog__btn {
    margin-top: 8vw; /* 30 */
    padding-top: 13.3vw; /* 50 */
  }

  /* ----- Footer -----
     SPはFigmaに合わせて要素順を変更:
     ロゴ → ナビ(2列/下線付) → SNS → 住所 → コピーライト
     .footer__company を display:contents で解除し、中の
     ロゴ/住所/コピーライトを .footer__inner 直下の並び替え対象にする
     （共通HTMLは変更しない） */
  .footer {
    padding: 10.67vw 0 15.73vw; /* 40 / 59 */
  }

  .footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0;
    padding: 0 6.4vw;
    max-width: 100%;
  }

  .footer__company {
    display: contents;
  }

  .footer__logo {
    order: 1;
    width: 48.53vw; /* 182 */
    margin: 0;
  }

  .footer__nav {
    order: 2;
    margin-top: 12.136vw; /* 45.51 */
    padding-top: 0;
    width: 100%;
  }

  .footer__sns {
    order: 3;
    position: static;
    margin-top: 6.66vw; /* 25 */
    justify-content: center;
    gap: 7.46vw; /* 28 */
  }

  .footer__address {
    order: 4;
    margin: 7.2vw 0 0; /* 27 */
    font-size: 3.7333vw; /* 14 */
    letter-spacing: 0.15em;
    line-height: 1.42;
    text-align: center;
  }

  .footer__copyright {
    order: 5;
    margin-top: 2.4vw; /* 9 */
    font-size: 3.2vw; /* 12 */
    letter-spacing: 0.1em;
    text-align: center;
  }

  /* ナビ: 2列・EN下線・左揃え */
  .footer__nav-list {
    grid-template-columns: repeat(2, 36.53vw); /* 137 */
    align-items: space-between;
    row-gap: 6.93vw; /* 26 */
    column-gap: 9.33vw; /* 35 */
  }

  .footer__nav-item a {
    width: 100%;
    gap: 0;
    align-items: stretch;
    text-align: left;
  }

  .footer__nav-en {
    display: block;
    padding-bottom: 1.6vw; /* 6 */
    margin-bottom: 1.6vw; /* 6 */
    border-bottom: 1px solid #FFF;
    font-size: 5.33vw; /* 20 */
    white-space: normal;
  }

  .footer__nav-ja {
    font-size: 3.73vw; /* 14 */
    white-space: normal;
  }

  .footer__sns a {
    width: 7.4667vw; /* 28 */
    height: 7.4667vw;
  }
}

/* ==============================
  アニメーション
============================== */
.section-head__en.is-active,
.page-hero__en.is-active {
  --x: 0;
}
.section-head__en .char,
.page-hero__en .char {
  overflow: hidden;
}
.section-head__en .char-text,
.page-hero__en .char-text {
  display: inline-block;
  transform: translateX(var(--x, -101%));
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition-delay: calc(0.05s * var(--char-index));
}

._fadeInUp {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100px); /* GSAPの y: 100 */

  /* transform と opacity の両方に0.5秒のアニメーションをかける */
  /* cubic-bezier(0, 0.55, 0.45, 1) は circ.out に近い滑らかな動きです */
  transition: opacity 0.5s cubic-bezier(0, 0.55, 0.45, 1),
              transform 0.5s cubic-bezier(0, 0.55, 0.45, 1),
              visibility 0.5s;
}
._fadeInUp.is-active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* GSAPの y: 0 */
}

.not_found {
  background-color: #fff;
  padding: min(5vw, 96px) 0 min(8vw, 150px);
}
.nf-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 var(--side-padding-pc);
}

/* 見出し */
.nf-head {
  text-align: center;
}

.nf-head__en {
  margin: 0;
  font-family: var(--font-en);
  font-weight: 600;
  font-size: min(2rem, 1.04vw);
  letter-spacing: 0.3em;
  color: #b4b4b4;
  line-height: 1;
}

.nf-head__ja {
  margin: min(0.8vw, 16px) 0 0;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: min(4.3rem, 2.24vw);
  letter-spacing: 0.2em;
  color: #000;
  line-height: 1.2;
}

.nf-content {
  margin: min(4vw, 76px) auto 0;
  width: max-content;
}
@media print, screen and (max-width: 768px) {

  .nf-inner {
    padding: 0 var(--side-padding-sp);
  }
  .nf-head__en {
    font-size: 3.2vw;
  }
  .nf-head__ja {
    margin-top: 10px;
    font-size: 7vw;
  }

  .nf-content {
    margin-top: 6vw;
    width: 100%;
    font-size: 3.7vw;
  }
}