﻿/*========================================================*/
/*タイトル用"h2"タグの表示設定*/
#main h2
{
	/*z-index: 2;*/
	/*position: static;*/
	padding: 0.25em 0.5em;
	color: black;

	/*background: aliceblue;*/
	/*background: whitesmoke;*/
	/*background: lightyellow;*/
	/*background: cornsilk;*/
	background: ivory;

	border-left: solid 5px navy;
	/*border-left: solid 5px dodgerblue;*/
	/*border-left: solid 5px mediumblue;*/

	/*border-bottom: solid 1px black;*/
	border-bottom: solid 1px navy;

	margin: 10px 20px 10px 20px;
}


/*========================================================*/
/*赤色の太字*/
#main .red_bold
{
	font-weight: bold;
	color: red;
}


/*========================================================*/
/*「新製品&インフォメーション」 向けの<h2>タグ*/
#main .info
{
	background: white;
	border: 0px;
}

/*========================================================*/
/*表組み全体の表示設定*/
#main table
{
	/*枠線は個別に設定する*/
	border-collapse: collapse;
	/*内側方向の余白*/
	padding: 0;
	/*左寄せ*/
	margin-left: 0;
	margin-right: auto;

	/*background: cyan;*/
	width: 100%;
}

/*========================================================*/
/*表組みの<tr>の表示設定*/
#main table tr
{
	/*枠線*/
	border-bottom: 2px solid navy;
	/*内側方向の余白*/
	padding: 0;
	/*外側方向の余白*/
	margin: 0;

	/*デバッグ用*/
	/*background: lightblue;*/
}

/*========================================================*/
/*Google検索の部分のスタイル*/
#main #access_counter table tr
{
	/*検索ウィンドウの下にはラインを表示しない*/
	border-bottom: none;
}

/*========================================================*/
/*表組みの<td>の表示設定*/
#main td
{
	/*内側方向の余白*/
	padding: 0;
	/*外側方向の余白*/
	margin: 0;

	/*デバッグ用*/
	/*border: solid black 1px;*/
	/*background: lightyellow;*/
}

/*========================================================*/
/*画像部分の表示設定*/
#main .picture
{
	/*横幅は150pxで固定*/
	width: 150px;
	/*中央寄せ*/
	text-align: center;
	/*内側方向の余白*/
	padding: 0;
	/*外側方向の余白*/
	margin: 0;
}

/*========================================================*/
/*<a>タグの表示設定*/
#main a
{
	/*文字色*/
	color: blue;
	/*アンダーラインは表示しない*/
	text-decoration: none;
	/*カーソルは"pinter"（人差し指）を使う*/
	cursor: pointer;

	/*デバッグ用*/
	/*background: lightyellow;*/
}

/*========================================================*/
/*一度接続したリンクでも，文字色は変えない．*/
#main a:visited
{
	/*文字色*/
	color: blue;
}

/*========================================================*/
/*<p>タグの表示設定*/
#main p
{
	/*フォント・サイズ*/
	font-size: 15px;
	/*文頭のインデントの設定*/
	/*text-indent: 1em;*/
	/*内側方向の余白*/
	padding: 5px 0px 5px 10px;
	/*外側方向の余白*/
	margin: 0;
}

#main img
{
	width: 100px;
}

/**********************************************************/
/*「アコーディオン」部分の表示設定*/
/**********************************************************/

/*アコーディオン部分を囲う外枠*/
.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: "もっと見る";
	/*文字を中央寄せする*/
	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: "閉じる";
}

/*展開したときのコンテンツ部分の表示設定*/
.accordion_box input:checked ~ .accordion_contents
{
	/*全ての文章が表示されるように，高さを"auto"に設定する*/
	height: auto;
	/*展開したときの下側の余白（「閉じる」ボタンの分だけ開けておく）*/
	padding-bottom: 60px;
	/*transition効果（時間的な変化）を設定する*/
	transition: all 0.5;
}

/**********************************************************/
/*「アコーディオン」部分の表示設定*/
/**********************************************************/


/**********************************************************/
/*図・写真の表示設定*/
/**********************************************************/
#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 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 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 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 img
{
	/*行中の縦方向合わせ*/
	vertical-align: middle;
}

/**********************************************************/
/*太字，イタリックの表示設定*/
/**********************************************************/
/*太字用のクラス*/
#main .bold
{
	font-weight: bold;
}

/*イタリック用のクラス（日本語はイタリックにならない）*/
#main .italic
{
	/*font-style: italic;*/
	font-style: oblique;
}


/**********************************************************/
/*中央寄せのクラス*/
/**********************************************************/
#main .center
{
	text-align: center;
	margin: 0 auto;
}


/**********************************************************/
/*バナー広告*/
/**********************************************************/
#main .ad img
{
	width: 88%;
	max-width: 950px;
	/*text-align: center;*/
}

#main .ad
{
	text-align: center;
	margin: 30px 0px 30px 0px;
}


/**********************************************************/
/*モバイル広告*/
/**********************************************************/

#mobile_ad img
{
	width: 100%;
}

#mobile_ad .ad
{
	text-align: center;
	margin: 50px 0px 20px 0px;
	padding: 50px 0px 20px 0px;
}