/*  --------------- プレースホルダーの調整 --------------- */
 ::placeholder {
    font-size: 0.8em;
    /* color: blue !important; */
    font-style: italic;
 }

/* ------------------ お知らせ並び調整用 ------------------ */
.item1 {
    overflow: hidden;
    /* カーソルを合わせたときの浮き上がり効果 */
    transition: transform 0.2s;
}
.item1:hover {
    transform: translateY(-5px);
}
.item2 {
    float: left;
    padding: 10px 20px;
    text-align: left;
}

/* ------------------ お知らせ関連 ------------------ */
/* 「もっと見る」以外のリンクのスタイル */
.item2 a:not(.more-link) {
    color: black;
    text-decoration: none; /* 下線を削除 */
}
/* 「もっと見る」のスタイル */
.item2 a.more-link {
    color: blue;
    text-decoration: underline; /* 下線を追加 */
}
.item3 {
    display: flex; /* フレックスコンテナにする */
    justify-content: center; /* 横方向（main-axis）の中央寄せ */
    align-items: center; /* 縦方向（cross-axis）の中央寄せ */
    padding: 10px 20px;
    text-align: left;
}
/* お知らせshow */
.item4 {
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
  }
  @media screen and (max-width: 480px) {
    .item4 {
      margin-top: 40px;
    }
  }
  .item4 p {
    font-size: 20px; /* 例: 20pxは適宜変更してください */
    line-height: 2; /* 1.5は適宜変更してください */
}

