﻿/*recet.css*/
h1,h2{
	font-size:100%;
}
*{
	margin:0;
	padding:0;
/*outline: 1px solid magenta;*/
}
/*style.css*/
body{
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
}
#wrap{
	width:1520px;
	margin:0 auto;
	overflow:hidden;
}
h1,h2,h3{
	font-size:128px;
	text-align:center;
	font-weight:lighter;
}
.title{
	text-align:center;
	position:relative;
	top:290px;
	left:-20px;
	animation-name:fadein;
	animation-duration:3s;
}
.my_name{
	position:relative;
	top:-10px;
	left:-3px;
	font-family:"Century Gothic","NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	font-size:18px;
}
#main{
	background-image:url(img/main_background.png);
	background-size:1281px 667px;
	background-repeat:no-repeat;
	padding-bottom:10px;
	margin-left:85px;
	overflow:hidden;
}
#index_nav ul{
	width:300px;
	height:550px;
	position:relative;
	top:-100px;
	right:-1240px;
}
#index_nav li{
	list-style-type:none;
	padding:10px 0px;
	font-size:20px;
	line-height:24px;
	font-family:,NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
}
#index_nav li a:link{
	color:#000;
	text-decoration:none;
}
#index_nav li a:visited{
	color:#000;
}
#index_nav li a:hover{
	text-decoration-line: 1px solid #000;		
}
#works{
	width:1440px;
	margin-left:135px;
}
.works_title{
	text-align:left;
	font-size:128px;
	background-image:url(img/line1.png);
	background-position:center left;
	background-repeat:no-repeat;
	line-height:60px;
	margin-top:50px;
	margin-bottom:50px;
	margin-left:2%;
	padding-left:280px;
	animation-name:fadein;
	animation-duration:3s;
}
.box{
	float:left;
	width:380px;
	font-size:12px;
	margin:10px 20px 0px 20px;
	overflow:hidden;
}
.works_boxs{
	padding:0px 40px 100px 0px;
}
.genre{
	font-size:20px;
	/*font-weight:bold;*/
	font-family:"NATS";
	letter-spacing:0.1em;
	width:380px;
	line-height:27px;
	padding-left:7px;
	border:#000 solid 2px;
}
.work_logo{
	height:1px;
	padding:50px 0 20px 5px;
}
.hp_photo1{
	width:380px;
	height:240px;
	background-image:url(img/stuffaichi_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s;
}
.hp_photo1:hover{
	background-position:0px -240px;
}
.hp_photo2{
	width:380px;
	height:240px;
	background-image:url(img/dot_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s;
}
.hp_photo2:hover{
	background-position:0px -240px;
}
.hp_photo3{
	width:380px;
	height:240px;
	background-image:url(img/fellow_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s;
}
.hp_photo3:hover{
	background-position:0px -240px;
}
.hp_photo4{
	width:380px;
	height:240px;
	background-image:url(img/ble_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s;
}
.hp_photo4:hover{
	background-position:0px -240px;
}
.hp_photo5{
	width:380px;
	height:240px;
	background-image:url(img/portfolio_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s;
}
.hp_photo5:hover{
	background-position:0px -240px;
}
.hp_photo6{
	width:380px;
	height:240px;
	background-image:url(img/sinrin_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s
}
.hp_photo6:hover{
	background-position:0px -240px;
}

.site_name{
	font-size:12px;
}
.view_work_button{
	color:#000;
	font-weight:bold;
	font-size:16px;
	background-image:url(img/view_work_background.png);
	background-repeat:no-repeat;
	background-size:380px;
	padding:18px 0px 100px 250px;

}
.view_work_button a:link{
	color:#000;
	text-decoration:none;
}
.view_work_button a:visited{
	color:#000;
}
.view_more_button{
	width:300px;
	text-align:center;
	position:relative;
	top:-70px;
	left:31px;
	font-size:36px;
	font-weight:300;
	background-image:url(img/button1.png);
	background-repeat:no-repeat;
	background-position:90% 30%;
	padding:9px 45px 20px 20px;
	margin:0px 30px 0 430px;
	overflow:hidden;
}
.view_more_button a:link{
	color:#000;
	text-decoration:none;
}
.view_more_button a:visited{
	color:#000;
}
#about_me{
	position:relative;
}
.about_me_title{
	margin-top:130px;
	position:relative;
	top:-10px;
	left:-190px;
	animation-name:fadein;
	animation-duration:3s;
}
.my_photo{
	width:350px;
	position:absolute;
	top:170px;
	left:280px;
}
.introduce_my_name{
	font-size:48px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	line-height:48px;
	margin-bottom:20px;

}
.introduce_my_name_hira{
	font-size:20px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	line-height:20px;
	margin-bottom:40px;

}
#introduce{
	position:absolute;
	top:160px;
	left:750px;
	font-size:16px;
	font-family:"NOTO SANS JP","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	line-height:2.3;
}
.about_me_background{
	position:absolute;
	top:-150px;
	right:0px;
}	
.view_more_button2{	
	width:300px;
	font-size:36px;
	font-weight:300;
	background-image:url(img/button1.png);
	background-repeat:no-repeat;
	background-position:70% 50%;
	position:relative;
	top:390px;
	left:180px;
	padding:18px 40px 20px 20px;
	margin:100px 30px 0 550px;
	overflow:hidden;
}
.view_more_button2 a:link{
	color:#000;
	text-decoration:none;
}
.view_more_button2 a:visited{
	color:#000;
}
#contact{
	position:relative;
	margin-top:500px;
}
.contact_title{
	position:relative;
	top:150px;
	left:-505px;
	padding-top:100px;
	font-size:128px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	text-align:center;
	overflow:hidden;
}
.o_font{
	color:#FFF;
	text-shadow:1px 0px 0 #000,		1px 1px 0 #000		,0px 1px 0 #000,
							-1px 0px 0 #000,	-1px 1px 0 #000,	1px -1px 0 #000,
							1px -1px 0 #000,	0px -1px 0 #000;

}
.contact_background{
	width:565px;
	position:relative;
	top:-100px;
	left:150px;
	z-index:-1;
	overflow:hidden;
}
.info{
	position:relative;
	top:130px;
	left:-405px;
	font-size:36px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	font-weight:400;
	text-align:center;
	line-height:1.5;
	overflow:hidden;
}
.site_map{
	width:1520px;
	background-color:#000;
	padding-left:30px;
}
.site_map li{
	display:inline;
	font-size:32px;
	color:white;
	padding:0px 20px;
}
.site_map li a:link{
	color:#FFF;
	text-decoration:none;
}
.site_map li a:visited{
	color:#FFF;
}

.copyright{
	text-align:center;
	color:#d9d9d9;
	position:absolute;
	top:620px;
	left:1350px;
	z-index:2;
}

.clearfix:after{
	content:.;
	display:block;
	height:0;
	visibility:hidden;
	clear:both;
}
.kaijyo{
	clear:both;
}



/*ble_baked_store*/
#main_ble{
	width:1350px;
	height:587px;
	position:relative;
	background-image:url(img/ble/flame_ble.png);
	background-repeat:no-repeat;
	margin:50px 0px 20px 130px;
}
#ble_title{
	position:relative;
	top:230px;
	left:-250px;
	animation-duration:2s;
	animation-name:slidein;
}
.works_nav ul{
	color:#FFF;
	list-style-type:none;
	margin-top:20px;
	position:fixed;
	top:60px;
	left:83.5em;
	z-index:100;
}
.works_nav li{
	font-size:20px;
	color:#FFF;
	padding-top:20px;
}
.works_nav li a:link{
	color:#FFF;
	text-decoration:none;
}
.works_nav li a:visited{
	color:#FFF;
}
.nav_background{
	width:155px;
	height:241px;
	margin-top:20px;
	background-image:url(img/nav_background.png);
	background-repeat:no-repeat;
	background-position:0px 0px;
	position:fixed;
	top:20px;
	left:1290px;
	animation-duration:2s;
	animation-name:nav_scroll_animation linear;
	animation-timeline:scroll(nearest);
}
@keyframes nav_scroll_animation{
from{
	/*background-image:url(img/nav_background.png);*/
	opacity:50%;
}
to{
	/*background-image:url(img/nav_background_after.png);*/
	opacity:100%;
}
}

#main_content{
	position:relative;
}
#colum1{
	width:740px;
	height:2150px;
	background-image:url(img/colum1.png);
	background-repeat:no-repeat;
	position:relative;
	top:-100px;
	left:120px;
}
#colum1 iframe{
	position:absolute;
	top:-1910px;
	left:-360px;
	width:1440px;
	height:6000px;
}

