@charset "utf-8";
/*
Theme Name: electioncar
Theme URI: https://jpncom.net/wp-content/themes/jpcom/
Description:electioncar's theme
Version: 1.0
*/

/* # =================================================================
   # BASE
   # ================================================================= */
   html {
    scroll-behavior: smooth;
    scroll-padding-top: 30px;
  }

  
:root {
    accent-color:#2868B6;
    --color-a:#048EB4;
    --color-b:#2868B6;
    --color-c:#F5FAFF;
    --color-d:#ffffff;
    --color-e:#F2FF00;
    --color-f:#EAF4FF;
    --color-g:#333333;
    --color-h:#ccc;
    --font-xxl:4vw;
    --font-xl:2.6vw;
    --font-l:1.8vw;
    --font-lm:1.3vw;
    --font-m:1.2vw;
    --font-ms:1vw;
    --font-s:0.95vw;
  }
  @media screen and (max-width: 769px) {
    :root {
      --font-xxl:32px;
      --font-xl:22px;
      --font-l:20px;
      --font-lm:18px;
      --font-m:16px;
      --font-ms:14px;
      --font-s:13px;
    }
  }
  
  body {
    font-family:"Noto Sans JP", serif;
    color: var(--color-g);
    font-size: var(--font-m);
    font-weight:500;
    letter-spacing: 0.05em;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    word-wrap: break-word;
    font-feature-settings: "palt";
  }

  .fadeInanimation{
    opacity: 0;
  }

  .fadeIn{
    animation: fadeIn 1.5s ease-in-out forwards;
}

  @keyframes fadeIn{
	0% {
	opacity: 0;
	} 
	100% {
	opacity: 1;
	} 
}

a {
    color: var(--color-g);
    text-decoration: none;
    transition: all 0.5s;
    outline: none;
  }
  @media screen and (min-width: 769px) {
    a[href^="tel:"] {
      pointer-events: none;
      color: var(--color-g) !important;
      text-decoration: none !important;
    }
  }
  
  img {
    width: 100%;
    max-width: inherit;
    height: auto;
  }
  
  address {
    font-style: normal;
  }
  
  hr {
    border-color: var(--color-h);
    margin-bottom: 1em;
  }
  
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
dt{
    margin: 0;
    padding: 0;
    font-weight: inherit;
  }
  
  strong {
    font-weight: 600;
  }
  
  iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    border: 0;
  }

  .font-xl {
    font-size: var(--font-xxl);
  }
  
  
  .font-l {
    font-size: var(--font-l);
  }
  
  .font-s {
    font-size: var(--font-s);
  }

  .font-red{
    color: var(--color-b);
}
  
.font-yellow{
  color: var(--color-e);
}

/* display
------------------------------ */
.pc-none {
    display: none;
  }
  @media screen and (max-width: 769px) {
    .pc-none {
      display: block;
    }
  }
  
  @media screen and (max-width: 767px) {
    .sp-none {
      display: none;
    }
  }
  
  .grecaptcha-badge {
    display: none;
  }
  
  /* align
  ------------------------------ */
  .txt-center {
    text-align: center;
  }
  
  .txt-right {
    text-align: right;
  }
  
  @media screen and (min-width: 769px) {
    .pc-txt-center {
      text-align: center;
    }
  }

  /* # =================================================================
   # AREA
   # ================================================================= */
   .row {
    width: 84%;
    margin: 0 auto;
  }

  .row-s {
    width:60%;
    margin:0 auto;
   }

   @media (max-width:769px){
    .row-s {
      width:84%;
    }
   }

   @media (max-width:500px){
    .row,
    .row-s {
      width:92%;
    }
   }


  /* # =================================================================
   # HEADING
   # ================================================================= */

