@charset "utf-8";
body {
	margin: 0px;
	padding: 0px;
	background-color: #fff;
}

#wrapper {
    width: 1280px;         /* 画面幅に合わせて伸縮 */
    margin: 0 auto;
    overflow: hidden;	
}
#header{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	height: 100px;
	}
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/*　　グローバルメニュー　　*/
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
#global_menu {
    height: 30px;
    width: 100%;
    margin: 0 auto;
	background-color: #000;
}

#global_menu ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 25px;  /* li間の均等間隔 */
    list-style: none;
}

#global_menu ul li {
    float: none !important;  /* floatを完全に無効化 */
    margin: 0;                /* 個別余白を削除 */
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    font-size: 14px;
    color: #FFF;
}

#global_menu ul li a {
    display: block;
    padding: 0 10px;
    color: #FFF;
    text-decoration: none;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/*　　パンくずリスト（黒背景・白文字版）　　*/
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
#pan {
    font-size: 12px;
    line-height: 26px;
    height: 26px;
    background-color: #000; /* 背景を黒に設定 */
    color: #fff;            /* 全体の文字色を白に設定 */
    padding: 0 20px;        /* 両端に少し余白を入れると綺麗です */
}

.breadcrumb ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.breadcrumb li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
}

/* 2個目以降の項目の前に矢印記号を入れる */
.breadcrumb li + li {
    margin-left: 0.8em;
    padding-left: 1.2em;
}

.breadcrumb li + li::before {
    content: ">";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    background: none;
    color: #fff;            /* 矢印の色も白に */
    font-family: sans-serif;
}

/* リンクの設定 */
#pan ul li a {
    color: #fff;            /* リンクの色を白に */
    text-decoration: none;  /* 下線を消す */
}

/* マウスホバー時も下線を表示させない設定 */
#pan ul li a:hover {
    text-decoration: none;
    opacity: 0.7;           /* 重なった時に少し透明にすると「押せる感」が出ます */
}

#contents {
    display: flex;   /* 本文とサイドバーを横並びに */
    gap: 20px;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/*　本文　*/
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
#body {
	background-color: #FFFFFF;
	padding: 45px;
	width: 640px;
}
#body p{
font-size:18px;
line-height:36px;
padding-bottom:30px;
}

h1{
font-size:26px;
line-height:30px;
padding:20px;
margin:0px;
border: 1px solid #ccc;
  border-top: none;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/*　日付　*/
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
.entry_date {
  display: flex; /* 横並びにする */
  width: 100%;   /* 全体の幅を100%に */
  border: 1px solid #ccc; /* 枠線 */
  border-radius: 5px;    /* 角丸（お好みで数値調整） */
  overflow: hidden;      /* 角丸からはみ出す背景色をカット */
  background-color: #eee; /* 背景色 */
  margin: 10px 0px 10px 0px ;
}

.entry_date span {
  width: 50%;           /* 50%ずつに分割 */
  display: flex;
  justify-content: center; /* 文字を中央寄せ（横） */
  align-items: center;     /* 文字を中央寄せ（縦） */
  padding: 10px;           /* 指定の余白10px */
  font-size: 12px;         /* 指定のフォントサイズ14px */
  box-sizing: border-box;  /* paddingを含めて50%にする */
}

/* 左側の「公開日」だけに右側の境界線を入れる */
.published_date {
  border-right: 1px solid #ccc;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/*　関連記事リスト　*/
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
#kanren {
    display: flex;
    flex-wrap: wrap;       /* 横並びで折り返し可能 */
    gap: 10px;             /* アイテム間の余白 */
    list-style: none;      /* リストマーク非表示 */
    padding: 0;
    margin: 10px 0;
    max-width: 640px;     /* 表示領域の横幅 */
	font-size: 12px;
	line-height: 20px;
}

.kanren-item {
    flex: 0 0 calc((640px - 20px) / 3); /* 固定幅に変更 */
    box-sizing: border-box;
    text-align: center;
}

.kanren-item img {
    width: 100%;           /* LIの幅にフィットさせる */
    height: auto;          /* 縦横比維持 */
    display: block;
}



/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/*　サイドメニュー　*/
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
#aside {
	width: 210px;        /* サイドバーは固定幅 */
	background-color: #eee;
	padding: 5px;
}
#count{
padding-bottom: 60px;
}
#count p{
	padding: 0px;
margin:0px;
	font-size: 16px;
	line-height: 20px;
}
#count_number{
	font-size: 100px !important;
	line-height: 100px !important;
}
#bside {
	width: 300px;        /* サイドバーは固定幅 */
	background-color: #eee;
	padding: 5px;
}
#cat_list{

}
#cat_list ul{
	padding: 5px;
    margin:0px;
}
#cat_list li{
	padding: 5px;
    margin:0px 0px 0px 0px;
    list-style:none;
}
.hr-inset {
box-shadow: 
    0 1px 0 #cccccc, /* すぐ下の暗い線 */
    0 2px 0 #ffffff; /* そのさら下の白い線 */
    margin:0px 0px 30px 0px;
padding-left: 20px !important;
}

/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/*　　テーブル　　*/
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
.responsive-table {
	width: 100%;
	border-collapse: collapse;
	font-family: "Helvetica Neue", Arial, sans-serif;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* 軽い影で浮き感 */
	font-size: 16px;
	line-height: 32px;
}

.responsive-table th {
	background-color: #111111; /* 深めのグレー */
	color: #f9fafb;
	font-weight: 600;
	padding: 10px;
	text-align: left;
	border-right: 1px solid #374151;
}

.responsive-table th:last-child {
  border-right: none;
}

.responsive-table td {
	padding: 10px;
	background-color: #ffffff;
	border-right: 1px solid #e5e7eb;
	border-bottom: 1px solid #e5e7eb;
}

.responsive-table td:last-child {
  border-right: none;
}

.responsive-table tr:nth-child(even) td {
  background-color: #f9fafb; /* 交互背景 */
}

.responsive-table tr:hover td {
  background-color: #f3f4f6; /* ホバー */
}

.responsive-table th, .responsive-table td {
  word-wrap: break-word;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/*　　一覧ページ　　*/
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
.review-list {
  display: flex !important;
  flex-wrap: wrap !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.review-list li {
  width: 50% !important; /* 強制的に半分にする */
  box-sizing: border-box !important;
  display: block !important; /* liが変な挙動をしないように */
}

/* リンク内の要素を整える */
.review-list li a {
  text-decoration: none;
  color: #333;
  display: block;
}

/* 画像を枠内に収める */
.review-list li img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 8px;
}


/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
/*　　基本情報DTDL　　*/
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
.product_summary dl {
  display: block; /* 親はフレックスにせず、改行を許容する */
  margin: 5px 0;
  padding: 0;
  line-height: 1; /* 行間の微調整 */
}

/* dtとddをひとまとめにして横に並べる設定 */
.product_summary dt,
.product_summary dd {
  display: inline-flex; /* ここがポイント：横に並びつつ中身を整列 */
  vertical-align: middle;
  font-size: 14px;
  padding: 5px 8px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin-bottom: 5px; /* 下の行との隙間 */
}

/* 左側の項目名 (DT) */
.product_summary dt {
  background-color: #eee;
  border-left: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
  margin-right: 0; /* ddとの隙間を消す */
  font-weight: bold;
}

/* 右側の内容 (DD) */
.product_summary dd {
  background-color: #fff;
  border-right: 1px solid #ccc;
  border-radius: 0 5px 5px 0;
  margin-left: -1px; /* dtとの境界線を重ねて隙間を消す */
  margin-right: 5px; /* 次のセットとの隙間 */
}