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

@import url(cmn.css);
@import url(base.css);

#main {
    height: 500px;
    background: url("../images/business-images/page-title.jpg") 50% 100% no-repeat;
    background-size: cover;
}
/* ==========================================================================
	CONTENT
========================================================================== */
#delivery .inner{
background: url("../images/business-images/delivery-img.jpg") 50% 0 no-repeat;
background-size: 100% auto;
padding: 25% 0 70px 0;
}
#delivery p{
color: #fff;
}

#subcontracting .inner{
background: url("../images/business-images/subcontracting-img.jpg") 50% 0 no-repeat;
background-size: 100% auto;
padding: 25% 0 70px 0;
}
#subcontracting p{
color: #fff;
}

#warehouse .inner{
background: url("../images/business-images/warehouse-img.jpg") 50% 0 no-repeat;
background-size: 100% auto;
padding: 25% 0 70px 0;
}
#warehouse p{
color: #fff;
}
#warehouse .box{
background-color: #d9d9d9;
padding: 25px 50px;
}
#warehouse .box h3{
color: #194244;
font-size: 1.5rem;
margin-bottom: 10px;
}
#warehouse .box p{
color: #000;
}

#gallery ul{
overflow: hidden;
}
#gallery ul li{
float: left;
width: 30%;
text-align: center;
margin-right: 5%;
}
#gallery ul li:last-child{
margin-right: 0;
}
#gallery ul li img{
margin-bottom: 10px;
}

/* ------------------------------------------------------------
	 PC
   ------------------------------------------------------------ */
@media screen and (min-width: 1000px) {


}

/* ------------------------------------------------------------
	 TABLET   for - 1099px
   ------------------------------------------------------------ */
@media screen and (max-width:999px) {

#delivery .inner{
background-size: auto 100%;
padding: 40% 0 70px 0;
}

#subcontracting .inner{
background-size: auto 100%;
padding: 40% 0 70px 0;
}

#warehouse .inner{
background-size: auto 100%;
padding: 40% 0 70px 0;
}

}

/* ------------------------------------------------------------
	 SP　699pxまで
   ------------------------------------------------------------ */
@media screen and (max-width: 699px) {
#main {
height: 250px;
    background-size: cover;
}

#delivery .inner{
background-size: 100% auto;
background-color: #444442;
padding: 25% 0 30px 0;
}

#subcontracting .inner{
background-size: 100% auto;
background-color: #444442;
padding: 25% 0 30px 0;
}

#warehouse .inner{
background-size: 100% auto;
background-color: #444442;
padding: 25% 0 30px 0;
}
#warehouse .box{
padding: 10px 15px;
}
#warehouse .box h3{
font-size: 1.2rem;
margin-bottom: 5px;
}

#gallery ul li{
float: none;
width: 100%;
max-width: 400px;
text-align: center;
margin: 0 auto 20px auto;
}
#gallery ul li:last-child{
margin-right: auto;
}


}

/* ==========================================================================
    倉庫事業ここから
========================================================================== */

.title-container {
align-items: center;
margin-bottom: 20px;
}

.title-container h2 {
font-size: 3rem;
color: #194244;
margin: 0;
}

.title-container .number {
font-size: 3rem;
color: #ff6600;
margin-right: 10px;
}

.green-border {
flex: 1;
border: 0;
height: 2px;
background-color: #194244;
margin-bottom: 60px;
margin-top: 20px;
}

.info-container {
display: flex;
align-items: stretch;
}

.info-left {
flex: 1;
padding-right: 20px;
}

.info-left table {
width: 100%;
border-collapse: collapse;
}

.info-left th,
.info-left td {
padding: 30px;
border: 1px solid #ccc;
border-left: none;
border-right: none;
}

.info-left th {
text-align: center;
background-color: #f3f5f5;
width: 25%;
}

.info-left td {
text-align: left;
}

.info-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.info-right img {
width: 100%;
height: 50%;
object-fit: cover;
}

.map-container {
margin-top: 20px;
text-align: center;
}

.map-container iframe {
width: 100%;
height: 450px;
border: none;
}

@media screen and (max-width: 699px) {

.green-border {
    margin-bottom: 10px;
}
.info-left th {
    width: 25%;
}

.info-left {
    flex: 1.5;
    padding-right: 10px;
}

.info-left th,
.info-left td {
    padding: 5px;
    font-size: 10px;
}

.info-right img {
    height: 100%;
}

.map-container iframe {
    height: 300px;
}
}
/* ==========================================================================
倉庫事業ここまで
========================================================================== */