/*=======================================================
  基本設定・リセット
========================================================*/

/* スクロールロック用のbodyクラス */
body.lock-scroll {
    overflow: hidden;
}

/* 基本的なbody設定 */
body#blog,
body#kouya,
body#live {
    -webkit-text-size-adjust: 100%;
    max-width: 100%;
    width: 100%;
    font-family: 'CustomFont', 'Arial', sans-serif;
    margin: 0;
    padding: 0;

    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom);
    min-height: 100vh;
    position: relative;
}

body#blog,
body#kouya {
    background-color: #fff;
}

body#live {
    background-color: #000;
}

html,
body {
    min-height: 100vh;
    margin: 0;
}

@supports (-webkit-touch-callout: none) {
    /* iOS Safari向け共通スタイル */

    body {
        padding-bottom: env(safe-area-inset-bottom, 500px);
        /* 安全な下部余白確保 */
        -webkit-text-size-adjust: 100%;
        /* フォントの自動縮小を防止 */
        font-size: 1.05rem;
        /* フォント潰れ防止にやや大きめ設定 */
        line-height: 1.6;
        max-width: 100vw;
        /* 横スクロール防止 */
        overflow-x: hidden;
    }

    .footer {
        padding-bottom: env(safe-area-inset-bottom, 60px);
        /* フッターの余白調整 */
    }
}


/*=======================================================
  レイアウト・コンテナ
========================================================*/

/* メインコンテナ */
#container {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* コンテンツエリア */
main {
    width: 1180px;
    margin: 10px auto;
    padding: 10px;
    height: auto;
}

#footer {
    width: 1180px;
    padding: 10px;
    height: auto;
}

/* ページごとのスタイルを body の id で分岐 */
body#blog #footer,
body#kouya #footer {
    background-color: #F9F9F9;
}

body#live #footer {
    background-color: #000;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
    color: #fff;
}

body#live #footer a {
    color: rgb(132, 237, 255);
}

body#live #footer a:visited {
    color: rgb(132, 237, 255);
}

/* リンクスタイル */
#footer a:visited {
    color: #00f;
}

.link-blue {
    color: #00f;
}

/*=======================================================
  タイトルロゴ・アニメーション
========================================================*/

/* メインタイトルロゴ（中央固定表示） */
#main-title-logo {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    opacity: 1;
    width: 90%;
    transition: opacity 1s ease-out;
}

/* フェードイン・アウト用のアニメーションクラス */
.hidden-main {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

.show-main {
    opacity: 1;
    transform: translateY(0);
}

.hidden {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.show {
    opacity: 1;
    transform: translateY(0);
}

/*=======================================================
  ヘッダー
========================================================*/
body#blog header,
body#kouya header,
body#live header {
    margin: 0 auto;
    padding: 0;
    height: 125px;
}

/*デフォルト用*/
body#blog header {
    background-image: url("../image/base/header.jpg");
}

/*後夜祭用*/
body#kouya header {
    background-image: url("../image/base/headerkouya.jpg");
}

body#live header {
    background-image: url("../image/base/headermonochrome.png");
}

.header {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    position: relative;
}

.header_logo {
    display: flex;
    align-items: center;
    padding: 5px 0 0 15px;
    margin: 5px 0 0 7px;
}

/* ヘッダーのサブタイトル */
.header h2 {
    font-size: 162%;
    padding: 0 10px 0 5px;
    margin: 0;
    font-family: "Kaisei Decol", serif;
    font-weight: 800;
    font-style: normal;
    color: #fff;
}

/* ヘッダーのメインタイトル */
.header h1 {
    font-size: 370%;
    padding: 0 0 0 10px;
    margin: -10px 0 0 0;
    font-family: "Kaisei Decol", serif;
    font-style: normal;
    color: #fff;
    position: absolute;
    top: 42px;
    left: 10px;
}

/*=======================================================
  ナビゲーション
========================================================*/
/* nav全体 */
nav {
    width: 100%;
}

nav ul {
    padding: 0 10px;
}

/* 共通のliスタイル */
body#blog nav li,
body#kouya nav li,
body#live nav li {
    display: inline-block;
    list-style-type: none;
    width: 218px;
    height: 80px;
    margin: 5px;
    padding: 10px 2px;
    border-radius: 10px;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* 背景色（ベース） */
body#blog nav li {
    background-color: #D82115;
}

body#kouya nav li {
    background-color: #0072FF;
}

body#live nav li {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

/* ホバー時の色も個別に */
body#blog nav li:hover {
    background-color: #ff6363;
}

body#kouya nav li:hover {
    background-color: #3399ff;
}

/* リンクの共通スタイル */
nav a {
    display: block;
    padding: 0;
    font-size: 160%;
    font-family: "Kaisei Decol", serif;
    font-style: normal;
    color: #fff;
    text-decoration: none;
}

/*=======================================================
  index.html
========================================================*/

/*=======================================================
  メインコンテンツ
========================================================*/
/* タイトルセクション */
.title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* 背景画像コンテナ */
.image-container {
    height: 400px;
    background: url("../image/content/sagamineback.jpg") no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* テーマ画像（グローアニメーション付き） */
.theme {
    max-width: 65%;
    padding: 10px;
    height: auto;
    display: block;
    opacity: 0;
    -webkit-animation: fadeInGlow 1s ease-in-out 3s forwards;
    animation: fadeInGlow 1s ease-in-out 3s forwards;
}

/* グローアニメーション（Webkit用） */
@-webkit-keyframes fadeInGlow {
    0% {
        opacity: 0;
        filter: brightness(0.5);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
    }

    50% {
        opacity: 0.7;
        filter: brightness(1.5);
        box-shadow: 0 0 80px rgba(255, 255, 255, 0.8),
            0 0 120px rgba(255, 255, 255, 0.7);
    }

    70% {
        opacity: 1;
        filter: brightness(3);
        box-shadow: 0 0 150px rgba(255, 255, 255, 1),
            0 0 200px rgba(255, 255, 255, 0.9);
    }

    100% {
        opacity: 1;
        filter: brightness(1);
        box-shadow: none;
    }
}

/* グローアニメーション（標準） */
@keyframes fadeInGlow {
    0% {
        opacity: 0;
        filter: brightness(0.5);
    }

    50% {
        opacity: 0.7;
        filter: brightness(0.8);
    }

    60% {
        opacity: 1;
        filter: brightness(1);
    }

    70% {
        opacity: 1;
        filter: brightness(1.2);
    }

    100% {
        opacity: 1;
        filter: brightness(1);
    }
}

/*=======================================================
  ニュースセクション
========================================================*/
/* ニュース全体のエリア */
.news-area {
    width: 900px;
    margin: 0 auto;
}

/* ニュース一覧リスト */
.news-area ul {

    list-style: none;
    padding: 0;
    font-size: 12px;
}

/* 個別ニュースアイテム */
#news-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.news-date,
#news-list a {
    line-height: 2em;
}

