/* ===================================================
   fishing-machines.css
   漁撈機械・養殖装置ページ専用スタイル（fm- プレフィックス）
   fishing-gear.css の fg- クラスを使い回す
=================================================== */

body {
  padding-top: 80px;
}

@media (max-width: 560px) {
  body {
    padding-top: 64px;
  }
}

/* ===================================================
   fm-intro
=================================================== */
.fm-intro {
  padding: 0; /* 上余白はヒーローの padding-bottom(70px) のみ＝写真下→アイコン上 70px。下余白は 最初のカテゴリー行の padding-top(60px) に寄せている（PC） */
  background-color: #fff;
}

.fm-intro__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.fm-intro__icon {
  display: block;
  margin: 0 auto 24px;
}

.fm-intro__title {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 32px;
  color: #1d2e45;
  letter-spacing: 0.96px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.fm-intro__desc {
  font-family: "Shippori Mincho", serif;
  font-size: 18px;
  font-weight: 600;
  color: #1d2e45;
  line-height: 1.8;
  letter-spacing: 0.54px;
  margin: 0;
}

.fm-intro__break--sp {
  display: none;
}

/* ===================================================
   fm-products
=================================================== */
.fm-products {
  background-color: #fff;
  padding: 0 0 0;
}

.fm-products__container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px 80px;
}

/* ===================================================
   fm-category
=================================================== */
.fm-category {
  display: flex;
  align-items: center; /* 見出しは説明文の縦中央にそろえる（漁網・漁具ページと同じ） */
  gap: 0;
  padding-top: 40px; /* 前のカードの下 → この見出し行まで 120px（container の下余白80px + 40px） */
  margin-bottom: 50px;
}

/* 先頭の行：イントロ文の下端 → 説明文の上端 = 60px（PCのみ。SPは下の @media で別指定） */
@media (min-width: 561px) {
  .fm-intro + .fm-products .fm-category {
    padding-top: 60px;
  }
}

.fm-category__title {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 32px;
  color: #1d2e45;
  letter-spacing: 0.96px;
  line-height: 1.5;
  margin: 0;
  flex: 0 0 auto;
  min-width: 233px; /* 短い見出しでも説明文の開始位置をそろえる */
  padding-right: 60px; /* 見出し → 説明文 */
  box-sizing: border-box;
  white-space: nowrap;
}

/* 漁船建造ページ：見出しの文字 → 説明文 = 100px（PCのみ。見出しの幅は文字幅のまま） */
@media (min-width: 561px) {
  .fm-category--gap100 .fm-category__title {
    min-width: 0;
    padding-right: 100px;
  }
}

.fm-category__desc {
  font-family: "Shippori Mincho", serif;
  font-size: 18px;
  font-weight: 600;
  color: #1d2e45;
  line-height: 1.6;
  letter-spacing: 0.54px;
  margin: 0;
}

/* ===================================================
   fm-product-card
=================================================== */
.fm-product-card {
  background-color: #f1f3f4;
  margin-bottom: 20px;
}

.fm-product-card:last-child {
  margin-bottom: 0;
}

.fm-product-card__inner {
  display: flex;
  padding: 48px 56px;
  gap: 56px;
  align-items: flex-start;
}

.fm-product-card__text {
  flex: 0 0 490px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fm-product-card__title {
  font-family: "Shippori Mincho", serif;
  color: #1d2e45;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 36px */
  letter-spacing: 0.72px;
  margin: 0 0 15px;
}

.fm-product-card__sep {
  border: none;
  border-top: 1px solid #1d2e45;
  margin: 0 0 15px;
}

.fm-product-card__desc {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: 0.48px;
  color: #1d2e45;
}

.fm-product-card__break--sp {
  display: none;
}

.fm-product-card__image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 405px;
  height: 235px;
  overflow: hidden;
}

.fm-product-card__image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 旋網機器カード：縦並び（メイン行 + サブ画像行） */
.fm-product-card--has-sub .fm-product-card__inner {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-bottom: 48px;
}

.fm-product-card--has-sub .fm-product-card__main-row {
  display: flex;
  align-items: center;
  gap: 56px;
  margin-bottom: 36px;
}

