/* --------------------- */
/* Base
/* --------------------- */
html{
  font-size: 62.5%
}
body{
  font-size: 1.4rem;
  color: #333;
  font-family: 'Noto Sans','Noto Sans JP', sans-serif;
  line-height: 1;
}
img{
  width: 100%;
  vertical-align: bottom;
}
a{
  color: #333;
  text-decoration: none;
}
ul{
  list-style: none;
}

/* セクション関連 */
.section-wrapper{
  padding: 80px 0;
}
.section-wrapper:first-of-type{
  padding-top: 100px;
}
.section-wrapper:last-of-type{
  padding-bottom: 140px;
}
.section-inner{
  max-width: 760px;
  margin: 0 auto;
  padding: 0 4vw;
}
.section-title{
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 40px;
}
.section-title_jp{
  font-size: 1.2rem;
  display: block;
  color: #777;
  margin-top: 10px;
}

/* ボタン要素 */
.btn{
  color: #fafafa;
  display: block;
  line-height: 48px;
  width: 240px;
  border-radius: 24px;
  background-color: #66C1C8;
  text-align: center;
  font-weight: bold;
  transition: .3s;
}
.link-btn{
  position: relative;
}
.btn:hover{
  box-shadow: 0 0 24px rgba(0,0,0,.2);
  transition: .3s;
}
.link-btn::after{
  content: ">";
  position: absolute;
  right: 30px;
  transform: translate(0,0%);
  transition: .3s;
}
.link-btn:hover::after{
  transform: translate(8px,0%);
  transition: .3s;
}

/* その他の共通クラス */
.text-center{
  text-align: center;
}
.block-center{
  margin: 0 auto;
}
.main-bg{
  background-color: #F9F9F9;
}
.accent-bg{
  background-color: #FFBC1E;
}
.flex-rr,
.flex-rc{
  display: flex;
  justify-content: space-between;
}
.multi-lines{
  line-height: 1.8;
}
.s-text-wrapper{
  width: 440px;
}
.url{
  text-decoration: underline;
  transition: .4s;
  color: #66C1C8;
}

/* ----------------------- */
/* header
/* ----------------------- */
.header{
  display: flex;
  justify-content: space-between;
  padding: 24px 3.5vw 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;
}
.site-title{
  font-size: 2.4rem;
  font-weight: bold;
}
.nav-item{
  font-size: 1.6rem;
  font-weight: bold;
  margin-right: 50px;
  position: relative;
}
.nav-item:last-of-type{
  margin-right: 0;
}
.nav-item a{
  display: inline-block;
  padding: 4px;
}
.site-title a:hover,
.nav-item a:hover{
  color: #FF9639;
}
.nav-item.current::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #FFBC1E;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
}

/* ----------------------- */
/* footer
/* ----------------------- */
.footer{
  background-color: #66C1C8;
  /* border-top: 1px solid #63AFB5; */
  padding: 18px 0;
  font-size: 1.2rem;
  color: #fafafa;
}

/* 下層ページタイトル */
.page-title-wrapper{
  position: relative;
}
.page-title{
  font-size: 3.6rem;
  font-weight: bold;
  position: absolute;
}
.page-title_jp{
  font-size: 1.4rem;
  display: block;
  text-align: center;
  font-weight: normal;
  margin-top: 20px;
}
.page-title.title-center{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.sp-br{
  display: none;
}


@media screen and (max-width:768px){
  .flex-rc{
    flex-direction: column;
  }
  .section-wrapper{
    padding: 50px 0;
  }
  .section-wrapper:first-of-type{
    padding-top: 80px;
  }
  .section-wrapper:last-of-type{
    padding-bottom: 100px;
  }
  .section-title{
    text-align: center;
  }
  .btn{
    margin: 0 auto;
  }
  .s-text-wrapper{
    width: 100%;
  }
/* ------------------- */
/*  header
/* ------------------- */
.nav-list{
  text-align: right;
}
.nav-item{
  margin: 0 0 4px 0;
  font-size: 1.4rem;
}
}