@charset "UTF-8";
/* CSS Document */
.spnavBack {
  z-index: 9; }

/*==============================
共通
==============================*/
.titleBox {
  text-align: center;
  margin-bottom: 30px; }

.titleBox h3 {
  font-family: 'Lora', serif;
  font-weight: 500;
  font-size: 16px;
  color: #384051; }

.titleBox hr {
  display: block;
  width: 50px;
  margin: 10px auto;
  height: 3px;
  border-radius: 3px;
  border: none;
  background-color: #384051; }

.titleBox h2 {
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 5px;
  color: #384051; }

@media screen and (max-width: 600px) {
  .titleBox h3 {
    font-size: 14px; }

  .titleBox hr {
    margin: 10px auto; }

  .titleBox h2 {
    font-size: 18px;
    letter-spacing: 3px;
    line-height: 26px; }

  .footnav > h2 {
    font-size: 26px; } }
#nav-open > p {
  bottom: 14px;
  left: -55px;
  right: auto; }

/*==============================
メイン
==============================*/
#topslideWrap {
  position: relative;
  width: 100%;
  height: 100svh;
  z-index: 11;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  overflow: hidden; }
  #topslideWrap > h2 {
    color: #fff;
    position: absolute;
    bottom: 50px;
    left: 50px; }
  #topslideWrap > a.topOnly {
    position: absolute;
    top: 30px;
    left: 30px;
    z-index: 6; }
    #topslideWrap > a.topOnly > p {
      padding-left: 87px;
      font-weight: bold; }
  #topslideWrap::after {
    content: "";
    display: block;
    background-color: #fff;
    width: 100%;
    height: 120px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5; }
  @media screen and (max-width: 1000px) {
    #topslideWrap > h2 {
      font-size: 18px;
      letter-spacing: 0;
      bottom: 100px;
      left: 20px; }
    #topslideWrap::after {
      display: none; } }
  @media screen and (max-width: 600px) {
    #topslideWrap {
      height: 80vw;
      margin-top: 60px; } }

.slideBox {
  width: 100%;
  height: calc(100svh - 120px);
  margin-top: 120px;
  display: flex;
  justify-content: center;
  align-items: center; }
  .slideBox > img {
    display: block;
    width: 40%;
    max-width: 100%;
    position: absolute;
    margin: auto; }
  @media screen and (max-width: 1000px) {
    .slideBox {
      height: 100%;
      margin-top: 0; }
      .slideBox > img {
        width: 60%;
        top: -50px;
        bottom: 0; } }

.spnavBack a.topOnly {
  display: block; }

.spnavBack a.underOnly {
  display: none; }

#topanimeWrap {
  width: 100vw;
  height: 100vh;
  background-color: #4DC1E9;
  overflow: hidden;
  position: relative;
  z-index: 11; }

#topanimeWrap > a.topOnly {
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 6; }

.animepart01 {
  display: block;
  position: absolute;
  width: 43.3076vw;
  height: auto;
  z-index: 5;
  right: 10vw;
  bottom: -28vw; }

.animepart02 {
  display: block;
  position: absolute;
  width: 13.7692vw;
  height: auto;
  z-index: 4;
  right: 23vw;
  bottom: 27vw;
  animation: 1s ease-in 0s infinite alternate forwards running animepart02; }

@keyframes animepart02 {
  0% {
    transform: rotate(0deg) translate(0, 0); }
  100% {
    transform: rotate(5deg) translate(5%, 5%); } }
.animepart03 {
  display: block;
  position: absolute;
  width: 53.3846vw;
  height: auto;
  z-index: 4;
  right: 44vw;
  bottom: -7vw;
  animation: 3s ease-in 0s infinite alternate forwards running animepart03; }

@keyframes animepart03 {
  0% {
    transform: rotate(0deg) translate(0, 0); }
  100% {
    transform: rotate(-10deg) translate(0%, 15%); } }
.animepart04 {
  display: block;
  position: absolute;
  width: 45.1538vw;
  height: auto;
  z-index: 4;
  right: -7vw;
  bottom: -4vw;
  animation: 3s ease-in 0s infinite alternate forwards running animepart04; }

