/*******基本スタイル*******/
.nav {
  width: 750px;
  height: 40px;
  margin: 0 auto;
  padding: 0;
  display: flex;
}
.nav li {
  position: relative;
  list-style: none;
}
.nav li a {
  display: block;
  width: 150px;
  height: 40px;
  text-align: center;
  color: #fffcbc;/*マウス置かない時のテキストの色*/
  font-size: 14px;
  line-height: 2.8;
  background: #0b2250;/*マウス置かない時の釦の色*/
  text-decoration: none;
  border-right: 1px solid #eee;/*釦の仕切の色*/
  box-sizing: border-box;
}
.nav > li:hover > a {/*layer-1*/
  color: #fc1500;/*マウス置いた時のテキストの色*/
  background: #afc6e2;/*マウス置いた時の釦の色*/
}
.nav > li li:hover > a {/*layer-2*/
  color: olive;/*２層目釦マウス置いた時のテキストの色*/
  background: #afc6e2;/*マウス置いた時の２層目釦の色*/
}
.nav li ul {
  top: 40px;
  left: -40px;
  position: absolute;
}
.nav li ul li {
  overflow: hidden;
  height: 0;
}
.nav li ul li a {
  border-top: 1px solid #eee;
}
.nav li:hover > ul > li {
  overflow: visible;
  height: 40px;
}
  .nav li ul li ul {
    top: 0;
    left: 110px;
  }
  .nav li ul li ul:before {/*layer-2▷*/
    position: absolute;
    content: "";
    top: 15px;
    left: 30px;
    border: 5px solid transparent;
    border-left: 5px solid #fff;/*▷の色指定*/
  }
  .nav li ul li ul li:hover > a {/*layer-3*/
    color: pink;
    background: #afc6e2;/*３層目にマウス置いたときの色指定*/
  }
  .nav li ul li ul.left {
    top: 0;
    left: -190px;
  }
  .nav li ul li ul.left:before,/*layer-2-left▷*/
  .nav li ul li ul li ul.left:before {/*layer-3-left▷*/
    position: absolute;
    content: "";
    top: 15px;
    left: 190px;
    border: 5px solid transparent;
    border-right: 5px solid #fff;
  }
  .nav li ul li ul.left li:hover > a {/*layer-2-left*/
    color: pink;
    background: #afc6e2;
  }
  .nav li ul li ul li ul.left li:hover > a {/*layer-3-left*/
    color: purple;
    background: #afc6e2;
  }
.content {
  width: 800px;
  height: 200px;
  background: #0b2260;/*コンテンツの背景*/
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  box-sizing: border-box;
}


