@charset "utf-8";
/* -------------------------------------------------
   共通：二重ライン
--------------------------------------------------*/
.double-line-base {
  position: relative;
  width: 60%;
  margin: 30px auto;
  height: 30px;
}

.double-line-base::before,
.double-line-base::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  background-color: #A6ADF8;
}

.double-line-thin-top::before { top: 0; height: 3px; }
.double-line-thin-top::after  { bottom: 0; height: 10px; }
.double-line-thick-top::before { top: 0; height: 10px; }
.double-line-thick-top::after  { bottom: 0; height: 3px; }

/* -------------------------------------------------
   上段カード全体（背景透かし）
--------------------------------------------------*/
.cards {
  width: 60%;
  margin: 0 auto 40px auto;
  position: relative;
  padding: 20px;

  background-image: url("../image/densi.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 透かしは「.cards」内だけに限定 */
.cards::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.8);
  border-radius: 10px;
  z-index: 0;
  pointer-events: none;
}

.cards > * {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------
   上段3つのカラーカード
--------------------------------------------------*/
.top-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.card {
  padding: 18px;
  border-radius: 6px;
}

.title {
  padding: 6px 10px;
  font-weight: bold;
  margin-bottom: 12px;
  border-radius: 4px;
}

.content {
  display: flex;
  gap: 10px;
}
.text { flex: 1; line-height: 1.6; }
.pdf-icon { width: 60px; }

/* 色バリエーション */
.color1 { background: rgba(255,180,130,0.55); }
.color1 .title { background: rgba(255,120,70,0.75); }

.color2 { background: rgba(160,200,150,0.55); }
.color2 .title { background: rgba(100,160,90,0.75); }

.color3 { background: rgba(240,210,90,0.55); }
.color3 .title { background: rgba(220,180,60,0.75); }

.color4 { background: rgba(193,197,252,1.00); }
.color4 .title { background: rgba(144,151,255,1.00); }

.color5 { background: rgba(147,151,181,1.00)}
.color5 .title { background: rgba(93,102,164,1.00); }

.color6 { background: rgba(239,168,131,0.55)}
.color6 .title { background: rgba(243,138,83,0.55); }

/* -------------------------------------------------
   ▼ 動画エリア
--------------------------------------------------*/
.video-cards {
  width: 60%;
  margin: 0 auto 50px auto;
  position: relative;
  padding: 20px;

  background-image: url("../image/densi.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.video-cards::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.8);
  border-radius: 10px;
  pointer-events: none;
  z-index: 0;
}

.video-cards > * {
  position: relative;
  z-index: 1;
}

.video-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.video-item {
  background: rgba(255,255,255,0.85);
  padding: 12px;
  border-radius: 8px;
  text-align: center;
}

.video-item iframe {
  width: 100%;
  height: 250px;
  border: none;
}

.v-caption { margin-top: 8px; }

/* -------------------------------------------------
   📱 レスポンシブ
   ここを 1024px に上げて、早めに1列へ！
--------------------------------------------------*/
@media (max-width: 1024px) {

  .cards,
  .video-cards {
    width: 85%;
  }

  .top-cards {
    grid-template-columns: 1fr;  /* 上段1列 */
  }

  .video-area {
    grid-template-columns: 1fr; /* 動画も1列 */
  }

  .video-item iframe {
    height: 220px;
  }
}

@media (max-width: 600px) {
  .cards,
  .video-cards {
    width: 95%;
    padding: 15px;
  }
}
.waku_red {
  margin-left: 2em;
  margin-right: 2em;
  padding: 1em;
  margin-top: 20px;
  width: 60%;
  border: 1px solid #FD0A0E;
  background-color: #fff;
  box-shadow: 1.5px 1.5px 2px #696969;
}