@charset "UTF-8";

body{
    font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 1.1em;
    color: #ffffff;
    background-color: #333333;
}

a:link{
    color: #9CC3EC;
}

a:visited{
    color: #9CC3EC;
}

a:hover{
    color: #ffffff;
}

h1{
    font-size: 2.2em;
    color: #FDEB00;
    border: none;
    width: auto;
}

h2{
    font-size: 1.8em;
    color: #FDEB00;
    font-weight: bold;
}

h3{
    font-size: 1.4em;
    color: #ffffff;
    font-weight: bold;
}

.kugiriyellow{
    background-color: #FDEB00;
    margin: 0;
    border: none;
    width: auto;
    height: 4px;
}

.kugiriblue{
    background-color: #9CC3EC ;
    margin: 0;
    border: none;
    width: auto;
    height: 4px;
}

 /* ウィジェット全体のスタイル */
#rss-category-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #333;
}
#rss-category-widget .item {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}
#rss-category-widget .item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
#rss-category-widget .item-title a {
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    color: #0056b3 !important;
}
#rss-category-widget .item-title a:hover {
    text-decoration: underline;
}
#rss-category-widget .item-meta {
    font-size: 0.85em;
    color: #777;
    margin-top: 4px;
}
#rss-category-widget .message {
    color: #888;
    text-align: center;
    padding: 20px;
}
#rss-category-widget .item-description {
    font-size: 0.95em;
    color: #333;
    line-height: 1.6;
    margin-top: 8px;
}
#rss-category-widget .item-description img {
    max-width: 100%;
    height: auto;
}

#formWrap {
    width:760px;
    margin:0 auto;
    color:#ffffff;
    line-height:120%;
    font-size:110%;
  }
  table.formTable{
    width:100%;
    margin:0 auto;
    border-collapse:collapse;
  }
  table.formTable td,table.formTable th{
    border:1px solid #ffffff;
    padding:10px;
  }
  table.formTable th{
    width:30%;
    font-weight:normal;
    background:#333333;
    text-align:left;
  }

@media screen and (max-width: 572px) {
    #formWrap {
      width: 95%;
      margin: 0 auto;
      border: 1px solid #ffffff;
      padding: 10px;
      box-sizing: border-box;
    }
    table.formTable th, table.formTable td {
      width: auto;
      display: block;
      border: none;
    }
    table.formTable th {
      margin-top: 5px;
      border-bottom: 0;
    }
    form input[type="text"], form textarea {
      width: 80%;
      padding: 5px;
      font-size: 110%;
      display: block;
    }
    form input[type="submit"], form input[type="reset"], form input[type="button"] {
      display: block;
      width: 100%;
      height: 40px;
    }
}

/* --- カレンダー用のスタイル --- */
#calendar-container {
    color: #333;
    font-size: 14px;
    padding: 10px;
    background-color: #ffffff;
}
#calendar-container .fc-toolbar-title {
    color: #000000 !important;
    font-size: 1.5em !important;
}
.fc .fc-col-header-cell-cushion { 
    font-size: 0.9em;
    color: #666;
}
.fc-daygrid-event {
    white-space: normal !important;
    padding: 2px 4px;
    border-radius: 4px;
    transition: opacity 0.2s;
}
.fc-daygrid-event:hover {
    opacity: 0.8;
}
.fc-event-title {
    font-size: 0.85em;
}
.fc-daygrid-event {
    display: block !important;
}
.fc-daygrid-dot-event {
    display: block !important;
    padding: 2px 4px;
}
.modal {
    display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.6);
}
.modal-content {
    background-color: #fefefe; margin: 15% auto; padding: 20px 30px; border: 1px solid #888; width: 80%; max-width: 500px; border-radius: 8px; text-align: center;
}
.modal-content h2 {
    margin-top: 0; font-size: 1.4em;
}
.modal-content p {
    color: #333; margin: 10px 0;
}
.modal-button-container {
    text-align: center; margin-top: 20px; margin-bottom: 15px;
}
.modal-button-container a {
    display: inline-block; padding: 10px 20px; background-color: #007bff; color: white !important; text-decoration: none; border-radius: 5px;
}
.modal-calendar-link-container {
    text-align: right; margin-top: 10px;
}
.add-to-calendar-link {
    font-size: 1.1em; color: #007bff; text-decoration: underline;
}
.close-btn {
    color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; line-height: 1;
}

/* --- 見出しのスタイル --- */
.section-title {
    font-size: 1.2em;
    color: #0011FF;
    font-weight: bold;
    background: linear-gradient(to bottom, #62c1e5, #1d6b9f);
    padding: 0 20px;
    text-align: left;
    border-radius: 5px;
    text-shadow: 
        -2px -2px 0 #ffffff, 2px -2px 0 #ffffff,
        -2px  2px 0 #ffffff, 2px  2px 0 #ffffff;
}

/* --- スクールリスト用のスタイル --- */
.school-list-table {
    width: 100%;
    max-width: 768px;
    margin: 30px auto;
    border-collapse: collapse;
    background-color: #4a4a4a; /* 少し明るい背景 */
    border-radius: 8px;
    overflow: hidden; /* 角丸を有効にするため */
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.school-list-table th,
.school-list-table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #5f5f5f; /* 区切り線 */
}

.school-list-table thead th {
    background-color: #0056b3; /* ヘッダーの背景色 */
    color: #ffffff;
    text-align: center;
    border-bottom: 2px solid #FDEB00;
}

.school-list-table thead th h3 {
    color: #ffffff; /* h3の色を白に */
    margin: 0;
    font-size: 1.1em;
    font-weight: bold;
}

.school-list-table tbody tr:last-child td {
    border-bottom: none; /* 最後の行の線を消す */
}

.school-list-table tbody td a {
    font-weight: bold;
    text-decoration: none;
    display: block;
    transition: background-color 0.2s, color 0.2s;
    margin: -15px -20px; /* セルのパディングを打ち消して全体をリンクに */
    padding: 15px 20px;
}

.school-list-table tbody td a:hover {
    background-color: #5f5f5f;
    color: #FDEB00; /* ホバー時の色 */
}

.school-list-table .school-dates {
    display: block;
    margin-top: 8px;
    font-size: 0.95em;
    color: #e0e0e0;
    font-weight: normal;
    letter-spacing: 1px;
}

/* --- YouTubeセクション用のスタイル --- */
.youtube-section {
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 25px;
    text-align: center;
    margin: 20px 0;
}
.youtube-section h2 {
    margin-top: 0;
}
.youtube-flex-container {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 20px;
}
.youtube-video {
    flex: 2;
    aspect-ratio: 16 / 9;
}
.youtube-video iframe {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.youtube-subscribe {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ★★★ ここからが新しいチャンネル登録ボタンのスタイル ★★★ */
.youtube-subscribe-button {
    display: inline-block;
    background-color: #ff0000; /* YouTubeの赤色 */
    color: #ffffff !important; /* 文字色を白に強制 */
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2em;
    transition: background-color 0.3s;
    margin-top: 10px;
}
.youtube-subscribe-button:hover {
    background-color: #cc0000; /* マウスオーバー時に少し暗くする */
    color: #ffffff !important;
}
/* ★★★ ここまで ★★★ */

@media screen and (max-width: 768px) {
    .youtube-flex-container {
        flex-direction: column;
    }
}