/* ニュースの日付 */
.news-date {
    color: #999;
    font-size: 2em;
    padding-right: 15px;
}

/* ニュースリンク */
#news-list a {
    color: #00f;
    font-size: 2em;
    font-weight: bold;
    text-decoration: none;
}

#news-list a:hover {
    text-decoration: underline;
}

/* NEWバッジ */
.new-badge {
    background-color: #F00;
    color: #fff;
    font-size: 1em;
    padding: 2px 6px;
    border-radius: 8px;
    animation: blink 1s infinite;
}

/* NEW点滅アニメーション */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/*=======================================================
  スケジュール・デイブロック
========================================================*/

.schedulearea {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    padding: 10px;
}

/* 共通のデイブロックスタイル */
.day-block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 580px;
    height: 400px;
    background-size: cover;
    background-position: center;
    border: 2px solid #000;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 550%;
    font-weight: bold;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.day-block:first-child {
    background-image: url('../image/content/day1.jpg');
}

.day-block:last-child {
    background-image: url('../image/content/day2.jpg');
}

.day-block:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/* デイブロック内のテキストスタイル */
.day1,
.day2 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.day1 {
    text-shadow: 6px 6px 6px #F00;
}

.day2 {
    text-shadow: 6px 6px 6px #00F;
}

/*=======================================================
  コンテンツリスト・カード
========================================================*/

.contents-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.contents-title {
    text-align: center;
    font-family: "Shrikhand", serif;
    font-style: normal;
    font-size: 90px;
    color: #f00;
    margin-bottom: 10px;
}

/* カードボックス */
.card_box {
    position: relative;
    margin: 10px;
    border: 2px solid #999;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.card_box:hover {
    transform: scale(1.05);
}

.card_box a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
    background-image: url("../image/base/frame4.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.card_box img {
    width: 40%;
    padding: 25px 0 10px 0;
    margin: auto;
    display: block;
}

.card_box p {
    font-family: "Kaisei Decol", serif;
    font-weight: 800;
    font-style: normal;
    text-align: center;
    color: #fff;
    text-shadow: 6px 6px 7px #666;
    padding: 10px 0 25px 0;
    border-radius: 5px;
    margin: 0;
}

.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1156px;
    height: 300px;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    border: 2px solid #999;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 550%;
    font-weight: bold;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.banner:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

/*=======================================================
  アクセス情報
========================================================*/

.access-article {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.access-map,
.access-infomation {
    width: 45%;
}

.access-infomation {
    padding-left: 10px;
}

.access-infomation h3 {
    margin-top: 1px;
}

.access-infomation ul {
    padding-left: 20px;
}

.access-map iframe {
    width: 100%;
    height: 507px;
}

/* バス時刻表の幅調整 */
.align-bus {
    width: 128px;
}

.access-hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, #333, #ccc, #333);
    margin: 0;
}

.transport-item {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
    /* スマホ対応 */
}

.access-label {
    width: 12em;
    font-weight: bold;
}

/*=======================================================
  SNS・スポンサー
========================================================*/

.sns {
    padding: 0 70px;
}

.sns2 {
    padding: 0 70px;
}

@media (min-width: 768px) {
    .sns2 {
        padding: 0 35px;
    }
}

.sns-article {
    display: flex;
    justify-content: center;
}

.sns-article h2 {
    text-align: center;
    font-size: 250%;
    font-family: "Patua One", serif;
    font-weight: 400;
    font-style: normal;
}

.sponsor {
    display: flex;
}

.sponsor1 {
    padding-left: 30px;
}

.sponsor2 {
    display: flex;
    margin-left: 30px;
}

.sponsorp {
    font-size: 30px;
    text-align: center;
}

/*=======================================================
  フッター・クレジット
========================================================*/

.credit {
    padding-left: 10px;
    text-align: left;
    font-size: 20px;
}

.credit p {
    margin: 0;
}

.article-creditlogo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 70px;
}

.logo p {
    font-size: 250%;
    padding: 0 20px;
    font-weight: 800;
}

/*=======================================================
  パンくずナビ
========================================================*/

body#blog .pankuzu,
body#kouya .pankuzu,
body#live .pankuzu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 25px;
    font-size: 120%;
}

body#blog .pankuzu,
body#kouya .pankuzu {
    color: #333;
}

body#live .pankuzu {
    color: #fff;
}


.pankuzu li:not(:last-of-type)::after {
    content: ">";
    margin: 0.6em;
}

.pankuzu a {
    color: inherit;
    text-decoration: none;
}

.pankuzu a:visited {
    color: inherit;
    text-decoration: none;
}

/*=======================================================
  ユーティリティ・スペーシング
========================================================*/

.linebreak {
    margin: 200px 0;
}

.linebreak2 {
    margin: 100px 0;
}

/*=======================================================
  レスポンシブ表示切り替え
========================================================*/

/* 通常は非表示 */
.non-responsive-text {
    display: none;
}

/* 通常は表示 */
.responsive-text {
    display: inline;
}

/*=======================================================
  メディアクエリ - タブレット・PC (768px以上)
========================================================*/

