.stripeLayer {
  position: absolute;
  transform: rotate(28deg);
  background-repeat: repeat;
  background-position: 0 0; }
  @media only screen and (max-width: 767px) {
    .stripeLayer {
      background-size: 915px auto; } }
  .stripeLayer[data-type="a"] {
    background-image: url(../img/frame/bg_stripe_pattern01_h-min.png); }
  .stripeLayer[data-type="b"] {
    background-image: url(../img/frame/bg_stripe_pattern01_m-min.png); }
  .stripeLayer[data-type="c"] {
    background-image: url(../img/frame/bg_stripe_pattern01_l-min.png); }
  .stripeLayer[data-type="d"] {
    background-image: url(../img/frame/bg_stripe_pattern02_h-min.png); }
  .stripeLayer[data-type="e"] {
    background-image: url(../img/frame/bg_stripe_pattern02_m-min.png); }
  .stripeLayer[data-type="f"] {
    background-image: url(../img/frame/bg_stripe_pattern02_l-min.png); }
  .stripeLayer[data-speed="high"] {
    -webkit-animation: bgLoop 3s linear infinite;
    animation: bgLoop 2s linear infinite; }
  .stripeLayer[data-speed="middle"] {
    -webkit-animation: bgLoop 6s linear infinite;
    animation: bgLoop 4s linear infinite; }
  .stripeLayer[data-speed="low"] {
    -webkit-animation: bgLoop 9s linear infinite;
    animation: bgLoop 6s linear infinite; }

.l-extraWrapper .intro {
  position: relative;
  z-index: 2;
  padding-bottom: 100px; }
  @media only screen and (max-width: 767px) {
    .l-extraWrapper .intro {
      padding-bottom: 50px; } }
  .l-extraWrapper .intro__hero {
    width: 100%;
    height: 440px;
    overflow: hidden; }
    @media only screen and (max-width: 767px) {
      .l-extraWrapper .intro__hero {
        height: 220px; } }
    .l-extraWrapper .intro__hero > div {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      background-image: url(../img/strength/intro_hero.jpg);
      /*pre animation*/
      opacity: 0;
      transform: scale(1.1); }
    .l-extraWrapper .intro__hero.is-animated > div {
      opacity: 1;
      transform: scale(1);
      transition: 1.4s all cubic-bezier(0.23, 1, 0.32, 1); }
  .l-extraWrapper .intro__leading {
    padding-top: 50px; }
    .l-extraWrapper .intro__leading__hl {
      text-align: center;
      font-weight: 600;
      color: #008B32;
      font-size: 30px;
      margin-bottom: 30px;
      /*pre animation*/
      opacity: 0;
      transform: translateY(40px); }
      @media only screen and (max-width: 767px) {
        .l-extraWrapper .intro__leading__hl {
          font-size: 22px; } }
    .l-extraWrapper .intro__leading__rt {
      font-size: 16px;
      line-height: 2.625;
      /*pre animation*/
      opacity: 0;
      transform: translateY(40px); }
      @media only screen and (max-width: 767px) {
        .l-extraWrapper .intro__leading__rt {
          font-size: 14px;
          line-height: 2.14285714286; } }
    .l-extraWrapper .intro__leading.is-animated .intro__leading__hl {
      opacity: 1;
      transform: translateY(0);
      transition: 1.4s all cubic-bezier(0.23, 1, 0.32, 1); }
    .l-extraWrapper .intro__leading.is-animated .intro__leading__rt {
      opacity: 1;
      transform: translateY(0);
      transition: 1.4s all cubic-bezier(0.23, 1, 0.32, 1) 0.1s; }
