@charset "Shift_JIS";
/* CSS Document */




/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.8.0r4
*/
html{color:#000;background:#FFF;}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%;}




/*-----------------------------------------------------------------------------------*/


body {
background: #FFFFFF;
text-align: center;
margin: 0 auto;

font: 13px/1.231 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic","Osaka",sans-serif;
*font-size:small; /* for IE */
*font:x-small; /* for IE in quirks mode */

background: url(../common/img/back2.jpg) top repeat-x ;
background-color: #E2E3D5;
}

table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}

img { vertical-align: text-bottom; }

a { color: #000000; text-decoration:none; }
a:hover { color: #666666; text-decoration: underline; }

/*-----------------------------------------------------------------------------------*/




/*-----------------------------------------------------------------------------------*
　　　ヘッダー　　　　
*-----------------------------------------------------------------------------------*/


#header {
width: 800px;
margin: 0 auto;
text-align: left;
}

#header-left {
display: inline;
float: left;
}

h1 {
display: inline;
float: left;
width: 77px;
height: 71px;
background: url(../common/img/sekisui.jpg) no-repeat;
text-indent: -9999px;
}

h1 a{
display: inline;
float: left;
width: 77px;
height: 71px;
background: url(../common/img/sekisui.jpg) no-repeat;
text-indent: -9999px;
}

h2 {
display: inline;
float: left;
width: 319px;
height: 71px;
background: url(../common/img/t_hanshin_area.jpg) no-repeat left top;
text-indent: -9999px;
}

#header-right {
display: block;
float: right;
}

#navi07 {
display: inline;
float: left;
width: 101px;
height: 24px;
text-indent: -9999px;
}

#navi07 a{
display: inline;
float: left;
width: 101px;
height: 24px;
background: url(../common/img/navi07.gif) no-repeat left bottom;
text-indent: -9999px;
}

#navi07 a{
display: inline;
float: left;
width: 101px;
height: 24px;
background: url(../common/img/navi07.gif) no-repeat left bottom;
text-indent: -9999px;
}

#navi07 a:hover{
display: inline;
float: left;
width: 101px;
height: 24px;
background: url(../common/img/navi07.gif) no-repeat left bottom;
text-indent: -9999px;
filter: alpha(opacity=50);
opacity: 0.5;
}

#navi08 {
display: inline;
float: left;
width: 101px;
height: 24px;
text-indent: -9999px;
}

#navi08 a{
display: inline;
float: left;
width: 101px;
height: 24px;
background: url(../common/img/navi08.gif) no-repeat left bottom;
text-indent: -9999px;
}

#navi08 a:hover{
display: inline;
float: left;
width: 101px;
height: 24px;
background: url(../common/img/navi08.gif) no-repeat left bottom;
text-indent: -9999px;
filter: alpha(opacity=50);
opacity: 0.5;
}

#navi09 {
display: inline;
float: left;
width: 50px;
height: 24px;
text-indent: -9999px;
}

#navi09 a{
display: inline;
float: left;
width: 50px;
height: 24px;
background: url(../common/img/navi09.gif) no-repeat left bottom;
text-indent: -9999px;
}

#navi09 a:hover{
display: inline;
float: left;
width: 50px;
height: 24px;
background: url(../common/img/navi09.gif) no-repeat left bottom;
text-indent: -9999px;
filter: alpha(opacity=50);
opacity: 0.5;
}

#navi10 {
display: inline;
float: left;
width: 139px;
height: 24px;
text-indent: -9999px;
}

#navi10 a{
display: inline;
float: left;
width: 139px;
height: 24px;
background: url(../common/img/navi10.gif) no-repeat left bottom;
text-indent: -9999px;
}

#navi10 a:hover{
display: inline;
float: left;
width: 139px;
height: 24px;
background: url(../common/img/navi10.gif) no-repeat left bottom;
text-indent: -9999px;
filter: alpha(opacity=50);
opacity: 0.5;
}

