@charset "UTF-8";
/* ================================================================

制作コンテンツ

info:
- レスポンシブの場合は、ブレイクポイント 768px で記述してください。
- SP用CSSを先に記述する方法を推奨します。下記の記述は例です。
- PCのみの場合は、記述を削除してください。

================================================================ */
/* SP用CSSの記述 */
@keyframes fadeanimation03 {
  0% {
    filter: blur(30px);
    transform: scale(1.25);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
    transform: scale(1);
  }
}
.fadeanimation03 {
  filter: blur(30px);
  transform: scale(1.25);
  opacity: 0;
  animation-duration: 1.5s;
  animation-name: fadeanimation03;
  animation-fill-mode: forwards;
  animation-delay: 0.1s;
}

/* 基本情報(SCSS) */
.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;
}
.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.btnarea:hover {
  opacity: 1;
}
.freeareacontent .wrap_content .content .area.btnarea:hover a {
  opacity: 1;
}
.freeareacontent .wrap_content .content .area.btnarea:hover img {
  transition: 0.5s;
  transform: scale(1.05) !important;
}
.freeareacontent .wrap_content .content .area.btnarea01 {
  top: 146px;
  left: 43px;
}
.freeareacontent .wrap_content .content .area.btnarea02 {
  top: 310px;
  left: 43px;
}
.freeareacontent .wrap_content .content .area.btnarea03 {
  top: 237px;
  left: 809px;
}
.freeareacontent .wrap_content .content .area.btnarea04 {
  top: 290px;
  left: 820px;
}
.freeareacontent .wrap_content .content .area.btnarea05 {
  top: 27px;
  left: 28px;
}
.freeareacontent .wrap_content .content .area.btnarea06 {
  top: 27px;
  left: 271px;
}
.freeareacontent .wrap_content .content .area.btnarea07 {
  top: 48px;
  left: 526px;
}
.freeareacontent .wrap_content .content .area.btnarea08 {
  top: 168px;
  left: 526px;
}
.freeareacontent .wrap_content .content .area.area01 {
  top: 1151px;
  left: 31px;
}
.freeareacontent .wrap_content .content .area.area02 {
  top: 1151px;
  left: 367px;
}
.freeareacontent .wrap_content .content .area.area03 {
  top: 1151px;
  left: 706px;
}
.freeareacontent .wrap_content .content .area.area0101 {
  top: 1506px;
  left: 31px;
}
.freeareacontent .wrap_content .content .area.area0201 {
  top: 1506px;
  left: 367px;
}
.freeareacontent .wrap_content .content .area.area0301 {
  top: 1506px;
  left: 706px;
}
.freeareacontent .wrap_content .content .area.area04 {
  top: 2009px;
  left: 30px;
}
.freeareacontent .wrap_content .content .area.area05 {
  top: 2009px;
  left: 274px;
}
.freeareacontent .wrap_content .content .area.area07 {
  top: 2009px;
  left: 521px;
}
.freeareacontent .wrap_content .content .area.area06 {
  top: 2009px;
  left: 766px;
}
.freeareacontent .wrap_content .content .area.area08 {
  top: 2364px;
  left: 30px;
}
.freeareacontent .wrap_content .content .area.area09 {
  top: 2364px;
  left: 274px;
}
.freeareacontent .wrap_content .content .area.area10 {
  top: 2364px;
  left: 521px;
}
.freeareacontent .wrap_content .content .area.area11 {
  top: 2364px;
  left: 766px;
}
.freeareacontent .wrap_content .content .area.area12 {
  top: 401px;
  left: 23px;
}
.freeareacontent .wrap_content .content .area.area13 {
  top: 418px;
  right: -18px;
}
.freeareacontent .wrap_content .content .area.area14 {
  top: 1080px;
  left: 44px;
}
.freeareacontent .wrap_content .content .area.area15 {
  top: 1502px;
  left: -19px;
}
.freeareacontent .wrap_content .content .area.area16 {
  top: 1462px;
  left: auto;
  right: -32px;
}
.freeareacontent .wrap_content .content .area.area17 {
  top: 2150px;
  left: 92px;
}
.freeareacontent .wrap_content .content .flex_area {
  display: flex;
  justify-content: center;
}
.freeareacontent .wrap_content#titlebg {
  height: 530px;
  background: url(../images/titlebg.png) no-repeat top center;
}
.freeareacontent .wrap_content#content_01 {
  height: 2720px;
  background: url(../images/bg01.png) no-repeat top center;
}
.freeareacontent .wrap_content#content_02 {
  height: 2605px;
  background: url(../images/bg02.png) no-repeat top center;
}
.freeareacontent .wrap_content#content_03 {
  height: 304px;
  background: url(../images/bg03.png) no-repeat top center;
}

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

/* PC、Tablet用CSSの記述 *//*# sourceMappingURL=style.css.map */