@charset "UTF-8";

html,body,
div,span,
object,iframe,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,
a,abbr,acronym,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,strong,sub,sup,tt,var,
ul,ol,li,dl,dt,dd,
form,fieldset,legend,label,
table,caption,tbody,tfoot,thead,tr,th,td,
header,main,nav,footer{
margin: 0;
padding: 0;
}

header,main,nav,footer{
display:block;
}

body{
color: #222;
background-color: #fff;
font-size: 1.1em;
font-family: 'omnes-pro','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
line-height: 1.7;
-webkit-text-size-adjust: 100%;
}

h1{
margin: 0.6em 0;
font-size: 2em;
}

h2{
margin: 0.8em 0;
font-size: 1.5em;
}

h3{
margin: 1em 0;
font-size: 1.2em;
}

h4{
margin: 1.2em 0;
font-size: 1em;
}

h5{
margin: 1.4em 0;
font-size: 0.9em;
}

h6{
margin: 1.6em 0;
font-size: 0.8em;
}

p,ul,ol,dl{
margin: 1em 0;
}

dt{
font-weight: bold;
}

dd{
margin-bottom: 0.5em;
}

ul li{
margin-left: 1.5em;
}

ol li{
margin-left: 2.5em;
}

em{
font-style: normal;
}

img{
vertical-align: bottom;
max-width: 100%;
height: auto;
}

blockquote{
margin: 1em 0;
padding: 0 1em;
border: 1px solid #999;
border-radius: 3px;
}

blockquote > cite{
display: block;
margin: 0 0 1em;
font-style: normal;
text-align: right;
}

pre{
overflow:auto;
padding:0.5em;
border:1px solid #999;
}

section+section{
margin-top: 2em;
padding-top: 0.5em;
border-top: 1px solid #999;
}

article+article{
margin-top: 2em;
padding-top: 1em;
border-top: 1px dotted #999;
}

table{
margin: 1em 0;
border: 1px solid #cbcbcb;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
width: 100%;
}

th,td{
padding: 6px 12px;
}

thead{
background: #eee;
border-bottom: 1px solid #cbcbcb;
}

tbody tr{
border-bottom: 1px dotted #cbcbcb;
}

tbody tr:nth-child(even){
background: #fbfbfb;
}

tbody tr:hover{
background: #eee;
}

header{
color: #fff;
background: #222;
}

header a{
color: #fff;
text-decoration: none;
}

.header_content{
display: block;
margin: 0 auto;
padding: 0.5em 15px;
}

.site_title{
float: left;
font-weight: bold;
}

.site_description{
float: right;
font-size: 0.9em;
line-height: 1.9;
text-align: right;
}

main{
margin: 1em auto;
padding: 0 15px;
}

.key_visual img{
width: 100%;
}

.topic_path{
margin: 2em 0;
}

.cse{
margin: 1em auto;
padding: 0 15px;
text-align: right;
}

.cse > *{
display: inline;
vertical-align: middle;
}

.cse input{
margin: 0 15px 0 0;
font-size: 1em;
border-radius: 3px;
-webkit-appearance: none;
}

.cse input[type="text"]{
border: 1px solid #666;
padding: 3px;
width: 14em;
}

.cse input[type="submit"]{
padding: 3px 8px;
border: 1px solid #aaa;
color: #555;
background: #f0f0f0;
text-indent: 5px;
letter-spacing: 5px;
}

.cse input[type="submit"]:hover,
.cse input[type="submit"]:focus{
cursor: pointer;
color: #c00;
border-color: #900;
background-color: #ffc0cb;
}

