@charset "utf-8";
/* CSS Document */
.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-5 {
  font-size: 1.25rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

.fs-5 {
  color: var(--primary-color);
}

.head-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 0.8rem 0.8rem 0 0;
  object-position: 50% 50%;
}

.sub-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 0 0 0.8rem 0.8rem;
  object-position: 50% 50%;
}

.webdesign-h3 {
  color: #333;
  padding: 15px 8px;
  display: block;
  border-bottom: 6px solid #e3e3e3;
  position: relative;
}

.webdesign-h3::before {
  content: "";
  background-color: var(--primary-color);
  width: 40px;
  height: 6px;
  position: absolute;
  bottom: -6px;
  left: 0;
}

.bi.bi-check2-circle.pr-1 {
  color: var(--primary-color);
}

.webdesign-grid {
  display: grid;
  grid-template-columns: 4fr 3fr 1fr 1fr;
  grid-template-rows: minmax(120px, auto) auto;
  gap: 1.8rem;
}

.webdesign-img {
  grid-column: 1;
  grid-row: 1 / -1;
  height: 0;
  min-height: 100%;
  width: 100%;
  object-fit: cover;
}

.webdesign-grid p {
  grid-column: 2 / -1;
  grid-row: 1;
}

.webdesign-grid div {
  grid-column: 3 / -1;
  grid-row: 2 / -1;
}

