@charset "UTF-8";
/*
 * ==================================
 * solar-club.jp stylesheet
 *
 *  TOP PAGE
 * 
 *  copyright 2015 solar-club.jp
 *  author : Fuminori KOBAYASHI
 *  modified at : 2016-01-13
 * ==================================  
 */
/* 
 * ++++++++++++++++++
 *  common
 * ++++++++++++++++++
 */

#outline{
    max-width:980px;
    width:100%;

}

span.undefined{
    color:#ccc;
    
}
#brandLogo > img{
    width:480px;
}
@media screen and (min-width:0px) and (max-width:550px) {
    #brandLogo > img{
	width:100%;
    }
}

/* 
 * ++++++++++++++++++
 *  header slider
 * ++++++++++++++++++
 */
#top_slider{
    /* height:300px; */
    overflow:hidden;
    margin:0px;
    padding:0px;
}
#top_slider .images > div{
    background-size:cover !important;
    width:100% !important;
}

@media screen and (max-width:550px){
    #top_slider{
	height:150px !important;
	width:100% !important;
    }
    #top_slider > div{
	height:150px !important;
	width:500px !important;
    }
    #top_slider .images > div{
	height:150px !important;
	width:500px !important;
	background-size:cover !important;
    }
    #top_slider .images > div:first-child > div{
	background-size:500px 150px;
    }
}

/* 
 * ++++++++++++++++++
 *  header navigation
 * ++++++++++++++++++
 */

#main_nav ul li > a{
    padding: 10px 5px;
    
}

/* 
 * ++++++++++++++++++
 *  main
 * ++++++++++++++++++
 */
#main section > a > img{
    width:100%;
}


/* 
 * ++++++++++++++++++
 *   popup COMMON
 * ++++++++++++++++++
 */
#popup_mask{
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    
    background:rgba(0,0,0,0.5);
    z-index:10;
}
.popup_dialog{
    position:absolute;
    z-index:100;
    top:100px;
    left:5%;
    height:600px;
    width:90%;
    background:#eee;
    border-radius:5px;
    border: 2px solid #888;
    padding: 20px 5%;
}
.popup_dialog p{

}
.popup_dialog .popup-btn-container{    
    position:absolute;
    width:90%;
    bottom:10px;
    text-align:right;
}
.popup_dialog .popup-btn-container a.btn{
    width:10em;
}


/* 
 * ++++++++++++++++++
 *   aside
 * ++++++++++++++++++
 */
#mail-mag .label{
    width:30%;
    display: inline-block;
    line-height: 2em;
    background:#aaa;
}
#mail-mag input[type="text"],
#mail-mag select{
    width:65%;
    display: inline-block;
    margin:5px 0px;
}
#mail-mag .btn{
    margin:5px 0px;
    width:100%;
}

/* 
 * ++++++++++++++++++
 *   recommend
 * ++++++++++++++++++
 */
#topics_ichiba ul{

}
#topics_ichiba ul li{
    background-size:cover;
    height:200px;
    border:3px solid #fff;
    padding:0px;
    position:relative;
}

@media screen and (min-width:0px) and (max-width:550px) {
    #topics_ichiba ul li{
	height:100px;
    }
}

#topics_ichiba ul li a{
    width:100%;
    height:100%;
    display:block;
    position:absolute;
}

#topics_ichiba ul li a h4{
    position:absolute;
    bottom:0px;
    width:100%;
    line-height:17px;;
    /* background:rgba(0,0,0,0.5); */
    /* padding:30px 10px 0px 10px; */
    padding:40px 5px 5px 5px;
    margin:0px;
    bottom:0px;
    display:block;
    font-size:14px;
    color:#fff;
    font-weight:bold;
    vertical-align:bottom;

    background-image: -webkit-gradient(
			      linear,
			      left top,
			      left bottom,
			      color-stop(0, rgba(0,0,0,0)),
			      color-stop(1, rgba(0,0,0,0.7))
			  );
    background-image: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    background-image: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
    
}

/* 
 * ++++++++++++++++++
 *   forum topic, blog recents
 * ++++++++++++++++++
 */
.summary-list ul{
    padding:0px;
}
.summary-list li{
    list-style-type:none;
    display:block;
    border-bottom:1px solid #ccc;
}
.summary-list li:first-child{
    border-top:1px solid #ccc;
}
.summary-list li > a{
    display:block;
    width:100%;
    height:100%;
    padding:0.5em;
    text-decoration:none;
    overflow:hidden;

}
.summary-list li > a:hover{
    background:#ffc;
}

.summary-list li  .title{
    font-weight:bold;
    font-size:18px;
    width:400px;
    height:20px;
    line-height:18px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    display:inline-block;
    vertical-align:middle;
}

.summary-list li  .datetime{
    color:#333 ;
    margin-left:1em;
    font-size:12px;
    vertical-align:middle;
    white-space:nowrap;
}
.summary-list li  .datetime{
}

.summary-list li  .summary{
    font-size:12px;
    color:#888;
    height:20px;
    width:100%;
    line-height:20px;
    margin-top:5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

/* index.html mapcanvas */
#mapcanvas {
    height:250px;
    width:100%;
}