@keyframes animepart04 {
  0% {
    transform: rotate(0deg) translate(0, 0); }
  100% {
    transform: rotate(10deg) translate(5%, 5%); } }
.animepart05 {
  display: block;
  position: absolute;
  width: 23.1538vw;
  z-index: 3;
  right: -7vw;
  bottom: -4vw;
  animation: 9s linear 0s infinite normal forwards running animepart05; }

@keyframes animepart05 {
  0% {
    transform: translate(0, -800%); }
  100% {
    transform: translate(0, 200%); } }
.animepart06 {
  display: block;
  position: absolute;
  width: 43.7692vw;
  z-index: 3;
  right: 50vw;
  bottom: 0;
  animation: 8s linear 0s infinite normal forwards running animepart06; }

@keyframes animepart06 {
  0% {
    transform: translate(0, -500%); }
  100% {
    transform: translate(0, 200%); } }
.animepart07 {
  display: block;
  position: absolute;
  width: 18.6923vw;
  z-index: 6;
  right: 5vw;
  bottom: -4vw;
  animation: 7s linear 0s infinite normal forwards running animepart07; }

@keyframes animepart07 {
  0% {
    transform: translate(0, -800%); }
  100% {
    transform: translate(0, 200%); } }
.topCopy {
  display: block;
  position: absolute;
  width: 37.0769vw;
  z-index: 6;
  top: 5vw;
  left: 5vw; }

.newsBox {
  position: absolute;
  width: 100%;
  max-width: 360px;
  bottom: 30px;
  right: 45px;
  z-index: 6; }

.newsBox > a {
  display: inline-block;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding-left: 30px;
  margin-bottom: 10px; }

.newsBox > a > span {
  display: inline-block;
  font-weight: bold;
  width: 25px;
  height: 25px;
  padding: 9px 0 0 3px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 0;
  border: 2px solid #fff;
  margin-left: 5px;
  transition: .2s; }

.newsBox > a:hover {
  color: #F5FF00; }

.newsBox > a:hover > span {
  border: 2px solid #F5FF00; }

.newsList {
  width: 100%; }

.newsList > li {
  width: 100%;
  margin-bottom: 5px; }

.newsList > li:last-of-type {
  margin-bottom: 0; }

.newsList > li a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #fff;
  border-radius: 30px;
  padding: 10px 30px; }

.newsList > li a > h5 {
  font-size: 14px;
  letter-spacing: 0;
  font-weight: bold;
  color: #4DC1E9;
  margin-right: 10px; }

.newsList > li a > p {
  font-size: 14px;
  letter-spacing: 0;
  font-weight: bold; }

@media screen and (max-width: 1000px) {
  .spnavBack {
    z-index: 999998; }

  .spnavBack a.underOnly {
    display: block; }

  #topanimeWrap {
    height: auto;
    aspect-ratio: 16 / 12;
    margin-top: 60px; }

  #topanimeWrap > a.topOnly {
    display: none; }

  #topslideWrap > a.topOnly {
    display: none; }

  .animepart01 {
    display: block;
    position: absolute;
    width: 43.3076vw;
    height: auto;
    z-index: 5;
    right: 10vw;
    bottom: -20vw; }

  .animepart02 {
    display: block;
    position: absolute;
    width: 13.7692vw;
    height: auto;
    z-index: 4;
    right: 23vw;
    bottom: 35vw;
    animation: 1s ease-in 0s infinite alternate forwards running animepart02; }

  @keyframes animepart02 {
    0% {
      transform: rotate(0deg) translate(0, 0); }
    100% {
      transform: rotate(5deg) translate(5%, 5%); } }
  .animepart03 {
    display: block;
    position: absolute;
    width: 53.3846vw;
    height: auto;
    z-index: 4;
    right: 44vw;
    bottom: 0vw;
    animation: 3s ease-in 0s infinite alternate forwards running animepart03; }

  @keyframes animepart03 {
    0% {
      transform: rotate(0deg) translate(0, 0); }
    100% {
      transform: rotate(-10deg) translate(0%, 15%); } }
  .animepart04 {
    display: block;
    position: absolute;
    width: 45.1538vw;
    height: auto;
    z-index: 4;
    right: -7vw;
    bottom: 4vw;
    animation: 3s ease-in 0s infinite alternate forwards running animepart04; }

  @keyframes animepart04 {
    0% {
      transform: rotate(0deg) translate(0, 0); }
    100% {
      transform: rotate(10deg) translate(5%, 5%); } }
  .animepart05 {
    display: block;
    position: absolute;
    width: 23.1538vw;
    z-index: 3;
    right: -7vw;
    bottom: -4vw;
    animation: 9s linear 0s infinite normal forwards running animepart05; }

  @keyframes animepart05 {
    0% {
      transform: translate(0, -1400%); }
    100% {
      transform: translate(0, 100%); } }
  .animepart06 {
    display: block;
    position: absolute;
    width: 43.7692vw;
    z-index: 3;
    right: 50vw;
    bottom: 0;
    animation: 8s linear 0s infinite normal forwards running animepart06; }

  @keyframes animepart06 {
    0% {
      transform: translate(0, -1000%); }
    100% {
      transform: translate(0, 100%); } }
  .animepart07 {
    display: block;
    position: absolute;
    width: 18.6923vw;
    z-index: 6;
    right: 5vw;
    bottom: -4vw;
    animation: 7s linear 0s infinite normal forwards running animepart07; }

  @keyframes animepart07 {
    0% {
      transform: translate(0, -1200%); }
    100% {
      transform: translate(0, 100%); } }
  .newsBox {
    bottom: 10px;
    right: 0;
    left: 0;
    margin: auto; }

  .newsBox > a {
    padding-left: 20px; }

  .newsList > li a {
    padding: 5px 20px; } }
