/**********************************************************/
/*ヘッダ（見出し）の表示設定*/
/**********************************************************/
#main h1
{
	/*内側方向の余白*/
	padding: 10px 10px 0px 10px;
	/*外側方向の余白*/
	margin: 10px 10px 0px 10px;

	/*デバッグ用*/
	/*border: solid 1px black;*/
	/*background: lightyellow;*/
}

#main h2
{
	border-left: solid red 20px;
	border-top: solid black 1px;
	border-bottom: solid black 1px;
	border-right: solid black 1px;
	padding: 5px 0px 5px 10px;
	margin: 40px 10px 10px 10px;
	/*width: 95%;*/
}

#main h3
{
	border-left: solid blue 15px;
	/*border-top: solid black 1px;*/
	border-bottom: solid black 1px;
	/*border-right: solid black 1px;*/
	padding: 5px 0px 5px 10px;
	margin: 20px 10px 10px 10px;
	/*width: 80%;*/
}

#main h4
{
	border-left: solid green 10px;
	/*border-top: solid black 1px;*/
	border-bottom: solid black 1px;
	/*border-right: solid black 1px;*/
	padding: 2px 0px 2px 10px;
	margin: 20px 10px 10px 10px;
	/*width: 80%;*/
}

#main h5
{
}


/**********************************************************/
/*暫定の節見出しの表示設定*/
/**********************************************************/
#main h2.section_header
{
	background: aliceblue;
	font-size: 26px;
	border: double navy 6px;
	text-align: center;

	padding: 10px 5px 10px 5px;
	margin: 20px 5px 20px 5px;
}

/**********************************************************/
/*サブタイトルの表示設定*/
/**********************************************************/
#main p.sub
{
	text-indent: 0em;
	font-weight: bold;
	font-size: 1.4em;
	padding: 0;
	margin: -2px 0px 10px 25px;
}

#main p.sub1
{
	text-indent: 0em;
	font-weight: bold;
	font-size: 1.4em;
	padding: 0;
	margin: -2px 0px 10px 25px;
}


/**********************************************************/
/*段落の表示設定*/
/**********************************************************/
#main p
{
	/*最初の行だけ1字分インデントする*/
	text-indent: 1em;
	/*内側方向の余白（上・右・下・左）*/
	padding: 5px 5px 5px 10px;
	/*外側方向の余白（上・右・下・左）*/
	margin: 5px 0px 5px 10px;
	/*white-space: nowrap;*/
	word-break: break-all;
}


/**********************************************************/
/*画像の縦方向位置合わせ*/
/**********************************************************/
#main img
{
	/*行中の縦方向合わせ*/
	vertical-align: middle;
}


/**********************************************************/
/*太字，イタリックの表示設定*/
/**********************************************************/
/*太字用のクラス*/
#main .bold
{
	font-weight: bold;
}

/*イタリック用のクラス（日本語はイタリックにならない）*/
#main .italic
{
	/*font-style: italic;*/
	font-style: oblique;
}


/**********************************************************/
/*リンクの表示設定*/
/**********************************************************/
/*色は青色で固定．アンダーラインは表示しない．*/
#main a
{
	color: blue;
	text-decoration: none;
}

/*一度表示したことがあるリンク先でも色はかえない*/
#main a:visited
{
	color: blue;
}


/**********************************************************/
/*箇条書きの表示設定*/
/**********************************************************/
/*番号あり箇条書き*/
#main ol
{
	/*外側方向の余白（上・右・下・左）*/
	margin: 5px 0px 5px 20px;
}

/*番号なし箇条書き*/
#main ul
{
	/*外側方向の余白（上・右・下・左）*/
	margin: 5px 0px 5px 20px;
}

/*箇条書きの各要素*/
#main li
{
	/*内側方向の余白*/
	padding: 3px;
	/*外側方向の余白*/
	margin: 0;
}


/**********************************************************/
/*中央寄せのクラス*/
/**********************************************************/
#main .center
{
	text-align: center;
	margin: 0 auto;
}


/**********************************************************/
/*図・写真の表示設定*/
/**********************************************************/
#main .pic_table table
{
	border: none;
	margin-right: auto;
	margin-left: auto;
	padding: 10px;
	table-layout: fixed;
}

#main .pic_table th
{
	border: none;
	text-align: center;
	padding: 2px;
	margin: 0;
}

#main .pic_table td
{
	border: none;
	font-weight: bold;
	padding: 2px 15px 2px 15px;
	margin: 0;
}


/**********************************************************/
/*ソース・コードの表示設定*/
/**********************************************************/
#main .source_code table
{
	margin: 0 auto;
	width: 90%;
}

#main .source_code th
{
	font-weight: normal;
	padding: 0;
	margin: 0;
	/*background: lightcyan;*/
}

#main .source_code td
{
	border: none;
	font-weight: bold;
	padding: 0px 0px 0px 5px;
	margin: 0;
	/*background: lightyellow;*/
}


/**********************************************************/
/*セミナ紹介ページの表示設定*/
/**********************************************************/
/*「スケジュール」の表全体の表示設定*/
#main .schedule table
{
	border-collapse: collapse;
	border: solid 2px black;
	padding: 5px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}

