/* 全体のデザインを統括するスタイルシート *********************************************************/

/***************************************************************************************************
PC・タブレット・スマホ共通
***************************************************************************************************/
@media screen, print {
	/***********************************************************************************************
	ボディ
	***********************************************************************************************/
	body {
		background-color:#f0f0f0;
		color:4f4f4f;
		font-family:'Hiragino Kaku Gothic Pro';
		margin:0;
		padding:0:
		text-align:center;
	}
	
	/***********************************************************************************************
	見出し
	***********************************************************************************************/
	body#index h1,
	header span#logo {
		color:#ff0000;
		display:block;
		margin:0 auto;
		text-align:left;
	}
	
	body:not(#index) h1,
	body#index h2 {
		background-color:#bce2e8;
		background: -moz-linear-gradient(top,#fff 0%,#bce2e8);
		background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#bce2e8));
		display:block;
		text-align:left;
	}
	
	body:not(#index) h1:before,
	body#index h2:before {
		content:"★ ";
	}
	
	body:not(#index) h1 span,
	body#index h2 span {
		font-size:150%;
		font-weight:bold;
	}
	
	body:not(#index) h2,
	body#index h3 {
		border-bottom:solid 1px #999;
		display:block;
		font-size:125%;
		font-weight:bold;
		margin-bottom:10px;
		text-align:left;
	}
	
	body:not(#index) h2 span,
	body#index h3 span {
		font-size:150%;
		font-weight:bold;
	}
	
	body:not(#index) h3,
	body#index h4 {
		font-size:130%;
		font-weight:bold;
		padding:10px 0 10px 8px;
	}
	
	body:not(#index) h3 span,
	body#index h4 span {
		padding-left:10px;
	}
	
	body:not(#index) h4,
	body#index h5 {
		font-weight:bold;
		padding:10px 0 10px 8px;
	}
	
	/***********************************************************************************************
	リンク
	***********************************************************************************************/
	a {
		color:#0000ff;
	}
	
	/***********************************************************************************************
	サイト設計
	***********************************************************************************************/
	div#wrapper {
		margin:0;
		padding:0;
		text-align:center;
	}
	
	div#visual {
		background-color:#000;
		color:#fff;
		padding:0;
	}
	
	div#visual div {
		text-align:left;
	}
	
	div#wrapper header {
		background-color:#fff;
		border-bottom:solid 5px #3333ff;
	}
	
	div#wrapper header a {
		color:#4f4f4f;
	}
	
	div#wrapper div#content {
		background-color:#fff;
	}
	div#wrapper div#content div#article {
		text-align:left;
	}
	
	div#wrapper div#utility {
		
	}
	
	div#wrapper div#utility dl#main-content {
		border:solid 3px #164a84;
		margin:0 0 20px 0;
		padding:0;
	}
	
	div#wrapper div#utility dl#main-content dt {
		background-color:#164a84;
		border:solid 1px #e6e6fa;
		color:#fff;
		font-size:120%;
		font-weight:bold;
		margin:0;
		padding:10px 0;
		
	}
	
	div#wrapper div#utility dl#main-content dd {
		background-color:#e6e6fa;
		margin:0;
		padding:10px 0;
	}
	
	div#wrapper div#utility dl#main-content dd ul {
		list-style-type:none;
		margin:0;
		padding:0;
		
	}
	
	div#wrapper div#utility dl#main-content dd ul li {
		margin:0 10px 10px 10px;
	}
	
	div#wrapper div#utility dl#main-content dd ul li.last {

	}
	
	div#wrapper div#utility dl#main-content dd ul li a {
		background-color:#5a79ba;
		background: -moz-linear-gradient(top,#5a79ba 0%,#3e62ad);
		background: -webkit-gradient(linear, left top, left bottom, from(#5a79ba), to(#3e62ad));
		border:solid 2px #ededed;
		-moz-box-shadow: 1px 1px 1px rgba(000,000,000,1);
		-webkit-box-shadow: 1px 1px 1px rgba(000,000,000,1);
		border-radius:100px;
		color:#fff;
		display:block;
		font-size:110%;
		font-weight:bold;
		line-height:1.5;
		padding:10px 0;
		text-decoration:none;
	}
	
	div#wrapper div#utility dl#main-content dd ul li a.ptn-02 {
		background-color:#f0908d;
		background: -moz-linear-gradient(top,#f0908d 0%,#ee827c);
		background: -webkit-gradient(linear, left top, left bottom, from(#f0908d), to(#ee827c));
		margin-top:10px;
	}
	
	div#wrapper div#utility ul#bnr {
		list-style-type:none;
		margin:0;
		padding:0;
	}
	
	div#wrapper div#trace {
		background-color:#fff;
	}
	
	div#wrapper div#trace p {
		margin:0;
		text-align:right;
	}
	
	div#wrapper div#trace p em {
		font-weight:bold;
	}
	
	div#wrapper div#footer {
		background-color:#ccc;
		border-top:solid 2px #3333ff;
	}
}