h2,h3,h4,h5{
  font-weight: 800;
}

  .heading{
    color: var(--color-b);
    position: relative;
    font-size: var(--font-xl);
    font-style: italic;
    text-align: center;
    margin-bottom: 2em;
    line-height: 1.3;
  }
  .heading::after{
    content:'';
    width:2em;
    position: absolute;
    bottom:-0.5em;
    left:50%;
    transform: translateX(-50%);
    height: 0.2em;
    background: var(--color-a);
  }

  .heading02{
    color: var(--color-b);
    position: relative;
    font-size: var(--font-xl);
    font-style: italic;
    text-align: center;
    margin-bottom: 0.3em;
    line-height: 1.5;
  }

  .heading03{
    color:var(--color-b);
    font-size: var(--font-xl);
    font-style: italic;
    margin-bottom: 1em;
    line-height: 1.5;
    text-align: center;
  }

    /* # =================================================================
   # Header
   # ================================================================= */

   #header{
    display: flex;
    justify-content: space-between;
    padding: 1.6em 4em 4em 4em;
    background:url(../img/electioncar_bg_top_01.svg) no-repeat left top;
    background-size: 40% auto;
    position: relative;
  }

  #header h1{
    width:23%;
  }

  @media (max-width:768px){
    #header{
      padding: 1.2em 4em 3.4em 4em;
      background:url(../img/electioncar_bg_top_01.svg) no-repeat left top;
      background-size: 60% auto;
      position: relative;
    }
  
    #header h1{
      width:40%;
    }

  }

  @media (max-width:600px){
    #header{
      padding: 1em 0 4em 2em;
      background:url(../img/electioncar_bg_top_01.svg) no-repeat left top;
      background-size: 77% auto;
      position: relative;
    }
  
    #header h1{
      width:44%;
    }
  }

  @media (max-width:375px){
    #header{
      padding: 0.5em 0 4em 2em;

    }
  }


  /* # =================================================================
   # Main Visual
   # ================================================================= */

   #visual-area {
    background: 
    url('../img/electioncar_bg_top_02.svg') left bottom no-repeat,
    url('../img/electioncar_bg_top_03.svg') right bottom no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.47) 63.14%, rgba(4, 142, 180, 0.09) 90.34%, rgba(235, 243, 255, 0.47) 100%);
  background-size: 50% auto,20% auto, cover; /* 必要に応じて調整 */
      padding: 5em 0 11em 0;
  }
  

  @media (max-width:769px){
    #visual-area {
      padding:0 0 4em 0;
    }
  }

   #visual-area .row{
    display: flex;
    justify-content: space-between;
  }

  #visual-area .row div{
    width:60%;
  }

  #visual-area figure{
    width:37%;
  }

  @media (max-width:769px){
    #visual-area .row{
      flex-direction: column;
    }
    #visual-area .row div{
      width:fit-content;
      margin:0 auto;
    }  
    #visual-area figure{
      width:70%;
      margin:1.5em auto 0 auto;
    }
  }

  #visual-area p{
    font-weight: 800;
    font-size: var(--font-l);
    font-style: italic;
    padding-left:1em;
  }

  #visual-area h2{
    font-weight: 800;
    font-size: var(--font-xxl);
    font-style: italic;
    color: var(--color-b);
    line-height: 1.2;
  }

  @media (max-width:769px){
    #visual-area p{
      font-size: 5.5vw;
      padding-left:0;
    }
    #visual-area h2{
      font-size: 9.7vw;
    }
  }

  #visual-area ul{
    display: flex;
    text-align: center;
    color: var(--color-b);
    gap: 2em;
    margin-top:3em;
    justify-content: center;
  }

  
  @media (max-width:500px){
    #visual-area ul{
      gap:0.5em;
      margin: 2em -1em 0 -1em;
    }
  }


  #visual-area ul li{
    width: clamp(6em, 20vw, 11em);
    height: clamp(6em, 20vw, 11em);
    border-radius: 50%;
    box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18);
    background: var(--color-d);
    text-align: center;
    padding:3.5em 0 0 0;
    line-height: 1.5;
    position: relative;
  }
  
  @media (max-width: 769px) {
    #visual-area ul li{
      width: clamp(8em, 23vw, 15em);
      height: clamp(8em, 23vw, 15em);
    }  
  }

  @media (max-width: 500px) {
    #visual-area ul li{
      width: 28vw;
      height: 28vw;
    }  
  }


  #visual-area ul li{
    font-size: 1.2vw;
  }

  #visual-area ul li .font-b{
    font-weight: 800;
    display: block;
    font-size: 1.5vw;
  }

  @media (max-width:769px){

    #visual-area ul li{
      font-size: 2vw;
    }
  
    #visual-area ul li .font-b{
      font-size: 2.8vw;
    }
  }

  @media (max-width:500px){

    #visual-area ul li{
      font-size: 2.6vw;
      padding-top: 3.3em;
      line-height: 1.4;
    }
  
    #visual-area ul li .font-b{
      font-size: 3.4vw;
    }
  }

  #visual-area ul li:before{
    content:'';
    position: absolute;
    top:-1em;
    left:50%;
    transform: translate(-50%);
    width:4em;
    height:4em;
  }

  #visual-area ul li:nth-of-type(1)::before{
    background:url(../img/electioncar_ico_top_01.svg) no-repeat;
    background-size: 100% auto;
  }

  #visual-area ul li:nth-of-type(2)::before{
    background:url(../img/electioncar_ico_top_02.svg) no-repeat;
    background-size: 100% auto;
  }

  #visual-area ul li:nth-of-type(3)::before{
    background:url(../img/electioncar_ico_top_03.svg) no-repeat;
    background-size: 100% auto;
  }

  

   /* # =================================================================
   # Navigation
   # ================================================================= */
   .nav ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap:2.5em;
  }

  .nav ul li a:hover{
    color: var(--color-b);
  }

  .nav ul li:last-of-type a{
    position: relative;
    border-radius: 10em;
    display: block;
    background: linear-gradient(90deg, #048EB4 0%,#2868B6 100%);
    background-size: 150% 100%;
    background-position: 0% 0;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    color: var(--color-d);
    text-align: center;
    padding: 0.8em 3em;
    display: inline-block;
    transition: background-position 0.8s, box-shadow 0.8s;
  }
  
  @media (min-width: 769px) {
    .nav ul li:first-of-type{
      display: none;
    } 
    .nav ul li:last-of-type a:hover {
      background-position: 100% 0; /* グラデーションを反転 */
      box-shadow: none;
    }
  }

  #hamburger{
    display: none;
  }
  @media (max-width:769px){
    #hamburger{
      display: block;
      border:none;
      position: fixed;
      width:55px;
      height:55px;
      right:15px;
      border-radius: 0.2em;
      top:10px;
      color: var(--color-d);
      background: linear-gradient(90deg, #048EB4 0%, #2868B6 100%);
      z-index: 9999;
      cursor: pointer;
    }

  .hamburger-lines {
    width: 60%;
    margin-left: 20%;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .hamburger-lines span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-d);
    transition: 0.4s;
  }
  
  .hamburger.active .hamburger-lines span:nth-child(1) {
    transform: rotate(45deg) translate(7px,7px);
  }
  .hamburger.active .hamburger-lines span:nth-child(2) {
    opacity: 0;
  }
  .hamburger.active .hamburger-lines span:nth-child(3) {
    transform: rotate(-45deg) translate(6px,-6px);
  }

  .nav {
    position: fixed;
    top: 0;
    right: -20em;
    width: 20em;
    height: 100%;
    background:var(--color-d);
    transition: 0.4s;
    z-index: 999;
  }
  .nav.active {
    right: 0;
  }

  .nav ul {
    display: block;
    gap: 0;
    position: relative;
    top: 5.5em;
    padding: 0 2em 30px 2em;
  }
  .nav ul li a {
    padding: 1em 1em;
    display: block;
    position: relative;
    font-size: var(--font-lm);
    font-weight: 800;
  } 

  .nav ul li:nth-of-type(4){
    margin-bottom:2em;
  } 

  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(0,0,0,0.6);
    z-index:4;
  }
}

