@charset "UTF-8";

/*
 *  top.css
 *  http://reroom.jp/
 *
 *  Description:
 *  トップページのスタイル
 *
 *  Copyright 2010, reroom
*/ 

/*======================================================================
    elements
======================================================================*/

h1 {
    display: none;
}

legend {
    display: none;
}

textarea {
    width: 282px;
    max-width: 282px;
}

/*======================================================================
    parts
======================================================================*/

/*----------------------------------------------------------------------
    div.thumb
----------------------------------------------------------------------*/

div.thumb img {
    border: 2px solid #b3b3ab;
}

/*----------------------------------------------------------------------
    div.user
----------------------------------------------------------------------*/

div.user {
    position: relative;
    line-height: 1;
    font-weight: bold;
}

div.user span.portrait {
    margin-right: 10px;
    float: left;
}

div.user span.title {
    display: block;
    font-size: 108%;
}

div.user span.name {
    color: #b3b3ab;
    font-size: 93%;
}

div.user span.date {
    position: absolute;
    top: 0;
    right: 0;
    color: #b3b3ab;
    font-size: 85%;
}

/*----------------------------------------------------------------------
    p.more
----------------------------------------------------------------------*/

p.more {
    font-weight: bold;
    font-size: 85%;
}

/*======================================================================
    #photo
======================================================================*/

#photo div.pickup,
#photo div.featured,
#photo div.featuredList,
#photo div.category {
    margin: 0 30px 0 25px;
    padding-top: 20px;
    overflow: hidden;
}

#photo h2 {
    margin: 0 0 15px;
    width: 610px;
    height: 23px;
    background-repeat: no-repeat;
    text-indent: -9999px;
}

/*======================================================================
    div.pickup
======================================================================*/

#photo div.pickup {
    padding-top: 30px;
    padding-bottom: 30px;
}

#photo div.pickup h2 {
    background-image: url("../images/headline/pickup.8c547ebe0b57.png");
}

/*----------------------------------------------------------------------
    div.image
----------------------------------------------------------------------*/

#photo div.pickup div.image {
    margin: 0 0 10px;
}

#photo div.pickup div.image a:hover {
    background-color: transparent;
}

#photo div.pickup div.image img {
    padding: 3px;
    border: 2px solid #b3b3ab;
}

/*----------------------------------------------------------------------
    div.user
----------------------------------------------------------------------*/

#photo div.pickup div.user {
    float: left;
    width: 300px;
}

/*----------------------------------------------------------------------
    div.description
----------------------------------------------------------------------*/

#photo div.pickup div.description {
    margin-left: 310px;
}

/*----------------------------------------------------------------------
    p.more
----------------------------------------------------------------------*/

#photo div.pickup p.more {
    margin-bottom: 40px;
    clear: both;
}

/*======================================================================
    div.featured
======================================================================*/

#photo div.featured {
    border-top: 1px solid #a6a69f;
    position: relative;
}
#photo div.featured h2 {
    background-image: url("../images/headline/featured.e435e0caecd0.png");
}
#photo div.featured div.user,
#photo div.featured div.description,
#photo div.featured p.more {
    margin-left: 310px;
}

/*----------------------------------------------------------------------
    div.thumb
----------------------------------------------------------------------*/

#photo div.featured div.thumb {
    float: left;
    width: 300px;
}

/*----------------------------------------------------------------------
    div.user
----------------------------------------------------------------------*/

#photo div.featured div.user {
    width: 297px;
}

/*----------------------------------------------------------------------
    div.description
----------------------------------------------------------------------*/

#photo div.featured div.description {
    margin-top: 30px;
    margin-bottom: 10px;
}

/*======================================================================
    div.featuredList
======================================================================*/

#photo div.featuredList {
    padding-top: 25px;
    margin-right: -20px;
}

/*----------------------------------------------------------------------
    div.thumbnail
----------------------------------------------------------------------*/

#photo div.featuredList div.thumbnail {
    margin: 0 20px 15px 0;
    float: left;
    width: 190px;
}

/*----------------------------------------------------------------------
    div.user
----------------------------------------------------------------------*/

#photo div.featuredList div.thumbnail div.user span.title {
    margin-top: 10px;
    font-size: 93%;
}

#photo div.featuredList div.thumbnail div.user span.date {
    margin-top: 7px;
    position: static;
    display: block;
}

/*======================================================================
    div.category
======================================================================*/

#photo div.category {
    margin-top: 30px;
    border-top: 1px solid #a6a69f;
}

