@charset "UTF-8";
/* line 219, ../sass/_variables.scss */
body {
  font-size: 16px;
}
@media screen and (max-width: 1223px) {
  /* line 219, ../sass/_variables.scss */
  body {
    font-size: max(1.30719vw,14px);
  }
}
@media screen and (max-width: 768px) {
  /* line 219, ../sass/_variables.scss */
  body {
    font-size: 4.26667vw;
  }
}

/* line 320, ../sass/_variables.scss */
.stripe {
  background: -webkit-repeating-linear-gradient(-45deg, #cce7ff 0, #cce7ff 5px, #e9f4ff 5px, #e9f4ff 10px);
  background: repeating-linear-gradient(-45deg, #cce7ff 0, #cce7ff 5px, #e9f4ff 5px, #e9f4ff 10px);
}

/* line 323, ../sass/_variables.scss */
.stripe2 {
  background: -webkit-repeating-linear-gradient(-90deg, #eef 0, #eef 5px, #fff 5px, #fff 10px);
  background: repeating-linear-gradient(-90deg, #eef 0, #eef 5px, #fff 5px, #fff 10px);
}

/* line 10, ../sass/top.scss */
.spSlide {
  display: none !important;
}

/* line 13, ../sass/top.scss */
.pcSlide {
  display: block !important;
}

/* line 18, ../sass/top.scss */
.btn_outer {
  position: relative;
  display: inline-block;
}
/* line 21, ../sass/top.scss */
.btn_outer .btn {
  border: 1px solid #888888;
  margin: 0;
  display: block;
}
/* line 25, ../sass/top.scss */
.btn_outer .btn:hover {
  border: 1px solid #000;
}
/* line 29, ../sass/top.scss */
.btn_outer .dot {
  width: 7px;
  height: 7px;
  display: block;
  position: absolute;
  border: 1px solid #8B8B8B;
  background-color: #fff;
  z-index: 10;
}
/* line 38, ../sass/top.scss */
.btn_outer .leftTop {
  left: -3px;
  top: -3px;
}
/* line 42, ../sass/top.scss */
.btn_outer .rightTop {
  right: -3px;
  top: -3px;
}
/* line 46, ../sass/top.scss */
.btn_outer .rightBtm {
  right: -3px;
  bottom: -3px;
}
/* line 50, ../sass/top.scss */
.btn_outer .leftBtm {
  left: -3px;
  bottom: -3px;
}

/* line 55, ../sass/top.scss */
.main_visual {
  position: relative;
}
@media screen and (max-width: 1920px) {
  /* line 55, ../sass/top.scss */
  .main_visual {
    height: 56.25vw;
  }
}
/* line 62, ../sass/top.scss */
.main_visual .main_slide .slide_image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
/* line 70, ../sass/top.scss */
.main_visual .main_slide .slide_image img {
  width: 100%;
}
/* line 75, ../sass/top.scss */
.main_visual .main_lead {
  position: absolute;
  top: 50%;
  left: 5%;
  width: min(43.22917vw,1000px);
  transform: translateY(-50%);
  animation: fadeIn 5s ease 0s 1 normal;
  -webkit-animation: fadeIn 5s ease 0s 1 normal;
}
/* line 83, ../sass/top.scss */
.main_visual .main_lead .img {
  padding-bottom: 30px;
  margin-bottom: 30px;
}
/* line 88, ../sass/top.scss */
.main_visual .main_lead .text {
  font-size: max(1.25vw,12px);
  color: #fff;
  padding: 0;
  line-height: 2;
  font-weight: bold;
  letter-spacing: 2px;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadezoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
    /* 拡大率 */
  }
}
/* line 115, ../sass/top.scss */
.add-animation {
  animation: fadezoom 5s 0s forwards;
}

/* line 119, ../sass/top.scss */
.sec_bg {
  display: block;
  width: 100vw;
  background-attachment: fixed;
  height: 480px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
  /* line 119, ../sass/top.scss */
  .sec_bg {
    background: transparent;
    background-image: none !important;
  }
}

@media screen and (max-width: 768px) {
  /* line 135, ../sass/top.scss */
  body:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-image: url(../img/sp_palalax.jpg);
    background-size: cover;
  }
}

/* line 153, ../sass/top.scss */
section .wrapper h2 {
  font-size: 86px;
  margin-bottom: 60px;
}
/* line 157, ../sass/top.scss */
section .wrapper .mds {
  font-size: 34px;
  margin-bottom: 60px;
}

/* line 163, ../sass/top.scss */
#bnr {
  padding: 90px 0 100px;
}
@media screen and (max-width: 768px) {
  /* line 163, ../sass/top.scss */
  #bnr {
    background-color: #fff;
  }
}

