/*
Theme Name: hiroko_new
Theme URI: http://wordpress.org/
Description: The 2010 theme for WordPress is stylish, customizable, simple, and readable -- make it yours with a custom menu, header image, and background. Twenty Ten supports six widgetized areas (two in the sidebar, four in the footer) and featured images (thumbnails for gallery posts and custom header images for posts and pages). It includes stylesheets for print and the admin Visual Editor, special styles for posts in the "Asides" and "Gallery" categories, and has an optional one-column page template that removes the sidebar.
Author: the WordPress team
Version: 2014
License: GNU General Public License
License URI: license.txt
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu
*/


/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
}

html, body {
	margin: 0;
	padding: 0;
	font-size: 100%;
}


h1, h2, h3, h4, h5, h6, address, div, blockquote, p, pre, ul, ol, li, dl, dt, dd, hr {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
}

table, caption, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
}

span, em, dfn, code, samp, kbd, var, cite, abbr, acronym, sub,
sup, q, br, ins, del, a, img, object, iframe {
	margin: 0;
	padding: 0;
	border: 0;
	font-style: normal;
	font-weight: inherit;
	font-size: 100%;
}

.grid1, .grid2 {
  float: left;
  display: inline;
  margin-left: 44px;
}


.grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
  float: left;
  display: inline;
  margin-left: 35px;
}
.grid1 {width: 478px;}
.grid2 {width: 217px;}
.grid3 {
	width: 310px;
	margin-bottom: 35px;
}
.grid4 {width: 300px;}
.grid5 {width: 325px;}
.grid6 {width: 460px;}
.grid7 {width: 540px;}
.grid8 {width: 620px;}
.grid9 {width: 700px;}
.grid10 {width: 780px;}
.grid11 {width: 860px;}
.first {
	margin-left: 0;
	clear: both;
}



/*clearfix*/

.clearfix:after {
	content:".";
	height:0px;
	clear:both;
	display: block;
	visibility:hidden;
}

.clearfix {
	zoom:100%;
}

.clearfix {
	display:inline-block;
}

a,
a:link,
a:visited{
	color: #000;
	text-decoration: none;	
}

a:hover{
	color: #666;
}

img{
	vertical-align: top;
	}

a:hover img{
  filter: alpha(opacity=60);
  -moz-opacity:0.60;
  opacity:0.60;
}





/*------------------------------------------------------------------------------
comoon
------------------------------------------------------------------------------*/

body{
	font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	line-height: 170%;
	/*border-top: 1px solid #FF008D;*/
	border-top: 1px solid #FFF;
}
.frontPage {
	border-top: 1px solid #FFF !important;
}

#container{
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 80px;
}



#contents{
	width: 1000px;
}

#main{
	width: 1000px;
	float: none;
}
#news #main {
	width: 740px;
	float: right;
}

#side{
	float: left;
	width: 220px;
}

#header h1{
	padding-top: 50px;
	padding-bottom: 35px;
	text-align: center;
	}

#footer, 
#footer a {
	font-size: 10px;
}

.tp_footer_box{
	width: 1000px;
	border-top: 1px solid #FFF;
	padding-top: 12px;
}
.footer_box{
	width: 1000px;
	border-top: 1px solid #CCC;
	padding-top: 12px;
}

.tp_footer_box_up {
	text-align: center;
	margin: 100px auto 0;
}
.tp_footer_box_bt {
	text-align: center;
	margin: 10px auto 0;
}
.footer_box_L{
	float: left;
}

.footer_box_R{
	float: right;
}

.osb {
	border-bottom: 1px solid #ff17a5;
    color: #ff17a5;
    height: 15px;
    width: 8em;
	padding-bottom: 2px;
}
.osb a,
.osb a:link,
.osb a:visited {
	color: #000;
}
.osb a:hover,
.osb a:active {
	color: #666;
}

.ftb {
	border-bottom: 1px solid #FFF;
    height: 15px;
    width: 28em;
}

