@charset "UTF-8";

/* ----------------------------------------------------
* import
* -------------------------------------------------- */
@import url("reset.css");
@import url("qrtip-1.0-jquery.css");
@import url("../js/shadowbox/shadowbox.css");

/* ----------------------------------------------------
* fonts
* -------------------------------------------------- */
@font-face {
    font-family: subway;
    src: url('../fonts/subway.woff') format('woff'), url('../fonts/subway.ttf') format('truetype');
	 /* 
	 * Chunk licensed under the SIL Open Font License
	 * http://###
	 */
}

/* ----------------------------------------------------
* Text elements
* -------------------------------------------------- */

p { line-height: 1.25em; }

a:focus, 
a:hover { color: #666666;  text-decoration: none; }
a { color: #666666; text-decoration: none; outline: none; }
p a { color: #ff0000; }
p a { color: #20acb8; }

blockquote { margin: 1.5em; color: #666; font-style: italic; }
strong { font-weight: bold; }
em,dfn { font-style: italic; }
dfn { font-weight: bold; }
sup, sub { line-height: 0; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style :italic; font-weight: bold; }

abbr, acronym { border-bottom: 1px dotted #666; }
address { margin: 0 0 1.5em; font-style: italic; }
del { color: #666; }

pre { margin: 1.5em 0; white-space: pre; }
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; }

::-moz-selection { background: #101010; color:#fff; text-shadow: none; }
::selection { background: #101010; color: #fff; text-shadow: none; } 
a:link { -webkit-tap-highlight-color: #101010; }

/* ----------------------------------------------------
* common
* -------------------------------------------------- */
body { font-family: メイリオ, Meiryo, "Helvetica Neue", Arial, Helvetica, sans-serif; background: #EFEFEF; }
canvas.bgCanvas { position: absolute; z-index: -1; /* ←この部分で背景に */ width: auto; height: auto; }

/* ----------------------------------------------------
* header
* -------------------------------------------------- */
header { background: rgba(255,255,255,0.65); height: 60px; margin: 0 0 20px 0; padding: 20px 45px 0 45px; }
*+html header { background: #FFFFFF; }
header h1 { border-right: #000 20px solid; height: 40px; margin: 0 10px 0 0; float: left; }
header h2 { font-size: 12px; line-height: 1.5em; font-weight: normal; float: left; }
header h2 strong { font-weight: bold; font-size: 115%; }
header h2 em { font-weight: bold; }
header nav { float: right; }
header nav ul { font-size: 80%; font-weight: bold; }
header nav ul li { margin: 0 0 0 20px; padding: 5px 5px 5px 25px; float: left; }
header nav ul li a { color: #000; }
header nav ul #nav_mail { background: url(../images/icon_hd_mail.gif) left center no-repeat; }
header nav ul #nav_facebook { background: url(../images/icon_hd_facebook.gif) left center no-repeat; }
header nav ul #nav_twitter { background: url(../images/icon_hd_twitter.gif) left center no-repeat; }

/* ----------------------------------------------------
* box
* -------------------------------------------------- */
.wrap { margin:0 40px 0 40px; }
.box { 
	margin: 5px; padding: 10px; float: left; background: rgba(255,255,255,0.65); color: #000; display: inline;
	transition: all .3s linear;
	-o-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-webkit-transition: all .3s linear;
	}
*+html .box { background: #FFFFFF; }

.box:hover { color: #FFF; background: rgba(0,0,0,0.75); }
*+html .box:hover { background: #000; }

.box img { padding: 0 0 10px 0; border-bottom: #666 5px solid; }
.box h2 { color: #930; font-size: 80%; font-weight: bold; line-height: 1.25em; margin: 0.5em 0 0.5em 0; }
.box h2 small { font-size: 75%; }
.box:hover h2 { color: #FF0; }
.box .category { font-size: 60%; margin: 0.5em 0 0.5em 0; }
.box .category strong { font-weight: bold; text-decoration: underline; }

.box .description { font-size: 75%; }
.box .description strong { color: #FFF; background: #000; font-weight: bold; margin: 1em 0 0.5em 0; padding: 0.25em; display: inline-block; }
.box .description small { font-size: 60%; }
.box .btn_detail a { color: #FFF; font-size: 65%; background: #000; font-weight: bold; margin: 1em 0 0 0; padding: 0.25em; float: right; }

.col1 { width: 170px; }
.col2 { width: 380px; }
.col2 h2 { font-size: 125%; }

/* ----------------------------------------------------
* SNS　その他
* -------------------------------------------------- */
.twtr { background: #333; margin: 5px; padding: 0; float: left; display: inline; overflow: hidden; zoom: 1; }

ul#sns { list-style: none; }
ul#sns li { margin: 0 10px 0 0; float: left; }

/*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.1
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/
#toTop { display:none; text-decoration:none; position:fixed; bottom:10px; right:10px; overflow:hidden; width:51px; height:51px; border:none; text-indent:-999px; background:url(../images/ui.totop.png) no-repeat left top; }
#toTopHover { background:url(../images/ui.totop.png) no-repeat left -51px; width:51px; height:51px; display:block; overflow:hidden; float:left; opacity: 0; -moz-opacity: 0; filter:alpha(opacity=0); }
#toTop:active, #toTop:focus { outline:none; }

/* ----------------------------------------------------
* footer
* -------------------------------------------------- */
#footer { clear: both; }
#copyright { font-size: 70%; color: #FFF; text-align: right; background: #000; padding: 0.25em; clear: both; }

/* ----------------------------------------------------
* canvas非対応ブラウザ用コメント
* -------------------------------------------------- */
#canvas_comment { position: absolute; z-index: 100; top: 50%; left: 50%; margin: -80px 0 0 -250px; padding: 40px; background: #FFF; border: #000 5px solid; text-align: center; display: block; }
#canvas_comment strong { font-size: 150%; line-height: 150%; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: #000 5px solid; display: block; } 
body > #canvas_comment { height:auto; min-height:140px; }

/* ----------------------------------------------------
* clearfix
* -------------------------------------------------- */
.clearfix:after, .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden; }
.clearfix, .container { display: block; }
/* Regular clearing
   apply to column that should drop below previous ones. */
.clear { clear:both; }

/* ----------------------------------------------------
* その他 class
* -------------------------------------------------- */
.center { text-align: center; }