@import 'http://lib.tikeda.net/webfonts/richard_mirrer_sounded-book/richard_mirrer_sounded-book.css';
@import 'http://fonts.googleapis.com/css?family=Oswald';
@import 'http://fonts.googleapis.com/css?family=Playball';

body {
  background:#fff;
  color:#000;
  font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

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

a:hover {
  color:#CC3366;
}

img {
  border:0;
}

h1,h2,h3 {
  font-size:100%;
  margin:0;
  padding:0;
  font-weight:normal;
}

#globalheader-container {
    border-bottom: 1px solid #ccc;
    background: #f3f3f3;
}

#container {
  text-align:center;
}

#container-inner {
  width:720px;
  text-align:left;
  margin:0 auto;
}

#blog-title {
  margin-top:40px;
  margin-bottom:40px;
  text-align: center;
}

#blog-title h1 {
  font-family:"RICHARDMILLERROUNDED-Book", sans-serif;
  font-size:64px;
  height:auto;
  margin-bottom: 7px;
}

#blog-title h2 {
  font-size:12px;
  margin-left:10px;
}


.date {
  padding-bottom:0px;
  font-size:12px;
  color:#CC3366;
}

.date a {
  color:#CC3366;     
}

article {
  font-size:16px;
  line-height:1.9;
  position:relative;
  margin-bottom:70px;
}

article img {
      max-width: 100%;
      vertical-align: top;
      margin-bottom: 5px;
    }

article pre{
  background:#f7f7f7;
  padding:10px 15px;
  font-family:"arial","Helvetica",sans-serif;
  color:#666;
  border:1px solid #eee;
  overflow:auto;
  font-size:12px;
}

article pre a.keyword{
  color:#666 !important;
}

article h1 {
  font-family:"Helvetica","arial",sans-serif;
  font-size:26px;
  font-weight:bold;
  padding-top:3px;
  margin-bottom: -10px;
}

article h1 a{
      color: #000;
    }
    
    article h2 {
     font-weight: bold;   
     font-size: 20px;
    }

article blockquote {
  margin: 25px 0;   
  border-left: 5px solid #ddd;
  color: #898989;
  padding:7px 0 7px 20px;
}

article blockquote p {
  padding: 0;
  margin: 0;
}

.entry-header-menu {
  position:absolute;
  top:0;
  right:0;
  font-size: 12px;
  color: gray;
}

article a {
    color: #007dbe;
    }
    
    article a:hover {
       text-decoration: underline;   
    }
    

article a.keyword {
  color: #000;
  text-decoration: none;
}

.entry-footer-section {
  color:#999;
  font-size: 12px;
  margin-top:0;
  padding-top:0;
  margin-top:0;
}

.entry-footer-section a {
  color:#999;
}

.hatena-asin-detail-info {
  margin-left: 130px;   
}

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

.comment li{
  border-top:1px solid #eee;
  padding:10px 0;
}

.comment li img {
  vertical-align:middle;
  margin-right:3px;
  margin-bottom:2px;
}

.comment li p {
  margin:0;
  padding:0;
}

.comment li .comment-metadata a{
  color:#999;
}

.comment li .comment-user-name {
  font-weight:bold;
}

.leave-comment-title {
  display:inline-block;
  padding:4px 10px;
  line-height:1.5;
  background:#f7f7f7;
  color:#888;
  text-shadow:1px 1px 0 #fff;
  border:1px solid #ccc;
 -moz-border-radius:15px;
 -moz-transition:all 0.2s ease;
 -webkit-border-radius:15px;
 -webkit-transition:all 0.2s ease;
}

.leave-comment-title:hover {
  border:1px solid #aaa;
  color:#454545;
  background:#fff;
}

.customized-footer {
/*    display: none; */
    }


div#google_afc_user {
  margin-bottom:10px;
  line-height:1.5;
}

div#google_afc_user li {
  margin-bottom:10px;
}

div#google_afc_user ul .title a {
  text-decoration:none;
  letter-spacing:0;
  color:#666;
}

div#google_afc_user .title {
  font-size:80% !important;
  margin-bottom:5px
}
div#google_afc_user ul .visible_url a {
   color:#666;   
}


aside#box2 {
  margin:20px 0 10px 0;
  background:#f3f3f3;
  border:1px solid #eee;
  padding:10px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
  border-radius:3px;
}

aside#box2 .hatena-module-search-box,
aside#box2 .hatena-module-links{
  display:none;
}

aside#box2 .hatena-module-title{
  padding-bottom:7px;
  font-weight:bold;
  color:#666;
  font-size:80%;
}