@media (max-width:374px){
  #hamburger{
    top:5px;
  }
}

/* # =================================================================
   # feature
   # ================================================================= */

#feature{
  background: var(--color-c);
  padding-top:5em;
}

   .feature-area{
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap:3em;
    margin-bottom: 4em;
    padding:1em;
    background:var(--color-d);
    border-radius: 1em;
    align-items: center;
  }

  @media only screen and (max-width: 769px) {
    .feature-area{
      grid-template-columns: 1fr;
      gap:1em;
    }
  }

  .feature-area header{
    display: flex;
    gap:0.7em;
    margin-bottom: 1em;
  }

  .feature-area header h3{
    color:var(--color-b);
    font-style: italic;
    font-size: var(--font-l);
    line-height: 1.5;
}

.feature-area header p.sum{
  background: linear-gradient(90deg, #048EB4 0%, #2868B6 100%);
  width:3em;
  height: 3em;
  border-radius: 50%;
  color: var(--color-d);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-lm);
  font-weight: 800;
  flex-shrink: 0;

}

/* # =================================================================
   # FLOW
   # ================================================================= */

   #flow {
      padding:0 0 5em 0;
      margin-bottom: 5em;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.47) 63.14%, rgba(4, 142, 180,0.2) 90.34%);
   }

   .flow-area{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:4em;
}

