p, h1, h2, h3, h4, h5, h6, ul, li, ol, a, img, body,td,quote,small,form,input,label{
	margin: 0;
	padding: 0;
}

html{
	 
	overflow-y:scroll;
}

a img{
	border: none;
}

a{
    outline: none;
}

body{
	margin: 0;
	padding: 0;
	position: relative;
	top: 0;
	width: 1026px;
	margin-left: auto;
	margin-right: auto;
}

#container{
	width: 1024px;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	height :100%;
	overflow: hidden;
	border-right : 1px solid #ccc;
	border-left : 1px solid #ccc;
}

/*--------------------------------------
  ヘッダー（バナー画像のみ）
--------------------------------------*/

#header {
  width: 1024px;
  margin: 0 auto;
  text-align: center;
  background: none;   /* 黄色の♪背景は使わない */
}

/* バナー画像 */
#header img {
  display: block;
  width: 1024px;   /* 実際の画像サイズに合わせて調整 */
  height: auto;
  margin: 0 auto;
  border: none;
}


/*--------  ここから検索の設定  --------*/
/*------  searchsection  ------*/
#header #searchsection{
	clear: both;
	width: 524px;
	margin-top: 5px;
}

#header #searchsection #searcharea{
	width: 330px;
}

#header #searchsection #search{
	width: 330px;
	margin: 0 auto;
}

#header #searchsection #search input.s_form{
	width: 260px;
}

/*--------  ここまで検索の設定  --------*/

/*--------------------------------------
	ここまでヘッダーの設定
--------------------------------------*/

/*--------------------------------------
	ここからナビバーの設定
--------------------------------------*/
/*--------------------------------------
  グローバルナビゲーション（音楽カジュアル風）
--------------------------------------*/

#globalnavigation {
  clear: both;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  background: linear-gradient(90deg, #2c2f5b, #3b5ba7, #2c2f5b);
  overflow-x: auto;
  box-sizing: border-box;
  border-radius: 8px;
}

#navi {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

#navi ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 6px;
  list-style: none;
  flex-wrap: nowrap;
}

#navi ul li {
  flex: 0 0 auto;
  height: 42px;
  line-height: 42px;
  margin: 0 4px;
}

/* 1. 基本の文字色（リンクなし）をグレーにする */
#navi ul li {
  color: #888888;
}

/* 2. aタグ（リンクあり）の場合のみ白にする */
#navi ul li a {
  display: block;
  padding: 0 14px;
  font-size: 0.85em;
  font-weight: bold;
  color: #ffffff; /* 白を指定 */
  text-decoration: none;
  border-radius: 20px;
  transition: 
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.15s ease;
}

/*--------------------------------------
  日数カウントダウン
--------------------------------------*/

/* ホバー・選択中（音符が跳ねるイメージ） */
#navi ul li a:hover,
#navi ul li a:focus,
#navi ul li.select a {
  background-color: rgba(255, 255, 255, 0.9);
  color: #2c2f5b;
  transform: translateY(-2px);
}

/* クリック時：リズム感 */
#navi ul li a:active {
  transform: translateY(0);
  opacity: 0.85;
}

/* 和太鼓だけ文字サイズ調整 */
#navi ul li#navigation_wadaiko a {
  font-size: 0.75em;
  white-space: nowrap;
}
/* ===============================
  全体
================================ */
#countdown {
  position: relative;
  text-align: center;
  margin: 40px auto;
  padding: 18px 55px 22px;
  background: linear-gradient(135deg, #7EC8E3, #B8EBD8, #EFFFF9);
  background-size: 400% 400%;
  color: #0B4F6C;
  font-size: 50px;
  font-weight: 900;
  border-radius: 30px;
  width: fit-content;
  border: 6px solid #ffffff;
  box-shadow: 0 0 35px rgba(0,0,0,0.15);
  animation: bgFlow 10s ease infinite, glowPulse 3s infinite;
}

/* ===============================
  あるぷるちゃん ジャズダンス（揺れ）
================================ */

/* countdown内のキャラ用エリア */
.shinano-group {
  position: absolute;
  left: 0;
  bottom: -25px;        /* 数字の下に配置 */
  width: 100%;
  height: 160px;
  pointer-events: none;
}

/* 共通 */
.shinano-wrap {
  position: absolute;
}

/* ③ 散らばせ配置（確定版） */
.shinano-wrap.left {
  left: 4%;
  top: 58%;
}

.shinano-wrap.center {
  left: 48%;
  top: 52%;
}

.shinano-wrap.right {
  left: 88%;
  top: 52%;
}

/* キャラ本体 */
.shinano-wrap img {
  width: 80px;
  display: block;
  transform-origin: center bottom;
  animation: jazzSway 1.6s ease-in-out infinite;
}

/* テンポずらし */
.shinano-wrap.left img {
  animation-delay: 0s;
}

.shinano-wrap.center img {
  animation-delay: 0.2s;
}

.shinano-wrap.right img {
  animation-delay: 0.4s;
}

/* 回転なし・体を揺らすジャズダンス */
@keyframes jazzSway {
  0% {
    transform: translateY(0) skewX(0deg);
  }
  15% {
    transform: translateY(-6px) skewX(-6deg);
  }
  30% {
    transform: translateY(0) skewX(6deg);
  }
  45% {
    transform: translateY(-10px) skewX(-4deg);
  }
  60% {
    transform: translateY(0) skewX(4deg);
  }
  80% {
    transform: translateY(-4px) skewX(-2deg);
  }
  100% {
    transform: translateY(0) skewX(0deg);
  }
}


/* ===============================
  テキスト
================================ */
.count-text {
  line-height: 1.2; /* ← 行間を詰める */
}

#days-remaining {
  display: inline-block;
  color: #E63946;
  font-size: 88px;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}

/* ===============================
  チケット未販売表示
================================ */
#ticket-alert.info-only {
  margin-top: 12px;      /* ← 縮小 */
  font-size: 20px;
  color: #2A9D8F;
  background: rgba(255,255,255,0.7);
  padding: 10px 22px;   /* ← 縮小 */
  border-radius: 22px;
  display: inline-block;
  box-shadow: 0 0 12px rgba(0,0,0,0.1);
  animation: infoPulse 3s ease-in-out infinite;
}

/* ===============================
  音符
================================ */
.note {
  position: absolute;
  font-size: 38px;
  color: #f00ce8;
  animation: floatNotes 6s linear infinite;
}
.note1 { top: -10px; left: 30px; }
.note2 { top: -25px; right: 40px; animation-delay: 2s; }
.note3 { bottom: -20px; right: 80px; animation-delay: 4s; }

/* ===============================
  アニメーション
================================ */
@keyframes bgFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 25px rgba(255,255,255,0.7); }
  50% { box-shadow: 0 0 45px rgba(255,255,255,1); }
}

@keyframes shinanoCenter {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@keyframes swayLeft {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}

@keyframes swayRight {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@keyframes floatNotes {
  0% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-35px); opacity: 1; }
  100% { transform: translateY(0); opacity: 0.7; }
}

@keyframes infoPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ===============================
   信州（長野県）テーマ
================================ */
body {
  background:
    linear-gradient(to bottom, #cfe9f7 0%, #eef9f1 60%, #ffffff 100%);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", sans-serif;
}

/* ===============================
   開催概要 全体（森と空）
================================ */
.event-outline {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, #e3f4ff 0%, #f2fff5 60%, #ffffff 100%);
}

.event-outline::before {
  content: "";
  position: absolute;
  left: -10%;
  bottom: 0;
  width: 120%;
  height: 120px;
  background: linear-gradient(to top, #9bc7a0, #dff3e5);
  clip-path: polygon(0 100%, 10% 70%, 25% 85%, 40% 60%, 55% 80%, 70% 55%, 85% 75%, 100% 60%, 100% 100%);
  opacity: 0.35;
  pointer-events: none;
}

/* ===============================
   タイトル
================================ */
.event-title {
  background: linear-gradient(to right, #2f6fa3, #4fa3c7);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.event-catch {
  color: #2f7d57;
}

.event-date {
  color: #355d7a;
}

/* ===============================
   各日程カード
================================ */
.event-box {
  background:
    linear-gradient(135deg, #ffffff 0%, #f7fbf8 100%);
  box-shadow:
    0 8px 18px rgba(60,120,90,0.15),
    inset 0 0 20px rgba(120,200,160,0.08);
  border: 1px solid rgba(100,160,130,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-box:hover {
  transform: translateY(-6px);
  box-shadow:
    0 14px 28px rgba(60,120,90,0.25),
    inset 0 0 25px rgba(120,200,160,0.12);
}

.event-box.green { border-left: 10px solid #4f8f6f; }
.event-box.blue  { border-left: 10px solid #3a7fbf; }
.event-box.red   { border-left: 10px solid #b44a2a; }

.event-box a {
  color: #1c6fc4;
  position: relative;
}

.event-box a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: linear-gradient(to right, #4fa3c7, #7fd1a1);
  transition: width 0.3s ease;
}

.event-box a:hover::after {
  width: 100%;
}

/* ===============================
   チラシ
================================ */
.flyer-img {
  background: linear-gradient(135deg, #fff6e6, #fff);
  padding: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flyer-img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(180,80,40,0.6);
}

.flyer-text {
  letter-spacing: 0.1em;
  text-shadow: 0 0 6px rgba(120,180,120,0.5);
}
/*--------------------------------------
  スマホ対応
--------------------------------------*/
@media screen and (max-width: 768px) {
  #globalnavigation {
    border-radius: 0;
  }

  #navi ul li a {
    font-size: 0.85em;
    padding: 0 12px;
  }

  #navi ul li#navigation_wadaiko a {
    font-size: 0.8em;
  }
}


/*--------------------------------------
	ここから左カラムの設定
--------------------------------------*/
#side_section{
	float: left;
	width: 250px;
	min-height: 1200px;
	margin-top: 0;
}

#index #side_section{
	border-top: solid 1px #ccc;
}

/*----------ここからSNSの埋込------------------*/

#side_section #snssection{
	width: 250px;
	margin: 20px 0;
	text-align: center;
}

#side_section #snssection1{
	padding-bottom: 5px;
}

#side_section #snssection1 img{
	width: 240px;
}

#side_section #snssection2{
	padding-bottom: 20px;
}

#side_section #snssection2 a{
	height: 36px;
}

#side_section #snssection3{
	text-align: center;
}

#side_section #snssection3 img{
	width: 120px;
	height: 50px;
}

#side_section #snssection3 a{
	height: 36px;
}



/*----------ここまでSNSの埋込------------------*/
#side_section #merchandise_info{
	width: 250px;
	margin: 0 auto 15px auto;
}

#side_section #merchandise_info img{
	width: 248px;
}


/*----------------------------------------
  長野県（信州）モチーフ サブナビ
----------------------------------------*/

.section1{
    background: linear-gradient(135deg, #4A90C2, #5FA777); /* 空→森 */
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    margin-bottom: 20px;
    color: #ffffff;
}

/* ナビリスト全体 */
.section1 ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 各メニュー */
.section1 ul li{
    font-weight: bold;
    margin: 10px 0;
    background: #F4F7F8; /* 雪のような白 */
    padding: 6px;
    border: 1px solid #5FA777;
    border-radius: 10px;
    color: #2F4F4F;
    transition: all 0.3s ease;
}

/* ホバー */
.section1 ul li:hover{
    background-color: #C94A4A; /* 信州りんご */
    border-color: #ffffff;
    color: #ffffff;
    transform: translateX(5px); /* 少し動く */
}

/* リンク */
.section1 ul li a{
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 6px;
}

/* 重要項目 */
.section1 ul li.point{
    background: #E8F3EC;
    border-left: 6px solid #5FA777;
}

/*----------------------------------------
  サイドバー全体
----------------------------------------*/
.sidebar-nav{
  width: 190px;
  padding: 20px;
  background: #F4F7F8;
  border-right: 3px solid #5FA777;
  box-shadow: 3px 0 8px rgba(0,0,0,0.1);
}

/* タイトル */
.sidebar-nav .section-title{
  font-size: 1.2em;
  font-weight: bold;
  color: #4A90C2; /* アルプスの空 */
  margin: 20px 0 10px;
  border-bottom: 2px solid #5FA777;
  padding-bottom: 6px;
}

/* サイドバーリンク */
.sidebar-nav ul li a{
  display: block;
  padding: 10px 14px;
  font-size: 1.05em;
  color: #2F4F4F;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.25s ease;
}

.sidebar-nav ul li a:hover{
  background-color: #E8F3EC; /* 高原の草原 */
  color: #C94A4A; /* りんご */
}




/*--------------  会員専用ログイン  ------------------*/
#index #memberlogin{
	width: 249px;
	text-align: center;
	margin: 0 auto 10px;
}

/*----------  今週のうた新  -----------*/
#side_section #side_navi #utashin_thisweek{
	width: 249px;
	height: 340px;
	padding: 1px 0 5px 0;
}

#side_section #side_navi #utashin_thisweek #linkmenu .submenu{
	width: 249px;
	text-align: center;
	font-size: 1.4em;
	font-weight: bold;
}

#side_section #side_navi #utashin_thisweek #linkmenu .submenu a{
	text-decoration: none;
}

