@charset "utf-8";

/* 全体コンテナに背景色を追加 */
.dl-section-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  padding: 30px; /* 上下の余白を少し広めに設定 */
  max-width: 100%;    /* 背景色を横いっぱいに広げるため */
  margin: 0 auto;
  background-color: #fce5cd; /* 指定の背景色 */
}

/* 各アイテムの枠 */
.dl-item {
  flex: 1;
  min-width: 300px; 
  max-width: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 画像エリアの高さ制御 */
.dl-image {
  width: 100%;
  height: 280px; 
  margin-bottom: 20px;
  display: flex;
  align-items: flex-end;
}

.dl-image img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  display: block;
}

/* ボタンの外枠 */
.button-box {
  width: 100%;
  text-align: center;
}

/* ボタン本体（文字サイズ指定なし） */
.info-company {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #fb6a00, #ffb000);
  color: #fff !important;
  text-decoration: none;
  font-weight: bold;
  padding: 10px;
  border-radius: 50px;
  position: relative;
  transition: opacity 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

/* 矢印アイコン */
.info-company::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
}

.info-company:hover {
  opacity: 0.8;
}


/*モーダル*/
/* --- 以前の共通CSSはそのまま維持 --- */

.modal-checkbox { display: none; }

.graph-module {
  max-width: 100%;
  text-align: center;
}
.thumb-label { display: block; cursor: pointer; }
.thumb-img { width: 100%; display: block; }
.expand-button { display: inline-block; margin-top: 15px; padding: 8px 30px; border: 1px solid #333; }

.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
  cursor: pointer;
}

/* --- 【重要】IDごとの表示切り替え命令 --- */

/* 1枚目用 */
#modal-trigger:checked ~ .modal-overlay { opacity: 1; visibility: visible; }

/* 2枚目用 */
#modal-trigger2:checked ~ .modal-overlay { opacity: 1; visibility: visible; }

/* --- 【追加】3枚目のスイッチ用 --- */
#modal-trigger3:checked ~ .modal-overlay {
  opacity: 1;
  visibility: visible;
}

/* --- コンテンツの装飾（共通） --- */
.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  cursor: default;
}

.full-img {
  max-width: 100%;
  max-height: 85vh;
  display: block;
  box-shadow: 0 5px 30px rgba(0,0,0,0.5);
}

.modal-close-button {
  position: absolute;
  top: -50px;
  right: 0;
  width: 50px; height: 50px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  line-height: 50px;
  pointer-events: none;
}
/*モーダル終わり*/



/* レスポンシブ：スマホ表示 */
@media screen and (max-width: 768px) {
  .dl-section-container {
    padding: 40px 20px;
    gap: 40px;
  }
  .dl-image {
    height: auto;
    max-height: 300px;
  }
  
}