z/*
Theme Name:PORTFOLIO
Theme URI:http://portfolio.yuko-design.com/
Author:the original
*/



/*-----------------------------------
header
------------------------------------*/
.page_wrap {
	width:100%;
	height:auto;
	position:relative;
}

header {
	width:200px;
	position:fixed;
	background:#f5f3f2;
	z-index:10;
	font-family:'Capriola', 'sans-serif', "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "sans-serif";
	height:100%;
}
header h1 {
	margin:20px;
	padding:20px;
	background:#fff;
	font-size:18px;
	text-align:center;
	color:#f25473;
}
header h1 a {
	color:#f25473 !important;
}
header h1 a:hover {
	color:#f38499 !important;
}
header nav ul  {
	border-top:1px solid #eae5e3;
}
header nav ul li {
	border-bottom:1px solid #eae5e3;
	position:relative;
}
header nav ul li a {
	padding:20px;
	display:block;
}
header nav ul li a:hover {
	background:#fbfbfb;
}
header nav ul li:after {
	position:absolute;
	top:50%;
	right:20px;
	display:block;
	content:'';
	width:8px;
	height:8px;
	margin-top:-4px;
	border-top:1px solid #a89990;
	border-right:1px solid #a89990;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}

/*-----------------------------------
contents
------------------------------------*/

article.wrapper {
	width:auto;
	margin-left:200px;
	padding:4% 4% 4% 4%;
}
article.wrapper h2 {
	font-size:200%;
	color:#f25473;
	font-family:'Capriola', 'sans-serif', "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "Osaka", "sans-serif";
	border-bottom:1px solid #eae5e3;
	padding-bottom:15px;
	margin-bottom:30px;
}
article.wrapper h3 {
	font-size:150%;
	font-weight:bold;
	margin-bottom:20px;
}
article.wrapper .btn {
	position:relative;
	text-align:right;
}
article.wrapper .btn a {
	background:#7c6c63;
	border-radius:3px;
	color:#fff;
	padding:4px 40px 0px 40px;
	display:inline-block;
}
article.wrapper .btn a:hover {
	background:#928178;
}
article.wrapper .btn:after {
	position:absolute;
	top:50%;
	right:30px;
	display:block;
	content:'';
	width:8px;
	height:8px;
	margin-top:-4px;
	border-top:1px solid #fff;
	border-right:1px solid #fff;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}

/*-----------------------------------
portfolio-list
------------------------------------*/

/* category */
ul.category {
	margin-bottom:30px;
}
ul.category li {
	float:left;
}
ul.category li a {
	background:#7c6c63;
	border-radius:3px;
	color:#fff;
	padding:3px 10px;
	margin-right:15px;
	display:inline-block;
}
ul.category li a:hover {
	background:#928178;
}

/* box */
figure {
	width:27%;
	background:#fff;
	float:left;
	margin:2%;
	border-right:1px solid #eae5e3;
	border-bottom:1px solid #eae5e3;
	padding:2% 2% 2% 0;
}
figure img {
	width:100%;
	height:auto;
}
figure img a:hover {
	opacity:0.7;
	filter:alpha(opacity=70);        /* ie lt 8 */
	-ms-filter:"alpha(opacity=70)";  /* ie 8 */
	-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
	-khtml-opacity:0.7;       
}
figure figcaption {
	margin-top:10px;
}
figure figcaption .title {
	font-weight:bold;
	margin-bottom:5px;
}
figure figcaption .category {
	width:50%;
	display:table-cell;
}
figure figcaption .category span {
	font-size:80%;
	background:#f5f3f2;
	border-radius:3px;
	padding:5px 6px;
}
figure figcaption .date{
	width:50%;
	color:#7c6c63;
	text-align:right;
	font-size:80%;
	display:table-cell;
	margin:0px;
}


/*-----------------------------------
portfolio article
------------------------------------*/
section.portfolio figcaption {
	margin-bottom:2%;
}
section.portfolio figcaption .category {
	float:left;
}
section.portfolio figcaption .category a {
	background:#7c6c63;
	border-radius:3px;
	color:#fff;
	padding:3px 10px;
	margin-right:15px;
	display:inline-block;
}
section.portfolio figcaption .category a:hover {
	background:#928178;
}
section.portfolio figcaption .date {
	background:#f5f3f2;
	border-radius:3px;
	padding:3px 10px;
	float:left;
}
section.portfolio .images {
	margin-bottom:4%;
}
section.portfolio .images img {
	max-width: 100%;
}
/* 
section.portfolio .detail {
	background:#f5f3f2;
	padding:20px;
}
 */
section.portfolio table {
	width:100%;
	border-collapse:collapse;
	border:1px solid #eae5e3;
}
section.portfolio table th {
	width:20%;
	padding:10px 10px 10px 20px;
	font-weight:normal;
	text-align:left;
	background:#f5f3f2;
	border-right:1px solid #eae5e3;
	border-bottom:1px solid #eae5e3;
	vertical-align:top;
}
section.portfolio table td {
	padding:10px 20px 10px 10px;
	border-bottom:1px solid #eae5e3;
}
/*-----------------------------------
profile
------------------------------------*/

/* photo */
.ph{
	text-align:center;
	margin-top:20px;
	margin-bottom:30px;
}
.ph img {
	width:300px;
	border-radius:300px;
	-webkit-border-radius:300px;
	-moz-border-radius:300px;
}

/* profile */
section.profile {
	background:#f5f3f2;
	padding:20px;
	text-align:left;
}
section.profile p {
	margin-bottom:2%;
}
section.profile dl {
	margin-bottom:2%;
	padding-bottom:1.5%;
	border-bottom:1px solid #eae5e3;
}
section.profile dl dt {
	width:20%;
	float:left;
	margin-right:2%;
}
section.profile dl dd {
	width:78%;
	float:left;
}


/*-----------------------------------
footer
------------------------------------*/

footer {
	width:100%;
	z-index:110;
	background:#4f4946;
	color:#fff;
	padding:10px 0px 10px 0px;
	font-size:70%;
	text-align:center;
	position:absolute;
}


/*-----------------------------------
other nav
------------------------------------*/

.navigation .nav-previous,
.navigation .nav-next {
}
.navigation .nav-next a,
.navigation .nav-previous a {
	position:relative;
	height:50px;
	margin:30px auto 30px auto;
	width:43%;
	padding:3.7% 2% 2% 4%;
	background:#f5f3f2;
}
.navigation .nav-previous a {
	float:left;
}
.navigation .nav-next a {
	float:right;
}
.navigation .nav-next a:hover,
.navigation .nav-previous a:hover {
	background:#f0edec;
}
.navigation .nav-previous a:after,
.navigation .nav-next a:after {
	position:absolute;
	top:50%;
	display:block;
	content:'';
	width:8px;
	height:8px;
	margin-top:-4px;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
}
.navigation .nav-previous a:after {
	left:20px;
	border-bottom:1px solid #a89990;
	border-left:1px solid #a89990;
}
.navigation .nav-next a:after {
	right:20px;
	border-top:1px solid #a89990;
	border-right:1px solid #a89990;
}


/*-----------------------------------
other pager
------------------------------------*/
.pager {
	margin:2% auto;
	line-height:10px;
	text-align:center;
}
a.page-numbers, .pager .current {
	background:#f5f3f2;
	padding:4px 10px;
	text-decoration:none;
}
a.page-numbers:hover {
	color:white;
	background:#7c6c63;
}
.pager .current {
	color:white;
	background:#7c6c63;
	font-weight:bold;
}
.pager .next, .pager .prev {
	border:0 none;
	background:transparent;
	text-decoration:underline;
}



@media screen and (min-width: 1000px) {
header nav#menu .icon {
	display:none;
}
}



@media screen and (max-width: 999px) {

/*-----------------------------------
header
------------------------------------*/
.page_wrap {
	width:auto;
	height:auto;
	position:static;
}

header {
	width:auto;
	height:auto;
	position:relative;
	margin-bottom:0%;
	overflow:hidden;
}
header h1 {
	width:40%;
	font-size:80%;
	line-height:1.2rem;
	padding:2%;
	margin:2%;
}
header nav#menu .icon {
	position:absolute;
	right:3%;
	top:15px;
	width:50px;
	height:50px;
	cursor:pointer;
	display:block;
}

header nav#menu .open {
	display:block;
}
header nav#menu .icon img#gazo,
header nav#menu .icon object {
	width:100%;
	height:100%;
	pointer-events: none;
}

