@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: SIMPLESTER-Ver4
Template: stinger5ver20150505b
Theme URI: http://degitekunote.com/
Description: STINGER5の究極のシンプル子テーマ「シンプレスター」です。
Author: こふす
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Version: 4.0
---------------------------------------------------------*/
@import url('../stinger5ver20150505b/style.css');

/*----
[カラー]
テーマ内のメインカラー(デフォルトでは赤色)を変更する時は「#F8183A」、
サブカラー（デフォルトでは青色でトップページのタグの色）を変更する時は「#084EAB」を検索し、
好きな色の値に置換して下さい。複数項目あります。
-----*/

* {font-family: "Open Sans","游ゴシック","Yu Gothic","ヒラギノ角ゴ Pro W3","Hiragino kaku gothic Pro W3",Verdana,Osaka,arial,sans-serif}

/*wrapper 周り
--------------------*/
#wrapper {max-width: 1116px;}
main {border-radius:0px;background: none repeat scroll 0% 0% transparent;padding: 0px;}
#content {padding-top:12px;}

/*header 周り
--------------------*/
.sitename img {max-height: 25px;}
header {text-align:center}
header h1 {margin:0;}
header .sitename {font-size:20px;display: inline-block;margin-bottom:0px}
header .descr {padding:0}
#headimg {padding-top:10px;}
#headimg img.size-full, #headimg img.size-large {margin:0;}
/*pagetop-btn 周り
--------------------*/
#page-top {right:10px;}
#page-top a {opacity: 1;background: none repeat scroll 0% 0% #F8183A;border-radius: 50%;padding: 12px;width: 14px;height: 14px;border:4px solid #fff;}
#page-top a:hover {background: none repeat scroll 0% 0% #F8183A;color: #FFF;opacity: 0.4;}

/*index 周り
--------------------*/
#topnews dl:nth-of-type(2n) {flex-direction: row-reverse;-webkit-flex-direction: row-reverse;}
#topnews dl {padding: 12px;transition: all 0.4s ease;position:relative;border-bottom: 2px solid #eaeaea;background-color: #fff;display: flex;display: -webkit-flex;margin-bottom:25px;}
#topnews dl:first-child {padding-top:10px;}
#topnews dl:last-child {border-bottom: 2px solid #eaeaea;}
#topnews dd {padding: 0px;display:flex;flex-direction:column;display:-webkit-flex;-webkit-flex-direction:column;margin:0 25px;width:100%;}
#topnews .clearfix dd p {margin:0}
a:hover img {opacity: 1 !important;}
#kanren .clearfix dd p {margin:0}
#topnews dd h3 {order:2;-webkit-order:2;font-size: 125%;}
#topnews dd .blog_info {order:1;-webkit-order:1;margin-bottom:5px;}
#topnews dd .smanone {order:3; -webkit-order:3;}
#kanren dd h5 {font-size:15px;word-break: break-all;}
#topnews dl:before {font-family: FontAwesome;content: "\f004";position: absolute;display: none;margin-left: -20px;margin-top: -20px;background-color: #F8183A;padding: 8px;border-radius: 50%;border:4px solid #fff;font-size:18px;}
#topnews dl:hover:before{-webkit-animation:blink 0.8s ease-in-out infinite alternate;-moz-animation:blink 0.8s ease-in-out infinite alternate;animation:blink 0.8s ease-in-out infinite alternate;color:#fff;display: inherit;}

/*animation*/
@-webkit-keyframes blink{ 0% {opacity:0.2;}100% {opacity:1;} }
@-moz-keyframes blink{ 0% {opacity:0.2;}100% {opacity:1;} }
@keyframes blink{ 0% {opacity:0.2;}100% {opacity:1;} }

