@charset "utf-8";


body{

    background-color: #fff;
    color: #454649;
}

#wrapper{
    overflow: hidden;
}




header .title a{
	display: block;
	background-image: url(../img/hd_title.png);
	width: 166px;
	height: 16px;
	position: absolute;
	left: 110px;
	top: 16px;
	text-indent: -9999px;
	overflow: hidden;
}

@media print,screen and (min-width: 769px) {





    .sp{
        display: none;
    }




    #wrapper{
        position: relative;
        min-width: 1080px;
        background-image: url(../img/lines.png);
        background-position: center top;
        background-repeat: repeat-y;
    }

    #wrapper .ll{
        position: relative;
        background-image: url(../img/lines_sp_left.png);
        background-position: 0 top;
        background-repeat: repeat-y;
    }
    #wrapper .lr{
        position: relative;
        background-image: url(../img/lines_sp_right.png);
        background-position: 0 top;
        background-repeat: repeat-y;
    }


    header{
        position: fixed;
        left: 0;
        top: 0;
        height: 80px;
        z-index: 999;
    }

    header .tkworks a{
        display: block;
        background-image: url(../img/hd_tkw_logo.png);
        width: 152px;
        height: 30px;
        position: absolute;
        left: 40px;
        top: 20px;
        text-indent: -9999px;
        overflow: hidden;
    }

    header .title a{
        display: block;
        background-image: url(../img/hd_title.png);
        width: 166px;
        height: 16px;
        position: absolute;
        left: 220px;
        top: 32px;
        text-indent: -9999px;
        overflow: hidden;
    }


    header .logo a{
        display: block;
        background-image: url(../img/hd_logo.png);
        -webkit-background-size: 120px 15px;
        background-size: 120px 15px;
        width: 120px;
        height: 15px;
        position: absolute;
        right: 40px;
        top: 32px;
        text-indent: -9999px;
        overflow: hidden;
    }


    header .entry a{
        display: block;
        background-image: url(../img/hd_entry.png);
        width: 142px;
        height: 38px;
        position: absolute;
        right: 190px;
        top: 22px;
        text-indent: -9999px;
        overflow: hidden;
    }

    header .entry a:hover{
        opacity:0.7;
        -webkit-opacity:0.7;
    }



    header .menu a{
        display: block;
        background-image: url(../img/hd_menu.png);
        -webkit-background-size: 150px 22px;
        background-size:  150px 22px;
        width: 150px;
        height: 22px;
        position: absolute;
        left: 50%;
        top: 30px;
        text-indent: -9999px;
        overflow: hidden;
        margin-left: -75px;
    }
    header .menu a.active{
        background-image: url(../img/hd_menu_close.png);
    }

    header .menu a:hover{
        opacity:0.7;
        -webkit-opacity:0.7;
    }


    header .back{
       position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background-color: rgba(102,102,102,0.8);
    }

    header .set{
        position: relative;
        height: 80px;
        background-color: rgba(255,255,255,0.8);
    }

    header .hmenu{
        position: absolute;
        left: 0;
        top: 80px;
        background-color: rgba(255,255,255,0.8);
        overflow: hidden;
        width: 100%;
    }


    header .hmenu .inner{
        width: 950px;
        position: absolute;
        left: 50%;
        top: 0;
        margin-left: -475px;
    }
    header .hmenu .cat{
        float: left;
        width: 200px;
        margin-right: 50px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    header .hmenu a{
        color: #333;
        text-decoration: none;
    }

    header .hmenu a:hover{
       opacity:0.7;
        -webkit-opacity:0.7;
        display: block;
    }
    header .hmenu .cat .ctit p{
        font-size:125%;
        line-height: 1em;
        margin-top: 20px;
    }

    header .hmenu .cat ul{
        margin-top: 50px;
    }

    header .hmenu .cat ul li a{
        color: #454649;
        display: block;
        margin-bottom: 15px;
    }
    header .hmenu .cat ul li a.outside:after{
        padding-left: 5px;
        content:url(../img/outside.png);

    }




    header .hmenu .cat:last-child{
        margin-right: 0px;
    }






    footer{
        position: relative;
    }

    footer .totop{
        position: relative;
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
        box-sizing:border-box;
    }

    footer .totop a{
        display: block;
        background-image: url(../img/totop.png);
        width: 70px;
        height: 70px;
        position: absolute;
        right: 20px;
        top: -70px;
        overflow: hidden;
        text-indent: -9999px;
    }



    footer .sitemap{
        position: relative;
        background-color: rgba(63,67,82,0.2);
    }


    footer .sitemap .base{
        background-color: #d9d9dc;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100px;
        display: none;
    }




    footer .sitemap .inner{
        font-size:90%;
        padding-top:40px;
        padding-bottom: 40px;
        position: relative;
        width: 930px;
        margin-left: auto;
        margin-right: auto;
    }

    footer .sitemap .entry a{
        display: block;
        background-image: url(../img/hd_entry.png);
        width: 142px;
        height: 38px;
        position: absolute;
        right: 20px;
        bottom: 40px;
        text-indent: -9999px;
        overflow: hidden;
    }
    footer .sitemap .entry a:hover{
        opacity:0.7;
        -webkit-opacity:0.7;
    }


    footer .sitemap .lists{
    }

    footer .sitemap .lists .list{
        width: 220px;
        float: left;
    }
    footer .sitemap .lists .list li{
        display: block;
        margin-bottom: 10px;
    }

    footer .sitemap .lists .list li a{
        text-decoration: none;
        color: #333;
        line-height: 1em;
        display: inline-block;
    }
    footer .sitemap .lists .list li a:hover{
        opacity:0.7;
        -webkit-opacity:0.7;
    }

    footer .sitemap .lists .list li a.outside:after{
        padding-left: 5px;
        content:url(../img/outside.png);

    }
    footer .sitemap .lists .list li a.hd{
        font-weight: bold;
    }

    footer .sitemap .lists .list1{
        width: 100px;
    }
    footer .sitemap .lists .list2{
        width: 220px;
    }

    footer .sitemap .lists .list3{
        width: 240px;
    }
    footer .sitemap .lists .list4{
        width: 210px;
    }
    footer .sitemap .lists .list5{
        width: 140px;
    }






    footer .corp .inner{
        position: relative;
        width: 930px;
        margin-left: auto;
        margin-right: auto;
    }
    footer .corp{
        position: relative;
        background-color: rgba(255,255,255,1);
    }
    footer .corp .inner{
        position: relative;
        width: 930px;
        margin-left: auto;
        margin-right: auto;
        height: 90px;
    }
    footer .corp .tkworks a{
        display: block;
        background-image: url(../img/hd_tkw_logo.png);
        width: 152px;
        height: 30px;
        position: absolute;
        left: 0px;
        top: 25px;
        text-indent: -9999px;
        overflow: hidden;
    }


    footer .corp .copyright{
        display: block;
        position: absolute;
        right: 0px;
        top: 37px;
        font-size:90%;
    }







    #maincontent .box .plus.lt{
        position: absolute;
        left: 0px;
        top: 0px;
    }
    #maincontent .box .plus.lt img{
        position: absolute;
        left: -6px;
        top: -6px;
    }

    #maincontent .box .plus.rb{
        position: absolute;
        right: 0px;
        bottom: 0px;
    }
    #maincontent .box .plus.rb img{
        position: absolute;
        left: -6px;
        top: -5px;
    }


    #maincontent .box .plus.rt{
        position: absolute;
        right: 0px;
        top: 0px;
    }
    #maincontent .box .plus.rt img{
        position: absolute;
        left: -6px;
        top: -6px;
    }




    #maincontent .mv{
        height: 500px;
        overflow: hidden;
        position: relative;

    }

    #maincontent .mv .image{
        position: absolute;
    }


    #maincontent .mv h1{
        position: absolute;
        left: 40px;
        top:50%;
    }

    #maincontent .mv .grade{
        background-image: url(../img/mv_gradation.png);
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #maincontent .mv .grade.r{
        background-image: url(../img/mv_gradation_r.png);
    }






    #maincontent .box{
        border-top: #ddd 1px solid;
        border-bottom: #ddd 1px solid;
        padding-left: 20px;
        padding-right: 20px;
        position: relative;

    }


    #maincontent .box .back{
        overflow: hidden;
        position: absolute;
        left: 0;
        top:-50px;
        width: 100%;
        height: 100px;
        background-color: #000;
        opacity:0.1;
        -webkit-opacity:0.1;
    }
    #maincontent .box .back img{
        position: absolute;
        left: 0;
        top: 0;
    }


    #maincontent .box .inner{
        position: relative;
        max-width: 1360px;
        margin-left: auto;
        margin-right: auto;
    }



    #maincontent .box .read{
        margin-top: 40px;
        line-height: 2em;

    }






}





