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

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

picture img {

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

}

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

h1 {

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

}

main {

	width: 80%;
	margin: auto;
	padding: 0;

}

#works {

	width: 60%;
	margin: auto;
	padding: 10px;
	/*background: #eee;*/

}

#skills div {

	width: 100%;
	height: 250px;
	margin: 10px 0 80px 0;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 50px 50px;
	border-bottom: dotted 1px #666;

}

.p_title {

	grid-column: 1;
	grid-row: 1;
	/*background: #ccc;*/

}

#skills img {

	margin-top: 30px;
	grid-column: 1/2;
	grid-row:2;
	/*background: #999;*/

}

.art {

	grid-column: 2;
	grid-row: 2/4;
	border-bottom: none;
	/*background: #eee;*/

}

#con {

	width: 80%;
	margin: auto;

}

.con_tex {

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

}

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

/*#work_p img {

	width: 70%;
	margin: auto;
	display: block;

}*/

.page_img {

	width: 70%;
	margin: auto;
	display: block;

}

#work_p ul {

	width: 80%;
	margin: 100px auto 0 auto;
	display: block;
	/*background: #eee;*/

}

.non {

	margin-top: 30px;
	padding: 10px 0 0 0;
	list-style-type: none; 

}

.non img {

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

}

.non2 {

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

}

.non2 img {

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

}

/*.create_im {

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

}*/

.effect {

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

}

.detail {

	width: 90%;
	margin: auto;

}

#work_p dl {

	/*margin: 0;*/
	/*background: #ccc;*/

}


.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: 1px;*/
	display: block;
	border: none;
	/*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_eye3 {

	max-width: 100%;
	grid-column: 3/5;
	grid-row: 3;

}

.w_img_eye2 {

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

}

.w_img_but1 {

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

}

.w_img_but2 {

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

}

.w_img_but3 {

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

}

.w_img_but4 {

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

}

.w_img_but5 {

	grid-column: 1/5;
	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;

}