/* menu */
header nav#menu ul  {
	display:none;
	width:auto;
	background:#7c6c63;
	opacity:0.8;
	border:none;
}
header nav#menu ul li {
	border-bottom:1px solid #a89990;
	position:relative;
}
header nav#menu ul li a {
	color:#fff;
}
header nav#menu ul li a:hover {
	background:#918077;
}


/*-----------------------------------
contents
------------------------------------*/

article.wrapper {
	width:auto;
	margin:0;
	padding:4%;
}
article.wrapper h2 {
	font-size:150%;
	padding-bottom:2%;
	margin-bottom:6%;
}


/*-----------------------------------
portfolio-list
------------------------------------*/

/* category */
ul.category {
	margin:0 auto 5% auto;
}
ul.category li a {
	font-size:80%;
	padding:0px 8px;
	margin:0px 8px 8px 8px;
}

/* box */
figure {
	width:43.5%;
}


/*-----------------------------------
portfolio article
------------------------------------*/

section.portfolio figcaption {
	margin-bottom:4%;
}
section.portfolio .images {
	margin-bottom:6%;
}
section.portfolio .images img {
	width:100%;
}
section.portfolio table {
	border-bottom:none;
}
section.portfolio table td,
section.portfolio table th {
	width:96%;
	padding:2%;
	display:block;
	border-right:none;
}


