/*
	Theme Name: Pinbin
	Theme URI: http://colorawesomeness.com/themes/pinbin
	Description: Pinbin WordPress theme is a fully responsive theme that looks great on any devices including iPad, iPhone or any other mobile device. This theme is inspired by Pinterest grid system that puts images first.  Pinbin is a perfect fit for photographers, web designers and anyone who likes to show off their photos, mockups, infographics and any other images.  Some other great features are sticky (fixed) navigation, translation ready, responsive layout, simplicity and minimalism.
	Author: Color Awesomeness
	Author URI: http://colorawesomeness.com/themes
	Version: 1.4.7
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Tags: light, white, brown, gray, black, photoblogging, one-column, flexible-width, custom-background, custom-menu, featured-images, full-width-template, microformats, theme-options
*/

/* colour styles : reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  border: 0;
  font-size: 100%;
  padding: 0;
  margin: 0;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}


body  { 
  font-size:12px; 
  line-height:20px;  
  font-family: YuGothic,"游ゴシック","メイリオ",Meiryo,sans-serif;
  word-wrap: break-word;
  margin: 0;
}

#wrap { 
  margin:0 auto;
  width:1000px;
  z-index: 1;
  padding-left:10px;
}
hr{
    border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc);
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc);
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc);
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc);
}

/* Typohraphy
--------------------------------------------------------------*/
/* Fonts
--------------------------------------------------------------*/
h2,h3,h4,h5 {
  color: #111;
}
h1 {
  font-size: 36px;
  line-height: 46px;
  padding-bottom: 5px;
  padding-top: 5px;
  color: #123159;

}
h2 {
  font-size: 24px;
  line-height: 32px;
  padding-bottom: 0.75em;
}
h2 a.front-link {
  text-decoration: none;
  color:#123159;
}
h2 a.front-link:hover {
  text-decoration: underline;
  color: #5D82B1;
}
h3 {
  font-size: 18px;
  line-height: 28px;
  padding-bottom: 0.75em;
}
h4 {
  font-size: 16px;
  line-height: 28px;
}
h5 {
  font-size: 14px;
  line-height: 26px;
  font-weight: normal;
}
h6 {
  font-size: 13px;
  line-height: 24px;
  color: #858585;
}
p {
  font-size: 135%;
  color: #454545;
  line-height: 1.9;
  padding-top: 8px;
  padding-bottom: 10px;

}
/* Lists -bullet points
--------------------------------------------------------------*/
ul li {
  font-size: 13px;
  padding-left: 10px;
}
ol {
  margin-left: 25px;
}
ol li {
  font-size: 12px;
  color: #858585;
  padding-left: 10px;
  margin-bottom: 7px;
}
ul,ol {
  margin: 0 0 1.5em 3em;
}
ul {
  list-style: disc;
  margin-left: 20px;
}
ol {
  list-style: decimal;
}
ol li ol {
  list-style-type: lower-alpha;
}
ol li ol li ol {
  list-style-type: lower-roman;
}
ul ul,ol ol,ul ol,ol ul {
  margin-bottom: 0;
  margin-left: 1.5em;
}

b,strong {
  font-weight: bold;
}
/* Text link style
--------------------------------------------------------------*/
a:link {
  color: #123159;
  text-decoration: underline;
}
a:visited {
  color: #111;
  text-decoration: underline;
}
a:hover {
  color: #111;
  text-decoration: none;
}
a:active {
  color: #123159;
  text-decoration: none;
}
a:focus {
  outline-style: none;
}
/*Top Menu


img.waku {
	border:1px solid #dddddd;
}
--------------------------------------------------------------*/
#top-menu
{
 display: block;
 list-style-type: none;
 margin: 0 auto;
 height:120px; 
 max-width:876px;
}
.logo-left{
 margin:0;
 float:left;	
}
.menu-right{
 float:left;
 margin-top:95px;
 color:#123159;

}
.menu-right ul{
 list-style-type: none;
 
}
.menu-right ul li{
 float:left;
 font-size: 120%;

}
.menu-right ul li a{
 float:left;
 text-decoration:none;
 color:#123159;

}
.menu-right ul li a:hover{
 float:left;
 text-decoration:underline;
}
.shop{
 padding-top:15px;
 text-align:right;

}

.shop ul{
 list-style-type: none;
}

