@charset "UTF-8";

/* =================================================================================================

   ホノルル株式会社 - 基本レイアウトのCSS

================================================================================================= */


/* 別のCSSをインポート */
@import url("reset.css"); /* タグの初期値をリセット */
@import url("thickbox.css"); /* thickbox設定を読み込み */


/* =======================================================================
   基本レイアウト
======================================================================= */

body{
	margin:0;
	padding:0px;
	background: transparent url("../images/bg.gif");
	font-family: "ＭＳ Ｐゴシック","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", sans-serif;
    word-break: break-all;
}

/* 大外 */
#wrapper{
	width:1000px;
	margin:0 auto 50px auto;
	padding-top:40px;
}

/* ヘッダ */
#head{
	margin-bottom:30px;
}

/* ロゴ */
#head h1{
	width:258px;
	height:58px;
	text-indent:-9999px;
	background: transparent url("../images/head_rogo.gif") no-repeat;
}

/* 本体 */
#contents{
	width:1000px;
	margin-bottom:20px;
}

/* 本体(動画用） */
#contentsm{
	width:1000px;
	text-align:center;
	margin:100px 0;
}

/* IE6用 */
* html #contents{

}


/* WORKS・BLOG　大外 */
#works,
#blog{
	width:320px;
	background-color:#fff;
	float:left;
	margin-right:20px;
}


/* 単独ページ枠 */


#stage{
	width:1000px;
	background-color:#fff;
	margin:0 auto 50px auto;
	padding-top:40px;
	padding-bottom:30px;
}

#stage h2{
margin-left:50px;
}

#stage p{
	text-align:center;
	padding:35px;
}

#stage .wanted{
	margin-left:-65px;
}

#stage table{
	margin-left:345px;
	padding-top:20px;
}

#stage tr{
	line-height:2;
	vertical-align:top;
}

#stage td{
	font-size:90%;
	padding-right:5px;
}

span.n2{
	letter-spacing:5em;
}

span.n3{
	letter-spacing:2em;
}

span.n4{
	letter-spacing:1em;
}



#workscont,
#blogcont{
   margin:0px;
   clear:both;
}

/* ABOUT US　大外 */
#aboutus{
	width:320px;
	background-color:#fff;
	float:left;
	outline:0;
}


/* WORKS　中身 */
#works .inner{
	padding:0 0 15px 0;
}


/* BLOG　中身 */
#blog .inner{
	overflow:hidden;
	padding:0 0 15px 0;
}

/* ABOUT US　中身 */
#aboutus .inner{
	padding:23px 15px 15px;
}

/* コピーライト */
#copyright address{
	width:320px;
	height:16px;
	text-indent:-9999px;
	float:right;
	font-size:0;
	text-decoration:none;
	line-height:0%;
	background: transparent url("../images/copyright.gif") no-repeat;
}

/*ページトップへ*/

#pagetop{
width:56px;
height:24px;
position:fixed;
bottom:0px;
right:0px;
}


/* ----------------------------------------------------
   テキストサイズ
---------------------------------------------------- */

body{
	color:#707070;
	font-size:11px;
}

p{
	line-height:180%;
}


/* ----------------------------------------------------
   テキストリンク
---------------------------------------------------- */

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


/* ----------------------------------------------------
   WORKS・BLOG／写真のサイズ
---------------------------------------------------- */

.photo{
	margin-bottom:5px;
}

/* 写真の自動リサイズ */
#works .photo img,
#blog .photo img{
	max-width: 290px;
	-ms-interpolation-mode: bicubic;
}

/* ロールオーバー */
#works .photo a:hover img,
#blog .photo a:hover img {
	opacity:0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
}



/* =======================================================================
   WORKS
======================================================================= */

/* タイトル */
#works h2{
	width:72px;
	height:23px;
    margin:23px 0 30px 15px;
	text-indent:-9999px;
	float:left;
}

#works h2 a{
	width:72px;
	height:23px;
	background-image:url("../images/works_title.gif");
    display:block;
}

