@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-in01 {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes slide-in02 {
  from {
    transform: rotate(15deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}
@keyframes title__name {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  45% {
    opacity: 1;
    transform: scale(1.1);
  }
  65% {
    opacity: 1;
    transform: scale(0.9);
  }
  85% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
body {
  overflow-x: hidden;
}

/* 基本情報(SCSS) */
.freeareacontent button {
  border: none;
  background: none;
  cursor: pointer;
}
.freeareacontent .link01 {
  position: fixed;
  right: 30px;
  left: auto;
  top: 30px;
  z-index: 99;
}
.freeareacontent .link02 {
  position: fixed;
  right: 30px;
  left: auto;
  top: 360px;
  z-index: 99;
}
.freeareacontent {
  width: 100%;
  max-width: 1600px;
  margin: auto;
}
.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_01 {
  height: 1855px;
  background: url(../images/bg01.png) no-repeat top center;
}
.freeareacontent .wrap_content#content_02 {
  height: 712px;
  background: url(../images/bg02.png) no-repeat top center;
}
.freeareacontent .wrap_content#content_03 {
  height: 243px;
  background: url(../images/bg03.png) no-repeat top center;
}
.freeareacontent .wrap_content .content {
  width: 1250px;
  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.area01 {
  top: 38px;
  left: 515px;
}
.freeareacontent .wrap_content .content .area.area02 {
  top: 38px;
  left: 579px;
}
.freeareacontent .wrap_content .content .area.area03 {
  top: 38px;
  left: 651px;
}
.freeareacontent .wrap_content .content .area.area04 {
  top: 38px;
  left: 713px;
}
.freeareacontent .wrap_content .content .area.area05 {
  top: 38px;
  left: 773px;
}
.freeareacontent .wrap_content .content .area.area06 {
  top: 38px;
  left: 831px;
}
.freeareacontent .wrap_content .content .area.area07 {
  top: 38px;
  left: 890px;
}
.freeareacontent .wrap_content .content .area.area08 {
  top: 118px;
  left: 601px;
}
.freeareacontent .wrap_content .content .area.area09 {
  top: 118px;
  left: 664px;
}
.freeareacontent .wrap_content .content .area.area10 {
  top: 118px;
  left: 724px;
}
.freeareacontent .wrap_content .content .area.area11 {
  top: 118px;
  left: 791px;
}
.freeareacontent .wrap_content .content .area.area12 {
  top: 118px;
  left: 861px;
}
.freeareacontent .wrap_content .content .area.area13 {
  top: 118px;
  left: 923px;
}
.freeareacontent .wrap_content .content .area.area14 {
  top: 118px;
  left: 983px;
}
.freeareacontent .wrap_content .content .area.area15 {
  top: 118px;
  left: 1053px;
}
.freeareacontent .wrap_content .content .area.area16 {
  top: 118px;
  left: 1116px;
}
.freeareacontent .wrap_content .content .area.area17 {
  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.title01 {
  top: 98px;
  left: 371px;
  opacity: 0;
  transform: rotate(-15deg);
  animation-duration: 1s;
  animation-name: title__name;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
}
.freeareacontent .wrap_content .content .area.title02 {
  top: 161px;
  left: 462px;
  opacity: 0;
  transform: rotate(-15deg);
  animation-duration: 1s;
  animation-name: title__name;
  animation-fill-mode: forwards;
  animation-delay: 2.3s;
}
.freeareacontent .wrap_content .content .area.title03 {
  top: 231px;
  left: 334px;
  opacity: 0;
  transform: rotate(-15deg);
  animation-duration: 1s;
  animation-name: title__name;
  animation-fill-mode: forwards;
  animation-delay: 2.6s;
}
.freeareacontent .wrap_content .content .area.title04 {
  top: 309px;
  left: 459px;
  opacity: 0;
  transform: rotate(-15deg);
  animation-duration: 1s;
  animation-name: title__name;
  animation-fill-mode: forwards;
  animation-delay: 2.9s;
}
.freeareacontent .wrap_content .content .area.item01 {
  top: 249px;
  left: 13px;
  opacity: 0;
  transform: scale(0.9);
  animation-duration: 1s;
  animation-name: slide-in01;
  animation-fill-mode: forwards;
  animation-delay: 0s;
}
.freeareacontent .wrap_content .content .area.item0101 {
  z-index: 4;
  top: 249px;
  left: 13px;
  opacity: 0;
  transform: scale(0.9);
  animation-duration: 1.5s;
  animation-name: slide-in01;
  animation-fill-mode: forwards;
}
.freeareacontent .wrap_content .content .area.item0102 {
  z-index: 5;
  top: 249px;
  left: 13px;
  opacity: 0;
  transform: scale(0.9);
  animation-duration: 1.5s;
  animation-name: slide-in01;
  animation-fill-mode: forwards;
  animation-delay: 0.5s;
}
.freeareacontent .wrap_content .content .area.item0103 {
  z-index: 3;
  top: 531px;
  left: 28px;
  opacity: 0;
  transform: scale(0.9);
  animation-duration: 1.5s;
  animation-name: slide-in01;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}
.freeareacontent .wrap_content .content .area.item0201 {
  z-index: 4;
  top: 260px;
  left: 830px;
  opacity: 0;
  transform: scale(0.9);
  animation-duration: 1.5s;
  animation-name: slide-in01;
  animation-fill-mode: forwards;
  animation-delay: 1.5s;
}
.freeareacontent .wrap_content .content .area.item0202 {
  top: 550px;
  left: 935px;
  opacity: 0;
  transform: scale(0.9);
  animation-duration: 1.5s;
  animation-name: slide-in01;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}
.freeareacontent .wrap_content .content .area.item0203 {
  top: 256px;
  left: 920px;
  opacity: 0;
  transform: scale(0.9);
  animation-duration: 1.5s;
  animation-name: slide-in01;
  animation-fill-mode: forwards;
  animation-delay: 2.5s;
}
.freeareacontent .wrap_content .content .area.item03 {
  top: 790px;
  left: 106px;
}
.freeareacontent .wrap_content .content .area.item04 {
  top: 790px;
  left: 706px;
}
.freeareacontent .wrap_content .content .area.item05 {
  top: 1324px;
  left: 98px;
}
.freeareacontent .wrap_content .content .area.item06 {
  top: 1309px;
  left: 707px;
}
.freeareacontent .wrap_content .content .area.area01 {
  top: 107px;
  left: 378px;
}
.freeareacontent .wrap_content .content .area.area02 {
  top: 107px;
  left: 624px;
}
.freeareacontent .wrap_content .content .area.area03 {
  top: 107px;
  left: 873px;
}
.freeareacontent .wrap_content .content .area.area0401 {
  top: 208px;
  left: 130px;
}
.freeareacontent .wrap_content .content .area.area04 {
  top: 208px;
  left: 379px;
}
.freeareacontent .wrap_content .content .area.area05 {
  top: 208px;
  left: 627px;
}
.freeareacontent .wrap_content .content .area.area06 {
  top: 208px;
  left: 875px;
}
.freeareacontent .wrap_content .content .area.area07 {
  top: 343px;
  left: 379px;
}
.freeareacontent .wrap_content .content .area.area08 {
  top: 343px;
  left: 626px;
}
.freeareacontent .wrap_content .content .area.area09 {
  top: 343px;
  left: 876px;
}
.freeareacontent .wrap_content .content .area.area10 {
  top: 444px;
  left: 133px;
}
.freeareacontent .wrap_content .content .area.area11 {
  top: 444px;
  left: 381px;
}
.freeareacontent .wrap_content .content .area.area12 {
  top: 444px;
  left: 628px;
}
.freeareacontent .wrap_content .content .area.area14 {
  top: 444px;
  left: 877px;
}
.freeareacontent .wrap_content .content .area.area15 {
  top: 579px;
  left: 380px;
}
.freeareacontent .wrap_content .content .area.area16 {
  top: 579px;
  left: 627px;
}
.freeareacontent .wrap_content .content .area.area17 {
  top: 579px;
  left: 875px;
}
.freeareacontent .wrap_content .content .area.area18 {
  top: 72px;
  left: 157px;
}
.freeareacontent .wrap_content .content .area.area19 {
  top: 72px;
  left: 641px;
}
.freeareacontent .wrap_content .content .area.area20 {
  top: 174px;
  left: 304px;
}
.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: 750px) {
  .sp-zone {
    overflow-x: hidden;
  }
  .sp-zone .wrap_content#bg01 {
    position: relative;
  }
  .sp-zone .wrap_content#bg01 .content {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    transform: translate(0%, 0%);
    height: 100%;
  }
  .sp-zone .wrap_content#bg01 .content .title01 {
    top: 2%;
    left: 9%;
    width: 81.7%;
    opacity: 0;
    transform: rotate(-15deg);
    animation-duration: 1s;
    animation-name: title__name;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
  }
  .sp-zone .wrap_content#bg01 .content .title02 {
    top: 4.4%;
    left: 10%;
    width: 80.2%;
    opacity: 0;
    transform: rotate(-15deg);
    animation-duration: 1s;
    animation-name: title__name;
    animation-fill-mode: forwards;
    animation-delay: 2.3s;
  }
  .sp-zone .wrap_content#bg01 .content .title03 {
    top: 8%;
    left: 10%;
    width: 80.2%;
    opacity: 0;
    transform: rotate(-15deg);
    animation-duration: 1s;
    animation-name: title__name;
    animation-fill-mode: forwards;
    animation-delay: 2.3s;
  }
  .sp-zone .wrap_content#bg01 .content .title04 {
    top: 11.4%;
    left: 10%;
    width: 80.2%;
    opacity: 0;
    transform: rotate(-15deg);
    animation-duration: 1s;
    animation-name: title__name;
    animation-fill-mode: forwards;
    animation-delay: 2.3s;
  }
  .sp-zone .wrap_content#bg01 .content .spitem0101 {
    top: 16.8%;
    left: 3%;
    width: 52.5%;
    z-index: 9;
    opacity: 0;
    transform: scale(0.9);
    animation-duration: 1.5s;
    animation-name: slide-in01;
    animation-fill-mode: forwards;
    animation-delay: 0s;
  }
  .sp-zone .wrap_content#bg01 .content .spitem0102 {
    top: 16.7%;
    left: -21.2%;
    width: 52.3%;
    z-index: 6;
    opacity: 0;
    transform: scale(0.9);
    animation-duration: 1.5s;
    animation-name: slide-in01;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
  }
  .sp-zone .wrap_content#bg01 .content .spitem0103 {
    top: 28.9%;
    left: 15.8%;
    width: 43.7%;
    transform: rotate(-4deg);
    z-index: 3;
    opacity: 0;
    transform: scale(0.9);
    animation-duration: 1.5s;
    animation-name: slide-in01;
    animation-fill-mode: forwards;
    animation-delay: 1s;
  }
  .sp-zone .wrap_content#bg01 .content .spitem0201 {
    top: 21.7%;
    left: 42.3%;
    width: 54%;
    z-index: 2;
    opacity: 0;
    transform: scale(0.9);
    animation-duration: 1.5s;
    animation-name: slide-in01;
    animation-fill-mode: forwards;
    animation-delay: 1.5s;
  }
  .sp-zone .wrap_content#bg01 .content .spitem0202 {
    top: 31.3%;
    left: 61.3%;
    width: 35%;
    z-index: 6;
    opacity: 0;
    transform: scale(0.9);
    animation-duration: 1.5s;
    animation-name: slide-in01;
    animation-fill-mode: forwards;
    animation-delay: 2s;
  }
  .sp-zone .wrap_content#bg01 .content .spitem0203 {
    top: 18.2%;
    left: 56.1%;
    width: 32.8%;
    z-index: 9;
    opacity: 0;
    transform: scale(0.9);
    animation-duration: 1.5s;
    animation-name: slide-in01;
    animation-fill-mode: forwards;
    animation-delay: 2.5s;
  }
  .sp-zone .wrap_content#bg02 {
    position: relative;
  }
  .sp-zone .wrap_content#bg02 .content {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    transform: translate(0%, 0%);
    height: 100%;
  }
  .sp-zone .wrap_content#bg02 .content .item04 {
    top: 25.2%;
    left: 5%;
    width: 90%;
  }
  .sp-zone .wrap_content#bg02 .content .item05 {
    top: 48.5%;
    left: 5.3%;
    width: 89%;
  }
  .sp-zone .wrap_content#bg02 .content .item03 {
    top: -0.2%;
    left: 13%;
    width: 74%;
  }
  .sp-zone .wrap_content#bg02 .content .item06 {
    top: 73.6%;
    left: 6%;
    width: 88%;
  }
  .sp-zone .wrap_content#bg03 {
    width: 100%;
  }
  .sp-zone .wrap_content#bg03 .content {
    width: 100%;
  }
  .sp-zone .wrap_content#bg03 ul {
    width: 73%;
    padding: 0 13.7% 5% 13.7%;
    background: #eee7d8;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .sp-zone .wrap_content#bg03 ul li {
    width: 50%;
  }
  .sp-zone .wrap_content#bg04 {
    width: 100%;
  }
  .sp-zone .wrap_content#bg04 .content {
    width: 100%;
    background: #fff;
    display: block;
    padding: 0;
  }
  .sp-zone .wrap_content#bg04 ul {
    width: 60%;
    padding: 0 20%;
    padding-bottom: 3%;
    background: #fff;
    display: block;
  }
  .sp-zone .wrap_content#bg04 ul li {
    width: 100%;
    margin-bottom: 3%;
  }
  .sp-zone .wrap_content#bg05 {
    width: 100%;
  }
  .sp-zone .wrap_content#bg05 .content {
    width: 85%;
    padding: 3% 7.5%;
    background: #a9d05f;
  }
  .sp-zone .wrap_content#bg05 ul {
    width: 100%;
    background: #fdf9dc;
  }
  .sp-zone .wrap_content#bg05 ul li {
    margin-bottom: 3%;
  }
}
@media only screen and (max-width: 640px) {
  #wraper {
    margin-bottom: 0;
  }
}/*# sourceMappingURL=basic.css.map */