/* ============================================
   共通スタイル定義
   サイト全体で使い回すスタイルをまとめたファイル
   ============================================ */

/* ========================================
   ベーススタイル
   ページ全体の基本的な見た目を設定
   ======================================== */
body {
  font-family:
    "Noto Sans JP",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "Roboto",
    "Helvetica Neue",
    Arial,
    sans-serif; /* フォント設定 - 日本語対応のフォントを優先的に指定 */
  font-size: 1.7rem; /* 文字サイズ - 1.6rem = 16px (htmlのfont-sizeが62.5%の場合) */
  line-height: 1.6; /* 行間の高さ - 文字サイズの1.6倍で読みやすい行間に */
  color: #333; /* 文字色 - 濃いグレー */
  background-color: #fff; /* 背景色 - 白 */
}

main {
  padding-top: 90px;
}
@media screen and (max-width: 1220px) {
  main {
    padding-top: 80px;
  }
}

@media screen and (max-width: 768px) {
  body {
    font-size: 1.4rem;
  }

  main {
    padding-top: 70px;
  }
}

/* ========================================
   下層ページアイキャッチ設定
   ======================================== */
.page-header {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 250px;
  background-image: url("../../images/common/eyecatch-image.png");
}
@media screen and (max-width: 768px) {
  .page-header {
    min-height: 200px;
  }
}
@media screen and (max-width: 480px) {
  .page-header {
    min-height: 150px;
  }
}

.page-header h1 {
  color: white;
  font-size: 5rem;
}
@media screen and (max-width: 768px) {
  .page-header h1 {
    font-size: 4.5rem;
  }
}
@media screen and (max-width: 480px) {
  .page-header h1 {
    font-size: 3rem;
  }
}

.page-header h1:before {
  content: "";
  background-image: url("../../images/common/page-header-icon.svg");
  display: inline-block;
  width: 34px;
  height: 34px;
  margin-right: 10px;
}

/* ========================================
   共通タイトルコンポーネント
   ページ内の見出しデザインを統一
   ======================================== */

/* タイトル共通スタイル
   カンマで区切ることで、複数のクラスに同じスタイルを適用 */
/* h2見出しのスタイル
   .common-title-center h2 は「common-title-centerクラスの中のh2要素」という意味 */

/* タイトル配置バリエーション */
/* 中央揃えバージョン */
.common-title-center {
  text-align: center; /* 文字を中央に配置 */
  margin: 0 auto;
  max-width: 100%;
  padding: 60px 0; /* 上下に60pxの余白 */
}

@media screen and (max-width: 1100px) {
  .common-title-center {
    padding: 30px 0;
  }
}

@media screen and (max-width: 768px) {
  .common-title-center {
    padding: 30px 0;
  }
}

.common-title-center h2 {
  font-size: 4rem;
}

/* 左揃えバージョン */
.common-title-left {
  max-width: 1190px;
  text-align: left; /* 文字を左に配置 */
  padding: 60px 0; /* 上下に60pxの余白 */
}

@media screen and (max-width: 768px) {
  .common-title-left {
    padding: 30px 0;
  }
}

@media screen and (max-width: 1100px) {
  .common-title-left {
    padding: 30px 0;
  }
}

/* h2見出しスタイル */
.common-title-center h2,
.common-title-left h2 {
  font-size: 4rem;
  line-height: 1.3;
  color: #002244; /* 濃い青めグレー */
}

.common-title-center h2,
.common-title-left h2 {
  font-weight: 700; /* 文字の太さ:太い */
  color: #002244; /* 濃い青めグレー */
}

/* グレーのテキストが下についている場合 */
.common-title-center.gray h2,
.common-title-left.gray h2 {
  font-size: 3.2rem; /* 32px相当 */
  line-height: 1.3;
  color: #002244; /* 濃い青めグレー */
  font-weight: 500; /* 文字の太さ:中くらい */
}

