@charset "Shift-JIS";
/* CSS Document */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}
body {
	color:#333;
	font-family:Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
	font-size:16px;
	background:#ddd;
}

body.white{
	color:#000;
	font-family:Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
	font-size:16px;
	background:#FFF;
}

body.gray{
	color:#333;
	font-family:Helvetica, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif;
	font-size:16px;
	background:#ddd;
}

a{
	color:#333;
 text-decoration:none;
}

a.red{
	color:#FF0000;
	text-decoration:underline;
}

/* ============== ヘッダー ============== */
header{
	width:100%;
}
.toolBox{
	padding:6px 0;
	border-top: solid 1px #535353;
	border-bottom: solid 1px #333;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#2d2d2d));	
}

.toolBox2{
	padding:1px 0;
	border-top: solid 1px #aaa;
	border-bottom: solid 1px #888;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));	
}

h1.toolbar{
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: -1px -1px 0 #000;
  text-align: center;
		word-break: break-all; /* 長い英字を折り返すための指定 */
}
nav{
	margin:3px auto;
	}
nav ul{
 display:table;
	width:100%;
}
nav ul li{
	display:table-cell;
	vertical-align:middle;
}
nav ul li.toolBtnB{
	width:65px;
}
nav ul li.toolBtnA{
	width:65px;
}
nav ul li a.btnHidden{
	display:none;
}

/* ナビの左ボタンの装飾= */
nav a.toolBtnLeft{
	 margin-left:8px;
  padding:4px 9px;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#aaa), to(#666));
  border-top-color:#000;
  border-left-color:#555;
  border-right-color:#555;
  border-bottom-color:#444;
  border-width:1px;
  border-style:solid;
  border-radius:5px;
  color:#fff;
  font-size:14px;
  text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
		}

nav a.toolBtnLeft2{
	 margin-left:8px;
  padding:4px 9px;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#F00), to(#800));
  border-top-color:#000;
  border-left-color:#555;
  border-right-color:#555;
  border-bottom-color:#444;
  border-width:1px;
  border-style:solid;
  border-radius:5px;
  color:#FFF;
  font-size:14px;
  text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
		}
		
/* ナビの右ボタンの装飾 */
nav a.toolBtnRight{
	 float:right;
	 margin-right:8px;
  padding: 4px 9px;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#aaa), to(#666));
  border-top-color:#000;
  border-left-color:#555;
  border-right-color:#555;
  border-bottom-color:#444;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  color: #fff;
  font-size:14px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
		}		
		
/* ナビの右ボタンの装飾 */
nav a.toolBtnRight2{
	 float:right;
	 margin-right:8px;
  padding: 4px 9px;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#F00), to(#800));
  border-top-color:#000;
  border-left-color:#555;
  border-right-color:#555;
  border-bottom-color:#444;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  color: #FFF;
  font-size:14px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
		}

h2.toolbarB{
  padding:4px 0;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: -1px -1px 0 #555;
  text-align: center;
		border-top: 1px solid #bbb;
  border-bottom: 1px solid #777;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#bcbcbc), to(#888));	
}

h2.toolbarR{
  padding:4px 0;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: -1px -1px 0 #555;
  text-align: center;
		border-top: 1px solid #b00;
  border-bottom: 1px solid #700;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#F00), to(#800));	
}

h2.toolbarA{
  padding:4px 0;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: -1px -1px 0 #555;
  text-align: center;
		border-top: 1px solid #00b;
  border-bottom: 1px solid #007;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#00F), to(#008));	
}

/* ============== セクション ============== */
.section{
 padding:15px;
	}