.l-extraWrapper .strength {
  position: relative;
  padding-bottom: 120px; }
  @media only screen and (max-width: 767px) {
    .l-extraWrapper .strength {
      padding-bottom: 60px; } }
  .l-extraWrapper .strength__eachStrength {
    position: relative;
    padding-top: 90px;
    padding-bottom: 90px; }
    @media only screen and (max-width: 767px) {
      .l-extraWrapper .strength__eachStrength {
        padding-top: 50px !important;
        padding-bottom: 35px !important; } }
    .l-extraWrapper .strength__eachStrength:after {
      width: 300%;
      height: 100%;
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: -100%;
      background-color: #FFF500;
      transform: rotate(-9deg); }
    .l-extraWrapper .strength__eachStrength__holder__texts {
      position: relative;
      width: 430px; }
      @media only screen and (max-width: 767px) {
        .l-extraWrapper .strength__eachStrength__holder__texts {
          width: 80%;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 20px; } }
      .l-extraWrapper .strength__eachStrength__holder__texts[data-pos="right"] {
        position: absolute;
        right: 0;
        top: 0;
        transform: translateY(-50px); }
        @media only screen and (max-width: 767px) {
          .l-extraWrapper .strength__eachStrength__holder__texts[data-pos="right"] {
            position: static;
            transform: translateY(0); } }
      .l-extraWrapper .strength__eachStrength__holder__texts__hl {
        position: relative;
        color: #008B32;
        font-size: 36px;
        margin-bottom: 50px;
        line-height: 1.58823529412;
        /*pre animation*/
        opacity: 0;
        transform: translateY(40px); }
        @media only screen and (max-width: 767px) {
          .l-extraWrapper .strength__eachStrength__holder__texts__hl {
            font-size: 22px;
            text-align: center;
            margin-bottom: 15px; } }
      .l-extraWrapper .strength__eachStrength__holder__texts__rt {
        position: relative;
        display: block;
        font-size: 16px;
        line-height: 2.625;
        /*pre animation*/
        opacity: 0;
        transform: translateY(40px); }
        @media only screen and (max-width: 767px) {
          .l-extraWrapper .strength__eachStrength__holder__texts__rt {
            font-size: 14px;
            line-height: 2.14285714286; } }
      .l-extraWrapper .strength__eachStrength__holder__texts__num {
        font-size: 440px;
        font-weight: 600;
        font-family: 'Kanit', sans-serif;
        transform: skewX(-10deg);
        font-weight: 400;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        line-height: 1;
        letter-spacing: -0.04em;
        margin-left: -250px;
        margin-top: -165px; }
        @media only screen and (max-width: 767px) {
          .l-extraWrapper .strength__eachStrength__holder__texts__num {
            font-size: 250px;
            margin-left: -130px;
            margin-top: -90px; } }
        .l-extraWrapper .strength__eachStrength__holder__texts__num > div {
          overflow: hidden;
          white-space: nowrap;
          /*pre animation*/
          width: 0; }
      .l-extraWrapper .strength__eachStrength__holder__texts__strength {
        color: #fff;
        font-size: 80px;
        font-family: 'Kanit', sans-serif;
        font-style: italic;
        font-weight: 400;
        position: absolute;
        bottom: 0;
        left: -50px;
        transform-origin: bottom left;
        transform: rotate(-90deg);
        line-height: 1; }
        @media only screen and (max-width: 767px) {
          .l-extraWrapper .strength__eachStrength__holder__texts__strength {
            font-size: 50px;
            left: -10px; } }
        .l-extraWrapper .strength__eachStrength__holder__texts__strength > div {
          overflow: hidden;
          white-space: nowrap;
          /*pre animation*/
          width: 0; }
    .l-extraWrapper .strength__eachStrength__holder__img {
      width: 500px; }
      @media only screen and (max-width: 767px) {
        .l-extraWrapper .strength__eachStrength__holder__img {
          width: 100%; } }
      .l-extraWrapper .strength__eachStrength__holder__img[data-pos="right"] {
        position: absolute;
        right: 0;
        top: 0;
        transform: translateY(-185px); }
        @media only screen and (max-width: 767px) {
          .l-extraWrapper .strength__eachStrength__holder__img[data-pos="right"] {
            position: static;
            transform: translateY(0); } }
      .l-extraWrapper .strength__eachStrength__holder__img > figure {
        -webkit-perspective: 1000px;
        -ms-perspective: 1000px;
        perspective: 1000px;
        -ms-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d; }
        .l-extraWrapper .strength__eachStrength__holder__img > figure > img {
          box-shadow: 0px 6px 16px 2px rgba(0, 0, 0, 0.1);
          border-radius: 50%;
          opacity: 0;
          -ms-transform: rotateY(90deg);
          -webkit-transform: rotateY(90deg);
          transform: rotateY(90deg); }
    .l-extraWrapper .strength__eachStrength[data-num="odd"] {
      padding-top: 220px; }
      .l-extraWrapper .strength__eachStrength[data-num="odd"]:after {
        background-color: #FFF500; }
    .l-extraWrapper .strength__eachStrength[data-num="even"] {
      padding-top: 120px;
      padding-bottom: 60px; }
      .l-extraWrapper .strength__eachStrength[data-num="even"]:after {
        background-color: #F6F6F6; }
      .l-extraWrapper .strength__eachStrength[data-num="even"] .strength__eachStrength__holder__texts__num {
        color: #FFF500; }
      .l-extraWrapper .strength__eachStrength[data-num="even"] .strength__eachStrength__holder__texts__strength {
        color: #FFF500;
        left: calc(100% + 140px);
        transform-origin: bottom left;
        transform: rotate(-90deg); }
        @media only screen and (max-width: 767px) {
          .l-extraWrapper .strength__eachStrength[data-num="even"] .strength__eachStrength__holder__texts__strength {
            left: calc(100% + 60px); } }
    .l-extraWrapper .strength__eachStrength__inner {
      z-index: 2; }
      .l-extraWrapper .strength__eachStrength__inner.is-animated .strength__eachStrength__holder__texts__num > div {
        width: 110%;
        transition: 0.8s all cubic-bezier(0.23, 1, 0.32, 1); }
      .l-extraWrapper .strength__eachStrength__inner.is-animated .strength__eachStrength__holder__texts__strength > div {
        width: 100%;
        transition: 0.8s all cubic-bezier(0.23, 1, 0.32, 1); }
      .l-extraWrapper .strength__eachStrength__inner.is-animated .strength__eachStrength__holder__texts__hl {
        opacity: 1;
        transform: translateY(0);
        transition: 1.4s all cubic-bezier(0.23, 1, 0.32, 1) 0.8s; }
      .l-extraWrapper .strength__eachStrength__inner.is-animated .strength__eachStrength__holder__texts__rt {
        opacity: 1;
        transform: translateY(0);
        transition: 1.4s all cubic-bezier(0.23, 1, 0.32, 1) 0.9s; }
      .l-extraWrapper .strength__eachStrength__inner.is-animated .strength__eachStrength__holder__img > figure > img {
        opacity: 1;
        -ms-transform: rotateY(0);
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
        transition: 1.4s all cubic-bezier(0.23, 1, 0.32, 1) 0.8s; }