/* CSS Document */
/*@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);*/
* {
    box-sizing: border-box;
}
html {
    /*font-family: "Noto Sans Japanese", sans-serif;*/
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    font-size: 100%;
    color: #000;
}
body {
    margin: 0;
    padding: 0;
    overflow: auto;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    outline: none;
}
h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
i {
    margin: 0 0.2em;
}
/* ------------------------------------------------------------
    影関係
------------------------------------------------------------ */
.shadow-s {
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
}
.shadow-m {
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
}
.shadow-l {
    box-shadow: 0 0 5px 2px rgba(0,0,0,0.3);
}
.shadow-s-i {
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.3) inset;
}
.shadow-m-i {
    box-shadow: 0 0 5px 0 rgba(0,0,0,0.3) inset;
}
.shadow-l-i {
    box-shadow: 0 0 5px 2px rgba(0,0,0,0.3) inset;
}

/* ------------------------------------------------------------
    nav 関連
------------------------------------------------------------ */
nav.posts-nav {
    margin: 10px;
}
nav.posts-nav > ul {
    display: flex;
    justify-content: space-between
}
nav.posts-nav > ul > li > a {
    display: inline-block;
    /**/
    padding: 0.2em 0;
    /**/
    width: 100px;
    /**/
    color: #666;
    background-color: #eee;
    /**/
    text-align: center;
    /**/
    border-radius: 5px;
    /**/
    transition: all 0.2s;
}
nav.posts-nav > ul > li > a:hover,
nav.posts-nav > ul > li > a:focus {
    color: #fff;
    background-color: #e06a3b;
}
/* ------------------------------------------------------------
    card 関連
------------------------------------------------------------ */
article.card {
    margin: 20px 10px;
    /**/
    border-radius: 5px;
}
article.card > div.eyecatch {
	position: relative;
	
    height: 200px;
    /**/
    /*background-image: url(http://placehold.it/800x200);*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /**/
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
article.card > h1.card-title {
    margin: 0 0 10px 0;
    padding: 0.2em 0.5em;
    /**/
    font-size: 1.6em;
    /**/
    border-bottom: 1px solid #999;
}
article.card > div.eyecatch > h1.card-title {
	position: absolute;
	bottom: 0;
	/**/
	padding: 0.2em 0.5em;
	/**/
	width: 100%;
	/**/
	color: #fff;
	background-color: rgba(0,0,0,0.4);
	/**/
	font-size: 2em;
	text-shadow: 0 0 3px #000;
}
article.card > h1 {
    clear: both;
    /**/
    margin: 10px;
    padding: 0.2em 0;
    /**/
    font-size: 1.4em;
    /**/
    border-bottom: 1px solid #999;
}
article.card > h2 {
    clear: both;
    /**/
    margin: 10px;
    padding: 0.2em;
    /**/
    font-size: 1.3em;
}
article.card > h3 {
    clear: both;
    /**/
    margin: 10px;
    padding: 0.2em 0.4em;
    /**/
    font-size: 1.2em;
    font-weight: 300;
    
}
article.card > h4 {
    clear: both;
    /**/
    margin: 10px;
    padding: 0.2em 0;
    /**/
    font-size: 1.1em;
    font-weight: 300;
}
article.card > h5 {
    clear: both;
    /**/
    margin: 10px;
    padding: 0.2em 0;
    /**/
    font-size: 1em;
    font-weight: 200;
}
article.card > h6 {
    clear: both;
    /**/
    margin: 10px;
    padding: 0.2em 0;
    /**/
    font-size: 0.9em;
    font-weight: 200;
}
article.card > p {
    padding: 0.5em 2em;
    /**/
    font-size: 0.9em;
}
article.card strong {
    font-weight: 900;
}
article.card q {
    display: inline-block;
    /**/
    padding: 0 0.2em;
    /**/
    color: #333;
    background-color: #eee;
    /**/
    font-style: italic;
    border-radius: 5px;
}
article.card a {
    color: #e06a3b;
}
article.card a:hover,
article.card a:focus {
    text-decoration: underline;
}
article.card a.link-btn {
    display: inline-block;
    /**/
    margin: 1em;
    padding: 0.5em 1em;
    /**/
    border-radius: 5px;
    /**/
    color: #fff;
    background-color: #e06a3b;
    /**/
    transition: all 0.2s;

}
article.card a.link-btn:hover,
article.card a.link-btn:focus {
    text-decoration: none;
    /**/
    color: #666;
    background-color: #eee;
}
article.card blockquote {
    padding: 0.5em;
    /**/
    color: #333;
    background-color: #eee;
    /**/
    font-size: 0.9em;
    font-weight: normal;
    font-style: italic;
    /**/
    border-radius: 5px;
}
article.card > div.date {
    padding: 1em;
    /**/
    text-align: right;
    font-size: 0.8em;
}
article.card ul {
    list-style: disc;
    padding: 0.5em 4em;
}
article.card ul > li {
    font-size: 0.9em;
    font-weight: normal;
}
article.card ol {
    padding: 0.5em 4em;
}
article.card ol.low-alp {
    list-style-type: lower-alpha;
}
article.card ol > li {
    font-size: 0.9em;
    font-weight: normal;
}
article.card div.text-area-h200 {
    margin: 2em auto;
    padding: 1em;
    /**/
    width: 90%;
    height: 200px;
    /**/
    border: 1px solid #666;
    /**/
    overflow: auto;
}
/* ------------------------------------------------------------
    問い合わせForm 関連
------------------------------------------------------------ */
div.wpcf7 {
    overflow: auto;
}
form.wpcf7-form > p {
    margin: 1em;
}
form.wpcf7-form label {
	font-size: 1.2em;
	
}
form.wpcf7-form label > span {
    /*display: block;
    margin: 0.5em;*/
}
form.wpcf7-form ul.table-row2 {
    margin: 2px 2em;
    padding: 0;
    /**/
    list-style: none;
    /**/
    display: flex;
    
}
form.wpcf7-form ul.table-row2 > li:first-child {
    padding: 0.5em;
    /**/
    min-width: 200px;
    /**/
    background-color: #eee;
    /**/
    font-size: 1em;
}
form.wpcf7-form ul.table-row2 > li:last-child {
    flex: 1;
    /**/
    padding: 0.5em;
}
form.wpcf7-form ul.table-row2 > li:last-child input {
    margin: 3px 0;
    padding: 5px;
    /**/
    font-size: 1em;
    /**/
    border: 1px solid #bbb;
    border-radius: 5px;
    /**/
    outline: none;
    /**/
    transition: all 0.2s;
}
form.wpcf7-form ul.table-row2 > li:last-child input:focus,
form.wpcf7-form ul.table-row2 > li:last-child select:focus,
form.wpcf7-form ul.table-row2 > li:last-child textarea:focus{
    box-shadow: 0 0 3px 0 rgba(0,0,0,0.3);
}
form.wpcf7-form ul.table-row2 > li:last-child select {
    margin: 3px 0;
    padding: 5px;
    /**/
    font-size: 1em;
    /**/
    border: 1px solid #bbb;
    border-radius: 5px;
    /**/
    outline: none;
}
form.wpcf7-form ul.table-row2 > li:last-child textarea {
    margin: 3px 0;
    padding: 5px;
    /**/
    width: 100%;
    /**/
    font-size: 1em;
    /**/
    border: 1px solid #bbb;
    border-radius: 5px;
    /**/
    outline: none;
}
form.wpcf7-form dl {
    margin: 1em 20px;
    padding: 0;
}
form.wpcf7-form dt {
    display: list-item;
    list-style-type: disc;
}
form.wpcf7-form dd {
    margin: 1em 0.5em;
}
form.wpcf7-form span.wpcf7-radio > span {
    display: block;
    font-size: 0.8em;
}
form.wpcf7-form span.wpcf7-checkbox > span {
    display: block;
    font-size: 0.8em;
}
form.wpcf7-form input.wpcf7-submit {
    margin: 0 2em 1em 2em;
    padding: 0.5em;
    /**/
    width: 200px;
    /**/
    border: 1px solid #ddd;
    border-radius: 5px;
    /**/
    color: #333;
    background-color: #eee;
    /**/
    outline: none;
    /**/
    transition: all 0.2s;
}
form.wpcf7-form input.wpcf7-submit:hover,
form.wpcf7-form input.wpcf7-submit:focus {
    color: #fff;
    background-color: #e06a3b;
}
form.wpcf7-form h1 {
    margin: 1em;
    /**/
    border-bottom: 1px solid #666;
    /**/
    font-weight: normal;
    font-size: 1.3em;
    /**/
}
form.wpcf7-form input.wpcf7-validates-as-required,
form.wpcf7-form select.wpcf7-validates-as-required,
form.wpcf7-form textarea.wpcf7-validates-as-required {
    border-color: #faa!important;
    background-color: #fee;
}
form.wpcf7-form span.accept-this {
    margin: 1em 0em 1em 1.5em;
}
/* ------------------------------------------------------------
    Header 関連
------------------------------------------------------------ */
nav#page-nav > a {
    background-image: url(../img/header_title_logo.gif);
}
/* ------------------------------------------------------------
    #top-banner 関連
------------------------------------------------------------ */
a#banner-system {
    /*background-image: url(http://placehold.it/350x200/900);*/
    background-image: url(../img/top_dev.jpg);
}
a#banner-skil {
    /*background-image: url(http://placehold.it/350x200/090);*/
    background-image: url(../img/top_skil.jpg);
}
a#banner-req {
    /*background-image: url(http://placehold.it/350x200/009);*/
    background-image: url(../img/top_req_3.jpg);
}
/* ------------------------------------------------------------
    #pickup 関連
------------------------------------------------------------ */
#pickup {
    margin: 20px 0;
}
#pickup > h1 {
    font-size: 1.4em;
    font-weight: 400;
    text-align: center;
    /**/
    border-bottom: 1px solid #666;
}
#pickup > ul {
    display: flex;
    /**/
}
#pickup > ul > li {
    flex: 1;
    /**/
    margin: 10px;
}
#pickup article {
    text-align: center;
}
#pickup1 > a {
    background-image: url(http://placehold.it/200x200/a00)
}
#pickup2 > a {
    background-image: url(http://placehold.it/200x200/0a0)
}
#pickup3 > a {
    background-image: url(http://placehold.it/200x200/00a)
}
#pickup article > h1 > a:hover,
#pickup article > h1 > a:focus {
    text-decoration: underline;
}

/* ------------------------------------------------------------
    #posts 関連
------------------------------------------------------------ */
section#posts h1#page-title {
    margin: 0 10px 20px 10px;
    padding: 0 0 0.2em 0;
    /**/
    font-size: 1.5em;
    text-align: center;
    /**/
    border-bottom: 1px solid #666;
}

/* ------------------------------------------------------------
    #widget 関連
------------------------------------------------------------*/
article.widget-card {
    margin: 20px 10px;
    /**/
    background-color: #fff;
    /**/
    border-radius: 5px;
}
/* ------------------------------------------------------------
    footer 関連
------------------------------------------------------------ */
#page-footer {
    border-top: 2px solid #e06a3b;
}
#page-footer > h1 {
    padding: 0.5em;
    text-align: center;
    font-size: 1.2em;
}
#page-footer > p {
    padding: 0.5em 0 1em 0;
    /**/
    text-align: center;
    font-size: 0.8em;
}