@charset "UTF-8";
/* CSS Document */

html, body, div, span, applet, object, iframe, strong,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, caption, 
tbody, tfoot, thead, table, label, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	list-style:none;
	}

body{background-image: url("../images/block.jpg");
}	

#wrapper{width: 1000px;
         margin: 0px auto;
}

#header{width: 1000px;
        height: 250px;
}


#logo{float: left;
      margin-left: 30px;
      margin-top: 50px;
      _margin-left: 15px;/*IE6*/
}

#leaf{
      float: right;
      margin-top: -80px;
      margin-right: 30px;
      width: 380px;
      height: 270px;
      overflow: hidden;
      animation: leaf 3s ease-in-out infinite alternate 0;
      -webkit-animation: leaf 3s ease-in-out infinite alternate 0;
      -moz-animation: leaf 3s ease-in-out infinite alternate 0s;
      -ms-animation: leaf 3s ease-in-out infinite alternate 0;
      -o-animation: leaf 3s ease-in-out infinite alternate 0;
}

@keyframes leaf {
 
    from {
    }
 
    to {
        transform:  rotate(11deg)
                    translateX(-6px);
    }
}

@-webkit-keyframes leaf {
 
    from {
    }
 
    to {
        -webkit-transform:  rotate(11deg)
                    translateX(-6px);
    }
}

@-moz-keyframes leaf {
 
    from {
    }
 
    to {
        -moz-transform:  rotate(11deg)
                    translateX(-6px);
    }
}

@-ms-keyframes leaf {
 
    from {
    }
 
    to {
        -ms-transform:  rotate(11deg)
                    translateX(-6px);
    }
}

@-o-keyframes leaf {
 
    from {
    }
 
    to {
        -o-transform:  rotate(11deg)
                    translateX(-6px);
    }
}


.floatclear{clear: both;
}

#nav{margin-left: 30px;
}


#nav li{float: left;
        padding-right: 100px;
}

#contact{margin-top: 7px; 
}

#section{background-image: url("../images/realcork.jpg");
         width: 860px;
	 margin-left: 30px;
	 margin-top: 50px;
	 padding-top: 40px;
	 padding-left: 80px;
	 clear: both;
	 overflow: hidden;
	 position: relative;
}



#memo{
      float: left;
      margin-right: 90px;
}

.thumbnail{
           float: left;
	   width: 210px;
	   height: 250px;
	   margin-right: 70px;
	   margin-bottom: 50px;
}

#shoppingobj{
	     position: absolute;
	     top: 120px;
	     left: 30px;
}


#footer{width: 1000px;
        height: 100px;
        margin-top: 100px;
}

#copy{width: 300px;
      margin: 0px auto;
}

#aboutall{background-image: url("../images/realcork.jpg");
         width: 940px;
	 height: 700px;
	 margin-left: 30px;
	 margin-top: 50px;
	 padding-top: 50px;
}

#aboutpaper{background-image: url("../images/pinpaper.png");
            width: 749px;
	    height: 583px;
	    margin-left: 97px;
               
}

#aboutcontent{padding-top: 65px;
	      padding-top: 75px\9;/* IE8とその以下のバージョン用ハック */ 
              padding-left: 30px;
}

#aboutcontent:not(:target){padding-top: 75px\9;/* IE9用ハック */ 
}

#abouttitle{font-size: 40px;
}

.aboutmes{margin-top: 10px;
}

#skillinfo{margin-top: 25px;
}

#skill{font-size: 20px;
}


#contactall{background-image: url("../images/realcork.jpg");
            width: 940px;
	    height: 700px;
	    margin-left: 30px;
	    margin-top: 50px;
	    padding-top: 50px;
}

#contactpaper{background-image: url("../images/pinpaper.png");
              width: 747px;
	      height: 582px;
	      margin-left: 97px;   
}

#contactcontent{padding-top: 65px;
	        padding-top: 75px\9;/* IE8とその以下のバージョン用ハック */ 
                padding-left: 30px;
}

#contactcontent:not(:target){padding-top: 75px\9;/* IE9用ハック */ 
}


#contacttitle{font-size: 40px;
}

#contactcontent p{margin-top: 15px;
}

#contactcontent input{font-size: 100%;
}

#contactcontent textarea{width: 400px;
                         height: 150px;
}

#zantei{padding-top: 80px;
        padding-left: 50px;
}/*蠕後〒豸医☆*/

.contentsall{background-image: url("../images/realcork.jpg");
             width: 940px;
	     height: 700px;
	     margin-left: 30px;
	     margin-top: 50px;
	     padding-top: 50px;
}

.contents{float: left;
          margin-left: 50px;
	  _margin-left: 25px;/*IE6*/
}

.c_info{float: right;
        background-image: url("../images/c_memo.png");
        width: 358px;
        height: 448px;
	margin-top: 50px;
	margin-right: 50px;
	_margin-top: 25px;/*IE6*/
	_margin-left: 25px;/*IE6*/
}

.honbun{margin-top: 70px;
        margin-left: 25px;
}


.honbun h4{margin-bottom: 20px;
	   width: 308px;
}

.honbun p{width: 308px;
}

.honbun ul{margin-top: 20px;
}

.honbun ul li{list-style-type: circle;
              list-style-position: inside;
}

/*ライトボックス風*/
#transparentLayer{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
  background: url("../images/transparent_black.png");

  /*クロスブラウザ対策(上手くいくまで保留)
  background: #000000;
  opacity: 0.50;
  filter: alpha(opacity=50);/* ie lt 8 
  -ms-filter: "alpha(opacity=50)";/* ie 8 
  zoom:1;/*currentStyle.hasLayoutのための設定
  */
}

#overLayer{
  position: absolute;
  top: 28%;
  left: 50%;
  margin-left: -400px;
  display: none;
}

#close{
  position: absolute;
  top: 25%;
  right: 50%;
  margin-right: -426px;
  display: none;
}