@charset "UTF-8";

/* ==========================================
   新設クラス名（toshin-st-）完全独立スタイル
   ========================================== */

/* 全体囲み・幅の確保 */
.toshin-st-wrap {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #ffffff !important;
}
.toshin-ft-sec {
  padding: 100px 0 !important;
  width: 100% !important;
}
.toshin-st-sec {
  padding: 1px 0 !important;
  width: 100% !important;
  margin: 0 !important;
}

.toshin-st-sec--bg {
  background-color: #f8fafc !important;
}

.toshin-st-future{
  padding: 50px 0 !important;
  width: 100% !important;

  /* ▼ 画面横いっぱいに背景を広げる記述（親要素を飛び出させる） ▼ */
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: 100vw !important;
}

.toshin-st-future--bg{
  background-color: #f8fafc !important;
}


/* 最大幅1400px設定 */
.toshin-st-inner {
  width: 100% !important;
  max-width: 1500px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* 2カラムレイアウト（01〜03） */
.toshin-st-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 60px !important;
  margin-bottom: 90px !important;
}

.toshin-st-row--reverse {
  flex-direction: row-reverse !important;
}

.toshin-st-col-text,
.toshin-st-col-img {
  flex: 1 1 50% !important;
  width: 50% !important;
  box-sizing: border-box !important;
}

.toshin-st-col-img img {
  width: 100% !important;
  height: 380px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block !important;
}

/* 見出し・テキスト装飾 */
.toshin-st-head {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.toshin-st-num {
  font-size: 38px !important;
  font-weight: 800 !important;
  color: #1e3a8a !important;
  line-height: 1 !important;
}

.toshin-st-title {
  font-size: 28px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: #0f172a !important;
  letter-spacing: 0.1em;
  letter-spacing: 0.1em;
}

.toshin-st-lead {
  font-size: 22px !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  color: #0f172a !important;
  line-height: 1.5;
}

.toshin-st-desc {
  line-height: 1.85 !important;
  color: #334155 !important;
  margin: 0 !important;
}



/* 下部自社プロダクト文章（中央寄せ） */
.toshin-st-story {
  max-width: 900px !important;
  margin: 0 auto 48px !important;
  text-align: center !important;
}

.toshin-st-story__lead {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  color: #0f172a !important;
}

.toshin-st-marker {
  background: linear-gradient(transparent 60%, #fef08a 60%) !important;
}

.toshin-st-story__txt {

  line-height: 1.9 !important;
  color: #334155 !important;
  margin-bottom: 20px !important;
}

.toshin-st-story__catch {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
  margin: 28px 0 !important;
}

.toshin-st-story__sub {
  line-height: 1.8 !important;
  color: #64748b !important;
  margin: 0 !important;
}

/* 3連フォトギャラリー（横並び3列） */
.toshin-st-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.toshin-st-grid__item {
  overflow: hidden !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  position: relative;
}

.toshin-st-grid__item:before {
	content: url('../images/glass.png');
	position: absolute;
	right: 0;
	bottom: -3px;
}

.toshin-st-grid__item img {
  width: 100% !important;
  height: 240px !important;
  object-fit: cover !important;
  display: block !important;
}

/* ==========================================
   デバイス分類ブレイクポイント（レスポンシブ対応）
   ========================================== */

/* ------------------------------------------
   PC（標準）: min-width: 992px 以上
   コンテナ幅: 960px（または指定幅）
   ------------------------------------------ */
@media screen and (min-width: 992px) {
  .toshin-st-inner {
    max-width: 1320px !important;
    padding: 0 60px !important;
  }

  .toshin-st-row {
    gap: 80px !important;
    margin: 50px 0 !important;
  }

  .toshin-st-col-img img {
    height: 360px !important;
  }

  .toshin-st-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
  }
}

/* ------------------------------------------
   PC（小）: min-width: 768px 〜 991px
   コンテナ幅: 740px
   ------------------------------------------ */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .toshin-st-sec {
    padding: 60px 0 !important;
  }

 .toshin-st-future{
   padding: 50px 0 !important;
   width: 100% !important;
   background-color: #f8fafc !important;
}

  .toshin-st-inner {
    max-width: 740px !important;
    padding: 0 20px !important;
  }

  /* 2カラムは維持しつつ間隔と画像を調整 */
  .toshin-st-row {
    gap: 32px !important;
    margin-bottom: 60px !important;
  }

  .toshin-st-col-img img {
    height: 300px !important;
  }

  .toshin-st-num {
    font-size: 32px !important;
  }

  .toshin-st-title {
    font-size: 20px !important;
  }

  .toshin-st-lead {
    font-size: 16px !important;
  }

  .toshin-st-desc {
    font-size: 14px !important;
  }

  .toshin-st-story__lead {
    font-size: 20px !important;
  }

  .toshin-st-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
  }

  .toshin-st-grid__item img {
    height: 180px !important;
  }
}

