/* 左から右への上吹き出し */
div.tooltip1 span{
 display: none;
}

div.tooltip1:hover{
 position: relative;
}

div.tooltip1:hover span{
 display: block;
 position: absolute;
 left:-5px;
 width: 355px;
 bottom: 35px;
 line-height:16px;
 font-size: 12px;
 font-weight: normal;
 text-align: left;
 vertical-align: middle;
 color: #000000;
 background-color: #ebe9dc;
 padding: 5px;
 border-radius: 4px;
 z-index: 100;
}

div.tooltip1 span:before{
 content: "";
 display: block;
 position: absolute;
 height:0;
 width: 0;
 bottom: -24px;
 left: 8px;
 border: 13px transparent solid;
 border-top-color: #ebe9dc;
 border-left-width: 10px;
 border-right-width: 10px;
 z-index: 100;
}

/* 右から左への上吹き出し */
div.tooltip2 span{
 display: none;
}

div.tooltip2:hover{
 position: relative;
}

div.tooltip2:hover span{
 display: block;
 position: absolute;
 left:-335px;
 width: 355px;
 bottom: 35px;
 line-height:16px;
 font-size: 12px;
 font-weight: normal;
 text-align: left;
 vertical-align: middle;
 color: #000000;
 background-color: #ebe9dc;
 padding: 5px;
 border-radius: 4px;
 z-index: 100;
}

div.tooltip2 span:before{
 content: "";
 display: block;
 position: absolute;
 height:0;
 width: 0;
 bottom: -24px;
 left: 335px;
 border: 13px transparent solid;
 border-top-color: #ebe9dc;
 border-left-width: 10px;
 border-right-width: 10px;
 z-index: 100;
}

/* 左から右への下吹き出し */
div.tooltip3 span{
 display: none;
}

div.tooltip3:hover{
 position: relative;
}

div.tooltip3:hover span{
 display: block;
 position: absolute;
 left:-5px;
 width: 355px;
 top: 35px;
 line-height:16px;
 font-size: 12px;
 font-weight: normal;
 text-align: left;
 vertical-align: middle;
 color: #000000;
 background-color: #ebe9dc;
 padding: 5px;
 border-radius: 4px;
 z-index: 100;
}

div.tooltip3 span:before{
 content: "";
 display: block;
 position: absolute;
 height:0;
 width: 0;
 top: -24px;
 left: 8px;
 border: 13px transparent solid;
 border-bottom-color: #ebe9dc;
 border-left-width: 10px;
 border-right-width: 10px;
 z-index: 100;
}

/* 右から左への下吹き出し */
div.tooltip4 span{
 display: none;
}

div.tooltip4:hover{
 position: relative;
}

div.tooltip4:hover span{
 display: block;
 position: absolute;
 left:-335px;
 width: 355px;
 top: 35px;
 line-height:16px;
 font-size: 12px;
 font-weight: normal;
 text-align: left;
 vertical-align: middle;
 color: #000000;
 background-color: #ebe9dc;
 padding: 5px;
 border-radius: 4px;
 z-index: 100;
}

div.tooltip4 span:before{
 content: "";
 display: block;
 position: absolute;
 height:0;
 width: 0;
 top: -24px;
 left: 335px;
 border: 13px transparent solid;
 border-bottom-color: #ebe9dc;
 border-left-width: 10px;
 border-right-width: 10px;
 z-index: 100;
}

/* 右上吹き出し */
div.tooltip5 span{
 display: none;
}

div.tooltip5:hover{
 position: relative;
}

div.tooltip5:hover span{
 display: block;
 position: absolute;
 left:40px;
 width: 355px;
 top: -5px;
 line-height:16px;
 font-size: 12px;
 font-weight: normal;
 text-align: left;
 vertical-align: middle;
 color: #000000;
 background-color: #ebe9dc;
 padding: 5px;
 border-radius: 4px;
 z-index: 100;
}

div.tooltip5 span:before{
 content: "";
 display: block;
 position: absolute;
 height:0;
 width: 0;
 top: 5px;
 left: -20px;
 border: 10px transparent solid;
 border-right-color: #ebe9dc;
 border-left-width: 5px;
 border-right-width: 20px;
 z-index: 100;
}