@media (max-width: 767px) {
  .webdesign-grid {
    grid-template-rows: auto auto auto;
  }

  .webdesign-img {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 100%;
  }

  .webdesign-grid p {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .webdesign-grid div {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

.back {
  width: 25%;
}

@media (max-width: 767px) {
  .back {
    width: 100%;
  }
}

.frown span {
  color: #0a61bc;
}

.smile span {
  color: rgba(231, 71, 116, 1);
}

.ex-button {
  width: 50%;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .ex-button {
    width: 100%;
  }
}

.ex-button a {
  display: grid;
  text-align: center;
  grid-auto-flow: row;
  grid-row-gap: 0.3em;
  justify-items: center;
  padding: 1em;
  background-color: #f75940;
  color: #fff;
  text-decoration: none;
}

.download-form {
  text-align: center;
  padding: 1em;
  background-color: #f75940;
  color: #fff;
  text-decoration: none;
  border: 1px solid #f75940;
}

.ex-button:hover,
.download-form:hover {
  color: #fff;
  background-color: #f5391b;
  border-color: #f52e0f;
}

.hr {
  padding-top: 1.5rem;
  border-top: 2px solid #e3e3e3;
}

.orange {
  font-weight: bold;
  background: linear-gradient(transparent 80%, #ffcc00 20%);
}

.green {
  font-weight: bold;
  background: linear-gradient(transparent 80%, var(--primary-color) 20%);
}

.use-system {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.use-system-item {
  padding: 0.1rem 0.5rem;
  border-radius: 0.25rem;
  margin-bottom: 0;
  font-size: 0.8rem;
}

.use-system-whatsnew {
  background-color: #f7b9c6;
  color: #212529;
}

.use-system-events {
  background-color: #bfe2cf;
  color: #212529;
}

.use-system-inquiry {
  background-color: #c8c4e1;
  color: #212529;
}

.use-system-other-01 {
  background-color: #d5e6f4;
  color: #212529;
}

.use-system-other-02 {
  background-color: #ffe562;
  color: #212529;
}

.use-system-other-03 {
  background-color: #efcfc0;
  color: #212529;
}

.use-system-other-04 {
  background-color: #e8c6d9;
  color: #212529;
}

.use-system-other-05 {
  background-color: #d5e6f4;
  color: #212529;
}

.use-system-other-06 {
  background-color: #bfe2cf;
  color: #212529;
}

/*=================================
スライダーのためのcss
===================================*/

/* 画像の基本スタイル */
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* 全体を囲むコンテナ */
.slider-container {
  display: flex;
  width: 90%;
  margin: auto;
  padding: 10px;
  border: 2px solid #ccc;
}

/* メイン画像（左側） */
.gallery {
  flex: 3;
  min-width: 0;
  /* align-self: stretch; を削除またはコメントアウト */
}

/* ↓↓↓↓ 高さ100%の指定を削除します ↓↓↓↓ */
.gallery .slick-list,
.gallery .slick-track,
.gallery .slick-slide,
.gallery .slick-slide > div {
  /* height: 100%; を削除またはコメントアウト */
}

.gallery .slick-slide img {
  width: 100%;
  /* height: 100%; を削除 */
  /* object-fit: cover; を削除 */
}
/* ↑↑↑↑ ここまでが主な変更点です ↑↑↑↑ */

/* サムネイル（右側） */
.choice-btn {
  flex: 1;
  min-width: 0;
  margin: 0 0 0 20px;
  padding: 0;
  list-style: none; /* リストの黒点を削除 */
}

/* サムネイルの li 要素 */
.choice-btn li {
  cursor: pointer;
  margin-bottom: 10px; /* サムネイル間の余白 */
  border: 3px solid transparent; /* 枠線分のスペースを確保 */
   transition: all 0.3s ease; /* アニメーションを滑らかに */
}

/* サムネイル内の画像 */
.choice-btn li img {
  opacity: 0.4; /* 非選択時は半透明にする */
  filter: grayscale(80%); /* 非選択時は少しモノクロにする */
}

/* 【選択中】のサムネイル（currentクラスが付いたli） */
.choice-btn li.current {
  border-color: #007bff; /* 選択中は青い枠線を表示 */
  transform: scale(1.08); /* 選択中は少しだけ拡大 */
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4); /* 選択中は影を付ける */
}

/* 【選択中】のサムネイルの画像 */
.choice-btn li.current img {
  opacity: 1; /* 透明度を100%に戻す */
  filter: grayscale(0%); /* モノクロを解除 */
}

戻る、次へ矢印の位置 */ .slick-prev,
.slick-next {
  position: absolute; /*絶対配置にする*/
  z-index: 3;
  top: 42%;
  cursor: pointer; /*マウスカーソルを指マークに*/
  outline: none; /*クリックをしたら出てくる枠線を消す*/
  border-top: 2px solid #ccc; /*矢印の色*/
  border-right: 2px solid #ccc; /*矢印の色*/
  height: 25px;
  width: 25px;
}
.slick-prev {
  /*戻る矢印の位置と形状*/
  left: 2.5%;
  transform: rotate(-135deg);
}
.slick-next {
  /*次へ矢印の位置と形状*/
  right: 2.5%;
  transform: rotate(45deg);
}

/*  テーブル01▼ */
.webdesign-table01-container {
  overflow-x: auto;
}

.webdesign-table01 {
  display: grid;
  grid-template-columns: 1.5fr 4fr 0.8fr 1fr 1fr;
  border: 1px solid #bfbfbf;
  min-width: 600px;
}

.webdesign-table01 p {
  margin-bottom: 0;
  padding: 0.5rem 1rem;
}

.naiyo {
  grid-column: 1 / 3;
  grid-row: 1;
  background-color: var(--primary-color);
  color: #fff;
  border-right: 1px solid #fff;
}

.suryo {
  grid-column: 3;
  grid-row: 1;
  background-color: var(--primary-color);
  color: #fff;
  border-right: 1px solid #fff;
}

.tanka {
  grid-column: 4;
  grid-row: 1;
  background-color: var(--primary-color);
  color: #fff;
  border-right: 1px solid #fff;
}

.kingaku {
  grid-column: 5;
  grid-row: 1;
  background-color: var(--primary-color);
  color: #fff;
}

.zentai_plan {
  grid-column: 1 / 3;
  grid-row: 2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.zentai_suryo {
  grid-column: 3;
  grid-row: 2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.zentai_tanka {
  grid-column: 4;
  grid-row: 2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.zentai_kingaku {
  grid-column: 5;
  grid-row: 2;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top {
  grid-column: 1;
  grid-row: 3 / 5;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.top_design {
  grid-column: 2;
  grid-row: 3;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.top_suryo {
  grid-column: 3;
  grid-row: 3;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top_tanka {
  grid-column: 4;
  grid-row: 3;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top_kingaku {
  grid-column: 5;
  grid-row: 3;
  background-color: #ccebd1;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top_coding {
  grid-column: 2;
  grid-row: 4;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.top_coding_suryo {
  grid-column: 3;
  grid-row: 4;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top_coding_tanka {
  grid-column: 4;
  grid-row: 4;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top_coding_kingaku {
  grid-column: 5;
  grid-row: 4;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso {
  grid-column: 1;
  grid-row: 5 / 7;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.kaso_design {
  grid-column: 2;
  grid-row: 5;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.kaso_suryo {
  grid-column: 3;
  grid-row: 5;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso_tanka {
  grid-column: 4;
  grid-row: 5;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso_kingaku {
  grid-column: 5;
  grid-row: 5;
  background-color: #ccebd1;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso_coding {
  grid-column: 2;
  grid-row: 6;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.kaso_coding_suryo {
  grid-column: 3;
  grid-row: 6;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso_coding_tanka {
  grid-column: 4;
  grid-row: 6;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso_coding_kingaku {
  grid-column: 5;
  grid-row: 6;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.page {
  grid-column: 1 / 3;
  grid-row: 7;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.page_suryo {
  grid-column: 3;
  grid-row: 7;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.page_tanka {
  grid-column: 4;
  grid-row: 7;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.page_kingaku {
  grid-column: 5;
  grid-row: 7;
  background-color: #ccebd1;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.contact {
  grid-column: 1 / 3;
  grid-row: 8;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.contact_suryo {
  grid-column: 3;
  grid-row: 8;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.contact_tanka {
  grid-column: 4;
  grid-row: 8;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.contact_kingaku {
  grid-column: 5;
  grid-row: 8;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.news {
  grid-column: 1 / 3;
  grid-row: 9;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.news_suryo {
  grid-column: 3;
  grid-row: 9;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.news_tanka {
  grid-column: 4;
  grid-row: 9;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.news_kingaku {
  grid-column: 5;
  grid-row: 9;
  background-color: #ccebd1;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.event {
  grid-column: 1 / 3;
  grid-row: 10;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.event_suryo {
  grid-column: 3;
  grid-row: 10;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.event_tanka {
  grid-column: 4;
  grid-row: 10;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.event_kingaku {
  grid-column: 5;
  grid-row: 10;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.sum {
  grid-column: 1 / 5;
  grid-row: 11;
  background-color: #ccebd1;
  border-right: 1px solid #bfbfbf;
  text-align: right;
}

.sum_kingaku {
  grid-column: 5;
  grid-row: 11;
  background-color: #ccebd1;
  text-align: right;
}
/*  テーブル01▲ */

/*  テーブル02▼ */
.webdesign-table02-container {
  overflow-x: auto;
}

.webdesign-table02 {
  display: grid;
  grid-template-columns: 1.5fr 3fr 1fr 1.4fr 1.4fr;
  border: 1px solid #bfbfbf;
  min-width: 600px;
}

.webdesign-table02 p {
  margin-bottom: 0;
  padding: 0.5rem 1rem;
}

.naiyo2 {
  grid-column: 1 / 3;
  grid-row: 1;
  background-color: #0a61bc;
  color: #fff;
  border-right: 1px solid #fff;
}

.suryo2 {
  grid-column: 3;
  grid-row: 1;
  background-color: #0a61bc;
  color: #fff;
  border-right: 1px solid #fff;
}

.tanka2 {
  grid-column: 4;
  grid-row: 1;
  background-color: #0a61bc;
  color: #fff;
  border-right: 1px solid #fff;
}

.kingaku2 {
  grid-column: 5;
  grid-row: 1;
  background-color: #0a61bc;
  color: #fff;
}

.zentai_plan2 {
  grid-column: 1 / 3;
  grid-row: 2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.zentai_suryo2 {
  grid-column: 3;
  grid-row: 2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.zentai_tanka2 {
  grid-column: 4;
  grid-row: 2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.zentai_kingaku2 {
  grid-column: 5;
  grid-row: 2;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top2 {
  grid-column: 1;
  grid-row: 3 / 5;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.top_design2 {
  grid-column: 2;
  grid-row: 3;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.top_suryo2 {
  grid-column: 3;
  grid-row: 3;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top_tanka2 {
  grid-column: 4;
  grid-row: 3;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top_kingaku2 {
  grid-column: 5;
  grid-row: 3;
  background-color: #bcd6f2;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top_coding2 {
  grid-column: 2;
  grid-row: 4;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.top_coding_suryo2 {
  grid-column: 3;
  grid-row: 4;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top_coding_tanka2 {
  grid-column: 4;
  grid-row: 4;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.top_coding_kingaku2 {
  grid-column: 5;
  grid-row: 4;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso2 {
  grid-column: 1;
  grid-row: 5 / 7;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.kaso_design2 {
  grid-column: 2;
  grid-row: 5;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.kaso_suryo2 {
  grid-column: 3;
  grid-row: 5;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso_tanka2 {
  grid-column: 4;
  grid-row: 5;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso_kingaku2 {
  grid-column: 5;
  grid-row: 5;
  background-color: #bcd6f2;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso_coding2 {
  grid-column: 2;
  grid-row: 6;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.kaso_coding_suryo2 {
  grid-column: 3;
  grid-row: 6;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso_coding_tanka2 {
  grid-column: 4;
  grid-row: 6;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.kaso_coding_kingaku2 {
  grid-column: 5;
  grid-row: 6;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.page2 {
  grid-column: 1 / 3;
  grid-row: 7;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.page_suryo2 {
  grid-column: 3;
  grid-row: 7;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.page_tanka2 {
  grid-column: 4;
  grid-row: 7;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.page_kingaku2 {
  grid-column: 5;
  grid-row: 7;
  background-color: #bcd6f2;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.a11y2 {
  grid-column: 1;
  grid-row: 8 / 10;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.a11y_text_size2 {
  grid-column: 2;
  grid-row: 8;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.a11y_suryo2 {
  grid-column: 3;
  grid-row: 8;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.a11y_tanka2 {
  grid-column: 4;
  grid-row: 8;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.a11y_kingaku2 {
  grid-column: 5;
  grid-row: 8;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.bg_color2 {
  grid-column: 2;
  grid-row: 9;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.bg_color_suryo2 {
  grid-column: 3;
  grid-row: 9;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.bg_color_tanka2 {
  grid-column: 4;
  grid-row: 9;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.bg_color_kingaku2 {
  grid-column: 5;
  grid-row: 9;
  background-color: #bcd6f2;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.contact2 {
  grid-column: 1 / 3;
  grid-row: 10;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.contact_suryo2 {
  grid-column: 3;
  grid-row: 10;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.contact_tanka2 {
  grid-column: 4;
  grid-row: 10;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.contact_kingaku2 {
  grid-column: 5;
  grid-row: 10;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.news2 {
  grid-column: 1 / 3;
  grid-row: 11;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.news_suryo2 {
  grid-column: 3;
  grid-row: 11;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.news_tanka2 {
  grid-column: 4;
  grid-row: 11;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.news_kingaku2 {
  grid-column: 5;
  grid-row: 11;
  background-color: #bcd6f2;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.event2 {
  grid-column: 1 / 3;
  grid-row: 12;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
}

.event_suryo2 {
  grid-column: 3;
  grid-row: 12;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.event_tanka2 {
  grid-column: 4;
  grid-row: 12;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.event_kingaku2 {
  grid-column: 5;
  grid-row: 12;
  border-bottom: 1px solid #bfbfbf;
  text-align: right;
}

.sum2 {
  grid-column: 1 / 5;
  grid-row: 13;
  background-color: #bcd6f2;
  border-right: 1px solid #bfbfbf;
  text-align: right;
}

.sum_kingaku2 {
  grid-column: 5;
  grid-row: 13;
  background-color: #bcd6f2;
  text-align: right;
}
/*  テーブル02▲ */

.dotted-outline {
  border: 1px dashed var(--primary-color);
  padding: 1.2rem;
}

.two-column-layout {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  gap: 1.6rem;
  margin-bottom: 1rem;
}

@media screen and (max-width: 767px) {
  .two-column-layout {
    grid-auto-flow: row;
    grid-template-columns: auto;
  }
}

.vertical-middle {
  vertical-align: middle !important;
}

/* =================================================
  767px以下の画面サイズで適用されるスタイル（スマホ用）
================================================= */
@media screen and (max-width: 767px) {
  /* コンテナの並び方を「縦」に変更 */
  .slider-container {
    /* display: flex; はPC用の指定が引き継がれる */
    flex-direction: column; /* ← これでFlexboxが縦並びになります */
  }

  /* サムネイルエリアの余白を調整 */
  .choice-btn {
    margin-left: 0; /* ← PC用の左余白をリセット */
    margin-top: 20px; /* ← メイン画像との間に上の余白を追加 */
    display: flex;
    flex-direction: row;
  }

  .choice-btn li {
    width: 100%;
    margin: 0;
  }

  .choice-btn li img {
    width: 100%;
  }
}