@charset "utf-8";
/* =========================================================
   style.css
   2025 — 共通スタイル
   Structure:
     1. 
     2. 
     3. 
     4. 
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');
body {
  font-family: "BIZ UDPGothic", sans-serif;
  font-weight: 400;
  letter-spacing: 0.08em;
}
/* =========================================================
   0
========================================================= */
a {
  transition: 0.3s;
}
a[href$=".pdf"]::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.3em;
  vertical-align: middle;
  background: url("/assets/img/icon_pdf.svg") no-repeat center / contain;
}
/* ----------------------------------------
   汎用ボタン：btn-01
   ---------------------------------------- */
/* --- btn-01 --- */
.btn-01 {
  text-align: center; /* 中央揃え */
  margin-top: 2em; /* セクションとの間に余白（お好みで） */
}
.btn-01 a, .btn-01 span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  font-size: 0.8rem;
  text-decoration: none;
  line-height: 1.2;
  font-weight: 700;
  color: #333333 /*for サービスindex*/
}
.btn-01 a:hover, .btn-01 a:focus-visible, .btn-01 span:hover, a:hover .btn-01 span, .btn-01 span:focus-visible {
  color: #0F6BB9;
  outline: none;
}
.btn-01 a::after, .btn-01 span::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url("/assets/img/link_01.svg") no-repeat center / contain;
}
.btn-01 a:hover::after, .btn-01 span:hover::after, a:hover .btn-01 span::after {
  background: url("/assets/img/link_01--hover.svg") no-repeat center / contain;
}
/* blankバージョン */
.btn-01 a[target="_blank"]::after {
  background: url("/assets/img/icon-blank--black.svg") no-repeat center / contain;
}
/* 枠線バージョン（for 製品サービスINDEX） */
.btn-01--border {
  border: 1px solid #aaa;
  text-align: left;
  margin-top: 1em;
}
.btn-01--border a {
  padding: 1.1em 1em 0.9em;
  display: flex;
  justify-content: space-between;
}
.btn-01--border a:hover {
  background: #F4F3F2;
  text-decoration: none;
}
/* 幅アリ */
.btn-01--width {
  width: 28em;
  max-width: 100%;
  display: block;
  margin-inline: auto;
  text-align: center;
}
.btn-01--width a {
  justify-content: center;
}
/* --- btn-02 --- */
.btn-02 {
  text-align: center;
  margin-top: 2em;
}
.btn-02 a, .btn-02 input {
  display: inline-flex;
  align-items: center;
  justify-content: center; /* ←中央寄せに変更 */
  position: relative; /* ←アイコンを右端に絶対配置するため */
  min-width: 350px;
  max-width: 100%;
  margin: auto;
  font-size: 0.8rem;
  text-decoration: none;
  border-radius: 500px;
  background: #fff;
  border: 1px solid #333;
  line-height: 1.2;
  padding: 1.2em 1.4em 1em;
  color: inherit;
  font-weight: 700;
}
.btn-02 a::after, .btn-02 input::after {
  content: "";
  position: absolute;
  right: 1.2em; /* ←右端に配置 */
  width: 1em;
  height: 1em;
  background: url("/assets/img/link_02.svg") no-repeat center / contain;
}
.btn-02 a:hover, .btn-02 input:hover {
  background: #0F6BB9;
  color: #fff;
  text-decoration: none;
}
.btn-02 a:hover::after, .btn-02 input:hover::after {
  background: url("/assets/img/link_02--hover.svg") no-repeat center / contain;
}
/* PDFリンクだけアイコンを差し替え */
.btn-02 a[href$=".pdf"] {
  padding-left: 2.6em;
  padding-right: 3.2em;
}
.btn-02 a[href$=".pdf"]::after {
  background: url("/assets/img/icon_pdf.svg") no-repeat center / contain !important;
  width: 1.5em;
  height: 1.5em;
}
.btn-02 a[href$=".pdf"]:hover::after {
  background: url("/assets/img/icon_pdf.svg") no-repeat center / contain !important;
}
/*TOPの採用情報トップボタンだけかな*/
.btn-02 a[target="_blank"]::after {
  background: url("/assets/img/icon-blank--white.svg") no-repeat center / contain;
}
.btn-02 a:hover[target="_blank"]::after {
  background: url("/assets/img/icon-blank--green.svg") no-repeat center / contain;
}
/* --- .btn-02.btn-02--recruite TOPの採用情報トップボタンだけかな--- */
.btn-02--recruite a {
  background: rgba(30, 164, 61, 0.72);
  border: 1px solid #fff;
  color: #FFFFFF;
}
.btn-02--recruite a:hover {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid #1EA43D;
  color: #1EA43D;
}
.btn-02--recruite a::after {
  background: url("/assets/img/link_02--hover.svg") no-repeat center / contain;
}
/* SPサイズ調整 */
@media (max-width: 767px) {
  .btn-01 a {
    font-size: 0.85rem;
  }
}
@media (max-width: 480px) {
  .btn-02 a {
    min-width: 0; /* ← これが唯一の答え！ */
    width: 100%; /* ← 画面に必ず収める */
  }
}
/* =========================================================
   1. 見出し
========================================================= */
/* ----------------------------------------
   見出しスタイル：heading-02
   （日本語＋英語サブタイトルあり）
---------------------------------------- */
.heading-02 {
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 0.75em;
}
.heading-02 .sub-eng {
  display: block;
  font-size: 0.58em;
  color: #49A1D1;
  font-weight: 400;
  margin-top: 0.45em;
  font-family: Arial, Helvetica, sans-serif;
}
/* TOPページ用バリエーション（必要なら） */
.heading-02--top {
  /* margin-bottom: 1.5em; など */
}
/* SPサイズ調整 */
@media (max-width: 767px) {
  .heading-02 {
    font-size: 1.6rem;
    text-align: center;
  }
}
/* =========================================================
   お知らせセクション
========================================================= */
section.news {
  background-color: var(--gray-100) !important;
} /* お知らせセクション見出し */ .c-news__heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1em;
  line-height: 1.2;
}
.c-news__sub {
  display: inline-block;
  font-size: 0.75em;
  color: #49A1D1;
  margin-left: 0.5em;
  font-weight: 400;
}
/* お知らせリスト（ベース） */ .c-news {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.c-news__item {
  padding: 28px 0;
  border-bottom: 1px solid #ccc;
}
.c-news__item:first-child {
  padding-top: 6px;
}
/* 上段：日付 + カテゴリ */ .c-news__meta {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap; /* 小さい画面で折り返し */
}
.c-news__date {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums; /* 桁が揃って見やすい */ white-space: nowrap;
}
/* カテゴリピル */
.c-news__cat {
  --cat-bg: #A092A6; /* 既定（クラス未指定時=その他） */
  display: inline-block;
  padding: .4em .75em;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  background: var(--cat-bg);
  color: #fff;
  line-height: 1;
  white-space: nowrap;
  min-width: 11em;
  text-align: center;
}
/* 下段：タイトル（リンク） */
.c-news__title {
  display: inline-block; /* 複数行での hover 範囲を確保 */ margin-top: .8rem;
  text-decoration: none;
  font-weight: 700;
}
.c-news__title:hover, .c-news__title:focus-visible {
  color: #0F6BB9;
  outline: none;
  text-decoration: none;
}
/* カテゴリ別カラー（必要に応じて追加） */
.cat--info { /* その他 */ --cat-bg: #e89671;
}
.cat--other { /* その他 */ --cat-bg: #A092A6;
}
.cat--product-service { /* 製品・サービス */ --cat-bg: #41a9d5;
}
.cat--event { /* イベント・セミナー */ --cat-bg: #77be7e;
}
.cat--case { /* 事例 */ --cat-bg: #f37572;
}
.cat--recruit { /* 採用 */ --cat-bg: #4171b8;
}
/* 余白・文字サイズの微調整（小画面） */
@media (max-width: 767px) {
  .c-news__item {
    font-size: 0.8rem;
  }
}
@media (max-width: 480px) {
  .c-news__item {
    padding: 12px 0;
  }
  .c-news__title {
    line-height: 1.5;
  }
}
/**/
@media (min-width: 768px) {
  section.news .inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .c-news__date {
    width: 240px;
    padding-left: 20px;
  }
  .c-news__title {
    padding-left: 250px;
  }
  section.news .btn-01 {
    text-align: left;
  }
  /* 左カラム：見出し＋ボタン */
  .news__left {
    flex-shrink: 0;
    width: 280px;
  }
  /* お知らせリスト（右側） */
  .c-news {
    width: 928px;
  }
}
/* =========================================================
   導入事例セクション
========================================================= */
.c-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 要素間の余白 */
}
.c-cases li {
  flex: 1 1 calc(33.333% - 20px)
}
.c-cases a {
  display: block;
  position: relative;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.c-cases a:hover img {
  transform: scale(1.15); /* 551/480 ≒ 1.148 → 1.15倍でOK */
}
.c-cases img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
  transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.c-cases figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 1em;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
}
.c-cases figcaption .sub {
  display: block;
  font-size: 75%;
  margin-bottom: 0.6em;
}
/* スマホ 2列にする */
@media (max-width: 767px) {
  .c-cases {
    gap: 10px;
  }
  .c-cases li {
    flex: 1 1 calc(50% - 10px);
  }
  .c-cases figcaption {
    font-size: 0.8rem;
  }
}
/* タブレット中間サイズ（768〜1023px）では2〜3列の間で調整
@media (min-width: 768px) and (max-width: 1023px) {
  .c-cases li {
    flex: 1 1 calc(50% - 1rem);
  }
} */
/* =========================================================
   お問い合わせクション
========================================================= */
section.contact {
  background: linear-gradient(90deg, #3bca83 0%, #1e8cc7 100%);
  padding: 3.0rem 0;
}
.contact__banner {
  display: flex;
  align-items: center;
  gap: 1em;
  flex-wrap: wrap;
  width: 900px;
  max-width: 90%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 1) url("/assets/img/link_contact.svg") no-repeat center right 4.5% / 50px;
  padding: 1.9em 3.5em;
  padding-right: 100px;
  text-decoration: none;
  color: #222;
}
.contact__banner p {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.8;
  padding-top: 0.18em;
  font-size: 0.9rem;
}
.contact__banner:hover {
  background-color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
.contact__title {
  line-height: 1;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  margin-right: 2em;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.contact__title::before {
  content: "";
  width: 2.6em;
  height: 1.2em;
  background: url("/assets/img/icon_contact.svg") no-repeat center left / contain;
}
/* スマホ */
@media (max-width: 767px) {
  section.contact {
    padding: 1.6rem 0;
  }
  .contact__banner {
    padding: 1.6em 1.4em;
    padding-right: 40px;
    background: rgba(255, 255, 255, 1) url("/assets/img/link_contact.svg") no-repeat center right 2% / 30px;
  }
  .contact__title {
    font-size: 1.1rem;
    margin-right: 0;
  }
}
/* 調整 */
@media (max-width: 400px) {
  .contact__banner p {
    font-size: 0.8rem;
  }
}