/* line 169, ../sass/top.scss */
#sec01 {
  padding: 90px 0 200px;
}
@media screen and (max-width: 768px) {
  /* line 169, ../sass/top.scss */
  #sec01 {
    background-color: #fff;
  }
}
/* line 175, ../sass/top.scss */
#sec01 .wrapper .flex {
  margin-left: 0;
  margin-right: 0;
}
/* line 178, ../sass/top.scss */
#sec01 .wrapper .flex h2 {
  width: 20%;
  font-weight: 400;
  position: relative;
}
/* line 182, ../sass/top.scss */
#sec01 .wrapper .flex h2:after {
  content: "ニュース";
  color: #005BD8;
  font-size: 20px;
  display: block;
  transform: translateY(-10px);
}
/* line 190, ../sass/top.scss */
#sec01 .wrapper .flex .news_list {
  width: 80%;
  padding-left: 10%;
  margin: 20px 0 100px;
}
/* line 194, ../sass/top.scss */
#sec01 .wrapper .flex .news_list .list_item {
  margin-bottom: 20px;
}
/* line 196, ../sass/top.scss */
#sec01 .wrapper .flex .news_list .list_item .date_cat {
  margin-bottom: 20px;
}
/* line 198, ../sass/top.scss */
#sec01 .wrapper .flex .news_list .list_item .date_cat .date {
  display: inline-block;
  color: #8B8B8B;
  position: relative;
  margin-right: 3em;
}
/* line 203, ../sass/top.scss */
#sec01 .wrapper .flex .news_list .list_item .date_cat .date:after {
  content: "";
  display: block;
  width: 25px;
  height: 1px;
  background-color: #8B8B8B;
  position: absolute;
  right: -40px;
  top: 55%;
  transform: translateY(-50%);
}
/* line 215, ../sass/top.scss */
#sec01 .wrapper .flex .news_list .list_item .date_cat .cat {
  display: inline-block;
  color: #005BD8;
}
/* line 220, ../sass/top.scss */
#sec01 .wrapper .flex .news_list .list_item .title {
  display: block;
  color: #000;
  padding-left: 1em;
  text-decoration: none;
}
/* line 225, ../sass/top.scss */
#sec01 .wrapper .flex .news_list .list_item .title:hover {
  text-decoration: underline;
}

/* line 235, ../sass/top.scss */
#sec02 {
  background-image: url(../img/about_bk.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 200px 0;
}
/* line 243, ../sass/top.scss */
#sec02 .wrapper .flex .left {
  width: 50%;
  padding-right: 90px;
  color: #fff;
}
/* line 247, ../sass/top.scss */
#sec02 .wrapper .flex .left h2 {
  font-weight: 400;
  color: #fff;
  position: relative;
}
/* line 251, ../sass/top.scss */
#sec02 .wrapper .flex .left h2:after {
  content: "キャデックについて";
  color: #fff;
  font-size: 20px;
  display: block;
  transform: translateY(-10px);
}
/* line 259, ../sass/top.scss */
#sec02 .wrapper .flex .left .mds {
  line-height: 2;
}
/* line 262, ../sass/top.scss */
#sec02 .wrapper .flex .left p {
  line-height: 1.8;
  margin-bottom: 30px;
}
/* line 267, ../sass/top.scss */
#sec02 .wrapper .flex .right {
  width: 50%;
}

