@charset "utf-8";

/*
Theme Name: (SYNDESI)
Author: (Yusuke Kobayashi)
Author URI: (サイトのURL)
Description: (SYNDESI WEB SITE)
Version: (Vol.1)
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (max-width: 919px) {
  /* //////////////////////////// */
  /* main contents */

  /* first view */

  .hello {
    background-color: #fbfbfd;
    height: 100vh;
    padding-top: 8vh;
  }

  .hello .text {
    padding-top: 4vh;
    padding-left: 5vw;
    margin-top: 10vh;
    margin-left: 5vw;
    font-size: 2.3rem;
  }

  .hello div {
    margin-left: 20vw;
    padding: 5px;
    display: inline-block;
    color: #1d1d1f;
    font-weight: 300;
  }

  .hello div:nth-of-type(1) {
    margin-top: 25vh;
  }

  @keyframes line {
    25% {
      transform: translate(101vw, -40vh);
    }
    50% {
      transform: translate(101vw, -20vh);
    }
    100% {
      transform: translate(-1vw, 5vh);
    }
  }

  /* //////////////////////////// */
  /* About us */

  .about {
    background-color: #fbfbfd;
  }

  .about section {
    display: block;
    background-color: #b2c3d5;
    width: 80vw;
    margin-left: 20vw;
    transform: translateY(-25vh);
    padding: 5vh 2vw;
    position: relative;
    background-image: url("/素材画像/bg_i.jpg");
    background-size: cover;
  }

  .about h2 {
    width: 80vw;
    padding-left: 10vw;
    padding-bottom: 5vh;
    font-size: 1.3rem;
    opacity: 0;
    transform: scale(1, 3);
    font-size: 1.5rem;
  }

  .about_h2.show {
    opacity: 1;
    transition: 0.8s 0.5s;
    transform: scale(1, 1);
  }

  .about p {
    width: 85%;
    padding-left: 15%;
    padding-top: 1vh;
    line-height: 1.3rem;
    letter-spacing: 1px;
  }

  .about .container {
    opacity: 0;
  }

  .about .container.show {
    opacity: 1;
    transition: 0.8s 0.8s;
  }

  .about article .more {
    border-bottom: 1rem #1d1d1f;
  }

  .about article .more {
    display: inline-block;
    margin-left: 15%;
    padding: 1rem;
    opacity: 0;
    transform: scale(1, 3);
    font-size: 1.5rem;
  }

  .about article .more.show {
    opacity: 1;
    transition: 0.8s 0.8s;
    transform: scale(1, 1);
  }

  /* //////////////////////////// */
  /* service */

  .service {
    padding-top: 5vh;
    transform: translateY(-15vh);
  }

  .service .title {
    padding-left: 10vw;
    font-size: 2rem;
    display: inline-block;
    opacity: 0;
    transform: scale(1, 0);
  }

  .service .title.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .service .title.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  .service .section_title {
    font-weight: bold;
    margin-top: 10vh;
    width: 80vw;
    padding-left: 10vw;
    font-size: 1.5rem;
    display: inline-block;
    opacity: 0;
    transform: scale(1, 0);
  }

  .service .section_title.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .service .section_title.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  .service .section_article {
    margin-top: 5vh;
    width: 80vw;
    padding-left: 10vw;
    line-height: 1.5rem;
    letter-spacing: 1px;
    opacity: 0;
    transform: scale(1, 0);
  }

  .service .section_article.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .service .section_article.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_article_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: top;
  }

  .service .container {
    width: 80vw;
    height: 80vw;
    margin-left: 10vw;
    opacity: 0;
    transform: scale(1, 0.5);
  }

  .service .container.show {
    opacity: 1;
    transition: 0.5s 0.5s;
    transform: scale(1, 1);
  }

  .service .section_container.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80vw;
    height: 80vw;
    margin: 10vw;
    position: absolute;
    animation: section_article_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: top;
  }

  .service .section_image {
    width: 60vw;
    height: auto;
    margin-left: 20vw;
    object-fit: cover;
    padding-top: 5vh;
  }

  .service .read_more {
    display: inline-block;
    padding-left: 10vw;
    margin-top: 10vh;
    font-size: 1.5rem;
    font-weight: bold;
    opacity: 0;
    transform: scale(1, 0);
  }

  .service .read_more.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .service .read_more.show::before {
    background-color: #1d1d1f;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  .service .read_more a {
    color: #1d1d1f;
    display: block;
    text-align: center;
  }

  /* //////////////////////////// */
  /* strong */

  .flow {
    background-color: #fbfbfd;
    padding-top: 15vh;
    padding-bottom: 15vh;
  }

  .flow .title {
    width: 80vw;
    padding-left: 10vw;
    font-size: 2rem;
    transform: scale(1, 3);
    opacity: 0;
  }

  .flow .title.show {
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
    opacity: 1;
  }

  .flow .title.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  .flow .section_title {
    display: inline-block;
    padding-left: 10vw;
    margin-top: 10vh;
    font-size: 1.5rem;
    font-weight: bold;
    opacity: 0;
    transform: scale(1, 0);
  }

  .flow .section_title.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .flow .section_title.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  .flow .section_article {
    margin-top: 5vh;
    width: 80vw;
    padding-left: 10vw;
    line-height: 1.5rem;
    letter-spacing: 1px;
    opacity: 0;
    transform: scale(1, 0);
  }

  .flow .section_article.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .flow .section_article.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  /* //////////////////////////// */
  /* contact */

  .contact {
    background-color: #1d1d1f;
    padding-top: 10vh;
    padding-bottom: 10vh;
    transform: scale(1, 0);
    text-align: center;
  }

  .contact.show {
    transition: 0.3s 0.5s;
    transform: scale(1, 1);
  }

  .contact .container a {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
  }

  .contact .container a::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: "";
    width: 100%;
    height: 2px;
    background: #fff;
    transform: scale(1, 1);
    transform-origin: right top;
  }

  .contact p {
    color: #fff;
    font-size: 0.8rem;
    padding-top: 1rem;
  }
}