#works h2 a:hover{
	width:72px;
	height:23px;
	background-image:url("../images/works_title_over.gif");
    display:block;
}

/* メニュータブ */
#works .tab_box{
	width:305px;
	margin-bottom:10px;
	overflow:hidden;
}

#works .tab_box .tab{
	margin-top:28px;
	width:182px;
	float:right;
	overflow:hidden;
}

#works .tab_box .tab li{
	text-indent:-9999px;
	margin-bottom:9px;
}

#works .tab_box .tab a{
	display:block;
	outline:0;
}

#works .tab #list_web{
	float:left;
}
#works .tab #list_default{
	float:left;
}
#works .tab #list_brand{
	float:left;
}
#works .tab #list_campain{
	float:left;
}
#works .tab #list_packaging{
	float:left;
}
#works .tab #list_cl{
	float:left;
}

/* WEB */
#works .tab #list_web a{
	width:40px;
	height:9px;
	padding-right:8px;
	background: transparent url("../images/works_btn_web.gif") no-repeat;
	display:block;
}
#works .tab #list_web a:hover,
#works .tab #list_web.active a{
	background: transparent url("../images/works_btn_web_on.gif") no-repeat;
}

/* BRAND CAMPAIN */

#works .tab #list_brand a{
	width:134px;
	height:9px;
	background: transparent url("../images/works_btn_brand.gif") no-repeat;
	display:block;
}
#works .tab #list_brand a:hover,
#works .tab #list_brand.active a{
	background: transparent url("../images/works_btn_brand_on.gif") no-repeat;
}

/* CAMPAIN */
#works .tab #list_campain a{
	width:84px;
	height:9px;
	padding-right:9px;
	background: transparent url("../images/works_btn_campain.gif") no-repeat;
	display:block;
}
#works .tab #list_campain a:hover,
#works .tab #list_campain.active a{
	background: transparent url("../images/works_btn_campain_on.gif") no-repeat;
}


/* PACKAGING */
#works .tab #list_packaging a{
	width:89px;
	height:9px;
	background: transparent url("../images/works_btn_packaging.gif") no-repeat;
	display:block;
}
#works .tab #list_packaging a:hover,
#works .tab #list_packaging.active a{
	background: transparent url("../images/works_btn_packaging_on.gif") no-repeat;
}

/* CL Manual 
#works .tab #list_cl a{
	width:82px;
	height:14px;
	background: transparent url("../images/works_btn_cl.gif") no-repeat;
	display:block;
}
#works .tab #list_cl a:hover,
#works .tab #list_cl.active a{
	background: transparent url("../images/works_btn_cl_on.gif") no-repeat;
}
*/

/* 各ステージ */
#works .stage{
    width:290px;
    margin:0 auto;
}

/* コメント用 */
#works .comment{
    width:290px;
    margin:0 auto;
}

/* 見出し */
#works .title {
	font-size:13px;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", sans-serif;
	color:#4e4e4e;
}

#works .other {
	display:none;
}

/* 1件分毎の下アキ */
#works .stage li{
	margin-bottom:30px;
}

/* XMLが読み込まれなかった場合の代替 */
#works #off p{
	padding-left: 1em; /*1em（1文字）分、右に動かす*/
	text-indent: -1em; /*最初の行だけ1em（1文字）分、左に動かす*/
}


/* =======================================================================
   BLOG
======================================================================= */

/* タイトル */
#blog h2{
	width:49px;
	height:23px;
	text-indent:-9999px;
	margin:23px 0 41px 15px;
}

#blog h2 a{
	width:49px;
	height:23px;
	background-image:url("../images/blog_title.gif");
	display:block;
}

#blog h2 a:hover{
	width:49px;
	height:23px;
	background-image:url("../images/blog_title_over.gif");
}

/* 見出し */
#blog .title {
	font-size:13px;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", sans-serif;
	color:#4e4e4e;
	line-height:normal;
	margin:10px 0 5px 0;
}

