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

:root {
  --base-font-size: 16px;
  --base-line-height: 1.6;
  --base-spacing: 1.5rem;
}

body {

	margin: 0;
	padding: 0;
	max-width: 100%;
	/*height: 100vh;*/
	color: #666;
	font-size: 16px;
	letter-spacing: 0.15em;
	background: #fff;
	font-family: "Inter", "Noto Sans JP", sans-serif;

}

body a {

	text-decoration: none;

}

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

header {

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

}

nav {

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

}

nav ul {

	margin: 0;
	padding-left: 0;
	display: flex;
	list-style-type: none;
	list-style-position: inside;

}

nav li {

	margin: auto;
	padding: 1px;
	width: 40%;
	text-align: center;
	white-space: nowrap;
	display: block;
	/*background: #eee;*/

}

picture {

	max-width: 100%;

}

picture img {

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

}

header a {

	color: #b0b0b0;
	transition: color 1s ease;
}

header a:hover { color: #ef9f9f; }
a#home_but:hover { color:#76b9b2; }
a#about:hover { color: #bba87d; }



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

#banner {

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

}


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

main {

	padding: 0 20px 0 20px;

}

h1 {

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

}

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

}

h2.page { margin: 80px 0 80px 0; }

h3 {

	margin: 80px 0 0 0;

}

h3.aboutme {

	margin: 150px 0 50px 0;

}

article {

	max-width: 100%;
	/*font-size: 14px;*/

}

.prof {

	margin: 0 0 8px 0;
	text-indent: 0.8em;

}

details [open] {

	pdding: 0.5em;

}

details[open] summary {

	background: #fff;

}


#works {

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

}

#works img {

	max-width: 100%;
	display: block;
	vertical-align: bottom;

}

#works ul {

	margin: 0 0 80px 0;
	padding-bottom: 10px;
	list-style-type: none;
	border-bottom: dotted 1px #b0b0b0;

}

.w-detail {

	text-align: right;

}


#works a {

	font-size: 14px;
	color: #ef9f9f;

}

#works a:hover { color: #76b9b2; }

#skills {

	max-width: 100%;

}

.p_title {

	margin: 10px 0 0 0;
	font-size: 20px;
	font-weight: bold;
	text-align: center;

}

.art {

	margin: 0 10px 70px 10px;
	padding: 10px;
	border-bottom: dotted 1px #b0b0b0;

}

#skills img {

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

}

#con {

	max-width: 100%;

}

#con div {

	width: 80%;
	margin: 20px auto 30px auto;
	white-space: nowrap;

}

#con p {

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

}

#con span {

	font-size: 14px;
	letter-spacing: 0;
	color: #ef9f9f;

}

.con_inp {

	border: solid 1px #999;
	/*border-radius: 5px;*/

}

.con_sub {

	color: #666;
	background: #fff;
	border: solid 1px #999;

}

.con_tex {

	width: 90%;
	border: solid 1px #999;
	/*border-radius: 8px;*/

}

#con ul {

	width: 80%;
	margin: 5px auto 30px auto;
	/*white-space: nowrap;*/
	list-style-position: outside;

}

#con dt {

	width: 90%;
	padding: 30px 0 0 5px;
	margin: 10px auto 0 auto;

}



#subm {

	text-align: right;

}

.coment_s {

	font-size: 14px;
	color: #ef9f9f

}

#privecy {

	width: 90%;
	margin: 50px auto 50px auto;
	font-size: 14px;

}

#privecy ul {

	list-style-type: none;
	list-style-position: outside;

}

a#p_top {

	margin: 120px 30px 0 auto;
	width: 50px;
	display: block;
	/*border: solid 1px #333;*/

}

#p_top img {

	width: 40px;
	margin: 0 0 0 auto;
	display: block;
	/*border: solid 1px #333;*/

}

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

.page_img {

	margin: 30px 0 50px 0;
	padding: 0;
	max-width: 100%;
	vertical-align: bottom;

}

#work_p ul {

	max-width: 100%;

}

#work_p li {

	margin-bottom: 10px;

}

#work_p dl {

	width: 90%;
	margin: 10px 0 50px 0;
	display: flex;
	flex-wrap: wrap;

}

#work_p dt {

	width: 65%;
	padding: 5px 0 0 0;
	/*background: #ccc;*/

}

#work_p dd {

	margin-left: 0;
	padding: 5px 0 0 5px;
	width: 30%;
	letter-spacing: 0.05em;
	text-align: right;
	vertical-align: bottom;
	/*background: #eee;*/

}

.top_line {

	border-top: dotted 1px #666;

}

#work_p div {

	margin-top: 100px;
	padding: 10px;
	/*background: #eee;*/

}

.detail p {

	margin-bottom: 30px;
	letter-spacing: 0.3em;
	line-height: 1.8em;
	text-indent: 0.5em;

}

/**20251022 Worcks画像**/
.e_im {

	max-width: 100%;
	margin: 10px;

}

.e_im img {

	max-width: 100%;
	margin: 20px auto 20px auto;
	display: block;
	border: solid 1px #999;

}

/***Works_P***/

.w_img_s {

	width: 20%;
}

.create_im {

	margin-top: 100px;
	padding-left: 20px;

}

.non {

	margin: 50px auto 0 0;
	list-style-type: none;
	list-style-position: outside;

}

.non img {

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

}

.non2 {

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

}

.non2 img {

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

}

/****/

.rose { color: #ef9f9f; }
.mint { color: #76b9b2; }
.brown { color: #bba87d; }

.cont_bu {

	max-width: 100%;
	margin: 100px 0 0 auto;
	/*background: #eee;*/

}

.cont_bu a {

	/*width: 100%;*/
	width: 180px;
	margin: 180px auto 0 auto;
	padding: 10px;
	color: #fff;
	letter-spacing: 0.5em;
	text-align: center;
	background-color: #76b9b2;
	display: block;
	fustify-content: center;
	align-items: center;
	border-radius: 5px;
	transition: background-color 0.4s ease, box-shadow 0.4s ease;

}

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

/*---------------------------フッター-------------------------*/

footer {

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

}

#copy_r {

	width: 180px; /**/
	margin: 50px auto 0 auto;
	font-size: 14px;
	white-space: nowrap;
	display: block;
	/*background: #eee;*/
}

#z { /*color: #bba87d*/ font-size:32px ; }