/* PCのみ：見出しの上端を写真の上辺にそろえる（縦中央ではない） */
@media (min-width: 561px) {
  .fm-product-card--has-sub .fm-product-card__main-row {
    align-items: flex-start;
  }
}

.fm-product-card--has-sub .fm-product-card__text {
  flex: 0 0 490px;
}

.fm-product-card--has-sub .fm-product-card__image {
  flex: 1;
}

.fm-product-card__sub-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fm-product-card__sub-item img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.fm-product-card__sub-item p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #1d2e45;
  letter-spacing: 0.39px;
  line-height: 1.6;
  margin: 8px 0 0;
  text-align: center;
}

/* PC：Figma（Noto Sans JP 16px / 500 / 行間150%＝24px / 字間0.48px / 中央 / #1D2E45） */
@media (min-width: 1025px) {
  .fm-product-card__sub-item p {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.48px;
  }
}

/* ===================================================
   fm-sub-images-grid（養殖装置 下部サムネイル）
=================================================== */
.fm-sub-images-grid {
  margin-top: 32px;
}

.fm-sub-images-grid__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.fm-sub-images-grid__row:last-child {
  margin-bottom: 0;
}

.fm-sub-image-item__image img {
  display: block;
  width: 100%;
  height: 196px;
  object-fit: cover;
}

.fm-sub-image-item__caption {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1d2e45;
  letter-spacing: 0.42px;
  line-height: 1.6;
  margin: 10px 0 0;
  text-align: center;
}

/* ===================================================
   fm-original
=================================================== */
.fm-original {
  padding: 80px 0;
  background-color: #fff;
  text-align: center;
}

.fm-original__text-container {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
}

.fm-original__title {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 32px;
  color: #1d2e45;
  letter-spacing: 0.96px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.fm-original__break--sp {
  display: none;
}

.fm-original__line {
  width: 70px;
  height: 2px;
  background-color: #968971;
  margin: 0 auto 32px;
}

.fm-original__desc {
  font-family: "Shippori Mincho", serif;
  font-size: 18px;
  font-weight: 600;
  color: #1d2e45;
  line-height: 1.8;
  letter-spacing: 0.54px;
  margin: 0 0 40px;
}

.fm-original__grid {
  width: 1160px;
  height: 622px;
  background-color: #f1f3f4;
  margin: 40px auto 0;
  box-sizing: border-box;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 42px; /* 行と行の間（キャプション下→次の行の写真上）。SPは下の @media で別指定 */
}

/* 見出し・説明文なし（写真グリッドのみ）の場合：直前のカードとの間隔を 80px にする（PC）
   ※ 直前セクションの padding-bottom(80px) のみを残す */
@media (min-width: 561px) {
  .fm-original--grid-only {
    padding-top: 0;
  }

  .fm-original--grid-only .fm-original__grid {
    margin-top: 0;
  }
}

.fm-original__grid-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  flex: 1;
}

.fm-original__grid-row:last-child {
  margin-bottom: 0;
}

.fm-original__grid-item {
  display: flex;
  flex-direction: column;
}

.fm-original__grid-item img {
  display: block;
  width: 100%;
  flex: 1;
  object-fit: cover;
  min-height: 0;
}

.fm-original__grid-item p {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1d2e45;
  letter-spacing: 0.42px;
  line-height: 1.6;
  margin: 10px 0 0;
  text-align: center;
}

