@charset "UTF-8";
/*
Theme Name: YORIKO YOUDA workbook (5th)
Description: YORIKO YOUDA workbook 5年目突入に併せて作られたテーマ
Version: 1.0
Author: Mahiro Komura
Author URI: http://linenstrings.jp/
*/

body {
	background: #ffffff;
	color: #1a1a1a;
	font-family: 'Times New Roman', serif;
	font-size: 16px;
	line-height: 1;
	margin: 0;
	padding: 0;
}
* html body {
	font-size: 100%;
}
*:first-child + html body {
	font-size: 100%;
}
* {
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	padding: 0;
}
* html body {
	text-align: center;
}

a:link {
	color: #333333;
	text-decoration: underline;
    -webkit-transition: color 0.15s linear;
    -moz-transition: color 0.15s linear;
}
a:visited {
	color: #333333;
}
a:hover {
	color: #cccccc;
}
img {
	border: none;
	vertical-align: top;
}
input[type="image"] {
	vertical-align: top;
}

ul, ol {
	list-style: none;
}

* table {
	font-size: 100%;
}

form input,
form textarea,
form select {
	font-size: 100%;
	font-family: 'Helvetica', 'Lucida Grande',' Arial', sans-serif;
}
form input,
form textarea {
}

hr {
	position: absolute;
	top: -32768px;
	visibility: hidden;
	width: 1px;
	height: 1px;
	display: none;
}

.supplement {
	font-size: xx-small;
	position: absolute;
	top: -32768px;
	left: -32768px;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	overflow: hidden;
	zoom: 1;
}
/*\*/
* html .clearfix {
	height: 1em;
	overflow: visible;
}
/* */

#page {
	/*
	max-width: 1024px;
	min-width: 960px;
	*/
	padding: 0;
	margin: 0 auto;
}

/* --------------------
   ページヘッダ
-------------------- */

#page-header {
	position: relative;
	max-width: 880px;
	height: 100px;
	margin: 0 auto;
	padding: 0 20px;
}
#page-header #site-title {
	position: absolute;
	top: 32px;
	left: 20px;
	font-size: 112.5%;
}
#page-header a:link,
#page-header a:visited {
	color: #000000;
	text-decoration: none;
}
#page-header a:hover {
	color: #cccccc;
	text-decoration: none;
}
#page-header nav {
	position: absolute;
	top: 33px;
	left: 296px;
}
#page-header ul {
	font-size: 87.5%;
	line-height: 1.5;
}
#page-header ul li {
	padding-right: 40px;
	display: inline-block;
}
#page-header ul li a:link,
#page-header ul li a:visited {
	color: #000000;
	text-decoration: none;
}
#page-header ul li a:hover {
	color: #cccccc;
	text-decoration: none;
}

/* --------------------
   投稿
-------------------- */

article.workbook {
	font-family: "Times New Roman", serif;
	position: relative;
	margin: 100px auto 0;
	padding: 0 20px;
	max-width: 800px;
}
article.workbook:first-child {
	margin-top: 0;
}
article.workbook div.work {
	margin: 0 auto;
}
article.workbook div.work.vertical {
	max-width: 533px;
}
article.workbook div.work img {
	width: 100%;
	height: auto;
}
article.workbook header {
	position: relative;
	padding-top: 15px;
	width: 100%;
}
article.workbook header .article-title {
	font-size: 162.5%;
	line-height: 1.5;
	margin-bottom: 10px;
}
article.workbook header .article-title span {
	color: #999999;
}
article.workbook header .article-title a:link,
article.workbook header .article-title a:visited {
	color: #000000;
	text-decoration: none;
}
article.workbook header .article-title a:hover,
article.workbook header .article-title a:hover span {
	color: #cccccc !important;
	text-decoration: none;
}
article.workbook header div.note p {
	font-size: 87.5%;
	line-height: 1.5; 
	margin-top: 20px;
}
article.workbook div.entryBody div.work {
}
article.workbook div.entryBody div.work5th {
	position: relative;
}
article.workbook div.entryBody div.work5th span {
	background: #FFFFFF;
    bottom: 0;
    color: #000000;
    display: block;
    font-size: 10px;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50); 
    padding: 4px 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
article.workbook div.entryBody img {
	background: #efefef;
}
article.workbook div.entryBody p {
	font-size: 14px;
	line-height: 1.5;
}

article.workbook header p {
	color: #666666;
	font-size: 93.75%;
	line-height: 1.5;
}
article.workbook header ul.social-buttons {
    position: relative;
    margin-top: 15px;
}


/* --------------------
   固定ページ
-------------------- */

h1.page-title {
	font-size: 162.5%;
	line-height: 1.5;
	position: relative;
	padding: 20px 20px 0;
	margin: 0 auto;
	max-width: 920px;
	height: 100px;
}
h1.page-title span {
	position: absolute;
	top: 20px;
}