.osLink,
.osLink:link,
.osLink:visited {
	background-color: #ff17a5;
	color: #FFF;
	margin-left: 15px;
    padding: 0.3em 1em 0.1em;
	text-decoration: none;
}
.osLink:hover,
.osLink:active {
	text-decoration: underline;
}



/* MENU */
.menu{
	width: 1000px;
}
.menu ul {
	list-style-type: none;
}
.menu li {
	float: left;
	margin-right: 73px;
}
.menu li.rEnd {
	float: right;
	margin-right: 0 !important;
}
.menu li a {
	display: block;
	padding: 5px 0;
	color: #000;
}
.menu li a:hover,
.menu li a:active {
	color: #666;
}

	
/* totop */
.totop{
	text-align: right;
	padding-top: 80px;
	padding-bottom: 20px;
	}


/* page */
.page{
	padding-top: 40px;
	width: 1000px;
	}

.page h3{
	margin-top: 1em;
	font-size: 14px;
	font-weight: bold;
}

.page p{
	margin-bottom: 5px;
	color: #333;
	line-height: 180%;
}

.page h4{
	margin-top: 1em;
	font-size: 14px;
	font-weight: bold;
}

.page img{
	margin-bottom: 1em;
	}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.625em;
}
.alignright {
	display: inline;
	float: right;
	margin-left: 1.625em;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.side_menu{
	background-color: #F1F1F1;
	width: 180px;
	padding: 15px 20px 30px;
	}
	
.side_menu h3.widget-title{
	padding-bottom: 20px;
	}

.side_menu li{
	list-style-type: none;
	
	}

.side_menu li a{
	background-image: url(images/common/mark_side.gif);
	background-repeat: no-repeat;
	padding-left: 20px;
	background-position: left center;
	border-bottom: 1px dashed #CCC;
	display: block;
	padding-top: 10px;
	padding-bottom: 8px;
	line-height: 12px;
	}

.side_menu li li a{
	background-image: url(images/common/mark_side_under.gif);
	background-repeat: no-repeat;
	padding-left: 35px;
	background-position: 20px center;
	}



/*------------------------------------------------------------------------------
TOP
------------------------------------------------------------------------------*/

/*  top main */

#top_main{
	height: 450px;
	width: 1000px;
	overflow: hidden;
	margin-top: 80px;
	}

/* top_content */
#top_content{
	color: #333;
	padding-top: 60px;
	}

#top_content .grid1{
	padding-bottom: 40px;
	}

#top_content .grid1 h3{
	padding-top: 8px;
	}

#top_content .grid1 h3 a,
#top_content .grid1 h3 a:link,
#top_content .grid1 h3 a:visited{
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	
}

#top_content .grid1 h3 a:hover{
	text-decoration: none;
}

#top_content p{
	color: #333;
	padding-top: 8px;
	}
	
/*under_contetnt*/

#under{
	border-top: 1px solid #E5E5E5;
	padding-top: 40px;
	margin-top: 60px;
	}


.under_box{
	width: 1000px;
	background-image: url(images/top/under_back.gif);
	background-repeat: repeat-y;
}


.under_box_L{
	width: 720px;
	float: left;
}

.under_box_R{
	float: right;
	width: 200px;
}


.under_box_L h3{
	padding-bottom: 20px;
	}

#news_box{
	font-size: 12px;
	color: #666;
	margin-top: 10px;
	}
	
#news_box p{
	margin: 0px;
	padding: 0px;
	}	

	
#news_box ul{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	}

#news_box li{
	list-style-type: none;
	width: 680px;
	line-height: 160%;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 30px;
	}


#news_box li .new_bax_date{
	position: absolute;
	background-image: url(images/top/mark.gif);
	background-repeat: no-repeat;
	background-position: left center;
	color: #000;
	}

#news_box li .new_box_title{
	padding-left: 100px;
	}