/* ////////////////// */
/* pc design */
@media (min-width: 920px) {
  /* //////////////////////////// */
  /* main contents */

  /* first view */

  .hello {
    background-color: #fbfbfd;
    height: 100vh;
    padding-top: 15vh;
  }

  .hello .text {
    padding-top: 4vh;
    padding-left: 5vw;
    margin-top: 10vh;
    margin-left: 5vw;
    font-size: 5vw;
  }

  .hello div {
    margin-left: 40vw;
    padding: 5px;
    display: inline-block;
    color: #1d1d1f;
    font-weight: 300;
    font-size: 1.5vw;
  }

  .hello div:nth-of-type(1) {
    margin-top: 5vh;
  }

  @keyframes line {
    25% {
      transform: translate(101vw, -40vh);
    }
    50% {
      transform: translate(101vw, -20vh);
    }
    100% {
      transform: translate(-1vw, 5vh);
    }
  }

  /* //////////////////////////// */
  /* About us */

  .about {
    background-color: #fbfbfd;
  }

  .about section {
    display: block;
    background-color: #b2c3d5;
    width: 80vw;
    margin-left: 20vw;
    transform: translateY(-15vh);
    padding: 15vh 2vw;
    position: relative;
    background-image: url("/素材画像/bg_i.jpg");
    background-size: cover;
  }

  .about h2 {
    width: 80vw;
    padding-left: 10vw;
    padding-bottom: 5vh;
    font-size: 1.3rem;
    opacity: 0;
    transform: scale(1, 3);
    font-size: 1.5rem;
  }

  .about_h2.show {
    opacity: 1;
    transition: 0.8s 0.5s;
    transform: scale(1, 1);
  }

  .about p {
    width: 90%;
    padding-left: 15%;
    padding-top: 1vh;
    line-height: 1.3rem;
    letter-spacing: 1px;
  }

  .about .container {
    opacity: 0;
  }

  .about .container.show {
    opacity: 1;
    transition: 0.8s 0.8s;
  }

  .about article .more {
    border-bottom: 1rem #1d1d1f;
  }

  .about article .more {
    display: inline-block;
    margin-left: 15%;
    padding: 1rem;
    opacity: 0;
    transform: scale(1, 3);
    font-size: 1.5rem;
  }

  .about article .more.show {
    opacity: 1;
    transition: 0.8s 0.8s;
    transform: scale(1, 1);
  }

  /* //////////////////////////// */
  /* service */

  .service {
    padding-top: 5vh;
    transform: translateY(-15vh);
  }

  .service .pc_flex {
    display: flex;
    justify-content: space-between;
    width: 90vw;
  }

  .service section {
    width: 30vw;
    height: auto;
  }

  .service .title {
    padding-left: 10vw;
    font-size: 2rem;
    display: inline-block;
    opacity: 0;
    transform: scale(1, 0);
  }

  .service .title.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .service .title.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  .service .section_title {
    font-weight: bold;
    margin-top: 10vh;
    width: 30vw;
    padding-left: 10vw;
    font-size: 1.5rem;
    display: inline-block;
    opacity: 0;
    transform: scale(1, 0);
  }

  .service .section_title.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .service .section_title.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  .service .section_article {
    margin-top: 5vh;
    width: 30vw;
    padding-left: 10vw;
    line-height: 1.5rem;
    letter-spacing: 1px;
    opacity: 0;
    transform: scale(1, 0);
  }

  .service .section_article.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .service .section_article.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_article_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: top;
  }

  .service .container {
    width: 20vw;
    height: 20vw;
    opacity: 0;
    transform: scale(1, 0.5);
  }

  .service .container.show {
    opacity: 1;
    transition: 0.5s 0.5s;
    transform: scale(1, 1);
  }

  .service .section_container.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 25vw;
    height: 25vw;
    margin: 3vw;
    position: absolute;
    animation: section_article_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: top;
  }

  .service .section_image {
    width: 20vw;
    height: auto;
    object-fit: cover;
    padding-top: 5vh;
    margin-left: 8vw;
  }

  .service .read_more {
    display: inline-block;
    margin-left: 10vw;
    margin-top: 10vh;
    font-size: 1.5rem;
    font-weight: bold;
    opacity: 0;
    transform: scale(1, 0);
    text-decoration: none;
  }

  .service .read_more.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .service .read_more.show::before {
    background-color: #1d1d1f;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  .service .read_more.show::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: "";
    width: 100%;
    height: 2px;
    background: #1d1d1f;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform 0.3s;
  }

  .service .read_more.show:hover::after {
    transform-origin: top left;
    transform: scale(1, 1);
  }

  /* //////////////////////////// */
  /* work flow */

  .flow {
    background-color: #fbfbfd;
    padding-top: 15vh;
    padding-bottom: 15vh;
  }

  .flow .pc_flex {
    display: flex;
    justify-content: space-between;
    width: 90vw;
  }

  .flow .title {
    display: inline-block;
    padding-left: 10vw;
    font-size: 2rem;
    transform: scale(1, 3);
    opacity: 0;
  }

  .flow .title.show {
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
    opacity: 1;
  }

  .flow .title.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  .flow .section_title {
    display: inline-block;
    padding-left: 10vw;
    margin-top: 10vh;
    font-size: 1.5rem;
    font-weight: bold;
    opacity: 0;
    transform: scale(1, 0);
  }

  .flow .section_title.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .flow .section_title.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  .flow .section_article {
    margin-top: 5vh;
    width: 30vw;
    padding-left: 10vw;
    line-height: 1.5rem;
    letter-spacing: 1px;
    opacity: 0;
    transform: scale(1, 0);
  }

  .flow .section_article.show {
    opacity: 1;
    transform: scale(1, 1);
    transition: 0.5s 0.5s;
  }

  .flow .section_article.show::before {
    background-color: #b2c3d5;
    content: "";
    width: 80%;
    height: 100%;
    position: absolute;
    animation: section_animation 1.2s;
    transform: scale(0, 0);
    transform-origin: left;
  }

  /* //////////////////////////// */
  /* contact */

  .contact {
    background-color: #1d1d1f;
    padding-top: 10vh;
    padding-bottom: 10vh;
    transform: scale(1, 0);
    text-align: center;
  }

  .contact.show {
    transition: 0.3s 0.5s;
    transform: scale(1, 1);
  }

  .contact .container a {
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
  }

  .contact .container a::after {
    position: absolute;
    bottom: -4px;
    left: 0;
    content: "";
    width: 100%;
    height: 2px;
    background: #fff;
    transform: scale(0, 1);
    transform-origin: right top;
    transition: transform 0.3s;
  }

  .contact .container a:hover::after {
    transform-origin: top left;
    transform: scale(1, 1);
  }

  .contact p {
    color: #fff;
    font-size: 0.8rem;
    padding-top: 1rem;
  }
}