.flow-block{
  position: relative;
  width:20%;
  box-shadow: 0px 0px 18px 0px rgba(0, 0, 0, 0.18);
  border-radius: 0.5em;
  padding:2em 1em;
  background:var(--color-d);
}

.flow-block:not(:nth-of-type(1))::before{
  content:'';
  width:1em;
  height: 1.5em;
  position: absolute;
  top:40%;
  left:-2.5em;
  background:url(../img/electioncar_ico_arrow.svg) no-repeat;
  background-size: 100% auto;
}

@media only screen and (max-width: 769px) {
  .flow-block{
    width:40%;
  }
}

@media only screen and (max-width: 550px) {
  .flow-area{
    flex-direction: column;
    padding-top: 2em;
  }
  .flow-block{
    width:100%;
  }
  .flow-block:nth-of-type(1)::before,
  .flow-block:not(:nth-of-type(1))::before{
    content:'';
    width:1em;
    height: 1.5em;
    position: absolute;
    top:inherit;
    bottom:-2.5em;
    left:50%;
    transform: translateX(-50%);
    background:url(../img/electioncar_ico_arrow_b.svg) no-repeat;
    background-size: 100% auto;
  }

  .flow-block:last-of-type::before{
    display: none;
  }


}

.flow-block a{
  text-decoration: underline;
}

.flow-block .sum{
  position: absolute;
  top:-1em;
  left:50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #048EB4 0%, #2868B6 100%);
  background-size: 150% 100%;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  color: var(--color-d);
  text-align: center;
  width:2em;
  height: 2em;
  border-radius: 50%;
  font-weight: 800;
}

@media only screen and (min-width: 769px) {
  .flow-block a:hover{
    text-decoration: none;
  }
}

.flow-block figure{
  text-align: center;
}

.flow-block img{
  height:3em;
}

.flow-block h3{
  text-align: center;
  font-size: var(--font-lm);
  margin: 1em 0;
}


/* # =================================================================
   # CV
   # ================================================================= */

 .cv{
    margin-bottom: 5em;
    padding:2em 0;
    background: var(--color-b);
    text-align: center;
    color: var(--color-d);
}

.cv header{
  font-style: italic;
}

.cv h3{
  font-size: var(--font-l);
  line-height: 1.5;
}

.cv .btn{
  margin:3em auto 0 auto;
}

