@charset "utf-8";

/* ::::::::::::::::::::::::::::::::::::::::::::::
    home.css
-------------------------------------------------
    ルート直下のHTML
:::::::::::::::::::::::::::::::::::::::::::::: */

@import'/css/common/base.css';
@import'/css/common/layout.css';
@import'/css/common/module.css';

/* ==============================================
   スメリスト一覧
============================================== */

/* 検索結果一覧
-----------------------------------------------*/
ul.searchResultSmellist {
    overflow: hidden;
    width: 620px;
    margin-bottom: 5px;
}
ul.searchResultSmellist li {
    float: left;
    width: 150px;
    margin-right: 5px;
    background: #fbe6f4 url(/img/home/bg_box_smellist_t.gif) no-repeat;
}
ul.searchResultSmellist li dl {
    padding: 10px 10px 0;
    text-align: center; /* forIE6 */
}
ul.searchResultSmellist li dl dt {
    margin-bottom: 10px;
    padding-left: 16px;
    text-align: left;
    word-wrap: break-word; /* forIE6 */
}
ul.searchResultSmellist li dl dt img.icn {
    margin-left: -19px;
}
ul.searchResultSmellist li dl dd.img {
    height: 104px;
    margin: 0 auto 5px;
    text-align: center;
}
ul.searchResultSmellist li dl dd.img img {
	border: 2px solid #FFFFFF;
    vertical-align: bottom;
}
ul.searchResultSmellist li dl dd.txt img {
    margin-right: 5px;
    vertical-align: middle;
}
ul.searchResultSmellist li dl dd.txt a {
    vertical-align: middle;
}
ul.searchResultSmellist li div.unitSmellistB {
    overflow: hidden;
    height: 10px;
    background: url(/img/home/bg_box_smellist_b.gif) no-repeat;
}

/* ==============================================
   スメリストトップ
============================================== */

/* プロフィール
-----------------------------------------------*/
div#smellistProfile {
    margin-bottom: 30px;
}
div#smellistProfile div.smellistProfileT {
    padding: 20px 20px 10px;
    background: #fbe6f4 url(/img/home/bg_box_smellist_profile_t.gif) no-repeat;
}
div#smellistProfile div.smellistProfileT h2 {
    margin: 0;
}
div#smellistProfile div.smellistProfileT h2 span.name {
    font-size: 108%;
    margin-right: 5px;
}
div#smellistProfile div.smellistProfileT h2 img {
    margin-right: 20px;
    vertical-align: middle;
}
div#smellistProfile div.smellistProfileT div.img {
    float: left;
    width: 120px;
    margin-right: 20px;
}
div#smellistProfile div.smellistProfileT div.img img {
    border: 3px solid #FFFFFF;
}
div#smellistProfile div.smellistProfileT div.txt {
    float: left;
    width: 440px;
}
div#smellistProfile div.smellistProfileT div.txt h2 {
    margin: 0 0 10px;
}
div#smellistProfile div.smellistProfileT div.txt h2 img {
    vertical-align: middle;
    margin-right: 20px;
}
div#smellistProfile div.smellistProfileT div.txt h2 span.name {
    font-size: 108%;
    margin-right: 5px;
}
div#smellistProfile div.smellistProfileT div.txt p.profile {
	margin: 10px 0;
}
div#smellistProfile div.smellistProfileT div.txt table {
    width: 100%;
    border: none;
    border-collapse: collapse;
}
div#smellistProfile div.smellistProfileT div.txt table th {
    width: 50%;
    padding: 3px 10px;
    background: #F2CEE7;
    border: none;
    border-bottom: 3px solid #fbe6f4;
    text-align: left;
}
div#smellistProfile div.smellistProfileT div.txt table td {
    padding: 3px 10px;
    background: #FFFFFF;
    border: none;
    border-bottom: 3px solid #fbe6f4;
    text-align: right;
}
div#smellistProfile div.smellistProfileT div.txt p.arrowLink {
    margin-top: 10px;
    text-align: right;
}
div#smellistProfile div.smellistProfileB {
    overflow: hidden;
    height: 10px;
    background: url(/img/home/bg_box_smellist_profile_b.gif) no-repeat;
}

/* 最近登録したにおい
-----------------------------------------------*/
div#newRegistSmell {
    margin-bottom: 30px;
}
div#newRegistSmell h3 {
    margin: 30px 0 10px;
    padding: 10px;
    background: url(/img/home/bg_ttl_new_regist_smell.gif) no-repeat 0 50%;
    color: #FFFFFF;
    font-size: 108%;
    text-align: center;
}
div#newRegistSmell h3 span.name {
    margin-right: 5px;
}
div#newRegistSmell p.arrowLink {
    text-align: right;
}

