@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%;
  width: 100%;
  box-sizing: border-box;
  scroll-behavior: smooth;/* ページ内リンクの動きをスムーズに */
}
body {
  color: #333333;
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  /* font-style: normal; */
  font-size: 1.6em;
  line-height: 2.4rem;
  background-color: #f1f1f1;
  text-align: left;
  animation: loading 1.6s; /* ページ遷移時にふわっと表示させる記述 */
}
@keyframes loading {
  0% {opacity: 0;}
  100% {opacity: 1;}
  /* ページ遷移時にふわっと表示させる記述 */
}

:root {
  --header: 60px;
  scroll-padding: var(--header);
  --header-pc: 90px;
}
section h2 {
  font-size: 2.4rem;
}
.none {
  display: none;
}

a:hover{
  opacity: 0.6;
}



/* section-topの記述 */
/* スマホの記述 */

.section-top{
  margin-top: 160px;
  margin-bottom: 60px;
}

.top-wrapper{
  width: 80%;
  margin: 35% auto 10%;
  display: block;
}

.top-wrapper div{
  width: 100%;
  text-align: center;
}
.top-wrapper div h1{
  font-size: 2.0rem;
  padding-bottom: 20px;
}
.top-wrapper div h2{
  font-size: 3.0rem;
  padding-bottom: 20px;
  line-height: 1.2;
}

.top-wrapper ul{
  width: 60%;
  margin: 30% auto 0;
  text-align: center;
}
.top-wrapper ul a{
  text-decoration: none;
}
.top-wrapper ul li{
  font-size: 1.6rem;
  list-style: none;
  color: #333333;
  margin-bottom: 20px;
}
.top-wrapper p{
    text-align: left;
    font-size: 1.4rem;
  }
/* スマホの記述 ここまで*/



/* PCのsection-topの記述 */
@media(min-width:960px){
  .section-top{
    height: 37vh;
  }
  .top-wrapper{
    width: 80%;
    margin: 20% auto 0;
    display: flex;
  }

  .top-wrapper div{
    width: 50%;
    text-align: left;
  }

  .top-wrapper div h1{
    font-size: 6.4rem;
    padding-bottom: 40px;
  }

  .top-wrapper ul{
    width: 50%;
    margin-top: -3%;
    text-align: left;
  }
  .top-wrapper ul li{
    font-size: 2.0rem;
    margin-left: 25%;
    margin-bottom: 30px;
  }
  .top-wrapper p{
    font-size: 1.6rem;
  }
}
/* PCの記述 ここまで*/



/* ボタンの記述 */
.contact-btn{
    text-decoration: none;
    display: block;
    width: 230px;
    margin: 0 auto;
  }
  .contact-btn p{
    font-size: 1.6rem;
    text-align: center;
    width: 200px;
    margin: 20px auto 40px;
    padding: 10px 15px;
    border: solid 1px #888888;
    border-radius: 30px;
    color: #333333;
  }

  @media(min-width:960px){
    .contact-btn{
      text-decoration: none;
      display: block;
      width: 330px;
      margin: 0 auto;
    }
    .contact-btn p{
      font-size: 2.0rem;
      text-align: center;
      width: 300px;
      margin: 20px auto 60px;
      padding: 20px 15px;
      border: solid 1px #888888;
      border-radius: 30px;
      color: #333333;
    }
  }