/* デフォルトの余白をリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HTMLとbodyを全画面の高さにする */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ヘッダー */
.header-bar {
    background-color: #EDE0D0;
    padding: 20px;
    display: flex;
    align-items: center;
}

.logo {
    max-width: 90px;
    height: auto;
}

/* タイトル */
.title {
    text-align: center;
    padding: 45px 0; /* 上下に30pxの余白を追加 */
    border-bottom: 1px solid #000; /* 下に黒い線を引く */
}

.subtitle {
    margin-top: 50px;
	margin-bottom: 15px;
}

.spaced {
	margin-bottom: 15px;
}

/* 本文エリアの中央配置 */
.content-wrapper {
    display: flex;
    justify-content: center;
    flex: 1;
    width: 100%;
}

.content {
    width: 960px;
    margin: 20px auto;
    padding: 20px;
}

/* 表のスタイル */
.styled-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.styled-table th, .styled-table td {
    border: 1px solid #000;
    padding: 10px;
    text-align: left;
}

.styled-table th {
    width: 33%; /* 各カラムを均等に分ける場合 */
    background-color: #EDE0D0;
    color: #000;
    padding: 10px;
    text-align: left;
}

/* フッターの固定 */
.footer-bar {
    background-color: #000;
    padding: 20px;
    text-align: center;
    color: #fff;
    bottom: 0;
    width: 100%;
	margin-top:50px;
}

.footer-bar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.footer-bar nav ul li {
    display: inline;
    flex: 1 1 150px; /* 最小150px、必要に応じて折り返す */
    text-align: center;
}

.footer-bar nav ul li a {
    color: #fff;
    text-decoration: none;
    text-transform: lowercase;
}

.footer-bar p {
    margin-top: 20px;
    font-size: 12px;
}

/* ヘッダーの帯を110%の幅に */
.header-bar.expanded {
    width: 100%;
    background-color: #EDE0D0;
    padding: 20px;
    display: flex;
    align-items: center;
}

/* サブタイトルと次の項目の間に70pxのスペース */
.spaced {
    margin-top: 70px;
}

/* リストの階層スタイル */
ol {
    padding-left: 20px;
}

ol ol {
    padding-left: 20px;
}

ol ol ol {
    padding-left: 20px;
}

ol, ul {
    line-height: 2; /* 1.5 〜 2.0 くらいで調整可能 */
}

a {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

@media screen and (max-width: 599px) {
  video {
    width: 100%;
    height: auto;
    display: block;
  }
}