.d_flex {
  display: flex; }

body {
  position: relative; }

/*--------------------------
main_visual
---------------------------*/
#main_visual {
  margin: 0;
  padding: 0;
  overflow: hidden; }
  #main_visual .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) {
      #main_visual .title {
        font-size: 2.9166666667vw;
        letter-spacing: 0.78125vw; } }
    @media only screen and (max-width: 768px) {
      #main_visual .title {
        font-size: 28px;
        letter-spacing: 7.5px;
        margin: 0 auto;
        width: 85vw; } }
    #main_visual .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) {
        #main_visual .title::before {
          height: 5.2083333333vw; } }
      @media only screen and (max-width: 768px) {
        #main_visual .title::before {
          height: 50px; } }
    #main_visual .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) {
        #main_visual .title span {
          height: 5.2083333333vw;
          font-size: 1.0416666667vw;
          padding: 1.0416666667vw 0 0 0; } }
      @media only screen and (max-width: 768px) {
        #main_visual .title span {
          height: 50px;
          font-size: 10px;
          padding: 20px 0 0 0; } }
  #main_visual .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;
    opacity: 0; }
    @media only screen and (min-width: 769px) and (max-width: 1919px) {
      #main_visual .subtitle {
        font-size: 1.4583333333vw;
        margin: 1.5625vw 0 3.125vw; } }
    @media only screen and (max-width: 768px) {
      #main_visual .subtitle {
        font-size: 14px;
        margin: 15px auto 30px auto;
        width: 85vw; } }
    @media only screen and (max-width: 768px) {
      #main_visual .subtitle span {
        display: block; } }
  #main_visual .container {
    width: 100%;
    transition: all 1s ease-in-out 0.5s;
    opacity: 0; }
    #main_visual .container div {
      color: #010101;
      width: 100%;
      height: 540px;
      overflow: hidden; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #main_visual .container div {
          height: 28.125vw; } }
      @media only screen and (max-width: 768px) {
        #main_visual .container div {
          height: 250px; } }
      #main_visual .container div h2 {
        font-weight: 600;
        font-size: 30px;
        line-height: 1.6;
        text-align: center;
        color: #363e45;
        margin: 325px 0 0 0; }
        @media only screen and (min-width: 769px) and (max-width: 1919px) {
          #main_visual .container div h2 {
            font-size: 1.5625vw;
            margin: 16.9270833333vw 0 0 0; } }
        @media only screen and (max-width: 768px) {
          #main_visual .container div h2 {
            font-size: 16px;
            width: 85vw;
            margin: 125px auto;
            padding: 0; } }
      #main_visual .container div ul {
        width: 1000px;
        margin: 300px auto 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap; }
        @media only screen and (min-width: 769px) and (max-width: 1919px) {
          #main_visual .container div ul {
            margin: 15.625vw auto 0; } }
        @media only screen and (max-width: 768px) {
          #main_visual .container div ul {
            width: 85vw;
            margin: 100px auto 0; } }
        #main_visual .container div ul li {
          font-weight: 600;
          font-size: 28px;
          line-height: 1.6;
          text-align: center;
          letter-spacing: 0;
          color: #ffffff;
          border-radius: 30px;
          margin: 15px 10px;
          padding: 5px 25px; }
          @media only screen and (min-width: 769px) and (max-width: 1919px) {
            #main_visual .container div ul li {
              font-size: 1.4583333333vw;
              margin: 0.78125vw 0.5208333333vw;
              padding: 0.2604166667vw 1.3020833333vw; } }
          @media only screen and (max-width: 768px) {
            #main_visual .container div ul li {
              font-size: 16px;
              margin: 10px 5px 0;
              padding: 5px 10px; } }
      #main_visual .container div.contribution {
        background-image: url("/cn/special/uhmw-pe/assets/image/sustainability/bg_sustinability.jpg");
        background-size: cover;
        background-position: center center; }
        @media only screen and (max-width: 768px) {
          #main_visual .container div.contribution {
            background-image: url("/cn/special/uhmw-pe/assets/image/sustainability/bg_sustinability_sp.jpg");
            background-size: cover;
            background-position: center center; } }
      #main_visual .container div.blue-value {
        background-image: url("/cn/special/uhmw-pe/assets/image/sustainability/bg_blue-value.jpg");
        background-size: cover;
        background-position: center center; }
        @media only screen and (max-width: 768px) {
          #main_visual .container div.blue-value {
            background-image: url("/cn/special/uhmw-pe/assets/image/sustainability/bg_blue-value_sp.jpg");
            background-size: cover;
            background-position: center center; } }
        #main_visual .container div.blue-value ul li {
          background-color: #56add0; }
      #main_visual .container div.rose-value {
        background-image: url("/cn/special/uhmw-pe/assets/image/sustainability/bg_rose-value.jpg");
        background-size: cover;
        background-position: center center; }
        @media only screen and (max-width: 768px) {
          #main_visual .container div.rose-value {
            background-image: url("/cn/special/uhmw-pe/assets/image/sustainability/bg_rose-value_sp.jpg");
            background-size: cover;
            background-position: center center; } }
        #main_visual .container div.rose-value ul li {
          background-color: #d677a4; }
    #main_visual .container .breadcrumb {
      font-size: 18px;
      line-height: 1.6;
      width: 100vw;
      padding: 25px 50px; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #main_visual .container .breadcrumb {
          font-size: 0.9375vw;
          padding: 1.3020833333vw 2.6041666667vw; } }
      @media only screen and (max-width: 768px) {
        #main_visual .container .breadcrumb {
          font-size: 14px;
          padding: 25px 7.5vw; } }
      #main_visual .container .breadcrumb a:hover {
        color: #cd1976; }
  #main_visual.is-active .title {
    opacity: 1; }
  #main_visual.is-active .subtitle {
    transform: translateY(0);
    opacity: 1; }
  #main_visual.is-active .container {
    transform: translateY(0);
    opacity: 1; }

