body{
 background-color: none;
 overflow: hidden;
 position: relative;
}

button{
 cursor: pointer; /* button要素にマウスを置いた時の形状をpointerに指定 */
}

.button-image{
 margin: 0 auto;
 margin-bottom: -2;
 margin-right: 5;
 padding-bottom: 0;
 weight: 20;
 height: 20;
}

.pulldown-image{
 margin: 0 auto;
 margin-bottom: -2;
 margin-left: 5;
 padding-bottom: 0;
 weight: 20;
 height: 20;
}

.middleboxarea{
 width: 100%;
 height: 150;
 margin: 0 auto;
 position: relative;
 padding: 0;
 background: none;
 line-height: 1.2;
}

.middlebox{
 float: left;
 width: 0;
 height: 0;
 margin: 0 auto;
 margin-left: 15;
 padding: 0;
 background-color: none;
 border: none;
}
#middlebox2block{
 float: left;
 width: 0;
 height: 0;
 margin: 0 auto;
 padding: 0;
 background-color: none;
 border: none;
}

#middlebox1-trigger-under{
 z-index: -1;
 position: absolute;
 float: left;
 width: 100%;
 height: 36;
 margin: 0 auto;
 margin-top: 72;
 background-color: blue;
 background-image: url(../../images/pulldown.gif);
 background-size: 25px;
 background-repeat: no-repeat;
 background-position: 2% 50%;
 border: none;
 border-radius: 20px;
 overflow: hidden;
}
#middlebox1-trigger{
 z-index: 2;
 position: absolute;
 float: left;
 width: 95%;
 height: 30;
 margin: 0 auto;
 margin-top: 72;
 padding: 5 0 0 8;
 background-color: none;
 background-image: url(../../images/pulldown.gif);
 background-size: 25px;
 background-repeat: no-repeat;
 background-position: 100% 45%;
 border: none;
 border-radius: 20px 0 0 20px;
 overflow: hidden;
}
#middlebox1{
 position: absolute;
 float: left;
 width: 100%;
 height: 36;
 margin: 0 auto;
 margin-top: 72;
 background-color: white;
 border: none;
 border-radius: 20px;
 overflow: hidden;
}
#middlebox1:hover{
 z-index: 6;
 position: absolute;
 float: left;
 width: 90%;
 height: 250;
 margin: 0 auto;
 margin-left: 10%;
 background-color: white;
 border: 4px solid #0000ff;
 border-radius: 20px;
 transition: all .3s;
}
#middlebox1-trigger:hover + #middlebox1{
 z-index: 6;
 position: absolute;
 float: left;
 width: 90%;
 height: 250;
 margin: 0 auto;
 margin-left: 10%;
 background-color: white;
 border: 4px solid #0000ff;
 border-radius: 20px;
 transition: all .3s;
}

#middlebox2-trigger-under{
 z-index: -1;
 position: absolute;
 float: left;
 width: 100%;
 height: 36;
 margin: 0 auto;
 margin-top: 108;
 background-color: blue;
 background-image: url(../../images/pulldown.gif);
 background-size: 25px;
 background-repeat: no-repeat;
 background-position: 2% 50%;
 border: none;
 border-radius: 20px;
 overflow: hidden;
}
#middlebox2-trigger{
 z-index: 2;
 position: absolute;
 float: left;
 width: 95%;
 height: 30;
 margin: 0 auto;
 margin-top: 108;
 padding: 5 0 0 8;
 background-color: none;
 background-image: url(../../images/pulldown.gif);
 background-size: 25px;
 background-repeat: no-repeat;
 background-position: 100% 45%;
 border: none;
 border-radius: 20px 0 0 20px;
 overflow: hidden;
}
#middlebox2{
 position: absolute;
 float: left;
 width: 100%;
 height: 36;
 margin: 0 auto;
 margin-top: 108;
 background-color: white;
 border: none;
 border-radius: 20px;
 overflow: hidden;
}
#middlebox2:hover{
 z-index: 6;
 position: absolute;
 float: left;
 width: 90%;
 height: 250;
 margin: 0 auto;
 margin-left: 10%;
 background-color: white;
 border: 4px solid #0000ff;
 border-radius: 20px;
 transition: all .3s;
}
#middlebox2-trigger:hover + #middlebox2{
 z-index: 6;
 position: absolute;
 float: left;
 width: 90%;
 height: 250;
 margin: 0 auto;
 margin-left: 10%;
 background-color: white;
 border: 4px solid #0000ff;
 border-radius: 20px;
 transition: all .3s;
}

