@charset "UTF-8";
/* Top CSS */
/* _setting CSS */
@-webkit-keyframes marquee {
  0% {
    left: 100%;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  100% {
    left: 0;
    -webkit-transform: translate(-100%);
    transform: translate(-100%);
  }
}
@keyframes marquee {
  0% {
    left: 100%;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  100% {
    left: 0;
    -webkit-transform: translate(-100%);
    transform: translate(-100%);
  }
}
@-webkit-keyframes moving {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes moving {
  0% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
/* Desktops and laptops */
@media print, screen and (min-width: 701px) {
  html, body {
    min-width: 1500px;
  }

  .title_wrap {
    width: 396px;
    height: 396px;
    border-radius: 50%;
  }
  .title_wrap .stitle {
    font-size: 5.63rem;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
  }
  .title_wrap .stitle span {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .title_eng {
    display: block;
    font-size: 1.8rem;
    font-style: italic;
    text-align: center;
    color: #fff;
    letter-spacing: 0.05em;
  }

  #kv {
    position: relative;
    width: 100%;
    height: 650px;
    background-color: #F7F7F7;
  }
  #kv #bg_area {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 650px;
  }
  #kv #bg_area #bg_img01 {
    position: absolute;
    top: 0;
    left: 0;
    background: url("../images/top/pc_kv_img01.png") right center/cover no-repeat;
    width: calc(100% - 59.4%);
    height: 650px;
    opacity: 0;
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
  }
  #kv #bg_area #bg_img02 {
    position: absolute;
    top: 0;
    right: 0;
    background: url("../images/top/pc_kv_img02.png") left center no-repeat;
    width: calc(100% - 40.65%);
    height: 650px;
    opacity: 0;
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .5s;
         -o-transition-delay: .5s;
            transition-delay: .5s;
  }
  #kv #bg_area #bg_img_icon_wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(100% - 40.65%);
    height: 650px;
  }
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon01 {
    background: url("../images/top/kv_icon01.png") center center no-repeat;
    width: 119px;
    height: 63px;
    position: absolute;
    top: 36px;
    left: 23.3%;
    -webkit-transition-delay: 1.1s;
         -o-transition-delay: 1.1s;
            transition-delay: 1.1s;
    opacity: 0;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
         -o-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
            transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-transform: scale3d(3, 3, 1);
            transform: scale3d(3, 3, 1);
  }
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon02 {
    background: url("../images/top/kv_icon02.png") center center no-repeat;
    width: 41px;
    height: 70px;
    position: absolute;
    top: 35px;
    left: 57.1%;
    -webkit-transition-delay: 1.3s;
         -o-transition-delay: 1.3s;
            transition-delay: 1.3s;
    opacity: 0;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
         -o-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
            transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-transform: scale3d(3, 3, 1);
            transform: scale3d(3, 3, 1);
  }
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon03 {
    background: url("../images/top/kv_icon03.png") center center no-repeat;
    width: 74px;
    height: 54px;
    position: absolute;
    top: 264px;
    left: 70.5%;
    -webkit-transition-delay: 1.5s;
         -o-transition-delay: 1.5s;
            transition-delay: 1.5s;
    opacity: 0;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
         -o-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
            transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-transform: scale3d(3, 3, 1);
            transform: scale3d(3, 3, 1);
  }
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon04 {
    background: url("../images/top/kv_icon04.png") center center no-repeat;
    width: 82px;
    height: 71px;
    position: absolute;
    bottom: 89px;
    left: 84%;
    -webkit-transition-delay: 1.7s;
         -o-transition-delay: 1.7s;
            transition-delay: 1.7s;
    opacity: 0;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
         -o-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
            transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-transform: scale3d(3, 3, 1);
            transform: scale3d(3, 3, 1);
  }
  #kv #bg_area.show #bg_img01,
  #kv #bg_area.show #bg_img02 {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  #kv #bg_area.show #bg_img_icon_wrap #bg_img_icon01,
  #kv #bg_area.show #bg_img_icon_wrap #bg_img_icon02,
  #kv #bg_area.show #bg_img_icon_wrap #bg_img_icon03,
  #kv #bg_area.show #bg_img_icon_wrap #bg_img_icon04 {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
            transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
  #kv .common_inner {
    position: relative;
    height: 650px;
  }
  #kv #kv_desc {
    position: absolute;
    width: 100%;
    height: 525px;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
  #kv #kv_desc h2 {
    font-family: "M PLUS 1p", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
    text-align: center;
    font-size: 7.95rem;
    font-weight: bold;
    color: #000;
    line-height: 1.1;
    opacity: 0;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transform: scale3d(1.1, 1.1, 1) translate3d(0, -20px, 0);
            transform: scale3d(1.1, 1.1, 1) translate3d(0, -20px, 0);
  }
  #kv #kv_desc h2 .title {
    font-family: "M PLUS 1p", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
    text-align: center;
    font-size: 5.8rem;
    font-weight: bold;
    color: #00b3cd;
    letter-spacing: -0.01em;
  }
  #kv #kv_desc h2 .dot {
    letter-spacing: -0.5em;
    font-weight: bold;
  }
  #kv #kv_desc h3 {
    width: 632px;
    height: 100px;
    margin: 0 auto;
    font-family: "M PLUS 1p", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
    text-align: center;
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 100px;
    letter-spacing: 0.2em;
    color: #00b3cd;
    background: url("../images/top/kv_puzzle.png") center 0/100% no-repeat;
    -webkit-transition-delay: .5s;
         -o-transition-delay: .5s;
            transition-delay: .5s;
    opacity: 0;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transform: scale3d(1.1, 1.1, 1) translate3d(0, -20px, 0);
            transform: scale3d(1.1, 1.1, 1) translate3d(0, -20px, 0);
  }
  #kv #kv_desc .scroll {
    width: 68px;
    height: 133px;
    padding-top: 1.9vw;
    margin: 0 auto;
    opacity: 0;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: 1.2s;
         -o-transition-delay: 1.2s;
            transition-delay: 1.2s;
    -webkit-animation: moving 0.5s ease-in-out infinite alternate;
            animation: moving 0.5s ease-in-out infinite alternate;
  }
  #kv #kv_desc .scroll img {
    width: 100%;
  }
  #kv #kv_desc .scroll.movie {
    -webkit-animation: moving 0.5s ease-in-out infinite alternate;
            animation: moving 0.5s ease-in-out infinite alternate;
  }
  #kv #kv_desc.show h2, #kv #kv_desc.show h3 {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
            transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
  #kv #kv_desc.show .scroll {
    opacity: 1;
  }
  #kv #news_nav {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: -webkit-gradient(linear, left top, right top, from(#333333), color-stop(19%, #333333), color-stop(19%, #b2e8f0), to(#b2e8f0));
    background: -o-linear-gradient(left, #333333 0%, #333333 19%, #b2e8f0 19%, #b2e8f0 100%);
    background: linear-gradient(90deg, #333333 0%, #333333 19%, #b2e8f0 19%, #b2e8f0 100%);
  }
  #kv #news_nav .news_bg_inner {
    width: 1300px;
    margin: 0 auto;
    background: -webkit-gradient(linear, left top, right top, from(#333333), color-stop(19%, #333333), color-stop(19%, #b2e8f0), to(#b2e8f0));
    background: -o-linear-gradient(left, #333333 0%, #333333 19%, #b2e8f0 19%, #b2e8f0 100%);
    background: linear-gradient(90deg, #333333 0%, #333333 19%, #b2e8f0 19%, #b2e8f0 100%);
  }
  #kv #news_nav .news_nav_inner {
    width: 1100px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #kv #news_nav .wrap .inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #kv #news_nav h3 {
    position: relative;
    width: 110px;
    font-size: 1.6rem;
    font-weight: bold;
    color: #fff;
    line-height: 50px;
    background-color: #333;
    margin-left: 7vw;
  }
  #kv #news_nav h3:after {
    position: absolute;
    top: 0;
    right: 0;
    content: '';
    display: block;
    width: 26px;
    height: 50px;
    background: url("../images/top/news_connect.jpg") center center no-repeat;
  }
  #kv #news_nav .wrap {
    width: 900px;
    white-space: nowrap;
  }
  #kv #news_nav .wrap .inner {
    display: block;
    height: 50px;
    position: relative;
    overflow: hidden;
  }
  #kv #news_nav .wrap span {
    position: absolute;
    width: 100%;
    display: block;
    -webkit-animation-name: marquee;
            animation-name: marquee;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 30s;
            animation-duration: 30s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #kv #news_nav .wrap span:hover {
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
  }
  #kv #news_nav .wrap span a {
    display: block;
    padding: 18px 0;
    font-size: 1.4rem;
  }
  #kv #news_nav .more {
    width: 90px;
    height: 100%;
  }
  #kv #news_nav .more a {
    display: block;
    color: #fff;
    font-size: 1.4rem;
    text-align: center;
    line-height: 50px;
    background-color: #00b3cd;
  }
  #kv #news_nav .more a:hover {
    opacity: .8;
  }

  #feature {
    padding-top: 100px;
    margin-bottom: 115px;
  }
  #feature .animate_wrap {
    position: relative;
    width: 1100px;
    height: auto;
  }
  #feature .animate_wrap .attached_box {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  #feature .animate_wrap .attached_box.attached_box01 {
    background: url("../images/top/feature_img01.png") center center/100% no-repeat;
    width: 310px;
    height: 316px;
    padding-top: 70px;
    top: 0;
    left: -77px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
  }
  #feature .animate_wrap .attached_box.attached_box02 {
    background: url("../images/top/feature_img02.png") center center/100% no-repeat;
    width: 228px;
    height: 386px;
    top: 170px;
    right: 50px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
  }
  #feature .title_wrap {
    position: relative;
    background-color: #00b3cd;
    border-radius: 50%;
    margin: 0 auto;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
  }
  #feature .title_wrap .stitle {
    padding-top: 160px;
    color: #fff;
  }
  #feature .title_wrap .stitle span {
    color: #fff;
  }
  #feature .title_wrap:before {
    content: '';
    display: block;
    position: absolute;
    background: url("../images/top/feature_tiitle_attached.png") center center/100% no-repeat;
    width: 132px;
    height: 113px;
    top: 2px;
    right: -110px;
  }
  #feature .title_wrap:after {
    content: '';
    display: block;
    position: absolute;
    background: url("../images/top/feature_title_attached_line.png") center center/100% no-repeat;
    width: 46px;
    height: 93px;
    bottom: -29px;
    left: 68px;
  }
  #feature .detail_area {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #feature .detail_area .attached_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  #feature .detail_area .attached_box:before, #feature .detail_area .attached_box:after {
    content: '';
    display: block;
    position: absolute;
  }
  #feature .detail_area .attached_box:before {
    background: url("../images/top/feature_img01.png") center center/100% no-repeat;
    width: 310px;
    height: 316px;
    top: -397px;
    left: -77px;
  }
  #feature .detail_area .attached_box:after {
    background: url("../images/top/feature_img02.png") center center/100% no-repeat;
    width: 228px;
    height: 386px;
    top: -227px;
    right: 50px;
  }
  #feature .detail_area .list {
    position: relative;
    width: 460px;
    height: 523px;
  }
  #feature .detail_area .list li {
    position: absolute;
    width: 195px;
    height: 195px;
    border: 10px solid #00b3cd;
    border-radius: 50%;
    font-size: 2.2rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    padding-top: 61px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
  }
  #feature .detail_area .list li:nth-child(even) {
    padding-top: 76px;
  }
  #feature .detail_area .list li .inner {
    color: #00b3cd;
    font-weight: bold;
  }
  #feature .detail_area .list .item01 {
    top: 8px;
    right: 0;
    -webkit-transition-delay: 0.8s;
         -o-transition-delay: 0.8s;
            transition-delay: 0.8s;
    padding-top: 35px;
  }
  #feature .detail_area .list .item01:before, #feature .detail_area .list .item01:after {
    content: '';
    display: block;
    position: absolute;
  }
  #feature .detail_area .list .item01:before {
    background: url("../images/top/feature_list01_attached.png") center center/100% no-repeat;
    width: 83px;
    height: 121px;
    top: -109px;
    left: -53px;
  }
  #feature .detail_area .list .item01:after {
    background: url("../images/top/feature_list01_attached_line.png") center center/100% no-repeat;
    width: 107px;
    height: 52px;
    bottom: -25px;
    left: -94px;
  }
  #feature .detail_area .list .item02 {
    top: 160px;
    left: 0;
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
  }
  #feature .detail_area .list .item02:before, #feature .detail_area .list .item02:after {
    content: '';
    display: block;
    position: absolute;
  }
  #feature .detail_area .list .item02:before {
    background: url("../images/top/feature_list02_attached.png") center center/100% no-repeat;
    width: 84px;
    height: 125px;
    top: -125px;
    right: -5px;
  }
  #feature .detail_area .list .item02:after {
    background: url("../images/top/feature_list02_attached_line.png") center center/100% no-repeat;
    width: 93px;
    height: 83px;
    bottom: -42px;
    right: -90px;
  }
  #feature .detail_area .list .item03 {
    bottom: 0;
    right: 5px;
    -webkit-transition-delay: 1.2s;
         -o-transition-delay: 1.2s;
            transition-delay: 1.2s;
  }
  #feature .detail_area .list .item03:before, #feature .detail_area .list .item03:after {
    content: '';
    display: block;
    position: absolute;
  }
  #feature .detail_area .list .item03:after {
    background: url("../images/top/feature_list03_attached.png") center center/100% no-repeat;
    width: 122px;
    height: 91px;
    top: 52px;
    left: -124px;
  }
  #feature .detail_area .txt_area {
    width: 550px;
  }
  #feature .detail_area .txt_area .txt {
    width: 100%;
    margin-top: 160px;
    font-size: 1.8rem;
    line-height: 2.2;
    margin-left: auto;
    margin-bottom: 30px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: 1.4s;
         -o-transition-delay: 1.4s;
            transition-delay: 1.4s;
  }
  #feature .detail_area .txt_area .btn_wrap {
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: 1.6s;
         -o-transition-delay: 1.6s;
            transition-delay: 1.6s;
  }
  #feature .detail_area .txt_area .btn_blue {
    width: 100%;
    height: 80px;
    line-height: 80px;
    margin-left: auto;
  }

  #feature.show .animate_wrap .attached_box.attached_box01 {
    opacity: 1;
  }
  #feature.show .animate_wrap .attached_box.attached_box02 {
    opacity: 1;
  }
  #feature.show .title_wrap {
    opacity: 1;
  }
  #feature.show .detail_area .list li {
    opacity: 1;
  }
  #feature.show .detail_area .txt_area .txt {
    opacity: 1;
  }
  #feature.show .detail_area .txt_area .btn_wrap {
    opacity: 1;
  }

  #product .product_intro {
    width: 100%;
    height: 720px;
    background: url("../images/top/product_bg.jpg") center center/cover no-repeat;
    padding-top: 90px;
  }
  #product .product_intro .common_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  #product .product_intro .title_wrap {
    position: relative;
    border: 10px solid #fff;
    margin-left: 75px;
    margin-top: 30px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
  }
  #product .product_intro .title_wrap .stitle {
    padding-top: 110px;
    font-size: 5.6rem;
    color: #fff;
  }
  #product .product_intro .title_wrap .stitle span {
    color: #fff;
  }
  #product .product_intro .title_wrap:before, #product .product_intro .title_wrap:after {
    content: '';
    display: block;
    position: absolute;
  }
  #product .product_intro .title_wrap:before {
    background: url("../images/top/product_title_attached01.png") center center/100% no-repeat;
    width: 99px;
    height: 100px;
    top: 6px;
    left: -88px;
  }
  #product .product_intro .title_wrap:after {
    background: url("../images/top/product_title_attached02.png") center center/100% no-repeat;
    width: 78px;
    height: 75px;
    bottom: -44px;
    right: -7px;
  }
  #product .product_intro .txt_area {
    width: 550px;
  }
  #product .product_intro .txt_area h4 {
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 25px;
    color: #fff;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
  }
  #product .product_intro .txt_area h4 span {
    font-size: 5.0rem;
    font-weight: bold;
  }
  #product .product_intro .txt_area dl {
    margin-bottom: 50px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
  }
  #product .product_intro .txt_area dl dt, #product .product_intro .txt_area dl dd {
    display: block;
    font-size: 1.8rem;
    color: #fff;
    line-height: 1.9;
  }
  #product .product_intro .txt_area dl dt {
    font-weight: bold;
  }
  #product .product_intro .txt_area dl dd {
    margin-bottom: 5px;
  }
  #product .product_intro .txt_area dl dd .dot {
    letter-spacing: -0.5em;
  }
  #product .product_intro .txt_area .btn_wrap {
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
  }
  #product .product_intro .txt_area .btn_wrap .common_btn {
    width: 550px;
    height: 80px;
    line-height: 80px;
  }
  #product .product_intro .txt_area .btn_wrap .common_btn:after {
    border-top: 1px solid #00b3cd;
    border-right: 1px solid #00b3cd;
  }
  #product .product_items {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: 0 auto;
  }
  #product .product_items .item_block {
    width: calc(100% / 4);
    border-right: 1px solid #fff;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
  }
  #product .product_items .item_block:last-child {
    border-right: none;
  }
  #product .product_items .item_block.item_block01 {
    -webkit-transition-delay: 0.6s;
         -o-transition-delay: 0.6s;
            transition-delay: 0.6s;
  }
  #product .product_items .item_block.item_block01 .item_info_wrap h4 {
    line-height: 1.1;
    margin-top: 5px;
    margin-bottom: 10px;
  }
  #product .product_items .item_block.item_block02 {
    -webkit-transition-delay: 0.3s;
         -o-transition-delay: 0.3s;
            transition-delay: 0.3s;
  }
  #product .product_items .item_block.item_block03 {
    -webkit-transition-delay: 0.6s;
         -o-transition-delay: 0.6s;
            transition-delay: 0.6s;
  }
  #product .product_items .item_block.item_block03 .item_info_wrap h4 {
    line-height: 1.1;
    margin-top: 5px;
    margin-bottom: 10px;
  }
  #product .product_items .item_block.item_block04 {
    -webkit-transition-delay: 0.9s;
         -o-transition-delay: 0.9s;
            transition-delay: 0.9s;
  }
  #product .product_items .item_block.item_block04 .item_info_wrap h4 {
    line-height: 1.1;
    margin-top: 5px;
    margin-bottom: 10px;
  }
  #product .product_items .item_block.item_block05 {
    -webkit-transition-delay: 1.2s;
         -o-transition-delay: 1.2s;
            transition-delay: 1.2s;
  }
  #product .product_items .item_block a:hover {
    opacity: .8;
  }
  #product .product_items .item_block a:hover .img_wrap img {
    opacity: 1;
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
  #product .product_items .item_block a:hover .common_btn {
    opacity: .8;
  }
  #product .product_items .item_block a:hover .common_btn:after {
    right: 16px;
  }
  #product .product_items .item_block .img_wrap {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  #product .product_items .item_block .img_wrap img {
    display: block;
    width: 100%;
    -webkit-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
  }
  #product .product_items .item_block .img_wrap.on img {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
  #product .product_items .item_block .item_info_wrap {
    background-color: #444;
    height: 145px;
    padding-top: 20px;
  }
  #product .product_items .item_block .item_info_wrap h4 {
    font-weight: bold;
    font-size: 3.2rem;
    text-align: center;
    color: #fff;
    line-height: 1.5;
  }
  #product .product_items .item_block .item_info_wrap p {
    font-size: 1.6rem;
    color: #c6c6c6;
    text-align: center;
    line-height: 1.3;
  }
  #product .product_items .item_block .common_btn {
    width: 100%;
    height: 80px;
    line-height: 80px;
  }

  #product .product_intro .common_inner.show .title_wrap {
    opacity: 1;
  }
  #product .product_intro .common_inner.show .txt_area h4 {
    opacity: 1;
  }
  #product .product_intro .common_inner.show .txt_area dl {
    opacity: 1;
  }
  #product .product_intro .common_inner.show .txt_area .btn_wrap {
    opacity: 1;
  }
  #product .product_items.show .item_block.item_block01 {
    opacity: 1;
  }
  #product .product_items.show .item_block.item_block02 {
    opacity: 1;
  }
  #product .product_items.show .item_block.item_block03 {
    opacity: 1;
  }
  #product .product_items.show .item_block.item_block04 {
    opacity: 1;
  }
  #product .product_items.show .item_block.item_block05 {
    opacity: 1;
  }

  .history_learn_more_wrap {
    width: 100%;
    background: url("../images/top/history_bg.jpg") center center/cover no-repeat;
  }

  #learn_more {
    padding: 250px 0;
  }
  #learn_more .common_inner {
    position: relative;
    height: 680px;
  }
  #learn_more .learn_more_title_wrap {
    position: absolute;
    width: 396px;
    height: 396px;
    background: url("../images/top/learn_title_bg.png") center 0/100% no-repeat;
  }
  #learn_more .learn_more_title_wrap .animate_wrap {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #learn_more .learn_more_title_wrap .animate_wrap .attached_box {
    position: absolute;
  }
  #learn_more .learn_more_title_wrap .link_wrap {
    border-radius: 50%;
    overflow: hidden;
  }
  #learn_more .learn_more_title_wrap.selection {
    top: 0;
    left: 35px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
  }
  #learn_more .learn_more_title_wrap.selection h3 .space {
    display: inline-block;
    margin-right: -10px;
  }
  #learn_more .learn_more_title_wrap.selection .animate_wrap .attached_box {
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
  }
  #learn_more .learn_more_title_wrap.selection .animate_wrap .attached_box.attached_box01 {
    top: -33px;
    left: -27px;
    background: url("../images/top/learn_selection_attached01.png") center 0/100% no-repeat;
    width: 87px;
    height: 91px;
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
  }
  #learn_more .learn_more_title_wrap.selection .animate_wrap .attached_box.attached_box02 {
    right: -155px;
    top: -100px;
    background: url("../images/top/learn_selection_attached02.png") center 0/100% no-repeat;
    width: 197px;
    height: 193px;
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
  }
  #learn_more .learn_more_title_wrap.selection .animate_wrap .for_attach {
    position: absolute;
    top: 238px;
    right: -241px;
    background: url("../images/top/learn_selection_attached_line.png") center 0/100% no-repeat;
    width: 248px;
    height: 70px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
  }
  #learn_more .learn_more_title_wrap.selection a {
    padding-top: 110px;
  }
  #learn_more .learn_more_title_wrap.case {
    top: 160px;
    right: 40px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
  }
  #learn_more .learn_more_title_wrap.case .animate_wrap .attached_box {
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
  }
  #learn_more .learn_more_title_wrap.case .animate_wrap .attached_box.attached_box01 {
    top: -91px;
    left: 140px;
    background: url("../images/top/learn_case_attached01.png") center 0/100% no-repeat;
    width: 74px;
    height: 101px;
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
  }
  #learn_more .learn_more_title_wrap.case .animate_wrap .attached_box.attached_box02 {
    right: -314px;
    bottom: 66px;
    background: url("../images/top/learn_case_attached02.png") center 0/100% no-repeat;
    width: 322px;
    height: 197px;
    -webkit-transition-delay: 1.2s;
         -o-transition-delay: 1.2s;
            transition-delay: 1.2s;
  }
  #learn_more .learn_more_title_wrap.case .inner {
    padding-top: 40px;
  }
  #learn_more .learn_more_title_wrap.case a, #learn_more .learn_more_title_wrap.case .replace_a {
    padding-top: 85px;
  }
  #learn_more .learn_more_title_wrap.column {
    top: 460px;
    right: 540px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: 1.6s;
         -o-transition-delay: 1.6s;
            transition-delay: 1.6s;
  }
  #learn_more .learn_more_title_wrap.column .animate_wrap .for_attach {
    position: absolute;
    top: -22px;
    right: -184px;
    background: url("../images/top/learn_selection_attached_line.png") center 0/100% no-repeat;
    width: 248px;
    height: 70px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
    -webkit-transform: rotate(145deg);
        -ms-transform: rotate(145deg);
            transform: rotate(145deg);
    -webkit-transition: opacity linear 200ms;
    -o-transition: opacity linear 200ms;
    transition: opacity linear 200ms;
  }
  #learn_more .learn_more_title_wrap.column .inner {
    padding-top: 40px;
  }
  #learn_more .learn_more_title_wrap.column a, #learn_more .learn_more_title_wrap.column .replace_a {
    padding-top: 82px;
  }
  #learn_more .learn_more_title_wrap a {
    display: block;
    width: 396px;
    height: 396px;
  }
  #learn_more .learn_more_title_wrap a:hover {
    opacity: .7;
    text-decoration: none;
  }
  #learn_more .learn_more_title_wrap a:hover p:after {
    -webkit-transform: translate3d(8px, 0, 0) rotate(45deg);
            transform: translate3d(8px, 0, 0) rotate(45deg);
  }
  #learn_more .learn_more_title_wrap .replace_a {
    display: block;
    width: 396px;
    height: 396px;
  }
  #learn_more .learn_more_title_wrap .replace_a p:before, #learn_more .learn_more_title_wrap .replace_a p:after {
    display: none;
  }
  #learn_more .learn_more_title_wrap h3 {
    font-size: 5.8rem;
    font-weight: bold;
    text-align: center;
    color: #fff;
    margin-bottom: 15px;
  }
  #learn_more .learn_more_title_wrap h3 span {
    display: block;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 10px;
  }
  #learn_more .learn_more_title_wrap p {
    width: 100%;
    height: 90px;
    line-height: 85px;
    text-align: center;
    font-size: 1.8rem;
    position: absolute;
    left: 0;
    bottom: 0;
    color: #fff;
  }
  #learn_more .learn_more_title_wrap p:after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: 0.2s right linear;
    -o-transition: 0.2s right linear;
    transition: 0.2s right linear;
    margin-left: 5px;
    margin-bottom: 2px;
    -webkit-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
  }

  #learn_more.show .learn_more_title_wrap {
    opacity: 1;
  }
  #learn_more.show .learn_more_title_wrap .animate_wrap .attached_box {
    opacity: 1;
  }
  #learn_more.show .learn_more_title_wrap .animate_wrap .for_attach {
    opacity: 1;
  }

  #global {
    position: relative;
    background: url("../images/top/global_bg.jpg") center center/cover no-repeat;
    padding: 60px 0 275px;
  }
  #global .title_wrap {
    position: relative;
    border: 10px solid #00b3cd;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
  }
  #global .title_wrap .stitle {
    font-size: 3.6rem;
    line-height: 1.3;
    padding-top: 155px;
    color: #00b3cd;
  }
  #global .title_wrap .stitle span {
    color: #00b3cd;
  }
  #global .title_wrap .title_eng {
    color: #00b3cd;
  }
  #global .title_wrap .note {
    display: block;
    font-size: 1.3rem;
    text-align: center;
    padding-top: 20px;
  }
  #global .item {
    position: absolute;
    width: 198px;
    height: 198px;
    text-align: center;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
  }
  #global .item a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/top/global_title_bg.png") center 0/100% no-repeat #fff;
    padding-top: 85px;
    border-radius: 50%;
  }
  #global .item a:hover {
    opacity: .8;
  }
  #global .item .area {
    font-size: 1.8rem;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 55px;
  }
  #global .item .link {
    position: relative;
    font-size: 1.2rem;
    color: #00b3cd;
    padding-right: 5px;
  }
  #global .item .link:after {
    content: '';
    display: block;
    position: absolute;
    top: 5px;
    right: 55px;
    background: url("../images/top/icon_blank.svg") center 0/100% no-repeat;
    width: 12px;
    height: 10px;
  }
  #global .item.line2 a {
    padding-top: 75px;
  }
  #global .item.line2 .area {
    margin-bottom: 40px;
  }
  #global .item1 {
    top: 150px;
    left: calc(50% - 430px);
    -webkit-transition-delay: .3s;
         -o-transition-delay: .3s;
            transition-delay: .3s;
  }
  #global .item2 {
    top: 375px;
    left: calc(50% - 335px);
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
  }
  #global .item3 {
    top: 485px;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transition-delay: .5s;
         -o-transition-delay: .5s;
            transition-delay: .5s;
  }
  #global .item4 {
    top: 375px;
    right: calc(50% - 335px);
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
  }
  #global .item5 {
    top: 150px;
    right: calc(50% - 430px);
    -webkit-transition-delay: .7s;
         -o-transition-delay: .7s;
            transition-delay: .7s;
  }

  #global.show .title_wrap {
    opacity: 1;
  }
  #global.show .item {
    opacity: 1;
  }
}
@media print, screen and (min-width: 1501px) {
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon01 {
    left: 212px;
  }
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon02 {
    left: 506px;
  }
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon03 {
    left: 622px;
  }
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon04 {
    left: 751px;
  }
}
/* Smartphones (portrait and landscape) */
@media screen and (max-width: 700px) {
  .title_wrap {
    width: 52vw;
    height: 52vw;
    border-radius: 50%;
  }
  .title_wrap .stitle {
    font-size: 8.3vw;
    font-weight: bold;
    text-align: center;
    margin-bottom: 2.6vw;
  }
  .title_wrap .stitle span {
    display: block;
    font-size: 3.05vw;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 2vw;
  }

  .title_eng {
    display: block;
    font-size: 3.05vw;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    color: #fff;
    letter-spacing: 0.05em;
  }

  #kv {
    position: relative;
    width: 100%;
    height: 109vw;
    background-color: #F7F7F7;
    overflow: hidden;
  }
  #kv .common_inner {
    position: relative;
    width: 100%;
    height: 95.66vw;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
  }
  #kv #bg_area {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 109vw;
  }
  #kv #bg_area #bg_img01 {
    position: absolute;
    top: 0;
    left: 0;
    background: url("../images/top/sp_kv_img01.png") left center/100% no-repeat;
    width: 100%;
    height: 109vw;
    opacity: 0;
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
  }
  #kv #bg_area #bg_img02 {
    position: absolute;
    top: 0;
    right: 0;
    background: url("../images/top/sp_kv_img02.png") right center/100% no-repeat;
    width: 100%;
    height: 109vw;
    opacity: 0;
    -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .5s;
         -o-transition-delay: .5s;
            transition-delay: .5s;
  }
  #kv #bg_area #bg_img_icon_wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 109vw;
  }
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon01 {
    background: url("../images/top/kv_icon01.png") center center/100% no-repeat;
    width: 12vw;
    height: 6.4vw;
    position: absolute;
    top: 12.5vw;
    right: 34vw;
    -webkit-transition-delay: 1.1s;
         -o-transition-delay: 1.1s;
            transition-delay: 1.1s;
    opacity: 0;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
         -o-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
            transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-transform: scale3d(3, 3, 1);
            transform: scale3d(3, 3, 1);
  }
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon02 {
    background: url("../images/top/kv_icon02.png") center center/100% no-repeat;
    width: 7.06vw;
    height: 12vw;
    position: absolute;
    top: 10.3vw;
    right: 2vw;
    -webkit-transition-delay: 1.3s;
         -o-transition-delay: 1.3s;
            transition-delay: 1.3s;
    opacity: 0;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
         -o-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
            transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-transform: scale3d(3, 3, 1);
            transform: scale3d(3, 3, 1);
  }
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon03 {
    background: url("../images/top/kv_icon03.png") center center/100% no-repeat;
    width: 10.66vw;
    height: 7.86vw;
    position: absolute;
    bottom: 18.5vw;
    right: 16.4vw;
    -webkit-transition-delay: 1.5s;
         -o-transition-delay: 1.5s;
            transition-delay: 1.5s;
    opacity: 0;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
         -o-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
            transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-transform: scale3d(3, 3, 1);
            transform: scale3d(3, 3, 1);
  }
  #kv #bg_area #bg_img_icon_wrap #bg_img_icon04 {
    background: url("../images/top/kv_icon04.png") center center/100% no-repeat;
    width: 10.66vw;
    height: 9.33vw;
    position: absolute;
    bottom: 7vw;
    right: -1vw;
    -webkit-transition-delay: 1.7s;
         -o-transition-delay: 1.7s;
            transition-delay: 1.7s;
    opacity: 0;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
         -o-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
            transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
    -webkit-transform: scale3d(3, 3, 1);
            transform: scale3d(3, 3, 1);
  }
  #kv #bg_area.show #bg_img01,
  #kv #bg_area.show #bg_img02 {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  #kv #bg_area.show #bg_img_icon_wrap #bg_img_icon01,
  #kv #bg_area.show #bg_img_icon_wrap #bg_img_icon02,
  #kv #bg_area.show #bg_img_icon_wrap #bg_img_icon03,
  #kv #bg_area.show #bg_img_icon_wrap #bg_img_icon04 {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
            transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
  #kv #kv_desc h2, #kv #kv_desc h3 {
    opacity: 0;
    -webkit-transition-duration: 200ms;
         -o-transition-duration: 200ms;
            transition-duration: 200ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transform: scale3d(1.1, 1.1, 1) translate3d(0, -20px, 0);
            transform: scale3d(1.1, 1.1, 1) translate3d(0, -20px, 0);
  }
  #kv #kv_desc h2 {
    font-family: "M PLUS 1p", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
    text-align: center;
    font-size: 10.27vw;
    font-weight: bold;
    color: #000;
    line-height: 1.1;
    padding-bottom: 2vw;
  }
  #kv #kv_desc h2 .title {
    font-family: "M PLUS 1p", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
    text-align: center;
    font-size: 8vw;
    font-weight: bold;
    color: #00b3cd;
    letter-spacing: -0.1em;
  }
  #kv #kv_desc h2 .dot {
    letter-spacing: -0.5em;
    font-weight: bold;
  }
  #kv #kv_desc h3 {
    width: 84vw;
    height: 13.33vw;
    margin: 0 auto;
    font-family: "M PLUS 1p", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana;
    text-align: center;
    font-size: 3.3vw;
    font-weight: bold;
    letter-spacing: 0.2em;
    color: #00b3cd;
    background: url("../images/top/sp_kv_puzzle.png") center 0/100% no-repeat;
    padding-top: 5.3vw;
    margin-bottom: 10vw;
    -webkit-transition-delay: .5s;
         -o-transition-delay: .5s;
            transition-delay: .5s;
  }
  #kv #kv_desc .scroll {
    width: 12vw;
    margin: 0 auto;
    opacity: 0;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: 1.2s;
         -o-transition-delay: 1.2s;
            transition-delay: 1.2s;
    -webkit-animation: moving 0.5s ease-in-out infinite alternate;
            animation: moving 0.5s ease-in-out infinite alternate;
  }
  #kv #kv_desc.show h2, #kv #kv_desc.show h3 {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
            transform: scale3d(1, 1, 1) translate3d(0, 0, 0);
  }
  #kv #kv_desc.show .scroll {
    opacity: 1;
  }
  #kv #news_nav {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
  }
  #kv #news_nav .news_bg_inner {
    margin: 0 auto;
  }
  #kv #news_nav .news_nav_inner {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
  }
  #kv #news_nav h3 {
    position: relative;
    width: 90px;
    font-size: 1.35rem;
    font-weight: bold;
    color: #fff;
    line-height: 30px;
    background-color: #333;
    padding-left: 15px;
  }
  #kv #news_nav h3:after {
    position: absolute;
    top: 0;
    right: -12px;
    content: '';
    display: inline-block;
    width: 13px;
    height: 30px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 13px solid #333;
    z-index: 1;
  }
  #kv #news_nav .wrap {
    position: relative;
    width: calc(100% - 165px);
    height: 30px;
    overflow: hidden;
    background-color: rgba(0, 179, 205, 0.7);
    padding-left: 30px;
  }
  #kv #news_nav .wrap .inner {
    position: relative;
    height: 100%;
  }
  #kv #news_nav .wrap .inner span {
    display: block;
    width: 100vw;
    position: absolute;
    left: 100%;
    white-space: nowrap;
    -webkit-animation-name: marquee;
            animation-name: marquee;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
    -webkit-animation-duration: 20s;
            animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
  }
  #kv #news_nav .wrap .inner span a {
    font-size: 1.2rem;
    display: block;
    padding: 10px 0;
  }
  #kv #news_nav .more {
    position: absolute;
    top: 0;
    right: 0;
    width: 75px;
    height: 100%;
  }
  #kv #news_nav .more a {
    display: block;
    color: #fff;
    font-size: 1.25rem;
    text-align: center;
    line-height: 30px;
    background-color: #00b3cd;
  }
  #kv #news_nav .more a:hover {
    opacity: .8;
  }

  #feature {
    padding-top: 20.52vw;
    margin-bottom: 21.32vw;
  }
  #feature .animate_wrap {
    position: relative;
    width: 100%;
    height: auto;
  }
  #feature .animate_wrap .attached_box {
    width: 100%;
    height: 100%;
    position: absolute;
  }
  #feature .animate_wrap .attached_box.attached_box01 {
    background: url("../images/top/sp_feature_img01.png") center center/100% no-repeat;
    width: 29.33vw;
    height: 29.86vw;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
  }
  #feature .animate_wrap .attached_box.attached_box02 {
    background: url("../images/top/sp_feature_img02.png") center center/100% no-repeat;
    width: 25.06vw;
    height: 42.66vw;
    top: 44vw;
    right: 8vw;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
    z-index: 1;
  }
  #feature .title_wrap {
    position: relative;
    background-color: #00b3cd;
    border-radius: 50%;
    margin-left: 32.66vw;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
  }
  #feature .title_wrap .stitle {
    padding-top: 15.33vw;
    color: #fff;
  }
  #feature .title_wrap .stitle span {
    color: #fff;
    line-height: 1.3;
  }
  #feature .title_wrap:before {
    content: '';
    display: block;
    position: absolute;
    background: url("../images/top/sp_feature_tiitle_attached.png") center center/100% no-repeat;
    width: 12vw;
    height: 10.66vw;
    top: -1vw;
    right: -5.3vw;
  }
  #feature .title_wrap:after {
    content: '';
    display: block;
    position: absolute;
    background: url("../images/top/sp_feature_title_attached_line.png") center center/100% no-repeat;
    width: 4vw;
    height: 4.8vw;
    bottom: 4vw;
    left: 3.4vw;
  }
  #feature .detail_area {
    position: relative;
  }
  #feature .detail_area .attached_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
  }
  #feature .detail_area .attached_box:before, #feature .detail_area .attached_box:after {
    content: '';
    display: block;
    position: absolute;
  }
  #feature .detail_area .attached_box:before {
    background: url("../images/top/sp_feature_img01.png") center center/100% no-repeat;
    width: 29.33vw;
    height: 29.86vw;
    top: -47.1vw;
    left: 0;
  }
  #feature .detail_area .attached_box:after {
    background: url("../images/top/sp_feature_img02.png") center center/100% no-repeat;
    width: 25.06vw;
    height: 42.66vw;
    top: -3.34vw;
    right: 9.3vw;
  }
  #feature .detail_area .list {
    position: relative;
  }
  #feature .detail_area .list li {
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .3s;
         -o-transition-delay: .3s;
            transition-delay: .3s;
    position: absolute;
    width: 28vw;
    height: 28vw;
    font-size: 2.5vw;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    background: url("../images/top/sp_feature_detail_area_list_bg.png") center 0/100% no-repeat;
  }
  #feature .detail_area .list li .inner {
    color: #00b3cd;
    font-weight: bold;
  }
  #feature .detail_area .list .item01 {
    top: -6.7vw;
    left: 13.86vw;
    padding-top: 10.66vw;
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
  }
  #feature .detail_area .list .item01:before, #feature .detail_area .list .item01:after {
    content: '';
    display: block;
    position: absolute;
  }
  #feature .detail_area .list .item01:before {
    background: url("../images/top/sp_feature_list01_attached.png") center center/100% no-repeat;
    width: 12.8vw;
    height: 15.2vw;
    top: -12.6vw;
    left: -6.6vw;
  }
  #feature .detail_area .list .item01:after {
    background: url("../images/top/sp_feature_list01_attached_line.png") center center/100% no-repeat;
    width: 5.06vw;
    height: 4.13vw;
    bottom: -2.6vw;
    left: 3.33vw;
  }
  #feature .detail_area .list .item02 {
    top: 22.8vw;
    left: -1.3vw;
    padding-top: 12.66vw;
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
  }
  #feature .detail_area .list .item02:before, #feature .detail_area .list .item02:after {
    content: '';
    display: block;
    position: absolute;
  }
  #feature .detail_area .list .item02:before {
    background: url("../images/top/sp_feature_list02_attached.png") center center/100% no-repeat;
    width: 12.93vw;
    height: 12.8vw;
    right: -12.93vw;
    top: 0.6vw;
  }
  #feature .detail_area .list .item02:after {
    background: url("../images/top/sp_feature_list02_attached_line.png") center center/100% no-repeat;
    width: 5.2vw;
    height: 4vw;
    bottom: -3.3vw;
    right: 5.7vw;
  }
  #feature .detail_area .list .item03 {
    top: 51.8vw;
    left: 14vw;
    padding-top: 12.66vw;
    -webkit-transition-delay: 1.2s;
         -o-transition-delay: 1.2s;
            transition-delay: 1.2s;
  }
  #feature .detail_area .list .item03:after {
    content: '';
    display: block;
    position: absolute;
  }
  #feature .detail_area .list .item03:after {
    background: url("../images/top/sp_feature_list03_attached.png") center center/100% no-repeat;
    width: 15.86vw;
    height: 12.26vw;
    bottom: 0;
    left: -12.93vw;
  }
  #feature .detail_area .txt_area {
    padding-top: 36.26vw;
  }
  #feature .detail_area .txt_area .txt {
    width: 100%;
    font-size: 3.61vw;
    line-height: 1.5;
    padding-left: 49.33vw;
    margin-bottom: 6.6vw;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: 1.4s;
         -o-transition-delay: 1.4s;
            transition-delay: 1.4s;
  }
  #feature .detail_area .txt_area .btn_wrap {
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: 1.6s;
         -o-transition-delay: 1.6s;
            transition-delay: 1.6s;
  }

  #feature.show .animate_wrap .attached_box.attached_box01 {
    opacity: 1;
  }
  #feature.show .animate_wrap .attached_box.attached_box02 {
    opacity: 1;
  }
  #feature.show .title_wrap {
    opacity: 1;
  }
  #feature.show .detail_area .list li {
    opacity: 1;
  }
  #feature.show .detail_area .txt_area .txt {
    opacity: 1;
  }
  #feature.show .detail_area .txt_area .btn_wrap {
    opacity: 1;
  }

  #product .product_intro {
    width: 100%;
    background: url("../images/top/sp_product_bg.jpg") center center/cover no-repeat;
    padding-top: 16vw;
    padding-bottom: 21.32vw;
    border-bottom: 1px solid #fff;
  }
  #product .product_intro .title_wrap {
    width: 52.8vw;
    height: 52.8vw;
    position: relative;
    padding-top: 12.66vw;
    margin: 0 auto 5.3vw;
    border: 5px solid #fff;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
  }
  #product .product_intro .title_wrap .stitle {
    font-size: 7.3vw;
    color: #fff;
  }
  #product .product_intro .title_wrap .stitle span {
    color: #fff;
  }
  #product .product_intro .title_wrap:before, #product .product_intro .title_wrap:after {
    content: '';
    display: block;
    position: absolute;
  }
  #product .product_intro .title_wrap:before {
    background: url("../images/top/sp_product_title_attached01.png") center center/100% no-repeat;
    width: 12.66vw;
    height: 13.06vw;
    top: 2.6vw;
    left: -10.66vw;
  }
  #product .product_intro .title_wrap:after {
    background: url("../images/top/sp_product_title_attached02.png") center center/100% no-repeat;
    width: 10.13vw;
    height: 9.73vw;
    bottom: 0.06vw;
    right: -6vw;
  }
  #product .product_intro .txt_area h4 {
    font-size: 5.26vw;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 2vw;
    color: #fff;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
  }
  #product .product_intro .txt_area h4 span {
    font-size: 8.61vw;
    font-weight: bold;
  }
  #product .product_intro .txt_area dl {
    margin-bottom: 5.33vw;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
  }
  #product .product_intro .txt_area dl dt, #product .product_intro .txt_area dl dd {
    display: block;
    font-size: 3.61vw;
    color: #fff;
    line-height: 1.9;
  }
  #product .product_intro .txt_area dl dt {
    font-weight: bold;
  }
  #product .product_intro .txt_area dl dd {
    margin-bottom: 5px;
  }
  #product .product_intro .txt_area dl dd .dot {
    letter-spacing: -0.5em;
  }
  #product .product_intro .txt_area .btn_wrap {
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
  }
  #product .product_intro .txt_area .btn_wrap .common_btn:after {
    border-top: 1px solid #00b3cd;
    border-right: 1px solid #00b3cd;
  }
  #product .product_items .item_block {
    width: 100%;
    background-color: #444;
    padding-bottom: 25px;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
  }
  #product .product_items .item_block img.sp {
    display: block;
    width: 100%;
  }
  #product .product_items .item_block.on img.sp {
    -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
            transform: scale(1.1);
  }
  #product .product_items .item_block a {
    display: block;
  }
  #product .product_items .item_block.item_block01 {
    -webkit-transition-delay: 0.3s;
         -o-transition-delay: 0.3s;
            transition-delay: 0.3s;
  }
  #product .product_items .item_block.item_block02 {
    -webkit-transition-delay: 0.6s;
         -o-transition-delay: 0.6s;
            transition-delay: 0.6s;
  }
  #product .product_items .item_block.item_block03 {
    -webkit-transition-delay: 0.9s;
         -o-transition-delay: 0.9s;
            transition-delay: 0.9s;
  }
  #product .product_items .item_block.item_block04 {
    -webkit-transition-delay: 1.2s;
         -o-transition-delay: 1.2s;
            transition-delay: 1.2s;
  }
  #product .product_items .item_block.item_block05 {
    -webkit-transition-delay: 1.5s;
         -o-transition-delay: 1.5s;
            transition-delay: 1.5s;
  }
  #product .product_items .item_block .item_info_wrap {
    padding-top: 4.6vw;
    padding-bottom: 6vw;
  }
  #product .product_items .item_block .item_info_wrap h4 {
    font-weight: bold;
    font-size: 6.38vw;
    text-align: center;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 5px;
  }
  #product .product_items .item_block .item_info_wrap p {
    font-size: 3.33vw;
    color: #c6c6c6;
    text-align: center;
    line-height: 1.3;
  }
  #product .product_items .item_block .common_btn {
    width: 92%;
    margin: 0 auto;
  }
  #product .product_items .item_block .img_wrap img {
    display: block;
  }

  #product .product_intro .common_inner.show .title_wrap {
    opacity: 1;
  }
  #product .product_intro .common_inner.show .txt_area h4 {
    opacity: 1;
  }
  #product .product_intro .common_inner.show .txt_area dl {
    opacity: 1;
  }
  #product .product_intro .common_inner.show .txt_area .btn_wrap {
    opacity: 1;
  }
  #product .product_items.show .item_block.item_block01 {
    opacity: 1;
  }
  #product .product_items.show .item_block.item_block02 {
    opacity: 1;
  }
  #product .product_items.show .item_block.item_block03 {
    opacity: 1;
  }
  #product .product_items.show .item_block.item_block04 {
    opacity: 1;
  }
  #product .product_items.show .item_block.item_block05 {
    opacity: 1;
  }

  .history_learn_more_wrap {
    width: 100%;
    background: url("../images/top/sp_history_bg.jpg") center center/cover no-repeat;
  }

  #learn_more {
    padding-top: 50px;
    margin-bottom: 10.46vw;
  }
  #learn_more .common_inner {
    position: relative;
  }
  #learn_more .learn_more_title_wrap a {
    display: block;
    width: 54.66vw;
    height: 54.66vw;
    background: url("../images/top/sp_learn_title_bg.png") center 0/100% no-repeat;
  }
  #learn_more .learn_more_title_wrap .replace_a {
    display: block;
    width: 54.66vw;
    height: 54.66vw;
    background: url("../images/top/sp_learn_title_bg.png") center 0/100% no-repeat;
  }
  #learn_more .learn_more_title_wrap .animate_wrap {
    position: absolute;
    width: 100%;
  }
  #learn_more .learn_more_title_wrap .animate_wrap .attached_box {
    position: absolute;
  }
  #learn_more .learn_more_title_wrap.selection {
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
  }
  #learn_more .learn_more_title_wrap.selection .animate_wrap .attached_box {
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
  }
  #learn_more .learn_more_title_wrap.selection .animate_wrap .attached_box.attached_box01 {
    top: 16vw;
    left: 0;
    background: url("../images/top/sp_learn_selection_attached01.png") center 0/100% no-repeat;
    width: 10.8vw;
    height: 11.2vw;
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
  }
  #learn_more .learn_more_title_wrap.selection .animate_wrap .attached_box.attached_box02 {
    top: 0.5vw;
    right: 16vw;
    background: url("../images/top/sp_learn_selection_attached02.png") center 0/100% no-repeat;
    width: 30.13vw;
    height: 25.73vw;
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
  }
  #learn_more .learn_more_title_wrap.selection .animate_wrap .for_attach {
    position: absolute;
    top: 68.7vw;
    right: 40vw;
    background: url("../images/top/sp_learn_selection_attached_line.png") center 0/100% no-repeat;
    width: 7.06vw;
    height: 8.4vw;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
  }
  #learn_more .learn_more_title_wrap.selection h3 .space {
    display: inline-block;
    margin-right: -6px;
  }
  #learn_more .learn_more_title_wrap.selection .inner {
    padding-top: 19.33vw;
    z-index: 1;
  }
  #learn_more .learn_more_title_wrap.selection .inner a {
    padding-top: 14vw;
    margin-left: 2vw;
  }
  #learn_more .learn_more_title_wrap.selection .inner a p {
    padding-top: 5.8vw;
  }
  #learn_more .learn_more_title_wrap.case {
    position: absolute;
    top: 39.66vw;
    right: 0;
    z-index: 5;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
  }
  #learn_more .learn_more_title_wrap.case .animate_wrap .attached_box {
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
  }
  #learn_more .learn_more_title_wrap.case .animate_wrap .attached_box.attached_box01 {
    top: 18vw;
    left: 32vw;
    background: url("../images/top/sp_learn_case_attached01.png") center 0/100% no-repeat;
    width: 9.46vw;
    height: 16.26vw;
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
  }
  #learn_more .learn_more_title_wrap.case .animate_wrap .attached_box.attached_box02 {
    top: 66vw;
    right: 47.6vw;
    background: url("../images/top/sp_learn_case_attached02.png") center 0/100% no-repeat;
    width: 45.6vw;
    height: 26.26vw;
    -webkit-transition-delay: 1.2s;
         -o-transition-delay: 1.2s;
            transition-delay: 1.2s;
  }
  #learn_more .learn_more_title_wrap.case .inner {
    padding-top: 32.66vw;
  }
  #learn_more .learn_more_title_wrap.case .inner a {
    padding-top: 16vw;
  }
  #learn_more .learn_more_title_wrap.case .inner a p {
    padding-top: 12vw;
  }
  #learn_more .learn_more_title_wrap.case .inner .replace_a {
    padding-top: 6vw;
  }
  #learn_more .learn_more_title_wrap.case .inner .replace_a p {
    padding-top: 8.0vw;
  }
  #learn_more .learn_more_title_wrap.case .inner .replace_a p:before, #learn_more .learn_more_title_wrap.case .inner .replace_a p:after {
    display: none;
  }
  #learn_more .learn_more_title_wrap.column {
    z-index: 5;
    margin-top: 36vw;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: 1.6s;
         -o-transition-delay: 1.6s;
            transition-delay: 1.6s;
  }
  #learn_more .learn_more_title_wrap.column .animate_wrap .for_attach {
    position: absolute;
    top: 12vw;
    right: 40vw;
    background: url("../images/top/sp_column_attached_line.png") center 0/100% no-repeat;
    width: 22.66vw;
    height: 32.53vw;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
    -webkit-transition: opacity linear 200ms;
    -o-transition: opacity linear 200ms;
    transition: opacity linear 200ms;
  }
  #learn_more .learn_more_title_wrap.column .inner {
    padding-top: 32.66vw;
  }
  #learn_more .learn_more_title_wrap.column .inner a {
    padding-top: 16vw;
  }
  #learn_more .learn_more_title_wrap.column .inner a p {
    padding-top: 10vw;
  }
  #learn_more .learn_more_title_wrap.column .inner h3 {
    width: 90%;
    margin: 0 auto 2.66vw;
  }
  #learn_more .learn_more_title_wrap.column .inner .replace_a {
    padding-top: 6vw;
  }
  #learn_more .learn_more_title_wrap.column .inner .replace_a p {
    padding-top: 8.0vw;
  }
  #learn_more .learn_more_title_wrap.column .inner .replace_a p:before, #learn_more .learn_more_title_wrap.column .inner .replace_a p:after {
    display: none;
  }
  #learn_more .learn_more_title_wrap a:hover {
    text-decoration: none;
  }
  #learn_more .learn_more_title_wrap a:hover p {
    opacity: .8;
  }
  #learn_more .learn_more_title_wrap h3 {
    font-size: 8.33vw;
    font-weight: bold;
    text-align: center;
    color: #fff;
    margin-bottom: 2.66vw;
  }
  #learn_more .learn_more_title_wrap h3 span {
    display: block;
    font-size: 3.056vw;
    line-height: 1.3;
    color: #fff;
    margin-bottom: 2vw;
  }
  #learn_more .learn_more_title_wrap p {
    width: 100%;
    text-align: center;
    font-size: 3.056vw;
    color: #fff;
  }
  #learn_more .learn_more_title_wrap p:after {
    content: '';
    display: inline-block;
    width: 1.3vw;
    height: 1.3vw;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: 0.2s right linear;
    -o-transition: 0.2s right linear;
    transition: 0.2s right linear;
    margin-left: 5px;
    margin-bottom: 2px;
  }

  #learn_more.show .learn_more_title_wrap {
    opacity: 1;
  }
  #learn_more.show .learn_more_title_wrap .animate_wrap .attached_box {
    opacity: 1;
  }
  #learn_more.show .learn_more_title_wrap .animate_wrap .for_attach {
    opacity: 1;
  }

  #global {
    position: relative;
    background: url("../images/top/sp_global_bg.jpg") center center/cover no-repeat;
    padding: 13.33vw 0 21.33vw;
  }
  #global .title_wrap {
    width: 56.66vw;
    height: 56.66vw;
    border: 5px solid #00b3cd;
    background-color: #fff;
    border-radius: 50%;
    margin: 0 auto 1.3vw;
  }
  #global .title_wrap .stitle {
    font-size: 5.33vw;
    line-height: 1.3;
    padding-top: 22.66vw;
    color: #00b3cd;
  }
  #global .title_wrap .title_eng {
    font-size: 2.93vw;
    color: #00b3cd;
  }
  #global .title_wrap .note {
    display: block;
    font-size: 2.6vw;
    line-height: 1.3;
    text-align: center;
  }
  #global .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #global .item {
    width: 43.33vw;
    height: 43.33vw;
    text-align: center;
    opacity: 0;
    -webkit-transition-duration: 400ms;
         -o-transition-duration: 400ms;
            transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
    margin-bottom: 2.6vw;
  }
  #global .item:nth-child(even) {
    margin-left: 5.3vw;
  }
  #global .item:last-child {
    margin-bottom: 0;
  }
  #global .item a {
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/top/global_title_bg.png") center 0/100% no-repeat #fff;
    padding-top: 16.66vw;
    border-radius: 50%;
  }
  #global .item a:hover {
    opacity: .8;
  }
  #global .item .area {
    font-size: 4.26vw;
    color: #fff;
    line-height: 1.4;
    margin-bottom: 13vw;
  }
  #global .item .link {
    position: relative;
    font-size: 2.93vw;
    line-height: 1.1;
    color: #00b3cd;
    padding-right: .6vw;
  }
  #global .item .link:after {
    content: '';
    display: block;
    position: absolute;
    top: 1vw;
    right: 10vw;
    background: url("../images/top/icon_blank.svg") center 0/100% no-repeat;
    width: 3.2vw;
    height: 2.6vw;
  }
  #global .item.line2 a {
    padding-top: 14.33vw;
  }
  #global .item.line2 .area {
    margin-bottom: 9.5vw;
  }
  #global .item1 {
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
  }
  #global .item2 {
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
  }
  #global .item3 {
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
  }
  #global .item4 {
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
  }
  #global .item5 {
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
  }

  #global.show .title_wrap {
    opacity: 1;
  }
  #global.show .item {
    opacity: 1;
  }
}
/* Animation Setting */
.animate {
  opacity: 0;
  -webkit-transition: all 300ms linear;
  -o-transition: all 300ms linear;
  transition: all 300ms linear;
}
.animate.show {
  opacity: 1;
}