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

/* スクロールロック用の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;
}

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

.link-blue{
    color: #0000cd;
}
/*=======================================================
  タイトルロゴ・アニメーション
========================================================*/

/* メインタイトルロゴ（中央固定表示） */
#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: #dc143c;
}

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: red;
  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 rgb(255, 0, 0);
}

.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: red;
    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 80px;
}

.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;
    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: 22px;
    padding: 20px;
    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;
    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: center;
    background-color: #eee;
    font-style: none;
}

.introduction_member img {
    margin-right: 10px;
}

/* 名前リスト */
.name-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* 基本の名前リスト項目（4列表示） */
.name-list li {
    flex: 1 1 25%;
    text-align: center;
    font-size: 130%;
    padding: 0;
}

/* 列数調整用クラス */
.name-list li.wide-name2 {
    flex: 1 1 50%;
    /* 2列表示 */
}

.name-list li.wide-name3 {
    flex: 1 1 33.33%;
    /* 3列表示 */
}

.name-list li.wide-name5 {
    flex: 1 1 20%;
    /* 5列表示 */
}

.name-list li.wide-name6 {
    flex: 1 1 16.66%;
    /* 6列表示 */
}

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

.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: 25px;
    }

    .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;
    }
}

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

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

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

/* タイムテーブルコンテナ */
.timetable-container {
    max-width: 1100px;
    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: 150px;
    text-align: left;
}

.event a {
    font-size: 25px;
    color: #007BFF;
    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;
}

/* プログラムエリア */
.programarea_day1 {
    padding: 10px;
}

.programarea_day1 h1 {
    margin: 0px;
    font-size: 35px;
}

.programarea_day1 hr {
    margin-top: 0px;
    margin-bottom: 15px;
}

.programarea_flex {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ceremonyimg {
    width: 360px;
    height: auto;
}

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

.kikaku_area {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.kikaku_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    max-width: 100%;
}

.post {
    width: 550px;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
}

.post-image {
    width: 550px;
    height: 412px;
    object-fit: cover;
}

.post-content {
    padding: 15px;
}

.post-info {
    font-size: 24px;
    color: #333;
    margin: 10px;
}

.post-comment {
    font-size: 23px;
    text-align: center;
    color: #333;
}

.post-link {
    text-decoration: none;
}


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


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

.next {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    /* テキストの色 */
    background-color: #FF4D4D;
    /* ボタンの背景色（赤色） */
    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: #C62828;
    /* ホバー時の背景色（濃い赤） */
    transform: translateY(-3px);
    /* ホバー時の浮き上がり効果 */
}

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


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

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

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

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

/* ライブ情報メインコンテナ */
.live_infomation {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    padding: 20px;
    background-color: #000;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

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

/* ライブ情報セクション */
.live-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    text-align: center;
}

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

/* アーティスト詳細情報 */
.artist-details {
    color: #fff;
}

.artist-details h3 {
    text-align: center;
    font-size: 35px;
    margin: 7px 0px;
    color: #fff;
}

.artist-details p {
    font-size: 26px;
    margin: 8px 0px;
}

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

.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: 500px;
    height: 70px;
    display: inline-block;
    margin-top: 30px;
    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: 200px;
    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 (min-width: 768px) {
    .live-title img {
        width: 80%;
        display: block;
        margin: auto;
    }

    .live-info {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 15px;
        text-align: left;
    }

    .artist-image-container {
        flex: 1;
        max-width: 42%;
        margin-top: 25px;
    }

    .artist-details {
        flex: 2;
        max-width: 55%;
    }

    .artist-details p {
        font-size: 23px;
    }

    .ticket {
        padding: 0px 15px 0px 0px;
    }

    .ticket-button {
        width: 85%;
        height: 80%;
        font-size: 18px;
    }

    .br_responsive {
        display: none;
    }
}

/* ==========================================================================
   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: red;
    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 10px;
}

.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: red;
    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: 121px;
    height: 100px;
    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{
	width:1170px;
	display:flex;
	background-color:#C0C0C0;
	padding:0px 0px 0px 10px;
	justify-content: flex-end; /* li要素を右に寄せる */
}

.wanpaku li {   
    list-style-type: none;
    width: 230px;
    height: 50px;
    color:#fff;
    margin: 3px;
    padding: 6px 1px;
    border-radius: 10px;
    background-color: #F39700; /* 薄いグレー */
    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:20px;

}

.wanpaku li:hover {
    background-color: #F39701; /* ホバーで白に変更 */
    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); /* 少し上に浮かせる */
}

.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;
}

.kitchencararea {
    background-color: #C0C0C0;
    padding: 20px;
}

.kitchen_box {
    display: flex;
    /* Flexboxを使用 */
    gap: 100px;
}

.kitchen_top {
    display: flex;
    margin-left: 15px;
}

.kitchen_top li {
    list-style-type: none;
    width: 120px;
    height: 40px;
    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;
    /* 垂直方向に中央揃え */
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13.5px;
    text-align: center;
}


.kitchen_top 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);
    /* 少し上に浮かせる */
}

.boxmap {
    width: 280px;
    height: 30px;
    margin: 3px;
    padding: 6px 1px;
    border-radius: 10px;
    background-color: #094;
    /* 薄いグレー */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1),
        /* 柔らかい影 */
        0 0 15px rgba(0, 0, 0, 0.05);
    /* 外側のほのかな影 */
    border: 1px solid #ddd;
    /* 薄い境界線 */
}

.kitchen_car_area {
    display: flex;
    background-color: #C0C0C0;
    height: 422px;
}



.paul {
    width: 200px;
    height: 100%;
    /* 親要素がどれだけの高さになるかに依存 */
    display: flex;
    /* Flexboxを使用 */
    justify-content: center;
    /* 水平方向に中央揃え */
    align-items: center;
    /* 垂直方向に中央揃え */

}




.notpaul {
    text-align: right;
    margin-bottom: 15px;
    width: 1000px;
}

.empty {
    height: 150px;
}

.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;
}