@media screen and (min-width:811px){

.page_title{
    width: 80%;
    max-width: 1920px;
    margin: auto;
    padding-top: min(8vw,160px);
    font-size: var(--font_36);
    font-weight: 200;
    text-align: start;
    position: relative;
}
.page_title span{
    display: block;
    font-size: var(--font_18);
    line-height: 2.5;
    letter-spacing: 0.1em;
}
.page_title::after{
    content: "LOGISTICS";
    color: #3A7DCB;
    font-size: var(--font_210);
    font-family: 'Inter', sans-serif;
    font-style: italic;
    opacity: 0.1;
    position: absolute;
    top: 20%;
}

.intro_text{
    width: min(80%, 1920px);
    margin: min(4vw, 80px) auto 0;
    font-size: var(--font_16);
    letter-spacing: .1em;
    line-height: 1.5;
}
.intro_img{
    width: min(60vw, 2360px);
    height: min(20vw, 788px);
    margin-left: auto;
    background-image: url(logistics_image/logistics_img.png);
    background-size: cover;
}



/*サービス一覧*/

.service_nav{
    width: min(70%, 1680px);
    margin: min(8vw,160px) auto 0;
}
.service_nav p{
    font-size: var(--font_18);
    font-weight: bold;
    text-align: center;
    letter-spacing: 0.1em;
}
.service_nav ul{
    width: 100%;
    margin-top: min(4vw, 80px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.service_nav ul li{
    width: 10%;
}
.service_nav ul li a{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: var(--font_14);
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.1em;
}
.service_nav ul li a::before{
    content: "";
    display: block;
    width: 100%;
    padding-top: 100%;
    background-size: cover;
}
.service_nav ul li:first-child a::before{
    background-image: url(logistics_image/marin_icon.png);
}
.service_nav ul li:nth-child(2) a::before{
    background-image: url(logistics_image/air_icon.png);
}
.service_nav ul li:nth-child(3) a::before{
    background-image: url(logistics_image/land_icon.png);
}
.service_nav ul li:nth-child(4) a::before{
    width: 90%;
    padding-top: 90%;
    background-image: url(logistics_image/customs_icon.png);
}
.service_nav ul li:last-child a::before{
    width: 90%;
    padding-top: 90%;
    background-image: url(logistics_image/product_icon.png);
}
.service_nav ul li a:hover{
    opacity: 0.7;
}



/*コンテンツ*/

.content{
    margin-top: min(10vw, 200px);
}
.content ul li{
    margin-bottom: min(16vw,380px);
    padding-top: min(8vw, 160px);
    display: flex;
    background-size: contain;
    background-repeat: no-repeat;
}
.content ul li:nth-child(odd){
    background-position: bottom right;
}
.content ul li:nth-child(even){
    flex-direction: row-reverse;
    background-position: top left;
}
#marin_transport{
    background-image: url(logistics_image/marin_bg.png);
}
#air_transport{
    background-image: url(logistics_image/air_bg.png);
}
#land_transport{
    background-image: url(logistics_image/land_bg.png);
}
#customs_clearance{
    background-image: url(logistics_image/customs_bg.png);
}
#product_storage{
    background-image: url(logistics_image/product_bg.png);
}
.content_img{
    position: relative;
}
.img{
    width: min(56vw, 2205px);
    padding-top: min(32vw, 1260px);
    background-size: cover;
    position: absolute;
}
.content ul li:nth-child(odd) .img{
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
}
.content ul li:nth-child(even) .img{
    top: 0;
    right: 0;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
}
#marin_transport .img{
    background-image: url(logistics_image/marin_img.jpg);
}
#air_transport .img{
    background-image: url(logistics_image/air_img.jpg);
}
#land_transport .img{
    background-image: url(logistics_image/land_img.jpg);
}
#customs_clearance .img{
    background-image: url(logistics_image/costoms_img.jpg);
}
#product_storage .img{
    background-image: url(logistics_image/product_img.jpg);
}
.decoration{
    padding-top: min(32vw, 1260px);
    background-color: #3A7DCB;
    opacity: 0.2;
    position: absolute;
    z-index: -1;
}
.content ul li:nth-child(odd) .decoration{
    width: min(57vw, 2244px);
    clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
    top: 5%;
}
.content ul li:nth-child(odd) .decoration:nth-child(2){
    width: min(58vw, 2284px);
    top: 10%;
}
.content ul li:nth-child(even) .decoration{
    width: min(57vw, 2244px);
    clip-path: polygon(25% 0, 100% 0%, 100% 100%, 0% 100%);
    top: -5%;
    right: 0;
}
.content ul li:nth-child(even) .decoration:nth-child(2){
    width: min(58vw, 2284px);
    top: -10%;
    right: 0;
}

.content_text{
    width: min(80%, 1920px);
    margin: auto;
    height: min(32vw, 1260px);
    display: flex;
    flex-direction: column;
}
.content ul li:nth-child(odd) .content_text{
    justify-content: end;
}
.content ul li:nth-child(even) .content_text{
    justify-content: start;
}
.content_name{
    width: 40%;
    font-size: var(--font_32);
    font-weight: bold;
}
.content_name span{
    display: block;
    margin-bottom: 2%;
    color: #3A7DCB;
    font-size: var(--font_18);
    line-height: 2;
}
.content_text p{
    font-size: var(--font_18);
    line-height: 1.5;
    letter-spacing: 0.1em;
}
.content ul li:nth-child(odd) .content_name,
.content ul li:nth-child(odd) .content_text p{
    width: 40%;
    margin-left: auto;
}
.content ul li:nth-child(even) .content_name,
.content ul li:nth-child(even) .content_text p{
    width: 40%;
    margin-right:auto;
}
}