/***************************************************************************************************
PC 781px以上のディスプレイで表示(1020pxで最適に見える)
***************************************************************************************************/
@media screen and (min-width:781px) {
	/***********************************************************************************************
	見出し
	***********************************************************************************************/
	body#index h1,
	header span#logo {
		font-size:180%;
		font-weight:bold;
		max-width:1020px;
	}
	
	body:not(#index) h1,
	body#index h2 {
		font-size:180%;
		font-weight:bold;
		margin:0 0 15px 0;
		padding:7px 5px;
	}
	
	body:not(#index) h2,
	body#index h3 {
		font-size:180%;
		font-weight:bold;
		margin:0 0 10px 0;
		padding:7px 5px;
	}
	
	body:not(#index) h3,
	body#index h4 {
		margin:0 0 10px 0;
	}
	
	body:not(#index) h4,
	body#index h5 {
		margin:0 0 5px 0;
	}
	
	/***********************************************************************************************
	サイト設計
	***********************************************************************************************/
	div#wrapper header {
		margin:0 auto;
		padding:50px 0 20px 0;
	}
	
	div#visual {
		margin:0 auto;
		max-width:1020px;
		width:100%;
	}
	
	div#visual:after {
		content:"";
		display:block;
		clear:both;
		overflow:hidden;
	}
	
	#visual img {
		float:left;
		max-width:700px;
		width:60.784%;
	}
	
	div#visual div {
		float:right;
		max-width:620px;
		width:37.255%;
	}
	
	div#wrapper div#content {
		margin:0 auto;
		max-width:1020px;
		overflow:hidden;
		padding:10px 0;
		width:100%;
	}
	
	div#wrapper div#content:after {
		content:"";
		display:block;
		clear:both;
		overflow:hidden;
	}
	
	div#wrapper div#content div#utility {
		float:left;
		width:21.5686%;		/* 220px ÷ 1020px */
	}
	
	div#wrapper div#content div#article {
		float:right;
		width:76.4706%;		/* 780px ÷ 1020px; */
	}
	
	div#wrapper div#trace {
		font-size:85%;
		margin:0 auto;
		max-width:1020px;
		width:100%;
	}
	
	div#wrapper div#footer {
		margin:0 auto;
		max-width:1020px;
		padding:15px 0 10px 0;
		width:100%;
	}

}

/***************************************************************************************************
タブレット 461px以上、780px以下のディスプレイで表示(780pxで最適に見える)
***************************************************************************************************/
@media screen and (min-width:481px) and (max-width:940px) {
	/***********************************************************************************************
	見出し
	***********************************************************************************************/
	body#index h1,
	header span#logo {
		font-size:150%;
		max-width:780px;
	}
	body:not(#index) h1,
	body#index h2 {
		font-size:150%;
		font-weight:bold;
		margin:0 0 15px 0;
		padding:7px 5px;
	}
	
	/***********************************************************************************************
	サイト設計
	***********************************************************************************************/
	div#wrapper header {
		margin:0 auto;
		padding:30px 0 10px 0;
	}
	
	div#wrapper div#visual img {
		max-width:780px;
		width:100%;
	}
	
	div#wrapper div#content {
		margin:0 auto;
		max-width:780px;
		width:100%;
	}

	div#wrapper div#utility dl#main-content dd {
		display:none;
	}
	
	div#wrapper div#trace {
		font-size:85%;
		margin:0 auto;
		max-width:780px;
		width:100%;
	}
	
	div#wrapper div#footer {
		margin:0 auto;
		max-width:780px;
		padding:15px 0 10px 0;
		width:100%;
	}

}

/***************************************************************************************************
スマホ 460px以下のディスプレイで表示(460pxで最適に見える)
***************************************************************************************************/
@media screen and (max-width:460px) {
	/***********************************************************************************************
	見出し
	***********************************************************************************************/
	body#index h1,
	header span#logo {
		font-size:130%;
		max-width:940px;
	}
	body:not(#index) h1,
	body#index h2 {
		font-size:130%;
		font-weight:bold;
		margin:0 0 15px 0;
		padding:7px 5px;
	}
	
	/***********************************************************************************************
	サイト設計
	***********************************************************************************************/
	div#wrapper header {
		margin:0 auto;
		padding:30px 0 10px 0;
	}
	
	div#wrapper div#visual img {
		max-width:460px;
		width:100%;
	}
	
	div#wrapper div#content {
		margin:10px auto 0 auto;
		max-width:460px;
		width:100%;
	}
	
	div#wrapper div#content div#utility {
		margin:10px auto;
	}
	
	div#wrapper div#content div#utility dl#main-content {
		padding-bottom:0;
	}
	
	div#wrapper div#utility dl#main-content dd {
		display:none;
	}
	div#wrapper div#trace {
		display:none;
	}
	
	div#wrapper div#footer {
		margin:0 auto;
		max-width:460px;
		padding:15px 0 10px 0;
		width:100%;
	}

}