@charset "utf-8";
/* --------------------------------------------
   YOSHIO OKUYAMA website layout
---------------------------------------------- */

/* #main  width:100%-max980px  */



#contents {
	width: 100%;
	margin: 1em auto 3em;
	padding: 0;
	text-align: center;

}

/* h 
---------------------------------------------- */
#contents h2 {
    line-height: 1.5em;
    margin: 2em 0 2em 0;
    font-family: "Times New Roman", Times, serif;
    font-size: 18px;
    letter-spacing: 0.2em;
    font-weight: bold;
    clear: both;
    color: #3A3A3A;
	text-align: center;
}
#contents h3 {
    line-height: 1.5em;
    margin: 2em 0 2em 0;
    font-family: "Times New Roman", Times, serif;
    font-size: 22px;
    letter-spacing: 0.2em;
    font-weight: bold;
    clear: both;
    color: #3A3A3A;
}
#contents h3 span.small {
    font-size: 16px;
    font-weight: bold;
	letter-spacing: 0.1em;
}

/* works thumbnailbox width:980px 
---------------------------------------------- */

#thumbnailbox {
	max-width: 980px;
	margin: 3em auto;
	padding: 0;
	text-align: center;
}
#thumbnail {
	width: 10%;
	height: 10%;
	margin: 0.5em 1% 0.5em auto;
	padding: 0;
	float: left;
	text-align: center;
	align-items: center;
    display: flex;
	border: none;
}
#thumbnail img {
	width:auto;
	height:auto;
	max-width:100%;
	text-align: center;
	padding: 0;
}



/*  text line 
---------------------------------------------- */
#contents p {
	text-align: left;
	line-height: 1.5em;
	color: #333;
	margin: 1em 0 0 0;
	font-family: Verdana, Geneva, "sans-serif";
}
#contents .center {
	text-align:center;
}
#contents .small1 {
	font-size: smaller;
}
#contents .bold1 {
	font-weight: bolder;
	color: #3273B7;
}
#contents .boldred {
	font-weight: bolder;
	color: #D32721;
}
#contents p.kei1 {
	border: 1px dotted #F06E70;
	width: 600px;
	padding: 1em;
	margin: 1em auto;
	clear: both;
}
#contents p.kei2 {
	text-align: center;
	border: 1px dotted #F06E70;
	padding: 1em;
	margin: 1em auto;
	clear: both;
	background-color: #FBDCB5;
}




#contents dl {
	text-align: left;
	margin: 1em 0 0 0;
	line-height: 1.5em;
}
#contents dl dt {
	text-align: left;
	margin: 1em 0 0 0;
	font-weight: bolder;
}
#contents dl dd {
	text-align: left;
	margin: 0.5em 0 0 1.5em;
}
/* works
-------------------------------------------------------  */
img[usemap] {/*テスト中*/
		border: none;
		height: auto;
		max-width: 80%;
		width: auto;
	}
#contents h2.work {
    font-family: "Verdana, Geneva, "sans-serif";
    font-size: 27px;
	font-weight: bold;
    clear: both;
	    margin: 2em 0 2em 0;
	text-align: center;
	align-items: center;
	text-indent:-9999px;
	width:100%;
	height:60px;
	background:url("img/h2_works100.gif") center center no-repeat;
}
#contents h3.workt {
    line-height: 1.5em;
    margin: 2em 0 1em 0;
    font-family: "Times New Roman", Times, serif;
    font-size: 33px;
    letter-spacing: 0.2em;
    font-weight: bold;
    clear: both;
    color: #3A3A3A;
}
#contents p.work {
	text-align: center;
	margin: 2em auto 1em;
	font-family: 'Noto Serif JP',"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";/*jp*/
}
#contents p.pages {/*ページング*/
	max-width: 820px;
	text-align: right;
	margin: 1em auto 0;
	font-size: 1.8em;
	font-family: "Lucida Sans Unicode", "Lucida Grande", "sans-serif";
	font-weight: lighter;
}
#contents p.pages a {
	color: #2E2E2E;
}
#contents p.pages a:hover {
    color: #6F0101;
}

#contents p.pages980 {/*ページング980*/
	max-width: 980px;
	text-align: right;
	margin: 1em auto 0;
	font-size: 1em;
}
#contents p.work img.one {/*ページングすぐ下の１枚目の写真*/
	text-align: center;
	margin: -1em auto 1em;
	padding: 0;
	max-width: 980px;
}
#contents p.work img.sizeh60 {/*高さ画面の60％*/
height: 60vh;
}
#contents p.work img.size {/*高さ画面の80％ 使わないかも*/
height: 80vh;
}
#contents p.work img.sizew {/*横幅画面の100％ 使わないかも*/
	width: 100vh;
}


