/*スタイルシート*/
@charset "UTF-8";

/*------------------------------
    common styles
 ------------------------------*/
html {
  font-size: 62.5%;  /* 1rem=10pxにする  */
}

body{
  margin: 0;
  padding: 0;
  color: #222;
  font-size: 16px; /* 古いブラウザ用 */
  font-size: 1.6rem;
  background-color:#fafafa;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

ul, ol, li, dl, dd, dt, form, figure {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

/*------------------------------
    container style
 ------------------------------*/

#container {
  padding: 0 .8em;
  width: 100%;
  background-color: #fafafa;
  box-sizing: border-box;
}


/*------------------------------
    contents styles
 ------------------------------*/

#contents {
  margin: 0 auto;
  width: 90%;
  line-height: 1.95;/*文字と文字の行間*/
}

p + p {
  padding-top: 4vh;
}

.vewpointChange {
  text-align: center;
}

a {
  color: #4455dd;
}

a:link {
  color: #4455dd;
}

a:visited {
  color: #0a1a2b;
}

a:hover {
  color: #a9bcf5;
  text-decoration:none;
}

h1 {
  margin-top: 1em;
  margin-bottom: 1.3em;
  padding-bottom: .5em;
  font-size: 20px;
  font-size: 2rem;
  font-weight: normal;
  color: #666;
  text-align: center;
  border-bottom: solid 1px #999;
}

/*------------------------------
    list style
 ------------------------------*/


ul{
  list-style-type: none;
}

/*------------------------------
    btn styles
 ------------------------------*/

nav{
  margin-top: 10px;
  margin-top: 1rem;
  max-width: 100%;
}


ul.in {
  width: 100%;
  margin: 2rem auto;
  display: flex;
  justify-content: space-around;
}

.btn{
  height: 60px;
  height: 6rem;
  margin: 0 2rem;
  padding: .5em 1em;
  background: #fff;
  border: solid 1px #6bb6b3;
  text-decoration: none;
  transition: .5s;
}

.btn:any-link {
  color: #6bb6b3;
}

.btn:hover {
  background: #6bb6b3;
  color: #fff;
}

.btn:active{
  color: #6bb6b3;
}

/*------------------------------
    footer style
 ------------------------------*/

.copyright{
  width: 100%;
  font-size: 14px;
  font-size: 1.4rem;/*文字は少し小さめに指定*/
  font-style: normal;/*指定をしないと文字が斜めに表示される*/
  text-align: center;/*文字をセンター合わせにする*/
  padding: 1em 0;/*文字の上に少しスペースをあける*/
}

/*------------------------------
    media queries min-768
 ------------------------------*/


@media screen and (min-width:768px) {
  

  #container{
    padding: 0;
  }

  #contents {
  width: 580px;
  line-height: 1.9;
 }

  ul.in {
  margin: 3rem auto;
 }

  .btn {
   padding: .5em 1.5em;
 }

}