/*TOPページ*/
.section{
    max-width: 1300px;
    margin: auto;
}

.news dl,
.news2 dl{
    border-bottom: 1px solid #646464;
    display: block;
    text-align: left;
    padding: 8px 0;
    display: table;
    width: 80%;
    max-width: 800px;
    margin: auto;
}

.news h2,
.news2 h2{
    display: block;
    text-align: left;
    padding: 8px 0;
    display: table;
    width: 80%;
    max-width: 800px;
    margin: auto;
    font-size: 2em;
}   

.news dl:first-of-type,
.news2 dl:first-of-type{
    border-top: 1px solid #646464;
}

.news dt,
.news dd,
.news2 dt,
.news2 dd{
    display: table-cell;
    vertical-align: top;
    font-size: 0.9em;
}

.news dt,
.news2 dt{
    width: 100px;
}

.top1{
    display: table;
    width: 100%;
    background: url("../img/topimage01.gif") center center no-repeat;
    background-size: cover;
    height: 334px;
}

.top4,
.top5{
    position: relative;
    display: block;
    width: 100%;
}

.top2,
.top3{
    width: 50%;
    float: left;
    position: relative;
}

.top2::before,
.top3::before,
.top4::before,
.top5::before{
    content: ">";
    display: block;
    position: absolute;
    font-weight: bold;
    color: #fff;
    line-height: 1em;
    width: 1em;
    padding: 3px;
    border: 1px solid #fff;
    bottom: 1vw;
    right: 1vw;
    z-index: 1;
}

.top2::after,
.top3::after,
.top4::after,
.top5::after{
    display: block;
    content: "";
}

.top2 > div,
.top3 > div,
.top4 > div,
.top5 > div{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}


.top1 p.title{
    width: 100%;
    display: table-cell;
    vertical-align: middle;
    color: #fff;
    font-weight: lighter;
    font-size: 2.6em;
    line-height: 1em;
}

.top2::after{
    padding-top: 75.1879%;
}

.top2 > div{
    background: url("../img/topimage02.gif") center center no-repeat;
    background-size: 100%;
}

.top3::after{
    padding-top: 75.1879%;
}

.top3 > div{
    background: url("../img/topimage03_c.gif") center center no-repeat;
    background-size: 100%;
}

.top4::after{
    padding-top: 33.208%;
}

.top4 > div{
    background: url("../img/topimage04.gif") center center no-repeat;
    background-size: 100%;
}

.top5::after{
    padding-top: 24.436%;
}

.top5 > div{
    background: url("../img/topimage05.gif") center center no-repeat;
    background-size: 100%;
}

