@charset "utf-8";

@import url("common.css");


@media screen and (max-width: 979px) {/*SP*/
div.p-title {
width: 100%;
height: 150px;
background: #d6eaf7;
}
div.p-title h2 {
margin: 0 auto;
padding: 20px 0 0 20px;
color: var(--base-color);
font-size: 1.6rem;
font-weight: bold;
}
p.breadcrumb {
margin: 0 0 0 2%;
padding: 8px 0 35px 0;
}

div.content {
width: 96%;
margin: 0 auto;
}
@scope (div.our-trucks){
ul.order {
margin: 0 0 20px 0;
display: flex;
flex-wrap: wrap;
}
ul.order li {
width: 23%;
margin: 0 2.66% 8px 0;
}
ul.order li a {
display: block;
background: #d6eaf7;
border-left: var(--base-color) 8px solid;
color: #046fb0;
padding: 3px 0 3px 4px;
text-decoration: none;
}
ul.order li a:hover {
background: #d6eaf7;
border-left: var(--sub-color) 8px solid;
color: #CC0000;
}
ul.order li:nth-child(4n) {
margin: 0 0 8px 0;
}
h3 {
background: var(--base-color);
padding: 3px 0 3px 8px;
color: #fff;
font-size: 1.3rem;
font-weight: bold;
}
div.flex {
margin: 20px 0 45px 0;
}
div.pic {
width: 100%;
margin: 0 0 5px 0;
}
div.data {
width: 100%;
margin: 0;
}
table {
min-width: 100%;
border: #ddd 1px solid;
font-size: 1.0rem;
}
th {
background: #eee;
border: #ddd 1px solid;
padding: 5px 5px 4px 5px;
font-weight: normal;
}
tr:nth-child(3) th:first-child {
background: #d1d1d1;
font-size: 0.9rem;
line-height: 1.3;
}
tr:nth-child(6) th:first-child {
background: #d1d1d1;
font-size: 0.9rem;
line-height: 1.3;
}
td {
width: 65%;
border: #ddd 1px solid;
padding: 5px 5px 4px 5px;
}
}

@scope (div.message){
div.flex {
margin: 10px 0 30px 0;
}
div.msg {
font-size: 1.2rem;
width: 90%;
margin: 0 auto 15px auto;
}
div.msg p {
margin: 0 0 1.0em 0;
}
div.msg .company {
font-family: "Shippori Mincho", serif;
font-weight: 500;
font-style: normal;
margin: 40px 0 0 0;
text-align: right;
}
div.msg .name {
font-family: "Shippori Mincho", serif;
font-weight: 800;
font-style: normal;
margin: 10px 0 0 0;
text-align: right;
font-size: 1.8rem;
}
div.pic {
width: 90%;
margin: 0 auto;
}
}

@scope (div.company-profile){
table {
width: 95%;
margin: 0 auto 30px auto;
border: #ddd 1px solid;
font-size: 1.1rem;
}
th {
background: #eee;
border: #ddd 1px solid;
padding: 12px 12px 10px 12px;
font-weight: normal;
}
td {
width: 65%;
border: #ddd 1px solid;
padding: 12px 12px 10px 12px;
}
td dl {
display: flex;
flex-wrap: wrap;
margin: 0 0 8px 0;
}
td dt {
width: 100%;
padding: 0;
font-weight: bold;
}
td dd {
width: 100%;
padding: 0 0 0 10px;
}
td li {
margin: 0 0 4px 0;
}
}

@scope (div.recruitment){
div.dtl {
font-size: 1.4rem;
background: #e8e8e8;
border: #999 2px solid;
border-radius: 10px;
padding: 10px 5px 0 5px;
margin: 0 0 30px 0;
line-height: 1.4;
}
div.dtl p {
margin: 0 0 0.7em 0;
}
div.dtl p span {
font-weight: bold;
color: var(--sub-color);
}
}

}

@media screen and (min-width: 980px) {/*PC*/
div.p-title {
width: 100%;
height: 150px;
background: #d6eaf7;
}
div.p-title h2 {
width: 980px;
margin: 0 auto;
padding: 20px;
color: var(--base-color);
font-size: 1.6rem;
font-weight: bold;
}
p.breadcrumb {
width: 980px;
margin: 0 auto;
padding: 8px 0 35px 0;
}

div.content {
width: 980px;
margin: 0 auto;
}
@scope (div.our-trucks){
ul.order {
margin: 0 0 20px 0;
display: flex;
flex-wrap: wrap;
}
ul.order li {
width: 23%;
margin: 0 2.66% 8px 0;
}
ul.order li a {
display: block;
background: #d6eaf7;
border-left: var(--base-color) 8px solid;
color: #046fb0;
padding: 3px 0 3px 4px;
text-decoration: none;
}
ul.order li a:hover {
background: #d6eaf7;
border-left: var(--sub-color) 8px solid;
color: #CC0000;
}
ul.order li:nth-child(4n) {
margin: 0 0 8px 0;
}
h3 {
background: var(--base-color);
padding: 3px 0 3px 8px;
color: #fff;
font-size: 1.3rem;
font-weight: bold;
}
div.flex {
margin: 20px 0 45px 0;
}
div.pic {
width: 45%;
margin: 0 30px 0 0;
}
div.data {
width: calc(55% - 30px);
margin: 0;
}
table {
min-width: 80%;
border: #ddd 1px solid;
font-size: 1.1rem;
}
th {
background: #eee;
border: #ddd 1px solid;
padding: 12px 12px 10px 12px;
font-weight: normal;
}
tr:nth-child(3) th:first-child {
background: #d1d1d1;
}
tr:nth-child(6) th:first-child {
background: #d1d1d1;
}
td {
width: 65%;
border: #ddd 1px solid;
padding: 12px 12px 10px 12px;
}
}

@scope (div.message){
div.flex {
margin: 20px 0 100px 0;
}
div.msg {
font-size: 1.2rem;
width: 55%;
margin: 0 60px 0 0;
}
div.msg p {
margin: 0 0 1.0em 0;
}
div.msg .company {
font-family: "Shippori Mincho", serif;
font-weight: 500;
font-style: normal;
margin: 40px 0 0 0;
text-align: right;
}
div.msg .name {
font-family: "Shippori Mincho", serif;
font-weight: 800;
font-style: normal;
margin: 10px 0 0 0;
text-align: right;
font-size: 1.8rem;
}
div.pic {
width: calc(55% - 60px);
margin: 0;
}
}

@scope (div.company-profile){
table {
width: 80%;
margin: 0 auto 60px auto;
border: #ddd 1px solid;
font-size: 1.1rem;
}
th {
background: #eee;
border: #ddd 1px solid;
padding: 12px 12px 10px 12px;
font-weight: normal;
}
td {
width: 65%;
border: #ddd 1px solid;
padding: 12px 12px 10px 12px;
}
td dl {
display: flex;
flex-wrap: wrap;
margin: 0 0 8px 0;
}
td dt {
width: calc(27% - 20px);
padding: 0 20px 0 0;
font-weight: bold;
}
td dd {
width: calc(73% - 10px);
padding: 0 0 0 10px;
}
td li {
margin: 0 0 4px 0;
}
}

@scope (div.recruitment){
div.dtl {
font-size: 1.8rem;
background: #e8e8e8;
border: #999 2px solid;
border-radius: 10px;
padding: 20px 20px 0 20px;
margin: 0 0 30px 0;
}
div.dtl p {
margin: 0 0 1.0em 0;
}
div.dtl p span {
font-weight: bold;
color: var(--sub-color);
}
}

}