@charset "utf-8";
/* CSS Document */

/* reset */
html, body, header, footer, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
		'Hiragino Kaku Gothic ProN'
		Meiryo, 
		sans-serif;
		font-size: 14px;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}
ul, ol {
	list-style: none;
}
a {
	text-decoration: none;
	color: #333333;
}
img {
	border: 0;
}
img, input {
	vertical-align: bottom;
}
/*HTML5用	デフォルトがinlineなのでblockにする*/
article,aside,canvas,details,figcaption,figure,header,footer,main,menu,nav,section,summary {
	display: block;
}

/* layout */

html {
	width: 100%;
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: scroll;
	background: #FFF/*#FCF9F9*/;
}
#container {
	width: 100%;
	margin: 0 auto;
}
#top {
/*	background: url(../img/B-119.png) no-repeat;*/
/*	width: 1024px;*/
	width: 100%;
/*	height: 640px;*/
	height: 720px;
/*	position: absolute;
	top: 50%;
	left: 600px;*/
/*	margin: -320px 0 0 -240px;*/
	float: left;
	margin: -680px 0 0 300px;
}
section#main {
	max-width: 1580px;
	height: auto;
	margin: 0 auto;
}
header {
	height: 50px;
	margin: 0 auto;
	background: url(../img/line-dot.png) repeat-x bottom left #F3F3EC/*#F2F7F7*/;
	box-shadow: 1px 1px 6px 0 rgba(0,0,0,0.2);
}
.border1 {
	border-top: 6px solid #1E3233;
}
.border2 {
	border-top: 1px solid #1E3233;
	margin-top: 1px;
	/*background: #F2F2F2;*/
}
h1.header-h1 {
	font-family: /*'Handlee', cursive;*/
		'Hiragino Kaku Gothic ProN'
		Meiryo, 
		sans-serif;
	font-size : 16px;
	font-weight: 100;
	letter-spacing: 1px;
	padding : 10px;
	margin: 2px auto 0;
	text-align : center;
	color : #2A2A2A; /*#4E8282;*/
	text-shadow: 1px 1px 1px #FFF;
	width: 260px;
}
h1.header-h1:hover {
	color: #FF8080;
	font-weight: 600;
}
#folda-box > h2 {
	margin: 0 0 10px;
	color : #666;
}

#content {
	width: 100%;
/*	height: 780px;*/
	height: 100%;
	min-height: 780px;
	margin: 10px auto 0;
	overflow: hidden;
}
#folda-box {
	width: 200px;
	height: 100%;
	float: left;
}
#i-list-g {
	width: 280px;
	height: ;
	float: left;
}

#i-list-g1-1,#i-list-g1-2,#i-list-g1-3,#i-list-g1-4,
#i-list-g2-1-1-1,#i-list-g2-1-1-2,#i-list-g2-1-1-3,#i-list-g2-1-1-4,
#i-list-g2-1-2-1,
#i-list-g2-2-1,#i-list-g2-2-2,#i-list-g2-2-3,#i-list-g2-2-4,#i-list-g2-2-5,#i-list-g2-2-6,#i-list-g2-2-7,#i-list-g2-2-8,#i-list-g2-2-9,#i-list-g2-2-10,#i-list-g2-2-11,#i-list-g2-2-12,#i-list-g2-2-13,
#i-list-g2-3-1,#i-list-g2-3-2,
#i-list-g3-1,#i-list-g3-2,#i-list-g3-3,
#i-list-g8-1,#i-list-g8-2,#i-list-g8-3,#i-list-g8-4,#i-list-g8-5,#i-list-g8-6,#i-list-g8-7,#i-list-g8-8,
#i-list-g8-1-1,#i-list-g8-1-2,#i-list-g8-1-3,#i-list-g8-1-4,#i-list-g8-1-5,#i-list-g8-1-6,
#i-list-g7-1,#i-list-g7-2,#i-list-g7-3 {
	width: 280px;
	height: 780px;
	position: absolute;
	top: 50px;
	display: none;
	overflow: auto;
}
.i-list1-1,.i-list1-2,.i-list1-3,.i-list1-4,
.i-list2-1-1-1,.i-list2-1-1-2,.i-list2-1-1-3,.i-list2-1-1-4,
.i-list2-1-2-1,
.i-list2-2-1,.i-list2-2-2,.i-list2-2-3,.i-list2-2-4,.i-list2-2-5,.i-list2-2-6,.i-list2-2-7,.i-list2-2-8,.i-list2-2-9,.i-list2-2-10,.i-list2-2-11,.i-list2-2-12,.i-list2-2-13,
.i-list2-3-1,.i-list2-3-2,
.i-list3-1,.i-list3-2,.i-list3-3,
.i-list8-1,.i-list8-2,.i-list8-3,.i-list8-4,.i-list8-5,.i-list8-6,.i-list8-7,.i-list8-8,
.i-list8-1-1,.i-list8-1-2,.i-list8-1-3,.i-list8-1-4,.i-list8-1-5,.i-list8-1-6,
.i-list7-1,.i-list7-2,.i-list7-3 {
	width: 90px;
	height: 90px;
	margin: 15px 20px;
	display: none;
	float: left;
}
.i-list-img {
	width: 100%;
	-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
	-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
	margin-bottom: 6px;
}
.i-list-name {
	width: 90px;
	height: 14px;
	font-size: 12px;
	text-align: center;
	white-space: nowrap; /*指定幅を超えた文字列を切り取り「…」を付加する*/
	overflow: hidden; /*指定幅を超えた文字列を切り取り「…」を付加する*/
	text-overflow: ellipsis; /*指定幅を超えた文字列を切り取り「…」を付加する*/
	display: block;
}
.i-list-text1,.i-list-text2 {
	display: none;
}
.i-list-link1,.i-list-link2 {
	display: none;
}

