body{
  background-color : #0b2260;
}



/*----------------------------------------------------
  メニュー背景#shadow
----------------------------------------------------*/
.shadow1 {text-shadow:3px 3px 2px #ff6347;}	/* メニュー背景（赤色） */



/*----------------------------------------------------
  二重下線#under
----------------------------------------------------*/
.under01 {border-bottom: double 4px #fffcbc;}	/* 二重下線（金色） */
.under02 {border-bottom: double 4px #ff0000;}	/* 二重下線（赤色） */
.under09 {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);}


/*----------------------------------------------------
  螢光ペン#under
----------------------------------------------------*/
.under_pen_mini01 {background: linear-gradient(transparent 70%, #aa0000 70%);}
.under_pen_mini02 {background: linear-gradient(transparent 70%, #ff0000 70%);}
.under_pen_mini03 {background: linear-gradient(transparent 70%, #0abc62 70%);}
.under_pen_mini04 {background: linear-gradient(transparent 70%, #0b2260 70%);}
.under_pen_mini05 {background: linear-gradient(transparent 70%, #ff7f50 70%);}
.under_pen_mini07 {background: linear-gradient(transparent 70%, #dc143c 70%);}
.under_pen_mini08 {background: linear-gradient(transparent 70%, #000000 70%);}
.under_pen_mini09 {background: linear-gradient(transparent 70%, #8effa1 70%);}


/*----------------------------------------------------
  行間調整#lineheight percent
----------------------------------------------------*/
lineheight00percent {line-height: initial;}
lineheight50percent {line-height: 50%;}
lineheight90percent {line-height: 90%;}
lineheight100percent {line-height: 100%;}
lineheight110percent {line-height: 110%;}
lineheight120percent {line-height: 120%;}
lineheight130percent {line-height: 130%;}
lineheight140percent {line-height: 140%;}
lineheight150percent {line-height: 150%;}
lineheight160percent {line-height: 160%;}
lineheight170percent {line-height: 170%;}
lineheight180percent {line-height: 180%;}
lineheight190percent {line-height: 190%;}
lineheight200percent {line-height: 200%;}
lineheight500percent {line-height: 500%;}


/*----------------------------------------------------
  数字箇条書　#
----------------------------------------------------*/
ol {
  padding-top: 0px;
  padding-bottom: 0px
  /*背景色などのCSSは省略*/
}
	/* <ol>〜</ol> */


/*----------------------------------------------------
  ふきだし　#
----------------------------------------------------*/
/* 表示文字の装飾 */
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;
}


/*----------------------------------------------------
  字取り#jidori
----------------------------------------------------*/
.jidori{
     /*- width:20em; -*/
     font-size:17;
     table-layout:auto;
}
.jidori th{
     padding:0;
     -moz-text-align-last: justify;
     text-align-last: justify;
     text-justify:inter-ideograph;
     border:none;
}



/*----------------------------------------------------
  点滅アニマージュ　背景反転ブリンク#under
----------------------------------------------------*/
 /* --- BOXの定義 -------------------------------------------------*/
.sample2d {
  display       : inline-block;        /* ブロック化              */
  font-weight   : bold;                /* 太字                    */
  color         : #ffffff;             /* 文字色                  */
  background    : #ff0000;             /* 背景色                  */
  padding       : -50px 0px -50px 0px;             /* 背景色内の余白          */
  margin        : 0px 0px 0px 0px;               /* 背景色の外の上 右 下 左余白    */
  animation  : sample2dAnime 4s infinite alternate;  /* アニメ */
}
 /* --- アニメーションの設定 ------------------------------------ */
@keyframes sample2dAnime {
   0% {
       color      : #ff0000;           /* 開始文字色              */
       background : #ff0000;           /* 開始背景色              */
      }
 100% {
       color      : #ffffff;           /* 終了文字色              */
       background : #ff0000;           /* 終了背景色              */
      }
}



 /* --- BOXの定義 -------------------------------------------------*/
.sample3d {
  display       : inline-block;        /* ブロック化              */
  font-weight   : bold;                /* 太字                    */
  color         : #ffffff;             /* 文字色                  */
  background    : #ff7f00;             /* 背景色                  */
  padding       : 5px 3px;             /* 背景色内の余白          */
  margin        : 0 2px;               /* 背景色のの外左右余白    */
  animation  : sample2dAnime 4s infinite alternate;  /* アニメ */
}
 /* --- アニメーションの設定 ------------------------------------ */
@keyframes sample2dAnime {
   0% {
       color      : #ffffff;           /* 開始文字色              */
       background : #ff7f00;           /* 開始背景色              */
      }
 100% {
       color      : #ff7f00;           /* 終了文字色              */
       background : #ffffff;           /* 終了背景色              */
      }
}






/*----------------------------------------------------
  基本メニュー　#sommaire
----------------------------------------------------*/
.sommaire {
	background-color: #0b2260;/* 親背景色 #ffffff  #17184b*/
	border: 0px solid #dedede;/* 外枠の太さ */
	border-radius: 0px;/* 角丸 */
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #fffcbc;/* #888888 */
	display: block;
	margin: 0em 1%;/* 設置高さ */
	overflow: hidden;
	width: 800px;
}
.sommaire ul {
	margin: 0;
	padding: 0;
}
.sommaire ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.sommaire > ul > li > a > .caret {
	border-top: 4px solid #ff0000;/* 上側の境界 ▼の色#aaaaaa */
	border-right: 4px solid transparent;/* 右側の境界 4px */
	border-left: 4px solid transparent;/* 左側の境界 4px */
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.sommaire > ul > li > a {
	color: #fffcbc;/* 親テキストの色 #aaaaaa */
	display: block;
	line-height: 36px;/* 親行ボックスの高さ 56px */
	padding: 0 0px;/* 内側余白 */
	text-decoration: none;
}
.sommaire > ul > li:hover {
	background-color: rgb(218, 60, 65);/* マウスを置いた時のテキストの色 17184b  rgb(218, 60, 65) */
}
.sommaire > ul > li:hover > a {
	color: rgb( 255, 255, 255 );/* マウスを置いた時のテキストの色 rgb( 255, 255, 255 ) */
}
.sommaire > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}
.sommaire > ul > li > div {
	background-color: #4c6cb3;/* マウスを置いた時の子の背景色 rgb(218, 60, 65) */
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 200px;/* width: 165px;	子の横幅 */
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.sommaire > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.sommaire > ul > li > div ul > li {
	display: block;
}
.sommaire > ul > li > div ul > li > a {
	color: #ffffff;/* 子テキストの色 #ffffff */
	display: block;
	padding: 12px 24px;
	text-decoration: none;
}
.sommaire > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}






/*----------------------------------------------------
  横メニュー　#cp_navi（蒸溜専用）
----------------------------------------------------*/
.cp_navi {
	background-color: #005243;/* マウスを置いていない時の背景色 background-color: #ffffff; */
	border: 1px solid #dedede;
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #888888;
	display: block;
	margin: 1em 1%;
	overflow: hidden;
	width: 500px;/* width: 100%; */
}
.cp_navi ul {
	margin: 0;
	padding: 0;
}
.cp_navi ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.cp_navi > ul > li > a > .caret {
	border-top: 4px solid #aaaaaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.cp_navi > ul > li > a {
	color: #aaaaaa;
	display: block;
	line-height: 26px;/* 基本高さ line-height: 56px; */
	padding: 0 10px;
	text-decoration: none;
}
.cp_navi > ul > li:hover {
	background-color: rgb(218, 60, 65);
}
.cp_navi > ul > li:hover > a {
	color: rgb(255, 255, 255 );
}
.cp_navi > ul > li:hover > a > .caret {
	border-top-color: rgb(255, 255, 255 );
}
.cp_navi > ul > li > div {
	background-color: rgb(218, 60, 65);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 100px;/* width: 165px; */
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.cp_navi > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.cp_navi > ul > li > div ul > li {
	display: block;
}
.cp_navi > ul > li > div ul > li > a {
	color: #ffffff;
	display: block;
	padding: 12px 24px;
	text-decoration: none;
}
.cp_navi > ul > li > div ul > li:hover > a {
	background-color: rgba(255, 255, 255, 0.1);/* background-color: rgba(255, 255, 255, 0.1); */
}




/*----------------------------------------------------
  横メニュー　#cp_navi02
----------------------------------------------------*/
.cp_navi02 {
	background-color: #4c6cb3;
	border: 1px solid #dedede;
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #888888;
	display: block;
	margin: 1em 1%;
	overflow: hidden;
	width: 100%;
}
.cp_navi02 ul {
	margin: 0;
	padding: 0;
}
.cp_navi02 ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.cp_navi02 > ul > li > a > .caret {
	border-top: 4px solid #aaaaaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.cp_navi02 > ul > li > a {
	color: #aaaaaa;
	display: block;
	line-height: 25px;
	padding: 0 10px;
	text-decoration: none;
}
.cp_navi02 > ul > li:hover {
	background-color: rgb(218, 60, 65);
}
.cp_navi02 > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
}
.cp_navi02 > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}
.cp_navi02 > ul > li > div {
	background-color: rgb(218, 60, 65);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 300px;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.cp_navi02 > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.cp_navi02 > ul > li > div ul > li {
	display: block;
}
.cp_navi02 > ul > li > div ul > li > a {
	color: #ffffff;
	display: block;
	padding: 12px 24px;
	text-decoration: none;
}
.cp_navi02 > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}




/*----------------------------------------------------
  横メニュー　#cp_navi02
----------------------------------------------------*/
.cp_navi02 {
	background-color: #4c6cb3;
	border: 1px solid #dedede;
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #888888;
	display: block;
	margin: 1em 1%;
	overflow: hidden;
	width: 100%;
}
.cp_navi02 ul {
	margin: 0;
	padding: 0;
}
.cp_navi02 ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.cp_navi02 > ul > li > a > .caret {
	border-top: 4px solid #aaaaaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.cp_navi02 > ul > li > a {
	color: #aaaaaa;
	display: block;
	line-height: 25px;
	padding: 0 10px;
	text-decoration: none;
}
.cp_navi02 > ul > li:hover {
	background-color: rgb(218, 60, 65);
}
.cp_navi02 > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
}
.cp_navi02 > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}
.cp_navi02 > ul > li > div {
	background-color: #17184b;/* マウスを置いている時の子の背景色 rgb(218, 60, 65) */
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 300px;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.cp_navi02 > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.cp_navi02 > ul > li > div ul > li {
	display: block;
}
.cp_navi02 > ul > li > div ul > li > a {
	color: #ffffff;
	display: block;
	padding: 12px 24px;
	text-decoration: none;
}
.cp_navi02 > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}





/*----------------------------------------------------
  横メニュー　#cp_navi300
----------------------------------------------------*/
.cp_navi300 {
	background-color: #4c6cb3;
	border: 1px solid #dedede;
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #888888;
	display: block;
	margin: 1em 1%;
	overflow: hidden;
	width: 100%;
}
.cp_navi300 ul {
	margin: 0;
	padding: 0;
}
.cp_navi300 ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.cp_navi300 > ul > li > a > .caret {
	border-top: 4px solid #aaaaaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.cp_navi300 > ul > li > a {
	color: #aaaaaa;
	display: block;
	line-height: 25px;
	padding: 0 10px;
	text-decoration: none;
}
.cp_navi300 > ul > li:hover {
	background-color: rgb(218, 60, 65);
}
.cp_navi300 > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
}
.cp_navi300 > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}
.cp_navi300 > ul > li > div {
	background-color: rgb(218, 60, 65);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 300px;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.cp_navi300 > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.cp_navi300 > ul > li > div ul > li {
	display: block;
}
.cp_navi300 > ul > li > div ul > li > a {
	color: #ffffff;
	display: block;
	padding: 12px 24px;
	text-decoration: none;
}
.cp_navi300 > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}



/*----------------------------------------------------
  横メニュー　#cp_navi500
----------------------------------------------------*/
.cp_navi500 {
	background-color: #4c6cb3;
	border: 1px solid #dedede;
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #888888;
	display: block;
	margin: 1em 1%;
	overflow: hidden;
	width: 100%;
}
.cp_navi500 ul {
	margin: 0;
	padding: 0;
}
.cp_navi500 ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.cp_navi500 > ul > li > a > .caret {
	border-top: 4px solid #aaaaaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.cp_navi500 > ul > li > a {
	color: #aaaaaa;
	display: block;
	line-height: 25px;
	padding: 0 10px;
	text-decoration: none;
}
.cp_navi500 > ul > li:hover {
	background-color: rgb(218, 60, 65);
}
.cp_navi500 > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
}
.cp_navi500 > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}
.cp_navi500 > ul > li > div {
	background-color: rgb(218, 60, 65);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 500px;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.cp_navi500 > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.cp_navi500 > ul > li > div ul > li {
	display: block;
}
.cp_navi500 > ul > li > div ul > li > a {
	color: #ffffff;
	display: block;
	padding: 12px 24px;
	text-decoration: none;
}
.cp_navi500 > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}


/*------------------------------------------------------------------------------------------------------------------------------------------------------------
  横メニュー　#cp_navi800
------------------------------------------------------------------------------------------------------------------------------------------------------------*/



/*----------------------------------------------------
  横メニュー　#cp_navi0800px0300　
----------------------------------------------------*/
.cp_navi0800px0300 {
	background-color: #005243;/* マウスを置いていない時の背景色 #4c6cb3 */
	border: 1px solid #dedede;
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #888888;
	display: block;
	margin: 1em 1%;
	overflow: hidden;
	width: 800px;
}
.cp_navi0800px0300 ul {
	margin: 0;
	padding: 0;
}
.cp_navi0800px0300 ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.cp_navi0800px0300 > ul > li > a > .caret {
	border-top: 4px solid #aaaaaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.cp_navi0800px0300 > ul > li > a {
	color: #aaaaaa;
	display: block;
	line-height: 25px;
	padding: 0 10px;
	text-decoration: none;
}
.cp_navi0800px0300 > ul > li:hover {
	background-color: rgb(218, 60, 65);
}
.cp_navi0800px0300 > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
}
.cp_navi0800px0300 > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}
.cp_navi0800px0300 > ul > li > div {
	background-color: #17184b;/* マウスを置いている時の子の背景色 rgb(218, 60, 65) */
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 300px;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.cp_navi0800px0300 > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.cp_navi0800px0300 > ul > li > div ul > li {
	display: block;
}
.cp_navi0800px0300 > ul > li > div ul > li > a {
	color: #ffffff;
	display: block;
	padding: 12px 24px;
	text-decoration: none;
}
.cp_navi0800px0300 > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}

/*----------------------------------------------------
  横メニュー　#cp_navi0800px0550
----------------------------------------------------*/
.cp_navi0800px0550 {
	background-color: #4c6cb3;
	border: 1px solid #dedede;
	border-radius: 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	color: #888888;
	display: block;
	margin: 1em 1%;
	overflow: hidden;
	width: 800px;
}
.cp_navi0800px0550 ul {
	margin: 0;
	padding: 0;
}
.cp_navi0800px0550 ul li {
	display: inline-block;
	list-style-type: none;
	-webkit-transition: all 0.2s;
	        transition: all 0.2s;
}
.cp_navi0800px0550 > ul > li > a > .caret {
	border-top: 4px solid #aaaaaa;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	width: 0;
	vertical-align: middle;
	-webkit-transition: color 0.1s linear;
	        transition: color 0.1s linear;
}
.cp_navi0800px0550 > ul > li > a {
	color: #aaaaaa;
	display: block;
	line-height: 25px;
	padding: 0 10px;
	text-decoration: none;
}
.cp_navi0800px0550 > ul > li:hover {
	background-color: rgb(218, 60, 65);
}
.cp_navi0800px0550 > ul > li:hover > a {
	color: rgb( 255, 255, 255 );
}
.cp_navi0800px0550 > ul > li:hover > a > .caret {
	border-top-color: rgb( 255, 255, 255 );
}
.cp_navi0800px0550 > ul > li > div {
	background-color: #17184b;/* マウスを置いていない時の子の背景色 rgb(218, 60, 65) */
	border-top: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
	display: none;
	margin: 0;
	opacity: 0;
	position: absolute;
	width: 550px;
	visibility: hidden;
	-webkit-transiton: opacity 0.2s;
	       transition: opacity 0.2s;
}
.cp_navi0800px0550 > ul > li:hover > div {
	display: block;
	opacity: 1;
	visibility: visible;
}
.cp_navi0800px0550 > ul > li > div ul > li {
	display: block;
}
.cp_navi0800px0550 > ul > li > div ul > li > a {
	color: #ffffff;
	display: block;
	padding: 12px 24px;
	text-decoration: none;
}
.cp_navi0800px0550 > ul > li > div ul > li:hover > a {
	background-color: rgba( 255, 255, 255, 0.1);
}




/*----------------------------------------------------
  テキスト・マウスホバー#texteAction01
----------------------------------------------------*/
.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;
}




/*----------------------------------------------------
  リュバン見出し　#ruban
----------------------------------------------------*/
.ruban01 {
  display: inline-block;
  position: relative;
  height: 45px;
  text-align: center;
  box-sizing: border-box;
}
.ruban01:before {/*左側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  left: -35px;
  z-index: -2;
  border: 20px solid #56adf3;
  border-left-color: transparent;/*山形に切り抜き*/
}

.ruban01:after {/*右側のリボン端*/
  content: '';
  position: absolute;
  width: 10px;
  bottom: -10px;
  right: -35px;
  z-index: -2;
  border: 20px solid #56adf3;
  border-right-color: transparent;/*山形に切り抜き*/
}

.ruban01 h3 {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0 20px;
  line-height: 45px;
  font-size: 18px;
  color: #fff;/*文字の色*/
  background: #2196F3;/*真ん中の背景色*/
}
.ruban01 h3:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-right: solid 15px #397eb5;/*左の折り返し部分*/
}
.ruban01 h3:after {
  position: absolute;
  content: '';
  top: 100%;
  right: 0;
  border: none;
  border-bottom: solid 10px transparent;
  border-left: solid 15px #397eb5;/*右の折り返し部分*/
}


/*----------------------------------------------------
  吹き出し　#tooltip1
----------------------------------------------------*/
/* 表示文字の装飾 */
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;
}


/*----------------------------------------------------
  吹き出し　#tooltip2
----------------------------------------------------*/
/* 表示文字の装飾 */
div.tooltip2{
color: #555;
display: inline-block;/* インライン要素化 */
border-bottom:dashed 0px #555;/* 下線を引く */
}
 
/* ツールチップ部分を隠す */
div.tooltip2 span {
display: none;
}
 
/* マウスオーバー */
div.tooltip2:hover {
position: relative;
color: #333;
}
 
/* マウスオーバー時にツールチップを表示 */
div.tooltip2:hover span {
display: block;  /* ボックス要素にする */
position: absolute;/* relativeからの絶対位置 */
top: 25px;/* 対象物からの高さ */
left: -395px;/* 対象物からの左右の位置 */
font-size: 100%;/* font-size: 90%; */
color: #fff;
background-color: #dc143c;/* 袋の背景色 */
width: 405px;/* 袋の幅 */
padding: 5px;/* 袋の高さ */
border-radius:3px;/* 袋の角の丸み */
z-index:100;
}
 
/* フキダシ部分を作成 */
div.tooltip2 span:before{
content:''; 
display:block; 
position:absolute; /* relativeからの絶対位置 */
height:0; 
width:0; 
top:-13px; /* 矢印の高さ位置 */
left:395px;/* 矢印の左右の位置 */
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;
}




/*----------------------------------------------------
  吹き出し　#tooltip2
----------------------------------------------------*/
/* 角を丸く */
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
  border-radius: 15px;
}

.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon1 p {
  margin: 0;
  padding: 0;
}

/* 下向き */
.balloon3 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #70a6ff;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3:before {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #70a6ff;
  z-index: 0;
}

/* 上向き */
.balloon3-top {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #a4eb84;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-top:before {
  content: "";
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #a4eb84;
  z-index: 0;
}

/* 左向き */
.balloon3-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #ffcc75;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 15px solid #ffcc75;
  z-index: 0;
}


/* 右向き */
.balloon3-right {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #ff8e9d;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -25px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #ff8e9d;
  z-index: 0;
}

/* 斜め向き */
.balloon3-right-btm {
  position: relative;
  display: inline-block;
  margin: 1.5em 15px 1.5em 0;
  padding: 0 5px;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #a58eff;
  border-radius: 50%;
  box-sizing: border-box;
}

.balloon3-right-btm:before {
  content: "";
  position: absolute;
  bottom: -8px;
  right: -8px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 15px solid #a58eff;
  z-index: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* えごと風のふきだし */
.balloon4 {
  position: relative;
  margin: 2em 0 2em 40px;
  padding: 15px;
  background: #fff0c6;
  border-radius: 30px;
}

.balloon4:before {  
  content: "";
  position: absolute;
  left: -38px;
  width: 13px;
  height: 12px;
  bottom: 0;
  background: #fff0c6;
  border-radius: 50%;
}

.balloon4:after {
  content: "";
  position: absolute;
  left: -24px;
  width: 20px;
  height: 18px;
  bottom: 3px;
  background: #fff0c6;
  border-radius: 50%;
}
.balloon4 p {
  margin: 0; 
  padding: 0;
}



/* 吹き出し */
.tooltip { /* 補足説明するテキストのスタイル */
  position: relative;
  cursor: pointer;
  padding: 0 5px;
  /* font-size: 0.9em *//* 補足説明するテキストのフォントサイズ */
  color: #4682b4;
}
 
.description_top { /* ツールチップのスタイル */
  width: 150px; /* 横幅 */
  position: absolute;
  left: 50%;
  bottom: 80%; /* Y軸の位置 */
  transform: translateX(-50%);
  margin-bottom: 8px; /* テキストとの距離 */
  padding: 8px;
  border-radius: 10px; /* 角の丸み */
  background-color: #666;
  font-size: 0.7em;/* 吹き出し内のフォントサイズ */
  color: #fff;
  text-align: center;
  visibility: hidden; /* ツールチップを非表示に */
  opacity: 0; /* 不透明度を0％に */
  z-index: 1;
  transition: 0.5s all; /* マウスオーバー時のアニメーション速度 */
}
 
.tooltip:hover .description_top { /* マウスオーバー時のスタイル */
  bottom: 100%; /* Y軸の位置 */
  visibility: visible; /* ツールチップを表示 */
  opacity: 1; /* 不透明度を100％に */
}




<style type="text/css">
.sample2oya {
  position: relative;                  /* 指定した分だけ相対的に移動 */
}
.sample2oya:hover .sample2 {
  display: inline;                     /* インライン要素として表示 */
}
 /* --- 吹き出し ------------------ */
.sample2 {
  display: none;                        /* 要素を非表示 */
  position: absolute;                   /* 親要素を基準 */
  padding: 2px;                         /* テキストの前後の余白 */
  background-color: rgba(255, 127, 127, 0.75);  /* 背景色（透明度） */
  width:180px;                          /* 吹き出し全体の幅 */
  left : 30%;                           /* 表示位置 */
  top : 100%;                           /* 表示位置 */
  margin-top : 12px;                    /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  animation: sample2Anime 1s linear;
}
.sample2:after{
  border-bottom: 12px solid rgba(255, 127, 127, 0.75);  /* 吹き出し口の高さ・色 */
  border-left: 10px solid transparent;   /* 吹き出し口の幅１／２ */
  border-right: 10px solid transparent;  /* 吹き出し口の幅１／２ */
  top: -12px;                            /* 吹き出し口の位置調整 */
  left : 5%;                         /* 吹き出し口の横位置 */
  content: "";                       /* コンテンツの挿入 */
  position: absolute;                /* 親要素を基準 */
}
@keyframes sample2Anime{
 100%{ color : black; background:rgba(255, 127, 127, 0.75) }
  50%{ color : black; background:rgba(255, 127, 127, 0.25) }
   0%{ color : white; background:white   }
}
</style>





/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}



/*----------------------------------------------------
  文字点滅　#blink
----------------------------------------------------*/
.blink {
	-webkit-animation: blink 1s ease infinite;
	animation: blink 1s ease infinite;
}
@-webkit-keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}