/**
 * Leaders Style トップ
 *
 * Leaders Style トップ
 *
 * @author  Shigeaki Kurimoto <kurimoto@e-qwerty.co.jp>
 * @create  2015/02/23
 * @version 1.00
 */

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

/* -------------------------------------------------------------------- */
#idTop {
}

/* -------------------------------------------------------------------- */
/*
 * プロモーション部
 */
.clsTopPromotion {
	height     : 300px;
    background : url(../images/top/bg_promotion.png);
    width      : 1200px;
}

.accordian {
    width    : 1040px;
    height   : 300px;
    overflow : hidden;

    /*Time for some styling*/
    margin             : 0px auto;
    position    : relative;
}

/*A small hack to prevent flickering on some browsers*/
.accordian ul {
    width: 2000px;
    /*This will give ample space to the last item to move
    instead of falling down/flickering during hovers.*/
}

.accordian li {
    position    : relative;
    display     : block;
    width       : 80px;
    float       : left;

    /*Transitions to give animation effect*/
    transition         : all 0.5s;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
    /*If you hover on the images now you should be able to
    see the basic accordian*/
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {
	width: 40px;
}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/

.accordian ul li:hover {
	width: 600px;
}

.accordian li a div {
	display : block;
	float   : left;
}

.clsTopPromotionArea {
    display : block;
    width   : 600px;
    height  : 300px;
    background-color   : #000000;
    transition         : all 0.5s;
    -webkit-transition : all 0.5s;
    -moz-transition    : all 0.5s;
}

.clsTopPromotionPic {
    width  : 300px;
    height : 300px;
}

.clsTopPromotionPic : hover {
    background-position : -150px 0px!important;
}

.clsTopPromotionWord {
    padding     : 30px 0px 0px 20px;
    width  : 300px;
    height : 300px;
    color  : #FFFFFF;
}

.clsTopPromotionWordP1 {
    font-family : "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
    font-size   : 12px;
    font-weight : normal;
    line-height : 26px;
}

.clsTopPromotionWordP2 {
    font-family : "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
    font-size   : 22px;
    font-weight : bold;
}

#idTopPromotionMore {
	position : absolute;
	top     : 185px;
	left    : 920px;
	z-index : 1000;
	width   : 100px;
	height  : 100px;
}
/* -------------------------------------------------------------------- */
/*
 * コンテンツ部
 */
.clsTopContents {
	height : 300px;
}

#idMainTitle {
    font-size    : 24px;
    font-weight : bold;
    font-family : "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
    margin      : 30px 0px 30px 60px;
}

#idMainWord {
    font-size   : 12px;
    font-family : "ヒラギノ明朝 ProN W6","HiraMinProN-W6","HG明朝E","ＭＳ Ｐ明朝","MS PMincho","MS 明朝",serif;
    margin      : 0px 35px 0px 60px;
    line-height : 22px;
}

.fb-page,
.fb-page span,
.fb-page iframe {
  width: 100%!important;
  padding : 30px;
}

.fb-like-box {
    margin-bottom : 40px;
}