/* 料金表指定 */




.button-container,.button-container3 {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}



.button-container_d,.button-container_d3 {
  position: relative;
  text-align: center;
  margin-bottom: 20px;
}




#showTableButton_d,#showTableButton_d3 {
  background-color: #640000; /* 背景色を赤色に設定 */
  width: 85%; /* 幅をtable-containerと同じに設定 */
  padding: 8px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  color: #FFFFFF; /* 文字色を白色に設定 */
  border: none;
  cursor: pointer;
  height: 3em; /* 高さを3行分に設定 */
}


.table-container_d,.table-container_d3 {
  width: 85%; /* テーブルの幅を80％に設定 */
  margin: 0 auto; /* テーブルを中央に揃える */
  display: none; /* 最初は非表示にする */
  overflow: hidden; /* アニメーション用にオーバーフローを隠す */
max-height: 0; /* 最初は高さを0に設定 */
  transition: max-height 0.5s; /* アニメーション時間を設定 */
}





.button-container_d2,.button-container_d4,.button-container_d6 {
  text-align: center;
  margin-bottom: 20px;
}

#showTableButton_d2,#showTableButton_d4,#showTableButton_d6 {
  background-color: #00006E; /* 背景色を青色に設定 */
  width: 85%; /* 幅をtable-containerと同じに設定 */
  padding: 8px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  color: #FFFFFF; /* 文字色を紺色に設定 */
  border: none;
  cursor: pointer;
  height: 3em; /* 高さを3行分に設定 */
}


.table-container_d2,.table-container_d4,.table-container_d6 {
  width: 85%; /* テーブルの幅を80％に設定 */
  margin: 0 auto; /* テーブルを中央に揃える */
  display: none; /* 最初は非表示にする */
  overflow: hidden; /* アニメーション用にオーバーフローを隠す */
max-height: 0; /* 最初は高さを0に設定 */
  transition: max-height 0.5s; /* アニメーション時間を設定 */
}





.button-container_course_d {
  text-align: center;
  margin-bottom: 20px;
}

#showTableButton_course_d {
  background-color: #323232; /* 背景色を茶色に設定 */
  width: 85%; /* 幅をtable-containerと同じに設定 */
  padding: 8px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  color: #FFFFFF; /* 文字色を紺色に設定 */
  border: none;
  cursor: pointer;
  height: 3em; /* 高さを3行分に設定 */
}


.table-container_course_d {
  width: 85%; /* テーブルの幅を80％に設定 */
  margin: 0 auto; /* テーブルを中央に揃える */
  display: none; /* 最初は非表示にする */
  overflow: hidden; /* アニメーション用にオーバーフローを隠す */
max-height: 0; /* 最初は高さを0に設定 */
  transition: max-height 0.5s; /* アニメーション時間を設定 */
}





#showTableButton:hover,#showTableButton3:hover {
  background-color: #fb3744; /* マウスオーバー時の背景色 */
}


#showTableButton2:hover,#showTableButton4:hover,#showTableButton6:hover {
  background-color: #7272da; /* マウスオーバー時の背景色 */
}


#showTableButton_course:hover {
  background-color: #a57e52; /* マウスオーバー時の背景色 */
}




#showTableButton_d:hover,#showTableButton_d3:hover {
  background-color: #963232; /* マウスオーバー時の背景色 */
}


#showTableButton_d2:hover,#showTableButton_d4:hover,#showTableButton_d6:hover {
  background-color: #1E1E8C; /* マウスオーバー時の背景色 */
}


#showTableButton_course_d:hover {
  background-color: #3c3c3c; /* マウスオーバー時の背景色 */
}





.toggle-button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

#toggleButton {
  display: none;
}

#showTableButton:checked ~ #toggleButton {
  display: inline;
}

#showTableButton:not(:checked) ~ #tableContainer {
  max-height: 0;
  display: none;
}

#showTableButton:not(:checked) ~ #tableContainer,
#showTableButton:checked ~ #tableContainer2 {
  transition: max-height 0.5s ease;
}




table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed; /* テーブルのレイアウトを固定に設定 */
  font-family: "Impact";
}



