@charset "UTF-8";
/* CSS Document */
.logo-top {
  width: 100%;
  height: auto;
  background: linear-gradient(0deg, #a1eafb 10%, #ffcef3 50%, #cabbe9 90%);
  padding-top: 40px;
  padding: 200px 0 0;
  margin-top: -200px;
}
.logo-image_orcalogo {
  width: 460px;
  position: relative;
  display: flex;
  margin: 40px auto;
}
.logo-top h1 {
  display: inline-block;
  color: #a1eafb;
  background-color: #000;
  padding: 10px;
  font-size: 3.0rem;
  text-align: center;
  margin: 60px auto 40px;
}

.top__sns_links ul {
  text-align: center;
  margin: 0 auto;
}
.top__sns_links ul li {
  display: inline-block;
  margin: 0 60px;
}
.top__sns_links ul li img {
  width: 44px;
}
/*
.logo-top_scrollbutton {
  position: relative;
  display: inline-block;
  margin: 0 auto 60px;
  vertical-align: middle;
}
.logo-top_scrollbutton p {
  color: #000;
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0 auto 6px;
}*/
.logo-description {
  background-color: #a1eafb;
  padding: 160px 40px 200px;
}
.logo-description h2 {
  color: #000;
  font-size: 6.0rem;
  margin: 0 auto 80px;
}
.logo-description p {
  position: relative;
  color: #000;
  font-size: 2.0rem;
  line-height: 3.6rem;
  text-align: left;
  max-width: 1020px;
  margin: 0 auto;
  z-index: 60;
}
.logo-description img {
  position: relative;
  width: 200px;
  bottom: 40px;
  float: right;
  transform: rotate(26deg);
  z-index: 10;
}
.logo-description_orca {
  background-color: #a1eafb;
  padding: 60px 40px 200px;
}
.logo-description_orca h2 {
  color: #000;
  font-size: 6.0rem;
  margin: 0 auto 80px;
}
.logo-description_orca h2 span {
  font-size: 3.0rem;
}
.logo-description_orca p {
  position: relative;
  color: #000;
  font-size: 2.0rem;
  line-height: 3.6rem;
  text-align: left;
  max-width: 1020px;
  margin: 0 auto;
  z-index: 60;
}
@media(max-width: 640px){
.logo-top {
  margin-top: 0;
  padding-top: 40px;
}
.logo-image_orcalogo {
  width: 80%;
}
.logo-image_logo {
  width: 120px;
  margin: 0 auto 0 16px;
}
.logo-top p {
  font-size: 2.0rem;
  margin: 4px auto 0 70px;
}
}
@media(max-width: 580px){
.logo-description_orca h2 {
  font-size: 5.0rem;
}
.logo-description_orca h2 span {
  font-size: 2.0rem;
}
}
@media(max-width: 470px){
.logo-description h2 {
  font-size: 4.0rem;
  line-height: 6.0rem;
}
.logo-description_orca h2 {
  font-size: 4.0rem;
  line-height: 6.0rem;
}
.logo-description_orca h2 span {
  font-size: 2.0rem;
}
}
@media(max-width: 400px){
.logo-description h2 {
  font-size: 3.0rem;
  line-height: 5.0rem;
}
.logo-description_orca h2 {
  font-size: 3.0rem;
  line-height: 5.0rem;
}
.logo-description_orca h2 span {
  font-size: 2.0rem;
}
}

.logo-description_company {
  background-color: #a1eafb;
  padding: 20px 40px 200px;
}
.logo-description_company h2 {
  color: #000;
  font-size: 4.0rem;
  margin: 0 auto 80px;
}
.logo-description_company-in p {
  display: inline-block;
}
.logo-description_company p {
  position: relative;
  color: #000;
  font-size: 2.0rem;
  line-height: 4.6rem;
  text-align: left;
  max-width: 1020px;
  margin: 0 auto;
  z-index: 60;
}
.pp {
  padding-right: 20px;
}
.pp2 {
  padding-left: 20px;
}
.logo-description_company img {
  position: relative;
  width: 200px;
  bottom: 40px;
  float: right;
  transform: rotate(26deg);
  z-index: 10;
}
.logo-description_company h2 span {
  font-size: 2.0rem;
}
.logo-description_work {
  background-color: #a1eafb;
}
.logo-description_work h2 {
  color: #000;
  font-size: 6.0rem;
  margin: 0 auto 80px;
  padding-top: 60px;
}
.logo-description_work h4 {
  position: relative;
  color: #000;
  font-size: 2.0rem;
  font-weight: 400;
  line-height: 3.6rem;
  text-align: left;
  max-width: 1020px;
  margin: 0 auto;
  z-index: 60;
  padding: 0 40px;
}
.section-contact-e_bb {
  margin-top: 120px;
  padding-bottom: 100px;
}
.section-contact-e_bb a {
  text-decoration: none;
}
.section-contact-e_bb p {
  font-family: "筑紫A丸ゴシック";
  font-size: 2.4rem;
  margin-top: 88px;
  margin-bottom: 20px;
  text-align: center;
}
.section-contact-e_button {
  position: relative;
  outline: none;
  font-size: 2.6rem;
  font-weight: 600;
  color: #FFF;
  border-width: inherit;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  width: 400px;
  height: 60px;
  opacity: 1;
  background-color: rgba(240, 110, 30, 1.0);
  margin: 0 auto;
}
.section-contact-e_button span{
      letter-spacing: 0.7px;
}
.section-contact-e_button:hover {
      animation: rotate 0.7s ease-in-out both;
}
.section-contact-e_button span:hover {
          animation: storm 0.7s ease-in-out both;
          animation-delay: 0.06s;
}
    
    
@keyframes rotate{ 0% {
        transform: rotate(0deg) translate3d(0, 0, 0);
  }
  25%{
        transform: rotate(3deg) translate3d(0, 0, 0);
  }
  50%{
        transform: rotate(-3deg) translate3d(0, 0, 0);
  }
  75%{
        transform: rotate(1deg) translate3d(0, 0, 0);
  }
  100%{
        transform: rotate(0deg) translate3d(0, 0, 0);
  }
}
  
@keyframes storm {
  0%{
        transform: translate3d( 0, 0, 0) translateZ(0);
  }
  25%{
        transform: translate3d( 4px, 0, 0) translateZ(0);
  }
  50%{
        transform: translate3d( -3px, 0, 0) translateZ(0);
  }
  75%{
        transform: translate3d( 2px, 0, 0) translateZ(0);
  }
  100%{
        transform: translate3d( 0, 0, 0) translateZ(0);
  }
}


@media(max-width: 460px){
.logo-description_company h2 {
  font-size: 3.0rem;
  line-height: 5.0rem;
}
.logo-description_work h2 {
  font-size: 3.0rem;
  line-height: 5.0rem;
}
.logo-description_company h2 span {
  font-size: 2.0rem;
}
}
@media(max-width: 380px){
.logo-description_work h2 {
  font-size: 3.0rem;
  line-height: 5.0rem;
}
.logo-description_company h2 span {
  font-size: 1.6rem;
}
}
@media(max-width: 365px){
.logo-description_work h2 {
  font-size: 3.0rem;
  line-height: 5.0rem;
}
.logo-description_company h2 span {
  font-size: 1.4rem;
}
.logo-description_company p {
  font-size: 1.6rem;
}
}
@media (max-width: 830px){
.section-contact-e_bb p {
  margin-top: 40px;
}
}
@media (max-width: 520px){
.section-contact-e_button {
  width: 80vw;
  margin: 0 auto;
}
}
@media (max-width: 360px){
.section-contact-e h2 {
  font-size: 2.6rem;
  margin-bottom: 60px;
}
.section-contact-e_bb p {
  font-size: 2.0rem;
}
.section-contact-e_button {
  font-size: 2.0rem;
}
}
@media (max-width: 890px){
  .logo-description_company {
    display: none;
  }
.logo-description_orca {
  background-color: #a1eafb;
  padding: 60px 40px 100px;
}
  .logo-description_company-in {
    display: flex;
    justify-content: center;
  }
.logo-description_company p {
  font-size: 1.6rem;
}
}
@media (max-width: 730px){
.logo-description_company {
  padding: 20px 16px 200px;
}
}
@media (max-width: 680px){
.logo-description_company {
  padding: 20px 10px 200px;
}
  .pp {
    padding-right: 0;
  }
}
@media (max-width: 650px){
.logo-description_company p {
  font-size: 1.4rem;
}
}