/*==============================
サイドボタン
==============================*/
.sidecontactBtn {
  display: block;
  position: fixed;
  top: 150px;
  right: 0px;
  z-index: 999999; }
  .sidecontactBtn > a {
    display: block;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    padding: 20px 10px;
    letter-spacing: 2px;
    color: #e8e345;
    background-color: #0070b5;
    border-radius: 10px 0 0 10px; }
  @media screen and (max-width: 1000px) {
    .sidecontactBtn {
      display: none; } }

_::-webkit-full-page-media, _:future, :root .sidecontactBtn {
  right: 24px; }

/*==============================
アバウト
==============================*/
#aboutWrap {
  padding: 180px 20px 100px; }

#aboutWrap > div {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  position: relative; }

#aboutWrap > div h2 {
  margin-bottom: 70px;
  position: relative;
  z-index: 2; }

#aboutWrap > div h3 {
  margin-bottom: 50px;
  position: relative;
  z-index: 2; }

#aboutWrap > div p {
  font-weight: bold;
  margin-bottom: 70px;
  position: relative;
  z-index: 2; }

#aboutWrap > div > img:nth-of-type(1) {
  display: block;
  position: absolute;
  width: 100%;
  max-width: 798px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  z-index: 1; }

#aboutWrap > div > img:nth-of-type(2) {
  display: block;
  position: absolute;
  width: 100%;
  max-width: 287px;
  top: -50px;
  bottom: 0;
  left: -150px;
  margin: auto;
  z-index: 1; }

#aboutWrap > div > img:nth-of-type(3) {
  display: block;
  position: absolute;
  width: 100%;
  max-width: 202px;
  top: 120px;
  bottom: 0;
  right: -100px;
  margin: auto;
  z-index: 1; }

@media screen and (max-width: 1000px) {
  #aboutWrap {
    padding: 50px 20px; }

  #aboutWrap > div h2 {
    margin-bottom: 30px; }

  #aboutWrap > div p {
    margin-bottom: 30px; }

  #aboutWrap > div > img:nth-of-type(1) {
    width: 90%; }

  #aboutWrap > div > img:nth-of-type(2) {
    display: none;
    width: 20%;
    left: 0;
    top: -80px; }

  #aboutWrap > div > img:nth-of-type(3) {
    display: none;
    width: 16%;
    right: 0%;
    top: 150px; } }
/*==============================
WORK
==============================*/
#topworkWrap {
  padding: 0 20px 100px; }
  #topworkWrap > h2 {
    text-align: center; }
  #topworkWrap > p {
    text-align: center;
    margin-bottom: 50px; }

