@charset "utf-8";
*{margin: 0; padding: 0;list-style-type: none;line-height: 1.8rem;}
body{font-family: メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif; background-color: #fffffa; color:#222;}
table,td,th {border-collapse: collapse;border:1px solid #ccc;}
th {text-align: left;}
th, td {padding:var(--mg-margin10);}

:root {
  --mg-margin10: 10px;
  --mg-margin15: 15px;
  --mg-margin30: 30px;
  --mg-margin45: 45px;
  --mg-margin60: 60px;
  --mg-margin90: 90px;
}

h1{font-size: 2.8rem;line-height: 2.8rem;}
h2{font-size: 1.6rem; border-bottom: 1px solid #999; margin-bottom:var(--mg-margin10); }
h3{font-size: 1.4rem;}
h4{font-size: 1.2rem;}
h5,h6,p{font-size: 1.0rem;}
figcaption, .article_flex_box p, p#line_info{font-size: 0.8rem;}
a{text-decoration:none; border-bottom: 1px dotted #ccc; color: #333;}
a:hover{opacity: 0.9;text-shadow: 1px 1px #ccc;}
p.aster{color: #999;}

.col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9{width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;}

aside img, main img,table{width: 100%;}



footer{
  padding-top: var(--mg-margin30);
}

footer ul{
  display: flex;
  justify-content: center;
  margin-bottom:  var(--mg-margin30);
}



footer span#copyright{
  margin: 0 0 var(--mg-margin30) 0;
  display: block;
  text-align: center;
}


#page_top a{
  display: block;
  width: 45px;
  height: 45px;
  position: fixed;
  right: 10px;
  bottom: 10px;
  background: #ccc;
  opacity: 0.6;
  border-radius: 3px;
  text-decoration: none;
}

#page_top a::before{
  content: '▲';
  font-size: 20px;
  color: #fff;
  position: absolute;
  top: 8px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  line-height: 1.8rem;
}

#page_top a:hover{
  opacity: 0.8;
}

/*-----------------------------------------------------------------for mobile------*/
@media screen and (max-width: 768px) {
  .container{
  }

  *{line-height: 1.2rem;}
  h1{font-size: 1.8rem;line-height: 1.4rem;}
  h2{font-size: 1.4rem;}
  h3,h4,h5,h6,dt,dd,p,li,span,figcaption,table{font-size: 1rem; line-height: 1.8rem;}

  .lr_pad10{padding: 0 var(--mg-margin15);}

  [class*="col-"], header, footer, .article_flex_box img, main img, aside img {width: 100%;}

  h1{
    margin: var(--mg-margin30) 0 var(--mg-margin30) 0;
  }

  ul{
    margin-bottom: var(--mg-margin30) ;
  }

  li img{
    width: 100%;
  }


  footer{
    margin-bottom: var(--mg-margin45) ;
    text-align: center;
  }

}
/*-----/for mobile------*/


/*-------------------------------------------------------for PC or Tablets------*/
@media screen and (min-width: 769px){
  .container{max-width: 1024px;margin: 0 auto;
  }

  h1{
    margin: var(--mg-margin60) 0 var(--mg-margin90) 0;
  }

  ul{
    margin-bottom: var(--mg-margin45) ;
  }

  li img{
    width: 20%;
  }


  header{
    max-width: 1024px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-wrap:wrap;
  }

  .boxes{
    margin-right:  var(--mg-margin30) ;
  }

  footer{
    margin-bottom: var(--mg-margin90) ;
  }

}

/*-----/for PC or Tablets------*/