/* line 275, ../sass/top.scss */
#sec03 {
  padding: 200px 0;
}
@media screen and (max-width: 768px) {
  /* line 275, ../sass/top.scss */
  #sec03 {
    background-color: #fff;
  }
}
/* line 281, ../sass/top.scss */
#sec03 .wrapper h2 {
  font-weight: 400;
  position: relative;
}
/* line 284, ../sass/top.scss */
#sec03 .wrapper h2:after {
  content: "事業内容";
  color: #005BD8;
  font-size: 20px;
  display: block;
  transform: translateY(-10px);
}
/* line 292, ../sass/top.scss */
#sec03 .wrapper .mds {
  line-height: 2;
}
/* line 295, ../sass/top.scss */
#sec03 .wrapper .flex {
  margin-right: 0;
  margin-left: 0;
  margin-top: 120px;
}
/* line 299, ../sass/top.scss */
#sec03 .wrapper .flex .l_cont {
  width: 45%;
}
/* line 302, ../sass/top.scss */
#sec03 .wrapper .flex .r_cont {
  width: 45%;
}
/* line 305, ../sass/top.scss */
#sec03 .wrapper .flex .trf_btn {
  text-align: center;
  transform: translateY(-50%);
}
/* line 308, ../sass/top.scss */
#sec03 .wrapper .flex .trf_btn .btn {
  padding: 2em;
  display: block;
}
/* line 314, ../sass/top.scss */
#sec03 .wrapper .brd_box {
  border: 1px solid #888888;
  padding: 60px;
}
/* line 317, ../sass/top.scss */
#sec03 .wrapper .brd_box p {
  margin-bottom: 60px;
}

/* line 325, ../sass/top.scss */
#sec04 {
  padding: 180px 0 150px;
  background-color: #F4F4F4;
}
/* line 330, ../sass/top.scss */
#sec04 .wrapper h2 {
  font-weight: 400;
  position: relative;
}
/* line 333, ../sass/top.scss */
#sec04 .wrapper h2:after {
  content: "実績紹介";
  color: #005BD8;
  font-size: 20px;
  display: block;
  transform: translateY(-10px);
}
/* line 341, ../sass/top.scss */
#sec04 .wrapper .abs_btn {
  text-align: right;
}
/* line 344, ../sass/top.scss */
#sec04 .wrapper .arc_slider {
  margin: 5px 0 90px;
}
/* line 349, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slick-arrow {
  position: absolute;
  bottom: -180px;
  top: unset;
  width: 52px;
  height: 52px;
  z-index: 2;
}
/* line 356, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slick-arrow.slick-next {
  right: 45%;
}
/* line 358, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slick-arrow.slick-next:before {
  content: "";
  background-image: url(../img/next.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
}
/* line 370, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slick-arrow.slick-prev {
  left: 45%;
}
/* line 372, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slick-arrow.slick-prev:before {
  content: "";
  background-image: url(../img/prev.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
}
/* line 385, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slick-list {
  overflow: hidden;
  padding: 5px 0;
}
/* line 389, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slide_cont {
  margin: 0 0.5%;
}
/* line 391, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slide_cont .thmb {
  width: 100%;
  display: block;
  height: min(13.02083vw,250px);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 15px;
  position: relative;
  border: 1px solid #888;
}
/* line 402, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slide_cont .thmb .h_cover {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-content: center;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: 1s;
  z-index: 1;
}
/* line 421, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slide_cont .thmb .h_cover .yajirushi {
  margin-left: 15px;
}
/* line 426, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slide_cont .thmb:hover .h_cover {
  background-color: rgba(0, 0, 0, 0.6);
  transition: 0.5s;
  opacity: 1;
}
/* line 433, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slide_cont .thmb .dot {
  width: 7px;
  height: 7px;
  display: block;
  position: absolute;
  border: 1px solid #8B8B8B;
  background-color: #888;
  z-index: 3;
}
/* line 442, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slide_cont .thmb .leftTop {
  left: -3px;
  top: -3px;
}
/* line 446, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slide_cont .thmb .rightTop {
  right: -3px;
  top: -3px;
}
/* line 450, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slide_cont .thmb .rightBtm {
  right: -3px;
  bottom: -3px;
}
/* line 454, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slide_cont .thmb .leftBtm {
  left: -3px;
  bottom: -3px;
}
/* line 460, ../sass/top.scss */
#sec04 .wrapper .arc_slider .slide_cont .incont h3 {
  margin-bottom: 15px;
}