/* 英語のサブテキスト（MISSION、PRODUCTSなど） */
.common-title-center .sub-text,
.common-title-left .sub-text {
  font-family: "Roboto", sans-serif; /* 英字用フォント */
  font-weight: 900; /* 太字 */
  font-style: italic; /* 斜体 */
  text-transform: uppercase; /* 常時大文字 */
  color: #007acc; /* 青色 */
  font-size: 2.4rem; /* 24px相当 */
  line-height: 0.8;
  display: block; /* ブロック要素として表示（改行される） */
  margin-bottom: 6px; /* 下に5pxの余白 */
}

.common-title-center-gray .sub-text,
.common-title-left-gray .sub-text {
  font-family: "Roboto", sans-serif; /* 英字用フォント */
  font-weight: 900; /* 太字 */
  font-style: italic; /* 斜体 */
  text-transform: uppercase; /* 常時大文字 */
  color: #007acc; /* 青色 */
  font-size: 2.4rem; /* 24px相当 */
  line-height: 0.8;
  display: block; /* ブロック要素として表示（改行される） */
  margin-bottom: 6px; /* 下に5pxの余白 */
}

/*ナンバリングしているサブタイトル*/
.common-title-numbered {
  display: flex;
  align-items: center;
  gap: 5px;
}

.common-title-numbered img {
  width: 65px;
}
@media screen and (max-width: 768px) {
  .common-title-numbered img {
    width: 55px;
  }
}
@media screen and (max-width: 480px) {
  .common-title-numbered img {
    width: 45px;
  }
}

.common-title-numbered h3 {
  font-size: 3rem; /* 24px相当 */
  font-weight: 500; /* 太字 */
  color: #002244; /* 紺色 */
}
@media screen and (max-width: 1100px) {
  .common-title-numbered h3 {
    font-size: 2.8rem;
  }
}
@media screen and (max-width: 768px) {
  .common-title-numbered h3 {
    font-size: 2.5rem;
  }
}
@media screen and (max-width: 480px) {
  .common-title-numbered h3 {
    font-size: 2.2rem;
  }
}

/* グレーのサブテキスト（説明文など） */
.common-title-center .gray-text,
.common-title-left .gray-text {
  color: #686868; /* 中間のグレー */
  font-size: 2.3rem; /* 23px相当 */
  line-height: 1.1;
  margin-top: 30px;
  display: block; /* ブロック要素として表示 */
}

/* 左端にボーダーのあるタイトルのスタイル */
.common-title-border {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 3rem;
  color: #002244; /* 濃い青めグレー */
  font-weight: 500; /* 文字の太さ:細め */
  padding-left: 10px;
  border-left: 5px solid #007acc; /* 左側に青い線 */
}
@media screen and (max-width: 1100px) {
  .common-title-border {
    font-size: 2.8rem;
  }
}
@media screen and (max-width: 768px) {
  .common-title-border {
    font-size: 2.5rem;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
  }
}

@media screen and (max-width: 480px) {
  .common-title-border {
    font-size: 2.2rem;
  }
}

.common-title-border h3 {
  font-weight: 500;
}

.common-title-border .sub-title-border {
  font-size: 1.8rem; /* 18px相当 */
  color: #606060; /* グレー */
  font-weight: 500; /* 文字の太さ:細め */
}

.common-title-left .sub-text.white {
  font-weight: 700;
  color: #d3edfc;
}

.common-title-left.white h2 {
  font-weight: 700;
  color: white;
}

/* 画像と文字の横並びバージョン */
.common-list-imageandtext,
.common-list-imageandtext-reverse {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
}
/*メインタイトルの下に説明文があるスタイル */
.common-description-title-bottom {
  padding-top: 40px; /* 上に15pxの内側余白 */
  font-size: 1.8rem; /* 16px相当の文字サイズ */
  line-height: 1.8; /* 行の高さを文字サイズの1.8倍に設定（読みやすさ向上） */
}

/* 画像と文字の横並びバージョン(右左逆) */
.common-list-imageandtext-reverse {
  flex-direction: row-reverse; /* 右から左への配置 */
}

/* 共通コンテンツの青背景 */
.common-contents-outer {
  background-color: #f2f9ff; /* 背景画像 */
}

.common-contents-outer .maintenance-last-card {
  padding-bottom: 100px;
}
/* ========================================
   共通ボタンコンポーネント
   サイト内のボタンデザインを統一
   ======================================== */

