@charset "utf-8";
//==================================================
//                    mixin                         
//==================================================
// behavior for old browser
//----------------------------------------------------
.htc_behavior{
    behavior:url("/css/htc/PIE.htc");
}
.htc_behavior_css3{
    behavior:url("/css/htc/ie-css3.htc.htc");
}

// rounded corners
//----------------------------------------------------
.rounded-corners (@radius: 10px) {
    /*radius*/
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        border-radius: @radius;
    /*for ie6,7,8 CSS3*/
        .htc_behavior;
}

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

// textarea mouse over
//----------------------------------------------------
.textarea-hover(){
    /*gradient*/
        background: #feffff; /* Old browsers */
        background: -moz-linear-gradient(top,  #feffff 0%, #d2ebf9 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#d2ebf9)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top,  #feffff 0%,#d2ebf9 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top,  #feffff 0%,#d2ebf9 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top,  #feffff 0%,#d2ebf9 100%); /* IE10+ */
        -pie-background: linear-gradient(top,  #feffff 0%,#d2ebf9 100%); /* IE6-9 */
        background: linear-gradient(top,  #feffff 0%,#d2ebf9 100%); /* W3C */
    /*shadow*/
        -moz-box-shadow:0px 1px 8px rgba(102,102,102,0.3);
        -webkit-box-shadow:0px 1px 8px rgba(102,102,102,0.3);
        box-shadow:0px 1px 8px rgba(102,102,102,0.3);
    /*for ie6,7,8 CSS3*/
        .htc_behavior;
}

// for float problem
//----------------------------------------------------
.clearfix(){
	&:after{
		content : "" ;
		clear   : both ;
		display : block ;
		height: 0 ;
	}
}

// box shadow
//----------------------------------------------------
.boxShadow(@bs : 3px, @bsC : #999){
    -webkit-box-shadow: 0px 0px @bs @bsC;
    -moz-box-shadow: 0px 0px @bs @bsC;
    box-shadow: 0px 0px @bs @bsC;
    /*ie6,7,8 CSS3*/
    .htc_behavior;
}

// materialize
//----------------------------------------------------
.materialize(@magnification : 1){
    @depth : 5px ;
    @concentration : 0.26 ;
    @d : @depth * @magnification ;
    @c : @concentration * @magnification ;
    -webkit-box-shadow: 0px 2px @d rgba(0,0,0,@c);
    -moz-box-shadow: 0px 2px @d rgba(0,0,0,@c);
    box-shadow: 0px 2px @d rgba(0,0,0,@c);
}

// text shadow
//----------------------------------------------------
.textShadow(@ts1 : 1px , @ts2 : 1px, @tsC : #fff){
    text-shadow: 0px @ts1 @ts2 @tsC;
    /*ie6,7,8 CSS3*/
    .htc_behavior_css3;
}


.beforeShadow {
    &:before {
        content: "";
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        z-index: 100;
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    }
}
.afterShadow {
    &:after {
        content: "";
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        z-index: 100;
        -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
        box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    }
}

// gradiation
//----------------------------------------------------
.gradiation(@graDeepColor, @graBaseColor ){
    background: @graBaseColor; /* Old browsers */
    background: -moz-linear-gradient(top,  @graBaseColor 0%, @graDeepColor 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@graBaseColor), color-stop(100%,@graDeepColor)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  @graBaseColor 0%,@graDeepColor 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  @graBaseColor 0%,@graDeepColor 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  @graBaseColor 0%,@graDeepColor 100%); /* IE10+ */
    -pie-background: linear-gradient(top,  @graBaseColor 0%,@graDeepColor 100%); /* IE6-9 */
    background: linear-gradient(top,  @graBaseColor 0%,@graDeepColor 100%); /* W3C */

    /*ie6,7,8 CSS3*/
    .htc_behavior;
}

// vertical center
//----------------------------------------------------
.vertical_center(){
    position: relative;
    top: 46%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

// margin reset
//----------------------------------------------------
.margin_reset {
    margin : 0 ;
}


// border_style
//----------------------------------------------------
.border_style {
    text-align : center ;
    padding    : 5px ;
    &:last-child {
        border : 1px solid #CCCCCC;
        .rounded-corners(4px);
    }
}

// separate_line 
//----------------------------------------------------
.separate_line(@padding:@default_margin_and_padding) {
    &:after{
        border-bottom:1px solid #EEEEEE;
        padding : @padding 0 0 0 ;
    }
    &:last-child:after{
        border : none ;
    }
}

//hoverとかを遅くする
//----------------------------------------------------
.delay(){
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
}

// 明朝
//----------------------------------------------------
.mincho {
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif, Droid Sans;
    //font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}


//使い方例
//.boxShadow(7px, #000);
//.rounded-corners (5px);
//.rounded-corners (0 0 10px 10px);
//box-shadow: 1px 2px 2px rgba(0,0,0,0.3), 0px 1px 0px rgba(255,255,255,0.5) inset, 0px -1px 0px rgba(255,255,255,0.2) inset;