@charset "utf-8";
/* CSS Document */



@media screen and (min-width: 768px) {
    body{
        min-width: 1365px;
    }
    .pc_only{display: inline !important;}
    .sp_only{display: none !important;}

}

@media screen and (max-width: 768px) {
/* SP (ipad)*/
    body{
        min-width: 100%;
    }
    .pc_only{display: none !important;}
    .sp_only{display: inline !important;}
    
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        font-size: 12px;
    }    
    
    /*----- header ----- */
    header{
        min-height: 90px;
    }
    header h1{
        max-width: 34%;
        position: absolute;
        left: 3%;
        top: 25px;
    }
    header nav{
        right: 0;
    }
    header nav li{
        display: block;
        width: 100%;
        margin: 0 0%;
        text-align: center;
        padding: 8% 0;
    }
    header nav li a{
        color: #222 !important;
        font-size: 1.3rem;
        padding-bottom: 0;
    }
    header nav li a::after {
          background: none;
    }
    .main_vis h2{
        width: 76%;
        top: 32%;
    }
    .main_vis h3{
        top: 63%;
        font-size: 2.4rem;
        letter-spacing: .08em;
    }
    .main_vis h4{
        display: none;
    }

    
    
    
    /*----- footer ----- */
    .f_inn h3{
        display: block;
        max-width: 28%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    .f_inn .menu li{
            margin: 0 5% 20px 5%;
    }
    .f_inn .sns{
        width: 100%;
        margin: 10px 0 0 0;    
    }
    .f_inn .sns li {
        width: 35px;
        margin: 0 5px;
    }
    

    
    
    /*----- 共通パーツ ----- */
    .pankuzu ul{
        padding-left: 5%;
        padding-right: 5%;
    }
    .inner{
        padding-left: 5%;
        padding-right: 5%;
    }
    
    
    /*----- index ----- */
    .main_vis{
        /*background: url("../images/index/main_sp.png") no-repeat 0 0;*/
        background-size: cover;
        position: relative;
        height: auto;
    }
    .top_01{
        margin: 0px auto;
        padding-top: 0;
    }
    .top_01_left{
        background: url("../images/bg01.png") no-repeat left 145px / 200%;
        margin: 0px auto 50px auto;
    }
    .top_01_right{
        display: none;
    }
    .top_01 h2{
        background: url(../images/under_line.png) no-repeat center bottom;
    }
    .top_01 .top_01_inner{
        text-align: center;
    }
    .top_01 h3 a{
        margin: 30px auto 10px auto;
    }
    .top_02{
        padding-top: 30px;
    }
    .top_02 ul li:nth-child(1) p{
        font-size: 1.0rem;
    }
    .top_02 ul li:nth-child(2n) {
        margin-left: 0px;
    }
    .top_02 .btn_more a{
        max-width: 80%;
    }
    .top_03{
        padding: 90px 0 120px 0;
    }
    .top_03 .gray_box{
        padding-left: 5%;
        padding-right: 5%;
    }
    .top_03 .illust01{
        width: 10%;
        right: 75%;
        top: 260px;    
    }
    .top_03 .illust02{
        width: 29%;
        left: 63%;
        top: 270px;    
    }
    .top_04 .top_04_inner{
        text-align: center;
        padding:20px 5%;
    }
    .top_04 h2{
            background: url(../images/under_line.png) no-repeat center bottom;
    }
    .top_04 li{
        width: 100%;
        margin-bottom: 10px;
    }
    .top_04 .link_tel a{
        height: auto;
        padding: 10px 30px;    
    }
    .top_04 .link_contact a{
        height: auto;
        padding: 10px 30px;    
    }
    .top_04 .link_contact span{
        font-size: 1.5rem;
        letter-spacing: .05em;    
    }
    
    
    /*----- privacy ----- */
    .privacy01,
    .privacy02{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .privacy02 dt{
        margin-bottom: 10px;    
    }
    .privacy02 dd{
        margin-bottom: 20px;    
    }

    /*----- security ----- */
    .security01,
    .security02{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .security02 ul{
        margin-bottom: 10px;    
    }
    .security02 li{
        margin-bottom: 20px;    
    }
    
    /*----- recruit ----- */
    .recruit01,
    .recruit02{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .recruit02 h2{
        margin-bottom: 50px;
    }
    .recruit01 p{
        max-width: 80%;
    }
    .recruit02 dl dt{
        background: none;
    }
    .recruit02 dl dd{
        background: url(../images/recruit/line02.png) repeat-x right top;    
    }
    
    
    /*----- contact ----- */
    .contact01,
    .contact02{
        padding-top: 30px;
        padding-bottom: 30px;
    }    
    .contact02 table{
        width: 100%;
    }
    .contact02 .privacy_box{
        width: 100%;
    }
    .contact02 input[type="submit"],
    .contact02 input[type="button"],
    .contact02 input[type="button"]{
        width: 70%;
    margin-bottom: 20px;
    }
    
    /*----- company ----- */
    .company01{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .company01 h3{
        margin-bottom: 50px;
    }
    .company01 dl dt{
        background: none;
    }
    .company01 dl dd{
        background: url(../images/recruit/line02.png) repeat-x right top;    
    }
    .company01 .descript h4{
        display: block;
        margin: 0 auto;
        border-bottom: none;
        max-width: 189px;
        margin-bottom: 30px;
    }
    .company01 .descript .right{
        display: block;
        margin: 0 auto;
        border-top: none;
        width: 80%;
        text-align: center;
    }
    .company01 .descript h5{
        padding: 20px 0px 0px 0px;
    }
    .company01 .descript {
        border-bottom: solid 1px #eeeeee;
        padding-bottom: 60px;
    }
    
    
    /*----- service ----- */
    .service01,
    .service02{
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .service01 h2{
        margin-bottom: 50px;
    }
    .service01 h3{
        display: block;
        margin: 0 auto;
        border-bottom: none;
        width: 100%;
        margin-bottom: 10px;
    }
    .service01 h4{
        display: block;
        margin: 0 auto;
        border-bottom: none;
        width: 100%;
        margin-bottom: 30px;
    }    
    .service01 .photo{
        max-width: 90%;
        display: block;
        margin: 0 auto 30px auto;
    }
    .service01 .txt{
        max-width: 100%;
        position: relative;
        bottom: auto;
        right: 0;
    }
    .service_intro01 .left{
        float: none;
        width: 90%;
        margin: 0 auto;
    }
    .service_intro01 .left img{
        width: 100%;
    }
    .service_intro01 .right{
        width: 100%;
        float: none;
        text-align: center;
        height: auto;
    }
    .service_intro01 .right .txt{
        position: relative;
        margin: 30px 0;
        top: 0px;
        left: 0;
        transform: none;
        -webkit- transform:none;
    }
    .service_intro02 .left{
        width: 100%;
        float: none;
        text-align: center;
        height: auto;
        position: absolute;
        margin-top: 40%;
    }
    .service_intro02 .left .txt{
        position: relative;
        margin: 30px 0;
        top: 0px;
        left: 0;
        transform: none;
        text-align: center;
        -webkit- transform:none;
    }
    .service_intro02 .right{
        float: none;
        width: 90%;
        margin: 0 auto 180px auto;
    }
    .service_intro02 .right img{
        width: 100%;
    }
    
    
}





@media screen and (max-width: 480px) {
/* SP */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        font-size: 11px;
    }
    
    /*----- header ----- */
    header h1{
        max-width: 34%;
        position: absolute;
        left: 5%;
    }
    .main_vis h2{
        max-width: 76%;
        top: 32%;
    }
    .main_vis h3{
        top: 63%;
        font-size: 2.4rem;
        letter-spacing: .08em;
    }
    .main_vis h4{
        display: none;
    }
    
    
    /*----- index ----- */
    .main_vis{
        /*background: url("../images/index/main_sp.png") no-repeat 0 0;*/
        background-size: cover;
        min-height: 410px;
        position: relative;
        height: auto;
    }
    .top_01_left{
        background: url(../images/bg01.png) no-repeat left 145px / 250%;
    }
    .top_01 .top_01_inner{
        padding: 90px 0 30px 0;    
    }
    .top_01 h2{
        font-size: 3.5rem;    
    }
    .top_01 p br{
        display: none;
    }
    .top_01 p{
        text-align: left;
    }
    .top_02 ul{
        padding:40px 10% 0px 10%;
    }
    .top_02 .btn_more a{
        max-width: 90%;
    }
    .top_02 .btn_more{
        padding-bottom: 30px;
    }
    .top_02 ul li figcaption {
        padding: 20px 5% 10px 5%;
    }
    .top_03{
        padding: 90px 5% 120px 5%;    
    }
    .top_03 h2{
        top: -38px;    
    }
    .top_03 .illust01 {
        width: 10%;
        right: 65%;
        top: 310px;
    }
    .top_03 .illust02 {
        width: 29%;
        left: 53%;
        top: 330px;
    }
    
    /*----- recruit ----- */
    .recruit02 h2{
        margin-bottom: 20px;
    }
    .contact02 h3 span{
        display: block;
    }
    .recruit02 dl{
        margin: 0 auto 30px auto;    
    }
    .recruit02 dl dt{
        width: 100%;
        font-weight: bold;
        color: #0082c9;
        padding: 20px 3% 5px 3%;
    }
    .recruit02 dl dd{
        width: 100%;
        padding: 22px 3% 22px 3%;
    }
    
    
    /*----- company ----- */
    .company01 h3{
        margin-bottom: 20px;
    }
    .company01 .descript h5{
        width: 94%;
    }
    .company01 dl{
        margin: 0 auto 30px auto;    
    }
    .company01 dl dt{
        width: 100%;
        font-weight: bold;
        color: #0082c9;
        padding: 20px 3% 5px 3%;
    }
    .company01 dl dd{
        width: 100%;
        padding: 22px 3% 22px 3%;
    }
    
     /*----- service ----- */
    .service01{
        background: url(../images/service/bg.png) no-repeat top center;
        background-size: contain;
    }
    .service01 h3{
        font-size: 1.9rem;
    }
    .service02 h2{
        margin: 20px 0 20px 0;
    }
    .service_intro02 .left{
        margin-top:140px; 
    }
    .service_intro01 .right .txt br{
        display: none;
    }
    .service_intro02 .left .txt br{
        display: none;
    }
   
}	
	
@media screen and (max-width: 320px) {	
    .top_02 ul li figcaption{
        padding: 10px 5% 10px 5%;    
    }
    .top_02 ul li:nth-child(1) p{
        font-size: .9rem;
    }	
    .top_02 ul li p{
        font-size: 1.0rem;
    }
}