/* ボタンを包む外側の要素 */
.button-wrapper {
  display: flex; /* フレックスボックスで配置 */
  flex-direction: column; /* 縦並びに配置 */
  /* 縦方向に並べる */
  align-items: center; /* 中央揃え */
  width: 100%; /* 横幅いっぱい */
  gap: 20px; /* ボタン間の間隔 */
}

/* 基本ボタンスタイル */
.common-button {
  display: flex; /* フレックスボックスで中身を配置 */
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: space-between; /* 左右に要素を配置 */
  max-width: 350px; /* 最大幅 */
  width: 100%; /* 親要素に合わせる */
  height: 70px; /* 高さ固定 */
  padding: 0 30px; /* 内側の余白 - 左右に30px */
  font-size: 2.4rem; /* 24px相当 */
  font-weight: bold; /* 太字 */
  color: white; /* 白色 */
  background: #ff7f32; /* オレンジ色 - グラデーションが効かない場合の保険 */
  background-image: linear-gradient(
    90deg,
    #ffa56f 0%,
    #ff7f32 100%
  ); /* グラデーション: 左から右へ薄いオレンジから濃いオレンジへ */
  transition: all 0.3s ease; /* アニメーション設定 - 0.3秒かけてゆっくり変化 */
  cursor: pointer; /* カーソル設定 - マウスを乗せた時に指マークに */
  border: 1px solid transparent; /* 枠線 - 通常時は透明 */
  position: relative; /* ポジション設定 - 子要素の位置指定の基準点にする */
  overflow: hidden; /* はみ出た部分を隠す */
}
/* ボタンバリエーション - 白背景バージョン */
.common-button.blue {
  min-width: 300px;
  min-height: 40px;
  background: white; /* 白背景 */
  color: #007acc; /* 青の文字 */
  border-color: #007acc; /* 青の枠線 */
  font-size: 1.7rem;
}

/* 白背景ボタンのアイコンはオレンジ色 */
.common-button.blue img {
  filter: brightness(0) saturate(100%) invert(29%) sepia(98%) saturate(1458%) hue-rotate(187deg) brightness(101%)
    contrast(102%); /* アイコンをオレンジ色に #007acc */
  width: 12px;
  transition: 0.2s all;
}

/* ボタンにマウスを乗せた時の効果 */
.common-button:hover {
  color: #ff7f32; /* 文字色をオレンジに */
  background: #fff; /* 背景を白に */
  background-image: none; /* グラデーションを解除 */
  border-color: #ff7f32; /* 枠線をオレンジに */
}

/* ボタン内のアイコン（矢印など）*/
.common-button img {
  filter: brightness(0) invert(1); /* filterで画像の色を変更 - 白色に変換 */
  transition: filter 0.3s ease; /* 色変化のアニメーション */
  width: 20px; /* 幅20px */
  height: auto; /* 縦横比を保つ */
}

/* ボタンにマウスを乗せた時のアイコン色変更 */
.common-button:hover img {
  filter: brightness(0) saturate(100%) invert(54%) sepia(68%) saturate(2130%) hue-rotate(1deg) brightness(101%)
    contrast(101%); /* アイコンをオレンジ色に #FF7F32 */
}

/* ボタンバリエーション - 白背景バージョン */
.common-button.white {
  min-width: 200px;
  min-height: 40px;
  background: white; /* 白背景 */
  color: #ff7f32; /* オレンジ色の文字 */
  border-color: #ff7f32; /* オレンジ色の枠線 */
}

/* 白背景ボタンのアイコンはオレンジ色 */
.common-button.white img {
  filter: brightness(0) saturate(100%) invert(54%) sepia(68%) saturate(2130%) hue-rotate(1deg) brightness(101%)
    contrast(101%); /* アイコンをオレンジ色に #FF7F32 */
  width: 12px;
}

/* 白背景ボタンにマウスを乗せた時 */
.common-button.white:hover {
  background: #ff7f32; /* 背景をオレンジに */
  color: white; /* 文字を白に */
}

/* 白背景ボタンのホバー時のアイコン */
.common-button.white:hover img {
  filter: brightness(0) invert(1); /* アイコンを白色に */
}

