﻿/*========================================================*/
/*タイトル用"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: 42em;
	/*枠からあふれている文字は隠す*/
	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;
}

/**********************************************************/
/*「アコーディオン」部分の表示設定*/
/**********************************************************/