.meta{
background-color: #3465a4;
background-image: -webkit-linear-gradient(bottom, #222222 0%, #3465a4 100%, #204a87 100%);
background-image: -moz-linear-gradient(bottom, #222222 0%, #3465a4 100%, #204a87 100%);
background-image: -o-linear-gradient(bottom, #222222 0%, #3465a4 100%, #204a87 100%);
background-image: -ms-linear-gradient(bottom, #222222 0%, #3465a4 100%, #204a87 100%);
background-image: linear-gradient(bottom, #222222 0%, #3465a4 100%, #204a87 100%);
padding: 1em 0;
color: #fff;
}

.meta>ul{
margin: 0 auto;
padding: 0 15px;
}

.meta>ul>li{
margin: 0;
list-style: none;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-weight: bold;
}

.meta .author p{
position: relative;
padding-left:100px;
min-height: 80px;
}

.meta .author p img{
width: 80px;
height: auto;
border: 2px solid #fff;
position: absolute;
top: 0;
left: 0;
}

.meta .author .sns{
margin:0 0 0 100px;
}

.meta .author .sns li{
display: block;
float: left;
list-style-type: none;
margin:0 0.8em 1em 0;
}

.meta .author .sns li:last-child{
margin-right: 0;
}

.meta .author .sns li svg{
display: block;
width: 2em;
height: 2em;
}

.meta>ul>li a{
color: #fff;
}

.meta>ul>li ul>li{
list-style: disc;
}

.meta>ul>li>*{
font-weight: normal;
}

footer{
color: #fff;
background: #222;
}

footer small{
display: block;
margin: 0 auto;
padding: 0.5em 15px;
font-size: 1em;
text-align: right;
}

.header_content,main,.cse,.meta>ul,footer small{
-moz-box-sizing: border-box;
box-sizing: border-box;
max-width: 50em;
}

@media screen and (min-width:1201px){
.key_visual{max-height: 70vh;overflow: hidden;}
.key_visual img{margin-top: -15vh;}
}

@media screen and (max-width:767px){
body{font-size: 0.95em;}
.meta>ul>li,.meta .menu{float: none;padding-right: 0;width: auto;}
.meta>ul>li+li{padding-top: 1em;border-top: 1px solid #999;}
}
	
@media screen and (max-width:479px){
body{font-size: 0.9em;}
.site_description{display: none;}
.meta .author p{position: static;padding-left:0;}
.meta .author p img{position: static;top: auto;left: auto;float: left;margin-right: 15px;}
.meta .author .sns{margin-left: 0;}
footer small{text-align: center;}
.cse input{margin: 0 5px 0 0;}
.cse input[type="text"]{width: 14em;}
.cse input[type="submit"]{padding: 3px 5px;text-indent: 0;letter-spacing: 0;}
}

/* ===== Clear Fix ===== */

.meta>ul:after,
.meta .author .sns:after,
.header_content:after{
content:"";
height:0;
display:block;
clear:both;
}

.meta>ul,
.meta .author .sns,
.header_content{
_zoom:1;
}

/* ===== Top ===== */

dl[itemtype="http://www.schema.org/SiteNavigationElement"]{
-webkit-column-count:2;
-moz-column-count:2;
column-count:2;
}

@media screen and (max-width:519px){
dl[itemtype="http://www.schema.org/SiteNavigationElement"]{
-webkit-column-count:auto;
-moz-column-count:auto;
column-count:auto;
}
}

/* ===== Coffee ===== */

table.sortable thead th:hover{
cursor:pointer;
}

/* ===== Blog ===== */

.permalink{
margin: 1em 0;
text-align: right;
}

#googleAd{
margin: 2em 0;
text-align: center;
}

.diigo-ps,
.diigo-tags{
display: none;
}

.slideshare,
.youtube{
position: relative;
max-width:640px;
height:0;
margin:1em auto;
padding:30px 0 56.25%;
overflow: hidden;
}

.slideshare iframe,
.slideshare object,
.slideshare embed,
.youtube iframe,
.youtube object,
.youtube embed{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.blog .menu ul{
margin:2em 0;
}

@media print{
body{
color:#000;
background-color:transparent;
}
header,.key_visual,.cse{
display:none;
}
.meta{
background-image:none;
}
footer{
color:#000;
background:non transparent;
}
}