@charset 'UTF-8';

/* --------------------------------------------------
	 設定
	 -------------------------------------------------- */

@import url(_reset.css);
@font-face {
	font-family: 'Yasasisa Gothic';
	font-weight: normal;
	font-style: normal;

	src: url(/inc/font/yasasisa_gothic.eot);
	src: url(/inc/font/yasasisa_gothic.eot#iefix) format('embedded-opentype'),
	url(/inc/font/yasasisa_gothic.woff),
	url(/inc/font/yasasisa_gothic.ttf);
}
body {
	background: #5499c4; /*url(/inc/images/pattern.png)*/
}
.wrap {
	margin: 0 auto 50px;
}
header,
#icon_wrap,
#detail_wrap {
	width: 980px;
	margin: 0 auto;
}

/* --------------------------------------------------
	 フォント
	 -------------------------------------------------- */

body {
	font: 16px/1.4 'Yasasisa Gothic', 'Lucida Grande', Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
	color: #fff;
}
h1 {
	font-size: 460%;
	font-weight: normal;
}
h2 {
	font-size: 250%;
	font-weight: normal;
}
h3,
h4,
h5 {
	font-size: 125%;
	font-weight: normal;
}
a {
	color: #008bcd;
	text-decoration: none;
}
a:hover {
	color: #fbdddd;
}
.small {
	font-size: 80%;
}
.red {
	color: #ed604d;
}
.shadow {
	text-shadow: 1px 1px #355f7a,
	2px 2px #355f7a,
	3px 3px #355f7a,
	4px 4px #355f7a,
	5px 5px #355f7a,
	6px 6px #355f7a,
	7px 7px #355f7a,
	8px 8px #355f7a,
	9px 9px #355f7a,
	10px 10px #355f7a,
	11px 11px #355f7a,
	12px 12px #355f7a,
	13px 13px #355f7a,
	14px 14px #355f7a,
	15px 15px #355f7a;
}

/* --------------------------------------------------
	 スタイル
	 -------------------------------------------------- */

h1 {
	margin: 10px 0 20px;
	font-size: 460%;
	color: #fff;
	text-align: center;
	text-shadow: 1px 1px #355f7a,
	2px 2px #355f7a,
	3px 3px #355f7a,
	4px 4px #355f7a,
	5px 5px #355f7a,
	6px 6px #355f7a,
	7px 7px #355f7a,
	8px 8px #355f7a,
	9px 9px #355f7a,
	10px 10px #355f7a,
	11px 11px #355f7a,
	12px 12px #355f7a,
	13px 13px #355f7a,
	14px 14px #355f7a,
	15px 15px #355f7a,
	16px 16px #355f7a,
	17px 17px #355f7a,
	18px 18px #355f7a,
	19px 19px #355f7a,
	20px 20px #355f7a,
	21px 21px #355f7a,
	22px 22px #355f7a,
	23px 23px #355f7a,
	24px 24px #355f7a,
	25px 25px #355f7a,
	26px 26px #355f7a,
	27px 27px #355f7a,
	28px 28px #355f7a;
}

h2 {
	margin-bottom: 20px;
	text-align: center;
}
#icon_wrap {
	list-style: none;
	letter-spacing: -.6em;
}
#icon_wrap > div {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 229px;
	height: 229px;
	margin: 0 8px 10px;
	text-align: center;
	letter-spacing: normal;
	/*  background: #1e4548;
	-webkit-border-radius: 7px;
					border-radius: 7px;
	-webkit-box-shadow: 0 5px #355f7a;
					box-shadow: 0 5px #355f7a;
*/
}
#icon_wrap div h3 {
	padding-top: 205px;
}
#icon_wrap div .icon {
	position: absolute;
	top: 0;
	left: 50%;
	width: 200px;
	height: 200px;
	margin-left: -100px;
	cursor: pointer;
	text-align: center;
	background: #1e4548;
	-webkit-border-radius: 7px;
					border-radius: 7px;
	-webkit-box-shadow: 0 5px #355f7a;
					box-shadow: 0 5px #355f7a;
}
#icon_wrap div .icon:hover {
	top: -5px;
	-webkit-box-shadow: 0 10px #355f7a;
					box-shadow: 0 10px #355f7a;
			 /*opacity: .75;*/
	/*-moz-opacity: .75;*/
	/*filter: alpha(opacity=75);*/
}
#icon_wrap div .icon:active {
	top: 5px;
	-webkit-box-shadow: 0 0 #355f7a;
					box-shadow: 0 0 #355f7a;
}
#icon_wrap div .icon a {
	display: block;
	width: 200px;
	height: 200px;
}
#icon_wrap div .icon img {
	width: 100%;
	-webkit-border-radius: 7px;
					border-radius: 7px;
}

#detail_wrap {
	display: none;
	margin-top: 2em;
}
#detail_wrap:before,
#detail_wrap:after {
	display: block;
	height: 10px;
	content: '';
	background: #1e4548;
}
#detail_wrap:before {
	-webkit-border-radius: 7px 7px 0 0;
					border-radius: 7px 7px 0 0;
}
#detail_wrap:after {
	-webkit-border-radius: 0 0 7px 7px;
					border-radius: 0 0 7px 7px;
	-webkit-box-shadow: 0 5px #355f7a;
					box-shadow: 0 5px #355f7a;
}
#detail_wrap .detail {
	display: none;
	width: 940px;
	padding: 10px 20px;
	background: #1e4548;
}
#detail_wrap .detail h3 {
	margin: .5em 0;
	font-size: 150%;
}
#detail_wrap .detail h3:first-child {
	margin-top: 0;
}
#detail_wrap .detail h4,
#detail_wrap .detail h5 {
	margin-top: 1.2em;
}

/*works*/
#detail_wrap .works h4 {
	margin-top: .5em;
	font-size: 120%;
}
#detail_wrap .works h5 {
	font-size: 100%;
}
#detail_wrap .works ul {
	list-style: none;
}
#detail_wrap .works ul li {
	float: left;
	width: 224px;
	margin-bottom: 10px;
	padding: 5px;
	border-right: 1px solid #fff;
	list-style: none;
}
#detail_wrap .works ul li:nth-child(4n) {
	border-right: 0;
}
#detail_wrap .works ul li:nth-child(4n+1) {
	clear: both;
}
#detail_wrap .works dt {
	font-size: 80%;
}
#detail_wrap .works dd {
	margin-bottom: .3em;
}

footer {
	text-align: center;
	background: #355f7a url(/inc/images/pattern.png);
}

/* --------------------------------------------------
	 アニメーション
	 -------------------------------------------------- */

a,
.ease {
	-webkit-transition: all .2s ease-in;
		 -moz-transition: all .2s ease-in;
			-ms-transition: all .2s ease-in;
			 -o-transition: all .2s ease-in;
					transition: all .2s ease-in;
}

/* --------------------------------------------------
	 クリアーフィックス
	 -------------------------------------------------- */

.clearfix {
	zoom: 1;
}
.clearfix:after {
	display: block;
	clear: both;
	content: '';
}