@charset "UTF-8";
/* CSS Document */
body {
	background: #F0F0F0;
	width: 100%;
	text-align: center;
	margin: 0;
}
html,
header,
div#content,
footer {
	font: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
div#wrapper {
    width: 1280px; 
	height: auto; 
    margin: 0 auto;  
    text-align: left;
	background: #ffffff; /*url(../images/top.png)  no-repeat; /* 位置指定あたり用画像 */
}
header { 
    /*height: 100px; */
	padding: 6px 0 0;
	height: 95px;
	width: 1240px;
	margin: 0 20px;
}
header nav.topnavi {/* topページのナビ */
	width: 1240px;
}
header nav.topnavi ul {
	display: inline-block;
	position: relative;
	width: 1240px;
}

header nav.topnavi li {
	display: inline-block;
	float: left;
	position: relative;
	top: 50px;
	margin-right: 19px;
}
header nav.topnavi li {
	opacity: 50%;
}
header nav.topnavi li:first-child { 
 top: 0;
 margin-right: 65px;
}
header nav.topnavi li:nth-child(4) {
	top: 38px;
}
header nav.topnavi li:nth-child(7) {
	position: absolute;
	right: 175px;
	margin-right: 0;
}
header nav.topnavi li:nth-child(8) {
	position: absolute;
	right: 115px;
	margin-right: 0;
}
header nav.topnavi li:last-child {
	position: absolute;
	right: 0;
	margin-right: 0;
}
header nav.topnavi li a img {
	-webkit-transition: 0.2s ease-in-out;
	   -moz-transition: 0.2s ease-in-out;
	     -o-transition: 0.2s ease-in-out;
	        transition: 0.2s ease-in-out;
}
header nav.topnavi li a:hover img {
	opacity: 0.5;
	filter: alpha(opacity=50);/* for IE */
}

header .line01 {
	margin: 10px 0 0;
	height: 1px;
	width: 1240px;
	border-bottom: #666666 solid 1px;
	position: relative;
	top: -47px;
}

header nav.contnavi {/* コンテンツページのナビ */
	width: 1240px;
}
header nav.contnavi ul {
	display: inline-block;
	position: relative;
	width: 1240px;
}

header nav.contnavi li {
	display: inline-block;
	float: left;
	position: relative;
	top: 20px;
	margin-right: 19px;
}
header nav.contnavi li {
	opacity: 50%;
}
header nav.contnavi li:first-child { 
 top: 0;
 margin-right: 184px;
}
header nav.contnavi li:nth-child(4) {
	top: 10px;
}
header nav.contnavi li:nth-child(7) {
	position: absolute;
	right: 175px;
	margin-right: 0;
}
header nav.contnavi li:nth-child(8) {
	position: absolute;
	right: 115px;
	margin-right: 0;
}
header nav.contnavi li:last-child {
	position: absolute;
	right: 0;
	margin-right: 0;
}
header nav.contnavi li a img,
 {
	-webkit-transition: 0.2s ease-in-out;
	   -moz-transition: 0.2s ease-in-out;
	     -o-transition: 0.2s ease-in-out;
	        transition: 0.2s ease-in-out;
}
header nav.contnavi li a:hover img {
	opacity: 0.5;
	filter: alpha(opacity=50);/* for IE */
}

header .line02 {
	margin: 10px 0 0;
	height: 1px;
	width: 1240px;
	border-bottom: #666666 solid 1px;
	position: relative;
	top: -41px;
}

div#content {
	width: 1240px;
	height: auto;
	position: relative;
	padding: 10px 0;
	margin: 0 20px;
}
div#content div.pad100 {
	padding: 0 80px;
}
	
div#content div.pankuzu {
	font-size: 14px;
	letter-spacing: 0.2em;
	line-height: 1.3;
	padding-bottom: 3px;
	border-bottom: solid 1px #303030;
	width: 1080px;
	margin-bottom: 40px;
	
}
div#content div.pankuzu a {
	color: #f74f32;
	text-decoration: none;
}
div#content div.pankuzu a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);/* for IE */
}
div#content h1 {
	font-size: 18px;
	line-height: 1.4;
	font-weight: 300;
	letter-spacing: 0.2em;
}
div#content h1 span.sml75 {
	font-size: 75%;
}
div#content p {
	font-size: 12px;
	line-height: 2.5;
	max-width: 70%;
}
div#content h2 {
	font-size: 16px;
	font-weight: 300;
	letter-spacing: 0.2em;
	padding-bottom: 10px;
	border-bottom: 3px #303030 dotted;
	width: 70%;
	margin: 60px 0 25px;
}
/*======== ページトップへボタンのスタイル =======*/
div#content a#pagetopBtn img {
	position: fixed;
	bottom: 10px;
	right: 5px;
	z-index: 5;
   background-color: #f74f32 width: 50px;
	height: 50px;
	border-radius: 50px;
	-webkit-border-radius: 50px;    /* Safari,Google Chrome用 */
	-moz-border-radius: 50px;   /* Firefox用 */
	opacity: 0.8;
	filter: alpha(opacity=80);/* for IE */
}

/* ブラウザ幅1281px以上の時のページトップへのボタン位置調整 */
@media only screen and (min-width: 1281px) {
	div#content a#pagetopBtn img { 
	left: calc(50% + 580px) ;
	}
}
	

/* ============= TOPページ ========== */

