@charset "UTF-8";
body {
  width: 96%;
  background: rgb(185, 216, 194);
}
@media screen and (min-width: 500px) {
  body {
    width: 1100px;
    margin: auto;
  }
}
@media screen and (max-width: 900px) {
  body {
    width: 900px;
    margin: auto;
  }
}

h1 {
  color: rgb(103, 99, 66);
}

#top{
  margin-top: 100px;
}

/*header*/
header {
  position: fixed; /* ヘッダーの固定 */
  top: 0px; /* 位置(上0px) */
  left: 0px; /* 位置(右0px) */
  width: 100%; /* 横幅100%　*/
  height: 75px; /* 縦幅140px */
  background: rgba(0, 217, 255, 0.4);
}
header ul {
  display: flex;
  flex-wrap: wrap;
}
header li {
  list-style: none;
  padding-left: 3px;
  padding-right: 3px;
  margin-left: 2px;
  margin-right: 2px;
}

@media screen and (min-width: 500px) {
  header li {
    font-size: 20px;
  }
}

/*main*/
@media screen and (max-width: 499px) {
  .main {
    margin-top: 75px;
    background: url(images/main_small.JPG) no-repeat;
    background-size: cover;
    height: 800px;
  }
  .main h1 {
    color: rgb(231, 244, 255);
  }
  .main h2 {
    color: rgb(242, 255, 235);
  }
}
@media screen and (min-width: 500px) {
  .main {
    margin-top: 75px;
    height: 1000px;
    width: 1060px;
    text-align: right;
    background: url(images/main.jpg) no-repeat;
  }
}

/*intro*/
.intro h1 {
  text-align: center;
}

/*intro*/
#intro img {
  width: 360px;
  height: 400px;
  margin-right: 30px;
}

#intro p {
  line-height: 1.8;
}

@media screen and (min-width: 500px) {
  .intro {
    overflow: hidden;
  }
  .intro img {
    float: left;
  }
}

/*history*/
#history dl {
  width: 100%;
  background: #b0b8dde1;
  border-radius: 10px;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  font-size: 20px;
}
#history dt {
  /* float: left; */
  margin-bottom: 10px;
}
.history dd {
  margin-left: 200px;
  margin-bottom: 10px;
}

/*activity*/

#activity {
  overflow: hidden;
}

#activity h3 {
  font-weight: normal;
  font-weight: bold;
}

#activity p {
  color: rgb(91, 96, 102);
}

#activity img {
  width: 510px;
  height: 288px;
  float: right;
}

/*hobby*/
#hobby img {
  width: 336px;
  height: 434px;
  margin-right: 30px;
}

/*twitter*/
.twitter {
  text-align: center;
}

/*countdown*/
#countdown {
  text-align: center;
}

/*contact*/

.contact {
  text-align: center;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}
iframe {
  background-color: rgba(255, 255, 255, 0.707);
}

.message {
  font-size: 25px;
}

/*my_mes*/
#my_mes {
  text-align: center;
  margin-top: 30px;
  height: 300px;
}