/* TAKUTO DIGITAL WORKS corporate style
--------------------------------------------- */

.home {
  background: #f4f6f8 !important;
  color: #202428 !important;
}

/* 全体の印象を少し堅めに */
.home .section {
  padding: 96px 0 !important;
}

.home .section-alt {
  background: #eef1f4 !important;
}

.home .container,
.home .hero-inner {
  width: min(100% - 48px, 1160px) !important;
}

/* 見出し：企業サイト風 */
.home .section-heading {
  max-width: 1040px !important;
  margin-bottom: 48px !important;
  padding-bottom: 24px !important;
  border-bottom: 1px solid #cfd6dc !important;
}

.home .section-label {
  margin-bottom: 10px !important;
  color: #0866b3 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
}

.home .section-title {
  max-width: 1040px !important;
  color: #1f2933 !important;
  font-size: clamp(32px, 4vw, 48px) !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}

.home .section-description {
  max-width: 900px !important;
  color: #5d6670 !important;
  font-size: 15px !important;
  line-height: 2 !important;
}

/* ヒーロー：派手さを抑えて企業感 */
.home .hero {
  padding: 120px 0 96px !important;
  background:
    linear-gradient(
      90deg,
      #eef2f5 0%,
      #ffffff 62%,
      #eef2f5 100%
    ) !important;
  border-bottom: 1px solid #d7dde2 !important;
}

.home .hero-inner {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.85fr) !important;
  gap: 72px !important;
}

.home .hero-kicker,
.home .hero-label {
  border-left: 5px solid #0866b3 !important;
  background: #ffffff !important;
  color: #0866b3 !important;
  box-shadow: none !important;
}

.home .hero-title {
  color: #1f2933 !important;
  font-size: clamp(40px, 5vw, 66px) !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
}

.home .hero-title strong,
.home .hero-title em {
  color: #0866b3 !important;
}

.home .hero-description,
.home .hero-lead {
  color: #4f5963 !important;
  font-size: 16px !important;
  line-height: 2.05 !important;
}

.home .hero-video-frame {
  border: 1px solid #cfd6dc !important;
  box-shadow: 0 20px 45px rgba(30, 46, 60, 0.12) !important;
}

.home .hero-media-note {
  border-left: 5px solid #0866b3 !important;
  background: #ffffff !important;
}

/* ボタン：BtoB向けに落ち着かせる */
.home .button {
  border-radius: 0 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
}

.home .button-primary {
  background: #0866b3 !important;
  color: #ffffff !important;
}

.home .button-primary:hover {
  background: #064f8a !important;
}

.home .button-secondary {
  border-color: #0866b3 !important;
  background: #ffffff !important;
  color: #0866b3 !important;
}

/* 提供サービス：企業の事業紹介風 */
.home #services .service-grid,
.home .services .service-grid,
.home .service-section .service-grid {
  display: block !important;
  border-top: 1px solid #cfd6dc !important;
}

.home #services .service-card,
.home .services .service-card,
.home .service-section .service-card {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) minmax(260px, 0.72fr) !important;
  gap: 36px !important;
  align-items: start !important;
  padding: 42px 0 !important;
  border: none !important;
  border-bottom: 1px solid #cfd6dc !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home #services .service-visual,
.home .services .service-visual,
.home .service-section .service-visual {
  margin: 0 !important;
}

.home #services .service-visual img,
.home .services .service-visual img,
.home .service-section .service-visual img {
  border: 1px solid #cfd6dc !important;
  background: #ffffff !important;
}

.home #services .service-card .card-number,
.home .services .service-card .card-number,
.home .service-section .service-card .card-number {
  display: inline-block !important;
  margin: 0 0 12px !important;
  color: #0866b3 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
}

.home #services .service-card h3,
.home .services .service-card h3,
.home .service-section .service-card h3 {
  margin: 0 0 16px !important;
  color: #1f2933 !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  line-height: 1.55 !important;
}

.home #services .service-card p,
.home .services .service-card p,
.home .service-section .service-card p {
  margin: 0 !important;
  color: #4f5963 !important;
  font-size: 15px !important;
  line-height: 2 !important;
}

.home #services .service-card ul,
.home .services .service-card ul,
.home .service-section .service-card ul {
  margin: 0 !important;
  padding: 22px 24px 22px 40px !important;
  border-left: 4px solid #0866b3 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  background: #ffffff !important;
  color: #3f4850 !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

/* 実績：ここはカードで信頼感 */
.home .works-grid {
  gap: 28px !important;
}

.home .work-card {
  border: 1px solid #cfd6dc !important;
  border-top: 5px solid #0866b3 !important;
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(30, 46, 60, 0.07) !important;
}

/* 料金：カードを残すが落ち着かせる */
.home .price-card {
  border: 1px solid #cfd6dc !important;
  border-top: 5px solid #1f2933 !important;
  background: #ffffff !important;
  box-shadow: 0 12px 32px rgba(30, 46, 60, 0.07) !important;
}

/* 記事：ニュース一覧風 */
.home .home-article-list {
  border-top: 1px solid #cfd6dc !important;
}

.home .home-article-item {
  padding: 34px 0 !important;
  border-bottom: 1px solid #cfd6dc !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home .home-article-category {
  border-left: 4px solid #0866b3 !important;
  background: #ffffff !important;
  color: #0866b3 !important;
}

.home .home-article-title {
  color: #1f2933 !important;
  font-weight: 800 !important;
}

/* 強み：コンサル会社っぽく罫線で整理 */
.home .strength-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid #cfd6dc !important;
  border-left: 1px solid #cfd6dc !important;
}

