@charset "UTF-8";
@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

/*mainimg*/
.mainimg{
                    position: relative;
	background: #bfd6e9;
                    overflow: hidden;
                    }

.mainimg video{
	display: block;
	width: 100%;
	height: auto;
	}

.mainimg img.copy{
                    width: 48.8%;
                    height: auto;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    animation-name: fadeIn;
                    animation-duration: 2s;
                    }

.mainimg nav.anchor{
                    width: 1000px;
                    position: absolute;
                    left: 50%;
                    bottom: 50px;
                    transform: translateX(-50%);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    animation-name: fadeIn;
                    animation-duration: 2s;
                    }

.mainimg nav.anchor a{
                    text-decoration: none;
                    display: block;
                    color: #ffffff;
                    font-size: 1.428em;
                    font-weight: bold;
                    text-align: center;
                    border: 1px solid #ffffff;
                    width: 150px;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 40px;
                    }

.mainimg nav.anchor div.marine{
                    width: auto;
                    height: 40px;
                    display: flex;
                    flex-flow: column;
                    align-items: center;
                    }
.mainimg nav.anchor div.marine span{
                    display: inline-block;
                    }

.mainimg nav.anchor a.newwin{
                    background: url('../../img/index/icon_newwin.png') right 15px center no-repeat;
                    background-size: 12px 10px;
                    }

.mainimg nav.anchor span.small{
                    font-weight: normal;
                    text-align: center;
                    margin-top: 0.5em;
                    color: #ffffff;
                    }



/*introduction*/
#introduction{
	padding: 100px 0;
	background: #bfd6e9;
	}

#introduction p.copy{
	font-size: 2.142em;
	font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'ＭＳ Ｐ明朝', 'ＭＳ 明朝',serif;
	font-weight: bold;
	line-height: 1.66;
	}

#introduction p.copy a:link,#introduction p.copy a:visited{
	color: #000000;
                                text-decoration: underline;
	}

#introduction div.introduction_wrap{
	width: calc(100% - 20px);
	height: 400px;
	margin-top: 50px;
	position: relative;
	}
#introduction div.warehouse.introduction_wrap,#introduction div.marine.introduction_wrap{
	margin-right: 20px;
	}
#introduction div.overland.introduction_wrap,#introduction div.international.introduction_wrap{
	margin-left: 20px;
	}

#introduction div.introduction_item{
	width: 400px;
	height: 200px;
	padding: 50px;
	background: #ffffff;
	position: absolute;
	top: 50px;
	z-index: 1;
	}

#introduction div.warehouse div.introduction_item,#introduction div.marine div.introduction_item{
	left: calc(50% - 490px);
	}
#introduction div.overland div.introduction_item,#introduction div.international div.introduction_item{
	right: calc(50% - 490px);
	}

#introduction div.warehouse div.introduction_img,#introduction div.marine div.introduction_img{
	position: absolute;
	right: 0;
	z-index: 0;
	display: block;
	width: calc(50% + 240px);
	height: 400px;
	background-size:cover;
	}
#introduction div.overland div.introduction_img,#introduction div.international div.introduction_img{
	position: absolute;
	left: 0;
	z-index: 0;
	display: block;
	width: calc(50% + 240px);
	height: 400px;
	background-size:cover;
	}
#introduction div.warehouse div.introduction_img{
	background: url('../../img/index/img_warehouse.jpg') center center no-repeat;
	}
#introduction div.overland div.introduction_img{
	background: url('../../img/index/img_overland.jpg') center center no-repeat;
	}
#introduction div.marine div.introduction_img{
	background: url('../../img/index/img_marine.jpg') center center no-repeat;
	}
#introduction div.international div.introduction_img{
	background: url('../../img/index/img_international.jpg') center center no-repeat;
	}


#introduction div.introduction_item h2{
	display: block;
	margin: 0 auto 20px;	text-align: center;
	line-height: 1;
	}
#introduction div.introduction_item h2 .txt_jpn{
	font-size: 1.428em;
	color: #005baa;
	}

#introduction div.introduction_item h2 .txt_en{
	font-size: 0.761em;
	color: #a1b4c6;
	font-family: 'Helvetica',sans-serif;
	font-weight: normal;
	}


#introduction a.btn_detail{
	display: block;
	width: 400px;
	height: 50px;
	margin: 10px auto 0;
	background: #005baa;
	position: relative;
	font-size: 1.428em;
	font-weight: bold;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	}

#introduction a.btn_detail::before{
	content: '';
	position: absolute;
	top: calc(50% - 6px);
	right: 10px;
	border-top: 6px solid transparent;
	border-right: 0px solid transparent;
	border-left: #ffffff 12px solid;
	border-bottom: 6px solid transparent;
	}
#introduction a.btn_detail:hover{
	opacity: 0.8;
	}

#introduction #threepl{
	padding-top: 50px; 
	}

/*recruiting*/
#recruiting{
	padding: 50px 0;
	background: #005baa url('../../img/index/bg_recruiting.gif');
	}

/*index_bn*/
#index_bn{
	padding: 50px 0;
	}

#index_bn .inner{
	-js-display: flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	}


#index_bn .inner a{
                                margin: 0 20px; 
	}


#index_bn a.btn_sada{
                                display: block;
                                width: 400px;
                                border: 1px solid #cccccc;
                                margin: 20px auto 0;
                                padding: 15px 0;
                                text-align: center;
                                position: relative;
                                }

