.desktop {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  width: 100vw;
  font-family: "Osaka-Regular", Helvetica;
  color: #484848;
  line-height: 1.2;
  text-align: left;
  font-feature-settings: "palt";
 
}

.pagetop {
  cursor: pointer;
  position: fixed;
  right: 30px;
  bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: .3s;
  color: #00A6C4;
  background: #fff;
  z-index: 1;
  
/*   デフォルトは非表示 */
  opacity: 0;
}
.pagetop:hover {
    box-shadow: 0 0 10px #00A6C4;
}


.div {
  background-color: #ffffff;
  width: 100vw;

}


.view {
  left: 23px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin: 20px;
  

  opacity: 0; /* はじめ非表示 */
  animation-name: fadein;
  animation-delay: 1.8s;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.LOGO{
  display: flex;
  align-items: center;
}

.dreamdesignpark{
  padding-left:  30px;
}

.navbar{
  display: flex;
  flex-direction: row;
  align-items: center;
  
}

.navbar-text{
  padding: 10px;
  transition-duration: .4s;
  border-radius: 100px;
  margin: 0px 10px;
  color: #484848;
  position: relative; /*ホバーの下線用に必要*/
}

/* .navbar-text:hover {
  background:#41b79c;
  color: #ffffff;
  transform: scale(1.1);
} */


.navbar-text::after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #41b79c;
  bottom: -1px;
  transform: scale(0, 1);
  transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s;   /*変形の時間*/
  }
  
  .navbar-text:hover::after {
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
  }






.top{
 display: flex;
 justify-content: space-around;
 width:100vw;
 position: relative;
}