#side_section #side_navi #utashin_thisweek #linkmenu .submenu a img{
	width: 235px;
	box-shadow: 2px 2px 15px 2px rgba(0, 0, 0, .2);
}


/*--------------------------------------
	ここまで左カラムの設定
--------------------------------------*/

#sagafes_program_section{
	width: 240px;
}

#index #side_section #sagafes_program_section p a{
	text-align: center;
}


/*--------------------------------------
    ここからメインカラムの設定  
--------------------------------------*/
#main{
	width: 772px;
	min-height: 1200px;
	float: left;
	border-left: 1px solid #ccc;
	background-image: linear-gradient(to bottom,#f0fff0,#ffffff);
	background-repeat: no-repeat;
}

#index #main{
	border-top: 1px solid #ccc;
}

#main #in_main{
	margin: 5px 20px 5px;
}


/*--------------------------------------
  ここまでメインカラムの設定
--------------------------------------/*


/*----------------------------------------
	ここからトップページの設定
----------------------------------------*/
/* 共通ボタンスタイル（モダン・ミニマル） */
#scrollToTop, #scrollToBottom {
    position: fixed;
    bottom: 30px; /* 下端からの距離 */
    z-index: 9999;
    
    /* サイズと形状 */
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* 完全な円形 */
    
    /* 色と質感 */
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* アニメーション */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    font-size: 18px;
}

/* ホバー時の挙動 */
#scrollToTop:hover, #scrollToBottom:hover {
    background: #333;
    color: #fff;
    transform: translateY(-3px); /* 軽く浮き上がる */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

/* 個別配置：↑を左下、↓を右下に */
#scrollToTop {
    left: 20px;
}

#scrollToBottom {
    right: 20px;
}

/* クラスによる表示・非表示の制御（JSで制御している場合） */
.show {
    opacity: 1 !important;
    visibility: visible !important;
}

button:not(.show) {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 出演者登録受付中バナー */
.shutsuen-banner {
  margin: 20px auto;
  text-align: center;
}

/* 親コンテナのレスポンシブ対応 */
.sidebar-link {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 10px;
  text-align: center;
  margin-top: 15px;
}

/* ロゴラベルの基本デザイン */
.logo-label {
  box-sizing: border-box;
  display: inline-block;
  width: 225px;
  padding: 15px 10px;
  background: linear-gradient(135deg, #3366cc, #66ccff);
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  line-height: 1.4;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* ホバー時に軽く拡大 */
.logo-label:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* スマホ対応（幅500px以下） */
@media (max-width: 500px) {
  .logo-label {
    width: 90%;
    font-size: 16px;
    padding: 12px;
  }
}
/* PCと同じ幅を維持してスマホに縮小表示 */
html, body {
  min-width: 1200px; /* PC基準幅を固定 */
  overflow-x: auto; /* 必要なら横スクロール */
}

/* 画像を縮小表示できるように */
img {
  max-width: 100%;
  height: auto;
}

/*--------------------------------------
  ここまでトップページの設定
--------------------------------------/*




/* =======================================
    Slideshow & Common Elements
======================================= */

/* リンク装飾 */
#index #slideshow a:link,
#index #slideshow a:visited,
#index #slideshow a:active,
#index #slideshow a:hover {
    text-decoration: none;
    color: #000;
}

/* スライドショー全体 */
#index #slideshow {
    margin: 0 auto 10px auto;
    width: 100%;
    max-width: 1024px;
    text-align: center;
}

/* メイン画像枠 */
#index #slideshow div {
    width: 100%;
    max-width: 1024px;
    height: 330px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    background-size: cover;
    background-position: center;
}

/* メイン画像内のオーバーレイ配置 */
#index #slideshow div div {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

/* -------------------------------
   サムネイル（写真小） 横スクロール対応
-------------------------------- */
#index #slideshow ul {
    width: 100%;
    margin: 3px auto 0 auto;
    display: flex;
    gap: 5px;
    padding: 0;
    height: 45px;
    overflow-x: auto;  /* 横スクロール */
    overflow-y: hidden;
    white-space: nowrap;
}

#index #slideshow ul::-webkit-scrollbar {
    height: 8px;
}

/* サムネイル画像 */
#index #slideshow ul li {
    width: 100px;
    list-style: none;
    display: inline-block;
}

#index #slideshow ul li img {
    width: 100px;
    height: 50px;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s;
}

/* アクティブ強調 */
#index #slideshow .active {
    opacity: 1 !important;
    border: 2px solid #ff6600;
}

/* =======================================
    その他（元のスタイル維持）
======================================= */

/* 下へスクロールボタン */
#scrollToBottom {
    background: linear-gradient(135deg, #ff7eb3, #ff758c);
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 20px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    position: fixed;
    bottom: 20px;
    right: 20px;
}

#scrollToBottom:hover {
    background: linear-gradient(135deg, #ff758c, #ff7eb3);
    transform: scale(1.1);
}

/* 全体フォントと背景 */
body {
    font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
    background-color: #fff8f0;
    color: #333;
    line-height: 1.6;
}

/* summaryボタン */
details summary {
    cursor: pointer;
    padding: 12px 20px;
    font-size: 1.1em;
    font-weight: bold;
    background: linear-gradient(to right, #ffcc70, #ff8c94);
    color: #fff;
    border: none;
    border-radius: 8px;
    margin-top: 20px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    transition: background 0.3s ease;
}

details summary:hover {
    background: linear-gradient(to right, #ffb347, #ff758c);
}

/* 折りたたみ内部のテーブル */
details table {
    margin-top: 15px;
    width: 100%;
    border-collapse: collapse;
    background-color: #fffdf9;
    border-radius: 8px;
    overflow: hidden;
}

details td {
    padding: 12px;
    border-bottom: 1px solid #f2dede;
    vertical-align: top;
}

/* 日付セル */
.datearea {
    font-weight: bold;
    color: #e67373;
    white-space: nowrap;
}

/* 説明リンク */
.explanarea a {
    color: #ff4d79;
    text-decoration: none;
    font-weight: bold;
}
.explanarea a:hover {
    text-decoration: underline;
    color: #ff1a55;
}

/* アニメーション */
details[open] table {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}



/* =======================================
    ClearFixElements
======================================= */
#index #slideshow ul:after {
    content: "";
    height: 0;
    clear: both;
    display: block;
    visibility: hidden;
}

#index #slideshow ul {
    display: inline-block;
    overflow: hidden;
}

/* スマホやタブレットでもPC画面と同じ設定にする */
#index #slideshow div img {
    object-fit: cover; /* 画像が切れないように調整 */
}

#index #slideshow ul li img {
    object-fit: cover; /* サムネイル画像も同様 */
}

/* メディアクエリを削除し、全画面共通設定 */


/*-----  ここまでscreen.css  ------*/
/*----  ここまでフラッシュの設定  ----*/

/*--------------------------------------------------------
	ここからmain共通の設定
----------------------------------------------------------*/
.title{
    height: 50px; /* 高さ */
    margin: 20px auto; /* 上下左右のマージン */
    line-height: 50px; /* テキストの垂直揃え */
    background: linear-gradient(to bottom, #04ba09, #06dd00); /* 横方向のグラデーション */
    color: white; /* テキストの色 */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* テキストに影を追加 */
    border: none; /* 枠線をなくす */
    border-radius: 15px; /* 角丸 */
    font-size: 1.5em; /* フォントサイズ */
    font-weight: bold; /* フォントの太さ */
    letter-spacing: 0.1em; /* 文字間隔 */
    text-align: center; /* テキストの中央揃え */
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2); /* コンテナに影を追加 */
    width: 90%; /* 幅 */
    max-width: 600px; /* 最大幅 */
    padding: 0 20px; /* 内側の余白 */
	overflow: hidden;
}

#main_titlearea1 .main_title1{
	width: 600px;
	margin: 10px auto;
	text-align: center;
}

#main_titlearea1 .main_title1 h1{
	font-size: 2em;
	font-weight: bold;
	letter-spacing: 0.1em;
	padding:7px 0 4px 0;
	color:white;
	background:#009b4d;
	box-shadow:5px 5px 0 #006d36;
}
/*--------------------------------------------------------
  ここからfooterのスタイル
----------------------------------------------------------*/
/* フッターのスタイル */
footer {
  background: #007BFF;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

/* ナビゲーションのレイアウト */
footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 10px 0;
}

/* 各ボタンのスタイル */
footer nav ul li a {
  display: block;
  padding: 10px 12px;
  background: #0056b3;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s;
  font-size: 14px;
}

footer nav ul li a:hover {
  background: #004085;
}


/* 画面サイズに応じたフォントサイズ調整 */
@media (max-width: 480px) {
  footer nav ul li a {
    font-size: 12px;
    padding: 8px;
  }
}


/* スマホとPCで同じように表示 */
@media (max-width: 768px) {
  footer nav ul {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* スマホでもPCでも同じレイアウト */
    justify-content: space-evenly; /* 均等に間隔を確保 */
  }

  footer nav ul li a {
    font-size: 14px; /* フォントサイズを少し小さめ */
    padding: 10px;
  }
}

@media (max-width: 480px) {
  footer nav ul {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* スマホでもPCでも同じレイアウト */
    justify-content: space-evenly; /* 均等に間隔を確保 */
  }

  footer nav ul li a {
    font-size: 12px; /* フォントサイズをさらに小さめ */
    padding: 8px;
  }
}


/*--------------------------------------------------------
  ここからsidebarのスタイル
----------------------------------------------------------*/
/* フッターのスタイル */
footer {
  background: #007BFF;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-family: Arial, sans-serif;
}

/* ナビゲーションのレイアウト */
footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0;
  margin: 10px 0;
}

/* 各ボタンのスタイル */
footer nav ul li a {
  display: block;
  padding: 10px 12px;
  background: #0056b3;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s;
  font-size: 14px;
}

footer nav ul li a:hover {
  background: #004085;
}


/* 画面サイズに応じたフォントサイズ調整 */
@media (max-width: 480px) {
  footer nav ul li a {
    font-size: 12px;
    padding: 8px;
  }
}


/* スマホとPCで同じように表示 */
@media (max-width: 768px) {
  footer nav ul {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* スマホでもPCでも同じレイアウト */
    justify-content: space-evenly; /* 均等に間隔を確保 */
  }

  footer nav ul li a {
    font-size: 14px; /* フォントサイズを少し小さめ */
    padding: 10px;
  }
}

@media (max-width: 480px) {
  footer nav ul {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* スマホでもPCでも同じレイアウト */
    justify-content: space-evenly; /* 均等に間隔を確保 */
  }

  footer nav ul li a {
    font-size: 12px; /* フォントサイズをさらに小さめ */
    padding: 8px;
  }
}




/*--------------------------------------------------------
	ここまでmain共通の設定
----------------------------------------------------------*/



/*----------- ここから特別音楽会チケット申し込み〆切の設定-------------*/
#index #main .notice{
	width: 700px;
	border: 2px solid #d9534f;
	background-color: #f9ecec;
	padding: 15px;
	margin: 20px auto;
	border-radius: 5px;
}

#index #main .notice h2{
	color: #d9534f;
	font-size: 1.5em;
	margin-bottom: 10px;
}

#index #main .notice p{
	color: #333;
	font-size: 1em;
}

/*----------- ここまで特別音楽会チケット申し込み〆切の設定-------------*/


#index .explansection{
	width: 742px;
	height: 100%;
	overflow: hidden;
}

/*------------ここからWhat's NEWの設定---------------*/
#index #newinformation{
	width: 772px;
}

#index #newinformation table tr td{
	padding: 5px 0;
	line-height: 1.2em;
	border: none;
}

#index #newinformation table tr td.datearea{
	width: 145px;
	text-indent: 2px;
	text-align: justify;
	vertical-align: top;
}

#index #newinformation table tr td.explanarea{
	width: 600px;
	text-indent: 2px;
	vertical-align: top;
}

/*------------ここまでWhat's NEWの設定---------------*/

/*------------ここからあいさつの設定---------------*/

#index #greeting_area{
	width: 766px;
	background: #fff0f5;
	margin: 15px auto;
	overflow: hidden;
}

#index .greeting_section{
	width: 758px;
	margin: 0 auto 20px auto;
	overflow: hidden;
}

#index .person_title{
	width: 600px;
	line-height: 2em;
	margin: 0 auto 10px auto;
	padding: 3px 0;
}

#index .person_title p{
	font-size: 1.5em;
	text-align: center;
}

#index .hidensection #cboxcover1 img{
	float: left;
	margin: 0 15px 5px 0;
	width: 150px;
}


#index .hidensection .infobox_a{
	padding: 0 10px 0 15px;
}

#index .hidensection .infobox_b{
	padding: 0 10px 0 15px;
}

#index .hidensection .boxreturn p{
	margin-bottom: 10px;
}


#index .hidensection #cboxcover2 img{
	float: left;
	margin: 0 15px 5px 0;
	width: 150px;
}


#index .hidensection #cboxcover2 iframe{
	clear: both;
	margin: 3px 5px;
	width: 300px;
}



