@charset "utf-8";
/* ------------------
created date 2013.05
------------------ */
body{
background:#1b1e22 url(../images/bg.png) no-repeat left top / cover;
position: relative;
height:100%;
min-width:1000px;
}

#navArea{
position: absolute;
width:100%;
height:180px;
top:50%;
margin-top:-90px;
}
#layer01{
position: absolute;
width:100%;
height:55px;
top:50%;
margin-top:-27px;
background:#969076;
z-index:1;
-webkit-transition: all .1s linear;
}
#navArea h1{
position: absolute;
width:168px;
height:18px;
top:50%;
left:50px;
background:url(../images/logo_home.png) no-repeat left top;
background-size:100%;
margin-top:-9px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
#navArea nav{
position:absolute;
top:0;
left:50%;
margin-left:-181px;
width:362px;
height:180px;
z-index:4;
}
#navArea nav ul{
width:362px;
height:180px;
zoom:1;
}
#navArea nav ul:after{
content: ""; 
display: block; 
clear: both;
}
#navArea nav li{
float:left;
width:180px;
height:180px;
text-align:center;
}
#btnProfile{
margin-right:1px;
}
#btnBlog{
margin-right:1px;
}
#navArea nav li a{
margin:0 auto;
position:relative;
background:url(../images/btn_bg.png) no-repeat left top;
display:block;
width:180px;
height:180px;
color:#969076;
text-align:center;
font-size:16px;
font-weight:bold;
line-height:1;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
text-decoration: none;
-webkit-transition: all .1s linear;
}
#navArea nav li a:hover{
background-color:#000;
opacity: 0.3;
-webkit-transition: opacity .4s linear;
}
#navArea nav li a.on{
background-color:#fff;
opacity: 0.5;
color:#000;
}
#navArea nav li a span{
display:inline-block;
position:absolute;
top:50%;
left:0;
width:100%;
margin-top:-6px;
}
#conts01{
position:absolute;
margin-top:111px;
top:50%;
left:50px;
width:590px;
z-index:2;
}
#informationArea{
color:#bbb;
}
#informationArea h2{
font-size: 1.2em;
}
#informationArea dl{
margin-top: 10px;
display: table;
}
#informationArea dt,
#informationArea dd{
display: table-cell;
font-size: 0.8em;
line-height: 1.3;
}
#informationArea dt{
padding-right:1em;
width:40px;
font-weight: bold;
}
#informationArea dd{
width:450px;
color:#ccc;
}
#linkArea{
margin-top:30px;
color:#bbb;
}
#linkArea h2{
font-size: 1.2em;
}
#linkArea li{
margin-top:7px;
line-height: 1;
}
#linkArea li a{
padding-right:18px;
background:url(../images/icon_blank.png) no-repeat right 2px;
color:#ccc;
text-decoration: none;
-webkit-transition: color .1s linear;
}
#linkArea li a:hover{
color:#fff;
-webkit-transition: color .1s linear;
}

#profileArea{
display:block;
width: 100%;
text-align: center;
color:#969076;
position:absolute;
top:0;
font-family:"Economica";
}
#profileArea dt,
#profileArea dd{
display:none;
color:#969076;
position:absolute;
width:100%;
top:50%;
text-align: center;
}
#profileArea dt{
font-size:8em;
line-height: 1;
filter: blur(0.5px);
-webkit-filter: blur(0.5px);
}
#profileArea .txt01{
margin-top:10px;
font-size:3em;
letter-spacing:0.2em;
}
#profileArea .txt02{
font-size:2em;
vertical-align: middle;
}
#profileArea .txt03{
font-size:1.2em;
line-height: 2;
font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
}