/*個別記事 周り
--------------------*/
.post {background-color: #fff;padding: 20px;}
img.size-full, img.size-large {margin-bottom:20px;}

/*ページネーション　周り
--------------------*/
div.pagination {display: inline-block;background: none !important;margin-top: 30px;}
div.pagination a {color:#fff !important;border-radius:50%;margin: 5px !important;padding: 0px !important;width: 22px;height: 22px;font-weight: normal !important;line-height: 22px;text-align: center;}
div.pagination a:hover {opacity:0.8}
div.pagination span, div.pagination a {background-color: #F8183A !important;border: 4px solid #fff;margin:5px;}
div.pagination span.current {background-color: #fefefe !important;border-radius:50%;margin: 5px !important;padding: 0px !important;width: 22px;height: 22px;font-weight: normal !important;line-height: 22px;text-align: center;}
.pagination .current {color:#333}

/*タイポグラフィ 周り
--------------------*/
.post h3{ border-bottom:1px dotted #F8183A}
p{ font-size:15px;  line-height:27px;  margin-bottom:20px}
.post a{text-decoration:none;  border-bottom:1px dashed}
.post blockquote{ margin-right:0;  border-left:3px solid #CCC}
.post ul li{ font-size:14px;  line-height:27px;  list-style-type:square}
.post ol{padding-left:30px}
.wp-caption-text:before{content:"■ "}/*キャプション文字列の前のアイコン*/
table, table tr td, td, th, .post table{ border-color:#ccc}

/*index メタ周り
--------------------*/
#topnews .clearfix dd .blog_info p {font-size:10px;}
.blog_info p a[rel="category tag"], .blog_info p a[rel="category"] {margin-left:6px;background-color: #F8183A;padding: 1px 5px;border-radius: 2px;color:#fff;white-space: nowrap;opacity:1;}
.blog_info p a[rel="tag"] {background-color: #084EAB;padding: 1px 5px;border-radius: 2px;color:#fff;white-space: nowrap;opacity:1;}
.blog_info p a:hover {color:#fff;opacity:0.8;}
.blog_info .time_idx{padding:0 6px;}
.pcone {color:#fff}/*tagのコンマを消すため*/

/*icon font 基本宣言
--------------------*/
.blog_info p .fa {color:#666}
.tagst .fa-tags {color:#000;margin-right:15px;}

/*navigatin 周り
-----------------------------*/
nav {padding: 12px 0px 0px;}
nav li {padding: 10px 12px;transition: all 0.4s ease;background:none;margin: 5px 5px 0px 0px; border-left:none;position:relative;border-bottom: 2px solid #EAEAEA;}
nav li a, nav li a:hover {text-decoration:none;}
nav li:hover {box-shadow: inset 0px -2px 0 0 #F8183A;}
nav li:hover > a{color:#F8183A}
nav li li {padding:10px;}

.menu-item a[title="link"]:before{font-family: FontAwesome;margin-right:5px;content:"\f0ac";}/*リンクアイコン*/
.menu-item a[title="home"]:before{font-family: FontAwesome;margin-right:5px;content:"\f015";}/*ホームアイコン*/
.menu-item a[title="tag"]:before{font-family: FontAwesome;margin-right:5px;content:"\f02c";}/*タグアイコン*/
.menu-item a[title="page"]:before{font-family: FontAwesome;margin-right:5px;content:"\f02e";}/*固定ページアイコン*/
.menu-item a[title="cate"]:before{font-family: FontAwesome;margin-right:5px;content:"\f07c";}/*カテゴリーアイコン*/
.menu-item a[title="envelope"]:before{font-family: FontAwesome;margin-right:5px;content:"\f0e0";}/*問い合わせーアイコン*/

.acordion_tree li a {background-color: #FFF;margin: 5px;padding: 5px;display: inline-table;}
.acordion_tree li {border:none;display: flex;flex-direction: column;display: -webkit-flex;-webkit-flex-direction: column;margin-bottom:5px;padding:0px 5px;}
.acordion_tree li li{float: none;border:none;padding: 0;margin-bottom:0;}
.sub-menu {background: none;top:100%;}

nav li {background-color:#fff;}
nav li:hover > .sub-menu {display: flex !important}
.sub-menu { position: absolute; background: #fff; display:none;z-index: 10;flex-direction: inherit;width: inherit;border-bottom: 2px solid #eaeaea;border-top: 1px solid #eaeaea;}
.sub-menu:after { bottom: 100%; left: 10%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(186, 213, 155, 0); border-bottom-color: #f9f9f9; border-width: 5px; margin-left: -5px;}
.sub-menu li {margin: 0px}
.sub-menu li:hover {box-shadow: 2px 0px 0px 0px #F8183A inset;}

/*artical メタ周り
--------------------*/
div#breadcrumb {color:#ddd;}
#breadcrumb div a, div#breadcrumb a, .tagst a {text-decoration: none;padding: 4px 7px;border-radius: 2px;margin-right: 5px;color: #818181;background-color: #f9f9f9;transition: all 0.4s ease;border-bottom: 2px solid #eaeaea;font-size:12px;white-space: nowrap;}
#breadcrumb div a:hover, div#breadcrumb a:hover, .tagst a:hover {background-color:#F8183A;color:#fff;}
.blogbox {background-color: #f8f8f8 !important;border-left: 5px solid #ccc !important;border-top:none;border-bottom:none;padding: 10px;}
div#breadcrumb {padding: 10px 0px 5px;margin-bottom: 20px;}
.tagst {color:#fff}

/*artical 周り
--------------------*/
.entry-title {margin-bottom:10px;}

/*page 周り
--------------------*/
.contentsbox {font-size: 13px;background-color: #f5f5f5;padding: 5px 10px;display: inline-block;border-radius: 2px;border: 1px solid #eee;position: relative;}
.contentsbox:before {font-family: FontAwesome;content: "\f129";position: absolute;left: 0;margin-top: -20px;background-color: #084EAB;width: 20px;height: 20px;line-height: 20px;text-align: center;margin-left: -15px;border-radius: 50%;color: #fff;border: 3px solid #fff;}
.contentsbox p {margin:0;font-size:12px;color:#555}

/*サイドバーRSS周り
--------------------*/
.rssbox a {background-color: #F8183A;padding:7px 10px}
.fa-rss-square {margin-right:5px;}

/*サイドバー検索周り
--------------------*/
#s{padding: 5px 65px 5px 10px;background: none repeat scroll 0% 0% #f8f8f8 !important;border: 1px solid #e1e1e1;}

/*サイドバー（NEWPOST）周り
--------------------*/
#kanren dl {margin-bottom: 10px;padding: 20px;background-color: #F9F9F9;transition: all 0.4s ease;border:1px solid #eee;position:relative;}
#kanren dl:hover {box-shadow: inset 0px -5px 0 0 #F8183A;}

/*サイドバー タイトル
--------------------*/
#side aside h4 {border-bottom: 3px dashed #ddd;padding: 5px 10px;margin: 20px 0px 10px 0px;}
#side aside h4:before{font-family: FontAwesome;margin-right:5px;content:"\f067";}

/*サイドバー カテゴリー
--------------------*/
aside #mybox ul li ul li a{color: #333;text-decoration: none;}
aside #mybox ul li ul li {font-size: 14px;line-height: 27px;background-color: #f9f9f9;padding: 5px 10px;margin-bottom: 10px;transition: all 0.4s ease;border:1px solid #eee;border-bottom: 2px solid #EAEAEA;}
aside #mybox ul li ul li:hover {padding-left: 15px;box-shadow: inset 5px 0 0 #F8183A;}

/*サイドバー tagクラウド
--------------------*/
aside ul li .tagcloud a{ text-decoration:none;  color:#333; padding:3px;  border-radius:2px; white-space:nowrap; transition:all 0.4s ease; }
aside ul li .tagcloud a:hover{background-color:#F8183A; color:#fff}

/*sns btn 周り
--------------------*/
.sns{position:relative;display: flex;justify-content: center;}
.snsb{display:flex; justify-content:space-between; display:-webkit-flex; -webkit-justify-content:space-between; text-align:center; padding:15px 0px 10px; padding:10px;background-color: #fff;border:1px solid #eee;border-bottom: 2px solid #eaeaea;}
.sns .snsb li {margin: 0 10px;}
.post .sns .snsb.clearfix {background-color: #f9f9f9;}

/*記事下の関連記事 周り
--------------------*/
#kanren a {border:none;}

/*footer 周り
--------------------*/
#footer h3{ margin-bottom:10px;  font-size:13px;  font-weight:normal;  color:#555}
footer{text-align:center; margin-top:50px; border-top:3px dashed #ddd; padding:30px 0px;}
#footer .copy{ font-size:12px;  color:#999;  line-height:15px;  opacity:0.5; margin:0}

/*プラグイン 修正
--------------------*/
/*Key Shortcut Formatter*/
.key{padding: 2px 6px !important;margin: 0px 3px;}
/*toc*/
div#toc_container a {border:none}
div#toc_container {background-color: #f9f9f9 !important;padding: 20px; border:none;}

/*media Queries PCサイズ（最低1150pxのサイズ）
----------------------------------------------------*/
@media only screen and (min-width: 1150px) {
header .sitename {padding: 60px 0px 0px}
.snsb:before {font-family: FontAwesome;content: "\f164";height: 17px;background-color: #F8183A;padding: 9px;border: 5px solid #fff;line-height: 17px;font-size: 17px;color: #FFF;width: 17px;border-radius: 50%;margin-left: -70px;margin-top: 10px;position: absolute;box-shadow: 0px 1px 1px #eaeaea;}

nav ul {display: flex;}
#topnews {-moz-column-count: 1;-webkit-column-count: 1;column-count: 1;-moz-column-gap: 1em;-webkit-column-gap: 1em;column-gap: 1em;}
.post {background-color: #fff;padding: 20px 40px;}
div.post #kanren {display: flex;flex-flow: row wrap;justify-content: space-between;}
div.post #kanren dl {width:43%}
#kanren dl:last-child {margin-bottom: 10px;border: 1px solid #EEE;}
.post aside > div:first-child {display:flex;justify-content: space-between;}
.post .smanone {padding-top: 0 !important;}

}

/*media Queries PCサイズ（最低780pxのサイズ）
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
#side aside {width: 336px;}
#contentInner {margin-right: -336px;}
main{margin-right: 356px;}
#topnews dd {
  padding:0;
  max-width: 540px;
}
.sub-menu{width: -moz-max-content;width: -webkit-max-content;width:max-content;}

}

/*media Queries タブレットサイズ（最高780pxのサイズ）
----------------------------------------------------*/
@media only screen and (max-width: 780px) {
#topnews dd {padding:0}
.sub-menu {position: relative;background: none repeat scroll 0% 0% #FFF;box-shadow: none;display: inline;z-index: inherit;}
nav li:hover > .sub-menu {display: inline !important;}
nav li:hover {box-shadow:none;}

}

/*media Queries タブレットサイズ（最低380pxのサイズ）
----------------------------------------------------*/
@media only screen and (max-width: 380px) {
#topnews dd {padding:0}
#topnews dt {min-width:100px}
#topnews dd h3 {font-size:100%;word-break: break-all;line-height: 22px;}
#topnews .clearfix dd p {line-height: 18px;}
#breadcrumb div a, div#breadcrumb a, .tagst a {line-height:30px;}

}