@charset "UTF-8";
.container-case {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: 112rem;
  margin: 0 auto;
  padding: 6rem 1vw; }
  @media only screen and (max-width: 767px) {
    .container-case {
      padding: 3rem 1.5rem; } }

.article-case {
  width: calc(50% - 3.4rem);
  margin: 0 1.7rem 4rem;
  border: .7rem solid #eee;
  position: relative; }
  @media only screen and (max-width: 767px) {
    .article-case {
      width: 100%;
      margin: 0 0 2rem; } }
  .article-case:hover {
    border-color: #000; }
    .article-case:hover .article-case-footer .-btn {
      background: #000; }
  .article-case > a {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 10; }
  .article-case-inner {
    padding: 1rem 2.5rem;
    background: rgba(238, 238, 238, 0.5); }
    @media only screen and (max-width: 767px) {
      .article-case-inner {
        padding: .5rem 1rem; } }
    .article-case-inner div {
      background: #fff;
      border-radius: .5rem;
      padding: 1rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 2rem 0;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .article-case-inner div {
          flex-direction: column;
          padding: 1rem;
          margin: 1rem 0; } }
      .article-case-inner div dt {
        flex-shrink: 0;
        font-size: 1.4rem;
        padding: 0 2rem; }
      .article-case-inner div dd {
        width: 100%;
        padding-right: 1rem; }
        @media only screen and (max-width: 767px) {
          .article-case-inner div dd {
            font-size: 1.3rem; } }
        .article-case-inner div dd ul li {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          margin: .3rem 0; }
      .article-case-inner div.-problem {
        border: 1px solid #eee; }
        .article-case-inner div.-problem:after {
          width: 100%;
          text-align: center;
          content: "\ead0";
          font-family: "material symbols Outlined", cursive;
          color: #999;
          font-size: 3.6rem;
          line-height: 1;
          position: absolute;
          left: 0;
          bottom: -2.5rem;
          z-index: 10; }
          @media only screen and (max-width: 767px) {
            .article-case-inner div.-problem:after {
              font-size: 3rem;
              bottom: -1.5rem; } }
        .article-case-inner div.-problem dt {
          color: #888; }
        .article-case-inner div.-problem dd ul li:before {
          content: "";
          width: .7em;
          height: .7em;
          border-radius: 50%;
          border: .4rem solid #ccc;
          flex-shrink: 0;
          margin-right: .5rem;
          margin-top: .3rem; }
          @media only screen and (max-width: 767px) {
            .article-case-inner div.-problem dd ul li:before {
              border-width: .3rem; } }
      .article-case-inner div.-result {
        border: 1px solid #E24822; }
        .article-case-inner div.-result dt {
          color: #E24822; }
        .article-case-inner div.-result dd ul li:before {
          content: "\f88b";
          font-family: "material symbols Outlined", cursive;
          width: 1em;
          height: 1em;
          border-radius: .3rem;
          background: #eee;
          flex-shrink: 0;
          margin-right: .5rem;
          color: #E24822;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 2.1rem; }
  .article-case-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2.5rem; }
    @media only screen and (max-width: 767px) {
      .article-case-footer {
        padding: 1rem 1.5rem; } }
    .article-case-footer .-company {
      font-size: 1.2rem; }
      @media only screen and (max-width: 767px) {
        .article-case-footer .-company {
          font-size: 1rem; } }
      .article-case-footer .-company strong {
        font-size: 1.6rem; }
        @media only screen and (max-width: 767px) {
          .article-case-footer .-company strong {
            font-size: 1.4rem; } }
    .article-case-footer .-btn {
      padding: .5rem 1.5rem;
      border-radius: 5rem;
      font-size: 1.2rem;
      background: #666;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
      margin-left: 1rem; }
      @media only screen and (max-width: 767px) {
        .article-case-footer .-btn {
          font-size: 1rem;
          margin-left: .5rem; } }
  .article-case-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 2rem 2.5rem; }
    @media only screen and (max-width: 767px) {
      .article-case-header {
        padding: 1.5rem 1rem; } }
    .article-case-header .-fig {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      margin-right: 1.5rem; }
      @media only screen and (max-width: 767px) {
        .article-case-header .-fig {
          margin-right: 1rem; } }
      .article-case-header .-fig figcaption {
        font-size: 1rem;
        color: #fff;
        background: #E24822;
        border-radius: 5rem;
        padding: 0 .8rem; }
        @media only screen and (max-width: 767px) {
          .article-case-header .-fig figcaption {
            font-size: .9rem; } }
      .article-case-header .-fig span {
        font-size: 5rem;
        color: #E24822; }
        @media only screen and (max-width: 767px) {
          .article-case-header .-fig span {
            font-size: 3.5rem; } }
    .article-case-header .-meta {
      position: absolute;
      right: 1rem;
      top: -1.7rem;
      font-size: 1.3rem;
      color: #333;
      border: 1px solid #555;
      background: #fff;
      border-radius: 5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: .3rem 1rem;
      z-index: 5; }
      @media only screen and (max-width: 767px) {
        .article-case-header .-meta {
          font-size: 1.1rem;
          padding: .2rem .6rem;
          top: -1.3rem; } }
      .article-case-header .-meta li {
        margin-right: .3rem;
        font-weight: 700; }
        .article-case-header .-meta li:after {
          content: "/";
          margin-left: .3rem;
          font-weight: 400; }
        .article-case-header .-meta li:nth-last-of-type(1) {
          margin-right: 0; }
          .article-case-header .-meta li:nth-last-of-type(1):after {
            display: none; }
    .article-case-header .-ttl {
      width: 100%;
      font-size: 2rem;
      line-height: 1.4;
      text-align: left; }
      @media only screen and (max-width: 767px) {
        .article-case-header .-ttl {
          font-size: 1.6rem; } }

.article-detail {
  max-width: 102.4rem;
  margin: 4rem auto 4rem;
  border: .8rem solid #eee;
  position: relative; }
  @media only screen and (max-width: 767px) {
    .article-detail {
      margin: 1.5rem 0;
      border: none; } }
  .article-detail-inner {
    padding: 4rem 4rem 2rem;
    background: rgba(238, 238, 238, 0.5);
    overflow: hidden; }
    @media only screen and (max-width: 767px) {
      .article-detail-inner {
        padding: 1.5rem; } }
    .article-detail-inner h3 {
      background: #fff;
      font-size: 2.6rem;
      border-left: 0.8rem solid #E24822;
      padding: 1.5rem;
      margin-bottom: 1em; }
      @media only screen and (max-width: 767px) {
        .article-detail-inner h3 {
          font-size: 2rem;
          line-height: 1.3;
          padding: 1rem 1.5rem;
          border-width: .5rem;
          margin-bottom: .7em; } }
    .article-detail-inner h4 {
      font-size: 2.2rem;
      border-bottom: .3rem solid #eee;
      padding: 1.5rem 0;
      margin-bottom: 1em;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .article-detail-inner h4 {
          font-size: 1.8rem;
          line-height: 1.3;
          padding: 1rem .2rem; } }
      .article-detail-inner h4:after {
        content: "";
        width: 5em;
        height: .3rem;
        background: #E24822;
        position: absolute;
        left: 0;
        bottom: -.3rem; }
    .article-detail-inner ul {
      padding-bottom: 1em; }
      .article-detail-inner ul li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: .8rem;
        font-size: 1.6rem; }
        @media only screen and (max-width: 767px) {
          .article-detail-inner ul li {
            font-size: 1.4rem; } }
        .article-detail-inner ul li:before {
          content: "";
          width: .8em;
          height: .8em;
          background: #bbb;
          flex-shrink: 0;
          margin-right: .8rem;
          border-radius: 50%;
          margin-top: .5rem; }
    .article-detail-inner ol {
      padding-bottom: 1em; }
      .article-detail-inner ol li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: .8rem;
        font-size: 1.6rem; }
        @media only screen and (max-width: 767px) {
          .article-detail-inner ol li {
            font-size: 1.4rem; } }
        .article-detail-inner ol li:before {
          content: "";
          width: 1.5em;
          height: 1.5em;
          background: #555;
          color: #fff;
          flex-shrink: 0;
          margin-right: .8rem;
          margin-top: .2rem;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          letter-spacing: 0;
          font-size: 1.4rem;
          font-weight: 700; }
          @media only screen and (max-width: 767px) {
            .article-detail-inner ol li:before {
              font-size: 1.3rem;
              margin-top: .1rem; } }
        .article-detail-inner ol li:nth-of-type(1):before {
          content: "1"; }
        .article-detail-inner ol li:nth-of-type(2):before {
          content: "2"; }
        .article-detail-inner ol li:nth-of-type(3):before {
          content: "3"; }
        .article-detail-inner ol li:nth-of-type(4):before {
          content: "4"; }
        .article-detail-inner ol li:nth-of-type(5):before {
          content: "5"; }
        .article-detail-inner ol li:nth-of-type(6):before {
          content: "6"; }
        .article-detail-inner ol li:nth-of-type(7):before {
          content: "7"; }
        .article-detail-inner ol li:nth-of-type(8):before {
          content: "8"; }
        .article-detail-inner ol li:nth-of-type(9):before {
          content: "9"; }
        .article-detail-inner ol li:nth-of-type(10):before {
          content: "10"; }
        .article-detail-inner ol li:nth-of-type(11):before {
          content: "11"; }
        .article-detail-inner ol li:nth-of-type(12):before {
          content: "12"; }
        .article-detail-inner ol li:nth-of-type(13):before {
          content: "13"; }
        .article-detail-inner ol li:nth-of-type(14):before {
          content: "14"; }
        .article-detail-inner ol li:nth-of-type(15):before {
          content: "15"; }
        .article-detail-inner ol li:nth-of-type(16):before {
          content: "16"; }
        .article-detail-inner ol li:nth-of-type(17):before {
          content: "17"; }
        .article-detail-inner ol li:nth-of-type(18):before {
          content: "18"; }
        .article-detail-inner ol li:nth-of-type(19):before {
          content: "19"; }
    .article-detail-inner p {
      font-size: 1.6rem;
      line-height: 2;
      text-align: left;
      padding-bottom: 1em; }
      @media only screen and (max-width: 767px) {
        .article-detail-inner p {
          font-size: 1.4rem; } }
      .article-detail-inner p strong {
        color: #E24822; }
    .article-detail-inner mark {
      font-weight: 700;
      background: #E24822;
      color: #fff; }
    .article-detail-inner .alignright {
      max-width: 50%;
      float: right;
      margin-left: 2em;
      margin-bottom: 2em;
      margin-right: .5em; }
      @media only screen and (max-width: 767px) {
        .article-detail-inner .alignright {
          max-width: 100%;
          float: none;
          margin-left: auto;
          margin-right: auto; } }
    .article-detail-inner .alignleft {
      max-width: 50%;
      float: left;
      margin-right: 2em;
      margin-left: .5em;
      margin-bottom: 2em; }
      @media only screen and (max-width: 767px) {
        .article-detail-inner .alignleft {
          max-width: 100%;
          float: none;
          margin-left: auto;
          margin-right: auto; } }
    .article-detail-inner .aligncenter {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 2em;
      max-width: 64rem; }
    .article-detail-inner small {
      font-size: 80%; }
    .article-detail-inner pre {
      display: block; }
    .article-detail-inner strong {
      font-weight: bold; }
    .article-detail-inner em {
      font-style: italic; }
    .article-detail-inner blockquote {
      display: block;
      margin: 1em 4em;
      position: relative; }
      .article-detail-inner blockquote:before {
        content: "“";
        position: absolute;
        left: -1em;
        font-size: 4em;
        line-height: 1;
        opacity: 0.5;
        top: 0; }
      .article-detail-inner blockquote:after {
        content: "”";
        position: absolute;
        right: -1em;
        font-size: 4em;
        line-height: 1;
        opacity: 0.5;
        bottom: 0; }
    .article-detail-inner a {
      color: #666; }
    .article-detail-inner del {
      text-decoration: line-through; }
    .article-detail-inner hr {
      display: block;
      border: none;
      border-top: #9a9a9a 1px solid;
      border-bottom: #eeeeee 1px solid;
      margin-bottom: 1em; }
    .article-detail-inner table {
      border-top: 1px solid #ccc;
      border-left: 1px solid #ccc;
      width: 100%;
      margin-bottom: 2em; }
      .article-detail-inner table tr:nth-of-type(1) th {
        background: rgba(238, 238, 238, 0.5); }
      .article-detail-inner table tr th, .article-detail-inner table tr td {
        padding: 1.5em;
        text-align: center;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc; }
  @media only screen and (max-width: 767px) {
    .article-detail-header {
      position: relative; } }
  .article-detail-header .-meta {
    background: #E24822;
    padding: 2rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center; }
    @media only screen and (max-width: 767px) {
      .article-detail-header .-meta {
        flex-direction: column-reverse;
        padding: 0;
        background: none; } }
    .article-detail-header .-meta .-company {
      color: #fff;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline; }
      @media only screen and (max-width: 767px) {
        .article-detail-header .-meta .-company {
          width: 100%;
          color: #666;
          position: absolute;
          left: 0;
          top: 0;
          background: rgba(255, 255, 255, 0.8);
          padding: 1rem; } }
      .article-detail-header .-meta .-company p {
        font-size: 2.4rem;
        font-weight: 700; }
        @media only screen and (max-width: 767px) {
          .article-detail-header .-meta .-company p {
            font-size: 1.8rem;
            line-height: 1.3; } }
      .article-detail-header .-meta .-company dl {
        display: flex;
        align-items: baseline;
        margin-left: .8rem; }
        .article-detail-header .-meta .-company dl dt {
          font-size: 1.5rem;
          font-weight: 400;
          margin-right: .3rem; }
          @media only screen and (max-width: 767px) {
            .article-detail-header .-meta .-company dl dt {
              font-size: 1.2rem; } }
        .article-detail-header .-meta .-company dl dd {
          font-size: 1.8rem; }
          @media only screen and (max-width: 767px) {
            .article-detail-header .-meta .-company dl dd {
              font-size: 1.4rem; } }
    .article-detail-header .-meta .-cat {
      display: flex;
      flex-wrap: wrap; }
      @media only screen and (max-width: 767px) {
        .article-detail-header .-meta .-cat {
          width: 100%;
          position: absolute;
          right: 1rem;
          top: calc(60vw - 1rem);
          justify-content: flex-end; } }
      .article-detail-header .-meta .-cat li {
        margin: .25rem 0 .25rem .5rem; }
        @media only screen and (max-width: 767px) {
          .article-detail-header .-meta .-cat li {
            margin: .2rem; } }
        .article-detail-header .-meta .-cat li a {
          background: #fff;
          border-radius: 5rem;
          color: #E24822;
          font-weight: 700;
          padding: .5rem 1.8rem;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 1.6rem; }
          @media only screen and (max-width: 767px) {
            .article-detail-header .-meta .-cat li a {
              font-size: 1.1rem;
              padding: .2rem 1rem;
              background: #E24822;
              color: #fff; } }
          .article-detail-header .-meta .-cat li a:hover {
            color: #282422; }
          .article-detail-header .-meta .-cat li a span {
            font-size: 2.6rem;
            line-height: 1;
            margin-right: .5rem; }
            @media only screen and (max-width: 767px) {
              .article-detail-header .-meta .-cat li a span {
                font-size: 1.8rem; } }
  .article-detail-header .-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4rem; }
    @media only screen and (max-width: 767px) {
      .article-detail-header .-wrap {
        padding: 0 0 1.5rem;
        flex-direction: column-reverse; } }
  .article-detail-header .-inner {
    flex-shrink: 0; }
    @media only screen and (max-width: 767px) {
      .article-detail-header .-inner {
        width: 100%; } }
  .article-detail-header .-fig {
    max-width: 35rem;
    flex-shrink: 0;
    aspect-ratio: 3 / 2;
    overflow: hidden; }
    @media only screen and (max-width: 767px) {
      .article-detail-header .-fig {
        width: 100%;
        max-width: 100%; } }
  .article-detail-header .-ttl {
    width: 100%;
    font-size: 3.2rem;
    text-align: left;
    padding-bottom: 1.5rem; }
    @media only screen and (max-width: 767px) {
      .article-detail-header .-ttl {
        font-size: 2.2rem;
        padding: 1.5rem 1.5rem 1rem; } }
  .article-detail-header .-tag {
    display: flex;
    justify-content: flex-start; }
    @media only screen and (max-width: 767px) {
      .article-detail-header .-tag {
        padding: 0 1rem; } }
    .article-detail-header .-tag li {
      margin: .3rem .6rem .3rem 0; }
      .article-detail-header .-tag li a {
        border: 1px solid #E24822;
        border-radius: .3rem;
        padding: .3rem 1rem;
        color: #E24822; }
        @media only screen and (max-width: 767px) {
          .article-detail-header .-tag li a {
            font-size: 1.2rem; } }
        .article-detail-header .-tag li a:hover {
          background: #E24822;
          color: #fff; }
  .article-detail-matome {
    padding: 4rem; }
    @media only screen and (max-width: 767px) {
      .article-detail-matome {
        padding: 1.5rem; } }
    .article-detail-matome div {
      padding: 2.5rem 4rem;
      border-radius: .5rem;
      margin-bottom: 2rem;
      position: relative; }
      @media only screen and (max-width: 767px) {
        .article-detail-matome div {
          padding: 1.5rem; } }
      .article-detail-matome div:after {
        width: 100%;
        text-align: center;
        content: "\ead0";
        font-family: "material symbols Outlined", cursive;
        color: #999;
        font-size: 3.6rem;
        line-height: 1;
        position: absolute;
        left: 0;
        bottom: -2.5rem;
        z-index: 10; }
      .article-detail-matome div dt {
        font-size: 2rem;
        text-align: center;
        padding-bottom: 1.5rem; }
        @media only screen and (max-width: 767px) {
          .article-detail-matome div dt {
            font-size: 1.6rem; } }
      .article-detail-matome div dd {
        display: flex;
        justify-content: center;
        font-size: 1.6rem; }
        @media only screen and (max-width: 767px) {
          .article-detail-matome div dd {
            font-size: 1.3rem; } }
        .article-detail-matome div dd strong {
          color: #E24822; }
        .article-detail-matome div dd mark {
          background: #E24822;
          color: #fff;
          font-weight: 700; }
    .article-detail-matome .-problem {
      border: .3rem solid #eee; }
      .article-detail-matome .-problem dd ul li {
        position: relative;
        padding-left: 2.5rem;
        margin-bottom: .5rem; }
        .article-detail-matome .-problem dd ul li:before {
          content: "";
          width: .8em;
          height: .8em;
          border: .3rem solid #ccc;
          flex-shrink: 0;
          border-radius: 50%;
          position: absolute;
          left: 0;
          top: .3rem; }
    .article-detail-matome .-cser {
      border: 0.1rem solid #E24822; }
      .article-detail-matome .-cser dt {
        color: #E24822; }
      .article-detail-matome .-cser dd {
        display: block; }
        .article-detail-matome .-cser dd dl {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          padding: 1.5rem;
          border-bottom: 1px solid #eee; }
          @media only screen and (max-width: 767px) {
            .article-detail-matome .-cser dd dl {
              padding: 1rem 0; } }
          .article-detail-matome .-cser dd dl:nth-of-type(1) {
            border-top: 1px solid #eee; }
          .article-detail-matome .-cser dd dl dt {
            color: #E24822;
            font-size: 1.6rem;
            padding: 0 1.5rem;
            flex-shrink: 0; }
            @media only screen and (max-width: 767px) {
              .article-detail-matome .-cser dd dl dt {
                font-size: 1.3rem; } }
          .article-detail-matome .-cser dd dl dd {
            width: 100%;
            font-weight: 700;
            line-height: 1.4; }
            .article-detail-matome .-cser dd dl dd small {
              font-size: 1.2rem; }
              @media only screen and (max-width: 767px) {
                .article-detail-matome .-cser dd dl dd small {
                  font-size: 1rem; } }
    .article-detail-matome .-result {
      border: 0.3rem solid #E24822;
      margin-bottom: 0; }
      .article-detail-matome .-result:after {
        display: none; }
      .article-detail-matome .-result dt {
        color: #E24822; }
      .article-detail-matome .-result dd ul li {
        font-size: 1.8rem;
        font-weight: 700;
        position: relative;
        padding-left: 3.5rem;
        margin-bottom: .8rem; }
        @media only screen and (max-width: 767px) {
          .article-detail-matome .-result dd ul li {
            font-size: 1.4rem;
            padding-left: 3rem;
            margin-bottom: 1.5rem; } }
        .article-detail-matome .-result dd ul li:before {
          content: "\e5ca";
          width: 1.4em;
          height: 1.4em;
          font-family: "material symbols Outlined", cursive;
          color: #fff;
          background: #E24822;
          flex-shrink: 0;
          position: absolute;
          left: 0;
          top: .3rem;
          border-radius: .3rem;
          display: flex;
          justify-content: center;
          align-items: center;
          letter-spacing: 0; }
          @media only screen and (max-width: 767px) {
            .article-detail-matome .-result dd ul li:before {
              top: 0; } }
  .article-detail-voice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4rem 4rem; }
    @media only screen and (max-width: 767px) {
      .article-detail-voice {
        flex-direction: column;
        padding: 1.5rem; } }
    .article-detail-voice .-ttl {
      flex-shrink: 0;
      padding: 0 4rem 0 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      flex-shrink: 0; }
      @media only screen and (max-width: 767px) {
        .article-detail-voice .-ttl {
          padding: 0 0 .5rem; } }
      .article-detail-voice .-ttl .material-symbols-outlined {
        font-size: 5rem;
        color: #E24822; }
        @media only screen and (max-width: 767px) {
          .article-detail-voice .-ttl .material-symbols-outlined {
            font-size: 4rem; } }
      .article-detail-voice .-ttl .-voice {
        font-size: 1.8rem; }
        @media only screen and (max-width: 767px) {
          .article-detail-voice .-ttl .-voice {
            font-size: 1.6rem; } }
    .article-detail-voice .-inner {
      width: 100%; }
      .article-detail-voice .-inner p {
        font-size: 1.6rem;
        background: rgba(238, 238, 238, 0.5);
        padding: 2rem;
        border-radius: 1rem;
        margin: 1rem 0; }
        @media only screen and (max-width: 767px) {
          .article-detail-voice .-inner p {
            font-size: 1.4rem; } }

.page-nav {
  padding: 2.5vw 0 6vw;
  display: flex;
  justify-content: center;
  align-items: center; }
  @media only screen and (max-width: 767px) {
    .page-nav {
      padding: 0 0 4rem; } }
  .page-nav li {
    display: flex;
    align-items: center;
    justify-content: center; }
    .page-nav li:after {
      content: "";
      width: .3rem;
      height: 2.8rem;
      background: #eee;
      margin: 0 1.5rem; }
      @media only screen and (max-width: 767px) {
        .page-nav li:after {
          width: .2rem; } }
    .page-nav li:nth-last-of-type(1):after {
      display: none; }
    .page-nav li > a, .page-nav li > span {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 1.6rem;
      padding: 0 3rem;
      height: 2.8rem;
      font-weight: 700; }
      @media only screen and (max-width: 767px) {
        .page-nav li > a, .page-nav li > span {
          font-size: 1.2rem;
          padding: 0; } }
      .page-nav li > a span, .page-nav li > span span {
        margin: 0 1.5rem;
        color: #999;
        font-size: 2.4rem; }
        @media only screen and (max-width: 767px) {
          .page-nav li > a span, .page-nav li > span span {
            font-size: 1.8rem; } }
    .page-nav li > a:hover {
      color: #E24822; }
    .page-nav li > span {
      opacity: 0.5; }