:root{
  --main-color: #3071B9;
  --main-dark-color: #004EA2;
  --sub-color: #F08300;
  --back-color: #FFFFFF;
  --lead-color: #D0D7ED;
  --comment-color: #EAE9E1;
  --font-color: #231815;
}

* {
	margin:0; padding:0; 		/*全要素のマージン・パディングをリセット*/
  font-family: 'Barlow Condensed', 'Noto Sans JP',sans-serif;
}

a,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration:none; 
}

img{
  width: 100%;
}

html, body{
  height: 100%;
  width: 100%;
}

.sp-on{
  display: block;
}

.pc-on{
  display: none;
}

br{
  display: block;
}

br.pc-br{
  display: none;
}

.contact{
  margin-bottom: 76px;
}

.contact-title{
  margin-bottom: 0px;
}

.contact-title p {
  text-align: center;
  font-size: 12pt;
  line-height: 30px;
  font-weight: bold;
}

.contact-container{
  margin: 0 auto;
  max-width: 310px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.contact-btn{
  width: 150px;
}

.contact-btn img{
  width: 100%;
}

@media (min-width: 900px){
  *{
    letter-spacing: 1px;
  }

  .sp-on{
    display: none;
  }
  
  .pc-on{
    display: block;
  }
  
  br{
    display: none;
  }
  
  br.pc-br{
    display: block;
  }

  span.wbr{
    display: inline-block;
  }

  .contact{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .contact-title{
    margin-right: 15px;
  }

  .contact-title p {
    font-size: 15pt;
  }

  .contact-container{
    margin: 0;
    margin-right: 70px;
    max-width: 610px;
    width: 610px;
  }

  .contact-btn{
    width: 300px;
  }
}