/* チェックマーク付きリスト一覧 */
.orange-check-list {
  padding: 0 10px;
}

/* チェックマーク付きリスト テキスト設定 */
.orange-check-list .orange-check-list-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 1.4rem;
  color: #606060;
}

/* チェックマーク付きリスト チェックマーク設定 */
.orange-check-list .orange-check-list-item:before {
  content: "";
  display: inline-block;
  background-image: url("../../images/common/orange-check.svg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 18px;
  height: 15px;
}

/* ========================================
   パンくずリスト
   ページの階層構造を表示
   ======================================== */
.breadcrumb {
  padding: 15px 0;
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.breadcrumb li {
  font-size: 1.7rem;
  color: #666;
}

.breadcrumb li:not(:last-child)::after {
  content: ">";
  margin: 0 10px;
  color: #999;
}

.breadcrumb a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s;
}

.breadcrumb a:hover {
  color: #ff7f32;
  text-decoration: underline;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px) {
  .breadcrumb {
    padding: 10px 0;
  }

  .breadcrumb li {
    font-size: 1.4rem;
  }

  .breadcrumb li:not(:last-child)::after {
    margin: 0 5px;
  }
}

/* ========================================
   レスポンシブ表示制御
   PC/スマホで表示を切り替える仕組み
   ======================================== */

/* PC専用表示クラス - PCやタブレットでのみ表示したい要素に使用 */
.pc-only {
  display: block !important; /* 表示する（769px以上の画面幅） */
}

/* スマホ専用表示クラス - スマートフォンでのみ表示したい要素に使用 */
.sp-only {
  display: none !important; /* 非表示にする（769px以上の画面幅） */
}

/* ========================================
   メディアクエリ（レスポンシブ対応）
   画面サイズに応じてスタイルを変更
   ======================================== */

/* タブレット以下（768px以下）の画面用スタイル */
@media screen and (max-width: 768px) {
  /* レスポンシブ表示制御 */
  .pc-only {
    display: none !important; /* PCのみの要素を非表示に */
  }

  .sp-only {
    display: block !important; /* スマホのみの要素を表示 */
  }

  /* ボタンサイズ調整 - 画面が小さいので少し小さく */
  .common-button {
    height: 60px; /* 高さを70px→60pxに */
  }

  /* タイトルサイズ調整 - 画面が小さいので少し小さく */
  .common-title-center h2,
  .common-title-left h2 {
    font-size: 3.5rem;
  }

  .common-title-center .sub-text,
  .common-title-left .sub-text {
    font-size: 2rem; /* 24px→20pxに */
  }

  .common-title-center .gray-text,
  .common-title-left .gray-text {
    font-size: 1.8rem; /* 23px→18pxに */
  }
  .common-list-imageandtext,
  .common-list-imageandtext-reverse {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
  }
}

/* スマートフォン（480px以下）の画面用スタイル */
@media screen and (max-width: 480px) {
  /* ボタンサイズをさらに調整 */
  .common-button {
    height: 50px; /* 高さを60px→50pxに */
    padding: 0 20px; /* 左右の余白を30px→20pxに */
  }

  /* タイトルサイズをさらに調整 */
  .common-title-center h2,
  .common-title-left h2 {
    font-size: 2.8rem;
  }

  .common-title-center .sub-text,
  .common-title-left .sub-text {
    font-size: 1.8rem; /* 20px→18pxに */
  }

  .common-title-center .gray-text,
  .common-title-left .gray-text {
    font-size: 1.7rem; /* 18px→16pxに */
  }
}

/* ========================================
   使用例
   ======================================== */
/*
【タイトルの使い方】
<div class="common-title-center">
    <span class="sub-text">PRODUCTS</span>
    <h2>製品紹介</h2>
    <span class="gray-text">最新の製品をご紹介します</span>
</div>

【ボタンの使い方】
<div class="button-wrapper">
    <button class="common-button">
        詳細を見る
        <img src="arrow.svg" alt="">
    </button>
</div>

【白いボタンの使い方】
<button class="common-button white">
    お問い合わせ
    <img src="arrow.svg" alt="">
</button>

【PC/スマホ表示切替の使い方】
<p class="pc-only">この文章はPCでのみ表示されます</p>
<p class="sp-only">この文章はスマホでのみ表示されます</p>
*/

/* ========================================
   共通パーツ
   ======================================== */
.content-width-pc {
  max-width: 1190px;
  width: 100%;
  margin: 0 auto;
  padding-left: 30px;
  padding-right: 30px;
}

@media screen and (max-width: 768px) {
  .content-width-pc {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.bg-blue-image {
  background-image: url("../../images/common/bg-image01.png");
}

.common-list-marker li:not(:last-child) {
  margin-bottom: 30px;
}

.common-list-marker h5 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 3rem;
  color: #002244;
  font-weight: 500;
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .common-list-marker h5 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    gap: 5px;
  }
}

@media screen and (max-width: 480px) {
  .common-list-marker h5 {
    font-size: 2.2rem;
  }
}

.common-list-marker h5::before {
  content: "";
  width: 25px;
  height: 25px;
  background-color: transparent;
}

@media screen and (max-width: 768px) {
  .common-list-marker h5::before {
    width: 20px;
    height: 20px;
  }
}

.common-list-marker.blue {
  position: relative;
}

.common-list-marker.blue.flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 10px;
}

