@charset "UTF-8";
@import url(./common.css);

/* ==============================
レイアウト
============================== */
.contents > .flex_container {
  width: var(--contents-width);
  margin: 0 auto;
}

/* ==============================
main
============================== */
main .list_wrapper {
  padding: 16px;
}
/* h2 */
main h2 {
  padding: 16px 0;
}
main .thumbnail {
  margin: 16px 0 32px;
}
/* h3 */
main .sec_h3 {
  margin-top: 64px;
}
main h3 {
  padding: 16px;
  border-left: solid 2px var(--accent-color);
  background-color: #eee;
}
/* h4 */
main .sec_h4 {
  margin-top: 40px;
}
main h4 {
  padding: 16px 4px;
  border-top: solid 3px var(--medium-color);
  border-bottom: solid 3px var(--medium-color);
}

/* ==============================
aside
============================== */
.aside_links_thumbnail {
  padding: 16px;
  border: solid 1px var(--accent-color);
  border-radius: 8px;
}
.aside_links_thumbnail .h3_wrapper {
  margin-bottom: 8px;
}
.aside_links_thumbnail h3 {
  text-align: center;
}
aside .aside_links_thumbnail li {
  border-bottom: solid 1px #bbb;
}
aside .aside_links_thumbnail a:not(.button_anchor) {
  display: flex;
  gap: 4px;
  position: relative;   /* アローマークの基準 */
  padding: 16px 0;
  transition: opacity .3s;
}
aside .aside_links_thumbnail a:hover {
  opacity: 0.7;
}
aside .aside_links_thumbnail a > .anchor_text {
  display: block;
}
/* アローマーク */
aside .aside_links_thumbnail a > .arrow {
  position: absolute;
  right: 0;
  bottom: 16px;
}
aside .aside_links_thumbnail a > .arrow::before {
  top: 7px;
  left: 5px;
}
/* ボタンリンクの配置 */
aside .aside_links_thumbnail > .buttonLink_block {
  padding: 32px 0 16px;
}
aside .aside_links_thumbnail > .buttonLink_block > a {
  margin: 0 auto;
}





/* ==============================
スマホ
============================== */
@media screen and (max-width: 767px) {

  /* --------------------
  aside
  -------------------- */
  aside .aside_links_thumbnail a > figure {
    flex: 0 0 30%;
  }
}

/* ==============================
タブレット
============================== */
@media screen and (min-width: 768px) and (max-width: 959px) {

}

/* ==============================
タブレット以上
============================== */
@media screen and (min-width: 768px) {

  /* --------------------
  aside
  -------------------- */
  aside .aside_links_thumbnail a > figure {
    flex: 0 0 240px;
  }
}

/* ==============================
タブレット以下
============================== */
@media screen and (max-width: 959px) {

}

/* ==============================
ノートパソコン
============================== */
@media screen and (min-width: 960px) and (max-width: 1280px) {

}

/* ==============================
デスクトップ
============================== */
@media screen and (min-width: 1281px) {

}

/* ==============================
パソコン
============================== */
@media screen and (min-width: 960px) {

  /* --------------------
  レイアウト
  -------------------- */
  .flex_container {
    display: flex;
    gap: 16px;
  }
  aside {
    flex: 0 0 400px;
  }

  /* --------------------
  aside
  -------------------- */
  aside .aside_links_thumbnail a > figure {
    flex: 0 0 40%;
  }
  
}