/*
Theme Name: Word Press Lab Extention
Author: AD5
Author URI: http://ad5.jp/
Version: 1.0.1
Text Domain: wpx
*/

/*--------------------------------------------------------------
0.0 Color Policy
--------------------------------------------------------------*/
/*

AADD55
5958FF
56E8B6
E8AE4B
FF5776

*/


/*--------------------------------------------------------------
1.0 Normalize
--------------------------------------------------------------*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}

ul,ol {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}

a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; outline:none;}

del {text-decoration:line-through;}

abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}

table {border-collapse:collapse; border-spacing:0;}

input, select {vertical-align:middle;}

img {vertical-align:bottom; border:none; font-size:0; line-height:0;}

em {font-style:normal;}

body {-webkit-text-size-adjust:none; font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ƒqƒ‰ƒMƒmŠpƒS ProN W3', 'ƒ‚ƒŠƒTƒ VƒS R', 'Droid Sans', ƒƒCƒŠƒI, 'sans-serif'; font-size:14px;}

address {font-style:normal;}

/*--------------------------------------------------------------
2.0 Default
--------------------------------------------------------------*/

body {line-height: 1.5; color: #283D06;}
a {color: #283D06;}
a:hover {color: #535b58;}
* {box-sizing:border-box;}

@media (min-width: 768px) {
	/* Desktop */
	body {font-size: 16px;}
}

@media (max-width: 767px) {
	/* Mobile */
	body {font-size: 14px;}
}

/*--------------------------------------------------------------
3.0 Module
--------------------------------------------------------------*/

.clearfix:after {content: ""; display: block; clear: both;}
.tac {text-align: center;}
.tar {text-align: right;}
.w10p {width: 10%;}
.w15p {width: 15%;}
.w20p {width: 20%;}
.w25p {width: 25%;}
.w30p {width: 30%;}
.w35p {width: 35%;}
.w40p {width: 40%;}
.w50p {width: 50%;}
.w60p {width: 60%;}
.w70p {width: 70%;}

/*--------------------------------------------------------------
4.0 Layout
--------------------------------------------------------------*/

header {position:relative; background: #FFFFFF;}
.site-branding a {display: block; font-weight: bold; text-decoration: none;}
.site-branding a span {display: inline-block;}
.site-branding a span:first-letter {color: #AD5;}
.site-branding a::before {content: "\f19a"; display: inline-block; margin-right: 5px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.main-nav {}
.main-nav ul::after {content: ""; display: block; clear: both;}
.main-nav li {float: left; width: 20%;}
.main-nav a {display: block; text-align: center; border-left: 1px solid rgba(255,255,255,0.2); border-right: 1px solid rgba(0,0,0,0.2); color: #FFF; text-decoration: none;}
.main-nav li:nth-child(1) a {background: #AD5;}
.main-nav li:nth-child(2) a {background: #5958FF;}
.main-nav li:nth-child(3) a {background: #E8AE4B;}
.main-nav li:nth-child(4) a {background: #56E8B6;}
.main-nav li:nth-child(5) a {background: #FF5776;}

.page-body {padding:10px; background: #EEE;}
.page-body::after {content: ""; display: block; clear: both;}

footer {padding: 20px; background: #333; border-top: 2px solid #AD5; color: #FFF;}
footer a,
footer a:hover {color: #FFF;}
.footer-nav {margin-bottom: 25px;}
.site-copyright {text-align: center;}

@media (min-width: 768px) {
	/* Desktop */
	.site-branding {height: 90px; padding: 10px;}
	.site-branding a {width: 500px; height:70px; margin:0 auto; text-align: center; line-height:70px; font-size: 35px; }
	.site-branding a::before {font: normal normal normal 35px/1 FontAwesome;}
	.main-nav ul {border-left: 1px solid #547A17; border-right: 1px solid #D1EBA3;}
	.main-nav a {padding: 10px 0;}
	.main-nav a i {display: none;}
	.secondary-nav-action {position: absolute; right: 10px; top: 10px;}
	.secondary-nav-action li {float: left; margin-right: 10px;}

	.footer-nav ul {margin-bottom: 15px;}
	.footer-nav li {float: left; margin-right: 15px;}

	.col-full {position: relative; width: 1100px; margin-left: auto; margin-right: auto;}
	.col-full::after {content: ""; display: block; clear: both;}
	.layout-3-column .col-group-left {float: left; width: 870px; margin-right: 20px;}
	.layout-3-column .col-group-left::after {content: ""; display: block; clear: both;}
	.layout-3-column .col-primary {float: right; width: 640px;}
	.layout-3-column .col-secondary {float: left; width: 210px;}
	.layout-3-column .col-aside {float: left; width: 210px;}
	.layout-2-column-right .col-primary {float: right; width: 870px;}
	.layout-2-column-right .col-secondary {float: left; width: 210px;}
}

@media (max-width: 767px) {
	/* Mobile */
	.site-branding {height: 50px; padding: 10px;}
	.site-branding a {width: 230px; height:30px; line-height:30px; font-size: 20px; }
	.site-branding a::before {font: normal normal normal 20px/1 FontAwesome;}
	.main-nav li:first-child {border-left: none;}
	.main-nav li:last-child {border-right: none;}
	.main-nav a {height: 45px; padding: 5px 0; overflow: hidden; line-height: 10px; font-size: 10px;}
	.main-nav a i {display: block; height: 20px; margin-bottom: 5px; line-height: 20px; font-size: 20px;}
	.main-nav a span {display: none;}
	.secondary-nav-action {position: absolute; right: 5px; top: 10px;}
	.secondary-nav-action li {float: left; margin-right: 5px;}

	.footer-nav ul {padding: 0 15px;}
	.footer-nav li {float: left; margin-right: 15px; margin-bottom: 10px;}

	.col-secondary .widget-banner-list {display: none;}

}

/*--------------------------------------------------------------
5.0 Sections and Widgets
--------------------------------------------------------------*/

.page-title {margin: 5px; padding: 20px 30px; line-height:40px; background: #666; font-size:26px; font-weight:normal; color: #FFF;}
.page-title-type-default {border-bottom: 2px solid #000;}
.page-title-type-column {border-bottom: 2px solid #AD5;}
.page-title-type-plugin {border-bottom: 2px solid #5958FF;}
.page-title-type-theme {border-bottom: 2px solid #E8AE4B;}
.page-title-type-development {border-bottom: 2px solid #56E8B6;}
.page-title-type-feature {border-bottom: 2px solid #FF5776;}

section.panel {float: left; padding:5px;}
section.panel .box {background: #FFF;}
section.panel .part-image {position: relative; margin-bottom:5px; overflow: hidden;}
section.panel .part-image .icon {position: absolute; left: -50px; top: -50px; width: 100px; height: 100px; padding-top: 80px; line-height: 20px; text-align: center; color: #FFF;}
section.panel .part-image .icon {transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg);}
section.panel .part-image img {width:100%;}
section.panel .part-description {height: 90px; margin: 5px; overflow: hidden;}
section.panel .part-description h3 {line-height: 30px; font-size: 18px;}
section.panel .part-description-sammary {line-height: 15px; font-size: 12px; color:#888;}
section.panel .part-link {height: 25px; padding: 5px; background: #FFF; text-align: right; line-height:15px; font-size: 14px;}

section.panel .box-column {border-bottom: 2px solid #AD5;}
section.panel .box-plugin {border-bottom: 2px solid #5958FF;}
section.panel .box-theme {border-bottom: 2px solid #E8AE4B;}
section.panel .box-development {border-bottom: 2px solid #56E8B6;}
section.panel .box-feature {border-bottom: 2px solid #FF5776;}
section.panel .box-column .icon {background: #AD5;}
section.panel .box-plugin .icon {background: #5958FF;}
section.panel .box-theme .icon {background: #E8AE4B;}
section.panel .box-development .icon {background: #56E8B6;}
section.panel .box-feature .icon {background: #FF5776;}

section.panel-main {float: left; padding: 5px;}
section.panel-main .panel-title {margin-bottom: 10px; padding: 20px 30px; line-height:30px; background: #666; font-size:20px; font-weight:normal; color: #FFF;}
section.panel-main .box {margin-bottom: 10px; padding: 15px; background: #FFF;}

.box-entry-meta {line-height: 1.8;}
.box-entry-meta .part-entry-meta-list {margin-bottom: 10px; padding: 10px; border: 1px solid #AAA; background: #EEE; }
.box-entry-meta .part-entry-meta-list ul {padding-left: 20px; list-style-type: disc;}
.box-entry-meta .part-entry-meta-list ol {padding-left: 20px; list-style-type: decimal;}

.box-single-content {line-height: 2em;}
.box-single-content h2 {margin-top: 3em; margin-bottom: 2em; font-size: 2em;}
.box-single-content h3 {margin-top: 3em; margin-bottom: 2em; font-size: 1.5em;}
.box-single-content h4 {margin-top: 3em; margin-bottom: 2em; font-size: 1.25em;}
.box-single-content p {margin-bottom: 2em; }
.box-single-content h2:first-child,
.box-single-content h3:first-child,
.box-single-content h4:first-child,
.box-single-content h2 + h3,
.box-single-content h2 + h4,
.box-single-content h3 + h4 {margin-top: 0;}
.box-single-content img {max-width: 100%; height: auto;}
.box-single-content ul {margin-bottom: 1em; }
.box-single-content ol {margin-bottom: 1em; }
.box-single-content li {margin-bottom: 1em; }
.box-single-content table {margin-bottom: 2em; width: 100%;}
.box-single-content th,
.box-single-content td {padding: 5px 10px; border:1px solid #AAA; text-align: left; vertical-align: middle;}
.box-single-content th {background: #EEE;}
.box-single-content td {}

.panel-title-type-default {border-bottom: 2px solid #000;}
.panel-title-type-column {border-bottom: 2px solid #AD5;}
.panel-title-type-plugin {border-bottom: 2px solid #5958FF;}
.panel-title-type-theme {border-bottom: 2px solid #E8AE4B;}
.panel-title-type-development {border-bottom: 2px solid #56E8B6;}
.panel-title-type-feature {border-bottom: 2px solid #FF5776;}

@media (min-width: 1501px) {
	section.panel {width: 16.66%;}
	section.panel-main {width: 50%;}
}
@media (min-width: 1201px) and (max-width: 1500px) {
	section.panel {width: 20%;}
	section.panel-main {width: 60%;}
}
@media (min-width: 901px) and (max-width: 1200px) {
	section.panel {width: 25%;}
	section.panel-main {width: 75%;}
}
@media (min-width: 601px) and (max-width: 900px) {
	section.panel {width: 33.3%;}
	section.panel-main {width: 100%;}
}
@media (min-width: 441px) and (max-width: 600px) {
	section.panel {width: 50%;}
	section.panel-main {width: 100%;}
}
@media (max-width: 440px) {
	section.panel {width: 100%;}
	section.panel-main {width: 100%;}
}

/*--------------------------------------------------------------
6.0 Parts
--------------------------------------------------------------*/

.btn-primary,
.btn-secondary {display: inline-block; text-align: center; text-decoration: none; border: none; border-radius: 3px;}
.btn-primary {background: #333333; color: #FFFFFF; border-bottom: 1px solid #000000;}
.btn-secondary {background: #666666; color: #FFFFFF; border-bottom: 1px solid #333333;}
.btn-primary:hover {color: #FFFFFF; border-top: 1px solid #000000; border-bottom: none;}
.btn-secondary:hover {color: #FFFFFF; border-top: 1px solid #333333; border-bottom: none;}

.btn-inline {padding: 5px;}
.btn-small {min-width: 120px; height: 25px; padding: 5px 10px; line-height: 15px; font-size: 15px;}
.btn-medium {min-width: 200px; height: 40px; padding: 10px; line-height: 20px; font-size: 20px;}

@media (min-width: 768px) {
	/* Desktop */
	.btn-header {width: 70px; height: 70px; line-height: 70px; text-align: center; border-radius:35px; font-size: 14px;}
	.btn-header i {display: none;}
}

@media (max-width: 767px) {
	/* Mobile */
	.btn-header {width: 30px; height: 30px; padding: 5px; line-height: 20px; text-align: center; font-size: 15px; border-radius: 15px;}
	.btn-header span {display: none;}
}

ul.page-numbers {clear:both; position: relative; top: 5px; margin: 0 5px 10px; padding: 10px; text-align: center; background: #DDD; border-bottom: 1px solid #CCC;}
ul.page-numbers li {display: inline-block; margin: 0 5px;}
ul.page-numbers li a,
ul.page-numbers li span {display: block; width: 30px; padding: 5px 0; text-align: center;}
ul.page-numbers li a {color: #FFF; background: #666; border: 1px solid #666; text-decoration: none;}
ul.page-numbers li span {color: #666; background: #FFF; border: 1px solid #666;}

.now-printing {background: #EEE; color: #CCC; text-align: center; overflow: hidden;}
.now-printing-200-200 {width: 200px; height: 200px; line-height: 200px;}

.part-form-message {margin-bottom: 20px; padding: 10px; background: #EEE; border: 1px solid #888;}
.part-form-message-success {background: #EFE; border-color: #0C0; color: #0C0;}
.part-form-message-error {background: #FEE; border-color: #F00; color: #F00;}

/*--------------------------------------------------------------
7.0 Local
--------------------------------------------------------------*/


.part-form-list {margin-bottom: 20px;}
.part-form-list dt {margin-bottom: 10px; font-weight: bold;}
.part-form-list dd {margin-bottom: 20px;}
.part-form-action {text-align: center;}

.form-required::before {content:"*"; color:#C00;}
.form-input-error {color: #C00; margin-bottom: 10px;}

.form-input {margin-bottom: 10px;}
.form-input input,
.form-input select,
.form-input textarea {font-size: 16px; padding: 5px; border: 1px solid #CCC;}
.form-input input,
.form-input select {height: 40px; line-height: 30px;}
.form-input-long input,
.form-input-long select {width: 100%;}
.form-input-medium input,
.form-input-medium select {width: 60%;}
.form-input-short input,
.form-input-short select {width: 40%;}
.form-textarea-small textarea {width: 100%; height: 50px;}
.form-textarea-medium textarea {width: 100%; height: 100px;}
.form-textarea-large textarea {width: 100%; height: 150px;}
input[disabled] {background: #DDD;}

/*
	Mypage
*/