.shop ul li{
  font-size: 120%;
 
}
/*
.shop a:hover{
 background: url(./images/b-2-u2144-r-fr.png) top center no-repeat;

}
*/
#top-menu:after {
	content : "";
	display : block;
	height : 0;
	clear : both;
}

#top-img{
 margin:0 auto;
 max-width:876px;
 z-index: 2;
}
.copy{
  margin-left:162px;
  margin-top:-180px;
  z-index: 3; 
  
 
}
.yellow{
 height:120px;
 background-color:#FAFED9;
 width:100%;
 z-index: 1;
 margin-top:-105px;
}



/* Main Navigation
--------------------------------------------------------------*/

ul.menu
{
 display: block;
 list-style-type: none;
 margin: 0 auto;
 padding-top:4px;
 height:135px; 
 width:876px;
 
}
ul.menu li{
 float:left;
}
#kiji-ja
{
	width:292px;
	height: 132px;
	position: relative;
	background: transparent url("./images/index_01-off.png") no-repeat left top;
}

#kiji-ja.active
{
	margin: 0px;
	background: transparent url("./images/index_01-on.png") no-repeat left top;
}
#kiji-ja:hover
{     
	margin: 0px;
	background: transparent url("./images/index_01-on.png") no-repeat left top;
}

#koe-ja{
	width:292px;
	height: 132px;
	position: relative;
	background: transparent url("./images/index_02-off.png") no-repeat left top;
}


#koe-ja.active{
 	margin: 0px;
	background: transparent url("./images/index_02-on.png") no-repeat left top;
}
#koe-ja:hover{
	margin: 0px;
	background: transparent url("./images/index_02-on.png") no-repeat left top;
}

#cafe-ja{
	width:262px;
	height: 132px;
	position: relative;
	background: transparent url("./images/index_03-off.png") no-repeat left top;
}
#cafe-ja.active{
	margin: 0px;
	background: transparent url("./images/index_03-on.png") no-repeat left top;
}
#cafe-ja:hover{
	margin: 0px;
	background: transparent url("./images/index_03-on.png") no-repeat left top;
}



#kiji-en
{
	width:292px;
	height: 132px;
	position: relative;
	background: transparent url("./images/e_index_01-off.png") no-repeat left top;
}

#kiji-en.active
{
	margin: 0px;
	background: transparent url("./images/e_index_01-on.png") no-repeat left top;
}
#kiji-en:hover
{     
	margin: 0px;
	background: transparent url("./images/e_index_01-on.png") no-repeat left top;
}

#koe-en{
	width:292px;
	height: 132px;
	position: relative;
	background: transparent url("./images/e_index_02-off.png") no-repeat left top;
}


#koe-en.active{
 	margin: 0px;
	background: transparent url("./images/e_index_02-on.png") no-repeat left top;
}
#koe-en:hover{
	margin: 0px;
	background: transparent url("./images/e_index_02-on.png") no-repeat left top;
}

#cafe-en{
	width:262px;
	height: 132px;
	position: relative;
	background: transparent url("./images/e_index_03-off.png") no-repeat left top;
}
#cafe-en.active{
	margin: 0px;
	background: transparent url("./images/e_index_03-on.png") no-repeat left top;
}
#cafe-en:hover{
	margin: 0px;
	background: transparent url("./images/e_index_03-on.png") no-repeat left top;
}
.main-nav {
// margin-top:-115px;
 position: relative; 
  display: block;
  float: left;
  width: 100%;
  z-index: 3;
}

#main-nav-wrapper { 
  background: #FAFED9;
  float: left;
  width: 100%;
  min-height: 42px;
  height:135px;
}
.fixed {
	position: fixed;
        top:0px;
}

#header {
  padding-bottom: 10px;
}
/* Logo
--------------------------------------------------------------*/
#logo img {
  max-height: 50px;
  padding: 0 0 0 3%;
  position: relative;
  float: left;
}
#logo img:hover,.pinbin-image img:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  opacity: 0.8;
}
#logo img,.pinbin-image img {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  -o-transition: opacity 0.3s linear;
  -ms-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}
