html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: "";
  content: none; }

q:before, q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@font-face {
  font-family: 'akkurat';
  src: url("Akkurat-Mono.ttf"); }

@font-face {
  font-family: 'amaticSC';
  src: url("AmaticSC-Regular.ttf"); }

@font-face {
  font-family: 'amaticSC';
  src: url("AmaticSC-Bold.ttf");
  font-weight: bold; }

@font-face {
  font-family: 'openSans';
  src: url("OpenSans-Light.ttf"); }

@font-face {
  font-family: 'openSans';
  src: url("OpenSans-Regular.ttf");
  font-weight: bold; }

@font-face {
  font-family: 'openSans';
  src: url("OpenSans-LightItalic.ttf");
  font-style: italic; }

.bg-scrolling-bg {
  min-height: 100%; }

.bg-versailles {
  background-image: url("../img/versailles.jpg"); }

.bg-hightide {
  background-image: url("../img/miyajima/hightide.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  padding-top: 66.71875%;
  position: relative; }
  @media only screen and (min-aspect-ratio: 1920 / 1281) {
    .bg-hightide {
      background-size: cover; } }
  .bg-hightide div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    background: rgba(0, 0, 0, 0.29);
    color: white; }
    .bg-hightide div h1 {
      padding-left: 25%; }

.bg-lowtide {
  background-image: url("../img/miyajima/lowtide.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  padding-top: 75%;
  position: relative; }
  @media only screen and (min-aspect-ratio: 1920 / 1440) {
    .bg-lowtide {
      background-size: cover; } }
  .bg-lowtide div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    background: rgba(0, 0, 0, 0.29);
    color: white; }
    .bg-lowtide div h1 {
      padding-left: 25%; }

.bg-shibuya {
  background-image: url("../img/shibuya.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  position: relative;
  background-attachment: fixed; }
  @media only screen and (min-aspect-ratio: 1920 / 1080) {
    .bg-shibuya {
      background-size: cover; } }
  .bg-shibuya div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    color: white;
    box-shadow: 0 0 5px gray; }
    .bg-shibuya div h1 {
      padding-left: 25%; }

.bg-markvi {
  background-image: url("../img/mark6.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  padding-top: 56.35417%;
  position: relative; }
  @media only screen and (min-aspect-ratio: 1920 / 1082) {
    .bg-markvi {
      background-size: cover; } }
  .bg-markvi div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    box-shadow: 0 0 5px gray;
    background: rgba(255, 255, 255, 0.65); }
    .bg-markvi div h1 {
      padding-left: 25%; }

.bg-bridge {
  background-image: url("../img/bridge.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  padding-top: 62.5%;
  position: relative; }
  @media only screen and (min-aspect-ratio: 1920 / 1200) {
    .bg-bridge {
      background-size: cover; } }
  .bg-bridge div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    background: rgba(0, 0, 0, 0.29);
    color: white; }
    .bg-bridge div h1 {
      padding-left: 25%; }

.bg-meiji {
  background-image: url("../img/meiji.jpg");
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  height: 0;
  padding-top: 50.78125%;
  position: relative; }
  @media only screen and (min-aspect-ratio: 1920 / 975) {
    .bg-meiji {
      background-size: cover; } }
  .bg-meiji div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 5px;
    background: rgba(0, 0, 0, 0.2);
    color: white; }
    .bg-meiji div h1 {
      padding-left: 25%; }

img, embed, object, video {
  max-width: 100%; }

a {
  text-decoration: none;
  color: #7F7F7F;
  target-new: tab; }
  a:hover {
    color: #000000; }

body, html, main {
  height: 100%; }

body {
  line-height: 1.6875;
  font-family: 'openSans'; }
  @media only screen and (max-width: 700px), only screen and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
    body {
      font-size: 90%; } }
  @media only screen and (min-width: 701px) and (max-width: 1199px) {
    body {
      font-size: 100%; } }
  @media only screen and (min-width: 1200px) {
    body {
      font-size: 120%; } }

h1, h2, h3, h4, h5, h6 {
  font-family: 'amaticSC'; }

h1 {
  font-size: 210%; }
  @media only screen and (max-width: 700px), only screen and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
    h1 {
      font-size: 450%; } }

@media only screen and (max-width: 700px), only screen and (max-device-width: 667px) and (-webkit-device-pixel-ratio: 2) {
  h2 {
    font-size: 160%; } }

@media only screen and (min-width: 701px) and (max-width: 1199px) {
  h2 {
    font-size: 170%; } }

@media only screen and (min-width: 1200px) {
  h2 {
    font-size: 190%; } }

p {
  margin: 0 auto; }

p:first-child ~ p, .p-img-right {
  padding-top: 3%; }

.content {
  padding-top: 5%;
  padding-bottom: 7%;
  padding-left: 10%;
  padding-right: 10%; }

i {
  font-style: italic; }

.p-img-right img {
  float: right;
  width: 38.2%;
  max-width: 200px;
  padding-left: 3%;
  padding-bottom: 5px;
  padding-top: 0; }