@charset "utf-8";

@import "mixin.less";
//==================================================
//                global define                         
//==================================================
// color
//----------------------------------------------------
    @bg_color     : #FEFEFE ;
    @base_color   : #21b1e3 ;
    @second_color : #fd9938 ;
    @third_color  : #003789 ;
    @a     : @second_color ;
    @ah    : @base_color ; //a:hover
    @header_bottom_border_color : #e7d4c4 ;
    @black : #000000 ;
    @white : #FFFFFF ;

.exec_style(
@h1_vertical_margin,
@h1_font_size,
@w_box,
@title_font_size,
@title_h1_padding_top,
@w_two_col,
@w_three_col,
@w_two_col1_w30,
@w_two_col2_w70,
@offset_top,
@form_email_width,
@title_img_width,
@youtube_padding_bottom
){    
//==================================================
//               common style                        
//==================================================
a {
	color : @a ;
	text-decoration : none ;
}

a:hover {
	color : @ah;
	text-decoration : underline ;
}
.button { 
    background : @second_color ;
    padding    : 15px 8px;
    color      : @white ;
    .rounded-corners(3px);

    &:hover {
        text-decoration:none;
        background : @ah ;
        -webkit-transition: .3s ease;
        -moz-transition: .3s ease;
        -o-transition: .3s ease;
        -ms-transition: .3s ease;
        transition: .3s ease;
    }
}

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

p, pre {
    color : #555 ;
    line-height:1.8 ;
}

.float_left {
    float: left;
    margin-right : 10px ;
    margin-bottom : 10px ;
}
.float_right {
    float: right;
    margin-left : 10px ;
    margin-bottom : 10px ;
}
.clear{
    clear:both;
}
.tcenter {
    text-align:center;
}
img.logo, img.w250_center { width : 250px ; margin-left : calc(~"50% - 125px");}
img.w160_center { width : 160px ; margin-left : calc(~"50% - 80px");}
img.w200_center { width : 200px ; margin-left : calc(~"50% - 100px");}
img.w300_center { width : 300px ; margin-left : calc(~"50% - 150px");}
img.w420_center { width : 420px ; margin-left : calc(~"50% - 210px");}
img.w840_center { width : 840px ; margin-left : calc(~"50% - 420px");}
img.w100percent { width : 100% ; }
img.zuna_message_pc { width : 490px ;  margin-left : calc(~"50% - 245px"); }
ul.sns li {
    float : left ;
    margin-left : 10px ;
}
ol {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  li {
    margin-bottom: 10px;
    padding-left: 30px;
    position: relative;
    line-height: 22px ;
    b { padding : 0 20px 0 0 ;}
  }
  li:before {
    content: counter(my-counter);
    counter-increment: my-counter;
    background-color: @base_color;
    color: @white;
    display: block;
    float: left;
    line-height: 22px;
    margin-left: -30px;
    text-align: center;
    height: 22px;
    width: 22px;
    border-radius: 50%;
  }
}

ul.list {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    line-height: 20px ;
    b { padding : 0 20px 0 0 ;}
  }
  li:before {
    content : ' ';
    counter-increment: my-counter;
    background-color: @base_color;
    color: @white;
    display: block;
    float: left;
    line-height: 20px;
    margin-top : 7px ;
    margin-left: -20px;
    text-align: center;
    height: 8px;
    width: 8px;
    border-radius: 50%;
  }
}