#index .hidensection #cboxcover3 img{
	float: left;
	margin: 0 15px 5px 0;
	width: 150px;
}

/*------------ここまであいさつの設定---------------*/


/*-------------------ここから賛同金の設定--------------*/
#index #donation_area{
	clear: both;
	width: 766px;
	background: #ffffeb;
	margin: 15px auto 0 auto;
	overflow: hidden;
}

#index .donation_section{
	width: 758px;
	margin: 0 auto 20px auto;
	overflow: hidden;
}

/*-------------------ここまで賛同金の設定--------------*/

/*-------------------ここから呼びかけ人の設定--------------*/

#index #cboxcover5 p{
	text-align: justify;
	line-height: 1.8em;
}

#index #proposer_area{
	margin: 0 0 30px 0;
}

/*-------------------ここまで呼びかけ人の設定--------------*/
/*--------------------------------------------------------
  ここから大音楽会の設定
----------------------------------------------------------*/
/* タイトルエリア全体を中央に配置 */
#specialconcerttitlearea {
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: center;
    width: 100%;
    padding: 20px 0; /* 上下の余白 */
}

/* タイトルデザイン */
.specialconcerttitle {
    background: linear-gradient(to bottom, #00a651, #00703c); /* グラデーション */
    color: white;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    padding: 20px 40px;
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* 影 */
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 300px; /* タイトルの最小幅 */
}

/* タイトルのテキスト */
.specialconcerttitle h1 {
    margin: 0;
    font-family: "Arial Black", sans-serif;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}



/*----------- 大音楽会開催日程の設定 ---------*/
/* grand_chorus_concert.html のタイトルエリア */

#grand_chorus_concert #specialconcerttitlearea {
    display: flex;
    justify-content: center; /* タイトルを中央に配置 */
    align-items: center;
    width: 100%;
    padding: 20px 0; /* 上下の余白を均等に */
}

/* タイトルボックスのスタイル */
#grand_chorus_concert #specialconcerttitlearea .specialconcerttitle {
    width: 600px;
    margin: 20px auto; /* 上下の余白を増やしてバランスを調整 */
    text-align: center;
    border-radius: 10px; /* 角を丸くして柔らかい印象に */
    overflow: hidden; /* はみ出し防止 */
}

/* タイトルテキストのスタイル */
#grand_chorus_concert #specialconcerttitlearea .specialconcerttitle h1 {
    font-size: 2.5em; /* フォントサイズを大きくして視認性を向上 */
    font-weight: bold;
    letter-spacing: 0.1em;
    padding: 12px 0; /* 上下の余白を広げてバランスを調整 */
    color: white;
    background: linear-gradient(to bottom, #00b050, #007a3d); /* グラデーションで高級感を演出 */
    box-shadow: 5px 5px 0 #00582a, 8px 8px 10px rgba(0, 0, 0, 0.3); /* 影を強調して立体感を追加 */
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4); /* 文字に影を追加して視認性を向上 */
    display: inline-block;
    border-radius: 10px; /* タイトル部分も角を丸く */
}


/*----------- 大音楽会演目タイトルの設定 ---------*/
#grand_chorus_concert .programtitle {
    background-color: #e5f8e0; /* 軽い緑色背景 */
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    max-width: 700px;
    width: 90%;
    margin: 20px auto 0; /* 上の余白を維持しつつ、下の余白を減らす */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
    clear: both; /* 浮動要素の影響を防ぐ */
}

#grand_chorus_concert .programtitle .in_programtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* 幅を親要素いっぱいに広げる */
    text-align: center;
    margin: 0; /* `auto` を削除して余分な余白をなくす */
    padding: 10px 0;
    box-sizing: border-box; /* パディングを含めたサイズ調整 */
}

#grand_chorus_concert .programtitle .in_programtitle h3 {
    font-size: 1.4em;
    font-weight: bold;
    letter-spacing: 0.1em;
    color: #ffffff; /* 文字色を白 */
    background: linear-gradient(to bottom, #40f46f, #bbffcd); /* グリーン系グラデーション */
    border-radius: 15px;
    padding: 12px 20px; /* 余白を維持 */
    width: 100%; /* ボタン風デザインを維持しつつ幅を広げる */
    text-align: center;
    max-width: 100%; /* はみ出し防止 */
}
/* タイトルの幅を統一 */
.programtitle {
    max-width: 700px; /* 他のボックスと統一 */
    width: 100%; /* 幅いっぱいに */
    text-align: center; /* 中央揃え */
    margin: 20px auto; /* 中央配置 */
    padding: 20px;
    box-sizing: border-box;
}

/* タイトルの中身の調整 */
.in_programtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px;
    text-align: center;
    box-sizing: border-box;
}

/* タイトルの見出しの幅を統一 */
.programtitle h3 {
    width: 100%;
    max-width: 700px;
    padding: 12px 20px;
    background: linear-gradient(to bottom, #40f46f, #bbffcd);
    color: #ffffff;
    border-radius: 15px;
    text-align: center;
    box-sizing: border-box;
}


/*----------- 大音楽会演目の説明設定 ---------*/
#grand_chorus_concert .explansection {
    max-width: 700px;
    width: 90%;
    margin: 10px auto;
    overflow: visible; /* 隠れないように変更 */
    background-color: #f9f9f9; /* 軽い背景色 */
    padding: 20px;
    border-radius: 8px;
    clear: both; /* 浮動要素の影響を防ぐ */
}

#grand_chorus_concert .explansection ol li {
    line-height: 1.6em;
    padding: 0.5em;
}

#grand_chorus_concert .explansection p {
    line-height: 1.8em;
    padding: 10px 0;
}
.infobox_a {
    width: 100%; /* 親要素の幅いっぱいに広げる */
    max-width: 700px; /* 他のボックスと統一 */
    box-sizing: border-box; /* paddingやborderを含めたサイズ計算 */
    margin: 0 auto; /* 中央揃え */
}
/* 親要素の幅を統一 */
#grand_chorus_concert .programtitle {
    max-width: 700px !important; /* 幅を強制 */
    width: 100% !important;
    text-align: center;
    margin: 20px auto;
    padding: 20px;
    box-sizing: border-box;
    display: block; /* flexの影響をなくす */
}

/* 内部のタイトルコンテナも統一 */
#grand_chorus_concert .programtitle .in_programtitle {
    max-width: 700px !important;
    width: 100% !important;
    text-align: center;
    margin: 0 auto;
    padding: 10px 0;
    display: block; /* flexやinline-blockの影響をなくす */
    box-sizing: border-box;
}

/* h3の見出し幅を完全統一 */
#grand_chorus_concert .programtitle h3 {
    max-width: 700px !important;
    width: 100% !important;
    background: linear-gradient(to bottom, #40f46f, #bbffcd);
    color: #ffffff;
    border-radius: 15px;
    text-align: center;
    padding: 12px 20px;
    display: block; /* flexやinlineの影響を受けないようにする */
    box-sizing: border-box;
}



/*----------- infobox_a の幅を統一 ---------*/
.infobox_a {
    width: 100%; /* 親要素の幅いっぱいに統一 */
    max-width: 700px; /* 他のボックスの最大幅と揃える */
    box-sizing: border-box; /* padding や border を含めたサイズ計算 */
}

/*----------- タイトルの中央寄せ調整 ------------*/
.programtitle {
    text-align: center;
}

.in_programtitle {
    margin: 0 auto;
    text-align: center;
    display: flex; /* 幅いっぱいにするために変更 */
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 0;
}

/*----------- 大音楽会ページトップに戻る設定 ---------*/
#grand_chorus_concert .topback {
    max-width: 750px;
    width: 90%;
    text-align: right;
    padding: 5px 0 20px 0;
}

/*----------- ページトップへ戻るボタン設定 ---------*/
#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #ff4081; /* 明るいピンク色 */
    color: white;
    border: none;
    padding: 15px 25px;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Comic Sans MS', cursive, sans-serif; /* ポップなフォント */
    border-radius: 50%; /* 丸くする */
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
    transform: scale(1); /* 通常サイズ */
}

#backToTop:hover {
    background: #f50057; /* ホバー時に濃いピンク */
    transform: scale(1.1); /* ちょっと大きくする */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); /* 少し強めのシャドウ */
}

#backToTop:active {
    background: #d50042; /* クリック時に暗く */
    transform: scale(0.95); /* クリック時に少し縮む */
}


/*--------------------------------------------------------
  ここまで大音楽会の設定
----------------------------------------------------------*/







/*--------------------------------------------------------
	ここから特別音楽会の設定
----------------------------------------------------------*/
/*-----------特別音楽会ページタイトルの設定---------*/

#special_concert #specialconcerttitlearea .specialconcerttitle{
	width: 600px;
	margin: 10px auto;
	text-align: center;
}

#special_concert #specialconcerttitlearea .specialconcerttitle h1{
	font-size: 2em;
	font-weight: bold;
	letter-spacing: 0.1em;
	padding:7px 0 4px 0;
	color:white;
	background:#009b4d;
	box-shadow:5px 5px 0 #006d36;
}

/*-----------特別音楽会開催日程の設定---------*/
.event-box{
    background-color: #fdeff2; /* 薄いピンク */
    border: 5px solid #33cccc; /* 上部のライン */
    padding: 15px;
    width: fit-content; /* 内容に応じた幅 */
    margin: 20px auto; /* 中央配置 */
    font-size: 18px;
    font-weight: bold;
    color: #0000cc; /* 青色のテキスト */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* 影をつける */
}

#special_concert .event_schedule{
	width: 760px;
	margin: 20px auto;
}

#special_concert .event_schedule .in_event_schedule{
	width: 670px;
	margin: 5px auto;
	padding: 15px 0;
	background: #e9fffe;
	border-top: solid 6px #ff3399;
	box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.32);
}

#special_concert .event_schedule .in_event_schedule p{
	padding-left: 1.6em;
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.8em;
	color: #0015d3;
}
.event-schedule-box {
  background-color: #f8f9fa;
  border: 2px solid #0077b6;
  border-radius: 10px;
  padding: 20px;
  margin: 30px auto;
  max-width: 700px;
  font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.event-title {
  font-size: 1.8em;
  color: #023e8a;
  text-align: center;
  margin-bottom: 20px;
  border-bottom: 2px solid #0077b6;
  padding-bottom: 10px;
}

.event-details {
  list-style: none;
  padding: 0;
  font-size: 1.1em;
  line-height: 1.7;
}

.event-details li {
  margin-bottom: 15px;
}

.event-details a {
  color: #0077b6;
  text-decoration: underline;
}

.mc-images {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 25px;
  flex-wrap: wrap;
}

.mc-box {
  text-align: center;
}

.mc-box img {
  width: 150px;
  height: auto;
  border-radius: 5px;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
}

/* 画像レイアウトを統一 */
.mc-images {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.mc-box {
  text-align: center;
}

/* デフォルト画像設定（桂春蝶など） */
.mc-box img {
  width: 150px;
  height: 150px;
  object-fit: cover;       /* 枠いっぱいに中央トリミング */
  object-position: center; /* 中央寄せ */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

img.atuko-img {
  object-fit: cover;
  object-position: center;
  width: 130px;
  height: 150px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}


/*-----------特別音楽会ステージ紹介の設定---------*/
#special_concert .sagafes_concertarea_section{
	width: 700px;
	margin: 20px auto;
	padding: 15px;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}


#special_concert .sagafes_concertarea_section h2{
	font-size: 1.4em;
}

#special_concert .concert_heading{
	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
	color: #003366;
	background-color: #e0f7fa;
	padding: 10px;
	margin-bottom: 15px;
	border-left: 6px solid #00796b;
}

#special_concert .explansection{
	width: 700px;
}

#special_concert .explansection p{
	font-size: 1em;
	line-height: 1.6;
	color: #333;
}

#special_concert .explansection p a{
	color: #00796b;
	text-decoration: none;
}


#special_concert .explansection img{
	width: 200px;
	margin-right: 10px;
	margin-bottom: 10px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}


#special_concert .explansection .point{
	width: 650px;
	clear: both;
}




#special_concert .explansection .table1{
	margin: 5px 0;
	clear: both;
	width: 700px;
	overflow: hidden;
}

#special_concert .explansection .table2{
	margin: 5px 0;
	clear: both;
	width: 700px;
	overflow: hidden;
}

#special_concert .explansection .table3{
	margin: 5px 0;
	clear: both;
	width: 700px;
	overflow: hidden;
}



/*-------------ここからページのサブタイトル-------*/

#special_concert .sagafes_concertarea{
	width: 670px;
}

#special_concert .sagafes_concertarea .stage_introduction{
	width: 300px;
	margin: 40px auto;
	border-bottom: dotted 2px blue;
	text-align: center;
}

#special_concert .sagafes_concertarea .stage_introduction h2{
	font-size: 1.6em;
	font-weight: bold;
	letter-spacing: 0.1em;
	padding-bottom: 5px;
}

/*-------------ここまでページのサブタイトル-------*/


/* コンテナの幅と背景色 */
#special_concert .sagafes_concertarea_section{
	width: 700px;
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	font-family: Arial, sans-serif;
	color: #333;
}