#middlebox3-trigger-under{
 z-index: -1;
 position: absolute;
 float: left;
 width: 100%;
 height: 36;
 margin: 0 auto;
 margin-top: 144;
 background-color: blue;
 background-image: url(../../images/pulldown.gif);
 background-size: 25px;
 background-repeat: no-repeat;
 background-position: 2% 50%;
 border: none;
 border-radius: 20px;
 overflow: hidden;
}
#middlebox3-trigger{
 z-index: 2;
 position: absolute;
 float: left;
 width: 95%;
 height: 30;
 margin: 0 auto;
 margin-top: 144;
 padding: 5 0 0 8;
 background-color: none;
 background-image: url(../../images/pulldown.gif);
 background-size: 25px;
 background-repeat: no-repeat;
 background-position: 100% 45%;
 border: none;
 border-radius: 20px 0 0 20px;
 overflow: hidden;
}
#middlebox3{
 position: absolute;
 float: left;
 width: 100%;
 height: 36;
 margin: 0 auto;
 margin-top: 144;
 background-color: white;
 border: none;
 border-radius: 20px;
 overflow: hidden;
}
#middlebox3:hover{
 z-index: 6;
 position: absolute;
 float: left;
 width: 90%;
 height: 250;
 margin: 0 auto;
 margin-left: 10%;
 background-color: white;
 border: 4px solid #0000ff;
 border-radius: 20px;
 transition: all .3s;
}
#middlebox3-trigger:hover + #middlebox3{
 z-index: 6;
 position: absolute;
 float: left;
 width: 90%;
 height: 250;
 margin: 0 auto;
 margin-left: 10%;
 background-color: white;
 border: 4px solid #0000ff;
 border-radius: 20px;
 transition: all .3s;
}

#middlebox4-trigger-under{
 z-index: -1;
 position: absolute;
 float: left;
 width: 100%;
 height: 36;
 margin: 0 auto;
 margin-top: 0;
 background-color: blue;
 background-image: url(../../images/pulldown.gif);
 background-size: 25px;
 background-repeat: no-repeat;
 background-position: 2% 50%;
 border: none;
 border-radius: 20px;
 overflow: hidden;
}
#middlebox4-trigger{
 z-index: 2;
 position: absolute;
 float: left;
 width: 95%;
 height: 30;
 margin: 0 auto;
 margin-top: 0;
 padding: 5 0 0 8;
 background-color: none;
 background-image: url(../../images/pulldown.gif);
 background-size: 25px;
 background-repeat: no-repeat;
 background-position: 100% 45%;
 border: none;
 border-radius: 20px 0 0 20px;
 overflow: hidden;
}
#middlebox4{
 position: absolute;
 float: left;
 width: 100%;
 height: 36;
 margin: 0 auto;
 margin-top: 0;
 background-color: white;
 border: none;
 border-radius: 20px;
 overflow: hidden;
}
#middlebox4:hover{
 z-index: 6;
 position: absolute;
 float: left;
 width: 90%;
 height: 250;
 margin: 0 auto;
 margin-left: 10%;
 background-color: white;
 border: 4px solid #0000ff;
 border-radius: 20px;
 transition: all .3s;
}
#middlebox4-trigger:hover + #middlebox4{
 z-index: 6;
 position: absolute;
 float: left;
 width: 90%;
 height: 250;
 margin: 0 auto;
 margin-left: 10%;
 background-color: white;
 border: 4px solid #0000ff;
 border-radius: 20px;
 transition: all .3s;
}