@media (min-width: 768px) {
    #main-title-logo {
        width: auto;
    }

    .card_box {
        width: calc(32% - 20px);
    }

    .card_box p {
        width: 335px;
        font-size: 220%;
    }
}

/*=======================================================
  メディアクエリ - スマートフォン (768px以下)
========================================================*/

@media (max-width: 768px) {

    /* レイアウト調整 */
    #container {
        width: 1200px;
        padding-top: 50px;
    }

    #main-title-logo {
        width: 80%;
        top: 50%;
        left: 65%;
    }

    /* カードレイアウト調整 */
    .card_box {
        width: calc(48% - 20px);
    }

    .card_box p {
        width: 500px;
        font-size: 45px;
    }

    /* アクセス情報を縦並びに */
    .access-article {
        flex-direction: column;
        align-items: center;
    }

    .access-information {
        width: 1100px;
        font-size: 140%;
    }

    .access-map,
    .access-infomation {
        width: 100%;
        max-width: 1100px;
        font-size: 28px;
    }

    /* レスポンシブテキスト切り替え */
    .responsive-text {
        display: none;
    }

    .non-responsive-text {
        display: inline;
    }
}

/*=======================================================
  about ページ専用CSS
========================================================*/

/*=======================================================
  メインレイアウト
========================================================*/

/* Aboutページのメインレイアウト */
.article_about {
    display: flex;
}

/* メインコンテンツエリア */
.content_about {
    width: 970px;
    margin-left: 10px;
    padding: 10px;
    background-color: #fff;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/*=======================================================
  タイトル・見出し
========================================================*/

/* Aboutページメインタイトル */
.about_title_font {
    text-align: center;
    font-family: "Mochiy Pop One", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 53px;
}

/* セクション見出し */
.content_about h2 {
    font-size: 30px;
}

/* 紹介セクションタイトル */
.introduction_title h3 {
    margin: 0;
    text-align: center;
    font-size: 40px;
}

.introduction_title h4 {
    margin: 0;
    text-align: center;
    font-size: 30px;
}

/*=======================================================
  画像・テーマ
========================================================*/

/* テーマ画像 */
.theme_image {
    width: 100%;
}

/*=======================================================
  メッセージセクション
========================================================*/

/* メッセージボックス共通スタイル */
.box_about {
    margin: 2em 0;
    box-shadow: 0 2px 3px rgba(0.5, 0, 0, 0.5);
}

/* メッセージエリア1（PC版横並び） */
.article_message {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.message_image {
    padding: 8px;
}

.message_text p {
    font-size: 21px;
    padding: 20px;
    text-align: justify;
    margin: 0;
}

/* メッセージエリア2（常に横並び） */
.article_message2 {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.message_image2 {
    padding: 20px 20px 0 20px;
}

.message_image2 p {
    text-align: center;
    font-size: 20px;
    margin: 10px 0 20px 0;
}

.message_text2 p {
    font-size: 22px;
    padding: 19px;
    text-align: justify;
    margin: 0;
}

/* メッセージ送信者名 */
.message_name {
    font-size: 20.8px;
    padding: 20px;
    margin: 0;
}

/*=======================================================
  テーブル（開催概要）
========================================================*/

/* 共通スタイル */
table.boardmember {
    width: 100%;
    border-collapse: collapse;
    font-size: 22px;
}

table.boardmember tr {
    border-bottom: solid 2px white;
}

table.boardmember tr:last-child {
    border-bottom: none;
}

table.boardmember th {
    position: relative;
    width: 30%;
    color: white;
    text-align: center;
    padding: 10px 0;
}

table.boardmember th:after {
    display: block;
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: calc(50% - 10px);
    right: -10px;
    border-left: 10px solid currentColor;
    /* ←色を継承 */
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

table.boardmember td {
    width: 70%;
    background-color: #eee;
    font-size: 22px;
    text-align: left;
    padding: 10px 20px;
}

body#blog table.boardmember th {
    background-color: #D82115;
    color: white;
}

body#blog table.boardmember th:after {
    border-left-color: #D82115;
}

body#kouya table.boardmember th {
    background-color: #0072FF;
    color: white;
}

body#kouya table.boardmember th:after {
    border-left-color: #0072FF;
}

/*=======================================================
  メンバー紹介
========================================================*/

/* メンバー紹介セクション */
.introduction_member {
    display: flex;
    align-items: stretch;
    /* 高さをそろえるために stretch に */
    gap: 20px;
    background-color: #eee;
    padding: 20px;
}

/* 左側の画像 */
.introduction_member img {
    max-width: 400px;
    height: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

/* 名前リスト全体 */
.name-list {
    flex: 1;
    height: 100%;
    /* 親と同じ高さに */
    display: flex;
    flex-direction: column;
}

/* ulを100%にして中身を合わせる */
.name-list ul {
    flex: 1;
    overflow-y: auto;
    /* 多すぎる場合にスクロール可能 */
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
}

/* 基本の名前リスト項目（4列表示） */
.name-list li {
    flex: 1 1 calc(25% - 10px);
    text-align: center;
    font-size: 1.1rem;
    background-color: #fff;

    padding: 6px 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s;
}

/* 列数調整用クラス */
.name-list li.wide-name2 {
    flex: 1 1 calc(50% - 10px);
}

.name-list li.wide-name3 {
    flex: 1 1 calc(33.33% - 10px);
}

.name-list li.wide-name5 {
    flex: 1 1 calc(20% - 10px);
}

.name-list li.wide-name6 {
    flex: 1 1 calc(16.66% - 10px);
}


/*=======================================================
  サイドバー
========================================================*/

.sidebar {
    width: 190px;
    margin-left: 10px;
    margin-bottom: 10px;
    background-color: #fff;
    text-align: center;
}


.sidebar h2 {
    display: inline-block;
    width: 155px;
    margin: 2px;
    padding: 8px 5px;
    font-family: "Kaisei Decol", serif;
    font-weight: 800;
    font-style: normal;
    font-size: 120%;
    color: #fff;
    text-align: center;
}

.sidebar li {
    display: inline-block;
    list-style-type: none;
    width: 155px;
    margin: 2px;
    padding: 8px 5px;
    background-color: #FCF5F7;
    text-align: center;
    transition: background-color 0.3s ease;
}

.sidebar li a {
    display: block;
    font-size: 110%;
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

body#blog .sidebar h2 {
    background-color: #D82115;
}

body#blog .sidebar li:hover {
    background-color: #E9546B;
}

