@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 slide-in {
  from {
    opacity: 0;
    translate: 40px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes slide-in-sp {
  from {
    opacity: 0;
    translate: 0px -50%;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
/* 基本情報(SCSS) */
.freeareacontent {
  width: 100%;
  max-width: 1600px;
  margin: auto;
  height: 2400px;
  background: url(../images/bgall.jpg) no-repeat top center;
}
.freeareacontent button {
  border: none;
  background: none;
  cursor: pointer;
}
.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;
  height: 100%;
}
.freeareacontent .wrap_content .content {
  width: 1300px;
  margin: auto;
  height: 100%;
  position: relative;
}
.freeareacontent .wrap_content .content .area {
  position: absolute;
  top: 0;
}
.freeareacontent .wrap_content .content .area.bg {
  top: 208px;
  left: 155px;
  pointer-events: none;
  z-index: 99;
}
.freeareacontent .wrap_content .content .area.bg.is-active {
  opacity: 0;
  transition: 1.3s;
}
.freeareacontent .wrap_content .content .area.btn01 {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: auto;
  right: 5%;
  transform: translate(0%, -50%);
}
.freeareacontent .wrap_content .content .area.txt {
  opacity: 0;
  animation-duration: 1.3s;
  animation-name: slide-in;
  animation-fill-mode: forwards;
}
.freeareacontent .wrap_content .content .area.txt01 {
  top: 38px;
  left: 515px;
  animation-delay: 0.1s;
}
.freeareacontent .wrap_content .content .area.txt02 {
  top: 38px;
  left: 579px;
  animation-delay: 0.2s;
}
.freeareacontent .wrap_content .content .area.txt03 {
  top: 38px;
  left: 651px;
  animation-delay: 0.3s;
}
.freeareacontent .wrap_content .content .area.txt04 {
  top: 38px;
  left: 713px;
  animation-delay: 0.4s;
}
.freeareacontent .wrap_content .content .area.txt05 {
  top: 38px;
  left: 773px;
  animation-delay: 0.5s;
}
.freeareacontent .wrap_content .content .area.txt06 {
  top: 38px;
  left: 831px;
  animation-delay: 0.6s;
}
.freeareacontent .wrap_content .content .area.txt07 {
  top: 38px;
  left: 890px;
  animation-delay: 0.7s;
}
.freeareacontent .wrap_content .content .area.txt08 {
  top: 118px;
  left: 601px;
  animation-delay: 1.3s;
}
.freeareacontent .wrap_content .content .area.txt09 {
  top: 118px;
  left: 664px;
  animation-delay: 1.4s;
}
.freeareacontent .wrap_content .content .area.txt10 {
  top: 118px;
  left: 724px;
  animation-delay: 1.5s;
}
.freeareacontent .wrap_content .content .area.txt11 {
  top: 118px;
  left: 791px;
  animation-delay: 1.6s;
}
.freeareacontent .wrap_content .content .area.txt12 {
  top: 118px;
  left: 861px;
  animation-delay: 1.7s;
}
.freeareacontent .wrap_content .content .area.txt13 {
  top: 118px;
  left: 923px;
  animation-delay: 1.8s;
}
.freeareacontent .wrap_content .content .area.txt14 {
  top: 118px;
  left: 983px;
  animation-delay: 1.9s;
}
.freeareacontent .wrap_content .content .area.txt15 {
  top: 118px;
  left: 1053px;
  animation-delay: 2s;
}
.freeareacontent .wrap_content .content .area.txt16 {
  top: 118px;
  left: 1116px;
  animation-delay: 2.1s;
}
.freeareacontent .wrap_content .content .area.txt17 {
  top: 118px;
  left: 1116px;
}
.freeareacontent .wrap_content .content .area.item {
  opacity: 0;
}
.freeareacontent .wrap_content .content .area.item.is-active {
  animation-duration: 2s;
  animation-name: slide-in;
  animation-fill-mode: forwards;
}
.freeareacontent .wrap_content .content .area.item01 {
  top: 299px;
  left: 207px;
}
.freeareacontent .wrap_content .content .area.item02 {
  top: 295px;
  left: 514px;
}
.freeareacontent .wrap_content .content .area.item03 {
  top: 242px;
  left: 807px;
}
.freeareacontent .wrap_content .content .area.item04 {
  top: 960px;
  left: 190px;
}
.freeareacontent .wrap_content .content .area.item05 {
  top: 1164px;
  left: 220px;
}
.freeareacontent .wrap_content .content .area.item06 {
  top: 1164px;
  left: 370px;
}
.freeareacontent .wrap_content .content .area.item07 {
  top: 1164px;
  left: 522px;
}
.freeareacontent .wrap_content .content .area.item08 {
  top: 1164px;
  left: 674px;
}
.freeareacontent .wrap_content .content .area.item09 {
  top: 994px;
  left: 840px;
}
.freeareacontent .wrap_content .content .area.area01 {
  top: 1595px;
  left: 152px;
}
.freeareacontent .wrap_content .content .area.area02 {
  top: 1595px;
  left: 654px;
}
.freeareacontent .wrap_content .content .area.area03 {
  top: 1957px;
  left: 185px;
}
.freeareacontent .wrap_content .content .area.area04 {
  top: 2060px;
  left: 185px;
}
.freeareacontent .wrap_content .content .area.area05 {
  top: 1935px;
  left: 651px;
}
.freeareacontent .wrap_content .content .area.area06 {
  top: 2237px;
  left: 184px;
}
.freeareacontent .wrap_content .content .area.area07 {
  top: 2237px;
  left: 667px;
}
.freeareacontent .wrap_content .content .area.area08 {
  top: 2330px;
  left: 328px;
}
.freeareacontent .wrap_content .content .flex_area {
  display: flex;
  justify-content: center;
}

.pc-zone {
  display: block;
}
.pc-zone.freeareacontent {
  min-width: 1300px;
}
@media only screen and (max-width: 750px) {
  .pc-zone {
    display: none;
  }
}

.sp-zone {
  display: none;
}
@media only screen and (max-width: 750px) {
  .sp-zone {
    display: block;
  }
  .sp-zone.freeareacontent {
    width: 100%;
    background: none;
  }
  .sp-zone.freeareacontent img {
    width: 100%;
    height: auto;
    vertical-align: middle;
  }
  .sp-zone.freeareacontent .sp-main {
    position: relative;
    background: url(../images/sp/block01.png) no-repeat top center;
    background-size: 100%;
    padding-top: 17%;
  }
  .sp-zone.freeareacontent .sp-main .mainimg {
    width: 80%;
    margin: auto;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 9.5%;
    opacity: 0;
    animation-duration: 1.3s;
    animation-name: slide-in-sp;
    animation-fill-mode: forwards;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt01 {
    left: 78%;
    top: 25%;
    animation-delay: 0.1s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt02 {
    left: 78%;
    top: 31%;
    animation-delay: 0.2s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt03 {
    left: 78%;
    top: 37%;
    animation-delay: 0.3s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt04 {
    left: 78%;
    top: 44%;
    animation-delay: 0.4s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt05 {
    left: 78%;
    top: 50%;
    animation-delay: 0.5s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt06 {
    left: 78%;
    top: 56%;
    animation-delay: 0.6s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt07 {
    left: 78%;
    top: 62%;
    animation-delay: 0.7s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt08 {
    left: 69%;
    top: 32%;
    animation-delay: 1.5s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt09 {
    left: 69%;
    top: 39%;
    animation-delay: 1.6s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt10 {
    left: 69%;
    top: 45%;
    animation-delay: 1.7s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt11 {
    left: 69%;
    top: 51%;
    animation-delay: 1.8s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt12 {
    left: 69%;
    top: 57%;
    animation-delay: 1.9s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt13 {
    left: 69%;
    top: 63%;
    animation-delay: 2s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt14 {
    left: 69%;
    top: 69%;
    animation-delay: 2.1s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt15 {
    left: 69%;
    top: 75%;
    animation-delay: 2.2s;
  }
  .sp-zone.freeareacontent .sp-main .mainimg .maintxt.txt16 {
    left: 69%;
    top: 81%;
    animation-delay: 2.3s;
  }
  .sp-zone.freeareacontent .area02 {
    background: #f3f8e1;
    padding-bottom: 10%;
  }
  .sp-zone.freeareacontent .area02 ul {
    margin: auto;
    flex-wrap: wrap;
    width: 60%;
    justify-content: center;
    gap: 10%;
    max-width: 437px;
    display: flex;
    justify-content: center;
  }
  .sp-zone.freeareacontent .area02 ul li {
    width: 45%;
  }
  .sp-zone.freeareacontent .area02 ul li:last-child {
    width: 55%;
  }
  .sp-zone.freeareacontent .area04 {
    margin: auto auto 10% auto;
    width: 58%;
    max-width: 410px;
  }
  .sp-zone.freeareacontent .area05 {
    margin: auto auto 10% auto;
    width: 70%;
    max-width: 492px;
  }
  .sp-zone.freeareacontent .area06 {
    background: #f8f5ef;
    width: 100%;
    padding-bottom: 1%;
  }
  .sp-zone.freeareacontent .area06 ul {
    margin: auto auto 0% auto;
    width: 60%;
    max-width: 450px;
  }
  .sp-zone.freeareacontent .area06 ul li {
    display: block;
    width: 100%;
    margin-bottom: 5%;
  }
  .sp-zone.freeareacontent .area07 {
    padding: 2.5% 0;
    background: #a9d05f;
  }
  .sp-zone.freeareacontent .area07 .link06 {
    margin: auto;
    width: 77%;
    max-width: 570px;
  }
}

/* 縦動画のときは横幅を抑える */
.modal-video.is-shorts .modal-video-body {
  width: min(92vw, 420px);
  max-width: 420px;
}

/* 比率を 9:16 に変更（padding-bottom が肝） */
.modal-video.is-shorts .modal-video-movie-wrap {
  padding-bottom: 177.7778%; /* 16/9*100 */
}

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