@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,
#commentform table input,
#commentform button,
#content .related h3,
.content-share {font-family:'LacunaRegular', Arial, sans-serif;}

/*____Page layout___________________________*/

#wrapper{width: 100%;}
.all {margin: 0 auto;width: 93%;max-width: 1030px;}
#main{border-left:1px solid #eee;border-right:1px solid #eee;overflow:hidden;}
#side{width: 31.3333%;border-left:1px solid #eee;margin-left:-1px;padding-bottom:25px;}
#content{width:68.5%;border-right: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:0;color:#555;font-size:14px;}
#panel .crumbs span{color:#333;display:inline-block;width:100px;background:#555;padding:15px 25px;margin-right:30px;}
#panel .crumbs a{color:#777;}
#panel .crumbs .header_ellipsis{color:#55554d;background:#333333;padding:0;margin-right:0px;display: inline-block;width:43%;white-space: nowrap;overflow: hidden;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 a.social_icon{display:inline-block;height:24px;margin-top:3px;}
#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 {position: relative;width: 150px;height: 150px;display:inline-block;left:15px;}
.front {z-index: 2;position: absolute;}
.back {z-index: 1;position: absolute;}
.rollover:hover .back, 
.rollover:focus .back {z-index: 2;}
.rollover:hover .front, 
.rollover:focus .front {z-index: 1;}
.fade .rollover .front {opacity: 1;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
.fade .rollover .back {opacity: 0;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
.fade .rollover:hover .front, 
.fade .rollover:focus .front {opacity: 0;}
.fade .rollover:hover .back, 
.fade .rollover:focus .back {opacity: 1;}
.flip .rollover {-webkit-perspective: 600px;-moz-perspective: 600px;perspective: 600px;}
.flip .cube {display:inline-block;height: 150px;width: 150px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-transform: rotateX(0) rotateY(0) rotateZ(0);-moz-transform: rotateX(0) rotateY(0) rotateZ(0);transform: rotateX(0) rotateY(0) rotateZ(0);-webkit-transition: .6s;-moz-transition: 1s;transition: 1s;}
.flip .front {-webkit-transform: translate3d(0,0,1px);-moz-transform: translate3d(0,0,1px);transform: translate3d(0,0,1px);}
.flip .back {-webkit-transform: rotateY(180deg) translate3d(0,0,0);-moz-transform: rotateY(180deg) translate3d(0,0,0);transform: rotateY(180deg) translate3d(0,0,0);}
.flip .rollover:hover .cube, 
.flip .rollover:focus .cube {-webkit-transform: rotateY(180deg);-moz-transform: rotateY(180deg); transform: rotateY(180deg);}
#head-area{background:#eee url("../img/bg.gif");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:1029px;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;margin-left:-1px;}
.head-area .navigation ul li{display:inline-block;min-width:20%;font-size:13px;}
.head-area .navigation ul li a{background:#fafafa;display:inline-block;padding:10px 0;margin:0;border-left:1px solid #eee;width:100%;z-index:2;color:#737373;}
.head-area .navigation ul li a:hover{text-decoration:none;}
.head-area .navigation ul li.first{/**/}
.head-area .navigation ul li.first a{border-left:none;}
.head-area .navigation ul .main-nav-others a{border-right:1px solid #eee;padding:-1px;}
.head-area .navigation ul li.current_page_item{border-bottom:1px solid #fff;margin-bottom:-1px;background:#fff;}

/*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:#eee ;}
#head-area .main-nav-wp a:hover{background:#fbf4f8 ;}
#head-area .main-nav-jquery a:hover{background:#f3f5f8;}
#head-area .main-nav-resource a:hover{background:#f1f5f2;}
#head-area .main-nav-books a:hover{background:#fbfaf4;}
#head-area .main-nav-job a:hover{background:#faf5f1;}
#head-area .main-nav-press a:hover{background:#f3f5fa;}

#head-area .main-nav-others:hover a.main-nav-other-dropdown{background:#fff;}
#head-area .main-nav-others:hover a.main-nav-other-dropdown:before{content:"▲";position: absolute;left:30%;}
#head-area ul.dropdown-submenu{display:block;min-width:206px;position: absolute;bottom: 38px;left: 0;z-index: 9999;display: none;list-style-type:none;margin:0px;padding:0px;border:1px solid #eee;border-top:none;}
.head-area .navigation ul a.main-nav-other-dropdown {z-index: 110;cursor:pointer;}
.head-area .navigation ul li ul.dropdown-submenu li{width:100%;}
.head-area .navigation ul li ul.dropdown-submenu li a{border-top:1px solid #eee;border-left:none ;}


/*hover reset*/
#head-area li.current_page_item a,
#head-area li.current_page_item a:hover{background:#fff;}
#head-area ul.dropdown-submenu li.current_page_item a:before{content:"→";position: absolute;left:10%;}

/*+++ Side colum   ++++++++*/
/*side search*/
#searchform input#s{margin:0;width:90.5%;padding:20px 15px;border:none;}
#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 {border-top: 1px solid #eee;margin:30px 0 0;padding:0 0 0 15px; height:18px;font-size:28px;font-weight:normal;}
#side h3.section-title  .side-headding {position: relative;top: -24px;padding: 0 15px;background:white;color:#444;}
#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 li a{padding: 10px 15px ;width:auto;display:block; font-size:13px;color:#666;margin:1px 0;} 
#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 contact*/
#side .contact a{font-size:18px;}
#side .contact a img{display:inline-block;margin-right:20px;}
#side .contact a:hover:after{font-size:10px; margin-left:30px;color:#777;}
#side .contact a[rel="contact"]:hover:after{content:"お問い合わせはコチラ";}
#side .contact a[rel="twitter"]:hover:after{content:"不定期でつぶやいてます";}
#side .contact a[rel="facebook"]:hover:after{content:"Facebookページです";}
#side .contact a[rel="google"]:hover:after{content:"一応やってます";}

/*side ads*/
#side .side-box{margin:0 auto;max-width:300px;}
#side .gads{padding:15px 11px;margin:0;border-bottom:1px solid #eee;text-align: center}
#side .gads a img:hover{opacity: 0.7}
#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;}
#side .side-ads-a,.side-ads-b img{max-width:100%;}
#side .side-ads-a{border-bottom:1px solid #eee;border-top:1px solid #eee;}
#side .side-ads-b{border-bottom:1px solid #eee;}
#side .side-ads-a a,.side-ads-b a{display:inline-block;padding: 5.5% ;}
#side .ads-a{border-right:1px solid #eee;}
#side .ads-c{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;}
.footer .unit {padding-top: 3em;padding-bottom: 5em;}
.footer .unit ul{list-style-type: none}
.footer .unit ul li img:hover{opacity:0.5;}
.footer .unit strong{font-weight: bold !important}
.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 #eee ;box-shadow: 0 1px 5px #888 ;}
.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;}

/*+++ Other area   +++++++++++++++++++++++++++++*/

.aside{border-bottom: 1px solid #eee;padding:12px 20px 11px 20px;font-size:11px;}
.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;padding-left:10px;}
.aside .post-category a{margin-left:5px;}

/*_____Arcive______________________*/
div.taxonomies .post-items{padding: 15px 15px 15px 0;}
div.taxonomies a{padding-left:20px;}

/*____Breakpoint___________________________*/

@media only screen and (max-width:1100px) {
	#head-area .sub-nav{width:33%;}
#head-area .sub-nav .toggle a{max-width:100%;}
  .head-area .navigation ul li{font-size:10px;min-width:18%;}
  #head-area ul.dropdown-submenu{display:block;min-width:180px;position: absolute;bottom: 34px;}
   #side .side-ads-a a,#side .side-ads-b a{display: block;width:100%;text-align: center;border: none;border-bottom: 1px solid #eee;padding:2%}
  .side-ads-a{border: none}
}
@media only screen and (max-width:768px) {
  .box-four .unit {width: 50%;}
  .intro .unit {width: auto;display: block;}
  .head-area .navigation ul li{display:inline-block;min-width:100%;font-size:13px;border: none;border-top:1px solid #eee;}
  #head-area .sub-nav .toggle a{padding:2px;display: none;}
 
}

@media only screen and (max-width: 480px) {
  footer .unit:nth-child(3) {border-left: none;}
  .generic .unit {width: auto;display: block;}
}

@media only screen and (min-width: 769px) {
  .demo-introduction {padding-left: 26%;}
}

/*tab*/
.panelwrap {overflow:hidden;margin:0;}
#tab1 ul.tab-list,
#tab2 ul.tab-list,
#tab3 ul.tab-list {margin:0;padding:0;text-align:center;font-size:0;}
#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.04%;border-right:1px solid #eee;margin:0;}
#tab3 ul.tab-list li{width:33.194%;}
#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 !important; 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 !important;}

.bottom_ads{margin:20px;}

::-webkit-scrollbar {width: 12px;background:#eee;}
::-webkit-scrollbar-track {background:#eee;}
::-webkit-scrollbar-thumb {background:#ddd;}
::-webkit-scrollbar-thumb:hover{background:#ccc;box-shadow:1px 1px 10px #666 ;}