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

*{
    margin: 0;
	padding: 0;
    box-sizing: border-box;
    font-family: Georgia, "Times New Roman", Times, "serif";
}

body{
    margin-left: auto;
    margin-right: auto;
}

.main_title{
    background-image: url("image/main.png");
    background-size: cover;
    padding: 60px 30px;
    text-align: center;
    display: block;
    color: #fff;
}

h1{
    font-size: 40px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.03em;
}

h2{
    font-size: 80px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.03em;
    padding-bottom: 10px;
}

h4{
    font-size: 20px;
    font-weight: bold;
    line-height: 1.3;
    letter-spacing: 0.03em;
}

p{
    font-family: Georgia, "Times New Roman", Times, "serif";
    font-size: 13px;
    font-weight: normal;
    line-height: 1.8;
    letter-spacing: 0.03em;
    padding-bottom: 10px;
}

.sp{
    display: block;
}

.row:before, .row:after {
	content: "";
	display: table;
}

.row:after {
	clear: both;
}

.col{
    width: 100%;
}

.col a{
    text-decoration: none;
}

.web_box a{
    background-image: url("image/web_design_bg.png");
    background-size: cover;
    padding: 60px 20px;
    text-align: center;
    display: block;
    color: #fff;
    letter-spacing: 0.05em;
}


/*---------- test1背景 ----------*/
.test1{
    position: relative;
}

.test1 a{
    color: #fff;
    text-align: center;
    letter-spacing: 0.05em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}

.test1 img{
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/*---------- test2背景 ----------*/
.test2{
    position: relative;
}

.test2 a{
    color: #fff;
    text-align: center;
    letter-spacing: 0.05em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}

.test2 img{
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/*---------- test3背景 ----------*/
.test3{
    position: relative;
}

.test3 a{
    color: #fff;
    text-align: center;
    letter-spacing: 0.05em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}

.test3 img{
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/*---------- test4背景 ----------*/
.test4{
    position: relative;
}

.test4 a{
    color: #fff;
    text-align: center;
    letter-spacing: 0.05em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}

.test4 img{
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/*---------- test5背景 ----------*/
.test5{
    position: relative;
}

.test5 a{
    color: #fff;
    text-align: center;
    letter-spacing: 0.05em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}

.test5 img{
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/*---------- test6背景 ----------*/
.test6{
    position: relative;
}

.test6 a{
    color: #fff;
    text-align: center;
    letter-spacing: 0.05em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}

.test6 img{
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/*---------- test7背景 ----------*/
.test7{
    position: relative;
}

.test7 a{
    color: #fff;
    text-align: center;
    letter-spacing: 0.05em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}

.test7 img{
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/*---------- test8背景 ----------*/
.test8{
    position: relative;
}

.test8 a{
    color: #fff;
    text-align: center;
    letter-spacing: 0.05em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    padding: 0;
}

.test8 img{
    width: 100%;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}


/*=================================
  メディアクエリ
=================================*/
/*-- タブレット用 --*/
@media (min-width: 768px){
    body{
        max-width: 778px;
    }
    
    .sp{
        display: none;
    }
    
    h1{
        font-size: 35px;
    }
    
    h2{
        font-size: 50px;
        padding-bottom: 10px;
    }
    
    h4{
        font-size: 15px;
    }
    
    p{
        font-size: 12px;
        padding-bottom: 10px;
    }
    
    .col-md-half{
        width: 50%;
    }
    
    .col{
        float: left;
        padding: 0px 7px 14px;
    }
}


/*-- デスクトップ用 --*/
@media (min-width: 1280px){
    body{
        max-width: 1200px;
    }

    .col-lg-qtr{
        width: 25%;
    }
}