/* css03_jun30.css からモバイル画面のボタンクリックメニューの子メニューを表示する変更テスト用
  レスポンシブ対応 css サンプル　＞770px：水平プルダウン多階層メニュー
　　　　　　　　　　　　　　　　　＜770px： ボタンクリックのボックスメニュー   */

body{
  font: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Verdana,Arial,sans-serif;
  margin:0;
  background-color: #edf7e5;
}

img{
  outline:none;
  border-style:none;
}

h1{
  color: #139;
  font-size: 20px;
  margin:0;
  padding:0;
  behavior: url(PIE.htc);
}

h2 {
	font-size: 18px;
	font-weight: bold;
	color: #369;
	padding: 0px;
	margin-left: 5px;
	margin-top: 3px;
	margin-bottom: 3px;
	margin-right: 8px;
	background-position: left top;
	font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", 'HG創英角ｺﾞｼｯｸUB', 'sans-serif', 'verdana'
}

h3{
  margin:0;
  padding-top:10px;
  padding-left:30px;
  text-align:center;
  color:#555;
  font-size:14px;
  font-weight:bold;
}

h4 {  
  font-size: 9pt;  
  font-weight: bold;
}

a.blk {
  display:block;
  width:100%;
  height:100%;
  outline:none;
  border-style:none;
}

.link_anch {
  margin-top: -50px;
  padding-top: 50px;
}
/**************  2 column settings ********************/
#shell {
  overflow: hidden;
}

#outer {
  width: 1100px;
  margin: 0 auto;
}

.wrapper{
  position: relative;		/* フッター部の配置用に定義 */
  width: 100%;
  float: left;
  overflow-x: visible;
  margin-top: 45px;
  margin-bottom: 30px;
  margin-right: -260px;
  margin-left: auto;
  background-color: #edf7e5;
}
.wrapper > * {
  margin-right: 260px;
}
.content {
  float: left;
  width: 100%;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
		/*  margin-left: -120px;  */
  background-color: #edf7e5;
}

.content_main {
  position: relative;
  overflow-x: visible;
  width: 80%;
  max-width: 960px;
  min-width: 800px;
  background-color: #edf7e5;
  margin-top: 0px;
  margin-right: 260px;
  margin-left: auto;
  padding-top: 0px;
  z-index: 100;
}

.r_sidebar {
  width: 250px;
  float: left;
  position: relative;
  margin: 45px 0 0 40px;
  padding-bottom:10000px;
  margin-bottom:-10000px;
  box-shadow: 3px 0px 5px #473;
  border-right: solid 1px #fff;
	  min-height:100%;			/* 縦の表示領域を100% */
	  z-index: 2;
}

.footer {  
  height: 30px;
  position: fixed;			/* 絶対位置指定 */
  bottom: 0px;				/* 絶対位置指定(左0px,下0px) */
width: 100%;
  border-top: 1px solid #5f7f5f;
  background-color: rgba(200,255,220,0.5);
  -webkit-box-shadow: 0 1px 0 #a0ffd0;
  -moz-box-shadow: 0 1px 0 #a0ffd0;
  box-shadow: 0 1px 1px rgba(192,255,208,0.5) inset;
  clear: both;
  background-color: #efffbf;
  z-index: 100;
}

table.tfooter {
  margin-right: 300px;
  width: 800px;
}
.clearfix:after{
  content: "."; 
  display: block; 
  height: 0; 
  font-size:0;	
  clear: both; 
  visibility:hidden;
}

.l_sidebar {
  float: left;
  width: 10%;
  background-color: #e0efcf;
  z-index: 1;
}

.mwidth {
  margin-top: -25px;
  background-color: #dec;
}

p.imgw img {
  width: 100%;
  margin: -10px 5px;
}
ol {  
  margin-left: 2em;
}

ul {
  padding:0;
  margin-left: 0.5em;
}
ul li{
  list-style:none;
  padding:0;
  margin:0;
}

