@charset "UTF-8";
/* shift jis
/
/ ‘Ž®Ý’è
----------------------------------*/
body {
  margin: 0;
  padding: 0;
  border: 0 none;
  font-size: 14px;
  font-family: "ƒqƒ‰ƒMƒmŠpƒS Pro W3", "Hiragino Kaku Gothic Pro", "ƒƒCƒŠƒI", Meiryo, Osaka, "‚l‚r ‚oƒSƒVƒbƒN", "MS PGothic", sans-serif;
  line-height: 1.5em;
  position: relative;
  background-position: top center;
}

/*float‚̉ðœ*/
.clearfix:after {
  display: block;
  clear: both;
  height: 0px;
  visibility: hidden;
  content: ".";
}

.clearfix {
  min-height: 1px; /*IE6A7‘΍ô*/
}

* html .clearfix {
  height: 1px;
  /*\*/ /*/ /*MAC IE5.x‘΍ô*/
  height: auto;
  overflow: hidden;
  /**/
}

img {
  vertical-align: bottom;
}

a img {
  transition: 0.3s ease-in-out;
}

a:hover img {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

.sample {
  display: block;
}
.sample_title {
  display: block;
}
.sample_list {
  display: block;
}
.sample_list_item {
  display: block;
}

@keyframes fadeanimation00 {
  0% {
    transform: perspective(360px) rotateY(130deg);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
    transform: perspective(360px) rotateY(0deg);
  }
}
@keyframes fadeanimation01 {
  0% {
    transform: translate(0, 40px);
    opacity: 0;
  }
  25% {
    transform: translate(0, -40px);
    opacity: 1;
  }
  45% {
    transform: translate(0, 20px);
    opacity: 1;
  }
  65% {
    transform: translate(0, -10px);
    opacity: 1;
  }
  85% {
    transform: translate(0, 5px);
    opacity: 1;
  }
  100% {
    transform: translate(0, 0px);
    opacity: 1;
  }
}
@keyframes fadeanimation02 {
  0% {
    filter: blur(30px);
    opacity: 0;
  }
  30% {
    filter: blur(0px);
    opacity: 1;
  }
  70% {
    filter: blur(0px);
    opacity: 1;
  }
  100% {
    filter: blur(30px);
    opacity: 0;
  }
}
@keyframes fadeanimation03 {
  0% {
    filter: blur(30px);
    transform: scale(0.75);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
    transform: scale(1);
  }
}
.fadeanimation03 {
  filter: blur(30px);
  transform: scale(0.75);
  opacity: 0;
  animation-duration: 1.5s;
  animation-name: fadeanimation03;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

@keyframes fadeanimation04 {
  0% {
    filter: blur(30px);
    transform: scale(1.15);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
    transform: scale(1);
  }
}
.fadeanimation04 {
  filter: blur(30px);
  transform: scale(1.15);
  opacity: 0;
  animation-duration: 1.5s;
  animation-name: fadeanimation04;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}

@keyframes fadeanimation05 {
  0% {
    filter: blur(30px);
    transform: translate(-300px, 0);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
    transform: scale(1);
  }
}
.fadeanimation05 {
  filter: blur(30px);
  transform: translate(-300px, 0);
  opacity: 0;
  animation-duration: 1.5s;
  animation-name: fadeanimation05;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

@keyframes fadeanimation06 {
  0% {
    filter: blur(30px);
    transform: translate(300px, 0);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
    transform: scale(1);
  }
}
.fadeanimation06 {
  filter: blur(30px);
  transform: translate(300px, 0);
  opacity: 0;
  animation-duration: 1.5s;
  animation-name: fadeanimation06;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

.fadeanimation00 {
  transform: perspective(360px) rotateY(130deg);
  opacity: 0;
  animation-duration: 1s;
  animation-name: fadeanimation00;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
}

.fadeanimation01 {
  transform: translate(0, 130px);
  opacity: 0;
  animation-duration: 1s;
  animation-name: fadeanimation01;
  animation-fill-mode: forwards;
  animation-delay: 0.2s;
}

.fadeanimation02 {
  filter: blur(30px);
  opacity: 0;
  animation-duration: 5s;
  animation-name: fadeanimation02;
  animation-iteration-count: infinite;
  animation-delay: 0.2s;
}

.btn00 {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: auto;
  right: 5%;
  transform: translate(0%, -50%);
}

/* 基本情報(SCSS) */
.freeareacontent {
  width: 100%;
  max-width: 1600px;
  margin: auto;
  overflow: hidden;
}
.freeareacontent h1 {
  position: absolute;
  top: -2000px;
}
.freeareacontent a {
  display: block;
  transition: 0.3s ease-in-out;
  transition: 0.3s;
}
.freeareacontent a:hover {
  opacity: 0.7;
  transition: 0.3s;
}
.freeareacontent .wrap_content {
  width: 100%;
  margin: auto;
  position: relative;
  height: 3782px;
  background: url(../images/allbg.png) no-repeat top center;
}
.freeareacontent .wrap_content .content {
  width: 990px;
  margin: auto;
  height: 100%;
  position: relative;
}
.freeareacontent .wrap_content .content .area {
  position: absolute;
  top: 0;
}
.freeareacontent .wrap_content .content .area.btn {
  transition: 0.3s;
}
.freeareacontent .wrap_content .content .area.btn img {
  opacity: 1;
  transition: 0.3s;
}
.freeareacontent .wrap_content .content .area.btn .on {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.3s;
}
.freeareacontent .wrap_content .content .area.btn .on img {
  opacity: 0;
}
.freeareacontent .wrap_content .content .area.btn:hover {
  opacity: 1;
}
.freeareacontent .wrap_content .content .area.btn:hover a {
  opacity: 1;
}
.freeareacontent .wrap_content .content .area.btn:hover img {
  opacity: 0;
}
.freeareacontent .wrap_content .content .area.btn:hover .on {
  opacity: 1;
}
.freeareacontent .wrap_content .content .area.btn:hover .on img {
  opacity: 1;
}
.freeareacontent .wrap_content .content .area.text01 {
  top: 133px;
  left: 500px;
  animation-delay: 1.4s;
}
.freeareacontent .wrap_content .content .area.text02 {
  top: 189px;
  left: 500px;
  animation-delay: 1.7s;
}
.freeareacontent .wrap_content .content .area.btn01 {
  top: 3491px;
}
.freeareacontent .wrap_content .content .area.btn02 {
  top: 3491px;
  left: auto;
  right: 0;
}
.freeareacontent .wrap_content .content .area.btn03 {
  top: 3582px;
}
.freeareacontent .wrap_content .content .area.btn04 {
  top: 3582px;
  left: auto;
  right: 0;
}
.freeareacontent .wrap_content .content .area.btn05 {
  pointer-events: none;
  top: 3673px;
}
.freeareacontent .wrap_content .content .area.btn06 {
  pointer-events: none;
  top: 3673px;
  left: auto;
  right: 0;
}
.freeareacontent .wrap_content .content .flex_area {
  display: flex;
  justify-content: center;
}

.contentitem {
  opacity: 0;
  transform: scale(0.9);
  transition: 1s;
}
@media (max-width: 768px) {
  .contentitem {
    opacity: 1;
    transform: scale(1);
  }
}
.contentitem.fade__in {
  opacity: 1;
  transform: scale(1);
}

.slidearea02 {
  position: absolute;
  width: 933px;
  top: 99px;
  left: -305px;
  animation-delay: 0.7s;
}
.slidearea02 .slick-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 340px;
  bottom: -30px;
  z-index: 999;
}
.slidearea02 .slick-dots li {
  width: 8px;
  height: 8px;
  overflow: hidden;
}
.slidearea02 .slick-dots li button {
  background: #bcbcbc;
  text-indent: 9999px;
  overflow: hidden;
  display: block;
  border: none;
}
.slidearea02 .slick-dots li.slick-active button {
  background: #679bbd;
}
.slidearea02 .slick-arrow {
  display: none !important;
}

@media only screen and (max-width: 750px) {
  .area.btn00 {
    display: none;
  }
}
@media only screen and (max-width: 750px) {
  .freeareacontent {
    height: auto;
  }
  .freeareacontent .area .btn00 {
    display: none;
  }
}
.freeareacontent .sp-zone {
  display: none;
}
@media only screen and (max-width: 750px) {
  .freeareacontent .sp-zone {
    display: block;
    background: none !important;
    height: auto;
  }
  .freeareacontent .sp-zone .slidearea02 {
    width: 88%;
    left: 0;
    top: 7.4%;
  }
  .freeareacontent .sp-zone .slidearea02 .slick-dots {
    left: 90%;
  }
  .freeareacontent .sp-zone .slidearea02 .slick-dots li {
    width: 1vw;
    height: 1vw;
    overflow: hidden;
  }
  .freeareacontent .sp-zone img {
    vertical-align: bottom;
    max-width: 100%;
  }
  .freeareacontent .sp-zone .area {
    position: absolute;
  }
  .freeareacontent .sp-zone .area.text01 {
    top: 40%;
    left: 24.9%;
    width: 6.5%;
    animation-delay: 0.7s;
  }
  .freeareacontent .sp-zone .area.text02 {
    top: 40%;
    left: 17.5%;
    width: 6.5%;
  }
  .freeareacontent .sp-zone .spbg {
    position: relative;
    width: 100%;
  }
  .freeareacontent .sp-zone .spbg .list {
    position: absolute;
    width: 100%;
    margin: auto;
    top: 28%;
  }
  .freeareacontent .sp-zone .spbg .list li {
    width: 65%;
    margin: auto;
  }
}
.freeareacontent .pc-zone {
  display: block;
  min-width: 1100px;
}
@media only screen and (max-width: 750px) {
  .freeareacontent .pc-zone {
    display: none;
  }
}

@media only screen and (max-width: 640px) {
  #wraper {
    margin-bottom: 0;
  }
}/*# sourceMappingURL=basic.css.map */