@charset "UTF-8";

.font_red {
  color: #FF1E00;
}

@media screen and (max-width:767px) {
  .inner {
    padding: 0 calc(100vw / var(--viewport) * 32);
  }
}
@media screen and (min-width:768px) {
  .inner {
    width: 800px;
    margin: 0 auto;
  }
}

.tab_area_switch li {
  cursor: pointer;
}
.tab_section_switch > div:nth-child(n+2) {
  display: none;
}

body {
  background: #eef0f5;
}

#header .logo {
  width: calc(100vw / var(--viewport) * 252);
  max-width: none;
  padding: 0;
  position: relative;
  top: initial;
  left: initial;
}
#header .subMenu {
  top: 0;
}
@media screen and (min-width:768px) {
  #header .logo {
    width: 210px;
    max-width: initial;
  }
}

#header .menu {
  display: none;
}
#header .menu.active {
  display: block;
}

.contents {
  padding: calc(100vw / var(--viewport) * 80) calc(100vw / var(--viewport) * 32);
}
.no-posts {
  color: #385375;
  font-size: calc(100vw / var(--viewport) * 28);
  text-align: center;
  width: 100%;
}
.skin-knowledge-card {
  background: #fff;
}
.skin-knowledge-card a {
  color: #385375;
  display: flex;
}
.skin-knowledge-card .thumb {
  position: relative;
  width: 50%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: #999;
}
.skin-knowledge-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width:767px) {
  .skin-knowledge-card:nth-child(n+2) {
    margin-top: calc(100vw / var(--viewport) * 20);
  }
}
@media screen and (min-width:768px) {
  .contents {
    padding: 40px 0;
  }
  .contents #skin-posts-wrapper {
    width: 880px;
    margin: 0 auto;
  }
  .index-knowledge .contents #skin-posts-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .no-posts {
    font-size: 14px;
  }
  .skin-knowledge-card {
    width: calc((100% - 20px) / 3);
    flex-direction: column;
  }
  .skin-knowledge-card a {
    flex-direction: column;
  }
  .skin-knowledge-card .thumb {
    width: 100%;
  }
  .skin-knowledge-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* ページネーション */
.knowledge-pagination {
  font-size: calc(100vw / var(--viewport) * 24);
  font-weight: bold;
  line-height: 1;
  width: calc(100vw / var(--viewport) * 622);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: calc(100vw / var(--viewport) * 60) auto 0;
}
.knowledge-pagination ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.knowledge-pagination li a,
.knowledge-pagination li.current {
  border: 2px solid #385375;
  width: calc(100vw / var(--viewport) * 40);
  height: calc(100vw / var(--viewport) * 40);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.4em;
  box-sizing: content-box;
}
.knowledge-pagination .prev,
.knowledge-pagination .next {
  position: relative;
  cursor: pointer;
}
.knowledge-pagination .prev a,
.knowledge-pagination .next a,
.knowledge-pagination .prev span,
.knowledge-pagination .next span {
  display: block;
  width: 1em;
  height: 1em;
}
.knowledge-pagination .prev.disabled,
.knowledge-pagination .next.disabled {
  visibility: hidden;
}
.knowledge-pagination .prev:before,
.knowledge-pagination .next:before {
  content: "";
  border-right: 2px solid #222;
  border-top: 2px solid #222;
  border-radius: 2px;
  width: calc(100vw / var(--viewport) * 17);
  height: calc(100vw / var(--viewport) * 17);
  position: absolute;
  top: 50%;
  pointer-events: none;
}
.knowledge-pagination .prev:before {
  transform: translateY(-50%) rotate(225deg);
  left: 2px;
}
.knowledge-pagination .next:before {
  transform: translateY(-50%) rotate(45deg);
  right: 2px;
}
.knowledge-pagination a,
.knowledge-pagination .current,
.knowledge-pagination .dots {
  text-align: center;
  text-decoration: none;
}
.knowledge-pagination a {
  color: #222;
  transition: background 0.2s, color 0.2s;
}
.knowledge-pagination .numbers a:hover {
  background-color: #4E88B6;
  color: #fff;
}
.knowledge-pagination .current {
  color: #fff;
  font-weight: bold;
  background: #385375;
}
.knowledge-pagination .dots {
  color: #999;
  cursor: default;
}
@media screen and (min-width:768px) {
  .knowledge-pagination {
    font-size: 12px;
    width: 600px;
    margin: 30px auto 0;
  }
  .knowledge-pagination li a,
  .knowledge-pagination li.current {
    width: 20px;
    height: 20px;
    margin: 0 0.6em;
  }
  .knowledge-pagination .prev:before,
  .knowledge-pagination .next:before {
    width: 9px;
    height: 9px;
  }
}