/* コレクションしているにおい
-----------------------------------------------*/
div#collectionSmell {
    margin-bottom: 30px;
}
div#collectionSmell h3 {
    margin-bottom: 10px;
    padding: 10px;
    background: url(/img/home/bg_ttl_collection_smell.gif) no-repeat 0 50%;
    color: #00608E;
    font-size: 108%;
    text-align: center;
}
div#collectionSmell h3 span.name {
    margin-right: 5px;
}
div#collectionSmell p.arrowLink {
    text-align: right;
}

/* コレクションしているにおいの平均成分表 */
div#collectionChart {
    margin: 0 20px;
    width: 580px;
}
div#collectionChart div.chart {
    float: left;
    width: 235px;
    margin-right: 50px;
    text-align: center;
}
div#collectionChart div.chart h4 {
    margin-bottom: 10px;
}

/* においスポット */
div#collectionChart div.boxSpot {
    float: left;
    position: relative;
    width: 243px;
    height: 140px;
    margin-top: 50px;
    background: url(/img/home/bg_smell_spot.gif) no-repeat;
    line-height: 1;
    color: #057CAF;
    font-size: 85%;
    font-weight: bold;
}
div#collectionChart div.boxSpot dl dt {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
div#collectionChart div.boxSpot dl.spot dd {
    position: absolute;
    top: 7px;
    right: 10px;
}
div#collectionChart div.boxSpot dl.type dd {
    position: absolute;
}
div#collectionChart div.boxSpot dl.type dd.typeL {
    top: 67px;
    left: 50px;
}
div#collectionChart div.boxSpot dl.type dd.typeM {
    top: 67px;
    left: 170px;
}
div#collectionChart div.boxSpot dl.type dd.typeB {
    top: 123px;
    left: 50px;
}
div#collectionChart div.boxSpot dl.type dd.typeEX {
    top: 123px;
    left: 170px;
}

/* コレクション一覧 */
div#collectionList {
    position: relative;
    clear: both;
    width: 620px;
    padding-top: 30px;
}
div#collectionList p.arrowLink {
    position: absolute;
    top: 30px;
    right: 0;
}

/* タブ */
ul#tabCollection {
    overflow: hidden;
    height: 33px;
    background: url(/img/home/spr_tab_collection.gif) no-repeat;
}
ul#tabCollection li {
    float: left;
    margin-right: 1px;
    height: 33px;
}
ul#tabCollection li a {
    overflow: hidden;
    display: block;
    height: 33px;
    background: url(/img/home/spr_tab_collection.gif) no-repeat;
    text-indent: -9999px;
}
ul#tabCollection li.showList a {
    width: 81px;
    background-position: 0 0;
}
ul#tabCollection li.showMap a {
    width: 81px;
    background-position: -82px 0;
}
ul#tabCollection li.showList a:hover,
ul#tabCollection li.showList a.current {
    width: 81px;
    background-position: 0 -33px;
}
ul#tabCollection li.showMap a:hover,
ul#tabCollection li.showMap a.current {
    width: 81px;
    background-position: -82px -33px;
}

/* タブ切り替え */
div#tabCollectionContent {
    margin: 0 0 20px;
}
    
/* リスト表示 */
ul.collectionList li {
    padding: 5px 0;
}
ul.collectionList li.even {
    background: url(/img/common/bg_pager.gif) repeat-y 50% 0;
}
ul.collectionList li dl {
    height: 1%; /* forIE6 */
}
ul.collectionList li dl dt,
ul.collectionList li dl dd {
    display: inline;
    margin-right: 10px;
}
ul.collectionList li dl dt img.icn {
    margin-right: 10px;
}

/* 地図表示 */
div#tabCollectionContent div.showMap {
    margin-top: 20px;
}
div#tabCollectionContent div.wrapMap {
    width: 620px;
    height: 300px;
}
div#tabCollectionContent div.wrapMap div.map {
    width: 618px;
    height: 298px;
}

/* ==============================================
   プロフィール
============================================== */

/* プロフィール詳細
-----------------------------------------------*/
table.tblProfile {
    width: 100%;
    border: none;
    border-collapse: collapse;
}
table.tblProfile th {
    width: 150px;
    padding: 10px;
    border: 1px solid #FFFFFF;
    background: #FBE5F3;
    text-align: left;
}
table.tblProfile td {
    padding: 10px;
    border: 1px solid #FFFFFF;
    background: #EAEAEA;
    text-align: left;
    vertical-align: top;
}

/* ==============================================
   登録したにおい
============================================== */

/* においリスト
-----------------------------------------------*/
p.unitSmellListMsg {
    margin: 10px 0;
    color: #4D9212;
    font-weight: bold;
    text-align: center;
}
p.unitSmellListMsg span {
    margin: 0 5px;
    font-size: 116%;
}

/* ==============================================
   トピック一覧
============================================== */