body#kouya .sidebar h2 {
    background-color: #0072FF;
}

body#kouya .sidebar li:hover {
    background-color: #3399FF;
}

.sidebar li:hover a {
    color: #fff;
}

/*=======================================================
  メディアクエリ - スマートフォン (768px以下)
========================================================*/

@media (max-width: 768px) {

    .content_about {
        width: 100%;
    }

    .theme_image {
        width: 100%;
    }

    .sidebar {
        display: none;
    }

    .article_message {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .message_image img {
        width: 100%;
        max-width: 450px;
        height: auto;
    }

    .message_text p {
        font-size: 26px;
    }

    .message_image2 p {
        font-size: 19px;
    }

    .message_text2 p {
        font-size: 25.5px;
    }

    .name-list ul {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .name-list li {
        flex: 1 1 25%;
        text-align: center;
        font-size: 25px;
        padding: 0;
    }
}

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff3b3b, #ff0000);
    color: #fff;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(255, 0, 0, 0.3),
        inset 2px 2px 6px rgba(255, 255, 255, 0.2),
        inset -2px -2px 6px rgba(180, 0, 0, 0.2);
}

.back-to-top:hover {
    background: linear-gradient(145deg, #ff5555, #ff1a1a);
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4),
        inset 2px 2px 6px rgba(255, 255, 255, 0.3),
        inset -2px -2px 6px rgba(180, 0, 0, 0.3);
}

.back-to-top::before {
    content: "↑";
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

/* レスポンシブ: タブレット・モバイル */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 300px;
        right: 30px;
        width: 90px;
        height: 90px;
        line-height: 90px;
        font-size: 25px;
    }
}

/* =======================================================================
   day.html用スタイル
========================================================================== */

/* メインコンテンツエリア */
.content_day {
    margin: 20px;
}

.content_day1 h1 {
    text-align: center;
    font-size: 40px;
}

/* タイムテーブルコンテナ */
.timetable-container {
    max-width: 1155px;
    margin: 0 auto;
}