#index_bn a.btn_sada::after{
                                content: '';
                                position: absolute;
                                width: 0;
                                height: 0;
                                border-style: solid;
                                border-width: 4.5px 0 4.5px 8px;
                                border-color: transparent transparent transparent #cccccc;
                                top: 50%;
                                right: 10px;
                                transform: translateY(-50%);
                                }
#index_bn a.btn_sada:hover{
                                text-decoration: none;
                                opacity: 0.7;
                                }

/*news*/
#news{
	padding: 50px 0;
	background: #333333;
	color: #ffffff;
	}
#news a{
	color: #ffffff;
	}

#news ul{
	border-top: 1px solid #ffffff;
	list-style-type: none;
	}

#news ul li{
	border-bottom: 1px solid #ffffff;
	padding: 20px 10px;
	-js-display: flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	}
#news ul li .news_date{
	width: 8.5em;
	}

#news a.btn_news{
	display: block;
	width: 400px;
	height: 50px;
	margin: 20px auto 0;
	background: #ffffff;
	position: relative;
	font-size: 1.428em;
	font-weight: bold;
	color: #333333;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	}

#news a.btn_news::before{
	content: '';
	position: absolute;
	top: calc(50% - 6px);
	right: 10px;
	border-top: 6px solid transparent;
	border-right: 0px solid transparent;
	border-left: #333333 12px solid;
	border-bottom: 6px solid transparent;
	}
#news a.btn_news:hover{
	opacity: 0.8;
	}

.roro_info{
	display: none;
	}

/* Media Queries
==========================================================================*/

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

/*mainimg*/
.mainimg img{
	display: block;
	width: 100%;
	height: auto;
	}
.mainimg img.copy{
                    width: 79.5%;
                    height: auto;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    animation-name: fadeIn;
                    animation-duration: 2s;
                    }

.mainimg nav.anchor{
                    width: calc(100% - 20px);
                    bottom: 20px;
                    }
.mainimg nav.anchor a{
                    width: calc((100% - 30px) / 5);
                    height: 30px;
                    line-height: 30px;
                    border-radius: 30px;
                    font-size: 0.85em;
                    }

.mainimg nav.anchor a.pc{
                    display: none !important;
                    }

.mainimg nav.anchor a.sp{
                    display: block !important;
                    }
.mainimg nav.anchor a.newwin{
                    background-position: right 2px center;
                    background-size: 6px 5px;
                    }
#introduction{
	padding: 10px 0;
	}

#introduction div.roro_info{
	display: block;
	margin: 10px 0;
	background: #ffffff;
	padding: 10px;
	}

#introduction p.copy{
	font-size: 1.071em;
	}

#introduction div.introduction_wrap{
	width: calc(100% - 20px);
	height: auto;
	margin-top: 10px;
	position: static;
	}
#introduction div.warehouse.introduction_wrap,#introduction div.marine.introduction_wrap{
	margin-right: 0;
	}
#introduction div.overland.introduction_wrap,#introduction div.international.introduction_wrap{
	margin-left: 0;
	}
#introduction div.introduction_item{
	width: calc(100% - 20px);
	height: auto;
	margin: 0 10px;
	padding: 10px;
	background: #ffffff;
	position: static;
	top: auto;
	}

#introduction div.introduction_item h2{
	margin: 10px auto;
	line-height: 0.9;
	}

#introduction div.introduction_item h2 .txt_jpn{
	font-size: 1.142em;
	}

#introduction div.introduction_item h2 .txt_en{
	font-size: 0.6em;
	}


#introduction div.warehouse div.introduction_item,#introduction div.marine div.introduction_item{
	left: auto;
	}
#introduction div.overland div.introduction_item,#introduction div.international div.introduction_item{
	right: auto;
	}
#introduction div.introduction_img{
	margin: 0 10px;
	}
#introduction div.warehouse div.introduction_img,#introduction div.marine div.introduction_img,#introduction div.overland div.introduction_img,#introduction div.international div.introduction_img{
	position: static;
	width: 100%;
	height: 200px;
	background-size:cover;
	}

#introduction a.btn_detail{
	width: 100%;
	height: 50px;
	margin: 10px auto 0;
	}

#introduction a.btn_detail::before{
	content: '';
	position: absolute;
	top: calc(50% - 6px);
	right: 10px;
	border-top: 6px solid transparent;
	border-right: 0px solid transparent;
	border-left: #ffffff 12px solid;
	border-bottom: 6px solid transparent;
	}

#introduction #threepl{
	padding-top: 10px; 
	}

/*recruiting*/
#recruiting{
	padding: 10px 0;
	}
/*index_bn*/
#index_bn{
	padding: 5px 0;
	}

#index_bn .inner{
	display: block;
	}

#index_bn .inner a{
                                margin: 5px 0; 
	}

#index_bn a.btn_sada{
                                width: calc(100% - 20px);
                                margin: 2px auto 0;
                                padding: 7px 0;
                                }


/*news*/
#news{
	padding: 10px 0;
	}

#news ul li{
	border-bottom: 1px solid #ffffff;
	padding: 10px 5px;
	display: block;
	}

#news ul li .news_date{
	display: block;
	width: auto;
	}

#news a.btn_news{
	width: calc(100% - 20px);
	height: 50px;
	margin: 10px auto 0;
	}

#news a.btn_news::before{
	content: '';
	position: absolute;
	top: calc(50% - 6px);
	right: 10px;
	border-top: 6px solid transparent;
	border-right: 0px solid transparent;
	border-left: #333333 12px solid;
	border-bottom: 6px solid transparent;
	}
}