@charset 'UTS-8';


/* ---------------------------------------------- */
/*   NaviArea　　                                 */
/*   プルダウンメニューの表示領域                 */
/*------------------------------------------------*/
.NaviArea    {
position: relative;
text-align: left;
top: 0 ;
margin: 0px ; 
/* padding: 0px; */
width: 100vw;
max-height: 50px;
background-color:   /* #B3424A; */ blue ;
/* border: solid 2px #7FFFD4 ;  yellow; */
z-index: 10;
}

/*----------------------------*/
/* Visitor Counter Area       */
/******************************/

.VisitorCounter {
width:100vw;
min-height: 14px;
text-align: right;
vertical-align: top;
background-color:   #B3424A;  
margin: 0 20 0 10 ;
padding-left: calc( 100%- 300px) ;
padding-right: 10px ;
font-size: 12px;
font-weight: bold;
color:#FFFFFF;
border-bottom: 3px solid #B3424A; 
}

.VisitorCounter  img {
background-color: white ;
vertical-align: middle;
}



/*----------------------------*/
/* PullDown menu              */
/* float left                 */
/*----------------------------*/
/* Level 1 MENU decoration    */
/******************************/

.menuArea {
width: 100vw;
min-height:20px;
margin: 0px;
padding: 0px 0px 0px 0px ;
background-color:  #336666 ;
float: left;
}

ul.ddmenu {
margin: 0px;
padding: 0px 0px 0px 15px ;
background-color: /* #B3424A; */ transparent;
}

ul.ddmenu li { 
 width: 100px;           /* メニュー項目の横幅(100px) */
 font-size: 11px;
 display: inline-block ; /* 横並びに配置する */
 list-style: none ;      /* リストの先頭記号を消す */
 position: relative;     /* サブメニュー表示の基準位置にする */
 z-index: 10;
}

ul.ddmenu a {
 background-color: #cc0000 ; /* メニュー項目の背景色(濃い赤色) */
 border:  1px solid white;  
 color: white;               /* メニュー項目の文字色(白色) */
 text-align: center;         /* メインメニューの文字列の配置(中央寄せ) */
 text-decoration: none;      /* メニュー項目の装飾(下線を消す) */
 font-weight: bold ;
 display: block ;            /* 項目内全域をリンク可能にする */
  z-index: 5;
}

ul.ddmenu a:hover {
 background-color: #ffdddd; /* メニュー項目にマウスが載ったときの背景色(淡いピンク) */
 color:            #dd0000; /* メニュー項目にマウスが載ったときの文字色(濃い赤色) */
}


/*---------------------------------*/
/* Open process of Level 2 submenu */
/*---------------------------------*/

ul.ddmenu li:hover ul {
  display: block;   
}

/*----------------------------*/
/* Level 2 MENU decoration    */
/******************************/


ul.ddmenu ul {

 margin:  0px;             /* 2:サブメニュー外側の余白(ゼロ) */
 padding: 0px;             /* サブメニュー内側の余白(ゼロ) */
 display: none ;           /* 標準では非表示にする */
 position: absolute ;      /* 絶対配置にする */
 background-color: orange; ;
 z-index: 20;
}

ul.ddmenu ul li {              /* サブメニュー項目の横幅、上部に区切り線の指定 */
 width: 150px;                 /* サブメニュー1項目の横幅(120px) */
 border-top: 1px solid pink ;  /* 項目上側の枠線(ピンク色で1pxの実線) */
 z-index: 25;
}

ul.ddmenu ul li a {   /* 項目の高さ指定、文字列配置調整 */
   line-height: 20px;   /* サブメニュー1項目の高さ(35px) */
   text-align: left;    /* 文字列の配置(左寄せ) */
   padding-left: 5px;   /* 文字列前方の余白(5px) */
   font-weight: normal; /* 太字にはしない */
   z-index: 30;

}
ul.ddmenu ul li a:hover { /* サブメニューにマウスポインタが載った際の配色 */
   background-color: #ffff80; /* 背景色(淡い黄色) */
   color: #005500;    /* サブメニュー項目にマウスが載ったときの文字色(濃い緑色) */
   z-index: 30; 
}


/* ---------------------------------------------- */
/*   NaviHeader                                   */
/*   最終更新日とパンくずナビの表示領域           */
/*   float right                                  */ 
/*------------------------------------------------*/

/*--------------------------------- Header*/
.NaviHeader {
position: relative;
margin: 0px auto;
padding: 10px;
min-height: 20px;
width: 100vw;
background-color:  #336666 ;
background-position: center top;
/* background: transparent; */
/* border: 2px solid red; */
float: right;
z-index: 1; 

}

/*--------------------------------- Navi Left side */
.Navi-Lbox{
position: relative;
text-align: center;
vertical-align: middle ;
margin: 0px;
padding:0px 0px 0px 20px;
width: 150px;
height:20px;
/* border: 2px solid blue; */
/* background: #8B008B ; */
background:transparent; 
float: left;
z-index: 1;
}
.Navi-Rbox {
position:       relative;
text-align:     left;
vertical-align: middle ;
margin: 0px;
padding:0px 0px 0px 10px;
min-width: calc(100vw - 190px );
height: 20px;
/* border: 2px solid white ; */
float: left;
background: transparent ;   /* #DEB887 ; */
z-index: 1;
}

/* 更新日情報エリア */
.VerHeader {
text-align: center;
vertical-align: middle ;
font-size: 11px;
color: white ;
font-weight: bold;


}

/* ---------------------------------------------- */
/*   Current Posision                             */
/*------------------------------------------------*/
.currentpos {
position: relative;
vertical-align: middle;
text-align: left;
font-size: 12px;
font-weight: bold;
color: white ;
background: transparent ; /* blue ; */

}

.currentpos a {
font-size: 12px;
font-weight: bold;
color:  yellow;;
text-decoration : none;

 }

.currentpos a:VISITED{
color :           yellow;
text-decoration : none;
}

.currentpos a:HOVER{
color :         #FFA500   ;
text-decoration : none;

}



/*----------------------------*/
/* Accordion　menu            */
/*----------------------------*/
/* Level 1 MENU decoration    */
/******************************/

.cp_actab {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	color: #ffffff;
}

.cp_actab input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.cp_actab label {
	font-weight: bold;
	line-height: 2; 
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	cursor: pointer;
	margin: 0 0 1px 0;
	background: #B3424A;
}



.cp_actab .cp_actab-content {
	overflow: hidden;
	max-height: 0;
	-webkit-transition: max-height 0.35s;
	transition: max-height 0.35s;
	color: #333333;
	background: #f1c6c6;
}
.cp_actab .cp_actab-content p {
	margin: 1em;
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
	max-height: 22em;
}
/* Icon */
.cp_actab label::after {
	line-height: 3;
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 3em;
	height: 3em;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	text-align:  center; 
}

.cp_actab input[type=checkbox] + label::after {
	content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
	transform: rotate(315deg);
}