/* Footer
--------------------------------------------------------------*/
#footer-area {
  width:100%;
  margin:0 auto;
  display: inline;
  float: left;
  padding-top: 10px;
  margin-top:30px;

  clear: both;
  border-top: 2px solid #ccc;
}
#footer-area .widget {
  width: 265px;
  margin-right: 15px;
  padding-top: 15px;
  display: inline;
  float: left;
  font-size: 12px;
  color: #454545;
  line-height: 18px;
}
#footer-area .widget h3 {
  color: #858585;
  padding-left: 10px;
  margin-bottom: 10px;
}
#footer-area .widget p {
  color: #111;
}
#footer-area .widget ul {
  margin-left: 0px;
}
#footer-area .widget li {
  color: #858585;
}
#footer-area .widget a {
  color: #123159;
}
#footer-area .widget a:hover {
  color: #111;
}
#footer-area .widget-copy {
  width: 250px;
  overflow: hidden;
  display: inline;
  float: left;
  margin-left: 10px;
}
#footer-area .widget-copy a {
  text-decoration: none;
}
.widget img {
  max-width: 100%;
  height: auto;
}
#footer-area .wp-caption {
  border: 1px solid #999;
}
#searchsubmit,button,.comment-submit,input[type="submit"] {
  clear: both;
  width: auto;
  height: auto;
  line-height: 18px;
  background: url(./images/button-back.gif) bottom left repeat-x !important;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.45 ) !important;
  min-width: 0;
}
#searchsubmit:hover,.comment-submit:hover {
  background: #fff url(./images/button-back-over.gif) bottom left repeat-x;
  border: 1px solid #959595;
}
/* Footer copyright
--------------------------------------------------------------*/
#copyright {
  clear: both;
  width: 100%;
  border-top: 2px solid #fff;
  display: inline;
  float: left;
  margin-top: 20px;
  padding-top: 10px;
  margin-bottom: 20px;
}
#copyright p {
  padding-top: 15px;
  color: #4f5356;
  font-size: 12px;
}
#copyright a {
  color: #858585;
  text-decoration: none;
}
#copyright a:hover {
  color: #111;
  text-decoration: underline;
}
/* Post and page style
--------------------------------------------------------------*/
#main-nav-wrapper,nav {
  -webkit-box-shadow: 0 4px 6px -5px #555;
  box-shadow: 0px 4px 6px -5px #555;
}
#post-area{
  padding-left:20px;
}
.type-post,.type-page,.type-attachment,#post-area .post {
  border-right: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
  box-shadow: 0 4px 13px -5px #555555;
  position: relative;

}
.type-post,.type-page,.type-attachment {
  margin:0 auto;
  margin-left:55px;
  width: 876px;
  background: #fff;
  margin-right: 10px;
  margin-top: 15px;
  margin-bottom:15px;
  float: left;
}
.type-post {
  position: relative;
    -webkit-box-shadow: 0 4px 15px -5px #555;
  box-shadow: 0 4px 13px -5px #555;
}

#post-area span img{
-webkit-filter: grayscale(100%);
filter: gray;
}
.pinbin-image img {
  z-index: 1;
}
.pinbin-category {
  position: absolute;
  width: auto;
  background: #123159;
  zoom: 1;
  filter: alpha(opacity=70);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
  opacity: 0.7;
  margin-top: -27px;
  z-index: 1;
  height: 30px;
  overflow: hidden;
  left: 0;
}
.pinbin-category p {
  margin: 0;
  padding: 0;
  line-height: 30px;
  padding-left: 20px;
  padding-right: 40px;
  color: #fff;
  font-style: bold;
}
.pinbin-category a {
  color: #fff;
  font-style: bold;
  text-decoration: none;
}
.pinbin-category a:hover {
  color: #5D82B1;
  text-decoration: none;
}
.pinbin-copy {
  padding: 20px 8%;
}
.pinbin-meta {
  width: 100%;
  display: inline-block;
  color: #8e8e8e;
  font-size: 11px;
  margin-bottom: 10px;
  padding-bottom: 0px;
  border-bottom: 1px dotted #cccccc;
}
.size-full {
  max-width: 100%;
  height: inherit;
}
#post-area .sticky {
  background: #ececec !important;
}
#post-area .sticky:hover {
  background: #fff !important;
}

/*脚注*/
.footnote {
     display:block;
     margin:5px 8px 0 0;
     width:100%;
     margin-bottom: 10px;
     padding-bottom: 0px;
     border-bottom: 1px dotted #cccccc;

}
.footnote  span{
    clear:both;

}
.footnote p{
	float:left;
	line-height:80%;
        font-size:6px;
	}
