@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;700&display=swap");
#canbasyMenu {
  height: 220px;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Noto Serif JP', serif; }
  @media (max-width: 480px) {
    #canbasyMenu {
      height: 180px; } }

#fixed_menu {
  width: 100%;
  z-index: 100000;
  height: 100px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center; }
  #fixed_menu .bg_menu {
    width: 100%; }
    #fixed_menu .bg_menu #menu ul {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff; }
      @media (max-width: 480px) {
        #fixed_menu .bg_menu #menu ul {
          flex-wrap: wrap; } }
      #fixed_menu .bg_menu #menu ul li a {
        text-decoration: none;
        transition: 0.5s;
        opacity: 1;
        color: #000;
        font-size: 2.0rem;
        font-weight: 500;
        letter-spacing: 0.15em;
        -webkit-transition: all .4s;
        transition: all .4s; }
        #fixed_menu .bg_menu #menu ul li a i {
          margin-right: 10px;
          position: relative;
          top: -3px;
          -webkit-transition: all .4s;
          transition: all .4s; }
          @media (max-width: 480px) {
            #fixed_menu .bg_menu #menu ul li a i {
              top: 1px; } }
          #fixed_menu .bg_menu #menu ul li a i img {
            vertical-align: baseline;
            opacity: 1; }
        @media (max-width: 480px) {
          #fixed_menu .bg_menu #menu ul li a {
            font-size: 1.6rem; } }
      #fixed_menu .bg_menu #menu ul li:hover a {
        color: #007280; }
        #fixed_menu .bg_menu #menu ul li:hover a i {
          position: relative;
          top: 3px; }
      @media (max-width: 480px) {
        #fixed_menu .bg_menu #menu ul li {
          width: 50%;
          text-align: center; } }
      #fixed_menu .bg_menu #menu ul li + li {
        margin: 0 0 0 5%; }
        @media (max-width: 480px) {
          #fixed_menu .bg_menu #menu ul li + li {
            margin-left: 0; } }
      @media (max-width: 480px) {
        #fixed_menu .bg_menu #menu ul li:nth-child(n + 3) {
          margin-top: 10px; } }
  #fixed_menu.fixed {
    position: fixed;
    top: 0;
    width: 100%; }
    #fixed_menu.fixed .bg_menu #menu ul {
      height: 100px; }

#canbasyFv {
  position: relative; }
  #canbasyFv picture {
    width: 100%;
    overflow: hidden;
    display: block;
    position: relative; }
    #canbasyFv picture::before {
      content: '';
      padding-top: 43.75%;
      width: 100%;
      display: block; }
      @media (max-width: 480px) {
        #canbasyFv picture::before {
          padding-top: 91.264%; } }
    #canbasyFv picture source, #canbasyFv picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0; }
  #canbasyFv .fv_scroll {
    content: '';
    position: absolute;
    right: 1.5%;
    bottom: -8.57%;
    width: 1.75vw; }
    @media (max-width: 480px) {
      #canbasyFv .fv_scroll {
        right: 10px;
        bottom: -8.57%;
        width: 15px; } }