//.bg_blue{
//    background-color : #e4fcff ;
//}
//.bg_pro{
//    background : url("../../images/bg_pro.jpg") no-repeat;
//    background-size: cover ;
//}
//.bg_support{
//    background : url("../../images/bg_support.jpg") no-repeat;
//    background-size: cover ;
//}
.bg_white{
    background : @white;
}
.bg_stripe{
    background : url("../../images/bg_stripe.jpg");
}
.bg_basic{
    background : url("../images/bg_blue.jpg");
    h2 { color : @third_color !important; }
    background-size: cover ;
}
//.bg_studio{
//    background : url("../../images/bg_studio.jpg") no-repeat ; 
//    background-size: cover ;
//}
.bg_zuna{
    background : url("../../images/bg_zuna.jpg") no-repeat ; 
    background-size: cover ;
}
.bg_anyone{
    background : url("../../images/bg_anyone.jpg") no-repeat ; 
    background-size: cover ;
}
/*
a.btn {
    display : block ;
    padding : 10px ;
    background : @second_color ;
    margin  : 10px 0 0 0 ;
    color   : #FFF ;
    text-align:center;
    .rounded-corners(3px);
}*/
table:not(.nostyle) {
    width : 100% ;
    border-collapse: collapse;
    border : 2px solid @base_color ;
    tr th { 
        background : @base_color ;
        color       : @white ;
        border : 1px solid  @white ;
        padding : 10px ;
    }
    tr td {
        border : 1px solid  @base_color ;
        padding : 10px ;
        color : #666 ;
        line-height:1.5;
    }
}

pre {
    height     : 200px ;
    overflow   : scroll;
    background : #eee  ;
    padding    : 40px 20px ;
    white-space: pre-wrap ;
}

.red {
  color : #F00
}



//==================================================
//               form                        
//==================================================
form {
    margin : 1em 0 ;
    input, textarea {
        border: 1px solid #CCC ; 
        background-color: #fbfbfb;
        color:#3c3c3c;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 100%;
        .rounded-corners(3px);
        margin-bottom: 1em;
        padding: 5px 16px 5px 40px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
        width  : 100% ;

        &.form_email {
            width  : @form_email_width ;
            float  : left ;
        }
        &.form_email_confirm {
            width  : @form_email_width ;
            float  : right ;
        }
    }
    input:focus, textarea:focus { 
        border : 2px solid @ah ;
        background : #def1df ;
    }
    input.comment { 
        background-size: 25px 25px;
        background-position: 7px 3px;
        background-repeat: no-repeat;
        background-image: url(../images/icon_comment.png);
    }
    input[type="date"] {
        height: 35px;
        max-width: 200px;
    }
    input[type="text"] {
        height: 35px;
    }
    input[type="password"] {
        height: 35px;
    }
    input[type="radio"] {
        float : left ;
        margin : 7px 0 5px 20px ;
        width : 25px ;
        line-height : 2 ;
    }
    .radio-box {
        margin : 0 0 10px 0 ;
        line-height : 2 ;
        color : #333 ;
    }
    h3 { color : @base_color ; margin : 0 0 15px 0 ;}
    textarea {
        resize: vertical;
    }
    button.btn {
        .button();
        width : 100% ;
        font-size : 100% ;
        text-align:center;
        border : 1px solid transparent;
        &:hover {
            cursor : pointer ;
        }
    }
    &#mailform {
        .name, .form_email, .form_email_confirm, .subject, .comment {
            background-size: 25px 25px;
            background-position: 7px 3px;
            background-repeat: no-repeat;
        }
        .name { background-image: url(../images/icon_name.png) ;}
        .form_email, .form_email_confirm { background-image: url(../images/icon_email.png);}
        .subject { background-image: url(../images/icon_subject.png);}
        .comment { background-image: url(../images/icon_comment.png);}
    }
}

//==================================================
//                     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% ;
    height : 100% ;
    background : @bg_color ;
    
	// #menu
    //----------------------------------------------------
    @w_menu : 250px ;
    @h_menu : 50px ;
    @background_img_url : "../images/bg_menu.jpg" ;
    @menu_description_color : @white ;
    @menu_subdescription_color : #999  ;
    .menu(@w_menu, @h_menu, @background_img_url, @menu_description_color, @menu_subdescription_color);

	// #contents_wrap
    //----------------------------------------------------
    @h_fixed_footer : 50px ;
    .contents_wrap(@w_menu, @h_fixed_footer, @offset_top);

	// #fixed_footer
    //----------------------------------------------------
    .fixed_footer(@h_fixed_footer);

}//end body
}//end .exec_style