aside#box2 .profile-icon {
  float:left;
  margin-right:10px;
  border:1px solid #eee;
}

aside#box2 .hatena-module-body {
  font-size:80%;
  color:#666;
}

aside#box2 .hatena-module-body p{
  margin:0;
  padding:7px 0;
}

aside#box2 .hatena-module-body a {
  color:#666;
}

.hatena-follow-button-box {
  clear:none !important;
}

.pager {
  text-align:right;
}

#footer {
  text-align:center;
  padding:30px;
  font-family:"RICHARDMILLERROUNDED-Book", sans-serif;
}

#footer img{
  vertical-align:middle;
  margin-bottom:3px;
  margin-right:3px;
}

/* comments */

.comment-box {
  font-size: 12px;
  position: relative;
  height: 24px;
}

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

.comment li {
  position: absolute;
  height: 20px;
  width: 18px;
  top: 3px;
  left: 0;
  overflow: hidden;
  z-index: 8888;
  font-size: 10pt;
  border:0;
  padding:5px;
}

.comment li p {
  margin: 0;
  padding: 0;
}

.comment li:hover {
  overflow: visible;
  width: auto;
}

.comment li:nth-child(1)  { left: 150px;}
.comment li:nth-child(2)  { left: 180px;}
.comment li:nth-child(3)  { left: 210px;}
.comment li:nth-child(4)  { left: 240px;}
.comment li:nth-child(5)  { left: 270px;}
.comment li:nth-child(6)  { left: 300px;}
.comment li:nth-child(7)  { left: 330px;}
.comment li:nth-child(8)  { left: 360px;}
.comment li:nth-child(9)  { left: 390px;}
.comment li:nth-child(10) { left: 420px;}
.comment li:nth-child(11) { left: 450px;}
.comment li:nth-child(12) { left: 480px;}
.comment li:nth-child(13) { left: 510px;}
.comment li:nth-child(14) { left: 540px;}
.comment li:nth-child(15) { left: 570px;}
.comment li:nth-child(16) { left: 600px;}
.comment li:nth-child(17) { left: 630px;}
.comment li:nth-child(18) { left: 660px;}
.comment li:nth-child(19) { left: 690px;}
.comment li:nth-child(20) { left: 720px;}

.comment li .comment-user-name{
  width: 20px;
  height: 18px;
  margin-bottom: -30px;
  color: #eee;
  font-weight: bold;
  overflow: hidden;
  font-size: 90%;
  font-family: "helvetica","arial",sans-serif;
}

.comment li .comment-user-name img{
  margin-bottom: 20px;
  border: 1px solid #ddd;
  background: #fff;
  vertical-align: top;
}

.comment li .comment-content{
  background: rgba(0,0,0,0.8);
  padding: 30px 10px 30px 10px ;
  margin-left: -10px;
  color: #ddd;
 -moz-box-shadow: 0 0 6px #bbb;
 -webkit-box-shadow: 0 0 6px #bbb;
  box-shadow: 0 0 6px #bbb;
 -webkit-background-clip:  padding-box;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
  border-radius: 4px;
  opacity: 0;
  min-width: 200px;
  margin-top:0;
  line-height:1.5;
}

.comment li .comment-metadata{
  color: #eee;
  opacity: 0.4;
  margin-top: -30px;
}

.comment li .comment-metadata a{
  color: #fff;
  text-decoration: none;
}

.leave-comment-title {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  width: 120px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  font-family: "helvetica","arial",sans-serif;
  cursor: pointer;
  font-size: 14px;
  margin: 0;
 -moz-transition:all 0.5s ease;
 -webkit-transition: all 0.5s ease;
}

.leave-comment-title: hover {
  opacity: 1;
}

.comment li:hover .comment-user-name{
  height: auto;
  overflow: visible;
}

.comment li:hover .comment-content{
  opacity: 1;
}

.social-buttons {
  padding:15px 0 5px 0;
}

.hatena-fotolife {
  margin-top:5px;
}

.entry-inner .author {
  display:none;
} 
    
    #hatena-logo {
  width:400px;
  height:400px;
  text-align:center;
  margin:10px auto;
  line-height:1;
  position:relative;
}

#hatena-logo .line {
  clear:both;
  display:block;
  margin:0 auto;
  line-height:1;
  vertical-align:top;
}
#t5:target #hatena-logo-inner,
#t6:target #hatena-logo-inner {
 -moz-transform:translate(0,90%)scale(1.6);
 -webkit-transform:translate(0,90%)scale(1.6);
 -o-transform:translate(0,90%)scale(1.6);
 -ms-transform:translate(0,90%)scale(1.6);
  transform:translate(0,90%)scale(1.6);
 -moz-transition:all 1s ease;
 -webkit-transition:all 1s ease;
  transition:all 1s ease;
  line-height:1;
}

