@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese");
/* EXTEND
------------------------------------------------------------- */
#modelIdx .keyVisual {
  background: #e8e8e8;
}

#modelIdx .pageTitle {
  color: #666;
  text-shadow: 0 0 4px #e8e8e8, 0 0 1px #e8e8e8;
}

#modelIdx .keyVisualInner {
  background-image: url("/asset/images/model/key_visual_pc.jpg");
  background-repeat: no-repeat;
  background-position: -31.875% center;
  background-size: 1280px 296px;
}

#modelIdx .navAnchorIndex {
  top: 0;
  max-width: 1012px;
  padding: 21px 16px;
  margin: 0 auto;
  -webkit-transition: top 0.4s, -webkit-box-shadow 1s;
  transition: top 0.4s, -webkit-box-shadow 1s;
  transition: top 0.4s, box-shadow 1s;
  transition: top 0.4s, box-shadow 1s, -webkit-box-shadow 1s;
}

#modelIdx .navAnchorIndex.is-fixed {
  max-width: 100%;
  background: #fff;
  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
  -webkit-transition: top 0.4s, -webkit-box-shadow 0.8s;
  transition: top 0.4s, -webkit-box-shadow 0.8s;
  transition: top 0.4s, box-shadow 0.8s;
  transition: top 0.4s, box-shadow 0.8s, -webkit-box-shadow 0.8s;
}

#modelIdx .navAnchorIndex .anchorList {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

#modelIdx .navAnchorIndex .anchorList > li {
  position: relative;
}

#modelIdx .navAnchorIndex .anchorList > li + li::before {
  position: absolute;
  top: calc(50% - 14px);
  left: 0;
  display: inline-block;
  width: 1px;
  height: 28px;
  content: "";
  background-color: #d2d2d2;
}

#modelIdx .navAnchorIndex .anchorList a {
  display: block;
  padding: 0 1em;
  font-size: 2.8rem;
  color: #28bfc8;
}

#modelIdx .navAnchorIndex .anchorList a::after {
  position: absolute;
  top: calc(50% - 4px);
  right: 10px;
  display: block;
  width: 11px;
  height: 22px;
  content: "";
  background: url(/asset/images/model/btn_turndown.svg) center/contain no-repeat;
}

#modelIdx .articleHead {
  margin: 80px 16px 64px;
}

#modelIdx .modelListLayout {
  max-width: 1012px;
  padding: 0 16px;
  margin: 0 auto;
}

#modelIdx .modelListTtl {
  padding: 0 16px 0.9em;
  margin: 24px 0 38px;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.11;
  color: #28bfc8;
  letter-spacing: 0.16em;
  border-bottom: 1px solid #28bfc8;
}

#modelIdx .modelListTtl > span {
  font-size: 3.6rem;
}

#modelIdx .modelList {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin-right: -7px;
}

#modelIdx .modelColumn {
  display: block;
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 25%;
      -ms-flex: 0 1 25%;
          flex: 0 1 25%;
  max-width: 25%;
  padding-right: 7px;
  margin-bottom: 52px;
}

#modelIdx .modelColumn a {
  display: block;
}

#modelIdx .modelColumn .photo {
  padding-bottom: 25px;
}

#modelIdx .modelColumn h4.name {
  padding-bottom: 15px;
  font-size: 1.6rem;
  line-height: 1;
  color: #555;
  text-align: center;
  letter-spacing: 0.8px;
}

#modelIdx .modelColumn .snsBox {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#modelIdx .modelColumn .snsBox a {
  display: block;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

#modelIdx .modelColumn .snsBox a + a {
  margin-left: 8px;
}

#modelIdx .modelColumn .snsBox a:hover .iconBox::after {
  opacity: 1;
}

#modelIdx .modelColumn .snsBox .iconBox {
  position: relative;
  display: block;
  width: 30px;
  height: 30px;
  overflow: hidden;
  text-indent: -999px;
  cursor: pointer;
}

#modelIdx .modelColumn .snsBox .iconBox::before, #modelIdx .modelColumn .snsBox .iconBox::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  content: "";
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