#colum2{
	width:510px;
	position:absolute;
	top:650px;
	left:70em;
	font-size:13px;
	font-family:"NATS","Noto Sans JP","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
;
}
.art_title{
	font-size:48px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	padding-top:80px;
	padding-bottom:20px;
	line-height:48px;
}
.url{
	font-size:32px;
	margin-top:-20px;
}
.tool_art{
	position:relative;
}
.figma_icon{
	font-size:32px;
	margin-left:20px;
	background-image:url(img/icon/figma_icon.png);
	background-repeat:no-repeat;
	background-position:80px 3px;
}
.photoshop_icon{
	font-size:32px;
	padding-right:50px;
	background-image:url(img/icon/photoshop_icon.png);
	background-repeat:no-repeat;
	background-position:140px 3px;
	position:absolute;
	top:148px;
	left:180px;
}
.illustrator_icon{
	font-size:32px;
	padding-right:50px;
	background-image:url(img/icon/illustrator_icon.png);
	background-repeat:no-repeat;
	background-position:120px 3px;
	position:absolute;
	top:148px;
	left:400px;
	z-index:-1;
}
.info_art{
	position:relative;
}
.info_art p:nth-child(3){
	font-size:14px;
	line-height:1.6;
}

.info_title{
	font-size:36px;
	position:absolute;
	top:84px;
	left:130px;
}
.concept_title{
	font-size:24px;
	font-weight:bold;
	line-height:1.2;
	text-align:center;
}
.big_middle_size{
	font-size:48px;l
}
.big_size{
	font-size:64px;
}
.middle_size{
	font-size:32px;
}
.concept_text{
	margin-top:30px;
	line-height:1.6;
}
.pelsona_title{
	font-size:32px;
	margin:15px 0 5px 0;
}
.pelsona_text{
	font-size:18px;
	font-weight:100;
	text-align:center;
}
.color_art{
	float:left;	
}
.color_art .art_title{
	line-height:48px;
	margin-bottom:-20px;
}
.color_box{
	float:left;
	margin:20px 30px 10px 0px;
}
.color_box_genre{
	font-size:24px;
	margin-bottom:5px;
}
.color_box_box{
	float:left;
	padding-right:10px;
}
.color_box_text{
	float:left;
	font-size:13px;
	line-height:2.0;
}
.structure_art{
	padding-top:490px;
}
.structure_art p:nth-child(3){
	margin-top:10px;
}
.structure_art p:nth-child(2n){
	font-size:13px;
	line-height:1.7;
}
.line3{
	width:510px;
	margin-top:-35px;
	margin-bottom:10px;
	overflow:hidden;
}
.content_title{
	font-size:24px;
	margin-top:20px;
	margin-bottom:5px;
}
.small_size{
	font-size:20px;
}
#contact_others{
	position:relative;
	margin-top:-180px;
}



