/* style_main.css */

/* media query 表示幅768px以上（pc対応） */
@media screen and (min-width: 768px) {
/* body */
	body {
		text-size-adjust: 100%;
		color: #4f4f4f;
		background-color: #efefef;
		font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	}
/* div */
	div {
		text-align: right;
		margin-right: 2em;
	}
/* h3 */
	h3 {
		color: #5f5f5f;
		text-align: right;
		margin: 10px 2em 10px 0;
	}
/* h4 */
	h4 {
		color:#0f8f3f;
		text-align: right;
		margin-right: 2em;
	}
/* dl, dt, dd 自己紹介用 */
	dl {
		display: flex;
		flex-wrap: wrap;
		width: 80%;
		padding: 0 2em 0 0;
		margin-left:auto;
	}
	dt {
		width: 10%;
		border: 1px #afafaf solid;
		border-top: none; /* 枠線が重なって太くならないように調整*/
		border-right: none; /* 枠線が重なって太くならないように調整*/
		padding: 5px;
		box-sizing: border-box;
		text-align: center;
		background-color: #eaf1e2;
		font-weight: bold;
	}
	dd {
		width: 90%;
		border: 1px #afafaf solid;
		border-top: none; /* 枠線が重なって太くならないように調整*/
		padding: 5px 0 5px 1em;
		margin: 0;
		box-sizing: border-box;
		text-align: left;
	}
/* dt, dd 自己紹介用・最初の行の微調整 */
	dt.first {
		width: 10%;
		border: 1px #afafaf solid;
		border-right: none;
		padding: 5px;
		box-sizing: border-box;
		text-align: center;
		background-color: #eaf1e2;
		font-weight: bold;
	}
	dd.first {
		width: 90%;
		border: 1px #afafaf solid;
		padding: 5px 0 5px 1em;
		margin: 0;
		box-sizing: border-box;
		text-align: left;
	}
/* div.list 自己紹介・職歴用 */
	.list {
		text-align: left;
		font-weight: bold;
	}
/* ul 自己紹介・職歴用 */
	ul {
		list-style: none; /* リストの点を非表示 */
		padding-left: 1em;
	}
/* dl, dt, dd 経歴用 */
	.career {
		display: flex;
		flex-wrap: wrap;
		width: 80%;
		padding: 0 2em 0 0;
	}
	.career dt {
		width: 35%;
		border: 1px #afafaf solid;
		border-top: none; /* 枠線が重なって太くならないように調整*/
		border-right: none; /* 枠線が重なって太くならないように調整*/
		padding: 1em;
		box-sizing: border-box;
		text-align: center;
		background-color: #eaf1e2;
		font-weight: normal;
	}
	.career dd {
		width: 65%;
		border: 1px #afafaf solid;
		border-top: none; /* 枠線が重なって太くならないように調整*/
		padding: 5px 0 5px 1em;
		margin: 0;
		box-sizing: border-box;
		text-align: left;
	}
/* dt, dd 経歴用・最初の行の微調整 */
	dt.career-first {
		width: 35%;
		border: 1px #afafaf solid;
		border-right: none;
		padding: 1em;
		box-sizing: border-box;
		text-align: center;
		background-color: #eaf1e2;
	}
	dd.career-first {
		width: 65%;
		border: 1px #afafaf solid;
		padding: 5px 0 5px 1em;
		margin: 0;
		box-sizing: border-box;
		text-align: left;
	}
/* a */
	a:link {
		color: #4f4f4f;
	}
	a:visited {
		color: #4f4f4f;
	}
	a:hover {
		color: #6f6faf;
	}
	a:active {
		color: #ff5555;
	}
}

/* media query 表示幅767px以下（スマホ対応） */
@media screen and (max-width: 767px) {
/* body */
	body {
		text-size-adjust: 100%;
		color: #4f4f4f;
		background-color: #efefef;
		font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	}
/* div 配置を中央寄せに */
	div {
		text-align: center;
	}
/* h3 配置を中央寄せに */
	h3 {
		color: #5f5f5f;
		margin: 3px 0 3px 0;
		text-align: center;
	}
/* h4 配置を中央寄せに */
	h4 {
		color:#0f8f3f;
		text-align: center;
	}
/* a */
	a:link {
		color: #4f4f4f;
	}
	a:visited {
		color: #4f4f4f;
	}
	a:hover {
		color: #ff0000; /* ホバー時のカラーを赤に */
	}
	a:active {
		color: #ff0000; /* アクティブ時のカラーを赤に */
	}
/* div.list */
	.list {
		text-align: left;
		font-weight: bold;
	}
/* dl, dt, dd 自己紹介用・全ての要素を中央寄せに */
	dl {
		display: block;
		width: auto;
		padding: 0 3px 0 3px;
		margin-left:auto;
		text-align: center;
	}
	dt {
		width: auto;
		border: 1px #afafaf solid;
		border-top: none;
		padding: 1px;
		box-sizing: border-box;
		background-color: #eaf1e2;
		text-align: center;
	}
	dd {
		width: auto;
		border: 1px #afafaf solid;
		border-top: none;
		padding: 3px;
		margin: 0;
		box-sizing: border-box;
		text-align: center;
	}
/* dt 自己紹介・最初の行の微調整 */
	dt.first {
		width: auto;
		border: 1px #afafaf solid;
		padding: 1px;
		box-sizing: border-box;
		text-align: center;
	}
/* ul 自己紹介・職歴用・左寄せにして2行目以降を字下げ */
	ul {
		list-style: none;
		padding: 0 5px 0 3em;
		text-indent: -2em;
		text-align: left;
	}
/* li 自己紹介・職歴用 */
	li {
		padding-bottom: 5px;
	}
/*  .sizedown 自己紹介・職歴用 文字サイズを小さく、文字色を薄くする */
	.sizedown {
		font-size: 85%;
		color: #6f6f6f;
	}
/* dl, dt, dd 経歴用・全ての要素を中央寄せに */
	.career {
		display: block;
		width: auto;
		border-top: none;
		padding: 0 3px 0 3px;
		margin-left:auto;
		text-align: center;
	}
	.career dt {
		width: auto;
		border: 1px #afafaf solid;
		border-top: none; /* 枠線が重なって太くならないように調整*/
		padding: 2px;
		box-sizing: border-box;
		text-align: center;
		background-color: #eaf1e2;
		font-weight: normal;
	}
	.career dd {
		width: auto;
		border: 1px #afafaf solid;
		border-top: none; /* 枠線が重なって太くならないように調整*/
		padding: 5px;
		margin: 0;
		box-sizing: border-box;
		text-align: left;
		font-size:90%;
	}
/* dt 経歴・最初の行の微調整 */
	dt.career-first {
		width: auto;
		padding: 2px;
		border: 1px #afafaf solid;
		box-sizing: border-box;
		text-align: center;
	}
/* dd 左寄せにするセル用 */
	dd.sideleft {
		padding-left: 5px;
		text-align: left;
	}
/* .footer コピーライトやメアドの表示部分 */
	.footer {
		font-size: 85%;
		text-align: right;
		margin-right: 2px;
	}
}