@charset "utf-8";

/*____webfont____*/

#panel .generic h2,
#head-area .sub-nav .toggle,
.head-area .navigation ul li a,
h3.section-title,
#tab1 ul.tab-list li,
#tab2 ul.tab-list li,
#tab3 ul.tab-list li,
#side .contact a,
#searchform input,
.aside,
.comments-tab h3,
#respond h3,
.rollover,
#commentform table input,
#commentform button,
#content .related h3,
#stickynav ul li a,
.content-share {font-family:'LacunaRegular', Arial, sans-serif;}

/*____Page layout___________________________*/

#wrapper{width: 100%;}
.all {margin: 0 auto;width: 93%;max-width: 1030px;}
#main{overflow:hidden;}
#side{width: 31.3333%;border-left:1px solid #eee;margin-left:-1px;border-right:1px solid #eee;}
#content{width: 68.65%;border-left:1px solid #eee;}

/*+++ Head area   +++++++++++++++++++++++++++++*/

#panel{display:none;background:#555;border:none ;font-size:12px;color:#333;}
#panel a{color:#343434;padding:3px 5px;}
#panel a strong{font-weight:bold;color:#747474;}
#panel .generic{padding:15px 0;}
#panel .generic h1,
#panel .generic h2{margin:10px 0;}
#panel .generic h1{padding-bottom:2px;padding-left:18px;font-size:16px;color:#272727;font-weight:bold;}
#panel .generic h2{font-size:16px;color:#3c3c3c;}
#panel .generic h2:before,
#panel .generic h2:after{letter-spacing: -2px;padding:0 5px;color:#3c3c3c;}
#panel .generic h2:before{content:"---";}
#panel .generic h2:after{content:"----------";}
#panel .generic img{margin-right:10px;}
#panel .generic .en{margin-top:30px;}
#panel .generic ul li{margin:3px 0;}
#panel .generic ul li a:hover{text-decoration:none;background:#666;}
#panel .generic ul li span{display:inline-block;width:100px;margin-right:5px;}
#panel .crumbs{background:#333;padding:5px 0;color:#555;font-size:14px;}
#panel .crumbs span{color:#55554d;display:inline-block;width:100px;padding:15px 25px;margin-right:30px;}
#panel .crumbs a{color:#777;}
#panel .crumbs .header_ellipsis{color:#55554d;background:#333333;padding:0;position: relative;top: 4px;overflow: hidden;margin-right:0px;display: inline-block;width:43%;white-space: nowrap;text-overflow: ellipsis;-webkit-text-overflow: ellipsi;}
#head-area .sub-nav{float:right;padding:0;margin:0;width:21.2%;overflow:hidden;}
#head-area .sub-nav .toggle{display:inline-block;float:right;}
#head-area .sub-nav .toggle a{display:inline-block;color:#fff;margin-left:0;background:#333;margin-top:0;padding:2px 20px 2px 18px;font-size:11px;line-height:24px;}
#head-area .sub-nav .toggle a:hover{text-decoration:none;}
#head-area .sub-nav .close{display:none; color:#f5f25f !important;}