/* トップ・カテゴリページ */
.index-knowledge #mv {
  background: url(/img/skin/knowledge/index/mv/mv_sp.jpg) top center no-repeat;
  background-size: cover;
  height: calc(100vw / var(--viewport) * 864);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: calc(56px + (136.25 - 56) * ((100vw - 320px) / (767 - 320)));
}
.index-knowledge #mv h1 {
  font-size: calc(100vw / var(--viewport) * 56);
  text-align: center;
}
.index-knowledge #mv h1 .subH1 {
  font-size: calc(100vw / var(--viewport) * 28);
}
.index-knowledge #mv .lead {
  font-size: calc(100vw / var(--viewport) * 32);
  font-weight: 400;
  margin-top: calc(100vw / var(--viewport) * 80);
}
@media screen and (min-width:768px) {
  .index-knowledge #mv {
    background: url(/img/skin/knowledge/index/mv/mv_pc.jpg) top center no-repeat;
    background-size: cover;
    height: 390px;
    margin-top: 72px;
  }
  .index-knowledge #mv h1 {
    font-size: 36px;
  }
  .index-knowledge #mv h1 .subH1 {
    font-size: 18px;
  }
  .index-knowledge #mv .lead {
    font-size: 20px;
    margin-top: 40px;
  }
}

