/* ヘッダー全体のスタイル */
.wrapper{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body{
  padding: 0;
  margin: 0;
}

.header{
  width: 100%;
  border-bottom: 1px solid gray;
}

.logo-text {
  padding: 5px 10px;
  background-color: #fff; /* 背景色を白に設定 */
  margin-left: 8%;
}

.logo-text a {
  display: flex; 
  align-items: center;
  text-decoration: none;
}

/* ロゴのスタイル */
.logo {
  width: 60px; /* ロゴ画像の幅を設定 */
  height: auto; /* アスペクト比を維持 */
  margin-right: 0px; /* ロゴとテキストの間にスペースを追加 */
}

.header-text{
  font-family: "Yu Gothic", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-size: 12px; /* サブテキストのフォントサイズ */
  text-align: left; /* テキストを左揃え */
  color: #5b2525; /* 濃いグレーの文字色 */
}

/* コンテンツ部分のスタイル */
main {
  flex: 1; /* 残りのスペースを埋める */
  padding: 20px; /* コンテンツ部分に余白を追加 */
}

footer{
  width: 100%; /* フッターを画面幅いっぱいに設定 */
  text-align: center; /* テキストを中央揃え */
  padding: 40px 0; /* 上下の余白を追加 */
  font-family: Arial, sans-serif; /* フォントを設定 */
  font-size: 13px; /* フォントサイズを調整 */
  color: #333; /* 文字色を濃いグレーに設定 */
  border-top: 2px solid navy; /* 上部に薄い線を追加 */
  box-sizing: border-box; /* パディングを含めた幅を計算 */
  margin-top: auto;
}