@charset "UTF-8";
/*///////////////////////////////////////////////////////
    製品トップスタイル
///////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////
    変数設定
///////////////////////////////////////////////////////*/
/* custom style */
/*///////////////////////////////////////////////////////
    mixin設定
///////////////////////////////////////////////////////*/
.s-inner {
  padding: 0 1.5rem;
}

.component-breadcrumb .component-breadcrumb--container {
  margin: 0 0 0 auto;
}

.contents .contents-body {
  margin-bottom: 8.8rem;
}

@media screen and (min-width: 961px) {
  .s-inner {
    width: 96rem;
    margin: auto;
    padding: 0;
  }
  .component-breadcrumb .component-breadcrumb--container {
    justify-content: flex-end;
  }
  .contents .contents-body {
    margin-bottom: 14.8rem;
  }
}
.guide-cont {
  margin-bottom: 2.8rem;
  padding: 3.6rem 0;
  background: #F0F0F0;
}
.guide-cont .guide-cont--ttl {
  line-height: 1.8;
  text-align: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1.8rem;
}
.guide-cont .guide-cont--read {
  margin-bottom: 2rem;
  line-height: 1.8;
  text-align: center;
  font-size: 1.2rem;
}
.guide-cont .guide-cont--checklist {
  margin-bottom: 1.6rem;
  padding: 1.2rem 0;
  line-height: 1.8;
  font-weight: 700;
  font-size: 1.2rem;
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
}
.guide-cont .guide-cont--checklist .item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4em;
}
.guide-cont .guide-cont--checklist .item .icon {
  width: 1em;
}
.guide-cont .guide-cont--img {
  margin-bottom: 3.6rem;
}

@media screen and (min-width: 961px) {
  .guide-cont {
    margin-bottom: 8rem;
    padding: 5.6rem 6rem;
  }
  .guide-cont .s-inner {
    display: grid;
    grid-template-columns: 48rem 45rem;
    gap: 1em 5em;
    grid-template-rows: auto auto;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .guide-cont .guide-cont--box {
    grid-area: 1/1/2/2;
  }
  .guide-cont .guide-cont--ttl {
    margin-bottom: 0.5em;
    text-align: left;
    font-size: 2.4rem;
  }
  .guide-cont .guide-cont--read {
    margin-bottom: 1.2rem;
    text-align: left;
    font-size: 1.4rem;
  }
  .guide-cont .guide-cont--checklist {
    margin-bottom: 0;
    font-weight: 700;
    font-size: 1.4rem;
  }
  .guide-cont .guide-cont--img {
    grid-area: 1/2/3/3;
    margin-bottom: 0;
  }
  .guide-cont .guide-cont--btn {
    grid-area: 2/1/3/2;
  }
  .guide-cont .guide-cont--btn .link-btn {
    justify-content: flex-start;
  }
}
.update-cont {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.2rem;
  margin-bottom: 3.6rem;
}
.update-cont .update-cont--item .update-cont--img {
  margin-bottom: 1.4rem;
}
.update-cont .update-cont--item .update-cont--ttl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  padding-left: 0.5em;
  font-weight: 700;
  font-size: 1.5rem;
  border-left: 4px solid #191919;
}
.update-cont .update-cont--item .update-cont--ttl .icon {
  width: 1.4em;
}
.update-cont .update-cont--item .update-cont--ttl .icon svg path {
  fill: #191919;
}
.update-cont .update-cont--item .update-cont--body {
  line-height: 1.8;
  font-size: 1.2rem;
}

@media screen and (min-width: 961px) {
  .update-cont {
    display: grid;
    grid-template-columns: repeat(2, 45rem);
    justify-content: space-between;
    gap: 0;
    margin-bottom: 7rem;
  }
  .update-cont .update-cont--item .update-cont--img {
    margin-bottom: 1.8rem;
    overflow: hidden;
    background: #191919;
  }
  .update-cont .update-cont--item .update-cont--img img {
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 0.3s;
  }
  .update-cont .update-cont--item .update-cont--ttl {
    margin-bottom: 1.2rem;
    padding-left: 1em;
    font-size: 2rem;
  }
  .update-cont .update-cont--item .update-cont--body {
    font-size: 1.4rem;
  }
  .update-cont .update-cont--item:hover .update-cont--img img {
    opacity: 0.5;
    transform: scale(1.1);
  }
}
.document-cont {
  display: grid;
  grid-template-columns: 1fr;
  justify-content: space-between;
  gap: 1.2rem;
}
.document-cont .document-cont--item {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 1.2rem 2.4rem;
  align-items: center;
  padding: 1.8rem 2rem;
  border: 1px solid #191919;
  border-radius: 2px;
}
.document-cont .document-cont--item .document-cont--img {
  grid-area: 1/1/3/2;
}
.document-cont .document-cont--item .document-cont--img .hover {
  display: none;
}
.document-cont .document-cont--item .document-cont--ttl {
  grid-area: 1/2/2/3;
  line-height: 1;
  font-weight: 700;
  font-size: 1.5rem;
}
.document-cont .document-cont--item .document-cont--body {
  grid-area: 2/2/3/3;
  line-height: 1.8;
  font-size: 1.2rem;
}

@media screen and (min-width: 961px) {
  .document-cont {
    grid-template-columns: repeat(2, 45rem);
    gap: 0;
  }
  .document-cont .document-cont--item {
    grid-template-columns: 7.4rem 1fr;
    gap: 1rem 4.5rem;
    padding: 2.6rem 4.8rem;
    transition: all 0.3s;
  }
  .document-cont .document-cont--item .document-cont--ttl {
    font-size: 1.8rem;
  }
  .document-cont .document-cont--item .document-cont--body {
    font-size: 1.4rem;
  }
  .document-cont .document-cont--item:hover {
    background: #191919;
  }
  .document-cont .document-cont--item:hover .document-cont--img .normal {
    display: none;
  }
  .document-cont .document-cont--item:hover .document-cont--img .hover {
    display: block;
  }
  .document-cont .document-cont--item:hover .document-cont--ttl,
  .document-cont .document-cont--item:hover .document-cont--body {
    color: #fff;
  }
}