/* ============== 横長ボタン ============== */
p a.btn{
	display:block;
	padding:12px;
	margin:5px auto;
	border:1px solid #999;
	border-radius:8px;
	text-align:center;
	font-size:17px;
	font-weight:bold;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7);
 background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ededed)); /*Safari・Google用*/
	box-shadow: 0 1px 2px #bbb;
}
/* ボタン(色付け：Blue) */
p a.btnBlue{
	border-color:#0066ff;
	background: -webkit-gradient(linear, center top, center bottom, from(#c6dcff), to(#2e7ffa)); /*Safari・Google用*/
}
/* ボタン(色付け：Red) */
p a.btnRed{
	border-color:#fa4b4b;
	background: -webkit-gradient(linear, center top, center bottom, from(#ffd5d5), to(#ff6e6e)); /*Safari・Google用*/
}
/* ボタン(色付け：Green) */
p a.btnGreen{
	border-color:#1d9a47;
	background: -webkit-gradient(linear, center top, center bottom, from(#b7eac8), to(#22b352)); /*Safari・Google用*/
}
/* ボタン(色付け：Black 文字：White) */
p a.btnBlack{
	color:#fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
	border-color:#444;
	background: -webkit-gradient(linear, center top, center bottom, from(#888), to(#1b1b1b)); /*Safari・Google用*/
}

/* ============== 小さいボタン ============== */
p a.btnSmall{
	display:inline-block;
	margin:2px 0;
 padding:4px 8px;
	border:1px solid #999;
	border-radius:5px;
	font-size:13px;
	text-align:center;
	box-shadow: 0 1px 2px #bfbfbf;
	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#eee)); /*Safari・Google用*/
}
/* 小さいボタン(色付け：Red 文字：White) */
p a.btnSmallRed{
	border-color:#fa4b4b;
	background: -webkit-gradient(linear, center top, center bottom, from(#ffd5d5), to(#ff6e6e)); /*Safari・Google用*/
}
/* 小さいボタン(色付け：Blue 文字：White) */
p a.btnSmallBlue{
	border-color:#0066ff;
	background: -webkit-gradient(linear, center top, center bottom, from(#c6dcff), to(#2e7ffa)); /*Safari・Google用*/
}

/* ============== リストタイプＡ ============== */
.list-patternA ul{
	box-shadow: 0 1px 2px #bfbfbf;
}
.list-patternA ul li{
	position:relative;
	list-style-type:none;
}
.list-patternA ul li a{
	display:block;
	padding:13px;
	border:1px solid #b4b4b4;
	margin-bottom:-1px;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#efefef)); /*Safari・Google用*/
}
.list-patternA ul li a:after{
	display:block;
	position:absolute; /*liにつけた「position:relative;」を元に、絶対位置指定にする*/
	content:"";
	width:6px;
	height:6px;
	border-top:2px solid #afafaf;
	border-right:2px solid #afafaf;
	right:10px;
	top:50%; /*中央揃えにする*/
	margin-top:-3px; /*中央揃えだけだと綺麗に中央に揃わないので、約半分上にずらす*/
	-webkit-transform: rotate(45deg); /*上と右だけ線のある□を45度回転させて矢印風に見せる*/
}
/* 前から数えて1番目のliの中にあるaタグの上左&上右だけ角丸に */
.list-patternA ul li:nth-child(1) a{
	border-top-left-radius:5px;
	border-top-right-radius:5px;
}
/* 後ろから数えて1番目のliの中にあるaタグの下左&下右だけ角丸に */
.list-patternA ul li:nth-last-child(1) a{
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
}


/* ============== リストタイプＢ ============== */
.list-patternB ul li{
	position:relative;
	list-style-type:none;
}
.list-patternB ul li a{
	display:block;
	padding:13px;
	border-top:1px solid #b4b4b4;
	border-bottom:1px solid #b4b4b4;
	margin-bottom:-1px;
	background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#efefef)); /*Safari・Google用*/
}
.list-patternB ul li a:after{
	display:block;
	position:absolute; /*liにつけた「position:relative;」を元に、絶対位置指定にする*/
	content:"";
	width:6px;
	height:6px;
	border-top:2px solid #afafaf;
	border-right:2px solid #afafaf;
	right:10px;
	top:50%; /*中央揃えにする*/
	margin-top:-3px; /*中央揃えだけだと綺麗に中央に揃わないので、約半分上にずらす*/
	-webkit-transform: rotate(45deg); /*上と右だけ線のある□を45度回転させて矢印風に見せる*/
}

.list-patternB ul li a2{
	display:block;
	padding:13px;
	border-top:1px solid #b4b4b4;
	border-bottom:1px solid #b4b4b4;
	margin-bottom:-1px;
	background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#bcbcbc)); /*Safari・Google用*/
	color: #9F9F9F;
}
.list-patternB ul li a2:after{
	display:block;
	position:absolute; /*liにつけた「position:relative;」を元に、絶対位置指定にする*/
	content:"";
	width:6px;
	height:6px;
	border-top:2px solid #afafaf;
	border-right:2px solid #afafaf;
	right:10px;
	top:50%; /*中央揃えにする*/
	margin-top:-3px; /*中央揃えだけだと綺麗に中央に揃わないので、約半分上にずらす*/
	-webkit-transform: rotate(45deg); /*上と右だけ線のある□を45度回転させて矢印風に見せる*/
}

/* ============== フッター ============== */
.footerToolbar{
	padding: 12px 0;
	border-top: solid 1px #535353;
	border-bottom: solid 1px #333;
		text-align:center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: -1px -1px 0 #555;
 background-image: -webkit-gradient(linear, left top, left bottom, from(#585858), to(#2d2d2d));	
}


/*============モーダル==================*/
div#simpleModal {
width: 240px;
position: absolute; top: 40px; left: 20px;
padding: 20px;
border: solid 1px #bbb;
background: #fff;
-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,0.25);
-webkit-transition: -opacity 0.0s ease-out;
}
div#simpleModal.shown {
opacity: 1.0;
z-index: 100;
-webkit-transition-duration: 0.25s;
}