@charset "utf-8";
/* CSS Document */

header{}
.outerWrap{
  padding-top: 0;
}
.titleBox em{
  display: block;
}
.scoll_txt{
  color: #f8f8f8;
  font-size: 165px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  z-index: -1;
}

/* footer */
  footer .topBox{
    background: transparent;
  }
  footer .topBox .wrap{
    display: block;
    text-align: center;
  }
  footer .topBox .txtExp{
    color: #444;
    font-size: 16px;
    line-height: 32px;
  }
  footer .topBox .tel{
    color: #111;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    margin-top: 30px;
  }
  footer .topBox .tel span{
    display: block;
  }
  footer .topBox .tel a{
    color: #27319d;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    display: inline-block;
  }
  footer .topBox .tel a:hover{
    text-decoration: underline;
  }
  footer .bottomBox{
    border-top: 1px solid #e5e5e5;
  }

/* goTopButton & .quick_link.fixed_right*/
  .goTopBox,
  .quick_link.fixed_right{
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .goTopBox.active,
  .quick_link.fixed_right.active{
    opacity: 1;
    visibility: visible;
  }

/* banner arrowsBox */
  .bannerBox .arrowsBox{
    width: 150px;
    justify-content: space-between;
    position: absolute;
    bottom: 150px;
    right: 100px;
    z-index: 100;
  }
  .bannerBox .rectNext{
    background-image: url(../images/arrow4.png);
  }
  .bannerBox .rectPrev{
    background-image: url(../images/arrow3.png);
  }

/* banner ani */
  .bannerBox li.show .Txt > em{
    opacity: 0;
    -webkit-animation: banner_in 1s -0.1s forwards ease;
            animation: banner_in 1s -0.1s forwards ease;
            text-shadow: 2px 2px #222222;
  }
  .bannerBox li.show .Txt h2{
    opacity: 0;
    -webkit-animation: banner_in 1.1s forwards ease;
            animation: banner_in 1.1s forwards ease;
            text-shadow: 2px 2px #222222;
  }
  .bannerBox li.show .Txt p{
    opacity: 0;
    -webkit-animation: banner_in 0.8s 0.3s forwards ease;
            animation: banner_in 0.8s 0.3s forwards ease;
            text-shadow: 2px 2px #222222;
  }
  .bannerBox li.show .Txt p:nth-of-type(2){
    -webkit-animation-delay: 0.35s;
            animation-delay: 0.35s;
  }
  .bannerBox li.show .Txt p:nth-of-type(3){
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s;
  }
  .bannerBox li.show .Txt p:nth-of-type(4){
    -webkit-animation-delay: 0.45s;
            animation-delay: 0.45s;
  }
  .bannerBox li.show .Txt p:nth-of-type(5){
    -webkit-animation-delay: 0.5s;
            animation-delay: 0.5s;
  }
  @-webkit-keyframes banner_in {
    0% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
              opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
              opacity: 1;
    }
  }
  @keyframes banner_in {
    0% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
              opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
              opacity: 1;
    }
  }

  .bannerBox li .Txt > em{
    opacity: 0;
    -webkit-animation: banner_out 1.5s forwards ease;
            animation: banner_out 1.5s forwards ease;
  }
  .bannerBox li .Txt h2{
    opacity: 0;
    -webkit-animation: banner_out 1.5s forwards ease;
            animation: banner_out 1.5s forwards ease;
  }
  .bannerBox li .Txt p{
    opacity: 0;
    -webkit-animation: banner_out 1.5s forwards ease;
            animation: banner_out 1.5s forwards ease;
  }
  @-webkit-keyframes banner_out {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
              opacity: 1;
    }
    100% {
      -webkit-transform: translateY(-30px);
              transform: translateY(-30px);
              opacity: 0;
    }
  }
  @keyframes banner_out {
    0% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
              opacity: 1;
    }
    100% {
      -webkit-transform: translateY(-30px);
              transform: translateY(-30px);
              opacity: 0;
    }
  }