.common-list-marker.blue.flex .sub-title-border {
  font-size: 1.8rem;
  color: #606060;
  font-weight: 500;
}

.common-list-marker.blue.flex h5 {
  margin-bottom: 0;
}

.common-list-marker.blue h5::before {
  background-color: #007acc;
}

.common-button-flex {
  display: flex;
  justify-content: center;
  padding-bottom: 60px;
}
.common-button-flex .button-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.common-button-flex .common-button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

/* ボタンバリエーション - 白背景バージョン */
.common-button-flex .common-button.blue {
  min-width: 230px;
  min-height: 40px;
  background: white; /* 白背景 */
  color: #007acc; /* 青の文字 */
  border-color: #007acc; /* 青の枠線 */
  font-size: 1.7rem;
}

/* 白背景ボタンのアイコンはオレンジ色 */
.common-button-flex .common-button.blue img {
  filter: brightness(0) saturate(100%) invert(29%) sepia(98%) saturate(1458%) hue-rotate(187deg) brightness(101%)
    contrast(102%); /* アイコンをオレンジ色に #007acc */
  width: 12px;
  transition: 0.2s all;
}

/* 白背景ボタンにマウスを乗せた時 */
.common-button-flex .common-button.blue:hover {
  background: #007acc; /* 背景をBlueに */
  color: white; /* 文字を白に */
}

/* 白背景ボタンのホバー時のアイコン */
.common-button-flex .common-button.blue:hover img {
  filter: brightness(0) invert(1); /* アイコンを白色に */
  transform: rotate(90deg);
}

/* 左にアイコン画像が入る場合のボタンのスタイル調整 */
.common-button-flex .common-button .btn-icon {
  width: 56px; /* ボタン内のアイコン画像の幅 */
  height: 56px; /* ボタン内のアイコン画像の高さ */
  flex: 0 0 56px; /* 縮まない固定幅 */
  object-fit: cover; /* 画像を切り抜き等で収める */
  margin-right: 8px; /* 右側に8pxの余白 */
  transition: none !important; /* ホバー時の回転・フィルターを無効化 */
  filter: none !important; /* ホバー時の回転・フィルターを無効化 */
  transform: none !important; /* ホバー時の回転・フィルターを無効化 */
}

/* ホバー時も回転・フィルターを適用しない */
.common-button-flex .common-button.blue:hover .btn-icon,
.common-button-flex .common-button.blue .btn-icon {
  filter: none !important; /* ホバー時の回転・フィルターを無効化 */
  transform: none !important;
  transition: none !important;
}

.about-image {
  position: relative;
}

.about-image::after {
  position: absolute;
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: url(../../images/maintenance/images-backgraund.png);
  background-size: contain;
  top: 37px;
  left: 35px;
  z-index: -1;
  background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
  .about-image::after {
    top: 12px;
    left: 9px;
  }
}