/**********************************************************/
/*2カラムで表示するスタイル・シート  */
/*左：メニュー， 右：コンテンツ*/
/*レスポンシブル・デザイン対応 */
/* 2020/12/24 更新 */
/**********************************************************/



/**********************************************************/
/* 画面の横幅が大きいデバイス（PC）向けの表示
/**********************************************************/
/*==============================================*/
/*すべての要素を囲む<div>のスタイル*/
#wrapper
{
	/*幅の指定*/
	/*width: 100%;*/
	/*ページの最大横幅*/
	max-width: 1200px;
	/*内側方向の余白*/
	padding: 0;
	/*外側方向の余白*/
	margin: 0 auto;

	/*デバッグ用*/
	/*background: gray;*/
}

/*==============================================*/
/*2カラムの部分を囲む<div>のスタイル*/
#container
{
	/*幅の指定*/
	width: 100%;

	/*デバッグ用*/
	/*background: pink;*/
}

/*==============================================*/
/*左サイド・メニューの表示設定*/
#left_menu
{
	/*左サイド・メニューの幅．固定値． （初期値:160px）*/
	width: 180px;
	/*左寄せ*/
	float: left;
	/*余白は0にする*/
	padding: 0;
	margin: 0;

	/*デバッグ用*/
	/*background-color: aliceblue;*/
}

/*==============================================*/
/*中央コンテンツ本体の表示設定*/
#main
{
	/*左右サイドの幅の残りを中央に割り当てる*/
	width: calc(95% - 180px);
	/*最小幅は適宜決める （初期値:500px）*/
	/*min-width: 500px;*/
	/*左サイドの次の順序で左寄せ*/
	float: left;
	/*余白は0にする*/
	padding: 0;
	margin: 0;

	/*デバッグ用*/
	/*background-color: lightyellow;*/
}

/*==============================================*/
/*フッタの表示設定*/
#footer{
	/*"float"で指定した回り込みを解除する*/
	clear: both;
	/*幅の設定*/
	width: 100%;
}

/*==============================================*/
/*アクセス・カウンタの表示設定*/
#access_counter
{
	/*右寄せ*/
	text-align: right;
	/*外側方向の余白*/
	margin: 5px 10px 5px 10px;
	/*スクロール・バーを表示しない*/
	/*この指定をしないとモバイル表示時にページ全体が縮小されてしまう．*/
	overflow: hidden;
}

/*==============================================*/
/*モバイル向けのヘッダ（PC用表示の場合は隠す）*/
#mobile_header
{
	/*PC版では非表示にする*/
	display: none;
}

/*==============================================*/
/*モバイル向けのメニュー（PC用表示の場合は隠す）*/
#mobile_menu
{
	/*PC版では非表示にする*/
	display: none;
}

/*==============================================*/
/*モバイル向けの広告（PC用表示の場合は隠す）*/
#mobile_ad
{
	/*PC版では非表示にする*/
	display: none;
}