.fixed_footer(@h_fixed_footer){
    #fixed_footer {
        position   : fixed ;
        height     : @h_fixed_footer ;
        width      : 100% ;
        background : #000 ;
        bottom     : 0 ;
        padding    : 0 10px ;
        ul li {
            float : left ;
            margin-left : 3px ;
            img { 
                margin-top : @h_fixed_footer * 0.1 ;
                height : @h_fixed_footer * 0.8 ;
            }
        }
        a.button {
            float: left ;
            margin-top : 10px;
            padding : 10px ;
            &:hover {
                color : @white ;
            }
        }
        a.button.right {
            position : fixed ;
            right : 10px ;
        }
        a.top {
            position : fixed ;
            right : 10px ;
            bottom : @h_fixed_footer + 10px ;
            padding-top : 13px ;
            height : 27px ;
            width : 40px ;
            display: block ;
            background : rgba(0,0,0, 0.8) ;
            text-align : center ;
            font-size : 80% ;
            .rounded-corners(20px);
        }
        a.top:hover {
            text-decoration: none ;
            color : @white ;
            background: @ah ;
        }
    }
}

.contents_wrap(@w_menu, @h_fixed_footer, @offset_top){
    // common
    #contents_wrap{
//        width       : 100% - @w_menu ;
        //min-width : 750px;
        margin-left : @w_menu ;
        padding     : 0 0 @h_fixed_footer 0;
        > a#header_menu_open_close { 
            position : fixed ;
            top : 0 ;
            left : 200px;
            z-index : 1000 ;
            color  : @black ;
            width  : 50px ;
            height : 50px ;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            transform: rotate(45deg);

        }
//        > a#header_menu_open_close_sp {
//            position : fixed ;
//            top : -50px ;
//            right : 0 ; 
//            width : 50px ;
//            z-index : 1000 ;
//            img { float : right ; }
//            &:before {
//                display : block ;
//                width : 100% ;
//                content : "";
//                height : @offset_top;
//            }
//        }
        > a#header_menu_open_close_sp {
            z-index : 1000 ;
            top : 11px ;
            position : fixed ;
            right : 10px ;
            padding-top : 8px ;
            height : 20px ;
            width : 50px ;
            display: block ;
            background : @second_color ;
            color : @white ;
            text-align : center ;
            font-size : 80% ;
            .rounded-corners(5px);
        }
        > a#header_menu_open_close_sp:hover {
            text-decoration: none ;
            color : @white ;
            background: @ah ;
        }
        #header_menu_sp {
            top : 0 ;
            width : 100% ;
            height : 50px ;
            position : fixed ;
            z-index : 999 ;
            background-color : @black ; 
            img { height : 100% ; margin : 0 auto ; }
        }
        > img { width : 100% ; .materialize();}
    }
    // TOP page
    .cover(@offset_top);
    .feature(@base_color);
    @green : #60ba5b ;
    .beginner(@green);
    .lesson(@second_color);
    .target(@base_color);

    // about page
    .title(@offset_top);
    .section();
}//end .contents_wrap