.day {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.day h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

/* イベント項目 */
.event {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.event:last-child {
    border-bottom: none;
}

.event time {
    font-size: 25px;
    color: #555;
    width: 120px;
    text-align: left;
}

.event a {
    font-size: 25px;
    color: #0072FF;
    text-decoration: none;
    transition: color 0.3s ease;
    flex: 1;
    text-align: left;
}

.event a:hover {
    color: #0056b3;
}

/* イベントコンテンツの強調テキスト */
.event_content b {
    color: #0075c2;
}

.day_content li {
    list-style-type: none;
    font-size: 21px;
}

.day_content a {
    color: #00f;
}

/* Missコンテスト用のレイアウト */
.Miss {
    display: flex;
    justify-content: space-between;
    width: 220px;
}

.Misscontest {
    width: 110px;
    text-align: left;
}

/* プログラムエリア */
.program-item {
    margin: 0 13px;
    margin-bottom: 3em;
}

.program-item hr {
    margin: 4px 0;
}

.program-item h2 {
    margin-bottom: 0px;
}

.program-title {
    font-size: 1.9em;
    margin-bottom: 0.1em;
}

.program-time {
    font-size: 1em;
    color: #000;
}

.program-content {
    display: flex;
    font-size: 1.2rem;
    align-items: flex-start;
    text-align: justify;
}

.program-image {
    width: 300px;
    height: auto;
}

.program-description {
    flex: 1;
    padding: 0 0.3em;
}

.program-description p {
    padding: 0;
    margin: 10px 5px;
}

.program-link {
    margin-top: 0.5em;
    font-weight: bold;
}

.program-link a {
    color: blue;
}

/* コンテナ（横並びレイアウト） */
#exhibition-container {
    display: flex;
    flex-wrap: wrap;
    /* 横並び＋折り返し */
    justify-content: center;
    /* 中央寄せ */
    gap: 10px;
    /* カード間の隙間 */
    padding: 10px;
    box-sizing: border-box;
}

/* 個別カード */
.post {
    width: 570px;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* カード内の画像 */
.post-image {
    width: 100%;
    height: 412px;
    object-fit: cover;
    display: block;
}

/* コンテンツ部分 */
.post-content {
    padding: 15px;
}

/* タイトルや詳細情報 */
.post-info {
    font-size: 22px;
    color: #333;
    margin: 10px;
}

/* コメント部分 */
.post-comment {
    font-size: 19px;
    color: #333;
    line-height: 1.4;
    /* 行間の倍率（調整可） */
    height: calc(1.4em * 3);
    /* 3行分の高さを指定 */
    display: flex;
    justify-content: center;
    /* 横方向中央 */
    align-items: center;
    /* 縦方向中央 */
    text-align: center;
    /* テキストの中央揃え（横方向） */
    padding: 0 10px;
    /* 左右の余白はお好みで */
}

/* リンク */
.post-link {
    text-decoration: none;
    color: inherit;
}

/* ホワンと拡大するエフェクト */
.post:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* 英語版 */
.post-info_e {
    font-size: 22px;
    color: #333;
    margin: 10px;
}

.post-info_e>div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3em;
}

.post-label {
    font-weight: bold;
    width: 90px;
    /* 全体のラベル幅固定 */
    flex-shrink: 0;
    display: inline-block;
}

/* Eventだけ文字間を広げて横幅を調整 */
.post-label.event-label {
    letter-spacing: 0.05em;
    /* 文字間を広げる */
    padding-right: 4px;
    /* 右側の余白を追加 */
}

/* Dateだけ文字間を広げて横幅を調整 */
.post-label.date-label {
    letter-spacing: 0.17em;
    /* 文字間を広げる */
    padding-right: 4px;
    /* 右側の余白を追加 */
}

/* Venueだけ文字間を広げて横幅を調整 */
.post-label.venue-label {
    letter-spacing: 0.015em;
    /* 文字間を広げる */
    padding-right: 4px;
    /* 右側の余白を追加 */
}

.post-value {
    flex-grow: 1;
    text-align: left;
}

.next_container {
    position: relative;
    /* 親要素に相対位置を設定 */
}

.next {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    /* テキストの色 */
    background-color: #D82115;
    /* ボタンの背景色（赤色） */
    border-radius: 30px;
    /* 丸みを帯びた角 */
    text-decoration: none;
    /* 下線を削除 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* 軽い影 */
    transition: background-color 0.3s ease, transform 0.3s ease;
    /* ホバー効果 */
    cursor: pointer;
    position: absolute;
    right: 20px;
    /* 右側に配置 */
    top: 298px;
    /* 上側に配置（位置調整） */
}

.next b {
    margin-left: 8px;
}

.next:hover {
    background-color: #F00;
    /* ホバー時の背景色（濃い赤） */
    transform: translateY(-3px);
    /* ホバー時の浮き上がり効果 */
}

.next::before {
    content: '>';
    /* アイコンを追加 */
    font-size: 24px;
    /* アイコンのサイズ */
    margin-right: 8px;
}

/* キャンパスマップリンク専用CSS */

.campus-map-link {
    width: 300px;
    display: inline-block;
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    color: white;
    text-decoration: none;
    margin-top: 20px;
    padding: 1.2rem 2.5rem;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
    position: relative;
    overflow: hidden;
}

/* 言語切り替えボタンのスタイル */
.language-switcher {
    display: flex;
    justify-content: right;
    /* 横方向の中央 */
    align-items: center;
    /* 縦方向の中央 */
    margin: 20px 0;
}

.language-switcher button {
    width: 180px;
    height: 70px;
    background: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 0 5px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 25px;
    font-weight: bold;
    transition: background 0.3s;
}

.language-switcher button:hover {
    background: #0056b3;
}

.language-switcher button.active {
    background: #28a745;
}

.language-switcher button:disabled {
    background: #28a745;
    cursor: default;
}

/* レスポンシブ: モバイル対応 */
@media (max-width: 768px) {

    .event time,
    .event a {
        font-size: 25px;
    }

    .day_content li {
        font-size: 21px;
    }

    .campus-map-link {
        font-size: 20px;
        padding: 1rem 2rem;
    }
}

/* =======================================================================
   live.html用スタイル
========================================================================== */

/* ライブ情報メインコンテナ */
.live_infomation {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 20px;
    background-color: #000;
}

/* ライブタイトルヘッダー */
.live-title {
    text-align: center;
    padding: 5px 0px 20px 0;
}

.live-title img {
    width: 65%;
}

.live-info h2 {
    font-size: 50px;
    color: #fff;
    text-align: center;
}

/* ライブ情報セクション */
.flex-live {
    margin: 0 auto;
    width: 99%;
    display: flex;
    flex-direction: row;
    padding: 0;
    border: 3px solid #ffffff;
}

/* アーティスト画像 */
.artist-image-container {
    display: flex;
    width: 50%;
    align-items: center;
    padding: 0;
    margin: 0;
}

/* アーティスト画像 */
.artist-image-container img {
    width: 100%;
}

/* アーティスト詳細情報 */
.artist-details-container {
    display: flex;
    width: 50%;
    align-items: center;
    padding: 0;
    margin: 0;
    color: #fff;
}

.artist-details-container p {
    font-size: 20px;
    text-align: justify;
    padding: 0 20px;
}

/* 詳細情報リスト */
.details {
    margin-top: 15px;
}

.details ul {
    list-style-type: none;
    margin-top: 10px;
    padding-left: 10px;
}

.details li {
    font-size: 26px;
    color: #fff;
    margin-top: 5px;
}

/* チケットボタン */
.ticket-button {
    width: 180px;
    display: inline-block;
    margin-top: 30px;
    margin-left:150px;

    padding: 20px 20px;
    background-color: #e74c3c;
    color: #fff;
    text-decoration: none;
    font-size: 25px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.ticket-button:hover {
    background-color: #c0392b;
}

/* チケット情報セクション */
#ticket-info {
    color: #fff;
    margin: 40px auto;
    padding: 30px;
    background-color: #111;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
    border: 1px solid #333;
}

#ticket-info h2 {
    border-bottom: 2px solid #444;
    padding-bottom: 8px;
    margin-bottom: 25px;
}

#ticket-info ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 20px 0;
}

#ticket-info li {
    color: #fff;
    margin-bottom: 12px;
    font-size: 25px;
}

#ticket-info li strong {
    font-weight: bold;
}

/* 販売場所リスト */
.sales-locations {
    padding-left: 0;
}

.sales-locations li {
    display: flex;
    align-items: flex-start;
}

.location-name {
    width: 350px;
    flex-shrink: 1;
}

.location-link a {
    color: #1e90ff;
    text-decoration: none;
}

.location-link a:hover {
    text-decoration: underline;
    color: #87cefa;
}

#ticket-info a {
    color: #1e90ff;
    text-decoration: none;
}

#ticket-info a:hover {
    text-decoration: underline;
    color: #87cefa;
}

#ticket-info p {
    font-size: 22px;
    line-height: 1.8;
    margin-top: 20px;
    color: #fff;
}

/* レスポンシブ: スマホ対応 */
@media (max-width: 767px) {

    /* ライブ情報セクション */
    .flex-live {
        display: flex;
        flex-direction: column;
        padding: 0;
        border: 3px solid #ffffff;
    }

    /* アーティスト画像 */
    .artist-image-container {
        width: 100%;
    }

    /* アーティスト詳細情報 */
    .artist-details-container {
        width: 100%;
    }

    .artist-details-container p {
        font-size: 30px;
        text-align: justify;
        padding: 0 20px;
    }
}

