@charset "utf-8"; /*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--* transition.css CSS3 transition *--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*/ /*----------------------------------------------------- 　Grobal Navigation [#header > nav#global-navi] ------------------------------------------------------*/ #global-navi { background:url(../images/bg_global-nav.png) repeat-x left bottom; height:39px; padding:0 0 0 12px; overflow:hidden; } #global-navi ul { height:27px; margin:7px 0 0 0; padding:0; background:none; overflow:hidden; zoom:1; display:-moz-box; display:-webkit-box; } #global-navi li { position:relative; cursor:pointer; margin-right:6px; line-height:1; } #masthead #global-navi a { position:relative; display:block; width:auto; height:27px; padding:0 1em; background-color:#2c404d; line-height:27px; text-align:center; color:#ffffff; text-decoration:none; text-indent:0; overflow: hidden; font-size:93%; z-index:10; outline:0;background-position:left top; border-radius : 6px; -moz-border-radius : 6px; -webkit-border-radius: 6px; background-image:linear-gradient(top, rgba(84, 134, 167, 0.68), rgba(44, 64, 77, 0.34)), url(../images/global-navi_slash.png); background-image:-moz-linear-gradient(top, rgba(84, 134, 167, 0.68), rgba(44, 64, 77, 0.34)), url(../images/global-navi_slash.png); background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(84, 134, 167, 0.68)), to( rgba(44, 64, 77, 0.34))), url(../images/global-navi_slash.png); box-shadow : 1px 0 2px rgba(21,36,39, 0.7); -moz-box-shadow : 1px 0 2px rgba(21,36,39, 0.7); -webkit-box-shadow: 1px 0 2px rgba(21,36,39, 0.7); transition : background 0.5s; -webkit-transition: background 0.5s; -o-transition : background 0.5s; } #masthead #global-navi a:hover{ background-color:#2F546C; background-position:left top; background-image:linear-gradient(top, rgba(83, 166, 204, 0.71), rgba(44, 64, 77, 0.34)), url(../images/global-navi_slash.png); background-image:-moz-linear-gradient(top, rgba(83, 166, 204, 0.71), rgba(44, 64, 77, 0.34)), url(../images/global-navi_slash.png); background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(83, 166, 204, 0.71)), to( rgba(44, 64, 77, 0.34))), url(../images/global-navi_slash.png); } #masthead #global-navi a:active{ background-color:#2c404d; background-image:linear-gradient(top, rgba(83, 113, 133, 0), rgba(44, 64, 77, 0.54)), url(../images/global-navi_slash.png); background-image:-moz-linear-gradient(top, rgba(83, 113, 133, 0), rgba(44, 64, 77, 0.54)), url(../images/global-navi_slash.png); background-image:-webkit-gradient(linear, left top, left bottom, from( rgba(83, 113, 133, 0) ), to( rgba(44, 64, 77, 0.54) )), url(../images/global-navi_slash.png); box-shadow : 1px 0 3px rgba(109,195,212, 0.18); -moz-box-shadow : 1px 0 3px rgba(109,195,212, 0.18); -webkit-box-shadow: 1px 0 3px rgba(109,195,212, 0.18); } /* Movable Type JP Button ------------------------------------------------------*/ #masthead #global-navi .movable-type-jp { position:absolute; top:23px; right:5px; float:none; width:220px; height:40px; background:none; line-height:1; } #masthead #global-navi .movable-type-jp .button { display:block; width:220px; height:40px; padding:0; line-height:44px; text-indent:-9898px; background:linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)), url(../images/legacy/movable-type-jp.png); background:-moz-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)), url(../images/legacy/movable-type-jp.png); background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0))), url(../images/legacy/movable-type-jp.png); border-radius : 3px; -moz-border-radius : 3px; -webkit-border-radius: 3px; box-shadow : none; -moz-box-shadow : none; -webkit-box-shadow: none; transition : background 0.5s; -webkit-transition: background 0.5s; -o-transition : background 0.5s; } #masthead #global-navi .movable-type-jp .button:hover { background:linear-gradient(top, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.2) 49%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0)), url(../images/legacy/movable-type-jp.png); background:-moz-linear-gradient(top, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.2) 49%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0)), url(../images/legacy/movable-type-jp.png); background:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.45)), color-stop(49%, rgba(255, 255, 255, 0.2)), color-stop(50%, rgba(255, 255, 255, 0.15)), to(rgba(255, 255, 255, 0))), url(../images/legacy/movable-type-jp.png); box-shadow : 1px 1px 5px rgba(0,0,0, 0.25); -moz-box-shadow : 1px 1px 5px rgba(0,0,0, 0.25); -webkit-box-shadow: 1px 1px 5px rgba(0,0,0, 0.25); } #masthead #global-navi .movable-type-jp .button:active { position:relative; top:1px; left:1px; background:none; background:linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 80%), url(../images/legacy/movable-type-jp.png); background:-moz-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 80%), url(../images/legacy/movable-type-jp.png); background:-webkit-gradient( linear, left top, left bottom, from( rgba(0, 0,0, 0.3) ), to( rgba(0, 0, 0, 0) ) ), url(../images/legacy/movable-type-jp.png); background-position:left top; box-shadow : none; -moz-box-shadow : none; -webkit-box-shadow: none; } /* サイト内検索 -----------------------------------------------------*/ #search { position:absolute; right:12px; bottom:5px; width:222px; height:27px; margin:0; color:#666666; background:none; } /* MooTools More, OverText により自動挿入 */ #search label { display:block; line-height:27px !important; } /* 検索テキストエリア */ #masthead #search input[type=text] { position:relative; width:182px; height:19px; margin:0; padding: 3px 5px 3px 5px; border:0; outline:0; line-height:19px; background-color:#16272a; background-image:linear-gradient(top, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.81)); background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.81)); background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.72)), to(rgba(255, 255, 255, 0.81))); border:1px solid rgba(255, 255, 255, 0.81); border-top-left-radius : 5px; border-top-right-radius : 0px; border-bottom-right-radius: 0px; border-bottom-left-radius : 5px; -moz-border-radius-topleft : 5px; -moz-border-radius-topright : 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft : 5px; -webkit-border-top-left-radius : 5px; -webkit-border-top-right-radius : 0px; -webkit-border-bottom-right-radius: 0px; -webkit-border-bottom-left-radius : 5px; box-shadow : inset 2px 2px 5px rgba(0,0,0, 0.25); -moz-box-shadow : inset 2px 2px 5px rgba(0,0,0, 0.25); -webkit-box-shadow: inset 2px 2px 5px rgba(0,0,0, 0.25); transition : background 0.5s; -webkit-transition: background 0.5s; -o-transition : background 0.5s; } #masthead #search input[type=text]:hover, #masthead #search input[type=text]:focus{ background-color:#8eb3ba; background-image:linear-gradient(top, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.91)); background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.91)); background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.82)), to(rgba(255, 255, 255, 0.91))); } #search span.submit { position:absolute; top:0; right:0; display:inline-block; width: 30px; } /* 虫眼鏡ボタン */ #masthead #search button { position:relative; display:inline-block; margin:0; padding:0; height:27px; width: 30px; outline:0; overflow:hidden; color: #FFFFFF; text-indent:-9898px; z-index:1; cursor:pointer; border:none; border-top-left-radius : 0px; border-top-right-radius : 5px; border-bottom-right-radius: 5px; border-bottom-left-radius : 0px; -moz-border-radius-topleft : 0px; -moz-border-radius-topright : 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft : 0px; -webkit-border-top-left-radius : 0px; -webkit-border-top-right-radius : 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius : 0px; background-color:#8eb3ba; background-image:linear-gradient(top, rgba(255, 255, 255, 0.3) 6%, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.41) 51%, rgba(0, 0, 0, 0.68) 80%), url(../images/button/search-icon.png); background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 6%, rgba(0, 0, 0, 0) 7%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.41) 51%, rgba(0, 0, 0, 0.68) 80%), url(../images/button/search-icon.png); background-image:-webkit-gradient( linear, left top, left bottom, from( rgba(255, 255, 255, 0.3) ), color-stop( 50%, rgba(0, 0, 0, 0.3) ), color-stop( 51%, rgba(0, 0, 0, 0.41) ), to( rgba(0, 0, 0, 0.68) ) ), url(../images/button/search-icon.png); background-repeat: no-repeat,no-repeat; background-position: center center; box-shadow : inset 0 -1px 3px rgba(117,139,143, 0.7); -moz-box-shadow : inset 0 -1px 3px rgba(117,139,143, 0.7); -webkit-box-shadow: inset 0 -1px 3px rgba(117,139,143, 0.7); transition : background 0.5s; -webkit-transition: background 0.5s; -o-transition : background 0.5s; } #masthead #search button:hover, #masthead #search button:focus { background-color: #aad5dd; } #masthead #search button:active { background-color :#8eb3ba; box-shadow : inset 0 0 8px rgba(0,0,0, 0.7); -moz-box-shadow : inset 0 0 8px rgba(0,0,0, 0.7); -webkit-box-shadow: inset 0 0 8px rgba(0,0,0, 0.7); } /* 個人ライセンス Download Button */ #license .personal .button { position:relative; width:210px; height:30px; margin:0 auto; padding:0; cursor:pointer; } #license .personal .button { position:relative; display:block; width:210px; height:30px; line-height:30px; background:none; border-radius : 4px; -moz-border-radius : 4px; -webkit-border-radius: 4px; background-color:#97aa93; background-image:linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.4) 49%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) ); background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.4) 49%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) ); background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.85)), color-stop(49%, rgba(255, 255, 255, 0.4)), color-stop(50%, rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0)) ); border:solid 1px #97aa93; transition : background 0.5s, border 0.5s; -webkit-transition: background 0.5s, border 0.5s; -o-transition : background 0.5s, border 0.5s; } #license .personal .button:hover { background-color:#a3c282; background-image:linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.4) 49%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) ); background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.4) 49%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) ); background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.85)), color-stop(49%, rgba(255, 255, 255, 0.4)), color-stop(50%, rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0)) ); border:solid 1px #a3c282; } #license .personal .button:active { background-color:#9ca899; background-image:linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.4) 49%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) ); background-image:-moz-linear-gradient(top, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.4) 49%, rgba(255, 255, 255, 0.25) 50%, rgba(255, 255, 255, 0) ); background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.85)), color-stop(49%, rgba(255, 255, 255, 0.4)), color-stop(50%, rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0)) ); border:solid 1px #9ca899; box-shadow : inset 1px 1px 4px rgba(138,155,134, 1); -moz-box-shadow : inset 1px 1px 4px rgba(138,155,134, 1); -webkit-box-shadow: inset 1px 1px 4px rgba(138,155,134, 1); } #license .personal .button a { position:static; display:block; width:210px; height:30px; line-height:30px; text-align:center; overflow: hidden; text-decoration:none; text-indent:-1em; color:#3d5838; font-weight:bold; font-size:100%; background:none; text-shadow:0 1px 1px #fff; } #license .personal .button a:hover { color:#4a721e; } #license .personal .button a:active { color:#4c6248; text-shadow:none; outline:none; } #license .personal .button a:after { content:"\0025BC";/*▼*/ display:block; position:absolute; top:0; right:12px; text-indent:0; font-stretch:narrower;/*対応ブラウザ無し*/ -moz-transform : rotate(-90deg); -webkit-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }