/*
Common settings for:
    - /team/*
    - /insights/*
*/
@charset "UTF-8";

.navigation-area {
  margin-top: min(
    calc((120 / var(--pc-best-view)) * var(--vw-base)),
    calc((120 / var(--pc-best-view)) * var(--max-width))
  );
  margin-left: min(
    calc((72 / var(--pc-best-view)) * var(--vw-base)),
    calc((72 / var(--pc-best-view)) * var(--max-width))
  );
  margin-right: min(
    calc((72 / var(--pc-best-view)) * var(--vw-base)),
    calc((72 / var(--pc-best-view)) * var(--max-width))
  );
  padding-top: min(
    calc((36 / var(--pc-best-view)) * var(--vw-base)),
    calc((36 / var(--pc-best-view)) * var(--max-width))
  );
  padding-bottom: min(
    calc((36 / var(--pc-best-view)) * var(--vw-base)),
    calc((36 / var(--pc-best-view)) * var(--max-width))
  );
  border-top: 1px solid var(--color-dark-blue);
  border-bottom: 1px solid var(--color-dark-blue);
}
@media screen and (max-width: 768px) {
  .navigation-area {
    margin-top: calc((80 / var(--sp-best-view)) * var(--vw-base));
    margin-left: calc((10 / var(--sp-best-view)) * var(--vw-base));
    margin-right: calc((10 / var(--sp-best-view)) * var(--vw-base));
    padding: calc((22 / var(--sp-best-view)) * var(--vw-base)) 0;
  }
}

.navigation-area a {
  color: var(--color-dark-blue);
}