.photo img{
	float:left;
	line-height:80%;
        font-size:6px;
        margin-top:0;
	}
	
	
.footnote p img{
	border:0;
	display : block;
	margin: 0 8px 0 0 ;
	padding: 0;
}

.profile{
     font-size:12px;
     margin-top:10px;
     color:#6E6E6E;
     
     
}		
.footnote p.profile a:hover {
    background-color:#EDEEEF;
}
.footnote p.profile a:link {
    background-color:#EDEEEF;
}

.footnote:after {
	content : "";
	display : block;
	height : 0;
	clear : both;
}
/* Post style on frontpage
--------------------------------------------------------------*/
#post-area .post {
  width: 300px;
  background: #FFF;
  margin-right: 10px;
  margin-top: 15px;
  margin-left:5px;
}
#post-area .post .pinbin-copy {
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: hidden;
  clear: both;
  width: 250px;
 
}

#post-area .post .pinbin-copy p {
   line-height: 1.8;
}

#post-area .post .pinbin-date {
  width: 115px;
  color: #8e8e8e;
  font-size: 11px;
  border-bottom: 1px dotted #cccccc;
  padding-bottom: 0;
  padding-top: 0;
}
#post-area .post .pinbin-link a {
  text-decoration: none;
  background: #123159;
  padding: 5px 10px;
  color: #fafafa;
  font-size: 12px;
  float: right;
  cursor: pointer;
  position: absolute;
  margin-left: 245px;
  margin-top: -15px;
}
#post-area .post .pinbin-link a:hover {
  background: #777;
}
#post-area .post .pinbin-link a,.post-next a,.post-prev a,.post-next a,.post-prev a {
  -webkit-transition: background 0.3s linear;
  -moz-transition: background 0.3s linear;
  -o-transition: background 0.3s linear;
  -ms-transition: background 0.3s linear;
  transition: background 0.3s linear;
}
/* Single post navigation
--------------------------------------------------------------*/
.post-nav {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-top: 15px;
}
.post-next a,.post-prev a {
  text-decoration: none;
  background: #123159;
  padding: 8px 9px;
  color: #fafafa;
  font-size: 18px;
  text-transform: uppercase;
  float: right;
  cursor: pointer;
  position: absolute;
}
.post-next a {
  margin-left: 830px;
  margin-top: 15px;
}
.post-prev a {
  position: absolute;
  margin-left: -10px;
  margin-top: 15px;
}
.post-next a:hover,.post-prev a:hover {
  background: #5D82B1;
}
.posttags {
  font-color: #8e8e8e;
  font-size: 11px;
  float: right;
}
.view-next {
  float: right;
}
.view-previous {
  float: left;
}
.view-previous,.view-next {
  margin-top: 20px;
}
/* Comments
--------------------------------------------------------------*/
.comments-area ol {
  padding: 0;
}
.comments-area li {
  width: 100%;
  clear: both;
  float: left;
  margin-bottom: 10px;
}
.comments-area {
  margin-left: -10px;
}
.comment {
  border-bottom: 1px solid #8e8e8e;
  width: 630px;
  margin-left: -15px;
}
.avatar {
  display: none;
}
.reply {
  display: none;
}
.comment-meta a {
  text-decoration: none;
}
.comment-author {
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
}
#comment {
  width: 97%;
  height: 180px;
}
.comment-form-author,.comment-form-email,.comment-form-url {
  padding: 0;
}
label {
  display: inline-block;
}
.text-input,#s,input[type=text],input[type=password],textarea {
  clear: both;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  padding: 7px;
  color: #555;
  font-size: 12px;
}
#s {
  width: auto;
  margin-top: 3px;
}
.comment-input {
  clear: both;
  border: 1px solid #ccc;
  margin-bottom: 5px;
  width: 96%;
  padding: 7px;
  color: #555;
  font-size: 12px;
}
.bypostauthor {
}
/* Other
--------------------------------------------------------------*/
.clear {
  clear: both;
}
.aligncenter {
  display: block;
  margin: 0 auto;
}
.alignleft {
  float: left;
  margin: 10px 10px 20px 0;
}
.alignnone {
  margin: 10px 10px 20px 0;
}
.alignright {
  float: right;
  margin: 10px 0 20px 15px;
}
.wp-caption {
  text-align: left;
  margin-top: 5px;
  margin-bottom: 5px;
}
.wp-caption-text {
  margin-top: 2px;
  text-align: left;
  font-size: 11px;
  color: #999;
}
.wp-caption {
  border: 1px solid #ccc;
  max-width: 99%;
}
.wp-caption.aligncenter,.wp-caption.alignleft,.wp-caption.alignright {
  margin-bottom: 1.5em;
}
.wp-caption img {
  display: block;
  margin: 1.2% auto 0;
  max-width: 98%;
}
.wp-caption-text {
  text-align: center;
  font-size: 80%;
}
.wp-caption .wp-caption-text,.gallery-caption {
  margin: 0;
}
.pagelink {
  margin-top: 20px;
  display: block;
  position: relative;
  clear: both;
}

