.section {
  padding: 15px 2% 40px 2%;
  margin-bottom: 4rem;
}

main {
  padding-left: 2%;
  padding-right: 2%;
}

/* 固定ヘッダーに重ならないようアンカー位置を調整 */
.section[id] {
  scroll-margin-top: 70px;   /* ヘッダーの高さに合わせる */
}



/* ✅ スマホ表示時に余白を小さくする */
@media (max-width: 768px) {
  .section {
    padding: 10px 2% 20px 2%;
    margin-bottom: 2rem;
  }

  main {
    padding-left: 2%;
    padding-right: 2%;
  }
    }



.link-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1.2em;
  grid-template-columns: repeat(2, 1fr);
}

.link-panel {
  text-decoration: none;
  color: inherit;
  background: #ffffff79;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0.2em 0.3em 2px rgba(130, 145, 212, 0.39);
  transition: transform 0.2s, box-shadow 0.2s;
}
  .link-panel .panel-note {
    font-size: clamp(0.8rem, 3vw, 0.85rem);
    margin-top: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1rem;

  }

.link-panel img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* note埋め込み用iframeのサイズ調整 */
.link-panel iframe {
  width: 100%;
  border: none;
}

.link-panel .panel-title {
  font-size: 17px;
  font-weight: 700;
  display: block;
  text-align: left;
}

/* small category label */
.link-panel .panel-type {
  display: inline-block;
  background-color: rgb(99, 127, 248);
  color: #fff;
  font-weight: 700;
  font-size: 10px;
  padding: 0.4rem 0.8em;
  margin-bottom: 0.7em;
  border-radius: 0;
  text-align: left;
}

.link-panel .panel-source {
  font-size: 12px;
  text-align: left;
  color: #4c5df7;
  font-weight: 700;
}

.link-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 8px rgba(3, 0, 190, 0.342);
}

.link-panel.note-panel .panel-title,
.link-panel.note-panel .panel-note,
.link-panel.note-panel .panel-source {
  text-align: left;
}


    .link-panel .panel-text {/* パネル説明 */
    padding: 1rem 1.5rem;
  }

  .link-panel.note-panel .panel-text {/* パネル説明 */
    width: 100%;
    box-sizing: border-box;
  }


@media (max-width: 768px) {

  /* スマホ表示では1列に並べサムネイルを左、テキストを右に配置 */
  .link-panels {
    grid-template-columns: 1fr;
  }

  .link-panel {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 0.2rem;
    margin-top: 0.2rem;
    width: 100%;
  }





  .link-panel img,
  .link-panel iframe {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 0.25rem 0;
    overflow: hidden;
  }




  .link-panel .panel-title,
  .link-panel .panel-tit-sub,
  .link-panel .panel-note,
  .link-panel .panel-source {
    text-align: left;
  }

  .link-panel .panel-title {
    font-size: clamp(0.8rem, 3.2vw, 1rem);
    line-height: 1.1;     /* adjust to desired tightness */
    margin-bottom: 1.2rem;
    display: block;
  }



  .link-panel .panel-note {
    font-size: clamp(0.7rem, 3vw, 0.8rem);
    margin-top: 0.7rem;
    line-height: 1.4;
    margin-bottom: 1rem;

  }

  .link-panel .panel-source {
    font-size: clamp(0.7rem, 2.5vw, 0.8rem);

  }

  .link-panel.note-panel {
    flex-direction: column;
    align-items: flex-start;
  }

  .link-panel.note-panel img,
  .link-panel.note-panel iframe {
    width: 100% !important;
    max-width: none;
    margin-right: 0;
    height: 180px;
    overflow: hidden;
  }


    .link-panel .panel-text {/* パネル説明 */
    padding: 1.2rem 5.5%;
  }

  .link-panel.note-panel .panel-text {/* パネル説明 */
    width: 100%;
    box-sizing: border-box;
  }

  .link-panel .panel-type {
  display: inline-block;
  font-weight: 500;
  font-size: clamp(0.65rem, 2.5vw, 0.7rem);
  padding: 0.3em 2.5%;
  margin-bottom: 0.8em;
  border-radius: 0;
}

  .link-panel.note-panel .panel-title,
  .link-panel.note-panel .panel-note,
  .link-panel.note-panel .panel-type,
  .link-panel.note-panel .panel-source {
    text-align: left;
  }


}




@media (max-width: 480px) {
  .link-panels {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 360px) {

  .link-panel img,
  .link-panel iframe {
    width: 100%;
    max-width: none;
    height: 180px;
    margin: 0.25rem 0;
    overflow: hidden;
  }


  .link-panel .panel-title {
    font-size: 0.85rem;
    line-height: 0.8;     /* adjust to desired tightness */
  }
    .link-panel .panel-note {
    font-size: 0.75rem;
    margin-top: 0.7rem;

  }

    .link-panel .panel-type {
  margin-bottom: 0.8em;
}
    .link-panel .panel-text {/* パネル説明 */
    padding: 1rem 1.2rem;
  }
    }