.cv .btn a{
  position: relative;
  border-radius: 10em;
  display: block;
  background: linear-gradient(90deg, #048EB4 0%, #2868B6 100%);
  background-size: 150% 100%;
  background-position: 0% 0;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  color: var(--color-d);
  text-align: center;
  padding: 1em 3em 1em 4em;
  display: inline-block;
  transition: background-position 0.8s, box-shadow 0.8s;
}

@media (min-width: 769px) {
  .cv .btn a:hover {
    background-position: 100% 0; /* グラデーションを反転 */
    box-shadow: none;
  }
}

@media only screen and (max-width: 376px) {
  .cv .btn a{
    display: block;
  padding: 1em 0 1em 0;
  }
}

.cv .btn span{
  position: absolute;
  top:-1.5em;
  left: 50%;
  transform: translateX(-50%);
  background:var(--color-d);
  padding:0.1em 1em;
  border-radius: 0.2em;
  white-space: nowrap;
  color: var(--color-a);
}

/* 吹き出しの矢印 */
.cv .btn span::before {
  content: "";
  position: absolute;
  top: 97%;  /* spanの下に配置 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 0.5em;
  border-style: solid;
  border-color: var(--color-d) transparent transparent transparent;  /* 下矢印 */
}


/* # =================================================================
   # FAQ
   # ================================================================= */

   #faq{
    margin-bottom: 8em;
}

@media only screen and (max-width: 769px) {
    #faq{
        margin-bottom: 5em;
    }
}

details{
    border-bottom: 1px solid var(--color-d);
  }

  details summary {
    position: relative;
    display: block;
    padding: 1em 3.5em 1.2em 5.5em;
    cursor: pointer;
    border: 2px solid var(--color-h);
    box-shadow: 0px 4px 0px 0px rgba(0, 0, 0, 0.07);
    border-radius: 0.3em;
    margin-bottom: 1em;
  }

  details summary::-webkit-details-marker {
    display: none;
  }
  
  details summary::before {
    content: "Q";
    position: absolute;
    top: 0.7em;
    left: 1.5em;
    font-weight: 700;
    color: var(--color-d);
    background:var(--color-a);
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
   width:2.5em;
   height:2.5em;
  }
  
  details summary::after{
    content:'';
    position: absolute;
    top: 0;
    right: 1.5em;
    bottom: 0;
    display: block;
    width: 1em;
    height: 0.6em;
    margin: auto;
    clip-path: polygon(100% 13%, 50% 100%, 0 13%, 8% 0, 50% 73%, 92% 0);
    transition: transform 0.5s;
    background:var(--color-a);
  }
  
  details[open] summary::after {
    transform: rotate(180deg);
  }
  
  details .faq-content{
    position: relative;
    padding: 0.5em 1.5em 1.5em 5.5em;
    margin-bottom: 1em;
    }
  
  details .faq-content::before {
    content: "A";
    position: absolute;
    top: 0.5em;
    left: 1.5em;
    font-weight: 700;
    color: var(--color-b);
    border:1px solid var(--color-b);
    border-radius: 50%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width:2.5em;
    height:2.5em;
  }

  @media (max-width:769px){
    details summary {
      padding: 1.2em 2.8em 1.2em 3.8em;
    }

    details .faq-content {
      padding: 1.2em 1.2em 1.2em 3.8em;
    }

    details summary::before {
      left: 0.7em;
    }

    details .faq-content::before {
      left: 0.7em;
    }
  
  }

    /* # =================================================================
   # Contact
   # ================================================================= */

