@charset "UTF-8";
/* CSS Document */

/*　--　　TOPページのcssファイルです　--　　*/

/*　--　　ここからheader　--　　*/

.header_top {
  z-index: 9999;
  /* headerを画面上部に固定する */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* ロゴとナビゲーションを横並びにする */
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px; /* スクロール時 */
  width: 100%;
  padding: 8% 5%;
  transition: 0.5s; /* アニメーションの変化時間 */
}
.header_logo_area {
  width: 20%;
  padding: 2% 0;
}
.header_logo {
  width: 60%;
  transition: 0.5s; /* アニメーションの変化時間 */
}
header.scroll-nav {
  /* 余白を狭くする */
  padding: 3% 5%;
}
header.scroll-nav .header_logo_area {
  width: 20%;
  padding: 2% 0;
}
header.scroll-nav .header_logo {
  width: 20%;
}
@media (max-width: 960px) {
  .header {
    padding: 7% 5%;
    transition: none; /* アニメーションの変化時間 */
  }
  .header_logo_area {
    width: 20%;
    padding: 0;
  }
  .header_logo {
    padding-top: 20%;
    width: 70%;
  }
}

/*　--　ここから　section top　--　*/

.section_top {
  width: 100vw;
  height: 70vw;
  margin: 10% 0 15% 0;
}
.top_contents {
  width: 28%;
  position: absolute;
  z-index: 10;
  margin-top: 20%;
  top: 0;
  left: 5%;
}
.top_title_img {
  width: 100%;
}
.top_bg {
  content: "";
  height: 70vw;
  border-radius: 60px;
  aspect-ratio: 1 / 1;
  background-image: url("../../common/image/second_bg.png");
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
}
.top_bg_illust {
  content: "";
  height: 70vw;
  aspect-ratio: 1 / 1;
  background: url("../image/top_illust_01.png") no-repeat center center;
  background-size: 85%;
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
}

@media (max-width: 600px) {
  .section_top {
    width: 100vw;
    height: 150vw;
    max-height: 800px;
    margin-bottom: 20%;
  }
  .top_contents {
    width: 60%;
    max-width: 300px;
    position: absolute;
    z-index: 10;
    margin: 23% auto 0 auto;
    top: 0;
    left: 20%;
  }
  .top_title_img {
    width: 100%;
  }
  .top_bg {
    height: 100vw;
    max-height: 600px;
    margin: 50vw auto 0 auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
  .top_bg_illust {
    height: 100vw;
    max-height: 600px;
    background-size: 97%;
    margin: 50vw auto 0 auto;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }
  .sns_link_top {
    margin-top: 160%;
  }
}

/*　--　ここから　section create　--　*/

.section_create {
  width: 100vw;
  height: auto;
  margin-bottom: 15%;
  position: relative;
}
.illust_bg_create {
  content: "";
  height: 300px;
  aspect-ratio: 1 / 1;
  background: url("../image/make_illust.png") no-repeat;
  background-size: 100%;
  position: absolute;
  z-index: -100;
  top: -40%;
  left: 5%;
}
@media (max-width: 960px) {
  .illust_bg_create {
    height: 200px;
    margin: 0 auto;
    top: 100px;
    right: 0;
    left: 0;
    bottom: 0;
  }
}
/*　--　ここから　section touch　--　*/

.section_touch {
  width: 100vw;
  height: 100%;
  margin-bottom: 15%;
  padding: 12% 0;
  background-image: url("../../common/image/second_bg.png");
  background-position: center center;
  background-attachment: fixed;
  background-size: cover 50%;
  border-radius: 60px;
}
.illust_bg_touch {
  content: "";
  height: 350px;
  aspect-ratio: 1 / 1;
  background: url("../image/child_illust.png") no-repeat;
  background-size: 100%;
  position: absolute;
  z-index: -100;
  top: -10%;
  right: 15%;
}

@media (max-width: 960px) {
  .section_touch {
    padding: 70px 0;
  }
  .illust_bg_touch {
    height: 250px;
    margin: 0 auto;
    top: 150px;
    right: 0;
    left: 0;
    bottom: 0;
  }
}



/*　--　ここから　section work　--　*/

.section_work {
  width: 100vw;
  height: auto;
  margin-bottom: 10%;
}
.illust_bg_work {
  content: "";
  height: 300px;
  aspect-ratio: 1 / 1;
  background: url("../image/search_illust.png") no-repeat;
  background-size: 100%;
  position: absolute;
  z-index: -100;
  top: -30%;
  right: 10%;
}
@media (max-width: 960px) {
  .illust_bg_work {
    height: 200px;
    margin: 0 auto;
    top: 100px;
    right: 0;
    left: 0;
    bottom: 0;
  }
}