#news_box li .new_box_title span{
	color: #FFF;
	font-size: 10px;
	font-weight: bold;
	margin-left: 8px;
	background-color: #999;
	}

#news_box li .new_box_title span a,
#news_box li .new_box_title span a:link,
#news_box li .new_box_title span a:visited{
	color: #FFF;
	padding-right: 4px;
	padding-left: 4px;

	line-height: 20px;
	
}

#news_box li .new_box_title span a:hover{
	background-color: #CCC;
}

#news_box li p{
	padding-left: 100px;
	font-size: 10px;
	padding-top: 8px;
	}

#news_box li a,
#news_box li a:link,
#news_box li a:visited{
	color: #000;
	text-decoration: none;
	font-weight: bold;
}

#news_box li a:hover{
	color: #666;
}

.banner p{
	font-size: 10px;
	padding-top: 8px;
	padding-bottom: 12px;
	}

ul.link_btn{
	list-style-type: none;
	border-top: 1px solid #E5E5E5;
	}

ul.link_btn li{
	border-bottom: 1px solid #E5E5E5;
	}



/*------------------------------------------------------------------------------
archive
------------------------------------------------------------------------------*/
.archive_box{
	width: 1000px;
	}

.archive_box h2{
	padding-top: 1em;
	}
	
.archive_box h2 a,
.archive_box h2 a:link,
.archive_box h2 a:visited{
	font-weight: bold;
}

.archive_box h2 a:hover{
}

.archive_box p.h3t{
	color: #666666;
	font-size: 10px;
	padding-bottom: 5px;
	margin-bottom: 0em !important;
}
.archive_box h3{
	color: #666666;
	font-size: 10px;
	padding-bottom: 30px;
}

#archive .grid3 h2{
	font-weight: bold;
	}

#archive .grid3 img,
#exhibition .grid3 img{
	margin-bottom: 0px;
	padding-bottom: 0px;
	}

#archive .grid3 h3{
	margin-top: 0px;
	padding-top: 3px;
	}

#archive .grid3 h3 a,
#archive .grid3 h3 a:link,
#archive .grid3 h3 a:visited{
	font-size: 10px;
	font-weight: normal;
	color: #666;
}

#archive .grid3 h3 a:hover{
	color: #999;
}


.archive_side{
	margin-bottom: 200px;
}

/* 2014.01.27 追記 */
.archive-area{
	overflow: hidden;
}
.archive-area-photo{
	float: left;
	width: 730px;
}
.archive-area-photo img{
	width: 100%;
	height: auto;
}
.archive-area-comment {
	float: right;
	width: 230px;
}
.archive-area-comment h2 {
	font-size: 100% !important;
	font-weight: normal !important;
}
.archive-area-comment p {
    color: #333;
    line-height: 180%;
    margin-bottom: 20px;
}


/*------------------------------------------------------------------------------
PROJECT
------------------------------------------------------------------------------*/
.project_box{
		padding-left: 20px;
	}

.project_box h2{
	font-size: 28px;
	font-weight: bold;
	}

#project h3 img{
	margin-bottom: 0px;
	}

.pro_box{
	width: 720px;
	}

.pro_box_L{
	width: 150px;
	float: left;
	}

.pro_box_R{
	width: 540px;
	float: right;
	}




/*------------------------------------------------------------------------------
news
------------------------------------------------------------------------------*/

#main .news_entry #news_box li{
	list-style-type: none;
	width: 740px;
	line-height: 160%;
	padding-top: 10px;
	padding-bottom: 30px;
	padding-right: 0px;
	}

.news_entry h2{
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 1.5em;
	}

.entry-meta{
		padding-bottom: 1.5em;
	}
	
#news_box p.page-title{
	padding-bottom: 2em;
	}

#news_single{
	width:740px;
	}

#news_single h2{
	font-size: 16px;
	font-weight: bold;
	}
	
.news_single_date{
	color: #666;
	padding-bottom: 2em;
	}
	
#news_single span{
	
	}

#news_single span{
	
	}

