*{
	margin: 0px;
	padding: 0px;

}
body {
	background-color: #FFF;
	font-size: 100%;
	line-height: 150%;
	color: #333333;
	width: 100%;
 	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}
/* ヘッダー */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
	/*border-bottom: 2px solid #339;*/
	max-width: 1200px; /* 最大幅を設定 */
    margin: 0 auto; /* 中央寄せ */
    width:100%; /* 画面幅に対応 */

}
.header .logo {
	float: left;
	max-height:40px;
	margin : 0 15px;
}
.header .logo a{
	text-decoration: none;
}

.search-container {
    flex-grow: 1;
    margin-left: 20px;
}
.search-input {
    width: 100%;
    max-width: 250px;
	margin:0 5px;
    padding: 4px;
    box-sizing: border-box;
	font-size:1em;
}

.main-nav {
	justify-content: space-between;
	max-width: 1200px; /* 最大幅を設定 */
    margin: 5px auto; /* 中央寄せ */
    width:100%; /* 画面幅に対応 */
	background: #55a;
	color: #fff;
	font-weight:bold;
  }
  
  .main-nav ul {
	display: flex;
	justify-content: space-around;
	margin: 0;
	padding: 0;
	list-style: none;
  }
  .main-nav li {
	display: block;
	padding: 0.5rem 0 ;
	line-height:1rem;
  }
  
  .main-nav li a {
	color: #fff;
	text-decoration: none;
  }
  
  .main-nav li a:hover {
	background: #e0e0e0;
	color: #00c;
  }
  

/* メインコンテンツとサイドメニュー */
.container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
	gap:20px;

}
.container a,a:visited{
	color: #03c;
	text-decoration: none;
}
.container a:hover{
color: #CC00FF;
}

.main-content {
    flex: 3;
    padding: 10px;
}

.main-content p {
    padding: 5px 10px 30px 0px;
}

.main-content img {
 -webkit-user-drag: none;   /* iOS Safari */
  -webkit-touch-callout: none; /* iOS 長押しメニュー防止 */
  user-select: none;         /* テキスト選択防止 */
  pointer-events: none;      /* ドラッグ禁止 */
}

.sidebar {
    flex: 1;
    padding: 5px;
	max-width:190px;
}

/* フッター（下部メニュー） */
.footer-menu {
	background-color: #eee;
	margin-top:50px;
    text-align: center;
	font-size: 0.8em;
}
.footer-menu a,a:visited{
	color: #03c;
	text-decoration: none;
}
.footer-menu a:hover{
color: #CC00FF;
}
.footer-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.footer-menu ul li {
    margin: 0 0 0 15px;
}

.footer-menu ul li a {
    text-decoration: none;
    color: #333;
    /*font-size: 16px;*/
}


.main-content ul {
	margin-left: 30px;
	margin-right: 20px;
	padding:5px 0 15px 0;
}
.main-content li {
	list-style-type: circle;
	margin-left: 10px;
	padding:10px 0 0 0;
}


h1 {
	font-size: 1.1em;
	border-left:solid 15px #9999CC;
	padding-left: 5px;
	border-bottom: 1px solid #9999CC;
	margin: 5px 10px 5px 5px;
	
}
h2 {
	font-size: 1em;
	border-left:solid 8px #9999CC;
	padding-left: 5px;
	border-bottom: 1px solid #9999CC;
	margin: 5px 20% 5px 12px;
	
}
h3 {
	font-size: 1em;
	border: 1px solid #9999CC;
	border-right: 5px solid #9999CC;
	border-left: 5px solid #9999CC;
	font-weight: normal;
	text-align: center;
}

p{
	margin-left:15px;
}
.imgbox_f {
	margin: 0px 1em 1em 1em;
}
.imgbox_f img{
	width: 550px;
	height: 154px;
}

/*配置を下に*/
.vbtm {
	padding:0 0 0 1em;
	vertical-align: bottom;
}

table.bn {
	font-size: 100%;
	margin: 0 auto;
	border-collapse: collapse;
	width: 90%;
	table-layout: fixed;
}
table.bn td{
vertical-align: top;
}
.imgbox_3 {
	line-height: 120%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* 中央揃え */
	margin: 0 auto; /* コンテナ自体を中央揃え */
	gap:10px;
}

.imgbox_3 img{
	max-width: 240px;
}

.imgbox_2 {
	line-height: 120%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center; /* 中央揃え */
	margin: 0 auto; /* コンテナ自体を中央揃え */
}

.imgbox_2 img{
	max-width: 95%;
}

.imgbox_3 figure {
	display: table;
	flex-direction: column; /* キャプションを下に配置 */
	margin: 0;
}
/*
.imgbox_3 figure img {
    display: block;          /* 余計な余白が出ないようにする */
/*    max-width: 100%;
  height: auto;
  margin: 0px 0px 3px 0px; /* 下側にだけ3pxの余白を追加 */
/*}
*/
.imgbox_3 figcaption {
    font-size: 0.9em;        /* 文字サイズを90%に */
	width:210px;
}
div.imgbox_3:after {
    content: "";      /* ※Clearfix */
    clear: both;
    display: block;
}
div.imgbox_2:after {
    content: "";      /* ※Clearfix */
    clear: both;
    display: block;
}

table.table_s td{
	padding: 10px;
}

span.cate {
	background-color:#99c;
	padding:2px;
	color:#fff;
	float:right;
	border-radius: 2px;
}


/*リストがアルファベット小文字*/
.al{
	list-style-type: lower-alpha;
	padding: 0 0 0 20px;
}
table.shuwasakuin {
	font-size: 80%;
	border: none;
	border-collapse: collapse;
	margin: 0 0 10px 30px;
	line-height: 120%;
}
table.shuwasakuin td.sakuin {
	width: 50px;
	padding: 5px 0px 0 0;
}
table.shuwasakuin td.shuwa {
	width: 150px;
	padding: 5px 10px 0 0;
	white-space:nowrap;
}

table.shuwa {
	font-size: 85%;
	border: none;
	border-collapse: collapse;
	margin: 0 0 10px 20px;
	line-height: 120%;
}
table.shuwa td {
	width: 150px;
	padding: 5px 5px 0 5px;
}
div#shuwamain {
	margin: 0px 0px 0 0px;
	padding-top: 15px;
	padding-right: 15px;
	background: #FFF;
	width: 750px;
}

table.shu {
	width:660px;
}

span.shuwa {
	width:230px;
	font-size: 90%;
	display:inline-block;
}

span.brock {
	display:inline-block;
}


.br-sp { display:none; }


/* レスポンシブ対応 */
@media (max-width: 1000px) {
    .container {
        flex-direction: column;
    }
    .sidebar {
        order: 2; /* メインコンテンツの下に配置 */
        width: 100%; /* 幅いっぱいに広げる */
    }

    .footer-menu ul {
        flex-direction: column;
    }

    .footer-menu ul li {
        margin: 5px 0;
    }
}
@media (max-width: 680px) {
	.header {
        flex-direction: column;
        align-items: start;
    }

    .search-container {
        margin-left: 0;
        margin-top: 10px;
        width: 100%;
    }
	
	.main-content ul {
		margin-left: 10px;
		margin-right: 0px;
	}
	.main-content li {
		list-style-type: circle;
		margin-left: 5px;
	}
	.imgbox_3  {
		width: 100%;
	}
/*
table.bn {
	width: 90%;
	table-layout: fixed;}
*/
.br-sp { display:inline; }

span.ind {
	display:none;
}

h1{
	margin-left:-10px;
}
h2{
	margin-left:0;
}
p{
	margin-left:0;
}
}