/*---------------------------全体-----------------------------*/


/*---------------------------ヘッダー-------------------------*/

header {

	margin: 0 auto 0 auto;
	padding: 0;
	width: 900px;
	/*border: solid 1px #333;*/
}

nav {

	margin: 0 0 0 400px;
	padding: 30px 0 50px 0;
	width: 500px;
	height: 40px;
	letter-spacing: 0.05em;
	/*background: #eee;*/

}

picture img {

	width: 50%;
	margin: auto;
	padding: 0;
	display: block;
	vertical-align: bottom;

}

/***********************/

#page_header {

	max-width: 100%;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 60% 40%;
	grid-template-rows: auto auto;
	/*background: #ccc;*/

}

#page_header div {

	margin: 0;
	grid-column: 1;
	grid-row: 1;
	/*background: #eee;*/

}

#page_header nav {

	margin: 70px 0 0 auto;
	padding: 0;
	max-width: 100%;
	letter-spacing: 0.05em;
	/*background: #eee;*/

}

#page_header ul {

	margin: 0;
	padding: 0;
	grid-column: 2;
	grid-row: 1;
	/*display: block;*/
	/*border: solid 1px #eee;*/

}

/*---------------------------メイン---------------------------*/

main {

	width: 800px;
	margin: auto;
	padding: 0 10px 0 10px;

}

h1 {

	margin: 50px 0 50px 0;
	text-align: center;
	letter-spacing: 0.5em;
	font-size: 22px;
	font-weight: normal;
	color: #76b9b2;
	/*background: #eee;*/

}

h2 {
	max-width: 100%;
	margin: 150px 0 80px 0;
	text-align: center;

}

h3 {

	margin: 120px 0 20px 0;

}

article {

	width: 600px;
	margin: auto;

}

#works {

	width: 100%;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: auto auto;

}

#works div {

	margin: 10px 10px 80px 10px;
	padding: 10px;
	/*border: solid 1px #eee;*/

}

#works h2 {

	grid-column: 1/3;
	girid-row: 1;

}

#works img {

	max-width: 80%;
	margin: 0 auto;
	display: block;
	vertical-align: bottom;

}

#works ul {

	margin: 20px 0 0 0;
	padding-bottom: 10px;
	list-style-type: none;
	border-bottom: none;
	/*background: #eee;*/

}

#skills {

	width: 780px;
	margin: auto;
	display: grid;
	grid-template-columns: 260px 260px 260px;
	grid-template-rows: auto auto auto;

}

#skills h2 {

	grid-column: 1/4;
	girid-row: 1;

}

#skills div {

	padding: 10px;
	border: none;

}

.art {

	padding: 0 0 0 10px;
	width: 100%
	text-align: center;
	border: none;

}

#skills img {

	max-width: 40%;
	margin: 30px auto;
	display: block;
	vertical-align: bottom;

}

#Contact {

	width: 80%;
	margin: auto;

}

#con {

	width: 70%;
	margin: auto;

}

#con p {

	width: 100%;
	margin: auto;
	padding-bottom: 50px;
	font-size: 15px;
	color: #ef9f9f;
	display: block;

}

#con dt {

	width: 500px;
	margin: auto;
	display: block;
	/*background: #eee;*/

}

#con dd {

	width: 450px;

}

.con_tex {

	width: 80%;
	border: solid 1px #999;

}

#privecy {

	margin: 80px auto 50px auto;

}

/*****************************/
/*************************/

#work_p {

	width: 100%;
	/*margin: 50px auto 80px auto:*/
	display: grid;
	grid-template-columns: 45% 55%;
	grid-template-rows: auto;
	/*border: solid 1px #333;*/

}

#work_p h2 {

	margin: 150px auto 120px auto;
	grid-column: 1/3;
	grid-row: 1;

}

/*#work_p img {

	width: 80%;
	margin: auto;
	vartical-align: bottom;
	grid-column: 2;
	grid-row: 2;
	display: block;

}*/

.page_img {

	width: 80%;
	vartical-align: bottom;
	grid-column: 2;
	grid-row: 2;
	margin: auto;
	display: block;

}

#work_p ul {

	max-width: 100%;
	padding: 10px;
	display: block;
	/*background: #eee;*/

}

.non {

	padding: 10px 0 0 0;
	list-style-type: none; 

}

.non img {

	width: 25%;
	margin: auto;
	display: block;
	border: solid 1px #eee;

}

.non2 {

	margin-top: 30px;
	list-style-type: none; 
	display: flex;

}

.non2 img {

	width: 30%;
	margin-top: 10px;
	display: block;
	border: solid 1px #eee;

}

.create_im {

	grid-column:1/3;
	grid-row: 4;

}

#work_p dt {

	padding-top: 10px;
	border-bottom: dotted 1px #76b9b2;

}
#work_p dd {

	padding-top: 10px;
	border-bottom: dotted 1px #76b9b2;

}

.top_line {

	border-top: dotted 1px #76b9b2;

}

.effect {

	width: 80%;
	margin: auto;
	display: block;
	grid-column: 1/3;
	grid-row: 4;

}
/***works_page***/
/*.e_im {

	grid-column: 1/3;
	grid-row: 6;

}*/

.e_im {

	max-width: 100%;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: auto auto auto auto;
	/*border: solid 1px #333;*/

}

.e_im img {

	/*width: 90%;*/
	margin: 20px auto;
	/*padding: 5px;*/
	display: block;
	border: solid 2px #fff;

}

.e_im h3 {

	grid-column: 1/5;
	grid-row: 1;

}

.w_img_s {

	width: 50%;
	margin: auto;
	grid-column: 1/2;
	grid-row: 2;

}

.w_img_b {

	grid-column: 2/5;
	grid-row; 2;

}

.w_img_eye1 {

	grid-column: 1/3;
	grid-row: 3;

}

.w_img_eye2 {

	grid-column: 3/5;
	grid-row: 3;

}

.w_img_eye3 {

	grid-column: 1/5;
	grid-row: 4;

}

.w_img_but1 {

	grid-column: 1/2;
	grid-row: 5;

}

.w_img_but2 {

	grid-column: 2/3;
	grid-row: 5;

}

.w_img_but3 {

	grid-column: 3/4;
	grid-row: 5;

}

.w_img_but4 {

	grid-column: 4/5;
	grid-row: 5;

}

.w_img_but5 {

	grid-column: 1/5;
	grid-row: 6;

}

/***?***/

.create_im {

	grid-column: 1/3;
	grid-row: 3;

}

.detail {

	width: 90%;
	margin: auto;
	grid-column: 1/3;
	grid-row: 5;

}

.cont_bu a {

	width: 180px;
	margin: 0 0 0 auto;
	padding: 10px;
	color: #fff;
	letter-spacing: 0.5em;
	text-align: center;
	background: #76b9b2;
	display: block;
	border-radius: 5px;

}

.cont_bu a:hover { background: #ef9f9f; }

/*---------------------------フッター-------------------------*/
footer {

	max-width: 100%;
	margin: 30px 0 0 0;
	padding: 20px 10px 0 30px;
	color: #fff;
	font-size: 24px;
	/*font-weight: bold;*/
	background: #b0b0b0;

}