/*fellow.html*/
#main_fellow{
	width:1350px;
	height:588px;
	position:relative;
	background-image:url(img/fellow/flame_fellow.png);
	background-repeat:no-repeat;
	margin:50px 0px 20px 130px;
}
#fellow_title{
	position:relative;
	top:240px;
	left:-520px;
	animation-duration:2s;
	animation-name:slidein;
}
#colum1_fellow{
	width:740px;
	height:1820px;
	background-image:url(img/colum1.png);
	background-repeat:no-repeat;
	position:relative;
	top:-100px;
	left:120px;
}

#colum1_fellow iframe{
	position:absolute;
	top:-1530px;
	left:-360px;
	width:1440px;
	height:4800px;
}



/*dot.html*/
#main_dot{
	width:1350px;
	height:588px;
	position:relative;
	background-image:url(img/dot/flame02.png);
	background-repeat:no-repeat;
	margin:50px 0px 20px 130px;
}
#dot_title{
	position:relative;
	top:230px;
	left:-510px;
	animation-duration:2s;
	animation-name:slidein;
}
#colum1_dot{
	width:740px;
	height:1710px;
	background-image:url(img/colum1.png);
	background-repeat:no-repeat;
	position:relative;
	top:-100px;
	left:120px;
}

#colum1_dot iframe{
	position:absolute;
	top:-1430px;
	left:-360px;
	width:1440px;
	height:4500px;
}


