body {margin:0px; font:16px/30px  "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック",sans-serif; background:url(../images/bg.png); color:#444; border-top: solid 3px #0049c2}

p {margin:0px; padding:10px 0 0px 0px; line-height:30px; font-size:16px; color:#444}

a{color:#444; text-decoration:none;}
a:hover{ color:#0049c2;}

#wrapper {margin:0px auto; width:1000px;}
.clear {clear:both;}
.center {margin:0px auto; width:900px; margin-bottom:20px;}

#panel {clear:both;}
#top_panel { clear:both;}
#top_panel { clear:both; height:90px; background:url(../images/top_gradient.gif) repeat-x; } 
#top_logo_panel {}

.mid_left_details .rm {text-align: center; margin: 20px 0 0; width: auto;}

.logo {margin:0px; padding:20px 0px 20px 0px; text-align: center;}

#header_panel {clear:both;}
.header_bg {margin:0px; padding:0px; background:url(../images/header_img.jpg) no-repeat right bottom; height:238px;}

.intro_text{margin:20px 0 30px; padding: 20px; border: double 3px #7488FF;}
.intro_text p {margin: 0; padding: 0;}

#middle_panel {clear:both;}
.middle_controller {margin:0px; padding:40px 0px 40px 0px;}
#middle_left_panel {float:left; width:600px; padding-right: 30px;}
.middle_left_controller {margin:0px; padding:0px 0px 0px 0px;}
.middle_left_details  {margin:0px; padding:0px 0px 0px 0px; color:#0e1623;}
.middle_left_details h2 { margin:0px; padding:0px; font-size:26px; line-height:32px; font-weight:300; color:#000; margin-top:20px;}
.middle_left_details h3{ margin: 0px 0px; padding:15px 0px 0px 0px; font-size:20px; font-weight:300; color:#0049c2; line-height:24px;}
.middle_left_details img{ margin:20px 0 20px 0}
#middle_right_panel {float:right; width:260px;}

.right_controller {margin:0px; padding:0px 0px 0px 0px;}
.right_details {margin:0px 0 40px; padding:0px;}
.right_details h2, .right_details h2 a, .right_details h2 a:hover { margin:0px; padding:0px; font-size:22px; font-weight:300; color:#000; line-height:1.3; margin-top:20px;}
.right_details h2 {position: relative;
  padding: 0.5em 0.5em;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
  background: linear-gradient(to right, rgb(255, 186, 115), transparent);
  color: #545454;}
.right_details ul {margin:0px; padding:5px 0px 0px 0px; display:block; width:260px;}
.right_details ul li {margin:5px 0px; padding:7px 0px 7px 20px; list-style:none; line-height:30px; background:#7488FF url(../images/arrow.png) no-repeat left center;}
.right_details ul li:nth-child(2n) {background:#9DAAFF url(../images/arrow.png) no-repeat left center;}
.right_details ul li:nth-child(3n){background:#C4CDFF url(../images/arrow.png) no-repeat left center;}
.right_details ul li a { color:#111; padding: 10px; font-size: 16px;text-shadow: -6px 0px 15px rgba(255, 255, 240, 0.83), 6px 0px 15px rgba(255, 255, 240, 0.83);}
.right_details ul li a:hover{ color: #060bea;}

#mid_sec_panel {clear:both;}
.mid_sec_contorller{margin:20px 0 30px; padding:20px 0; overflow: hidden; background: #C4CDFF;}
.mid_sec_contorller img.fi { float: left; padding: 0; margin: 0 20px 0 10px; }

.mid_details {margin:0px; padding:0px; }
.mid_details h2 { margin:0px 10px 20px; padding:0px; font-size:26px; line-height:28px; font-weight:300; color:#000;}
.mid_details h3{margin: 0px 0px; padding:10px 0px 20px 0px; font-size:22px; font-weight:300; color:#8d1b1b; line-height:1.3;}
.mid_details  span.potfoilo {margin:0px; padding:0px 0px 0px 40px; }
.mid_block_controller {clear:both; margin:0px; padding:20px 0px 0px 0px;}

.mid_left_block{ float:left; width:300px;}
.mid_left_block2{ float:left; width:450px;}

.mid_left_controller {margin:0px; padding:0px 10px 0px 10px;}
.mid_left_details {margin:0 0 35px; padding:0px; overflow:hidden;}
.mid_left_details h2{margin:0px; padding:20px 0px 10px 0px; font-size:22px; line-height:26px; font-weight:normal; color:#000; min-height:50px; }


#fotter_panel {clear:both; border-top: solid 3px #0049c2}
.fotter_controller {margin:0px 0 0; padding:0px; background-color:#4967E7; border-top:1px #fff solid;}
.fotter_details {margin:0px; padding:20px 0px 20px 0px;}
.fotter_details p {margin:0px; padding:0px; text-align: center; color:#fff;  font-size:15px; }
.fotter_details p a {color:#fff; font-weight:600; text-decoration:none; margin:0px; padding:0px 5px 0px 5px; }
.fotter_details p a:hover {text-decoration:underline;}

.view {
   width: 410px;
   height: 275px;
   margin: 0px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
}
.view .mask,.view .content {
   width: 410px;
   height: 400px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-style: normal;
   font-size: 15px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: left;
}
.view a {
   color:#fff;
}
.view a:hover {color: yellow;}
.view a.info {
   font-size: 14px;
   display: inline-block;
   text-decoration: none;
   padding: 7px 14px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.view-fourth img {
   -webkit-transition: all 0.4s ease-in-out 0.2s;
   -moz-transition: all 0.4s ease-in-out 0.2s;
   -o-transition: all 0.4s ease-in-out 0.2s;
   -ms-transition: all 0.4s ease-in-out 0.2s;
   transition: all 0.4s ease-in-out 0.2s;
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-fourth .mask {
   background-color: rgba(0,0,0,0.8);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(0) rotate(-180deg);
   -moz-transform: scale(0) rotate(-180deg);
   -o-transform: scale(0) rotate(-180deg);
   -ms-transform: scale(0) rotate(-180deg);
   transform: scale(0) rotate(-180deg);
   -webkit-transition: all 0.4s ease-in;
   -moz-transition: all 0.4s ease-in;
   -o-transition: all 0.4s ease-in;
   -ms-transition: all 0.4s ease-in;
   transition: all 0.4s ease-in;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
}
.view-fourth h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-fourth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-fourth a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
}
.view-fourth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1) rotate(0deg);
   -moz-transform: scale(1) rotate(0deg);
   -o-transform: scale(1) rotate(0deg);
   -ms-transform: scale(1) rotate(0deg);
   transform: scale(1) rotate(0deg);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-fourth:hover img {
   -webkit-transform: scale(0);
   -moz-transform: scale(0);
   -o-transform: scale(0);
   -ms-transform: scale(0);
   transform: scale(0);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-fourth:hover h2,
.view-fourth:hover p,
.view-fourth:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0.5s;
   -moz-transition-delay: 0.5s;
   -o-transition-delay: 0.5s;
   -ms-transition-delay: 0.5s;
   transition-delay: 0.5s;
}