#header1 {
display: block;
height: 24px;
width: 404px;
}

#header2 {
display: block;
clear: both;
height: 35px;
padding-top: 12px;
width: 404px;
}



#navi11 {
display: inline;
float: left;
width: 92px;
height: 35px;
text-indent: -9999px;
}

#navi11 a{
display: inline;
float: left;
width: 92px;
height: 35px;
background: url(../common/img/navi11.gif) no-repeat left bottom;
text-indent: -9999px;
}

#navi11 a:hover{
display: inline;
float: left;
width: 92px;
height: 35px;
background: url(../common/img/navi11.gif) no-repeat left bottom;
text-indent: -9999px;
filter: alpha(opacity=50);
opacity: 0.5;
}

#navi12 {
display: inline;
float: left;
width: 123px;
height: 35px;
text-indent: -9999px;
}

#navi12 a{
display: inline;
float: left;
width: 123px;
height: 35px;
background: url(../common/img/navi12.gif) no-repeat left bottom;
text-indent: -9999px;
}

#navi12 a:hover{
display: inline;
float: left;
width: 123px;
height: 35px;
background: url(../common/img/navi12.gif) no-repeat left bottom;
text-indent: -9999px;
filter: alpha(opacity=50);
opacity: 0.5;
}

#navi13 {
display: inline;
float: left;
width: 101px;
height: 35px;
text-indent: -9999px;
}

#navi13 a{
display: inline;
float: left;
width: 101px;
height: 35px;
background: url(../common/img/navi13.gif) no-repeat left bottom;
text-indent: -9999px;
}

#navi13 a:hover{
display: inline;
float: left;
width: 101px;
height: 35px;
background: url(../common/img/navi13.gif) no-repeat left bottom;
text-indent: -9999px;
filter: alpha(opacity=50);
opacity: 0.5;
}

#navi14 {
display: inline;
float: left;
width: 88px;
height: 35px;
text-indent: -9999px;
}

#navi14 a{
display: inline;
float: left;
width: 88px;
height: 35px;
background: url(../common/img/navi14.gif) no-repeat left bottom;
text-indent: -9999px;
}

#navi14 a:hover{
display: inline;
float: left;
width: 88px;
height: 35px;
background: url(../common/img/navi14.gif) no-repeat left bottom;
text-indent: -9999px;
filter: alpha(opacity=50);
opacity: 0.5;
}




/*-----------------------------------------------------------------------------------*
　　　ナビゲーション　
*-----------------------------------------------------------------------------------*/

#navi {
clear: both;
width: 800px;
margin: 0 auto;
text-align: left;
}