/*******基本スタイル02*******/
/*----------------------------------------------------
  メニュー背景#shadow
----------------------------------------------------*/
.shadow1 {text-shadow:3px 3px 2px #ff6347;}	/* メニュー背景（赤色） */



/*----------------------------------------------------
  二重下線#under
----------------------------------------------------*/
.under1 {border-bottom: double 4px #fffcbc;}	/* 二重下線（金色） */
.under2 {border-bottom: double 4px #aa0000;}
.under9 {border-bottom: double 6px #87cefa;}


/*----------------------------------------------------
  下半分線#under
----------------------------------------------------*/
.under_line01 {background: linear-gradient(transparent 50%, #a8eaff 50%);}
.under_line02 {background: linear-gradient(transparent 70%, #ff99ab 70%);}


/*----------------------------------------------------
  螢光ペン#under
----------------------------------------------------*/
.under_pen01 {background: linear-gradient(transparent 0, #aa0000 0);}
.under_pen02 {background: linear-gradient(transparent 0, #ff0000 0);}
.under_pen03 {background: linear-gradient(transparent 0, #0abc62 0);}
.under_pen04 {background: linear-gradient(transparent 0, #0b2260 0);}
.under_pen05 {background: linear-gradient(transparent 0, #ff7f50 0);}
.under_pen07 {background: linear-gradient(transparent 0, #dc143c 0);}
.under_pen08 {background: linear-gradient(transparent 0, #000000 0);}
.under_pen09 {background: linear-gradient(transparent 0, #8effa1 0);}




/*******丸数字*******/
.bss{margin:15px 0 10px 0; width:600px;}
.bss li{position:relative; list-style:none; margin-bottom:1em;}
.bss li span{position:absolute; top:-1px; left:-1em;}







 /* 表示文字の装飾 */
    div.tooltip1{
        color: #555;
        display: inline-block;                        /* インライン要素化 */
        border-bottom:dashed 0px #555;    /* 下線を引く */
    }
     
    /* ツールチップ部分を隠す */
    div.tooltip1 span {
        display: none;
    }
     
    /* マウスオーバー */
    div.tooltip1:hover {
        position: relative;
        color: #333;
    }
     
    /* マウスオーバー時にツールチップを表示 */
    div.tooltip1:hover span {
        display: block;                  /* ボックス要素にする */
        position: absolute;            /* relativeからの絶対位置 */
        top: 25px;
        font-size: 90%;
        color: #fff;
        background-color: #dc143c;
        width: 405px;
        padding: 5px;
        border-radius:3px;
        z-index:100;
    }
     
    /* フキダシ部分を作成 */
    div.tooltip1 span:before{
        content:''; 
        display:block; 
        position:absolute;                         /* relativeからの絶対位置 */
        height:0; 
        width:0; 
        top:-13px; 
        left:15px;
        border:13px transparent solid; 
        border-right-width:0; 
        border-left-color:#dc143c; 
        transform:rotate(270deg);            /* 傾きをつける */
        -webkit-transform:rotate(270deg);
        -o-transform:rotate(270deg);
        z-index:100;
    }


/*******画像の右クリック＆ドラッグ禁止*******/
.copy-guard {
  pointer-events: none;
}
	/* class="copy-guard" */


/*******箇条書きの天地左右*******/
ol {
  padding-top: 0px;
  padding-bottom: 0px
  /*背景色などのCSSは省略*/
}
	/* <ol>〜</ol> */





/*******一覧表*******/
.listeTable{
  width: 100%;
  border-collapse:separate;
  border-spacing: 0;
}

.listeTable th:first-child{
  border-radius: 5px 0 0 0;
}

.listeTable th:last-child{
  border-radius: 0 5px 0 0;
  border-right: 1px solid #3c6690;
}

.listeTable th{
  text-align: center;
  color:white;
  background: linear-gradient(#829ebc,#225588);
  border-left: 1px solid #3c6690;
  border-top: 1px solid #3c6690;
  border-bottom: 1px solid #3c6690;
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
  /* width: 25%; */
  padding: 10px 0;
}

.listeTable td{
  text-align: left;
  border-left: 1px solid #a8b7c5;
  border-bottom: 1px solid #a8b7c5;
  border-top:none;
  box-shadow: 0px -3px 5px 1px #eee inset;
  /* width: 25%; */
  padding: 0px 0px 0px 10px;
}

.listeTable td:last-child{
  border-right: 1px solid #a8b7c5;
}

.listeTable tr:last-child td:first-child {
  border-radius: 0 0 0 5px;
}

.listeTable tr:last-child td:last-child {
  border-radius: 0 0 5px 0;
}






/*******五十音見出し*******/	
h2.multi{
	padding:0px 0;
	border-bottom:2px solid #abdef7;
	position:relative;
}
h2.multi:before, h2.multi:after{
	content:"";
	display:block;
	height:2px;
	position:absolute;
	bottom:-2px;
}
h2.multi:before{
	width:20%;
	left:8%;
	background:rgba(255,255,255,0.7);
}
h2.multi:after{
	width:30%;
	left:12%;
	background:rgba(87,176,224,0.6);
}






/*******テキスト・マウスホバー*******/
.texteAction01 {}
.texteAction01 a{
  /*_display: inline;
  display: inline-block;*/
  color:#2b2b2b;
  /*font-size:120%;*/
  text-decoration: none;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(186, 38, 54, 1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}
.texteAction01 a:hover{
  background-position: -100% 0;
  color: #fff;
}

.texteAction03 {}
.texteAction03 a{
  display: inline-block;
  color:#2b2b2b;
  /*font-size:120%;*/
  text-decoration:none;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(186, 38, 54, 1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}
.texteAction03 a:hover{
  background-position: -100% 0;
  color: #fff;
}

.texteAction00 {}
.texteAction00 a{
  display: inline-block;
  color:#ee2d7b;
  /*font-size:120%;*/
  text-decoration:none;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(238, 45, 123, 1) 50%);
  background-position: 0 0;
  background-size: 200% auto;
  transition: .3s;
}
.texteAction00 a:hover{
  background-position: -100% 0;
  color: #fff;
}