@charset "utf-8";

/* ----------------------------------------------------------------
 *    01. Utility
 *    02. Template
 *    03. Modules
 *    04. Unique
----------------------------------------------------------------- */

/* ----------------------------------------------------------------
 01. Utility
----------------------------------------------------------------- */

/**
 * Reset
 */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
/* RESET HTML5 */
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}

/**
 * Clear fix
 */

.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.clearfix:after { clear: both }

/* ----------------------------------------------------------------
 02. Template
----------------------------------------------------------------- */

body {
line-height: 1.6;
word-wrap: break-word;
text-align: center;
background: #ffffff;
}
body, table, input, textarea, select, option {
color: #000000;
font-family: Quicksand, 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
font-size: 13px;
}
#container {
width: 900px;
margin: 0 auto;
padding: 0 30px;
text-align: left;
}

/* header */
header {
margin-top: 20px;
}
header #globalNavi {
margin-top: 60px;
}
header #globalNavi li {
overflow: hidden;
float: left;
margin-right: 45px;
white-space: nowrap;
text-indent: 100%;
}
header #globalNavi li a {
display:block;
height: 23px;
background: url(../img/nav_sprite.png) no-repeat 0 0;
}
header #globalNavi li.top a { width:24px; background-position: -5px -5px; }
header #globalNavi li.portfolio a { width:61px; background-position: -34px -5px; }
header #globalNavi li.work a { width:32px; background-position: -100px -5px; }
header #globalNavi li.profile a { width:44px; background-position: -137px -5px; }
header #globalNavi li.contact a { width:55px; background-position: -186px -5px; }
header #globalNavi li.top a:hover { background-position: -5px -33px }
header #globalNavi li.portfolio a:hover { background-position: -34px -33px }
header #globalNavi li.work a:hover { background-position: -100px -33px }
header #globalNavi li.profile a:hover { background-position: -137px -33px }
header #globalNavi li.contact a:hover { background-position: -186px -33px }
header #globalNavi li.top.cu a { background-position: -5px -60px }
header #globalNavi li.portfolio.cu a { background-position: -34px -60px }
header #globalNavi li.work.cu a { background-position: -100px -60px }
header #globalNavi li.profile.cu a { background-position: -137px -60px }
header #globalNavi li.contact.cu a { background-position: -186px -60px }

/* main */
#main {
margin: 30px auto 100px;
}

/* ----------------------------------------------------------------
 03. Modules
----------------------------------------------------------------- */

/* hX */
section h1 {
overflow: hidden;
height: 0;
white-space: nowrap;
text-indent: 101%;
}

/* margin */
.mt10 { margin-top: 10px !important }
.mt20 { margin-top: 20px !important }
.mt30 { margin-top: 30px !important }
.mt40 { margin-top: 40px !important }
.mt50 { margin-top: 50px !important }
.mt60 { margin-top: 60px !important }
.mt70 { margin-top: 70px !important }
.mt80 { margin-top: 80px !important }
.mt90 { margin-top: 90px !important }
.mt100 { margin-top: 100px !important }

/* pagetop */
#pagetop {
display: none;
position: fixed;
bottom: 0;
right: 20px;
}
#pagetop img {
display: block;
}

/* ----------------------------------------------------------------
 04. Unique
----------------------------------------------------------------- */
/***** TOP *****/
#top {
display: none;
}
#top #main {
text-align: center;
}

/***** PORTFOLIO / WORK *****/
#portfolio #main,
#work #main {
display: none;
margin-top: 45px;
}
#portfolio ul,
#work ul {
text-align: center;
}
#portfolio ul li,
#work ul li {
list-style: none;
display: inline-block;
margin: 0 5px 10px 5px;
padding: 0;
vertical-align: middle;
}
#portfolio ul li a:hover,
#work ul li a:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
#portfolio ul li img,
#work ul li img {
max-width: 120px;
max-height: 120px;
}

/* modal */
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
opacity: 0.9;
z-index: 10;
}
#modalLoading {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -20px 0 0 -20px;
z-index: 100;
}
#modalBox {
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#imgName {
cursor: pointer;
border: 1px solid #000000;
}
#modalClose, #modalPrev, #modalNext {
position: absolute;
overflow: hidden;
white-space: nowrap;
text-indent: 100%;
cursor: pointer;
}
#modalClose {
top: -35px;
right: 0;
width: 25px;
height: 25px;
background: url(../img/modal/close.png) no-repeat 0 0;
}
#modalPrev {
top: 50%;
left: -60px;
width: 28px;
height: 55px;
margin-top: -25px;
padding-right: 32px;
text-indent: -150%;
background: url(../img/modal/arw_left.png) no-repeat 0 0;
}
#modalNext {
top: 50%;
right: -60px;
width: 28px;
height: 55px;
margin-top: -25px;
padding-left: 32px;
background: url(../img/modal/arw_right.png) no-repeat 100% 0;
}

/***** PROFILE *****/
#profile #main {
display: none;
padding: 40px 5px 0;
}
#profile h1 {
width: 298px;
height: 24px;
margin-bottom: 25px;
background: url(../img/txt_profile.png) no-repeat 0 0;
}
#profile #main p {
line-height: 2.5;
}
#profile #main dl {
margin-top: 35px;
}
#profile #main dt {
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
margin-bottom: 10px;
}
#profile #main dt.advertisement {
width: 124px;
height: 13px;
background: url(../img/txt_advertisement.png) no-repeat 0 0;
}
#profile #main dt.magazine {
width: 86px;
height: 18px;
background: url(../img/txt_magazine.png) no-repeat 0 0;
}
#profile #main dt.tv {
width: 34px;
height: 13px;
background: url(../img/txt_tv.png) no-repeat 0 0;
}
#profile #main dt.artist {
width: 108px;
height: 13px;
background: url(../img/txt_artist.png) no-repeat 0 0;
}
#profile #main dd {
margin-bottom: 25px;
}

/***** CONTACT *****/
#contact #main {
display: none;
padding: 60px 5px 0;
}
#contact #main p {
overflow: hidden;
width: 260px;
height: 20px;
text-indent: 100%;
white-space: nowrap;
background: url(../img/txt_contact.png) no-repeat 0 0;
}
#contact #main p a {
display: block;
}