/* 見出しのデザイン */
#special_concert .concert_heading{
	font-size: 1.8em;
	color: #4a4a8d;
	margin-bottom: 15px;
	border-bottom: 2px solid #4a4a8d;
	padding-bottom: 5px;
}

/* 説明セクションの画像スタイル */
#special_concert .explansection img{
	float: left;
	margin: 0 15px 10px 0;
	border-radius: 4px;
	width: 200px;
	height: auto;
}

/* テキストのスタイル */
#special_concert .explansection p{
	line-height: 1.6;
	font-size: 1em;
	margin-bottom: 15px;
}

/* トップリンクのデザイン */
#special_concert .explansection p a{
	text-decoration: none;
	color: #4a4a8d;
	font-weight: bold;
}


#special_concert .pictitle{
	padding-left: 3em;
}

#special_concert #main .pointright{
	text-align: right;
	padding-right: 20px;
}





/*--------------------------------------------------------
	ここまで特別音楽会の設定
----------------------------------------------------------*/




#listen_sound_source .table3 b{
	font-size: 1.4em;
}

#listen_sound_source .table3 iframe{
	width: 250px; 
}













#listen_sound_source #main .pointright{
	text-align: right;
	padding-right: 20px;
}


/*--------------------------------------------------------
	ここから祭典ニュースの設定
----------------------------------------------------------*/
#festanews #main .itemtitle_a{
	width: 600px;
	height: 60px;
	margin: 20px auto 0 auto;
	background-image: url(../images/construction.jpg);
	background-repeat: no-repeat;
}

#festanews #main .itemtitle_a p{
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	line-height: 60px;
	color: red;
	padding-top: 2px;
}

#festanews #main #in_main img{
	width: 235px;
}


#festanews #main #in_main .table3{
	padding: 0 10px;
}
.news-section {
  max-width: 1000px;
  margin: auto;
  padding: 20px;
  font-family: "Segoe UI", sans-serif;
}

.section-title {
  font-size: 1.8em;
  font-weight: bold;
  border-bottom: 2px solid #333;
  margin-top: 40px;
  margin-bottom: 20px;
}

.news-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.news-card {
  width: calc(33.33% - 20px);
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.news-card img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.news-date {
  font-weight: bold;
  font-size: 1.1em;
  margin: 10px 0;
  text-align: center;
}

.news-desc {
  font-size: 0.9em;
  color: #555;
  text-align: center;
}

.back-to-top {
  text-align: right;
  margin-top: 40px;
}

/*--------------------------------------------------------
	ここまで祭典ニュースの設定
----------------------------------------------------------*/
/*--------------------------------------------------------
	ここから祭典グッズの設定
----------------------------------------------------------*/
/* 説明文 */

#merchandise .info_merchandise {
    max-width: 772px;
    width: 90%; /* 画面サイズに応じて調整 */
    margin: 20px auto;
    padding: 30px 20px 20px 30px;
    background-color: #f9f9f9;
    border: 2px solid #ccc;
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
}

#merchandise .info_merchandise p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}

#merchandise .info_merchandise a {
    color: #0073e6;
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

#merchandise .info_merchandise a:hover {
    color: #ff6600;
    text-decoration: underline;
}

#merchandise .description {
    width: 772px;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
    overflow: hidden;
}

#merchandise .description p.point3 {
    font-size: 1.6em;
    text-align: center;
    color: red;
    font-weight: bold;
}

#merchandise .description img {
    width: 730px;
    margin: 5px auto;
}

#merchandise .tshirts_pic_area {
    width: 772px;
    margin-top: 10px;
}

.tshirts_pic1 {
    width: 345px;
    margin-right: 10px;
    float: left;
}

.tshirts_pic1 img {
    padding-top: 173px;
}

.tshirts_pic2 {
    width: 340px;
    float: left;
}

.explansection {
    font-size: 18px;
    line-height: 1.6;
}

.price {
    font-size: 22px;
    color: red;
}

.tshirts_pic_area {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tshirts_pic img {
    width: 200px;
    height: auto;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 5px;
    background: #fff;
    transition: transform 0.3s ease-in-out;
}

.tshirts_pic img:hover {
    transform: scale(1.1);
}

.backajustright {
    text-align: right;
    margin-top: 20px;
}

.back-to-top {
    text-decoration: none;
    font-size: 16px;
    color: blue;
    font-weight: bold;
}

#merchandise .explansection {
    padding: 15px;
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden;
}

#merchandise .explansection .in_explansection {
    margin-bottom: 10px;
    text-align: center;
}

#merchandise .explansection p.point1 {
    margin-top: 25px;
    font-size: 1.4em;
}

#merchandise .explansection p.point2 {
    text-align: center;
}

#merchandise .explansection img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

#merchandise #order_description {
    padding: 20px;
    background: #eef;
    border-radius: 5px;
}

#merchandise #order_description ol {
    padding-left: 20px;
}

#merchandise #order_description li {
    font-size: 16px;
    margin-bottom: 10px;
}


.back-to-top {
    display: inline-block;
    padding: 10px 20px; /* ボタンの内側の余白 */
    font-size: 16px; /* フォントサイズ */
    background-color: #007bff; /* ボタンの背景色 */
    color: white; /* ボタンの文字色 */
    text-decoration: none; /* テキストの下線を消す */
    border-radius: 5px; /* 角を丸くする */
    text-align: center;
}

.back-to-top:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
}

/* 隠し選択肢のスタイル */
#tshirt-options, #clearfile-options, #tote-options, #sake-options, #seaweed-options {
    display: inline-block;
}

/* 商品ウェブ申し込みのカラフルなスタイル */
#order-form h2 {
    font-size: 24px;
    font-weight: bold;
    color: #4a4a4a; 
    background-color: #f4f4f2; /* 薄いベージュ */
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    /* 強い影を消し、ごく薄い縁取りに変更 */
    border: 1px solid #e0e0e0;
}

#order-form h2:hover {
    transform: scale(1.1); /* ホバー時に拡大 */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* 文字に光る影を追加 */
}

/* フォームのデザイン */
label {
    font-weight: bold;
}

input, select, textarea {
    padding: 12px;
    font-size: 16px;
    margin-bottom: 15px; /* 下部に余白 */
    width: calc(100% - 20px); /* 横幅を調整 */
    border-radius: 5px;
    border: 1px solid #ccc;
}

input[type="submit"] {
    background-color: #007bff; /* ボタンの青色 */
    color: red;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

input[type="submit"]:hover {
    background-color: #0056b3; /* ホバー時の色 */
    transform: scale(1.05); /* 少し拡大 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 影を追加 */
}

input[type="submit"]:disabled {
    background-color: #cccccc; /* 無効時の色 */
    cursor: not-allowed; /* 無効時のカーソル */
}

#footer {
  width: 100%;  /* フッター幅を100%に設定 */
  background-color: #f1f1f1;  /* 背景色調整 */
  border-top: 2px solid #ccc; /* 枠線調整 */
  padding: 20px 0; /* 上下の余白 */
  display: flex;
  justify-content: center; /* 中央寄せ */
  align-items: center;  /* 縦方向にも中央寄せ */
  box-sizing: border-box; /* 枠線を含む幅調整 */
  margin: 0 auto;  /* フッター全体を中央寄せ */
}

.footer-text {
  font-size: 14px;
  color: #555; /* 色調整 */
  text-align: center;  /* 中央寄せ */
}

/* ボタンの外側のエリア（すでにHTMLにある程度指定されていますが補足） */
.submit-area {
    text-align: center; /* 中身を中央寄せにする */
    padding: 30px 0;
}


<style>
#confirmOverlay {
    display: none; /* 最初は隠しておく */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.confirm-box {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
}
.confirm-content {
    white-space: pre-wrap; /* 改行を反映させる */
    margin-bottom: 20px;
}
</style>









/* ボタン本体のデザイン */
.btn-submit {
    display: inline-block;
    padding: 15px 50px;           /* ボタンの上下左右の余白 */
    font-size: 1.2rem;            /* 文字の大きさ */
    font-weight: bold;            /* 文字を太く */
    color: #fff;                  /* 文字色（白） */
    background-color: #d9534f;    /* ボタンの色（上のテキストに合わせた赤系） */
    border: none;                 /* 標準の枠線を消す */
    border-radius: 8px;           /* 角を丸くする */
    cursor: pointer;              /* ホバー時にマウスカーソルを指の形にする */
    transition: background-color 0.3s, transform 0.2s; /* 変化をなめらかに */
    box-shadow: 0 4px 0 #b0433e;  /* 立体感を出す下の影 */
}

/* ボタンにマウスを乗せた時（ホバー時）の演出 */
.btn-submit:hover {
    background-color: #e27c79;    /* 少し明るい色にする */
}

/* ボタンを押した瞬間（クリック時）の演出 */
.btn-submit:active {
    transform: translateY(2px);   /* 少し下に沈ませる */
    box-shadow: 0 2px 0 #b0433e;  /* 影を短くして押した感を出す */
}







.back-to-top {
  font-size: 14px;
  color: blue;  /* リンクの文字色調整 */
  text-decoration: none;
  font-weight: bold;
}

.back-to-top:hover {
  color: #ff6600;  /* ホバー時の文字色 */
  text-decoration: underline;
}

.backajustright {
  text-align: right;
  margin-top: 20px;
}
/* 商品追加ボタンのスタイル */
button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

button:hover {
    background-color: #45a049;
}


/*--------------------------------------------------------
	ここまで祭典グッズの設定
----------------------------------------------------------*/




/*--------------------------------------------------------
	ここからチケットの設定
----------------------------------------------------------*/
#ticketinfo #main .itemtitle_a{
	width: 600px;
	height: 60px;
	margin: 20px auto 0 auto;
	background-image: url(../images/construction.jpg);
	background-repeat: no-repeat;
}

#ticketinfo #main .itemtitle_a h1{
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	line-height: 60px;
	color: red;
	padding-top: 2px;
}

#ticketinfo #main .ticketinfosection{
	width: 772px;
}

#ticketinfo #main .in_ticketinfosection{
	width: 700px;
	height: 300px;
	margin: 0 auto;
	background: url(../images/ticketinfo.jpg);
	background-repeat: no-repeat;
}


#ticketinfo #main .ticketexolanarea{
	width: 500px;
	height: 500px;
	margin: 10px auto 0 auto;
}

#ticketinfo #main .ticketexolanarea .ticketitemarea{
	margin: 12px 0;
}

#ticketinfo #main .ticketexolanarea .ticketitemarea p{
	width: 400px;
	font-size: 1.4em;
	padding: 2px 0 1px 0;
	text-align: center;
	margin-bottom: 10px;
	background-color: #7cfc00;
}

#ticketinfo #main .ticketexolanarea .in_ticketexolanarea p{
	font-size: 1em;
	padding-left: 20px;
	line-height: 1.4em;
}

/* ------------ここから特別音楽会チケットの〆切設定------------*/

/* チケット情報ボックス */
#ticketinfo #main .ticket_info{
	width: 600px;
	margin: 30px auto;
	background-color: #ffffff;
	padding: 30px;
	border-radius: 10px;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
	border-left: 6px solid #0073e6; /* サイドの青い線 */
}

/* 見出しのスタイル */
#ticketinfo #main h2{
	font-size: 26px;
	color: #0073e6;
	margin-bottom: 20px;
	border-bottom: 2px solid #e0e0e0; /* 下線 */
	padding-bottom: 8px;
}

/* テキストのスタイル */
#ticketinfo #main p{
	font-size: 16px;
	line-height: 1.8;
	color: #555;
	margin: 0;
}

/* 強調テキスト */
#ticketinfo #main .highlight{
	color: #d9534f; /* 赤色 */
	font-weight: bold;
}

#ticketinfo #main .ticket_info .seat-info{
	font-weight: bold;
	color: #d9534f; /* 目立つ赤系の色 */
	padding-top: 10px;
}

/* ------------ここまで特別音楽会チケットの〆切設定------------*/

/* ------------ここから大うたう会チケット販売の切設定------------*/


#ticketinfo .info_text a{
	color: #0073e6;
	text-decoration: underline;
}

/* ------------ここまで大うたう会チケット販売の切設定------------*/


/*--------------------------------------------------------
	ここまでチケットの設定
----------------------------------------------------------*/




/*----------------------------------------
	ここからスケジュールの設定
----------------------------------------*/

/*-----------ここから佐賀市内の合同練習日程--------*/

#lesson_schedule #main #informationsection{
	width: 764px;
}

#lesson_schedule #main .in_informationsection{
	width: 754px;
	margin: 5px auto 0 auto;
	padding-top: 20px;
	border: 5px solid #ccc;
	background: url(../images/himawari-3.gif);
	background-size: 110px;
	background-repeat: no-repeat;
	background-position: right top;
}


#lesson_schedule #main .scheduleitemtitle{
	width: 724px;
	height: 70px;
	margin: 0 auto;
}

#lesson_schedule #main .scheduleitemtitle .titlearea{
	width: 500px;
	margin: 10px auto 0 auto;
}

#lesson_schedule #main .scheduleitemtitle .titlearea h1{
	position: relative;
	background: #dfefff;
	box-shadow: 0px 0px 0px 5px #dfefff;
	border: dashed 2px white;
	padding: 0.2em 0.5em;
	color: #454545;
	text-align: center;
	letter-spacing: 0.1em;
}

