@charset "utf-8";

#header {
	position: absolute;
	top: 0;
}
#pan {margin-bottom: 30px;}

.secbox {
	margin-bottom: 50px;
	text-align: left;
}

/* タイトル系
****************************/
.h_ttl {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
	padding: 20px 0;
	text-align: left;
	border-top: 2px solid #531b6c;
	border-bottom: 2px solid #531b6c;
}
.h_ttl img {
	margin-right: 10px;
}
.m_ttl img {
	margin-right: 10px;
	vertical-align: -4px;
}
.h_ttl p {
	display: inline-block;
	margin-right: 50px;
	font-size: 35px;
}
.l_ttl {
    margin:auto;
}
.h_ttl span {
	font-size: 21px;
	line-height: 1.5;
}
.h_ttl p span {
	font-size: 0.5em;
}
.m_ttl {
	margin-bottom: 25px;
	font-size: 32px;
}
h4 {
	font-size: 20px;
}

span.dp_color {
	display: none;
	color: #531b6c;
	font-size: 25px!important;
}
/* top
****************************/
.topimg {
	width: 1050px;
	margin: 0 auto;
}
.topbox div.flex {
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.topbox div.flex figure {
	width: 40%;
	padding: 30px;
}
.topbox div.flex .text {
	width: 60%;
	padding-top: 30px;
	text-align: left;
	font-size: 20px;
	line-height: 1.5;
}

figure.single {
	text-align: center;
}

/* 特徴
****************************/
.feature ul {
	padding-left: 50px;
	font-size: 20px;
	line-height: 1.7;
	width: 50%;
}
.feature ul li {
	position: relative;
}
.feature ul li:before {
	content: "■";
	color: #531b6c;
	display: block;
	position: absolute;
	left: -30px;
	top: -8px;
	font-size: 30px;
}

.feature .flex,
.feature .flex2 {
    display: flex;
}

.feature .flex span {
    font-size: 16px;
}

.feature .flex figure {
    margin: 20px 30px 0;
}

.feature .flex2 {
    margin: 50px 0;
    gap:50px;
    align-items: stretch;
}
.feature .flex2 .s_ttl {
    margin-bottom:20px;
}
.feature .flex2 ul {
    padding-left: 25px;
    width: 90%;
}

.feature .flex2 div {
    width: calc((100% / 2) - 15px);
    margin-left: 15px;
}

.feature .flex2 figure {
    min-height: 194px;
    text-align: center;
}

.feature .flex2 > div:nth-child(2) {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
}

.feature .flex2 > div:nth-child(2) figure {
    margin-top: auto;
    margin-bottom: auto;
    min-height: auto;
}

.feature .flex2 figure img {
    max-height: 300px;
    margin:50px 0;
}

/* 現場適用イメージ
****************************/
.onsite ul {
	font-size: 20px;
	line-height: 1.7;
	width: 100%;
}
.onsite .flex {
	display: flex;
	margin-top: 50px;
}

.onsite .flex div {
	width: calc((100% / 3) - 15px);
	margin-left: 15px;
}

.onsite p {
	font-size: 18px;
	margin-top: 30px;
}


/* 仕様
****************************/
.spec table {
    border-collapse: separate;
    *border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border-top: 2px solid #E9E9E9;
    border-right: 1px solid #E9E9E9;
    border-bottom: 1px solid #E9E9E9;
    border-left: 2px solid #E9E9E9;
    width: 100%;
    margin-top: 2em;
}

.spec table th {
    padding: 1em 2em;
    background: #cbd6cc;
    text-align: center;
    vertical-align: middle;
    font-size: 1.2em;
    border-top: none;
    border-right: 1px solid #E9E9E9;
    border-bottom: 1px solid #E9E9E9;
    border-left: none;
    color: #241c1d;
    text-align: justify;
    text-align-last: justify;
    text-justify: inter-character;
}
.spec table td {
    padding: 1em;
    background: #a9d9df;
    text-align: left;
    font-size: 1.2em;
    border-top: none;
    border-right: 1px solid #E9E9E9;
    border-bottom: 1px solid #E9E9E9;
    border-left: none;
    color: #241c1d;
}

.catalog a {
    display: block;
    width: 50%;
    margin: 0 0 10px 30px;
    padding: 5px 10px;
    background-color: #531b6c;
    color: #fff;
    font-size: 20px;
    border-top: 3px solid #a283aa;
    border-left: 3px solid #774a84;
    border-bottom: 3px solid #39034c;
    border-right: 3px solid #47115e;
    text-decoration: none;
}


/* SP版記述↓
****************************/
@media screen and (max-width: 747px) {

    h2.h_ttl {
        display: block;
    }

    #content {
        padding: 0 15px;
    }

    .topimg {
    	width: 100%;
    }

    .topbox div.flex {
        display: block;
    }

    .h_ttl p {
        font-size: 6vw;
        display: block;
        margin-right: 0;
        padding-left: 40px;
        box-sizing: border-box;
    }
    .l_ttl {
        margin-top:15px;
    }
    .h_ttl p:before {
        content: url(/images/service/common/icon_ttl_dp.png);
        display: inline-block;
        vertical-align: top;
        width: 5px;
        height: 5px;
        position: relative;
        left: -40px;
    }

    .h_ttl img {
        display: none;
    }

    .m_ttl {
        font-size: 6vw;
    }

    .h_ttl p span {
        font-size: 0.7em;
    }

    .h_ttl p span,
    .feature .flex,
    .feature .flex2,
    .onsite .flex {
    	display: block;
    }

    .feature ul {
    	width: 100%;
    	box-sizing: border-box;
    	padding-left: 35px;
    }

    .feature .flex figure {
        margin: 20px 0 0;
    	text-align: center;
    }

    .feature .flex2 figure {
        width:100%;
        min-height: auto;
    }

    .feature .flex2 figure img {
        max-height: none;
    }

    .feature .flex2 div {
        width:100%;
        margin-left:0;
    }
    .feature .flex2 > div:nth-child(2) {
                margin-left:0;
    }
    .onsite .flex div {
    	width: 100%;
    	margin: 0 0 20px 0;
    }

    .spec table tr,
    .spec table td {
        display: block;
    }
    
    .spec table th {
        display: block;
        text-align: center;
        text-align-last: initial;
    }

    .catalog a {
        width: 100%;
        margin: 10px 0;
        box-sizing: border-box;
    }
}
}