@charset "utf-8";
/* CSS Document */
/* --- コマツブランドカラー --- */ :root {
   --komatsu-blue: #003399;
   --komatsu-light: #f5f7fa;
   --komatsu-border: #d9e1f2;
}
/* --- 見出し --- */
.blog-title {
   font-size: 2rem;
   font-weight: 700;
   color: var(--komatsu-blue);
   border-left: 6px solid var(--komatsu-blue);
   padding-left: 12px;
   margin-bottom: 30px; /* ← 少し広げて視認性UP */
}
/* --- カード --- */
.blog-card {
   border: 1px solid var(--komatsu-border);
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
   transition: transform .2s ease, box-shadow .2s ease; /* ← 高級感UP */
}
.blog-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.blog-card img {
   width: 100%;
   height: 220px;
   object-fit: cover;
}
/* --- 記事本文 --- */
.blog-content {
   line-height: 1.8;
   font-size: 1.05rem;
}
/* 本文内の画像がはみ出さないようにする */
.blog-content img {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   margin: 10px 0;
}
/* --- SNSボタン --- */
.sns-share a {
   display: inline-block;
   margin-right: 10px;
   padding: 8px 14px;
   border-radius: 6px;
   color: #fff;
   font-size: 0.9rem;
   text-decoration: none; /* ← 下線を消す */
}
.sns-twitter {
   background: #1DA1F2;
}
.sns-facebook {
   background: #1877F2;
}
.sns-line {
   background: #00C300;
}
.blog-card {
   border-radius: 12px;
   overflow: hidden;
   background: #fff;
   transition: transform .2s, box-shadow .2s;
}
.blog-card:hover {
   transform: translateY(-4px);
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.blog-thumb {
   width: 100%;
   height: 200px;
   object-fit: cover;
}
.badge.bg-primary {
   background-color: #003399 !important;
}
sns-instagram {
   background: #E1306C;
}
.form-bottom-space {
   margin-bottom: 24px;
}
/*catchup固定文字*/
.carousel-caption {
   text-align: right !important;
}
.custom-caption {
   position: absolute;
   right: 20px;
   bottom: 20px;
   z-index: 10;
}
/* h3 と p の共通 */
.custom-caption h3, .custom-caption p {
   background: rgba(0, 0, 0, 0.55);
   padding: 6px 12px;
   border-radius: 4px;
   display: inline-block;
   color: #fff;
}
/* h3 太めの明朝 */
.custom-caption h3 {
   font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
   font-weight: 700;
}
/* p 普通の明朝 */
.custom-caption p {
   font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
   font-weight: 400;
   margin-top: 6px;
}
/* ================================
   事業紹介ページ：カードデザイン最適化
   ================================ */
/* カード全体 */
.service-card {
   border: none;
   border-radius: 10px;
   overflow: hidden;
   background: #ffffff;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* ホバー時の浮き上がり */
.service-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
/* 画像部分（高さ統一） */
.service-card img.card-img-top {
   height: 380px; /* ← PC最適値（変更可） */
   width: 100%;
   object-fit: cover;
   display: block;
}
/* カード内余白 */
.service-card .card-body {
   padding: 1.5rem 1.4rem;
}
/* タイトル */
.service-card .card-title {
   font-size: 1.25rem;
   font-weight: 700;
   color: #003399; /* コマツブランドカラー */
   margin-bottom: 0.8rem;
   line-height: 1.4;
   display: flex;
   align-items: center;
}
/* 赤いドット（既存クラス） */
.dot-red {
   display: inline-block;
   width: 1.2rem;
   height: 1.2rem;
   border-radius: 50%;
   background: radial-gradient(circle at 30% 30%, #ff6666, #cc0000);
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}
/* 本文 */
.service-card .card-text {
   font-size: 1rem;
   line-height: 1.7;
   color: #333;
}
/* カード間の余白統一 */
.service-card-wrapper {
   margin-bottom: 2rem;
}
.fadein-blog {
   opacity: 0;
   transform: translateY(10px);
   animation: fadeInUp 0.6s ease forwards;
}
/* スマホ調整 */
@media (max-width: 768px) {
   .custom-caption h3 {
      font-size: 1.1rem;
   }
   .custom-caption p {
      font-size: 0.9rem;
   }
   .navbar {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
   }
   .navbar-brand img {
      height: 50px !important;
   }
   .custom-width {
      width: 95%;
   }
   .service-card img.card-img-top {
      height: 220px; /* スマホ時の画像高さ */
   }
   /* カード全体を縮小して以前の見た目に近づける */
   .blog-card {
      transform: scale(1.00);
      transform-origin: top center;
      margin-bottom: 1.2rem;
   }
   /* カードの横幅を少し狭くする（以前の縮小感を再現） */
   .blog-card {
      width: 100%;
      margin-left: auto;
      margin-right: auto;
   }
   /* 画像を少し小さくする */
   .blog-card img {
      height: 150px;
   }
   /* タイトルを少し小さく */
   .blog-card h5 {
      font-size: 0.95rem;
      line-height: 1.3;
   }
   /* 本文も少し小さく */
   .blog-card p {
      font-size: 0.85rem;
      line-height: 1.4;
   }
   .lbtn {
      display: block;
      width: 100%;
      margin-bottom: 10px;
   }
}
.post-main-image {
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
}