#lesson_schedule #main .scheduleitemtitle .titlearea h1::after{
	position: absolute;
	content: '';
	left: -7px;
	top: -7px;
	border-width: 0 0 15px 15px;
	border-style: solid;
	border-color: #fff #fff #a8d4ff;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

#lesson_schedule #main .selectarea{
	width: 600px;
	margin: 15px auto;
}

#lesson_schedule #main .selectarea .selecttitle{
	float: left;
	margin: 0 10px;
	width: 280px;
	background: #fff3f6;
}

#lesson_schedule #main .selectarea .selecttitle h2{
	font-size: 1.3em;
	color: #0f49ff;
	text-align: center;
	padding: 7px 3px 3px 3px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.23);
}

#lesson_schedule #main .selectarea .selecttitle h2 a{
	text-decoration: none;
}


#lesson_schedule #main .selectarea .selecttitle h2 a:hover{
	color: #33ff0f;
}

#lesson_schedule #main #informationsection .informationarea{
	position: relative;
	clear: both;
	width: 600px;
	margin: 0 auto 15px auto;
	padding-top: 15px;
	padding-left: 20px;
	overflow: hidden;
}

#lesson_schedule #main #informationsection .informationarea p{
	font-size: 1.2em;
	line-height: 1.2em;
	padding: 3px 5px;
	text-indent: -1em;
	color: blue;
}


/*-----------ここから日程表--------*/


#lesson_schedule #main .scheduletablesection{
	clear: both;
	padding-bottom: 20px;
	overflow: hidden;
}

#lesson_schedule #main .scheduletablesection table{
	width: 726px;
	margin: 10px auto;
	background-color: white;
	border: 1px solid #888;
	border-collapse: collapse;
}


/*-----------------ここから終了した日程-----------------------*/

#lesson_schedule #main .scheduletablesection table .ended{
	background-color: #d8d8d8;
}

/*-----------------ここまで終了した日程-----------------------*/


#lesson_schedule #main .scheduletablesection table caption{
	width: 250px;
	margin: 5px auto 10px auto;
	font-size: 1.6em;
	font-weight: bold;
	letter-spacing: 0.2em;
	border-bottom: 2px dotted green;
}

#lesson_schedule #main .scheduletablesection table tr th{
	font-size: 0.9em;
	border: 1px solid #888;
	padding: 7px 5px;
	text-align: center;
	vertical-align: top;
}

#lesson_schedule #main .scheduletablesection table tr td{
	font-size: 0.9em;
	border: 1px solid #888;
	padding: 7px 5px;
	text-align: left;
}


#lesson_schedule #main .scheduletablesection table tr td.day{
	width: 40px;
	text-align: right;
}

#lesson_schedule #main .scheduletablesection table tr td.dayweek{
	width: 30px;
	text-align: center;
}

#lesson_schedule #main .scheduletablesection table tr td.venue{
	text-indent: 0.5em;
}
#lesson_schedule #main .scheduletablesection table tr td.time{
	width: 70px;
	text-align: center;
	text-indent: 0.5em;
	letter-spacing: 0.05em;
}
#lesson_schedule #main .scheduletablesection table tr td.tunes{
	text-indent: 0.5em;
}


#lesson_schedule #main .scheduletablesection table tr .montharea{
	width: 2.5em;
	text-align:center;
}

#lesson_schedule #main .scheduletablesection table tr .dayarea{
	width: 2.5em;
	text-align:center;
}

#lesson_schedule #main .scheduletablesection table tr .weekarea{
	width: 4em;
	text-align: center;
}

#lesson_schedule #main .scheduletablesection table tr .song_number{
	width: 17.5em;
}

#lesson_schedule #main .scheduletablesection table tr placearea{
	width: 9em;
}

#lesson_schedule #main .scheduletablesection table tr timearea{
	width: 6em;
}


/*-----------ここまで佐賀市内の合同練習日程--------*/


/*-----------ここから地域実行委員会の練習日程--------*/

/* 地域タイトルの統一スタイル（色別） */

/* 神戸西部の活動 - ブルー */
#region-kobe-west {
    background-color: #0073e6;
}

/* 神戸中部の活動 - グリーン */
#region-kobe-center {
    background-color: #28a745;
}

/* 神戸東部の活動 - パープル */
#region-kobe-east {
    background-color: #6f42c1;
}

/* 神戸青年の活動 - レッド */
#region-kobe-youth {
    background-color: #dc3545;
}

/* 神戸市役所センター（東部） - スカイブルー */
#region-kobe-east {
    background-color: #17a2b8;
}

/* 阪神・西宮地域の活動 - オレンジ */
#region-hanshin-nishinomiya {
    background-color: #fd7e14;
}

/* 東播の活動 - イエローグリーン */
#region-toban {
    background-color: #9acd32;
}

/* 西播の活動 - ディープピンク */
#region-seiban {
    background-color: #e75480;
}

/* 播磨の活動 - ダークゴールド */
#region-harima {
    background-color: #b8860b;
}

/* 但馬の活動 - インディゴ */
#region-tazima {
    background-color: #4b0082;
}

/* 共通のデザイン */
.region-item {
    color: #ffffff; /* 文字色は白 */
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 15px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

/* ホバー時のエフェクト */
.region-item:hover {
    filter: brightness(1.2); /* 少し明るくする */
    transform: scale(1.03); /* わずかに拡大 */
    transition: all 0.3s ease-in-out;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .region-item {
        font-size: 18px;
        padding: 12px;
    }
}

/* タイトルを目立たせるスタイル */
.highlight-title {
    font-family: 'Arial', sans-serif; /* 目立つフォントを設定 */
    font-size: 2.5rem; /* フォントサイズを大きく */
    font-weight: bold; /* 太字 */
    color: #ffffff; /* 文字色を白に */
    text-align: center; /* 中央揃え */
    text-transform: uppercase; /* 大文字にして力強さを出す */
    letter-spacing: 5px; /* 文字間隔を広げてインパクトを増す */
    margin-top: 30px; /* 上の余白を少し調整 */
    padding: 10px 20px; /* タイトルの周りにパディングを追加 */
    background-color: #FFD700; /* 明るい黄色に変更 */
    border-radius: 10px; /* 角を丸くして柔らかさを出す */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 影をつけて少し浮き上がった印象 */
    transition: all 0.3s ease-in-out; /* ホバー時にアニメーションを追加 */
}

/* ホバー時のエフェクト */
.highlight-title:hover {
    color: #FFD700; /* ホバー時に文字色を黄色に */
    background-color: #ff4500; /* 背景色をオレンジに */
    transform: scale(1.05); /* 少し大きくなる */
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .highlight-title {
        font-size: 2rem; /* 小さな画面ではフォントサイズを少し小さく */
        letter-spacing: 3px; /* 文字間隔を少し縮める */
    }
}
.event-report {
  background-color: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

.event-report h3 {
  font-size: 1.4em;
  color: #333;
  border-left: 6px solid #007acc;
  padding-left: 10px;
  margin-bottom: 15px;
}

.event-report p {
  font-size: 1em;
  line-height: 1.8;
  color: #444;
  margin-bottom: 20px;
}

.report-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.report-images img {
  width: 30%;
  border-radius: 8px;
  box-shadow: 1px 1px 6px rgba(0,0,0,0.2);
  object-fit: cover;
}
.event-report {
  background-color: #f5faff;
  padding: 20px;
  margin-top: 20px;
  border-left: 6px solid #0077cc;
  border-radius: 10px;
}

.report-title {
  font-size: 1.3em;
  margin-bottom: 15px;
  color: #0077cc;
  border-bottom: 2px solid #0077cc;
  padding-bottom: 5px;
}

.report-text {
  text-align: left;
  line-height: 1.7;
  margin-bottom: 20px;
  font-size: 1em;
  color: #333;
}

.report-text p {
  margin-bottom: 1em;
}

.report-images {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.report-images img {
  width: 30%;
  min-width: 200px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}



/*-----------ここまで地域実行委員会の練習日程--------*/


/*-----------ここから青年・保育・手をつなぐ・シニア・女声--------*/

@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

.highlight-title {
  font-family: 'Shadows Into Light', cursive; /* 手書き風フォント */
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(135deg, #ffcc00, #ff6699); /* 明るいグラデーション */
  color: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  position: relative;
  display: inline-block;
}

/* 背景に五線譜っぽいデザイン */
.highlight-title::before {
  content: "♪ ♪ ♪ ♪ ♪ ♪";
  font-size: 1.2em;
  color: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: -10px;
  left: 10%;
  transform: rotate(-10deg);
}

.highlight-title::after {
  content: "(^^♪";
  font-size: 1.2em;
  color: rgba(255, 255, 255, 0.7);
  position: absolute;
  bottom: -10px;
  right: 10%;
  transform: rotate(10deg);
}
<!-- ライトボックス用CSS（アニメーション付き） -->
  .lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-in-out;
  }

  .lightbox-overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 8px;
    box-shadow: 0 0 20px #fff;
    animation: zoomIn 0.3s ease-in-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes zoomIn {
    from {
      transform: scale(0.8);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }
/*-----------ここまで青年・保育・手をつなぐ・シニア・女声--------*/

/*------------------ここから日程表------------------*/

#lesson_schedule_local #main .scheduletablesection{
	clear: both;
	padding-bottom: 20px;
	overflow: hidden;
}

#lesson_schedule_local #main .scheduletablesection table{
	width: 726px;
	margin: 10px auto;
	background-color: white;
	border: 1px solid #888;
	border-collapse: collapse;
}

/*-----------------ここから終了した日程-----------------------*/

#lesson_schedule_local #main .scheduletablesection table .ended{
	background-color: #d8d8d8;
}

/*-----------------ここまで終了した日程-----------------------*/

#lesson_schedule_local #main .scheduletablesection table caption{
	width: 500px;
	margin: 5px auto 10px auto;
	font-size: 1.6em;
	font-weight: bold;
	letter-spacing: 2px;
	border-bottom: 2px dotted green;
}

#lesson_schedule_local #main .scheduletablesection table tr th{
	font-size: 0.9em;
	border: 1px solid #888;
	padding: 7px 5px;
	text-align: center;
	vertical-align: top;
}

#lesson_schedule_local #main .scheduletablesection table tr td{
	font-size: 0.9em;
	border: 1px solid #888;
	padding: 7px 5px;
	text-align: left;
}


#lesson_schedule_local #main .scheduletablesection table tr td.day{
	width: 40px;
	text-align: right;
}

#lesson_schedule_local #main .scheduletablesection table tr td.dayweek{
	width: 30px;
	text-align: center;
}

#lesson_schedule_local #main .scheduletablesection table tr td.venue{
	text-indent: 0.5em;
}
#lesson_schedule_local #main .scheduletablesection table tr td.time{
	width: 70px;
	text-align: center;
	text-indent: 0.5em;
	letter-spacing: 0.05em;
}
#lesson_schedule_local #main .scheduletablesection table tr td.tunes{
	text-indent: 0.5em;
}


#lesson_schedule_local #main .scheduletablesection table tr .montharea{
	width: 2.5em;
	text-align:center;
}

#lesson_schedule_local #main .scheduletablesection table tr .dayarea{
	width: 2.5em;
	text-align:center;
}

#lesson_schedule_local #main .scheduletablesection table tr .weekarea{
	width: 4em;
	text-align: center;
}

#lesson_schedule_local #main .scheduletablesection table tr .song_number{
	width: 17.5em;
}

#lesson_schedule_local #main .scheduletablesection table tr placearea{
	width: 9em;
}

#lesson_schedule_local #main .scheduletablesection table tr timearea{
	width: 6em;
}



#lesson_schedule_local #main .scheduletablesection table.dance tr .song_number{
	width: 8em;
}



/*-----------ここまで地域実行委員会の練習日程--------*/



/*-------------------------------------------------------
	ここから演奏曲に関する情報の設定
-------------------------------------------------------*/

#performance_guide #main #informationsection{
	width: 764px;
}

#performance_guide #main #informationsection .in_informationsection{
	width: 754px;
	margin: 5px auto 0 auto;
	padding-top: 20px;
	border: 5px solid #ccc;
	background: url(../images/cosmos.png);
	background-size: 125px;
	background-repeat: no-repeat;
	background-position: right top;
}

#performance_guide #main .performance_infotitle{
	width: 724px;
	height: 70px;
	margin: 0 auto 30px auto;
}

#performance_guide #main .performance_infotitle .titlearea{
	width: 500px;
	margin: 10px auto 0 auto;
}

#performance_guide #main .performance_infotitle .titlearea h1{
	position: relative;
	background: #dfefff;
	box-shadow: 0px 0px 0px 5px #dfefff;
	border: dashed 2px white;
	padding: 0.2em 0.5em;
	color: #454545;
	text-align: center;
	letter-spacing: 0.1em;
}

#performance_guide #main .performance_infotitle .titlearea h1::after{
	position: absolute;
	content: '';
	left: -7px;
	top: -7px;
	border-width: 0 0 15px 15px;
	border-style: solid;
	border-color: #fff #fff #a8d4ff;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