.workList {
  width: 100%;
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; }
  .workList > li {
    width: 30%;
    margin-right: 5%;
    margin-bottom: 50px; }
    .workList > li:nth-of-type(3n) {
      margin-right: 0; }
    .workList > li > a {
      display: block; }
      .workList > li > a > img {
        width: 100%;
        aspect-ratio: 5 / 3;
        object-fit: cover;
        margin-bottom: 5px; }
      .workList > li > a > h4 {
        font-size: 18px;
        margin-bottom: 5px; }
    .workList > li > div {
      display: flex;
      justify-content: space-between;
      align-items: flex-end; }
      .workList > li > div > p {
        color: #4DC1E9; }
  @media screen and (max-width: 600px) {
    .workList > li {
      width: 100%;
      margin-right: 0; }
      .workList > li:nth-of-type(3n) {
        margin-right: 0; }
      .workList > li:nth-of-type(2n) {
        margin-right: 0; }
      .workList > li > a > h4 {
        font-size: 15px; }
      .workList > li > div {
        flex-wrap: wrap; } }

.catebtn {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 12px;
  color: #000;
  background-color: #AFE3F5;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 10px; }

.post-categories {
  display: flex; }

.post-categories > li {
  margin-right: 5px; }

.post-categories > li > a {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 12px;
  color: #000;
  background-color: #AFE3F5;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 10px; }

/*==============================
ケース
==============================*/
#caseWrap {
  padding: 0 20px 50px;
  text-align: center; }

#caseWrap h2 {
  margin-bottom: 15px; }

#caseWrap p {
  font-weight: bold;
  margin-bottom: 50px; }

.caseList {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between; }

.caseList > li {
  width: 29%;
  margin-bottom: 150px; }

.caseList > li img {
  width: 100%;
  margin-bottom: 10px; }

.caseList > li h3 {
  font-size: 28px;
  letter-spacing: 0px;
  margin-bottom: 15px; }

.caseList > li > a.linkBtn:hover {
  background-color: #4DC1E9; }

@media screen and (max-width: 1000px) {
  .caseList {
    max-width: 600px; }

  .caseList > li {
    width: 46%;
    margin-bottom: 100px; } }
@media screen and (max-width: 600px) {
  .caseList {
    max-width: 280px; }

  .caseList > li {
    width: 100%;
    margin-bottom: 50px; }

  .caseList > li:last-of-type {
    margin-bottom: 0; }

  .caseList > li h3 {
    font-size: 22px; } }
/*==============================
サービス
==============================*/
#serviceWrap {
  width: 100%;
  padding: 100px 0 0;
  margin-bottom: 100px;
  background-color: #AFE3F5;
  text-align: center; }

#serviceWrap h2 {
  margin-bottom: 15px; }

#serviceWrap p {
  font-weight: bold;
  margin-bottom: 100px; }

.serviceList {
  width: 100%;
  max-width: 940px;
  margin: 0 auto 100px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

.serviceList > li {
  margin-right: 42px;
  margin-bottom: 40px; }

.serviceList > li:nth-of-type(4),
.serviceList > li:nth-of-type(8),
.serviceList > li:nth-of-type(11) {
  margin-right: 0; }

.serviceList > li > a {
  display: block;
  padding: 5px 30px;
  background-color: #fff;
  border-radius: 5px;
  border: 4px solid #000;
  font-size: 28px;
  color: #000;
  transition: .2s; }

.serviceList > li > a:hover {
  background-color: #FFFF00; }

.serviceImgroop {
  width: 100%;
  height: 187px;
  position: relative;
  overflow: hidden; }

.serviceImgroop > img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3396px;
  height: 187px; }

.serviceImgroop > img:nth-of-type(1) {
  z-index: 3;
  animation: 30s linear 0s infinite normal forwards running serviceImgroop01; }

.serviceImgroop > img:nth-of-type(2) {
  z-index: 2;
  animation: 30s linear 15s infinite normal forwards running serviceImgroop02; }

@keyframes serviceImgroop01 {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(-100%, 0); } }
@keyframes serviceImgroop02 {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(-100%, 0); } }
@media screen and (max-width: 1000px) {
  .serviceList {
    padding: 0 50px; }

  .serviceList > li:nth-of-type(4), .serviceList > li:nth-of-type(8), .serviceList > li:nth-of-type(11) {
    margin-right: 42px; } }
