@charset "UTF-8";
/*--------------------
共通設定
----------------------*/
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

a {
  text-decoration: none;
  color: #171717;
  transition: .4s; }
  a:hover {
    color: #171717; }
  a:visited {
    color: transparent; }
  a.disabled {
    pointer-events: none;
    text-decoration: none; }

ul, ol {
  list-style: none; }

.pc {
  display: block; }
  @media screen and (max-width: 1080px) {
    .pc {
      display: none; } }

.sp {
  display: none; }
  @media screen and (max-width: 1080px) {
    .sp {
      display: block; } }

p {
  margin: 0;
  padding: 0; }

/*--------------------- ここから ----------------------*/
#fs_ProductCategory h1.ttl {
  text-align: center; }

.category-wrapper {
  max-width: 980px;
  margin: 0 auto 5%;
  text-align: left; }
  .category-wrapper .txt {
    margin: 48px auto;
    width: fit-content;
    max-width: 90%; }
    .category-wrapper .txt h1 {
      font-weight: 400;
      font-size: 1.0em;
      line-height: 2.0;
      margin-bottom: 1.5em; }
      @media screen and (max-width: 600px) {
        .category-wrapper .txt h1 {
          font-size: 3.0vw; } }
    .category-wrapper .txt p {
      font-size: .9em;
      line-height: 2.0; }
      @media screen and (max-width: 600px) {
        .category-wrapper .txt p {
          font-size: 3.0vw;
          text-align: justify-all; } }
  .category-wrapper .subttl {
    font-size: .9em;
    margin-bottom: .5em;
    font-weight: 600; }
    @media screen and (max-width: 600px) {
      .category-wrapper .subttl {
        font-size: 2.8vw; } }
  .category-wrapper .rank_box {
    margin: 1.0em auto; }
  .category-wrapper .feature {
    margin: 10% auto; }
    @media screen and (max-width: 1080px) {
      .category-wrapper .feature {
        width: 95%; } }
    .category-wrapper .feature .subttl {
      margin-left: 1%; }
    .category-wrapper .feature ul {
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      flex-wrap: wrap; }
      .category-wrapper .feature ul li {
        width: calc(100%/2 - 2%);
        margin: 1% 1% 5%; }
        .category-wrapper .feature ul li a {
          display: block; }
          .category-wrapper .feature ul li a h3 {
            width: 95%;
            font-weight: 400;
            font-size: 0.8em;
            margin: 1.5em auto; }
            @media screen and (max-width: 600px) {
              .category-wrapper .feature ul li a h3 {
                font-size: 2.8vw; } }
          .category-wrapper .feature ul li a p {
            width: 95%;
            margin: 0 auto;
            font-size: 0.8em;
            line-height: 1.8; }
            @media screen and (max-width: 600px) {
              .category-wrapper .feature ul li a p {
                font-size: 2.8vw; } }
    .category-wrapper .feature .ranking_item {
      counter-reset: rank;
      margin-bottom: 56px; }
      @media screen and (max-width: 600px) {
        .category-wrapper .feature .ranking_item {
          margin-bottom: 64px; } }
      .category-wrapper .feature .ranking_item .contents {
        position: relative;
        margin-right: 8px;
        overflow: hidden;
        border: 1px solid #f2f2f2; }
        @media screen and (max-width: 1080px) {
          .category-wrapper .feature .ranking_item .contents {
            margin-right: 8px; } }
        .category-wrapper .feature .ranking_item .contents::before {
          counter-increment: rank;
          content: counter(rank);
          position: absolute;
          font-size: .9em;
          left: 8px;
          top: 7px;
          line-height: 1.0;
          color: #ffffff;
          z-index: +1; }
          @media screen and (max-width: 600px) {
            .category-wrapper .feature .ranking_item .contents::before {
              font-size: 2.5vw;
              left: 8px;
              top: 6px; } }
        .category-wrapper .feature .ranking_item .contents::after {
          content: "";
          width: 60px;
          height: 60px;
          transform: rotate(45deg);
          top: -30px;
          left: -30px;
          position: absolute;
          background: #ec6800; }
          @media screen and (max-width: 600px) {
            .category-wrapper .feature .ranking_item .contents::after {
              width: 52px;
              height: 52px;
              top: -26px;
              left: -26px; } }
        .category-wrapper .feature .ranking_item .contents:nth-child(10)::before {
          left: 4px; }

.feature-box {
  margin: 0 auto 5%;
  text-align: left; }
  @media screen and (max-width: 1080px) {
    .feature-box {
      width: 95%; } }
  .feature-box h2 {
    font-size: 1.0em;
    margin-bottom: 1.5em; }
    @media screen and (max-width: 600px) {
      .feature-box h2 {
        font-size: 3.0vw; } }
  .feature-box .articles__slide .contents {
    width: calc(100%/3 + 1%);
    max-width: 300px;
    padding-right: 3%;
    margin: 0; }
    .feature-box .articles__slide .contents h3 {
      font-weight: 400;
      font-size: min(0.8em, 2.8vw);
      margin-top: 0.5em; }

.fs-c-subgroup.center {
  margin: 24px auto;
  max-width: 980px; }