@media (max-width: 560px) {
  body {
    padding-top: 64px;
  }

  /* fg-capabilities（本ページ専用の見出し文字調整） */
  .fg-capabilities .fg-section-header__desc {
    color: #1d2e45;
    text-align: center;
    font-family: "Shippori Mincho", serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.54px;
  }

  /* fm-intro */
  .fm-intro {
    padding: 0 0 30px 0;
  }

  .fm-intro__container {
    padding: 0 22px;
  }

  .fm-intro__icon {
    width: 100px;
    height: auto;
    margin-bottom: 0;
  }

  .fm-intro__title {
    font-size: 24px;
    letter-spacing: 0.72px;
    line-height: 150%; /* 36px */
    margin-bottom: 8px;
  }

  .fm-intro__desc {
    font-size: 18px;
    letter-spacing: 0.54px;
    line-height: 1.6;
  }

  .fm-intro__break--sp {
    display: inline;
  }

  .fm-intro__break--pc {
    display: none;
  }

  /* fm-products / fm-category */
  .fm-products__container {
    padding: 0 22px 30px;
  }

  .fm-category {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px; /* 見出し → 説明文 10px */
    padding-top: 0;
    margin-bottom: 30px;
  }

  /* 前のカテゴリーの最後のカード → 次の見出し 50px（container下30px + 20px） */
  .fm-products + .fm-products .fm-category {
    padding-top: 20px;
  }

  .fm-category__title {
    font-size: 24px;
    letter-spacing: 0.72px;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    padding-right: 0;
    padding-bottom: 0;
    border-right: none;
    border-bottom: none;
    width: 100%;
  }

  .fm-category__desc {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.48px;
  }

  /* fm-product-card */
  .fm-product-card {
    margin-bottom: 16px;
  }

  .fm-product-card__inner {
    flex-direction: column;
    padding: 30px 24px;
    gap: 20px;
  }

  .fm-product-card__text {
    flex: none;
  }

  .fm-product-card__title {
    font-size: 20px;
    letter-spacing: 0.54px;
    line-height: 1.6;
    margin-bottom: 12px;
  }

  .fm-product-card__sep {
    margin-bottom: 12px;
  }

  .fm-product-card__desc {
    font-size: 14px;
    letter-spacing: 0.42px;
    line-height: 1.7;
  }

  .fm-product-card__break--sp {
    display: inline;
  }

  .fm-product-card__break--pc {
    display: none;
  }

  .fm-product-card__image {
    width: 100%;
    height: 160px;
  }

  .fm-product-card__image img {
    height: 160px;
  }

  .fm-product-card--has-sub .fm-product-card__inner {
    padding-bottom: 24px;
  }

  .fm-product-card--has-sub .fm-product-card__main-row {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
  }

  .fm-product-card--has-sub .fm-product-card__text,
  .fm-product-card--has-sub .fm-product-card__image {
    flex: none;
    width: 100%;
  }

  .fm-product-card__sub-images {
    grid-template-columns: repeat(2, 1fr);
    gap: 13px;
  }

  .fm-product-card__sub-item img {
    height: 100px;
  }

  .fm-product-card__sub-item p {
    font-size: 12px;
    margin-top: 6px;
  }

  /* fm-original */
  .fm-original {
    padding: 0 0 50px 0;
  }

  .fm-original__text-container {
    padding: 0 22px;
  }

  /* 最後のカード → 「現場に合わせたオリジナル装置開発」見出し 50px（container下30px + 20px） */
  .fm-products + .fm-original:not(.fm-original--grid-only) {
    padding-top: 20px;
  }

  .fm-original__title {
    font-size: 24px;
    letter-spacing: 0.72px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .fm-original__line {
    margin: 0 auto 24px;
  }

  .fm-original__desc {
    font-size: 18px;
    letter-spacing: 0.54px;
    line-height: 1.6;
    margin-bottom: 0;
  }

  .fm-original__break--sp {
    display: inline;
  }

  .fm-original__break--pc {
    display: none;
  }

  .fm-original__grid {
    width: calc(100% - 44px);
    height: auto;
    margin: 24px 22px 0;
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 19px 13px; /* 行 19px／列 13px */
    margin-top: 0;
  }

  /* 説明文 → 写真グリッド 20px（写真だけのグリッドは0のまま） */
  .fm-original:not(.fm-original--grid-only) .fm-original__grid {
    margin-top: 20px;
  }

  .fm-original__grid-row {
    display: contents;
  }

  .fm-original__grid-item img {
    height: 100px;
    flex: none;
  }

  .fm-original__grid-item p {
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0.45px;
    margin-top: 6px;
  }

  /* キャプション中の括弧書き（例：(網船及び灯船)）は 10px */
  .fm-original__cap-sub {
    font-size: 10px;
    letter-spacing: 0.3px;
  }
}