@media screen and (max-width: 600px) {
  #serviceWrap {
    padding: 50px 0 0; }

  #serviceWrap p {
    margin-bottom: 30px; }

  .serviceList {
    justify-content: space-between;
    margin-bottom: 30px;
    padding: 0 20px; }

  .serviceList > li {
    width: 48%;
    margin-right: 0;
    margin-bottom: 20px; }

  .serviceList > li:nth-of-type(4), .serviceList > li:nth-of-type(8), .serviceList > li:nth-of-type(11) {
    margin-right: 0; }

  .serviceList > li > a {
    font-size: 18px;
    padding: 5px 10px; } }
/*==============================
ワークス
==============================*/
#worksWrap {
  width: 100%;
  position: relative;
  text-align: center;
  margin-bottom: 100px; }

.worksBox {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  padding: 50px 20px 50px;
  position: relative;
  z-index: 3; }

.worksBox > i {
  font-size: 36px;
  color: #000;
  margin-bottom: 60px; }

.worksBox h2 {
  margin-bottom: 15px; }

.worksBox p {
  font-weight: bold;
  margin-bottom: 30px; }

.worksBox > img {
  display: block;
  width: 100%;
  margin-bottom: 50px; }

.worksBox > .linkBtn {
  max-width: 500px; }

.worksBox > .linkBtn::before {
  content: "もっと、みてみる"; }

.worksBox > .linkBtn:hover {
  max-width: 300px; }

.worksBox > .linkBtn:hover::before {
  content: "インスタグラムへ"; }

.worksBack {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 850px;
  z-index: 2;
  overflow: hidden; }

.housetri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50vw 350px 50vw;
  border-color: transparent transparent #ffff00 transparent; }

.housesquare {
  width: 100%;
  height: calc(100% - 350px);
  background-color: #ffff00; }

.worksBack > img {
  position: absolute; }

.worksBack > img:nth-of-type(1) {
  bottom: 0;
  left: 10%;
  z-index: 2; }

.worksBack > img:nth-of-type(2) {
  bottom: 550px;
  right: 10%;
  z-index: 2; }

.worksBack > img:nth-of-type(3) {
  bottom: 500px;
  right: -0.5%;
  z-index: 1; }

.worksBack > img:nth-of-type(4) {
  bottom: 700px;
  left: -0.5%;
  z-index: 1; }

.worksBack > img:nth-of-type(5) {
  bottom: 720px;
  right: 3%;
  z-index: 1; }

@media screen and (max-width: 1000px) {
  .worksBack {
    height: 770px; }

  .housetri {
    border-width: 0 50vw 300px 50vw; }

  .housesquare {
    height: calc(100% - 300px); }

  .worksBack > img:nth-of-type(1) {
    width: 200px;
    left: 2%; }

  .worksBack > img:nth-of-type(2) {
    width: 220px; }

  .worksBack > img:nth-of-type(3) {
    width: 200px; }

  .worksBack > img:nth-of-type(4) {
    width: 400px;
    bottom: 650px; }

  .worksBack > img:nth-of-type(5) {
    width: 250px;
    bottom: 680px; } }
@media screen and (max-width: 600px) {
  #worksWrap {
    margin-bottom: 50px; }

  .worksBack {
    height: 630px; }

  .housetri {
    border-width: 0 50vw 250px 50vw; }

  .housesquare {
    height: calc(100% - 250px); }

  .worksBack > img:nth-of-type(1) {
    width: 95px;
    left: -1%;
    bottom: 50px; }

  .worksBack > img:nth-of-type(2) {
    width: 150px;
    bottom: 450px;
    right: 5%; }

  .worksBack > img:nth-of-type(3) {
    width: 100px;
    bottom: 400px; }

  .worksBack > img:nth-of-type(4) {
    width: 200px;
    bottom: 500px; }

  .worksBack > img:nth-of-type(5) {
    width: 125px;
    bottom: 520px; } }