/*「スケジュール」の表の<th>と<td>の表示設定*/
#main .schedule th, td
{
	border: solid 1px black;
}

/*「学ぶこと」で使う箇条書き*/
#main ul.seminar
{
	margin: 2px 2px 2px 30px; 
}

/*「講師紹介」で使う箇条書き*/
#main ul.instructor
{
	margin: 2px 2px 2px 30px;
	list-style: none;
}


/**********************************************************/
/*「アコーディオン」部分の表示設定*/
/**********************************************************/

/*アコーディオン部分を囲う外枠*/
.accordion_box
{
	position: relative;	
	border: 2px solid black;
	width: 95%;
	margin: 10px 5px 10px 5px;
	padding: 10px 5px 10px 5px;
	
	/*デバッグ用*/
	/*background: lightyellow;*/
}


/*アコーディオン部分のコンテンツの表示設定*/
.accordion_box .accordion_contents
{
	/*初期状態（隠している状態）の高さ*/
	height: 11em;
	/*枠からあふれている文字は隠す*/
	overflow: hidden;
	/*transition効果（時間的な変化）を設定する*/
	transition: all 0.5s;
}


/*アコーディオンの開閉を操作する"checkbox"の表示設定*/
.accordion_box input
{
	/*checkboxそのものは非表示にする*/
	display: none;
}

/*閉じている時は"label"を不透明にしてコンテンツ部分を隠す*/
.accordion_box label
{
	/*配置は"absolute"を指定する*/
	position: absolute;
	/*ボックスの重なりの順序を指定する．値が大きいほど上になる．*/
	z-index: 1;
	/*左下を基準点とする（左下に寄せて配置する）*/
	bottom: 0;
	left: 0;
	/*親要素の幅にあわあせる*/
	width: 100%;
	/*グラデーション領域の高さ*/
	height: 100px;
	/*height: 140px;*/
	/*"to bottom"で，下方向に向かうグラデーションを指定している*/
	/*rgba()の第4引数は，"0"で完全に透明，"1"で完全に不透明．*/
	/*開始色，途中色（省略可能），終了色を指定可能．各色の開始位置をスペース後に入れてもよい*/
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 80%);
}

/*閉じている時の"label"部分に表示する文字や背景色の設定*/
.accordion_box label:before
{
	/*初期状態で表示する文字*/
	content: "\8A73\7D30\3092\898B\308B";
	/*文字を中央寄せする*/
	text-align: center;
	/*太字にする*/
	font-weight: bold;
	/*ラベル自体を中央寄せする*/
	left: 0;
	right: 0;
	margin: auto;
	/*文字色*/
	color: #ffffff;
	/*背景色*/
	/*background-color: #3030f0;*/
	background-color: navy;
	
	/*配置は"absolute"にする*/
	position: absolute;
	/*ラベルの高さ*/
	line-height: 2em;
	/*ラベルの横幅*/
	width: 10em;
	/*ラベルの枠の角を丸める*/
	border-radius: 10px;
	/*ラベルと本文との間の下側の余白*/
	bottom: 10px;
	/*最前面に表示する*/
	z-index: 2;
}

/*展開したときのlabelの背景色*/
.accordion_box input:checked + label
{
	/*展開したときは塗りつぶしを無効にする（本文を見せる）*/
	/*background: inherit;*/
	background: none;
}

/*展開したときのlabelの文字設定*/
.accordion_box input:checked + label:before
{
	/*ラベル部分に表示する文字を「閉じる」に変更する*/
	content: "\9589\3058\308B";
}

/*展開したときのコンテンツ部分の表示設定*/
.accordion_box input:checked ~ .accordion_contents
{
	/*全ての文章が表示されるように，高さを"auto"に設定する*/
	height: auto;
	/*展開したときの下側の余白（「閉じる」ボタンの分だけ開けておく）*/
	padding-bottom: 60px;
	/*transition効果（時間的な変化）を設定する*/
	transition: all 0.5;
}

/**********************************************************/
/*「アコーディオン」部分の表示設定*/
/**********************************************************/


/**********************************************************/
/*バナー広告*/
/**********************************************************/
#main .ad img
{
	width: 88%;
	max-width: 950px;
	/*text-align: center;*/
}

#main .ad
{
	text-align: center;
	margin: 70px 0px 70px 0px;
}


/**********************************************************/
/*Google検索窓の表示設定*/
/**********************************************************/
#main #access_counter table tr td
{
	/*表の枠線を表示しない*/
	border: none;
}

/*========================================================*/
/色付きの太字*/
/*========================================================*/
#main .red_bold
{
	font-weight: bold;
	color: red;
}


#main .blue_bold
{
	font-weight: bold;
	color: blue;
}
/**********************************************************/
/* 購入するボタン
/**********************************************************/

.button-container {
  display: flex;
  justify-content: center;
}

.purchase-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #f4941c;
  color: #fff;
  border: none;
  cursor: pointer;
}

.purchase-btn:hover {
  background-color: #3e8e41;
}

.fa-shopping-cart {
  margin-left: 10px;
}