/* リンクのデフォルトスタイルを上書き */
a {
    color: #333; /* 好きな色に変更 */
    text-decoration: none; /* 下線を削除 */
}
/* 「もっと見る」のスタイルを設定 */
a.more-link {
    color: blue;
    text-decoration: underline; /* 下線を追加 */
}
/* 「もっと見る」のスタイルを設定 */
.more-link a {
    color: blue;
    text-decoration: underline; /* 下線を追加 */
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-title {
    flex: 1;
}

/* ------------------ フッター ------------------ */
/* フッター https://www.naaavi.com/footer-design-sample/*/
.footer01 {
    color: #808080;
    background: #fff;
    text-align: center;
    padding: 30px;
}
.footer01 a {
    color: #808080;
    text-decoration: none;
}
.footer01 a:hover {
    text-decoration: underline;
}
.footer01 .menu {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.footer01 .menu li {
    margin: 0;
    padding: 0 20px;
    border-right: 1px #808080 solid;
}
.footer01 .menu li:last-child {
    border: none;
}
.footer01 .copyright {
    margin: 0;
    padding: 20px 0 0 0;
}

@media only screen and (max-width: 599px) {
.footer01 .menu {
    justify-content: flex-start;
}
.footer01 .menu li {
    width: 50%;
    box-sizing: border-box;
    border: none;
}
.footer01 .menu li:nth-child(odd) {
    border-right: 1px #808080 solid;
}
}

/* お知らせ一覧 https://komamen.net/news-coding/ */
.news {
  padding: 50px 0;
  /* background: #F8F8F8; */
}
.inner {
  width: 80%; /* 横幅ここで決まっている */
  background-color: #fff;
  margin: 0 auto;
  padding: 65px 0 100px;
}
.sub_ttl {
  font-size: 30px;
  text-align: center;
  margin-bottom: 40px;
}
@media (max-width: 767px) {
    .inner {
        width: 100%; /* スマートフォンの場合、親要素いっぱいに広げる */
    }
}
/* スマートフォンの場合、アイキャッチを上に表示 */
@media screen and (max-width: 768px) {
    .card-container {
        flex-direction: column;
    }
}

/* お知らせ一覧 記事 */
.news_list {
    margin: 0 5%;
}
.news_list_item {
    padding: 25px 0;
    border-bottom: 1px solid #9cb3a8;
}
.news_list_item:first-child {
    border-top: 1px solid #9cb3a8;
}
.news_list_item a {
   position: relative;
   display: flex;
   padding-right: 30px;
}
.news_list_date {
    font-size: 15px;
    display: flex;
    margin-right: 15px;
    align-items: center;
}
.news_item {
    background: #265939;
    color: #fff;
    border-radius: 14px;
    width: 10em;
    /* 親要素の文字サイズを基準 */
    text-align: center;
    margin-left: 20px;
}
.news_item:hover {
    color: #fff;
}
.news_item2 {
    background: #265939;
    color: #fff;
    border-radius: 14px;
    width: 10em;
    /* 親要素の文字サイズを基準 */
    text-align: center;
    margin-left: 0px;
}
.news_item2:hover {
    color: #fff;
}
.arrow {
    width: 25px;
    height: 1px;
    background: #265939;
    position: absolute;
    top: 50%;
    right: 0;
}
.arrow::after {
    content: "";
    display: block;
    width: 6px;
    height: 1px;
    background: #265939;
    transform: rotate(45deg);
    position: absolute;
    right: 0px;
    bottom: 2px;
}
/* お知らせ並び調整用 */
.item-card {
    overflow: hidden;
    /* カーソルを合わせたときの浮き上がり効果 */
    transition: transform 0.2s;
}
.item-card:hover {
    transform: translateY(-5px);
}
.item-card {
    width: 80%;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
    .item-card {
        width: 100%;
    }
}
@media screen and (max-width: 1024px) {
    .news_list_item a {
        display: block;
    }
}
@media screen and (max-width: 769px) {
    .news_list_item a  {
        font-size: 14px;
    }
}
@media screen and (max-width: 480px) {
    .arrow {
        display: none;
    }
    .news_list_item a {
        padding-right: 0;
    }
}

/* ------------------ お知らせ並び調整用 ------------------ */
.btn-large-text {
    font-size: 20px; /* 例として20pxに設定 */
}

/* 「交換依頼」ボタン */
.btn_05 {
    display: flex; /* 画面中央にボタン設置 */
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 30px;
    box-sizing: border-box;
    background: repeating-linear-gradient(45deg, #ffffff, #ffffff 3px, #e7e7e7 3px, #e7e7e7 30px);
    color: #333;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-decoration: none;
    position: relative;
    margin: 0 auto; /* 横方向の自動マージンを追加 */
    text-align: center; /* テキストを中央揃えにする */
    border: none; /* ボーダーを削除 */
    outline: none; /* クリック時のアウトラインを削除 */
}
.btn_05 span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30px;
    background: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    position: absolute;
    top: -6px;
    left: -6px;
    transition-duration: 0.2s;
}
.btn_05:hover span {
    left: -1px;
    top: -1px;
    color: #265939;
    font-weight: bold;
}
/* レスポンシブ幅以下の場合 */
@media screen and (max-width: 768px) {
    .btn_05 {
        /*width: 80px; /* ボタンの横幅を80pxに縮小 */
        width: 90%;
        font-size: 10px; /* 文字サイズを小さく設定 */
    }
}

/* 「もっと見る」ボタン */
.btn_06 {
    display: flex; /* 画面中央にボタン設置 */
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 50px;
    box-sizing: border-box;
    background: repeating-linear-gradient(45deg, #ffffff, #ffffff 3px, #e7e7e7 3px, #e7e7e7 30px);
    color: #333;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-decoration: none;
    position: relative;
    margin: 0 auto; /* 横方向の自動マージンを追加 */
    text-align: center; /* テキストを中央揃えにする */
    border: none; /* ボーダーを削除 */
    outline: none; /* クリック時のアウトラインを削除 */
}
.btn_06 span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    position: absolute;
    top: -6px;
    left: -6px;
    transition-duration: 0.2s;
}
.btn_06:hover span {
    left: -1px;
    top: -1px;
    color: #265939;
    font-weight: bold;
}
/* レスポンシブ幅以下の場合 */
@media screen and (max-width: 768px) {
    .btn_06 {
        /* width: 150px; */
        font-size: 14px;
    }
}
.btn_07 {
    display: inline-block;
    padding: 8px 16px;
    background-color: #e5e5ea; /* ボタンの背景色 */
    border: none;
    border-radius: 20px; /* 丸みを帯びたデザイン */
    color: #265939; /* 青色のテキスト */
    font-size: 14px; /* 文字の大きさ */
    font-weight: bold; /* 太字にする */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s; /* ホバーエフェクトのためのトランジション */
}
.btn_07:hover {
    background-color: #d0d0d5; /* ホバー時の背景色 */
}

/* 解約申請ボタン */
.btn_08 {
    background-color: #f7f4f4; /* ボタンの背景色を灰色に変更 */
    color: #707070; /* テキストの色を暗めの灰色に */
    padding: 10px 20px; /* パディング */
    border: none; /* 枠線なし */
    border-radius: 5px; /* 角の丸み */
    font-size: 16px; /* フォントサイズ */
    font-weight: normal; /* フォントの太さを通常に */
    cursor: pointer; /* カーソルを指の形に */
    box-shadow: none; /* 影を消す */
    transition: background-color 0.3s; /* 色の変化をなめらかに */
}
.btn_08:hover {
    background-color: #f7f4f4; /* ホバー時の背景色を少し暗く */
}

/* ボタンの上マージン */
.btn_08-margin {
    margin-top: 30px;
}
.btn_08-center-button {
    display: flex;
    justify-content: center; /* 水平方向の中央揃え */
}

/* https://excellent.ne.jp/homepage/2604/ */
.responsive_table01 {
    border-collapse: collapse;
    border: 1px solid rgba(0,0,0,.1);
    table-layout: fixed;
    width: 90%; /*横幅を80%に設定 */
    margin-left: auto;
    margin-right: auto;
  }
.responsive_table01 th {
    background: #265939;
    border: solid 1px #ccc;
    color: #fff;
    padding: 10px;
    font-weight: normal; /* 太字を解除 */
}
.responsive_table01 td {
    border: solid 1px #ccc;
    padding: 10px;
    white-space: normal;
}
/* レスポンシブスタイル */
@media screen and (max-width: 768px) {
    /* テーブル内のテキストの改行 */
    .responsive_table01 td,
    .responsive_table01 th {
        white-space: normal;
    }

    /* テーブル内のテキストの文字サイズ調整 */
    .responsive_table01 td,
    .responsive_table01 th {
        font-size: 14px; /* 必要に応じて調整 */
    }
}
/* ------------------ テーブル ------------------ */
.responsive_table02 {
    border-collapse: collapse;
    border: 1px solid rgba(0,0,0,.1);
    table-layout: fixed;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
.responsive_table02 th {
    background: #265939;
    border: solid 1px #ccc;
    color: #fff;
    padding: 10px;
    font-weight: normal; /* 太字を解除 */
    /* width: 130px; */
}
.responsive_table02 td {
    border: solid 1px #ccc;
    padding: 10px;
    white-space: normal;
}
/* レスポンシブスタイル */
@media screen and (max-width: 768px) {
    /* テーブル内のテキストの改行 */
    .responsive_table02 td,
    .responsive_table02 th {
        white-space: normal;
    }

    /* テーブル内のテキストの文字サイズ調整 */
    .responsive_table02 td,
    .responsive_table02 th {
        font-size: 14px; /* 必要に応じて調整 */
    }
    .scroll-table-container {
        overflow-x: auto;
    }
    .responsive_table03,
    .responsive_table02 {
        min-width: 600px; /* 必要に応じて変更 */
    }
}

/* ---------- テーブル：responsive_table03 ---------- */
.responsive_table03 {
    border-collapse: collapse;
    border: 1px solid rgba(0,0,0,.1);
    table-layout: fixed;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    border: none;
  }
.responsive_table03 th {
    border: solid 1px #ccc;
    padding: 10px;
    font-weight: normal; /* 太字を解除 */
    border: none;
}
.responsive_table03 td {
    border: solid 1px #ccc;
    padding: 10px;
    white-space: normal;
    border: none;
}
/* レスポンシブスタイル */
@media screen and (max-width: 768px) {
    /* テーブル内のテキストの改行 */
    .responsive_table03 td,
    .responsive_table03 th {
        white-space: normal;
        word-wrap: break-word; /* 長い単語でも折り返しを行う */
    }

    /* テーブル内のテキストの文字サイズ調整 */
    .responsive_table03 td,
    .responsive_table03 th {
        font-size: 14px; /* 必要に応じて調整 */
    }
}

/* ===============================
   ご契約詳細テーブル（スマホ縦長防止）
   =============================== */
@media screen and (max-width: 768px) {

    .contract-table th,
    .contract-table td {
        white-space: nowrap;   /* ★1文字改行防止 */
        word-break: keep-all;  /* ★日本語の強制改行防止 */
        vertical-align: middle;
    }

}

/* ---------- テーブル：responsive_table04 ---------- */
.responsive_table04 {
    border-collapse: collapse;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
.responsive_table04 th {
    color: #000;
    padding: 10px;
    font-weight: normal; /* 太字を解除 */
    /* width: 130px; */
}
.responsive_table04 td {
    padding: 10px;
    white-space: normal;
}
/* レスポンシブスタイル */
@media screen and (max-width: 768px) {
    /* テーブル内のテキストの改行 */
    .responsive_table04 td,
    .responsive_table04 th {
        white-space: normal;
    }

    /* テーブル内のテキストの文字サイズ調整 */
    .responsive_table04 td,
    .responsive_table04 th {
        font-size: 14px; /* 必要に応じて調整 */
    }
    /* .scroll-table-container {
        overflow-x: auto;
    } */
}

/* ------------------ スワイパー ------------------ */
.swiper {
    width: 800px;
    height: 500px;
}
.swiper-slide a > div {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
    min-height: 50px; /* ★ タイトル表示エリアの高さを確保 */
    line-height: 1.5; /* ★ 行の高さを調整 */
}

@media screen and (max-width: 768px) {
    /* スマートフォン用のCSSルールをここに追加 */
    .swiper {
        width: 400px; /* 幅を100%に設定し、スマートフォン幅に合わせる */
        height: 300px; /* 高さを自動調整 */
    }
    .swiper-slide a > div {
        font-size: 14px;
        min-height: 60px; /* ★ スマホでは少し高めに */
    }
}


/* ------------------ 見出し ------------------ */
h2 span {
    border-bottom: 2px solid #585757;
}

/* ------------------ アコーディオン ------------------ */
.details-summary {
	cursor: pointer;
	transition: 0.2s;
	padding: 6px;
	border-radius: 6px;
	font-size: 17px;
	/* ホバー時のスタイル */
	&:hover {
		cursor: pointer;
		background-color: #bee1de;
	}
	/* タブフォーカス時のスタイル */
	&:focus-visible {
		outline: dashed #00a5a0;
	}
}

/* ------------------ お問い合わせ ------------------ */
/* https://form.run/media/contents/form-creation-tools/contact-form_design/*/
.Form {
    /* margin-top: 80px; */
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
  }
  @media screen and (max-width: 480px) {
    .Form {
      margin-top: 40px;
    }
  }
  .Form-Item {
    border-top: 1px solid #ddd;
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    max-width: 410px;
    margin: 0 auto;
  }
  @media screen and (max-width: 480px) {
    .Form-Item {
      padding-left: 14px;
      padding-right: 14px;
      padding-top: 16px;
      padding-bottom: 16px;
      flex-wrap: wrap;
    }
  }
  .Form-Item:nth-child(5) {
    border-bottom: 1px solid #ddd;
  }
  .Form-Item-Label {
    width: 100%;
    max-width: 248px;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label {
      max-width: inherit;
      display: flex;
      align-items: center;
      font-size: 15px;
    }
  }
  .Form-Item-Label.isMsg {
    margin-top: 8px;
    margin-bottom: auto;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label.isMsg {
      margin-top: 0;
    }
  }
  .Form-Item-Label-Required {
    border-radius: 6px;
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 48px;
    display: inline-block;
    text-align: center;
    background: #5bc8ac;
    color: #fff;
    font-size: 14px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Label-Required {
      border-radius: 4px;
      padding-top: 4px;
      padding-bottom: 4px;
      width: 32px;
      font-size: 10px;
    }
  }
  .Form-Item-Input {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.5em;
    height: 48px;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
  }
  @media screen and (max-width: 480px) {
    .Form-Item-Input {
      margin-left: 0;
      margin-top: 18px;
      height: 40px;
      flex: inherit;
      font-size: 15px;
    }
  }
.Form-Item-Textarea {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 0;
    margin-top: 18px;
    padding: 0.5em;
    /* height: 216px; */
    height: auto; /* 高さを可変にするためにautoに設定 */
    width: 100%;
    max-width: 100%;
    background: #eaedf2;
    font-size: 18px;
}

@media screen and (max-width: 480px) {
    .Form-Item-Textarea {
        margin-top: 18px;
        margin-left: 0;
        height: auto;
        /* height: 200px; */
        font-size: 15px;
    }
}

/* ------------- プレースホルダーの文字色 ------------- */
::placeholder {
    color: #b9b7b7; /* 例: グレーの文字色 */
}

/* ------------- ページネーションのアクティブなページのスタイル ------------- */
.pagination .page-item.active .page-link {
    background-color: #265939;
    border-color: #265939;
}
/* ページネーションのリンクのスタイル */
.pagination .page-link {
    color: #265939;
}

/* ------------- お問い合わせ誘導 ------------- */
.container_contact{
    border: none;
  }
  .block1{
    background-color: #265939;
    padding: 20px;
  }
 .contact-page .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.item-page .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.btn_contact:hover {
    background-color: #34704a !important;
    color: white !important;
}
/* スマホ余白修正 */
@media screen and (max-width: 768px) {
    .contact-page {
        margin-bottom: 20px !important;
        padding-bottom: 10px !important;
    }

    .contact-page .card-body {
        height: auto !important;
        padding-bottom: 10px;
    }

    .inner {
        padding-bottom: 20px !important;
    }

    /* content-wrapperの高さを完全に解除 */
    .content-wrapper {
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow: hidden;
    }
}

/* ------------- 導線ボタン ------------- */
#nav {
    list-style: none;
    padding: 0;
    margin: 0;
}
#nav li {
    width: 48%; /* メニューアイテムの幅を調整 */
    text-align: center;
    background-color: #fff;
    display: inline-block;
    margin: 10px 1%; /* メニューアイテムの間隔を調整 */
    float: left; /* メニューアイテムを左寄せにする */
    box-sizing: border-box; /* ボックスモデルを適用して幅を調整 */
    border: 1px solid #C0C0C0; /* 枠線を追加 */
    padding: 40px; /* パディングを追加して高さを調整 */
    font-size: 20px; /* 文字のサイズを大きくする */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    border-radius: 10px; /* 角を丸くする */
}
#nav li a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    display: block; /* リンクをブロック要素として扱い、全体をクリック可能にする */
}
#nav li:hover {
    background-color: #ecfaf1; /* ホバー時の背景色を設定 */
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
#nav:after {
    content: "";
    clear: both;
    display: table;
}
/* レスポンシブ対応（縦並びにする） */
@media (max-width: 767px) {
    #nav li {
        width: 100%; /* メニューアイテムの幅を100%に設定 */
        display: block; /* メニューアイテムをブロック要素に変更 */
        margin: 10px 0; /* メニューアイテムの間隔を調整 */
    }
}