/* ==========================================================================
   question.html用スタイル（FAQ・お問い合わせ）
========================================================================== */

/* FAQページタイトル */
.question-title {
    font-size: 250%;
    text-align: center;
    font-weight: bold;
}

/* FAQエリア */
.faq_area {
    width: 90%;
    margin: auto;
}

.faq_area h2 {
    margin-top: 50px;
}

/* FAQ項目 */
.faq {
    margin: 20px 0;
}

.faq h4 {
    color: #f00;
    border-bottom: 1px dotted #f00;
    padding-bottom: 5px;
    font-size: 22px;
}

.faq p {
    color: #333;
    margin-top: 10px;
    font-size: 20px;
}

/* フォームエリア */
.form_area {
    text-align: center;
}

/* お問い合わせフォームボタン */
.form {
    display: inline-block;
    text-decoration: none;
    width: 500px;
    height: 140px;
    padding: 60px 0px 0px 0px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    background: radial-gradient(circle, #B22222, #FF6347, #FF7F50);
    opacity: 1;
}

.form:hover {
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
    transform: translateY(3px);
}

.form-text {
    color: white;
    font-size: 60px;
}

/* ==========================================================================
    フットボール関連スタイル
========================================================================== */

/* フットボールセクション */
.football {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.football h1 {
    font-size: 37px;
    margin: 0px 20px;
}

/* フットボールフレックスレイアウト */
.football_flex {
    display: flex;
    align-items: center;
    gap: 20px;
}

.football_flex ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* フットボールコンテンツ */
.football_content li {
    font-size: 20px;
    padding-top: 10px;
}

.football_content a {
    color: #00f;
}

/* フットボールテキスト（大きな装飾テキスト） */
.football-text {
    text-align: center;
    font-size: 50px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-weight: 900;
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   キャンパスマップ関連スタイル
========================================================================== */

/* マップコンテナ */
.map-container {
    position: relative;
    width: 1200px;
}

/* キャンパスマップ画像 */
.campus-map {
    width: 100%;
}

/* 建物ラベル */
.building {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.7);
    color: #333;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Arial', sans-serif;
}

/* 建物ラベルホバー効果 */
.building:hover {
    background-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    color: #000;
}

/* ==========================================================================
　　ポップアップ関連スタイル
========================================================================== */

/* ポップアップオーバーレイ */
.popup {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
}

/* ポップアップコンテンツ */
.popup-content {
    max-width: 80%;
    max-height: 80%;
}

/* ポップアップ閉じるボタン */
.close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: white;
    font-size: 30px;
    cursor: pointer;
}

/* =======================================================================
   模擬店マップ用スタイル
========================================================================== */

.mogi_map {
    display: flex;
    background-color: #C0C0C0;
    padding: 0px 0px 0px 2px;
}

.mogi_map a {
    color: white;
}

.mogi_map li {
    list-style-type: none;
    width: 121px;
    height: 50px;
    margin: 3px;
    padding: 6px 1px;
    border-radius: 10px;
    text-align: center;
    background-color: #fff;
    /* 薄いグレー */

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1),
        /* 柔らかい影 */
        0 0 15px rgba(0, 0, 0, 0.05);
    /* 外側のほのかな影 */
    transition: all 0.3s ease;
    /* ホバー時の変化を滑らかに */
    border: 1px solid #ddd;
    /* 薄い境界線 */
    display: flex;
    /* Flexboxを使用 */
    justify-content: center;
    /* 水平方向に中央揃え */
    align-items: center;
    /* 垂直方向に中央揃え */
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
}

.mogi_map li:hover {
    background-color: #f0f0f0;
    /* ホバーで白に変更 */
    color: #000;
    /* テキストを黒に */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
        /* ホバー時の影を強調 */
        0 0 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
    /* 少し上に浮かせる */
}

.mogi_map a {
    text-decoration: none;
    color: #fff;
}

.honbu li {
    list-style-type: none;
    width: 121px;
    height: 100px;
    background-color: #f00;
    color: #fff;
    font-size: 15px;
}

.honbu li:hover {
    background-color: #e60012;
    /* ホバーで白に変更 */
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
        /* ホバー時の影を強調 */
        0 0 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
    /* 少し上に浮かせる */
}

.gomi li {
    list-style-type: none;
    width: 255px;
    height: 50px;
    background-color: #444;
    color: #fff;
    font-size: 15px;
}

.gomi li:hover {
    background-color: #222;
    /* ホバーで白に変更 */
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
        /* ホバー時の影を強調 */
        0 0 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
    /* 少し上に浮かせる */
}

.ginzasen {
    height: 8px;
    /* 線の高さを調整 */
    background: repeating-linear-gradient(90deg,
            /* 水平方向にストライプ */
            #F39700,
            /* 最初の色 */
            #F39700 20px,
            /* 10pxまで黄色 */
            black 20px,
            /* 10pxから黒に切り替わり */
            black 40px
            /* 20pxまで黒、繰り返し */
        );
}

.ginzasen2 {
    width: 10px;
    /* 線の幅 */
    height: 770px;
    /* 線の高さ */
    margin-left: 10px;
    background: repeating-linear-gradient(0deg,
            /* 垂直方向にストライプ */
            #F39700,
            /* 最初の色 */
            #F39700 20px,
            /* 10pxまで黄色 */
            black 20px,
            /* 10pxから黒に切り替わり */
            black 40px
            /* 20pxまで黒、繰り返し */
        );
}

.ginzasen3 {
    position: absolute;
    /* 絶対位置を指定 */
    top: 1114px;
    /* 上からの位置を調整 */
    right: 2px;
    /* 左からの位置を調整 */

    width: 8px;
    /* 線の幅 */
    height: 770px;
    /* 線の高さ */
    transform: rotate(85deg);
    /* 80度回転 */
    transform-origin: top left;
    /* 回転の基点を左上に */
    background: repeating-linear-gradient(0deg,
            /* 垂直方向にストライプ */
            #F39700,
            /* 最初の色 */
            #F39700 20px,
            /* 20pxまでオレンジ */
            black 20px,
            /* 20pxから黒に切り替わり */
            black 40px
            /* 40pxまで黒、繰り返し */
        );
}