.gif {
	width: 230px;
	margin: 16px 0 0px 18px;
	color: #666666;
	font-size: 12px;
	line-height: 1.4;
}

.gif2 {
	width: 230px;
	margin: 20px 0 -10px 18px;
	color: #666666;
	font-size: 12px;
	line-height:5;
	clear: both;
}

.mp4 {
	width: 960px;
	margin: 16px 0 0px 18px;
	color: #666666;
	font-size: 12px;
	line-height: 1.4;
}


/* profile */
#i-list-g4 {
	display: none;
	width: 1200px;
	height: 760px;
	margin: 20px 0 0 60px;
}
.i-list4 {
	display: none;
}
#prof-page {
}

/* movie */
#i-list-g7-1,#i-list-g7-2,#i-list-g7-3 {
	display: none;
	width: 100%;
	height: 100%;
	margin: 20px 0 0 60px;
}
.i-list7-1,.i-list7-2,.i-list7-3 {
	display: none;
}
#movie-page {
}

/* Google form */
#i-list-g5 {
	display: none;
	width: 300px;
	height: 760px;
	margin: -8px 0 0 150px;
}
.i-list5 {
	display: none;
	width: 100%;
}


/* big-img */
#big-img {
	height: 100%;
	margin-left: 480px;
	background: #FFF;
}
#big-img > #big-img-inner {
	margin: 20px 30px;
	background: #FFF;
	float: left;
}
.b-img {
	width: 100%;
/*	-moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.25);
	box-shadow: 1px 1px 8px rgba(0,0,0,0.25);
*/
}
.big-img-d {
	width: 95%;
	margin: 0 30px 0 0;
	padding: 0 30px;
	display: block;
	background: #FFF;
	float: left;
}
.big-img-name {
	display: block;
	font-size: 16px;
	font-weight: bold;
	margin: 10px 30px 4px 0;
	background: #FFF;
}
.big-img-text1,.big-img-text2 {
	display: block;
	margin: 0 30px 5px 10px;
	font-size: 12px;
	line-height: 1.6;
	background: #FFF;
}
.big-img-link1,.big-img-link2 {
}
.big-img-link a {
	display: block;
	margin: 0 0 5px 10px;
	color: #0000FF;
	font-size: 12px;
	line-height: 1;
}

/*#top > h1 {
	font-family: 'Handlee', cursive;
	font-size : 22px;
	letter-spacing: 2px;
	text-align : center;
	color : #666;
	position: absolute;
	top: 50%;
	left: 50%;
}
#top > p {
	font-family: 'Handlee', cursive;
	font-size : 18px;
	letter-spacing: 1px;
	text-align : center;
	color : #666;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0 0 0 0;
}*/
h1#yk {
	margin: -80px 0 0 -300px;
}
h1#pf {
	margin: -36px 0 0 -210px;
}
p#web {
	margin: -70px 0 0 0;
}
p#cg {
	margin: 0 0 0 0;
}
p#illust {
	margin: 70px 0 0 0;
}
span.square {
	color: #DB0000;
	margin-left: -550px;
}
span.text {
	margin-left: 20px;
}
footer > #copy > p {
	line-height: 1.2;
}
.folder {
}
.file:hover, #f4:hover, #f5:hover, #f7-1:hover, #f7-2:hover, #f7-3:hover, .hatena:hover, .movie:hover {
	cursor: pointer;
	color: red;
}
.f-text {
	margin-left: 4px;
	font-size: 12px;
}

footer {
	width: 100%;
	height: 50px;
	color: #4E8282;
	overflow: hidden;
	background: #F2F2F2;
	background: url(../img/line-dot.png) no-repeat top left #F2F7F7;
	box-shadow: 0 -1px 8px 0 rgba(0,0,0,0.2);
	position: relative;
	text-shadow: 1px 1px 1px #FFF;
}
footer > #copy {
	width: 300px;
	position: absolute;
	top: 10px;
	right: 20px;
}