/* copy_header */
  .copy_header{
    width: 100%;
    max-width: 1820px;
    height: 100px;
    background: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 100;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-transition: all 1.2s ease;
    -moz-transition: all 1.2s ease;
    -o-transition: all 1.2s ease;
    transition: all 1.2s ease;
  }
  .copy_header.ani{
    -webkit-transform: perspective(800px) rotateX(90deg);
    transform: perspective(800px) rotateX(90deg);
  }
  .copy_header .wrap{
    max-width: 100%;
    padding: 0 100px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
  }

  /*logo*/
    .copy_header .logo{
      display: inline-block;
      width: 160px;
      margin: 0;
      position: relative;
    }
    .copy_header .logo a{
      display: block;
      width: 100%;
      height: 80px; 
      background: url(../images/logo.png) no-repeat center;
      position: relative;
      text-indent: -9999px;
    }

  .copy_header .rightBox{
    width: calc(100% - 125px);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: flex-end;
    -ms-align-items: center;
    align-items: center;
  }
  .copy_header .menuBox{
    padding-right: 40px;
  }
  .copy_header ul.menu > li{
    padding: 40px 0;
  }
  .copy_header .menu_bar{
    display: none;
  }

/* scroll */
  .bannerArea .scroll{
    display: block;
    cursor: pointer;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-align: center;
    text-transform: uppercase;
    writing-mode: tb-rl;
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    padding-bottom: 115px;
    position: absolute;
    bottom: 100px;
    left: 40px;
    z-index: 998;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .bannerArea .scroll:hover{}
  .bannerArea .scroll::before{
    content: '';
    width: 1px;
    height: 95px;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: calc(50% - 1px);
  }
  @media (max-width: 1180px){
    .bannerArea .scroll{
      display: none;
    }
  }

/* aboutArea */
  .aboutArea{
    padding: 130px 0 65px;
    position: relative;
  }
  .aboutArea .wrap{
    max-width: 1450px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-align-items: center;
    align-items: center;
  }
  .aboutArea .wrap::before{
    content: '';
    width: 149px;
    height: 268px;
    background: url(../images/light.png) no-repeat bottom center;
    position: absolute;
    top: -170px;
    right: 80px;
    opacity: 0;
  }
  .aboutArea .wrap.ani::before{
    opacity: 1;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
  }
  .aboutArea .scoll_txt{
    position: absolute;
    bottom: 30px;
    left: -150px;
    z-index: -1;
  }
  .aboutArea .leftBox{
    width: calc(50% + 60px);
    padding-left: 50px;
  }
  .aboutArea .rightBox{
    width: calc(50% - 60px);
    padding-left: 50px;
  }
  .aboutArea .Txt{
    max-width: 400px;
    margin-top: 35px;
  }
  .aboutArea .Txt h3{
    color: #111;
    font-size: 18px;
    font-weight: 400;
  }
  .aboutArea .Txt .txtExp{
    max-height: calc(28px * 4 + 1px);
  }
  .aboutArea .Txt .btn_more{
    margin-top: 50px;
  }

/* memberArea */
  .memberArea{
    padding: 65px 0;
  }
  .memberArea .wrap{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-align-items: center;
    align-items: center;
  }
  .memberArea .scoll_txt{
    position: absolute;
    bottom: 30px;
    right: -400px;
    z-index: -1;
  }
  .memberArea .leftBox{
    width: calc(50% - 50px);
  }
  .memberArea .rightBox{
    width: calc(50% + 50px);
  }
  .memberArea .rightBox img{
    -webkit-transform: translate(90px,0);
    transform: translate(90px,0);
  }
  .memberArea .Txt{
    max-width: 490px;
    margin-top: 35px;
  }
  .memberArea .Txt h3{
    color: #111;
    font-size: 18px;
    font-weight: 400;
  }
  .memberArea .Txt .txtExp{
    max-height: calc(28px * 4 + 1px);
  }
  .memberArea .Txt .btn_more{
    margin-top: 50px;
  }
  
/* workArea */
  .workArea{
    padding: 65px 0;
  }
  .workArea .scoll_txt{
    position: absolute;
    bottom: -90px;
    left: -80px;
    z-index: -1;
  }
  .workArea .titleBox{
    width: 210px;
    display: inline-block;
    position: absolute;
    top: 30px;
    right: 60px;
  }
  .workArea .arrowsBox{
    width: 265px;
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .workArea .arrowsBox .rectPrev{
    margin-right: 15px;
  }
  ul.profolioList{}
  .profolioList li{
    padding: 0;
  }
  .profolioList li .item{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .profolioList li .Img{
    width: 850px;
  }
  .profolioList li .Img img{
    width: 100%;
  }
  .profolioList li .Txt{
    width: calc(100% - 850px);
    padding: 190px 10px 90px 90px;
    position: relative;
  }
  .profolioList li .Txt::before{
    content: '';
    width: calc(100% + 50px);
    height: 1px;
    background: #e6e6e6;
    position: absolute;
    top: 160px;
    right: 10px;
    z-index: 1;
  }
  .profolioList li .Txt h3{
    color: #111;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
  }
  .profolioList li .Txt h3 a{
    color: #111;
  }
  .profolioList li .Txt .txtExp{
    color: #bbb;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .profolioList li .btn_more{
    margin-top: 30px;
  }

/* processArea */
  .processArea{
    padding: 130px 0 65px;
  }
  .processArea .wrap::before{
    content: '';
    width: calc(100% + 460px);
    height: calc(100% + 380px);
    background: #f6f6f6;
    position: absolute;
    top: 30px;
    left: -230px;
    z-index: -1;
  }
  .processArea .wrap::after{
    content: '';
    width: 437px;
    height: 428px;
    background: url(../images/chair.png) no-repeat top left;
    position: absolute;
    bottom: -160px;
    right: -250px;
    z-index: -1;
  }
  .processArea .btn{
    margin-top: 60px;
  }
  .processArea .btn a{
    width: 320px;
    height: 55px;
    line-height: 55px;
  }
  ul.processList{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    margin-top: 55px;
  }
  .processList li{
    width: calc(100% / 6);
  }
  .processList li .item{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    -ms-align-items: center;
    align-items: center;
  }
  .processList li .step{
    color: #cfcfcf;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 40px;
  }
  .processList li .step span{
    display: block;
    font-size: 45px;
    font-weight: 300;
    line-height: 1;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .processList li:hover .step span{
    color: #111;
  }
  .processList li .Img{
    width: 70px;
  }
  .processList li .Img img{
    width: 100%;
  }
  .processList li .Txt{
    padding: 25px 5px;
  }
  .processList li .Txt h3{
    color: #111;
    font-size: 20px;
    font-weight: 300;
    writing-mode: tb-rl;
    -ms-writing-mode: tb-lr;
    -webkit-writing-mode: vertical-lr;
    -moz-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
  }

/* newsArea */
  .newsArea{
    padding: 65px 0;
  }  
  ul.newsList{
    position: relative;
    margin: 30px 0 0;
    padding: 0 40px;
  }
  .newsList li{
    position: relative;
    padding: 25px 15px;
    margin-bottom: 20px;
    z-index: 1;
  }
  .newsList li .item{
    position: relative;
    z-index: 1;
  }
  .newsList li .Img img{
    width: 100%;
  }
  .newsList li .newsDate{
    color: #333;
    font-size: 14px;
    padding: 0;
  }
  .newsList li .newsDate strong{
    font-weight: 400;
  }
  .newsList li .Txt{
    padding: 20px 15px 0;
  }
  .newsList li .Txt h3{
    color: #111;
    font-size: 20px;
    font-weight: 400;
  }
  .newsList li .Txt h3 a{
    color: #111;
  }
  .newsList li:hover .Txt h3 a{
    color: #27319d;
  }
  .newsList li .Txt .txtExp{
    margin-top: 5px;
    font-size: 14px;
    line-height: 26px;
    max-height: calc(26px * 2 + 1px);
  }
  .newsList li .txtPeriod{
    color: #27319d;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1.5px;
    margin-top: 10px;
  }
  .newsList li:hover .txtPeriod{
    color: #999;
  }
  .newsArea .rectPrev{
    position: absolute;
    bottom: calc(50% - 100px);
    left: 0;
    z-index: 5;
  }
  .newsArea .rectNext{
    position: absolute;
    bottom: calc(50% - 100px);
    right: 0;
    z-index: 5;
  }

/* linkArea */
  .linkArea{}
  .linkArea .wrap{
    max-width: 1920px;
    padding: 0;
  }
  ul.storeList{
    position: relative;
    margin: 0;
    padding: 0 15px;
  }
  .storeList li{
    position: relative;
    padding: 20px 10px;
    z-index: 1;
  }
  .storeList li .item{
    position: relative;
    z-index: 1;
  }
  .storeList li .Img{
    background: #fff;
  }
  .storeList li .Img img{
    width: 100%;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .storeList li:hover .Img img{
    opacity: 0.15;
  }
  .storeList li .Txt{
    width: 100%;
    padding: 20px 35px;
    text-align: center;
    position: absolute;
    top: calc(100% - 90px);
    left: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
  }
  .storeList li:hover .Txt{
    top: 55%;
    -webkit-transform: translate(0,-48%);
    transform: translate(0,-48%);
  }
  .storeList li .Txt h3{
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    letter-spacing: 1px;
  }
  .storeList li .Txt h3 a{
    color: #fff;
  }
  .storeList li:hover .Txt h3 a{
    color: #111;
  }
  .storeList li .Txt h3 a::before{
    content: '';
    width: 65px;
    height: 65px;
    background: url(../images/arrow.png) no-repeat center,#27319d;
    border-radius: 50%;
    position: absolute;
    top: -60px;
    left: calc(50% - 32px);
    opacity: 0;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
  }
  .storeList li:hover .Txt h3 a::before{
    opacity: 1;
    -webkit-transition: all 0.4s 0.2s ease;
    -moz-transition: all 0.4s 0.2s ease;
    -o-transition: all 0.4s 0.2s ease;
    transition: all 0.4s 0.2s ease;
  }


/**********響應式**********/
  @media (min-width: 1921px){
  }
  @media (max-width: 1800px){
    .copy_header .wrap{
      padding: 0 50px;
    }
    .copy_header .logo{
      width: 160px;
    }
    .copy_header .logo a{
      height: 80px;
    }
    .copy_header .rightBox{
      width: calc(100% - 110px);
    }
  }
  @media (max-width: 1700px){
    .copy_header .menuBox{
      padding-right: 0;
    }
  }
  @media (max-width: 1600px){
    /*workArea*/
      .workArea .titleBox{
        width: 260px;
      }
      .profolioList li .Img{
        width: 800px;
      }
      .profolioList li .Txt{
        width: calc(100% - 800px);
      }
      .workArea .arrowsBox{
        width: 315px;
      }
  }
  @media (max-width: 1550px){
    /*processArea*/
      .processArea .wrap::after{
        background-position: right bottom;
        -webkit-background-size: 80%;
        background-size: 80%;
        right: -150px;
      }
  }
  @media (max-width: 1400px){
    /*processArea*/
      .processArea .wrap::after{
        -webkit-background-size: 70%;
        background-size: 70%;
        right: -50px;
      }
  }
  @media (max-width: 1350px){
    .copy_header .wrap{
      padding: 0 25px;
    }

    /*aboutArea*/
      .aboutArea .wrap::before{
        right: 20px;
      }

    /*memberArea*/
      .memberArea .rightBox img{
        -webkit-transform: translate(30px,0); 
        transform: translate(30px,0); 
      }
  }
  @media (max-width: 1300px){
    /*workArea*/
      .workArea .titleBox{
        width: 290px;
        top: 0;
      }
      .profolioList li .Img{
        width: calc(100% - 360px);
      }
      .profolioList li .Txt{
        width: 360px;
        padding: 160px 0 90px 60px;
      }
      .profolioList li .Txt::before{
        top: 130px;
      }
      .workArea .arrowsBox{
        width: 345px;
      }

    /*newsArea*/
      .newsArea .rectNext{
        right: 10px;
      }
      .newsArea .rectPrev{
        left: 10px;
      }
  }
  @media (max-width: 1200px){
    /*aboutArea*/
      .aboutArea .wrap::before{
        top: -210px;
        right: 10px;
      }
      .aboutArea .leftBox{
        width: calc(50% - 60px);
        padding-left: 0; 
      }
      .aboutArea .rightBox{
        width: calc(50% + 60px);
      }
      
    /*memberArea*/
      .memberArea .leftBox{
        width: calc(50% + 50px);
        padding-right: 50px;
      }
      .memberArea .rightBox{
        width: calc(50% - 50px);
      }
      .memberArea .rightBox img{
        -webkit-transform: translate(0,0); 
        transform: translate(0,0); 
      }
  }
  @media (max-width: 1180px){
    .outerWrap{
      padding-top: 60px;
    }
    .copy_header{
      display: none;
    }
    .bannerBox .arrowsBox{
      bottom: 20px;
      right: 20px;
    }

    /*workArea*/
      .workArea .titleBox{
        width: 255px;
        top: -30px;
      }
      .profolioList li .Img{
        width: calc(100% - 300px);
      }
      .profolioList li .Txt{
        width: 300px;
        padding: 130px 0 90px 35px;
      }
      .profolioList li .Txt::before{
        top: 100px;
      }
      .workArea .arrowsBox{
        width: 310px;
      }
  }
  @media (max-width: 1024px){
    /*workArea*/
      .workArea .titleBox{
        width: 100%;
        top: 0;
        right: 0;
        position: relative;
        text-align: center;
        margin-bottom: 50px;
      }
      .profolioList li .Txt{
        padding: 60px 0 90px 35px;
      }
      .profolioList li .Txt::before{
        top: 30px;
      }
  }
  @media (max-width: 960px){
    /*aboutArea*/
      .aboutArea{
        padding: 60px 0;
      }
      .aboutArea .wrap::before{
        display: none;
      }
      
    /*memberArea*/
      .memberArea{
        padding: 60px 0;
      }

    /*workArea*/
      .workArea{
        padding: 60px 0;
      }
      .profolioList li .Txt{
        padding: 20px 0 90px 35px;
      }
      .profolioList li .Txt::before{
        width: 60px;
        right: calc(100% - 20px);
      }

    /* linkArea */
      .storeList li .Txt,
      .storeList li:hover .Txt{
        position: relative;
        top: auto;
        bottom: 0;
        -webkit-transform: translate(0,0);
        transform: translate(0,0);
      }
      .storeList li .Txt h3 a::before{
        display: none;
      }
      .storeList li .Txt h3,
      .storeList li .Txt h3 a,
      .storeList li:hover .Txt h3 a{
        color: #111;
      }
      .storeList li:hover .Img img{
        opacity: 0.7;
      }
  }
  @media (max-width: 900px){
    /*processArea*/
      ul.processList{
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 40px -15px 0;
      }
      .processList li{
        width: 50%;
        padding: 20px 15px;
      }
      .processList li .item{
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
      }
      .processList li .Txt h3{
        font-size: 18px;
        writing-mode: unset;
        -ms-writing-mode: unset;
        -webkit-writing-mode: unset;
        -moz-writing-mode: unset;
        -ms-writing-mode: unset;
        writing-mode: unset;
      }
      .processList li .Img{
        padding: 0 5px;
      }
      .processList li .step{
        margin-bottom: 0;
        margin-right: 10px;
      }

    /*processArea*/
      .processArea .wrap::after{
        display: none;
      }
      .processArea .wrap::before{
        width: 100%;
        height: calc(100% - 50px);
        top: 30px;
        left: 0;
      }
  }
  @media (max-width: 800px){
    /*aboutArea*/
      .aboutArea .wrap{
        -webkit-flex-direction: column-reverse;
        -moz-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        -o-flex-direction: column-reverse;
        flex-direction: column-reverse;
      }
      .aboutArea .leftBox{
        width: 100%;
      }
      .aboutArea .rightBox{
        width: 100%;
        padding-left: 0;
        text-align: center;
        margin-bottom: 50px;
      }
      .aboutArea .Txt{
        max-width: 500px;
        margin: 35px auto 0;
      }
      .aboutArea .Txt .txtExp {
        max-height: calc(28px * 10 + 1px);
      }
      
    /*memberArea*/
      .memberArea .leftBox{
        width: 100%;
        padding-right: 0;
        text-align: center;
        margin-bottom: 50px;
      }
      .memberArea .rightBox{
        width: 100%;
        text-align: center;
      }
      .memberArea .Txt{
        max-width: 500px;
        margin: 35px auto 0;
      }
      .memberArea .rightBox img{
        display: inline-block;
      }

    /*workArea*/
      .profolioList li .Img{
        width: 100%;
      }
      .profolioList li .Txt{
        width: 100%;
        padding: 30px 210px 0 0;
      }
      .profolioList li .Txt::before{
        display: none;
      }
      .workArea .arrowsBox{
        width: 200px;
      }

    /*newsArea*/
      .newsArea{
        padding: 30px 0 50px;
      }
  }
  @media (max-width: 768px){
  }
  @media (max-width: 640px){
    /*processArea*/
      ul.processList{
        margin: 30px 0 0;
      }
      .processList li{
        width: 100%;
        padding: 10px 0;
      }
      .processList li .item{
        justify-content: center;
      }
      .processList li .Txt h3{
        font-size: 20px;
        width: 200px;
      }
      .processList li .step span{
        font-size: 36px;
      }

    /* linkArea */
      .storeList li .Txt{
        padding: 10px 5px;
      }
      .storeList li .Txt h3{
        font-size: 18px;
      }

    /*newsArea*/
      ul.newsList{
        padding: 0;
      }
      .newsArea .arrowsBox{
        width: 150px;
        justify-content: space-between;
        margin: 0 auto;
      }
      .newsArea .rectPrev{
        position: relative;
        bottom: 0;
        left: 0;
      }
      .newsArea .rectNext{
        position: relative;
        bottom: 0;
        right: 0;
      }
  }
  @media (max-width: 580px){
    /*workArea*/
      .profolioList li .item{
        -webkit-flex-direction: column-reverse;
        -moz-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        -o-flex-direction: column-reverse;
        flex-direction: column-reverse;
      }
      .profolioList li .Txt{
        padding: 0;
        margin-bottom: -40px;
      }
      .profolioList li .btn_more{
        text-align: right;
      }
      .profolioList li .btn_more a{
        padding-left: 20px;
        letter-spacing: 3px;
        background: #111;
        color: #fff;
        border-bottom-color: transparent;
      }
      .btn_more a:hover::before{
        background: #fff;
      }
      .btn_more a:hover::after{
        border-color: #fff;
      }
      .workArea .arrowsBox{
        position: relative;
        width: 150px;
        margin: 30px auto 0;
      }

    /*processArea*/
      .processArea{
        padding: 80px 0 50px;
      }
  }
  @media (max-width: 480px){
    .scoll_txt{
      display: none;
    }

    /*processArea*/
      .processArea{
        padding: 20px 0 50px;
      }
  }
  @media (max-width: 400px){
    /*workArea*/
      .profolioList li .Txt{
        margin-bottom: -20px;
      }
    
    /*processArea*/
      ul.processList{
        margin: 20px 0 0;
      }
      .processList li .item{
        -webkit-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        -o-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: center;
      }
      .processList li .step{
        width: 50px;
        margin: 0;
      }
      .processList li .step span{
        font-size: 30px;
      }
      .processList li .Img{
        width: 60px;
      }
      .processList li .Txt{
        width: calc(100% - 60px - 50px);
        text-align: left;
      }
      .processList li .Txt h3{
        width: 100%;
        font-size: 16px;
        font-weight: 400;
      }

    /*newsArea*/
      .newsList li{
        padding: 20px 0;
        margin-bottom: 0;
      }
  }
  @media (max-width: 380px){
  }


.ipArea {
  padding: 130px 0 65px;
  background-color: #f6f6f6;
}