/**********************************************************/
/* 画面の横幅が小さいデバイス（スマホ・タブレット）向けの表示
/**********************************************************/
@media screen and (max-width: 1023px)
{

	/*==============================================*/
	/*スマホ・タブレット向けヘッダを表示する*/
	#mobile_header
	{
		/*ブロック要素として表示する*/
		display: block;
		/*表示する幅は100%とする*/
		width: 100%;
		/*画面からはみ出した部分は表示しない*/
		overflow: hidden;
	}

	/*==============================================*/
	/*スマホ・タブレット向けメニューを表示する*/
	#mobile_menu
	{
		/*ブロック要素として表示する*/
		display: block;
		/*表示する幅は100%とする*/
		width: 100%;
	}

	/*==============================================*/
	/*スマホ・タブレット向け広告を表示する*/
	#mobile_ad
	{
		/*ブロック要素として表示する*/
		display: block;
		/*表示する幅は100%とする*/
		width: 100%;
	}

	/*==============================================*/
	/*ページ全体を横幅100%で表示する*/
	#wrapper
	{
		/*横幅の設定*/
		width: 100%;
		/*内側方向の余白*/
		/*padding: 0;*/
		/*外側方向の余白*/
		/*margin: 0 auto;*/
	}

	/*==============================================*/
	/*メイン・コンテンツを幅100%で表示する*/
	#main
	{
		width: 100%;
	}

	/*==============================================*/
	/*PC用のヘッダは表示しない*/
	#header
	{
		display: none;
	}

	/*==============================================*/
	/*PC用のヘッダ・メニューは表示しない*/
	#head_menu
	{
		display: none;
	}

	/*==============================================*/
	/*PC用の左サイド・メニューは表示しない*/
	#left_menu
	{
		display: 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: 25em;
	/*枠からあふれている文字は隠す*/
	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;
}

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

/**********************************************************/
/*横並びの図の間隔を調整する設定*/
/**********************************************************/
.image-container {margin-right: 25px; /* 図の右側に25ピクセルのマージンを追加 */
}

/**********************************************************/
/*等幅フォント サイズ調整 <code class="custom"> */
/**********************************************************/

.custom {
 font-size: 16px; /* 好みのサイズに調整してください */
 /* 他のスタイルプロパティも追加できます */
  }


/**********************************************************/
/*ミナー告知に背景色と枠線を追加し、重要な部分を強調 */
/**********************************************************/
.seminar-announcement {
  background-color: #f1f1f1;
  border-left: 5px solid #007bff;
  padding: 20px;
  margin: 20px 0;
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.seminar-announcement:hover {
  background-color: #e0e0e0;
}

.seminar-link {
  color: #007bff;
  font-weight: bold;
  text-decoration: none;
  font-size: 18px;
}

.seminar-link:hover {
  text-decoration: underline;
  color: #0056b3;
}
.green-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.green-button:hover {
  background-color: #45a049;
}


/**********************************************************/
/*協賛企業表示 Cardタイプ */
/**********************************************************/


.sponsor-card {
  width: 340px;                     /* 枠を大きくしたい場合 */
  border: 4px solid #E72F18;        /* ← 上下だけでなく四方に枠線を付ける */
  padding: 24px 20px;               /* 余白を少し広げて見やすく */
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  background: #fff;
  box-sizing: border-box;
  border-radius: 10px;              /* 角を少し丸める */
  transition: transform 0.2s ease;
}

.sponsor-card:hover {
  transform: scale(1.05);
}

/* ロゴ画像を大きくする */
.sponsor-card img {
  display: block;
  width: 100%;           /* ← 枠の横幅いっぱいに表示 */
  height: auto;           /* ← アスペクト比を保って拡大 */
  margin: 0 auto 16px;
  object-fit: contain;    /* ← 比率を保って収まるように */
}

/* テキストのバランスを微調整 */
.sponsor-card .label {
  font-size: 18px;
  font-weight: bold;
  color: #E72F18;
  margin-top: 8px;
  line-height: 1.3;
}

.sponsor-card .name {
  font-size: 17px;
  color: #333;
  margin-top: 4px;
  line-height: 1.3;
}

/* aタグ全体をクリック範囲にして下余白を整える */
.sponsor-card a {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.sponsor-card a:hover .label {
  text-decoration: underline;
}


/**********************************************************/
/*セミナ/イベントの基本仕様 箇条書き表示 */
/**********************************************************/
.spec {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-left: 4px solid #E72F18;
  padding: 1.2em 1.5em;
  margin: 0 0 2em 0;
  list-style: none;
  font-family: "Segoe UI", sans-serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.spec li {
  margin-bottom: 0.8em;
}

.spec .label {
  font-weight: 600;
  color: #222;
  display: inline-block;
  min-width: 6em;
}

.spec a {
  color: #E72F18;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.spec a:hover {
  color: #c6281a; /* 少し暗めの赤でホバーエフェクト */
}


<!-- *************************************************** -->
  /* テーブル全体のスタイル */
  .pic_table2 table {
width: 100%; /* テーブルを親要素に合わせる */
border-collapse: collapse; /* セル間の余白をなくす */
table-layout: fixed; /* セルの幅を均等にする */
  }

  /* テーブルセルのスタイル */
  .pic_table2 th {
padding: 10px; /* セル内の余白 */
text-align: center; /* コンテンツを中央揃え */
  }

  /* 画像のサイズを調整 */
  .pic_table2 img {
max-width: 90%; /* 画像をセル内で大きく表示 */
height: auto; /* アスペクト比を維持 */
  }

  /* リンクのスタイル */
.pic_table2 a {
    display: inline-block;
    border: 2px solid #ddd;
    border-radius: 5px;
    transition: transform 0.3s, border-color 0.3s;
}

  /* ホバー時の効果 */
.pic_table2 a:hover {
    border-color: #007BFF; /* 青色 */
    transform: scale(1.05);
}
<!-- *************************************************** -->


<!-- *************************************************** -->
/* ===== メリット告知カード（CSS） ===== */
.benefit-card{
  --b-bg: #fff;
  --b-fg: #0f172a;   /* slate-900 */
  --b-sub: #475569;  /* slate-600 */
  --b-accent: #2563eb; /* blue-600 */
  --b-accent-2: #22c55e; /* green-500 */
  --b-border: rgba(37,99,235,0.25);

  position: relative;
  margin: 14px auto 18px;
  padding: clamp(16px, 3vw, 28px);
  max-width: 1000px;
  color: var(--b-fg);
  background:
    linear-gradient(var(--b-bg), var(--b-bg)) padding-box,
    linear-gradient(135deg, var(--b-accent), var(--b-accent-2)) border-box;
  border: 1.5px solid transparent;
  border-radius: 18px;
  box-shadow:
    0 8px 24px rgba(2,6,23,0.08),
    0 1px 0 rgba(2,6,23,0.04) inset;
}

/* 上部のリボン（特典あり！） */
.benefit-ribbon{
  position: absolute;
  top: -12px;
  left: 16px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--b-accent), var(--b-accent-2));
  box-shadow: 0 6px 14px rgba(37,99,235,0.25);
}

/* タイトル */
.benefit-title{
  margin: 8px 0 10px;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: .6em;
}
.benefit-title::before{
  content: "?";
  font-size: 1.1em;
  line-height: 1;
}

/* 本文 */
.benefit-text{
  margin: 0;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.9;
  color: var(--b-sub);
}

/* モバイル余白最適化 */
@media (max-width: 640px){
  .benefit-card{ margin: 12px 10px 16px; }
  .benefit-ribbon{ left: 12px; }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark){
  .benefit-card{
    --b-bg: #0b1220;   /* ほんのり青みのダーク */
    --b-fg: #e5e7eb;
    --b-sub: #cbd5e1;
    --b-border: rgba(99,102,241,0.35);
    box-shadow:
      0 12px 28px rgba(0,0,0,0.35),
      0 1px 0 rgba(255,255,255,0.04) inset;
  }
}

/* 特典カード（グリーン版・アニメーションなし） */
.bonus {
  background-color: #ecfdf5;  /* 淡いグリーン背景 */
  border: 2px solid #10b981;  /* 濃いグリーンの枠線 */
  border-radius: 12px;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.bonus-title {
  font-size: 1.5rem;
  font-weight: 900;
  color: #047857;  /* ダークグリーン文字 */
  text-align: center;
  margin-bottom: 0.8rem;
}
.bonus p {
  margin: 0;
  font-size: 1rem;
  color: #065f46;  /* 少し濃いグリーン文字 */
  line-height: 1.5;
}

.sponsor-card img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  display: block;
  margin: 0 auto 16px;
  object-fit: contain;
}


ul.instructor2 {
  border: 1px solid #ccc;         /* 薄いグレーの枠線 */
  background-color: #f9f9f9;      /* 薄いグレーの背景 */
  padding: 1.5em;                 /* 内側の余白 */
  border-radius: 8px;             /* 角を少し丸く */
  list-style-type: none;          /* デフォルトの・を消す */
}

ul.instructor2 li {
  margin-bottom: 0.7em;           /* 各項目の間に余白 */
}

ul.instructor2 .bold {
  font-weight: bold;              /* ラベルを太字に */
  color: #333;                    /* 見やすい文字色 */
}

ul.instructor2 a {
  color: #0056b3;                 /* リンク色を落ち着いた青に */
  text-decoration: none;
}

ul.instructor2 a:hover {
  text-decoration: underline;
}