/**
 * 機器一覧ページのスタイル
 * MICS_HTML/manual/のデザインに完全準拠
 * 参考: https://wf07x.xsrv.jp/MICS_HTML/manual/
 * 
 * @package MICS_Theme
 * @since 1.0.0
 * @author Uz_okmr
 * @date 2026-02-02
 * @updated 2026-02-10
 */

/* ========================================
   ページ全体
   ======================================== */
.main.l-manual {
  background: transparent linear-gradient(170deg, #00b0e0 0, #003f90 100%) 0 0 no-repeat padding-box !important;
}

.main.l-manual .l-page_Wrap {
  background: #f7f7f7;
  border-radius: 5rem 5rem 0 0;
  padding: 60px 0;
}

@media screen and (min-width: 768px) {
  .main.l-manual .l-page_Wrap {
    padding: 100px 0;
  }
}

.main.l-manual .l-page_Title__Heading {
  color: #fff;
}

.main.l-manual .breadcrumb {
  color: #fff;
}

.main.l-manual .breadcrumb li::after {
  border-color: #fff;
}

.main.l-manual .breadcrumb a {
  color: #fff;
}

/* ========================================
   l-manual_Main__Unit（カテゴリブロック）
   ======================================== */
.l-manual_Main__Unit {
  background: #fff;
  border-radius: 2rem;
  box-shadow: 0 6px 10px rgba(51, 51, 51, 0.1607843137);
}

.l-manual_Main__Unit:not(:first-child) {
  margin-top: 3.5rem;
}

@media screen and (min-width: 768px) {
  .l-manual_Main__Unit:not(:first-child) {
    margin-top: 7rem;
  }
}

/* ========================================
   l-manual_Main__Unit__Inner
   ======================================== */
.l-manual_Main__Unit__Inner {
  padding: 4.5rem 4rem;
}

@media screen and (min-width: 768px) {
  .l-manual_Main__Unit__Inner {
    padding: 5.5rem 5rem;
  }
}

@media screen and (min-width: 1000px) {
  .l-manual_Main__Unit__Inner {
    padding: 6rem 6.5rem 6.5rem;
  }
}

/* ========================================
   l-manual_Main__Heading（カテゴリ見出し h2）
   ======================================== */
.l-manual_Main__Heading {
  background: #003f90;
  border-radius: 2rem 2rem 0 0;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.2rem;
  line-height: 1.5;
  padding: 1.8rem 2rem;
  text-align: center;
}

@media screen and (min-width: 1000px) {
  .l-manual_Main__Heading {
    font-size: 3.2rem;
  }
}

/* ========================================
   l-manual_Main__Box（セクション）
   ======================================== */
.l-manual_Main__Box:not(:first-child) {
  margin-top: 5rem;
}

@media screen and (min-width: 768px) {
  .l-manual_Main__Box:not(:first-child) {
    margin-top: 7rem;
  }
}

.l-manual_Main__Box__Heading.is-deco {
  margin-bottom: 2rem;
}

/* ========================================
   l-manual_Main__Box__List（機器リスト）
   ======================================== */
.l-manual_Main__Box__List {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 -2.5%;
}

@media screen and (min-width: 768px) {
  .l-manual_Main__Box__List {
    margin-top: 3rem;
  }
}

/* ========================================
   l-manual_Main__Box__List__Item（各機器カード）
   ======================================== */
.l-manual_Main__Box__List__Item {
  flex-basis: 45%;
  margin: 3rem 2.5% 0;
}

@media screen and (min-width: 500px) {
  .l-manual_Main__Box__List__Item {
    flex-basis: 28%;
  }
}

@media screen and (min-width: 768px) {
  .l-manual_Main__Box__List__Item {
    flex-basis: 20%;
  }
}

@media screen and (min-width: 1000px) {
  .l-manual_Main__Box__List__Item {
    flex-basis: 15%;
  }
}

@media screen and (min-width: 1300px) {
  .l-manual_Main__Box__List__Item {
    flex-basis: 11%;
  }
}

.l-manual_Main__Box__List__Item:first-child {
  margin-top: 0;
}

.l-manual_Main__Box__List__Item:nth-of-type(2) {
  margin-top: 0;
}

@media screen and (min-width: 500px) {
  .l-manual_Main__Box__List__Item:nth-of-type(3) {
    margin-top: 0;
  }
}

@media screen and (min-width: 768px) {
  .l-manual_Main__Box__List__Item:nth-of-type(4) {
    margin-top: 0;
  }

  .l-manual_Main__Box__List__Item:nth-of-type(5) {
    margin-top: 0;
  }
}

@media screen and (min-width: 1000px) {
  .l-manual_Main__Box__List__Item:nth-of-type(6) {
    margin-top: 0;
  }
}

/* ========================================
   l-manual_Main__Box__Link（機器カードリンク）
   ======================================== */
.l-manual_Main__Box__Link {
  display: block;
}

/* ========================================
   l-manual_Main__Box__Link__Thumb（サムネイル正方形）
   ======================================== */
.l-manual_Main__Box__Link__Thumb {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
}

.l-manual_Main__Box__Link__Thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.l-manual_Main__Box__Link .-caption {
  font-size: 1.2rem;
  text-align: center;
  margin-top: 0.6rem;
}

@media screen and (min-width: 768px) {
  .l-manual_Main__Box__Link .-caption {
    font-size: 1.4rem;
    margin-top: 0.8rem;
  }
}