@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Arial", "ヒラギノ角ゴ Pro W3", "MSゴシック", sans-selif;
	background: #fff url(../images/imgBgWeb.png) no-repeat top left;
}

#content {
	margin: 0 auto;
}

a.logomark img {
	position: absolute;
	width: 35px;
	height: 35px;
	outline: none;
	border: none;
	top: 610px;
	left: 575px;
}

.navigation {
    margin: 0px auto;
    font-family: "Trebuchet MS", sans-selif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1.4px;
}

.navigation .item {
    position: absolute;
}

	/*--- icon 基準位置 ---*/
.wPortfolio {
    top: 80px;
    left: 390px;
}

.wProfile {
    top: 240px;
    left: 610px;
}

.wContact {
   top: 460px;
   left: 705px;
}

a.icon {
    width: 52px;
    height: 52px;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: default;
}

.wPortfolio a.icon {
    background: transparent url(../images/iconWeb.png) no-repeat 0px 0px;
}

.wProfile a.icon {
    background: transparent url(../images/iconWprofile.png) no-repeat 0px 0px;
}

.wContact a.icon {
    background: transparent url(../images/iconWcontact.png) no-repeat 0px 0px;
}

.navigation .item a.active {
		/* active時にbgのicon画像をずらす */
    background-position: 0px -52px;
}

.item img.circle {
		/* ベース円の非アクティブ時の配置 */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 52px;
    height: 52px;
    opacity: 0.1;
}

.wPortfolio h2 {
    position: absolute;
    width: 147px;
    height: 52px;
    color: #cc4d51;
    font-size: 17px;
    top: 0px;
    left: 52px;
    text-indent: 10px;
    line-height: 52px;
    text-shadow: 1px 1px 1px #fff;
    text-transform: uppercase;
}

.wProfile h2 {
    position: absolute;
    width: 147px;
    height: 52px;
    color: #cc4d51;
    font-size: 17px;
    top: 0px;
    left: 52px;
    text-indent: 10px;
    line-height: 52px;
    text-shadow: 1px 1px 1px #fff;
    text-transform: uppercase;
}

.wContact h2 {
    position: absolute;
    width: 147px;
    height: 52px;
    color: #cc4d51;
    font-size: 17px;
    top: 0px;
    left: 52px;
    text-indent: 10px;
    line-height: 52px;
    text-shadow: 1px 1px 1px #fff;
    text-transform: uppercase;
}

.item h2.active, .wPortfolio h2.active span, .wProfile h2.active span, .wContact h2.active span {
    color: #fff;
    text-shadow: 1px 0px 1px #555;
}

.item ul {
    list-style: none;
    position: absolute;
    top: 65px;
    left: 25px;
    display: none;
}

.item ul li.title {
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    padding: 3px;
    float: left;
    clear: both;
    width: 150px;
    text-shadow: 1px 1px 1px #888;
}

.item ul li a {
    font-size: 14px;
    text-decoration: none;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    padding: 3px;
    float: left;
    clear: both;
    width: 160px;
    text-shadow: 1px 1px 1px #888;
}

.wPortfolio ul li a:hover {
    background-color: #fff;
    color: #cc4d51;
    text-shadow: 1px 1px 1px #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 1px 1px 4px #666;
    -webkit-box-shadow: 1px 1px 4px #666;
    box-shadow: 1px 1px 4px #666;
}

.wProfile ul li a:hover {
    background-color: #fff;
    color: #cc4d51;
    text-shadow: 1px 1px 1px #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 1px 1px 4px #666;
    -webkit-box-shadow: 1px 1px 4px #666;
    box-shadow: 1px 1px 4px #666;
}

.wContact ul li a:hover {
    background-color: #fff;
    color: #cc4d51;
    text-shadow: 1px 1px 1px #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 1px 1px 4px #666;
    -webkit-box-shadow: 1px 1px 4px #666;
    box-shadow: 1px 1px 4px #666;
}

.banner1 {
	position: absolute;
	top: 350px;
	left: 30px;
	border: none;
}

.banner2 {
	position: absolute;
	top: 500px;
	left: 30px;
}