@charset "utf-8";
/**********************************************************/
/*3カラムで表示するスタイル・シート                       */
/*左：メニュー， 中央：コンテンツ， 右：広告欄            */
/*レスポンシブル・デザイン対応                            */
/* 2020/12/22 更新                                        */
/**********************************************************/



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

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

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

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

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

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

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

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

/*==============================================*/
/*右サイドの広告欄の表示設定*/
#right_ad
{
	/*右サイド広告の幅．固定値． （初期値:200px）*/
	width: 180px;
	/*右寄せ*/
	float: right;
	/*余白は0にする*/
	padding: 0;
	margin: 0;

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

/*==============================================*/
/*フッタの表示設定*/
#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%;
		/*min-width: 600;*/

		/*この指定によって，ヘッダ・メニューが勝手に縮小されなくなる*/
		/*（注）"main"でmin-widthを指定しなければheaderが縮小される問題は出ない*/
		/*overflow: hidden;*/
	}

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

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

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

	/*==============================================*/
	/*PC用の左サイド・メニューは表示しない*/
	#left_menu
	{
		display: none;
	}

	/*==============================================*/
	/*PC用の右サイド広告は表示しない*/
	#right_ad
	{
		display: none;
	}
}

/**********************************************************/
/*図・写真の表示設定*/
/**********************************************************/
#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;
}


/**********************************************************/
/*ZEPマガジン  cat_product/article/
/**********************************************************/

/* gradient-shadow */
.gradient-shadow {
    font-family: 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff; /* テキストカラーを白に設定 */
    text-align: center;
    margin: 1rem 0;
    padding: 0.5rem;
    background: linear-gradient(90deg, #003366, #336699); /* 紺色系のグラデーション */
    border-radius: 8px; /* 角を丸く */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* テキストの影を濃く */
}


/* Updated Date */
.updated-date {
    font-family: 'Arial', sans-serif; /* 読みやすいサンセリフ系フォントに変更 */
    font-size: 0.9em; /* 少し大きめに調整 */
    color: #cc0000; /* 明るめの赤に変更 */
    font-weight: normal; /* 普通の太さに変更 */
    margin-right: 10px; /* カテゴリとの間隔を追加 */
}

/* Article Category */
.article-category {
    font-family: 'Arial', sans-serif;
    font-size: 0.85em;
    color: #007bff; /* より鮮やかな青色に変更 */
    /* text-transform: uppercase; 削除して元の形式を維持 */
    letter-spacing: 0.05em;
}

/* Main Title */
.main-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    color: #222; /* 濃いめの黒に近いグレー */
    line-height: 1.2;
}

/* Subtitle */
.subtitle {
    font-family: 'Verdana', sans-serif;
    font-size: 1.1em;
    color: #555; /* サブタイトルも少し濃いめのグレーに変更 */
    margin-top: 0.3em;
    margin-bottom: 0.8em;
}

/* Lead Text */
.lead-text {
    font-family: 'Arial', sans-serif; /* 読みやすいサンセリフフォントに変更 */
    font-size: 1.05em; /* 少し大きめに調整 */
    font-weight: bold; /* 太字で読みやすく */
    color: #222; /* 濃いめの黒に近いグレーで視認性を向上 */
    line-height: 1.6; /* 行間を広げて読みやすく */}

/* Pagenation */
<style>
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
    width: 40px;
    height: 40px;
    text-decoration: none;
    background-color: transparent; /* 背景色なし */
    color: #333333; /* 濃い文字色 */
    border-radius: 50%;
    border: 2px solid #333333; /* 濃いボーダー色 */
    font-family: Arial, sans-serif;
    font-size: 20px; /* 大きめのフォントサイズ */
    font-weight: bold; /* 太字 */
    line-height: 40px; /* 縦に中央揃え */
    transition: color 0.3s, border-color 0.3s;
}

.pagination a:hover {
    color: #000000; /* ホバー時の文字色 */
    border-color: #000000; /* ホバー時のボーダー色 */
}

.pagination a.active {
    color: #ffffff; /* アクティブなページの文字色 */
    border-color: #000000; /* アクティブなページのボーダー色 */
}
</style>