/*stuff_aichi.html*/
#main_stuff_aichi{
	width:1350px;
	height:588px;
	position:relative;
	background-image:url(img/stuffaichi/frame04.png);
	background-repeat:no-repeat;
	margin:50px 0px 20px 130px;
}
#stuff_aichi_title{
	font-size:70px;
	font-weight:600;
	font-family:"Noto sans JP";
	position:relative;
	top:270px;
	left:-450px;
	animation-duration:2s;
	animation-name:slidein;
}
.jp_title{
	font-size:28px;
	font-weight:600;
}
#colum1_stuffaichi{
	width:740px;
	height:1990px;
	background-image:url(img/colum1.png);
	background-repeat:no-repeat;
	position:relative;
	top:-100px;
	left:120px;
}
#colum1_stuffaichi iframe{
	position:absolute;
	top:-1700px;
	left:-360px;
	width:1440px;
	height:5311px;
}


/*portfolio.html*/
#main_portfolio{
	width:1350px;
	height:587px;
	position:relative;
	background-image:url(img/portfolio/flame07.png);
	background-repeat:no-repeat;
	margin:50px 0px 20px 130px;
}
#portfolio_title{
	position:relative;
	top:220px;
	left:-470px;
	animation-duration:2s;
	animation-name:slidein;
}
#colum1_portfolio{
	width:740px;
	height:1390px;
	background-image:url(img/colum1.png);
	background-repeat:no-repeat;
	position:relative;
	top:-100px;
	left:120px;
}
#colum1_portfolio iframe{
	position:absolute;
	top:-1170px;
	left:-360px;
	width:1440px;
	height:3709px;
}

/*sinrin.html*/
#sinrin_wrap{
	width:1520px;
	overflow:hidden;
}
#main_sinrin{
	width:1350px;
	height:588px;
	position:relative;
	background-image:url(img/sinrin/frame05.png);
	background-repeat:no-repeat;
	margin:50px 0px 20px 130px;
}
.s_works_nav ul{
	color:#FFF;
	list-style-type:none;
	margin-top:20px;
	position:fixed;
	top:60px;
	left:83.5em;
	z-index:100;
}
.s_works_nav li{
	font-size:20px;
	color:#FFF;
	padding-top:20px;
}
.s_works_nav li a:link{
	color:#FFF;
	text-decoration:none;
}
.s_works_nav li a:visited{
	color:#FFF;
}