/* width768 */
.lt-768 body{
min-width:768px;
}
.lt-768 #navArea{
height:120px;
top:50%;
margin-top:-45px;
}
.lt-768 #layer01{
height:30px;
top:50%;
-webkit-transition: all .1s linear;
margin-top:-15px;
background:#969076;
z-index:1;
}
.lt-768 #navArea nav{
margin-left:-135px;
width:362px;
height:90px;
}
.lt-768 #navArea nav ul{
width:362px;
height:90px;
zoom:1;
}
.lt-768 #navArea h1{
position: absolute;
width:150px;
height:16px;
top:50%;
left:30px;
background:url(../images/logo_home.png) no-repeat left top;
background-size:90%;
-webkit-transition: background-size .1s linear;
margin-top:-6px;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
}
.lt-768 #navArea nav li{
width:120px;
height:120px;
-webkit-transition: width .1s ease-out 0, height .1s ease-out 0;
}
.lt-768 #navArea nav li a{
width:120px;
height:120px;
font-size:12px;
}
.lt-768 #conts01{
position:absolute;
margin-top:111px;
left:30px;
width:590px;
z-index:2;
}
.lt-768 #profileArea dt{
font-size:4em;
line-height: 1;
}
.lt-768 #profileArea .txt01{
margin-top:10px;
font-size:2em;
}
.lt-768 #profileArea .txt02{
font-size:1.5em;
vertical-align: middle;
}
.lt-768 #profileArea .txt03{
font-size:1em;
line-height: 2;
font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
}

/* width640 */
.lt-640 body{
min-width:100%;
}

.lt-640 #navArea{
position: relative;
width:100%;
height:auto;
top:0;
margin-top:0;
}
.lt-640 #layer01{
position: relative;
width:100%;
height:40px;
top:0;
margin-top:0;
background:#969076;
z-index:1;
-webkit-transition: all .1s linear;
}
.lt-640 #navArea h1{
position: absolute;
width:120px;
top:50%;
left:10px;
background:url(../images/logo_home.png) no-repeat left top;
background-size:100%;
margin-top:-6px;
}
.lt-640 #navArea nav{
position:relative;
top:0;
left:0;
margin-left:0;
width:100%;
height:auto;
z-index:4;
}
.lt-640 #navArea nav ul{
width:100%;
height:auto;
zoom:1;
}
.lt-640 #navArea nav ul:after{
content: ""; 
display: block; 
clear: both;
}
.lt-640 #navArea nav li{
float:left;
width:100%;
height:40px;
text-align:center;
}
.lt-640 #btnProfile{
margin-right:0;
margin-bottom:1px;
}
.lt-640 #btnBlog{
margin-right:0;
margin-bottom:1px;
}
.lt-640 #navArea nav li a{
margin:0 auto;
position:relative;
background:url(../images/btn_bg.png) repeat left top;
display:block;
width:100%;
height:40px;
color:#969076;
text-align:center;
font-size:16px;
font-weight:bold;
line-height:1;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
text-decoration: none;
-webkit-transition: all .1s linear;
}
.lt-640 #conts01{
position:relative;
margin-top:0;
top:0;
left:0;
width:100%;
z-index:2;
}
.lt-640 #informationArea{
padding:20px 10px;
color:#fff;
border-bottom:#555 solid 1px;
}
.lt-640 #informationArea dt{
padding-right:1em;
width:40px;
font-weight: bold;
}
.lt-640 #informationArea dd{
width:auto;
color:#ccc;
}
.lt-640 #linkArea{
margin-top:0;
padding:20px 10px;
color:#fff;
border-bottom:#555 solid 1px;
}

.lt-640 #profileArea{
display:block;
width: 100%;
height:200px;
text-align: center;
color:#969076;
position:relative;
top:0;
font-family:"Economica";
}
.lt-640 #profileArea dt,
.lt-640 #profileArea dd{
color:#969076;
position:absolute;
padding:0 10px;
width:100%;
top:50%;
text-align: center;
}
.lt-640 #profileArea dt{
font-size:5em;
line-height: 1;
}
.lt-640 #profileArea .txt01{
margin-top:10px;
font-size:1.5em;
letter-spacing:0.2em;
}
.lt-640 #profileArea .txt02{
font-size:1.2em;
vertical-align: middle;
}
.lt-640 #profileArea .txt03{
font-size:1em;
line-height: 2;
font-family:"Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
text-align: left;
}