/* 見出し
-----------------------------------------------*/
div#topicList h3 {
    margin-bottom: 10px;
    padding: 10px;
    background: url(/img/home/bg_ttl_topic_list.gif) no-repeat 0 50%;
    color: #FFFFFF;
    font-size: 108%;
    text-align: center;
}
div#topicList p.arrowLink {
    text-align: right;
}

/* トピックリスト
-----------------------------------------------*/
ul.unitTopicList {
    overflow: hidden;
    width: 660px;
    margin: 0 -45px 20px 0;
}
ul.unitTopicList li {
    float: left;
    width: 120px;
    margin-right: 45px;
    font-size: 77%;
    text-align: center;
}
ul.unitTopicList li div.img {
    margin-bottom: 5px;
}
ul.unitTopicList li div.img img {
    border: 3px solid #C1E4E9;
}
ul.unitTopicList li div.btnDel {
    margin-top: 5px;
}

/* ==============================================
   ヘルプ系コンテンツ
============================================== */

div#help h2 {
    padding-left: 7px;
    border-left: 5px solid #BCD427;
    color: #000000 !important;
    font-size: 108%;
}
div#help ol {
    margin: 10px 0 10px 25px;
}
div#help dl.word dt {
    float: left;
    width: 8em;
}
div#help dl.word dd {
    margin-left: 8em
}
div#help p.revisionDate {
    text-align: right;
}

/* 運営会社
-----------------------------------------------*/
div.contBoxT {
    padding-bottom: 10px;
}
div#help div.blockCompany dl {
    float: left;
    width: 290px;
}
div#help div.blockCompany dl dt {
    font-weight: bold;
}
div#help ul.staffList {
    margin-bottom: 5px;
}
div#help ul.staffList li.staff {
    display: inline; /* forIE6 */
    float: left;
    width: 305px;
    margin-right: 5px;
    background: #ddf1fd url(/img/home/bg_box_staff_b.gif) no-repeat 0 100%;
}
div#help ul.staffList li dl {
    width: 265px;
    padding: 20px 20px 10px;
    background: url(/img/home/bg_box_staff_t.gif) no-repeat;
}
div#help ul.staffList li dl dt {
    float: left;
    width: 74px;
}
div#help ul.staffList li dl dt img {
    border: 2px solid #FFFFFF;
}
div#help ul.staffList li dl dd {
    margin-left: 84px;
}
div#help ul.staffList li dl dd h3 {
    margin-bottom: 5px;
}
div#help ul.staffList li dl dd h3 span {
    font-weight: normal;
}

/* FAQ
-----------------------------------------------*/
div#pageContents {
    padding: 10px 10px 5px;
    border: 3px solid #dff3fe;
}
div#pageContents dl dt {
    font-weight: bold;
    color: #00608E;
}
div#pageContents dl dd {
    margin-bottom: 0.5em;
}
div#help div#faq h3 {
    padding: 10px 0 0 43px;
    background: url(/img/home/icn_question.gif) no-repeat 0 100%;
    font-size: 108%;
}
div#help div#faq div.answer {
    margin: 5px 0;
    padding: 10px 10px 5px;
    background: #dff3fe;
}
div#help div#faq div.answer p,
div#help div#faq div.answer dl dd {
    margin-bottom: 0.5em;
}
div#help div#faq div.answer div.chara {
    margin-bottom: 10px;
}
div#help div#faq div.answer dl.chara dt,
div#help div#faq div.answer dl.os dt {
    font-weight: bold;
    color: #00608E;
}

/* におい部って？
-----------------------------------------------*/
div.aboutSmellist img {
    display: block;
    margin-bottom: 20px !important;
}

/* ==============================================
   右カラム
============================================== */
div.innerSubColumn h2 {
    font-size: 108%;
}
div.innerSubColumn h3 {
    padding: 10px 0;
}

/* ==============================================
   clearfix
============================================== */
ul.searchResultSmellist:after,
div.smellistProfileT:after,
ul.unitTopicList:after,
div#help div.blockCompany:after,
div#help ul.staffList:after,
div#help ul.staffList li dl:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    line-height: 0;
    font-size: 0.1em;
}
ul.searchResultSmellist,
div.smellistProfileT,
ul.unitTopicList,
div#help div.blockCompany,
div#help ul.staffList,
div#help ul.staffList li dl {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html ul.searchResultSmellist,
* html div.smellistProfileT,
* html ul.unitTopicList,
* html div#help div.blockCompany,
* html div#help ul.staffList,
* html div#help ul.staffList li dl {
    height: 1%;
}
ul.searchResultSmellist,
div.smellistProfileT,
ul.unitTopicList,
div#help div.blockCompany,
div#help ul.staffList,
div#help ul.staffList li dl {
    display: block;
}
/* End hide from IE-mac */