.ml10 {
  margin-left: 10px;
}
.ml20 {
  margin-left: 20px;
}
.ml50 {
  margin-left: 50px;
}
.ml100 {
  margin-left: 100px;
}
.ml200 {
  margin-left: 200px;
}
.mr10 {
  margin-right: 10px;
}
.mr20 {
  margin-right: 20px;
}
.mr50 {
  margin-right: 50px;
}
.mr100 {
  margin-right: 100px;
}
.mr200 {
  margin-right: 200px;
}
.pt10 {
  padding-top: 10px;
}
.pt20 {
  padding-top: 20px;
}
.pt35 {
	padding-top: 35px;
}
.pl10 {
	padding-left: 10px;
}
.pl20 {
	padding-left: 20px;
}
.pl35 {
	padding-left: 35px;
}
.lh150{
  line-height: 150%;
}
.font10 {
  font-size:10pt;
}
.font12 {
  font-size:12pt;
}
.font14 {
  font-size:14pt;
}
.font16 {
  font-size:16pt;
}
.font2 {
  font-size: 2.0em;
}
.fontc-b{
  color: black;
}
.fontc-bl{
  color: blue;
}
.fontc-n{
  color: navy;
}
.fontc-r{
  color: red;
}
.fontc-g{
  color: green;
}
.fontc-dg{
  color: darkgreen;
}
.txt-center {
  text-align: center;
}
.nouline {
  text-decoration: none;
}
.bld {
  font-weight: bold;
}
.s_tytletop {
	padding-bottom: 4px;
	padding-left: 2px;
	border-bottom-width: 2px;
	border-left-width: 8px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-bottom-color: #369;
	border-left-color: #369;
	margin-bottom: 5px;
	padding-top: 2px;
	margin-top: 0px;
}
.blur, .blur > img {					/*    画像周囲をボカす     */
    margin: 0; padding: 0;
    border: 0;
}
.blur {
    position: relative;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}
.blur:after {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    -moz-box-shadow: inset 0px 0px 15px 15px #dec;
    -webkit-box-shadow: inset 0px 0px 15px 15px #dec;
    box-shadow: inset 0px 0px 15px 15px #dec;
    content: " ";
}
/* リンク文字の前に ">" マークを表示 */
a.markb {
  display: block;
  position: relative;
  padding: 0 25px 2px 30px;
  color: #000;
  font-weight: bold;
  text-decoration: none;
}
a.markb:before {
  display: block;
  position: absolute;
  top: 30%;
  left: 0;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-top: solid 2px #7f7f7f;
  border-right: solid 2px #7f7f7f;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: "";
}