#canbasyIntroArea {
  font-family: 'Noto Serif JP', serif;
  background: url("../img/introBg.jpg") repeat; }
  #canbasyIntroArea section {
    padding: 100px 0 120px;
    max-width: 976px;
    margin: auto;
    width: 95%;
    box-sizing: border-box; }
    @media (max-width: 768px) {
      #canbasyIntroArea section {
        width: 90%; } }
    @media (max-width: 480px) {
      #canbasyIntroArea section {
        padding: 60px 0 80px; } }
    #canbasyIntroArea section .descBox {
      display: flex;
      justify-content: center; }
      @media (max-width: 768px) {
        #canbasyIntroArea section .descBox {
          display: block; } }
      #canbasyIntroArea section .descBox .textBox {
        width: 56.76%;
        padding-left: 4.3%;
        position: relative;
        box-sizing: content-box; }
        @media (max-width: 768px) {
          #canbasyIntroArea section .descBox .textBox {
            width: 100%; } }
        #canbasyIntroArea section .descBox .textBox h2 {
          font-size: 4.8rem;
          letter-spacing: 0.15em;
          font-weight: 500; }
          @media (max-width: 768px) {
            #canbasyIntroArea section .descBox .textBox h2 {
              font-size: 4rem; } }
          @media (max-width: 480px) {
            #canbasyIntroArea section .descBox .textBox h2 {
              font-size: 3.2rem; } }
          #canbasyIntroArea section .descBox .textBox h2 span {
            position: relative; }
            #canbasyIntroArea section .descBox .textBox h2 span::before {
              content: 'カンバシ―';
              position: absolute;
              font-size: 1.2rem;
              letter-spacing: 1.2em;
              left: 50%;
              transform: translateX(-50%);
              top: -20px;
              width: 100%;
              text-align: center; }
        #canbasyIntroArea section .descBox .textBox p.lead {
          font-size: 2.4rem;
          color: #007280;
          line-height: 1.75;
          letter-spacing: 0.075em;
          font-weight: 500;
          margin-top: 5px; }
          @media (max-width: 768px) {
            #canbasyIntroArea section .descBox .textBox p.lead {
              font-size: 2.0rem; } }
          @media (max-width: 480px) {
            #canbasyIntroArea section .descBox .textBox p.lead {
              font-size: 1.8rem; } }
        #canbasyIntroArea section .descBox .textBox p.text {
          font-size: 1.4rem;
          line-height: 2;
          letter-spacing: 0.075em;
          margin-top: 10px; }
        #canbasyIntroArea section .descBox .textBox p.section-border {
          position: absolute;
          width: 2px;
          height: 300px;
          left: 0;
          top: -9.38vw;
          margin-top: 0; }
          @media (max-width: 480px) {
            #canbasyIntroArea section .descBox .textBox p.section-border {
              top: -30vw; } }
      #canbasyIntroArea section .descBox .photoBox {
        width: 34.84%;
        margin: 0 0 0 4.1%; }
        @media (max-width: 768px) {
          #canbasyIntroArea section .descBox .photoBox {
            width: 80%;
            max-width: 400px;
            margin: 40px auto 0; } }
        #canbasyIntroArea section .descBox .photoBox picture {
          width: 100%;
          overflow: hidden;
          display: block;
          position: relative; }
          #canbasyIntroArea section .descBox .photoBox picture::before {
            content: '';
            padding-top: 135.44%;
            width: 100%;
            display: block; }
          #canbasyIntroArea section .descBox .photoBox picture source, #canbasyIntroArea section .descBox .photoBox picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0; }
    #canbasyIntroArea section .detailBox {
      margin-top: 80px;
      padding: 60px 0;
      background: #fff;
      display: flex;
      justify-content: center; }
      @media (max-width: 768px) {
        #canbasyIntroArea section .detailBox {
          display: block; } }
      @media (max-width: 480px) {
        #canbasyIntroArea section .detailBox {
          margin-top: 60px; } }
      #canbasyIntroArea section .detailBox .photoBox {
        width: 24.59%; }
        @media (max-width: 768px) {
          #canbasyIntroArea section .detailBox .photoBox {
            max-width: 360px;
            width: 80%;
            margin: 0 auto; } }
        #canbasyIntroArea section .detailBox .photoBox picture {
          width: 100%;
          overflow: hidden;
          display: block;
          position: relative; }
          #canbasyIntroArea section .detailBox .photoBox picture::before {
            content: '';
            padding-top: 100%;
            width: 100%;
            display: block; }
          #canbasyIntroArea section .detailBox .photoBox picture source, #canbasyIntroArea section .detailBox .photoBox picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0; }
      #canbasyIntroArea section .detailBox .textBox {
        width: 58.61%;
        margin: 0 0 0 4.1%; }
        @media (max-width: 768px) {
          #canbasyIntroArea section .detailBox .textBox {
            width: 90%;
            margin: 40px auto 0; } }
        #canbasyIntroArea section .detailBox .textBox p.ttl {
          text-align: center;
          font-size: 2.0rem;
          font-weight: 500;
          letter-spacing: 0.075em;
          position: relative;
          width: fit-content;
          margin: 0 auto; }
          @media (max-width: 480px) {
            #canbasyIntroArea section .detailBox .textBox p.ttl {
              font-size: 1.8rem; } }
          #canbasyIntroArea section .detailBox .textBox p.ttl::before, #canbasyIntroArea section .detailBox .textBox p.ttl::after {
            content: '';
            position: absolute;
            background: #000;
            width: 30px;
            height: 1px;
            top: 50%;
            transform: translateY(-50%); }
            @media (max-width: 480px) {
              #canbasyIntroArea section .detailBox .textBox p.ttl::before, #canbasyIntroArea section .detailBox .textBox p.ttl::after {
                width: 20px; } }
          #canbasyIntroArea section .detailBox .textBox p.ttl::before {
            left: -40px; }
            @media (max-width: 480px) {
              #canbasyIntroArea section .detailBox .textBox p.ttl::before {
                left: -30px; } }
          #canbasyIntroArea section .detailBox .textBox p.ttl::after {
            right: -40px; }
            @media (max-width: 480px) {
              #canbasyIntroArea section .detailBox .textBox p.ttl::after {
                right: -30px; } }
        #canbasyIntroArea section .detailBox .textBox .text {
          margin-top: 25px; }
          #canbasyIntroArea section .detailBox .textBox .text p {
            font-size: 1.4rem;
            line-height: 2;
            letter-spacing: 0.075em;
            margin-top: 0; }

