@charset "UTF-8";
/*-------------
 	General
-------------*/

*{
	box-sizing: border-box;
}


body  {
	background: #ffffff;
	margin: 0; /*複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */
	padding: 0;
	text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
	color: #555;
}

.twoColLiqLtHdr #container { 
	background: #FFFFFF;
	width: 986px; 
	margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */
	text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */
} 
.twoColLiqLtHdr #header { 
	padding: 0px 0px 0px 0px;  
} 

.twoColLiqLtHdr #header #headertext {
	margin-bottom:10px;
}

/* #mainContent に関するヒント：
1. #mainContent と #sidebar1 の間のスペースは、#mainContent div の左マージンによって設定されます。#sidebar1 div に含まれるコンテンツの量に関係なく、#sidebar1 div のスペースは維持されます。#sidebar1 のコンテンツが終了した後のスペースに #mainContent div のテキストを挿入するには、この左マージンを削除します。
2. サポートされている最小解像度（800 x 600）でのフローティングエレメントの落下を回避するには、#mainContent div 内のエレメントを 430px 以下にする必要があります（イメージを含む）。
3. 下の Internet Explorer の条件分岐コメントでは、#mainContent に「hasLayout」を設定するのにズームプロパティが使用されます。これにより、いくつかの IE 固有のバグが回避されます。
*/
.twoColLiqLtHdr #mainContent { 
	margin: 0 0 0 0; /* 右マージンは、パーセントまたはピクセルで設定できます。これにより、ページの右側にスペースが設定されます。 */
	text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */
} 


.twoColLiqLtHdr #container #mainContent #navi {/*小文字ナビ部分*/
	padding: 10px opx;
	height: 38px;
}

.twoColLiqLtHdr #container #mainContent #navi #navititle {/*小文字ナビタイトル*/
	font-size: 13px;
	font-weight:bold;
	width: 120px;
	float: left;
	height: 38px;
	padding-top:4px;
}
.twoColLiqLtHdr #container #mainContent #navi #navicontents {/*小文字ナビメニュー*/
	font-size: 13px;
	width:860px;
	height: 38px;
	line-height: 160%;
	padding-top:4px;
	float: left;
}



#topmain {/*トップページのメインゾーン*/
	padding:30px 0px 10px 0px;
}

.twoColLiqLtHdr #footer { 
	padding: 0px 0px; 
	clear:both;
	text-align:center;
} 
.twoColLiqLtHdr #footer p {
	margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */
	padding: 10px 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */
	font-size:12px;
	clear:both;
}



a:link  {
	color: #0072BF;
	text-decoration: none;
	cursor: pointer;
}

a:visited {
	color: #0072BF;
	text-decoration: none
}

a:hover {
	opacity: 1;
}


hr{
	width: 150px;
	height: 2px;
	background-color: #2196F3;
	border: 0;
	margin-bottom: 80px;
}

section{
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 25px 80px;
}


	/*　@media()　PCファースト　
		PC用設定なし 1025px以上　*/

@media (max-width: 1025px){
	/*　タブレット用　600pxから1024px*/
	section{
		padding: 100px 50px;
	}

}

@media (max-width: 600px){
	/*　スマートフォン用　320pxから599px */
	section{
		padding: 80px 30px;
	}

}

section h3.title{
	color: #414a4f;
	text-transform: capitalize; 
	font: bold 32px 'Open Sans', sans-serif;
	margin-bottom: 35px;
	text-align: center;
}

section p{
	max-width: 800px;
	text-align: center;
	margin-bottom: 35px;
	padding: 0 20px;
	line-height: 2;
}


/*-------------
 	Header 制作中
-------------*/

header{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	color: #000;
	padding: 35px 100px 0;
}

header div{
	font-family: 'Quicksand', sans-serif;
}

header nav{
	display: flex;
	background-color:#bdbdbd;
	list-style: none;
}

header nav li{
	margin: 0px 15px;
	padding: 3px 0px;
}

header nav li:first-child{
	margin-left: 0;	
}

header nav li:last-child{
	margin-right: 0;	
}



@media (max-width: 1025px){
	header{
		padding: 20px 50px;
	}
}


@media (max-width: 600px){
	header{
		flex-direction: column;		
	}

	header h2{
		margin-bottom: 15px;
	}
}



 /* ブロック要素でのリンク */
 
.itembox{
	color:#000000;
	position: relative;
	width:200px;
	padding:6px;
	
}

.itembox a{
	display: block;
	position: absolute;
	top: -17px;
	left: 7px;
	height:100%;
	width: 100%;
	padding:6px;
	color:#000000;
	margin-top:20px;
}

.itembox img{
    display:block;
	margin-top:6px;
}

 /* ブロック要素でのリンク　マウスを載せたときのスタイル */
.itembox a:hover{
	color: #222;
	text-decoration: none;
	opacity: 0.6;  /* 要素を透明にするタグ */
}


/*「イラストの仕事」*/

.makinotitle {/*「イラストの仕事」牧野良幸のイラストエッセイ　各見出し*/
	margin-left:190px;
	font-size:18px;
	font-weight:bold;
	padding:0px 0px 0px 6px;;
	border-bottom:#090 solid 2px;
	border-left:#090 solid 2px;
	width:300px;	
}

.magazinetitle {/*「イラストの仕事」雑誌、WEBのイラスト　各見出し*/
	margin-left:116px;
	font-size:18px;
	font-weight:bold;
	padding:0px;
	border-bottom:#06F solid 2px;
	border-right:#06F solid 2px;
	width:276px;
}

.tankobontitle {/*「イラストの仕事」単行本のイラスト　各見出し*/
	margin-left:116px;
	font-size:18px;
	font-weight:bold;
	padding:0px;
	border-bottom:#FC0 solid 2px;
	border-right:#FC0 solid 2px;
	width:432px;
}

.adtitle {/*「イラストの仕事」広告のイラスト　各見出し*/
	margin-left:116px;
	font-size:18px;
	font-weight:bold;
	padding:0px;
	border-bottom:red solid 2px;
	border-right:red solid 2px;
	width:569px;
}

.bookcovertitle {/*「イラストの仕事」本表紙レコードのイラスト　各見出し*/
	margin-left:116px;
	font-size:18px;
	font-weight:bold;
	padding:0px;
	border-bottom:#63F solid 2px;
	border-right:#63F solid 2px;
	width:736px;
}

.modorutext {/*上層への戻りテキスト用*/
	font-size:12px;
	font-weight:100;
}

.linetitle {/*個別イラストのタイトル部分*/
	font-size:18px;
	margin-top:30px;
	padding-top:10px;
}