@media only screen and (max-width: 768px) {

    .pc{
        display: none;
    }


    img{
        width: 100%;
    }


    #wrapper{
        position: relative;
        background-image: url(../img/lines_sp_center.png);
        background-position: center top;
        background-repeat: repeat-y;
        -webkit-background-size: 20px 50px;
        background-size:: 20px 50px;
    }
    #wrapper .ll{
        position: relative;
        background-image: url(../img/lines_sp_left.png);
        background-position: left top;
        background-repeat: repeat-y;
        -webkit-background-size: 20px 50px;
        background-size:: 20px 50px;
    }
    #wrapper .lr{
        position: relative;
        background-image: url(../img/lines_sp_right.png);
        background-position: right top;
        background-repeat: repeat-y;
        -webkit-background-size: 20px 50px;
        background-size:: 20px 50px;
    }


    header{
        position: fixed;
        left: 0;
        top: 0;
        height: 55px;
        z-index: 999;
    }

    header .tkworks a{
        display: block;
        background-image: url(../img/hd_tkw_logo.png);
        -webkit-background-size: 76px 16px;
        background-size: 76px 16px;
        width: 76px;
        height: 16px;
        position: absolute;
        left: 20px;
        top: 15px;
        text-indent: -9999px;
        overflow: hidden;
    }


    header .logo a{
        display: block;
        background-image: url(../img/hd_logo.png);
        -webkit-background-size: 60px 8px;
        background-size: 60px 8px;
        width: 60px;
        height: 8px;
        position: absolute;
        right: 20px;
        top: 24px;
        text-indent: -9999px;
        overflow: hidden;
    }


    header .entry a{
        display: none;
    }




    header .menu a{
        display: block;
        background-image: url(../img/hd_menu.png);
        -webkit-background-size: 100px 15px;
        background-size: 100px 15px;
        width: 100px;
        height: 15px;
        position: absolute;
        left: 50%;
        top: 22px;
        text-indent: -9999px;
        overflow: hidden;
        margin-left: -50px;
    }


    header .menu a.active{
        background-image: url(../img/hd_menu_close.png);
    }




    header .back{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background-color: rgba(102,102,102,0.8);
    }

    header .set{
        position: relative;
        height: 55px;
        background-color: rgba(255,255,255,0.8);
    }

    header .hmenu{
        position: absolute;
        left: 0;
        top: 55px;
        background-color: rgba(255,255,255,0.8);
        width: 100%;
        overflow: auto;
    }


    header .hmenu a{
        color: #333;
        text-decoration: none;
    }

    header .hmenu .cat .ctit a{
        display: block;
        border-top: #999 1px solid;
        padding-right: 20px;
        padding-left: 20px;
        line-height: 1em;
        padding-bottom: 15px;

    }
    header .hmenu .cat .ctit .num{
        width: 30px;
        display: inline-block;
    }
    header .hmenu .cat .ctit p{
        display: inline-block;
    }

    header .hmenu .cat .ctit p{
        font-size:125%;
        line-height: 1em;
        margin-top: 20px;
    }

    header .hmenu .cat ul li a{
        color: #454649;
        display: block;
        border-top: #999 1px solid;
        padding-right: 20px;
        padding-left: 55px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    header .hmenu .cat ul li a.outside:after{
        padding-left: 5px;
        content:url(../img/outside.png);

    }


    header .hmenu .cat:last-child{
        margin-right: 0px;
    }






    footer{
        position: relative;
    }

    footer .sitemap{
        display: none;
    }




    footer .corp .inner{
        position: relative;
    }
    footer .corp{
        border-top: #ccc 0.5px solid;
        position: relative;
        background-color: rgba(255,255,255,1);
    }
    footer .corp .inner{
        position: relative;
        height: 50px;
    }
    footer .corp .tkworks a{
        display: block;
        background-image: url(../img/hd_tkw_logo.png);
        -webkit-background-size: 76px 16px;
        background-size: 76px 16px;
        width: 76px;
        height: 16px;
        position: absolute;
        left: 20px;
        top: 16px;
        text-indent: -9999px;
        overflow: hidden;
    }


    footer .corp .copyright{
        display: block;
        position: absolute;
        right: 20px;
        top: 16px;
        font-size:50%;
    }



    #maincontent .mv{
        height: 220px;
        overflow: hidden;
        position: relative;

    }

    #maincontent .mv .image{
        position: absolute;
    }

    #maincontent .mv h1{
        position: absolute;
        left: 40px;
        top:50%;
    }

    #maincontent .mv .grade{
        background-image: url(../img/mv_gradation_sp.png);
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    #maincontent .mv .grade.r{
        background-image: url(../img/mv_gradation_r_sp.png);
    }




    #maincontent .box{
        border-top: #ddd 0.5px solid;
        border-bottom: #ddd 0.5px solid;
        position: relative;

    }


    #maincontent .box .back{
        overflow: hidden;
        position: absolute;
        left: 0;
        top:-30px;
        width: 100%;
        height: 100px;
        background-color: #000;
        opacity:0.1;
        -webkit-opacity:0.1;
    }
    #maincontent .box .back img{
        position: absolute;
        left: 0;
        top: 0;
    }


    #maincontent .box .inner{
        position: relative;
        padding-left: 15px;
        padding-right: 15px;
    }



    #maincontent .box .read{
        margin-top: 20px;
        line-height: 2em;

    }



    #maincontent .box .plus{
        display: none;
    }


    footer .totop{
       display: none;
    }




}