@charset "UTF-8";

html {
  font-size: 100%;
}

body {
  color: rgb(90, 89, 89);
  font-size: 1rem;
  width: 100%;
  min-width: 320px;
}

img {
  max-width: 100%;
}

li {
  list-style: none;
}

a {
  color: rgb(90, 89, 89);
  text-decoration: none;
}

p {
  text-align: center;
}

/*--#header-----------------*/
#header {
  width: 100%;
}

.header__page-title {
  text-align: center;
  margin-top: 50px;
}

.header__message {
  margin: 30px 20px 0 20px;
  text-align: left;
  display: inline-block;
}

/*--#copy_coding-----------------*/
#copy_coding {
  margin-top: 50px;
  margin-bottom: 50px;
}

.copy_coding__list {
  padding: 0 30px;
}

.copy_coding__list li {
  display: inline-block;
  font-size: 0.925rem;
  font-weight: 600;
  margin: 10px 10px;
  padding: 5px;
  border-radius: 5px;
}

.copy_coding__list__introduction {
  background-color: rgb(230, 215, 42, 0.2);
}

.copy_coding__list__beginner {
  background-color: rgb(91, 200, 172, 0.2);
}

.copy_coding__list__intermediate {
  background-color: rgb(241, 141, 158, 0.2);
}

.copy_coding__list__advanced {
  background-color: rgb(163, 193, 255, 0.2);
}

.copy_coding__list__introduction_1:hover,
.copy_coding__list__introduction_2:hover,
.copy_coding__list__introduction_3:hover,
.copy_coding__list__introduction_4:hover,
.copy_coding__list__introduction_5:hover,
.copy_coding__list__introduction_6:hover,
.copy_coding__list__beginner_1:hover,
.copy_coding__list__beginner_2:hover,
.copy_coding__list__beginner_3:hover,
.copy_coding__list__beginner_4:hover,
.copy_coding__list__beginner_5:hover,
.copy_coding__list__intermediate_1:hover,
.copy_coding__list__intermediate_2:hover,
.copy_coding__list__intermediate_3:hover,
.copy_coding__list__intermediate_4:hover,
.copy_coding__list__intermediate_5:hover,
.copy_coding__list__advanced_1:hover,
.copy_coding__list__advanced_2:hover {
  color: black;
}

/*--#footer-----------------*/
#footer {
  margin-bottom: 20px;
}

#siteinfo {
  margin-bottom: 20px;
}

#siteinfo ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  line-height: 1.5;
}

.siteinfo__list {
  display: inline;
}

#siteinfo a {
  color: #1a0dab;
}

#siteinfo a:hover {
  text-decoration: underline;
}

#siteinfo span {
  opacity: 0.5;
  padding: 0 0.5rem;
}

 /* --レスポンシブ 576px--------------- */
@media screen and (max-width: 576px) {
  .header__page-title {
    margin-top: 20px;
  }
  
  .header__message {
    margin: 20px 10px 0 10px;
    font-size: 0.8rem;
    line-height: 1.5;
  }

  #copy_coding {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .copy_coding__list {
    padding: 0 10px;
    line-height: 1.5;
  }

    .siteinfo__list a {
    font-size: 0.85rem;
  }
  .footer__copyright {
    font-size: 0.85rem;
  }
}