#modelIdx .modelColumn .snsBox .iconBox::after {
  opacity: 0;
}

#modelIdx .modelColumn .snsBox .iconBox.twitter {
  width: 28px;
  height: 22px;
}

#modelIdx .modelColumn .snsBox .iconBox.twitter::before {
  background-image: url(/asset/images/icons/icon_twitter.svg);
  background-position: center center;
}

#modelIdx .modelColumn .snsBox .iconBox.twitter::after {
  background-image: url(/asset/images/icons/icon_twitter_on.svg);
}

#modelIdx .modelColumn .snsBox .iconBox.instagram {
  width: 27px;
  height: 27px;
}

#modelIdx .modelColumn .snsBox .iconBox.instagram::before {
  background-image: url(/asset/images/icons/icon_instagram.svg);
}

#modelIdx .modelColumn .snsBox .iconBox.instagram::after {
  background-image: url(/asset/images/icons/icon_instagram_on.svg);
}

#modelIdx .modelColumn .snsBox .iconBox.blog {
  width: 26px;
  height: 27px;
  margin-left: 4px;
}

#modelIdx .modelColumn .snsBox .iconBox.blog::before {
  background-image: url(/asset/images/icons/icon_blog.svg);
}

#modelIdx .modelColumn .snsBox .iconBox.blog::after {
  background-image: url(/asset/images/icons/icon_blog_on.svg);
}

#modelIdx .modelColumn .snsBox.uaSnsJs .iconBox::after {
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

@media screen and (max-width: 768px) {
  #modelIdx .pageTitle {
    -webkit-transform: none;
            transform: none;
  }
  #modelIdx .keyVisualInner {
    background-image: url("/asset/images/model/key_visual_sp.jpg");
    background-size: cover;
  }
  #modelIdx .navAnchorIndex {
    padding: 4px 16px;
  }
  #modelIdx .navAnchorIndex .anchorList > li {
    width: 20%;
  }
  #modelIdx .navAnchorIndex .anchorList > li + li::before {
    top: calc(50% - 7px);
    height: 14px;
    background-color: rgba(210, 210, 210, 0.5);
  }
  #modelIdx .navAnchorIndex .anchorList > li:nth-child(-n + 5) {
    border-bottom: solid 1px rgba(210, 210, 210, 0.5);
  }
  #modelIdx .navAnchorIndex .anchorList > li:nth-child(6)::before {
    content: none;
  }
  #modelIdx .navAnchorIndex .anchorList a {
    padding: 12px 0;
    font-size: 1.5rem;
  }
  #modelIdx .navAnchorIndex .anchorList a::after {
    width: 6px;
    height: 14px;
  }
  #modelIdx .articleHead {
    margin: 40px 16px 32px;
  }
  #modelIdx .modelListTtl {
    padding: 0 8px 0.9em;
    font-size: 1.2rem;
  }
  #modelIdx .modelListTtl > span {
    font-size: 2.1rem;
  }
  #modelIdx .modelList {
    margin-right: -5px;
  }
  #modelIdx .modelColumn {
    -webkit-box-flex: 0;
    -webkit-flex: 0 1 50%;
        -ms-flex: 0 1 50%;
            flex: 0 1 50%;
    max-width: 50%;
    padding-right: 5px;
    margin-bottom: 32px;
  }
  #modelIdx .modelColumn .photo {
    padding-bottom: 19px;
  }
  #modelIdx .modelColumn .photo img {
    width: 100%;
  }
  #modelIdx .modelColumn h4.name {
    padding-bottom: 16px;
    font-size: 1.4rem;
    letter-spacing: 1px;
  }
  #modelIdx .modelColumn .snsBox .iconBox.twitter {
    width: 20px;
    height: 16px;
  }
  #modelIdx .modelColumn .snsBox .iconBox.instagram {
    width: 20px;
    height: 20px;
  }
  #modelIdx .modelColumn .snsBox .iconBox.blog {
    width: 19px;
    height: 20px;
  }
}