#sinrin_title{
	font-size:70px;
	font-weight:600;
	font-family:"Noto sans JP";
	position:relative;
	top:280px;
	left:-390px;
	animation-duration:2s;
	animation-name:slidein;
}
#colum1_sinrin{
	width:740px;
	position:relative;
	top:-100px;
	left:120px;
}
#sinrin_section1{
	width:510px;
	position:absolute;
	top:60em;
	left:82em;
	font-size:11px;
	font-family:"NATS","Noto Sans JP","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
}
.sinrin_tool_title{
	font-size:48px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	padding-top:30px;
	line-height:60px;
}

.sinrin_art_title{
	font-size:48px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	margin-top:20px;
	background-image:url(img/sinrin/design_concept_background.png);
	background-repeat:no-repeat;
	background-position:-2px 0px;
	width:600px;
	line-height:80px;
	padding-left:60px;
	margin-bottom:-10px;
}

.sinrin_figma_icon{
	font-size:32px;
	margin-left:20px;
	background-image:url(img/icon/figma_icon.png);
	background-repeat:no-repeat;
	background-position:80px 3px;
}

.sinrin_illustrator_icon{
	font-size:32px;
	padding-right:50px;
	background-image:url(img/icon/illustrator_icon.png);
	background-repeat:no-repeat;
	background-position:120px 3px;
	position:absolute;
	top:90px;
	left:200px;
}
#sinrin_section2{
	width:54em;
	position:relative;
	top:-3.5em;
	left:8.5em;
}
d_concept_art{
	width:780px;
}
.d_concept_title{
	font-size:40px;
	font-weight:600;
	line-height:60px;
	margin:40px 0 10px 5px;
}
.d_concept_text{
	font-size:13px;
	line-height:1.7;
	padding-bottom:40px;
}

.d_box_genre{
	font-size:24px;
}
.dc_kanji{
	font-size:11px;
	color:#656565;
	margin-left:10px;
}
#sinrin_other{
	width:500px;
	height:690px;
	background-color:#FBF6EB;
	position:absolute;
	top:76em;
	left:62em;
	z-index:-1;
	overflow:hidden;
}
.sinrin_other_title{
	font-size:48px;
	line-height:0.8;
	text-align:center;
	padding-top:30px;

}
.sinrin_other_subtitle{
	font-size:14px;
	line-height:18px;
	font-weight:600;
	text-align:center;
	margin-top:5px;
	margin-bottom:50px;
}

.s_o_content1{
	clear:both;
}
.s_o_content1 p{
	float:left;
	font-size:11px;
}
.s_o_content1 p:nth-child(1){
	margin-left:20px;
}
.s_o_content1 p:nth-child(2){
	margin:30px 0 0 20px;
	line-height:2;
}

.s_o_content2{
	clear:both;
	padding-top:20px;
}
.s_o_content2 p{
	float:left;
	font-size:11px;
}
.s_o_content2 p:nth-child(1){
	margin-left:20px;
}
.s_o_content2 p:nth-child(2){
	margin:10px 0 0 20px;
	line-height:2;
}

.s_o_content3{
	clear:both;
	padding-top:40px;

}
.s_o_content3 p{
	float:left;
	font-size:11px;
}
.s_o_content3 p:nth-child(1){
	margin-left:40px;
}
.s_o_content3 p:nth-child(2){
	margin:20px 0 0 30px;
	line-height:2;
}
.s_o_c_title{
	font-size:16px;
	font-weight:600;
}
#contact_sinrin{
	width:1516px;
	position:absolute;
	top:108em;
	overflow:hidden;
}

.contact_title_sinrin{
	width:4em;
	position:relative;
	top:1em;
	left:0.7em;
	font-size:128px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	text-align:left;
}



/*works.html*/
#wrap_works{
	width:1202px;
	height:2410px;
	margin:100px 0 0 160px;
	background-image:url(img/works_frame.jpg);
	background-repeat:no-repeat;
}
.works_main_title{
	width:22em;
	text-align:center;
	position:relative;
	top:70px;
	left:650px;
}

.works_main_title h1{
	letter-spacing:0.1em;
}
.works_name{
	position:relative;
	top:-25px;
	left:0px;
	font-family:"Century Gothic","NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	font-size:15px;
	font-weight:500;
	letter-spacing:1.0em;
}

