@charset "UTF-8";
.d_flex {
  display: flex; }

body {
  position: relative; }

/*--------------------------
section01
---------------------------*/
#section01 {
  margin: 0;
  padding: 0 0 100px 0;
  overflow: hidden;
  /* --- READ MORE --- */ }
  @media only screen and (min-width: 769px) and (max-width: 1919px) {
    #section01 {
      padding: 0 0 5.2083333333vw 0; } }
  #section01 .title {
    font-family: "Montserrat";
    font-weight: 700;
    font-size: 56px;
    text-align: center;
    letter-spacing: 15px;
    transition: all 0.3s ease-in-out 0s;
    opacity: 0; }
    @media only screen and (min-width: 769px) and (max-width: 1919px) {
      #section01 .title {
        font-size: 2.9166666667vw;
        letter-spacing: 0.78125vw; } }
    @media only screen and (max-width: 768px) {
      #section01 .title {
        font-size: 28px;
        letter-spacing: 7.5px;
        margin: 0 auto;
        width: 85vw; } }
    #section01 .title::before {
      content: "";
      width: 2px;
      height: 100px;
      background-color: #ffffff;
      margin: 0 auto 25px auto;
      display: block; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #section01 .title::before {
          height: 5.2083333333vw; } }
      @media only screen and (max-width: 768px) {
        #section01 .title::before {
          height: 50px; } }
    #section01 .title span {
      display: block;
      font-family: 'Noto Sans Japanese';
      font-weight: 300;
      font-size: 20px;
      padding: 20px 0 0 0; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #section01 .title span {
          height: 5.2083333333vw;
          font-size: 1.0416666667vw;
          padding: 1.0416666667vw 0 0 0; } }
      @media only screen and (max-width: 768px) {
        #section01 .title span {
          height: 50px;
          font-size: 10px;
          padding: 20px 0 0 0; } }
  #section01 .subtitle {
    font-size: 28px;
    font-weight: 300;
    line-height: 1.3846153846;
    letter-spacing: 0.03em;
    text-align: center;
    margin: 30px 0 60px;
    transition: all 0.5s ease-in-out 0.5s;
    transform: translateY(100px);
    opacity: 0; }
    @media only screen and (min-width: 769px) and (max-width: 1919px) {
      #section01 .subtitle {
        font-size: 1.4583333333vw;
        margin: 1.5625vw 0 3.125vw; } }
    @media only screen and (max-width: 768px) {
      #section01 .subtitle {
        font-size: 14px;
        margin: 15px auto 30px auto;
        width: 85vw; } }
    @media only screen and (max-width: 768px) {
      #section01 .subtitle span {
        display: block; } }
  #section01 .sort {
    width: 1000px;
    margin: 25px auto 50px;
    overflow: hidden; }
    @media only screen and (max-width: 768px) {
      #section01 .sort {
        width: 315px;
        margin: 25px auto; } }
    #section01 .sort div {
      transition: all 0.5s ease-in-out 1s;
      opacity: 0; }
    #section01 .sort label {
      font-size: 20px;
      display: inline-block;
      margin: 5px 0; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #section01 .sort label {
          font-size: 1.0416666667vw;
          margin: 5px 0; } }
      @media only screen and (max-width: 768px) {
        #section01 .sort label {
          font-size: 14px; } }
    #section01 .sort ul {
      min-height: 50px;
      display: inline-block; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #section01 .sort ul {
          min-height: 2.6041666667vw; } }
      #section01 .sort ul li {
        font-size: 18px;
        color: #ffffff;
        text-align: center;
        background-color: #cfcfcf;
        min-width: 80px;
        height: 40px;
        border-radius: 5px;
        padding: 10px 15px;
        margin: 0 5px 0 0;
        display: inline-block;
        cursor: pointer;
        transition: all 0.3s ease-in-out 0s; }
        @media only screen and (min-width: 769px) and (max-width: 1919px) {
          #section01 .sort ul li {
            font-size: 0.9375vw;
            min-width: 4.1666666667vw;
            height: 2.0833333333vw;
            border-radius: 0.2604166667vw;
            padding: 0.5208333333vw 0.78125vw;
            margin: 0 0.2604166667vw 0 0; } }
        @media only screen and (max-width: 768px) {
          #section01 .sort ul li {
            font-size: 14px;
            width: 150px;
            min-width: 150px;
            height: 32px;
            border-radius: 4px;
            padding: 8px 0 0 0;
            margin: 0 5px 5px 0; } }
        #section01 .sort ul li.is-active {
          background-color: #7f7f7f;
          box-shadow: 0 5px 5px 0 rgba(51, 51, 51, 0.25); }
        #section01 .sort ul li:hover {
          background-color: #7f7f7f;
          box-shadow: 0 5px 5px 0 rgba(51, 51, 51, 0.25); }
  #section01 .container {
    width: 100%;
    overflow: hidden; }
    @media only screen and (max-width: 768px) {
      #section01 .container {
        display: flex; } }
    #section01 .container ul {
      width: 1000px;
      height: 1200px;
      min-height: 600px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      position: static;
      /* ソート表示設定 */ }
      @media only screen and (max-width: 768px) {
        #section01 .container ul {
          width: 315px;
          height: 1645px;
          min-height: 235px;
          justify-content: space-between; } }
      #section01 .container ul li {
        text-align: center;
        width: 225px;
        margin: 0 25px 75px 0; }
        @media only screen and (min-width: 769px) and (max-width: 1919px) {
          #section01 .container ul li {
            margin: 0 1.3020833333vw 3.90625vw 0; } }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li {
            width: 150px;
            height: 220px;
            margin: 0 0 15px; } }
        #section01 .container ul li label {
          cursor: pointer; }
          #section01 .container ul li label figure {
            overflow: hidden; }
            #section01 .container ul li label figure img:hover {
              transition: all 0.5s ease-in-out 0s;
              transform: scale(1.05); }
            #section01 .container ul li label figure:hover {
              transition: all 0.5s ease-in-out 0s;
              box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.25);
              filter: saturate(100%); }
        #section01 .container ul li h3 {
          font-weight: 600;
          font-size: 20px;
          margin: 25px 0; }
          @media only screen and (min-width: 769px) and (max-width: 1919px) {
            #section01 .container ul li h3 {
              font-size: 1.0416666667vw;
              margin: 1.3020833333vw 0; } }
          @media only screen and (max-width: 768px) {
            #section01 .container ul li h3 {
              font-size: 16px;
              margin: 15px 0; } }
          #section01 .container ul li h3 br {
            display: none; }
            @media only screen and (max-width: 768px) {
              #section01 .container ul li h3 br {
                display: inline; } }
        #section01 .container ul li p {
          font-size: 15px;
          color: #ffffff;
          width: 100px;
          height: 30px;
          border-radius: 15px;
          padding: 7px 0 0 0;
          display: inline-block; }
          @media only screen and (min-width: 769px) and (max-width: 1919px) {
            #section01 .container ul li p {
              font-size: 0.78125vw;
              width: 5.2083333333vw;
              height: 1.5625vw;
              border-radius: 0.78125vw;
              padding: 0.3645833333vw 0 0 0; } }
          @media only screen and (max-width: 768px) {
            #section01 .container ul li p {
              font-size: 14px;
              width: 100px;
              height: 25px;
              border-radius: 12.5px;
              padding: 5px 0 0 0;
              margin: 0 0 5px 0; } }
        #section01 .container ul li p.million {
          background-color: #0081cc;
          transition: all 0.3s ease-in-out 0s; }
          #section01 .container ul li p.million:hover {
            background-color: #1597e3;
            box-shadow: 0 5px 5px 0 rgba(51, 51, 51, 0.25); }
        #section01 .container ul li p.mipelon {
          background-color: #5b1e56;
          transition: all 0.3s ease-in-out 0s; }
          #section01 .container ul li p.mipelon:hover {
            background-color: #752f6f;
            box-shadow: 0 5px 5px 0 rgba(51, 51, 51, 0.25); }
        #section01 .container ul li p.lubmer {
          background-color: #251c58;
          transition: all 0.3s ease-in-out 0s; }
          #section01 .container ul li p.lubmer:hover {
            background-color: #382d73;
            box-shadow: 0 5px 5px 0 rgba(51, 51, 51, 0.25); }
      #section01 .container ul li {
        position: absolute;
        transition: all 0.5s ease-in-out 0s;
        opacity: 0; }
      #section01 .container ul li.is-inactive {
        transform: translate3d(0px, 0px, 0px) scale3d(0.001, 0.001, 0.001);
        opacity: 0; }
      #section01 .container ul li.is-active00 {
        transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active00 {
            transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active01 {
        transform: translate3d(245px, 0px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active01 {
            transform: translate3d(165px, 0px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active02 {
        transform: translate3d(490px, 0px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active02 {
            transform: translate3d(0px, 235px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active03 {
        transform: translate3d(735px, 0px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active03 {
            transform: translate3d(165px, 235px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active04 {
        transform: translate3d(0px, 300px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active04 {
            transform: translate3d(0px, 470px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active05 {
        transform: translate3d(245px, 300px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active05 {
            transform: translate3d(165px, 470px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active06 {
        transform: translate3d(490px, 300px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active06 {
            transform: translate3d(0px, 705px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active07 {
        transform: translate3d(735px, 300px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active07 {
            transform: translate3d(165px, 705px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active08 {
        transform: translate3d(0px, 600px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active08 {
            transform: translate3d(0px, 940px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active09 {
        transform: translate3d(245px, 600px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active09 {
            transform: translate3d(165px, 940px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active10 {
        transform: translate3d(490px, 600px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active10 {
            transform: translate3d(0px, 1175px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active11 {
        transform: translate3d(735px, 600px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active11 {
            transform: translate3d(165px, 1175px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active12 {
        transform: translate3d(0px, 900px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active12 {
            transform: translate3d(0px, 1410px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active13 {
        transform: translate3d(245px, 900px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active13 {
            transform: translate3d(165px, 1410px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active14 {
        transform: translate3d(490px, 900px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active14 {
            transform: translate3d(0px, 1645px, 0px) scale3d(1, 1, 1); } }
      #section01 .container ul li.is-active15 {
        transform: translate3d(735px, 900px, 0px) scale3d(1, 1, 1);
        opacity: 1; }
        @media only screen and (max-width: 768px) {
          #section01 .container ul li.is-active15 {
            transform: translate3d(165px, 1645px, 0px) scale3d(1, 1, 1); } }
  #section01.is-active {
    /* .container {
      ul {
        li {
          transform: translateX(0);
          opacity: 1;
        }
      }
    } */ }
    #section01.is-active .title {
      opacity: 1; }
    #section01.is-active .subtitle {
      transform: translateY(0);
      opacity: 1; }
    #section01.is-active .sort div {
      opacity: 1; }
  #section01 .detail label {
    cursor: pointer; }
  #section01 .detail input {
    display: none; }
    #section01 .detail input:checked + .detailCard {
      z-index: 9999;
      opacity: 100; }
      #section01 .detail input:checked + .detailCard > .detailContents {
        transform: scale(1); }
  #section01 .detail .detailCard {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: -1;
    opacity: 0;
    transition: all 0.5s ease-in-out 0s; }
  #section01 .detail .detailCoverLayer {
    background-color: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0; }
  #section01 .detail .detailContents {
    background-color: #ffffff;
    width: 900px;
    box-shadow: 0 10px 15px 0 rgba(0, 0, 0, 0.5);
    position: absolute;
    left: calc(50% - 450px);
    transform: scale(0.5);
    transition: all 0.5s ease-in-out 0s;
    /* --- Modal Contents --- */ }
    @media only screen and (max-width: 768px) {
      #section01 .detail .detailContents {
        width: 90%;
        left: 5%; } }
    #section01 .detail .detailContents .detailClose[for*="detailCtrl"] {
      width: 50px;
      height: 50px;
      background-color: #010101;
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer; }
      #section01 .detail .detailContents .detailClose[for*="detailCtrl"]:before {
        content: "";
        background-color: #fff;
        width: 24px;
        height: 2px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: rotate(135deg); }
      #section01 .detail .detailContents .detailClose[for*="detailCtrl"]:after {
        content: "";
        background-color: #fff;
        width: 24px;
        height: 2px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: rotate(-135deg); }
    #section01 .detail .detailContents h3 {
      font-size: 30px;
      width: 100%;
      height: 125px;
      margin: 0;
      padding: 35px 50px 15px; }
      @media only screen and (max-width: 768px) {
        #section01 .detail .detailContents h3 {
          font-size: 20px;
          height: 85px;
          padding: 25px 25px 7.5px; } }
      #section01 .detail .detailContents h3 span {
        font-size: 14px;
        line-height: 1.4;
        padding: 15px 0;
        display: block;
        display: block; }
        @media only screen and (max-width: 768px) {
          #section01 .detail .detailContents h3 span {
            font-size: 12px;
            line-height: 1.2; } }
      #section01 .detail .detailContents h3.detail01 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal01.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail02 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal02.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail03 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal03.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail04 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal04.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail05 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal05.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail06 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal06.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail07 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal07.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail08 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal08.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail09 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal09.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail10 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal10.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail11 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal11.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail12 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal12.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail13 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal13.jpg");
        background-size: cover;
        background-position: right center; }
      #section01 .detail .detailContents h3.detail14 {
        background-image: url("/cn/special/uhmw-pe/assets/image/application/bg_modal14.jpg");
        background-size: cover;
        background-position: right center; }
    #section01 .detail .detailContents dl {
      margin: 35px 15px;
      display: block; }
      #section01 .detail .detailContents dl dt {
        font-size: 20px;
        font-weight: 600;
        margin: 15px 35px;
        padding: 0 0 5px 0;
        border-bottom: 2px #5b1e56 solid;
        display: block; }
        @media only screen and (max-width: 768px) {
          #section01 .detail .detailContents dl dt {
            font-size: 16px;
            margin: 7.5px 17.5px;
            padding: 0 0 5px 0; } }
      #section01 .detail .detailContents dl dd {
        font-size: 16px;
        margin: 0 35px 25px;
        display: block;
        position: relative; }
        @media only screen and (max-width: 768px) {
          #section01 .detail .detailContents dl dd {
            font-size: 14px;
            margin: 0 17.5px 12.5px; } }
        #section01 .detail .detailContents dl dd figure {
          width: 100%;
          margin: 0 auto;
          padding: 15px 0; }
    #section01 .detail .detailContents .detailButton {
      font-family: "Montserrat", Tahoma, Helvetica, Arial, sans-serif;
      font-weight: 700;
      font-size: 18px;
      text-align: center;
      color: #ffffff;
      background-color: #010101;
      width: 200px;
      margin: 0 auto 25px;
      padding: 15px 25px;
      display: block;
      cursor: pointer; }
      @media only screen and (max-width: 768px) {
        #section01 .detail .detailContents .detailButton {
          font-size: 12px;
          width: 150px; } }