/* line 472, ../sass/top.scss */
#sec05 {
  background-image: url(../img/recruit_bk.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 150px 0;
  position: relative;
}
/* line 479, ../sass/top.scss */
#sec05:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #00266E;
  opacity: 0.7;
}
/* line 490, ../sass/top.scss */
#sec05 .wrapper {
  position: relative;
}
/* line 493, ../sass/top.scss */
#sec05 .wrapper .flex .left {
  width: 50%;
}
/* line 496, ../sass/top.scss */
#sec05 .wrapper .flex .right {
  width: 50%;
  padding-left: 150px;
  color: #fff;
}
/* line 500, ../sass/top.scss */
#sec05 .wrapper .flex .right h2 {
  font-weight: 400;
  color: #fff;
  position: relative;
}
/* line 504, ../sass/top.scss */
#sec05 .wrapper .flex .right h2:after {
  content: "採用情報";
  color: #fff;
  font-size: 20px;
  display: block;
  transform: translateY(-10px);
}
/* line 512, ../sass/top.scss */
#sec05 .wrapper .flex .right .mds {
  line-height: 2;
}
/* line 515, ../sass/top.scss */
#sec05 .wrapper .flex .right p {
  line-height: 1.8;
  margin-bottom: 30px;
}

/* line 524, ../sass/top.scss */
#sec06 {
  padding: 120px 0;
}
@media screen and (max-width: 768px) {
  /* line 524, ../sass/top.scss */
  #sec06 {
    background-color: #fff;
    padding: 10.41667vw 1em;
  }
}
/* line 531, ../sass/top.scss */
#sec06 .wrapper h2 {
  width: 40%;
  font-weight: 400;
  position: relative;
}
@media screen and (max-width: 768px) {
  /* line 531, ../sass/top.scss */
  #sec06 .wrapper h2 {
    width: 100%;
  }
}
/* line 538, ../sass/top.scss */
#sec06 .wrapper h2:after {
  content: "スタッフブログ";
  color: #005BD8;
  font-size: 20px;
  display: block;
  transform: translateY(-10px);
}
/* line 546, ../sass/top.scss */
#sec06 .wrapper .blog_list {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-flex: 1 0 0%;
  flex: 1 0 0%;
  -webkit-align-items: stretch;
  align-items: stretch;
  -webkit-align-content: flex-start;
  align-content: flex-start;
  gap: 2%;
}
@media screen and (max-width: 768px) {
  /* line 546, ../sass/top.scss */
  #sec06 .wrapper .blog_list {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex: 1 0 0%;
    flex: 1 0 0%;
    -webkit-align-items: stretch;
    align-items: stretch;
    -webkit-align-content: flex-start;
    align-content: flex-start;
  }
}
/* line 552, ../sass/top.scss */
#sec06 .wrapper .blog_list .slide-arrow {
  width: 6.4vw;
  height: 6.4vw;
  background-color: #fff;
  background-image: url(../img/next.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  bottom: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transform: translateY(15%);
}
/* line 565, ../sass/top.scss */
#sec06 .wrapper .blog_list .slide-arrow.next-arrow {
  right: 9%;
}
/* line 568, ../sass/top.scss */
#sec06 .wrapper .blog_list .slide-arrow.prev-arrow {
  transform: translateY(15%) rotate(180deg);
  left: 9%;
}
/* line 573, ../sass/top.scss */
#sec06 .wrapper .blog_list .blog_item {
  display: block;
  width: 32%;
  text-decoration: none;
  color: #333;
  transition: 0.5s;
}
@media screen and (min-width: 769px) {
  /* line 580, ../sass/top.scss */
  #sec06 .wrapper .blog_list .blog_item:hover {
    opacity: 0.7;
    transition: 0.5s;
  }
}
@media screen and (max-width: 768px) {
  /* line 573, ../sass/top.scss */
  #sec06 .wrapper .blog_list .blog_item {
    margin: 0 1em;
  }
}
/* line 588, ../sass/top.scss */
#sec06 .wrapper .blog_list .blog_item .thmb {
  width: 100%;
  height: 13.02083vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  /* line 588, ../sass/top.scss */
  #sec06 .wrapper .blog_list .blog_item .thmb {
    height: 40vw;
  }
}
/* line 600, ../sass/top.scss */
#sec06 .wrapper .blog_list .blog_item .blog_cnt .date {
  font-size: clamp(14px, 0.9375vw, 18px);
}
@media screen and (max-width: 768px) {
  /* line 600, ../sass/top.scss */
  #sec06 .wrapper .blog_list .blog_item .blog_cnt .date {
    font-size: clamp(12px, 1.82292vw, 14px);
  }
}
/* line 607, ../sass/top.scss */
#sec06 .wrapper .blog_list .blog_item .blog_cnt .item_title {
  display: block;
  font-size: clamp(16px, 1.04167vw, 20px);
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  /* line 607, ../sass/top.scss */
  #sec06 .wrapper .blog_list .blog_item .blog_cnt .item_title {
    font-size: clamp(14px, 2.08333vw, 16px);
  }
}