.top2 > div img, 
.top3 > div img,
.top5 > div img{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.top4 > div img{
    margin-top: 3vw;
    width: 25%;
}

.top4 > div h2{
    margin: auto;
    margin-top: 1vw;
    color: #fff;
    font-size: 2em;
    line-height: 1.3em;
}

.top4 > div p{
    margin: auto;
    margin-top: 2vw;
    font-size: 0.9em;
    color: #fff;
    width: 90%;
    max-width: 380px;
} 

/*サービス紹介*/
.serviceBox a{
    display: block;
    padding: 3%;
    margin: auto;
    line-height: 1.2em;
    box-shadow: 0px 0px 2px 1px transparent;
}

.serviceBox a:hover{
    transition: 0.6s;
    box-shadow: 0px 0px 7px 1px #a0a0a0;
}

.serviceBox table{
    color: #333;
    text-align: left;
    width: 100%;
}

.serviceBox table th{
    padding-right: 1.5%;
}

.serviceBox table td{
    padding-left: 1.5%;
    vertical-align: top;
}

.serviceBox table tr:first-of-type td{
    padding-bottom: 1em;
    height: 50px;
}

.serviceBox table th{
    vertical-align: top;
}

.serviceBox table td > h3{
    font-size: 1.2em;
}

.serviceBox table td > span{
    color: #646464;
}


/*=====================
Mobile
=====================*/
@media screen and (max-width: 800px)  {
    .top2,
    .top3{
        width: 100%;
        position: relative;
    }

    .top4::after{
        padding-top: 75.1879%;
    }
    
    .top4 > div{
        background: url("../img/topimage04.gif") center center no-repeat;
        background-size: 226.57%;
    }
    
    .top4 > div img{
        width: 50%;
        margin-top: 7vw;
        margin-bottom: 5vw;
    }
    
    .top4 > div h2{
        margin: 3vw auto; 
    }
    
    .top4 > div h2 span{
        display: inline-block;
        width: 100%;
        text-align: justify;
        text-align-last: justify;
    }
    
    .top4 > div p{
        margin-top: 5vw;
    }
}
@media screen and (max-width: 500px)  {  
    .top1{
        height: 250px;
        background: url("../img/topimage001sh.gif") center center no-repeat;
    }
    
    .top1 p.title{
        font-size: 1.7em;
        letter-spacing: 0.49vw;
    }
    
    .top4 > div img{
        margin-top: 5vw;
        margin-bottom: 4vw;
    }
    
    .top4 > div h2{
        font-size: 1.7em;
        line-height: 1em;
        margin: 2vw auto;
    }
    .top4 > div h2 span{
        text-align: center;
        text-align-last: center;
    }
    
    .top4 > div h2.w40{
        width: 90% !important; 
        max-width: 200px;
    }
    
    .top4 > div h2.w70{
        width: 90% !important; 
    }
    
    .top4 > div p{
        line-height: 1.5em;
        font-size: 0.85em;
    }
    
    .news dl,
    .news h2{
        width: 100%;
    }
    
    .news dt,
    .news h2{
        padding-left: 2%;
    }
    
    .news dd,
    .news h2{
        padding-right: 2%;
    }
    
    .news2 dl,
    .news2 dt,
    .news2 dd{
        width: 100%;
        display: block
    }
    
    .news2 dl:first-of-type{
        border-top: none;
    }
    
    .serviceBox a{
        padding-bottom: 40px;
        padding-top: 40px;
        border-bottom: 1px solid #333;
    }
    
    .serviceBox a:hover{
        box-shadow: none;
        opacity: 0.7;
    }
    
    .serviceBox a:last-child{
        border: none;
    }
    
    .serviceBox table,
    .serviceBox tbody,
    .serviceBox tr,
    .serviceBox th,
    .serviceBox td{
        display: block;
        width: 100%;
        text-align: center;
        padding: 0;
    }
        
    .serviceBox td{
        padding-top: 20px;
        text-align: left;
    }
}


/*会社情報*/
.corporateTop h2{
    font-size: 2em;
    line-height: 1em;
    margin: auto;
    margin-top: 2%;
    letter-spacing: 2%;
} 

.corporateTop p{
    max-width: 420px;
    margin: auto;
    margin-top: 3%;
    margin-bottom: 2vw;
}

.corporateSection{
    margin: auto;
    width: 81%;
    max-width: 800px;
}

.map > div.parent{
    width: 95%;
    position: relative;
    padding-bottom: 60%;
    text-align: center;
    
}

.map iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.map p{
    font-size: 0.85em;
}


@media screen and (max-width: 800px)  {
    .corporateSection{
        width: 100%;
    }
    
    .corporateSection tr td:first-of-type{
        width: 90%;
        margin: auto;
    }
    
    .corporateSection img{
        width: 100% !important;
    }
    
    .map,
    .map > div.parent{
        float: none;
        width: 100% !important;
        margin: auto;
    }
}


/*お問い合わせ*/
.telBox {
    font-size: 2.5em;
    line-height: 1em;
}

.smallTelBox{
    font-size: 2em;
    line-height: 1em;
}

.telBox a,
.smallTelBox a{
    color: #333;
}

/*ビジョン*/
.visionCaption{
    font-weight: bold;
    font-size: 1.3em;
    line-height: 1.7em;
    max-width: 530px;
}

/*採用情報*/
table tr.markupLeft th,
table tr.markupRight th{
	width: 90px;
	border-radius: 50%;
	text-align: center;
}

table tr.markupLeft th img,
table tr.markupRight th img{
	border-radius: 50%;
	width: 100%;
}

table tr.markupLeft td,
table tr.markupRight td{
	width: calc(100% - 180px);
	vertical-align: top;
}

table tr.markupLeft td > p,
table tr.markupRight td > p{
	width: calc(100% - 20px);
	padding: 1em;
	min-height: 50px;
	border-radius: 5px;
	position: relative;
	text-align: left;
	margin-bottom: 30px
}

table tr.markupLeft td > p{
	background: #c3e6ec;
	margin-left: 20px;
}

table tr.markupRight td > p{
	background: #c5dd8c;
	margin-right: 20px;
	
}

table tr.markupLeft td > p::after,
table tr.markupRight td > p::after{
	content: "";
	display: block;
	height: 0;
	width: 0;
	position: absolute;
	top: 30px;
	background: transparent;
	border: 5px solid transparent;
}

table tr.markupLeft td > p::after{
	right: calc(100% - 5px);
	border-right: 20px solid #c3e6ec;
	-webkit-transform: rotate(-35deg);
	transform: rotate(-35deg);
}

table tr.markupRight td > p::after{
	left: calc(100% - 5px);
	border-left: 20px solid #c5dd8c;
	-webkit-transform: rotate(35deg);
	transform: rotate(35deg);
}

@media screen and (max-width: 500px)  {
    .telBox{
        font-size: 8vw;
    }
    
    .smallTelBox{
        font-size: 5vw;
    }
    
    .visionCaption{
        font-size: 1.2em;
    }
    
	table tr.markupLeft td,
	table tr.markupRight td{
		width: 60%;
		vertical-align: top;
	}
	
    table tr.markupLeft th,
    table tr.markupRight th{
        width: 20%;
	}
}