@charset "UTF-8";
body {
  margin: 0 auto;
  width: 100%;
  overflow-x: hidden; }

@media screen and (min-width: 1301px) {
  .hidden-pc {
    display: none; } }

@media screen and (min-width: 769px) and (max-width: 1300px) {
  .hidden-tab {
    display: none; } }

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

.main {
  padding-top: 0; }
  .main .container {
    max-width: 1000px; }
    @media screen and (min-width: 769px) and (max-width: 1300px) {
      .main .container {
        padding: 0 20px; } }
    @media screen and (max-width: 768px) {
      .main .container {
        padding: 0 20px; } }

.titleBox {
  background: #E5E5E5;
  padding: 2px 4px;
  margin-bottom: 24px; }
  .titleBox h3 {
    font-weight: bold; }

.catalog {
  margin-top: 128px;
  margin-bottom: 96px; }
  .catalog__box {
    display: flex;
    justify-content: center; }
    .catalog__box__btn {
      color: #000;
      text-align: center;
      flex-basis: 30%;
      font-size: 18px;
      padding: 20px 0;
      background: #D8E7F1; }
      @media screen and (max-width: 768px) {
        .catalog__box__btn {
          flex-basis: 100%; } }

.sec1 {
  margin-top: 64px; }
  .sec1__box {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 768px) {
      .sec1__box {
        flex-direction: column; } }
    .sec1__box__img {
      flex-basis: 45%; }
    .sec1__box__content {
      flex-basis: 47.5%; }
      @media screen and (max-width: 768px) {
        .sec1__box__content {
          margin-top: 24px; } }
      .sec1__box__content__item:not(:last-child) {
        margin-bottom: 32px; }
      .sec1__box__content__item h2 {
        font-size: 22px; }
      .sec1__box__content__item p {
        font-size: 17px; }
  .sec1__bottom {
    margin-top: 96px; }
    .sec1__bottom h3 {
      font-weight: bold;
      font-size: 19px;
      padding: 2px 0;
      border-bottom: 1px solid #B2B2B2; }
    .sec1__bottom__box {
      margin-top: 36px;
      display: flex; }
      @media screen and (max-width: 768px) {
        .sec1__bottom__box {
          flex-direction: column; } }
      .sec1__bottom__box__left {
        flex-basis: 21%; }
        @media screen and (max-width: 768px) {
          .sec1__bottom__box__left {
            width: 50%;
            margin: 0 auto; } }
      .sec1__bottom__box__right {
        margin-left: 5%; }
        @media screen and (max-width: 768px) {
          .sec1__bottom__box__right {
            margin: 24px auto 0 auto; } }
        .sec1__bottom__box__right ul {
          display: flex; }
          @media screen and (max-width: 768px) {
            .sec1__bottom__box__right ul {
              justify-content: space-between; } }
          .sec1__bottom__box__right ul li {
            flex-basis: 13%; }
            @media screen and (max-width: 768px) {
              .sec1__bottom__box__right ul li {
                flex-basis: 22.5%; } }
            @media screen and (min-width: 1301px) {
              .sec1__bottom__box__right ul li:not(:last-of-type) {
                margin-right: 5%; } }
            @media screen and (min-width: 769px) and (max-width: 1300px) {
              .sec1__bottom__box__right ul li:not(:last-of-type) {
                margin-right: 5%; } }
            .sec1__bottom__box__right ul li .variationImg {
              margin-bottom: 4px; }
            @media screen and (max-width: 768px) {
              .sec1__bottom__box__right ul li > p {
                font-size: 14px; } }

.sec2 {
  margin-top: 44px; }
  .sec2__wrapper {
    display: flex;
    justify-content: space-between; }
    @media screen and (max-width: 768px) {
      .sec2__wrapper {
        flex-direction: column; } }
  .sec2__box {
    flex-basis: 45%; }
    @media screen and (max-width: 768px) {
      .sec2__box:not(:last-child) {
        margin-bottom: 24px; } }
    .sec2__box .titleBox {
      margin-bottom: 32px; }
    .sec2__box__text > p {
      padding: 2px 0;
      border-bottom: 1px solid #D7D9DB; }
    .sec2__box__text > ul {
      margin-top: 16px; }
      .sec2__box__text > ul li::before {
        content: "▶︎";
        color: #808080; }
    .sec2__box__text > span {
      display: inline-block;
      margin-top: 16px;
      font-size: 14px; }
    .sec2__box__table table {
      width: 100%; }
      .sec2__box__table table tr th, .sec2__box__table table tr td {
        padding-top: 8px;
        border-collapse: collapse;
        border-bottom: 1px solid #4C4C4C;
        text-align: center; }
      .sec2__box__table table tr th {
        width: 45%;
        font-weight: bold;
        border-right: 5px solid #fff;
        font-size: 13px; }
      .sec2__box__table table tr td {
        width: 55%;
        border-left: 5px solid #fff;
        font-size: 15px; }

.sec3 {
  margin-top: 80px; }
  .sec3__box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-top: 12px; }
    @media screen and (max-width: 768px) {
      .sec3__box {
        flex-direction: column; } }
    .sec3__box__item {
      flex-basis: 45%;
      display: flex;
      flex-direction: column; }
      @media screen and (min-width: 1301px) {
        .sec3__box__item:nth-child(n+3) {
          margin-top: 64px; } }
      @media screen and (min-width: 769px) and (max-width: 1300px) {
        .sec3__box__item:nth-child(n+3) {
          margin-top: 64px; } }
      @media screen and (max-width: 768px) {
        .sec3__box__item:nth-child(n+2) {
          margin-top: 24px; } }
      .sec3__box__item h4 {
        padding: 2px 0;
        border-bottom: 1px solid #D7D9DB;
        font-weight: bold;
        margin-bottom: 16px; }
      .sec3__box__item__img {
        margin-bottom: 16px; }
      .sec3__box__item p {
        margin-top: auto; }


.topWrapper .fv__inner {
    height: 330px;
}