#performance_guide #main #informationsection .each_songsection{
	width: 720px;
	min-height: 130px;
	margin: 20px auto 30px auto;
	overflow: hidden;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#performance_guide #main .each_songsection .performance_introduction{
	width: 720px;
	margin: 10px auto;
}

#performance_guide #main .each_songsection .performance_introduction .introductionttitle{
	padding-top: 10px;
	text-align: center;
	line-height: 1.6em;
}

#performance_guide #main .each_songsection .performance_introduction .introductionexplan{
	width: 680px;
	margin: 5px auto;
}


#performance_guide #main .performance_number{
	margin: 20px 0 0 20px;
}

#performance_guide #main .performance_number .playedttitle{
	margin: 0 10px;
}

#performance_guide #main .performance_number .playedttitle h2{
	position: relative;
	padding: 0.25em 0;
}

#performance_guide #main .performance_number .playedttitle h2::after{
	content: "";
	display: block;
	height: 4px;
	background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
	background: linear-gradient(to right, rgb(230, 90, 90), transparent);
}

#performance_guide #main #informationsection .explanarea{
	width: 650px;
	margin: 0 auto 15px auto;
	padding-left: 0.5em;
}

#performance_guide #main #informationsection .explanarea .in_explanarea{
	margin: 10px 0 20px 0;
}

#performance_guide #main #informationsection .explanarea ol{
	margin: 10px 0 20px 0;
}

/*-------------------------------------------------------
	ここまで演奏曲に関する情報の設定
-------------------------------------------------------*/

/*-------------------------------------------------------
	ここから出演登録の設定
-------------------------------------------------------*/
#performer #main{
	width: 1024px;
}

#performer #main #in_main .titlearea{
	width: 1024px;
	margin: 20px auto;
}

#performer #main #in_main .performer{
	width: 1024px;
	margin: 0 auto;
}

#performer #main #in_main .performer_explan{
	width: 600px;
	margin: 20px auto;
	text-align: center;
}

#performer #main #in_main .performer_explan p{
	font-size: 1.2em;
}

#performer #main h1{
	padding: 20px 0;
	text-align: center;
}



/* 画像のコンテナ */
#performer .img-container#main{
	position: relative;
	width: 1000px; /* 表示する画像の幅を調整 */
}

#performer #main #image{
	width: 100%;
	height: auto;
}

/* 虫眼鏡のスタイル */
#performer #main #magnifier{
	position: absolute;
	border: 3px solid #000;
	border-radius: 50%;
	cursor: none;
	/* 虫眼鏡のサイズを調整 */
	width: 100px;
	height: 100px;
	overflow: hidden;
	display: none; /* 初期状態では非表示 */
}


/*-------------------------------------------------------
	ここまで出演登録の設定
-------------------------------------------------------*/

/*-------------------------------------------------------
	ここからうたごえ新聞購読申し込みの設定
-------------------------------------------------------*/
h1 {
  font-family: 'Comic Sans MS', sans-serif;
  font-size: 36px;
  color: #4CAF50; /* green color for a friendly feel */
  text-align: center;
  background-color: #FFEB3B; /* yellow background */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

h1::before {
  content: "♪ ";
  font-size: 40px;
  vertical-align: middle;
}

h1::after {
  content: " ♪";
  font-size: 40px;
  vertical-align: middle;
}

/* 購読フォームの全体スタイル */
.subscription-form {
  font-family: Arial, sans-serif;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

/* フォームの入力フィールド */
.subscription-form input,
.subscription-form select {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* 購読プラン詳細セクション */
.subscription-form .section {
  margin-bottom: 20px;
}

/* 購読プランの詳細表 */
.subscription-form .pricing-table {
  width: 100%;
  border-collapse: collapse;
}

.subscription-form .pricing-table th,
.subscription-form .pricing-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.subscription-form .pricing-table th {
  background-color: #f0f0f0;
}

.subscription-form .pricing-table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

/* 購読を申し込むボタンのスタイル */
.subscription-form button {
    padding: 12px 20px;
    font-size: 16px;
    color: white;
    background-color: #007BFF; /* ボタンの背景色 */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%; /* 横幅を調整 */
    display: inline-block;
    text-align: center;
}

/* ボタンのホバー時の背景色 */
.subscription-form button:hover {
    background-color: #0056b3;
}

/* もしボタンが他の要素に隠れている場合、表示順序を調整 */
.subscription-form button {
    position: relative;
    z-index: 10;
}



/*-------------------------------------------------------
	ここまでうたごえ新聞購読申し込みの設定
-------------------------------------------------------*/

/*-------------------------------------------------------
	ここから地域実行委員会の設定
-------------------------------------------------------*/


/* 地域リストのカスタマイズ */
.colorful-list {
  list-style: none; /* デフォルトのリストマーカーを消す */
  padding: 0;
  margin: 0;
}

/* 各地域項目のスタイル */
.region-item {
  font-size: 18px; /* 文字サイズ */
  padding: 10px 20px; /* パディング */
  margin: 10px 0; /* 項目間のマージン */
  text-align: center; /* 中央寄せ */
  font-weight: bold; /* 太字 */
  border-radius: 8px; /* 角を丸く */
  transition: all 0.3s ease; /* ホバー時のスムーズな変化 */
}

/* 各地域項目に異なる背景色を設定 */
#kobe-west {
  background-color: #FF6347; /* トマト色 */
  color: white;
}

#kobe-center {
  background-color: #32CD32; /* ライムグリーン */
  color: white;
}

#kobe-east {
  background-color: #1E90FF; /* ドジャーブルー */
  color: white;
}

/* ホバー時の変化 */
.region-item:hover {
  background-color: #FFD700; /* ホバー時に黄色に変化 */
  color: black; /* ホバー時に文字色を黒に */
  cursor: pointer; /* ポインタを表示 */
}
.event-container {
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.event-header {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 10px;
}

.event-details {
  font-size: 18px;
  margin-bottom: 10px;
}

.event-link {
  font-size: 18px;
  color: #007BFF;
  text-decoration: none;
}

.event-link:hover {
  text-decoration: underline;
}

.event-footer {
  font-size: 16px;
  text-align: center;
  margin-top: 15px;
  color: #555;
}

/*-------------------------------------------------------
	ここまで地域実行委員会の設定
-------------------------------------------------------*/


/*-------------------------------------------------------
  ここから和太鼓と民舞のまつりの設定
-------------------------------------------------------*/

/* 和太鼓・民舞のタイトル */
.highlight-title {
    font-size: 3.5em;
    color: #9a2a2f; /* 深い赤色 */
    font-weight: bold;
    text-align: center;
    margin-bottom: 30px;
    font-family: 'Yu Mincho', serif;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* 立体感を強調 */
    background: url('https://example.com/path-to-sakura-background.jpg') no-repeat center center;
    background-size: cover; /* 和柄の背景を強調 */
    padding: 30px;
    border-radius: 10px;
    color: #fff; /* 背景に合わせて文字色を白に変更 */
}

/* タイトルの背景画像を和風のイラストに変更 */
.highlight-title {
    background: url('https://example.com/path-to-your-sakura-image.jpg') no-repeat center center;
    background-size: cover; /* 背景画像がタイトルにぴったり合うように調整 */
    color: #9a2a2f; /* 白い文字が見やすくなるように調整 */
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3); /* 立体感を強調 */
}
/* 和太鼓と民舞のまつりスタイル */

.main-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px;
  font-family: 'Yu Gothic', 'Hiragino Kaku Gothic ProN', sans-serif;
  background-color: #f9f9f9;
}

.animated-title h1 {
  font-size: 2.2em;
  text-align: center;
  margin-bottom: 30px;
  color: #b71c1c;
  animation: fadeInDown 1s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.event-info, .event-description, .event-access, .event-note {
  background: #fff;
  border-left: 6px solid #0288d1;
  padding: 20px;
  margin-bottom: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.event-info h2,
.event-description h2,
.event-access h2,
.event-note h2 {
  font-size: 1.5em;
  margin-bottom: 10px;
  color: #0277bd;
}

.event-info ul {
  list-style: none;
  padding-left: 0;
}

.event-info li {
  margin: 8px 0;
  font-size: 1.1em;
}

.event-description p,
.event-access p,
.event-note p {
  font-size: 1.1em;
  line-height: 1.6;
}

/*-------------------------------------------------------
  ここまで和太鼓と民舞の設定
-------------------------------------------------------*/

/*-------------------------------------------------------
  ここからボランティアスタッフ募集の設定
-------------------------------------------------------*/
/* ================= メニュー直下の .event-container 調整 ================= */
nav + .event-container,
header + .event-container,
.site-header + .event-container,
.main-nav + .event-container {
  margin-top: 0;       /* 上マージンをゼロにして、ヘッダーには影響させない */
  padding-top: 30px;   /* 内側の余白だけで見た目調整 */
  overflow: auto;      /* BFCを作り、上のマージン崩れ防止 */
}

/* .event-container 本体も安全側で調整 */
.event-container {
  margin-top: 0;       /* 元のヘッダーのマージンを変えない */
  padding-top: 30px;   /* 内側の余白だけで余白確保 */
  overflow: auto;
}

/* タイトルや見出しの上マージンをリセット（event-container内のみ） */
.event-container .highlight-title,
.event-container h1,
.event-container h2,
.event-container h3,
.event-container p {
  margin-top: 0;
  padding-top: 0;
}
/*-------------------------------------------------------
  ここからボランティアスタッフ募集のデザイン追記
-------------------------------------------------------*/

/* セクション全体の背景と余白調整 */
.event-container {
  background-color: #fff8f0; /* 優しいベージュ系の背景色 */
  border-left: 5px solid #ff3366; /* 左側にアクセントのカラーライン */
  border-radius: 8px; /* 角を少し丸める */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽い影で浮かせる */
  padding: 40px 30px; /* 内側の余白増加 */
  transition: all 0.3s ease; /* ホバー時にスムーズに変化 */
}

/* タイトルの装飾 */
.event-container .highlight-title {
  font-size: 2.5em;
  color: #ff3366;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* 見出しh2/h3の装飾 */
.event-container h2,
.event-container h3 {
  color: #333333;
  margin-bottom: 15px;
  border-bottom: 2px solid #ff3366;
  padding-bottom: 5px;
}

/* 段落テキスト */
.event-container p {
  color: #555555;
  font-size: 1.05em;
  line-height: 1.8;
  margin-bottom: 15px;
}

/* リスト装飾 */
.event-container ul,
.event-container ol {
  padding-left: 20px;
  margin-bottom: 20px;
}

.event-container li {
  margin-bottom: 8px;
  position: relative;
}

.event-container li::before {
  content: "★";
  color: #ff3366;
  position: absolute;
  left: -20px;
}

/* ボックスにホバー効果 */
.event-container:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* ボタン風リンクがあれば */
.event-container a.button,
.event-container a.volunteer-btn {
  display: inline-block;
  background-color: #ff3366;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.event-container a.button:hover,
.event-container a.volunteer-btn:hover {
  background-color: #e60050;
}

/*-------------------------------------------------------
  ここまでボランティアスタッフ募集のデザイン追記
-------------------------------------------------------*/


/*-------------------------------------------------------
  ここまでボランティアスタッフ募集の設定
-------------------------------------------------------*/


/*-------------------------------------------------------
	ここからオプショナルツアーの設定
-------------------------------------------------------*/
#optional_bus_tour #main{
	width: 1024px;
}


#optional_bus_tour #main .titlearea{
	margin: 15px auto 10px auto;
}

#optional_bus_tour #main .titlearea h1{
	text-align: center;
	color: red;
}

#optional_bus_tour #main .titlearea p{
	font-size: 1.6em;
	padding-left: 650px;
}


#optional_bus_tour #main .kashimaimages{
	width: 900px;
	display: flex;
	justify-content: space-between;
	margin: 5px auto;
}

#optional_bus_tour #main .kashimaimages img{
	width: 32%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#optional_bus_tour #main .kashimaimages p{
	width: 32%;
	height: auto;
	border-radius: 8px;
	text-align: center;
}


#optional_bus_tour #main .tour_schedule{
	max-width: 900px;
	margin: 20px auto;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#optional_bus_tour #main .tour_schedule img{
	width: 894px;
	text-align: center;
	border: double 5px #2a9d8f;
}

#optional_bus_tour #main h2{
	text-align: center;
	color: #942b89;
	margin-bottom: 15px;
}

#optional_bus_tour #main .schedule_item{
	margin-bottom: 20px;
}


#optional_bus_tour #main .kashimaimages_small{
	width: 900px;
	display: flex;
	justify-content: space-between;
	margin: 30px auto 0 auto;
}

#optional_bus_tour #main .kashimaimages_small2{
	width: 900px;
	display: flex;
	justify-content: space-between;
	margin: 5px auto 0 auto;
}

#optional_bus_tour #main .kashimaimages_small img{
	width: 175px;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#optional_bus_tour #main .kashimaimages_small2 p{
	width: 175px;
	height: auto;
	border-radius: 8px;
	text-align: center;
}

#optional_bus_tour #main .tour_info{
	width: 620px;
	margin: 20px auto;
}