.home .strength-card {
  padding: 32px !important;
  border: none !important;
  border-right: 1px solid #cfd6dc !important;
  border-bottom: 1px solid #cfd6dc !important;
  border-left: none !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

.home .strength-card h3 {
  color: #1f2933 !important;
}

/* FAQ：企業サイトのQ&A風 */
.home .faq-grid {
  display: block !important;
  border-top: 1px solid #cfd6dc !important;
}

.home .faq-item {
  padding: 30px 0 !important;
  border: none !important;
  border-bottom: 1px solid #cfd6dc !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home .faq-item h3 {
  color: #0866b3 !important;
}

/* 問い合わせ：しっかりした企業CTA */
.home .contact-card,
.home .contact-form-wrapper {
  border: 1px solid #cfd6dc !important;
  border-top: 5px solid #0866b3 !important;
  background: #ffffff !important;
  box-shadow: 0 14px 36px rgba(30, 46, 60, 0.08) !important;
}

/* フッターも少し堅め */
.site-footer {
  background: #1f2933 !important;
}

/* スマホ */
@media (max-width: 980px) {
  .home .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
  }

  .home #services .service-card,
  .home .services .service-card,
  .home .service-section .service-card {
    grid-template-columns: 180px minmax(0, 1fr) !important;
  }

  .home #services .service-card ul,
  .home .services .service-card ul,
  .home .service-section .service-card ul {
    grid-column: 2 !important;
    margin-top: 18px !important;
  }

  .home .strength-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  .home .container,
  .home .hero-inner {
    width: min(100% - 28px, 1160px) !important;
  }

  .home .section {
    padding: 70px 0 !important;
  }

  .home .hero {
    padding: 86px 0 60px !important;
  }

  .home #services .service-card,
  .home .services .service-card,
  .home .service-section .service-card {
    display: block !important;
    padding: 34px 0 !important;
  }

  .home #services .service-visual,
  .home .services .service-visual,
  .home .service-section .service-visual {
    margin-bottom: 20px !important;
  }

  .home #services .service-card ul,
  .home .services .service-card ul,
  .home .service-section .service-card ul {
    margin-top: 20px !important;
  }

  .home .strength-card {
    padding: 26px 22px !important;
  }
}


/* Service section final layout fix
--------------------------------------------- */

.home #services .service-grid,
.home .services .service-grid,
.home .service-section .service-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border-top: 1px solid #cfd6dc !important;
}

.home #services .service-card,
.home .services .service-card,
.home .service-section .service-card {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 8px 36px !important;
  align-items: start !important;
  padding: 44px 0 !important;
  border: none !important;
  border-bottom: 1px solid #cfd6dc !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home #services .service-visual,
.home .services .service-visual,
.home .service-section .service-visual {
  grid-column: 1 !important;
  grid-row: 1 / 5 !important;
  width: 100% !important;
  margin: 0 !important;
}

.home #services .service-visual img,
.home .services .service-visual img,
.home .service-section .service-visual img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover !important;
  border: 1px solid #cfd6dc !important;
  background: #ffffff !important;
}

.home #services .service-card .card-number,
.home .services .service-card .card-number,
.home .service-section .service-card .card-number {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  color: #0866b3 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.4 !important;
}

.home #services .service-card h3,
.home .services .service-card h3,
.home .service-section .service-card h3 {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 0 10px !important;
  color: #1f2933 !important;
  font-size: clamp(24px, 3vw, 32px) !important;
  font-weight: 900 !important;
  line-height: 1.55 !important;
}

.home #services .service-card > p:not(.card-number),
.home .services .service-card > p:not(.card-number),
.home .service-section .service-card > p:not(.card-number) {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin: 0 0 18px !important;
  color: #4f5963 !important;
  font-size: 15px !important;
  line-height: 2 !important;
}

.home #services .service-card ul,
.home .services .service-card ul,
.home .service-section .service-card ul {
  grid-column: 2 !important;
  grid-row: 4 !important;
  margin: 0 !important;
  padding: 18px 22px 18px 38px !important;
  border: none !important;
  border-left: 4px solid #0866b3 !important;
  background: #ffffff !important;
  color: #3f4850 !important;
  font-size: 14px !important;
  line-height: 1.9 !important;
}

.home #services .service-card li,
.home .services .service-card li,
.home .service-section .service-card li {
  margin: 0 0 6px !important;
}

.home #services .service-card li:last-child,
.home .services .service-card li:last-child,
.home .service-section .service-card li:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  .home #services .service-card,
  .home .services .service-card,
  .home .service-section .service-card {
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 8px 28px !important;
  }
}

@media (max-width: 700px) {
  .home #services .service-card,
  .home .services .service-card,
  .home .service-section .service-card {
    display: block !important;
    padding: 34px 0 !important;
  }

  .home #services .service-visual,
  .home .services .service-visual,
  .home .service-section .service-visual {
    margin-bottom: 20px !important;
  }

  .home #services .service-card .card-number,
  .home .services .service-card .card-number,
  .home .service-section .service-card .card-number {
    margin-bottom: 8px !important;
  }

  .home #services .service-card h3,
  .home .services .service-card h3,
  .home .service-section .service-card h3 {
    margin-bottom: 12px !important;
    font-size: 22px !important;
  }

  .home #services .service-card > p:not(.card-number),
  .home .services .service-card > p:not(.card-number),
  .home .service-section .service-card > p:not(.card-number) {
    margin-bottom: 18px !important;
  }
}