/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0;
  padding: 0;
  background: #f7f6f5;
  color: #2f2a25;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 0.90em;
  line-height: 1.5;
  text-align: center;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 18px;
}

header {
  text-align: center;
  margin: 32px 0 24px;
}

h1 {
  font-size: 2rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.2em;
}

.header-image {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 0 auto 18px;
}

.subtitle {
  font-size: 0.9rem;
  color: #6d6358;
}

.stone-photo {
  width: 75%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 20px auto;
}

.yau-photo {
  width: 70%;
  max-width: 400px;
  height: auto;
  display: block;
  margin: 20px auto;
}

a {
  text-decoration: none;
  color: #D4A574;
}

h2 {
  font-size: 1rem;
}

.small-note {
  margin-top: 32px;
  color: #a7a9ad;
  font-size: 0.82rem;
  text-align: center;
  letter-spacing: 0.04em;
}

.honbun {
  color: #333333;
  font-size: 0.90em;
  max-width: 400px;
  width: 70%;
  margin: 0 auto;
}

.navi {
  font-size: 0.75em;
  letter-spacing: 0.15em;
  margin: 24px auto;
  line-height: 2.2;
}

.navi a {
  color: #937b6a;
  text-decoration: none;
  border-bottom: 1px dotted #c8b8a9;
  padding-bottom: 1px;
}

.bg-yoru {
  background: #1a1520;
  color: #e0d8d0;
}

.cave-text {
  max-width: 480px;
  width: 85%;
  margin: 0 auto;
  text-align: left;
}

.text-block {
  max-width: 400px;
  width: 70%;
  margin: 0 auto;
  text-align: left;
}

figure {
  margin: 20px auto;
  text-align: center;
}

figcaption {
  margin-top: 4px;
  font-size: 0.8em;
  color: #999999;
}

figure img {
  display: block;
  margin-bottom: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 8px;
}