/* 詳細ページ */
.single-knowledge #mv img {
  width: 100%;
}
.single-knowledge #mv .no-image-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
}
.single-knowledge .date-update {
  color: #333;
  text-align: right;
  margin-top: calc(100vw / var(--viewport) * 80);
  margin-bottom: calc(100vw / var(--viewport) * 80);
}
.single-knowledge .entry-header h1 {
  color: #20396F;
  font-size: calc(100vw / var(--viewport) * 48);
  font-weight: 700;
  margin-top: calc(100vw / var(--viewport) * 80);
}
.single-knowledge .categories {
  display: flex;
  gap: calc(100vw / var(--viewport) * 10);
  margin-top: calc(100vw / var(--viewport) * 80);
  margin-bottom: calc(100vw / var(--viewport) * 80);
}
.single-knowledge .categories li a {
  color: #fff;
  font-size: calc(100vw / var(--viewport) * 24);
  font-weight: bold;
  height: calc(100vw / var(--viewport) * 52);
  background: #20396F;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.5em;
}
.single-knowledge .entry-content {
  color: #333;
}
.single-knowledge .entry-content p {
  font-size: calc(100vw / var(--viewport) * 28);
  font-weight: 400;
  line-height: 2;
}
.single-knowledge .entry-content img {
  width: 100%;
  margin-bottom: calc(100vw / var(--viewport) * 50);
}
.single-knowledge .entry-content h2 {
  color: #20396F;
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: 700;
  text-align: left;
  padding: 0.5em 0 0.5em calc(100vw / var(--viewport) * 40);
  border-left: calc(100vw / var(--viewport) * 8) solid #20396F;
  margin-top: calc(100vw / var(--viewport) * 80);
  margin-bottom: calc(100vw / var(--viewport) * 50);
}
.single-knowledge .entry-content h3 {
  color: #333;
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: 700;
  text-align: left;
  margin-top: calc(100vw / var(--viewport) * 50);
  margin-bottom: calc(100vw / var(--viewport) * 50);
}
.single-knowledge .entry-content h4 {
  color: #333;
  font-size: calc(100vw / var(--viewport) * 32);
  font-weight: 700;
  text-align: left;
  margin-top: calc(100vw / var(--viewport) * 30);
  margin-bottom: calc(100vw / var(--viewport) * 30);
}
@media screen and (min-width:768px) {
  .single-knowledge .inner {
    width: 680px;
  }
  .single-knowledge .date-update {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .single-knowledge .entry-header h1 {
    font-size: 32px;
    margin-top: 40px;
  }
  .single-knowledge .categories {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .single-knowledge .categories li a {
    font-size: 12px;
    height: 26px;
  }
  .single-knowledge .entry-content p {
    font-size: 16px;
  }
  .single-knowledge .entry-content img {
    margin-bottom: 25px;
  }
  .single-knowledge .entry-content h2 {
    font-size: 28px;
    padding: 0.5em 0 0.5em 20px;
    border-left: 4px solid #20396F;
    margin-top: 40px;
    margin-bottom: 25px;
  }
  .single-knowledge .entry-content h3 {
    font-size: 28px;
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .single-knowledge .entry-content h4 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

/* 検索結果ページ */
.result-knowledge h1 {
  color: #20396F;
  font-size: calc(100vw / var(--viewport) * 40);
  font-weight: 700;
  text-align: left;
  margin-top: calc(100vw / var(--viewport) * 80);
  margin-bottom: calc(100vw / var(--viewport) * 50);
}
.result-knowledge .noResult {
  color: #333;
}
@media screen and (min-width:768px) {
  .result-knowledge .skin-knowledge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .result-knowledge h1 {
    font-size: 28px;
    margin-top: 40px;
    margin-bottom: 25px;
  }
}

/* パンくずリスト */
.breadcrumb {
  color: #fff;
  background: #385375;
  margin-top: calc(56px + (136.25 - 56) * ((100vw - 320px) / (767 - 320)));
}
.breadcrumb ul {
  width: 100%;
  padding: 0 calc(100vw / var(--viewport) * 32);
}
.breadcrumb ul li {
  font-size: calc(100vw / var(--viewport) * 24);
}
.breadcrumb ul li a:after {
  content: ">";
  height: auto;
  background: none;
}
.breadcrumb a {
  color: #fff !important;
}
@media screen and (max-width:767px) {
  .breadcrumb ul {
    white-space: nowrap;
    overflow-x: auto;
  }
}
@media screen and (min-width:768px) {
  .breadcrumb {
    margin-top: 72px;
  }
  .breadcrumb ul {
    padding: 0;
  }
  .breadcrumb ul li {
    font-size: 12px;
    padding: 7px 0;
  }
}

/* 目次 */
.toc {
  line-height: 2;
  background: #fff;
  padding: 24px;
  max-width: 528px;
  margin: 40px auto 0;
}
.toc__title {
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.toc__icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toc__icon img {
  width: 100%;
}
.toc__body {
  margin: 16px 0;
  height: 161px;
  overflow: hidden;
}
.toc__list {
  font-size: 14px;
}
.toc__list ul {
  margin-left: 16px;
}
.toc__list a {
  color: #222;
  transition: .3s;
}
.toc__list a:hover {
  color: #00aafa;
}
.toc__list ul ul {
  font-size: 12px;
}
.toc__wrap-btn {
  display: flex;
  justify-content: center;
}
.toc__btn {
  appearance: none;
  display: block;
  font-size: 12px;
  padding: 8px 24px;
  bottom: solid 1px currentColor;
  background-color: #fff;
  min-width: 120px;
  text-align: center;
  font-weight: 500;
}
.toc__label-btn--close {
  display: none;
}

/* 検索・関連記事・カテゴリボックス */
.under {
  background: #385375;
  padding: calc(100vw / var(--viewport) * 80) 0;
  margin-top: calc(100vw / var(--viewport) * 80);
}
.under h2 {
  font-size: calc(100vw / var(--viewport) * 28);
  margin-bottom: calc(100vw / var(--viewport) * 40);
}
.under .search-input-wrap {
  width: calc(100vw / var(--viewport) * 640);
  display: flex;
  margin: 0 auto;
}
.under .search-input-wrap .search-field {
  font-size: calc(100vw / var(--viewport) * 24);
  width: calc(100% - calc(100vw / var(--viewport) * 56));
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: #fff;
  box-shadow: none;
  border-radius: 0;
  padding: 0 calc(100vw / var(--viewport) * 20);
}
.under .search-input-wrap .search-form input[type="search"]::-webkit-search-decoration,
.under .search-input-wrap .search-form input[type="search"]::-webkit-search-cancel-button,
.under .search-input-wrap .search-form input[type="search"]::-webkit-search-results-button,
.under .search-input-wrap .search-form input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}
.under .search-input-wrap .search-submit {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background: #4E88B6;
  box-shadow: none;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 100%;
  line-height: inherit;
  color: inherit;
  width: calc(100vw / var(--viewport) * 56);
  height: calc(100vw / var(--viewport) * 56);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.under .search-input-wrap .search-form input[type="search"]::placeholder {
  font-size: calc(100vw / var(--viewport) * 24);
}
.under .search-input-wrap .search-submit::before {
  content: '';
  display: inline-block;
  width: calc(100vw / var(--viewport) * 27);
  height: calc(100vw / var(--viewport) * 27);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23ffffff' d='M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.under .section-related {
  width: calc(100vw / var(--viewport) * 686);
  background: none;
  padding: 0;
  margin: calc(100vw / var(--viewport) * 80) auto 0;
}
.under .section-related .font-overpass {
  font-size: calc(100vw / var(--viewport) * 40);
  text-align: center;
  line-height: 1;
  margin-bottom: calc(100vw / var(--viewport) * 30);
}
@media screen and (min-width:768px) {
  .under {
    padding: 40px 0;
    margin-top: 80px;
  }
  .under h2 {
    font-size: 14px;
    margin-bottom: 20px;
  }
  .under .search-input-wrap {
    width: 320px;
  }
  .under .search-input-wrap .search-field {
    font-size: 12px;
    width: calc(100% - 28px);
    padding: 0 10px;
  }
  .under .search-input-wrap .search-submit {
    width: 28px;
    height: 28px;
  }
  .under .search-input-wrap .search-form input[type="search"]::placeholder {
    font-size: 12px;
  }
  .under .search-input-wrap .search-submit::before {
    width: 14px;
    height: 14px;
  }
  .under .section-related {
    width: 880px;
    margin: 40px auto 0;
  }
  .under .section-related .font-overpass {
    font-size: 20px;
    margin-bottom: 15px;
  }
  .under .related-posts-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
}