#canbasyDetailArea {
  font-family: 'Noto Serif JP', serif; }
  #canbasyDetailArea section {
    padding: 100px 0 110px;
    max-width: 976px;
    margin: auto;
    width: 95%;
    box-sizing: border-box; }
    @media (max-width: 768px) {
      #canbasyDetailArea section {
        width: 90%; } }
    @media (max-width: 480px) {
      #canbasyDetailArea section {
        padding: 60px 0 80px; } }
    #canbasyDetailArea section .descBox {
      display: flex; }
      @media (max-width: 768px) {
        #canbasyDetailArea section .descBox {
          flex-direction: column-reverse; } }
      #canbasyDetailArea section .descBox .photoBox {
        width: 39.96%; }
        @media (max-width: 768px) {
          #canbasyDetailArea section .descBox .photoBox {
            margin: 40px auto 0;
            width: 60%; } }
        @media (max-width: 480px) {
          #canbasyDetailArea section .descBox .photoBox {
            width: 100%; } }
        #canbasyDetailArea section .descBox .photoBox picture {
          width: 100%;
          overflow: hidden;
          display: block;
          position: relative; }
          #canbasyDetailArea section .descBox .photoBox picture::before {
            content: '';
            padding-top: 123.3%;
            width: 100%;
            display: block; }
          #canbasyDetailArea section .descBox .photoBox picture source, #canbasyDetailArea section .descBox .photoBox picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0; }
      #canbasyDetailArea section .descBox .textBox {
        width: 51.54%;
        margin: 0 0 0 8.2%;
        position: relative; }
        @media (max-width: 768px) {
          #canbasyDetailArea section .descBox .textBox {
            width: 100%;
            margin: 0;
            padding-left: 4.3%; } }
        #canbasyDetailArea section .descBox .textBox h2 {
          font-size: 4.8rem;
          letter-spacing: 0.15em;
          font-weight: 500; }
          @media (max-width: 768px) {
            #canbasyDetailArea section .descBox .textBox h2 {
              font-size: 4rem; } }
          @media (max-width: 480px) {
            #canbasyDetailArea section .descBox .textBox h2 {
              font-size: 3.2rem; } }
        #canbasyDetailArea section .descBox .textBox p.lead {
          font-size: 2.4rem;
          color: #007280;
          line-height: 1.75;
          letter-spacing: 0.075em;
          font-weight: 500;
          margin-top: 5px; }
          @media (max-width: 768px) {
            #canbasyDetailArea section .descBox .textBox p.lead {
              font-size: 2.0rem; } }
          @media (max-width: 480px) {
            #canbasyDetailArea section .descBox .textBox p.lead {
              font-size: 1.8rem; } }
        #canbasyDetailArea section .descBox .textBox .text {
          font-size: 1.4rem;
          line-height: 2;
          letter-spacing: 0.075em;
          margin-top: 10px; }
          #canbasyDetailArea section .descBox .textBox .text p {
            margin-top: 0; }
        #canbasyDetailArea section .descBox .textBox p.section-border {
          position: absolute;
          width: 2px;
          height: 300px;
          left: -7.8%;
          top: -9.38vw;
          margin-top: 0; }
          @media (max-width: 768px) {
            #canbasyDetailArea section .descBox .textBox p.section-border {
              left: 0; } }
          @media (max-width: 480px) {
            #canbasyDetailArea section .descBox .textBox p.section-border {
              top: -30vw; } }