/* 記事投稿時間 */
#blog .time{
	float:left;
	margin-bottom:40px;
	line-height:120%;
	color:#504340;
	letter-spacing:1px;
}

/* 詳しく見るリンク */
#blog .link {
	float:right;
	margin-bottom:40px;
}
#blog .link a {
	background: transparent url("../images/blog_link.gif") no-repeat left center;
	line-height:120%;
	padding:0 0 0 10px;
}

/* 説明文の下アキ */
#blog .blog_list .copy {
	margin-bottom:5px;
}

/* 記事ひとつ */
#blog .blog_list{
	width:290px;
    margin:0 auto;
	overflow:hidden;
	
}


/* =======================================================================
   ABOUT US
======================================================================= */

/* タイトル */
#aboutus h2{
	width:95px;
	height:23px;
	text-indent:-9999px;
	background: transparent url("../images/aboutus_title.gif") no-repeat;
	margin-bottom:41px;
}

/* 1件分毎 */
#aboutus .box {
	margin:0 auto;
	border-bottom:1px dotted #757575;
	margin-bottom:30px;
	padding-bottom:12px;
	width:290px;
	overflow:hidden;
}

/* 見出し */
#aboutus .title {
	font-size:15px;
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", sans-serif;
	color:#4e4e4e;
	margin-bottom:5px;
	letter-spacing:1px;
}

/* 説明文の下アキ */
#aboutus .copy {
	margin-bottom:5px;
}



/* ----------------------------------------------------
   movie
---------------------------------------------------- */

#aboutus .movie{
	padding-bottom:0px;
}

#aboutus .movie .includemovie{
	margin-bottom:15px;
}

#aboutus .movie .movietit{
	padding:5px 0;
}



/* ----------------------------------------------------
   c apri
---------------------------------------------------- */

#aboutus .apri_list li{
	width:42px;
	float:left;
	margin-right:7px;
}

#aboutus .apri_list li.lastItem{
	margin-right:0;
}

#aboutus .apri_list li img{
	vertical-align:bottom;
}

#aboutus img.apri{
	padding-top:15px;
}


/* ----------------------------------------------------
   twitter
---------------------------------------------------- */

#aboutus .twitter img.icon{
	width:48px;
	height:48px;
	float:left;
	padding-right:10px;
}

#aboutus .twitter p.copy{
    padding-top:2px;
	width:232px;
	line-height:14px;
	letter-spacing:1px;
	float:right;
}

#aboutus .twitter .include{
    padding-top:15px;
    clear:both;
	font-size:11px;
}

/* Twitter Widget */
#twitter_div {
text-align : left;
}

#twitter_div ul {
width : 290px;
}

#twitter_div li {
padding-bottom:10px;
margin-bottom:10px; 
border-bottom : solid 1px #efefef; 
line-height:13px;
}

#twitter_div li a {
color : #35c8fe;
font-size:12px;
}

#twitter_div li a:hover {
color : #35c8fe;
font-size:12px;
}

a#twitter-link {
color : #35c8fe;
text-align : right;
display : block;
text-decoration:underline;
font-size:12px;
}

a#twitter-link:hover {
color : #35c8fe;
text-decoration:none;
font-size:12px;
}


/* ----------------------------------------------------
   profile
---------------------------------------------------- */

#aboutus .profile table {
	table-layout:fixed;
	border-collapse:collapse;
	letter-spacing:1px;
}

#aboutus .profile table em{
    font-weight:bold;
	background-color:#FFFF00;
	padding:2px;
	font-weight:100;
	color:#707070;
}

#aboutus .profile table em a{
    text-decoration:none;
	color:#707070;
}

#aboutus .profile table th {
	padding-top:5px;
	vertical-align:top;
	width:70px;
}

#aboutus .profile table td {
	padding-top:5px;
	vertical-align:top;
	text-align:left;
}


/* ----------------------------------------------------
   philosophy
---------------------------------------------------- */

#aboutus .philosophy{
	padding-bottom:5px;
}