blockquote {
    background: none repeat scroll 0 0 #FAFED9;
    color: #6A6A6A;
    display: block;
    font-size: 1.07143em;
    font-style: normal;
    padding: 10px 15px 10px 15px ;
}
/* Table
--------------------------------------------------------------*/
table {
  margin: 0 0 1.5em;
  width: 100%;
}
td,th {
  padding: 5px;
  border: 1px solid #eaeaea;
}
/*
td:hover {
  background: #eaeaea;
}

td.item{
  background: #eaeaea;
}
--*/
tr.alternate {
  background-color: #efefef;
}
th {
  font-weight: bold;
  background: #999;
  color: #fff;
  text-align: center;
}
pre {
  background: #efefef;
  font-size: 13px;
  line-height: 1.2;
  margin-bottom: 1.6em;
  padding: 1.6em;
  overflow: auto;
  max-width: 100%;
}
dt {
  font-weight: bold;
}
dd {
  margin: 0 1.5em 1.5em;
}
.attachment-full {
  width: 100%;
  height: 100%;
}
select {
  width: 100%;
}
.main-nav select {
  display: none;
}
/* mobile styles
-----------------------------------------------*/
/* For devices with screen size lower than 480px */
@media only screen and (max-width: 480px) {
  #wrap {
  width: 320px;
  margin: 0 auto;
  overflow: hidden;
}
h1 {
  font-size: 24px;
  line-height: 31px;
}
iframe {
  width: 100%;
  height: auto;
}
.post-prev a {
  background: #123159;
  padding: 10px 13px;
  font-size: 12px;
  margin-left: -10px;
  margin-top: -20px;
}
.post-next a {
  margin-left: 252px;
  margin-top: -20px;
}
.post-next a:hover,.post-prev a:hover {
  background: #5D82B1;
}
.posttags {
  float: left;
}
.type-post .post-next a {
  margin-left: 253px;
}
.single-post .type-post {
  width: 310px;
  margin: 0 auto;
}
.type-page img {
  width: 100%;
  height: inherit;
}
.type-post .pinbin-copy {
  width: 280px;
  padding: 15px;
}
.type-page {
  width: 290px;
  margin:0;
  padding: 10px 3% 20px;
}
.type-post {
  width: 310px;
}
#comment {
  width: 97%;
}
#comment-form {
  width: 285px;
}
h2 {
  font-size: 18px;
  line-height: 25px;
}
.size-full {
  width: 290px !important;
}
.comments-area li {
  width: 290px;
  clear: both;
  padding: 0px;
}
.post-nav {
  margin-top: 14px;
}
.pinbin-image img {
  width: 100%;
  height: auto;
}
#post-area {
  max-width: 310px;
  margin: 0 auto;
  padding-left:0px;
}
.type-post h1:first-child {
  padding-top: 25px;
}
#post-area .post .pinbin-link a {
  margin-left: 245px;
}
#post-area .post .pinbin-copy {
  width: 280px;
}
.page .pinbin-copy {
  padding: 0;
}
#post-area .post {
  width: 310px;
  display: block;
}

}
/* For devices with screen size lower than 767px */
@media only screen and (max-width: 767px) {
  /* Navigation */
.main-nav ul {
  display: none;
}
.main-nav select {
  display: inline;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url('images/mobile-menu-icon.png') no-repeat scroll right center #FFF;
  appearance: none;
  padding: 8px 10px;
  margin: 8px 15px;
  border: 1px solid #eaeaea;
  border-radius: 5px;
  width: 40%;
}
#main-nav-wrapper {
  height: 42px;
  display: inline;
  float: none;
}
.main-nav {
  background: #fff;
}
.wp-caption {
    border: 0px;!important
    max-width: 99%;
}
}