@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;600&family=Sawarabi+Mincho&display=swap');

body{
    background-color: #4a257a;
    color: #ffffff;
    font-family: 'Sawarabi Mincho', serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-size: 16px;
}

  
  /* モバイルデバイス用のスタイル */
  @media (max-width: 768px) {
    body {
        padding: 10px;
        font-size: 14px;
    }
  
    footer {
        position: relative; /* モバイルでは固定位置を解除する */
        width: auto; /* 自動で幅を調整 */
        padding: 5px 10px; /* モバイル用の余白 */
    }
  
    .update-date {
        font-size: 12px; /* モバイル用のフォントサイズ */
    }
  }
  
    /**
     * Render the `main` element consistently in IE.
     */
    
    main {
      display: block;
    }
  
  .container {
      display: flex;
      flex-direction: column;
  }

body, .container {
    white-space: normal; /* テキストが折り返されるように設定 */
}

img {
    max-width: 100%; /* 画像がコンテナより大きくならないようにする */
    height: auto; /* 画像の高さを自動調整してアスペクト比を保持 */
    display: block; /* 画像が常に表示されるようにblockに設定 */
}
  
  @media (min-width: 768px) {
      .container {
          flex-direction: row;
      }
  }
a:link{color: #ffffff;}
a:visited{color: #ffffff;}

div.top{
    margin: 0 auto;
    max-width: 1200px;
    border-bottom: solid 1px #ffffff;
}

a:link, a:visited {
    color: #ffffff; /* リンクの色を白に統一 */
}

footer{
    margin: 0 auto;
    margin-top: 20px;
    max-width: 1200px;
    padding-top: 15px;
    text-align: center;
    border-top: solid 1px #ffffff;
}
@media screen and (max-width:480px) {
    div.top, footer {
        margin: 10px 3%; /* マージンを統一 */
    }
}

@media (min-width: 768px) {
  .hero {
    min-height: calc(100vh - 200px); /* 余白分を調整 */
    display: flex;
    align-items: center;   /* 縦中央 */
    justify-content: center; /* 横中央 */
  }
  .hero img {
    max-width: 600px; /* 好みでサイズ制御 */
    width: 100%;
    height: auto;
  }
}

.container {
    max-width: 800px; /* 適切な最大幅を設定 */
    margin: 0 auto; /* 中央寄せ */
    padding: 5px; /* 余白を付ける */
}

/* ヘッダー、メインコンテンツ、フッターのスタイルを統一 */
.top,footer {
    width: 100%; /* 幅を100%に設定 */
    text-align: center; /* 中央揃え */
}

ol li {
    padding: 20px; /* テキストの左に20pxのマージンを追加 */
}

#fish-icon {
    position: fixed;
    font-size: 30px; /* アイコンのサイズ設定 */
}

#tooltip {
    position: fixed;
    bottom:300px; /* 魚のアイコンのすぐ上 */
    right: 500px;
    padding: 5px 10px;
    background: transparent;
    border: 2px solid white;
    color: white;
    border-radius: 5px;
    display: none; /* 初期状態では非表示 */
    width: auto;
    min-width: 100px;
    z-index: 1000; /* 必要に応じて調整 */
    opacity: 0; /* 初期状態の透明度 */
    transition: opacity 1.0s ease-in-out; /* 透明度の変化のアニメーション */
}

#tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 20%; /* 吹き出しのしっぽの位置を調整 */
    margin-left: -5px;
    border-width: 10px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

#tooltip.show {
    display: block;
    opacity: 1; /* 完全に表示されるときの透明度 */
}

.topcontents a:hover + #tooltip {
    display: block;
}

#page-content {
    opacity: 0; /* 初期状態は透明 */
    transition: opacity 2s ease-in-out; /* 透明度の変化をアニメーション化 */
}