@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;
}

html {
  font-size: 62.5%;
}
@media only screen and (max-width: 750px) {
  html {
    font-size: 100%;
  }
}

body {
  font-size: 1.6rem;
}

@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;
}

/* 基本情報(SCSS) */
.freeareacontent {
  font-family: "Zen Kaku Gothic New", sans-serif;
  color: #333333;
  font-optical-sizing: auto;
  width: 100%;
  max-width: 1600px;
  margin: auto;
  font-size: 1.6rem;
  min-width: 1100px;
  overflow-x: hidden;
}
.freeareacontent h1 {
  position: absolute;
  top: -2000px;
}
.freeareacontent img {
  max-width: 100%;
  height: auto;
}
.freeareacontent .btn00 {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: auto;
  right: 5%;
  transform: translate(0%, -50%);
}
.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: 1100px;
  margin: auto;
  height: 100%;
  position: relative;
}
.freeareacontent .wrap_content .content .area {
  position: absolute;
  top: 0;
}
.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.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 .flex_area {
  display: flex;
  justify-content: center;
}
.freeareacontent .wrap_content .content .illust01 {
  position: absolute;
  top: -6.4rem;
  left: 30.7rem;
  width: 100px;
}
.freeareacontent .wrap_content .content .illust02 {
  position: absolute;
  width: 432px;
  bottom: 1rem;
  left: 8rem;
}
.freeareacontent .title_area {
  height: 795px;
  background: url(../images/titlebg.png) no-repeat top center;
}
.freeareacontent .title_area .textarea {
  position: absolute;
  writing-mode: vertical-rl;
  top: 495px;
  right: 80px;
  letter-spacing: 1.7px;
  line-height: 1.7em;
}
.freeareacontent .title_area .textarea p {
  margin-left: 15px;
}
.freeareacontent .content .flexarea {
  display: flex;
  justify-content: space-between;
  padding-top: 6.8rem;
  padding-bottom: 6.5rem;
  position: relative;
}
.freeareacontent .content .flexarea .bgbg01 {
  position: absolute;
  z-index: -1;
  right: -17rem;
  top: 23.3rem;
}
.freeareacontent .content .flexarea .textarea {
  width: 35%;
  text-align: justify;
  text-justify: inter-ideograph; /* IE向け */
  margin-left: 10.1rem;
  margin-top: 6rem;
}
.freeareacontent .content .flexarea .textarea h2 {
  position: relative;
  font-size: 2.9rem;
  margin-bottom: 3.4rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
}
.freeareacontent .content .flexarea .textarea h2 p {
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  border-bottom: 4px solid #4f75b1;
  display: inline-block;
}
.freeareacontent .content .flexarea .textarea h2 span {
  color: #4f75b1;
}
.freeareacontent .content .flexarea .textarea .txt {
  line-height: 1.75em;
}
.freeareacontent .content .flexarea .textarea .txt span {
  font-size: 1.3rem;
  display: block;
}
.freeareacontent .content .flexarea .photoarea {
  width: 48.6%;
  position: relative;
}
.freeareacontent .content .flexarea .photoarea .photo01 {
  margin-left: 2.6rem;
  margin-bottom: 6.2rem;
}
.freeareacontent .content .flexarea .photoarea .photo01.flex {
  display: flex;
  align-items: end;
  text-align: justify;
  text-justify: inter-ideograph; /* IE向け */
}
.freeareacontent .content .flexarea .photoarea .photo01.flex .p01 {
  width: 54.6%;
}
.freeareacontent .content .flexarea .photoarea .photo01.flex .p01 p {
  margin-top: 1.6rem;
  width: 95%;
  letter-spacing: -0.1rem;
  font-size: 1.2rem;
  line-height: 1.4em;
}
.freeareacontent .content .flexarea .photoarea .photo01.flex .p01 p span {
  background: #4f75b1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.4rem;
  color: #fff;
  font-weight: bold;
  margin-right: 0.3rem;
  padding-bottom: 0.1rem;
}
.freeareacontent .content .flexarea .photoarea .photo01.flex .p02 {
  width: 36.7%;
  margin-left: 1rem;
  margin-bottom: 2.8rem;
}
.freeareacontent .content .flexarea .photoarea .photo02 {
  width: 76.6%;
  margin-bottom: 4.1rem;
}
.freeareacontent .content .flexarea .photoarea .photo03 .flexphoto {
  display: flex;
  align-items: start;
  text-align: justify;
  text-justify: inter-ideograph; /* IE向け */
}
.freeareacontent .content .flexarea .photoarea .photo03 .flexphoto .p01 {
  width: 43.1%;
  margin-left: 7rem;
}
.freeareacontent .content .flexarea .photoarea .photo03 .flexphoto .p02 {
  width: 34.9%;
  margin-left: 1rem;
  margin-top: 6.3rem;
}
.freeareacontent .content .flexarea .photoarea .photo03 .txt {
  margin-top: 1.6rem;
  width: 83%;
  letter-spacing: -0.1rem;
  font-size: 1.2rem;
  line-height: 1.4em;
  margin-left: 4.5rem;
  text-align: justify;
  text-justify: inter-ideograph; /* IE向け */
}
.freeareacontent .content .flexarea .photoarea .photo03 .txt span {
  background: #4f75b1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.4rem;
  color: #fff;
  font-weight: bold;
  margin-right: 0.3rem;
  line-height: 1.4rem;
  padding-bottom: 0.1rem;
}
.freeareacontent #content_02 .content .flexarea {
  padding-bottom: 12.5rem;
}
.freeareacontent #content_02 .content .flexarea .bgbg01 {
  position: absolute;
  z-index: -1;
  right: auto;
  left: -25rem;
  top: 19.9rem;
}
.freeareacontent #content_02 .content .flexarea .illust01 {
  position: absolute;
  top: -6.4rem;
  left: 28.7rem;
  width: 78px;
}
.freeareacontent #content_02 .content .flexarea .illust02 {
  position: absolute;
  width: 272px;
  bottom: 12rem;
  left: 19.5rem;
}
.freeareacontent #content_02 .content .flexarea .photoarea {
  align-items: start;
  width: 50.8%;
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo01 {
  align-items: start;
  margin-left: 0rem;
  margin-bottom: 3.7rem;
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo01 .p01 {
  width: 49.7%;
  margin-top: 2.8rem;
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo01 .p02 {
  width: 33.4%;
  margin-top: 0;
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo01 .p02 P {
  margin-top: 1.6rem;
  width: 91.1%;
  letter-spacing: 0rem;
  font-size: 1.2rem;
  line-height: 1.4em;
  margin-left: 1.5rem;
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo01 .p02 P span {
  background: #4f75b1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.4rem;
  color: #fff;
  font-weight: bold;
  margin-right: 0.3rem;
  padding-bottom: 0.1rem;
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo02 {
  width: 73.3%;
  margin-bottom: 4.1rem;
  margin-left: 3.1rem;
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo03 {
  margin-left: 0.9rem;
  width: 59%;
  margin-bottom: 1.3rem;
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo04 {
  display: flex;
  justify-content: left;
  flex-direction: row-reverse;
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo04 .photo {
  width: 41%;
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo04 .text {
  margin-top: 5.6rem;
  width: 41.2%;
  letter-spacing: -0.1rem;
  font-size: 1.2rem;
  line-height: 1.4em;
  margin-left: 1.3rem;
  margin-right: 3rem;
  text-align: justify;
  text-justify: inter-ideograph; /* IE向け */
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo04 .text span {
  background: #4f75b1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.4rem;
  color: #fff;
  font-weight: bold;
  margin-right: 0.3rem;
  padding-bottom: 0.1rem;
}
.freeareacontent #content_02 .content .flexarea .photoarea .photo04 .text span.m05 {
  margin-left: 0.1rem;
}
.freeareacontent #content_02 .infotext {
  width: 700px;
  margin: auto;
  position: relative;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  padding: 3.5rem 0;
  margin-bottom: 12rem;
}
.freeareacontent #content_02 .infotext .titleflex {
  background: #fff;
  display: flex;
  justify-content: left;
  gap: 1rem;
  align-items: center;
  position: absolute;
  top: -4.8rem;
  font-size: 2.6rem;
  font-weight: bold;
}
.freeareacontent #content_02 .infotext .titleflex .illust05 {
  width: 68px;
  margin-top: 1.3rem;
}
.freeareacontent #content_02 .infotext .titleflex h3 {
  margin-top: 0;
  letter-spacing: 0.4rem;
  padding-right: 1.5rem;
}
.freeareacontent #content_02 .infotext p {
  padding-left: 8rem;
  font-size: 1.4rem;
  position: relative;
  z-index: 9;
}
.freeareacontent #content_02 .infotext span {
  position: absolute;
  font-size: 1.3rem;
  right: 0;
  letter-spacing: 0.05rem;
  background: #fff;
  bottom: -1.2rem;
}
.freeareacontent #content_03 {
  margin-top: 30px;
  height: 394px;
  background: url(../images/allbg.png) no-repeat top center;
}
.freeareacontent #content_03 .btn {
  transition: 0.3s;
}
.freeareacontent #content_03 .btn img {
  opacity: 1;
  transition: 0.3s;
}
.freeareacontent #content_03 .btn .on {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: 0.3s;
}
.freeareacontent #content_03 .btn .on img {
  opacity: 0;
}
.freeareacontent #content_03 .btn:hover {
  opacity: 1;
}
.freeareacontent #content_03 .btn:hover a {
  opacity: 1;
}
.freeareacontent #content_03 .btn:hover img {
  opacity: 0;
}
.freeareacontent #content_03 .btn:hover .on {
  opacity: 1;
}
.freeareacontent #content_03 .btn:hover .on img {
  opacity: 1;
}
.freeareacontent #content_03 .area {
  position: absolute;
}
.freeareacontent #content_03 .text01 {
  top: 133px;
  left: 500px;
  animation-delay: 1.4s;
}
.freeareacontent #content_03 .text02 {
  top: 189px;
  left: 500px;
  animation-delay: 1.7s;
}
.freeareacontent #content_03 .btn01 {
  top: 104px;
  left: 55px;
  width: 488px;
}
.freeareacontent #content_03 .btn02 {
  pointer-events: none;
  top: 141px;
  left: 556px;
  width: 488px;
  left: auto;
  right: 0;
}
.freeareacontent #content_03 .btn03 {
  top: 195px;
  left: 55px;
  width: 488px;
}
.freeareacontent #content_03 .btn04 {
  top: 195px;
  left: 556px;
  width: 488px;
}
.freeareacontent #content_03 .btn05 {
  pointer-events: none;
  top: 3673px;
  width: 488px;
}
.freeareacontent #content_03 .btn06 {
  pointer-events: none;
  top: 3673px;
  left: auto;
  right: 0;
  width: 488px;
}