#middlebox5-trigger-under{
 z-index: -1;
 position: absolute;
 float: left;
 width: 100%;
 height: 36;
 margin: 0 auto;
 margin-top: 36;
 background-color: blue;
 background-image: url(../../images/pulldown.gif);
 background-size: 25px;
 background-repeat: no-repeat;
 background-position: 2% 50%;
 border: none;
 border-radius: 20px;
 overflow: hidden;
}
#middlebox5-trigger{
 z-index: 2;
 position: absolute;
 float: left;
 width: 95%;
 height: 30;
 margin: 0 auto;
 margin-top: 36;
 padding: 5 0 0 8;
 background-color: none;
 background-image: url(../../images/pulldown.gif);
 background-size: 25px;
 background-repeat: no-repeat;
 background-position: 100% 45%;
 border: none;
 border-radius: 20px 0 0 20px;
 overflow: hidden;
}
#middlebox5{
 position: absolute;
 float: left;
 width: 100%;
 height: 36;
 margin: 0 auto;
 margin-top: 36;
 background-color: white;
 border: none;
 border-radius: 20px;
 overflow: hidden;
}
#middlebox5:hover{
 z-index: 6;
 position: absolute;
 float: left;
 width: 90%;
 height: 250;
 margin: 0 auto;
 margin-left: 10%;
 background-color: white;
 border: 4px solid #0000ff;
 border-radius: 20px;
 transition: all .3s;
}
#middlebox5-trigger:hover + #middlebox5{
 z-index: 6;
 position: absolute;
 float: left;
 width: 90%;
 height: 250;
 margin: 0 auto;
 margin-left: 10%;
 background-color: white;
 border: 4px solid #0000ff;
 border-radius: 20px;
 transition: all .3s;
}

.middleboxtitle{
 width: 101%;
 height: 35;
 margin: 0 auto;

 padding-left: 10;
 border: none;
 background: linear-gradient(#ffaa00, #cc661d);
 color: #fff;
 font-size: 20px;
 font-weight: bolder;
 text-align: left;
 line-height: 1.7;
}

#middlebox1:hover .middleboxtitle{
 width: 101%;
 height: 35;
 margin: 0 auto;
 padding-left: 10;
 border: none;
 background: linear-gradient(#00bfff, #0000ff);
 color: #fff;
 font-size: 20px;
 font-weight: bolder;
 text-align: left;
 line-height: 1.7;
 transition: all .3s;
}
#middlebox2:hover .middleboxtitle{
 width: 101%;
 height: 35;
 margin: 0 auto;
 padding-left: 10;
 border: none;
 background: linear-gradient(#00bfff, #0000ff);
 color: #fff;
 font-size: 20px;
 font-weight: bolder;
 text-align: left;
 line-height: 1.7;
 transition: all .3s;
}
#middlebox3:hover .middleboxtitle{
 width: 101%;
 height: 35;
 margin: 0 auto;
 padding-left: 10;
 border: none;
 background: linear-gradient(#00bfff, #0000ff);
 color: #fff;
 font-size: 20px;
 font-weight: bolder;
 text-align: left;
 line-height: 1.7;
 transition: all .3s;
}
#middlebox4:hover .middleboxtitle{
 width: 101%;
 height: 35;
 margin: 0 auto;
 padding-left: 10;
 border: none;
 background: linear-gradient(#00bfff, #0000ff);
 color: #fff;
 font-size: 20px;
 font-weight: bolder;
 text-align: left;
 line-height: 1.7;
 transition: all .3s;
}
#middlebox5:hover .middleboxtitle{
 width: 101%;
 height: 35;
 margin: 0 auto;
 padding-left: 10;
 border: none;
 background: linear-gradient(#00bfff, #0000ff);
 color: #fff;
 font-size: 20px;
 font-weight: bolder;
 text-align: left;
 line-height: 1.7;
 transition: all .3s;
}

.link{
 font-size: 15px;
 font-weight: bolder;
 word-break: break-all;
}
.link:link{
 font-size: 15px;
 font-weight: bolder;
 color: blue;
 text-decoration: underline;
}
.link:hover{
 font-weight: bolder;
 color: red;
 text-decoration: underline;
}
.link:active{
 font-weight: bolder;
 color: yellow;
 text-decoration: none;
}
.link:visited{
 font-weight: bolder;
 color: #800080;
 text-decoration: underline;
}