article.page {
	font-family: "Times New Roman", serif;
	position: relative;
	margin: 0 auto;
	max-width: 880px;
	padding: 0 20px;
}
article.page header {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
}
article.page header .article-title {
	font-size: 162.5%;
	line-height: 1.5;
	position: absolute;
	top: 20px;
	left: 0;
}
article.page header .article-title span {
	color: #999999;
}
article.page header .article-title a:link,
article.page header .article-title a:visited {
	color: #000000;
	text-decoration: none;
}
article.page header .article-title a:hover,
article.page header .article-title a:hover span {
	color: #cccccc !important;
	text-decoration: none;
}

article.page header p {
	font-size: 87.5%;
	line-height: 1.5;
	position: absolute;
	top: 76px;
	right: 0;
}
article.page div.entryBody {
	font-size: 87.5%;
	line-height: 2;
}
article.page div.entryBody h2 {
	font-weight: bold;
	margin-top: 4em;
}
article.page div.entryBody h3 {
	margin-top: 2em;
}
article.page div.entryBody #intro {
	border-bottom: solid 1px #efefef;
	padding-bottom: 50px;
	margin-bottom: 50px;
}


article.page footer {
	position: relative;
	padding-top: 20px;
	height: 130px;
}
article.page footer p {
	font-size: 87.5%;
	line-height: 1.5;
}
article.page footer ul.social-buttons {
    position: relative;
    margin-top: 15px;
}



ul.social-buttons {
	margin-top: 0.25em;
}
ul.social-buttons li {
	width: 96px;
	display: table-cell;
}
ul.social-buttons li.fblike {
	width: 86px !important;
}
ul.social-buttons li.tweet iframe {
	width: 96px !important;
}

ul.social-buttons iframe.twitter-share-button,
ul.social-buttons div {
	vertical-align: top !important;
}


/* --------------------
   フッタ
-------------------- */

#page-footer {
	margin: 50px auto 25px;
	max-width: 880px;
	padding: 0 20px;
}
#page-footer #copyright {
	color: #999999;
	font-size: 75%;
	line-height: 1.5;
}


/* --------------------
   インデックス
-------------------- */

section.thumbnail-index {
	position: relative;
	width: 960px;
	margin: 0 auto;
}
section.thumbnail-index header {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
}

section.thumbnail-index h1 {
	font-size: 162.5%;
	line-height: 1.5;
	position: absolute;
	top: 20px;
	left: 20px;
}
section.thumbnail-index ul {
	position: relative;
}
section.thumbnail-index ul li {
	width: 106px;
	height: 190px;
	margin-right: 36px;
	position: relative;
	text-align: center;
	float: left;
}
section.thumbnail-index ul li.linebreak {
	margin-right: 0 !important;
}
section.thumbnail-index ul li a:link,
section.thumbnail-index ul li a:visited {
	color: #000000;
	text-decoration: none;
}
section.thumbnail-index ul li dl {
	padding-top: 120px;
}
section.thumbnail-index ul li dl dt {
	font-size: 13px;
}
section.thumbnail-index ul li dl dd.thumb {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 106px;
	height: 106px;
	cursor: pointer;
}
section.thumbnail-index ul li dl dd.thumb img {
	position: relative;
	left: -4px;
	top: -4px;
}
section.thumbnail-index ul li dl dd.thumb:hover img {
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    opacity: 0.5;
    filter: alpha(opacity=50); 
}
section.thumbnail-index ul li dl dd.thumb span {
	background: url(/images/thumb_mask_rev2.png) no-repeat 50% 50%;
	position: absolute;
	top: 0;
	left: 0;
	width: 106px;
	height: 106px;
	z-index: 100;
}
section.thumbnail-index ul li dl dd.info {
	color: #999999;
	font-size: 12px;
	margin-top: 0.5em;
}

.navigation {
	position: relative;
	text-align: center;
	max-width: 920px;
	margin: 100px auto 50px;
	padding: 0 20px;
}

.navigation div {
	font-size: 87.5%;
	line-height: 1.5;
	display: inline-table;
	padding-right: 20px;
}

.wp-pagenavi {
	text-align: center;
	margin-top: 100px;
	margin-bottom: 50px;
}

.wp-pagenavi span.current {
    font-weight: normal;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #666666 !important;
}
.wp-pagenavi a, .wp-pagenavi span {
	border: 1px solid #CCCCCC;
	border-radius: 16px 16px 16px 16px;
	font-size: 20px;
	margin: 0 5px !important;
	padding: 0 7px !important;
	text-align: center;
	text-decoration: none;
    -webkit-transition: border 0.15s linear;
    -moz-transition: border 0.15s linear;
}
.wp-pagenavi a:hover {
	color: #333333;
}

@media screen and (max-width: 768px) {
	#page-header #site-title {
		position: relative;
		top: 0;
		left: 0;
		text-align: center;
		margin: 50px 0 25px;
		font-size: 150%;
	}
	#page-header nav {
	    position: relative;
	    top: 0;
	    left: 0;
    }
    #page-header ul {
	    text-align: center;
	}
    #page-header ul li {
	    display: inline-block;
    }
    #page-header ul li:last-child {
	    padding-right: 0;
	}
}

@media screen and (max-width: 640px) {
	section.thumbnail-index h1 {
		left: 0;
		max-width: 480px;
		width: 100%;
		text-align: center;
	}
}