/* prof.html */
#container-prof {
	width: 1080px;
	height: 720px;
	margin: 0 0 0 0;
	/*background: #F7F7F6;*/
	padding: 20px 36px 0px 20px;
	/*border: 2px dashed #EAEBE9;*/
	/*text-shadow: 1px 1px 0px #FFF;*/
}
#section1 {
	width: 380px;
	height: ;
	margin: 0 0 0 20px;
	float: left;
}
#section2 {
	width: 380px;
	height: ;
	margin: 0 0 0 40px;
	float: left;
}
#section3 {
	width: 200px;
	height: ;
	margin: 0 0 0 40px;
	float: left;
}
h2#prof {
	font-size: 18px;
	color: #263F26;
	letter-spacing: 1px;
	margin: 0 0 15px 0;
	display: none;
}
h2#prof > span {
	font-size: 12px;
	font-weight: 300;
	vertical-align: middle;
	letter-spacing: 1px;
	color: #999;
	margin-left: 20px;
	display: inline-block;
}
h3.career {
	font-size: 18px;
	color: #263F26;
	letter-spacing: 1px;
	padding: 3px 6px; 
	border-left: 6px solid #C13A3A;
}
h3.career > span {
	font-size: 12px;
	font-weight: 300;
	vertical-align: middle;
	letter-spacing: 1px;
	color: #999;
	margin-left: 20px;
	display: inline-block;
}
dl.profile, dl.skill-list{
	margin: 16px 0 0 0;
}
dl.profile > dt, dl.skill-list > dt {
	font-size: 14px;
	margin: 5px 0 0 0;
	color: #609E60;
}
dl.skill-list > dt {
	letter-spacing: 1px;
}
dl.profile > dd, dl.skill-list > dd {
	font-size: 13px;
	margin: 7px 0 0 10px;
	color: #436E43;
}
dl.profile dd > ul {
	margin: -14px 0 0 10px;
}
dl.skill-list dd > ul {
	margin: -14px 0 0 0;
}
dl.profile ul > li {
	font-size: 11.5px;
	line-height: 1.4;
	color: #666;
}
dl.skill-list ul > li {
	font-size: 13px;
	line-height: 1.8;
	color: #666;
}
dl.skill-list li > dt {
	display: inline;
	letter-spacing: 0.5px;
}
dl.skill-list li > dd {
	display: inline;
	float: right;
	color: #CCC;
}
dl.skill-list dd > span {
	font-size: 13px;
	line-height: 1.8;
	color: #DA8585;
	letter-spacing: 1px;
}

dl.edu{
	margin: 16px 0 0 0;
	overflow: hidden;
}

dl.edu > dt {
	font-size: 14px;
	margin: 5px 0 0 0;
	color: #609E60;
}
dl.edu > dd, dl {
	font-size: 13px;
	margin: 7px 0 -4px 10px;
	color: #436E43;
}
dl.edu dd > ul {
	margin: 0 0 0 10px;
}
dl.edu ul > li {
	font-size: 11.5px;
	line-height: 1.4;
	color: #666;
}
dl.edu ul > li.senko {
	margin-top: -11.5px;
}
span.gaiyou1 {
	width: ;
	display:inline-block;
	float: left;
}
span.gaiyou2 {
	width: 280px;
	margin-left: 4px;
	display:inline-block;
	float: left;
}

/* movie*.html */
#container-movie {
	width: 1080px;
	height: 720px;
	margin: 0 0 0 0;
	/*background: #F7F7F6;*/
	padding: 20px 36px 0px 20px;
	/*border: 2px dashed #EAEBE9;*/
	/*text-shadow: 1px 1px 0px #FFF;*/
}

/* movie.html */
#movcontent {
	width: 960px;
	margin-top: 70px;
	margin-bottom: 70px;
	margin-left: auto;
	margin-right: auto;
}
.movie1 {
	width: 960px;
	height: 540px;
	margin-bottom: 70px;
}
.movie2 {
	width: 960px;
	height: 540px;
	margin-bottom: 70px;
}
.movie3 {
	width: 960px;
	height: 540px;
	margin-bottom: 70px;
}
/*#container {
	width:640px;
	margin: 50px auto;
}*/
.movh1 {
	font-size: 18px;
	line-height: 1.6;
	font-family:
		'Hiragino Kaku Gothic ProN'
		Meiryo, 
		sans-serif;
	width: 640px;
	margin: 0;
}
.movp {
	font-size: 14px;
	line-height: 1.6;
	font-family:
		'Hiragino Kaku Gothic ProN'
		Meiryo, 
		sans-serif;
	font-weight: 100;
	width: 640px;
	margin: 0 0 30px;
}
