@charset "UTF-8";

/* ==========================================
   1. ヒーローエリア（スライダー）
   ========================================== */

/* ヒーローエリア全体のコンテナ */
.hero-section {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: #ffffff; /* サイト全体の背景に合わせて変更可 */
}

/* 最大幅1300pxのインナー枠（MetaSliderをこの中に閉じ込めます） */
.hero-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto; /* 左右中央寄せ */
  padding: 0 15px; /* スマホ時の最低限の余白 */
  box-sizing: border-box;
}

/* MetaSlider全体の調整（はみ出し防止と中央寄せ） */
.hero-inner .metaslider,
.hero-inner .html-preview-dummy {
  width: 100%;
  margin: 0 auto;
}

/* スライダー内の画像が枠幅（1300px）に綺麗にフィットする設定 */
.hero-inner .metaslider img,
.hero-inner .html-preview-dummy img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================
   2. ニュースリリース＆導入事例セクション
   ========================================== */

/* セクション全体の背景や上下余白 */
.con_2 {
  width: 100%;
  padding: 60px 0;
  background-color: #f9f9f9; /* 見やすさのために薄いグレーにしています。白がよければ #ffffff に */
}

/* スライダーと揃えるための最大幅1200pxインナー枠 */
.con_2_inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* タイトルと「一覧」ボタンの横並び配置 */
.section_title_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  border-bottom: 2px solid #333333; /* タイトルの下にアクセント線 */
  padding-bottom: 10px;
}

.section_title_wrap h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: #333333;
}

/* 一覧ボタンのデザイン */
.archive_btn a {
  display: inline-block;
  background-color: #333333;
  color: #ffffff;
  padding: 6px 20px;
  font-size: 14px;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.3s;
}
.archive_btn a:hover {
  opacity: 0.8;
}

/* 3つのバナーを綺麗に横並び（3等分）にする設定 */
.con_2_inner .box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.con_2_inner .box a {
  flex: 1;
  min-width: 280px; /* スマホで潰れないように */
}

.con_2_inner .box img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px; /* 角を少し丸く */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 軽い影をつけて上品に */
  transition: transform 0.3s;
}
.con_2_inner .box img:hover {
  transform: translateY(-3px); /* マウスを乗せたら少し浮く演出 */
}

/* お知らせリスト全体の枠 */
.achievements_list {
  background-color: #ffffff;
  padding: 10px 25px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* 1行ごとの記事スタイル */
.news_list_item {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eeeeee;
}
.news_list_item:last-child {
  border-bottom: none; /* 最後の行の線は消す */
}

/* 日付 */
.news_list_item time {
  font-size: 14px;
  color: #888888;
  width: 130px;
  flex-shrink: 0;
}

/* カテゴリタグ */
.news_list_item .tag {
  width: 120px;
  flex-shrink: 0;
}
.news_list_item .tag span {
  display: inline-block;
  background-color: #e0f2fe; /* 薄い青色のタグ背景 */
  color: #0369a1;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 4px;
}

/* タイトル文字とリンク */
.news_list_title {
  flex-grow: 1;
}
.news_list_title h3 {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
}
.news_list_title a {
  color: #333333;
  text-decoration: none;
  transition: color 0.2s;
}
.news_list_title a:hover {
  color: #007bc2; /* マウスを乗せると青色に変わる */
}

/* スマホ対応（レスポンシブ） */
@media (max-width: 768px) {
  .news_list_item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .news_list_item time {
    width: auto;
  }
  .news_list_title h3 {
    font-size: 15px;
  }
}
/* ==========================================
   2-2. ニュースリリースセクション（修正版）
   ========================================== */

/* セクション全体の背景や上下余白 */
.con_3 {
  width: 100%;
  padding: 60px 0 20px 0;
  background-color: #ffffff;
}

/* 1200pxの幅をしっかり効かせて中央に寄せる設定 */
.con_3_inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto !important; /* 確実に左右中央寄せにします */
  padding: 0 15px;
  box-sizing: border-box;
  display: block; /* 左寄りを防ぐためにブロック要素を確実化 */
}

/* ニュースリリースのタイトル枠がはみ出したり左寄りに崩れるのを防ぐ */
.con_3_inner .section_title_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  border-bottom: 2px solid #333333;
  padding-bottom: 10px;
  width: 100%;
}

/* ニュースリリース用の白いリスト枠（幅100%で綺麗に広げます） */
.news_list {
  background-color: #ffffff;
  padding: 10px 25px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  border: 1px solid #eeeeee;
  width: 100%;
  box-sizing: border-box;
}

