@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: SIMPLESTER-Ver5
Template: stinger5ver20150505b
Theme URI: http://simplester.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: 5.0
---------------------------------------------------------*/
@import url('../stinger5ver20150505b/style.css');

/*
==========================================================================
【テーマ内カラー設定】
テーマ内のメインカラー(デフォルトでは赤色)を変更する時は「#FE654F」
サブカラー（デフォルトでは青色でトップページのタグの色）を変更する時は「#00A7E1」
を検索し、好きな色の値で置換して下さい。
==========================================================================
*/

@import url(http://fonts.googleapis.com/css?family=Quicksand:400, 700); 



.wpcf7-form input,
.wpcf7-form textarea {
    width: auto;
}


input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0;
width: auto !important;
}



span.wpcf7-list-item {
display: block;
}







* { font-family: 'Quicksand', "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , sans-serif;}
body{background-color: #f4f5f6;}

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

/*header 周り
--------------------*/
.sitename img{max-width:150px}
header{text-align:left; padding-top:65px}
header h1{margin:0}
header .sitename{font-size:30px; display:inline-block; margin-bottom:5px}
header .descr{padding:0}
#headimg{padding-top:10px}

/*pagetop-btn 周り
--------------------*/
#page-top{right:10px}
#page-top a{opacity:1; background:none repeat scroll 0% 0% #FE654F; border-radius:50%; padding:12px; width:14px; height:14px; border:4px solid #fff}
#page-top a:hover{background:none repeat scroll 0% 0% #FE654F; color:#FFF; opacity:0.4}

/*index 周り
--------------------*/
#topnews dl{padding:0; transition:all 0.4s ease; position:relative; border-bottom:2px solid #eaeaea; background-color:#fff; display:inline-flex; margin-bottom:25px;  flex-direction:row-reverse; width:100%; -webkit-flex-direction:row-reverse; display:-webkit-flex}
#topnews dl:first-child{padding-top:0px}
#topnews dl:last-child{border-bottom:2px solid #eaeaea; padding-bottom:0}
#topnews dd{padding:0px; display:flex; flex-direction:column; -webkit-flex-direction:column; display:-webkit-flex; margin:15px 25px 0px 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:21px; font-weight:bold; word-break:break-all}
#topnews dd .blog_info{order:1; -webkit-order:1; margin-bottom:10px}
#topnews dd .smanone{order:3; -webkit-order:3}
#kanren dd h5{font-size:15px; word-break:break-all; line-height:23px}
#topnews dt{width:100%; overflow:hidden}
#topnews dl:before{font-family:FontAwesome; content:"\f004"; position:absolute; display:none; margin-left:-20px; margin-top:-20px; background-color:#FE654F; padding:8px; border-radius:50%; border:4px solid #fff; font-size:18px}
#topnews dl:hover:before{z-index:99999999; -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}
#topnews dl:hover img{transform:rotate(2deg) scale(1.1)}
#topnews dl img{transition:.3s ease-in-out; transform:rotate(0) scale(1)}
@-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; overflow:initial}
img.size-full, img.size-large{margin-bottom:20px; max-width:100% !important}

/*ページネーション　周り
--------------------*/
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:30px; height:30px; font-weight:normal !important; line-height:30px; text-align:center}
div.pagination a:hover{opacity:0.8}
div.pagination span, div.pagination a{background-color:#FE654F !important; margin:5px; padding:9px 9px 9px 9px}
div.pagination span.current{background-color:#fefefe !important; border-radius:50%; margin:5px !important; padding:0px !important; width:31px; height:31px; font-weight:normal !important; line-height:31px; text-align:center}
.pagination .current{color:#000}

/*タイポグラフィ 周り
--------------------*/
.post >h1:nth-of-type(1), .post article >h1:nth-of-type(1){background-color:#f9fafb !important; padding:10px 10px 10px 20px; border-radius:4px}
.post h1, .post h4{background-color:#f9fafb; padding:10px 0px 10px 20px; border-radius:4px}
.post h2{position:relative; background:#f9fafb; color:#1a1a1a; font-size:20px; line-height:30px; margin-bottom:20px; padding-top:10px; padding-right:20px; padding-bottom:10px; padding-left:20px; border-radius:4px}
.post h2:after{content:''; position:absolute; border-top:10px solid #f9fafb; border-right:10px solid transparent; border-left:10px solid transparent; bottom:-10px; left:50px}
.post h2:before{content:''; position:absolute; border-top:10px solid #f9fafb; border-right:10px solid transparent; border-left:10px solid transparent; bottom:-10px; left:50px}
.post h3{border-bottom:1px solid #f9fafb}
.post h4{ padding:10px;  margin-bottom:10px;  background-color:#f9fafb; border-radius:4px}
p{font-size:16px;  line-height:27px;  margin-bottom:28px}
.post a{text-decoration:none;  border-bottom:1px dashed}
.post blockquote{margin-rightf:0;  border-left:3px solid #F4F5F6; background-color:#f9fafb}
.post blockquote p{font-size:14px}
.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:1px solid #f1f1f1}

/*index メタ周り
--------------------*/
#topnews .clearfix dd .blog_info p{font-size:13px; line-height:24px}
.blog_info p a[rel="category tag"], .blog_info p a[rel="category"]{background-color:#00A7E1; padding:3px 4px; border-radius:2px; color:#fff; white-space:nowrap; opacity:1; margin-right:2px}
.blog_info p a[rel="tag"]{background-color:#FE654F; padding:3px 4px; border-radius:2px; color:#fff; white-space:nowrap; opacity:1}
.blog_info p a:hover{color:#fff; opacity:0.8}
.pcone{color:#fff}

/*icon font 基本宣言
--------------------*/
.blog_info p .fa{color:#000}
.tagst .fa-tags{color:#000}

/*navigatin 周り
-----------------------------*/
nav{padding:19px 0px 0px}
nav li{padding:10px 12px; transition:all 0.2s ease; background:none;  border-left:none; position:relative; line-height:24px}
nav li a, nav li a:hover{text-decoration:none}
nav li:hover{box-shadow:inset 0px -1px 0 0 #FE654F}
nav li:hover >a{color:#FE654F}
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 8px; display:inline-table; border-radius:20px}
.acordion_tree li{border:none; display:flex; flex-direction:column; display:-webkit-flex; -webkit-flex-direction:column; margin-bottom:0px; padding:0}
.acordion_tree li li{float:none; border:none; padding:0; margin-bottom:0}
.sub-menu{background:none; top:100%}
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:1px 0px 0px 0px #FE654F inset}

/*artical メタ周り
--------------------*/
div#breadcrumb{color:#ddd; margin-bottom:13px}
div#breadcrumb >div:last-child a{background-color:#FE654F; color:#fff}
#breadcrumb div a, div#breadcrumb a, .tagst a{text-decoration:none; padding:8px 30px; border-radius:2px; margin-right:5px; color:#000; background-color:#fff; transition:all 0.4s ease; border-bottom:1px solid #e3e3e3; font-size:12px; white-space:nowrap; border-radius:3px}
.post #breadcrumb div a, .post #breadcrumb a, .tagst a{background-color:#f9fafb}
#breadcrumb div a:hover, div#breadcrumb a:hover, .tagst a:hover{background-color:#FE654F; color:#fff}
.blogbox{background:none !important; border-top:none; border-bottom:none; padding:6px 5px; position:absolute; top:18px; left:40px; border-radius:4px; display:inline-flex}
.blogbox p{font-size:15px; color:#000}
.tagst{color:#fff; top:70px; line-height:35px; margin-bottom:10px}

/*artical 周り
--------------------*/
article >h1.entry-title{ margin-top:0px}
.entry-title{margin-bottom:20px; margin-top:35px}
.post aside{order:6}
article >h2, section >h2{background-color:#fff; border-bottom:2px solid #eaeaea}
article >h2:before, article >h2:after, 
section >h2:before, section >h2:after{border-top:10px solid #fff}
.post table tr:nth-child(even){ background-color:#F4F5F6}

/*コメント 周り
--------------------*/
#comments{font-size:14px; line-height:20px; color:#333; margin-bottom:20px; border:none; background-color:#f9fafb !important}
#comments input[type="submit"]{background-color:#FE654F !important; color:#fff !important}

/*page 周り
--------------------*/
.contentsbox{font-size:13px; background-color:#f9fafb; 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:#00A7E1; 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}

/*サイドバー周り
--------------------*/
#side aside{border-bottom:2px solid #eaeaea}

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

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

/*サイドバー（NEWPOST）周り
--------------------*/
#kanren dl{margin-bottom:10px; transition:all 0.4s ease; position:relative; flex-direction:column; border-bottom:1px solid #F4F5F7}
#kanren dl:hover, #kanren dl:last-child:hover{box-shadow:inset 0px -1px 0 0 #FE654F}

/*サイドバー タイトル
--------------------*/
#side aside h4{padding:7px 13px; margin:20px 0px 10px 0px; font-size:18px}
#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:#f9fafb; padding:5px 10px; margin-bottom:10px; transition:all 0.4s ease}
aside #mybox ul li ul li:hover{padding-left:15px; box-shadow:inset 1px 0 0 #FE654F}

/*サイドバー 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:#FE654F; color:#fff}


/*記事下の関連記事 周り
--------------------*/
#kanren dt{ margin-bottom:10px}
#kanren dt img{width:100%}
#kanren a{border:none}
h3.point ~ #kanren dl{background-color:#f9fafb}

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

/*プラグイン 修正
--------------------*/
/*Key Shortcut Formatter*/
.key{font-size:14px !important; line-height:24px !important; margin:0 5px; border:none !important; background-color:#FE654F !important; text-shadow:none !important; color:#fff !important; border-radius:2px !important}
/*toc*/
div#toc_container a{border:none}
div#toc_container{background-color:#f9fafb !important; padding:20px; border:none}
/*Shortcodes Ultimate*/
.su-button-center a{border:none}


/*--- sns修正用 ---*/
.sns ul li {list-style-type:none;}
.sns a {border:none;}







.cta-inner {
    background: #000114;
}
.cta-inner {
    background: #0E0E0E;
    color: #ddd;
    border-top: 5px solid rgba(146, 146, 146, 0.3);
    padding: 30px 30px 60px;

}
.cta-inner p{
    font-size: 16px;
        line-height: 1.5;
color: #fff;
}
.cta-inner .cta_copy {
    text-align: center;
    color: #fff;
    margin-bottom:40px;
    background: none;
    font-size: 24px;
    padding: 0;
}
.cta-inner .cta_copy:before,
.cta-inner .cta_copy:after{
border:none;
}
.btn-wrap.aligncenter {
    text-align: center;
    margin-top: 30px;
}
.btn-wrap.lightning a {
    background: #C81C1C;
    border-color: #C81C1C;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}
.btn-wrap.big a {
    margin: 0px auto;
}
.cta-inner .btn-wrap a {
    box-shadow: none;
    margin-top: 1em;
    color: #fff;
    color: #FFFFFF;
    padding: 20px 120px;
    font-size: 16px;
    line-height: 44px;
    transition: all .2s;
font-family: "Lato", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
font-weight:bold;
}
.cta-inner .btn-wrap a:hover{opacity: 0.7;}
.d-1of2 {
    float: left;
    padding-right: 0.75em;
    width: 45%;

}
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}



/*media Queries PCサイズ（最低1150pxのサイズ）
----------------------------------------------------*/
@media only screen and (min-width:1150px){
nav ul{display:flex; justify-content:center}
#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; position:relative; margin-top:45px}
div.post #kanren{-moz-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-gap:1em; -webkit-column-gap:1em; column-gap:1em}
div.post #kanren > p{font-size:15px;}
div.post #kanren dl{display:inline-flex}
div.post #kanren dt{width:100%}
div.post #kanren dd{padding:0; margin:0 15px}
.post aside >div:first-child{display:flex; justify-content:center}
.post .smanone{padding-top:0 !important}
.post #breadcrumb{padding:20px 0px 10px 0px; margin-bottom:0; position:absolute; margin-top:-64px; background-color:#fff; width:100%; margin-left:-40px}
main >.post #breadcrumb{padding:25px 0px 14px 0px; margin-top:-75px}
main >.post{margin-top:55px}
/*ie*/
:root .sub-menu li a{display:flex\0}
:root .sub-menu li{background-color:#fff\0; border-bottom:2px solid #eaeaea\0; border-top:1px solid #eaeaea\0}
:root .sub-menu{border:none\0}
article >.post >#breadcrumb div:nth-child(1){margin-left:40px}
main >.post >#breadcrumb a:nth-child(1){margin-left:40px}
}

/*media Queries PCサイズ（最低780pxのサイズ）
----------------------------------------------------*/
@media only screen and (min-width:780px){
#side aside{width:336px; padding:0 20px; background-color:#fff}
#contentInner{margin-right:-397px}
main{margin-right:397px}
#topnews dd{padding:0}
.sub-menu{width:-moz-max-content; width:-webkit-max-content; width:max-content}
:root .acordion_tree li li{float:left\0}
.blogbox{position:relative; top:0; left:0}
.entry-title{margin-top:10px}
}

/*media Queries タブレットサイズ（最高780pxのサイズ）
----------------------------------------------------*/
@media only screen and (max-width:780px){
.cta-inner .btn-wrap a{padding: 20px 40px;}
#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}
.blogbox{position:relative; top:0; left:0}
header{padding-top:0}
#topnews .clearfix dd .blog_info p{font-size:10px; line-height:20px}
#topnews dd .blog_info{margin-bottom:5px}


.d-1of2 {
    float: none;
    padding-right: 0;
    width: 100%;
}
.cta-inner .cta_copy{padding:0;}


}

/*media Queries タブレットサイズ（最低415pxのサイズ）
----------------------------------------------------*/
@media only screen and (max-width:415px){
#topnews dd{padding:0}
#topnews dt{min-width:100px}
#topnews dd h3{font-size:100%; word-break:break-all; line-height:20px}
#topnews .clearfix dd p{line-height:18px}
#breadcrumb div a, div#breadcrumb a, .tagst a{line-height:30px}
#topnews .clearfix dd .blog_info p{line-height:15px}
.blog_info p a[rel="category tag"], .blog_info p a[rel="category"]{padding:1px 3px}
.blog_info p a[rel="tag"]{padding:1px 3px}
#breadcrumb div a, div#breadcrumb a, .tagst a{padding:8px 10px}
.entry-title{margin-top:20px}
nav{padding:10px 0px 0px}
.acordion_tree li{margin-bottom:0px}
.sub-menu{border:none; margin:0px 5px; margin-bottom:5px}
.acordion_tree li{padding:0}
.acordion_tree li a{padding:5px 8px; border-radius:20px}
nav li a, nav li a:hover{ background-color:#FE654F;  color:#fff}
}