@media (max-width: 768px) {
    .ginzasen3 {
        top: 1264px;
        /* 上からの位置を調整 */
        right: 2px;
        /* 左からの位置を調整 */

    }
}

.wanpaku li {
    list-style-type: none;
    color: #fff;
    background-color: #F39700;
    justify-content: center;
    align-items: center;
}

.wanpaku li:hover {
    color: #fff;
    background-color: #ffa91f;
}

.wanpaku a {
    text-decoration: none;
    color: #fff;
}

.space_trip {
    background-image: url(../image/map/SPACE_TRIP_map.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}



.bus h1 {
    font-size: 42px;
    margin: 50px 0 3px 3px;
}


.bus h3 {
    font-size: 60px;
    text-align: center;

}

.bus a {
    color: blue;
}

.bus p {
    text-align: right;
    font-size: 30px;
}


table.bus-schedule {
    width: 100%;
    border-collapse: collapse;
    font-size: 22px;
}

table.bus-schedule th,
table.bus-schedule td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}

table.bus-schedule th:first-child,
table.bus-schedule td:first-child {
    width: 100px;
    /* 1列目の幅を小さく設定 */
}

table.bus-schedule th,
table.bus-schedule td {
    font-size: 26px;
    width: 300px;
    /* 2列目と3列目の幅を指定 */
}

table.bus-schedule tr.highlight {
    border: 3px solid red;
    background-color: #ffefef;
}

.sensyuken {
    font-family: 'Arial', sans-serif;
    padding: 20px;
    border-radius: 10px;
    max-width: 1200px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: #222;
}

.sensyuken h1 {
    font-size: 60px;
    text-align: center;
    color: #f76c6c;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.sensyuken h2 {
    font-size: 35px;
    text-align: center;
    color: red;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.sensyuken p {
    font-size: 25px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
    background-color: #fff;
    padding: 15px;

}

.sensyuken ul {
    width: 620px;
    list-style-type: none;
    padding: 10px;

    margin: auto;
}

.sensyuken ul li {
    font-size: 22px;
}


.sensyuken a {
    color: blue;
}

.kyosanpage {
    display: grid;
    grid-template-columns: repeat(2, 587px);
    /* 2列に587pxで設定 */
    grid-auto-rows: 418px;
    /* 画像の高さを固定 */
    justify-content: center;
    /* 中央揃え */
    grid-gap: 0;
    /* 隙間をなくす */
}

.kyosanpage img {
    border-top: 1px solid darkred;
    /* 上にのみ枠線 */
    border-left: 1px solid darkred;
    /* 左にのみ枠線 */
    width: 587px;
    /* 画像の幅を固定 */
    height: 418px;
    /* 画像の高さを固定 */
    box-sizing: border-box;
    /* 枠線がサイズに影響しないようにする */
}

/* 最後の画像だけ特定のスタイル */
.kyosanpage .wide-image {
    width: 1174px;
    /* 幅を1169pxに設定 */
    height: auto;
    /* 高さは自動調整 */
    border: 1px solid darkred;
    /* 枠線をすべてに適用 */
    grid-column: 1 / -1;
    /* 1列目から最後の列まで広げる */
}

.kyosanpage a {
    display: block;
}

.kyosanpage .right-border {
    border-right: 1px solid darkred;
    /* 右にのみ枠線 */
}

.buppin {
    padding: 25px;
}

.buppin ul {
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /* 要素を折り返し */
    font-size: 40px;
    justify-content: space-between;
    /* 要素間のスペースを均等にする */

}

.buppin li {
    width: 550px;
    box-sizing: border-box;
    /* パディングやボーダーを含めても500pxに収める */

    list-style-type: none;
    height: 100px;
    color: #000;
    margin: 3px 3px 3px 3px;
    padding: 10px 1px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1),
        0 0 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid #ddd;
    display: flex;
    justify-content: center;
    /* 水平方向に中央揃え */
    align-items: center;
    /* 垂直方向に中央揃え */
    text-align: center;
}

.buppin h1 {
    margin: 0;
    color: #0000cd;
}


/*データサイエンスクラブ用*/

.puzzle-container {
    width: 600px;
    /* 全体の幅を明示的に指定 */
    height: 600px;
    /* 全体の高さも指定 */
    margin: 20px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3列のグリッド */
    grid-template-rows: repeat(3, 1fr);
    /* 3行のグリッド */
    gap: 5px;
    /* タイル間のスペース */
}

.tile,
.empty-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d82115;
    color: #fff;
    font-size: 5em;
    cursor: pointer;
    border: 1px solid #ccc;
    width: 200px;
    /* 各タイルの幅 */
    height: 200px;
    /* 各タイルの高さ */
}

.empty-tile {
    background-color: #ffffff;
    /* 空白タイルの背景色 */
    cursor: default;
    /* 空白タイルはクリック不可 */
}

#shuffle-button {
    width: 200px;
    height: 60px;
    font-size: 1.5em;
}


#game1 {
    text-align: center;
    border: 2px solid #aaa;
    border-radius: 10px;
    padding: 30px;
}

#game2 {
    text-align: center;
    border: 2px solid #aaa;
    border-radius: 10px;
    padding: 10px;
}

#game2 p {
    font-size: 40px;
}

.result {
    margin-top: 20px;
    font-size: 40px;
}

.selected-digits {
    font-size: 40px;
    margin-top: 10px;
    color: blue;
    font-weight: bold;
}

#submit {
    width: 200px;
    height: 60px;
    font-size: 1.5em;
}


