@charset "utf-8";

@import "mixin.less";

//==================================================
//                   global define                         
//==================================================
// color
//----------------------------------------------------
    @second_color : #0078d3 ;
    @a     : @second_color ;
    @ah    : @second_color ; //a:hover
    @black : #000000 ;
    @white : #FFFFFF ;
    

.style(@header_height, @title_width, @wrap_menu_width, @menu_width, @menu_font-size, @cont_prof2_width, @img_prof_max-width, @stage_list_stage_info_width){
//==================================================
//                   common                         
//==================================================
a {
	color : @a ;
	text-decoration : none ;
}

a:hover {
	color : @ah;
	text-decoration : underline ;
}

input[type="submit"]:hover{
	cursor : pointer ;
}

.right {
    float : right;    
}

.clear{
    clear:both;
}

.btn {
    background-color : #f56868 ;
    color : @white ;
    display : block ;
    width : 80% ;
    padding : 20px 10px;
    text-align: center;
    margin : 10px auto 15px auto;
    font-size : 20px ;
    letter-spacing : 1px ;
    .rounded-corners();
    &:hover{
       color : @white ;   
       text-decoration : none ;
       background : #c33636 ;
    }
}

h1 { color : #7e624f ; font-size : 200% ; letter-spacing : 2px ; margin : 30px 0 ; padding : 10px 0 0 0 ;}
h2 { color : #7e624f ; font-size : 120% ; letter-spacing : 2px ; margin : 20px 0 ;}
 
//==================================================
//                     layout                       
//==================================================
body:before{
   content: "";
   position: fixed;
   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);
}
body {
    width : 100% ;
    background-color:#f0ebdb;

    // #header
    //----------------------------------------------------
    #header {
        width  : 100%  ;
        height : @header_height ;
        background-color : #f7f7f7 ;
        &:before {
            background: #d0d0d0 ;
            height  : 8px   ;
            width   : 100%  ;
            display : block ;
            content : ""    ;
        }
        a#title { 
            width      : @title_width ;
            display    : block;
            text-align : center;
            float      : left ;
			img { width : 320px ;}
        }
        #rewrite {
            width : @title_width;
            font-size : 30px ;
            margin : 25px auto;
            text-align : center ;
            float : left ;
            display : block ;
            color : #7e624f ;
        }
        #menu {
            width : @wrap_menu_width ;
            float : right ;
        }
        ul {
            width : @menu_width * 4 ;
            display:block ;
            margin : 0 auto ;
            .clearfix();
            li { 
                float   : left ;
                margin  : 15px 0 0 0;
                font-size : @menu_font-size ;
                width   : @menu_width ;
                text-align:center;
                a {
                    width   : @menu_width ;
                    //padding : 10px 0 ;
                    display:block;
                    color   : #bbb ;
                    text-decoration : none;
                    &:hover {
                        color : #999 ;
                    }
                }
            }
        }
    }

    // #cover
    //----------------------------------------------------
    #cover {
        width  : 100%  ;
        content:"";
        //height : 500px ;
        //background-image:url("../images/cover.jpg");
        background-repeat : repeat-x ;
        background-color  : #f7f7f7  ;
        position          : relative ; 
        background-position: center 0; 
        background-repeat: no-repeat;
        background-attachment: fixed; 
        img {
            bottom   : 0 ;
            //right    : 20px ;
            position : absolute ;
            //width : 90% ;
            width : 100% ;
            //max-width : 600px ;
        }
    }

    // .cont
    //----------------------------------------------------
    .cont {
        display : block ;
        width  : 90% ;
        margin : 50px auto 50px auto;
        p {
            color : #7e624f ;
            margin : 20px 0;
            line-height    : 1.5 ;
            letter-spacing : 1px ;
            font-size : 110% ;
        }
    }

    // profile
    //================================================
    div.cont_prof2 { float : left ; width : @cont_prof2_width ; margin: 0 4% 0 0 ;}
    img.img_prof { float : right ; width : @img_prof_max-width ;}

    // movie
    //================================================
    #movie {
        background:#7e624f;
        width:100%;
        margin : 0 auto ;
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px;
        height: 0;
        overflow: hidden;

        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        h1 { margin-left : 20px; }
    }

   // .content_stage_list
   //----------------------------------------------------
    .content_stage_list {
        width  : 90% ;
        margin : 0 auto ;
        &>div {
            width : 100% ;
            margin : 0 0 100px 0 ;
            h1 { 
                border-top : 2px solid #7e624f;
                border-bottom : 2px solid #7e624f;
                text-align: center ;
                color : #7e624f ; 
                line-height : 2 ; 
                font-size : 130% ; 
                letter-spacing : 2px ; 
                padding : 10px ;
                margin : 0 0 40px 0 ;
            }
            h2 {
                color : #7e624f ; 
                line-height : 2 ; 
                font-size : 130% ; 
                letter-spacing : 2px ; 
                padding : 10px 0 ;
                margin : 20px 0 0 20px;
            }
            .stage_info {
                width : @stage_list_stage_info_width  ; 
                float : left ;
                background-color : #7e624f ;
                margin : 0 2% 2% 0 ;
                overflow : hidden ;
                .boxShadow(3px, #000);
                a { display : block ;}
                a:hover { text-decoration : none ;}
                div.img_base {
                    overflow : hidden;
                    position : relative ;
                    height : 150px;
                    img { width : 100% ; }
                    img.img_select {
                        position : absolute ;   
                        top : 0 ;
                        width : 150% ;
                        left  : -25% ;
                    }
                }
                div.stage_content {
                    height : 70px ;
                    p { color : @white; font-size:90%; text-align:right; margin:0 5px 0 0;}
                    h2 { color : @white;  padding : 10px ; line-height : 1 ; margin : 0 ; font-weight : normal; font-size : 100% ; text-align:center;}
                }
            }
        }
    }

    // information
    //================================================
    table {
        width : 100% ;
        border-collapse:collapse;
        border : solid 1px #7e624f ;
        th, td { padding : 10px ; min-width: 100px; }
        th { background : #7e624f ; color : #FFF ; width : 50px ; border : solid 1px #f0ebdb}
        td { color : #7e624f ; line-height : 1.5 ; border : solid 1px #7e624f ; }
    }

    // entry
    //================================================
    #entry {
        background:#7e624f;
        padding : 10px ;
        h2 { color : #FEFEFE ; }
        p { color : #FEFEFE ; }
        .rounded-corners();
        input {
            .rounded-corners(5px);
        }
    }


    // contact
    //================================================
    form {
        input, textarea { padding:0; margin:0; border: 1px solid #CCC ; }
        input {
            width  : 100% ;
            margin : 5px 0 ;
            padding : 5px 0;
            &.form_email{
                width  : 48% ;
                float  : left ;
            }
            &.form_email_confirm{
                width  : 48% ;
                float  : right ;
            }
            &[type='submit']{
                //.button();
                width      : 150px ;
                display    : block;
                margin     : 5px auto ;
            }
            &[type='submit']:hover{
                background : #AAA ;
            }
        }
        textarea {
            width   : 100% ;
            margin  : 5px 0 ;
            padding : 5px 0;
            resize: vertical;
        }
    }


	// #footer
    //----------------------------------------------------
	#footer {
        width      : 100%    ;
        padding    : 40px 0  ;
        text-align : center  ;
        background : #7e624f ;
        p {
            color : #FEFEFE ;
            line-height    : 1.5 ;
            letter-spacing : 1px ;
            font-size : 110% ;
        }
	}

	/* gotop
	----------------------------------------------- */
	#gotop_wrap{
		width:100%;
		margin:0 auto;
		
		#gotop{
			padding:10px 0;
			float:right;
			margin-top:10px;
			position: fixed;
			bottom: 10px;
			right: 10px;
			cursor: pointer;
			/*背景*/
			background:#e0e0e0;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			/*影*/
			-webkit-box-shadow: 0 0 5px #000;
			-moz-box-shadow: 0 0 5px #000;
			box-shadow: 0 0 5px #000;
		    /*ie6,7,8 CSS3*/
			behavior: url(http://yukiadachi.com/css/htc/PIE.htc);

			a{
				padding:10px;
				color:#999;
				text-decoration:none;
				font-size:110%;
				letter-spacing:2px;
			}
			a:hover{
				text-decoration:none;
			}
		}
		#gotop:hover{
			/*背景*/
			background:#c0c0c0;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			/*影*/
			-webkit-box-shadow: 0 0 5px #000;
			-moz-box-shadow: 0 0 5px #000;
			box-shadow: 0 0 5px #000;
            /*ie6,7,8 CSS3*/
			behavior: url(http://shuntap.jp/css/htc/PIE.htc);
		}
	}//gotop_wrap END

}
}//end .style


//==================================================
//                   output                         
//==================================================
// FOR SMART PHONE
//----------------------------------------
@media only screen and (max-width: 480px) {
    @header_height : 50px ;
    @title_width : 100% ;
    @wrap_menu_width : 100% ;
	@menu_width      : 75px ;
	@menu_font-size  : 110% ;
    @cont_prof2_width   : 100% ;
    @img_prof_max-width : 100% ;
    @stage_list_stage_info_width : 96%/2 ;
    .style(@header_height, @title_width, @wrap_menu_width, @menu_width, @menu_font-size, @cont_prof2_width, @img_prof_max-width, @stage_list_stage_info_width);
    .disable_sp {
        display : none !important;
    }
}

// FOR TBALET DEVICE
//----------------------------------------
@media only screen and (min-width: 481px) and (max-width: 768px) {
    @header_height : 50px ;
    @title_width : 100% ;
    @wrap_menu_width : 100% ;
	@menu_width      : 100px ;
	@menu_font-size  : 130% ;
    @cont_prof2_width   : 100% ;
    @img_prof_max-width : 100% ;
    @stage_list_stage_info_width : 96%/2 ;
    .style(@header_height, @title_width, @wrap_menu_width, @menu_width, @menu_font-size, @cont_prof2_width, @img_prof_max-width, @stage_list_stage_info_width);
    .disable_tablet {
        display : none !important;
    }
}

// Desktop devices styles FOR PC
//----------------------------------------
@media only screen and (min-width: 769px) {
    @header_height : 50px ;
    @title_width   : 360px ;
    @wrap_menu_width    : 50% ;
	@menu_width      : 100px ;
	@menu_font-size  : 130% ;
    @cont_prof2_width   : 45% ;
    @img_prof_max-width : 50% ;
    @stage_list_stage_info_width : 92%/4 ;
    .style(@header_height, @title_width, @wrap_menu_width, @menu_width, @menu_font-size, @cont_prof2_width, @img_prof_max-width, @stage_list_stage_info_width);
    .disable_pc {
        display : none !important;
    }
}