/* お知らせ 画像とテキストの並び */
.card-container {
    display: flex;
    align-items: center; /* 縦方向（高さ）の中央揃え */
}
/* 画像 */
.card-container .card-img {
    margin-right: 20px; /* 画像とテキストの間隔を調整するためのマージン */
}
/* 画像を中央に配置 */
.press_imagefile {
    display: block; /* ブロック要素として扱う */
    margin: 0 auto; /* 上下のマージンを0、左右のマージンを自動調整（中央揃え） */
    max-width: 100%; /* 画像の最大幅を親要素の100%に制限 */
    height: auto; /* 高さを自動調整 */
}
/* スマートフォン用スタイル */
@media (max-width: 767px) {
    .press_imagefile {
        max-width: 100%;
        height: auto;
    }
    .swiper {
        width: 100%;
    }
}
/* PC用スタイル */
@media (min-width: 768px) {
    .press_imagefile {
        width: 680px;
        height: auto;
    }
}

/* ------------- バッジ ------------- */
.badge-outline-gray {
    border: 1px solid #808080 !important; /* ここで枠線の色と太さを指定 */
}
.small-badge {
    font-size: 0.8em !important;
    padding: 0.2em 0.4em !important;
}
.badge-purple {
    background-color: #6f42c1;
    color: #fff;
}
/* ------------- 文字 -------------- */
.red-text {
    color: red;
}
.green-text {
    color: #265939;
}
/* 中央揃え */
.centered-text {
    text-align: center;
}
/* ------------- 注意書き -------------- */
.info-box-content {
    word-wrap: break-word !important;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* ------------- パスワード変更（目のアイコン関係） -------------- */
.position-relative {
    position: relative;
}
.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
/* ------------- バナー広告 -------------- */
.banner-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner-container a {
    margin: 0 10px; /* 左右に10pxのマージンを追加 */
}
@media (max-width: 768px) {
    .banner-container {
        flex-direction: column;
        align-items: center;
        max-width: 100%;
    }
    .banner-container img {
        width: 100%; /* スマホ表示では画像の幅を100%に */
        height: auto; /* 画像の高さを自動調整 */
    }
}
/* ------------- ツイッターからXのアイコンに変更 -------------- */
.fa-twitter:before {
    content: '𝕏';
    font-family: unset;
    font-weight: bold;
    color: black; /* 文字色を黒に設定 */
}
/* ------------- 契約情報 「搬入先情報」テーブルを横スクロール -------------- */
.delivery-table-wrapper {
    overflow-x: auto;
    width: 100%;
}
.delivery-table-wrapper table {
    min-width: 800px; /* 横スクロール発生の目安、必要に応じて調整 */
}
/* ------------- 契約情報 「契約詳細」テーブルを横スクロール -------------- */
.keiyakushosai {
    overflow-x: auto;
    width: 100%;
    display: block;
    -webkit-overflow-scrolling: touch;
}
.keiyakushosai table {
    min-width: 100%;
    width: max-content;
    table-layout: auto !important; /* ← これを追加 */
}
/* ------------- 契約情報 カードの横幅調整 -------------- */
.keiyaku-card {
    width: 80%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .keiyaku-card {
        width: 100%;
    }
}
/* ------------- 契約情報 テーブルの背景色 -------------- */
.gray-backcolor {
    background-color: #f2f2f2;
}

/* ------------- 契約情報 カード枠線色 -------------- */
.keiyaku-card {
    border: 2px solid #265939; /* 枠線の太さと色（ここでは緑） */
    border-radius: 8px;        /* 角を丸くする場合 */
}

/* -------- お知らせ一覧：カード型（新デザイン用） -------- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 24px;
    gap: 40px;
    padding: 0 64px;
}

@media screen and (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

.news-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s;
}

.news-card:hover {
    transform: translateY(-4px);
}

/* 画像エリア */
.news-card-image {
    width: 100%;
    height: 280px;
    background-color: #eef2f5; /* 画像なし用 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

/* 本文 */
.news-card-body {
    padding: 16px;
}

.news-card-meta {
    font-size: 20px;
    color: #666;
    margin-bottom: 8px;
}

.news-card-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 13px;
    background: #e5e7eb;
    border-radius: 4px;
}

.news-card-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}