#contact{
  background:var(--color-f);
  padding:5em 0;
}

  #contact .form-list input, #contact .form-list button, #contact .form-list textarea, #contact .form-list select {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    outline: none;
    background: none;
    font-size: 16px;
  }
  #contact .form-list input[type=text],
  #contact .form-list input[type=email],
  #contact .form-list input[type=tel],
  #contact .form-list textarea {
    width: 100%;
    border-radius: 0.3em;
    background:var(--color-d);
    border:2px solid var(--color-h);
    padding: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 50px;
  }

  #contact .form-list .wpcf7-spinner {
    display: block !important;
    margin: 5px auto 0 auto !important;
  }
  #contact .form-list .wpcf7-list-item {
    margin: 0 1em 0 0 !important;
  }
  #contact .form-list [data-class=wpcf7cf_group] dd {
    display: flex;
    align-items: flex-end;
  }
  #contact .form-list .wpcf7-list-item label {
    cursor: pointer;
    display: inline-block;
    padding: 5px 0 5px 30px;
    position: relative;
    width: auto;
  }
  #contact .form-list .wpcf7-list-item label::before {
   background:var(--color-d);
   border:2px solid var(--color-h);
    content: "";
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -14px;
    position: absolute;
    top: 50%;
    width: 1.6em;
    height: 1.6em;
  }
  #contact .form-list .wpcf7-list-item-label::after {
    border-right: 0.2em solid var(--color-b);
    border-bottom: 0.2em solid var(--color-b);
    content: "";
    display: block;
    height: 1em;
    left: 0.8em;
    margin-top: -0.7em;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: rotate(45deg);
    width: 0.6em;
  }
  #contact .form-list input[type=checkbox]{
    margin-right:0.5em;
}

  #contact .form-list input[type=checkbox]:checked + .wpcf7-list-item-label::after {
    opacity: 1;
  }
  #contact .form-list textarea {
    height: 200px;
  }
  #contact .form-list li {
    margin-bottom: 1.5em;
  }
  #contact .form-list li dt {
    margin-bottom: 10px;
  }

  #contact .form-list li dt::before{
    content:'必須';
    background: var(--color-a);
    color: var(--color-d);
    padding:0 1em;
    border-radius: 1em;
    font-style: italic;
    margin-right:1em;
    font-size: var(--font-ms);
  }

  
  #contact .form-list li dt.noreq::before{
       display: none;
  }


  #contact .wpcf7-response-output {
    margin: 0 !important;
    text-align: center;
    color: var(--color-a);
    border: none!important;
  }
  #contact .wpcf7-not-valid-tip {
    color: var(--color-a);
    margin-top: 0.5em;
    border: none!important;
  }

#contact p a{
    text-decoration: underline;
}

#contact p a:hover{
    text-decoration: none;
}

.privacy-desc{
    margin-top:1em;
    text-align: center;
}

@media (max-width:769px){
  .privacy-desc{
    text-align: left;
  }
 }

 #contact .form-list .btninput input {
  border-radius: 10em;
  display: block;
  background: linear-gradient(90deg, #048EB4 0%, #2868B6 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  color: var(--color-d);
  text-align: center;
  padding: 1em 3em;
  width: 265px;
  margin: 2em auto;
  transition: background-position 0.8s, box-shadow 0.8s;
}

@media (min-width: 769px) {
  #contact .form-list .btninput input:hover {
    background-position: 100% 0; /* グラデーションを反転 */
    box-shadow: none;
  }
}

    /* # =================================================================
   # Footer
   # ================================================================= */

#footer{
   padding:3em 0;
   position: relative;
}

#footer dl{
  display: grid;
  grid-template-columns: 1fr 3.5fr;
  gap:2em;
  max-width: 50%;
}

@media (max-width:769px){
  #footer dl{
    max-width: 100%;
    grid-template-columns: 1fr;
    text-align: center;
  }
  #footer dt img{
    width:6em;
  }
}

#footer dl span{
  font-weight: 800;
  display: block;
  margin-bottom: 0.5em;
}

   #contact-btn{
    position: fixed;
    bottom: 1em;
    right: 1em;
    width: 8em;
    z-index: 3;
    opacity: 0;
  }

  #page-top{
    position: absolute;
    right:3em;
    bottom:7em;
    width:3em;
  }


  small{
    font-size: var(--font-s);
    display: block;
    text-align: right;
}
@media (max-width:769px){

  #footer{
    padding-top: 5em;
  }

  small{
    text-align: center;
    margin-top:2em;
  }
  #page-top {
    position: relative;
    right: inherit;
    bottom: 23.5em;
    width: 3em;
    margin: 0 auto 0 auto;
}

}