/* ==========================================================================
   takumi.css
   匠魂ページ専用スタイル

   構成:
   [HERO]     .p-takumi-hero       … メインバナー（背景画像＋オーバーレイ）
   [LEAD]     .p-takumi-lead       … リード文
   [SECTION]  .p-takumi-section    … パネルカード（セクション共通）
   [ITEM]     .p-takumi-item       … 各サブセクション
   [IMAGES]   .p-takumi-images     … 画像グリッド（2col / 3col）
   [PARTS]    .p-takumi-parts      … 4分割パーツ画像グリッド
   [FLOW]     .p-takumi-flow       … 生産フロー図
   [TEXT]     .p-takumi-text       … 本文テキスト
   [BUTTONS]  .p-takumi-buttons    … CTAボタン群
   ========================================================================== */


/* ==========================================================================
   HERO BANNER: メインバナー
   ========================================================================== */

.p-takumi-hero {
  position: relative;
  aspect-ratio: 28 / 7;
  overflow: hidden;
  border-radius: 0; /* 角丸なし・シャープ */
  margin-bottom: 0; /* リード文とのマージンは lead 側で管理 */
}

/* 背景画像レイヤー（フォールバック色: 暗紺色） */
.p-takumi-hero__bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-darkblue);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* 半透明オーバーレイ */
.p-takumi-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* テキストエリア（中央揃え） */
.p-takumi-hero__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: 80px 20px;
  text-align: left;
  color: var(--color-white);
}

/* メインコピー */
.p-takumi-hero__title {
    font-size: var(--fs-5xl);
    font-weight: var(--fw-bold);
    line-height: 1.3;
    margin: 0 0 var(--sp-lg);
    color: var(--color-white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* サブコピー */
.p-takumi-hero__sub {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  margin: 0;
}


/* ==========================================================================
   LEAD TEXT: リード文
   ========================================================================== */

.p-takumi-lead {
  margin-top: var(--sp-xl);
  margin-bottom: var(--sp-3xl);
  padding: 0;
}

.p-takumi-lead p {
  font-size: var(--fs-sm);
  line-height: 2.0;
  color: var(--color-text);
  margin: 0;
  text-align: left;
}


/* ==========================================================================
   SECTION PANEL: セクション共通パネルカード
   ========================================================================== */

.p-takumi-section {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-light);
  border-radius: var(--radius-xl);
  padding: var(--sp-3xl);
  margin-bottom: var(--sp-3xl);
}

/* 透かし数字 (::before) */
.p-takumi-section::before {
  position: absolute;
  top: -30px;
  right: 10px;
  font-family: var(--font-en);
  font-size: 200px;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-darkblue);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

.p-takumi-section--01::before { content: "01"; }
.p-takumi-section--02::before { content: "02"; }
.p-takumi-section--03::before { content: "03"; }

/* セクション内コンテンツを透かしの前面に */
.p-takumi-section__inner {
  position: relative;
  z-index: 1;
}

/* セクション内の .p-service-intro__title-wrap を上書き（マージン調整） */
.p-takumi-section .p-service-intro__title-wrap {
  margin-bottom: var(--sp-2xl);
}


/* ==========================================================================
   ITEM: 各サブセクション (①②③)
   ========================================================================== */

.p-takumi-item {
  padding-bottom: var(--sp-2xl);
  margin-bottom: var(--sp-2xl);
}

/* 最後のアイテムはボーダーなし・余白なし */
.p-takumi-item--last {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

/* サブセクション見出し (H3) */
.p-takumi-item__heading {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1.5;
  margin-bottom: var(--sp-lg);
}

.p-takumi-item__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}


/* ==========================================================================
   IMAGES: 画像グリッド
   aspect-ratio: 79/56 を使用（②の4枚グリッド以外に適用）
   ========================================================================== */

.p-takumi-images {
  display: grid;
  gap: var(--sp-lg);
  margin-bottom: var(--sp-xl);
}

.p-takumi-images--2col {
  grid-template-columns: repeat(2, 1fr);
}

.p-takumi-images--3col {
  grid-template-columns: repeat(3, 1fr);
}

/* 個別画像ラッパー */
.p-takumi-image {
  aspect-ratio: 79 / 56;
  overflow: hidden;
  background-color: var(--color-border-light);
}

.p-takumi-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration) var(--ease);
}

.p-takumi-image:hover img {
  transform: scale(1.03);
}


/* ==========================================================================
   PARTS: 4分割パーツ画像グリッド（②専用）
   ※ aspect-ratio: 79/56 を適用しない
   ========================================================================== */

.p-takumi-parts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-sm);
  margin-bottom: var(--sp-xl);
}

.p-takumi-parts__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xs);
}

.p-takumi-parts__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-border-light);
}

.p-takumi-parts__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration) var(--ease);
}

.p-takumi-parts__item:hover .p-takumi-parts__image img {
  transform: scale(1.03);
}

.p-takumi-parts__label {
  font-size: var(--fs-md);
  text-align: left;
  line-height: 1.4;
    width: 100%;
}


/* ==========================================================================
   FLOW: 生産フロー図（設計〜検査）
   ========================================================================== */