div#content div.profile {
	position: absolute;
	left:545px;
	top:207px;
	width:115px;
	height:35px;
}

div#content div.blog {
	position: absolute;
	left:1036px;
	top:233px;
	width:65px;
	height:39px;
}

div#content div.works {
	position: absolute;
	left:122px;
	top:265px;
	width:94px;
	height:32px;
}

div#content div.mail {
	position: absolute;
	left:1073px;
	top:355px;
	width:71px;
	height:32px;
}

div#content div.news {
	position: absolute;
	left:200px;
	top:420px;
	width:90px;
	height:34px;
}
div#content div a img {
	-webkit-transition: 0.2s ease-in-out;
	   -moz-transition: 0.2s ease-in-out;
	     -o-transition: 0.2s ease-in-out;
	        transition: 0.2s ease-in-out;
}
div#content div a:hover img {
	opacity: 0.5;
	filter: alpha(opacity=50);/* for IE */
}

/* ===イラスト=== */
div#content div.il01 { /* アコーディオン */
	position: absolute;
	left: 92px;
	top: -65px;
	width: 353px;
	height: 390px;
	background: url(../images/il-01.gif) no-repeat;
}
div#content div.il01 {
	-webkit-transition: 0.1s ease-in-out;
	   -moz-transition: 0.1s ease-in-out;
	     -o-transition: 0.1s ease-in-out;
	        transition: 0.1s ease-in-out;
}
div#content div.il01:hover {
		background: url(../images/il-01_movie.gif) no-repeat;
}

div#content div.il02 { /* 熊 */
	position: absolute;
	left: 510px;
	top: 10px;
	width: 310px;
	height: 304px;
	background: url(../images/il-02.gif) no-repeat;
}
div#content div.il02 { 
	-webkit-transition: 0.1s ease-in-out;
	   -moz-transition: 0.1s ease-in-out;
	     -o-transition: 0.1s ease-in-out;
	        transition: 0.1s ease-in-out;
}
div#content div.il02:hover {
		background: url(../images/il-02_movie.gif) no-repeat;
}

div#content div.il03 { /* ステージ */
	position: absolute;
	left: 900px;
	top: 19px;
	width: 337px;
	height: 224px;
	background: url(../images/il-03.gif) no-repeat;
}
div#content div.il03 { 
	-webkit-transition: 0.1s ease-in-out;
	   -moz-transition: 0.1s ease-in-out;
	     -o-transition: 0.1s ease-in-out;
	        transition: 0.1s ease-in-out;
}
div#content div.il03:hover {
		background: url(../images/il-03_movie.gif) no-repeat;
}
div#content div.il04 { /* テレビ */
	position: absolute;
	left: 2px;
	top: 323px;
	width: 324px;
	height: 324px;
	background: url(../images/il-04.gif) no-repeat;
}
/*div#content div.il04 { 
	-webkit-transition: 0.1s ease-in-out;
	   -moz-transition: 0.1s ease-in-out;
	     -o-transition: 0.1s ease-in-out;
	        transition: 0.1s ease-in-out;
}*/
div#content div.il04:hover {
		background: url(../images/il-04_movie.gif) no-repeat;
}

div#content div.il05 { /* 鳥 */
	position: absolute;
	left: 387px;
	top: 285px;
	width: 406px;
	height: 365px;
	background: url(../images/il-05.gif) no-repeat;
}
div#content div.il05 { 
	-webkit-transition: 0.1s ease-in-out;
	   -moz-transition: 0.1s ease-in-out;
	     -o-transition: 0.1s ease-in-out;
	        transition: 0.1s ease-in-out;
}
div#content div.il05:hover {
		background: url(../images/il-05_movie.gif) no-repeat;
}

div#content div.il06 { /* 猫 */
	position: absolute;
	left: 848px;
	top: 285px;
	width: 240px;
	height: 358px;
	background: url(../images/il-06.gif) no-repeat;
}
/*div#content div.il05 { 
	-webkit-transition: 0.1s ease-in-out;
	   -moz-transition: 0.1s ease-in-out;
	     -o-transition: 0.1s ease-in-out;
	        transition: 0.1s ease-in-out;
}*/
div#content div.il06:hover {
		background: url(../images/il-06_movie.gif) no-repeat;
}
footer ul li.credit01 {
  display: inline-block; 
  position: absolute; 
  right: 0; 
  text-align: right;
  font-size: xx-small;
}
footer ul li.credit01 a {
	 color: #303030;
	 text-decoration: none;
 }
 footer ul li.credit01 a:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);/* for IE */
 }

/* =========　↑↑↑TOPページ↑↑↑ ========== */

/* ========= profileページ ==========*/

/* ========= ↑↑profileページ↑↑ ==========*/


/* ========= worksページ ==========*/
div#content div#wrap {
    width: 1080px;
    margin: 20px auto;
}
div#content div#wrap .smallimage {
    border: none;
	width: 238px;
	height: 238px;
    margin: 10px 6px 0 0;
	border: solid 1px #ccc;
	border-radius: 5px;  
    -webkit-border-radius: 5px;   
    -moz-border-radius: 5px; 
	padding: 10px;
}
/* ========= ↑↑worksページ↑↑ ==========*/




/* footer */
footer {
	width: 1240px;
	height: 40px;
	border-top: solid 1px #606060;
	text-align: center;
	padding-top: 8px;
	margin: 0 20px;
}
footer ul {
	position: relative;
	width: 1240px;
}