#canbasyWayArea {
  background: url("../img/canbasyWayBg.jpg") no-repeat center center/cover;
  font-family: 'Noto Serif JP', serif; }
  #canbasyWayArea section {
    padding: 90px 0 120px;
    max-width: 976px;
    margin: auto;
    width: 95%;
    box-sizing: border-box;
    position: relative; }
    @media (max-width: 768px) {
      #canbasyWayArea section {
        width: 90%; } }
    @media (max-width: 480px) {
      #canbasyWayArea section {
        padding: 60px 0 80px; } }
    #canbasyWayArea section .descBox .textBox {
      padding: 0 0 0 4.1%;
      position: relative; }
      #canbasyWayArea section .descBox .textBox h2 {
        font-size: 4.8rem;
        letter-spacing: 0.15em;
        font-weight: 500; }
        @media (max-width: 768px) {
          #canbasyWayArea section .descBox .textBox h2 {
            font-size: 4rem; } }
        @media (max-width: 480px) {
          #canbasyWayArea section .descBox .textBox h2 {
            font-size: 3.2rem; } }
      #canbasyWayArea section .descBox .textBox p.lead {
        font-size: 2.4rem;
        color: #007280;
        line-height: 1.75;
        letter-spacing: 0.075em;
        font-weight: 500;
        margin-top: 5px; }
        @media (max-width: 768px) {
          #canbasyWayArea section .descBox .textBox p.lead {
            font-size: 2.0rem; } }
        @media (max-width: 480px) {
          #canbasyWayArea section .descBox .textBox p.lead {
            font-size: 1.8rem; } }
      #canbasyWayArea section .descBox .textBox .text {
        font-size: 1.4rem;
        line-height: 2;
        letter-spacing: 0.075em;
        margin-top: 10px; }
      #canbasyWayArea section .descBox .textBox p.section-border {
        position: absolute;
        width: 2px;
        height: 300px;
        left: 0;
        top: -9.38vw;
        margin-top: 0; }
        @media (max-width: 480px) {
          #canbasyWayArea section .descBox .textBox p.section-border {
            top: -30vw; } }
    #canbasyWayArea section .descBox .photoBox {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 70px; }
      @media (max-width: 480px) {
        #canbasyWayArea section .descBox .photoBox {
          display: block; } }
      #canbasyWayArea section .descBox .photoBox .figBox {
        width: 51.23%; }
        @media (max-width: 480px) {
          #canbasyWayArea section .descBox .photoBox .figBox {
            width: 100%; } }
        #canbasyWayArea section .descBox .photoBox .figBox picture {
          width: 100%;
          overflow: hidden;
          display: block;
          position: relative; }
          #canbasyWayArea section .descBox .photoBox .figBox picture::before {
            content: '';
            padding-top: 66.8%;
            width: 100%;
            display: block; }
          #canbasyWayArea section .descBox .photoBox .figBox picture source, #canbasyWayArea section .descBox .photoBox .figBox picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0; }
      #canbasyWayArea section .descBox .photoBox .recomendBox {
        width: 44.88%;
        margin: 0 0 0 3.69%; }
        @media (max-width: 480px) {
          #canbasyWayArea section .descBox .photoBox .recomendBox {
            width: 100%;
            margin: 40px 0 0 0; } }
        #canbasyWayArea section .descBox .photoBox .recomendBox p.ttl {
          text-align: center;
          font-size: 2.0rem;
          font-weight: 500;
          letter-spacing: 0.075em;
          position: relative;
          width: fit-content;
          margin: 0 auto; }
          @media (max-width: 480px) {
            #canbasyWayArea section .descBox .photoBox .recomendBox p.ttl {
              font-size: 1.8rem; } }
          #canbasyWayArea section .descBox .photoBox .recomendBox p.ttl::before, #canbasyWayArea section .descBox .photoBox .recomendBox p.ttl::after {
            content: '';
            position: absolute;
            background: #000;
            width: 30px;
            height: 1px;
            top: 50%;
            transform: translateY(-50%); }
            @media (max-width: 480px) {
              #canbasyWayArea section .descBox .photoBox .recomendBox p.ttl::before, #canbasyWayArea section .descBox .photoBox .recomendBox p.ttl::after {
                width: 20px; } }
          #canbasyWayArea section .descBox .photoBox .recomendBox p.ttl::before {
            left: -40px; }
            @media (max-width: 480px) {
              #canbasyWayArea section .descBox .photoBox .recomendBox p.ttl::before {
                left: -30px; } }
          #canbasyWayArea section .descBox .photoBox .recomendBox p.ttl::after {
            right: -40px; }
            @media (max-width: 480px) {
              #canbasyWayArea section .descBox .photoBox .recomendBox p.ttl::after {
                right: -30px; } }
        #canbasyWayArea section .descBox .photoBox .recomendBox picture {
          margin-top: 10px;
          width: 100%;
          overflow: hidden;
          display: block;
          position: relative; }
          #canbasyWayArea section .descBox .photoBox .recomendBox picture::before {
            content: '';
            padding-top: 54.79%;
            width: 100%;
            display: block; }
          #canbasyWayArea section .descBox .photoBox .recomendBox picture source, #canbasyWayArea section .descBox .photoBox .recomendBox picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0; }
    #canbasyWayArea section .detailBox {
      margin-top: 80px;
      display: flex;
      justify-content: center;
      align-items: center; }
      @media (max-width: 480px) {
        #canbasyWayArea section .detailBox {
          flex-direction: column-reverse; } }
      #canbasyWayArea section .detailBox .textBox {
        width: 44.67%; }
        @media (max-width: 480px) {
          #canbasyWayArea section .detailBox .textBox {
            width: 100%;
            margin-top: 40px; } }
        #canbasyWayArea section .detailBox .textBox p.ttl {
          text-align: center;
          font-size: 2.0rem;
          font-weight: 500;
          letter-spacing: 0.075em;
          position: relative;
          width: fit-content;
          margin: 0 auto; }
          @media (max-width: 480px) {
            #canbasyWayArea section .detailBox .textBox p.ttl {
              font-size: 1.8rem; } }
          #canbasyWayArea section .detailBox .textBox p.ttl::before, #canbasyWayArea section .detailBox .textBox p.ttl::after {
            content: '';
            position: absolute;
            background: #000;
            width: 30px;
            height: 1px;
            top: 50%;
            transform: translateY(-50%); }
            @media (max-width: 480px) {
              #canbasyWayArea section .detailBox .textBox p.ttl::before, #canbasyWayArea section .detailBox .textBox p.ttl::after {
                width: 20px; } }
          #canbasyWayArea section .detailBox .textBox p.ttl::before {
            left: -40px; }
            @media (max-width: 480px) {
              #canbasyWayArea section .detailBox .textBox p.ttl::before {
                left: -30px; } }
          #canbasyWayArea section .detailBox .textBox p.ttl::after {
            right: -40px; }
            @media (max-width: 480px) {
              #canbasyWayArea section .detailBox .textBox p.ttl::after {
                right: -30px; } }
        #canbasyWayArea section .detailBox .textBox p.text {
          font-size: 1.4rem;
          line-height: 2;
          letter-spacing: 0.075em;
          margin-top: 10px; }
      #canbasyWayArea section .detailBox .photoBox {
        width: 51.23%;
        margin: 0 0 0 4.1%; }
        @media (max-width: 480px) {
          #canbasyWayArea section .detailBox .photoBox {
            width: 100%;
            margin: 0; } }
        #canbasyWayArea section .detailBox .photoBox picture {
          width: 100%;
          overflow: hidden;
          display: block;
          position: relative; }
          #canbasyWayArea section .detailBox .photoBox picture::before {
            content: '';
            padding-top: 66.8%;
            width: 100%;
            display: block; }
          #canbasyWayArea section .detailBox .photoBox picture source, #canbasyWayArea section .detailBox .photoBox picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0; }