.TOP{
  width:80vw;
  margin: 20px; 

  opacity: 0; /* はじめ非表示 */
  animation-name: fadein;
  animation-delay: 1.8s;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.dream{
  top: 18%;
  left: 12%;
  position: absolute;
  width:40%; 
}

.d1{
  width:19%;

  opacity: 0; /* はじめ非表示 */
  animation-name: slideIn;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}


.ream{
  padding-left: 10px;
  width:74%;

  opacity: 0; /* はじめ非表示 */
  animation-name: fadein;
  animation-delay: 1.8s;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.design{
  top: 41%;
  left: 47%;
  position: absolute;
  width:40%;
}

.d2{
  width:19%;

  opacity: 0; /* はじめ非表示 */
  animation-name: slideIn;
  animation-duration: 1s;
  animation-delay: 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.esign{
  padding-left: 10px;
  width:74%;
  top: 5%;
  position: absolute;

  opacity: 0; /* はじめ非表示 */
  animation-name: fadein;
  animation-delay: 1.8s;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.park{
  top: 63%;
  left: 12%;
  position: absolute;
  width:38%;

  opacity: 0; /* はじめ非表示 */
  animation-name: slideIn;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.p-design{
  display: flex;
  justify-content: center;
  padding: 150px 30px ;
  font-size: 5vw;
  font-weight: bold;
}

.span{
  color: #41b79c; 
}

.view-2{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 150px 30px ;
}

.flex-item{
  flex: 1;
  display: flex;
  flex-direction:column;
  align-items: center;
}

.element{
  display: flex;
  flex-direction:column;
  align-items: center;
}

.text-wrapper-8{
  font-size: 25px;
  font-weight: bold;
  padding-bottom: 30px; 
}

.text-wrapper-9{
  font-size: 14px;
  line-height: 30px;
}

.which{
  object-fit: contain;
  width:20vw;
}

.view-3{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 150px 30px ;
}

.WHY{
  object-fit: contain;
  width:10vw;
}

.view-4{
  display: flex;
  flex-direction:column;
}

.view-5{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 150px 30px ;
  
}

.LOCAL{
  object-fit: contain;
  width:18vw;
}

.DDPARK{
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  
}

.ddpark{
  object-fit: contain;
  width:35vw;
  padding: 50px 0px;
}

.text-wrapper-10{
  text-align: center;
  line-height: 30px;
  padding: 50px 0px;
  font-size: 14px;
}

.element-2{
 width: 100%;
}

.SERVICE{
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 150px 30px ;
  
}

.SERVICE-2 {
  font-size: 14px;
  line-height: 30px;
}

.text-left{
  text-align: left;
}

.text-wrapper-11{
  font-size: 25px;
  font-weight: bold;
  color: rgb(173, 173, 173);
  padding-bottom: 15px;
}

.text-wrapper-12{
  font-size: 25px;
  font-weight: bold;
  padding-bottom: 15px;
}

.lp5000{
 color: #41b79c;
}

.element-3{
  object-fit: contain;
  width:20vw;
}

.work{
 
  padding: 20px 16vw;
}

.PORTFOLIO-but {
  transition-duration: .4s;
}

.PORTFOLIO-but:hover {
  transform: scale(1.1);
}

.CONTACT{
  padding: 10vw;
  display: flex;
  flex-direction:column;
  align-items: center;
  position: relative;
  padding: 200px 50px;
}

.CONTACT_bees{
  object-fit: contain;
  width:70vw;
}

.CONTACT-2{
  /* width: 320px;  */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  padding-top: 7vw;
}

.desktop .text-wrapper-13{
  margin-top: 20px;
  font-size: 25px;
  color: rgb(255, 255, 255);
}
.desktop .text-wrapper-14{
  margin-top: 15px;
  margin-bottom: 15px; 
  font-size: 25px;
  color: rgb(255, 255, 255);
}
.desktop .text-wrapper-15{
  text-align: center;
  font-size: 14px;
  color: rgb(255, 255, 255);
  line-height: 20px;
}

.CONTACT-but{
  padding: 30px;
  transition-duration: .4s;
}

.CONTACT-but:hover {
  transform: scale(1.1);
}

.COMPANY{
  /* padding: 10vw; */
  display: flex;
  flex-direction:column;
  align-items: center;
  position: relative;
}

.desktop .text-wrapper-16{
  margin-top: 20px;
  font-size: 25px;
  font-weight: bold;
}

.text-wrapper-22{
  font-size: 8px;
}

.COMPANY-2{
  padding: 40px 0px;
  font-size: 14px;
}

.COMPANY-3{
  padding: 30px 0px;
  display: flex;
  border-bottom: solid 1px #484848;
}

.COMPANY-4{
  width: 150px;
}

.copyright{
  display: flex;
  justify-content: center;
  padding-top: 200px;
  padding-bottom: 50px;
  font-size: 9px;
}

@media screen and (max-width: 800px) {
  .navbar{
    display: none;
  }

  

  .CONTACT-2{
    width: 320px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3vw 0px;
  }

  .desktop .text-wrapper-13{
    margin-top: 20px;
    font-size: 13px;
  }
  .desktop .text-wrapper-14{
    margin-top: 10px;
    margin-bottom: 10px; 
    font-size: 13px;
  }
  .desktop .text-wrapper-15{
    font-size: 9px;
    line-height: 13px;
  }

  .CONTACT-but{
    width: 120px;
    object-fit: contain;
    padding: 15px 0px;
  }
}

@media screen and (max-width: 575px) {
	/* 575px以下に適用されるCSS（スマホ用） */
    /* 320px以下にしておけば幅に収まる */

  .desktop{
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%;
      /* overflow-x: hidden; */
  }
  .div {
      background-color: #ffffff;
      width: 320px;
      height: 3500px;
  }
  
  .view {
      width: 80%;
      height: 44px;
      top: 25px;
      left: 23px;
      position: static; 
      
  }

  .logo{
      width: 30px;
      object-fit: contain;
  }

  .dreamdesignpark{
      width: 150px;
      object-fit: contain;
  }

  .navbar{
      display: none;
  }

  .top{
    width: initial;

  }
  .TOP{
      /* position: absolute; */
      margin-top: 20px;
      margin-bottom: 20px;
      width: 320px;
      height: 254px;
      object-fit: contain;
      
      /* justify-content: center;  */
  }

  .dream{
    top: 27%;
    left: 15%;
    position: absolute;
    width:40%; 
  }

  .ream{
    padding-left:2px;
  }

  .design{
    top: 45%;
    left: 51%;
    position: absolute;
    width:40%;
  }

  .esign{
    padding-left:3px;
  }

  .park{
    top: 61%;
    left: 15%;
    position: absolute;
    width:38%;
  
  }

  .view-2{
      width: 320px;
      height: 550px;
      padding: initial;
      display: flex;
      flex-direction: column;
      align-items: center;
      
  }

  .p-design{
      font-size: 25px;
      text-align: center;
      padding: 200px 0px;
  }

  .element{
      display: flex;
      flex-flow: column;
      text-align: center;
      width: 350px;
      height: auto;
  }

  .text-wrapper-8{
      margin-top: 30px;
      margin-bottom: 15px;
      font-size: 20px;
      text-align: center;
  }

  .text-wrapper-9{
      font-size: 14px;
      /* text-align: center; */
      line-height: 20px;
  }

  .which{
      width: 200px;
      object-fit: contain;
      padding: 100px 0px;
      
  }
  

  .view-3{   
    width: 320px;
    /* height: 550px; */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-direction: column-reverse;
    padding-top: 50px 0px;

  }

  .WHY{

    width: 100px;
    object-fit: contain;
    padding: 100px 0px;
  }

  .view-4{   
    display: flex;
    flex-flow: column;
    text-align: center;
    width: 350px;
    height: auto;
  }

  .view-5{   
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: initial;
    /* flex-direction: column-reverse; */
  }

  .LOCAL{   
    width: 200px;
    object-fit: contain;
    padding: 100px 0px;
  }

  .DDPARK{   
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-direction: column-reverse;
    padding: 50px 0px;
  }

  .ddpark{
    width: 300px;
    object-fit: contain;
  }

  .text-wrapper-10{
    line-height: 20px;
    width: 350px;
    font-size: 14px;
    text-align: left;
  }

  .element-2{
    margin-left: -100px;
    width: 575px;
    object-fit: contain;

  }

  .SERVICE{   
    width: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* flex-direction: column-reverse; */
  }

  .text-left{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .SERVICE-2{
    position: static; 
    width: 320px;
    height: 200px;
  
  }

  .text-wrapper-11{
    font-size: 20px;
  }
  .text-wrapper-12{
    font-size: 20px;
  }

  .LP{
    font-size: 14px; 
    text-align: center;
  }

  .element-3{
    padding: 100px 0px;
    width: 200px;
    object-fit: contain;
  
  }

  .WARK{
    text-align: left;
    font-size: 20px;
  
  }

  .PORTFOLIO-but{
    text-align: left;
    width: 150px;
    object-fit: contain;
  }

  .CONTACT{   
    width: 320px;
  }

  .CONTACT_bees{
    height: 200px;
    object-fit: cover;
    width:100vw;
  }

  .CONTACT-2{
    width: 320px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0vw 0px;
  }

  .desktop .text-wrapper-13{
    margin-top: 20px;
    font-size: 14px;
  }
  .desktop .text-wrapper-14{
    margin-top: 10px;
    margin-bottom: 10px; 
    font-size: 14px;
  }
  .desktop .text-wrapper-15{
    font-size: 14px;
    line-height: 15px;
  }

  .CONTACT-but{
    width: 120px;
    object-fit: contain;
    padding: 15px 0px;
  }

  .COMPANY{  
    width: 320px; 
  }

  .COMPANY-3{
    display: inline;
    padding: 10px 0px;
  }

  .desktop .text-wrapper-16{
    font-size: 20px;
  }

  .desktop .text-wrapper-17{
    font-size: 14px;
    padding-bottom: 10px;
  }

  .desktop .text-wrapper-18{
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: solid 1px #484848;
  
  }

  .desktop .text-wrapper-19{
    position: static; 
    font-size: 14px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .desktop .text-wrapper-20{ 
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: solid 1px #484848;
  }

  .desktop .text-wrapper-27{
    font-size: 14px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .desktop .element-4{
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: solid 1px #484848;
    
  }

  .desktop .text-wrapper-21{
    font-size: 14px;
    
  }

  .desktop .text-wrapper-22{
    font-size: 8px
  }

  .desktop .text-wrapper-23{
    font-size: 14px;
    padding-top: 20px;
    padding-bottom: 10px;
    
  }

  .desktop .gmail-com{
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: solid 1px #484848;
  }

  .desktop .text-wrapper-24{
    font-size: 14px;
    padding-top: 20px;
    padding-bottom: 10px;
    
  }

  .desktop .text-wrapper-25{
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: solid 1px #484848;
  }

  .desktop .text-wrapper-26{
    font-size: 14px;
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .desktop .WEB{
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-bottom: solid 1px #484848;
  }

  .desktop .copyright{
    margin-top: 50px;
    position: static;
    font-size: 6px;
    text-align: center;
  }

}


/* アニメーション */

@keyframes fadein{
  from{
  opacity: 0;
  transform: translatey(0px);
  }
  to{
  opacity: 1;
  transform: translatey(0);
  }
}

@keyframes slideIn {
  0% {
    transform: translateX(180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

/* スクロールすると下からふわっとさせるためのコード */
/* .slidein { */
  /* 30px下げる */
  /* transform: translateY(30px); */
  /* 要素を透明にする */
  /* opacity: 0; */
  /* 2秒かけて、変化させる */
  /* transition: transform 2s, opacity 2s; */
/* } */

/* .slidein.show { */
  /* transform: translateY(0); */
  /* opacity: 1; */
/* } */