/*===========
inview
===========*/
/* line 625, ../sass/top.scss */
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
/* line 629, ../sass/top.scss */
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

/*==================================================
ふわっ
===================================*/
/* その場で */
/* line 644, ../sass/top.scss */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 下から */
/* line 663, ../sass/top.scss */
.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 上から */
/* line 684, ../sass/top.scss */
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 左から */
/* line 705, ../sass/top.scss */
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* 右から */
/* line 726, ../sass/top.scss */
.fadeRight {
  animation-name: fadeRightAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes fadeRightAnime {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/* line 747, ../sass/top.scss */
.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger {
  opacity: 0;
}

/*==================================================
パタッ
===================================*/
/* 下へ */
/* line 761, ../sass/top.scss */
.flipDown {
  animation-name: flipDownAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipDownAnime {
  from {
    transform: perspective(2500px) rotateX(100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2500px) rotateX(0);
    opacity: 1;
  }
}
/* 左へ */
/* line 782, ../sass/top.scss */
.flipLeft {
  animation-name: flipLeftAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: left center;
  opacity: 0;
}

@keyframes flipLeftAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* 左上へ */
/* line 804, ../sass/top.scss */
.flipLeftTop {
  animation-name: flipLeftTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipLeftTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(-15deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
/* 右へ */
/* line 824, ../sass/top.scss */
.flipRight {
  animation-name: flipRightAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  perspective-origin: right center;
  opacity: 0;
}

@keyframes flipRightAnime {
  from {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
    opacity: 0;
  }
  to {
    transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
    opacity: 1;
  }
}
/* 右上へ */
/* line 845, ../sass/top.scss */
.flipRightTop {
  animation-name: flipRightTopAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes flipRightTopAnime {
  from {
    transform: translate(-20px, 80px) rotate(25deg);
    opacity: 0;
  }
  to {
    transform: translate(0, 1) rotate(0deg);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/* line 866, ../sass/top.scss */
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger {
  opacity: 0;
}

/*==================================================
くるっ
===================================*/
/* X 軸（縦へ） */
/* line 880, ../sass/top.scss */
.rotateX {
  animation-name: rotateXAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateXAnime {
  from {
    transform: rotateX(0);
    opacity: 0;
  }
  to {
    transform: rotateX(-360deg);
    opacity: 1;
  }
}
/*　Y軸（横へ） */
/* line 898, ../sass/top.scss */
.rotateY {
  animation-name: rotateYAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateYAnime {
  from {
    transform: rotateY(0);
    opacity: 0;
  }
  to {
    transform: rotateY(-360deg);
    opacity: 1;
  }
}
/* Z 軸（左へ） */
/* line 916, ../sass/top.scss */
.rotateLeftZ {
  animation-name: rotateLeftZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateLeftZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(-360deg);
    opacity: 1;
  }
}
/*　Z 軸（右へ） */
/* line 934, ../sass/top.scss */
.rotateRightZ {
  animation-name: rotateRightZAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes rotateRightZAnime {
  from {
    transform: rotateZ(0);
    opacity: 0;
  }
  to {
    transform: rotateZ(360deg);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/* line 953, ../sass/top.scss */
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger {
  opacity: 0;
}

/*==================================================
ボンッ、ヒュッ
===================================*/
/* 拡大 */
/* line 965, ../sass/top.scss */
.zoomIn {
  animation-name: zoomInAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomInAnime {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* 縮小 */
/* line 984, ../sass/top.scss */
.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes zoomOutAnime {
  from {
    transform: scale(1.2);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/* line 1004, ../sass/top.scss */
.zoomInTrigger,
.zoomOutTrigger {
  opacity: 0;
}

/*==================================================
じわっ
===================================*/
/* ぼかしから出現 */
/* line 1014, ../sass/top.scss */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
    opacity: 0;
  }
  to {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/* line 1036, ../sass/top.scss */
.blurTrigger {
  opacity: 0;
}

/*==================================================
にゅーん
===================================*/
/* 滑らかに変形して出現 */
/* line 1045, ../sass/top.scss */
.smooth {
  animation-name: smoothAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  　transform-origin: left;
  opacity: 0;
}

@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1;
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/* line 1067, ../sass/top.scss */
.smoothTrigger {
  opacity: 0;
}

/*==================================================
スーッ（枠線が伸びて出現）
===================================*/
/*枠線が伸びて出現*/
/* line 1077, ../sass/top.scss */
.lineTrigger {
  position: relative;
  /* 枠線が書かれる基点*/
  opacity: 0;
}

/* line 1082, ../sass/top.scss */
.lineTrigger.lineanime {
  animation-name: lineAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes lineAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*上下線*/
/* line 1099, ../sass/top.scss */
.lineTrigger::before,
.lineTrigger::after {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: #333;
  /* 枠線の色*/
}

/*左右線*/
/* line 1109, ../sass/top.scss */
.line2::before,
.line2::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: #333;
  /* 枠線の色*/
}

/*上線*/
/* line 1119, ../sass/top.scss */
.lineTrigger::before {
  top: 0;
  left: 0;
}

/* line 1124, ../sass/top.scss */
.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;
  /*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
/* line 1129, ../sass/top.scss */
.line2::before {
  top: 0;
  right: 0;
}

/* line 1134, ../sass/top.scss */
.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;
  /*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
/* line 1139, ../sass/top.scss */
.lineTrigger::after {
  bottom: 0;
  right: 0;
}

/* line 1144, ../sass/top.scss */
.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;
  /*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
/* line 1149, ../sass/top.scss */
.line2::after {
  bottom: 0;
  left: 0;
}

/* line 1154, ../sass/top.scss */
.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;
  /*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes lineAnime2 {
  0% {
    height: 0%;
  }
  100% {
    height: 100%;
  }
}
/*枠線内側の要素*/
/* line 1170, ../sass/top.scss */
.lineTrigger.lineanime .lineinappear {
  animation: lineInnerAnime .5s linear 1.5s forwards;
  /*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;
  /*初期値を透過0にする*/
}

@keyframes lineInnerAnime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*==================================================
シャッ（背景色が伸びて出現）
===================================*/
/*背景色が伸びて出現（共通）*/
/* line 1186, ../sass/top.scss */
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  /*　はみ出た色要素を隠す　*/
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*中の要素*/
/* line 1206, ../sass/top.scss */
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/*左から*/
/* line 1224, ../sass/top.scss */
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/*右から*/
/* line 1253, ../sass/top.scss */
.bgRLextend::before {
  animation-name: bgRLextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@keyframes bgRLextendAnime {
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}
/*下から*/
/* line 1282, ../sass/top.scss */
.bgDUextend::before {
  animation-name: bgDUextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@keyframes bgDUextendAnime {
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}
/*上から*/
/* line 1311, ../sass/top.scss */
.bgUDextend::before {
  animation-name: bgUDextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #666;
  /*伸びる背景色の設定*/
}

@keyframes bgUDextendAnime {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }
  50% {
    transform-origin: top;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: bottom;
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
/* line 1340, ../sass/top.scss */
.bgappearTrigger,
.bgUDextendTrigger,
.bgDUextendTrigger,
.bgRLextendTrigger,
.bgLRextendTrigger {
  opacity: 0;
}

/*==================================================
アニメーション設定
===================================*/
/* アニメーションの回数を決めるCSS*/
/* line 1355, ../sass/top.scss */
.count2 {
  animation-iteration-count: 2;
  /*この数字を必要回数分に変更*/
}

/* line 1359, ../sass/top.scss */
.countinfinite {
  animation-iteration-count: infinite;
  /*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/
/* line 1364, ../sass/top.scss */
.delay-time01 {
  animation-delay: 0.1s;
}

/* line 1368, ../sass/top.scss */
.delay-time02 {
  animation-delay: 0.2s;
}

/* line 1372, ../sass/top.scss */
.delay-time03 {
  animation-delay: 0.3s;
}

/* line 1376, ../sass/top.scss */
.delay-time04 {
  animation-delay: 0.4s;
}

/* line 1380, ../sass/top.scss */
.delay-time05 {
  animation-delay: 0.5s;
}

/* line 1384, ../sass/top.scss */
.delay-time06 {
  animation-delay: 0.6s;
}

/* line 1388, ../sass/top.scss */
.delay-time07 {
  animation-delay: 0.7s;
}

/* line 1392, ../sass/top.scss */
.delay-time08 {
  animation-delay: 0.8s;
}

/* line 1396, ../sass/top.scss */
.delay-time09 {
  animation-delay: 0.9s;
}

/* line 1400, ../sass/top.scss */
.delay-time1 {
  animation-delay: 1s;
}

/* line 1404, ../sass/top.scss */
.delay-time15 {
  animation-delay: 1.5s;
}

/* line 1408, ../sass/top.scss */
.delay-time2 {
  animation-delay: 2s;
}

/* line 1412, ../sass/top.scss */
.delay-time25 {
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/
/* line 1418, ../sass/top.scss */
.change-time05 {
  animation-duration: 0.5s;
}

/* line 1422, ../sass/top.scss */
.change-time1 {
  animation-duration: 1s;
}

/* line 1426, ../sass/top.scss */
.change-time15 {
  animation-duration: 1.5s;
}

/* line 1430, ../sass/top.scss */
.change-time2 {
  animation-duration: 2s;
}

/* line 1434, ../sass/top.scss */
.change-time25 {
  animation-duration: 2.5s;
}

@media screen and (min-width: 769px) and (max-width: 1223px) {
  /* line 8, ../sass/_mid-top.scss */
  section .wrapper h2 {
    font-size: 7.8125vw;
    width: 100%;
    margin-bottom: 5.20833vw;
  }
  /* line 13, ../sass/_mid-top.scss */
  section .wrapper .mds {
    font-size: 4.42708vw;
    margin-bottom: 5.20833vw;
  }
}
@media screen and (max-width: 768px) {
  /* line 6, ../sass/_sp-top.scss */
  .btn_outer {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 80%;
  }
  /* line 11, ../sass/_sp-top.scss */
  .btn_outer .btn {
    border: 1px solid #888888;
    margin: 0;
    width: 100%;
  }
  /* line 15, ../sass/_sp-top.scss */
  .btn_outer .btn:hover {
    border: 1px solid #000;
  }
  /* line 19, ../sass/_sp-top.scss */
  .btn_outer .dot {
    width: 7px;
    height: 7px;
    display: block;
    position: absolute;
    border: 1px solid #8B8B8B;
    background-color: #fff;
    z-index: 10;
  }
  /* line 28, ../sass/_sp-top.scss */
  .btn_outer .leftTop {
    left: -3px;
    top: -3px;
  }
  /* line 32, ../sass/_sp-top.scss */
  .btn_outer .rightTop {
    right: -3px;
    top: -3px;
  }
  /* line 36, ../sass/_sp-top.scss */
  .btn_outer .rightBtm {
    right: -3px;
    bottom: -3px;
  }
  /* line 40, ../sass/_sp-top.scss */
  .btn_outer .leftBtm {
    left: -3px;
    bottom: -3px;
  }

  /* line 45, ../sass/_sp-top.scss */
  .spSlide {
    display: block !important;
  }

  /* line 48, ../sass/_sp-top.scss */
  .pcSlide {
    display: none !important;
  }

  /* line 51, ../sass/_sp-top.scss */
  .plx_outer {
    height: 62.5vw;
  }

  /* line 54, ../sass/_sp-top.scss */
  .sec_bg {
    height: 320px;
  }

  /* line 59, ../sass/_sp-top.scss */
  section .wrapper h2 {
    font-size: 16vw;
    width: 100%;
    margin-bottom: 10.66667vw;
  }
  /* line 64, ../sass/_sp-top.scss */
  section .wrapper .mds {
    font-size: 9.06667vw;
    margin-bottom: 10.66667vw;
  }

  /* line 70, ../sass/_sp-top.scss */
  .main_visual {
    height: 100vh;
    overflow: hidden;
  }
  /* line 73, ../sass/_sp-top.scss */
  .main_visual .main_lead {
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
    top: 65%;
  }

  /* line 81, ../sass/_sp-top.scss */
  #sec01 {
    padding: 10.41667vw 1em;
  }
  /* line 85, ../sass/_sp-top.scss */
  #sec01 .wrapper .flex h2 {
    width: 100%;
  }
  /* line 88, ../sass/_sp-top.scss */
  #sec01 .wrapper .flex .news_list {
    width: 100%;
    padding: 1em;
    margin: 0 auto 30px;
  }
  /* line 94, ../sass/_sp-top.scss */
  #sec01 .wrapper .btn {
    width: 100%;
  }

  /* line 99, ../sass/_sp-top.scss */
  #sec02 {
    padding: 10.41667vw 1em;
  }
  /* line 103, ../sass/_sp-top.scss */
  #sec02 .wrapper .flex .left {
    order: 2;
    width: 100%;
    padding: 0;
  }
  /* line 104, ../sass/_sp-top.scss */
  #sec02 .wrapper .flex .left .mds {
    line-height: 1.6;
  }
  /* line 110, ../sass/_sp-top.scss */
  #sec02 .wrapper .flex .left .btn {
    width: 100%;
    margin: 0 auto;
  }
  /* line 115, ../sass/_sp-top.scss */
  #sec02 .wrapper .flex .right {
    order: 1;
    width: 100%;
  }

  /* line 122, ../sass/_sp-top.scss */
  #sec03 {
    padding: 10.41667vw 1em;
  }
  /* line 125, ../sass/_sp-top.scss */
  #sec03 .wrapper .mds {
    line-height: 1.6;
  }
  /* line 129, ../sass/_sp-top.scss */
  #sec03 .wrapper .flex .l_cont {
    width: 100%;
  }
  /* line 140, ../sass/_sp-top.scss */
  #sec03 .wrapper .flex .r_cont {
    width: 100%;
  }
  /* line 152, ../sass/_sp-top.scss */
  #sec03 .wrapper .brd_box {
    padding: 7.8125vw;
  }
  /* line 154, ../sass/_sp-top.scss */
  #sec03 .wrapper .brd_box .btn {
    width: 100%;
    margin: 0 auto;
  }

  /* line 161, ../sass/_sp-top.scss */
  #sec04 {
    padding: 10.41667vw 1em;
  }
  /* line 164, ../sass/_sp-top.scss */
  #sec04 .wrapper .arc_slider {
    margin: 5px 0 30px;
  }
  /* line 169, ../sass/_sp-top.scss */
  #sec04 .wrapper .arc_slider .slick-arrow {
    display: none !important;
  }
  /* line 177, ../sass/_sp-top.scss */
  #sec04 .wrapper .arc_slider .slick-arrow.slick-next {
    left: unset;
    right: 5%;
  }
  /* line 181, ../sass/_sp-top.scss */
  #sec04 .wrapper .arc_slider .slick-arrow.slick-prev {
    right: unset;
    left: 5%;
  }
  /* line 186, ../sass/_sp-top.scss */
  #sec04 .wrapper .arc_slider .slide_cont {
    margin: 0 0.5%;
  }
  /* line 188, ../sass/_sp-top.scss */
  #sec04 .wrapper .arc_slider .slide_cont .thmb {
    height: 32.55208vw;
  }
  /* line 192, ../sass/_sp-top.scss */
  #sec04 .wrapper .arc_slider .slide_cont .incont h3 {
    font-size: 4.16667vw;
  }
  /* line 198, ../sass/_sp-top.scss */
  #sec04 .wrapper .abs_btn {
    margin-top: 50px;
  }
  /* line 200, ../sass/_sp-top.scss */
  #sec04 .wrapper .abs_btn .btn {
    width: 100%;
    margin: 0 auto;
  }

  /* line 207, ../sass/_sp-top.scss */
  #sec05 {
    padding: 10.41667vw 1em;
  }
  /* line 211, ../sass/_sp-top.scss */
  #sec05 .wrapper .flex .left {
    width: 100%;
  }
  /* line 214, ../sass/_sp-top.scss */
  #sec05 .wrapper .flex .right {
    width: 100%;
    padding: 0;
  }
  /* line 217, ../sass/_sp-top.scss */
  #sec05 .wrapper .flex .right .btn {
    width: 100%;
    margin: 0 auto;
  }
}