.target(@color){
    .target {
        padding    : 50px 6% ;
        h1 {
            margin : @h1_vertical_margin 0 ;
            font-size  : @h1_font_size ;
            text-align : center ;
            color : @color ;
            line-height : 2 ;
            letter-spacing : 2px ; 
        }
        .box {
            float : left ;
            width : @w_box ;
            margin : 0 2.5% 25px 0 ;
            .materialize();
            div {
                padding : 20px ;
                min-height : 420px ;
                img { width : 100% ; }
                h2 { font-size : 120% ; color : #095d7a ; margin : 20px 0 ; line-height : 1.5 ; }
                b { color : @third_color ; &.hilight { color:@third_color;}}
            }
            &:last-child{
                margin : 0 ; 
            }
        }
        .clearfix();
    }
}

.lesson(@color){
    .lesson {
        .materialize();
        padding : 50px 6% ;
        background : url("../images/bg_blue.jpg") ;
        h1 {
            padding : @h1_vertical_margin 0 ;
            font-size  : @h1_font_size ;
            text-align : center ;
            color : @white ;
            line-height : 2 ;
            letter-spacing : 2px ; 
        }
        .box {
            float : left ;
            width : @w_box ;
            margin : 0 2.5% 25px 0;
            div {
                .materialize(2);
                padding : 20px ;
                background : rgba(255,255,255, 0.5) ;
                min-height : 250px ;
                img { float : left ; width : 25% ; margin : 0 10px 0 0 ; max-width : 50px ; }
                h2 { font-size : 120% ; color : #333 ; line-height : 1.5 ; margin : 0 0 20px 0 ; .clearfix();}
                p { color : #333 ; }
            }
            &:last-of-type{
                margin : 0 ; 
            }
        }
        a {
            .materialize(2);
            margin : 50px auto 0 ;
            display : block ;
            width : 200px ;
            text-align: center ;
            .button();
        }
        .clearfix();
    }
}

.beginner(@color){
    .beginner {
        padding : 50px 6% ;
        background : url("../../images/bg_beginner.jpg") no-repeat ; 
        background-size: cover ;
        h1 {
            padding : @h1_vertical_margin 0 ;
            font-size  : @h1_font_size ;
            text-align : center ;
            color : @color ;
            line-height : 2 ;
            letter-spacing : 2px ; 
        }
        .box {
            .materialize();
            background : rgba(255, 255, 255, 0.8);
            float : left ;
            min-height : 250px ;
            width : @w_box ;
            margin : 0 2.5% 25px 0;
            div {
                padding : 20px ;
                img { float : left ; width : 25% ; margin : 0 10px 0 0 ; max-width : 50px ; }
                h2 { font-size : 120% ; color : #095d7a ; line-height : 1.5 ; margin : 0 0 20px 0 ; .clearfix();}
                b { color : @third_color ; &.hilight { color:@third_color;}}
            }
            &:last-child{
                margin : 0 ; 
            }
        }
        .clearfix();
    }
}

.feature(@color){
    .feature {
        .materialize();
        background : url("../images/bg_blue.jpg");
        background-size: cover ;
        padding    : 50px 6% ;
        h1 {
            margin : @h1_vertical_margin 0 0 0;
            font-size  : @h1_font_size ;
            text-align : center ;
            color : @white ;
            line-height : 2 ;
            letter-spacing : 2px ; 
        }
        img.logo { margin-bottom : @h1_vertical_margin ; }
        .box {
            float : left ;
            width : @w_box ;
            margin : 0 2.5% 25px 0 ;
            > img { width : 120px ; margin-left : calc(~"50% - 60px");}
            div {
                .materialize(2);
                background : rgba(255, 255, 255, 0.8);
                border : 2px solid @color ;
                .rounded-corners(5px);
                padding : 20px ;
                min-height : 400px ;
                img { width : 100% ; }
                h2 { font-size : 120% ; color : #095d7a ; margin : 20px 0 ; line-height : 1.5 ; }
                b { color : @third_color ; &.hilight { color:@third_color;}}
            }
            &:last-child{
                margin : 0 ; 
            }
        }
        .clearfix();
    }
}

.cover(@offset_top:0){
    #cover_wrapper {
        .materialize();
        margin : @offset_top 0 0 0 ;
        position: relative;
        width: 100%;
        &:before {
            content:"";
            display: block;
            padding-top: 42.1%;
        }
    }
    #cover {
        background : url("/images/cover_1.jpg") no-repeat;
        background-size : 100% auto;
        width           : 100% ;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        .clearfix();
        #cover_button_wrapper {
            position: relative;
            width: 100%;
            &:before {
                content:"";
                display: block;
                padding-top: 21%;
            }
        }
        #cover_button {
            .materialize();
            right    : 50px ;
            display  : block ;
            position : absolute ;
            padding  : 20px 40px ;
            background : rgba(255,255,255, 0.8) ;
            border     : 1px solid #CCC;
            text-align : center ;
            .rounded-corners(3px);
            
            a {
                .materialize(2);
                .button();
                font-size : 120% ;
                display : block ;
                padding : 20px ;
                margin  : 10px 0 0 0 ;
            }
        }
    }
}

.menu(@w_menu, @h_menu, @background_img_url, @menu_description_color, @menu_subdescription_color) {
    #menu {
        .materialize();
        width    : @w_menu ;
        height   : 100% ;
        position : fixed ;
        overflow-x : hidden ;
        overflow-y : scroll ;
        float      : left ;
        background : url("@{background_img_url}") no-repeat #000;
        background-size  : @w_menu ;
        a#logo img { width : 100% ; margin : 50px 0 30px 0 ; } 
        p.telme { padding:10px 0 0 0; text-align:center; color:@white; }
        ul li a {
            position : relative ;
            display  : block ;
            width    : 100% ;
            height   : @h_menu ;
            margin   : 0 0 10px 0 ;
            padding  : 10px ;
            img { height : @h_menu ; float : left ;}
            > span { 
                position : absolute ;
                padding  : 0 0 0 10px ;
                max-height : 30px ;
                height   : @h_menu/2 ;
                bottom   : @h_menu/2 ;
                color    : @menu_description_color;
            } 
            span.sub{ 
                position  : absolute ;
                padding   : 0 0 0 10px ;
                top       : @h_menu/2 + @h_menu/4;
                color     : @menu_subdescription_color;
                font-size :90%;
            }
        }
        ul li a:hover {
            background : #000 ;
            &:hover {
                text-decoration:none;
                background : @ah ;
                -webkit-transition: .3s ease;
                -moz-transition: .3s ease;
                -o-transition: .3s ease;
                -ms-transition: .3s ease;
                transition: .3s ease;
                span.sub { color : #ccc; }
            }
        }
        ul {
            margin : 0 0 100px 0 ;
        }
    }//end #menu
}

.title(@offset_top:0){
    #title_wrapper {
        .materialize();
        position: relative;
        margin: @offset_top 0 0 0;
        width: 100%;
        &:before {
            content:"";
            display: block;
            padding-top: 33% ;
        }
    }
    #title {
//        background : url("/images/title_about.jpg") no-repeat;
        background-size : 100% auto;
        width           : 100% ;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        .clearfix();
        h1 { 
            font-size : @title_font_size ;
            letter-spacing: 2px ;
            padding-top : @title_h1_padding_top ;
            text-align : center ;
            color : @white ;
            img {
                width : 80% ;
                margin-top:calc(~"-5% + @{title_h1_padding_top}px");
            }
        }
        p {
            padding : 10px ;
            letter-spacing: 2px ;
            text-align : center ;
            color : @white ;
        }
    }
    .title_about { background : url("/images/title_about.jpg") no-repeat; }
    .title_instructor { background : url("/images/title_instructor.jpg") no-repeat; }
    .title_fee { background : url("/images/title_fee.jpg") no-repeat; }
    .title_online { background : url("/images/title_online.jpg") no-repeat; }
    .title_kids { background : url("/images/title_kids.jpg") no-repeat; }
    .title_kids-detail { background : url("/images/title_kids-detail.jpg") no-repeat; }
    .title_group { background : url("/images/title_group.jpg") no-repeat; }
    .title_beginner { background : url("/images/title_beginner.jpg") no-repeat; }
    .title_contact { background : url("/images/title_contact.jpg") no-repeat; }
    .title_labcup { background : url("/images/title_labcup.jpg") no-repeat; }
    .black_50 { background: rgba(0,0,0, 0.5); height:100%;}
}