#optional_bus_tour #main .contact_info{
	margin-top: 20px;
	font-size: 1.4em;
	text-align: center;
}


#optional_bus_tour #main .provision{
	width: 620px;
	margin: 30px auto 20px auto;
}
/*-------------------------------------------------------
	ここまでオプショナルツアーの設定
-------------------------------------------------------*/

/*-------------------------------------------------------
	合同演奏音源ページ用カスタムスタイルの設定
-------------------------------------------------------*/
/* === 合同演奏音源ページ用カスタムスタイル === */

/* === 合同演奏音源ページ用シンプルスタイル === */

/* 曲のまとまりを囲う枠 */
.sagafes_concertarea {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 16px;
  margin-bottom: 24px;
  border-radius: 8px;
}

/* 曲名タイトル */
.programtitlelong h2 {
  font-size: 1.25em;
  color: #222;
  margin-bottom: 8px;
  border-bottom: 1px solid #ccc;
}

/* 曲のパート説明文など */
.explansection {
  margin-top: 12px;
}

.explansection p {
  font-size: 0.95em;
  color: #444;
  line-height: 1.5;
  margin: 4px 0;
}

/* パート音源リンクのブロック */
.table3 {
  background-color: #fafafa;
  padding: 16px;
  margin-top: 16px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

/* 見出し */
.table3 h3 {
  font-size: 1.1em;
  margin-bottom: 8px;
  padding-left: 8px;
  border-left: 3px solid #999;
  color: #333;
  text-transform: none;
}

/* リンクのスタイル */
.table3 a {
  display: inline-block;
  text-decoration: none;
  font-size: 0.95em;
  color: #005f99;
  padding: 6px 10px;
  border-radius: 4px;
  background-color: #e6f0f8;
  margin: 4px 4px 4px 0;
  transition: background-color 0.2s ease;
}

.table3 a:hover {
  background-color: #cce0f0;
  color: #003f66;
}

/* TOPへ戻るリンク */
.pointright {
  text-align: right;
  margin-top: 16px;
}

.pointright a {
  font-size: 0.9em;
  color: #666;
  text-decoration: none;
}

.pointright a:hover {
  color: #005f99;
  text-decoration: underline;
}
.programtitlelong h2 {
  font-size: 1.6em;
  color: #ff4081; /* ポップなピンク */
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  background: linear-gradient(to right, #ffe0f0, #fffaf5);
  border: 2px solid #ff80ab;
  display: inline-block;
  font-family: "Comic Sans MS", "Arial Rounded MT Bold", sans-serif;
  position: relative;
}
/* --- PDFリスト用スタイル --- */
.kobe_utafesstyle .pdflist {
  list-style-position: inside;
  padding-left: 0;
  margin: 0 0 16px 0; /* 下に余白を作る */
}

.kobe_utafesstyle .pdflist li {
  margin-bottom: 10px;
  padding-left: 0.5em;
  line-height: 1.5;
  /* フォントは触らない */
}

.kobe_utafesstyle .pdflink {
  text-decoration: none;
  /* 色・フォントは元のまま */
  transition: color 0.3s ease;
}

.kobe_utafesstyle .pdflink:hover,
.kobe_utafesstyle .pdflink:focus {
  text-decoration: underline;
  /* 色も変更しない（元のまま） */
  outline: none;
}

.kobe_utafesstyle .pdfnote {
  display: block;
  margin-left: 1em;
  margin-top: 4px;
  line-height: 1.4;
  /* フォントや色は触らない */
}

/* 画像レスポンシブ対応 */
img {
  max-width: 100%;
  height: auto;
}

/* ページ全体リセットとフォントはそのまま */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: inherit; /* 現状維持 */
  box-sizing: border-box;
}

/* ページ全体の中央寄せ用コンテナ */
.container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* スマホ表示調整 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 10px;
  }
}
/* ======================================================
   ★ listen_sound_source: モバイル改善オーバーライド
   ====================================================== */

/* 1) ページタイトル（「祭典に向けた 歌の練習ガイド」想定） */
.itemtitle_a h1 {
  /* 画面幅に応じて縮む：最小20px, 推奨基準5vw, 最大36px */
  font-size: clamp(20px, 5vw, 36px);
  line-height: 1.25;
  margin: 0;                 /* リセット */
  margin-bottom: 1.25em;     /* 下に十分な余白を確保 */
  padding: 0 .25em;          /* 両端に少しスペース（スマホ圧迫対策） */
  box-sizing: border-box;
  overflow-wrap: anywhere;   /* 極端なオーバーフロー回避（任意折り） */
  word-break: keep-all;      /* 日本語の不自然分割を少し抑制（対応ブラウザ） */
  text-align: center;        /* 中央寄せ（既存に合わせて変更可） */
}

/* スマホでさらに詰まる時は微調整 */
@media (max-width: 480px) {
  .itemtitle_a h1 {
    font-size: clamp(18px, 6vw, 28px);
    margin-bottom: 1.5em;
    padding: 0 .5em;
  }
}

/* 2) タイトル直下の枠との隙間保証（構造: .itemtitle_a + .sagafes_concertarea） */
.itemtitle_a + .sagafes_concertarea {
  margin-top: 1.5em;  /* 必要なら数値変更 */
}

/* 3) PDFリストの行頭・記号はみ出し対策 */
.kobe_utafesstyle .pdflist {
  list-style-position: outside;  /* bullet基準点を枠内に安定化 */
  margin: 0 0 1.5em 1.25em;      /* 左に余裕 */
  padding: 0;
}

.kobe_utafesstyle .pdflist li {
  margin-bottom: 0.75em;
  padding-left: 0;               /* bulletと本文距離はブラウザ既定 */
  /* 全角「・」など本文内記号がある場合に備えて */
  text-indent: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* スマホで左右余白詰まりによるはみ出しをさらに防止 */
@media (max-width: 480px) {
  .kobe_utafesstyle .pdflist {
    margin-left: 1em;
  }
  .kobe_utafesstyle .pdflist li {
    margin-bottom: 0.6em;
  }
}

/* 4) .programtitlelong h2 の重複定義整理
   - 元CSSのビジュアル（ピンク背景等）は維持
   - モバイルではサイズ縮小
*/
.programtitlelong h2 {
  font-size: 1.6em;
  color: #ff4081;
  margin: 0 0 10px 0;
  padding: 6px 12px;
  border-radius: 10px;
  background: linear-gradient(to right, #ffe0f0, #fffaf5);
  border: 2px solid #ff80ab;
  display: inline-block;
  font-family: "Comic Sans MS", "Arial Rounded MT Bold", sans-serif;
  position: relative;
  line-height: 1.2;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .programtitlelong h2 {
    font-size: 1.3em;
    padding: 4px 10px;
  }
}

@media (max-width: 400px) {
  .programtitlelong h2 {
    font-size: 1.1em;
    padding: 4px 8px;
  }
}

/* 5) 枠とコンテンツの内側余白を少し拡張（モバイル） */
@media (max-width: 600px) {
  .sagafes_concertarea {
    padding: 20px 16px;
  }
}


/*-------------------------------------------------------
  ここまで合同演奏音源ページ用カスタムスタイルの設定
-------------------------------------------------------*/






/*-------------------------------------------------------
	ここからタクシー情報の設定
-------------------------------------------------------*/

/*------------ここから佐賀市内のタクシー会社案内設定----------*/

#saga_taxi #main #taxi_information{
	font-family: Arial, sans-serif;
	margin: 20px;
}

#saga_taxi #main #taxi_information h1{
	text-align: center;
	color: #333;
}

#saga_taxi #main #taxi_information table{
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
}

#saga_taxi #main #taxi_information table, th, td{
	border: 1px solid #ccc;
}

#saga_taxi #main #taxi_information th, td{
	padding: 10px;
	text-align: left;
}

#saga_taxi #main #taxi_information th{
	background-color: #f4f4f4;
	text-align: center;
}

#saga_taxi #main #taxi_information tr.point{
	background-color: #f9f9f9;
}

/*------------ここまで佐賀市内のタクシー会社案内設定----------*/

/*------------ここから鳥栖市内のタクシー会社案内設定----------*/
#tosu_taxi #main #taxi_information{
	font-family: Arial, sans-serif;
	margin: 20px;
}

#tosu_taxi #main #taxi_information h1{
	text-align: center;
	color: #333;
}

#tosu_taxi #main #taxi_information table{
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
}

#tosu_taxi #main #taxi_information table, th, td{
	border: 1px solid #ccc;
}

#tosu_taxi #main #taxi_information th, td{
	padding: 10px;
	text-align: left;
}

#tosu_taxi #main #taxi_information th{
	background-color: #f4f4f4;
	text-align: center;
}

#tosu_taxi #main #taxi_information tr.point{
	background-color: #f9f9f9;
}

/*------------ここまで鳥栖市内のタクシー会社案内設定----------*/

/*-------------------------------------------------------
	ここまでタクシー情報の設定
-------------------------------------------------------*/
/* ====================================
   追加するCSSスタイル (kobe_utafesstyle.css に追加してください)
   ==================================== */

/* 全てのセクションに共通の余白と背景 */
section {
    margin-bottom: 40px; /* 各セクションの下に余白 */
    padding: 20px 30px; /* セクション内のパディング */
    background-color: #f8fcf8; /* わずかに異なる背景色でセクションを区別 */
    border-radius: 8px; /* 角を丸くする */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* 軽い影で立体感を出す */
}

