@charset "UTF-8";

/* =========================================================
  2col layout
========================================================= */
#content {
  gap: 28px;
  margin-bottom: 260px;
}

#main {
  width: 100%;
  max-width: var(--content-width);
}

#links {
  width: 100%;
  min-width: 240px;
  max-width: var(--col2-side-width);
}

@media only screen and (max-width: 1200px) {
  #wrapper {
    margin: 0 3%;
  }

  #breadCrumbs {
    padding: 0 3%;
  }
}

@media only screen and (max-width: 960px) {
  #content {
    display: block;
    margin-top: 32px;
    margin-bottom:80px;
  }

  #main {
    margin-bottom: 32px;
  }

  #links > .pieceContainer {
    margin-top: 48px;
  }

  .contentGpCategoryCategory .docs_1 ~ section[class^="docs_"] section {
  flex-basis: 100%;
  }
}

@media only screen and (max-width: 768px) {
  #breadCrumbs {
    display: none;
  }

  #content {
    margin-top: 32px;
  }
}

@media only screen and (max-width: 575px) {
  #breadCrumbBlock {
    margin-top: 70px;
  }
}

/* =========================================================
  links
========================================================= */
#links > div {
  width: 100%;
  margin-bottom: 20px;
}

#links .piece .pieceHeader {
  margin-bottom: 12px;
}

#links .piece .pieceHeader h2 {
  align-content: center;
  padding: 17px 0 15px 16px;
  font-size: 1.25rem;
  background-color: var(--ac-color-blue-11);
}

#links div[id^="category"] .pieceContainer > .pieceBody,
#links #mayor .pieceBody,
#links #linkFree .pieceBody,
#links #linkList .pieceBody,
#links #soshikiList .pieceBody {
  margin: 0 6px 16px;
}

#links #soshikiList .pieceBody > ul,
#links #linkFree .pieceBody > ul,
#links #linkList .pieceBody > ul {
  padding: 0 0 4px 16px;
  list-style-image: url("/_themes/site/images/arrow-black.svg");
}

#links #soshikiList .pieceBody > ul > li,
#links #linkFree .pieceBody > ul > li,
#links #linkList .pieceBody > ul > li {
  margin: 0 0 4px;
}

@media only screen and (max-width: 959px) {
  #links {
    width: 100%;
    max-width: var(--content-width);
  }

  #links #soshikiList .pieceBody > ul > li {
    padding: 8px 0;
    border-bottom: 1px dotted var(--mono-color-2);
  }
}

/* category-list
----------------------------------------------- */
#links div[id^="category"] h3,
#links div[class$="Category"] h3 {
  display: flex;
  font-size: 1rem;
  font-weight: normal;
}

#links div[id^="category"] h3::before,
#links div[class$="Category"] h3::before {
  padding: 0 4px 0 0;
  content: "－ ";
}

#links div[id^="category"] section:not(:last-child) h3,
#links div[class$="Category"] section:not(:last-child) h3 {
  margin: 0 0 4px;
}

#links div[id^="category"] ul,
#links div[class$="Category"] ul {
  padding: 0 0 4px 16px;
  list-style-image: url("/_themes/site/images/arrow-black.svg");
}

#links div[id^="category"] section:not(:last-child) ul,
#links div[class$="Category"] section:not(:last-child) ul {
  margin: 0 0 5px;
}

@media only screen and (max-width: 959px) {
  #links div[id^="category"] h3,
  #links div[class$="Category"] h3,
  #links div[id^="category"] li,
  #links div[class$="Category"] li {
    margin: 0;
  }

  #links div[id^="category"] .level1,
  #links div[id^="category"] .level2,
  #links #soshikiList .pieceBody ul > li > ul {
    display: flex;
    flex-wrap: wrap;
  }

  #links div[id^="category"] .level1 section,
  #links div[id^="category"] .level2 section {
    width: 50%;
  }
}

/* #linkBanner
----------------------------------------------- */
#links #linkBanner ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

#links #linkBanner li {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

#links #linkBanner li img {
  width: 170px;
  height: 52px;
}

/* #lifeScene
----------------------------------------------- */
#links #lifeScene ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

#links #lifeScene li {
  width: calc((100% - 16px) / 2);
  min-width: 142px;
}

#links #lifeScene li a {
  position: relative;
  display: flex;
  aspect-ratio: 141 / 100;
  padding: 8px 10px;
  color: var(--mono-color-1);
  text-decoration: none;
  border-radius: 8px;
  box-shadow: 0 0 4px var(--mono-color-4);
}

#links #lifeScene a:hover {
  outline: solid 2px var(--ac-color-blue-3);
  box-shadow: none;
}

#links #lifeScene li img {
  position: absolute;
  right: 5%;
  bottom: 5%;
  height: 70%;
}

@media only screen and (max-width: 959px) {
  #links #lifeScene li {
    width: calc((100% - 16px * 3) / 4);
  }
}

@media only screen and (max-width: 575px) {
  #links #lifeScene li {
    width: calc((100% - 16px) / 2);
  }
}

/* #popularItems
----------------------------------------------- */
#links #popularItems ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

#links #popularItems li {
  position: relative;
  display: inline-block;
  width: calc((100% - 16px) / 2);
  aspect-ratio: 141 / 100;
  padding: 1.5% 2%;
  border-radius: 8px;
  box-shadow: 0 0 4px var(--mono-color-4);
}

#links #popularItems li a {
  display: flex;
  color: var(--mono-color-1);
  text-decoration: none;
}

#links #popularItems li a div {
  display: flex;
  flex-direction: column;
}

#links #popularItems li > img {
  position: absolute;
  right: 5%;
  bottom: 5%;
  height: 50%;
}

#links #popularItems img.external {
  height: 16px;
  margin: 4px 0 0;
}

@media only screen and (max-width: 959px) {
  #links #popularItems li {
    width: calc((100% - 16px * 3) / 4);
  }
}

@media only screen and (max-width: 575px) {
  #links #popularItems li {
    width: calc((100% - 16px) / 2);
  }
}

/* #soshikiList
----------------------------------------------- */
#links #soshikiList .pieceBody ul > li > ul  {
  /* padding: 0 0 0 18px; */
  margin: 4px 0 0 8px;
  font-size: 0.875rem;
  list-style-type: "－ ";
}

#links #soshikiList .pieceBody ul > li ul > li {
  margin: 0 0 4px 8px;
}

#links #soshikiList .pieceBody ul > li > ul li {
  width: calc(50% - 8px);
  min-width: 210px;
}