#news_single span a,
#news_single span a:link,
#news_single span a:visited{
	
}

#news_single span a:hover{
	
}

#nav-below{
	width:100%;
	padding-top: 80px;
	}

.nav-previous{
	float: left;
}

.nav-next{
	float: right;
	}

#nav-below span{
	color: #000;
	}

	
#pan{
	font-size: 10px;
	color: #999;
	padding-bottom: 2em;
	}

#pan a,
#pan a:link,
#pan a:visited{
	color: #999;
}

#pan a:hover{
	color: #CCC;
	text-decoration: underline;
}

.side_under h3{
	font-size: 12px;
	padding-top: 40px;
	padding-bottom: 10px;
	}
	
.side_news_entry{
	margin-bottom: 2em;
	}
	
.side_under .news_meta{
	font-size: 11px;
	line-height: 180%;
	color: #666;
	padding-top: 3px;
	padding-bottom: 3px;
	}


/*------------------------------------------------------------------------------
comapny
------------------------------------------------------------------------------*/

.comapny_box{
	padding-left: 0px;
	}

.comapny_box h5{
	color: #999;
	line-height: 180%;
	}

/*------------------------------------------------------------------------------
atelier
studio
------------------------------------------------------------------------------*/
	
.atelier_box.
.studio_box {
	padding-left: 0px;
	}

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

.contact_box{
	padding-left: 0px;
	}

.contact_box h5{
	color: #999;
	margin-bottom: 4em;
	}

.contact_box table td{
	padding-right: 10px;
	padding-bottom: 10px;
	font-size: 12px;
	color: #333;
	vertical-align: top;
	}

.contact_box table  td input{
	width: 400px;
	}

.contact_box table td textarea{
		width: 400px;
	}

.contact_box table th{
	padding-top: 20px;
	}

/*------------------------------------------------------------------------------
exhibition
------------------------------------------------------------------------------*/

.exhibition_box{
	padding-left: 0px;
	}

.ex_title{
	font-weight: bold;
	}
.ex_post{
	font-size: 10px;
	color: #666;
}

.ex_meta{
	font-size: 10px;
	color: #666;}

.ex_cate{
	font-size: 10px;
	color: #666;
	margin-bottom: 2em;
}

#exhibition #main h2{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 0px;
	padding-bottom: 0px;	
	}

#exhibition .news_single_date{
	font-size: 10px;
	margin-bottom: 2em;
	}

#exhibition #main .exhibition_box{
		width: 1000px;
		padding-left: 0px;
	}


/* kaga  */
.cateStamp {
	color: #FFF;
	line-height: 17px;
	font-size: 10px;
	font-weight: bold;
	margin-left: 8px;
}
.cateStamp a,
.cateStamp a:link,
.cateStamp a:visited{
	color: #FFF;
	padding-right: 4px;
	padding-left: 4px;
	background-color: #999;
}

.cateStamp a:hover{
	background-color: #CCC;
}

.snsBtn {
	padding-top: 20px;
	margin-bottom: 20px;
}
#twBtn {
	margin-right: 5px;
	float: left;
}
iframe.twitter-share-button {
    width: 105px!important;
}
#fbBtn {
	margin-right: 5px;
	float: left;
}
.clear {
	clear:both; /*floatの解除*/
}

.textJpn {
	margin-bottom: 2em;
}
.textJpn ul {
	list-style-type: square;
	margin-left: 15px;
}
.textEng {
	font-size: 11px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #82a792;
	padding-bottom: 40px;
	margin-top: -10px;
}
.textEng ul {
	list-style-type: square;
	margin-left: 15px;
}
.textEngUl {
	margin-bottom: 10px;
}
.textEngLi {
	font-size: 11px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #82a792;
	padding-bottom: 22px;
	margin-top: -10px;
	line-height: 18px;
}
.textEngT {
	font-size: 14px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #82a792;
	padding-bottom: 15px;
	margin-top: 0px;
}