#photo div.category h2 {
    background-image: url("../images/headline/category.5e8fbc58b6c9.png");
}

#photo dl.data {
    position: relative;
}

/*----------------------------------------------------------------------
    dt
----------------------------------------------------------------------*/

#photo dl.data dt {
    margin: 0;
    position: absolute;
    top: 0;
    width: 190px;
    height: 20px;
    text-indent: -9999px;
}

#photo dl.data dt.color {
    left: 0;
    background: url("../images/headline/color.12bfbfbedee7.png") no-repeat;
}

#photo dl.data dt.item {
    left: 210px;
    background: url("../images/headline/item.cd75c6802170.png") no-repeat;
}

#photo dl.data dt.keyword {
    left: 420px;
    background: url("../images/headline/keyword.6e9789bc9d36.png") no-repeat;
}

/*----------------------------------------------------------------------
    dd
----------------------------------------------------------------------*/

#photo dl.data dd {
    margin: 25px 20px 0 0;
    padding-bottom: 20px;
    float: left;
    width: 190px;
}

#photo dl.data dd.color {
    margin-right: 10px;
    width: 200px;
}

#photo dl.data dd.keyword {
    margin-right: 0;
}

#photo dl.data dd p.more {
    clear: both;
}

/*----------------------------------------------------------------------
    dd.color
----------------------------------------------------------------------*/

#photo dl.data dd.color li {
    margin: 0 3px 6px 0;
    padding: 0;
    float: left;
    text-indent: -9999px;
}

#photo dl.data dd.color li a {
    display: block;
    width: 95px;
    height: 21px;
    background: url("../images/button/form/color_scheme.ec3508760067.png") no-repeat;
}

/* image replacement
----------------------------------------------------------------------*/

#photo dl.data dd.color li.red a {
    background-position: 0 0;
}
#photo dl.data dd.color li.red a:hover {
    background-position: -95px 0;
}
#photo dl.data dd.color li.brown a {
    background-position: 0 -21px;
}
#photo dl.data dd.color li.brown a:hover {
    background-position: -95px -21px;
}
#photo dl.data dd.color li.orange a {
    background-position: 0 -42px;
}
#photo dl.data dd.color li.orange a:hover {
    background-position: -95px -42px;
}
#photo dl.data dd.color li.khaki a {
    background-position: 0 -63px;
}
#photo dl.data dd.color li.khaki a:hover {
    background-position: -95px -63px;
}
#photo dl.data dd.color li.yellow a {
    background-position: 0 -84px;
}
#photo dl.data dd.color li.yellow a:hover {
    background-position: -95px -84px;
}
#photo dl.data dd.color li.yellowGreen a {
    background-position: 0 -105px;
}
#photo dl.data dd.color li.yellowGreen a:hover {
    background-position: -95px -105px;
}
#photo dl.data dd.color li.green a {
    background-position: 0 -126px;
}
#photo dl.data dd.color li.green a:hover {
    background-position: -95px -126px;
}
#photo dl.data dd.color li.lightBlue a {
    background-position: 0 -147px;
}
#photo dl.data dd.color li.lightBlue a:hover {
    background-position: -95px -147px;
}
#photo dl.data dd.color li.blue a {
    background-position: 0 -168px;
}
#photo dl.data dd.color li.blue a:hover {
    background-position: -95px -168px;
}
#photo dl.data dd.color li.purple a {
    background-position: 0 -189px;
}
#photo dl.data dd.color li.purple a:hover {
    background-position: -95px -189px;
}
#photo dl.data dd.color li.pink a {
    background-position: 0 -210px;
}
#photo dl.data dd.color li.pink a:hover {
    background-position: -95px -210px;
}
#photo dl.data dd.color li.white a {
    background-position: 0 -231px;
}
#photo dl.data dd.color li.white a:hover {
    background-position: -95px -231px;
}
#photo dl.data dd.color li.gray a {
    background-position: 0 -252px;
}
#photo dl.data dd.color li.gray a:hover {
    background-position: -95px -252px;
}
#photo dl.data dd.color li.black a {
    background-position: 0 -273px;
}
#photo dl.data dd.color li.black a:hover {
    background-position: -95px -273px;
}
#photo dl.data dd.color li.gold a {
    background-position: 0 -294px;
}
#photo dl.data dd.color li.gold a:hover {
    background-position: -95px -294px;
}
#photo dl.data dd.color li.silver a {
    background-position: 0 -315px;
}
#photo dl.data dd.color li.silver a:hover {
    background-position: -95px -315px;
}