#work_nav ul{
	width:100px;
	height:550px;
	position:relative;
	top:-220px;
	right:-1160px;
}
#work_nav li{
	width:8em;
	list-style-type:none;
	padding:15px 0px;
	line-height:20px;
	font-size:20px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
}
#work_nav li a:link{
	color:#000;
	text-decoration:none;
}
#work_nav li a:visited{
	color:#000;
}
#work_nav li a:hover{
	text-decoration-line: 1px solid #000;
}
#works_works{
	width:1200px;
	position:relative;
	top:-270px;
	left:20px;
}
.works_boxes{
	display:flex;
}
.works_box{
	flex:row;
	width:390px;
	font-size:12px;
	margin:10px 10px 0px 10px;
	overflow:hidden;
}
.works_works_boxs{
	padding:0px 40px 100px 0px;
}
.works_genre{
	font-size:20px;
	font-family:"NATS";
	letter-spacing:0.1em;
	width:366px;
	line-height:27px;
	padding-left:7px;
	border:#000 solid 2px;
}
.works_hp_photo1{
	width:380px;
	height:240px;
	background-image:url(img/stuffaichi_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s;
}
.works_hp_photo1:hover{
	background-position:0px -240px;
}
.works_hp_photo2{
	width:380px;
	height:240px;
	background-image:url(img/dot_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s;
}
.works_hp_photo2:hover{
	background-position:0px -240px;
}
.works_hp_photo3{
	width:380px;
	height:240px;
	background-image:url(img/fellow_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s;
}
.works_hp_photo3:hover{
	background-position:0px -240px;
}
.works_hp_photo4{
	width:380px;
	height:240px;
	background-image:url(img/ble_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s;
}
.works_hp_photo4:hover{
	background-position:0px -240px;
}
.works_hp_photo5{
	width:380px;
	height:240px;
	background-image:url(img/portfolio_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s;
}
.works_hp_photo5:hover{
	background-position:0px -240px;
}
.works_hp_photo6{
	width:380px;
	height:240px;
	background-image:url(img/sinrin_overray.png);
	background-position:0px 0px;
	background-repeat:no-repeat;
	background-size:380px 480px;
	transition:0.4s;
}
.works_hp_photo6:hover{
	background-position:0px -240px;
}
.w_view_work_button{
	color:#000;
	font-weight:bold;
	font-size:16px;
	background-image:url(img/view_work_background.png);
	background-repeat:no-repeat;
	background-size:370px;
	padding:18px 0px 100px 245px;

}
.w_view_work_button a:link{
	color:#000;
	text-decoration:none;
}
.w_view_work_button a:visited{
	color:#000;
}

.works_top_r_button{
	font-size:48px;
	color:#fff;
	width:400px;
	line-height:90px;
	text-align:center;
	background-image:url(img/aboutme/top_r_back.png);
	background-repeat:no-repeat;
	background-position:0em 0em;
	position:absolute;
	top:47em;
	left:2.5em;
	z-index:100;
}
.works_top_r_button a:link{
	color:#fff;
	text-decoration:none;
}
.works_top_r_button a:visited{
	color:#fff;
}

#works_contact{
	position:absolute;
	top:157em;
}
.works_contact_title{
	position:relative;
	top:130px;
	left:-4em;
	font-size:128px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	text-align:center;
	overflow:hidden;
}
.works_info{
	position:relative;
	top:130px;
	left:-11.8em;
	font-size:36px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	font-weight:400;
	text-align:center;
	line-height:1.5;
	overflow:hidden;

}
.works_copyright{
	text-align:right;
	width:9em;
	color:#d9d9d9;
	position:absolute;
	top:520px;
	left:1330px;
	z-index:2;
}


/*aboutme.html*/
#aboutme_wrap{
	width:1002px;
	height:3467px;
	margin-left:16em;
	margin-top:100px;
	background-image:url(img/aboutme/aboutme_frame.png);
	background-repeat:no-repeat;
}
#aboutme_main{
	position:;relative
	display:box;
	height:3em;
}

#aboutme_nav ul{
	width:300px;
	height:550px;
	position:absolute;
	top:4.1em;
	left:77em;
	z-index:100;
}

#aboutme_nav li{
	list-style-type:none;
	padding:15px 0px;
	line-height:20px;
	font-size:20px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
}
#aboutme_nav li a:link{
	color:#000;
	text-decoration:none;
}
#aboutme_nav li a:visited{
	color:#000;
}