/*---------- English style 2014.02.04 */
.comapny_box,
.project_box,
.atelier_box,
.studio_box,
.contact_box {
	width: 1000px;
	position: relative;
}
#lang_switch{
	position: absolute;
	right: 0;
	color: #999999;
    font-size: 10px;
}
#lang_switch a{
	color: #999999;
    font-size: 10px;
}
#lang_switch a:hover{
	color: #CCC;
    text-decoration: underline;
}
.lang_active{
	color: #000;
}
.en_title {
	font-size: 14px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding-bottom: 22px;
	margin-top: 0px;
}
.en_list {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	padding-bottom: 22px;
	margin-top: -10px;
	line-height: 180%;
}
.en_line{
	padding-left: 20px;
	padding-bottom: 40px;
}
.en_line li{
	padding-bottom: 5px;
}
.en_word{
	line-height: 160% !important;
}




#cateMenu {
	padding-bottom: 60px;
}
#cateMenu li {
	float: left;
	list-style: none;
	margin-right: 20px;
}
#archive_single{
	width: 1000px;
}
#cateHeader {
	display: none;
}
#cateHeader #cTitle {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 36px !important;
	font-weight: bold;
	padding-bottom: 30px;
}
.worksCurrent {
	text-decoration: underline;
}


p.pCate {
	display: none;
	margin: 20px 0;
}
p.cateRead {
	margin-bottom: 40px;
}

#exContent h2 {
	padding-bottom: 10px !important;
}
#exContent p {
	margin-bottom: 0;
	margin-top: 5px;
}
#exContent p.ecp {
	margin: 20px 0;
}

#worksPerformance {
	text-align: center;
}

.stuBox {
	margin: 65px 0 23px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 13px;
}
.stuBox .stuL {
	float: left;
}
.stuBox .stuR {
	float: left;
	margin-left: 40px;
	position: relative;
}
.stuBox .stuR p {
	width: 360px;
}
#stu1 {
	height: 495px;
}
#stu2,
#stu3,
#stu4 {
	height: 323px;
}
#stu1 p,
#stu2 p,
#stu3 p,
#stu4 p {
	position: absolute;
	bottom: 0px;
}
.stdP {
	margin-top: 10px;
}


/** WEBフォント **/
@font-face{ 
	font-family: 'LiberationSans-Regular-webfont';
	src: url('fonts/liberationsans_regular_macroman/LiberationSans-Regular-webfont.eot');
	src: url('fonts/liberationsans_regular_macroman/LiberationSans-Regular-webfont.eot?iefix') format('eot'),
	     url('fonts/liberationsans_regular_macroman/LiberationSans-Regular-webfont.woff') format('woff'),
	     url('fonts/liberationsans_regular_macroman/LiberationSans-Regular-webfont.ttf') format('truetype'),
	     url('fonts/liberationsans_regular_macroman/LiberationSans-Regular-webfont.svg#webfont') format('svg');
}
@font-face{ 
	font-family: 'LiberationSans-Bold-webfont';
	src: url('fonts/liberationsans_bold_macroman/LiberationSans-Bold-webfont.eot');
	src: url('fonts/liberationsans_bold_macroman/LiberationSans-Bold-webfont.eot?iefix') format('eot'),
	     url('fonts/liberationsans_bold_macroman/LiberationSans-Bold-webfont.woff') format('woff'),
	     url('fonts/liberationsans_bold_macroman/LiberationSans-Bold-webfont.ttf') format('truetype'),
	     url('fonts/liberationsans_bold_macroman/LiberationSans-Bold-webfont.svg#webfont') format('svg');
}

#lang_switch,
#pan,
#cateMenu,
.footer_box {
	font-family: 'LiberationSans-Regular-webfont';
}
.menu {
	font-family: 'LiberationSans-Bold-webfont';
	font-size: 11px !important;
}
.stuBox span {
	font-family: 'LiberationSans-Bold-webfont';
	font-size: 15px;
}