/* =========================================================
   /websys 業種別ページ 共通CSS（各業種ページ用）
   ========================================================= */
.manu-section {
    border: 0;
}
.manu-subttl,
.manu-sysbtn,
.manu-box-title,
.manu-flow li::before {
    font-size: 17px;
}
.manu-box-title {
    font-weight: bold!important;
}
.indetail3-linkitem-label {
    font-size: 16px;
}
.indetail3-linkitem-tag {
    font-size: 15px;
}
/* ===============================
   誘導ブロック全体を“おすすめ枠”にする
   =============================== */
.indetail3-linklist{
  position: relative;
  padding: 40px 22px 22px; /* 上に見出し分 */
  border-radius: 18px;
  /* border: 1px solid #dbe7ff; */
  background: linear-gradient(135deg, #f3f8ff 0%, #fbfdff 55%, #f7fbff 100%);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}


/* 右上に軽い補助（任意。不要なら削除OK） */
.indetail3-linklist::after{
  content: "気になる部門から見てください";
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 13px;
  color: #4f6b92;
  opacity: .9;
}

/* ===============================
   カードを“選びたくなる”見た目に
   =============================== */
.indetail3-linkitem > a{
  position: relative;
  overflow: hidden;          /* 上ラインを綺麗に */
  border-color: #e5edf6;     /* 既存より少し締める */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* カード上部の色ライン（3色で単調回避） */
.indetail3-linkitem > a::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 6px;
  background: #79cbd7; /* デフォ */
}

.indetail3-linkitem:nth-child(3n+1) > a::before{ background: #79cbd7; }
.indetail3-linkitem:nth-child(3n+2) > a::before{ background: #7aa7ff; }
.indetail3-linkitem:nth-child(3n)   > a::before{ background: #f3b56f; }

/* hoverで少し浮かせてクリック誘導 */
.indetail3-linkitem > a:hover{
  transform: translateY(-3px);
  border-color: #bcd6ff;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.10);
}

/* タグも少しだけ映えるように */
.indetail3-linkitem-tag{
  background: rgba(122, 167, 255, 0.16);
  color: #2f5aa8;
}

/* SPは枠の余白を少し詰める */
@media (max-width: 640px){
  .indetail3-linklist{
    padding: 46px 14px 14px;
    border-radius: 16px;
  }
  .indetail3-linklist::after{ content: ""; } /* 右上補助文は非表示 */
}

.indetail3-linkblock {
  margin: 40px 20px 32px;
  padding: 24px 26px 22px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #dde3ee;
}

.indetail3-linkblock-title {
  font-size: 20px;
  margin: 0 0 10px;
  border-left: 4px solid #3f4855;
  padding-left: 10px;
}

.indetail3-linkblock-lead {
  font-size: 14px;
  margin: 0 0 14px;
  line-height: 1.8;
}

.indetail3-linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 10px;
}

.indetail3-linkitem a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  text-decoration: none;
}

.indetail3-linkitem a:hover {
  background: #f1f5ff;
  border-color: #cbd5f5;
}

.indetail3-linkitem-tag {
  display: inline-block;
  font-size: 12px;
  padding: 2px 10px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: #e0edff;
  color: #1e40af;
}

.indetail3-linkitem-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
}

.indetail3-linkitem-desc {
  display: block;
  font-size: 13px;
  color: #4b5563;
}
.indetail3-label,
.manu-subttl {
border-radius: 10px;
}
#breadcrumbs {
font-size: 12px;
}
/* 3カラムのカード並び（既にgrid/flexなら、ここは不要） */
.indetail3-linklist{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 980px){
  .indetail3-linklist{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .indetail3-linklist{ grid-template-columns: 1fr; }
}

/* カード本体：高さを揃える土台（aを縦flexにして100%） */
.indetail3-linkitem{
  height: 100%;
}
.indetail3-linkitem > a{
  display: flex;
  flex-direction: column;
  height: 100%;

  /* ↓見た目が既にあるなら不要（必要なら適宜） */
  padding: 18px 18px;
  border: 1px solid #e5edf6;
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
}

/* タグ */
.indetail3-linkitem-tag{
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef4ff;
  color: #2f5aa8;
  font-weight: 700;
  font-size: 13px;
}

/* 見出し：2行で固定（短い場合も2行分の高さを確保） */
.indetail3-linkitem-label{
  margin-top: 12px;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.35;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 2行に固定 */
  overflow: hidden;

  min-height: calc(1.35em * 2); /* 2行分の高さを確保（短文でも揃う） */
}

/* 説明：3行で固定（下側に寄せてカードの底が揃う） */
.indetail3-linkitem-desc{
  margin-top: auto; /* ←これで説明ブロックが下に寄る（カードの見た目が揃う） */
  padding-top: 12px;

  color: #55657a;
  font-size: 14px;
  line-height: 1.7;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 3行に固定 */
  overflow: hidden;

  min-height: calc(1.7em * 3); /* 3行分の高さを確保 */
}

/* =========================================================
   構成イメージ集 見出し（h2）直下に補注（CSSだけで一括）
   ========================================================= */
#scene-detail > h2{
  position: relative;
}

.scene-block#scene1::before {
  content: "※このページの画面は完成品のパッケージではなく、あくまで構成例です。\A導入時は実際の業務フローに合わせて、必要な範囲を個別設計・フルカスタマイズで制作します。";
    white-space: pre-line;
    display: block;
    margin-bottom: 12px;
    padding: 10px 12px;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    background: #F9CC84;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.10);
    width: fit-content;
}

/* 文字が詰まりやすい端末だけ微調整（不要なら消してOK） */
@media (max-width: 768px){
  #scene-detail > h2::after{
    font-size: 12.5px;
    padding: 10px 11px;
  }
}

/* =========================================================
   スマホ
   ========================================================= */
@media screen and (max-width: 768px) {
.indetail3-linkblock {
    margin: 40px 15px 32px;
    padding: 16px 14px 14px;
}
.indetail3-linklist {
    flex-wrap: wrap;
}
.indetail3-linklist .indetail3-linkitem {
    width: auto;
}
.logo {
    padding: 0;
}

}


/* ===== ふわっと表示（全ページ共通：読み込み時のみ） ===== */
@media (prefers-reduced-motion: no-preference) {
  html.js body {
    opacity: 0;
    transition: opacity 220ms ease;
  }
  html.js body.page-ready {
    opacity: 1;
  }
}

/* =========================================================
   third-layer mock iframe
   - スマホ縦：非表示
   - スマホ横 / タブレット縦：表示
   - 既存の各ページ側 max-width:768px の display:none を上書きする
   ========================================================= */

/* いったん「768px以下でも表示」に戻す（スマホ横・タブレット縦を含む） */
@media screen and (max-width: 768px) {
  #wrapper .scene-image iframe { display: block !important; }
  #wrapper .spview { display: none !important; }
}

/* ただし「スマホ縦」だけは非表示にする（小さい縦画面だけ） */
@media screen and (max-width: 599px) and (orientation: portrait) {
  #wrapper .scene-image iframe { display: none !important; }
  #wrapper .spview { display: flex !important; }
}