/* セクションタイトル */
.section-title {
    background: linear-gradient(to right, #ffcc70, #ff8c94); /* 既存のsummaryスタイルに似たグラデーション */
    color: white;
    padding: 10px 20px;
    margin: -20px -30px 20px -30px; /* 親のパディングを相殺し、左右いっぱいに広げる */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    font-size: 1.4em; /* 適切なフォントサイズ */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    letter-spacing: 0.05em;
}

.section-title h2 {
    margin: 0; /* h2のデフォルトマージンをリセット */
    color: inherit; /* 親の文字色を継承 */
}

/* セクション内の本文スタイル */
.section-body p,
.registration-content p,
.info-content p,
.sandokin-links p {
    line-height: 1.6;
    margin-bottom: 1em;
}

/* リストアイテムのスタイル */
section ul {
    list-style: disc; /* 通常の黒丸 */
    margin: 0 0 1em 20px; /* 左側にインデント */
    padding: 0;
}

section ul li {
    margin-bottom: 0.5em;
}

/* 注意書きなど、セクション外のような見た目のPタグ */
p.note-outside {
    background-color: #fff9e6; /* 薄い黄色系の背景で注意を引く */
    border-left: 5px solid #ffbb00; /* 左側にアクセントボーダー */
    padding: 10px 15px;
    margin-top: 20px;
    font-size: 0.95em;
    color: #555;
    border-radius: 4px;
}

/* ------------------------------------
   宿泊ホテルセクション
   ------------------------------------ */
/* .info-section には上記セクション共通スタイルが適用されます */

/* ------------------------------------
   出演登録セクション
   ------------------------------------ */
.registration-content {
    display: flex; /* Flexboxで内容を横並びにする */
    gap: 30px; /* 要素間の隙間 */
    flex-wrap: wrap; /* 小さい画面で折り返す */
}

.registration-content .explanation_a {
    flex: 2; /* explanation_a は explanation_b より広めに */
    min-width: 300px; /* 最小幅 */
}

.registration-content .explanation_b {
    flex: 1; /* explanation_b は画像を配置するエリア */
    min-width: 200px; /* 最小幅 */
    text-align: center; /* 画像とボタンを中央寄せ */
}

.registration-content .explanation_b img {
    max-width: 100%; /* 画像が親要素を超えないように */
    height: auto;
    display: block; /* 余分な下マージンをなくす */
    margin: 0 auto 20px auto; /* 画像の下に余白 */
    border: 1px solid #ddd; /* 軽いボーダー */
    border-radius: 5px;
}

/* 登録ノートのスタイル */
ul.registration-note {
    list-style: none; /* ドットをなくす */
    padding-left: 0; /* 左のインデントをなくす */
    margin-top: 1.5em;
    border-top: 1px dashed #eee; /* 上に点線区切り */
    padding-top: 1em;
    font-size: 0.9em;
    color: #666;
}

ul.registration-note li {
    margin-bottom: 0.3em;
}

ul.registration-note a {
    color: #007bff; /* リンク色 */
    text-decoration: underline;
}


/* ボタンリンクの共通スタイル */
.button-link, .download-button, .pdf-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px; /* ボタン間の余白 */
    background: linear-gradient(to right, #6bb9f0, #5a9bd6); /* 青系のグラデーション */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.button-link:hover, .download-button:hover, .pdf-button:hover {
    background: linear-gradient(to right, #5a9bd6, #4a7eaa);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* ------------------------------------
   賛同金資料セクション
   ------------------------------------ */
.registration-wrapper {
    /* 必要に応じて、このラッパーに特別なスタイルを追加 */
}

.section-title.center {
    text-align: center;
}

.sandokin-container {
    display: flex;
    justify-content: center; /* 中央寄せ */
    align-items: flex-start; /* 上揃え */
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.sandokin-image {
    text-align: center;
}

.sandokin-image .thumbnail-img {
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    max-width: 100%;
    height: auto;
}

.sandokin-links ul {
    list-style: none; /* ドットをなくす */
    padding-left: 0;
}

.sandokin-links li {
    margin-bottom: 1.5em;
    border-bottom: 1px dashed #eee;
    padding-bottom: 1.5em;
}

.sandokin-links li:last-child {
    border-bottom: none; /* 最後の項目はボーダーなし */
    margin-bottom: 0;
    padding-bottom: 0;
}

.sandokin-links li strong {
    font-size: 1.1em;
    color: #333;
}

.sandokin-links .download-button {
    margin-top: 10px;
    background: linear-gradient(to right, #70d6a5, #5ac694); /* 緑系のグラデーション */
}
.sandokin-links .download-button:hover {
    background: linear-gradient(to right, #5ac694, #4aae82);
}

.pdf-link {
    margin-top: 10px;
}

.pdf-button {
    background: linear-gradient(to right, #ff9a8b, #ff6a6a); /* 赤系のグラデーション */
}
.pdf-button:hover {
    background: linear-gradient(to right, #ff6a6a, #e04a4a);
}

.contact-info {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background-color: #f0f8ff; /* 薄い青系の背景 */
    border: 1px solid #cceeff;
    border-radius: 8px;
    line-height: 1.8;
    color: #333;
}

.contact-info .email-highlight {
    color: #007bff;
    font-weight: bold;
    text-decoration: none;
}
.contact-info .email-highlight:hover {
    text-decoration: underline;
}
/* 賛同金申込用紙 注意文 */
.notice-message {
    background-color: #fff8e1;  /* 淡い黄色で注意喚起 */
    border-left: 5px solid #ffb300;  /* 濃い黄色の左線 */
    padding: 10px;
    margin-top: 10px;
    font-size: 0.95em;
    line-height: 1.6;
}
.notice-message {
    background-color: #fff8dc;   /* 薄いクリーム色で目立つ */
    border-left: 6px solid #ff9900; /* 左側にオレンジの太線 */
    padding: 12px 16px;
    margin-top: 16px;
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.5;
    color: #663300;  /* こげ茶色で読みやすく */
    border-radius: 4px;
}

/* ------------------------------------
   グッズ紹介、チラシ、正誤表、プレ企画セクション
   (info-section の共通スタイル)
   ------------------------------------ */
.info-content {
    display: flex;
    align-items: center; /* 垂直方向中央寄せ */
    gap: 30px;
    flex-wrap: wrap; /* 小さい画面で折り返す */
}

.info-left {
    flex: 2; /* 広い方のカラム */
    min-width: 250px;
}

.info-right {
    flex: 1; /* 画像用カラム */
    min-width: 150px;
    text-align: center;
}

.info-right img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* リンク付き画像の下の余白 */
.info-right a {
    display: inline-block; /* 画像リンクの余白調整用 */
}

/* 既存のkobe_utafesstyle.cssのメディアクエリに追加するか、
   独立したメディアクエリブロックとして追加 */
@media screen and (max-width: 768px) {
    section {
        padding: 15px 20px;
    }

    .section-title {
        margin: -15px -20px 15px -20px;
        font-size: 1.2em;
        text-align: center; /* モバイルでは中央寄せ */
    }

    .registration-content,
    .sandokin-container,
    .info-content {
        flex-direction: column; /* 縦並びにする */
        gap: 20px;
    }

    .registration-content .explanation_a,
    .registration-content .explanation_b,
    .sandokin-links,
    .sandokin-image,
    .info-left,
    .info-right {
        min-width: unset; /* 最小幅をリセット */
        width: 100%; /* 幅を100%にする */
    }

    .sandokin-image img,
    .info-right img {
        margin-bottom: 10px; /* 画像の下の余白を調整 */
    }

    .sandokin-links ul {
        margin-left: 0; /* モバイルではリストのインデントをなくす */
    }

    .contact-info {
        margin-top: 20px;
    }
}
/* お問い合わせフォーム全体のコンテナ */
.contact-container {
  /* overflow の設定は削除するか、visible に変更 */
  /* もし hidden や auto が設定されている場合は、これらを削除または visible に変更してください */
  /* 例: overflow: hidden; */
  overflow: visible; /* 画面からはみ出たコンテンツも表示されるようにする */

  /* 高さの指定を確認し、必要であれば min-height を使用して、内容に応じて伸びるようにする */
  /* もし height が固定値で小さすぎる場合、以下のように修正してください */
  /* 例: height: 400px; */
  min-height: 500px; /* フォームの高さがコンテンツに合わせて自動調整されるように、最小高さを設定 */
  height: auto; /* 高さを内容に合わせて自動調整 */

  /* その他、既存のスタイルは維持 */
  max-width: 600px; /* フォームの最大幅 (必要に応じて調整) */
  margin: 50px auto; /* 中央寄せ */
  padding: 30px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* ボタンを囲むラッパー */
.form-submit-button-wrapper {
  /* ここには特に overflow や高さの制限は設けない */
  /* 必要であればマージンを追加して、ボタンとフォーム要素の間に余白を持たせる */
  margin-top: 25px; /* 上部に少し余白を追加 */
  text-align: center; /* ボタンを中央寄せにする場合 */
}

/* 確認ボタンのスタイル（既存のものがなければ追加） */
.form-submit-button-wrapper button {
  padding: 12px 25px;
  background-color: #007bff; /* ボタンの背景色 */
  color: white; /* 文字色 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1em;
  transition: background-color 0.3s ease; /* ホバー時のアニメーション */
}

.form-submit-button-wrapper button:hover {
  background-color: #0056b3; /* ホバー時の背景色 */
}

/* レスポンシブ対応の調整（必要であれば追加） */
@media (max-width: 768px) {
  .contact-container {
    margin: 20px; /* スマートフォン表示時などのマージン調整 */
    padding: 20px;
  }

  .form-submit-button-wrapper button {
    width: 100%; /* 小さい画面でボタンを横幅いっぱいに広げる */
    box-sizing: border-box; /* paddingとborderを幅に含める */
  }
}



/* ━━━━━━━━━━━━━━━━━━━━━━━━
   料飲マップ アコーディオン
━━━━━━━━━━━━━━━━━━━━━━━━ */
.foodmap-accordion {
  width: 95%;
  margin: 20px auto;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #e53935;
  background: #fffaf5;
}

.foodmap-title {
  background: #e53935;
  color: #fff;
  padding: 12px 18px;
  font-size: 1.5em;
  font-weight: bold;
}

.accordion {
  cursor: pointer;
  padding: 14px 20px;
  background-color: #ffe6e0;
  border-bottom: 1px solid #e0b0a0;
  font-size: 1.2em;
  font-weight: bold;
}

.accordion:hover {
  background-color: #f9c8be;
}

.panel {
  display: none;
  padding: 10px 20px 20px 20px;
  background: #fffaf5;
}

.food-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.95em;
}

.food-table th,
.food-table td {
  border: 1px solid #e0d0c0;
  padding: 6px 8px;
}

.food-table th {
  background: #fddddd;
  font-weight: bold;
}










/*--------------------------------------------------------
	ここから工事中の案内
----------------------------------------------------------*/

#in_main .itemtitle_a{
	width: 600px;
	height: 60px;
	margin: 10px 0 0 50px;
	background-image: url(../images/construction.jpg);
	background-repeat: no-repeat;
}

.itemtitle_a p{
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	line-height: 60px;
	color: red;
	padding-top: 2px;
}

.section_a{
	width: 760px;
	height: 300px;
}

.section_a .explanation_a{
	float:left;
	width: 430px;
	padding-top: 100px;
	padding-left: 50px;
	padding-right: 20px;
}

.section_a .explanation_a p{
	font-size: 1.1em;
	letter-spacing: 0.1em;
	font-weight: bold;
	line-height: 2em;
}

.section_a .explanation_b{
	float:left;
}

.section_a .explanation_b img{
	padding-top: 37px;
}


/*--------------------------------------------------------
	ここまで工事中の案内
----------------------------------------------------------*/







/*h2タグ
---------------------------------------------------------------------------*/
/*h2タグ全体*/
#contents h2{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 1em;		/*h2の外側にとるスペース。上、左右、下への順番。*/
	font-size: 1.3em;		/*文字サイズ*/
	position: relative;		/*ulineを配置する為に必要な指定*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
	border-bottom: 2px solid #ddd;	/*薄い色の線の幅、線種、色*/
}

/*アクセントラインの設定*/
#contents h2 .uline{
	display: inline-block;position: relative;
	padding: 10px 1em;	/*h2内の余白。上下、左右への順番。*/
	bottom: -2px;		/*濃い線を薄い線に重ねる為の指定。枠線の幅と合わせます。*/
	border-bottom: 2px solid #ee6813;	/*濃い色の線の幅、線種、色*/
}

/*右側の装飾文字の設定*/
#contents h2 .small{
	font-size: 0.6em;
	opacity: 0.7;
	margin-right: 1em;
}


/*h3タグ
---------------------------------------------------------------------------*/
#contents h3{
	margin: 0 0 1em;	/*h3の外側にとるスペース。上、左右、下への順番。*/
	font-size: 1.2em;	/*文字サイズ*/
	padding: 10px 1em;	/*h3内の余白。上下、左右への順番。*/
	border-bottom: 2px solid #ddd;	/*薄い色の線の幅、線種、色*/
	font-weight: normal;	/*デフォルトの太字を標準に*/
}

















/*--  ここからフッターナビゲーションの設定  --*/

#footer_bg{
	clear: both;
	width: 1024px;
	height: 110px;
	background: #c5edc5;
}

#footer_navi{
	clear: both;
	width: 640px;
	height: 83px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 5px;
}

#footer_navi ul li.navigation{
	list-style-type: none;
	line-height: 1.6em;
}

#footer_navi ul li a{
	font-size: 0.9em;
	letter-spacing: 0.1em;
	text-decoration: none;
	color: #111;
}

#footer_navi .section_1{
	float: left;
	width: 160px;
}

#footer_navi .section_2{
	float: left;
	width: 160px;
}

#footer_navi .section_3{
	float: left;
	width: 160px;
}

#footer_navi .section_4{
	float: left;
	width: 160px;
}




#footer {
    background-color: #f0fff0; /* 薄い緑色 (Honeydew) */
    color: #000000;            /* 黒色 */
    font-size: 200%;           /* 文字サイズ2倍 */
    padding: 20px;             /* 余白（背景色を見やすくするため） */
    line-height: 1.6;          /* 行間を整える */
}


/*--  ここからアドレズバーの設定  --*/
address#footer{
	clear: both;
	width: 1024px;
	height: 5px;
	margin-left: auto;
	margin-right: auto;
	font-size: 0.8em;
	font-style: normal;
	text-align: center;
	line-height: 15px;
	padding-top: 3px;
	border-top: 1px solid #aaa;
}


/*----------------------------------------
	ここからエラーの設定
----------------------------------------*/
#errorpage_section{
	width: 1026px;
}

#errorpage_section #in_errorpage_section{
	width: 600px;
	margin: 50px auto;
}

#errorpage_section #in_errorpage_section dl dt.error_item{
	height: 30px;
	background: #efefef;
	padding-left: 20px;
	font-size: 1em;
	letter-spacing: 0.2em;
	line-height: 30px;
}

#errorpage_section #in_errorpage_section dl dd.error_explan{
	margin: 5px 0;
	padding-left: 40px;
	font-size: 1em;
	letter-spacing: 0.1em;
	line-height: 1.3em;
}
/*----------------------------------------
	ここまでエラーの設定
----------------------------------------*/


/*----------------------------------------
	ここから長い文章を短くする設定
----------------------------------------*/
.hidensection .infobox_a p.boxdisplaylink a{
	font-size: 0.98em;
	letter-spacing: 0.05em;
	padding-left: 10px;
	text-decoration: none;
}

.hidensection .infobox_b{
	margin: 0px;
	padding: 0px;
	display: none;   /*--  抜粋枠以外の文字を隠す  --*/
}

.hidensection .infobox_b .infotext p{
	font-size: 0.98em;
	letter-spacing: 0.05em;
	line-height: 1.5em;
}

.hidensection .infobox_b .boxreturn{
	margin: 0 15px 0 10px;
}

.hidensection .infobox_b .boxreturn p a{
	font-size: 0.98em;
	letter-spacing: 0.05em;
	padding-left: 10px;
	text-decoration: none;
}


/*----------------------------------------
	ここまで長い文章を短くする設定
----------------------------------------*/

/*----------------------------------------
	文字の多いタイトル設定
----------------------------------------*/

/*----------------TOPに戻る-----------------------*/
.backajustright{
	width : 163px;
	float: right;
	margin-right: 20px;
}

.back-to-top{
	display: inline-block;
	margin: 20px 0;
	padding: 10px 15px;
	text-decoration: none;
	color: #ffffff;
	font-size: 1em;
	font-weight: bold;
	background-color: #4caf50;
	border-radius: 5px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
	text-align: center;
}

.back-to-top:hover{
	background-color: #45a049;
	transform: translateY(-3px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.back-to-top:active{
	background-color: #388e3c;
	box-shadow: none;
}