@charset "UTF-8";
:root {
  color-scheme: light;
  --bg: #FFF;
  --accent-bg: #FFF;
  --text: #333;
  --text-light: #333;
  --accent: #ffb300;
  --code: #f06292;
  --preformatted: #ccc;
  --disabled: #111; }

img, video {
  opacity: 1 !important; }

/* OSの設定がダークモード時のスタイル */
@media (prefers-color-scheme: dark) {
  :root {
    --cBackground: #FFF;
    --cText: #333; } }
body {
  display: contents;
  font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif" !important;
  color: #333;
  background-color: #FFF; }
  body header {
    margin: 0 auto;
    padding: 2rem 3% 3rem 3%;
    width: 100%;
    max-width: 980px;
    height: auto;
    text-align: left;
    border: 0;
    background-color: #FFF;
    display: grid;
    grid-template-columns: 1fr 20px;
    grid-template-rows: 1fr; }
    body header h1 {
      margin: 0;
      padding: 0;
      font-family: 'Arial', serif;
      font-size: 1.2rem;
      font-weight: normal;
      color: #000;
      letter-spacing: 0.05rem;
      line-height: 1.75rem; }
    body header a, body header a:visited {
      font-family: 'Font Awesome 6 Free';
      color: #000; }
    body header .sp {
      display: none; }
      @media screen and (max-width: 480px) {
        body header .sp {
          display: block; } }
    body header ul {
      grid-row: 3 / 4;
      grid-column: 2 / 3;
      text-align: right;
      list-style: none; }
      body header ul li a.btn {
        padding: 0.75rem 1.25rem;
        border: 1px solid #000;
        color: #000;
        font-size: 1rem;
        text-decoration: none;
        font-weight: bold; }
  body footer {
    margin: 0 auto;
    padding: 2rem 3%;
    width: 100%;
    max-width: 980px;
    height: auto;
    border: 0; }
    body footer p {
      margin: 0;
      padding: 1rem 0;
      text-align: right;
      display: block;
      color: #000; }
  body img {
    border-radius: 0; }

main {
  margin: 0 auto;
  padding: 2rem 3%;
  width: 100%;
  max-width: 980px;
  height: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr; }
  main section {
    margin: 0 0 2rem 0;
    padding: 0;
    width: 100%;
    height: auto;
    border: 0; }
    main section h2 {
      font-size: 1.2rem; }
    main section a, main section a:visited {
      color: #000;
      text-decoration: none; }
    main section a:hover {
      text-decoration: underline; }
    main section#tokyo strong {
      display: block;
      font-family: 'Arial', serif;
      font-weight: 900;
      text-align: left; }
    main section#kyoto strong {
      display: block;
      font-family: 'Arial', serif;
      font-weight: 900;
      text-align: right; }
    main section#kyoto img {
      display: block;
      margin: 0 auto; }