@charset "UTF-8";
body {
  width: 100%;
  background-color: #F7F4E3;
}

#container {
  max-width: 800px;
  margin: auto;
  width: 100%;
  border: 1px solid #a6a5a5;
  text-align: center;
}
#container #page_ttl h1 {
  display: inline-block;
  max-width: 300px;
  width: 95%;
  margin: 2em auto;
  padding-bottom: 0;
  line-height: 0;
  overflow: hidden;
  border: 1px solid #2f2121;
  border-radius: 20px;
}
#container #page_ttl h1 img {
  width: 100%;
  height: 100%;
  padding: 0px;
}
#container .sakura_kaika .City {
  font-size: 2em;
  color: #ab0606;
}
#container .sakura_kaika .link {
  margin-bottom: 1em;
}
#container .sakura_kaika .link ul {
  text-align: center;
}
#container .sakura_kaika .link ul li {
  display: inline-block;
  overflow: hidden;
  margin: 1px 1px 1px 5px;
  text-align: center;
  font-size: 1em;
  border: 1px solid #880202;
  border-radius: 10px;
}
#container .sakura_kaika .link ul li a {
  display: block;
  padding: 3px 6px;
  text-shadow: 0.2px 0.2px 0px #000;
}
#container .sakura_kaika .link ul li a:hover {
  background-color: #f2c7c7;
}
#container .sakura_kaika .link ul li .九州 {
  background-color: #def8ed;
}
#container .sakura_kaika img {
  width: 95%;
}
#container dl {
  width: 500px;
  width: 95%;
  margin: auto;
  text-align: left;
}
#container dl dt {
  font-weight: bold;
}
#container dl dd {
  margin-bottom: 1rem;
  line-height: 1.4;
}
#container .com {
  width: 98%;
  padding-top: 0.5em;
  margin: 2em auto;
  border: 1px solid #7e7d7d;
  border-radius: 30px;
}
#container .com h2 {
  color: #920707;
}
#container .com figure {
  margin: 2em auto;
  width: 95%;
}
#container .com figure img {
  width: 100%;
}
#container .com figure figcaption {
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;
  line-height: 1.2;
}
#container .com figure figcaption span {
  font-size: 0.8em;
  font-weight: normal;
}
#container .com ul {
  max-width: 500px;
  width: 95%;
  margin: 0 auto;
}
#container .com ul {
  display: inline-block;
  color: #f00;
  max-width: 95%;
  text-align: left;
}
#container .com ul .ttl {
  font-weight: bold;
  font-size: 1.2em;
}
#container .com ul li {
  margin-bottom: 0.4em;
}

@media screen and (max-width: 480px) {
  html {
    font-size: 62.5%;
  }
}
@media screen and (min-width: 481px) and (max-width: 766px) {
  html {
    font-size: 62.5%;
  }
}
@media screen and (min-width: 767px) {
  html {
    font-size: 62.5%;
  }
}