.pdng {  
  padding-top: 5px;  
  padding-right: 10px;  
  padding-bottom: 0px;  
  padding-left: 20px;
}
td.td01 {
  border:solid 1px #03d
}
td.td03 {
  color: limegreen;
  background-position: bottom;
  background-size: auto;
  background-repeat: no-repeat;
  padding-left: 10px;
  background: linear-gradient(to left, rgba(150,200,255,0.5), #009);
}

.flt-right {
  float: right;
}
.nobr {
  white-space: nowrap;
}
.clrb {
  clear: both;
}

.testlg { font-size: 0;}
.testmd { font-size: 0;}
.testsh { font-size: 0;}
.testlt { font-size: 0;}

/* 上部固定ナビゲーションバーのスタイル < all screen width */
#nav{
  position:fixed;
  top:0;
  z-index:100;
  height:45px;
  width:100%;
  color:#fff;
  text-align:center;
  border-top:1px solid #4c4c4c;
  background: #0e3eef;
  background: -webkit-gradient(linear, left top, left bottom, from(#0e3eef), to(#212121));
  background: -moz-linear-gradient(top, #0e3eef, #212121);
  background: -o-linear-gradient(top, #0e3eef, #212121);
  background: -ms-linear-gradient(top, #0e3eef, #212121);
  background: linear-gradient(top, #0e3eef, #212121);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0e3eef', endColorstr='#212121');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0e3eef', endColorstr='#212121)";
  -pie-background: linear-gradient(top, #0e3eef, #212121);
  behavior: url(PIE.htc);
}

#nav #logo{
  width: 15%;
  max-width: 120px;
  text-align:left;
  float:left;
  padding: 15px 10px;
  font-size:18px;
  color:#fff;
  z-index:1;
}

/*  メニューアイコンをクリックでプルダウンメニュー表示  */
#nav input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/********************* large screen for horizontal menu ***************************/
@media screen and (min-width: 768px) {
	#nav{
	  min-width:700px;
	  background:#0e3eef;                            /*  nav var bg-color */
	  background: -webkit-gradient(linear, left top, left bottom, from(#0e3eef), to(#212121));
	  background: -moz-linear-gradient(top, #0e3eef, #212121);
	  background: -o-linear-gradient(top, #0e3eef, #212121);
	  background: -ms-linear-gradient(top, #0e3eef, #212121);
	  background: linear-gradient(top, #0e3eef, #212121);
	  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0e3eef', endColorstr='#212121');
	  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#0e3eef', endColorstr='#212121)";
	  -pie-background: linear-gradient(top, #0e3eef, #212121);
	}
	#nav label{
	  display:none;
	}
	#nav-list {
	  list-style-type: none;
	  width:600px;
	  height: 35px;
	  margin: 0px auto 35px;
	  padding: 0;
	  float:right;
	}
	.navw {
	  width: 90%;
	  max-width: 1200px;
	}
	#nav-list li{
	  position: relative;
	  width:19%;
	  float:left;
	  margin: 0 5px 0 0;
	  padding: 0;
	  text-align: center;
	}

	#nav-list li a{
	  display: block;
	  height: 20px;
	  width: 100%;
	  padding:12px 0;
	  text-decoration: none;
	  line-height: 1.2;
	  font-size:14px;
	  text-align: center;
	  color:#fff;
	  text-shadow: 0px -1px 0px #000;
	  border-left:1px solid #666;
	  font-weight: bold;
	  box-shadow: 1px 1px 3px rgba(0,0,0,0.5), 1px 1px 3px rgba(255,255,255,0.5) inset;
	  border-radius: 5px;
	  z-index: 20;
	  behavior: url(PIE.htc);
	}
	/* ここまで 親メニューの指定 */

	#nav-list a:hover{			/* マウスオンした場合の親メニュー状態 */
	  color: #dfd;
	  background: #03e;
	  background: -webkit-gradient(linear, left top, left bottom, from(#03e), to(#121));
	  background: -moz-linear-gradient(top, #03e, #121);
	  background: -o-linear-gradient(top, #03e, #121);
	  background: -ms-linear-gradient(top, #03e, #121);
	  background: linear-gradient(top, #03e, #121);
	  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#03e', endColorstr='#121');
	  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#03e', endColorstr='#121)";
	  -pie-background: linear-gradient(top, #03e, #121); 
	  box-shadow: 1px 1px 3px rgba(255,255,255,0.5), 1px 1px 3px rgba(0,0,0,0.5) inset;
	  border-radius: 10px;
	  behavior: url(PIE.htc);
	}

	/* ここから子メニューの指定 */
	#nav-list li ul{
	  list-style: none;
	  position: absolute;
	  z-index: 100;
	  top: 100%;
	  left: 0;
	  width: 100%;
	  margin: 0;
	  padding: 0;
	}
	#nav-list li:last-child ul{
	  left: -100%;
	  width: 100%;
	}
	#nav-list li ul li{
	  overflow: hidden;			/* 通常(マウスオフなら)隠す height: 0 も必須 */
	  width: 100%;
	  height: 0;
	  color: #AFFFAF;
	  background: #141;
	  transition: .2s;
	}
	#nav-list li ul li ul {		/* 孫メニューの横展開ずらし割合 数値を100にするとマウスの軌跡が困難になる　*/
	  top: 80%;
	  left: 70%;
	}
	#nav-list li ul li a {
	  padding: 10px 5px 10px 15px;
	  background: #141;
	  text-align: left;
	}
	#nav-list li:hover > ul > li {
	  overflow: visible;
	  height: 35px;
	}
	#nav-list li ul li ul:before {
	  position: absolute;
	  content: "";
	  left: -20px;
	  width: 0;
	  height: 0;
	}
}

/************************************** ★ after right column down  **********************/
@media screen and (max-width: 1180px) {
	#outer {
	  width: 100%;
	  margin: 0 auto;
	}
	.wrapper{
	  margin-left: 0;
	}
	.content_main {
	  margin: 0px;
	  box-shadow: 3px 0px 5px #473;
	}
	.navw {
	  width:100%;
	}
}

/*********************************** ★ ここからモバイル表示  ***********************/
@media screen and (max-width: 767px) {
	.navw {
	  float: right;
	  width: 270px;
	}
	#nav label {
	  display: block;
	  position: relative;
	  height: 16px;
	  width: 50px;
	  float:right;
	  right: 20px;
	  color:#fff;
	  text-decoration:none;
	  padding:5px 0 20px;
	  font-size:20px;
	  cursor:pointer;
	}
	#nav-list {
	  display: none;
	  width; 250px
	  position:absolute;
	  z-index:100;
	  text-align:left;
	  right: 10px;
	  margin-top: 55px;
	  background-color: rgba( 255, 255, 255, 0.6 );
	  border: outset 2px #fff;
	  border-radius: 5px;
	}
	#nav-list:before{			/*  メニュー上部の▲アイコンフォント設定  */
	  content:"\25B2";
	  position:absolute;
	  color:#fff;
	  font-size:30px;
	  z-index:2;
	  right:30px;
	  margin-top: -31px;
	}
	#nav-list a{				/*   リンク文字設定値   */
	  display:block;
	  padding:2px 0px 2px 5px;
	  text-decoration:none;
	  color:#073;
	  font-weight:bold;
	  width: 160px;
	  border: solid 1px #171;
	  border-radius: 5px;
	  background-color: #fff;
	}

			/*  リンクにマウスオンした時の設定値  */
	#nav-list a:hover {
	  color: #fff;
	  margin-left: 2px;
	  background: #03d;
	  background: -webkit-gradient(linear, left top, left bottom, from(#03d), to(#222));
	  background: -moz-linear-gradient(top, #03d, #222);
	  background: -o-linear-gradient(top, #03d, #222);
	  background: -ms-linear-gradient(top, #03d, #222);
	  background: linear-gradient(top, #03d, #222);
	  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#03d', endColorstr='#222');
	  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#03d', endColorstr='#222)";
	  -pie-background: linear-gradient(top, #03d, #222); 
	  border-radius: 5px;
	  width: 160px;
	}

	/* ここから子メニュー　>> モバイルでは非表示 */
	#nav-list li ul{
/*	  display: none;*/
	  list-style: none;
	  position: relative;
	  z-index: 100;
	  top: 50%;
	  left: 40px;
	  width: 100%;
	  margin: 0;
	  padding: 0;
	}

	/* アイコンクリック時 */
	#nav input[type=checkbox]:checked ~ #nav-list {
	  display:block;
	}


}

/**************************************  for tablet & wide smartphone < stacked menu **********************/
@media screen and (min-width: 468px) and (max-width: 767px) {
  .wrapper, .content { float: none; margin: 0px; width: auto; }
  .r_sidebar, .l_sidebar { display: none; }

	.content_main {
	  position: relative;
	  float: none;
	  margin: 50px 0 0 0; 
	  width: 100%;
	  min-width: 766px;
	}

  /*  css03_0629.css から　削除 ＞ 上記メディアクエリ追加   */

}


/*   allスマホ    */
@media screen and (max-width: 467px){
  .wrapper, .content { float: none; margin: 0px; width: auto; }
  .r_sidebar, .l_sidebar { display: none; }
	.content_main {
	  position: relative;
	  float: none;
	  margin: 50px 0 0 0; 
	  width: 100%;
	  min-width: 466px;
	}

}


/*   Wideスマホ    */
@media screen and (min-width: 321px) and (max-width: 467px){
  .wrapper, .content { float: none; margin: 0px; width: auto; }
  .r_sidebar, .l_sidebar { display: none; }

	.content_main {
	  position: relative;
	  float: none;
	  margin: 50px 0 0 0; 
	  width: 100%;
	  min-width:320px;
	}

.testsh { font-size: 20px;}


}
/*   narrowスマホ    */
@media screen and (max-width: 320px){
  .wrapper, .content { float: none; margin: 0px; width: auto; }
  .r_sidebar, .l_sidebar { display: none; }

	.content_main {
	  float: none;
	  margin: 50px 0 0 0; 
	  width: 100%;
	  min-width:320px;
	}

.testlt { font-size: 24px;}

}