@charset "UTF-8";
:root {
  --base-color: #202020;
  --key-color: #DCC638;
  --housing-color: rgba(33, 39, 83);
  --default-gap: 15px;
  --section-width: 1080px;
  --section-inner: calc(var(--section-width) - (var(--default-gap) * 2));
  --section-padding-horizontal: calc(50% - (var(--section-width) / 2));
  --section-padding-vertical: 100px;
}
.varticalcenter {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.fontsize_base {
  font-size: 14px;
  font-size: 1.4rem;
}
.fontsize_h3 {
  font-size: 23px;
  font-size: 2.3rem;
}
.fontsize_h2 {
  font-size: 32px;
  font-size: 3.2rem;
}
.fontsize_h1 {
  font-size: 45px;
  font-size: 4.5rem;
}
@media (min-width: 768px) {
  .keep_all {
    word-break: keep-all;
  }
}
h2 {
  margin: 30px 0;
  font-family: 'Sawarabi Mincho', serif;
  font-size: 24px;
  font-size: 2.4rem;
}
h3 {
  margin: 30px 0 15px 0;
  font-family: 'Sawarabi Mincho', serif;
  font-size: 20px;
  font-size: 2rem;
}
h4 {
  font-family: 'Sawarabi Mincho', serif;
  font-size: 16px;
  font-size: 1.6rem;
}
p {
  font-family: 'Sawarabi Mincho', serif;
  font-size: 14px;
  font-size: 1.4rem;
}
.lead {
  padding: 15px 30px;
}
.lead h3 {
  margin: 0 0 15px 0;
  font-size: 16px;
  font-size: 1.6rem;
}
.lead p:last-child {
  margin-bottom: 0;
}
.content .photo {
  margin-bottom: 15px;
}
.content .photo img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 767px) {
  .content .photo img {
    width: 100%;
  }
}
.howToEdit .tutorial {
  margin: 15px 0;
  padding: 7.5px 15px;
  background-color: #333;
  border: 1px solid white;
}
.howToEdit .tutorial h3 {
  margin-top: 10px;
  font-family: sans-serif;
  border-bottom: 1px solid #DCC638;
}
h2 {
  margin-top: 60px;
}