/*----------------------------------------------------------------------
    dd.item
----------------------------------------------------------------------*/

#photo dl.data dd.item li {
    padding: 0 0 0 20px;
    background: url("../images/icon/item001_13x13.796a92b36b7d.png") no-repeat 0 0.2em;
    font-weight: bold;
    font-size: 93%;
}

/*----------------------------------------------------------------------
    dd.keyword
----------------------------------------------------------------------*/

#photo dl.data dd.keyword li {
    margin: 0 5px 10px 0;
    padding: 0;
    float: left;
    height: 18px;
    line-height: 18px;
    background: url("../images/bg/keyword_bg.00cedf34739c.png") no-repeat 100% 0;
    font-weight: bold;
    font-size: 85%;
    white-space: nowrap;
}

#photo dl.data dd.keyword li a {
    padding: 0 10px;
    display: block;
    float: left;
    height: 18px;
    color: #ffffff;
    background: url("../images/bg/keyword_bg.00cedf34739c.png") no-repeat -184px -18px;
}

/*======================================================================
    #utilities
======================================================================*/

#utilities h3 {
    font-size: 93%;
}
#utilities div.regist h3,
#utilities div.banner h3 {
    display: none;
}

/*----------------------------------------------------------------------
    div.section
----------------------------------------------------------------------*/

#utilities div.section {
    margin: 0 0 15px 0; /* 左右のマージン増やした */
}

/*----------------------------------------------------------------------
    div.button
----------------------------------------------------------------------*/

#utilities div.button {
    height: 30px;
    background-repeat: no-repeat;
}

#utilities div.button input,
#utilities div.button a {
    display: block;
    overflow: hidden;
    height: 30px;
    text-indent: -9999px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 -30px;
    cursor: pointer;
}

#utilities div.button a:hover {
    background-color: transparent;
}

/*----------------------------------------------------------------------
    div.regist
----------------------------------------------------------------------*/

#utilities div.regist div.button {
    height: 60px;
}

#utilities div.regist div.button a {
    height: 60px;
    background-position: 0 -60px;
}

#topRegist,
#topRegist a {
    width: 300px;
    background-image: url("../images/button/form/regist_300x60.af6417d30d55.png");
}

/*----------------------------------------------------------------------
    div.banner
----------------------------------------------------------------------*/

/*----------------------------------------------------------------------
    div.news
----------------------------------------------------------------------*/

#utilities div.news {
    padding-bottom: 3px;
    background-image: url("../images/bg/utilities_box001.b4db4b625522.png");
    background-repeat: no-repeat;
    background-position: 0 100%;
}

#utilities div.news h3 {
    margin: 0;
    padding: 10px 15px;
    margin: 0;
    background-image: url("../images/bg/utilities_box001.b4db4b625522.png");
    background-repeat: no-repeat;
    background-position: -300px -996px;
}

#utilities div.news dl {
    margin: 0;
}

#utilities div.news dl dt {
    margin: 0;
    padding: 10px 15px 0 25px;
    border-top: 1px dotted #a6a69f;
    font-size: 93%;
    background-image: url("../images/marker/dash001.893405a354e3.png");
    background-repeat: no-repeat;
    background-position: 15px 1.45em;
}

#utilities div.news dl dd {
    margin: 0;
    padding: 0 15px 10px;
    font-size: 93%;
}

#utilities div.news ul {
    margin-left: 10px;
    font-size: 95%;
}

#utilities iframe.facebook-likebox {
    border: none;
    overflow: hidden;
    width: 292px;
    height: 427px;
}

/*----------------------------------------------------------------------
    div.contact
----------------------------------------------------------------------*/

#utilities div.contact h3 {
    margin-top: 40px;
    padding-left: 18px;
    background: url("../images/icon/comment002_13x13.d46d7cda580c.png") no-repeat;
}

#utilities div.contact dl {
    margin: 10px 0 0;
}

#utilities div.contact dt {
    display: none;
}


#submitContact,
#submitContact input {
    width: 164px;
    background-image: url("../images/button/form/contact_164x30.896dfa5bf00d.png");
}

/*======================================================================
    layout
======================================================================*/

#main {
    overflow: hidden;
}

#photo {
    width: 665px;
    float: left;
}

#utilities {
    margin-top: 50px;
    width: 300px;
    float: left;
    /* background: #f7f7f2; */
}

.twtr-doc {
    border: 1px solid #CCCCC4;
}