@charset "utf-8";

/*
	* Name: ds.css
	* License: MIT License
	  - http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license
*/


/* Stylesheet Document */

@media screen {

	/* ========================================
	   * 領域設定 - レイアウト -
	======================================== */

	body.ds {
	}


	/* ========================================
	   * 領域設定 - Contents -
	======================================== */

	body.ds #contents > h2 {
		background-color: #D8CEE3;
	}


	/* ========================================
	   * 領域設定 - Main -
	======================================== */

	body.ds #main h4 {
		color: #522587;
	}

	body.ds #main ul.setting {
		list-style-type: none;
		margin-left: -1%;
		margin-right: -1%;
		width: 102%;
	}

	body.ds #main ul.setting:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0; /* CSS HACK: Safari */
		font-size: 0; /* CSS HACK: Firefox3 */
		visibility: hidden;
	}

	body.ds #main ul.setting li {
		background-color: #E9E9E9;
		box-sizing: border-box;
		float: left;
		margin-left: 1%;
		margin-right: 1%;
		width: 48%;
	}

	body.ds #main ul.setting li h6,
		body.ds #main ul.setting li div.icon {
			text-align: center;
	}

	body.ds #main ul.setting li h6 {
		font-size: 154%;
		font-weight: normal;
		margin-bottom: 30px;
		margin-top: 30px;
	}

	body.ds #main ul.setting li div.icon {
		margin: 0 0 30px 0;
	}

	body.ds #main ul.setting li p {
		margin-bottom: 30px;
		margin-left: 8%;
		margin-right: 8%;
	}

	body.ds #main ol.layout {
		list-style-type: none;
		margin-left: 0;
	}

	body.ds #main ol.layout > li {
		background: url("../../../ds/img/icon_arrow_purple.png") center bottom no-repeat;
		margin-bottom: 28px;
		padding-bottom: 36px;
	}

	body.ds #main ol.layout > li h5.gray {
		padding-bottom: 4px;
		padding-top: 4px;
	}

	body.ds #main ol.layout > li div.container {
		margin-bottom: 60px;
		margin-left: -1%;
		margin-right: -1%;
		width: 102%;
	}

	body.ds #main ol.layout > li div.container:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0; /* CSS HACK: Safari */
		font-size: 0; /* CSS HACK: Firefox3 */
		visibility: hidden;
	}

	body.ds #main ol.layout > li div.container div.leftside,
		body.ds #main ol.layout > li div.container div.rightside {
			float: left;
			margin-left: 1%;
			margin-right: 1%;
			width: 48%;
	}

	body.ds #main ol.layout > li div.container div.rightside h6 {
		font-weight: normal;
		margin-bottom: 4px;
	}

	body.ds #main ol.layout > li div.container div.leftside img,
		body.ds #main ol.layout > li div.container div.rightside img {
			height: auto;
			width: 100%;
	}

	body.ds #main ol.layout > li div.container.layout div.rightside h6 {
		color: #91559B;
		font-size: 128%;
	}

	body.ds #main ol.layout > li div.container.layout div.rightside div.img_c {
		margin-bottom: 0;
	}

	body.ds #main ol.layout > li div.container.material div.rightside h6 {
		background-color: #91559B;
		color: #FFFFFF;
		display: inline-block;
		padding: 2px 10px 2px 10px;
	}

	body.ds #main ol.layout > li div.container.material div.rightside ul {
		margin-bottom: 28px;
	}

	body.ds #main ol.layout > li div.container.material div.rightside ul:after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		line-height: 0; /* CSS HACK: Safari */
		font-size: 0; /* CSS HACK: Firefox3 */
		visibility: hidden;
	}

	body.ds #main ol.layout > li div.container.material div.rightside ul li {
		float: left;
		margin-right: 2%;
		width: 48%;
	}

	body.ds #main ol.layout > li.completion {
		background: none;
		background-color: #4D4D4D;
		color: #FFFFFF;
		font-size: 194%;
		padding-bottom: 10px;
		padding-top: 10px;
		text-align: center;
	}

	body.ds #main ol.layout > li.completion span {
		margin-left: 16px;
		margin-right: 16px;
	}

}