td {
  border: 4px solid #131e1d; /* 濃い緑色の太い線を付ける */
  text-align: center;
  font-weight: bold;
  font-size: calc(1.5em + 5px); /* フォントサイズ */
  color: black; /* 文字色を茶色に設定 */
}




tr:nth-child(1) td{
  height: calc(2em); /* 最上段のセルの高さを3行分(3em)に設定 */
}


tr:nth-child(2) td{
  height: calc(4em);
}


tr:last-child td {
  height: calc(1em); /* 最下段のセルの高さを1行分(3em)に設定 */
}



td.price_border {
  background: linear-gradient(to bottom right, transparent 49.5%, #5c3e26 49.5%, #5c3e26 50.5%, transparent 50.5%);
  background-size: 100% 100%;
}




.price_student {
  font-size: calc(1em + 25px); /* 金額の部分だけフォントサイズを+8に設定 */
font-family: Impact;
  color: red;
}


.price {
  font-size: calc(1em + 25px); /* 金額の部分だけフォントサイズを+8に設定 */
font-family: Impact;
  color: #000;
}


.price_explanation {
  font-size: calc(0.6em);
}


.price_non_member {
  font-size: calc(1em + 25px); /* 金額の部分だけフォントサイズを+8に設定 */
  font-family: Impact;
  color: #302622;
}



.min {
  font-size: calc(1em + 15px); /* 金額の部分だけフォントサイズを+8に設定 */
}

.sns {
    display: inline-block;
    margin-left: 10px; /* これは右側に10pxのスペースを提供します */
}

/* 最後の.sns要素のmargin-rightを0に設定する */
.sns:last-child {
    margin-right: 0;
}



a.btn_03 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 260px;
	height: 90px;
	margin: auto;
	padding: 1rem 1rem;
	font-weight: bold;
	border: 2px solid #D70413;
	color: #D70413;
	border-radius: 100vh;
	transition: 0.5s;
}
a.btn_03:hover {
	color: #fff;
	background: #D70413;
}



a.btn_04 {
	color: #fff;
	display: block;
	background: #D70413;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 330px;
	margin: auto;
	padding: 1rem 3rem;
	font-weight: bold;
	border: 2px solid #D70413;
	border-radius: 100vh;
	transition: 0.5s;
}


a.btn_04:hover {
	color: #fff;
	background: #F08080;
	border: 2px solid #F08080;
}
/* スマートフォン用のスタイル */
@media screen and (max-width: 600px) {
	a.btn_04 {
		width: 250px; /* スマートフォンでの幅 */
		padding: 0.5rem 1rem; /* スマートフォンでのパディング */
		font-size: 0.8rem; /* スマートフォンでのフォントサイズ */
	}
}



/* スマートフォンや小さい画面サイズ用のスタイル */
@media screen and (max-width: 768px) {
    /* ボタンのスタイル調整 */
    #showTableButton_d, #showTableButton_d2, #showTableButton_d3,
    #showTableButton_d4, #showTableButton_d6, #showTableButton_course_d {
        width: 100%; /* 幅を100%に設定 */
        font-size: 18px; /* フォントサイズを小さく調整 */
        padding: 6px; /* パディングを調整 */
    }

    /* テーブルコンテナのスタイル調整 */
    .table-container_d, .table-container_d2, .table-container_d3,
    .table-container_d4, .table-container_d6, .table-container_course_d {
        width: 100%; /* 幅を100%に設定 */
    }

    /* テーブルのフォントサイズ調整 */
    table td {
        font-size: calc(1em + 2px); /* フォントサイズを小さく調整 */
    }

    /* 金額のフォントサイズ調整 */
    .price, .price_student, .price_non_member  {
        font-size: calc(0.8em + 15px); /* 金額のフォントサイズを調整 */
    }

    /* その他の要素のスタイル調整 */
    /* 必要に応じて他のスタイルをここに追加 */
}

/* スマートフォン用のボタンスタイル */
@media screen and (max-width: 600px) {
    a.btn_03, a.btn_04 {
        width: 100%; /* 幅を100%に設定 */
        padding: 0.5rem 1rem; /* パディングを調整 */
        font-size: 0.8rem; /* フォントサイズを調整 */
    }
}





.table-container3, .table-container4 {
  width: 85%;
  margin: 0 auto;
  display: none;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s;
}