/*logo*/
.rollover a {color:#444;letter-spacing: 1em; transition: all 300ms 0s ease;position: relative;transition: 600ms;}
.rollover a:hover{letter-spacing:0.8em;text-decoration: none;}
.rollover a:after {content: attr(data-hover);position: absolute;left: 0;top: 0;opacity: 0;transition: 300ms;color: rgba(0,0,0,0.5);letter-spacing: -25px;width: 100%;text-align: center;}
.rollover a:hover:after {letter-spacing: 0px;opacity: 1;letter-spacing:0.9em;text-decoration: none;}
.rollover a:hover {color: transparent !important;letter-spacing:0.9em;text-decoration: none;}
.rollover {display: flex;justify-content: center;align-items: center;height:230px;cursor: default;position: relative;overflow: hidden;perspective: 1000px;-webkit-perspective: 1000px;-moz-perspective: 1000px;display: flex;-webkit-box-pack: center;-moz-box-pack: center;-ms-flex-pack: center;-moz-flex-pack: center;-webkit-justify-content: center;-moz-justify-content: center;justify-content: center;-webkit-box-align: center;-moz-box-align: center;-ms-flex-align: center;-moz-flex-align: center;-webkit-align-items: center;-moz-align-items: center;align-items: center;text-align: center;}


#head-area{background:#fafafa;border-top:1px solid #333;}
.head-area .cp{margin:0 0 61px 40px;}
.head-area{width: 100%; border-bottom: 1px solid #eee;}
.head-area .flip{margin-bottom:30px;}
.head-area .navigation{width:100%;max-width:1030px;}
.head-area .navigation ul{width:100%;max-width:1030px;list-style-type:none;text-align:center;border-top:1px solid #eee;border-right:1px solid #eee;border-left:1px solid #eee;font-size:0;display: flex;-webkit-flex-wrap: nowrap;flex-wrap: nowrap;}
.head-area .navigation ul li{display:inline-block;font-size:13px;width: 100%}
.head-area .navigation ul li a{background:#fafafa;display:block;;font-weight: bold;padding:18px 0;margin:0;border-left:1px solid #eee;width:100%;z-index:2;color:#bbb;transition: all 300ms 0s ease;}
.head-area .navigation ul li a:hover{text-decoration:none;color:#737373;letter-spacing: 0.2em;}
.head-area .navigation ul li.first{/**/}
.head-area .navigation ul li.first a{border-left:none;}
/* .head-area .navigation ul .main-nav-books a{border-right:1px solid #eee;} */
.head-area .navigation ul li.current_page_item{border-bottom:1px solid #fff;margin-bottom:-1px;background:#fff;}
.head-area .navigation ul li.current_page_item a{color:#737373}
/*dropdown*/
.head-area .navigation ul .main-nav-others {color: #555;position: relative;top:0;z-index:100;}

/*hover*/
#head-area .main-nav-home a:hover{background:#fff ;color:#888;}
#head-area .main-nav-wp a:hover{background:#fff ;color:#ea4335;}
#head-area .main-nav-jquery a:hover{background:#fff;color:#0092ff;}
#head-area .main-nav-resource a:hover{background:#fff;color:#75bd3f;}
#head-area .main-nav-books a:hover{background:#fff;color:#ff7b0f;}
#head-area .main-nav-job a:hover{background:#fff;color:#faf5f1;}
#head-area .main-nav-press a:hover{background:#fff;color:#f3f5fa;}
#head-area .main-nav-css a:hover{background:#fff;color:#7d4297;}

/*hover reset*/
#head-area li.current_page_item a,
#head-area li.current_page_item a:hover{background:#fff;}

/*sticky navigation*/
#stickynav {transition: all 300ms 0s ease;position: fixed;width:100%;top: 0px;left: 0px;display: none;background-color: #fff;color: #333;border-bottom: 1px solid #eee;z-index: 999999;padding:  0;opacity: 0.4;}
#stickynav:hover{opacity: 1;}
#stickynav ul{display: flex;-webkit-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: space-between;justify-content: space-between;margin-right:auto ;margin-left:auto;    width: 93%;max-width: 1030px;border-left: 1px solid #eee;border-right: 1px solid #eee;}
#stickynav ul li{list-style-type: none;text-align: center;display: inline-block;width: 100%;}
#stickynav ul li a{letter-spacing: 1px ;color:#888;display:block;padding: 15px 0;transition: all 300ms 0s ease;font-size: 12px}
#stickynav ul li a:hover{text-decoration: none;background: #fafafa;letter-spacing: 0.2em;}
#stickynav:hover ul li a{font-weight: bold;border-right: 1px solid #eee;}
#stickynav:hover ul li.sn_home a{}
#stickynav:hover ul li.sn_wordpress a{color:#ea4335;}
#stickynav:hover ul li.sn_jquery a{color:#0092ff;}
#stickynav:hover ul li.sn_css a{color:#7d4297;}
#stickynav:hover ul li.sn_resource a{color:#75bd3f;}
#stickynav:hover ul li.sn_book a{color:#ff7b0f;}
#stickynav:hover ul li.sn_gotop a{border-right: none;}

/*+++ Side colum   ++++++++*/
/*side search*/
#searchform input#s{margin:0;width:90.5%;padding:18px 15px;border:none;    font-size: 16px;}
#searchform .input-line{margin:0;border-bottom:1px solid #eee;}
#searchform .guide-tip{border-top:1px solid #eee;margin:0 15px;padding:15px 0;}
#searchform .guide-tip p{margin-bottom:15px;}
#searchform .guide-tip a,
#searchform .guide-tip p button{margin-left:25px;color:#333;border:1px solid #eee;background:#fafafa;padding:2px 5px;cursor:pointer;fontsize:12px;}
#searchform .guide-tip a:hover,
#searchform .guide-tip p button:hover{text-decoration:none;background:#eee;}
#searchform .guide-tip ul{border:none;}
#searchform .guide-tip ul li{border:none;margin-bottom:5px;}
#searchform .guide-tip input{width:12%;vertical-align:middle;}

/*side posts*/
#side h3.section-title {padding:35px 0; font-size:13px;font-weight:normal;border-bottom: 1px solid #eee;text-align: center;letter-spacing: 0.1em;font-weight: bold;}
#side h3.section-title  .side-headding {    border-bottom: 1px solid #eee;}
#side h3.section-title:first-letter{color:#f55050;}
#side ul{list-style-type:none;padding:0;margin:0;border-bottom:1px solid #eee;}
#side ul li {margin:0;width:100%;border-top:1px solid #eee;}
#side ul.tab-list li{border-top:none;}
#side ul li a{padding: 10px 15px ;width:auto;display:block; font-size:12px;color:#666;margin:1px 0;transition: all 300ms 0s ease;}
#side ul li a:hover{background:#efefef;color:#111; text-decoration: none;}
#side ul li ul{list-style-type:circle;border-top:1px solid #eee;border-bottom:none;}
#side ul li ul li{border:none;}
#side ul li ul li a{padding: 0px 35px;font-size:11px;}
#side ul.tab-list{border-bottom:none;}
#side .tags{padding:15px;margin:0;font-size:0;text-align:center;border-top:1px solid #eee;border-bottom:1px solid #eee;}
#side .tags a{display:inline-block;width:27%;padding:1.5% 2%;margin:0.5%;font-size:10px !important;background:#fafafa;border:1px solid #eee;color:#333;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;-webkit-text-overflow: ellipsi;}
#side .tags a:hover{background:#eee;text-decoration:none;}
#side ul.resource_list li:nth-child(1){border-top: none }

/*side ads*/
#side .side-box{margin:0 auto;max-width:300px;}
#side .gads{padding:15px 11px;margin:0;border-bottom:1px solid #eee;}
#side .side-first-header{border-top:1px solid #eee;}
#side .side-ads-a,.side-ads-b {margin:0;padding:0;font-size:0px;border:0;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-around;   justify-content:space-around;}}
#side .side-ads-a img{max-width:100%;}
#side img:hover{opacity: 0.8;}
#side .side-ads-a{border-bottom:1px solid #eee;text-align: center;}
#side .side-ads-a div{width: 50%;}
#side .side-ads-a div:first-child{border-right:1px solid #eee;}
#side .side-ads-a a,.side-ads-b a{display:inline-block;padding: 10% ;}
/* #side .ads-a{border-right:1px solid #eee;} */




/*+++ Foot area   +++++++++++++++++++++++++++++*/

#footer{width: 100%; clear:both;border-top:1px solid #eee;}
.footer {border:1px solid #eee;border-top:none;margin:0 -1px;}
.footer h3{text-align:center; margin-bottom:20px;}
.footer h3 span{border-bottom:1px solid #eee;width:35%;display:inline-block;padding-bottom:5px;}

.footer ul.box-three{display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-around;   justify-content:space-around;}
.footer .footer_box {padding-top: 3em;padding-bottom: 5em;width: 30%;    text-align: center;}
.footer  ul{list-style-type: none;margin: 0;padding: 0;}
.footer ul.flexbox li {width: 15%;}

.footer .footer_box ul li img:hover{opacity:0.5;}

.footer figure {margin-top: 0;}
.footer .tumblr{list-style-type:none;}
.footer .tumblr img{vertical-align:bottom;}
.footer .tumblr li{display:inline-block;margin: 0 8px 8px 0 ;padding: 3px ;background: #fff ;border: 1px solid #ddd ;}
.footer .others{margin: 0}
.footer .others li {margin-bottom: 5px;}
.footer .footer_contact_link{display:block;padding:7px;text-align: center;background:#fafafa;margin-top:40px;color:#a9b0c4;border:1px solid #eeeeee;border-right:none;}
.footer .footer_contact_link:hover{background:#efefef;text-decoration: none;color:#444444;}
.footer .copyright{text-align: center;font-size: 10px;padding:15px 0;border-top:1px solid #eee;letter-spacing: 0.2em;font-weight: bold;}
/*+++ Other area   +++++++++++++++++++++++++++++*/

.aside{border-bottom: 1px solid #eee;padding:18px 20px 17px 20px;font-size:11px;border-left:1px solid #eee;border-right:1px solid #eee;}
.aside a{display:inline-block;padding:2px 10px;background:#fafafa;color:#111;border:1px solid #eee;border-left:2px solid #ddd;}
.aside a:hover{text-decoration:none;background:#eee;border:1px solid #eee;border-left:2px solid #666;}
.aside strong{font-weight: bold;}
.aside .post-day{display:inline-block;margin-right:45px;border-bottom:2px solid yellow; }
.aside .post-category a{margin-left:5px;}

/* SNS */
.share {margin-top : 40px;width: 100%;}
.share ul {margin : 0;padding : 0;list-style : none;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;}
.share li a {display : block;padding : 18px;color : #fff;font-size: 100%;font-weight: bold;text-decoration : none;text-align : center;transition: all 300ms 0s ease;}
.share li a:hover {opacity :0.8;color : #fff;letter-spacing: 0.2em}
.share li a:visited{ color: #fff;}
.share ul:after {content : "";display : block;clear : both;}
.tweet a{background-color : #55acee;}
.facebook a{background-color : #315096;}
.googleplus a{background-color : #dd4b39;}
.hatena a{background-color : #008fde;}
.line a{background-color: #00c300;}
.pocket a{background-color :#f03e51;}
.rss a{background-color: #ff8c00;}
.feedly a{background-color: #6cc655;}
.share li {width : 25%;margin : 0;}


/*_____Arcive______________________*/
div.taxonomies .post-items{padding: 15px 15px 15px 0;}
div.taxonomies a{padding-left:20px;}
.sample{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;-webkit-text-overflow: ellipsis;-o-text-overflow: ellipsis;}

/*tab*/
.panelwrap {margin:0;}
#tab1 ul.tab-list,
#tab2 ul.tab-list,
#tab3 ul.tab-list {margin:0;padding:0;text-align:center;display: flex;-webkit-flex-wrap: nowrap;flex-wrap: nowrap;}
#tab1 ul.tab-list li,
#tab2 ul.tab-list li,
#tab3 ul.tab-list li {list-style:none;font-size:13px;display:inline-block;width:33.33%;border-right:1px solid #eee;margin:0;}
#tab3 ul.tab-list li{width:33.33%;}
#tab3 ul.tab-list li.last{border-right:none;}
#tab1 ul.tab-list li.selected,
#tab2 ul.tab-list li.selected,
#tab3 ul.tab-list li.selected {/**/}
#tab1 ul.tab-list li a,
#tab2 ul.tab-list li a,
#tab3 ul.tab-list li a {color:#bbb;text-decoration:none;background:#fafafa ;}
#tab1 ul.tab-list li.selected a,
#tab2 ul.tab-list li.selected a,
#tab3 ul.tab-list li.selected a{background:#eee ; color:#111;}
#tab1 ul.tab-list li a:hover,
#tab2 ul.tab-list li a:hover,
#tab3 ul.tab-list li a:hover{color:#111;}
#side ul.tab-list li.last{border-right:none ;}
#tab2{overflow: hidden;}
::-webkit-scrollbar {width:8px;background:#eee;}
::-webkit-scrollbar-track {background:#eee;}
::-webkit-scrollbar-thumb {background:#ddd;}
::-webkit-scrollbar-thumb:hover{background:#ccc;box-shadow:1px 1px 8px #666 ;}