/* ----------------------------------------------------
   special
---------------------------------------------------- */

#aboutus .special{
	padding-bottom:15px;
    line-height:180%;
}

/* ----------------------------------------------------
   mission
---------------------------------------------------- */

#aboutus .mission{
	padding-bottom:5px;
}


/* ----------------------------------------------------
   service
---------------------------------------------------- */

#aboutus .service{
	padding-bottom:5px;
	font-size:11px;
}

#aboutus .service p.copy{
	line-height:180%;
	padding-bottom:10px;
}

#aboutus .service p.mail{
	letter-spacing:1px;
	padding-bottom:10px;
}

#aboutus .service p.mail em{
	background-color:#FFFF00;
	padding:2px;
	font-weight:100;
	color:#707070;
}

#aboutus .service p.mail em a{
    text-decoration:none;
	color:#707070;
}

#aboutus .service{
	padding-bottom:5px;
	font-size:11px;
}

#aboutus .subtitle {
	font-size:12px;
	margin-bottom:5px;
	letter-spacing:1px;
	color:#4e4e4e;
}

#aboutus .subtitle02 {
	font-size:12px;
	margin-top:5px;
	margin-bottom:5px;
	letter-spacing:1px;
	color:#4e4e4e;
}

#aboutus .contact {
	font-size:11px;
	padding-left:3px;
	border-left:solid 3px #4e4e4e;
	line-height:10px;
	margin-top:5px;
	margin-bottom:5px;
	letter-spacing:1px;
	color:#4e4e4e;
}



/* ----------------------------------------------------
   award
---------------------------------------------------- */

#aboutus .award{
	padding-bottom:7px;
}

#aboutus .award .title {
	width:70px;
	cursor:pointer;
	margin-bottom:10px;
}

#aboutus .award .title a {
	outline:0;
	display:block;
}

#aboutus #award_stage {
	padding-top:0px;
}

#aboutus .award dl dt {
	font-weight:bold;
}

#aboutus .award dl dd {
	line-height:180%;
	margin-bottom:5px;
}

/* 開く閉じる */
#aboutus #btn_award,
#aboutus #btn_award{
	line-height:120%;
	padding:0 18px 0 0;
	cursor:pointer;
	color:#4e4e4e;
}

#aboutus #btn_award.close {
	background: transparent url("../images/aboutus_award_close.gif") no-repeat right center;
}

/* IE6ハック */
* html #aboutus .award .title {
	width:50px;}
* html #aboutus .award .title a {
	width:50px;}



/* ----------------------------------------------------
   wallpaper
---------------------------------------------------- */

#aboutus .wallpaper{
	margin-bottom:30px;
}

#aboutus .wallpaper ul.wall_list{
	padding-left:2px;
	padding-bottom:2px;
}

#aboutus .wallpaper .wall_list li{
	float:left;
	padding-right:2px;
}

#aboutus .wallpaper .wall_list li.lastItem{
	padding-right:0;
}

#aboutus .wallpaper .wall_list li img{
	vertical-align:bottom;
}

/* ロールオーバー */
#aboutus .wallpaper .wall_list li a:hover img{
	opacity:0.8;
	filter: alpha(opacity=80);
	-moz-opacity: 0.8;
}

/* ----------------------------------------------------
   friends
---------------------------------------------------- */

#aboutus .friends{
	border-bottom:none;
	margin-bottom:30px;
	padding-bottom:0px;
}

#aboutus .friends table {
	table-layout:fixed;
	border-collapse:collapse;
	letter-spacing:1px;
}

#aboutus .friends table em{
    font-weight:bold;
}

#aboutus .friends table th {
	padding-top:5px;
	vertical-align:top;
	width:70px;
}

#aboutus .friends table td {
	padding-top:5px;
	vertical-align:top;
	text-align:left;
}


/* =======================================================================
   汎用モジュール
======================================================================= */

/* float解除 */
.clearfix {
	display: inline-block;
}

/* Exclude Mac IE \*/
.clearfix {
	display: block;
}
/**/

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}