#canbasyProductArea {
  background: url("../img/introBg.jpg") repeat;
  font-family: 'Noto Serif JP', serif; }
  #canbasyProductArea section {
    padding: 90px 0 120px;
    max-width: 976px;
    margin: auto;
    width: 95%;
    box-sizing: border-box; }
    @media (max-width: 768px) {
      #canbasyProductArea section {
        width: 90%; } }
    @media (max-width: 480px) {
      #canbasyProductArea section {
        padding: 60px 0 80px; } }
    #canbasyProductArea section .descBox {
      position: relative;
      max-width: 340px;
      margin: 0 auto; }
      #canbasyProductArea section .descBox .photoBox {
        margin-top: 60px; }
        @media (max-width: 480px) {
          #canbasyProductArea section .descBox .photoBox {
            width: 90%;
            margin: 40px auto 0; } }
        #canbasyProductArea section .descBox .photoBox picture {
          width: 100%;
          overflow: hidden;
          display: block;
          position: relative; }
          #canbasyProductArea section .descBox .photoBox picture::before {
            content: '';
            padding-top: 135.44%;
            width: 100%;
            display: block; }
          #canbasyProductArea section .descBox .photoBox picture source, #canbasyProductArea section .descBox .photoBox picture img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0; }
      #canbasyProductArea section .descBox h2 {
        font-size: 4.8rem;
        letter-spacing: 0.15em;
        font-weight: 500; }
        @media (max-width: 768px) {
          #canbasyProductArea section .descBox h2 {
            font-size: 4rem;
            padding-left: 4.1%; } }
        @media (max-width: 480px) {
          #canbasyProductArea section .descBox h2 {
            font-size: 3.2rem; } }
      #canbasyProductArea section .descBox p.section-border {
        position: absolute;
        width: 2px;
        height: 300px;
        left: -11.7%;
        top: -9.38vw;
        margin-top: 0; }
        @media (max-width: 768px) {
          #canbasyProductArea section .descBox p.section-border {
            left: 0; } }
        @media (max-width: 480px) {
          #canbasyProductArea section .descBox p.section-border {
            top: -30vw; } }
    #canbasyProductArea section .canbasyProductBtn {
      max-width: 500px;
      width: 95%;
      height: 100px;
      line-height: 100px;
      margin: 60px auto 0; }
      @media (max-width: 480px) {
        #canbasyProductArea section .canbasyProductBtn {
          height: 80px;
          line-height: 80px;
          width: 100%; } }
      #canbasyProductArea section .canbasyProductBtn a {
        display: block;
        width: 100%;
        height: 100%;
        color: #fff;
        font-size: 2.0rem;
        letter-spacing: 0.075em;
        font-weight: 700;
        text-align: center;
        background: -moz-linear-gradient(166.76% 50% -180deg, white 0%, #008c89 99.33%);
        background: -webkit-linear-gradient(-180deg, white -200%, #008c89 99.33%);
        background: -webkit-gradient(linear, 166.76% 50%, 34.26% 50%, color-stop(0, white), color-stop(0.9933, #008c89));
        background: -o-linear-gradient(-180deg, white -200% #008c89 99.33%);
        background: -ms-linear-gradient(-180deg, white -200%, #008c89 99.33%);
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#008C89' ,GradientType=0)";
        background: linear-gradient(270deg, white -200%, #008c89 99.33%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF',endColorstr='#008C89' , GradientType=1);
        text-decoration: none;
        transition: 0.5s;
        opacity: 1; }
        @media (max-width: 480px) {
          #canbasyProductArea section .canbasyProductBtn a {
            font-size: 1.8rem; } }
        #canbasyProductArea section .canbasyProductBtn a i {
          margin-left: 10px;
          position: relative;
          top: 3px;
          -webkit-transition: all .4s;
          transition: all .4s;
          right: 0; }
          #canbasyProductArea section .canbasyProductBtn a i img {
            vertical-align: baseline;
            opacity: 1; }
      #canbasyProductArea section .canbasyProductBtn:hover a i {
        opacity: 1;
        right: -5px; }

/* scroll */
.fade {
  opacity: 0;
  transition: all 0.8s; }
  .fade.active {
    opacity: 1; }

.upfade {
  transform: translate(0, 50px);
  opacity: 0;
  transition: all 0.8s; }
  .upfade.scrollin {
    transform: translate(0, 0);
    opacity: 1; }

.downfade {
  transform: translate(0, -50px);
  opacity: 0;
  transition: all 0.8s; }
  .downfade.scrollin {
    transform: translate(0, 0);
    opacity: 1; }

.sclinWrap {
  overflow: hidden !important; }

.sclin_right {
  transform: translate(50px, 0);
  opacity: 0;
  transition: all 0.8s; }
  .sclin_right.scrollin {
    transform: translate(0, 0);
    opacity: 1; }

.sclin_left {
  transform: translate(-50px, 0);
  opacity: 0;
  transition: all 0.8s; }
  .sclin_left.scrollin {
    transform: translate(0, 0);
    opacity: 1; }

.listfade li {
  transform: translate(0, 50px);
  opacity: 0.1;
  transition: all 1.0s; }
  .listfade li.scrollin {
    transform: translate(0, 0);
    opacity: 1; }

br {
  display: inline; }
  @media (min-width: calc(1200px + 1px)) {
    br.showPC {
      display: none !important; } }
  @media (min-width: calc(768px + 1px)) {
    br.showTab {
      display: none !important; } }
  @media (min-width: calc(480px + 1px)) {
    br.showSP {
      display: none !important; } }
  @media (max-width: 1200px) {
    br.hdnPC {
      display: none; }
    br.showPC {
      display: inherit; } }
  @media (max-width: 768px) {
    br.hdnTab {
      display: none; }
    br.showTab {
      display: inherit; } }
  @media (max-width: 480px) {
    br.hdnSP {
      display: none; }
    br.showSP {
      display: inherit; } }