/*--------------------------
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; } }
  @media only screen and (max-width: 768px) {
    #section01 {
      padding: 0 0 50px 0; } }
  #section01 .container {
    width: 1000px;
    min-width: 1000px;
    margin: 0 auto; }
    @media only screen and (max-width: 768px) {
      #section01 .container {
        width: 85vw;
        min-width: 85vw; } }
    #section01 .container .copy {
      font-size: 24px;
      line-height: 1.6;
      width: 100%;
      margin: 50px 0;
      padding: 0 50px;
      transition: all 0.3s ease-in-out 0s;
      transform: translateY(100px);
      opacity: 0; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #section01 .container .copy {
          font-size: 1.25vw; } }
      @media only screen and (max-width: 768px) {
        #section01 .container .copy {
          font-size: 16px;
          margin: 25px 0 50px;
          padding: 0; } }
      #section01 .container .copy.is-active {
        transform: translateY(0);
        opacity: 1; }
    #section01 .container article {
      margin: 25px 0 50px 0;
      transition: all 0.3s ease-in-out 0s;
      transform: translateY(100px);
      opacity: 0; }
      #section01 .container article ul {
        border-bottom: 3px #d8d8d8 solid;
        margin: 0 25px 15px; }
        @media only screen and (min-width: 769px) and (max-width: 1919px) {
          #section01 .container article ul {
            margin: 0 1.3020833333vw 0.78125vw 0; } }
        @media only screen and (max-width: 768px) {
          #section01 .container article ul {
            margin: 0 5px 10px 0; } }
        #section01 .container article ul li {
          font-weight: 600;
          font-size: 24px;
          line-height: 1.6;
          text-align: center;
          letter-spacing: 0;
          color: #ffffff;
          border-radius: 30px;
          margin: 0 10px 15px;
          padding: 5px 25px;
          display: inline-block; }
          @media only screen and (min-width: 769px) and (max-width: 1919px) {
            #section01 .container article ul li {
              font-size: 1.25vw;
              margin: 0 0.5208333333vw 0.78125vw;
              padding: 0.2604166667vw 1.3020833333vw; } }
          @media only screen and (max-width: 768px) {
            #section01 .container article ul li {
              font-size: 14px;
              margin: 0 5px 10px;
              padding: 5px 10px; } }
      #section01 .container article.blue-value ul li {
        background-color: #56add0; }
      #section01 .container article.rose-value ul li {
        background-color: #d677a4; }
      #section01 .container article.is-active {
        transform: translateY(0);
        opacity: 1; }
    #section01 .container div.flexbox {
      display: flex;
      justify-content: center; }
      @media only screen and (max-width: 768px) {
        #section01 .container div.flexbox {
          display: block; } }
      #section01 .container div.flexbox div.blue-value_text,
      #section01 .container div.flexbox div.rose-value_text {
        width: 650px; }
        @media only screen and (max-width: 768px) {
          #section01 .container div.flexbox div.blue-value_text,
          #section01 .container div.flexbox div.rose-value_text {
            width: 100%; } }
      #section01 .container div.flexbox figure {
        margin: 0 0 25px 0;
        text-align: center; }
    #section01 .container div.entrance {
      margin: 0 0 50px 0;
      width: 50%;
      transition: all 0.3s ease-in-out 0s;
      transform: translateY(100px);
      opacity: 0; }
      @media only screen and (max-width: 768px) {
        #section01 .container div.entrance {
          width: 100%; } }
      #section01 .container div.entrance.is-active {
        transform: translateY(0);
        opacity: 1; }
    #section01 .container h3.category {
      font-size: 28px;
      font-weight: 600;
      line-height: 1.6;
      margin: 15px; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #section01 .container h3.category {
          font-size: 1.4583333333vw;
          margin: 0.78125vw; } }
      @media only screen and (max-width: 768px) {
        #section01 .container h3.category {
          font-size: 20px;
          margin: 5px; } }
    #section01 .container p.product {
      font-size: 26px;
      font-weight: 600;
      line-height: 1.6;
      margin: 15px; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #section01 .container p.product {
          font-size: 1.3541666667vw;
          margin: 0.78125vw; } }
      @media only screen and (max-width: 768px) {
        #section01 .container p.product {
          font-size: 16px;
          margin: 5px; } }
    #section01 .container p.text {
      font-size: 24px;
      line-height: 1.6;
      margin: 15px; }
      @media only screen and (min-width: 769px) and (max-width: 1919px) {
        #section01 .container p.text {
          font-size: 1.25vw;
          margin: 0.78125vw; } }
      @media only screen and (max-width: 768px) {
        #section01 .container p.text {
          font-size: 14px;
          margin: 5px 5px 15px; } }
  #section01 .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;
    padding: 15px 25px;
    display: block;
    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: 22px;
      margin: 15px; }
      @media only screen and (max-width: 768px) {
        #section01 .detail .detailContents h3 {
          font-size: 18px; } }
    #section01 .detail .detailContents ul {
      display: flex;
      justify-content: center;
      margin: 15px; }
      @media only screen and (max-width: 768px) {
        #section01 .detail .detailContents ul {
          display: block; } }
      #section01 .detail .detailContents ul li {
        margin: 0 15px 0 0; }
        @media only screen and (max-width: 768px) {
          #section01 .detail .detailContents ul li {
            margin: 0 0 15px 0; } }
    #section01 .detail .detailContents figure {
      width: 500px; }
      @media only screen and (max-width: 768px) {
        #section01 .detail .detailContents figure {
          width: 100%; } }
    #section01 .detail .detailContents p {
      font-size: 16px;
      line-height: 1.6;
      margin: 10px 0; }
      @media only screen and (max-width: 768px) {
        #section01 .detail .detailContents p {
          font-size: 14px;
          line-height: 1.4; } }
    #section01 .detail .detailContents span {
      font-size: 14px;
      line-height: 1.4;
      display: block; }
      @media only screen and (max-width: 768px) {
        #section01 .detail .detailContents span {
          font-size: 12px;
          line-height: 1.2; } }