/* OnMy
-------------------------------------------------------  */
#contents h2.onmy {
    font-family: "Times New Roman", Times, serif;
    clear: both;
	    margin: 2em 0 2em 0;
	text-align: center;
	align-items: center;
	text-indent:-9999px;
	width:100%;
	height:60px;
	background:url("img/h2_onmy100.gif") center center no-repeat;
	overflow: hidden;/*はみ出した内容を隠すように指定*/
}
#contents #box {
    margin: auto;
	max-width: 980px;
	text-align: left;

}
#contents #boxleft30 {/*01 Rising shadow*/
	width: 30%;
	float: left;
}
#contents #boxright69 {
	width: 69%;
	float: right;
}
#contents #boxright69 h3 {
	margin: 0.5em 0 0 0;
}

#contents #boxleft49 {/*05 Kosmos*/
	width: 50%;
	float: left;
}
#contents #boxleft49 h3 {
	margin: 0.5em 0 0 0;
}
#contents #boxright49 {
	width: 49%;
	float: right;
}
#contents #boxleft60 {/*06 Celestial Visitant*/
	width: 61.5%;
	float: left;
}
#contents #boxleft60 h3 {
	margin: 0.5em 0 0 0;
}

#contents #boxright38 {
	width: 38%;
	float: right;
}
#contents #boxleft40 {/*04 Energy power*/
	width: 40.5%;
	float: left;
}
#contents #boxleft40 h3 {
	margin: 0 0 0 0;
}

#contents #boxright58 {
	width: 58%;
	float: right;
}
#contents p.left {
	float: left;
	padding-right: 1.5em;
}
#contents p.right {
	float: right;
	padding-left: 1.5em;
	margin: 0;
}
#contents p.center {
	text-align: center;
}
#contents p.onmy {
	text-align: justify;
	margin: 2em auto 1em;
	max-width: 980px;
	font-family: 'Noto Serif JP',"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";/*jp*/
}
#contents p.onmy02 {/*02 Renaissance*/
	font-family: 'Noto Serif JP',"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";/*jp*/
	text-align: justify;
	margin: -1em auto 1em;
	padding: 0 3em 0 0;
	max-width: 980px;
	hyphens: auto;
}
#contents p.onmy03 {/*02*/
	font-family: 'Noto Serif JP',"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";/*jp*/
	text-align: justify;
	margin: 2em auto 0em;
	padding: 0 4em 0 0;
	max-width: 980px;
	hyphens: auto;
}
#contents p.onmy023 {/*02*/
	font-family: 'Noto Serif JP',"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";/*jp*/
	text-align: justify;
	margin: 1em auto -1em 11em;
	max-width: 740px;
	hyphens: auto;
}
#contents p.onmy041 {/*04Energy power*/
	font-family: 'Noto Serif JP',"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";/*jp*/
	text-align: justify;
	margin: 2em auto 1em;
	max-width: 980px;
	padding: 0 0 0 0;
	hyphens: auto;
}
#contents p.onmy042 {/*04*/
	font-family: 'Noto Serif JP',"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";/*jp*/
	text-align: justify;
	margin: 2em auto 0em;
	padding: 0 3em 0 0;
	max-width: 980px;
	hyphens: auto;
}

