@charset "utf-8";
/* CSS Document */
.t_heading {
    text-align: center;
}
.t_h2 {
	font-family: 'Roboto Condensed', sans-serif;
	color: #185d9f;
	font-size: 40px;
	font-weight: 700;
}
.t_h3 {
    color: #185DA1;
    font-size: 30px;
    font-weight: bold;
}
.t_h4 {
    font-size: 30px;
    text-align: center;
    margin-bottom: 80px;
}
.sub_h2 {
	font-size: 16px;
    color: #000;
    margin-top: 5px;
    font-weight: 300;
}
.normal {
    font-size: 18px;
    line-height: 31.5px;
}
.large {
	font-size: 30px;
    line-height: 52.5px;
}
#breadcrumbs {
    display: none;
    margin-top: 0;
}
#breadcrumbs.active {
    display: none;
}
article {
    position: relative;
    padding-top: 100px;
    overflow: hidden;
    background-color: #fff; /* 背景色 */
background-image: radial-gradient(#e8f8ff 0.5px, transparent 5px);
background-size: 40px 40px;
}

/* メインコンテンツ */
.customerstory-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
}

/* アーカイブページの冒頭見出し */
.archive-header {
  text-align: center;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  width: 100%;
  height: 500px;
  background-image: url("https://systemcreate-inc.co.jp/system/wp-content/uploads/top_archive_cs.png");
  margin-top:-80px;
}

.title_box {
  padding-top:190px;
}

.archive-title {
  font-size: 3rem;        /* 大見出しサイズ */
  font-weight: 800;
  color: #185d9f;
  margin-bottom: 1rem;
   position: relative;
   text-align:center;
   padding-bottom:1rem; /*見出し下の余白調整 */
   color:#fff;
}

.archive-title:before {
   content: '';
   position: absolute;
   bottom: 0;
   height: 3px;
   left: 50%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   width: 50px; /*線の幅*/
   background: #a5c9c1; /*線の色 */
}

.archive-subtitle {
  font-size: 1.2rem;      /* サブ見出しサイズ */
  font-weight: 400;
  color: #fff;
  max-width: 800px;       /* 横幅制限 */
  margin: 0 auto;
  line-height: 1.6;
}

/* -------------------- */
/* ピックアップカード：左右レイアウト */
.customerstory-pickup {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
  padding: 30px;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  margin-bottom: 50px;
  border:0.5px solid #999;
}

.customerstory-pickup:hover {
  transform: translateY(-5px);
}

/* ピックアップ：テキスト */
.customerstory-pickup .pickup-content {
  flex: 1;
}

/* ピックアップ：画像 */
.customerstory-pickup .pickup-thumbnail {
  flex: 1;
  max-width: 50%;
}

.customerstory-pickup .pickup-thumbnail img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 0;
}

/* -------------------- */
/* 一覧カード */
.customerstory-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.customerstory-item {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12px;
  border:0.5px solid #999;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  padding: 20px;
  text-decoration: none;
  color: inherit;
}

.customerstory-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.12);
}

/* サムネイル */
.customerstory-item .case-thumbnail img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  margin-bottom: 16px;
}

/* タイトル・テキスト */
.customerstory-pickup .pickup-title {
  font-size: 2rem;
  font-weight: 800;
  color: #185d9f;
  margin-bottom: 12px;
}

.customerstory-item .case-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #185d9f;
  margin-bottom: 8px;
}

.customerstory-pickup .pickup-excerpt,
.customerstory-item .case-excerpt {
  color: #333;
  margin-bottom: 12px;
  font-weight: bold;
}

.customerstory-pickup .company-info,
.customerstory-item .company-info {
  color: #555;
  margin-bottom: 12px;
}

/* -------------------- */
/* 業種ラベル */
/* ピックアップカード（大きめ） */
.customerstory-pickup .pickup-industry {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 12px;
  height: 40px;
  min-width: 40px;
  border-radius: 12px;
  border: 2px solid #0073e6;
  background-color: #0073e6;
  color: #fff;
  font-weight: bold;
  margin-bottom: 16px;
}