#aboutme_nav li a:hover{
text-decoration-line: 1px solid #000;
}
.aboutme_title{
	width:30em;
	position:absolute;
	top:20em;
	left:45em;
	animation-duration:3s;
	animation-name:fadein;
}

.aboutme_t{
	line-height:0.8em;
}
.aboutme_s_t{
	text-align:center;
	font-size:15px;
	font-weight:bold;
	letter-spacing:1em;
	margin-top:5px;
}
#profile{
	position:relative;
	display:box;
	padding-bottom:50em;
}
#pf_title{
	font-size:64px;
	width:400px;
	background-color:#fff;
	border:0.5px black solid;
	line-height:90px;
	height:100px;
	position:absolute;
	top:6.5em;
	left:10em;
}
.pf_text{
	line-height:1.9;
}
.aboutme_my_photo{
	position:relative;
	top:37em;
	left:7em;
}
.profile1{
	padding:50px 100px;
	background-image:url(img/aboutme/pf1_back.png);
	background-repeat:no-repeat;
	background-position:0em 1em;
	position:absolute;
	bottom:26em;
	right:6em;
	z-index:-1;
	color:#fff;
	text-align:center;
}
.pf_ename{
	font-size:48px;
	line-height:0.7em;
	padding-bottom:0.2em;

}
.pf_jname{
	font-size:20px;
	padding-bottom:1.5em;
}
.pf_text{
	font-size:14px;
}
.profile2{
	color:#000;
	width:800px;
	padding:30px 0 40px 0;
	border:0.5px #000 solid;
	position:relative;
	top:45em;
	left:6.5em;
	line-height:2.7;
	text-align:center;
	font-family:'Noto Sans jp';
	font-weight:400;
}
#skil{
	height:80em;
	position:relative;
}
#skil_c{
	padding-left:5em;
}