#contents p.onmybold {
	font-family: 'Noto Serif JP',"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";/*jp*/
	text-align: left;
	font-weight: bold;
	margin: 2em auto 1em;
	max-width: 980px;
}
#contents p.page {
	font-family: "Times New Roman", Times, serif;
	text-align: center;
	max-width: 980px;
	margin: 1em auto;
	clear: both;
	font-size: 1.4em;
}
#contents p.page a.next {
	padding-left: 80px;
		text-align: left;
	display: inline-block;
	background:url("img/icon_next.gif") left center no-repeat;
	color: #2A2A2A;
}
#contents p.page a.next:hover {
	color: #821D1F;
}
#contents p.pageall {
	text-align: left;
	max-width: 980px;
	margin: 1em auto;
	clear: both;
	font-size: 0.9em;
	color: #2A2A2A;
}
#contents p.pageall a {
	color: #2A2A2A;
}
#contents p.pageall a:hover {
	color: #821D1F;
}
/* OnMy IT
-------------------------------------------------------  */
#contents h2.onmy-it {
    font-family: "Times New Roman", Times, serif;
    clear: both;
	    margin: 2em 0 2em 0;
	text-align: center;
	align-items: center;
	text-indent:-9999px;
	width:100%;
	height:60px;
	background:url("img/h2_100it.gif") center center no-repeat;
	overflow: hidden;/*はみ出した内容を隠すように指定*/
}
#contents h3.onmy-it  {
    line-height: 1.5em;
    margin: 2em 0 2em 0;
    font-family: 'Spectral', serif;
    font-size: 22px;
	font-weight: normal;
    letter-spacing: 0.2em;
    clear: both;
    color: #3A3A3A;
}
#contents p.onmy-it {
	text-align: left;
	margin: 2em auto 1em;
	max-width: 980px;
	font-family: 'Spectral', serif;
	font-size: 1.2em;
}
#contents p.onmy-itbold {
	text-align: left;
	margin: 2em auto 1em;
	max-width: 980px;
	font-family: 'Spectral', serif;
	font-weight: bold;
	font-size: 1.2em;

}
#contents p.onmy02-it {/*02 Renaissance*/
	font-family: 'Spectral', serif;
	text-align: justify;
	margin: -1em auto 1em;
	padding: 0 3em 0 0;
	max-width: 980px;
	hyphens: auto;
	font-size: 1.2em;
}
#contents p.onmy023-it {/*02*/
	font-family: 'Spectral', serif;
	text-align: justify;
	margin: 1em auto -1em 11em;
	max-width: 740px;
	hyphens: auto;
	font-size: 1.2em;
}
#contents p.onmy03-it {/*02*/
	font-family: 'Spectral', serif;
	text-align: justify;
	margin: 2em auto 0em;
	padding: 0 4em 0 0;
	max-width: 980px;
	hyphens: auto;
	font-size: 1.2em;
}
#contents p.onmy041-it {/*04Energy power*/
	font-family: 'Spectral', serif;
	text-align: justify;
	margin: 2em auto 1em;
	max-width: 980px;
	padding: 0 0 0 0;
	hyphens: auto;
	font-size: 1.2em;}
#contents p.onmy042-it {/*04*/
	font-family: 'Spectral', serif;
	text-align: justify;
	margin: 2em auto 0em;
	padding: 0 3em 0 0;
	max-width: 980px;
	hyphens: auto;
	font-size: 1.2em;}

/* profile
-------------------------------------------------------  */
#contents h2.profile {
    font-family: "Times New Roman", Times, serif;
    clear: both;
	    margin: 2em 0 2em 0;
	text-align: center;
	align-items: center;
	text-indent:-9999px;
	width:100%;
	height:60px;
	background:url("img/h2_profile100.gif") center center no-repeat;
	overflow: hidden;/*はみ出した内容を隠すように指定*/
}
#contents dl {
	margin: 1em auto 2em;
	text-align: left;
	max-width: 980px;
}
#contents dt {
	  clear: left;
	  float: left;
	  width: 4em;
}

#contents dd {
	float: left;
	margin: 0;
	padding-top: 0.5em;
}
#contents dt.public {
	clear: left;
	float: left;
	width: 27em;
}
#contents dt.public a {
    font-weight: bold;
    color: #840003;
}
/* class mail
-------------------------------------------------------  */
#formWrap {
	width:80%;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:20%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
	vertical-align: middle;
}
table.formTable td{
	text-align:left;
}
/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
	table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
	table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
	input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
	input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}

/* profile
-------------------------------------------------------  */
#contents #movietitle {
	width:200px;
	float:left;
	margin: 2em 0 0 30px;
	text-align:left;
}
#contents #movietitle h5 {
	margin: 2em 0 0 0;
	font-size:13px;
	line-height:1.2em;
	font-weight:bold;
	border-left:double 5px #AC3436;
	padding:0 0 0 10px;
}
#contents #movietitle ul {
	margin: 1em 0 0 1em;
	line-height:1.5em;
	font-size:14px;
}
#contents #movie {
	width:660px;
	float:left;
	margin: 1em 0 1em 0;
}
#contents #movie iframe {
	margin: 2em 0 0 0;
}

#contents #movie p {
	text-align:center;
	margin: auto;
}

/* 
-------------------------------------------------------  */

/* 
-------------------------------------------------------  */

/* 
-------------------------------------------------------  */

/* 
-------------------------------------------------------  */

/* 
-------------------------------------------------------  */