@charset "utf-8";

/* =========================================================
   casestudy.css
   ページ専用スタイル
   スコープ: #casestudy
   ========================================================= */

/* ---------------------------------------------------------
   ベースレイアウト
   --------------------------------------------------------- */
#casestudy {
  margin: 100px auto;
  background: #fff;
  max-width: 1400px;
  width: 100%;
  box-sizing: border-box;
}

.detail-page #casestudy {
  max-width: 1100px;
}

/* 一覧ページ用の内側コンテナ（※詳細には今のところ出てこない想定） */
#casestudy .container {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px;
}

/* ---------------------------------------------------------
   カード（一覧）レイアウト
   --------------------------------------------------------- */
#casestudy .cards {
  display: grid;
  gap: 32px;
  margin: 40px auto 0;
}

#casestudy .card {
  width: 100%;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: transform .3s ease, box-shadow .3s ease;
  position: relative;
}

#casestudy .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}

#casestudy .card img {
  width: 100%;
  display: block;
}

/* カード内テキスト */
#casestudy .card-content {
  padding: 20px;
}

#casestudy .card-content p {
  margin: 0;
  font-size: 16px;
  color: #222;
  line-height: 1.6;
}

#casestudy .card span.casestudy_title {
  display: block;
  padding: 20px 0 10px;
  font-size: 20px;
  font-weight: 600;
  color: #222;
  line-height: 1.6;
}

/* ---------------------------------------------------------
   タグ（カテゴリ / 種別）
   --------------------------------------------------------- */
#casestudy .tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#casestudy .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

#casestudy .tag,
#casestudy .tag_casestudy {
  display: inline-block;
  background: #164A7E;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  line-height: 1.4;
}

#casestudy span.casestudy_date {
  display: block;
  padding-top: 5px;
}

/* ---------------------------------------------------------
   ページタイトル
   --------------------------------------------------------- */
#casestudy .case-header {
  text-align: center;
  margin-bottom: 40px;
}

#casestudy .case-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 8px;
}

#casestudy .case-header h2 {
  font-size: 1rem;
  color: #164A7E;
  margin: 0 0 16px;
}

#casestudy .case-header p {
  font-size: .95rem;
  color: #444;
}

/* ---------------------------------------------------------
   企業情報ブロック
   --------------------------------------------------------- */
#casestudy .company-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 48px;
}

#casestudy .company-logo {
  flex: 1;
  text-align: center;
}

#casestudy .company-logo img {
  max-width: 500px;
  height: auto;
}

#casestudy .company-details {
  flex: 1;
  min-width: 260px;
}

/* ←ここでインデントを完全に消す（PC/スマホ共通） */
#casestudy .company-details p {
  margin: 6px 0;
  font-size: 16px;
  color: #333;
  padding-left: 0;
  text-indent: 0;
}

#casestudy .company-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

#casestudy .company-header .tag {
  padding: 6px 14px;
  font-size: .9rem;
  font-weight: bold;
  background: #164A7E;
  color: #fff;
  border-radius: 4px;
  white-space: nowrap;
}

#casestudy .company_title {
  font-size: 24px;
  font-weight: bold;
  margin: 5px 0 20px;
}

/* ---------------------------------------------------------
   メインタイトル
   --------------------------------------------------------- */
#casestudy h1.casestudy_main-title {
  margin-bottom: 40px;
  font-size: 28px;
  font-weight: bold;
}

/* ---------------------------------------------------------
   決め手ポイントのブロック
   --------------------------------------------------------- */
#casestudy .point h2.casestudy_title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 15px;
  font-size: 24px;
  font-weight: bold;
  color: #000;
}

#casestudy .point h2.casestudy_title::before {
  content: "";
  width: 12px;
  height: 32px;
  background: #164A7E;
  box-shadow: 1px 1px 2px rgba(0,0,0,.2);
}

#casestudy .point p {
  font-size: .95rem;
  color: #333;
  line-height: 1.7;
  margin: 0 0 20px;
}

/* ---------------------------------------------------------
   スライダー（Swiper）
   --------------------------------------------------------- */