/* 左上吹き出し */
div.tooltip6 span{
 display: none;
}

div.tooltip6:hover{
 position: relative;
}

div.tooltip6:hover span{
 display: block;
 position: absolute;
 left:-400px;
 width: 355px;
 top: -5px;
 line-height:16px;
 font-size: 12px;
 font-weight: normal;
 text-align: left;
 vertical-align: middle;
 color: #000000;
 background-color: #ebe9dc;
 padding: 5px;
 border-radius: 4px;
 z-index: 100;
}

div.tooltip6 span:before{
 content: "";
 display: block;
 position: absolute;
 height:0;
 width: 0;
 top: 5px;
 right: -20px;
 border: 10px transparent solid;
 border-left-color: #ebe9dc;
 border-left-width: 20px;
 border-right-width: 5px;
 z-index: 100;
}


/* 動画リンク用のツールチップ形式（左から右への上吹き出し） */
a.tooltipMovie1 span.movieMsg{
 display: none;
}

a.tooltipMovie1:hover{
 position: relative;
}

a.tooltipMovie1:hover span.movieMsg{
 display: block;
 position: absolute;
 left:-5px;
 width: 355px;
 bottom: 35px;
 line-height:16px;
 font-size: 12px;
 font-weight: normal;
 text-align: left;
 vertical-align: middle;
 color: #000000;
 background-color: #ebe9dc;
 padding: 5px;
 border-radius: 4px;
 z-index: 100;
}

a.tooltipMovie1 span.movieMsg:before{
 content: "";
 display: block;
 position: absolute;
 height:0;
 width: 0;
 bottom: -24px;
 left: 8px;
 border: 13px transparent solid;
 border-top-color: #ebe9dc;
 border-left-width: 10px;
 border-right-width: 10px;
 z-index: 100;
}

/* 動画リンク用のツールチップ形式（右から左への上吹き出し） */
a.tooltipMovie2 span.movieMsg{
 display: none;
}

a.tooltipMovie2:hover{
 position: relative;
}

a.tooltipMovie2:hover span.movieMsg{
 display: block;
 position: absolute;
 left:-335px;
 width: 355px;
 bottom: 35px;
 line-height:16px;
 font-size: 12px;
 font-weight: normal;
 text-align: left;
 vertical-align: middle;
 color: #000000;
 background-color: #ebe9dc;
 padding: 5px;
 border-radius: 4px;
 z-index: 100;
}

a.tooltipMovie2 span.movieMsg:before{
 content: "";
 display: block;
 position: absolute;
 height:0;
 width: 0;
 bottom: -24px;
 left: 335px;
 border: 13px transparent solid;
 border-top-color: #ebe9dc;
 border-left-width: 10px;
 border-right-width: 10px;
 z-index: 100;
}

/* 動画リンク用のツールチップ形式（右から左の横吹き出し） */
a.tooltipMovie3 span.movieMsg{
 display: none;
}

a.tooltipMovie3:hover{
 position: relative;
}

a.tooltipMovie3:hover span.movieMsg{
 display: block;
 position: absolute;
 left:-400px;
 width: 355px;
 top: -5px;
 line-height:16px;
 font-size: 12px;
 font-weight: normal;
 text-align: left;
 vertical-align: middle;
 color: #000000;
 background-color: #ebe9dc;
 padding: 5px;
 border-radius: 4px;
 z-index: 100;
}

a.tooltipMovie3 span.movieMsg:before{
 content: "";
 display: block;
 position: absolute;
 height:0;
 width: 0;
 top: 5px;
 right: -20px;
 border: 10px transparent solid;
 border-left-color: #ebe9dc;
 border-left-width: 20px;
 border-right-width: 5px;
 z-index: 100;
}

/* 動画リンク専用ツールチップ文言 */
.movieMsg::after{
  content: "インターネット通信環境によっては通信速度が低下する場合があるため、動画ファイルをダウンロードする場合は、通信が少ない時間帯にダウンロードいただきますようお願いいたします。";
  white-space: pre-wrap;
}