.square {
  display:inline-block;
  width:80px;
  height:80px;
  opacity:0;
  background:#c2d7ff;
 -moz-transition:all 1s ease;
 -webkit-transition:all 1s ease;
  transition:all 1s ease;
  line-height:1;
  vertical-align:top;
}

#t1:target .square{
  display:inline-block;
  width:80px;
  height:80px;
  opacity:1;
}

#t2:target .square {
  display:inline-block;
  width:80px;
  height:80px;
  margin:0;
 -moz-transform:scale(0.5,0.2) rotate(0);
 -webkit-transform:scale(0.5,0.2) rotate(0);
 -o-transform:scale(0.5,0.2) rotate(0);
 -ms-transform:scale(0.5,0.2) rotate(0);
  transform:scale(0.5,0.2) rotate(0);
  opacity:1;
}

#t3:target .square {
  display:inline-block;
  width:80px;
  height:80px;
  margin:0;
 -moz-transform:scale(0.5,0.2) rotate(-45deg);
 -webkit-transform:scale(0.5,0.2) rotate(-45deg);
 -o-transform:scale(0.5,0.2) rotate(-45deg);
 -ms-transform:scale(0.5,0.2) rotate(-45deg);
  transform:scale(0.5,0.2) rotate(-45deg);
  opacity:1;
}

#t4:target .square,
#t5:target .square {
  display:inline-block;
  width:80px;
  height:80px;
 -moz-transform:scale(0.5,0.2) rotate(-45deg);
 -webkit-transform:scale(0.5,0.2) rotate(-45deg);
 -o-transform:scale(0.5,0.2) rotate(-45deg);
 -ms-transform:scale(0.5,0.2) rotate(-45deg);
  transform:scale(0.5,0.2) rotate(-45deg);
  margin:-6.7% -2%;
  opacity:1;
}

#t6:target .square {
  display:inline-block;
  width:80px;
  height:80px;
 -moz-transform:scale(0.5,0.2) rotate(-45deg);
 -webkit-transform:scale(0.5,0.2) rotate(-45deg);
 -o-transform:scale(0.5,0.2) rotate(-45deg);
 -ms-transform:scale(0.5,0.2) rotate(-45deg);
  transform:scale(0.5,0.2) rotate(-45deg);
  margin:-6.7% -2%;
  opacity:1;
}


#t5:target .line5 .square {
  margin-top:-5%;
  opacity:1;
}

#t6:target .line5 .square {
  margin-top:-40%;
  opacity:1;
 -moz-transform:translate(0, 0px) scale(0.1,0.2) rotate(45deg);
 -webkit-transform:translate(0, 0px) scale(0.1,0.2) rotate(45deg);
 -o-transform:translate(0, 0px) scale(0.1,0.2) rotate(45deg);
 -ms-transform:translate(0, 0px) scale(0.1,0.2) rotate(45deg);
  transform:translate(0, 0px) scale(0.1,0.2) rotate(45deg);
  background:#f9d958 !important;
}

#t6:target .line1 .square:nth-child(1) {
 -moz-transform:skew(-47deg ) translate(30px, 15px) scale(0.2,0.3) rotate(60deg);
 -webkit-transform:skew(-47deg ) translate(30px, 15px) scale(0.2,0.3) rotate(60deg);
 -o-transform:skew(-47deg ) translate(30px, 15px) scale(0.2,0.3) rotate(60deg);
 -ms-transform:skew(-47deg ) translate(30px, 15px) scale(0.2,0.3) rotate(60deg);
  transform:skew(-47deg ) translate(30px, 15px) scale(0.2,0.3) rotate(60deg);
}

#t6:target .line1 .square:nth-child(2) {
 -moz-transform:skew(47deg ) translate(-30px, 15px) scale(0.2,0.3) rotate(-60deg);
 -webkit-transform:skew(47deg ) translate(-30px, 15px) scale(0.2,0.3) rotate(-60deg);
 -o-transform:skew(47deg ) translate(-30px, 15px) scale(0.2,0.3) rotate(-60deg);
 -ms-transform:skew(47deg ) translate(-30px, 15px) scale(0.2,0.3) rotate(-60deg);
  transform:skew(47deg ) translate(-30px, 15px) scale(0.2,0.3) rotate(-60deg);
}