.navigation-area .navigation-box {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-columns:
    min(
      calc((384 / var(--pc-best-view)) * var(--vw-base)),
      calc((384 / var(--pc-best-view)) * var(--max-width))
    )
    min(
      calc((270 / var(--pc-best-view)) * var(--vw-base)),
      calc((270 / var(--pc-best-view)) * var(--max-width))
    )
    min(
      calc((384 / var(--pc-best-view)) * var(--vw-base)),
      calc((384 / var(--pc-best-view)) * var(--max-width))
    );
  gap: min(
    calc((64 / var(--pc-best-view)) * var(--vw-base)),
    calc((64 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .navigation-area .navigation-box {
    grid-template-columns:
      calc((128 / var(--sp-best-view)) * var(--vw-base))
      calc((80 / var(--sp-best-view)) * var(--vw-base))
      calc((128 / var(--sp-best-view)) * var(--vw-base));
    gap: calc((16 / var(--sp-best-view)) * var(--vw-base));
  }
}

.navigation-area .navigation-box .prev,
.navigation-area .navigation-box .next {
  position: relative;
  word-break: auto-phrase;
}
.navigation-area .navigation-box .prev {
  grid-column: 1 / 2;
}
.navigation-area .navigation-box .viewall {
  grid-column: 2 / 3;
}
.navigation-area .navigation-box .next {
  grid-column: 3 / 4;
}

.navigation-area .navigation-box > .viewall a {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-content: center;
  width: min(
    calc((272 / var(--pc-best-view)) * var(--vw-base)),
    calc((272 / var(--pc-best-view)) * var(--max-width))
  );
  margin: auto;
  font-size: var(--font-size-xs-clamp);
  text-align: center;
}

.navigation-area .navigation-box > .prev a,
.navigation-area .navigation-box > .next a {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--font-size-lg-clamp);
}
.navigation-area .navigation-box > .prev a {
  justify-content: start;
  margin-left: min(
    calc((32 / var(--pc-best-view)) * var(--vw-base)),
    calc((32 / var(--pc-best-view)) * var(--max-width))
  );
}
.navigation-area .navigation-box > .next a {
  justify-content: end;
  margin-right: min(
    calc((32 / var(--pc-best-view)) * var(--vw-base)),
    calc((32 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .navigation-area .navigation-box > .viewall a {
    width: calc((80 / var(--sp-best-view)) * var(--vw-base));
    font-size: clamp(8px, calc((11 / var(--sp-best-view)) * var(--vw-base)), 14px);
  }
  .navigation-area .navigation-box > .prev a {
    margin-left: calc((16 / var(--sp-best-view)) * var(--vw-base));
  }
  .navigation-area .navigation-box > .next a {
    margin-right: calc((16 / var(--sp-best-view)) * var(--vw-base));
  }
}

.navigation-area .navigation-box p {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  flex: 1;
}
.navigation-box > .next {
  text-align: right;
}
.navigation-box > .viewall a::before,
.navigation-box > .viewall a::after {
  position: absolute;
  width: 1px;
  height: 100%;
  content: "";
  background: url(/common/img/dotline-v.png) 0 0 repeat-y;
}
.navigation-box > .viewall a::before {
  top: 0;
  left: 0;
}
.navigation-box > .viewall a::after {
  top: 0;
  right: 0;
}
.navigation-box .btn-viewall {
  width: min(
    calc((20 / var(--pc-best-view)) * var(--vw-base)),
    calc((20 / var(--pc-best-view)) * var(--max-width))
  );
  height: min(
    calc((20 / var(--pc-best-view)) * var(--vw-base)),
    calc((20 / var(--pc-best-view)) * var(--max-width))
  );
  margin: 0 auto
    min(
      calc((4 / var(--pc-best-view)) * var(--vw-base)),
      calc((4 / var(--pc-best-view)) * var(--max-width))
    );
}

.navigation-area .navigation-box > .next a {
  text-align: right;
}
@media screen and (max-width: 768px) {
  .navigation-box .btn-viewall {
    width: calc((20 / 388) * 100vw);
    height: calc((20 / 388) * 100vw);
    margin: 0 auto calc((4 / 388) * 100vw);
  }
  .navigation-box .thumb {
    margin: 0;
  }

  .navigation-box .thumb img {
    width: calc((40 / var(--sp-best-view)) * var(--vw-base));
    height: calc((40 / var(--sp-best-view)) * var(--vw-base));
  }

  .navigation-box > .viewall a {
    width: calc((80 / var(--sp-best-view)) * var(--vw-base));
  }

  .navigation-box > .prev a,
  .navigation-box > .next a {
    font-size: calc((14 / var(--sp-best-view)) * var(--vw-base));
  }

  .navigation-box > .prev a,
  .navigation-box > .next a {
    font-size: calc((14 / var(--sp-best-view)) * var(--vw-base));
  }

  .navigation-box > .next {
    justify-content: end;
  }

  .navigation-box > .prev a::after {
    left: 0px;
  }

  .navigation-box > .next a::after {
    right: 0px;
  }
}

/* article-area */
.article-area p + *,
.article-area * + p {
  margin-top: min(
    calc((20 / var(--pc-best-view)) * var(--vw-base)),
    calc((20 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .article-area p + *,
  .article-area * + p {
    margin-top: calc((20 / var(--sp-best-view)) * var(--vw-base));
  }
}

.article-area h2 {
  display: inline-block;
  font-size: min(calc((32 / 1440) * 100vw), calc((32 / 1440) * 1920px));
  letter-spacing: .04em;
  line-height:1.5;
  text-wrap:auto;
}
.article-area * + h2 {
  margin-top: min(
    calc((80 / var(--pc-best-view)) * var(--vw-base)),
    calc((80 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .article-area h2 {
    font-size: calc((28 / var(--sp-best-view)) * var(--vw-base));
  }
  .article-area * + h2 {
    margin-top: calc((80 / var(--sp-best-view)) * var(--vw-base));
  }
}

.article-area h3 {
  font-weight: 400;
  font-size: min(
    calc((30 / var(--pc-best-view)) * var(--vw-base)),
    calc((30 / var(--pc-best-view)) * var(--max-width))
  );
}
.article-area * + h3 {
  margin-top: min(
    calc((50 / var(--pc-best-view)) * var(--vw-base)),
    calc((50 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .article-area h3 {
    font-size: calc((28 / var(--sp-best-view)) * var(--vw-base));
  }
  .article-area * + h3 {
    margin-top: calc((50 / var(--sp-best-view)) * var(--vw-base));
  }
}

.article-area h4 {
  display: inline-block;
  font-size: clamp(18px, calc((20 / var(--pc-best-view)) * var(--vw-base)), 22px);
  letter-spacing: .04em;
  line-height: 1.5;
  text-wrap: auto;
}
.article-area > * + h4 {
  margin-top: min(
    calc((50 / var(--pc-best-view)) * var(--vw-base)),
    calc((50 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .article-area h4 {
    font-size: calc((18 / var(--sp-best-view)) * var(--vw-base));
  }
  .article-area > * + h4 {
    margin-top: calc((50 / var(--sp-best-view)) * var(--vw-base));
  }
}

.article-area h5 {
  display: inline-block;
  font-size: clamp(16px, calc((18 / var(--pc-best-view)) * var(--vw-base)), 20px);
  font-family: var(--font-family-bold);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.5;
  text-wrap: auto;
}
.article-area > * + h5 {
  margin-top: min(
    calc((20 / var(--pc-best-view)) * var(--vw-base)),
    calc((20 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .article-area h5 {
    font-size: calc((16 / var(--sp-best-view)) * var(--vw-base));
  }
  .article-area > * + h5 {
    margin-top: calc((20 / var(--sp-best-view)) * var(--vw-base));
  }
}

.article-area ul {
  list-style-type: disc;
}
.article-area ol {
  list-style-type: decimal;
}
.article-area ul, .article-area ol {
  margin-left: 1.5em;
}
.article-area li {
  padding-left: 0.5em;
}
.article-area li::marker {
  color: var(--color-blue);
}
.article-area ol li::marker {
  font-size: 110%;
  font-weight: 400;
}

.article-area blockquote {
  background: #b9cad5;
  padding:
    min(
      calc((40 / var(--pc-best-view)) * var(--vw-base)),
      calc((40 / var(--pc-best-view)) * var(--max-width))
    )
    min(
      calc((42 / var(--pc-best-view)) * var(--vw-base)),
      calc((42 / var(--pc-best-view)) * var(--max-width))
    )
    min(
      calc((38 / var(--pc-best-view)) * var(--vw-base)),
      calc((38 / var(--pc-best-view)) * var(--max-width))
    )
    min(
      calc((40 / var(--pc-best-view)) * var(--vw-base)),
      calc((40 / var(--pc-best-view)) * var(--max-width))
    );
}
.article-area blockquote > p {
  border-left: min(
    calc((4 / var(--pc-best-view)) * var(--vw-base)),
    calc((4 / var(--pc-best-view)) * var(--max-width))
  ) solid #d9d9d9;
  padding-left: min(
    calc((24 / var(--pc-best-view)) * var(--vw-base)),
    calc((24 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .article-area blockquote {
    padding: calc((24 / var(--sp-best-view)) * var(--vw-base));
  }
  .article-area blockquote > p {
    border-left: calc((4 / var(--sp-best-view)) * var(--vw-base)) solid #d9d9d9;
    padding-left: calc((12 / var(--sp-best-view)) * var(--vw-base));
  }
}

.article-area :not(p) + ol,
.article-area :not(p) + ul,
.article-area :not(p) + blockquote {
  margin-top: min(
    calc((50 / var(--pc-best-view)) * var(--vw-base)),
    calc((50 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .article-area * + ol,
  .article-area * + ul,
  .article-area * + blockquote {
    margin-top: calc((50 / var(--sp-best-view)) * var(--vw-base));
  }
}

.article-area li :not(p) + ol,
.article-area li :not(p) + ul {
  margin-top: min(
    calc((10 / var(--pc-best-view)) * var(--vw-base)),
    calc((10 / var(--pc-best-view)) * var(--max-width))
  );
}
.article-area li:has(ul) + li {
  margin-top: min(
    calc((20 / var(--pc-best-view)) * var(--vw-base)),
    calc((20 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .article-area li :not(p) + ol,
  .article-area li :not(p) + ul {
    margin-top: calc((8 / var(--sp-best-view)) * var(--vw-base));
  }
  .article-area li:has(ul) + li {
    margin-top: calc((20 / var(--sp-best-view)) * var(--vw-base));
  }
}

.article-area strong {
  font-family: var(--font-family-bold);
  font-weight: 600;
}


.mt-42 {
  margin-top: min(
    calc((42 / var(--pc-best-view)) * var(--vw-base)),
    calc((42 / var(--pc-best-view)) * var(--max-width))
  );
}
.mt-80 {
  margin-top: min(
    calc((80 / var(--pc-best-view)) * var(--vw-base)),
    calc((80 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .mt-42 {
    margin-top: calc((32 / var(--sp-best-view)) * var(--vw-base));
  }
  .mt-80 {
    margin-top: calc((80 / var(--sp-best-view)) * var(--vw-base));
  }
}

.article-area a:not([class]) {
  color: var(--color-text-link) !important;
}

.box-bg {
  background: var(--color-ice-gray);
}
.box-frame {
  border: 1px solid var(--color-blue-gray);
}
.box-frame.dark {
    border: 1px solid var(--color-blue);
}
.box-quote {
  background: var(--color-ice-gray);
}

.box-bg, .box-frame, .box-quote {
  padding:
    min(
      calc((40 / var(--pc-best-view)) * var(--vw-base)),
      calc((40 / var(--pc-best-view)) * var(--max-width))
    )
    min(
      calc((42 / var(--pc-best-view)) * var(--vw-base)),
      calc((42 / var(--pc-best-view)) * var(--max-width))
    )
    min(
      calc((38 / var(--pc-best-view)) * var(--vw-base)),
      calc((38 / var(--pc-best-view)) * var(--max-width))
    )
    min(
      calc((40 / var(--pc-best-view)) * var(--vw-base)),
      calc((40 / var(--pc-best-view)) * var(--max-width))
    );
}
@media screen and (max-width: 768px) {
  .box-bg,.box-frame,.box-quote  {
    padding: calc((30 / var(--sp-best-view)) * var(--vw-base));
  }
}

.article-area .writer-name {
  font-size: var(--font-size-lg-clamp);
  margin-top: min(
    calc((4 / var(--pc-best-view)) * var(--vw-base)),
    calc((4 / var(--pc-best-view)) * var(--max-width))
  );;
  margin-left: min(
    calc((8 / var(--pc-best-view)) * var(--vw-base)),
    calc((8 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .article-area .writer-name {
    font-size: calc((20 / var(--sp-best-view)) * var(--vw-base));
    margin-top: 0;
    margin-left: calc((18 / var(--sp-best-view)) * var(--vw-base));
  }
}

.related-list {
  max-width: 1920px;
  border-top: 1px solid var(--color-dark-blue);
  padding-top: min(
    calc((120 / var(--pc-best-view)) * var(--vw-base)),
    calc((120 / var(--pc-best-view)) * var(--max-width))
  );
  margin-top: min(
    calc((120 / var(--pc-best-view)) * var(--vw-base)),
    calc((120 / var(--pc-best-view)) * var(--max-width))
  );
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.related-list .img + p {
  margin-top: min(
    calc((12 / var(--pc-best-view)) * var(--vw-base)),
    calc((12 / var(--pc-best-view)) * var(--max-width))
  );
}
.related-list .toptxtlink {
  margin-top: min(
    calc((56 / var(--pc-best-view)) * var(--vw-base)),
    calc((56 / var(--pc-best-view)) * var(--max-width))
  );
}
@media screen and (max-width: 768px) {
  .related-list {
    padding-top: calc((80 / var(--sp-best-view)) * var(--vw-base));
    margin-top: calc((80 / var(--sp-best-view)) * var(--vw-base));
    margin-left: calc((10 / var(--sp-best-view)) * var(--vw-base));
    margin-right: calc((10 / var(--sp-best-view)) * var(--vw-base));
  }
  .related-list .img + p {
    margin-top: calc((12 / var(--sp-best-view)) * var(--vw-base));
  }
  .related-list .toptxtlink {
    margin-top: calc((52 / var(--sp-best-view)) * var(--vw-base));
  }
}

.fw-bold {
  font-weight: 600;
}