.section(){
    .section {
        padding    : 50px 6% 25px;
        h1, h2 { 
            color : @base_color ; 
            line-height : 2 ;
            text-align: center ;
            padding : 20px ;
            img {
                width : @title_img_width ;
            }
        }
        h1 { font-size : @title_font_size ; }
        h2 { font-size : @title_font_size * 0.8; }
        h2 span { font-size : 80% ; }
        h3 { 
            color : @third_color ;
            font-size : 120% ;
            line-height : 2 ;
            text-align: center ;
            padding : 10px 0 ;
        } 
        h4 { 
            color : @third_color ;
            font-size : 110% ;
            line-height : 1.5 ;
            padding : 10px 0 ;
        } 
        .two_columninaze {
            .col1, .col2 { 
                width : @w_two_col ; 
                margin : 10px 0 ;
                &.youtube {
                    width : @w_two_col ;
                    padding-bottom: calc(~"@{w_two_col} * 0.5625%"); /*高さをpaddingで指定(16:9)*/
                    height:0px;              /*高さはpaddingで指定するためheightは0に*/
                    position: relative;
                    iframe {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        padding : 0 ;
                    }
                }
            }
            .col1 { float : left ; }
            .col2 { float : right ; }
            .col1.w30 { width : @w_two_col1_w30 ;}
            .col2.w70 { width : @w_two_col2_w70 ;}
        }
        .fixed_two_columninaze {
            .col1, .col2 { 
                width : 48% ; 
                margin : 10px 0 ;
                img { width : 100% ; }
            }
            .col1 { float : left ; }
            .col2 { float : right ; }
        }
        .fixed_two_columninaze.no_margin { * { margin : 0 ; width : 50% ; } }
        .three_columninaze {
            .col1, .col2, .col3 { 
                width : @w_three_col ; 
                margin : 10px 0 ;
            }
            .col1, .col2, .col3 { float : left ; }
            img { padding: 1% ;}
        }
        .box, .box_black, .box_light_blue, .box_blue {
            float : left ;
            width : 100% ;
            margin : 0 2.5% 25px 0 ;
            > div {
                .materialize();
                background : rgba(255, 255, 255, 0.8);
                border : 2px solid @base_color ;
                .rounded-corners(5px);
                padding : 20px ;
                b { color : @third_color ; &.hilight { color:@third_color;}}
                b.white { color: @white ;}
                table td {
                  background : @white ;
                }
                &.no_border {
                    border : none ;
                }
                //img { padding : 1% ;}
                iframe { padding : 1% ;}
                h4 { 
                    font-size : 120% ;
                    line-height : 2 ;
                    padding : 10px 0 ;
                }
                .youtube {
                    width : 100%;
                    padding-bottom: @youtube_padding_bottom; //56.25%;  /*高さをpaddingで指定(16:9)*/
                    height:0px;              /*高さはpaddingで指定するためheightは0に*/
                    position: relative;
                    iframe {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                              padding : 0 ;
                    }
                }
                .youtube_16_9 {
                    width : 100%;
                    padding-bottom: 56.25%;  /*高さをpaddingで指定(16:9)*/
                    height:0px;              /*高さはpaddingで指定するためheightは0に*/
                    position: relative;
                    iframe {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                              padding : 0 ;
                    }
                }

                .clearfix();
            }
            img {
                max-width : 100% ;
            }
        }
        .box {
            > div {
                h3 { 
                    color : @third_color ;
                    font-size : 120% ;
                    line-height : 2 ;
                    text-align: center ;
                    padding : 10px 0 ;
                } 
                h3.h3_large {
                    font-size : 160% ;
                }
                h4 { color : @third_color ; }
            }
        }
        .box_black {
            > div {
                h3 { 
                    color : @white ;
                    font-size : 120% ;
                    line-height : 2 ;
                } 
                h3.h3_large {
                    font-size : 160% ;
                }
                h4 { color : @white ; }
                background : rgba(0, 0, 0, 0.7);
                p { color : #cccccc ; }
                .rounded-corners(0);
            }
        }
        .box_light_blue, .box_blue {
            > div {
                h3 { 
                    color : @black ;
                    font-size : 120% ;
                    line-height : 2 ;
                } 
                h4 { color : @black ; }
            }
        }
        .box_light_blue { > div { background : rgba(0, 200, 255, 0.1); } }
        .box_blue       { > div { background : rgba(0, 200, 255, 0.4); } }
        a.button {
            .materialize();
            display: block ;
            margin-top: 10px ;
            text-align: center ;
            &:hover { color : @white ; }
        }
//        a.button.center {
//            margin-left : calc(~"50% - 83px");
//        }
        .clearfix();
    }
    .section.full_width { padding : 0 ; }
}


//==================================================
//                   output                         
//==================================================
//// FOR SMART PHONE
////----------------------------------------
//@media only screen and (max-width: 480px) {
//    .exec_style();
//    .disable_sp, body #header #menu ul li span.disable_sp {
//        display : none !important ;
//    }
//}
//
//// FOR TBALET DEVICE
////----------------------------------------
//@media only screen and (min-width: 481px) and (max-width: 768px) {
//    .exec_style();
//    .disable_tablet {
//        display : none !important;
//    }
//}
//
//// Desktop devices styles FOR PC
////----------------------------------------
//@media only screen and (min-width: 769px) {
//    .exec_style();
//    .disable_pc {
//        display : none !important;
//    }
//}

// FOR SMART PHONE
//----------------------------------------
@media only screen and (max-width: 480px) {
    @h1_vertical_margin : 20px ;
    @h1_font_size : 120% ;
    @w_box : 100% ;
    @title_font_size : 150% ;
    @title_h1_padding_top : 10% ;
    @w_two_col : 100% ;
    @w_three_col : 98% ;
    @w_two_col1_w30 : 98% ;
    @w_two_col2_w70 : 98% ;
    @offset_top : 50px ;
    @form_email_width : 100% ;
    @title_img_width  : 80%;
    @youtube_padding_bottom : 100% ;
    .exec_style(
        @h1_vertical_margin,
        @h1_font_size,
        @w_box,
        @title_font_size,
        @title_h1_padding_top,
        @w_two_col,
        @w_three_col,
        @w_two_col1_w30,
        @w_two_col2_w70,
        @offset_top,
        @form_email_width,
        @title_img_width,
        @youtube_padding_bottom
    );
    .disable_sp {
        display : none !important ;
    }
}


// FOR TBALET DEVICE
//----------------------------------------
@media only screen and (min-width: 481px) and (max-width: 768px) {
    @h1_vertical_margin : 20px ;
    @h1_font_size : 120% ;
    @w_box : 100% ;
    @title_font_size : 180% ;
    @title_h1_padding_top : 15% ;
    @w_two_col : 100% ;
    @w_three_col : 98% ;
    @w_two_col1_w30 : 98% ;
    @w_two_col2_w70 : 98% ;
    @offset_top : 0 ;
    @form_email_width : 100% ;
    @title_img_width  : 80%;
    @youtube_padding_bottom : 56.25% ;
    .exec_style(
        @h1_vertical_margin,
        @h1_font_size,
        @w_box,
        @title_font_size,
        @title_h1_padding_top,
        @w_two_col,
        @w_three_col,
        @w_two_col1_w30,
        @w_two_col2_w70,
        @offset_top,
        @form_email_width,
        @title_img_width,
        @youtube_padding_bottom
    );
    .disable_tablet {
        display : none !important;
    }
}

// Desktop devices styles FOR PC
//----------------------------------------
@media only screen and (min-width: 769px) {
    @h1_vertical_margin : 50px ;
    @h1_font_size : 180% ;
    @w_box : 31% ;
    @title_font_size : 200% ;
    @title_h1_padding_top : 15% ;
    @w_two_col : 48% ;
    @w_three_col : 31% ;
    @w_two_col1_w30 : 28% ;
    @w_two_col2_w70 : 68% ;
    @offset_top : 0 ; 
    @form_email_width : 48% ;
    @title_img_width  : 60%;
    @youtube_padding_bottom : 56.25% ;
    .exec_style(
        @h1_vertical_margin,
        @h1_font_size,
        @w_box,
        @title_font_size,
        @title_h1_padding_top,
        @w_two_col,
        @w_three_col,
        @w_two_col1_w30,
        @w_two_col2_w70,
        @offset_top,
        @form_email_width,
        @title_img_width,
        @youtube_padding_bottom
    );
    .disable_pc {
        display : none !important;
    }
}