@charset "UTF-8";

@media only screen and (max-width: 600px) {
    input[type="date"] {
      width: 100%; /* 幅を100%に調整 */
      box-sizing: border-box; /* ボーダーボックスモデルを使用してパディングを含む幅に設定 */
      /* その他のスタイル調整が必要な場合はここに追加 */
    }
}

body {
    font-family: "Hiragino Kaku Gothic Pro", "Meiryo",sans-serif;
    font-size: 15px;
    border-top: 10px solid #79a1b1 !important;
}
a {
    text-decoration: none;
    color: #333;
}
.logo {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 30px;
}
.logo img {
    display: inline-block;
    margin-bottom: 5px;
}
.header {
    width: 100%;
    margin: 0 auto;
    background-color: #eee;
    text-align: center; /* 中央寄せにする */
    padding: 20px 0; /* 上下の余白を追加 */
}
.header p {
    font-size: 22px; /* ヘッダー内の段落の文字サイズを大きくする */
    color: #333; /* 文字の色を黒に変更 */
    line-height: 1.5; /* 行の高さを調整 */
}
.header a {
    color: #0066cc; /* リンクの文字色を青に変更 */
    text-decoration: underline; /* リンクに下線を追加 */
}
.header ul {
    display: flex;
    margin-left: 300px;
}
.header ul li {
    width: 200px;
    text-align: center;
    border-right: 1px solid #ddd;
}
.header ul li:first-child {
    border-left: 1px solid #ddd;
}
.header ul li a{
    display: block;
}

.calendar-container {
    width: 600px; /* カレンダー全体の幅を大きくする */
    margin: 0 auto;
    border-radius: 5px;
    background: #f6f5f4;
    color: #1a1a1a;
}
h1 {
    height: 80px;
    line-height: 80px;
    text-align: center;
    font-size: 30px; /* カレンダーのタイトルの文字サイズを大きくする */
    margin: 0;
}
.calendar {
    padding: 0 30px 30px 30px;
}
table {
    width: 100%;
}
th, td {
    text-align: center;
    padding: 15px; /* セル内のパディングを大きくする */
}
th {
    font-weight: normal;
    font-size: 18px; /* ヘッダーの文字サイズを大きくする */
}
td {
    font-weight: bold;
    font-size: 20px; /* 日付の文字サイズを大きくする */
}
.day *:first-child {
    color: #ff838b;
}
.day *:last-child {
    color: #6fb5ff;
}
.btn-submit{
    display: block;
    padding: 7px 25px;
    border-radius: 7px;
    border: none;
    border-bottom: 4px solid #1d7dcc;
    background-color: #2196f3;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    appearance: none;
}
.btn-submit:active {
    margin-top: 3px;
    background-color: #309bf2;
    border-bottom: 2px solid #006366;
}

.btn-flat-border{
    display: block;
    padding: 7px 25px;
    border-radius: 7px;
    border: none;
    border-bottom: 4px solid #5dc288;
    background-color: #84c98b;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    appearance: none;
}
.btn-flat-border:active {
    margin-top: 3px;
    background-color: #309bf2;
    border-bottom: 2px solid #006366;
}

input[type="date"],
input.btn-submit {
  display: inline-block; /* 横並びに配置 */
  margin-right: 10px; /* 適切なマージンを追加 */
}
input[type="date"] {
    padding: 8px; /* サイズを調整 */
    border: 1px solid #ccc; /* ボーダーのスタイル */
    border-radius: 5px; /* 角丸にする */
    font-size: 16px; /* フォントサイズの調整 */
    /* その他のスタイル調整が必要な場合はここに追加 */
}
.container {
    margin-top: 10px;
    display: flex;
    align-items: center; /* 垂直方向の中央寄せ */
    justify-content: center; /* 水平方向の中央寄せ */
    flex-direction: column; /* 縦方向に要素を配置 */
}
.container input[type="date"],
.container input.btn-submit {
    margin-bottom: 20px; /* 各要素の下に余白を追加 */
    font-size: 25px; /* フォントサイズを大きくする */
    padding: 15px; /* パディングを大きくする */
    width: 200px; /* 幅を調整 */
}

details { 
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
} /*詳細ボタンの設定*/

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
  font-size: 22px !important; /* サイズ強制指定 */
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}