.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: -250px;
  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;
}

.sp-zone {
  display: none;
  font-size: 1.6rem;
}
@media only screen and (max-width: 750px) {
  .sp-zone {
    display: block;
    overflow-x: hidden;
  }
  .sp-zone img {
    width: 100%;
    height: auto;
  }
  .sp-zone .wrap_content {
    width: 100%;
    position: relative;
  }
  .sp-zone .wrap_content .slidearea02 {
    position: absolute;
    top: 7.4%;
    left: 0%;
    animation-delay: 0.7s;
    width: 88%;
  }
  .sp-zone .wrap_content .slidearea02 .slick-dots {
    left: auto;
    right: 0%;
    bottom: -7%;
  }
  .sp-zone .wrap_content .content {
    top: 0;
    width: 90%;
    position: absolute;
    left: 5%;
    height: 100%;
  }
  .sp-zone .wrap_content#title_area .textarea {
    position: absolute;
    writing-mode: vertical-rl;
    top: 73%;
    right: 15.6%;
    letter-spacing: 1.7px;
    line-height: 1.7em;
  }
  .sp-zone .wrap_content#title_area .textarea p {
    margin-left: 2.9%;
  }
  .sp-zone .wrap_content#bg01 .textarea {
    position: static;
    width: 35%;
    text-align: justify;
    text-justify: inter-ideograph; /* IE向け */
    margin-left: 10.1rem;
    margin-top: 6rem;
  }
  .sp-zone .wrap_content#bg01 .textarea h2 {
    position: relative;
    font-size: 2.9rem;
    margin-bottom: 3.4rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
  }
  .sp-zone .wrap_content#bg01 .textarea h2 p {
    padding-bottom: 1rem;
    margin-bottom: 2rem;
    border-bottom: 4px solid #4f75b1;
    display: inline-block;
  }
  .sp-zone .wrap_content#bg01 .textarea h2 span {
    color: #4f75b1;
  }
  .sp-zone .wrap_content#bg01 .textarea .txt {
    line-height: 1.75em;
  }
  .sp-zone .wrap_content#bg01 .textarea .txt span {
    font-size: 1.3rem;
    display: block;
  }
}

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

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