#t6:target .line2 .square:nth-child(1) {
 -moz-transform:skew(-45deg ) translate(50px, 10px) scale(0.3,0.5) rotate(70deg);
 -webkit-transform:skew(-45deg ) translate(50px, 10px) scale(0.3,0.5) rotate(70deg);
 -o-transform:skew(-45deg ) translate(50px, 10px) scale(0.3,0.5) rotate(70deg);
 -ms-transform:skew(-45deg ) translate(50px, 10px) scale(0.3,0.5) rotate(70deg);
  transform:skew(-45deg ) translate(50px, 10px) scale(0.3,0.5) rotate(70deg);
}

#t6:target .line2 .square:nth-child(2) {
 -moz-transform:translate(0, 15px) scale(0.6,1.2) rotate(45deg);
 -webkit-transform:translate(0, 15px) scale(0.6,1.2) rotate(45deg);
 -o-transform:translate(0, 15px) scale(0.6,1.2) rotate(45deg);
 -ms-transform:translate(0, 15px) scale(0.6,1.2) rotate(45deg);
  transform:translate(0, 15px) scale(0.6,1.2) rotate(45deg);
}

#t6:target .line2 .square:nth-child(3) {
 -moz-transform:skew(45deg ) translate(-50px, 10px) scale(0.3,0.5) rotate(-70deg);
 -webkit-transform:skew(45deg ) translate(-50px, 10px) scale(0.3,0.5) rotate(-70deg);
 -o-transform:skew(45deg ) translate(-50px, 10px) scale(0.3,0.5) rotate(-70deg);
 -ms-transform:skew(45deg ) translate(-50px, 10px) scale(0.3,0.5) rotate(-70deg);
  transform:skew(45deg ) translate(-50px, 10px) scale(0.3,0.5) rotate(-70deg);
}

#t6:target .line3 .square:nth-child(1) {
 -moz-transform:skew(-35deg ) translate(72px, 0px) scale(0.4,0.7) rotate(70deg);
 -webkit-transform:skew(-35deg ) translate(72px, 0px) scale(0.4,0.7) rotate(70deg);
 -o-transform:skew(-35deg ) translate(72px, 0px) scale(0.4,0.7) rotate(70deg);
 -ms-transform:skew(-35deg ) translate(72px, 0px) scale(0.4,0.7) rotate(70deg);
  transform:skew(-35deg ) translate(72px, 0px) scale(0.4,0.7) rotate(70deg);
}

#t6:target .line3 .square:nth-child(2) {
 -moz-transform:skew(-10deg ) translate(15px, 5px) scale(0.3,1) rotate(70deg);
 -webkit-transform:skew(-10deg ) translate(15px, 5px) scale(0.3,1) rotate(70deg);
 -o-transform:skew(-10deg ) translate(15px, 5px) scale(0.3,1) rotate(70deg);
 -ms-transform:skew(-10deg ) translate(15px, 5px) scale(0.3,1) rotate(70deg);
  transform:skew(-10deg ) translate(15px, 5px) scale(0.3,1) rotate(70deg);
}

#t6:target .line3 .square:nth-child(3) {
 -moz-transform:skew(10deg ) translate(-15px, 5px) scale(0.3,1) rotate(-70deg);
 -webkit-transform:skew(10deg ) translate(-15px, 5px) scale(0.3,1) rotate(-70deg);
 -o-transform:skew(10deg ) translate(-15px, 5px) scale(0.3,1) rotate(-70deg);
 -ms-transform:skew(10deg ) translate(-15px, 5px) scale(0.3,1) rotate(-70deg);
  transform:skew(10deg ) translate(-15px, 5px) scale(0.3,1) rotate(-70deg);
}

#t6:target .line3 .square:nth-child(4) {
 -moz-transform:skew(35deg ) translate(-72px, 0px) scale(0.4,0.7) rotate(-70deg);
 -webkit-transform:skew(35deg ) translate(-72px, 0px) scale(0.4,0.7) rotate(-70deg);
 -o-transform:skew(35deg ) translate(-72px, 0px) scale(0.4,0.7) rotate(-70deg);
 -ms-transform:skew(35deg ) translate(-72px, 0px) scale(0.4,0.7) rotate(-70deg);
  transform:skew(35deg ) translate(-72px, 0px) scale(0.4,0.7) rotate(-70deg);
}

