/* 基本のリセットスタイル */
body, h1, h2, p {
    margin: 0;
    padding: 0;
}

/* 全体の基本スタイル */
body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    margin-bottom: 80px;
}
/**ログイン用**/
.login{
    width: 70%; /* ブラウザ幅の70% */
    max-width: 1200px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央寄せ */
    text-align: center;
}
.login input{
    text-align: right;
}

/* メニューのスタイル */
.menu {
    width: 70%; /* ブラウザ幅の70% */
    max-width: 1200px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央寄せ */
    padding: 20px;
    text-align: center;
    background-color: transparent;
}

.menu ul {
    list-style: none; /* スタイルタイプをnoneに設定 */
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px; /* ボタン間の間隔 */
}

.menu ul li {
    position: relative; /* プルダウンメニュー用 */
    flex: 1 1 calc(20% - 10px); /* ボタンの幅を自動調整し、5個のボタンが横に並ぶ */
    min-width: 50px; /* 最小幅を設定 */
}

/* 1行目のアイテムに特別なスタイルを適用 */
.menu ul li:nth-child(1) {
    flex: 1 1 100%; /* 最初のアイテムは1行全体を使用 */
}

/* リンクスタイル */
.menu ul li a {
    color: white;
    text-decoration: none;
    padding: 10px;
    background-color: #E38672;
    border: 1px solid white;
    display: block;
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: calc(0.5vw + 0.5em) !important;
    white-space: nowrap; /* 文字の折り返しを防ぐ */
}

/* ホバー時のスタイル */
.menu ul li a:hover {
    background-color: #F1CE6E;
    color: white;
}

/* プルダウンメニューのスタイル */
.menu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    transform: none;
    width: 100%; /* 親メニューと同じ幅 */
    background-color: transparent;
    border-radius: 0;
    min-width: auto;
    z-index: 1;
}

.menu ul ul li {
    width: 100%; /* サブメニューの項目も親メニューと同じ幅 */
}

.menu ul ul li a {
    padding: 10px 20px;
    font-size: calc(0.4vw + 0.4em) !important;
    white-space: nowrap; /* 文字の折り返しを防ぐ */
}

/* ホバーでプルダウンメニューを表示 */
.menu li:hover > ul {
    display: block;
}

/* ページ名のスタイル */
header {
    text-align: center;
    padding: 20px;
    background-color: #ffffff;
}

/* 本文のスタイル */
h1 {
    position: relative;
    padding: 0.25em 0;
    width: 70%; /* ブラウザ幅の70% */
    max-width: 1200px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央寄せ */
}
h1:after {
    content: "";
    display: block;
    height: 4px;
    background: -webkit-linear-gradient(to right, #E38672, #F1CE6E);
    background: linear-gradient(to right, #E38672, #F1CE6E);
    margin-top: 0.25em; /* 見出しと線の間のスペース */
}

h2 {
    padding: 0.4em 0.5em;
    color: #494949;
    background: #f4f4f4;
    border-left: 5px solid #E38672;
    border-bottom: 3px solid #d7d7d7;
    width: 90%; /* column の 90% 幅に設定 */
    margin: 0 auto; /* 中央寄せ */
}

h3 {
    padding: 0.5em;
    color: #494949;
    background: #fff0de;
    border-left: 5px solid #F1CE6E;
    width: 90%; /* column の 90% 幅に設定 */
    margin: 10px auto; /* 中央寄せ */
}

h4 {
    padding: 0.5em;/*文字周りの余白*/
    color: #010101;/*文字色*/
    background: #fff0de;/*背景色*/
    border-bottom: solid 3px #E38672;/*下線*/
}

.column {
    width: 70%;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0;
}

.subheading {
    font-size: 1.5em;
    margin: 20px auto;
}

.content {
    width: 90%; /* column の 90% 幅に設定 */
    margin: 0 auto; /* 中央寄せ */
    padding: 15px;
    font-size: 1.2em;
    color: #333;
}

.content a:hover::after {
    transform: scaleX(1);
}

mark {
    background: linear-gradient(transparent 0%, rgb(255, 248, 205) 0%);
}

/* テキストリンクのスタイル */
.textlink a {
    position: relative;
    color: #333;
    text-decoration: none;
}

.textlink a:hover {
    color: #E38672;
}

.textlink01 a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #E38672;
    transform: scaleX(0);
    transition: transform 0.3s;
}

.textlink01 a:hover::after {
    transform: scaleX(1);
}

/* 画像表示用のスタイル */
.image-container {
    width: 70%; /* ブラウザ幅の70% */
    max-width: 1200px;
    margin: 0 auto;
}

.image-item {
    width: 100%; /* コンテナの幅に合わせる */
    margin-bottom: 20px;
    background-color: #ffffff;
    text-align: center;
}

.image-item img {
    max-width: 100%; /* コンテナの幅に合わせる */
    height: auto; /* アスペクト比を維持 */
    display: block;
    margin: 0 auto;
}

/* タイトルを動画コンテナの外に配置 */
.video-wrapper {
    width: 70%; /* ブラウザ幅の70% */
    max-width: 1200px; /* 最大幅を設定 */
    margin: 20px auto;
}

.video-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
    text-align: left;
}

/* 動画のスタイル */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 のアスペクト比 */
    height: 0;
    width: 100%; /* コンテナ幅を100%に設定 */
}

.video-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.video-item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

/* PDF表示用のスタイル */
.pdf-container {
    width: 70%; /* ブラウザ幅の70% */
    max-width: 1200px; /* 最大幅を設定 */
    margin: 20px auto;
}

.pdf-item {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.pdf-item iframe {
    width: 100%;
    height: 720px; /* 必要に応じて調整 */
    border: none;
    border-radius: 8px;
}

.pdf-title {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #333;
}

/* リンク表示用のスタイル */
.link-container {
    width: 70%; /* ブラウザ幅の70% */
    max-width: 1200px; /* 最大幅を設定 */
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.link-item {
    flex: 1 1 200px;
    background-color: #E38672;
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.link-item:hover {
    background-color: #F1CE6E;
    transform: translateY(-3px);
}

.link-item:active {
    background-color: #F1CE6E;
}

#calendar {
    width: 70%;
    max-width: 1200px;
    margin: 0 auto; /* 中央揃え */
}
table {
    border-collapse: collapse;
    width: 100%; /* テーブル幅を親要素に合わせる */
    margin: 20px 0;
}
th, td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
}
.today {
    background-color: #ffeb3b; /* 明るい背景色 */
}
.saturday {
    background-color: #bbdefb; /* 青色 */
}
.sunday, .holiday {
    background-color: #ffcccb; /* 赤色 */
}

/* フッターのスタイル */
footer {
    position: fixed;
    bottom: 0;
    width: 70%; /* ブラウザ幅の70% */
    max-width: 1200px; /* 最大幅を設定 */
    left: 50%;
    transform: translateX(-50%); /* 水平方向に中央に配置 */
    text-align: center;
    padding: 20px;
    background-color: #E38672;
    box-sizing: border-box;
}

footer a {
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

footer a:hover {
    text-decoration: underline;
}