#navi01 {
display: inline;
float: left;
width: 61px;
height: 45px;
background: url(../common/img/navi01.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi01 a{
display: inline;
float: left;
width: 61px;
height: 45px;
background: url(../common/img/navi01.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi01 a:hover{
display: inline;
float: left;
width: 61px;
height: 45px;
background: url(../common/img/navi01_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}


#navi02 {
display: inline;
float: left;
width: 131px;
height: 45px;
background: url(../common/img/navi02.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi02 a{
display: inline;
float: left;
width: 131px;
height: 45px;
background: url(../common/img/navi02.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi02 a:hover{
display: inline;
float: left;
width: 131px;
height: 45px;
background: url(../common/img/navi02_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi03 {
display: inline;
float: left;
width: 150px;
height: 45px;
background: url(../common/img/navi03.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi03 a{
display: inline;
float: left;
width: 150px;
height: 45px;
background: url(../common/img/navi03.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi03 a:hover{
display: inline;
float: left;
width: 150px;
height: 45px;
background: url(../common/img/navi03_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi04 {
display: inline;
float: left;
width: 86px;
height: 45px;
background: url(../common/img/navi04.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi04 a{
display: inline;
float: left;
width: 86px;
height: 45px;
background: url(../common/img/navi04.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi04 a:hover{
display: inline;
float: left;
width: 86px;
height: 45px;
background: url(../common/img/navi04_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi05 {
display: inline;
float: left;
width: 112px;
height: 45px;
background: url(../common/img/navi05.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi05 a{
display: inline;
float: left;
width: 112px;
height: 45px;
background: url(../common/img/navi05.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi05 a:hover{
display: inline;
float: left;
width: 112px;
height: 45px;
background: url(../common/img/navi05_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi15 {
display: inline;
float: left;
width: 145px;
height: 45px;
background: url(../common/img/navi15.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi15 a{
display: inline;
float: left;
width: 145px;
height: 45px;
background: url(../common/img/navi15.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi15 a:hover{
display: inline;
float: left;
width: 145px;
height: 45px;
background: url(../common/img/navi15_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi06 {
display: inline;
float: left;
width: 115px;
height: 45px;
background: url(../common/img/navi06.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi06 a{
display: inline;
float: left;
width: 115px;
height: 45px;
background: url(../common/img/navi06.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi06 a:hover{
display: inline;
float: left;
width: 115px;
height: 45px;
background: url(../common/img/navi06_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}


/*---------------------ナビ　カレント表示------------------------------------------------------*/

#navi01_on {
display: inline;
float: left;
width: 61px;
height: 45px;
text-indent: -9999px;
}

#navi01_on a{
display: inline;
float: left;
width: 61px;
height: 45px;
background: url(../common/img/navi01_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi01_on a:hover{
display: inline;
float: left;
width: 61px;
height: 45px;
background: url(../common/img/navi01_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}


#navi02_on {
display: inline;
float: left;
width: 131px;
height: 45px;
text-indent: -9999px;
}

#navi02_on a{
display: inline;
float: left;
width: 131px;
height: 45px;
background: url(../common/img/navi02_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi02_on a:hover{
display: inline;
float: left;
width: 131px;
height: 45px;
background: url(../common/img/navi02_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi03_on {
display: inline;
float: left;
width: 150px;
height: 45px;
text-indent: -9999px;
}

#navi03_on a{
display: inline;
float: left;
width: 150px;
height: 45px;
background: url(../common/img/navi03_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi03_on a:hover{
display: inline;
float: left;
width: 150px;
height: 45px;
background: url(../common/img/navi03_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi04_on {
display: inline;
float: left;
width: 86px;
height: 45px;
background: url(../common/img/navi04_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi04_on a{
display: inline;
float: left;
width: 86px;
height: 45px;
background: url(../common/img/navi04_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}

#navi04_on a:hover{
display: inline;
float: left;
width: 86px;
height: 45px;
background: url(../common/img/navi04_2.jpg) no-repeat left bottom;
text-indent: -9999px;
}


/*-----------------------------------------------------------------------------------*
　　　リンクエリア	
*-----------------------------------------------------------------------------------*/

#link {
clear: both;
display: block;
margin: 0 auto;
padding: 0 0 30px 0;
width: 800px;
text-align: center;
font-size:11px;
line-height: 1.4;
}

/*-----------------------------------------------------------------------------------*
　　　ページトップ
*-----------------------------------------------------------------------------------*/

#pagetop {
clear: both;
display: block;
width: 800px;
padding: 10px 0 5px 0;
text-align: right;
border-top: solid #A29781 1px;
}


/*-----------------------------------------------------------------------------------*
　　　フッターエリア	
*-----------------------------------------------------------------------------------*/

#company_area {
clear: both;
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
border-top: #330000 solid 5px;
background-color:#FFFFFF;

}

#company {
clear: both;
display: block;
margin: 0 auto;
width: 800px;
text-align: left;
}

#company p{
font-size: 11px;
padding: 20px 0 10px 0;
}

#company .tel{
font-size: 12px;
}

#company h4{
display: inline;
float: left;
width: 240px;
height: 21px;
background: url(../common/img/sekisui_hanshin.gif) no-repeat left bottom;
text-indent: -9999px;
}

#company dl{
padding: 0 0 20px 0;
}

#company dt{
display: inline;
float: left;
width: 240px;
height: 21px;
background: url(../common/img/sekisui_hanshin.gif) no-repeat left bottom;
text-indent: -9999px;
}


#company dd{
font-size: 10px;
line-height: 1.3;
}

#footer_area {
clear: both;
display: block;
margin: 0 auto;
width: 100%;
text-align: center;
border-top: #CCCCCC solid 1px;
background-color:#FFFFFF;
}

#footer {
clear: both;
display: block;
margin: 0 auto;
width: 800px;
text-align: left;
height: 30px;
}


#copyright  {
float: left;
padding: 5px 0 0 0;
}

#copyright a:hover img{
filter: alpha(opacity=70);
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

#privacy  {
float: right;
padding: 5px 0 0 0;
}

#privacy a:hover img{
filter: alpha(opacity=70);
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}



/*-----------------------------------------------------------------------------------*
　　　スタッフ紹介　プロフィール
*-----------------------------------------------------------------------------------*/


#containts {
clear: both;
display: block;
width: 800px;
margin: 0 auto;

}

#title {
clear: both;
display: block;
width: 800px;
padding: 40px 0 30px 0; 
}

#side-navi {
width: 201px;
display: block;
float: left;
margin: 0;
padding: 0;
}

#side-navi li{
margin: 0;
padding: 0;
height: 36px;
}


#side-navi a:hover img{
filter: alpha(opacity=70);
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

#staff-introduce-title {
display: block;
padding: 0 0 25px 0; 
}

#staff-introduce {
width: 575px;
display: block;
float: right;
text-align: left;
}


#profile-area {
width: 210px;
display: block;
float: left;
margin: 0 0 0 5px;
text-align: left;
}

#name {
width: 210px;
display: block;
margin: 10px 0 0 0; 
padding: 0 0 20px 0; 
}

#profile {
width: 210px;
display: block;
margin: 0 0 30px 0; 
}

#profile-link-area {
width: 210px;
float: left;
text-align: left;
padding: 0 0 30px 0; 
}


.link-arrow {
display: block;
font-size: 12px;
margin: 0 0 0 0; 
padding: 0 0 7px 17px; 
background: url(../common/img/b_arrow.gif) no-repeat;
}

.link-arrow a{
font-size: 12px;
text-decoration: none;
}

.link-arrow a:hover{
font-size: 12px;
text-decoration: underline;
color:#990000;
}

.link-button{
display: block;
margin: 0 0 0 0; 
padding: 0 0 15px 0; 
}


#movie-area {
width: 350px;
display: block;
float: right;
padding: 0 0 30px 0;
}

/*-----------------------------------------------------------------------------------*
　　　スタッフ紹介　理念
*-----------------------------------------------------------------------------------*/

#staff-concept-area {
clear: both;
display: block;
height: auto;
border-top: solid #A29781 1px;
}

.staff-concept{
clear: both;
display: block;
width: 530px;
padding: 30px 0 0 25px;

}

.staff-concept-photo{
float: left;
display: block;
width: 120px;
padding: 0;
}

.staff-concept dl{
float: right;
display: block;
width: 390px;
}

.staff-concept-title{
display: block;
padding: 5px 0 10px 0;
}

.staff-concept-copy{
display: block;
line-height: 1.7;
padding: 0;
}


.staff-concept-cop-mark{
font-size:10px;
padding: 0;
}

.staff-concept-cop{
display: block;
font-size:10px;
line-height: 1.4;
padding: 0;
}

.staff-concept-cop a{
font-size: 10px;
text-decoration: underline;
}

.staff-concept-cop a:hover{
font-size: 10px;
text-decoration: underline;
color:#990000;
}

#staff-concept-link-area {
float: right;
display: block;
width: 400px;
padding: 30px 0 50px 0;
}




.back-plan {
background:url(../staff/designer03/img/bg_plan.jpg) top  left no-repeat;
background-position: 0px 700px; 
}