#t6:target .line4 .square:nth-child(1) {
 -moz-transform:skew(0) translate(50px, -20px) scale(0.25,0.25) rotate(0);
 -webkit-transform:skew(0) translate(50px, -20px) scale(0.25,0.25) rotate(0);
 -o-transform:skew(0) translate(50px, -20px) scale(0.25,0.25) rotate(0);
 -ms-transform:skew(0) translate(50px, -20px) scale(0.25,0.25) rotate(0);
  transform:skew(0) translate(50px, -20px) scale(0.25,0.25) rotate(0);
  background:red !important;
 -moz-border-radius:40px;
 -webkit-border-radius:40px;
 -o-border-radius:40px;
 -ms-border-radius:40px;
  border-radius:40px;
}

#t6:target .line4 .square:nth-child(2) {
 -moz-transform:skew(0) translate(0, 10px) scale(0.25,1) rotate(0);
 -webkit-transform:skew(0) translate(0, 10px) scale(0.25,1) rotate(0);
 -o-transform:skew(0) translate(0, 10px) scale(0.25,1) rotate(0);
 -ms-transform:skew(0) translate(0, 10px) scale(0.25,1) rotate(0);
  transform:skew(0) translate(0, 10px) scale(0.25,1) rotate(0);
  background:#7a4f21;
  position:relative;
  z-index:-9999;
}

#t6:target .line4 .square:nth-child(3) {
 -moz-transform:skew(0) translate(-55px, -55px) scale(0.25,0.25) rotate(0);
 -webkit-transform:skew(0) translate(-55px, -55px) scale(0.25,0.25) rotate(0);
 -o-transform:skew(0) translate(-55px, -55px) scale(0.25,0.25) rotate(0);
 -ms-transform:skew(0) translate(-55px, -55px) scale(0.25,0.25) rotate(0);
  transform:skew(0) translate(-55px, -55px) scale(0.25,0.25) rotate(0);
  background:red !important;
 -moz-border-radius:40px;
 -webkit-border-radius:40px;
 -o-border-radius:40px;
 -ms-border-radius:40px;
  border-radius:40px;
}

#t5:target .blue {
  background:#5279e7;
}

#t6:target .blue,
#t6:target .lightblue {
  background:#387002;
}
.menu {
  text-align:center;
}
.menu a{
  width:24px;
  height:24px;
  display:inline-block;
  background:#000;
  background: -webkit-gradient(
    linear, 
    left top, 
    left bottom, 
    from(#555), 
    to(#000)
  );
  background: -moz-linear-gradient(
    top,
    #555 0%,
    #000 100%
  );
  text-align:center;
 -moz-border-radius:12px;
 -webkit-border-radius:12px;
 -o-border-radius:12px;
 -ms-border-radius:12px;
  border-radius:12px;
  color:#fff;
  text-shadow:-1px -1px 0 #000;
  text-decoration:none;
  line-height:24px;
  font-weight:bold;
  margin-right:5px;
  font-size:80%;
 -moz-box-shadow:0 0 3px #fff, inset 0 0 2px #ccc;
 -webkit-box-shadow:0 0 3px #fff, inset 0 0 2px #ccc;
 -o-box-shadow:0 0 3px #fff, inset 0 0 2px #ccc;
 -ms-box-shadow:0 0 3px #fff, inset 0 0 2px #ccc;
  box-shadow:0 0 3px #fff, inset 0 0 2px #ccc;
 -moz-transition:all 0.3s ease;
 -webkit-transition:all 0.3s ease;
  transition:all 0.3s ease;
}

#t1:target #t1-button,
#t2:target #t2-button,
#t3:target #t3-button,
#t4:target #t4-button,
#t5:target #t5-button,
#t6:target #t6-button {
  background:#fff;
 -moz-box-shadow:0 0 2px #000;
 -webkit-box-shadow:0 0 2px #000;
 -o-box-shadow:0 0 2px #000;
 -ms-box-shadow:0 0 2px #000;
  box-shadow:0 0 2px #000;
  color:#000;
  text-shadow:none;
}

.message {
  font-family: 'Playball',cursive;
  opacity:0;
 -moz-transition:all 3s ease;
 -webkit-transition:all 3s ease;
 -o-transition:all 3s ease;
 -ms-transition:all 3s ease;
  transition:all 3s ease;
  font-size:160%;
}

#t6:target .message {
  display:block;
  opacity:1;
  position:absolute;
  bottom:70px;
  text-shadow:0 0 10px #fff;
  left:0;
  width:100%;
}

.grid2 {
  width:352px;
  overflow:hidden;
  display:inline-block;
  margin-left: 5px;
  font-style: italic;
  font-size: 12px;
}