/* 一覧カード（小さめ） */
.customerstory-item .case-industry, .case-module {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  height: 24px;
  min-width: 24px;
  border-radius: 12px;
  border: 2px solid #0073e6;
  background-color: #0073e6;
  color: #fff;
  font-weight: bold;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

/* -------------------- */
/* 事例タグ */
.case-tags,
.pickup-info {
  margin-bottom: 8px;
}

.case-tags .tag,
.pickup-info .tag {
  display: inline-block;
  background-color: #f0f0f0;
  color: #555;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 6px;
  margin-right: 4px;
}



#breadcrumbs {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.t_h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #333;
    text-align: center;
}


/*ここから下は個別ページ用*/
/*============= バナー背景とスタイル ==============*/
.banner {
  width: 100vw;          /* ビューポート幅いっぱい */
  height: 30vh;          /* バナーの高さ */
  margin: 0;             
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #333;
  box-sizing: border-box;
  background-color: #fff;
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 25px,
      rgba(0,0,0,0.04) 26px, rgba(0,0,0,0.04) 26px,
      transparent 27px, transparent 51px,
      rgba(0,0,0,0.04) 52px, rgba(0,0,0,0.04) 52px,
      transparent 53px, transparent 77px,
      rgba(0,0,0,0.04) 78px, rgba(0,0,0,0.04) 78px,
      transparent 79px, transparent 103px,
      rgba(0,0,0,0.04) 104px, rgba(0,0,0,0.04) 104px,
      transparent 105px, transparent 129px,
      rgba(0,0,0,0.04) 130px, rgba(0,0,0,0.04) 130px),
    repeating-linear-gradient(to right,
      transparent 25px,
      rgba(0,0,0,0.04) 26px, rgba(0,0,0,0.04) 26px,
      transparent 27px, transparent 51px,
      rgba(0,0,0,0.04) 52px, rgba(0,0,0,0.04) 52px,
      transparent 53px, transparent 77px,
      rgba(0,0,0,0.04) 78px, rgba(0,0,0,0.04) 78px,
      transparent 79px, transparent 103px,
      rgba(0,0,0,0.04) 104px, rgba(0,0,0,0.04) 104px,
      transparent 105px, transparent 129px,
      rgba(0,0,0,0.04) 130px, rgba(0,0,0,0.04) 130px);
  background-repeat: no-repeat;
  background-size: cover;
}
.banner > div:first-child {
    position: relative !important; /* absolute を無効化 */
    top: auto !important;
    left: auto !important;
    width: 100%;                  /* 幅を親いっぱいに */
    display: flex;                 /* flexで中央揃え */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/* バナー内文字のスタイル */
.banner-content {
  font-family: YuGothic, "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  backdrop-filter: blur(1px);
}

.banner-subtitle {
  font-size: 0.9rem;
  margin: 0 0 0.5rem 0;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.banner-title {
  font-size: 3rem;
  margin: 0;
  font-weight: bold;
 background:linear-gradient(transparent 60%, #f6c 60%);
}

/*============= セクション見出し ==============*/
.section-heading {
  display: flex;
  justify-content: center; /* 中央寄せ */
  margin: 4rem 0;          /* 上下の余白 */
}

.section-title {
  position: relative;
  padding: 0.5em 1em;
  font-size: 2.3rem;      /* 見出し文字サイズ */
  font-weight: bold;
  color: #333;
  display: inline-block;
  text-align: center;
}

/* 左右の青い【】を追加 */
.section-title::before,
.section-title::after {
  content: '【';
  font-size: 7rem;        /* 括弧のサイズ */
  color: #2589d0;         /* 青色 */
  position: absolute;
  top: 53%;
  transform: translateY(-50%);
}

.section-title::after {
  content: '】';
  right: -0.6em;          /* 文字の右外側に配置 */
  left: auto;
}

.section-title::before {
  left: -0.6em;           /* 文字の左外側に配置 */
}

/*ユーザー情報セクション*/
.user-section {
  width: 90%;
  max-width: 960px;
  margin: 3rem auto;
  padding: 2rem;
  box-sizing: border-box;
}

.section-subtitle {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 1rem 0;
  border-bottom: 2px solid #2589d0;
  display: inline-block;
  padding-bottom: 0.3rem;
  color: #2589d0;
}

.info-item {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  font-size:1.2rem;
}

.info-label {
  flex: 0 0 120px;
  font-weight: bold;
  color: #333;
}

.info-value {
  flex: 1;
  color: #555;
}

.info-value a {
  color: #007acc;
  text-decoration: none;
}

.info-value a:hover {
  text-decoration: underline;
}

/*============= 導入製品ボックス ==============*/
.product-box {
  border: 1px solid #2589d0;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  margin-top: 1rem;
  background-color: #f7fbff;
}

.product-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

.product-list li:last-child {
  border-bottom: none;
}
/*ポイントセクション*/
.points-section {
  width: 90%;
  max-width: 960px;
  margin: 4rem auto;
  box-sizing: border-box;
}

.points-box {
  background-color: #f0f8ff; /* 箱の背景色 */
  border: 2px solid #2589d0;
  border-radius: 12px;
  padding: 2rem;
}

.points-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: #2589d0;
  margin: 0 0 0.5rem 0;
}

.points-heading {
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 2rem 0;
  color: #333;
}

.points-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.points-list li {
  background-color: #fff;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  border: 1px solid #ddd;
}

.point-subtitle {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0 0 0.5rem 0;
  color: #007acc;
}

.point-text {
  margin: 0;
  color: #555;
  line-height: 1.6;
}

/*課題・導入・解決*/

.case-study-section {
  width: 90%;
  max-width: 960px;
  margin: 4rem auto;
  box-sizing: border-box;
}

.case-section-title {
  font-size: 2rem;
  font-weight: bold;
  color: #2589d0;
  margin-bottom: 2rem;
  border-bottom: 2px solid #2589d0;
  display: inline-block;
  padding-bottom: 0.3rem;
}

.case-block {
  margin-bottom: 3rem;
}

.case-block-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #007acc;
  margin-bottom: 0.5rem;
}

.case-block-text {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.case-block-image img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  margin-top: 0.5rem;
}


@media screen and (max-width:960px){
    .t_h3 {
        font-size: 25px;
    }
    .t_h4 {
        font-size: 25px;
        margin-bottom: 40px;
    }
    .normal {
        font-size: 16px;
        line-height: 26.5px;
    }
    .archive .contents1, .archive .contents2, .archive .contents3 {
        width: 85%;
        margin: 65px auto 0;
    }
    .archive .contents1 .flex {
        flex-direction: column;
    }
    .archive .contents1 .left {
        width: 100%;
    }
    .archive .contents1 li {
        font-size: 16px;
        line-height: 26.5px;
        align-items: flex-start;
        margin-bottom: 20px;
    }
    .archive .contents1 li img {
        width: 20px;
        transform: translateY(5px);
    }
    .archive .contents1 .right {
        width: 100%;
        text-align: center;
        margin-top: -50px;
    }
    .archive .contents1 .right img {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 500px;
    }
    .archive .contents1 .normal {
        width: 100%;
        margin-top: 0px;
    }
    .archive .contents2 {
        gap: 50px;
        flex-direction: column;
    }
    .archive .contents2 .left {
        text-align: center;
    }
    .archive .contents2 .left img {
        width: 465px;
        max-width: 375px;
        width: 100%;
    }
    .archive .contents2 li {
        font-size: 16px;
        max-width: 365px;
        margin: 0 auto 40px;
    }
    .archive .contents2 li img {
        transform: translateX(-27.5px);
        width: 55px;
    }
    .archive .contents3 ul {
        flex-wrap: wrap;
    }
    .archive .contents3 li {
        width: calc((100% - 28px)/2);
    }
    .ttl {
        font-size: 20px;
        line-height: 31.5px;
    }
    .appeal {
        padding: 0px 25px 15px;
    }
    .appeal:before {
        top: 10px;
        left: 10px;
    }
    .appeal p:first-child {
        font-size: 20px;
        transform: translate(-10px , -15px);
    }
    .appeal p:last-child {
        font-size: 20px;
        line-height: 29px;
    }
    .article__body ul {
        margin: 20px 0px 80px;
    }
    .article__body li {
        padding: 40px 0px;
    }
    .archive .contents3 {
        width: 85%;
        margin: 65px auto 50px;
    }
    .article__body img {
        max-width: 100%;
    }
}

@media screen and (max-width: 768px) {

  /* バナー高さ縮小 */
  .banner {
    height: 25vh;
    padding: 0 1rem;
  }

  .banner-title {
    font-size: 2rem;
  }

  .banner-subtitle {
    font-size: 0.8rem;
  }

  /* セクション見出しの括弧サイズ調整 */
  .section-title::before,
  .section-title::after {
    font-size: 4rem;
    top: 50%;
  }

  .section-title {
    font-size: 1.5rem;
    padding: 0.3em 0.5em;
  }

  /* ユーザー情報ラベルの折り返し */
  .info-item {
    flex-direction: column;
    gap: 0.3rem;
  }

  .info-label {
    flex: none;
  }

  .info-value {
    flex: none;
  }

  /* 導入製品ボックス */
  .product-box {
    padding: 0.8rem 1rem;
  }

  .product-list li {
    padding: 0.4rem 0.8rem;
  }

  /* ポイントセクション */
  .points-box {
    padding: 1.5rem;
  }

  .points-title {
    font-size: 1rem;
  }

  .points-heading {
    font-size: 1.5rem;
  }

  .points-list li {
    padding: 0.8rem 1rem;
  }

  .point-subtitle {
    font-size: 1rem;
  }

  .point-text {
    font-size: 0.9rem;
  }

  /* 課題・導入・解決 */
  .case-section-title {
    font-size: 1.5rem;
  }

  .case-block-title {
    font-size: 1.2rem;
  }

  .case-block-text {
    font-size: 0.9rem;
  }

  .case-block-image img {
    margin-top: 0.3rem;
  }

/*アーカイブページ縦並び*/
  .customerstory-pickup {
    flex-direction: column;
  }
  .customerstory-pickup .pickup-thumbnail {
    max-width: 100%;
    margin-top: 20px;
  }
}

@media screen and (max-width:600px){
    .article__body ul {
        margin: 20px 0px 40px;
    }
    .archive .contents2 li {
        max-width: none;
        width: 90vw;
    }
    .archive .contents3 li {
        width: 100%;
        padding: 10px;
    }
    .article__body li p:first-child {
        width: 100px;
        flex-shrink: 0;
    }
    .list-link {
        width: 50%;
        min-width: 180px;
        font-size: 16px;
        padding: 18px 0;
    }
}
@media screen and (max-width:390px){
    .pagination {
        gap: 10px;
    }
    .archive .contents2 li {
        font-size: 14px;
    }
    .archive .contents2 li img {
        transform: translateX(-22.5px);
        width: 45px;
    }
}
@media screen and (max-width: 480px) {

  .banner {
    height: 20vh;
  }

  .banner-title {
    font-size: 1.5rem;
  }

  .banner-subtitle {
    font-size: 0.7rem;
  }

  .section-title::before,
  .section-title::after {
    font-size: 3rem;
  }

  .section-title {
    font-size: 1.5rem;
    padding: 0.2em 0.3em;
  }

  .points-heading {
    font-size: 1.2rem;
  }

  .points-list li {
    padding: 0.6rem 0.8rem;
  }

  .point-subtitle {
    font-size: 0.9rem;
  }

  .point-text {
    font-size: 0.8rem;
  }

  .case-section-title {
    font-size: 1.2rem;
  }

  .case-block-title {
    font-size: 1rem;
  }

  .case-block-text {
    font-size: 0.8rem;
  }
}