#skil p{
	color:#000;
	
}
#skil_title{
	color:#fff;
	background-image:url(img/aboutme/skil_t_back.png);
	background-repeat:no-repeat;
	line-height:200px;
	width:1536px;
	position:relative;
	top:0em;
	right:2.1em;
}
.skil_d_title{
	color:#000;
	font-size:48px;
	text-align:left;
	padding:1.5em 0 0.5em 0em;
	line-height:1em;
}
.aboutme_works{
	display:flex;
}
.works_p{
	flex:raw;
	padding-right:50px;
}
.aboutme_tool{
	display:flex;
}
.aboutme_tool p:nth-child(2n){
	font-family:'Noto sans JP';
	font-size:0.8em;
	line-height:2;
	letter-spacing:0.1em;
	text-align:center;
}
.tool_title{
	font-size:24px;
	line-height:0.9em;
	font-weight:600;
	margin:30px 0px 10px 0px;
}
.t_figma_title{
	font-size:32px;
	background-image:url(img/icon/figma_icon.png);
	background-repeat:no-repeat;
	background-position:0px 3px;
	padding-left:2em;
	padding-bottom:0.4em;
}
.t_photoshop_title{
	font-size:32px;
	background-image:url(img/icon/photoshop_icon.png);
	background-repeat:no-repeat;
	background-position:0px 3px;
	padding-left:1.5em;
	padding-bottom:0.4em;
}
.t_illustrator_title{
	font-size:32px;
	background-image:url(img/icon/illustrator_icon.png);
	background-repeat:no-repeat;
	background-position:0px 3px;
	padding-left:1.5em;
	padding-bottom:0.4em;
}
.t_html_title{
	font-size:32px;
	background-image:url(img/icon/html_css_icon.png);
	background-repeat:no-repeat;
	background-position:0px 3px;
	padding-left:1.5em;
	padding-bottom:0.4em;
}
.aboutme_tool_star{
	width:130px;
	margin-top:3px;
}
.aboutme_tool_s{
	flex:raw;
	margin-right:3.6em;
	margin-left:0.6em;

}
.aboutme_tool_s p:nth-child(3n){
	font-size:12px;
	font-family:Noto sans JP;
	text-align:left;
	padding-top:10px;
	line-height:1.8;
	margin-left:0.6em;
}
.sales_skil{
	width:850px;
}
.sales_skil p{
	font-family:'Noto sans JP';
	font-size:16px;
	margin-bottom:20px;
}
.skil_s_title{
	text-align:left;
	color:#000;
	font-size:48px;
	line-height:0.7em;
	margin:1.5em 0em 0.5em 0em;
	
}
.percent{
	font-size:48px;
	font-family:'NATS','Noto sans JP';
	margin-right:20px;
}
.p83{
	font-size:96px;
	margin-right:20px;
	line-height:1em;
}
.skil_c_title{
	text-align:left;
	font-size:48px;
	line-height:1em;
	margin:1.5em 0 0.5em 0;
}
.cooking_photo{
	display:flex;
}
.cooking_photo1{
	flex:raw;
}
.cooking_photo2{
	flex:raw;
	margin-left:3em;
}
.cooking_skil_text{
	margin-top:1.2em;
	font-family:'Noto sans JP';
	letter-spacing:0.1em;
}
.top_r_button{
	font-size:48px;
	color:#fff;
	width:400px;
	line-height:90px;
	text-align:center;
	background-image:url(img/aboutme/top_r_back.png);
	background-repeat:no-repeat;
	background-position:0em 0em;
	position:relative;
	top:-4em;
	left:4.5em;
	z-index:100;
}
.top_r_button a:link{
	color:#fff;
	text-decoration:none;
}
.top_r_button a:visited{
	color:#fff;
}

.modoru{
	font-size:24px;
}
#ab_contact{
	position:relative;
}
.ab_contact_title{
	position:absolute;
	top:0.2em;
	left:0.55em;
	padding-top:100px;
	font-size:128px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	text-align:center;
}
.ab_contact_background{
	position:absolute;
	top:100px;
	left:150px;
	z-index:-1;
}
.ab_info{
	width:20em;
	position:absolute;
	top:7.7em;
	left:-0.5em;
	font-size:36px;
	font-family:"NATS","游ゴシック","ヒラギノ角ゴ ProN","sans-serif";
	font-weight:400;
	text-align:center;
	line-height:1.5;
}
#ab_footer{
	position:relative;
}
.ab_sitemap{
	width:1530px;
	position:relative;
	top:500px;
	background-color:#000;
	padding-left:100px;
}
.ab_sitemap li{
	display:inline;
	font-size:32px;
	color:white;
	padding:0px 20px;
}
.ab_sitemap li a:link{
	color:#FFF;
	text-decoration:none;
}
.ab_sitemap li a:visited{
	color:#FFF;
}
.ab_copylight{
	text-align:center;
	color:#d9d9d9;
	position:absolute;
	top:515px;
	left:1350px;
	z-index:2;
}

@keyframes fadein{
	from{		
		opacity:0%;
	}
	50%{
		opacity:30%;
	}
	to{
		opacity:100%;
	}
}

@keyframes slidein{
	from{
		margin-right:100%;
		width:200%;
		opacity:0%;
	}
	50%{
		opacity:30%;
	}
	to{
		margin-right:70%;
		width:100%;
		opacity:100%;
	}
}