/*-----------------------------------
other nav
------------------------------------*/

.navigation .nav-next a,
.navigation .nav-previous a {
	width:88%;
	height:auto;
	float:none;
	display:block;
	font-size:80%;
	margin:4% 0 0 0;
}
.navigation .nav-next a {
	padding:4% 10% 4% 2%;
}
.navigation .nav-previous a {
	padding:4% 2% 4% 10%;
}


/*-----------------------------------
profile
------------------------------------*/

section.profile p {
	margin-bottom:4%;
}
section.profile dl {
	border-bottom:none;
}
section.profile dl dt {
	width:auto;
	float:none;
	margin-right:0%;
	margin-bottom:2%;
	background:#7c6c63;
	color:#fff;
	padding:2% 4%;
}
section.profile dl dd {
	width:auto;
	float:none;
	margin-left:4%;
}

/*-----------------------------------
footer
------------------------------------*/

footer {
	position:relative;
	margin-top:8%;
}

/*-----------------------------------
contact
------------------------------------*/

#cntctfrm_contact_form input.text, #cntctfrm_contact_form textarea, #cntctfrm_contact_message, #cntctfrm_contact_name, #cntctfrm_contact_email, #cntctfrm_contact_subject {
	width:94% !important;
	padding:2% !important;
	margin-bottom:4% !important;
}




}

@media screen and (max-width: 480px) {

/*-----------------------------------
header
------------------------------------*/

header nav#menu .icon {
	top:6px;
}

/*-----------------------------------
portfolio-list
------------------------------------*/

/* box */
figure {
	width:auto;
	float:none;
	margin:0 0 6% 0;
	border:1px solid #eae5e3;
	padding:4%;
}

}
@media screen and (max-width: 320px) {


}