.p-takumi-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-md) var(--sp-sm);
  margin: var(--sp-2xl) 0;
}

/* 各工程アイテム */
.p-takumi-flow__item {
  display: flex;
  align-items: center;
}

/* 円形コンテナ（position: relative で overlay・label を内包） */
.p-takumi-flow__circle {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

/* 写真 */
.p-takumi-flow__circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 半透明オーバーレイ */
.p-takumi-flow__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  border-radius: 50%;
}

/* 工程ラベル（円の中央に絶対配置） */
.p-takumi-flow__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  z-index: 1;
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* 矢印：CSS三角形（右向き） */
.p-takumi-flow__arrow {
  display: block;
  width: 0;
  height: 0;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 14px solid var(--color-darkblue);
  flex-shrink: 0;
  align-self: center;
}

/* ::after は不使用 */
.p-takumi-flow__arrow::after {
  content: none;
}


/* ==========================================================================
   TEXT: 本文テキスト
   ========================================================================== */

.p-takumi-text {
  margin-bottom: var(--sp-3xl);
}

.p-takumi-text p {
  font-size: var(--fs-sm);
  line-height: 2.1;
  color: var(--color-text);
  margin: 0 0 1.4em;
}

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


/* ==========================================================================
   BUTTONS: CTAボタン群（中央揃え・等幅）
   ========================================================================== */

.p-takumi-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-lg); /* 24px */
  margin-top: var(--sp-lg);
}

/* ボタン：テキスト量に関わらず等幅 */
.p-takumi-buttons .btn {
  width: 100%;
  max-width: 380px;
  justify-content: center;
  text-align: center;
}


/* ==========================================================================
   RESPONSIVE: 1280px (Desktop mid)
   ========================================================================== */

@media (max-width: 1280px) {
  .p-takumi-hero__title {
    font-size: var(--fs-4xl); /* 5xl(44px) → 4xl(36px) */
  }

  .p-takumi-section {
    padding: var(--sp-2xl);
  }

  .p-takumi-section::before {
    font-size: 160px;
  }

  .p-takumi-flow__circle {
    width: 100px;
    height: 100px;
  }

  .p-takumi-flow__arrow {
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-left-width: 12px;
  }
}


/* ==========================================================================
   RESPONSIVE: 1024px (Tablet Landscape)
   ========================================================================== */

@media (max-width: 1024px) {
  .p-takumi-images--3col {
    grid-template-columns: repeat(3, 1fr);
  }

  .p-takumi-parts {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-sm-md);
  }

  .p-takumi-flow__circle {
    width: 90px;
    height: 90px;
  }

  .p-takumi-flow__arrow {
    border-top-width: 8px;
    border-bottom-width: 8px;
    border-left-width: 10px;
  }
}


/* ==========================================================================
   RESPONSIVE: 768px (Tablet Portrait / Smartphone)
   ========================================================================== */

@media (max-width: 768px) {

  /* ヒーローバナー */
  .p-takumi-hero {
    aspect-ratio: 16 / 9;
    border-radius: 0; /* スマホでも角丸なし */
  }

  .p-takumi-hero__body {
    padding: 32px 20px;
  }

  .p-takumi-hero__title {
    font-size: var(--fs-2xl); /* 5xl → 2xl(24px) on SP */
    margin-bottom: var(--sp-sm);
  }

  .p-takumi-hero__sub {
    font-size: var(--fs-sm);
  }

  /* リード文 */
  .p-takumi-lead {
    margin-top: 24px;
    margin-bottom: var(--sp-xl);
  }

  /* セクションパネル */
  .p-takumi-section {
    padding: var(--sp-xl) var(--sp-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-xl);
  }

  .p-takumi-section::before {
    font-size: 100px;
    top: -10px;
    right: 5px;
  }

  /* サブセクション */
  .p-takumi-item {
    padding-bottom: var(--sp-xl);
    margin-bottom: var(--sp-xl);
  }

  .p-takumi-item__heading {
    font-size: var(--fs-lg);
    gap: var(--sp-xs);
  }

  /* 3カラム画像 → 1行にまとめる（縦スクロール） */
  .p-takumi-images--3col {
    grid-template-columns: 1fr;
  }

  /* 2カラム画像はそのまま */
  .p-takumi-images--2col {
    grid-template-columns: repeat(2, 1fr);
  }

  /* パーツ4分割 → 2×2 に変更 */
  .p-takumi-parts {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-md);
  }

  .p-takumi-parts__label {
    font-size: var(--fs-2xs);
  }

  /* フロー図 */
  .p-takumi-flow {
    gap: var(--sp-sm) var(--sp-md);
  }

  /* スマホ時は矢印を非表示 */
  .p-takumi-flow__arrow {
    display: none;
  }

  .p-takumi-flow__circle {
    width: 80px;
    height: 80px;
  }

  .p-takumi-flow__label {
    font-size: var(--fs-sm);
  }

  /* ボタン：縦積みに変更 */
  .p-takumi-buttons {
    flex-direction: column;
    align-items: center;
    gap: var(--sp-md); /* 16px */
  }

  .p-takumi-buttons .btn {
    width: 90%;
    max-width: 100%;
    justify-content: center;
    text-align: center;
  }
}