/* ニュースリリース専用のタグ色 */
.news_list_item .tag span.tag_news {
  background-color: #f3f4f6;
  color: #374151;
}

/* ==========================================
   3. トピックス・注目記事セクション
   ========================================== */

/* セクション全体の余白 */
.topics-section {
  width: 100%;
  padding: 60px 0;
  background-color: #ffffff;
}

/* 1200pxの幅に揃えて中央寄せ */
.topics-inner {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 15px;
  box-sizing: border-box;
}

/* 左側に青い縦線が入るタイトルデザイン */
.topics-inner .section_title_wrap {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  border-bottom: none; /* 下線は不要なのでリセット */
  padding-bottom: 0;
}

.topics-inner .title-main {
  border-left: 5px solid #005a91; /* 左側の青い縦線（コーポレートカラーに合わせて調整可） */
  padding-left: 15px;
}

.topics-inner .title-main h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 5px 0;
  color: #333333;
  line-height: 1.2;
}

.topics-inner .title-main p {
  font-size: 13px;
  font-weight: bold;
  color: #666666;
  margin: 0;
}

/* 2つのバナーをきれいに50%ずつ横並びにする設定 */
.topics-banners {
  display: flex;
  justify-content: space-between;
  gap: 30px; /* バナー間の隙間 */
  margin-bottom: 40px;
}

.topics-banners .banner-item {
  flex: 1;
  min-width: 280px; /* スマホで縦並びにするためのトリガー */
  text-align: center;
}

.topics-banners .banner-item a {
  display: block;
  text-decoration: none;
  color: #333333;
}

.topics-banners .banner-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px; /* わずかに角を丸く */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.3s;
}

/* マウスホバーでバナーを少し浮かす演出 */
.topics-banners .banner-item img:hover {
  transform: translateY(-3px);
}

/* バナーの下に表示される文字 */
.banner-caption {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  color: #333333;
}

/* バナー無しのテキストリンク一覧 */
.topics-text-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.topics-text-links li {
  border-bottom: 1px dashed #cccccc; /* 文字の下の点線 */
  padding: 15px 0;
}

.topics-text-links li:last-child {
  border-bottom: 1px dashed #cccccc; /* 一番下にも点線を残す */
}

.topics-text-links a {
  display: block;
  color: #333333;
  text-decoration: none;
  font-size: 15px;
  line-height: 1.5;
  transition: color 0.2s;
}

/* マウスを乗せたら青文字にして下線を引く */
.topics-text-links a:hover {
  color: #005a91;
  text-decoration: underline;
}

/* スマホ対応（レスポンシブ） */
@media (max-width: 768px) {
  .topics-banners {
    flex-direction: column; /* スマホでは縦に並べる */
    gap: 30px;
  }
  .topics-text-links a {
    font-size: 14px;
  }
}
/* ==========================================
   4. サービスサポート ボタン最終調整（徹底ガード版）
   ========================================== */

/* ボタンの配置エリア */
.pc-btn-wrap {
  text-align: center;
  width: 100%;
  margin: 30px auto 0 auto;
}

/* 赤・青ボタン共通：テーマの邪魔な初期設定をすべてリセットして上書き */
.wp-custom-btn-red,
.wp-custom-btn-blue {
  display: inline-block !important;
  color: #ffffff !important;           /* 文字色は絶対白 */
  text-decoration: none !important;    /* 下線は絶対消す */
  font-size: 16px !important;
  font-weight: 700 !important;
  padding: 15px 50px !important;       /* ボタンのぷっくりした余白 */
  border-radius: 4px !important;       /* わずかに角を丸く */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; /* 立体的な影 */
  border: none !important;             /* 邪魔な枠線を消去 */
  text-align: center !important;
  line-height: 1.5 !important;
  transition: transform 0.2s, box-shadow 0.2s, background 0.3s !important;
}

/* 1つ目のブロック：赤いグラデーションボタン（指定色 #d4111a ベース） */
.wp-custom-btn-red {
  background: linear-gradient(135px, #f23838 0%, #d4111a 100%) !important;
}
.wp-custom-btn-red:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
  background: linear-gradient(135px, #d4111a 0%, #b00d14 100%) !important;
}

/* 2つ目のブロック：青いグラデーションボタン */
.wp-custom-btn-blue {
  background: linear-gradient(135px, #0060a3 0%, #004275 100%) !important;
}
.wp-custom-btn-blue:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
  background: linear-gradient(135px, #004275 0%, #002d52 100%) !important;
}

/* スマホ用のボタン全幅化設定 */
@media (max-width: 768px) {
  .wp-custom-btn-red,
  .wp-custom-btn-blue {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }
}