.game-thumbnail {
    width: 560px;
    height: 150px;
    border: 1px solid #aaa;
    border-radius: 10px;
    margin: 10px;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    line-height: 150px;
    font-size: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.game-thumbnail:hover {
    transform: scale(1.05);
}


.game-content {
    display: none;
    /* 初期状態は非表示 */
    margin-top: 20px;
}


.mogitensenshu {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1180px;
    height: 123px;
    background-size: cover;
    background-position: center;
    border: 3px solid #999;
    border-radius: 10px;
}

.mogitensenshu:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15),
        /* ホバー時の影を強調 */
        0 0 25px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
    /* 少し上に浮かせる */
}


.seisakusha {
    display: flex;
    font-size: 25px;
    gap: 50px;
    list-style-type: none;
    margin: 10spx;

}

.seisakukouki {
    position: relative;
    margin: 10px;
    border: 2px solid #999;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.seisakukouki:hover {
    transform: scale(1.05);
}



.seisakukouki img {
    width: 100%;

    margin: auto;
    display: block;
}

#game3 {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
}

#game3 .game-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 20px;
    justify-content: center;
}

#game3 .card {
    width: 200px;
    height: 200px;
    background-color: #3498db;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 80px;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    margin: auto;
}

#game3 .card:hover {
    transform: scale(1.05);
}

#game3 .card.flipped {
    background-color: #2ecc71;
}

#game3 button {
    font-size: 20px;
    padding: 10px 20px;
    margin: 10px;
    cursor: pointer;
}

#game3 #score,
#game3 #timer {
    font-size: 24px;
    margin: 10px 0;
}

/* ================================
    timer
==================================*/
.countdown {
    font-family: Arial, sans-serif;

    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.countdown-container {
    text-align: center;
    padding: 30px 20px;
    background-image: url("../image/base/timerback.jpg");
    border-radius: 5px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 1200px;
}

.title {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 30px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    to {
        text-shadow: 2px 2px 20px rgba(255, 255, 255, 0.8);
    }
}

.countdown-display {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
}

.time-unit {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    padding: 20px;
    width: 100px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease;
}

.time-unit:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.3);
}

.time-number {
    font-size: 3em;
    font-weight: bold;
    display: block;
    line-height: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.time-label {
    font-size: 0.9em;
    margin-top: 5px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 共通の入力スタイル */
.event-input input,
.date-input input {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    padding: 15px;
    font-size: 1.1em;
    color: white;
    outline: none;
    transition: all 0.3s ease;
}

.event-input input {
    width: 300px;
    text-align: center;
}

.event-input input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.event-input input:focus,
.date-input input:focus {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.3);
}

.event-input,
.date-input {
    margin-bottom: 20px;
}

.pulse {
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

/*en.html セレクトボタン*/
.map-select-en-button-container {

    margin: 20px 10px;
    display: flex;
    gap: 10px;
}

.map-select-en-button {
    width: 570px;
    height: 200px;
    font-size: 60px;
    text-align: center;
    background-color: #D82115;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: #ffffff;
    display: flex;
    justify-content: center;
    /* 横方向中央 */
    align-items: center;
    /* 縦方向中央 */
}

.map-select-en-button:hover {
    background-color: #ff6363;
    transform: scale(1.05);
}

/* kyosan_flex - 横並びレイアウト用の新しいクラス */
.kyosan_flex {
    display: flex;
    align-items: center;
    /* 上揃え */
    gap: 20px;
    /* 画像とテキストの間隔 */

}

/* 画像のスタイル */
.kyosan_flex .ceremonyimg {
    width: 350px;
    /* 画像の幅を固定 */
    height: auto;
}

/* テキストコンテンツのスタイル */
.kyosan_flex .day_content {
    flex: 1;
    /* 残りのスペースを全て使用 */
}

/* リストのスタイル調整 */
.kyosan_flex .day_content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.kyosan_flex .day_content li {
    line-height: 1.6;
    color: #333;
}

/* リンクのスタイル */
.kyosan_flex .day_content a {
    color: #0066cc;
    text-decoration: none;
}

.kyosan_flex .day_content a:hover {
    text-decoration: underline;
}

/* ====== レイアウト全体 ====== */
.kyosan-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* カード間の余白 */
    margin-top: 20px;
}

/* ====== カードボックス ====== */
.kyosan_box {
    flex: 1 1 200px; /* 最低幅200px、残りは自動調整 */
    max-width: 250px;
    height:100px;
    border: 2px solid #999;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: #a09393; /* 背景に色を入れると文字が見やすい */
}

.kyosan_box:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 16px rgba(199, 78, 78, 0.25);
}

/* ====== リンク全体をカードに ====== */
.kyosan_box a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    height: 100%;
    background-image: url("../image/base/aichi.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* ====== テキスト ====== */
.kyosan_box p {
    font-family: "Kaisei Decol", serif;
    font-weight: 800;
    text-align: center;
    color: #fff;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.6);
    font-size: 2.5rem;
}

/* ====== 協賛企業一覧リンク ====== */
.all-sponsors {
    flex-basis: 100%;
    text-align: center;
    margin-top: 30px;
}

.all-sponsors a {
    font-weight: bold;
    font-size: 2rem;
    color: #0066cc;
    text-decoration: underline;
}



/* マップ埋め込み */
.video-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  margin: 30px auto;
  padding: 16px;
  max-width: 600px;
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

/* ===== タイトル ===== */
.video-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  text-align: center;
}

/* ===== Instagram埋め込み ===== */
.embed-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

/* Instagram埋め込み本体 */
.instagram-media {
  width: 100% !important;
  max-width: 100% !important;
  min-width: unset !important;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

/* ===== 背景など ===== */
body {
  background: #f5f5f7;
  font-family: "Segoe UI", "Hiragino Sans", "Meiryo", sans-serif;
  padding: 20px;
}

/* ===== ポップアップ用（既存） ===== */
.popup {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.popup-content {
  margin: 5% auto;
  display: block;
  max-width: 90%;
  border-radius: 8px;
}

.close {
  position: absolute;
  top: 15px;
  right: 25px;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
}