/* ------------------------------------------
   タブレット (TB): min-width: 576px 〜 767px
   1カラム（縦並び）へ移行
   ------------------------------------------ */
@media screen and (min-width: 576px) and (max-width: 767px) {
  .toshin-st-sec {
    padding: 50px 0 !important;
  }

  .toshin-st-inner {
    width: 100% !important;
    padding: 0 24px !important;
  }

/* 2カラムを縦並びに切り替え */
  .toshin-st-row {
    flex-direction: column !important;
    gap: 24px !important;
    margin-bottom: 50px !important;
  }

  /* リバース（02）だけ順序を反転させて「テキスト → 写真」にする */
  .toshin-st-row--reverse {
    flex-direction: column-reverse !important;
    gap: 24px !important;
    margin-bottom: 50px !important;
  }

  .toshin-st-col-text,
  .toshin-st-col-img {
    width: 100% !important;
    flex: none !important;
  }

  .toshin-st-col-img img {
    height: 320px !important;
  }

  .toshin-st-num {
    font-size: 30px !important;
  }

  .toshin-st-title {
    font-size: 20px !important;
  }

  .toshin-st-story__lead {
    font-size: 20px !important;
  }

  .toshin-st-story__catch {
    font-size: 16px !important;
  }

  /* 3連ギャラリーを2列〜スマホ用に調整 */
  .toshin-st-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  .toshin-st-grid__item img {
    height: 160px !important;
  }
}

/* ------------------------------------------
   スマホ (SP): max-width: 575px
   コンテナ幅: 100%（左右余白 20px）
   ------------------------------------------ */
@media screen and (max-width: 575px) {
  .toshin-st-sec {
    padding: 40px 0 !important;
  }

  .toshin-st-inner {
    width: 100% !important;
    padding: 0 20px !important; /* 指定の左右余白 20px */
    box-sizing: border-box !important;
  }

/* 完全に縦並び */
  .toshin-st-row {
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 40px !important;
  }

  /* リバース（02）だけ順序を反転させて「テキスト → 写真」にする */
  .toshin-st-row--reverse {
    flex-direction: column-reverse !important;
    gap: 20px !important;
  }

  .toshin-st-col-text,
  .toshin-st-col-img {
    width: 100% !important;
    flex: none !important;
  }

  .toshin-st-col-img img {
    height: 220px !important;
  }

  /* テキストサイズ最適化 */
  .toshin-st-head {
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  .toshin-st-num {
    font-size: 28px !important;
  }

  .toshin-st-title {
    font-size: 18px !important;
  }

  .toshin-st-lead {
    font-size: 15px !important;
    margin-bottom: 12px !important;
  }

  .toshin-st-desc {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* 下部自社プロダクト文章 */
  .toshin-st-story {
    margin-bottom: 32px !important;
  }

  .toshin-st-story__lead {
    font-size: 18px !important;
    margin-bottom: 16px !important;
  }

  .toshin-st-story__txt {
    font-size: 14px !important;
    line-height: 1.75 !important;
    margin-bottom: 16px !important;
  }

  .toshin-st-story__catch {
    font-size: 15px !important;
    margin: 20px 0 !important;
  }

  .toshin-st-story__sub {
    font-size: 13px !important;
  }

  /* 3連フォトギャラリーをスマホでは縦1列に */
  .toshin-st-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .toshin-st-grid__item img {
    height: 200px !important;
  }
}