.company-logo .swiper {
  width: 100%;
  max-width: 500px;
}

.company-logo .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 矢印をリネットブルーに */
.swiper-button-next:after,
.swiper-button-prev:after {
  color: #164A7E !important;
}

/* ページネーション */
.swiper-pagination-bullet {
  background: #164A7E !important;
  opacity: .3 !important;
}

.swiper-pagination-bullet-active {
  opacity: 1 !important;
}

/* 矢印のサイズ */
.swiper-button-next,
.swiper-button-prev {
  width: 22px;
  height: 22px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 20px;
}

/* ---------------------------------------------------------
   共通パーツ
   --------------------------------------------------------- */
#casestudy a.casestudy_case_link {
  color: #164A7E;
  text-decoration: underline;
}

#casestudy .casestudy_btn_case {
  margin-bottom: 60px;
}

/* PC用矢印アイコン配置 */
#casestudy .arrow-icon.pc {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 20px;
  height: 20px;
}

/* =========================================================
   PC（1025px〜）
   ========================================================= */
@media screen and (min-width: 1025px) {
  #casestudy .cards {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1400px;
  }

  #casestudy .card {
    display: flex;
    flex-direction: column;
  }

  #casestudy .card-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #casestudy .company_image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
  }

  .detail-page #casestudy {
    max-width: 1100px;
  }
}

/* =========================================================
   スマホ（〜768px）
   ========================================================= */
@media screen and (max-width: 768px) {

  /* casestudy 全体に左右 15px の余白をつけて、
     中身は基本 margin-left:0 に揃える */
  #casestudy {
    margin: 0 auto 40px;
    max-width: 100%;
    padding: 0 15px;
  }

  /* 企業情報ブロックを縦並びに */
  #casestudy .company-info {
    display: block;
    margin: 0 0 32px;
  }

  #casestudy .company-logo {
    margin: 0 0 24px;
    text-align: center;
  }

  #casestudy .company-logo img {
    max-width: 100%;
    height: auto;
  }

  #casestudy .company-details {
    min-width: 0;
  }

  /* 企業名・タグも左右は casestudy の padding に揃える */
  #casestudy .company_title {
    margin: 5px 0 20px;
  }

  #casestudy .tag_sub {
    display: inline-block;
    margin: 0 0 10px;
  }

  /* 大きい見出し（黒太文字） */
  #casestudy h1.casestudy_main-title {
    font-size: 24px;
    margin: 0 0 32px;
    line-height: 1.4;
  }

  /* ポイントセクション ↓ */
  #casestudy .case-point {
    margin: 0;
  }

  #casestudy .point h2.casestudy_title {
    font-size: 20px;
  }

  #casestudy .point p {
    font-size: 16px;
  }

  /* 一覧カード（スマホでは1カラム） */
  #casestudy .cards {
    grid-template-columns: 1fr;
    margin: 40px 0 0;
  }

  #casestudy .card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    width: 100%;
  }

  #casestudy .card-left {
    flex: 0 0 35%;
    max-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
  }

  #casestudy .company_image {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
  }

  #casestudy .card-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  #casestudy .card-content {
    flex: 1;
    padding: 0;
  }

  #casestudy .tag-row {
    gap: 4px;
    margin-bottom: 5px;
  }

  #casestudy .card span.casestudy_title {
    font-size: 20px;
    padding: 5px 0;
  }

  #casestudy .card-content p {
    font-size: 18px;
    line-height: 1.5;
    margin-bottom: 10px;
  }

  /* スマホ時は矢印アイコンをカード下に */
  #casestudy .arrow-icon.pc {
    position: static;
    align-self: flex-end;
    margin-top: 10px;
  }

  /* Swiper 画像（スマホ幅いっぱいに） */
  .company-logo .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* 画像付きカードの画像サイズ */
  #casestudy .card img {
    width: auto;
    max-width: 150px;
    object-fit: contain;
  }

  #casestudy .card img.arrow-icon {
    width: 20px;
    height: 20px;
  }
}