@charset "UTF-8";

/*
Theme Name: Ebatch's Theme X'mas 17
Author: Higuma Ebatch
Description: Theme for Ebatch Info
Version: 3.0
*/

body
{margin: 0;
font-family: 'メイリオ','Hiragino Kaku Gothic Pro', sans-serif;
line-height: 1.5}

/*Basic Settings*/

/*Header and Footer Settings*/
header
{border-bottom: solid 1px #dddddd;
background-color: #f6f6f6}

footer
{border-top: solid 1px #dddddd}

/*Box Padding*/
.sub-header
{padding-top: 5px}

.contents
{padding-top: 20px;
padding-bottom: 20px}

.sub
{padding-top: 20px;
padding-bottom: 20px}

footer
{padding-top: 15px;
padding-bottom: 15px}

@media (max-width: 599px) {
.contents
{padding-top: 10px}
}

/*Box Side Padding*/
header, footer, .container, .sub-header
{padding-left: 10px;
padding-right: 10px}

@media (min-width: 768px) {
	
/*Contens and Sidebar Position*/
.container:after
{content: "";
display: block;
clear: both}
	
.contents
{float: left;
width: 70%}
	
.sub
{float: left;
width: 30%}

/*Contents and Sidebar Space*/
.contents
{padding-right: 50px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box}
	
}

@media (min-width: 1040px) {
/*Margin*/
.container, .header-inner, .footer-inner, .sub-header
{width: 1000px;
margin-left: auto;
margin-right: auto}

}

/*Header*/

/*Site Title*/
.site h1 a
{display: inline-block;
padding: 10px;
background-color: #00a0e9;
color: #ffffff;
text-decoration: none}

.site h1
{margin: 0;
font-family: 'Arial Black', sans-serif;
font-size: 30px}

/*Footer*/

/*Copyright*/
.copyright
{margin: 0;
color: #666666;
font-size: 14px}

/*Article Excerpts*/

/*Overview*/
.overview a
{display: block;
padding: 20px 0;
border-bottom: dotted 2px #dddddd;
color: #000000;
text-decoration: none}

.overview a:hover
{background-color: #eeeeee}

.overview a:after
{content: "";
display: block;
clear: both}

.overview img
{float: left;
width: 200px}

.overview .text
{float: none;
width: auto;
margin-left: 230px}

.overview h1
{margin-top: 0;
margin-bottom: 10px;
font-size: 20px}

.overview p
{margin: 0;
font-size: 14px}

.overview .post-date
{margin-bottom: 8px}

@media (max-width: 599px) {
	
.overview a
{padding: 10px 0}

.overview img
{width: 100px}

.overview .text
{margin-left: 110px}

.overview h1
{font-size: 16px}

.overview p
{visibility: hidden;
height: 0}

.overview .post-date
{margin-bottom: 0}	
	
}

/*Overview(Large Size)*/
.overview-large a
{display: block;
padding: 20px 0;
border-bottom: dotted 2px #dddddd;
color: #000000;
text-decoration: none}

.overview-large:first-child a
{padding-top: 0}

.overview-large a:hover
{background-color: #eeeeee}

.overview-large h1
{margin-top: 10px;
margin-bottom: 10px;
font-size: 26px}

.overview-large p
{margin: 0;
font-size: 14px}

.overview-large .post-date
{margin-bottom: 8px}

.overview-large .thumb
{width: 100%;
height: 350px;
background-size: cover;
background-position: 50% 50%}

@media (max-width: 599px) {
.overview-large a {padding: 10px 0}
.overview-large h1 {font-size: 18px}
.overview-large p {font-size: 12px}
.overview-large .thumb {height: 200px}		
}

/*Single Page Settings*/

/*Article*/
.article:after
{content: "";
display: block;
clear: both}

.article h1
{margin-top: 0;
margin-bottom: 10px;
font-size: 36px}

.article p
{margin-top: 0;
margin-bottom: 20px}

@media (max-width: 599px) {
.article h1 
{font-size: 24px}

.article p
{font-size: 14px}

}

/*Article Subtitle*/
.singlepost h2
{position: relative;
margin-top: 40px;
padding-left: 32px;
padding-bottom: 5px;
border-bottom: solid 2px #00a0e9;
font-size: 24px;
clear: both}

.singlepost h2:before
{position: absolute;
left: 0px;
top: 3px;
content: '\f14a';
color: #00a0e9;
font-family: 'FontAwesome';
font-size: 28px;
line-height: 1}

.singlepost h3
{margin-top: 25px;
padding-left: 10px;
border-left: solid 10px #a5e2fe;
font-size: 18px;
clear: both}

@media (max-width: 599px) {
.singlepost h2
{padding-left: 21px;
font-size: 18px}

.singlepost h2:before
{font-size: 20px}

.singlepost h3
{padding-left: 6px;
font-size: 15px}

}

/*List Style*/
.article-body ul
{list-style: none}

.article-body li
{position: relative;
padding-left: 20px}

.article-body li:before
{position: absolute;
left: 0px;
top: 3px;
content: '\f069';
color: #aaaaaa;
font-family: 'FontAwesome';
line-height: 1}

/*Blockquote*/
blockquote
{position: relative;
margin: 30px auto;
padding: 20px 40px 1px 50px;
max-width: 460px;
color: #444444;
font-size: 18px;
line-height: 1.8}

blockquote:before
{position: absolute;
left: 10px;
top: 10px;
content: '\f10d';
color: #aaaaaa;
font-family: 30px;
font-family: 'FontAwesome';
line-height: 1}

blockquote:after
{position: absolute;
right: 10px;
bottom: 10px;
content: '\f10e';
color: #aaaaaa;
font-size: 30px;
font-family: 'FontAwesome';
line-height: 1}

/*Point*/
.point
{position: relative;
margin: 40px 0 30px;
padding: 20px 20px 20px;
border-radius: 10px;
background-color: #cfedb7;
font-size: 14px;
clear: both}

.point:before
{position: absolute;
left: 15px;
top: -15px;
content: '\f0eb';
z-index: 2;
width: 32px;
height: 32px;
padding-top: 3px;
border-radius: 16px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
background-color: #5ab80e;
color: #ffffff;
font-family: 'FontAwesome';
font-size: 26px;
line-height: 1;
text-align: center}

.point:after
{position: absolute;
left: 32px;
top: -8px;
z-index: 1;
content: 'POINT';
padding: 3px 10px 3px 20px;
border-radius: 5px;
background-color: #5ab80e;
color: #ffffff;
font-family: Verdana, Helvetica, sans-serif;
font-weight: bold;
line-height: 1}

/*Attention*/
.attention
{position: relative;
margin: 40px 0 30px;
padding: 20px;
border-radius: 10px;
border: dotted 2px #ff0000;
background-color: #ffefef;
font-size: 14px;
clear: both}

.attention:before
{position: absolute;
left: 20px;
top: -15px;
content: '\f071';
background-color: #ffffff;
color: #ff0000;
font-family: 'FontAwesome';
font-size: 26px;
line-height: 1}

/*Highlight*/
.highlight
{background-color: #ffff00;
padding: 0 3px}

/*Publish and Review Date */
.post-date
{margin-bottom: 20px;
color: #666666;
font-size: 12px}

/*Tag*/
.article-tag
{margin-bottom: 18px}

.article-tag ul
{margin: 0;
padding: 0;
list-style: none}

.article-tag li a
{display: block;
margin-right: 5px;
margin-bottom: 2px;
padding: 3px 5px;
border-radius: 2px;
background-color: #75dbe7;
color: #ffffff;
font-size: 12px;
text-decoration: none}

.article-tag li a:hover
{background-color: #94ecf6}

.article-tag ul:after
{content: "";
display: block;
clear: both}

.article-tag li
{float: left;
width: auto}

/*Bread*/
.bread ol
{margin: 0;
padding: 0;
list-style: none}

.bread li a
{display: inline-block;
padding: 5px 5px;
color: #888888;
font-size: 12px;
text-decoration: none}

.bread li a[href]:hover
{background-color: #eeeeee}

.bread ol:after
{content: "";
display: block;
clear: both}

.bread li
{float: left;
width: auto}

.bread li:after
{content: '\003e';
margin-left: 2px;
margin-right: 2px;
color: #888888}

.bread li:last-child:after
{content: none}

.bread i
{font-size: 14px}

.bread span
{display: inline-block;
text-indent: -9999px}

@media (max-width: 599px) {
.bread li:last-child
{text-indent: -9999px}	
}

/*Share Button*/
.share
{margin-top: 40px;
clear: both}

.share ul
{margin: 0;
padding: 0;
list-style: none}

.share li a
{display: block;
padding: 8px 17px;
border-radius: 10px;
color: #ffffff;
font-size: 12px;
text-decoration: none}

.share li a:hover
{opacity: 0.8}

.share ul:after
{content: "";
display: block;
clear: both}

.share li
{float: left;
width: auto;
margin-right: 5px}

.share-tw
{background-color: #55acee}

.share-fb
{background-color: #3b5998}

.share-gp
{background-color: #dd4b39}

@media (max-width: 599px) {
	
.share span
{display: inline-block;
text-indent: -9999px}

.share li a
{padding: 8px 10px}
}

/*Pagination*/
.pagination
{margin: 40px 0 30px;
text-align: center}

.pagination ul
{display: inline-block;
margin: 0;
padding: 0;
list-style: none}

.pagination li a,
.pagination li > span
{display: block;
margin: 0 5px;
padding: 6px 8px;
border: solid 1px #cccccc;
color: #000000;
font-size: 14px;
text-decoration: none}

.pagination li > span
{background-color: #efefef}

.pagination li a:hover
{background-color: #eeeeee}

.pagination ul:after
{content: "";
display: block;
clear: both}

.pagination li
{float: left;
width: auto}

/*Pagination of Index Page*/
.pagination-index li .dots
{padding: 6px  2px;
border-color: transparent;
background-color: transparent}

@media (max-width: 599px) {
.pagination-index li a,
.pagination-index li > span
{margin: 0;
padding: 6px 7px;
border-left: none;
font-size: 12px}

.pagination-index li:first-child a,
.pagination-index li:first-child > span
{border-left: solid 1px #cccccc}

.pagination-index li .dots
{border-right-color: #cccccc}	
	
}


/*Sidebar */

/*Menu*/
.mymenu
{margin-bottom: 30px}

.mymenu h2
{margin-top: 0;
margin-bottom: 10px;
border-bottom: solid 2px #dddddd;
color: #666666;
font-size: 18px}

.mymenu ul
{margin: 0;
padding: 0;
list-style: none}

.mymenu li a
{display: block;
padding: 10px 5px;
color: #000000;
font-size: 14px;
text-decoration: none}

.mymenu li a:hover
{background-color: #eeeeee}

/*Sidebar with thumbnails*/
.mymenu-thumb li a
{padding: 5px 0;
border-bottom: dotted 1px #dddddd;
color: #2288bb}

.mymenu-thumb li a:after
{content: "";
display: block;
clear: both}

.mymenu-thumb li .thumb
{float: left;
width: 60px;
height: 60px;
background-size: cover;
background-position: 50% 50%}

.mymenu-thumb li .text
{float: none;
width: auto;
margin-left: 75px}

.mymenu-thumb li span
{display: block;
color: #666666;
font-size: 12px}

/*Text on Thumbnail*/
.mymenu-large li a
{position: relative;
margin-bottom: 10px;
padding: 0}

.mymenu-large li a:hover
{opacity: 0.8}

.mymenu-large li .thumb
{width: 100%;
height: 130px;
background-size: cover;
background-position: 50% 50%}

.mymenu-large .text
{position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 5px 10px;
background-color: rgba(0,0,0,0.5);
color: #ffffff;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box}

@media (min-width: 400px) and (max-width: 767px) {
.mymenu-large ul:after
{content: "";
display: block;
clear: both}

.mymenu-large li
{float: left;
width: 50%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box}

.mymenu-large li:nth-child(odd)
{clear: both;
padding-right: 7px}

.mymenu-large li:nth-child(even)
{padding-left: 7px}
}

/*Related Articles Menu*/
.mymenu-related
{margin: 40px 0 0;
padding: 20px;
border: solid 1px #dddddd;
background-color: #f6f6f6}

.mymenu-related h2
{padding: 0 0 0 7px;
border-left: solid 8px #bac6cb;
border-bottom: none;
font-size: 20px;
font-weight: normal}

.mymenu-related h2:before
{content: none}

.mymenu-related li a
{border: none;
color: #000000}

@media (max-width: 599px) {
.mymenu-related
{padding: 10px}

.mymenu-related li .thumb
{width: 80px;
height: 50px}

.mymenu-related li .text
{margin-left: 95px}	
}

@media (min-width: 600px) {
.mymenu-related ul:after
{content: "";
display: block;
clear: both}

.mymenu-related li
{float: left;
width: 25%;
padding: 0 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box}

.mymenu-related li .thumb
{width: 100%;
height: 80px;
margin-bottom: 5px}

.mymenu-related li .text
{margin-left: 0}
}

/*Widget*/

/*Search Field*/
.search-field
{width: 100%;
height: 44px;
border: solid 2px #dddddd;
border-radius: 0;
background-image: none;
font-family: inherit;
font-size: 14px;
-webkit-appearance: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box}

.screen-reader-text, .search-submit
{display: block;
visibility: hidden;
height: 0}

/*Tag Cloud*/
.tagcloud a
{display: inline-block;
color: #2288bb;
text-decoration: none}


/*Media*/

/*Image Caption*/
.wp-caption-text
{margin: 0;
color: #666666;
font-size: 10px;
text-align: center}

.wp-caption-text a
{color: #666666}

/*Image Position*/
.aligncenter
{display: block;
margin-top: 30px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto}

@media (max-width: 599px) {
.alignleft,.alignright
{display: block;
margin-top: 30px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto}
}

@media (min-width: 600px) {
.alignleft
{float: left;
margin-top: 10px;
margin-bottom: 20px;
margin-right: 30px}

.alignright
{float: right;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 30px}
}

/*Internet Explorer Settings*/
a img
{border: none}

/*For Large Images*/
img, .wp-caption
{max-width: 100%;
height: auto}

/*Eyecatch Image*/
.catch
{margin-top: 30px;
margin-bottom: 30px}

/*For Youtube*/
iframe
{max-width: 100%}

.ytvideo
{position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
overflow: hidden;
margin-top: 30px;
margin-bottom: 30px}

.ytvideo iframe
{position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%}

/* Category and Tag*/
.contents > h1
{margin-top: 0;
font-size: 34px}

@media (max-width: 599px) {
.contents > h1
{font-size: 22px}

.archive .bread li:last-child
{text-indent: 0}	
}

/*Navigation Menu*/
#mainmenu
{display: none}

.mainmenu ul
{margin: 0;
padding: 0;
list-style: none}

.mainmenu li a
{display: block;
padding: 10px 5px;
color: #000000;
font-size: 14px;
text-decoration: none}

.mainmenu li a:hover
{background-color: #eeeeee}

/*Menu Button*/
.header-inner
{position: relative}

#navbtn
{position: absolute;
top: 15px;
right: 0;
padding: 6px 12px;
border: solid 1px #aaaaaa;
border-radius: 5px;
background-color: #ffffff;
cursor: pointer}

#navbtn:hover
{background-color: #dddddd}

#navbtn:focus
{outline: none}

#navbtn i
{color: #888888;
font-size: 18px}

#navbtn span
{display: inline-block;
text-indent: -9999px}

@media (min-width: 768px) {
	
/*Site Title and Navigation Menu Position*/
.header-inner:after
{content: "";
display: block;
clear: both}

.site
{float: left;
width: auto}

.sitenav
{float: right;
width: auto}

/*Navigation Menu Link Position*/
#mainmenu
{display: block !important}

.mainmenu
{margin-top: 10px}

.mainmenu ul:after
{content: "";
display: block;
clear: both}

.mainmenu li
{float: left;
width: auto}

.mainmenu li a
{padding: 10px 15px}

/*Toogle Button*/
#navbtn
{display: none}	
	
}